Au 02 - Mobile - React Native - Explorando estrutura de projeto e opções do Expo - Mestres BEGIN

[Música] fala pessoal Janer aqui no vídeo Hoje a gente vai começar a falar aqui um pouco sobre a estrutura do projeto que a gente criou a gente vai explorar aqui melhor a estrutura do Expo a gente vai dar uma olhada melhor ali na documentação do Expo né sobre pra gente ter uma noção melhor né da ferramenta que a gente tá utilizando as possibilidades que a gente tem e também entender melhor o que a gente vai fazend eu vou apresentar aqui para vocês o projeto que nós iremos desenvolver e pra gente ter uma noção melhor de

onde começar tá então eu tô aqui no vs code e tô aqui com o projeto que Nós criamos né aqui o que eu fiz basicamente foi só rodar um npm start no terminal e E aí apertei a tecla a né para ele abrir o meu Android o meu emulador que tá aqui né com a aplicação e basicamente é isso né vamos começar aqui falando sobre a estrutura que foi criada né que se a gente dar uma olhada isso aqui lembra muito um projeto node né na verdade é né um projeto baseado em node então nós

temos aqui a node mod que armazena as bibliotecas e as dependências Desse nosso projeto e as dependências do projeto ficam sempre listadas aqui no package Jon né nesse arquivo dar uma olhada aqui nós temos né alguns scripts que basicamente eu eu defino um script que o node vai executar E aí lá no terminal se eu executar um npm start npm Run Android npm Run iOS npm Run web ele vai executar esse esse trecho de código aqui né as dependências que são as bibliotecas então Aqui nós temos o Expo Expo status bar react react Don react

Native E também o react Native web e as dependências de desenvolvimento né aquilo que a gente usa só no ambiente de desenvolvimento que é o Babel o typ os a tipagem né do react tipagem do react Native e o Type script tá então esse arquivo pack json ele vai tá a gente vai ter sempre ele no nosso projeto descrevendo aqui o as dependências e enfim os scripts ou o que é o Projeto né e TDS config porque a gente tá usando typescript né então a gente configura aqui o a gente estende aqui a configuração do

expo no typescript e aqui a gente vai conseguir fazer as configurações nossas do typescript a gente tem aqui também e o Babel config JS né que é basicamente o Babel Ele trabalha ali na parte de onde o código é compilado e convertido né No me a gente converte o typescript por JavaScript o JavaScript vai virar um bundle que depois vai virar o código nativo né então o Babel tá sempre trabalhando a nesse meio a gente tá usando aqui o O plugin do Babel preset na verdade né do Expo tá então o Expo também tá gerenciando

isso aí pra gente e outro arquivo interessante esse App json que é basicamente um meio-termo um onde a gente vai fazer as configurações do aplicativo eh no com como o aplicativo vai se comportar lá no nativo né Depois que esse código JavaScript esse projeto vira um projeto ou in cotl ou em iOS né lá lá com com Swift ou Object então aqui a gente vai estar descrevendo as questões das imagens da Splash screen e o estilo da interface ícone a orientação a versão do projeto nome enfim tem várias coisas que a gente vai vai a

gente pode eh tá definindo aqui nesse projeto nesse curso a gente não vai abordar muito isso mas só tô passando aqui para dar uma noção melhor do que que é cada arquivo tá Git ignor tá relacionado da Git né a versionamento nós temos aqui a pasta assets que é onde a gente vai est colocando os nossos arquivos estáticos né Eh os asss aí da aplicação então a aplicação tem ícones tem imagens t coisas vai ficar aqui em assets tá e nós temos aqui também o app.tsx que é o ponto de entrada aí o ponto de

início dessa nossa aplicação então é um arquivo que tá sempre presente e a partir dele que a gente vai eh desenvolver a aplicação dele vai ser o ponto de início então Aqui nós temos né um anvio isso aqui lembra bastante isso aqui é jsx tá a extensão do arquivo é tsx porque a gente tá tá usando typescript mas aqui nós temos aquela mesma ideia de componentes aquela mesma ideia de componentização de JavaScript junto ali com o XML né que é o que junta aí o o nosso o nosso jsx então é basicamente a questão da

componente né Nós temos sempre funções que Retornam um elemento visual tá então antes de retornar a gente pode estar criando a nossa lógica né a gente pode estar executando funções eh lembra bastante ou é lembra basicamente isso aqui é react né A questão do react Nate é meio que a conversão do react pra parte Nativa tá então essas tags aqui View text status bar a gente pode pensar na View como uma div lá do HTML o text né como a tag P ou H1 H2 enfim algum spam pode pensar nele assim essa tag status bar

