2. Blog post: MyShuttle.biz ASP.NET 5 Web Apps and Services<\/strong><\/a><\/em><\/p>\n 3. Blog Post: MyShuttle.biz and Cross-platform Mobile Development of native apps for iOS, Android and Windows with .NET and Xamarin<\/strong><\/a><\/em><\/p>\n 4. Blog Post: MyShuttle.biz and multi device development of hybrid apps for iOS, Android and Windows with Visual Studio Tools for Apache Cordova<\/strong><\/a><\/em><\/p>\n 5. (Current post) Blog post: MyShuttle.biz Azure backend integration with LOB services (Invoicing, O365 API and SalesForce API)<\/strong><\/a><\/em><\/strong><\/em><\/p>\n Myshuttle.biz mobile apps are not just isolated mobile apps. As you’d guess, they are connected to an “intelligent” backend in order to handle persistent data and certain business logic based on services and a database.<\/p>\n Most of the MyShuttle apps consume the same ASP.NET 5 Web API services that are also used for the SPA web application for all the CRUD operations (Read\/Update data related to the main entities like Customers, Drivers, Vehicles, etc.), but those services and how to deploy to Azure was described in my post that focuses on ASP.NET 5<\/a>.<\/p>\n In this current blog post the focus is on the Azure Mobile Service, Azure Push notifications configuration in Azure Notifications Hub and also as probably the most important topic here, the WebJob and the integration with external LOB services and API like )365 API and Salesforce REST API. You can see these topics highlighted in yellow (tagged with the number 2) in the image below.<\/p>\n In this second sub-scenario is where you can understand the process that is being triggered from the driver’s app (Cordova app) when submitting the invoice data into the Azure Mobile Service which is then uploading data to Salesforce CRM and creating\/submitting a message into an Azure queue so the .PDF invoice is created and submitted to O365 in an asynchronous way.<\/p>\n But before getting into the detailes of the implementation and code, let’s provide the details on how you can deploy these services into your own infrastructure in Azure.<\/p>\n The requirements in order to set these services in Azure are the following:<\/p>\n – 1.<\/strong> Visual Studio 2015 Preview<\/strong><\/p>\n – 2. An Azure subscription. <\/strong>Any Azure subscription, either a trial Azure subscription<\/a> or an Azure subscription provided for free as a benefit from your MSDN subscription<\/a>, etc., would be good to go.<\/p>\n – 3. An Office 365 Account. <\/strong>See Get Office 365 Trial<\/a><\/p>\n – 4. A Salesforce Account (OPTIONAL)<\/strong>. See Get Safesfoce trial<\/a><\/p>\n – 5. A Bing Maps token key. <\/strong>Getting a Bing Maps key<\/a><\/p>\n We’re using an Azure Storage container where we’re storing a .PDF that will be used as template or baseline for the invoices to be generated on the fly by the System, later on.<\/p>\n 1. Create a new Azure Storage account for the MyShuttle’s demos<\/strong><\/p>\n You first need to have an Azure Storage account created to be used by MyShuttle. If you don’t have it, let’s create one, name it something related to MyShuttle and storage, like in the following step in the Azure portal, https:\/\/manage.windowsazure.com\/microsoft.onmicrosoft.com#Workspaces\/StorageExtension\/storage<\/a>:<\/p>\n Or you could also create it from the new Azure portal (codename “Ibiza”) at http:\/\/portal.azure.com<\/a><\/p>\n NOTE: Use different names than the ones shown here, as they are already in use.<\/p>\n 2. Create a public container called “myshuttleinvoice” within the Azure Storage account<\/strong><\/p>\n Now I create the container called “myshuttleinvoice” like in the following screenshot.<\/p>\n Note that we need a public container rather than a private container.<\/p>\n Using the current Azure portal:<\/p>\n Or using the new Azure portal (“Ibiza”):<\/p>\n 3. Copy our invoiceform.pdf template to the container<\/strong><\/p>\n Copy our invoiceform.pdf template<\/strong><\/a> that you can download from here<\/a>. You can upload files to a container by using a tool like the following:<\/p>\n – Azure Explorer<\/a> (from Cerebrata – )<\/p>\n – Azure Management Studio<\/a> (from Cerebrata – Licensed and trial)<\/p>\n – Azure Storage Explorer<\/a> (Free and Open Source at CODEPLEX)<\/p>\n In this case I used “Azure Storage Explorer” which is Open Source, but the Cerebrata tools are very powerful and cover many features, especially Azure Management Studio.<\/p>\n As shown in the architecture diagram up above, MyShuttle backend uses an Azure WebJob<\/strong> in order to read the Order info from an Azure Queue and then create an Order .PDF file on the fly and upload it to a SharePoint Library in O365. But, any Azure WebJob<\/strong> needs to be hosted and deployed thru an Azure WebSite<\/strong>. In this case, this WebSite won’t have any logic, it is just a placeholder we need to deploy the WebJob. Sure, you could ask why we are not using the ASP.NET 5 WebSite. It is just because it is using a BETA version and regular WebJobs are still not supported in ASP.NET WebSites.<\/p>\n 1. Create the Azure WebSite in your Azure subscription<\/strong><\/p>\n So, I create an empty Azure WebSite, in my case I called it “MyShuttleJobHost”. You could call it differently. Here’s how I created it from the new Azure Portal (“Ibiza”).<\/p>\n 2. Add a config key to the WebSite’s App Settings in the Azure portal.<\/strong><\/p>\n That key will be used by our logic:<\/p>\n Key name –> pdf::invoiceform<\/p>\n Key value –> http:\/\/YOUR_STORAGE.blob.core.windows.net\/myshuttleinvoice\/invoiceform.pdf<\/a><\/p>\n If you are not familiar with Azure WebSites, check this out: http:\/\/azure.microsoft.com\/en-us\/documentation\/articles\/web-sites-dotnet-get-started\/<\/a><\/p>\n 3. Add two custom Connection Strings.<\/strong><\/p>\n Two custom conn strings with the same value both:<\/p>\n ConnString1 name –> AzureWebJobsDashboard<\/p>\n ConnString2 name –> AzureWebJobsStorage<\/p>\n Key value for both conn strings –> DefaultEndpointsProtocol=https;AccountName=YOUR_STORAGE;AccountKey=ACCOUNT_KEY<\/p>\n As shown in the architecture diagram up above, MyShuttle backend uses an Azure Mobile Service <\/strong>which is in charge of receiving the requests from the Cordova app (either running on Android, iOS or Windows Phone). This Azure Mobile Service receives the Order data thru HTTP, then it submits the customer’s data into a Salesforce CRM and finally it creates an Azure message and puts that message in the Azure queue so the WebJob will pick it up later.<\/p>\n If you are not familiar with Azure Mobile Services, check this info out: http:\/\/azure.microsoft.com\/en-us\/documentation\/articles\/mobile-services-dotnet-backend-windows-store-dotnet-get-started\/<\/a><\/p>\n 1. Create the Azure Mobile Service in your Azure subscription<\/strong><\/p>\n For now, we just need to create the Mobile Service in the subscription as a place holder. We will publish the ASP.NET code into Azure later on. Right now you just need to create the Mobile Service in Azure as shown in the screenshot. You can name it the way you’d like, although you’ll need to remember that name and URL when configuring the mobile apps’ URLs that they consume.<\/p>\n In this case, Mobile Services is still not available in the new Azure Portal (“Ibiza”), so I’m using the traditional Azure portal.<\/p>\n Select the Azure region related to your geography, backend as .NET and leave blank the “CONFIGURE ADVANCED PUSH SETTINGS” since we’ll configure the push notification and Push Notification Hub later on.<\/p>\n When advancing to the next step in the wizard, select your already existing SQL DB that was created for the ASP.NET 5 MyShuttle Web Site<\/strong> (Check my blog post about ASP.NET 5 and MyShuttle, as you need to have those services running as the firt step). Also, you need to specify the user that you are using for that database which is specified in the ASP.NET 5 Web Site connection string that you are using. Check the key EntityFramework:MyShuttleContext:ConnectionStringKey that you should have in your ASP.NET 5 Azure WebSite for that.<\/p>\n Wait a few minutes until the Azuer Mobile Service is created.. Then, if you go to the Mobile Service properties you’d be able to check the “by default” conn strings based on the data you provided (SQL DB most of all).<\/p>\n But you also need to add 2 new app settings<\/strong> in the mobile service config. Right over the conn-string section is where you’ll find the app settings section:<\/p>\n Key 1 name –> MS_TableConnectionString<\/strong><\/p>\n Key 1 value –>Data Source=YOUR_SQL_DB_SERVER<\/strong>.database.windows.net;Initial Catalog=myshuttlebiz_db<\/strong>;User ID=MyShuttleUser<\/strong>;Password=YOUR_PASSWORD<\/strong>;Asynchronous Processing=True;TrustServerCertificate=False;<\/p>\n Key 2 name –> AzureWebJobsStorage<\/strong><\/p>\n Key 2 value –> DefaultEndpointsProtocol=http;AccountName=YOUR_STORAGE_NAME<\/strong>;AccountKey=YOUR_KEY<\/strong><\/p>\n The key 2 (value for AzureWebJobsStorage<\/strong>) should be consistent with the storage account and key that you created at the beginning of this blog post.<\/p>\n So this is how I have my app settings in my Azure Mobile Service.<\/p>\n These conn-strings (MS_TableConnectionString) will be unified in our next version targeting VS 2015 CTP5 and VS 2015 RC, by the way. <\/p>\n Until now we just have created the “place-holders” in Azure, but we actually need to publish our assemblies, the actual bits generated by our code in Visual Studio.<\/p>\n 1. Open the solution named 05_Demos_Azure_ConnServices.sln<\/strong><\/p>\n 2. For the Salesforce integration<\/strong> and once you have a valid SalesForce account (could be a trial), set the following key\/value pairs in the Web.config file of the MyShuttle.MobileServices project.<\/p>\n – Salesforce:ConsumerKey<\/p>\n – Salesforce:Username<\/p>\n – Salesforce:Password<\/p>\n – Salesforce:ConsumerSecret<\/p>\n – Salesforce:AccountId<\/p>\n Like in the following Web.config.<\/p>\n If you don’t want to have the Salesforce integration, you could comment the following code in the PostRide()<\/strong> method at the RideController.cs<\/strong> class.<\/p>\n Here’s the code you can comment if you don’t want the Salesforce integration.<\/p>\n 3. When using VS 2015 Preview (Nov.2014)<\/strong> (this is just to fix a bug in the VS 2015 Preview that loses the reference to the nugget source) you might need to re-add the nugget.org package source<\/strong> so you can get all the nugget package references, download the missing references and compile the project properly:<\/p>\n 4. Compile the MyShuttle.MobileServices<\/strong> Azure Mobile Services project.<\/p>\n 5. Deploy the MyShuttle.MobileServices<\/strong> project to Azure into the Azure Mobile Service “place holder” that you created previously: http:\/\/YOUR_MOBILE_SERVICE_NAME.azure-mobile.net\/<\/a><\/p>\n Right click on the Mobile Service project and hit on the “Publish” menu option.<\/p>\n In the wizard, let’s create a new profile by connecting and downloading that info directly from our Azure subscription, so that you’ll use it in the future when publishing the Mobile Service.<\/p>\n Select the “Microsoft Azure Mobile Services” option.<\/p>\n You might need to log in into Microsoft Azure with your Microsoft Account, then select the Azure Mobile Service that you created in the portal, so you have a similar screen to the following.<\/p>\n It will download the profile settings and you should get to the following screen with all the connection data downloaded from the Azure portal.<\/p>\n Press the “Next” button and select “Debug – Any CPU” as Configuration so you’ll be able to remotely debug the Mobile Service in Azure’s cloud.<\/p>\n Leave the rest as it is.<\/p>\n Press “Next” and “Publish”.<\/p>\n You should see a “Web Publish Activity” in Visual Studio similar to the following.<\/p>\n And a browser open with the default Azure Mobile Service page.<\/p>\n Now, in order to test the Mobile Service, we need to configure the client app so it points and consumes this specific Mobile Service.<\/p>\n Before trying with the client mobile apps, I can test my Azure Mobile Services with any HTTP tool. In my case, I like to use Google POSTMAN tool, since it is pretty simple.<\/p>\n As you can see, we need to provide our Azure Mobile Service key (X-ZUMO-APPLICATION<\/strong>) that you can get from the Azure portal within your Azure Mobile Service “MANAGE KEYS” section, and of course, any REST service method\/action like a simple GET method as https:\/\/YOUR_MOBILE_SERVICE.azure-mobile.net\/Tables\/Employee\/ <\/a><\/p>\n Testing my deployed Azure Mobile Services with POSTMAN<\/strong><\/p>\n If you provided the right data and your service is working against the SQL DB, you should get info like I do in that screenshot.<\/p>\n This client apps is the Cordova client app (MyShuttle mobile app for drivers), in this case.<\/p>\n 1. Open the 03_Demos_Cordova.sln solution<\/strong><\/p>\n 2. Open the app—>modules—>core—>services–>settingsService.ts<\/strong> TypeScript file in order to provide the Mobile Service URL and security settings.<\/p>\n 3. Within the settingsService.ts<\/strong> file, update the following config with your own data:<\/p>\n this.bingMapsKey = ‘YOUR_BING_MAPS_TOKEN_KEY<\/strong>‘; this.storageService.getValue(‘serviceUrl’, ‘https:\/\/YOUR_MOBILE_SERVICE<\/strong>.azure-mobile.net\/’);<\/p>\n 4. Save the settingsService.ts<\/strong> file<\/p>\n 5. Select the Microsoft VS Emulator Android Phone<\/p>\n 6. Hit F5, and you should get the Cordova app running in the Microsoft Android Emulator.<\/p>\n 7. You can stop de debugger, but keep the emulator open, as we’ll use the Cordova app again in order to invoke our mobile service<\/p>\n Let’s debug the AZURE MOBILE SERVICE<\/strong> before moving to a different part of the architecture, so we make sure that our Cordova client app is really consuming our Azure Mobile Service deployed in Azure’s cloud!.<\/p>\n 1. Go back again to VS and the solution 05_Demos_Azure_ConnServices.sln.<\/strong><\/p>\n 2. Put a breakpoint in the RideController.cs<\/strong>, method PostRide(Ride item)<\/strong>.<\/p>\n 3. Open the Server Explorer window within Visual Studio and search for the MOBILE SERVICE within your Azure account.<\/p>\n Right click on your Azure Mobile Service and select “Attach Debugger”. Wait a few seconds until it is ready and attached to the remote process in the Azure cloud!<\/p>\n 4. Go to Android emulator and execute the Cordova app and advance in the app until you can sign.<\/p>\n 5. and the hit the “Accept” button which is invoking the Mobile Service in Azure.<\/p>\n You should see the debugger stopping on the specified line in your Mobile Service!<\/p>\n <\/p>\n Before working with the WebJob to be deployed, you can check how the Azure queue messages are being stored in the queue.<\/p>\n Exploring the MyShuttle invoice<\/strong> messages in Azure queues with the Cerebrata Azure Management Studio<\/strong> tool.<\/p>\n![\"image\"](\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/32\/2019\/03\/3581.image_thumb_44C51EC8.png\" "\\"image\\"")
<\/a><\/p>\n![\"\"](\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/32\/2019\/03\/3173.image_55029467.png\")
<\/p>\nSetting up the backend services in Microsoft Azure<\/h2>\n
Creating the Azure Storage container<\/h2>\n
![\"image\"](\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/32\/2019\/03\/2234.image_thumb_423226DD.png\" "\\"image\\"")
<\/a><\/p>\n![\"image\"](\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/32\/2019\/03\/5314.image_thumb_75930B9B.png\" "\\"image\\"")
<\/a><\/p>\n![\"image\"](\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/32\/2019\/03\/0820.image_thumb_3E4C8460.png\" "\\"image\\"")
<\/a><\/p>\n![\"image\"](\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/32\/2019\/03\/1031.image_thumb_0BE8B0E1.png\" "\\"image\\"")
<\/a><\/p>\n![\"image\"](\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/32\/2019\/03\/7752.image_thumb_6C125DA9.png\" "\\"image\\"")
<\/a><\/p>\nCreating the Azure WebSite that will host the Azure WebJob<\/h2>\n
![\"image\"](\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/32\/2019\/03\/8463.image_thumb_5FD5DB39.png\" "\\"image\\"")
<\/a><\/p>\n![\"image\"](\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/32\/2019\/03\/3276.image_thumb_34914432.png\" "\\"image\\"")
<\/a> <\/p>\n![\"image\"](\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/32\/2019\/03\/0830.image_thumb_4284D0EB.png\" "\\"image\\"")
<\/a><\/p>\nCreating the Azure Mobile Service that receives requests from the Cordova app in mobile devices<\/h2>\n
![\"image\"](\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/32\/2019\/03\/3806.image_thumb_30E214C1.png\" "\\"image\\"")
<\/a><\/p>\n![\"image\"](\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/32\/2019\/03\/3223.image_thumb_2D380F54.png\" "\\"image\\"")
<\/a><\/p>\n![\"image\"](\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/32\/2019\/03\/3288.image_thumb_1C10AB17.png\" "\\"image\\"")
<\/a><\/p>\n![\"image\"](\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/32\/2019\/03\/5355.image_thumb_1AEF4892.png\" "\\"image\\"")
<\/a><\/p>\nPublishing the Azure Mobile Service .NET assemblies from Visual Studio into the Azure Mobile Service“place-holder”<\/h2>\n
Deploying and Debugging the MyShuttle Azure Mobile Services project<\/h3>\n
![\"image\"](\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/32\/2019\/03\/3326.image_thumb_38BC8926.png\" "\\"image\\"")
<\/a><\/p>\n![\"image\"](\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/32\/2019\/03\/7120.image_thumb_11823FF1.png\" "\\"image\\"")
<\/a><\/p>\n![\"image\"](\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/32\/2019\/03\/5008.image_thumb_7F39792E.png\" "\\"image\\"")
<\/a><\/p>\n![\"image\"](\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/32\/2019\/03\/5582.image_thumb_1ADE0525.png\" "\\"image\\"")
<\/a><\/p>\n![\"image\"](\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/32\/2019\/03\/7462.image_thumb_148748F3.png\" "\\"image\\"")
<\/a><\/p>\n![\"image\"](\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/32\/2019\/03\/7167.image_thumb_6A730E0D.png\" "\\"image\\"")
<\/a><\/p>\n![\"image\"](\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/32\/2019\/03\/4428.image_thumb_71261790.png\" "\\"image\\"")
<\/a><\/p>\n![\"image\"](\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/32\/2019\/03\/8231.image_thumb_45E18089.png\" "\\"image\\"")
<\/a><\/p>\n![\"image\"](\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/32\/2019\/03\/2476.image_thumb_3398B9C7.png\" "\\"image\\"")
<\/a><\/p>\n![\"image\"](\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/32\/2019\/03\/3060.image_thumb_0C5E7092.png\" "\\"image\\"")
<\/a><\/p>\n![\"image\"](\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/32\/2019\/03\/3377.image_thumb_2802FC88.png\" "\\"image\\"")
<\/a><\/p>\n![\"image\"](\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/32\/2019\/03\/4861.image_thumb_00C8B353.png\" "\\"image\\"")
<\/a><\/p>\nTest the Mobile Service with a Web Service tool<\/h3>\n
![\"image\"](\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/32\/2019\/03\/5670.image_thumb_362C13FB.png\" "\\"image\\"")
<\/a><\/p>\nConfigure the Cordova client mobile app with the right Services’ URL to consume<\/h3>\n
![\"image\"](\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/32\/2019\/03\/4431.image_thumb_75F5FA80.png\" "\\"image\\"")
<\/a><\/p>\n![\"image\"](\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/32\/2019\/03\/7673.image_thumb_7CA90403.png\" "\\"image\\"")
<\/a><\/p>\n
this.mobileServiceKey = ‘YOUR_MOBILE_SERVICE_KEY<\/strong>‘;
this.realTimeNotificationsServerUrl = ‘http:\/\/YOUR_ASPNET5_SITE<\/strong>.azurewebsites.net\/’;<\/a><\/p>\n<\/a><\/p>\n
![\"image\"](\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/32\/2019\/03\/5430.image_thumb_7619224A.png\" "\\"image\\"")
<\/a><\/p>\nDEBUGGING the AZURE MOBILE SERVICE<\/strong><\/h3>\n
![\"image\"](\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/32\/2019\/03\/8424.image_thumb_6603FA9F.png\" "\\"image\\"")
<\/a><\/p>\n![\"image\"](\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/32\/2019\/03\/1057.image_thumb_4AC548AA.png\" "\\"image\\"")
<\/a><\/p>\n![\"image\"](\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/32\/2019\/03\/4382.image_thumb_271080CB.png\" "\\"image\\"")
<\/a> ![\"image\"](\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/32\/2019\/03\/7041.image_thumb_5FBB2AD8.png\" "\\"image\\"")
<\/a><\/p>\n![\"image\"](\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/32\/2019\/03\/2766.image_thumb_4248D9CC.png\" "\\"image\\"")
<\/a><\/p>\nChecking the messages being created and published in the Azure queues<\/h3>\n
![\"image\"](\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/32\/2019\/03\/5047.image_thumb_5DDDB96A.png\" "\\"image\\"")
<\/a><\/p>\n![\"image\"](\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/32\/2019\/03\/2816.image_thumb_6B43CC70.png\" "\\"image\\"")
<\/a><\/p>\n