MyPage is a personalized page based on your interests.The page is customized to help you to find content that matters you the most.


I'm not curious

Apache Cordova Tutorial: Developing Mobile Applications with Cordova

Published on 01 March 18
503
0
0

Mobile applications are creeping in everywhere, starting with smartphones and tablets, to smart watches, and soon be found in other wearables, too. However, developing for each separate mobile platform can be an exhaustive task, especially if your resources are limited, or if you are a single developer. This is where becoming a well-versed Apache Cordova developer can come in handy by providing a way to develop mobile applications using standard web technologies - HTML5, CSS3 and JavaScript.

Apache Cordova Tutorial: Developing Mobile Applications with Cordova - Image 1

In 2009, a startup called Nitobi created PhoneGap, an open source API for accessing native mobile resources, with the goal of enabling developers to create mobile applications using standard web technologies. In Nitobi’s vision, most mobile applications would soon be developed using PhoneGap, but developers would still have the option of writing native code when necessary, be it due to performance issues, or lack of a method of accessing specific hardware.

Adobe acquired Nitobi in 2011. However, the open source core was donated to the Apache Software Foundation and rebranded under the name Cordova. A common analogy you will often run into is that Cordova is to PhoneGap what WebKit is to Chrome or Safari. Obviously, the differences between Cordova and PhoneGap were minimal in the beginning. With time, Adobe PhoneGap developed its own set of proprietary features, while Cordova was (and still is) supported by the open source community. This Apache Cordova review and tutorial will examine Cordova app development in more detail.
Apache Cordova Capabilities

In essence, Cordova has no limitations in relation to natively developed applications. What you get with Cordova is simply a JavaScript API, which serves as a wrapper for native code and is consistent across devices. You can consider Cordova to be an application container with a web view, which covers the entire screen of the device. The web view used by Cordova is the same web view used by the native operating system. On iOS, this is the Objective-C UIWebView class; on Android, this is android.webkit.WebView.

Apache Cordova comes with a set of pre-developed plugins which provide access to the device’s camera, GPS, file system etc. As mobile devices evolve, adding support for additional hardware is simply a matter of developing new plugins.

Finally, Cordova applications install just like native applications. This means that building your code for iOS will produce an IPA file, for Android an APK file, and building for Windows Phone produces an XAP file. If you put enough effort into the development process, your users might not even realize that they are not using a native application.

Apache Cordova Tutorial: Developing Mobile Applications with Cordova - Image 2

Apache Cordova Development Workflows

There are two basic paths you can follow when developing with Cordova:

When your intention is to deploy an application to as many platforms as possible, with little or no platform-specific development, you should use the cross-platform workflow. The main tool supporting this workflow is the Cordova Command-Line Interface (CLI), which serves as a higher level abstraction for configuring and building your application for different platforms. This is the more commonly used development path.

If you plan to develop your application with a specific platform in mind, you should use the platform-centered workflow. This way, you will be able to tweak and modify your code at a lower level by mixing native components with Cordova components. Even though you could use this approach for cross-platform development, the process will be longer and more tedious.

It is usually recommended to start with the cross-platform development workflow since switching to platform-centered development is fairly straightforward. However, if you initially start with the platform-centered workflow, you will not be able to switch to cross-platform development since the CLI will overwrite your customizations once you run the build process.
Prerequisites and Cordova Installation

Before installing and running anything related to Cordova, you will need to install the SDK for each platform that you intend to build your application for. We will focus on the Android platform in this article, however the process involving other platforms is similar.

You should download the Android SDK found here. For Windows, the SDK comes as an installer, while for Linux and OSX it comes as an archive which can be simply extracted. After extracting/installing the package, you will need to add the sdk/tools and sdk/platform-tools directories to your PATH variable. The PATH variable is used by Cordova to look for the binaries it needs for the build process. If you don’t have Java installed, you should go ahead and install JDK together with Ant. ANT_HOME and JAVA_HOME should be set to the bin folders of JDK and Ant, and after installing the Android SDK, set the ANDROID_HOME variable to Android/Sdk. All locations in the three *_HOME variables should also be in your PATH variable.

Cordova CLI depends on Node.js and Git client, so go ahead and download and install Node from nodejs.org, and Git from git-scm.com. You will be using npm to install Cordova CLI itself as well as for installing additional plugins, and Cordova will use git behind the scenes in order to download required dependencies. Finally, run

sudo npm install -g cordova 

to install the Cordova CLI globally. On the Windows platform you can omit the sudo command. To summarize, these are the packages that you will need: Java, Ant, Android SDK, NodeJS, Git

And these environment variables will need to be updated:PATH, JAVA_HOME, ANT_HOME, ANDROID_HOME

To see the full tutorial check it here

Conclusion
We went through the basic steps of Apache Cordova app development and used our own JavaScript architecture and CSS stylesheet. This Cordova tutorial was an attempt to show the potential of Apache Cordova as a means of developing mobile applications using familiar technologies, reducing both development time and the effort required to build multiple applications for different platforms. However, when building applications which will go into production, it is recommended that you use an existing framework, which in addition to structuring your application in a predefined architecture, might also provide you a set of components which will help your application come closer to the native look and feel. Some of such frameworks worth noting are Onsen UI, Ionic, Framework7, Sencha Touch and Kendo UI.

This article is written by Filip Petkovski and is originally posted at Toptal


Mobile applications are creeping in everywhere, starting with smartphones and tablets, to smart watches, and soon be found in other wearables, too. However, developing for each separate mobile platform can be an exhaustive task, especially if your resources are limited, or if you are a single developer. This is where becoming a well-versed Apache Cordova developer can come in handy by providing a way to develop mobile applications using standard web technologies - HTML5, CSS3 and JavaScript.

