Share
Wat je gaat creërenAWS Amplify is een open-sourcebibliotheek die ontwikkelaars, en in dit geval mobiele ontwikkelaars, in staat stelt om een groot aantal waardevolle functies toe te voegen aan toepassingen zoals analyses, pushmeldingen, opslag en authenticatie.
Amplify werkt niet alleen met React Native, maar ook met Vue, Angular, Ionic, React web en werkelijk elk JavaScript-framework. In deze zelfstudie demonstreren we een deel van de kernfunctionaliteit in een React Native-toepassing.
Het mooie van deze bibliotheek is dat het de voorheen complexe configuratie en configuratie voor al deze functies abstraheert in een eenvoudig te gebruiken module die we aan ons project kunnen toevoegen met behulp van NPM.
We behandelen AWS Amplify in drie delen: verificatie, opslag en analyse.
Als u wilt meevolgen, maakt u een nieuw React Native-project met behulp van Expo (Create React Native App) of de React Native CLI:
react-native init RNAmplify
of
create-react-native-app RNAmplify
Vervolgens gaan we door en installeren we het AWS-versterken bibliotheek met garen of npm:
garen voeg aws-amplify toe
Als je Expo gebruikt, kun je de volgende stap overslaan (koppelen) omdat Expo al de afhankelijkheidsafhankelijkheid voor Amazon Cognito-ondersteuning levert.
Als u Expo niet gebruikt, moeten we het koppelen Cognito bibliotheek (Amazon Cognito verwerkt authenticatie) die was geïnstalleerd toen we deze toevoegden AWS-versterken:
react-native link amazon-cognito-identity-js
Nu het React Native-project is gemaakt en geconfigureerd, moeten we de Amazon-services instellen waarmee we zullen werken.
In de directory van het nieuwe project zullen we een nieuw Mobile Hub-project voor deze tutorial maken. Om dit project te maken, gebruiken we de AWSMobile CLI, maar voel je vrij om de console te gebruiken als je een meer geavanceerde gebruiker bent. Ik heb een YouTube-video geplaatst met een snel overzicht van de AWSMobile CLI als je er meer over wilt weten.
Laten we nu een nieuw Mobile Hub-project maken in de hoofdmap van onze nieuwe projectdirectory:
awsmobile init
Nadat je je project hebt gemaakt en je hebt aws-exports bestand (dit wordt automatisch voor u gemaakt door te lopen awsmobile init), moeten we ons React Native-project configureren met ons AWS-project met behulp van AWS Amplify.
Om dit te doen, zullen we ingaan App.js onder de laatste import en voeg de volgende drie regels code toe:
import Amplify, Auth van 'aws-amplify' import config from './aws-exports' Amplify.configure (config)
Authenticatie met Amplify wordt gedaan met behulp van de Amazon Cognito-service. We gebruiken deze service om gebruikers in staat te stellen zich aan te melden en zich aan te melden bij onze applicatie!
Laten we gebruikersaanmelding en Amazon Cognito toevoegen aan ons Mobile Hub-project. Voer in de hoofdmap de volgende opdrachten uit:
awsmobile gebruikersaanmelding maakt awsmobile push mogelijk
Nu hebben we een nieuwe Amazon Cognito-gebruikerspool opgezet en klaar om te gebruiken. (Als u de details van deze nieuwe service wilt bekijken, gaat u naar de AWS-console, klikt u op Cognito en kiest u de naam van de AWSMobile-projectnaam die u hebt gemaakt.)
Laten we vervolgens Verificatie integreren met Amazon Cognito en AWS Amplify.
Laten we beginnen met een kijkje te nemen naar de hoofdklasse die u gaat gebruiken om volledige toegang te hebben tot de Amazon Cognito-services, de Auth klasse.
De Auth klasse heeft veel methoden waarmee u alles kunt doen, van aanmelden en inloggen bij gebruikers tot het wijzigen van hun wachtwoord en alles daartussenin.
Het is ook eenvoudig om te werken met tweefactorauthenticatie met AWS Amplify met behulp van de Auth klasse, zoals we in het volgende voorbeeld zullen zien.
Laten we eens kijken hoe u zich kunt aanmelden en inloggen bij een gebruiker die Amazon Cognito en het Auth klasse.
We kunnen een solide aanmeldings- en aanmeldingsstroom uitvoeren met relatief weinig werk! We zullen de gebruiken inschrijven, confirmSignUp, aanmelden, en confirmSignInmethoden van de Auth klasse.
In App.js, laten we een paar methoden maken waarmee gebruikers zich kunnen aanmelden met twee-factorenauthenticatie, evenals een aantal toestanden om de gebruikersinvoer vast te houden:
Accentsconagua
state = username: ", email:", phone_number: ", password:", authCode: ", user: onChangeText = (key, value) => this.setState ([key]: value) signUp () const username, password, email, phone_number = this.state Auth.signUp (username, password, attributes: phone_number, email) .then (() => console.log ('user aanmelden succes !! ')) .catch (err => console.log (' error signing up user: ', err)) confirmSignUp () Auth.confirmSignUp (this.state.username, this.state.authCode) .then (() => console.log ('bevestig gebruiker aanmelden succes !!')) .catch (err => console.log ('error confirming signing up user:', err))inschrijven maakt de eerste aanmeldingsaanvraag aan, die een sms naar de nieuwe gebruiker stuurt om hun nummer te bevestigen. confirmSignUp neemt de sms-code en de gebruikersnaam en bevestigt de nieuwe gebruiker in Amazon Cognito.
We zullen ook een UI voor de invoer van formulieren en een knop maken en de klassenmethoden aan deze UI-elementen koppelen. Werk het geven methode om het volgende:
render () retour (); this.onChangeText ('gebruikersnaam', val) /> this.onChangeText ('wachtwoord', val) /> this.onChangeText ('email', val) /> this.onChangeText ('phone_number', val) /> this.onChangeText ('authCode', val) />
Ten slotte zullen we onze updaten stijlen verklaring zodat we een mooiere gebruikersinterface hebben:
const styles = StyleSheet.create (container: flex: 1, justifyContent: 'center',, input: height: 50, borderBottomWidth: 2, borderBottomColor: '# 9E9E9E', margin: 10);
Klik op om de definitieve versie van dit bestand te bekijken hier.
Nu moeten we ons kunnen aanmelden, een bevestigingscode naar ons telefoonnummer kunnen sturen en bevestigen door de bevestigingscode in te typen.
Als u de details van deze nieuw gemaakte gebruiker wilt bekijken, gaat u terug naar de AWS-console, klikt u op Cognito, kiest u de naam van de AWSMobile-projectnaam die u hebt gemaakt en klikt u op Gebruikers en groepen in de Algemene instellingen menu aan de linkerkant.
U kunt dit verder brengen door aanmelding te implementeren en uw aanmelding te bevestigen. Laten we eens kijken naar de methoden voor aanmelden en confirmSignIn:
signIn () Auth.signIn (this.state.username, this.state.password) .then (user => this.setState (user) console.log ('aanmelden gebruiker succesvol !!')) .catch (err => console.log ('fout bij inloggen gebruiker:', err)) confirmSignIn () Auth.confirmSignIn (this.state.user, this.state.authCode) .then ((= = console .log ('bevestig gebruiker aanmelden succes !!')). catch (err => console.log ('fout bij het bevestigen van ondertekening in gebruiker:', err))Nadat de gebruiker is ingelogd, kunnen we deze gebruiken Auth voor toegang tot gebruikersinformatie!
We kunnen bellen Auth.currentUserInfo () om de profielinformatie van de gebruiker (gebruikersnaam, e-mail, enz.) of Auth.currentAuthenticatedUser () om de gebruiker te krijgen idToken, JWT, en veel andere nuttige informatie over de huidige ingelogde sessie van de gebruiker.
AWS Amplify gebruikt Amazon Pinpoint om metrics te verwerken. Wanneer u een nieuw Mobile Hub-project maakt met behulp van de CLI of Mobile Hub, hebt u automatisch Amazon Pinpoint ingeschakeld, geconfigureerd en klaar voor gebruik.
Als je nog niet bekend bent, is Amazon Pinpoint een service waarmee ontwikkelaars niet alleen Analytics aan hun mobiele applicaties kunnen toevoegen, maar ze ook pushmeldingen, sms-berichten en e-mails kunnen sturen naar hun gebruikers..
Met AWS Amplify kunnen we gebruikerssessie-informatie als metrieken naar Amazon Pinpoint verzenden met een paar regels code.
Laten we het Amazon Pinpoint-dashboard openen, zodat we de gebeurtenissen die we gaan creëren kunnen bekijken. Als u uw Mobile Hub-project opent in de AWS-console, kiest u Analytics in de rechterbovenhoek, of ga direct naar binnen Amazon Pinpoint van de console en open het huidige project.
In de donkerblauwe navigatiebalk aan de linkerkant zijn er vier opties: Analytics, segmenten, campagnes, en direct. Kiezen Analytics.
Zodra we beginnen met het maken van verzendgebeurtenissen, kunnen we ze in deze consoleweergave bekijken.
Nu zijn we klaar om te beginnen met traceren! In App.js, verwijder alle code uit het laatste voorbeeld en laat ons met eigenlijk alleen maar een weergavemethode met een container Bekijk met een begroeting Tekst, geen staat, geen klassemethoden en alleen een containerstijl.
We importeren ook Analytics van AWS-versterken:
import Reageren, Component uit 'reageren'; import StyleSheet, Text, Button, View uit 'react native'; import Amplify, Analytics van 'aws-amplify' importconfiguratie van './aws-exports' Amplify.configure (config) export standaardklasse App verlengt Component render () return (); const styles = StyleSheet.create (container: flex: 1, justifyContent: 'center', alignItems: 'center'); Analytics
Een veelgebruikte statistiek die u mogelijk wilt bijhouden, is het aantal keren dat de gebruiker de app opent. Laten we beginnen met het creëren van een evenement dat dit zal volgen.
In React Native hebben we de AppState API, die ons de huidige app-status zal geven actief, achtergrond, of inactief. Als de staat is actief, het betekent dat de gebruiker de app heeft geopend. Als de staat is achtergrond, dit betekent dat de app op de achtergrond wordt uitgevoerd en dat de gebruiker zich op het startscherm of in een andere app bevindt inactief betekent dat de gebruiker overgaat tussen actief en voorgrond, multitasking of een telefoongesprek voert.
Wanneer de app actief wordt, sturen we een afspraak naar onze analyse waarin staat dat de app is geopend.
Om dit te doen, zullen we het volgende evenement aanroepen:
Analytics.record ('App geopend!') U kunt de API voor deze methode bekijken in de officiële documenten. De record methode neemt drie argumenten: naam (string), attributen (object, optioneel) en metrieken (object, optioneel):
record (naam: string, attributen ?: EventAttributes, metrics ?: EventMetrics): Promise
Laten we de klasse bijwerken om een gebeurtenislistener toe te voegen wanneer het onderdeel is aangekoppeld en verwijderen wanneer het onderdeel wordt vernietigd. Deze luisteraar belt _handleAppStateChange telkens wanneer de app-status verandert:
componentDidMount () AppState.addEventListener ('change', this._handleAppStateChange); componentWillUnmount () AppState.removeEventListener ('change', this._handleAppStateChange); Laten we nu het maken _handleAppStateChange methode:
_handleAppStateChange (appState) if (appState === 'active') Analytics.record ('App opened!')Nu kunnen we de app naar de achtergrond verplaatsen en een back-up openen, en dit zou een gebeurtenis naar ons Analytics-dashboard moeten sturen. Opmerking: druk op om de app op een iOS-simulator of Android-emulator als achtergrond te gebruiken Command-Shift-H.
Klik op om deze gegevens in het dashboard te bekijken Evenementen, en kies App geopend! in de vervolgkeuzelijst Evenementen:
Je zult waarschijnlijk ook merken dat je andere gegevens automatisch beschikbaar hebt vanaf Mobile Hub, inclusief sessiegegevens, gebruiker meldt zich aan,en gebruiker meldt zich aan. Ik vond het wel cool dat al deze informatie automatisch wordt vastgelegd.
Laten we dit naar het volgende niveau brengen. Wat als we niet alleen een gebruiker willen bijhouden die de app opent, maar ook welke gebruiker de app heeft geopend en hoe vaak ze de app hebben geopend?
We kunnen dit eenvoudig doen door een kenmerk toe te voegen aan de tweede statistiek!
Laten we doen alsof we een gebruiker hebben aangemeld en een nieuwe gebeurtenis volgen die we zullen bellen "Gebruikersgegevens: app geopend".
Om dit te doen, werkt u de recordgebeurtenis bij naar het volgende:
Analytics.record ('Gebruikersdetail - App geopend!', Gebruikersnaam: 'NaderDabit')
Sluit en open de app vervolgens een paar keer. We zouden nu meer details over de gebeurtenis in ons dashboard moeten kunnen zien.
Zie rechts van de Evenement laten vallen; er is een attributen sectie. Hier kunnen we de attributen voor de gebeurtenis bekijken. In ons geval hebben we de gebruikersnaam, zodat we deze gebeurtenis nu op gebruikersnaam kunnen filteren!
Het laatste item dat we zullen bijhouden, zijn de gebruiksstatistieken. Dit is het derde argument voor record.
Laten we een statistiek toevoegen die de opgebouwde tijd registreert die de gebruiker in de app heeft doorgebracht. We kunnen dit vrij gemakkelijk doen door een tijdwaarde in de klasse in te stellen, deze elke seconde te verhogen en vervolgens deze informatie naar Amazon Pinpoint te sturen wanneer de gebruiker de app opent:
// 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 ('Gebruikersdetail - App geopend!', gebruikersnaam: 'NaderDabit', timeInApp: this.time) startTimer ( ) setInterval (() => this.time + = 1, 1000) // weergavemethodeHier hebben we een waarde van gemaakt tijd en zet het op 0. We hebben ook een nieuw toegevoegd startTimer methode die elke seconde 1 toevoegt aan de tijdwaarde. In componentDidMount, wij bellen startTimer waarmee de tijdwaarde elke seconde met 1 wordt verhoogd.
Nu kunnen we een derde argument toevoegen Analytics.record () die deze waarde als een meeteenheid zal registreren!
Laten we eens kijken naar hoe we Amplify kunnen gebruiken Amazon S3 om opslag toe te voegen aan onze app.
Om S3 toe te voegen aan uw Mobile Hub-project, voert u de volgende opdrachten uit:
awsmobile gebruikersbestanden maken awsmobile push mogelijk
AWS Amplify heeft een opslagruimte API die we kunnen importeren net zoals we die hebben met de andere API's:
importeer Storage van 'aws-amplify'
We kunnen dan methoden aanroepen opslagruimte net zoals krijgen, leggen, lijst, en verwijderen om te communiceren met items in onze bucket.
Wanneer een S3-bucket wordt gemaakt, hebben we automatisch een standaardafbeelding in onze bucket in de openbare map; de mijne wordt genoemd Bijvoorbeeld-image.png. Laten we kijken of we kunnen gebruiken AWS Versterken om deze afbeelding te lezen en te bekijken vanuit S3.
Zoals ik hierboven al zei, opslagruimte heeft een krijgen methode die we zullen oproepen om items op te halen, en de methode om deze afbeelding op te halen zou er ongeveer zo uitzien:
Storage.get (bijvoorbeeld-image.png)
Om deze functionaliteit te demonstreren in onze React Native-app, laten we wat functionaliteit maken die deze afbeelding van S3 ophaalt en aan onze gebruiker toont.
We zullen moeten importeren Beeldvan React Native, evenals opslagruimte van AWS-versterken.
import Reageren, Component uit 'React'-import // vorige import Afbeelding van' react-native '; importeer Amplify, Storage from 'aws-amplify' // rest van code
We zullen nu enige status moeten hebben om deze afbeelding vast te houden, evenals een methode om de afbeelding op te halen en in de staat te houden. Laten we het volgende toevoegen aan onze klasse boven de weergavenmethode:
state = url: " async getFile () let name = 'example-image.png'; laat fileUrl = wachten op Storage.get (naam); this.setState (url: fileUrl)
Laten we tot slot een aantal UI-elementen toevoegen om de afbeelding op te halen en terug te zetten naar de gebruikersinterface:
render () retour (); opslagruimte this.state.url! == "&& ()
Nu moeten we op de knop kunnen klikken en de afbeelding van S3 kunnen bekijken!
Klik hier om de definitieve versie van dit bestand te bekijken.
Over het geheel genomen biedt AWS Amplify een zeer eenvoudige manier om te bereiken wat voorheen een complexe functionaliteit was met niet veel code, en naadloos te integreren met vele AWS-services.
We hebben geen betrekking op pushmeldingen, die onlangs ook aan AWS Amplify zijn toegevoegd, maar deze zullen in een volgend bericht worden behandeld!
AWS Amplify wordt actief onderhouden, dus als u functieverzoeken of -ideeën heeft, kunt u reageren, een probleem indienen of een verzoek indienen, of gewoon een ster of het project bekijken als u op de hoogte wilt blijven van toekomstige functies!
En bekijk in de tussentijd een aantal van onze andere berichten over het coderen van React Native apps.
