Code Push - App Center¶

Introducción¶

CodePush es una tecnología desarrollada por Microsoft, parte de la suite de herramientas App Center, diseñada para permitir a los desarrolladores de aplicaciones móviles desplegar actualizaciones de código directamente a las aplicaciones de los usuarios en vivo. Esta capacidad resulta particularmente útil para corregir errores, mejorar el rendimiento o agregar funcionalidades menores sin necesidad de pasar por el proceso de actualización estándar en las tiendas de aplicaciones como Google Play Store o Apple App Store. Aquí están algunos de los aspectos más importantes de CodePush:

Actualizaciones en caliente (Hot Updates): CodePush permite a los desarrolladores desplegar actualizaciones "en caliente" del código JavaScript y de los assets (imágenes, sonidos, etc.) de aplicaciones creadas con frameworks como React Native y Cordova. Esto significa que los usuarios pueden recibir mejoras y correcciones sin tener que descargar una nueva versión de la app desde la tienda de aplicaciones.
Control de versiones: Ofrece a los desarrolladores la capacidad de dirigir actualizaciones a versiones específicas de la aplicación, lo que facilita el despliegue gradual de nuevas características o correcciones y la realización de pruebas A/B.
Integración con App Center: Al estar integrado con Microsoft App Center, CodePush se beneficia de un conjunto más amplio de herramientas de desarrollo, incluyendo análisis de crash, reportes de uso, y distribución de aplicaciones, entre otros, lo que proporciona una plataforma unificada para la gestión del ciclo de vida de las aplicaciones.
Implementación gradual: Permite a los desarrolladores lanzar una actualización a un porcentaje específico de usuarios, aumentando gradualmente este porcentaje. Esto es útil para probar cambios en un entorno de producción con un grupo limitado de usuarios antes de hacer la actualización disponible para todos.
Reversiones automáticas: Si una actualización resulta tener un problema crítico, CodePush puede revertir automáticamente a la versión anterior de la aplicación, asegurando que los usuarios no se vean afectados negativamente por actualizaciones problemáticas.
Fácil de usar: CodePush se diseñó con la simplicidad en mente, ofreciendo una CLI (interfaz de línea de comandos) sencilla para desplegar y gestionar actualizaciones, lo que reduce la curva de aprendizaje para desarrolladores nuevos con la plataforma.
Soporte para múltiples plataformas: Al ser compatible con frameworks de desarrollo híbrido y multiplataforma como React Native y Cordova, CodePush es una solución versátil para actualizar aplicaciones en iOS, Android, y Windows.

En resumen, CodePush es una herramienta poderosa que simplifica el proceso de actualización de aplicaciones móviles, permitiendo a los desarrolladores mantener sus aplicaciones actualizadas con mayor rapidez y eficiencia, mejorando la experiencia del usuario sin las demoras típicamente asociadas con las actualizaciones tradicionales de las tiendas de aplicaciones.

Arquitectura Code Push¶

Compilación React Native Android¶

La compilación de una aplicación React Native para Android implica varios pasos y herramientas que trabajan juntos para convertir tu código JavaScript y otros recursos en un paquete de aplicación instalable (APK o AAB). Este proceso es parte de lo que hace React Native tan poderoso, permitiendo a los desarrolladores escribir aplicaciones en un lenguaje de alto nivel que luego pueden ejecutarse en plataformas nativas. Aquí te explico cómo funciona este proceso:

1. Transpilación y Empaquetado de JavaScript¶

Babel: El código JavaScript escrito por los desarrolladores en React Native usualmente utiliza características modernas de JavaScript y JSX (sintaxis similar a XML para estructurar componentes). Babel es un transpilador que transforma este código en una versión de JavaScript que puede ser ejecutada por motores JavaScript más antiguos. Convierte JSX en llamadas a funciones y asegura que el código use sintaxis compatible con versiones anteriores de JavaScript.
Metro: Es el empaquetador (bundler) utilizado por React Native. Combina todos los archivos JavaScript del proyecto (incluyendo librerías y dependencias) en un único archivo bundle. Este paquete se minifica para reducir su tamaño y mejorar el rendimiento de la aplicación. Metro también gestiona el proceso de "hot reloading", permitiendo a los desarrolladores ver los cambios en tiempo real durante el desarrollo.

2. Compilación Nativa para Android¶

