Cross Platform Mobile App Development

  • 990 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
990
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
26
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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.)
  • 7. Hello World PhoneGap
  • 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?