Desenvolvimento Web Sem Código: Crie um App Completo com BuildShip e toddle em 1 Hora

A revolução no-code transformou a maneira como encaramos o desenvolvimento de aplicativos. O que antes exigia meses de codificação complexa, hoje pode ser alcançado em questão de horas, capacitando criadores e empreendedores a dar vida às suas ideias com agilidade impressionante. Neste artigo, vamos mergulhar em uma demonstração ao vivo de como construir um aplicativo web completo, do backend ao frontend, utilizando duas ferramentas poderosas: BuildShip para a lógica do servidor e toddle para a interface do usuário. Acompanhe Ramón, Luis (ambos da equipe BuildShip) e Andreas (cofundador do toddle) enquanto eles desenvolvem, em cerca de uma hora, um aplicativo funcional de "Project Showcase", apelidado de "CoolTools".

As Ferramentas da Vez: BuildShip e toddle

Antes de entrarmos na construção do aplicativo, vamos conhecer brevemente as estrelas deste show no-code.

O que é o BuildShip?

BuildShip é uma plataforma de desenvolvimento de backend visual que permite criar APIs, tarefas agendadas e fluxos de trabalho complexos sem escrever código. Com uma interface intuitiva baseada em nós e o poder da inteligência artificial para gerar funcionalidades, o BuildShip acelera drasticamente o desenvolvimento do lado do servidor, integrando-se facilmente com diversas ferramentas e bancos de dados.

O que é o toddle?

toddle é uma ferramenta de desenvolvimento frontend visual projetada para a criação rápida de interfaces de usuário interativas e responsivas. Focada nos padrões web e oferecendo grande flexibilidade, o toddle permite que desenvolvedores e designers construam aplicações web ricas em recursos, também sem a necessidade de codificação tradicional, e se integra perfeitamente com qualquer backend via APIs.

Construindo o Backend com BuildShip: A Espinha Dorsal do App "Project Showcase"

Luis, da equipe BuildShip, iniciou a demonstração construindo a lógica do backend para o aplicativo "Project Showcase". O objetivo era criar um sistema onde os usuários pudessem submeter seus projetos (websites/ferramentas) e outros pudessem visualizá-los.

Desenhando a Arquitetura do Backend no BuildShip

Dois endpoints principais foram planejados e construídos usando o BuildShip:

Endpoint /saveproject (POST) no BuildShip

Este endpoint é responsável por receber os dados de um novo projeto submetido pelo usuário. As funcionalidades incluem:

• Receber dados do projeto: título, descrição e URL.
• Gerar um QR code para a URL fornecida utilizando o nó Generate QR Code.
• Gerar uma captura de tela (screenshot) da URL do projeto usando o nó Screenshot URL.
• Gerar um identificador único para o projeto com o nó UUID Generator.
• Fazer upload do QR code e da imagem da captura de tela para um serviço de armazenamento (Google Cloud Storage, neste caso, usando os nós Upload Base64 File e Upload File).
• Salvar todas as informações do projeto (título, descrição, URL original, URL da imagem do QR code, URL da imagem da captura de tela e um timestamp de criação) no banco de dados interno do BuildShip com o nó Create Document.
• Retornar o ID do projeto recém-criado.

Endpoint /projects (GET) no BuildShip

Este endpoint permite que o frontend busque a lista de projetos para exibição:

• Buscar os últimos 10 projetos submetidos. Isso é configurado através do nó Collection Query.
• Ordenar os projetos pela data de criação (createdAt) em ordem descendente, garantindo que os mais recentes apareçam primeiro.
• Retornar a lista de projetos para o frontend usando o nó Return.

Validação de Dados e Flexibilidade no BuildShip

Luis também destacou a importância da validação dos dados de entrada. No BuildShip, isso pode ser feito adicionando um nó de Object Validation no início do fluxo do endpoint /saveproject para garantir que os campos necessários (como título, descrição e URL) estão presentes e no formato correto antes de prosseguir com o processamento.

Além disso, embora a demonstração tenha utilizado o banco de dados e o armazenamento de arquivos integrados do BuildShip, Luis mencionou a flexibilidade da plataforma para se conectar com serviços externos, como Firebase (incluindo Firebase Auth para autenticação de requisições), Supabase ou bancos de dados PostgreSQL. A funcionalidade "Generate with AI" do BuildShip pode até mesmo ajudar a criar nós customizados para integrações específicas, como com o Amazon Redshift, caso não exista um nó pronto.

Desenvolvendo o Frontend com toddle: Dando Vida ao "Project Showcase"

Com o backend pronto, Andreas, cofundador do toddle, assumiu para construir a interface do usuário.

Criando a Interface do Usuário no toddle

Andreas demonstrou como construir a interface do aplicativo "CoolTools" de forma visual e interativa no toddle.

Estrutura da Página Principal no toddle

