▲ Sessão da Comunidade: Como a HubSpot usa o Vercel

VVercel
Computing/SoftwareAdvertising/MarketingInternet Technology

Transcript

00:00:00Olá,
00:00:01bem-vindos à transmissão ao vivo da comunidade Purcell desta semana.
00:00:22Sou Amy Egan.
00:00:23Faço parte da equipe de comunidade aqui na Purcell.
00:00:27Lembrando que estamos transmitindo para o X e YouTube,
00:00:30mas se quiserem participar do chat,
00:00:32por favor,
00:00:32entrem na comunidade e cliquem em "participar" no evento.
00:00:35Verão o chat aparecer ao lado e vou garantir que recebamos os vossos comentários se tiverem alguma pergunta.
00:00:42Fiquem à vontade para fazer perguntas durante a sessão e as faremos todas no final.
00:00:47E um lembrete,
00:00:48se estiverem no chat,
00:00:49por favor,
00:00:50lembrem-se de ser respeitosos e seguir o nosso código de conduta.
00:00:54E com isso dito,
00:00:55gostaria de dar as boas-vindas aos nossos convidados ao palco.
00:00:58No mês passado,
00:00:59o meu colega de equipe,
00:01:00Jacob,
00:01:00juntou-se à equipe da HubSpot para falar sobre como trazer o seu próprio backend para o programa de desenvolvedores da HubSpot.
00:01:05E este mês,
00:01:05a equipe da HubSpot junta-se a nós para falar sobre como eles usam a Purcell.
00:01:09Então, bem-vinda, Brooke.
00:01:12Muito obrigada, Amy.
00:01:13Olá a todos.
00:01:14O meu nome é Brooke Bond e estou entusiasmada por estar aqui na comunidade Purcell.
00:01:20Tenho apenas algumas perguntas que podem responder no chat,
00:01:25mas gostaríamos de saber: já usaram o HubSpot antes?
00:01:28Sabem quem somos?
00:01:30Já desenvolveram connosco?
00:01:31E se sim, o que construíram?
00:01:34Adoraria ver todos esses comentários no chat.
00:01:38Seria ótimo, mas só temos 30 minutos.
00:01:42Então quero garantir que abordemos todo o nosso ótimo conteúdo.
00:01:45Então, hoje vamos rapidamente rever o que é o HubSpot?
00:01:49Quem somos nós como equipe DevRel da HubSpot?
00:01:51Como podemos usar o HubSpot e a Purcell juntos?
00:01:54E depois temos alguns exemplos de como a nossa equipe DevRel da HubSpot tem usado a Purcell nos nossos diferentes projetos que fazemos na HubSpot.
00:02:02E,
00:02:02finalmente,
00:02:03deixaremos um pouco de tempo para perguntas e respostas.
00:02:04Então,
00:02:05como a Amy disse,
00:02:06se tiverem alguma pergunta,
00:02:07por favor,
00:02:08coloquem-na no chat e teremos todo o gosto em respondê-las no final.
00:02:12Hoje serei acompanhada por dois dos meus colegas,
00:02:16Dennis Edson e Chris Riley.
00:02:18E estamos muito entusiasmados por estar aqui.
00:02:19Então,
00:02:20primeiro vamos estabelecer as regras básicas,
00:02:22não as regras básicas,
00:02:23vamos definir o que é o HubSpot.
00:02:25O HubSpot é um CRM inteligente para empresas.
00:02:29Temos um conjunto de softwares de marketing,
00:02:32vendas e serviços,
00:02:34e temos uma plataforma unificada para desenvolvedores construírem as integrações.
00:02:39E é nisso que a equipe DevRel concentra os seus esforços: ajudar os nossos desenvolvedores a entender como usar a plataforma de desenvolvedores.
00:02:47A imagem que veem aqui no ecrã é uma página de registo de contacto do CRM.
00:02:53Então,
00:02:54com a plataforma de desenvolvedores da HubSpot,
00:02:57todo o trabalho que criam é alojado dentro de um projeto HubSpot.
00:03:00E na plataforma de desenvolvedores da HubSpot,
00:03:03podem construir tanto aplicações estáticas internas quanto aplicações OAuth externas.
00:03:09E se construírem uma aplicação externa,
00:03:11podem colocá-la no nosso marketplace da HubSpot,
00:03:14e então qualquer pessoa com uma conta HubSpot pode ir ao marketplace e descarregar a vossa aplicação.
00:03:21Então,
00:03:21digamos que são a Vercel e querem construir uma integração onde as pessoas possam ver as suas métricas da Vercel dentro da sua conta HubSpot.
00:03:29Poderiam ir em frente e construir isso,
00:03:31criar o fluxo OAuth,
00:03:32fazer com que as pessoas descarreguem isso para a sua conta,
00:03:35e então elas poderiam ver as suas coisas da Vercel diretamente dentro do HubSpot e vice-versa.
00:03:40Agora,
00:03:40a captura de ecrã que tenho aqui neste momento é a página de visão geral do desenvolvimento.
00:03:46Então,
00:03:46temos uma página de visão geral de desenvolvimento dedicada para os desenvolvedores quando estão na sua conta,
00:03:52para que possam ver todos os projetos que estão a fazer.
00:03:54Também temos ferramentas de monitorização para que as pessoas possam ver qual é o uso da API e tudo mais.
00:04:01Então,
00:04:02todas as vossas coisas num só lugar,
00:04:03muito fácil para vocês entrarem.
00:04:05Não precisam de se preocupar com o ruído de todas as outras coisas que não fazem parte dos vossos projetos HubSpot.
00:04:11Então,
00:04:11agora quero apenas apresentar-nos rapidamente como equipe.
00:04:15Somos um grupo interdisciplinar de desenvolvedores e gestores que ajudam os nossos desenvolvedores a prosperar no ecossistema HubSpot,
00:04:23e ajudamos a comunidade de desenvolvedores construindo soluções,
00:04:27ajudando-os a aprender as melhores práticas e criando integrações que eles podem usar.
00:04:32Organizamos eventos ao vivo como este e nos nossos próprios canais,
00:04:36participamos e falamos em conferências,
00:04:38e também garantimos que o feedback de desenvolvedores externos seja levado em consideração ao construir e lançar novos recursos.
00:04:45Então,
00:04:45estamos muito próximos dos nossos colegas de engenharia de desenvolvimento e damos-lhes o feedback da nossa comunidade para nos ajudar a melhorar os nossos produtos.
00:04:53Então,
00:04:54este é apenas um pequeno gráfico que criei para vos mostrar um pouco mais.
00:04:57Temos os nossos recursos de aprendizagem que incluem a nossa documentação para desenvolvedores,
00:05:02o nosso blog,
00:05:03o nosso YouTube e diferentes tutoriais que temos tanto no YouTube,
00:05:07GitHub,
00:05:07em diferentes lugares.
00:05:08A nossa comunidade e conexão,
00:05:10temos um Slack para desenvolvedores ao qual qualquer pessoa pode aderir.
00:05:13Também temos um fórum,
00:05:14para que as pessoas possam ir e fazer perguntas nos fóruns da comunidade.
00:05:18E realizamos eventos presenciais ao longo do ano.
00:05:22Também temos algumas ferramentas de construção e desenvolvimento.
00:05:25Então,
00:05:25temos a nossa avaliação de qualidade de aplicações,
00:05:28que é a nossa equipe de qualidade do ecossistema.
00:05:29Eles analisam todas as aplicações que vão para o nosso marketplace e garantem que estão de acordo com o nosso padrão.
00:05:37E depois também temos aplicações de exemplo.
00:05:39E, finalmente, isto é novo, mas temos o nosso Dev MCP.
00:05:42E trabalhamos muito de perto com os engenheiros que o construíram para que pudessem entender como poderíamos criar um produto MCP realmente ótimo para os nossos desenvolvedores.
00:05:51E, finalmente, apresentação e crescimento.
00:05:53Temos uma seção de estudos de caso onde pegamos ótimos programas de desenvolvedores e destacamos como eles estão a usar o HubSpot.
00:06:02Também temos certificações de marketplace.
00:06:04Então,
00:06:05quando publicam a vossa aplicação no nosso marketplace,
00:06:07podem obter a certificação de marketplace,
00:06:09o que significa que terão um pequeno visto azul ou apenas um símbolo para que as pessoas saibam que a vossa qualidade é assegurada.
00:06:16E, finalmente, ajudamos com a coordenação GTM.
00:06:19Então,
00:06:19quando temos grandes lançamentos ao longo do ano,
00:06:22ajudamos com os materiais de marketing para isso,
00:06:25garantindo que falamos com o nosso público de desenvolvedores da melhor forma para eles.
00:06:30Agora que falamos sobre quem somos e o que fazemos,
00:06:33vamos falar sobre como usamos o HubSpot e a Vercel juntos.
00:06:37Então,
00:06:38como a Amy disse,
00:06:39no mês passado realizamos um webinar sobre como trazer o seu próprio backend.
00:06:43Este é um dos principais casos de uso sobre os quais vou falar aqui,
00:06:47que é usar a Vercel como esse serviço de backend.
00:06:50Neste caso,
00:06:50têm a vossa aplicação HubSpot,
00:06:52que é o nosso frontend,
00:06:54e que tem componentes de UI construídos com React que colocam na vossa página para que possam renderizar isso para o frontend dentro de uma conta HubSpot.
00:07:03E depois têm o vosso backend da Vercel,
00:07:05que irá conter o vosso código.
00:07:06E então o que farão é,
00:07:07dentro do vosso código,
00:07:09usarão hubspot.fetch para chamar o vosso backend através da API que criarem.
00:07:14E então isso irá retornar e manipular os dados e depois renderizar uma resposta para o frontend.
00:07:20Para mostrar como isso funciona,
00:07:22vou rapidamente apresentar um exemplo que construí,
00:07:26e este é um gerador de ficheiros LLMS.txt.
00:07:30Tentem dizer isso três vezes rápido.
00:07:32O que isto faz é que o gerador de ficheiros LLMS.txt é uma aplicação HubSpot que recebe um URL de página web ou de sitemap,
00:07:41analisa os dados dessa página para criar esse ficheiro.
00:07:45E um ficheiro LLMS.txt é um ficheiro para crawlers de pesquisa de IA,
00:07:51para que não tenham todo aquele HTML extra.
00:07:55Ele renderiza a vossa informação num formato de ficheiro markdown para que possam lê-la muito rapidamente.
00:08:02E isto usa o HubSpot fetch para chamar o endpoint da API da Vercel e a API de ficheiros do HubSpot para carregar esse ficheiro para a vossa conta HubSpot.
00:08:11A captura de ecrã que estou a mostrar aqui é o meu código,
00:08:15e é aqui que estou a chamar a API da Vercel.
00:08:18E aqui,
00:08:19eu apenas envolvi isso num try-catch,
00:08:23e depois enviei o endpoint.
00:08:25Agora que falei sobre isso, vamos ver como funciona.
00:08:28Então, vou para o frontend para que possam ver.
00:08:31Isto está dentro da nossa conta HubSpot,
00:08:35e aqui temos o gerador DevRel Labs.
00:08:38Isto é o que é conhecido como uma página de configurações da aplicação,
00:08:41e a razão específica pela qual escolhi que isto fosse renderizado numa página de configurações da aplicação é porque este é um tipo de trabalho muito administrativo que as pessoas fariam para o seu website.
00:08:51Então,
00:08:52eu não queria torná-lo acessível a qualquer pessoa dentro da vossa conta HubSpot.
00:08:55Eu queria garantir que apenas as pessoas certas tivessem acesso a isto para que as pessoas não estivessem a gerar estes ficheiros e a causar problemas com os crawlers de pesquisa de IA.
00:09:04Então aqui,
00:09:04podem escolher o vosso tipo,
00:09:06podem colocar um sitemap completo,
00:09:08ou podem colocar um único URL.
00:09:10Obviamente,
00:09:11um sitemap,
00:09:11se o vosso website for muito grande,
00:09:13levará algum tempo.
00:09:15Então, o URL único será muito mais rápido.
00:09:17Então, podem simplesmente colocar o vosso URL.
00:09:20Então,
00:09:21vou apenas colocar o nosso developers.hubspot.com,
00:09:25e depois irá gerar...
00:09:26Oh, tive um erro..
00:09:28Ok.
00:09:29Bem, isso é divertido.
00:09:30Isto é ao vivo.
00:09:31Então, vamos ver.
00:09:32Vamos às minhas configurações da Vercel e ver se recebemos uma mensagem de erro em...
00:09:37Bem, não nos logs de construção..
00:09:39Então, aqui no meu backend, podemos ver as coisas.
00:09:43Então,
00:09:44vamos ver os logs de tempo de execução e ver se conseguimos encontrar o erro.
00:09:46Bem,
00:09:47as coisas não estão a funcionar,
00:09:49mas se estivesse numa situação perfeita,
00:09:53o que aconteceria é que o ficheiro llms.txt seria gerado e carregado para a vossa conta HubSpot usando aquela função serverless da Vercel que criei.
00:10:04Então,
00:10:05agora vou passar a palavra ao resto da minha equipe para falar sobre como também usamos o HubSpot de outras maneiras,
00:10:11não apenas trazendo a Vercel como backend para o HubSpot,
00:10:15mas também para diferentes coisas que estamos a fazer.
00:10:18Então, vou passar a palavra ao Chris.
00:10:20Obrigado.
00:10:22Uma coisa que adoro nas demos que não acabam por funcionar 100% perfeitamente é que nos permite ter empatia por todos os desenvolvedores que estão a assistir e pela nossa comunidade e assim por diante.
00:10:37Se pudermos voltar rapidamente aos slides na máquina da Brooke.
00:10:43Perfeito.
00:10:44Obrigado.
00:10:45Então,
00:10:46claro,
00:10:46adoraríamos que todos vocês pegassem na vossa criatividade e ideias e as levassem aos clientes da HubSpot através de uma integração usando as nossas APIs.
00:10:57Mas como também usamos a Vercel dentro da DevRel para experimentar e executar testes muito rápidos e construir protótipos muito rápidos para que possamos testar ideias que temos como equipe e levá-las ao resto da organização.
00:11:15Então,
00:11:16temos algo chamado DevRel Labs e DevRel Labs é um conjunto de regras,
00:11:21é um conjunto de processos que se espalha por todas as relações com desenvolvedores,
00:11:27e nos dá a oportunidade de ter uma forma padrão de experimentar,
00:11:32pegar nessas experiências,
00:11:34validá-las ou invalidá-las,
00:11:36como acontece às vezes,
00:11:37e depois graduá-las.
00:11:39Talvez seja para um produto ou para uma solução mais polida depois.
00:11:46E então,
00:11:47o que vamos falar agora são duas experiências que eu tenho liderado,
00:11:52e depois passaremos para o Dennis para falar sobre aquela em que ele tem trabalhado.
00:11:58Mas todas estas experiências,
00:11:59elas têm um processo claro e um objetivo claro à sua volta.
00:12:03E uma delas é que nós,
00:12:04como muitas organizações,
00:12:06temos uma comunidade Slack para desenvolvedores externos.
00:12:10Este é um lugar onde as pessoas que estão a construir soluções em cima do HubSpot podem vir,
00:12:17podem interagir e aprender e ajudar-se mutuamente.
00:12:21Porque,
00:12:22na verdade,
00:12:22a melhor comunidade é uma comunidade que tem interação entre pares.
00:12:27E então pensamos,
00:12:29o que podemos fazer para trazer soluções e recursos mais rapidamente a estes membros da comunidade?
00:12:38E uma das soluções óbvias,
00:12:40tenho certeza que já interagiram com vários bots do Slack por aí,
00:12:43era construir um bot do Slack.
00:12:45Mas quando pensamos num bot do Slack,
00:12:48não é algo que queríamos que dominasse a conversa.
00:12:51Queríamos tê-lo lá para interação.
00:12:53Então, não deveria ser muito intrusivo.
00:12:57E queríamos tê-lo lá para obter os recursos rápidos em tempo real para a nossa comunidade externa.
00:13:05E então construímos isso na Vercel.
00:13:08Porque isso nos permite criar um protótipo muito rapidamente,
00:13:13e depois avaliar a sua qualidade,
00:13:16e depois a partir daí dizer,
00:13:18o que vamos fazer a seguir com isto?
00:13:21E neste momento,
00:13:22estamos na fase de experimentação e validação.
00:13:25Então,
00:13:25trabalhando em conjunto com o resto da nossa equipe de comunidade na DevRel,
00:13:29decidiremos para onde irá a seguir.
00:13:31Então,
00:13:31queria mostrar rapidamente no meu ecrã os bots,
00:13:35e o que veem aqui que temos,
00:13:36eu realmente gosto desta tela inicial porque é divertida,
00:13:40sabem,
00:13:41gráficos e tabelas e números são sempre muito divertidos.
00:13:45Mas temos uma tela simples que nos dá alguns dados sobre a adoção do bot.
00:13:51Mas há duas maneiras de interagir com o bot.
00:13:53Posso fazê-lo via mensagem direta,
00:13:55ou temos alguns canais onde o bot responderá automaticamente a perguntas relacionadas com suporte.
00:14:01Então,
00:14:01vou em frente e enviar uma pergunta de forma muito simples: como começo com o HubSpot Dev MCP.
00:14:08E o que eu queria mostrar,
00:14:10porque estou um pouco limitado no que posso realmente mostrar do nosso backend,
00:14:15é o registo em tempo real que obtemos disto na Vercel.
00:14:19Então,
00:14:20isto permite-me,
00:14:22vou dizer que este aqui é provavelmente o chat em tempo real que acabei de enviar.
00:14:33E aconteceu rapidamente, o que é uma boa notícia.
00:14:35Muda rapidamente para uma mensagem de "a pensar".
00:14:39Vai para o OpenAI para obter uma resposta.
00:14:43Volta através de uma ferramenta para ver se há recursos adicionais curados pela equipe DevRel,
00:14:49que eu poderia dar a este utilizador para o ajudar a avançar.
00:14:53Isso pode ser YouTube,
00:14:55pode ser documentação,
00:14:56pode ser todo o tipo de recursos.
00:14:58E então dará uma resposta.
00:15:00E então, estou a adivinhar que esta é a resposta, é.
00:15:06Então, agora se eu voltar a isto, e vemos que está tudo 200.
00:15:10Então, esse é o melhor cenário, certo?
00:15:13E assim foi.
00:15:14Então,
00:15:15não só me deu uma resposta,
00:15:17como também me deu artigos para consultar.
00:15:21Disse-me para entrar no Dev Slack, já estou aqui.
00:15:24Mas também me deu tutoriais e outras informações que recomenda que estariam relacionadas com a pergunta que eu estava a apresentar aqui.
00:15:35E deu-me a resposta certa,
00:15:36que é configurar o vosso ambiente de desenvolvimento,
00:15:39instalar o CLI,
00:15:40instalar o servidor MCP,
00:15:41e estão prontos para começar.
00:15:43E até deu algumas ideias sobre como começar.
00:15:47E como podem ver,
00:15:48essa foi uma forma muito simples de construirmos testes e os logs são muito importantes aqui.
00:15:56Testar uma solução usando um bot do Slack personalizado,
00:15:59onde nós na DevRel,
00:16:00a nossa principal responsabilidade não é construir soluções,
00:16:04como somos todos desenvolvedores,
00:16:06mas não estamos a construir no dia a dia.
00:16:09Então,
00:16:09tudo o que construímos precisa de ser fácil de usar e muito fluido.
00:16:15Agora,
00:16:15isto preparou-nos para algo que me surpreendeu um pouco.
00:16:18Se voltarmos aos slides,
00:16:21vou falar-vos sobre como isto levou a mais uma experiência.
00:16:27Desculpem,
00:16:28antes disso,
00:16:30podem voltar,
00:16:31Brooke,
00:16:32ao slide com o...
00:16:35Então,
00:16:35primeiro queria dizer,
00:16:36quais são as coisas na Vercel que me deixaram realmente entusiasmado?
00:16:39Uma delas são os logs fáceis de ler,
00:16:41como mostrei,
00:16:41e eu tinha-o configurado para ao vivo.
00:16:43Então viram o log a ser transmitido em tempo real.
00:16:46Os inícios, estamos a lidar com um ambiente serverless.
00:16:49Os inícios têm sido surpreendentemente rápidos.
00:16:52Isso é importante para o Slack.
00:16:53Se já construíram uma integração com o Slack ou qualquer outra ferramenta de terceiros com a qual estão a integrar,
00:16:59que também é serverless,
00:17:01querem inícios rápidos.
00:17:02E em cada nível dentro da Vercel, há inícios rápidos.
00:17:06Adoro o CLI por poder fazer deploy antes de fazer commit ou um pull request para garantir que,
00:17:12se eu colocar algum código problemático lá,
00:17:15consigo detetar problemas mais rapidamente antes de fazer deploy e,
00:17:19claro,
00:17:19fazer deploy para vários ambientes.
00:17:22E depois também,
00:17:23tal como temos um marketplace,
00:17:25eles têm conexões com serviços como Neon e Upstash para Redis e Postgres,
00:17:29o que torna muito,
00:17:30muito rápido ter uma base de dados de backend a funcionar.
00:17:35E isso era importante.
00:17:37Falando em base de dados de backend,
00:17:39foi isso que levou ao que viria a seguir.
00:17:41Então,
00:17:42temos todas estas interações agora no nosso Dev Slack.
00:17:48E acaba por ser uma fonte de informação muito rica.
00:17:52Obviamente, poderíamos intuir isso.
00:17:54Mas uma das coisas que me surpreendeu foi perceber que eu poderia provavelmente criar outra interface de frontend para estes dados,
00:18:02de modo que pudéssemos usá-la para voltar ao que a Brooke disse antes,
00:18:07para educar e informar o nosso processo de feedback,
00:18:10como recebemos informações,
00:18:12como levamos essas informações de volta ao produto para melhorar a experiência do desenvolvedor.
00:18:18E então passamos de construir um Slackbot para agora,
00:18:22de repente,
00:18:23mudar para o V0 num novo projeto,
00:18:25pegando nesses dados,
00:18:27criando um frontend muito simples protegido por palavra-passe para expor quais são as coisas sobre as quais as pessoas estão a fazer perguntas?
00:18:37Quais são os tipos de recursos que disponibilizamos?
00:18:40Então,
00:18:41temos muitas conversas sobre webhooks,
00:18:43temos muitas conversas sobre autenticação.
00:18:46Permitiu-nos mostrar o impacto das experiências que estávamos a fazer,
00:18:51o que é realmente muito legal porque temos de levar este Slackbot para algum lugar.
00:18:57Não queríamos apenas construí-lo e deixá-lo ir.
00:18:59Temos de levá-lo para o próximo passo.
00:19:01E a melhor forma de fazer isso,
00:19:03se já estiveram em reuniões com alguém da liderança,
00:19:07é mostrar um gráfico ou fazer algum tipo de apresentação.
00:19:10E isto vai ajudar-nos a tomar decisões com a equipe da comunidade dentro da DevRel para dizer,
00:19:17o que vamos fazer?
00:19:18Vamos mantê-lo?
00:19:19Vamos avançá-lo?
00:19:21Se o avançarmos,
00:19:23então a infraestrutura no backend do bot vai mudar.
00:19:28Mas não havia melhor maneira de começarmos do que construí-lo numa plataforma muito fácil de usar como a Vercel,
00:19:37ter algumas visualizações,
00:19:39e agora podemos decidir o que fazer a seguir.
00:19:43Então,
00:19:43agora vamos ver o que o Dennis construiu,
00:19:46que é ainda mais avançado do que o que eu construí e,
00:19:50atrevo-me a dizer,
00:19:51melhor,
00:19:51mas também outra experiência dentro dos DevRel Labs.
00:19:55E então, Dennis, é a sua vez.
00:19:57Obrigado, Chris.
00:19:59E obrigado por dizer que é melhor.
00:20:01Meu Deus, espero que todos estejam a ouvir isso.
00:20:04Então,
00:20:04antes de trabalhar na HubSpot,
00:20:06trabalhei numa agência.
00:20:08E quando o Chris me falou sobre estas coisas que estamos a fazer nos DevRel Labs,
00:20:13eu tinha um problema muito específico que encontrei na agência,
00:20:18e era que eu construía algo,
00:20:19uma destas três coisas.
00:20:21Ou eu construía algo,
00:20:22terminava-o,
00:20:22e ficava meio que em modo de manutenção.
00:20:24Eu ficava apenas a observá-lo ocasionalmente.
00:20:25Ele avariava mais tarde porque eu perdia algo que estava a acontecer no ecossistema HubSpot.
00:20:31Ou eu herdei um monte de projetos,
00:20:34e não tinha ideia do que eles estavam a fazer.
00:20:37E então,
00:20:38eventualmente,
00:20:38um deles encontraria algum tipo de mudança disruptiva e avariava-se,
00:20:42e eu teria de descobrir onde,
00:20:43porquê e como.
00:20:44E a última coisa,
00:20:45e esta é provavelmente a minha maior,
00:20:47é que há tantas coisas para prestar atenção,
00:20:49que eu muitas vezes perdia o controlo do que estava a fazer.
00:20:52Não estou a prestar atenção a nenhum dos registos de alterações,
00:20:55e algo avaria.
00:20:56E adivinhem?
00:20:57Têm clientes a gritar convosco nesse momento.
00:20:59Então,
00:20:59o que decidi foi que vou construir a próxima ferramenta de monitorização de registos de alterações para desenvolvedores da HubSpot,
00:21:07também conhecida como codinome Sprocky change dust.
00:21:10O que esta ferramenta faz é monitorizar ativamente o registo de alterações da HubSpot que usa IA para analisar essas entradas do registo de alterações,
00:21:18decidir que tipo de alteração é.
00:21:19É uma alteração disruptiva?
00:21:21É uma melhoria?
00:21:22Afeta o CMS?
00:21:23Afeta o CRM?
00:21:24Afeta ambos?
00:21:26E depois permite-vos usar repositórios alojados no GitHub para verificar esses registos de alterações contra o vosso repositório,
00:21:34permitindo-vos,
00:21:34basicamente,
00:21:35ter um assistente a analisar o registo de alterações por vocês.
00:21:39Então, como o fizemos?
00:21:40O conjunto de ferramentas que usamos aqui será um framework React construído com Vercel,
00:21:45obviamente next.js,
00:21:46porque,
00:21:47sabem,
00:21:47manteiga de amendoim e geleia,
00:21:49super base para a nossa base de dados,
00:21:51e depois tivemos que construir uma aplicação GitHub que nos permite conectar a esses repositórios lá.
00:21:56E depois,
00:21:57através de algumas funções serverless na Vercel e no OpenAI,
00:22:01consegui trazer dados de muito boa qualidade para o utilizador agir.
00:22:06Por que escolhi a Vercel?
00:22:07Honestamente, é super fácil de configurar.
00:22:11Não tive de me preocupar muito com o frontend.
00:22:13Tive uma aplicação a funcionar em menos de meia hora facilmente.
00:22:18Com as funções serverless,
00:22:19consegui realmente reduzir o custo de execução desse servidor.
00:22:23Só está ativo quando preciso.
00:22:25Estou a enviar estas filas de lotes para o OpenAI para fazer,
00:22:29e ele traz de volta,
00:22:30faz rapidamente.
00:22:31Poupou imenso dinheiro a fazer isso.
00:22:32E depois também o facto de eu poder estar a testar sozinho e depois crescer para milhares de pessoas a usar esta aplicação,
00:22:40a Vercel está lá,
00:22:41escala comigo.
00:22:42Todo o processo foi ótimo.
00:22:44Então,
00:22:45passando para o próximo slide,
00:22:46podem ver que este é basicamente o frontend que construí com Next.js.
00:22:50Verão que importamos todas as nossas entradas de registo de alterações.
00:22:53Aqui,
00:22:53podem ver uma descrição do que é esse registo de alterações.
00:22:57Se souberem agora,
00:22:58podem já criar um problema para um repositório GitHub específico que tenham anexado,
00:23:03o que nos leva ao próximo slide,
00:23:05leva-nos,
00:23:05temos de conectá-lo ao GitHub.
00:23:07Isto permite-vos conectar quantos repositórios quiserem.
00:23:11Na primeira varredura,
00:23:12ele vai fazer uma varredura programática apenas para ver se ele acha que é relevante para o HubSpot.
00:23:18Lembrem-se,
00:23:18podem ter herdado repositórios,
00:23:20tipo 50 repositórios.
00:23:22Não têm ideia do que eles fazem.
00:23:23Vocês atiram-nos para aqui.
00:23:24Ele vai fazer uma varredura inicial.
00:23:26Ele vai encontrar qualquer coisa,
00:23:28padrões de ficheiros que possa encontrar para dizer,
00:23:31ah sim,
00:23:31isto pode estar relacionado com o HubSpot,
00:23:34altura em que podem ir para o próximo slide e verão que podem clicar no botão HubSpot lá,
00:23:39o que significa que o vai enviar para o OpenAI em lote.
00:23:42Ele vai monitorizar,
00:23:43está a usar um sistema RAG para enviar apenas os detalhes importantes que ele pensa estarem relacionados com o vosso repositório e o HubSpot.
00:23:49Vai demorar um pouco,
00:23:51e assim que terminar,
00:23:52vai voltar e mostrar-vos todos os possíveis resultados.
00:23:56Recebem um e-mail de notificação,
00:23:58estou a trabalhar numa notificação do Slack também,
00:24:01que diz,
00:24:01ei,
00:24:02é melhor verificarem isto.
00:24:03Têm então a opção de dizer,
00:24:04ok,
00:24:05isto é legítimo,
00:24:05vou criar um problema sobre isto e vamos começar a trabalhar nele,
00:24:09ou posso ignorá-lo porque não se relaciona realmente com isto.
00:24:12Assim que o dispensarem,
00:24:13somos inteligentes o suficiente para começar a perceber,
00:24:16ok,
00:24:17isto pode não ser o que queremos monitorizar para este repositório em particular,
00:24:21então atualizaremos o gráfico de uso.
00:24:23Depois disso,
00:24:24vamos monitorizar continuamente cada repositório,
00:24:27então se estiverem a fazer alterações em qualquer um dos repositórios,
00:24:31estamos a observar isso.
00:24:32Se fizerem uma alteração importante,
00:24:34vamos em frente e reanalisar todos os registos de alterações contra esta nova alteração que adicionaram para garantir que não fizeram algo que não sabiam que era um problema.
00:24:43Também nos permite ir em frente e esqueci-me do que ia dizer.
00:24:50Permite-nos verificar sempre que um novo registo de alterações aparece,
00:24:54permite-nos ir em frente e percorrer cada repositório conectado que têm para ver se esse registo de alterações é específico para vocês.
00:25:01Isto permite-vos não ter de confiar nos vossos olhos para ir ao registo de alterações e descobrir se isto está relacionado convosco ou não.
00:25:08Permite que o registo de alterações chegue à vossa caixa de entrada e vocês podem agir sobre ele conforme necessário.
00:25:14Dito isto,
00:25:15acho que estamos na hora das perguntas e respostas.
00:25:17Tentei passar por isso o mais rápido possível para que possamos ter algumas perguntas e respostas,
00:25:21se necessário.
00:25:22Fizeste um bom trabalho, Dennis.
00:25:23Sim, ótimo trabalho, Dennis.
00:25:25Rápido, fogo rápido.
00:25:26Muito rápido.
00:25:27Certo, então temos alguns minutos aqui.
00:25:31Então, tenho uma pergunta para começar.
00:25:34Sei que vimos hoje que as demos nem sempre correm perfeitamente quando são ao vivo.
00:25:39E embora a Vercel facilite as coisas para as pessoas,
00:25:42há sempre algo que podemos fazer melhor.
00:25:45Ninguém é perfeito.
00:25:46Então,
00:25:46têm algum pedido de funcionalidade que gostariam que eu partilhasse com a equipe de engenharia?
00:25:51Há algo que gostariam de ver diferente ou que simplesmente está a faltar?
00:25:55Ainda não sei sobre o que está a faltar.
00:26:00Mas,
00:26:00honestamente,
00:26:01há algumas funcionalidades que acabaram de lançar recentemente,
00:26:04estendendo o tempo de execução de uma função serverless,
00:26:07acredito eu.
00:26:07Não me lembro do nome da que acabaram de lançar e na qual estou muito interessado,
00:26:12porque quando estou a operar com o OpenAI,
00:26:15esperar por um resultado pode exceder a duração da função serverless.
00:26:19Tinham um nome para isso e peço desculpa,
00:26:20mas esqueci-me qual era.
00:26:21Mas estou muito entusiasmado para começar a usar isso,
00:26:24bem como o vosso SDK de IA que também acabaram de introduzir.
00:26:28Estes não são pedidos de funcionalidades,
00:26:31sou eu a desfrutar das funcionalidades que estão a lançar.
00:26:34Tenho outro.
00:26:35Na verdade,
00:26:36tenho usado a,
00:26:37esqueci-me do nome da API para deploys porque não tenho,
00:26:42tem sido um pouco irritante ir da aplicação frontend que construí para,
00:26:49tipo,
00:26:49o deploy foi sequer bem-sucedido?
00:26:53E então têm uma API para obter o status do deploy.
00:26:56Então não preciso de fazer isso.
00:26:58Posso esperar até que esteja pronto antes de,
00:27:00porque na verdade não quero olhar para a interface até que haja um problema.
00:27:05E se tiver um deploy falhado,
00:27:06esse é o problema mais frustrante que alguma vez encontro.
00:27:09Mas de resto,
00:27:10ter vários projetos e acho que algumas das interfaces,
00:27:15tipo,
00:27:15há sempre lugares para melhorar em termos de experiência,
00:27:19mas não houve uma coisa que eu tenha notado.
00:27:23Sim,
00:27:23tenho um possível problema que pode ser do meu lado e não da Vercel.
00:27:28Então, se for um pedido de funcionalidade, ótimo.
00:27:30Se for eu, sabem, que vergonha para mim.
00:27:33Fiz imensos testes localmente com todas as minhas coisas e as funções não morrem localmente.
00:27:38Pelo menos para mim não morreram.
00:27:40Então,
00:27:40tudo parecia suave como manteiga,
00:27:42sabem,
00:27:43foi incrível.
00:27:43Está tudo a correr bem.
00:27:44Funcionou na minha máquina.
00:27:45Sim.
00:27:46Funcionou na minha máquina.
00:27:47Exatamente.
00:27:48Clássico.
00:27:49Então,
00:27:50se fizerem um,
00:27:50sabem,
00:27:51um Vercel e,
00:27:51sabem,
00:27:52as funções morrem eventualmente,
00:27:54eu,
00:27:54novamente,
00:27:55isto pode ser uma coisa minha onde eu só preciso,
00:27:57sabem,
00:27:58limitar as minhas,
00:27:59colocar um governador basicamente nas minhas funções para só poder permitir que elas corram por um período de tempo.
00:28:04Mas se a Vercel pudesse oferecer isso de imediato,
00:28:07seria bastante incrível.
00:28:08É como um tempo de execução mais longo.
00:28:10Sim.
00:28:11Não, não.
00:28:12Tipo,
00:28:12bem,
00:28:13quero dizer,
00:28:13tempos de execução que correspondam aos da produção.
00:28:17Localmente.
00:28:18Sim.
00:28:19Ok.
00:28:20Sim.
00:28:21Já me deparei com algo assim também.
00:28:22Bom saber.
00:28:23Tens alguma coisa?
00:28:24Isso é ótimo.
00:28:25Eu sei.
00:28:26Passei por isso a vida toda,
00:28:29bater ao meu lado ajuda-me a lembrar.
00:28:32Não tenho nenhum pedido específico,
00:28:35não,
00:28:35mas queria apenas salientar que se são novos no HubSpot,
00:28:39mas gostaram do que viram e querem experimentar-nos.
00:28:43Podem sempre juntar-se ao nosso Slack de desenvolvedores.
00:28:45Falamos sobre isso e podemos,
00:28:47também podem ir e consultar a nossa documentação para desenvolvedores para que possam experimentar algumas coisas por vocês mesmos.
00:28:55De facto.
00:28:56Fantástico.
00:28:57Vamos ver.
00:28:58Tenho mais uma pergunta que gosto de fazer e é,
00:29:02sei que já cobriram muito.
00:29:05Então,
00:29:05se houver um ponto chave,
00:29:07alguma melhor prática ou apenas uma dica essencial que queiram que as pessoas se lembrem ao sair daqui?
00:29:14Tenho um e não o segui e ainda não o estou a seguir e estou zangado comigo,
00:29:20estou muito zangado comigo mesmo.
00:29:23Usem ambientes e configurem-nos cedo.
00:29:27Não tentem fazer isso mais tarde porque é muito doloroso.
00:29:32Então,
00:29:33logo no início,
00:29:34ter o vosso ambiente,
00:29:35isso é uma coisa que na interface,
00:29:37é muito fácil ter as vossas variáveis de ambiente ligadas a um ambiente.
00:29:43Tipo, configurem os ambientes, usem-nos cedo.
00:29:48Não esperem porque fazer isso mais tarde é muito,
00:29:50muito doloroso.
00:29:51E eu sei que todos nós só queremos construir funcionalidades e vê-las a funcionar o mais rápido possível.
00:29:57E então ter um ambiente de teste pode ser um pouco chato,
00:30:00mas sim,
00:30:01isso é o que eu recomendaria.
00:30:03Eu concordo plenamente com isso.
00:30:04Estava a receber um erro e estava a perguntar ao cursor por que o meu erro,
00:30:09por que não estava a funcionar quando estava no meu ambiente de desenvolvimento e era porque eu não tinha ativado o uso da minha chave secreta de ambiente dentro do meu ambiente de desenvolvimento.
00:30:22Então era como se não conseguisse encontrar a chave.
00:30:24Então isso foi meio bobo.
00:30:26Mas sim,
00:30:26vejo essa pergunta sobre como estão a usar a IA nos vossos fluxos de trabalho?
00:30:30Então,
00:30:31especificamente comigo,
00:30:32gosto de usar o nosso MCP de desenvolvedor.
00:30:35Acho que é um produto muito bom e estamos sempre a tentar obter feedback sobre como podemos tornar esse MCP de desenvolvedor melhor para os desenvolvedores da HubSpot.
00:30:43Mas adoro-o porque quando pergunto ao cursor,
00:30:46tipo,
00:30:47Oh,
00:30:47quero fazer algo.
00:30:48O que ele fará é pesquisar os nossos documentos em tempo real.
00:30:51Então, vão sempre obter a informação mais atualizada.
00:30:55Não vai estar desatualizado quando fizerem uma pergunta ao MCP e ele for executar essa pesquisa nos documentos.
00:31:04A minha adição é ser, eu uso a IA de forma cética.
00:31:07Questiono tudo o que me envia de volta porque,
00:31:10muitas vezes,
00:31:11sabem,
00:31:11ainda não é perfeito.
00:31:12Não, é tão fácil.
00:31:14É como um doce.
00:31:15Sabem,
00:31:16podem simplesmente clicar em aceitar,
00:31:18ir,
00:31:18ir,
00:31:19ir,
00:31:19ir,
00:31:20ir.
00:31:19Estão 17 commits profundos.
00:31:21E então,
00:31:22sabem,
00:31:22esse terceiro commit vai realmente quebrar tudo.
00:31:26Então usem a Vercel ou usem a Vercel,
00:31:29usem a IA de forma cética.
00:31:31Muito crítico disso.
00:31:33Sempre,
00:31:34sempre,
00:31:34sempre criem novas branches quando estiverem a fazer algo novo.
00:31:38Assim podem simplesmente livrar-se disso, se necessário.
00:31:40Aproveitem a Vercel e o seu ambiente de pré-visualização,
00:31:45sabem,
00:31:46para fazer isso e sim,
00:31:48não confiem demasiado nela.
00:31:50Todos bons conselhos.
00:31:51Sei que estamos no fim do tempo e todos vocês estão muito ocupados e provavelmente têm compromissos logo a seguir.
00:31:58Então, muito obrigado por dedicarem o vosso tempo.
00:32:00Vou deixá-los ir para que possam voltar ao vosso dia.
00:32:03Agradeço.
00:32:04Obrigado.
00:32:05Obrigado à Vercel e a todos que vieram.
00:32:09Fantástico.
00:32:11Apenas um lembrete rápido.
00:32:12Temos outra sessão na próxima semana.
00:32:14Falaremos sobre Python na Vercel.
00:32:18E podem sempre consultar o calendário de eventos em community.vercel.com/events para ver tudo o que está por vir.
00:32:24Obrigado a todos.
00:32:25Tenham uma boa semana.

