Posted on

Solution | deprecated bodyParser: use individual json/urlencoded middlewares

Error:
body-parser deprecated bodyParser: use individual json/urlencoded middlewares node_modulesexpresslibrouterlayer.js:95:5
This error shows up while compiling an App using app.use(bodyParser.json());

Cause: Express v4+ has deprecated bodyParser() middleware. https://github.com/expressjs/body-parser/commit/b7420f8dc5c8b17a277c9e50d72bbaf3086a3900

Solution: You now need to call the methods separately: app.use(bodyParser.json());
Posted on

How to use ES6 in Node using Babel

Install Babel CLI

npm install --save-dev babel-cli

Add Presets

$ npm install --save-dev babel-preset-es2015 babel-preset-stage-2

Add .babelrc

{
    "presets": ["es2015", "stage-2"]
}

Add ES6 code to index.js

Add start script in pakage.json

"start": "babel-node index.js"

Start server

npm start

Posted on

How to add font-awesome to Angular 2 CLI project

Follow the below steps for adding Font Awesome to an Angular-2 app created using Angular CLI

  1. Goto the project directory and open Command in Windows / terminal in Mac
  2. npm install font-awesome --save //in Windows
    sudo npm install font-awesome --save //in Mac
  3. In project root folder, find and open the file ‘angular-cli.json’ in any editor 
  4. Locate the styles[] array and add font-awesome references directory. like: 
    "apps": [
              {
                ....
                "styles": [
                  "../node_modules/font-awesome/css/font-awesome.css"
                  "styles.css"
                ],
                ...
             }
           ]
  5. Add some font-awesome icons in any component html file. 
  6. Rerun the server by command 
    ng serve

    as ‘angular-cli.json’ is not observed for changes.

  7. Awesome Icons will be visible now
Posted on

How to add and use bootstrap and ng-bootstrap in Angular 2 CLI project

Follow the below steps for adding Bootstrap and ng-bootstrap (Bootstrap components, powered by Angular) to an Angular-2 app created using Angular CLI


Add Bootstrap

  1. Goto the project directory and open Command in Windows / terminal in Mac
  2. npm install bootstrap@4.0.0-alpha.6 --save //in Windows
    sudo npm install bootstrap@4.0.0-alpha.6 --save //in Mac
  3. In project root folder, find and open the file ‘angular-cli.json’ in any editor 
  4. Locate the styles[] array and add font-awesome references directory. like: 
    "apps": [
              {
                ....
                "styles": [
                  "../node_modules/bootstrap/dist/css/bootstrap.min.css",
                  "styles.css"
                ],
                ...
             }
           ]
  5. Use bootstrap snippet in any html file
  6. Run the server by command 
    ng serve

Add ng-botstrap (Bootstrap components, powered by Angular)

  1. Goto the project directory and open Command in Windows / terminal in Mac
  2. npm install --save @ng-bootstrap/ng-bootstrap //in Windows
    sudo npm install --save @ng-bootstrap/ng-bootstrap //in Mac
  3. Open src/app/app.module.ts
  4. Import ng-bootstrap main module 
    import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
  5. Add the imported module in imports array 
    @NgModule({
       imports: [NgbModule.forRoot(),...]
    })
  6. Open src/app/app.component.html and use the alert component 


        Warning! Better check yourself, you're not looking too good.

  7. Run the server by command 
    ng serve
  8. Bootstrap themed alert will be visible now
Posted on

Enhance website performance by resource prefetching

Resource Prefetching is a type of performance enhancing technique, this is implemented by using resource hints. Resource hints is a way to tell the browser about a resource that might be needed in future requests.


Resource hints are declared as HTML Link Element (<link>) :

dns-prefetch

<link rel=”dns-prefetch” href=”//example.com”>

Tells browser to initiate an early connection (DNS lookup) with the host which might be needed in future requests, this eliminates the time taken by browser in resolving the domain for the future requests.

Browser support

preconnect

