Aprenda a fazer aplicativos móveis com o React Native usando JavaScript!
Neste projeto fazemos um aplicativo que irá fazer uma pesquisa de imagens usando a API do Bing ("Bing Image Search API"). Vamos ter duas cenas: a cena principal com a lista de imagens que foram achadas e a cena secundária, com um zoom-in da imagem que a gente escolher para ver detalhes.
Components que usamos no App: Text, View, TextInput, StyleSheet, ListView, TouchableHighlight, etc.

Pesquisa de Imagens com o React Native

Pesquisa de Imagens (Passo-a-Passo Projeto de React Native)

Curso Pesquisa de Imagens (App móvel c/ React Native) [Aula Tutorial]

# Resumo da Transcrição

Nesta série de vídeos, o objetivo é criar um aplicativo que realiza pesquisas de imagens em um servidor externo, exibindo as imagens e permitindo que o usuário clique nelas para visualizações em tamanho maior. O aplicativo será desenvolvido utilizando os componentes do React Native, seguindo a abordagem do React.

## Estrutura do Aplicativo

1. **Componentes Principais**:
   - **TextInput**: Para entradas de texto.
   - **TouchableHighlight**: Para botões sensíveis ao toque.
   - **FlatList**: Para exibir a lista de imagens.
   - **Imagem**: Componente que exibirá as imagens.
   - **Texto**: Componente para descrição.

2. **Navegação**:
   - O aplicativo usará um sistema de navegação para transitar entre a tela principal e a tela de visualização da imagem em tamanho maior.

3. **API Utilizada**:
   - A Bing Image Search API da Microsoft será utilizada para buscar imagens. O formato da API fornecerá URLs de miniaturas, que serão utilizadas para exibir as imagens no aplicativo.

## Configuração do Projeto

- Inicialize o projeto com o comando `react-native init pesquisaDeImagens`.
- Para rodar o aplicativo, utilize o comando `react-native run-ios`, garantindo que o React Packager esteja ativo.
- Criar uma estrutura de pastas e componentes:
  - Crie a pasta `componentes` e adicione os componentes:
    - **SearchBar**: Componente que gerencia a entrada de pesquisa.
    - **ImageList**: Componente que exibe a lista de imagens.
    - **ImageListItem**: Componente que representa um item da lista de imagens.

## Passos Finais

A configuração inicial e a estrutura de componentes já foram propostas. A próxima etapa envolve a implementação desses componentes e a integração com a API para busca de imagens.

---

Este resumo apresenta os conceitos principais e a configuração inicial do projeto, fornecendo um panorama do que será abordado na série de vídeos sobre o desenvolvimento do aplicativo de pesquisa de imagens.

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


0003-01 Curso Pesquisa de Imagens (App móvel c/ React Native) [Aula Tutorial]

Escrita do Componente de Classe para fazer a Busca de Imagens

# Resumo do Transcript

O transcript aborda a construção de um componente de busca em um aplicativo utilizando React e React Native. Aqui estão os principais pontos destacados:

## Estrutura do Componente
1. **Importações Necessárias**:
   - O código começa com a necessidade de importar o React e outros componentes do React Native, como `TextInput` e `TouchableHighlight`.

2. **Criação do Componente**:
   - Um componente `SearchBar` é criado, estendendo de `Component` para permitir estado.
   - A função `render` é definida para retornar a interface do usuário, que inclui um `View`.

3. **Elementos da Interface**:
   - Um `TextInput` é adicionado para permitir que o usuário insira texto de busca.
   - Um `TouchableHighlight` é usado como botão, contendo um texto "Buscar".

## Estilização
4. **Estilos**:
   - É mencionado que o componente não tem estilo inicialmente, sugerindo que sejam aplicados no futuro. 
   - O autor opta por definir estilos usando `StyleSheet.create`.

5. **Organização do Layout**:
   - O layout é discutido, e o uso de `Flexbox` é mencionado. O padrão vertical (column) é alterado para horizontal (row) para colocar os elementos lado a lado.

## Funcionalidade
6. **Interatividade**:
   - Um evento `onPress` é adicionado ao `TouchableHighlight`, mas a função vinculada a este evento apenas retorna `null`, servindo como ponto inicial para futuras implementações.

## Finalização
7. **Verificações e Ajustes**:
   - O componente é integrado ao arquivo principal, e várias verificações são feitas para garantir que ele funcione como esperado.
   - O autor faz pequenas correções e ajustes de estilo, como borda e padding, para melhorar a apresentação visual do componente.

Este resumo captura a essência do processo descrito no transcript, que é a criação e estilização de um componente de busca funcional em um aplicativo React Native.

Então, a barra de busca, a lista de imagens e o item de cada lista.
E o item, cada item da lista aqui.
Vamos começar com a sorte barra, vamos só fazer uma coisa simples.
Vamos usar um...
Então, a sorte barra vai ter um input, caixa de texto, aqui.
Se a gente vai fazer controlar esse input, vamos botar o tablava-chab dentro do state.
Vamos fazer isso.
Então vamos fazer um componente de estado.
Vamos começar no import react.
A gente vai precisar do react.
Que é o framework, também é precisado do component dentro do react.
Porque vai ser component de estado e vamos import outras coisas do react native.
Nesse caso a gente vai precisar do text input, né?
E talvez um touchable highlight.
O botão.
Ah, também precisar do texto, né?
Text do botão.
Vamos fazer a classe.
Vamos chamar a sorte barra, né?
Extend component.
Sempre deriva do component, se for component de estado, vai ter a render, função render.
Todo o componente tem.
E vamos retornar ao template da função.
Vamos botar um view.
Então, como eu estou usando o view, vamos botar view aqui também.
Agora vamos...
O que a gente tem que fazer agora para ter esse componente disponível,
disponibilizar esse componente no outros arquivos, é ter que exportar.
E eu posso fazer aqui, export default search bar.
Ou eu posso só fazer antes do que, port default class.
Tanto faz.
Então vou deixar lá.
Pode fazer um break.
Novo linha esquisar.
Ou se não, deixa assim.
Então vamos botar um...
Vamos botar um text input.
Aqui, né?
Vamos botar um texto.
A gente pode botar pesquisa de imagem como parte da sorte bar ou não.
Eu não vou botar nada.
Vou fazer...
Vou deixar o pesquisa de imagem parte da cena,
o componente da cena.
E vou só fazer esse text input e o touchable highlight como parte do componente de sorte bar.
Então vamos fazer aqui antes...
Tem o text input e vamos botar um touchable highlight.
E tem um text, né?
Dentro buscar.
Aí...
Até agora não tem estilo.
Então provavelmente não vai aparecer.
A gente tem que verificar para...
Na tela inicial, vamos botar lá, vamos voltar ao index.
Aqui na view, vamos botar o search bar.
Nela.
Mas a gente tem que importar porque ele não conhece.
Search bar, vai dizer, não é definido.
Então vamos importar...
Search...
Bar...
From...
Onde é que está o search bar? Está dentro de componentes, né?
E está...
Se chama...
Search...
Bar...
Busca, está aqui, tem um botão.
Mas...
Não tem estilo para nada, então vamos voltar.
Talvez a gente dê um estilo aqui.
Se quiser, a gente pode fazer um...
Const Styles aqui.
Ou não, pode por estilo inline aqui.
Depende de você, vou fazer o style...
Sheet...
Create.
E como a gente está usando o componentes styles,
Sheet adiciona aqui.
E vamos fazer...
Vou botar styles...
Sei lá, botão.
Busca.
E dá o estilo aqui.
Vamos por order...
Adondada.
Vamos por...
Vamos ver como é que aparece aí.
O que aconteceu aí.
Ok.
Non-empty expression.
Cheveja.
Ok, o adicioner is still...
Está aí.
Não tem nada, vou botar um padding...
6.
Tá bom, melhor que nada, a gente...
Dá um retoc aqui depois.
E todo torche, vou highlight...
O que aconteceu?
O que aconteceu?
O que aconteceu?
O que aconteceu?
E todo torche, vou highlight...
Também tem o on press, né?
O propriedade que vai ser...
Vai chamar qualquer função que é passada essa propriedade.
Quando você clica, não está funcionando.
Vamos fazer uma função de flash...
E vamos só retornar no.
Só para ter um negócio aí, para ver...
Agora o botão funciona, mas não faz nada.
E vamos só ajeitar o text input aqui.
Vamos pôr o styles.
Style, propriedade de estilo.
Vamos pôr os styles.
Vamos pôr, sei lá, busca.
Cacha...
Cacha de busca.
Cacha de busca.
Não esqueça da vírgula aqui.
Vamos pôr também...
Um...
Se bem que eu podia reutilizar os styles...
Estou botando o mesmo estilo, poderia também...
Ou mesmo...
Talvez...
Pega esses caras e ponho outro estilo.
Aí, se você quiser usar...
O estilo...
Talvez eu faça isso agora.
Mas deixa eu terminar isso.
Então, vou botar a borda e vamos botar uma height.
Só para ver...
O que está aí, não é?
Está aí.
Cadê?
E agora...
Está dentro do anvil.
Mas a gente que é aqui, esses caras...
Sejam lado a lado, horizontalmente.
Se lembre que, com Flexbox...
O padrão do React Native vai aparecer...
Flex Direction...
Column.
Então, vai ser...
Linha por linha, então vou mudar para...
Flex Direction Row.
Então, para tudo na mesma linha.
Então, vou botar aqui...
Vou botar inline, tá bom?
E não vou fazer estilo para esse, vou botar aqui...
Flex Direction...
Botar Row.
Só para você ver o que acontece aqui...
Está aí...
Ah...


0003-02 Escrita do Componente de Classe para fazer a Busca de Imagens

Ajeitando o Estilo da Caixa de Texto e Controle do Componente com value e onChangeText

# Resumo da Transcrição

Nesta transcrição, o autor discute a implementação de uma barra de busca em um componente usando Flexbox. O layout é organizado em uma direção horizontal (`flex direction row`), onde a barra de busca ocupará três quartos da linha e o botão de buscar ocupará um quarto.

## Passos principais:

1. **Estrutura do Layout**:
   - A barra de busca recebe um `flex: 3`.
   - O botão de buscar recebe um `flex: 1`.
   - O layout total é dividido em quatro partes (3 para a barra e 1 para o botão).

2. **Configuração do Estado**:
   - O componente `search bar` tem um estado chamado `palavra chave`.
   - O estado é inicializado no construtor do componente, podendo ter um valor inicial (ex: "cachorro") ou estar vazio.

3. **Manipulação de Texto**:
   - Para permitir que o campo de texto altere seu valor, é criada uma função `onChangeText`.
   - Esta função atualiza o estado `palavra chave` com o novo texto digitado pelo usuário.

4. **Uso de Recursos do ES6**:
   - O autor simplifica o código utilizando recursos do ES6, como omitir propriedades duplicadas e parênteses desnecessários.

5. **Próximos Passos**:
   - O próximo objetivo é implementar uma lista de imagens.

O autor cobre de forma concisa como configurar a barra de busca e suas funcionalidades básicas em um componente React.

Então vamos... vamos aqui... só a gente tem dois componentes dentro de um...
uma view e essa view tem flex direction row. O significado é que o eixo principal é aqui horizontal.
Então vamos fazer a busco, o botão de buscar ter um quarto da linha e vamos fazer o caixa de texto
ter três quartos, ocupar três quartos do espaço, tá bom? Então vamos aqui na caixa de busca.
Vamos botar um flex três e no botão buscar flex um. Entendeu? A gente conta que tem dois
elementos. Três mais um é quatro. Então vamos dividir a linha em quatro colunas e o caixa de busca
vai ocupar três colunas, botão de busca uma coluna. Entendeu? É tudo proporcional. Então vamos
tirar esse inspector e vamos também mudar aqui essa view que agora tá todo com o primeiro
da align cell. O view que acontece. Tá aí. Então eu botei essa view, toda view pra ser
a enlongada da unstretched e fiz o caixa de busca ter três quartos e botão de buscar um quarto
da linha. Bom, aí. Agora vamos voltar aqui. Então a gente fez o componente da search bar, né?
E vamos só associar esse text input com um valor, tá bom? Então o valor vai ser dentro do estado
desse componente search bar. Desteite, vamos chamar a palavra chave. Vamos definir o estado,
inicializar, iniciar o estado dentro da constructor, função do constructor, né? Constructor.
Vamos sempre chamar super com as props e já são dadas. Depois disso, desde o state,
inicialize, iniciar com o palavra chave. A gente pode botar um valor inicial, se a gente quiser,
por exemplo, que desse jeito vai ser sempre cachorro, né? Mas vamos botar sem nada agora.
E quando a vez que a gente mudar, digitar uma coisa, você vê que não funciona, paga tudo porque o valor
tá ligado a essa variável de estado. Então a gente tem que botar onde change text. E quando a gente
digitar uma coisa, vai chamar essa função que a gente vai definir e essa função vai mudar o estado
para a coisa que a gente digitou, a nova coisa. Então vamos botar aqui uma função de flasher.
Sempre o argumento é a coisa que você digitou, você pode botar texto ou qualquer coisa.
Vamos botar texto e o que a gente vai fazer é só set state, né?
This set state e a palavra chave, esse tá se referindo a search bar, né?
E vamos dar um objeto pra mudar e vamos falar que a palavra chave é o texto que a gente digitou.
Agora funciona, né?
Então esse que argumento é a coisa que a gente digitou e esse argumento é dado como a
valor, essa propriedade para a palavra chave que está dentro do estado e vai ser mudado.
Como eu gosto de digitar menos, o que que eu vou fazer aqui? Usar uns artifícios do is6.
Eu vou tirar esse texto aqui, eu vou botar a palavra chave,
eu vou mudar o argumento pra palavra chave, tá bom? É a mesma coisa, né?
Você vê aqui.
E o que que eu vou fazer no is6? Não precisa falar assim se você tiver a mesma propriedade com
o mesmo valor, o mesmo nome, pode remover. E aqui também você nem precisa de parênteses se
tivesse um argumento.
Bom, tá aí.
Tudo bem aqui, tudo configurado pra esse componente da search bar, né?
Próximo parte vai ser fazer a lista de imagens.


0003-03 Ajeitando o Estilo da Caixa de Texto e Controle do Componente com value e onChangeText

Implementação dos Componentes para Criar a Lista de Resultados de Imagem

# Resumo do Vídeo sobre Desenvolvimento de Componente de Listagem de Imagens

No vídeo passado, foi finalizado o desenvolvimento do componente **Search Bar**, que inclui um campo de pesquisa (`TextInput`) e um botão sensível ao toque (`TouchableHighlight`). Este componente será utilizado para procurar imagens em um servidor externo através da API do Bing da Microsoft.

## Estrutura do Projeto

O projeto foi inicialmente esboçado, e agora está focado em criar uma lista de imagens que será apresentada após o usuário clicar no botão de busca. Cada imagem na lista terá uma breve descrição. 

## Desenvolvimento do Componente de Imagem

1. **Image List Item**:
   - Um componente funcional chamado `ImageListItem` foi criado. 
   - Ele inclui uma imagem e um texto.
   - As importações necessárias incluem `react`, `Image`, e `Text` do `react-native`.
   - O componente é exportado para ser utilizado em outros arquivos.

2. **Image List**:
   - Um novo componente de classe chamado `ImageList` é criado para conter estados e gerenciar a lista de imagens.
   - A função `render` é responsável por retornar o layout do componente, que inclui múltiplos `ImageListItem`.
   - O componente `ImageList` deve também ser exportado para ser utilizado na página principal (`index`).

## Integração dos Componentes

- Na página `index`, o `ImageList` é integrado logo após a `SearchBar`.
- Neste momento, foi utilizado apenas um componente de item de imagem para visualizar como a lista se comporta.
- A intenção futura é adicionar o `ListView` para gerenciar a lista de imagens obtidas da API.

## Considerações Finais

- O componente `ImageListItem` é simples e não mantém estado, pois não há necessidade no momento.
- O projeto vai evoluir para incluir chamadas à API e renderização dinâmica de imagens na lista.
- O `ImageList` é um componente de estado que se prepara para armazenar os dados da lista mais à frente, conforme a integração com a API for implementada.

