Creación de una aplicación de Apache CordovaCreate an Apache Cordova app

Información generalOverview

En este tutorial se muestra cómo agregar un servicio back-end basado en la nube a una aplicación móvil de Apache Cordova usando un back-end de la aplicación móvil de Azure.This tutorial shows you how to add a cloud-based backend service to an Apache Cordova mobile app by using an Azure mobile app backend. Creará un back-end de aplicación móvil nuevo y una aplicación simple de lista de tareas pendientes de Apache Cordova que almacena los datos de la aplicación en Azure.You create both a new mobile app backend and a simple Todo list Apache Cordova app that stores app data in Azure.

Completar este tutorial es un requisito previo para todos los demás tutoriales de Apache Cordova acerca de cómo usar la característica Mobile Apps en Azure App Service.Completing this tutorial is a prerequisite for all other Apache Cordova tutorials about using the Mobile Apps feature in Azure App Service.

Requisitos previosPrerequisites

Para completar este tutorial, debe cumplir los siguientes requisitos previos:To complete this tutorial, you need the following prerequisites:

También puede omitir Visual Studio y utilizar la línea de comandos de Apache Cordova directamente.You may also bypass Visual Studio and use the Apache Cordova command line directly. El uso de la línea de comandos es útil si realiza el tutorial en un equipo Mac.Using the command line is useful when completing the tutorial on a Mac computer. Este tutorial no aborda la compilación de aplicaciones de cliente de Apache Cordova con la línea de comandos.Compiling Apache Cordova client applications using the command line is not covered by this tutorial.

Creación de un nuevo back-end de Aplicaciones móviles de AzureCreate an Azure mobile app backend

  1. Inicie sesión en el Azure Portal.Sign in to the Azure portal.

  2. Haga clic en Crear un recurso.Click Create a resource.

  3. En el cuadro de búsqueda, escriba Mobile Apps.In the search box, type Mobile Apps.

    Azure Portal con inicio rápido de Mobile Apps resaltadoAzure portal with Mobile Apps Quickstart highlighted

  4. En la lista de resultados, seleccione Inicio rápido de Mobile Apps y, después, seleccione Crear.In the results list, select Mobile Apps Quickstart, and then select Create.

  5. Elija un nombre de aplicación único.Choose a unique App name. También formará parte del nombre de dominio de la instancia de App Service.This will also be part of the domain name for your App Service.

  6. En Grupo de recursos, seleccione un grupo de recursos existente o cree uno nuevo (con el mismo nombre que su aplicación).Under Resource Group, select an existing resource group or create a new one (using the same name as your app).

  7. Haga clic en Create(Crear).Click Create. Espere unos minutos para que se implemente el servicio correctamente antes de continuar.Wait a few minutes for the service to be deployed successfully before proceeding. Observe el icono de notificaciones (campana) en el encabezado del portal para las actualizaciones de estado.Watch the Notifications (bell) icon in the portal header for status updates.

Visualización de un vídeo donde se muestren pasos similaresWatch a video showing similar steps

Configuración del proyecto de servidorConfigure the server project

  1. Haga clic en el botón App Services, seleccione sucesivamente el back-end de Mobile Apps, Inicio rápido y la plataforma de cliente (iOS, Android, Xamarin, Cordova).Click the App Services button, select your Mobile Apps back end, select Quickstart, and then select your client platform (iOS, Android, Xamarin, Cordova).

    Azure Portal con inicio rápido de Mobile Apps resaltado

  2. Si no hay configurada ninguna conexión de base de datos, cree una haciendo lo siguiente:If a database connection is not configured, create one by doing the following:

    Azure Portal con Mobile Apps: conexión a la base de datos

    a.a. Cree una nueva instancia y un nuevo servidor de SQL Database.Create a new SQL database and server. Puede que tenga que dejar el campo del nombre de la cadena de conexión en el valor predeterminado MS_TableConnectionString para completar el paso 3 siguiente.You may need to leave the connection string name field to the default value of MS_TableConnectionString in order to complete step 3 below.

    Azure Portal con Mobile Apps: creación de una nueva base de datos y un nuevo servidor

    b.b. Espere hasta que se haya creado correctamente la conexión de datos.Wait until the data connection is successfully created.

    Notificación de Azure Portal de la creación correcta de conexión de datos

    c.c. La conexión de datos debe haberse creado correctamente.Data connection must be successful.

    Notificación de Azure Portal: "Ya tiene una conexión de datos"

  3. En 2. Crear una API de tabla, seleccione Node.js para Lenguaje de back-end.Under 2. Create a table API, select Node.js for Backend language.

  4. Acepte la confirmación y seleccione Crear tabla TodoItem.Accept the acknowledgment, and then select Create TodoItem table. Esta acción crea una nueva tabla de elementos pendientes en la base de datos.This action creates a new to-do item table in your database.

    Importante

    El cambio de un back-end existente a Node.js sobrescribe todo el contenido.Switching an existing back end to Node.js overwrites all contents. Para crear un back-end de .NET en su lugar, consulte Trabajar con el SDK del servidor back-end de .NET para Mobile Apps.To create a .NET back end instead, see Work with the .NET back-end server SDK for Mobile Apps.