Java/Kotlin y recursos: Aunque la lógica de la aplicación se escribe en JavaScript, React Native genera una aplicación que incluye código y componentes nativos. Esto significa que el proyecto React Native contiene código Java/Kotlin para Android (o Swift/Objective-C para iOS). Durante el proceso de compilación, este código nativo se compila utilizando el Android SDK.
Gradle: Es el sistema de automatización de compilación utilizado por proyectos Android, incluyendo aquellos desarrollados con React Native. Gestiona las dependencias, ejecuta tareas para compilar el código nativo y empaqueta el código JavaScript junto con los recursos nativos (como imágenes, archivos XML para la interfaz de usuario, etc.) en un APK o AAB. Gradle también es responsable de firmar el paquete de la aplicación, un paso necesario para su distribución.

3. Ejecución en el Dispositivo o Emulador¶

Cuando la aplicación se ejecuta en un dispositivo o emulador, el código JavaScript del paquete se carga en un motor JavaScript (como Hermes o JavaScriptCore, dependiendo de la configuración del proyecto). Este motor ejecuta el JavaScript en un entorno de ejecución separado pero comunica con el código nativo a través del puente React Native.
Puente React Native: Es el mecanismo que permite la comunicación entre el código JavaScript y el código nativo. Cuando un componente JavaScript necesita acceder a una funcionalidad nativa (como la cámara, el GPS, o la interfaz de usuario nativa), el puente convierte estas llamadas de JavaScript a llamadas nativas y viceversa. Este proceso es clave para permitir que React Native ofrezca una experiencia de usuario tan cercana a lo nativo como sea posible.

Este proceso de compilación hace que React Native sea especialmente poderoso, ya que permite a los desarrolladores utilizar un lenguaje de alto nivel y un conjunto de herramientas centrado en la web para crear aplicaciones que se ejecutan y se sienten como nativas en múltiples plataformas. La habilidad de incluir código nativo junto con JavaScript también ofrece una gran flexibilidad para optimizar el rendimiento y aprovechar las capacidades específicas de la plataforma.

flujo build

Compilación React Native Code Push¶

Al adoptar Code Push en el desarrollo de aplicaciones React Native, se mantiene el enfoque de despliegue tradicional tanto para Android como para iOS. Esto significa que seguimos necesitando generar los artefactos de la aplicación —el APK para Android y el IPA para iOS— utilizando los métodos de compilación estándar. Sin embargo, la aplicación compilada se enriquece con una integración adicional: App Center Code Push. Esta integración permite que, una vez la aplicación esté instalada en el dispositivo del usuario, pueda descargar automáticamente el último bundle de JavaScript desde App Center, ya sea al iniciar la aplicación o bajo demanda.

Build Tradicional: En esta etapa, se compila la aplicación generando el APK o IPA, que contiene una versión inicial del bundle de JavaScript. Este artefacto se distribuye a través de las tiendas de aplicaciones, y los usuarios lo instalan en sus dispositivos.

Build Code Push Build con Code Push: Después de la instalación inicial, la aplicación puede recibir actualizaciones de JavaScript a través de Code Push. Cuando se publica una nueva versión del bundle en App Center, la aplicación la descarga y actualiza los archivos de JavaScript locales en el dispositivo, permitiendo que se ejecute el código más reciente publicado en App Center sin necesidad de una actualización completa de la aplicación.

Desarrollo - PoC¶

En esta sección, abordaremos el desarrollo de una prueba de concepto (PoC) para demostrar cómo CodePush se integra y funciona dentro del ciclo de vida del desarrollo de aplicaciones móviles. Se detallará desde la configuración inicial hasta el despliegue de una actualización, proporcionando una guía paso a paso que cubrirá las herramientas y prácticas recomendadas para aprovechar al máximo las capacidades de CodePush y App Center.

Repositorio¶

Puede ver la PoC en arquitectura mobile

Configuración¶

Código¶

En el apartado de configuración del código, exploraremos cómo preparar tu aplicación móvil para integrar CodePush. Esto incluye la instalación de los paquetes necesarios, la configuración del entorno de desarrollo y la incorporación de CodePush en el proyecto.

1 - Instalación

yarn install --save react-native-code-push

2 - Configuración Android

Debemos realizar los pasos de configuración como detalla la Documentación de Microsoft del segmento React Native ^0.60

Agregar en android/settings.gradle

settings.gradle

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

