SlideShare a Scribd company logo
1 of 27
CROSS PLATFORM
MOBILE DEVELOPMENT
NATIVE PLATFORM
        There are many platforms available
        for developing mobile applications.
        It’s a tedious job for the developer
        to code a application/idea on all
        platform.
        Each platform has its own native
        api which are used for developing
        applications.
        Some of the Mobile Platforms:
             Symbian
             Android
             IOS
             Blackberry
             Web OS
             Windows Phone
             Bada
             Meego
SOLUTION???




 X Platform
CROSS PLATFORM???
<html>
  ..
  ..          Compiler
  ..
<html>




Definition:-A cross mobile platform is a platform that
helps developer to develop the applications in one
common language that would be supported by all the
popular platform.
One piece of code compiled on different platforms.
FEATURES

Free and open source
Create apps with jquery mobile or HTML, CSS & JS
Reduce development and long-term maintenance cost
Reduce technical barriers and the number of required
skills for the development team
Single code for building mobile apps for iPhone, Android
and other platform
Supports all major mobile platforms.
STRATEGY
 Utilize open source technologies
 Write code once and cross-compile on multiple
  mobile platforms
 Reduce the number of skills for development team


                    DESIGN
Use single codebase for different versions of
applications on different platforms
Provide same functionality to all platforms
Cross browser compatibility
DEVELOPMENT
• Create native mobile apps for multiple devices &
  operating systems.
• Access to native APIs using Phonegap.
• Build apps using HTML, Javascript and CSS.


                  PROMOTION
• Publish apps for iOS, Android, Blackberry etc.
• Service customers in a variety of marketplaces.
PHONEGAP???
• An open source Platform which
  makes use of web technologies
  like jquery mobile,html5,css,
  and javascript to create native
  apps.

• A Native library for every
  platform.

• A javaScript ibrary/wrapper.

• Currently known as Apache
  Cordova
API’S SUPPORTED!!!
PHONEGAP HISTORY!!!
• First developed at an iPhoneDevCamp event in San
  Francisco
• IOS running out of Iphone Developer.
• There are lots more web developers out there than
  there are Objective-C ones.
• Need to develop a framework that allowed web
  developers to leverage all their knowledge of HTML,
  CSS, and JavaScript that could also interact with the
  important native parts of an iPhone.
PLATFORM SUPPORT

 •   IOS
 •   Android
 •   Symbian
 •   Blackberry
 •   Windows Phone
 •   Web OS
 •   Bada
 •   Tizen
GETTING STARTED
1. Requirements
Eclipse 3.4+

2. Install SDK + Cordova
Download and install Eclipse Classic
Download and install Android SDK
Download and install ADT Plugin
Download the latest copy of Cordova and extract its
contents.
3. Setup New Project
Launch Eclipse, and select menu item New Project
Then specify an Application Name, a Project Name and
Package Name with Namespace
Then select a graphic
Then Create a Blank Activity
Make sure the activity doesn't inherit from
anything. You most likely won't have PhoneGap on
your Eclipse Workspace. Once this is done, click
finish
In the root directory of your project, create two
new directories:
/libs
assets/www
Copy cordova-2.0.0.js from your Cordova
download earlier to assets/www
Copy cordova-2.0.0.jar from your Cordova
download earlier to /libs
Copy xml folder from your Cordova
download earlier to /res
Verify that cordova-2.0.0.jar is listed in the Build
Path for your project.
Edit your project's main Java file found in the src folder in
Eclipse:
Add import org.apache.cordova.*;
Change the class's extend from Activity to DroidGap
Replace the setContentView() line with
super.loadUrl("file:///android_asset/www/index.html");
•Right click on AndroidManifest.xml and select Open
With > Text Editor
•Paste the following permissions between the <uses-
sdk.../> and <application.../> tags.
 <supports-screens
   android:largeScreens="true"
   android:normalScreens="true"
   android:smallScreens="true"
   android:resizeable="true"
   android:anyDensity="true" />
 <uses-permission android:name="android.permission.VIBRATE" />
 <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
 <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
 <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
 <uses-permission android:name="android.permission.READ_PHONE_STATE" />
 <uses-permission android:name="android.permission.INTERNET" />
 <uses-permission android:name="android.permission.RECEIVE_SMS" />
 <uses-permission android:name="android.permission.RECORD_AUDIO" />
 <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
 <uses-permission android:name="android.permission.READ_CONTACTS" />
 <uses-permission android:name="android.permission.WRITE_CONTACTS" />
 <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
 <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
 <uses-permission android:name="android.permission.GET_ACCOUNTS" />
 <uses-permission android:name="android.permission.BROADCAST_STICKY" />
