Técnico em Informática

Integrado ao Ensino Médio

LINGUAGEM DE
PROGRAMAÇÃO WEB II

2º ano
Aula 08

2024
O QUE É UMA API?
Comparando.................
O QUE É UMA API?
O QUE É UMA API?
Uma API (Application Programming Interface), ou Interface de Programação de Aplicações, é um
conjunto de regras e definições que permite que diferentes softwares se comuniquem entre si. Essa
comunicação ocorre por meio de solicitações e respostas, facilitando a integração de sistemas e o
compartilhamento de dados.
INTRODUÇÃO A CHAMADAS DE API

Uma chamada de API refere-se ao processo de um software solicitando ou enviando dados para
outro software por meio de uma Interface de Programação de Aplicações (API).

Arquitetura Cliente - Servidor

Tipos de Chamadas:
GET: Obter dados existentes.
POST: Enviar dados para serem processados.
PUT: Atualizar dados existentes.
DELETE: Excluir dados.
INTRODUÇÃO A CHAMADAS DE API
• Solicitação (Request):
Um aplicativo faz uma solicitação a uma API, indicando a operação desejada (GET, POST, PUT, DELETE) e
incluindo quaisquer parâmetros necessários.
• Processamento na API:
A API recebe a solicitação, processa-a conforme as regras definidas e executa a operação correspondente.
• Resposta (Response):
Após o processamento, a API retorna uma resposta ao aplicativo solicitante, geralmente contendo dados
solicitados ou confirmando o sucesso da operação.
O QUE É JSON?
JSON, ou JavaScript Object Notation, é um
formato de intercâmbio de dados leves e
de fácil leitura. Ele é comumente utilizado
para representar estruturas de dados
organizadas na forma de objetos e arrays.
PRINCIPAIS CARACTERÍSTICAS

Sintaxe Simples: Utiliza uma sintaxe simples e legível por humanos, facilitando a compreensão e
criação de dados.

Estrutura Baseada em Pares Chave-Valor: Os dados são organizados na

forma de pares chave-valor, permitindo a representação de
informações estruturadas.

Suporte a Diferentes Tipos de Dados: Permite representar strings, números, objetos, arrays,
booleanos, e valores nulos.

Independente de Linguagem: Pode ser utilizado em diversas linguagens de programação, não se

limitando ao JavaScript.
JSON EM CHAMADAS DE API
Quando falamos em transmitir dados entre um cliente e uma API, o formato JSON (JavaScript
Object Notation) se destaca. Essa notação oferece uma estrutura leve e fácil de entender para
representar informações e proporciona uma estrutura padronizada e versátil para a troca de dados,
facilitando a integração entre sistemas diversos.

Entendendo o Fluxo:

• Pedido de Informações: O cliente solicita dados específicos à API.

• Resposta Estruturada: A API processa a solicitação e retorna os dados em formato JSON.

• Interpretação no Cliente: O cliente, seja uma aplicação web ou dispositivo móvel, interpreta e
manipula os dados conforme necessário.
JSON EM CHAMADAS DE API
Entendendo o Fluxo:
• Pedido de Informações: O cliente solicita dados específicos à API.
• Resposta Estruturada: A API processa a solicitação e retorna os dados em formato JSON.
• Interpretação no Cliente: O cliente, seja uma aplicação web ou dispositivo móvel, interpreta e manipula os dados conforme
necessário.
FETCH API EM JAVASCRIPT

A Fetch API é uma interface moderna e poderosa fornecida pelo JavaScript para realizar
requisições HTTP de forma assíncrona. Ela simplifica o processo de comunicação com servidores
(APIs), facilitando a obtenção e o envio de dados.
FETCH API EM JAVASCRIPT

Esse trecho de código em JavaScript utiliza a função fetch para fazer uma requisição HTTP a uma URL,
e então lida com a resposta da seguinte forma:
1.fetch(url): Inicia uma requisição para o endereço especificado pela variável url.

2.Primeiro .then((response) => response.json()): Quando a resposta chega, o código tenta convertê-la para o
formato JSON, assumindo que a resposta esteja nesse formato.
3.Segundo .then((data) => console.log(data)): Após a conversão para JSON, os dados resultantes são
exibidos no console do navegador.
4..catch((error) => console.error("Erro:", error)): Caso ocorra algum erro durante a requisição ou
processamento, ele será capturado e exibido no console com a mensagem "Erro:" seguida do erro específico.
MANIPULAÇÃO DE DADOS JSON EM JAVASCRIPT
- Uso do método JSON.parse() para converter uma string JSON em um objeto JavaScript.
- Uso do método JSON.stringify() para converter um objeto JavaScript em uma string JSON.
- Uso do método json() através da interface Response para converter JSON em um objeto JavaScript.
MANIPULAÇÃO DE DADOS JSON EM JAVASCRIPT
Explicando o trecho de código da página anterior:

Esse trecho de código em JavaScript utiliza a função fetch para fazer uma requisição HTTP a uma URL,
e então lida com a resposta da seguinte forma:
1. fetch(url): Inicia uma requisição para o endereço especificado pela variável url.

