• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Create a Mobile App in 30 Minutes! Getting Started with PhoneGap and PhoneGap Build
 

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

on

  • 4,805 views

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

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

Statistics

Views

Total Views
4,805
Views on SlideShare
4,805
Embed Views
0

Actions

Likes
3
Downloads
26
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • 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/HelloLAPhoneGap. zip
    • 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. PhoneGap Build Login - an Adobe ID or - a Github account3. Phones with internet or connected to acomputer with internet4. QR Code Reader
    • 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
    • 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
    • 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>
    • 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...
    • 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>
    • 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 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.
    • 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!
    • 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.
    • 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.