Share
Vad du ska skapaAWS Amplify är ett bibliotek med öppen källkod som gör det möjligt för utvecklare och i våra mobila utvecklare att lägga till en mängd värdefulla funktioner för applikationer, inklusive analys, push-noteringar, lagring och autentisering.
Amplify fungerar inte bara med React native, men också med Vue, Angular, Ionic, React web och verkligen någon JavaScript-ram. I denna handledning demonstrerar vi en del av dess kärnfunktionalitet inom en React native-applikation.
Det fantastiska med det här biblioteket är att det abstraherar bort det som brukade vara komplext konfiguration och konfiguration för alla dessa funktioner i en lättanvänd modul som vi kan lägga till vårt projekt med hjälp av NPM.
Vi täcker AWS Amplify i tre delar: autentisering, lagring och analys.
Om du vill följa med, skapa ett nytt React native-projekt med antingen Expo (Create React Native App) eller React native CLI:
reagera-native-init RNAmplify
eller
skapa-reagera-native-app RNAmplify
Låt oss fortsätta och installera AWS-amplifiera bibliotek med antingen garn eller npm:
garn lägga till aws-amplify
Om du använder Expo kan du hoppa över nästa steg (länka) eftersom Expo redan skickar de ursprungliga beroenden för Amazon Cognito support.
Om du inte använder Expo, måste vi länka Cognito bibliotek (Amazon Cognito hanterar autentisering) som installerades när vi lagt till AWS-amplifiera:
reagera-nativ länk amazon-cognito-identitet-js
Nu när React Native-projektet skapas och konfigureras måste vi konfigurera Amazon-tjänsterna som vi kommer att interagera med.
Inom katalogen av det nya projektet ska vi skapa ett nytt Mobile Hub-projekt för denna handledning. För att skapa detta projekt använder vi AWSMobile CLI, men gärna använda konsolen om du är en mer avancerad användare. Jag har lagt upp en YouTube-video med en snabb översikt över AWSMobile CLI om du vill lära dig mer om det.
Låt oss nu skapa ett nytt Mobile Hub-projekt i roten till vår nya projektkatalog:
awsmobile init
När du har skapat ditt projekt och har ditt aws-export-fil (det här skapas automatiskt för dig genom att springa awsmobile init), måste vi konfigurera vårt React Native-projekt med vårt AWS-projekt med AWS Amplify.
För att göra det ska vi gå in i App.js under den senaste importen och lägg till följande tre rader av kod:
Importera förstärka, Auth från "aws-amplify" importkonfiguration från './aws-exports' Amplify.configure (config)
Autentisering med Amplify görs genom att använda Amazon Cognito-tjänsten. Vi använder den här tjänsten för att tillåta användare att logga in och registrera sig för vår ansökan!
Låt oss lägga till användarnamn och Amazon Cognito till vårt Mobile Hub-projekt. Kör följande kommandon i rotkatalogen:
awsmobile user-signin aktivera awsmobile push
Nu kommer vi att ha en ny Amazon Cognito användarpool satt upp och redo att gå. (Om du vill se detaljerna för den här nya tjänsten går du till AWS-konsolen, klickar på Cognito och väljer namnet på det AWSMobile-projektnamn du skapade.)
Låt oss sedan integrera autentisering med Amazon Cognito och AWS Amplify.
Låt oss börja med att titta på huvudklassen som du kommer att använda för att få full tillgång till Amazon Cognito-tjänsterna, Auth klass.
De Auth klassen har många metoder som gör att du kan göra allt från att logga in och logga in på användarna för att ändra sitt lösenord och allt däremellan.
Det är också enkelt att arbeta med tvåfaktors autentisering med AWS förstärka med Auth klass, som vi kommer att se i följande exempel.
Låt oss ta en titt på hur du kan gå om att registrera dig och logga in på en användare som använder Amazon Cognito och Auth klass.
Vi kan åstadkomma ett solidt registrerings- och inloggningsflöde med relativt litet arbete! Vi kommer att använda Bli Medlem, confirmSignUp, logga in, och confirmSignInmetoder för Auth klass.
I App.js, låt oss skapa några metoder som hanterar användarregistrering med tvåfaktorsautentisering såväl som något tillstånd för att hålla användarinmatningen:
Accentsconagua
state = användarnamn: ", email:", telefonnummer: ", lösenord:", authCode: ", användare: onChangeText = (nyckel, värde) => this.setState ([key]: value) signUp () const användarnamn, lösenord, email, phone_number = this.state Auth.signUp (användarnamn, lösenord, attribut: phone_number, email) .then (() => console.log registrera framgång! ')) .catch (err => console.log (' error sign up user: ', err)) confirmSignUp () Auth.confirmSignUp (this.state.username.this.state.authCode) .then (() => console.log ('bekräfta användarregistreringssucces !!')) .catch (err => console.log ('fel bekräftar att registrera användaren:', err))Bli Medlem skapar den första registreringsförfrågan, som skickar ett SMS till den nya användaren för att bekräfta deras nummer. confirmSignUp tar SMS-koden och användarnamnet och bekräftar den nya användaren i Amazon Cognito.
Vi kommer också att skapa ett användargränssnitt för formulärinmatningen och en knapp och koppla klassmetoderna till dessa användargränssnitt. Uppdatera göra metod för följande:
render () returnera (); this.onChangeText ('användarnamn', val) /> this.onChangeText ('lösenord', val) /> this.onChangeText ('email', val) /> this.onChangeText ('phone_number', val) /> this.onChangeText ('authCode', val) />
Slutligen uppdaterar vi vår stilar deklarationen så att vi har ett trevligare användargränssnitt:
const styles = StyleSheet.create (container: flex: 1, justifyContent: 'center',, inmatning: höjd: 50, borderBottomWidth: 2, borderBottomColor: '# 9E9E9E', margin: 10);
Om du vill visa den slutliga versionen av den här filen klickar du på här.
Nu borde vi kunna anmäla dig, få en bekräftelseskod skickad till vårt telefonnummer och bekräfta genom att skriva in bekräftelsekoden.
Om du vill se detaljerna för den nyanställda användaren, gå tillbaka till AWS-konsolen, klicka på Cognito, välj namnet på det AWSMobile-projektnamn du skapade och klicka på Användare och grupper i Allmänna Inställningar meny till vänster.
Du kan ta det här ytterligare genom att genomföra inloggning och bekräfta inloggningen. Låt oss ta en titt på metoderna för logga in och confirmSignIn:
signIn () Auth.signIn (this.state.username.this.state.password) .then (user => this.setState (user) console.log ('användarnamn till framgång !!')) .catch (err => console.log ("fel inloggning användare: ', err)) confirmSignIn () Auth.confirmSignIn (this.state.user, this.state.authCode) .then (() => konsol .log ('bekräfta användarskylt i framgång!')) .catch (err => console.log ('fel bekräftar inloggning av användare:', err))När användaren är inloggad kan vi då använda Auth för att få tillgång till användarinformation!
Vi kan ringa Auth.currentUserInfo () för att få användarens profilinformation (användarnamn, e-post, etc.) eller Auth.currentAuthenticatedUser () för att få användarens idToken, JWT, och mycket annan användbar information om användarens aktuella inloggade session.
AWS Amplify använder Amazon Pinpoint för att hantera mätvärden. När du skapar ett nytt Mobile Hub-projekt med antingen CLI eller Mobile Hub, har du automatiskt Amazon Pinpoint aktiverat, konfigurerat och redo att gå.
Om du inte är bekant är Amazon Pinpoint en tjänst som inte bara tillåter utvecklare att lägga till Analytics i sina mobilapplikationer, men låter dem också skicka meddelanden, sms och e-post till sina användare.
Med AWS Amplify kan vi skicka användarsessioninformation som mätvärden till Amazon Pinpoint med några rader kod.
Låt oss öppna Amazon Pinpoint-instrumentpanelen så att vi kan se vilka händelser vi ska skapa. Om du öppnar ditt mobila navprojekt i AWS-konsolen väljer du Analytics i övre högra hörnet, eller gå direkt in Amazon Pinpoint från konsolen och öppna det aktuella projektet.
I den mörkblå navigeringsfältet till vänster finns det fyra alternativ: Analytics, segment, kampanjer, och Direkt. Välja Analytics.
När vi väl har skapat händelser kommer vi att kunna se dem i den här konsolen.
Nu är vi redo att börja spåra! I App.js, ta bort hela koden från det sista exemplet, lämna oss i princip bara en återgivningsmetod som innehåller en behållare Visa med en texthälsning, ingen tillstånd, ingen klassmetoder och bara en behållarstil.
Vi importerar också Analytics från AWS-amplifiera:
Importreakt, Komponent från "reagera"; importera StyleSheet, Text, Button, View från "react-native"; Importera förstärk, Analytics från "aws-amplify" importkonfiguration från './aws-exports' Amplify.configure (config) export standardklass App utvidgar komponent render () return (); const styles = StyleSheet.create (container: flex: 1, justifyContent: 'center', alignItems: 'center'); Analytics
En vanlig metrisk som du kanske vill spåra är hur många gånger användaren öppnar appen. Låt oss börja med att skapa en händelse som kommer att spåra detta.
I React native har vi AppState API, vilket ger oss den aktuella appen för aktiva, bakgrund, eller inaktiv. Om staten är aktiva, det betyder att användaren har öppnat appen. Om staten är bakgrund, det betyder att appen körs i bakgrunden och användaren är antingen på startskärmen eller i en annan app, medan inaktiv betyder att användaren övergår mellan aktiv och förgrunds, multitasking, eller är på ett telefonsamtal.
När appen blir aktiv, låt oss skicka en händelse till våra analyser som säger att appen öppnades.
För att göra det ringer vi följande händelse:
Analytics.record ("App öppnat!") Du kan visa API för den här metoden i de officiella dokumenten. De spela in Metoden tar tre argument: namn (sträng), attribut (objekt, valfritt) och mätvärden (objekt, valfritt):
spela in (namn: sträng, attribut ?: EventAttributes, metrics ?: EventMetrics): Promise
Låt oss uppdatera klassen för att lägga till en händelselyssnare när komponenten är monterad och ta bort den när komponenten förstörs. Denna lyssnare ringer _handleAppStateChange när app-tillståndet ändras:
componentDidMount () AppState.addEventListener ("change", this._handleAppStateChange); componentWillUnmount () AppState.removeEventListener ('change', this._handleAppStateChange); Nu, låt oss skapa _handleAppStateChange metod:
_handleAppStateChange (appState) om (appState === 'aktiv') Analytics.record ('App öppnat!')Nu kan vi flytta appen till bakgrunden, öppna den på nytt, och detta ska skicka en händelse till vår Analytics-instrumentpanel. Obs! Tryck på om du vill bakgrunda appen på en iOS-simulator eller Android-emulator Kommando-skift-H.
För att se dessa data i instrumentpanelen, klicka på evenemang, och välj App öppnade! från nedanstående händelser:
Du märker också nog att du har annan data tillgänglig för dig automatiskt från Mobile Hub, inklusive session data, användarregistrering,och användar inloggning. Jag tyckte det var ganska coolt att all denna information spelas in automatiskt.
Låt oss nu ta det här till nästa nivå. Vad händer om vi ville spåra inte bara en användare som öppnade appen, men vilken användare öppnade appen och hur många gånger de öppnade appen?
Vi kan enkelt göra detta genom att lägga till ett attribut till den andra metriska!
Låt oss fungera som om vi har en användare inloggad och spåra en ny händelse som vi kommer att ringa "Användardetaljer: App öppnad".
För att göra detta, uppdatera posthändelsen till följande:
Analytics.record ('Användardetaljer - App öppnad!', Användarnamn: 'NaderDabit')
Därefter stäng och öppna appen ett par gånger. Vi borde nu kunna se mer detaljer om händelsen i vår instrumentpanel.
För att göra så, se till höger om Händelse falla ner; där är en attribut sektion. Här kan vi borra ner i attributen för evenemanget. I vårt fall har vi användarnamnet, så vi kan nu filtrera den här händelsen med användarnamn!
Det sista objektet vi kommer att spåra är användningsstatistiken. Detta är det tredje argumentet till spela in.
Låt oss lägga till en mätvärde som registrerar den upplupna tiden som användaren har varit i appen. Vi kan göra det här ganska enkelt genom att ställa in ett tidvärde i klassen, öka det varje sekund och sedan skicka informationen till Amazon Pinpoint när användaren öppnar appen:
// under klassdefinitionstid = 0 componentDidMount () this.startTimer () AppState.addEventListener ('change', this._handleAppStateChange); componentWillUnmount () AppState.removeEventListener ('change', this._handleAppStateChange); _handleAppStateChange (appState) if (appState === 'aktiv') Analytics.record ('Användardetaljer - App öppnat!', användarnamn: 'NaderDabit', timeInApp: this.time) startTimer ) setInterval (() => this.time + = 1, 1000) // gör metodHär har vi skapat ett värde av tid och ställ den till 0. Vi har också lagt till en ny startTimer metod som lägger till 1 till tidvärdet varje sekund. I componentDidMount, vi ringer startTimer vilket ökar tidsvärdet med 1 varje sekund.
Nu kan vi lägga till ett tredje argument till Analytics.record () som registrerar detta värde som en metrisk!
Låt oss se hur vi kan använda Amplify med Amazon S3 Lägg till lagring i vår app.
För att lägga till S3 i ditt mobilnavsprojekt, kör följande kommandon:
awsmobile användarfiler aktivera awsmobile push
AWS Amplify har a Lagring API som vi kan importera precis som vi har med de andra API: erna:
importera Storage från 'aws-amplify'
Vi kan då ringa metoder på Lagring tycka om skaffa sig, sätta, lista, och ta bort att interagera med saker i vår hink.
När en S3-skopa skapas kommer vi automatiskt att ha en standardbild i vår skopa i den offentliga mappen. min kallas exempel-image.png. Låt oss se om vi kan använda AWS Förstärka att läsa och se den här bilden från S3.
Som jag nämnde ovan, Lagring har en skaffa sig metod som vi kommer att ringa för att hämta objekt, och metoden att hämta den här bilden skulle se ut så här:
Storage.get ( 'exempel-image.png')
För att visa denna funktion i vår React native app, låt oss skapa en del funktionalitet som hämtar den här bilden från S3 och visar den till vår användare.
Vi måste importera Bildfrån React native, liksom Lagring från AWS-amplifiera.
Importreakt, Komponent från "React" import // föregående import Image från "react-native"; Importera förstärka, Storage från "aws-amplify" // resten av koden
Nu måste vi ha någon stat att hålla den här bilden, liksom en metod att hämta bilden och hålla den i staten. Låt oss lägga till följande i vår klass ovanför renderingsmetoden:
state = url: " async getFile () let name = 'example-image.png'; låt filenUrl = vänta på Storage.get (namn); this.setState (url: fileUrl)
Till sist, låt oss lägga till några användargränssnitt för att hämta bilden och göra den till användargränssnittet:
render () returnera (); Lagring this.state.url! == "&& ()
Nu borde vi kunna klicka på knappen och se bilden från S3!
För att se den slutliga versionen av den här filen, klicka här.
Sammantaget ger AWS Amplify ett väldigt enkelt sätt att åstadkomma som brukade vara komplicerad funktionalitet med inte mycket kod, integrera sömlöst med många AWS-tjänster.
Vi täckte inte pushanmälningar, som nyligen också lagts till AWS Amplify, men de kommer att täckas i ett kommande inlägg!
AWS Amplify underhålls aktivt, så om du har några funktionsförfrågningar eller idéer, var god att kommentera, skicka ett problem eller dra begäran, eller bara stjärna eller titta på projektet om du vill bli uppdaterad med framtida funktioner!
Och under tiden, kolla in några av våra andra inlägg om kodande React native apps.
