Share
AWS Amplify este o bibliotecă client, CLI toolchain și bibliotecă de componente UI care permite dezvoltatorilor să creeze rapid și să se conecteze la servicii puternice din cloud. În acest post, vom examina cum să construim complet aplicații web fără server cu React și AWS Amplify cu funcții cum ar fi autentificarea, un strat de date GraphQL gestionat, funcții de stocare, funcții lambda și găzduire web.
Amplify permite activarea unor funcții precum GraphQL (AWS AppSync), stocare (Amazon S3), autentificare utilizator (Amazon Cognito), funcții fără server (AWS Lambda), găzduire (Amazon CloudFront și Amazon S3).
Scopul bibliotecii și al CLI este să permită dezvoltatorilor să creeze aplicații web și mobile full-stack fără a-și face griji în ceea ce privește gestionarea propriei infrastructuri de back-end, permițându-le să se deplaseze mai mult până la stack folosind abilitățile deja cunoscute.
În această serie, vă voi arăta cum să creați un nou proiect AWS Amplify, să activați funcțiile cloud folosind CLI, să conectați aplicația React și să începeți să interacționați cu serviciile cloud. În acest post, vă voi arăta cum să implementați autentificarea, stocarea și găzduirea. În tutorialul următor, vom învăța cum să creați și să interacționați cu API-urile GraphQL și Serverless.
În timp ce acest tutorial folosește React, Amplify va funcționa cu orice proiect JavaScript și va avea componente specifice pentru Angular, Vue, React Native și Ionic. CLI acceptă, de asemenea, iOS nativ și Android.
Pentru a începe, trebuie mai întâi să creați o nouă aplicație React utilizând CLI-ul create-react-app și să treceți în noul director:
npx crea-reacție-app amplifică-web-app cd amplify-web-app
Apoi, vom instala dependentele de client AWS Amplify:
fire aws-amplifica aws-amplify-react # sau npm instalare aws-amplifica aws-amplify-react
Apoi, va trebui să instalați AWS Amplify CLI.
npm instala -g @ aws-amplify / cli
Acum, când AWS Amplify CLI este instalat, trebuie să-l configuram pentru a putea crea resurse în contul nostru AWS. Facem asta prin rularea amplifică configurarea comandarea și configurarea unui nou utilizator AWS.
amplifică configurarea
Puteți vedea o scurtă prezentare video a acestei configurații pe YouTube.
Acum, când AWS Amplify CLI este instalat și configurat, executați amplifica comandă din linia de comandă pentru a vedea opțiunile disponibile și asigurați-vă că CLI a fost instalat corect.
amplifica
Pentru a inițializa un nou proiect AWS Amplify, vom rula amplifică init comanda:
amplifică init
Când vi se solicită, alegeți editorul de text preferat și respectați valorile implicite pentru toate celelalte opțiuni.
Acest lucru a inițializat acum un nou proiect AWS Amplify la nivel local, iar acum vom vedea un amplifica director și .amplifyrc fișier creat în directorul rădăcină al proiectului nostru React. Aceste fișiere conțin informații despre configurația despre proiectul Amplify și nu avem nevoie să le atingem deocamdată.
Prima caracteristică pe care o vom activa este autentificarea utilizatorilor. Putem să activați funcțiile în orice moment prin difuzare amplificați adăugați . Categoria de autentificare este AUTH, așa că rulați:
amplifică adăugați auth
Cand esti intrebat Doriți să utilizați configurația implicită de autentificare și securitate?, alege da.
Odată ce acest lucru este creat, trebuie să fugim amplifica împinge pentru a crea noul serviciu în contul nostru:
amplifica împinge
Cand esti intrebat Esti sigur ca vrei sa continui?, alege da.
Odată ce serviciul a fost creat, puteți să vizionați serviciul în tabloul de bord în orice moment vizitând https://console.aws.amazon.com/cognito/users/ și faceți clic pe numele serviciului dvs..
De asemenea, putem vizualiza toate serviciile activate în orice moment, prin difuzare amplifica starea:
amplifica starea
Veți observa, de asemenea, un nou fișier care a fost creat-AWS-exports.js-în dosarul rădăcină al aplicației React. Nu va trebui să editați acest fișier așa cum este tratat de CLI, dar îl vom folosi în etapa următoare pentru configurarea proiectului local.
Acum, când am creat serviciul de autentificare, putem începe să îl folosim în aplicația noastră React!
Primul lucru pe care trebuie să-l facem este să configurați aplicația React pentru a afla despre proiectul nostru Amplify. Felul în care facem asta este chemarea Amplify.configure în rădăcina proiectului - pentru noi, asta va fi src / index.js.
import Amplificați din "aws-amplify" import config din "./aws-exports" Amplify.configure (config)
Acum, proiectul nostru este gata să meargă și putem implementa autentificarea.
Accentsconagua
withAuthenticator Componenta superioarăVom analiza câteva modalități de a implementa autentificarea utilizatorilor, dar pentru a elimina lucrurile, vom începe prin utilizarea acestora withAuthenticator comanda de mai sus din AWS-amplifica reacționează bibliotecă. Această componentă scutește un întreg flux de autentificare în doar câteva rânduri de cod și este o modalitate excelentă de a te ridica și de a funcționa cu biblioteca.
În App.js, importați withAuthenticator HOC în partea de sus a dosarului:
import withAuthenticator de la "aws-amplify-react"
Și, în partea de jos, actualizați export declarație pentru a împacheta App componenta cu withAuthenticator.
export implicit cuAuthenticator (App)
Pentru a afla mai multe, citiți despre componentele Amplify React disponibile pentru autentificare în documentația oficială.
Acum, putem rula aplicația și ar trebui să vedem un ecran de conectare:
Clic creează cont să vă înscrieți și apoi să vă conectați la aplicație. După ce ne-am conectat, sesiunea va fi stocată, astfel încât să putem actualiza pagina și vom rămâne conectați.
De asemenea, putem face un buton de deconectare prin adăugarea unui al doilea argument către HOC:
implicit de export cuAuthenticator (App, includeGreetings: true)
Rețineți că putem folosi și Auth clasa direct pentru a semna utilizatorii afară:
// 1. importați importul de clasă Auth de la 'aws-amplify' // Semnați că utilizatorul așteaptă Auth.signOut ()
Rețineți că atunci când sunați Auth.signOut direct, trebuie să reanalizăm componenta într-un fel, pentru a readuce utilizatorul înapoi la pagina de conectare. Puteți vedea un exemplu de acest lucru într-un thread de problemă în cadrul proiectului GitHub repo.
Auth ClasăPutem folosi, de asemenea, Auth pentru gestionarea manuală a utilizatorilor. Auth are peste 30 de metode disponibile, inclusiv Inscrie-te, conectare, confirmSignUp, confirmSignIn, Ați uitat parola, și resendSignUp.
Să aruncăm o privire asupra modului în care puteți implementa înscrierea utilizatorilor utilizând Inscrie-te clasă:
// 1. Crearea stadiului inițial pentru a păstra intrările utilizatorului state = username: ", parola:", email: ", numărul_fonului:", authCode: " // // onChange handler pentru modificările introduse de utilizator onChange = e => acest nume de setare ([e.target.name]: e.target.value) // 3. Funcția de a apela Auth.signUp signUp = async () => const username, parola, email, phone_number = this.state așteaptă Auth.signUp (nume de utilizator, parolă, atribute: phone_number, email) console.log ('a fost înregistrat cu succes) // 4. Funcția de a apela Auth.signUp confirmSignUp = async () const username, authCode = this.state așteaptă Auth.confirmSignUp (username, authCode) console.log ('confirmat cu succes') // 5. În metoda rendering, creați intrări cu atribute pentru a actualiza starea // 6. Creați butoane pentru a apela signUp și pentru a confirma metodele Signign Acesta este un plan pentru modul în care puteți înscrie manual un utilizator cu clasa Auth.
Implementarea manuală durează mai mult pentru a scrie, dar vă oferă un control complet asupra UI, dar și asupra funcționalității reale pe care doriți să o implementați.
Puteți afla mai multe despre autentificarea cu AWS Amplify în documentația proiectului.
Amazon S3 este un serviciu popular pentru stocarea de materiale media precum imagini și clipuri video, precum și pentru servicii back-end cum ar fi găzduirea de aplicații, copii de siguranță și livrarea de software.
AWS Amplify CLI ne permite să creăm, să configuram, să actualizăm și să ștergem cupele S3. În această secțiune vom examina modul de creare a unei găleți S3, precum și modul de încărcare și descărcare a imaginilor și a fișierelor în cupă.
Pentru a activa Storage, putem executa următoarea comandă:
amplificați adăugarea spațiului de stocare
Apoi, vi se va solicita să furnizați detalii despre configurație. Selectează Conținut (imagini, audio, video etc.) serviciu. Apoi, furnizați un nume de resursă specific proiectului (utilizat intern în proiect) și numele unei găleți (locația S3 unde vor fi stocate datele dvs.). În cele din urmă, accesul trebuie limitat la Auth utilizatori numai, și utilizatorilor autentificați Citeste, scrie acces.
Acum, spațiul de stocare a fost adăugat la configurația noastră și rulați amplifica împinge pentru a crea noile resurse din contul nostru:
amplifica împinge
Acest lucru va crea și configura o găleată Amazon S3 pe care o putem începe să o folosim pentru stocarea articolelor.
Dacă vrem să testăm acest lucru, putem stoca un text într-un fișier de genul:
import Storage de la 'aws-amplify' // crea funcția pentru a lucra cu Storage addToStorage = () => Storage.put ('javascript / MyReactComponent.js' > ( Salut Lume
) .chen (rezultat => console.log ('rezultat:', rezultat)) .catch (err => console.log ('eroare:', err)); // adăugați un handler pentru clicuri Acest lucru va crea un folder numit JavaScript în galeria noastră S3 și stocați un fișier numit MyReactComponent.js acolo cu codul specificat în al doilea argument al lui Storage.put.
Dacă vrem să citim totul din acest dosar, putem folosi Storage.list:
readfromStorage = () => Storage.list ('javascript /') .then (data => console.log ('data de la S3:', date)) .catch (err => console.log ) Dacă vrem doar să citim fișierul unic, putem folosi Storage.get:
(data => console.log ('date din S3:', date)) .catch (err => console.log (' eroare '))Dacă vrem să tragem totul, am putea folosi Storage.list:
(data => console.log ('date din S3:', date)) .catch (err => console.log ('error')Lucrul cu imaginile este, de asemenea, ușor. Iată un exemplu:
clasa S3ImageUpload extinde React.Component onChange (e) const file = e.target.files [0]; Storage.put ('example.png', fișier, contentType: 'image / png') .then (rezultat => console.log (rezultat)) .catch (err => console.log (err)); render () return ( această schimbare (e) />)În codul de mai sus, legăm o intrare a formularului de încărcare a fișierului la cu privire la schimbările organizatorul evenimentului. Când utilizatorul furnizează un fișier, Storage.put este chemat să încarce fișierul la S3 cu tip MIME image / png.
Pentru a implementa și a găzdui aplicația dvs. pe AWS, putem folosi hosting categorie.
amplifică adăugarea de găzduire
Din nou, vi se va solicita să furnizați câteva opțiuni de configurare:
Acum, totul este setat și putem publica aplicația:
amplifică publicarea
Dacă în orice moment doriți să ștergeți un serviciu din proiectul dvs. și din contul dvs., puteți face acest lucru executând amplifică eliminarea comanda și apoi împingând.
amplifică eliminarea auth amplifica împinge
Dacă nu sunteți sigur de ce servicii ați activat în orice moment, puteți rula amplifica starea comanda:
amplifica starea
amplifica starea vă va oferi lista de resurse care sunt activate în prezent în aplicația dvs..
AWS Amplify permite dezvoltatorilor să construiască aplicații full-stack și cloud-enabled mai ușor decât oricând înainte, permițând dezvoltatorilor să se repete rapid, direct din mediul lor front-end.
Aceasta este o parte dintr-o serie de două părți. În tutorialul următor, vom învăța cum să creați și să interacționați cu API-urile GraphQL și Serverless. Stați așa.