2. Primeiro .then((response) => response.json()): Quando a resposta chega, o código tenta convertê-
la para o formato JSON, assumindo que a resposta esteja nesse formato.

3. Segundo .then((data) => console.log(data)): Após a conversão para JSON, os dados resultantes são
exibidos no console do navegador.

4. .catch((error) => console.error("Erro:", error)): Caso ocorra algum erro durante a requisição ou
processamento, ele será capturado e exibido no console com a mensagem "Erro:" seguida do erro
específico.

Em resumo, o código faz uma requisição para uma URL, tenta converter a resposta para JSON, exibe
os dados no console se tudo der certo, e exibe uma mensagem de erro caso algo dê errado.
EXERCÍCIOS
EXERCÍCIO DE FIXAÇÃO
EXERCÍCIO 1: Explique o que é uma API e qual a sua função na integração de sistemas. Dê um
exemplo de como uma API pode ser utilizada em uma aplicação do dia a dia.

EXERCÍCIO 2: Liste e descreva os principais métodos de chamada de uma API (GET, POST, PUT,
DELETE). Explique em quais situações cada um deles seria usado.

EXERCÍCIO 3: Considerando o código abaixo, explique o que ele faz.

EXERCÍCIO DE FIXAÇÃO
EXERCÍCIO 4.: Faça uma chamada à API "https://jsonplaceholder.typicode.com/posts/1" usando
fetch() e exiba o título do post retornado na tela. Vide saída esperada abaixo.
EXERCÍCIO DE FIXAÇÃO
EXERCÍCIO 5..: Crie um objeto JavaScript que represente um livro com propriedades como
"titulo", "autor" e "anoPublicacao“ (receba esses dados por formulário). Em seguida, converta
esse objeto para uma string JSON e exiba na tela.
Vide saída esperada abaixo.
EXERCÍCIO DE FIXAÇÃO
EXERCÍCIO 1:
Resposta - Uma API (Application Programming Interface) é uma interface que define regras e
métodos para que diferentes sistemas de software possam se comunicar entre si. Ela permite
que um sistema acesse funcionalidades ou dados de outro sistema de forma segura e
padronizada.

EXERCÍCIO 2:
Resposta:
• GET: Usado para obter dados de um servidor. Exemplo: Consultar detalhes de um produto.
• POST: Usado para enviar novos dados ao servidor. Exemplo: Cadastrar um novo usuário.
• PUT: Usado para atualizar dados existentes no servidor. Exemplo: Atualizar as informações de
um usuário.
• DELETE: Usado para remover dados do servidor. Exemplo: Excluir uma conta de usuário.

Cada método tem uma função específica para organizar a comunicação entre cliente e servidor.
EXERCÍCIO DE FIXAÇÃO
EXERCÍCIO 3:
Resposta: Este código faz uma requisição GET para a URL "https://api.exemplo.com/dados".
1. fetch: Inicia a requisição para o servidor.
2. then(response => response.json()): Quando a resposta chega, o código tenta convertê-la para
JSON.
3. then(data => console.log(data)): Exibe os dados no console, após a conversão.
4. catch(error => console.error("Erro:", error)): Caso haja erro na requisição, ele será exibido no
console com a mensagem "Erro:".

Explicação: Este código tenta obter dados de uma API e exibi-los no console. Se a requisição
falhar, um erro será mostrado.
EXERCÍCIO DE FIXAÇÃO
EXERCÍCIO 4: Faça uma chamada à API "https://jsonplaceholder.typicode.com/posts/1" usando
fetch() e exiba o título do post retornado na tela. Vide saída esperada abaixo.
EXERCÍCIO DE FIXAÇÃO
EXERCÍCIO 4: Faça uma chamada à API "https://jsonplaceholder.typicode.com/posts/1" usando
fetch() e exiba o título do post retornado na tela. Vide saída esperada abaixo.
Explicando o código do slide anterior:

Função JavaScript realizarRequisicao()

Esta função é responsável por fazer uma requisição HTTP para a API e exibir o resultado no div de resultado.

1. const resultadoDiv = document.getElementById("resultado");:

• Obtém uma referência ao elemento div com o ID "resultado", onde o resultado da requisição será exibido.

2. resultadoDiv.innerHTML = "Carregando...";:
• Define o texto do div para "Carregando..." para informar ao usuário que a requisição está em andamento.

3. fetch("https://jsonplaceholder.typicode.com/posts/1"):
• Inicia uma requisição HTTP GET para a URL especificada, que é um endpoint de teste que retorna dados
sobre um post específico.

4. .then((response) => response.json()):

• Quando a resposta chega, o código tenta convertê-la para JSON. Isso significa que a resposta será
transformada em um objeto JavaScript.
EXERCÍCIO DE FIXAÇÃO
EXERCÍCIO 4: Faça uma chamada à API "https://jsonplaceholder.typicode.com/posts/1" usando
fetch() e exiba o título do post retornado na tela. Vide saída esperada abaixo.

