The App Structure

The following is the app folder structure. As mentioned in Part I, we used jQuery and jQuery mobile as the mobile javascript frameworks for the colour match app.

- www
-- js
--- jquerymobile.js
--- colourpicker
--- jquery.js
--- script.js
-- css
--- images
- phonegap.js
- index.html
- results.html
- details.html
- favourites.html
- picker.html
- popular.tml
- about.html
- plugins
....

The app structure for www folder is very similar to a website folder structure. In fact, you can basically take www folder and upload it onto a web server to run the app as a web app. The structure is very straight forward; javascript files in JS folder, CSS and presentation images in CSS folder and all the templates in the root folder. phonegap.js is the Javascript file that comes with PhoneGap and is necessary in order to use PhoneGap APIs and plugins.

The components from jQuery mobile used within the app are Single page template, Header bars, Buttons, Layout grids, Select menus, and List views. We created a custom theme in CSS so the look and feel of those components are customised for the app.

Troubleshooting XCode/PhoneGap Issues

We encountered a few issues with XCode and PhoneGap during development.

1. Unable to talk to web service APIs

When the app was running as a web app, everything was working well, but as soon as we put it onto XCode, the colour picker no longer worked – it didn’t return any result. This was caused by PhoneGap file download restriction and to resolve the issue, the following values in PhoneGap.plist file were updated:

OpenAllWhitelistURLsInWebView: YES
ExternalHosts
 - thedomainforapi.com

2. PhoneGap APIs and Plugins were not working

We were using a few PhoneGap APIs and Plugins but some of them were not working at all. It took us a while to isolate the issue, but the problem was because we were using Prototype Javascript Framework for Colour Picker and Prototype and PhoneGap don’t work together. Rather than trying to hack Prototype Framework, we removed it altogether and refactored the Colour Picker.

3. Some PhoneGap plugins were throwing ARC errors when compiling

Disabling ARC for specific files did the trick.

Installing certificates & provisioning profiles

Once we have the code ready and tested on Simulator, we wanted to make sure it worked well on the device as well. In order to deploy the app onto a real device, we had to install a provisioning profile and a certificate. The process requires a few steps, but if you follow this article, you should not have any problem. For installing certificate and profile for distribution (ie: submitting to the app store), we followed this article. (Thanks, David!)

iTunes App Store Submission Process

Surprisingly, the process of submitting the app to iTunes App Store wasn’t as hard as installing certificates & provision profiles. Refer to slide 32+ of this presentation for screenshots. The slides are a bit dated as we didn’t have to download Application Loader separately, it already came with XCode 4.

Finally… how long did it take to get it approved?

We submitted the app on Saturday (midnight Friday) but we had to cancel the first submission and resubmit the app again on Tuesday due to some last minute changes. The app was approved the following Monday around 4am (Australian Eastern Standard Time Zone (AEST)). We received an email from the app store around 2am which said the app was under review and at 4am, we received another email saying the app was approved and ready for sale. Reading the guidelines before submitting the app to ensure the app complies with the App Store Review Guidelines must have helped us.

Feel free to download the app from the app store to see it in action.

If you are interested in getting an iPhone/iPad application that uses web technologies for your company or organisation, contact us at Anansi Web Development to find out how we may be able to help you.

Other useful articles

We have written a few articles in the past on developing for iPhone and iPad and working with PhoneGap which you might find useful:

• Embed a YouTube video iframe in a phonegap app
• How to ‘Post on Facebook Wall’ on iPhone and Android using PhoneGap plugins
• 10 Useful Javascript Snippets for your mobile websites
• How to use hi-res images in web apps for iPhone4
• Top 10 jQuery Mobile Code Snippets that you need to know
• Five Important Steps into iPhone App Development for Beginners
• Designing and Optimising Websites for iPad
• How to disable text auto correction in iPhone web app
• Tips for iPhone Web App Development

