Implementazione di un'applicazione Web su Amazon Amplify

GUIDA ALLE OPERAZIONI DI BASE

Modulo 2: Costruzione del frontend e connessione di un'API

In questo modulo imparerai ad aggiungere un'API al progetto Amplify

Introduzione

In questo modulo costruirai il frontend della tua applicazione web ed effettuerai la connessione a un'API (Application Programming Interface) tramite l'API GraphQL. GraphQL è un linguaggio di query per API utile a recuperare e aggiornare i dati dell'applicazione.

Argomenti affrontati

  • Creazione di un'applicazione frontend React di base
  • Chiamata di un'API GraphQL dall'applicazione
  • Chiamata dell'API dal frontend dell'applicazione

 Tempo richiesto per il completamento

10 minuti

 Prerequisiti del modulo

  • Account AWS con accesso da amministratore**
  • Browser consigliato: l'ultima versione di Chrome o Firefox

[**]Gli account creati nelle ultime 24 ore potrebbero non avere ancora accesso a tutti servizi richiesti per questo tutorial.

Implementazione

Installazione di librerie Amplify

È necessario installare la libreria React di Amplify @aws-amplify/ui-react (contiene i componenti UI di React). 

Esegui il seguente comando per installarla:

npm install @aws-amplify/ui-react

Ora è necessario installare il frontend per l'applicazione. Apri il file src/App.js e sostituisci l'intero contenuto con il seguente codice:

import { withAuthenticator, AmplifySignOut } from '@aws-amplify/ui-react';
import Amplify from 'aws-amplify';
import awsExports from './aws-exports';

Amplify.configure(awsExports);

function App() {
  return (
    <div>
      <h1>Notes App</h1>
      <AmplifySignOut />
    </div>
  );
}

export default withAuthenticator(App);

Test dell'applicazione

Ora puoi eseguire l'app localmente per testarla:

npm start

Ciò avvierà un server di sviluppo su http://localhost:3000 e aprirà la pagina nel browser. Ti sarà richiesto di registrarti prima di poter utilizzare il servizio. Questi dati vengono archiviati nel database Cognito del progetto e solo tu puoi accedervi. Una volta effettuato l'accesso, l'app mostrerà solo un'intestazione con Notes App (App di appunti) e un pulsante Sign In (Accedi) poiché ancora non vi hai aggiunto nulla. Successivamente, aggiungerai un'API all'app. Puoi utilizzare ctrl + c per arrestare nuovamente il server.

gsg-build-amplify-2

Con pochi e semplici comandi della CLI e righe di codice, abbiamo creato un'applicazione a pagina singola funzionante con flusso di accesso. Quest'applicazione è solo uno scheletro e l'accesso non è ancora funzionante. Continua ad aggiungere funzionalità all'applicazione nelle sezioni seguenti.

Aggiunta di un'API GraphQL con Amplify

Ora aggiungerai un API all'applicazione. Amplify utilizza AWS AppSync e Amazon DynamoDB per consentire il funzionamento delle API GraphQL. AppSync è un servizio GraphQL gestito che si occupa della gestione dell'API, mentre Amazon DynamoDB è un database NoSQL che archivia i dati utilizzati dall'API.

Per aggiungere l'API, esegui amplify add api e scegli le seguenti opzioni per rispondere alle domande (le righe iniziano con il simbolo >). Durante questa fase, saranno poste delle domande riguardo al fornitore dell'autorizzazione: ciò sarà utilizzato in una guida futura:

Uno schema GraphQL è una rappresentazione di un oggetto e dei relativi campi. È necessario definire lo schema GraphQL, mentre Amplify creerà la necessaria tabella DynamoDB e configurerà GraphQL affinché gestisca letture, scritture, aggiornamenti ed eliminazioni per te. Apri il file amplify/backend/api/amplifyapp/schema.graphql e sostituisci i contenuti con quanto segue:

amplify add api

? Please select from one of the below mentioned services:
❯ GraphQL
  REST
? Provide API name: amplifyapp
? Choose the default authorization type for the API
  API key
