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é son las aplicaciones móviles? A continuación se muestran capturas de pantalla de la aplicación completada:

Aplicación de escritorio completada

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

Prerrequisitos

Para completar este tutorial, necesita lo siguiente:

  • Una cuenta de Azure activa. Si no tiene una cuenta, puede registrarse para obtener una evaluación de Azure y obtener hasta 10 aplicaciones móviles gratuitas que pueda seguir usando incluso después de que finalice la prueba. Para obtener más información, consulte Evaluación gratuita de Azure.
  • Windows 10.
  • Visual Studio Community 2017.
  • Familiaridad con el desarrollo de aplicaciones para UWP. Visite la documentación de para UWP para aprender a configurar para compilar aplicaciones para UWP.

Creación de un nuevo back-end de aplicación móvil 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 el de suscripción de y grupo de recursos (seleccione un grupo de recursos existente o cree uno nuevo (con el mismo nombre que la aplicación).

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

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

  8. En la pila runtime, debe seleccionar una versión de ASP.NET o Node.js. Si va a compilar un back-end de .NET, seleccione una versión en ASP.NET. De lo contrario, si tiene como destino una aplicación basada en node, seleccione una de las versiones de Node.

  9. Seleccione el sistema operativo correcto , ya sea Linux o Windows.

  10. Seleccione la región donde desea que se implemente esta aplicación.

  11. Seleccione el plan de App Service adecuado y presione Revisar y crear.

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

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

  14. Una vez completada la implementación, haga clic en la sección Detalles de implementación y, a continuación, haga clic en el recurso de tipo Microsoft.Web/sites. Se le dirigirá a la aplicación web de servicio de aplicaciones que acaba de crear.

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

  16. En la página de configuración Agregar o editar aplicación de, escriba Nombre como MobileAppsManagement_EXTENSION_VERSION y Valor como más reciente y presione Aceptar.

Todos están configurados para usar esta 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 las guías de inicio rápido del SDK de cliente para las siguientes plataformas:

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

    Nota:

    Si usa el proyecto de iOS, debe descargar "azuresdk-iOS-*.zip" de 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. En primer lugar, determine si va a crear un almacén de datos o usar uno existente.

    • Crear un nuevo 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 individuales 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, se puede encontrar en la página de información general de la base de datos y normalmente está en forma de "server_name.database.windows.net". {port} normalmente 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 de SQL

      2. Agregue la cadena de conexión a su aplicación móvil En el servicio de aplicación, puede administrar cadenas de conexión para su aplicación mediante la opción Configuración en el 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 Nombre, Valor y Tipo para su cadena de conexión.

        4. Escriba nombre como MS_TableConnectionString

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

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

  3. Azure Mobile Apps tiene SDKs para .NET y Node.js backends.

    • Node.js backend

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

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

        Tablas fáciles de Node

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

        Configuración de tablas fáciles del nodo

      3. En Easy Tables, haga clic en el botón + Añadir.

        Botón para añadir tablas fáciles de nodo

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

        tablas fáciles de agregar tablas de

    • backend de .NET

      Si va a usar la aplicación de inicio rápido de .NET, siga las instrucciones que se indican a continuación.

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

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

      3. En Visual Studio, abre el Explorador de Soluciones, haz clic con el botón derecho en el Proyecto ZUMOAPPNAMEService, luego haz clic en Publicar , y verás una ventana Publish to App Service. Si está trabajando en Mac, consulte otras formas de implementar la aplicación aquí.

        de publicación de Visual Studio

      4. Seleccione Servicio de aplicaciones como destino de publicación, luego haga clic en Seleccionar Existentey, a continuación, haga clic en el botón Publicar en la parte inferior de la ventana.

      5. Primero deberá iniciar sesión en Visual Studio con la suscripción de Azure. Seleccione el Subscription, Resource Groupy, a continuación, seleccione el nombre de la aplicación. Cuando estés listo, haz clic en Aceptar, se implementará el proyecto de servidor .NET que tienes localmente al back-end de App Service. Cuando finalice la implementación, se le redirigirá a http://{zumoappname}.azurewebsites.net/ en el explorador.

Ejecución del proyecto de cliente

  1. Abra el proyecto de UWP.

  2. Vaya a la Azure Portal y vaya a la aplicación móvil que creó. En la hoja Overview, busque la dirección URL que es el punto de conexión público de la aplicación móvil. Ejemplo: el nombre de sitio 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 acceso público arriba.

    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 Completar el tutorial, en el cuadro de texto Insertar un TodoItem, y, a continuación, haga clic en Guardar.

    inicio rápido completo de Windows para escritorio

    Esto envía una solicitud POST al nuevo back-end de aplicación móvil hospedado en Azure.