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.

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
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.

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