Compartir a través de

Creación de una aplicación de Apache Cordova con Azure Mobile Apps

  • Artículo

Nota

Este producto se retira. Para obtener un reemplazo de proyectos con .NET 8 o posterior, consulte la biblioteca datasync de Community Toolkit.

En este tutorial se muestra cómo agregar un servicio back-end basado en la nube a una aplicación multiplataforma de Apache Cordova mediante Azure Mobile Apps y un back-end de aplicación móvil de Azure. Creará un nuevo back-end de aplicación móvil y una sencilla lista de tareas pendientes que almacena los datos de la aplicación en Azure.

Complete este tutorial antes de continuar con otros tutoriales de Apache Cordova sobre el uso de la característica Mobile Apps en Azure App Service.

Prerrequisitos

Para completar este tutorial, necesita lo siguiente:

Este tutorial se puede completar en sistemas Windows o Mac. La versión de iOS de la aplicación solo se puede ejecutar en un equipo Mac. En este tutorial se usa Windows (solo con la aplicación que se ejecuta en Android).

Apache Cordova 8.1.2 o versiones anteriores requeridas

Apache Cordova lanzó un cambio incompatible en la herramienta en v9.0.0. Si tiene Instalado Apache Cordova v9.0.0 o posterior, el complemento no funcionará, quejándose de un problema de dependencia con el módulo q.

Visual Studio Code

Hay un extensión de Apache Cordova para Visual Studio Code que permite ejecutar la aplicación con depuración. Visual Studio Code es muy recomendable para el desarrollo de Apache Cordova.

Instalación de Gradle

El error más común al configurar Apache Cordova en Windows es la instalación de Gradle. Esto se instala de forma predeterminada con Android Studio, pero no está disponible para el uso normal. Descargue y desempaquete el versión más recientey agregue el directorio bin a path manualmente.

Descarga del proyecto de inicio rápido de Apache Cordova

El proyecto de inicio rápido de Apache Cordova se encuentra en la carpeta samples/cordova de la azure/azure-mobile-apps repositorio de GitHub. Puede descargar el repositorio como un archivo ZIPy desempaquetarlo. Los archivos se crearán en la carpeta azure-mobile-apps-main.

Una vez descargado, abra un terminal y cambie el directorio a la ubicación de los archivos.

Implementación del servicio back-end

Para implementar el servicio de inicio rápido, inicie sesión primero en Azure con la CLI de Azure:

az login

Se abrirá un explorador web para completar la autorización.

Si es necesario, seleccionar una suscripción.

Creación de un grupo de recursos

Escriba lo siguiente para crear un grupo de recursos:

az group create -l westus -n zumo-quickstart

Este comando crea un grupo de recursos denominado zumo-quickstart para contener todos los recursos que creamos. Reemplace westus por otra región si no tiene acceso a la región westus o prefiere una región más cercana.

Implementación del back-end en Azure

El servicio se compone de los siguientes recursos:

  • Un plan de hospedaje de App Service en el plan gratis.
  • Un sitio web hospedado en el plan de hospedaje de App Service.
  • Un servidor de Azure SQL Server.
  • Una base de datos de Azure SQL en el nivel Básico (incurre en costos).

La base de datos de Azure SQL es el único recurso que incurre en costos. Para obtener más información, consulte precios de .

Para implementar los recursos, escriba los siguientes comandos:

cd samples/nodejs
az deployment group create -n ZumoQuickstart -g zumo-quickstart --template-file ./azuredeploy.json

Una vez completado, ejecute el siguiente comando para ver las salidas:

az deployment group show -n ZumoQuickstart -g zumo-quickstart --query properties.outputs

Este comando muestra información sobre la implementación que necesita para desarrollar la aplicación móvil. El nombre de usuario y la contraseña de la base de datos son útiles para acceder a la base de datos a través de Azure Portal. El nombre de App Service se usa a continuación y el punto de conexión público se inserta en el código más adelante.

Por último, implemente el servidor de Azure Mobile Apps en app Service creado:

az webapp deployment source config-zip -g zumo-quickstart --name zumo-XXXXXXXX --src ./zumoserver.zip

Reemplace zumo-XXXXXXXX por el nombre de app Service; se muestra en la lista de salidas. En un plazo de 2 a 3 minutos, el servidor de Azure Mobile Apps estará listo para usarse. Puede usar un explorador web para confirmar que el back-end funciona. Apunte el explorador web al punto de conexión público con /tables/TodoItem anexados a él (por ejemplo, https://zumo-XXXXXXXX.azurewebsites.net/tables/TodoItem). El explorador mostrará un error sobre un parámetro X-ZUMO-VERSION que falta si el servidor funciona correctamente.

eliminar los recursos

Una vez completado el tutorial de inicio rápido, puede eliminar los recursos con az group delete -n zumo-quickstart.

El tutorial consta de tres partes (incluida esta sección). No elimine los recursos antes de completar el tutorial.

Configuración del proyecto de inicio rápido de Apache Cordova

Ejecute npm install para instalar todas las dependencias.

Agregue una plataforma al proyecto. Por ejemplo, para agregar la plataforma Android, use:

cordova platform add android

Puede agregar browser, androidy ios según sea necesario. La plataforma browser no funcionará con la sincronización sin conexión habilitada. Una vez que haya agregado todas las plataformas que desea usar, ejecute cordova requirements para asegurarse de que se han cumplido todos los requisitos.

Abra el archivo www/js/index.js en un editor de texto. Edite la definición de BackendUrl para mostrar la dirección URL del back-end. Por ejemplo, si la dirección URL del back-end se https://zumo-abcd1234.azurewebsites.net, la dirección URL de back-end tendría el siguiente aspecto:

    var BackendUrl = "https://zumo-abcd1234.azurewebsites.net";

Guarde el archivo. Abra el archivo www/index.html en un editor de texto. Edite el Content-Security-Policy para actualizar la dirección URL para que coincida con la dirección URL de back-end; por ejemplo:

<meta http-equiv="Content-Security-Policy" 
    content="default-src 'self' data: gap: https://zumo-abcd1234.azurewebsites.net; style-src 'self'; media-src *;">

Para compilar la aplicación, use el siguiente comando:

cordova build

Ejecución de la aplicación

Si se ejecuta desde un explorador (mediante cordova platform add browser), debe habilitar la compatibilidad con CORS en Azure App Service. Para ello, ejecute el siguiente comando:

az webapp cors add -g zumo-quickstart --name ZUMOAPPNAME --allowed-origins "*"

Reemplace el ZUMPAPPNAME por el nombre del back-end móvil de Azure App Service. Una vez configurado el back-end, ejecute el siguiente comando:

cordova run android

Una vez completado el inicio inicial, puede agregar y eliminar elementos de la lista. Los elementos de tareas pendientes se almacenan en la instancia de Azure SQL conectada al back-end de Azure Mobile Apps.

Si el emulador no se inicia automáticamente, abra Android Studio y seleccione Configurar>administrador de AVD. Ahora puede iniciar el emulador manualmente. Si ejecuta adb devices -l, debería ver el dispositivo emulado seleccionado. Ahora debería poder ejecutar cordova run android.

de aplicaciones de Apache Cordova

Pasos siguientes

Continúe para implementar sincronización de datos sin conexión.