❯ Amazon Cognito User Pool
  IAM
  OpenID Connect
? Do you want to configure advanced settings for the GraphQL API
? Do you want to use the default authentication and security configuration?
❯ Default configuration
  Default configuration with Social Provider (Federation)
  Manual configuration
  I want to learn more.
? How do you want users to be able to sign in?
 ◯ Email
❯◉ Username
 ◯ Phone number
? Do you want to configure advanced settings?
❯ No, I am done.
  Yes, I want to make some additional changes.
? Do you have an annotated GraphQL schema? No
? Choose a schema template:
❯ Single object with fields (e.g., “Todo” with ID, name, description)
  One-to-many relationship (e.g., “Blogs” with “Posts” and “Comments”)
  Objects with fine-grained access control (e.g., a project management app with owner-bas
ed authorization)
? Do you want to edit the schema now? Yes
Se hai digitato Yes (Sì) alla richiesta se modificare lo schema ora, l'editor predefinito dovrebbe aprire il file necessario per la prossima sezione.

Creazione di uno schema GraphQL

Uno schema GraphQL è una rappresentazione di un oggetto e dei relativi campi. È necessario definire lo schema GraphQL, mentre Amplify creerà la necessaria tabella DynamoDB e configurerà GraphQL affinché gestisca letture, scritture, aggiornamenti ed eliminazioni per te. Apri il file amplify/backend/api/amplifyapp/schema.graphql e sostituisci i contenuti con quanto segue:

type Note @model @auth(rules: [{ allow: owner }]) {
  id: ID!
  text: String!
}

Questo schema definisce un tipo di nota con id e text come campi obbligatori. Contiene inoltre delle direttive che fanno parte della libreria GraphQL transform di Amplify:

@model: un tipo con annotazione @model viene archiviato in DynamoDB e per esso vengono automaticamente create delle operazioni CRUDL (create, read, update, delete, list).

@auth: un tipo con annotazione @auth è protetto da un insieme di regole di autorizzazione. In questo caso, utilizziamo l'autorizzazione proprietario per fare in modo che solo il proprietario di una nota possa accedervi e modificarla.

Implementazione dell'applicazione

Ora tutto è pronto per implementare l'applicazione Web Amplify eseguendo amplify push. Tale comando caricherà l'applicazione sull'account AWS per te e Amplify mostrerà le modifiche che saranno implementate e ti chiederà di confermare l'implementazione:

✔ Successfully pulled backend environment dev from the cloud.

Current Environment: dev
    
┌──────────┬────────────────────┬───────────┬───────────────────┐
│ Category │ Resource name      │ Operation │ Provider plugin   │
├──────────┼────────────────────┼───────────┼───────────────────┤
│ Auth     │ amplifyapp6177aede │ Create    │ awscloudformation │
├──────────┼────────────────────┼───────────┼───────────────────┤
│ Api      │ amplifyapp         │ Create    │ awscloudformation │
└──────────┴────────────────────┴───────────┴───────────────────┘
? Are you sure you want to continue? Yes

Dopo aver confermato, seleziona i valori di default per rispondere alle domande successive quando richiesto:

? Do you want to generate code for your newly created GraphQL API Yes
? Choose the code generation language target javascript
? Enter the file name pattern of graphql queries, mutations and subscriptions src/graphql/**/*.js
? Do you want to generate/update all possible GraphQL operations - queries, mutations and subscriptions Yes
? Enter maximum statement depth [increase from default if your schema is deeply nested] 2

Saranno necessari alcuni minuti per l'implementazione e visualizzerai un elenco di risorse in fase di creazione. Amplify ha effettuato le seguenti azioni:

  • Ha creato un'API GraphQL, supportata da AWS AppSync, con tutti e tre i tipi di operazioni GraphQL (query, mutazioni e operazioni).
  • Ha generato il codice nella cartella src/graphql/ utilizzando le operazioni GraphQL necessarie per creare, recuperare e aggiornare le note.
  • Ha creato una tabella DynamoDB per archiviare ogni nota creata con l'applicazione.

