1 of 13

Programação Mobile - 3º Ano

Prof. Patrick Staroin

2 of 13

Plataforma utilizada:

  • React Native: permite criar apps para Android e iOS por meio de apenas um código (desenvolvimento híbrido);
  • O React puro necessita a instalação de um emulador Android, como o Android Studio;
  • Para testar em iOS, é necessário possuir um macOS.

3 of 13

O que é o React Native?

  • É um framework (conjunto de ferramentas) para desenvolvedores mobile;
  • Permite a criação de apps utilizando a linguagem JavaScript, conhecida por muitos programadores;
  • É capaz de renderizar componentes nativos, como botões e formulários.

4 of 13

O que é o React Native?

  • Vantagens:
    • se assemelha a um aplicativo nativo;
    • entrega um bom desempenho;
    • permite o uso de uma linguagem comum a vários programadores;
  • Desvantagens:
    • Necessita de emulador para realizar testes.

5 of 13

React Native + Expo

  • Expo: framework que adiciona mais funcionalidades ao React Native;
  • Permite que o programador foque na interface e na lógica do aplicativo, sem se preocupar com a configuração do ambiente nativo;
  • Tem o objetivo de agilizar o desenvolvimento.

6 of 13

Pré-requisitos:

  • Necessário:
    • NodeJS: para executar códigos JavaScript

​

    • NPM: Node Package Manager (permite a instalação de pacotes nos projetos em Node)

7 of 13

Pré-requisitos:

  • Necessário:
    • Expo Go: aplicativo instalado no celular para realizar os testes.

8 of 13

Criando o primeiro App:

  • Crie uma pasta no computador:

​

  • Abra a pasta no VSCode;
  • No terminal, digite:
    • npx create-expo-app@latest PrimeiroApp

9 of 13

Criando o primeiro App:

  • Aguarde o Expo instalar as dependências necessárias:

10 of 13

Criando o primeiro App:

  • Entre na pasta do seu aplicativo, digitando no terminal:

​

  • Execute também o seguinte comando no terminal:
            • npm run reset-project

11 of 13

Criando o primeiro App:

  • Para executar seu aplicativo:
              • npx expo start

​

  • Após um tempo, deverá aparecer um QR Code no terminal, conforme imagem do próximo slide.

12 of 13

13 of 13

Testando o aplicativo:

  • Escaneie o QR Code através do aplicativo Expo para abrir no seu celular;
  • Ou, abra o aplicativo no navegador, pressionando a tecla “w” no terminal.