{"id":1868,"date":"2012-03-15T20:36:53","date_gmt":"2012-03-15T10:36:53","guid":{"rendered":"https:\/\/eisabainyo.net\/weblog\/?p=1868"},"modified":"2012-08-05T12:31:32","modified_gmt":"2012-08-05T02:31:32","slug":"developing-an-html5-iphone-app-using-jquery-mobile-phonegap-part-i","status":"publish","type":"post","link":"https:\/\/eisabainyo.net\/weblog\/2012\/03\/15\/developing-an-html5-iphone-app-using-jquery-mobile-phonegap-part-i\/","title":{"rendered":"Developing an HTML5 iPhone app using jQuery mobile & PhoneGap – Part I"},"content":{"rendered":"

\"\"<\/a><\/p>\n

Last week, we<\/a> submitted an iPhone app<\/a> 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. <\/p>\n

\"\" \"\" \"\"<\/p>\n

About the app
\n<\/strong>The app is called \"Colour Match<\/a>\" 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<\/a> 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. <\/p>\n

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

PhoneGap plugins used
\n<\/strong>We used the following PhoneGap plugins<\/a> to provide native features that are not possible to implement using Javascript\/HTML.
\n- Twitter
\n- ChildBrowser
\n- EmailComposer <\/p>\n

Development timeline<\/strong>
\nIt 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. <\/p>\n

--- <\/p>\n

Part II<\/a> will cover more technical details such as the app structure, submission process to iTunes, installing certificates and troubleshooting XCode issues.<\/p>\n

Sample PhoneGap Project<\/h3>\n

If you would like to get a sample PhoneGap project (uses jQuery mobile), you can download PhoneGap App using jQuery Mobile<\/a> source code. <\/p>\n","protected":false},"excerpt":{"rendered":"

Last week, we submitted an iPhone app to iTunes app store. This week, it was<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1868","post","type-post","status-publish","format-standard","hentry","category-default"],"yoast_head":"\nDeveloping an HTML5 iPhone app using jQuery mobile & PhoneGap - Part I | Tech Leadership Advice & Resources<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/eisabainyo.net\/weblog\/2012\/03\/15\/developing-an-html5-iphone-app-using-jquery-mobile-phonegap-part-i\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Developing an HTML5 iPhone app using jQuery mobile & PhoneGap - Part I | Tech Leadership Advice & Resources\" \/>\n<meta property=\"og:description\" content=\"Last week, we submitted an iPhone app to iTunes app store. This week, it was\" \/>\n<meta property=\"og:url\" content=\"https:\/\/eisabainyo.net\/weblog\/2012\/03\/15\/developing-an-html5-iphone-app-using-jquery-mobile-phonegap-part-i\/\" \/>\n<meta property=\"og:site_name\" content=\"Tech Leadership Advice & Resources\" \/>\n<meta property=\"article:published_time\" content=\"2012-03-15T10:36:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2012-08-05T02:31:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/eisabainyo.net\/weblog\/wp-content\/uploads\/2012\/03\/app1.jpg\" \/>\n<meta name=\"author\" content=\"Isabel Nyo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Isabel Nyo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/eisabainyo.net\/weblog\/2012\/03\/15\/developing-an-html5-iphone-app-using-jquery-mobile-phonegap-part-i\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/eisabainyo.net\/weblog\/2012\/03\/15\/developing-an-html5-iphone-app-using-jquery-mobile-phonegap-part-i\/\"},\"author\":{\"name\":\"Isabel Nyo\",\"@id\":\"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab\"},\"headline\":\"Developing an HTML5 iPhone app using jQuery mobile & PhoneGap – Part I\",\"datePublished\":\"2012-03-15T10:36:53+00:00\",\"dateModified\":\"2012-08-05T02:31:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/eisabainyo.net\/weblog\/2012\/03\/15\/developing-an-html5-iphone-app-using-jquery-mobile-phonegap-part-i\/\"},\"wordCount\":448,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab\"},\"image\":{\"@id\":\"https:\/\/eisabainyo.net\/weblog\/2012\/03\/15\/developing-an-html5-iphone-app-using-jquery-mobile-phonegap-part-i\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/eisabainyo.net\/weblog\/wp-content\/uploads\/2012\/03\/app1.jpg\",\"articleSection\":[\"Web Development Blog\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/eisabainyo.net\/weblog\/2012\/03\/15\/developing-an-html5-iphone-app-using-jquery-mobile-phonegap-part-i\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/eisabainyo.net\/weblog\/2012\/03\/15\/developing-an-html5-iphone-app-using-jquery-mobile-phonegap-part-i\/\",\"url\":\"https:\/\/eisabainyo.net\/weblog\/2012\/03\/15\/developing-an-html5-iphone-app-using-jquery-mobile-phonegap-part-i\/\",\"name\":\"Developing an HTML5 iPhone app using jQuery mobile & PhoneGap - Part I | Tech Leadership Advice & Resources\",\"isPartOf\":{\"@id\":\"https:\/\/eisabainyo.net\/weblog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/eisabainyo.net\/weblog\/2012\/03\/15\/developing-an-html5-iphone-app-using-jquery-mobile-phonegap-part-i\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/eisabainyo.net\/weblog\/2012\/03\/15\/developing-an-html5-iphone-app-using-jquery-mobile-phonegap-part-i\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/eisabainyo.net\/weblog\/wp-content\/uploads\/2012\/03\/app1.jpg\",\"datePublished\":\"2012-03-15T10:36:53+00:00\",\"dateModified\":\"2012-08-05T02:31:32+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/eisabainyo.net\/weblog\/2012\/03\/15\/developing-an-html5-iphone-app-using-jquery-mobile-phonegap-part-i\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/eisabainyo.net\/weblog\/2012\/03\/15\/developing-an-html5-iphone-app-using-jquery-mobile-phonegap-part-i\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/eisabainyo.net\/weblog\/2012\/03\/15\/developing-an-html5-iphone-app-using-jquery-mobile-phonegap-part-i\/#primaryimage\",\"url\":\"https:\/\/eisabainyo.net\/weblog\/wp-content\/uploads\/2012\/03\/app1.jpg\",\"contentUrl\":\"https:\/\/eisabainyo.net\/weblog\/wp-content\/uploads\/2012\/03\/app1.jpg\",\"width\":\"320\",\"height\":\"480\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/eisabainyo.net\/weblog\/2012\/03\/15\/developing-an-html5-iphone-app-using-jquery-mobile-phonegap-part-i\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/eisabainyo.net\/weblog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Developing an HTML5 iPhone app using jQuery mobile & PhoneGap – Part I\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/eisabainyo.net\/weblog\/#website\",\"url\":\"https:\/\/eisabainyo.net\/weblog\/\",\"name\":\"Career Resources for Professionals in Tech\",\"description\":\"Books, worksheets, templates, frameworks and other useful resources for Chief Technology Officers (CTOs), VPs of Engineering & Technology Directors\",\"publisher\":{\"@id\":\"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/eisabainyo.net\/weblog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab\",\"name\":\"Isabel Nyo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3d4b1a4e0f425adb39b242b0d62c5fac07c82f8314a24631f1d16f47bdf006d8?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3d4b1a4e0f425adb39b242b0d62c5fac07c82f8314a24631f1d16f47bdf006d8?s=96&d=mm&r=g\",\"caption\":\"Isabel Nyo\"},\"logo\":{\"@id\":\"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/image\/\"},\"description\":\"My interests: Web Development, Web Design, Web Applications, Web 2.0, AJAX, Search Engine Optimisation, Latest Technologies and more..\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Developing an HTML5 iPhone app using jQuery mobile & PhoneGap - Part I | Tech Leadership Advice & Resources","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/eisabainyo.net\/weblog\/2012\/03\/15\/developing-an-html5-iphone-app-using-jquery-mobile-phonegap-part-i\/","og_locale":"en_US","og_type":"article","og_title":"Developing an HTML5 iPhone app using jQuery mobile & PhoneGap - Part I | Tech Leadership Advice & Resources","og_description":"Last week, we submitted an iPhone app to iTunes app store. This week, it was","og_url":"https:\/\/eisabainyo.net\/weblog\/2012\/03\/15\/developing-an-html5-iphone-app-using-jquery-mobile-phonegap-part-i\/","og_site_name":"Tech Leadership Advice & Resources","article_published_time":"2012-03-15T10:36:53+00:00","article_modified_time":"2012-08-05T02:31:32+00:00","og_image":[{"url":"https:\/\/eisabainyo.net\/weblog\/wp-content\/uploads\/2012\/03\/app1.jpg","type":"","width":"","height":""}],"author":"Isabel Nyo","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Isabel Nyo","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/eisabainyo.net\/weblog\/2012\/03\/15\/developing-an-html5-iphone-app-using-jquery-mobile-phonegap-part-i\/#article","isPartOf":{"@id":"https:\/\/eisabainyo.net\/weblog\/2012\/03\/15\/developing-an-html5-iphone-app-using-jquery-mobile-phonegap-part-i\/"},"author":{"name":"Isabel Nyo","@id":"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab"},"headline":"Developing an HTML5 iPhone app using jQuery mobile & PhoneGap – Part I","datePublished":"2012-03-15T10:36:53+00:00","dateModified":"2012-08-05T02:31:32+00:00","mainEntityOfPage":{"@id":"https:\/\/eisabainyo.net\/weblog\/2012\/03\/15\/developing-an-html5-iphone-app-using-jquery-mobile-phonegap-part-i\/"},"wordCount":448,"commentCount":1,"publisher":{"@id":"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab"},"image":{"@id":"https:\/\/eisabainyo.net\/weblog\/2012\/03\/15\/developing-an-html5-iphone-app-using-jquery-mobile-phonegap-part-i\/#primaryimage"},"thumbnailUrl":"https:\/\/eisabainyo.net\/weblog\/wp-content\/uploads\/2012\/03\/app1.jpg","articleSection":["Web Development Blog"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/eisabainyo.net\/weblog\/2012\/03\/15\/developing-an-html5-iphone-app-using-jquery-mobile-phonegap-part-i\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/eisabainyo.net\/weblog\/2012\/03\/15\/developing-an-html5-iphone-app-using-jquery-mobile-phonegap-part-i\/","url":"https:\/\/eisabainyo.net\/weblog\/2012\/03\/15\/developing-an-html5-iphone-app-using-jquery-mobile-phonegap-part-i\/","name":"Developing an HTML5 iPhone app using jQuery mobile & PhoneGap - Part I | Tech Leadership Advice & Resources","isPartOf":{"@id":"https:\/\/eisabainyo.net\/weblog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/eisabainyo.net\/weblog\/2012\/03\/15\/developing-an-html5-iphone-app-using-jquery-mobile-phonegap-part-i\/#primaryimage"},"image":{"@id":"https:\/\/eisabainyo.net\/weblog\/2012\/03\/15\/developing-an-html5-iphone-app-using-jquery-mobile-phonegap-part-i\/#primaryimage"},"thumbnailUrl":"https:\/\/eisabainyo.net\/weblog\/wp-content\/uploads\/2012\/03\/app1.jpg","datePublished":"2012-03-15T10:36:53+00:00","dateModified":"2012-08-05T02:31:32+00:00","breadcrumb":{"@id":"https:\/\/eisabainyo.net\/weblog\/2012\/03\/15\/developing-an-html5-iphone-app-using-jquery-mobile-phonegap-part-i\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/eisabainyo.net\/weblog\/2012\/03\/15\/developing-an-html5-iphone-app-using-jquery-mobile-phonegap-part-i\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/eisabainyo.net\/weblog\/2012\/03\/15\/developing-an-html5-iphone-app-using-jquery-mobile-phonegap-part-i\/#primaryimage","url":"https:\/\/eisabainyo.net\/weblog\/wp-content\/uploads\/2012\/03\/app1.jpg","contentUrl":"https:\/\/eisabainyo.net\/weblog\/wp-content\/uploads\/2012\/03\/app1.jpg","width":"320","height":"480"},{"@type":"BreadcrumbList","@id":"https:\/\/eisabainyo.net\/weblog\/2012\/03\/15\/developing-an-html5-iphone-app-using-jquery-mobile-phonegap-part-i\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/eisabainyo.net\/weblog\/"},{"@type":"ListItem","position":2,"name":"Developing an HTML5 iPhone app using jQuery mobile & PhoneGap – Part I"}]},{"@type":"WebSite","@id":"https:\/\/eisabainyo.net\/weblog\/#website","url":"https:\/\/eisabainyo.net\/weblog\/","name":"Career Resources for Professionals in Tech","description":"Books, worksheets, templates, frameworks and other useful resources for Chief Technology Officers (CTOs), VPs of Engineering & Technology Directors","publisher":{"@id":"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/eisabainyo.net\/weblog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab","name":"Isabel Nyo","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3d4b1a4e0f425adb39b242b0d62c5fac07c82f8314a24631f1d16f47bdf006d8?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3d4b1a4e0f425adb39b242b0d62c5fac07c82f8314a24631f1d16f47bdf006d8?s=96&d=mm&r=g","caption":"Isabel Nyo"},"logo":{"@id":"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/image\/"},"description":"My interests: Web Development, Web Design, Web Applications, Web 2.0, AJAX, Search Engine Optimisation, Latest Technologies and more.."}]}},"_links":{"self":[{"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/posts\/1868","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/comments?post=1868"}],"version-history":[{"count":17,"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/posts\/1868\/revisions"}],"predecessor-version":[{"id":1938,"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/posts\/1868\/revisions\/1938"}],"wp:attachment":[{"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/media?parent=1868"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/categories?post=1868"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/tags?post=1868"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}