Azure App Service: Integraciones con Salesforce (2 de 4)

Hola a todos, aquí tenemos la segunda entrega de la serie de artículos invitados de Giovanni Modica, Software Architect, .Net Developer & Salesforce Consultant.

En el artículo anterior vimos el escenario que íbamos a crear para practicar, los requisitos necesarios y cómo crear una aplicación en Salesforce. En el actual nos centraremos en la creación del portal de proveedores y la integración mediante un Logic App, concretamente la parte de la creación de API Apps.

Repasemos la estructura que vamos a tratar:

  • El escenario
  • Requisitos
  • Creación de la Aplicación en Salesforce
    • Probar la Aplicación creando algunos registros
  • Creación del Portal de Proveedores
    • Publicación del Portal como una Web App
  • Integración mediante un Logic App
    • Creación de API Apps
      • Salesforce API App
      • SQLServer API App
    • Creación del Logic App
      • Sincronización de Registros de Salesforce a SQL Server
      • Sincronización de Registros de SQL Server a Salesforce
      • Ejecución automática
  • Conclusiones
  • Recursos

Creación del Portal de Proveedores

A continuación procederemos a crear el portal de proveedores. Para ello crearemos una aplicación MVC usando Visual Estudio y la publicaremos en Azure como un Web App con una base de datos de SQLServer.

Abre Visual Studio y crea un nuevo proyecto del tipo “ASP.Net Web Application”. Yo he llamado el mío “PortalProveedores”. Usa la plantilla de proyecto MVC y como método de autenticación “Individual User Accounts”. Una vez creado el proyecto procederemos a activar Entity Framework Migrations. Desde la consola del Package Manager introduce los siguientes comandos:

 enable-migrations
add-migration Inicial
update-database

A continuación crearemos una nueva entidad para representar las asistencias. En el directorio de Models, agrega un nuevo archivo llamado Asistencia.cs y sobrescribe el contenido con el siguiente:

  1: using System;
  2: using System.Collections.Generic;
  3: using System.ComponentModel.DataAnnotations;
  4: using System.Linq;
  5: using System.Web;
  6: namespace PortalProveedores.Models
  7: {
  8:     public class Asistencia
  9:     {
  10:         [MaxLength(20)]
  11:         [Key]
  12:         public string Id { get; set; }
  13:         [MaxLength(80)]
  14:         public string Nombre { get; set; }
  15:         public string Descripcion { get; set; }
  16:         [MaxLength(50)]
  17:         public string Proveedor { get; set; }
  18:         [MaxLength(20)]
  19:         public string Estado { get; set; }
  20:         public DateTime? Fecha { get; set; }
  21:         public bool? Sincronizado { get; set;}
  22:     }
  23: }

Para exponer este objeto en Entity Framework agregaremos un atributo en la clase de contexto. Para no complicar las cosas usaremos la misma base de datos que usa ASP.Net Identity. Abre el archivo Models\IdentityModels.cs y agrega la línea resaltada a la clase ApplicationDbContext:

  1: public class ApplicationDbContext : IdentityDbContext<ApplicationUser>
  2: { 
  3:     public ApplicationDbContext() : base("DefaultConnection", throwIfV1Schema: false) 
  4:     { 
  5:     }  
  6:     public static ApplicationDbContext Create() 
  7:     { 
  8:         return new ApplicationDbContext(); 
  9:     }  
  10:     public DbSet<Asistencia> Asistencias { get; set; }
  11: }

A continuación agregaremos una nueva migración para este nuevo objeto. En la consola del Package Manager introduce los siguientes comandos:

 add-migration Asistencia
update-database

Vamos a agregar un controlador y una vista para el objeto de asistencia. En la carpeta de Controllers, agregar un nuevo controlador del tipo “MVC 5 Controller with views, using Entity Framework”. Llena los datos del controlador tal y como se muestra a continuación:

nuevo controlador

Visual Studio creará varios archivos (scaffolding) para el controlador y las vistas para operaciones típicas de CRUD. Por defecto el controlador se crea permitiendo acceso anónimo, y en nuestro caso queremos precisamente lo contrario: queremos que solo los usuarios autenticados en el portal puedan acceder a las solicitudes de asistencia. Abre el nuevo controlador, el archivo Controllers\AsisteciasController.cs, y decora la clase con el atributo de Authorize:

  1: [Authorize]
  2: public class AsistenciasController : Controller
  

Ahora solo nos queda agregar una opción de menú para poder acceder a las asistencias. Abre el archivo Views\Shared\_Layout.cshtml y agrega una nueva opción de menú tal y como se muestra en la línea resaltada:

  1: <ul class="nav navbar-nav"> 
  2:     <li>@Html.ActionLink("Home", "Index", "Home")</li> 
  3:     <li>@Html.ActionLink("Asistencias", "Index", "Asistencias")</li> 
  4:     <li>@Html.ActionLink("About", "About", "Home")</li> 
  5:     <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
  6: </ul>

