Aprenda passo a passo e de forma prática a ter um aplicativo Android para você compartilhar com seus amigos e familiares, ou mesmo poder hospedar na play store.

Aqui estaremos utlizando a tecnologia ReactNative com Expo

• Mas primeiramente é necessário que sua página esteja bem responsiva, pois essa implementação renderiza apenas o site em um aplicativo. Mesmo que você procure arrumar na estilização, ele não irá fornecer uma boa experiência.

• Então, vamos preparar primairamente o ambiente de desenvolvimento de acordo com seu sistema operacional, acesse o site e siga as instruções:

https://reactnative.dev/docs/environment-setup

• Depois que o Expo estiver instalado em sua máquina, é hora de criar seu aplicativo:

1. Criando o aplicativo:

• Digite o comando no seu terminal:

npx create-expo-app nome_de_seu_app

• Depois que criou o seu app e instalou todas as dependências, entre na pasta do projeto. E abra o seu vscode, com o comando:

code.

• Será aberto o seu projeto com todos os diretórios.

• O arquivo eas.json, agora não está aperecendo para você agora, porque ele é gerado no momento do build que veremos mais a frente.

• Na pasta assets, customize todos os arquivos conforme desejar, seguindo o mesmo tamanho e sabendo que a splash é a tela de carregamento do aplicativo, e os demais são os icones.

• Depois entre no arquivo app.json, precisamos fazer alguns configurações:

{  "expo": {
  "name": "gustavosouza", //nome do seu aplic
  "slug": "gustavosouza",
  "version": "1.0.0",
  "orientation": "portrait",
  "icon": "./assets/icon.png",
  "userInterfaceStyle": "light",
  "splash": {
    "image": "./assets/splash.png",
    "resizeMode": "contain",
    "backgroundColor": "#212121"
  },
  "assetBundlePatterns": [
    "**/*"
  ],
  "ios": {
    "supportsTablet": true
  },
  "android": {
    "adaptiveIcon": {
      "foregroundImage": "./assets/adaptive-icon.png",
      "backgroundColor": "#212121"
    }
  },
  "package": "dev.gustavosouza"
},     
  "android": {
    "package": "dev.gustavosouza",
    "versionCode": 1
  }
}

• orientation: é modo como a tela do seu app será visualizada, se for porta-retrato deixe como está, se for nos dois modos porta-retrato e paisagem deixe como default

• backgroundColor: é a cor de seu fundo de tela, é bom colocar a mesma cor que você colocou no fundo de tela da sua splash na pasta assets.

• web: pode retirar, você não vai precisar dele

• crie um nome para o seu pacote, isso é necessário principalmente se você quer hospedar seu aplicativo na play store, porque cada aplicativo na play store tem que ter um dominio. Isso é o que identifica que os aplicativos na loja pertencem aquele domínio.

"package": "dev.gustavosouza"

• Crie também o pacote para o android e sua versão 1.

 "android": {
    "package": "dev.gustavosouza",
    "versionCode": 1
  }

2. Rodando no computador:

• Feito essas configurações, vamos rodar nossa aplicação, digite o comando no próprio terminal do vscode, dentro da pasta raiz do seu projeto:

npx expo start

• Depois escolha a opção a

• Se tudo dê certo, você já irá ver sua tela de splash incializando o aplicativo:

3. Rodando no Aparelho:

• Você também pode rodar diretamente de seu celular Android, é necessário instalar o app expo go na play store no seu celular, e ativar o modo de desenvolvedor do seu celular, apertando várias vezes no número da versão de seu aparelho em Configurações.

• Depois conecte um cabo USB do seu computador ao celular. E vá em Configurações no seu celular -> Sistema -> Avançado -> Opções do desenvolvedor. Habilite a opção Depuração USB, aceite os termos.

• Para ver se o seu computador, reconheceu o modo de depuração do seu celular. Digite o comando em seu terminal:

adb devices

• No meu caso mostrou dois dispositivos, porque estou com o emulador aberto no computador e o modo de depuração do celular conectado:

