Gérer le stockage d'application en JavaScript

​

Créer une application Replit TypeScript

1. Sélectionnez Create App depuis l’écran d’accueil.
2. Accédez à l’onglet Choose a Template.
3. Tapez « TypeScript » dans le champ de recherche de templates et sélectionnez-le comme indiqué ci-dessous :
   
4. Sélectionnez Create App.

​

Installer la bibliothèque cliente officielle

• Configuration en un clic
• npm
• yarn

1

Accéder à l'outil App Storage

1. Accédez à l’onglet App Storage.
2. Sélectionnez la vue Commands dans l’onglet App Storage.

L’écran d’installation devrait ressembler à la capture d’écran suivante :

2

Installer les dépendances

1. Sélectionnez « JavaScript » dans le menu déroulant du langage de programmation en haut à gauche.
2. Sélectionnez Install @replit/object-storage package.
3. Une fois terminé, le texte du bouton devrait indiquer Package installed.

Utilisez cette option si votre application Replit utilise Node Package Manager (npm) pour gérer ses dépendances.Ouvrez l’outil Shell dans votre espace de travail et entrez la commande suivante :

npm install @replit/object-storage

Utilisez cette option si votre application Replit utilise yarn pour gérer ses dépendances.Ouvrez l’outil Shell dans votre espace de travail et entrez la commande suivante :

yarn add @replit/object-storage

​

Créer un bucket

1. Accédez à l’outil App Storage
2. Sélectionnez Create new bucket
3. Entrez un nom pour le bucket dans le champ Name
4. Sélectionnez Create bucket

​

Ajouter et exécuter le code d’exemple

1

Localiser index.ts

Ouvrez l’outil Files depuis le dock gauche.Sélectionnez index.ts pour l’ouvrir dans un éditeur de fichiers.

2

Ajouter le code client

Remplacez le contenu de index.ts par le code suivant :

import { Client } from "@replit/object-storage";
const client = new Client();

// Téléverser un fichier texte contenant "Hello, World!"
const { ok: uploadOk, error: uploadError } = await client.uploadFromText(
  "file.txt",
  "Hello World!",
);
if (!uploadOk) console.error("Upload failed:", uploadError);

// Lister les fichiers dans le bucket
const { ok: listOk, value: listValue, error: listError } = await client.list();
if (!listOk) console.error("List failed:", listError);
else console.log("Bucket contents:", listValue);

// Récupérer et afficher le contenu du fichier téléversé
const {
  ok: downloadOk,
  value,
  error: downloadError,
} = await client.downloadAsText("file.txt");
if (!downloadOk) console.error("Download failed:", downloadError);
else console.log("file.txt contents:", value);

3

Exécuter l'application

Sélectionnez Run pour exécuter le code d’exemple.Accédez à l’onglet Console pour afficher la sortie, qui devrait ressembler à ce qui suit :

Bucket contents: [ { name: 'file.txt' } ]
file.txt contents: Hello World!

Vérifiez que le fichier file.txt apparaît dans votre bucket dans la vue Objects de l’outil App Storage.

Rechargez la page pour mettre à jour la liste des objets si file.txt n’apparaît pas.

​

Supprimer l’objet

1. Remplacez le contenu de index.ts par le code suivant :
   import { Client } from "@replit/object-storage";
   const client = new Client();
   
   // Supprimer file.txt du bucket
   const { ok: deleteOk, error: deleteError } = await client.delete("file.txt");
   if (!deleteOk) console.error("Delete failed:", deleteError);
   else console.log("Delete succeeded");
   
2. Sélectionnez Run pour exécuter le code d’exemple.
3. Accédez à l’onglet Console pour afficher la sortie, qui devrait ressembler à ce qui suit :
   Delete succeeded
   
4. Vérifiez que l’objet file.txt n’apparaît plus dans le bucket.

​

Prochaines étapes

• App Storage : en savoir plus sur la fonctionnalité App Storage et l’outil de l’espace de travail
• App Storage JavaScript SDK : en savoir plus sur la classe Client et ses méthodes