App Mashup Demo: Azure Cognitive Services and Azure Maps

Somewhat recently, Azure came out with Bing Local Search, an API under the Cognitive Services umbrella of  services.  Bing Local Search, as you would expect, allows you to search local businesses from your app using a REST API.  I was interested in trying it out, and started thinking of a way to incorporate it into an app.  Then I thought, hey, why not make a web app mashup using ASP.NET Core?  I could use Azure Maps to plot the results on a map.  So that’s what I did.  I built an  An app mashup using Azure Cognitive Services and Bing Local Search, and I’d like to share it with you!

This app is only a demo, so don’t expect it to be highly engineered.   I posted the code on GitHub so you can run it yourself with your own API Keys.  I even hosted the app here so you can try it out.  The hosted version has fake data and does not call an API.   It is there just to let you test drive the UI.   Let’s dive in to the details.  Here’s a screenshot followed by a walk-through.

The Bing Local Search/Azure Maps Mashup

The UI

I built the UI from a really neat free template by 3rdWaveMedia

What Does it Do?

It searches restaurants in the Chicago area.

Services Used and How

Search restaurants by keyword description, such as ‘Chinese’ or ‘Mexican’.  This calls out to the Bing Local Search API.   Since the theme of the app is Chicago restaurants, I pass in the location of Chicago in the app code behind the scenes.  The results are then shown on the list as well as plotted on a map.  Here’s where the mashup part kicks in. To plot the results on a map, I use Azure Maps.  First, the map itself on the page is an Azure Maps map control .  To plot the search results on the map, I use the client-side Javascript library. Each result from Bing Local Search contains a Latitude and Longitude, so I simply loop through the results and add a map marker to the map at the business location. I throw a pop up on the marker for good measure. You can get pretty fancy with pop ups, and Azure Maps in general.  I will probably do some more posts as I try out more features.

Service Setup

To set up the Azure services you’ll need to go to the Azure portal and set up a new Bing Local Search Cognitive Services instance.  It looks like the only pricing tier that supports Bing Local Search is S10, so make sure to select that one. Once you create your instance, you’ll get an API endpoint and Key.

For the Azure Maps account, I set one up using the free tier.  Once created, you’ll also get an API key for that service.

To use the keys in the app, I take advantage of the User Secrets feature of ASP.NET Core.  It keeps the code free of API Keys.  If you download the code and want to run it with your own keys, right click the project and select ‘Manage User Secrets’.    Copy the snippet below and paste it in the file.  Replace the placeholders with your keys and Bing API endpoint.

So there you have it.  I might built on this in the future, adding features like making the pop ups fancier.   Feel free to try out the online demo, and download the code.  Make sure to come back for more blog posts like this if you like Azure and the Microsoft stack in general.

 

 

AI Assisted Intellisense with Visual Studio Intellicode

I tried Visual Studio Intellicode and am super impressed. If you like saving time, this easy to use Visual Studio add in is the way to go.  This Microsoft explanation gives a great overview:  “IntelliCode saves you time by putting what you’re most likely to use at the top of your completion list. IntelliCode recommendations are based on thousands of open source projects on GitHub each with over 100 stars. When combined with the context of your code, the completion list is tailored to promote common practices.”

Image credit Microsoft

Basically Intellicode saves you time by putting the most likely code autocomplete suggestions at the top of your list as determined by Artificial Intelligence to be the most likely correct choice.  The AI behind the decision logic is from a model trained on thousands of GitHub projects.  Until now, that list has been alphabetical, so in the example image above, you would have to scroll down to the E’s if ‘EndsWith’ was what you wanted.  Sounds like not a big deal, but let me tell you, those couple of seconds add up.  I also find it fascinating and perhaps understated that AI is reaching into our code bases!  While autocomplete suggestion prioritization is an early benefit we can enjoy now, the things that make it possible have huge implications.  If you think about it, since we can now do things like identify that .ToList() is used most commonly in certain places, what other patterns can we learn from a collective code base?  Funny you should ask, this blog post from Microsoft research dives pretty heavily into that topic.   One notable future application is scanning for potential issues in code when you check your source code in.

