Use Facebook Sign-In with Ionic and Firebase

10 million of people use Facebook Login everyday to sign-in to applications across the entire web – as per Facebook. By integrating a fully working Facebook sign-in process with your app, your users will have a safe, authentic and consistent experience. They even don’t need to go through such monotonous credentials re-entering process to sign-in to your application. Having this easy and reliable Facebook Login functionality generates a win-win situation for both users as well as developers. That’s why you should include Facebook Login functionality in your application. As this “Why” is clear to you, so let’s proceed to “How” to use Facebook sign-in with Ionic and Firebase to make the development process even easier.

First-off, let’s have a look on the brief of this “How to” process:

1. Sign-in and navigate to your Facebook developer account. Now, create a new app and supply the credentials.

2. Enter into your Firebase console and authorize Facebook authentication for app with the credentials from the aforementioned step.

3. Writing the code to get user authorization from the Facebook and then authentication of that user into Firebase app.

After this brief, let’s start with an in-depth explanation of each step:

1. Facebook Developer Account

Firstly, you have to create a new application via Facebook developer account. So navigate to https://developers.facebook.com/apps. Register yourself as a developer (if not registered yet) and create a new application.

Create New App

 

A short form will pop out as you click on “Create App Id” button. Add a “Display Name” for your app and a contact email address that will be public to your users.

 

Create a New App ID

 

Once after completing “Create App Id” process, you will land to the app’s dashboard. Here you can notice the “APP ID” at the top of the page, adjacent to “View Analytics” option. Note it down as you will require it during Facebook plugin installation.

 

App ID

 

Cordova Plugin Installation

Once you have done with your new app creation on Facebook, it is the time to proceed with the Cordova plugin installation in your Ionic app to make the app calling the Facebook Sign-in widget. So, start off with the opening of your terminal and write the following (everything in the same line):

$ ionic plugin add cordova-plugin-facebook4 --variable APP_ID="168934381" --variable APP_NAME="ABCApplication"

Now replace the values of APP_ID & APP_NAME with your actual credentials. Both of these values can be found under your Facebook Developer Dashboard. Dealing with Cordova plugin is quite difficult. Big thanks to the Ionic team who gave birth to Ionic Native (a TypeScript wrapper for the Cordova plugins) that can be used in a more Ionic way for adding any native functionality in the app as per your needs.

It is the time to install Facebook package from Ionic Native. For that, you need to again open your terminal and write the following:

$ npm install --save @ionic-native/facebook

Once after completing the installation process, now let your app to utilize it. You can do this via importing it in your app.module.ts file.

import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar'
import { Facebook } from '@ionic-native/facebook'

@NgModule({
...,
providers: [ SplashScreen, StatusBar, Facebook ]
})
export class AppModule {}

Add Platform to Facebook

All is set up under development environment. Right? Now lets Facebook know which platforms would you prefer. For example, you’re considering two platforms, iOS and Android. To add both these platforms, navigate to your Facebook dashboard and tap the settings option. There you will notice a button “Add Platform” just right under the app’s information. Click on this button.

Add Platform to Facebook

 

After clicking on this button, you can notice several options for the platforms you’re adding. Let’s first begin with iOS platform. Here you will have to fill the value for “Bundle ID” option.

 

iOs

 

In case you don’t know the Bundle ID, check your default package name while creating an Ionic App (under your config.xml file). You can use this same name for your Bundle ID.

widget id="co.ionic.facebook346" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">

We recommend you to replace “co.ionic.facebook346″ (or what you see there) with something which is much more “On Brand” in tune with your app or business. After adding Bundle ID, carry on with the app creation process and follow the same process for the Android platform. This process differentiates itself in the only way of calling it “Google Play Package Name” in place of “Bundle ID”.

 

Android

 

2. Facebook Authentication Under Firebase Console

As all has been set up under Facebook developer console, you need to navigate to Firebase control for Facebook authentication for your app.

To authorize Facebook sign-in, navigate to your Firebase Console and find the app you’re making use of. Under the app’s dashboard, follow this path:

Authentication > Sign-In Method > Facebook, and click on “Enable” toggle option.

Facebook Sign-In in Firebase

 

Once you’ve clicked it, you will see some field boxes asking for some information, like your Facebook App ID and App secret key. If you don’t know the value for these field boxes, you can find both these under your Facebook console, inside the settings of your app.

3. Users Authentication

