Création d'une application Web simple

DIDACTICIEL

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

Présentation

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.

Qu'allez-vous accomplir ?

Dans ce module, vous allez :
  • Appeler une 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. », « dév. », 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.

 Temps nécessaire

5 minutes

 Services utilisés

 Date de la dernière mise à jour

4 avril 2023

Mise en œuvre

    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 fichier 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é.

    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é.
     
    Félicitations ! Vous disposez désormais d'une application Web opérationnelle déployée avec la console Amplify 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 :

Sch&eacute;ma d'architecture illustrant les services h&eacute;berg&eacute;s dans le cloud AWS, o&ugrave; les connexions sont affich&eacute;es des utilisateurs externes aux services AWS interconnect&eacute;s.

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. IAM gère toutes les autorisations.

Félicitations !

Vous avez créé une application Web dans AWS ! Dans le module suivant, vous allez nettoyer les ressources utilisées dans ce didacticiel afin qu'aucuns frais indésirables ne soient facturés sur votre compte.

Cette page vous a-t-elle été utile ?

Nettoyage des ressources