Creación de una aplicación de AndroidCreate an Android app

Nota

Visual Studio App Center está invirtiendo en servicios nuevos e integrados fundamentales para el desarrollo de aplicaciones móviles.Visual Studio App Center is investing in new and integrated services central to mobile app development. Los desarrolladores pueden usar los servicios de compilación, prueba y distribución para configurar las canalizaciones de integración y entrega continuas.Developers can use Build, Test and Distribute services to set up Continuous Integration and Delivery pipeline. Una vez que se ha implementado la aplicación, los desarrolladores pueden supervisar el estado y el uso de su aplicación con los servicios de análisis y diagnóstico, e interactuar con los usuarios que usan el servicio de Push (inserción).Once the app is deployed, developers can monitor the status and usage of their app using the Analytics and Diagnostics services, and engage with users using the Push service. Además, los desarrolladores pueden aprovechar Auth para autenticar a los usuarios y el servicio de datos para almacenar y sincronizar los datos de la aplicación en la nube.Developers can also leverage Auth to authenticate their users and Data service to persist and sync app data in the cloud. Visite App Center hoy mismo.Check out App Center today.

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 Android con 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 Android mobile app by using an Azure mobile app backend. Creará tanto un back-end de aplicación móvil nuevo como una aplicación de Android simple de la lista de tareas pendientes que almacene los datos de la aplicación en Azure.You will create both a new mobile app backend and a simple Todo list Android app that stores app data in Azure.

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

Requisitos previosPrerequisites

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

Creación de un nuevo back-end de Aplicaciones móviles de AzureCreate a new 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 Web App.In the search box, type Web App.

  4. En la lista de resultados, seleccione Web App en Marketplace.In the results list, select Web App from the 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]).Select your Subscription and Resource Group (select an existing resource group or create a new one (using the same name as your app)).

  6. Elija un valor de Nombre único de la aplicación web.Choose a unique Name of your web app.

  7. Elija la opción predeterminada Publicar como Código.Choose the default Publish option as Code.

  8. En Pila en tiempo de ejecución, debe seleccionar una versión en ASP.NET o Nodo.In the Runtime stack, you need to select a version under ASP.NET or Node. Se está creando un back-end de .NET, seleccione una versión bajo ASP.NET.If you are building a .NET backend, select a version under ASP.NET. De lo contrario, si se dirige a una aplicación basada en nodos, seleccione una de las versiones en Nodo.Otherwise if you are targeting a Node based application, select one of the version from Node.

  9. Seleccione el valor correcto de Sistema operativo (Linux o Windows).Select the right Operating System, either Linux or Windows.

  10. Seleccione el valor de Región donde quiere que se implemente esta aplicación.Select the Region where you would like this app to be deployed.

  11. Seleccione el valor adecuado de Plan de App Service y haga clic en Revisar y crear.Select the appropriate App Service Plan and hit Review and create.

  12. 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).

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

  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.Once the deployment is completed, click on the Deployment details section and then click on the Resource of Type Microsoft.Web/sites. Navegará a la aplicación web de App Service que acaba de crear.It will navigate you to the App Service Web App that you just created.

  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.Click on the Configuration blade under Settings and in the Application settings, click on the New application setting button.

  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.In the Add/Edit application setting page, enter Name as MobileAppsManagement_EXTENSION_VERSION and Value as latest and hit OK.

Está listo para usar la aplicación web de App Service recién creada como una aplicación móvil.You are all set to use this newly created App Service Web app as a Mobile app.

