Démarrer avec AWS

Création d'une application Web simple

Déploiement d'une application Web et ajout de fonctionnalités d'interactivité avec une API et une base de données

Module 5 : Ajout de fonctionnalités d'interactivité à votre application Web

Dans ce module, vous allez modifier votre site Web statique afin d'invoquer votre API et afficher un texte personnalisé.

Introduction

Dans ce module, vous allez modifier le site Web statique que vous avez créé au cours du module 1 afin d'invoquer l'API REST créée au cours du module 3. Ceci vous permettra d'afficher du texte personnalisé que vous aurez spécifié au préalable.

Opérations que vous allez apprendre à effectuer

  • Appeler une API « API Gateway » depuis une page HTML
  • Télécharger une nouvelle version d'une application Web dans la console Amplify

Concepts clés

Déployer un site Web Rendre disponible un site Web à des utilisateurs.

Environnement Une étape telle que « prod », « dev », ou « hiérarchisation » dans laquelle une application ou un site Web peuvent être exécutés.

Invocation d'une API : cette action permet d'envoyer un événement à un API pour déclencher une action spécifique.

 Durée nécessaire

5 minutes

Mise en œuvre

  • Mise à jour d'une application Web avec la console Amplify
    1. Ouvrez le fichier index.html que vous avez créé au cours du module 1.
    2. Remplacez le code existant par ce qui suit :
    <!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. Assurez-vous d'ajouter, à la ligne 41, l'URL d'invocation de l'API créée au cours du module 3. REMARQUE : si vous ne disposez pas de l'URL de votre API, vous pouvez l'obtenir dans la console API Gateway en cliquant sur votre API, puis sur Étapes.

    4. Enregistrez le fichier.

    5. ZIPPEZ (compressez) uniquement le fichier HTML.

    6. Ouvrez la console Amplify.

    7. Cliquez sur l'application Web créée au cours du module 1.

    8. Cliquez sur le bouton blanc Choisir les fichiers.

    9. Sélectionnez le dossier ZIP que vous avez créé à l'étape 5.

    10. Une fois que le fichier est téléchargé, un processus de déploiement sera automatiquement lancé. Une fois que la barre est entièrement verte, votre déploiement sera terminé.

  • Testez l'application Web mise à jour
    1. Cliquez sur l'URL sous Domaine.
    2. Votre application Web mise à jour doit se charger dans votre navigateur.
    3. Indiquez votre nom (ou l'élément de votre choix), puis cliquez sur le bouton Appeler l'API.
    4. Un message commençant par « Hello from Lambda » doit s'afficher, suivi du texte que vous avez spécifié.
    5. Félicitations ! Vous disposez désormais d'une application Web opérationnelle déployée avec la console Amplify, hébergée dans Amazon S3 et qui permet d'appeler une fonction Lambda via API Gateway.

Architecture d'application

Maintenant que tous les modules ont été réalisés, votre architecture est similaire à la suivante :

full-stack amplify console arch diagram module 5

Tous les services AWS qui ont été configurés peuvent communiquer, de façon sécurisée, les uns avec les autres. Lorsqu'un utilisateur clique sur un bouton de l'application Web, l'API est appelée, ce qui déclenche la fonction Lambda. Cette dernière permet d'écrire des données dans une base de données et de renvoyer un message au client via API Gateway. Toutes les autorisations sont gérées par IAM.

Ce module vous a-t-il été utile ?

Merci
Merci de nous indiquer ce que vous avez aimé.
Nous sommes désolés de vous décevoir.
Quelque chose est-il obsolète, déroutant ou inexact ? Aidez-nous à améliorer ce didacticiel en fournissant des commentaires.

Félicitations !

Vous avez créé une application Web dans AWS. Vous pouvez maintenant vous intéresser plus en détail aux configurations sans serveur et aux bases de données et, ainsi, approfondir vos connaissances du cloud AWS.