Case PM3 - AI Product Builder

Case: PM3 - AI Product Builder - IA na criação de produtos digitais

Apresentando a experiência e a motivação

Olá! Eu sou a Giovana Nogueira, sou gerente de operações na PM3 e trabalho há mais de cinco anos com melhoria e eficiência de processos e produtos, utilizando no-code (sem código), low-code (baixo código) e IA, com foco em entregar soluções de grande impacto.

Não começamos a usar o Lovable simplesmente para testar uma nova ferramenta. Apesar da tentação, temos dificuldade em testar apenas por testar. Preferimos associar novas ferramentas à solução de problemas antigos, e foi exatamente assim que passamos a usar o Lovable: para resolver um problema que tínhamos na PM3 e para o qual, por muito tempo, não encontrávamos uma solução adequada. Nosso primeiro projeto no Lovable foi o Portal de Certificados.

Detalhando o problema dos certificados

A PM3 é uma empresa integrante do Grupo Allon, assim como a Alura, e nós recebíamos, todos os meses, inúmeros chamados no suporte sobre acesso aos certificados. Nossa plataforma de ensino era externa e não oferecia essa funcionalidade de forma adequada e nativa. Por estarmos distantes do time de desenvolvimento, não conseguíamos influenciar a construção dessa nova funcionalidade.

Por isso, quando a pessoa estudante queria acessar seu certificado porque tinha perdido o documento, não tinha encontrado o e-mail que enviamos ou até mesmo havia excluído esse e-mail, precisava entrar em contato com nosso suporte. Nosso time recebia a solicitação, acessava uma segunda ferramenta específica para emissão de certificados, fazia o download do documento e o enviava novamente. Apesar de simples, era um processo manual que nosso time precisava executar e que gerava uma espera desnecessária para a pessoa estudante.

Não era um problema complexo do ponto de vista conceitual. A necessidade estava clara: precisávamos que a pessoa estudante conseguisse consultar e acessar seu próprio certificado com agilidade. Contudo, sem um time de desenvolvimento interno para transformar essa necessidade em uma solução nativa e segura na plataforma — adequada para a exposição desses dados —, o esforço parecia desproporcional ao problema que tínhamos.

Implementando o portal de certificados com Lovable

Quando começamos a estudar e conhecer novas ferramentas disponíveis no mercado, identificamos algumas que permitiam, a partir de descrições e especificações, criar páginas na internet e produtos funcionais para resolver diversos tipos de problema sem o apoio de um time técnico. Foi exatamente assim que passamos a usar o Lovable para entregar mais valor para nossas pessoas estudantes todos os dias, encurtando e facilitando a experiência de ensino.

Com o Lovable, construímos uma página responsiva e a integramos à nossa plataforma. O que isso quer dizer? Significa que desenvolvemos uma tela na qual a pessoa estudante consegue visualizar todos os seus certificados, o nome da formação na qual se certificou, a data daquela certificação e, também, realizar o download dos próprios documentos — tudo isso dentro da plataforma de ensino.

Por trás dessa solução, implementamos uma automação que valida o e-mail da pessoa estudante logada, busca esse e-mail no banco de dados específico das certificações e envia para a tela apenas os documentos emitidos para aquele endereço. Ou seja, garantimos segurança na exposição dos dados.

Identificando os desafios da agenda do evento

Depois de entregar uma solução tão relevante e ver o impacto nos atendimentos e na satisfação de nossas pessoas estudantes, percebemos que o Lovable tinha potencial para solucionar diversos outros problemas que estavam parados por motivos semelhantes, como, por exemplo, a agenda do Product Camp.

É provável que você já tenha ido a algum evento e tenha se sentido um pouco perdido ao buscar informações sobre a programação, ou tenha tido dificuldade para acessar a agenda on-line durante o evento por indisponibilidade de internet, ou ainda porque o sistema do evento não era responsivo no seu celular.