No vídeo passado a gente terminou de fazer o componente search bar para fazer essa caixa
de pesquisa e com um botão sensível toque a gente usou o text input e um touchable highlight
a gente vai usar essa caixa de busca para procurar imagens do servidor externo usando a API e vai ser
da Microsoft do Bing vamos voltar a wireframe para ver como é que a gente vai continuar esse projeto
do look e então a gente fez a text input com touchable highlight quando a gente clicar buscar a gente
vai mostrar uma lista e cada linha cada item dessa lista será uma imagem com uma breve descrição
então a gente está falcando nesse primeiro componente essa primeira cena aqui depois a gente vai fazer
a outra cena que você clicar a gente vai usar o navegador para empilhar essa nova cena com uma imagem
e tem um botão para voltar que volta para outra cena original agora vamos focar a fazer essa lista de imagens
vamos primeiro fazer esse item aqui o item da lista e com o item da lista a gente pode fazer o outro componente
que vai ser a lista toda agora para fazer esse componente aqui a gente não precisa manter o estado
então a gente vai fazer um componente funcional chamado functional component inglês então vamos lá a gente só
vai precisar de uma imagem ou image component componente de imagem e o texto text vamos voltar aqui vamos fazer o
image list item né aqui a meu parte de componente a gente vai fazer esse aqui então começa um importando
os modulos que serão necessários primeiro sempre react né port react from react e como vai ser um componente
funcional eu não preciso importar o componente aqui então agora vão importar qualquer coisa que precisar do react native
nesse caso a gente vai precisar do image no text e talvez um bio né para o de dois agora a gente fez todos os importações dos
dos modulos agora vamos definir o componente botar um const o nome do componente e é igual uma função tá bom
eu vou botar a função de flash e o argumento dessa função é sempre as props as propriedades que serão dadas quando
você criar um componente image list item tá bom aí a gente retorna return o template o que nós queremos mostrar na tela
nesse caso vai ser só a um vai ser esse aqui né então vamos botar um a view uma imagem e um texto dentro
vamos lá botou um view uma imagem e um texto né vamos só botar a descrição só mais a gente vai mudar depois para
usar os dados que serão dados via a props né a imagem tem a propriedade source que é a fonte da imagem qual é vamos botar
só para que a gente ainda não tem e isso vai ser o image list item componente mais básico aqui aí para esse
componente ser usado em outros arquivos a gente precisa exportar então vamos dar um export default image list item tá bom
agora para usar esse componente vamos aqui e definir o image list o outro componente que vai ser o container né para todos esses itens
nesse caso eu vou fazer um componente que manterá um estado que irá manter um estado vou usar uma list view o componente de list view
depois agora não mas depois vou usar então vou precisar manter o estado vamos lá import react como a gente vai fazer o componente de estado
component em inglês eu vou botar o componente aqui eu vou destruct destruct structuring vou destruturar o componente que é parte do módulo do react esse
arat aqui então a gente não precisa digitar react.component todo o tempo né agora a gente vai precisar de alguns componentes do react native import alguma coisa
from react native bom a gente vai usar um list view depois então só vou botar aqui só para ter mas ainda não iremos usar agora vamos definir o componente
vamos fazer um class nome do componente image list extends component sempre para o component vamos ter render function a função de render né sempre todo componente de render e render retorna o template
nesse caso vamos botar no view aqui com uns itens como estou usando o view vamos adicionar a lista de módulos importados vamos só fazer
um vamos botar uns componentes image list item aqui só para ver o que acontece eu vou duplicar o tal cinco como a gente está usando esse cara e não vai saber o que é
até a gente importar image list item from como está no próprio diretório como o image list eu vou usar o ponto e o e barra né image list item e não preciso dar a extensão js agora vai saber o que isso é e para a gente usar esse componente em outros
arquivos sempre exportamos pode ser aqui no final export a foto image list ou eu posso botar aqui né então vou botar aqui antes da classe para já exportar quando definir a classe agora vamos usar esse image list na nossa index
depois da search bar vamos adicionar image list e como não sabe o que é not the find vamos importar import image list from components image list né não está dentro do component porque a gente está no index aqui
então tem que ir para components e esse aqui salvar da um hot reload ali atualizando está aí então aparece descrição descrição descrição descrição
então vamos avisar o que está acontecendo aqui aqui quando minha aplicação roda né esse que é o primeiro componente a cena inicial a cena inicial e tem um ovio
que o conteúdo é um componente de bar seguido de um componente e o mesmo é esse componente de bar está aqui dentro da pasta a gente mantém os componentes na pasta components e a gente definiu nos vídeos passados o componente de bar que é o um
basco um tax import e um touch ball highlight aqui que a gente vai usar para fazer uma busca por imagens agora o image list é o componente que a gente acabou de fazer aqui componente de estado por que a gente tá usando a classe e mais adiante vamos usar o
o list view e usar o estado para armazenar os dados da lista.
Mas agora a gente só está usando um image list item componente desse aqui só para ver
o que acontece.
A gente ainda não usou o list view.
Aí o image list aqui retorna um view que tem cinco componentes image list item.
Image list item a gente definiu como componente funcional que não mantém estado.
Então a gente não precisa escrever classe, só escrever uma definição do variável com
uma função aqui.
E a função retorna o template.
E template só tem uma image que está novo agora e um texto.


0003-04 Implementação dos Componentes para Criar a Lista de Resultados de Imagem

Definição da Folha de Estilo da Lista de Resultados com o StyleSheet

```markdown
# Resumo do Transcript

Neste trecho, o foco está na adição de estilos a um item de lista de imagens em um aplicativo React Native. As principais etapas mencionadas incluem:

1. **Criação de um StyleSheet**:
   - Utilize `StyleSheet.create` para definir os estilos e importe no topo do arquivo.

2. **Adicionando Estilos ao Item da Lista**:
   - Aplique os estilos criados ao componente de visualização (View) correspondente ao item da lista, incluindo `padding` e `margin`.

3. **Ajustes no Container**:
   - O alinhamento dos itens no container é alterado de `center` para `stretch`, utilizando Flexbox para ocupar toda a largura disponível.

4. **Manipulação do Eixo Principal**:
   - A mudança no `flexDirection` para `row` permite que os itens sejam alinhados horizontalmente.

5. **Justificativa e Alinhamento**:
   - O uso de `justifyContent` e `alignItems` para centralizar itens vertical e horizontalmente é discutido.
   - `alignSelf: 'stretch'` é aplicado para esticar componentes específicos.

6. **Melhorias Visuais**:
   - Adição de margens para criar espaço entre componentes e ajustar o background para harmonizar as cores.

7. **Edição da Search Bar**:
   - Exclui-se um estilo desnecessário e aplica-se margens para distanciar componentes da barra de busca.

8. **Alterações no Botão de Busca**:
   - Estilos adicionais são adicionados ao botão, incluindo centralização do texto e definição de negrito através da propriedade `fontWeight`.

As sugestões e mudanças visam melhorar a estética e a funcionalidade do layout da aplicação.
```

Vamos adicionar um estilo para o item da lista de imagens. Vamos aqui no image list item. Vamos fazer
um style sheet aqui const styles style sheet ponto create chamar essa função vamos passar um
objeto com uma folha de estilos como a gente está usando style sheet vamos importar no topo
está lá agora vamos adicionar um estilo para essa view aqui style propriedade style aqui o estilo
vai ser os styles que se refere a esse cara vamos fazer talvez chamar de
e define aqui um povo ou o e2 já vê que já está lá vamos para um padding 16 a pertei uma coisa
e sair e também talvez uma margem
e botan para ter um espaço abaixo de cada item esse espaço aqui se você notar esse cara até
aqui mas a gente gostaria de que esse é tango local passe a linha toda para fazer isso vamos aqui no
index se você vê o index que é o container esse view aqui é o container que o image list está
aqui mas esse container tem estilos aqui e se você notar o align items está tudo centralizado
se a gente post stretch vamos ver o que acontece viu que estendeu todos os itens porque acontece isso
vamos ver aqui esse container que é esse toda contém toda essa cena tem o flex 1 está usando
o flex box né agora o flex box o eixo principal nesse caso vai ser definido pela flex direc
por padrão se você não definir o flex direcciam o react nere vai ser column column define o eixo
principal o eixo principal para ser vertical assim então os itens são alinhados verticalmente
eles vêm um por um em cada linha se eu mudar isso para o ro você nota que eles vão ficar os itens
em cada coluna então o tex input aqui seguido do botão seguido da lista deu
em volta aqui a gente quer quando você põe justify content center você está pegando e
se você está colocando o espaço centralizando o eixo as coisas que estão no eixo principal e
se tiver espaço se sobrar espaço vai aparecer aqui e aqui agora para você mudar esse espaço
horizontalmente que é o outro eixo você usa o line items o eixo principal é vertical mas se
você quiser mudar o espaço dos itens na horizontal é no outro eixo usa line items como está
utilizado só fica no centro mas se botar a estreche vai alongar na horizontal então a gente
dá um stretch para todos esses caras e até quando a gente estava fazendo a search bar a gente
adicionou um align self stretch para a vio essa vio aqui que tem contém o tex input e o touch
de um site nem precisa mais isso porque eu já botei lá bom então eu removi agora voltando aqui os
os os os dos itens vamos continuar a você pode até pôr uma margem para essa vio que contém os dois
componentes que é no index o container a gente pode pôr uma margem para a esquerda direita ou de modo
local incluindo o topo e o lá embaixo do 10 só para ter um espaço lá você nota que o
background fica branco mas o background da vio é essa cor entendeu depois a gente se dá com isso
agora vamos a ver vamos pôr um margem que depois desse vio aqui da search bar também aqui essa é a vio
a gente deu um line mas vamos remover isso e botar styles ponto
vamos usar pesquisa busca bar bar de busca
vamos pôr o que a gente tinha antes flexo direcciam e uma margem bóram de 10
e qual é que eu tinha no item só para ficar com 16 bodei para 16 agora está melhor a também põe uma
margem que para de do lado do tex input para não ficarem colados então qual é esse é o caixa de busca
o tex input vamos adicionar uma margem right talvez 16 também vamos ver o que acontece
e se você quiser mudar para 8 múdvio para que você quiser vamos centralizar esse texto do buscar
também a o tex este está contido no tortebo highlight que tem esse estilo botão buscar a
botão buscar dá um flexo um a flex direcciam é column então se a gente adicionar content center
vai fazer ficar centralizado verticalmente o texto mas não é horizontalmente então para
a gente a por align item center para justificar esse texto dentro do botão horizontalmente
também vou adicionar um negrito para o nome buscar
então está no texto aqui, vou botar estilo, styles, texto do botão, vou criar esse aqui
texto do botão e vou adicionar o negrito com a própria chamada font weight
e você põe em bold e não esqueço da virgo aqui
agora está um pouco melhor né
então vamos continuar


0003-05 Definição da Folha de Estilo da Lista de Resultados com o StyleSheet

Direcionamento de Dados ao Componente Através de props – Aula de React Native

# Resumo da Transcrição

Neste trecho, o autor discute como injetar dados em um componente funcional chamado `Image List` para que cada item seja exibido corretamente durante a busca. A seguir, estão os principais pontos abordados na transcrição:

1. **Estrutura do Componente**: O componente `Image List Item` receberá dados através de propriedades (props), onde cada item terá informações como `URL` da imagem e uma descrição.

2. **Uso de Props**: O autor menciona que, ao utilizar um componente funcional, não é necessário usar a palavra-chave `this`. As propriedades serão passadas para o componente `Image List`.

3. **Preparação da Fonte de Dados**:
   - O autor sugere que os dados devem ser injetados utilizando um índice (`index`) responsável por realizar pedidos a uma API.
   - Inicialmente, ele propõe criar um array de itens (falsos) no arquivo `index`, cada um composto de um objeto com `ID`, `URL` e descrição.

4. **Exemplo de Dados**: O autor exemplifica o uso de um `URL` seguro (HTTPS) e fornece orientações sobre como preencher o array de itens.

5. **Mapeamento de Itens**: O componente `Image List` deve passar os itens como propriedades. O autor mostra como usar o método `map` para iterar sobre os itens, retornando um `Image List Item` para cada um.

6. **Validação**: Ele verifica se a propriedade está sendo utilizada corretamente ao passar os dados para o `Image List Item`.

Em resumo, o autor está demonstrando o processo para que os dados sejam adequadamente afetados ao renderizar os componentes do React, garantindo que a lista de imagens exiba as informações corretas.

Agora que a gente lhe deu com o estilo, é hora de pensarmos como a gente vai injetar
os dados para que cada item apareça com os dados corretos e correspondentes quando a
gente faz uma busca.
Se você olhar aqui no Image List Item, Componente, a gente vai receber os dados desse item específico
via as propriedades que serão dadas.
Então dentro dessa prop a gente vai ter uma propriedade que vai ter os dados do item.
Por exemplo, se eu chamar propriedade de item, então a gente vai se referir por exemplo item
e o URL da imagem e tem descrição.
Como eu estou usando um componente funcional, não preciso da palavra chave dessa.
Então isso que a gente quer que apareça aqui.
Então para isso acontecer a gente tem que ir para Image List e que a gente vai dar propriedade
item com alguma coisa, que um item que será passado com propriedade a esse componente
e vai estar dentro dessa variável, acumento.
E a gente vai ter acesso.
E em vez de ter no aqui a gente vai usar item, por exemplo, o URL e item descrição.
Como se fosse assim.
Mas é claro que agora ainda não tem.
Então vamos mover isso e voltar aqui para Image List.
A gente tem que passar o item.
Mas como a gente vai passar esse item?
Bem a gente tem que ir para o index aqui, porque o index vai ser responsável.
Essa esse componente aqui vai ser responsável por fazer o pedido ao servidor API e receber
como resposta os dados e a gente vai injetar os dados aqui nesse componente Image List.
Por exemplo a gente põe itens com os dados para ser injetados que vão ser passados
como prop para o Image List.
E aqui se a gente quiser passar o item específico a gente vai fazer um loop e vai para cada
item dessa talvez um array dessa coletanner a gente vai passar como dados propriedade
item para o Image List.
Então vamos começar aqui e eu vou fazer é só fazer primeiro eu vou passar uns itens
não do servidor mas só criar aqui no index um variável chamado itens eu posso fazer
um array aqui coletâneo aqui e cada item é um objeto por exemplo eu vou botar um ID
e vou botar por exemplo o URL deixa eu pegar um URL da web aqui eu fui no Google e pesquisei
imagem de cachorro cachorro eu gostei dessa e usa a HTTPS não se esqueça o react needed
se você não tiver uma imagem sem HTTPS não vai funcionar então dá um detalhe pegue
a HTTPS copy essa URL eu só vou botar aqui e o outro vai ser a descrição pode ser qualquer
coisa.
E vou botar outros os só copy a is muda o ID.
E muda umas descrições se você quiser passa seu próprio dados falsos aí.
Digitei certo não sei lá.
Eu botei cinco itens SRA então vamos pegar esses itens e passar com propriedades para
o Image List aqui.
E o Image List será dada a propriedade itens e itens que vai poderá ser acessado do this
props.
Cada um coletâneo de objetos então o que a gente vai fazer aqui no render é em vez
de botar esses caras aqui a gente vai fazer um map vamos primeiro pegar os itens e extrair
das props se eu digitar isso eu estou pegando os itens é a mesma coisa de digitar isso aqui
é a nova maneira do IS6.
Então eu só faço assim para pegar os itens que foram dados como props e a gente vai dar
um map.
Vamos fazer.
Pode chamar de que quiser eu vou dar um map no item aqui bom e primeiro o argumento
da função aqui de flash.
Vai ser o item.
O que eu vou fazer vou retornar uma image list item vou construir esse cara usando os
dados desse item e o que eu vou fazer é passar o item item com a propriedade item é o item
aqui que foi passado.
Lembre-se que esse item vai ser um objeto esse objeto aqui por exemplo.
Isso vai criar um array uma coletânea array.
E você pode só fazer assim.
List item que o react native já reconhece que você tem uma coletânea e vai mostrar
todos os itens.
Vamos ver o que acontece.
Só checar aqui se eu estou usando a propriedade quando eu passo a propriedade item eu tenho
que usar.
Então aqui vai passar.


0003-06 Direcionamento de Dados ao Componente Através de props – Aula de React Native

Exibição de Imagem com o Componente Image e Mais Retoques de Estilo

# Resumo do Transcript

No transcript, o autor discute o processo de manipulação de propriedades de um componente em React Native. Aqui estão os principais pontos abordados:

## Extração de Propriedades
- É mencionado o uso de "destructuring" para extrair a propriedade `item` de `props`.
- A `URI` para a imagem da web deve ser definida corretamente com `item.url`.

## Utilização da Propriedade `key`
- Ao mapear uma coleção para gerar componentes, é necessário fornecer uma propriedade única `key` para cada elemento. O autor opta por usar o `ID` do item como chave única.

## Dimensões da Imagem
- As dimensões da imagem precisam ser especificadas, pois a imagem não é exibida corretamente devido à falta dessas informações. O autor sugere definir largura e altura (64x64).

## Direção Flexível
- A flexbox tem uma configuração padrão de direção `column`. Para alinhar os itens horizontalmente, a propriedade `flexDirection` é ajustada para `row`.

## Estilos e Layout
- O autor fala sobre a adição de margens à imagem para espaçamento adequado em relação ao texto.

## Simplificação da Desestruturação
- A forma como as propriedades são passadas para a função é discutida. O autor sugere a desestruturação diretamente nos argumentos da função para evitar digitações repetidas.

## Revisão do Componente Principal
- O componente principal define uma coleção de itens com propriedades `id`, `url`, e `descrição`.
- A aplicação cria e passa esses itens como propriedade `itens` para um componente onde são exibidos em uma lista.

## Conclusão
- As principais funcionalidades estão operacionais, embora o layout possa precisar de ajustes adicionais.

Este resumo captura a essência dos tópicos discutidos no transcript em uma organização clara.

