Neste material, vamos revisar os principais conceitos sobre a Internet e o Protocolo HTTP
A Internet é uma rede global de computadores. Imagine um sistema postal que entrega e que recebe pacotes em velocidades extremamente rápidas.
Este sistema utiliza os Protocolos TCP/IP e HTTP para se comunicar. Qualquer indivíduo com permissão é capaz de obter informações de outro computador.
Um protocolo é um sistema de regras que define como o dado é trafegado dentro ou entre computadores. Comunicações entre dispositivos requer que estes concordem com o formato do dado que estiver sendo trafegado. O conjunto de regras que define esse formato é chamado de protocolo.
O TCP/IP é um conjunto de protocolos de comunicação. O nome vem de dois protocolos TCP (Transmission Control Protocol) e o IP (Internet Protocol). Ele tem por objetivo padronizar todas as comunicações de rede, principalmente as comunicações na web. O TCP/IP é o Protocolo que define a Internet.
O Modelo TCP/IP
O modelo TCP/IP possui 4 camadas:
Nesta camada encontra-se todos os protocolos de serviço que efetuam a comunicação direta com o software para identificar o tipo de Requisição que está sendo realizada. O protocolo mais popular é o HTTP.
Esta camada é Responsável pela comunicação entre hosts (Clientes e Servidores) envolvidos. Ela tem como função principal verificar se o pacote de dados alcançou seu destino e se os dados nele contidos chegaram de maneira integra. O protocolo mais popular é o TCP.
Pacote é o formato no qual os dados são enviados do servidor para o cliente e vice e versa. Basicamente, quando os dados são enviados pela web, eles são enviados como milhares de pequenos blocos, para agilizar e simplificar o tráfico de dados pela Internet.
Em azul temos o grande bloco de dados e logo abaixo, na cor amarela, o bloco dividido em pacotes menores que serão identificados e enviados para o seu destino
A camada de transporte utiliza portas lógicas para garantir que a aplicação que iniciou a conversação encontrará no seu destino a aplicação desejada. Essas portas lógicas são canais virtuais, geralmente definidos pelo Sistema Operacional, que se abrem conforme o tipo de aplicação que se está executando. O HTTP utiliza as portas 4000 (Localmente, ou seja, no seu Computador) e a porta 80 (Internet).
No Exemplo acima, o pacote que chegou na Camada de Aplicação contém a informação Porta: 4000. Observe que neste cenário o Nest está utilizando a porta 4000, logo o TCP irá redirecionar o pacote para a nossa aplicação Nest. Se a Porta, por exemplo, estivesse com o valor 3306 o TCP redirecionaria para o MySQL.
Nesta camada encontramos os endereços IP de origem e destino de uma conexão. O IP também é conhecido como o endereço lógico (pode ser alterado).
Nesta camada encontramos a conexão física da rede pela qual o pacote trafega. Cada equipamento conectado na rede carrega consigo a identidade do hardware que deu origem ao envio do pacote, armazenando o seu endereço MAC (Media Access Control). O MAC também é conhecido como Endereço físico (não pode ser alterado).
Como funciona o Protocolo TCP/IP?
O HTTP (Hypertext Transfer Protocol / Protocolo de Transferência de Hipertexto) é um protocolo que permite a obtenção de recursos, como documentos HTML. É a base de qualquer troca de dados na Web e um protocolo cliente-servidor, o que significa que as requisições são iniciadas pelo destinatário, geralmente um navegador da Web. Um documento completo é reconstruído a partir dos diferentes sub documentos obtidos, como por exemplo texto, descrição do layout, imagens, vídeos, scripts e muito mais.
Página WEB composta por vários elementos
O HTTP também possui uma outra versão chamada de HTTPS ( Hyper Text Transfer Protocol Secure / Protocolo de Transferência de Hipertexto Seguro), que se trata de uma versão do protocolo criptografado, geralmente utilizado em transações bancárias. Ao utilizar o protocolo HTTPS, um cadeado 
Os Clientes acessando o servidor via Internet
O Cliente é qualquer ferramenta que age em nome do usuário. Essa função é predominantemente realizada pelo navegador Web, salvo algumas poucas exceções, são programas usados por pessoas Desenvolvedoras Web para testar as suas aplicações (Exemplo: Insomnia).
O servidor é a "máquina" que serve o documento requisitado pelo usuário através do endereço www. Um servidor se apresenta virtualmente apenas como uma máquina, porém ele pode ser uma coleção de servidores dividindo a carga ou um programa complexo que acessa outros servidores gerando toda ou parte do documento solicitado.
O HTTP funciona como um protocolo Request-Response (Solicitação-Resposta), entre um Cliente e um Servidor.
Fluxo de Funcionamento HTTP
Exemplo: Um cliente (Navegador da Internet) envia uma Request HTTP ao servidor e o servidor retorna uma Response ao cliente.
Para o cliente se comunicar com um servidor, ele realiza os seguintes passos:
- Abre uma conexão TCP, que será usada para enviar uma Requisição, ou várias, e receber uma resposta.
- Envia uma mensagem HTTP (Request).
- Lê a resposta do servidor (Response).
- Fecha ou reutiliza a conexão para requisições futuras.
Request Message Header HTTP
As requisições consistem dos seguintes elementos:
- Um método HTTP, geralmente é um verbo como GET, POST, DELETE e PUT.
- O caminho do recurso (Path), ou seja a URL do recurso sem os elementos que são de contexto, como o protocolo (http://).
- versão do protocolo HTTP.
- Cabeçalhos opcionais que contém informações adicionais para os servidores.
- Body (corpo) para alguns métodos como o POST e o PUT, que enviam dados para o recurso solicitado dentro da Requisição.
Request HTTP
O protocolo HTTP define um conjunto de métodos de Requisição responsáveis por indicar a ação a ser executada para um dado recurso. Estes métodos são referenciados como Verbos HTTP.
Principais Verbos HTTP
| Verbo | Descrição |
| GET | O método GET solicita a representação de um recurso específico. Requisições utilizando o método GET devem retornar apenas dados. Exemplo: Consultar um registro no Banco de Dados. |
| POST | O método POST é utilizado para submeter uma entidade a um recurso específico para o servidor. Exemplo: Inserir um novo registro no Banco de Dados. |
| PUT | O método PUT substitui todas as atuais representações do recurso de destino pela carga de dados da Requisição. Exemplo: Atualizar os atributos de um registro no Banco de Dados. |
| DELETE | O método DELETE remove um recurso específico. Exemplo: Apagar um registro no Banco de Dados. |
Quando acessamos um determinado site a partir do nosso computador, informamos para o navegador o endereço do site, também conhecido como URL (Uniform Resource Locator). O Navegador da Internet se encarrega de descobrir qual o endereço do servidor que armazena o site.
A comunicação com uma aplicação WEB é realizada através de URL's, que são enviadas através da requisições, contendo principalmente o caminho do Recurso (também chamados de endpoints) e os Parâmetros. Veja os Exemplos abaixo:
Requisição Local (seu computador)
Requisição Remota (servidor na Nuvem)
| Item | Descrição |
|---|---|
| Protocolo | Informa ao navegador qual o protocolo de comunicação do endereço (http ou https). Observe que na nuvem (Heroku), utiliza-se o protocolo https, enquanto localmente utiliza-se o protocolo http. |
| Domínio | É o nome (identificador) do site. Este item é Obrigatório. Observe que localmente o seu computador é identificado como localhost, enquanto na Nuvem o endereço vai depender do nome da sua aplicação. |
| Porta | Identifica a porta em que o site está disponível no servidor. Quando não é informada o Navegador preenche internamente com a porta padrão de acordo com o protocolo utilizado. Observe que localmente, a porta deve ser informada e porta padrão do Servidor WEB local é a 4000, enquanto na Nuvem, mesmo sem informar o numero da porta, por se tratar do protocolo https utiliza-se a porta 443. |
| Recurso | Identifica qual o recurso o navegador vai buscar no servidor, quando não é informado pelo usuário o próprio navegador preenche com uma "/", que significa página inicial do site. No contexto de uma aplicação WEB, um recurso é um CRUD (Create, Read, Update e Delete) completo de uma tabela no Banco de dados, desenvolvido em uma Linguagem Backend. No exemplo acima, localmente está sendo procurado o recurso Postagens enquanto na Nuvem está sendo procurado o recurso Temas. |
| Parâmetros | Utilizado para enviar dados para a aplicação através da URL. No exemplo Local, 12345 é o valor do id (identificador único) de uma Postagem que está sendo procurada. No exemplo na Nuvem, java é a palavra que está sendo procurada no campo (atributo) descricao, de um Tema. |
 |
ATENÇÃO: Na Requisição http, no item Path, não é enviado o endereço completo (URL). É enviado apenas o Recurso e os Parâmetros da URL. |
|---|
|
IMPORTANTE: Os conceitos apresentados na formação da URL, em especial Recurso e Parâmetros serão estudados com mais detalhes no decorrer do Bloco 02. O mais importante neste momento é compreender quais são as partes que compõem a URL. |
|---|
A Response (resposta) é a resposta que o servidor envia ao cliente depois de processar a Requisição. Essa resposta pode conter os dados que realmente o cliente esperava receber ou uma resposta informando que alguma coisa deu errado.
Response HTTP
O protocolo HTTP também define um conjunto de Códigos de Status de respostas responsáveis por indicar se a ação executada para um dado recurso foi executada corretamente ou não. Estes métodos são comumente referenciados como HTTP Status Code. As respostas são agrupadas em cinco classes:
- Respostas de informação (
100-199), - Respostas de sucesso (
200-299), - Redirecionamentos (
300-399) - Erros do cliente (
400-499) - Erros do servidor (
500-599).
| Código | Resposta | Descrição |
| 200 | OK | Estas Requisição foi bem sucedida. O significado do sucesso varia de acordo com o método HTTP. |
| 201 | CREATED | A Requisição foi bem sucedida e um novo recurso foi criado como resultado. Esta é uma típica resposta enviada após uma Requisição POST. |
| 204 | NO CONTENT | Não há conteúdo para enviar para esta solicitação, mas os cabeçalhos podem ser úteis. O user-agent pode atualizar seus cabeçalhos em cache para este recurso com os novos. Essa resposta é muito comum após uma Requisição DELETE. |
| Código | Resposta | Descrição |
| 400 | BAD REQUEST | Essa resposta significa que o servidor não entendeu a Requisição pois está com uma sintaxe inválida. |
| 401 | UNAUTHORIZED | Embora o padrão HTTP especifique "unauthorized", semanticamente, essa resposta significa "unauthenticated". Ou seja, o cliente deve se autenticar para obter a resposta solicitada. Esta resposta é muito comum quando habilitamos a Segurança na API (Login, Senha e Token). |
| 403 | FORBIDDEN | O cliente não tem direitos de acesso ao conteúdo portanto o servidor está rejeitando dar a resposta. Diferente do código 401, aqui a identidade do cliente é conhecida. |
| 404 | NOT FOUND | O servidor não pode encontrar o recurso solicitado. Este código de resposta acontece com frequência na web. |
| 405 | METHOD NOT ALLOWED | O servidor não pode encontrar o método solicitado. |
| Código | Resposta | Descrição |
| 500 | INTERNAL SERVER ERROR | O servidor encontrou uma situação com a qual não sabe lidar. |
| 501 | NOT IMPLEMETED | O método da Requisição não é suportado pelo servidor e não pode ser manipulado. |
| 502 | BAD GATEWAY | O servidor, ao trabalhar como um gateway a fim de obter uma resposta necessária para manipular a Requisição, obteve uma resposta inválida. |
| 503 | SERVICE UNAVAILABLE | O servidor não está pronto para a Requisição. Causas comuns são um servidor em manutenção ou sobrecarregado. |
Um Web Site é uma coleção de páginas da web e conteúdo relacionado que é identificado por um nome de domínio comum e publicado em pelo menos um servidor da web.
Um aplicativo da web é um software aplicativo executado em um servidor da web, ao contrário dos programas de software baseados em computador que são executados localmente no sistema operacional (SO) do dispositivo.
Apesar de mais abstrato, o conceito de Back-end também é simples de entender: os dados publicados em uma rede social, como fotos e vídeos, por meio da interface do usuário precisam ser armazenados em algum local para poderem ser acessados posteriormente.
Esse envio não é feito diretamente do front-end para o banco de dados da rede social. Ao invés disso, existe uma parte da aplicação que é responsável por receber essas informações, fazer operações específicas — postagens, filtros, exclusões, verificações de segurança e validações e somente após isso, armazenar no banco de dados. Esse é o back-end.
As atribuições de um desenvolvedor back-end não incluem a criação de páginas bonitas ou responsivas, como acontece com profissionais front-end. Em vez disso, eles são responsáveis por implementar arquiteturas robustas, que se comuniquem com o banco de dados (MySQL) e que garantam a segurança dos dados enviados pelo usuário. Para isso utiliza linguagens como o JavaScript/TypeScript e o Framework Nest.
O Front-end é, de forma sucinta, toda parte visual de um site, a parte com a qual o usuário interage diretamente. O profissional responsável por trabalhar nessa área de um projeto desenvolve o código para a interface gráfica, normalmente por meio de linguagens.
Um desenvolvedor front-end normalmente trabalha criando toda a parte visual dos sites por meio de linguagens de marcação(HTML), estilização (CSS) e programação (JavaScript e TypeScript), além de bibliotecas (Bootstrap e React) e frameworks como o Angular.
No exemplo acima, temos uma visão geral da integração entre o Front-end e do Back-end da aplicação.
Full Stack está relacionado a pessoa desenvolvedora. Espera-se de uma pessoa desenvolvedora Full Stack que ela seja capacitada para lidar, ao mesmo tempo, com o Front-end e o Back-end de uma aplicação, mesmo que os dois lados utilizem tecnologias e linguagens diferentes.
