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 Website

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 Dateiversion in S3

Wichtige Konzepte

Öffentlicher Lesezugriff: Jeder, der einen Link zur Datei erhält, kann sie aufrufen.

Aufrufen einer API: Ein Ereignis wird an eine API gesendet, um eine bestimmte Funktionsweise auszulösen.

 Veranschlagte Zeit

5 Minuten

Implementierung

  • Aktualisieren der in S3 gespeicherten HTML-Datei
    • Ö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. Öffnen Sie die S3-Konsole.

    6. Klicken Sie auf den Bucket, den Sie in Modul 1 erstellt haben.

    7. Klicken Sie auf die blaue Schaltfläche „Upload (Hochladen)“.

    8. Klicken Sie auf die blaue Schaltfläche „Add Files (Dateien hinzufügen)“.

    9. Wählen Sie die aktualisierte Datei index.html aus.

    10. Klicken Sie auf die blaue Schaltfläche „Next (Weiter)“.

    11. Wählen Sie im Dropdown-Menü „Manage public permissions (Öffentliche Berechtigungen verwalten)“ die Option „Grant public read access to this object(s) (Öffentlichen Zugriff auf Objekt(e) gestatten)“ aus.

    Full Stack tutorial GrantPublicRead

    12. Klicken Sie auf die links angezeigte blaue Schaltfläche „Upload (Hochladen)“.

  • Testen des aktualisierten Web-Clients
    1. Klicken Sie auf index.html.
    2. Suchen Sie unten auf dem Bildschirm nach Object URL (Objekt-URL) und klicken Sie darauf.
    3. Die aktualisierte Web-App sollte in Ihrem Browser geladen werden.
    4. Tragen Sie Ihren Namen (oder etwas anderes) ein und klicken Sie auf die Schaltfläche „Call API (API aufrufen)“.
    5. Sie sollte eine Mitteilung sehen, die mit „Hello from Lambda (Lambda sagt hallo)“ beginnt, gefolgt von Ihrem Text.
    6. Glückwunsch, Sie haben jetzt eine funktionierende Website, die auf S3 gehostet wird und über API Gateway eine Lambda-Funktion aufrufen kann!

Anwendungsarchitektur

Sie haben alle Moduls abgeschlossen und folgende Architektur erstellt:

Full Stack tutorial Module Five app arch

Alle AWS-Services, die wir eingerichtet haben, kommunizieren miteinander. Wenn ein Benutzer auf eine Schaltfläche Ihres HTML-Clients klickt, wird ein Aufruf an unsere API gesendet, die wiederum 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.
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.

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.