Accentsconagua
Share
Cosa starai creandoIn questi tutorial, ti mostrerò come creare e interagire con un database GraphQL usando AWS AppSync e React Native. Questa app avrà funzionalità in tempo reale e offline, qualcosa che uscirà dalla confezione con AppSync. In questo post inizieremo configurando il back-end con AppSync.
Una cosa fantastica di AppSync è che utilizza GraphQL, uno standard aperto e un nuovo paradigma potente per il back-end web e mobile. Se vuoi saperne di più su GraphQL, su come differisce dalle API REST e su come può rendere più semplice il tuo lavoro come sviluppatore di app, consulta alcuni dei nostri contenuti GraphQL qui su Envato Tuts+.
In questi post, costruiremo un'app di viaggio chiamata Cities. Hai mai guardato uno spettacolo sul tuo canale alimentare preferito e hai visto un fantastico camion per il cibo, o parlato con un amico che è appena tornato da un viaggio ed era davvero eccitato per l'Owl Bar che ha visitato? Non ti preoccupare più, creeremo un'app per farti stare al passo con tutti quei posti interessanti che vuoi visitare, così come le città in cui si trovano.
Questa applicazione dimostrerà e implementerà tutte le funzionalità necessarie per creare un'applicazione React Native e GraphQL full-stack, real-world.
Controlla il repository GitHub del progetto di esempio per vedere l'app completata e seguirla.
AppSync offre un modo semplice per essere installato e funzionante con un server GraphQL scalabile in tempo reale senza dover creare e gestire tutto da solo.
All'interno della console AppSync, faremo di tutto, dalla creazione del nostro schema GraphQL al provisioning del nostro database e resolver. La console ha anche configurato Graphiql in modo che possiamo testare e interrogare il nostro database senza alcuna configurazione aggiuntiva.
Implementeremo questa configurazione sul nostro client, che ci fornirà un modo semplice per interagire con il nostro endpoint GraphQL!
AppSync ti consentirà di utilizzare uno dei tre tipi di resolver immediatamente disponibili: DynamoDB, Elasticsearch o AWS Lambda. Utilizzeremo DynamoDB in questo tutorial.
La prima cosa che dobbiamo fare è creare una nuova applicazione AppSync e aggiungere il nostro schema di base.
La nostra applicazione dovrà memorizzare due serie di dati: un elenco di città e un elenco di località che verranno associate alle singole città all'interno dell'elenco, pertanto il nostro schema avrà due tipi di dati principali (Città e posizione).
Per iniziare con AppSync, vai alla Console AWS e scegli AWS AppSync all'interno del Servizi menu a discesa.
Una volta nella dashboard di AppSync, dobbiamo fare clic su Crea API pulsante:
Ora, avremo la possibilità di dare un nome all'applicazione (sto chiamando la mia TravelApp) e scegliere il tipo di schema (costume o campione). Sceglieremo il costume opzione dello schema, quindi fare clic su Creare.
La schermata successiva sarà la dashboard per la nuova applicazione. Vedremo subito alcune informazioni utili, tra cui l'URL della nostra app e la modalità di autorizzazione. Sul lato sinistro, vedrai alcuni link: Schema, Interrogazioni, Origine dei dati, e impostazioni.
Dai un'occhiata alle opzioni qui prima di passare al passaggio successivo.
La prossima cosa che faremo è creare lo schema che vorremmo usare per la nostra applicazione. Ancora una volta, lo schema avrà a Città e Posizione digitare per iniziare.
Dall'editor, fai clic sul Schema scheda e creare il seguente schema di base con due tipi e una query e fare clic Salvare:
digita città id: ID! nome: stringa! paese: String! posizioni: [Posizione] tipo Località id: ID! ID città: ID! nome: stringa! info: String tipo Query fetchCity (id: ID!): City schema query: Query
Ora che abbiamo creato uno schema di base, dobbiamo allegare questo schema a un database!
AppSync rende questo estremamente facile. Clicca il Crea risorse pulsante sulla destra dello schermo. Avremo bisogno di due tabelle di database: una per contenere le nostre città e un'altra per contenere le nostre sedi.
Scegliere Città, accettare tutti i valori predefiniti e fare clic Creare. Noterai che questo aggiungerà automaticamente alcune query, mutazioni e iscrizioni utili al nostro schema!
Vai avanti e fai lo stesso per il Posizione risorsa. Abbiamo ora creato con successo due tabelle di database che accompagnano il nostro schema e anche alcune query di base, mutazioni, abbonamenti e resolver che mapperanno lo schema a tali tabelle (esploreremo i risolutori nella prossima sezione).
Diamo ora un'occhiata a ciò che è stato creato. Nel menu a sinistra, clicca su Origine dei dati.
Ora dovresti vedere le due origini dati che abbiamo appena creato!
Ora che abbiamo nuove Mutazioni e Iscrizioni create nel nostro schema, aggiungiamole alla nostra definizione dello schema.
Per fare ciò, scorrere fino alla fine dello schema e aggiornare la definizione dello schema al seguente:
schema query: Mutazione query: abbonamento Mutation: Subscription
Successivamente, possiamo testare tutto creando una mutazione e quindi una query. Nel Interrogazioni scheda, creare la seguente mutazione:
mutation createCity createCity (input: id: "00001" nome: "Seattle" paese: "USA") id
Questo aggiungerà un record per Seattle al tavolo della città, con un ID di 00001.
Quindi, crea una query per recuperare i dati:
query getCity getCity (id: "00001") id nome paese
Quando si fa clic sul pulsante di riproduzione arancione, è possibile scegliere di eseguire il createCity mutazione o il getCity query. Eseguili entrambi e dovresti vedere i dati della città di Seattle recuperati e visualizzati sul lato destro dello schermo.
Se vuoi vedere come questi dati sono rappresentati nel database, puoi esplorare la tabella di città DynamoDB collegata dal Origine dei dati linguetta.
Forse ti starai chiedendo come la query sia mappata al database in modo così perfetto. La risposta è risolutiva!
Se guardi il lato destro della dashboard di AppSync Schema scheda, vedrai una sezione intitolata Tipi di dati. Questo elenca tutti i tipi di dati all'interno del nostro schema. A destra di ogni campo, vediamo una voce etichettata Resolver.
I resolver sono fondamentalmente l'interfaccia tra lo schema e il database che stiamo attualmente utilizzando. Possiamo usare resolver per qualsiasi cosa, dal semplice recupero di oggetti a azioni complesse come il controllo dell'accesso a grana fine.
I resolver sono scritti in un DSL chiamato Velocity Templating Language (VTL). AppSync distribuirà automaticamente i risolutori di base alla creazione dell'origine dati, ma sono altamente configurabili. A questo punto, non abbiamo davvero bisogno di cambiare molto nei nostri risolutori, ma diamo un'occhiata a tre dei principali tipi di risolutori con cui probabilmente dovrai lavorare nel mondo reale. Questi sono collegati alle seguenti operazioni di base:
Nel Tipi di dati scheda, accanto alle definizioni dello schema, trova getCity sotto domanda, e fare clic su CityTable.
Questo dovrebbe portarti alla schermata di configurazione del resolver. Da questa schermata, vedrai che ci sono tre parti principali di un risolutore:
Il fonte di dati è la tabella con cui vorresti interagire.
Il richiesta modello di mappatura descrive come il database gestirà la richiesta.
Qui puoi scrivere il tuo modello di mappatura o scegliere tra una selezione di modelli prepopolati per azioni di base come ottenere o mettere un oggetto, tra le altre cose.
Qui, vedi il modello per ottenere un oggetto.
Il modello di mappatura delle risposte descrive come gestire la risposta dal database.
Nel nostro modello di risposta, fondamentalmente stiamo solo restituendo il context.result e avvolgendolo nel $ utils.toJson funzione utile. Questo è solo uno dei tanti strumenti ausiliari che estrae parte del boilerplate VTL. Vedere l'elenco completo dei metodi di utilità nella documentazione ufficiale.
Man mano che la tua applicazione diventa più complessa, la chiave per diventare abili in AppSync è quella di familiarizzare con i modelli di mappatura. Mi ci sono volute alcune ore per capire come funzionava tutto, ma dopo averlo sperimentato per un po 'ho potuto vedere quanto è potente.
Non abbiamo spazio qui per entrare in tutti i dettagli dei modelli di mappatura resolver, ma è possibile consultare il riferimento per il modello di mappatura Resolver Resolver e il riferimento per il modello di mappatura per saperne di più.
Per ora, passeremo e completeremo il nostro schema.
Abbiamo completato il nostro schema, ma abbiamo un ultimo passaggio prima di poter iniziare a interagire con il nostro nuovo endpoint GraphQL dalla nostra applicazione React Native!
Poiché archiviamo tutte le nostre posizioni in una tabella ma le interrogiamo in base alla città che stiamo visualizzando, dovremo creare un indice secondario per consentirci di interrogare in modo efficiente i luoghi con un particolare cityID.
Per creare un indice secondario, vai a Origine dei dati e fare clic su Tabella delle località collegamento ipertestuale.
Questo dovrebbe portarti alla vista tabella DynamoDB per la tabella delle posizioni. Qui, clicca il indici scheda e creare un nuovo indice con una chiave di partizione di cityID.
È possibile ridurre le unità di capacità di lettura e scrittura a 1 per gli scopi di questo tutorial.
Successivamente, dobbiamo aggiornare il nostro listLocations query per accettare questo cityID come argomento, quindi aggiorna la query per listLocations al seguente:
tipo Query // tutte le query precedenti omesse listLocations (cityId: ID !, first: Int, after: String): LocationConnection
Ora, dobbiamo aggiornare il nostro listLocations resolver per usare questo nuovo cityID indice! Ricorda, lo vogliamo davvero listLocations per restituire una serie di posizioni per la città che stiamo guardando, quindi il listLocations resolver prenderà il cityID come parametro e restituisce solo posizioni per quella città.
Per farlo funzionare, aggiorna il modello di mappatura delle richieste per listLocations essere il seguente:
"version": "2017-02-28", "operation": "Query", "index": "cityId-index", "query": "expression": "cityId =: cityId", "expressionValues" : ": cityId": "S": "$ ctx.args.cityId", "limit": #if ($ context.arguments.limit) $ context.arguments.limit #else 10 #end, "nextToken": #if ($ context.arguments.nextToken) "$ context.arguments.nextToken" #else null #end
In questo tutorial, abbiamo creato il back-end per un'app React Native con il proprio endpoint GraphQL. Abbiamo anche esaminato come creare e aggiornare resolver e lavorare con lo schema AppSync.
Ora che abbiamo finito di configurare tutto nella console, possiamo andare avanti e creare il nostro client React Native! Nel prossimo post, mi tuffo nell'app mobile React Native e ti mostrerò come collegare React Native a AppSync.
Nel frattempo, dai uno sguardo ad alcuni dei nostri altri post sullo sviluppo dell'app React Native!
Alcune immagini utilizzate con il credito di Amazon Web Services, Inc.