A página principal foi projetada para exibir a lista de ferramentas/projetos submetidos. Os principais passos incluíram:

• Conectar-se ao endpoint /projects da API do BuildShip para buscar os dados. O toddle automaticamente busca os dados ao carregar a página (auto-fetch).
• Utilizar a funcionalidade de repetição (repeat) do toddle para renderizar um card para cada projeto retornado pela API. Cada card exibe o screenshot, título e URL do projeto.
• Estilizar os cards e a página para uma apresentação agradável.

Página de Submissão de Projetos no toddle

Uma segunda página foi criada para permitir que os usuários submetam novas ferramentas:

• Criação de um formulário com campos para Título, Descrição e URL.
• Vinculação dos valores desses campos de input a variáveis no toddle (title, description, url). Essas variáveis são usadas para armazenar temporariamente os dados que o usuário insere.
• Adição de um botão "Submit".

Integrando com a API do BuildShip no toddle

A integração entre o frontend toddle e o backend BuildShip é fundamental:

• Listagem de Projetos: A API /projects (GET) é chamada no carregamento da página principal, e seus dados são usados para popular a lista de cards repetidos.
• Submissão de Novos Projetos: Ao clicar no botão "Submit" no formulário:
  • Um evento de clique no botão dispara uma ação para chamar a API /saveproject (POST) do BuildShip.
  • O corpo (body) da requisição POST é construído usando um objeto que mapeia as variáveis do toddle (title, description, url) para os campos esperados pelo backend.
  • Andreas demonstrou como tratar diferentes estados da chamada da API:
    • isLoading: Para mostrar uma mensagem como "Submitting please wait..." enquanto a requisição está em andamento.
    • onSuccess: Para exibir uma mensagem de sucesso (ex: "Success! Thank you for submitting an awesome tool!") e, opcionalmente, acionar um efeito visual como confetes. Após um breve delay (usando o nó "Sleep" no workflow do toddle), o usuário é redirecionado para a página inicial para ver o projeto recém-adicionado.
    • onError: Para exibir uma mensagem de erro caso algo falhe na submissão.
• Vinculação Dinâmica de Atributos: O atributo src das imagens (screenshot e QR code) e o href dos links são dinamicamente vinculados aos URLs correspondentes vindos da API. O toddle permite o uso de fórmulas para construir esses valores, como concatenar strings ou acessar campos aninhados nos dados da API.

A Sinergia entre BuildShip e toddle para Desenvolvimento Web Rápido

A demonstração ao vivo evidenciou como BuildShip e toddle se complementam. Enquanto o BuildShip cuida da lógica de negócios, processamento de dados e interações com bancos de dados e serviços externos de forma visual no backend, o toddle oferece uma maneira igualmente visual e poderosa para construir interfaces de usuário ricas e responsivas no frontend. Juntas, essas ferramentas permitem um ciclo de desenvolvimento full-stack incrivelmente rápido, ideal para prototipagem, MVPs e até mesmo aplicações mais complexas, tudo isso sem a necessidade de escrever código tradicional extensivamente.

Durante a sessão, uma pergunta interessante da audiência foi sobre a geração de especificações OpenAPI. Luis, do BuildShip, explicou que é possível exportar as especificações da API criada no BuildShip no formato YAML, o que facilita a integração com outras ferramentas e a documentação da API.

Expandindo o Projeto "Project Showcase" e Próximos Passos

O aplicativo "Project Showcase" construído em uma hora é um excelente ponto de partida. Existem várias maneiras de expandi-lo:

• Autenticação de Usuário: Implementar um sistema de login para que apenas usuários registrados possam submeter projetos. Isso pode ser feito utilizando integrações do BuildShip com Firebase Auth ou outros provedores de OAuth 2.0, como mencionado por Luis.
• Categorias e Tags: Permitir que os usuários categorizem seus projetos para facilitar a busca e navegação.
• Sistema de Votação ou Comentários: Adicionar interatividade permitindo que os usuários votem ou comentem nos projetos.

Para quem deseja explorar essas ferramentas, tanto o BuildShip quanto o toddle oferecem planos gratuitos para começar e comunidades ativas no Discord onde é possível tirar dúvidas e compartilhar projetos:

• Comunidade BuildShip: buildship.com/discord
• Comunidade toddle: discord.com/invite/svBKYZF3UR (link fornecido no chat do vídeo)

Conclusão: O Futuro do Desenvolvimento Web é Ágil e Acessível

A capacidade de construir um aplicativo web completo, com backend e frontend, em menos de uma hora e sem a necessidade de codificação profunda, como demonstrado por Ramón, Luis e Andreas, é um testemunho do avanço das ferramentas no-code. Plataformas como BuildShip e toddle estão democratizando o desenvolvimento de software, tornando-o mais acessível e permitindo que ideias se transformem em realidade de forma mais rápida e eficiente do que nunca.