Phonegap – Google Play Vulnerability Warning

Recently one of my app in Google Play showed a vulnerability warning message. This warning itself said, its a high severity cross-application scripting (XAS) vulnerability. So i had to upgrade my app to Phonegap 3.5.1. Find below the warning i received from Google Play.

This is a notification that your com.mydomain.myapp, is built on a version of Apache Cordova that contains security vulnerabilities. This includes a high severity cross-application scripting (XAS) vulnerability. Under certain circumstances, vulnerable apps could be remotely exploited to steal sensitive information, such as user login credentials. You should upgrade to Apache Cordova 3.5.1 or higher as soon as possible. For more information about the vulnerabilities, and for guidance on upgrading Apache Cordova, please seehttp://cordova.apache.org/announcements/2014/08/04/android-351.html. Please note, applications with vulnerabilities that expose users to risk of compromise may be considered “dangerous products” and subject to removal from Google Play. Regards, Google Play Team ©2014 Google Inc. 1600 Amphitheatre Parkway Mountain View, CA 94043

 

phonegap-warning

 

 

 

 

 

 

 

Here are some notes how i over come this.

To upgrade the Phonegap, update the node package for Phonegap by running this command.

npm  update -g phonegap

This will upgrade your phonegap to the latest version.

After upgrading the Phonegap, i wasnt able to build the app, it showed an error saying…

You need to upgrade your SDK build tools.

Minimum version required was 19.1. Upgraded the Android build tools using Android SDK Manager, to 19+.

Now you have to remove the older build files and add android again. Run below commands.

cordova platform update android
cordova platform remove android
cordova platform add android

Now you have to remove and add your plugins used. For that, run the below commands

cordova plugin remove org.apache.cordova.dialogs
cordova plugin add org.apache.cordova.dialogs
cordova plugin remove org.apache.cordova.console
cordova plugin add org.apache.cordova.console
...
...
so on...

Now you are done. Rebuild the application and align it, sign it and deploy it to Play Store again. =)

Requirement Traceability Matrix (RTM)

As a Software Engineer I was faced with a many challenging tasks in this industry. Often its a over head for a PL to manage change requests from the customer. We may have implemented the requirements in the right way. But the customer may need it to be in their style.

RTM-Requirement Traceability Matrix is good way to manage these kind of change requests. A traceability matrix is a document, usually in the form of a table, that correlates any two baselined documents that require a many-to-many relationship to determine the completeness of the relationship. It is often used with high-level requirements (these often consist of marketing requirements) and detailed requirements of the product to the matching parts of high-level design, detailed design, test plan, and test cases.

An RTM usually contains table with coloumns like,

RTM - Requirement Traceability Matrix

Requirement traceability Matrix traces requirement to the test plans/test cases.

We should break down each and every requirement as small as we can. Let’s say, we have a News module in the project. We should split down the requirements like,

  • RQ-001 : Each page will list 10 news
  • RQ-002 : News list will be sorted in ascending order of the posted date.
  • RQ-003 : Each news item should have the following properties
  • RQ-004 : New title (string)
  • RQ-005: New Description (Rich Text)
  • RQ-006: … so on.

Identify each and every minute requirement possibilities of the project. It takes time, but it can save lots of time in the end.

Once the RTM in fully identified, you have to get it concurred by the customer. This will ensure no change requests will pop up in the project in a later stage.

To be continued…

Deploying Ruby on rails application in windows.

Setting up a ruby on rails project always been a headache for me. The environment of Ruby preferably should be Linux based.

Some quick guide likes for setting up an Ruby On Rails in a Windows machine is given below.

  1. Install Ruby Version 2+

Download Ruby for windows from the below url and install it.

http://rubyinstaller.org/downloads/

To verify the installation, go to command prompt, run ruby –v

It should show version.

  1. Install MySql

Download and install MySQL from below url.

http://www.mysql.com/downloads/

To verify the installation, go to command prompt, run mysql -v

  1. Install Git

Download and install Git from below url.

http://git-scm.com/download/win

To verify the installation, go to command prompt, run git –version

  1. Install Rails Version 4+

