Share
Hva du skal skapeAWS Amplify er et åpen kildebibliotek som gjør det mulig for utviklere, og i våre tilfelle mobilutviklere, å legge til en rekke verdifulle funksjonaliteter for applikasjoner, inkludert analyse, push-varsler, lagring og autentisering.
Amplify fungerer ikke bare med React Native, men også med Vue, Angular, Ionic, React web og virkelig noen JavaScript rammeverk. I denne opplæringen vil vi demonstrere noen av kjernefunksjonene i en React Native-applikasjon.
Det flotte med dette biblioteket er at det abstraherer det som pleide å være komplisert oppsett og konfigurasjon for alle disse funksjonene i en brukervennlig modul som vi kan legge til i prosjektet vårt ved å bruke NPM.
Vi vil dekke AWS Amplify i tre deler: autentisering, lagring og analyse.
Hvis du vil følge med, kan du opprette et nytt React Native-prosjekt ved hjelp av enten Expo (Create React Native App) eller React Native CLI:
reager-innfødt init RNAmplify
eller
Opprett-reager-native-app RNAmplify
Deretter la oss gå videre og installere AWS-forsterke bibliotek med enten garn eller npm:
garn legg til aws-amplify
Hvis du bruker Expo, kan du hoppe over det neste trinnet (kobling) som Expo allerede sender de opprinnelige avhengighetene til Amazon Cognito-støtte.
Hvis du ikke bruker Expo, må vi koble til Cognito bibliotek (Amazon Cognito håndterer autentisering) som ble installert da vi la til AWS-forsterke:
reagere-innfødt link amazon-cognito-identitet-js
Nå som React Native-prosjektet er opprettet og konfigurert, må vi sette opp Amazon-tjenestene som vi skal samhandle med.
I katalogen av det nye prosjektet vil vi skape et nytt Mobile Hub-prosjekt for denne opplæringen. For å opprette dette prosjektet, bruker vi AWSMobile CLI, men vær så snill å bruke konsollen hvis du er en mer avansert bruker. Jeg har lagt ut en YouTube-video med en rask oversikt over AWSMobile CLI hvis du vil lære mer om det.
La oss nå lage et nytt Mobile Hub-prosjekt i roten til vår nye prosjektkatalog:
awsmobile init
Etter at du har opprettet prosjektet ditt og har ditt aws-eksportfil (dette opprettes automatisk for deg ved å kjøre awsmobile init), må vi konfigurere vårt React Native-prosjekt med vårt AWS-prosjekt ved hjelp av AWS Amplify.
For å gjøre det, vil vi gå inn App.js under den siste importen og legg til følgende tre linjer med kode:
Import Amplify, Auth fra 'aws-amplify' importkonfigurasjon fra './aws-exports' Amplify.configure (config)
Autentisering med Amplify er gjort ved hjelp av Amazon Cognito-tjenesten. Vi bruker denne tjenesten for å tillate brukere å logge på og registrere seg i vårt program!
La oss legge til brukerinnlogging og Amazon Cognito til vårt Mobile Hub-prosjekt. Kjør følgende kommandoer i rotkatalogen:
awsmobile user-signin aktivere awsmobile push
Nå vil vi få et nytt Amazon Cognito brukerbasseng satt opp og klar til å gå. (Hvis du vil se detaljene for denne nye tjenesten, går du til AWS-konsollen, klikker på Cognito og velger navnet på AWSMobile-prosjektnavnet du opprettet.)
Deretter la vi integrere godkjenning med Amazon Cognito og AWS Amplify.
La oss begynne med å ta en titt på hovedklassen som du vil bruke for å få full tilgang til Amazon Cognito-tjenestene, Auth klasse.
De Auth klassen har mange metoder som gjør at du kan gjøre alt fra å registrere deg og logge på brukere til å endre passordet og alt i mellom.
Det er også enkelt å jobbe med tofaktorautentisering med AWS Amplify ved hjelp av Auth klassen, som vi vil se i følgende eksempel.
La oss ta en titt på hvordan du kan gå om å registrere deg og logge på en bruker ved hjelp av Amazon Cognito og Auth klasse.
Vi kan oppnå en solid påmelding og innlogging med relativt lite arbeid! Vi skal bruke melde deg på, confirmSignUp, Logg inn, og confirmSignInmetoder for Auth klasse.
I App.js, la oss lage noen få metoder som håndterer brukeropplysning med tofaktorautentisering, samt noen tilstand for å holde brukerinngangen:
Accentsconagua
state = brukernavn: ", epost:", telefonnummer: ", passord:", authCode: ", bruker: onChangeText = (nøkkel, verdi) => this.setState ([key]: value) signUp () const brukernavn, passord, email, phone_number = this.state Auth.signUp (brukernavn, passord, attributter: phone_number, email) .then (() => console.log registrer suksess! ')) .catch (err => console.log (' feil påmelding bruker: ', feil)) confirmSignUp () Auth.confirmSignUp (dette.state.username, this.state.authCode) .then (() => console.log ('bekreft brukerregistrering suksess!')) .catch (err => console.log ('feil bekreftelse å registrere bruker:', feil))melde deg på lager den første påmeldingsforespørselen, som vil sende en SMS til den nye brukeren for å bekrefte nummeret sitt. confirmSignUp tar SMS-koden og brukernavnet og bekrefter den nye brukeren i Amazon Cognito.
Vi vil også opprette et brukergrensesnitt for skjemainngang og en knapp, og lede klassemetodene til disse brukergrensesnittelementene. Oppdater gjengi metode til følgende:
gjengivelse () retur (); this.onChangeText ('brukernavn', val) /> this.onChangeText ('passord', val) /> this.onChangeText ('email', val) /> this.onChangeText ('phone_number', val) /> this.onChangeText ('authCode', val) />
Til slutt vil vi oppdatere vår stiler erklæring slik at vi har et bedre brukergrensesnitt:
const styles = StyleSheet.create (container: flex: 1, justifyContent: 'center',, input: høyde: 50, borderBottomWidth: 2, borderBottomColor: '# 9E9E9E', margin: 10);
For å se den endelige versjonen av denne filen, klikk her.
Nå skal vi kunne registrere seg, få en bekreftelseskode sendt til vårt telefonnummer, og bekreft ved å skrive inn bekreftelseskoden.
Hvis du vil se detaljene til denne nyopprettede brukeren, går du tilbake til AWS-konsollen, klikker på Cognito, velger navnet på AWSMobile-prosjektnavnet du opprettet, og klikker på Brukere og grupper i Generelle innstillinger menyen til venstre.
Du kan ta dette videre ved å implementere pålogging og bekreft pålogging. La oss ta en titt på metodene for Logg inn og confirmSignIn:
signIn () Auth.signIn (dette.state.username, this.state.password) .then (user => this.setState (user) console.log ('brukerlogg i suksess!')) .catch (err => console.log ("feil logging inn bruker: ', feil)) confirmSignIn () Auth.confirmSignIn (denne.state.user, this.state.authCode) .then (() => konsoll .log ('bekreft brukerlogg i suksess!')) .catch (err => console.log ('feil bekreftelse på signering av bruker:', feil))Når brukeren er logget på, kan vi da bruke Auth for å få tilgang til brukerinformasjon!
Vi kan ringe Auth.currentUserInfo () for å få brukerens profilinformasjon (brukernavn, e-post, etc.) eller Auth.currentAuthenticatedUser () for å få brukerens idToken, JWT, og mye annen nyttig informasjon om brukerens nåværende innloggingsøkt.
AWS Amplify bruker Amazon Pinpoint til å håndtere beregninger. Når du oppretter et nytt Mobile Hub-prosjekt med enten CLI eller Mobile Hub, har du automatisk Amazon Pinpoint aktivert, konfigurert og klar til å gå.
Hvis du ikke allerede er kjent, er Amazon Pinpoint en tjeneste som ikke bare lar utviklere legge til Analytics i sine mobile applikasjoner, men lar dem også sende pushvarsler, sms-meldinger og e-post til brukerne.
Med AWS Amplify kan vi sende bruker øktinformasjon som beregninger til Amazon Pinpoint med noen få linjer med kode.
La oss åpne Amazon Pinpoint dashbordet slik at vi kan se hendelsene vi skal lage. Hvis du åpner mobilnavprosjektet i AWS-konsollen, velger du Analytics i øverste høyre hjørne, eller gå direkte inn Amazon Pinpoint fra konsollen, og åpne det nåværende prosjektet.
I den mørkeblå navigasjonslinjen til venstre er det fire alternativer: Analytics, segmenter, kampanjer, og Direkte. Velge Analytics.
Når vi begynner å skape sende hendelser, vil vi kunne se dem i denne konsollvisningen.
Nå er vi klare til å begynne å spore! I App.js, fjern all koden fra det forrige eksempelet, og la oss i utgangspunktet bare en gjengivelsesmetode som inneholder en beholder Vis med en teksthilsen, ingen tilstand, ingen klassemetoder og bare en containerstil.
Vi importerer også Analytics fra AWS-forsterke:
Import React, Component fra 'reagere'; importer StyleSheet, Text, Button, View fra 'react-native'; Import Amplify, Analytics fra 'aws-amplify' importkonfigurasjon fra './aws-exports' Amplify.configure (config) eksport standard klasse App utvider komponent render () return (); const styles = StyleSheet.create (container: flex: 1, justifyContent: 'center', alignItems: 'center'); Analytics
En vanlig beregning som du kanskje vil spore, er antall ganger brukeren åpner appen. La oss begynne med å skape et arrangement som vil spore dette.
I React Native har vi AppState API, som vil gi oss den nåværende app-tilstanden til aktiv, bakgrunn, eller uvirksom. Hvis staten er aktiv, det betyr at brukeren har åpnet appen. Hvis staten er bakgrunn, det betyr at appen kjører i bakgrunnen, og brukeren er enten på startskjermen eller i en annen app, mens uvirksom betyr at brukeren overfører mellom aktiv og forgrunns, multitasking, eller er i en telefonsamtale.
Når appen blir aktiv, la vi sende en hendelse til våre analyser som sier at appen ble åpnet.
For å gjøre det, ringer vi til følgende arrangement:
Analytics.record ('App åpnet!') Du kan se API-en for denne metoden i de offisielle dokumentene. De ta opp Metoden tar tre argumenter: navn (streng), attributter (objekt, valgfritt) og beregninger (objekt, valgfritt):
post (navn: streng, attributter ?: EventAttributes, metrics ?: EventMetrics): Promise
La oss oppdatere klassen for å legge til en hendelseslytter når komponenten er montert, og fjern den når komponenten er ødelagt. Denne lytteren vil ringe _handleAppStateChange når app-tilstanden endres:
componentDidMount () AppState.addEventListener ('change', this._handleAppStateChange); componentWillUnmount () AppState.removeEventListener ('change', this._handleAppStateChange); La oss nå lage _handleAppStateChange metode:
_handleAppStateChange (appState) hvis (appState === 'aktiv') Analytics.record ('App åpnet!'Nå kan vi flytte appen til bakgrunnen, åpne den på nytt, og dette bør sende en hendelse til vårt Analytics-dashbord. Merk: Hvis du vil bakgrunnen appen på en iOS-simulator eller Android-emulator, trykker du på Kommando-Skift-H.
For å se disse dataene i oversikten klikker du på arrangementer, og velg Appen ble åpnet! fra rullegardinmenyen Hendelser:
Du vil også sikkert merke til at du har andre data tilgjengelige automatisk fra Mobile Hub, inkludert øktdata, bruker påmelding,og brukerlogg inn. Jeg trodde det var ganske kult at all denne informasjonen automatisk ble registrert.
La oss nå ta dette til neste nivå. Hva om vi ønsket å spore ikke bare en bruker som åpnet appen, men hvilken bruker åpnet appen og hvor mange ganger de åpnet appen?
Vi kan enkelt gjøre dette ved å legge til et attributt til den andre metriske!
La oss opptre som om vi har en bruker pålogget, og spore en ny begivenhet som vi vil ringe "Brukerdetaljer: App åpnet".
For å gjøre dette oppdaterer du rekordhendelsen til følgende:
Analytics.record ('Brukerdetaljer - App åpnet!', Brukernavn: 'NaderDabit')
Deretter lukk og åpne appen et par ganger. Vi bør nå kunne se mer detalj om hendelsen i dashbordet.
For å gjøre det, se til høyre for Begivenhet fall ned; det er en Egenskaper seksjon. Her kan vi bore ned i attributter for arrangementet. I vårt tilfelle har vi brukernavnet, så vi kan nå filtrere denne hendelsen etter brukernavn!
Det endelige elementet vi vil spore er bruksstatistikkene. Dette er det tredje argumentet til ta opp.
La oss legge til en beregning som registrerer den påløpte tiden som brukeren har vært i appen. Vi kan gjøre dette ganske enkelt ved å sette en tidsverdi i klassen, øke den hvert sekund, og deretter sende denne informasjonen sammen til Amazon Pinpoint når brukeren åpner appen:
// under klassen definisjonstid = 0 componentDidMount () this.startTimer () AppState.addEventListener ('change', this._handleAppStateChange); componentWillUnmount () AppState.removeEventListener ('change', this._handleAppStateChange); _handleAppStateChange (appState) if (appState === 'aktiv') Analytics.record ('Brukerdetaljer - App åpnet!', brukernavn: 'NaderDabit', timeInApp: this.time) startTimer ) setInterval (() => this.time + = 1, 1000) // gjengemetodeHer har vi opprettet en verdi av tid og sett den til 0. Vi har også lagt til en ny startTimer metode som vil legge til 1 til tidsverdien hvert sekund. I componentDidMount, vi ringer startTimer som vil øke tidsverdien med 1 hvert sekund.
Nå kan vi legge til et tredje argument til Analytics.record () som vil registrere denne verdien som en beregning!
La oss se på hvordan vi kan bruke Amplify med Amazon S3 å legge til lagring i vår app.
For å legge til S3 i Mobile Hub-prosjektet, kjør følgende kommandoer:
awsmobile brukerfiler aktiver awsmobile push
AWS Amplify har a Oppbevaring API som vi kan importere akkurat som vi har med de andre APIene:
importer Storage fra 'aws-amplify'
Vi kan da ringe metoder på Oppbevaring som få, sette, liste, og fjerne å samhandle med elementer i vår bøtte.
Når en S3-bøtte er opprettet, vil vi automatisk ha et standardbilde i vår bøtte i den offentlige mappen; min er kalt eksempel-image.png. La oss se om vi kan bruke AWS forsterke å lese og se dette bildet fra S3.
Som jeg nevnte ovenfor, Oppbevaring har en få Metode som vi vil ringe for å hente elementer, og metoden for å hente dette bildet vil se slik ut:
Storage.get ( 'eksempel-image.png')
For å demonstrere denne funksjonaliteten i vår React native app, la oss lage noen funksjonalitet som henter dette bildet fra S3 og viser det til brukeren vår.
Vi må importere Bildefra React Native, så vel som Oppbevaring fra AWS-forsterke.
Import React, Component fra 'React' import // forrige import Image fra 'react-native'; Import Amplify, Storage fra 'aws-amplify' // resten av koden
Nå må vi ha noen tilstand for å holde dette bildet, samt en metode for å hente bildet og holde det i staten. La oss legge til følgende i vår klasse over gjengivelsesmetoden:
state = url: " async getFile () la name = 'example-image.png'; la filenUrl = avvente Storage.get (navn); this.setState (url: fileUrl)
Til slutt, la oss legge til noen brukergrensesnittelementer for å hente bildet og gjøre det til brukergrensesnittet:
gjengivelse () retur (); Oppbevaring this.state.url! == "&& ()
Nå skal vi kunne klikke på knappen og se bildet fra S3!
For å se den endelige versjonen av denne filen, klikk her.
Samlet gir AWS Amplify en veldig enkel måte å oppnå det som pleide å være komplisert funksjonalitet med ikke mye kode, integrert sømløst med mange AWS-tjenester.
Vi dekker ikke pushvarsler, som også nylig ble lagt til AWS Amplify, men disse vil bli dekket i et kommende innlegg!
AWS Amplify opprettholdes aktivt, så hvis du har noen funksjonsforespørsler eller ideer, vær så snill å kommentere, send inn et problem eller dra forespørsel, eller bare stjerne eller se på prosjektet hvis du vil bli oppdatert med fremtidige funksjoner!
Og i mellomtiden, sjekk ut noen av våre andre innlegg om koding React native apps.
