建置基本 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 管理所有許可。