Sumar en android/app/build.gradle

build.gradle

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

Incorporar plugin CodePush

MainApplication.java

...
// 1. Import the plugin class.
import com.microsoft.codepush.react.CodePush;
public class MainApplication extends Application implements ReactApplication {
    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        ...
        // 2. Override the getJSBundleFile method to let
        // the CodePush runtime determine where to get the JS
        // bundle location from on each app start
        @Override
        protected String getJSBundleFile() {
            return CodePush.getJSBundleFile();
        }
    };
}

Agregar el Deploymeny key en strings.xml

strings.xml

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

App Center¶

Esta subsección se centra en la configuración del App Center. Discutiremos cómo crear y configurar tu proyecto dentro del App Center, conectar tu aplicación con CodePush, y establecer los entornos de despliegue. También abordaremos cómo gestionar las claves de despliegue y cómo utilizar las herramientas de análisis y reporte que ofrece App Center para monitorear la adopción de las actualizaciones y el rendimiento de la aplicación.

Pre requisitos

Tener cuenta en Appcenter
Crear una aplicación React Native en la plataforma AppCenter

Distribución - CodePush Por defecto al crear una aplicación obtenemos en el segmento Distribute/CodePush los deployment Production y Staging que puede representar enviroments en primer instancia o ser utilizados para otro tipos de estrategias.

CodePush

Cada deployment contiene un DeploymentKey que es el que utiliza la aplicación para poder sincronizar el codigo de JS

Deployments

Integración Code Push - React Native¶

Podemos seguir la Guia de microsoft para utilizar CodePush

Para la PoC se desarrollo un provider y un splash con el objetivo de poder visualizar la comprobación y descarga de actualizaciones.

Configuración del provider:

index.js

const InitApp = () => (
  <CodePushProvider>
    <App />
  </CodePushProvider>
);

AppRegistry.registerComponent(appName, () => CodePushProvider.init(InitApp));

Despliegue y Actualización¶

Para llevar a cabo un despliegue, es necesario generar una APK que incluya la configuración y el DeploymentKey de CodePush.

A continuación, se debe ejecutar el comando:

appcenter codepush release-react -a Platform-mobile/test -d Production

-a corresponde a la Aplicación.
-d se refiere al Despliegue.

Este proceso compila la aplicación React y realiza el envío del paquete (bundle) a App Center.

Code push App Center Ejemplo de registro en staging.

Versionado

Cuando se sube un nuevo paquete a CodePush, es posible especificar la versión de la aplicación que se desea actualizar. Para ello, se agrega el parámetro:

appcenter codepush release-react -a Platform-mobile/test -d Production -t 1.0.0

-a indica la Aplicación.
-d se refiere al Despliegue.
-t es la Versión Objetivo Binaria.

Utilizando el símbolo ^, es posible indicar que la actualización afectará a todas las versiones posteriores a la especificada, por ejemplo:

appcenter codepush release-react -a Platform-mobile/test -d Production -t ^1.0.0

Demostración¶

Para la demostración, incorporaremos un texto en la pantalla inicial de la aplicación. Así, podremos detectar el funcionamiento de CodePush y validar el cambio.

Código

Login/index.tsx

   ...
    return (
    <View style={styles.container}>
      <Text style={[fontsConfig.MBody1, styles.title]}>{t("login.title")}</Text>
      <Text style={styles.center}>{t("login.description")}</Text>

      <MobileAdapt height={350} width={400} />
      <Text style={styles.center}>{"Version Release 10.0 - CodePush - 10.0"}</Text>

      <View style={styles.buttonContainer}>
        <Button
          state="default"
          text={t("login.loginButton")}
          textVariant="labelMedium"
          onPress={() => {
            instance.handleAuthorize();
          }}
        />
      </View>
    </View>
    );

Despliegue

Versión: Se establecen versionCode=10 y versionName="10.0".

~app/build.gradle

    defaultConfig {
     ...
     versionCode 10
     versionName "10.0"
     ...
   }

Construcción del Artefacto: Se construye la APK con el comando yarn build:android.
Push a AppCenter: Se publica el paquete en CodePush apuntando al target "10.0" mediante el comando appcenter codepush release-react -a Platform-mobile/test -d Staging -t 10.0.
Instalación en un Dispositivo: La aplicación se instala en un dispositivo para su prueba.