quando eu passo a propriedade item, eu tenho que usar.
Então aqui vai passar, assado props, o que eu vou fazer?
Eu vou botar aqui de novo, vou fazer um destruction, destruturar, é o props, item.
E aqui eu vou por URI, se a gente quiser adicionar um image, o fonte da imagem,
se for da web, tem que pôr esse objeto com a propriedade URI e vou botar item URL, né?
Desse cara.
Ah, desculpa, esse aqui não tem isso.
E aqui descrição vai ser o item, descrição.
Tá bom?
Salvar, voltar pro image list.
Antes de salvar aqui tem um detalhe, quando você faz um map com coletânea e gera vários
componentes, o react nero e pede um aqui propriedade de que?
Se você não pôr vai ficar reclamando.
Então vamos ver o que acontece aqui.
Se eu te mostrar aqui, não dá pra ver na tela aí, mas tem um warn here, hit child
in anarray, should have a unique key prop.
está dizendo que você precisa de uma propriedade key
para cada
pilho
de
elemento da array, né?
Então eu só vou usar o
o ID do item.
Porque é único,
único, né?
Não tem igual.
Cada item tem um ID diferente.
Então isso vai
ficar OK.
Ah, só
note que a imagem não apareceu porque a gente não pôs as dimensões.
Porque a imagem da web
põe um pôr aqui image,
põe um estilo.
Estar as imagens, vou criar.
Imagem, vou pôr uma width,
sei lá,
e uma height,
vou dar um quadrado.
Está aí, né?
Está muito grande, vamos
colocar 6464.
Está aí melhor.
Note que agora está tudo.
O que aconteceu aqui,
a descrição não está do lado, mas está
debaixo da imagem.
Porque
vamos
ver essa view.
Essa view aqui
note que não tem uma flex direction.
A flex direction não está definida.
Então por padrão é column
e column o extra vertical é o
principal.
Se a gente quiser mudar, é só mudar aqui
essa view que é o item.
Eu vou adicionar flex direction
para ser
row,
para os itens se alinharem
coluna por coluna.
Está bom.
1, 2, 3, 4, 5.
Agora está melhor.
Ainda tem uns
problemas aqui com o estilo,
o layout, mas
está tudo ok
no termo de fontesonalidade.
É esquecido a vírgula aqui.
Se você quiser, vamos adicionar uma
margin right, dessa imagem para que o
texto não apareça
ao lado, muito perto.
Sei lá, 6.
Ou 12.
Está bom.
É um detalhe aqui também
que eu fiz isso,
mas tenho uma maneira mais
de digitar menos.
Normalmente o argumento
para essa
função de flash que define o
componente funcional aqui
é a props.
Mas se você quiser pegar
uma
prop que você já sabe o que é,
nesse caso a props só tem o item
que a gente
tem interesse.
Então a gente pode fazer isso
e eu vou destruturar
o item da mesma maneira que eu
fiz aqui, eu posso fazer aqui
um argumento da função
e dessa maneira eu vou ter item
disponível aqui
sem precisar digitar isso.
Está bom?
Tudo normal,
sem problemas.
E se você tiver se outro,
usar só o pô aqui.
Para destruturar.
Agora voltar aqui.
Vamos revisar
o que aconteceu.
Aqui no nosso componente principal,
ponto de partida da aplicação,
a gente definiu uma coletânea
de itens
e cada item é um objeto de JavaScript
e propriedades id, url e descrição.
Criamos cinco objetos
para representar cinco imagens de cachorro
e o que a gente fez
foi passar os itens
como a propriedade chamada itens
e a propriedade chamada
itens.
O imagens de itens pegou
essa propriedade que está dentro do props
e a gente pegou e extraiu os itens.
Fez um
map
para gerar imagens de itens,
componentes de imagens de itens
e passamos o
cada item
os dados do item aqui
como propriedade chamada item
para o item de itens.
Temos que adicionar,
nós temos que adicionar a propriedade
aqui porque o React Native
reclama se não tiver uma coisa
para representar um tipo de id
para cada
indivíduo.
Então, o imagens de itens,
cada item,
a gente só,
aqui no return, no template,
só passou o array
e a gente
já colocou o item de itens.
Só passou o array
que o React Native já reconhece
e vai mostrar todos
os itens da lista.
Cada item tem a props,
tem o item, tem aqui,
mas, nesse caso, a gente só se importa
com essa propriedade item
e a propriedade a gente extraiu
do props
e usou
para definir o
source da imagem e a descrição do item.
A imagem, né?


0003-07 Exibição de Imagem com o Componente Image e Mais Retoques de Estilo

Uso do ListView para Permitir a Rolagem do Conteúdo da Lista de Resultados de Imagem

```markdown
## Resumo da Apresentação sobre List View no React Native

O apresentador discute a implementação do componente List View em um aplicativo React Native. Inicialmente, a lista contém cinco itens, mas ao adicionar um novo item, a lista ocupa toda a tela, sem permitir a rolagem. Para resolver isso, o List View será utilizado para adicionar uma barra de rolagem quando houver muitos itens. Embora o Scroll View pudesse ser uma opção, o List View é mais apropriado para esse caso.

### Documentação e Propriedades do List View

O apresentador menciona a documentação do React Native e destaca as duas principais propriedades do List View:

1. **Data Source**: Fonte de dados para a lista.
2. **Render Row**: Define como cada item na lista será renderizado.

Ele explica que é necessário usar a função `cloneWithRows` para criar um objeto Data Source, passando um array de objetos e a propriedade `rowHasChanged`, que indica se a linha mudou (true ou false).

### Implementação

Durante a implementação, o apresentador sugere a modificação do componente existente para usar o List View. Ele menciona que o `Data Source` será parte do estado do componente e que a renderização de cada item deve usar o componente `ImageList`.

A implementação envolve:

- Definir o `Data Source` no estado do componente.
- Usar `super` nas props dentro do construtor.
- Definir o estado inicial.

O apresentador propõe que a função de renderização de cada item poderia ser extraída para sua própria função, mas isso não é necessário no momento.

### Conclusão

A transição para o List View permitirá uma melhor visualização da lista ao lidar com múltiplos itens, garantindo uma experiência de usuário mais fluida.
```

E então chegou a hora da gente usar o list view, o componente.
Se você notou que agora a gente tem cinco itens nessa lista, mas se eu adicionar o
novo, talvez seis agora, outro outro cachorro. Vamos ver o que acontece. Agora está ocupando
toda a tela, não é? E não a maneira de a gente ir para baixo, dar um scroll aí, scroll lá, né?
Como se a gente está fazendo aqui, não tem essa barra aqui, né? Então vamos usar o list view
para poder, se tiver muitos itens, adicionar essa barra. A gente poderia usar um scroll view
para rodar toda a tela, mas a gente vai usar o list view. Vamos ir aqui, se você for a documentação
do React Native, KD, K, e na otra versão 0.03, aumentou por um. Aqui a documentação do list view
aqui, esse cara aqui, a list view vai, você tem duas propriedades, chamada Data Source e o Render
Source, o Data Source vai ser a fonte dos dados para ser usados na lista. E o Render Row é você
diz como é que cada item na lista será renderizado. Nesse caso eles só estão usando um componente de
text nesse exemplo. Então vamos começar, na hora de que eles estão usando o Data Source que está
dentro do estado, que é definir o que, esse Data Source aqui, o que é que eles têm que fazer?
Eles têm que chamar essa função clone with rows, porque eles têm que criar um objeto do list view
ponto Data Source e esse objeto, você tem que passar esse objeto do propriedade row has changed,
que é true or false, verdade ou false. E depois de criar esse objeto que ele chama os ds,
ele chama a função clone with rows e você passa os dados array, coletânea de cada item.
Nesse caso a gente vai passar um coletâneo de objetos. Vamos voltar ao componente e começar a fazer isso.
Vamos aqui no Image List, né?
O que a gente vai fazer? Vai usar o list view
em vez de ter esse list items.
Tenho Data Source e tenho render row, né?
Para o render row, a gente já fez aqui. A gente quer que cada item na lista seja renderizado
como um componente de Image List, né? Nesse caso a gente pode usar isso aqui.
Então vai ser uma função cada componente.
Em sondre flash, a gente retorna um Image List item, né?
A gente pode depois extrair isso para a sua própria função.
Nesse caso eu não preciso disso se tivesse um argumento.
E o Data Source. Vamos usar o estado.
Vamos definir esse Data Source.
O que a gente vai fazer é... Se a gente usar o estado, define o constructor.
Chama a função super nas props e define inicio e o estado.
Nesse caso vamos dizer que...


0003-08 Uso do ListView para Permitir a Rolagem do Conteúdo da Lista de Resultados de Imagem

Definição de DataSource para o ListView e Uso da API de Busca de Imagens

# Resumo da Transcrição

Nesta transcrição, discute-se a implementação de um `ListView` em um projeto que envolve a busca e exibição de imagens utilizando a API do Bing Image Search. Os principais pontos abordados são:

## Definição do Data Source

- **ListViewDataSource**: Um objeto que precisa ser criado para gerenciar os dados do `ListView`.
- **BrowRestChanged**: Uma função que verifica se as linhas no `ListView` mudaram. Retorna `true` se as linhas forem diferentes e `false` se forem iguais.

## Propriedades do ListView

- **DataSource**: Define a fonte de dados para a lista.
- **RenderRow**: Define como cada item será renderizado. Um componente `ImageListItem` é gerado para cada item.

## Uso da API do Bing

- **API Key**: Para acessar a API do Bing, é necessário obter uma chave de API através do site do Bing Image Search.
- **Fazendo Requisições**: É explicado como utilizar o Postman para testar a API com as credenciais e fazer uma requisição GET ao endpoint da API que retornará imagens.

## Implementação em React

- Quando o componente é montado, será feito um pedido à API do Bing para buscar imagens.
- A implementação envolve o uso de `fetch` para realizar a requisição e obter o URL da API.

## Conclusão

A transcrição resume como configurar um `ListView` para exibir imagens obtidas a partir da API do Bing, incluindo a definição do data source, o uso de funções específicas para verificar mudanças, e os passos para integração da API.

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.


0003-09 Definição de DataSource para o ListView e Uso da API de Busca de Imagens

Requisição HTTP com o fetch para Obter Resultados de Busca de Imagem Pela API

# Summary of Transcript

The speaker discusses how to make a GET request using the `fetch` API in JavaScript, specifically with React Native. Here’s a breakdown of the main points:

1. **Setup the Fetch**:
   - Use `pdwget` to initiate a GET request.
   - Define the variables for `IPINPoint` and a `query` string that includes search terms (e.g., "cachorro" for dog, "marketing" for MKT).

2. **String Interpolation**:
   - Utilize ES6 template literals (backticks) for constructing the URL with `IPINPoint` and `query`.
   - String interpolation allows embedding expressions inside string literals.

3. **Fetch Headers**:
   - Set headers in the second argument of `fetch`.
   - Include necessary credentials as values (e.g., `OCP`, `ifmapim`, `ifmkey`).

4. **Handling the Response**:
   - The `fetch` function returns a Promise, which should be handled to convert the response into JSON format.
   - Utilize `.then()` to process the response and update the component's state with the received data.

5. **Logging and Debugging**:
   - Use console logs to investigate the fetched data and identify issues if they arise.
   - The speaker encountered problems with undefined variables but managed to resolve them by returning to specific lines in the code.

6. **Managing State in React**:
   - Set up the initial component state using a constructor. Initialize an array to hold items.
   - On component mount (`componentDidMount`), update the state with the fetched data, specifically extracting `value` from the response JSON.

7. **Defining Data Structure**:
   - Identify important fields from the fetched data (e.g., `thumbnail URL`, `name`, `ID`).
   - Prepare to render this information in the component accordingly.

This summary encapsulates how to properly set up API fetching in a React Native application and handle the data for further use within the component.

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.


0003-10 Requisição HTTP com o fetch para Obter Resultados de Busca de Imagem Pela API

Componentes Conforme os Resultados da API de Busca, componentWillReceiveProps

# Resumo da Transcrição

### Mudança nas Propriedades da Imagem
- Foi solicitado que se mudem as propriedades que definem a imagem e o texto de um componente para usar informações obtidas a partir da API da Microsoft.
- O novo objeto a ser usado inclui uma descrição da imagem e uma URL de thumbnail.

### Implementação da Estrutura
- As propriedades foram mudadas para utilizar `item.thumbnail` em vez de `item.RL` e uma nova propriedade foi estabelecida para descrição.
- Cada item será renderizado através de um componente `imageless item`, utilizando um loop sobre a fonte de dados.

### Problemas de Renderização
- Inicialmente, os itens estão vazios (`empty array`), e a API não retorna resultados de imediato, o que causa a não renderização de qualquer informação até que os dados sejam recebidos.
- A solução envolve a implementação do ciclo de vida do componente para atualizar a renderização quando as propriedades mudam.

### Atualização com Novos Dados
- Implementação do método `componentWillReceiveProps` para detectar mudanças nas propriedades.
- Verificação se os itens recebidos são diferentes dos itens anteriormente armazenados. Se forem diferentes, o estado é atualizado:
  - O `data source` é atualizado utilizando `cloneWithRows` com os novos itens recebidos.

### Resumo Final
- O pedido inicial para a API pode demorar, e o componente deve lidar corretamente com a ausência inicial de dados.
- O método `setState` é utilizado para atualizar o estado e garantir que a lista seja renderizada quando novas informações estiverem disponíveis.

### Próximos Passos
- Nos vídeos seguintes, será implementada a funcionalidade de cliques para navegar a uma nova cena, onde a imagem será exibida em um tamanho maior.

Então, agora a gente vai mudar esses propriedades,
o valor dessas propriedades da imagem do texto para ser esses aqui.
Porque o item, o objeto item mudou as propriedades,
porque agora a gente está olhando nas propriedades
que de cada item que foi servido pela API da Microsoft,
e se você olhar o objeto de cada item,
tem esse nome aqui,
nem a gente vai usar para ser descrição da imagem,
e também tem esse thumbnail URL que vai ser a imagem,
a própria imagem,
se você copiar e colar aqui, vai ser essa imagem do cachorro.
É só nota que é a gata de TPS.
Agora,
vamos mudar em vez de item.RL,
item.thumbnail.
E no texto vai ser o neio para descrição.
Então, vai dar conta desse componente.
Só se lembre que a gente está destruturando o item que está dentro do props,
na verdade, o argumento aqui é props,
mas dentro do props tem o item,
então a gente extrai o item assim.
E vamos voltar ao componente aqui.
No componente imageless, a gente dá um render row,
cada item é renderizado como um componente imageless item,
e a gente passa com a propriedade o item aqui.
O item aqui, ele vai dar um loop para cada item dentro do data source,
e vai fazer esse componente.
Note agora que aqui é item.id,
mas a gente não tem mais id.
Se você notar aqui, não temos mais id, mas temos image id.
Então, vamos usar esse aqui para identificar o nosso item.
É só isso por isso.
Mas se você salvar,
assim, vou colocar aqui o soft wrap para você ver tudo.
Se você salvar, você vai ver que ainda não funciona, né?
Não aparece nada.
O problema aqui é se você voltar para o index,
então a gente tem um imageless aqui,
a gente dá como propriedade os itens,
que estão armazenados no estado,
como propriedade item.
Mas o problema é que, inicialmente, os itens
são um array que está empty, né?
Então, inicialmente, não vai ter nada.
E só quando dá o component.goMount,
quando esse componente está prestes a montar,
vai fazer um pedido aqui para API.
Mas como todo pedido demora um pouquinho para processar,
manda para o servidor, pega a resposta,
vai demorar um pouco.
Então, até lá, o componente já vai estar renderizado.
E por isso não mostra nada.
O que a gente deve fazer, então?
Então, a gente tem que ir no component.imgless
e mudar umas coisas aqui.
Porque ele vai renderizar isso,
mas só está inicializando os dados
quando o componente é construído via construtor.
O que a gente vai fazer é quando essa propriedade
que é dada a imagelessItems for mudada,
que vai acontecer quando dá o setState aqui, né?
Inicialmente, esse cara vai ser vazio, né?
E quando dá o setState,
vai popular esse array com manyThings, os objetos, né?
Então, tem uma maneira de fazer o componente renderizar de novo
quando receber novas propriedades.
Vamos voltar ao imageList e vamos criar
essa função component.
We'llReceiveProps.
Ah, bom.
Essa função é chamada toda vez que esse componente,
que é o imageList,
receber novas propriedades.
O argumento aqui vai ser o nextProps,
que vão ser as novas propriedades
que serão dadas ao componente.
O que a gente vai fazer?
Primeiro, a gente vai checar
se
os itens
anteriores,
the props anteriores
não forem os mesmos.
Se não forem os mesmos,
a gente vai atualizar
a lista, vai renderizar.
Fazer isso, vamos dar um comparação aqui.
Se forem os mesmos itens,
eu recebo novas props,
mas os itens são os mesmos,
eu não preciso renderizar de novo,
então eu não me importo.
Vamos fazer se
vamos fazer assim.
Se os itens
do nextProps
não forem iguais ao
propriedades.
A gente vai mudar
porque isso foi igual, não me importo.
O que a gente vai fazer?
Tem um problema aqui nesse cara aqui.
Inicialmente a gente
tinha assim
que está criando esse objeto
ListViewDataSource.
Depois a gente settle state
com o clone with rows.
Mas o que a gente vai fazer agora
é fazer isso aqui.
Em vez de só uma vez no construtor
a gente vai fazer
cada vez que recebe novas propriedades
recebe novos itens.
A gente vai atualizar o state
e setar o data source com novos itens.
Então vou remover isso aqui.
O que eu vou fazer
é eu vou deixar o
data source aqui
e a gente vai mover isso aqui pra cá
cada vez que tem novos itens
e vamos clone our throws
pra atualizar o data source.
Mas pra fazer isso
deixa eu só mudar o nome aqui
pra ficar
se eu mudar pra esse fica assim.
E como é
i s6
s6
não precisa fazer isso se tem o mesmo
propriedade, tem
o mesmo nome que eu falou
eu posso
tirar isso.
Então aqui o que eu vou fazer?
Vou fazer
setar o state
e vou mudar o data source
pra o que?
vai ser
o state, data source
com o clonor rows
do que?
do next prop
com o items.
Ok
Ok, deixa eu se notar aqui, funciona o
ah?
Demora um pouco mas funciona o
só avisar isso ok?
Então essa função
que é chamada component
component will receive props
é chamada toda vez que
esse componente
recebe novas propriedades
e essas novas propriedades
são armazenadas nesse argumento
da função chamada next props.
Primeiro a gente checa
se os itens das próximas
propriedades
não forem iguais
porque se for igual a gente
não precisa se preocupar
mas se for diferente a gente
precisa atualizar a lista
né?
Então o que a gente faz?
A gente seto state pra o data source
pra ser o data source antigo
exceto que a gente
vai com clonor rows
os novos itens
então vai mudar
primeiro inicialmente vai estar
sem nada né?
A gente lembra que vai estar
sem nada
vazio
e quando a gente fazer o pedido
pra api aqui
vai ser
setar o state
do itens que são dados a propriedades
esse cara vai mudar
né?
Ops
Tira esse
e vai
atualizar o data source
destaque
atualize aqui
demora um pouquinho
então quando o programa inicializa
faz aquele pedido
de HTTP
pro back end da Microsoft
demora um pouquinho
e quando o pedido for aceito
e a resposta dada pra gente
a gente seto state
que muda
esses itens
mas os itens são a propriedade
da image list
que como foro dado na propriedade
da next props
e seto state do data source com os novos itens
e aqui tá funcionando
tá bom?
nos passos vídeos a gente
vai implementar
o clique
pra clicar aqui e pra outra
cena
e
mostrar a imagem
tão maior


