Friday, September 27, 2013

Getting Started with Mobility, Part 10: A Back-end in the Cloud with Windows Azure Mobile Services

In this series of posts, we're looking at how to get started as a mobile developer. In Parts 1-9, we examined a variety of mobile platforms and client app development approaches (native, hybrid, web). We've seen a lot so far, but that's only the front-end; typically, a mobile app also needs a back-end. We'll now start looking at various approaches to providing a back-end for your mobile app. Here in Part 10 we'll look at Microsoft's cloud-based Mobile Backend As A Service (MBAAS) offering, Windows Azure Mobile Services.


About Mobile Back-end as a Service (MBaaS) Offerings
To create a back-end for your mobile app(s), you're typically going to care about the following:
  • A service layer, where you can put server-side logic
  • Persistent data storage
  • Authentication
  • Push notifications
You could create a back-end for the above using many different platforms and technologies, and you could do so in a traditional data center or in a public cloud. You'd need to write a set of web services, create a database or data store of some kind, provide a security mechanism, and so on.

What's interesting is that today you can make a "build or buy" decision about your mobile back-end: several vendors and open source groups have decided to offer all of the above as a ready-to-use, out-of-box service. Microsoft's Windows Azure Mobile Services is an example of this. Of course, it doesn't do all of your work for you--you're still going to be responsible for supplying a data model and server-side logic. Nevertheless, MBaaS gives you a huge head start. MBaaS is especially valuable if you want to focus your time on your mobile app, not the supporting elements.


Windows Azure Mobile Services
Windows Azure Mobile Services "provides a scalable cloud backend for building Windows Store, Windows Phone, Apple iOS, Android, and HTML/JavaScript applications. Store data in the cloud, authenticate users, and send push notifications to your application within minutes." Specifically, that means you get the following:
  • Authentication (to Facebook, Twitter, Microsoft, or Google accounts)
  • Scripting for server-side logic
  • Push notifications
  • Logging
  • Data storage
  • Diagnostics
  • Scalability
The service will also generate for you starter mobile clients for iOS, Android, Windows Phone, Windows 8, or HTML5. You can use these apps as your starting point, or as references for seeing how to hook up your own apps to connect to the service.


Pricing
So what does all this back-end goodness cost? At the time of this writing, there are Free, Standard ($25/month), and Premium ($199/month) tiers of pricing. You can read the pricing details here.


Training
We reference training resources throughout this post. A good place to start, though, is here:

Get Started with Mobile Services
Android    iOS    Windows Phone    Windows 8    HTML5


Provisioning a Mobile Service
The first thing you'll notice about WAMS is the care that's been given to the developer experience, especially your first-time experience. Once you have a Windows Azure account, you'll go to azure.com, sign-in to the management portal, and navigate to the Mobile Services tab. From there, you're only a handful of clicks away from rapid provisioning of a mobile back-end.

1 Kick-off Provisioning
Click New > Mobile Service > Create to begin provisioning a mobile service.

Provisioning a Mobile Service

2 Define a Unique Name and Select a Database
On the first provisioning screen, you'll choose an endpoint name for your service, and either create a database or attach to one you're previously created in the cloud. The service offers a free 20MB SQL database. You'll also indicate which data center to allocate the service in (there are 8 worldwide, 4 in the U.S.)

Provisioning a Mobile Service - Screen 1


Provisioning a Mobile Service - Screen 2

3 Wait for Provisioning to Complete
Click the Checkmark button, and provisioning will commence. It's fast! In less than a minute your service will have been created.

Newly-provisioned Mobile Service Listed in Portal

4 Use the New Mobile Service Wizard
Click on your service to set it up. You'll be greeted with a wizard that walks you through. This is especially helpful if this is your first time using Windows Azure Mobile Services. On the first screen, you'll indicate which mobile platform you are targeting: Windows Store (Windows 8), Windows Phone 8, iOS, Android, or HTML5 (don't worry, you're not restricted to a single mobile platform and can come back and change this setting as often you wish).

