IA para Dev: Desenvolvendo e Otimizando Códigos com ChatGPT e Google Gemini

Geração de Código - Apresentação

Apresentando o instrutor e o curso

Olá! Sejam todos muito bem-vindos a mais este conteúdo de inteligência artificial aqui na Alura. Meu nome é Junior e serei o instrutor deste curso.

Audiodescrição: Junior é um homem de pele clara, com cabelos loiros e escuros compridos até a altura dos ombros. Ele usa óculos com armação escura e veste uma camiseta azul-marinho. Está à frente de um fundo em degradê, iluminado do azul para o rosa.

Explorando o uso do ChatGPT na programação

Entendemos que pode haver certo ceticismo em relação a este conteúdo, pois o objetivo é ensinar como utilizar o ChatGPT para programar. Talvez já saibamos fazer isso no dia a dia, mas a proposta aqui é ir além do que já fazemos rotineiramente. Queremos mostrar como algumas inteligências artificiais podem auxiliar no cotidiano de uma pessoa desenvolvedora.

Vamos explorar o ChatGPT, mas também queremos mostrar como explorar algumas possibilidades, como criar e editar códigos com o preview que já está disponível. Vamos conhecer a ferramenta por trás disso, passando pelo Gemini, e explicando como as ferramentas de preview, de código, de análise e de perguntas funcionam para que possamos desenvolver tudo aqui dentro.

Desenvolvendo um projeto com ferramentas de IA

Temos em mente um projeto que queremos desenvolver, que incluirá explicações detalhadas. Dentro do Grok, por exemplo, vamos gerar um código em um local específico, trazê-lo para cá, realizar alguns testes e explorar outras ferramentas, como o Cloud. No Cloud, faremos algumas atividades interessantes.

Aqui, temos um exemplo de um preview em execução. Vamos entender como cada uma dessas ferramentas lida com a questão do histórico e do código de edição que temos internamente. Também testaremos os códigos que desenvolvemos em outros ambientes, como o CodePen, focando inicialmente em um código de front-end. Além disso, testaremos um pouco de código de back-end e utilizaremos algumas ferramentas da Google para esse cenário.

Alcançando resultados e objetivos do curso

Nosso objetivo final é alcançar um resultado em que tenhamos um pequeno projeto que atenda a uma demanda específica. Há uma frase que não faz muito sentido, "poderia mais abacate", e vocês entenderão o motivo dessa frase e seu resultado. No entanto, teremos uma página funcional de acordo com uma demanda recebida.

Nosso objetivo aqui não é focar exclusivamente nesse projeto, embora ele sirva como guia durante todo o estudo. Queremos explorar com vocês as inteligências artificiais e mostrar que elas não estão aqui para substituir as pessoas programadoras, mas para atuar como copilotos. Vamos entender como trabalhar em diferentes contextos, sugerindo, fazendo alterações, escrevendo um pouco de código e interligando todo esse conhecimento que construiremos aqui, para que vocês possam aplicá-lo no dia a dia.

Convidando à participação e aprendizado

Este conteúdo não possui pré-requisitos, mas esperamos que, ao final, vocês estejam aptos a utilizar essas ferramentas, em vez de apenas duvidar de seu poder e não se interessar. Queremos que saibam como utilizá-las para melhorar o fluxo de trabalho diário.

Esperamos que estejam animados. Vamos começar! [♪]

Geração de Código - Usando o jeito tradicional

Explorando o potencial das inteligências artificiais na programação

Se começarmos a explorar todo o potencial que as inteligências artificiais trazem para nós na programação, podemos realizar um fluxo comum. Por exemplo, temos uma ideia de código que precisamos implementar. Vamos mostrar um contador que vai de 5 até 1 na tela. Normalmente, abrimos o ChatGPT e enviamos um prompt como: "Crie um código para um contador regressivo de 5 até 1 com um segundo de atraso."

Ao enviar esse prompt para a inteligência artificial, sem especificações detalhadas, encontramos um problema inicial. Queríamos um resultado visual em HTML, mas o retorno foi em Python. Não queremos executar esse código em Python na máquina neste momento. O que fazemos, então, é enviar um prompt complementar pedindo para adaptar o código para HTML. Assim, a adaptação é feita e o resultado esperado é exibido.