0003-11 Componentes Conforme os Resultados da API de Busca, componentWillReceiveProps

Fazendo a Caixa de Texto Funcionar com a Lista de Resultados; autoCapitalize, autoCorrect

# Resumo da Transcrição

Nesta transcrição, o autor está abordando a implementação de uma funcionalidade de busca em um componente de interface de usuário. A seguir estão os principais pontos discutidos:

## Problema Inicial
- A funcionalidade de busca atual não está funcionando como esperado. O sistema busca por imagens de cães, mas a intenção é permitir que o usuário busque qualquer termo.

## Modificações Propostas
1. **Remover a Busca Automática**: Ao invés de realizar a busca automaticamente ao montar o componente, a busca deverá ser feita apenas quando o usuário clica no botão "Buscar".
2. **Combinação de Componentes**: O componente de busca (search bar) e o componente de lista (que exibe as imagens) estão dentro de um componente pai.
3. **Implementação da Função de Busca**:
   - Uma nova função, `onSearchSubmit`, será definida que receberá a palavra-chave digitada pelo usuário.
   - A palavra-chave deve substituir o termo fixo "cachorro" nas requisições à API.
   - A função `onSearchSubmit` será passada como uma propriedade para o componente de busca.

## Desenvolvimento
- Ao clicar no botão “Buscar”, o evento chamará a função configurada, passando a palavra-chave atual.
- O autor mencionou a importância de definir o contexto de `this` para que a função saiba a qual componente ela pertence, utilizando `bind` para esse propósito.

## Observações Finais
- Adicionadas melhorias para evitar a capitalização automática e a correção automática no campo de busca.
- Discussão sobre a implementação de um feedback de carregamento para o usuário, mostrando uma mensagem enquanto as imagens estão sendo carregadas, a fim de melhorar a experiência do usuário.

## Em Resumo
As modificações visam tornar a funcionalidade de busca mais dinâmica, permitindo buscas personalizadas pelos usuários e melhorando a experiência geral com carregamentos visuais e controles de entrada.

Antes de a gente prosseguir para fazer essa outra cena, vamos consertar esse negócio da busca aqui, que não está funcionando ainda.
O que a gente fez agora está buscando por imagem de um cachorro, mas a gente quer permitir o usuário de digitar qualquer coisa para buscar,
quando clica buscar, vai aparecer aqui, não é? Então vamos lá.
Vou botar aqui, então a gente não quer mais aqui, desce FET quando esse componente monte,
somente quando clicar no botão de buscar, que agora não faz nada.
Então eu vou comentar esse, pegar esse código aqui, o que ele vai fazer.
Vamos tirar esse código daqui e pô, em outro local.
Mas primeiro vamos lá para a search bar para entender o que está acontecendo aqui.
Então a gente tem esse componente aqui, na search bar, e tem, inicia o estado com uma palavra chave,
vazia e quando a gente digita aqui, se eu conseguir clicar lá, cadê?
Ok.
Deu, demorando um pouco.
Aí, quando a gente digita, vai chamar esse evento, um change text,
se a gente chama a função para acertar o state com a coisa que a gente digitou, está tudo bem.
Agora, quando a gente clica no botão buscar, não faz nada ainda, o que a gente quer fazer?
Então clica a buscar, a gente quer que faça esse pedido, para API e a query que nos vê de cachorro,
vai ser essa palavra chave aqui, que está no estado da search bar.
Então, o que a gente vai fazer?
Como o componente de search bar e esse componente de lista estão dentro desse componente para as que as imagens que é o pai.
Então, esse demais vai ser responsável pelo FET e vai ser também responsável para saber o que fazer quando clica buscar.
Então, quando a gente buscar, vamos fazer uma função aqui.
Vamos chamar...
Vamos chamar um submit.
Só ver aqui, um submit.
E vou fazer um submit aqui.
Essa é a função.
E quando eu clicar um submit,
eu vou chamar uma função que será dada para props.
Vamos chamar...
Um form submit.
Um form submit...
Qualquer nome aí.
Então, eu vou chamar essa função e vou dar a palavra chave como argumento.
Mas essa função, um form submit será dada com propriedades pelo pai desse componente search bar.
Nesse caso, é pesquisos de imagens agora.
Então, quando eu vou dar props, o on search submit vai ser uma função daqui que a gente vai definir.
On search submit...
Na verdade, a gente vai fazer um móveis código aqui para cá para o on search submit.
E vai ter um argumento que é a palavra chave.
Em vez de ser o cachorro aqui, vai ser a palavra chave.
Então, a gente pode colocar...
Assento grave, back tick, para usar a interpelação de string.
Em vez de cachorro, vai botar a palavra chave.
Tá bom?
Não vou precisando de componentemente, mas...
A gente tem que chamar essa função.
This on search submit...
Salva aqui.
Bom...
Então, aqui o componente search bar, a gente vai passar propriedade on search submit,
que na verdade é uma função que a gente definiu aqui.
Essa função pede um argumento.
Salava a chave.
Essa função é passada como propriedade do search bar.
Propriedade on search submit, desde o props, on search submit.
Então, quando a gente clicar o botão, buscar, a gente vai chamar essa função daqui
que invoca essa função on search submit e passa o argumento, que é a palavra chave do estado,
que está amazenada no estado da search bar.
Tá bom?
Essa maneira que a gente vai fazer quando clicar aqui, vamos fazer, sei lá...
Então, quando clicar, vai chamar aqui essa função, palavra chave, dar query,
e eu vou pegar a palavra chave, cuidada, dar um patch e set state aqui, dos itens.
Vamos ver se funciona.
É um problema.
Você sabe que é esse problema?
Você lembra...
Eu faço dizendo que não é uma função.
Uh oh!
Então, vamos ver aqui.
Então, vamos ver aqui.
Quando a gente chama on search submit, a gente passa essa função.
Mas, com essa função, tem aqui o word, palavra chave, this.
Mas, o que é this?
Então, a gente quer o this aqui para ser esse componente para as esquias de imagens.
Então, a gente tem que setar o contexto do this.
A gente pode falar bind this aqui.
Ou pode usar a função de chave.
Mas, eu vou usar o bind.
Então, aqui eu estou setando o contexto da palavra chave, this.
Vai ser esse componente para as esquias de imagens, que vai setar o state do this,
que this é o componente de imagem.
Então, vai funcionar agora.
Faleisano, um, dois, três, vamos lá.
Gato, buscar um, dois, três, quatro, cinco, seis, a...
Demora.
E, aí.
Vamos um pouquinho para carregar.
Mas, apareceu, gato.
Que legal.
Vamos ver outro.
Vamos ver, sei lá.
E, o que é que vocês gostam?
Buscar.
Fazendo papel de parede no baixo aqui.
Agora, vai ver que o ar é legal.
Você notou que tem auto capitalização nesse text, empa?
Você pode desabilitar.
Você foi lá no search bar e adicionou as propriedades aqui.
Auto capitalize.
Acho que é falso ou é non?
Acho que é falso.
Fiquei olhando a documentação.
Às vezes, é... é falso, às vezes é non.
Deixa eu olhar aqui.
Talks.
Fala no text input.
Aqui.
Auto capitalize.
Aqui, nesse caso é non.
Se não quiser auto capitalizar.
Deixa a little mile os clup primeiro.
Eu não gosto disso.
Então, vou mudar o total non.
E também, se não quiser auto completar.
Pode pôr auto complete.
Acho que é falso, nesse caso.
Se você olhar aqui...
Ah, desculpe.
Auto correct.
Falso.
É auto correct.
Se não quiser esse negócio ficar completando.
Auto capitalize.
Primeiro letra não é mais com mais.
Não fica dando sugestões.
Legal.
Sei lá o que aqui busca.
Tá bom.
Vamos ver. Outra coisa que a gente pode fazer aqui.
Se notar com gente...
Esquisa alguma coisa.
Demora um pouco, né?
Mas para o usuário isso não é muito legal.
O usuário não sabe o que está acontecendo.
Está funcionando ou não?
Então, você pode botar um texto ou uma roda carregando.
Quando estiver carregando a imagem.
Uma maneira de fazer isso é você dar um...
Você pode adicionar a propriedade aqui no Image List.
A maneira fácil de fazer isso é que vai aqui no render do Image List
e checa.
Se não está com o render,
você pode fazer isso aqui no render.
Você pode botar um texto e checa.
Se não tem nenhum item,
você mostra o texto.
Carregando.
Você pode botar a imagem também.
Qualquer coisa que indique que está carregando.
Só botar um texto.
E como é o seu texto, tem que importar aqui.
Eu adicionei, tá bom?
Antes, eu adicionei o texto aqui.
Então, vai checar os itens,
se for vazio, eu mostro o texto carregando.
É legal, mas no começo fica fazendo carregando
lá todo o tempo, né?
Carregando, carregando.


0003-12 Fazendo a Caixa de Texto Funcionar com a Lista de Resultados; autoCapitalize, autoCorrect

Retoques no Carregamento da Lista e Componente para Detalhes da Imagem

# Resumo do Transcript

O transcript aborda a implementação de uma funcionalidade de busca e visualização de imagens em um aplicativo. Abaixo estão os principais pontos discutidos:

1. **Inicialização do Estado**:
   - Começar mostrando a mensagem "por favor, entre uma pesquisa" ao invés de um carregando constante.
   - Criar um estado chamado `buscando`, inicialmente definido como `false`.

2. **Busca de Imagens**:
   - Quando o botão de buscar é clicado, o estado `buscando` é setado para `true`.
   - Utilizar um operador ternário para renderizar o componente de lista de imagens (`imageless`) se `buscando` for verdadeiro; caso contrário, mostra a mensagem inicial.

3. **Navegação e Detalhes da Imagem**:
   - Desenvolver um novo componente chamado `ImageDetail` para apresentar uma imagem em maior tamanho.
   - O componente receberá a imagem como uma `prop` ao ser clicado.

4. **Estrutura do Componente**:
   - Criar um componente funcional para `ImageDetail`, que não precisa manter um estado.
   - Incluir um botão de voltar utilizando um `TouchableHighlight`.

5. **Navegação**:
   - Implementar a navegação usando um componente navigator para permitir que os usuários retornem à tela anterior.

6. **Estilização e Importação**:
   - Notar que a falta de estilos pode afetar o funcionamento visual dos componentes.
   - Importar os componentes adequadamente para o funcionamento desejado.

7. **Próximos Passos**:
   - Continuar a implementação da navegação e a produção do componente de navegador.

Este fluxo de desenvolvimento melhorará a experiência do usuário, tornando a aplicação mais interativa e funcional.

Em vez de mostrar a mensagem carregando todo o tempo,
a gente deve inicialmente mostrar a mensagem como
por favor entre uma pesquisa ou
uma coisa qualquer.
Então,
o que a gente pode fazer é vai lá aqui no index
e
no componente de pesquisa de imagens
inicia o state,
o estado com
uma propriedade chamada buscando, que inicialmente vai ser false.
Então, inicialmente não estamos buscando
nada. Então,
quando a gente clicar no buscar, vamos setar o estado
para o buscando para ser true.
Então aqui, quando clicar no botão,
e é, vai ser essa função, sort, submit,
files de set state,
buscando
para ser true, porque a gente
clicou e fez um pedido
para uma busca e a gente
vai aqui no componente,
pode usar o operador oternário,
a gente vai ver se
se o buscando for
verdadeiro,
mostre o componente
e, em meu list, se não,
mostre um texto chamado, por favor,
uma pesquisa.
Então, quando
inicialmente o estado
tem a propriedade buscando, que é false,
então,
esse cara vai ser renderizado.
Por favor, entre uma pesquisa.
Estua utilizando aqui, por favor, entre uma pesquisa.
Digitar alguma coisa, quando clicar em buscar,
vai chamar um sort submit, que vai setar o estado,
e a propriedade buscando vai se tornar verdadeira.
E, por causa disso,
o componente, o operador oternário,
vai retornar o imageless, que é o componente,
é o listo de imagens.
Vamos ver o que acontece.
Mostre carregando,
e, finalmente, as imagens.
Está aí.
Está assim, fica muito melhor
para o usuário, para a experiência.
E agora que a gente já
concertou a busca, e pode buscar por qualquer coisa,
vamos para o próximo passo,
fazer outra cena chamada
título da imagem, que quando clicar,
a gente, quando clicar em uma imagem, que
mostra o que acontece,
o que acontece,
o que acontece, o que acontece,
o que acontece, o que acontece,
Mostre uma imagem de tamanho maior.
Nesse caso, a gente vai fazer um novo componente,
precisar de novo componente.
E precisa de fazer uma navegação,
que vai ser feita com um componente navigator.
Vamos aqui,
criar um novo componente.
E eu vou chamar de
imedio de detail,
detalhes.
Vamos ver se
deve ser componente funcional
ou componente de classe.
Eu só estou mostrando a imagem, e essa
imagem vai ser de um URL,
que vai ser dada como props.
Então, a gente vai dar como props
esse componente,
a imagem, o item.
Esse cada item aqui,
quando clicar em um,
vai passar como props para esse componente.
Parece que não precisamos
manter um estado.
E quando clicar a volta,
só volta para a cena anterior.
Vamos fazer componente funcional,
dar import,
React,
import,
alguns coisas,
de React Native.
Vamos precisar de que
tenha uma imagem,
tem um botão, tem um texto,
imedio.
Vamos usar um touchable highlight,
com o botão, sensível o atoque,
e text.
Talvez um view para
ficar
todos dentro.
Então,
define componente
imedio detail,
componente funcional,
então não vou usar a classe,
dá a função de flash,
e esse porta no final.
O argumento dessa
função é as props,
e muda os componentes.
E aqui retorna o template,
e vai ser, se todos os fins,
vou mudar o view,
vou mudar aqui do lado.
Vou colocar um view,
e dentro dessa view vai ter uma image,
e tenta ver esse
título da imagem,
vou só colocar aqui,
image, tem um source,
propriedade,
e agora vai ser no, a gente não sabe ainda.
Tem um touchable highlight ali,
dentro do touchable highlight sempre tem um text,
o texto do botão,
voltar,
e quando você on press,
vai ser alguma coisa,
não está definida ainda.
Bom,
aqui é o image details,
agora a gente precisa do navegador,
para poder ver o que está
no image details,
só a gente pode
voltar aqui,
e,
de baixo,
em vez de ter esses dois,
pode para o image details,
só para ver se está funcionando.
E como estou usando aqui,
aqui,
voltar e dar import aqui,
import,
em uns details,
oponents,
funcionando, agora não tem estilo,
por isso que não aparece,
o botão,
e a imagem não tem
nenhum URL.
Então está funcionando,
vou voltar aqui,
e,
reverter,
e a gente tinha antes,
repetir,
search bar e o image list,
vou tirar esses itens aqui,
não precisamos mais,
agora o próximo passo é fazer a navegação,
e produzir o componente de navegador,


0003-13 Retoques no Carregamento da Lista e Componente para Detalhes da Imagem

Atualização da Estrutura do App com Cenas Diferentes e Navegação com Navigator

# Transcrição Resumida

Neste trecho, o autor descreve um processo de reestruturação de um aplicativo React Native que possui um componente de pesquisa de imagens. A seguir estão os principais pontos abordados:

1. **Objetivo**: Criar um novo componente que integre a pesquisa de imagens e a lista de itens.

2. **Estrutura do Novo Componente**:
   - Um novo arquivo chamado `home` será criado para organizar as funcionalidades já existentes no componente de pesquisa de imagens.
   - O componente `home` será uma classe que estende `React.Component`, contendo uma função de renderização.

3. **Importações Necessárias**: 
   - Importar React e componentes relevantes do React Native.
   - Configurar a estrutura básica do componente `home`.

4. **Métodos e API**:
   - O construtor do componente será configurado, e métodos como `onSubmit` e `render` serão adicionados, mantendo as funcionalidades necessárias da versão anterior.
   - A chave de API e os endpoints serão mantidos.

5. **Navegação**:
   - O arquivo `index` será responsável por gerenciar as rotas usando um navegador, que definirá quais componentes (como `home` ou `image detail`) serão renderizados com base na rota.
   - Implementação de uma função `renderScene` que utilizará um switch-case para retornar o componente apropriado baseado na propriedade `id`.

6. **Testes**:
   - O autor testa as mudanças realizadas e confirma que tudo funcionou corretamente, com o aplicativo utilizando os novos componentes organizados.

