Tuesday, March 5, 2013

Build cross platform mobile application with jQ.Mobi and PhoneGap

 

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:

directory structure

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.










mainpage


targetpage


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.


phonegap-build01


2. Select Private tab, click Upload a .zip file, browse to your zip project archive and click Ready to build.


phonegap-build02


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:


PGBuildApp


TIP: For the iOS case you’ll first need to upload application certificate and build afterwards.

13 comments:

  1. hi

    did you try with adding cordova js into the html?

    there is a conflict between jqmobi and cordova, even simple phonegap native function calls are not working in the jqmobi based app.

    thank you

    ReplyDelete
    Replies
    1. Hi senzen,

      I must say I haven't tried that.
      In this case I only used jQMobi library.

      But, I'm sure you can get conflicted calls or dependencies if you use both JS libs. I would suggest you to use only one library in order to avoid jams. Also, you could try to reference only one JS in your HTML that's needed, but not both in the same HTML.

      I hope this helps :)

      Delete
  2. This comment has been removed by the author.

    ReplyDelete
  3. Hi,

    When I run in this inside Ripple I get 'object has no method "launch"'. Even though jq.ui.min.js is loaded, it's "launch" method is not visible. Timing issue? Ripple is configured to run as if with PhoneGap 2.

    Also, When I run this on my HTC Evo with Android 4.0, the screen shakes like it's having an epileptic fit!

    Your code waits for a 'appMobie.device.ready' event. What creates this?

    Any other integration steps needed?

    I am using PhoneGap 2.2...

    Many thanks
    Jeremy

    ReplyDelete
    Replies
    1. Hi Jeremy,

      I tried to answer on your questions, hope this helps:

      - I give it a spin with Ripple emulator (Chrome plugin) so far in runs correctly with PhoneGap 2.
      I don't know if you made any changes in your sample, but you can test it with dev tools in Chrome or Firebug and check if the error still persists.
      Than it probably doesn't reference .js file correctly. Maybe you place it in a different folder or something.
      $.ui.launch() is called when you want to launch jqUi (see container div). If autoLaunch is set to true, it gets called on DOMContentLoaded.
      If autoLaunch is set to false, you can manually invoke it.
      ```
      $.ui.autoLaunch=false;
      $.ui.launch();
      The timeout is added only as a simple delay (like splash screen). You can try to avoid this by commenting that part of JavaScript.
      $.ui.backButtonText = "Back";
      /* $.ui.autoLaunch = false; //By default, it is set to true and you're app will run right away. We set it to false to show a splashscreen*/
      /* This function runs when the body is loaded.*/
      /*var init = function () {
      window.setTimeout(function () {
      $.ui.launch();
      }, 1500);//We wait 1.5 seconds to call $.ui.launch after DOMContentLoaded fires
      };*/
      //document.addEventListener("DOMContentLoaded", init, false);

      - Huh, I really don't know what can be the source of your problem with HTC. So far I ran it only on Nexus S Andorid 4.1.2 without problems.
      Maybe try to install my .apk from the blog sample > bit.ly/ZuHI6b

      - From api documentation: "This event ('appMobie.device.ready') will fire once all AppMobi library information is loaded.
      Be sure to allow this event to fire before attempting any AppMobi commands.
      In order to load the AppMobi JavaScript library, be sure to include the following JavaScript library in your HTML file."

      - In this blog post I used PhoneGap build service and for this all steps have been descibed in the post. No additional steps are required.


      All the best,
      Vladimir

      Delete
  4. Hi Vladimir,

    Thanks for your fast reply.

    You wrote "In order to load the AppMobi JavaScript library, be sure to include the following JavaScript library in your HTML file." but didn't specify the file. How do I add AppMobi?

    Your demo code above doesn't mention AppMobi...

    Thanks again
    Jeremy

    ReplyDelete
    Replies
    1. Hi Jeremy,

      You are totally right about this.
      I'm missing these two libraries: appmobi.js and xhr.js that needs to be also included.

      Funny I still didn't find these libraries within jsMobi.
      I'll need to update my post again after I find solution.
      If it's any help check this forum post:
      http://forums.appmobi.com/viewtopic.php?f=9&t=1181

      Many thanks,
      Vladimir

      Delete
    2. Short followup:
      I removed this code from my sample, since it is not required for this very simple sample.
      I'll need to cover more of AppMobi details in some additional post.
      So far with my research I found out that if you want to develop fully usable mobile application (using sensors, db...) you'll need to use XDK server that will run locally on your smartphone.

      This can be done in a simple way ( I tried it :) ).
      Step 01: visit http://html5dev-software.intel.com/
      Step 02: click "Create an app now"
      Step 03: follow the wizard which will guide you through building your app
      Step 04: once you confirm your registration your app will be downloaded to your pc
      Step 05: there you'll get all the necessary code (including bundled .js libs) and emulator that will run in Chrome

      I hope I helped.

      Best regards,
      Vladimir

      Delete
    3. Hi Vladimir,

      jqmobi doesn't initiaise properly unless the 'appmobi.device.ready' event is fired. So I think you must include the appmobie javascript file(s).

      But appmobi is similar to Phonegap... so why are you using phonegap and appmobi together?

      Doesn't this replicate APIs? Why is jqmobi tied to appmobi?

      This is quite confusing especially when jqmobi don't answer these questions.

      Cheers for your time.
      Jeremy

      Delete
    4. Thanks Jeremy,

      I agree with you that for developing programmers certainly should choose one cross-platform API over the another, and not to mix it together.

      What I used is simply PhoneGap cloud service that generates installs for each platform. It's easy to use, and has one purpose only - to allow people who don't want to learn about PhoneGap or any other cross-platform API or SDK, but to reuse their knowledge about JS and HTML or some previous app they already developed. Here is a talk that explains two different approaches with PG:
      http://www.hanselminutes.com/304/making-your-first-phonegap-application-with-peter-mourfield

      In my case, I used jqMobi specifically only for animation, native similarities and stuff so I don't need to develop it myself :)

      Regarding relation between jsMobi and AppMobi is indeed confusing. I really can't say much since I wasn't sure about that either. But it's definitely an area that needs more research.

      Cheers!

      Delete
  5. Hey,

    I also want to use jqmobi since I have read that it solves a lot of animation issues on Android 2, 3 and 4. I know what PhoneGap is used for :) I am trying to understand how to use jqmobi with PhoneGap. So, short story - I must packaged AppMobi inside PhoneGap in order to use jqmobi. Seems like APIs will be repeated but no other way.

    Cheers
    J

    ReplyDelete
  6. Hi, can you confirm whether it is possible to use jqmobi UI on phonegap ? If you can make a tutorial demonstrating that would be highly appreciated, Thanks :)

    ReplyDelete
  7. Hello,
    The Article on Build cross platform mobile application is awesome.It explain with example Program and give detail information .Thanks for Sharing the information on Cross Platform App Development.Xamarin Apps Development

    ReplyDelete