With Ruby installed, you can install all of Rails and its dependencies through RubyGems on the command line:

gem install rails

New versions of Rails can be installed the same way.

  1. Install bundler

Install bunder by running the following command on terminal

gem install bundler

  1. Open Command Prompt and Go to project directory

Open command prompt and navigate to your projects directory.

  1. Run bundle install

This will install all the ruby gems & dependencies of your project.

  1. Run bundle exec rails s

And it will start and display the local server url and details.

Setting up ruby environment in Windows is always  a burden. You can try out Vagrant to setup an environment.

 

 

Tips to optimize your phonegap application

Performance is the main con of Phonegap applications when compared to native applications. So optimizing the apps you build with Phonegap is quite important. I’ve been working with phonegap application for the past 1.5 years. here I’d like to share some of my observations & tips on this topic.

The 300ms Delay in touch devices.

Most touch-based mobile browsers wait 300ms between your tap on the screen and the browser firing the appropriate handler for that event. It was implemented because you could be double-tapping to zoom the page to full width. Therefore, the browser waits for a third of a second — if you don’t tap again, the “click” is activated.

If you are developing your app in BackboneJS, you can get rid of this delay by just including Backbone Touch library.  All you have to do just include the script below BackboneJs in ur html page.

If you are using AngularJS, angular comes with ngTouch module which disables the 300ms delay.

You can try Fastclick aslo.

By removing the 300ms delay on clicks, you app becomes visibly faster.

Use your own css.

User your own css,. dont go for any css/ui libraries. If you want to make your app responsive, you can try SkeltonCss or The Grid only Bootstrap. That’s you can customize the bootstrap before you download, including only what you need really.

Further tips will be coming soo…

You might not need Bootstrap

Its the era of electronic gadgets, that is computers are secondary now a days. People are using smartphones,tablets, for surfing. There comes the importance of responsive websites. When the sites are accessed from a phone, it should be readable & user friendly. And it should be able to execute users needs.

We all know Twitter Bootstrap is response framework that comes with optional js plugins. The twitter css library has arround 6000 lines of code when its not minified.of which you may need only 100-200 lines to make your site responsive. This 6k+ lines of styles is not that light.

If you need only to make your site responsive, we have lots of replacement for this Bootstrap. which are super-light weighted. For example lets say,

Skelton

www.getskelton.com

The skelton css will help you to achieve responsiveness for you site. The file structure for Skeleton is:

index.html: The base html page that includes the necessary initial markup
stylesheets (folder)
base.css: Basic styles of Skeleton
skeleton.css: The glorious Skeleton grid
layout.css: File with no specific styles, but a variety of useful media queries
images (folder):
favicon.ico: Standard 16×16 favicon
apple-touch-icon (x3): All three sizes of Apple touch icons for iPhone 3, iPad and iPhone 4 with retina.

At the same time, we twitter provide themes and javascript plugins for your site.

There’re lots of libraries like Skelton

So before start your project, just think of what you need really, whether just a responsive site or responsiveness and theme for you site.

Installing plugins in Phonegap 3.0

Check whether the plugin supports Phonegap CLI, or not. If it does,  run the command.

Using the Phonegap CLI run:

phonegap local plugin add https://github.com/aharris88/phonegap-sms-plugin.git

This will place the plugin in your plugins directory and update your android.json file that keeps track of installed plugins.

Then when you run,

 phonegap  build android

or

 phonegap install android

Phonegap will put the necessary files into the platforms/android directory. It will update AndroidManifest.xml, res/xml/config.xml, and it will add the src/org/apache/cordova/sms directory.
If it doesn’t,
–   Copy the .js file to your www folder. And link it to your html.
–   Create a package, create the folder structure as yours package name.                        

comnuevalgoplugin

–   Copy the .java file into this package.
–   Update your platformsandroidresxmlconfig.xml adding the following line.

The plugin will be added to your project. Once these things are done, all you have to do implement the js functionality in your app, as you need it.
To view the errors while building:
Add verbose argument to the build command as follow.

phonegap -V build android

If you’re getting a class not found exception, check the config.xml where you added your plugin. The package name might be not correct.