A principal meta desse processo é refinar a estrutura do aplicativo para melhor gerenciamento de componentes e navegação.

Agora, até agora, a gente tem essa cena aqui, componente pesquisa de imagens, né?
O que é que eu quero fazer agora, antes de implementar o navigator, para poder mudar de
cenas para ir para outro componente?
A gente vai pegar esses componentes aqui e fazer um novo componente que vai ter pesquisa,
parte de pesquisa e a lista de itens.
E o componente de pesquisa de imagens, que é o index, o arquivo index, vai ser responsável
só por ter as rotas e por ter o navigador servindo, no servino.
Então, vou aqui no componente, eu vou criar um novo arquivo chamado home, que vai ser
só as coisas que a gente já tinha no pesquisa de imagens.
Então, vou fazer do zero, importar o react e componente também de estruturar dentro
do módulo react from react.
Vamos importar as coisas do react native from react native, oops.
E vamos também class home extends component, cria class no nome do componente home.
Deriva do componente, vai ter a random function que retorna o template.
E export export default home.
Aqui no index, eu só copiar o que a gente vai precisar.
Contar o sheet, o text, o fill.
E o que é mais.
API endpoint, API key.
Vamos ver.
Precisa do construtor.
Vou copiar.
Vai ser o mesmo.
Não precisa de componente no meu mount aqui, remove.
Onsur Submit, recortar, colo aqui.
E render vai ser o recortar.
E vou aqui.
As stylesheet também.
Vou copiar.
Vou aqui no final, antes de export default.
Então, vou remover esses.
Estilos aqui.
Nada aqui no construtor, talvez não precise.
Ah, esses aqui.
Precisa aqui, voltar, antes do home.
Porque eu estou fazendo patch e não tenho preciso do app.
API endpoint e a chave.
Então, no return, eu vou por home.
E como tem home, a gente precisa importar.
Port home from directory, presente, components.
Home.
Salvar, salvar o home.
Vamos ver se deu certo.
Seu spa não era venido porque...
Aqui e aqui.
E recortar do index.
Esses aqui.
Recorte esses componentes que só são presentes no home.
Volta aqui.
Cola.
Salva.
Solve o módulo que aconteceu.
Search bar.
Ah, porque a gente está dentro da pasta components.
E o home está na mesma pasta que os outros componentes.
Então, não precisa mais ter esse barra components.
Emovir.
Porque o home está no mesmo directory dos outros componentes.
Salva.
E ver aqui.
Eu quero que eu fizes o data aqui.
Aí.
Um, dois, três.
Aí.
funcionando.
Tudo ok.
Então, o que a gente fez?
A gente moveu as coisas que estão...
Tinha no index.
Moveu para o componente home.
É quase a mesma coisa.
Porque aqui vai ter o home.
Talvez não precise desses aqui.
Aqui no index a gente vai usar o navigator e a gente vai definir as rotas para o aplicativo.
Só isso.
E dependendo da rota vai incluir o componente apropriado.
Componente home se for a rota para home.
Ou o componente image detail se for o...
O rota de image detail.
Então, para isso eu vou usar o navigator.
Navigator importar aqui.
Então, o navigator precisa de render scene.
E precisa da initial, né?
Qual é a cena inicial e qual é...
Como vai renderizar cada cena.
Aqui a gente vai definir...
This render scene.
Vai definir a nossa própria função que vai ser o render scene.
Render scene.
Nesses casos render scene pega como argumento o navigador.
Sempre.
Na initial scene a gente pode definir a rota inicial.
Vamos deixar sem nada agora e vamos definir render scene aqui.
O render scene só fazer um switch com route.
E pode escolher qualquer propriedade do route.
Eu vou chamar de id.
E dependendo do id vai rediracionar para a rota.
Que isso vai chamar home.
E para se o id for home,
vamos retornar home, componente home.
Se for...
Image detail.
Retorn o componente image detail.
Se quiser adicionar o default,
se não for a nenhuma rota, pode adicionar só para ir para home.
Aqui a initial scene, vamos passar um objeto com id home.
Fire Some Time,


0003-14 Atualização da Estrutura do App com Cenas Diferentes e Navegação com Navigator

Definição de Constante para Cenas do Navegador e Clique do Item de Lista

Sure! Here’s a summary of the transcript in Markdown format:

```markdown
## Resumo do Transcrição

A discussão aborda a configuração de roteamento em um componente de navegação. O erro inicial foi identificado como relacionado ao uso da propriedade `initialRoute` em vez de `initialSIN`. Após a correção, o código passou a funcionar adequadamente.

### Principais Pontos

- **Propriedades do Componente Navigator**:
  - **`initialRoute`**: define a rota inicial.
  - **`renderSIN`**: uma função que determina qual componente deve ser renderizado com base na rota.

- **Função `renderSIN`**:
  - Recebe dois argumentos: `route` e `navigator`.
  - A estrutura de controle `switch` é usada para renderizar o componente correto com base no `id` da rota. 
  - Um `default` é definido para redirecionar para `home` em caso de outra rota não especificada.

- **Teste de Rotas**:
  - O teste de rotas funcionais (home e imageDetail) foi bem-sucedido.
  - Um procedimento para lidar com rotas não existentes foi implementado, redirecionando para a rota padrão.

### Definindo Constantes

- Foi sugerido o uso de constantes para as rotas, evitando erros ortográficos.
  - Exemplo: `const home = "home";`

### Implementação de Navegação

- A navegação entre componentes foi discutida, especialmente como clicar em itens da lista deve levar a um novo componente.
- O `TouchableHighlight` foi utilizado para tornar elementos clicáveis.
  
### Detalhes para Navegação

- Cada item na lista é renderizado como `imageListItem`.
- Para a navegação funcionar corretamente, o `navigator` deve ser passado para os componentes corretos.
- A propriedade `itemClick` foi implementada para registrar interações de clique nos itens da lista.

### Passagem de Dados entre Componentes

- A função `itemClick` agora registra qual item foi clicado e o objeto do item clica é passado para a próxima cena.
- A cena de destino irá utilizar a URL da imagem do item clicado.

### Conclusão

A estrutura de navegação foi corretamente configurada, permitindo a navegação entre componentes e o envio de dados relevantes entre eles.
```

This summary captures the key points and overall progression in the transcript while being formatted in Markdown for clarity.

Então, não problema aqui, desculpe, a propriedade não é a initialSIN, a initialRoute.
Vou olhar aqui na documentação, navegar.
RenderSIN e initialRoute.
Não é a initialSIN.
Por isso que está dando erro.
Vou até aqui atualizar.
Aí funcionando agora.
Um, dois, três.
Está tudo OK.
Então, componente navigator tem duas propriedades.
InitialRoute, renderSIN, renderSIN é uma função que é usada para determinar qual rota, qual componente vai apresentar a cena.
Nesse caso, como você tem a initialRoute com esse objeto, cujo propriedade e d tem valor home, que acontece esse objeto é na verdade o argumento route da função que a gente fez.
Na função renderSIN tem dois argumentos, o route e o navigator.
Dentro do route, na verdade é um objeto, como a gente passa a initialRoute, passa o id para ser home, então dentro da route tem uma propriedade id.
Nesse caso, vai ser home e quando chega aqui no switch, vai ser o caso home e vai retornar o componente home.
Aqui está aqui.
Se você notou, eu uso switch sem usar o break aqui, porque eu estou dando retorn, se você der o return, automaticamente vai sair do switch, então não precisa do break.
E dê um default se eu botar qualquer coisa que não seja imageDetail ou home, vai por padrão ir para home.
Nesse caso, vamos testar o imageDetail, ver se está funcionando.
Se vai para o imageDetail, não está definido, porque a gente não importou.
Então aqui vai aqui port imageDetail from components imageDetail.
Tudo ok, se o ver está aqui, porque está sem estilo, mas está aparecendo.
Então, se a rota para o home e para o imageDetail está funcionando, vamos testar uma rota que não existe.
Vai por default e é o home, né?
Dito e fake.
Agora, normalmente, quando você declara essas rotas, essas coisas assim, se a gente normalmente define constantes, então vou definir o constant aqui.
E será, na verdade, esse home.
Em vez de falar home, ou falar só home, nesse caso, não tem jeito de se eu fizer um erro ortográfico.
Se eu, sei lá, esquecer uma coisa, não vai dar problema.
Sempre vai ser imageDetail.
Faz um constante.
ImageDetail.
Aí, salva, é ver se funcionou, não doeu, é tudo ok.
Então, a navegação inicial já está configurada, só falta a gente ver como vai navegar esse componente para o outro,
quando a gente clicar um dos itens na lista.
Então, vamos ver aqui na componente home e tem lista, cadê?
Lista aqui.
Lista, imageList e quando o imageDetail, list aqui.
Então, renderRow cada linha é um imageListItem.
E está aqui, é um vilain.
Agora, vamos fazer a view ser clicável.
Vamos para touchable, highlight.
E ver.
Agora, o item inteiro é clicável.
Home press vai ser nada agora.
Vamos auto testar.
Certo, buscar.
Então...
O por que deu erro? Esqueci de importar.
Touchable, highlight.
Agora, se eu clicar, parece um negócio preto do touchable, highlight.
Tudo ok.
Talvez eu queira por view e só deixar o touchable highlight dentro da view.
Sim, não vai mostrar o negócio preto fora da borra do view.
E acho que vai dar...
Vê o que vai dar.
Acho que eu tenho dois dentro do touchable highlight, talvez de erro.
Um, dois, três, o...
Pessoal, é deu erro.
Porque eu tenho que botar um view aqui.
Só aceita um filho.
Um único filho.
Ok, se clicar...
Agora, clica aí.
Tá bom.
Depois, as jeitas estilos, não vão importar agora.
Mas eu só quero um botão para clicar.
Então, a gente precisa do view porque o touchable highlight só recebe um único filho, mas tem dois.
Tem o text, tem o image, então ponho um view aqui.
Agora, quando clicar, a gente quer que ir para outra cena, navegar para outra cena.
Para fazer isso, a gente vai ter que passar o navegador aqui.
Esse cara, passar para esses componentes, home,
no momento que a gente vai fazer isso, passar uma propriedade chamando navigator, e vai ser o navegador.
Então, home vai receber a propriedade chamando navigator, e vai ser o navegador, próprio navegador aqui.
E se tiver o navegador, dá para fazer navegação.
E a...
Quando vamos para o home.
Home aqui tem que arranjar a maneira do home falar, do botão falar com o home.
E essa maneira, vamos fazer a mesma coisa que a gente fez, passando via props, propriedades.
Do home, passa propriedade para o image list, que vai passar propriedade do navegador para o list item.
Nesse caso, vamos fazer aqui no home.
Quando falar com item, clicar.
Vamos fazer alguma coisa.
Quando clicar em new item, vamos navegar.
Então, tem essa função que a gente vai definir, mas vamos adicionar para o image list.
Vou aqui na outra linha.
Propriedade, tem os items, item on.
Item click.
This.
Item click.
E eu acho que vou usar a palavra shavite, e dentro da função item click, vou dar o bind.
Agora dentro vamos passar um item click para o image list.
Agora o image list tem um render row, cada item vai ser o image list item, vamos passar
a propriedade.
Um item click.
Vamos ver.
Isso propriedade, um item click.
Ok.
E quando for no image list item vai ter como props também o item click dentro do props,
props.itemclick que a gente destrutura aqui.
E quando clicar on press a gente vai chamar o item click.
Mas quando clicar a gente tem que passar o item para outra cena.
Vamos a gente vai fazer isso.
Vamos fazer uma coisa aqui.
Um item click, só para ver se está funcionando.
Volta aqui, salva, volta aqui para o home, definiu um item click, dá um console log.
Item foi aplicado.
O navegador para o debugger, dá um clear.
E aqui.
Ok, então vou clicar em um item foi clicado, item foi clicado, item foi clicado, tá bom.
Mas qual item foi clicado?
Ainda não sei.
Então precisa saber qual foi clicado.
O que a gente pode fazer é passar o item que foi clicado com o argumento.
E aqui vou dar o console log do item.
Mas o que é esse cara?
Vamos voltar o image list item.
Quando chamar um item click vai passar o item com o argumento.
E aqui.
Volta.
E aqui.
Item foi clicado, item foi clicado.
Não tem nada, será que eu sabei?
Ah, salva, não salvei.
Tem um tempo, vamos para o atras, buscar, volta aqui, clear, clicado, item foi clicado.
Então esse cara foi clicado e clicar o outro.
Outro cara foi clicado, esse cara é o atras.
Então quando clicar eu já tenho um objeto.
Então vou passar esse objeto para outra cena.
E outra cena vai pegar esses caras aqui e usar a imagem grande.
Vê se é esse aqui.
Tem um nome de URL, tem o content URL.
Vê se é esse.
Aí, imagem grande é o content URL.
Essa propriedade que a gente vai usar para outra cena.
Então.


0003-15 Definição de Constante para Cenas do Navegador e Clique do Item de Lista

Implementação do Componente de Detalhes de Imagem

# Resumo da Transcrição

O foco da transcrição é a implementação de navegação em um aplicativo, especificamente ao clicar em um item da lista de imagens. Aqui estão os principais pontos abordados:

1. **Navegação para Image Detail**:
   - Ao clicar em um item, o aplicativo deve navegar para a tela de "image detail".
   - Deve-se passar os dados do item selecionado para a nova tela.

2. **Props no Componente Image Detail**:
   - As propriedades (`props`) do componente Image Detail devem incluir a imagem a ser exibida, com dados como `content`, `URL` e `name` (título).

3. **Estrutura dos Dados**:
   - O objeto de imagem deve conter:
     - `content`: Informações sobre a imagem.
     - `URL`: Endereço da imagem a ser utilizada como fonte.
     - `name`: Título da imagem.

4. **Simplificação com Destructuring**:
   - Recomenda-se utilizar destructuring para simplificar o acesso às propriedades do objeto de imagem, permitindo referenciar diretamente `name` e `content URL` sem a necessidade de sinalizar `props.image`.

5. **Componente Funcional**:
   - A transcrição ressalta que, por se tratar de um componente funcional, não é necessário usar a palavra-chave `this` antes de `props`, diferentemente do que aconteceria em componentes de classe.

6. **Botão de Voltar**:
   - Deve existir uma funcionalidade para retornar à tela anterior ao clicar em um botão específico.

---

Este resumo aborda os principais conceitos e práticas discutidos na transcrição sobre o desenvolvimento de um componente de detalhe de imagem em um aplicativo.

Então, vamos voltar aqui aos source code, código.
O próximo passo é navegar quando clicar em um dos itens, navegar para o image detail
e passar os dados daquele item para o image detail.
Então, vamos para o image detail aqui em essas props.
Vamos assumir que dentro da props do image detail serão passadas essa image e dentro
da image vai ter várias coisas, por exemplo, image, content, URL que a gente viu antes,
que vai ser a source da image aqui.
E também o título da imagem, vamos usar o name, né?
Repare que o image aqui vai ser a mesma coisa que era o item na image list items.
Então, em vez de título da imagem, vamos pôr props, image, oh, desculpa, content, image, content, URL.
Ah, esse aqui é o pro image source, né?
Ops.
Ok, vamos de novo.
O título vai ser o props image name.
Note que não tem des, porque é um componente funcional.
Se fosse classe, tinha que ter des.
Aqui o source da imagem vai ser um objeto que tenha a propriedade URL com a URL aqui.
E quando clicar esse botão de voltar, vai voltar para a cena anterior.
Agora, esse aqui é muito long, se quiser pode dar um destructuring.
Por exemplo, const, o destructuring do name e do content URL, é props image.
Em vez de falar props image.name, você fala só assim, porque é de estrutura do props do image.
E aqui mesmo.


0003-16 Implementação do Componente de Detalhes de Imagem

Roteamento e Mudança de Cena com o Push do Navigator

```markdown
## Resumo do Transcript

O trecho discute o processo de navegação em uma aplicação, detalhando a funcionalidade de um componente de lista de imagens. Aqui está uma visão geral dos principais pontos abordados:

1. **Componentes e Estrutura**:
   - O componente lista imagens (`image list item`) possui uma função de clique associada (`item click`).
   - Quando um item é clicado, essa função é chamada com o objeto do item.

2. **Navegação**:
   - A função `item click` é ligada ao componente pai (`image list`) e recebe uma propriedade de navegação do componente `home`.
   - A intenção é navegar para uma página de detalhes da imagem (`image detail`) usando a função `push` do navegador.

3. **Implementação de Rotas**:
   - Para realizar a navegação, é necessário definir as rotas em um arquivo separado (`routes`).
   - As constantes de rota são exportadas e importadas corretamente nos componentes necessários.

4. **Erro de Contexto**:
   - Ao tentar usar o contexto de `this`, há um erro mencionado relacionado a `push` e ao uso do `bind` para corrigir o contexto no manejador de cliques.
   - O autor tenta resolver o problema de contexto e navegação, mas encontra dificuldades em implementar corretamente a passagem de props.

### Conclusão
O transcript explora a configuração e navegação entre componentes em uma aplicação, destacando erros de contexto e a organização de rotas. O autor busca uma solução para a navegação sem perder o acesso às propriedades necessárias.
```

