ChatGPT / IA na Programação

01. O que é Inteligência Artificial?

📌 Definição

💻 IA na programação

Na programação, ferramentas de IA podem auxiliar o desenvolvedor em diversas etapas do trabalho.

• Explicar conceitos de programação.
• Criar exemplos de código.
• Encontrar possíveis erros.
• Explicar mensagens de erro.
• Melhorar a organização do código.
• Criar comentários.
• Gerar testes.
• Auxiliar na documentação.
• Transformar uma descrição em código.
• Comparar diferentes soluções.

02. O que é o ChatGPT?

📌 Definição

💻 Exemplo

Tenho uma página HTML.

Preciso criar um botão que altere o
texto de um parágrafo utilizando JavaScript.

Explique passo a passo para um iniciante.

03. A IA vai substituir o programador?

👨‍💻 O programador continua responsável por:

• Entender o problema.
• Definir o que o sistema precisa fazer.
• Avaliar soluções.
• Escolher tecnologias.
• Verificar o código.
• Testar funcionalidades.
• Identificar problemas.
• Garantir segurança.
• Manter o sistema.
• Tomar decisões técnicas.

04. O que é um Prompt?

📌 Definição

❌ Prompt muito simples

Faça um site.

✅ Prompt melhor

Crie uma página HTML5 para apresentar
um curso técnico de Desenvolvimento de Sistemas.

Utilize HTML, CSS e JavaScript puro.

A página deve possuir:
- cabeçalho;
- apresentação do curso;
- lista de disciplinas;
- botão de contato;
- layout responsivo.

Explique o código antes de apresentá-lo.

05. Como criar um bom Prompt?

1️⃣ Contexto

Sou aluno de Desenvolvimento de Sistemas
e estou estudando JavaScript.

2️⃣ Objetivo

Preciso aprender como funciona
o addEventListener().

3️⃣ Problema

Tenho dificuldade para entender
como o evento click funciona.

4️⃣ Tecnologia

Utilize HTML, CSS e JavaScript puro.

5️⃣ Nível de conhecimento

Explique para uma pessoa iniciante.

6️⃣ Formato da resposta

Explique primeiro o conceito.
Depois apresente um exemplo.
Por fim, proponha um exercício.

Sou aluno de Desenvolvimento de Sistemas
e estou estudando JavaScript.

Estou aprendendo eventos no DOM e tenho
dificuldade para entender o click.

Explique o addEventListener() para um iniciante.

Utilize JavaScript puro.

Primeiro explique o conceito.
Depois apresente um exemplo simples.
Depois explique cada linha.
Por fim, crie um exercício para eu praticar.

06. Usando IA para Explicar um Código

💻 Exemplo

const botao = document.querySelector("#botao");

botao.addEventListener("click", function () {
    document.body.classList.toggle("escuro");
});

🤖 Prompt

Explique este código JavaScript
linha por linha.

Sou iniciante em JavaScript.

Explique também:
- o que é const;
- o que é querySelector;
- o que é addEventListener;
- o que significa click;
- o que faz classList.toggle.

07. Usando IA para Ajudar a Encontrar Erros

💻 Exemplo

const nome = document.getElementById("nome");

document.getElementById("botao").addEventListener("click", function() {

    nome.innerHTML = "Olá " + usuario;

});

🤖 Prompt

Meu JavaScript apresenta um erro.

Analise o código abaixo.

Explique:
1. qual pode ser o problema;
2. por que ele acontece;
3. como corrigir;
4. como posso evitar esse tipo de erro.

Não altere o código sem explicar o motivo.

[CÓDIGO]

Não funciona. Corrija.

08. Como Enviar uma Mensagem de Erro para a IA

❌ Evite

Está dando erro.

✅ Prefira

Estou desenvolvendo uma página
com JavaScript.

Quando clico no botão, nada acontece.

No Console do navegador aparece:

[cole aqui a mensagem de erro]

Meu código é:

[cole aqui o código]

O que pode estar causando o problema?

09. Pedindo para a IA Criar Código

💻 Exemplo

Crie um botão em HTML.

Quando o usuário clicar no botão,
JavaScript deve alterar o texto
de um parágrafo.

Utilize HTML5 e JavaScript puro.

Não utilize bibliotecas externas.

10. Não Copie Código sem Entender

❌ Comportamento inadequado

1. Pedir um sistema completo.
2. Copiar o código.
3. Colar no projeto.
4. Executar.
5. Entregar.

✅ Comportamento recomendado

1. Explicar o problema.
2. Pedir uma solução.
3. Estudar a resposta.
4. Fazer perguntas sobre o código.
5. Testar.
6. Modificar.
7. Corrigir.
8. Documentar.

11. Use a IA como Professor Particular

🤖 Exemplo de Prompt

Estou aprendendo JavaScript.

Quero estudar funções.

Ensine o conteúdo como um professor.

Primeiro explique o conceito.

Depois mostre um exemplo simples.

Depois faça uma pergunta para verificar
se eu entendi.

Depois crie um exercício.

Não apresente a resposta do exercício
até eu tentar resolver.

12. Criando Exercícios com IA

🤖 Exemplo

Estou estudando DOM em JavaScript.

Crie 5 exercícios de nível iniciante.

Os exercícios devem utilizar:
- getElementById;
- querySelector;
- textContent;
- classList;
- addEventListener.

Não forneça as respostas inicialmente.

Depois que eu responder,
corrija minhas soluções e explique meus erros.

Crie um exercício fácil.

Crie um exercício intermediário.

Crie um exercício avançado.

Crie um desafio final.

13. Utilizando IA para Revisar Código

🤖 Prompt

Analise este código JavaScript.

Avalie:

1. Organização
2. Legibilidade
3. Nomes das variáveis
4. Possíveis erros
5. Boas práticas
6. Desempenho
7. Segurança

Não altere o código inicialmente.

Primeiro explique quais melhorias
você recomenda e por quê.

Depois apresente uma versão melhorada.

14. Usando IA para Criar Documentação

🤖 Exemplo

Tenho um projeto desenvolvido em HTML,
CSS e JavaScript.

O sistema possui:
- cadastro de usuários;
- listagem;
- edição;
- exclusão;
- pesquisa.

Crie uma documentação simples explicando:

1. objetivo do sistema;
2. tecnologias utilizadas;
3. estrutura de pastas;
4. funcionalidades;
5. como executar o projeto.

15. Usando IA para Refatorar Código

📌 Definição

🤖 Exemplo de Prompt

Analise este código JavaScript.

Quero melhorar sua organização.

Mantenha o comportamento atual.

Explique quais partes podem ser
refatoradas e por quê.

Depois apresente uma versão organizada.

16. IA e Diferentes Tecnologias

17. Segurança e Privacidade

❌ Evite enviar

• Senhas.
• Tokens de acesso.
• Chaves de API.
• Dados bancários.
• Informações pessoais desnecessárias.
• Dados confidenciais de clientes.
• Códigos privados sem autorização.

✅ Antes de compartilhar código

Substitua informações sensíveis por valores fictícios.

const API_KEY = "SUA_CHAVE_AQUI";

18. Como Avaliar um Código Gerado por IA?

🔎 Checklist

• Entendi o que o código faz.
• O código utiliza a tecnologia solicitada.
• Testei o código.
• Verifiquei possíveis erros.
• Verifiquei se existem dados sensíveis.
• A solução realmente resolve meu problema.

19. A IA Pode Errar

💻 Por isso, sempre:

1. Teste o código.
2. Consulte a documentação oficial quando necessário.
3. Compare informações.
4. Verifique versões das tecnologias.
5. Analise mensagens de erro.
6. Não confie cegamente na primeira resposta.

20. IA + Documentação Oficial

💡 Estratégia recomendada

1. Identifique o problema.
2. Pesquise ou pergunte à IA.
3. Entenda a explicação.
4. Consulte a documentação quando necessário.
5. Teste no seu ambiente.
6. Faça perguntas adicionais.
7. Registre o que aprendeu.

21. Prompts Úteis para Programação

🌐 HTML

Explique esta estrutura HTML
linha por linha para um iniciante.

Mostre qual é a função de cada elemento.

🎨 CSS

Explique por que este elemento CSS
não está sendo centralizado.

Analise meu código e explique o problema
antes de apresentar a correção.

⚡ JavaScript

Explique este código JavaScript
linha por linha.

Não pule nenhuma linha.

Utilize uma linguagem simples.

🗄️ SQL

Explique esta consulta SQL.

Mostre:
- o que cada comando faz;
- quais tabelas são utilizadas;
- quais registros serão retornados.

🐙 Git

Explique este comando Git
para um iniciante.

Mostre:
1. o que ele faz;
2. quando utilizar;
3. exemplo;
4. cuidados.

22. Utilizando IA para Planejar um Projeto

🤖 Exemplo de Prompt

Estou desenvolvendo um sistema web
para uma escola.

O sistema deverá permitir:

- cadastro de alunos;
- cadastro de cursos;
- cadastro de professores;
- consulta de alunos;
- edição;
- exclusão;
- pesquisa.

Ajude a organizar o projeto.

Apresente:

1. requisitos;
2. funcionalidades;
3. estrutura de páginas;
4. estrutura de pastas;
5. tecnologias recomendadas;
6. etapas de desenvolvimento.

Não escreva o código ainda.

23. Método de Estudo com IA

1. Aprenda: peça uma explicação.
2. Observe: veja um exemplo.
3. Questione: pergunte o que não entendeu.
4. Pratique: faça um exercício.
5. Teste: execute seu código.
6. Erre: identifique o problema.
7. Corrija: procure entender a solução.
8. Repita: faça novamente sem copiar.

24. Boas Práticas ao Utilizar IA

• Explique o problema com clareza.
• Informe qual tecnologia está utilizando.
• Informe seu nível de conhecimento.
• Peça explicações.
• Teste todo código.
• Não compartilhe informações confidenciais.
• Consulte documentação quando necessário.
• Faça alterações no código para verificar se entendeu.
• Não utilize IA para substituir seu aprendizado.

25. Atividade Prática — Investigando um Erro

💻 Código

<button id="botao">Clique aqui</button>

<p id="mensagem">Texto original</p>

<script>

const botao = document.getElementById("botao");

botao.addEventListener("click", function () {

    document.getElementById("mensagem").innerHTML =
        "Texto alterado";

});

</script>

📝 Tarefa

1. Analise o código.
2. Explique o que ele deveria fazer.
3. Crie uma pergunta para a IA.
4. Peça uma explicação linha por linha.
5. Faça uma alteração no código.
6. Teste novamente.

🏆 Desafio Final — Programador + IA

📝 Etapas

1. Escolha uma pequena funcionalidade para desenvolver.
2. Explique o problema para a IA.
3. Crie um prompt detalhado.
4. Analise a resposta recebida.
5. Implemente a solução.
6. Teste no navegador.
7. Encontre pelo menos uma melhoria.
8. Faça a melhoria.
9. Explique o que você aprendeu.

📋 O aluno deverá apresentar

• Problema escolhido.
• Prompt utilizado.
• Resposta da IA.
• Código utilizado.
• Alterações realizadas.
• Resultado final.
• Explicação do funcionamento.
• O que aprendeu com a atividade.

🎓 Conclusão