<link rel=”preconnect” href=”//example.com”>
<link rel=”preconnect” href=”//cdn.example.com” crossorigin>

Tells browser to initiate an early connection with the host, which includes the DNS lookup, TCP handshake, and optional TLS negotiation, this prepares browser in advance and can deliver the assets from that host faster, masking the high latency costs of establishing a connection.

Browser support


prefetch

<link rel=”prefetch” href=”//example.com/next-page.html” as=”html” crossorigin=”use-credentials”>
<link rel=”prefetch” href=”/library.js” as=”script”>

Tells browser to fetch a resource that might be required by the next navigation (browser will not execute any prefetched file) so that it can be delivered faster when needed.

Browser support

prerender

<link rel=”prerender” href=”//example.com/next-page.html”>

Tells browser to fetch and execute a resource that might be required by the next navigation so that it can be delivered faster when needed.

Browser support

Reference: https://www.w3.org/TR/resource-hints/

Posted on

What are Immediately-Invoked Function Expression ?

IIFE for short, This is the self-invoking anonymous function. It executes immediately after it’s created.


Defining IIFE
Syntax : (function(){…})()

The first pair of parentheses (function(){…})() turns the code within into an expression,
and the second pair of parentheses (function(){…})() calls the function that results from that evaluated expression.

This pattern is often used when trying to avoid polluting the global namespace,
because all the variables used inside the IIFE are not visible outside its scope.

Passing parameter to IIFE
Syntax : (function(obj){…})(object);

Here the  (function(obj){…})(object) is passed as a parameter and will be accessible within the function as (function(obj){…})(object).

Posted on

Facebook integration in PhoneGap Android App

There are lots of plugin available for integrating Facebook in PhoneGap, however it is not a simple process, a successful integration needs many configurations to be done in the app as a first step.

This article will help in implementing the configurations needed to integrate Facebook in PhoneGap Android App.

If you have already created the PhoneGap app then skip Step1.

  1. Create a PhoneGap Android App.
  2. Create an App in Facebook.
  3. Generate a key hash for Facebook integration with android.
  4. Add generated key hash to Facebook App.
  5. Download a zip file of PhoneGap Facebook Connect plugin and extract.
  6. Browse to the project folder in command prompt and run
    cordova -d plugin add <path to the extracted PhoneGap Facebook Connect folder> –variable APP_ID=”<Facebook App ID >” –variable APP_NAME=”<Facebook App Name>”
  7. Now we can use available API commands in our code like FB Login, FB Logout, FB Get Status, FB Show Dialog, FB Graph API etc
Video tutorial coming soon, subscribe us on YOUTUBE
Posted on

Generate a key hash for Facebook integration with android using openssl

Facebook uses the key hash to authenticate interactions between your app and the Facebook app. If you run apps that use Facebook Login, you need to add your Android development key hash to your Facebook developer profile.

This article share the process of generating a key hash for Facebook integration with android using openssl

  1. Download openssl from Google code (If you have a 64 bit machine you must download openssl-0.9.8e X64 not the latest version)
  2. Extract it. create a folder- OpenSSL in C:/ and copy the extracted code here.
  3. Detect debug.keystore file path. If u didn’t find, then do a search in C:/ and use the Path in the command in next step.
  4. Find the keytool path which is in Jre directory. (C:Program FilesJavajre7bin)
  5. Detect your keytool.exe path and go to that dir/ in command prompt and run this command in 1 line

    keytool -exportcert -alias androiddebugkey -keystore “C:Documents and SettingsAdministrator.androiddebug.keystore” – “C:OpenSSLbinopenssl” sha1 -binary |”C:OpenSSLbinopenssl” base64

* it will ask for password, put android
* that’s all. u will get a key-hash
Video tutorial coming soon, subscribe us on YOUTUBE
Posted on

Capturing network traffic between the Internet and mobile devices

Some times we need to inspect HTTP calls between the internet and the mobile devices for testing a website or app, this article will explain how to capture network traffic between the Internet and mobile devices.

– Connect the Desktop and mobile device to the same network.

