Building for iOS

Nomad lets you write native iOS apps in Visual Studio, but before you can run them on your device, there’s a few bits of configuration. See each section for more details, or watch a short video walkthrough.

iOS Developer Program membership

You’ll need to be a member of Apple’s iOS Developer Program. This costs $99/year for either personal or corporate membership. (If there’s a few of you working on apps, it’s $99 for the team, not per developer.)

Signing certificates

All apps that run on iOS devices must be digitally signed with a code signing certificate. This verifies the identity of the app’s author, and ensures they’re a member of the iOS Developer Program.

Provisioning profiles

Provisioning profiles tie your signing certificate, application and devices together. They can be Ad-Hoc, in which case you can install your app directly on the included devices, or App Store, which allows your app to be run on any devices, but requires App Store approval first.

Deploying your App

You’ve written your app, and it has built successfully – now how do you get it on to your phone?

Develop with JavaScript & HTML5 from within Visual Studio

Use your existing .NET development skills

Getting up to speed to become a mobile app developer is even easier with Nomad. Use the Visual Studio IDE and transfer your skills quickly to mobile app development.

A seamless development experience

Simply installing the Nomad extension means there’s no need to install large SDKs or go through time wasting setups and configurations

Make use of your existing skills and expertise

Rapidly Prototype your Mobile App

Simple drag & drop designer

The drag-and-drop interface allows for quick and easy mobile prototype development. The Preview mode lets you test your prototype live at any moment. Simply add a new JQuery item to your Nomad project and begin designing

Auto-generated HTML

The UI designer automatically generates the HTML for you so there’s no large amount of coding required to even get started

Requirements

Our vision is to be able to build mobile apps for any platform. Right now, there’s just a couple of us, so we’ve started with the most common platforms: iOS (iPhone and iPad) and Android.

Visual Studio 2010, 2012 & 2013
Rather than forcing you to learn a new IDE, we thought you’d be more comfortable with something you know already. The Express editions don’t allow extensions, so unfortunately these won’t work.

Some mobile hardware
Nomad builds for iOS target iOS 4.2 or later, and will run on the iPhone, iPad and iPod Touch. Android builds require Android 2.2 or later.

If you want to develop for other platforms please let us know…

iOS builds only: iOS Developer Program membership
Apple requires you to be a member of their developer program to create apps for iOS, and Nomad apps are no different in this respect.

However, you won’t need a Mac to build your apps – we’ll handle that bit for you!

For more information, see iOS Developer Program.

PhoneGap Build Account
Nomad for Visual Studio uses Adobe’s PhoneGap Build service to package your app for iOS and Android. You will require an Adobe ID in order to use the build service and will be asked for your credentials when creating a Nomad project for the first time. You cannot use GitHub credentials to log in to Nomad.

A free PhoneGap Build plan is available that enables you to build 1 private app or you can choose a paid plan option. You can find out more about PhoneGap Build pricing options and create an Adoobe ID

Learning Cordova/PhoneGap

Once you’ve got Nomad setup and have built the demo app, you may be wondering where you go next. There are lots of great tutorials around the net to help you get started, so we’ve tried to collect a few here to get you started.

PhoneGap API documentation
Your first stop should be the PhoneGap API documentation which details the PhoneGap/Cordova Javscript library and the functions it gives you for access to local device features.

Tutorials
A google search on ‘phonegap tutorial’ will get you started, but here are a few we’d recommend:

Tuts Mobile PhoneGap articles
Safari books online PhoneGap articles
If you’ve come across other good tutorials.

Deploying your Android App

Once you have asuccessfully built your app, you have an .apk file. The .apk file is the compiled, digitally signed version of your code, packaged ready for distribution.

To install it on a device, you need to enable installation of non-Market applications first:

Go to your device’s Settings page
Tap Applications
Ensure Unknown sources is checked
You then make the .apk file available on your device:

Dropbox (or similar)
If you use Dropbox, or a similar file synchronization service, drop the .apk file into your shared folder. Navigate to it on your device, and open it. You are prompted to install your app.

