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 ?
- 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
Mise en œuvre
-
Mise à jour d'une application Web avec la console Amplify
- Ouvrez le fichier index.html que vous avez créé au cours du module 1.
- 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é.
- Ouvrez le fichier index.html que vous avez créé au cours du module 1.
-
Tester l'application Web mise à jour
- Cliquez sur l'URL sous Domaine.
- Votre application Web mise à jour doit se charger dans votre navigateur.
- Indiquez votre nom (ou l'élément de votre choix), puis cliquez sur le bouton Appeler l'API.
- 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 :
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.