– Follow below configurations for Desktop and mobile device.


On Desktop :

  1. Download : http://www.telerik.com/download/fiddler  [The free web debugging proxy for any browser, system or platform]
  2. Navigate to Tools in menu & select Fiddler Options
  3. Check the option “Allow remote computers to connect” in Connections tab
  4. Check Capture and Decrypt for HTTPS calls in HTTPS tab
  5. Open command prompt and run command “ipconfig”, note down the IP address of the machine.
On Mobile : 
  1. Goto Settings
  2. Select Wi-Fi
  3. Edit the connected network
  4. Change Proxy option to manual
  5. On Hostname field write the IP address of the Desktop Machine
  6. On Port write 8888
  7. Save the connected Network by pressing OK button
  8. Open browser and visit “http://ipv4.fiddler:8888/“
  9. Download Fiddler Root Certificate
  10. Install the certificate
Now all network traffic taking place between device and internet will be shown in the Fiddler tool and you can inspect the calls easily.
Video tutorial coming soon, subscribe us on YOUTUBE
Posted on

Creating your first Android App using PhoneGap Command Line Interface.

So now you have installed PhoneGap/Cordova and Android development tools in your windows machine as explained here , now you can proceed with Android App development by reading this article :

All the steps below will use CLI commands available with PhoneGap/cordova, you can read about using CLI commands here.

  1. Create a PhoneGap Project
    Command : phonegap create project_folder app_id app_name
    eg : phonegap create my_first_app My first App
  2. Add Android Platform
    Command : phonegap platform add platform_name
    eg. : phonegap platform add android
  3. Build the Android App with default files
    Command : phonegap build platform_name
    eg. : phonegap build android
  4. Emulate the Android App
    Command : phonegap emulate platform_name
    eg. : phonegap emulate android
While following this process if you get stuck due to some errors, check this article
Posted on

Most common PhoneGap/Cordova errors (With solutions)


Are you trying to setup or run PhoneGap/Cordova and errors are making you crazy?
Here is the list of most common errors faced while working with PhoneGap/Cordova with possible working solutions.



1- Cordova Install Error- Please Install Android Target 19
Command : $ cordova platform add android
Error: Please install Android target 19 (the Android newest SDK). Make sure you have the latest Android tools installed as well. Run “android” from your command-line to install/update any missing SDKs or tools.
Solution : run the command android
Select Android 4.4.2 (API19) and install.

2- Error: ENOENT, stat ‘C:Users{App Name}AppDataRoamingnpm
Command : npm install – cordova
Solution : Try to RUN the command after opening CDM with administrator rights, if still error comes then
Browse to the Roaming folder and create a “npm” folder.

3- Error : No emulator images (avds) found
Command : cordova emulate android
Solution : android create avd -n <name> -t <targetID>
where
<name> :  You can use any name you want for the AVD, but since you are likely to be creating multiple AVDs, you should choose a name that lets you recognize the general characteristics offered by the AVD.
<targetID> :  An integer assigned by the android tool. Use android list targets command to list the target ID of each system image.

4- Error: This platform has more than one ABI. Please specify one using –abi.
Command : android create avd -n <name> -t <targetID>
Solution : android create avd -n <name> -t <targetID> -b<abi>
where
<name> :  You can use any name you want for the AVD, but since you are likely to be creating multiple AVDs, you should choose a name that lets you recognize the general characteristics offered by the AVD.
<targetID> :  An integer assigned by the android tool. Use android list targets command to list the target ID of each system image.
<abi> : It is application binary interface and we can get it using android list targets command inside every target as Tag/ABIs

id: 3 or “android-21”
     Name: Android 5.0
     Type: Platform
     API level: 21
     Revision: 1
     Skins: HVGA, QVGA, WQVGA400, WQVGA432, WSVGA, WVGA800 (default), WVGA854, WXGA720, WXGA800, WXGA800-7in
     Tag/ABIs : android-tv/armeabi-v7a, android-tv/x86, default/armeabi-v7a, default/x86, default/x86_64

