# Table of Contents - [Introdução à Engenharia de Prompts | ELIDIANA • Cursos](#introdu-o-engenharia-de-prompts-elidiana-cursos) - [Roadmap Full Stack - JavaScript | ELIDIANA • Roadmaps](#roadmap-full-stack-javascript-elidiana-roadmaps) - [Roadmaps | ELIDIANA • Roadmaps](#roadmaps-elidiana-roadmaps) - [Como Funciona a Internet | Roadmap Full Stack - JavaScript | ELIDIANA • Roadmaps](#como-funciona-a-internet-roadmap-full-stack-javascript-elidiana-roadmaps) - [Entendendo a Web | Roadmap Full Stack - JavaScript | ELIDIANA • Roadmaps](#entendendo-a-web-roadmap-full-stack-javascript-elidiana-roadmaps) - [Segurança Web | Roadmap Full Stack - JavaScript | ELIDIANA • Roadmaps](#seguran-a-web-roadmap-full-stack-javascript-elidiana-roadmaps) - [Tipos de Aplicações Web | Roadmap Full Stack - JavaScript | ELIDIANA • Roadmaps](#tipos-de-aplica-es-web-roadmap-full-stack-javascript-elidiana-roadmaps) - [Unknown](#unknown) - [Unknown](#unknown) - [Unknown](#unknown) - [Unknown](#unknown) - [Unknown](#unknown) - [Unknown](#unknown) - [Unknown](#unknown) - [Ferramentas no Navegador (DevTools) | Roadmap Full Stack - JavaScript | ELIDIANA • Roadmaps](#ferramentas-no-navegador-devtools-roadmap-full-stack-javascript-elidiana-roadmaps) - [Entendendo o Protocolo HTTP | Roadmap Full Stack - JavaScript | ELIDIANA • Roadmaps](#entendendo-o-protocolo-http-roadmap-full-stack-javascript-elidiana-roadmaps) - [Unknown](#unknown) - [Unknown](#unknown) - [O que você precisa para começar? | Introdução à Engenharia de Prompts | ELIDIANA • Cursos](#o-que-voc-precisa-para-come-ar-introdu-o-engenharia-de-prompts-elidiana-cursos) - [Considerações Finais e Próximos Passos | Introdução à Engenharia de Prompts | ELIDIANA • Cursos](#considera-es-finais-e-pr-ximos-passos-introdu-o-engenharia-de-prompts-elidiana-cursos) - [Engenharia de Prompts no Dia a Dia | Introdução à Engenharia de Prompts | ELIDIANA • Cursos](#engenharia-de-prompts-no-dia-a-dia-introdu-o-engenharia-de-prompts-elidiana-cursos) - [Por que aprender Engenharia de Prompts? | Introdução à Engenharia de Prompts | ELIDIANA • Cursos](#por-que-aprender-engenharia-de-prompts-introdu-o-engenharia-de-prompts-elidiana-cursos) - [O que vamos explorar neste curso? | Introdução à Engenharia de Prompts | ELIDIANA • Cursos](#o-que-vamos-explorar-neste-curso-introdu-o-engenharia-de-prompts-elidiana-cursos) - [Links Úteis para Saber Mais | Introdução à Engenharia de Prompts | ELIDIANA • Cursos](#links-teis-para-saber-mais-introdu-o-engenharia-de-prompts-elidiana-cursos) - [Cuidados na Aplicação de Prompts | Introdução à Engenharia de Prompts | ELIDIANA • Cursos](#cuidados-na-aplica-o-de-prompts-introdu-o-engenharia-de-prompts-elidiana-cursos) - [Como os Modelos de Linguagem "Lembram" do que foi Dito? | Introdução à Engenharia de Prompts | ELIDIANA • Cursos](#como-os-modelos-de-linguagem-lembram-do-que-foi-dito-introdu-o-engenharia-de-prompts-elidiana-cursos) - [Instalando o Visual Studio Code | Roadmap Full Stack - JavaScript | ELIDIANA • Roadmaps](#instalando-o-visual-studio-code-roadmap-full-stack-javascript-elidiana-roadmaps) - [Gerenciadores de Pacotes | Roadmap Full Stack - JavaScript | ELIDIANA • Roadmaps](#gerenciadores-de-pacotes-roadmap-full-stack-javascript-elidiana-roadmaps) - [Lógica de Programação | Roadmap Full Stack - JavaScript | ELIDIANA • Roadmaps](#l-gica-de-programa-o-roadmap-full-stack-javascript-elidiana-roadmaps) - [Estrutura de Dados | Roadmap Full Stack - JavaScript | ELIDIANA • Roadmaps](#estrutura-de-dados-roadmap-full-stack-javascript-elidiana-roadmaps) - [Algoritmos | Roadmap Full Stack - JavaScript | ELIDIANA • Roadmaps](#algoritmos-roadmap-full-stack-javascript-elidiana-roadmaps) - [Instalando o Linux no Windows com o WSL | Roadmap Full Stack - JavaScript | ELIDIANA • Roadmaps](#instalando-o-linux-no-windows-com-o-wsl-roadmap-full-stack-javascript-elidiana-roadmaps) - [Elementos Essenciais de um Bom Prompt | Introdução à Engenharia de Prompts | ELIDIANA • Cursos](#elementos-essenciais-de-um-bom-prompt-introdu-o-engenharia-de-prompts-elidiana-cursos) - [Configurando o Git | Roadmap Full Stack - JavaScript | ELIDIANA • Roadmaps](#configurando-o-git-roadmap-full-stack-javascript-elidiana-roadmaps) - [Estruturas Condicionais | Roadmap Full Stack - JavaScript | ELIDIANA • Roadmaps](#estruturas-condicionais-roadmap-full-stack-javascript-elidiana-roadmaps) - [Datalist | Roadmap Full Stack - JavaScript | ELIDIANA • Roadmaps](#datalist-roadmap-full-stack-javascript-elidiana-roadmaps) - [Paradigmas de Programação | Roadmap Full Stack - JavaScript | ELIDIANA • Roadmaps](#paradigmas-de-programa-o-roadmap-full-stack-javascript-elidiana-roadmaps) - [Instalando o Git | Roadmap Full Stack - JavaScript | ELIDIANA • Roadmaps](#instalando-o-git-roadmap-full-stack-javascript-elidiana-roadmaps) - [Como os Modelos de Linguagem "Entendem" um Prompt? | Introdução à Engenharia de Prompts | ELIDIANA • Cursos](#como-os-modelos-de-linguagem-entendem-um-prompt-introdu-o-engenharia-de-prompts-elidiana-cursos) - [Breve Histórico | Roadmap Full Stack - JavaScript | ELIDIANA • Roadmaps](#breve-hist-rico-roadmap-full-stack-javascript-elidiana-roadmaps) - [Comandos Básicos no Linux | Roadmap Full Stack - JavaScript | ELIDIANA • Roadmaps](#comandos-b-sicos-no-linux-roadmap-full-stack-javascript-elidiana-roadmaps) - [Versionamento de Código | Roadmap Full Stack - JavaScript | ELIDIANA • Roadmaps](#versionamento-de-c-digo-roadmap-full-stack-javascript-elidiana-roadmaps) - [Programação Orientada a Objetos | Roadmap Full Stack - JavaScript | ELIDIANA • Roadmaps](#programa-o-orientada-a-objetos-roadmap-full-stack-javascript-elidiana-roadmaps) - [Glossário | Introdução à Engenharia de Prompts | ELIDIANA • Cursos](#gloss-rio-introdu-o-engenharia-de-prompts-elidiana-cursos) - [Variáveis e Constantes | Roadmap Full Stack - JavaScript | ELIDIANA • Roadmaps](#vari-veis-e-constantes-roadmap-full-stack-javascript-elidiana-roadmaps) - [Fundamentos da Linguagem | Roadmap Full Stack - JavaScript | ELIDIANA • Roadmaps](#fundamentos-da-linguagem-roadmap-full-stack-javascript-elidiana-roadmaps) - [Exportação e Importação | Roadmap Full Stack - JavaScript | ELIDIANA • Roadmaps](#exporta-o-e-importa-o-roadmap-full-stack-javascript-elidiana-roadmaps) - [Pré-processadores CSS | Roadmap Full Stack - JavaScript | ELIDIANA • Roadmaps](#pr-processadores-css-roadmap-full-stack-javascript-elidiana-roadmaps) - [Práticas e Técnicas | Roadmap Full Stack - JavaScript | ELIDIANA • Roadmaps](#pr-ticas-e-t-cnicas-roadmap-full-stack-javascript-elidiana-roadmaps) - [... | Roadmap Full Stack - JavaScript | ELIDIANA • Roadmaps](#-roadmap-full-stack-javascript-elidiana-roadmaps) - [Interface e Type | Roadmap Full Stack - JavaScript | ELIDIANA • Roadmaps](#interface-e-type-roadmap-full-stack-javascript-elidiana-roadmaps) - [Metodologias e Boas Práticas | Roadmap Full Stack - JavaScript | ELIDIANA • Roadmaps](#metodologias-e-boas-pr-ticas-roadmap-full-stack-javascript-elidiana-roadmaps) - [Tipagem | Roadmap Full Stack - JavaScript | ELIDIANA • Roadmaps](#tipagem-roadmap-full-stack-javascript-elidiana-roadmaps) - [... | Roadmap Full Stack - JavaScript | ELIDIANA • Roadmaps](#-roadmap-full-stack-javascript-elidiana-roadmaps) - [Generics | Roadmap Full Stack - JavaScript | ELIDIANA • Roadmaps](#generics-roadmap-full-stack-javascript-elidiana-roadmaps) - [JavaScript | Roadmap Full Stack - JavaScript | ELIDIANA • Roadmaps](#javascript-roadmap-full-stack-javascript-elidiana-roadmaps) - [Extreme Programming (XP) | Roadmap Full Stack - JavaScript | ELIDIANA • Roadmaps](#extreme-programming-xp-roadmap-full-stack-javascript-elidiana-roadmaps) - [Combinadores | Roadmap Full Stack - JavaScript | ELIDIANA • Roadmaps](#combinadores-roadmap-full-stack-javascript-elidiana-roadmaps) - [Listas | Roadmap Full Stack - JavaScript | ELIDIANA • Roadmaps](#listas-roadmap-full-stack-javascript-elidiana-roadmaps) - [Kanban | Roadmap Full Stack - JavaScript | ELIDIANA • Roadmaps](#kanban-roadmap-full-stack-javascript-elidiana-roadmaps) - [O que são Metodologias Ágeis? | Roadmap Full Stack - JavaScript | ELIDIANA • Roadmaps](#o-que-s-o-metodologias-geis-roadmap-full-stack-javascript-elidiana-roadmaps) - [Arrays | Roadmap Full Stack - JavaScript | ELIDIANA • Roadmaps](#arrays-roadmap-full-stack-javascript-elidiana-roadmaps) - [Formulários | Roadmap Full Stack - JavaScript | ELIDIANA • Roadmaps](#formul-rios-roadmap-full-stack-javascript-elidiana-roadmaps) - [Meta Tags | Roadmap Full Stack - JavaScript | ELIDIANA • Roadmaps](#meta-tags-roadmap-full-stack-javascript-elidiana-roadmaps) - [Scrum | Roadmap Full Stack - JavaScript | ELIDIANA • Roadmaps](#scrum-roadmap-full-stack-javascript-elidiana-roadmaps) - [HTML | Roadmap Full Stack - JavaScript | ELIDIANA • Roadmaps](#html-roadmap-full-stack-javascript-elidiana-roadmaps) - [Tabelas | Roadmap Full Stack - JavaScript | ELIDIANA • Roadmaps](#tabelas-roadmap-full-stack-javascript-elidiana-roadmaps) - [Cursos | ELIDIANA • Cursos](#cursos-elidiana-cursos) - [CSS | Roadmap Full Stack - JavaScript | ELIDIANA • Roadmaps](#css-roadmap-full-stack-javascript-elidiana-roadmaps) - [Criando um App em React | Roadmap Full Stack - JavaScript | ELIDIANA • Roadmaps](#criando-um-app-em-react-roadmap-full-stack-javascript-elidiana-roadmaps) - [Mídias | Roadmap Full Stack - JavaScript | ELIDIANA • Roadmaps](#m-dias-roadmap-full-stack-javascript-elidiana-roadmaps) - [Unknown](#unknown) - [Unknown](#unknown) - [Unknown](#unknown) - [Projetos | ELIDIANA • Cursos](#projetos-elidiana-cursos) - [Unknown](#unknown) - [Unknown](#unknown) - [Unknown](#unknown) - [Unknown](#unknown) - [Unknown](#unknown) - [Unknown](#unknown) - [Unknown](#unknown) - [Unknown](#unknown) - [Unknown](#unknown) - [Unknown](#unknown) - [Unknown](#unknown) - [Unknown](#unknown) - [Unknown](#unknown) - [Unknown](#unknown) - [Ferramentas e Plataformas de IA da Microsoft | ELIDIANA • Cursos](#ferramentas-e-plataformas-de-ia-da-microsoft-elidiana-cursos) - [Unknown](#unknown) - [Unknown](#unknown) - [Unknown](#unknown) - [Unknown](#unknown) - [Unknown](#unknown) - [Unknown](#unknown) - [Unknown](#unknown) - [Fundamentos de Engenharia de Prompts com Claude 3 | ELIDIANA • Cursos](#fundamentos-de-engenharia-de-prompts-com-claude-3-elidiana-cursos) - [Unknown](#unknown) - [Unknown](#unknown) - [Unknown](#unknown) - [Unknown](#unknown) - [Unknown](#unknown) - [Unknown](#unknown) - [Unknown](#unknown) - [Unknown](#unknown) - [Unknown](#unknown) - [Unknown](#unknown) - [Unknown](#unknown) - [Unknown](#unknown) - [Unknown](#unknown) - [Unknown](#unknown) - [Unknown](#unknown) - [Unknown](#unknown) - [Unknown](#unknown) - [Unknown](#unknown) - [Unknown](#unknown) - [Unknown](#unknown) - [Unknown](#unknown) - [Unknown](#unknown) - [Unknown](#unknown) - [Conhecendo o GitHub Copilot: Aumentando sua Produtividade na Programação | GitHub Copilot como Ferramenta de Produtividade | ELIDIANA • Cursos](#conhecendo-o-github-copilot-aumentando-sua-produtividade-na-programa-o-github-copilot-como-ferramenta-de-produtividade-elidiana-cursos) - [Unknown](#unknown) - [Unknown](#unknown) - [Sobre | ELIDIANA • Cursos](#sobre-elidiana-cursos) - [Unknown](#unknown) - [Unknown](#unknown) - [Lives | ELIDIANA • Cursos](#lives-elidiana-cursos) - [Unknown](#unknown) - [Unknown](#unknown) - [Visão Geral dos Modelos Claude 3 | Fundamentos de Engenharia de Prompts com Claude 3 | ELIDIANA • Cursos](#vis-o-geral-dos-modelos-claude-3-fundamentos-de-engenharia-de-prompts-com-claude-3-elidiana-cursos) - [O que vamos explorar? | Ferramentas e Plataformas de IA da Microsoft | ELIDIANA • Cursos](#o-que-vamos-explorar-ferramentas-e-plataformas-de-ia-da-microsoft-elidiana-cursos) - [GitHub Copilot | Ferramentas e Plataformas de IA da Microsoft | ELIDIANA • Cursos](#github-copilot-ferramentas-e-plataformas-de-ia-da-microsoft-elidiana-cursos) - [Microsoft Copilot | Ferramentas e Plataformas de IA da Microsoft | ELIDIANA • Cursos](#microsoft-copilot-ferramentas-e-plataformas-de-ia-da-microsoft-elidiana-cursos) - [Microsoft 365 Copilot | Ferramentas e Plataformas de IA da Microsoft | ELIDIANA • Cursos](#microsoft-365-copilot-ferramentas-e-plataformas-de-ia-da-microsoft-elidiana-cursos) - [Ferramentas e Serviços de IA para Empresas | Ferramentas e Plataformas de IA da Microsoft | ELIDIANA • Cursos](#ferramentas-e-servi-os-de-ia-para-empresas-ferramentas-e-plataformas-de-ia-da-microsoft-elidiana-cursos) - [Conclusão e Próximos Passos | Ferramentas e Plataformas de IA da Microsoft | ELIDIANA • Cursos](#conclus-o-e-pr-ximos-passos-ferramentas-e-plataformas-de-ia-da-microsoft-elidiana-cursos) - [Novidades e Lançamentos | Fundamentos de Engenharia de Prompts com Claude 3 | ELIDIANA • Cursos](#novidades-e-lan-amentos-fundamentos-de-engenharia-de-prompts-com-claude-3-elidiana-cursos) - [O que vamos explorar? | GitHub Copilot como Ferramenta de Produtividade | ELIDIANA • Cursos](#o-que-vamos-explorar-github-copilot-como-ferramenta-de-produtividade-elidiana-cursos) - [Links Úteis para Saber Mais | Ferramentas e Plataformas de IA da Microsoft | ELIDIANA • Cursos](#links-teis-para-saber-mais-ferramentas-e-plataformas-de-ia-da-microsoft-elidiana-cursos) - [Conhecendo o Claude 3 na AWS | Fundamentos de Engenharia de Prompts com Claude 3 | ELIDIANA • Cursos](#conhecendo-o-claude-3-na-aws-fundamentos-de-engenharia-de-prompts-com-claude-3-elidiana-cursos) - [O que é Engenharia de Prompts? | Fundamentos de Engenharia de Prompts com Claude 3 | ELIDIANA • Cursos](#o-que-engenharia-de-prompts-fundamentos-de-engenharia-de-prompts-com-claude-3-elidiana-cursos) - [Unknown](#unknown) - [Referências | Fundamentos de Engenharia de Prompts com Claude 3 | ELIDIANA • Cursos](#refer-ncias-fundamentos-de-engenharia-de-prompts-com-claude-3-elidiana-cursos) - [Boas Práticas de Engenharia de Prompts no Claude 3 | Fundamentos de Engenharia de Prompts com Claude 3 | ELIDIANA • Cursos](#boas-pr-ticas-de-engenharia-de-prompts-no-claude-3-fundamentos-de-engenharia-de-prompts-com-claude-3-elidiana-cursos) - [Habilitando Acesso aos Modelos Claude no Amazon Bedrock | Fundamentos de Engenharia de Prompts com Claude 3 | ELIDIANA • Cursos](#habilitando-acesso-aos-modelos-claude-no-amazon-bedrock-fundamentos-de-engenharia-de-prompts-com-claude-3-elidiana-cursos) - [Custos na AWS | Fundamentos de Engenharia de Prompts com Claude 3 | ELIDIANA • Cursos](#custos-na-aws-fundamentos-de-engenharia-de-prompts-com-claude-3-elidiana-cursos) - [Explorando o Claude 3 no Amazon Bedrock | Fundamentos de Engenharia de Prompts com Claude 3 | ELIDIANA • Cursos](#explorando-o-claude-3-no-amazon-bedrock-fundamentos-de-engenharia-de-prompts-com-claude-3-elidiana-cursos) - [Como Conferir as Novidades do GitHub Copilot | GitHub Copilot como Ferramenta de Produtividade | ELIDIANA • Cursos](#como-conferir-as-novidades-do-github-copilot-github-copilot-como-ferramenta-de-produtividade-elidiana-cursos) - [Links Úteis | GitHub Copilot como Ferramenta de Produtividade | ELIDIANA • Cursos](#links-teis-github-copilot-como-ferramenta-de-produtividade-elidiana-cursos) - [Explorando o GitHub Copilot na Prática | GitHub Copilot como Ferramenta de Produtividade | ELIDIANA • Cursos](#explorando-o-github-copilot-na-pr-tica-github-copilot-como-ferramenta-de-produtividade-elidiana-cursos) - [O que é GitHub Copilot e Como Ele Pode Aumentar sua Produtividade | GitHub Copilot como Ferramenta de Produtividade | ELIDIANA • Cursos](#o-que-github-copilot-e-como-ele-pode-aumentar-sua-produtividade-github-copilot-como-ferramenta-de-produtividade-elidiana-cursos) - [Unknown](#unknown) - [Unknown](#unknown) - [Unknown](#unknown) - [Unknown](#unknown) - [Unknown](#unknown) - [Unknown](#unknown) - [Unknown](#unknown) - [Unknown](#unknown) - [Unknown](#unknown) - [Unknown](#unknown) - [Unknown](#unknown) - [Unknown](#unknown) - [Unknown](#unknown) - [Unknown](#unknown) - [Unknown](#unknown) - [Unknown](#unknown) - [Unknown](#unknown) - [Unknown](#unknown) - [Unknown](#unknown) - [Unknown](#unknown) - [Unknown](#unknown) - [Unknown](#unknown) - [Criando um Alerta de Custos na AWS | Fundamentos de Engenharia de Prompts com Claude 3 | ELIDIANA • Cursos](#criando-um-alerta-de-custos-na-aws-fundamentos-de-engenharia-de-prompts-com-claude-3-elidiana-cursos) - [Preços dos modelos da Anthropic no Amazon Bedrock | Fundamentos de Engenharia de Prompts com Claude 3 | ELIDIANA • Cursos](#pre-os-dos-modelos-da-anthropic-no-amazon-bedrock-fundamentos-de-engenharia-de-prompts-com-claude-3-elidiana-cursos) - [Entendendo sua Fatura da AWS | Fundamentos de Engenharia de Prompts com Claude 3 | ELIDIANA • Cursos](#entendendo-sua-fatura-da-aws-fundamentos-de-engenharia-de-prompts-com-claude-3-elidiana-cursos) - [Unknown](#unknown) - [Unknown](#unknown) - [Unknown](#unknown) --- # Introdução à Engenharia de Prompts | ELIDIANA • Cursos For the complete documentation index, see [llms.txt](https://elidianaandrade.gitbook.io/cursos/llms.txt) . This page is also available as [Markdown](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/introducao-a-engenharia-de-prompts.md) . Com uma abordagem prática para otimizar o uso de prompts em ferramentas de IA, o curso abrange uma visão geral sobre a área, destacando suas principais aplicações e importância. São abordadas boas práticas para criar prompts eficazes, garantindo respostas mais precisas e relevantes. Além disso, apresenta os próximos passos para aprofundar os conhecimentos na área, fornecendo recursos adicionais e estratégias para aplicar as técnicas em outros contextos. ### Instrutora[](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts#instrutora) O curso é ministrado por Elidiana Andrade, Tech Education Analyst na [DIO](https://www.dio.me/) e especialista em Desenvolvimento de Software com Metodologias Ágeis pela Universidade Salvador. [GitHub](https://github.com/elidianaandrade) • [LinkedIn](https://www.linkedin.com/in/elidianaandrade/) ### Objetivo[](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts#objetivo) Explorar os fundamentos da Engenharia de Prompts, compreendendo os conceitos essenciais e as melhores práticas para criar prompts eficazes. ### Percurso[](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts#percurso) [](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/introducao/por-que-aprender-engenharia-de-prompts) ![Cover](https://elidianaandrade.gitbook.io/cursos/~gitbook/image?url=https%3A%2F%2F2589491333-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F3qTdlyc9Bv4eCMQFkvul%252Fuploads%252FSvnbfr1lAFknqwjyxud1%252FCapa%2520Curso.png%3Falt%3Dmedia%26token%3D8b1bd41b-5233-40bc-87dc-902f68907bc6&width=752&dpr=3&quality=100&sign=294f8b9d&sv=2) Introdução [](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/visao-geral-da-engenharia-de-prompts/como-os-modelos-de-linguagem-entendem-um-prompt) ![Cover](https://elidianaandrade.gitbook.io/cursos/~gitbook/image?url=https%3A%2F%2F2589491333-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F3qTdlyc9Bv4eCMQFkvul%252Fuploads%252FwYuQlW4eDY1KcarYaDJ3%252FVis%25C3%25A3o%2520Geral%2520da%2520Engenharia%2520de%2520Prompts.png%3Falt%3Dmedia%26token%3D42a85677-529b-4168-95b7-b707a67adc17&width=752&dpr=3&quality=100&sign=c5ea8682&sv=2) Visão Geral da Engenharia de Prompts [](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/aplicacoes-praticas-da-engenharia-de-prompts/engenharia-de-prompts-no-dia-a-dia) ![Cover](https://elidianaandrade.gitbook.io/cursos/~gitbook/image?url=https%3A%2F%2F2589491333-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F3qTdlyc9Bv4eCMQFkvul%252Fuploads%252Fsfa0d51iKnkx13QBfLPQ%252FAplica%25C3%25A7%25C3%25B5es%2520Pr%25C3%25A1ticas%2520da%2520Engenharia%2520de%2520Prompts.png%3Falt%3Dmedia%26token%3D5720c9da-5d26-455f-8ad7-a54221fbb44e&width=752&dpr=3&quality=100&sign=1a21ef5a&sv=2) Aplicações Práticas da Engenharia de Prompts [](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/leve-seus-prompts-ao-proximo-nivel/consideracoes-finais-e-proximos-passos) ![Cover](https://elidianaandrade.gitbook.io/cursos/~gitbook/image?url=https%3A%2F%2F2589491333-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F3qTdlyc9Bv4eCMQFkvul%252Fuploads%252F5FFFowUigsRPqh8NyKUq%252FLeve%2520seus%2520Prompts%2520ao%2520Pr%25C3%25B3ximo%2520N%25C3%25ADvel.png%3Falt%3Dmedia%26token%3Df8cfcea2-9115-42b7-a7c2-67e0243cb61b&width=752&dpr=3&quality=100&sign=6c9707fd&sv=2) Leve seus Prompts ao Próximo Nível [NextPor que aprender Engenharia de Prompts?](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/introducao/por-que-aprender-engenharia-de-prompts) Last updated 1 year ago --- # Roadmap Full Stack - JavaScript | ELIDIANA • Roadmaps For the complete documentation index, see [llms.txt](https://elidianaandrade.gitbook.io/roadmaps/llms.txt) . This page is also available as [Markdown](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/readme.md) . Este guia de aprendizagem reúne conteúdos, práticas e orientações estruturadas para apoiar o seu crescimento técnico como desenvolvedor(a) web. Embora o foco desta trilha esteja na **linguagem JavaScript**, os conceitos que você aprenderá aqui, como lógica de programação, estrutura de dados, comunicação via HTTP, APIs, banco de dados, versionamento de código e metodologias ágeis, **são universais**. ### Percurso[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript#percurso) [](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/editor) **Fundamentos da Web** [](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/ii.-preparando-o-ambiente-de-desenvolvimento/instalando-o-linux-no-windows-com-o-wsl) **Preparando o Ambiente de Desenvolvimento** **Fundamentos da Programação** [](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/iv.-a-triade-da-web/html) **A Tríade da Web** [](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/v.-typescript/interface-e-type) **TypeScript** [](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/vi.-react-next.js-e-tailwind/criando-um-app-em-react) **React** [](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/vii.-node.js-e-express/...) **Node.js e Express** [](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/viii.-banco-de-dados-e-orm/...) **Banco de Dados e ORM** [](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/ix.-metodologias-ageis/o-que-sao-metodologias-ageis) **Metodologias Ágeis** [PróximoComo Funciona a Internet](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/editor) Atualizado há 8 meses --- # Roadmaps | ELIDIANA • Roadmaps For the complete documentation index, see [llms.txt](https://elidianaandrade.gitbook.io/roadmaps/llms.txt) . This page is also available as [Markdown](https://elidianaandrade.gitbook.io/roadmaps/roadmaps.md) . ![Cover](https://elidianaandrade.gitbook.io/roadmaps/~gitbook/image?url=https%3A%2F%2Fimages.unsplash.com%2Fphoto-1633356122102-3fe601e05bd2%3Fcrop%3Dentropy%26cs%3Dsrgb%26fm%3Djpg%26ixid%3DM3wxOTcwMjR8MHwxfHNlYXJjaHwxfHxyZWFjdHxlbnwwfHx8fDE3NjM2NzQ0MDB8MA%26ixlib%3Drb-4.1.0%26q%3D85&width=490&dpr=3&quality=100&sign=eb65c448&sv=2) #### Full Stack JavaScript[](https://elidianaandrade.gitbook.io/roadmaps#full-stack-javascript) [Acessar Roadmap](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/) --- # Como Funciona a Internet | Roadmap Full Stack - JavaScript | ELIDIANA • Roadmaps For the complete documentation index, see [llms.txt](https://elidianaandrade.gitbook.io/roadmaps/llms.txt) . This page is also available as [Markdown](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/editor.md) . ### Introdução[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/editor#introducao) A Internet é uma rede global que conecta dispositivos por meio de protocolos de comunicação padronizados, como o TCP/IP. Ela funciona transmitindo informações em pequenos pacotes de dados, permitindo que dispositivos diferentes consigam se comunicar. Quando um usuário realiza uma ação, como abrir um site, os dados correspondentes são divididos em pacotes. Cada pacote percorre a rede passando por diversos roteadores, que determinam o melhor caminho para que ele chegue ao destino. Esses pacotes podem seguir rotas distintas e, ao final, são reorganizados para reconstruir a informação original. **Cada pacote contém duas partes principais:** * **Cabeçalho:** com informações como endereços IP, portas e outros metadados usados para roteamento. * **Payload:** a **carga útil**, ou seja, a parte do pacote que contém os dados reais sendo enviados. * * * ### Comunicação Cliente-Servidor[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/editor#comunicacao-cliente-servidor) A Internet opera majoritariamente no modelo **cliente-servidor**, em que o cliente envia requisições e o servidor responde com dados, páginas ou serviços. * **Cliente**: qualquer dispositivo que solicita dados ou serviços (computador, smartphone, etc.). * **Servidor**: sistema que fornece serviços ou recursos aos clientes, como sites, e-mails ou arquivos. #### TCP/IP[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/editor#tcp-ip) Essa comunicação é organizada pelo **TCP/IP**, que garante que os dados cheguem corretamente: * O **IP** **(Protocolo de Internet)** encaminha os pacotes ao destino correto. * O **TCP (Protocolo de Controle de Transmissão)** fragmenta mensagens grandes em pacotes, assegura que cheguem completos e na ordem certa e solicita retransmissão em caso de perda. * * * ### Entendendo o que é o endereço IP[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/editor#entendendo-o-que-e-o-endereco-ip) Para que essa comunicação funcione corretamente, cada dispositivo conectado à Internet precisa de um identificador único chamado **endereço IP**. **Existem dois padrões principais de endereçamento:** * **IPv4:** formato mais antigo, com endereços de 32 bits (ex.: `192.168.0.10`). * **IPv6:** versão mais recente, com 128 bits (ex.: `2001:db8::1`), criada para suprir a limitação de endereços do IPv4. Em muitas redes, múltiplos dispositivos compartilham um único IP público através do **NAT (Network Address Translation)**, que traduz endereços privados internos em endereços públicos. #### Local Host[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/editor#local-host) Durante o desenvolvimento e testes de aplicações, é comum utilizar o endereço `**localhost**`, que corresponde ao IP especial `**127.0.0.1**` em IPv4 ou `**::1**` em IPv6. Ele permite que cliente e servidor se comuniquem dentro do mesmo computador, sem necessidade de acesso à Internet. > **Exemplo:** Um navegador acessando `**http://localhost:3000**` está se conectando a um servidor rodando na própria máquina na porta 3000. O endereço `localhost` sempre referencia a **máquina local**. Portanto, se enviado para outro usuário, ele não permitirá acesso ao servidor remoto, pois para o outro host `localhost` aponta para si mesmo. #### Portas[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/editor#portas) Além do IP, cada dispositivo utiliza **portas** para identificar serviços específicos dentro dele. Cada porta funciona como uma "porta de entrada" para diferentes tipos de comunicação, permitindo que múltiplos serviços rodem simultaneamente no mesmo endereço IP. * * * ### **Domínio, Subdomínio e TLD**[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/editor#dominio-subdominio-e-tld) Embora os dispositivos usem endereços IP para se comunicar, os números do IP são difíceis de memorizar, por exemplo: `142.250.190.78`. Para tornar mais fácil o acesso e a identificação de recursos na internet nós temos os **domínios.** Os domínios, como `google.com`, **funcionam como “apelidos” para esses endereços IP**, permitindo que seja muito mais simples acessar sites e serviços. **Sua estrutura é formada por:** * **TLD (Top-Level Domain):** a extensão final, como `_.com_`, `_.org_`, `_.br_`. * **Domínio:** o nome principal registrado (ex.: `_exemplo.com_`). * **Subdomínio:** uma divisão do domínio, como `_www.exemplo.com_` ou `_api.exemplo.com_`. Formato geral: Copiar subdomínio.domínio.TLD * * * ### **DNS (Domain Name System)**[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/editor#dns-domain-name-system) Para converter um domínio em endereço IP, existe o **DNS (Domain Name System)**. Ele funciona como uma “agenda telefônica” da Internet: 1. O cliente consulta um servidor DNS. 2. O DNS procura o IP associado ao domínio. 3. O cliente recebe o IP e então consegue enviar os pacotes ao servidor correto. #### Tipos comuns de registros DNS[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/editor#tipos-comuns-de-registros-dns) * **A:** aponta para um endereço IPv4. * **AAAA:** aponta para um IPv6. * **CNAME (Canonical Name):** cria um alias para outro domínio. * **MX:** define servidores de e-mail. * **TXT:** armazena informações e políticas (como SPF). * **SRV (Service Record):** especifica serviços e portas. * **PTR (Pointer Record):** faz a resolução reversa (IP → nome). Dessa forma, o DNS possibilita que usuários utilizem nomes amigáveis, enquanto a rede continua funcionando com endereços numéricos e protocolos padronizados. * * * ### Firewall[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/editor#firewall) Para garantir que todo esse tráfego chegue aos destinos corretos sem comprometer a segurança, temos o **firewall**, um sistema responsável por filtrar e controlar os pacotes que entram e saem da rede. Ele funciona como uma barreira de proteção, permitindo apenas conexões consideradas seguras com base em regras pré-definidas, como IP, porta e protocolo. **Existem dois tipos principais:** * **Firewall de rede:** protege toda a rede contra acessos externos. * **Firewall de host:** instalado no próprio dispositivo para bloquear conexões indesejadas. Firewalls modernos (NGFW) também detectam ameaças, bloqueiam comportamentos suspeitos e analisam profundamente os pacotes. Assim, ajudam a prevenir acessos não autorizados e ataques, mantendo a comunicação mais segura na Internet. [AnteriorRoadmap Full Stack - JavaScript](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript) [PróximoEntendendo a Web](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/entendendo-a-web) Atualizado há 8 meses --- # Entendendo a Web | Roadmap Full Stack - JavaScript | ELIDIANA • Roadmaps For the complete documentation index, see [llms.txt](https://elidianaandrade.gitbook.io/roadmaps/llms.txt) . This page is also available as [Markdown](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/entendendo-a-web.md) . ### Introdução[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/entendendo-a-web#introducao) A Web (World Wide Web) é um sistema de distribuição de informações interconectadas por links e acessíveis via Internet. Ela permite que usuários visualizem páginas, façam buscas, interajam com aplicações e consumam conteúdos multimídia. * * * ### Servidores Web[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/entendendo-a-web#servidores-web) Para que um site esteja disponível na Internet, ele precisa estar em um **servidor web**, que é um computador ou serviço dedicado a armazenar arquivos, processar requisições e enviar respostas aos usuários. * * * ### Hospedagem[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/entendendo-a-web#hospedagem) A **hospedagem** é o serviço que disponibiliza esse servidor e seus recursos para um site. Existem diferentes tipos de hospedagem: * **Compartilhada**: vários sites dividem o mesmo servidor. * **VPS (Servidor Virtual Privado)**: o servidor é dividido virtualmente, oferecendo mais controle e desempenho. * **Dedicada**: um servidor exclusivo para um único site ou aplicação. * **Cloud**: recursos escaláveis e distribuídos na nuvem, ideais para sites de alto tráfego. * * * ### **Comunicação da Web**[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/entendendo-a-web#comunicacao-da-web) A comunicação básica da Web ocorre através do protocolo **HTTP** (Hypertext Transfer Protocol), que opera no modelo **request/response**: o cliente envia uma requisição e o servidor devolve uma resposta. > **Exemplo:** Quando você acessa `https://meusite.com`, o navegador envia uma requisição HTTP ao servidor, que responde com a página HTML, folhas de estilo, scripts, imagens e demais recursos necessários. Esse modelo funciona para a maioria dos cenários, como páginas estáticas, APIs REST e aplicações baseadas em requisições. [AnteriorComo Funciona a Internet](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/editor) [PróximoSegurança Web](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/entendendo-a-web/markdown) Atualizado há 8 meses --- # Segurança Web | Roadmap Full Stack - JavaScript | ELIDIANA • Roadmaps For the complete documentation index, see [llms.txt](https://elidianaandrade.gitbook.io/roadmaps/llms.txt) . This page is also available as [Markdown](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/entendendo-a-web/markdown.md) . ### HTTP e HTTPS[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/entendendo-a-web/markdown#http-e-https) O HTTP é o protocolo base da Web, porém ele transmite dados em texto puro. Para garantir segurança, foi criado o **HTTPS**, que utiliza criptografia via **TLS (Transport Layer Security)**. > **Exemplo:** Acessar `http://exemplo.com/login` → sua senha pode ser interceptada. Acessar `https://exemplo.com/login` → sua senha viaja criptografada. #### **Certificados**[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/entendendo-a-web/markdown#certificados) Um certificado digital identifica o servidor e permite a criação de uma conexão criptografada. Hoje, a grande maioria dos sites usa certificados gratuitos gerados automaticamente por serviços como **Let’s Encrypt**. > **Exemplo:** Quando o navegador mostra um cadeado ao lado do endereço, significa que o certificado foi verificado. #### **Para Saber Mais**[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/entendendo-a-web/markdown#para-saber-mais) * TLS handshake * Renovação automática (Let’s Encrypt) * HSTS * Configuração segura de headers * OWASP Top 10 * SSRF, RCE, SQLi * Mitigação em camadas * * * ### CORS e Same-Origin Policy[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/entendendo-a-web/markdown#cors-e-same-origin-policy) #### O que é Origem[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/entendendo-a-web/markdown#o-que-e-origem) Protocolo + domínio + porta > **Exemplo:** `https://meusite.com:443` é uma origem diferente de `https://api.meusite.com:443`. #### **Por que o navegador bloqueia requisições?**[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/entendendo-a-web/markdown#por-que-o-navegador-bloqueia-requisicoes) A Same-Origin Policy impede que páginas façam requisições para outras origens sem permissão explícita, protegendo o usuário contra ataques que abusam de scripts maliciosos. Para permitir integrações legítimas, o CORS define quais origens externas podem acessar recursos do servidor. > **Exemplo:** Um site malicioso não pode fazer uma requisição para `https://banco.com` usando seus cookies. > > Para permitir acessos controlados, existe o **CORS**, onde o servidor define quais origens externas podem consumir seus recursos. #### **Para Saber Mais**[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/entendendo-a-web/markdown#para-saber-mais-1) * Preflight request * Headers Access-Control-Allow-\* * CORS em microserviços * * * ### Estado e Identidade do Usuário[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/entendendo-a-web/markdown#estado-e-identidade-do-usuario) * **Cookies:** armazenam pequenas informações * **Sessões:** guardam dados no servidor * **Tokens (JWT, OAuth):** JWT guarda informações no token #### **Para Saber Mais**[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/entendendo-a-web/markdown#para-saber-mais-2) * HttpOnly * Secure * SameSite * Refresh tokens * Fluxos de renovação e expiração [AnteriorEntendendo a Web](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/entendendo-a-web) [PróximoTipos de Aplicações Web](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/entendendo-a-web/tipos-de-aplicacoes-web) Atualizado há 8 meses --- # Tipos de Aplicações Web | Roadmap Full Stack - JavaScript | ELIDIANA • Roadmaps For the complete documentation index, see [llms.txt](https://elidianaandrade.gitbook.io/roadmaps/llms.txt) . This page is also available as [Markdown](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/entendendo-a-web/tipos-de-aplicacoes-web.md) . ### **SPA (Single-Page Application)**[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/entendendo-a-web/tipos-de-aplicacoes-web#spa-single-page-application) Tipo de aplicação web onde **todas as interações acontecem em uma única página**. A navegação entre "páginas" é feita sem recarregar a página completamente. #### **Vantagens**[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/entendendo-a-web/tipos-de-aplicacoes-web#vantagens) * Melhor experiência do usuário, com navegação rápida e sem carregamentos de página. * As páginas são carregadas de forma dinâmica, o que pode melhorar o desempenho. > **Exemplo**: > > Em um SPA, ao clicar em diferentes links ou botões, apenas o conteúdo da página muda, mas a estrutura do site não é recarregada. ### **PWA (Progressive Web App)**[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/entendendo-a-web/tipos-de-aplicacoes-web#pwa-progressive-web-app) Aplicação web que utiliza as tecnologias da web modernas para oferecer uma experiência similar à de um aplicativo nativo. #### **Características**[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/entendendo-a-web/tipos-de-aplicacoes-web#caracteristicas) * **Responsivo**: Funciona bem em qualquer dispositivo, seja desktop ou móvel. * **Offline-first**: Pode ser usado mesmo sem conexão com a internet (usando cache). * **Instalável**: Pode ser "instalada" no dispositivo, com um ícone na tela inicial (sem necessidade de uma loja de aplicativos). * **Notificações Push**: Permite enviar notificações mesmo quando o app não está em uso. #### **Como criar um PWA**[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/entendendo-a-web/tipos-de-aplicacoes-web#como-criar-um-pwa) * Usar **Service Workers** para cache e funcionalidade offline. * Criar um **manifesto PWA** para fornecer ícones e definir configurações para o "modo aplicativo". [AnteriorSegurança Web](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/entendendo-a-web/markdown) [PróximoEntendendo o Protocolo HTTP](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/markdown) Atualizado há 8 meses --- # Unknown \> For the complete documentation index, see \[llms.txt\](https://elidianaandrade.gitbook.io/roadmaps/llms.txt). Markdown versions of documentation pages are available by appending \`.md\` to page URLs; this page is available as \[Markdown\](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/entendendo-a-web.md). # Entendendo a Web ### Introdução A Web (World Wide Web) é um sistema de distribuição de informações interconectadas por links e acessíveis via Internet. Ela permite que usuários visualizem páginas, façam buscas, interajam com aplicações e consumam conteúdos multimídia. \*\*\* ### Servidores Web Para que um site esteja disponível na Internet, ele precisa estar em um \*\*servidor web\*\*, que é um computador ou serviço dedicado a armazenar arquivos, processar requisições e enviar respostas aos usuários. \*\*\* ### Hospedagem A \*\*hospedagem\*\* é o serviço que disponibiliza esse servidor e seus recursos para um site. Existem diferentes tipos de hospedagem: \* \*\*Compartilhada\*\*: vários sites dividem o mesmo servidor. \* \*\*VPS (Servidor Virtual Privado)\*\*: o servidor é dividido virtualmente, oferecendo mais controle e desempenho. \* \*\*Dedicada\*\*: um servidor exclusivo para um único site ou aplicação. \* \*\*Cloud\*\*: recursos escaláveis e distribuídos na nuvem, ideais para sites de alto tráfego. \*\*\* ### \*\*Comunicação da Web\*\* A comunicação básica da Web ocorre através do protocolo \*\*HTTP\*\* (Hypertext Transfer Protocol), que opera no modelo \*\*request/response\*\*: o cliente envia uma requisição e o servidor devolve uma resposta. > \*\*Exemplo:\*\*\\ > Quando você acessa \`https://meusite.com\`, o navegador envia uma requisição HTTP ao servidor, que responde com a página HTML, folhas de estilo, scripts, imagens e demais recursos necessários. Esse modelo funciona para a maioria dos cenários, como páginas estáticas, APIs REST e aplicações baseadas em requisições. --- # Unknown \> For the complete documentation index, see \[llms.txt\](https://elidianaandrade.gitbook.io/roadmaps/llms.txt). Markdown versions of documentation pages are available by appending \`.md\` to page URLs; this page is available as \[Markdown\](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/entendendo-a-web/markdown.md). # Segurança Web ### HTTP e HTTPS O HTTP é o protocolo base da Web, porém ele transmite dados em texto puro. Para garantir segurança, foi criado o \*\*HTTPS\*\*, que utiliza criptografia via \*\*TLS (Transport Layer Security)\*\*. > \*\*Exemplo:\*\*\\ > Acessar \`http://exemplo.com/login\` → sua senha pode ser interceptada.\\ > Acessar \`https://exemplo.com/login\` → sua senha viaja criptografada. #### \*\*Certificados\*\* Um certificado digital identifica o servidor e permite a criação de uma conexão criptografada. Hoje, a grande maioria dos sites usa certificados gratuitos gerados automaticamente por serviços como \*\*Let’s Encrypt\*\*. > \*\*Exemplo:\*\*\\ > Quando o navegador mostra um cadeado ao lado do endereço, significa que o certificado foi verificado. {% hint style="info" %} #### \*\*Para Saber Mais\*\* \* TLS handshake \* Renovação automática (Let’s Encrypt) \* HSTS \* Configuração segura de headers \* OWASP Top 10 \* SSRF, RCE, SQLi \* Mitigação em camadas {% endhint %} \*\*\* ### CORS e Same-Origin Policy #### O que é Origem Protocolo + domínio + porta > \*\*Exemplo:\*\*\\ > \`https://meusite.com:443\` é uma origem diferente de \`https://api.meusite.com:443\`. #### \*\*Por que o navegador bloqueia requisições?\*\* A Same-Origin Policy impede que páginas façam requisições para outras origens sem permissão explícita, protegendo o usuário contra ataques que abusam de scripts maliciosos. Para permitir integrações legítimas, o CORS define quais origens externas podem acessar recursos do servidor. > \*\*Exemplo:\*\*\\ > Um site malicioso não pode fazer uma requisição para \`https://banco.com\` usando seus cookies. > > Para permitir acessos controlados, existe o \*\*CORS\*\*, onde o servidor define quais origens externas podem consumir seus recursos. {% hint style="info" %} #### \*\*Para Saber Mais\*\* \* Preflight request \* Headers Access-Control-Allow-\\\* \* CORS em microserviços {% endhint %} \*\*\* ### Estado e Identidade do Usuário \* \*\*Cookies:\*\* armazenam pequenas informações \* \*\*Sessões:\*\* guardam dados no servidor \* \*\*Tokens (JWT, OAuth):\*\* JWT guarda informações no token {% hint style="info" %} #### \*\*Para Saber Mais\*\* \* HttpOnly \* Secure \* SameSite \* Refresh tokens \* Fluxos de renovação e expiração {% endhint %} --- # Unknown \> For the complete documentation index, see \[llms.txt\](https://elidianaandrade.gitbook.io/roadmaps/llms.txt). Markdown versions of documentation pages are available by appending \`.md\` to page URLs; this page is available as \[Markdown\](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/editor.md). # Como Funciona a Internet ### Introdução A Internet é uma rede global que conecta dispositivos por meio de protocolos de comunicação padronizados, como o TCP/IP. Ela funciona transmitindo informações em pequenos pacotes de dados, permitindo que dispositivos diferentes consigam se comunicar. Quando um usuário realiza uma ação, como abrir um site, os dados correspondentes são divididos em pacotes. Cada pacote percorre a rede passando por diversos roteadores, que determinam o melhor caminho para que ele chegue ao destino. Esses pacotes podem seguir rotas distintas e, ao final, são reorganizados para reconstruir a informação original. \*\*Cada pacote contém duas partes principais:\*\* \* \*\*Cabeçalho:\*\* com informações como endereços IP, portas e outros metadados usados para roteamento. \* \*\*Payload:\*\* a \*\*carga útil\*\*, ou seja, a parte do pacote que contém os dados reais sendo enviados. \*\*\* ### Comunicação Cliente-Servidor A Internet opera majoritariamente no modelo \*\*cliente-servidor\*\*, em que o cliente envia requisições e o servidor responde com dados, páginas ou serviços. \* \*\*Cliente\*\*: qualquer dispositivo que solicita dados ou serviços (computador, smartphone, etc.). \* \*\*Servidor\*\*: sistema que fornece serviços ou recursos aos clientes, como sites, e-mails ou arquivos. #### TCP/IP Essa comunicação é organizada pelo \*\*TCP/IP\*\*, que garante que os dados cheguem corretamente: \* O \*\*IP\*\* \*\*(Protocolo de Internet)\*\* encaminha os pacotes ao destino correto. \* O \*\*TCP (Protocolo de Controle de Transmissão)\*\* fragmenta mensagens grandes em pacotes, assegura que cheguem completos e na ordem certa e solicita retransmissão em caso de perda. \*\*\* ### Entendendo o que é o endereço IP Para que essa comunicação funcione corretamente, cada dispositivo conectado à Internet precisa de um identificador único chamado \*\*endereço IP\*\*. \*\*Existem dois padrões principais de endereçamento:\*\* \* \*\*IPv4:\*\* formato mais antigo, com endereços de 32 bits (ex.: \`192.168.0.10\`). \* \*\*IPv6:\*\* versão mais recente, com 128 bits (ex.: \`2001:db8::1\`), criada para suprir a limitação de endereços do IPv4. {% hint style="info" %} Em muitas redes, múltiplos dispositivos compartilham um único IP público através do \*\*NAT (Network Address Translation)\*\*, que traduz endereços privados internos em endereços públicos. {% endhint %} #### Local Host Durante o desenvolvimento e testes de aplicações, é comum utilizar o endereço \*\*\`localhost\`\*\*, que corresponde ao IP especial \*\*\`127.0.0.1\`\*\* em IPv4 ou \*\*\`::1\`\*\* em IPv6. Ele permite que cliente e servidor se comuniquem dentro do mesmo computador, sem necessidade de acesso à Internet. > \*\*Exemplo:\*\*\\ > Um navegador acessando \*\*\`http://localhost:3000\`\*\* está se conectando a um servidor rodando na própria máquina na porta 3000. {% hint style="info" %} O endereço \`localhost\` sempre referencia a \*\*máquina local\*\*. Portanto, se enviado para outro usuário, ele não permitirá acesso ao servidor remoto, pois para o outro host \`localhost\` aponta para si mesmo. {% endhint %} #### Portas Além do IP, cada dispositivo utiliza \*\*portas\*\* para identificar serviços específicos dentro dele. Cada porta funciona como uma "porta de entrada" para diferentes tipos de comunicação, permitindo que múltiplos serviços rodem simultaneamente no mesmo endereço IP. \*\*\* ### \*\*Domínio, Subdomínio e TLD\*\* Embora os dispositivos usem endereços IP para se comunicar, os números do IP são difíceis de memorizar, por exemplo: \`142.250.190.78\`. Para tornar mais fácil o acesso e a identificação de recursos na internet nós temos os \*\*domínios.\*\* Os domínios, como \`google.com\`, \*\*funcionam como “apelidos” para esses endereços IP\*\*, permitindo que seja muito mais simples acessar sites e serviços. \*\*Sua estrutura é formada por:\*\* \* \*\*TLD (Top-Level Domain):\*\* a extensão final, como \*\`.com\`\*, \*\`.org\`\*, \*\`.br\`\*. \* \*\*Domínio:\*\* o nome principal registrado (ex.: \*\`exemplo.com\`\*). \* \*\*Subdomínio:\*\* uma divisão do domínio, como \*\`www.exemplo.com\`\* ou \*\`api.exemplo.com\`\*. {% code title="Formato geral:" %} \`\`\` subdomínio.domínio.TLD \`\`\` {% endcode %} \*\*\* ### \*\*DNS (Domain Name System)\*\* Para converter um domínio em endereço IP, existe o \*\*DNS (Domain Name System)\*\*. Ele funciona como uma “agenda telefônica” da Internet: 1. O cliente consulta um servidor DNS. 2. O DNS procura o IP associado ao domínio. 3. O cliente recebe o IP e então consegue enviar os pacotes ao servidor correto. {% hint style="info" %} #### Tipos comuns de registros DNS \* \*\*A:\*\* aponta para um endereço IPv4. \* \*\*AAAA:\*\* aponta para um IPv6. \* \*\*CNAME (Canonical Name):\*\* cria um alias para outro domínio. \* \*\*MX:\*\* define servidores de e-mail. \* \*\*TXT:\*\* armazena informações e políticas (como SPF). \* \*\*SRV (Service Record):\*\* especifica serviços e portas. \* \*\*PTR (Pointer Record):\*\* faz a resolução reversa (IP → nome). {% endhint %} Dessa forma, o DNS possibilita que usuários utilizem nomes amigáveis, enquanto a rede continua funcionando com endereços numéricos e protocolos padronizados. \*\*\* ### Firewall Para garantir que todo esse tráfego chegue aos destinos corretos sem comprometer a segurança, temos o \*\*firewall\*\*, um sistema responsável por filtrar e controlar os pacotes que entram e saem da rede.\\ Ele funciona como uma barreira de proteção, permitindo apenas conexões consideradas seguras com base em regras pré-definidas, como IP, porta e protocolo. \*\*Existem dois tipos principais:\*\* \* \*\*Firewall de rede:\*\* protege toda a rede contra acessos externos. \* \*\*Firewall de host:\*\* instalado no próprio dispositivo para bloquear conexões indesejadas. Firewalls modernos (NGFW) também detectam ameaças, bloqueiam comportamentos suspeitos e analisam profundamente os pacotes. Assim, ajudam a prevenir acessos não autorizados e ataques, mantendo a comunicação mais segura na Internet. --- # Unknown \# ELIDIANA • Roadmaps ## Ver todos os roadmaps - \[Roadmaps\](https://elidianaandrade.gitbook.io/roadmaps/roadmaps.md) ## Roadmap Full Stack - JavaScript - \[Roadmap Full Stack - JavaScript\](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/readme.md) - \[Como Funciona a Internet\](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/editor.md) - \[Entendendo a Web\](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/entendendo-a-web.md) - \[Segurança Web\](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/entendendo-a-web/markdown.md) - \[Tipos de Aplicações Web\](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/entendendo-a-web/tipos-de-aplicacoes-web.md) - \[Entendendo o Protocolo HTTP\](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/markdown.md) - \[Ferramentas no Navegador (DevTools)\](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/ferramentas-no-navegador-devtools.md) - \[Instalando o Linux no Windows com o WSL\](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/ii.-preparando-o-ambiente-de-desenvolvimento/instalando-o-linux-no-windows-com-o-wsl.md) - \[Comandos Básicos no Linux\](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/ii.-preparando-o-ambiente-de-desenvolvimento/instalando-o-linux-no-windows-com-o-wsl/comandos-basicos-no-linux.md) - \[Instalando o Visual Studio Code\](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/ii.-preparando-o-ambiente-de-desenvolvimento/instalando-o-visual-studio-code.md) - \[Instalando o Git\](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/ii.-preparando-o-ambiente-de-desenvolvimento/instalando-o-git.md) - \[Configurando o Git\](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/ii.-preparando-o-ambiente-de-desenvolvimento/instalando-o-git/configurando-o-git.md) - \[Lógica de Programação\](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/iii.-fundamentos-da-programacao/logica-de-programacao.md) - \[Algoritmos\](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/iii.-fundamentos-da-programacao/logica-de-programacao/algoritmos.md) - \[Estrutura de Dados\](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/iii.-fundamentos-da-programacao/logica-de-programacao/estrutura-de-dados.md) - \[Paradigmas de Programação\](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/iii.-fundamentos-da-programacao/paradigmas-de-programacao.md) - \[Programação Orientada a Objetos\](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/iii.-fundamentos-da-programacao/paradigmas-de-programacao/programacao-orientada-a-objetos.md) - \[Versionamento de Código\](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/iii.-fundamentos-da-programacao/versionamento-de-codigo.md) - \[Gerenciadores de Pacotes\](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/iii.-fundamentos-da-programacao/gerenciadores-de-pacotes.md) - \[HTML\](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/iv.-a-triade-da-web/html.md) - \[Meta Tags\](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/iv.-a-triade-da-web/html/meta-tags.md) - \[Listas\](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/iv.-a-triade-da-web/html/listas.md) - \[Datalist\](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/iv.-a-triade-da-web/html/listas/datalist.md) - \[Tabelas\](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/iv.-a-triade-da-web/html/tabelas.md) - \[Formulários\](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/iv.-a-triade-da-web/html/formularios.md) - \[Mídias\](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/iv.-a-triade-da-web/html/midias.md) - \[CSS\](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/iv.-a-triade-da-web/css.md) - \[Combinadores\](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/iv.-a-triade-da-web/css/combinadores.md) - \[Pré-processadores CSS\](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/iv.-a-triade-da-web/css/pre-processadores-css.md) - \[Metodologias e Boas Práticas\](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/iv.-a-triade-da-web/css/metodologias-e-boas-praticas.md) - \[JavaScript\](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/iv.-a-triade-da-web/javascript.md) - \[Fundamentos da Linguagem\](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/iv.-a-triade-da-web/javascript/fundamentos-da-linguagem.md) - \[Variáveis e Constantes\](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/iv.-a-triade-da-web/javascript/fundamentos-da-linguagem/variaveis-e-constantes.md) - \[Tipagem\](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/iv.-a-triade-da-web/javascript/fundamentos-da-linguagem/tipagem.md) - \[Estruturas Condicionais\](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/iv.-a-triade-da-web/javascript/fundamentos-da-linguagem/estruturas-condicionais.md) - \[Arrays\](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/iv.-a-triade-da-web/javascript/fundamentos-da-linguagem/arrays.md) - \[Breve Histórico\](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/iv.-a-triade-da-web/javascript/fundamentos-da-linguagem/breve-historico.md) - \[Exportação e Importação\](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/iv.-a-triade-da-web/javascript/exportacao-e-importacao.md) - \[Interface e Type\](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/v.-typescript/interface-e-type.md) - \[Generics\](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/v.-typescript/generics.md) - \[Criando um App em React\](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/vi.-react-next.js-e-tailwind/criando-um-app-em-react.md) - \[...\](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/vii.-node.js-e-express/....md) - \[...\](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/viii.-banco-de-dados-e-orm/....md) - \[O que são Metodologias Ágeis?\](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/ix.-metodologias-ageis/o-que-sao-metodologias-ageis.md) - \[Práticas e Técnicas\](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/ix.-metodologias-ageis/praticas-e-tecnicas.md) - \[Scrum\](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/ix.-metodologias-ageis/praticas-e-tecnicas/scrum.md) - \[Kanban\](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/ix.-metodologias-ageis/praticas-e-tecnicas/kanban.md) - \[Extreme Programming (XP)\](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/ix.-metodologias-ageis/praticas-e-tecnicas/extreme-programming-xp.md) --- # Unknown \> For the complete documentation index, see \[llms.txt\](https://elidianaandrade.gitbook.io/roadmaps/llms.txt). Markdown versions of documentation pages are available by appending \`.md\` to page URLs; this page is available as \[Markdown\](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/entendendo-a-web/tipos-de-aplicacoes-web.md). # Tipos de Aplicações Web ### \*\*SPA (Single-Page Application)\*\* Tipo de aplicação web onde \*\*todas as interações acontecem em uma única página\*\*. A navegação entre "páginas" é feita sem recarregar a página completamente. #### \*\*Vantagens\*\* \* Melhor experiência do usuário, com navegação rápida e sem carregamentos de página. \* As páginas são carregadas de forma dinâmica, o que pode melhorar o desempenho. > \*\*Exemplo\*\*: > > Em um SPA, ao clicar em diferentes links ou botões, apenas o conteúdo da página muda, mas a estrutura do site não é recarregada. ### \*\*PWA (Progressive Web App)\*\* Aplicação web que utiliza as tecnologias da web modernas para oferecer uma experiência similar à de um aplicativo nativo. #### \*\*Características\*\* \* \*\*Responsivo\*\*: Funciona bem em qualquer dispositivo, seja desktop ou móvel. \* \*\*Offline-first\*\*: Pode ser usado mesmo sem conexão com a internet (usando cache). \* \*\*Instalável\*\*: Pode ser "instalada" no dispositivo, com um ícone na tela inicial (sem necessidade de uma loja de aplicativos). \* \*\*Notificações Push\*\*: Permite enviar notificações mesmo quando o app não está em uso. #### \*\*Como criar um PWA\*\* \* Usar \*\*Service Workers\*\* para cache e funcionalidade offline. \* Criar um \*\*manifesto PWA\*\* para fornecer ícones e definir configurações para o "modo aplicativo". --- # Unknown \> For the complete documentation index, see \[llms.txt\](https://elidianaandrade.gitbook.io/roadmaps/llms.txt). Markdown versions of documentation pages are available by appending \`.md\` to page URLs; this page is available as \[Markdown\](https://elidianaandrade.gitbook.io/roadmaps/roadmaps.md). # Roadmaps | | | | Cover image | | --- | --- | --- | --- | | #### _:js:_ Full Stack JavaScript | [Acessar Roadmap](https://elidianaandrade.gitbook.io/spaces/WTlfXGYE3Q6AiDJHsgdu) | | [https://images.unsplash.com/photo-1633356122102-3fe601e05bd2?crop=entropy&cs=srgb&fm=jpg&ixid=M3wxOTcwMjR8MHwxfHNlYXJjaHwxfHxyZWFjdHxlbnwwfHx8fDE3NjM2NzQ0MDB8MA&ixlib=rb-4.1.0&q=85](https://images.unsplash.com/photo-1633356122102-3fe601e05bd2?crop=entropy&cs=srgb&fm=jpg&ixid=M3wxOTcwMjR8MHwxfHNlYXJjaHwxfHxyZWFjdHxlbnwwfHx8fDE3NjM2NzQ0MDB8MA&ixlib=rb-4.1.0&q=85) | --- # Unknown \# ELIDIANA • Cursos ## Ver todos os conteúdos - \[Cursos\](https://elidianaandrade.gitbook.io/cursos/cursos.md): Materiais de apoio dos cursos ministrados por Elidiana Andrade. - \[Projetos\](https://elidianaandrade.gitbook.io/cursos/projetos.md) - \[Lives\](https://elidianaandrade.gitbook.io/cursos/lives.md) - \[Sobre\](https://elidianaandrade.gitbook.io/cursos/sobre.md) --- # Ferramentas no Navegador (DevTools) | Roadmap Full Stack - JavaScript | ELIDIANA • Roadmaps For the complete documentation index, see [llms.txt](https://elidianaandrade.gitbook.io/roadmaps/llms.txt) . This page is also available as [Markdown](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/ferramentas-no-navegador-devtools.md) . ### Introdução[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/ferramentas-no-navegador-devtools#introducao) O **DevTools** é um conjunto de ferramentas do navegador que permite **inspecionar, depurar e analisar o funcionamento interno de páginas web em tempo real**. ![](https://elidianaandrade.gitbook.io/roadmaps/~gitbook/image?url=https%3A%2F%2F3592345188-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FWTlfXGYE3Q6AiDJHsgdu%252Fuploads%252FFKr0VYvH9S8jYuuKLEtP%252Fimage.png%3Falt%3Dmedia%26token%3D3e20e50f-d8d6-4c27-bb6c-277e79b4ce16&width=768&dpr=3&quality=100&sign=94040eb4&sv=2) DevTools no Google Chrome **Principais Abas do Chrome DevTools:** **Console** Exibe erros, avisos e permite executar JavaScript. **Performance** Analisa desempenho, CPU, FPS e tarefas pesadas. **Memory** Identifica uso de memória e possíveis memory leaks. **Sources** Mostra arquivos e permite depurar JS com breakpoints. **Lighthouse** Gera relatórios automáticos de performance, SEO e acessibilidade. **Elements** Inspeciona e edita HTML e CSS da página. **Network** Visualiza todas as requisições HTTP e seus detalhes. **Application** Gerencia armazenamento (cookies, localStorage, IndexedDB) e PWA. **Recorder** Grava fluxos de interação para testes automatizados. * * * ### Aba Network[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/ferramentas-no-navegador-devtools#aba-network) A **aba Network (Rede)** é uma ferramenta do DevTools usada para **monitorar todas as requisições** que o navegador faz enquanto uma página está sendo carregada ou usada. Ela permite visualizar **logs de requisições**, **tipos de arquivos**, **tempo de carregamento**, **status**, **tamanho dos recursos** e muito mais. ![Aba Network no DevTools do Chrome](https://elidianaandrade.gitbook.io/roadmaps/~gitbook/image?url=https%3A%2F%2F3592345188-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FWTlfXGYE3Q6AiDJHsgdu%252Fuploads%252FObNGlnh2dAHL1f3SVdjZ%252Fimage.png%3Falt%3Dmedia%26token%3D970aa20e-8086-4b5d-b071-712784bdcfc0&width=768&dpr=3&quality=100&sign=81b88a8f&sv=2) Aba Network no DevTools do Chrome Ao clicar em uma requisição, ela **expande** e mostra detalhes. As principais **colunas** são: Coluna Descrição **Name** nome do arquivo ou endpoint solicitado. **Status** código HTTP (200, 404, 500...). **Type** tipo do recurso (documento, script, imagem, XHR...). **Initiator** quem disparou a requisição (script, usuário, navegador). **Size** tamanho transferido. **Time** tempo total da requisição. **Waterfall** gráfico visual mostrando o tempo de carregamento. #### **Acessando a Aba Network no Navegador:**[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/ferramentas-no-navegador-devtools#acessando-a-aba-network-no-navegador) 1 #### **Abra o "DevTools" no seu navegador**[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/ferramentas-no-navegador-devtools#abra-o-devtools-no-seu-navegador) Clique com o botão direito na página e clique na opção "Inspecionar", ou utilize os atalhos: * Windows/Linux: **F12** ou **Ctrl+Shift+I** * Mac: **Cmd+Option+I** 2 #### **Acesse a Aba Network (Rede)**[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/ferramentas-no-navegador-devtools#acesse-a-aba-network-rede) 3 #### **Ative Preserve log (preservar log)**[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/ferramentas-no-navegador-devtools#ative-preserve-log-preservar-log) Caso precise manter requisições entre páginas/redirects. 4 #### **Marque Disable cache (desativar cache)**[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/ferramentas-no-navegador-devtools#marque-disable-cache-desativar-cache) Para garantir que está vendo requisições reais ao servidor enquanto o DevTools estiver aberto. #### Depurando Requisições HTTP pelo Navegador[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/ferramentas-no-navegador-devtools#depurando-requisicoes-http-pelo-navegador) #### **Para Saber Mais**[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/ferramentas-no-navegador-devtools#para-saber-mais) * Comparar performance entre HTTP/2 e 1.1 * Investigar gargalos (latência, TTFB, blocking) * Analisar waterfall completo * * * ### Aba Lighthouse[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/ferramentas-no-navegador-devtools#aba-lighthouse) A **Lighthouse** é uma ferramenta integrada ao DevTools que analisa automaticamente uma página web e gera um **relatório completo de qualidade**, com notas e sugestões de melhoria. 1 #### Abra a página que quer auditar.[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/ferramentas-no-navegador-devtools#abra-a-pagina-que-quer-auditar) 2 #### Abra o DevTools[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/ferramentas-no-navegador-devtools#abra-o-devtools) 3 #### Vá para a aba **Lighthouse**.[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/ferramentas-no-navegador-devtools#va-para-a-aba-lighthouse) Escolha as **categorias** que quer auditar (Performance, Accessibility, Best Practices, SEO, PWA). Se necessário, selecione **Device** (Mobile ou Desktop) e opções de throttling. 4 #### Clique em **Generate report** (ou **Analyze page load**)[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/ferramentas-no-navegador-devtools#clique-em-generate-report-ou-analyze-page-load) A auditoria vai rodar (pode demorar alguns segundos). 5 #### Aguarde o relatório ser gerado, depois veja:[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/ferramentas-no-navegador-devtools#aguarde-o-relatorio-ser-gerado-depois-veja) * **Score** geral por categoria (0–100). * **Opportunities** (o que reduziria o tempo de carregamento). * **Diagnostics** (detalhes técnicos). * **Passed audits** (o que já está ok). 6 #### Exporte ou copie o relatório[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/ferramentas-no-navegador-devtools#exporte-ou-copie-o-relatorio) Use os botões de **Save (JSON/HTML)** ou **Copy report**. 7 #### Aplique as recomendações prioritárias[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/ferramentas-no-navegador-devtools#aplique-as-recomendacoes-prioritarias) Ex.: reduzir JS crítico, otimizar imagens, habilitar cache) e rode novamente para medir ganhos. * * * ### Referências e Links Úteis[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/ferramentas-no-navegador-devtools#referencias-e-links-uteis) [![Logo](https://elidianaandrade.gitbook.io/roadmaps/~gitbook/image?url=https%3A%2F%2Fwww.gstatic.com%2Fdevrel-devsite%2Fprod%2Fvf667a9fd586ec573473a76e7c76b3edb8ab0c1db42d0ede8e8f66ff6cc9d7f08%2Fchrome%2Fimages%2Ftouchicon-180.png&width=20&dpr=3&quality=100&sign=8d23f240&sv=2)Painel Network: analisar a carga e os recursos da rede  |  Chrome DevTools  |  Chrome for DevelopersChrome for Developers](https://developer.chrome.com/docs/devtools/network/overview?hl=pt-br) [![Logo](https://elidianaandrade.gitbook.io/roadmaps/~gitbook/image?url=https%3A%2F%2Fwww.gstatic.com%2Fdevrel-devsite%2Fprod%2Fvf667a9fd586ec573473a76e7c76b3edb8ab0c1db42d0ede8e8f66ff6cc9d7f08%2Fchrome%2Fimages%2Ftouchicon-180.png&width=20&dpr=3&quality=100&sign=8d23f240&sv=2)Inspecionar atividade de rede  |  Chrome DevTools  |  Chrome for DevelopersChrome for Developers](https://developer.chrome.com/docs/devtools/network?hl=pt-br) [AnteriorEntendendo o Protocolo HTTP](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/markdown) [PróximoInstalando o Linux no Windows com o WSL](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/ii.-preparando-o-ambiente-de-desenvolvimento/instalando-o-linux-no-windows-com-o-wsl) Atualizado há 8 meses * [Introdução](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/ferramentas-no-navegador-devtools#introducao) * [Aba Network](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/ferramentas-no-navegador-devtools#aba-network) * [Aba Lighthouse](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/ferramentas-no-navegador-devtools#aba-lighthouse) * [Referências e Links Úteis](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/ferramentas-no-navegador-devtools#referencias-e-links-uteis) --- # Entendendo o Protocolo HTTP | Roadmap Full Stack - JavaScript | ELIDIANA • Roadmaps For the complete documentation index, see [llms.txt](https://elidianaandrade.gitbook.io/roadmaps/llms.txt) . This page is also available as [Markdown](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/markdown.md) . ### Introdução[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/markdown#introducao) O HTTP, **Hypertext Transfer Protocol (Protocolo de Transferência de Hipertexto)**, é o protocolo de comunicação usado para transferir dados entre navegadores (clientes) e servidores web. #### **Requisição**[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/markdown#requisicao) * Método (verbo) * URL * Headers * Body (opcional) #### **Resposta**[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/markdown#resposta) * Status code * Headers * Body (JSON, HTML, etc.) #### **Para Saber Mais**[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/markdown#para-saber-mais) Entenda como funciona o estado stateless, keep-alive, compressão (gzip, brotli), diferenças entre HTTP/1.1, HTTP/2 e HTTP/3 (QUIC). * * * ### Métodos HTTP (Verbos)[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/markdown#metodos-http-verbos) Os métodos HTTP definem a **intenção** da requisição, ou seja, o que o cliente deseja fazer com um recurso. **Os principais métodos são:** **GET** buscar dados **POST** criar um novo recurso **PUT** substituir um recurso por completo **PATCH** atualizar parcialmente um recurso **DELETE** remover um recurso **OPTIONS** verificar quais métodos e recursos estão disponíveis (pré-flight, CORS) Para que os métodos funcionem corretamente, o servidor precisa identificar **quais recursos** serão manipulados. Essa identificação é feita por meio do **URL Path**, **Path Params** e **Query String**, cada um com seu papel no design das rotas. #### **URL Path**[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/markdown#url-path) Define o caminho básico de um recurso dentro da aplicação. #### **Path Params**[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/markdown#path-params) Permitem que a rota represente recursos específicos, geralmente usando identificadores. **Como se relacionam com os métodos:** * `GET /users/10` → buscar um recurso específico * `DELETE /products/3` → remover o produto de ID 3 * `PUT /users/10` → substituir totalmente o usuário de ID 10 * `PATCH /users/10` → atualizar parcialmente o usuário de ID 10 Path params são **obrigatórios** sempre que a rota representar um recurso único. #### **Query String**[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/markdown#query-string) É usada para enviar parâmetros **opcionais**, que alteram a forma como um recurso será retornado (normalmente filtros, paginação ou ordenação). **Integração com métodos:** * Geralmente usada com métodos **GET**, mas pode aparecer em outros. * Não muda o recurso, apenas **como** ele é consultado. * Nunca substitui path params (ambos têm funções diferentes). #### Idempotência e Semântica Correta dos Métodos[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/markdown#idempotencia-e-semantica-correta-dos-metodos) Compreender URL Path, Path Params e Query String também é essencial para aplicar corretamente a semântica dos métodos: * **GET** é idempotente → `/users/10` sempre retorna o mesmo recurso, independente de repetições. * **DELETE** é idempotente → deletar duas vezes `/users/10` deve resultar no mesmo estado final (usuário removido). * **PUT** é idempotente → substituir completamente `/users/10` sempre leva ao mesmo estado. * **PATCH** **não é necessariamente idempotente**, dependendo da operação. * **POST** nunca é idempotente → toda chamada cria algo novo. * * * ### **HTTP Status Codes**[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/markdown#http-status-codes) Os HTTP Status Codes são códigos numéricos enviados pelo servidor ao cliente para indicar o resultado de uma requisição. Os códigos são divididos em **cinco classes**, cada uma indicando um tipo de resposta: * `**1xx**` **– Informacional:** o servidor recebeu a requisição e continua processando. * `**2xx**` **– Sucesso:** a requisição foi recebida, entendida e aceita. * `**3xx**` **– Redirecionamento:** o cliente precisa realizar outra ação para completar a requisição. * `**4xx**` **– Erros do cliente:** há um problema na requisição enviada pelo cliente. * `**5xx**` **– Erros do servidor:** o servidor encontrou uma falha ao processar a requisição. #### **Códigos HTTP Comuns**[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/markdown#codigos-http-comuns) **200** OK A requisição foi concluída com sucesso e o servidor retornou o conteúdo solicitado. **201** Created Algo novo foi criado como resultado da requisição (comum em APIs REST para POST). **400** Bad Request O servidor não conseguiu entender a requisição por erro de sintaxe ou parâmetros inválidos. **401** Unauthorized Falta autenticação válida para acessar o recurso. **403** Forbidden O cliente está autenticado, mas **não tem permissão** para acessar o recurso. **404** Not Found O recurso solicitado não existe ou não foi encontrado. **500** Internal Server Error O servidor encontrou um erro inesperado ao processar a requisição. * * * ### **Headers Fundamentais**[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/markdown#headers-fundamentais) Os **headers HTTP** transportam metadados entre cliente e servidor durante uma requisição ou resposta. Eles definem regras, formatos, autenticação e comportamento da conexão. A seguir, os **principais headers**: #### **Content-Type**[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/markdown#content-type) Indica o **formato dos dados** enviados no corpo da requisição ou da resposta. Ele garante que cliente e servidor saibam interpretar o conteúdo corretamente. > **Exemplos:** > > * `text/html` > > * `application/json` > > * `multipart/form-data` > #### **Accept**[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/markdown#accept) Define quais **formatos de resposta** o cliente aceita receber. Permite negociações de conteúdo entre cliente e servidor. > **Exemplos:** > > * `Accept: application/json` > > * `Accept: image/png` > #### **Authorization**[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/markdown#authorization) Envia credenciais ou tokens para a autenticação. Ele controla acesso a APIs e recursos protegidos. > **Exemplos:** > > * `Authorization: Bearer ` > > * `Authorization: Basic ` > Transporta pequenos dados do cliente para o servidor, incluindo sessões, preferências e identificadores. Ele é responsável por manter usuários logados, guardar preferências e controlar sessões. > **Exemplo:** `Cookie: session=abc123` #### **Cache-Control**[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/markdown#cache-control) Define regras de armazenamento em cache, otimiza desempenho e controla quando o conteúdo deve ser atualizado. > **Exemplos:** > > * `Cache-Control: no-cache` > > * `Cache-Control: max-age=3600` > #### **Para Saber Mais**[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/markdown#para-saber-mais-1) * ETag * Last-Modified * Vary * Strict-Transport-Security * * * ### Referências e Links Úteis[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/markdown#referencias-e-links-uteis) [![Logo](https://elidianaandrade.gitbook.io/roadmaps/~gitbook/image?url=https%3A%2F%2Fdeveloper.mozilla.org%2Ffavicon.ico&width=20&dpr=3&quality=100&sign=367e5c2d&sv=2)Métodos de requisição HTTP - HTTP | MDNMDN Web Docs](https://developer.mozilla.org/pt-BR/docs/Web/HTTP/Methods) [AnteriorTipos de Aplicações Web](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/entendendo-a-web/tipos-de-aplicacoes-web) [PróximoFerramentas no Navegador (DevTools)](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/ferramentas-no-navegador-devtools) Atualizado há 8 meses * [Introdução](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/markdown#introducao) * [Métodos HTTP (Verbos)](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/markdown#metodos-http-verbos) * [HTTP Status Codes](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/markdown#http-status-codes) * [Headers Fundamentais](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/markdown#headers-fundamentais) * [Referências e Links Úteis](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/markdown#referencias-e-links-uteis) Exemplos: Copiar /users /users/123 /products/eletronicos Exemplos de definição: Copiar GET /users/:id PATCH /orders/:orderId/status DELETE /products/:productId Chamadas reais: Copiar GET /users/10 PATCH /orders/88/status DELETE /products/3 Formato: Copiar ?chave=valor&chave2=valor2 Exemplos: Copiar GET /users?role=admin GET /products?category=tv&limit=10&page=2 GET /search?query=celular --- # Unknown \> For the complete documentation index, see \[llms.txt\](https://elidianaandrade.gitbook.io/cursos/llms.txt). Markdown versions of documentation pages are available by appending \`.md\` to page URLs; this page is available as \[Markdown\](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/introducao-a-engenharia-de-prompts.md). # Introdução à Engenharia de Prompts Com uma abordagem prática para otimizar o uso de prompts em ferramentas de IA, o curso abrange uma visão geral sobre a área, destacando suas principais aplicações e importância. São abordadas boas práticas para criar prompts eficazes, garantindo respostas mais precisas e relevantes. Além disso, apresenta os próximos passos para aprofundar os conhecimentos na área, fornecendo recursos adicionais e estratégias para aplicar as técnicas em outros contextos. ### Instrutora [](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/introducao-a-engenharia-de-prompts.md#instrutora) O curso é ministrado por Elidiana Andrade, Tech Education Analyst na \[DIO\](https://www.dio.me/) e especialista em Desenvolvimento de Software com Metodologias Ágeis pela Universidade Salvador. \[GitHub\](https://github.com/elidianaandrade) • \[LinkedIn\](https://www.linkedin.com/in/elidianaandrade/) ### Objetivo Explorar os fundamentos da Engenharia de Prompts, compreendendo os conceitos essenciais e as melhores práticas para criar prompts eficazes. ### Percurso | | | | | --- | --- | --- | | Introdução | [/pages/0YBIIsrPSGuCXYvPbu4V](https://elidianaandrade.gitbook.io/pages/0YBIIsrPSGuCXYvPbu4V) | [/files/ROjXJnE8uEOYtEk9IkJU](https://elidianaandrade.gitbook.io/files/ROjXJnE8uEOYtEk9IkJU) | | Visão Geral da Engenharia de Prompts | [/pages/Js5ozkuwAbolROOWOTWB](https://elidianaandrade.gitbook.io/pages/Js5ozkuwAbolROOWOTWB) | [/files/RF9frPapo3s1mlDLqxAK](https://elidianaandrade.gitbook.io/files/RF9frPapo3s1mlDLqxAK) | | Aplicações Práticas da Engenharia de Prompts | [/pages/vY1x3NK9DhnwwHhncSi4](https://elidianaandrade.gitbook.io/pages/vY1x3NK9DhnwwHhncSi4) | [/files/LXMGqpZE4XDeeNYr902E](https://elidianaandrade.gitbook.io/files/LXMGqpZE4XDeeNYr902E) | | Leve seus Prompts ao Próximo Nível | [/pages/jt4VPTCyDKiH3mmGzwHd](https://elidianaandrade.gitbook.io/pages/jt4VPTCyDKiH3mmGzwHd) | [/files/nvmjVd10sJ8pDUcNDSKd](https://elidianaandrade.gitbook.io/files/nvmjVd10sJ8pDUcNDSKd) | --- # Unknown \> For the complete documentation index, see \[llms.txt\](https://elidianaandrade.gitbook.io/roadmaps/llms.txt). Markdown versions of documentation pages are available by appending \`.md\` to page URLs; this page is available as \[Markdown\](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/readme.md). # Roadmap Full Stack - JavaScript Este guia de aprendizagem reúne conteúdos, práticas e orientações estruturadas para apoiar o seu crescimento técnico como desenvolvedor(a) web. Embora o foco desta trilha esteja na \*\*linguagem JavaScript\*\*, os conceitos que você aprenderá aqui, como lógica de programação, estrutura de dados, comunicação via HTTP, APIs, banco de dados, versionamento de código e metodologias ágeis, \*\*são universais\*\*. ### Percurso | | | | --- | --- | | _:browser:_ **Fundamentos da Web** | [/pages/s91yzKmryzKNWBiTmPt8](https://elidianaandrade.gitbook.io/pages/s91yzKmryzKNWBiTmPt8) | | _:laptop:_ **Preparando o Ambiente de Desenvolvimento** | [/pages/c2TixDt1HJ9b94pbJ21I](https://elidianaandrade.gitbook.io/pages/c2TixDt1HJ9b94pbJ21I) | | _:square-code:_ **Fundamentos da Programação** | | | _:triangle:_ **A Tríade da Web** | [/pages/CbNuDt2DX0KqqnPGf9Si](https://elidianaandrade.gitbook.io/pages/CbNuDt2DX0KqqnPGf9Si) | | _:rectangle-terminal:_ **TypeScript** | [/pages/9O4GAaAesPw4v2I8GaRw](https://elidianaandrade.gitbook.io/pages/9O4GAaAesPw4v2I8GaRw) | | _:react:_ **React** | [/pages/Qibve3jyWvHNIhl4uriK](https://elidianaandrade.gitbook.io/pages/Qibve3jyWvHNIhl4uriK) | | _:server:_ **Node.js e Express** | [/pages/kc9zZNHu1X1aM0SE752F](https://elidianaandrade.gitbook.io/pages/kc9zZNHu1X1aM0SE752F) | | _:database:_ **Banco de Dados e ORM** | [/pages/xvT1iMAgfE9YgTPx8Vlk](https://elidianaandrade.gitbook.io/pages/xvT1iMAgfE9YgTPx8Vlk) | | _:bolt-lightning:_ **Metodologias Ágeis** | [/pages/OWiT3P6SbNb1vfC5ETXe](https://elidianaandrade.gitbook.io/pages/OWiT3P6SbNb1vfC5ETXe) | --- # O que você precisa para começar? | Introdução à Engenharia de Prompts | ELIDIANA • Cursos For the complete documentation index, see [llms.txt](https://elidianaandrade.gitbook.io/cursos/llms.txt) . This page is also available as [Markdown](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/introducao/o-que-voce-precisa-para-comecar.md) . ### Conhecimentos[](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/introducao/o-que-voce-precisa-para-comecar#conhecimentos) Dentre os conhecimentos necessários para acompanhar esse curso, é importante ter noções básicas sobre **Processamento de Linguagem Natural (PLN)**, que trata da interação entre máquinas e a linguagem humana, e também sobre **Modelos de Linguagem de Grande Escala (LLMs)**, que são modelos treinados com grandes volumes de dados para gerar e entender texto de forma eficiente. ### Ferramentas[](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/introducao/o-que-voce-precisa-para-comecar#ferramentas) Ao longo das aulas, também utilizaremos algumas ferramentas que vão facilitar sua interação com a inteligência artificial. Entre elas, estão o **ChatGPT** e o **Microsoft Copilot**. ![Cover](https://elidianaandrade.gitbook.io/cursos/~gitbook/image?url=https%3A%2F%2F2589491333-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F3qTdlyc9Bv4eCMQFkvul%252Fuploads%252FK7UmDfaTp9pEowAj9yuM%252FSite%2520-%2520ChatGPT.png%3Falt%3Dmedia%26token%3D218818a1-1267-4208-9ba3-f76695ebffd7&width=490&dpr=3&quality=100&sign=cd0157df&sv=2) **ChatGPT** [https://chatgpt.com/](https://chatgpt.com/) ![Cover](https://elidianaandrade.gitbook.io/cursos/~gitbook/image?url=https%3A%2F%2F2589491333-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F3qTdlyc9Bv4eCMQFkvul%252Fuploads%252FJ5NPKlcK6FozWSMvQDJT%252FSite%2520-%2520Microsoft%2520Copilot.png%3Falt%3Dmedia%26token%3D9aced1a5-518e-48e4-a218-dd16f32494bd&width=490&dpr=3&quality=100&sign=fa654df8&sv=2) **Microsoft Copilot** [https://copilot.microsoft.com/](https://copilot.microsoft.com/) [PreviousPor que aprender Engenharia de Prompts?](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/introducao/por-que-aprender-engenharia-de-prompts) [NextO que vamos explorar neste curso?](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/introducao/o-que-vamos-explorar-neste-curso) Last updated 1 year ago * [Conhecimentos](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/introducao/o-que-voce-precisa-para-comecar#conhecimentos) * [Ferramentas](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/introducao/o-que-voce-precisa-para-comecar#ferramentas) --- # Considerações Finais e Próximos Passos | Introdução à Engenharia de Prompts | ELIDIANA • Cursos For the complete documentation index, see [llms.txt](https://elidianaandrade.gitbook.io/cursos/llms.txt) . This page is also available as [Markdown](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/leve-seus-prompts-ao-proximo-nivel/consideracoes-finais-e-proximos-passos.md) . Neste curso, fizemos uma introdução à engenharia de prompts, explorando conceitos de forma simplificada, como os modelos de linguagem interpretam os prompts e as melhores práticas para aproveitar ao máximo essas ferramentas. No entanto, isso é apenas o começo quando se trata do uso dessas tecnologias. ### Técnicas de Engenharia de Prompts e Parâmetros de Inferência[](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/leve-seus-prompts-ao-proximo-nivel/consideracoes-finais-e-proximos-passos#tecnicas-de-engenharia-de-prompts-e-parametros-de-inferencia) Para ir além, também é interessante explorar as técnicas de Engenharia de Prompts, além de compreender os parâmetros de inferência, que são configurações que influenciam a maneira como o modelo de IA gera previsões ou respostas. Para isso, convido vocês a explorarem outros cursos na plataforma e também os materiais de apoio disponibilizados. ### Para Saber Mais[](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/leve-seus-prompts-ao-proximo-nivel/consideracoes-finais-e-proximos-passos#para-saber-mais) [Links Úteis para Saber Mais](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/leve-seus-prompts-ao-proximo-nivel/links-uteis-para-saber-mais) [Glossário](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/leve-seus-prompts-ao-proximo-nivel/glossario) [PreviousCuidados na Aplicação de Prompts](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/aplicacoes-praticas-da-engenharia-de-prompts/cuidados-na-aplicacao-de-prompts) [NextLinks Úteis para Saber Mais](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/leve-seus-prompts-ao-proximo-nivel/links-uteis-para-saber-mais) Last updated 1 year ago * [Técnicas de Engenharia de Prompts e Parâmetros de Inferência](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/leve-seus-prompts-ao-proximo-nivel/consideracoes-finais-e-proximos-passos#tecnicas-de-engenharia-de-prompts-e-parametros-de-inferencia) * [Para Saber Mais](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/leve-seus-prompts-ao-proximo-nivel/consideracoes-finais-e-proximos-passos#para-saber-mais) --- # Engenharia de Prompts no Dia a Dia | Introdução à Engenharia de Prompts | ELIDIANA • Cursos For the complete documentation index, see [llms.txt](https://elidianaandrade.gitbook.io/cursos/llms.txt) . This page is also available as [Markdown](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/aplicacoes-praticas-da-engenharia-de-prompts/engenharia-de-prompts-no-dia-a-dia.md) . Vimos até aqui que a Engenharia de Prompts trata de boas práticas para criar instruções eficazes, com o objetivo de gerar melhores resultados dos modelos de IA. Quando falamos da aplicação da Engenharia de Prompts no dia a dia, ela está atrelada, sobretudo, ao crescimento e evolução desses modelos, que expandiu seu uso para diversas áreas. Embora a IA já estivesse presente no cotidiano, em situações como recomendações personalizadas e assistentes virtuais, a possibilidade de interagir com ela de forma mais natural facilita o uso por qualquer pessoa e amplia suas aplicações para além da área de tecnologia. Hoje, ela está presente em setores como atendimento ao cliente, criação de conteúdo, automação de tarefas e até mesmo nas áreas jurídica e financeira. Esse cenário torna a habilidade de Engenharia de Prompts cada vez mais essencial, dada a sua capacidade de potencializar o uso dos modelos de IA nessas diversas aplicações. Nesta etapa, exploraremos cuidados que devemos tomar ao criar prompts e exemplos simples de como aplicá-los na vida pessoal e profissional. ### Exemplo 1: Planejamento de Metas Pessoais[](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/aplicacoes-praticas-da-engenharia-de-prompts/engenharia-de-prompts-no-dia-a-dia#exemplo-1-planejamento-de-metas-pessoais) Exemplo Template Copy Crie um plano detalhado de desenvolvimento pessoal para os próximos 6 meses considerando minhas seguintes características: - Foco: Escultura em biscuit - Objetivos: Aprender a modelar figuras básicas e aprimorar técnicas de acabamento. - Limitações de tempo: 5 horas semanais disponíveis. - Recursos financeiros: R$ 150,00 mensais. Estruture o plano com: 1. Metas específicas e mensuráveis. 2. Recursos de aprendizado dentro orçamento disponível. 3. Cronograma semanal adaptado à disponibilidade. 4. Métricas de acompanhamento para medir o progresso. 5. Identificação de possíveis obstáculos e estratégias de superação. Copy Crie um plano detalhado de desenvolvimento pessoal para os próximos [período de tempo] considerando as seguintes características: - Foco: [área de interesse ou hobby] - Objetivos: [objetivos específicos] - Limitações de tempo: [disponibilidade semanal ou diária] - Recursos financeiros: [orçamento disponível] Estruture o plano com: 1. Metas específicas e mensuráveis. 2. Recursos de aprendizado dentro orçamento disponível. 3. Cronograma semanal adaptado à disponibilidade. 4. Métricas de acompanhamento para medir o progresso. 5. Identificação de possíveis obstáculos e estratégias de superação. ### Exemplo 2: Preparação para Entrevistas de Emprego[](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/aplicacoes-praticas-da-engenharia-de-prompts/engenharia-de-prompts-no-dia-a-dia#exemplo-2-preparacao-para-entrevistas-de-emprego) Preparação para entrevistas de emprego com simulação de entrevista, análise de perguntas, estratégias de resposta e identificação de pontos de melhoria. Exemplo Template [PreviousElementos Essenciais de um Bom Prompt](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/visao-geral-da-engenharia-de-prompts/elementos-essenciais-de-um-bom-prompt) [NextCuidados na Aplicação de Prompts](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/aplicacoes-praticas-da-engenharia-de-prompts/cuidados-na-aplicacao-de-prompts) Last updated 1 year ago * [Exemplo 1: Planejamento de Metas Pessoais](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/aplicacoes-praticas-da-engenharia-de-prompts/engenharia-de-prompts-no-dia-a-dia#exemplo-1-planejamento-de-metas-pessoais) * [Exemplo 2: Preparação para Entrevistas de Emprego](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/aplicacoes-praticas-da-engenharia-de-prompts/engenharia-de-prompts-no-dia-a-dia#exemplo-2-preparacao-para-entrevistas-de-emprego) Copy Simule uma entrevista de emprego para o cargo de Arquiteto, considerando: - Perfil: Profissional com graduação em Arquitetura e Urbanismo, experiência de 5 anos em projetos residenciais e comerciais, domínio avançado de softwares como AutoCAD, Revit e SketchUp. Boa capacidade de comunicação, trabalho em equipe e foco em soluções criativas e funcionais para os clientes. - Descrição da vaga: Estamos em busca de um Arquiteto Pleno para coordenar e desenvolver projetos arquitetônicos de médio e grande porte, desde o planejamento até a execução. O profissional será responsável por elaborar soluções criativas e funcionais, gerenciar prazos e custos, e acompanhar obras em todas as suas fases, interagindo com equipes multidisciplinares. É necessário ter graduação em Arquitetura, experiência mínima de 3 anos, domínio de ferramentas como AutoCAD e Revit, e boa capacidade de comunicação e organização. - Empresa: Escritório de arquitetura com foco em design inovador e funcional, trabalhando com clientes de médio e grande porte no setor residencial e comercial. - Nível de senioridade: Pleno Passo 1: Pergunta Inicial Pergunte a primeira pergunta mais provável de ser feita na entrevista. Passo 2: Resposta do Usuário O usuário responde à pergunta. Passo 3: Feedback Após cada resposta do usuário, forneça feedback detalhado sobre a resposta: O que foi bom. O que pode ser melhorado. Sugestões para aprimorar a resposta com exemplos contextualizados. Dicas de como melhorar ainda mais a performance na entrevista. Passo 4: Continuar com as Perguntas Continue o processo, fazendo uma pergunta por vez e oferecendo feedback após cada resposta. Copy Simule uma entrevista de emprego para o cargo de [cargo desejado], considerando: - Perfil: [perfil profissional, experiência e qualificações] - Descrição da vaga: [detalhes do cargo, como responsabilidades, habilidades e qualificações necessárias] - Empresa: [tipo de empresa, setor ou foco principal] - Nível de senioridade: [nível de experiência esperado] Passo 1: Pergunta Inicial Pergunte a primeira pergunta mais provável de ser feita na entrevista. Passo 2: Resposta do Usuário O usuário responde à pergunta. Passo 3: Feedback Após cada resposta do usuário, forneça feedback detalhado sobre a resposta: O que foi bom. O que pode ser melhorado. Sugestões para aprimorar a resposta com exemplos contextualizados. Dicas de como melhorar ainda mais a performance na entrevista. Passo 4: Continuar com as Perguntas Continue o processo, fazendo uma pergunta por vez e oferecendo feedback após cada resposta. --- # Por que aprender Engenharia de Prompts? | Introdução à Engenharia de Prompts | ELIDIANA • Cursos For the complete documentation index, see [llms.txt](https://elidianaandrade.gitbook.io/cursos/llms.txt) . This page is also available as [Markdown](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/introducao/por-que-aprender-engenharia-de-prompts.md) . Para entendermos a importância de aprender Engenharia de Prompts, vamos começar com uma analogia simples. ### Analogia: Fazendo um Pedido na Pizzaria[](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/introducao/por-que-aprender-engenharia-de-prompts#analogia-fazendo-um-pedido-na-pizzaria) Imagine que você está com fome e decide pedir uma pizza. Então, manda uma mensagem para a pizzaria: "Oi, quero uma pizza" Agora, o que você acha que vai acontecer? Provavelmente o atendente vai te perguntar um monte de coisas, como: “Qual sabor?”, “Tamanho?”, “Entrega ou retirada?”. Porque você não forneceu detalhes suficientes para ele entender exatamente o que você quer. ![](https://elidianaandrade.gitbook.io/cursos/~gitbook/image?url=https%3A%2F%2F2589491333-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F3qTdlyc9Bv4eCMQFkvul%252Fuploads%252F4dz82FLflzj0YgyPtq0l%252FAnalogia%2520-%2520Chat%2520Pizzaria.png%3Falt%3Dmedia%26token%3Daab1e874-b560-4cae-acd4-d44b1991b65a&width=768&dpr=3&quality=100&sign=d6caa047&sv=2) Então, você percebe que sua mensagem foi vaga demais e que o atendente precisa de mais detalhes para atendê-lo da maneira certa. E é exatamente aí que entra a engenharia de prompts! Assim como na pizzaria, se você não for claro no seu pedido, o modelo de IA também vai ficar perdido, oferecendo respostas vagas ou imprecisas. Agora vamos ver isso na prática com um exemplo de prompt para escrever e-mail para um cliente! ### Exemplo: Prompt para Escrever E-mail para Cliente[](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/introducao/por-que-aprender-engenharia-de-prompts#exemplo-prompt-para-escrever-e-mail-para-cliente) Imagine que você precisa pedir para a IA escrever um e-mail para um cliente. Se você simplesmente disser: A IA vai escrever um e-mail genérico. Ela não sabe o que você precisa: qual o objetivo do e-mail, qual o tom a ser utilizado, o que deve ser destacado ou qual a informação essencial. Para que a IA escreva o e-mail ideal, você precisará ser específico. Um bom pedido poderia ser: Percebe como o prompt influencia a qualidade das respostas? Quanto mais claro e detalhado for seu pedido, melhor será o resultado da IA. ### Afinal, o que é Engenharia de Prompts?[](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/introducao/por-que-aprender-engenharia-de-prompts#afinal-o-que-e-engenharia-de-prompts) Os modelos de linguagem precisam de instruções claras para fornecer respostas precisas. Em termos simples, um **prompt é a mensagem ou o comando que você dá ao modelo de IA**. A **Engenharia de Prompts,** que **é a habilidade de formular esses comandos de forma eficaz,** garante que você obtenha a resposta que realmente precisa. ### A Importância da Engenharia de Prompts[](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/introducao/por-que-aprender-engenharia-de-prompts#a-importancia-da-engenharia-de-prompts) Saber como formular bons prompts não é apenas uma habilidade técnica — é uma habilidade prática que pode transformar sua vida profissional e pessoal. Seja para escrever e-mails mais rápidos, obter resumos de documentos de maneira eficiente ou até mesmo gerar ideias criativas para projetos, saber usar a IA de forma eficaz pode te poupar tempo e esforço. [PreviousIntrodução à Engenharia de Prompts](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts) [NextO que você precisa para começar?](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/introducao/o-que-voce-precisa-para-comecar) Last updated 1 year ago * [Analogia: Fazendo um Pedido na Pizzaria](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/introducao/por-que-aprender-engenharia-de-prompts#analogia-fazendo-um-pedido-na-pizzaria) * [Exemplo: Prompt para Escrever E-mail para Cliente](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/introducao/por-que-aprender-engenharia-de-prompts#exemplo-prompt-para-escrever-e-mail-para-cliente) * [Afinal, o que é Engenharia de Prompts?](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/introducao/por-que-aprender-engenharia-de-prompts#afinal-o-que-e-engenharia-de-prompts) * [A Importância da Engenharia de Prompts](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/introducao/por-que-aprender-engenharia-de-prompts#a-importancia-da-engenharia-de-prompts) Prompt vago: Copy Escreva um e-mail para um cliente. Resposta do Modelo para o Prompt vago: Copy Assunto: Atualização sobre [Assunto Específico] Prezado(a) [Nome do Cliente], Espero que esteja bem. Gostaria de informar que [descreva a situação, atualização ou pedido]. Estamos comprometidos em oferecer o melhor serviço e garantimos que [detalhe alguma ação que está sendo tomada ou alguma expectativa]. Se precisar de mais informações ou tiver alguma dúvida, não hesite em entrar em contato. Estou à disposição para ajudar. Agradeço pela confiança em nossos serviços. Atenciosamente, [Seu Nome] [Seu Cargo] [Nome da Empresa] [Telefone] [Email] Prompt específico Copy Escreva um e-mail formal para um cliente que está interessado em um notebook gamer chamado "Oblivion Core". Destaque as principais características do produto, como processador Intel Core i9, memória RAM 32GB, SSD 512GB, display de 16" com taxa de atualização de 240Hz, teclado RGB personalizável e refrigeração avançada. Além disso, ofereça um desconto especial de 10% e inclua um código promocional. O tom deve ser profissional, mas amigável. Resposta do Modelo para o Prompt específico: Copy Assunto: Apresentação do Notebook Gamer "Oblivion Core" e Oferta Exclusiva Prezado(a) [Nome do Cliente], Espero que esta mensagem o(a) encontre bem. É com prazer que apresento o Oblivion Core, o notebook gamer que atende às mais altas expectativas dos entusiastas de tecnologia e performance. Este modelo foi desenvolvido para proporcionar uma experiência de jogo excepcional, combinando poder, agilidade e design inovador. Aqui estão as principais características que fazem do Oblivion Core a escolha ideal: Processador Intel Core i9: Desempenho de última geração para jogos e multitarefas. Memória RAM 32GB: Capacidade ampliada para suportar os jogos mais exigentes e aplicações pesadas. SSD de 512GB: Armazenamento rápido para inicialização quase instantânea e carregamento ágil dos jogos. Display de 16" com Taxa de Atualização de 240Hz: Imagens ultra-fluídas para uma jogabilidade sem interrupções. Teclado RGB Personalizável: Estilo e personalização para combinar com a sua vibe gamer. Refrigeração Avançada: Sistema de resfriamento otimizado para garantir máximo desempenho sem sobreaquecimento. Além disso, para tornar a sua experiência ainda mais vantajosa, oferecemos um desconto exclusivo de 10% na compra do Oblivion Core. Para aproveitar, basta utilizar o código promocional OBLIVION10 ao finalizar a compra em nosso site. Se precisar de mais informações ou tiver alguma dúvida, estou à disposição para ajudá-lo(a). Agradecemos o seu interesse e esperamos que aproveite esta oferta especial! Atenciosamente, [Seu Nome] [Seu Cargo] [Nome da Empresa] [Telefone] [E-mail] --- # O que vamos explorar neste curso? | Introdução à Engenharia de Prompts | ELIDIANA • Cursos For the complete documentation index, see [llms.txt](https://elidianaandrade.gitbook.io/cursos/llms.txt) . This page is also available as [Markdown](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/introducao/o-que-vamos-explorar-neste-curso.md) . [](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/visao-geral-da-engenharia-de-prompts/como-os-modelos-de-linguagem-entendem-um-prompt) ![Cover](https://elidianaandrade.gitbook.io/cursos/~gitbook/image?url=https%3A%2F%2F2589491333-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F3qTdlyc9Bv4eCMQFkvul%252Fuploads%252FwYuQlW4eDY1KcarYaDJ3%252FVis%25C3%25A3o%2520Geral%2520da%2520Engenharia%2520de%2520Prompts.png%3Falt%3Dmedia%26token%3D42a85677-529b-4168-95b7-b707a67adc17&width=490&dpr=3&quality=100&sign=c5ea8682&sv=2) Visão Geral da Engenharia de Prompts [](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/aplicacoes-praticas-da-engenharia-de-prompts/engenharia-de-prompts-no-dia-a-dia) ![Cover](https://elidianaandrade.gitbook.io/cursos/~gitbook/image?url=https%3A%2F%2F2589491333-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F3qTdlyc9Bv4eCMQFkvul%252Fuploads%252Fsfa0d51iKnkx13QBfLPQ%252FAplica%25C3%25A7%25C3%25B5es%2520Pr%25C3%25A1ticas%2520da%2520Engenharia%2520de%2520Prompts.png%3Falt%3Dmedia%26token%3D5720c9da-5d26-455f-8ad7-a54221fbb44e&width=490&dpr=3&quality=100&sign=1a21ef5a&sv=2) Aplicações Práticas da Engenharia de Prompts [](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/leve-seus-prompts-ao-proximo-nivel/consideracoes-finais-e-proximos-passos) ![Cover](https://elidianaandrade.gitbook.io/cursos/~gitbook/image?url=https%3A%2F%2F2589491333-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F3qTdlyc9Bv4eCMQFkvul%252Fuploads%252F5FFFowUigsRPqh8NyKUq%252FLeve%2520seus%2520Prompts%2520ao%2520Pr%25C3%25B3ximo%2520N%25C3%25ADvel.png%3Falt%3Dmedia%26token%3Df8cfcea2-9115-42b7-a7c2-67e0243cb61b&width=490&dpr=3&quality=100&sign=6c9707fd&sv=2) Leve seus Prompts ao Próximo Nível [PreviousO que você precisa para começar?](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/introducao/o-que-voce-precisa-para-comecar) [NextComo os Modelos de Linguagem "Entendem" um Prompt?](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/visao-geral-da-engenharia-de-prompts/como-os-modelos-de-linguagem-entendem-um-prompt) Last updated 1 year ago --- # Links Úteis para Saber Mais | Introdução à Engenharia de Prompts | ELIDIANA • Cursos For the complete documentation index, see [llms.txt](https://elidianaandrade.gitbook.io/cursos/llms.txt) . This page is also available as [Markdown](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/leve-seus-prompts-ao-proximo-nivel/links-uteis-para-saber-mais.md) . ### Conteúdos[](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/leve-seus-prompts-ao-proximo-nivel/links-uteis-para-saber-mais#conteudos) * Introdução à engenharia de prompts com o GitHub Copilot. Disponível em: [https://learn.microsoft.com/pt-br/training/modules/introduction-prompt-engineering-with-github-copilot/](https://learn.microsoft.com/pt-br/training/modules/introduction-prompt-engineering-with-github-copilot/) . * Engenharia de prompts para o GitHub Copilot. Disponível em: [https://docs.github.com/pt/copilot/using-github-copilot/prompt-engineering-for-github-copilot](https://docs.github.com/pt/copilot/using-github-copilot/prompt-engineering-for-github-copilot) . * Prompt Engineering. Disponível em: [https://platform.openai.com/docs/guides/prompt-engineering](https://platform.openai.com/docs/guides/prompt-engineering) . * Técnicas de engenharia de prompt - Azure OpenAI. Disponível em: [https://learn.microsoft.com/pt-br/azure/ai-services/openai/concepts/prompt-engineering?tabs=chat](https://learn.microsoft.com/pt-br/azure/ai-services/openai/concepts/prompt-engineering?tabs=chat) . * VASWANI, A.; SHAZEER, N.; PARMAR, N.; USZKOREIT, J.; JONES, L.; GOMEZ, A. N.; KAISER, Ł.; POLOSUKHIN, I. **Attention Is All You Need**. _Advances in Neural Information Processing Systems_, v. 30, 2017. Disponível em: [https://papers.nips.cc/paper/7181-attention-is-all-you-need.pdf](https://papers.nips.cc/paper/7181-attention-is-all-you-need.pdf) . ### Ferramentas[](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/leve-seus-prompts-ao-proximo-nivel/links-uteis-para-saber-mais#ferramentas) * ChatGPT. Disponível em: [https://chatgpt.com/](https://chatgpt.com/) . * GitHub Copilot. Disponível em: [https://github.com/features/copilot](https://github.com/features/copilot) . * Microsoft Copilot. Disponível em: [https://copilot.microsoft.com/](https://copilot.microsoft.com/) . * Tokenizer - OpenAI API. Disponível em: [https://platform.openai.com/tokenizer](https://platform.openai.com/tokenizer) . ### Bibliotecas de Prompt[](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/leve-seus-prompts-ao-proximo-nivel/links-uteis-para-saber-mais#bibliotecas-de-prompt) * Prompt examples - OpenAI API. Disponível em: [https://platform.openai.com/docs/examples](https://platform.openai.com/docs/examples) . * Library - Anthropic. Disponível em: [https://docs.anthropic.com/en/prompt-library/library](https://docs.anthropic.com/en/prompt-library/library) . [PreviousConsiderações Finais e Próximos Passos](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/leve-seus-prompts-ao-proximo-nivel/consideracoes-finais-e-proximos-passos) [NextGlossário](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/leve-seus-prompts-ao-proximo-nivel/glossario) Last updated 1 year ago * [Conteúdos](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/leve-seus-prompts-ao-proximo-nivel/links-uteis-para-saber-mais#conteudos) * [Ferramentas](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/leve-seus-prompts-ao-proximo-nivel/links-uteis-para-saber-mais#ferramentas) * [Bibliotecas de Prompt](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/leve-seus-prompts-ao-proximo-nivel/links-uteis-para-saber-mais#bibliotecas-de-prompt) --- # Cuidados na Aplicação de Prompts | Introdução à Engenharia de Prompts | ELIDIANA • Cursos For the complete documentation index, see [llms.txt](https://elidianaandrade.gitbook.io/cursos/llms.txt) . This page is also available as [Markdown](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/aplicacoes-praticas-da-engenharia-de-prompts/cuidados-na-aplicacao-de-prompts.md) . Quando falamos sobre os cuidados na aplicação de prompts, é importante entender como as instruções podem influenciar as respostas geradas. Nesse contexto, é essencial ficar atento a algumas questões, como **prompts enviesados**, **alucinações**, **considerações éticas**, além de **privacidade e segurança**. Como vimos anteriormente, os modelos de linguagem são treinados com grandes volumes de dados. Esses dados podem conter vieses ou erros que acabam sendo refletidos nas respostas geradas. Isso ocorre porque o modelo tende a reproduzir os padrões que encontra, o que pode influenciar a qualidade e a imparcialidade das respostas. Por isso, organizações e profissionais da área têm intensificado esforços para implementar práticas alinhadas aos princípios da IA responsável, que abrangem imparcialidade, confiabilidade, segurança, privacidade, inclusão, transparência e responsabilidade. Essas iniciativas buscam reduzir vieses e garantir que a tecnologia seja utilizada de forma ética e segura. ### Prompts Enviesados[](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/aplicacoes-praticas-da-engenharia-de-prompts/cuidados-na-aplicacao-de-prompts#prompts-enviesados) Assim como os dados podem conter vieses, os prompts também podem ser tendenciosos. Isso acontece quando a pergunta é feita de maneira que sugira ou induza uma resposta específica, o que limita a possibilidade de uma análise mais ampla e pode até reforçar estereótipos ou visões preconcebidas. Exemplo de Prompt Enviesado Copy Por que o café é a melhor bebida de todos os tempos? Ao fazer um pedido de forma parcial, você pode influenciar a resposta, limitando a diversidade de opiniões ou reforçando estereótipos. O ideal é manter a imparcialidade, garantindo que o campo para as respostas seja aberto e sem influências externas. Exemplo de Prompt Imparcial Copy Quais são as vantagens e desvantagens do café em comparação com outras bebidas? ### Alucinações[](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/aplicacoes-praticas-da-engenharia-de-prompts/cuidados-na-aplicacao-de-prompts#alucinacoes) As **alucinações** ocorrem quando a ferramenta gera informações erradas ou inventadas, muitas vezes por tentar preencher lacunas no conhecimento. Uma simples solicitação pode gerar respostas com "fatos" que não têm fundamento, o que pode confundir quem está recebendo a informação. Por isso, é fundamental verificar e questionar o conteúdo, para não aceitar informações imprecisas como verdade. Exemplo de Prompt Passível de Alucinação Copy Descreva os segredos escondidos no fundo do oceano, onde se encontram criaturas fantásticas. Esse tipo de prompt pode levar a respostas que mencionam descobertas inexistentes ou imprecisas, pois a IA pode tentar "preencher" a falta de informações atualizadas com suposições ou dados falsos, sem a devida verificação. A resposta gerada pode ser convincente, mas não necessariamente verdadeira. Exemplo de Prompt Copy Quais são os principais estudos sobre a biodiversidade nas regiões mais profundas do oceano? ### Privacidade e Segurança[](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/aplicacoes-praticas-da-engenharia-de-prompts/cuidados-na-aplicacao-de-prompts#privacidade-e-seguranca) É sempre recomendado não compartilhar dados pessoais ou confidenciais em qualquer plataforma, pois isso ajuda a proteger a privacidade. Da mesma forma, ao criar um prompt, devemos ter cuidado com o tipo de informação que estamos compartilhando. Uma alternativa, caso precise compartilhar informações para contextualizar um prompt, é anonimizar os dados. Por exemplo, em vez de fornecer um nome real, use "Pessoa A" ou uma descrição vaga que preserve a privacidade. Para entender mais, verifique a Política de Privacidade e os Termos de Uso do serviço que você está utilizando. [PreviousEngenharia de Prompts no Dia a Dia](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/aplicacoes-praticas-da-engenharia-de-prompts/engenharia-de-prompts-no-dia-a-dia) [NextConsiderações Finais e Próximos Passos](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/leve-seus-prompts-ao-proximo-nivel/consideracoes-finais-e-proximos-passos) Last updated 1 year ago * [Prompts Enviesados](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/aplicacoes-praticas-da-engenharia-de-prompts/cuidados-na-aplicacao-de-prompts#prompts-enviesados) * [Alucinações](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/aplicacoes-praticas-da-engenharia-de-prompts/cuidados-na-aplicacao-de-prompts#alucinacoes) * [Privacidade e Segurança](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/aplicacoes-praticas-da-engenharia-de-prompts/cuidados-na-aplicacao-de-prompts#privacidade-e-seguranca) --- # Como os Modelos de Linguagem "Lembram" do que foi Dito? | Introdução à Engenharia de Prompts | ELIDIANA • Cursos For the complete documentation index, see [llms.txt](https://elidianaandrade.gitbook.io/cursos/llms.txt) . This page is also available as [Markdown](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/visao-geral-da-engenharia-de-prompts/como-os-modelos-de-linguagem-lembram-do-que-foi-dito.md) . De maneira geral, os modelos de linguagem não possuem **memória persistente** entre interações, ou seja, eles não "lembram" de conversas passadas depois que a interação termina. No entanto, dentro de uma única interação, o modelo consegue manter o contexto do que foi dito por meio da **janela de contexto**, que **é o limite de tokens que o modelo pode processar simultaneamente.** Cada modelo possui uma janela de contexto diferente, e quando o limite dela é atingido, os tokens mais antigos começam a ser descartados para dar espaço aos mais novos. ### Analogia: Professor Escrevendo na Lousa[](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/visao-geral-da-engenharia-de-prompts/como-os-modelos-de-linguagem-lembram-do-que-foi-dito#analogia-professor-escrevendo-na-lousa) De forma análoga, imagine uma lousa em uma sala de aula. Ela tem um espaço limitado para escrever. À medida que o professor vai adicionando mais informações, ele precisa apagar o que escreveu primeiro para poder adicionar mais conteúdo. O modelo funciona da mesma maneira: ele mantém as informações dentro do limite da janela de contexto, mas, quando esse limite é alcançado, as informações mais antigas são descartadas para que as novas possam ser processadas. ### Exemplo: "O que é Aliança?"[](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/visao-geral-da-engenharia-de-prompts/como-os-modelos-de-linguagem-lembram-do-que-foi-dito#exemplo-o-que-e-alianca) Por exemplo, se você perguntar para o modelo "Em poucas palavras, o que é Aliança?". Ele vai retornar uma resposta genérica, pois depende do contexto. Em seguida, se perguntarmos "O que é Azeroth?", ele vai responder que é um mundo fictício onde se passa a maior parte da história do universo de World of Warcraft. Agora, se perguntarmos para ele "O que é Aliança?" novamente, ele vai usar o contexto do nosso prompt anterior e vai trazer como resposta que a Aliança é uma das duas principais facções em World of Warcraft. Exemplo de Prompt: Copy Usuário: Em poucas palavras, o que é Aliança? IA: Aliança é uma associação ou acordo entre partes para alcançar objetivos comuns, geralmente envolvendo cooperação e compromisso mútuo. Usuário: O que é Azeroth? IA: Azeroth é o nome do mundo fictício onde se passa a maior parte da história do universo de World of Warcraft, um popular jogo de RPG online. É um planeta cheio de diferentes raças, facções e seres, com uma rica mitologia e história. Usuário: O que é Aliança? IA: A Aliança é uma das duas principais facções em World of Warcraft, composta por várias raças como humanos, elfos, anões, gnomos, draenei e worgen. Ela busca a paz, a justiça e a proteção contra as ameaças do mundo, muitas vezes entrando em conflito com a Horda, a facção oposta. Isso acontece, pois está dentro da janela de contexto dele, mas se a conversa continuar e ultrapassar o limite da janela, ele pode perder o início da conversa, necessitando que você reforce os pontos importantes caso queira que eles permaneçam no foco. ### Personalização[](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/visao-geral-da-engenharia-de-prompts/como-os-modelos-de-linguagem-lembram-do-que-foi-dito#personalizacao) No ChatGPT, por exemplo, é possível personalizar a experiência com funcionalidades como [memória](https://help.openai.com/en/articles/8590148-memory-faq) e [instruções](https://help.openai.com/en/articles/8096356-custom-instructions-for-chatgpt) [personalizadas](https://help.openai.com/en/articles/8096356-custom-instructions-for-chatgpt), que permitem ao modelo armazenar algumas informações entre os chats ou seguir diretrizes específicas dadas pelo usuário para melhorar as respostas. ![](https://elidianaandrade.gitbook.io/cursos/~gitbook/image?url=https%3A%2F%2F2589491333-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F3qTdlyc9Bv4eCMQFkvul%252Fuploads%252FTWh5ycbrmmwckKvOpFyv%252FPersonaliza%25C3%25A7%25C3%25A3o.png%3Falt%3Dmedia%26token%3D2d4ee4bb-4736-43cf-9daf-497f5d4a2ef7&width=768&dpr=3&quality=100&sign=d9f7d7c9&sv=2) [PreviousComo os Modelos de Linguagem "Entendem" um Prompt?](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/visao-geral-da-engenharia-de-prompts/como-os-modelos-de-linguagem-entendem-um-prompt) [NextElementos Essenciais de um Bom Prompt](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/visao-geral-da-engenharia-de-prompts/elementos-essenciais-de-um-bom-prompt) Last updated 1 year ago * [Analogia: Professor Escrevendo na Lousa](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/visao-geral-da-engenharia-de-prompts/como-os-modelos-de-linguagem-lembram-do-que-foi-dito#analogia-professor-escrevendo-na-lousa) * [Exemplo: "O que é Aliança?"](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/visao-geral-da-engenharia-de-prompts/como-os-modelos-de-linguagem-lembram-do-que-foi-dito#exemplo-o-que-e-alianca) * [Personalização](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/visao-geral-da-engenharia-de-prompts/como-os-modelos-de-linguagem-lembram-do-que-foi-dito#personalizacao) --- # Instalando o Visual Studio Code | Roadmap Full Stack - JavaScript | ELIDIANA • Roadmaps For the complete documentation index, see [llms.txt](https://elidianaandrade.gitbook.io/roadmaps/llms.txt) . This page is also available as [Markdown](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/ii.-preparando-o-ambiente-de-desenvolvimento/instalando-o-visual-studio-code.md) . ### Introdução[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/ii.-preparando-o-ambiente-de-desenvolvimento/instalando-o-visual-studio-code#introducao) O **Visual Studio Code (VS Code)** é um editor de código-fonte leve, gratuito e multiplataforma desenvolvido pela Microsoft. #### Visual Studio Code **(VS Code)** ≠ Visual Studio[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/ii.-preparando-o-ambiente-de-desenvolvimento/instalando-o-visual-studio-code#visual-studio-code-vs-code-visual-studio) * **VS Code:** é um editor de código leve, rápido e muito flexível, ideal para quem trabalha com desenvolvimento web ou projetos variados em diferentes linguagens. * **Visual Studio:** é uma IDE completa e mais pesada, usada para desenvolver grandes aplicações, especialmente em C# e .NET. * * * ### Instalação do VS Code no Windows[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/ii.-preparando-o-ambiente-de-desenvolvimento/instalando-o-visual-studio-code#instalacao-do-vs-code-no-windows) Acesse o site [https://code.visualstudio.com/](https://code.visualstudio.com/) , faça download do executável e prossiga com a instalação. * * * ### Atalhos Principais[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/ii.-preparando-o-ambiente-de-desenvolvimento/instalando-o-visual-studio-code#atalhos-principais) Atalho Função **Ctrl + Space** Sugestão de autocompletar (intellisense) **Ctrl + D** Selecionar próxima ocorrência **Ctrl + Shift + L** Selecionar todas as ocorrências **Alt + ↑ / ↓** Mover linha **Ctrl + /** Comentar / descomentar linha **Ctrl + \`** (crase) Abrir terminal integrado ! Criar um documento HTML inicial rapidamente **Ctrl + Shift + P** Abrir Command Palette (todos os comandos) * * * ### Extensões[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/ii.-preparando-o-ambiente-de-desenvolvimento/instalando-o-visual-studio-code#extensoes) Extensão Função Link de Download **Live Server** Executa o site com reload automático [https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) **ESLint** Analisa e corrige JS/TS [https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) **Prettier** Formatação automática de código [https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) **GitLens** Informações avançadas de Git [https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens) **Thunder Client** Cliente de API REST [https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client](https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client) **Tailwind CSS IntelliSense** Autocompleta classes do Tailwind [https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) [AnteriorComandos Básicos no Linux](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/ii.-preparando-o-ambiente-de-desenvolvimento/instalando-o-linux-no-windows-com-o-wsl/comandos-basicos-no-linux) [PróximoInstalando o Git](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/ii.-preparando-o-ambiente-de-desenvolvimento/instalando-o-git) Atualizado há 8 meses * [Introdução](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/ii.-preparando-o-ambiente-de-desenvolvimento/instalando-o-visual-studio-code#introducao) * [Instalação do VS Code no Windows](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/ii.-preparando-o-ambiente-de-desenvolvimento/instalando-o-visual-studio-code#instalacao-do-vs-code-no-windows) * [Atalhos Principais](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/ii.-preparando-o-ambiente-de-desenvolvimento/instalando-o-visual-studio-code#atalhos-principais) * [Extensões](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/ii.-preparando-o-ambiente-de-desenvolvimento/instalando-o-visual-studio-code#extensoes) --- # Gerenciadores de Pacotes | Roadmap Full Stack - JavaScript | ELIDIANA • Roadmaps For the complete documentation index, see [llms.txt](https://elidianaandrade.gitbook.io/roadmaps/llms.txt) . This page is also available as [Markdown](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/iii.-fundamentos-da-programacao/gerenciadores-de-pacotes.md) . ### Introdução[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/iii.-fundamentos-da-programacao/gerenciadores-de-pacotes#introducao) Gerenciadores em programação são **ferramentas que automatizam a instalação, atualização, configuração e remoção de softwares ou bibliotecas**. Eles evitam que você precise fazer tudo manualmente, garantindo consistência e economia de tempo. * * * ### Gerenciadores de Pacotes de Sistema[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/iii.-fundamentos-da-programacao/gerenciadores-de-pacotes#gerenciadores-de-pacotes-de-sistema) Instalam **aplicações inteiras**, como navegadores, editores e utilitários do sistema. > **Exemplos:** > > * Chocolatey (Windows) > > * Homebrew (macOS / Linux) > * * * ### Gerenciadores de Pacotes para Ecossistemas de Linguagens[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/iii.-fundamentos-da-programacao/gerenciadores-de-pacotes#gerenciadores-de-pacotes-para-ecossistemas-de-linguagens) Instalam **bibliotecas e dependências** usadas dentro de um projeto de programação, não programas completos. > **Exemplos:** > > * **npm:** Node Package Manage, gerenciador de pacotes do Node.js usado para instalar e administrar bibliotecas JavaScript em projetos. > > * **yarn:** alternativa ao npm, mais rápido e com cache mais eficiente. > [AnteriorVersionamento de Código](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/iii.-fundamentos-da-programacao/versionamento-de-codigo) [PróximoHTML](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/iv.-a-triade-da-web/html) Atualizado há 8 meses * [Introdução](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/iii.-fundamentos-da-programacao/gerenciadores-de-pacotes#introducao) * [Gerenciadores de Pacotes de Sistema](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/iii.-fundamentos-da-programacao/gerenciadores-de-pacotes#gerenciadores-de-pacotes-de-sistema) * [Gerenciadores de Pacotes para Ecossistemas de Linguagens](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/iii.-fundamentos-da-programacao/gerenciadores-de-pacotes#gerenciadores-de-pacotes-para-ecossistemas-de-linguagens) --- # Lógica de Programação | Roadmap Full Stack - JavaScript | ELIDIANA • Roadmaps For the complete documentation index, see [llms.txt](https://elidianaandrade.gitbook.io/roadmaps/llms.txt) . This page is also available as [Markdown](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/iii.-fundamentos-da-programacao/logica-de-programacao.md) . [Algoritmos](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/iii.-fundamentos-da-programacao/logica-de-programacao/algoritmos) [Estrutura de Dados](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/iii.-fundamentos-da-programacao/logica-de-programacao/estrutura-de-dados) [AnteriorConfigurando o Git](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/ii.-preparando-o-ambiente-de-desenvolvimento/instalando-o-git/configurando-o-git) [PróximoAlgoritmos](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/iii.-fundamentos-da-programacao/logica-de-programacao/algoritmos) --- # Estrutura de Dados | Roadmap Full Stack - JavaScript | ELIDIANA • Roadmaps For the complete documentation index, see [llms.txt](https://elidianaandrade.gitbook.io/roadmaps/llms.txt) . This page is also available as [Markdown](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/iii.-fundamentos-da-programacao/logica-de-programacao/estrutura-de-dados.md) . [AnteriorAlgoritmos](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/iii.-fundamentos-da-programacao/logica-de-programacao/algoritmos) [PróximoParadigmas de Programação](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/iii.-fundamentos-da-programacao/paradigmas-de-programacao) --- # Algoritmos | Roadmap Full Stack - JavaScript | ELIDIANA • Roadmaps For the complete documentation index, see [llms.txt](https://elidianaandrade.gitbook.io/roadmaps/llms.txt) . This page is also available as [Markdown](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/iii.-fundamentos-da-programacao/logica-de-programacao/algoritmos.md) . [AnteriorLógica de Programação](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/iii.-fundamentos-da-programacao/logica-de-programacao) [PróximoEstrutura de Dados](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/iii.-fundamentos-da-programacao/logica-de-programacao/estrutura-de-dados) --- # Instalando o Linux no Windows com o WSL | Roadmap Full Stack - JavaScript | ELIDIANA • Roadmaps For the complete documentation index, see [llms.txt](https://elidianaandrade.gitbook.io/roadmaps/llms.txt) . This page is also available as [Markdown](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/ii.-preparando-o-ambiente-de-desenvolvimento/instalando-o-linux-no-windows-com-o-wsl.md) . ### Introdução[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/ii.-preparando-o-ambiente-de-desenvolvimento/instalando-o-linux-no-windows-com-o-wsl#introducao) O **WSL** (Windows Subsystem for Linux) é um recurso do Windows que permite executar um ambiente Linux completo no Windows, sem a necessidade de uma máquina virtual tradicional ou dual boot. Veja como instalar acessando a [documentação oficial](https://learn.microsoft.com/pt-br/windows/wsl/install) ou confira o tutorial resumido nos próximos tópicos. * * * ### Instalação manual para versões mais antigas do WSL[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/ii.-preparando-o-ambiente-de-desenvolvimento/instalando-o-linux-no-windows-com-o-wsl#instalacao-manual-para-versoes-mais-antigas-do-wsl) 1 #### Acesse "Recursos do Windows" no Painel de Controle[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/ii.-preparando-o-ambiente-de-desenvolvimento/instalando-o-linux-no-windows-com-o-wsl#acesse-recursos-do-windows-no-painel-de-controle) Abra o Painel de Controle, vá em Programas e clique em Ativar ou desativar recursos do Windows 2 #### Habilite as opções abaixo:[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/ii.-preparando-o-ambiente-de-desenvolvimento/instalando-o-linux-no-windows-com-o-wsl#habilite-as-opcoes-abaixo) ✔ **Subsistema do Windows para Linux** ✔ **Plataforma do Hipervisor do Windows** ✔ **Plataforma de Máquina Virtual** 3 #### Clique em OK[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/ii.-preparando-o-ambiente-de-desenvolvimento/instalando-o-linux-no-windows-com-o-wsl#clique-em-ok) 4 #### Reinicie o Computador[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/ii.-preparando-o-ambiente-de-desenvolvimento/instalando-o-linux-no-windows-com-o-wsl#reinicie-o-computador) 5 #### Instale o kernel do WSL 2 (se necessário)[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/ii.-preparando-o-ambiente-de-desenvolvimento/instalando-o-linux-no-windows-com-o-wsl#instale-o-kernel-do-wsl-2-se-necessario) Abra o PowerShell e execute: `wsl --install` * * * ### Instalação do WSL[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/ii.-preparando-o-ambiente-de-desenvolvimento/instalando-o-linux-no-windows-com-o-wsl#instalacao-do-wsl) 1 #### Abra o PowerShell como administrador[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/ii.-preparando-o-ambiente-de-desenvolvimento/instalando-o-linux-no-windows-com-o-wsl#abra-o-powershell-como-administrador) Clique com o botão direito no ícone do PowerShell e selecione "Executar como administrador". 2 #### **Execute o comando de instalação**[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/ii.-preparando-o-ambiente-de-desenvolvimento/instalando-o-linux-no-windows-com-o-wsl#execute-o-comando-de-instalacao) Digite `wsl --install` e pressione Enter. 3 #### Reinicie o computador[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/ii.-preparando-o-ambiente-de-desenvolvimento/instalando-o-linux-no-windows-com-o-wsl#reinicie-o-computador-1) O processo vai solicitar a reinicialização do seu PC. * * * ### Instalação da Distribuição Linux[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/ii.-preparando-o-ambiente-de-desenvolvimento/instalando-o-linux-no-windows-com-o-wsl#instalacao-da-distribuicao-linux) Uma **distribuição Linux** (ou _distro_) é a versão do sistema operacional Linux escolhida para rodar dentro desse ambiente. Cada distro combina o kernel Linux com ferramentas, aplicativos e gerenciadores de pacotes específicos. Por padrão, ao instalar o WSL, a distribuição instalada do Linux é o Ubuntu. Caso queira instalar manualmente ou escolher uma versão específica, siga os próximos passos: 1 #### Acesse o PowerShell e liste as distribuições disponíveis[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/ii.-preparando-o-ambiente-de-desenvolvimento/instalando-o-linux-no-windows-com-o-wsl#acesse-o-powershell-e-liste-as-distribuicoes-disponiveis) Abra PowerShell e execute o comando `wsl -l --online` 2 #### **Instale a distribuição desejada**[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/ii.-preparando-o-ambiente-de-desenvolvimento/instalando-o-linux-no-windows-com-o-wsl#instale-a-distribuicao-desejada) Execute o comando `wsl --install -d ` 3 #### Configure seu nome de usuário e senha[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/ii.-preparando-o-ambiente-de-desenvolvimento/instalando-o-linux-no-windows-com-o-wsl#configure-seu-nome-de-usuario-e-senha) O sistema solicitará a criação de um nome de usuário e senha para a sua distribuição Linux. Por segurança, ao digitar sua senha, não será mostrado os caracteres digitados no terminal. Durante a configuração, caso digite errado na segunda tentativa, o sistema solicitará que você insira novamente. * * * ### Referências e Links Úteis[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/ii.-preparando-o-ambiente-de-desenvolvimento/instalando-o-linux-no-windows-com-o-wsl#referencias-e-links-uteis) [![Logo](https://elidianaandrade.gitbook.io/roadmaps/~gitbook/image?url=https%3A%2F%2Flearn.microsoft.com%2Ffavicon.ico&width=20&dpr=3&quality=100&sign=148921d6&sv=2)Instalar o WSLMicrosoftLearn](https://learn.microsoft.com/pt-br/windows/wsl/install) [![Logo](https://elidianaandrade.gitbook.io/roadmaps/~gitbook/image?url=https%3A%2F%2Flearn.microsoft.com%2Ffavicon.ico&width=20&dpr=3&quality=100&sign=148921d6&sv=2)Etapas manuais de instalação para versões mais antigas do WSLMicrosoftLearn](https://learn.microsoft.com/pt-br/windows/wsl/install-manual) [AnteriorFerramentas no Navegador (DevTools)](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/i.-fundamentos-da-web/ferramentas-no-navegador-devtools) [PróximoComandos Básicos no Linux](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/ii.-preparando-o-ambiente-de-desenvolvimento/instalando-o-linux-no-windows-com-o-wsl/comandos-basicos-no-linux) Atualizado há 8 meses * [Introdução](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/ii.-preparando-o-ambiente-de-desenvolvimento/instalando-o-linux-no-windows-com-o-wsl#introducao) * [Instalação manual para versões mais antigas do WSL](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/ii.-preparando-o-ambiente-de-desenvolvimento/instalando-o-linux-no-windows-com-o-wsl#instalacao-manual-para-versoes-mais-antigas-do-wsl) * [Instalação do WSL](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/ii.-preparando-o-ambiente-de-desenvolvimento/instalando-o-linux-no-windows-com-o-wsl#instalacao-do-wsl) * [Instalação da Distribuição Linux](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/ii.-preparando-o-ambiente-de-desenvolvimento/instalando-o-linux-no-windows-com-o-wsl#instalacao-da-distribuicao-linux) * [Referências e Links Úteis](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/ii.-preparando-o-ambiente-de-desenvolvimento/instalando-o-linux-no-windows-com-o-wsl#referencias-e-links-uteis) --- # Elementos Essenciais de um Bom Prompt | Introdução à Engenharia de Prompts | ELIDIANA • Cursos For the complete documentation index, see [llms.txt](https://elidianaandrade.gitbook.io/cursos/llms.txt) . This page is also available as [Markdown](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/visao-geral-da-engenharia-de-prompts/elementos-essenciais-de-um-bom-prompt.md) . Para detalhar os elementos essenciais de um bom prompt vamos usar como exemplo a criação de uma história para um RPG de mesa. ### **Instrução Clara**[](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/visao-geral-da-engenharia-de-prompts/elementos-essenciais-de-um-bom-prompt#instrucao-clara) A **instrução** é a tarefa específica que você deseja que o modelo realize. Deve ser direta e sem ambiguidade para evitar interpretações erradas. Copy Crie uma história inicial para uma campanha de RPG de fantasia, envolvendo um grupo de aventureiros presos em uma cidade amaldiçoada. Com isso, o modelo sabe que você quer uma história inicial para uma campanha de RPG, no gênero fantasia, com um cenário específico (cidade amaldiçoada). ### **Contexto Adequado**[](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/visao-geral-da-engenharia-de-prompts/elementos-essenciais-de-um-bom-prompt#contexto-adequado) O **contexto** fornece informações adicionais que ajudam o modelo a entender melhor a tarefa e a produzir uma resposta mais precisa e relevante. Copy A cidade foi tomada por uma maldição que impede qualquer um de sair. Os moradores estão desaparecendo misteriosamente, e as sombras parecem ganhar vida. Os jogadores são aventureiros que chegaram à cidade pouco antes da maldição começar, em busca de tesouros escondidos. Esse detalhe ajuda o modelo a criar uma história rica e conectada ao tema da campanha, além de dar pistas para possíveis ganchos narrativos. ### **Exemplos**[](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/visao-geral-da-engenharia-de-prompts/elementos-essenciais-de-um-bom-prompt#exemplos) Os **exemplos** ajudam a orientar o modelo sobre o formato ou estilo da resposta desejada. Eles podem ser usados para ilustrar como a tarefa deve ser realizada ou para fornecer uma referência clara. Copy Por exemplo, a história pode começar com os aventureiros sendo atacados por sombras vivas na entrada da cidade, forçando-os a buscar refúgio na taberna local. Lá, eles encontram um velho contador de histórias que fala sobre uma relíquia perdida que pode quebrar a maldição. Isso mostra ao modelo que você quer uma introdução que envolva ação inicial e um gancho narrativo interessante. ### **Dados de Entrada**[](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/visao-geral-da-engenharia-de-prompts/elementos-essenciais-de-um-bom-prompt#dados-de-entrada) Os **dados de entrada** são as informações ou o problema específico que o modelo deve processar ou resolver. Pode ser uma pergunta, uma situação ou um texto que precisa ser analisado ou trabalhado. Esses detalhes ajudam o modelo a personalizar a história para o grupo e o tema. ### **Formato da Saída**[](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/visao-geral-da-engenharia-de-prompts/elementos-essenciais-de-um-bom-prompt#formato-da-saida) O **formato da saída** especifica o que é esperado da resposta do modelo em termos de comprimento, detalhes ou tipo de formato. Com isso, o modelo sabe exatamente como estruturar a resposta para atender às suas expectativas. * * * ![](https://elidianaandrade.gitbook.io/cursos/~gitbook/image?url=https%3A%2F%2F2589491333-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F3qTdlyc9Bv4eCMQFkvul%252Fuploads%252FpbeCGVi7ixNQNZelZq55%252FAnalogia.png%3Falt%3Dmedia%26token%3D023c9a7e-234a-4505-aeb4-bf54cbec4327&width=768&dpr=3&quality=100&sign=b641b9d9&sv=2) Ao enviar o prompt com todos esses elementos, temos como resultado a seguinte saída: Legal, não é? Agora é sua vez de explorar a criação de prompts aplicando esses elementos! [PreviousComo os Modelos de Linguagem "Lembram" do que foi Dito?](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/visao-geral-da-engenharia-de-prompts/como-os-modelos-de-linguagem-lembram-do-que-foi-dito) [NextEngenharia de Prompts no Dia a Dia](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/aplicacoes-praticas-da-engenharia-de-prompts/engenharia-de-prompts-no-dia-a-dia) Last updated 1 year ago * [Instrução Clara](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/visao-geral-da-engenharia-de-prompts/elementos-essenciais-de-um-bom-prompt#instrucao-clara) * [Contexto Adequado](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/visao-geral-da-engenharia-de-prompts/elementos-essenciais-de-um-bom-prompt#contexto-adequado) * [Exemplos](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/visao-geral-da-engenharia-de-prompts/elementos-essenciais-de-um-bom-prompt#exemplos) * [Dados de Entrada](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/visao-geral-da-engenharia-de-prompts/elementos-essenciais-de-um-bom-prompt#dados-de-entrada) * [Formato da Saída](https://elidianaandrade.gitbook.io/cursos/introducao-a-engenharia-de-prompts/visao-geral-da-engenharia-de-prompts/elementos-essenciais-de-um-bom-prompt#formato-da-saida) Copy Os aventureiros incluem: um ladino sarcástico, um clérigo com uma conexão misteriosa com as sombras, um bárbaro impulsivo e um mago que busca conhecimento proibido. O vilão principal é uma figura encapuzada que manipula a maldição das sombra. Copy A história deve ter de 2 a 3 parágrafos, começando com uma introdução impactante, seguida pelo primeiro desafio e um gancho final que motive os jogadores a explorar a cidade. Prompt Completo Copy Crie uma história inicial para uma campanha de RPG de fantasia, envolvendo um grupo de aventureiros presos em uma cidade amaldiçoada. A cidade foi tomada por uma maldição que impede qualquer um de sair. Os moradores estão desaparecendo misteriosamente, e as sombras parecem ganhar vida. Os jogadores são aventureiros que chegaram à cidade pouco antes da maldição começar, em busca de tesouros escondidos. Por exemplo, a história pode começar com os aventureiros sendo atacados por sombras vivas na entrada da cidade, forçando-os a buscar refúgio na taberna local. Lá, eles encontram um velho contador de histórias que fala sobre uma relíquia perdida que pode quebrar a maldição. Os aventureiros incluem: um ladino sarcástico, um clérigo com uma conexão misteriosa com as sombras, um bárbaro impulsivo e um mago que busca conhecimento proibido. O vilão principal é uma figura encapuzada que manipula a maldição das sombra. A história deve ter de 2 a 3 parágrafos, começando com uma introdução impactante, seguida pelo primeiro desafio e um gancho final que motive os jogadores a explorar a cidade. Exemplo de Resposta do Modelo Copy O grupo de aventureiros chega à cidade de Nocturnis, atraído por rumores de um tesouro escondido nas catacumbas abaixo de suas ruas antigas. Porém, mal atravessam os portões da cidade, uma escuridão repentina toma conta do lugar, e sombras ganham vida, atacando com fúria crescente. Em uma luta desesperada para sobreviver, o grupo se vê forçado a correr até a taberna local, onde o cheiro de vinho e de madeira envelhecida se mistura ao ar pesado e denso. As portas se fecham com um estrondo, e os aventureiros se refugiam, ofegantes, enquanto as sombras batem contra as paredes de madeira da taberna. Dentro, um velho contador de histórias, sentado em uma mesa próxima à lareira, observa os intrusos com olhos cansados. "Vocês chegaram na pior hora", diz ele com uma voz rouca, revelando que a cidade foi amaldiçoada por uma relíquia perdida, um artefato de poder imensurável. A sombra que assola Nocturnis não é apenas um pesadelo; é comandada por um ser encapuzado, um antigo mestre das trevas que há muito manipula a cidade. Para quebrar a maldição e libertar a cidade, a relíquia deve ser recuperada e destruída. Mas ninguém que tenha saído em busca dela jamais voltou. Com um som de vidro quebrando e um grito distante, as sombras que rondam a cidade começam a se aproximar mais rapidamente. O contador faz uma pausa, e com um olhar preocupado, ele revela que o vilão não permitirá que a busca pela relíquia seja fácil. O grupo deve enfrentar os horrores de Nocturnis, resolver os mistérios que envolvem a cidade e encontrar o artefato antes que seja tarde demais — ou se tornem vítimas da maldição que os prende ali para sempre. --- # Configurando o Git | Roadmap Full Stack - JavaScript | ELIDIANA • Roadmaps For the complete documentation index, see [llms.txt](https://elidianaandrade.gitbook.io/roadmaps/llms.txt) . This page is also available as [Markdown](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/ii.-preparando-o-ambiente-de-desenvolvimento/instalando-o-git/configurando-o-git.md) . O Git armazena suas configurações em arquivos de configuração em diferentes níveis. Cada nível tem sua própria localização e prioridade. Ao especificar a opção `--local`, `--global` ou `--system` com o comando git config, você informa em qual nível deseja salvar ou consultar a configuração: Escopo Opção Afeta Localização do arquivo **Local** `--local` Só o repositório atual `.git/config` dentro do repositório **Global** `--global` Todos os repositórios do usuário `~/.gitconfig` (Linux/macOS) ou `%USERPROFILE%\.gitconfig` (Windows) **System** `--system` Todos os usuários da máquina `/etc/gitconfig` (Linux) ou pasta de instalação do Git (Windows) Se nenhuma dessas opções for usada, o Git aplica a configuração no nível local por padrão, desde que esteja dentro de um repositório. Para visualizar as configurações ativas, utilize o comando: Copiar git config --list Para visualizar as configurações com o caminho do arquivo onde estão definidas, use: Copiar git config --list --show-origin Configurações Básicas[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/ii.-preparando-o-ambiente-de-desenvolvimento/instalando-o-git/configurando-o-git#configuracoes-basicas) -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ### Nome de usuário[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/ii.-preparando-o-ambiente-de-desenvolvimento/instalando-o-git/configurando-o-git#nome-de-usuario) Copiar git config --global user.name "Nome Sobrenome" ### E-mail[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/ii.-preparando-o-ambiente-de-desenvolvimento/instalando-o-git/configurando-o-git#e-mail) Copiar git config --global user.email seuemail@email.com ### Branch Padrão[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/ii.-preparando-o-ambiente-de-desenvolvimento/instalando-o-git/configurando-o-git#branch-padrao) Para definir o nome padrão da branch principal para "**main**" ao criar novos repositórios com `git init`, utilize o comando: [AnteriorInstalando o Git](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/ii.-preparando-o-ambiente-de-desenvolvimento/instalando-o-git) [PróximoLógica de Programação](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/iii.-fundamentos-da-programacao/logica-de-programacao) Atualizado há 8 meses * [Configurações Básicas](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/ii.-preparando-o-ambiente-de-desenvolvimento/instalando-o-git/configurando-o-git#configuracoes-basicas) * [Nome de usuário](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/ii.-preparando-o-ambiente-de-desenvolvimento/instalando-o-git/configurando-o-git#nome-de-usuario) * [E-mail](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/ii.-preparando-o-ambiente-de-desenvolvimento/instalando-o-git/configurando-o-git#e-mail) * [Branch Padrão](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/ii.-preparando-o-ambiente-de-desenvolvimento/instalando-o-git/configurando-o-git#branch-padrao) Copiar git config --global init.defaultBranch main --- # Estruturas Condicionais | Roadmap Full Stack - JavaScript | ELIDIANA • Roadmaps For the complete documentation index, see [llms.txt](https://elidianaandrade.gitbook.io/roadmaps/llms.txt) . This page is also available as [Markdown](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/iv.-a-triade-da-web/javascript/fundamentos-da-linguagem/estruturas-condicionais.md) . ### Introdução[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/iv.-a-triade-da-web/javascript/fundamentos-da-linguagem/estruturas-condicionais#introducao) Condicionais são estruturas que permitem ao programa tomar decisões com base em verificações lógicas. Elas são fundamentais para controlar o fluxo do programa e tomar decisões com base nos valores das variáveis. * * * ### **if / else if / else**[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/iv.-a-triade-da-web/javascript/fundamentos-da-linguagem/estruturas-condicionais#if-else-if-else) Usadas para executar blocos de código dependendo de uma condição ser verdadeira ou falsa. Copiar if (condição) { // executa se a condição for verdadeira } else if (outraCondição) { // executa se a segunda for verdadeira } else { // executa se nenhuma das anteriores for verdadeira } #### **Operador ternário**[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/iv.-a-triade-da-web/javascript/fundamentos-da-linguagem/estruturas-condicionais#operador-ternario) Forma curta de escrever um if/else: Copiar let resultado = x > 0 ? "positivo" : "não positivo"; * * * ### **Comparações estritas (=== e !==)**[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/iv.-a-triade-da-web/javascript/fundamentos-da-linguagem/estruturas-condicionais#comparacoes-estritas-e) * `===` verifica **valor e tipo**, evitando conversões automáticas. * `==` permite conversões implícitas e pode gerar resultados inesperados. Exemplo: * * * ### **Switch Case em JavaScript**[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/iv.-a-triade-da-web/javascript/fundamentos-da-linguagem/estruturas-condicionais#switch-case-em-javascript) O `switch` é outra estrutura condicional usada quando você deseja comparar uma mesma expressão com vários valores possíveis. Ele pode deixar o código mais organizado do que múltiplos `else if`. #### **Estrutura básica**[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/iv.-a-triade-da-web/javascript/fundamentos-da-linguagem/estruturas-condicionais#estrutura-basica) * * * ### Referências e Links Úteis[](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/iv.-a-triade-da-web/javascript/fundamentos-da-linguagem/estruturas-condicionais#referencias-e-links-uteis) [![Logo](https://elidianaandrade.gitbook.io/roadmaps/~gitbook/image?url=https%3A%2F%2Fdeveloper.mozilla.org%2Ffavicon.ico&width=20&dpr=3&quality=100&sign=367e5c2d&sv=2)if...else - JavaScript | MDNMDN Web Docs](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Statements/if...else) [AnteriorTipagem](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/iv.-a-triade-da-web/javascript/fundamentos-da-linguagem/tipagem) [PróximoArrays](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/iv.-a-triade-da-web/javascript/fundamentos-da-linguagem/arrays) Atualizado há 8 meses * [Introdução](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/iv.-a-triade-da-web/javascript/fundamentos-da-linguagem/estruturas-condicionais#introducao) * [if / else if / else](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/iv.-a-triade-da-web/javascript/fundamentos-da-linguagem/estruturas-condicionais#if-else-if-else) * [Comparações estritas (=== e !==)](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/iv.-a-triade-da-web/javascript/fundamentos-da-linguagem/estruturas-condicionais#comparacoes-estritas-e) * [Switch Case em JavaScript](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/iv.-a-triade-da-web/javascript/fundamentos-da-linguagem/estruturas-condicionais#switch-case-em-javascript) * [Referências e Links Úteis](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/iv.-a-triade-da-web/javascript/fundamentos-da-linguagem/estruturas-condicionais#referencias-e-links-uteis) Copiar 0 === "0" // false (tipos diferentes) 0 == "0" // true (conversão automática) Copiar switch (expressao) { case valor1: // código executado se expressao === valor1 break; case valor2: // código executado se expressao === valor2 break; default: // código executado se nenhum caso for correspondente } --- # Datalist | Roadmap Full Stack - JavaScript | ELIDIANA • Roadmaps For the complete documentation index, see [llms.txt](https://elidianaandrade.gitbook.io/roadmaps/llms.txt) . This page is also available as [Markdown](https://elidianaandrade.gitbook.io/roadmaps/full-stack-javascript/iv.-a-triade-da-web/html/listas/datalist.md) . A tag `` em HTML5 é usada para criar uma lista de opções que pode ser associada a um elemento de entrada, como um campo de texto. Isso permite que os usuários escolham uma opção da lista enquanto ainda têm a flexibilidade de inserir um valor personalizado. A tag `` é frequentemente usada em conjunto com a tag ``. > **Exemplo:** > > Copiar > > > > > > > > 1. Criamos um campo de texto com a tag `` e atribuímos a ele um `id` de "fruta". > > 2. Criamos a lista de opções de frutas usando a tag `` com um `id` de "frutas". > > 3. Dentro da tag ``, usamos a tag `