USB storage
Connect your Android device using its USB cable, and enable USB Storage. Copy the .apk file to your device. Use a file manager to open the file; you are prompted to install your app.

Android SDK
If you have the Android SDK installed on your computer and are familiar with its use, you can use the adb install command to install your app.

The Nomad blog

Mobile Development with Azure Mobile Services using HTML5 & JavaScript
by The Nomad Team,
In this tutorial, published on Code Project, we demonstrate how you can build a cross-platform mobile app with Azure Mobile Services using HTML5 and JavaScript. The tutorial uses the sample code below and adapts the sample todo app that’s part of the Get started with Mobile Services tutorial.

Download the AMS HTML5/JavaScript Sample

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.

Never fear though: if your background is almost any flavour of .NET web development there’s a much easier solution: just use HTML5 and JavaScript, which you probably already know, to develop your app, and integrate with AMS from there.
Read the full article on Code Project…

Nomad is hiring!

Want to work on the best hybrid mobile and tablet development platform in the making? Want to make it easy and painless for people to build awesome mobile and tablet apps across multiple platforms? Got a passion for creating great products and services?

Then come and work for Nomad!

We’re looking for great software engineers, and a product marketing manager – all of them with an entrepreneurial bent. If that sounds like you find out more and apply using the following links:

Software Engineer
Product Marketing Manager
If you have any questions about either role please feel free to drop us an email at careers@vsnomad.com.

Nomad for Visual Studio appearing on both Channel9 and The Tablet Show

I’m very excited to announce that Nomad will be appearing on both Channel9 and The Tablet Show in episodes being recorded at the end of this month. These are both great shows and we’d like to thank our friends at Microsoft and .NET Rocks for inviting us on – we’re really looking forward to doing them!

Stay tuned for further updates nearer the time!

Transitioning between pages with JQuery Mobile and Knockout.js

This post is part of a series about how some engineers at Red Gate spent a week building an end-to-end Nomad for Visual Studio sample. You can find the rest of the posts using the dtw-crm-sample tag.

Now that we have a login screen and a search page that both work in isolation, we need to tie them together and provide a way for the user to transition between them.

This is the part of the application that I found trickiest to do and I couldn’t really find a great way to structure things. At its simplest, JQM provides a really nice way to switch between pages in your application:

$.mobile.changePage(url);
The reason we couldn’t use this simple function is because the page that is going to be loaded needs to have some bindings applied using the Knockout.js function:

ko.applyBindings(viewModel);
but where should we make that call? We have a few options:

Destination page constructs view model and calls binding
In the HTML for the destination page, it could know how to construct the view model and register it with Knockout.js

This doesn’t work in our case though as I want to be able to construct the view model for the page that is being loaded with information that exists on the current page. For example, I want the search page that is being loaded to know what server it should talk to and that is information that must be passed through from the Login page.

We could use the query string to pass along parameters but it just seemed ugly, especially when you want to pass on complex objects.

Bind an event handler to fire after destination page has rendered
We could bind an event handler attached in the original page that says when then second page appears, call Knockout.js with a specific view model that has already been constructed. This looks like:
$(‘#SearchPage’).live(‘pageshow’, function (event, ui) {
ko.applyBindings(new SearchPageViewModel(server, user, password), document.getElementById(“SearchPage”));
});

$.mobile.changePage(‘searchPage.html’);
This is the approach I went with initially. In the LoginViewModel I attached an event handler that said when a <div> with the id ‘SearchPage’ appeared, then Knockout.js should be called to bind a SearchPageViewModel() to it.

This actually worked quite well but unfortunately, it starts to fall apart when you transition back and forth between pages. Consider the following flow:

Login Page – User presses the login button

Attach the event handler and call transition page

The Search Page is brought into view and the bindings are applied

Search Page – User presses the back button

App transitions back to the login page

Login Page – User presses the login button

Attach the event handler and call transition page

Now there are two event handler registered looking out for the search page <div>