Todos os anos, durante o Product Camp, o maior evento de produtos da América Latina, tínhamos exatamente essa percepção: participantes enfrentavam dificuldades com a agenda do evento, e por muitos anos esse ponto permaneceu sem solução.

Analisando a solução com Google Sheets e suas limitações

Nós disponibilizávamos todas as informações da agenda em uma planilha no Google Sheets (Planilhas Google) por alguns motivos. Isso resolvia a atualização simples e rápida de qualquer imprevisto.

Se um palestrante cancelasse uma palestra, não conseguisse chegar no horário ou precisássemos editar o horário de algo, conseguíamos acessar o Google Sheets e rapidamente fazer essa edição, disponibilizando-a de maneira simultânea para todas as pessoas participantes do evento. Além da capacidade de atualização ágil da nossa agenda no Google Sheets, a planilha era muito fácil de carregar no celular: leve e sem depender de muita internet disponível no evento para funcionar.

Apesar desses benefícios, a planilha não é prática de visualizar no celular e não oferece uma navegação agradável. Não foi pensada para circular entre salas, pesquisar palestras ou favoritar conteúdos. É difícil visualizar uma programação extensa, encontrar palestras específicas ou entender rapidamente o que está acontecendo em determinado horário durante o evento. Tínhamos, portanto, uma solução que funcionava muito bem para a nossa operação, pois permitia atualização rápida e era leve de carregar, mas não atendia tão bem a experiência da pessoa participante.

Durante muito tempo, criar uma agenda própria parecia um projeto grande demais para esse problema. Mais uma vez, a falta de um time técnico interno era um ponto de atenção. Tínhamos receio de perder autonomia e agilidade para fazer edições de último minuto, comuns em eventos, e também de acabar com um aplicativo ou site muito pesado, inviabilizando o carregamento com o Wi‑Fi de um evento grande.

Construindo a agenda no Lovable com Supabase

Foi exatamente nesse contexto que o Lovable entrou. Construímos uma tela na qual a pessoa participante consegue navegar, com abordagem mobile first (prioriza dispositivos móveis), para buscar palestras, filtrar a programação por trilhas de interesse ou por salas, visualizar os detalhes de cada conteúdo, consultar informações sobre palestrantes e favoritar as sessões que deseja acompanhar.

Dentro do Lovable, fizemos a conexão com o Supabase, uma ferramenta de banco de dados com plano gratuito bastante relevante e conexão nativa com o Lovable. Foi o Supabase que nos permitiu manter agilidade e autonomia para a edição das palestras. É como se lá tivéssemos nossas planilhas hospedadas. Dessa forma, conseguimos manter a atualização rápida das informações, de forma independente e segura, sem precisar de revisão de código, alteração de estrutura ou publicação de versões.

Foi exatamente assim que entregamos a agenda completa do Product Camp para mais de 3 mil participantes. A solução manteve a agilidade necessária para a operação e proporcionou uma experiência muito melhor, mais simples e agradável para quem estava no evento.

Refletindo sobre os impactos e a mudança de mentalidade

Esses dois projetos, embora muito diferentes, evidenciam a mesma mudança. No caso do Certificado, reduzimos uma etapa manual relevante do nosso suporte e demos mais autonomia para as pessoas estudantes. No caso do Product Camp, melhoramos a experiência de milhares de pessoas durante o evento e mantivemos a flexibilidade do time para atualizar a programação.

Nos dois contextos, o principal ponto de virada não foi perceber que conseguíamos construir de forma autônoma uma tela bonita. Muito pelo contrário: foi entender que conseguíamos construir uma solução completa de forma autônoma, sem depender de um time técnico, podendo testar, ajustar e publicar sem um fluxo tradicional de desenvolvimento. Isso muda bastante a forma como pensamos a resolução de qualquer problema. Antes, essas e tantas outras ideias entravam em um backlog (lista de pendências), pois exigiam orçamento dedicado, contratação e até priorização técnica para sair do papel. Com o Lovable, passaram a ser problemas que o próprio time conseguia solucionar.