4. Hello World
•Create and open a new file named index.html in the
assets/www directory. Paste the following code:
<!DOCTYPE HTML>
<html>
<head>
<title>Cordova</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
5A. Deploy to Simulator
Right click the project and go to Run As > Android Application
Eclipse will ask you to select an appropriate AVD. If there isn't
one, then you'll need to create it.

5B. Deploy to Device
Make sure USB debugging is enabled on your device and plug
it into your system. (Settings > Applications > Development)
Right click the project and go to Run As > Android Application
HURRAY
I Developed My 1  st Android App

   without learning Andoid!!!!

More Related Content

What's hot

Cross platform mobile application devlopment
Cross platform mobile application devlopmentCross platform mobile application devlopment
Cross platform mobile application devlopmentPrabhat gangwar
 
Smartface ile Crossplatform Uygulama Geliştirme
Smartface ile Crossplatform Uygulama GeliştirmeSmartface ile Crossplatform Uygulama Geliştirme
Smartface ile Crossplatform Uygulama GeliştirmeMobile İstanbul
 
Top Cross-Platform App Development Frameworks for 2020
Top Cross-Platform App Development Frameworks for 2020Top Cross-Platform App Development Frameworks for 2020
Top Cross-Platform App Development Frameworks for 2020Rockers Technology
 
Synapse india reviews on asp.net mobile application
Synapse india reviews on asp.net mobile applicationSynapse india reviews on asp.net mobile application
Synapse india reviews on asp.net mobile applicationsaritasingh19866
 
Top 10 programming languages for mobile app development
Top 10 programming languages for mobile app developmentTop 10 programming languages for mobile app development
Top 10 programming languages for mobile app developmentWxit Consultant Services
 
What’s New in Flash Player 11.2 and Adobe AIR 3.2
What’s New in Flash Player 11.2 and Adobe AIR 3.2What’s New in Flash Player 11.2 and Adobe AIR 3.2
What’s New in Flash Player 11.2 and Adobe AIR 3.2Joseph Labrecque
 
Cross-Platform Native Apps in Java (budapest.mobile)
Cross-Platform Native Apps in Java (budapest.mobile)Cross-Platform Native Apps in Java (budapest.mobile)
Cross-Platform Native Apps in Java (budapest.mobile)Gergely Kis
 
Xamarin Forms: O caminho para 100% de código compartilhado em aplicativos móveis
Xamarin Forms: O caminho para 100% de código compartilhado em aplicativos móveisXamarin Forms: O caminho para 100% de código compartilhado em aplicativos móveis
Xamarin Forms: O caminho para 100% de código compartilhado em aplicativos móveisakamud
 
Java presentation
Java presentationJava presentation
Java presentationsurajdmk
 
Flash Builder and Flex Future - Multiscreen Development
Flash Builder and Flex Future - Multiscreen DevelopmentFlash Builder and Flex Future - Multiscreen Development
Flash Builder and Flex Future - Multiscreen DevelopmentRyan Stewart
 
Write cross platform native apps in Ruby
Write cross platform native apps in RubyWrite cross platform native apps in Ruby
Write cross platform native apps in RubyGiedrius Rimkus
 
