Crie seu site de portfólio com IA

1. Introdução

Visão geral

Onde começa a criação com IA hoje? Para a maioria de nós, ela começa com uma consulta ou um protótipo. O Google AI Studio oferece um modo de criação avançado (geralmente chamado de "codificação de vibe") que permite projetar, testar e criar aplicativos da Web usando a geração de código orientada por modelos do Gemini.

Neste codelab, você vai criar um site de portfólio pessoal. O agente do AI Studio vai escrever o código de front-end. Depois que o app estiver pronto, você poderá implantá-lo diretamente no Cloud Run com um único clique.

versão final de um site de portfólio

Atividades deste laboratório

  • Solicitar ao Google AI Studio que crie um protótipo de site de portfólio pessoal.
  • Testar o aplicativo no ambiente de simulação de visualização interativa.
  • Implantar o aplicativo no Cloud Run diretamente na interface do Google AI Studio.

O que você vai aprender

  • Como usar o modo de criação do Google AI Studio para criar rapidamente um protótipo de serviço de front-end usando linguagem natural.
  • Como implantar o aplicativo do AI Studio como um contêiner sem servidor no Cloud Run.

2. Configuração do projeto

Antes de iniciar o AI Studio, verifique o status da sua conta e os pré-requisitos.

Conta do Google e informações de nível

  1. Se você ainda não tiver uma Conta do Google, crie uma.
    • Dica: use uma Conta do Google pessoal para este laboratório, se possível. Contas de grupo, corporativas ou escolares podem aplicar políticas do Workspace que desativam recursos experimentais ou integrações na nuvem.
  2. Revise os detalhes de faturamento das implantações:
    • Nível Starter do Google Cloud: permite publicar até dois aplicativos full-stack em uma região selecionada sem custo financeiro, sem estabelecer uma conta de faturamento completa do Google Cloud.
    • Implantação padrão: conecta-se a um projeto na nuvem pago do Google Cloud e expande os limites de armazenamento, os recursos de CPU e as APIs.

3. Criar um site de portfólio no modo de criação do AI Studio

Crie o shell do aplicativo e solicite ao assistente de código de IA que crie o layout de front-end.

  1. Acesse o painel de apps do Google AI Studio e clique em Novo app.
  2. Na caixa de comando de chat, insira a descrição do aplicativo de portfólio: 
    Build a professional personal portfolio website. The site should
have a modern, responsive design and sections for my biography,
projects showcase, skills, and links to my professional profiles
(e.g., GitHub, LinkedIn).
    Este link vai preencher automaticamente a caixa de comando para você.
  3. Clique em Criar para iniciar o processo de geração de aplicativos.

4. Teste e repita

Antes de iniciar o serviço, execute verificações de validação na visualização interativa.

  1. Abra o painel de visualização no Google AI Studio.
  2. Interaja com botões de navegação, links ou layouts no ambiente de simulação de visualização para verificar a experiência visual.
    • Observação sobre como corrigir erros: durante a geração ou o teste, você pode enfrentar problemas de execução ou erros de compilação. Se isso acontecer, o AI Studio vai mostrar um botão Corrigir no chat, permitindo que você peça ao agente para diagnosticar e reparar o problema automaticamente.
    Localização do botão de correção do Google AI Studio
  3. Se você quiser mudar o estilo ou o comportamento, instrua o agente pela janela de chat. Por exemplo:
    • "Could you style the interface using Tailwind CSS, and add a dark mode toggle button?"
    • "Include a new section to showcase my recent presentations and talks."
  4. Aguarde o agente atualizar a base de código e verifique o navegador de visualização para conferir as atualizações.

5. Implantar no Cloud Run

