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
ajout de fonctionnalités d'interactivité à l'application Web
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
Services utilisés
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 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é.
- Ouvrez le fichier index.html que vous avez créé au cours du module 1.
-
Testez 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, 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 :
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.
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.