angular4-ionic3-hybrid-app

 
In this article, I am going to explain how to build simple login screen using Angular 4 and Ionic 3, actually, I planned to publish a single  article on Facebook authentication but, due to length of the post I divided this into two parts in this part I am going to explain how to create simple login screen and my next part covers how to integrate Facebook authentication with hybrid application

Step 1: Setting up local environment

The first thing which I am going to do is set up a local environment for Ionic by running below commands the pre-requisites for this you must install node.js 6+ version in your local environment you can install node.js by downloading node installer 
Once the node.js installed just run below commands for Ionic and Cordova modules

npm install -g cordova
npm install -g ionic

Step 2: Creating new project

You can create new project by running below commands, the start command creates a new project called “ionic-facebook-login” using sidemenu template, if you don’t specify any template type then it takes tabs template as a default template, you can specify template type after the project name, the template type could be tabs,  sidemenu, blank or tutorials

$ ionic start ionic-facebook-login sidemenu

Now, run below command to test ionic app, this command launches ionic app in the browser using 8100 port number  ex: http://localhost:8100/

$ ionic serve

Step 3: Creating Ionic Page

Create Ionic page to display user related information once the authentication is successful, here I am going to create new page called myprofile by running below Ionic command

ionic generate page myprofile

A new myprofile page will be created under page folder just open myprofile.ts file and add below code

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
/**
 * Generated class for the MyprofilePage page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */
@IonicPage()
@Component({
  selector: 'page-myprofile',
  templateUrl: 'myprofile.html',
})
export class MyprofilePage {
  firstName:String;
  gender:String;
  constructor(public navCtrl: NavController, public navParams: NavParams) {
      this.firstName = navParams.get("firstName");
      this.gender = navParams.get("gender");
  }
  ionViewDidLoad() {
    console.log('ionViewDidLoad MyprofilePage');
  }
}

Step 4: Pass user information from home page to myprofile

There is an event handler called login() which will invoke on click of Facebook login button, in the login method I am redirecting to myprofile page by passing first name and gender details but in part two, these information will fetch from your facebook profile

import {Component }from '@angular/core';
import {NavController }from 'ionic-angular';
import {Facebook, FacebookLoginResponse }from '@ionic-native/facebook';
import cmd from 'node-cmd';
import Promise from 'bluebird';
@Component( {
selector:'page-home',
templateUrl:'home.html'
})
export class HomePage {
constructor(public navCtrl:NavController, private fb:Facebook) {
}
public userId:string;
_firstName:String = "Raj Sekhar";
_gender:String = "M";
login() {
this.navCtrl.push('MyprofilePage',  {
firstName:this._firstName,
gender:this._gender
    })
}
}

Step 5: Applying themes

The first thing is applying some colors at globally those are background-color, text-color etc… for those I have edited variable.scss file which is under theme folder and added below styles

$colors: (
  primary:    #D32F2F,
  secondary:  #F44336,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #fff,
  primary-color-text:   #FFFFFF,
  secondary-text-color: #757575,
  divider-color:        #BDBDBD,
  accent-color:         #FF5252
);
$background-color:#E12929;
$text-color:#FFFFFF;

To apply some nice font family to the heading,  I am using Google fonts which are directly loaded on the index.html page

<link href="https://fonts.googleapis.com/css?family=Yellowtail" rel="stylesheet">

Now, open home.scss file which is under home page folder and add below styles

page-home {
}
.heading-style
{
    font-family: Yellowtail, cursive;
    font-size:45px;
    margin-top:80px
}
 .row-height
{
     height:200px;
}

Step 6: Home Page Screen

Finally, open home.html file and add below code, I am using ion-icon to add facebook logo just before the login button

<ion-header>
  <ion-navbar color="primary">
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>
<ion-content  primary-color-text >
 <ion-grid>
    <ion-row class='row-height' >
      <ion-col  text-center>
        <h1 class='heading-style' >Keys and Strokes</h1>
      </ion-col>
    </ion-row>
    <ion-row >
      <ion-col center text-center>
       <button ion-button  outline color="light"  (click)="login()" > <ion-icon ios="logo-facebook" md="logo-facebook" style='margin-right:5px'></ion-icon>   Login with facebook</button>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

Now, run Ionic serve command and check output, the home page should render something like below
angular4-ionic3-hybrid-app

Step 7: MyProfile Page Screen

Now,  go to myprofile.html file which is under myprofile page folder and add below content

<!--
  Generated template for the MyprofilePage page.
  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header >
  <ion-navbar color="primary">
    <ion-title>myprofile</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
<ion-grid>
  <ion-row>
    <ion-col>
      First Name
    </ion-col>
    <ion-col>
     {{firstName}}
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
     Gender
    </ion-col>
    <ion-col>
     {{gender}}
    </ion-col>
  </ion-row>
    <ion-row>
    <ion-col>
     LastName
    </ion-col>
    <ion-col>
     {{lastName}}
    </ion-col>
  </ion-row>
</ion-grid>
</ion-content>

The myprofile page should render something like below
angular4-ionic3-hybrid-app
In my next article, I am going integrate this with facebook login using cordova-native plugin

Download Code

[sociallocker] ionic-facebook-login [/sociallocker]

By coderss

Leave a Reply

Your email address will not be published. Required fields are marked *