Resumo da Transcrição

A gente precisa definir o Data Source aqui, mas o que isso vai ser? A gente tem que fazer um objeto aqui, o ListViewDataSource, só confirma aqui e a gente precisa usar esse ListViewDataSource, objeto de ListViewDataSource, a gente vai criar com um new e o argumento inicial é um objeto, e esse objeto tem que ter essa propriedade BrowRestChanged que é uma função de Flash, e essa função vai definir se a linha mudou. Primeiro argumenta, primeira linha, segunda linha. Bom, a gente só vai comparar se a primeira linha não pôr igual a segunda. Bom, então, o que isso significa? BrowRestChanged, a linha mudou. Se a primeira linha pôr diferente da segunda, isso vai retornar True, que vai fazer isso ser verdadeiro. As linhas mudaram, então, só uma maneira de dizer que as linhas mudaram. Se a primeira linha pôr o mesmo, igual a segunda, então, vai ser false e as linhas não mudaram. Só um detalhe. Aqui é o return, que não precisa pôr, função de Flash. Temos os objetos DataSource, a gente vai fazer o DSCloneWithRouche chamar essa função e ter que passar os dados, a array aqui que a gente usou no index, esses arrays de itens que foi passado como propriedades chamadas itens para o ImageList. Como temos essa props aqui, vamos usar props itens, e aqui já está ligado. E aí, funcionou. E agora, a gente pode dar um scroll se tiver muitos itens. Legal isso. Então, vamos revisar aqui o ListView. Então, a gente adicionou o ListView aqui, tem duas propriedades DataSource e RenderRow. RenderSource define a fonte de dados para a lista, propriedade RenderRow define como cada item será renderizado. Nesse caso, a gente está usando RenderRow, a gente é uma função de Flash, o item, cada item vai ser um argumento aqui, a gente gera um componente ImageListItem. E a gente passa os dados item que é o argumento da função. E o DataSource aqui está no estado desse componente ImageList que a gente definiu, iniciou o estado chamando DataSource que é o DS, chama a função Clone of Rows. O DS é um objeto que a gente criou, objeto ListView.datasource. Esse objeto é inicializado com um objeto que tem a propriedade RowHashChange que a gente define só para dizer se as linhas mudaram ou não. E a gente passa aqui os itens, os dados para o Clone of Rows para poder adicionar o ListView como DataSource. Então, a gente pode dar um scroll. Agora vamos ver como a gente vai fazer um pedido para API, em vez de ter esses itens aqui, a gente vai usar a API da Microsoft do Bing aqui. Se você fazer uma pesquisa no Google, Bing Image Search API, no meu caso está em inglês, no seu caso deve ter uma página em português. Se não é só clicar aqui nesse aqui que vai para a página aqui. Então você clica aqui, escadaxtra, se não tiver uma conta, e inscreva-se no API do Bing Image Search e você vai obter uma credenciais aqui e está aqui e você clica show e copia esse credencial do... Tá bom? A primeira aqui... Vou voltar aqui, se você dar um scroll aqui para baixo, você pode dar um preview para API, se eu dar uma search para o cachorro, as imagens, vamos volar no JSON, essa aqui é a resposta. A gente vai ter interessado no value que vai dar um array coletando todos os imagens como objetos e cada objeto vai ter esse thumbnail URL que é o URL da imagem e vai ter um name que é a descrição que a gente vai usar. Tá bom? Agora para usar a API você tem que ter as credenciais e fazer um get, pedir o get e para isso eu vou testar a API aqui, eu vou para a minha extensão do Chrome chamada Postman, eu gosto de dizer isso aqui, launch the app, já tenho aberto aqui, o que eu vou fazer para essa API da Microsoft? Eu já copio aqui os links que eu olhei na documentação, se você quiser olhar, vai aqui na documentação, onde é que está? Deixa eu achar aqui... Aqui. Já vi que é em português, no meu caso em inglês. Primeira coisa importante na documentação é que você tem que passar esse header no pedido e o header vai ter o valor do credencial que você copiou dessa parte aqui. Então, primeira coisa que você precisa ter é o header com a credencial, como seu valor, o CP, API, subscription key. E aqui no outro guia, o URL é esse, o endpoint que eu já copiou aqui, API.cognitive.microsoft.com, abing, barra v, 5.0, barra images, barra search, isso que é o endpoint. E desse endpoint a gente vai adicionar uns query, que no exemplo vai botar um guitarragação key que esse key vai fazer o do palavra chave e tem essas opções, outras opções, acho que esse tinha isso que para dizer qual é a língua do... acho que é para marketing, sei lá. Estava em inglês, eu botei português, não importa eu acho, nem precisa mais, só deixa aí. Então, o que é que eu faço? Eu copiei isso, saiu o URL, fui na minha extensão do postman. Cadê? Postman. Pui aqui no get, copy e cola, estou procurando pelo cachorro, imagem de cachorro e vou dar um send aqui. Se você der send primeiro sem botar os headers, vai dizer que access denied. Você não tem acesso porque tem que adicionar o header aqui, vai no header, põe o o, o CP, APIM, subscription key, e copiei e cola o código que você foi dado, credencial. Portantes. Aí dá um send e vai aparecer aqui, se der tudo certo, vai estar images e vai ter o value aqui. Deixa eu botar aqui. A gente vai ter essa no teu name e o thumbnail URL, esse aqui, vamos clicar, que parece. Ah, está aqui. Pô no browser aqui, no navegador, ah, está aí, legal. Não está funcionando. Só resta a gente usar isso do react name. Vamos voltar no nosso projeto. A gente vai dar aqui, vamos pagar tudo isso. O que a gente vai fazer é quando o, esse componente montar, a gente vai fazer um pedido para o back end da Microsoft, para API, tá bom? Então pesquisa de imagens, component, tudo capitalized, o deito de formas. It will mount. Quando o componente está prestes a montar, a gente vai fazer um fetch, se lembra? E fetch tem que ter o URL. Esse caso eu vou por aqui, vou por aqui fora. Com, sei lá, API endpoint. Uma coisa que você quiser falar, lutar aqui, ah, está errado. Cadê copiar aqui? Esse aqui. API endpoint, esse aqui.