Então, vamos aqui, já fizemos image detail, pegar o nome e contar URL que são dados com
prop, agora o que resta fazer é voltar aqui e dar o navegador.
Aqui tem o home, é a página principal inicial, vamos no home, quando clicar o item, o item
foi clicado, o que a gente vai fazer aqui é falar des, então, quando clicar em um dos
itens, se lembra aqui o image list item, quando clica no item, chama a função item click
com o objeto que é o item, o item click é dar com propriedades do pai do image list
item, que é o image list, o image list usa o props um item click que é dado do home,
aqui, do home image list dado um item click que finalmente chama a função um item click
e tem foi clicado, agora em vez de falar só o console log, vamos navegar para aquele
image detail, o que a gente vai fazer como navegar é falar des, navegador, tá bom,
para acessar o navegador, lembre que no index a gente passou o navegador com propriedade,
então, des, prop, navegador, des, prop, navegador, tem acessar o navegador e para outra cena
a gente vai usar a função push e a gente push com o objeto, o objeto será route,
tá bom, argumento a, tá ai, é o route, então a gente vai passar o id com o qual é
a route image detail, mas como a gente não tem isso a gente pode importar do index e
ou pode pegar esses rotos e pôr no arquivo diferente, vamos fazer o arquivo route, eu
vou falar routes, só routes, vou pegar esses consts e vou por aqui mas eu vou exportar
export const, tá bom, então esse aqui vai ter todas as constantes para a rota e volta o index
mas não sabe o que é isso, então vou import o que, importo home, you image detail from routes,
assim vai importar esses caras destruturado dentro da routes, porque quando você faz o export aqui
vai criar um objeto assim com home e com image detail, mas vamos com esses caras aqui definidos
home add server, então para extrair cada propriedade usa o chave, e aqui do home eu
fazer a mesma coisa, precisar da image detail, se precisar é só importar, import image detail
from routes, sim, salvo, na verdade route constants, mas tá ok, o que que deu, não
deu do final, porque eu esqueci que é um, dois pontos, porque estamos dentro de componentes,
aqui o didetório de cima, ok, dois pontos, ok, agora então vamos ver aqui, e também se a gente for
a rota, vai dar o push, vai entrar e ir para outra cena de image detail, mas não vai saber o que é o
props, então vamos tentar fazer isso, porque, ah, vai ser, o que acontece, clicar, clicar,
agora, não, le, push, over define, ah, porque, estou usando des dentro do item click, vamos ver
um item click, quando é chamado, tal bind des, tal bind des, mais um item click, push, over define,
vamos ver, home, estou passando navigator, pro home, propriedade, disto props, da navigator,
deve estar lá, mas não tá, o contexto da palavra chave provavelmente está errado, mas eu deu o bind
des para acertar o contexto desse cara, pro home, mas ainda não deu certo, porque


0003-17 Roteamento e Mudança de Cena com o Push do Navigator

Debug e Mais Implementação da Mudança de Tela com o Navigator Push do React Native

```markdown
# Resumo do Problema e Soluções Implementadas

O autor do transcript está enfrentando problemas com o gerenciamento de rotas em uma aplicação, especificamente no componente `index`. O problema principal é que o objeto `navigator` não está sendo passado corretamente para a tela inicial (`Home`), o que provoca erros.

## Problemas Identificados

1. **Navegação**:
   - O componente `initialout` não está recebendo o `navigator` porque não foi passado como prop.
   - Em vez de retornar uma rota desconhecida, o autor decidiu redirecionar para a tela inicial (`Home`).

2. **Propriedades Não Definidas**:
   - Durante a navegação, ao clicar para acessar o `ImageDetail`, ocorre um erro devido à ausência da propriedade `props.image`.
   - O autor constatou que, ao dar um `push` para a nova cena, nenhuma propriedade estava sendo passada.

## Soluções Propostas

1. **Passagem de Props**:
   - Foi decidido utilizar a propriedade `pass props` para enviar as propriedades necessárias ao novo componente. Para isso:
     - O item (imagem) foi renomeado para ser passado corretamente.
   
2. **Atualizações no `index`**:
   - O `navigator` e `route` também precisam fornecer `pass props` e garantir que as propriedades corretas sejam injetadas no `ImageDetail`.
   - O uso do operador de espalhamento (`...`) foi sugerido para copiar todas as propriedades do objeto de `pass props`.

3. **Estilização**:
   - Após implementar a correção, o autor prosseguiu para estilizar a tela de detalhes da imagem, mencionando a adição de um style sheet e a necessidade de importá-lo.

Ao final, após as alterações, o autor conseguiu realizar a navegação para a nova cena onde o nome da imagem foi exibido corretamente, embora ainda faltassem estilos.
```

Meu problema é na verdade na index, nas rotas, se você notar, eu pus navigator pro home né, mas initialout vai bater aqui, que não tem navigator passado com props, por isso que não tá dando certo.
Então, em vez de fazer essa rota desconhecida, vou futar home. Agora vai bater aqui e é passado o navigador pro home.
Vamos lá, home, vai chamar a scatter, deixa eu tirar. Eu dei um console log do props, só pra ver o que tinha.
Em ABC, vou voltar aqui. 1, 2, 3, clica. Agora o objeto console log do props deu o navigador.
Então, vamos lá. Volta aqui, tirar esse console log, o item foi clicar, o argumento é o route.
Então, vai dar o push com o image editor. Vamos lá ver se eu dá o push.
Clicquei. Clicquei. Não pode ler o nome do property. Então, a propriedade não está definida.
E é verdade, se você ver o image detail, a gente espera que tenha um props.image.
Na verdade, não tem nenhuma propriedade passada quando a gente dá um push nessa nova cena.
Então, a gente tem que fazer pass props. A gente tem que passar as propriedades.
Então, aqui eu vou usar essa propriedade chamada pass props pra passar as propriedades pro componente.
Quando a gente dá o push, empilhar na stack, né? Na pilha. Vamos dar o pass props e vamos passar o item.
Nesse caso, a gente chamou de imagem. Então, a propriedade que será injetada tem nome e imagem, que é o que a gente quer.
Props.image. E vamos passar o item. Agora, pra isso funcionar, teremos que voltar ao index.
Também passar o navegador e o route.pass props, né?
Lembra que esse objeto é, na verdade, o route. E pra passar o pass props pro image detail dentro do route,
quando bater no image detail, você tem que dar o pass props.
Então, se pass props vai ser esse objeto aqui, mas a gente tem que copiar todas as propriedades do pass props
para as propriedades do image detail. A gente vai usar o operador de três pontos.
Tá bom?
Nesse caso, os três pontos vão pegar todas as propriedades do objeto pras propriedades e injetar no image detail.
Por exemplo, no nosso caso, é como se fosse, aqui, aparecer o image como o objeto da imagem, que tem qualquer coisa.
Agora que a gente deu pass props e passou o item, vamos ver.
Vamos ver.
A você...
Ok.
Não tem o nome direito, mas eu não sabia. Salvado agora.
O demora. Ah, valeu, esse...
Espero que a API não chegue no limite de pedidos.
Clicei e foi pro nova cena, que está sem estilo, mas você pode notar que o nome está aqui, método, ABC, blah, blah, blah.
Então, vamos dar um estilo agora.
Image detail, vamos adicionar a spreadsheet aqui.
Style, spreadsheet, create e dar os estilos. Temos style sheet? Não, adicione no import.
Agora vamos dar um estilo pra... pra vivo.


0003-18 Debug e Mais Implementação da Mudança de Tela com o Navigator Push do React Native

Definição de Folha de Estilo para o Componente dos Detalhes da Imagem

```markdown
# Resumo do Transcript

- Definição de estilo para o contêiner e ajustes na interface.
- Movimentação do texto para não cobrir a barra de status, com um padding-top de 15.
- Verificação do wireframe onde o título da imagem está centralizado no topo, com espaço para a imagem ocupando a maior parte da tela.
- Discussão sobre o estilo do título, definindo o tamanho da fonte para 18 e métodos para centralizar o texto.
  - Utilização de `align self` para centralizar itens dentro do contêiner.
- Adição de uma margem inferior ao título de 15 para melhorar o espaçamento visual.
- Análise da imagem que ocupa quase toda a tela e a introdução de estilos para controlar sua largura e altura.
  - Definição de altura de 300 e largura total usando `flex: 1` e removendo a largura.
- Observação sobre a imagem que não aparece devido à falta de estilo adequado.

## Conclusões

- As alterações visam melhorar a disposição dos elementos na tela, garantindo que o texto e a imagem estejam corretamente posicionados e estilizados.
- A prática de ajustes em tempo real permite verificar a eficácia das mudanças rapidamente.
```


ponto container, e vamos definir esse estilo aqui na ful de estilos.
Vamos mover esse texto para baixo para não cobrir a status bar.
Vamos colocar um pad top de 15.
Então do topo vai ter um espaço de 15 e o texto não vai ficar por cima da status bar.
Essa barra que tem a hora, o carrier e a bateria.
Vamos salvar aqui para ver o que acontece.
Clicar em 1.
Agora não está cobrindo a barra de status.
Vamos dar uma olhada no wireframe.
O cenote de título da imagem é centralizado no topo.
Tem um espaço e a imagem ocupando a grande parte do meio da tela.
E depois seguido do botão.
Falta.
Vamos lidar com o título.
O aqui, o texto, o style, o post styles, ponto, o título.
Vou definir o estilo aqui.
Não se esqueça da vírgula.
Título.
Vamos colocar um fonte size 18.
E como a gente vai centralizar isso?
O cenote, o container que é o pai de todos esses componentes aqui, é essa view.
O padrão react native, da flex direction, column.
Então a direção padrão vai ser column.
Significa que os itens se alinham aqui nesse item principal verticalmente.
Então vai ser um item aqui, ele viu o tweet na autolinha, e o tweet na autolinha e assim por diante.
Então se a gente quiser fazer o título centralizado originalmente, a gente pode fazer de duas maneiras.
A gente pode ajustar a view toda para acertar o waste secundário que é o horizontal para ser centralizado.
Se a gente fizesse isso, todo o conteúdo seria centralizado desse cara.
É uma opção. Outra opção é só centralizar o texto, o componente de texto que a gente está usando.
Dessa maneira você só centraliza o texto, mas não todas as coisas que estão dentro da view.
Você pode usar qualquer um, só para demonstrar como a gente pode centralizar o texto, somente ele.
Vou usar o estilo no texto para centralizar.
Então como a gente vai fazer isso?
Vai salvar lá em self.
Vai se alinhar o componente, o próprio componente vai se alinhar com o parent.
Vamos botar center que veio o que acontece.
Salvar, vai automaticamente dar um reload ali.
Vou clicar em um desses.
Você notar, está centralizado aqui.
Porque tem muito texto, né?
E o volto está indo na funciona.
Vou dar aqui cachorro, buscar, carregando.
Vou clicar no que tem um título menor.
Clica nesse. Isso está centralizado.
Esse aqui é o align self para centralizar itens que já estão contidos dentro do container, da view.
E vai se alinhar o componente próprio com o container.
Vamos fazer, vamos botar uma, talvez uma margem, no abaixo, debaixo do título.
Então vamos botar margem, bottom.
Vamos pôr, sei lá, vamos pôr 15.
15 é mais ou menos esse aqui, se passa aqui da barra de status, essa altura.
Tá, vai dar uns 15 assim.
Acho que está bom.
Se você quiser mudar, por favor, senta-se a vontade.
Então vai dar margem aí.
Enquanto isso, eu não quero dar um refresh ainda, não.
Vamos ver aqui da imagem aqui.
Essa imagem está ocupando toda a tela.
Quase todo, né? Vamos ver.
O que a gente pode fazer?
Então a image tem um source e dá um UI.
E está dentro aqui da props.
Mas a gente não deu nenhum estilo, então vamos lá, bota styles.
Estals, ponto, sei lá, vamos botar imagem, o que é que eu botei ali no outro?
UI tem, é, eu fiz a melhor coisa, tá bom.
Volta aqui para o image detail.
Tá bom? Então dá os styles, styles e margem.
Vamos definir aqui, de baixo, no for de styles, imagem.
Faça um object.
Não se esqueça dessa vila aqui.
Então vamos dar uma largura e altura, tá certo?
Para a imagem.
Agora, vamos pôr a imagem para ter uma certa altura, sei lá, de...
Vamos pôr 300.
Agora para a largura aqui, vamos ocupar toda a tela, horizontalmente.
Eu sei que tem um espaço aqui no meu wireframe, mas vamos botar em toda a tela, sabe?
Como é que a gente faz isso?
Primeiramente a gente não sabe qual é as dimensões da tela,
mas tem uma maneira de ocupar toda a largura se você botar o know, como na wave, tá bom?
Bem, vamos ver o que acontece.
Normalmente eu ponho o flex 1, também, vamos ver se funciona assim o flex.
Ainda não ver a imagem, porque será gato branco ou olhos bicolor.
Tá bom, vou botar o flex 1.
Você nota que a altura está ajustada e botei o wave para know e o flex 1.
E por que não estava arrasando?


0003-19 Definição de Folha de Estilo para o Componente dos Detalhes da Imagem

Modifição do Componente de Detalhes para Mostrar a Imagem Corretamente

# Resumo do Problema de Exibição de Imagem

## Problemas Identificados

1. **Redirecionamento de URL**:
   - O `content URL` que deveria fornecer o link direto da imagem é, na verdade, um URL de redirecionamento. O React Native não aceita esse tipo de redirecionamento.

2. **Requisitos de HTTPS no iOS**:
   - Ao usar um dispositivo iOS, há uma restrição que impede o carregamento de imagens que não estejam sob um protocolo HTTPS. Isso não é um problema em Android, mas afeta a exibição em iOS.

## Exemplificação

- Ao buscar uma imagem e clicar nela, o `content URL` obtido gera um link que redireciona. Por exemplo, ao analisar uma imagem do Wikimedia (HTTPS), o link direto funciona. No entanto, muitos links do Bing não são HTTPS, causando erro de carregamento no iOS.

## Alternativa Proposta

- **Uso de `thumbnail URL`**: 
   - Em vez de usar o `content URL`, utilizar o `thumbnail URL`. Isso garante que a imagem carregue corretamente, dado que o `thumbnail URL` sempre fornece um link HTTPS, que é compatível com iOS.

```javascript
// Alteração no código
const imageUrl = item.thumbnailURL; // Substituição de content URL por thumbnail URL
```

## Implementação do Botão de Voltar

- A implementação do botão de voltar é simples, mas é necessário entender como navegar na pilha do navegador.
- Para retornar à cena anterior, utilizamos o método `pop` na navegação.

### Observações Finais

- O iOS exige sempre um protocolo HTTPS para carregar imagens. Essa solução usando `thumbnail URL` resolve o problema de compatibilidade com o iOS e assegura que imagens sejam exibidas corretamente na aplicação.

Então, a razão porque a imagem não está aparecendo é, na verdade, devido ao UI aqui
que a gente deu para esse componente.
Então se lembra que a gente pegou os dados da API, quando a gente clicou em um dos itens
da lista, a gente passou como props o content URL, dentro do content URL, a gente esperava que
recebeu o local onde a imagem está na web, mas tem um problema aqui, na verdade tem dois
problemas. Se a gente olhar o conteúdo desta variável aqui, nós vamos observar que é,
na verdade, um URL de redirecionamento para outro link da imagem. Então, deixa eu voltar aqui,
vou atualizar e vou dar outra busca, fazer outra busca aqui. Então, aqui tem um mesmo navegador,
deixa eu só colocar aqui do lado. Então, quando eu clico em um deles, vocês se lembram que a gente fez um
log do item que foi clicado. Então, a gente passou como props para essa nova cena o objeto que a gente
quer, que tem os dados da imagem que a gente quer e apareça. Aí a gente esperou que essa content
URL tenha um link para a imagem, vamos copiar esse link, vou abrir o nova tab e deixa eu remover
essas quotes aqui. Se você observar, a gente, ele está, na verdade, redirecionando para outro link.
Então, esse é o problema número um que a gente tem, não temos o link direto para a imagem, tá bom?
Agora, o outro problema é, no meu caso, que eu estou usando o iOS, né, da Apple, ele tem uma restrição
aqui para apps do iOS, o padrão é que não deixa você carregar imagens com o que não seja um HTTPS, tá bom?
Isso é uma coisa do iOS, no Android vai funcionar legal, ainda se não fosse uma imagem sem HTTPS,
mas no iOS não vai funcionar, então é o segundo problema meu aqui. Para ilustrar esse segundo problema,
vamos ver essa outra imagem que eu tenho, que é da Wikimedia, que é do HTTPS. Eu vou copiar esse link
só para você ver, e no lugar aqui no componente de imagem, na URI, no lugar de content, URL, eu vou passar,
na verdade, essa URL direto, o link direto, com o HTTPS, ok? Vou salvar e vou fazer qualquer busca aqui.
Note que vai ser sempre a mesma imagem para qualquer item que você clicar, vou clicar nesse é o gato,
você notou que a imagem agora apareceu, não é? Eu botei diretamente o link e a HTTPS, então funciona.
Nós sabemos que o jeito que a gente está adicionando a imagem, na verdade, está correto, então o problema
não era com esse negócio, mas com a content URL aqui. Agora vou voltar isso aqui.
Então como a gente vai resolver esse problema?
Então, vou voltar aqui, vou copiar esse content URL que a gente usou, tá? Vou só copiar aqui.
Deixa eu abrir o editor de texto aqui. Então, problema número 1 é que a content URL,
na verdade, tem um link que redireciona para outro link da imagem. Esse é o problema número 1,
e parece que o eact neire não aceita esse redirecionamento. E o problema número 2 é que,
no caso meu do iOS, não vai carregar imagens que não sejam HTTPS, bom? Nem todas as imagens que
vêm do Bing aqui são HTTPS. Por exemplo, essa aqui do gato branco, a gente viu que ele vai redirecionar
para uma imagem que não é HTTPS, se não é privado. Mas tem outros, por exemplo, se eu tenho uma
busca de novo, do gato, esse gato meditando aqui, eu cliquei, vou dar um console log, vamos voltar
para a minha debugger, até o final o item foi clicado, né? Esse é o object, aqui a content URL,
eu vou copiar e vou colar aqui, remove as quotes. Você nota que redireciona para uma imagem que tem
HTTPS. Se você quiser saber como uma maneira de extrair o URL original desse
content URL, eu vou fazer outro vídeo, mas você pode extrair o URL original daqui que tem aqui,
na verdade está entre esses negócios aqui, você nota que esse é o URL original. A gente pode extrair
e dar um decode, usando o decode URL component para recuperar o URL original, mas ainda tem o problema
do HTTPS, porque nem todos são, né? Então, no meu caso, eu vou escolher outra opção para resolver
esse problema que a gente tem, em vez de usar o content URL, eu vou usar a mesma coisa que a gente usou
para o outro acena, o thumbnail URL, tá bom? Então, resolver isso, eu vou voltar aqui, então,
em vez de pegar o content URL, eu vou botar em thumbnail, tá bom? Então, eu note que eu
selecionei os dois ao mesmo tempo, eu apertei comando D, no meu caso, que eu uso Mac, no seu caso,
pode ser o Ctrl D, se você usa o outro sistema, eu vou, eu uso o Atom como o texto editor, mas eu sei
também que editores como Sublime também têm essa função, funcionalidade. Então, eu botei thumbnail
URL aqui, vamos ver o que acontece agora. Carregando, clicar neste cara, tá aí, pareceu o thumbnail,
né? E o botão de voltar ainda não está definido, né? Ah, se você notar, no meu caso, que eu estou
com a iOS, sempre tem que ter o HTTPS, a imagem tem que ter, de um source que tem HTTPS, no meu caso,
que você olhar na descrição aqui do objeto, na thumbnail, né? O URL é sempre HTTPS, porque tá
do content clever network, um CDN do BIM, né? Se você copiar isso, colar, remover quotes, aí,
HTTPS sempre. Então, é uma solução para o meu problema. Então, vamos lá continuar, vamos implementar
o botão de voltar. Então, a gente já, para fazer o botão de voltar, é sempre muito simples, mas a
primeira coisa que a gente tem que saber é como ir voltar para a cena anterior usando o navegador,
né? Se você se lembra que para a gente vir para essa cena, a gente deu um push da cena anterior,
na home. Cadê aqui? Tá home aqui. Se você ver aqui, a gente clica item, a gente deu um navegueiro
push. A gente empilhou para o pilha do navegador, a stack, né? Nos caras agora a gente vai dar um pop
para voltar. Então, vamos lá. Mas o problema aqui é que esse cena aqui, essa cena, não tem acesso
ao navegador, porque? Vamos olhar no nosso index aqui para ver as rotas. Você note que o único
componente que tem acesso ao navegador aqui é o home, né? Que a gente passou o navegador com as


