This walk through will show you how to combine the features of Visual Studio 2013 with the Apache Cordova CTP 3.1, AngularJS, Ionic, and Adobe PhoneGap to create, build, and deploy a hybrid mobile app.

While Microsoft is hard at work putting the final touches on Visual Studio 2015 support for web based mobile apps, you can get started today if you know how to put the right pieces together.  This primer is intended to get you up and running building a hybrid mobile app using tools available today including Visual Studio 2013, Apache Cordova, AngularJS, the Ionic Framework, and Adobe Phone Build.

Prerequisites

To start this primer you should install the following software.

Step 1 – Create a New Apache Cordova App with Ionic and AngularJS preconfigured

While Visual Studio provides templates for creating a new basic Apache Cordova app, the functionality is fairly limited.  It doesn’t provide you with any of the standard web based frameworks for handling navigation, data binding, interaction, or other features of modern Javascript frameworks..  It also doesn’t provide you with an easy way to replicate the look and feel of a native mobile application via CSS.  This is where AngularJS and the Ionic Framework come in.  AngularJS is a framework in use across the Internet for building single page apps as well as other web applications.  Ionic is a UI framework of CSS, images, and Javascript that allows you to build user experiences that simulate native applications and is in fact built on top of AngularJS.  These two frameworks form the backbone of the UI for your application.

I could go into detail about how to install both of these frameworks via node.js but fortunately Mike Jones from Microsoft has made this a lot easier for everybody, and I love easy.  So we’ll start our mobile app development by downloading his preconfigured template called Ionic SideMenu Starter Template.  This template provides a Visual Studio 2013 Apache Cordova app solution that incorporates the SideMenu starter app from Ionic.  Simply extract the files from the ZIP and rename them to match your application.  For my application, I’m starting a virtual personal trainer app for my local gym, Body Focus Fitness.  So I’ll rename my projects to BFFGym.Mobile.

Your solution should now look like the one below:

Solution

The structure is a combination of the frameworks for the app.  AngularJS is included the frameworks directory under scripts.  Ionic is contained in the lib directory.  The merges directory is used when building your Cordova App for a particular environment.  The UI and logic for the app are contained in the JavaScript files under the scripts directory and the HTML files in the templates directory.  If you build and run your app now, Visual Studio will start the Chrome browser with an add-on called Ripple that performs web based emulation of various mobile environments.  The screenshot below shows emulation of a Galaxy Nexus.  Here you can click on the menu at the top of the screen to see the side loaded options as well as navigate to the other screen.

Ripple

Step 2 – Customize Your Application

At this point you can modify your application as you see fit.  For the purposes of this primer, I’ll just add a new option to the playlists for “More Cowbell” because every app could use more cowbell.  The controller for the PlayLists page is in the controllers.js file.  Here is the controller with the modifications.


.controller('PlaylistsCtrl', function ($scope) {
$scope.playlists = [
{ title: 'Reggae', id: 1 },
{ title: 'Chill', id: 2 },
{ title: 'Dubstep', id: 3 },
{ title: 'Indie', id: 4 },
{ title: 'Rap', id: 5 },
{ title: 'Cowbell', id: 6 },
{ title: 'More Cowbell', id: 7}
];
})

Another place you’re going to want to make some changes is the basic properties of your application.  For an Apache Cordova app, these settings are in the config.xml file at the root level of your project.  Notice that the Apache Cordova CTP 3.1 has added a nice UI for editing the XML file.  Here are my settings with the changes I want to make.

ConfigXML

 

Step 3 – Build Your App for Distribution

Once you have made the changes you want to your app, the next thing we need to do is get it ready to be packaged for deployment.  The Apache Cordova CTP includes the command line utilities and other tools required to build for Windows and Android.  To build an iOS app you need to have access to a Mac machine.  Or if like me you prefer the easy way again, you can use the Adobe PhoneGap build service to create the apps for you in the cloud.  But in order to use PhoneGap you need to make some slight tweaks to the output of your application.

Start by setting your target from Ripple to Device, then switch your build configuration from Debug to Distribution.  This will make sure that all of the files you will need get generated and copied to the proper folder.  Run your build and you will see a directory created under your project root called “bldDistribution”.  This is where the output of your build is.  In order to work properly with PhoneGap we need to move the config.xml file from the “bldDistribution” directory into the “www” directory with index.html file.  Once this is copied, simply ZIP the “www” directory into a file and name it for your app.

Now go to the Adobe PhoneGap Build site at http://build.phonegap.com.  If you don’t have an Adobe account you can create one and then sign in.  Click on the Apps menu option and you’ll see the screen below.

PGBuild

 

Click on the “Upload a .zip file” button and select the zip file you just created.  This will read the contents of your config.xml file and present you with the details you specified earlier.

PGBuild2

Now click on the “Ready to build” button and the service will begin building apps for Windows Phone, iOS, and Android.  When you click on the title of your app you should see this screen with the download links for the XAP, APK, and iOS app.

NOTE:  You have to create a signing key for the iOS build to work properly.  The PhoneGap documentation has the details on how to do this here.

PGBuild3

 

Since I have an Android phone, I downloaded the APK file and copied it to my device for sideloading.  If you’re not familiar with sideloading an application in Android you can read a tutorial on Phandroid.  I can now run the app on my phone.

Screenshot_2015-04-13-02-09-37[1]

That’s all there is to it.  Of course with the upcoming release of Visual Studio 2015 I’m hoping this will become an even more streamlined process.