Aprenda o AJAX e faça um feed de notícias gráfico e interativo

1. Boas-vindas ao curso!: Olá a todos e bem-vindos à nossa introdução ao Ajax. É aqui que aprendemos a usar o Ajax para recuperar dados dinamicamente da Internet e colocá-los em nossas páginas web. Durante esta aula, você aprenderá tudo o que precisa saber para começar a usar o Ajax, incluindo como usar dados JSON, como acessar APIs públicas, que é de onde os dados vêm e, claro, tudo o que você precisa saber para fazer uma solicitação do Ajax, que está enviando os dados, lendo respostas, manipulando erros e mantendo nossos usuários divertidos enquanto eles aguardam nossa solicitação do Ajax para terminar. Durante esta aula, é claro, vamos construir um projeto. Isto é o que vamos construir. Esta pequena página web aqui recupera manchetes de uma API de notícias, exibi-los em um lado da página e quando nosso usuário clica, então ele exibe GIFs animados interpretando a manchete, que é a melhor maneira que eu posso pensar, de dar sentido às manchetes do mundo agora. Então, para quem é essa aula? Bem, é uma introdução ao Ajax, mas na verdade, é uma classe intermediária, na medida em que parece que você já conhece algum JavaScript e que você está confortável trabalhando com HTML. Claro, se você tiver alguma dúvida ou comentário durante a aula, por favor me avise na área de discussão. Voltarei para você imediatamente, caso contrário, não se esqueça de apertar o botão “Seguir” e eu vou ansioso para vê-lo dentro da classe. 2. Então, o que é o AJAX, afinal?: Então, antes de mergulharmos no uso do AJAX, vamos ter uma pequena conversa sobre bem, o que isso significa? O que é isso A-J-A-X? O que realmente fazemos com ele, e quais são os prós e contras de usá-lo? Então, primeiro de tudo, vamos dar uma olhada no que AJAX significa. Bem, o primeiro A significa Assíncrono, o que significa que se vamos fazer algo de forma assíncrona, começamos trabalho assíncrono, seja lá o que for, então, sair e fazer outra coisa enquanto o trabalho assíncrono está fazendo sua própria coisa, completando esperamos. Uma vez terminado, ele nos dirá que está feito e estamos afastados do trabalho que estávamos fazendo antes e depois vamos lidar com os resultados disso. Minha analogia habitual para isso é fazer meu café da manhã. A primeira coisa que faço é ferver um pouco de água e depois faço o resto do meu café da manhã. Não espero pela água que acabe de ferver para a minha chávena de chá quente. Antes de fazer o resto do meu café da manhã, eu só começo a chaleira e depois faço tudo o resto e aquela chaleira é como uma operação assíncrona. Espero que essa analogia funcione para você. Movendo-se para a direita ao longo, o J sem surpresa está à frente JavaScript. Então, temos JavaScript assíncrono e, em seguida, obtemos outro A que significa mais, realmente é um e. Por alguma razão, as pessoas AJAX decidiram que ele deve sempre ser soletrado como JavaScript assíncrono Plus, isso é realmente um E, X que significa XML que é o que todo mundo usou no dia em que AJAX foi pela primeira vez inventado, mas ninguém usa XML realmente em comunicações AJAX front-end. Todo mundo usa JSON, Javascript Object Notation. Vamos ter um mini olhar para o que JSON é um pouco mais tarde na classe apenas para ter certeza de que estamos todos atualizados sobre isso, nada muito complicado, mas este é o formato de dados que é usado para trocar informações entre um servidor e uma web navegador. Falando nisso, o que o AJAX faz? Bem, note isto, este é o acordo habitual que temos. Esta é a maneira AJAX conhecida de enviar informações entre um navegador e um servidor. Este é o cenário, no qual não queremos usar AJAX realmente. Vamos imaginar que temos um formulário de inscrição para um novo site e enviamos nossos dados para o servidor batendo um sinal no ponto e, em seguida, o servidor envia de volta toda a nossa nova página web. Então, tudo em nosso navegador muda e boom, temos uma nova página carregada em nosso navegador. Temos esse formulário de inscrição na nossa história. Então, se pressionarmos o botão Voltar, vamos acabar de volta no formulário de inscrição. Então, é para isso que usamos AJAX. Imagine que temos uma página web aberta e é algum tipo de ferramenta de busca, você pode ver que você tem uma pequena lupa no navegador dela e nós enviamos nossa consulta. Atingimos um ponto final chamado Pesquisar em nosso servidor e estamos passando um parâmetro que queremos procurar, e então o serviço envia de volta alguns dados, ele não envia de volta uma nova página da Web. O que fazemos é pegar esses dados e enfiá-los no meio da nossa página web existente, não carregamos um novo. Então, claramente, essa é uma experiência bem diferente para o usuário. Você não vê a página da web, então nós pegamos isso e eu a vejo recarregar. Eu só vejo a página que eles estavam olhando originalmente com as coisas novas aparecendo de repente no meio dela. Então, quais são os prós e contras de usar AJAX? Bem, no lado feliz, isso cria uma ótima experiência de usuário quando usado bem porque nos dá páginas web muito interativas e responsivas e, em geral, estamos enviando menos dados. Estamos apenas enviando os dados que precisamos do servidor ou estamos buscando os dados que precisamos do servidor através do navegador e não toda uma página web. Uma das outras coisas que temos que ser um pouco cuidadosos com AJAX, bem, ele pode introduzir complexidade que de outra forma não estaria lá em nossas páginas web. Eu acho que é uma troca justa porque estamos recebendo funcionalidade que de outra forma não estaria lá também. Mas a coisa é que usar AJAX pode tornar a lógica de como o código JavaScript mais complexo. Usando uma duas chamadas AJAX, ele não introduz muitos problemas para nós, mas quando nossa chamada AJAX é concluída e tem que fazer outra chamada AJAX e que completa e que requer uma terceira chamada AJAX, então ele pode ser bastante difícil saber o que está acontecendo e se algo está dando errado, depuração pode ser bastante difícil. Temos que ter muito cuidado, finalmente, para não quebrar o botão voltar porque se temos os resultados de alguns grandes pedidos AJAX sentados em uma página web e o usuário clica no link, talvez isso esteja em nossos dados AJAX e então eles clicam no botão Voltar, Eles vão ver os resultados das chamadas AJAX que fizemos anteriormente? Bem, a menos que tivéssemos cuidado em guardá-los e reenviá-los, então provavelmente não. Eles estarão de volta onde começaram antes que essas solicitações AJAX foram feitas. Então, você pode estar dizendo, bem, o que aconteceu aqui? Os usuários são usados para o botão Voltar mostrando exatamente a mesma página que deixaram antes de seguirem um link para fora dessa página. Então, agora que tivemos uma rápida olhada no que significa AJAX, vimos o que ele faz e tivemos um pouco de uma olhada nos prós e contras, vamos começar a ver como ele é realmente usado em JavaScript em nossa próxima aula de vídeo. 3. Como usar o AJAX no Javascript: Está bem. Então, agora é hora de falar sobre como fazemos uma solicitação AJAX em JavaScript. Hoje, vamos analisar como fazemos isso em JavaScript, obviamente, usando o objeto XMLHttpRequest, e como podemos realmente usá-lo para fazer uma solicitação. Então, XMLHttpRequest. Então, o que é isso? Bem, esta é uma parte padrão do JavaScript em um navegador. Então, ele estará sempre disponível para você em um navegador. Ele tem tudo o que precisamos para fazer um pedido AJAX nele. Muitas vezes, muitas vezes, muitas vezes abreviado para apenas XHR ou xhr em minúsculas porque é bastante complicado. Finalmente, não deve ser confundido com qualquer número de outras coisas que são usadas para solicitações assíncronas. Há um monte de coisas construídas em cima do XMLHttpRequest e há mais coisas sendo incorporadas em JavaScript para lidar com operações assíncronas como promessas, como Asynchronc/Await, e estamos recebendo algo chamado buscar em breve. Mas XMLHttpRequest é o método fundamental que temos para fazer uma solicitação AJAX. Só mais uma vez que XML no nome é totalmente enganador. Não temos de recuperar o XML. Na maioria das vezes, teremos JSON e veremos um pequeno exemplo disso em breve. A primeira coisa que precisamos fazer é inicializar e ou criar um novo objeto usando o novo operador, e então vamos chamar aberto sobre ele. Vamos olhar para cada uma dessas coisas em detalhes em apenas um segundo. Então, não se preocupe muito com essa lista que estou apressando agora, mas a primeira coisa que precisamos fazer é abrir, que é dizer como queremos fazer nosso pedido e onde vamos fazer nosso pedido? Em seguida, queremos atribuir uma função a algo chamado onload, e isso é o que vamos ser chamado quando a solicitação for concluída com sucesso. Também queremos atribuir uma função a uma propriedade chamada onerror, que será chamada se houver um erro ao fazer a solicitação AJAX. Finalmente, podemos chamar enviar, que irá realmente enviar o pedido. Então, vamos dar uma olhada nisso no código porque isso é bastante abstrato, a lista lá, e será muito melhor vê-lo realmente funcionando. Está bem. Então, aqui estou eu em um documento de exemplo. É um arquivo HTML com algum JavaScript dentro dele entre tags de script. Eu fiz isso assim só para ter certeza de que tudo estava naquele lugar e fácil de ver. Eu incluí isso na seção de recursos para que você possa ir e dar uma olhada nele e brincar com ele mesmo, se quiser. Mas eu estou indo até o final do documento aqui e é aqui que nosso HTML real está, bem aqui embaixo. Não vejo onde vou selecioná-lo. Lá vamos nós. Este é um de nosso corpo HTML real e os bits que estamos realmente interessados estão aqui. Temos um botão quando clicado irá executar uma função JavaScript chamada Carregar imagem. Então temos uma pequena imagem com um ID de GIF e fontes definidas para nada. Então, vamos verificar esta função Carregar imagem. Aqui está. Podemos encaixá-lo na tela, isso é ótimo. Então, definimos uma função chamada Load Image, e aqui estamos instanciando um novo XMLHttpRequest. Vamos pular isso por enquanto Voltarei a ele muito em breve. Em seguida, chamamos aberto em nossa nova solicitação AJAX e dizemos bem que queremos executar um método GET contra uma URL. Aqui está a definição do nosso URL. Eu dividi-o em pedaços apenas para delinear cada parte da URL. Eu normalmente não faria isso assim, então estamos fazendo um pedido contra este endpoint aqui, que é parte da API do Giphy para retornar um GIF aleatório. Geralmente anexando um ponto de interrogação para dizer que haverá alguns parâmetros nesta URL. Estamos definindo nossa classificação para G. Giphy é principalmente conteúdo contribuído pelo usuário, alguns dos usuários gostam de enviar conteúdo muito desafiador, então eu estou aderindo ao conteúdo classificado G. Então temos nosso separador para parâmetros em nossa URL e, finalmente, temos uma chave API. As chaves de API são uma maneira de dizer a um serviço como Giphy que está fazendo a solicitação. Normalmente, iríamos pedir ao Giphy uma chave de API própria e usaríamos isso em todas as nossas solicitações. Este é um muito antigo que Giphy costumava usar para todos. Agora eles têm individuais e vamos passar por cima obter um quando começamos a construir nosso aplicativo de exemplo. De qualquer forma, tendo dito tudo isso é o nosso URL aleatório Giphy e nós usá-lo aqui. Então, estamos dizendo, por favor, abra este URL usando o método GET. Esta bandeira aqui verdadeira significa torná-la assíncrona. Podemos levar isso para falso e torná-lo síncrono mas o objetivo do AJAX é que ele é assíncrono. Então, vamos fazer isso, torná-lo assíncrono. Em seguida, atribuímos uma função para onload, e isso é o que queremos fazer quando a solicitação for concluída. Então, a primeira coisa que fazemos é obter uma referência à nossa imagem, lembre-se que havia uma imagem em nosso HTML com um ID de GIF. Sim, estou no campo de pessoas que dizem GIF sem JIF. Então, me desculpe se isso realmente te incomoda. Em seguida, queremos obter a resposta real que veio de volta do servidor para a nossa solicitação e que está em uma propriedade chamada texto de resposta. Então o que fazemos é transformar isso em um objeto JavaScript usando a análise JSON. Então, como eu disse, vamos ter uma pequena olhada no JSON e como ele funciona muito brevemente em uma das próximas lições. Mas o ponto é que podemos transformar a resposta em um objeto JavaScript e atribuímos isso aos dados de resposta. Em seguida, obtemos algo chamado, imagem URL original, a partir da parte de dados dos dados de resposta e atribuí-lo ao atributo de origem da nossa imagem. Puxa! Isto para chegar aqui, lembre-se aqui é a nossa imagem, ele tem um ID de GIF e aqui está seu atributo fonte, atualmente definido como nada, mas vamos atribuir esse valor a ele. Eu também vou dar uma olhada na documentação da API Giphy, você possa saber onde encontrar essa informação sobre o que está dentro dessas respostas, porque eu sei que isso parece apenas uma lista aleatória e misteriosa de atributos lá. Também vamos atribuir no atributo de erro. Então nós dizemos, “Oh, isso vai ser uma função”, se algo der errado, nós vamos apenas dizer, “Mostrar um alerta”, e dizer, “Oh, isso foi um erro”. Então, finalmente, enviamos. Então, este é o lugar onde o pedido é realmente enviado e esperamos que uma vez que foi recebido e as respostas enviadas com sucesso, então nossa função onload será executada, e então nossa imagem terá um atributo fonte atribuído a ele, e seremos capazes de ver isso em nosso navegador. Então, agora que vimos tudo isso, vamos dar uma olhada no navegador. Está bem. Então, aqui está a nossa pequena página de teste AJAX, pedido Giphy AJAX. Aqui está o botão Carregar imagem. Então, se eu cliquei nisso. Lá sim. É praticamente o que você esperaria obter se você pedir uma imagem aleatória do Giphy, e podemos continuar pressionando este botão para obter imagens aleatórias de volta. Sim, e assim posso continuar carregando isso o dia todo. Olá Professor. Então, você pode ver que a API Giphy está nos enviando referências a imagens que podemos carregar em nosso navegador. Então, apenas para recapitular, quando fazemos uma solicitação XHR começamos executando aberto em nossa nova solicitação, atribuímos onload e onerror, que diz à solicitação o que fazer quando ela for bem-sucedida ou falhar. Então, finalmente, enviamos o pedido. Vimos que implementado em nosso código, podemos ver que fazemos uma nova solicitação primeiro, depois abrimos. Atribuímos uma função para onload, isso é o que fazemos quando a solicitação é resolvida com sucesso. Atribuímos uma função para onerror, o que fazer quando as coisas dão errado. Então, finalmente, enviamos. Então, esse é um exemplo muito curto e rápido de como podemos fazer uma solicitação AJAX. 4. APIs públicas — o que você precisa saber: Ok. Bem-vindos de volta à nossa introdução ao Ajax todo mundo. Nesta lição, vamos apenas fazer uma análise rápida da definição de termos e certificar-nos de que estamos a par alguns conceitos fundamentais que precisaríamos para o resto desta classe. Então, como usar uma API e a primeira coisa que precisamos falar é bem, o que é uma API? E então nós começamos a fazer um pouco de atualização JSON porque JSON é o formato de dados que é normalmente usado para transferir dados entre clientes e alguma API web e, em seguida, vamos sair e obter chave API para nosso serviço de notícias e, em seguida, confira os documentos desse serviço para que tenhamos uma ideia de como usá-lo. Mas antes de tudo, o que é uma API? Bem, significa Application Programming Interface e realmente é apenas um lugar onde podemos enviar pedidos de dados. Então, eu posso dizer “Por favor, me envie todas as fotos que parecem cães” ou eu poderia dizer “Ei, por favor salve e guarde esta nova foto deste cão.” Nós também podemos receber respostas como se ele nos enviasse volta um grande monte de fotos de cães se estamos usando algum tipo de API fotográfica ou uma API de imagem como Giphy ou se estamos enviando um pedido para salvar algo, ele pode voltar e dizer “Ei, eu salvou-a. Tudo estava bom” ou poderia dizer “Ei, houve um erro ao salvar sua foto de cachorro”, e então podemos descobrir o que fazer depois. E uma API é um termo muito geral. Qualquer tipo de biblioteca de terceiros que usamos tem uma API. As interfaces web que vamos estar olhando durante esta classe, como interfaces de soquete de nível muito baixo. Todas essas coisas têm uma maneira definida de interagir com elas e agora vamos ter uma atualização rápida para o JSON. É incrivelmente amplamente utilizado, mas eu sei que nem todo mundo realmente o usou ou está familiarizado com ele, então eu vou dar uma olhada rápida nele agora, incluindo jogar com algum código. Ele significa notação de objeto JavaScript e o que isso realmente significa é que é uma maneira de pegar alguma string formatada de uma certa maneira e transformá-la em um objeto JavaScript e então podemos fazer a mesma coisa. Podemos pegar um objeto JavaScript e transformá-lo em uma string e essas strings são super úteis para enviar entre uma API e um cliente como o seu navegador porque isso significa que temos esse fluxo indo para trás e para a frente que podemos converter em um objeto Java Script. É muito fácil formatar dados dessa forma porque torna muito baixo esforço, mas também é muito fácil de usar. É um formato que podemos editar nós mesmos para que possamos ler facilmente e é uma forma muito intuitiva de dados para usar. E então vamos dar uma olhada nisso já em algum código agora. Ok, então, aqui está um pequeno arquivo que está incluído nos recursos do projeto para esta classe. É chamado jsondemo.html e tudo o que eu tenho aqui é um pouquinho de HTML abaixo com um botão que faz alguma coisa, JSON demo quando é clicado e aqui está nossa função de demonstração JSON e podemos olhar para isso no navegador. Nós clicamos no botão e algumas coisas são impressas no console. E agora o que estamos olhando aqui é que estou usando um conjunto de cordas ES6 multi-linha. Isso só significa que podemos usar isso como um texto de volta para definir uma string que se estende por várias linhas e é assim que JSON se parece. Nós vamos embrulhar a coisa toda e algumas chaves e então nós vamos ter um valor de chave ou um nome de chave seguido por um valor e chaves sempre aparecem como uma “string” entre aspas como este e então o valor, bem pode, se for um número, não será citado, se for uma string, ele será citado, o valor pode ser uma matriz ou pode ser ainda outro tipo de objeto. O ponto é que podemos pegar essa string, dar-lhe para o JavaScript construído em JSON objeto e pedir-lhe para passar nossa string SomeJSON e transformá-lo em algum objeto e, em seguida, podemos acessar as propriedades deste objeto individualmente como um objeto JavaScript normal. Agora podemos registrar todos estes individualmente para o console. Então vamos passar para o nosso navegador, JSON demo, clique em “Por favor verifique o console” e eu clique nele e eis que, aqui temos todos os nossos pequenos valores saindo no console. Ótimo. Então, é claro que se formos e tentar, eu vou apenas descomentar isso, claro apenas para mostrar que não há alguma mágica de interpretação de string peculiar acontecendo aqui, se voltarmos para a nossa string SomeJSON e tentar acessar um a partir de que e pressione atualizar e, em seguida, clique no botão console e se algum estamos ficando indefinido dizendo que esta coisa não tem uma propriedade string porque é apenas uma string e esse valor é indefinido. Agora é claro que vai para o outro lado também, digamos que temos este novo objeto. Nós vamos chamar novo JsObj, objeto, e na maneira JavaScript normal nós dar-lhe um nome e, em seguida, um valor e continuar fazendo isso. Podemos definir uma matriz de coisas, é claro, e então podemos ir e registrar isso para o console como um objeto e, claro o navegador irá imprimir isso muito bem para nós, sendo muito útil e então podemos ir e transformar nosso objeto JsObj em uma string usando stringify JSON, novo JsObj e assim se verificarmos isso no navegador ou recarregar novamente. E aqui podemos ver que nosso objeto foi primeiro de tudo impresso porque eu só fiz como log console e ele foi quebrado bem pelo navegador, mas também nós nos transformamos em uma string usando JSON stringify e você pode ver que temos apenas esta cadeia muito grande aqui e esta é a coisa que nós enviaríamos através de uma API ou em uma resposta API ou um pedido porque é mais fácil enviar um monte de caracteres sobre o fio, mas é mais trabalho enviar um objeto real do fio à sua maneira. E é por isso que usamos JSON. É muito conveniente, é muito legível e intuitivo para nós usar e agora é o padrão padrão para se comunicar com uma API da web. Então, nós vimos o que JSON é, nós vimos como ele funciona. Em seguida, precisamos obter uma chave API para a API que vamos usar. Agora, lembre-se de que uma chave de API é exclusiva para você. É uma coisa que você tem que usar em sua busca por uma API. Assumindo que esta é uma API pública e não é uma que você implementou em algum servidor em algum lugar, mas você obtém sua chave de API, ela identifica você, dessa forma a API sabe se você está ganhando 100 bilhões respostas ou pedidos um segundo, então você provavelmente é algum tipo de problema e eles vão cortá-lo fora, mas é uma maneira de identificá-lo quando você faz seus pedidos. E nós vamos estar usando newsapi.org para obter nossas manchetes de, eu estava originalmente esperando usar a API do Google News, mas eu vejo que ele está em um estado semi-desligamento. Não sei quanto tempo vai durar, pois está semi-desligado há muito tempo , mas acho que pode desaparecer a qualquer momento. De qualquer forma, estamos usando este api.org e para usá-los teremos que obter uma chave API, então vá para newsapi.org. Podemos ver que somos apresentados com esta página e a primeira coisa que vemos é obter chave API. Então, vá em frente e preencha isso. Eu sou Luke e meu endereço de e-mail está terrivelmente feito, fabish@. Isto é como um endereço de e-mail absurdo, rapazes. E talvez eu tenha que usar outra senha. Sou um indivíduo, não sou um robô. Concordo com os termos e sim, usaremos um link de atribuição em nossa página eventualmente. Submeta, e não obrigado, não vou salvar isso. E, finalmente, temos nossa chave de API. Este é o valor que precisamos usar em nossas solicitações para a interface newsapi.org. Então, agora que temos nossa chave, é melhor verificar a documentação da API. Assumindo que não é sua API, se é uma API que você mesmo escreveu, então provavelmente você sabe como ela funciona. E isso também pressupõe que a documentação existe e é coerente e está atualizada. É um serviço público. Às vezes são muito bem documentados e às vezes mal documentados. Então, vamos verificar a documentação para a API de notícias. E realmente o que precisamos fazer é apenas recarregar essa página e a documentação é muito decente realmente com esses caras. Isso é simples. Nós vamos estar usando os principais pedidos de manchetes e eles fornecem um belo exemplo de solicitações usando nossa chave API já. Eles estão dizendo “Ei, é assim que você faz um pedido para nossa API” e isso é o que você vai receber de volta e em seguida, dar-lhe esta linda estrutura dobrável para que você possa ver o nível superior, nós temos como três coisas, status e o número de resultados e então eles nos dão os artigos e dentro dos artigos bem, é essa coisa uma fonte e o autor e um título e uma descrição e assim por diante. Então, isso é realmente muito bom. E então eles vão e documentam quais são os parâmetros, quando eles podem ser configurados para e, finalmente, seu documento, sua resposta e o que está dentro da resposta. Então, isso é muito simples e muito fácil de usar. Agora, na próxima lição, vamos dar uma olhada nos três tipos de estados principais que precisamos atender em uma solicitação Ajax e vamos começar a usar esta API. Então, estou ansioso para vê-lo na próxima lição e lembre-se se você tiver alguma dúvida ou gostaria algo esclarecido, por favor, deixe-me saber na área de discussão e eu responderei de volta para você. 5. Três estados fundamentais do AJAX (começaremos esperando!): Ok, todos bem-vindos de volta. Nesta lição, vamos estar olhando para os três estados fundamentais do Ajax que precisamos atender quando estamos programando um cliente Ajax ou lidando com solicitações e respostas com Ajax. Agora Ajax sendo como um protocolo de rede, há como um bazillion de estados diferentes em que as conexões de rede de baixo nível real podem estar, mas há três que realmente precisamos cuidar de nós mesmos e que o código do cliente que está esperando. Então, você enviou uma solicitação e os usuários estão aguardando a solicitação para terminar ou fazer algo. Temos de lhes mostrar alguma coisa, dizer-lhes que as coisas estão realmente a acontecer e, finalmente, o sucesso. Bem, nosso pedido foi concluído com sucesso, então devemos fazer algo com a resposta. Caso as coisas não funcionem, devemos lidar com o erro também. Então, hora de esperar. Então, o que é esse negócio de esperar? Bem, precisamos dizer ao usuário que sua ação teve algum efeito. Porque se eles clicarem num botão e nada acontecer, então eles vão continuar a clicar nesse botão como loucos, provavelmente. Precisamos realmente dizer a eles que, sim, sua ação foi notada e ao fazer algo sobre isso mesmo que você não tenha os resultados ainda, e como eu estava dizendo, o feedback ajuda os usuários. Isso os ajuda a saber que algo está acontecendo porque obtê-lo solicitações assíncronas podem ser muito lentas às vezes. Bem, não super lentos como minutos, mas eles podem ser lentos o suficiente para um usuário começar a coçar suas cabeças dizendo, “Bem, o que está acontecendo? Eu não entendo. Eu cliquei no botão, não está acontecendo nada.” O que realmente precisamos fazer agora é começar a implementar uma solicitação para nossa API de notícias. Então nós temos nossa API Key, nós verificamos os documentos. Então, eu vou estar implementando um pedido e mostrando ao usuário um pequeno girador de peso. Não faremos nada com os resultados ainda, é para a seguinte lição, mas veremos como podemos fazer isso agora. Eu encorajo fortemente você a codificar junto comigo, porque em nossos recursos do projeto, temos giphy-news.html, que é html esqueleto, que inclui um link para algum CSS predefinido, que irá colocar uma página um pouco e algum estilo bastante mínimo para ele apenas para nos ajudar a começar. Além disso, e parece que há algo chamado news-api.js, lá também, que é apenas um arquivo JavaScript vazio. É isso que vamos preencher. Então, você tem tudo o que precisa para codificar junto também. Acho que é uma ótima maneira de aprender e incentivá-lo fortemente a clicar em Pausa sempre que eu terminar de fazer algo e implementá-lo também. Então, apenas para dar a vocês um resumo rápido do que HTML além de incluir alguns JavaScript e CSS, temos o corpo, temos H1 indo bem nós, você sabe o que estamos olhando. Temos div vazio, com um id ajax-wait e classe esperando. A animação e o spinner e tudo é feito inteiramente em CSS. Então, confira esse arquivo se você estiver interessado em ver como ele faz isso. É basicamente um div com uma borda tracejada. Está girando e tem um tamanho e posição predefinidos. Então, isso facilita a exibição e a ocultação. Então, quando entramos em nossa seção principal da nossa página, temos três divs; erro, manchetes, gifs. Estaremos preenchendo cada um desses conforme necessário. Você pode ver que nosso html forneceu espaços para nossos três tipos de estados aqui. Temos nossa div de espera que mostraremos quando algo está acontecendo, mas ainda não terminou. Temos uma div de erro para quando as coisas dão errado e esses dois são para preencher quando as coisas dão certo. Então, vamos começar a implementar nosso JavaScript. Então a primeira coisa que eu acho que nós queremos é uma função e vamos chamá-lo de manchetes. Foi um grande começo. Queremos ter certeza de que essa função é chamada quando a página foi carregada ou concluída o carregamento. Então, vamos dizer direto da janela do bastão. AddeVentListener , Correto. Aqui é onde queremos fazer nossa solicitação de API. Então, eu vou adicionar isso muito rapidamente para evitar a dor de me ver passar muitas horas fazendo meus erros de digitação. Então, o que queremos como primeira coisa é bem, para onde devemos enviar o nosso pedido? Sabemos que, olhando para a nossa documentação e aqui, estamos de volta à página de documentação da API de notícias. Sabemos que podemos usar este ponto final das manchetes aqui. Isso é ótimo. Teremos isso lá dentro. Então precisamos ter um pequeno ponto de interrogação para dizer que existem alguns parâmetros em nossa URL e que o nosso - bem, vamos procurar dentro dos EUA. Nosso próximo parâmetro definirá a categoria como entretenimento. Estou usando entretenimento porque o uso geral é meio sombrio às vezes. Eu pensei em mantê-lo grande e, finalmente, vamos definir API Key. Esta é a minha chave de API, por favor, não use a minha chave de API. Não queremos que as notícias ou as pessoas se misturem com isso. Então, aí está. Temos a nossa URL. Agora, o que precisamos fazer depois disso? Como vimos em nossa lição anterior, quando estávamos demonstrando a API do Giphy, precisamos criar uma solicitação e, em seguida, precisamos abri-lo. Diga, pedido aberto. Nós vamos estar usando GET todo o caminho por aqui. Não vamos armazenar dados nessas APIs, então vamos usar GET para que possamos obter dados a partir daí. Então, finalmente, queremos que este seja um pedido assíncrono, então dizemos Verdadeiro. Então, as coisas que precisamos definir é dizer onload, o que não vai fazer nada agora. Da mesma forma, teremos que ter algum tipo de manipulador de erros, o que fazemos quando as coisas dão errado. Vamos definir isso também para uma função vazia por enquanto. Mas o que queremos fazer é, é claro, enviar nossa solicitação e, em seguida, neste ponto, queremos mostrar ao nosso usuário que algo está realmente acontecendo e implementar nossa funcionalidade de espera. Para fazer isso, podemos definir nossa ID ou nossa div em vez de Ajax Wait para apenas voar. Atualmente está escondido. Tem uma exibição de nenhuma. Podemos programar a exibição para bloquear. Então, vamos dizer muito rapidamente e dizer document.getElementById ('ajax-wait') 'block'. Agora, nós realmente não queremos fazer esse tipo de coisa no meio do nosso show - Headlinescode, mas isso é algo que vai se esconder em outra função muito em breve. Mas só queremos ter certeza de que podemos realmente fazer alguma coisa. Então, vamos sair do nosso navegador e dar um giro, e lá está ele girando feliz. Como você pode ver, ainda está lá girando. Nosso pedido foi, obviamente, feito e enviado e estamos exibindo nosso gif giratório. No entanto, bem, o pedido foi concluído? Há algum erro? Nós não sabemos. É melhor fazermos algo sobre esconder isto assim que terminarmos o nosso pedido. Então, aqui vamos nós em nossa função e, claro, queremos definir isso para nenhum agora. Muito bom. Então, vamos voltar para a recarga do nosso navegador. Como você pode ver como eu estou recarregando, nós mostramos um pouco div girando e então ele vai embora novamente porque nós completamos nosso pedido. Concluímos com sucesso ou sem sucesso? Quem sabe, isso é sucesso de log. Olhe para isso e aqui vou dizer recarga de erro. Olhe para o nosso console, sucesso ou muito bom e sucesso. Então, podemos ver que estamos configurando nossa URL com alguns parâmetros nele, criando um novo objeto XMLHttpRequest. Estamos abrindo, dizendo que queremos executar um GET HttpRequest, com a nossa URL que definiu. Queremos que ele seja assíncrono, quando nossa solicitação for concluída com sucesso, devemos executar a função onload. Que é definido assim até agora. Quando há um erro, queremos fazer isso. Finalmente, enviamo-lo, para que um destes seja executado. Finalmente, queremos exibir [inaudível] para dar ao usuário algum feedback, que sua ação realmente teve um efeito de algum tipo. Agora, a próxima coisinha que eu vou fazer é apenas esconder nosso documento getElementByid blah blah cols lá. Boom, aí está. Então, estamos basicamente usando uma função que leva um ID e um valor de exibição, obtendo o elemento do documento, verificando para ver se o elemento existe e definindo a exibição para o que foi passado. Então temos uma função show e ocultar, um deles passa em bloco para SeTeleDisplay o outro do que passa em nenhum. Finalmente, estamos livres para descer e dizer HideEle ('ajax-wait'), e então fazer a mesma coisa lá. Oops, e então podemos dizer show. Vamos testar isso em nosso navegador novamente, recarregar, que um levou um tempo. Lá você pode ver que nós mostramos nossa pequena div branca, nosso feedback branco e, em seguida, concluímos com sucesso e removemos nossa div de espera da página. Agora, isso é tudo muito bom, mas você pode ver que ainda não estamos mostrando nenhuma manchete em nossa página, que é, o que realmente queremos fazer. Então, em nossa próxima lição, estaremos trabalhando no caso de sucesso em que lemos a resposta da API e escrevemos as manchetes individuais em nossa página web. Como sempre, se você tiver algum problema, as coisas não estão funcionando para você, me avise imediatamente na área de discussão e eu vou ajudá-lo assim que eu puder. 6. Lendo manchetes da nossa API de notícias: Está bem, então. Então, nesta lição, vamos verificar como podemos finalmente ler os resultados de nossa solicitação de manchetes de nossa API de notícias. Vimos como vamos esperar por eles e sabemos que nossa solicitação é concluída com sucesso, mas ainda não fizemos nada com a resposta. Então, hoje vamos ver como podemos ler os resultados. Vamos ver como os analisamos, já vimos como fazer isso no JSON, mas vamos trabalhar nisso de qualquer maneira. Finalmente, vamos realmente começar a exibir nossas manchetes. Então, aqui estamos em nosso código JavaScript e se vamos e olhar para nossa própria função de carga. Você pode ver, como você se lembra, nós simplesmente escondemos nosso pequeno spinner e, em seguida, registramos o sucesso no console. Não super emocionante, mas o que podemos fazer em vez disso, provavelmente a próxima coisa não tão emocionante, mas mais útil, é em vez de registrar sucesso podemos registrar solicitação responseText. Então, agora, responseText é tudo o que a API enviou de volta para nós, e lembre-se que este é um grande fluxo no formato JSON, então não é um objeto JavaScript que podemos fazer qualquer coisa útil ainda, mas podemos liberá-lo para o log e ver o que dentro dele. Então, vou guardar isso. Volte para o navegador, recarregue. Está demorando um pouco. Ele está carregado agora e você pode ver que de fato nós temos algo de volta de nossa API. Diz, “Status OK, total de resultados 20”, e depois entra em artigos. Você pode ver que você tem um quadrado, suporte no início lá, o que significa que é um array e , em seguida, ele apenas vai para fora da borda da linha de console porque é bastante grande. Então, neste ponto eu estou pensando, “Cara, eu quero ver o que está dentro dessa resposta.” Então, vamos voltar para a nossa documentação API de notícias e enquanto podemos ir para a documentação de resposta aqui e ver, oh yeah. Temos status, resultados, artigos. Que tudo se alinha com nossa expectativa do que vimos em nosso console e, em seguida, dentro da matriz do artigo, temos fonte, autor, título. Este é o título ou título do áudio. É com isso que queremos brincar, certo? Então, vamos voltar para a primeira página da web, e agora o nosso código e, em vez disso, o que vamos fazer é dizer NewsData. Assinar de usuário JSON.parse. Sim. Então, podemos fazer isso e só para que saibamos que algo sensato está acontecendo, vamos imprimir nossa variedade de artigos. Então, vamos pegar nosso registro do console a partir daqui e pegar nossos artigos NewsData. Novamente, isso não é como uma coisa super útil, mas ele vai verificar para nós que temos um objeto JavaScript e podemos ver os artigos. Então, recarregar, e o bom e velho Firefox, quero dizer que o Firefox aqui nos deu uma matriz que podemos ir e olhar aqui. Bem, e podemos ver que a primeira coisa é algo sobre Rihanna e outra coisa é sobre os Vingadores e Kylie Jenner. Tão excitante. Então, agora o que podemos fazer é ter um loop completo simples e velho e dizer, “Para var ArticleIdX é zero.” Digamos que ArticleIDX é menor que o comprimento ArticleIDX, vamos fazer um plus. Eu não sou um grande fã desses tipos de operadores, mas manter a vida simples. Eu posso ir para isso agora. Ok. Então, eu tenho um pequeno loop completo e, finalmente, eu não estou satisfeito com essa formatação. Como eu disse, vamos imprimir exatamente um artigo, certo? Então, vamos dizer artigos de notícias. Vamos imprimir o título de cada artigo. Sabemos que há um título lá. Então, vamos tentar isso. Voltaremos ao nosso navegador e o que registramos agora é um monte de artigos ou manchetes de artigos para o nosso console, o que é ótimo. Então, estamos ficando cada vez mais perto e mais perto do que realmente queremos. Agora, a próxima coisa a fazer é colocar tudo isso na página web em vez do console, e para fazer isso eu vou fazer este truque estranho. Vamos chamar que a saída é uma matriz. Então, o que vamos fazer é construir uma matriz de HTML que podemos encaixar em nossos artigos ou nossas manchetes, div. Então, lembre-se que temos essa div com uma identificação de manchetes e vamos colocar um monte de coisas nele. O próximo passo mais simples que podemos fazer é dizer, “output.Push the title”, e finalmente, podemos dizer, “Get by id”, e que foram manchetes, HTML interno, sinal de usuário output.join, assim. Então, o que estamos fazendo? Estamos recebendo nossas manchetes div. Estamos dizendo que queremos que o HTML, basicamente tudo dentro do div seja igual ao nosso array de saída unido com um monte de novas linhas. Então, nós podemos ir e dar uma olhada nisso e então nós temos um monte de manchetes todas em uma grande massa ininterrupta no meio de nossa página lá. Novamente, até agora tudo bem. Mas nós executá-lo, é um pouco mais agradável e cada vez que fazemos a manchete vamos colocá-lo dentro é muito próprio div. Isso vai fazê-los aparecer em nova linha e nos dá a oportunidade de aplicar algum estilo para eles também, porque olhar para alguns estilos predefinidos prontos para nossos artigos. Então, vamos abrir uma div. Vamos colocar nosso artigo, título ou título dentro dele e então vamos fechar essa div, e novamente podemos obter o benefício disso apenas juntando nossa saída em uma grande string longa e atribuindo-a a HTML no elemento de nossas cabeçalhos. Então, vamos voltar a isso e vamos recarregar, e você pode ver que eu tenho uma pequena linha acima e abaixo de cada uma das manchetes do artigo. Apenas para separá-los um pouco, e você pode eles estão aparecendo individualmente em cada linha. Então, estamos cada vez mais perto e mais perto de como queremos que eles realmente apareçam. Mas lembre-se, nós queremos que eles sejam cliquey. Você vai querer ter que clicar sobre eles. Então, a próxima coisa que podemos fazer é colocá-los dentro e uma etiqueta. Então, vamos dizer, “um href é igual. Então, podemos colocá-los dentro de uma etiqueta como essa. Agora, quando voltamos para o nosso navegador, nós recarregamos e eles estão todos clicando o que é ótimo, mas quando clicamos neles, eles realmente não fazem nada. Mas agora, isso está ficando um pouco ocupado dentro dessas funções onload aqui, e eu realmente quero colocar tudo isso dentro de uma função própria apenas para separá-lo um pouco. Então, eu vou subir até o topo aqui e eu digo estou tentando MakeHeadline. Você pode ver como eu poderia ter pensado nisso antes. E nós vamos ter aqui, nós teremos nosso título, isso é tudo o que precisamos saber realmente. E, sim, então coloque tudo isso aí. E isso só se torna o título. E então o que queremos fazer é retornar nossa saída. Então, podemos passar a saída e devolvê-la novamente com mais algumas coisas dentro dela. Então, agora precisamos usar nossa função MakeHeadline. Curiosamente eu apaguei aquele pedaço de texto muito útil. De qualquer forma. Lá está ele de volta novamente. Vamos testar se isso funciona. Recarregar e, claro eu preciso incluir a nossa saída bem e dizer que a saída é atribuída lá. Ok, finalmente podemos fazer isso, e tudo bem. Então, isso é o que precisamos aqui, e certifique-se de que tudo funcione como esperado. E faz, então tudo bem. No entanto, precisamos do nosso MakeHeadline, precisamos de um pouco href para fazer algo quando é clicado. Então, vamos dizer onclick é igual, vamos apenas dizer log. Curiosamente temos que começar a escapar aspas aqui, clicado. Só para ter certeza de que isso vai funcionar para nós também. Certo, guarde isso. Volte para o nosso navegador, e podemos dizer clique, clique, clique, clique, clique. Podemos ver que isso está sendo executado lá. E podemos ser perdoados por pensar que a próxima coisa a fazer é decidir bem, vamos colocar o nosso título lá. Como isso, certo? Ok. Então, vamos apenas verificar. Veja como isso funciona. Dê uma recarga a isto. Finalmente, ótimo, estamos mostrando todas as nossas manchetes aqui, e vamos escolher um com muito cuidado para clicar, e excelente que exibe a manchete em nosso console, e da maneira que queremos. Clicamos nessa linha, erro de sintaxe, um colchete ausente, entre colchetes após lista de argumentos. Então, podemos ver que escolhi uma dessas manchetes, tem uma citação nele. E, claro, estamos usando aspas simples aqui para incluir nosso título. Então, infelizmente vamos ter que fazer algo sobre as citações que estão dentro do título. E a coisa rápida e fácil que podemos fazer é um substituir todas as nossas aspas simples. E todos eles. Então, eu coloquei um g lá para dizer, obter tudo que você encontrar na string, não apenas o primeiro, e então nós queremos substituir isso por uma barra invertida, e como é uma barra invertida, precisamos fazer um escape duplo da barra invertida. O que é super chato. Eu usaria aspas duplas para isso. Certo, então o que estamos fazendo aqui? Estamos dizendo, o que queremos fazer é substituir cada aspas simples, uma barra invertida seguida por uma única aspas. Então, estamos escapando deles basicamente, dizendo que esta aspas simples não tem função nesta string. É só para exibir. Quero dizer, usamos duas barras invertidas porque estamos dizendo não faça a fuga agora, faça a fuga na string real que é impressa. Nossa, então o que precisamos fazer agora é voltar para nossas notícias do Giphy, página web, recarregar. E vamos escolher algo que não tenha citações nele. Então, há uma sobre Karlie Kloss. Podemos ver que Karlie Kloss foi impressa para o console, felizmente. E quanto aos Vingadores Infinito? Veja aqui nossas aspas simples aparecendo no console. Dias felizes. E finalmente ter que algo com aspas duplas nele. Oh, querido, literal de string não terminada. Então, isso vai causar problemas, por causa das aspas duplas. Vai haver uma última coisa que vamos fazer aqui. Vamos dizer EncodeuriComponent. Agora, isso é algo que é construído em Javascript, que é para preparar uma string para ser usado em uma URL, mas nos dá outros benefícios, como codificação de muitas das strings que causam, ou codificação de muitos dos caracteres que causam, nós problemas. No entanto, aspas simples não são tratadas por EncodeUriComponent. Cabeça para trás. Nós daríamos a nossa página uma recarga, clique neste título mais problemático e você pode ver o que temos aqui. Os espaços foram transformados em porcentagem dois zero, que é um valor hexadecimal para um espaço, e nossos outros caracteres problemáticos também foram convertidos. Você pode ver que a aspas duplas é agora por cento dois, e nós ainda temos nossa única citação lá que foi escapada com uma barra invertida, é por isso que ele está aparecendo feliz em nosso console. E o ponto é que agora temos um valor que podemos alimentar na API giphy para recuperar um monte de imagens que correspondem a Drake hop em N*E*R*D e Lemon Remix de Rihanna. Então, isso é o mais longe que nós vamos levar isso para esta lição porque o que nós fizemos foi enviar com sucesso uma solicitação para a API de notícias. Recebemos uma resposta. Nós processamos a resposta, e colocamos em nossa página web. Estamos tomando medidas quando a resposta ou quando o título é clicado. E a próxima coisa que queremos fazer é enviar isso para a API do Giphy para obter um monte de imagens de volta. Como sempre, se você tiver algum problema durante esta aula, fazendo isso você mesmo, lembre-se de me informar na área de discussão e eu o ajudarei imediatamente. Caso contrário, verei você na próxima lição. 7. Lidando com as falhas do AJAX: Está bem. Então isso nos leva ao último dos três estados do Ajax que eu falei, aqueles que precisamos cuidar se tivermos o uso do Ajax bem e isso é o fracasso. O que fazemos quando as coisas não dão certo? Bem, isso é tudo sobre lidar com erros, obviamente. Então, se enviarmos uma solicitação fora e a resposta indicar que não foi bem sucedida por algum motivo, e devemos informar o usuário que as coisas não deram certo. Que o que eles estavam tentando fazer talvez não tenha sido bem sucedido. Eles devem tentar de novo? Isso tudo faz parte de garantir que o usuário entenda em que resultado sua ação resultou. Mais uma vez, isto vai ser um pouco “codealong”. Por favor, copie novamente a codificação enquanto for. É apenas uma ótima maneira de aprender e muito melhor do que sentar e assistir porque obviamente eu estarei fazendo isso também, ao mesmo tempo. Então, vamos voltar para o código, e como um atualizador lembre-se que temos esta div bem aqui com um ID de erro. Este é o que vamos usar para exibir mensagem de erro, e ele tem algum início especial predefinido em nosso CSS para torná-lo um pouco vermelho e um irritado como um erro. Também está definido para ter uma exibição de não [inaudível], modo que normalmente não a vemos. Então, aqui estamos em nosso código Javascript, e aqui está a função do nosso show headline e apenas perdemos lá por um minuto. Aqui estamos em erro. Então, atribuímos uma função à propriedade on error da solicitação. A primeira coisa que fazemos é esconder os dentes brancos, para que o usuário saiba que seu pedido foi concluído. Então, a última coisa que vou fazer é obter o nosso elemento de erro, e configurá-lo para uma mensagem de erro. Lá vamos nós. A última coisa que precisamos fazer é mostrar um elemento, que é o elemento de erro. Então, aqui estamos nós. Vou recarregar o arquivo. página da Web, e você tem que clicar sobre este, e eu posso ver que ainda está se comportando como ele fez antes. Agora, a manchete está a aparecer na consola e está tudo bem. Não estamos vendo nenhuma mensagem de erro que se formos e desligar nosso WiFi e “Hey presto, eu vou fazer um reloaded”. Vemos uma mensagem de erro apenas não é a mensagem de erro mais bonita do mundo, mas podemos dizer que estamos indicando claramente que houve um problema e estamos captando o fato de que houve um problema e dizendo ao usuário sobre ele. Bom para uma recarga, e lá temos nossas manchetes de volta. Então é isso, demonstração muito rápida de como podemos mostrar quando as coisas correram mal sem o pedido do Ajax. Em nossa próxima lição, vamos colocar tudo o que você aprendeu até agora em ação, inscrevendo-se na API Giphy. Checando os documentos e encaixando nossas manchetes na API do Giphy para mostrar algumas imagens. 8. Acesse a API do GIPHY com suas novas e incríveis habilidades do AJAX: Está bem. Então, é hora de colocar suas novas habilidades em ação. É hora do treino. A prática ajudará você a consolidar tudo o que aprendeu até agora. Vamos usar o motor de busca GIPHY. Vamos pegar o título que temos, ou uma das manchetes que podemos clicar em nossa página da web, e inserir esse título na pesquisa de imagem do GIPHY e, em seguida, exibir todas as imagens que correspondam a esse título. Vamos fazer isso um passo de cada vez. Então, eu não estou dizendo, “Ei, apenas vá e faça isso agora.” A primeira coisa que precisamos fazer é se inscrever para uma chave API no GIPHY. Então, vá para developers.giphy.com. Clique no botão Login. Clique em Juntar GIPHY que está em minúsculo escrita na parte inferior do log no formulário. Volte para developers.giphy.com, porque uma vez que você se juntou, eu acho que ele deixa você em giphy.com. Clique em Criar um aplicativo. Em seguida, preencha o formulário para criar o aplicativo. Em seguida, ele irá mostrar-lhe a sua chave API. Você poderá usar isso em qualquer chamada para a API que você fizer. Vou fazer isso agora mesmo. Tenho certeza de que você já se inscreveu para serviços online antes. Então, não vai haver nada super desafiador aqui. Mas, eu ainda encorajo você a ir e tentar isso antes que você me veja fazer isso também. Está bem. Então, aqui estamos na página de desenvolvedores do GIPHY. Provavelmente é tudo o que se espera do GIPHY. Então, eu vou clicar em Login. Vou clicar no pequeno link GIPHY Junte-se ao GIPHY. Acho que a página de inscrição deles é bastante distrativa. Vou usar o meu luke.fabish @lukefabish. Vou definir meu nome de usuário para lukefabish-gifs, e minha senha seria incrível, algo em torno disso. Lá vamos nós. Não sei se consegue ouvir pelo microfone. Esta página está fazendo os fãs do meu laptop girarem e girarem como loucos. Então, eu vou clicar em Juntar-se e sair disso o mais rápido possível. Diria para não guardar isso. Está bem. Então, nós nos inscrevemos e agora eu posso clicar em Criar um aplicativo. Então, vamos dizer, todas as notícias que o GIPHY pode nos dar. Vou chamar-lhe GIPHY News. Vou clicar em Criar aplicativo e boom. Há minha chave de API, que selecionei e copiei. Então, essa é a chave que podemos usar para fazer solicitações de API contra GIPHYS API. Agora, que já fizemos isso, é melhor irmos revisar os documentos da API GIPHY. Então, podemos encontrá-los em developers.giphy.com/docs. Há apenas uma navegação à esquerda. Confira a Documentação Técnica. Clique em Pesquisar ponto final. Em seguida, você poderá revisar seus parâmetros nas solicitações e poderá ver o que está incluído na resposta dessas solicitações. Parte dessas respostas é algo chamado de objeto GIF, eu acredito. Então, confira as Definições de Esquema, novamente, na navegação à esquerda. Clique no Objeto GIF. Acima de tudo, não se preocupe. Vou passar usando a resposta GIPHY, particularmente o GIF Object, que é um pouco grande. Eu me encontrei um pouco desconcertante. Mas, vamos fazer isso juntos. Está bem. Portanto, você não precisa digitar esse URL na barra de endereço. Podemos apenas clicar no item de menu Documentos. É sobre um alegre e Giphy-like novamente. Mas aqui no lado esquerdo, temos Documentação Técnica. Confira isso. Aqui está a nossa Pesquisa GIFS. Então, vamos para o Endpoint de Pesquisa. Você pode ver que o host é api.giphy.com. Aqui está o nosso caminho e ele nos diz o que deve entrar no pedido. Nossa chave de API, é claro, consultas, que vamos definir para o nosso título, e algumas outras coisas que nós, ou a outra que vamos realmente usar é a escrita. Vamos configurá-lo como G para nos protegermos de alguns dos conteúdos GIPHY mais desafiadores. A resposta nos diz que temos algo chamado dados. Isso vai ser o que teremos uma matriz de GIF Objects, Paginação, e algo chamado Meta Object. O que realmente precisamos verificar, oh, cara meu fã está ficando louco no momento, é o GIF Object. Podemos clicar aqui para ir e olhar para ele. Mas, Eu disse que é em definições de esquema, e é GIF Object. Aqui vamos nós. Ele nos diz que temos que digitar uma identificação, uma lesma, muitas coisas na verdade, como muitas, e muitas e muitas coisas. Inclui a maioria de todas as imagens. Então, temos que ir e olhar para o objeto de imagens. Este é o lugar onde nossos dados de imagem realmente residem ou URLs para encontrar a imagem. Há um monte de tipos diferentes nesta resposta. Há altura fixa, largura fixa e largura fixa, e largura fixa ainda, e largura fixa reduzida, e assim por diante, e assim por diante, e assim por diante. Descobrirá que chegaremos ao original. Está bem. Então, este é o que vamos usar. Então, vamos encontrar o nosso original, que é outro objeto, que tem uma URL. Nós usaríamos esse URL para exibir nossa imagem. Como eu disse, isso é um monte de detalhes. A coisa que queremos está bem enterrada na resposta. Vou te mostrar como podemos acessar isso em nosso código. Então, um passo de cada vez. Como vamos fazer nossa pesquisa GIF. Então, esta é a parte em que eu quero que você acenda seu editor de texto, vá de onde nós paramos com nossos outros passos até agora, e basicamente, faça uma cópia da função do nosso show headline que já temos e chame-o Mostrar GIFs se você Gostei. Vamos substituir algumas coisas lá para começar. Então, você sabe como nós construímos a URL com alguns parâmetros. Agora, nosso URL deve ser este, http://api.giphy.com/v1/gifs/search. Devemos usar os parâmetros da seguinte forma. A classificação deve ser G, Q deve ser a manchete, e eu vou falar sobre isso em um momento, e a APIKey deve ser definida para qualquer que seja a sua chave API que acabou por ser. Em seguida, atribua uma função para onload para sua nova solicitação HTTP XML. Basta fazê-lo imprimir os resultados da solicitação de API para o console do navegador. Então a propriedade onerror pode ser praticamente como era antes com uma mensagem ligeiramente diferente, certo? Ocorreu um erro ao obter GIFs em vez de haver um erro ao obter manchetes. Mas a coisa que eu realmente queria voltar é para os parâmetros. Eu disse que Q deveria ser igual a sua manchete clicada. Então, você sabe onde construímos nosso link principal. Aqui está bem aqui. Estamos construindo nossa ligação. Temos onclick=console.log. Mude isso para o nome da sua nova função, Mostrar GIFs, se é assim que você decidiu chamá-la. Vamos passar em nosso título codificado URI. Em seguida, isso estará disponível para você passar para o pedido de pesquisa GIPHY. Então, por favor, tente implementar isso. Como eu disse, podemos começar com uma cópia da nossa função Show Headlines, modificá-la usando as informações que você tem aqui. Depois de fazer isso, vou ver como podemos começar a exibir imagens individuais na página web. Então, aqui estamos de volta e agora vou fazer minha função Show GIFs. Então, como eu disse, eu realmente, super fortemente encorajá-lo a fazer isso por conta própria antes de seguir por aqui. Só porque isso é uma prática super boa. Vou começar com uma cópia da nossa função de manchetes do programa e sobre o topo da última chave, erro fatal de cálculo. Então, o que queremos fazer, deixe-me chamá-lo de Mostrar GIFs. Está bem. Então, temos Mostrar GIFs em nossas manchetes URL vai se tornar nosso URL GIFs. URL GIFs, eu vou usá-lo aqui em baixo. Ok e eu vou substituir isso com o GIPHY API End of Point. Então eu quero definir nossa classificação é igual a g. Eu vou dizer q é igual a, bem, nós precisamos ter esse tempo passado. Eu vou dizer, eu só vou chamá-lo de Termo de Pesquisa, porque nós definitivamente poderíamos usar isso novamente no futuro. Então, vamos procurar, podemos usá-lo para procurar mais do que manchetes. Está bem. Então, há nossa URL com parâmetros. Estamos fazendo nosso pedido como antes. Emitimos um Get uma vez que estamos pedindo informações e não tentando atualizar informações no servidor. Deve ser um poste. Agora, vamos definir o nosso onload. Mais uma vez, eles vão esconder o nosso elemento de peso. Nós diremos, bem, sim, então, vamos apenas enviar isso para o console, certo? Como eu disse, iríamos console.log. Podemos nos livrar do resto, por enquanto. Em caso de erro, diremos : “Ocorreu um erro ao recuperar GIFs. Por favor, tente novamente.” Então, a última coisa que precisamos fazer é ter certeza de que essa coisa é chamada quando uma de nossas manchetes é clicada, então vamos voltar para onde construímos a manchete e vamos dizer, “ShowGIFs”. Lá vamos nós. Então, vou recarregar nossa página de notícias do GIPHY. Deixe-me clicar em uma manchete, e você pode ver que nosso branco está aparecendo e desaparecendo. Então você pode ver que temos tudo isso aqui do GIPHY, então esta é a resposta da API do GIPHY. Como prometido, ele começa com uma chave de dados, que é uma matriz de objetos GIF como vimos definido na documentação GIPHY. Então, aqui estamos novamente em nossa função show GIFs, e eu vou abordar isso da mesma maneira que fizemos anteriormente. Vamos trabalhar com isso um pouco de cada vez apenas para que possamos navegar lentamente em direção a obter essas coisas para fora na página da web em um formato que queremos. Então, a primeira coisa que vou fazer é definir um objeto. Vou chamá-lo de GifData é igual a JSON.parse (req.responseText). Vamos produzir que, em vez disso, GifData. Então, eu vou salvar isso, voltar para o nosso navegador, recarregar, clicar em uma manchete e ver que isso foi dividido agora em um objeto real e sendo impresso bem para nós pelo Firefox. Temos três partes fundamentais da nossa resposta. Temos dados, temos meta e paginação. Paginação é informação sobre quantos resultados existem, quantos resultados estão acima de uma página, e isso nos permite página através de grandes conjuntos de resultados. Mas, não vamos fazer isso, vamos apenas fazer o primeiro, a primeira página de resultados. Um pouco de metadados nos dizem sobre nosso status, 200 ok, a mensagem está bem, e nos dá ID de resposta, e finalmente, dados com nossos objetos GIPHY, que são todas essas coisas. Se olharmos para um desses, podemos ver que as coisas que vimos na documentação estão aqui. Estamos interessados em imagens. Vamos descer com as imagens e, finalmente, depois de tudo isso, podemos ver que há um original com a URL. Podemos usar esse URL para realmente olhar para um GIF. Pergunto-me o que é esse GIF. Vamos clicar nele. Muito bom. Então, vamos começar a usar esses dados. Então, em vez de apenas registrar os dados GIF, o que podemos fazer é configurar outro pequeno loop para. Eu vou dizer para, dizer que é menos do que o número de elementos em nossa resposta. Então, eu vou dizer “Gifdata.data.length.” Eu vou dizer, “GIFIDX”, novamente por brevidade usando um operador unitário, não um fã. Então o que podemos fazer com isso? Bem, o que podemos fazer é dizer, ok, por favor mostre-nos dados (GIFIDX) .images.original.url. Meu Deus, então acho que está correto. Não me lembro exatamente. Vamos ver o que temos na nossa consola. Recarregue. Clique em uma manchete, e aqui temos um monte de GIFs. Agora, vamos clicar um para cima, ver o que conseguimos. Eu acho isso levemente viciante clicar nessas coisas para ver o que elas são. De qualquer forma, agora que temos isso, temos tudo o que precisamos para começar a enfiar imagens na nossa página web. Mas, como vamos fazer isso? Bem, realmente o que eu quero fazer é criar um monte de tags de imagem e colocá-los dentro de nossa div GIFs porque se você lembrar, nosso HTML tem um div com um ID de GIFs, então eu quero preenchê-lo com imagens, cada uma com seus atributos de origem definidos para qualquer que seja o nosso GifData, GIFIDX, images.original.url é tão direto. Eu sei que vou querer uma nova função para isso. Vamos inventar um, AddGifmage assim. Isso vai ser algo que adiciona nossa URL para criar uma imagem dentro de um contêiner. Então, nosso contêiner vai ser aquele div chamado GIFs. Então queremos tudo isso lá. Esses sons engraçados que você pode me ouvir fazendo só eu usando comandos. Então, nós temos uma definição de uma função para fazer isso por nós. Então, vamos acima acima mostrar GIFs e criar esta função chamada função AddGIFImage AddToElementId e IMGSRC. Então, o que queremos fazer é criar uma nova imagem, e vamos dizer, porque vamos pedir ao navegador para fazer isso para nós criarmos um novo elemento de imagem, CreateElement do tipo img. Agora que temos uma nova imagem, podemos dizer que é uma fonte, e dizer newIMG.source é igual a fonte da imagem. O que queremos fazer agora é adicionar isso à nossa imagem, bem, um contêiner para nossas imagens. Passamos o nome desse contêiner aqui, AddToElementID. Eu poderia chamar isso de ImageContainerID. Parece ser um nome mais intuitivo. Então, vamos dizer ContaineRele é igual document.getElementByID (ImageContainerID). Então podemos dizer containerele.add. Não, é apêndice. Obrigado por me lembrar. Editor de texto um NewIMG. Estamos praticamente acabados. Então, o que vai acontecer aqui? Toda vez que olhamos para um desses URLs, precisamos chamar addGIFImage, e vamos dizer, por favor, faça um novo elemento de imagem, defina a fonte para este URL e anexe-o ao nosso contêiner GIFs. Então, nossos GIFs div. Vamos ver como isso vai no navegador. Recarregar, aguardando, e eu vou clicar em 'Will e Graça' Renovado. Ok, e olha o que temos. Aqui está um monte de GIFs aparecendo do GIPHY. Eles combinam mais ou menos com este novo negócio de Will e Grace. Então, sim e eles estão aparecendo assim lado a lado e os GIFs estão aparecendo neste formato de coluna apenas novamente, por causa do CSS que eu configurei anteriormente para isso. Então, isso é muito bom. Então, vamos olhar para outra, Bella Hadid e algo assim, e o que está acontecendo aqui? Algumas coisas pareciam ter mudado, outras não. Eu não tenho certeza se nossa classificação G está realmente funcionando da maneira que deveria aqui, mas nós temos como muito mais GIFs do que deveríamos ter. O que está acontecendo aqui é, porque estamos chamando este AppendChild para o nosso contêiner, ele está adicionando muitos GIFs a ele ou a essas imagens, mas não está limpando os antigos. Então, é melhor fazermos isso antes de fazermos qualquer outra coisa. Então, o que vamos fazer novamente, vamos apenas dizer document.getElementByID, GIFs, ponto, assim. Então, isso quer dizer, hey, tudo dentro de nossos GIFs div definiu para nada, string vazia. Então, vamos ver como isso funciona no navegador agora. Vamos recarregar isto. Vou clicar nessa coisa sobre Barbra Streisand. Vou me livrar do nosso console. Bem, aqui estão os nossos GIFs. Nossa, Príncipe Charles. Então, nós temos algumas outras imagens do Prince aqui claramente, mas podemos ver que esses GIFs anteriores estão sendo limpos e nós os substituímos por todos esses outros tipos de GIFs Princey. Então, este é praticamente o aplicativo como pretendíamos construí-lo. Temos manchetes de um lado, GIFs do outro que correspondem às manchetes quando clicamos neles. Estamos recebendo todos esses dados de duas APIs diferentes onde obtemos as manchetes da API de notícias. Nós alimentamos uma manchete na API GIPHY para obter um monte de imagens GIF correspondentes. 9. E agora, até logo!: Ok. Pessoal, isso é tudo para a nossa aula. Cobrimos muito terreno. Vimos como trabalhamos com JSON. Vimos como acessamos APIs públicas, como podemos usar o AJAX para fazer solicitações, ler respostas e lidar com erros e, claro, criamos nossa pequena página web para mostrar presentes que correspondem às manchetes do mundo. Por favor, não se esqueça de postar seu projeto na área dos projetos. Adoro ver o trabalho que os alunos fazem, e, claro, estou aqui pronto e esperando para ajudá-lo se você tiver algum problema enquanto constrói seu projeto. Caso contrário, por favor, não se esqueça de seguir se você quiser ver mais aulas como esta e estou ansioso para vê-lo novamente no futuro.