Key Takeaway

A HubSpot alavanca a plataforma Vercel para hospedar backends de aplicações, prototipar rapidamente soluções para a comunidade de desenvolvedores e construir ferramentas inovadoras de monitorização de registos de alterações, destacando a facilidade de uso, escalabilidade e eficiência da Vercel.

Highlights

A HubSpot utiliza a Vercel como serviço de backend para as suas aplicações, permitindo a integração de componentes de UI React com funções serverless para processamento de dados.

A equipe DevRel da HubSpot emprega a Vercel nos seus 'DevRel Labs' para prototipagem rápida e experimentação, como na criação de um Slackbot para a comunidade de desenvolvedores.

A Vercel é valorizada pela sua facilidade de uso, logs em tempo real, inícios rápidos de funções serverless, CLI robusta e integrações com serviços de base de dados, o que agiliza o desenvolvimento.

Um projeto inovador é o 'Sprocky change dust', uma ferramenta de monitorização de registos de alterações da HubSpot que usa IA e Vercel para alertar desenvolvedores sobre mudanças relevantes nos seus repositórios GitHub.

A plataforma Vercel permite à HubSpot escalar eficientemente as suas aplicações e ferramentas, desde testes individuais até milhares de utilizadores, otimizando custos e garantindo desempenho.

