Using Azure Maps with a Xamarin Forms app Part 2 – Search by Category

This is the second in a three part series where I build a Xamarin Forms app that uses the Azure Maps service. You can check out the other parts here:

Part 1 – Basic text search

Part 2 – This post.  Search by category
Part 3 – Routing

In this post, I’ll cover searching by category using the Get Search by Category API endpoint which allows you to search points of interest (POI) by a list of categories.   Calling the search by category service is actually pretty easy.  The endpoint URL is much like the text search endpoint, except for a couple different parts.  Here are the text search and category search URIs compared:

Text search (fuzzy)
https://atlas.microsoft.com/search/fuzzy/

Category search
https://atlas.microsoft.com/search/poi/category

I’m passing the required additional parameters and optional lat long for category search, so ultimately my URI call looks like this:

You need to pass your api key, a strongly recommended country set limiting parameter, the api version, return format (json), and a lat long.

In my Xamarin app, I built a simple page with a button upon which clicked, takes you to a page with a listview of categories.  When you click a category, I pass the selected category back to the previous page, perform the search and render the results as map pins on the map.

To make it more visually appealing, I’m using a mix of Font Awesome and Material Design icons in the category select page.  I was able to get the icons to render using the Iconize Plugin for Xamarin Forms   nuget packages.  It was a little tricky getting the packages to work as .NET Standard 2.0 is not supported on the latest stable versions, so I had to install the pre-release versions.  Ultimately I’m using the base Xam.Plugin.Iconize package two additional separate packages that each load a set of fonts, Xam.Plugin.Iconize.FontAwesme and Xam.Plugin.Iconize.Material

Here’s what my select category page looks like complete with icons:

Here are the results after you select a category.

Now to dig into the code details a little.  To make the category select page, I bind a listview to a category viewmodel

I create a list of this viewmodel and bind it to the list declared in my Xaml. The listview contains an item template that renders the icon as well as the display text of each category

Here’s the code to populate my list of viewmodel. You can see its a mix of Material Design and Font Awesome icons. The ‘fa-‘ and ‘md-‘ text triggers the ‘Iconize’ element to render from the icon set of Font Awesome and Material Design accordingly, based on whatever icons are included in the project by installing the nuget packages for that icon set.

When a category is chosen, I pass the selected category back to the referring page, make the API call and deserialize the Json into a model I created by pasting the Json into QuickType IO

Here’s what the code behind on that page looks like

You can see I’m attempting to grab the user’s location and pass it to the API along with the category selected.  That’s about it.  The Azure Maps service is proving to be pretty awesome.  I’ve been waiting for something like this for years.  It makes it easy to add location intelligence to your apps!  Happy coding.

Installing the Minifier and Image Optimizer Site Extensions on an Azure Web App

Azure Website Extensions are tools and app add-ons that you can add as an extension to your Azure web app.  There’s a lot of nifty ones out there, definitely worth exploring.  There’s a gallery of available extensions over at http://www.siteextensions.net/.  In this article I’ll show you how to install two extensions that should help the overall performance of your Azure web app.  They are the Azure Image Optimizer and Azure Minifier extensions written by Sayed Ibrahim Hashimi and Mads Kristensen.   I’ve met Mads a couple of times at Build, he’s an awesome guy.  He’s built a ton of cool things for Visual Studio, ASP.NET and so forth.  Head on over to his site and check out everything he’s got going on there.

To start, navigate to your web app in the Azure portal then click the Advanced Tools menu item, then select ‘Go’ in the main panel.  This launches the Kudu site associated with your web app.

 

If you’ve never seen this before, you’re in for a treat.  Although its main function is defined as “the engine behind git deployments in Azure App Service” it also can display information about your site environment, the processes running, and give you access to a Powershell and command prompt.  This is also the place to install and use site extensions.  Click the ‘Site Extensions’ top menu item and search for the two aforementioned extensions.  In the screenshot below, I already have it installed so it displays a play button icon that launches the extension.  Otherwise you see the plus icon to add it.   Go ahead and add the extensions.  From what I’ve seen you have to restart your web app after installation, as you might receive a ‘no route defined’ error when launching them for the first time.

 

After they’re installed you can launch them and view the results for each extension.  Here you can see the minifier minifying my css and javascript files as well as shrinking the site images.

 


 

Scheduling Hangfire Jobs With Varying Schedules Using Cron Expressions

Scheduling your own background jobs in .NET can be a pain. If you’re feeling brave or rather ambitious, you could write your own scheduler using out of the box .NET framework components, or you could use a library like Hangfire.  Hangfire enables you to schedule jobs, and manages the execution and retry logic.   Scheduled jobs survive a process restart which is a nice bonus.

Recently I was developing an application with a requirement for recurring jobs. Users of the application were to be able to schedule jobs daily, weekly, monthly, as well as every three and four months.   I used Hangfire’s recurring job scheduler method for this.  This particular method uses CRON Expressions to specify the job schedule, and allows the most flexibility.   Cron is a little weird getting used to, but I found a great website with some simple guidance and an expression interpreter so you can test out your expressions.  Head on over to http://cronsandbox.com/ and you’ll find an online cron expression checker that parses your cron expression and tells you based on that expression, when your scheduled jobs will run next.  Its a beautiful thing.

