How Not To Debug A JQuery Mobile App

Here I was thinking I had got a good grasp of JQuery Mobile enough to go ahead and integrate it with CakePHP.

I admit it was a fun thing to see a desktop version automatically scale into a mobile version with only a few lines of code from my previous post.

My mobile development had taken a bold leap forward in terms I couldn’t be less than happy for.

So after getting my hands and head wrapped up around the structure of JQuery mobile, I felt I was in the “common yeah, let’s do this” moment – speaking in the Tony Robins tone here :)…

I loaded up the site in my mobile emulator and straight up it was looking sharp and tidy :).

But then I wanted to be sure it was alright so I loaded in my Samsung Galaxy phone. Okay it still was looking cool and I was about super excited about this.

Finally, I remembered my old Blackberry phone exists. And knowing that most young people around here have the older Blackberry OS5 phones, I decided to give it a shot.

The result was nerve-rending. My wonderful new mobile site loaded alright. Yes, up to only the preloader gif image!

I tweaked headers and disabled all custom scripts. Once it would work and at another try it would just hang up at the preloader.gif image.

 

After almost 6 combined hours of nerve-wrecking pondering, hair-pulling, and knocking my head against the wall I finally decided to try offloading some content from the page.

I removed a bit of this and a bit of that. Each time uploading the new changes, and refreshing my Blackberry phone’s browser. (Yes, I was a bit too lazy to set up a local DNS server that would allow me access my local site from my Blackberry phone…)

Finally, I found it. A simple search form. Eureka!

After removing the form and returning I discovered that without the form the site loaded up pretty good.

To cut the chase, I reduced the size of the form and transferred it to another page. The original form still won’t load properly so I’m yet to find out what part of that form is responsible for giving JQuery mobile  such terrible hiccups.

 

Advertisements

What Exactly is this JQuery Mobile that they use for Mobile Application Development?

I have been doing normal html, and interactive websites/ web apps using PHP/MySql for quite some time now, and now I was getting curious as to the new trend of mobile application development.

In my earlier post I talked about how I went in search of the best tools for mobile development.

I finally found my way to JQuery Mobile (JQM). And after all the talk and buzz around the tech space about developing mobile sites with JQuery mobile, I discovered that it isn’t as dreadful and uphill as people make you think.

The first thing you need to know is that JQuery mobile or JQM as it is often referred to as, is only just JQuery with an added css file for mobile rendering and a juery mobile javascript file.

So all you need to set up a mobile friendly page is add these 3 files to your header.

jquery.mobile-1.1.0.min.css,

jquery-1.7.1.min.js,

jquery.mobile-1.1.0.min.js

You will have to forget about XHTML validation in this case. Below is the typical structure of the head of a mobile page. You don’t have to start by creating a theme in themeroller as the default JQM theme is just good enough for you to start practicing with right away.

<!DOCTYPE html>

<html>

<head>

<meta name=”viewport” content=”width=device-width, initial-scale=1″ />

<link rel=”stylesheet” href=”css/jquery.mobile-1.1.0.min.css” />

<script type=”text/javascript” src=”js/jquery-1.7.1.min.js”></script>

<script type=”text/javascript” src=”js/jquery.mobile-1.1.0.min.js”></script>

</head>

<body>


Once you have these files in your header you are ready to start using JQM to perform all the mobile magic wonders that you see the so-called “mobile-experts” performing.

You can create lists that look like a phone’s native application navigation list and those fancy rounded buttons that slide into different pages when you click them, all simply using very basic html tag properties called the data-role.

For a detailed guide on the different features and properties in JQM, you may visit the JQuery mobile introduction page here.

After you are done with learning the HTML tag structures and properties in JQM, you can then add PHP into the mix to generate valid JQM tags that will render perfectly in mobile browsers.

The built-in Ajax functionality in JQM means you don’t have to worry about how to communicate with your scripts on the server, just return the results in a suitable format.

Finally, if you need to convert your mobile site into a native phone application, there are several tools that will take your pages and compile them into any platform of your choice.

A good example is PhoneGap.

&lt;

What are the Best Tools For Mobile Application Development?

I recently had a strong hunch about mobile based development seeing I live in a country where almost 100 million people haver access to mobile phones.

Looking at the available platforms with the only motive being to develop for the platform that has the most delightful qualities.

I was looking for the following:

1. A very popular mobile phone platform. By platform I mean the Operating system and mobile devices together.

2. A mobile platform that has very good penetration in Africa, and Nigeria, or one that is gaining user adoption fast.

3. A platform that supports economy class mobile devices, and not just the high end devices like the iPads, etc.

4. A platform that supports HTML 5 and has existing tools for seamless mobile application development and testing. The testing part being very, and I mean VERY important.

5. A platform

So I decided to hold off this post for a while up until I found a solution to this heinous situation. I tested some of these tools to see how well they did on my list of qualities above.

If you guessed my result would be awesome and very encouraging, then I can only say you are a very optimistic individual and may your wishes come true. But that assumption was not to be.

Looking through Blackberry (RIM), Android, and IOS (Apple), these seem to be the most active platforms outside of the world of feature phones that have literally flooded the emerging markets of the developing world.

It would be best to develop for at least one of these platforms.

So after some considerations, I settled with the blackberry option. My first experience was a hard stumbling block as the first tool I downloaded and tried (Ripple) was a total mess. Maybe my timing was wrong, but I happened to get a version of Ripple that just didn’t work.

Looking though forums and blog posts, I could only find out that many people had the same problem and could not find a solution.

Finally I settled for the Chrome browser plug-in which seemed to work fine. I wonder why I didn’t consider that option first.