Nozioni di base su AWS

Creazione di un'applicazione Web di base

Distribuzione di un'applicazione Web e maggiore interattività con un'API e un database

Modulo 5: Maggiore interattività in un sito Web

In questo modulo modificherai il sito Web statico per richiamare l'API e visualizzare il testo inserito personalizzato.

Introduzione

In questo modulo aggiorneremo il sito Web statico creato nel Modulo 1 per richiamare l'API REST creata nel Modulo 3. In tal modo sarà possibile visualizzare il testo in base a ciò che hai inserito.

Avrai modo di approfondire i seguenti aspetti

  • Chiamata di un'API di API Gateway da una pagina HTML
  • Caricamento di una nuova versione di un file in S3

Concetti chiave

Accesso pubblico alla lettura: concede a chiunque dotato di collegamento a un file l'accesso per visualizzarlo.

Richiamata di un'API: invio di un evento a un'API per attivare un comportamento specifico.

 Tempo richiesto per il completamento

5 minuti

Implementazione

  • Aggiornamento di un file HTML archiviato in S3
    • Apri il file index.html creato nel Modulo 1.
    • Sostituisci il codice esistente con il seguente:
    <!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. Assicurati di aggiungere l'URL di richiamo dell'API alla riga 41 (dal Modulo 3). NOTA: se non disponi dell'URL delle API, puoi ottenerlo dalla Console di API Gateway facendo clic sull'API e quindi su "fasi".

    4. Salva il file.

    5. Apri la Console di S3.

    6. Fai clic sul bucket creato nel Modulo 1.

    7. Fai clic sul pulsante blu "Carica".

    8. Fai clic sul pulsante blu "Aggiungi file".

    9. Seleziona il file index.html aggiornato.

    10. Fai clic sul pulsante blu "Avanti".

    11. Nell'elenco a discesa "Gestisci autorizzazioni pubbliche" seleziona "Concedi accesso pubblico alla lettura agli oggetti specificati".

    Full Stack tutorial GrantPublicRead

    12. Fai clic sul pulsante blu "Carica" (a sinistra).

  • Test del client Web aggiornato
    1. Fai clic su index.html.
    2. Individua "URL oggetto" in fondo alla schermata e fai clic su di esso.
    3. Nel browser si dovrebbe caricare l'applicazione Web aggiornata.
    4. Immetti il tuo nome (o quello che preferisci) e fai clic sul pulsante "Chiama API".
    5. Dovresti visualizzare un messaggio che inizia con "Benvenuto in Lambda" seguito dal testo immesso.
    6. Congratulazioni, il tuo sito Web è funzionante e in hosting su S3 che può richiamare una funzione Lambda tramite API Gateway.

Architettura dell'applicazione

Ora che tutti i moduli sono stati completati, ecco l'architettura di ciò che hai costruito:

Full Stack tutorial Module Five app arch

Tutti i servizi AWS configurati possono comunicare tra loro in modo sicuro. Quando un utente fa clic su un pulsante sul client HTML, questo effettua una chiamata alla nostra API, attivando così la funzione Lambda. Questa scrive in un database e restituisce un messaggio al client tramite API Gateway. Tutte le autorizzazioni vengono gestite da IAM.

Questo modulo è stato utile?

Grazie
Facci sapere cosa ti è piaciuto.
Spiacenti di non esserti stati d'aiuto
C'è qualcosa di obsoleto, ambiguo o approssimativo? Aiutaci a migliorare questo tutorial con il tuo feedback.

Complimenti!

Hai creato un'applicazione Web in AWS! Adesso puoi passare alla fase successiva e consolidare tua conoscenza sul cloud AWS approfondendo temi in materia di serverless e database.