Resumo do Tutorial

Então, nós chegamos no final do nosso tutorial e a gente fez uma aplicativa para fazer uma busca de imagens usando o API do Microsoft. Tivemos um desafio pela frente, especialmente pelo content URL. A gente que não conseguiu usar e acabou usando thumbnail URL também para a imagem de tamanho largo na outra cena. E eu gostaria de fazer nesse vídeo é só ajeitar um pouco os chilos aqui, só um pouquinho, mas eu não vou deixar muito... Vou deixar o resto do trabalho para o estilo para você, para você fazer um estilo do jeito que você quiser, quiser embelezar o aplicativo, sinta-se livre a fazer. Então, o que gostaria de fazer rapidinho é só ajeitar esse negócio aqui. Se você ver aqui o acor desse background aqui, um asusinho, não sei se dá para ver no vídeo, mas aqui tem um branco aqui que vem do componente do navegador e que a gente tinha posto uma margem nesse container que tem essa cena. Na verdade, deveria ser um pad, né? Se a gente quisesse do lado e do outro. Sim, em baixo. Para ter um espaçozinho. Então, vamos ajeitar isso. Eu vou aqui abrir o meu arquivo. Você não sabe que no índice aqui, o index, tem o navegador. Tá bom? Esse navegador, a cena inicial é o home. E vai dar esse cara. O home é um componente que a gente definiu na pasta components. Aqui, vamos abrir o home. E deixa eu só... Vamos ver o estilo aqui que está no container para esse cara todo aqui. Na render function, na função render da cena home, a gente retorna ao vídeo que tem esse estilo styles container. O que a gente vai fazer? A gente vai ver aqui o estilo do container. Você nota que tem um asusinho e tem uma margem, mas na verdade eu queria botar um pad. Só para consertar isso. Agora está tudo o asusinho. E não tem mais aquele espaço que era branco, né? Outra coisa que seria legal é consertar esse negócio aqui. Quando dá uma busca, fica parecendo aqui em cima da status bar, no carrier, o horário e a bateria. O jeito de fazer isso, a gente poderia dar uma... Talvez aqui pode um parem. Do jeito que está agora, já tem um parem de 10, que já dá um pouco para... Já deixa o negócio do facinho lá, mas... Uma maneira, você pode botar outro parem em topo, botar 15, vamos ver se acontece. E agora está um pouco mais abaixo da status bar e está melhor ainda. Não acho que esse pad em 10 vai adicionar em todos os lados, mas eu faço o caso especial, vou perder em topo. Botar 20 agora. Dá uma busca, vê o que acontece. Agora está melhor, né? Tá bom, só isso. Tem outra maneira de ajustar o estilo, se você se livre a... ajeitar da sua maneira. Quando clico em 1, tudo ok. Volta. Tudo bem. Então, outra coisa que eu queria fazer rapidinho é sugerir uma refactoring aqui. Vamos lá no imedit detail, que a gente estava usando antes, que quando a gente clica, essa é a cena, chamada imedit detail. Vamos aqui. O que eu queria sugerir é... você nota que a gente está usando styles.com.co, styles.titles, styles.image, e se tiver muito dele, tem que digitar todo tempo styles. Uma maneira de não ter que digitar mais isso é fazer um destruction do mesmo jeito, da maneira que a gente fez nesse caso aqui. Então, a gente podia fazer, se você não quer mais digitar styles.com.co, se tiver muito... se você tiver só um componente com o style aplicado, eu não faço refactoring. Mas se tiver mais de 2, tem muito style.style.todo, quase todo quanto, então eu não quero digitar mais, então eu faço um destruction aqui. Então, vamos fazer. Então, vou fazer assim. Vamos pegar o container, título, imagem, botão, deixe-te do botão, e que está dentro dos styles, né? Oh, desculpa. Esses caras estão dentro desse objeto styles. Então, vou fazer styles, assim. Então, dessa maneira, e eu pego styles.containers, styles.titles, styles.image, etc. Então, não tem mais que digitar esses caras. Então, vou pastar o comando D aqui, porque eu uso o Atom para selecionar esses caras todos, e vou remover. Tá bom? O que já tem aqui? Deu destructuring, destrutura, que está dentro do objeto styles, vai aparecer assim. Então, a gente não precisa mais escrever os styles.containers. É só uma maneira de dar uma refactoring para digitar menos aqui. Você digita tudo aqui, mas nem aqui, não digita mais, fica mais melhor de ver o visualizar o que está acontecendo, em vez de ter duas palavras style. Vamos só ver se está funcionando ainda, se não deu pau. Tudo bem, né? Então, você pode fazer esse refactoring nos outros coisas que você quiser. Vamos ver isso aqui. Tá bom? Note que a outra maneira, também como eu fiz esse negócio aqui, eu poderia fazer esse destruction dentro do argumento. Eu acho que a gente fez em outro aqui, vamos ver. Ou não. A gente fez no componente image list item, a gente deu destruction logo no list de argumentos. Você poderia fazer isso aqui, do mesmo jeito, pega esses caras e põe aqui. Aí não precisa mais disso. Tá bom? Mas eu vou deixar aqui, só para vocês verem. E é isso, por isso é o refactoring que eu queria fazer. Para mostrar a vocês. E a gente terminou a aplicação, está tudo bem, funcionando, tudo legal. Vou só dar um revisado aqui, no que a gente fez desde o começo. Então, ah, também essa parte aqui, esqueci, inicio route, você não precisa dar quotes. Que a gente definiu uma constante chamada home que está importada aqui. Então, não precisa fazer isso. Então, pode só por home, deixa eu salvar. Dá tudo ok. Então, nossa aplicação aqui, a gente tinha um wireframe que a gente implementou usando o reactnative com duas cenas. Primeira cena da principal, chamada home. A gente tem um título, tem a caixa de busca, e tem um botão sensível talk. E tem essa lista de itens, que cada item é uma imagem. Com a descrição, se clicar, vai para outra cena. O cena tem um título, tem a imagem maior, tamanho maior e botão de voltar. Então, a gente aprendeu a dividir a nossa aplicativa em componentes diferentes, múltiplos componentes. E temos um componente para a busca, caixa de busca e tem o componente para a lista de itens. E tem o componente, que é o item individual da sua lista. Tá bom? A gente chamou isso de Então, a gente já aprendeu a noção de componente funcional versus componente de classe. Nosso caso, a imagem list item é um componente funcional, porque não é definido usando uma função com uma variável, e não é classe. Contraste o imagem list, definido como classe, componente classe. É o componente classe mantenditado, state, enquanto o componente funcional não mantenditado. É só usado para mostrar coisas e recebemos propósitos aqui que a gente vai usar para fazer o rendering, o template. E não mantém estado. Então, quando a gente clicou em buscar aqui, botão buscar, deu um press e chamou a função onSubmit do search bar que estava definido aqui, e chamou a função que foi passada, injetada com propriedades para a search bar. OnSubmit, e a gente passa o palavra-chave que está no estado da search bar, que é linkada a essa caixa de texto. Se você notar do home, aqui, tem um search bar, a gente injeta a propriedade, onSubmit. Na verdade, a cena home é que tem a função para lidar com o search submit. Não é a caixa de texto, mas é o todo esparante. Então, quando a gente clicou em buscar, vai fazer essa query na API da Microsoft que a gente definiu aqui e faz um fetch, que é como se fosse aJAX, aJAX, e quando a gente recebeu a resposta, a gente setou o estado com os itens que veio da back-end. E está aqui, tem um endpoint, que você pega quando se cadastra na API da Microsoft, do Cognitive Services, do Bing. A gente também usou o setou-stado buscando para false, para mostrar o carregando. Porque quando vai fazer um pedido, não vai receber na mesma hora a resposta, vai demorar um pouquinho, então a gente fez um negócio carregando para ficar mais melhor para a experiência do usuário. A gente deu uns estilos, não focamos muitos nos estilos, porque a gente queria aprender mais a funcionalidade como fazer aplicação, mudar de tela, mudar de cena, e a gente usou o navegador. O navegador, se você notar, vai no index aqui, a gente adiciona o navegador. Primeira propriedade, que é o RenderSync, que a gente definiu a função que vai ser usada para lidar com as rotas. E tem o initial route, que é a rota inicial. É o objeto que vai ser o objeto inicial do route. Aí quando bate aqui no RenderSync, quando o navegador vai olhar aqui, dá um switch e determina qual é a rota que vai seguir. Nesse caso, no inicial, vai passar a rota route com id home, que foi um constante que a gente definiu o arquivo routes, e vai aqui, bate no home, retorna o componente home, e também passa o navegador com propriedades. Se não passasse, não teríamos acesso ao navegador. Aí dentro do home, quando a gente clicava no item, a gente dê um push com o navegador, e push vai adicionar esse cara aqui, a gente push um image detail, a rota do image detail, que vai ser a próxima, a gente também passou propriedades usando esse pass props, que é a gente passou as propriedades dados da imagem que a gente clica, que você vê e voltar para o index. Quando bate na rota image detail, ele retorna esse componente image detail, e tem as pass props que a gente passou, vai passar todos os valores que são passados dentro desse objeto chamado pass props, e também a gente definiu um press back, que injetou essa propriedade que tenha acesso ao pop, até acesso no navegador para dar um pop, para desempenhar e voltar para ser na terrio. Tá bom? E no finalzinho, a gente teve que lidar com o image detail, e teve um problema com a HTTPS e o content URL, que teve o redirecionamento da imagem, então a gente optou por usar o thumbnail URL para image detail, em vez do content URL. Então por... Então é isso, essa aplicação aplicativa, se você chegou até aqui, nos parabéns você completou esse tutorial, que tem muitas coisas essenciais que é importante aprender, e se você gostou gostou a você se inscreva, também estou na redes sociais meu twitter nbkhope e o gethub, o mesmo nome nbk h-o-p-e Obrigado, deixa comentários, sugestões, perguntas, sempre bem vindos e se tiver também pedidos para ver, por favor Valeu então, tchau