0003-20 Modifição do Componente de Detalhes para Mostrar a Imagem Corretamente

Implementação do Botão de Voltar para a Lista de Resultados – Navigator Pop

# Resumo da Transcrição

Neste trecho, o autor discute diferentes abordagens para gerenciar a navegação em um aplicativo, especificamente ao lidar com um componente chamado `ImageDetail`.

## Principais Soluções Apresentadas

1. **Passando o Navegador como Propriedade**:
   - A primeira solução sugerida é passar o navegador diretamente para o componente `ImageDetail`.

2. **Usando `Has Props`**:
   - A segunda solução é utilizar o método `Has Props` para injetar o navegador, permitindo definir uma função dentro do `ImageDetail` que será chamada quando o botão de voltar for clicado.

3. **Propriedade `onPressBack`**:
   - **Solução Escolhida**: O autor opta por passar uma função chamada `onPressBack` para o `ImageDetail`.
   - Essa função é associada ao método `pop` do navegador, permitindo que o botão de voltar chame essa função ao ser clicado.

## Detalhes da Implementação

- O componente `ImageDetail` deve receber a função `onPressBack` através de suas props.
- Quando o botão de voltar é acionado, essa função é chamada, o que faz com que a cena atual seja removida e o aplicativo retorne à cena anterior na pilha de navegação.
  
## Comportamento da Navegação

- A navegação é tratada como uma pilha (stack), onde:
  - Um `push` adiciona uma nova cena.
  - Um `pop` remove a cena atual e retorna para a anterior.

## Testes e Estilo

- O autor realiza testes ao clicar no botão de voltar e confirma que a navegação funciona conforme esperado.
- Finaliza mencionando a adição de estilo ao botão de voltar.

### Observação
O autor convida os ouvintes a compartilharem outras soluções nos comentários, promovendo a interação e aprendizado colaborativo.

Então, a gente poderia fazer o mesmo e passar o navegador com uma propriedade aqui, para
o image detail, dessa maneira aqui.
Essa é uma das soluções desse problema.
Tem também outras maneiras, por exemplo, em vez de navegador aqui, você pode passar
o navegador via Has Props.
Se lembra do Home, a gente deu um push e passou essas propriedades.
A gente poderia também passar o navegador aqui.
Desse jeito, aí dentro do image detail, a gente definiria uma função que quando clicar
no botão de voltar, iria chamar o desse.propsnavigator.pop, né?
Aqui dentro, desse cara aqui.
Desse caso, não tenha desse, porque é só props.
Tá bom?
Essa é a segunda maneira de resolver esse problema.
Mas eu não vou usar essa.
Eu vou usar uma terceira solução que eu acabei de pensar aqui.
Você pode usar qualquer uma, tá bom?
E se você conhecia outra solução, por favor poste como um comentário.
Então, eu não vou passar o navegador como props aqui e nem vou passar o navegador como
os props nas rotas aqui, no render scene.
O que eu vou fazer?
Eu vou passar na verdade, uma propriedade que vou chamar talvez de onPressBack, que
vai ser uma função que será passada com a propriedade do image detail que eu posso
chamar quando eu clicar no botão de voltar.
E nessa função, na verdade, eu só quero que o navegador pop.
Só quero que desempeire.
Desse caso, eu vou passar na navegueira o ponto pop.
Entendeu?
Então, eu tô passando a propriedade chamada onPressBack para o componente image detail.
E a propriedade, na verdade, é uma função.
Eu tô passando a função pop, que é do navegador.
Então, se eu fazer deste jeito, eu vou voltar para o image detail aqui.
E note que a gente tem o props aqui, do image detail, o componente vai passar do props.
Dentro das props, tem as propriedades que foram injetadas.
E nesse caso aqui no tautable highlight, quando eu clicar a voltar, eu quero que chamem
essa função aqui.
A função foi dada com a propriedade onPressBack, né?
Mas como eu tô usando a função de flash, eu tenho que botar os parânteses para chamar
a função.
Tá bom?
E quando eu faço o clique no voltar ou do toque, vai chamar a função onPressBack,
que na verdade é a função navegueira o ponto pop.
Vamos ver o que acontece.
Vamos salvar e voltar aqui.
Tá atualizando.
Eu vou buscar o gato.
Eu vou clicar num, clicar a voltar.
Oh, o que aconteceu?
Vamos ver.
OnPressBack.
Ah, eu esqueci de refiniciar o props, né?
Porque não tem função onPressBack definida aqui, localmente.
Então, tá dentro do props.
Ponto onPressBack.
Note que eu não tenho o des, porque é um componente funcional, né?
Functional component, que é definido como variável aqui const.
Vamos atualizar, deixa eu salvar.
Ele vai automaticamente atualizar aqui e vamos fazer uma busca de novo.
Ok, vamos ver.
Para, melhores cuidados.
Vamos clicar a voltar aí.
Voltou, né?
Vamos tentar outro.
Clicar a voltar, voltamos.
Então, o pop, ele descarta a cena que a gente estava e volta para a anterior da pedra,
né?
Da stack.
Você sabe que a navegação aqui é feita como uma stack, né?
Uma pedra.
Stack.
Pide em português.
Então, a gente dá um push quando a gente clica em um do itens.
Então, tá dentro da stack, tem primeiro o home, aí demos um push e no topo da stack
tem o image detail.
Topo.
Aí, quando a gente dá um pop, desempira, a gente remove esse cara e fica só com o home.
O home agora é o topo, né?
Entendeu?
Vou remover isso.
Salvar, então.
Tá tudo bem agora.
Vamos só dar um estilo para esse botão voltar, só para terminar.


0003-21 Implementação do Botão de Voltar para a Lista de Resultados – Navigator Pop

Retoques do Estilo do Componente de Detalhes da Imagem – Aula de React Native

# Resumo do Transcript

O áudio discute a implementação de wireframes e o estilo de um botão em uma interface. Aqui estão os principais pontos abordados:

- **Wireframes**: A conversa começa com referências aos wireframes disponíveis.
- **Botão de Voltar**: O botão deve ser centralizado, semelhante ao título da imagem, utilizando a propriedade `align self`.
- **Espaçamento**: O apresentador menciona a necessidade de criar espaço entre a imagem e o botão, sugerindo o uso de margem abaixo da imagem ou margem no topo do botão.
- **Borda do Botão**: É decidido adicionar uma borda ao botão, especificando largura, espessura e cor. A borda deve ter um raio para um leve arredondamento.
- **Padding**: Para evitar que o texto fique muito próximo das bordas do botão, é sugerido adicionar padding. O uso de padding igual em todos os lados elimina a necessidade de centralizar o texto.
- **Estilo do Texto**: O texto do botão pode ser estilizado em negrito. O apresentador também menciona que os ajustes de estilo são opcionais e que o foco principal deve ser a funcionalidade.
- **Conclusão**: O usuário é encorajado a modificar os estilos conforme preferir, incluindo o título da imagem e a aplicação de bordas.

Esses passos enfocam a criação de uma interface funcional e visualmente agradável, permitindo flexibilidade na personalização.

Então vamos voltar aqui, tem uma imagem do wireframes, dos wireframes que a gente tem,
né?
wireframes, só pra você saber o que que eu tô falando, eu vou digitar lá.
Então a gente vai botar o botão de voltar centralizado e com uns faços aqui entre a
imagem e o botão, né?
Quando você se lembra a gente pra centralizar o título da imagem, a gente usou o align
self, né?
Então vamos fazer o mesmo aqui, vamos voltar e cadê o botão aqui?
Então primeiro eu vou dar um style, protótipo highlight aqui, eu vou dar o style, propriedade
e vou passar os styles, talvez botão, vamos ver.
E agora eu vou definir esses styles, botão aqui na forma de styles no...
aqui, vamos fazer o botão, dar um object, eu sempre gosto de botar a vírgula aqui,
que eu pode esquecer depois.
Então vamos dar um primeiro, como é, um align self, né?
Pra center.
Então o botão vai centralizar, eu salvei o negócio atualizou, desculpa, queria deixar
lá.
Mas agora vamos ver com a pedinho aqui, ó, já tá no centro, né?
Legal.
Então vamos dar um espaço antes da imagem, tem várias maneiras de fazer isso, né?
A gente pode dar uma margem no abaixo da imagem, ou a gente pode botar uma margem topo
no botão, tá?
Depende de você, que você quer fazer, tá bom?
Ah, talvez eu ponha...
Popou aqui mesmo no botão, no botão da imagem, vou botar uma margem topo aqui de, sei lá,
aqui, igual ao outro aqui, né?
Dar a gente topo.
Então vai ter um espaço antes do botão, no topo, né?
Vamos também botar uma borda, borda, né?
Aqui tem uma borda, vamos fazer borda width, que é com a largura, né?
Larga o aqui.
Espesura aqui, vamos ver.
E vou botar só um.
Se quiser, por um...
A redondada, você pode botar uns quatro, sei lá.
Você tá bem a color, pra cor da borda.
Sei lá, vamos botar um gray só pra ver como é que aparece.
E também, quando a gente botar o botão aqui, talvez não tenha padding dentro do botão,
aí as bordas vão ficar colando com o texto.
Vamos resolver isso quando a gente vê o...
Não, preview aqui.
Vou clicar nesse cara aqui.
Tá aí.
Noite, como eu falei, aqui tem um espaço por causa do padding do mod top, né?
E demos uma borda com width um.
E o radius foi quatro pra redondar um pouquinho, né?
Ah, vamos botar um padding, que esse negócio tá muito colado com o texto.
Vamos botar um padding aqui.
A gente pode pôr o padding no topo, no abaixo e...
Left and right.
Vamos botar, sei lá, vamos botar uns quatro.
Vamos ver o que acontece.
E eu acho que se notar a gente pôr um padding quatro, eu acho que nem precisa centralizar
o texto, né?
Porque a gente pôs um mesmo número de padding em todos os lados, então não precisa botar
um centralizar o texto, o componente de texto.
Ah, por favor, se você quiser adicionar mais pra um, por favor, ponha.
Aqui o meu foco desses tutoriais é só a funcionalidade, não estamos focando no estilo,
tá bom?
Então, tá bom.
Eu acho que tá bom assim.
Você quer mudar o estilo pra botar esse texto mais abaixo e tal, por favor, faça o que
ele quiser, né?
Agora vamos botar, voltar, aí tá tudo legal, a imagem muda, clica aqui, aí, legalzinho.
Vamos pôr esse texto aqui pra negrito, talvez, sei lá, vamos voltar aqui no esse cara aqui,
o text, né?
Não tem nenhum estilo, mas eu só vou adicionar esse style aqui, botar style, texto.
Sei lá, se quiser botar o texto do botão, qualquer coisa, qualquer nome que você achar,
você é melhor botar o texto do botão, só vou botar um font weight aqui pra deixar
negrito.
Aí a gente põe bold.
Só pra ver como é que fica aí.
É melhor.
Se você não gosta, tire.
Tá aí.
Olha aí, legalzinho agora.
Se quiser também botar bold pro título aqui e botar talvez uma borda pra imagem e melhorar
esse estilo aqui, tá bom?


0003-22 Retoques do Estilo do Componente de Detalhes da Imagem – Aula de React Native

Resumo do Curso Pesquisa de Imagens (App móvel c/ React Native)

# Resumo do Tutorial

Neste tutorial, a aplicação desenvolvida permite a busca de imagens utilizando a API da Microsoft. Apesar de alguns desafios, como a utilização de URLs de conteúdo, que não foi possível, a solução encontrada foi utilizar o thumbnail URL para exibir as imagens em uma segunda cena.

## Ajustes e Estilo

- **Ajustes de Estilo:**
  - Modificações foram feitas no estilo do container da cena inicial (home) para corrigir margens e espaços.
  - Foi sugerido adicionar padding no topo para evitar sobreposição com a status bar do dispositivo.

- **Refatorações:**
  - Foi proposto um processo de destruturação (destructuring) das propriedades de estilo para facilitar a legibilidade do código, evitando a repetição da palavra `styles`.

## Componentes Utilizados

A aplicação foi dividida em múltiplos componentes:
- **Home:** Tela inicial com a caixa de busca e lista de imagens.
- **Image Detail:** Tela que exibe detalhes da imagem selecionada.

## Funcionamento da Busca

- O componente de busca comunica-se com a API da Microsoft, enviando uma requisição quando o usuário clica no botão de busca.
- A resposta da API é utilizada para atualizar o estado da aplicação com as imagens retornadas.

## Navegação

A navegação entre componentes foi gerida utilizando um `Navigator`, que lida com as rotas dentro da aplicação:
- A primeira tela exibida é a "home".
- Clicando em um item da lista, o usuário é levado à tela de detalhes da imagem, onde pode voltar à tela inicial.

## Considerações Finais

- O tutorial abrangeu conceitos importantes de React Native, como a distinção entre componentes funcionais e de classe.
- Foi prontamente abordado o problema com URLs de imagens, optando pelo uso do thumbnail em vez do content URL.
- O tutorial foi concluído com sugestões para aprimoramento e estilização da aplicação.

Se você completou o tutorial, parabéns! Para mais informações e para interagir, você é convidado a se inscrever e deixar comentários ou perguntas.

## Contatos

