Cross Platform Mobile App Development

1,276
-1

Published on

1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total Views
1,276
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
29
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

Cross Platform Mobile App Development

  1. 1. Cross Platform Mobile App Development With Jakir Hossain
  2. 2. Some Cross Platform Mobile App Development Tools • RhoMobile • Appcelerator • WidgetPad • PhoneGap • MoSync • Sencha • Webapp-net • MotherApp • Marmalade • Volantis mobility server
  3. 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. 4. •Two ways of creating • ‘Drop-in libraires’ • Comand Line Interface New PhoneGap Project
  5. 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. 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.)
  7. 7. Hello World PhoneGap
  8. 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. 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. 10. LIVE DEMO Hello World PhoneGap
  11. 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. 12. • http://tech.jakir.me/1395 PhoneGap Comanline Interface Setup
  13. 13. • Jqwidgets • Kendo UI • jQuery Mobile • webix User Interface for HTML5 App
  14. 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. 15. Need to know JavaScript
  16. 16. Questions?

×