Erste Schritte mit AWS

Erstellen einer einfachen Webanwendung

Bereitstellen einer Webanwendung und Einrichten der Interaktivität mit einer API und einer Datenbank

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
    1. Öffnen Sie die Datei index.html, die Sie in Modul 1 erstellt haben.
    2. 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.

  • Testen der aktualisierten Webanwendung
    1. Klicken Sie auf die URL unter Domain.
    2. Die aktualisierte Web-App sollte in Ihrem Browser geladen werden.
    3. Tragen Sie Ihren Namen (oder etwas anderes) ein und klicken Sie auf die Schaltfläche „Call API (API aufrufen)“.
    4. Sie sollte eine Mitteilung sehen, die mit „Hello from Lambda (Lambda sagt hallo)“ beginnt, gefolgt von Ihrem Text.
    5. 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:

full-stack amplify console arch diagram module 5

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.

War das Modul hilfreich?

Vielen Dank
Bitte teilen Sie uns mit, was Ihnen gefallen hat.
Schließen
Es tut uns Leid Sie zu enttäuschen
Ist etwas veraltet, verwirrend oder ungenau? Bitte helfen Sie uns, dieses Tutorial zu verbessern, indem Sie Feedback geben.
Schließen

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.