Creación de una aplicación de Windows con un back-end de AzureCreate a Windows app with an Azure backend

Información generalOverview

En este tutorial se muestra cómo agregar un servicio back-end basado en la nube a una aplicación para Plataforma universal de Windows (UWP).This tutorial shows you how to add a cloud-based backend service to a Universal Windows Platform (UWP) app. Para obtener más información, consulte ¿Qué es Mobile Apps?For more information, see What are Mobile Apps. A continuación se muestran las capturas de pantalla de la aplicación completada:The following are screen captures from the completed app:

Aplicación de escritorio completada

Completar este tutorial es un requisito previo para todos los tutoriales de aplicaciones móviles para aplicaciones para UWP.Completing this tutorial is a prerequisite for all other Mobile App tutorials for UWP apps.

Requisitos previosPrerequisites

Para completar este tutorial, necesitará lo siguiente:To complete this tutorial, you need the following:

  • Una cuenta de Azure activa.An active Azure account. Si no dispone de ninguna cuenta, puede registrarse para obtener una versión de evaluación de Azure y conseguir hasta 10 aplicaciones móviles gratuitas que podrá seguir usando incluso después de que finalice la evaluación.If you don't have an account, you can sign up for an Azure trial and get up to 10 free mobile apps that you can keep using even after your trial ends. Para obtener más información, consulte Evaluación gratuita de Azure.For details, see Azure Free Trial.
  • Windows 10Windows 10.
  • Visual Studio Community.Visual Studio Community.
  • Debe estar familiarizado con el desarrollo de aplicaciones de UWP.Familiarity with UWP app development. Visite la documentación de UWP para aprender a configurar para compilar aplicaciones de UWP.Visit the UWP documentation to learn how to get set up to build UWP apps.

Creación de un nuevo back-end de Aplicaciones móviles de AzureCreate a new Azure Mobile App backend

Siga estos pasos para crear un nuevo back-end de aplicación móvil.Follow these steps to create a new 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.

Ahora ha aprovisionado un back-end de aplicación móvil de Azure que puede usarse por las aplicaciones del cliente móvil.You have now provisioned an Azure Mobile App backend that can be used by your mobile client applications. Después, descargará un proyecto de servidor para un back-end de "lista de tareas" sencillo y lo publicará en Azure.Next, you will download a server project for a simple "todo list" backend and publish it to Azure.

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 del proyecto de clienteDownload and run the client project

Una vez configurado el back-end de aplicación móvil, puede crear una nueva aplicación cliente o modificar una aplicación existente para conectarse a Azure.Once you have configured your Mobile App backend, you can either create a new client app or modify an existing app to connect to Azure. En esta sección, descargará un proyecto de una aplicación de ejemplo de UWP que se personaliza para conectarse al back-end de aplicación móvil.In this section, you download a UWP sample app project that is customized to connect to your Mobile App backend.

  1. De nuevo en la hoja Inicio rápido para el back-end de aplicación móvil, haga clic en Crear una nueva aplicación > Descargar y extraiga los archivos de proyecto comprimidos en el equipo local.Back in the Quick start blade for your Mobile App backend, click Create a new app > Download, then extract the compressed project files to your local computer.

    Descargar el proyecto de inicio rápido de Windows

  2. Abra el proyecto de UWP y presione la tecla F5 para implementar y ejecutar la aplicación.Open the UWP project and press the F5 key to deploy and run the app.

  3. En la aplicación, escriba texto significativo, como Realice el tutorial, en el cuadro de texto Insertar un TodoItem y, a continuación, haga clic en Guardar.In the app, type meaningful text, such as Complete the tutorial, in the Insert a TodoItem text box, and then click Save.

    Inicio rápido de Windows completo - Escritorio

    Esta acción envía una solicitud POST al nuevo back-end de aplicación móvil hospedado en Azure.This sends a POST request to the new mobile app backend that's hosted in Azure.

Sugerencia

Si usa el back-end de .NET, puede agregar el proyecto de la aplicación de UWP a la misma solución que el proyecto de servidor.You can add the UWP app project to the same solution as the server project if you are using the .NET backend. Así se facilita la depuración y prueba tanto de la aplicación como del back-end en la misma solución de Visual Studio.This makes it easier to debug and test both the app and the backend in the same Visual Studio solution. Para agregar un proyecto de aplicación para UWP a la solución de back-end, debe usar Visual Studio 2017 o posterior.To add a UWP app project to the backend solution, you must be using Visual Studio 2017 or later.

Pasos siguientesNext steps