Create a Mobile App in 30 Minutes! Getting Started with PhoneGap and PhoneGap Build
•
4 j'aime•5,083 vues
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
Recommandé
Recommandé
Contenu connexe
Dernier
Dernier (14)
En vedette
En vedette (20)
Create a Mobile App in 30 Minutes! Getting Started with PhoneGap and PhoneGap Build
- 1. Getting Started with PhoneGap by George McKinney @georgemck of LA PhoneGap
- 2. Additional Resources WATCH video http://youtube.com/watch? v=37xEisu4FGs Download project files http://laphonegap.org/HelloLAPhoneGap. zip
- 3. GOAL: MAKE SOME APPS! Take a simple webpage and put it on - BlackBerry, - Android, - iOS and - Windows Phone
- 4. PREREQUISITES 1. Web application - either a single index.html file or - a zip file containing index.html and more 2. PhoneGap Build Login - an Adobe ID or - a Github account 3. Phones with internet or connected to a computer with internet 4. QR Code Reader
- 5. 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
- 6. 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
- 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. 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. 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>
- 11. 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.
- 12. 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!
- 13. 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.
- 14. 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.