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 das pessoas, isso começa com uma consulta ou um protótipo. O Google AI Studio oferece um modo de criação (muitas vezes chamado de "vibe coding") que permite projetar, testar e criar aplicativos da Web usando a geração de código com tecnologia dos 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ê o implantará diretamente no Cloud Run com um único clique.

Atividades deste laboratório

• Peça ao Google AI Studio para criar um protótipo de site de portfólio pessoal.
• Teste o aplicativo no sandbox de prévia interativa.
• Implante o aplicativo no Cloud Run diretamente da interface do Google AI Studio.

O que você vai aprender

• Como usar o modo de criação do Google AI Studio para prototipar rapidamente um serviço de front-end usando linguagem natural.
• Como implantar seu 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.

Informações da Conta do Google e da camada

1. Se você ainda não tiver uma, crie uma Conta do Google.
   • Dica: use uma Conta do Google pessoal neste 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 e sem estabelecer uma conta de faturamento completa do Google Cloud.
   • Implantação padrão: conecta-se a um projeto pago do Google Cloud e aumenta 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 peça ao assistente de código de IA para criar o layout do front-end.

1. Acesse o painel de apps do Google AI Studio e clique em Novo app.
2. Na caixa de comando do chat, insira a descrição da sua inscrição para o 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).
   

3. Clique em Build para iniciar o processo de geração do aplicativo.

4. Teste e repita

Antes de lançar o serviço, faça verificações de validação na prévia interativa.

1. Abra o painel de visualização no Google AI Studio.
2. Interaja com botões de navegação, links ou layouts na sandbox de prévia para verificar a experiência visual.
   • Observação sobre a correção de 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. Assim, você pode pedir ao agente para diagnosticar e corrigir o problema automaticamente.
   
3. Se você quiser mudar o estilo ou o comportamento, instrua o agente na 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 confira as atualizações no navegador de prévia.

5. Implantar no Cloud Run

Quando 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.
2. Clique em Começar para configurar seu projeto na nuvem do Google Cloud.
   • Verifique se o menu suspenso 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.
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 build e registro de contêiner e implantação de serviço acontecem em segundo plano. Esse processo normalmente leva de 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 seu 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), mapeie 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 no menu suspenso.
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) que você precisa criar com o registrador de domínios.

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 gerenciamento ou configuração de DNS do seu domínio.
3. Crie os registros DNS correspondentes aos valores mostrados no assistente de mapeamento do Cloud Run:
   • Para mapeamentos de domínio apex (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 mudanças na configuração de DNS.

Etapa 3: aguardar o provisionamento do certificado SSL

Depois que as mudanças de DNS forem propagadas:

1. O Google Cloud provisiona automaticamente um certificado SSL/TLS gerenciado para sua conexão segura.
2. Esse processo geralmente leva 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 vai direcionar com segurança para o site do portfólio.

Observação:os mapeamentos de domínio do Cloud Run estão em prévia e disponíveis apenas em regiões específicas. Se o serviço do Cloud Run estiver em uma região que não oferece suporte a mapeamentos de domínio, você poderá mapear seu domínio usando um balanceador de carga de aplicativo externo global ou o Firebase Hosting.

7. Limpeza

Para evitar cobranças inesperadas ou limpar os recursos do seu espaço de trabalho:

1. No Google AI Studio, acesse a página de apps.
2. Encontre o aplicativo na grade ou 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ê criou, desenvolveu e implantou um site de portfólio diretamente no Google AI Studio.

Saiba mais

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

Para continuar sua jornada, acesse goo.gle/builders e faça o próximo laboratório.

• Documentação do Cloud Run
• Criar apps no Google AI Studio