Apprenez sans serveur et AWS tout en créant une application pleine pile avec React

1. Bienvenue et introduction: Bonjour, et bienvenue à ce cours de partage de compétences sur la façon de créer une application Fullstack React en utilisant AWS sur serverless comme backend. Dans ce projet, nous allons apprendre comment configurer notre compte AWS sur serveur. Nous allons ensuite déployer l'API Office, puis créer un nouveau point de terminaison API, qui nous permet d'envoyer des e-mails à l'aide du service de messagerie simple d'Amazon. Nous allons ensuite construire une réaction front-end, ce qui nous permet d'entrer les détails que nous devons entrer en utilisant les hooks et l'état React, puis envoyer cette demande à notre API afin que nous recevions cet e-mail. À la fin de ce cours, vous aurez appris à créer une API Gateway lambda, qui agit comme un point de terminaison, vous permettant de créer facilement des API, saura interagir avec le SDK AWS, qui vous permet d'interagir avec d'autres services, tels que le simple service de messagerie électronique. Vous saurez également comment connecter votre application front-end React à cette API backend et faire déployer l'API backend en utilisant serverless. Alors pourquoi ne pas sauter et jeter un oeil à la première vidéo. 2. Configurer votre compte AWS: Dans cette vidéo, nous allons configurer notre compte AWS. Si vous disposez déjà d'un compte AWS auquel vous pouvez vous connecter, vous pouvez ignorer cette étape et passer directement à la vidéo suivante. Nous devons donc rechercher AWS, puis cliquer sur le lien supérieur. Pour Amazon Web Services. Vous atterrissez sur l'une de leurs pages de destination. Et nous devons regarder en haut pour créer un compte AWS. Ici, nous devons entrer notre adresse e-mail, un mot de passe, confirmer ce mot de passe et donner un nom à ce compte. Je vais donc appeler ce compte de cours AWS. Une fois sur cette page, vous pouvez choisir un compte professionnel ou personnel. Je vais aller avec un compte personnel et je vous recommande de le faire moins d'être sûr que vous allez l'utiliser comme un compte professionnel. À l'intérieur ici, vous devez ajouter un numéro de téléphone que vous êtes des contacts appartiennent, puis adapter dans votre pays, adresse et code postal. La dernière chose que vous devez faire est de lire les termes et conditions, puis de cocher cette case. Avec tout cela fait, vous pouvez cliquer sur Créer un compte et continuer. Maintenant, vous accédez à votre page d'informations de paiement. La façon dont AWS fonctionne, c'est qu'il dispose de huit niveaux gratuits du poids de notre travail AWS, c'est qu'il s'agit d'un service payant à l'utilisation. Donc, si vous créez une API et qu'il y a des demandes faites à l'API, vous paierez juste pour le nombre de demandes qui sont faites. Ce sont de minuscules, minuscules sommes d'argent. Et vous obtenez également un niveau gratuit. Cela signifie que chaque mois, vous avez un nombre défini de requêtes API, un nombre défini de Lambda, une quantité définie de dynamo que vous pouvez utiliser gratuitement avant même de payer pour quoi que ce soit. Si vous suivez ce cours, alors vous serez en mesure d'adapter tout ce que vous faites. Peser sur l'élément de niveau libre, sorte que vous serez réellement facturé n'importe quoi. Malheureusement, cela signifie que nous devons saisir une carte de crédit ou de débit. Donc, dès que nous aurons dépassé cette limite. Amazon pourrait automatiquement facturer. Par exemple, j'ai couru huit. Nous avons demandé quelques années. J' ai beaucoup perdu de projets et ma facture mensuelle s'élève à environ $1.35. Donc ce sont de minuscules, minuscules sommes d'argent. Et vous pouvez toujours revenir en arrière et supprimer des choses afin que vous ne soyez plus facturé pour eux. Une fois que vous avez rempli votre numéro de carte et que vous avez utilisé votre adresse, vous pouvez également ajouter une nouvelle adresse si nécessaire. Vous devez cliquer, vérifier et ajouter. Une fois que vous avez entré les détails de votre voiture, vous accédez à cette page où vous êtes invité à confirmer votre identité. Vous pouvez le faire soit par SMS ou en ayant un appel. Assurez-vous de sélectionner le pays approprié. Entrez votre numéro de téléphone, puis entrez le code de contrôle de sécurité au bas de la page, puis cliquez sur Envoyer un SMS. Vous recevrez alors ce message. Et vous devrez l'entrer sur votre écran pour confirmer qu'il s'agit de votre téléphone. Alors entrez votre code ici et cliquez sur Vérifier le code, et il sera prêt à remplir cette configuration. Maintenant, nous pouvons choisir notre plan d'assistance. Je vais m'amuser gratuitement. Mais si vous voulez un support supplémentaire et des réponses plus rapides à vos requêtes de support avec AWS, vous pouvez opter pour une entreprise, un plan de développement. Et si vous êtes déjà une entreprise établie et que vous savez que vous voulez un support premium, alors vous pouvez aller et sélectionner le plan d'affaires. Pour l'instant, je vais choisir le plan de base. Et c'est tout terminé. La création de votre compte AWS prend parfois un peu de temps. Mais vous pouvez toujours essayer de cliquer sur la connexion dans le bouton de la console, puis d'entrer votre adresse e-mail et votre mot de passe. Si vous y revenez plus tard et que vous devez vous connecter à votre compte, recherchez AWS. Et au lieu de cliquer sur Créer un compte AWS, cliquez sur la liste déroulante de mon compte et sélectionnez AWS Management Console. Lorsque nous cliquons dessus, il nous amènera à une page de connexion. Nous devons sélectionner l'utilisateur racine. Nous pouvons ensuite coller dans notre adresse e-mail et mot de passe. Et nous allons accéder à notre compte AWS. À l'intérieur, ici. Nous pouvons ensuite poursuivre le reste de ce cours. Comme notre compte AWS a été créé. 3. Configurer le service de l'utilisation sans Serverless avec AWS: Donc, la première chose que nous devons faire pour que tout cela fonctionne est que nous devons mettre en place un utilisateur. C' est donc sans serveur, peut apporter des modifications sur notre compte AWS. ce faire, nous nous connectons à notre compte AWS. Ensuite, nous cliquons sur la boîte de recherche et recherchons ce que je suis, gestion de l'accès aux identités. Lorsque nous cliquons ici, nous allons passer à une page où il y a beaucoup de détails différents. Il y a des groupes et des utilisateurs, ainsi que des rôles et des stratégies. Mais pour cela, tout ce que nous avons à faire est de cliquer sur les utilisations à gauche et d'ajouter un nouvel utilisateur. Ici, nous pouvons définir le nom de l'utilisateur. Je vais appeler ce partage de compétences utilisateur sans serveur. Et ici, dans le type de compte, nous voulons sélectionner l'accès programmatique. Cela signifie que nous serons en mesure d'utiliser AWS SDK et CLI pour accéder à notre compte via cet utilisateur, qui explique comment fonctionne sans serveur. Ensuite, nous donnons des autorisations. Et nous allons passer directement à Joindre les politiques existantes. Et parce que nous voulons être en mesure de faire beaucoup de choses différentes, telles que la création de compartiments S3, création d'une API, ainsi que des lambdas. Nous voulons sélectionner l'accès administrateur. Ensuite, on va aller dans les tags. Et si vous en avez besoin, vous pouvez ajouter des balises. Et cela marquera l'utilisateur afin que vous sachiez ce que cet utilisateur a fait. Enfin, nous pouvons passer en revue et nous disons simplement que nous avons le partage de compétences utilisateur sans serveur avec accès programmatique. Et ils ont une stratégie gérée d'accès administrateur. Donc, nous pouvons cliquer sur créer l'utilisateur. Cela va maintenant créer notre utilisateur ici. Et assurez-vous de ne pas fermer cet écran car nous avons besoin de ces détails. Maintenant, nous avons cette configuration. On peut aller à notre ordinateur et ouvrir un terminal. Dans notre terminal, nous devons réellement obtenir une configuration sans serveur sur notre ordinateur. La façon dont nous faisons cela est d'exécuter npm install moins g parce que c'est un paquet installé globalement et sans serveur. Maintenant, si vous n'avez pas obtenu noeud et NPM installé, et je vais lier et dans les notes de cette leçon comment vous pouvez les installer. Mais si c'est le cas, cela devrait fonctionner tout de suite. Cela prend un peu de temps à configurer, donc je reviendrai vers vous une fois que tout a été configuré. Maintenant que la loi est terminée, nous pouvons utiliser cette CLI sans serveur pour configurer les informations d'identification de cet utilisateur que nous venons de créer. La façon dont nous faisons cela est dans notre terminal, nous tapons des informations d'identification de configuration sans serveur. Et ce sont des informations d'identification pour AWS. Le fournisseur est donc AWS. Et nous voulons également dire que nous créons ces informations d'identification sur un profil. Donc tableau de bord, profil de tableau de bord. Et il va y avoir un utilisateur sans serveur de partage de compétences. La prochaine chose que nous devons ajouter à cela est les informations d'identification. Donc, nous devons Dutch Dash k, puis retourner à notre compte AWS, où nous pouvons copier notre clé d'accès et la coller ici. Ainsi que la clé. Nous devons également ajouter Dash fait des secrets. Et encore une fois, allez dans notre code. Et nous allons maintenant sélectionner notre bouton show ici, en copiant le secret. Et c'est ce que nous allons coller dans cette valeur secrète. Donc je viens de copier ça. Je vais entrer ici et coller ça dedans et appuyer sur Entrée. Ce que ça va faire, c'est mettre en place ces identifiants qu'on puisse les utiliser à l'avenir. C' est tout ce que nous devons faire pour cette leçon. Et dans la prochaine vidéo, nous allons envisager de mettre en place notre repo et de créer notre première API. 4. Déployer notre première API: Dans la dernière vidéo, nous avons configuré notre utilisateur sans serveur. Donc, dans cette vidéo, nous allons utiliser cet utilisateur pour créer notre première API. Donc, ce que nous devons faire pour commencer est de créer un dossier pour ce projet. Je vais le faire en exécutant MKDIR, qui crée un répertoire et l'appelle le cours d'email de partage de compétences. Et je vais changer de répertoire en cours d'email de partage de compétences. Donc maintenant que je suis ici, ce que nous pouvons faire est que nous pouvons créer notre dossier api. Encore une fois, nous allons utiliser la CLI sans serveur. Donc, nous allons l'appeler une fonction de création sans serveur. Et nous allons utiliser les modèles ont tiret, tiret, templates, AWS, dash node js, et puis le chemin dans lequel nous voulons installer cela. Donc tiret, tiret chemin. Et le chemin pour cela va être l'API de tiret de courrier électronique de partage de compétences. Donc, maintenant que nous avons créé ce projet d'API, nous allons aller dans le code VS, jeter un oeil au code, puis déployer notre première API. Donc, si nous allons dans une fenêtre de code visuel, si vous cliquez sur Ouvrir le dossier et trouver le cours de partage de compétences e-mail et appuyez sur ouvert. Ensuite, pour le moment, nous pouvons voir cela a un dossier d'API et promulguer. Il a un 100.json et un YAML sans serveur. Donc, dans notre YAML sans serveur, C'est là que nous configurons ce que notre paquet serverless fera lorsque nous le déployons. Il a un service. Et il est dit que nous utilisons AWS. Et le noeud 12. Il y a beaucoup de commentaires ici sur les fonctionnalités supplémentaires que vous pouvez utiliser. Mais on va les ignorer pour l'instant. Et nous pouvons regarder directement les fonctions. À l'intérieur de cette fonction, il dit qu'il y a une fonction hello et le gestionnaire est un gestionnaire. Bonjour. Si nous regardons le gestionnaire ab.js, il exporte une fonction appelée Hello, et cela prend un événement qui renvoie un certain JSON. Donc, la dernière chose que nous devons faire est de retourner dans notre YAML sans serveur. Et nous allons transformer cette fonction en une API. La façon dont nous faisons cela est que nous disons que ce gestionnaire a aussi des événements. Et l'un de ces événements est HTTP. Et ce que cela va faire, c'est que ça va se mettre en place. Une passerelle d'API, où nous pouvons ensuite l'utiliser pour accéder à ce lambda via une API. Les locaux dont nous avons besoin pour ça, Hey, configuration TTP est un chemin. Et je vais dire que le chemin pour cela est juste bonjour texte tiret. Nous pouvons vérifier si c'est un get ou un post en définissant la méthode. Et dans ce cas, ce sera une méthode get. Et enfin, nous avons une fonctionnalité appelée cause, qui permet ou interdit à l'API d'être faite une requête à partir d'une URL différente. Et dans ce cas, nous voulons définir cela sur true afin que nous puissions y accéder à partir de notre application web à l'avenir. Si nous sauvegardons cela, nous avons un dernier bit de configuration que nous devons faire. Dans le fournisseur. Nous devons dire comment nous allons déployer cela. Et on va déployer ça avec un profil. Et le profil est ce que nous avons fait plus tôt à l'intérieur de notre terminal, qui est notre partage de compétences utilisateur sans serveur. Et c'est juste dire à serverless quel ensemble d'informations d'identification à utiliser. Nous pouvons également ajouter dans une région. Et je vais le faire et mettre ça à l'Irlande. Mais vous pouvez le définir à n'importe où est la région la plus proche de vous. Donc, pour moi, l'Irlande est UE, West Dash 1. Et si je garde ça, nous avons tout ce dont nous avons besoin. Nous pouvons maintenant ouvrir notre terminal. Et à l'intérieur de notre terminal, nous pouvons cd dans notre dossier api. Et une fois que nous sommes dans ce dossier, nous pouvons exécuter SLS deploy. Et ce que cette commande fera, c'est qu'elle examinera cette séance d'entraînement YAML sans serveur quelles ressources et quels systèmes ont besoin de construire, obtenir le code et déployer tout cela le compte en utilisant notre nouveau partage de compétences utilisateur sans serveur. Cela prend un peu de temps à faire, mais je vous répondrai quand les NIH auront fini. Maintenant que cela a terminé le déploiement, Nous pouvons voir que nous avons une fonction de bonjour, qui est ce que nous attendrions parce que là, nous avons une fonction de bonjour. Et nous avons également un point de terminaison API, qui a un chemin qui est hello dash test à la fin. Ce premier bit est généré de manière aléatoire dans le cadre du déploiement de la passerelle API. Et c'est ce que nous allons tester dans une minute. Avant de le faire, nous allons à nouveau nous diriger vers notre console AWS. Et inhérent, nous allons cliquer sur les services en haut et rechercher lambda. Si nous entrons ici, nous pouvons maintenant voir que nous avons réellement API def hello lambda, et qui a été déployé il y a seulement deux minutes. Donc, revenons dans notre code, nous allons copier cette URL que nous avons ici. Et nous allons nous diriger vers notre navigateur et le coller dans un nouvel onglet. Lorsque frappe cette API, nous obtenons un message de go serverless version 1, votre fonction exécutée avec succès, puis une entrée. Dans notre code. Si nous avons réellement un coup d'oeil au gestionnaire ab.js, Nous avons un message et une entrée, et c'est ce que nous revenons de cette fonction. montre donc que ce point de terminaison API déclenche cette fonction et renvoie ces données. Bien que ce soit vraiment cool, ce que nous allons faire dans la prochaine vidéo est modifié le code dans notre API afin que nous puissions envoyer un e-mail de notre API à nos comptes clients. 5. Créer notre point de terminale de l'API « Envoyé par e-mail »: Dans la dernière vidéo, nous avons eu un juste pour déployer notre premier lambda et notre première API et tester qu'il fonctionnait. Dans cette vidéo, nous allons créer un point de terminaison API pour envoyer des e-mails à nos clients. Et commencer par ce que nous allons faire, c'est un peu de nettoyage à l'intérieur de ce fichier YAML excédentaire. Ce qu'on va faire, c'est tout effacer. Ce qui est commenté pour réduire la quantité d' encombrement dans ce fichier afin que nous puissions tout supprimer. ne nous reste donc qu'avec le fournisseur de services et les fonctions. Donc tout le reste peut aller sauver ça. Et nous avons un dossier beaucoup plus propre. Maintenant, pour commencer à créer cette nouvelle API, nous devons créer un nouveau gestionnaire. Donc défini dans notre API, nous allons créer un nouveau fichier et l'appeler envoyer email dot JS. A l'intérieur de ce fichier, nous devons créer notre code pour notre lambda. Donc, la façon dont vous créez un lambda est que vous dites que gestionnaire de points exporte est égal une fonction d'événement asynchrone. Donc, cela signifie que nous créons une fonction asynchrone qui prend le paramètre des événements. Et puis c'est là que nous traitons ça. Événement si honnête. Nous savons que nous allons transmettre l'adresse à laquelle nous l'envoyons, l'adresse à laquelle nous l'envoyons à partir d'un sujet et du texte. Donc on va extraire ça du corps de l'événement. La façon dont fonctionne la passerelle API est qu'elle stringify est le corps qu'elle envoie dans notre lambda. Donc, nous devons également posséder stringify cela. Donc, nous allons dire que const crochets bouclés pour détruire les valeurs de, nous pouvons dire à partir du sujet et texte est égal à JSON.Parse corps point de l'événement. Maintenant, la loi est faite. Nous devons vérifier que toutes ces valeurs existent car il y a la possibilité que quelqu'un ait envoyé une requête à cette API, mais pas passé toutes les données. Donc, si vous allez copier tout ça et les coller, juste pour rendre mon travail un peu plus facile. Donc, s'il n'y a pas deux ou il n'y a pas un de, ou il n'y a pas de sujet, ou il n'y a pas de texte. Ensuite, nous allons retourner une réponse 400. Et au lieu d'enregistrer le JSON exact ici, ce que je vais faire est de créer une nouvelle fonction appelée underscore 400. Et cela va prendre un objet comme paramètre. Et il va avoir un message là-dessus. Dans ce cas, je vais dire paramètre manquant sur le corps de la requête. Et maintenant, nous devons faire ce 400 fonction. Donc, au bas du fichier, nous allons dire que const soulignement 400 va être une fonction comme ça. Et ça va prendre le corps. Donc, dans ce cas, le corps va être un message. Et maintenant, nous devons mettre en place quelques paramètres. Donc, cela va retourner un objet avec des en-têtes et avec un code d'état. Et enfin avec un corps. Donc, dans ce cas, le code d'état est un 400. Donc on peut mettre le numéro de 409. Le corps. La façon dont nous devons retourner ceci est que nous devons retourner une chaîne des données. Donc, cela va être JSON dot stringify, passer dans le corps. Et enfin, nous devons définir quelques en-têtes. Il y a donc trois en-têtes que nous devons mettre en place pour que cela fonctionne. Ce sont des types de contenu avec un T. majuscule Et cela va être une barre oblique d'application JSON, qui indique la réponse que nous renvoyons un JSON. Nous avons besoin d'accès, de contrôle, de méthodes d'autorisation. Et c'est juste dire ce que les stations demandant, si nous sommes autorisés à faire un post get ou quelque chose comme ça. Et pour l'instant on va aller avec Star. Et le second est le contrôle d'accès autoriser les origines. Quelqu' un va copier ça et changer les méthodes à l'origine. Et encore une fois, laissez-le comme une étoile. est ainsi que nous, c'est l'objet JSON que nous devons retourner chaque fois que nous répondons à une API Gateway requêtes à un lambda. Et nous pouvons simplement changer le code d'état et le corps en fonction du type de réponses. Si nous revenons à notre contenu, nous pouvons maintenant poursuivre le processus. Maintenant que nous avons ces détails, ce que nous pouvons faire est que nous pouvons les utiliser pour créer les paramètres. Que nous utilisons pour transmettre au service de messagerie simple d'Amazon. Donc, const, les paramètres d'email sont égaux à un objet. Le premier est une destination. C' est un objet avec un tableau de deux adresses. Et ce tableau ne va avoir qu'un seul élément, qui est l'e-mail auquel nous envoyons ceci, ainsi que d'avoir une destination. Nous avons aussi un message. Ce message a un corps. Le corps, dans notre cas, va juste être taxé. Et ce champ de texte a la valeur de données du texte ainsi qu'un corps. Nous avons aussi besoin d'un sujet. Le sujet a un champ de données du sujet que nous avons transmis. Cela peut sembler un peu compliqué, mais avec Amazon SES, il permet de bien meilleurs contrôles tels que l'envoi différentes variantes du corps en fonction de ce que le client lit avec les appareils. La dernière chose que nous avons besoin de configurer est la source. Et c'est de là que nous l'envoyons. Dans notre cas, c'est de. Donc, ce sont nos paramètres de messagerie tous les paramètres de configuration. Donc maintenant, nous pouvons commencer à regarder à envoyer cet e-mail. Nous allons utiliser un test S, qui est le simple service de messagerie électronique. Et parce que c'est asynchrone et que nous allons utiliser un poids. Nous allons envelopper tout ça dans une prise d'essai. Et cela signifie simplement que si quelque chose se passe mal dans l'appel SES, alors nous serons en mesure d'attraper cette erreur. Donc, ce que nous devons faire maintenant est d'attendre SES dot envoyer email en passant dans nos paramètres EML. Et puis pour nous assurer qu'il s'agit d'une promesse, nous ajoutons une promesse à la fin, ce qui est quelque chose que vous pouvez faire avec beaucoup de services AWS. Si cela réussit, alors ça va continuer à l'intérieur de ce bloc d'essai. Et nous allons revenir et souligner 200 cette fois. Et cela n'a pas besoin de paramètres. Donc maintenant, nous devons en faire 200. Et nous le faisons en copiant la fonction 400. Et puis nous devons changer les 400's 28200. On n'a pas de corps là-dessus, donc on peut s'en débarrasser. Le corps ici va juste être une chaîne vide, puis changer le code d'état à 200. On peut sauver ça. Et puis revenez à notre code. Donc, c'est ce qui va se passer si c'est une demande réussie. Qu' est-ce qui va se passer si c'est une demande infructueuse, ça va tomber dans cette prise. Et il est toujours bon de consoles déconnecter vos erreurs. Donc, erreur de journal de point de console, l'envoi d'e-mail. Et puis le message d'erreur. En plus de cela, nous devons également retourner un 400. Donc, revenez le soulignement 400. Et cela va avoir un message de incapable d'envoyer l'e-mail. Nous pouvons maintenant sauver ça. Et certains d'entre vous ont peut-être remarqué que nous avons utilisé SES, mais nous ne l'avons pas défini. Donc Dy a absolument raison. Et ce que nous devons faire est de faire défiler le chemin vers le haut de notre dossier. Et avant d'exporter notre gestionnaire, nous devons dire que const AWS equals nécessite le SDK AWS. Et maintenant que nous avons le SDK, nous pouvons créer une nouvelle instance du client de service de messagerie simple. Donc, const SES équivaut à de nouveaux AWS, points, SES, et enregistrez cela. Et nous avons maintenant tout le code dont nous avons besoin ici pour envoyer un e-mail à un client à partir de notre adresse. Donc maintenant, la dernière chose que nous devons faire est d'aller dans notre fichier YAML sans serveur, trouver des fonctions R, et ajouter une nouvelle fonction. Nous devons donc aller au même niveau que le bonjour. Et j'ai dû envoyer un email. Nous devons également mettre en place un gestionnaire. Et notre gestionnaire, c'est les arts. Envoyer le gestionnaire de points d'e-mail. Donc, c'est le point de nom de fichier ce que vous avez exporté. Donc, dans notre cas, envoyez un gestionnaire de points d'e-mail. Nous avons aussi des événements. Et cela va ressembler à celui ci-dessus, où nous avons HTTP. Ça va avoir un chemin. Et cette fois, le chemin va être envoyé e-mail. Alors on va avoir une méthode. Mais cette fois, au lieu d'avoir des lacunes comme nous l'avons fait dans le top, nous voulons être en mesure de publier des données vers le haut. Donc nous partons à un poste. Et la dernière chose que nous devons faire est définie sur true afin que nous puissions y accéder à partir d'une autre URL. Si nous sauvegardons tout cela, nous avons maintenant ajouté notre fonction à notre API. Et nous avons une dernière chose à faire. Donc, par défaut, tout dans Amazon dispose du minimum d'autorisations possible pour faire son travail. Donc, parce que nous utilisons maintenant SES d'Amazon, nous devons donner à ces lambdas API et un peu d'autorisation supplémentaire. Nous le faisons en nous adressant à un fournisseur et en ajoutant une déclaration supplémentaire, qui est des énoncés de rôle de la GI. Cette déclaration ici, elle va avoir un effet qui va être autorisé, ce qui signifie que nous permettons à ces lambdas de faire quelque chose de plus aussi bien qu'un permis. Nous avons aussi une action. Et cela va être un ensemble de choses que nous permettons à ces lambdas de faire. Dans notre cas, c'est l'étoile du côlon de SES, qui dit que nous autorisons SES à faire n'importe quoi pour ces lambdas. La dernière chose que nous devons faire est d'ajouter une ressource. Et dans notre cas, cela va être une chaîne d'étoiles disant qui ont été autorisés sur l'une des adresses e-mail que nous avons stockées. Si nous sauvegardons cela, nous avons maintenant nos autorisations sont ajoutées pour notre API. Et nous avons notre nouvelle configuration de point de terminaison API. Si nous revenons à notre terminal et exécutons SLS, déployez encore une fois. Ce qui va se passer, c'est qu'il va maintenant ajouter ce point de terminaison supplémentaire et ce lambda supplémentaire à notre déploiement et leur donner les autorisations dont ils ont besoin. Ça prend un peu de temps, mais on va tester comment ça marche. Et une étape supplémentaire que nous devons faire pour que tout fonctionne. Donc maintenant que le déploiement a terminé, Nous pouvons voir que nous avons deux fonctions et nous avons deux points de fin. L' un est un get et l'autre est un post, qui est exactement ce que nous attendons. Avant de pouvoir tester cela, envoyer des e-mails, nous devons retourner dans notre console AWS et rechercher un service de messagerie simple. C' est le service que nous utilisons pour envoyer des courriels. Et avant de pouvoir envoyer des e-mails, nous devons prouver que nous les envoyons à partir d'un compte que nous possédons. Nous le faisons en accédant aux adresses e-mail et en vérifiant une nouvelle adresse e-mail. Ici, vous pouvez entrer votre propre adresse e-mail. Je suis heureux de mien, tels que certains arts, codage complet, point IO et appuyez sur vérifier cette adresse e-mail. Donc, on m'a envoyé un email. J' ai donc besoin d'aller dans ma boîte de réception et de cliquer sur le J' ai vérifié cet e-mail et je reviendrai vers vous dans une seconde. Donc, j'ai maintenant vérifié cela et rafraîchi. Et je peux voir que mon mari email a vérifié, ce qui signifie que je suis maintenant autorisé à envoyer des e-mails depuis ou vers cette adresse e-mail. Donc je vais juste copier ça. Et maintenant, ce que nous devons faire est de tester notre envoi de courriels et de pointer. La façon dont nous faisons cela est parce qu'il s'agit d'une demande de poste. Nous ne pouvons pas simplement mettre l'URL dans le navigateur. Mais il y a un outil vraiment cool appelé Post woman. Donc, si vous recherchez post woman dot IO, il ouvre ce navigateur où vous pouvez entrer votre URL. Modification de la méthode. Donc, un get ou un post ou un put, puis ajoute des données aussi bien. Donc, ici nous, nous devons vérifier que c'est un poste. Ensuite, nous devons obtenir notre URL à partir de notre déploiement et l'ajouter ici. Nous avons donc besoin d'obtenir cette URL, qui est notre envoi de courrier électronique et de le coller ici. La dernière chose que nous devons faire est d'aller et d'activer l'entrée brute, ce qui nous permet de passer un corps. Comme vous vous en souvenez, nous avons besoin de quatre paramètres. Il nous faut deux adresses. Donc ce que je vais faire, c'est que je vais coller les deux dedans. J' ai aussi besoin d'un de. Et pour l'instant, utilisez la même adresse e-mail pour envoyer vers et depuis. Mais dans la prochaine vidéo, ce que nous allons faire est que nous allons y ajouter pour que vous puissiez l'envoyer à n'importe quelle adresse que vous voulez. Nous devons également ajouter un sujet. Et je vais mettre le sujet comme e-mail de test. Et enfin, la dernière chose dont nous avons besoin, c'est le texte. Et ce texte va être une chaîne. Quelque chose dans le sens de ceci est un e-mail envoyé via mon API. Si on touche envoyer, que va-t-il se passer ? Ça va faire la demande. Et nous voyons que nous obtenons une réponse 200. Cela signifie que nous avons probablement fait l'appel API avec succès et récupéré cette réponse. Je vais maintenant sauter dans mes e-mails pour que nous puissions voir à quoi ça ressemble. Maintenant, je suis dans mon compte de messagerie. Je peux voir que j'ai un e-mail avec le sujet de je l'ai mal orthographié, mais mon e-mail de test, J'ai envoyé l'e-mail de certains pour résumer le codage complet. Et c'est le contenu du message. Cela montre simplement que notre e-mail fonctionne et que nous pouvons maintenant appuyer sur cette API pour envoyer un e-mail à notre adresse e-mail. Dans la prochaine vidéo, ce que nous allons faire est d'aller dans SES et de faire une demande pour vérifier notre compte de messagerie afin que nous puissions envoyer des e-mails à n'importe quelle adresse e-mail que nous aimons à partir de nos adresses e-mail vérifiées. Donc, lorsque nous avons fait cela, il nous permettra d'envoyer à n'importe quel client que nous entrons dans des écrous à la boîte d'adresse e-mail. 6. Se sortir du mode de sandbox (Facultatif): Dans la dernière vidéo, nous avons mis en place notre API d'e-mailing, endpoint et lambda, sans avoir testé que nous pouvons envoyer un e-mail à et à partir de notre adresse e-mail vérifiée. Dans cette vidéo, ce que nous allons faire est de la configurer pour que nous puissions envoyer e-mails à partir de nos adresses e-mail vérifiées à n'importe quel e-mail nous voulons. Pour ce faire, nous devons retourner dans le simple service de messagerie électronique. Nous pourrions rechercher ici, ou nous pourrions lister sont visités services sous juste cliqué sur le service de messagerie simple. À l'intérieur, ici. Si nous cliquons dans les statistiques décroissantes, nous pouvons voir que nous avons des comptes en mode bac à sable huit. Cela signifie que nous ne pouvons envoyer qu'à partir et à destination des adresses e-mail vérifiées. Donc, nous ne pouvons envoyer que de ou vers. Certains ne sont pas un codage complet, Das IO. Ce n'est pas génial parce qu'il n'y a pas grand intérêt de vous envoyer un e-mail. Donc, si nous revenons ici, nous pouvons demander une augmentation de huit limites d'envoi. Cela nous mènera à un nouvel onglet où nous allons vers le support Amazon. Et nous voulons faire un service lemma, augmenter et augmenter les limites d'envoi pour SES. Ici, nous pouvons entrer certains détails tels que votre bande postale, URL de votre site Web, et des détails tels que la façon dont vous n'enverrez que des e-mails aux personnes qui ont opté pour. ajustement de tous ces détails est vraiment important, même s'ils disent qu'ils sont facultatifs. Parce qu'Amazon ne vous permet pas de vérifier votre compte et de sortir du mode sandbox. Si vous ne leur avez pas dit comment ça va marcher. C' est pour les protéger afin que vous n'envoyez pas courriels à des personnes qui ne veulent pas recevoir de courriels de votre part. Alors assure-toi que tu es tombé tout ça dehors. Et puis vous pouvez descendre ici et sélectionner la région. Donc pour moi, c'est l'île EUR. Et nous voulons sélectionner le quota d'envoi quotidien. Et vous pouvez définir ceci sur un nombre. Je vais aller avec un 1000, ce qui signifie que je suis autorisé à envoyer 1000 emails par jour. Et puis c'est tout. Tant que vous avez rempli, ceux-ci sont honnêtement avec l'URL de votre site Web, à qui vous l'enverrez. Donc, si, disons, avoir un site Web que votre client a entré son e-mail disant qu'ils veulent recevoir des mises à jour et comment vous allez traiter s'il y a des plaintes. Et un bon détail pour cela est probablement aller et dire, je vais les supprimer de la liste de courrier afin qu'ils ne reçoivent pas d'e-mails futurs. Une fois que vous avez fait tout cela, vous pouvez ajouter un peu de description si vous le souhaitez, puis appuyez sur Soumettre. Cela vous permettra alors de faire cette demande et d'envoyer des courriels à plusieurs clients, pas seulement aux deux adresses e-mail vérifiées. Parfois, Amazon ne vous laisse pas faire cela, mais tout ce projet fonctionne bien si vous ne l'avez pas vérifié. Dans la prochaine vidéo, ce que nous allons faire est que nous allons jeter un oeil à la construction notre React up afin que nous ayons un front-end pour gérer la création de ces e-mails. 7. Créer notre application React: Dans la dernière vidéo, nous avons regardé la configuration de notre Amazon SES pour sortir du mode bac à sable. Si tu as fait ça, mec est génial. Mais si vous ne l'avez pas fait, nous continuerons et serons en mesure de faire tout ce qu'il faut pour pouvoir faire. Donc, dans cette vidéo, nous allons mettre en place notre React up. Donc, si vous revenez à notre code et nous pouvons fermer ces deux fichiers et dans notre terminal, mais actuellement en API. Donc, nous devons CD dans notre route, qui a le cours de partage de compétences email. Ici, nous devons installer un React up. Donc, la façon dont nous faisons cela est d'utiliser Create React up. Si vous n'avez pas déjà utilisé Create React, vous pouvez accéder à Google et rechercher l'application Create React. Et vous pourrez voir le package d'installation ici. Donc, commencer avec Create React up. Et vous pouvez suivre ce Guide de démarrage rapide pour obtenir la configuration. Donc, retour dans notre code, nous pouvons utiliser n px, créer un tiret, réagir tiret pour nous permettre de créer un nouveau réacteur. Et puis on va appeler ça. Cela va créer un nouveau dossier dans les racines de ce repo. Et va ensuite installer tous les paquets, fichiers et dépendances requis dont nous avons besoin pour exécuter notre React up. Cela prend un peu de temps à configurer, donc je reviendrai vers vous quand cela sera fait. Donc maintenant qui a terminé l'installation, Nous pouvons voir qu'il nous dit que nous pouvons exécuter Yarn, commencer à commencer nos réactions. Mais d'abord, nous allons jeter un oeil au code UPC qui est donné. Ceci est donné comme un dossier public et un dossier source. Et la première chose que nous allons regarder est app.js. Donc, ici, nous pouvons voir que nous avons une image, une balise p, une balise de paragraphe, un lien disant apprendre, réagir. Ce qu'on va faire, c'est qu'on va supprimer une partie de tout ça. Supprimez donc cette section supérieure et remplacez-la par une section H. Et H 1, on va l'appeler mon application email. Et puis en dehors de notre en-tête, nous allons ajouter une nouvelle chaîne. Et ça va juste être un conteneur de courrier électronique. Si nous sauvegardons cela, nous pouvons maintenant aller dans notre terminal et nous pouvons aller sur CD dans notre application. Et maintenant que nous sommes en place, nous pouvons lancer MPM start, ce qui va commencer notre React up. Comme vous pouvez le voir, est ouvert un nouvel onglet où je vais réagir va être chargé. Il faut un peu de temps pour se mettre en place. Et on y va. Nous avons la réponse par défaut avec notre, mon email jusqu'à contenu. Et puis tout en bas, il est dit conteneur de courrier électronique. Ce qu'on va faire, c'est qu'on va le faire mieux avec CSS pour changer ça autour d'une punaise de lit dans notre code. La première chose que nous allons faire est de changer l'E. Nous allons changer le logo que nous allons charger. Pour le moment, nous chargeons le logo dot SVG. Mais ce que je vais faire, c'est que je vais ajouter le logo de codage complet. Donc je vais traîner ça ici. Et là, nous avons le logo pour le codage complet. Dans notre app.js. Ce que nous pouvons faire, c'est que nous pouvons changer d'où nous importons le logo et modifier le codage complet. Logo point PNG. Et c'est juste traîner ça un peu. Donc oui, c'est un codage complet, logo point PNG. Si nous gardons cela et revenons ici, nous pouvons maintenant voir que le logo a changé, donc nous sommes toujours robots, mais le style n'est toujours pas tout à fait correct. Donc, ici, nous pouvons aller dans notre CSS point AP et changer quelques choses. La première chose que nous voulons changer est de rendre le logo un peu plus petit. Alors change-le de 40 hommes à 10 V min. Nous pouvons également supprimer cette section multimédia car c'est ce qui provoque la rotation de l'application. Et ça a l'air un peu fou. Maintenant, nous devons trouver notre en-tête d'application. Donc on va changer la hauteur min de 100 à 5. Et nous allons nous débarrasser de cette direction de colonne. Nous allons laisser un centre d'éléments de ligne et justifier le centre de contenu et tout le reste. Donc si on économise beaucoup, on retourne dans notre code. Nous pouvons maintenant voir que nous avons notre logo et ensuite le titre de l'application. Ça a l'air beaucoup plus propre. Maintenant, ce que nous pouvons faire est que nous pouvons réellement définir cette zone de contenu e-mail afin que nous ayons plus qu'un simple champ de texte et que nous puissions entrer une adresse e-mail, un sujet et le texte que nous voulons envoyer, puis effectivement les envoyer . C' est ce qu'on va faire dans cette prochaine vidéo. 8. Créer notre composant de formulaire d'e-mail: Dans la dernière vidéo, nous sommes arrivés à ce point où nous avons eu une réaction personnalisée vers le haut avec notre logo et notre titre avec juste une chaîne de conteneur e-mail. Et dans cette vidéo, ce que nous allons faire, c'est mettre à jour ce conteneur de courrier électronique pour qu' un nouveau composant, puis ajouter les boîtes de saisie pour l'adresse til, ainsi qu'un sujet et le contenu de l'e-mail. Si nous sautons dans notre code, ce que nous voulons faire est de remplacer ce texte par un composant. Donc, ce que nous devons faire est d'aller dans les scies et créer un nouveau fichier et appeler ce nouveau conteneur de courrier électronique dot js X. Ici, ce que nous pouvons faire est que nous devons d'abord importer React de React car c'est un composant React. Et puis nous devons déclarer la fonction comme nous le ferions normalement. Donc le conteneur de messagerie Comcast est une fonction. Et cette fonction renvoie div avec une classe de conteneur de messagerie. A l'intérieur de ce div, nous voulons toujours le texte du conteneur e-mail. Et la dernière chose que nous devons faire dans ce fichier est sauvegardée en bas, exporter le conteneur de messagerie par défaut. Si nous sauvegardons cela, nous pouvons maintenant retourner dans notre app.js. Et ici, nous avons le texte pour le conteneur e-mail. Nous pouvons supprimer cela et ajouter un nouveau composant appelé conteneur Email comme ça. Et quand je l'ai fait, il a automatiquement importé les composants fonctionnels du conteneur de courrier électronique à partir du conteneur de slash point. Si nous gardons ça, nous pouvons maintenant regarder dans notre ceinture. Et il dit toujours le conteneur de courrier électronique. Mais cette fois, il le tire de ce composant. Donc, maintenant, ce que nous pouvons faire est de retourner dans ce composant et de le mettre à jour pour avoir les champs que nous voulons. Donc, ici, ce que nous allons également faire, c'est que nous allons utiliser un paquet appelé interface utilisateur matérielle. C' est génial car nous permet de faire très facilement de belles pièces à la recherche. Donc je vais faire, c'est que je vais frapper ce plus dans un terminal pour créer un second terminal. Et ici, je vais exécuter npm installer dash, dash enregistrer le matériel. UI du tableau de bord. Appel de barre oblique. Maintenant, pendant que PSI est en cours d'exécution, ce que nous pouvons faire est que nous pouvons commencer à utiliser certains de ces composants. Donc, au lieu de dire conteneur de courrier électronique, ce que nous voulons faire est que nous voulons ajouter un groupe pour regrouper tout cela ensemble. Donc ce que je vais faire, c'est que je vais créer un élément appelé papier. Et ces éléments de papier que nous avons besoin d'importer à partir de l'interface utilisateur matérielle. Donc, importer du papier à partir d' ajoute le noyau de slash de l'interface utilisateur . Dans ce document, nous voulons ajouter un formulaire. Et nous n'avons pas besoin de l'action au téléphone. Donc, à l'intérieur de la forme, nous voulons alors mettre hors champ. La première chose dont nous avons besoin est un champ de texte. Et ce champ de texte va avoir quelques attributs dessus. Le premier attribut que nous allons avoir sur elle est un ID. Et cet ID va être l'adresse e-mail de destination. Et ainsi que cet identifiant va aussi avoir une étiquette. Et cette étiquette sera ce que nous voulons afficher juste au-dessus de cette entrée. Dans notre cas, ce sera la bonne version, donc c'est l'adresse e-mail de destination. Maintenant, lorsque nous enregistrons ce fichier, nous devons d'abord importer notre champ de texte. Donc, nous pouvons ajouter cela comme une autre importation à notre appel d'interface utilisateur matériel. Sauvez-le à nouveau, cela a maintenant fonctionné. Pour qu'il puisse passer à notre code. Et nous voyons que nous avons l'adresse e-mail. Et c'est là qu'une zone de texte dans laquelle nous pouvons entrer des choses. C' est génial, mais maintenant nous devons ajouter quelques champs de plus. Donc, en plus d'avoir un champ de texte pour l'adresse e-mail, nous voulons un autre champ de texte, qui va être e-mail, désolé, ID est égal à sujet e-mail avec une étiquette de sujet e-mail. Et un troisième, qui va être un champ de texte avec un ID de contenu de courrier électronique et une étiquette de courrier électronique. Contenu aussi. La dernière chose que nous voulons, c'est que nous voulons ajouter un bouton en bas. Donc, ce que nous pouvons faire, c'est dire que nous avons un, un autre bouton. Et on va faire un peu de style là-dessus. Donc on va dire qu'il va y avoir une variante. Et cela dit juste à ces composants de l'interface utilisateur matérielle, quel genre de Boston nous voulions être. Et on va dire que c'est un composant confiné. Nous pouvons également définir la couleur. Et dans ce cas, on va aller avec le primaire. Et puis fermez ça. Et à l'intérieur de ce bouton, nous allons l'envoyer, avoir un texto d'envoyer un email. Si nous sauvegardons tout cela, nous devons encore importer notre Boston car nous ne l'avons pas encore fait. Alors allez dans notre appel d'interface utilisateur matérielle et enregistrez-le afin que cela se construit avec succès. Nous pouvons maintenant nous diriger vers notre application et voir que nous avons trois boîtes de saisie sous le bouton. Mais la disposition de ce n'est pas génial. Donc ce qu'on va faire, c'est retourner à notre code et ajouter un peu de style. Dans notre source, crée un nouveau fichier et appelez ce fichier. Conteneur de courrier électronique enseigné CSS. Et ici, on peut ajouter quelques choses. La première chose que nous devons ajouter est un contrôle pour le conteneur de messagerie lui-même. Conteneur de courrier électronique, et ce que nous voulons faire est d'ajouter un peu de marge pour qu'il ne soit pas si proche du bord. Donc la marge va être de dix pixels. En plus de cela, nous voulons changer la disposition du formulaire à l'intérieur. Cela va changer la façon dont ces composants à l'intérieur de la forme une paire. Donc, la façon dont nous référençons qui est le formulaire d'espace conteneur e-mail. Et nous voulons ajouter un peu de rembourrage de dix pixels. Nous voulons également modifier la méthode d'affichage. Donc l'affichage va être du lin. Et enfin, la direction flexible va être colonne. Maintenant, nous avons ça. On peut sauvegarder ce fichier, retourner dans notre boîte de courrier électronique, Dr Jay Sx. Et nous devons importer ce fichier CSS. Donc, importez point slash conteneur de courrier électronique points CSS. Et maintenant, quand nous entrons dans, nous pouvons voir que cela est disposé d'une manière beaucoup plus agréable. La seule chose que je veux changer maintenant est le fait que ce bouton est beaucoup trop grand. Donc, nous pouvons revenir dans notre code et notre CSS et ajouter une autre chose qui va être le bouton de formulaire de conteneur e-mail, qui va faire référence juste à ce bouton et définir la largeur pour être un 150 pixels. Cela va changer, qui envoyer des e-mails pour être une taille beaucoup plus agréable. Sans tout faire, nous avons maintenant une application que nous ne pouvons pas taper. Sous le bouton que nous pouvons cliquer. En ce moment. Cela ne fait rien, et c'est ce que nous allons couvrir dans la prochaine vidéo, où nous allons ajouter de l'état à ceci afin que nous puissions stocker ces champs de données. 9. Ajouter de l'état à notre composant: Dans la dernière vidéo, nous avons créé ce composant et ajouté ces champs d'entrée où nous pouvons taper du contenu. Mais dans cette vidéo, nous allons maintenant ajouter l'état afin que nous puissions prendre ces valeurs et les utiliser pour quelque chose. Donc, si nous allons dans notre application et notre conteneur dot j x x, nous allons utiliser les crochets React et l'état de réaction. Donc, en haut de ce fichier, nous voulons créer une nouvelle variable d'état pour l'e-mail de destination. Et la façon dont nous faisons cela avec des crochets est de dire que Comcast et ensuite déclarer un e-mail de destination de tableau, jeu de virgules. Destination, email est égal aux états américains, et pour l'instant va être une chaîne vide. Alors qu'avons-nous fait dans cette ligne ? Nous avons créé une variable appelée Destination email, qui est la valeur de l'e-mail actuellement. Et nous avons créé une fonction. Et cette fonction nous permet de passer quelques nouvelles données, ce qui va mettre à jour l'état et changer la valeur de notre email de destination. La façon dont nous utilisons cela est que si nous descendons à notre champ de texte ici, nous pouvons ajouter quelques paramètres supplémentaires. Donc ici, nous pouvons rester à la place changer la valeur. Et la valeur va être l'e-mail de destination. Cela signifie que quelle que soit cette valeur est dans l'état, c'est ce que la valeur de ce champ de texte va également être. En plus de cela, nous avons une capacité d'art et de changement. Et cela va être une fonction qui est appelée chaque fois que quelqu'un change la valeur de ceci. Donc, ce changement déclenche un événement. Et ce que nous voulons faire, c'est que nous voulons définir l'e-mail de destination. Donc, e point cible la valeur de point comme ça, et enregistrez cela. Donc, ici, nous avons utilisé des états américains, mais nous n'avons pas vraiment importé vers le bas. Donc, ce que nous devons faire, c'est monter pour réagir au sommet des importations. Et ainsi que l'importation réagit. Nous pouvons également importer l'état américain. Cela a maintenant réussi. Et bien que cela semble fonctionner exactement de la même manière, nous avons cette valeur stockée dans l'état, alors que cette valeur est une valeur incontrôlée à laquelle nous n'avons pas accès dans notre application. Ce que nous allons faire maintenant est d'ajouter une fonction supplémentaire juste pour montrer des points. Nous avons contrôlé cet état. Et cette fonction va être une fonction d'envoi. Donc const, send est une fonction. Et ici pour l'instant, nous allons consigner l'état actuel des points de la console. Et ça va être un objet. Avec l'e-mail de destination. Cette fonction d'envoi, nous pouvons réellement ajouter à notre bouton. Ainsi, ainsi qu'une variante et une couleur, nous pouvons ajouter un clic, qui dans notre cas va juste être envoyé. Si nous sauvegardons ceci et revenons à notre code, nous pouvons taper quelque chose dans notre e-mail de destination, puis nous pouvons taper quelque chose dans notre sujet. Et si nous allons dans notre console et appuyez sur Envoyer un e-mail, nous pouvons voir que l'état actuel a l'e-mail de destination, mais il n'a pas de sujet. Ce que nous devons maintenant faire, c'est répéter ce processus. Mais pour le sujet et le contenu. Donc const sujet jeu de virgules, sujet est égal à l'état américain. Et nous allons commencer avec une chaîne vide. Nous disons ensuite aussi que le texte const est égal et défini le texte égal à l'utilisation de l'état. Juste comme ça. Et maintenant, nous pouvons descendre à nos champs de texte d'entrée et avoir ces paramètres supplémentaires. Donc, ici, nous pouvons définir la valeur égale sujet et onChange égale une fonction qui prend l'événement et les appels jeu sujet. Avec une valeur de point cible E point. Nous faisons encore la même chose avec le champ de texte pour le contenu des e-mails. Donc ici, nous pouvons définir la valeur. Et cette valeur va égaler le texte. Et un onchange est égal à un événement E. Et l'événement se déclenche alors. Définissez le texte, en passant le point E cible la valeur du point. Maintenant que nous avons tous ces ensembles, nous pouvons mettre à jour ce journal de console deux comme sujet, ainsi que le texte. Si nous allons dans notre terminal, dans notre application, désolé, nous pouvons ajouter un, une adresse e-mail et un contenu et appuyez envoyer dans notre console sur le côté droit, nous pouvons voir que nous avons un e-mail de destination et un texte, mais le sujet est vide, qui est exactement ce que nous attendons. Nous allons mettre un peu de validation ici pour que nous sachions que les champs, le client a entré notre correct. Donc, s'il n'y a pas d'e-mail de destination, nous allons ajouter un nouvel état. Et ce nouvel état va être un message d'erreur. Donc const erreur, message. Le message d'erreur est égal à l'état américain. Et pour l'instant va commencer comme un message vide. Donc, s'il n'y a pas d'e-mail de destination, nous allons définir le message d'erreur deux, l'adresse e-mail manquante. Je vais juste capitaliser ça. Et puis nous allons revenir de cette fonction. Donc ça ne va pas plus loin. On va faire la même vérification pour le sujet sur le texte. Donc, s'il n'y a pas de sujet, et je vais copier ces deux sujet de courriel manquant . Et enfin, s'il n'y a pas de texte point, définissez le message d'erreur du texte d'e-mail manquant. Maintenant, même si nous avons fait cela, nous n'avons pas réellement utilisé ce message d'erreur n'importe où, c'est pourquoi nous devinons ce message d'erreur attribué mais jamais utilisé. Nous allons donc copier cette valeur de message d'erreur et revenir à notre code. Levez-vous en bas. Et juste avant notre bouton, nous allons ajouter un peu de code. On va ajouter des accolades. Et puis on va utiliser une équation ternaire. Nous allons dire, cela va dire que s'il y a un message d'erreur, nous allons montrer un message. Et ça va être un div. Juste comme ça. Et à l'intérieur de ce div va être le message d'erreur lui-même. Nous allons également ajouter une classe à cela parce que nous pouvons faire un peu de style en une seconde. Donc className est égal à message d'erreur. Maintenant, si l'équation ternaire, vous devez toujours mettre un deux-points à la fin car c'est une instruction if-else. Donc, si le message d'erreur est vrai, nous montrons cette div autre. Et dans ce cas, nous voulons montrer null, ce qui ne va juste rien montrer. Donc, si vous revenez à notre application et si nous appuyons sur envoyer un e-mail, maintenant, nous obtiendrions maintenant cette div supplémentaire, disant que nous manquons notre adresse e-mail. C' est génial car cela montre à l'utilisateur que cela n'a pas réussi. Et pourquoi ? Si nous entrons quelque chose dans l'adresse e-mail et l'envoyons, change en sujet de courriel manquant. Revenons à notre confirmation. Une fois que nous avons tout cela, si nous avons l'e-mail, les sujets sur le texte, nous voulons définir le message d'erreur une chaîne vide afin qu'il ne soit plus affiché. Donc, si nous saisissons quelque chose dans l'e-mail sur le contenu, nous manquons le sujet. Mais maintenant, si nous ajoutons un sujet, le message d'erreur disparaît. Dans la prochaine vidéo, ce que nous allons faire est de raccorder cela à l'API que nous avons faite plus tôt dans le cours. Ainsi, une fois que l'utilisateur a entré les détails, nous pouvons nous envoyer cet e-mail. 10. Connecter notre composant à notre API: Dans la dernière vidéo, nous avons créé notre réaction avec notre état et ajouté quelques tests pour nous assurer que le sujet de l'e-mail de destination sur les textes était rempli. Dans ce morceau de la vidéo, ce que nous allons faire est que nous allons ajouter des axiomes afin que nous puissions réellement envoyer cette requête à notre API, qui enverra notre message. Donc, après ce processus d'envoi, nous voulons ajouter du code supplémentaire pour envoyer la demande. L' outil que nous allons utiliser pour cela est l'axe. Donc, si nous retournons dans notre deuxième fenêtre de terminal, nous pouvons installer un nouveau paquet. Donc npm installer le tableau de bord, dash enregistrer les joints. Donc maintenant, ce que nous devons faire est d'ajouter du code supplémentaire après cette validation pour envoyer cette demande. Ici, nous allons faire axial S point post. Et ce que nous allons poster, c'est que nous allons poster jusqu'à notre URL, à laquelle nous arriverons dans une seconde. Et en plus de cela, nous allons coller un objet. L' objet est l'objet que nous nous attendons à recevoir dans notre API, qui est un deux. Et ça va être notre email de destination. On s'attend à avoir un sujet. Et pour nous, nous pouvons simplement dire que le sujet est égal à ce sujet. Nous attendons également du texte, qui encore une fois, nous pouvons dire est le texte que nous avons stocké dans les états. Et enfin, nous, attendons-nous un de ? Et dans ce cas, vous devez définir l'adresse de départ à l'adresse e-mail que vous avez vérifiée dans SES d'Amazon, qui dans notre cas est un point de codage complet IO. Maintenant, ce que nous devons faire est de nous assurer que nous avons importé l'accès. Donc, si vous allez en haut de votre fichier et importez l'axe à partir d'axiomes. Nous avons maintenant tout ça marche. Mais que se passe-t-il si cela ne réussit pas ? Que se passe-t-il si cela échoue ? Eh bien, on peut ajouter un point à ça. Et cela ne sera jamais appelé que si cette API a réussi. Donc, si cela a été couronné de succès, ce que nous voulons faire, c'est que nous voulons remettre les variables à des chaînes vides. Donc, définissez le texte à vide. Nous voulons définir l'e-mail de destination à vide. Et nous voulons mettre sous réserve de Mt. Maintenant que nous avons ça, nous voulons ajouter une petite chose de plus agréable. Nous voulons définir un message de réussite. Donc ça veut dire que nous ajoutons une chose de plus dans l'état. Donc, en haut, message de succès const, set, message de succès est égal aux états américains. Et pour l'instant va être une chaîne vide. Et ici, nous pouvons définir un message de réussite. Et le message peut être votre email a été envoyé. Maintenant, c'est ce qui se passe quand les choses vont bien et il va dans ce point réussi puis bloquer. Mais que se passe-t-il si cela tombe ? Dites, l'e-mail à qui vous envoyez n'existe pas. Le SES d'Amazon ne peut donc pas l'envoyer. Ou il y a un autre problème tel que votre URL n'est pas valide ou votre lambda est en panne. Dans ce cas, nous voulons ajouter une capture. Et nous voulons attraper l'erreur, qui va dans cette fonction. La première chose que nous voulons faire est console.log erreur dans OK CEO post et le message d'erreur. Cela rendra beaucoup plus facile lorsque nous essayons déboguer pourquoi notre application peut avoir échoué. Donc, la première chose que nous voulons faire ici après le message d'erreur est que nous voulons définir le message de succès sur vide afin qu'il soit supprimé. Nous voulons également définir le message d'erreur. Et dans ce cas, nous pouvons aller avec un message de points d'erreur car il y a parfois un message sur l'erreur elle-même. Ou s'il n'y en a pas, alors nous pouvons aller avec incapable d'envoyer l'e-mail. Maintenant que nous avons cela, nous devons utiliser le message de réussite. Et nous allons l'utiliser d'une manière très similaire à la façon dont nous avons utilisé le message d'erreur. Si nous faisons défiler vers le bas jusqu'à l'endroit où nous avons ce message d'erreur, ce que nous pouvons faire est de créer une nouvelle ligne en dessous de cela. Dites que le message de succès en utilisant un ternaire. On peut alors avoir un div comme ça. Et à l'intérieur de cette div, nous avons une propriété dynamique du message de réussite. Et si ça n'existe pas, on y va avec non. Similaire à la façon dont nous ne voulons pas le message d'erreur. Nous allons également ajouter un nom de classe. Pas class_name va être un message de réussite aussi. Donc, si nous sauvegardons tout cela, nous avons un dernier petit peu d'ajustement à faire, qui va dans notre CSS et ajouter quelque chose pour définir la différence entre le succès et le message d'erreur. Ce que nous pouvons faire est que nous pouvons dire message d'erreur points, et changer la couleur en rouge. Cela signifie simplement que les messages d'erreur apparaissent en rouge sont un message de succès apparaissent dans le bloc normal. De retour dans notre conteneur de courrier électronique. C' est tout le paramétrage. Donc nous, tout ce que nous avons à faire est de trouver notre URL. C' est ce que nous avons construit dans notre API plus tôt dans ce cours. Et collez-le. Si vous avez besoin de trouver cette URL et que vous ne savez pas comment l'obtenir ou si vous avez oublié ce qu'elle était. Je vais te montrer une façon cool de l'avoir. Pour le moment, nous sommes à la racine du cours de partage de compétences à l'intérieur de notre terminal. Si vous êtes toujours dans votre application, vous pouvez créer un répertoire avec une barre oblique à points. Mais alors nous devons cd dans l'API. Maintenant, nous sommes dans l'API, nous pouvons faire des informations SLS. Et il va récupérer les informations sur le système avec lequel nous avons déployé sans serveur. Et voilà, nous avons notre point d'URL d'envoi, juste pour que nous puissions copier cela et coller cela là et appuyez sur Enregistrer. Donc, si nous allons maintenant dans notre haut, nous pouvons entrer notre adresse e-mail, qui est un art complet point de codage IO. Vous devez entrer votre adresse e-mail. Si vous avez réussi à vérifier le compte, votre compte n'est pas en mode boîte. Vous pouvez finir par l'adresse e-mail d'autres personnes, mais au nom ou ne pas entrer une adresse e-mail aléatoire. Parce que si elle est signalée, alors vous pouvez perdre le droit à ce mode gratuit et vous finirez dans certains livres. Le sujet. Mon premier e-mail de l'application. Et le contenu est, c'est vraiment cool que vous pouvez envoyer un e-mail à partir de ma pile complète. Si je clique maintenant sur Envoyer un e-mail, vous pouvez voir que votre e-mail a été envoyé. Et c'est que tous les champs ont été supprimés, qui est exactement ce que nous attendons. Si j'ouvre maintenant mon e-mail, nous verrons si je l'ai reçu. Comme vous pouvez le voir, nous avons reçu mon premier e-mail pour l'instant. Et quand vous commencez à envoyer des messages, apparaît parfois dans Google en disant qu'il pourrait être du spam. C' est parce que vous n'avez pas envoyé beaucoup d'e-mails via ce service Amazon. Et au fur et à mesure que vous envoyez plus, cela sera supprimé. Si vous cliquez sur semble sûr, cela aidera ce processus. Comme vous pouvez le voir, nous avons le sujet et le texte que nous avons entré sur notre application. Donc, cela signifie que nous avons le processus de pile complet, toutes les configurations. 11. Synthèse: Félicitations pour avoir terminé cette cause sans serveur de pile complète. Nous avons appris à configurer nos comptes AWS et sans serveur et à déployer une API qui fonctionne avec le kit SDK AWS pour nous permettre d'envoyer des e-mails au nom de nos utilisateurs. Avec puis met en place un réacteur et connectez les deux pour créer notre pile complète. Si tu as appris quelque chose de nouveau dans ce cours, ça m'a vraiment aidé. Si vous donnez ce cours et cette évaluation car il aide plus de développeurs comme vous, apprenez les compétences et aidez tout le monde à se développer en tant que développeur.