A equipe DevRel da HubSpot enfatiza a importância de configurar ambientes de desenvolvimento cedo e usar a IA com ceticismo, aproveitando os ambientes de pré-visualização da Vercel.

Timeline

Boas-Vindas e Apresentação da Sessão

Amy Egan, da equipe de comunidade da Vercel, dá as boas-vindas à transmissão ao vivo, explicando que a sessão está a ser transmitida no X e YouTube. Ela incentiva os espectadores a juntarem-se à comunidade para participar no chat e fazer perguntas, que serão respondidas no final. É feito um lembrete sobre o código de conduta da comunidade. Amy apresenta os convidados da HubSpot, que irão partilhar como a sua empresa utiliza a Vercel, dando seguimento a um webinar anterior sobre a integração de backends.

O Que É a HubSpot e o Papel da Equipe DevRel

Brooke Bond, da HubSpot, inicia a apresentação com uma visão geral da HubSpot como um CRM inteligente que oferece software de marketing, vendas e serviços, além de uma plataforma unificada para desenvolvedores. Ela explica que a equipe DevRel (Developer Relations) foca em capacitar os desenvolvedores no ecossistema HubSpot, construindo soluções e promovendo as melhores práticas. A plataforma permite criar aplicações estáticas internas e aplicações OAuth externas para o marketplace da HubSpot, exemplificando com uma possível integração da Vercel. Brooke detalha as diversas atividades da equipe DevRel, incluindo recursos de aprendizagem, engajamento comunitário (Slack, fórum, eventos), ferramentas de desenvolvimento e estratégias de crescimento e apresentação de aplicações.

