Flash Skills: integrando Lovable

Aula 1 - Apresentação

Apresentando o curso e o instrutor

Olá e boas-vindas a este Flash Skills de Lovable, uma ferramenta extremamente útil. Meu nome é Fabrício Carraro.

Audiodescrição: Fabrício é um homem de pele parda, com cabelos negros e curtos. Ele está vestindo uma camiseta azul-marinho com a inscrição "Alura".

Explorando a plataforma Lovable

Neste curso, vamos explorar a plataforma Lovable, amplamente utilizada por quem deseja criar sites e estruturas complexas sem a necessidade de programação. Mesmo que não tenhamos conhecimento em programação ou tenhamos apenas noções básicas, podemos criar algo complexo, conectando com bancos de dados, gateways de pagamento, como o Stripe, e inteligência artificial.

Apresentando o projeto final

Vamos apresentar uma visão geral do projeto final que desenvolveremos. Trata-se de uma página que funciona como um sistema de marketplace para freelancers e empresas. Nesse sistema, empresas poderão oferecer vagas para freelancers, que, por sua vez, poderão se cadastrar e enviar candidaturas para essas vagas.

Criando o sistema de autenticação

Na página principal, vamos criar juntos um sistema de autenticação. Faremos login com dois tipos de contas diferentes: uma conta de freelancer e uma conta de empresa.

Detalhando a conta de freelancer

Esta é uma conta de freelancer, conforme indicado. Aqui estão todos os freelancers disponíveis para que essa pessoa se candidate. Temos as candidaturas, as vagas de freelancer, as ofertas para as quais essa pessoa se candidatou, um perfil pessoal. Tudo isso está conectado a um banco de dados, especificamente o SupaBase, que é gratuito. Nele, estão cadastrados perfis do tipo empresa e do tipo freelancer.

Explorando a conta de empresa

Além disso, podemos acessar com uma conta de empresa. Utilizamos a conta da Dev Sem Fronteiras apenas para um e-mail aleatório, onde é possível visualizar as ofertas de freelancer que essa empresa está oferecendo, que, neste caso, são duas. Há também a possibilidade de adicionar uma nova oferta, que é registrada no banco de dados. As candidaturas recebidas pela empresa podem ser visualizadas, promovidas e estão conectadas ao Gateway de pagamento do Stripe.

Analisando candidaturas e inteligência artificial

O perfil da empresa também está disponível, assim como as candidaturas recebidas, que podem ser analisadas, aceitas ou rejeitadas. Além disso, é possível utilizar inteligência artificial para obter uma avaliação de quão bem uma candidatura se aplica a uma vaga específica.

Concluindo o Flash Skills

Esperamos que todos apreciem este Flash Esquisa de Lovable. Nos vemos em breve.

Aula 1 - Como criar site no Lovable

Iniciando no Flash Skills de Lovable

Para começar no Flash Skills de Lovable, a primeira ação é acessar o site do Lovable. Podemos buscar no Google digitando "L-O-V-A-B-L-E", e o primeiro site que aparece é identificado por um coração vermelho e roxo. Basta clicar e entrar.

Ao abrir o site, a tela inicial é bastante simples, permitindo que já possamos começar a fazer solicitações. Há um campo de entrada disponível. Antes de prosseguir, faremos o login clicando no botão "Começar" no canto superior direito. O login pode ser feito com uma conta do Google, do Gmail, do GitHub (plataforma usada por pessoas desenvolvedoras de software para armazenar seus códigos) ou diretamente por e-mail, caso não tenhamos uma conta no Google. Vamos usar a conta do Google para o login e, em breve, retornaremos após a autenticação.

Após o login, a interface exibe "Fabricius Lovable", indicando que estamos logados. A página é bastante intuitiva, semelhante a uma IA como o ChatGPT ou Gemini, onde podemos inserir um texto ou pedido para a IA.

Explorando funcionalidades da página

Abaixo do campo de entrada, há um ícone de mais no canto inferior esquerdo, oferecendo algumas opções. Podemos carregar uma imagem, como um desenho ou esboço feito no Paintbrush ou Photoshop, e fazer o upload. Isso pode ser útil para ilustrar a página de um site, por exemplo. Também é possível importar do Figma, uma ferramenta amplamente utilizada por pessoas de design para criar a estrutura visual de sites ou aplicativos. A conexão com uma conta do Figma é suportada.

