Bolt.new: crie aplicações web e mobile sem código

Criando e customizando um projeto - Apresentação

Apresentando o curso e o instrutor

Bem-vindos ao nosso curso de Bolt. Meu nome é Ricardo Bugan e serei o instrutor deste curso.

Audiodescrição: Ricardo é um homem branco, de cabelo curto castanho e olhos castanhos. Ele veste uma camisa azul e está em um ambiente de escritório com uma parede clara ao fundo.

Introduzindo o uso do Bolt no desenvolvimento do OmniHack

Neste curso, utilizaremos o Bolt, nossa ferramenta de IA generativa, que possui uma IDE integrada, para nos auxiliar na criação do OmniHack, nosso sistema de gerenciamento de hackathons. Vamos desenvolver a página inicial junto com essa ferramenta.

Nosso sistema SaaS está conectado a um banco de dados e inclui uma seção explicativa sobre como funciona, para que possamos comercializar nosso produto. Também apresentamos os próximos hackathons, com cartões que fornecem informações sobre cada evento, incluindo datas e detalhes. Tudo isso é gerado pelo Bolt, utilizando IA generativa.

Explorando funcionalidades de login e gerenciamento de hackathons

Além disso, temos a funcionalidade de login, onde podemos acessar o sistema. Após inserir o login e a senha, acessamos o painel de controle da empresa. Nesse painel, é possível gerenciar os hackathons, visualizar o número de participantes, os prêmios distribuídos e os eventos cadastrados. Podemos editar os detalhes de cada hackathon diretamente pelo sistema. Ao atualizar, as informações são sincronizadas com o banco de dados. Também é possível deletar um hackathon, e o sistema refletirá essa alteração.

Detalhando a funcionalidade de deletar e o formulário de cadastro

Vamos explorar o conceito de deletar. Quando realizamos a ação de deletar, a interface e os prêmios são automaticamente atualizados. Além disso, o formulário de cadastro do hackathon também está disponível. Vamos criar tudo isso utilizando o Bolt, observando suas boas práticas, funcionamento e como realizar a publicação.

Interagindo com a interface de edição e integração com a equipe

No site publicado, temos a interface de edição do projeto, onde interagimos com o código e observamos o código gerado, bibliotecas e boas práticas para integrar o Bolt com nossa equipe de desenvolvimento. Isso permite que duas equipes trabalhem em paralelo: uma controlando o Bolt e outra composta por pessoas desenvolvedoras.

Conectando ao banco de dados e discutindo tokens

Para a conexão com o banco de dados, utilizaremos o Superbase para criar e integrar nosso banco de dados. Abordaremos também a questão dos tokens, discutindo seu funcionamento, consumo e boas práticas para economizá-los.

Concluindo com a eficiência do ambiente integrado

A ferramenta que utilizamos possui uma ideia integrada, permitindo que escrevamos código, interajamos com a IA e vejamos nosso projeto ganhar vida, tudo em um único ambiente, o que agiliza significativamente nosso desenvolvimento.

Esperamos vocês no curso. Até breve!

Criando e customizando um projeto - Criando nosso projeto

Iniciando o projeto no Bolt

Vamos iniciar nosso projeto no Bolt. Já estamos logados na plataforma, e ao entrar, no canto superior direito, há a opção de login, que pode ser feito com Google, GitHub, ou por e-mail e senha. No momento, estamos utilizando o plano gratuito e visualizamos a tela inicial do Bolt.

O Bolt solicita um prompt para começarmos a construção. Antes de iniciarmos, é importante destacar alguns detalhes para o início do projeto. Na seção de documentação, em "resources" e "help center", encontramos informações sobre as tecnologias suportadas. O Bolt é uma ferramenta que auxilia na criação do sistema desejado, funcionando de forma conversacional. No entanto, por estar em fase beta, ele opera melhor em navegadores baseados no Chrome, como Google Chrome, Brave, Microsoft Edge, Vivaldi, Opera, Epic, entre outros. Estamos utilizando o Brave.

Considerando as tecnologias suportadas pelo Bolt

