Buscar

Conhecendo o Expo e iniciando um projeto

Fala galera, hoje o dataholic Michel Oliveira vai mostrar como iniciar um projeto com uma ferramenta sensacional, que ajuda muito na hora de criar um app com react native. Vem conferir!


Mas e aí? Você sabe o que é o Expo?


O Expo é um framework/plataforma utilizada no desenvolvimento de aplicações com React Native. É um conjunto de ferramentas e serviços construídos em torno de plataformas nativas e do React Native que ajudam você a desenvolver, construir, implantar e iterar rapidamente em aplicativos iOS, Android e web a partir da mesma base de código JavaScript/TypeScript.


Alguns requisitos


Existem duas ferramentas que você precisa para desenvolver aplicativos com o Expo: um aplicativo de linha de comando chamado Expo CLI para inicializar e servir seu projeto, e um aplicativo cliente móvel chamado Expo Go para abri-lo no iOS e Android. Qualquer navegador da web funcionará para abrir o projeto na web.


  • Expo CLI

Expo CLI é um aplicativo de linha de comando, que é a principal interface entre um desenvolvedor e as ferramentas do Expo. A Expo CLI também tem uma GUI baseada na web que aparece em seu navegador da web quando você inicia seu projeto. Você pode usar a GUI em vez da interface de linha de comando se ainda não estiver confortável em usar um terminal ou preferir GUIs, ambas têm a capacidade necessária.

Para instalar o Expo CLI você precisa ter instalado o Node.js LTS, Git e para os usuários de macOS e Linux precisão também do Watchman.


  • Expo Go

Expo Go é um aplicativo que está disponível nas lojas de apps da google e apple. Ele permite que você abra os aplicativos que estão sendo servidos através do Expo CLI apenas lendo o QR Code gerado no browser ou no terminal. Você pode baixar o expo go nas seguintes lojas:

Android Play Store - Android Lollipop (5) e superior.

iOS App Store - iOS 11 e superior.


Esclarecidos esses conceitos vamos agora pôr a mão na massa de fato.


Instalação

1- Primeiramente, instalamos o Expo CLI, para isso abra o terminal (ctrl+alt+t) e digite o seguinte comando:

$ npm install --global expo-cli


2- Verifique se a instalação foi bem-sucedida, se o retorno do comando abaixo for "Not logged in", isso significa que deu certo a instalação:

$ expo whoami


3- O próximo passo é instalar o Expo Go. Com seu dispositivo, vá até sua loja de aplicativos e busque por Expo Go, basta instalar como qualquer outro app.


4- Agora estamos prontos para criar nosso projeto com expo. Abra seu terminal (ctrl+alt+t) crie uma pasta para guardar o projeto, navegue para essa pasta:

$ mkdir project-expo && cd project-expo


5- Nessa pasta digite o comando para iniciar o projeto:

$ expo init hello-world


Ao digitar o comando acima, o expo perguntará com qual template você quer criar o porojeto:


Existem duas abordagens para criar aplicativos com ferramentas Expo, elas são chamadas de fluxos de trabalho, Managed workflow - "gerenciados" e Bare workflow - "nuas". A principal diferença entre as duas abordagens é que com o fluxo de trabalho gerenciado (Managed workflow), você apenas escreve JavaScript/TypeScript, e as ferramentas e serviços Expo cuidam de todo o resto para você. Já no fluxo de trabalho simples (Bare workflow), você tem controle total sobre todos os aspectos do projeto nativo, e as ferramentas e serviços do Expo são um pouco mais limitados.


Managed workflow

  • blank - um aplicativo mínimo tão limpo quanto uma tela vazia.

  • blank (TypeScript) - o mesmo que em branco, mas com configuração TypeScript.

  • tabs (TypeScript) - várias telas e guias de exemplo usando react-navigation e TypeScript.

Bare workflow

  • minimal - simples e minimalista, apenas o essencial para você começar.


Nesse caso vou escolher o blank sem TypeScript. Pressionando enter na opção escolhida o expo vai criar e configurar todo nosso projeto. Após a criação do projeto você pode entrar na pasta do projeto que no meu caso dei o nome de hello-world.


Dentro da pasta do projeto podemos iniciar o servidor do expo e gerar o QR Code para abrirmos o app com o expo Go, digite o seguinte:

$ expo start


No terminal irá aparecer o QR Code para que você possa ler com o app Expo Go, provavelmente o browser irá abrir também com o mesmo QR Code e algumas outras opções. Abra seu app Expo Go e leia o QR Code, o expo vai abrir o app em seu dispositivo:

App aberto no Android

Pronto! Você criou seu primeiro aplicativo com React Native. Agora vamos alterar essa mensagem no app:


  1. Abra o projeto no VSCode ou seu editor de texto preferido (aposto que é o VSCode).

  2. Com o projeto aberto, abra o arquivo App.js, esse é o arquivo onde podemos por nossos códigos. Vamos alterar o texto que está dentro da tag <Text>, altere para “Hello World!” e salvar o código.


Note no seu dispositivo, que ao salvar o código, a alteração é refletida instantaneamente no dispositivo, isso acontece graças a um recurso sensacional do React Native chamado de fast refresh, que permite obter feedback quase instantâneo para alterações em seus componentes.


O fast refresh vem habilitada por padrão, para desabilitar/habilitar você pode chacoalhar seu dispositivo para abrir o menu do desenvolvedor (developer menu) e clicar em Disable Fast Refresh.

Dev Tools

Então é isso galera, hoje aprendemos que o expo é uma ferramenta para desenvolvimento de aplicações com react native.


Vimos também que precisamos de apenas duas ferramentas para iniciar um projeto com expo, o Expo CLI e Expo Go, um aplicativo de linha de comando e um aplicativo para dispositivo android e iOS para abrir o app respectivamente.


Além disso o expo nos dá dois fluxos de trabalho, gerenciado (Managed workflow) onde os serviços do expo cuidam da maior parte das configurações, e simples (Bare workflow), onde você tem controle total sobre os aspectos do projeto nativo.


Agora você pode iniciar seus projetos sem medo de passar horas configurando um ambiente trabalhoso e pesado com react native CLI, android studio e emulador, o que demanda muito consumo de hardware do seu PC.



Gostou da dica? Curte e comenta nesse post para trazermos mais conteúdos assim, e não esquece de compartilhar e marcar a gente nas redes sociais.💚📱


Referencias

https://docs.expo.dev/get-started/installation/