Taking part in the Xamarin Alliance Challenge 1-3

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.

Xamarin Challenge Facebook

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:

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.

Xamarin Challenge Github Repository

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

Xamarin Challenge 1 Code

Next set your startup project and hit run.

Xamarin Challenge VS2017 Run #1

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

Xamarin Challenge UWP App

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

Xamarin Alliance Badge Challenge 1

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.

Xamarin Challenge 2 Navigation

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

Xamarin Challenge 2 Navigation OnItemSelected XAML

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

Xamarin Challenge 2 Navigation New Page

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

Xamarin Challenge 2 Navigation Call New Page

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

Xamarin Challenge 2 New Page Outcome

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

Xamarin Challenge 2 Next Page CS

Xamarin Challenge 2 Next Page Xaml

Xamarin Challenge 2 Next Page

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

Xamarin Challenge 2 Back Page Xaml

Xamarin Challenge 2 Back Page CS

Xamarin Challenge 2 Back Page Done

Xamarin Alliance Badge Challenge 2

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.

Xamarin Challenge 3 Add Mobile App

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

Xamarin Challenge 3 Setup Mobile App

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

Xamarin Challenge 3 Setup Database

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

Xamarin Challenge 3 Setup Database Create

Next I downloaded the backend.

Xamarin Challenge 3 Setup 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!)

Xamarin Challenge 3 Code Backend Done

Next I published my modified backend to Azure.

Xamarin Challenge 3 Publish Mobile App 1

Hit “Microsoft Azure App Service”, be sure to select “Select Existing”.
Xamarin Challenge 3 Publish Mobile App 2

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

Xamarin Challenge 3 Publish Mobile App 3

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.

Xamarin Challenge 3 Setup Database Postman

Back in the code of my app, I added the “Microsoft.Azure.Mobile.Client” NuGet package to the forms and to the UWP app.

Xamarin Challenge 3 Microsoft Azure Mobile Client

On the page 1 Xaml  I added two labels and on the class I added a reference to my mobile client and a the logic to connect to the backend.

Xamarin Challenge 3 Xaml Label

Xamarin Challenge 3 Mobile App Done

Xamarin Challenge 3 Mobile App Done Page1

I did the same with the “back” page and considered challenge #3 completed as well.

Xamarin Alliance Badge Challenge 3

You may also like...

2 Responses

  1. Peter Maynard says:

    Really nice write-up @Moritz! 🙂 Glad you enjoyed the Xamarin Alliance.

Leave a Reply

Your email address will not be published. Required fields are marked *