AWS 入門

建立基本 Web 應用程式

部署 Web 應用程式,以 API 和資料庫新增互動性

單元 5:新增互動性至您的 Web 應用程式

在本單元中,您將修改靜態網站,以叫用 API 和顯示自訂輸入文字。

簡介

在本單元中,我們會更新在第一單元建立的靜態網站,以叫用在第三單元建立的 REST API。如此可新增根據您所輸入,顯示文字的能力。

您將學到的內容

  • 從 HTML 網頁呼叫 API Gateway API
  • 將新版本的 Web 應用程式上傳到 Amplify 主控台

主要概念

部署網站:使網站可供使用者使用。

環境:可以執行應用程式或網站的階段,例如「生產」、「開發」或「模擬」。

叫用 API:傳送事件到 API,以觸發特定行為。

 完成時間

5 分鐘

實作

  • 使用 Amplify 主控台更新 Web 應用程式
    1. 開啟您在第一單元建立的 index.html 檔案。
    2. 使用以下內容取代現有的程式碼:
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Hello World</title>
        <!-- Add some CSS to change client UI -->
        <style>
        body {
            background-color: #232F3E;
            }
        label, button {
            color: #FF9900;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 20px;
            margin-left: 40px;
            }
         input {
            color: #232F3E;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 20px;
            margin-left: 20px;
            }
        </style>
        <script>
            // define the callAPI function that takes a first name and last name as parameters
            var callAPI = (firstName,lastName)=>{
                // instantiate a headers object
                var myHeaders = new Headers();
                // add content type header to object
                myHeaders.append("Content-Type", "application/json");
                // using built in JSON utility package turn object to string and store in a variable
                var raw = JSON.stringify({"firstName":firstName,"lastName":lastName});
                // create a JSON object with parameters for API call and store in a variable
                var requestOptions = {
                    method: 'POST',
                    headers: myHeaders,
                    body: raw,
                    redirect: 'follow'
                };
                // make API call with parameters and use promises to get response
                fetch("YOUR-API-INVOKE-URL", requestOptions)
                .then(response => response.text())
                .then(result => alert(JSON.parse(result).body))
                .catch(error => console.log('error', error));
            }
        </script>
    </head>
    <body>
        <form>
            <label>First Name :</label>
            <input type="text" id="fName">
            <label>Last Name :</label>
            <input type="text" id="lName">
            <!-- set button onClick method to call function we defined passing input values as parameters -->
            <button type="button" onclick="callAPI(document.getElementById('fName').value,document.getElementById('lName').value)">Call API</button>
        </form>
    </body>
    </html>

    3.確定在字行 41 加入 API 叫用 URL (來自第三單元)。注意:若手上沒有 API 的 URL,可從 API Gateway 主控台取得;作法是按一下 API,接著按 stages (階段)。

    4.儲存檔案。

    5.僅 ZIP (壓縮) HTML 檔案。

    6.打開 Amplify 主控台

    7.按一下在單元 1 中建立的 Web 應用程式。

    8.按一下白色的 Choose files (選擇檔案) 按鈕。

    9.選擇在步驟 5 中建立的 ZIP 檔案

    10.上傳檔案後,部署過程將自動開始。看到綠色列即表示部署完成。

  • 測試更新後的 Web 應用程式
    1. 按一下 Domain (網域) 下的 URL。
    2. 更新後的 Web 應用程式就會載入至瀏覽器中。
    3. 填入名稱 (依您喜好) 再按一下 Call API (呼叫 API) 按鈕。
    4. 這時會顯示訊息,開頭為 "Hello from Lambda",接著是您填入的文字。
    5. 恭喜!您現在已經透過 Amplify 主控台部署了一個正在執行的 Web 應用程式,它可以透過 API Gateway 呼叫 Lambda 函數!

應用程式架構

現在全部單元都已完成,以下是您所建立的架構:

full-stack amplify console arch diagram module 5

我們設定的所有 AWS 服務都能安全地彼此通訊。當使用者在我們的 Web 應用程式中按一下按鈕,就能呼叫 API,觸發我們的 Lambda 函數。我們的 Lambda 函數會寫入資料庫,經由 API Gateway 傳回訊息到我們的用戶端。所有許可皆由 IAM 管理。

這個單元對您是否有幫助?

感謝您
請告訴我們您喜歡的部分。
抱歉,讓您失望
是有內容過時、令人困擾,或不準確嗎? 請提供意見回饋,協助我們改進此教學課程。

恭喜您!

您已成功在 AWS 上建立 Web 應用程式! 絕佳的下一步是:深入探究無伺服器和資料庫,繼續增進您對 AWS 雲端的知識。