tá referente à barra de status ali do Android né aquela barra superior Então se a gente vem aqui ó no emulador essa parte superior aqui né Onde fica ali as notificações enfim esse Style dele aqui tá alto ó se a gente troca isso aqui pode colocar Dark ou Dark é o que já tá se eu colocar Light a gente colocar Light os ícones sumiram né porque eles ficaram branco também como o fundo é branco então tudo sumiu o Dark é o que tá em padrão né que os ícones aqui do status bar fica escuro né

não é um preto enfim né mas aqui status by é onde a gente configura é meio que o intermédio é um componente que faz esse meio de campo aí entre o código JavaScript e o código nativo né porque essa parte do status bar ela é algo nativo do dispositivo que tá executando né então cada dispositivo vai ter um status bar aí é diferente cada sistema operacional enfim tem seus detalhes mas aqui ela é exposta pra gente via aqui o a biblioteca né Expo status bar e a gente só usa aqui né passando os parâmetros bem

de uma forma Bem Mais Simples né mas enfim eh isso aqui é a parte da da componente né Nós temos aqui a parte de estilo né Essa estilização Nativa ela usa o Style sheet esse Style sheet vem do react Native que é basicamente uma forma da gente passar os estilos eh em JavaScript né que lá no no react a gente faz a gente faz essa estilização usando lá o CSS eh e Aqui nós temos uma forma voltada pro JavaScript de definir estilo então aqui esses estilos são criados via objeto né então aqui eu tenho o

estilo que eu tô chamando de contêiner E dentro dele eu tô aplicando algumas propriedades né que é o Flex background color align items justify content que é a o CSS só que escrito um pouco diferente né aqui a gente usa o c Case ou seja ao invés de eu dar um ifen e e digitar a o no caso aqui background Color em CSS né seria background traço color mas aqui é o c Case iniciando a próxima palavra com a letra maiúscula Mas enfim esse ST sheet a gente pode muito bem separar ele em um arquivo

Styles e para organizar melhor o código né separar o arquivo de estilo do arquivo da componente a gente pode usar aqui também ST components que fica muito bom fica muito interessante mas nesse nesse projeto nosso que gente vai est fazendo usando o Style sheet para manter as coisas o mais simples possível Tá mas dito isso né explorado isso aqui vamos lá pra documentação né pro web aqui pra documentação do Expo pra gente dar uma olhada melhor no que a gente tem aqui de possibilidade né e primeiramente eu quero falar aqui sobre os workflows na verdade

se a gente vem aqui na documentação do react Native né de configuração do ambiente que eu mostrei na aula passada mas ele fala já tem aqui a opção do do o Expo go né pra gente criar o nosso projeto usando o Expo então o Expo é uma ferramenta muito boa muito boa mesmo contribui muito pra comunidade e não é à toa que ela tá aqui na documentação do pessoal do react Native né então é algo muito interessante da gente estar explorando mais e entendendo um pouco melhor sobre essa ferramenta tá então se a gente olha

aqui na configura na documentação do Expo onde eles falam sobre workflows e essa questão do workflow é interessante porque nós temos aqui o managed workflow e o Bear workflow o que que é isso esse managed workflow é o que a gente AC é o projeto que a gente acabou de criar né que é um é basicamente um projeto onde o Expo faz esse meio campo ele ajuda a gente entre a parte do código do código JavaScript código react Native e o código nativo né então ele gerencia pra gente Esse fluxo de trabalho por isso né

managed workflow a estudando contribuindo aí pra gente em muitas coisas e nós temos também o Bear workflow que é basicamente onde o Expo abre mão de fazer algumas coisas pra gente e passa essa responsabilidade para quem tá desenvolvendo que se se se parece com a o desenvolvimento com o react cli né onde a gente vai ter ali o a parte Nativa do código e a gente vai poder interagir com ela né então nós temos essa possibilidade aqui na própria documentação o Expo o próprio Expo fala né que ele não nos limita né não nos bloqueia

então a gente pode muito bem iniciar um projeto com be workflow e com manag de workflow né que é o que a gente fez agora e se eventualmente no futuro a gente precisar de muito dessa parte Nativa a gente pode exportar esse arquivo esse projeto né de manage workflow para be workflow e a partir dali continuar desenvolvendo normalmente só que com essa parte Nativa aí do do do do código né do projeto então nós temos essas possibilidades tá e se a gente volta aqui no na na própria documentação dele se nós clicamos aqui em API

