Azure

Azure Logic Apps: BizTalk Services technologie gebruiken in Logic Apps

30 juni 2015

Dit is het vierde deel uit de serie artikelen over Logic Apps. In dit artikel ga ik in op de BizTalk Services technologie in Logic Apps.

Scenario

De medewerkers van Ordina maken gebruik van een invulformulier waarmee ze declaraties in kunnen dienen. Het invulformulier is een MVC applicatie die gehost wordt in Azure als een Web App. Op basis van het ingevulde bedrag (hoger of lager dan € 100,-) wordt bepaald of de declaratie opgeslagen wordt in Azure Blob Storage, of dat er een email verstuurd wordt naar de manager ter goedkeuring. Hiervoor wordt de BizTalk Service technologie ingezet.

Scenario

 

 

 

 

 

 

 

 

Storage account aanmaken

Om de declaraties in Azure Blob Storage op te kunnen slaan heb je een storage account nodig. Volg onderstaande stappen om een account en een container aan te maken.

[bulletlist]

  • Open de Azure Management Preview Portal: https://portal.azure.com/
  • Ga naar Nieuw -> Data + Storage -> Opslag.
  • Geef de storage account een naam (in mijn geval is dit ordina.core.windows.net).
  • Selecteer een Resource group of maak een nieuwe aan. Ik heb voor dit artikel een resource group geselecteerd die ik al eerder aangemaakt heb.
  • Diagnostische gegevens heb ik voor dit voorbeeld uitgezet.
  • Klik op Maken. Het account wordt aangemaakt.

[/bulletlist]

Logic_Apps_BizTalkServices1

 

 

 

 

 

 

 

[bulletlist]

  • Om de container aan te maken klik je op de Container tegel en daarna op toevoegen.

[/bulletlist]

Logic_Apps_BizTalkServices1a

 

 

 

 

 

 

[bulletlist]

  • Geef de Container de naam declaraties  en klik op Ok.

[/bulletlist]

Logic_Apps_BizTalkServices1b

 

 

 

 

 

 

 

 

API Connectors toevoegen aan Azure App Plan

Voordat je kan beginnen met het configureren van de Logic App, zullen de Connectors eerst toegevoegd moeten worden aan je App Service Plan. De onderstaande Connectors moeten toegevoegd worden voor deze Logic App:

[bulletlist]

  • Http Listener (Hiermee kan je een Endpoint configureren die aangeroepen kan worden door een client applicatie. Deze Connector is tevens de Trigger om de Logic App uit te voeren)
  • BizTalk JSON Encoder (Om het inkomende bericht om te zetten van JSON naar XML)
  • BizTalk XPath Extractor (Om de waarde uit het Bedrag veld uit te lezen)
  • SMTP Connector (voor het verzenden van de email)
  • Azure Storage Blob Connector (om het bericht op te slaan in de Blob Storage)

[/bulletlist]

 

Kijk hier voor meer informatie over Azure App Service Plans en hoe je die aan kunt maken:http://sjoukjezaal.blogspot.nl/2015/06/azure-logic-apps-azure-app-service-plans.html

[bulletlist]

[/bulletlist]

Logic_Apps_SalesForce_Twilio6

 

 

 

 

[bulletlist]

  • Klik hierna op API Apps, HTTP Listener, Maken om de connector toe te voegen.

[/bulletlist]

Logic_Apps_BizTalkServices3

 

 

 

 

[bulletlist]

  • Verander bij de Package Settings de waarde naar false. We gaan handmatig een response terugsturen.
  •  Kies een bestaande App Service Plan of maak een nieuwe aan (zie artikel over App Service Plans).
  • De Pricing Tier wordt na het selecteren van het App Service Plan automatisch ingevuld. Dit kan alleen gewijzigd worden d.m.v. het aanmaken van een nieuw App Service Plan.
  • Klik op Resourcegroep, daarna op Een nieuwe resourcegroep maken en geef de resourcegroep een naam. Je kan hier ook een bestaande resourcegroep kiezen. (zie artikel over App Service Plans).
  • Bij Locatie, kies voor West-Europa.
  • Klik op Maken.

[/bulletlist]

 

Deze Connector moet na het aanmaken nog geconfigureerd worden.

