Skip to Content
Author's profile photo Virinchy Panangipalli

What is Cordova and how does it work ?

What is Cordova ?

Cordova ,formerly called as Phone Gap is a platform to build Native Mobile Applicatons using HTML5, CSS and Java Script.

In other words it acts  a container for running a web application written in HTML, CSS,JS Typically Web applications cannot use the native device functionality like Camera, GPS, Accelerometer , Contacts etc. . With Cordova we can very much achieve this and package the web application in the devices installer format.


Device installer formats :

Android – .apk (Android Application Package)

IOS – .ipa (iPhone Application Archive)

Windows Phone .xap (Silverlight Application Package)


Are PhoneGap and Apache Cordova different ?

Both are the same . But we can say that Apache Cordova as an engine that powers PhoneGap , like how Webkit is an engine that powers Chrome.

More details on the name transitions from PhoneGap to Cordova are here

How Does it actually work ?

Technically the User Interface of a Cordova Application is effectively a WebView that occupies the complete screen and runs in the native Container. So , it is the same web view that is used by the Native  Operating systems. This purely means that only the Native Containers changes according to the OS and internally the web pages remain the same. (Since the browser rendering of webpages are different for each operating systems)


For       IOS it is UIWebView class

             Android it is in  android.webkit.webview

             Windows it is WebViewClass and the similar goes to other OS .

Cordova_framework.png

and the Cordova libraries communicate with the Native Framework of the respective OS .

Cool then what device API’s are available ?

This list has that answer

OK , Then – What OS are supported ?

Almost all major platforms are supported . Here’s the list

WOW ! i ‘m loving this . How much does this cost ?

Its absolutely free . Cordova was announced as an Open Source project and will always remain free licensed under Apache License ,Version 2.0

Interesting !!! But my Application Requirement is not completely satisfied with the list of plugins API ‘s available. How should i proceed ?

No problem . It is completely extensible . If cordova does not provide an API to complete your Application requirement , then a custom Native Plugin can be created and used.

What is Kapsel ?

Kapsel is a set of custom plugins developed  by SAP underlying the Cordova technology to meet the enterprise requirements like encryption storage,Cache Management, Logon, AuthProxy,fiori client  etc and delivered from SMP3.0 (SAP Mobile Platform 3.X ) and integrated with it.

Get more information on Kapsel and its usage

My Good Friends for Developing applications :

1) Chrome Remote Debugging is really a cool feature of chrome to test and debug Mobile Web applications for Android. It helps by a great extent to inspect,analyse and debug browser tabs, web views of Android. (works well from Cordova v 3.3.0 )


2) Mobile Emulation is a unique feature of chrome which reduces the complexity to test the web application on multiple devices and different OS.

How to enable Mobile Emulation in Chrome


3) A New feature The PhoneGap Developer App has been added recently by Cordova , which saves a lot of time in compiling and packaging the Application for testing the changes during development .

Just Download the Native containers as applications for the required OS from PhoneGap Developer App . Open the developed project and start in a local server and specify the IP address of the desktop server in the downloaded application.


Boom!!! when both get paired all the web pages are loaded in the application and can gain the power of the Native Device API s that are nt supported by browsers .

This gives a great power and eases the development with cordova showing the changes instantaneously.


This is a long awaited feature and is now available .


4) Use ConfigApp  to quickly create and edit config.xml files used by Cordova apps. ConfiGAP eases the process of changing the app id, icon,app name, manage plugins used in the app, splash screen, permissions of the app, and builds the app specific to device OS.

This tool becomes handy when building custom Fiori Client or building new Kapsel application. 


Happy Working with Cordova and Kapsel !!!


CC:

SAPUI5 Developer Center