Creación de una conexión de base de datos y configuración del proyecto de cliente y servidorCreate a database connection and configure the client and server project

  1. Descargue los inicios rápidos del SDK de cliente para estas plataformas:Download the client SDK quickstarts for the following platforms:

    iOS (Objective-C)iOS (Objective-C)
    iOS (Swift)iOS (Swift)
    Android (Java)Android (Java)
    Xamarin.iOSXamarin.iOS
    Xamarin.AndroidXamarin.Android
    Xamarin.FormsXamarin.Forms
    CordovaCordova
    Windows (C#)Windows (C#)

    Nota

    Si usa el proyecto de iOS, debe descargar "azuresdk-iOS-*.zip" de la versión más reciente de GitHub.If you use the iOS project you need to download "azuresdk-iOS-*.zip" from latest GitHub release. Descomprima y agregue el archivo MicrosoftAzureMobile.framework a la raíz del proyecto.Unzip and add the MicrosoftAzureMobile.framework file to the project's root.

  2. Tendrá que agregar una conexión de base de datos o conectarse a una conexión existente.You will have to add a database connection or connect to an existing connection. Primero, determine si podrá crear un almacén de datos o usar uno existente.First, determine whether you’ll create a data store or use an existing one.

    • Crear un nuevo almacén de datos: Si va a crear un almacén de datos, eche un vistazo a esta guía de inicio rápido:Create a new data store: If you’re going to create a data store, use the following quickstart:

      Inicio rápido: Introducción a las bases de datos únicas en Azure SQL DatabaseQuickstart: Getting started with single databases in Azure SQL Database

    • Origen de datos existente: Siga estas instrucciones si quiere usar una conexión de base de datos existenteExisting data source: Follow the instructions below if you want to use an existing database connection

      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}SQL Database Connection String format - 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”.{your_SQLServer} Name of the server, this can be found in the overview page for your database and is usually in the form of “server_name.database.windows.net”. {port} : el puerto suele ser 1433.{port} usually 1433. {your_catalogue} : nombre de la base de datos.{your_catalogue} Name of the database. {your_username} : nombre de usuario para acceder a la base de datos.{your_username} User name to access your database. {your_password} : contraseña para acceder a la base de datos.{your_password} Password to access your database.

        Más información sobre el formato de cadena de conexión SQLLearn more about SQL Connection String format

      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ú.Add the connection string to your mobile app In App Service, you can manage connection strings for your application by using the Configuration option in the menu.

        Para agregar una cadena de conexión:To add a connection string:

        1. Haga clic en la pestaña Configuración de la aplicación.Click on the Application settings tab.

        2. Haga clic en [+] Nueva cadena de conexión.Click on [+] New connection string.

        3. Deberá proporcionar valores para Nombre, Valor y Tipo para la cadena de conexión.You will need to provide Name, Value and Type for your connection string.

        4. En Nombre, escriba MS_TableConnectionStringType Name as MS_TableConnectionString

        5. El valor debe ser la cadena de conexión que formó en el paso anterior.Value should be the connecting string you formed in the step before.

        6. Si va a agregar una cadena de conexión a una base de datos de SQL Azure, elija SQLAzure en tipo.If you are adding a connection string to a SQL Azure database choose SQLAzure under type.

  3. Azure Mobile Apps tiene varios SDK para back-ends de .NET y Node.js.Azure Mobile Apps has SDKs for .NET and Node.js backends.

    • Back-end de Node.jsNode.js backend

      Si va a usar la aplicación de inicio rápido de Node.js, siga estas instrucciones.If you’re going to use Node.js quickstart app, follow the instructions below.

      1. En Azure Portal, vaya a Tablas fáciles y verá esta pantalla.In the Azure portal, go to Easy Tables, you will see this screen.

        Nodo de tablas fáciles

      2. Asegúrese de que la cadena de conexión SQL ya está agregada en la pestaña Configuración. Después, active la casilla Reconozco que esta acción sobrescribirá el contenido del sitio web y haga clic en el botón Crear tabla TodoItem.Make sure the SQL connection string is already added in the Configuration tab. Then check the box of I acknowledge that this will overwrite all site contents and click the Create TodoItem table button.

        Configuración del nodo de tablas fáciles

      3. En Tablas fáciles, haga clic en el botón + Agregar.In Easy Tables, click the + Add button.

        Botón Agregar del nodo de tablas fáciles

      4. Cree una tabla TodoItem con acceso anónimo.Create a TodoItem table with anonymous access.

        Agregar tabla del nodo de tablas fáciles

    • Back-end de .NET.NET backend

      Si va a usar la aplicación de inicio rápido de .NET, siga estas instrucciones.If you’re going to use .NET quickstart app, follow the instructions below.

      1. Descargue el proyecto de servidor .NET de Azure Mobile Apps desde el repositorio azure-mobile-apps-quickstarts.Download the Azure Mobile Apps .NET server project from the azure-mobile-apps-quickstarts repository.

      2. Compile el proyecto de servidor .NET localmente en Visual Studio.Build the .NET server project locally in 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.In Visual Studio, open Solution Explorer, right-click on ZUMOAPPNAMEService project, click Publish, you will see a Publish to App Service window. Si está trabajando en Mac, puede ver otras formas de implementar la aplicación aquí.If you are working on Mac, check out other ways to deploy the app here.

        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.Select App Service as publish target, then click Select Existing, then click the Publish button at the bottom of the window.

      5. Primero tendrá que iniciar sesión en Visual Studio con su suscripción de Azure.You will need to log into Visual Studio with your Azure subscription first. Seleccione Subscription, Resource Group y luego el nombre de la aplicación.Select the Subscription, Resource Group, and then select the name of your app. 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.When you are ready, click OK, this will deploy the .NET server project that you have locally into the App Service backend. Cuando termine la implementación, se le redirigirá a http://{zumoappname}.azurewebsites.net/ en el explorador.When deployment finishes, you will be redirected to http://{zumoappname}.azurewebsites.net/ in the browser.