The search page is brought into view and the bindings are applied twice as the event handlers’ fire.

This makes Knockout extremely unhappy.

A Solution: Introduce some global state
The solution I actually ended up going with was to introduce a global object that was responsible for managing the lifetime of view models and transitioning between pages. I would be really happy to get feedback on this approach as I couldn’t find much on the web about a nicer way to architect Cordova applications using Knockout.js and I would be keen to hear about alternative approaches to dealing with the issues.

Instead of calling $.mobile.changePage() directly, all my view models will call PageStateManger.changePage(url, viewModel) which will be responsible for changing to that page and applying the view model. You can see the full code on GitHub

It’s a pretty simple approach, basically:

When the global PageStateManager is created, it registers a single event handler which will listen for the JQM ‘pagechange’ event

When changePage is called by a source view model, it does two things:

it stashes away the view model that it has been given for the target page in an array – this is the global state that is maintained that I don’t see a way to get away without.

It then calls the built-in JQM changePage() function

When JQM has grabbed the page and inserted it into the DOM, it will call the ‘onpagechange’ event handler with a reference to that <div>. Each of the pages in the app are marked up with a data- attribute instructing the PageStateManager which view model to go and get from the global cache and apply. I could have done this using the URL of the page as the key, but I found that using the data-viewModel attribute was very comfortable coming from WPF where each UI element can define a <DataContext>

Now forward transitions are taken care of, and when transitions are initiated by something other than code, such as the back button, it will still work because the same ‘onpagechange’ event will fire and the PageStateManager can go and fetch the necessary ViewModel based on the data-viewModel attribute of the page.

All in all, this isn’t the most disgusting code I have written as I can’t see how to do without at least some global state. If there is anyone out there that has a nicer way deal with the issues, I would be really happy to hear from you.

Accessing a remote data-store with CORS from PhoneGap

Last week Amazon added support for Cross-Origin Resource Sharing (CORS), allowing web and mobile applications to easily interact with resources stored on AWS S3. This is good news for mobile developers as we can now build apps which access and update data stored on S3 without needing a custom proxy server. In this post we will show an example of this technology in action by building an Android app using Nomad for Visual Studio and PhoneGap. The source and app files are included at the end.

What is CORS?
The same origin policy limits how webpages (or mobile apps) on one domain interact with content from another domain. CORS is a specification that allows you to access data stored remotely (for example on S3) from your app without the extra work of passing it through a proxy, as required by this policy. AWS’s support for CORS means you can now “implement HTML5 drag and drop uploads to Amazon S3, show upload progress, or update content” easily from within your app.

In this post we’ll be building an app which accesses a data-store on S3 and allows the user to filter and search through the data. This will be relevant to you if you have a database that your app needs to access, but also needs to be regularly updated. We’re using sample real-estate data and our app will allow the user to search through our database for a house in their city, so lets get started.

Your data and Amazon

To begin with you’ll need an AWS account. You can then upload your data to an S3 bucket. We chose to save our data as a JSON file, as this allows for easy manipulation later. We could easily have used a CSV formatted file instead. Here is a sample of our data so you can get a feel for things (before you get excited about the prices just remember this is all fake data):
[ {
“id”: “8”,
“street”: “2961 19TH AVE”,
“city”: “SACRAMENTO”,
“beds”: “3”,
“baths”: “1”,
“sq__ft”: “1177”,
“price”: “91002”,
},
{
“id”: “9”,
“street”: “11150 TRINITY RIVER DR Unit 114”,
“city”: “RANCHO CORDOVA”,
“beds”: “2”,
“baths”: “2”,
“sq__ft”: “941”,
“price”: “94905”,

} ]
The next important step is to allow CORS access to your S3 bucket, which can be done in the online console using this guide. Our CORS configuration file looks like this:

<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
The key point is that all headers and origins are allowed, as indicated by the wildcards (*), this will allow your app to access the S3 bucket. For increased security you could specify custom headers, and mirror this in your AJAX call later, but because your code will be run from the local app you need to allow all origins or specify the origin as null. You will also need set the permissions for the data itself so that it is either publicly available or requires authentication, using this guide.

