0
Getting Started withPhoneGap     by George McKinney        @georgemck     of LA PhoneGap
Additional Resources WATCH video http://youtube.com/watch? v=37xEisu4FGs Download project files http://laphonegap.org/Hell...
GOAL: MAKE SOME APPS!Take a simple webpage and put it on - BlackBerry, - Android, - iOS and - Windows Phone
PREREQUISITES1. Web application  - either a single index.html file or  - a zip file containing index.html and more2. Phone...
PROCEDUREFirst you have to create the web applicationand place the files into a zip fileSecond you log into PhoneGap Build...
The zip file is uploaded to PhoneGapBuild, http://build.phonegap.comThe zip file contains: - index.html - config.xml - lap...
index.html<!doctype html><html>    <body>        <h1>             <br />             <a href="http://meetup.com/laphonegap...
config.xml<?xml version="1.0" encoding="UTF-8" ?>  <widget xmlns = "http://www.w3.org/ns/widgets"    xmlns:gap = "http://p...
config.xml      <!-- the default splash screen to use -->      <!-- iOS -->      <gap:splash src="laphonegap_splash.png" w...
images of laphonegap_logo.jpg
LOG INTO PHONEGAP BUILDGithub is a great place to checkout opensource projects. If you have an account, youcan fork code a...
FIRST LOGINImmediately after logging in the first time,PhoneGap Build asks you what app you wantto create.You can either u...
PUTTING APPS ON DEVICESThe easiest way is to use a QR code readeron your phone to scan the QR code thatPhoneGap Build crea...
CONCLUSIONThis shows to get started quickly withcreating mobile appsThere are more things you can do that giveyou more con...
Upcoming SlideShare
Loading in...5
×

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

4,890

Published on

Watch video http://www.youtube.com/watch?v=37xEisu4FGs or download project at http://laphonegap.org/HelloLAPhoneGap.zip.

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

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,890
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
36
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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

  1. 1. Getting Started withPhoneGap by George McKinney @georgemck of LA PhoneGap
  2. 2. Additional Resources WATCH video http://youtube.com/watch? v=37xEisu4FGs Download project files http://laphonegap.org/HelloLAPhoneGap. zip
  3. 3. GOAL: MAKE SOME APPS!Take a simple webpage and put it on - BlackBerry, - Android, - iOS and - Windows Phone
  4. 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. 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. 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. 7. index.html<!doctype html><html> <body> <h1> <br /> <a href="http://meetup.com/laphonegap"> Hello <img src="laphonegap_logo.jpg" border="0" width="100%" /> </a> <br /> </h1> </body></html>
  8. 8. config.xml<?xml version="1.0" encoding="UTF-8" ?> <widget xmlns = "http://www.w3.org/ns/widgets" xmlns:gap = "http://phonegap.com/ns/1.0" id = "org.laphonegap.helloworld" versionCode="10" version = "1.0.0"> <!-- For more information about using config.xml, see https://build.phonegap.com/docs/config-xml --> <!-- 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. 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="https://laphonegap.org" email="george@laphonegap.org"> George McKinney </author></widget>
  10. 10. images of laphonegap_logo.jpg
  11. 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. 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. 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. 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.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×