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

Introduzione
Creazione di un'applicazione Web
Creazione di una funzione serverless
Creazione di una tabella di dati
Maggiore interattività in un'applicazione Web

Modulo 5: Maggiore interattività in un'applicazione 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 dell'applicazione Web ad Amplify Console

Concetti chiave

Distribuzione di un sito Web: rendere un sito Web disponibile agli utenti.

Ambiente: una fase, ad esempio "prod", "dev" o "staging" in cui è possibile eseguire un'applicazione o sito Web.

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

 Tempo richiesto per il completamento

5 minuti

 Servizi utilizzati

Amazon API Gateway
AWS Amplify Console

Implementazione

    1. Apri il file index.html creato nel Modulo 1.
    2. 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. Comprimi (ZIP) solo il file HTML.

    6. Apri Amplify Console.

    7. Fai clic sull'applicazione Web creata nel Modulo 1.

    8. Fai clic sul pulsante bianco Scegli file.

    9. Seleziona il file ZIP creato nella fase 5.

    10. Una volta caricato il file, si avvierà automaticamente un processo di distribuzione. Non appena vedi una barra verde, significa che la distribuzione è completa.

    1. Fai clic sull'URL sotto alla voce Dominio.
    2. Nel browser si dovrebbe caricare l'applicazione Web aggiornata.
    3. Immetti il tuo nome (o quello che preferisci) e fai clic sul pulsante "Chiama API".
    4. Dovresti visualizzare un messaggio che inizia con "Benvenuto in Lambda" seguito dal testo immesso.
    5. Congratulazioni, la tua applicazione Web è funzionante e distribuita da Amplify Console, 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:

Tutti i servizi AWS configurati possono comunicare tra loro in modo sicuro. Quando un utente fa clic su un pulsante nell'applicazione Web, 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?

 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.

Approfondisci l'argomento serverless
Approfondisci l'argomento sui database