Explicando o código do slide anterior:

5. .then((data) => {...}):

• Quando os dados são convertidos para JSON, o código insere o título do post no div de resultado.
• resultadoDiv.innerHTML = <strong>Título:</strong> ${data.title};: Exibe o título do post no div com a
palavra "Título:" em negrito.

6. .catch((error) => {...}):

• Se houver um erro na requisição, ele será capturado e exibido.resultadoDiv.innerHTML = <strong>Erro ao
realizar a requisição:</strong> ${error};:
• Exibe uma mensagem de erro no div, informando que houve um problema ao realizar a requisição.
EXERCÍCIO DE FIXAÇÃO
EXERCÍCIO 5..: Crie um objeto JavaScript que represente um livro com propriedades como
"titulo", "autor" e "anoPublicacao“ (receba esses dados por formulário). Em seguida, converta
esse objeto para uma string JSON e exiba na tela.
EXERCÍCIO DE FIXAÇÃO
EXERCÍCIO 5..: Crie um objeto JavaScript que represente um livro com propriedades como
"titulo", "autor" e "anoPublicacao“ (receba esses dados por formulário). Em seguida, converta
esse objeto para uma string JSON e exiba na tela.
EXERCÍCIO DE FIXAÇÃO
EXERCÍCIO 5..:

Explicando do trecho com JS código do slide anterior:

Função Principal
1. document.getElementById("meuFormulario").addEventListener("submit", (event) => {...}):
• Seleciona o formulário HTML com o ID "meuFormulario" e adiciona um evento "submit" a ele.
• Quando o formulário é enviado (submit), a função é executada.

2. event.preventDefault();:
• Impede o comportamento padrão de envio do formulário, ou seja, a página não será recarregada. Isso é útil
para processar os dados usando JavaScript sem necessidade de recarregar a página.

Captura e Conversão dos Dados

3. Criação do Objeto livro:
• Um objeto livro é criado para armazenar os dados do formulário.
• titulo: Obtém o valor do campo de entrada com o ID "titulo".
• autor: Obtém o valor do campo de entrada com o ID "autor".
• anoPublicacao: Obtém o valor do campo de entrada com o ID "anoPublicacao" e o converte para um número
com Number(...).
EXERCÍCIO DE FIXAÇÃO
EXERCÍCIO 5..:

Explicando do trecho com JS código do slide anterior:

Exibição do JSON Gerado

4. Seleciona o Elemento para Exibir o Resultado:

• const resultadoDiv = document.getElementById("resultado");: Seleciona o elemento div com o ID "resultado"
onde o JSON será exibido.

5. Conversão para JSON:

• const jsonLivro = JSON.stringify(livro);: Converte o objeto livro em uma string JSON usando JSON.stringify.

6. Exibição do JSON na Página:

• resultadoDiv.innerHTML = <strong>JSON Resultante:</strong> ${jsonLivro};: Define o conteúdo do div
resultado para mostrar o JSON resultante em uma string, precedido pela mensagem "JSON Resultante:" em
negrito.
EXERCÍCIO DE FIXAÇÃO
EXERCÍCIO 5..:

Explicando do trecho com JS código do slide anterior:

Resumo
Em resumo, o código:
1. Captura os dados de um formulário (titulo, autor, anoPublicacao) ao ser submetido.
2. Converte esses dados em um formato JSON.
3. Exibe o JSON resultante na página, sem recarregar o conteúdo.

Este código é útil para simular o processamento de dados de um formulário e convertê-los em JSON, o que é uma
prática comum ao enviar dados para uma API ou servidor.
CSS – 1ª Parte do CSS 2ª Parte do CSS 3ª Parte do CSS
Arquivo body { input { select {
separado font-family: Arial, sans-serif; width: 200px; width: 214px;
display: flex; padding: 5px; height: 29px;
align-items: center; margin-bottom: 10px; padding: 5px;
justify-content: center; } margin-bottom: 10px;
min-height: 100vh; font-size: 16px;
margin: 0; button { border-width: 1px;
} background-color: #3498db; border-color: #575757;
color: white; border-radius: 3px;
.formulario-container { padding: 10px 20px; background-color: #fff;
text-align: center; font-size: 16px; appearance: none;
} border: none; -webkit-appearance: none;
border-radius: 5px; -moz-appearance: none;
form { cursor: pointer; cursor: pointer;
margin-bottom: 20px; } }
}
select:focus {
label { outline: none;
display: block; border-color: #3498db;
margin-bottom: 5px; box-shadow: 0 0 5px rgba(52,
} 152, 219, 0.7);
}

.marginTop {
margin-top: 10px;
}
MENSAGEM

“Se você planeja para 1 ano, plante milho;

se você planeja para 10 anos plante árvores;
mas se você planeja para 100 anos, eduque as pessoas.”
Provérbio Chinês da época de Kong-Fu-Tzu (Confúcio),
Filósofo e Educador Chinês - 551- 479 a.c. .