Note : Use default/armeabi-v7a for android mobile emulator

5- Error: ‘npm’ is not recognized as internal or external command, operable program or batch file
Solution : Find path to the nodejs folder in the C drive usually it is “C:Program Filesnodejs” and add it to system variable “PATH”. Now restart the command prompt.
OR you can also use node node.js command prompt which can be found under the node.js folder in start menu.

6- ‘phonegap’/’cordova’ is not recognized as an internal or external command
Solution : Install phonegap or cordova using command line interface or folloe this article to install phonegap or cordova.

Keep visiting for more…
Last Updated on : 12/06/2015
Posted on

JavaScript, jQuery interview questions & answers

Posted on

Creating a jQuery popup with an overlay

Create a basic popup and overlay with minimal styling and without any additional settings using jQuery/HTML and CSS.


Creating Overlay using HTML and CSS : 
Overlay is a container with some translucent background color which cover the whole page and user is unable to click on any functional part of the site below it.

HTML

<div id="overlay"></div>

CSS

#overlay {
 display:none; /*hidden on pageload*/
 position:fixed; /*this will disable it from scrolling*/
 width:100%; /*this will give the full width*/
 height:100%; /*this will give the full height*/
 z-index:999; /*this will keep it above all elements in the page*/
 left:0; /*this will align it to the left*/
 top:0; /*this will align it to the top*/
 background:#000; /*this will give it a black background*/
}

Creating Popup using HTML and CSS : 

HMTL

<div class="popup" id="popup1">
<a href="#" class="close">X</a>
<p>
this is a demo popup
</p>
</div>

CSS

.popup {
 display:none; /*hidden on pageload*/
 width:200px; /*width of popup*/
 height:200px;  /*height of popup*/
 padding:10px; /*padding for popup*/
 background:#fff; /*background of popup*/
 border:1px solid #000; /*border of popup*/
 position:absolute; /*this will keep it relative to the body*/
 z-index:9999; /*this will keep it above the overlay*/
 top:50%; /*keep popup in center*/
 left:50%; /*keep popup in center*/
 margin-left:-110px; /*keep popup in center (it is the - total width / 2)*/
 margin-top:-110px; /*keep popup in center (it is the - total height / 2)*/
}
.popup .close { /* close link*/
 float:right;
 color:#000;
 text-decoration:none;/*remove underline from the close link*/
}
.popup p { /*popup text*/
 padding:10px 0;
}

Creating button to trigger the popup with overlay :

<a href="#" class="displayPopup">Display Popup</a>

Creating Functionality using jQuery: 

$(function() { //document ready
    $(".displayPopup").on("click", function() { //click event of the button
        $("#overlay").fadeTo(100, .3); //this will show the overlay awith a crossbrowser transparency
        $("#popup1").show(); // show popup1
        return false; //disable event propogation (avoid addition of "#" to url)
    })

    $(".popup .close").on("click", function() { //click event of the close button in popup
        $("#overlay").hide(); //hide overlay
        $(".popup").hide(); //hide popup
        return false; //disable event propogation (avoid addition of "#" to url)
    })
})

Download code files

Posted on

Using PhoneGap CLI commands

PhoneGap V3.0 and later includes a CLI (Command Line Interface) that provides a suite of commands a developer can use to manage the complete lifecycle of an application.
This article explains the CLI commands and their usage.


To use CLI commands, you need to install PhoneGap first and then SDKs for each platform you wish to target.
To install PhoneGap visit : https://markupjavascript.com/?p=23
To know about Tools required to develop PhoneGap/Cordova App visit : https://markupjavascript.com/?p=30
For platform guides visit : http://docs.phonegap.com/en/3.5.0/guide_platforms_index.md.html#Platform%20Guides

On windows, CLI can be accessed from command prompt and in Mac, from terminal.

CLI Commands and their usage :

Creating a PhoneGap Project
– Open Command Prompt with Admin rights
– Go to the directory where you want to create the project and run command :
phonegap create project_folder app_id app_name