Apache Cordova Tutorial: Developing Mobile Applications with Cordova - Image 1

In 2009, a startup called Nitobi created PhoneGap, an open source API for accessing native mobile resources, with the goal of enabling developers to create mobile applications using standard web technologies. In Nitobi’s vision, most mobile applications would soon be developed using PhoneGap, but developers would still have the option of writing native code when necessary, be it due to performance issues, or lack of a method of accessing specific hardware.

Adobe acquired Nitobi in 2011. However, the open source core was donated to the Apache Software Foundation and rebranded under the name Cordova. A common analogy you will often run into is that Cordova is to PhoneGap what WebKit is to Chrome or Safari. Obviously, the differences between Cordova and PhoneGap were minimal in the beginning. With time, Adobe PhoneGap developed its own set of proprietary features, while Cordova was (and still is) supported by the open source community. This Apache Cordova review and tutorial will examine Cordova app development in more detail.

Apache Cordova Capabilities

In essence, Cordova has no limitations in relation to natively developed applications. What you get with Cordova is simply a JavaScript API, which serves as a wrapper for native code and is consistent across devices. You can consider Cordova to be an application container with a web view, which covers the entire screen of the device. The web view used by Cordova is the same web view used by the native operating system. On iOS, this is the Objective-C UIWebView class; on Android, this is android.webkit.WebView.

Apache Cordova comes with a set of pre-developed plugins which provide access to the device’s camera, GPS, file system etc. As mobile devices evolve, adding support for additional hardware is simply a matter of developing new plugins.

Finally, Cordova applications install just like native applications. This means that building your code for iOS will produce an IPA file, for Android an APK file, and building for Windows Phone produces an XAP file. If you put enough effort into the development process, your users might not even realize that they are not using a native application.

Apache Cordova Tutorial: Developing Mobile Applications with Cordova - Image 2

Apache Cordova Development Workflows

There are two basic paths you can follow when developing with Cordova:

When your intention is to deploy an application to as many platforms as possible, with little or no platform-specific development, you should use the cross-platform workflow. The main tool supporting this workflow is the Cordova Command-Line Interface (CLI), which serves as a higher level abstraction for configuring and building your application for different platforms. This is the more commonly used development path.

If you plan to develop your application with a specific platform in mind, you should use the platform-centered workflow. This way, you will be able to tweak and modify your code at a lower level by mixing native components with Cordova components. Even though you could use this approach for cross-platform development, the process will be longer and more tedious.

It is usually recommended to start with the cross-platform development workflow since switching to platform-centered development is fairly straightforward. However, if you initially start with the platform-centered workflow, you will not be able to switch to cross-platform development since the CLI will overwrite your customizations once you run the build process.

Prerequisites and Cordova Installation

Before installing and running anything related to Cordova, you will need to install the SDK for each platform that you intend to build your application for. We will focus on the Android platform in this article, however the process involving other platforms is similar.

You should download the Android SDK found here. For Windows, the SDK comes as an installer, while for Linux and OSX it comes as an archive which can be simply extracted. After extracting/installing the package, you will need to add the sdk/tools and sdk/platform-tools directories to your PATH variable. The PATH variable is used by Cordova to look for the binaries it needs for the build process. If you don’t have Java installed, you should go ahead and install JDK together with Ant. ANT_HOME and JAVA_HOME should be set to the bin folders of JDK and Ant, and after installing the Android SDK, set the ANDROID_HOME variable to Android/Sdk. All locations in the three *_HOME variables should also be in your PATH variable.

Cordova CLI depends on Node.js and Git client, so go ahead and download and install Node from nodejs.org, and Git from git-scm.com. You will be using npm to install Cordova CLI itself as well as for installing additional plugins, and Cordova will use git behind the scenes in order to download required dependencies. Finally, run

sudo npm install -g cordova to install the Cordova CLI globally. On the Windows platform you can omit the sudo command. To summarize, these are the packages that you will need: Java, Ant, Android SDK, NodeJS, Git

And these environment variables will need to be updated:PATH, JAVA_HOME, ANT_HOME, ANDROID_HOME

To see the full tutorial check it here



Conclusion

We went through the basic steps of Apache Cordova app development and used our own JavaScript architecture and CSS stylesheet. This Cordova tutorial was an attempt to show the potential of Apache Cordova as a means of developing mobile applications using familiar technologies, reducing both development time and the effort required to build multiple applications for different platforms. However, when building applications which will go into production, it is recommended that you use an existing framework, which in addition to structuring your application in a predefined architecture, might also provide you a set of components which will help your application come closer to the native look and feel. Some of such frameworks worth noting are Onsen UI, Ionic, Framework7, Sencha Touch and Kendo UI.

This article is written by Filip Petkovski and is originally posted at Toptal

This blog is listed under Open Source , Development & Implementations and Mobility Community

Related Posts:
Post a Comment

Please notify me the replies via email.

Important:
  • We hope the conversations that take place on MyTechLogy.com will be constructive and thought-provoking.
  • To ensure the quality of the discussion, our moderators may review/edit the comments for clarity and relevance.
  • Comments that are promotional, mean-spirited, or off-topic may be deleted per the moderators' judgment.
You may also be interested in
Awards & Accolades for MyTechLogy
Winner of
REDHERRING
Top 100 Asia
Finalist at SiTF Awards 2014 under the category Best Social & Community Product
Finalist at HR Vendor of the Year 2015 Awards under the category Best Learning Management System
Finalist at HR Vendor of the Year 2015 Awards under the category Best Talent Management Software
Hidden Image Url

Back to Top