Setup Wizard, Screen 1

5 Generate a Mobile App that Uses your Service
Next, you can download an automatically generated app for the platform you've selected, pre-wired up to talk to the service you just provisioned. To do so, click the Create a New App link. This will walk you through 1) installing the SDK you need for your mobile project, 2) creating a database table, and 3) downloading and running your app. The app and database will initially be for a ToDo database, but you can amend the database and app to your liking once you're done with the wizard.

Generating a Mobile Client App for Android
 
In the next section, we'll review how to build and run the app that you generated, and how to view what's happening on the back end.
 

Building and Running a Generated Mobile App
Let's walk through building and running the To Do app the portal auto-generates for you. The mobile client download is a zip file, which you should save locally, Unblock, and extract to a local folder. Next, you can open the project and run it--it's that simple to get started.

Running the App
When you run the app, you'll see a simple ToDo app--one that is live, and uses your back-end in the cloud for data storage. Run the app and kick the tires by adding some tasks. Enter a task by entering it's name and clicking Add. Delete an item by touching its checkbox.

To Do app running on Android phone

Viewing the Data
Now, back in the Windows Azure portal we can inspect the data that has been stored in the database in the cloud. Click on the Data link at the top of the Windows Azure portal for your mobile service, and you'll see what's in the ToDo table. It should match what you just entered using the mobile app.

Database Data in the Cloud


Dynamic Data
One of the great features of Windows Azure Mobile Services is its ability to dynamically adjust its data model. This allows you to change your mobile app's data structure in code, and the back-end database will automatically add new columns if it needs to--all by itself.

Get Started with Data in Mobile Services
Android    iOS    Windows Phone    Windows 8    HTML5


Dynamic data is a great feature, but some people won't want it enabled, perhaps once you're all ready for production use. You can enable or disable the feature in the Configure page of the portal.

Server-side Logic
Windows Azure Mobile Services happens to use node.js, which means server-side logic is something you write in JavaScript.

Mobile Services Server Script Reference

You can have scripts associated with your database table(s), where operations like Insert, Update, Delete, or Read execute script code. You set up these up on the Data page of the portal for your mobile service.

Database Action Scripts
 
Here's an example of a Read script that restricts processing to only return results owned by the current authenticated user:
 
function read(query, user, request) {    
    query.where({        
        owner: user.userId
     });    
    request.execute();
}
 

You can also set up scheduled scripts, which run on a schedule. On the Schedule page of the portal, click Create a Scheduled Job to define a scheduled job.

Creating a Scheduled Job

Once you've define a scheduled job, you can access it in the portal to enter script code and enable or disable the job.

Setting a Job's Script Code

Authentication
You can authenticate against Microsoft accounts, Facebook, Twitter, or Google. This involves registering your app for authentication and configuring Mobile Services; restricting database table permissions to authenticated users; and adding authentication to the app.

Get Started with Authentication
Android    iOS    Windows Phone    Windows 8    HTML5


Push Notifications
Push notifications support is provided for each mobile platform. Tutorials acquaint you with the registration and code steps needed to implement push notifications for  each platform,

Get Started with Push Notifications
Android    iOS    Windows Phone    Windows 8    HTML5


Summary
Windows Azure Mobile Services provides a fast and easy mobile back-end in the cloud. It offers the essential capabilities you need in a back end and supports the common mobile platforms. If you're comfortable expressing your server-side logic in node.js JavaScript, this is a compelling MBaaS to consider.

Tuesday, September 17, 2013

My Review of the HTC One Android Phone

I recently acquired an HTC One Android phone, and here's my review of it.

I do mobile development across four different platforms (iOS, Android, Windows Phone, and Windows 8), and accordingly I have a nice collection of devices. One thing prominently missing from my collection was an Android phone. Although I do have a Nexus 7 Android mini-tablet, not having an Android phone, with a service plan, left me guessing as how to well my Android apps played on an actual phone in the real world.