Integração HubSpot e Vercel como Backend

Esta seção explora o principal caso de uso da Vercel pela HubSpot: como um serviço de backend para aplicações. Brooke explica que as aplicações HubSpot atuam como frontend, com componentes de UI React, que utilizam `hubspot.fetch` para chamar o backend da Vercel. O backend da Vercel processa os dados e retorna uma resposta para o frontend. Um exemplo prático é o gerador de ficheiros LLMS.txt, uma aplicação HubSpot que analisa URLs ou sitemaps para criar ficheiros otimizados para crawlers de IA, utilizando a API da Vercel e a API de ficheiros da HubSpot. Apesar de uma demonstração ao vivo não ter funcionado perfeitamente, o conceito de gerar e carregar ficheiros para a conta HubSpot através de funções serverless da Vercel foi claramente articulado.

Experiências DevRel Labs: O Slackbot da Comunidade

Chris Riley introduz o conceito de 'DevRel Labs', um conjunto de processos para experimentar e validar ideias rapidamente dentro da equipe DevRel. A primeira experiência apresentada é a criação de um Slackbot para a comunidade externa de desenvolvedores da HubSpot. O objetivo era fornecer recursos rápidos e em tempo real sem ser intrusivo, promovendo a interação entre pares. O bot foi construído na Vercel para permitir prototipagem ágil e avaliação de qualidade. Chris demonstra a interação com o bot, que responde a perguntas sobre o HubSpot Dev MCP, e mostra os logs em tempo real da Vercel, destacando a eficiência da plataforma.