[bulletlist]

  • Ga terug naar de Startpagina in de Azure Preview Portal.
  • Klik op de tegel van de HTTP Listener API App. Het configuratiescherm wordt geopend. Klik op de Security tegel onder het kopje Components om de authenticatie in te stellen. Standaard staat deze op None. Maar vanwege een bug is deze waarde nog niet ingesteld. Klik dus een keer op Basic en daarna weer op None.

[/bulletlist]

Logic_Apps_BizTalkServices4

 

 

 

 

 

 

[bulletlist]

  • Klik daarna op Settings -> Application Settings en zet het Acces level op Public Anonymous en klik dan op Save. Zo kunnen we de API anoniem aanroepen.

[/bulletlist]

Logic_Apps_BizTalkServices5a

 

 

 

 

 

 

[bulletlist]

  • Herhaal stap 1 t/m 9 voor het toevoegen van  de overige Connectors. Voeg als laatste de Azure Storage Blob Connector toe. Deze moet ook geconfigureerd worden.
  • Klik bij het toevoegen van de Blob Storage Connector op de Package Settings en voeg bijContainer/ SAS URI de Url van je Storage Account in die je eerder aangemaakt hebt met daarachter de containernaam. In mijn geval is dit:https://ordina.blob.core.windows.net/declaraties en bij de Acceskey de acceskey in van de Blob Storage. Deze kan je ook vinden bij de instellingen van je Storage Account. (Ik heb hier de Primaire Toegangssleutel ingevoerd).
  • Klik op Ok en daarna op maken.

[/bulletlist]

 

Logic App Configureren

