Create a Mobile App in 30 Minutes! Getting Started with PhoneGap and PhoneGap Build
Click here to load reader
-
Upload
georgemck -
Category
Self Improvement
-
view
4.832 -
download
0
description
Transcript of Create a Mobile App in 30 Minutes! Getting Started with PhoneGap and PhoneGap Build
![Page 1: Create a Mobile App in 30 Minutes! Getting Started with PhoneGap and PhoneGap Build](https://reader038.fdocuments.us/reader038/viewer/2022100500/55581454d8b42a25588b4586/html5/thumbnails/1.jpg)
Getting Started with PhoneGap
by George McKinney @georgemck of LA PhoneGap
![Page 2: Create a Mobile App in 30 Minutes! Getting Started with PhoneGap and PhoneGap Build](https://reader038.fdocuments.us/reader038/viewer/2022100500/55581454d8b42a25588b4586/html5/thumbnails/2.jpg)
Additional ResourcesWATCH video http://youtube.com/watch?v=37xEisu4FGs
Download project fileshttp://laphonegap.org/HelloLAPhoneGap.zip
![Page 3: Create a Mobile App in 30 Minutes! Getting Started with PhoneGap and PhoneGap Build](https://reader038.fdocuments.us/reader038/viewer/2022100500/55581454d8b42a25588b4586/html5/thumbnails/3.jpg)
GOAL: MAKE SOME APPS!
Take a simple webpage and put it on
- BlackBerry, - Android, - iOS and - Windows Phone
![Page 4: Create a Mobile App in 30 Minutes! Getting Started with PhoneGap and PhoneGap Build](https://reader038.fdocuments.us/reader038/viewer/2022100500/55581454d8b42a25588b4586/html5/thumbnails/4.jpg)
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
![Page 5: Create a Mobile App in 30 Minutes! Getting Started with PhoneGap and PhoneGap Build](https://reader038.fdocuments.us/reader038/viewer/2022100500/55581454d8b42a25588b4586/html5/thumbnails/5.jpg)
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
![Page 6: Create a Mobile App in 30 Minutes! Getting Started with PhoneGap and PhoneGap Build](https://reader038.fdocuments.us/reader038/viewer/2022100500/55581454d8b42a25588b4586/html5/thumbnails/6.jpg)
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
![Page 7: Create a Mobile App in 30 Minutes! Getting Started with PhoneGap and PhoneGap Build](https://reader038.fdocuments.us/reader038/viewer/2022100500/55581454d8b42a25588b4586/html5/thumbnails/7.jpg)
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>
![Page 8: Create a Mobile App in 30 Minutes! Getting Started with PhoneGap and PhoneGap Build](https://reader038.fdocuments.us/reader038/viewer/2022100500/55581454d8b42a25588b4586/html5/thumbnails/8.jpg)
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...
![Page 9: Create a Mobile App in 30 Minutes! Getting Started with PhoneGap and PhoneGap Build](https://reader038.fdocuments.us/reader038/viewer/2022100500/55581454d8b42a25588b4586/html5/thumbnails/9.jpg)
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>
![Page 10: Create a Mobile App in 30 Minutes! Getting Started with PhoneGap and PhoneGap Build](https://reader038.fdocuments.us/reader038/viewer/2022100500/55581454d8b42a25588b4586/html5/thumbnails/10.jpg)
images of laphonegap_logo.jpg
![Page 11: Create a Mobile App in 30 Minutes! Getting Started with PhoneGap and PhoneGap Build](https://reader038.fdocuments.us/reader038/viewer/2022100500/55581454d8b42a25588b4586/html5/thumbnails/11.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.
![Page 12: Create a Mobile App in 30 Minutes! Getting Started with PhoneGap and PhoneGap Build](https://reader038.fdocuments.us/reader038/viewer/2022100500/55581454d8b42a25588b4586/html5/thumbnails/12.jpg)
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!
![Page 13: Create a Mobile App in 30 Minutes! Getting Started with PhoneGap and PhoneGap Build](https://reader038.fdocuments.us/reader038/viewer/2022100500/55581454d8b42a25588b4586/html5/thumbnails/13.jpg)
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.
![Page 14: Create a Mobile App in 30 Minutes! Getting Started with PhoneGap and PhoneGap Build](https://reader038.fdocuments.us/reader038/viewer/2022100500/55581454d8b42a25588b4586/html5/thumbnails/14.jpg)
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.