Para nós, essa foi a principal mudança de mentalidade. Não significa que qualquer produto possa ser construído sem pessoa desenvolvedora, com uso de no-code (sem código), low-code (pouco código) ou IA, nem que a parte técnica por trás dos produtos tenha deixado de ser importante. Muito pelo contrário: significa que os times que conhecem profundamente os problemas agora conseguem avançar muito mais nos testes e no desenho das soluções antes de depender de uma estrutura tradicional de desenvolvimento. Agora, conseguimos transformar uma necessidade em uma primeira versão, testar a experiência, identificar limitações, fazer ajustes e entender muito melhor o produto que deve ser construído antes de ser entregue a um time mais robusto.

O Lovable, mais uma vez, não eliminou a complexidade; reduziu a distância entre perceber um problema e colocar uma solução funcionando no ar.

Case: PM3 - AI Product Builder - Mão na massa: ferramentas de IA para criar sites e protótipos

Apresentando a interface e recursos do Lovable

Para quem nunca utilizou o Lovable, esta é a interface inicial. Após criar a conta, visualizamos exatamente estas informações. Em Ready to Build (pronto para construir), está o chat (conversa) no qual conseguimos interagir com o Lovable. Nesse chat, é possível construir (opção Build (construir)) ou conversar e planejar.

Na lateral, visualizamos todos os Workspaces (espaços de trabalho) aos quais temos direito e acesso. Também vemos todos os nossos projetos: os marcados como mais importantes e principais, aqueles dos quais somos proprietários (isto é, que construímos) e os que foram compartilhados conosco.

Um ponto importante sobre o Lovable é que, no plano gratuito, há 5 créditos diários, limitados ao uso de 30 créditos durante o mês. É preciso atenção caso estejamos em uma conta gratuita. Para economizar créditos, é fundamental saber exatamente o que queremos construir. Por isso, o primeiro prompt — o primeiro momento de conversa — precisa estar bem definido. Recomendamos usar outra IA para refinar cada vez melhor o projeto.

Escrevendo em linguagem natural o que desejamos, o Lovable consegue construir landing pages (páginas de destino), websites (sites) e até ferramentas internas. É importante entender que o Lovable tem limitações técnicas; ele é muito eficiente para desenhar, criar pequenos MVPs (produto mínimo viável) ou produtos internos. Por trás do Lovable, há uma tecnologia que gera todo o código necessário para que a página que estamos construindo fique ativa e funcional.

Apresentando a agenda e o portal de certificados

Nesta aula, vamos mostrar a agenda do Picamp que construímos, com navegação entre trilhas e também salas, busca por palestrantes, possibilidade de favoritar palestras e consultar posteriormente as palestras marcadas como favoritas. Também vamos apresentar um pouco do processo de certificados.

Este é o portal de certificado e esta é a tela que a pessoa estudante vê quando acessa a plataforma e solicita o certificado. Na ferramenta de cursos, há um botão lateral especificamente para visualizar os certificados. Basta clicar e a interface é carregada. É nessa tela que temos a demonstração dos certificados.

Aqui estão os certificados encontrados para o e-mail da sessão atual. Foram localizados, por exemplo, Product Management, Product Marketing e Product Growth, com as respectivas datas de conclusão. Há também um aviso: caso o certificado desejado não seja localizado, é possível entrar em contato com nossa equipe pelo WhatsApp, com redirecionamento direto para a tela de atendimento, se necessário. Nos botões laterais, é possível fazer o download da certificação; ao abrir a certificação, é possível baixar a credencial.

Implementamos uma solução dentro da plataforma que apresenta com clareza todas as informações de que a pessoa estudante precisa para acessar o certificado. Antes, quando era necessário obter o documento, a pessoa precisava enviar uma mensagem ou e-mail ao suporte, aguardar o atendimento, realizar o download do documento em uma plataforma externa e, depois, receber o envio desse documento. Agora, a disponibilização desses documentos está muito mais simples e rápida.