Last week, we submitted an iPhone app to iTunes app store. This week, it was approved by Apple and the app is now available for download from the app store. Since everyone knows that HTML5 and app development is the future of mobile space, we’d like to share with you our experience of developing an HTML5 iPhone app using jQuery mobile & PhoneGap.

About the app
The app is called “Colour Match” and the purpose of the app is to allow users to pick any colour using a colour picker tool and display clothing & accessories that match the colour from Online Shopping USA database. Features of the app include a colour picker, a selection of most popular colours for easy browsing, favourites where users can save their favourite products and email, facebook and twitter sharing.

Technologies used
The technologies used for the app are:
- jQuery 1.7.1 + jQuery Mobile 1.0.1 (Javascript framework)
- PhoneGap 1.4.1
- HTML5 (template structure & Web SQL database storage)
- CSS3 (webkit animations and layout)
- PHP for web services (a few custom web services were written to obtain data from a mySQL database that resides on web server)

PhoneGap plugins used
We used the following PhoneGap plugins to provide native features that are not possible to implement using Javascript/HTML.
- Twitter
- ChildBrowser
- EmailComposer

Development timeline
It look us about a week to come up with the concept and fine-tune requirements before starting the actual development. The HTML5 + CSS development took less than a week as jQuery mobile made it pretty easy to have a working functional app within a few days. The design of the app took a few days. Most of the development time was spent on writing web services in PHP and writing a system that automatically scans images and picks the most appropriate colour. It took us half a day to set up Xcode, PhoneGap, provisional certificates etc (mind you, this wasn’t the first time we did this, but it still took us some time because we are not very familiar with a Mac computer). Then one full day was spent integrating and intalling PhoneGap plugins into the app, and finally submitting it to iTunes. All up, it took about 4 weeks from the start of the project to the day the app became available on iTunes app store.

—

Part II will cover more technical details such as the app structure, submission process to iTunes, installing certificates and troubleshooting XCode issues.

HTML:

Go to YouTube and get embed code for the video that you wish to include into your phonegap app. Note that not all YouTube videos can be played from a phonegap app due to restrictions placed in the videos.

<html>
	<head>
		<title>YouTube video</title>
		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<script src="phonegap-1.2.0.js"></script>
	</head>
	<body>

        <iframe width="560" height="315" src="http://www.youtube.com/embed/9HDeEbJyNK8" frameborder="0" allowfullscreen></iframe>

    </body>
</html>

Changes to PhoneGap.plist

Change/add the following values in PhoneGap.plist file of your app.

MediaPlaybackRequiresUserAction: NO
AllowInlineMediaPlayback: YES
OpenAllWhitelistURLsInWebView: YES
ExternalHosts
          *.youtube.com
          *.ytimg.com

And that’s it! You should now be able to run the app on Simulator or an iOS device and be able to play the youtube video using the default video player that comes with the device (for example, QuickTime player for iPhone and iPad).

A little info on jQuery mobile pagecreate event:

pagecreate
Triggered when the page has been created in the DOM (via ajax or other) but before all widgets have had an opportunity to enhance the contained markup. This event is most useful for user’s wishing to create their own custom widgets for child markup enhancement as the jquery mobile widgets do.

$( '#aboutPage' ).live( 'pagecreate',function(event){
( ":jqmData(role='sweet-plugin')" ).sweetPlugin();
});

And the snippets:

Javascript

function initialize(lat,lng) {
	var latlng = new google.maps.LatLng(lat, lng);

	var myoptions = {
		zoom: 12,
		center: latlng,
		disableDefaultUI: true,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};

	var map = new google.maps.Map(document.getElementById("googlemap"),myoptions);

	var icon = new google.maps.MarkerImage('images/marker.png',
			new google.maps.Size(20, 20), // size
			new google.maps.Point(0, 0), // origin
			new google.maps.Point(20, 20) // anchor
		);

	var mymarker = new google.maps.Marker({
		position: latlng,
		map: map,
		icon: icon
	});
}

