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

Pagpapabilis ng Karga sa Iyong Bagong Native na App na may Kasamang AWS na Amplify

by
Difficulty:IntermediateLength:LongLanguages:

Tagalog (Wikang Tagalog) translation by Robert Alexander (you can also view the original English article)

Final product image
What You'll Be Creating

Ang AWS Amplify ay isang bukas na libruhan na hinahayaan ang mga gumagawa, at sa ating kaso ay ang mga gumagawa ng mga telepono, na magdagdag na panibagong pag-gamit sa mga aplikasyon kasama na ang mga pagbibilang, pagpapa-alam, lalagyanan, at pagpapatunay.

Ang Amplify ay umaandar hindi lamang sa React Native, kung hindi pati na rin sa Vue, Angular, Ionic, React web at maski ano pa mang JavaScript na kabuuan. Sa pagtuturong ito, ipapakita naming ang ilan sa mga importanteng gamit nito sa loob ng React Native na aplikasyon.

Ang magandang bagay tungkol sa libruhang ito ay mayroon itong kakaiba at malayong gamit kumpara sa mga nakasanayan ng mahihirap na mga pagbuo at pagsasa-ayos para lamang ang mga gawaing ito ay maging madaling mailagay sa modyul at magawa an gating proyekto gamit ang NPM.

Pag-uusapan natin ang AWS na Amplify sa tatlong parte: pagpapatunay, paglalagyan, at pagbibilang.

Instalasyon at Pagsasa-ayos ng React Native na Aplikasyon

Kung gusto mong sumunod, gumawa lamang ng bagong React Native na proyekto gamit ang Expo (Create React Native App) o kaya naman ay React Native CLI:

o

Ngayon, sumunod na tayo at i-instol ang aws-amplify na libruhan gamit ang pisi o npm:  

Kung ang ginagamit mo ay Expo, maaari mong lagpasan ang susunod na hakbang (linking) dahil ang Expo ay nagpapadala na kaagad ng native na pagdepende mula sa Amazon Cognito na suporta.

Kung hindi ka naman gumagamit ng Expo, kailangan nating pag-ugnayin ang Cognito na libruhan (Amazon Cognito na gumagawa ng pagpapatunay) na nailagay noong inilagay natin ang aws-amplify:

Pagbuo ng AWS

Ngayon na ang React Native na proyekto ay nagawa at nabuo na, kailangan nating gawin ang Amazon na serbisyo na makakasama nito sa pag-gamit.  

Sa loob ng direktoryo ng bagong proyekto, tayo ay gagawa ng bagong pang-teleponong proyekto sa tutorial na ito. Para gawin ang proyektong ito, gagamit tayo ng AWSMobile CLI, ngunit maaari mo ring gamitin ang console kung ikaw ay may kaalaman na sa pag-gamit nito. Naglagay na ako ng YouTube na video na may mabilisang pagpapakita sa AWSMobile CLI kung nais mo pang may malaman pa tungkol dito.

Ngayon, gagawa na tayo ng bagong pang-telepono kasama ng ating bagong direktoryong proyekto: 

Pagkatapos mong ginawa ang iyong proyekto at mayroon ka ng aws-exports na mga file (ito ay awtomatikong nakagawa na para sa iyo sap ag-gamit ng awsmobile init), kailangan nating ayusin ang React Native proyekto gamit ang AWS na proyekto gamit ang AWS Amplify.

Para gawin ito, tutungo tayo sa App.js sa ibaba sa huling pagkuha at pagdagdag ng mga sumusunod na linya ng mga koda:

Ang pagpapatotoo

Ang pagpapatotoo gamit ang Amplify ay ginagawa gamit ang Amazon Cognito na serbisyo. Gagamitin din natin ang serbisyong ito upang hayaan ang mga gumagamit na mag-sign-in at mag-sign-up sa ating aplikasyon!

Pagdadagdag ng Pagpapatotoo Gamit ang AWSMobile CLI 

Idagdag natin ang signin at Amazon Cognito sa ating Mobile Hub na proyekto. Sa naunang direktoryo, gamitin ang mga sumusunod na komand:

Ngayon, mayroon na tayong bagong Amazon Cognito na mga taga-gamit at maaari ng gamitin. (Kung nais mong Makita ang mga detalye ng bagong serbisyong ito, magtungo lamang sa AWS Console, pindutin ang Cognito, at piliin ang pangalan ng AWSMobile na proyektong pangalan na iyong ginawa)

Susunod, isama natin ang pagpapatotoo sa Amazon Cognito at AWS Amplify. 

Auth Class

