Building Android apps with the Nomad extension for Visual Studio 2010

UPDATE: Nomad has been retired by Red Gate and is no longer available for download. See their announcement here.

 

Last week I posted an article entitled Extending PhoneGap for Visual Studio to Android devices. In it I talked about how we can use the Visual Studio 2010 PhoneGap templates to create a Windows Phone 7 app and deploy it to an Android mobile device using the PhoneGap:Build service.

Well there is another piece of technology that I have been playing with lately that goes beyond PhoneGap:Build by baking the compilation service right into the Visual Studio IDE. The product is called Nomad and it is made by Red Gate Software in England. Right now it is in free private beta but anyone can request a copy of the product.

Much like the PhoneGap templates you will build apps using HTML5 and CSS. You can use the PhoneGap libraries to access items like the camera and accelerometer. You can even use things like jQuery Mobile. All of this will get compiled down to an application that can be deployed to a mobile device. You cannot as yet deploy a Nomad project to the Google Play store though. (See the comments below for an update.)

Right now Nomad only supports builds for Android and iOS. As with the PhoneGap templates you will need to have a membership with the iOS Developer Program before you can build an app for iOS. As well Nomad is limited to Visual Studio 2010 but not available for the Express editions as they do not allow extensions. Finally, Nomad only targets iOS 4.2 or later and Android 2.2 (Froyo) or later.

In the remainder of this post I will demonstrate how to use Nomad to build and deploy an app to an Android mobile device.

Once you send a request to Nomad you will get an email response with a download link. Download the Visual Studio extension and save it to your computer. Run the .visx file and follow the instructions to install the extension into Visual Studio. You may need to restart it if it was running during installation.

Nomad Extension Installer

With the extension now installed open Visual Studio and select File | New Project. Find the VS Nomad Project within the Installed Templates. Enter a Name and Location. Click OK.

Nomad New Project

Nomad will raise a message box on first use asking you to sign in with the account details from the email that contained your download link. Your user name is the email address you signed up with.

Nomad Sign In

Once you are in the solution you will see that Nomad provides a default project to begin with. The project contains an index.html file that contains some HTML and JavaScript, Hit F5 to view the project.

Nomad Project Default

You will see the default project is set up to use PhoneGap services like the compass and geolocation. However since we are running in the localhost we cannot access these items and thus the page shows an “n/a” beside these properties.

To start building your project you would want to clean out the index.html and start laying in your own code. However for this demonstration I want to use the provided demo code to show you how the PhoneGap tools in use on this page will actually work once compiled and placed on a mobile device.

To build your Nomad project find the Nomad build button on your toolbar. Click the drop down arrow beside the build button and select Build for Android. You can also select Build configured platforms if you want packages for both iOS and Android (provided you have the requisite iOS developer account).

Nomad Build Dropdown

After you select the Build button the code gets packaged up and sent to the Nomad cloud build service on Nomad’s servers. This means that you do not need additional SDKs or any other software to compile your app.

Once you click the Build button you will see a processing message.

Nomad Cloud Build Dialog Start

And once it is completed you should get a success message if everything compiles correctly.

Nomad Cloud Build Dialog Success

Clicking the Show in Windows Explorer button on the dialog box will take you to your project folder. The build process creates a “distrib” folder and your compiled app is placed in there. Since I built an Android app I received a .apk file back.

Once the item is saved to my computer I can then move the app to an Android mobile device for installation. To deploy the .apk file to my Samsung Galaxy Tab 2 10.1 Android tablet I will copy the file from my computer to my Dropbox folder. If you do not have one you can create a Dropbox account here. (Full disclosure: this is my referral link).

To install the app click your file on Dropbox to begin downloading it to the Download folder on your device. Once the .apk file is in your folder click it to begin the installation process.

Nomad Hello World App Install

Note: To install apps that do not come from a recognized Android marketplace you will need to make sure that you allow installation of non-Market applications. To do this go to Settings | Applications and click the Unknown Sources checkbox.

Samsung Tablet Settings

Once the app is installed you will see it in your list of Apps. Here is my Nomad Hello World app. You can see that once the device is loaded onto my tablet that the Compass, Connection, Device and Geolocation properties all present working data.

Nomad Hello World App Running

As you can see from this demonstration the Nomad extension for Visual Studio 2010 allows you to create a working Android application within a Microsoft environment. Although the Android app is only available for private use once they allow deploys to the Google Play store you are well on your way to creating Android apps within the Visual Studio 2010 IDE.