$('.page-map').live("pagecreate", function() {
        var lat = -33.887418, lng = 151.17403;
	if(navigator.geolocation) {
		navigator.geolocation.getCurrentPosition(function(position){
			initialize(position.coords.latitude,position.coords.longitude);
		}, function() { console.log('Error with getCurrentPosition'); });
	} else {
                // predefined location
		initialize(lat, lng);
	}
});

HTML

<div data-role="page" class="page-map">

	<div data-role="header">
		<h1>Google Map</h1>
	</div><!-- /header -->

	<div data-role="content">
		 <div id="googlemap"></div>
	</div><!-- /content -->

	<div data-role="footer">
		<h4>Footer content</h4>
	</div><!-- /footer -->

</div><!-- /page -->

We’ve put together some of the best holiday sales for web designers and developers. Enjoy!

The book is written for jQuery Mobile Beta 2 which is the current version of jQuery Mobile and there are 3 parts to the book.

Part I covers the basics you need to know about jQuery Mobile. The thing I like about it is that it contains a lot of sample code, so if you like to create a website while reading the book, you can do so easily with the help of sample code. The tutorials in Part I is great for someone who wants to just get a simple mobile site up and running without wanting to worry too much about the UI and the nitty gritty details.

Part II focuses on the fundamentals of building user interfaces with jQuery Mobile. It covers dialogs, forms, navigations, lists, header, footer and other essential elements of a website. I particularly liked the “Creating Forms” chapter because it contains a lot of information about different input elements and attributes that you can use in jQuery Mobile. Forms are one of the most trickest elements in web designs and it is very helpful to have the whole chapter dedicated to this subject. If you are looking to create a mobile web application that uses forms, this chapter is a must-read.

Part III is titled Beyond the Basics and it contains 3 chapters; themeing jQuery Mobile, the jQuery Mobile API and a complete web app example. As you probably already knew, jQuery Mobile comes with 5 default themes that you can choose from, but more often than not, you need to create a custom theme that suits your website or web app. Themeing jQuery Mobile chapter explains just how you can do that with an example red theme. The jQuery Mobile API is another favourite chapter of mine because when I was developing in jQuery Mobile a few months ago, there weren’t a lot of resources available on how the API works, in particular, the methods and events available. It could have saved me a lot of time if only I had this book back then. The last chapter in Part III is a complete web app example. The web app example uses PHP5 for the back end and as the title suggest, it is a complete app, meaning you can take the example code, upload it to your web server and have a fully functional web app in jQuery Mobile.

Overall, the book is an excellent book for developers who want to dive into mobile app development with jQuery Mobile. There are a lot of screenshots, code examples and references to help you get started. What I like most about the book is that it’s written by a developer for developers which means the tutorials are easy to follow and will get you up to speed on the basics of app development in no time.

PhpRiot PHP Reference

This app gives you full access to PHP manual, Zend Framework programmer’s guide and Smarty Template Engine manual. There is also a quiz training system, which you can use to test and improve your PHP knowledge.

iHTML

This is a must-have utility app for web developers as it displays HTML source of a web address. There are two modes available; on Portrait mode, it displays raw HTML and on Landscape mode, it shows a web view alongside the source.

CSS UNIT Converter

This is a quick and easy conversion calculator for Front-end developers working with pixels, ems, percentages, and points. It lets you convert a font size in pixel to em, pt and % easily. The conversion table is very useful because you can see all the different values in a single screen.

CSS Quick Reference

CSS Reference app provides handy access to all of the W3C’s Cascading Style Sheets (CSS) properties, pseudo-classes and pseudo-elements, including the syntax (with the equivalent JavaScript syntax for the given property), possible values for each property, usage notes, and fully rendered sample code. The sample HTML code can be edited and re-displayed using the built-in browser which mean you can try different values and see how it looks without having to use another CSS Editor.

Mobile CSS Reference