After surveying the options, I decided I should either get the new HTC One or a Samsung Galaxy S4, the leading choices in the U.S. After spending some time reviewing each of them online, I concluded that both were very good phones and the only way I was going to be able to choose between them was to physically compare them. So, off I went to my local AT&T store where I could get hands-on time with each. The aluminum HTC One has a nice solid feel over the plastic Samsung S4, and that's what ultimately drove me to get the HTC One. In addition, I'd already owned some Samsung phones previously and wanted to see what HTC had to offer.

Specs
Here are the specs on the phone:

Size 137.4 x 68.x x 9.3mm
Weight 143g
Display 4.7 inch, Full HD 1080p, 468 PPI
CPU Speed Qualcomm Snapdragon 600, quad core, 1.7GHz
Platform Android 4.1+
SIM Card Type microSIM
Memory 2GB DDR2, 32GB/64GB total storage
GPS Internal GPS antenna, digital compass
Sensors Gyro, Accelerometer, Proximity, Ambient light
Camera HTC UltraPixel, 1080p Full HD video
Battery Embedded rechargeable Li-polymer, 2380 mAh

Be sure not to confuse the HTC One with its predecessor, the HTC One X. The HTC One has some notable improvements over the HTC One X, including higher resolution and  a more powerful battery.

Display
The display is the star of the HTC One, so let's begin there. It has an impeccable and brilliant 4.7 inch, 1080p display screen. It's something you will appreciate every single time you use your phone.

Reading a Kindle e-book on the HTC One

Viewing a vacation photo on the HTC One

Audio
The display may be the star of the HTC One, but audio is a co-star also worth mentioning. It has good front-facing speakers that do your music justice, and Beats Audio which is basically an equalizer profile.

Beats Audio in Settings

There's also a built in FM radio, which you can only use when your earbuds/headphones are in. I find myself using the radio feature quite a bit as I work.

FM Radio

Feel of the Device
The large screen is great for viewing, but at what cost does this come? Unlike some other large-screen phones, the HTC One is not overly heavy or thick. For example, my similar-size Nokia Lumia 20 Windows Phone weighs in at 185 grams and is also quite thick. The HTC One is lighter, at 143 grams, and not nearly as thick (137.4 x 68.2 x 9.3mm). The chamfered back fits in your hand easily. All in all, it's a nice compromise, in the best sense of the word, of screen size vs. weight and thickness. I don't tire of holding it.

HTC One: Nice Large Screen, But Fits Comfortably In Your Hand

At the time I ordered my phone, the only choices were black or silver. Since every other phone I have is black, I went with silver even though I wasn't wild about it. However, it has since grown on me. Naturally, only a week or two after my purchase, HTC has announced new color choices--including red and a beautiful blue. I am fairly despondent about missing out on the blue... :(

Color Choices will Soon Be Red, Blue, Black, or Silver

Android Version and Customization
The HTC One came with Android 4.1 Jelly Bean, and an Android 4.3 update is supposed to be right around the corner.

With any SmartPhone, you're going to need to spend some time "making it yours". That includes customizing your wallpaper, your lock screen, your ringtone, and installing your favorite apps. In the case of Android phones, you also often have to deal with what the handset maker and carrier have done to it. My phone came littered with the very unnecessary HTC Sense home screen and widgets, and a large set of AT&T applications that I am unlikely to ever use. I should mention I had the option of getting this phone directly from the Google Play store, which would have bypassed the carrier customizations, but I was genuinely interested in what the typical consumer experience is.

To make my phone experience better, I installed the free Nova Launcher from the Google Play store and rearranged my desktop to my liking, with my apps neatly organized across several application folder screens. I also installed Google Chrome to replace the stock browser named "Internet". With these changes, I am a happy camper.

