Share
Was Sie erstellen werdenAWS Amplify ist eine Open-Source-Bibliothek, die es Entwicklern und in unserem Fall mobilen Entwicklern ermöglicht, Anwendungen wie Analysen, Push-Benachrichtigungen, Speicher und Authentifizierung eine Vielzahl wertvoller Funktionen hinzuzufügen.
Amplify funktioniert nicht nur mit React Native, sondern auch mit Vue, Angular, Ionic, React Web und wirklich jedem JavaScript-Framework. In diesem Lernprogramm werden einige der wichtigsten Funktionen in einer React Native-Anwendung demonstriert.
Das Tolle an dieser Bibliothek ist, dass die bisherige komplexe Konfiguration und Konfiguration all dieser Funktionen in einem benutzerfreundlichen Modul zusammengefasst wird, das wir mithilfe von NPM zu unserem Projekt hinzufügen können.
Wir werden AWS Amplify in drei Teilen behandeln: Authentifizierung, Speicherung und Analyse.
Wenn Sie mitverfolgen möchten, erstellen Sie ein neues React Native-Projekt mit Expo (Create React Native App) oder der React Native-CLI:
reaktives natives init RNAmplify
oder
Create-React-native-app RNAmplify
Als nächstes wollen wir das installieren aws-verstärken Bibliothek, die entweder Garn oder Npm verwendet:
Garn hinzufügen aws-verstärken
Wenn Sie Expo verwenden, können Sie den nächsten Schritt (Verknüpfung) überspringen, da Expo bereits die nativen Abhängigkeiten für die Unterstützung von Amazon Cognito bereitstellt.
Wenn Sie Expo nicht verwenden, müssen wir die Cognito Bibliothek (Amazon Cognito behandelt die Authentifizierung), die beim Hinzufügen installiert wurde aws-verstärken:
reag-native link amazon-cognito-identity-js
Nachdem das React Native-Projekt erstellt und konfiguriert wurde, müssen wir die Amazon-Dienste einrichten, mit denen wir interagieren werden.
Im Verzeichnis des neuen Projekts erstellen wir ein neues Mobile Hub-Projekt für dieses Lernprogramm. Um dieses Projekt zu erstellen, verwenden wir die AWSMobile-CLI. Wenn Sie ein fortgeschrittener Benutzer sind, können Sie jedoch die Konsole verwenden. Ich habe ein YouTube-Video mit einem kurzen Überblick über die AWSMobile-CLI gepostet, wenn Sie mehr darüber erfahren möchten.
Nun erstellen wir ein neues Mobile Hub-Projekt im Stammverzeichnis unseres neuen Projektverzeichnisses:
awsmobile init
Nachdem Sie Ihr Projekt erstellt haben und Ihr haben aws-exportiert eine Datei (Dies wird automatisch durch Ausführen erstellt awsmobile init), müssen wir unser React Native-Projekt mit AWS Amplify für unser AWS-Projekt konfigurieren.
Dazu gehen wir weiter App.js unter den letzten Importen und fügen Sie die folgenden drei Codezeilen hinzu:
importiere Amplify, Auth von 'aws-amplify' import config von './aws-exports' Amplify.configure (config)
Die Authentifizierung mit Amplify erfolgt über den Amazon Cognito-Dienst. Wir verwenden diesen Dienst, um Benutzern die Anmeldung und Anmeldung bei unserer Anwendung zu ermöglichen!
Fügen wir dem Mobile Hub-Projekt die Benutzeranmeldung und Amazon Cognito hinzu. Führen Sie im Stammverzeichnis die folgenden Befehle aus:
awsmobile user-signin ermöglicht awsmobile push
Jetzt werden wir einen neuen Amazon Cognito-Benutzerpool einrichten und einsatzbereit machen. (Wenn Sie die Details dieses neuen Diensts anzeigen möchten, wechseln Sie zur AWS Console, klicken Sie auf Cognito und wählen Sie den Namen des von Ihnen erstellten AWSMobile-Projektnamens.)
Als Nächstes integrieren wir die Authentifizierung mit Amazon Cognito und AWS Amplify.
Beginnen wir mit einem Blick auf die Hauptklasse, mit der Sie vollen Zugriff auf die Amazon Cognito-Dienste haben, die Auth Klasse.
Das Auth In der Klasse gibt es viele Methoden, mit denen Sie alles tun können, von der Anmeldung über die Anmeldung von Benutzern bis hin zum Ändern des Kennworts und allem, was dazwischen liegt.
Es ist auch einfach, mit AWS Amplify mit der Zwei-Faktor-Authentifizierung zu arbeiten Auth Klasse, wie wir im folgenden Beispiel sehen werden.
Lassen Sie uns einen Blick darauf werfen, wie Sie sich mit Amazon Cognito und dem Benutzer anmelden und einen Benutzer anmelden können Auth Klasse.
Wir können mit relativ wenig Arbeit einen soliden Anmelde- und Anmeldungsfluss erreichen! Wir werden die verwenden Anmelden, confirmSignUp, Einloggen, und confirmSignInMethoden der Auth Klasse.
Im App.js, Lassen Sie uns ein paar Methoden erstellen, die die Benutzeranmeldung mit der Zwei-Faktor-Authentifizierung abwickeln, sowie einen Status, der die Benutzereingaben enthält:
Accentsconagua
state = Benutzername: ", E-Mail:", Telefonnummer: ", Kennwort:", AuthCode: ", Benutzer: onChangeText = (Schlüssel, Wert) => this.setState ([Schlüssel]: Wert) signUp () const Benutzername, Kennwort, E-Mail-Adresse, Telefonnummer = this.state Auth.signUp (Benutzername, Kennwort, Attribute: Telefonnummer, E-Mail) .then (() => console.log ('Benutzer) Anmeldung erfolgreich !! ')) .catch (err => console.log (' Fehler beim Anmelden des Benutzers: ', err)) confirmSignUp () Auth.confirmSignUp (this.state.username, this.state.authCode) .then (() => console.log ('Benutzer erfolgreich anmelden anmelden !!')) .catch (err => console.log ('Fehler beim Bestätigen des Benutzers:', err))Anmelden erstellt die erste Anmeldeanforderung, mit der dem neuen Benutzer eine SMS zur Bestätigung seiner Nummer gesendet wird. confirmSignUp übernimmt den SMS-Code und den Benutzernamen und bestätigt den neuen Benutzer in Amazon Cognito.
Wir werden auch eine Benutzeroberfläche für die Formulareingabe und eine Schaltfläche erstellen und die Klassenmethoden mit diesen Oberflächenelementen verbinden. Aktualisieren Sie die machen Methode zu folgenden:
render () return (); this.onChangeText ('username', val) /> this.onChangeText ('password', val) /> this.onChangeText ('email', val) /> this.onChangeText ('phone_number', val) /> this.onChangeText ('authCode', val) />
Zum Schluss werden wir unsere aktualisieren Stile Erklärung, damit wir eine schönere Benutzeroberfläche haben:
const styles = StyleSheet.create (container: flex: 1, justifyContent: 'center',, Eingabe: height: 50, borderBottomWidth: 2, borderBottomColor: '# 9E9E9E', margin: 10);
Klicken Sie auf, um die endgültige Version dieser Datei anzuzeigen Hier.
Jetzt sollten wir uns anmelden können, einen Bestätigungscode an unsere Telefonnummer senden lassen und den Bestätigungscode eingeben.
Wenn Sie die Details dieses neu erstellten Benutzers anzeigen möchten, kehren Sie zur AWS Console zurück, klicken Sie auf Cognito, wählen Sie den Namen des von Ihnen erstellten AWSMobile-Projektnamens aus und klicken Sie auf Benutzer und Gruppen in dem Allgemeine Einstellungen Menü auf der linken Seite.
Sie können dies weiter tun, indem Sie die Anmeldung implementieren und die Anmeldung bestätigen. Schauen wir uns die Methoden für an Einloggen und confirmSignIn:
signIn () Auth.signIn (this.state.username, this.state.password) .then (user => this.setState (user) console.log ('user sign in success !!')) .catch (err => console.log ('Fehler beim Anmelden des Benutzers:', err)) confirmSignIn () Auth.confirmSignIn (this.state.user, this.state.authCode) .then (() => console .log ('Benutzeranmeldung erfolgreich bestätigen !!')) .catch (err => console.log ('Fehler beim Bestätigen der Anmeldung von Benutzer:', err))Sobald der Benutzer angemeldet ist, können wir ihn verwenden Auth um auf Benutzerinformationen zuzugreifen!
Wir können anrufen Auth.currentUserInfo () um die Profilinformationen des Benutzers (Benutzername, E-Mail usw.) abzurufen oder Auth.currentAuthenticatedUser () um den Benutzer zu bekommen idToken, JWT, und viele andere nützliche Informationen über die aktuell angemeldete Sitzung des Benutzers.
AWS Amplify verwendet Amazon Pinpoint zur Handhabung von Messdaten. Wenn Sie ein neues Mobile Hub-Projekt mithilfe der CLI oder des Mobile Hub erstellen, wird Amazon Pinpoint automatisch aktiviert, konfiguriert und kann sofort verwendet werden.
Wenn Sie nicht bereits vertraut sind, ist Amazon Pinpoint ein Dienst, mit dem Entwickler nicht nur Analytics zu ihren mobilen Anwendungen hinzufügen können, sondern auch Push-Benachrichtigungen, SMS-Nachrichten und E-Mails an ihre Benutzer senden können.
Mit AWS Amplify können wir Benutzersitzungsinformationen als Messdaten mit ein paar Zeilen Code an Amazon Pinpoint senden.
Lassen Sie uns das Amazon Pinpoint-Dashboard öffnen, damit wir die Ereignisse sehen können, die wir gerade erstellen. Wenn Sie Ihr Mobile Hub-Projekt in der AWS-Konsole öffnen, wählen Sie Analytics in der oberen rechten Ecke, oder gehen Sie direkt in Amazon Pinpoint von der Konsole aus und öffnen Sie das aktuelle Projekt.
In der dunkelblauen Navigationsleiste links gibt es vier Optionen: Analytics, Segmente, Kampagnen, und Direkte. Wählen Analytics.
Sobald wir mit dem Erstellen von Sendeereignissen beginnen, können wir sie in dieser Konsolenansicht sehen.
Jetzt können wir mit dem Tracking beginnen! Im App.js, Entfernen Sie den gesamten Code aus dem letzten Beispiel. Es verbleibt im Grunde nur eine Rendermethode, die eine Containeransicht mit einer Begrüßung, einem Status, keiner Klassenmethode und nur einem Containerstil enthält.
Wir importieren auch Analytics von aws-verstärken:
importieren Sie React, Component aus 'reagieren'; importieren Sie StyleSheet, Text, Button, View aus 'reag-native'; import Amplify, Analytics aus 'aws-amplify' import config aus './aws-exports' Amplify.configure (config) Standardklasse exportieren App erweitert Component render () return (); const styles = StyleSheet.create (container: flex: 1, justifyContent: 'center', alignItems: 'center'); Analytics
Eine häufige Metrik, die Sie möglicherweise nachverfolgen möchten, ist die Anzahl, wie oft der Benutzer die App öffnet. Beginnen wir mit dem Erstellen eines Ereignisses, das dies nachverfolgen wird.
In React Native haben wir die AppState API, die uns den aktuellen Status der App anzeigt aktiv, Hintergrund, oder inaktiv. Wenn der Staat ist aktiv, Dies bedeutet, dass der Benutzer die App geöffnet hat. Wenn der Staat ist Hintergrund, Dies bedeutet, dass die App im Hintergrund ausgeführt wird und der Benutzer sich entweder auf dem Startbildschirm oder in einer anderen App befindet inaktiv bedeutet, dass der Benutzer zwischen aktivem und Vordergrund, Multitasking wechselt oder gerade telefoniert.
Wenn die App aktiv wird, senden Sie uns ein Ereignis an unsere Analyse, das besagt, dass die App geöffnet wurde.
Dazu rufen wir folgende Veranstaltung an:
Analytics.record ("App wurde geöffnet!") Sie können die API für diese Methode in den offiziellen Dokumenten anzeigen. Das Aufzeichnung Die Methode verwendet drei Argumente: Name (Zeichenfolge), Attribute (Objekt, optional) und Metriken (Objekt, optional):
Datensatz (Name: Zeichenfolge, Attribute ?: EventAttributes, Metriken ?: EventMetrics): Versprechen
Lassen Sie uns die Klasse aktualisieren, um einen Ereignis-Listener hinzuzufügen, wenn die Komponente bereitgestellt wird, und zu entfernen, wenn die Komponente zerstört wird. Dieser Listener ruft an _handleAppStateChange wann immer sich der App-Status ändert:
componentDidMount () AppState.addEventListener ('change', this._handleAppStateChange); componentWillUnmount () AppState.removeEventListener ('change', this._handleAppStateChange); Nun lassen Sie uns die erstellen _handleAppStateChange Methode:
_handleAppStateChange (appState) if (appState === 'active') Analytics.record ('App öffnet!')Jetzt können wir die App in den Hintergrund verschieben und sie wieder öffnen. Dies sollte ein Ereignis an unser Analytics-Dashboard senden. Hinweis: Um die App auf einem iOS-Simulator oder einem Android-Emulator im Hintergrund anzuzeigen, drücken Sie Befehl-Umschalt-H.
Um diese Daten im Dashboard anzuzeigen, klicken Sie auf Veranstaltungen, und wähle App geöffnet! aus dem Ereignis-Dropdown:
Sie werden wahrscheinlich auch feststellen, dass Ihnen andere Daten automatisch von Mobile Hub zur Verfügung stehen, einschließlich Sitzungsdaten, Benutzer anmelden,und Benutzer anmelden. Ich fand es ziemlich cool, dass all diese Informationen automatisch aufgezeichnet werden.
Lassen Sie uns dies nun auf die nächste Stufe bringen. Was wäre, wenn wir nicht nur einen Benutzer nachverfolgen wollten, der die App öffnet, sondern auch, welcher Benutzer die App geöffnet hat und wie oft sie die App geöffnet hat?
Wir können dies leicht tun, indem Sie der zweiten Metrik ein Attribut hinzufügen!
Lassen Sie uns so tun, als ob wir einen Benutzer angemeldet hätten, und verfolgen Sie ein neues Ereignis, das wir anrufen "Benutzerdetail: App geöffnet".
Aktualisieren Sie dazu das Datensatzereignis folgendermaßen:
Analytics.record ("Benutzerdetail - App wurde geöffnet!", Benutzername: 'NaderDabit')
Schließen Sie die App und öffnen Sie sie ein paar Mal. In unserem Dashboard sollten wir jetzt mehr Details über das Ereignis sehen können.
Schauen Sie dazu rechts von der Veranstaltung Dropdown-Liste; Da ist ein Attribute Sektion. Hier können wir die Attribute für das Ereignis detailliert darstellen. In unserem Fall haben wir den Benutzernamen, sodass wir dieses Ereignis jetzt nach Benutzernamen filtern können!
Der letzte Punkt, den wir verfolgen werden, sind die Nutzungsmetriken. Dies ist das dritte Argument zu Aufzeichnung.
Fügen Sie eine Metrik hinzu, die die aufgelaufene Zeit aufzeichnet, zu der der Benutzer in der App war. Wir können dies ganz einfach tun, indem Sie einen Zeitwert in der Klasse festlegen, ihn jede Sekunde inkrementieren und diese Informationen dann an Amazon Pinpoint senden, wenn der Benutzer die App öffnet:
// unterhalb der Klassendefinition time = 0 componentDidMount () this.startTimer () AppState.addEventListener ('change', this._handleAppStateChange); componentWillUnmount () AppState.removeEventListener ('change', this._handleAppStateChange); _handleAppStateChange (appState) if (appState === 'active') Analytics.record ('Benutzerdetail - App geöffnet!', Benutzername: 'NaderDabit', timeInApp: this.time) startTimer ( ) setInterval (() => this.time + = 1, 1000) // Render-MethodeHier haben wir einen Wert von erstellt Zeit und setze es auf 0. Wir haben auch ein neues hinzugefügt startTimer Diese Methode addiert jede Sekunde 1 zum Zeitwert. Im componentDidMount, wir nennen startTimer Dadurch wird der Zeitwert jede Sekunde um 1 erhöht.
Jetzt können wir ein drittes Argument hinzufügen Analytics.record () Dadurch wird dieser Wert als Metrik aufgezeichnet!
Schauen wir uns an, wie wir mit Amplify arbeiten können Amazon S3 um Speicher zu unserer App hinzuzufügen.
Führen Sie die folgenden Befehle aus, um S3 zu Ihrem Mobile Hub-Projekt hinzuzufügen:
Benutzerdateien von awsmobile ermöglichen das Push von awsmobile
AWS Amplify hat eine Lager API, die wir genauso wie andere APIs importieren können:
importiere Storage von 'aws-amplify'
Wir können dann Methoden aufrufen Lager mögen erhalten, stellen, Liste, und Löschen um mit Artikeln in unserem Eimer zu interagieren.
Wenn ein S3-Bucket erstellt wird, wird automatisch ein Standardbild in unserem Bucket im öffentlichen Ordner angezeigt. meins wird gerufen example-image.png. Mal sehen, ob wir verwenden können AWS Verstärken Dieses Bild von S3 lesen und anzeigen.
Wie ich oben schon erwähnt habe, Lager hat ein erhalten Eine Methode, die wir aufrufen, um Elemente abzurufen, und die Methode zum Abrufen dieses Bildes würde in etwa wie folgt aussehen:
Storage.get ('example-image.png')Um diese Funktionalität in unserer React Native-App zu demonstrieren, erstellen wir einige Funktionen, die dieses Abbild von S3 abrufen und unserem Benutzer zeigen.
Wir müssen importieren Bildvon React Native sowie Lager von aws-verstärken.
importieren, Komponente aus 'Reagieren' importieren // vorherige Importe Image aus 'Reagieren-native'; importiere Amplify, Storage aus 'aws-amplify' // Rest des Codes
Nun müssen wir einen Zustand haben, um dieses Bild zu halten, sowie eine Methode, um das Bild abzurufen und es im Zustand zu halten. Fügen wir unserer Klasse über der Render-Methode Folgendes hinzu:
state = url: " async getFile () let name = 'example-image.png'; let fileUrl = await Storage.get (name); this.setState (url: fileUrl)
Fügen Sie zum Schluss noch einige Elemente der Benutzeroberfläche hinzu, um das Bild abzurufen und für die Benutzeroberfläche zu rendern:
render () return (); Lager this.state.url! == "&& ()
Jetzt sollten wir in der Lage sein, auf die Schaltfläche zu klicken und das Bild aus S3 anzuzeigen!
Klicken Sie hier, um die endgültige Version dieser Datei anzuzeigen.
Insgesamt bietet AWS Amplify eine sehr einfache Möglichkeit, eine komplexe Funktionalität mit nicht viel Code zu realisieren, die sich nahtlos in viele AWS-Services integrieren lässt.
Push-Benachrichtigungen, die kürzlich in AWS Amplify hinzugefügt wurden, wurden nicht behandelt. Diese werden jedoch in einem der nächsten Beiträge behandelt!
AWS Amplify wird aktiv gewartet. Wenn Sie also Funktionswünsche oder Ideen haben, können Sie dies gerne kommentieren, ein Problem oder eine Pull-Anfrage einreichen oder das Projekt nur ansehen oder beobachten, wenn Sie über zukünftige Funktionen auf dem Laufenden bleiben möchten!
In der Zwischenzeit können Sie auch einige unserer anderen Beiträge zum Codieren von React Native-Apps lesen.
