Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Mobile Development
Code

Sovralimentazione tuo reagire amplificare App nativa con AWS

by
Difficulty:IntermediateLength:LongLanguages:

Italian (Italiano) translation by Mirko Pizii (you can also view the original English article)

Final product image
What You'll Be Creating

Amplificare la guerra è una libreria open source che consente agli sviluppatori e nel nostro casi sviluppatori mobili, per aggiungere una serie di preziose funzionalità alle applicazioni tra cui analitica, Spinta le notifiche, archiviazione e autenticazione.

Amplificare le opere non solo con nativo di reagire, ma anche con Vue, angolare, ionico, React web e davvero qualsiasi framework JavaScript. In questo tutorial, ci mostrerà alcune delle sue funzionalità di base all'interno di un'applicazione nativa di reagire.

La cosa grandiosa di questa libreria è che esso estrae quello che usato per essere complessa installazione e configurazione per tutte queste caratteristiche in un modulo di facile da usare che possiamo aggiungere al nostro progetto utilizzando NPM.

Ci occuperemo di AWS amplificare in tre parti: l'autenticazione, l'archiviazione e analitica.

Installazione nativa reagire & Setup

Se si desidera seguire, creare un nuovo progetto di reagire nativo utilizzando Expo (creare App nativa reagire) o reagire nativo CLI:

o

Avanti, andiamo avanti e installare aws-amplificare libreria utilizzando filati o npm:

Se si utilizza Expo, si può ignorare il passaggio successivo (collegamento) come Expo navi già le dipendenze native per Amazon Cognito supporto.