Aplicación Al iniciar la aplicación, se muestra el splash donde se verifica el estado de CodePush.

Comprobando actualizaciones

Comprobando actualizaciones

Comprobando actualizaciones

Versión actualizada

Comprobando actualizaciones

Aplicación iniciada

Actualización

Para enviar una actualización, se modifica el texto del componente:

Login/index.tsx

   ...
    return (
    <View style={styles.container}>
      <Text style={[fontsConfig.MBody1, styles.title]}>{t("login.title")}</Text>
      <Text style={styles.center}>{t("login.description")}</Text>

      <MobileAdapt height={350} width={400} />
      <Text style={styles.center}>{"Version Release 10.0 - CodePush - 10.1"}</Text>

      <View style={styles.buttonContainer}>
        <Button
          state="default"
          text={t("login.loginButton")}
          textVariant="labelMedium"
          onPress={() => {
            instance.handleAuthorize();
          }}
        />
      </View>
    </View>
    );

Posteriormente, se publica una nueva versión en CodePush utilizando el comando appcenter codepush release-react -a Platform-mobile/test -d Staging -t 10.0.

Al reiniciar la aplicación, se observa lo siguiente:

Comprobando actualizaciones

Comprobando actualizaciones

Descargando actualización

Descargando actualización

Versión actualizada

Versión actualizada

Aplicación iniciada

Aplicación iniciada

AppCenter

Dentro de AppCenter, podemos visualizar el despliegue en staging de la versión 8 apuntando a la versión 10.0.

App center

Conclusión¶

La herramienta CodePush, integrada en el entorno de App Center de Microsoft, representa una innovación significativa en el desarrollo y mantenimiento de aplicaciones móviles. Su capacidad para desplegar actualizaciones de código directamente en las aplicaciones de los usuarios, sin la necesidad de pasar por el proceso tradicional de revisión de las tiendas de aplicaciones, ofrece a los equipos de desarrollo una versatilidad y eficiencia sin precedentes.

Velocidad de Implementación¶

Con CodePush, la implementación de nuevas funcionalidades o la corrección de errores se acelera considerablemente. Los desarrolladores pueden ahora empujar cambios críticos en tiempo real, asegurando que los usuarios disfruten de la versión más actualizada de la aplicación sin retrasos. Esta capacidad de respuesta rápida es especialmente crítica en situaciones donde un bug podría afectar negativamente la experiencia del usuario o la integridad de la aplicación.

Mejora Continua¶

Además, CodePush fomenta un ciclo de mejora continua, permitiendo a los equipos realizar ajustes frecuentes y medir su impacto inmediato a través de las herramientas analíticas integradas en App Center. Esta retroalimentación en tiempo real es invaluable para optimizar la experiencia del usuario y dirigir el desarrollo futuro de la aplicación.

Flexibilidad en la Distribución¶

CodePush también ofrece una flexibilidad sin igual en términos de gestión de versiones y distribución de actualizaciones. Los desarrolladores pueden segmentar su audiencia y lanzar actualizaciones dirigidas a grupos específicos de usuarios o realizar despliegues graduales para medir la aceptación de nuevas características antes de su lanzamiento amplio. Esta estrategia reduce el riesgo asociado con el lanzamiento de nuevas versiones y permite una optimización basada en datos reales de uso.

Reducción de Costos y Tiempos de Espera¶

Al evitar el proceso de revisión de las tiendas de aplicaciones, CodePush no solo reduce los tiempos de espera para la distribución de actualizaciones sino que también puede contribuir a la reducción de costos asociados con el ciclo de vida de desarrollo de la aplicación. Los equipos pueden enfocarse más en la innovación y menos en los procedimientos administrativos, aprovechando al máximo sus recursos.

Conclusión General¶

En resumen, CodePush es una herramienta esencial para cualquier equipo de desarrollo de aplicaciones móviles que busque mejorar la eficiencia, la flexibilidad y la capacidad de respuesta en el mantenimiento de sus aplicaciones. Al integrar CodePush, los equipos pueden asegurar una experiencia de usuario óptima, respondiendo rápidamente a sus necesidades y feedback, mientras mantienen un ciclo de desarrollo ágil y centrado en la mejora continua. La combinación de CodePush con la amplia gama de herramientas de App Center amplifica aún más su valor, ofreciendo una solución robusta para la gestión del ciclo de vida de las aplicaciones móviles.