Mobile app development - course intro
Mobile app development - course introMobile app development - course intro
Mobile app development - course introIvano Malavolta
 
Apps multiplataforma com HTML5
Apps multiplataforma com HTML5Apps multiplataforma com HTML5
Apps multiplataforma com HTML5Jomar Silva
 
Modern mobile development overview
Modern mobile development overviewModern mobile development overview
Modern mobile development overviewDima Maleev
 
Go mobile with Windows Phone
Go mobile with Windows PhoneGo mobile with Windows Phone
Go mobile with Windows PhoneDima Maleev
 
Desenvolvimento Apps multiplataforma para dispositivos móveis usando HTML5
Desenvolvimento Apps multiplataforma para dispositivos móveis usando HTML5Desenvolvimento Apps multiplataforma para dispositivos móveis usando HTML5
Desenvolvimento Apps multiplataforma para dispositivos móveis usando HTML5Intel Software Brasil
 

What's hot (20)

Cross platform mobile application devlopment
Cross platform mobile application devlopmentCross platform mobile application devlopment
Cross platform mobile application devlopment
 
Smartface ile Crossplatform Uygulama Geliştirme
Smartface ile Crossplatform Uygulama GeliştirmeSmartface ile Crossplatform Uygulama Geliştirme
Smartface ile Crossplatform Uygulama Geliştirme
 
Top Cross-Platform App Development Frameworks for 2020
Top Cross-Platform App Development Frameworks for 2020Top Cross-Platform App Development Frameworks for 2020
Top Cross-Platform App Development Frameworks for 2020
 
Mobile development
Mobile development Mobile development
Mobile development
 
Synapse india reviews on asp.net mobile application
Synapse india reviews on asp.net mobile applicationSynapse india reviews on asp.net mobile application
Synapse india reviews on asp.net mobile application
 
Top 10 programming languages for mobile app development
Top 10 programming languages for mobile app developmentTop 10 programming languages for mobile app development
Top 10 programming languages for mobile app development
 
What’s New in Flash Player 11.2 and Adobe AIR 3.2
What’s New in Flash Player 11.2 and Adobe AIR 3.2What’s New in Flash Player 11.2 and Adobe AIR 3.2
What’s New in Flash Player 11.2 and Adobe AIR 3.2
 
Cross-Platform Native Apps in Java (budapest.mobile)
Cross-Platform Native Apps in Java (budapest.mobile)Cross-Platform Native Apps in Java (budapest.mobile)
Cross-Platform Native Apps in Java (budapest.mobile)
 
Fire up your mobile app!
Fire up your mobile app!Fire up your mobile app!
Fire up your mobile app!
 
Xamarin Forms: O caminho para 100% de código compartilhado em aplicativos móveis
Xamarin Forms: O caminho para 100% de código compartilhado em aplicativos móveisXamarin Forms: O caminho para 100% de código compartilhado em aplicativos móveis
Xamarin Forms: O caminho para 100% de código compartilhado em aplicativos móveis
 
An introduction to Xamarin
An introduction to XamarinAn introduction to Xamarin
An introduction to Xamarin
 
Java presentation
Java presentationJava presentation
Java presentation
 
Flash Builder and Flex Future - Multiscreen Development
Flash Builder and Flex Future - Multiscreen DevelopmentFlash Builder and Flex Future - Multiscreen Development
Flash Builder and Flex Future - Multiscreen Development
 
Write cross platform native apps in Ruby
Write cross platform native apps in RubyWrite cross platform native apps in Ruby
Write cross platform native apps in Ruby
 
Mobile app development - course intro
Mobile app development - course introMobile app development - course intro
Mobile app development - course intro
 
Lecture 1
Lecture 1Lecture 1
Lecture 1
 
Apps multiplataforma com HTML5
Apps multiplataforma com HTML5Apps multiplataforma com HTML5
Apps multiplataforma com HTML5
 