Assigned Tags

      25 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Virinchi ,

       

      Your blog is very good and is pretty easy to understand for the beginners .

      Author's profile photo Former Member
      Former Member

      hey,

       

      Thanks for sharing this - quite a clear picture of Cordova.

       

      Regards,
      Shivam.

      Author's profile photo Former Member
      Former Member

      Thanks for sharing this blog Virinchy P , This is very clear to understand the importance Apache Cordova.

       

       

      Best Regards,

      Vamsi K.

      Author's profile photo Former Member
      Former Member

      Good Job Virinchy.

       

       

       

      Regards,

      Raghu.

      Author's profile photo Hemendra Sabharwal
      Hemendra Sabharwal

      Well explained Virinchy, nice blog and shared good INLINE links for further explorations.

      Thanks,

       

      Warm Regards

      Hemendra

      Author's profile photo Panagiotis Papaspyridakos
      Panagiotis Papaspyridakos

      Thanks for sharing.

      Author's profile photo Pradeep Kumar Ganugapenta
      Pradeep Kumar Ganugapenta

      Nice blog Virinchy

      Author's profile photo Sukanta Rudra
      Sukanta Rudra

      Hi,

      There have been many plethora of mobility frameworks (e.g Kony, HTML5 based  frameworks) that have same features as Cordova - write your code once and run it on multiple platforms. Some are free others are not. Have recently implemented a mobility app (integrating with backend ECC, CRM) with one such framework there are a certain I would like to consider before choosing a framework:

      a) How easy it to build security into the app (read the login module)?

      b) How do I know that the requests for my data is an authenticated source?

      c) How good is the vendor support with plugins, upgrades to SDK?

      d) For frameworks that are free, do vendors really pay attention to issues that you are facing during very specific to your implementation.

      e) Scalability of the framework to support the app with newer mobile OSs, mobility sets (Motorola, Micromax, Blackberry)

      f) All mobile sets have limited memory at most to 2GB (or little more). How will the framework help in viewing huge amount of data that is there in SAP?

      From my expereince, I would say it is big pain, implementing a enterprise mobility app with open framework adhering with the go live dates.

      SAP products are more easy to handle. A lot of featues comes inbuilt. Mobile apps comes as pre-packaged apps. One needs to customize it according to it needs. Product support from SAP is remarkable. Implementing and going live with such product becomes automatically easy adhering to the timelines. So is the maintenance. But of course comes the licensing price for SAP.

      Cheers!

      Author's profile photo Virinchy Panangipalli
      Virinchy Panangipalli
      Blog Post Author

      Sukanta Rudra,

       

      I would suggest to raise the same as a new discussion which might also help as a reference point later.Feel free to update the discussion link here.

       

      Regards

      Virinchy

      Author's profile photo Virinchy Panangipalli
      Virinchy Panangipalli
      Blog Post Author

      The above discussion is at Selection of a mobile framework - for enterprise mobility app.

       

      Regards

      Virinchy

      Author's profile photo Former Member
      Former Member

      Nice blog Virinchi. Thanks for sharing.

      Regards,

      Sujay

      Author's profile photo Former Member
      Former Member

      If anybody is interested in learning more about Apache Cordova, I've written several books on the topic: Apache Cordova API Cookbook is my latest at www.cordovacookbook.com and Apache Cordova 3 Programming came out last year at www.cordovaprogramming.com).

      I've written several blog posts about Kapsel, you can read more about it here: An Introduction to SMP Kapsel

      Author's profile photo Former Member
      Former Member

      Hi Virinchy,

        Good post, thank you very much.

        One question though: I think there is a bit of contradiction in the answer above, about "difference between Apache Cordova and Adobe PhoneGap". It states that they are the same, but then compares Cordova & PhoneGap to WebKit & Chrome Browser.

        Can we re-phrase this and say, that Adobe contributed PhoneGap source code to Apache community and Apache Cordova is an open source solution, which is now driven by Apache project, while PhoneGap from Adobe is based on Apache Cordova developments (and thus underlying technology is the same), but on top of that it may contain some additional Add-Ons from Adobe, which may not fully comply with the open license agreement.

      Best regards,

      Laziz

      Author's profile photo Former Member
      Former Member

      PhoneGap is simply Adobe's distribution of Apache Cordova. It is the out of the box Apache Cordova with some additional CLI commands added (and the CLI command renamed from cordova to phonegap) - pretty much nothing else is different.

      Author's profile photo Former Member
      Former Member

      Plus, I believe (with PhoneGap Build), you can also build apps remotely in PhoneGap, e.g. using your Git. In Cordova, you can do it only locally.

      Author's profile photo Virinchy Panangipalli
      Virinchy Panangipalli
      Blog Post Author

      Yes. And also earlier, to build a release apk for android , its supposed to be with build service in Phonegap and in Cordova , its just a simple command cordova build android --release.

      Almost everything is same with just a change in names , and in a much simpler way to use .

      Regards

      Virinchy

      Author's profile photo Former Member
      Former Member

      yes, PhoneGap Build is an add-on service that provides cloud cloud build to PhoneGap applications.

      Author's profile photo Trond Stroemme
      Trond Stroemme

      What is the architectural difference between developing a mobile app using a tool like RDE, and using SMP/Kapsel/Cordova? Can I not develop and deploy a UI5 app developed using RDE - or Eclipse - without Cordova and SMP? What would be the pros and cons of the two scenarios?

      I understand that Cordova/Phonegap allows for cross-platform support, working with almost any mobile OS, but I fail to see clearly exactly why I would need SMP/Kapsel in the mix, if all I want is just to deploy a UI5 app on a mobile platform.

      Author's profile photo Virinchy Panangipalli
      Virinchy Panangipalli
      Blog Post Author

      Kapsel Plugins are available from SMP 3.0 . and these are set of Custom plugins developed by SAP using cordova technology to integrate enterprise grade features like Logon , encryption, App update, Push to the hybrid applications .Developing and adding these features and maintaining the lifecycle of app without kapsel would be challenging for a developer.

      RDE tool quickens the development process for web apps / fiori apps. Currently RDE does nt integrate with SMP and use kapsel plugins ,  but the plan of integration is in road map.Also device specific features like Camera, Contacts, GPS ...cannot be used with the apps developed using RDE . These features are achieved using Cordova for hybrid apps.

      Kapsel is more than just packaging and deploying the application to the device.It adds very unique features to the application which can be only achieved with SMP.

      Author's profile photo billy shen
      billy shen

      Hi Virinchy,

          RDE tool ,now called Web IDE, seems integrate with SMP and kapsel plugins. however after i searched lots of blog, i still can't find the way to generate the APK and IPA file for my customer to download. i deployed my kapsel mobile app to SMP server, then what should i do next, because i can only install the app in my iphone using the Web IDE , Run->Run on-> iOS Device. but how can i send the app to other guys?

        if i use cordova local ,then i can open xcode, to archive the app using an Enterprise Develop Account. now by using Web IDE ,how should i do to archive it?

      thanks,

      Billy

      Author's profile photo Former Member
      Former Member

      Good blog to know about Cordova and its details.

      Author's profile photo Kishore Gokara
      Kishore Gokara

      Nice blog.

      Author's profile photo Former Member
      Former Member

      Hi Virinchy,

      I have a question about the wrapper app generated using Cordova Api for Fiori Launchpad URL (login page). We see that the app works fine on an iOS device but it is not saving the login credentials entered by user.

      When we access the Fiori launchpad URL directly on a desktop browser or on Safari / Chrome browser, it saves the credentials (it prompts whether I would like to save it). But thats not happening in the case of wrapper app. Any ideas?

      I also downloaded the Fiori app from iOS app store and got the same behavior. Users needs to enter the password every time they access the app,

      Is there a solution available?

      Thanks,

      Bobby

      Author's profile photo Michael Appleby
      Michael Appleby

      Unless you are asking for clarification/correction of some part of the Document, please create a new Discussion marked as a Question.  The Comments section of a Blog (or Document) is not the right vehicle for asking questions as the results are not easily searchable.  Once your issue is solved, a Discussion with the solution (and marked with Correct Answer) makes the results visible to others experiencing a similar problem.  If a blog or document is related, put in a link.  Read the Getting Started documents (link at the top right) including the Rules of Engagement. 

      NOTE: Getting the link is easy enough for both the author and Blog.  Simply MouseOver the item, Right Click, and select Copy Shortcut.  Paste it into your Discussion.  You can also click on the url after pasting.  Click on the A to expand the options and select T (on the right) to Auto-Title the url.

      Thanks, Mike (Moderator)

      SAP Technology RIG

      Author's profile photo Former Member
      Former Member

      Thanks Mike. I will create a new discussion .