Além disso, é importante considerar as plataformas suportadas, já que o Bolt gera código. É essencial ter noção das tecnologias que ele suporta para comunicar adequadamente com a equipe ou contratar alguém para tarefas específicas. O Bolt suporta a criação de websites, aplicativos mobile e webapps, utilizando o Expo, que é do React Native. Portanto, ele suporta apenas linguagens e frameworks baseados em JavaScript. No back-end, ele suporta Node.js, e no navegador, qualquer framework JavaScript, como React, Angular, Vue.js, entre outros.

Todo o código gerado será baseado em JavaScript. É importante definir, no início do projeto, qual framework e bibliotecas serão utilizadas. Para nosso projeto no Hackathon, solicitaremos a construção de uma landing page. Em ferramentas como o Bolt ou Lovable, é recomendável evitar pedidos muito grandes para não gastar muitos tokens e para que a ferramenta não se perca.

Solicitando a criação da home page

Vamos pedir para criar uma home page em React, utilizando a biblioteca Tailwind para o design system. A home page será para um sistema de gerenciamento de hackathons, onde empresas podem cadastrar eventos e a comunidade pode se inscrever para participar. Ao detalhar o produto, reforçamos que precisamos apenas da home page e que desejamos o uso de React e Tailwind.

Para isso, utilizamos o seguinte comando no Bolt:

Construa uma home page para um sistema de gerenciamento de Hackatons, onde empresas podem cadastrar seus eventos e a comunidade consegue se inscrever neles para participar.

Nesse momento só preciso da Home page.

Utilize as ferramentas do React e Tailwind

Acompanhando o desenvolvimento da página

Tailwind é a nossa biblioteca de gestão de design system. É uma das opções que podemos utilizar, mas vamos optar por usar essa especificamente, juntamente com as ferramentas de React e Tailwind. Ao solicitar a geração, a interface muda de tela, permitindo que possamos criar, interagir e acompanhar o que está sendo desenvolvido. Note que, embora tenhamos escrito em português, a interface pode aparecer em inglês ou português, dependendo do momento.

O sistema começou a trabalhar e já respondeu que irá criar uma homepage moderna e profissional para o sistema de gerenciamento de hackathons. Ele entendeu o pedido e está lendo o arquivo source/app.tsx, que já foi criado. Este arquivo segue a estrutura do React, onde app.tsx geralmente é a entrada da aplicação. Esperamos que ele edite esse arquivo para criar os elementos necessários. Vamos deixar o sistema rodando, pois essas ferramentas podem demorar um pouco. Quando finalizar, verificaremos o resultado.

Analisando o resultado gerado pelo Bolt

O sistema gerou a página do Hack Hub, nomeando-a, já que não fornecemos um nome específico. Ele realizou três ações: leu o app.tsx, editou-o conforme esperado e fez o build do projeto para verificar o funcionamento. A resposta em linguagem natural foi: "Criei uma homepage moderna e profissional para um sistema de gerenciamento de hackathons." A página inclui navegação principal, um hero com call to action destacando a proposta da plataforma, conectando talentos e empresas através de hackathons. Foram adicionados dois cartões simulando possíveis hackathons, com data e número de inscritos.

A seção "Como Funciona" está presente, seguindo um padrão de homepage e LPs, com cartões e pontos de venda. A galeria de eventos mostra os próximos hackathons, e há um call to action final com a mensagem "Pronto para o desafio". O footer completo inclui todos os links e informações da plataforma, com direitos reservados, como em muitos sites.

Identificando limitações e melhorias necessárias

Embora a página tenha sido criada, alguns botões não funcionam. Por exemplo, "Cadastrar" e "Entrar" não realizam ações, enquanto "Eventos" redireciona para uma seção da homepage, não para uma nova página. "Como Funciona" e "Sobre" também não têm links funcionais. "Explorar Eventos" e "Cadastrar Hackathon" ainda não estão operacionais.