Tignan natin ang pag-gamit ng unang klase na maaari mong gamitin upang magkaroon ng kabuuang pag-gamit sa Amazon Cognito na serbisyo, ang Auth na klase.

Ang Auth na klase ay mayroong maraming pamamaraan na maaari kang payagan na gawin ang lahat ng nais mong gawin mula sa pagsa-sign-up at sign-in ng mga gumagamit hanggang sa pagpapalit ng kanilang mga password at lahat pa ng ibang nasa gitna.  

Madali din itong gawin sa two-factor na pagpapatotoo gamit ang AWS Amplify gamit ang Auth na klase, tulad ng makikita natin sa mga sumusunod na mga halimbawa.

Halimbawa

Tignan natin kung papaano gagawin ang pag-sign-in ng mga gumagamit gamit ang Amazon Cognito at ang Auth class.

Maaari tayong bumuo ng matibay na sign-up at sign-in na pagpapatuloy sa kakaunting trabaho lamang! Gagamitin natin ang signUp, confirmSignUp, signIn, at confirmSignIn na pamamaraan ng Auth na klase.

Sa App.js, gumawa tayo ng mailing pamamaraan na hahayaan ang mga gumagamit ng sign-up at pagpapatotoong gawain at gayon din ang iba pang mga pamigil sa mga gumagamit:

Ang signUp ay gumagawa ng paunang sign-up na pakikiusap, at ito ay magpapadala ng SMS sa bagong gumagamit upang kumpirmahin ang kanilang numero. Ang confirmSignUp ay kumukuha ng SMS na koda at ang username at kinukumpirma ang bagong taga-gamit sa Amazon Cognito.

Gagawa rin tayo ng UI para sa pagbuo ng input at ng pagipiliian, at nang magdudugtong na klaseng pamamaraan sa mga UI na elemento. Baguhin ang render method sa mga sumusunod:

Sa wakas, babaguhin natin ang ating estilo upang tayo ay magkaroon ng mas magandang UI:

Basic Sign In Form

Upang Makita ang pinakabagong bersyon nito, pindutin ito.

Ngayon, maaari na tayong mag sign up,kumuha ng kumpirmasyon na koda na ipapadala sa iyong telepono, and kumpirmahin sa paglalagay ng koda.  

Kung nais mong tingnan ang mga detalye ng bagong nalikhang user, bumalik sa AWS Console, pindutin ang Cognito, piliin ang pangalan ng pangalan ng proyekto ng AWSMobile na iyong nilikha, at pindutin sa mga gumagawa at mga grupo sa menu ng mga pangkalahatang gawain sa kaliwa.

Maaari mo itong gawin nang higit pa sa pamamagitan ng pagpapatupad ng pag-sign-in at kumpirmahin ang pag-sign in. Tingnan natin ang mga pamamaraan para sa signIn and confirmSignIn

Pagkuha sa mga Datos ng mga Gumagamit at Sesyon

Sa sandaling naka-sign in ang gumagamit, maaari naming gamitin ang Auth upang mabuksan ang impormasyon ng user!

Maaari naming tawagan ang Auth.currentUserInfo() upang makuha ang impormasyon ng profile ng gumagamit (username, email, atbp.) o Auth.currentAuthenticatedUser() upang makuha ang user idToken, JWT, at maraming iba pang kapaki-pakinabang na impormasyon tungkol sa kasalukuyang naka-log sa sesyon.

Analitiko

Ginagamit ng AWS Amplify ang Amazon upang utorung mahawakan ang mga sukatan. Kapag lumikha ka ng isang bagong proyekto ng Mobile Hub gamit ang alin man sa CLI o Mobile Hub, awtomatiko kang pinahihintulutan na baguhin at handa nang magamit ng Amazon na Pinpoint.

Kung hindi ka pa pamilyar, ang Amazon Pinpoint ay isang serbisyo na hindi lamang nagpapahintulot sa mga bumubuo na magdagdag ng analitiko sa kanilang mga telepono na aplikasyon, ngunit din ay nagpapahintulot sa kanila na magpadala ng mga mabilisang notipikasyon, mga SMS na mga mensahe, at mga email sa kanilang mga taga-gamit.

Sa AWS Amplify, maaari kaming magpadala ng impormasyon ng sesyon ng gumagamit bilang mga sukatan sa Amazon sa pagtuturo na may ilang mga linya ng koda.

Buksan natin ang dashboard ng pagtuturo sa Amazon upang mapansin natin ang mga kaganapan na gagawin natin. Kung binuksan mo ang iyong proyekto sa Mobile Hub sa AWS console, piliin ang Analitiko sa kanang sulok sa itaas, o direktang pumunta sa Amazon Pinpoint mula sa console, at buksan ang kasalukuyang proyekto.

