Pipa no Ar Docs

Tema

Guia rápido (React Native) ​

Este guia leva um app React Native (bare) do zero ao primeiro update pelo ar. Para Expo, veja também o guia do Expo.

Você vai precisar de: uma conta no painel, um projeto React Native com Hermes ligado e Node 20 ou mais novo.

Os comandos já preenchidos

No painel, a página Setup de cada app mostra todos os trechos abaixo com o appId do seu app já preenchido.

Atalho

npx @pipanoar/init, na raiz do projeto, instala os pacotes, cria o hot-updater.config.ts e envolve o app com o HotUpdater (no Expo, também o plugin do app.json). A parte nativa do React Native bare e o token de deploy continuam com você. Veja as opções.

1. Crie o app no painel ​

  1. Entre no painel e crie uma organização.
  2. Clique em Novo app. Um app cobre iOS e Android.
  3. Anote o appId (começa com app_). Ele aparece na página Setup do app.

2. Instale os pacotes ​

sh
npm install @hot-updater/react-native@1.0.0-rc.24
npm install -D hot-updater@1.0.0-rc.24 @hot-updater/bare@1.0.0-rc.24 @pipanoar/hot-updater

O Pipa no Ar segue a versão 1.0.0-rc.24 do hot-updater. Use a mesma versão em todos os pacotes hot-updater.

Aponte o nativo para o hot-updater ​

Na build de release, o app precisa carregar o bundle que o hot-updater baixou, e não o que veio embutido.

iOS, no AppDelegate.swift:

swift
import HotUpdater

override func bundleURL() -> URL? {
#if DEBUG
  RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index")
#else
  HotUpdater.bundleURL()
#endif
}

Em AppDelegate.mm: #import <HotUpdater/HotUpdater.h> e return [HotUpdater bundleURL]; no bloco de release.

Android, no MainApplication.kt:

kotlin
import com.hotupdater.HotUpdater

override fun getJSBundleFile(): String = HotUpdater.getJSBundleFile(applicationContext)

Depois rode cd ios && pod install. Para conferir se ficou certo:

sh
npx hot-updater doctor

3. Crie o hot-updater.config.ts ​

Na raiz do projeto:

ts
import { bare } from "@hot-updater/bare";
import { pipanoar } from "@pipanoar/hot-updater";
import { defineConfig } from "hot-updater";

export default defineConfig({
  build: bare({ enableHermes: true }),
  ...pipanoar({ appId: "app_xxxxxxxxxxxxxxxxxxxx" }),
  updateStrategy: "appVersion",
});

O pipanoar() configura o banco e o armazenamento da CLI para o seu app. Veja todas as opções.

4. Configure o token de deploy ​

Na organização, abra Tokens de deploy, crie um token com escopo Deploy e deixe disponível para a CLI:

sh
export PIPANOAR_TOKEN=pn_...

O token aparece uma vez só. Guarde num gerenciador de senhas ou nos segredos do CI. Mais detalhes em Tokens e API keys.

5. Envolva o app com o HotUpdater ​

No app, abra API keys e crie uma chave. Ela só lê os updates deste app, então pode ir dentro do bundle.

tsx
import { HotUpdater, insights } from "@hot-updater/react-native";
import { pipanoarClient } from "@pipanoar/hot-updater/client";

function App() {
  // ...
}

export default HotUpdater.wrap({
  ...pipanoarClient({
    appId: "app_xxxxxxxxxxxxxxxxxxxx",
    apiKey: "COLE_A_API_KEY_AQUI",
  }),
  updateStrategy: "appVersion",
  // Insights: instalações ativas, adoção e falhas no painel.
  plugins: [insights()],
})(App);

Use o mesmo updateStrategy aqui e no hot-updater.config.ts.

6. Gere a build nativa ​

Gere uma build de release e instale no aparelho ou no emulador. Updates OTA não rodam em builds de debug, que carregam o JavaScript do Metro.

Essa build é a base: daqui em diante, cada correção de JavaScript vai pelo ar.

7. Publique o primeiro update ​

Mude algo visível no JavaScript e publique:

sh
npx hot-updater deploy -p ios
npx hot-updater deploy -p android

Feche e abra o app duas vezes: na primeira ele baixa o update, na segunda abre com ele. No painel, a release aparece em Releases e os números começam a chegar em Insights.

Para liberar só para uma parte dos aparelhos, use -r:

sh
npx hot-updater deploy -p android -r 10   # 10% dos aparelhos

Próximos passos ​