reference ele vai a gente vai ter que documentado e inicia aqui né pelo app json que é aquele arquivo que eu mostrei para vocês que a gente tem aqui no projeto né que onde a gente configura me que o aplicativo como que ele vai se comportar lá do lado nativo né então aqui tá documentado todas as possibilidades que a gente tem de de propriedade de o que que é por e que a gente seta qual os valores que a gente pode setar ali então se a gente olha aqui na direita tem muita opção né muita

coisa que pode ser configurada por ali tá nós temos aqui a parte do metro também onde ele fala um pouco sobre o metro que o o metro ele vai lembrar ali a parte do do Bebel né ele tá nesse meio termo aí entre conversão do código desenvolvido com a parte Nativa né a gente não vai também a gente não vai explorar muito isso mas tem documentado aqui como que a gente faria essa esse me como a gente configuraria o metro né Eh nós temos aqui também o que é muito interessante eh que é essa parte

aqui do Expo SDK que são as bibliotecas aí que o Expo fornece pra gente né o as SDK que a gente já tem dentro do Expo para tá trabalhando Então nós temos a parte de acelerômetro a autenticação com Apple authentication né que é só no no dispositivo iOS ele já mostra aqui né a compatibilidade com a plataforma e tem algo bem interessante também que é a questão do Web né que o Expo também tem a parte web né Esqueci de falar isso antes mas enfim é mais uma possibilidade a da nossa meio que a mesma

base de dados vai est no Android IOS também no web né bem interessante isso aqui mas enfim isso a gente pode olhar aqui nós temos muitas bibliotecas muitas SDK e que é muito que tipo vai ajudar muito a gente lá no desenvolvimento então tem a parte de de armazenamento né áudio e background fat enfim bateria e calendário câmera enfim tem muita tem o crypto aqui né que lembra o crypto lá do node enfim tem file System muita muita coisa interessante aqui que a gente já tem a biblioteca pronta e a documentação também pronta né então

ajuda muito tem muitas possibilidades aqui e uma delas né uma delas que a gente vai iniciar na próxima aula é falando aqui da parte de navegação tá então aqui nesse routing and navigation tem aqui uma parte na na documentação aqui nós estamos nos guias né aqui eu tava api reference né Mas se a gente vem aqui na parte de guides ele tem aqui falando né em associated assorted guides né né a parte de routing e navigation que é a questão de navegação do usuário dentro do app que é muito importante e que quando a gente

fala de react Native a gente tá falando de react navigation né que iso é aí a opção ele fala aqui né que é a biblioteca mais popular de navegação no ambiente do react Native e que vai nos ajudar vai dar muita possibilidade aí pra gente estar navegando o usuário né de uma tela para outra por mais que no projeto a gente não vai usar tanto é de extrema importância a gente abordar isso é tanto que eu vou estar falando sobre ela aqui aqui nas documentações é uma documentação bem extensa a gente tem muita possibilidade muita

coisa aqui que a gente pode estar fazendo de diferentes navegadores né diferentes tipos de navegação Então se a gente vem aqui em API reference E se a gente olha aqui em navigators nós temos aqui o stack Navigator né que é aquele navegador que lembra um um baralho né onde as telas ficam umas sobre as outras né uma pilha de Tel nós temos aqui o drawer Né que é aquele que a gente arrasta pro lado botom tabs que é aquele inferior né as as tabs inferiores e e enfim tem material top tabs que é um navegador

que fica na parte superior mas o fato é que essa biblioteca vai est sempre basicamente em Todo projeto que a gente for mexer aí porque a navegação do usuário é algo muito importante e essa biblioteca faz essa tarefa muito bem tá então falamos já falamos aqui né sobre a estrutura falamos da documentação Falamos também da navegação que é o que a gente vai começar a falar na próxima aula eu falei a aula passada eu acho Em algum momento enfim na próxima aula a gente vai estar falando do react navigation e aqui eu tenho né no

XD o design aqui do projeto que a gente vai estar desenvolvendo que é a questão lá a ideia de um de um crude de produtos né isso aqui a gente vai estar usando a api criada por Leandro que ele fez lá pra gente estar fazendo aí um um crud de produtos né então é criar editar deleção e listagem de produtos né então a gente tem essa interface aqui onde a gente vai listar os nossos produtos né vai conseguir ver um produto criar um produto aqui tem a parte do formulário né e da edição deleção aqui

a questão do feedback com o usuário a listagem né enfim a gente vai est fazendo tudo isso nesse curso tá então a partir da próxima aula a gente já vai começar a falar sobre a questão da navegação né que essa parte inferior aqui e enfim é isso né então para essa aula é isso eu espero que eu tenha ajudado qualquer dúvida pode deixar um comentário aí logo abaixo e é isso aí muito obrigado e até a próxima [Música]