for eg : phonegap create hello com.example.hello HelloWorld
“hello” specifies a directory to be generated for your project.
“com.example.hello” (optional and can be changed later in config.xml) provides your project with a reverse domain-style identifier.
“HelloWorld” (optional and can be changed later in config.xml) provides the application’s display title


Platform Management

Adding Platforms
– Go to the project’s directory and run command :
phonegap platform add platform_name

for eg. to add android platform : phonegap platform add android
This command will download the folder structure and required files to your project directory for the added platform.
You can now open the files in any IDE for editing.

Removing Platforms
cordova platform remove platform_name
This command will download the folder structure and required files to your project directory

Note : If you get an error : “error ‘platform add android’ is not a phonegap.js command “ then directly try build command given below for that specific platform ie. phonegap build platform_name

Plugin Management

Search Plugin
cordova plugin search <search term>

Add Plugin
cordova plugin add <plugin>

List all Plugins installed
cordova plugin ls
cordova plugin list

Remove Plugin
cordova plugin rm <plugin>
cordova plugin remove <plugin> 

Build Management

Build
– Go to the project’s directory and run command :
phonegap build
This will build the project for all the added platforms.

To build a specific platform use
phonegap build platform_name
for eg. to build android platform : phonegap build android
The phonegap build command is a shorthand for the prepare and compile commands

Prepare
The CLI prepare command copies a PhoneGap project’s web application content from the www and merges folders into the appropriate platforms folders for the project.

Compile
The compile command initiates a compilation process by calling the build script for one or more mobile platforms.

Running Applications
The CLI has built-in integration with mobile device platform simulators, so you can launch PhoneGap applications directly onto simulators or physical devices.

Emulate
– Go to the project’s directory and run command :
phonegap emulate platform_name

for eg. to emulate android platform : phonegap emulate android
The CLI emulate command automates the process of building an application and deploying it onto a mobile device simulator. The command first prepares the application, executes the build process, then deploys the resulting native application package to the simulator.

Run
– Plug the handset into your computer
– Go to the project’s directory and run command :
phonegap emulate platform_name

The CLI run command automates the process of building an application and deploying it onto a physical device. The command first prepares the application, executes the build process, then deploys the resulting native application package to a connected device.

To know more about Cordova/PhoneGap CLI (Command Line Interface) after V3.0 visit : https://markupjavascript.com/?p=25
To know more differences about Cordova/PhoneGap before and after v3.0 visit : https://markupjavascript.com/?p=26

It is recommended that you review the Platform Guides for the mobile platforms that you will be developing for.

Posted on

Installing Windows Phone 8.1 emulator in Visual Studio 2013

After installing Windows 8.1 and Visual Studios 2013 Express update 2, I was unable to install Windows Phone 8.1 emulator. After running the exe file an error comes “This computer does not support the windows phone emulator, which requires 64-bit edition of Windows 8.1 Pro and a computer that supports Hyper-V”. After a good search over the internet I found that if you want to run your Windows Phone 8.1 App in an emulator, there are requirements to be met before you can use the emulator. Here are the findings and time savers :

Requirements for running Windows Phone 8.1 emulators :
– x64-based versions of Windows 8.1 Professional or above edition.
– Microsoft Hyper-V [Bundled with Professional or above edition of the Windows 8.1 OS]

Hyper-V Installation Prerequisites
– An x64-based processor which supports Second Level Address Translation (SLAT) ie. Hardware-assisted virtualization and Extended pages tables.

Check if Your CPU supports Second Level Address Translation (SLAT).

– Download CoreInfo, extract it in the root of your C: drive.
– Open Command prompt with administrator rights.
– Run “coreinfo.exe -v”
– “*” after VMX and EPT colum confirms the support, VMX is for Hardware-assisted virtualization and EPT is for Extended pages tables.

Enable Hyper-V in Windows 8.1
– Goto Control Panel
– Select “Get Programs” under “Programs” category
– Select “Turn Windows feature on or off”
– Select “Hyper-V” and all its features.
– Select “OK” to install.