Modern mobile development overview
Modern mobile development overviewModern mobile development overview
Modern mobile development overview
 
Go mobile with Windows Phone
Go mobile with Windows PhoneGo mobile with Windows Phone
Go mobile with Windows Phone
 
Desenvolvimento Apps multiplataforma para dispositivos móveis usando HTML5
Desenvolvimento Apps multiplataforma para dispositivos móveis usando HTML5Desenvolvimento Apps multiplataforma para dispositivos móveis usando HTML5
Desenvolvimento Apps multiplataforma para dispositivos móveis usando HTML5
 

Similar to Cross-Platform Mobile Apps in 40 Characters

Cross-platform Mobile Development on Open Source
Cross-platform Mobile Development on Open SourceCross-platform Mobile Development on Open Source
Cross-platform Mobile Development on Open SourceAll Things Open
 
Hybrid Mobile Applications
Hybrid Mobile ApplicationsHybrid Mobile Applications
Hybrid Mobile ApplicationsRuwan Ranganath
 
Build Your First iPhone or Android App with Telerik AppBuilder
Build Your First iPhone or Android App with Telerik AppBuilderBuild Your First iPhone or Android App with Telerik AppBuilder
Build Your First iPhone or Android App with Telerik AppBuilderJeffrey T. Fritz
 
Rapid Prototyping with Cordova aka Phonegap
Rapid Prototyping with Cordova aka PhonegapRapid Prototyping with Cordova aka Phonegap
Rapid Prototyping with Cordova aka PhonegapJosue Bustos
 
Best Platforms For Mobile App Development
Best Platforms For Mobile App DevelopmentBest Platforms For Mobile App Development
Best Platforms For Mobile App DevelopmentMagneto IT Solutions
 
Top Technologies to Develop Mobile Apps.pptx
Top Technologies to Develop Mobile Apps.pptxTop Technologies to Develop Mobile Apps.pptx
Top Technologies to Develop Mobile Apps.pptxGokulKanna18
 
NCDevCon 2017 - Cross Platform Mobile Apps
NCDevCon 2017 - Cross Platform Mobile AppsNCDevCon 2017 - Cross Platform Mobile Apps
NCDevCon 2017 - Cross Platform Mobile AppsJohn M. Wargo
 
MobApp development 01 application platform.pptx
MobApp development 01 application platform.pptxMobApp development 01 application platform.pptx
MobApp development 01 application platform.pptxsanaiftikhar23
 
fdocuments.in_apache-cordova-overview.pptx
fdocuments.in_apache-cordova-overview.pptxfdocuments.in_apache-cordova-overview.pptx
fdocuments.in_apache-cordova-overview.pptxssuserd27db6
 
Getting Acquainted with PhoneGap
Getting Acquainted with PhoneGapGetting Acquainted with PhoneGap
Getting Acquainted with PhoneGapJoseph Labrecque
 
Introduction to the cordova framework for developing mobile apps1
Introduction to the cordova framework for developing mobile apps1Introduction to the cordova framework for developing mobile apps1
Introduction to the cordova framework for developing mobile apps1Lisa Brown
 
Mono for Android... for Google Devs
Mono for Android... for Google DevsMono for Android... for Google Devs
Mono for Android... for Google DevsCraig Dunn
 
The iPhone development on windows
The iPhone development on windowsThe iPhone development on windows
The iPhone development on windowsNAILBITER
 
The Ultimate Guide to Cross-Platform App Development
The Ultimate Guide to Cross-Platform App DevelopmentThe Ultimate Guide to Cross-Platform App Development
The Ultimate Guide to Cross-Platform App Developmentjennyaistechnolabs
 

Similar to Cross-Platform Mobile Apps in 40 Characters (20)

Cross-platform Mobile Development on Open Source
Cross-platform Mobile Development on Open SourceCross-platform Mobile Development on Open Source
Cross-platform Mobile Development on Open Source
 
