Créer une application React complète

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. Vous pouvez conserver les sélections par défaut pour la plupart des options ci-dessous, mais veillez à sélectionner les options de création/mise à jour, de lecture et de suppression individuellement en appuyant sur la barre d'espace de chacune d'elles avant d'appuyer sur Entrée pour continuer avec l'invite.

  amplify add storage
  
  ? Select from one of the below mentioned services: Content (Images, audio, video, etc.)
  ? Provide a friendly name for your resource that will be used to label this category in the project: imagestorage
  ? 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/update, read, delete
  ? Do you want to add a Lambda Trigger for your S3 Bucket? (y/N) no

  Code snippet copied

  Copier
• 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 @auth(rules: [ { allow: public } ] ){
    id: ID!
    name: String!
    description: String
    image: String
  }

  Code snippet copied

  Copier

  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 GraphQL, nous pouvons déployer les mises à jour en exécutant la commande push Amplify :
  

  amplify push --y

  Code snippet copied

  Copier
• 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. Ajoutez d'abord la classe Storage et le composant Image à vos importations Amplify :

  import { API, Storage } from 'aws-amplify';
  import {
    Button,
    Flex,
    Heading,
    Image,
    Text,
    TextField,
    View,
    withAuthenticator,
  } from '@aws-amplify/ui-react';

  Code snippet copied

  Copier

  b. 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 url = await Storage.get(note.name);
          note.image = url;
        }
        return note;
      })
    );
    setNotes(notesFromAPI);
  }

  Code snippet copied

  Copier

  c. 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(event) {
    event.preventDefault();
    const form = new FormData(event.target);
    const image = form.get("image");
    const data = {
      name: form.get("name"),
      description: form.get("description"),
      image: image.name,
    };
    if (!!data.image) await Storage.put(data.name, image);
    await API.graphql({
      query: createNoteMutation,
      variables: { input: data },
    });
    fetchNotes();
    event.target.reset();
  }
  

  Code snippet copied

  Copier

  d. Mettez à jour la fonction deleteNote pour supprimer des fichiers du stockage lorsque des notes sont supprimées :

  async function deleteNote({ id, name }) {
    const newNotes = notes.filter((note) => note.id !== id);
    setNotes(newNotes);
    await Storage.remove(name);
    await API.graphql({
      query: deleteNoteMutation,
      variables: { input: { id } },
    });
  }

  Code snippet copied

  Copier

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

  <View
    name="image"
    as="input"
    type="file"
    style={{ alignSelf: "end" }}
  />

  Code snippet copied

  Copier

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

  {notes.map((note) => (
    <Flex
      key={note.id || note.name}
      direction="row"
      justifyContent="center"
      alignItems="center"
    >
      <Text as="strong" fontWeight={700}>
        {note.name}
      </Text>
      <Text as="span">{note.description}</Text>
      {note.image && (
        <Image
          src={note.image}
          alt={`visual aid for ${notes.name}`}
          style={{ width: 400 }}
        />
      )}
      <Button variation="link" onClick={() => deleteNote(note)}>
        Delete note
      </Button>
    </Flex>
  ))}

  Code snippet copied

  Copier

  g. Validez vos modifications et déposez-les sur GitHub. Attendez ensuite la fin de la compilation pour voir votre application complète en ligne !

  git add .
  git commit -m "Added graphql and storage"
  git push origin main

  Code snippet copied

  Copier
• Exécuter l'application

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

  npm start

  Code snippet copied

  Copier

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

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

  Code snippet copied

  Copier

  Exécutez ensuite la commande push Amplify :
  

  amplify push

  Code snippet copied

  Copier

  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

  Code snippet copied

  Copier