Share
Cosa starai creandoAWS Amplify è una libreria open source che consente agli sviluppatori e, nel nostro caso, agli sviluppatori di dispositivi mobili, di aggiungere una miriade di funzionalità preziose per applicazioni quali analisi, notifiche push, archiviazione e autenticazione.
Amplify funziona non solo con React Native, ma anche con Vue, Angular, Ionic, React web e qualsiasi framework JavaScript. In questo tutorial, mostreremo alcune delle sue funzionalità principali all'interno di un'applicazione React Native.
La cosa grandiosa di questa libreria è che astrae ciò che prima era una complessa configurazione e configurazione per tutte queste funzionalità in un modulo facile da usare che possiamo aggiungere al nostro progetto usando NPM.
Tratteremo AWS Amplify in tre parti: autenticazione, archiviazione e analisi.
Se si desidera continuare, creare un nuovo progetto React Native utilizzando Expo (Create React Native App) o React Native CLI:
react-native init RNAmplify
o
create-react-native-app RNAmplify
Avanti, andiamo avanti e installiamo il AWS-amplificare libreria usando filato o npm:
il filo aggiunge aws-amplify
Se stai usando Expo, puoi saltare il passaggio successivo (collegamento) poiché Expo già distribuisce le dipendenze native per il supporto di Amazon Cognito.
Se non stai usando Expo, dobbiamo collegare il Cognito libreria (Amazon Cognito gestisce l'autenticazione) che è stata installata quando abbiamo aggiunto AWS-amplificare:
collegamento nativo-reattivo amazon-cognito-identity-js
Ora che il progetto React Native è stato creato e configurato, è necessario configurare i servizi Amazon con cui interagiremo.
All'interno della directory del nuovo progetto, creeremo un nuovo progetto Mobile Hub per questo tutorial. Per creare questo progetto, utilizzeremo la CLI AWSMobile, ma sentitevi liberi di utilizzare la console se siete utenti più esperti. Ho pubblicato un video di YouTube con una rapida panoramica della CLI di AWSMobile se vuoi saperne di più.
Ora creiamo un nuovo progetto Mobile Hub nella radice della nostra nuova directory di progetto:
awsmobile init
Dopo che hai creato il tuo progetto e hai il tuo aws-exports file (questo viene creato automaticamente per te correndo awsmobile init), abbiamo bisogno di configurare il nostro progetto React Native con il nostro progetto AWS usando AWS Amplify.
Per farlo, entreremo in App.js sotto le ultime importazioni e aggiungere le seguenti tre righe di codice:
importare Amplify, Auth dalla configurazione di importazione di 'aws-amplify' da './aws-exports' Amplify.configure (config)
L'autenticazione con Amplify viene eseguita utilizzando il servizio Amazon Cognito. Useremo questo servizio per consentire agli utenti di accedere e iscriversi alla nostra applicazione!
Aggiungiamo l'accesso utente e Amazon Cognito al nostro progetto Mobile Hub. Nella directory root, esegui i seguenti comandi:
awsmobile user-signin abilita push awsmobile
Ora avremo un nuovo pool di utenti Amazon Cognito configurato e pronto per l'uso. (Se desideri visualizzare i dettagli di questo nuovo servizio, accedi alla Console AWS, fai clic su Cognito e scegli il nome del nome del progetto AWSMobile che hai creato.)
Quindi, integriamo l'autenticazione con Amazon Cognito e AWS Amplify.
Cominciamo dando un'occhiata alla classe principale che userete per avere pieno accesso ai servizi di Amazon Cognito, il auth classe.
Il auth class ha molti metodi che ti permetteranno di fare qualsiasi cosa, dalla registrazione e dall'accesso degli utenti alla modifica della loro password e di tutto il resto.
È anche semplice lavorare con l'autenticazione a due fattori con AWS Amplify usando il auth classe, come vedremo nel seguente esempio.
Diamo un'occhiata a come potresti fare per iscriverti e accedere a un utente utilizzando Amazon Cognito e auth classe.
Possiamo realizzare un solido flusso di registrazione e accesso con un lavoro relativamente ridotto! Useremo il Iscriviti, confirmSignUp, registrati, e confirmSignInmetodi del auth classe.
Nel App.js, creiamo alcuni metodi che gestiranno la registrazione dell'utente con l'autenticazione a due fattori e alcuni stati per contenere l'input dell'utente:
Accentsconagua
state = username: ", email:", phone_number: ", password:", authCode: ", utente: onChangeText = (chiave, valore) => this.setState ([chiave]: valore) signUp () const nome utente, password, email, numero_telefono = this.state Auth.signUp (nome utente, password, attributi: numero_telefono, email) .then (() => console.log ('utente iscriviti con successo !! ')) .catch (err => console.log (' errore registrazione utente: ', err)) confirmSignUp () Auth.confirmSignUp (this.state.username, this.state.authCode) .then (() => console.log ('conferma utente registrazione successo !!')) .catch (err => console.log ('errore di conferma registrazione utente:', err))Iscriviti crea la richiesta di iscrizione iniziale, che invierà un SMS al nuovo utente per confermarne il numero. confirmSignUp prende il codice SMS e il nome utente e conferma il nuovo utente in Amazon Cognito.
Creeremo anche un'interfaccia per l'input del modulo e un pulsante e collegheremo i metodi di classe a questi elementi dell'interfaccia utente. Aggiorna il rendere metodo al seguente:
render () return (); this.onChangeText ('username', val) /> this.onChangeText ('password', val) /> this.onChangeText ('email', val) /> this.onChangeText ('phone_number', val) /> this.onChangeText ('authCode', val) />
Infine, aggiorneremo il nostro stili dichiarazione in modo da avere un'interfaccia utente migliore:
const styles = StyleSheet.create (container: flex: 1, justifyContent: 'center',, input: height: 50, borderBottomWidth: 2, borderBottomColor: '# 9E9E9E', margin: 10);
Per visualizzare la versione finale di questo file, fare clic su Qui.
Ora dovremmo essere in grado di registrarsi, ricevere un codice di conferma inviato al nostro numero di telefono e confermare digitando il codice di conferma.
Se desideri visualizzare i dettagli di questo utente appena creato, torna alla Console AWS, fai clic su Cognito, scegli il nome del progetto AWSMobile che hai creato e fai clic su Utenti e gruppi nel Impostazioni generali menu a sinistra.
Puoi procedere ulteriormente implementando l'accesso e confermando l'accesso. Diamo un'occhiata ai metodi per registrati e confirmSignIn:
signIn () Auth.signIn (this.state.username, this.state.password) .then (user => this.setState (user) console.log ('accesso utente in corso !!')) .catch (err => console.log ('errore nell'accesso dell'utente:', err)) confirmSignIn () Auth.confirmSignIn (this.state.user, this.state.authCode) .then (() => console .log ('conferma l'accesso dell'utente con successo !!')) .catch (err => console.log ('errore che conferma l'accesso dell'utente:', err))Una volta che l'utente ha effettuato l'accesso, possiamo quindi usarlo auth per accedere alle informazioni dell'utente!
Possiamo chiamare Auth.currentUserInfo () per ottenere le informazioni del profilo dell'utente (nome utente, email, ecc.) o Auth.currentAuthenticatedUser () per ottenere l'utente IDToken, JWT, e molte altre informazioni utili sulla sessione di accesso corrente dell'utente.
AWS Amplify utilizza Amazon Pinpoint per gestire le metriche. Quando crei un nuovo progetto Mobile Hub utilizzando la CLI o il Mobile Hub, hai automaticamente Amazon Pinpoint abilitato, configurato e pronto all'uso.
Se non sei già familiare, Amazon Pinpoint è un servizio che non solo consente agli sviluppatori di aggiungere Analytics alle loro applicazioni mobili, ma consente anche loro di inviare notifiche push, messaggi SMS ed e-mail ai propri utenti.
Con AWS Amplify, possiamo inviare le informazioni sulla sessione utente come metriche ad Amazon Pinpoint con poche righe di codice.
Apriamo la dashboard di Amazon Pinpoint in modo che possiamo visualizzare gli eventi che stiamo per creare. Se apri il tuo progetto Mobile Hub nella console AWS, scegli analitica nell'angolo in alto a destra, o vai direttamente dentro Pinpoint di Amazon dalla console e aprire il progetto corrente.
Nella barra di navigazione blu scuro a sinistra, ci sono quattro opzioni: analitica, segmenti, campagne, e Diretto. Scegliere analitica.
Una volta iniziato a creare eventi di invio, saremo in grado di vederli in questa vista della console.
Ora siamo pronti per iniziare il monitoraggio! Nel App.js, rimuovi tutto il codice dall'ultimo esempio, lasciandoci fondamentalmente solo un metodo di rendering contenente un contenitore Visualizza con un saluto di testo, nessuno stato, nessun metodo di classe e solo uno stile contenitore.
Importiamo anche analitica a partire dal AWS-amplificare:
import React, Component da 'react'; import StyleSheet, Text, Button, View da 'react-native'; import Amplify, Analytics dalla configurazione di importazione di 'aws-amplify' da './aws-exports' Amplify.configure (config) esportazione classe di default App extends Component render () return (); const styles = StyleSheet.create (container: flex: 1, justifyContent: 'center', alignItems: 'center'); analitica
Una metrica comune che potresti voler tracciare è il numero di volte in cui l'utente apre l'app. Iniziamo creando un evento che seguirà questo.
In React Native, abbiamo il AppState API, che ci fornirà lo stato corrente dell'app attivo, sfondo, o non attivo. Se lo stato è attivo, significa che l'utente ha aperto l'app. Se lo stato è sfondo, significa che l'app è in esecuzione in background e l'utente è sulla schermata principale o in un'altra app, mentre non attivo significa che l'utente sta passando tra attivo e in primo piano, multitasking o è in una telefonata.
Quando l'app diventa attiva, inviamo un evento alla nostra analisi che dice che l'app è stata aperta.
Per farlo, chiameremo il seguente evento:
Analytics.record ('App aperta!') Puoi visualizzare l'API per questo metodo nei documenti ufficiali. Il disco il metodo accetta tre argomenti: nome (stringa), attributi (oggetto, facoltativo) e metriche (oggetto, facoltativo):
record (nome: stringa, attributi ?: EventAttributes, metriche ?: EventMetrics): Promise
Aggiorniamo la classe per aggiungere un listener di eventi quando il componente è montato e rimuoverlo quando il componente viene distrutto. Questo ascoltatore chiamerà _handleAppStateChange ogni volta che lo stato dell'app cambia:
componentDidMount () AppState.addEventListener ('change', this._handleAppStateChange); componentWillUnmount () AppState.removeEventListener ('change', this._handleAppStateChange); Ora, creiamo il _handleAppStateChange metodo:
_handleAppStateChange (appState) if (appState === 'active') Analytics.record ('App aperta!')Ora possiamo spostare l'app in background, aprirla di nuovo e questo dovrebbe inviare un evento alla nostra dashboard di Analytics. Nota: per eseguire lo sfondo dell'applicazione su un simulatore iOS o emulatore Android, premere Comando-Maiuscole-H.
Per vedere questi dati nella dashboard, fare clic su eventi, e scegliere App aperta! dal menu a discesa Eventi:
Probabilmente noterai anche che hai altri dati disponibili automaticamente da Mobile Hub, inclusi dati di sessione, registrazione dell'utente,e accesso dell'utente. Ho pensato che fosse bello che tutte queste informazioni venissero registrate automaticamente.
Ora portiamo questo al livello successivo. Che cosa succede se volessimo monitorare non solo un utente che apre l'app, ma quale utente ha aperto l'app e quante volte ha aperto l'app?
Possiamo farlo facilmente aggiungendo un attributo alla seconda metrica!
Agiamo come se avessimo un utente registrato e tracciamo un nuovo evento che chiameremo "Dettaglio utente: App aperta".
Per fare ciò, aggiorna l'evento del record al seguente:
Analytics.record ('Dettaglio utente - App aperta!', Username: 'NaderDabit')
Quindi, chiudi e apri l'app un paio di volte. Ora dovremmo essere in grado di vedere più dettagli sull'evento nella nostra dashboard.
Per farlo, guarda a destra di Evento cadere in picchiata; C'è un attributi sezione. Qui, possiamo approfondire gli attributi per l'evento. Nel nostro caso, abbiamo il nome utente, quindi ora possiamo filtrare questo evento per nome utente!
L'ultimo elemento che seguiremo è la metrica di utilizzo. Questo è il terzo argomento a disco.
Aggiungiamo una metrica che registra il tempo accumulato che l'utente è stato nell'app. Possiamo farlo abbastanza facilmente impostando un valore temporale nella classe, incrementandolo ogni secondo e inviando queste informazioni a Amazon Pinpoint quando l'utente apre l'app:
// below class definition time = 0 componentDidMount () this.startTimer () AppState.addEventListener ('change', this._handleAppStateChange); componentWillUnmount () AppState.removeEventListener ('change', this._handleAppStateChange); _handleAppStateChange (appState) if (appState === 'active') Analytics.record ('Dettaglio utente - App aperta!', username: 'NaderDabit', timeInApp: this.time) startTimer ( ) setInterval (() => this.time + = 1, 1000) // metodo di renderingQui, abbiamo creato un valore di tempo e impostarlo 0. Abbiamo anche aggiunto un nuovo startTimer metodo che aggiungerà 1 al valore temporale ogni secondo. Nel componentDidMount, Noi chiamiamo startTimer che incrementerà il valore temporale di 1 ogni secondo.
Ora possiamo aggiungere un terzo argomento a Analytics.record () questo registrerà questo valore come una metrica!
Diamo un'occhiata a come possiamo usare Amplify con Amazon S3 per aggiungere spazio di archiviazione alla nostra app.
Per aggiungere S3 al tuo progetto Mobile Hub, esegui i seguenti comandi:
i file utente di awsmobile attivano push awsmobile
AWS Amplify ha un Conservazione API che possiamo importare come abbiamo con le altre API:
importa Memoria da 'aws-amplify'
Possiamo quindi chiamare i metodi Conservazione piace ottenere, mettere, elenco, e rimuovere per interagire con gli oggetti nel nostro secchio.
Quando viene creato un bucket S3, automaticamente avremo un'immagine predefinita nel nostro bucket nella cartella pubblica; il mio è chiamato esempio-image.png. Vediamo se possiamo usare AWS Amplificare leggere e visualizzare questa immagine da S3.
Come ho detto sopra, Conservazione ha un ottenere metodo che chiameremo per recuperare gli oggetti, e il metodo per recuperare questa immagine sarebbe simile a questo:
Storage.get ( 'esempio-image.png')
Per dimostrare questa funzionalità nella nostra app React Native, creiamo alcune funzionalità che recupera questa immagine da S3 e la mostra al nostro utente.
Dovremo importare Immagineda React Native, così come Conservazione a partire dal AWS-amplificare.
import React, Component dall'importazione 'React' // previous imports Image da 'react-native'; importare Amplify, Storage da 'aws-amplify' // resto del codice
Ora, avremo bisogno di avere qualche stato per mantenere questa immagine, così come un metodo per recuperare l'immagine e tenerla nello stato. Aggiungiamo quanto segue alla nostra classe sopra il metodo di rendering:
state = url: " async getFile () let name = 'example-image.png'; let fileUrl = attendi Storage.get (name); this.setState (url: fileUrl)
Infine, aggiungiamo alcuni elementi dell'interfaccia utente per recuperare l'immagine e renderla nell'interfaccia utente:
render () return (); Conservazione this.state.url! == "&& ()
Ora dovremmo essere in grado di fare clic sul pulsante e visualizzare l'immagine da S3!
Per vedere la versione finale di questo file, clicca qui.
Nel complesso, AWS Amplify offre un modo davvero semplice per realizzare ciò che prima era una funzionalità complessa con poco codice, integrandosi perfettamente con molti servizi AWS.
Non abbiamo coperto le notifiche push, che sono state aggiunte di recente ad AWS Amplify, ma saranno trattate in un prossimo post!
AWS Amplify viene mantenuto attivamente, quindi se hai richieste o idee relative alle funzionalità, non esitare a commentare, inviare un problema o richiedere una richiesta, o semplicemente partecipare a un progetto o guardare il progetto se desideri essere aggiornato con le funzionalità future!
E nel frattempo, controlla alcuni dei nostri altri post sulla codifica delle app React Native.