Utilizando o CodePen para testar o código gerado

Anteriormente, precisaríamos digitar o código manualmente, escrever o contador e toda a lógica por trás. Agora, com apenas dois prompts, já temos o código pronto. O próximo passo é copiar o código gerado. Podemos selecionar o texto, usar "Ctrl+C" e colar no nosso ambiente de desenvolvimento, como o CodePen, que é uma guia que temos aberta.

Caso não conheçam o CodePen, ele é um site que permite testar códigos HTML, CSS e JavaScript sem a necessidade de instalar nada. Utilizaremos o CodePen para simular um ambiente que pode já estar configurado na máquina de cada um. Isso facilita o teste dos exemplos por todos. Na guia HTML, podemos colar o resultado gerado.

Apresentando o resultado do contador regressivo

Quando colamos aquele resultado, ele já nos apresenta um contador regressivo, mostrando a contagem de 5 até 1. Além disso, já temos um botão de reset e um botão de iniciar. Esse é o código que gostaríamos de mostrar. Para chegar a esse ponto, foi necessário enviar uma mensagem, fazer uma correção, copiar e trazer para cá. Agora, temos o que é necessário.

Comparando resultados com o Google Gemini

Se fizermos a mesma coisa com, por exemplo, o Google Gemini, voltamos à guia do ChatGPT, copiamos o mesmo prompt, abrimos o Google Gemini e colamos o mesmo prompt para envio. Provavelmente, se não especificarmos nada, ele sugerirá um exemplo em Python, que é a linguagem mais comumente utilizada para fazer perguntas, já que muitos desses modelos foram treinados com grandes quantidades de código em Python. A solução mais óbvia é que ele nos traga esse código, e não a mesma coisa de antes.

Vamos pedir para ele corrigir e fazer em HTML. Vamos ver o resultado que será apresentado na tela. Ele fará os ajustes, e, como na situação anterior, precisaremos copiar o código, voltar ao CodePen, apagar o código anterior do ChatGPT e colar o novo código. A atualização traz um código mais simples e uma visualização mais simples, mas ainda cumpre o que foi solicitado: um contador de 5 até 1, com uma mensagem ao final.

Refletindo sobre o processo de solicitação e correção de código

Temos, então, essas situações em que precisamos fazer uma solicitação, corrigir a solicitação, copiar o código e trazê-lo para nosso ambiente para testar. Dentro dessas ferramentas, não necessariamente precisamos seguir esse processo. Atualmente, elas já possuem locais e possibilidades para trabalharmos com o desenvolvimento e a criação de código de forma diferente, o que parece natural. Quando respondem uma mensagem normal, trazem um texto simples, mas, quando é um código, apresentam uma formatação específica, com uma parte dedicada apenas para código.

Dentro do ChatGPT, do Gemini e de outras inteligências artificiais que vamos explorar, há toda uma seção que começaremos a aprender a lidar e a facilitar nosso workflow. Também entenderemos por que o que estamos fazendo talvez não seja o ideal para o dia a dia. Vamos começar.

Geração de Código - A lousa ChatGPT e Canva do Gemini

Explorando o fluxo de interação com inteligências artificiais

Acabamos de ver aquele fluxo normal, que consiste em enviar um prompt para uma das inteligências artificiais, seja um GPT, seja um Gemini, obter o resultado, fazer uma modificação e enviar outro prompt. No entanto, se essa não é a melhor forma ou o melhor resultado que podemos obter, o que pode ser feito para modificá-lo?

Neste momento, estamos com o Chat GPT aberto e queremos mostrar o seguinte: dentro do Chat GPT, ao lado de "Pergunte Alguma Coisa", no centro da tela, há um botão de mais. Ao clicarmos nele, algumas opções extras aparecem. Pode ser que o que estamos buscando já apareça diretamente, mas há uma opção de "mais". Neste momento, está escrito "mais", mas pode ser que visualizemos a opção de "Lousa", que é o que precisamos, dentro do primeiro menu também, dependendo do momento.

Utilizando a Lousa no Chat GPT

