{"id":1410,"date":"2026-06-01T19:50:28","date_gmt":"2026-06-01T22:50:28","guid":{"rendered":"https:\/\/micheladrianomedeiros.com.br\/blog\/?p=1410"},"modified":"2026-06-01T19:50:28","modified_gmt":"2026-06-01T22:50:28","slug":"como-a-web-funciona","status":"publish","type":"post","link":"https:\/\/micheladrianomedeiros.com.br\/blog\/como-a-web-funciona\/","title":{"rendered":"Como a Web Funciona: navegador, servidor, backend, banco de dados, HTTP e JSON"},"content":{"rendered":"\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/micheladrianomedeiros.com.br\/blog\/como-a-web-funciona\/#Introducao\" >Introdu\u00e7\u00e3o<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/micheladrianomedeiros.com.br\/blog\/como-a-web-funciona\/#Objetivo_da_licao\" >Objetivo da li\u00e7\u00e3o<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/micheladrianomedeiros.com.br\/blog\/como-a-web-funciona\/#1_O_que_acontece_quando_voce_acessa_um_site\" >1. O que acontece quando voc\u00ea acessa um site?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/micheladrianomedeiros.com.br\/blog\/como-a-web-funciona\/#2_O_que_e_HTTP\" >2. O que \u00e9 HTTP?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/micheladrianomedeiros.com.br\/blog\/como-a-web-funciona\/#3_HTTP_e_HTTPS_sao_a_mesma_coisa\" >3. HTTP e HTTPS s\u00e3o a mesma coisa?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/micheladrianomedeiros.com.br\/blog\/como-a-web-funciona\/#4_O_que_e_uma_requisicao_HTTP\" >4. O que \u00e9 uma requisi\u00e7\u00e3o HTTP?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/micheladrianomedeiros.com.br\/blog\/como-a-web-funciona\/#5_O_que_e_uma_resposta_HTTP\" >5. O que \u00e9 uma resposta HTTP?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/micheladrianomedeiros.com.br\/blog\/como-a-web-funciona\/#6_O_que_sao_status_codes\" >6. O que s\u00e3o status codes?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/micheladrianomedeiros.com.br\/blog\/como-a-web-funciona\/#7_O_que_sao_metodos_HTTP\" >7. O que s\u00e3o m\u00e9todos HTTP?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/micheladrianomedeiros.com.br\/blog\/como-a-web-funciona\/#GET\" >GET<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/micheladrianomedeiros.com.br\/blog\/como-a-web-funciona\/#POST\" >POST<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/micheladrianomedeiros.com.br\/blog\/como-a-web-funciona\/#PUT\" >PUT<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/micheladrianomedeiros.com.br\/blog\/como-a-web-funciona\/#PATCH\" >PATCH<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/micheladrianomedeiros.com.br\/blog\/como-a-web-funciona\/#DELETE\" >DELETE<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/micheladrianomedeiros.com.br\/blog\/como-a-web-funciona\/#8_O_que_e_frontend\" >8. O que \u00e9 frontend?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/micheladrianomedeiros.com.br\/blog\/como-a-web-funciona\/#9_O_que_e_backend\" >9. O que \u00e9 backend?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/micheladrianomedeiros.com.br\/blog\/como-a-web-funciona\/#10_O_que_e_banco_de_dados\" >10. O que \u00e9 banco de dados?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/micheladrianomedeiros.com.br\/blog\/como-a-web-funciona\/#11_O_que_e_JSON\" >11. O que \u00e9 JSON?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/micheladrianomedeiros.com.br\/blog\/como-a-web-funciona\/#12_O_fluxo_completo_de_uma_aplicacao_web\" >12. O fluxo completo de uma aplica\u00e7\u00e3o web<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/micheladrianomedeiros.com.br\/blog\/como-a-web-funciona\/#13_Exemplo_pratico_sistema_de_tarefas\" >13. Exemplo pr\u00e1tico: sistema de tarefas<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/micheladrianomedeiros.com.br\/blog\/como-a-web-funciona\/#14_Exemplo_pratico_fluxo_de_login\" >14. Exemplo pr\u00e1tico: fluxo de login<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-22\" href=\"https:\/\/micheladrianomedeiros.com.br\/blog\/como-a-web-funciona\/#15_Diferenca_entre_pagina_web_e_API\" >15. Diferen\u00e7a entre p\u00e1gina web e API<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-23\" href=\"https:\/\/micheladrianomedeiros.com.br\/blog\/como-a-web-funciona\/#16_O_que_e_deploy\" >16. O que \u00e9 deploy?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-24\" href=\"https:\/\/micheladrianomedeiros.com.br\/blog\/como-a-web-funciona\/#17_Onde_entram_seguranca_e_performance\" >17. Onde entram seguran\u00e7a e performance?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-25\" href=\"https:\/\/micheladrianomedeiros.com.br\/blog\/como-a-web-funciona\/#18_Erros_comuns_de_iniciantes\" >18. Erros comuns de iniciantes<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-26\" href=\"https:\/\/micheladrianomedeiros.com.br\/blog\/como-a-web-funciona\/#Achar_que_frontend_e_backend_sao_a_mesma_coisa\" >Achar que frontend e backend s\u00e3o a mesma coisa<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-27\" href=\"https:\/\/micheladrianomedeiros.com.br\/blog\/como-a-web-funciona\/#Achar_que_banco_de_dados_e_o_backend\" >Achar que banco de dados \u00e9 o backend<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-28\" href=\"https:\/\/micheladrianomedeiros.com.br\/blog\/como-a-web-funciona\/#Achar_que_JSON_e_banco_de_dados\" >Achar que JSON \u00e9 banco de dados<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-29\" href=\"https:\/\/micheladrianomedeiros.com.br\/blog\/como-a-web-funciona\/#Usar_GET_para_tudo\" >Usar GET para tudo<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-30\" href=\"https:\/\/micheladrianomedeiros.com.br\/blog\/como-a-web-funciona\/#Ignorar_status_codes\" >Ignorar status codes<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-31\" href=\"https:\/\/micheladrianomedeiros.com.br\/blog\/como-a-web-funciona\/#Achar_que_funcionar_localmente_e_suficiente\" >Achar que funcionar localmente \u00e9 suficiente<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-32\" href=\"https:\/\/micheladrianomedeiros.com.br\/blog\/como-a-web-funciona\/#19_Conceito-chave_da_licao\" >19. Conceito-chave da li\u00e7\u00e3o<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-33\" href=\"https:\/\/micheladrianomedeiros.com.br\/blog\/como-a-web-funciona\/#20_Resumo_da_licao\" >20. Resumo da li\u00e7\u00e3o<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-34\" href=\"https:\/\/micheladrianomedeiros.com.br\/blog\/como-a-web-funciona\/#Exercicio_pratico\" >Exerc\u00edcio pr\u00e1tico<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-35\" href=\"https:\/\/micheladrianomedeiros.com.br\/blog\/como-a-web-funciona\/#Mini_desafio\" >Mini desafio<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-36\" href=\"https:\/\/micheladrianomedeiros.com.br\/blog\/como-a-web-funciona\/#Conclusao\" >Conclus\u00e3o<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Introducao\"><\/span>Introdu\u00e7\u00e3o<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Todo site parece simples para quem est\u00e1 usando.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Voc\u00ea digita um endere\u00e7o no navegador, aperta Enter e a p\u00e1gina aparece. Quando clica em um bot\u00e3o, alguma coisa acontece. Quando faz login, o sistema confirma seus dados. Quando compra um produto, o pedido \u00e9 registrado. Quando abre uma rede social, novas publica\u00e7\u00f5es aparecem na tela.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Mas por tr\u00e1s dessa aparente simplicidade existe um caminho inteiro acontecendo em poucos segundos.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O navegador conversa com a internet. A internet encontra o servidor. O servidor executa uma aplica\u00e7\u00e3o. A aplica\u00e7\u00e3o pode consultar um banco de dados. O banco devolve informa\u00e7\u00f5es. O backend prepara uma resposta. O frontend exibe o resultado na tela.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Esse fluxo \u00e9 a base de praticamente qualquer sistema web moderno.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">N\u00e3o importa se a aplica\u00e7\u00e3o foi criada com Java, PHP, Python, JavaScript, Node.js, C#, Ruby, Go, Laravel, Spring Boot, Django, Express, Rails ou qualquer outra tecnologia. Por tr\u00e1s de todas elas existe a mesma ideia principal: uma comunica\u00e7\u00e3o entre cliente, servidor e dados.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Nesta li\u00e7\u00e3o, voc\u00ea vai entender como a web funciona de verdade. N\u00e3o vamos focar em uma linguagem espec\u00edfica. A ideia \u00e9 compreender o caminho completo que uma aplica\u00e7\u00e3o percorre at\u00e9 aparecer na tela do usu\u00e1rio.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Esse conhecimento \u00e9 essencial para qualquer pessoa que deseja se tornar desenvolvedor fullstack, backend, frontend, DevOps ou arquiteto de software.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Objetivo_da_licao\"><\/span>Objetivo da li\u00e7\u00e3o<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">O objetivo desta aula \u00e9 entender o fluxo b\u00e1sico de uma aplica\u00e7\u00e3o web:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Usu\u00e1rio\n\u2193\nNavegador\n\u2193\nDNS\n\u2193\nInternet\n\u2193\nServidor\n\u2193\nBackend\n\u2193\nBanco de dados\n\u2193\nResposta\n\u2193\nNavegador\n\u2193\nTela do usu\u00e1rio\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Quando voc\u00ea entende esse caminho, deixa de enxergar programa\u00e7\u00e3o como apenas \u201cescrever c\u00f3digo\u201d e come\u00e7a a enxergar sistemas como um conjunto de partes que trabalham juntas.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Essa vis\u00e3o \u00e9 o que diferencia algu\u00e9m que apenas copia comandos de algu\u00e9m que realmente entende como uma aplica\u00e7\u00e3o funciona.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_O_que_acontece_quando_voce_acessa_um_site\"><\/span>1. O que acontece quando voc\u00ea acessa um site?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Imagine que voc\u00ea digita este endere\u00e7o no navegador:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>https:&#47;&#47;meusite.com\/produtos\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Para o usu\u00e1rio, parece que o navegador simplesmente abre uma p\u00e1gina. Por\u00e9m, internamente, v\u00e1rias etapas acontecem.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A primeira coisa que o navegador precisa descobrir \u00e9 onde esse site est\u00e1 hospedado. Para isso, ele usa o DNS.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">DNS significa <strong>Domain Name System<\/strong>, ou Sistema de Nomes de Dom\u00ednio.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Em vez de voc\u00ea decorar um endere\u00e7o num\u00e9rico, como um IP, voc\u00ea usa um nome mais f\u00e1cil de lembrar, como:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>meusite.com\ncursojavanow.com.br\ngoogle.com\ngithub.com\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">O DNS funciona como uma esp\u00e9cie de lista de endere\u00e7os da internet. Ele ajuda a transformar um nome de dom\u00ednio em um endere\u00e7o que os computadores conseguem localizar.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">De forma simplificada, o fluxo come\u00e7a assim:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>meusite.com\n\u2193\nconsulta DNS\n\u2193\nIP do servidor\n\u2193\nconex\u00e3o com o servidor\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Depois que o navegador descobre para onde deve ir, ele envia uma requisi\u00e7\u00e3o para o servidor.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Essa requisi\u00e7\u00e3o normalmente usa o protocolo HTTP ou HTTPS.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_O_que_e_HTTP\"><\/span>2. O que \u00e9 HTTP?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">HTTP significa <strong>Hypertext Transfer Protocol<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">De forma simples, HTTP \u00e9 o protocolo usado para a comunica\u00e7\u00e3o entre cliente e servidor na web.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O cliente geralmente \u00e9 o navegador, como Chrome, Firefox, Edge ou Safari. O servidor \u00e9 a m\u00e1quina onde a aplica\u00e7\u00e3o est\u00e1 hospedada.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Quando voc\u00ea acessa uma p\u00e1gina, o navegador faz uma requisi\u00e7\u00e3o HTTP. O servidor recebe essa requisi\u00e7\u00e3o e devolve uma resposta HTTP.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A conversa b\u00e1sica \u00e9 esta:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Navegador:\n\"Servidor, quero acessar \/produtos.\"\n\nServidor:\n\"Ok, aqui est\u00e1 a resposta.\"\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Essa resposta pode ser uma p\u00e1gina HTML, um arquivo CSS, um JavaScript, uma imagem, um JSON, um PDF ou qualquer outro recurso dispon\u00edvel na web.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_HTTP_e_HTTPS_sao_a_mesma_coisa\"><\/span>3. HTTP e HTTPS s\u00e3o a mesma coisa?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">HTTP e HTTPS s\u00e3o parecidos, mas n\u00e3o s\u00e3o exatamente a mesma coisa.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O HTTP \u00e9 o protocolo de comunica\u00e7\u00e3o.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O HTTPS \u00e9 a vers\u00e3o segura dessa comunica\u00e7\u00e3o. Ele usa criptografia para proteger os dados enviados entre o navegador e o servidor.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Na pr\u00e1tica, quando voc\u00ea acessa:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>http:&#47;&#47;meusite.com\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">a comunica\u00e7\u00e3o n\u00e3o est\u00e1 protegida da mesma forma.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Quando acessa:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>https:&#47;&#47;meusite.com\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">a comunica\u00e7\u00e3o passa por uma camada de seguran\u00e7a.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Por isso, sites modernos devem usar HTTPS, principalmente quando lidam com login, senha, pagamentos, formul\u00e1rios, dados pessoais ou qualquer informa\u00e7\u00e3o sens\u00edvel.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Para o usu\u00e1rio comum, o HTTPS costuma aparecer como um cadeado no navegador.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Para o desenvolvedor, ele \u00e9 uma parte importante da seguran\u00e7a da aplica\u00e7\u00e3o.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"4_O_que_e_uma_requisicao_HTTP\"><\/span>4. O que \u00e9 uma requisi\u00e7\u00e3o HTTP?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Uma requisi\u00e7\u00e3o HTTP \u00e9 o pedido que o cliente envia para o servidor.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Quando o navegador acessa uma p\u00e1gina, ele envia algo parecido com isto:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>GET \/produtos HTTP\/1.1\nHost: meusite.com\nAccept: text\/html\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Essa requisi\u00e7\u00e3o diz:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>M\u00e9todo: GET\nCaminho: \/produtos\nProtocolo: HTTP\/1.1\nServidor desejado: meusite.com\nTipo de resposta esperada: HTML\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Em uma aplica\u00e7\u00e3o real, a requisi\u00e7\u00e3o pode carregar mais informa\u00e7\u00f5es, como:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Cookies\nToken de autentica\u00e7\u00e3o\nIdioma do navegador\nTipo de conte\u00fado aceito\nDados de formul\u00e1rio\nPar\u00e2metros de busca\nCabe\u00e7alhos de seguran\u00e7a\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Ou seja, a requisi\u00e7\u00e3o n\u00e3o \u00e9 apenas \u201cabrir uma p\u00e1gina\u201d. Ela \u00e9 uma mensagem estruturada enviada do cliente para o servidor.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"5_O_que_e_uma_resposta_HTTP\"><\/span>5. O que \u00e9 uma resposta HTTP?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Depois que o servidor recebe a requisi\u00e7\u00e3o, ele processa o pedido e devolve uma resposta.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Uma resposta HTTP pode ser parecida com isto:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>HTTP\/1.1 200 OK\nContent-Type: application\/json\n\n{\n  \"id\": 10,\n  \"nome\": \"Curso Java Now\"\n}\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Essa resposta tem tr\u00eas partes importantes:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Status da resposta\nCabe\u00e7alhos\nCorpo da resposta\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">O status indica se deu certo ou se houve algum problema.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Os cabe\u00e7alhos trazem informa\u00e7\u00f5es adicionais, como tipo de conte\u00fado, cache, cookies e seguran\u00e7a.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O corpo \u00e9 o conte\u00fado principal da resposta. Pode ser HTML, JSON, texto, imagem ou outro formato.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"6_O_que_sao_status_codes\"><\/span>6. O que s\u00e3o status codes?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Status codes s\u00e3o c\u00f3digos que indicam o resultado de uma requisi\u00e7\u00e3o HTTP.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Eles ajudam o navegador, o frontend, o backend e o desenvolvedor a entenderem o que aconteceu.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Veja alguns exemplos comuns:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>C\u00f3digo<\/th><th>Significado<\/th><th>Explica\u00e7\u00e3o simples<\/th><\/tr><\/thead><tbody><tr><td>200<\/td><td>OK<\/td><td>A requisi\u00e7\u00e3o deu certo<\/td><\/tr><tr><td>201<\/td><td>Created<\/td><td>Algo foi criado com sucesso<\/td><\/tr><tr><td>301<\/td><td>Moved Permanently<\/td><td>O endere\u00e7o mudou permanentemente<\/td><\/tr><tr><td>302<\/td><td>Found<\/td><td>O endere\u00e7o foi redirecionado temporariamente<\/td><\/tr><tr><td>400<\/td><td>Bad Request<\/td><td>A requisi\u00e7\u00e3o veio com erro<\/td><\/tr><tr><td>401<\/td><td>Unauthorized<\/td><td>Falta autentica\u00e7\u00e3o<\/td><\/tr><tr><td>403<\/td><td>Forbidden<\/td><td>O usu\u00e1rio n\u00e3o tem permiss\u00e3o<\/td><\/tr><tr><td>404<\/td><td>Not Found<\/td><td>O recurso n\u00e3o foi encontrado<\/td><\/tr><tr><td>500<\/td><td>Internal Server Error<\/td><td>Ocorreu erro no servidor<\/td><\/tr><tr><td>503<\/td><td>Service Unavailable<\/td><td>O servi\u00e7o est\u00e1 indispon\u00edvel<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Esses c\u00f3digos aparecem o tempo todo em aplica\u00e7\u00f5es reais.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Quando uma p\u00e1gina n\u00e3o existe, normalmente aparece um erro 404.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Quando um usu\u00e1rio tenta acessar uma \u00e1rea protegida sem estar logado, pode aparecer um erro 401.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Quando o usu\u00e1rio est\u00e1 logado, mas n\u00e3o tem permiss\u00e3o para acessar determinada \u00e1rea, pode aparecer 403.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Quando a aplica\u00e7\u00e3o quebra no servidor, pode aparecer 500.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Entender status codes ajuda muito na hora de debugar problemas.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"7_O_que_sao_metodos_HTTP\"><\/span>7. O que s\u00e3o m\u00e9todos HTTP?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Os m\u00e9todos HTTP indicam a inten\u00e7\u00e3o da requisi\u00e7\u00e3o.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Os mais usados em APIs e aplica\u00e7\u00f5es web s\u00e3o:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>GET\nPOST\nPUT\nPATCH\nDELETE\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Cada um tem um papel.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"GET\"><\/span>GET<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">O m\u00e9todo GET \u00e9 usado para buscar informa\u00e7\u00f5es.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>GET \/produtos\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Significa:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Servidor, me entregue a lista de produtos.\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Outro exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>GET \/produtos\/10\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Significa:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Servidor, me entregue os dados do produto 10.\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">O GET n\u00e3o deve ser usado para criar, alterar ou remover dados. Ele deve ser usado para consulta.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"POST\"><\/span>POST<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">O m\u00e9todo POST \u00e9 usado para criar algo novo ou enviar dados para processamento.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>POST \/produtos\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Significa:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Servidor, cadastre este novo produto.\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">O corpo da requisi\u00e7\u00e3o poderia ser:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n  \"nome\": \"Notebook\",\n  \"preco\": 3500.00\n}\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">O backend recebe esses dados, valida as informa\u00e7\u00f5es e pode gravar o novo produto no banco de dados.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"PUT\"><\/span>PUT<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">O m\u00e9todo PUT \u00e9 usado para substituir ou atualizar um recurso inteiro.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>PUT \/produtos\/10\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Significa:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Servidor, atualize completamente o produto de c\u00f3digo 10.\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">O corpo da requisi\u00e7\u00e3o poderia ser:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n  \"nome\": \"Notebook Gamer\",\n  \"preco\": 5200.00,\n  \"estoque\": 8\n}\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">A ideia do PUT \u00e9 enviar a nova representa\u00e7\u00e3o completa do recurso.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"PATCH\"><\/span>PATCH<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">O m\u00e9todo PATCH \u00e9 usado para alterar apenas parte de um recurso.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>PATCH \/produtos\/10\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Significa:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Servidor, altere apenas alguns campos do produto 10.\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">O corpo poderia ser:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n  \"preco\": 4999.00\n}\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Nesse caso, apenas o pre\u00e7o seria alterado, sem necessidade de enviar todos os dados do produto.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"DELETE\"><\/span>DELETE<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">O m\u00e9todo DELETE \u00e9 usado para remover um recurso.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>DELETE \/produtos\/10\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Significa:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Servidor, remova o produto de c\u00f3digo 10.\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Em sistemas reais, o DELETE pode apagar fisicamente um registro ou apenas marcar como inativo, dependendo da regra de neg\u00f3cio.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"8_O_que_e_frontend\"><\/span>8. O que \u00e9 frontend?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Frontend \u00e9 a parte da aplica\u00e7\u00e3o que o usu\u00e1rio v\u00ea e usa.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u00c9 a interface.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Normalmente envolve:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>HTML\nCSS\nJavaScript\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">O HTML define a estrutura da p\u00e1gina.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O CSS define a apar\u00eancia visual.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O JavaScript adiciona comportamento e intera\u00e7\u00e3o.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Por exemplo, quando voc\u00ea v\u00ea um bot\u00e3o, um menu, um formul\u00e1rio, uma tabela, uma mensagem de erro ou uma tela de login, est\u00e1 olhando para o frontend.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O frontend tamb\u00e9m pode conversar com o backend usando requisi\u00e7\u00f5es HTTP.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Um exemplo simples com JavaScript seria:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>fetch(\"https:\/\/api.meusite.com\/produtos\")\n  .then(resposta =&gt; resposta.json())\n  .then(dados =&gt; console.log(dados));\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Esse c\u00f3digo pede dados ao backend e depois trata a resposta como JSON.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O frontend n\u00e3o deve ser confundido com \u201cdesign bonito\u201d. Ele tamb\u00e9m envolve l\u00f3gica, valida\u00e7\u00e3o, consumo de API, estado da tela, acessibilidade, performance e experi\u00eancia do usu\u00e1rio.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"9_O_que_e_backend\"><\/span>9. O que \u00e9 backend?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Backend \u00e9 a parte da aplica\u00e7\u00e3o que roda no servidor.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ele \u00e9 respons\u00e1vel por receber requisi\u00e7\u00f5es, aplicar regras de neg\u00f3cio, acessar banco de dados e devolver respostas.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Exemplos de tecnologias backend:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Java + Spring Boot\nPHP + Laravel\nPython + Django\nNode.js + Express\nC# + ASP.NET\nRuby + Rails\nGo\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Apesar das diferen\u00e7as de sintaxe, a l\u00f3gica geral \u00e9 muito parecida.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Um backend normalmente faz coisas como:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Receber requisi\u00e7\u00e3o\nValidar dados\nVerificar permiss\u00f5es\nExecutar regra de neg\u00f3cio\nConsultar banco de dados\nSalvar informa\u00e7\u00f5es\nGerar resposta\nRetornar status code correto\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Imagine um sistema de loja.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Quando o usu\u00e1rio tenta comprar um produto, o backend precisa verificar:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>O produto existe?\nH\u00e1 estoque dispon\u00edvel?\nO usu\u00e1rio est\u00e1 logado?\nO pagamento foi aprovado?\nO endere\u00e7o de entrega \u00e9 v\u00e1lido?\nO pedido pode ser criado?\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Essa l\u00f3gica n\u00e3o deve ficar apenas no frontend, porque o frontend pode ser manipulado pelo usu\u00e1rio. As regras importantes precisam estar no backend.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Por isso, em muitos sistemas, o backend \u00e9 considerado o c\u00e9rebro da aplica\u00e7\u00e3o.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"10_O_que_e_banco_de_dados\"><\/span>10. O que \u00e9 banco de dados?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Banco de dados \u00e9 onde o sistema armazena informa\u00e7\u00f5es.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Exemplos de dados que podem ser guardados:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Usu\u00e1rios\nProdutos\nPedidos\nPagamentos\nComent\u00e1rios\nArquivos\nConfigura\u00e7\u00f5es\nPermiss\u00f5es\nHist\u00f3rico de acesso\nLogs\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Existem bancos relacionais, como:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>MySQL\nPostgreSQL\nOracle\nSQL Server\nSQLite\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Tamb\u00e9m existem bancos NoSQL, como:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>MongoDB\nRedis\nDynamoDB\nCassandra\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Um banco relacional costuma organizar dados em tabelas.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Por exemplo, em uma loja virtual, poder\u00edamos ter tabelas como:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>usuarios\nprodutos\npedidos\nitens_pedido\npagamentos\nenderecos\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Cada tabela guarda um tipo de informa\u00e7\u00e3o.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">J\u00e1 bancos NoSQL podem organizar dados de outras formas, como documentos, chave-valor, colunas ou grafos.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Neste come\u00e7o da trilha, o mais importante \u00e9 entender isto:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Sistema sem banco de dados geralmente esquece tudo quando reinicia.\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Se uma aplica\u00e7\u00e3o guarda dados apenas na mem\u00f3ria, esses dados podem desaparecer quando o servidor reinicia. O banco existe justamente para manter as informa\u00e7\u00f5es armazenadas de forma persistente.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"11_O_que_e_JSON\"><\/span>11. O que \u00e9 JSON?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">JSON significa <strong>JavaScript Object Notation<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u00c9 um formato de dados muito usado para comunica\u00e7\u00e3o entre frontend e backend.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Um exemplo de JSON:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n  \"id\": 1,\n  \"nome\": \"Michel\",\n  \"email\": \"michel@email.com\"\n}\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Uma lista em JSON poderia ser assim:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#91;\n  {\n    \"id\": 1,\n    \"titulo\": \"Estudar HTTP\",\n    \"concluida\": false\n  },\n  {\n    \"id\": 2,\n    \"titulo\": \"Criar primeira API\",\n    \"concluida\": true\n  }\n]\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">O JSON \u00e9 popular porque \u00e9 simples de ler, f\u00e1cil de gerar e funciona bem em v\u00e1rias linguagens.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Um backend em Java pode gerar JSON.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Um backend em PHP pode gerar JSON.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Um backend em Python pode gerar JSON.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Um frontend em JavaScript pode receber JSON e transformar esses dados em elementos visuais na tela.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Por isso, JSON virou um dos formatos mais usados em APIs modernas.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"12_O_fluxo_completo_de_uma_aplicacao_web\"><\/span>12. O fluxo completo de uma aplica\u00e7\u00e3o web<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Agora vamos juntar tudo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Imagine uma aplica\u00e7\u00e3o simples de tarefas.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O usu\u00e1rio acessa a tela para ver suas tarefas.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O fluxo completo pode ser:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>1. Usu\u00e1rio acessa a p\u00e1gina\n2. O navegador consulta o DNS\n3. O navegador encontra o servidor\n4. O navegador baixa HTML, CSS e JavaScript\n5. O frontend \u00e9 carregado na tela\n6. O frontend faz uma requisi\u00e7\u00e3o para a API\n7. O backend recebe a requisi\u00e7\u00e3o\n8. O backend verifica quem \u00e9 o usu\u00e1rio\n9. O backend consulta o banco de dados\n10. O banco devolve as tarefas\n11. O backend transforma os dados em JSON\n12. O backend devolve uma resposta HTTP\n13. O frontend recebe o JSON\n14. O frontend monta a lista de tarefas\n15. O usu\u00e1rio v\u00ea as tarefas na tela\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Esse \u00e9 o cora\u00e7\u00e3o de praticamente todo sistema web moderno.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Mesmo sistemas grandes seguem uma l\u00f3gica parecida. O que muda \u00e9 a quantidade de camadas, regras, servi\u00e7os, integra\u00e7\u00f5es e cuidados t\u00e9cnicos envolvidos.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"13_Exemplo_pratico_sistema_de_tarefas\"><\/span>13. Exemplo pr\u00e1tico: sistema de tarefas<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Imagine que o usu\u00e1rio abre uma tela chamada \u201cMinhas tarefas\u201d.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Por tr\u00e1s disso, a conversa poderia ser assim:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Frontend:\n\"Quero listar as tarefas do Michel.\"\n\nBackend:\n\"Vou verificar se o Michel est\u00e1 autenticado.\"\n\nBackend:\n\"Agora vou buscar as tarefas dele no banco.\"\n\nBanco de dados:\n\"Aqui est\u00e3o as tarefas encontradas.\"\n\nBackend:\n\"Vou transformar isso em JSON.\"\n\nFrontend:\n\"Vou exibir essas tarefas na tela.\"\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">A resposta do backend poderia ser:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#91;\n  {\n    \"id\": 1,\n    \"titulo\": \"Estudar HTTP\",\n    \"concluida\": false\n  },\n  {\n    \"id\": 2,\n    \"titulo\": \"Criar primeira API\",\n    \"concluida\": true\n  }\n]\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">O frontend recebe esse JSON e transforma os dados em uma interface:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#91; ] Estudar HTTP\n&#91;x] Criar primeira API\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Perceba que o usu\u00e1rio n\u00e3o v\u00ea o banco de dados, n\u00e3o v\u00ea a query SQL, n\u00e3o v\u00ea o servidor e n\u00e3o v\u00ea o JSON bruto.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ele v\u00ea apenas a tela final.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Mas o desenvolvedor precisa entender todas as partes que fizeram essa tela aparecer.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"14_Exemplo_pratico_fluxo_de_login\"><\/span>14. Exemplo pr\u00e1tico: fluxo de login<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Agora imagine o fluxo de login.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O usu\u00e1rio digita email e senha e clica em \u201cEntrar\u201d.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O fluxo pode ser:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>1. Usu\u00e1rio digita email e senha\n2. Frontend captura os dados do formul\u00e1rio\n3. Frontend envia uma requisi\u00e7\u00e3o POST para o backend\n4. Backend recebe email e senha\n5. Backend valida se os campos foram preenchidos\n6. Backend procura o usu\u00e1rio no banco\n7. Backend verifica se a senha est\u00e1 correta\n8. Backend gera uma resposta de sucesso ou erro\n9. Frontend recebe a resposta\n10. Frontend mostra a pr\u00f3xima tela ou uma mensagem de erro\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">A requisi\u00e7\u00e3o poderia ser:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>POST \/login\nContent-Type: application\/json\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Com o corpo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n  \"email\": \"usuario@email.com\",\n  \"senha\": \"123456\"\n}\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Se os dados estiverem corretos, o backend poderia responder:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>HTTP\/1.1 200 OK\nContent-Type: application\/json\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n  \"mensagem\": \"Login realizado com sucesso\"\n}\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Se a senha estiver errada, poderia responder:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>HTTP\/1.1 401 Unauthorized\nContent-Type: application\/json\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n  \"erro\": \"Email ou senha inv\u00e1lidos\"\n}\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Esse exemplo mostra por que HTTP, backend, banco de dados, JSON e status codes trabalham juntos.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"15_Diferenca_entre_pagina_web_e_API\"><\/span>15. Diferen\u00e7a entre p\u00e1gina web e API<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Um ponto importante para iniciantes \u00e9 entender a diferen\u00e7a entre uma p\u00e1gina web e uma API.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Uma p\u00e1gina web normalmente devolve HTML para ser exibido no navegador.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>GET \/sobre\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Resposta:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;h1&gt;Sobre o site&lt;\/h1&gt;\n&lt;p&gt;Bem-vindo ao nosso projeto.&lt;\/p&gt;\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">J\u00e1 uma API normalmente devolve dados, muitas vezes em JSON.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>GET \/api\/produtos\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Resposta:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#91;\n  {\n    \"id\": 1,\n    \"nome\": \"Mouse\"\n  },\n  {\n    \"id\": 2,\n    \"nome\": \"Teclado\"\n  }\n]\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">A p\u00e1gina \u00e9 feita para o usu\u00e1rio ver.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A API \u00e9 feita para outro sistema, frontend, aplicativo mobile ou servi\u00e7o consumir.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Em muitos sistemas modernos, o frontend \u00e9 separado do backend. O frontend mostra a interface e o backend exp\u00f5e APIs para fornecer os dados.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"16_O_que_e_deploy\"><\/span>16. O que \u00e9 deploy?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Deploy \u00e9 o processo de colocar uma aplica\u00e7\u00e3o no ar.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Quando voc\u00ea desenvolve no seu computador, a aplica\u00e7\u00e3o est\u00e1 em ambiente local. Apenas voc\u00ea consegue acessar.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Quando faz deploy, voc\u00ea envia a aplica\u00e7\u00e3o para um servidor ou plataforma de hospedagem, para que outras pessoas possam usar.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Exemplos de lugares onde uma aplica\u00e7\u00e3o pode ser publicada:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Servidor VPS\nHospedagem compartilhada\nCloud\nDocker\nKubernetes\nVercel\nNetlify\nRender\nRailway\nAWS\nAzure\nGoogle Cloud\nHostGator\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">O deploy faz parte da vida real do desenvolvedor.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">N\u00e3o basta o sistema funcionar no seu computador. Ele precisa funcionar em um ambiente acess\u00edvel, seguro, est\u00e1vel e configurado corretamente.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"17_Onde_entram_seguranca_e_performance\"><\/span>17. Onde entram seguran\u00e7a e performance?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Quando estamos come\u00e7ando, \u00e9 comum pensar apenas no fluxo b\u00e1sico:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>frontend \u2192 backend \u2192 banco\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Mas sistemas reais precisam de mais cuidados.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Na seguran\u00e7a, entram temas como:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>HTTPS\nAutentica\u00e7\u00e3o\nAutoriza\u00e7\u00e3o\nProte\u00e7\u00e3o contra SQL Injection\nProte\u00e7\u00e3o contra XSS\nValida\u00e7\u00e3o de dados\nControle de sess\u00e3o\nTokens\nCookies seguros\nPermiss\u00f5es\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Na performance, entram temas como:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Cache\nCompress\u00e3o\nOtimiza\u00e7\u00e3o de imagens\nConsultas eficientes ao banco\nPagina\u00e7\u00e3o\nCDN\nBalanceamento de carga\n\u00cdndices no banco de dados\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Voc\u00ea n\u00e3o precisa dominar tudo isso na primeira aula.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Mas precisa saber que uma aplica\u00e7\u00e3o real n\u00e3o \u00e9 apenas \u201cuma tela bonita com um banco por tr\u00e1s\u201d. Ela envolve v\u00e1rias camadas de responsabilidade.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"18_Erros_comuns_de_iniciantes\"><\/span>18. Erros comuns de iniciantes<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Ao aprender desenvolvimento web, muitos iniciantes confundem alguns conceitos.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Veja os erros mais comuns.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Achar_que_frontend_e_backend_sao_a_mesma_coisa\"><\/span>Achar que frontend e backend s\u00e3o a mesma coisa<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Frontend \u00e9 a parte visual e interativa que roda no navegador.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Backend \u00e9 a parte que roda no servidor e aplica as regras do sistema.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Eles se comunicam, mas n\u00e3o s\u00e3o a mesma coisa.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Achar_que_banco_de_dados_e_o_backend\"><\/span>Achar que banco de dados \u00e9 o backend<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">O banco de dados guarda informa\u00e7\u00f5es.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O backend usa o banco, mas tamb\u00e9m faz valida\u00e7\u00f5es, regras de neg\u00f3cio, seguran\u00e7a, autentica\u00e7\u00e3o e montagem de respostas.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Achar_que_JSON_e_banco_de_dados\"><\/span>Achar que JSON \u00e9 banco de dados<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">JSON \u00e9 um formato de troca de dados.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ele pode representar informa\u00e7\u00f5es, mas n\u00e3o \u00e9 necessariamente um banco.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Usar_GET_para_tudo\"><\/span>Usar GET para tudo<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">GET deve ser usado para buscar informa\u00e7\u00f5es.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Para criar, atualizar ou remover dados, usamos outros m\u00e9todos, como POST, PUT, PATCH e DELETE.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Ignorar_status_codes\"><\/span>Ignorar status codes<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Status codes ajudam a entender o resultado da requisi\u00e7\u00e3o.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Um bom desenvolvedor n\u00e3o devolve sempre 200 para tudo. Ele usa c\u00f3digos adequados para sucesso, erro de valida\u00e7\u00e3o, falta de autentica\u00e7\u00e3o, recurso n\u00e3o encontrado e erro interno.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Achar_que_funcionar_localmente_e_suficiente\"><\/span>Achar que funcionar localmente \u00e9 suficiente<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Uma aplica\u00e7\u00e3o pode funcionar no computador do desenvolvedor e falhar no servidor.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Por isso, deploy, configura\u00e7\u00e3o, ambiente, vari\u00e1veis, banco, permiss\u00f5es e logs tamb\u00e9m fazem parte do processo.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"19_Conceito-chave_da_licao\"><\/span>19. Conceito-chave da li\u00e7\u00e3o<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Um fullstack de verdade n\u00e3o pensa apenas em c\u00f3digo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ele pensa no caminho completo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Tela\nRequisi\u00e7\u00e3o\nServidor\nBackend\nRegra de neg\u00f3cio\nBanco de dados\nResposta\nStatus code\nSeguran\u00e7a\nDeploy\nManuten\u00e7\u00e3o\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Dominar fullstack n\u00e3o \u00e9 decorar v\u00e1rias linguagens.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u00c9 entender como os sistemas funcionam por baixo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Depois que voc\u00ea entende esse fluxo, aprender Java, PHP, Python, JavaScript, Spring Boot, Laravel, Django, Node.js ou qualquer outra tecnologia fica muito mais f\u00e1cil.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A linguagem muda.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O fluxo principal continua.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"20_Resumo_da_licao\"><\/span>20. Resumo da li\u00e7\u00e3o<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Nesta li\u00e7\u00e3o, voc\u00ea aprendeu que:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Frontend \u00e9 a interface.\nBackend \u00e9 o c\u00e9rebro.\nBanco de dados \u00e9 a mem\u00f3ria.\nHTTP \u00e9 a conversa.\nDNS ajuda a encontrar o servidor.\nJSON \u00e9 um formato comum de mensagem.\nStatus code informa o resultado da requisi\u00e7\u00e3o.\nDeploy \u00e9 colocar a aplica\u00e7\u00e3o no ar.\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Tamb\u00e9m aprendeu que uma aplica\u00e7\u00e3o web funciona como uma sequ\u00eancia de comunica\u00e7\u00e3o:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Usu\u00e1rio acessa o site\n\u2193\nNavegador envia requisi\u00e7\u00e3o\n\u2193\nServidor recebe o pedido\n\u2193\nBackend processa a regra\n\u2193\nBanco de dados pode ser consultado\n\u2193\nBackend devolve resposta\n\u2193\nFrontend exibe o resultado\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Esse \u00e9 um dos fundamentos mais importantes para quem quer aprender desenvolvimento web de verdade.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Exercicio_pratico\"><\/span>Exerc\u00edcio pr\u00e1tico<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Crie um arquivo chamado:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>licao-2-como-a-web-funciona.md\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Dentro dele, responda com suas pr\u00f3prias palavras:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>1. O que acontece quando voc\u00ea acessa um site?\n2. O que \u00e9 DNS?\n3. O que \u00e9 HTTP?\n4. Qual a diferen\u00e7a entre HTTP e HTTPS?\n5. O que \u00e9 frontend?\n6. O que \u00e9 backend?\n7. O que \u00e9 banco de dados?\n8. O que \u00e9 JSON?\n9. Qual a diferen\u00e7a entre GET e POST?\n10. Para que servem os status codes?\n11. O que acontece em um fluxo de login?\n12. Por que um fullstack precisa entender o caminho completo?\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Mini_desafio\"><\/span>Mini desafio<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Explique este fluxo como se estivesse ensinando uma pessoa totalmente leiga:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Usu\u00e1rio clica em \"Entrar\"\n\u2193\nFrontend envia email e senha\n\u2193\nBackend recebe os dados\n\u2193\nBackend valida os campos\n\u2193\nBackend consulta o banco de dados\n\u2193\nBackend verifica se a senha est\u00e1 correta\n\u2193\nBackend devolve sucesso ou erro\n\u2193\nFrontend mostra a pr\u00f3xima tela ou uma mensagem de erro\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Depois, tente responder:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Onde entra o HTTP?\nOnde entra o JSON?\nOnde entra o banco de dados?\nOnde entra o status code?\nOnde entra o backend?\nOnde entra o frontend?\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Se voc\u00ea conseguir explicar esse fluxo com clareza, j\u00e1 deu um passo enorme para entender desenvolvimento web.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conclusao\"><\/span>Conclus\u00e3o<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Entender como a web funciona \u00e9 uma das bases mais importantes para qualquer desenvolvedor.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Antes de aprender frameworks, bibliotecas, arquitetura avan\u00e7ada ou microsservi\u00e7os, voc\u00ea precisa compreender o caminho b\u00e1sico de uma aplica\u00e7\u00e3o: o usu\u00e1rio acessa uma interface, o navegador envia uma requisi\u00e7\u00e3o, o servidor processa o pedido, o backend aplica regras, o banco pode ser consultado e uma resposta volta para a tela.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Esse fluxo aparece em sites simples, sistemas corporativos, lojas virtuais, redes sociais, APIs, aplicativos mobile e plataformas modernas.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A partir de agora, quando voc\u00ea acessar um site, tente imaginar o que est\u00e1 acontecendo por tr\u00e1s. Pense no navegador, no DNS, no servidor, no backend, no banco, na resposta, no JSON e no status code.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Quando esse caminho fica claro, a programa\u00e7\u00e3o deixa de parecer m\u00e1gica e come\u00e7a a fazer sentido.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/go.hotmart.com\/X106090918M\" target=\"_blank\" rel=\"noreferrer noopener\">Curso de Programa\u00e7\u00e3o Fullstack &#8211; DevMedia<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introdu\u00e7\u00e3o Todo site parece simples para quem est\u00e1 usando. Voc\u00ea digita um endere\u00e7o no navegador, aperta Enter e a p\u00e1gina aparece. Quando clica em um bot\u00e3o, alguma coisa acontece. Quando faz login, o sistema confirma seus dados. Quando compra um produto, o pedido \u00e9 registrado. Quando abre uma rede social, novas publica\u00e7\u00f5es aparecem na tela. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1411,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[529],"tags":[],"class_list":["post-1410","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-fullstack"],"_links":{"self":[{"href":"https:\/\/micheladrianomedeiros.com.br\/blog\/wp-json\/wp\/v2\/posts\/1410","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/micheladrianomedeiros.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/micheladrianomedeiros.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/micheladrianomedeiros.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/micheladrianomedeiros.com.br\/blog\/wp-json\/wp\/v2\/comments?post=1410"}],"version-history":[{"count":1,"href":"https:\/\/micheladrianomedeiros.com.br\/blog\/wp-json\/wp\/v2\/posts\/1410\/revisions"}],"predecessor-version":[{"id":1412,"href":"https:\/\/micheladrianomedeiros.com.br\/blog\/wp-json\/wp\/v2\/posts\/1410\/revisions\/1412"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/micheladrianomedeiros.com.br\/blog\/wp-json\/wp\/v2\/media\/1411"}],"wp:attachment":[{"href":"https:\/\/micheladrianomedeiros.com.br\/blog\/wp-json\/wp\/v2\/media?parent=1410"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/micheladrianomedeiros.com.br\/blog\/wp-json\/wp\/v2\/categories?post=1410"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/micheladrianomedeiros.com.br\/blog\/wp-json\/wp\/v2\/tags?post=1410"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}