Nozioni di base su AWS

Creazione di un'applicazione React

Crea una semplice applicazione Web utilizzando AWS Amplify

Modulo 4: Aggiunta di un'API GraphQL e di un database

In questo modulo verrà utilizzata l'interfaccia a riga di comando (CLI) di Amplify per configurare e aggiungere un'API GraphQL alla tua app.

Introduzione

Ora che abbiamo creato e configurato l'app con l'autenticazione, aggiungiamo un'API.

In questo modulo aggiungerai un'API alla tua app usando l'interfaccia a riga di comando (CLI) e le librerie di Amplify. L'API che creerai è un'API GraphQL che sfrutta AWS AppSync (un servizio GraphQL gestito) che è gestito da Amazon DynamoDB (un database NoSQL). (Per un'introduzione a GraphQL, visita questa pagina.)

L'app che creeremo sarà un'app taccuino che consentirà agli utenti di creare, eliminare ed elencare appunti. Questo esempio vi darà una buona idea su come creare molti tipi famosi di applicazioni CRUD+L (crea, leggi, aggiorna, elimina ed elenca).

Avrai modo di approfondire i seguenti aspetti

  • Creazione e distribuzione di un'API GraphQL
  • Scrittura di un codice front-end per interagire con l'API

Concetti chiave

API: fornisce un'interfaccia di programmazione che consente la comunicazione e le interazioni tra più intermediari software.

GraphQL: un linguaggio di query e un'implementazione API lato server basati su una rappresentazione tipizzata dell'applicazione. Questa rappresentazione API viene dichiarata usando uno schema basato sul tipo di sistema GraphQL. (Per ulteriori informazioni su GraphQL, visita questa pagina.)

 Tempo richiesto per il completamento

15 minuti

 Servizi utilizzati

Implementazione

  • Creare un'API GraphQL e un database

    a. Aggiungi un'API GraphQL API alla tua app eseguendo il seguente comando dalla cartella root della directory della tua app:

    amplify add api
    
    ? Please select from one of the below mentioned services: GraphQL
    ? Provide API name: notesapp
    ? Choose the default authorization type for the API: API Key
    ? Enter a description for the API key: demo
    ? After how many days from now the API key should expire: 7 (or your preferred expiration)
    ? Do you want to configure advanced settings for the GraphQL API: No, I am done.
    ? Do you have an annotated GraphQL schema?  No
    ? Do you want a guided schema creation?  Yes
    ? What best describes your project: Single object with fields
    ? Do you want to edit the schema now? Yes

    b. Apri lo schema GraphQL nel tuo editor di testo: amplify/backend/api/myapi/schema.graphql.

    Aggiorna il file con il seguente schema:

    type Note @model {
      id: ID!
      name: String!
      description: String
    }
    

    c. Salva il file. Quindi torna alla riga di comando e premi Invio per completare la fase di configurazione dell'API.

  • Distribuzione dell'API

    Ora che l'API è stata configurata localmente, è il momento di distribuirla. Per farlo, premi il comando push di Amplify:

    amplify push --y

    Questo compirà tre azioni:

    1. Creazione dell'API AppSync
    2. Creazione di una tabella DynamoDB
    3. Creazione di operazioni GraphQL locali in una cartella in src/graphql che possono essere usate per eseguire query sull'API

    Per visualizzare l'API GraphQL nel tuo account in qualsiasi momento, esegui il seguente comando:

    amplify console api
    
    > Choose GraphQL
    

    Per visualizzare l'app Amplify nel tuo account in qualsiasi momento, esegui il seguente comando:

    amplify console
  • Scrittura di un codice front-end per interagire con l'API

    Ora che il back-end è stato distribuito, scriviamo qualche codice per consentire agli utenti di creare, elencare ed eliminare appunti.

    Aggiorna src/App.js con il seguente codice:

    import React, { useState, useEffect } from 'react';
    import './App.css';
    import { API } from 'aws-amplify';
    import { withAuthenticator, AmplifySignOut } from '@aws-amplify/ui-react';
    import { listNotes } from './graphql/queries';
    import { createNote as createNoteMutation, deleteNote as deleteNoteMutation } from './graphql/mutations';
    
    const initialFormState = { name: '', description: '' }
    
    function App() {
      const [notes, setNotes] = useState([]);
      const [formData, setFormData] = useState(initialFormState);
    
      useEffect(() => {
        fetchNotes();
      }, []);
    
      async function fetchNotes() {
        const apiData = await API.graphql({ query: listNotes });
        setNotes(apiData.data.listNotes.items);
      }
    
      async function createNote() {
        if (!formData.name || !formData.description) return;
        await API.graphql({ query: createNoteMutation, variables: { input: formData } });
        setNotes([ ...notes, formData ]);
        setFormData(initialFormState);
      }
    
      async function deleteNote({ id }) {
        const newNotesArray = notes.filter(note => note.id !== id);
        setNotes(newNotesArray);
        await API.graphql({ query: deleteNoteMutation, variables: { input: { id } }});
      }
    
      return (
        <div className="App">
          <h1>My Notes App</h1>
          <input
            onChange={e => setFormData({ ...formData, 'name': e.target.value})}
            placeholder="Note name"
            value={formData.name}
          />
          <input
            onChange={e => setFormData({ ...formData, 'description': e.target.value})}
            placeholder="Note description"
            value={formData.description}
          />
          <button onClick={createNote}>Create Note</button>
          <div style={{marginBottom: 30}}>
            {
              notes.map(note => (
                <div key={note.id || note.name}>
                  <h2>{note.name}</h2>
                  <p>{note.description}</p>
                  <button onClick={() => deleteNote(note)}>Delete note</button>
                </div>
              ))
            }
          </div>
          <AmplifySignOut />
        </div>
      );
    }
    
    export default withAuthenticator(App);
    

    Nella nostra app sono disponibili tre funzioni principali:

    1. fetchNotes: questa funzione usa la classe dell'API per inviare una query all'API GraphQL e recuperare un elenco di appunti.
    2. createNote: anche questa funzione usa la classe dell'API per inviare una modifica all'API GraphQL API, la differenza principale è che in questa funzione stiamo fornendo le variabili necessarie per una modifica GraphQL in modo da poter creare una nuova nota con i dati del modulo.
    3. deleteNote: come createNote, questa funzione invia una modifica GraphQL insieme ad alcune variabili, ma invece di creare una nota se ne elimina una.
  • Eseguire l'app

    Per testare l'app, esegui il comando di avvio:

    npm start

Conclusione

Ora hai creato un'app taccuino! Usando AWS Amplify hai aggiunto un'API GraphQL e hai configurato le funzionalità di creazione, lettura ed eliminazione nella tua app. Nel prossimo modulo aggiungeremo un servizio di storage alla tua app.

Questo modulo è stato utile?

Grazie
Facci sapere cosa ti è piaciuto.
Chiudi
Spiacenti di non esserti stati d'aiuto
C'è qualcosa di obsoleto, ambiguo o approssimativo? Aiutaci a migliorare questo tutorial con il tuo feedback.
Chiudi

Aggiungi storage