Share
Ce veți creaAWS Amplify este o bibliotecă open-source care permite dezvoltatorilor și, în cazul nostru, dezvoltatorilor de dispozitive mobile, să adauge o mulțime de funcționalități valoroase aplicațiilor, inclusiv analiza, notificările push, stocarea și autentificarea.
Amplificați lucrările nu numai cu React Native, ci și cu Vue, Angular, Ionic, React web și cu adevărat orice cadru JavaScript. În acest tutorial, vom demonstra câteva din funcțiile sale principale în cadrul unei aplicații Reactive Native.
Lucrul minunat în legătură cu această bibliotecă este că abstractează ceea ce a fost o configurare complexă și o configurație complexă pentru toate aceste caracteristici într-un modul ușor de utilizat pe care îl putem adăuga la proiectul nostru folosind NPM.
Vom acoperi AWS Amplify în trei părți: autentificare, stocare și analiză.
Dacă doriți să continuați, creați un nou proiect React Native utilizând fie Expo (Creare Reactivă Nativă), fie Reactiv Nativ CLI:
reactiv-nativ ARN intim
sau
create-react-native-app RNAmplify
Apoi, să mergem mai departe și să instalăm AWS-amplifica bibliotecă utilizând fie fire sau npm:
fire adăuga aws-amplifica
Dacă utilizați Expo, puteți trece peste pasul următor (legătura), deoarece Expo livrează deja dependențele native pentru suportul Amazon Cognito.
Dacă nu utilizați Expo, trebuie să conectați COGNITO bibliotecă (Amazon Cognito se ocupă de autentificare) instalată când am adăugat AWS-amplifica:
reacție-legătură nativă amazon-cognito-identitate-js
Acum, când proiectul React Native este creat și configurat, trebuie să configuram serviciile Amazon cu care vom interacționa.
În directorul noului proiect, vom crea un nou proiect Mobile Hub pentru acest tutorial. Pentru a crea acest proiect, vom folosi CLI-ul AWSMobile, dar nu ezitați să utilizați consola dacă sunteți un utilizator mai avansat. Am postat un videoclip YouTube cu o prezentare rapidă a CLI-ului AWSMobile dacă doriți să aflați mai multe despre el.
Acum, să creăm un nou proiect Mobile Hub în rădăcina noului director de proiect:
awsmobile init
După ce ați creat proiectul și aveți dvs. aws-exports file (aceasta este creată automat pentru dvs. prin difuzare awsmobile init), trebuie să configuram proiectul React Native cu proiectul nostru AWS folosind AWS Amplify.
Pentru a face acest lucru, vom intra în App.js sub ultimele importuri și adăugați următoarele trei linii de cod:
import Amplificați, Auth din "aws-amplify" import config din "./aws-exports" Amplify.configure (config)
Autentificarea cu Amplify se face folosind serviciul Amazon Cognito. Vom folosi acest serviciu pentru a permite utilizatorilor să se conecteze și să se înscrie în aplicația noastră!
Să adăugăm conectarea utilizatorilor și Amazon Cognito la proiectul nostru Mobile Hub. În directorul rădăcină, executați următoarele comenzi:
awsmobile user-signin permite apăsarea awsmobile
Acum, vom avea o nouă piscină de utilizatori Amazon Cognito înființată și gata de plecare. (Dacă doriți să vizualizați detaliile acestui serviciu nou, mergeți la Consola AWS, dați clic pe Cognito și alegeți numele numelui de proiect AWSMobile pe care l-ați creat.)
Apoi, să integrăm autentificarea cu Amazon Cognito și AWS Amplify.
Să începem să aruncăm o privire la clasa principală pe care o veți folosi pentru a avea acces complet la serviciile Amazon Cognito, Auth clasă.
Auth clasa are multe metode care vă vor permite să faceți totul, de la înscrierea și conectarea utilizatorilor la schimbarea parolei și a celorlalte între ele.
De asemenea, este simplu să lucrați cu autentificarea cu două factori cu AWS Amplify folosind Auth clasa, așa cum vom vedea în exemplul următor.
Să aruncăm o privire asupra modului în care ați putea să vă înscrieți și să vă conectați la un utilizator care utilizează Amazon Cognito și Auth clasă.
Putem realiza un semnal solid și un semnal de intrare cu o activitate relativ redusă! Vom folosi Inscrie-te, confirmSignUp, conectare, și confirmSignInmetode ale Auth clasă.
În App.js, să creați câteva metode care să se ocupe de înregistrarea utilizatorului cu autentificare cu doi factori, precum și de o anumită stare care să dețină intrarea utilizatorului:
Accentsconagua
(= nume utilizator: ", e-mail:", numărul_fonului: ", parola:", authCode: ", user: onChangeText = (cheie, valoare) => this.setState ([key]: value) nume de utilizator, parolă, e-mail, număr de telefon = this.state Auth.signUp (nume utilizator, parolă, atribute: phone_number, email. ()) .catch (err => console.log ('eroare de înregistrare utilizator:', err)) confirmSignUp () Auth.confirmSignUp (this.state.username, this.state.authCode) .catch (err => console.log ("eroare de confirmare a înscrierii utilizatorului: ', err)Inscrie-te creează cererea inițială de înscriere, care va trimite un SMS noului utilizator pentru a-și confirma numărul. confirmSignUp ia codul SMS și numele de utilizator și confirmă noul utilizator în Amazon Cognito.
Vom crea, de asemenea, un interfață utilizator pentru formularul de intrare și un buton, și sârmă metodele de clasă la aceste elemente UI. Actualizați face la următoarele:
render () return (); this.onChangeText ('nume de utilizator', val) /> this.onChangeText ('parola', val) /> this.onChangeText ("e-mail", val) /> this.onChangeText (numere de telefon, val) /> this.onChangeText ('authCode', val) />
În cele din urmă, ne vom actualiza stiluri declarație, astfel încât să avem un UI mai bun:
const stiles = StyleSheet.create (container: flex: 1, justifyContent: 'center',, introducere: height: 50, borderBottomWidth: 2, borderBottomColor: '# 9E9E9E', margine: 10);
Pentru a vedea versiunea finală a acestui fișier, faceți clic pe aici.
Acum, ar trebui să ne putem înscrie, să primim un cod de confirmare trimis la numărul nostru de telefon și să confirmăm introducând codul de confirmare.
Dacă doriți să vedeți detaliile acestui utilizator nou creat, reveniți la Consola AWS, faceți clic pe Cognito, alegeți numele proiectului de proiect AWSMobile pe care l-ați creat și faceți clic pe Utilizatori și grupuri în Setari generale meniul din stânga.
Puteți continua acest lucru prin implementarea conectării și confirmarea conectării. Să aruncăm o privire la metodele pentru conectare și confirmSignIn:
(user.info (numele userului, this.state.password) .then (user => this.setState (user console.log .catch (err => console.log ('eroare de conectare la utilizator:', err)) confirmSignIn () Auth.confirmSignIn (this.state.user, this.state.authCode) .then (() => .log ("confirmați semnarea utilizatorului în succes!")) .catch (err => console.log ("eroare confirmând conectarea la utilizator:", err))Odată ce utilizatorul este conectat, putem folosi ulterior Auth pentru a accesa informațiile despre utilizator!
Putem suna Auth.currentUserInfo () pentru a obține informațiile despre profilul utilizatorului (nume de utilizator, e-mail etc.) sau Auth.currentAuthenticatedUser () pentru a obține utilizatorul idToken, JWT, și multe alte informații utile despre sesiunea curentă de conectare a utilizatorului.
AWS Amplify utilizează funcția Amazon Pinpoint pentru a gestiona valorile. Când creați un nou proiect Mobile Hub utilizând fie CLI-ul, fie Mobile Hub-ul, veți avea în mod automat funcția Amazon Pinpoint activată, configurată și gata de plecare.
Dacă nu sunteți deja familiar, Amazon Pinpoint este un serviciu care nu numai permite dezvoltatorilor să adauge aplicația Google Analytics la aplicațiile lor mobile, ci și le permite să trimită utilizatorilor notificări push, mesaje SMS și e-mailuri.
Cu AWS Amplify, putem trimite informații despre sesiunea de utilizator ca valori pentru Amazon Pinpoint cu câteva rânduri de cod.
Să deschidem tabloul de bord Amazon Pinpoint pentru a putea vedea evenimentele pe care urmează să le creăm. Dacă deschideți proiectul dvs. Mobile Hub în consola AWS, alegeți Google Analytics în colțul din dreapta sus sau mergeți direct în Amazon Pinpoint din consola și deschideți proiectul curent.
În bara de navigare albastru închis în partea stângă, există patru opțiuni: Google Analytics, segmente, campanii, și Direct. Alege Google Analytics.
Odată ce începem să creăm evenimente de trimitere, vom putea să le vedem în această vizualizare a consolei.
Acum suntem gata să începem urmărirea! În App.js, eliminați tot codul din ultimul exemplu, lăsând-ne practic doar o metodă de redare care conține un container Vizualizare cu un text de salut, fără stare, fără metode de clasă și numai un stil de container.
De asemenea, importăm Google Analytics din AWS-amplifica:
import React, Component de la "reacție"; importați StilSheet, Text, Buton, Vizualizare de la "reactiv-nativ"; import Amplify, Analytics din 'aws-amplify' import config din './aws-exports' Amplify.configure (config) clasa implicită pentru export App extinde Component render () return (); const stiles = StyleSheet.create (container: flex: 1, justifyContent: 'center', alignItems: 'center'); Google Analytics
O valoare obișnuită pe care doriți să o urmăriți este numărul de apariții de către utilizator a aplicației. Să începem prin crearea unui eveniment care să urmărească acest lucru.
În React Nativ, avem AppState API, care ne va da starea actuală a aplicației activ, fundal, sau inactiv. Dacă statul este activ, înseamnă că utilizatorul a deschis aplicația. Dacă statul este fundal, înseamnă că aplicația rulează în fundal, iar utilizatorul este fie pe ecranul de întâmpinare, fie în altă aplicație, în timp ce inactiv înseamnă că utilizatorul trece de la un punct activ la altul, de multitasking sau se află într-un apel telefonic.
Când aplicația devine activă, trimiteți un eveniment analiticii noastre care spune că aplicația a fost deschisă.
Pentru a face acest lucru, vom apela următorul eveniment:
Analytics.record ('Aplicația a fost deschisă!') Puteți vizualiza API pentru această metodă în documentele oficiale. record metoda are trei argumente: nume (șir), atribute (obiect, opțional) și valori (obiect, opțional):
înregistrare (nume: șir, atribute ?: EventAttributes, metrics ?: EventMetrics): Promise
Să actualizăm clasa pentru a adăuga un ascultător de evenimente atunci când componenta este montată și să o elimină când componenta este distrusă. Acest ascultător va apela _handleAppStateChange ori de câte ori se modifică starea aplicației:
componentDidMount () AppState.addEventListener ('schimbare', this._handleAppStateChange); componentWillUnmount () AppState.removeEventListener ('schimbare', this._handleAppStateChange); Acum, să creăm _handleAppStateChange metodă:
_handleAppStateChange (appState) if (appState === 'activ') Analytics.record ('Aplicația a fost deschisă!')Acum, putem muta aplicația în fundal, deschizând-o înapoi, iar acest lucru ar trebui să trimită un eveniment în tabloul de bord Google Analytics. Notă: Pentru a funda aplicația pe un simulator iOS sau emulator Android, apăsați Command-Shift-H.
Pentru a vedea aceste date în tabloul de bord, faceți clic pe Evenimente, și alegeți App deschis! din meniul derulant Evenimente:
Veți observa, de asemenea, că aveți alte date disponibile în mod automat de la Mobile Hub, inclusiv date de sesiune, utilizatorul se înscrie,și conectați utilizatorul. Am crezut că era destul de misto ca toate aceste informații să fie înregistrate automat.
Acum hai să mergem la următorul nivel. Dacă am vrea să urmărim nu numai un utilizator care deschide aplicația, dar care a deschis aplicația și de câte ori a deschis aplicația?
Putem face acest lucru prin adăugarea unui atribut la a doua măsură!
Să acționăm ca și cum am avea un utilizator conectat și să urmărim un nou eveniment pe care îl vom apela "Detaliile utilizatorului: aplicația a fost deschisă".
Pentru aceasta, actualizați evenimentul înregistrării la următoarele:
Analytics.record ("Detaliile utilizatorului - aplicația a fost deschisă!", Username: 'NaderDabit')
Apoi, închideți și deschideți aplicația de câteva ori. Acum ar trebui să vedem mai multe detalii despre eveniment în tabloul de bord.
Pentru a face acest lucru, priviți spre dreapta Eveniment scapă jos; este o atribute secțiune. Aici, putem examina atributele pentru eveniment. În cazul nostru, avem numele de utilizator, astfel încât să putem filtra acum acest eveniment după numele de utilizator!
Elementul final pe care îl vom urmări este valorile de utilizare. Acesta este al treilea argument pentru record.
Să adăugăm o valoare care înregistrează timpul acumulat de utilizatorul în aplicație. Putem face acest lucru destul de ușor prin stabilirea unei valori de timp în clasă, sporindu-l în fiecare secundă și apoi prin trimiterea acestor informații către Amazon Pinpoint când utilizatorul deschide aplicația:
// sub timpul de definire a clasei = 0 componentDidMount () this.startTimer () AppState.addEventListener ('schimbare', this._handleAppStateChange); componentWillUnmount () AppState.removeEventListener ('schimbare', this._handleAppStateChange); _handleAppStateChange (appState) if (appState ==='activ ') Analytics.record (' Detaliile utilizatorului - Aplicația deschisă ', username:' NaderDabit ' ) setInterval (() => this.time + = 1, 1000) // metoda de renderAici, am creat o valoare timp și puneți-o la dispoziție 0. Am adăugat și noi startTimer metoda care va adăuga 1 la valoarea de timp în fiecare secundă. În componentDidMount, noi sunam startTimer care va crește valoarea timpului cu 1 în fiecare secundă.
Acum putem adăuga un al treilea argument Analytics.record () care va înregistra această valoare ca o valoare!
Să ne uităm la modul în care putem folosi Amplify Amazon S3 pentru a adăuga spațiu de stocare aplicației noastre.
Pentru a adăuga S3 la proiectul dvs. Mobile Hub, executați următoarele comenzi:
fișierele de utilizator awsmobile permit apăsarea awsmobile
AWS Amplify are a Depozitare API pe care le putem importa la fel ca și celelalte API-uri:
import Storage de la 'aws-amplify'
Apoi putem apela metode Depozitare ca obține, a pune, listă, și elimina pentru a interacționa cu obiectele din cupă.
Când este creată o găleată S3, vom avea în mod automat o imagine implicită în coșul nostru din dosarul public; al meu este numit exemplu-image.png. Să vedem dacă putem folosi AWS Amplifica pentru a citi și vizualiza această imagine din S3.
După cum am menționat mai sus, Depozitare are o obține metodă pe care o vom apela pentru a prelua elemente, iar metoda de preluare a acestei imagini ar arăta cam așa:
Storage.get ( 'exemplu-image.png')
Pentru a demonstra această funcționalitate în aplicația noastră React Native, să creăm câteva funcții care să preia această imagine din S3 și să o arate utilizatorului.
Va trebui să importăm Imaginede la React Native, precum și Depozitare din AWS-amplifica.
import React, Component din importul "React" // Importurile precedente Image de la "react-native"; import Amplificați, Storage de la 'aws-amplify' // restul codului
Acum, va trebui să avem o anumită stare pentru a ține această imagine, precum și o metodă pentru a prelua imaginea și a ține-o în stare. Să adăugăm următoarele în clasa noastră deasupra metodei de redare:
(url: fileUrl)
În cele din urmă, să adăugăm câteva elemente de interfață utilizator pentru a prelua imaginea și a le face UI:
render () return (); Depozitare this.state.url! == "&& ()
Acum, ar trebui să putem face clic pe buton și să vedem imaginea din S3!
Pentru a vedea versiunea finală a acestui fișier, faceți clic aici.
În ansamblu, AWS Amplify oferă o modalitate foarte ușoară de a realiza ceea ce era o funcționalitate complexă, fără cod de mult, integrându-se fără probleme cu multe servicii AWS.
Nu am acoperit notificările push, care au fost de asemenea adăugate recent la AWS Amplify, dar acestea vor fi acoperite într-un mesaj viitoare!
AWS Amplify este menținută în mod activ, deci dacă aveți orice solicitări sau idei de caracteristică, nu ezitați să comentați, să trimiteți o problemă sau să trageți o solicitare sau pur și simplu vizionați sau vizionați proiectul dacă doriți să fiți la curent cu funcțiile viitoare!
Între timp, verificați câteva dintre celelalte postări despre codificarea aplicațiilor React Native.