Sa madilim na bughaw na paghahanap na lagayan sa kaliwa, mayroong apat na pagpipilian: Analytics, Segments, Campaigns, at Direct. Piliin ang Analytics.

Pinpoint Console

Sa sandaling simulan namin ang paglikha ng mga pagpapadala ng mga kaganapan, makikita namin ang mga ito sa tinginan ng console na ito.

Ngayon handa na kaming magsimula sa pagsubaybay! Sa App.js, aalisin ang lahat ng koda mula sa huling halimbawa, iniiwan sa amin ang karaniwang isang paraan ng paglalagay na naglalaman ng isang lalagyan. Tingnan na may isang teksto na pagbati, walang estado, walang mga pamamaraan ng klase, at lamang ng estilo ng lalagyan.

Nag-import din kami ng Analitiko mula sa aws-amplify:

Pagsubaybay sa Mga Pangunahing Kaganapan

Ang isang pangkaraniwang panukat na maaari mong subaybayan ay ang dami ng beses na binubuksan ng isang gumagamit ang app. Magsimula tayo sa paglikha ng isang kaganapan na susubaybayan ito.

Sa React Native, mayroon kaming AppState API, na magbibigay sa amin ng kasalukuyang estado ng app ng aktibo, pangkaligiran, o hindi aktibo. Kung ang estado ay aktibo, nangangahulugan ito na binuksan ng user ang app. Kung ang estado ay sa paligid, nangangahulugan ito na ang app ay tumatakbo sa paligid at ang gumagamit ay alin man sa home screen o sa isa pang app, habang hindi aktibo ay nangangahulugang gumagamit ang paglipat sa pagitan ng aktibo at ibaba, pag-gamit ng madami, o nasa isang tawag sa telepono.

Kapag naging aktibo ang app, magpadala ng isang kaganapan sa aming analitiko na nagsasabi na binuksan ang app.

Upang gawin ito, tatawagan namin ang sumusunod na pangyayari:

Maaari mong tingnan ang API para sa pamamaraang ito sa opisyal na mga doc. Ang paraan ng record ay tumatagal ng tatlong argumento: pangalan (string), mga katangian (object, opsyonal), at sukatan (object, opsyonal):

Palitan ang klase upang magdagdag ng isang tagapakinig ng kaganapan kapag ang sangkap ay nakalagay, at alisin ito kapag ang sangkap ay nawasak. Ang tagapakinig ay tatawag sa _handleAppStateChange ang mga pagbabago ng estado ng app:

Ngayon, lumikha ng paraan ng _handleAppStateChange:

Ngayon, maaari naming ilipat ang app sa background, buksan ito back up, at ito ay dapat magpadala ng isang kaganapan sa aming dashboard ng Analytics. Tandaan: Sa background ang app sa isang iOS simulator o Android emulator, pindutin ang Command-Shift-H.

Upang makita ang datos na ito sa dashboard, mag-click sa Mga Kaganapan, at piliin ang App na binuksan! mula sa dropdown ng Mga Kaganapan:

Filtering and viewing Analytics events

Maaari mo ring mapansin na mayroon kang iba pang datos na magagamit mo mula sa Mobile Hub, kabilang ang datos ng sesyon, pag-sign up ng user, at pag-sign in ng gumagamit. Naisip ko na medyo maganda na ang lahat ng impormasyong ito ay awtomatikong naitala.

Pagsubaybay sa Mga Detalyadong Kaganapan

Ngayon ay tumagal ito sa susunod na antas. Paano kung gusto naming subaybayan hindi lamang ang isang gumagamit ng pagbubukas ng app, ngunit kung aling user ang nagbukas ng app at kung gaano karaming beses binuksan nila ang app?

Madali naming gawin ito sa pamamagitan ng pagdaragdag ng isang katangian sa pangalawang panukat!

Kumilos tayo na kung may isang gumagamit na naka-sign in, at subaybayan ang isang bagong kaganapan na tatawagan namin ang "detalye ng User: binuksan ang App".

Upang gawin ito, baguhin ang rekord ng pangyayari sa mga sumusunod:

Analytics.record('User detail - App opened!', { username: 'NaderDabit' })

Pagkatapos, isara at buksan ang app nang ilang beses. Dapat nating makita ang higit pang detalye tungkol sa kaganapan sa aming itaas na gawain.

Upang gawin ito, tumingin sa kanan ng dropdown ng Kaganapan; may seksyon ng Mga Katangian. Dito, maaari naming mag-drill down sa mga katangian para sa kaganapan. Sa aming kaso, mayroon kaming pangalan ng user, kaya maaari na namin ngayong piliin ang kaganapang ito sa pamamagitan ng pangalan ng mga gumagamit!

