Compartir a través de

Creación de una aplicación de Windows con un back-end de Azure

  • Artículo

Información general

En este tutorial se muestra cómo agregar un servicio back-end basado en la nube a una aplicación para la Plataforma universal de Windows (UWP). Para obtener más información, consulte ¿Qué es Mobile Apps? A continuación se muestran las capturas de pantalla de la aplicación completada:

Aplicación de escritorio completada

Completar este tutorial es un requisito previo para todos los tutoriales de aplicaciones móviles para aplicaciones para UWP.

Prerrequisitos

Para completar este tutorial, necesitará lo siguiente:

  • Una cuenta de Azure activa. 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. Para obtener más información, consulte Evaluación gratuita de Azure.
  • Windows 10
  • Visual Studio Community 2017.
  • Debe estar familiarizado con el desarrollo de aplicaciones para UWP. Visite la documentación de UWP para aprender obtener información sobre cómoestablecer la configuración para compilar aplicaciones para UWP.

Creación de un nuevo back-end de aplicaciones móviles de Azure

Siga estos pasos para crear un nuevo back-end de aplicación móvil.

  1. Inicie sesión en Azure Portal.

  2. Haga clic en Crear un recurso.

  3. En el cuadro de búsqueda, escriba Web App.

  4. En la lista de resultados, seleccione Web App en Marketplace.

  5. Seleccione los valores de Suscripción y Grupo de recursos (seleccione un grupo de recursos existente o cree uno nuevo [con el mismo nombre que el de la aplicación]).

  6. Elija un valor de Nombre único de la aplicación web.

  7. Elija la opción predeterminada Publicar como Código.

  8. En Pila en tiempo de ejecución, debe seleccionar una versión en ASP.NET o Nodo. Se está creando un back-end de .NET, seleccione una versión bajo ASP.NET. De lo contrario, si se dirige a una aplicación basada en nodos, seleccione una de las versiones en Nodo.

  9. Seleccione el valor correcto de Sistema operativo (Linux o Windows).

  10. Seleccione el valor de Región donde quiere que se implemente esta aplicación.

  11. Seleccione el valor adecuado de Plan de App Service y haga clic en Revisar y crear.

  12. En Grupo de recursos, seleccione un grupo de recursos existente o cree uno nuevo (con el mismo nombre que su aplicación).

  13. Haga clic en Crear. Espere unos minutos para que se implemente el servicio correctamente antes de continuar. Observe el icono de notificaciones (campana) en el encabezado del portal para las actualizaciones de estado.

  14. Una vez completada la implementación, haga clic en la sección Detalles de implementación y seleccione el recurso de tipo Microsoft.Web/sites. Navegará a la aplicación web de App Service que acaba de crear.

  15. Haga clic en la hoja Configuración bajo Configuración y en Configuración de la aplicación, haga clic en el botón Nueva configuración de la aplicación.

  16. En la página Agregar o editar la configuración de la aplicación, en el campo Nombre escriba MobileAppsManagement_EXTENSION_VERSION, en el campo Valor escriba Más reciente y haga clic en Aceptar.

Está listo para usar la aplicación web de App Service recién creada como una aplicación móvil.