Mobile CSS Reference gives you descriptions, examples, syntax and limitations of CSS properties and selectors on a nice UI.

WhatTheFont

This app lets you identify the fonts in a photo or a screeshot. So the next time you see a great font in a magazine ad, poster, or on the web, you can just take out your iPhone and snap a photo, and WhatTheFont will identify that font for you. This app requires Internet connection and works via Wi-Fi or the mobile phone (3G) network.

Linux Command Reference

With Linux Command Reference (LCR) app, you can access to the most widely used Linux commands to date. Although this app doesn’t cover every single Linux command, it is a good “starter” for anyone who’s just starting out with the Linux operating system.

JSInt

JSInt is an interactive JavaScript console which lets you perform mathematical calculations or for learning JavaScript. Just input your Javascript statement in the console and it will return you the result. For example, if you enter parseInt(5.135, 10), it will return 5. JSInt uses JavaScriptCore Open Source library which implements JavaScript 1.5 / ECMA-262 3rd edition.

Chmod

Chmod is a handy little utility app for determining file and directory permissions on Mac OS X, Linux and Unix operating systems.

RGB Colors

RGB Colors iPhone app show you the color of the RGB combination that you choose using the sliders provided. It will be useful when you want to use rgb or rgba values to declare a color in CSS.

WordPress

WordPress app enables you to manage your WordPress blog or site from your iPhone device. With this app, you can moderate comments, create or edit posts and pages, and add images or videos with ease. All you need is a WordPress.com blog or a self-hosted WordPress.org site running 2.9.2 or higher. I have written a step-by-step guide on how to use WordPress iPhone app.

Dropbox

Dropbox app lets you access all your photos, docs, and videos saved in your Dropbox account from your iPhone. Not only does it let you access the files, you can also save photos and videos into your Dropbox account from your iPhone.

PassGen

PassGen generates a random password that is between 4 and 16 digits and comprised of upper and lower case letters, numbers and special characters. It can also be used to generate Hexadecimal passwords. Once a password has been generated, it can be emailed.

Coupons for Godaddy Domain names

Any order (eg: SSL certificate, Domain Name, Hosting, etc)

Download

Checkout added to your cart

1. Create a folder structure
The first thing you need to do is create a folder structure where all your files will live. My folder structure is as follows:

- www
-- api
--- send.php
-- js
--- contact.js
-- css
--- contact.css
-- index.html

2. Copy and paste the following boilerplate template
This will go into index.html file that you’ve created. Note that we are including the Javascript and CSS files from the jQuery Mobile server. You can also download the latest version of jQuery Mobile from the website and include the local copy.

<!DOCTYPE html>
<html>
	<head>
	<title>Contact Us</title>
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
</head>
<body> 

<div data-role="page">

	<div data-role="header">
		<h1>Contact Us</h1>
	</div><!-- /header -->

	<div data-role="content">
		<!-- Content goes here -->
	</div><!-- /content -->

	<div data-role="footer">
		<p>Source code by <a href="http://eisabainyo.net/weblog" rel="external">Web Development Blog</a>.  Check out <a href="http://eisabainyo.net/weblog/tips-resources" rel="external">tip &amp; resources</a> for Web Developers.</a></p>
	</div><!-- /footer -->
</div><!-- /page -->

</body>
</html>