My Phone Customized with Nova Launcher

Performance and Battery Life
It's early yet, but so far, I've been pleased with both the performance and battery life of my HTC One. It largely runs my apps speedily and happily, and it hasn't run out of juice before the day is out. The quad core 1.7GHz processor and 2380 mAh battery are largely to thank for that.

Summary
The HTC One is a premier Android phone whose fit and finish stand out. If you can afford a high-end Android phone, this is definitely one worth considering. If like me you develop for the Android platform, you might consider getting one of these, along with some "lesser" devices, in order to have a spectrum to test against.

Tuesday, September 10, 2013

Getting Started with Mobility, Part 9: Mobile Web with Responsive Web Design

In this series of posts, we're looking at how to get started as a mobile developer. In Part 1, we provided an overview of the mobile landscape, and discussed various types of client app development (native, hybrid, mobile web) and supporting back-end services. In Parts 2-5, we examined native app development for iOS, Android, Windows Phone, and Windows 8. In Parts 6-8 we examined three hybrid platforms, Xamarin, Titanium, and Icenium. Here in Part 9, we will look at Mobile Web.



Mobile Web: The Good, The Bad, and The Ugly
Mobile Web is about writing an HTML5 web application that will run acceptably on mobile devices in a browser, rather than executing a native app on the device--and it is controversial. Mobile web is often looked down upon, especially after Facebook's Mark Zucker declared that betting on HTML5 was a mistake last year. Using mobile has been likened to putting the engine of a Smart Car into a Ferrari. I think it helps to make a distinction between developing a web site to also render well on mobile devices--surely a good idea that everyone can get behind--vs. deciding to create a mobile web solution in place of a true mobile app; it's the latter case that's controversial.

Let's try to take an even-handed look at mobile web. First of all, mobile web has some good things going for it, and that includes lower cost of development and easier to find developer skills. You create a single web solution, using web skills that you can readily find affordable developers for, that support a large variety of mobile devices. Compare that to developing an assortment of mobile app projects for each target platform, each in a different language, and you can appreciate the savings.

Mobile web is a bad choice when you have requirements a browser-based solution can't satisfy. That includes access to the camera and other hardware sensors on your phone; and access to the mobile operating system for such things as contacts and photos and videos. HTML5 does give you some access to your phone's sensors, such as Geolocation (GPS) support; and some access to your phone's operating system, such as Web Storage. But the bottom line is, there's far more denied to you than made available to you. And we should point out, the most innovative mobile apps tend to take advantage of the phone's hardware and operating system.

And then there's the ugly: mobile web implementations can be unfulfilling to use, for cosmetic or performance reasons. From a user experience standpoint, it takes extra work to make a browser-based web app shine on a mobile device, including detecting the device you're running on and honoring its user interface design philosophy. Overly-simplistic mobile web solutions stand out like a sore thumb because they aren't honoring your phone's conventions. Browser-based solutions can also perform quite poorly compared to native apps.

Mobile web apps are also not delivered through your device's App Store. However, it is possible on many mobile platforms, once you pull up a web app in a browser, to save it to your home screen so that it has the appearance of an installed app.

Having said all that, when is a mobile web approach worth considering? I would say, in these cases:
  • When native development is not an option (perhaps you only have web developers available, or are cost-constrained).
  • When you don't need access to your device hardware or its operating system beyond what HTML5 can give you.
  • When your app is simple, and you don't have robust performance requirements.
  • When you don't need to be in the mobile App Stores.
  • When you want to provide a web experience for desktop computers that also shows acceptably on mobile devices.
  • When you need a reasonable fallback for mobile devices that you won't be creating targeted native apps for.
With all of that out of the way, read on if you still think mobile web might be for you.


