APIs - Bibliotecas Para Desenvolvimento Em Javascript
Aula 1
APIs de Navegador - Manipulando documentos
APIs de navegador – manipulando documentos
Estudante, esta videoaula foi preparada especialmente para você. Nela, você irá aprender conteúdos importantes para a sua formação profissional. Vamos assisti-la?
Clique aqui para acessar os slides da sua videoaula.
Bons estudos!
Ponto de Partida
Nesta aula, trabalharemos o conceito de árvore DOM e entenderemos o que significa esse acrônimo, sendo de suma importância entender o seu funcionamento para conseguir manipular documentos escritos em HTML e CSS utilizando Javascript. Não se preocupe, não será nada complexo, você verá!
Para a compreensão desse novo conceito que aprenderemos, vamos ver um exemplo prático, onde você terá de trabalhar em uma aplicação que solicitará o nome e a idade de uma pessoa; além disso, com o auxílio de uma estrutura de decisão, informar ao usuário se ele é uma pessoa menor de idade ou não. Considere que a maioridade passa a valer a partir dos 18 anos, quando a pessoa fica habilitada à prática de todos os atos da vida civil, logo, você deverá manipular a propriedade style para alterar a cor de fundo da página e a cor do texto, de acordo com a resposta para menor de 18 anos e para maior de idade. Escolha as cores e apresente uma mensagem no corpo da página para o usuário.
Desejamos que esta aula te auxilie no aprofundamento da programação web!
Vamos Começar!
Introdução ao DOM
DOM (Document Object Model) é uma interface (API) que possibilita manipular o conteúdo de documentos HTML e XML (Flanagan, 2013). Graças ao Modelo de Objeto de Documentos, é possível utilizar uma estrutura padronizada para que os programas possam alterar essa estrutura, seu estilo e conteúdo (MDN, 2023). A árvore DOM é a estrutura do HTML em código, como mostra a figura a seguir:
Métodos e elementos DOM
O acesso a elementos DOM com a linguagem Javascript é feito graças à existência de métodos que permitem a realização desse acesso. Veja alguns exemplos a seguir:
| Método de acesso | Funcionalidade e referência do elemento pelo seu ID |
| getElementById() | Retorna a referência de um elemento pelo seu ID. |
| getElementsByClassName() | Retorna um vetor de objetos com todos os elementos filhos que possuem o nome da classe informada. |
| getElementsByName() | Retorna uma coleção de elementos por meio do name deles. |
| querySelectorAll() | Retorna uma lista de elementos presentes no documento que coincidem com o grupo de seletores especificado. |
Quadro 1 | Principais métodos de acesso DOM. Fonte: adaptado de MDN (2024).
Siga em Frente...
Manipulação do CSS em um documento usando o DOM
As folhas de estilo são indispensáveis na tarefa de construção de páginas web, pois é graças a elas que é possível a aplicação de formatação às páginas. O CSS (Casdading Style Sheets) é responsável por permitir a manipulação de tudo que diz respeito à parte visual (aparência) de uma página web, enquanto isso, o HTML é responsável por todo o conteúdo. O CSS, além de permitir o uso de recursos de formatação, possibilita, também, a reutilização em vários documentos HTML (Alves, 2021).
A sintaxe de uma regra de CSS deve ser escrita da seguinte maneira:
Cada objeto Element tem propriedades style e className que permitem aos scripts especificar estilos CSS para um elemento do documento ou alterar os nomes de classe CSS que se aplicam ao referido elemento (Flanigan, 2013). Veja o exemplo a seguir:
Vamos Exercitar?
Agora que você conhece os métodos Javascript para acessar elementos DOM e compreende como é feito esse acesso, será necessário resolver o problema proposto no início desta aula. O código será construído num arquivo Javascript separadamente; a partir de agora, faremos isso com todos os nossos projetos futuros. Veja como fica o código do arquivo HTML:
Note que o código Javascript está sendo chamado antes do fechamento do elemento <body>, e isso acontece para que todos os elementos da página sejam renderizados antes de o código Javascript ser interpretado.
Este é o resultado para as duas situações possíveis:
Saiba Mais
Sugerimos a leitura do Capítulo 15 do livro Javascript, do autor David Flanagan, a fim de que possa compreender os conceitos relacionados à árvore DOM, bem como a leitura de Modelo de Objeto de Documento (DOM).
MDN WEB DOCS. Modelo de Objeto de Documento (DOM). 2023.
Conheça, por fim, a árvore] DOM e sua interface para desenvolvimento web, disponível em: e os seletores em CSS.
VIEIRA, D. O que é DOM e por que essa interface é essencial para a web? 2023.
Referências Bibliográficas
ALVES, W. P. HTML e CSS: aprenda como construir páginas web. São Paulo: Expressa, 2021.
FLANAGAN, D. JavaScript: o guia definitivo. Tradução: João Eduardo Nóbrega Tortello. 6. ed. Porto Alegre: Bookman, 2013.
MDN WEB DOCS. Javascript. 2024. Disponível em: https://developer.mozilla.org/pt-BR/docs/Web/API/Document_Object_Model/Introduction#dom_interfaces. Acesso em: 11 jan. 2024.
Aula 2
APIs de Navegador - Manipulando áudio e gráfico
APIs de navegador – manipulando áudio e gráfico
Estudante, esta videoaula foi preparada especialmente para você. Nela, você irá aprender conteúdos importantes para a sua formação profissional. Vamos assisti-la?
Clique aqui para acessar os slides da sua videoaula.
Bons estudos!
Ponto de Partida
Os recursos audiovisuais estão sempre presentes no nosso dia a dia, não é mesmo? É muito comum estarmos com algum tipo de dispositivo eletrônico, como o celular, para ouvir música, por exemplo, e o uso desse tipo de recurso em páginas web é muito necessário, pois trata da dimensão interativa de um website que é extremamente importante, afinal, é o que torna a experiência do usuário interessante.
Nesta aula, falaremos um pouco sobre animações e áudios, desenho de formas e aplicação de estilos utilizando a linguagem Javascript, bem como veremos o elemento canvas, disponível no HTML, que torna todo esse trabalho possível de ser desenvolvido em aplicações de internet. Além disso, você será desafiado a resolver um exemplo prático a montar um recurso de carregamento de página, montar o efeito de barra de progresso, presente em muitos websites e que é utilizado enquanto itens estão sendo carregados na página.
Diante disso, como está a sua animação para conhecer esses recursos e poder utilizá-los em seu projeto? Aprofunde-se e verá que é muito interessante e até mesmo divertido! Vamos lá?
Vamos Começar!
Introdução ao canvas
O canvas surge na versão 5 do HTML para facilitar a vida dos programadores de página web. Ele permite que sejam criados objetos gráficos (formas geométricas) e textos; com ele, também é possível criar animações gráficas (Alves, 2021). Esse elemento permite definir um objeto container que pode ser comparado a uma tela branca de pintura, em que, numa analogia, o pintor pode criar sua arte. Agora, para nós, criadores de programas, com esse objeto, podemos criar nossos gráficos utilizando Javascript (Alves, 2021).
Com canvas, é possível criar muitas coisas, pois ele conta com um conjunto extenso de recursos, como recortes, sombra, textos, desenho de linhas, cores, transparência, degradês e muito mais, e parte desses recursos são escritos com a linguagem Javascript (Flanagan, 2013).
Quanto à manipulação do elemento canvas com Javascript, existem alguns métodos importantes que podem auxiliar nessa tarefa. Veja:
| Método | Descrição |
| getContext() | Responsável pelo retorno de um contexto que podemos utilizar na chamada de métodos para criação dos objetos gráficos e textos. |
| fillStyle() | Permite definir a cor de um objeto. |
| fillRect() | Utilizado para criação de retângulos. |
| fillText() | Utilizado para adicionar texto a um elemento canvas. |
Quadro 1 | Métodos para manipulação do canvas. Fonte: adaptado de Alves (2021).
Esses são apenas alguns dos vários métodos e funções disponíveis para lidar com elemento canvas.
Aplicando animação e áudio
Um dos avanços importantíssimos que chegou com a versão 5 do HTML diz respeito aos elementos semânticos. Além disso, entre os vários elementos que surgem nessa versão, está o canvas, responsável por possibilitar a construção de animações em páginas web. Com ele, é possível criar jogos em HTML5, pois ele permite o desenho de gráficos com Javascript (MDN, 2023).
Com esse elemento, é muito simples desenhar um quadrado numa página web, basta executar o seguinte código:
O áudio também é um recurso que pode ser utilizado facilmente, graças ao elemento áudio também criado na versão 5 do HTML.
Imagine que você tenha um arquivo de mp3 chamado música em seu projeto, no mesmo diretório do arquivo index.html, e para reproduzir o som desse arquivo em sua página web, basta inseri-lo no projeto da seguinte forma:
Siga em Frente...
Desenhando formas, aplicando estilo e cores
Agora, por meio do ID do elemento canvas, é possível utilizar Javascript para desenhar algo dentro do quadrado criado, nesse caso, um novo quadro, menor e preenchido. Basta adicionar ao código criado anteriormente, e o Javascript que fará isso. Veja:
Note que está sendo utilizado o método fillRect(), que é quem cria o quadrado preenchido ao centro. Ele recebe como parâmetro as coordenadas X (coluna), Y (linha), largura e altura (Alves, 2021). Vamos, agora, a um último exemplo, em que faremos o desenho de interseção de dois retângulos e, em um deles, aplicaremos transparência. Veja:
Vamos Exercitar?
Como apresentado no início desta aula, você está trabalhando em um projeto em que, entre outros recursos que estão sendo empregados, será necessário montar o efeito de barra de progresso, presente em muitos websites e que é utilizado enquanto itens estão sendo carregados na página.
Alguns dados importantes: o efeito de taxa de atualização é de 10 milissegundo; a variável fator, responsável pela velocidade, receberá 60; e a resolução na qual deverá ser testada é de 1280px de largura. O time de design informou o código de cor a ser utilizado, que é "#4169E1", e teremos o seguinte resultado:
Saiba Mais
Sugerimos a leitura do Capítulo 21 do livro Javascript, de Davi Flanagan, a fim de que compreenda os conceitos relacionados à mídia e gráficos em scripts.
FLANAGAN, D. JavaScript: o guia definitivo. Tradução: João Eduardo Nóbrega Tortello. 6. ed. Porto Alegre: Bookman, 2013.
Aprofunde seus conhecimentos no elemento áudio.
MDN WEB DOCS. Audio. 2023.
Referências Bibliográficas
ALVES, W. P. HTML e CSS: aprenda como construir páginas web. São Paulo: Expressa, 2021.
FLANAGAN, D. JavaScript: o guia definitivo. Tradução: João Eduardo Nóbrega Tortello. 6. ed. Porto Alegre: Bookman, 2013.
MDN WEB DOCS. Canvas. 2024. Disponível em: https://developer.mozilla.org/pt-BR/docs/Web/API/Canvas_API. Acesso em: 11 jan. 2024.
Aula 3
APIS de Navegador - Comunicando com o servidor
APIs de navegador – comunicando com o servidor
Estudante, esta videoaula foi preparada especialmente para você. Nela, você irá aprender conteúdos importantes para a sua formação profissional. Vamos assisti-la?
Clique aqui para acessar os slides da sua videoaula.
Bons estudos!
Ponto de Partida
A arquitetura cliente-servidor é uma das mais utilizadas para o desenvolvimento de aplicações web. Esse tipo de desenvolvimento tem sido muito facilitado pelas inúmeras ferramentas que surgiram e surgem todos os dias, como as APIs de comunicação, que fazem parte do rol de soluções criadas para facilitar a vida de quem trabalha com programação.
A comunicação com banco de dados por meio de tecnologias como o AJAX, que, de certa forma, não é tão recente, tem melhorado consideravelmente a experiência do usuário. As conexões assíncronas só são possíveis graças às linguagens HTML5 e Javascript a partir da API XMLHttpRequest, que realiza requisições HTTP e HTTPS diretamente para o servidor, como veremos adiante.
Agora vamos a um desafio, imagine que você está num programa de estágio de uma empresa de tecnologia e a liderança do seu grupo lhe passou um desafio: você deve montar um projeto simples utilizando XMLHttpRequest com Javascript, pois, provavelmente, você será alocado num time que precisará utilizar essa tecnologia. Disposto a encarar o desafio? Vamos começar?
Bons estudos!
Vamos Começar!
Introdução ao Ajax
Ajax é o acrônimo (sem letras maiúsculas) de Asynchronous Javascript and XML cujo termo foi cunhado por Jesse James Garrett e surgiu pela primeira vez em seu ensaio de fevereiro de 2005 “Ajax: a new approach to web applications” (Flanagan, 2013). Percebe-se que Ajax é uma tecnologia relativamente antiga, mas que ainda tem muita relevância pelas soluções que entrega. Atualmente, Ajax é considerado termo útil para uma arquitetura de aplicativo web baseada em scripts de requisições HTTP (Flanagan, 2013).
Um bom exemplo de uso de Ajax está no buscador Google, que implementou essa tecnologia. Ao digitar algo na barra de pesquisa, o site usa Ajax para obter resultados comuns do banco de dados a cada tecla pressionada (Freitas, 2021).
Métodos e propriedades XMLHttpRequest
Os navegadores definem suas APIs HTTP em uma classe HMLHttpRequest, e cada instância dessa classe representa um único par de requisição/resposta (Flanagan, 2013). Essa classe surge, então, para facilitar comunicação assíncrona com servidores; com ela, os dados podem ser comunicados por meio de requisições HTTP (ou HTTPS) e arquivos no formato XML, permitindo recuperar dados de um URL sem necessitar atualizar a página inteira. Veja como se dá a comunicação:
Requisição HTTP | Resposta HTTP |
| Método ou “verbo” da requisição HTTP. | Código de status numérico e textual indicando sucesso ou falha. |
| O URL que está sendo solicitado. | Conjunto de cabeçalho de resposta. |
| Conjunto opcional de cabeçalhos de pedido. | Corpo da resposta. |
| Corpo e requisição opcional. |
Quadro 1 | Comunicação assíncrona. Fonte: adaptado de Flanagan (2013).
Simplificando: ao se criar uma instância do objeto XMLHttpRequest, abre-se uma url e envia-se a requisição. O resultado será disponibilizado quando a transação for completada
Siga em Frente...
Ajax e banco de dados
O processo de comunicação entre cliente e servidor utilizando o Ajax é relativamente simples. Veja um exemplo de uma função para executar essa transação:
Vejamos os principais métodos e propriedades para o uso dessa classe:
Métodos/Propriedades | Descrição |
| open() | Inicializa um pedido. |
| getResponseHeader() | Retorna string contendo o texto do cabeçalho especificado. |
| send() | Envia a solicitação. |
| readyState | Retorna o estado de um XMLHttpRequest |
| response | Retorna o conteúdo do corpo da resposta. |
Quadro 2 | Principais métodos e propriedades. Fonte: adaptado de MDN (2024).
Ainda, temos alguns códigos de status de resposta HTTP que são importantes; eles indicam o tipo de problema que se está tendo com uma requisição dessa natureza. Veja:
Código | Classe de código |
| 100 – 199 | Respostas informativas. |
| 200 – 299 | Respostas bem-sucedidas. |
| 300 – 399 | Mensagens de relacionamento. |
| 400 – 499 | Respostas de erro do cliente. |
| 500 – 599 | Respostas de erro do servidor. |
Quadro 3 | Códigos de status de resposta HTTP. Fonte: adaptado de MDN (2024).
Vamos Exercitar?
Considerando o desafio que você recebeu no início da aula, agora, você precisa colocar em prática os conhecimentos adquiridos até aqui. Como a intenção do desafio é testar sua capacidade de resolução de problemas, você pode montar um projeto simples, utilizando o XMLHttpRequest.
No entanto, antes de mais nada, você precisa de uma URL que possa ser consultada com uma requisição e dar uma resposta. Como a transação acontecerá com arquivo JSON, sugerimos que utilize a seguinte URL: https://jsonplaceholder.typicode.com/posts/1. Ao acessá-la, verá que ela apresenta 4 quatro nomes, mas vamos trabalhar com o nome title, e o código HTML ficará assim:
Agora, vamos montar o código Javascript que fará a consulta à URL informada, fazendo uma requisição e aguardando resposta. Veja:
Note que realizamos o teste para verificar se teve como resposta o código 200 utilizando estrutura de decisão, bem como escrevemos a resposta no console do navegador. Caso aconteça algum erro, temos uma mensagem para essa possibilidade.
Saiba Mais
Sugerimos a leitura do Capítulo 18 do livro JavaScript: o guia definitivo, de David Flanagan, que fala sobre Scripts HTTP.
FLANAGAN, D. JavaScript: o guia definitivo. Tradução: João Eduardo Nóbrega Tortello. 6. ed. Porto Alegre: Bookman, 2013.
Sugerimos também o capítulo Definição de Ajax, do livro Programação Back End III, de Freitas et al.
FREITAS, P. H. C. et al. Programação back end III. Porto Alegre: SAGAH, 2021.
Sugerimos, também, a leitura do texto Usando XMLHttpRequest.
MDN WEB DOCS. Usando XMLHttpRequest. 2023.
E, ainda, o capítulo Introdução à arquitetura de sistemas, do livro Arquitetura de sistemas, de Zenker, Santos e Couto, a fim de que compreenda os conceitos relacionados à arquitetura cliente-servidor.
ZENKER, A. M.; SANTOS, J. C. dos; COUTO, Júlia M C.; et al. Arquitetura de sistemas. Grupo A, 2019.
Referências Bibliográficas
ALVES, W. P. HTML e CSS: aprenda como construir páginas web. São Paulo: Expressa, 2021.
FLANAGAN, D. JavaScript: o guia definitivo. Tradução: João Eduardo Nóbrega Tortello. 6. ed. Porto Alegre: Bookman, 2013.
FREITAS, P. H. C. et al. Programação back end III. Porto Alegre: SAGAH, 2021.
MDN WEB DOCS. Canvas. 2024. Disponível em: https://developer.mozilla.org/pt-BR/docs/Web/API/Canvas_API. Acesso em: 12 jan. 2024.
Aula 4
Trabalhando com APIs de Terceiros
Trabalhando com APIs de terceiros
Estudante, esta videoaula foi preparada especialmente para você. Nela, você irá aprender conteúdos importantes para a sua formação profissional. Vamos assisti-la?
Clique aqui para acessar os slides da sua videoaula.
Bons estudos!
Ponto de Partida
A linguagem Javascript, especialmente client-side, possui diversas APIs disponíveis, que, por sua vez, não fazem parte da linguagem em si, mas são escritas sobre o core da linguagem JavaScript, fornecendo superpoderes para serem utilizados em seu código (MDN, 2023), bem como recursos para facilitar a vida de quem esteja montando uma aplicação web. Aliás, existem diversos tipos de APIs, no entanto, hoje, conheceremos as mais importantes e indispensáveis para qualquer pessoa que queira desenvolver boas aplicações.
A fim de que você entenda melhor as funcionalidades e finalidades das Web APIs, você terá um desafio de construir uma aplicação de geolocalização que utilize uma delas de um jeito bem fácil, para que você entenda bem o seu funcionamento.
Você é capaz de fazer coisas incríveis, basta acreditar em sim! Diante disso, vamos descobrir do que você é capaz?
Vamos Começar!
Principais APIs de terceiros
As APIs (Application Programming Interfaces) são construções disponíveis nas linguagens de programação que permitem aos desenvolvedores uma criação facilitada de funcionalidades complexas, porque essas APIs fornecem funcionalidades por meio da abstração do código mais complexo, permitindo à pessoa que está escrevendo a aplicação o uso de sintaxes mais simples em seu lugar (MDN, 2023).
As APIs de terceiro são chamadas assim pois se trata daquelas APIs que não fazem parte do navegador. Assim, você precisa recuperar seu código e informações de outra parte da web (MDN, 2023). A API do Twitter possibilita a exibição dos últimos tweets de uma conta em um determinado site, e esse é apenas um exemplo do que uma API pode oferecer.
Existem algumas APIs de terceiros que são mais conhecidas e buscadas por qualquer pessoa que esteja desenvolvendo aplicações que necessitem delas, e as mais populares são:
| API | Descrição |
| Twitter API | Permite coisas, como mostrar os últimos tweets em um site. |
| Google Maps API | Permite várias coisas com uso de mapas em páginas web. |
| Facebook suite of APIs | Permite o uso do ecossistema do facebook, como aproveitar o login da rede social em sua aplicação. |
| Youtube API | Permite, entre outras coisas, incorporar vídeos do youtube em páginas web. |
Quadro 1 | APIs populares. Fonte: adaptado de MDN (2023).
Vejamos agora, na prática, como funciona o consumo de APIs utilizando para esse exemplo a API da VIACEP. Essa API fornece dados de endereço a partir do número de CEP. Primeiro, vamos construir uma página de endereço simples, com um formulário em HTML5 utilizando Boostrap para o estilo da página. Veja:
Note que o código se refere ao formulário construído em HTML com Bootstrap, que deve ser colocado entre os elementos <body> e </body>. O nome do arquivo pode ser cadendereco.html.
Agora, vamos ver o código em Javascript que fará a consulta à API da ViaCEP.
| Saiba mais: esse projeto está documentado e disponível em uma versão mais completa em: https://bit.ly/consulta-cep-rep |
Siga em Frente...
Manipulação de dados com APIs de terceiros
O processo de manipulação de dados consiste, basicamente, no tratamento dos dados coletados para um fim específico. Nesse tratamento, pode haver etapas de modelagem, limpeza, validação e preparação do dado, que pode ou não ser publicado. Um bom exemplo é a utilização de geolocalização, que, em muitos sentidos, pode oferecer vários benefícios. Vamos ver um exemplo com Open Layers, recurso que facilita a utilização de mapas dinâmicos em páginas web. Com ele, é possível ver blocos de mapa, dados vetoriais e marcadores carregados de qualquer fonte, e o melhor: é totalmente gratuito sob licença BSD e 2 cláusulas.
Imagine que você precisa coletar a posição dos usuários que acessam uma determinada página web. A intenção não é obter a localização dos possíveis interessados no produto que está sendo vendido nessa página, uma vez que, para isso, é preciso autorização, mas é possível saber ao menos a localidade do usuário. O projeto ficaria assim:
Vamos Exercitar?
Você precisa desenvolver uma aplicação que, utilizando API, identifique os destinos turísticos mais procurados em duas cidades específicas. As cidades são: Santiago, no Chile, e Gramado, no Rio Grande do Sul, Brasil. Vamos utilizar o openlayers para esse propósito; para tanto, iniciaremos construindo a página HTML, que ficará da seguinte forma:
Agora, vamos montar o arquivo Javascript para exibir as duas localidades. Daremos ao usuário a escolha do zoom que deve ser dado ao mapa, lembrando que, quanto mais zoom, mais próxima é a visualização. Limite essa visualização para um zoom entre 5 e 15.
Montamos uma estrutura de dados com nome da cidade, país, latitude e longitude, como você pode ver na linha 2.
Na tela 1 do resultado, será exibida uma mensagem solicitando ao usuário que defina o nível de zoom que deseja para os mapas. No resultado, será exibido o mapa de Santiago com nível de zoom 10 e de Gramado com nível de zoom 15.
Saiba Mais
Sugerimos a leitura do Capítulo 22 APIs de HTML5 do livro JavaScript: o guia definitivo, que trata de APIs.
FLANAGAN, D. JavaScript: o guia definitivo. Tradução: João Eduardo Nóbrega Tortello. 6. ed. Porto Alegre: Bookman, 2013.
Também sugerimos a leitura do artigo Introdução às web APIs.
MDN WEB DOCS. Introdução às Web APIs. 2023.
Conheça melhor a documentação da API da ViaCEP.
Referências Bibliográficas
FLANAGAN, D. JavaScript: o guia definitivo. Tradução: João Eduardo Nóbrega Tortello. 6. ed. Porto Alegre: Bookman, 2013.
MDN WEB DOCS. Introdução às web APIs. 2023. Disponível em: https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/Client-side_web_APIs/Introduction. Acesso em: 12 jan. 2024.
OPEN LAYERS. API Doc. 2023. Disponível em: https://openlayers.org/en/latest/apidoc/. Acesso em: 12 jan. 2024.
Encerramento da Unidade
APIs - Bibliotecas Para Desenvolvimento Em Javascript
Videoaula de Encerramento
Estudante, esta videoaula foi preparada especialmente para você. Nela, você irá aprender conteúdos importantes para a sua formação profissional. Vamos assisti-la?
Clique aqui para acessar os slides da sua videoaula.
Bons estudos!
Ponto de Chegada
A utilização das APIs, sejam elas nativas do navegador, sejam aquelas criadas por terceiros, possibilita-nos uma infinidade de possibilidades no que diz respeito à criação de aplicações web. As reflexões feitas ao longo do conteúdo estudado dão conta de vários aspectos indispensáveis na construção desse tipo de aplicação. Por exemplo, conhecemos a API DOM (Document Object Model), que serve como interface para a programação de arquivos HTML ou XML (Flanagan, 2013), sendo ela uma maneira de representar os elementos de uma página escritos em HTML.
Em seguida, notamos as possibilidades que surgem com a criação do elemento canvas no HTML, que permite, entre outras coisas, a criação de animação utilizando-se o Javascript. Sobre o canvas, também foram feitas explanações a respeito dos principais métodos para sua manipulação (Alves, 2021); além disso, você aprendeu como manipular áudio por meio do elemento áudio, no HTML.
Ainda sobre a animação, foi possível ter uma noção de como é desenhar formas definindo estilos e cores no código escrito — um processo bem interessante, já que é muito utilizado na criação de jogos com a linguagem HTML5. Adiante, vimos um pouco sobre comunicação com servidores utilizando AJAX e a propriedade XMLHttpRequest, muito útil nesse tipo de necessidade.
Finalmente, conhecemos alguns recursos de APIs de terceiros, que são indispensáveis na construção de soluções web, e como você deve ter notado, existem várias, para os mais variados propósitos. Um esforço necessário para compreendê-las é ler a documentação disponível com cada uma, que oferece todas as informações necessárias para o uso da API em questão. Os conteúdos estudados nesta Unidade são necessários para desenvolver a competência que é implementar e utilizar APIs no desenvolvimento com Javascript.
É Hora de Praticar!
Para que você compreenda como utilizar as APIs com linguagem Javascript, é primordial, inicialmente, que entenda a documentação da API que se pretende utilizar. Só de posse dessas informações, você será capaz de aplicar os conhecimentos necessários para manipulação de documentos, áudios e gráficos, além, é claro, de compreender a dinâmica de uso de APIs de terceiros — pontos fundamentais para que suas aplicações fiquem cada vez mais dinâmicas e interativas.
E já que você estudou bastante sobre APIs, que tal construir uma aplicação utilizando a API do ChatGPT para consultas? Crie um protótipo de um Chatbot para consultas rápidas e curtas. A documentação da API da OpenAI, empresa dona do ChatGPT, é bem completa e tem bastante informação. Será necessário, inicialmente, criar uma conta para acessar o ChatGPT; caso você já tenha, será interessante criar outra, pois há um limite de uso de consultas ao ChatGPT que, provavelmente, você já alcançou. Vamos lá?
Reflita
- Você já havia visto as APIs para desenvolvimento web em outras linguagens de programação?
- No processo de escrita de código utilizando API de terceiros, você foi capaz de identificar a documentação e, com ela, empregar o código necessário para uso da API?
- Você compreendeu como as comunicações entre cliente e servidor são realizadas de forma síncrona e assíncrona?
Resolução do estudo de caso
Antes, crie um projeto simples, com um formulário com um único campo, para que a pergunta seja digitada. Utilize CSS para centralizar o formulário na página, e caso queira estilizar um pouco mais, fique à vontade. Para que fique claro, o projeto apresentado aqui será o mais simples possível. Veja:
Agora, vamos construir o código Javascript, que consultará a API do ChatGPT. A documentação é muito completa e conta com todas as informações necessárias para fazer a conexão com a API funcionar perfeitamente. Leia com atenção.
Será necessária a criação de uma chave a ser utilizada para comunicação com a API, e essa chave pode ser criada no endereço: https://platform.openai.com/account/api-keys.
O código Javascript ficará assim:
Note que na linha um foi ocultada a chave criada para essa atividade. Você, então, deve substituir o conteúdo que está entre aspas (“ ”) e colocar o código da sua chave. O resultado será uma página que responderá a perguntas feitas pelo usuário, veja:
Dê o play!
Assimile
Referências
ALVES, W. P. HTML e CSS: aprenda como construir páginas web. São Paulo: Expressa, 2021.
FLANAGAN, D. Javascript: o guia definitivo. Tradução: João Eduardo Nóbrega Tortello. 6. ed. Porto Alegre: Bookman, 2013.
OPENAI. API reference. 2023. Disponível em: https://platform.openai.com/docs/api-reference/introduction. Acesso em: 12 jan. 2024.