Se non si utilizza Expo, abbiamo bisogno di collegare la libreria Cognito (Amazon Cognito gestisce l'autenticazione) che è stata installata quando abbiamo aggiunto aws-amplificare:

Installazione di AWS

Ora che il progetto originario di reagire è creato e configurato, abbiamo bisogno di impostare i servizi di Amazon che abbiamo interagiranno con.

All'interno della directory del nuovo progetto, ci sarà la creazione di un nuovo progetto di Mobile Hub per questo tutorial. Per creare questo progetto, si utilizzerà AWSMobile CLI, ma sentitevi liberi di usare la console, se sei un utente più avanzato. Ho postato un video di YouTube con una rapida panoramica di CLI AWSMobile se volete saperne di più.

Ora creiamo un nuovo progetto di Mobile Hub nella root della nostra nuova directory di progetto:

Dopo che hai creato il tuo progetto e avere il tuo file aws-esportazioni (questo viene creato automaticamente per te eseguendo awsmobile init), abbiamo bisogno di configurare il nostro progetto nativo di reagire con il nostro progetto AWS utilizzando AWS amplificare.

Per farlo, vi andiamo in App.js sotto le importazioni Ultima e aggiungere le seguenti tre righe di codice:

Autenticazione

Autenticazione con Amplify viene eseguita utilizzando il servizio di Amazon Cognito. Useremo questo servizio per consentire agli utenti di accedere e di iscriversi alla nostra applicazione!

L'aggiunta di autenticazione tramite la CLI di AWSMobile

Aggiungiamo utente signin e Amazon Cognito al nostro progetto di Mobile Hub. Nella directory principale, eseguire i seguenti comandi:

Ora, avremo un nuovo pool di Amazon Cognito utente configurato ed è pronto ad andare. (Se si desidera visualizzare i dettagli di questo nuovo servizio, andare alla Console AWS, fare clic su Cognito e scegliere il nome del nome del progetto AWSMobile che è stato creato).

Successivamente, integriamo l'autenticazione con Amazon Cognito e amplificare la guerra.

Auth classe

Cominciamo dando un'occhiata alla classe principale che si utilizzerà per avere accesso completo ai servizi Amazon Cognito, la classe di Auth.

La classe Auth dispone di molti metodi che verranno permetterà di fare tutto da l'iscrizione e l'accesso agli utenti di cambiare la propria password e tutto il resto.

È anche semplice lavorare con autenticazione a due fattori con AWS amplificare utilizzando la classe Auth, come vedremo nell'esempio seguente.

Esempio

Diamo un'occhiata a come si potrebbe andare a firma e firma di un utente utilizzando Amazon Cognito e la classe di Auth.

Possiamo realizzare un flusso di iscrizione e segno-in solido con relativamente poco lavoro! Useremo il signUp, confirmSignUp, signIn e confirmSignIn metodi della classe Auth.

In App.js, creiamo un paio di metodi che gestirà utente sign-up con autenticazione a due fattori, nonché alcuni stato di tenere l'input dell'utente:

signUp crea la richiesta di iscrizione iniziale, che invierà un SMS al nuovo utente di confermare il loro numero. confirmSignUp prende il nome utente e il codice SMS e conferma il nuovo utente in Amazon Cognito.

Inoltre creare un'interfaccia utente per l'input del form e un pulsante e i metodi della classe del legare a questi elementi dell'interfaccia utente. Aggiornare il metodo render al seguente:

Infine, aggiorneremo la nostra dichiarazione di stili che abbiamo un'interfaccia utente più bella:

Basic Sign In Form

Per visualizzare la versione finale di questo file, fare clic qui.

Ora, noi dovremmo essere in grado di iscriversi, ottenere un codice di conferma inviato al nostro numero di telefono e confermare digitando il codice di conferma.

Se si desidera visualizzare i dettagli di questo nuovo utente, vai al Console di AWS, fare clic su Cognito, scegliere il nome del nome del progetto di AWSMobile creato e fare clic su utenti e gruppi nel menu impostazioni generali sulla sinistra.

Potete prendere questo ulteriore implementazione di sign-in e confermare il segno-in. Diamo un'occhiata ai metodi per signIn e confirmSignIn:

L'accesso ai dati e la sessione dell'utente

Una volta che l'utente ha effettuato l'accesso, possiamo quindi utilizzare Auth per accedere alle informazioni utente!

Possiamo chiamare Auth.currentUserInfo() per ottenere informazioni di profilo dell'utente (username, email, ecc.) o Auth.currentAuthenticatedUser() per ottenere idToken dell'utente, JWT e un sacco di altre informazioni utili circa la corrente dell'utente loggato sessione.

Analitica

Amplificare la guerra utilizza Amazon Pinpoint per gestire metriche. Quando si crea un nuovo progetto di Mobile Hub utilizzando la CLI o Mobile Hub, automaticamente sia Amazon Pinpoint abilitati, configurati e pronto ad per andare.

Se non siete già familiarità, Amazon Pinpoint è un servizio che non solo consente agli sviluppatori di aggiungere Analitica alle loro applicazioni mobile, ma anche permette loro di inviare notifiche push, messaggi SMS ed e-mail ai propri utenti.

Con AWS amplificare, possiamo inviare informazioni di sessione utente come metrica di Amazon Pinpoint con poche righe di codice.

Apriamo Amazon Pinpoint dashboard, quindi possiamo visualizzare gli eventi che stiamo per creare. Se si apre il progetto Mobile Hub nella console AWS, scegliere Analitica in alto a destra, o andare direttamente in Amazon Pinpoint dalla console e aprire il progetto corrente.

Nella barra di navigazione blu scuro sulla sinistra, ci sono quattro opzioni: Analitica, segmenti, campagne e diretta. Scegliere Analitica.

Pinpoint Console

Una volta che iniziamo creando eventi invio, saremo in grado di vederli in questa visualizzazione della console.

Ora siamo pronti per iniziare a monitorare! In App.js, rimuovere tutto il codice dall'ultimo esempio, lasciandoci con fondamentalmente solo un metodo di rendering contenente un contenitore vista con un saluto di testo, nessuno stato, nessun metodi di classe e solo uno stile di contenitore.

Importiamo anche Analitica da aws-amplificare:

Eventi di base di rilevamento

Una metrica comune che si desideri tenere traccia è il numero di volte che l'utente apre l'app. Si inizia creando un evento che terrà traccia di questo.

Nel reagire nativo, abbiamo l'API AppState, che ci darà lo stato corrente di app di attivo, sfondo, o inattivo. 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 iniziale o in un'altra app, mentre inattivo significa l'utente transizione tra attivo e primo piano, multitasking, o è una chiamata telefonica.

Quando l'app diventa attiva, mandiamo un evento al nostro analitica che dice l'app è stata aperta.

Per farlo, chiediamo il seguente evento:

È possibile visualizzare l'API per questo metodo nella documentazione ufficiale. Il metodo di registrazione accetta tre argomenti: nome (stringa), attributi (oggetto, opzionale) e metriche (oggetto, opzionale):

Let's aggiornare la classe per aggiungere un listener di eventi quando il componente è montato e rimuoverlo quando il componente viene eliminato. Questo listener chiamerà _handleAppStateChange ogni volta che cambia lo stato dell'app:

Ora, andiamo a creare il metodo di _handleAppStateChange:

Ora, possiamo passare l'app in background, aperto il backup, e questo dovrebbe inviare un evento al nostro dashboard Analitica. Nota: Per l'app su un simulatore di iOS o Android emulatore di base, premere comando-maiuscole-H.

Per visualizzare questi dati nel dashboard, clicca su eventi e scegli che app aperto! dal menu a discesa eventi:

Filtering and viewing Analytics events

Inoltre probabilmente noterete che ci sono dati disponibili a voi automaticamente da Mobile Hub, compresi i dati della sessione utente di registrarsi e utente accedere. Ho pensato che era piuttosto fresco che tutte queste informazioni vengono registrate automaticamente.

Monitoraggio dettagliato eventi

Ora prendiamo questo al livello successivo. Cosa succede se abbiamo voluto tenere traccia non solo un utente aprendo l'app, ma quale utente ha aperto l'app e quante volte hanno aperto l'app?

Possiamo farlo facilmente aggiungendo un attributo alla seconda metrica!

Comportiamoci come se abbiamo un utente iscritto e traccia un nuovo evento che chiameremo "dettagli utente: App aperto".

Per effettuare questa operazione, è necessario aggiornare l'evento record al seguente:

Analytics.record ('Dettaglio di utente - App aperto!', {username: 'NaderDabit'})

Quindi, chiudere e aprire l'app un paio di volte. Ora dovremmo riuscire a vedere più in dettaglio sull'evento nella nostra bacheca.

Per farlo, guardate a destra del menu a discesa eventi; C'è una sezione di attributi. Qui, noi possiamo drill-down negli attributi per l'evento. Nel nostro caso, abbiamo il nome utente, quindi siamo in grado di filtrare ora questo evento dal nome utente!

Adding attributes and filtering by attributes

Metriche di utilizzo

L'elemento finale che seguiremo è il metriche di utilizzo. Questo è il terzo argomento per registrare.

Aggiungiamo a una metrica che registra il tempo accresciuto che l'utente è stato nell'app. Possiamo fare questo abbastanza facilmente impostando un valore di ora nella classe, incrementandola ogni secondo, e quindi l'invio di queste informazioni insieme a Amazon Pinpoint quando l'utente apre l'app:

Qui, abbiamo creato un valore di tempo e impostarlo su 0. Abbiamo anche aggiunto un nuovo metodo startTimer che aggiunge 1 al valore di tempo ogni secondo. In componentDidMount, chiamiamo startTimer che incrementerà il valore di tempo di 1 ogni secondo.

Ora possiamo aggiungere un terzo argomento per Analytics.record() che registra questo valore come una metrica!

Deposito

Diamo un'occhiata a come abbiamo possiamo utilizzare amplifica con Amazon S3 per aggiungere spazio di archiviazione per la nostra applicazione.

Per aggiungere S3 al progetto Mobile Hub, eseguire i seguenti comandi:

Esempio di utilizzo

Amplificare la guerra ha un API di archiviazione che possiamo importare proprio come abbiamo fatto con le altre API:

import { Storage } from 'aws-amplify'

Possiamo quindi chiamare metodi su Storage come get, put, list e remove per interagire con gli elementi in nostro secchio.

Quando viene creato un secchio di S3, avremo automaticamente un'immagine predefinita nel nostro secchio nella cartella pubblica; mia si chiama esempio-image.png. Vediamo se possiamo usare AWS amplificare per leggere e visualizzare questa immagine da S3.

View of S3 bucket public folder

Come accennato in precedenza, Storage ha un metodo get che chiameremo per recuperare gli elementi, e il metodo per recuperare questa immagine sarebbe qualcosa come questo:

Per illustrare questa funzionalità nella nostra app Native reagire, creiamo alcune funzionalità che l'immagine viene recuperata da S3 e Mostra a nostro utente.

Avremo bisogno di importare Image da reagire nativo, così come Storage da aws-amplify.

Ora, dobbiamo avere qualche stato di tenere questa immagine, come pure un metodo per recuperare l'immagine e tenerlo nello stato. Cerchiamo di aggiungere quanto segue alla nostra classe sopra il metodo render:

Infine, aggiungiamo alcuni elementi dell'interfaccia utente per recuperare l'immagine e renderla all'interfaccia utente:

App screenshots showing the Get Image feature

Ora, dovremmo essere in grado di fare clic sul pulsante e visualizzare l'immagine da S3!

Per visualizzare la versione finale di questo file, fare clic qui.

Conclusione

Nel complesso, AWS amplificare fornisce un modo molto semplice per realizzare quello che usato per essere funzionalità complesse con non molto codice, l'integrazione senza soluzione di continuità con molti servizi di AWS.

Noi non coprono le notifiche push, che anche recentemente sono stati aggiunti per amplificare la guerra, ma questi saranno coperti in un prossimo post!

AWS amplificare attivamente viene conservata, così se avete richieste o idee, sentitevi liberi di commentare, inviare una richiesta o pull request, o solo stelle o guardare il progetto se volete essere tenuti aggiornati con caratteristiche future!

E nel frattempo, Scopri alcuni dei nostri altri post sulla codifica App Native di reagire.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.