- **Twitter:** [nbkhope](https://twitter.com/nbkhope)
- **GitHub:** [nbkhope](https://github.com/nbkhope)

Obrigado e até a próxima!

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


0003-23 Resumo do Curso Pesquisa de Imagens (App móvel c/ React Native)

Aula Bonus: contentUrl – Curso de React Native Pesquisa de Imagems

# Resumo do Vídeo

Este vídeo explora problemas enfrentados ao utilizar o `content URL` em vez de `thumbnail URL` devido a dois principais fatores:

1. **Redirecionamento**: O `content URL` redireciona para outra imagem.
2. **HTTPS**: Imagens extraídas do `content URL` nem sempre estão em HTTPS, o que é um requisito para iOS.

O vídeo explica que, enquanto não pode resolver o problema do HTTPS, é possível lidar com o redirecionamento.

## Principais Tópicos

- O autor revisa o funcionamento do `content URL` e identifica que ele contém um URL que redireciona para uma imagem maior.
- É demonstrado como extrair o URL original de uma string usando JavaScript:
  - Utiliza-se métodos como `indexOf` e `substring`.
  - Menciona o uso de expressões regulares como uma alternativa mais eficiente.
  
### Solução Proposta

1. Extrair o URL original da string do `content URL`.
2. Decodificar o URL usando `decodeURIComponent`.
3. Tentar substituir `http` por `https` para resolver o problema do carregamento no iOS.
  
### Código Exemplo

```javascript
const startIndex = url.indexOf('R') + 3;
const lastIndex = url.indexOf('P');
const originalUrl = url.substring(startIndex, lastIndex);
const decodedUrl = decodeURIComponent(originalUrl);
```

### Conclusão

- Apesar da extração e decodificação bem-sucedidas, o problema do suporte a imagens que não usam HTTPS permanece sem solução.
- Os usuários são incentivados a comentar se souberem de uma alternativa.

O vídeo serve para quem deseja entender mais sobre manipulação de strings em JavaScript e o uso de expressões regulares, além de discutir um problema prático de desenvolvimento em iOS.

## Informações Finais

- O autor convida os espectadores a se inscreverem no canal e a conectarem-se nas redes sociais.
- Para sugestões de melhorias ou problemas encontrados, o público é encorajado a deixar comentários.

Esse vídeo é só de uma saída aqui para a gente explorar mais o problema que a gente teve com content URL
no imediativo aqui que você...
que a gente escolheu, optou para usar o thumbnail URL, em vez de o content URL,
e por causa dos problemas de 1, que era o radiracionamento, o URL conteúdo era um link que radiracionava para outra imagem,
e 2, o HTTPS, que nem toda imagem que a gente se extraiu do content URL vai ser HTTPS.
Então, se for iOS, o da Apple, ele tem esse...
esse...
ele não aceita imagens que não for... não tenham HTTPS.
Então, para resolver...
a gente não dá para resolver o segundo problema,
mas a gente pode resolver o problema do radiracionamento e até tentar...
de mostrar uma imagem aqui.
Nem que seja toda, mas as que forem HTTPS vão ser mostradas dentro do content URL.
Então, esse vídeo é mais para explorar e para entender mais o que está acontecendo com esses dados, esses strings,
e para trabalhar com strings, talvez usar regular expressions, expressões regulares,
você nunca viu, é só para ter um... se divertir, não é?
Então, se você não estiver interessado, não precisa assistir, não, tá bom?
Aqui é só um bonus, né?
Então, vamos começar aqui, eu falei...
Eu já tenho esse aqui feito aqui, voltar, já funciona,
mas o negócio é do content URL, né?
Que vamos mudar aqui.
Em vez de ter o Flameneer, eu vou voltar para o content URL.
Content URL.
Tá bom? Tá aqui também.
Então, quando a gente tem o problema, né? Quando a gente clicou,
a gente notou que content URL tem um string, não aparece, né?
Vamos ver quando eu cliquei, eu dei um console log aqui, deixa eu ver aqui meu debugger,
tô no debugger, tá bom?
Eu vou dar aqui até o último, o item foi clicado, quando eu cliquei naquele cara, eu dei um console log aqui.
Eu quero ver o que está dentro do content URL.
Tem esse cara aqui, eu vou dar a copy-a, copy-a, e vou para o meu editor de texto.
Já tem um aqui, mas, vamos ver.
Vou colar aqui, né?
Vou colocar esse aqui, content URL.
Então, se eu aumentar o texto aqui para vocês verem melhor...
Então, esse cara aqui, eu vou remover esses quotes, tá bom?
Esse cara é um URL que vai redicionar para a imagem.
Você nota aqui, eu vou copy-ar, colei, aí dá um tapinho, é ir redicionando para essa imagem aqui maior, muito legal.
Então, parece que tem um problema aqui, não está funcionando.
Então, o que a gente pode fazer é extrair o URL original.
Na verdade, se você analisar esse URL aqui, você note que quando você chega nesse URL aqui, URL igual,
aí aparece aqui, até o P aqui igual, tem o URL original, vou dar uma copy-ada, e vou colar aqui.
Essa aqui é o original, se você não está.
Sendo que está toda codificada, porque esse negócio aqui, que na verdade corresponde para os dois pontos e o barra-barra.
Aí, esse %2f, na verdade, é barra.
Quada vez que você olha esse 2f é barra, mais barra,
eu vou não copy-ar aqui, só para ver se está funcionando.
Copy-ei, e aí funcionou, né?
Então, a gente conseguiu extrair o URL original desse cara.
Então, como é que a gente faz isso usando JavaScript?
Então, a gente pode fazer primeiro, vai pegar o contínuo URL,
primeiro a gente tem que localizar onde é que está essa parte aqui dentro dessa string.
A gente pode usar duas maneiras, se você não sabe a expressão é regulares,
você pode usar o index of numa string, né?
E aí você põe o pattern, qualquer coisa.
Aí você vai localizar o index desse primeiro HTTP, talvez,
ou você pode localizar pelo esse cara aqui.
Eu vou usar esse cara, porque eu sei que quando tem esse R, essa query com R,
é quando começa o URL original e só termina quando chega nesse outro aqui.
Então, está depois desse cara e antes desse cara aqui, ou digita errado.
Então, está dentro desse cara.
Então, se você não sabe se faz o regulares,
pode só dar um index of nesse cara com assim, né?
Agora vai dar o index, o índice do começo desse cara aqui, né?
Que é no 100%.
Mas a gente não quer isso, então posso adicionar três para chegar aqui.
Então, aqui, um, dois, três.
Agora eu estou aqui, vou lugar certo.
Começa certo, né?
E o último começo, vou botar aqui o começo aqui, começo e o final vai ser antes desse cara.
Eu vou dar também um counter, o URL index of o P aqui.
E quando eu dou esse cara, ele vai chegar nesse aqui, vai dar o index desse cara.
Nesse caso, está legal porque quando eu pô o entre esse e esse,
sempre nunca inclui o index final, se eu dar um substring.
Que é isso que eu vou usar.
Substring no começo e o final.
Sempre no começo, vai começar no index do começo e termina no índice final menos um, tá bom?
Por isso que não adiciona um aqui.
Ou subtrai um.
Então, vamos ver o que acontece.
Vou copiar isso aqui.
Essa URL para a gente fazer um experimento aqui no web console,
só para ver se está realmente funcionando.
Só para se divertir, vamos ver.
Vou dar aqui.
Eu só abri o web console aqui no meu Chrome, abri a nova janela aqui, tem um console.
Eu vou limpar tudo e vou definir um variável const com a URL, tá bom?
Vou botar aqui as quotes e vou botar o cara aqui.
Certo?
Então, o URL é esse cara.
Então, vamos dar um index, o que é isso aqui?
Primeiro aquele cara, o R.
O que é que a gente... um 150.
Mas a gente tem que adicionar 3, tá bom?
Esse é o primeiro, é o começo.
Então, se você notar, a gente dá um substring com aquele cara aqui.
Vamos botar dentro uma variável.
Sei lá, vamos...
Sei lá, eu vou...
Pode botar a start, primeiro eu começo, sei lá, vou botar a start index aqui.
Aqui é o que eu vou fazer, vou fazer o rl.substream com o start index, tá bom?
Com o argumento.
Aí você note que a gente já pega o começo, mas ainda tem o hold, cliquei aqui.
Eu tenho essa parte aqui do final que a gente não quer.
Então, vamos fazer isso, tá bom?
Cadê? Vamos fazer o outro.
Vou chamar de last index, tá bom?
Eu quero a posição aqui desse cara do final.
Vou botar o rl.indexof, vou dar o p.
Então, vai achar a posição desse cara aqui, né?
Você note, vai dar um 227.
Então, se eu der um substring,
eu começo no start index e termino antes do last index.
Sempre antes, né?
Um menos, last index, menos um, não inclui esse final, tá bom?
Então, não vai incluir esse ampersand aqui.
Então, vamos ver o que acontece, tá aí.
A gente extraiu a rl toda,
exceto que ainda está codificada.
Na verdade, eles deram um encode, uri component, para codificar.
Então, para decodificar, a gente vai fazer o decode, uri component.
Essa é a função, aceita a string como argumento.
Então, por exemplo, vou copiar esse cara aqui
e vou passar como argumento aqui.
Olha o que acontece.
Não é lindo?
Tá tudo bonitinho agora.
Copiar isso só para ver se está funcionando.
E legal.
Então, a gente conseguiu com sucesso converter
todo aquele negócio todo para o rl original.
Tá bom?
Então, vamos testar isso.
Aqui, vou fazer a mesma coisa, tá bom?
Estamos no imedit.tlt, aqui eu vou fazer primeiro,
vamos fazer assim.
Vamos chamar de encoder, uri.l.
Vai ser o substring do contador rl,
substring com o primeiro, u para index,
mas a gente não definiu ainda, então vamos definir aqui.
const start index.
Vai ser o contador rl, ponto index of,
a gente está procurando esse cara aqui.
Tá bom? Agora vamos fazer o último contador rl, index of,
procurando o p.
Note que eu esqueci o plus 3,
que eu tenho que adicionar 3 porque a gente começa aqui 1, 2, 3,
depois desse sinal de igual.
Então, dentro da encoder de uri.l,
vai parecer esse cara aqui,
mas está codificado,
a gente vai ter que usar esse cara, decoder, uri, component.
Então, finalmente, eu vou fazer o imed, uri.l,
vou chamar o imed, uri.l,
e vou fazer esse cara encoder de uri.l, ponto,
oh, desculpa,
é um argumento da função decoder, uri.l, component.
Em vez de contador rl, eu vou em imed, uri.l.
Vamos dar um console log,
só para ver se está dando o cara certo, tá bom?
Console log esse cara.
Sala.
A busca.
Vamos ver o console log, não apareceu nada.
Vamos ver o que é o console log aqui,
vou para o meu debugger,
vou até o final, está aqui, tudo certinho, né?
Mas se você não está, não funcionou,
porque a gente não tem HTTPS.
Aí estamos lascados, né?
Mas eu acho que essa URL não é HTTPS,
se você não está aqui, eu vou copiar o conteúdo URL.
E, boa, ele vai redirecionar,
você nota que não é HTTPS,
mas se eu voltar aqui e ver esse gato meditando,
gato meditando eu sei que é HTTPS,
ainda não aparece, mas por que?
Vamos ver o console log.
Da até o final, o sinal está aqui,
a gente extraiu esse aqui.
Note que não é HTTPS,
mas quando eu aperto Enter e vou para a página,
ele vira HTTPS.
Mais um problema para a gente, né?
São uma solução que eu achei para esse cara,
é só dar um replace,
e quando a gente vê HTTPS, a gente põe o S.
A maneira fácil de fazer isso,
é só que no imedio URL,
depois de decodificar, a gente vai dar a replace
com HTTPS, com HTTPS.
Aí sempre vai mudar o negócio para HTTPS.
Nem que o cara seja HTTPS, vai tentar.
Vamos ver o que acontece.
Tá bom?
Eu sei que o gato meditando HTTPS,
então funcionou.
Mas vamos voltar aqui e ver os caras que não são HTTPS?
Então não funcionou, né?
Como eu disse no começo,
a gente não dá para resolver esse segundo problema,
se a gente continuar usando o URL.
Se você sabe de uma solução para esse problema,
por favor, deixa um comentário.
Tá bom?
Agora o mesmo é tudo aqui.
Usou no solo na HTTPS, no iOS, né?
O único motivo que eu dei esses hacking aqui
é por causa que eu estou usando o iOS,
que não deixa carregar a imagem de que não seja o HTTPS.
Que ele funcionou, esse cara funciona.
Será que isso funciona? Não. Não é HTTPS.
Não em todas as imagens são.
Então o código que eu usei aqui,
eu usei o index of,
mas se você sabe a expressão irregular,
e se a gente pode fazer de outra maneira,
talvez menos código, né?
Deixa eu te mostrar como é que é.
Tem o meu text editor aqui mostrando o que a gente fez.
Então o que a gente fez foi esse aqui, o simples, né?
Faz esse plot, o start, o last, e decode,
e a gente dá um substring.
Mas você tem também a expressão regular.
Você pode usar esse aqui, você pode botar esse cara,
e o ponto significa um único caractere, né?
Single character.
Essa estrela aqui diz que esse cara anterior
zero ou mais.
Então eu posso ter zero ou mais caractere.
E de seguida desse cara,
que eu sei que a URL está entre um e outro,
e a match, ele retorna um array,
e para pegar o primeiro elemento da array,
eu dou um subzero aqui, o subzero.
Aí depois eu dou uma der codificada,
e dou um substring.
E eu ponho três aqui,
porque esse cara vai aparecer, então tem que ter um, dois, três,
depois desse sinal de igual,
e ponho a length, menos três,
porque o length vai estar aqui,
eu ponho um, dois, três, antes.
Tudo que está dentro, entre os caras.
Então vamos fazer esse método aqui também,
só a piquinha, tá bom?
Vou você ver, vou te mostrar aqui no browser,
o que acontece, só para você ter uma ação.
Cadê o negócio que a gente fez antes?
Está aqui, URL, cadê?
Esse cara, né?
Deu a URL, o que a gente fez?
Deu o match, né?
A expressão regular, o r, ponto, estrela,
zero mais caracteres, depois desse cara,
e antes eu quero, e depois eu quero esse p.
Vamos ver o que acontece.
Isso, a gente pega um array, que tem um único elemento aqui,
que é o negócio todo, not que inclui o r e o p aqui.
Aí eu cliquei lá.
Remover esse cara, eu dou o substring aqui, três, né?
Você, o que aconteceu?
Eu esqueci do zero, né?
Pegar o elemento.
Agora virou o string, eu dou o substring,
começando no indice 3.
Noto que eu tenho a gata de p, ba, ba, ba,
mas ele não tem esse p aqui, né?
Ok.
Eu vou dar, ok, tem que ser a length desse cara todo,
então vou botar de novo variável.
Vou botar aqui, sei lá, encoder, URL,
vou escolher o URL, ponto, substring, 3,
e o encoder, URL, ponto length, para saber o length.
Mas se eu pôr aqui, o que vai acontecer?
Ainda eu tenho p lá,
então ponto length minus 3, para tirar esse p.
Começa 1, 2, 3, antes do p,
nem por cento do p.
A por cento do p, né?
É assim que a gente faz.
E dá o, finalmente, decode, o ri,
pô, né?
Como esse cara é um elemento.
E aí?
Aí, acabou, tá bom, né?
Então vou só copiar esse código aqui,
se você quiser fazer,
se você tá um pausa, e copia o código, tá bom?
Aqui eu vou me repover tudo isso.
Vou botar esse cara aqui.
Encoder o URL, dar um match,
aqui, pego o primeiro elemento,
aí faz o image URL, dá um decode,
com substring, começando 3,
e termina no length minus 3.
E aqui, image URL,
vamos ver o que acontece só para ver,
vou dar um,
atualizada,
gato,
não acho que eu esqueci de botar o replay do HTTPS, né?
Vou clicar nesse cara aqui,
ver o que que dá o console log,
no final.
Ah, é para ser legal,
mas não tem um HTTPS, então,
vamos voltar.
E aqui, oh,
talvez a gente
um-botar aqui.
O que eu vou fazer?
A sanolinha tá muito longa, né?
Eu vou fazer assim de novo,
vou botar image URL.
Você pode fazer isso,
só vou fazer isso aqui.
E vou dar o replays.
HTTPS,
2 pontos, vou botar o gato de HTTPS,
só de cara olhar.
O que aconteceu?
Read only,
porque eu declarei como console, né?
Às vezes o problema é botar let, tá bom?
O que eu consto,
você só pode definir uma vez e não mais.
Mas se você botar let,
ele pode definir mais de uma vez.
É o negócio do S6,
a nova versão de JavaScript.
Vamos lá, dar um let,
e posso mudar de novo.
Gato.
Vou buscar, vou buscar, vou buscar.
Esse cara não funciona porque é HTTPS, né?
A gente notar, aqui,
voltar o cara aqui,
a gente cadê, oops.
A gente tira aqui o que o Zé, tá aí.
Oh, não.
Vou clicar,
parece esse cara, né?
Gato de HTTPS, não sei o que.
Aí, parei com esse negócio.
Não é gato de HTTPS, né?
Esse cara aqui,
não funciona,
porque não é HTTPS.
Eu removi o HTTPS.
Só a HTTPS.
Mas o meditando funciona, né?
Esse cara aqui.
O que, HTTPS?
Não funciona, né?
Legal.
Esse não é.
A gente adicionou,
mas nem todos funcionam,
por exemplo,
ao cadê.
Esse cara fica parecendo direto,
será que eu pus o negócio aqui, ó.
Tá bom.
O que eu tinha copiado, ó.
O que aparece.
Não, não funciona, porque não é HTTPS.
Eu removi, aí, tá aí.
Tá bom, espero que, ó,
você tenha gostado desse vídeo
só para se divertir e explorar mais,
porque o problema que a gente teve
foi que a gente fez um esquizo de imagens,
porque a gente usou o thumbnail
URL, em vez do conta do URL,
que seria o ideal, né?
Mas não funcionou.
Devido a esse negócio de um,
vai direcionar o vídeo da imagem,
e dois,
no meu caso do meu
projeto, que é no iOS,
ele não aceita imagens carregadas
do servidor remoto,
que seja um HTTPS
sem o iOS, né?
A maneira que a gente tentou resolver o problema,
vou extrair o URL original,
e a gente resolveu o problema
do redirecionamento.
E a gente viu isso legal aqui,
usando a Ragex, né?
Espeções regulares, usando o
match, em som match.
E a gente decodificou o
URL.
Mas, aí, a gente não conseguiu
resolver o problema, porque todos,
nem todas as imagens
são HTTPS, e não dá para ver quase
tudo isso.
Tá bom?
Muito obrigado por assistir,
por favor, subscreva.
Vamos conectar nas redes sociais,
eu tô no Twitter, também tenho GitHub.
Muito obrigado.