Leave a comment below and let me know what types of projects you would use the Nomad extension for.

Advertisements

Extending PhoneGap for Visual Studio to Android devices

PhoneGap templates for Visual Studio 2010 have been around for almost a year. The templates allow you create a working Windows Phone 7 app using the PhoneGap SDK without having to learn XAML or C#.

There are plenty of examples on how to create a WP7 app with PhoneGap templates so I will not be repeating the steps here. If you are looking for some good tutorials though check out the following links:

Windows Phone App Porting: Bridging the PhoneGap

How to create HTML5 apps on Windows Phone with PhoneGap

Developing Windows Phone 7 HTML5 apps with PhoneGap

Note: Many of the tutorials reference the older PhoneGapStarter.zip file. However, in later releases the PhoneGap templates are using the newer Apache Cordova files. Click the following links to download the project files and to view the Getting Started guide.

Once you have installed the templates into Visual Studio and completed your project you should be able to successfully run your WP7 app on both the emulator and a Windows Phone 7 device.

However, the purpose of PhoneGap is Write-once, run-anywhere. So to have code that can only be run on a WP7 phone seems to defeat the purpose. Thankfully there is a free service from PhoneGap that can help with this called PhoneGap:Build. The online service can take your HTML, CSS and JavaScript files (everything the PhoneGap templates create using Visual Studio) and compile them into apps that are ready for a vendor’s app marketplace.

To use the service you need to sign in with either your AdobeID (PhoneGap was purchased by Adobe last year) or your GitHub account. Once you are signed in you will see a dashboard similar to this:

PhoneGap Build Dashboard

To get started click the new app button. A dialog box will appear:

PhoneGap New App Dialog

Give your app a name and select where to upload it from. You can create a new Git repository, pull from an existing one or choose to upload files from your computer. Note that if you select the latter option you can only choose an index.html file or an archive file. For me I will be using a .zip file. This file will contain an index.html file, the PhoneGap JavaScript file and a CSS file. All of these get generated in the www folder of my Visual Studio solution.

My dialog box now looks like this:

PhoneGap New App Dialog Completed

Once you hit the Create button your app will appear under the Apps heading on the Dashboard.

PhoneGap Build Dashboard App

Clicking the app name will bring you to a page containing the various builds that have been created. You will get packages for iOS, Android, Windows Phone, BlackBerry, webOS and Symbian. Note though that PhoneGap:Build will not create packages for iOS unless you have purchased a developer account with Apple and have added the correct signing key to your PhoneGap:Build account. See the iOS Developer Program for more details.

To retrieve your app click the Download button below the appropriate package and save the file to your computer. Since I am building for Android I will receive a file with a .apk extension.

PhoneGap Build Downloads

Once the item is saved to my computer I can then move the app to an Android mobile device for installation or even upload it to one of the Android marketplaces. To deploy the .apk file to my Samsung Galaxy Tab 2 10.1 Android tablet I will copy the file from my computer to my Dropbox folder.

To install the app click the file on Dropbox to begin downloading it to your Download folder on the device. Once the .apk file is in your folder click it to begin the installation process.

App Install Dialog Box

Note: To install apps that do not come from a recognized Android marketplace you will need to make sure that you allow installation of non-Market applications. To do this go to Settings | Applications and click the Unknown Sources checkbox.

Samsung Tablet Settings

Once the app is installed you will see it in your list of Apps. Here is my PhoneGap Hello World app. Pressing the “Say Hello World” button will put “Hello World” into a TextArea tag.

Hello World App

In this article we saw that by building apps with the PhoneGap template in Visual Studio 2010 we are not solely restricted to using the app on a Windows Phone 7 device. With ready-made sources like PhoneGap:Build and Dropbox we can export the finished product to other mobile devices like a Samsung Galaxy Tab 2 10.1 tablet. This gives us flexibility to test our products before we deploy them to an Android Market like Google Play.

Designing For Android – Smashing Magazine

Designing For Android – Smashing Magazine

For designers, Android is the elephant in the room when it comes to app design. As much as designers would like to think it’s an iOS world in which all anyones cares about are iPhones, iPads and the App Store, nobody can ignore that Android currently has the majority of smartphone market share and that it is being used on everything from tablets to e-readers. In short, the Google Android platform is quickly becoming ubiquitous, and brands are starting to notice.