Building the App

Now that the data is accessible you can request it from your app, so lets have a look at that. We started from the Nomad template and removed all demonstration functions, next we requested the data using an AJAX call like this:
$.ajax({
url: ‘http://nomad-demoapp1.s3.amazonaws.com/realestatedata.json’,
dataType: ‘json’,
success: function (data) {
make_table(data);
}
});
The addition of CORS on S3 allows this request to be carried out, previously one would have had to either proxy the request through your own server or used JSONP as a workaround.

The real estate data is now safely downloaded and we can display it in our app. We chose to use DataTables , a plugin for jQuery, as this makes searching through and filtering data easy. Our basic layout looks like this:

function maketable() {
// Initialising the table & setting up some styling parameters
$(‘#dynamictable’).html(‘<table cellpadding=”0″ cellspacing=”0″ border=”0″ class=”table table-striped table-bordered” id=”housetable”></table>’);
// Filling the table with data
$(‘#housetable’).dataTable({
//Using our data file from S3
“aaData”: data,
// Defining which columns we want to use from the data
“aoColumns”: [
{ “sTitle”: “City”, “mData”: “city”},
{ “sTitle”: “Bedrooms”, “mData”: “beds” , “bSearchable”: false},
{ “sTitle”: “Bathrooms”, “mData”: “baths”, “bSearchable”: false},
{ “sTitle”: “Square Footage”, “mData”: “sq__ft” , “bSearchable”: false}
{ “sTitle”: “Price”, “mData”: “price”, “bSearchable”: false,
“mRender”: function ( data ) {
return (“$” + data.commafy());
}
}
],
// Sorting the table by the first column
“aaSorting”: [[0, “asc”]],
// Initiallizing TableTools, a styling extension
“sDom”: “<‘row'<‘span6’><‘span6’>r>t<‘row'<‘span6’i><‘span6’p>><‘bottom’f>”,
});
};
We have chosen to only display a subset of the data in the original file, but it is all available locally if we need to call it up. We were also able to modify how the data is displayed, for example the price values were converted to commafied strings which are easier to read. We only want users to be able to search using the city field, so the others have been disabled. The resulting table looks like this in the browser:
This table can be sorted by any of the columns and filtered as-you-type using the search box.

Styling
The styling for this table was done using Bootstrap which is responsive to different screen sizes so its good for mobile development. Remember to use all the “responsive” options so that your app adjusts to different form factors.

Our home

Nomad is part of Red Gate software in Cambridge where we build ingeniously simple tools and do amazing things like putting DBA’s into space.

Pricing FAQs

I’m an existing customer – can I add extra developer licenses?
Absolutely. and we will add the extra licenses. Just let us know how many additional developers licenses you would like.
I’m an existing Nomad customer – can I upgrade my plan to the latest version that includes the UI designer?
Yes.
Can I try Nomad before I pay for a subscription?
Absolutely! Simply enter your email address into the text box at the top or bottom of the page to create your Nomad account and begin your fully functional 14-day free trial. Download and install the Visual Studio plug-in, create your Nomad project and start building your mobile apps. No payment details required – just get coding!
Can I choose to pay for more than 1 month at a time?
Yes. We offer 6 and 12 month subscriptions with a one off payment for your convenience. Choose your preferred option when entering your payment details.
I no longer need my subscription for Nomad – how do I cancel?
The easiest way is to contact us or simply follow the instructions in the email that was sent when registering.
Which payment methods do you accept?
We accept almost all major credit cards (Visa, Mastercard, Amex & Discover). You can also choose to pay via PayPal.
Will my apps still work if I cancel my Nomad subscription?
Absolutely! Cancelling your Nomad subscription does not affect any mobile apps you have created during your trial or subscription period.
I’d like to request a feature!
We love to get feedback about Nomad. If you have any feedback or want to raise an issue you are having then just head over to our Nomad UserVoice forum and let us know. You can also vote for any features other users have posted.