Adding attributes and filtering by attributes

Mga Sukatan ng Paggamit

Ang huling item na susubaybayan natin ang mga sukatan ng paggamit. Ito ang ikatlong argumento upang itala.

Magdaragdag kami ng isang panukat na nagtatala ng naipon na oras na ang gumagamit ay nasa app. Maaari naming gawin ito medyo madali sa pamamagitan ng pagtatakda ng isang oras na halaga sa klase, bumababa ito sa bawat segundo, at pagkatapos ay ang pagpapadala ng impormasyon na ito kasama sa Amazon ay ituro kapag binubuksan ng gumagamit ang app:

Dito, lumikha kami ng isang halaga ng oras at itakda ito sa 0. Nagdagdag din kami ng isang bagong paraan ng startTimer na magdaragdag ng 1 sa halaga ng oras bawat segundo. Sa componentDidMount, ginagamit namin ang startTimer na aming babawasan ang oras na halaga sa 1 bawat segundo.

Ngayon ay maaari naming magdagdag ng isang pangatlong argumento sa Analytics.record() na magtatala ng halagang ito bilang isang sukatan!

Imbakan

Tingnan natin kung paano natin magagamit ang Amplify na may AmazonS3 upang magdagdag ng imbakan sa aming app.

Upang magdagdag ng S3 sa iyong proyekto sa Teleponong Hub, patakbuhin ang sumusunod na mga utos:

Paggamit ng Halimbawa

Ang AWS Amplify ay may lalagyanan na API na maaari naming kuhanin tulad ng mayroon kami sa iba pang mga API:

import { Storage } from 'aws-amplify

Pagkatapos ay maaari naming tawagan ang mga pamamaraan sa imbakan tulad ng pagkuha, ilagay, listahan, at alisin upang makipag-ugnay sa mga gamit sa aming lalagyanan.

Kapag ang isang S3 na lalagyanan ay nilikha, awtomatiko naming magkaroon ng isang default na imahe sa aming lalagyanan sa pampublikong polder; ang minahan ay tinatawag na halimbawa-image.png. Tingnan natin kung magagamit natin ang AWS Amplify upang basahin at tingnan ang larawang ito mula sa S3.

View of S3 bucket public folder

Tulad ng nabanggit ko sa itaas, ang imbakan ay may paraan ng pagkuha na tatawagan namin upang mabawi ang mga kagamitan, at ang paraan upang mabawi ang larawang ito ay magiging ganito:

Upang ipakita ang pag-andar na ito sa aming katutubong katutubong app, lumikha ng ilang pag-andar na kinukuha ang larawang ito mula sa S3 at ipinapakita ito sa aming taga-gamit.

Kakailanganin naming mag-import ng Imahe mula sa Katutubong Katutubong, pati na rin sa Seguridad mula sa aws-amplify.

Ngayon, kakailanganin naming magkaroon ng ilang estado na hawakan ang imaheng ito, pati na rin ang isang paraan upang mabawi ang imahe at hawakan ito sa estado. Idagdag natin ang mga sumusunod sa aming klase sa itaas ng paraan ng pagbawas:

Panghuli, magdagdag ng ilang mga elemento ng UI upang makuha ang imahe at bawasan ito sa UI:

App screenshots showing the Get Image feature

Ngayon, dapat naming mapindot ang pindutan at tingnan ang imahe mula sa S3!

Upang tingnan ang huling bersyon ng gawaing ito, pindutin dito.

Konklusyon

Sa pangkalahatan, ang AWS Amplify ay nagbibigay ng isang tunay na madaling paraan upang maisagawa kung ano ang ginagamit upang kumplikadong pag-andar na may hindi gaanong koda, pagsasama nang walang putol sa maraming mga serbisyo ng AWS.

Hindi namin sinasaklaw ang mga abiso sa pagbibigay, na kamakailan ay idinagdag sa AWS Amplify, ngunit ang mga ito ay sakop sa isang paparating na mga paskil!

Ang AWS Amplify ay aktibong pinananatili, kaya kung mayroon kang anumang mga kahilingan o ideya ng tampok, huwag mag-atubiling magkomento, magsumite ng isang isyu o kumuha ng mga kahilingan, o buksan lamang o panoorin ang proyekto kung nais mong mapapanatiling napapanahon sa mga tampok sa hinaharap!

At pansamantala, tingnan ang ilan sa aming iba pang mga post tungkol sa pagkokoda ng React Native na mga apps.

Advertisement
Advertisement
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.