Cómo implementar Microsoft CodePush en su flujo de trabajo de desarrollo de aplicaciones móviles

CODE PUSH

Una aplicación de React Native se compone de archivos JavaScript y cualquier imagen que los acompañe. Sin embargo, el metro bundler debe empaquetarlos y distribuirlos como parte de un binario específico de la plataforma. Es decir, un archivo .ipa o .apk.

Una vez que se lanza la aplicación, actualizar el código JavaScript, lo que puede incluir la corrección de errores, la adición de nuevas funciones o recursos de imagen, requerirá la recompilación y redistribución de todo el binario, lo que incluye cualquier tiempo de revisión asociado con la(s) tienda(s) en la(s) que publiques.

El plugin de CodePush tiene una función de respaldo para una recuperación rápida y sencilla. Mantiene una copia de la actualización anterior para permitirte hacer una reversión automática en caso de un fallo durante la actualización. La función de reversión también es buena para los usuarios finales, porque les permitirá tener una versión funcional. La reversión elimina la necesidad de tiempo de inactividad ya que puedes activar una reversión rápidamente.

Es importante señalar que cuando tus cambios incluyen la modificación de códigos nativos, como tu archivo AppDelegate.m/MainActivity.java, no puedes usar el plugin de CodePush para la distribución a menos que sea a través de las tiendas.

App Center Command Line Interface (CLI)

La interfaz de línea de comandos (CLI) de App Center es una herramienta unificada para ejecutar servicios de App Center desde la línea de comandos. Integra el comando de App Center usando el siguiente comando:

npm install -g appcenter-cli

Regístrate en App Center para usar CodePush

1. Crea tu proyecto en App Center.

2. Añade tu Nombre de Proyecto, Tipo de Lanzamiento, SO y Plataforma.

3. Crea una clave de despliegue de CodePush para producción y desarrollo.

Integra App Center usando el siguiente comando:

npm install appcenter appcenter-analytics appcenter-crashes --save-exact

Android

• Crea un nuevo archivo con el nombre appcenter-config.json en android/app/src/main/assets/ con el siguiente contenido:

{
  "app_secret": "{Your app secret here}"
}

• Modifica el res/values/strings.xml de la aplicación para incluir las siguientes líneas:

<string name="appCenterCrashes_whenToSendCrashes" moduleConfig="true" translatable="false">DO_NOT_ASK_JAVASCRIPT</string>
<string name="appCenterAnalytics_whenToEnableAnalytics" moduleConfig="true" translatable="false">ALWAYS_SEND</string>

• Añade CodePushDeploymentKey en el archivo strings.xml. Tu string.xml debe quedar así:

<resources>
    <string name="app_name">AppName</string>
    <string moduleConfig="true" name="CodePushDeploymentKey">DeploymentKey</string>
</resources>

iOS

pod install --repo-update

• Modifica el archivo AppDelegate.m o AppDelegate.mm de la aplicación para incluir el código para iniciar el SDK.

#import <AppCenterReactNative.h>
#import <AppCenterReactNativeAnalytics.h>
#import <AppCenterReactNativeCrashes.h>

• Añade esto al método application:didFinishLaunchingWithOptions::

[AppCenterReactNative register];
[AppCenterReactNativeAnalytics registerWithInitiallyEnabled:true];
[AppCenterReactNativeCrashes registerWithAutomaticProcessing];

• Crea un nuevo archivo con el nombre AppCenter-Config.plist en ios/ con el siguiente contenido:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>AppSecret</key>
    <string>{Your app secret here}</string>
</dict>
</plist>

• Añade CodePushDeploymentKey en el archivo info.plist. Puedes encontrar esa clave en App Center -> Distribution -> Setting -> Production and Staging key.

<key>CodePushDeploymentKey</key>
<string>{your app deployment key}</string>

Al ejecutar el siguiente comando desde el directorio raíz de tu aplicación, puedes comenzar a integrar CodePush en tu aplicación React Native:

npm install --save react-native-code-push

Puedes realizar los siguientes pasos para integrar CodePush en tu proyecto de Android:

1. Ve a tu archivo android/settings.gradle y haz las siguientes adiciones al final del archivo:

include ':app', ':react-native-code-push'
project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-code-push/android/app')

2. En tu archivo android/app/build.gradle, añade el archivo codepush.gradle como una definición de tarea de compilación adicional al final del archivo:

apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"

3. Actualiza el archivo MainApplication.java para usar CodePush a través de los siguientes cambios:

// 1. Importa la clase del plugin.
import com.microsoft.codepush.react.CodePush;

public class MainApplication extends Application implements ReactApplication {

    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        // ...
        // 2. Anula el método getJSBundleFile para permitir
        // que el entorno de ejecución de CodePush determine de dónde obtener
        // la ubicación del paquete JS en cada inicio de la aplicación
        @Override
        protected String getJSBundleFile() {
            return CodePush.getJSBundleFile();
        }
    };
}

Para integrar CodePush en tu proyecto de iOS, realiza los siguientes pasos:

1. Ejecuta cd ios && pod install && cd .. para instalar todas las dependencias necesarias de CocoaPods.

2. Abre el archivo AppDelegate.m y añade una declaración de importación para los encabezados de CodePush:

#import <CodePush/CodePush.h>

3. Encuentra la línea de código particular que establece la URL de origen para el bridge en las versiones de producción:

return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

4. Reemplázala con esta línea:

return [CodePush bundleURL];

Tu método sourceURLForBridge debe verse así:

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
  #if DEBUG
    return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
  #else
    return [CodePush bundleURL];
  #endif
}

En este punto, tu archivo App.js debe verse así:

1. Importa CodePush

2. Añade una vista con color de fondo

3. Crea un APK de release y instálalo en Android

4. Instala la versión para iOS a través de TestFlight o instala la versión de release a través de Xcode

import React from "react";
import { View } from 'react-native';
import CodePush from "react-native-code-push";

function App() {
  return (
    <View style={{ flex: 1.0, backgroundColor: 'green' }}>
    </View>
  );
}

export default CodePush(App);

Ahora desplegaremos nuestra nueva versión usando CodePush. Cambiaremos el color de fondo de la vista de verde a rojo.

import React from "react";
import { View } from 'react-native';
import CodePush from "react-native-code-push";

function App() {
  return (
    <View style={{ flex: 1.0, backgroundColor: "red" }}>
    </View>
  );
}

export default CodePush(App);

Abre la herramienta de línea de comandos y pega este comando:

app center code push release-react -a {appcenter-username}/{appname} -d {Staging/Production}

Verifica en App Center una vez que se lance. Simplemente vuelve a abrir la aplicación y verás el cambio mostrado en las versiones publicadas de Android e iOS.