Create a Mobile App in 30 Minutes! Getting Started with PhoneGap and PhoneGap Build
14
Click here to load reader
-
Upload
georgemck -
Category
Self Improvement
-
view
4.832 -
download
0
description
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
Transcript of Create a Mobile App in 30 Minutes! Getting Started with PhoneGap and PhoneGap Build
Getting Started with PhoneGap
by George McKinney @georgemck of LA PhoneGap
Additional ResourcesWATCH video http://youtube.com/watch?v=37xEisu4FGs
Download project fileshttp://laphonegap.org/HelloLAPhoneGap.zip
GOAL: MAKE SOME APPS!
Take a simple webpage and put it on
- BlackBerry, - Android, - iOS and - Windows Phone
PREREQUISITES
1. 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 a computer with internet 4. QR Code Reader
PROCEDURE
First you have to create the web application and place the files into a zip file
Second you log into PhoneGap Build and upload the zip file and set the appropriate options. For iOS, you must set the security key as well
Third, you set the device to install the app
The zip file is uploaded to PhoneGap Build, http://build.phonegap.com
The 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, seehttps://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="[email protected]"> George McKinney </author>
</widget>
images of laphonegap_logo.jpg
LOG INTO PHONEGAP BUILD
Github is a great place to checkout open source projects. If you have an account, you can fork code and pull it into PhoneGap Build easily.
Adobe is a great place to learn about and get software. With an Adobe ID, you can connect with others and gain access to resources like training, software and hosted services from Adobe like PhoneGap Build.
FIRST LOGIN
Immediately after logging in the first time, PhoneGap Build asks you what app you want to create.
You can either upload an html or a zip, or you could select a repository and it will retrieve your ready-made project and start compiling the apps.
Every project must have an index.html file!
PUTTING APPS ON DEVICES
The easiest way is to use a QR code reader on your phone to scan the QR code that PhoneGap Build creates.
Alternatively, you can download the app to your computer and use the native toolchain to deploy the app to your device.
CONCLUSION
This shows to get started quickly with creating mobile apps
There are more things you can do that give you more control over your app and also platform-specific step customizations as well but this will get you familiarized with what is going on.