Descarga y ejecución de la aplicación Apache CordovaDownload and run the Apache Cordova app

  1. Visite Azure Portal.Visit the Azure portal.
  2. Haga clic en App Services > el back-end que ha creado.Click App Services > the backend that you created.
  3. En la configuración de la aplicación de móvil, haga clic en Inicio rápido > Cordova.In the mobile app settings, click Quickstart > Cordova. Azure Portal con inicio rápido de Mobile Apps resaltadoAzure Portal with Mobile Apps Quickstart highlighted
  4. En Configurar la aplicación cliente, seleccione Crear aplicación nueva y, a continuación, haga clic en Descargar.Under Configure your client application, select Create a New App, then click Download.
  5. Desempaquete el archivo ZIP descargado en un directorio del disco duro, vaya al archivo de la solución (.sln) y ábralo con Visual Studio.Unpack the downloaded ZIP file to a directory on your hard drive, navigate to the solution file (.sln) and open it using Visual Studio.
  6. En Visual Studio, elija la plataforma de la solución (Android, iOS o Windows) en la lista desplegable situada junto a la flecha de inicio.In Visual Studio, choose the solution platform (Android, iOS, or Windows) from the drop-down next to the start arrow. Para seleccionar un dispositivo de implementación o un emulador específicos, haga clic en la lista desplegable de la flecha verde.Select a specific deployment device or emulator by clicking the drop-down on the green arrow. Puede usar la plataforma Android y el emulador Rippler predeterminados.You can use the default Android platform and Ripple emulator. Para tutoriales más avanzados (por ejemplo, las notificaciones de inserción), deberá seleccionar un dispositivo o emulador compatibles.More advanced tutorials (for example, push notifications) require you to select a supported device or emulator.
  7. Presione F5 o haga clic en la flecha verde para compilar y ejecutar su aplicación Cordova.To build and run your Cordova app, press F5 or click the green arrow. Si ve en el emulador un cuadro de diálogo de seguridad que solicita el acceso a la red, acéptelo.If you see a security dialog in the emulator requesting access to the network, accept it.
  8. Una vez que la aplicación se inicia en el dispositivo o emulador, escriba texto significativo en Enter new text (Escriba el nuevo texto), como Completar el tutorial y haga clic en el botón Add (Agregar).After the app is started on the device or emulator, type meaningful text in Enter new text, such as Complete the tutorial and then click the Add button.

El back-end inserta datos de la solicitud en la tabla TodoItem de SQL Database y devuelve información acerca de los elementos recién almacenados a la aplicación móvil.The backend inserts data from the request into the TodoItem table in the SQL Database, and returns information about the newly stored items back to the mobile app. La aplicación móvil muestra estos datos en la lista.The mobile app displays this data in the list.

Puede repetir los pasos del 3 al 5 para otras plataformas.You can repeat steps 3 through 5 for other platforms.

Pasos siguientesNext Steps

Ahora que ha completado este tutorial de inicio rápido, continúe con uno de los siguientes tutoriales:Now that you completed this quick start tutorial, move on to one of the following tutorials:

Obtenga más información acerca de los conceptos principales con en Azure App Service.Learn more about key concepts with Azure App Service.

Obtenga información sobre cómo usar los SDK.Learn how to use the SDKs.