Summary of Transcript

PINPoint, é isso aqui. Então, rodar um fetch, só requerimento get, pdwget, vou passar o IPINPoint e também ter que ter uma query, né? Eu ainda vou pegar a query da search bar, mas como a gente não fez a search bar ainda, vamos só por um, fazer um aqui. Query, vai ser o que? A gente tem que pôr a interagoração, tem que pôr o kill e vou botar cachorro. Se quiser posicionar MKT, só pôr marketing, sei lá, pode botar. Eu vou dar um fetch, um IPINPoint, eu vou adicionar o query com o IPINPoint. No ES6 você pode usar o back tick, nova forma de, você pode fazer string interpolation com o back tick, tá bom? É diferente desse aqui e desse. Então, vou botar o back tick. Quando eu quiser fazer string interpolation, eu ponho o dollar e o nome da variável, IPINPoint, vai ser substituído aqui com essa URL toda aqui. Aí eu vou botar outro string interpolation com a query. Deu, vai pegar esse aqui e vai combinar esse query com esse aqui. Bom. Aí segundo argumento fetch, eu vou pôr uns headers. Tá bom? Se eu olhar aqui, voltar na documentação, esquecer, para networking do React Native e olha aqui como é que põe. O segundo argumento é esse. A gente só precisa do headers, bom? Vou botar headers e vou pôr aquele que a gente precisa. E esse é o query. OCP, ifmapim, sub, ifmkey. E põe o valor que é a sua credencial. Esse caso eu tinha aqui no reinforcement, copiar, cadê? Ah, tá aqui. Põe sua credencial aí. Você pode copiar isso e botar fora se quiser. E aí aqui. Faça a sua própria, por favor não use a minha. Pai key, põe aqui. Tá bom? Não precisa de ponto de vírgula porque dentro do objeto. Details headers. Agora quando o fetch, vai dar a response, a gente pega response, converte para o objeto e pega aquela promessa. Se lembra que o fetch retorna uma promessa, promise JavaScript, a gente tem que lidar com a promessa e use um dent e converte para o objeto. Retorna isso e mais uma vez, response JSON, faz o que quiser com a response. Esse caso eu só fazer uma manipulação, mas vamos saudar o nosso log. Vamos ver o que acontece. Vamos ver se está funcionando a speed do fetch. Foto aqui. Items not defined. Ah, fudi tudo. Tirei os itens. Tá bom, tá bom. Vamos ver. Tive o itens. O que eu vou fazer? Perai. Volta a tu, zapacopia os itens. Desculpa. Aí, copia. Voltando. Pronto. Vou colocar itens aqui. Volta. Fica em Tolkien. O que eu fiz errado? Linha. Desoito. Ah, esqueci do C. Aí, vamos ver o que a gente recebeu no debugger. Inspect. Cadê o console? Está aqui a resposta. Deu. Object. Type image. A gente tem interessado nesse value, né? Aí que a gente tem todos os objetos. Todos os imagens. Então, vamos olhar. Vamos voltar aqui. Então, quando... Em vez de itens, eu vou botar this state. Itens, ok? E vou definir os itens aqui. Constructor props. Você sabe. Chama o super no props. Define inicio estado. Primeiro, vou botar itens como coletâneo vazia, array vazia. E quando der o component mount, vai setar o state. Com esses itens, ok? Itens será a response.json.value. Bom, você lembra que a gente fez o console logo aqui e a gente está interessado nessa array aqui, que é o value dentro do objeto que é a resposta. Bom, mas como a gente faz isso, cada item vai ser esse, por exemplo, esse cara aqui. Você não tem que usar content URL. Cadê esse? Não tem nada. Não tem nada. Gente, está interessado na thumbnail URL e no name. Tá bom o name, a gente vai usar como descrição, thumbnail URL, como imagem. E tem também um ID que a gente vai usar como aqui para ser o identificador. Então, vamos ver como a gente vai fazer aqui. Se a gente passar os itens com propriedade for image list, vai pegar os itens. Ah, esqueci disso aqui. Vou remover isso. Não precisa mais, é? Então, esse cara aqui, nesse caso, tem esse lógico aqui, vai usar o propriedade. E vai ser passado para cada cara no image list item. Mas o image list está usando URL e está usando imagem. Mas o que é isso? Não sabe o que é, porque só tem itens name, itens, thumbnail URL agora. Bom? Então, vamos ver.