Hybrid Mobile Applications
Hybrid Mobile ApplicationsHybrid Mobile Applications
Hybrid Mobile Applications
 
Build Your First iPhone or Android App with Telerik AppBuilder
Build Your First iPhone or Android App with Telerik AppBuilderBuild Your First iPhone or Android App with Telerik AppBuilder
Build Your First iPhone or Android App with Telerik AppBuilder
 
Rapid Prototyping with Cordova aka Phonegap
Rapid Prototyping with Cordova aka PhonegapRapid Prototyping with Cordova aka Phonegap
Rapid Prototyping with Cordova aka Phonegap
 
Best Platforms For Mobile App Development
Best Platforms For Mobile App DevelopmentBest Platforms For Mobile App Development
Best Platforms For Mobile App Development
 
Hybridapp
HybridappHybridapp
Hybridapp
 
Top Technologies to Develop Mobile Apps.pptx
Top Technologies to Develop Mobile Apps.pptxTop Technologies to Develop Mobile Apps.pptx
Top Technologies to Develop Mobile Apps.pptx
 
Apache cordova
Apache cordovaApache cordova
Apache cordova
 
NCDevCon 2017 - Cross Platform Mobile Apps
NCDevCon 2017 - Cross Platform Mobile AppsNCDevCon 2017 - Cross Platform Mobile Apps
NCDevCon 2017 - Cross Platform Mobile Apps
 
MobApp development 01 application platform.pptx
MobApp development 01 application platform.pptxMobApp development 01 application platform.pptx
MobApp development 01 application platform.pptx
 
fdocuments.in_apache-cordova-overview.pptx
fdocuments.in_apache-cordova-overview.pptxfdocuments.in_apache-cordova-overview.pptx
fdocuments.in_apache-cordova-overview.pptx
 
Getting Acquainted with PhoneGap
Getting Acquainted with PhoneGapGetting Acquainted with PhoneGap
Getting Acquainted with PhoneGap
 
Introduction to the cordova framework for developing mobile apps1
Introduction to the cordova framework for developing mobile apps1Introduction to the cordova framework for developing mobile apps1
Introduction to the cordova framework for developing mobile apps1
 
iOS App Using cordova
iOS App Using cordovaiOS App Using cordova
iOS App Using cordova
 
Mono for Android... for Google Devs
Mono for Android... for Google DevsMono for Android... for Google Devs
Mono for Android... for Google Devs
 
The iPhone development on windows
The iPhone development on windowsThe iPhone development on windows
The iPhone development on windows
 
Phone gap
Phone gapPhone gap
Phone gap
 
Cross mobility
Cross mobilityCross mobility
Cross mobility
 
The Ultimate Guide to Cross-Platform App Development
The Ultimate Guide to Cross-Platform App DevelopmentThe Ultimate Guide to Cross-Platform App Development
The Ultimate Guide to Cross-Platform App Development
 
Mobile Web Apps
Mobile Web AppsMobile Web Apps
Mobile Web Apps
 

