Previous tutorial links: one, two, three and four.

 

In the previous steps we covered creating Pi Passport machines as standalone systems – all data about the user, and the achievements, is stored on the pi itself. This is fine if you don’t want it to be accessible elsewhere, but for this project it’s better if we have it online: this makes it easy to share that you’ve been to a jam, beaten your friends achievement tallies etc.

For this we need to create something called a REST Web API. These allow us to send a request to a URL, either to get data or to modify it. As some simple intro to how this works, there are four types of HTTP request that allow the website to pick up what we want to do, and whether we’re modifying data or just grabbing at it: these match to CRUD (Create, Review, Update, Delete) – POST (Create), GET (Review), PUT (Update), and DELETE (well…delete…).

For this, I’m using Azure. If you’d like to use some other service please go ahead. I’m using it because I have Visual Studio already (and for free as a student), and code generation for what is a simple task is very easy to generate. Don’t worry if you don’t know C# - most of what we’re going to cover is automatically generated. If you’d like to use Azure but use some other language, this is also doable as Azure lets you make basically anything you want on the server.

Oh it’s also free for the first month.

If you’d rather skip this, please go to the next step, as request handling will be the same no matter what server choices you make: there may be a flask version of this tutorial later on if possible.

 

Step 1: Setting up Azure

First off, go to the Azure website and click Free Trial. Fill in your details (if you don’t have a Microsoft account/Hotmail/outlook email, you’ll need to open one). After registering click portal at the top of the azure homepage:

web_trial.png

And after loading, you should see something like this:

web_portal.png

At the bottom left click “new” and then select the options highlighted:

custom_create.png

Fill in the details:

create_website.png

Making sure the website name you use is valid and not used by someone else – as this is a shared hosting plan, it could be anyone using azure who has the same name…

Click the arrow to the bottom right and fill in the database details:

create_database.png

Click the tick, and you should now have a new website created and a database to store all the details.

Now we can get on with writing code. If you don’t have Visual Studio, you can download all that’s necessary from the downloads section:

downloads.png

 

Which will give you VS express.

I’m using VS2013 – if you are a university student and your uni offers Dreamspark, you should be able to download this for free. Those who have yet to upgrade, you will need at least version 2012.

 

Step 2: creating the project + uploading to Azure

If you now open VS and click new project from either the file menu, or the main start page, then select “web” from “templates -> Visual C#” there should only be the ASP.NET Web App option. Enter your details and click “ok”

A new popup should appear – click “Change Authentication”:

no_auth.png

For the purposes of ease, we’re going to use No Authentication. On release versions it would probably be better to use something more secure, but whilst we’re learning we’ll just leave it as this.

The other options you need selected are as follows:

other_options.png

Press ok and at the next box, press cancel.

Right click the project in the solution explorer and select publish:

click_publish.png

Click “Windows Azure Websites” from publish target and find your website profile from the drop down.

This should load your profile – if nothing is in the drop down, click import and enter your azure details. On the next screen click “validate connection”:

publish.png

Which should give a yellow tick to the right of the button.

Click next, and on the screen after, next again.

Then click start preview:

preview.png

The list will get populated with stuff that’s going to be uploaded. Now if we check on the url:

asp.png

We have a website…which does nothing

 

Step 3: Creating the infrastructure

If I haven’t mentioned before, we’re creating an MVC application: Model View Controller. Essentially, this layers the application, so that the Model creates itself from data from the database and handles all updates and changes, the Controller handles the interaction between Model and View, and the View is the user interface which allows us to modify the data.

We’re now going to make our first model, so right click on the Model folder and click Add -> Class:

model.png

In the next popup select the top one from the list (Class) and name it “Person.cs” – it’s customary in C# to begin Class names with uppercase letters and variable names with lowercase.

Enter the following into this new class, by selecting it under the Models folder. Note that unlike python, Indents? Shmindents. (Please do put in indents. It makes it look neater, it’s just that that’s the only reason they’re in there.)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace Passport.Models
{
    public class Person
    {
 public string ID { get; set; }
 public string name { get; set; }
    }
}




As a brief pythoners guide to C#, “using” in Python would be “import”. Namespace allows us to create classes with the same name in the same project without mixing them up. Public means that the class and the variables can be accessed from outside the scope they were created in.

 

Now we’ll make a Controller for this by right clicking Controllers -> Add -> Controller:


Select Web API 2 Controller with actions using Entity Framework.controller.png

In the next window select your new person class:

con_2.png

And click the plus button next to Data context. Leave this as default, press ok and press Add.

Follow the above steps 2 more times, but for Achievements and a Join table. Each achievement will have:

An ID

A Description

Each “join” entry will have:

An ID

The ID of the user who collected the achievement

And the ID of the achievement collected.

I hope that’s not too “draw two circles now draw an owl”-y.

Once all of that’s created, run your project (F5 or that big green arrow button):

run.png

To check everything’s ok. A web browser should pop up pointing to local host, followed by a port number. After the slash enter /api/People:

And you should get something like this.

api.png

You can now stop that by going back to Visual Studio and pressing the stop button, and then reupload:

republish.png

If you get nothing under Databases, go to the settings link and adjust this:

sett.png

Again check this works online and we’re done here! Our next tutorial will cover how we link this in to python on the pi.

The website itself for viewing and sharing your achievements will take a bit more time to cover, so I won’t be covering it in this series of tutorials.