3. Add HTML form in the content area
Add the following code into <div data-role=”content”>

		<div class="contact-thankyou" style="display: none;">
			Thank you.  Your message has been sent.  We will get back to you as soon as we can.
		</div>
		<div class="contact-form">
			<p class="mandatory">* indicates Manadatory Field</p>
			<div data-role="fieldcontain" class="text-field">
				<label for="firstname">First Name*:</label>
				<input type="text" name="firstname" value="" placeholder="" class="required" id="firstname" />
			</div>
			<div data-role="fieldcontain" class="text-field">
				<label for="surname">Last Name:</label>
				<input type="text" name="surname" value="" placeholder="" id="surname" />
			</div>
			<div data-role="fieldcontain" class="text-field">
				<label for="email">Email Address*:</label>
				<input type="email" name="email" value="" placeholder="" class="required" id="email"  />
			</div>
			<div data-role="fieldcontain" class="text-field">
				<label for="mobilephone">Mobile Number:</label>
				<input type="number" name="mobilephone" value="" placeholder="" id="mobilephone" />
			</div>
			<div data-role="fieldcontain">
				<label for="state">State:*</label>
					<select name="state" class="required" id="state">
						<option value="" data-placeholder="true">Please select your state</option>
						<option value="ACT">ACT</option>
						<option value="NSW">NSW</option>
						<option value="NT">NT</option>
						<option value="QLD">QLD</option>
						<option value="SA">SA</option>
						<option value="TAS">TAS</option>
						<option value="VIC">VIC</option>
						<option value="WA">WA</option>
					</select>
			</div>
			<div data-role="fieldcontain">
				<label for="message">Message*:</label>
				<textarea name="message" id="message" placeholder="" class="required"></textarea>
			</div>
			<div class="send"><a href="javascript:;" data-role="button" data-theme="a" data-iconpos="right" id="send-feedback">send feedback</a></div>
		</div><!-- //.contact-form -->
		

4. Create a web service in PHP to send email
We have a folder called api and we will create a new file called send.php in the api folder. You will need to change the $recipient variable.

<?php
header('content-type: application/json; charset=utf-8');

if (isset($_GET["firstname"])) {
	$firstname = strip_tags($_GET['firstname']);
	$surname = strip_tags($_GET['surname']);
	$email = strip_tags($_GET['email']);
	$mobilephone = strip_tags($_GET['mobilephone']);
	$state = strip_tags($_GET['state']);
	$message = strip_tags($_GET['message']);
	$header = "From: ". $firstname . " <" . $email . ">rn"; 

	$ip = $_SERVER['REMOTE_ADDR'];
	$httpref = $_SERVER['HTTP_REFERER'];
	$httpagent = $_SERVER['HTTP_USER_AGENT'];
	$today = date("F j, Y, g:i a");    

	$recipient = 'YOUREMAILADDRESS@DOMAIN.COM';
	$subject = 'Contact Form';
	$mailbody = "
First Name: $firstname
Last Name: $surname
Email: $email
Mobile Phone: $mobilephone
State: $state
Message: $message

IP: $ip
Browser info: $httpagent
Referral: $httpref
Sent: $today
";
	$result = 'success';

	if (mail($recipient, $subject, $mailbody, $header)) {
		echo json_encode($result);
	}
}
?>

5. Add Javascript code to handle form onsubmit
Create a file called contact.js with the following content and include it in your HTML file.

$('#send-feedback').live("click", function() {
	var url = 'api/send.php';
	var error = 0;
	var $contactpage = $(this).closest('.ui-page');
	var $contactform = $(this).closest('.contact-form');
	$('.required', $contactform).each(function (i) {
        if ($(this).val() === '') {
			error++;
        }
	}); // each
	if (error > 0) {
			alert('Please fill in all the mandatory fields. Mandatory fields are marked with an asterisk *.');
	} else {
		var firstname = $contactform.find('input[name="firstname"]').val();
		var surname = $contactform.find('input[name="surname"]').val();
		var state = $contactform.find('select[name="state"]').val();
		var mobilephone = $contactform.find('input[name="mobilephone"]').val();
		var email = $contactform.find('input[name="email"]').val();
		var message = $contactform.find('textarea[name="message"]').val();	

		//submit the form
		$.ajax({
			type: "GET",
			url: url,
			data: {firstname:firstname, surname:surname, state: state, mobilephone: mobilephone, email: email, message: message},
            success: function (data) {
				if (data == 'success') {
					// show thank you
					$contactpage.find('.contact-thankyou').show();
					$contactpage.find('.contact-form').hide();
				}  else {
					alert('Unable to send your message. Please try again.');
				}
			}
		}); //$.ajax

	}
	return false;
});

