Your SlideShare is downloading. ×
Create a Mobile App in 30 Minutes! Getting Started with PhoneGap and PhoneGap Build
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Create a Mobile App in 30 Minutes! Getting Started with PhoneGap and PhoneGap Build


Published on

Watch video or download project at …

Watch video or download project at

This is a brief overview of how to build mobile applications using the PhoneGap framework.

Using a text editor and a web browser and a few images, a Hello LA PhoneGap application will be built

  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Getting Started withPhoneGap by George McKinney @georgemck of LA PhoneGap
  • 2. Additional Resources WATCH video v=37xEisu4FGs Download project files zip
  • 3. GOAL: MAKE SOME APPS!Take a simple webpage and put it on - BlackBerry, - Android, - iOS and - Windows Phone
  • 4. PREREQUISITES1. Web application - either a single index.html file or - a zip file containing index.html and more2. PhoneGap Build Login - an Adobe ID or - a Github account3. Phones with internet or connected to acomputer with internet4. QR Code Reader
  • 5. PROCEDUREFirst you have to create the web applicationand place the files into a zip fileSecond you log into PhoneGap Build andupload the zip file and set the appropriateoptions. For iOS, you must set the security keyas wellThird, you set the device to install the app
  • 6. The zip file is uploaded to PhoneGapBuild, http://build.phonegap.comThe zip file contains: - index.html - config.xml - laphonegap_logo.jpg - laphonegap_icon.png - laphonegap_splash.jpg - laphonegap_splash.png
  • 7. index.html<!doctype html><html> <body> <h1> <br /> <a href=""> Hello <img src="laphonegap_logo.jpg" border="0" width="100%" /> </a> <br /> </h1> </body></html>
  • 8. config.xml<?xml version="1.0" encoding="UTF-8" ?> <widget xmlns = "" xmlns:gap = "" id = "org.laphonegap.helloworld" versionCode="10" version = "1.0.0"> <!-- For more information about using config.xml, see --> <!-- versionCode is optional and Android only --> <!-- define which version of phonegap to use, not required --> <preference name="phonegap-version" value="1.9.0" /> <!-- this app will have no device api access --> <preference name="permissions" value="none"/> <!-- the default icon to be use, for BlackBerry must be less than 16kb --> <icon src="laphonegap_icon.png" />continued next slide...
  • 9. config.xml <!-- the default splash screen to use --> <!-- iOS --> <gap:splash src="laphonegap_splash.png" width="320" height="480" /> <gap:splash src="laphonegap_splash.png" width="640" height="960" /> <gap:splash src="laphonegap_splash.png" width="1024" height="768" /> <gap:splash src="laphonegap_splash.png" width="768" height="1024" /> <!-- Android --> <gap:splash src="laphonegap_splash.png" gap:platform="android" gap:density="ldpi" /> <gap:splash src="laphonegap_splash.png" gap:platform="android" gap:density="mdpi" /> <gap:splash src="laphonegap_splash.png" gap:platform="android" gap:density="hdpi" /> <gap:splash src="laphonegap_splash.png" gap:platform="android" gap:density="xhdpi" /> <!-- BlackBerry --> <gap:splash src="laphonegap_splash.png" gap:platform="blackberry" /> <!-- Windows Phone --> <gap:splash src="laphonegap_splash.jpg" gap:platform="winphone" /> <name>Hello LA PhoneGap</name> <description> Simple example for phonegap usage. </description> <author href="" email=""> George McKinney </author></widget>
  • 10. images of laphonegap_logo.jpg
  • 11. LOG INTO PHONEGAP BUILDGithub is a great place to checkout opensource projects. If you have an account, youcan fork code and pull it into PhoneGap Buildeasily.Adobe is a great place to learn about and getsoftware. With an Adobe ID, you can connectwith others and gain access to resources liketraining, software and hosted services fromAdobe like PhoneGap Build.
  • 12. FIRST LOGINImmediately after logging in the first time,PhoneGap Build asks you what app you wantto create.You can either upload an html or a zip, or youcould select a repository and it will retrieveyour ready-made project and start compilingthe apps.Every project must have an index.html file!
  • 13. PUTTING APPS ON DEVICESThe easiest way is to use a QR code readeron your phone to scan the QR code thatPhoneGap Build creates.Alternatively, you can download the app toyour computer and use the native toolchainto deploy the app to your device.
  • 14. CONCLUSIONThis shows to get started quickly withcreating mobile appsThere are more things you can do that giveyou more control over your app and alsoplatform-specific step customizations as wellbut this will get you familiarized with what isgoing on.