> For the complete documentation index, see [llms.txt](https://elguerre.gitbook.io/de0an/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://elguerre.gitbook.io/de0an/capitulo-7-la-construccion.-accediendo-a-los-datos/backend.md).

# Backend

En primer lugar, nos centraremos en el acceso a datos remotos, para lo que crearemos una API de Servicios REST que publicaremos como servicio de Microsoft Azure, beneficiándonos así de todas las ventajas de la Nube (o Cloud).

Aunque no vamos a profundizar en el uso de Microsoft Azure, sí que conoceremos cómo realizar las operaciones necesarias para llevar a cabo la creación de nuestro servicio.

En primer lugar, es imprescindible crear una suscripción a Azure, para poder trabajar con dichos servicios, para lo que accederemos a la página: <https://azure.microsoft.com/es-es/free/>, en la que nos registraremos, de manera gratuita.

1. Crear una nueva aplicación/servicio “Mobile App” tal y como muestra la siguiente figura.

![](https://240651724-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfrvHBNivOTy0fVKROgzo%2Fuploads%2Fgit-blob-92a3e2f0cd275ca0d6fa80c31e099b3f488910dc%2Fimage1.png?alt=media)

**Figura 01.- Creación de una nueva Mobile App en el portal de Azure**

Donde:

* App name. Es el nombre que identifica a nuestra aplicación/servicio de manera unívoca en internet, por lo que no deberá existir previamente.
* Resource Group. Es una colección en la que todos los elementos o recursos comparten el mismo ciclo de vida, permisos y políticas. Permite una mejor administración y organización de recursos. De forma similar podríamos decir que es equivalente a una carpeta de nuestro disco duro cuyos recursos son ficheros.
* App Service Plan/Location. Determina la localización, costes y computación de recursos asociados a la aplicación/servicio.

![](https://240651724-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfrvHBNivOTy0fVKROgzo%2Fuploads%2Fgit-blob-a5439b62948092ec72d808658ffef53a5a9f1909%2Fimage2.png?alt=media)

**Figura 02.- Configuración del nombre, grupo de recursos y plan de servicio en Azure**

2. Una vez creada la aplicación, accederemos a la opción “Quick Start”, opción a través de la cual configuraremos la aplicación/servicio para crear una conexión a una base de datos SQL Database, que será nuestro repositorio remoto. A través de esta vista, obtendremos también un ejemplo de código que podemos descargar y usar como referencia para la creación de nuestra API RESTful.

![](https://240651724-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfrvHBNivOTy0fVKROgzo%2Fuploads%2Fgit-blob-b6fb93386fb18adf07ab1f82bec9d1aab19daa6d%2Fimage3.png?alt=media)

**Figura 03.- Opción Quick Start para configurar la conexión a SQL Database**

3. Descargar el código de ejemplo y realizar los siguientes cambios:
   1. Añadir el proyecto a la solución y modificar el nombre y *namespace* para asegurar que es: “ElGuerre.Taskin.WebApi”.
   2. Añadir a la carpeta “DataObjects”, de forma similar a la clase de ejemplo “TodoItem”, las clases: ProjectItem, TaskItem, PomodoroItem y CheckItem. Éstas definen las tablas en las que consistirá nuestra aplicación.

      ![](https://240651724-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfrvHBNivOTy0fVKROgzo%2Fuploads%2Fgit-blob-56dfc95cbda17acf7a224d0733ad60e31e677061%2Fimage4.png?alt=media)

      **Figura 04.- Clases de entidades añadidas en la carpeta DataObjects del proyecto WebApi**
   3. Añadir a la carpeta "Controllers" los controladores correspondientes para cada una de las tablas anteriores: ProjectItemsController.cs, TaskItemsController.cs, PomodoroItemsController.cs y CheckItemsController.cs.
   4. De forma similar al controlador de ejemplo “TodoItemController”, añadir el siguiente código al controlador ProjectItemsController.

      ```csharp
      protected override void Initialize(HttpControllerContext controllerContext)
      {
          base.Initialize(controllerContext);
          DataContext context = new DataContext();
          DomainManager = new EntityDomainManager<ProjectItem>(context, Request);
      }
      // GET tables/ProjectItems
      public IQueryable<ProjectItem> GetAllProjects()
      {
          return Query();
      }
      // GET tables/Project/48D68C86-6EA6-4C25-AA33-223FC9A27959
      public SingleResult<ProjectItem> GetProject(string id)
      {
          return Lookup(id);
      }
      // PATCH tables/ProjectItems/48D68C86-6EA6-4C25-AA33-223FC9A27959
      public Task<ProjectItem> PatchProject(string id, Delta<ProjectItem> patch)
      {
          return UpdateAsync(id, patch);
      }
      // POST tables/ProjectItems
      public async Task<IHttpActionResult> PostProject(ProjectItem item)
      {
          ProjectItem current = await InsertAsync(item);
          return CreatedAtRoute("Tables", new { id = current.Id }, current);
      }
      // DELETE tables/ProjectItems/48D68C86-6EA6-4C25-AA33-223FC9A27959
      public Task DeleteProject(string id)
      {
          return DeleteAsync(id);
      }
      }
      ```
   5. Repetir el paso anterior para todos los controladores, sustituyendo la clase ProjectItem, por TaskItem, PomodoroItem y CheckItem respectivamente para cada controlador.
   6. Renombrar la clase “Models\TaskinAppContext” para que pase a ser “DataContext” y realizar las modificaciones tal y como se recoge en el siguiente código.

      ```csharp
      public class DataContext : DbContext
      {
          private const string connectionStringName = "Name=MS_TableConnectionString";
          public DataContext() : base(connectionStringName)
          {
          }
          public DbSet<ProjectItem> Projects { get; set; }
          public DbSet<TaskItem> Tasks { get; set; }
          public DbSet<PomodoroItem> Pomodoros { get; set; }
          public DbSet<CheckItem> CheckLists { get; set; }
          protected override void OnModelCreating(DbModelBuilder modelBuilder)
          {
              modelBuilder.Conventions.Add(
                  new AttributeToColumnAnnotationConvention<TableColumnAttribute, string>(
                      "ServiceTableColumn", (property, attributes) => attributes.Single().ColumnType.ToString()));
          }
      }
      ```

## Publicación en Azure

Una vez que tenemos la API lista y funcionando en local, procederemos a publicarla en Azure directamente desde Visual Studio. Para ello, haremos clic con el botón derecho sobre el proyecto "ElGuerre.Taskin.WebApi" y seleccionaremos la opción "Publish…".

![C:\Users\juanlu\AppData\Local\Microsoft\Windows\INetCache\Content.Word\Publicando API desde VS 1.png](https://240651724-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfrvHBNivOTy0fVKROgzo%2Fuploads%2Fgit-blob-69a8867964956fceb67df30f2593ae5aad9d74cc%2Fimage5.png?alt=media)

**Figura 05.- Publicación de la API desde Visual Studio en Azure (paso 1)**

A continuación, seleccionaremos "Microsoft Azure App Service" como destino de la publicación. En este punto, Visual Studio nos mostrará las suscripciones disponibles junto con los grupos de recursos y los planes de servicio que hayamos creado previamente en el portal de Azure.

![C:\Users\juanlu\AppData\Local\Microsoft\Windows\INetCache\Content.Word\Publicando API desde VS 2.png](https://240651724-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfrvHBNivOTy0fVKROgzo%2Fuploads%2Fgit-blob-f4c1d5772cd4a647dc6f230da1db349b7239c1c9%2Fimage6.png?alt=media)

**Figura 06.- Publicación de la API desde Visual Studio en Azure (paso 2)**

Seguidamente, configuraremos los parámetros de conexión y validaremos que todo es correcto antes de iniciar la publicación. Una vez completado el proceso, Visual Studio abrirá automáticamente el navegador con la URL del servicio desplegado, confirmando así que nuestra API REST está operativa en la nube.

![C:\Users\juanlu\AppData\Local\Microsoft\Windows\INetCache\Content.Word\Publicando API desde VS 3.png](https://240651724-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfrvHBNivOTy0fVKROgzo%2Fuploads%2Fgit-blob-0c77d6cb1b91438b83b0e8ad8c4c9d5f212ace9d%2Fimage7.png?alt=media)

**Figura 07.- Publicación de la API desde Visual Studio en Azure (paso 3)**

Por último, será necesario añadir el siguiente paquete NuGet al proyecto para habilitar las peticiones CORS (Cross-Origin Resource Sharing):

* Microsoft.AspNet.WebApi.Cors