Volg onderstaande stappen om de Logic App te configureren:
[bulletlist]
  • Open de Azure Management Preview Portal: https://portal.azure.com/
  • Ga naar Nieuw -> Web + Mobile -> Logic App.
  • Geef de nieuwe App een naam (b.v. Azure-RequestPayment-App).
  • Bij Create new App Service Plan selecteer je de naam van een bestaand App Service Plan of maak je een nieuwe aan (voor meer informatie over App Service Plans kun je het eerste deel uit deze serie lezen: http://www.spcnl.nl/2015/06/azure-logic-apps-azure-app-service-plans/). Bij het selecteren van een bestaand App Service Plan worden de gegevens van de Pricing Tier en de Resourcegroep automatisch overgenomen.

[/bulletlist]

Logic_Apps_BizTalkServices5

 

 

 

 

 

 

 

[bulletlist]

  • Klik daarna op Triggers and Actions. De Logic Designer wordt nu geopend.
  • Selecteer aan de rechterkant, onder API Apps en dan onder de Resource group de HTTP Listener API. Deze wordt toegevoegd aan de designer.
  • Klik op het Pijltje.

[/bulletlist]

Logic_Apps_BizTalkServices5b

 

 

 

 

 

 

 

[bulletlist]

  • Klik op Receive HTTP Request.
  • Kies bij Method GET en vul bij Relative URL  de URL “requestpayment” in.

[/bulletlist]

Logic_Apps_BizTalkServices5c

 

 

 

 

 

 

 

[bulletlist]

  • Klik op het vinkje.
  • Voeg hierna nog een HTTP Listener Action toevoegen. Deze wordt dan gebruikt om een repsonse terug te sturen na het triggeren van de eerste Http Listener.
  • Selecteer Send http Response en kies bij Request Id: Receive http Request Request Id, bij Content:Receive http Request Content (voor het testen van deze App stuur ik de request message weer terug, zodat ik kan zien in mijn Client Applicatie wat voor bericht er verstuurd is) en bij Status Code vul je 200 in. Klik op het groene vinkje.

[/bulletlist]

Logic_Apps_BizTalkServices5d

 

 

 

 

 

 

 

[bulletlist]

  • Voeg hierna de BizTalk JSON Encoder toe. Deze vind je ook aan de rechterkant, onder API Apps en dan onder de Resource group. Vul als RootNode PaymentRequest in en alsNamespace: Ordina.PaymentRequest. Kies bij de JSON input string voor Receive Http Request Content. Klik op het groene vinkje.

[/bulletlist]

Logic_Apps_BizTalkServices5e

 

 

 

 

 

 

 

[bulletlist]

  • Voeg hierna de BizTalk XPath Extractor toe.
  • Kies Extract Using XPath
  • Bij XPath vul je de volgende waarde in: /*[local-name()=’PaymentRequest’]/*[local-name()=’Amount’]
  • Bij Input Xml kies je voor JSON String to XML.
  • Klik op het groene vinkje.

[/bulletlist]

Logic_Apps_BizTalkServices5f

 

 

 

 

 

 

 

[bulletlist]

  • Voeg de SMTP Connector toe aan de Designer. Vul de gegevens in van je emailprovider.
  • Kies Send Email. Klik daarna op de drie puntjes en kies Add a condition to be met.

[/bulletlist]

Logic_Apps_BizTalkServices5g

 

 

 

 

 

 

 

[bulletlist]

  • Vul bij Condition het volgende in: @greater(int(body(‘xpathextractor’).Result),100)
  • Vul de rest van de gegevens van de Connector in.

[/bulletlist]

Logic_Apps_BizTalkServices5h

 

 

 

 

 

 

 

[bulletlist]

  • Voeg nogmaals een SMTP Connector toe aan de Designer en vul dezelfde emailgegevens in als hierboven. Klik daarna op de drie puntjes en kies Add a condition to be met en vul bij de condition het volgende in: @equals(int(body(‘xpathextractor’).Result),100). Voor de gevallen dat het bedrag gelijk is aan 100, moet n.l. ook een email verstuurd worden.
  • Voeg de Azure Storage Blob Connector toe. Selecteer Upload Blob. Vul bij Blob Pathberichten in en kies bij Content voor recieve Http Request Content. Laat de rest op de standaard waardes staan. Klik op het groene vinkje.

[/bulletlist]

Logic_Apps_BizTalkServices5i

 

 

 

 

 

 

 

[bulletlist]

  • Klik daarna op de drie puntjes en kies Add a condition to be met en vul bij de condition het volgende in: @less(int(body(‘xpathextractor’).Result),100). Voor de gevallen dat het bedrag lager is dan 100, moet er een Blob item aagemaakt worden. Klik weer op het groene vinkje.

[/bulletlist]

Logic_Apps_BizTalkServices5j

 

 

 

 

 

 

 

[bulletlist]

  • Klik links boven in het scherm op Save. De Logic App is nu klaar.

[/bulletlist]

 

MVC Applicatie opzetten en deployen in Azure

Het declaratieformulier is een MVC applicatie die als Web App gehost wordt in Azure. Deze applicatie roept de Logic App aan door de volledige URL (incl. de relatieve URL van de HTTP Listener API) aan te roepen.

Azure SDK 2.6 Downloaden

Voor dit artikel maak ik gebruik van de Azure SDK 2.6 voor Visual Studio 2013. Die kan je hier downloaden: http://go.microsoft.com/fwlink/?LinkId=534215

Opzetten Visual Studio Project

[bulletlist]

  • Open Visual Studio 2013 en ga naar New Project -> Cloud -> ASP.NET Web Application. Geef de applicatie een naam en klik op Ok.

[/bulletlist]

Logic_Apps_BizTalkServices6

 

 

 

 

 

[bulletlist]

  • Er wordt een pop-up geopend. Selecteer de Empty template, vink het vakje MVC aan en klik op Ok.

[/bulletlist]

Logic_Apps_BizTalkServices7

 

 

 

 

 

[bulletlist]

  • Er wordt een popup geopend om in te loggen in Microsoft Azure. Klik op de knop Sign inen vul de gegevens in van je Azure Account.

[/bulletlist]

 

Logic_Apps_BizTalkServices8

 

 

 

 

 

[bulletlist]

  • Na het inloggen wordt er een scherm geopend waarin je de Web App kan configureren. Je kan de standaard naam hier laten staan of een nieuwe naam invullen.
  • Bij App Service Plan selecteer je een bestaande App Service plan of kun je een nieuwe aanmaken. Voor dit voorbeeld heb ik het App Service Plan gekozen die ik in mijn artikel over App Service Plans heb aangemaakt: http://www.spcnl.nl/2015/06/azure-logic-apps-azure-app-service-plans/
  • De Resource Group en de Regio worden na het selecteren van het App Service Plan automatisch ingevuld.
  • Selecteer bij de Database Server “No Database. Daar maken we geen gebruik van.

[/bulletlist]

Logic_Apps_BizTalkServices9

 

 

 

 

 

 

[bulletlist]

  • Klik op Ok. Het project wordt aangemaakt.

[/bulletlist]

Web API Client Libraries installeren

Gebruik NuGet Package Manager o.m de Web API Client libraries te installeren.

[bulletlist]

  • Ga naar Tools -> Library Manager -> Package Manager Console.
  • Type daar het volgende in:

[/bulletlist]

[sourcecode language=”csharp”]
Install-Package Microsoft.AspNet.WebApi.Client
[/sourcecode]

Declaratieformulier opzetten

Model Class toevoegen

[bulletlist]

  • Klik met je rechtermuisknop op de Model map in de Solution Explorer en kies Add -> Class.
  • Geef de class de naam PaymentRequest
  • Voeg de volgende properties toe aan de PaymentRequest Class:

[/bulletlist]

[sourcecode language=”csharp”]
public class PaymentRequest
{
[Required]
[Key]
[Display(Name = “Titel”)]
public String Title { get; set; }
[Required]
[Display(Name = “Naam”)]
public String FullName { get; set; }
[Required]
[Display(Name = “Bedrag”)]
public String Amount { get; set; }
[Required]
[Display(Name = “Datum”)]
public DateTime Date { get; set; }
[Required]
[Display(Name = “Omschrijving”)]
public String Description { get; set; }
}
[/sourcecode]

[bulletlist]

  • Click op Build -> Build Solution

[/bulletlist]

 

Controller toevoegen

[bulletlist]

  • Klik met de rechtermuisknop op de Controller map in de Solution Explorer en kies Add -> Controller.
  • Kies MVC5 Controller with read / write actions en klik op Add.

[/bulletlist]

Logic_Apps_BizTalkServices10

 

 

 

 

 

[bulletlist]

  • Vul bij Controller name RequestPaymentController in en klik op Add.

[/bulletlist]

 

View toevoegen

Bij het aanmaken van de Controller is er automatisch een map met de naam RequestPaymentaangemaakt in de Views map.

[bulletlist]

  • Klik met de rechtermuiskop op de RequestPayment map en klik op Add -> View.
  • Vul de onderstaande waardes in om de View aan te maken:

[/bulletlist]

Logic_Apps_BizTalkServices11

 

 

 

 

[bulletlist]

  • Klik op Add.
  • Verwijder de code uit de View en voeg het onderstaande toe:

[/bulletlist]

[sourcecode language=”csharp”]
@model Ordina.PaymentRequest.Models.PaymentRequest
@{
ViewBag.Title = “Create”;
}

Create

@using (Html.BeginForm())
{
@Html.ValidationSummary(true)
@Html.AntiForgeryToken()

Payment Request


@Html.LabelFor(model => model.Title, htmlAttributes: new { @class = “control-label col-md-2” })

@Html.EditorFor(model => model.Title, new { htmlAttributes = new { @class = “form-control” } })
@Html.ValidationMessageFor(model => model.Title, “”, new { @class = “text-danger” })

@Html.ValidationSummary(true, “”, new { @class = “text-danger” })

@Html.LabelFor(model => model.FullName, htmlAttributes: new { @class = “control-label col-md-2” })

@Html.EditorFor(model => model.FullName, new { htmlAttributes = new { @class = “form-control” } })
@Html.ValidationMessageFor(model => model.FullName, “”, new { @class = “text-danger” })

@Html.LabelFor(model => model.Amount, htmlAttributes: new { @class = “control-label col-md-2” })

@Html.EditorFor(model => model.Amount, new { htmlAttributes = new { @class = “form-control” } })
@Html.ValidationMessageFor(model => model.Amount, “”, new { @class = “text-danger” })

@Html.LabelFor(model => model.Date, htmlAttributes: new { @class = “control-label col-md-2” })

@Html.EditorFor(model => model.Date, new { htmlAttributes = new { @class = “form-control” } })
@Html.ValidationMessageFor(model => model.Date, “”, new { @class = “text-danger” })

@Html.LabelFor(model => model.Description, htmlAttributes: new { @class = “control-label col-md-2” })

@Html.EditorFor(model => model.Description, new { htmlAttributes = new { @class = “form-control” } })
@Html.ValidationMessageFor(model => model.Description, “”, new { @class = “text-danger” })

@Html.ValidationSummary(true)

}



[/sourcecode]

 

RouteConfig Aanpassen

Open de Routeconfig.cs en vervang de code met het onderstaande:

[sourcecode language=”csharp”]
routes.MapRoute(
name: “Default”,
url: “{controller}/{action}/{id}”,
defaults: new { controller = “PaymentRequest”, action = “Create”, id = UrlParameter.Optional }
);
[/sourcecode]

 

Http Listener URL

Om de Logic App uit te kunnen voeren vanuit een Client Applicatie heb je de Endpoint URL nodig van de HTTP Listener. Deze URL kan je uit de instellingen halen in de Azure Management Portal.

[bulletlist]

  • Ga in de Azure Preview Portal naar Bladeren – > API Apps en selecteer dan de Http Listener.

[/bulletlist]

Logic_Apps_BizTalkServices12

 

 

 

 

 

 

[bulletlist]

  • Klik op de Host URL -> URL. Kopieer deze URL in een tekstbestand

[/bulletlist]

Logic_Apps_BizTalkServices13

 

 

 

 

 

 

Controller Aanpassen

[bulletlist]

  • Kopieer onderstaande code in de PaymentRequestController:

[/bulletlist]

[sourcecode language=”csharp”]
using System;
using System.Net.Http;
using System.Net.Http.Headers;
using System.Web.Mvc;
namespace Ordina.RequestPayment.Controllers
{
public class PaymentRequestController : Controller
{
// GET: PaymentRequest
public ActionResult Index()
{
return View();
}
// GET: PaymentRequest/Create
public ActionResult Create()
{
return View();
}
// POST: PaymentRequest/Create
[HttpPost]
public ActionResult Create(Ordina.PaymentRequest.Models.PaymentRequest request)
{
try
{
if (ModelState.IsValid)
{
using (var client = new HttpClient())
{
client.BaseAddress = new Uri(“https://httplistenerba1382aa92944c53b7ed76e782d81722.azurewebsites.net”);
client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue(“application/json”));
HttpResponseMessage response = client.PostAsJsonAsync(“requestpayment”, new Ordina.PaymentRequest.Models.PaymentRequest()
{
Title = request.Title,
FullName = request.FullName,
Amount = request.Amount,
Date = request.Date,
Description = request.Description
}).Result;
if (response.IsSuccessStatusCode)
{
return View();
}
else {
ModelState.AddModelError(“”, “Declaratie kon niet verstuurd worden.”);
return View();
}
}
}
else
{
ModelState.AddModelError(“”, “Er is iets mis met de pagina.”);
return View();
}
}
catch
{
ModelState.AddModelError(“”, “Er is iets mis .”);
return View();
}
}
}
}
[/sourcecode]

[bulletlist]

  • Bij client.BaseAddress vul je de URL van de HTTP Listener in die je in de vorige stap in een tekstbestand gekopieerd hebt.

[/bulletlist]

MVC applicatie deployen in Azure

De applicatie is klaar om naar Azure gedeployed te worden.

[bulletlist]

  • Klik met je rechtermuisknop op het project in de Solution Explorer en klik op Publish

[/bulletlist]

Logic_Apps_BizTalkServices14

 

 

 

 

 

 

 

[bulletlist]

  • Er wordt een pop-up geopend. Behoud de standaard waarden en klik op Publish.

[/bulletlist]

Logic_Apps_BizTalkServices15

 

 

 

 

 

 

[bulletlist]

  • De MVC applicatie wordt gedeployed in Azure en de website wordt automatisch geopend in de browser. Vul het declaratieformulier en klik op de Create knop. De Logic App wordt aangeroepen vanuit de applicatie.

[/bulletlist]

 

Source Code

De source code van de MVC applicatie kan gedownload worden van Github:https://github.com/SjoukjeZaal/Ordina.RequestPayment

Samenvatting

In dit artikel heb ik laten zien hoe je BizTalk Services onderdelen kan gebruiken in je Logic App. Ik heb een eenvoudig scenario uitgewerkt waarmee een JSON bericht geconverteerd wordt naar een XML bericht en er op basis van een ingevulde waarde bepaald wordt of het bericht opgeslagen wordt in Azure Blob storage, of dat er een email verstuurd wordt.

You Might Also Like

1 reactie

  • avatar
    Reply Azure Logic Apps: Introductie | SP&C NL 9 februari 2017 at 10:42

    […] Azure Logic Apps: BizTalk Services technologie gebruiken in Logic Apps […]

  • Plaats een reactie