Déployer une application Web sur Amazon Amplify

GUIDE DE DÉMARRAGE

Module 2 : Créer un frontend et connectez l'API

Dans ce module, vous apprendrez à ajouter une API à votre projet Amplify

Introduction

Dans ce module, vous créerez le frontend pour votre application Web et connecterez une API (interface de programmation d'application) à l'aide de l'API GraphQL. GraphQL est un langage de requête pour les API. Il vous permet de récupérer et de mettre à jour les données de votre application.

Vous apprendrez à

  • Créer une application frontend React de base
  • Appeler une API GraphQL à partir de votre application
  • Appeler une API à partir du frontend de votre application

 Durée

10 minutes

 Prérequis du module

  • Compte AWS avec accès administrateur**
  • Dernière version de Chrome ou de Firefox (recommandé)

[**] Il est possible que les comptes créés au cours des dernières 24 heures n'aient pas encore accès aux services nécessaires à ce tutoriel.

Implémentation

Installer les bibliothèques Amplify

Vous devez installer la bibliothèque React Amplify @aws-amplify/ui-react (contient les composants de l'interface utilisateur React). 

Exécutez la commande suivante pour l'installer :

npm install @aws-amplify/ui-react

Vous devez créer le frontend pour votre application. Ouvrez le fichier src/App.js et remplacez tout son contenu par le code suivant :

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 de votre application

Vous pouvez maintenant exécuter votre appli localement pour la tester :

npm start

Cela démarrera un serveur de développement à l'adresse http://localhost:3000 et ouvrira la page correspondante dans votre navigateur. Vous serez invité à vous inscrire avant de pouvoir utiliser le service. Ces données sont stockées dans la base de données de votre projet Congnito et personne en dehors de vous ne peut y accéder. Une fois que vous vous serez connecté, l'appli affichera uniquement une entête comportant l'Appli de notes et un bouton de Connexion puisque vous n'y avez encore rien ajouté. Ensuite, vous devrez ajouter une API à l'appli. Vous pouvez vous servir de la combinaison des touches Ctrl + C pour arrêter le serveur à nouveau.

gsg-build-amplify-2

Quelques commandes CLI et lignes de code nous ont permis de créer une application à page unique qui fonctionne grâce au flux de connexion. Cette application n'est encore qu'un squelette et vous ne pouvez pas encore vous y connecter. Ajoutez des fonctionnalités à votre application dans les sections suivantes.

Ajoutez une API GraphQL avec Amplify

Vous êtes maintenant sur le point d'ajouter une API à l'application. Amplify utilise AWS AppSync et Amazon DynamoDB pour alimenter les API GraphQL. AppSync est un service GraphQL géré qui s'occupe de notre API. En revanche, Amazon DynamoDB est une base de données NoSQL qui stocke les données utilisées par notre API.

Pour ajouter l'API, exécutez la commande amplify add api, puis choisissez les options suivantes pour les questions (la ligne commence par > symbole) - pendant cette étape, vous devrez fournir des informations relatives au fournisseur d'autorisation. Nous nous en servirons dans le guide suivant :

Un schéma GraphQL est une représentation d'un objet et ses domaines. Vous devez définir votre schéma GraphQL et Amplify se chargera de créer la table DynamoDB requise et de configurer GraphQL pour la gestion des lectures, des écritures, des mises à jour et des suppressions pour vous. Ouvrez le fichier amplify/backend/api/amplifyapp/schema.graphql et remplacez le contenu par :

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
Si vous avez entré Oui pour la modification du schéma, votre éditeur par défaut devrait ouvrir le fichier requis pour la section suivante.

Créer un schéma GraphQL

Un schéma GraphQL est une représentation d'un objet et ses domaines. Vous devez définir votre schéma GraphQL et Amplify se chargera de créer la table DynamoDB requise et de configurer GraphQL pour la gestion des lectures, des écritures, des mises à jour et des suppressions pour vous. Ouvrez le fichier amplify/backend/api/amplifyapp/schema.graphql et remplacez le contenu par :

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

Ce schéma définit un type de note avec l'identifiant et le texte requis par les champs. Il contient également des directives qui font partie de la bibliothèque de transformation GraphQL d'Amplify :

@model : Un type ayant l'annotation @model est stocké dans DynamoDB et dispose d'opérations CRUDL (créer, lire, mettre à jour, supprimer, répertorier) automatiquement créées pour cela.

@auth : Un type ayant l'annotation @auth est protégé par un ensemble de règles d'autorisation. Dans ce cas, nous utilisons l'autorisation propriétaire pour garantir que seul le propriétaire d'une note pourra y accéder et la modifier.

Déployer l'application

Vous pouvez maintenant déployer votre application Web Amplify en exécutant la commande amplify push. Cela lancera le téléchargement de votre application vers votre compte AWS pour vous. Amplify vous montrera également les modifications en cours de déploiement et vous demandera de confirmer le déploiement :

✔ 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

Après la confirmation, sélectionnez les valeurs par défaut pour les questions de suivi lorsque vous y êtes invité :

? 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

Le déploiement ne vous prendra que quelques minutes et vous verrez une liste de ressources en cours de création pour vous. Amplify effectue les actions suivantes :

  • Créer une API GraphQL supportée par AWS AppSync, ainsi que trois types d'opérations GraphQL (les requêtes, les mutations et les abonnements).
  • Générer du code dans le dossier src/graphql grâce aux opérations GraphQL nécessaires à la création, la récupération et la mise à jour de Notes.
  • Créer une table DynamoDB pour le stockage des Notes créées avec notre application.

Mise à jour du frontend de l'API à utiliser

Pour utiliser la nouvelle API déployée, actualisez le fichier src/App.js en remplaçant le contenu par le code suivant :

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' }
}

Votre application est désormais prête à fonctionner. La connexion à authentification multifacteur et l'application peuvent désormais communiquer avec l'API pour l'enregistrement, la mise à jour et la suppression de notes. Pour effectuer un test local, exécutez à nouveau la commande npm start et confirmez.

gsg-build-amplify-3

Conclusion

Dans ce module, vous avez appris à créer une application frontend React, à y ajouter une API et à déployer l'API sur votre compte AWS. Dans le module suivant, vous apprendrez à déployer le frontend depuis le répertoire GitHub, à configurer un pipeline CI/CD pour un déploiement automatique des futures modifications.

Prochainement : Automatisez le déploiement

Dites-nous si nous avons répondu à vos attentes.

Nous vous remercions pour votre commentaire
Nous sommes ravis que cette page vous ait été utile. Souhaitez-vous partager des détails supplémentaires pour nous aider à continuer à nous améliorer ?
Fermer
Nous vous remercions pour votre commentaire
Nous sommes désolés que cette page ne vous ait pas été utile. Souhaitez-vous partager des détails supplémentaires pour nous aider à continuer à nous améliorer ?
Fermer