Como publicar seu projeto nas lojas de aplicativos

Nesse tutorial, vamos facilitar o processo de publicação do seu App PWA nas lojas de aplicativos como "Google Play store" e "Apple App store".

Aviso

As contas para publicação dos aplicativos tanto para "Playstore" e "App store" são de responsabilidade do desenvolvedor/gestor do projeto.

Passo 1

Certifique-se de que você já tenha instalado as seguintes ferramentas em sua máquina:

nodejs >= 18.0.0
npm ou yarn
expo-cli

Faça o login na sua conta do "Expo" com o seguinte comando abaixo. Caso não tenha uma conta clique aqui para criar.

expo login

Após o login execute o seguinte comando para criarmos um novo projeto utilizando o "Expo".

npx create-expo-app my-app

Caso queira saber um pouco mais sobre o "Expo" clique aqui.

Passo 2

Após criar o app, copie o seguinte código abaixo e cole no arquivo App.js;

import React, { useRef, useState } from 'react';
import { WebView } from 'react-native-webview';
import { StyleSheet, StatusBar } from 'react-native';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import SafeAreaView from 'react-native-safe-area-view';

export default function App() {
  const date = new Date().getTime();
  const webViewRef = useRef(null)

  // Lista de domínios permitidos em seu app.
  const whiteList = [
    '*',
    // você poderá limitar apenas para o domínio principal ex.: 'https://meusite.com'
  ]

  const [url, setUrl] = useState(`https://layout-003_pwa_increazy_com.lab.increazy.com/?v=${date}`);

  return (
      <SafeAreaProvider>
        <SafeAreaView style={styles.container} forceInset={{ bottom: 'never' }}>
          <StatusBar />
          <WebView
            allowsBackForwardNavigationGestures
            useWebKit
            ref={webViewRef}
            source={{ uri: url }}
            originWhitelist={whiteList}
            allowsInlineMediaPlayback
            javaScriptEnabled
            scalesPageToFit
            mediaPlaybackRequiresUserAction={false}
            javaScriptEnabledAndroid
            useWebkit
            startInLoadingState={true}
          >
          </WebView>
      </SafeAreaView>
    </SafeAreaProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#000',
  }
});

Passo 3

Estamos quase lá, note que no inicio do código, existem algumas dependências as serem adicionadas para que a gente consiga executar o projeto, rode os seguinte comandos para instalarmos essas dependencias:

npx expo install react-native-webview

yarn add react-native-safe-area-context

yarn add react-native-safe-area-view

Passo 4

Pronto, agora podemos executar o seu projeto e testar utilizando o aplicativo do Expo Go que você encontra na loja de aplicativos do seu dispositivo.

Execute o comando abaixo para iniciar o seu app:

npx expo start

Em seguida abra sua câmera do telefone e aponte para o QR Code gerado pelo comando executado acima.

Se você chegou até aqui, parabéns! Estamos quase lá. Faça os testes e brinque à vontade com o aplicativo em seu telefone.

Passo 5

Você precisará fazer algumas configurações extras antes de enviar para as lojas de aplicativos, confira:

No arquivo App.js, altere a URL de exemplo para a URL da sua PWA, veja o código abaixo:

const [url, setUrl] = useState(`https://meusite.com/?v=${date}`);

No arquivo App.json configure algumas informações como: "name", "slug", "icon", "splash", "backgroundColor" e outros.
Ainda no arquivo App.json, adicione a seguinte configuração dentro de expo:

"expo": {
  ...

  "ios": {
    "supportsTablet": true,
    "bundleIdentifier": "com.devellop.meuprojeto",
    "buildNumber": "1",
    "infoPlist": {
      "NSCameraUsageDescription": "O meu-projeto irá usar sua câmera para tal funcionalidade."
    }
  },
  "android": {
    "adaptiveIcon": {
      "foregroundImage": "./assets/adaptive-icon.png",
      "backgroundColor": "#fff"
    },
    "versionCode": 1,
    "package": "com.devellop.meuprojeto"
  },

  ...
}

E altere as seguites linhas, no lugar do "xxxxxxxxxx" coloque o nome do seu projeto sem espaços ou caracteres especiais. O nome precisa ser igual para "bundleIdentifier" dentro de "ios" e "package" dentro de "android".

"bundleIdentifier": "com.devellop.xxxxxxxxxx"

"package": "com.devellop.xxxxxxxxxx"

Passo 6

Adicione um arquivo extra na raiz do seu projeto chamado eas.json e cole o seguinte código abaixo:

{
  "cli": {
    "version": ">= 2.8.0"
  },
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal"
    },
    "preview": {
      "distribution": "internal",
      "channel": "preview"
    },
    "production": {
      "channel": "production"
    }
  },
  "submit": {
    "production": {}
  }
}
{
  "cli": {
    "version": ">= 2.8.0"
  },
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal"
    },
    "preview": {
      "distribution": "internal",
      "channel": "preview"
    },
    "production": {
      "channel": "production"
    }
  },
  "submit": {
    "production": {}
  }
}

Esse arquivo é responsável por compilar o seu projeto e gerar os arquivos que serão importados nas lojas de aplicativos. Não é necessário fazer nenhuma mudança no código acima.

Passo 7

Vamos configurar o seu ambiente de compilação, siga os passos:

Instale o EAS Build em sua máquina com o seguinte comando:

 npm install -g eas-cli

O EAS Build permite que você crie um binário do seu aplicativo para enviar para o Google Play Store ou Apple App Store. Saiba sobre o "EAS" clicando aqui.

Em seguida, faça/confirme seu login da sua conta "Expo" usando o comando:

  eas login

Por fim, execute o comando abaixo para configurar em quais plataformas o seu projeto será compilado. *Obs.: Seu projeto ainda não será compilado, esta é apenas uma etapa de configuração do EAS

  eas build:configure

Passo 8

Hora de compilar! Tenha os acessos dos painéis das lojas de aplicativos em mãos, acesse:

Execute um dos comandos abaixo para compilar o seu projeto e importar nas lojas de aplicativos desejada:

Para gerar o arquivo de importação para a "Google Play store" (android), execute:

  eas build --platform android

Para gerar o arquivo de importação para a "Apple App Store" (iOS), execute:

  eas build --platform ios

Top! Após gerar os arquivos, você poderá fazer a importação direto no painel das lojas de aplicativos, e fazer as configurações necessárias dentro do painel para poder publicar o seu App.

Aviso

Cada plataforma tem o seu próprio método de importar/enviar os aplicativos gerados. Na "Google Play Store" esse processo é mais simples, basta apenas importar o "bundle" gerado pelo comando eas build --platform android. Na "Apple App store" existe uma forma de enviar o seu App direto pelo Expo, veja só essa documentação aqui.

No caso do iOS, de toda forma é necessário compilar/buildar o seu projeto com o comando eas build --platform ios antes de enviá-lo.

Como publicar seu projeto nas lojas de aplicativos

Passo 1​

Passo 2​

Passo 3​

Passo 4​

Passo 5​

Passo 6​

Passo 7​

Passo 8​