SENAC RIO GRANDE DO SUL

TÉCNICO EM INFORMÁTICA PARA INTERNET

RENATO PIRES DOS SANTOS

Módulo C
Codificar aplicações para dispositivos móveis

Atividade 01
Evidencie a instalação, a configuração e o uso das ferramentas de
desenvolvimento do React Native
Relatório contendo as evidências dos passos
solicitados, com imagens de captura da tela em
cada etapa.

2022
 Sumário

1. Instale as ferramentas de desenvolvimento necessárias. .................................... 4

2. Instale os editores e/ou os ides (integrated development environments, que, em

português, significa “ambientes de desenvolvimento integrado”) necessários. ........... 6

3. Instale e evidencie a presença dos sdks (software development kit, ou, como em
português, kit de desenvolvimento de softwares) necessários.................................... 8

5. Crie uma primeira aplicação (“hello world”), via comando expo, e evidencie o
funcionamento dela. .................................................................................................. 13

6. Crie uma primeira aplicação (“hello world”), via comando react-native, e

evidencie o funcionamento dela utilizando uma máquina virtual. .............................. 16
 Lista de Figuras

Figura 1 – comando: npm install -g react-native-cli no VS Code ................................. 4

Figura 2 - Intalação de pacotes e verficação do status e versão do React-Native ...... 4
Figura 3 - Acesso ao site para download .................................................................... 5
Figura 4 - Node.js instalado......................................................................................... 5
Figura 5 - Comando: npm install -g expo-cli para instalação do EXPO ....................... 6
Figura 6 - Cadastramento no expo.io .......................................................................... 6
Figura 7 - Acesso ao site para download .................................................................... 7
Figura 8 - VS Code instalado ...................................................................................... 7
Figura 9 - Instalação de extensões para facilitar e agilizar a produção no VS Code... 8
Figura 10 - acesso ao site do Genymotion para dowload............................................ 8
Figura 11 - Instalação do Genymontion....................................................................... 9
Figura 12 - instalando Virtual Box(máquina virtual) ..................................................... 9
Figura 13 - Virtual Box instalada ............................................................................... 10
Figura 14 - Criação de conta na Genymotion ............................................................ 10
Figura 15 - Conta criada no Genymotion................................................................... 11
Figura 16 Acesso realizado no Genymotion .............................................................. 11
Figura 17 - Acesso site para download do Android Studio ........................................ 12
Figura 18 - Android Studio e instalação do plug do Genumotion .............................. 12
Figura 19 - Emulação de dois smartfones no Genymotion........................................ 13
Figura 20 - Emulação de um smartfone com o Android Studio ................................. 13
Figura 21 - Comando para criar o app via Expo ........................................................ 14
Figura 22 - Utilizando a opção Managed workflow, na opção blank.......................... 14
Figura 23 - Código inicial criado e alocado na pasta e destino definidos .................. 15
Figura 24 - Editando mensagem inicial e inicializando o App.................................... 15
Figura 25 - Espelhamento da tela do celular e emulador de celular, com o APP ...... 16
Figura 26 - Espelhamento da tela do celular e emulador de celular, com o APP ...... 16
 Atividade

Evidencie a instalação, a configuração e o uso das ferramentas de desenvolvimento

do React Native, obedecendo aos seguintes passos:

1.Instale as ferramentas de desenvolvimento necessárias.

Instalação do React Native via VS Code:

Figura 1 – comando: npm install -g react-native-cli no VS Code

Figura 2 - Intalação de pacotes e verificação do status e versão do React-Native

Instalação do Node.js:

Figura 3 - Acesso ao site para download

Figura 4 - Node.js instalado

Anexo: Verificação do status de instalação do Node.js.txt

Instalação do EXPO via VS Code

 Figura 5 - Comando: npm install -g expo-cli para instalação do EXPO

Anexo: Verificação do status de instalação do EXPO.txt

Figura 6 - Cadastramento no expo.io

2. Instale os editores e/ou os IDEs (integrated development environments, que, em

português, significa “ambientes de desenvolvimento integrado”) necessários.

Instalação do VS Code:
Figura 7 - Acesso ao site para download

Figura 8 - VS Code instalado

 Figura 9 - Instalação de extensões para facilitar e agilizar a produção no VS Code.

3. Instale e evidencie a presença dos SDKs (software development kit, ou, como em
português, kit de desenvolvimento de softwares) necessários.

Instalação do Genymotion:

Figura 10 - acesso ao site do Genymotion para download.

 Figura 11 - Instalação do Genymontion

Figura 12 - instalando Virtual Box (máquina virtual)

 Figura 13 - Virtual Box instalada

Figura 14 - Criação de conta na Genymotion

 Figura 15 - Conta criada no Genymotion

Figura 16 Acesso realizado no Genymotion

 Figura 17 - Acesso site para download do Android Studio

Figura 18 - Android Studio e instalação do plug do Genumotion

4.Instale os simuladores necessários.

 Figura 19 - Emulação de dois smartfones no Genymotion

Figura 20 - Emulação de um smartfone com o Android Studio

5. Crie uma primeira aplicação (“Hello World”), via comando expo, e evidencie o
funcionamento dela.

Criando o aplicativo
 Figura 21 - Comando para criar o app via Expo

Figura 22 - Utilizando a opção Managed workflow, na opção blank

 Figura 23 - Código inicial criado e alocado na pasta e destino definidos

Figura 24 - Editando mensagem inicial e inicializando o App.

Processo de criação:

Anexo: App via Expo.txt

 Figura 25 - Espelhamento da tela do celular e emulador de celular, com o APP

6. Crie uma primeira aplicação (“Hello World”), via comando react-native, e evidencie
o funcionamento dela utilizando uma máquina virtual.

Figura 26 - Espelhamento da tela do celular e emulador de celular, com o APP

Falha na emulação:

App via React Native - Código e retorno de erros.txt