• Se o seu sistema não reconheceu o comando adb, você precisa instalá-lo no seu computador. Para o linux, digite o comando:

sudo apt updage && sudo apt install adb 

• Para outros sistemas operacionais:

https://www.xda-developers.com/install-adb-windows-macos-linux/

• Para rodar então a aplicação no seu dispositivo, rode o mesmo comando e no lugar de escolher a opção a, selecione a opção Scan QR Code do app expo go, e posicione a camêra no qrcode da sua aplicação:

• Se abrir uma tela azul no seu celular, certifique que o seu aparelho esteja na mesma rede do seu computador, e clique em atualizar.

• Documentação da lib adb:

https://developer.android.com/studio/command-line/adb?hl=pt-br

4. Dependências:

• Para rederizarmos nossa página é necessário instalarmos a biblioteca webview em nosso projeto. Então rode o comando:

npm i react-native-webview

5. Arquitetura do aplicativo:

• Gosto de seguir uma arquitetura para desenvolver meus projetos para facilitar a manutenção de código, mas se você quiser pode deixar tudo em um arquivo só.

• Então estruturei meu projeto da seguinte forma: dentro da pasta src criei mais duas pastas: components e pages. E dentro de pages uma pasta Home. Dentro de components uma pasta Loading

• Dentro da Home criei dois arquivos: index.js e styles.js, e da mesma forma para a pasta Loading:

6. Implementação do componente:

• Copie o código e cole para seus arquivos index.js e styles.js da pasta Loading:

index.js

import React from 'react'
import { View, ActivityIndicator } from 'react-native'
import styles from './styles';


export function Loading() {
return (
  <View style={styles.container}>
    <ActivityIndicator size={50} color={'gray'}/>
  </View>
)
}

styles.js

import { StyleSheet } from "react-native";


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor:"#212121",
    justifyContent: "center",
    alignItems: "center"
  },
});

export default styles;

7. Implementação da nossa Home:

• Copie e cole o código para os arquivos index.js e styles.js na sua pasta Home:

index.js

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { View } from 'react-native';
import { WebView } from 'react-native-webview';
import styles from './styles';


const URL = 'seu_site'; 


export function Home() {
return (
  <View style={styles.container}>
    <View style={styles.page}>       
      <WebView source={{ uri: URL }}  />
    </View>
    <StatusBar style="auto" />
  </View>
);
}

styles.js

import { StyleSheet } from "react-native";


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: 30,
  },

  page: {
    width: '100%',
    height: '100%',
  },
});


export default styles;

8. Rodando a aplicação:

• Salve as modificações que você fez e rode o comando no seu terminal, e depois escolha a opção a:

npx expo start

• Para executar no seu celular, certifique o que o seu dispositivo esteja na mesma rede que seu computador e rode o mesmo comando, e depois escolha a opção a.

• Se tudo dê certo, sua página será renderizada no seu emulador ou celular:

• A resolução saiu ruim aqui, porque a plataforma não aceita vídeos, mas eu converti para gif. Mas você pode ver o aplicativo rodando no meu repositório, e dá uma olhada no código para comparar com o seu -> aplicativo rodando

9. Gerando uma apk para compartilhar minha aplicação:

• A geração da apk e publicação na playstore explicarei melhor em um próximo artigo, mas se você quiser a documentação de como gerar a apk está aqui a documentação

10. Atenção:

• Antes podíamos instalar a apk diretamente em nosso dispositivo Android, hoje os fabricantes por motivo de segurança, restrigiram apenas a instalação através da play store. Sendo assim precisamos habilitar a opção fontes desconhecidas nos aparelhos que desejamos compartilhar a apk para instalar o app.

REFERÊNCIA BIBLIOGRÁFICAS:

Expo dev -> https://docs.expo.dev/

React WebView -> https://www.npmjs.com/package/react-native-webview

Repositório -> https://github.com/gustavogss/gustavosouza