Creación de una conexión de base de datos y configuración del proyecto de cliente y servidor

  1. Descargue los inicios rápidos del SDK de cliente para estas plataformas:

    iOS (Objective-C)
    iOS (Swift)
    Android (Java)
    Xamarin.iOS
    Xamarin.Android
    Xamarin.Forms
    Cordova
    Windows (C#)

    Nota

    Si usa el proyecto de iOS, debe descargar "azuresdk-iOS-*.zip" de la versión más reciente de GitHub. Descomprima y agregue el archivo MicrosoftAzureMobile.framework a la raíz del proyecto.

  2. Tendrá que agregar una conexión de base de datos o conectarse a una conexión existente. Primero, determine si podrá crear un almacén de datos o usar uno existente.

    • Creación de un almacén de datos: si va a crear un almacén de datos, use el siguiente inicio rápido:

      Inicio rápido: Introducción a bases de datos únicas en Azure SQL Database

    • Origen de datos existente: siga las instrucciones siguientes si desea usar una conexión de base de datos existente.

      1. Formato de cadena de conexión de SQL Database - Data Source=tcp:{your_SQLServer},{port};Initial Catalog={your_catalogue};User ID={your_username};Password={your_password}

        {your_SQLServer}: nombre del servidor; lo encontrará en la página de información general de la base de datos y suele tener la forma de “nombre_de_servidor.database.windows.net”. {port}: el puerto suele ser 1433. {your_catalogue}: nombre de la base de datos. {your_username}: nombre de usuario para acceder a la base de datos. {your_password}: contraseña para acceder a la base de datos.

        Más información sobre el formato de cadena de conexión SQL

      2. Agregue la cadena de conexión a su aplicación móvil. En App Service, puede administrar las cadenas de conexión para la aplicación mediante la opción Configuración del menú.

        Para agregar una cadena de conexión:

        1. Haga clic en la pestaña Configuración de la aplicación.

        2. Haga clic en [+] Nueva cadena de conexión.

        3. Deberá proporcionar valores para Nombre, Valor y Tipo para la cadena de conexión.

        4. En Nombre, escriba MS_TableConnectionString

        5. El valor debe ser la cadena de conexión que formó en el paso anterior.

        6. Si va a agregar una cadena de conexión a una base de datos de SQL Azure, elija SQLAzure en tipo.

  3. Azure Mobile Apps tiene varios SDK para back-ends de .NET y Node.js.

    • Back-end de Node.js

      Si va a usar la aplicación de inicio rápido de Node.js, siga estas instrucciones.

      1. En Azure Portal, vaya a Tablas fáciles y verá esta pantalla.

        Nodo de tablas fáciles

      2. Asegúrese de que la cadena de conexión SQL ya se haya agregado en la pestaña Configuración . A continuación, active la casilla de Confirmación de que esto sobrescribirá todo el contenido del sitio y haga clic en el botón Crear tabla TodoItem .

        Configuración del nodo de tablas fáciles

      3. En Tablas fáciles, haga clic en el botón + Agregar.

        Botón Agregar del nodo de tablas fáciles

      4. Cree una tabla TodoItem con acceso anónimo.

        Agregar tabla del nodo de tablas fáciles

    • Back-end de .NET

      Si va a usar la aplicación de inicio rápido de .NET, siga estas instrucciones.

      1. Descargue el proyecto de servidor .NET de Azure Mobile Apps desde el repositorio azure-mobile-apps-quickstarts.

      2. Compile el proyecto de servidor .NET localmente en Visual Studio.

      3. En Visual Studio, abra el Explorador de soluciones, haga clic con el botón derecho en el proyecto ZUMOAPPNAMEService, elija Publicar y verá la ventana Publish to App Service. Si está trabajando en Mac, puede ver otras formas de implementar la aplicación aquí.

        Publicación de Visual studio

      4. Seleccione App Service como destino de publicación y haga clic en Seleccionar existente. Después, seleccione Publicar en la parte inferior de la ventana.

      5. Primero tendrá que iniciar sesión en Visual Studio con su suscripción de Azure. Seleccione Subscription, Resource Group y luego el nombre de la aplicación. Cuando esté listo, haga clic en Aceptar. Se implementará el proyecto de servidor de .NET que tiene localmente en el back-end de App Service. Cuando termine la implementación, se le redirigirá a http://{zumoappname}.azurewebsites.net/ en el explorador.

Ejecutar el proyecto de cliente

  1. Abra el proyecto de UWP.

  2. Vaya a Azure Portal y diríjase a la aplicación móvil que ha creado. En la hoja Overview, busque la dirección URL que es el punto de conexión público de la aplicación móvil. Por ejemplo, el nombre de sitio para el nombre de mi aplicación "test123" será https://test123.azurewebsites.net.

  3. Abra el archivo App.xaml.cs en esta carpeta: windows-uwp-cs/ZUMOAPPNAME/. El nombre de la aplicación es ZUMOAPPNAME.

  4. En la clase App, reemplace el parámetro ZUMOAPPURL por el punto de conexión público anterior.

    public static MobileServiceClient MobileService = new MobileServiceClient("ZUMOAPPURL");

    se convierte en

    public static MobileServiceClient MobileService = new MobileServiceClient("https://test123.azurewebsites.net");

  5. Presione la tecla F5 para implementar y ejecutar la aplicación.

  6. 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.

    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.