You can authenticate your users in whatever step of your app’s process you want. Here is the code that you can utilize by just copying into whichever page you’re using. The foremost thing is to avail the authorization from Facebook. For that, you have to import Facebook plugin from Ionic Native and request your users to sign in.

import { Facebook } from '@ionic-native/facebook'

constructor(public facebook: Facebook){}

facebookLogin(): Promise<any> {
return this.facebook.login(['email']);
}

That function is totally responsible for opening the Facebook native widget and requests the users for app authorization to utilize their data for sign-in objectives.

Now is the time to deal with function response. It will outcome a Facebook access token that should be passed to Firebase.

import firebase from 'firebase';
import { Facebook } from '@ionic-native/facebook'

constructor(public facebook: Facebook){}

facebookLogin(): Promise<any> {
return this.facebook.login(['email'])
.then( response => {
const facebookCredential = firebase.auth.FacebookAuthProvider
.credential(response.authResponse.accessToken);

firebase.auth().signInWithCredential(facebookCredential)
.then( success => {
console.log("Firebase success: " + JSON.stringify(success));
});

}).catch((error) => { console.log(error) });
} 

To easily understand the development process, let’s break down this aforeshared code:

const facebookCredential = firebase.auth.FacebookAuthProvider
.credential(response.authResponse.accessToken);

This coding line is used to create a credential object that can be passed to Firebase. After creating such credential object, pass this to Firebase:

facebookLogin(): Promise<any> {
return this.facebook.login(['email'])
.then( response => {
const facebookCredential = firebase.auth.FacebookAuthProvider
.credential(response.authResponse.accessToken);

firebase.auth().signInWithCredential(facebookCredential)
.then( success => {
console.log("Firebase success: " + JSON.stringify(success));
});

}).catch((error) => { console.log(error) });
}

This coding line “firebase.auth().signInWithCredential(facebookCredential)” ensures about your user’s account creation under your Firebase app. Plus, it also authenticates the user under the Ionic app and stores some data related to authentication inside local storage. This authentication details may include tokens, provider information, tokens and other information.

We at Envision Ecommerce have developed Facebook login ionic app:

https://github.com/envisionecommerce/FBAppDemo

Regardless of this, our highly qualified app development team is there for you. Envision Ecommerce, best mobile app development company, provides the utmost support to customers in developing their Ionic based hybrid business apps at affordable prices. Feel free to contact us at [email protected] or visit: http://demo.envisionecommerce.com/store/

How to improve Performance for Datatables in Laravel?

Datatable is a powerful and an effective solution for creating table listings and adding interactive functionalities for it. It provides all the functionalities like pagination, searching, sorting out of the box with such an ease that one need not do any kind of tough work to get them work as needed.

But to make it work in the most effective and efficient way, there is need to make some decisions regarding its use. No doubt, It is able to handle lakhs of records really smoothly but wrong way of using or ill-way of using it might turn out to be problematic instead of actually being a solution.

This post will help you people to analyse your problem and then choose the best way to get this really helpful and powerful solution implemented in your application.

Analysing the Requirement

While being into web development, many developers like me need to show the data in tabular form and then provide some actions over them so as to manipulate the data row-by-row (like add, edit or delete) or implement some other operations like sorting and searching. The best solution in terms of ease and speed is Datatables. It works like charm as far as the number of records are few thousands, but as the number grows say above 20,000 or so, the problem starts.

So a page with around more than 20,000 records was taking a lot of time(say, around 1 minute, which is actually really long in consideration to today’s fast generation) even after making use of Datatables with the simplest configuration.

I am sure many of the developers must have faced the same problem and must have spent a lot of hours to find the correct solution at one place.

Data tables usage approaches

After struggling at various forums and going through many discussions about it , I came up with 2 solutions to it both following different approaches; first one being on Client side.

Client side

Initially the approach that was being used was on the data that was being fetched in the controller itself and was passed to the view further and then was shown and manipulated there as required. Lets just make steps to to make it simple and comprehensive:

● Fetch data in controller

● Manipulate data in controller itself to show it as required in view

● After loading all the data, datatables paginate the data in view

Now, the issue with this approach was that it took really long to load the page as on page load all the data that was around 20 thousand records were fetched that further degraded the speed. And therefore led to frustrated user experience.

The Code snippet is as follows:

Controller function to call view initially is as below-

Controller function

Code snippet of function called on ajax is as follows:

Code snippet

The view snippets should be like as given below:

view snippets

The datatable configuration on this page is:

datatable configuration

The Pros of this approach is that, the time for operations like searching, sorting and pagination is noticeably small which made these really fast for users.