Install Windows Phone 8.1 Emulator

Posted on

Installing multiple versions of browser on one machine

Installing multiple versions of browser on one machine


Cross-browser testing of web pages is a biggest pain in the career of a User Interface developer. It is a necessary step that usually involves the use of multiple computers. This article share a method to do Cross-browser testing by installing multiple version of same browser on one machine.


IE 6 (the real pain ;-)): 
Download and install Virtual Box 
Download the IE6 XP image for VirtualBox from the modern.IE website. 
Import the XP image file to VirtualBox.

modern.IE – Cross-Browser IE Testing Tools Suite 
Microsoft recently started providing a free service called modern.IE.
modern.IE is an undertaking my Microsoft to make cross-browser testing for the Internet Explorer browsers easier. Microsoft has created modern.IE to provide developers and designers with a suite of tools to facilitate IE browser testing.
IE offers is a virtualization image of each browser from IE 6 to IE 10, which can be run on virtualization software like VirtualBox, Virtual PC, Hyper-V or VMWare Player on Windows, Mac or Linux.
Additionally, modern.IE also provides a tool which scans your web page for common coding problems and lists them out for you to correct so that they display correctly in all IE versions.

FireFox:
Utilu Mozilla Firefox Collection.
Firebug, the Web Developer toolbar and Flash are also included.

Opera:
All installers are available on Opera. 
Multiple versions can be installed side-by-side without any problems. 
During the installation, choose “Custom”, and a different directory.
On installation, also choose to use the same profile for all users.
Important preference: Settings > Preferences > Advanced > Security > Do not check for updates.

Chrome:
Stand-alone installers can be downloaded from File Hippo.
It is also possible to run multiple Chrome versions side-by-side.

Safari:
Support on Windows has been discontinued. The last supported Safari version on Windows is 5.1.7; you need a Mac or an OS X VM to test your sites in newer Safari versions.
Download other versions from Oldapps. 

Other free online services:
http://browsershots.org
http://netrenderer.com
https://www.modern.ie/en-us/screenshots

Posted on

Installing PhoneGap in Windows

Installing PhoneGap in Windows

Do you want to migrate from PhoneGap V2.9 or below to V3.0 or above? or Do you want to try the latest PhoneGap 3.5 Command Line tools or Do you just want to start learning PhoneGap?. This article will help you to do it by completing the first step towards PhoneGap V3.X, which is installing PhoneGap on Windows Machine as the process includes installation of many required libraries which are not mentioned in the PhoneGap Website.

Follow these steps to Install PhoneGap in Windows
  1. Install Node
  2. Install JDK (JDK V7 for Win7, and JDK V8 for Win8)
  3. Install Git 
  4. Install Ant 
  5. Setup Environment Variables :
    New system variable “JAVA_HOME” to <path to Java sdk folder>
    New system variable “ANT_HOME” to <path to ant folder>
    Add to existing system variable “path” : %JAVA_HOME%bin;%ANT_HOME%bin
  6. Install PhoneGap from Command prompt:
    npm install -g phonegap
    If you get any error starting with “npm ERR! Error: ENOENT“, open cmd prompt with administrator rights.

For Android Development:

  1. Install Eclipse ADT  (Note : for win8 32bit/64bit install 32bit ADT)
  2. Setup Environment Variables :
    Add to existing system variable “path” : <path to adt-bundlesdktools>;<path to adt-bundlesdkplatform-tools>

For Windows 8 Development:

  1. Windows OS 8 Machine is required
  2. Install Windows Phone SDK 8.0 

For Windows 8.1 Development :

  1. Windows OS 8.1 Machine is required
  2. Install Microsoft Visual Studio Express 2013 with Update 2 for Windows 

PhoneGap V3.0 and later includes a CLI (Command Line Interface) that provides a suite of commands a developer can use to manage the complete lifecycle of an application.
know more about the CLI commands and their usage.

Posted on

Cordova/PhoneGap app not working on iOS 8.0 Beta (resolved)