Intellicode can be trained on your own code.  Open the Intellicode menu by choosing View > Other Windows > IntelliCode Model Management.  Next, click ‘Create New Model’.  Intellicode will train using your code as model data  (without sending your code to Microsoft).  It does so by collecting as Microsoft describes “only those elements of the code that are needed to create a model for recommending completion values. For example, it extracts the names of classes and methods and how often they’re called in different circumstances. The data used to train the model on your code is saved in a file which you can view in the “%TEMP%\Visual Studio IntelliCode” directory.  This data is sent to a service where the model is trained and passed back down to Visual Studio.

Give it a shot and start saving those precious seconds!

 

Azure App Service Deployment Slots Demystified

Have you ever wanted to beta test a feature of your web application to a subset of real production users? How about deploy different versions of the same application to a test environment? With Azure App Service Deployment Slots, you can. In this post, I’ll give you a quick, simplified tour. The key here is to not overthink it, as I admittedly did when first learning about them.

Get Started

Getting started is easy.

1. Navigate to your app Service

2. Select ‘Deployment Slots’ from the App Service Menu

3. Click ‘Add Slot’ to create a new deployment slot.

4. Name the deployment slot, and choose to clone settings from your original web app

5. Done! Well, mostly. You now have two deployment slots. Your original web app is sitting in its own slot called the production slot. Its running just as it always has, except in its own slot. All traffic continues to be routed to your original web application in this slot. The new slot you just created is a full fledged web app, complete with its own URL and its own config, empty and waiting for you to deploy code to it. Click on the new slot link and you’ll be taken to the management page of that slot. Notice it is exactly like a regular App Service management page. Its essentially its own application. From the management page, you can click the link displaying the URL of the app to navigate to the running application.

Swap them slots!

Deploy the code containing the features or version you want to test to the new slot. You can download the deployment profile for the new slot from the management page and use it for deploying from Visual Studio. When you’re ready, you can perform a swap of the two slots. Swapping slots at this point moves the new application into the old application’s slot, accessed at the old slot’s URL. The old application moves to the new slot, accessible at the new URL. Most importantly, there is no traffic interruption during swaps!

Traffic Routing

If you don’t want to full on swap slots, you can specify a percent of traffic routed to a slot under the slots management page. On saving, traffic is routed to the slot you configured according to the percentage you specified. Clients do stay on the slot they’re routed to for their entire session, persisted by cookies set on their initial request.

You can direct a client manually to a specific slot by setting a query parameter in a link provided in your app.
Set the x-ms-routing-name parameter value to ‘self’ to direct to the production slot, and to the name of the desired slot to route to the desired slot. Subsequent requests will be routed to the same specified slot.

Here’s an example as provided in the app service documentation that would route to the production slot:

appname.azurewebsites.net/?x-ms-routing-name=self”

and to a staging slot:

appname.azurewebsites.net/?x-ms-routing-name=beta”

You can use this feature to allow users to opt into certain features, then opt out.

There you have it, a swap knowledge snack.  Now say “How many slots could a wood chuck swap if a wood chuck could swap slots” fast 5 times.

Set a Platform Specific Label Font Size in Xamarin Forms

Here’s a quick post for anyone interested.  I had a hard time figuring out just how to set different font sizes for one or more labels depending on the platform.  Here’s how:

Create a resource dictionary for your page.  It could be at the app level too.

Assign the style to your label

Cheers!

Automated UI Testing with Azure DevOps and Selenium

