I’m going to adapt the sample todo app that’s part of the Get started with Mobile Services tutorial. You’ll notice that there are already tutorials for iOS, Android and Windows Phone 8 but the problem with these, excluding WP8, is that you need to use an environment other than Visual Studio. This might be OK if you’re already familiar with Java, Objective C, Eclipse, and XCode, but is obviously less than ideal if you’re not.
To complete this tutorial you’ll need:
- A non-Express edition of Visual Studio 2010 or 2012 (you need to be able to install add-ins),
- The Nomad for Visual Studio add-in, which allows you to develop for Android and iOS from within Visual Studio. You can get a 7-day free trial from http://www.vsnomad.com/.
- I’ve attached a zip file containing the complete example code for the mobile app, but you’ll still need to set up an Azure Mobile Service – see Part 1: Setting Up The Azure Mobile Service below.
Part 1: Setting Up The Azure Mobile Service
This is straightforward and should take less than 5 minutes following the instructions at http://www.windowsazure.com/en-us/develop/mobile/tutorials/get-started-html/. If you don’t have an Azure account you can sign up for 3 months free using the Free trial link at the top of the page.
You need to follow the instructions in the Create a new mobile service and Create a new HTML app sections. You do not need to carry out the steps under Host and run your HTML app.
Once you’ve done all this you should have a zip file whose contents look like Figure 1.
Figure 1. Contents of zip file containing HTML todo list sample app.
Remember: there’s a complete sample app attached to this post so you can use that instead if you don’t want to work through the steps to create the sample yourself.
Part 2: Create the Mobile App in Visual Studio with Nomad
If you haven’t already installed the Nomad for Visual Studio add-in, please do so now. Just double-click on the installer you downloaded and follow the instructions.
Now open up Visual Studio and click File > New > Project.
From the list of templates in the New Project dialog, select VS Nomad Project, then choose a name and location, and click OK (see Figure 2).
Figure 2. New Project dialog showing settings for new Nomad mobile app project.
You should now have a new Nomad project for your app, with the contents as shown in Figure 3.
Figure 3. Contents of Nomad project in Solution Explorer.
Now do the same for styles.css, but put it in the style folder rather than the scripts folder.
Open up the index.html file from the zip file. Towards the bottom you’ll find the following script tags:
Open up your web browser and navigate to the jQuery URL, then save off the script into the scripts folder of your project. Do the same for the MobileServices.Web-188.8.131.52.min.js script. Go back into Visual Studio and add them to your project the same way you did for app.js and styles.css.
Your project should look like Figure 4.
Figure 4. Contents of Nomad project after adding and updating files.
Now open up index.html in your project, delete all its contents, and replace it with the contents of the index.html file from the zip file you downloaded.
We’re almost there – we just need to tweak the project’s index.html file slightly so it’s pulling in the right stylesheet, scripts, and also to ensure the todo list fills the screen on your device when you run the app.
First off, find the
<link> tag for the stylesheet in the document
<head>, and update it to read:
<link rel='stylesheet' href='style/styles.css' /><span style="font-size: 14px;"> </span>
Then, at the bottom of the
<body> update the three
<script> tags to read:
Finally, go back up to the top of the <body> and find the following tag:
id attribute in this tag and you’re all set to build the app.
Part 3: Build and Deploy your Mobile App
You’ll notice that Nomad has added a Build item to your Visual Studio toolbar (see Figure 5), and that you have the option to build for either Android or iOS.
Figure 5. Nomad’s Build drop-down on the Visual Studio toolbar.
Here I’m going to show you how to build and deploy your app to Android, which is simpler. Building for iOS requires slightly more preparation, so please see http://www.vsnomad.com/documentation/ios-index.html for full instructions.
Build and Deploy to Android
First, click Build > Build for Android on the toolbar (ignore Visual Studio’s Build menu). Nomad will build your application in the cloud (see Figure 6), and notify you when your build has completed successfully (see Figure 7), or tell you about any errors.
Figure 6. Dialog box shown by Nomad whilst your app is building in the cloud.
You can hide this if you want and Nomad will still tell you when your build completes. You should find, for this simple app, the build takes only 10 seconds or so.
Figure 7. Notification of a successful build from Nomad
. Your packaged app has been copied back to your local machine.
Once the build is complete, click the Show in Windows Explorer button in the Nomad for Visual Studio | Build Complete dialog. You should now be looking at the distrib folder under your Visual Studio project, which should contain your app in a file called android-app.apk.
The easiest way to deploy your app to an Android device is to use a service like Dropbox or Skydrive, both of which have Android apps. I use Dropbox so that’s what I’ll show you here. If you don’t have an account for either, you can sign up for a free Dropbox account with a couple of GB of storage in less than 5 minutes.
Once you’ve got Dropbox installed on both your computer and Android device, just copy android-app.apk into the Dropbox folder on your computer. Open the Dropbox app on your device, log in if you need to, and navigate to whatever sub-folder you copied android-app.apk into. Now open android-app.apk.
At this point one of two things will happen:
- You’ll get a warning that you’re trying to install an app that isn’t from the Play Store and it’ll refuse to go any further until you go into your device settings and allow installation of apps from unknown sources. You’ll probably find this under Settings > Personal > Security > Device Administration > Unknown sources, although this may vary depending upon your device and Android version – have a dig around; it will be there somewhere.
- You’ll get a prompt about allowing the application access to various services and data stores on your device. If this happens all is well, and you just need to click Install, and then Open.
All being well, your app will start up and you’ll see something that looks a bit like Figure 8.
Figure 8. Great success! The completed app running on Android 4.0.4 on a Xoom tablet.
Your todo list will obviously be empty although, as you can see, I’m likely to be quite busy for the next while.
If you’ve got this far, congratulations: you’ve managed to build and deploy your first cross-platform mobile app that uses Azure Mobile Services with Nomad for Visual Studio.
Obviously it wasn’t a particularly exciting application but you should be able to see that using the AMS APIs is a fairly straightforward affair, and you should be in a position to create more interesting and useful apps for both business and pleasure built on these services.