Erste Schritte mit AWS
Erstellen einer einfachen Webanwendung
Bereitstellen einer Webanwendung und Einrichten der Interaktivität mit einer API und einer Datenbank
Einrichten der Interaktivität der Webanwendung
Modul 5: Einrichten der Interaktivität der Webanwendung
In diesem Modul bearbeiten Sie Ihre statische Website so, dass Ihre API aufgerufen und ein benutzerdefinierter Text angezeigt wird.
Einführung
In diesem Modul aktualisieren wir die statische Website, die wir in Modul 1 erstellt haben, damit die in Modul 3 erstellte REST API aufgerufen wird. So lässt sich benutzerdefinierter Text anzeigen.
Lerninhalte
- Aufrufen einer API Gateway-API von einer HTML-Seite
- Hochladen einer neuen Version einer Webanwendung zur Amplify Konsole
Wichtige Konzepte
Bereitstellung einer Website Eine Website für Benutzer verfügbar machen.
Umgebung Eine Phase wie "prod", "dev" oder "staging", in der eine Anwendung oder Website ausgeführt werden kann.
Aufrufen einer API: Ein Ereignis wird an eine API gesendet, um eine bestimmte Funktionsweise auszulösen.
Veranschlagte Zeit
5 Minuten
Verwendete Services
Implementierung
-
Aktualisieren einer Webanwendung mit der Amplify Konsole
- Öffnen Sie die Datei index.html, die Sie in Modul 1 erstellt haben.
- Ersetzen Sie den vorhandenen Code durch Folgendes:
<!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. Fügen Sie die Aufruf-URL der API in Zeile 41 ein (aus Modul 3). HINWEIS: Falls Sie die URL Ihrer API nicht kennen, können Sie sie in der API Gateway-Konsole abrufen. Klicken Sie dazu einfach auf die API und dann auf Stages (Stufen).
4. Speichern Sie die Datei.
5. ZIP (komprimieren) Sie nur die HTML-Datei.
6. Öffnen Sie die Amplify Konsole.
7. Klicken Sie auf die in Modul 1 erstellte Webanwendung.
8. Klicken Sie auf die weiße Schaltfläche Dateien auswählen.
9. Wählen Sie die ZIP-Datei aus, die Sie in Schritt 5 erstellt haben.
10. Wenn die Datei hochgeladen wird, beginnt automatisch ein Bereitstellungsprozess. Sobald Sie einen grünen Balken sehen, ist Ihre Bereitstellung abgeschlossen.
- Öffnen Sie die Datei index.html, die Sie in Modul 1 erstellt haben.
-
Testen der aktualisierten Webanwendung
- Klicken Sie auf die URL unter Domain.
- Die aktualisierte Web-App sollte in Ihrem Browser geladen werden.
- Tragen Sie Ihren Namen (oder etwas anderes) ein und klicken Sie auf die Schaltfläche „Call API (API aufrufen)“.
- Sie sollte eine Mitteilung sehen, die mit „Hello from Lambda (Lambda sagt hallo)“ beginnt, gefolgt von Ihrem Text.
- Herzlichen Glückwunsch, Sie haben jetzt eine funktionierende Webanwendung, die von der Amplify Konsole bereitgestellt wird und über API Gateway eine Lambda-Funktion aufrufen kann!
Anwendungsarchitektur
Sie haben alle Moduls abgeschlossen und folgende Architektur erstellt:
Alle AWS-Services, die wir eingerichtet haben, kommunizieren miteinander. Wenn ein Benutzer auf eine Schaltfläche in der Webanwendung klickt, ruft er unsere API auf, die unsere Lambda-Funktion auslöst. Unsere Lambda-Funktion schreibt in eine Datenbank und gibt über API Gateway eine Mitteilung an unseren Client zurück. Alle Berechtigungen werden von IAM verwaltet.
Herzlichen Glückwunsch!
Sie haben eine Webanwendung auf AWS erstellt! Jetzt können Sie sich näher mit serverlosen Lösungen und Datenbanken beschäftigen und Ihr Wissen zu AWS Cloud vertiefen.