Compartir a través de

Introducción a Apache Cordova

  • Artículo

Importante

Visual Studio App Center está programado para retirarse el 31 de marzo de 2025. Aunque puede seguir usando Visual Studio App Center hasta que se retire por completo, hay varias alternativas recomendadas a las que puede considerar la posibilidad de migrar.

Obtenga más información sobre las escalas de tiempo y las alternativas de soporte técnico.

Nota

El soporte técnico para aplicaciones cordova finalizó en abril de 2022. Obtenga más información en el blog de App Center.

El SDK de App Center usa una arquitectura modular para que pueda usar fácilmente uno, varios o todos los servicios de App Center en la aplicación Apache Cordova.

En este artículo, aprenderá a agregar el SDK de App Center a las aplicaciones de Apache Cordova y, a continuación, configurará las funcionalidades de Análisis de App Center y Bloqueos de App Center en una aplicación.

1. Prerrequisitos

Antes de comenzar, asegúrese de que el proyecto de aplicación apache Cordova cumple los siguientes requisitos mínimos:

  • CLI de Cordova 6.4.0 o posterior
  • cordova-android engine 5.0.0 o posterior
  • cordova-ios engine 4.3.0 o posterior

Para determinar la versión de la CLI de Cordova, abra una ventana de terminal o un símbolo del sistema de Windows y ejecute el siguiente comando:

cordova -v

Para determinar las cordova-android versiones y cordova-ios , abra el archivo config.xml del proyecto, encontrará los motores de plataforma definidos en los engine elementos que se muestran a continuación:

<engine name="android" spec="~6.2.3" />
<engine name="ios" spec="~4.4.0" />

También debe tener CocoaPods instalado. Para ello, ejecute sudo gem install cocoapodspod setup

2. Obtención del secreto de la aplicación de App Center

Para que el SDK de App Center se conecte con el proyecto de aplicación en App Center, el SDK necesita el secreto de aplicación del proyecto de App Center. Más adelante aprenderá a configurar el SDK de Apache Cordova de App Center con este valor, pero, por ahora, le permite ver dónde encontrarlo.

Si tiene un proyecto de aplicación de App Center existente, acceda al panel de App Center y abra el proyecto. También puede el secreto de la aplicación en la página Configuración del proyecto de aplicación. Acceda al menú de la esquina superior derecha de la página y seleccione Copiar secreto de aplicación para copiar el secreto de la aplicación en el Portapapeles.

Si no tiene una aplicación creada en el panel de App Center, complete los pasos siguientes.

  1. Regístrese para una cuenta de App Center o inicie sesión en una cuenta de App Center existente en https://appcenter.ms.
  2. En el panel de App Center, haga clic en la lista desplegable Agregar nuevo en la esquina superior derecha de la página. Seleccione Agregar nueva aplicación en el menú.
  3. Escriba un nombre para el proyecto de aplicación y agregue una descripción opcional según sea necesario.
  4. Seleccione el sistema operativo adecuado para el proyecto de aplicación (solo Android o iOS) y, después, seleccione la opción de plataforma Cordova .
  5. Haga clic en el botón Agregar nueva aplicación en la esquina inferior derecha de la página.
  6. Busque el secreto de aplicación en la página Configuración del proyecto de aplicación. Acceda al menú de la esquina superior derecha de la página y, a continuación, seleccione el elemento Copiar secreto de la aplicación para copiar el secreto de la aplicación en el Portapapeles.

3. Agregar el SDK de App Center al proyecto

Instalar el SDK

En el caso de los proyectos de Apache Cordova, el SDK se distribuye a través de complementos estándar de Apache Cordova. Agregue el SDK de App Center al proyecto de Cordova mediante las instrucciones proporcionadas en esta sección. Para empezar, abra una ventana de terminal o un símbolo del sistema de Windows y vaya a la carpeta raíz del proyecto cordova.

Para agregar compatibilidad con App Center Analytics al proyecto, ejecute el siguiente comando:

cordova plugin add cordova-plugin-appcenter-analytics

Para agregar compatibilidad con Bloqueos de App Center al proyecto, ejecute el siguiente comando:

cordova plugin add cordova-plugin-appcenter-crashes

Para agregar complementos para todas las funcionalidades de App Center al proyecto con un comando, ejecute el siguiente comando:

cordova plugin add cordova-plugin-appcenter-analytics cordova-plugin-appcenter-crashes

Nota

Debe agregar cordova-plugin-appcenter-analytics y cordova-plugin-appcenter-crashes la mayoría de las aplicaciones que usan App Center; proporcionan información útil para los desarrolladores sin ninguna configuración ni codificación adicionales.

Configuración de los complementos

Secreto de la aplicación

Debe configurar el proyecto con el secreto de la aplicación del proyecto de App Center para poder usar el SDK de App Center en el proyecto de Apache Cordova.

Abra el archivo config.xml del proyecto de Apache Cordova; para cada uno de los elementos de destino platform del proyecto de Apache Cordova (solo Android e iOS actualmente), agregue un elemento secundario preference en el formato siguiente:

<preference name="APP_SECRET" value="0000-0000-0000-0000-000000000000" />

