建置基本 Web 應用程式
教學
單元 5：新增互動性至您的 Web 應用程式
在本單元中，您將修改靜態網站，以調用 API 和顯示自訂文字
概觀
在本單元中，我們會更新在第一單元建立的靜態網站，以調用在第三單元建立的 REST API。如此可新增根據您所輸入，顯示文字的能力。
您會完成的目標
在本單元中，您將會：
- 從 HTML 網頁呼叫 API Gateway API
- 將新版本的 Web 應用程式上傳到 Amplify 主控台
主要概念
部署網站 – 使網站可供使用者使用。
環境 – 可以執行應用程式或網站的階段，例如「生產」、「開發」或「模擬」。
叫用 API – 傳送事件到 API，以觸發特定行為。
實作
-
使用 Amplify 主控台更新 Web 應用程式
- 開啟您在第一單元建立的 index.html 檔案。
- 使用以下內容取代現有的程式碼：
<!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，接著選擇 階段。
4.儲存檔案。
5.僅 ZIP (壓縮) HTML 檔案。
6.開啟 Amplify 主控台。
7.選擇在第一單元中建立的 Web 應用程式。
8.選擇白色的選擇檔案按鈕。
9.選取在步驟 5 中建立的 ZIP 檔案。
10.上傳檔案後，部署過程將自動開始。看到綠色列即表示部署完成。
- 開啟您在第一單元建立的 index.html 檔案。
-
測試更新的 Web 應用程式
- 選擇網域下的 URL。
- 更新後的 Web 應用程式就會載入至瀏覽器中。
- 填入名稱 (依您喜好) 再選擇呼叫 API 按鈕。
- 這時會顯示訊息，開頭為 Hello from Lambda，接著是您填入的文字。
恭喜您！ 您現在已經透過 Amplify 主控台部署了一個正在執行的 Web 應用程式，它可以透過 API Gateway 呼叫 Lambda 函數。
應用程式架構
現在全部單元都已完成，以下是您所建立的架構：
我們設定的所有 AWS 服務都能安全地彼此通訊。當使用者在我們的 Web 應用程式中選擇按鈕，就能呼叫 API，觸發我們的 Lambda 函數。我們的 Lambda 函數會寫入資料庫，經由 API Gateway 傳回訊息到我們的用戶端。IAM 管理所有許可。