Depois que o protótipo estiver totalmente funcional, implante-o como um serviço público no Cloud Run.

  1. No canto superior direito do Google AI Studio, clique no botão Publicar para iniciar o assistente de implantação.Localização do botão "Publicar" do Google AI Studio
  2. Clique em Começar para configurar seu projeto na nuvem do Google Cloud.
    • Verifique se a lista suspensa Projeto do Google Cloud de destino corresponde ao projeto associado ao seu espaço de trabalho.
    • O AI Studio vai gerar automaticamente um identificador de serviço exclusivo para a instância do Cloud Run.
    • Opcionalmente, você pode especificar um prefixo de URL .ai.studio personalizado (por exemplo, your-portfolio-name.ai.studio) como parte da configuração de implantação.
  3. Se esta for sua primeira implantação e você estiver usando parâmetros padrão do Google Cloud, talvez seja necessário especificar um tipo de organização e fornecer detalhes de faturamento.
  4. Clique em Publicar app.
  5. As etapas de criação, registro e implantação de contêineres acontecem em segundo plano. Esse processo normalmente é concluído em 2 a 4 minutos.
  6. Quando a implantação terminar, copie o URL do aplicativo gerado e acesse o link do aplicativo ativo em uma guia do navegador.
  7. Teste o aplicativo da Web ativo no navegador.

6. (OPCIONAL) Adicionar um domínio personalizado

Por padrão, o Cloud Run hospeda seu serviço em um subdomínio run.app gerenciado pelo Google. Se você quiser usar um domínio pessoal (como yourname.com ou portfolio.yourname.com), poderá mapear um domínio personalizado para seu serviço.

Etapa 1: adicionar um mapeamento de domínio no Cloud Run

  1. Acesse a página Mapeamentos de domínio do Cloud Run no console do Google Cloud.
  2. Clique em Adicionar mapeamento.
  3. Escolha o serviço do Cloud Run que você quer mapear na lista suspensa.
  4. Insira o nome de domínio personalizado (por exemplo, yourname.com ou portfolio.yourname.com).
  5. Clique em Próxima ou Continuar. O Cloud Run vai mostrar os registros DNS (como A/AAAA ou CNAME registros) que você precisa criar com o registrador de domínio.

Etapa 2: configurar o registrador de DNS

  1. Faça login no painel de administração do registrador de domínio (por exemplo, Squarespace, GoDaddy ou Namecheap).
  2. Abra a página de configuração de gerenciamento ou configurações de DNS do seu domínio.
  3. Crie os registros DNS que correspondam aos valores mostrados no assistente de mapeamento do Cloud Run:
    • Para mapeamentos de domínio de vértice (por exemplo, yourname.com), adicione os registros A e AAAA listados.
    • Para mapeamentos de subdomínio (por exemplo, portfolio.yourname.com), adicione o registro CNAME listado.
  4. Salve as alterações de configuração de DNS.

Etapa 3: aguardar o provisionamento do certificado SSL

Depois que as alterações de DNS forem propagadas:

  1. O Google Cloud vai provisionar automaticamente um certificado SSL/TLS gerenciado para sua conexão segura.
  2. Esse processo geralmente é concluído em cerca de 15 minutos, mas pode levar até 24 horas, dependendo da propagação do DNS.
  3. Depois de concluído, seu domínio personalizado será encaminhado com segurança para o site do portfólio.

7. Limpeza

Para evitar cobranças de faturamento imprevistas ou limpar os recursos do espaço de trabalho:

  1. No Google AI Studio, acesse a página Apps.
  2. Encontre seu aplicativo na grade ou na lista.
  3. Clique no ícone da lixeira para excluir o estado do app e cancelar a publicação do serviço no Cloud Run.
  4. Se você fez a implantação usando um projeto padrão e quer desligar todos os recursos completamente, acesse as configurações do projeto do console do Google Cloud e exclua o projeto subjacente.

8. Conclusão

Parabéns! Você projetou, desenvolveu e implantou um site de portfólio diretamente do Google AI Studio.

Saiba mais

Acesse este link para reivindicar o selo Jornada do criador concluída.

Para continuar sua jornada, acesse goo.gle/builders para o próximo laboratório.