The Cons for it is that it takes really long to load the page. No doubt, this approach decreased the load time to good level but was still very slow considering user satisfaction. So, I after doing the needful R&D, the other solution we moved on to was Server Side solution.

The time for request can be seen in the picture given below:

time for request

2. Server side

This Solution was really effective because it restricted all the manipulations and operations to controller and view just loaded the HTML. Moreover, the data pagination was implemented on server side which further reduced the overall execution time.

Just to make comparison with the above mentioned approach, the steps for this approach are as follows:

● Fetch data in controller

● Manipulate data and paginate the data in controller

● Return data plus some meta-data like total records and records filtered count.

Now the ajax request is specified in datatables to get the data of the table. Moreover, every operation such as searching, pagination, and sorting is done on server side with appropriate ajax request.

The Controller function to call view remains same as in the former case.

The only change exists in method called via ajax and datatable configuration as below:

ajax and datatable configuration

(Tip: To show the proper page numbers and allow paging work properly it is very important to send the recordsTotal, recordsFiltered data)

And the Datatable configuration is below:

Datatable configuration

The Pros of this approach is that the total execution time is equally divided among the server side operations and client side operations, thereby, reducing the waiting time to load the page.

The Cons of this approach as such is nothing except that now the operations that were given by datatables out of the box, now needs to be coded on the server side.

The Given below image will show the drastic difference (from 27.53s to 2.11s only) this approach made to the request time:

drastic difference

Which one to Choose?

Both the approaches are having their own advantages and disadvantages, but depending upon the scenario we can choose one to follow, so that we could eliminate any disadvantages.

From the above discussion, it can be easily analyzed that the first approach is really efficient when the number of records to be viewed are less than around 15000 records whereas the second one is applicable when the data set to be operated is very large in size, let’s say, above 20000 thousand.

About Author

The author is a Web Developer at Envision Ecommerce with Experience in Laravel and Passionate about learning emerging frontend technologies like jquery, angularjs.

Ionic V/S Xamarin – Which Framework is Best to Choose?

Well, there are a number of frameworks available in the market. But, Ionic and Xamarin are the two most effective and useful frameworks to build up an interactive mobile application. As, they both offer the multiple benefits to businesses while developing apps.

But, the biggest problem is… many people are still juggling to choose between one Framework over another. They are trying to find out, like “Which Framework makes a good choice for their businesses to develop the mobile apps?”

These days, business owners wouldn’t prefer to create mobile applications for the particular mobile OS. In fact, they want to develop an app which is applicable to almost all the mobile platforms. So, in that case, cross-platform frameworks are extremely valuable in various perspectives and make a wise choice for their next big hit. Below we’ve gathered a few good reasons that can be highly helpful to you.

Read on to know…

1) Development Cost:

Ionic is an open source platform, its $0 price tag is always encouraging yet promising for many. In fact, this Ionic framework always comes with a free commercial and developer license, which allows you to scale up your mobile app in terms of push notifications and deployments to devices from the power of Ionic Cloud Services.

But on the other side, Xamarin (owned by Microsoft), which means it is only comes with free Xamarin Studio (Mac) and Visual Studio Community Edition (Windows). Rest features will be available in the paid version of Visual Studio.

2) Development & Learning Curve Experience:

Ionic framework supports all the web technologies, which give you nothing, but a faster learning curve experience than learning C# programming (Xamarin).

And, if we talk about the development process, Ionic is fast enough that makes your app ready within the weekend only with the help of ripple emulator, but Xamarin will take huge time to build-up an app.

3) Necessary to Install or not:

Ionic framework does not require any Visual studio components installed while working with. But on the other side, Xamarin always need to have installed features like Visual studio for developing an app with the specific platform.

4) Effective for web Developers:

Ionic is best for those who have a great knowledge of CSS/HTML & Javascript. All you just need to learn AngularJS to make the best use of this framework.

But on the other side, Xamarin requires a hard core knowledge of programming language. So, it makes difficult for web developers to build an app using Xamarin

So, Who Wins?

It goes without saying that Ionic framework is the clear winner in this race. As, it allows you develop an authentic, high quality mobile app fast with free tooling & greater user experience then Xamarin.

Regardless of this, our highly qualified app development team is there for you. Envision Ecommerce, best mobile app development company, provides the utmost support to customers in developing their Ionic based hybrid business apps at affordable prices. Feel free to contact us at [email protected] or visit: http://demo.envisionecommerce.com/store/