Definindo a solução com o ChatGPT e avaliando a primeira versão

Para chegar a esse desenho de solução, começamos conversando com o ChatGPT. Tínhamos uma tabela com registros de certificados que funcionava como banco de dados. Nossa pessoa estagiária havia construído uma solução no Looker, mas ela expunha dados de outras pessoas estudantes, o que não era seguro. Queríamos desenvolver uma solução que trouxesse data, e-mail, nome, curso e link do certificado, facilitando o acesso aos documentos. Informamos também a nossa stack (conjunto de tecnologias) disponível — Tally, N8n, Zapier, Kajabi e Google Sheets — e perguntamos como solucionar o problema.

Iniciamos uma discussão detalhada sobre possibilidades e segurança, deixando claro que queríamos manter as informações dentro da plataforma de acesso da pessoa estudante. O ChatGPT foi propondo alternativas, e fomos levantando questionamentos para construirmos a solução em conjunto.

Ao final, o ChatGPT nos entregou um prompt bastante completo, com o objetivo do aplicativo, o comportamento esperado, a necessidade de um front (interface), as requisições e o formato de dados da resposta. Ponto de atenção: o prompt veio muito abrangente para uma solução aparentemente trivial.

Executamos o primeiro teste no Lovable, fornecendo todas as informações, e a construção foi iniciada. A tela inicial apresentada era exatamente a que víamos no começo. Trouxemos complexidade de responsividade desde o início, pois precisávamos que a tela fosse interativa e que já houvesse o recebimento de um e-mail para renderizar o front com as informações. Sem integração, isso não acontecia, o que dificultou os testes e trouxe uma complexidade não prevista. Essa primeira versão não funcionou bem. Chegamos a editar e perguntar como testar o aplicativo, mas o resultado ficou aquém do esperado. Partimos, então, para uma segunda versão.

Antes, voltamos a conversar com o ChatGPT sobre possibilidades. Identificamos que algo estava incorreto: não conseguíamos obter a informação necessária. Precisávamos de algo no N8n, já integrado à plataforma. Em resumo, cometemos o erro de iniciar pelo desenvolvimento da tela, para só depois fazer a integração com a automação, o banco de dados e a plataforma. Fica a dica para não repetir o mesmo erro. Era nosso primeiro projeto; faz parte do aprendizado. Hoje, faríamos de maneira diferente.

Implementando a automação no N8n e integrando o front-end

Para sair da primeira versão, resolvemos primeiro construir uma conexão no N8n que retornasse exatamente a informação desejada: uma chamada de webhook (gatilho HTTP) com acesso ao nosso banco de dados (uma planilha no Google Sheets), transformações de dados para o formato esperado pelo Lovable e uma resposta via webhook. O que esse fluxo faz? Sempre que o botão aciona o aplicativo do Lovable, ele chama também o webhook cadastrado. Esse webhook obtém o e-mail da pessoa usuária logada na plataforma, busca esse e-mail na planilha, ajusta a formatação dos dados e responde no formato esperado. No novo aplicativo, bastou cadastrar os webhooks, pois o Lovable já compreendia como funcionava.

Agora que a automação do N8n responde ao Lovable com os certificados, começamos pelo código do front capturando o e-mail da URL e preparando o estado da tela. Observe como inicializamos os estados e, no primeiro carregamento, lemos o parâmetro email para disparar a busca:

import { useState, useEffect } from "react";