Aggiornamento del frontend per utilizzare l'API

Per utilizzare la nuova API appena implementata, aggiorna il file src/App.js sostituendo i contenuti con il codice seguente:

import { Component } from 'react';
import Amplify, { API, graphqlOperation } from 'aws-amplify';
import { createNote, deleteNote } from './graphql/mutations';
import { listNotes } from './graphql/queries';

import { withAuthenticator, AmplifySignOut } from '@aws-amplify/ui-react';
import awsExports from './aws-exports';

Amplify.configure(awsExports);

class AddNote extends Component {
  constructor(props) {
    super(props);
    this.state = { text: '' };
  }

  handleChange = (event) => {
    this.setState({ text: event.target.value });
  }

  handleClick = () => {
    this.props.addNote(this.state);
    this.setState({ text: '' });
  }

  render() {
    return (
      <div style={styles.form}>
        <input
          value={this.state.text}
          onChange={this.handleChange}
          placeholder="New Note"
          style={styles.input}
        />
        <button onClick={this.handleClick} style={styles.addButton}>Add Note</button>
      </div>
    );
  }
}

class NotesList extends Component {
  render() {
    return (
      <div>
        {this.props.notes.map(note =>
          <div key={note.id} style={styles.note}>
            <p>{note.text}</p>
            <button onClick={() => { this.props.deleteNote(note) }} style={styles.deleteButton}>x</button>
          </div>
        )}
      </div>
    );
  }
}

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { notes: [] };
  }

  async componentDidMount() {
    var result = await API.graphql(graphqlOperation(listNotes));
    this.setState({ notes: result.data.listNotes.items });
  }

  deleteNote = async (note) => {
    const id = {
      id: note.id
    };
    await API.graphql(graphqlOperation(deleteNote, { input: id }));
    this.setState({ notes: this.state.notes.filter(item => item.id !== note.id) });
  }

  addNote = async (note) => {
    var result = await API.graphql(graphqlOperation(createNote, { input: note }));
    this.state.notes.push(result.data.createNote);
    this.setState({ notes: this.state.notes });
  }

  render() {
    return (
      <div style={styles.container}>
        <h1>Notes App</h1>
        <AddNote addNote={this.addNote} />
        <NotesList notes={this.state.notes} deleteNote={this.deleteNote} />
        <AmplifySignOut />
      </div>
    );
  }
}

export default withAuthenticator(App);

const styles = {
  container: { width: 480, margin: '0 auto', padding: 20 },
  form: { display: 'flex', marginBottom: 15 },
  input: { flexGrow: 2, border: 'none', backgroundColor: '#ddd', padding: 12, fontSize: 18 },
  addButton: { backgroundColor: 'black', color: 'white', outline: 'none', padding: 12, fontSize: 18 },
  note: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 22, marginBottom: 15 },
  deleteButton: { fontSize: 18, fontWeight: 'bold' }
}

Ora disponi di un'applicazione funzionante. Accedi con l'autenticazione a più fattori e l'applicazione può ora comunicare con l'API per salvare, aggiornare o eliminare note. Per testarla localmente, esegui nuovamente npm start per confermare.

gsg-build-amplify-3

Conclusione

In questo modulo hai imparato come creare un'applicazione frontend React, aggiungervi un'API e implementare l'API nell'account AWS. Nel prossimo modulo, imparerai come implementare il frontend da un repository GitHub e configurare una pipeline CI/CD per implementare automaticamente le modifiche future.

A seguire: automatizzazione dell'implementazione

Facci sapere com'è andata.

Grazie per il tuo feedback
Siamo contenti che questa pagina ti sia stata d’aiuto. Vuoi condividere ulteriori dettagli per aiutarci a continuare a migliorare?
Chiudi
Grazie per il tuo feedback
Ci dispiace che questa pagina non ti sia stata d'aiuto. Vuoi condividere ulteriori dettagli per aiutarci a continuare a migliorare?
Chiudi