Responsive Web Design
A key technique in mobile web is Responsive Web Design, which is all about detecting some of the characteristics of the device you are running on (especially screen dimensions) and adapting layout intelligently. Your layout follows a fluid grid model. You tend to use a lot of percentages and proportional style rules in RWD; for example, you might establish a left panel as 30% of available width and a main panel as 70% of available width. By using proportional measurements (which you can also apply to font selection and images), your app can be very tolerant of device size and orientation differences.

Just making your layout proportional is not enough, however: on tablets and phones you'll need to arrange things differently at times, reduce or leave out some content, and make different sizing decisions. To the rescue comes CSS Media Queries, a feature in CSS3 that allows you to have conditional style rules that apply only when certain criteria are satisfied. For example, the CSS media query below only applies when running on a phone-sized screen. Using CSS Media Queries, you can have a base set of CSS rules and then one or more sections of conditional rules that kick into action for some categories of devices.

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    /* CSS styles for phones go here */

    ...
}


You can implement your own responsive web design, or leverage frameworks that do much of the work for you. If you're doing it on your own, I recommend devouring the book Responsive Web Design by Ethan Marcotte and taking it to heart. Below we examine some of the responsive frameworks that are available.


Twitter Bootstrap
Twitter Bootstrap is a popular open-source framework that automates responsive web design using a grid system. It's intended for web site development but has good support for mobile devices.

Bootstrap uses classes to define rows, columns, and spanning as shown in the sample HTML fragment below.

    <div class="row">
      <div class="span4">
        <div class="row-fluid">
          <div class="4">...</div>
          <div class="4">...</div>
          <div class="4">...</div>
        </div>
      </div>
      <div class="span8">...</div>
    </div>


Apps written in Bootstrap behave well on phones, tablets, and desktop-sized screens. For example, this sample renders quite differently on different size devices.

Rendering on an iPhone
 
Rendering on an iPad
 
Rendering on a desktop
 
jQuery Mobile
jQuery Mobile is a popular mobile web framework, described as "a unified, HTML5-based user interface for all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation." As its name implies, jQuery Mobile is oriented toward mobile devices with touch interfaces.

Here's an example of HTML markup that uses jQuery Mobile. jQuery Mobile relies heavily on data-xxxx attributes in HTML elements.

<!DOCTYPE html>
<html>
    <head>
       <title>Page Title</title>
       <meta name="viewport" content="width=device-width, initial-scale=1" />
       <link type="text/css" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" />
    </head>

    <body>
        <div data-role="page" id="first" data-theme="a">
            <div data-role="header">
                <h1>Page Title1</h1>
            </div><!-- /header -->

            <div data-role="content">
                <p>Page content goes here.</p>
                <a href="#second" data-transition="flip">Go to second page</a>
            </div><!-- /content -->

            <div data-role="footer">
                <h4>Page Footer1</h4>
            </div><!-- /footer -->
        </div><!-- /page -->

        <div data-role="page" id="second" data-theme="b">
            <div data-role="header" data-add-back-btn="true">
                <h1>Page Title2</h1>
            </div><!-- /header -->

            <div data-role="content">
                <p>Page content goes here.</p>
            </div><!-- /content -->

            <div data-role="footer">
                <h4>Page Footer2</h4>
            </div><!-- /footer -->
        </div><!-- /page -->
        <!-- JavaScript placed at the end of the document so the pages load faster. -->
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
    </body>
</html>


Let's look at an example. The Dodge mobile website, m.dodge.com, was made using jQuery Mobile, and looks like as follows on phone, tablet, and desktop size screens:


Rendering on an iPhone
 
 
Rendering on an iPad

Rendering on a desktop

There are certainly other frameworks out there, so if you're researching you might also want to check out Kendo UI Mobile and Sencha Touch, among others. Some of these frameworks are open source and free, others require a commercial license. Generally you'll find very good developer resources, online demos, and supporting tools for these frameworks.


