Estruturando o projeto Expo - Criando Apps para Android e iOS

Fala mestre beleza no vídeo de hoje a gente vai estar falando aqui sobre o nosso projeto que foi criado usando expone a gente vai entender um pouco ali da estrutura da arquitetura que que veio criada né não Arquitetura em cima mas da estrutura desse projeto esse vídeo aqui é aí logo de cara não vai ser um vídeo sobre arquitetura porque até porque a gente for falar sobre isso a gente precisaria de muitos outros vídeos a gente só vai entender mesmo a estrutura do projeto O que que a gente tem que o que que a gente

pode mexer ali ou o que cada coisa faz né o significado daqueles arquivos que estão ali pra gente entender um pouco melhor do projeto ficar mais habituado com as coisas que a gente vai estar trabalhando aí nas próximas aulas Beleza então antes da gente ir para o conteúdo Eu gostaria de pedir aí que você deixa o like no vídeo né se inscreva no canal também clica aí no Sininho né no YouTube te manter atualizado aí dos nossos conteúdos e também acompanhar a gente em todas as outras redes que os links estarão aí na descrição Beleza

então meu nome é Jansen eu sou desenvolvedor aqui na Mestres e vamos lá para mais um conteúdo [Música] Então eu estou aqui né não vi as code né do dentro do projeto que foi criado né na aula nossa aí onde criou o projeto usando o x tá então aqui de projeto né logo de cara a gente vai conversar aqui pelo Patch Jason que a gente já falou sobre esse arquivo né na nas nossas aulas de configuração de ambiente Mas ela é um arquivo onde ele vai ter a configuração ali do Desse nosso projeto tá então

ele vai falar que o nome do projeto versão do projeto o arquivo de entrada né desse projeto vai falar os scripts as dependências né se é privado ou não se isso aqui fosse um pacote né teria mais informações aqui do repositório que está sendo armazenado dos links aí das documentações e enfim autores enfim muitas coisas que a gente configura sobre o o projeto a gente faz aqui no pack de Jason tá coisas relacionadas aí ao node ao JavaScript enfim muitas opções que a gente tem aqui tá a gente não vai ficar falando sobre tudo então

é nesse arquivo aqui ele vai estar listado dos scripts e também né principal aqui as dependências Então sempre que a gente instalar algum pacote fazer alguma coisa ele vai estar listado aqui no pet Jason qual o pacote foi qual versão que é né que foi usada que foi instalado tá E todos esses pacotes instalados vão aí para nossa para o nosso diretório aqui no de models Tá certo então outra coisa muito interessante é que também são os scripts tá então é aqui que eu defino os scripts e o que que eles vão fazer então isso

aqui já veio definido né Por exemplo esse script start ele quando eu executo né npm start o comando aqui no terminal tá ele vai executar Esse comando aqui expostart seu executar npm Run Android né ele vai executar Este comando aqui npm Run iOS ele vai executar Este comando aqui vai executar Este comando tá então a gente consegue criar scripts para fazer coisas diferentes ou para enfim não é para fazer diversas coisas aí para o nosso projeto e a gente consegue acessar executar eles né através aqui do note tá então usando aqui npm certo então se

eu rodar com Start né ele vai iniciar o banner lá que nós vimos na aula passada a gente iniciou um projeto e executou ele tá então através desses scripts e dessas coisas que que a gente usa para gerenciar o projeto boa parte delas ficam aqui no pack dele Beleza então eu vou fechar aqui por enquanto a gente não vai rodar o projeto agora porque não é o foco tá é nós temos aqui o petlok direito que é um arquivo gerado automaticamente pelo npm eu sempre que a gente ou sempre que a gente instala né algum

projeto ali algum projeto não algum pacote que também é um projeto ele vai ficar listando aqui no arquivo Loki informações sobre dependências tá então se a gente dá uma olhada por exemplo o nosso projeto ele depende do Expo status bar o reactor e esses projetos eles possuem outras dependências tá então o Expo status bar ele Depende de outros projetos né o react ele Depende de outros projetos né de outros pacotes de outras bibliotecas que também são outros pacotes que também dependem de outros né Então essa toda essa árvore aí nessa dependência de dependência fica tudo