There are five parts of a cron expression, and they’re explained pretty well on this site.  Here’s an excerpt:

“Reminder of the crontab format…
mm – the minute, a value between 0 and 59
hh – the hour, a value between 0 and 23
D – day of the month, between 1 and 31
M – month, a value between 1 and 12
DoW – day-of-the-week, 0-6 (0 = Sunday)

Each of the five items can be expressions…
A ‘*’ means use all values.
Multiples: e.g. every 20 mins would be ‘0,20,40’.
Range: e.g. hourly in the evening ’19-23′.
Every nth ‘0-23/n’, ‘*/2’ would be every other.
‘*/1’ is valid crontab syntax, but is flagged here as a possibly unintended entry.” 

Building off this format, you can schedule jobs to occur at varying intervals such as the following.  (I’ve got them all starting at 8AM but you can specify your own start time)

Weekly:                                00 08 * * 1

Every month:                     00 08 01 1,2,3,4,5,6,7,8,9,10,11,12 *

Every three months:      00 08 01 1-12/3 *

Every year:                          “00 08 01 1-12/12 *

Happy scheduling!

 

 

Building a Xamarin Android app in Visual Studio Team Services and deploying to App Center

In the old days, we use to build our Xamarin apps with Visual Studio and find a way to get the resulting .apk file to the end user for them to install.  Then came Hockey App.  It was and sort of still is (in transition) a distribution platform for Xamarin apps.  It was awesome.  Now of course, we have App Center, a completely modern and full fledged mobile app management and distribution service by Microsoft.  Since Microsoft purchased Xamarin, App Center was the next logical step and is among the many benefits of the acquisition.  Not surprisingly, using Microsoft’s Visual Studio Team Services (VSTS) you get integration with App Center.  Namely, you can configure build definitions in VSTS that allow you to deploy right to App Center.   Before we take that for granted let’s pause and let that sink in for a moment.  What this means is that when I check in my code, it triggers the build definition in VSTS which builds the code in the cloud on a hosted Xamarin agent, then deploys the resulting .apk file to App Center.   I can wash my hands of the mundane, boring task of building in Visual Studio, and manually updating App Center forever!  Dev Ops is all the rage right now, and I must admit, although building a single build and deploy definition is merely dabbing my feet in the water, this stuff can get pretty addictive.  Its like life hacking but with code.  The more I can automate my CI/CD (cringe) pipeline the better.

To get started, I’m going to assume you have a VSTS subscription and a project with a code repository set up.  I’ll assume you have an App Center account and an established Android application.  You can get help with those Here and Here.

To get started with your build definition, navigate to your project and select builds.  Then click the button to create a new definition.

 

Select the type and location of the source code you’re going to build.

 

Now we’re given the option to select a template.  Here we’ll search for Xamarin and select the Xamarin Android template.

 

Now the template is loaded and ready for us to configure as our build definition.  It contains steps that will execute in the order they are listed from the top down.  Templates are great for newbies like me in that they guide us on the right path.  Notice the first step that sets the cloud build environment to use Nuget 4.4.1.  This is a requirement and is already set up for you.  The next step is the Nuget restore step and will pull down the any nuget packages for your code.  I’ve actually set a custom nuget feed in addition to the regular official nuget to that pulls down some extra packages from a private source.   This is set up as a custom Service Endpoint and not covered here.

Next, configure the build step to your liking.  The defaults for this step pretty much work.  Make sure you use JDK version 8 and JDK architecture x64.

 

In the next step, upload the Keystore File that will be used to sign your app and enter the alias and password.

 

The default settings for the “publish artifact: drop” step should already be ok. After that, we’ll configure the deploy step that will send our app on over to App Center.  I’m skipping the optional ‘Test with Visual Studio App Center’ step that allows you to queue and run unit tests for the deployed code in App Center’s Test Cloud.

The App Center distribute step requires you to set up a service endpoint (pictured below) connection to App Center.  Follow the link above to set that up.

 

Go back to the App Center distribute step and configure the following:

– The App Center app slug. The app slug is how the build step locates your app in App Center. This is how you find out what your app slug is in App Center as described by Team Services:

“The app slug is in the format of {username}/{app_identifier}. To locate {username} and {app_identifier} for an app, click on its name from https://appcenter.ms/apps, and the resulting URL is in the format of https://appcenter.ms/users/{username}/apps/{app_identifier} . If you are using orgs, the app slug is of the format {orgname}/{app_identifier}.”

– Enter your desired release notes. You can direct the step to use a specially formatted release file here. I haven’t messed around with this specifically as I trigger the builds manually anyway, and I just fill in the release notes by hand.

– Select an App Center distribution group to publish to by filling in the group ID. If you select none, the default group will be used. To find the ID of a distribution group in App Center, go to the group and select the gear icon to change the group settings. The ID will be displayed there.

Save the definition and you’re ready to go! You just hacked life and saved time by letting VSTS do some work for you.