Introduction
In this blog post we’ll learn how to build a mobile application for multiple platforms by using JavaScript library called jQ.Mobi and PhoneGap cloud build service.
In the first part, there will be shown steps of building a “Hello, world” mobile application in HTML5/JavaScript/CSS3. This will be done by using free jQ.Mobi library that allow us to build application with native look&feel of the specific platforms in very easy way.
The second part will describe how to use PhoneGap cloud build service which allow us to build our previous “Hello, world” project for multiple platforms. What this service is providing, is it will build executable install files for each of the platforms: iOS, Android, WP, Blackberry, HP and Symbian.
Part 01 – “Hello, world”
Firstly, download jQ.Mobi library from GitHub link just by clicking ZIP button. After download finishes, extract the archive.
Now create a separate folder for your new “Hello, world” project. Inside the directory create another directory named “www”. Copy plugins, kitchensink and ui folders from extracted jQ.Mobi folder. Also, copy jq.mobi.js and jq.mobi.min.js. In the “www” folder, create index.html empty file. Now the current folder structure should look like this:
Picture 01 – Project directory structure
Now we’ll edit our index.html file with the following code:
<!DOCTYPE html>
<!--HTML5 doctype-->
<html>
<head>
<title>jqUi Starter</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="stylesheet" type="text/css" href="kitchensink/icons.css" />
<link rel="stylesheet" type="text/css" href="kitchensink/jq.ui.css" title="volcano"/>
<script type="text/javascript" charset="utf-8" src="ui/jq.ui.min.js"></script>
<script>
if (!((window.DocumentTouch && document instanceof DocumentTouch) || 'ontouchstart' in window)) {
$.os.android = true; //let's make it run like an android device
}
</script>
<script type="text/javascript">
var webRoot = "./";
$.ui.backButtonText = "Back";// We override the back button text to always say "Back"
</script>
</head>
<body>
<div id="jQUi"> <!-- this is the main container div. This way, you can have only part of your app use jqUi -->
<!-- this is the header div at the top -->
<div id="header">
</div>
<div id="content">
<!-- here is where you can add your panels -->
<div title='Welcome' id="main" class="panel">This is a "Hello, world" sample.</div>
<div title="Targeting platforms" id="jqmweb" class="panel" data-header="testheader">
<h2 class='expanded' onclick='showHide(this,"jqweb_info");'>Platforms</h2><p id='jqweb_info'>
We wish to support following platforms:</p>
<ul>
<li>iOS</li>
<li>Android</li>
<li>Windows Phone</li>
<li>Blackberry</li>
<li>HP</li>
<li>Symbian</li>
</ul>
<br/><br/>
</div>
</div>
<!-- bottom navbar. Add additional tabs here -->
<div id="navbar">
<div class="horzRule"></div>
<a href="#main" id='navbar_home' class='icon home'>home</a>
<a href="#jqmweb" id='navbar_target' class='icon target'>target</a>
</div>
</div>
</body>
</html>
In the head tag you can see we referenced JavaScript files and CSS from the jQ.Mobi library. There is additional initialization JavaScript that runs first time the app starts. In the body part there are two divs that are loaded depending on button click from the navigation bar (“navbar”). First div with id="main" is the main page, while other div with id="jqmweb" represents the second page with list of items.
TIP: If you want to use Visual Studio for easy project editing, simply go File>Open>Web Site and browse to your project folder.
Now you can test index.html page preview in browser. After you navigate with “home” and “target” buttons you should see slide animation.
|
|
Picture 02 – Main page | Picture 03 – Target page |
Now when your “Hello, world” app is done, zip the entire folder to .zip archive.
Part 02 – PhoneGap build service
With your browser go to https://build.phonegap.com/. Login with your Adobe account or GitHub account. If you don’t have account you can go to the GitHub official web site and register for a free account. After you have been logged in:
1. Click on New App button.
2. Select Private tab, click Upload a .zip file, browse to your zip project archive and click Ready to build.
TIP: For a free use you can only upload 1 zip archive, but instead, you could use GitHub repository and build your application directly from there.
3. After your build is finished you can download executable files for these platforms:
TIP: For the iOS case you’ll first need to upload application certificate and build afterwards.