Além disso, podemos conectar a uma base de dados do Super Base, que será utilizada no projeto. No topo da página, há opções como comunidade, para acessar o Discord do Lovable, e preços. Ao clicar em preços, vemos que o plano Pro anual custa 25 dólares por mês, o Business custa 50, e o Enterprise é mais variável, oferecendo mais opções. Podemos adquirir entre 100 a 10 mil créditos por mês. A opção mensal é mais cara, mas o plano Pro anual custa 21 dólares por mês, oferecendo 100 créditos mensais, 5 créditos diários, com um limite de 150 por mês. Este plano permite projetos privados, papéis de permissão de usuário, domínios customizáveis, e a remoção do símbolo do Lovable do site.

Iniciando o curso com o plano gratuito

Vamos iniciar o curso utilizando o Plano Gratuito, que oferece 5 créditos diários, resetados à meia-noite. Podemos usar 5 créditos hoje e, caso acabem, será necessário esperar até o dia seguinte para continuar com mais 5 créditos no projeto. Vamos começar a criar nosso site.

Definindo o projeto: Freelopedia

A ideia do projeto, conforme mencionado no primeiro vídeo, é criar um marketplace de freelancers e empresas. Nesse ambiente, uma empresa poderá anunciar um projeto freelance para procurar pessoas interessadas em realizá-lo. Os freelancers, por sua vez, analisarão os anúncios publicados e decidirão se desejam se candidatar, permitindo que a empresa avalie as candidaturas, inclusive com o auxílio de inteligência artificial. Trata-se de um projeto completo que desenvolveremos do início ao fim.

Para começarmos, preparamos um prompt inicial para fazer nosso primeiro pedido à IA do Lovable. O prompt é breve, com cerca de seis linhas de texto e alguns títulos. Vamos lê-lo juntos: "Crie uma página da Freelopedia", nome que inventamos para nossa plataforma, que será um marketplace de freelancers. Inicialmente, queremos apenas o esqueleto, com telas, navegação e validações simples, como um primeiro passo do nosso projeto.

Estruturando a plataforma e funcionalidades

Incluímos alguns títulos para oferecer uma visão geral. O objetivo é que as empresas publiquem oportunidades de trabalho freelance e que os freelancers se candidatem a essas oportunidades. As páginas, por enquanto, incluirão a home, que é a página principal do site, explicando do que se trata o site, com um cabeçalho contendo botões de login e logout. Ao clicar nesses botões, o usuário precisará se autenticar. Podemos implementar essa autenticação considerando dois tipos de usuários: freelancers, que buscam empregos, e empresas, que oferecem empregos e buscam freelancers.

Essa é nossa ideia inicial. Podemos definir a visibilidade do projeto, que, no plano grátis, é pública, permitindo que qualquer pessoa visualize, altere e crie sua própria versão do projeto. Para torná-lo privado, seria necessário adquirir um plano pro ou business, que oferece opções de privacidade.

A plataforma também oferece leitura por voz. Ao clicar no botão de enviar, o sistema começará a trabalhar no projeto. No lado direito da interface, há uma área onde o site será exibido, enquanto ele é desenvolvido. A ideia é criar uma home moderna e profissional para a Freelopedia, inspirada em marketplaces como Upwork e Fiverr, plataformas conhecidas de busca de freelancers.

Desenvolvendo o design e integração

O design será moderno, com cores azul profissional e verde vibrante. O cabeçalho terá navegação limpa e um botão de login destacado. A seção principal terá uma chamada para ação, como "inscreva-se agora", além de sessões explicativas sobre o marketplace e um layout responsivo. Para implementar o login e logout, e diferentes tipos de usuários, será necessário conectar o projeto ao SupaBase, utilizando a integração nativa. Para isso, clique no botão verde SupaBase no topo da interface para configurar.

No próximo vídeo, continuaremos com essa configuração enquanto o site é processado.

Aula 1 - Conectando Lovable ao SupaBase

Conectando com a base de dados do SupaBase

Continuando, vamos agora conectar com a base de dados do SupaBase, que é uma plataforma que podemos usar gratuitamente e que se conecta de maneira nativa com o Lovable. Enquanto isso, a plataforma já criou a página para nós, que será exibida em breve. Antes de analisarmos a página com mais detalhes, clicamos no botão verde do SupaBase para integrar autenticação de usuário, armazenamento de dados e capacidade de back-end. Em seguida, clicamos em "connect SupaBase" para conectar o SupaBase.

