= Ukusingatha uhlelo lwakho lwe-React nge-AWS ngemizuzu engama-30 =
Lesi sifundo sisinda kakhulu isithombe futhi siqondiswe kwabaqalayo abaphelele. Ichaza ukuthi ungasingatha kanjani isicelo sakho se-React kuwebhusayithi, ngohlelo oluphelele lokugunyaza. Icela amandla e-AWS MobileHub nge-Mobilehub CLI (Command Line Interface). Okokufundisa akudingi amakhono ngezinsizakalo ze-AWS futhi kuzokukhombisa ukuthi usethe i-React boilerplate application.
Uma usuvele unalo uhlelo lokusebenza lwe-React,
**ungeqela esigabeni 2 lapho sifaka khona i-awsmobile-cli bese uyengeza kuhlelo lwethu lokusebenza
= Ngaphambi kokuthi siqale sidinga izinto ezimbalwa ezisethwe kukhompyutha yakho =
**Imvelo yeNode 8.x efakwe ekhompyutheni yakho**
- Lena indawo yesikhathi sokusebenza yamaseva ohlelo lwe-Javascript. Kulandela nomphathi wephakheji le-node (NPM).
- I-NPM isetshenziselwa ukufaka amaphakheji e-node afana ne-React, i-AWS Amplify, iphakheji yesixhumi se-AWS-JS kanye nalokho ngokuyisisekelo.
- httpsnodejs.org/en/download/
**I-akhawunti yeTier yamahhala ye-AWS
- Uthola ukufinyelela kwamahhala kumasevisi e-AWS nge-Free Tier. Kulesi sifundo, lokhu kufanele kube okungaphezu kokwanele. Nokho, khumbula ukuthi insizakalo ngayinye inomkhawulo ekusebenziseni inyanga ngayinye futhi lokhu kungase kubize imali yangempela.
- httpsaws.amazon.com/free/
**Faka i-AWS CLI (Command Line Interface) ukuze ushayele izinsizakalo ze-AWS ngokuqondile kukhonsoli yakho** **Kulesi sifundo sizosebenzisa i-boilerplate egciniwe evela ku-Facebook, abadali be-React **Umhleli omkhethayo
- Ngiphakamisa ukuthi ngiqale nge-Visual Studio Code, umhleli ongasindi oshintsheka kakhulu ongasebenzisa izilimi eziningi zokuhlela nezinhlaka.
Ithiphu ye-Pro:Enqubweni yokufaka ye-VS Code, qiniseka ukuthi uqoka ibhokisi eliyengeza emagameni endlela yakho yendawo. Lokhu kukunikeza ukufinyelela ekuvuleni Ikhodi ye-VS kusukela kutheminali ngokuthayipha okuthi âÃÂÃÂcode filename.jsâÃÂànoma âÃÂà Âikhodi .âÃÂà yayo yonke iphrojekthi okuyo. **Itheminali oyohlala kuyona. Âukhululekile ukungena
- Abathuthukisi abaningi kufanele bafake i-Git kukhompyutha yabo. Lokhu kukunikeza ukufinyelela ku-Git Bash okuyitheminali yonjiniyela abaningi.
Masiqale!
**1. Dala uhlelo lokusebenza lwe-React bese ufaka ifolda yephrojekthi ngokusebenzisa ukuphela**
Faka itheminali bese uthola ifolda yakho lapho ugcina khona izinhlelo zokusebenza. Ngiphakamisa ifolda ebizwa ngokuthi âÃÂÃÂdevâÃÂÃÂ.
npx dala-react-app igama lephrojekthi&& cd igama lephrojekthi
noma
npm -g faka i-create-react-app create-react-app igama lephrojekthi
Lapha sakha uhlelo lokusebenza lwe-React ngokusekelwe ku-boilerplate. I-âÃÂÃÂnpxâÃÂàiyithuluzi le-Node elisebenzisa iseva ye-npm ngokushayela amaphakheji akude. Amazwibela wekhodi yesibili afaka i-create-react-app endaweni nge
*npm -g install create-react-app* **bese udala uhlelo lokusebenza. Ngiphakamisa ukusebenzisa i-npx ukuze uhlale usesikhathini nge-create-react-app bese udala uhlelo lokusebenza. Ngiphakamisa ukusebenzisa i-npx ukuze uhlale unolwazi lwakamuva ngohlelo lokusebenza lwe-create-react. **2. Faka i-awsmobile CLI kukhompyutha yakho bese uyiqhuba kuphrojekthi**
Kusukela kuleli phuzu, kufanele unake uhlelo lwakho lokusebenza lwe-React kusihleli sekhodi yakho. Kuzokwengezwa amafolda anjengokuthi/awsmobile nokunye okungeziwe kufayela le-package.json.
Efasiteleni letheminali, thayipha
npm faka -g awsmobile-cli
ukufaka i-awsmobile-cli emhlabeni jikelele. Sizosebenzisa lokhu ngemva kokwenza umsebenzi othile kukhonsoli ye-AWS Mobile Hub.
Qiniseka ukuthi ungaphakathi kwephrojekthi yakho futhi uthayiphe
awsmobile init
Uyacelwa ngesethi yemibuzo, lapho okuzenzakalelayo kuhle ngakho cindezela u-enter ngesilungiselelo ngasinye size sivule ngokuzenzakalelayo i-AWS kusiphequluli sakho esizenzakalelayo. Ngena ngemvume nge-akhawunti yakho ye-Free Tier uma ungakakwenzi.
Lokhu kuqinisekisa i-awsmobile-cli ukuthi sixhumeke ku-akhawunti elungile ye-AWS. Buyela emuva kutheminali yakho bese ucindezela u-Enter ukuze uqhubeke.
I-AWS idinga ukusetha umsebenzisi ukuze alawule uhlelo lokusebenza. Lokhu kuzokwenziwa ngokuzenzakalelayo nge-awsmobile-cli uma uqhubeka nokucindezela u-enter.
Ngemva kokuqeda lokhu, uzoyiswa ku-AWS IAM lapho uzobe uvele u- ¢ÃÂàindlela yakho eya ekupheleleni! Esinyathelweni sesibili kufanele ngabe ihlole ngokuzenzakalelayo ukuthi âÃÂÃÂI-Administrator AccessâÃÂà enikeza Umsebenzisi ukufinyelela kuzo zonke izici ze-AWS esizidingayo.
Uma usuqedile, kubaluleke kakhulu ukuthi ulande ifayela le-.csv ngemininingwane yakho eyimfihlo njengoba lizoboniswa kanye kuphela ku-AWS. Laba okhiye bazosetshenziswa ezinyathelweni ezilandelayo zefasitela lakho letheminali.
Lokhu kudala ngempumelelo uhlelo lwakho lokusebenza lwe-AWS MobileHub futhi kufake ngokuzenzakalelayo i-aws-amplify& ama-aws-amplify-react kuphrojekthi yangakini ye-React
Uma le nqubo yenziwe (~1 iminithi) ungathayipha
i-awsmobile console
ukuze ubone uhlelo lwakho lokusebenza lwe-Mobile Hub kusiphequluli sakho esizenzakalelayo. Ungaphinda uthayiphe okuthi âÃÂÃÂawsmobileâÃÂàukuze ubone uhlu lwezenzo ezihlukile. Ukusuka lapha, sizokwengeza i-Cognito Login ngesiphequluli, kodwa ungakwenza usebenzisa i-awsmobile CLI.
**3. Empeleni ingeza ukungena ngemvume kwe-Cognito nokubamba**
Ngesinyathelo sokugcina, sizongeza i-AWS Cognito kuphrojekthi yethu nge-AWS MobileHub Console. Ungahlola futhi Ukusingathwa osekuvele kunikwe amandla ngokuzenzakalela.
Ukuze uhlole ukusingathwa, chofoza isici kukhonsoli yakho bese uchofoza i-URL oyinikeziwe. Okuqukethwe lapha kuyisifanekiso se-AWS, kodwa uzosibhala phezu kohlelo lokusebenza lwe-React maduze.
**Ukwengeza ukungena ngemvume komsebenzisi we-Cognito, skrolela phansi ukuze uthole âÃÂÃÂUkungena ngemvume komsebenzisiâÃÂàbese uyichofoza. **Lokhu kunika amandla ama-Cognito User Pools ngesistimu yokuqinisekisa. Sebenzisa âÃÂÃÂI-imeyiliâÃÂàkusukela kukheli le-imeyili noma inombolo yocingo ukuze uphoqelele i-imeyili njengegama lomsebenzisi ekungeneni kwakho ngemvume. Noma ungasebenzisa Igama lomsebenzisi futhi unike amandla i-Email Âàukuvumela umsebenzisi ukuthi akhethe. Uzothola ikhodi yokuqinisekisa nge-imeyili noma ngayiphi indlela.
Samukela i-imeyili ngoba i-AWS ayikhokhisi ngokuthumela amakhodi okuqinisekisa ukubhaliswa ku-imeyili, kuyilapho kubiza imali yangempela ukuthumela i-SMS.
Okuphumela kokuthi:
Uma uchofoza Isenzo >Hlela ku-Cognito, uzobona ikhonsoli ye-Cognito yokuphatha Abasebenzisi bakho nezici zokuphepha ezithuthukile. Okunye ukusetha okwenzile kulesi sinyathelo akubuyiseleki emuva kodwa ungakwazi njalo ukususa iphuli yakho yabasebenzisi bese udala entsha.
Lokhu kuqedela ukucushwa kwe-AWS Cognito ngaphakathi kwe-MobileHub. Yisikhathi sokungeza ikhodi. Malini? 5 imigqa! Futhi ezi-3 zazo zingenisa kuphela ku-React.
= Ukwengeza izilungiselelo zakho kuphrojekthi ye-React kanye nokushicilela kuwebhusayithi yakho =
Kutheminali yakho, noma ngasiphi isikhathi ungasebenzisa i-awsmobile pull noma i-awsmobile push ukuze udonse izinguquko zakho ngokulandelana kwazo usuka ku-AWS MobileHub Console ku-inthanethi uye kuhlelo lwakho lokusebenza, noma ucindezele izinguquko zakho zendawo zenziwe nge-awsmobile CLI kutheminali.
Kulesi simo sokusetshenziswa sifuna ukulanda izinguquko esizenzile. Buyela emuva kutheminali yakho bese uthayipha
Emuva ku-VS Code, uzobona ukuthi iphrojekthi yakho manje isilungisiwe. Ungahlola ukulungiselelwa kwendawo yakho kokuthi ./awsmobile/backend/mobile-hub-project.yml
Futhi, kokuthi ./package.json youâÃÂÃÂuzothola imitapo yolwazi emibili egqanyisiwe yengezwa yi-awsmobile init esiyenze ngaphambili.
Manje sizosebenzisa lokhu ukugoqa uhlelo lwethu lokusebenza ngewindi lokungena ngemvume le-Cognito. Vula ./src/index.js bese ulungisa lokhu:
kulokhu:
ngenisa Impendulo esuka 'kusabela';
ngenisa i-ReactDOM isuka 'ku-react-dom';
ngenisa inkomba.css';
ngenisa i-App kusuka ku-App';
ngenisa irejistaServiceWorker kusuka kurejistaServiceWorker';
ngenisa i-awsMobile kusuka kuma-aws-exports';
ngenisa Khulisa kusuka ku-'aws-amplify';
ngenisa i-{ withAuthenticator } isuka kokuthi "aws-amplify-react"Amplifay.configure(awsMobile);
const AppWithAuth = withAuthenticator(App)ReactDOM.render(
('root
registerServiceWorker
And youâÃÂÃÂre done! Try to run your application from your terminal with
npm start
and see it be loaded into the browser with a sleek GUI created by AWS:
From here you can register, login or reset users, and as an admin you can see the users who are registering.
**To add hosting simply go to your terminal and type
awsmobile publish
If you get this warning, abort the publish, run awsmobile pull and run awsmobile publish again:
When this process is done, your hosted website automatically opens in your default browser:
**There, youâÃÂÃÂre done
= Pitfalls in the process =
If the application says âÃÂÃÂNo user poolsâÃÂÃÂ, make sure your MobileHub console has Sign-In activated, and that youâÃÂÃÂve called awsmobile pull from your terminal. This updates the aws-exports.js file which is then added to Amplify.configure() in React. Also, remember to import that file!
**Further challenges** **Use the ** **aws-amplify authentication documentation ** **to add a signout button to your application
Hint: YouâÃÂÃÂll need to import Auth and call its signOut function.
import { Auth } from aws-amplify-react
**Add your custom domain name to the hosted website**This is done through CloudFront, which you can access in MobileHub âÃÂÃÂHosting and StreamingâÃÂÃÂ. Read the docs provided if you want assitance:
== Using Custom URLs for Files by Adding Alternate Domain Names (CNAMEs) - Amazon CloudFront ==
Describes how to add an alternate domain name, known as a CNAME, to use your own domain name instead of the defaultâÃÂæ
docs.aws.amazon.com
**Add Google Login**Delete your Cognito User Pool and add one with Facebook/Google providers. This can be a bit tricky as you need to get e.g. Google Web App Client ID from the google terminal to make this work. **Hope you enjoyed this very detailed introduction to AWS MobileHub. ItâÃÂÃÂs a lot of fun once you get the hang of it, and creating a Serverless backend for your frontend project has never been as easy
