Log Events and Crashes in Xamarin Forms with App Center

While there are a number of third party mobile telemetry and logging solutions on the market, Its no secret that I’m partial to the Microsoft platform.  As such, in this post I’ll show you an easy way to enable and send log messages in your Xamarin Forms apps using App Center

Get Set Up

To get started, you’ll need to install the App Center SDK.  This is the shortened version of the documentation in that link.

There are three main NuGet packages offered.  The main App Center package, an Analytics package and a crashes package.  Install them from the Visual Studio NuGet package manger.  If you prefer the package manager console, you’ll want to use the commands

Install-Package Microsoft.AppCenter.Analytics
Install-Package Microsoft.AppCenter.Crashes

The crashes and analytics packages depend on the main App Center package so it will install automatically with them.   You’ll need to install the packages in each project.  To start logging, you need to opt in to any of the modules you want to use.  In Xamarin Forms, call the AppCenter.Start method in your App.Xaml.cs file.  The call looks as shown below, and takes a string argument of app secrets as well as parameters for each module you want to enable.  App secrets are obtained by creating a separate App Center app for each platform you’re using.  So if you have an Android App and an iOS app, you’ll need to create an App Center Android app as well as an iOS app, and get a secret for each.  The method allows you to pass one to three secrets and enable one or both modules, like so

Replace the curly braces and ‘Your App Secret’ with your actual app secret.

Start Logging

Now that you’re all configured you can start calling the crashes module in your catch blocks, or anywhere you want to report a non optimal situation, and call the events module for any event you want to report.   Calls to the crash and event modules are shown below.  Pass an exception object to the crashes call, and a string argument to the event call.  They each also take a Dictionary<string, string> argument where you can pass up to 20 custom properties and values.   There are other limitations, such as 200 distinct event names, a maximum limit of 256 characters per event name and 125 characters per event property name and event property value.


View your Logs in App Center

Call these and the SDK will send the data up to App Center where you will see it in the portal.  In the portal you get session count and device properties like model and OS version for free, meaning no extra code required.  The portal displays your data in aggregate and also gives you some nice charts.  Here’s a couple of images of the events main page and a detail view of one of the events.

You can see from the images above I’m logging some things that I care about in this sample field technician app. Namely: A user logs in, a user creates a ticket, and so forth. In the second image, you can see the drilled in view and details which include the number of users, and if you scrolled down, values of the custom properties I sent.

With App Center, you can even export this data to Azure Blob Storage or Application Insights to gain further insights. Another cool feature is the ability to see log data in real time as it is sent to App Center. Simply navigate to the Analytics > Log Flow menu item in your App Center app, use your app in a way that invokes anywhere in your code where you have wired up an SDK call and BAM, you’ll see the raw data come in. How cool is that? I can’t wait to see what else they might come out with.

Using Azure Maps with a Xamarin Forms app Part 3 – Route Directions

This is the third 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 – Search by Category
Part 3 – This post.  Routing

In this post I’ll show you how I was able to query the Azure Maps Route Directions Endpoint and render the route on a map.  The route directions API endpoint takes a number of parameters, of which I only use a few.  Mainly, the source location lat and long, and the destination location lat and long.  The URI I construct ends up looking like this

For this demo, I let the user choose from a few hard coded source and destination locations.  For each preconfigured source and destination, I looked up the latitude and longitude, and stored them with the option.  When the user selects from one of the source and destination pairs, I pass the associated latitude/longitude coordinates to the API.  This is just a demo, so a real solution could be more dynamic by allowing the user to query for directions based on points of interest also returned by the API.  For this post, I’m returning the route for Stanford University to Pizzeria Delfina in Palo Alto, California.  (Palo Alto is the default simulated location for the Android Emulator).  Here’s a screenshot of the view where a user selects from one of the locations.  Its just a few buttons.

Here’s the resulting route drawn as an overlay on the phone’s native map. I was able to draw the polyline overlay using this technique for Xamarin Forms Maps.

Here’s what the code looks like for when the user clicks a button and the view loads to query the API based on the hard coded choice selection and render the map. (pay no attention to the async void lol)

To start I’m using a switch statement based on the user’s selection and passing the hard coded lat long to the API. Notice I’m instantiating the map AFTER I get the results back from the query. This was because of the way the overlay is drawn on to the map for Xamarin Forms. It involves creating a custom renderer which listens to when the map is instantiated. At first, the overlay wasn’t drawing on the map because I was instantiating the map before making the API call, and the listener on the custom renderer was running and rendering the map before the results of the route query were returned. This is one of the rare cases where I personally declare UI in code, to control the declaration timing at run time. After I instantiate the map I place a pin on the starting point no matter which route is chosen. Then I place a pin on the selected destination.

So there you have it. I’ve always been a sucker for POI, mapping etc so I’m excited to be able to explore the mapping API more.

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.