Ao abrir a tela, surge um pop-up que nos permite ver a documentação ou assistir a um tutorial, se desejarmos. No entanto, vamos clicar em "connect SupaBase" para nos conectar ao SupaBase. Isso abrirá uma conexão de API com o SupaBase, onde podemos nos cadastrar, caso não tenhamos uma conta, utilizando e-mail e senha. Também é possível criar uma conta nova com o GitHub, utilizando o SSO. Se ainda não tivermos uma conta, podemos clicar em "sign up now" para criar uma. Após isso, será necessário confirmar o e-mail, como é de praxe. Recebemos um e-mail para confirmação e, após a conexão, seremos direcionados para uma tela de autorização da API do Lovable, por exemplo, no GitHub, se for o caso. Autorizamos e, assim, conectamos nossa conta do Lovable com a do SupaBase, seja via e-mail, GitHub ou outro método. A conexão é bem-sucedida, e nosso workspace do Lovable está agora integrado com as organizações do SupaBase, que gerenciam bancos de dados e outras funcionalidades.

Gerenciando organizações conectadas

Podemos gerenciar isso em "Organizations", na seção "Manage Connected Organizations", onde é possível remover ou adicionar mais organizações. Com isso, podemos voltar à tela inicial e analisar a primeira versão da Freelopedia. A plataforma apresenta categorias, um sistema de login/logout para entrar ou se cadastrar, e conecta empresas com freelancers no Brasil. A Freelopedia é uma comunidade de trabalho freelance que oferece oportunidades incríveis, com mais de 10 mil freelancers ativos e mais de 5 mil projetos concluídos. A interface inclui uma imagem de pessoas trabalhando em um workspace público e um guia de como funciona: publicar o projeto, escolher o melhor freelancer, acompanhar o progresso e receber o resultado. Há também um call to action para começar agora, com categorias populares como desenvolvimento web, design gráfico, marketing digital, redação e conteúdo, tradução e consultoria. O rodapé destaca a plataforma como a maior do Brasil, conectando talentos excepcionais com oportunidades únicas, oferecendo suporte tanto para empresas quanto para freelancers.

Editando elementos da interface

Embora a primeira versão seja interessante, podemos não gostar de certos elementos, como a cor do botão "encontrar freelancers", que mistura verde com azul. Para alterar isso, clicamos no botão "edit" no canto inferior esquerdo, abaixo do campo de prompt do asklovable. Podemos escolher o que editar, como se fosse um HTML com CSS, onde h1 é um título grande, p é um parágrafo, button é um botão, e span é uma área específica. Podemos alterar manualmente, clicando em "edit styles", ajustando tamanho da fonte, cor, background, texto, margem e padding. Alternativamente, podemos usar um prompt para solicitar mudanças, como alterar o estilo azul e verde para rosa. O sistema entende que queremos mudar o design system da página inteira, não apenas um botão, e faz as alterações necessárias.

Criando e conectando projetos no SupaBase

Voltando ao SupaBase, podemos conectar um projeto clicando em "connect a project". Escolhemos nossa organização e, se não tivermos um projeto, clicamos em "create project" para criar um novo. Podemos nomear o projeto, como "frilopedia", e definir uma senha para a base de dados. Escolhemos a região mais próxima, como Estados Unidos, e criamos o projeto. Após a criação, voltamos ao Lovable, clicamos em "connect to project", escolhemos a organização e selecionamos "frilopedia". O SupaBase está conectado, e seguimos as instruções no chat para completar a integração.

Implementando autenticação de usuário

O sistema informa que ainda não criamos tabelas no projeto do SupaBase, mas o aplicativo já está conectado, permitindo trabalhar com o back-end, contas de usuário, login e armazenamento de dados. Queremos implementar a autenticação de usuário, considerando dois tipos: freelancer ou empresa. Para isso, no campo de prompts, solicitamos a geração da autenticação conforme o pedido inicial. O sistema começa a gerar tudo, e continuaremos no próximo vídeo, quando o processo estiver concluído.

Sobre o curso Flash Skills: integrando Lovable

O curso Flash Skills: integrando Lovable possui 168 minutos de vídeos, em um total de 33 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:

• Aula 1
• Aula 2
• Aula 3
• Aula 4
• Aula 5
• Aula 6