Você já pensou em ter seu próprio serviço de compartilhamento de arquivos na nuvem? Aqui no Brasil Vibe Coding, vamos mergulhar no universo do desenvolvimento web para mostrar como criar um aplicativo de compartilhamento de arquivos robusto. Usaremos a biblioteca Puter.js para que você possa enviar qualquer arquivo e obter um URL público instantaneamente.
Este tutorial detalhado guiará você por cada etapa, desde a configuração inicial até a geração de links compartilháveis. Prepare-se para codificar e transformar suas ideias em realidade digital!
Demonstração: https://file-sharing-example.puter.site/
Principais Recursos do Nosso Aplicativo
Nosso aplicativo de compartilhamento de arquivos oferece uma interface de arrastar e soltar muito intuitiva. Ele simplifica o processo de upload e torna a partilha de documentos e mídias acessível a todos.
Com ele, você terá funcionalidades essenciais para um serviço de nuvem moderno. Descubra os pontos fortes que tornam este app uma solução completa para suas necessidades.
Upload por Arrasto e Solta: Selecione arquivos arrastando-os para a página ou clicando para navegar.
Armazenamento em Nuvem: Todos os arquivos são guardados com segurança no sistema de arquivos em nuvem da Puter.
URLs Públicas: Cada arquivo enviado recebe um URL público exclusivo através do Puter Hosting.
Subdomínio Persistente: O aplicativo memoriza seu subdomínio entre sessões, utilizando o Puter KV para garantir continuidade.
Primeiros Passos: Configurando o Ambiente
A beleza deste aplicativo é sua simplicidade: é um único arquivo index.html, sem necessidade de etapas complexas de compilação. Para começar, basta adicionar a biblioteca Puter.js via CDN (Content Delivery Network).
Esta abordagem facilita a integração e permite que você se concentre na lógica do aplicativo. Adicione a seguinte linha ao seu arquivo HTML:
<script src=</span>"https://js.puter.com/v2/"></script>A Puter.js é uma poderosa biblioteca JavaScript que integra diversas funcionalidades essenciais. Ela oferece IA, armazenamento de arquivos em nuvem, banco de dados, hospedagem e autenticação. Tudo isso é executado no lado do cliente com um Modelo de Pagamento pelo Usuário.
Construindo o Aplicativo: A Lógica por Trás
O aplicativo inclui uma interface de arrastar e soltar, pré-visualizações de arquivos e indicadores de progresso. Este tutorial foca nas APIs do Puter.js que o impulsionam, permitindo o core da funcionalidade.
Você pode explorar o código-fonte completo aqui para entender todos os detalhes. Veja as três etapas principais que acontecem quando um usuário seleciona e envia um arquivo:
Criar um subdomínio hospedado: Essencial para servir os arquivos publicamente.
Fazer o upload do arquivo: O arquivo é enviado para o sistema de arquivos em nuvem da Puter.
Gerar um link público: Um link é criado a partir do subdomínio e do nome do arquivo, tornando-o acessível.
Criação de um Subdomínio Hospedado
Antes de fazer o upload, precisamos de um local para hospedar os arquivos. O Puter Hosting permite criar um subdomínio sob *.puter.site, mapeado diretamente para seu sistema de arquivos em nuvem. Criamos um na primeira utilização e o salvamos com puter.kv.
Isso garante que o subdomínio persista entre as sessões do usuário. Confira como a lógica inicial é implementada para verificar e criar um subdomínio:
// Verifica se já temos um subdomínio de uma sessão anteriorlet subdomain = await puter.kv.get("site_subdomain");
if (!subdomain) {// Primeira vez: gera um subdomínio único e cria o sitesubdomain = "<..." (truncado para o prompt, se necessário)Conclusão: Seu Próximo Projeto de Código
Construir um aplicativo de compartilhamento de arquivos com Puter.js é uma excelente forma de explorar o desenvolvimento web moderno. A facilidade de uso da biblioteca, combinada com recursos poderosos, torna o processo acessível e eficiente.
Esperamos que este guia tenha sido útil para você iniciar seu próprio projeto. Continue acompanhando o Brasil Vibe Coding para mais tutoriais e novidades no mundo da programação e tecnologia!