Summary: Mobile Web
Mobile Web is often looked upon as a second-class citizen in the mobile development world, a fallback for those who can't develop true native apps. However, that's harsh: while mobile web isn't always the right approach, it certainly has its place in the mobile landscape. It especially makes sense when you have a web site that you want to also be consumable from mobile devices.

Next: Getting Started with Mobility, Part 10: A Mobile Back-end in the Cloud with Windows Azure Mobile Services

Saturday, September 7, 2013

Getting Started with Mobility, Part 8: Hybrid Development in HTML5 with Icenium

In this series of posts, we're looking at how to get started as a mobile developer. In Part 1, we provided an overview of the mobile landscape, and discussed various types of client app development (native, hybrid, mobile web). and supporting back-end services. In Parts 2-5, we examined native app development for iOS, Android, Windows Phone, and Windows 8. In Parts 6-7 we examined two language-oriented hybrid platforms, Xamarin and Titanium. Here in Part 8, we will look at Icenium, which is a web-based hybrid platform.



Web-oriented Hybrid Frameworks
There are several kinds of hybrid frameworks for mobile development, with some pretty stark differences.
  • Language-oriented hybrid platforms like Xamarin and Titanium focus on letting developers work in a familiar language (such as C# or JavaScript). They otherwise strive to wrap and expose native APIs as faithfully as they are able to and produce a native result, or close to it. At runtime, the native apps may host an execution layer (such as Mono for .NET or V8 for JavaScript) or not, depending on the product and target platform. This category of hybrid is generally considered closer to true native.
  • In contrast, web-based hybrid frameworks allow web developers to work in familiar HTML5, CSS, and JavaScript. PhoneGap is the first and most famous of these, but there are modern contenders--such as Icenium. Your application's web code runs in a hosted browser at runtime--which raises some trade-offs between easy development, a faithful user experience for your target platforms, and performance. Before using a web-oriented hybrid approach, you should consider whether that approach is suitable for your application objectives; some prototyping and evaluation is recommended.
Both categories provide ease-of-development and the ability to reuse at least some of your code across multiple target platforms.


Icenium from Telerik: Cross-platform mobile development. Simplified.
Icenium's tag line is, "Cross-platform mobile development. Simplified." Developers in the Microsoft space are likely familiar with the parent company, Telerik, longtime makers of popular web and desktop controls (such as Kendo UI), developer frameworks (such as Sitefinity CMS), and testing tools.

Icenium shares the same open source Apache Cordova heritage as PhoneGap, but tackles one of the key deficiencies of PhoneGap: tooling. It adds a sophisticated IDE and cloud-based services. With it, you can repurpose your web skills to build iOS, Android, and Windows Phone applications that run in native containers.

Unlike the other approaches we've considered in this series, you don't need a Mac for your iOS development with Icenium--a very notable distinction. That's because the compilation happens in Icenium's cloud. That's the ICE in Icenium: "Integrated Cloud Development". As a result of this we-compile-it-for-you approach, you do not have to download and install multiple SDKs for your target platforms.

Of course, a web-based approach alone will not let you get at all of a mobile device's capabilities. With Icenium you can use the JavaScript libraries exposed by Cordova to get at the Accelerometer, Camera, Compass, Contacts, File system, Geolocation, Media, Networking, Notifications, and Storage.


The Computer You'll Develop On: A PC, or use a Browser-based IDE
Icenium provides a full IDE for Windows PCs named Graphite. Notably, there is also a browser-based IDE also available, named Mist. Using Mist you can use a Mac or pretty much any kind of modern desktop computer. However, if you're a serious Icenium developer, I suggest planning to do your development on a PC where you can use the more robust Graphite IDE.


Developer Tools: Graphite, Mist, and Ion
As we already mentioned, you have a choice of IDEs.

The Icenium Graphite IDE for Windows PCs is a rich desktop application that includes code navigation, refactoring, and ability to update devices with application updates in real-time.

Icenium Graphite IDE for Windows

The Icenium Mist IDE, in contrast, can be used anywhere where you have access to a browser--certainly a handy option to have available. Thought not as full-featured as Graphite, Mist does provide quite a bit of functionality, including code completion, auto-indentation, and syntax highlighting.

Icenium Mist IDE, shown running on a Mac
 
Debugging Experience
Your Icenium apps can launch in a simulator, or on actual devices connected to your computer.
 
The simulator is Icenium's own simulator, not to be confused with the official emulators found in the mobile SDKs from Apple, Google, and Microsoft.
 
Icenium Simulator
 
To run on an actual device, in the case of iPhone or iPad, you'll need to export your Apple developer certificate into Icenium. It took me some time to figure out how to do this correctly--but you only have to do it once, and then you're set. Alternatively, if you'd like to avoid the hassle of provisioning your mobile apps in the developer centers before you test them on real devices, you can take advantage of Icenium Ion. Ion gives you a pre-installed test client on your mobile devices that all of your Icenium apps can run through.
 
 
Programming: HTML, CSS, and JavaScript
In Icenium you're doing web development, so that means working in the famous trio of HTML, CSS, and JavaScript. You'll typically want to leverage a mobile UI framework such as Kendo Mobile UI (a license for this is included with your Icenium license), or jQuery Mobile.

To illustrate what Icenium programming is like, let's consider the HTML, CSS, and JavaScript from one of the Icenium samples, the Compass application. The appearance of the app is shown below.

Compass Sample

Let's begin with the project structure, shown below. It should look much like most web applications, with areas for HTML markup, CSS styles, media, and JavaScript.

Compass sample in Graphite Project Navigator

You'll often use a Single Page Application (SPA) model in your Icenium apps. Below is the HTML page from the Compass sample application. As in a web application, its purpose is to define the layout and structure of page view(s).

<!DOCTYPE html>
<html>
 <head>
  <title>Compass Sample</title>

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta charset="utf-8">

  <link href="styles/main.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
  <script type="text/javascript" charset="utf-8" src="scripts/main.js"></script>
 </head>
 <body>
  <header class="header">
   <h1>Compass</h1>
  </header>
  <div class="content">
            <div class="action-area ch30">
                <button class="button dh" id="watchButton">Start Compass</button>
       <button class="button dh" id="refreshButton">Current Orientation</button>
   </div>
            <div class="result-area ch70">
                <div class="results">
                    <div class="mapCompassFrame">
            <div id="compass" class="mapCompass"></div>
           </div>
                    <div id="result" class="desc"></div>
                </div>
                <div class="separator"></div>
   </div>
  </div>
  <footer class="footer">
   <div>Cordova API Samples</div>
  </footer>
 </body>
</html>


Here's a portion of the CSS for the same app. As with any mobile development, you need to consider the variety of device sizes and orientations. Your CSS should support a responsive/adaptive approach to layout.

/* apply a natural box layout model to all elements */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

html
{
 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    height:100%;
}

body
{
 font-family: sans-serif, Arial, Segoe UI;
 font-size: 16px;
 margin: 0;
 padding: 0;
    height:100%;
    padding: 60px 0px 24px 0px;
    overflow:hidden;
}

/*width, height*/
.clear {clear:both;}

.ch10 {height:10%;}
.ch20 {height:20%;}
...
.cw80 {width:80%;}
.cw90 {width:90%;}
.cw100 {width:100%;}


/*header*/
.header
{
 position:absolute;
 top: 0px;
    left:0px;
    width:100%;
    height: 60px;
    border:none;
    background: #dedfe1;
    background: -moz-linear-gradient(top, #ffffff 0%, #e6e6e6 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e6e6e6));
    background: -webkit-linear-gradient(top, #ffffff 0%,#e6e6e6 100%);
    background: -o-linear-gradient(top, #ffffff 0%,#e6e6e6 100%);
    background: -ms-linear-gradient(top, #ffffff 0%,#e6e6e6 100%);
    background: linear-gradient(to bottom, #ffffff 0%,#e6e6e6 100%);
    box-shadow: 0px 1px 0px 0px #fff;
    -webkit-box-shadow: 0px 1px 0px 0px #fff;
    -moz-box-shadow: 0px 1px 0px 0px #fff;
    border-bottom: 1px solid #9ca1a5;
    color: #639ecd;
}
...
 
#compass
{
 -webkit-transition: all 1s ease-in-out;
 transition: all 1s ease-in-out;
}

.mapCompassFrame
{
 width: 154px;
 height: 154px;
 background-image: url("img/compassFrame.png");
 margin: 0 auto;
}

.mapCompass
{
 width: 154px;
 height: 154px;
 background-image: url("img/compass.png");
}
   
/*specific*/
.content > .result-area > .results  > .desc {
    font-size:16px;
    color:#639ecd;
    word-wrap:break-word;
}


Lastly, here's a bit of the JavaScript for the same app, where the compass is interacted with (Android). You may find yourself developing some individual JavaScript modules for each target platform, since their APIs vary.

// file: lib/common/plugin/CompassHeading.js
define("cordova/plugin/CompassHeading", function(require, exports, module) {

var CompassHeading = function(magneticHeading, trueHeading, headingAccuracy, timestamp) {
  this.magneticHeading = magneticHeading;
  this.trueHeading = trueHeading;
  this.headingAccuracy = headingAccuracy;
  this.timestamp = timestamp || new Date().getTime();
};

module.exports = CompassHeading;
});


Base Pricing and Icenium Everlive: Back-end Services
Icenium is rather affordably priced, at $19/month for a developer edition license. There are also professional ($59/mo) and ultimate ($119/mo) licenses, and a free trial is available. You can lower those monthly costs if you pay annually ($16/$39/$79).

Telerik also offers, at additional cost, Icenium Everlive services which are currently in preview. You can use Everlive for cloud-based data storage, hosting of server-side code, and user management. These capabilities are exposed as RESTful services.


Everlive services are managed through a web-based management portal. Plans for Everlive plans can run from free to $299/month depending on the level of services you consume. See plans.


Online Resources
The Icenium web site has a decent developer center--the information is good and attractively laid out, but you may wish there was more of it in some areas. There is a good collection of sample projects you can download. Begin with Getting Started with Icenium.

Here are some key online resources to check out:

Blog
Documentation
FAQ
Whitepapers
Forums
Videos and Demos
Sample Apps
Showcase


Tutorials
Unfortunately, there are not many tutorials available for Icenium--however, you can get started with it easily, and much of your experience as a web developer will guide you. After going through the starter tutorial cited below, you'll largely be dependent on some online videos, studying sample apps, reviewing the documentation, reading the blog, and interacting on the forums. If you happen to be using the Kendo Mobile UI framework, be sure to also visit its developer center for documentation, tutorials, and demos. Similarly, if you're using jQuery Mobile, visit its developer center for learning resources.

1a. Create and Run an App in Minutes with Icenium Graphite
1b. Create and Run an App in Minutes with Icenium Mist

This tutorial walks you though creating, building, and deploying a basic app--there are editions for using Graphite IDE or the browser-based Mist IDE. You use the Kendo UI Mobile template, and end up with a simple that has four views: home, login, location, and weather.

Your First App, running on iPad Simulator


Summary: Icenium Hybrid Mobile Development in HTML
Icenium has a lot going for it: you can use familiar web technologies, it has decent tooling, and compilation is done on your behalf in the cloud. A Mac is not required, even for iOS development. While it isn't free, it is very affordable--especially compared to some of the other commercial hybrid offerings. If a web-oriented hybrid approach makes sense for your mobile apps, Icenium is worthy of consideration.

Next: Getting Started with Mobility, Part 9: Mobile Web with Responsive Web Design