Skip to main content

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.