Taking part in the Xamarin Alliance Challenge 1-3

by Moritz · 26. March 2017

Last week I stumbled over the Xamarin Challenge in my Facebook timeline. A click later I was in the middle of a so called “coding challenge”, with three challenges ahead of me. If you didn’t took part in the challenge yet, no matter, you can start anytime.

In this post I wanted to summarize my experiences when completing step 1 to 3, as the steps 4 and 5 were not posted at time of writing.

Fast forward:

Challenge #1
Challenge #2
Challenge #3

Generally the challenges posted yet, shouldn’t be to hard to complete for a person who is at least a little bit familiar with programming. The target is obviously not to learn how to program, it’s more to bring people into the Xamarin platform.

Xamarin Challenge #1

The first challenge is the setup. I used VS 2017 with Xamarin already installed. You can find the instructions here, if you need to install the prerequisites.

If you are ready to rumble, you have to download the project from GitHub.

Download the ZIP, unzip it and open the solution (*.sln).

Next set your startup project and hit run.

If everything worked out, you should see something like this UWP app.

And that is all challenge #1 wants you to do, now you can reward yourself with the first badge.

Xamarin Challenge #2

In the second challenge we will add some code to our app. The focus is on the user interface, we have to implement a basic navigation. To preserve the fun I will not add code here, just a few screenshots to give you an idea what this challenge is about.

Targets:

Have multiple pages in the app
Add navigation

First I followed the tutorial and added a NavigationPage.

Then I added an OnItemSelected event to the given CharacterListPage Xaml like given in the challenge description.

I also added a new “Forms Blank Content Page Xaml”.

Next I added the event to “CharacterListPage.xaml.cs”.

So after clicking on a list item, the result was that I ended up stuck on a blank page.

For this reason I added a button to get to a new another page.

There I added a back button and considered the second challenge as completed.

Xamarin Challenge #3

In the third challenge, we have to implement an Azure backend to our app.

Targets:

Connect to a Azure backend
Optional: Build an own Azure Mobile app

First I added a new Azure Mobile app.

When you add a service plan be aware that it is initialized with pricing tier S1, I changed it to free.

Like mentioned in the challenge tutorial, I hit “Quickstart” on the newly created mobile app and selected “Xamarin.Forms”.

I had to create a new database server, select a pricing tier and set a connection string.

Next I downloaded the backend.

After downloading, I unzipped the project, opened it with Visual Studio 2017 and started to modify it.

As the example backend is the standard “Todo list” app, I first modified the data objects, so that they are look more like the data from challenge #1.
So the “TodoItem” gets a “CharacterItem” and so on. (Do not forget to add an “Id” property!)

Next I published my modified backend to Azure.

Hit “Microsoft Azure App Service”, be sure to select “Select Existing”.

Here we select the app we created earlier. Hit OK, if everything worked out your browser should show the following website.

Back in my Xamarin app from challenge 2, I wanted to show the first character on the page with the “Next” button and on the “Back” page character two. To accomplish this, I connected the app with my backend at Azure.

To test your app, you can use a tool like PostMan. If you call your service, it should respond like this.