Erstellen einer einfachen Webanwendung

TUTORIAL

Einführung
Webanwendung erstellen
Erstellen einer serverlosen Funktion
Erstellen einer Datentabelle
Hier klicken
Interaktivität zur Webanwendung hinzufügen
Hier klicken
Ressourcen bereinigen

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.

Übersicht

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. Dadurch wird die Möglichkeit hinzugefügt, Text basierend auf Ihren Eingaben anzuzeigen.

Was Sie erreichen werden

In diesem Modul werden Sie Folgendes lernen:
  • 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.

 Minimale Bearbeitungszeit

5 Minuten

 Verwendete Services

Amazon API Gateway
AWS Amplify

 Letzte Aktualisierung

4. April 2023

Implementierung

    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 Stufen.

    4. Speichern Sie die Datei.

    5. ZIP (komprimieren) Sie nur die HTML-Datei.

    6. Öffnen Sie die Amplify-Konsole.

    7. Wählen Sie die in Modul 1 erstellte Webanwendung aus.

    8. Wählen Sie die weiße Schaltfläche Dateien auswählen aus.

    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.

    1. Wählen Sie die URL unter Domain aus.
    2. Die aktualisierte Webanwendung sollte in Ihrem Browser geladen werden.
    3. Tragen Sie Ihren Namen (oder etwas anderes) ein und wählen Sie die Schaltfläche API aufrufen aus.
    4. Sie sollten eine Mitteilung sehen, die mit Lambda sagt Hallo beginnt, gefolgt von dem Text, den Sie eingegeben haben.
     
    Herzlichen Glückwunsch! Sie haben jetzt eine funktionierende Webanwendung, die von der Amplify-Konsole bereitgestellt wird und eine Lambda-Funktion über API Gateway aufrufen kann.

Anwendungsarchitektur

Sie haben alle Module abgeschlossen und folgende Architektur erstellt:

Architekturdiagramm, das in der AWS-Cloud gehostete Services zeigt, wobei Verbindungen von externen Benutzern zu miteinander verbundenen AWS-Services angezeigt werden.

Alle von uns eingerichteten AWS-Services können sicher miteinander kommunizieren. Wenn ein Benutzer eine Schaltfläche in der Webanwendung auswählt, 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. IAM verwaltet alle Berechtigungen.

Herzlichen Glückwunsch!

Sie haben eine Webanwendung auf AWS erstellt! Im nächsten Modul werden wir die in diesem Tutorial verwendeten Ressourcen bereinigen, damit Ihrem Konto keine unerwünschten Gebühren entstehen.

War diese Seite hilfreich?

 Feedback
Modul 6 starten

Ressourcen bereinigen