PhoneGap iPhone Tutorial - A good place to start | January 14th, 2010
PhoneGap has been getting a lot of attention lately, and also a lot of questions on the mailing list about where to get started.
I recently built a small PhoneGap app for iPhone that helps to demonstrate PhoneGap functions.
The application is divided into multiple pages, and each page focuses on one area of functionality.
I have strived to keep each page dedicated to the functionality it presents, and present everything as simply as possible.
There are no dependencies on any other libraries, and the js / css for each page is contained directly there.
The Notifications page demonstrates key navigator.notifications functions.
- Custom Alerts - with custom title text, and button text.
- Display a loading screen for a fixed length of time
- Vibrate the device
- Show and hide the Activity Indicator ( the spinner at the top bar )
The Accelerometer page demonstrates navigator.accelerometer functions.
- Start + Stop the accelerometer update logic, and play with a bouncing ball.
( a shout out to Yohei for providing the initial code for this example. )
The Contacts page demonstrates navigator.contacts functions.
- Display the number of contacts
- Spawn the contact picker screen
- Renders a contact, and makes it clickable, to spawn the contact viewer.
The GeoLocation page demonstrates how to use navigator.geolocation
- Gets your current location
- Calls Twitter api using JSONP to get tweets within a mile of your location
( a shout out to Girlie Mac http://girliemac.com/blog/ this code was shamelessly borrowed )
Hopefully the other platformers will step up and publish / test on other devices. I have only worked on the iPhone branch so far.
I will be working on the Media api next to demonstrate how easy it is to play mp3s within PhoneGap, and I might even post some of my own music, we’ll see.
Get it while it’s hot! http://github.com/phonegap/phonegap-iphone
http://github.com/purplecabbage/Jestitute
January 19th, 2010 at 4:42 am
Tried the PhoneGapTutorial, compiled and installed in simulator, but all the links (buttons) cause the app to terminate.
February 12th, 2010 at 5:39 am
I see here http://github.com/phonegap/phonegap-iphone an app but it’s based on a PhoneGapLib app, that’s not part on standard phonegap. So to use that I need to first understand this other PhoneGapLib app. Am I wrong?
February 12th, 2010 at 5:41 am
I would really love to see a full demo application that would demonstrates interesting techniques that we can use, since the documentation is so rare ….
February 24th, 2010 at 2:21 am
[...] UPDATE * Jesse MacFadyen has graciously provided the desired iPhone Phonegap tutorial. I’ve haven’t stopped following the Phonegap mailing list, and am continually impressed [...]
April 18th, 2010 at 4:59 am
Did something change in the new SDK’s to prevent this project not to work?
pressing any of the “buttons” on the initial screen causes the app to crash in the iPhone Simulator
June 21st, 2010 at 5:54 am
Please, provide a step-by-step guide about downloading and viewing the tutorial and the demo application. The URL http://github.com/phonegap/phonegap-iphone clearly says “phonegap” and not “tutorial app”.
August 15th, 2010 at 7:23 am
Hi,
Phonegap looks really interesting - but I am a bit confused. The purpose of Phonegap - as I understand - is to create a common application for all platform.
If this is correct - why is this article focused on the Iphone ?
Im having a really hard time finding a place to start - the demo doesnt work - and the examples in the provided demoWWW (android) doesnt work - besides the buzzer)
Im really trying to push this platform to the rest rest of my organisation (worldwide) - but without proper demos and documentation - its going to be tough.
We’re planning on combining Phonegap with Iwebkit (JQTouch does not work with Android (yet))
Kind regards
Morten
August 15th, 2010 at 1:49 pm
Morten, I work primarily in the iPhone branch of phonegap, so that is my focus. The goal is a common application for all platforms, but without having all the devices and tool-chains setup on a machine this is difficult to achieve.
I also have my own personal goal to make phonegap the easiest way to build an iPhone app.
Most, if not all, of the code used in the example will run on Android if the contents of the www folder are simply dropped into an Android build.
More demos and documentation are perpetually coming, however our focus is on delivering applications to our clients and we roll any additions back into phonegap whenever possible. This is opensource, so we accept contributions from the community as well, you might consider joining the mailing list to ask specific questions, the list / community is very active.
http://groups.google.com/group/phonegap
January 11th, 2011 at 5:22 am
Hi,
This framework is quite easy to install and use, really nice job!
As of the tutorial app, and a little bug that can easily be fixed in the “contacts.html” page, I found a strange issue.
Once contacts were displayed, I tried calling one of them by selecting the recognized phone number.
Once the call is ended, I restarted the tutorial app, and there I had a real issue: the app shows the native contact sheet, with nothing I can do to close and revert back to the app. Is this a known issue?
For the app I intend to write, I would need access to the calendar. I understand this is not hard to add from my own, but it would be nice if this was native from phonegap’s framework, has there been any change from the state we can see on http://groups.google.com/group/phonegap/browse_thread/thread/b64934aac0e9a3d3?pli=1
thanks
March 7th, 2011 at 2:29 pm
The contacts api is being reworked, so expect some changes in the near future.
Follow http://groups.google.com/group/phonegap for more info.
May 9th, 2011 at 9:05 pm
Is there any way to display 2 splash screens by giving time duration while loading iPhone app in phonegapdelegate.m. Because my app is quite heavy and takes 12-15 secs to load. Could you please give some code sample.
Thanks