Cross-Platform Mobile Apps in 40 Characters

  • 2. NATIVE PLATFORM There are many platforms available for developing mobile applications. It’s a tedious job for the developer to code a application/idea on all platform. Each platform has its own native api which are used for developing applications. Some of the Mobile Platforms: Symbian Android IOS Blackberry Web OS Windows Phone Bada Meego
  • 4. CROSS PLATFORM??? <html> .. .. Compiler .. <html> Definition:-A cross mobile platform is a platform that helps developer to develop the applications in one common language that would be supported by all the popular platform. One piece of code compiled on different platforms.
  • 5. FEATURES Free and open source Create apps with jquery mobile or HTML, CSS & JS Reduce development and long-term maintenance cost Reduce technical barriers and the number of required skills for the development team Single code for building mobile apps for iPhone, Android and other platform Supports all major mobile platforms.
  • 6. STRATEGY  Utilize open source technologies  Write code once and cross-compile on multiple mobile platforms  Reduce the number of skills for development team DESIGN Use single codebase for different versions of applications on different platforms Provide same functionality to all platforms Cross browser compatibility
  • 7. DEVELOPMENT • Create native mobile apps for multiple devices & operating systems. • Access to native APIs using Phonegap. • Build apps using HTML, Javascript and CSS. PROMOTION • Publish apps for iOS, Android, Blackberry etc. • Service customers in a variety of marketplaces.
  • 8. PHONEGAP??? • An open source Platform which makes use of web technologies like jquery mobile,html5,css, and javascript to create native apps. • A Native library for every platform. • A javaScript ibrary/wrapper. • Currently known as Apache Cordova
  • 10. PHONEGAP HISTORY!!! • First developed at an iPhoneDevCamp event in San Francisco • IOS running out of Iphone Developer. • There are lots more web developers out there than there are Objective-C ones. • Need to develop a framework that allowed web developers to leverage all their knowledge of HTML, CSS, and JavaScript that could also interact with the important native parts of an iPhone.
  • 11. PLATFORM SUPPORT • IOS • Android • Symbian • Blackberry • Windows Phone • Web OS • Bada • Tizen
  • 13. 1. Requirements Eclipse 3.4+ 2. Install SDK + Cordova Download and install Eclipse Classic Download and install Android SDK Download and install ADT Plugin Download the latest copy of Cordova and extract its contents.
  • 14. 3. Setup New Project Launch Eclipse, and select menu item New Project
  • 15. Then specify an Application Name, a Project Name and Package Name with Namespace
  • 16. Then select a graphic
  • 17. Then Create a Blank Activity
  • 18. Make sure the activity doesn't inherit from anything. You most likely won't have PhoneGap on your Eclipse Workspace. Once this is done, click finish In the root directory of your project, create two new directories: /libs assets/www Copy cordova-2.0.0.js from your Cordova download earlier to assets/www
  • 19. Copy cordova-2.0.0.jar from your Cordova download earlier to /libs Copy xml folder from your Cordova download earlier to /res
  • 20. Verify that cordova-2.0.0.jar is listed in the Build Path for your project.
  • 21. Edit your project's main Java file found in the src folder in Eclipse: Add import org.apache.cordova.*; Change the class's extend from Activity to DroidGap Replace the setContentView() line with super.loadUrl("file:///android_asset/www/index.html");
  • 22.
  • 23. •Right click on AndroidManifest.xml and select Open With > Text Editor •Paste the following permissions between the <uses- sdk.../> and <application.../> tags. <supports-screens android:largeScreens="true" android:normalScreens="true" android:smallScreens="true" android:resizeable="true" android:anyDensity="true" /> <uses-permission android:name="android.permission.VIBRATE" /> <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" /> <uses-permission android:name="android.permission.READ_PHONE_STATE" /> <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.RECEIVE_SMS" /> <uses-permission android:name="android.permission.RECORD_AUDIO" /> <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" /> <uses-permission android:name="android.permission.READ_CONTACTS" /> <uses-permission android:name="android.permission.WRITE_CONTACTS" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <uses-permission android:name="android.permission.GET_ACCOUNTS" /> <uses-permission android:name="android.permission.BROADCAST_STICKY" />
  • 24.
  • 25. 4. Hello World •Create and open a new file named index.html in the assets/www directory. Paste the following code: <!DOCTYPE HTML> <html> <head> <title>Cordova</title> <script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script> </head> <body> <h1>Hello World</h1> </body> </html>
  • 26. 5A. Deploy to Simulator Right click the project and go to Run As > Android Application Eclipse will ask you to select an appropriate AVD. If there isn't one, then you'll need to create it. 5B. Deploy to Device Make sure USB debugging is enabled on your device and plug it into your system. (Settings > Applications > Development) Right click the project and go to Run As > Android Application
  • 27. HURRAY I Developed My 1 st Android App without learning Andoid!!!!