Resumo da Transcrição

Nesta série de vídeos a gente vai fazer um aplicativo que vai fazer uma pesquisa de imagens em um servidor externo e a gente vai mostrar as imagens aqui e a gente vai ter a gente clicando em uma imagem e mostrar toda imagem de tamanho maior ocupando quase toda a tela então propósito desse projeto é para a gente praticar usando os componentes do React Native e como fazer o aplicativo da maneira do React então a gente vai usar se a gente olhar aqui na interface a gente vai usar um TextInput para esse caixa de texto vai usar um touch bohilight e um exemplo para esse botão sensível toque a gente vai usar uma list view componente que a gente usa para fazer uma lista e cada componente desses aqui que a gente vai fazer nosso próprio componente individual vai ter uma imagem componente de imagem e vai ter um texto text e quando você tem um deles um dos itens na lista vai para outra cena outra visão totalmente diferente da home da página inicial e vamos mostrar a imagem de tamanho maior e com um botão sensível toque para a cena anterior então a gente vai usar o navegador navigator para poder mudar de cena também então vamos começar só uma coisa a gente vai usar um API API para buscar imagens vou usar a da Microsoft essa aqui vou usar a Bing Image Search API se você fazer um busca no Google o Bing Image Search API você vai dar nisso no meio está em inglês deve ter uma versão em português clica nesse vai para o botão de aqui você vê se você dá uma ir para baixo tem um exemplo aqui por exemplo de como usar a API por exemplo vou buscar a busca aqui são as imagens se quiser o formato de ação que é o que a gente vai querer está aqui e se você dá um olhado nesse formato as coisas que a gente vai precisar é de uma imagem de thumbnail para poder mostrar no nosso aplicativo isso está dentro do objeto chave value que está dentro e o valor desse value é um array que tem vários objetos esse é a primeira imagem essa segunda e assim por diante então nossa não estamos interessados nesse thumbnail URL do value que vai dar o que é que está com a imagem se eu copiar aqui o pra nova tela a gente vai precisar disso e também talvez a gente vai usar o name para dar uma descrição né e se quiser tamanho a imagem tem aqui também width and height então é isso vamos a API da Microsoft você tem que ir aqui clicar aqui get started aí vai pedir para você se você achar se não tiver uma conta já eu já tinha uma conta então eu só fiz subscrever me inscrever nesses serviços aqui então vai pedir qual serviço você quer você escolhe o image search né a pesquisa de imagens aí seleciona pesquisa de imagens e clica aqui eu concordo você vai clicar subscribe depois de selecionar o serviço correto né eu já fiz então quando você fizer tudo certo vai dar essa tela e tem o bingo search a busca para a pesquisa do bingo e vão te dar uma conta aqui que é você clica show mostrar e copia essa aqui que vamos precisar mais adiante quando a gente fazer o pedido para a API tá bom agora vamos voltar e o nosso aplicação aqui aplicativo fullscreen então a gente vai ter nessa vamos primeiro focar nessa primeira cena aqui então a gente vai ter um texto aqui vamos ter essa busca aqui a gente vai ter um componente especificamente para essa busca vamos chamar de search bar tá bom só vai servir para esse input esse botão e o outro vai ser a lista toda vai ser um componente e cada individual cada item da lista vai ser outro componente individual então vai ser componente item da lista que está dentro da componente da lista e vai estar dentro do componente da cena toda entendeu então vamos começar vamos fazer o setup configuração vou no terminal e eu criei aplicação já se você ver aqui eu fiz react nere vnet pesquisa de imagens esse comando vai gerar uma aplicação do react native e já tá aqui vou cd e vou dar um react native run iOS para rodar o simulador do xcode e também vai ter o react packager às vezes eu gosto de primeiro rodar o react packager usando o npm star e depois eu rodo o react native run iOS em outra tab outra aba do terminal mas normalmente você só usar o run os vai funcionar se você tiver problema faz o npm start antes do run iOS então já tô aqui aplicação eu vou abrir o átomo com o meu texto editor de texto aqui estamos no index iOS isso que está aqui a apagar tudo só ver aqui o abril de tal live reload para automaticamente atualizar o meu salvo e vou mudar o debug de sremote o debug remoto para abrir o meu navegador e eu poder ver o que está acontecendo então vamos ver aqui o mockup então a gente vai precisar de vários componentes de busca componentes do item da lista e a lista e a cena vamos focar nesse primeiro vamos fazer uma pasta aqui estamos dentro do pesquisa de imagens criam pasta chamado componentes tá bom já criei chamar de componentes vamos fazer o componente dela agora vou usar os nomes aqui para cada um desses componentes vou usar em leis você quiser usar português mas eu uso a convenção que mais fácil para mim tem uma convenção de nomear as vamos fazer primeiro a a sorte bar esse aqui vai ser o componente para pesquisa barro de pesquisa bom vou fazer outro aqui para ser a lista eu formar image list e vou fazer o item da image list image list aissaite algo