If you’ve never done automated UI testing of your web apps, you’re in for a real treat!  You can visit your pages, click buttons, verify results, take  image snapshots, all automatically through code.  Your code actually controls a web browser that interacts with your site.  I’ve recently rediscovered its benefits and am vowing to up my UI testing game.  Why?  Better code through testing.  I’m not necessarily all in on Test Driven Development, but I’m after a certain set of results.  I want my tests to eventually do my thinking for me.   I can’t possibly remember all the little things I want to validate in every web app I write (many of them).  All the business logic, widgets, rules,  and customized niche stuff.  Best of all, its super easy in your ASP.NET MVC apps using MS Test and Selenium Webdriver.   This post will walk you through setting up your test code in your web solution, then executing that test as part of a build definition in Azure DevOps (formerly Visual Studio Online/ Visual Studio Team Services).  This last part, executing the tests in the cloud, is the best part.   Its hands free, automatic, all web based.  The results are easy to track for someone who can be a little disorganized at times.  I have a complete history of each test execution stored online all in the same place I live anyway, in Azure DevOps.

Get Started Writing Your UI Tests

UI testing is a vast universe of many wonders of which I’m not going to cover for this post.  You will see the most basic of unit tests here.   First, in Visual Studio, add a new project to your web app solution.  In the left menu, select .Net Core if you’re building a .Net Core web app, select Test if you’re building for .Net Framework.  In the middle pane, select the Unit Test Project option.  You’re unit test project will be added.

In your unit test project, add the Selenium Web Driver, and Selenium Web Driver Chrome Driver (or Firefox) Nuget packages.  The Selenium main package is responsible for core UI testing while the browser driver packages interface with the browser of your choice.

Your first test class is added automatically to the project.   The test class itself is decorated with the TestClass attribute.  You also get an automatically created test method decorated with the TestMethod attribute.  Both are required to trigger the MSTest framework.  Some other handy attributes you can use will help you set up and tear down your tests.  These are the TestInitialize and TestCleanup attributes respectively.  Methods decorated with the TestInitialize attribute run before any tests are executed, whereas methods decorated with the TestCleanup attribute run after all tests are executed.

Initialize Selenium Webdriver with your app URL in your TestInitialize method, and dispose of it in your TestCleanup method, as shown below. You’ll need a class level variable of type IWebDriver named driver.  Super important: when running these UI tests in Azure DevOps you have to init the driver with Environment.GetEnvironmentVariable(“ChromeWebDriver”) so the hosted agent can load it.

The Login method instructs the web driver how to log into my web app. I simply reference the html elements by id and tell it what values to enter.

After your init method, all the test methods labeled with the TestMethod attribute will be run and tracked individually in Azure DevOps.  My test method simply shows how to navigate to a URL and take a snapshot.   This one of the coolest features.  I can look back in my test history to see when a page broke.   The snapshots are saved to the cloud under each test result.

I recommend running the tests locally first (remove the environment variable parameter passed to the Chrome Driver constructor). Which brings us to our next part.

Run Your Tests in the Cloud

To get started, you’ll need a build pipeline or a build and deployment pipeline, depending on how you want to configure things.  Most times I just have a build pipeline that also releases to at least staging.  Creating one is beyond the scope of this article.  Add a test assemblies step to your pipeline after whatever step deploys your site.  Its under the tests tab in the add step pane.

When added, the step looks like this.

The great thing about it is that the step is configured correctly with the defaults.  Make sure the upload test attachments option is checked, and that the select tests using step has test assemblies selected.

View Your Results

Run your pipeline.  Your tests will run.  The hosted Crome webdrdiver will go out and test your URL (if its publicly accessible).  There are two places to view your test results.  The first place is the test summary result, under the main left hand side menu :  Pipelines > Builds > click a build result > click the tests tab.  You’ll get a summary view like below.

The next is under the left hand side menu > Test Plans >  the sub menu Test Runs > click a test run.  You’ll get a run summary and a test results tab.  Under the test results tab is where you can view your screenshots.  Under the test results tab, you’ll have to double click a test result to view the details.

Hopefully now you’re off and running building your own UI tests.  Enjoy!