Cordova/PhoneGap app and iOS 8.0 Beta

While testing the Cordova/PhoneGap App in iOS8.0 simulator on XCode 6 beta, I found that there is a known issue in the software due to which Cordova/Phonegap Apps are broken.


Issue is mentioned here at the bottom of the page under “WebKit Known Issues” : https://developer.apple.com/library/prerelease/ios/releasenotes/General/RN-iOSSDK-8.0/index.html

This issue is also reported on Apache Cordova site at :
https://issues.apache.org/jira/browse/CB-6863

Some alternative solutions to the issue are listed here :
http://stackoverflow.com/questions/24008307/phonegap-cordova-not-working-in-ios8

So Cordova/PhoneGap App cannot be tested on the iOS8.0 beta before a stable release of the software.

18/06/2014 Update : Xcode beta2 released and it also have the same issue.

08/07/2014 Update : Xcode beta3 released and issue is resolved now.

Posted on

Cordova CLI (Command Line Interface) after v3.0

Cordova CLI (Command Line Interface) after v3.0

A command-line interface (CLI) is a means of interacting with a computer program where the user (or client) issues commands to the program in the form of successive lines of text (command lines).

Lets check the PhoneGap/Cordova CLI after v3.0 :-


With earlier versions of Cordova, developers had to create multiple projects, Process included – building the app with one of the supported platforms, write the appropriate web content, then package and test the application using the selected platform’s SDK And once worked correctly, next step was to copy the web content over to a new project for one of the supported platforms and repeat the process.

Cordova v3.0 is the major update as it is very different from the previous versions. Know the difference between Cordova before and after V3.0

Cordova 3.0 includes a CLI (Command Line Interface) that provides a suite of commands a developer can use to :

– Create cross-platform Cordova application projects
– Add support for each of the Cordova supported mobile device platform
– List supported mobile device platforms
– Remove support for a mobile device platform
– Add a plugin to a project; this can be a core Cordova plugin, a third-party plugin, or a plugin you’ve created yourself
– List plugins installed in a project
– Remove a plugin from a project
– Prepare, compile, and build projects
– Serve an application project’s web content via a web server
– Launch an application in the appropriate mobile device simulator

Developer can manage the complete life-cycle of a Cordova application by using these commands.

PhoneGap/Cordova V3.0 and later includes a CLI (Command Line Interface) that provides a suite of commands a developer can use to manage the complete lifecycle of an application.
Know more about the CLI commands and their usage.

Posted on

Apache Cordova before and after v3.0

Apache Cordova before and after v3.0

Apache Cordova (http://cordova.apache.org) is a free, open source framework for building cross-platform native applications using HTML5.
Recently developers of Cordova released v3.0 which is the major update as it is very different from the previous versions. Here are some of the major differences I came to know :


Before 3.0

  • Cordova application included JavaScript and native code for every Cordova API
  • If your application didn’t use all of the available APIs, you still had the code in your application for the APIs you weren’t using.
  • Can seperate unused APIs from the JavaScript library and the native container, but that is not easy.
  • Use of IDE plugins (on Android, iOS, and Windows Phone) and command-line tools (on Android and BlackBerry).
  • Start building the app with one of the supported platforms, write the appropriate web content, then package and test the application using the selected platform’s SDK. 
  • Once you had it all working correctly, you would copy the web content over to a new project for one of the supported platforms and repeat the process. 
  • Little consistency in project folder structure – framework JavaScript files names are different across mobile device platforms.
  • Build process is different across mobile device platforms.


After 3.0

  • Cordova APIs has been broken out into separate plugins.
  • Cordova plugin manager (plugman) to add and remove plugins from your Cordova project.
  • Cordova development team scrapped the IDE plugins and implemented a Node JS based command-line interface for projects across a wider range of supported mobile device platforms.
  • Command-line tools to create new projects, manage (add, remove, list, update) plugins, and build then test applications using the device emulators and simulators.
Apache Cordova before and after v3.0