export default function App() {
  const [email, setEmail] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [certificates, setCertificates] = useState<any[]>([]);

  useEffect(() => {
    const searchParams = new URLSearchParams(window.location.search);
    const emailParam = searchParams.get("email");

    if (emailParam) {
      setEmail(emailParam);
      fetchCertificates(emailParam);
    } else {
      setError("Email não encontrado na URL.");
    }
  }, []);

Em seguida, implementamos o método que conversa com o N8n: ele faz um POST para o webhook com o e-mail e, ao receber a resposta, popula a lista de certificados (ou apresenta uma mensagem de erro, quando não há resultados).

  const fetchCertificates = async (userEmail: string) => {
    setLoading(true);
    try {
      const response = await fetch("YOUR_WEBHOOK_URL", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email: userEmail }),
      });
      
      const data = await response.json();
      
      if (data.certificates && data.certificates.length > 0) {
        setCertificates(data.certificates);
      } else {
        setError("Nenhum certificado encontrado.");
      }
    } catch (err) {
      setError("Erro ao buscar os certificados.");
    } finally {
      setLoading(false);
    }
  };

Testando a segunda versão e ajustando datas e design

Com a automação e o aplicativo funcionando nessa segunda versão, conseguimos testar de forma mais positiva. No preview (pré-visualização), utilizando um e-mail existente na planilha, à medida que inserimos a informação, o comportamento reproduz o da plataforma: as informações são carregadas e os certificados são exibidos. Assim, validamos tanto a lógica de pensamento construída quanto o que pedimos para o Lovable implementar.

Apareceram pequenos erros, como questões de data e formatação. O código já convertia para o formato brasileiro, mas o N8n tentava reconverter essas datas, interpretando-as e apresentando-as no formato americano. Solicitamos que o N8n não ajustasse, e esse foi o último ajuste realizado na aplicação.

Os ajustes de design e layout foram feitos escrevendo e solicitando ao Lovable de maneira objetiva. Por exemplo: ajustes visuais de conteúdo e botão; remoção completa do botão de download — queríamos que o botão fosse diretamente “Ver certificado”; definição da cor específica do botão; elementos do topo da página e do rodapé. Em linguagem simples, descrevemos o que desejávamos e o Lovable executou.

Renderizando a interface final e analisando o projeto

