Accentsconagua
Share
Ce veți creaÎn aceste tutoriale, vă vom arăta cum să creați și să interacționați cu o bază de date GraphQL utilizând AWS AppSync și React Native. Această aplicație va avea funcționalități în timp real și offline, ceva ce ieșim din cutie cu AppSync. În acest post vom începe prin a configura back-end-ul cu AppSync.
Un lucru minunat despre AppSync este faptul că utilizează GraphQL - un standard deschis și o nouă paradigmă puternică pentru back-end-ul web și mobil. Dacă doriți să aflați mai multe despre GraphQL, cum diferă de API-urile REST și cum vă poate face munca mai ușoară ca dezvoltator de aplicații, consultați câteva dintre conținuturile noastre din GraphQL aici pe Envato Tuts+.
În aceste postări, vom construi o aplicație de călătorie numită Orașe. Ați urmărit vreodată un spectacol pe canalul dvs. preferat de alimente și ați văzut un camion minunat de hrană sau ați vorbit cu un prieten care tocmai sa întors de la o călătorie și a fost foarte entuziasmat de Barul Owl pe care la vizitat? Nu ne mai răsfățați, vom construi o aplicație pentru a vă ține pasul cu toate locurile minunate pe care doriți să le vizitați, precum și orașele în care se află.
Această aplicație va demonstra și va implementa toate funcționalitățile de care veți avea nevoie pentru a construi o aplicație React React Nativă și GraphQL în reale,.
Consultați replica GitHub a exemplului proiectului, pentru a vedea aplicația finalizată și pentru a continua.
AppSync oferă o modalitate ușoară de a obține și de a funcționa cu un server GraphQL scalabil, în timp real, fără a fi nevoie să creați și să o întrețineți pe cont propriu.
În cadrul consolei AppSync, vom face totul, de la crearea schemei GraphQL la furnizarea bazei de date și a rezolvărilor. Consola are și Graphiql, astfel încât să putem testa și interoga baza de date fără nici o configurație suplimentară.
Vom implementa această configurație pe clientul nostru, ceea ce ne va oferi un mod neîntrerupt de a interacționa cu punctul nostru final GraphQL!
AppSync vă va permite să utilizați unul dintre cele trei tipuri de rezolvatori din cutie: DynamoDB, Elasticsearch sau AWS Lambda. Vom folosi DynamoDB în acest tutorial.
Primul lucru pe care trebuie să-l facem este să creați o nouă aplicație AppSync și să adăugați schema noastră de bază.
Aplicația noastră va trebui să stocheze două seturi de date - o listă de orașe și o listă de locații pe care le vom asocia cu anumite orașe din listă - astfel încât schema noastră va avea două tipuri principale de date (City & Location).
Pentru a începe cu AppSync, accesați Consola AWS și alegeți AWS AppSync în cadrul Servicii meniul derulant.
Odată ce ne aflăm în tabloul de bord AppSync, trebuie să faceți clic pe Creați API buton:
Acum, vom avea opțiunea de a da aplicației un nume (numesc a mea TravelApp) și alegeți tipul de schemă (personalizat sau probă). Vom alege personalizat opțiune schemă, apoi faceți clic pe Crea.
Următorul ecran va fi tabloul de bord pentru noua aplicație. Vom vedea imediat câteva informații utile, inclusiv adresa URL a aplicației noastre, precum și modul de autorizare. În partea stângă, veți vedea câteva linkuri: Schemă, Întrebări, Surse de date, și Setări.
Aruncați o privire în jurul opțiunilor aici înainte de a trece la pasul următor.
Următorul lucru pe care îl vom face este să creăm schema pe care am dori să o folosim pentru aplicația noastră. Din nou, schema va avea a Oraș și Locație tastați pentru a începe.
Din editor, faceți clic pe Schemă și creați următoarea schemă de bază cu două tipuri și o interogare și faceți clic pe Salvați:
tip City id: ID! Nume: String! țară: String! locații: [Locație] tip Locație id: ID! Oraș: Id! Nume: String! info: String type Interogare fetchCity (id: ID!): City schema interogare: Interogare
Acum, că avem o schemă de bază creată, trebuie să atașăm această schemă la o bază de date!
AppSync face acest lucru extrem de ușor. Apasă pe Creați resurse din partea dreaptă a ecranului. Vom avea nevoie de două tabele de baze de date: unul pentru a ne ține orașele și altul pentru a ne ține locurile.
Alege Oraș, acceptați toate valorile implicite și dați clic pe Crea. Veți observa că acest lucru va adăuga în mod automat câteva interogări, mutații și abonamente utile în schema noastră!
Continuați și faceți același lucru pentru Locație resursă. Acum am creat cu succes două tabele de baze de date care merg împreună cu schema noastră, precum și câteva interogări de bază, mutații, abonamente și rezolvatori care vor cartografia schema la aceste tabele (vom explora rezolvarea în secțiunea următoare).
Să aruncăm o privire la ceea ce a fost creat. În meniul din stânga, faceți clic pe Surse de date.
Ar trebui să vedeți acum cele două surse de date pe care tocmai le-am creat!
Acum, când avem noi mutări și abonamente create în schema noastră, să le adăugăm în definiția noastră de schemă.
Pentru a face acest lucru, derulați în partea de jos a Schemei și actualizați definiția schemei la următoarele:
schema interogare: mutație interogare: abonament de mutare: abonament
În continuare, putem testa totul prin crearea unei mutații și apoi a unei interogări. În Întrebări filă, creați următoarea mutație:
mutație createCity createCity (introducere: id: "00001" nume: "Seattle" țară: "USA") id
Acest lucru va adăuga un record pentru Seattle la masa orașului, cu un id de 00001.
Apoi, creați o interogare pentru a prelua aceste date:
interogare getCity getCity (id: "00001") numele țării
Când faceți clic pe butonul portocaliu de redare, puteți alege să executați createCity mutație sau getCity interogare. Porniți-le pe amândouă și ar trebui să vedeți datele despre orașul Seattle preluate și afișate în partea dreaptă a ecranului.
Dacă doriți să vedeți cum sunt reprezentate aceste date în baza de date, puteți explora tabelul orașului DynamoDB conectat din Surse de date fila.
S-ar putea să vă întrebați cum interoghează hărțile de interogare la baza de date, astfel încât să fie fără probleme. Răspunsul este rezolvarea!
Dacă te uiți la partea dreaptă a tabloului de bord AppSync Schemă , veți vedea o secțiune intitulată Tipuri de date. Aceasta afișează toate tipurile de date din schema noastră. În partea dreaptă a fiecărui câmp, vedem o rubrică etichetă rezolvitorului.
Rezolvatorii sunt în principiu interfața dintre schemă și baza de date pe care o folosim în prezent. Putem folosi resolvers pentru totul, de la recuperarea de bază a elementelor la acțiuni complexe precum controlul accesului cu granulație fină.
Rezoluții sunt scrise într-un DSL numit Velocity Templating Language (VTL). Aplicația AppSync va furniza automat rezolvatori de bază în momentul creării unei baze de date, dar acestea sunt foarte configurabile. În acest moment, nu avem nevoie să schimbăm foarte mult în rezolvările noastre, ci să aruncăm o privire asupra a trei dintre principalele tipuri de rezolvatori cu care va trebui probabil să lucrați în lumea reală. Acestea sunt conectate la următoarele operații de bază:
În Tipuri de date tab, lângă definițiile schemei, găsiți getCity sub întrebare, și faceți clic pe CityTable.
Acest lucru ar trebui să vă ducă la ecranul de configurare a resolverului. Din acest ecran, veți vedea că există trei piese principale la un resolver:
sursă de date este tabelul cu care doriți să interacționați.
cereți șablon de mapare descrie modul în care baza de date va gestiona cererea.
Aici puteți scrie propriul șablon de mapare sau puteți alege dintr-o selecție de șabloane prepopulate pentru acțiuni de bază cum ar fi obținerea sau plasarea unui element, printre altele.
Aici vedeți șablonul pentru obținerea unui element.
șablon de mapare a răspunsului descrie modul de gestionare a răspunsului din baza de date.
În șablonul nostru de răspuns, suntem de fapt doar întoarcerea context.result și înfășurați-l în $ utils.toJson Functie utilitara. Acesta este doar unul dintre utilitățile de ajutor care vor elimina o parte din boilerele VTL. Consultați lista completă a metodelor de utilitate din documentația oficială.
Pe măsură ce aplicația dvs. devine mai complexă, cheia pentru a vă familiariza cu AppSync se simte confortabilă cu lucrul cu aceste șabloane de mapare. Mi-a trebuit câteva ore să-mi înfășez capul în jurul valorii de funcționare, dar după ce am experimentat-o puțin timp, am putut vedea cât de puternic este.
Nu avem spațiu aici pentru a intra în toate detaliile șabloanelor de mapare a resolverilor, dar puteți să consultați referința referitor la șablon de referință pentru rezolvarea resolverului și referință de context pentru șablon de mapare pentru a afla mai multe despre ele.
Pentru moment, vom trece mai departe și vom completa schema noastră.
Am finalizat schema noastră, dar avem un ultim pas înainte de a începe să interacționăm cu noul nostru punct final GraphQL din aplicația React Native!
Pentru că o să stocăm toate locațiile într-o singură masă, dar să le interogăm în funcție de orașul pe care îl vedem în prezent, va trebui să creăm un index secundar care să ne permită să interogăm eficient locațiile cu o anumită cityId.
Pentru a crea un index secundar, mergeți la Surse de date și faceți clic pe Tabela de localizare hyperlink.
Acest lucru ar trebui să vă ducă la vizualizarea din tabelul DynamoDB pentru tabela de locație. Aici faceți clic pe Indici ai și creați un index nou cu o cheie de partiție cityId.
Puteți reduce numărul de unități de citire și scriere la 1 în scopul acestui tutorial.
Apoi, trebuie să ne actualizăm listLocations interogare pentru a accepta acest lucru cityId ca argument, actualizați astfel interogarea pentru listLocations la următoarele:
tip Interogare // toate interogările anterioare omit listLocations (cityId: ID !, primul: Int, după: String): LocationConnection
Acum, trebuie să ne actualizăm listLocations resolver pentru a utiliza acest nou cityId index! Amintiți-vă, noi chiar dorim listLocations pentru a reveni la o serie de locații pentru orașul în care ne uităm, așa că listLocations resolver va lua cityId ca parametru și numai locații de întoarcere pentru acel oraș.
Pentru a face acest lucru, să actualizăm șablonul de mapare a solicitărilor pentru listLocations să fie următoarele:
"versiune": "2017-02-28", "operație": "interogare", "index": "cityId-index", "interogare" : ": cityId": "S": "$ ctx.args.cityId", "limit": #if ($ context.arguments.limit) $ context.arguments.limit # "nextToken": #if ($ context.arguments.nextToken) "$ context.arguments.nextToken" #else null #end
În acest tutorial, am creat back-end-ul pentru o aplicație React Native cu propriul punct final GraphQL. De asemenea, am analizat modul de creare și actualizare a resolverilor și de a lucra cu schema AppSync.
Acum, când am terminat de configurat totul în consola, putem continua să creăm clientul React Native! În următorul post, mă arunc în aplicația mobilă React Nativă și vă arăt cum să cârlig Reactiva Nativă până la AppSync.
Între timp, verificați câteva dintre celelalte postări despre dezvoltarea aplicațiilor Reactive Native!
Unele imagini utilizate cu credit de la Amazon Web Services, Inc.
