Building Cross Platform Apps with Visual Studio – Part 2

In part one we setup our development environment by downloading Visual Studio 2013 Community Edition. Installing Visual Studio Tools for Apache Cordova. And stubbing out our app. If you did not do any of those steps, no worries, head on over to part one and then make your way back here.

Lets reset a bit on our project. We are starting to look at building an app that will be able to run on iOS, Android and Windows. There are a couple of ways to doing this, natively or cross platform approach. If we were to build a native app for 3 platforms we would have to code in 3 different languages and use 3 different IDE’s. (Not counting a tool like Xamarin). We are also looking at the multiple stack developer who has a lot of “web” knowledge. They know how to build web apps and their skills can translate well to this cross platform development. We will be using HTML and JavaScript to build this app. Most importantly, we will be using Visual Studio to create our cross platform app.

The app can be anything, but in this example it is a drink recipe app. Categories -> Results -> Details. That is the flow of our app. We will be using a theme from Bootstrap to make it look pretty and responsive for multiple screen sizes. AngularJS will be our JavaScript MVC Framework for the back-end. We left off with a basic “barebones” app structure that we will build upon.

Lets Begin

Step 1: API Key

Head on over to addb.absolutdrinks.com and register for a key. Click on sign up and follow the steps. Pretty straightforward. You do not need to provide a URL since our app will be using the REST API.

Once that is complete, write down your API Key or copy it somewhere because you will need that when we start coding.

Step 2: Additional HTML

We need to fill out our 2 other HTML pages.

Drink-results.html

Drink-Detail.html

Those 2 pages will display our results at some point.

Step 2: Service(Model) and Controllers

We have done just the basics to get everything set up and running. We now need to dive into our controllers, models and views. What we are doing to setup is our Model. It is our call out to the Absolut Recipe DB to retrieve a JSON object that we will then send back to the controller which will then parse some data and then send it over to the view. The view will have some binding tags to “bind” the data.

Lets look at our services.js file.  We used the module API to register a our service using a factory function within AngularJS. We are passing in the name of the service – ‘Occasion’- and the factory function. We have a dependency declared from our $resource. This will allow us to create a RESTful client with just a few lines of code. Since we will be using our services we need to include that in our app.js file. Replace the declaration with the following:

Lets go back into the Services.js file and we will now fill out our Occasions service. We need to return a JSON object by first calling our API and passing in any parameters that are needed. Since we want to list all of the occasions on this page we will use the occasion endpoint out on the Absolut API.

This will be our service call. We actually have 3 methods for this one call. .Query will call the RL, .Get will call the URL with parameters and .list will call our list function. A great tutorial of using REST services can be found here.

Now, lets open up controllers.js and make a call to our newly created service.

Add that into our Occasions controller method. What we are doing here is defining our data storage (occasionData) in the controllers scope so it is accessible to the view.

Step 3: Binding to the View

Now we can open up our occasions.html and add the following:

This replaces most of the HTML code that was in that file, but we added a few new things.

ng-repeat – instantiates a template once per collection, basically a loop. Documentation

Basically it is a foreach loop. For each “occasion” item in the occasicanData.occasionList – do the repeat of the template.

The {{ }} is the databinding for the occasion item. Name is a property that is returned from the JSON.

Lets run it.

You may get an error about a google font, it is being referenced from the style sheet. We will remove that at some point but you should now have been able to view all of the occasions from Absolut!

In Part 3 we will work on a few more controllers and services as well as addressing some linking issues.

Part 3 is LIVE

GitHub_Logo

Leave a Comment

(0 Comments)

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