Build Native iPhone Apps with HTML, CSS, JavaScript and PhoneGap

Quick overview of how to take a garden variety web app built with HTML, CSS, JavaScript and convert it to a native iPhone app using PhoneGap. In this example, I used jQTouch to style and animated the web app, but this would work with any web app or JavaScript framework. You can learn more about building iPhone apps with HTML, CSS, and JavaScript here: building-iphone-apps.labs.oreilly.com Related links: phonegap.com jqtouch.com jonathanstark.com oreilly.com
Video Rating: 4 / 5

Revisions

There are no revisions for this post.

Tags: , , , , , ,

25 Responses to “Build Native iPhone Apps with HTML, CSS, JavaScript and PhoneGap”

  1. sailtothemoon123 October 25, 2011 at 12:40 PM #

    Thanks for that video. helped me get started.

  2. jonathanstark October 25, 2011 at 1:14 PM #

    @die101 Impossible to say. Depends on the device, the design of the interface, the amount of data, etc… best to just give it a shot.

  3. die101 October 25, 2011 at 1:53 PM #

    hi jonathan, actually i’m initiating a project thinking of utilising sencha touch + phonegap, how do u find the performance on the said product

  4. geekdad74 October 25, 2011 at 2:14 PM #

    @kuinks Definition of native app is that it runs even with out network on, meaning not web. The Html5/Javascript is copied to the native phonegap apps wrapper. the fact is you’re running an objC wrapper native. So you can then say it’s a native HTML5/Javascript application. Non-native is a safari bookmark saved to your device that you run only when connected to a network.

  5. jonathanstark October 25, 2011 at 2:28 PM #

    @Deergab Hm… I’m not sure what you’re asking. Can you elaborate?

  6. Deergab October 25, 2011 at 3:02 PM #

    @jonathanstark If you don’t know anything with other languages can you still make apps using JavaScript? Web-development only? I’m not interested on apps on desktops just on the sites only..

  7. TingLvTony October 25, 2011 at 3:17 PM #

    does this application able to push notification?

  8. bawzzzz October 25, 2011 at 4:05 PM #

    Wow that’s awesome !!! I m gonna make a ton of Iphone apps now.

  9. CliftonCrawley October 25, 2011 at 4:22 PM #

    @Liquor – WINDOWS has nothing to do with HTML , JS, & CSS! How can you say it’s not native? Well, I know how.. You simply don’t understand. The application is DERIVED from HTML, but it was BUILT into an app that is native to those mobile OS’s.

  10. LiquorWreckedEmGood October 25, 2011 at 4:39 PM #

    @donhajike

    i meant web app. windows???? long day. it’s certainly not a native app with native ui and native performance. that was my point.

  11. donhajike October 25, 2011 at 4:48 PM #

    @LiquorWreckedEmGood
    how on earth is a windows app defined as html, css, and javascript? I think you mean LINUX since iOS is using webkit which is derived directly from KHTML.
    no need for windows.

  12. LiquorWreckedEmGood October 25, 2011 at 5:00 PM #

    @jonathanstark

    it isn’t a native app. it’s a WINDOWS app (html, css, javascript) running in an iPhone webview. there is ZERO native UI. that aside, a very well-done video and i hope you’ll make more.

  13. gammaapps October 25, 2011 at 5:01 PM #

    Many Many thanks Sir, this clip was the original inspiration for gammaapps.dotcom
    The app store rejected AppProfit but no worries as it’s a HTML WebApp I can give it away for free on our site!

  14. gokulanubavam October 25, 2011 at 5:55 PM #

    If you any clarifications regarding mobile APP then mail me. i would help you…
    gokul@anubavam.com – for any Mobile application development

  15. RunescapeAchievemets October 25, 2011 at 6:19 PM #

    YOU ARE AWESOME JONATHAN! saved me some extensive high school training right here.

  16. andychizljaw October 25, 2011 at 6:30 PM #

    Hey if I was to produce an app in this way. Would apple let it through to the appstore?

  17. mypapit October 25, 2011 at 6:59 PM #

    shitsux

  18. jonathanstark October 25, 2011 at 7:42 PM #

    @kuinks How so?

  19. jonathanstark October 25, 2011 at 8:32 PM #

    @studtulloss45 Yes, it still works with jQuery.

  20. studtulloss45 October 25, 2011 at 8:50 PM #

    If your javascript is written in jQuery does this solution still work?

  21. luniz05 October 25, 2011 at 9:01 PM #

    @mike271094 You can install MAC OS X on a PC, or even as a virtual machine. I am using as a virtual machine, works great.

  22. iceberg220 October 25, 2011 at 9:31 PM #

    @SethiXzon He gives the details in the book. I’ve read part of it. But to be able to do it you must have some knowledge of those languages, which is much easier than learning Java (for Android, Blackberry) or Objective-C (for Mac)

  23. rmsrifat October 25, 2011 at 9:45 PM #

    Want to make and sell your own iPhone app idea? Download AppWizard to create your own iPhone application without ANY programming

  24. cramartlu October 25, 2011 at 10:44 PM #

    @mike271094 build.phonegap cloud-based phonegap 🙂

  25. MrJasonzF October 25, 2011 at 11:06 PM #

    How can you compile one of these apps on windows? Thanks in advanced 🙂

Leave a Reply