Compila y ejecuta la aplicación. Después de registrarte deberías poder ver la pantalla de asistencias (la cual estará vacía, de momento):

portal proveedores

Publicación del Portal como un Web App

Ahora procederemos a publicar el portal como un Web App en Azure. Para ello dejaremos que Visual Studio haga todo el trabajo por nosotros. En el Solution Explorer, sobre el proyecto pincha con el botón derecho del ratón y escoge la opción de “Publish…” Selecciona como target “Microsoft Azure Web Apps”. Visual Studio te pedirá las credenciales para conectarte a tu suscripción de Azure. Pincha en el botón de “New…” para crear una nueva aplicación. Yo he llamado la mía “PortalProveedores”, y para mantener las cosas ordenadas he decidido crear un nuevo plan de servicio así como un nuevo grupo de recursos para esta aplicación. Necesitamos una base de datos, así que seleccionamos la opción de crear un nuevo servidor de base de datos.

azure web app 3

Toma nota del plan de App Service que vas a usar, así como del grupo de recursos ya que luego tendremos que crear el resto de aplicaciones (logic app y API apps) bajo el mismo plan para que puedan verse entre ellos. En mi caso tanto el plan como el grupo se llaman “PortalProveedores”. Pincha en el botón de crear y deja que Visual Studio haga su trabajo.

Una vez creada la aplicación web en Azure, el wizard continuará con el proceso de publicación. En la sección de “Settings” asegúrate de seleccionar la opción de “Execute Code First Migrations (run on application start)” para que la BD creada en Azure sea provisionada con las tablas necesarias para nuestra aplicación.

azure web app 5

Finalmente pincha en el botón de publicar y al terminar podrás ver el portal de proveedores ejecutándose en la nube.

Integración Mediante un Logic App

Ya tenemos nuestras dos aplicaciones ejecutándose independientemente. Ahora viene la parte divertida: la integración de estas usando una Logic App de Azure. Todos estos pasos los haremos usando el nuevo portal de Azure.

Lo primero que haremos será crear las aplicaciones de API para poder conectarnos a Salesforce y a SQLServer.

Creación de API Apps

Necesitamos dos API Apps, una para Salesforce y otra para SQLServer. Ambas aplicaciones las podemos crear accediendo al Azure Marketplace.

Salesforce API App

salesforce connector

En el portal de Azure, pincha en “New”, selecciona “Web + Mobile” y luego en “Azure Marketplace”, y selecciona la categoría de “API Apps”. En el campo de búsqueda introduce “salesforce” y en los resultados de búsqueda pincha en “Salesforce Connector”. Se abrirá un blade con los detalles del conector y con un link a su documentación. Pincha en el botón de “Create”. Se abrirá un nuevo blade con los detalles específicos del conector. Desde aquí seleccionaremos la sección de “Package Settings” donde podremos especificar las entidades (objetos) de Salesforce que queremos acceder. Elimina las entidades que aparecen por defecto e introduce el nombre del objeto que creamos en Salesforce: Asistencia__c (recuerda el sufijo __c el cual es parte del nombre del objeto):

salesforce connector settings

salesforce connector settings 2

En la sección de “App Service Plan” selecciona el plan de servicio creado anteriormente al publicar la aplicación web. El plan de servicio debe ser el mismo para que puedan funcionar todas las partes. En mi caso, el plan de servicio se llama “PortalProveedores”. Pincha en “Create” para que Azure proceda a provisionar la aplicación. Después de un minuto aproximadamente verás la notificación de que la app ya está lista.

Por cierto, si luego quieres modificar los parámetros de configuración del conector, tendrás que hacerlo desde el API App Host del conector (tienes un enlace al host desde los detalles del conector)

SQLServer API App

 sqlserver connector

Tal y como hicimos anteriormente, desde el Azure Marketplace buscaremos por “sql” y en los resultados de búsqueda pincharemos en “Microsoft SQL Connector”. Se abrirá un blade con los detalles del conector y un link a la documentación. Pincha en el botón de “Create”. Se abrirá un nuevo blade con los detalles específicos del conector. Desde aquí seleccionaremos la sección de “Package Settings” donde podremos especificar los detalles de conexión con la base de datos. Si tienes dudas sobre cuáles son los valores que debes colocar aquí puedes ver el connection string que se creó en el perfil de publicación del proyecto web y que publicamos en Azure (en Visual Studio, en el Solution Explorer, ve a Properties\PublishProfiles\<nombreProyecto>.pubxml) . Asegúrate también de que el plan de servicio sea el mismo plan que hemos utilizado anteriormente. En mi caso, las propiedades son las siguientes:

sql connector settings

Pincha en “Create” para que Azure proceda a provisionar la aplicación. Después de un minuto aproximadamente verás la notificación de que la app ya está lista. De igual manera, si luego quieres modificar los parámetros de configuración del conector, tendrás que hacerlo desde el API App Host del conector.

 

Muchas gracias a Giovanni Modicapor esta serie de artículos uniendo Azure Apps con Salesforce.

Un saludo,

El equipo MSDN España