Ao clicarmos na opção de "Lousa", o prompt que enviamos será interpretado de uma forma diferente. A visualização já muda, aparecendo agora "Escrever ou Programar". Vamos colocar o mesmo prompt de antes: "Criar um código para um contador regressivo de 5 até 1 com um segundo de atraso". Faremos o envio desse prompt dentro do Chat GPT. Ele começará a nos dar um resultado bem similar ao que já tínhamos visto antes. A primeira modificação, como podemos perceber, é que começamos um chat novo, não era o mesmo chat de antes, e ele já trouxe um resultado que conseguimos visualizar.

No caso anterior, pedimos um código e ele nos deu primeiramente em Python; aqui, ele já nos deu em HTML. Vamos ver como esse código é estruturado:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contador Regressivo</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
        }
        h1 {
            font-size: 5rem;
            color: #333;
        }
    </style>
</head>
<body>
    <h1 id="contador">5</h1>

Esse trecho inicial define a estrutura básica do HTML e o estilo da página, centralizando o texto e definindo a aparência do contador.

Adicionando funcionalidade ao contador regressivo

Continuando, adicionamos o script que fará a contagem regressiva:

    <script>
        let numero = 5;
        const contador = document.getElementById("contador");

        const intervalo = setInterval(() => {
            numero--;
            if (numero > 0) {
                contador.textContent = numero;
            } else {
                contador.textContent = "1";
                clearInterval(intervalo);
            }
        }, 1000);
    </script>
</body>
</html>

Esse script utiliza setInterval para diminuir o número a cada segundo, atualizando o texto do elemento h1 até que o número chegue a 1, momento em que o intervalo é limpo.

O mais interessante é que agora temos um botão não só de copiar, mas também, ao lado de copiar, o botão de editar. Quando clicamos nesse botão de editar, temos o mesmo código, com uma visualização um pouco diferente, mas o mais importante e interessante é que temos o botão de prévia na "Lousa", localizado no canto superior direito. Ao clicarmos nesse botão, ele traz o resultado visual que esperamos.

Explorando o Canvas no Google Gemini

Dessa forma, notamos que não precisamos, por exemplo, dar um comando extra ou abrir o CodePen, pois ele já nos traz o resultado visualizado nessa prévia.

O código HTML que está aqui já está rodando. Podemos editá-lo e explorar muito mais do que é possível fazer na Lousa. Podemos realizar todo um trabalho de edição e testar, por exemplo, algo sem precisar ir a um ambiente externo e sem sair do contexto do Chat GPT. Vamos explorar isso, mas antes queremos abrir o Google Gemini e seguir o mesmo fluxo. Vamos criar um novo chat, acessando pelo botão de nova conversa no canto esquerdo. No lugar da Lousa, no Google Gemini, temos o Canvas.

Podemos deixar o Canvas selecionado, que está na parte inferior da tela, para criar documentos e aplicativos. Podemos fazer a mesma coisa: copiar nosso prompt já existente e colá-lo para criar um código para um contador regressivo de 5 até 1 com um segundo de atraso, mantendo a opção de Canvas selecionada. Teremos algo similar ao que o Chat GPT nos trouxe. A visualização é muito parecida, com o prompt no canto esquerdo e, no canto direito, a pré-visualização do código com várias opções clicáveis, como "iniciar". Novamente, não precisamos abrir outro ambiente para testar.

Explorando ferramentas de desenvolvimento

Existem algumas ferramentas que podemos explorar. Por exemplo, com uma prévia, podemos acessar a guia de código e alternar entre essas duas opções. Dentro delas, há várias coisas que podemos explorar. Logo de cara, percebemos que parece mais confuso do que simplesmente enviar uma resposta, não gostar e pedir outra alteração. O que estamos visualizando foi pensado para pessoas desenvolvedoras, com uma série de ferramentas que vamos visualizar em ambientes de desenvolvimento mais completos, como visualizar o histórico do que foi feito e fazer algumas solicitações.

Nosso objetivo a partir de agora será construir uma demanda real que utilize essas ferramentas. Vamos explorar ao máximo a Lousa do GPT e o Canvas do Gemini, que têm, no fim das contas, essa mesma aparência para obter o resultado desejado. Vamos começar.

Sobre o curso IA para Dev: Desenvolvendo e Otimizando Códigos com ChatGPT e Google Gemini

O curso IA para Dev: Desenvolvendo e Otimizando Códigos com ChatGPT e Google Gemini possui 126 minutos de vídeos, em um total de 40 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:

• capitulo