Serverless und AWS lernen und gleichzeitig eine Full-Stack mit React erstellen

1. Willkommen und Einführung: Hallo, und willkommen zu diesem Skill-Share-Kurs zum Erstellen einer Fullstack React-App mit AWS auf serverless als Backend. In diesem Projekt lernen wir, wie Sie unser AWS-Konto auf serverless einrichten. Wir werden dann die Office-API bereitstellen und dann einen neuen API-Endpunkt erstellen, es uns ermöglicht, E-Mails mit dem einfachen E-Mail-Service von Amazon zu senden. Wir werden dann eine Front-End-Reaktion erstellen, die es uns ermöglicht, die Details einzugeben, die wir mit React-Hooks und -Status eingeben müssen, und dann diese Anfrage an unsere API zu senden, damit wir diese E-Mail erhalten. Am Ende dieses Kurses haben Sie gelernt, wie Sie ein API-Gateway-Lambda erstellen, das als Endpunkt fungiert Ihnen die einfache Erstellung von APIs ermöglicht, mit dem AWS SDK interagiert, das ermöglicht es Ihnen, mit anderen Diensten wie dem einfachen E-Mail-Dienst zu interagieren. Sie werden auch wissen, wie Sie Ihre React Front-End-App mit dieser Back-End-API verbinden und die Back-End-API mit serverless bereitstellen können. Also warum springen wir nicht rein und schauen uns das erste Video an. 2. Einrichten deines AWS Kontos: In diesem Video werden wir unser AWS-Konto einrichten. Wenn Sie bereits über ein AWS-Konto verfügen, bei dem Sie sich anmelden können , können Sie diesen Schritt überspringen und direkt zum nächsten Video springen. Also müssen wir nach AWS suchen und dann auf den oberen Link klicken. Für Amazon Web Services. Sie landen auf einer ihrer Landingpages. Und wir müssen nach oben schauen, um ein AWS-Konto zu erstellen. Hier müssen wir unsere E-Mail-Adresse, ein Passwort eingeben, dieses Passwort bestätigen und diesem Konto einen Namen geben. Also werde ich diese AWS-Kurskonten nennen. Auf dieser Seite können Sie entweder ein professionelles oder ein persönliches Konto auswählen. Ich werde mit einem persönlichen Konto gehen und ich empfehle Ihnen, das zu tun, es sei denn, Sie sind sicher, dass Sie das als Geschäftskonto verwenden werden. Drinnen müssen Sie eine Telefonnummer hinzufügen, die Sie Kontakte gehören, dann passen Sie in Ihr Land, Adresse und Postleitzahl. Das letzte, was Sie tun müssen, ist die Allgemeinen Geschäftsbedingungen zu lesen und dann das Kästchen anzukreuzen. alles erledigt ist, können Sie auf Konto erstellen klicken und fortfahren. Jetzt gelangen Sie zu Ihrer Zahlungsinformationsseite. Die Art und Weise, wie AWS funktioniert, ist, dass es acht kostenlose Kontingente des Gewichts hat , das unsere AWS funktioniert, ist es ein kostenpflichtiger Service. Wenn Sie also eine API erstellen und Anforderungen an die API gestellt werden, zahlen Sie nur für die Anzahl der Anfragen, die gestellt werden. Das sind winzige, winzige Geldbeträge. Und Sie erhalten auch ein kostenloses Kontingent. Das bedeutet, dass Sie jeden Monat eine bestimmte Anzahl von API-Anforderungen haben, eine bestimmte Anzahl von Lambda's, eine festgelegte Menge an Dynamo, die Sie kostenlos verwenden können, bevor Sie überhaupt für etwas bezahlen. Wenn Sie diesem Kurs folgen, werden Sie in der Lage sein, alles zu passen, was Sie tun. Wägen Sie auf das Element des kostenlosen Kontingents, damit Sie tatsächlich alles in Rechnung gestellt bekommen. Leider bedeutet dies, dass wir eine Kredit- oder Debitkarte eingeben müssen. So dass, sobald wir über diese Grenze gehen. Amazon kann automatisch Rechnungssteller. Zum Beispiel habe ich acht gelaufen. Wir haben nach ein paar Jahren gefragt. Ich habe ziemlich einen Verlust von Projekten und meine monatliche Rechnung kommt auf etwa $1,35. Das sind also winzige, winzige Geldbeträge. Und Sie können immer zurückgehen und Dinge löschen , so dass Sie nicht mehr für sie belastet werden. Nachdem Sie Ihre Kartennummer ausgefüllt und Ihre Adresse verwendet haben, können Sie bei Bedarf auch eine neue Adresse hinzufügen. Sie müssen klicken, überprüfen und hinzufügen. Sobald Sie Ihre Fahrzeugdetails eingegeben haben, gelangen Sie zu dieser Seite, auf der Sie aufgefordert werden, Ihre Identität zu bestätigen. Sie können dies entweder per SMS oder durch einen Anruf tun. Stellen Sie sicher, dass Sie das richtige Land auswählen. Geben Sie Ihre Telefonnummer ein, geben Sie den Sicherheitsüberprüfungscode unten auf der Seite ein, und klicken Sie dann auf SMS senden. Sie erhalten dann diese Nachricht. Und Sie müssen es auf Ihrem Bildschirm eingeben, um zu bestätigen, dass es sich um Ihr Telefon handelt. Geben Sie also Ihren Code hier ein und klicken Sie auf Code überprüfen, und es wird bereit sein, dieses Setup zu füllen. Jetzt können wir unseren Support-Plan wählen. Ich werde mit einem freien Spaß gehen. Wenn Sie jedoch zusätzlichen Support und schnellere Antworten auf Ihre Supportabfragen mit AWS wünschen, können Sie sich für ein Unternehmen entscheiden, einen Entwicklerplan. Und wenn Sie bereits ein etabliertes Unternehmen sind und wissen, dass Sie Premium-Support wünschen, dann können Sie den Business-Plan auswählen. Für jetzt werde ich den Grundplan wählen. Und das ist alles vollendet. Es dauert manchmal ein wenig Zeit, um Ihr AWS-Konto zu erstellen. Sie können jedoch immer versuchen, auf die Schaltfläche „ Anmelden in der Konsole“ zu klicken und dann Ihre E-Mail-Adresse und Ihr Passwort einzugeben. Wenn Sie später darauf zurückkommen und sich bei Ihrem Konto anmelden müssen, suchen Sie nach AWS. Anstatt auf AWS-Konto erstellen zu klicken, klicken Sie auf das Dropdown-Menü für mein Konto und wählen Sie AWS Management Console aus. Wenn wir darauf klicken, wird es uns zu einer Anmeldeseite bringen. Wir müssen Root-Benutzer auswählen. Wir können dann unsere E-Mail-Adresse und unser Passwort einfügen. Und wir werden in unser AWS-Konto eingehen. Hier drinnen. Wir können dann mit dem Rest dieses Kurses fortfahren. Da unser AWS-Konto erstellt wurde. 3. Serverless für die Arbeit mit AWS einrichten: Das erste, was wir tun müssen, um all dies zum Laufen zu bringen , ist, dass wir einen Benutzer einrichten müssen. So das serverlos ist, können Sie Änderungen in unserem AWS-Konto vornehmen. Die Art und Weise, wie wir dies tun, ist, dass wir uns bei unserem AWS-Konto anmelden. Und dann klicken wir auf das Suchfeld und suchen nach dem, was ich bin, das Identitätszugriffsmanagement ist. Wenn wir hier hineinklicken, werden wir zu einer Seite gelangen, auf der es viele verschiedene Details gibt. Es gibt Gruppen und Benutzer sowie Rollen und Richtlinien. Aber dafür müssen wir nur auf die Verwendungen auf der linken Seite klicken und einen neuen Benutzer hinzufügen. Hier können wir den Namen des Benutzers definieren. Ich werde diese Fertigkeitsfreigabe serverlosen Benutzer nennen. Und hier in der Art des Kontos möchten wir programmatischen Zugriff auswählen. Dies bedeutet, dass wir das AWS SDK und CLI verwenden können , um über diesen Benutzer auf unser Konto zuzugreifen , so funktioniert serverless. Als Nächstes geben wir Berechtigungen. Und wir gehen über, um bestehende Richtlinien direkt anhängen. Und weil wir in der Lage sein wollen, viele verschiedene Dinge zu tun, wie das Erstellen von S3-Buckets, das Erstellen einer API sowie Lambdas. Wir möchten Administratorzugriff auswählen. Als Nächstes gehen wir in Tags. Und wenn Sie müssen, können Sie einige Tags hinzufügen. Und dies wird den Benutzer so kennzeichnen, dass Sie wissen, was dieser Benutzer getan hat. Schließlich können wir in die Überprüfung gehen und wir sagen nur, dass wir die Fähigkeit haben , serverlosen Benutzer mit programmatischem Zugriff zu teilen. Und sie haben eine verwaltete Richtlinie des Administratorzugriffs. So können wir auf Benutzer erstellen klicken. Dies wird jetzt unseren Benutzer hier zu erstellen. Und stellen Sie sicher, dass Sie diesen Bildschirm nicht schließen, da wir diese Details benötigen. Also, jetzt haben wir das Setup. Wir können zu unserem, unserem Computer gehen und ein Terminal öffnen. In unserem Terminal müssen wir tatsächlich serverloses Setup auf unserem Computer bekommen. Die Art und Weise, wie wir das tun, ist npm install minus g ausgeführt , weil es ein global installiertes Paket und serverlos ist. Jetzt, wenn Sie Knoten und NPM nicht installiert haben, und ich werde verknüpfen und in den Notizen dieser Lektion, wie Sie diese installieren können. Aber wenn Sie das haben, sollte das einfach sofort funktionieren. Das dauert ein wenig Zeit, um das Setup zu installieren, also werde ich mich bei Ihnen melden, sobald das alles konfiguriert ist. Nachdem die Einrichtung des Gesetzes abgeschlossen ist, können wir diese serverlose CLI verwenden, um die Anmeldeinformationen für den Benutzer, den wir gerade erstellt haben, einzurichten. Die Art und Weise, wie wir das tun, ist in unserem Terminal, wir geben serverlose Konfigurationsdaten ein. Und dies sind Anmeldeinformationen für AWS. Der Anbieter ist also AWS. Und wir möchten auch sagen, dass wir diese Anmeldeinformationen auf einem Profil erstellen. Also Strich, Strich Profil. Und es wird Skill Share serverlosen Benutzer geben. Das nächste, was wir hinzufügen müssen, sind die Anmeldeinformationen. Also müssen wir Dutch dash k und dann zurück zu unserem AWS-Konto, wo wir unseren Zugriffsschlüssel kopieren und ihn hier einfügen können. Wie auch der Schlüssel. Wir müssen auch hinzufügen, dash tut Geheimnisse. Und wieder, geh in unseren Code. Und wir werden jetzt unseren Show-Button hier auswählen und das Geheimnis kopieren. Und das ist es, was wir in diesen geheimen Wert einfügen werden. Also habe ich das gerade kopiert. Ich gehe hier rein und füge das dort ein und drücke Enter. Was das tun wird, ist, dass es diese Anmeldeinformationen so einrichten wird , dass wir sie in Zukunft verwenden können. Das ist alles, was wir für diese Lektion tun müssen. Und im nächsten Video werden wir uns mit der Einrichtung unseres Repos und der Erstellung unserer ersten API beschäftigen. 4. Unsere erste API für unsere erste API bereitstellen: Im letzten Video haben wir unseren serverlosen Benutzer eingerichtet. In diesem Video werden wir diesen Benutzer verwenden, um unsere erste API zu erstellen. Was wir also tun müssen, um mit zu beginnen, ist einen Ordner für dieses Projekt zu erstellen. Ich werde das tun, indem ich MKDIR ausführe, das ein Verzeichnis erstellt und es den Fähigkeiten-Share-E-Mail-Kurs nennt . Und ich werde das Verzeichnis in den Skill Share Dash E-Mail Kurs ändern. Jetzt, da ich hier drin bin, können wir unseren API-Ordner erstellen. Auch hier werden wir die serverlose CLI verwenden. Also werden wir es eine Funktion von serverlosen erstellt nennen. Und wir werden die Vorlagen verwenden haben Bindestrich, Bindestrich, Vorlagen, AWS, Bindestrich Knoten js, und dann den Pfad, in dem wir dies installieren möchten. Also Strich, Strichpfad. Und der Pfad dafür wird Skill Share-E-Mail Dash-API sein. Nun, da wir dieses API-Projekt erstellt haben, gehen wir in VS-Code, werfen einen Blick auf den Code und dann tatsächlich unsere erste API bereitstellen. Also, wenn wir in ein visuelles Code-Fenster gehen, wenn Sie auf Ordner öffnen und finden Sie die Fähigkeit teilen E-Mail Kurs und drücken Sie öffnen. Dann im Moment können wir sehen, dass dies einen Ordner von API und enact hat. Es hat eine 100.json und eine serverlose YAML. Also in unserem serverlosen YAML, Dies ist, wo wir konfigurieren, was unser serverloses Paket tun wird, wenn wir es bereitstellen. Es hat einen Service. Und es besagt, dass wir AWS verwenden. Und Knoten 12. Es gibt eine Menge Kommentare in hier über zusätzliche Funktionen, die Sie verwenden können. Aber wir werden die vorerst ignorieren. Und wir können direkt nach den Funktionen schauen. Innerhalb dieser Funktion sagt es, dass es eine Hallo Funktion gibt und der Handler ein Handler ist. Hallo. Wenn wir uns den Handler ab.js anschauen, exportiert es eine Funktion namens Hello, und das nimmt ein Ereignis, das einige JSON zurückgibt. Das Letzte, was wir tun müssen, ist, zurück in unsere serverlose YAML zu gehen. Und wir werden diese Funktion in eine API verwandeln. Die Art und Weise, wie wir das tun, ist, dass dieser Handler auch Ereignisse hat. Und eines dieser Ereignisse ist HTTP. Und was das tun wird, ist, dass das aufgestellt wird. Ein API-Gateway, wo wir das dann verwenden können, um auf dieses Lambda über eine API zuzugreifen. Die Räumlichkeiten, die wir dafür brauchen, Hey, TTP-Konfiguration ist ein Pfad. Und ich werde sagen, dass der Weg dafür nur Hallo Bindestrich Text ist. Wir können überprüfen, ob es ein get oder ein Beitrag ist, indem wir die Methode definieren. Und in diesem Fall wird es eine Get-Methode sein. Und schließlich haben wir eine Funktion namens Ursache, die erlaubt oder verbietet, dass die API eine Anfrage von einer anderen URL gestellt werden kann. Und in diesem Fall wollen wir das auf wahr setzen, damit wir in Zukunft von unserer Web-App aus darauf zugreifen können . Wenn wir das speichern, haben wir ein letztes Bit der Konfiguration, die wir tun müssen. Oben im Provider. Wir müssen sagen, wie wir das einsetzen werden. Und wir werden das mit einem Profil bereitstellen. Und das Profil ist, was wir früher in unserem Terminal gemacht haben, das ist unsere Fähigkeit Anteil serverloser Benutzer. Und das sagt nur serverlos, welche Anmeldeinformationen verwendet werden sollen. Wir können auch in einer Region hinzufügen. Und ich werde das tun und das auf Irland setzen. Aber Sie können es auf einstellen, wo immer die nächsten Regionen Sie sind. Also für mich ist Irland EU, West dash eins. Und wenn ich das rette, haben wir alles, was wir brauchen. Wir können jetzt unser Terminal öffnen. Und in unserem Terminal können wir in unseren API-Ordner cd. Und sobald wir in diesem Ordner sind, können wir SLS Deploy ausführen. Und was dieser Befehl tun wird, ist, dass er sich dieses serverlose YAML-Workout ansehen wird , welche Ressourcen und welche Systeme bauen müssen, den Code abrufen und das alles auf dem Konto bereitstellen wird, indem wir unseren neuen Skillshare serverlosen Benutzer verwenden. Das braucht ein bisschen Zeit, aber ich werde mich bei Ihnen melden, wenn NIH fertig ist. Nun, da das die Bereitstellung beendet hat, Wir können sehen, dass wir eine Funktion von hallo haben, was wir erwarten würden, weil dort haben wir eine Funktion von hallo. Und wir haben auch einen API-Endpunkt , der einen Pfad hat, der am Ende hallo dash test ist. Dieses erste Bit wird nach dem Zufallsprinzip als Teil der API-Gateway-Bereitstellung generiert. Und das ist es, was wir in einer Minute testen werden. Bevor wir das tun, gehen wir wieder zu unserer AWS-Konsole. Und inhärent, wir werden auf Dienste oben klicken und nach Lambda suchen. Wenn wir hier hineingehen, können wir jetzt sehen, dass wir tatsächlich API def hello lambda haben, und das wurde erst vor zwei Minuten bereitgestellt. Also zurück in unseren Code, werden wir diese URL kopieren, die wir hier haben. Und wir werden zu unserem Browser gehen und das in eine neue Registerkarte einfügen. Wenn diese API trifft, erhalten wir eine Nachricht von go serverless Version 1, Ihre Funktion erfolgreich ausgeführt, und dann eine Eingabe. In unserem Kodex. Wenn wir tatsächlich einen Blick auf den Handler ab.js, Wir haben eine Nachricht und eine Eingabe, und das ist, was wir von dieser Funktion zurückkehren. Das zeigt also, dass dieser API-Endpunkt diese Funktion auslöst und diese Daten zurückgibt. Während das wirklich cool ist, was wir im nächsten Video tun werden, ist der Code innerhalb unserer API geändert , so dass wir eine E-Mail von unserer API an unsere Kundenkonten senden können. 5. Unser 'Send senden: Im letzten Video hatten wir eine gerade, um unser erstes Lambda und unsere erste API bereitzustellen und zu testen, dass es funktionierte. In diesem Video werden wir einen API-Endpunkt erstellen , um E-Mails an unsere Kunden zu senden. Und mit dem anzufangen, was wir tun werden, ist ein bisschen sauber in dieser überschüssigen YAML-Datei. Was wir tun werden, ist alles zu löschen. Was das auskommentiert wird, um die Menge an Unordnung in dieser Datei zu reduzieren , damit wir alles entfernen können. So bleiben wir nur mit dem Dienstleister und den Funktionen übrig. Also kann alles andere gehen, um das zu retten. Und wir haben eine viel sauberere Datei. Um nun mit der Erstellung dieser neuen API zu beginnen, müssen wir einen neuen Handler erstellen. Also setzen wir in unserer API, werden wir eine neue Datei erstellen und nennen es senden E-Mail Punkt JS. In dieser Datei müssen wir unseren Code für unser Lambda erstellen. Die Art und Weise, wie Sie ein Lambda erstellen, ist, dass Sie sagen , dass der Dot Handler einer asynchronen Ereignisfunktion entspricht . Das heißt also, dass wir eine asynchrone Funktion erstellen , die den Parameter von Ereignissen übernimmt. Und dann verarbeiten wir das hier. So ehrliches Ereignis. Wir wissen, dass wir die Adresse weitergeben werden, an die wir sie senden, die Adresse, die wir sie von einem Betreff senden, und einen Text. Also werden wir das aus dem Ereigniskörper extrahieren. Die Art und Weise, wie das API Gateway funktioniert, ist, dass es stringify der Körper ist, den es in unser Lambda sendet. Also müssen wir auch besaßen stringify, dass. Also werden wir sagen, dass const geschweifte Klammern, um die Werte von zu destrukturieren, können wir sagen, von Betreff und Text gleich JSON.Parse Ereignis Punktkörper. Jetzt ist das Gesetz vollendet. Wir müssen überprüfen, ob all diese Werte existieren da es die Möglichkeit gibt, dass jemand eine Anfrage an diese API gesendet hat, aber nicht alle Daten weitergegeben hat. Also, wenn Sie alle diese kopieren und einfügen wollen, nur um meinen Job ein wenig einfacher zu machen. Also, wenn es keine zwei gibt oder es kein von, oder es gibt kein Thema, oder es gibt keinen Text. Dann werden wir eine 400 Antwort zurückgeben. Und anstatt den exakten JSON hier auszumachen, werde ich eine neue Funktion namens Unterstrich 400 erstellen. Und das wird ein Objekt als Parameter nehmen. Und er wird eine Nachricht drauf haben. In diesem Fall werde ich sagen, fehlender Parameter auf Anfrage Körper. Und jetzt müssen wir diese 400-Funktion machen. Also, am Ende der Datei, werden wir sagen, dass const underscore 400 eine Funktion wie diese sein wird. Und es wird den Körper annehmen. Also in diesem Fall wird der Körper Nachricht sein. Und jetzt müssen wir einige Parameter einrichten. Dies wird also ein Objekt mit Headern und mit einem Statuscode zurückgeben . Und schließlich mit einer Leiche. Also in diesem Fall ist der Statuscode ein 400. So können wir die Zahl der 409 setzen. Die Leiche. Die Art und Weise, wie wir dies zurückgeben müssen, ist, dass wir eine Zeichenfolge der Daten zurückgeben müssen. Das wird also JSON dot stringify sein, übergeben Sie den Körper. Und schließlich müssen wir einige Header definieren. Es gibt also drei Header, die wir einrichten müssen, damit dies funktioniert. sind Inhaltstyp mit einem Großbuchstaben T und das wird Anwendungsschrägstrich JSON sein, der die Antwort mitteilt, die wir etwas JSON zurücksenden. Wir brauchen Zugang, Kontrolle, erlauben Methoden. Und das ist nur zu sagen, was die anfragenden Resorts, ob wir einen get post oder so etwas tun dürfen. Und im Moment werden wir mit Star gehen. Und zweitens ist die Zugriffskontrolle erlauben Ursprünge. Jemand wird das kopieren und Methoden zum Ursprung ändern. Und wieder, lassen Sie es als Stern. So ist das, wie wir, dies ist das JSON-Objekt, das wir jedes Mal zurückgeben müssen, wenn wir auf eine API Gateway-Anfragen an ein Lambda antworten. Und wir können einfach den Statuscode und den Körper ändern, abhängig davon, welche Art von Antworten. Wenn wir zu unseren Inhalten zurückkehren, können wir den Prozess nun fortsetzen. Jetzt, da wir diese Details haben, können wir diese verwenden, um die Parameter zu erstellen. Das verwenden wir, um an den einfachen E-Mail-Service von Amazon weiterzugeben. So const, email params gleich einem Objekt. Der erste ist ein Ziel. Das ist ein Objekt mit einem Array von zwei Adressen. Und dieses Array wird nur ein Element haben, das ist die E-Mail, an die wir das senden, sowie ein Ziel. Wir haben auch eine Nachricht. Diese Nachricht hat einen Körper. Die Leiche, in unserem Fall wird nur besteuert werden. Und dieses Textfeld hat den Datenwert von Text sowie einen Körper. Wir brauchen auch ein Thema. Betreff hat ein Datenfeld des Subjekts, das wir übergeben haben. Dies mag ein wenig kompliziert erscheinen, aber mit Amazon SES ermöglicht es viel bessere Kontrollen wie das Senden verschiedener Varianten des Körpers, abhängig davon , mit welchen Geräten der Kunde liest. Das letzte, was wir einrichten müssen, ist die Quelle. Und das ist, woher wir es schicken. In unserem Fall ist das von. Also, das ist unsere E-Mail-Parameter alle Setup. So können wir jetzt anfangen, diese E-Mail zu senden. Wir werden einen Assay S verwenden, der der einfache E-Mail-Service ist. Und weil dies asynchron ist und wir eine Gewichtung verwenden werden. Wir werden das alles in einen Versuch einwickeln. Und das bedeutet nur, dass, wenn etwas im SES-Aufruf schief geht, wir diesen Fehler abfangen können. Also, was wir jetzt tun müssen, ist warten SES dot senden E-Mail in unsere EML-Parameter übergeben. Und dann, um sicherzustellen, dass es ein Versprechen ist, fügen wir Punktversprechen am Ende hinzu, was Sie mit vielen AWS-Services tun können. Wenn das erfolgreich ist, wird es in diesem Versuchsblock weitergehen. Und dieses Mal werden wir zurückkehren und 200 unterstreichen. Und das braucht keine Parameter. Also, jetzt müssen wir die 200 machen. Und wir tun das, indem wir 400 Funktion abkopieren. Und dann müssen wir die 400 28200 ändern. Wir haben keine Leiche, also können wir das loswerden. Der Körper hier unten wird nur eine leere Zeichenfolge sein und dann den Statuscode in 200 ändern. können wir retten. Und dann gehen Sie zurück zu unserem Code. Das ist also, was passieren wird, wenn es eine erfolgreiche Anfrage ist. Was passiert, wenn es eine erfolglose Anfrage ist, wird es in diesen Fang fallen. Und es ist immer gut, Ihre Fehler zu konsolen. So Konsolenpunktprotokoll Fehler, Senden von E-Mails. Und dann die Fehlermeldung. Außerdem müssen wir auch eine 400 zurückgeben. Also kehren Sie Unterstrich 400 zurück. Und dies wird eine Nachricht haben, die nicht in der Lage ist, die E-Mail zu senden. können wir jetzt retten. Und einige von euch haben vielleicht bemerkt, dass wir SES benutzt haben, aber wir haben es nicht definiert. Also hat Dy absolut Recht. Und was wir tun müssen, ist, scrollen Sie nach rechts an den Anfang unserer Datei. Und bevor wir unseren Handler exportieren, müssen wir sagen, dass const AWS equals das AWS SDK erfordert. Und jetzt, da wir das SDK haben, können wir eine neue Instanz des einfachen E-Mail-Service-Clients erstellen. Also const SES entspricht neuen AWS, Punkte, SES, und speichern Sie das. Und jetzt haben wir den ganzen Code, den wir hier brauchen , um eine E-Mail an einen Kunden von unserer Adresse zu senden. Das letzte, was wir tun müssen, ist, in unsere serverlose YAML-Datei zu gehen, R-Funktionen zu finden und eine neue Funktion hinzuzufügen. Also müssen wir auf das gleiche Niveau wie das Hallo gehen. Und ich musste E-Mail senden. Wir müssen auch einen Handler einrichten. Und unser Handler ist Kunst. E-Mail-Dot-Handler senden. Also ist es Dateiname Punkt, was Sie exportiert haben. Also in unserem Fall, senden Sie E-Mail Dot Handler. Wir haben auch Veranstaltungen. Und das wird dem obigen sehr ähnlich aussehen, wo wir HTTP haben. Das wird einen Weg haben. Und dieses Mal wird der Weg, um E-Mail zu senden. Dann werden wir eine Methode haben. Aber dieses Mal, anstatt Lücken zu haben, wie wir es in der obersten haben, wollen wir in der Lage sein, Daten zu posten. Also machen wir uns auf einen Posten. Und das letzte, was wir tun müssen, ist auf true gesetzt, so dass wir von einer anderen URL darauf zugreifen können. Wenn wir all das speichern, haben wir jetzt unsere Funktion zu unserer API hinzugefügt. Und wir haben noch eine letzte Sache, die wir tun müssen. Standardmäßig verfügt alles in Amazon über die minimale Anzahl an Berechtigungen, die möglich sind, um seine Arbeit zu erledigen. Da wir nun das SES von Amazon verwenden, müssen wir diese API-Lambdas und ein wenig zusätzliche Berechtigung geben. Wir tun dies, indem wir zu einem Anbieter gehen und eine zusätzliche Anweisung hinzufügen, die IM-Rollenanweisungen sind. Diese Aussage hier, es wird eine Wirkung haben, die erlaubt sein wird, was bedeutet, dass wir diesen Lambdas erlauben, etwas Extra zu tun und eine Erlaubnis. Wir haben auch eine Aktion. Und das wird eine Reihe von Dingen sein, die wir diesen Lambdas erlauben. In unserem Fall ist das SES Doppelstern, der besagt , dass wir SES erlauben, alles für diese Lambdas zu tun. Das letzte, was wir tun müssen, ist eine Ressource hinzuzufügen. Und in unserem Fall wird das eine Zeichenfolge von Stern Sprich sein, die auf einer der E-Mail-Adressen erlaubt wurden , die wir gespeichert haben. Wenn wir das speichern, haben wir jetzt unsere Berechtigungen für unsere API hinzugefügt. Und wir haben unser neues API-Endpunkt-Setup. Wenn wir wieder zu unserem Terminal sind und SLS ausführen, stellen Sie noch einmal bereit. Was passieren wird, ist, dass es jetzt diesen zusätzlichen Endpunkt und dieses zusätzliche Lambda zu unserer Bereitstellung hinzufügen und ihnen die erforderlichen Berechtigungen geben wird. Das dauert eine Weile, aber dann testen wir, wie es funktioniert. Und einen zusätzlichen Schritt, den wir tun müssen, um alles zum Laufen zu bringen. Also, jetzt, das ist fertig Bereitstellung, Wir können sehen, dass wir zwei Funktionen haben und wir haben zwei Endpunkte. Einer ist ein get und einer ist ein Beitrag, das ist genau das, was wir erwarten. Bevor wir dies testen können, senden Sie eine E-Mail, müssen wir zurück in unsere AWS-Konsole gehen und nach einem einfachen E-Mail-Service suchen. Dies ist der Dienst, den wir verwenden, um E-Mails zu senden. Und bevor wir tatsächlich E-Mails senden können, müssen wir beweisen, dass wir sie von einem Konto senden, das wir besitzen. Wir tun dies, indem wir auf E-Mail-Adressen gehen und eine neue E-Mail-Adresse verifizieren. Hier können Sie Ihre eigene E-Mail-Adresse eingeben. Ich bin froh, meine, wie einige Künste, komplette Codierung, Punkt IO und drücken Sie diese E-Mail-Adresse verifizieren. Also wurde mir jetzt eine E-Mail geschickt. Also muss ich in meinen Posteingang gehen und auf die Ich habe diese E-Mail verifiziert und ich werde mich in nur einer Sekunde bei Ihnen melden. Also habe ich das jetzt überprüft und aktualisiert. Und ich kann sehen, dass mein Email-Mann verifiziert hat, was bedeutet, dass ich jetzt E-Mails von oder an diese E-Mail-Adresse senden darf. Also werde ich das einfach kopieren. Und jetzt müssen wir unsere E-Mail senden und darauf hinweisen. Die Art und Weise, wie wir das tun, ist, weil dies eine Post-Anfrage ist. Wir können die URL nicht einfach in den Browser einfügen. Aber es gibt ein wirklich cooles Werkzeug namens Postfrau. Also, wenn Sie nach Post Frau Punkt IO suchen, es öffnet sich diesen Browser, wo Sie Ihre URL eingeben können. Die Methode wurde geändert. Also ein get oder ein Beitrag oder ein Putt, und fügt dann einige Daten als auch. Also hier wir, wir müssen überprüfen, dass es ein Beitrag ist. Und dann müssen wir unsere URL von unserer Bereitstellung abrufen und das hier hinzufügen. Also müssen wir diese URL erhalten, die unsere E-Mail Post senden und sie hier einfügen. Das letzte, was wir tun müssen, ist zu gehen und schalten Sie rohe Eingabe, die es uns ermöglicht, einen Körper zu übergeben. Wie Sie sich erinnern können, benötigen wir vier Parameter. Wir brauchen eine Zwei-Adresse. Also, was ich tun werde, ist, dass ich die beiden darin einfügen werde. Ich brauche auch eine von. Und für jetzt verwenden Sie die gleiche E-Mail-Adresse für den Versand von und zu. Aber im nächsten Video, was wir tun werden, ist, dass wir es hinzufügen, so dass Sie es an jede Adresse senden können, die Sie mögen. Wir müssen auch ein Thema hinzufügen. Und ich werde den Betreff als Test-E-Mail stellen. Und schließlich, das Letzte, was wir brauchen, ist der Text. Und dieser Text wird String sein. Etwas im Sinne davon ist eine E-Mail, die über meine API gesendet wird. Wenn wir jetzt auf „Senden“ klicken, was passiert dann? Es wird die Bitte stellen. Und wir sehen, dass wir 200 Antworten bekommen. Das bedeutet, dass wir wahrscheinlich den API-Aufruf erfolgreich durchgeführt haben und diese Antwort zurückerhalten haben. Ich werde jetzt in meine E-Mails springen, damit wir sehen können, wie das aussieht. Jetzt bin ich in meinem E-Mail-Konto. Ich kann sehen, dass ich eine E-Mail mit dem Betreff habe ich es falsch geschrieben, aber meine Test-E-Mail, Ich habe die E-Mail von einigen gesendet, um vollständige Codierung zusammenzufassen. Und das ist der Inhalt der Nachricht. Dies zeigt nur, dass unsere E-Mail funktioniert und dass wir jetzt diese API drücken können , um eine E-Mail an unsere E-Mail-Adresse zu senden. Im nächsten Video, was wir tun werden, ist in SES gehen und eine Anwendung machen, um unser E-Mail-Konto verifizieren zu lassen, so dass wir E-Mails an jede E-Mail-Adresse senden können , die wir von unseren verifizierten E-Mail-Adressen mögen. Also, wenn wir das getan haben, wird es uns erlauben, an jeden Kunden zu senden, dass wir in Nüsse zu E-Mail-Adresse Feld eingeben. 6. Informieren: Im letzten Video haben wir unsere E-Mail-API, Endpoint und Lambda eingerichtet, nicht getestet, dass wir eine E-Mail an und von unserer verifizierten E-Mail-Adresse senden können. In diesem Video werden wir es einrichten, damit wir E-Mails von unseren verifizierten E-Mail-Adressen an die von uns gewünschte E-Mail senden können . Um dies zu tun, müssen wir gehen und zurück in den einfachen E-Mail-Dienst. Wir könnten hier suchen, oder wir könnten Liste sind besuchte Dienste unter nur auf einfachen E-Mail-Service geklickt. Hier drinnen. Wenn wir in absteigenden Statistiken klicken, können wir sehen, dass wir Konten im acht Sandbox-Modus haben. Dies bedeutet, dass wir nur an und von E-Mail-Adressen senden können, die verifiziert sind. So können wir nur von oder an senden. Einige sind nicht vollständig codiert, Das IO. Das ist nicht großartig, weil es nicht viel Sinn hat, sich selbst zu mailen. Also, wenn wir hier wieder hineingehen, können wir acht Sendegrenzen erhöhen. Dies führt uns zu einem neuen Tab, wo wir zum Amazon-Support gehen. Und wir wollen einen Service Lemma zu tun, erhöhen und erhöhen die Sendegrenzen für SES. Hier können wir einige Details wie Ihr Mailingband, Ihre Website-URL und Details eingeben , wie Sie E-Mails nur an Personen senden, die sich angemeldet haben. Alle diese Details auszustatten ist wirklich wichtig, auch wenn sie sagen, dass sie optional sind. Weil Amazon es Ihnen nicht erlaubt, Ihr Konto zu verifizieren und den Sandbox-Modus zu verlassen. Wenn du ihnen nicht gesagt hast, wie das funktionieren wird. Dies ist, um sie zu schützen, damit Sie keine E-Mails an Personen senden , die keine E-Mails von Ihnen erhalten möchten. Also stellen Sie sicher, dass Sie das alles rausgefallen sind. Und dann können Sie hier nach unten gehen und die Region auswählen. Also für mich ist es EUR-Insel. Und wir möchten das tägliche Sendekontingent auswählen. Und Sie können dies auf eine Zahl setzen. Ich werde mit einem 1000 gehen, was bedeutet, dass ich 1000 E-Mails pro Tag senden darf. Und dann ist es das. Solange Sie ausgefüllt haben, sind diese ehrlich mit Ihrer Website-URL, wen Sie sie senden werden. Also, wenn, sagen wir, eine Website, die Ihr Kunde hat seine E-Mail eingegeben hat sagen, dass er Updates erhalten möchte und wie Sie verarbeiten, wenn es Beschwerden gibt. Und ein gutes Detail dafür geht wahrscheinlich und sagt: Ich werde sie aus der Mailliste löschen, damit sie keine zukünftigen E-Mails erhalten. Sobald Sie das alles getan haben, können Sie ein bisschen eine Beschreibung hinzufügen, wenn Sie möchten, und klicken Sie dann auf Senden. Dadurch können Sie diese Anfrage stellen und E-Mails an mehrere Kunden senden, nicht nur an die beiden verifizierten E-Mail-Adressen. Manchmal lässt Amazon dies nicht tun, aber dieses ganze Projekt funktioniert gut immer noch, wenn Sie dies nicht verifiziert haben. Im nächsten Video, was wir tun werden, ist, dass wir einen Blick auf den Aufbau unserer React up werfen, so dass wir ein Front-End haben, um diese E-Mails zu erstellen. 7. Unsere React erstellen: Im letzten Video hatten wir einen Blick auf die Einrichtung unseres Amazon SES, um aus dem Sandbox-Modus zu kommen. Wenn du das getan hast, ist der Typ großartig. Aber wenn nicht, werden wir immer noch weitermachen und alles tun können , was wir brauchen, um in der Lage zu sein. Also in diesem Video werden wir unsere React einrichten. Also, wenn Sie zu unserem Code zurückkehren und wir beide dieser Dateien und in unserem Terminal schließen können, aber derzeit in API. Also müssen wir in unsere Route CD, die die Fähigkeit Share-E-Mail-Kurs hat. Hier müssen wir eine React up installieren. Die Art und Weise, wie wir das tun, ist Create React up zu verwenden. Wenn Sie Create React noch nicht verwendet haben, können Sie in Google gehen und nach Create React App suchen. Und Sie können das Installationspaket hier sehen. Erste Schritte mit Create React up. Und Sie können dieser Schnellstartanleitung folgen, um die Einrichtung zu erhalten. Zurück in unseren Code können wir n px verwenden, Bindestrich erstellen, Strich reagieren, um uns zu ermöglichen, einen neuen Reaktor zu erstellen. Und dann rufen wir das auf. Dies wird einen neuen Ordner in den Wurzeln dieses Repos erstellen. Und wird dann alle erforderlichen Pakete, Dateien und Abhängigkeiten installieren, die wir brauchen, um unsere React auszuführen. Das dauert ein wenig Zeit, um sich einzurichten, also werde ich mich bei Ihnen melden, wenn das erledigt ist. So, jetzt, dass die Installation abgeschlossen ist, Wir können sehen, dass es uns sagt, dass wir Yarn laufen können, beginnen unsere reagiert zu starten. Aber zuerst werden wir einen Blick auf den UPC-Code werfen, der gegeben wird. Dies wird als Öffentlicher Ordner und als Quellordner angegeben. Und das erste, was wir uns ansehen werden, ist app.js. So in hier können wir sehen, dass wir ein Bild haben, ein p-Tag, Absatz-Tag, einen Link sagen lernen, reagieren. Was wir tun werden, ist, dass wir etwas davon löschen werden. Löschen Sie also den oberen Abschnitt und ersetzen Sie ihn durch ein H. Und H eins, wir werden es meine E-Mail-App nennen. Und dann außerhalb unserer Kopfzeile, werden wir eine neue Zeichenfolge hinzufügen. Und das wird nur E-Mail-Container sein. Wenn wir das speichern, können wir jetzt in unser Terminal gehen und wir können CD in unsere App gehen. Und jetzt, wo wir sind in sind, können wir MPM starten, was wird beginnen unsere React up. Wie Sie sehen können, öffnet sich eine neue Registerkarte, wo ich reagieren wird geladen werden. Es dauert ein wenig Zeit, um das Setup zu bekommen. Und da gehen wir hin. Wir haben die Standard-React up mit unseren, meine E-Mail-Up-Inhalten. Und dann ganz unten, heißt es E-Mail-Container. Was wir tun werden, ist, dass wir es besser mit CSS machen werden, um einen Bett-Bug in unserem Code zu ändern . Das erste, was wir tun werden, ist, dass wir das E ändern. Wir werden das Logo ändern, das wir laden. Im Moment laden wir Logo-Punkt SVG. Aber was ich tun werde, ist, dass ich das komplette Codierungs-Logo hinzufügen werde. Also werde ich das hier hineinziehen. Und dort haben wir das Logo für die komplette Codierung. In unserer app.js. Was wir tun können, ist, dass wir ändern können, woher wir das Logo importieren , und Änderungen an der vollständigen Codierung. Logo-Punkt PNG. Und das ist nur ein bisschen rauszuziehen. Also ja, es ist komplette Codierung, Logo-Dot PNG. Wenn wir das speichern und wieder hineingehen, können wir jetzt sehen, dass sich das Logo geändert hat, also sind wir immer noch Roboter, aber das Styling ist immer noch nicht ganz richtig. Also hier drin können wir in unser AP Dot CSS gehen und ein paar Dinge ändern. Das erste, was wir ändern wollen, ist, das Logo ein wenig kleiner zu machen. So ändern Sie es von 40 die Männer auf zehn V min. Wir können auch diesen Medienbereich löschen, da das ist, was bewirkt, dass die App zu drehen. Und es sieht ein bisschen verrückt aus. Jetzt müssen wir unseren App-Header finden. Also werden wir die Min-Höhe von 100 auf fünf ändern. Und wir werden diese Säulenrichtung loswerden. Wir werden eine Zeile Items Center verlassen und Inhalte Center und alles andere rechtfertigen. Wenn wir also viel sparen, gehen wir zurück in unseren Code. Wir können jetzt sehen, wir haben unser Logo und dann den Titel der App. Das sieht viel sauberer aus. Was wir nun tun können, ist, dass wir diesen E-Mail-Inhaltsbereich definieren können , so dass wir mehr als nur ein Textfeld haben und eine E-Mail-Adresse, einen Betreff und den Text eingeben können , den wir senden möchten, und dann tatsächlich senden . Also, das werden wir in diesem nächsten Video machen. 8. Unsere Komponente für E-Mail-Formulare erstellen: Im letzten Video kamen wir zu diesem Punkt, wo wir eine benutzerdefinierte Reaktion mit unserem Logo und unserem Titel mit nur einer Reihe von E-Mail-Containern hatten . Und in diesem Video werden wir diesen E-Mail-Container als neue Komponenten aktualisieren und dann die Eingabefelder für die til Adresse sowie einen Betreff und den Inhalt der E-Mail hinzufügen . Wenn wir in unseren Code springen, was wir tun wollen, ist es, diesen Text durch eine Komponente zu ersetzen. Was wir also tun müssen, ist in Sägen zu gehen und eine neue Datei zu erstellen und diesen neuen Datei-E-Mail-Container dot js X aufzurufen . Hier können wir zuerst React von React importieren, da dies eine React-Komponente ist. Und dann müssen wir die Funktion deklarieren, wie wir es normalerweise tun würden. So Comcast E-Mail-Container ist eine Funktion. Und diese Funktion gibt div mit einer Klasse von E-Mail-Containern zurück. In diesem div wollen wir immer noch den Text des E-Mail-Containers. Und das letzte, was wir in dieser Datei tun müssen, ist unten gespeichert, Export Standard-E-Mail-Container. Wenn wir das speichern, können wir jetzt wieder in unsere app.js gehen. Und hier haben wir den Text für E-Mail-Container. Wir können das löschen und eine neue Komponente namens E-Mail-Container hinzufügen. Und als ich das tat, importierte es automatisch die E-Mail-Container-Funktionskomponenten aus Punktschrägstrich E-Mail-Container. Wenn wir das speichern, können wir jetzt in unseren Gürtel schauen. Und es sagt immer noch E-Mail-Container. Aber dieses Mal zieht es es aus dieser Komponente. Was wir jetzt tun können, ist, in diese Komponente zurückzugehen und sie zu aktualisieren, um die Felder zu haben, die wir wollen. Also hier drin, was wir auch tun werden, ist, dass wir ein Paket namens Material UI verwenden werden. Dies ist großartig, da es uns ermöglicht, sehr leicht schön aussehende Komponenten zu machen. Also werde ich tun, ist, dass ich dieses Plus in einem Terminal treffen werde, um ein zweites Terminal zu schaffen. Und hier werde ich npm installieren dash laufen, dash speichern Material. Strich-Benutzeroberfläche. Schrägstrich weiterleiten. Nun, während PSI läuft, was wir tun können, ist, dass wir beginnen können, einige dieser Komponenten zu verwenden. Anstatt also E-Mail-Container zu sagen, wollen wir eine Gruppe hinzufügen, um all dies zusammen zu gruppieren. Also, was ich tun werde, ist, dass ich ein Element namens Papier erstellen werde. Und diese Papierelemente müssen wir aus Material UI importieren. Also importieren Sie Papier aus fügt Material UI Schrägstrich Kern. In diesem Papier möchten wir ein Formular hinzufügen. Und wir brauchen die Aktion am Telefon nicht. Also innerhalb des Formulars wollen wir dann Felder ablegen. Das erste, was wir brauchen, ist ein Textfeld. Und dieses Textfeld wird ein paar Attribute darauf haben. Das erste Attribut, das wir darauf haben werden, ist eine ID. Und diese ID wird Ziel-E-Mail-Adresse sein. Und ebenso wie diese ID wird auch ein Etikett haben. Und dieses Label wird das sein, was wir direkt über dieser Eingabe anzeigen wollen. In unserem Fall wird dies die nette Version sein, also ist es die Ziel-E-Mail-Adresse. Jetzt, wenn wir diese Datei speichern, müssen wir zuerst unser Textfeld importieren. So können wir das als weiteren Import zu unserem Material-UI-Aufruf hinzufügen. Speichern Sie es wieder, das hat jetzt funktioniert. So kann es zu unserem Code gehen. Und wir sehen, dass wir die E-Mail-Adresse haben. Und das ist, wo ein Textfeld, in das wir Sachen eingeben können. Das ist großartig, aber jetzt müssen wir noch ein paar Felder hinzufügen. Neben einem Textfeld für die E-Mail-Adresse wollen wir ein anderes Textfeld, das E-Mail sein wird, sorry, ID entspricht E-Mail-Betreff mit einem Etikett von E-Mail-Betreff. Und ein drittes, das ein Textfeld mit einer ID von E-Mail-Inhalten und einem Etikett von E-Mail sein wird . Auch Inhalte. Das letzte, was wir wollen, ist, dass wir eine Schaltfläche am unteren Rand hinzufügen möchten. Was wir also tun können, ist zu sagen, dass wir einen, einen anderen Knopf haben. Und wir werden ein bisschen Styling machen. Also sagen wir, es wird eine Variante geben. Und das sagt nur diesem Material UI-Komponenten, welche Art von Boston wir sein wollten. Und wir werden sagen, es ist eine enthaltene Komponente. Wir können auch die Farbe einstellen. Und in diesem Fall werden wir mit dem Primär gehen. Und dann schließen Sie das ab. Und innerhalb dieses Knopfes werden wir es senden, einen Text von E-Mail senden. Wenn wir das alles speichern, müssen wir wieder unser Boston importieren, da wir das noch nicht getan haben. Gehen Sie also in unseren materiellen UI-Aufruf und speichern Sie ihn, damit dies erfolgreich erstellt wird. Wir können jetzt zu unserer App gehen und sehen, dass wir drei Eingabefelder unter Taste haben. Aber das Layout ist nicht großartig. Wir werden also zu unserem Code zurückkehren und etwas Styling hinzufügen. In unserer Quelle, erstellt eine neue Datei und rufen Sie diese Datei. E-Mail-Container gelehrt CSS. Und hier drinnen können wir ein paar Dinge hinzufügen. Das erste, was wir hinzufügen müssen, ist ein Steuerelement für den E-Mail-Container selbst. Also E-Mail-Container, und was wir tun möchten, ist ein wenig von einem Rand hinzuzufügen , so dass es nicht so nah an der Kante ist. Der Rand wird also zehn Pixel sein. Außerdem möchten wir das Layout des Formulars innerhalb ändern. Das ändert die Art und Weise, wie diese Komponenten innerhalb des Paares bilden. Also die Art und Weise, die wir referenzieren, ist E-Mail-Containerspace-Form. Und wir wollen etwas Polsterung von zehn Pixeln hinzufügen. Wir möchten auch die Anzeigemethode ändern. So wird die Anzeige Flachs sein. Und schließlich wird die Flex-Richtung Spalte sein. Jetzt haben wir das. Wir können diese Datei speichern und wieder in unseren E-Mail-Container gehen, Dr. Jay Sx. Und wir müssen diese CSS-Datei importieren. Also importieren Punkt Schrägstrich E-Mail Container Punkte CSS. Und jetzt, wenn wir hineingehen, können wir sehen, dass dies auf eine viel schönere Art und Weise angelegt ist. Das Einzige, was ich jetzt ändern möchte, ist die Tatsache, dass dieser Knopf viel zu groß ist. So können wir zurück in unseren Code und unser CSS gehen und eine andere Sache hinzufügen , die E-Mail-Container-Formularschaltfläche sein wird, die nur auf diese Schaltfläche verweisen und die Breite auf 150 Pixel setzen wird. Das wird sich ändern, die E-Mail senden, um eine viel schönere Größe zu sein. Ohne alles fertig, haben wir jetzt eine App, die wir nicht eingeben können. Unter Schaltfläche, die wir klicken können. Im Moment. Das macht nichts, und das werden wir im nächsten Video abdecken, wo wir diesen Zustand hinzufügen, damit wir diese Datenfelder speichern können. 9. Zustand zu unserem Komponente hinzufügen: Im letzten Video haben wir diese Komponente erstellt und diese Eingabefelder hinzugefügt, in denen wir Inhalte eingeben können. Aber in diesem Video werden wir jetzt Zustand hinzufügen, so dass wir diese Werte nehmen und sie für etwas verwenden können. Also, wenn wir in unsere App und unseren Container dot j x x gehen, werden wir React-Hooks verwenden und den React-Zustand reagieren. Am Anfang dieser Datei möchten wir eine neue Statusvariable für die Ziel-E-Mail erstellen. Und die Art und Weise, wie wir das mit Hooks tun, ist sagen, dass Comcast und dann eine Array-Ziel-E-Mail deklarieren , Komma gesetzt. Ziel, E-Mail entspricht US-Bundesstaaten, und für jetzt wird eine leere Zeichenfolge sein. Also, was haben wir in dieser Linie getan? Wir haben eine Variable namens Ziel-E-Mail erstellt Dies ist der Wert, den die E-Mail derzeit hat. Und wir haben eine Funktion erstellt. Und diese Funktion ermöglicht es uns, einige neue Daten zu übergeben, die den Zustand aktualisieren und den Wert unserer Ziel-E-Mail ändern. Die Art und Weise, die wir verwenden, ist, wenn wir hier zu unserem Textfeld gehen, können wir einige zusätzliche Parameter hinzufügen. Also hier drinnen können wir stattdessen den Wert ändern. Und der Wert wird Ziel-E-Mail sein. Das bedeutet, was auch immer dieser Wert im Zustand ist, ist der Wert dieses Textfeldes auch sein wird. Sowie, dass wir eine Fähigkeit zur Kunst und auf Veränderung haben. Und dies wird eine Funktion sein, die immer aufgerufen wird , wenn jemand den Wert davon ändert. Diese Änderung löst also ein Ereignis aus. Und was wir tun wollen, ist, dass wir die Ziel-E-Mail festlegen wollen. So zielt e dot auf Punktwert wie diesen, und speichern Sie das. Also hier haben wir US-Bundesstaaten benutzt, aber wir haben nicht wirklich nach unten importiert. Was wir also tun müssen, ist zu gehen, um die Importe oben zu reagieren. Und ebenso wie das Importieren reagiert. Wir können auch US-Bundesstaat importieren. Das ist nun gelungen. Und obwohl dies so aussieht, als ob es auf die gleiche Weise funktioniert, haben wir diesen Wert im Zustand gespeichert, während dieser Wert ein unkontrollierter Wert ist, auf den wir in unserer App keinen Zugriff haben. Was wir jetzt tun werden, ist eine zusätzliche Funktion hinzuzufügen, nur um Punkte zu zeigen. Wir haben diesen Zustand kontrolliert. Und diese Funktion wird eine Sendefunktion sein. Also const, send ist eine Funktion. Und hier für jetzt, wir werden Dot Log aktuellen Zustand Konsole. Und das wird ein Objekt sein. Mit Ziel-E-Mail. Diese Sendefunktion können wir tatsächlich zu unserer Schaltfläche hinzufügen. So wie eine Variante und eine Farbe, können wir einen On Click hinzufügen , der in unserem Fall nur gesendet wird. Wenn wir das speichern und zu unserem Code zurückkehren, können wir etwas in unsere Ziel-E-Mail eingeben und dann können wir etwas in unser Betreff eingeben. Und wenn wir in unsere Konsole gehen und auf E-Mail senden drücken, können wir sehen, dass der aktuelle Status die Ziel-E-Mail hat, aber es hat keinen Betreff. Was wir jetzt tun müssen, ist, diesen Prozess zu wiederholen. Aber für das Thema und den Inhalt. So const Subjekt Komma gesetzt, Subjekt entspricht US-Bundesstaat. Und wir werden mit einer leeren Schnur beginnen. Wir sagen dann auch, dass const Text gleich ist und Text gleich verwenden Zustand. Genau so. Und jetzt können wir zu unseren Eingabetextfeldern gehen und diese zusätzlichen Parameter hatten. Also hier können wir Wert gleich Subjekt und onChange gleich einer Funktion, die das Ereignis nimmt und aufruft Betreff gesetzt. Mit E-Punkt-Zielpunktwert. Wir machen das Gleiche wieder mit dem Textfeld für E-Mail-Inhalte. Also hier drin können wir den Wert einstellen. Und dieser Wert wird gleich Text. Und ein onchange gleich E-Ereignis. Und das Ereignis wird dann ausgelöst. Setzen Sie Text, Übergabe in E Punkt Ziele Punktwert. Jetzt, da wir alle diese gesetzt haben, können wir dieses Konsolenprotokoll zwei als Betreff, sowie den Text aktualisieren . Wenn wir in unser Terminal gehen, in unsere App, sorry, wir können eine hinzufügen, eine E-Mail-Adresse und einen Inhalt und drücken Senden in unserer Konsole über auf der rechten Seite, wir können sehen, dass wir eine Ziel-E-Mail und einen Text haben, aber das Thema ist leer, das ist genau das, was wir erwarten. Wir werden hier ein wenig Validierung einlegen, damit wir wissen, dass die Felder, der Kunde unsere richtige eingegeben hat. Wenn es also keine Ziel-E-Mail gibt, fügen wir einen neuen Status hinzu. Und dieser neue Zustand wird eine Fehlermeldung sein. Also const Fehler, Nachricht. Fehlermeldung entspricht dem US-Status. Und für jetzt wird als leere Nachricht beginnen. Wenn es also keine Ziel-E-Mail gibt, werden wir die Fehlermeldung zwei setzen, fehlende E-Mail-Adresse. Ich werde das einfach kapitalisieren. Und dann werden wir von dieser Funktion zurückkehren. So geht es nicht weiter. Wir werden den gleichen Check für das Thema im Text durchführen. Also, wenn es nicht Betreff, und ich werde diese beiden fehlenden E-Mail-Betreff kopieren beiden fehlenden . Und schließlich, wenn es keinen Punkttext gibt, setzen Sie eine Fehlermeldung des fehlenden E-Mail-Textes. Nun, obwohl wir dies getan haben, haben wir diese Fehlermeldung nirgendwo verwendet, weshalb wir erraten, dass diese Fehlermeldung zugewiesen, aber nie verwendet wird. Also werden wir diesen Fehlermeldungswert kopieren und zu unserem Code zurückkehren. Steigen Sie nach unten. Und kurz vor unserer Schaltfläche werden wir ein wenig Code hinzufügen. Wir werden ein paar geschweifte Klammern hinzufügen. Und dann benutzen wir eine ternäre Gleichung. Wir werden sagen, dies wird sagen, wenn es eine Fehlermeldung gibt, werden wir eine Nachricht zeigen. Und das wird ein div sein. Genau so. Und in diesem div wird die Fehlermeldung selbst sein. Wir werden auch eine Klasse hinzufügen, weil wir in einer Sekunde ein bisschen Styling machen können. Daher entspricht ClassName Fehlermeldung. Nun, ob ternäre Gleichung, müssen Sie immer einen Doppelpunkt am Ende setzen, weil dies eine if-else-Anweisung ist. Also, wenn die Fehlermeldung wahr ist, zeigen wir dieses div sonst. Und in diesem Fall wollen wir null zeigen, was nur nichts zeigen wird. Wenn Sie also zurück zu unserer App gehen und wenn wir auf E-Mail senden klicken , würden wir jetzt dieses zusätzliche div bekommen und sagen, dass wir unsere E-Mail-Adresse vermissen. Das ist großartig, da es dem Benutzer zeigt, dass dies nicht gelungen ist. Und warum? Wenn wir etwas in die E-Mail-Adresse eingeben und es senden, ändert es zu fehlenden E-Mail-Betreff. Jetzt zurück in unsere Bestätigung. Sobald wir das alles haben, wenn wir die E-Mail, die Themen auf dem Text haben, wollen wir die Fehlermeldung auf eine leere Zeichenfolge setzen , damit sie nicht mehr angezeigt wird. Wenn wir also etwas in E-Mail zum Inhalt eingeben, fehlt uns das Betreff. Aber jetzt, wenn wir einen Betreff hinzufügen, verschwindet die Fehlermeldung. Im nächsten Video, was wir tun werden, ist das Anschließen an die API, die wir zuvor im Kurs gemacht haben. Sobald der Benutzer die Daten eingegeben hat, können wir diese E-Mail an uns selbst senden. 10. Unsere Komponente mit unserer API verbinden: Im letzten Video haben wir unsere Reaktionen mit unserem Zustand erstellt und einige Tests hinzugefügt , um sicherzustellen, dass die Ziel-E-Mail-Betreff auf Texten alle befüllt wurden. In diesem Teil des Videoswerden wir Axiome hinzufügen, werden wir Axiome hinzufügen damit wir diese Anfrage tatsächlich an unsere API senden können, die unsere Nachricht sendet. Nach diesem Sendeprozess möchten wir einen zusätzlichen Code hinzufügen, um die Anfrage zu senden. Das Werkzeug, das wir dafür verwenden werden, ist Achse. Wenn wir also wieder in unser zweites Terminal-Fenster gehen, können wir ein neues Paket installieren. Also npm installieren dash, dash speichern Dichtungen. Also, was wir jetzt tun müssen, ist etwas zusätzlichen Code nach dieser Validierung hinzuzufügen , um diese Anfrage zu senden. Hier werden wir axial S dot post zu tun. Und was wir posten werden ist, dass wir auf unsere URL posten, die wir in einer Sekunde erreichen werden. Und außerdem werden wir ein Objekt einfügen. Das Objekt ist das Objekt, das wir in unserer API erwarten, die eine Zwei ist. Und das wird unsere Ziel-E-Mail sein. Wir erwarten, dass wir ein Thema haben. Und für uns können wir einfach sagen, dass das Thema diesem Thema entspricht. Wir erwarten auch Text, der wiederum, können wir sagen, ist der Text, den wir in Zuständen gespeichert haben. Und schließlich, wir, erwarten wir eine von? Und in diesem Fall müssen Sie die Von-Adresse auf die E-Mail-Adresse setzen, die Sie in Amazon SES verifiziert haben, was in unserem Fall ein vollständiger Codierpunkt IO ist. Jetzt müssen wir sicherstellen, dass wir Zugriff importiert haben. Also, wenn Sie an den Anfang Ihrer Datei gehen und Achse aus Axiomen importieren. Wir haben jetzt alles funktioniert. Aber was passiert, wenn das nicht gelingt? Was passiert, wenn dies fehlschlägt? Nun, wir können dann einen Punkt darauf hinzufügen. Und das wird nur dann aufgerufen, wenn diese API erfolgreich war. Wenn dies also erfolgreich war, wollen wir die Variablen auf leere Strings zurücksetzen. Setzen Sie den Text also auf leer. Wir möchten Ziel-E-Mail auf leer setzen. Und wir wollen dem Mt. Nun, da wir das haben, wollen wir noch ein extra nettes kleines Ding hinzufügen. Wir wollen eine Erfolgsbotschaft setzen. Das bedeutet also, dass wir noch eine Sache im Zustand hinzufügen. Also an der Spitze, const Erfolgsmeldung, set, Erfolgsnachricht entspricht US-Bundesstaaten. Und für jetzt wird eine leere Zeichenfolge sein. Und hier drinnen können wir Erfolgsbotschaft setzen. Und die Nachricht kann Ihre E-Mail gesendet wurde. Jetzt passiert das, wenn die Dinge gut laufen und es geht in diesen erfolgreichen Punkt dann Block. Aber was passiert, wenn das umfällt? Sagen wir, die E-Mail, an die Sie senden, existiert nicht. Amazon SES kann es also nicht senden. Oder es gibt ein anderes Problem, wie Ihre URL ungültig ist oder Ihr Lambda heruntergefahren ist. In diesem Fall möchten wir einen Fang hinzufügen. Und wir wollen den Fehler fangen, der in diese Funktion eingeht. Das erste, was wir tun möchten, ist console.log Fehler in OK CEOs Post und die Fehlermeldung. Dies wird es viel einfacher, wenn wir versuchen zu debuggen, warum unsere Anwendung möglicherweise fehlgeschlagen ist. Das erste, was wir hier nach der Fehlermeldung tun möchten, ist, dass wir die Erfolgsmeldung auf leer setzen möchten , damit sie entfernt wird. Wir möchten auch die Fehlermeldung setzen. Und in diesem Fall können wir mit der Fehlermeldung Fehlerpunkte gehen, da es manchmal eine Meldung über den Fehler selbst gibt. Oder wenn es nicht, dann können wir mit nicht in der Lage, die E-Mail zu senden gehen. Jetzt, da wir das haben, müssen wir tatsächlich die Erfolgsmeldung verwenden. Und wir werden es auf eine sehr ähnliche Weise verwenden wie wir die Fehlermeldung verwendet haben. Wenn wir nach unten scrollen, wo wir diese Fehlermeldung haben, was wir tun können, ist eine neue Zeile darunter zu erstellen. Sagen Sie, dass die Erfolgsmeldung mit einem ternären. Wir können dann ein div wie das haben. Und in diesem div haben wir eine dynamische Eigenschaft der Erfolgsbotschaft. Und wenn das nicht existiert, gehen wir mit Nein. Ähnlich wie wir die Fehlermeldung nicht wollen. Wir werden auch einen Klassennamen hinzufügen. Nicht class_name wird auch eine Erfolgsnachricht sein. Also, wenn wir all dies speichern, haben wir ein letztes kleines bisschen zu optimieren, das in unser CSS geht und etwas hinzufügt , um den Unterschied zwischen Erfolg und Fehlermeldung zu definieren. Was wir tun können, ist, können wir sagen, Punkte Fehlermeldung, und ändern Sie die Farbe in rot. Das bedeutet nur, dass die Fehlermeldungen rot angezeigt werden, sind eine Erfolgsmeldung, die im normalen Block angezeigt werden. Zurück in unseren E-Mail-Container. Das ist alles Setup. Also wir, alles, was wir tun müssen, ist unsere URL zu finden. Das ist, was wir in unserer API bereits früher in diesem Kurs gebaut haben. Und kleben Sie es hinein. Wenn Sie diese URL finden müssen und nicht wissen, wie Sie sie bekommen oder vergessen haben, was sie war. Ich zeige dir einen coolen Weg, das zu bekommen. Im Moment sind wir in der Wurzel des Skill-Share-E-Mail-Kurs in unserem Terminal. Wenn Sie sich noch in Ihrer App befinden, können Sie ein Verzeichnis mit Punkt-Punkt-Schrägstrich runter kopieren. Aber dann müssen wir in API cd. Jetzt sind wir in der API, wir können SLS-Info tun. Und er wird die Informationen über das System zurückholen, mit dem wir serverless eingesetzt haben. Und hier geht's, wir haben unseren E-Mail-URL-Punkt, nur damit wir das kopieren und einfügen können und speichern. Also, wenn wir jetzt über in unsere oben gehen, können wir unsere E-Mail-Adresse eingeben, die einige Art komplette Codierung Punkt IO ist. Sie müssen Ihre E-Mail-Adresse eingeben. Wenn Sie die Kontoverifizierungen geschafft haben, befindet sich Ihr Konto nicht in einem Box-Modus. Sie können die E-Mail-Adresse anderer Personen landen, aber im Namen oder geben Sie keine zufällige E-Mail-Adresse ein. Denn wenn es berichtet wird, dann können Sie das Recht auf diesen freien Modus verlieren und Sie werden wieder in einigen Büchern enden. Das Subjekt. Meine erste E-Mail aus der App. Und der Inhalt ist, das ist wirklich cool, dass Sie eine E-Mail von meinem vollen Stapel senden können . Wenn ich nun E-Mail senden klicke, können Sie sehen, dass Ihre E-Mail gesendet wurde. Und das ist alle Felder wurden entfernt, was genau das ist, was wir erwarten. Wenn ich jetzt meine E-Mail öffne, schauen wir nach, ob ich sie erhalten habe. Wie Sie sehen können, haben wir vorerst meine erste E-Mail erhalten. Und wenn Sie zum ersten Mal Nachrichten senden, erscheint manchmal in Google, dass es Spam sein könnte. Das liegt daran, dass Sie nicht viele E-Mails über diesen Amazon-Dienst gesendet haben. Und wenn Sie mehr senden, wird dies entfernt. Wenn Sie auf sieht sicher aus, das wird helfen, dass Prozess. Wie Sie sehen können, haben wir das Thema und den Text, den wir in unserer App eingegeben haben. Das bedeutet also, dass wir den vollständigen Stack-Prozess haben, alles Setup. 11. Aufarbeitung: Herzlichen Glückwunsch zum Abschluss dieser serverlosen Full-Stack-Ursache. Wir haben gelernt, wie Sie unsere AWS- und serverlosen Konten einrichten und eine API bereitstellen, die mit dem AWS SDK funktioniert , damit wir E-Mails im Namen unserer Benutzer versenden können. Mit dann einen Reaktor aufbauen und verbinden Sie die beiden, um unseren vollen Stapel zu erstellen. Wenn Sie in diesem Kurs etwas Neues gelernt haben, es mir wirklich geholfen. Wenn Sie diesen Kurs und Bewertung geben, da es mehr Entwicklern hilft, genau wie Sie selbst, lernen Sie die Fähigkeiten und helfen Sie jedem Level up als Entwickler.