Na aba de código, podemos ver o código-fonte na pasta "source", onde normalmente encontramos o código do projeto. O arquivo app.tsx foi criado com várias divs, sem componentes React específicos, resultando em um grande HTML. Não houve componentização ou boas práticas de código que adotaríamos como pessoas desenvolvedoras, mas o pedido foi por uma homepage simples.

A configuração do Tailwind foi feita, e ele foi adicionado como dependência no package.json. No app.tsx, vemos o uso de classes do Tailwind, como space-y-2 e text-sm, indicando que as tags do Tailwind estão sendo utilizadas.

Agora que temos nossa primeira página, podemos considerar melhorias, como ajustar a paleta de cores e verificar se as partes do site atendem às nossas necessidades. Continuaremos editando o projeto em breve.

Criando e customizando um projeto - Paleta de cores e selecionando item especifico

Solicitando alterações no nome e paleta de cores

Como estávamos discutindo, inicialmente tivemos a ideia de que ele girou, mas podemos fazer algumas alterações para personalizá-lo. A primeira modificação que desejamos realizar é mudar o nome. O nome "Hack Hub" foi atribuído a nós, mas o nome do nosso produto é "OmniHack". Portanto, vamos solicitar a alteração do nome do produto para "OmniHack". Além disso, aproveitaremos para solicitar outras mudanças.

Para começar, vamos mudar o nome do projeto e do site para "OmniHack" e adicionar a paleta de cores no design system. Vamos ver como isso é feito no código:

Mude o nome do projeto e do site para OmniHack. E adicione a paleta de cores abaixo no design system.

Explorando e ajustando a paleta de cores

Por exemplo, a paleta de cores escolhida, que inclui alguns tons de azul e verde, não está tão adequada. Vamos pedir para alterar a paleta de cores. Se tivermos um designer que já possui uma paleta de cores, podemos utilizá-la. Caso contrário, ou se quisermos explorar novas ideias, podemos usar outra ferramenta para obter a paleta de cores, o que pode ser interessante para gerar ideias. Essas ferramentas são muito úteis para isso.

Vamos utilizar o "Color Palette" em nosso buscador. A ferramenta "Colors" permite testar paletas de cores ou utilizar paletas já prontas. Começaremos com o gerador de paletas, que apresenta paletas com cinco cores. Podemos pressionar a barra de espaço para gerar novas paletas até encontrarmos uma que nos agrade. Encontramos uma interessante, com tons de azul e bege, mais rosados. Se quisermos ajustar ainda mais essa paleta, podemos acessar a aba de ajustes e modificar a saturação, tornando-a mais puxada para preto e branco ou mais viva. Também podemos ajustar o brilho, tornando as cores mais escuras ou mais claras, em tons pastel. É possível brincar bastante com a paleta gerada, inclusive ajustando a temperatura das cores, optando por tons mais quentes ou frios. Se desejarmos mudar as cores em si, mantendo a distribuição e relação entre elas, podemos fazer isso.

Aplicando a nova paleta de cores

Decidimos manter a paleta original, apenas aumentando um pouco a saturação, e aplicamos as mudanças. Com as cores mais saturadas, podemos copiar os códigos hexadecimais de cada uma delas e utilizá-los para a alteração. Vamos solicitar a mudança do nome do projeto e do site para "OmniHack" e adicionar a nova paleta de cores no Design System. Queremos que o Design System e o UTWing, que trouxemos para o projeto, sejam utilizados.

Vamos copiar os códigos hexadecimais das cores. A primeira cor, seguida de hashtag, pois ele fornece apenas os números. A segunda cor, também com hashtag. A terceira cor, e assim por diante. Para pular uma linha, seguramos a tecla shift no teclado, evitando que o comando seja enviado. Podemos passar uma paleta com mais ou menos cores, dependendo do design que temos em mente. Podemos nomear as cores, como primária ou secundária. Decidimos que o primeiro azul será a cor primária e veremos como ele se comporta com as outras cores ao redor.

Aqui está a paleta de cores que vamos adicionar:

#1D506B
#C77B6A
#5FA1C4
#EEDAD0
#C0AC71

Processando alterações e atualizando o projeto

