Cross Platform Mobile App Development
Download as PPTX, PDF0 likes1,679 views
This document discusses cross-platform mobile app development tools, focusing on PhoneGap. It provides an overview of PhoneGap's hybrid development model and the steps to create a new PhoneGap project using the command line interface or drop-in libraries. It then demonstrates building a simple "Hello World" PhoneGap app and running it on an Android emulator.
Cross Platform Mobile App Development
- 1. Cross Platform Mobile App Development With Jakir Hossain
- 2. Some Cross Platform Mobile App Development Tools • RhoMobile • Appcelerator • WidgetPad • PhoneGap • MoSync • Sencha • Webapp-net • MotherApp • Marmalade • Volantis mobility server
- 3. • Web approach using hybrid model (Combines native development with web technology.) • HTML 5, CSS 3, JavaScript running on a mobile browser embedded in a native app wrapper. • Device capabilities accessed through device- independent JavaScript API. • Simple ‘drop-in libraires’ concept makes it easier to develop. PhoneGap
- 4. •Two ways of creating • ‘Drop-in libraires’ • Comand Line Interface New PhoneGap Project
- 5. • Create an android project • File -> New -> Android Project • In the root directory of the project, create two new directories • /libs and /assets/www • Copy phonegap.js from your PhoneGap download earlier to /assets/www • Create an index.html file in /assets/www • Copy cordova.jar from your PhoneGap download to /libs • Copy xml folder from your PhoneGap download to /res PhoneGap Project – Drop-in Library
- 6. • Make a few adjustments to the project's main Java file • Change the class's extend from Activity to DroidGap • Replace the setContentView() line with super.loadUrl(Config.getStartUrl()); • Add import com.phonegap.* • Remove import android.app.Activity New PhoneGap Project (cont.)
- 8. • Lets make our "Hello World, PhoneGap!" application • Till now we have an empty PhoneGap project • All we need to do is to edit the index.html file • Created by us • Located in /assets/www • This is the Entry point of our Application Hello World PhoneGap
- 9. Hello World PhoneGap – Example Hello World, PhoneGap! • Open the index.html and copy the following <!Doctype html> <html> <head> <title> First PhoneGap Application </title> <head> <body> <h1>Hello PhoneGap</h1> </body> </html> Go to Build -> Run as Android Application The emulator should start And the app run!
- 10. LIVE DEMO Hello World PhoneGap
- 11. • Creating a Project: $cordova create hello com.example.hello “HelloWorld” • Add Platform: $cordova platform add android • Build / Run $cordova build PhoneGap Comanline Interface
- 12. • http://tech.jakir.me/1395 PhoneGap Comanline Interface Setup
- 13. • Jqwidgets • Kendo UI • jQuery Mobile • webix User Interface for HTML5 App
- 14. • WebGL (OpenGL ES 2.0 for the Web) http://www.chromeexperiments.com/webgl/ • Quintus http://html5quintus.com/ • ImpactJS http://impactjs.com/ • LimeJS http://www.limejs.com/ • melonJS http://melonjs.org/ • cocoonjs Want to develop Games?
- 15. Need to know JavaScript
- 16. Questions?