Mise en route avec AWS

Développer une application React

Créer une application Web simple avec AWS Amplify

Module 5 : Augmenter la capacité de stockage

Dans ce module, vous apprendrez à augmenter la capacité de stockage et à associer une image avec les notes dans votre application.

Introduction

Maintenant que les notes fonctionnent dans l'application, apprenons à associer une image à chaque note. Dans ce module, vous utiliserez l'interface de ligne de commande Amplify et les bibliothèques pour créer un service de stockage qui exploite Amazon S3. Vous pourrez ensuite mettre à jour le schéma GraphSQL que vous avez créé dans le module précédent pour associer une image à chaque note. Et pour finir, vous mettrez à jour l'application React pour autoriser le téléchargement, la récupération et le rendu d'images.

Ce que vous apprendrez

  • Créer un service de stockage
  • Mettre à jour un schéma GraphQL
  • Mettre à jour votre application React

Concepts clés

Service de stockage :le stockage et la requête de fichiers, tels que des images et des vidéos, sont des exigences communes à la plupart des applications. L'une des solutions consiste à encoder le fichier en Base64 et à l'envoyer en tant que chaîne à sauvegarder dans la base de données. Cela présente toutefois des inconvénients, notamment le fait que le fichier codé est plus volumineux que le binaire d'origine, que l'opération est coûteuse en calculs et que le codage et le décodage sont plus complexes. Une autre option consiste à disposer d'un service de stockage spécialement conçu et optimisé pour le stockage de fichiers. Les services de stockage, comme Amazon S3, assurent ces opérations de manière facile, performante et aussi peu coûteuse que possible.

 Durée nécessaire

10 minutes

 Services utilisés

Mise en œuvre

  • Créer le service de stockage

    Pour ajouter une fonctionnalité de stockage d'images, nous utiliserons la catégorie de stockage Amplify :

    amplify add storage
    
    ? Please select from one of the below mentioned services: Content
    ? Please provide a friendly name for your resource that will be used to label this category in the project: imagestorage
    ? Please provide bucket name: <your-unique-bucket-name>
    ? Who should have access: Auth users only
    ? What kind of access do you want for Authenticated users? create, read, update, delete
    ? Do you want to add a Lambda Trigger for your S3 Bucket? N
  • Mettre à jour le schéma GraphQL

    Ensuite, ouvrez amplify/backend/api/notesapp/schema.graphql et mettez à jour avec le schéma suivant :

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

    Veillez à bien enregistrer le fichier.

  • Déployer le service de stockage et les mises à jour des API

    Maintenant que le service de stockage a été configuré localement et que nous avons mis à jour le schéma GraphSQL, nous pouvons déployer les mises à jour en exécutant la commande push Amplify :

    amplify push --y
  • Mettre à jour l'application React

    Maintenant que le backend a été mis à jour, mettons à jour l'application React pou ajouter la fonctionnalité qui permet de télécharger et d'afficher des images dans une note. Ouvrez src/App.js et effectuez les modifications suivantes.

    a. Pour commencer, ajoutez la classe de stockage à vos importations Amplify :

    import { API, Storage } from 'aws-amplify';

    b. Dans la fonction App principale, créez une fonction onChange pour gérer le téléchargement des images :

    async function onChange(e) {
      if (!e.target.files[0]) return
      const file = e.target.files[0];
      setFormData({ ...formData, image: file.name });
      await Storage.put(file.name, file);
      fetchNotes();
    }
    

    c. Mettez à jour la fonction fetchNotes qui permet de récupérer une image si une image est associée à une note :

    async function fetchNotes() {
      const apiData = await API.graphql({ query: listNotes });
      const notesFromAPI = apiData.data.listNotes.items;
      await Promise.all(notesFromAPI.map(async note => {
        if (note.image) {
          const image = await Storage.get(note.image);
          note.image = image;
        }
        return note;
      }))
      setNotes(apiData.data.listNotes.items);
    }
    

    d. Mettez à jour la fonction createNote pour ajouter l'image au tableau d'images locales si une image est associée à la note :

    async function createNote() {
      if (!formData.name || !formData.description) return;
      await API.graphql({ query: createNoteMutation, variables: { input: formData } });
      if (formData.image) {
        const image = await Storage.get(formData.image);
        formData.image = image;
      }
      setNotes([ ...notes, formData ]);
      setFormData(initialFormState);
    }
    

    e. Ajoutez une entrée supplémentaire au formulaire dans le bloc de retour :

    <input
      type="file"
      onChange={onChange}
    />
    

    f. Lors du mappage avec le tableau de notes, générez une image si elle existe :

    {
      notes.map(note => (
        <div key={note.id || note.name}>
          <h2>{note.name}</h2>
          <p>{note.description}</p>
          <button onClick={() => deleteNote(note)}>Delete note</button>
          {
            note.image && <img src={note.image} style={{width: 400}} />
          }
        </div>
      ))
    }
    
  • Exécuter l'application

    Pour tester l'application, exécutez la commande Start :

    npm start

    Vous devriez désormais pouvoir charger une image pour chaque note en option.

Conclusion

Vous avez déployé une application Web en utilisant AWS Amplify ! Vous avez ajouté une authentification à votre application, qui permet aux utilisateurs de s'inscrire, de se connecter et de gérer leur compte. L'application possède également une API GraphQL évolutive, configurée avec une base de données Amazon DynamoDB, qui permet aux utilisateurs de créer et de supprimer des notes. Vous avez également ajouté le stockage de fichiers en utilisant Amazon S3 pour permettre aux utilisateurs de télécharger des images et de les visionner dans leur application.

  • Suppression des ressources

    Suppression de services individuels

    Pour supprimer des services individuels, vous pouvez utiliser la commande de suppression Amplify :

    amplify remove auth
    
    ? Choose the resource you would want to remove: <your-service-name>

    Exécutez ensuite la commande push Amplify :

    amplify push

    Suppression de tout le projet

    Pour supprimer le projet et les ressources associées, vous pouvez exécuter la commande de suppression Amplify :

    amplify delete

Ce module vous a-t-il été utile ?

Merci
Merci de nous indiquer ce que vous avez aimé.
Fermer
Nous sommes désolés de vous décevoir.
Quelque chose est-il obsolète, déroutant ou inexact ? Aidez-nous à améliorer ce didacticiel en fournissant des commentaires.
Fermer

Félicitations !

Vous avez créé une application Web dans AWS ! Prochaine grande étape : approfondissez la découverte de technologies AWS spécifiques pour faire évoluer votre application au niveau supérieur.