Fun with Hybrid Mobile Apps

In the world of data, visualization plays the important role. It helps the business to identify the various patterns. More and more of data visualization and data scientist professional are being required. With great demand in visualization, great tools and technologies are emerging too. In this post we are will be looking upon Chart.js  with Ionic. It's an open source javascript library, which provides some predefined charts. Developers can easily integrate these charts into their web application. Syntax and integration of Chart.js is also very simple. We assume that you have already installed ionic on your system, if not please follow the steps given on ionic documentation. Let's first create an ionic application ionic start ChartJsDemo blank Now our application is created, let's install Chart.js into our application npm install chart.js --save Now we are ready to incorporate Chart.js into our application.  To import Chart.js into our application, all we need to...

Gesture event support is also one of the reason behind popularity of mobile applications. Capturing gesture events can be easily done in case of native mobile applications, since all the mobile platform expose gesture events in native code. Since Hybrid mobile applications are built over html and  javascript,  html don't support gesture events. There could be scenario's, where you wants to provide support for your hybrid mobile application. In such cases, we can use Hammer.JS  . Angular version 2 also provides support for Hammer.JS, about the same we will look into this post. Let's say we want to design a simple box, which we can rotate in any direction as shown Here we are trying to rotate the box in any direction by using Gesture events. To perform rotation we need to use two fingers. Let's see how we can implement the same in Ionic. Let's create a blank application using command ionic start hammerjsExample blank --v2 Now let's add Hammer.JS ...

Securing communication between mobile application and back-end server is crucial. We should authenticate the requests sent from mobile applications before serving them. Authentication may require username and password for the user, which most of the developers store into mobile local-storage.  Storing sensitive information in local-Storage is a very bad practice, instead you should use other options such as JWT tokens or Social providers. To get more information look to Security for Cordova mobile applications . An token is also an sensitive information, which we need to store somewhere, so what shall we do? Thank God cordova have such large community support, we will look for one of such plugin which can help us here. Before using plugin, lets first create the blank ionic2 application ionic start --v2 SecureStorageExample blank navigate to the directory of your application  and add the secure storage plugin using the below command ionic plugin add cordov...

One of the great challenge for mobile developers is securing it. In case of Cordova based mobile applications, this challenge is more complex. Since, all the cordova based mobile applications are nothing but an website with index.html. The only difference here is that this website runs within your mobile and all the html pages are wrapped within native container of mobile platforms. Let's look at the some of the points to be taken care while securing your mobile application: Cordova Whitelist Plugin This helps in restricting the access from your application to external websites. It prevents attackers to get information about user by injecting their own javascript code into your application. By default access policy is set to allow access for all domains. <access origin="*" /> Change this to point only to your site <access origin="https://yoursite.com/" /> Transfer Data Using Https: Data transferred over http can be intercepted a...

To target target people from different countries, i18n support is required for your mobile app . Here in India where there are so many local languages, i18n support in mobile apps is must. In This blog, we will look how we can achieve i18n in ionic2 apps. We all know ionic2 is based on angular version 2. New angular version has it's own internationalization(i18n) approach , but sadly this approach is not yet supported in ionic2. Ionic team suggests to use ng2-translate for the internationalization in ionic2. Let's begin with it Create a blank application in ionic2 ionic start --v2 i18Ionic blank navigate to folder i18Ionic in terminal/cmd and install ng2-translate npm package in your ionic project npm install ng2-translate --save Once the npm package is installed, we are ready to configure our application for i18n support. in ng2-translate, we need to create json specific to the languages which we want to support in our code. In this example we will s...

Note: Purpose for this post is just to show, how to correctly use D3 JS in Ionic2 During the UI/Mobile app development, we all would have encountered need to use data visualization components. D3 JS is one of such powerful tool, being used for same. Using D3 in Ionic1 was pretty easy. Since Ionic2 has moved on typescript and node modules based development, developers has been facing difficulties about how to include any third party libraries. D3 is one of such libraries. Here in this post we will look how we can include D3 into our ionic2 application. Install Typings Typings is the simple way to manage and install TypeScript definitions. First we need to install typings, use given commnad in cmd/terminal: npm install -g typings Create Ionic2 blank application use the below command to create blank ionic application ionic start --v2 myApp blank this command will create an empty ionic2 project, which will contain two components app and home. app is your main comp...

an attractive icon and splash screen are always important for your mobile application. after all they are the first thing anyone will look into. But this has been always a great headache for the developers. Since they need to support multiple platforms and devices with different screen sizes. Each platform and device requires different size of icons and splash screen. We are lucky that Ionic team has taken care of this for us. We can read about all this from there documentation. Ionic Icon and Splash Screen Image Generation After the release of Cordova 6.0, icon and splash screen is not updating for android platform and it is showing default icon and splash screen. Actually there was an issue in Cordova 6.0 version, which is now fixed in latest Cordova android version.  Since Ionic2 is still referring to the old Cordova 6 version, this issue is occurring for all the new applications that are being created. There is a solution for the same which we will look here...

Since the Ionic Team has launched the Ionic2, there has been great buzz about the same. All the mobile developer's are trying there hand on Ionic2.  With Each upgrade few new features and bug fixing were introduced. Now Finally Ionic Team has launched the Ionic2 Release Version . That's a great news, isn't it? But Now we all have one problem with us. How to update our existing Ionic2 Project's? We are going to look into the solution for the same. Update Ionic CLI Insert the command npm install -g ionic in command prompt and Enter Update Ionic Project Dependencies Open  package.json within your project folder and update the  dependencies as shown  "dependencies": { "@angular/common": "2.2.1", "@angular/compiler": "2.2.1", "@angular/compiler-cli": "2.2.1", "@angular/core": "2.2.1", "@angular/forms": "2.2.1", "@a...