listado aqui no nosso arquivo perto de lock tá então se passar algum tempo e alguma outra pessoa for instalar esse meu essas dependências né do meu projeto essa dependências e as dependências da dependências serão instalados corretamente por conta do arquivo Loki tá então a gente não mexe nele diretamente a gente só deixa ele aí gerenciando essas coisas tem também tem essa confie Jason que é o arquivo onde a gente configura o Type script tá então esse projeto que a gente usa tá escrito É por isso que esse arquivo aqui e tudo que for referente a

táxiscript que a gente for querer configurar a gente vai fazer nesse arquivo tá tem aqui também o Bebel config JS né o Babel ele é um compilador Java escrito tá então por enquanto a gente só precisa ter isso em mente tá é o cara que vai pegar o nosso código JavaScript vai compilar ele e aí depois desse desse código compilado que aí ele vai ser transformado de novo no código referente aí a plataforma que a gente tá executando né seja IOS android ou no caso do Web né então Bebel aqui ele é muito importante e

algumas configurações também que a gente de vez em quando a gente precisa fazer mas é bem raro tá e nós temos aqui também o app.jay né esse arquivo aqui ele é um arquivo de configurações do expo em si tá então a gente dá o nome do projeto e nesse caso aqui o nome do projeto Jason é diferente desse nome aqui do app português pode ser o mesmo tá mas esse nome aqui por exemplo seria o nome do nosso aplicativo né e o Slug também versão orientação né o ícone desse aplicativo coisas que como por exemplo

a Splash screen né no caso do mobile né a gente tem a Splash screen que aquela tela que aparece quando o app está sendo aberto né configurações específicas do iOS do Android do Web tudo a gente passa configurando aqui através do app.jay tá então essas configurações a gente consegue encontrar elas aqui na própria documentação do ético né se a gente vem aqui na documentações temos aqui a parte de estrutura do projeto né e aqui tem esse link né de opções configuration options né do Português então se eu abrir esse link é que no caso já

tá aberto aqui a gente vai ter aqui diversas opções né do que que a gente pode estar configurando lá então o nome da configuração o tipo do dado e o que que ele faz né então é bem completo também interessante aqui essa documentação porque ajuda bastante Tá certo então voltando aqui no projeto nós temos aqui também é esse diretório access Vem aqui para a gente colocar arquivos estáticos né então uma imagens svgs Fontes essas coisas ficam aqui dentro de arcetes né que são coisas estáticas aí que a gente usa no projeto e que não é

necessariamente um código tá então fica aqui em access esse ponto vs code do próprio vs code do que o a própria Dr gera Tá então não é nada importante e o ponto Expo também é uma coisa é um diretório gerado pelo próprio Expo quando a gente roda o projeto que também não a gente não mexe diretamente nisso aqui não Beleza então nós temos aqui também diz que dólar que a gente falou dele aí nas nossas aulas de glitch mas é basicamente os arquivos que eu quero ignorar que para não ir não ser versionados tá nós

temos aqui o app.sx Esse app que acontece x a gente pode entender ele como o ponto de partida aí para o nosso app tá então sempre que a gente iniciar o app a gente rodar o app rodar o projeto esse arquivo ftsx vai ser aí o primeiro que vai ser invocado tá então um padrão que a gente sempre tem é criar aqui um diretório chamado src né que ficou ali com a crase src e dentro de src a gente vai colocar todos os arquivos todo toda a fonte todo o Source né ali do projeto então

todas as coisas aí de referente a aplicação fica dentro de sócio e as coisas mais genéricas referente ao projeto fica fora né que são esses arquivos de configuração que a gente mostrou E no caso aqui o diretório acets tá então dentro de src que a gente vai ter aí o nosso diretórios que a gente vai criar né as nossas telas né as screens que é no plural né a gente vai ter que as nossas componentes né o diretório de componentes enfim e eu tô digitei errado né componentes e a gente vai ter que também os

hulks que a gente cria os estilos que a gente cria validações utilidades coisas úteis né até as próprias rotas né um diretório aqui de para fazer a navegação né então muito o projeto em si e aqui a gente já tá falando de arquitetura né ele vai ser estruturado dentro de src tá então isso aí não tem certo errado né a gente tem muitos padrões por aí a gente pode todo time né ou indivíduo tem seus padrões suas estruturas e é aqui dentro de src que a gente começa a aplicar essas coisas tá certo então para

essa aula aqui vai ser isso tá a gente não vai se estender muito até porque a gente vai ter aulas específicas sobre isso Beleza então espero que eu tenha ajudado qualquer dúvida pode estar deixando um comentário logo abaixo e é isso aí muito obrigado e até a próxima [Música]