No código, a renderização final reflete esses ajustes: estados de erro e carregamento claros, e a tabela com a ação “Ver Certificado” apontando diretamente para o link recebido do N8n/planilha.

  if (error) {
    return (
      <div className="flex flex-col items-center justify-center min-h-screen bg-gray-50 text-gray-800">
        <h1 className="text-2xl font-bold mb-4">Ops! Algo deu errado</h1>
        <p className="mb-4">{error}</p>
        <p>
          Possivelmente estamos passando por algum problema técnico, por favor entre em contato com o nosso time através do link:{" "}
          <a href="YOUR_SUPPORT_LINK" className="text-blue-500 hover:underline">
            YOUR_SUPPORT_LINK
          </a>
        </p>
      </div>
    );
  }

  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-screen bg-gray-50 text-gray-800">
        <p>Carregando seus certificados...</p>
      </div>
    );
  }

  return (
    <div className="flex flex-col items-center min-h-screen bg-gray-50 text-gray-800 p-8">
      <h1 className="text-3xl font-bold mb-8">Olá! Aqui estão os seus certificados.</h1>
      
      <table className="w-full max-w-4xl bg-white shadow-md rounded-lg overflow-hidden">
        <thead className="bg-gray-200">
          <tr>
            <th className="p-4 text-left font-semibold">Data</th>
            <th className="p-4 text-left font-semibold">Curso</th>
            <th className="p-4 text-center font-semibold">Ação</th>
          </tr>
        </thead>
        <tbody>
          {certificates.map((cert, index) => (
            <tr key={index} className="border-b last:border-0 hover:bg-gray-50 transition-colors">
              <td className="p-4">{cert.data}</td>
              <td className="p-4">{cert.curso}</td>
              <td className="p-4 text-center">
                <a
                  href={cert.link}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 transition-colors"
                >
                  Ver Certificado
                </a>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );

Para quem tem mais contexto de código, na seção code é possível ver tudo o que foi desenvolvido ao longo do projeto, inclusive um README (leia-me) explicando como funciona e o que faz, além do favicon (ícone do site). Mantivemos o favicon do Lovable porque o aplicativo está conectado à plataforma e ninguém acessa diretamente; se quiséssemos, poderíamos trocá-lo. Em outra seção, há analytics (análises) com métricas como número de visitantes nos últimos 7 dias (tivemos 97), bounce rate (taxa de rejeição) e os caminhos pelos quais as pessoas acessam o aplicativo. Também podemos conectar um back-end (camada de servidor). Hoje, os certificados estão em uma planilha no Google Sheets, mas poderiam estar no próprio Lovable. Optamos por manter no Google Sheets porque outras automações enviam as informações de certificados para lá, e seria mais complexo fazer essa modificação; ainda assim, é totalmente viável executá-la agora.

Explorando o preview, contornando limitações e conectando ao Kajabi

Voltando ao preview: pontos importantes para um primeiro contato com o Lovable. Na lateral, é possível visualizar essa pré-visualização. No caso do portal, ele sempre abrirá com a mensagem de que algo deu errado; precisamos informar o e-mail como campo para acionar o fluxo. No painel lateral, também encontramos a forma de publicação e, se desejarmos, conseguimos adicionar um domínio. Essa experiência de erro/carregamento que comentamos está refletida no código que mostramos acima.

Nós estamos em uma conta gratuita. Vemos que há a demonstração do plano Pro. Da mesma forma, não conseguimos editar o código diretamente escrevendo na interface; precisamos enviar as edições e o que desejamos que seja feito pelo chat. A edição direta no código é uma funcionalidade exclusiva do plano Pro. Ainda assim, o fluxo funciona muito bem e não precisamos disso para construir nosso projeto.

Depois de fazermos a conexão do n8n, testarmos e validarmos, com tudo funcionando como esperado, chegou a hora de realizar a conexão com o Kajabi. Nesse ponto, houve mais necessidade de código para construirmos a sidebar (barra lateral) e criar o botão, que nada mais é do que a chamada para o Lovable. Fazemos a chamada para o link publicado do nosso aplicativo, levando para dentro do n8n o e-mail da pessoa estudante logada dentro da plataforma. Trata-se de uma solução simples usando Lovable, n8n e nossa plataforma de cursos.

Iniciando a agenda do Product Camp e iterando o design

Indo agora para o desenvolvimento da agenda do Product Camp (evento), começamos exatamente da mesma forma: um prompt (instrução) criado em conjunto com outra inteligência artificial, que ajudou a estruturar melhor o projeto, seguindo uma linguagem bastante natural. O objetivo: criar um aplicativo de agenda para um evento, com alguns requisitos.

Inicialmente, imaginamos manter uma planilha do Google Sheets (planilhas do Google) como base, que precisaria atualizar e sincronizar automaticamente com o aplicativo, ter uma interface clara e permitir filtrar por trilhas, salas e palestrantes. Assim, já trouxemos o que era esperado para a primeira versão.

No preview (pré-visualização), vimos a primeira versão que o sistema gerou. Ela já estava próxima do objetivo: era possível buscar por palestrantes, filtrar por trilhas e também por salas, e ver as palestras em cards (cartões), com detalhes sobre a pessoa palestrante, a própria palestra, horários e etiquetas (tags). Estava bem próximo do que queríamos, embora ainda fora do nosso design.

Passamos então a solicitar ajustes de design system (sistema de design) e mudanças que gostaríamos que fossem sendo implementadas, novamente em linguagem natural. Por exemplo: “alterar o background (fundo) para um degradê de determinada cor para outra”. Como o time estava aprendendo a usar a ferramenta, fomos solicitando alterações muito pequenas, o que não é o ideal. Vale estruturar camadas e fases do projeto: se houver alterações de design, envie três ou quatro em conjunto, sempre lembrando o Lovable de não fazer outra alteração além do que está sendo pedido. Esse foi o fluxo inicial de desenvolvimento.

Conectando ao Supabase e modelando as tabelas

Em seguida, entendemos que poderíamos fazer a conexão com o Supabase. Esse é um ponto importante de mostrar. No ambiente de cloud (nuvem), temos a conexão direta com o Supabase. O aplicativo do Lovable foi atualizado e trouxe essa conexão nativa, ainda mais integrada. Pelo próprio Lovable, conseguimos acessar todas as palestras do Product Camp (evento). Estas visões são de 2025. Conseguimos ver a tabela com ID da pessoa palestrante, nome completo, cargo, empresa e biografia, informações que compõem a descrição da palestra.

Temos também a agenda do evento. Novamente, são tabelas com descrição da palestra, título, data de realização, hora de início, hora de fim e todas as informações necessárias para que o aplicativo funcionasse. Há também uma parte de usuários que permitia acompanhar, no período, quantas pessoas usuárias estavam ativas no aplicativo.

Antes dessa conexão nativa existir, tínhamos uma conexão externa com o Supabase. Vamos mostrar como funcionava. No Supabase, conseguimos enxergar o projeto da agenda do Product Camp (evento) e, na lateral, todas as tabelas usadas durante o projeto. Por ali, também ficava muito fácil acompanhar qual era a palestra, o título, a descrição, o horário e fazer edições. Caso fosse necessária alguma alteração, bastava inserir/atualizar o registro, e isso já era refletido no aplicativo para as pessoas participantes do evento.

Essa foi talvez a parte mais complexa do desenvolvimento, pois precisamos planejar cuidadosamente a integração das tabelas. O Supabase ajuda nesse ponto, trazendo a visualização do banco de dados, com as conexões. Trabalhamos com três tabelas e como elas se conectam pelos IDs, o que ajudou muito. Há um dado interno com o ID da palestra e uma contagem, necessário porque, no nosso preview (pré-visualização), implementamos o recurso de favoritar.

Otimizando favoritos e evoluindo a arquitetura

O favoritar também exigiu estudo para implementação. Não queríamos que o aplicativo/site ficasse pesado. Precisávamos que o acesso fosse em mobile (dispositivo móvel), responsivo e com baixo uso de internet, pois o Wi‑Fi pode ser instável em eventos grandes. Assim, não usamos uma estrutura complexa de salvamento de dados e, em nenhum momento, temos login (autenticação) de pessoa usuária. Evitamos fricção para a pessoa participante do evento, que não precisa autenticar nem registrar dados. Salvamos as informações localmente, no cache (armazenamento temporário) do dispositivo que acessa o site. Portanto, se o acesso ocorrer no computador e depois no celular, os dados possivelmente não estarão sincronizados. Como as pessoas participantes geralmente acessam a agenda durante o evento, ou pouco antes, pelo celular, a experiência foi adequada. Não recebemos reclamações sobre esse ponto. Entregamos, assim, uma solução mais viável, menos complexa e mais leve.

Um ponto positivo foi observar a evolução. No início, queríamos conexão com Google Sheets (planilhas do Google); depois, entendemos que poderíamos usar o Supabase, que traz mais estrutura e a autonomia de que precisávamos. Conseguimos fazer todas as edições necessárias por lá de maneira ágil, mantendo toda a premissa de construção da solução.

Demonstrando a navegação e filtros da agenda

Ao final, o que entregamos para todas as pessoas participantes do evento foi exatamente essa agenda. Aqui estamos mostrando no preview (pré-visualização), mas, se quisermos, basta clicar em Publish (publicar) e copiar o site “oficial”, que abrirá a mesma página da última versão — a versão que subiu ao ar. Por aqui, é possível, por exemplo, aplicar um filtro: procurar por “Farinazo” para ver a participação na abertura oficial do evento; verificar se alguma pessoa conhecida vai palestrar e em quais momentos. Também é possível filtrar por palestrante e por tema, como “IA”. Ao digitar “IA”, o sistema já traz várias palestras relacionadas ao tema, inclusive filtrando pelos títulos das palestras.

Na parte inferior, há as trilhas cadastradas (as trilhas oficiais do evento) e as salas disponíveis. Por exemplo, é possível verificar se há uma sala dedicada a IA e decidir permanecer nela, visualizando todas as palestras correspondentes.

Na visão Agenda, também é possível filtrar por dia. Sem seleção, aparece a agenda completa do evento; selecionando o dia 10, aparecem apenas as palestras do dia 10; selecionando o dia 11, apenas as do dia 11. Isso facilita a localização da pessoa participante ao chegar ao evento. Como são dois dias, basta aplicar o filtro no topo para acessar rapidamente.

Na lateral, há a seção de favoritos. Ao favoritar, por exemplo, “ex-assistente de viagem” e, em seguida, outro item no dia 10, basta clicar em Favoritos para ver exatamente o que foi marcado para cada um dos dias, respeitando o filtro aplicado. Os filtros se mantêm ao longo da navegação.

Outro ponto importante para nós era a responsividade. Precisávamos de uma boa experiência em mobile (dispositivo móvel). A agenda é mobile first (prioridade para dispositivos móveis), pois é pouco provável que uma pessoa participante de evento esteja com um notebook aberto para navegar na agenda. Preocupamo-nos para que a busca, as trilhas e as salas se ajustassem bem a telas de diferentes tamanhos.

Compartilhando aprendizados e incentivando o início

Depois de mostrarmos essas duas soluções, valem alguns aprendizados. Nem sempre a primeira versão, o primeiro MVP (produto mínimo viável), será a que vai ao ar. Em nossos dois casos — o portal de certificados e a agenda do Product Camp (evento) — houve uma primeira versão que não foi entregue a pessoas usuárias. A agenda do Product Camp (evento) começou com uma integração no Google Sheets (planilhas do Google), que entendemos não ser a mais funcional; então evoluímos para uma integração com o Supabase, que trouxe mais estrutura, manteve nossa agilidade e entregou um comportamento muito bom para todas as pessoas participantes do evento.

O mesmo vale para a questão de salvamento. Começamos com a ideia de construir uma estrutura bastante complexa de login (autenticação), controle de acesso e gestão em banco de dados dos favoritos. Depois, entendemos que não era necessário e passamos a salvar diretamente no cache (armazenamento temporário) do site. No portal de certificados, ocorreu o mesmo: a primeira versão não funcionou como esperávamos. No primeiro prompt (instrução), trouxemos complexidade demais para uma construção que ainda nem existia; a primeira versão já exigia uma automação por trás que ainda não havia sido construída. Então, demos alguns passos para trás, conversamos novamente com o ChatGPT, que ajudou a refinar o projeto. Construímos a automação e, na segunda versão, conseguimos testar de ponta a ponta antes de levar para a plataforma. Com a automação construída e o MVP 2 (segunda versão do produto mínimo viável), todo o processo funcionou: desde a construção da tela, a chamada ao nosso banco de dados e a resposta das informações necessárias no front-end (camada de apresentação). Logo depois, com tudo funcionando, implementamos na plataforma para que as pessoas alunas pudessem testar e trazer feedbacks (retornos) de funcionamento.

A mensagem final é: comece. A partir do momento em que você começar a ver as construções dentro do Lovable, ou perceber o potencial que elas têm, temos certeza de que você não vai largar a possibilidade de construir soluções para os problemas que vem identificando. Fica uma provocação final: qual seria o seu primeiro produto, ferramenta ou projeto dentro do Lovable?

Sobre o curso Case PM3 - AI Product Builder

O curso Case PM3 - AI Product Builder possui 32 minutos de vídeos, em um total de 5 atividades. Gostou? Conheça nossos outros cursos de IA para Produto & Negócio 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:

• Case: PM3 - AI Product Builder