Gerenciar o App Storage em JavaScript

Documentation Index

Fetch the complete documentation index at: https://docs.replit.com/llms.txt

Use this file to discover all available pages before exploring further.

​

Criar um Replit App em TypeScript

1. Selecione Criar App na tela inicial.
2. Navegue até a aba Escolher um Template.
3. Digite “TypeScript” no campo de busca de templates e selecione-o conforme mostrado abaixo:
   
4. Selecione Criar App.

​

Instalar a biblioteca cliente oficial

• Configuração com um clique
• npm
• yarn

1

Acessar a ferramenta App Storage

1. Navegue até a aba App Storage.
2. Selecione a visualização Comandos na aba App Storage.

A tela de instalação deve ser semelhante à captura de tela a seguir:

2

Instalar as dependências

1. Selecione “JavaScript” no menu suspenso de linguagem de programação no canto superior esquerdo.
2. Selecione Instalar o pacote @replit/object-storage.
3. Quando concluído, o texto do botão deve exibir Pacote instalado.

Use esta opção se o seu Replit App usa o Node Package Manager (npm) para gerenciar suas dependências.Abra a ferramenta Shell no Editor de Projetos e insira o seguinte comando:

npm install @replit/object-storage

Use esta opção se o seu Replit App usa yarn para gerenciar suas dependências.Abra a ferramenta Shell no Editor de Projetos e insira o seguinte comando:

yarn add @replit/object-storage

​

Criar um bucket

1. Navegue até a ferramenta App Storage
2. Selecione Criar novo bucket
3. Insira um nome para o bucket no campo Nome
4. Selecione Criar bucket

​

Adicionar e executar o código de exemplo

1

Localizar index.ts

Abra a ferramenta Arquivos na barra lateral esquerda.Selecione index.ts para abri-lo em um editor de arquivos.

2

Adicionar o código do cliente

Substitua o conteúdo de index.ts pelo seguinte código:

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

// Fazer upload de um arquivo de texto com o conteúdo "Hello, World!"
const { ok: uploadOk, error: uploadError } = await client.uploadFromText(
  "file.txt",
  "Hello World!",
);
if (!uploadOk) console.error("Upload falhou:", uploadError);

// Listar os arquivos no bucket
const { ok: listOk, value: listValue, error: listError } = await client.list();
if (!listOk) console.error("Listagem falhou:", listError);
else console.log("Conteúdo do bucket:", listValue);

// Recuperar e imprimir o conteúdo do arquivo enviado
const {
  ok: downloadOk,
  value,
  error: downloadError,
} = await client.downloadAsText("file.txt");
if (!downloadOk) console.error("Download falhou:", downloadError);
else console.log("Conteúdo de file.txt:", value);

3

Executar o app

Selecione Executar para rodar o código de exemplo.Navegue até a aba Console para ver a saída, que deve ser semelhante ao resultado abaixo:

Conteúdo do bucket: [ { name: 'file.txt' } ]
Conteúdo de file.txt: Hello World!

Confirme que o arquivo file.txt aparece no seu bucket na visualização Objetos da ferramenta App Storage.

Recarregue a página para atualizar a lista de objetos se file.txt não aparecer.

​

Excluir o objeto

1. Substitua o conteúdo de index.ts pelo seguinte código:
   import { Client } from "@replit/object-storage";
   const client = new Client();
   
   // Excluir file.txt do bucket
   const { ok: deleteOk, error: deleteError } = await client.delete("file.txt");
   if (!deleteOk) console.error("Exclusão falhou:", deleteError);
   else console.log("Exclusão bem-sucedida");
   
2. Selecione Executar para rodar o código de exemplo.
3. Navegue até a aba Console para ver a saída, que deve ser semelhante ao resultado abaixo:
   Exclusão bem-sucedida
   
4. Verifique que o objeto file.txt não aparece mais no bucket.

​

Próximos passos

• App Storage: Saiba mais sobre o recurso App Storage e como usá-lo no Editor de Projetos
• SDK JavaScript do App Storage: Conheça a classe Client e seus métodos