Ejecución de la aplicación AndroidRun the Android app

  1. Abra el proyecto mediante Android Studio, con Importar proyecto (Eclipse ADT, Gradle, etc.) .Open the project using Android Studio, using Import project (Eclipse ADT, Gradle, etc.). Asegúrese de que realice esta selección de importación para evitar los errores del JDK.Make sure you make this import selection to avoid any JDK errors.

  2. Abra el archivo ToDoActivity.java en esta carpeta ZUMOAPPNAME/aplicación/src/main/java/com/example/zumoappname.Open the file ToDoActivity.java in this folder - ZUMOAPPNAME/app/src/main/java/com/example/zumoappname. El nombre de la aplicación es ZUMOAPPNAME.The application name is ZUMOAPPNAME.

  3. Vaya a Azure Portal y diríjase a la aplicación móvil que ha creado.Go to the Azure portal and navigate to the mobile app that you created. En la hoja Overview, busque la dirección URL que es el punto de conexión público de la aplicación móvil.On the Overview blade, look for the URL which is the public endpoint for your mobile app. Por ejemplo, el nombre de sitio para el nombre de mi aplicación "test123" será https://test123.azurewebsites.net.Example - the sitename for my app name "test123" will be https://test123.azurewebsites.net.

  4. En el método onCreate(), reemplace el parámetro ZUMOAPPURL por el punto de conexión público anterior.In onCreate() method, replace ZUMOAPPURL parameter with public endpoint above.

    new MobileServiceClient("ZUMOAPPURL", this).withFilter(new ProgressFilter());

    se convierte enbecomes

    new MobileServiceClient("https://test123.azurewebsites.net", this).withFilter(new ProgressFilter());

  5. Presione el botón Ejecutar "aplicación" para compilar el proyecto e iniciar la aplicación en el simulador de Android.Press the Run 'app' button to build the project and start the app in the Android simulator.

  6. En la aplicación, escriba un texto significativo, como Realizar el tutorial y luego haga clic en el botón "Agregar".In the app, type meaningful text, such as Complete the tutorial and then click the 'Add' button. Esto envía una solicitud POST al back-end de Azure implementado anteriormente.This sends a POST request to the Azure backend you deployed earlier. El back-end inserta los datos de la solicitud en la tabla SQL TodoItem 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 SQL table, 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. Inicio rápido de AndroidQuickstart Android