Após enviar, ele começará a processar. Cada ação consome créditos, e estamos utilizando o plano gratuito, que possui um limite mensal e diário de tokens. Quando atingirmos esse limite, precisaremos considerar o plano pago. Isso nos dá uma ideia do que é possível fazer apenas com o plano gratuito. Ele já tomou três ações, lendo o twinge.config, o aplicativo e o source.web, que é nossa página onde todos os elementos estão localizados.

Ele está editando o arquivo twinge.config e agora está editando nosso aplicativo. Está realizando o build do projeto. Esta é a última parte para verificarmos as alterações. Veja como ele vai atualizar a página central. Ele está nos informando sobre as atualizações: "Pronto, atualizei. Já trouxe ali. Atualizei o projeto do OmniHack e o design system do Twinge." Ele já entendeu as mudanças, que incluem a nomenclatura da plataforma para o OmniHack. Podemos ver que ele realmente mudou isso em todos os lugares: header, footer e branding. O footer também foi atualizado para OmniHack. A paleta de cores customizadas foi configurada no Twinge, incluindo as variáveis de cores OmniHack primary, secondary, accent (destaque), light e gold. O design foi completamente reformulado com a paleta primária, que inclui a cor azul primário. A paleta secundária inclui gradientes e destaques, como a cor C77, que é um tom rosado. Destaques de elementos secundários utilizam a cor 5FA, um azul mais claro. O background suave e elementos premium usam as cores gold e power petal, um rosado mais claro e menos saturado. Ele gerou toda a nossa paleta e página.

Adicionando novo conteúdo e gerenciando recursos

Conseguimos ajustar as cores, e ele criou as variáveis necessárias. Ele não ignorou o branco, pois entendeu que, para um design, branco e power petal são essenciais. Podemos também adicionar mais um ponto de venda na aba "Como Funciona", para incluir um cartão sobre empregabilidade. Vamos selecionar apenas essa aba para edição, sem alterar o restante. Abaixo da nossa caixa de seleção e de input, há o botão de select. Quando clicamos nele, ele fica azul, e ao passar o mouse, ele entende onde estamos no site. Podemos selecionar uma área, e ele indica que a sessão está selecionada. Assim, conseguimos alterar apenas essa sessão.

No canto, temos mais de 9 mil tokens disponíveis para hoje. Dos 300 que tínhamos por dia, já usamos cerca de 220, restando apenas 70. Esta será a última alteração antes de migrarmos para o plano pago. Para dar uma ideia do uso, se utilizarmos 1 milhão ou 300 mil em três dias, rapidamente esgotamos nossos tokens. Vamos pedir para ele mudar a seção "Como Funciona", adicionando um novo cartão sobre empregabilidade e visibilidade para participantes de Hackathons.

Finalizando alterações e considerando plano pago

Vamos ver como ele responde ao pedido. Ele está processando e esperamos que mantenha as alterações feitas. Ele já está tomando algumas ações, lendo nosso aplicativo para retomar o contexto, editando e realizando o build. Ele vai adicionar um novo cartão na seção "Como Funciona", destacando visibilidade e empregabilidade, com um ícone de briefcase. Ele trouxe um ícone de empregabilidade, destacando participantes que ganham visibilidade e enfatizando a construção do portfólio para profissionais. O cartão adicional com o ícone de visibilidade e empregabilidade foi criado, destacando a importância no mercado. Com um pedido simples, ele trouxe outro ponto de venda para nosso produto.

Agora, ele informou que usamos todos os nossos tokens do dia. Isso é o que conseguimos fazer com a ferramenta gratuita. Vamos adquirir a ferramenta paga para continuar o projeto, pois ainda há muito a explorar. Obrigado.

Sobre o curso Bolt.new: crie aplicações web e mobile sem código

O curso Bolt.new: crie aplicações web e mobile sem código possui 188 minutos de vídeos, em um total de 39 atividades. Gostou? Conheça nossos outros cursos de IA para Programação em Inteligência Artificial, ou leia nossos artigos de Inteligência Artificial.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• capitulo