Benefícios da Vercel e Visualização de Dados da Comunidade

Chris Riley detalha as vantagens da Vercel que facilitaram o trabalho da equipe, incluindo logs fáceis de ler, inícios rápidos de funções serverless, a utilidade da CLI para deploys pré-commit e a capacidade de deploy para múltiplos ambientes. Ele também menciona as integrações da Vercel com serviços como Neon e Upstash, que simplificam a configuração de bases de dados backend. A partir dos dados ricos gerados pelas interações do Slackbot, a equipe criou uma segunda experiência: uma interface frontend simples (usando V0 na Vercel) para visualizar padrões de perguntas e recursos mais procurados. Esta visualização ajuda a informar o processo de feedback e a melhorar a experiência do desenvolvedor, permitindo à liderança tomar decisões baseadas em dados sobre o futuro das experiências.

Sprocky: Ferramenta de Monitorização de Registos de Alterações com IA e Vercel

Dennis Edson apresenta o 'Sprocky change dust', uma ferramenta inovadora desenvolvida para resolver o problema de desenvolvedores que perdem o controlo das alterações nos registos da HubSpot. A ferramenta monitoriza ativamente o registo de alterações da HubSpot, utilizando IA para analisar e classificar as entradas (disruptivas, melhorias, impacto no CMS/CRM). Em seguida, verifica essas alterações contra os repositórios GitHub do utilizador, funcionando como um assistente personalizado. Dennis explica que a Vercel foi escolhida pela sua facilidade de configuração (Next.js), redução de custos com funções serverless e escalabilidade. A ferramenta envia notificações por e-mail (e futuramente Slack) sobre alterações relevantes, permitindo aos utilizadores criar problemas no GitHub ou ignorar as notificações, e aprende com as interações para refinar a monitorização.

Sessão de Perguntas e Respostas e Dicas Essenciais

A sessão de Q&A aborda pedidos de funcionalidades para a Vercel. Dennis expressa entusiasmo pelas novas funcionalidades da Vercel, como o tempo de execução estendido para funções serverless e o SDK de IA. Chris sugere uma API para o status de deploy e melhorias na UX, enquanto Brooke deseja que os tempos de execução locais das funções correspondam aos da produção. As melhores práticas e dicas essenciais incluem a recomendação de Dennis para configurar ambientes de desenvolvimento cedo na Vercel, a sugestão de Brooke para usar o Dev MCP da HubSpot para informações atualizadas, e o conselho de Chris para usar a IA com ceticismo, sempre questionando os resultados e utilizando branches e ambientes de pré-visualização da Vercel para testar novas funcionalidades. A sessão termina com agradecimentos e um lembrete sobre futuros eventos da comunidade Vercel.

Community Posts

View all posts