En este ejemplo, va a agregar un elemento con un name atributo con un valor de APP_SECRETy un value atributo con el valor que se muestra en el ejemplo. Aquí, el 0000-0000-0000-0000-000000000000 que se muestra en el ejemplo es una representación arbitraria de un secreto de aplicación de proyecto de App Center. Reemplace el secreto de aplicación que se muestra en el ejemplo por el secreto de aplicación real del proyecto de App Center.

Como ejemplo completo, para un proyecto de Apache Cordova que admita destinos de Android e iOS, tendrá definiciones de proyecto de aplicación independientes en App Center y, por tanto, diferentes valores de secretos de aplicación para cada plataforma de destino. La sección pertinente del archivo config.xml del proyecto tendrá un aspecto similar al siguiente:

<platform name="android">
   <preference name="APP_SECRET" value="0000-0000-0000-0000-000000000001" />
</platform>
<platform name="ios">
   <preference name="APP_SECRET" value="0000-0000-0000-0000-000000000002" />
</platform>

Nota

En el ejemplo no se muestran los valores reales del secreto de la aplicación; estos son simplemente simulacros, tendrás que tomar los secretos de la aplicación del proyecto de App Center y usarlos aquí. Los secretos de la aplicación son diferentes porque tendrá secretos únicos para los proyectos de aplicación de Android e iOS en App Center.

Preferencias de análisis

Si usa App Center Analytics en la aplicación, hay algunos pasos de configuración adicionales que se deben realizar. Abra el archivo config.xml del proyecto de Apache Cordova en un editor y agregue uno o varios de los siguientes preferences elementos al archivo:

  • APPCENTER_ANALYTICS_ENABLE_IN_JS - (opcional, el valor predeterminado es false) Controla si Analytics está habilitado automáticamente. Cuando false, Analytics está habilitado de forma predeterminada. Cuando truees , la aplicación debe llamar a AppCenter.Analytics.setEnabled(true) (en su código JavaScript) para habilitar Analytics antes de enviar datos a App Center. Esta preferencia es útil cuando desea preguntar a los usuarios si quieren compartir información de análisis antes de habilitarla dentro de la aplicación. Obtenga más información sobre cómo enviar eventos de usuario manualmente.

    Ejemplo:

    <preference name="APPCENTER_ANALYTICS_ENABLE_IN_JS" value="true" />

  • APPCENTER_CRASHES_ALWAYS_SEND - (opcional, el valor predeterminado es true) Especifica si los informes de bloqueo se envían automáticamente a App Center cuando la aplicación se bloquea. Al enviar informes de bloqueo automáticamente, cada bloqueo se notifica, lo que puede sobrecargar a los equipos de ingeniería y soporte técnico. Al enviar informes de bloqueo manualmente (estableciendo APPCENTER_CRASHES_ALWAYS_SEND en false), el código dentro de la aplicación puede evaluar los bloqueos y decidir cuándo se envían informes de bloqueos a App Center, qué datos se incluyen en los informes, etc. Esto significa más trabajo para el desarrollador, pero también proporciona un mayor control sobre la privacidad del usuario y le permite adjuntar un mensaje con el informe de bloqueo. Obtenga más información sobre el procesamiento de informes de bloqueos en JS.

    Ejemplo:

    <preference name="APPCENTER_CRASHES_ALWAYS_SEND" value="false" />

    Si usa la copia de seguridad automática para evitar obtener información incorrecta sobre los dispositivos, siga los pasos siguientes:

Nota

Las aplicaciones destinadas a Android 6.0 (nivel de API 23) o superior tienen habilitada automáticamente la copia de seguridad automática. 

Nota

Si ya tiene un archivo personalizado con regla de copia de seguridad, cambie al tercer paso.

a. Cree appcenter_backup_rule.xml archivo en la carpeta res/xml .

<resource-file src="appcenter_backup_rule.xml" target="res/xml/appcenter_backup_rule.xml" />

b. Para android:fullBackupContent que el atributo se agregue al <application> elemento dentro deAndroidManifest.xml archivo, agregue las siguientes líneas al archivo config.xml de la aplicación:

<edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application">
     <application android:fullBackupContent="@xml/appcenter_backup_rule" />
</edit-config>
 ```

c. Add the following backup rules to the **appcenter_backup_rule.xml** file:

```xml
<full-backup-content xmlns:tools="http://schemas.android.com/tools">
   <exclude domain="sharedpref" path="AppCenter.xml"/>
   <exclude domain="database" path="com.microsoft.appcenter.persistence"/>
   <exclude domain="database" path="com.microsoft.appcenter.persistence-journal"/>
   <exclude domain="file" path="error" tools:ignore="FullBackupContent"/>
   <exclude domain="file" path="appcenter" tools:ignore="FullBackupContent"/>
</full-backup-content>

4. ¿Dónde ir a continuación?

Genial, está todo configurado para visualizar los datos de Análisis y Bloqueos recopilados automáticamente por el SDK en el portal. No se requiere ninguna configuración adicional. Consulte las secciones Análisis y bloqueos de las guías de API y los tutoriales para obtener información sobre lo que puede hacer App Center.