After completing all the above steps, you will have a fully functional contact form built using jQuery Mobile, HTML5, and PHP.

Download

Checkout added to your cart

Screenshot of Contact Form in jQuery Mobile

Note: The examples on this page will only work on WebKit Browsers (eg: Chrome, Safari). Hover over the little black elements to see the effect done in pure CSS3.

Before we start, let’s add the following CSS to change the look and feel of your <ul> list items.

ul.css3demo li { -webkit-border-radius: 15px; display: block; float: left; width: 50px; height: 50px; margin: 10px; background: #000; color: #fff; text-indent: -5000em; }

And now let’s take a look at 15 different CSS3 animations and their source code.

	ul.css3demo1 li { -webkit-transition: all 0.3s linear; }
	ul.css3demo1 li:hover {  -webkit-transform:  rotate3d(0, 0, 0, 50deg); -webkit-transform-style: preserve-3d; }

	ul.css3demo2 li { -webkit-transition: all 0.3s linear; }
	ul.css3demo2 li:hover { -webkit-transform:  translate3d(0, 40px, 0); }

	ul.css3demo3 li { -webkit-transition: all 0.3s linear; }
	ul.css3demo3 li:hover {  -webkit-transform:  scale(.5); }

	ul.css3demo4 li { -webkit-transition: all 0.3s linear; }
	ul.css3demo4 li:hover {  -webkit-transform:  scale(1.5); }

	ul.css3demo5 li { -webkit-transition: all 0.3s linear; }
	ul.css3demo5 li:hover { -webkit-transform:  translate3d(10px, 0, 0); }

	ul.css3demo6 li { -webkit-transition: all 0.3s linear; }
	ul.css3demo6 li:hover { -webkit-box-shadow: 3px 3px 3px rgba(0,0,0, 0.5); }

	ul.css3demo7 li { -webkit-transition: all 0.3s linear; }
	ul.css3demo7 li:hover { background: #0cf; }

	ul.css3demo8 li { -webkit-transition: all 0.3s linear; }
	ul.css3demo8 li:hover { -webkit-transform: scale3d(.5, 1, 1); }

	ul.css3demo9 li { -webkit-transition: all 0.3s linear; }
	ul.css3demo9 li:hover {  -webkit-transform: scale3d(1, 0.5, 1); }

	ul.css3demo10 li { -webkit-transition: all 0.3s linear; }
	ul.css3demo10 li:hover { -webkit-transform: rotate(360deg); }

	ul.css3demo11 li { -webkit-transition: opacity 0.8s ease-in; opacity: 0.4;  }
	ul.css3demo11 li:hover { opacity: 1; }

	ul.css3demo12 li { -webkit-transition: opacity 1s ease-in; opacity: 1.0;  }
	ul.css3demo12 li:hover { opacity: 0.4; }

	ul.css3demo13 li { -webkit-transition: -webkit-transform 1s ease-in-out;   }
	ul.css3demo13 li:hover { -webkit-animation: spin 0.3s infinite linear; }
	@-webkit-keyframes spin {
		0% { -webkit-transform: rotate(0deg); }
		100% { -webkit-transform: rotate(360deg); background-color: #ff0;  }
	}

	ul.css3demo14 li { -webkit-transition: -webkit-transform 5s ease-in-out;   }
	ul.css3demo14 li:hover { -webkit-animation: colorize 3s infinite linear; }
	@-webkit-keyframes colorize {
		0% { background-color: #333; }
		100% { background-color: #ff0;  }
	}

	ul.css3demo15 li { -webkit-transition: all 2s ease-in-out;   }
	ul.css3demo15 li:hover { -webkit-animation: shape 1s infinite linear; }
	@-webkit-keyframes shape {
		100% { -webkit-border-radius: 50px;  }
	}