Login with Facebook

Login with Facebook

This video tutorial shows how to log in with Facebook on the ionic mobile app. Login with facebook on the android mobile app step by step.

Create blank project

$ ionic start MyIonicProject blank --type=ionic-angular

Then goto MyIonicProject folder and add platform

$ ionic cordova platform add android

Open config.xml and copy package name

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

First goto https://developers.facebook.com  

and create project 

Go to java bin folder

/Library/Java/JavaVirtualMachines/jdk1.8.0_121.jdk/Contents/Home/bin

then run below command with admin access according your release and debug keystores path and alias-name

$ keytool -exportcert -alias androiddebugkey -keystore <your-keystore-parh> | openssl sha1 -binary | openssl base64

Now project has been done. copy APP ID and move to our project

Run below command according your APP ID and APP NAME

$ ionic cordova plugin add cordova-plugin-facebook4 --variable APP_ID="123456789" --variable APP_NAME="myApplication"

install npm package

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

Edit home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Facebook, FacebookLoginResponse } from '@ionic-native/facebook';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController,
public fb: Facebook) { }
login() {
this.fb.login(['public_profile', 'user_friends', 'email'])
.then((res: FacebookLoginResponse) =>
// console.log('Logged into Facebook!', res)
alert(JSON.stringify(res))
)
.catch(e => console.log('Error logging into Facebook', e));
}
}

Edit home.html

<ion-header>
<ion-navbar>
<ion-title>FB Login</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<buttonion-buttoncolor="secondary"(click)="login()">FB login</button>
</ion-content>

Edit app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { Facebook } from '@ionic-native/facebook';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
@NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
StatusBar,
SplashScreen,
Facebook,
{ provide: ErrorHandler, useClass: IonicErrorHandler }
]
})
export class AppModule { }

Finally run

$ ionic cordova build android
$ ionic cordova run android

Follow up with high-quality video tutorial on YouTube

MEDIA STREAMING VIDEO

MEDIA STREAMING VIDEO

In this tutorial discuss about how to build stream video player, so follow simple steps that have been given below. so create a blank template and build simple video player. 

  • $ ionic start myapp blank --type=ionic-angular
  • $ cd myapp/
  • $ ionic cordova plugin add cordova-plugin-streaming-media
  • $ npm install --save @ionic-native/streaming-media@4
  • $ ionic cordova add platform ios
  • $ ionic cordova build ios
  • $ ionic cordova run ios

Edit src/app/pages/home.html to get design

<ion-header>

<ion-navbar>

<ion-title>

Streaming Media Player

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<button ion-button color="secondary" (click)="play()">Play</button>

</ion-content>

Edit src/app/pages/home.ts to function

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

import { StreamingMedia, StreamingVideoOptions } from '@ionic-native/streaming-media';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

constructor(

public navCtrl: NavController,

private streamingMedia: StreamingMedia) {

}

public play() {

let options: StreamingVideoOptions = {

successCallback: () => { console.log('Video played') },

errorCallback: (e) => { console.log('Error streaming') },

orientation: 'portrait',

shouldAutoClose: true,

controls: true

};

this.streamingMedia.playVideo('http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4', options);

}

}

Follow up with high-quality video tutorial on YouTube

IONIC QR CODE GENERATOR

IONIC QR CODE GENERATOR

In this tutorial discuss about how to generate own QR code, so follow simple steps that have been given below. so create a blank template and generate simple QR code. 

  • $ ionic start tutorial blank --type=ionic-angular
  • $ cd tutorial/
  • $ ionic cordova plugin add phonegap-plugin-barcodescanner
  • $ npm install ngx-qrcode2
  • $ ionic cordova add platform ios
  • $ ionic cordova build ios
  • $ ionic cordova run ios

Edit src/app/pages/home.html to get design

<ion-header>
<ion-navbar>
<ion-title>QR CODE</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-input type="text" placeholder="your qr text" [(ngModel)]="qrdata"></ion-input>
<button ion-button full color="secondary" (click)="create()">Generate</button>
<button ion-button full color="secondary" (click)="clear()">Clear</button>

<ion-card *ngIf="createCode">
<ngx-qrcode [qrc-value]="createCode"></ngx-qrcode>
<ion-card-content>
Your QR Code : {{createCode}}
</ion-card-content>
</ion-card>

</ion-content>

Edit src/app/pages/home.ts to function

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
selector: 'page-home',
templateUrl: 'home.html'
})

export class HomePage {
qrdata: any;
createCode: any;

constructor(public navCtrl: NavController) { }

public create() {
this.createCode =this.qrdata;
}

public clear() {
this.createCode ='';
}

}

Follow up with high-quality video tutorial on YouTube

IONIC SEARCH BAR

IONIC SEARCH BAR

In this tutorial discuss about how to add the search bar in the top so follow simple steps that have been given below. so create a blank template and add search bar in the top. 

Follow up with high-quality video tutorial on YouTube

Login with Google

Login with Google

This video tutorial shows how to log in with google on the ionic mobile app. Login with google plus on the android mobile app step by step.

Create blank project

$ ionic start MyIonicProject blank --type=ionic-angular

Then goto MyIonicProject folder and add platform

$ ionic cordova platform add android

Open config.xml and copy package name

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

First goto https://console.developers.google.com  and create project

Select Application type , name and paste package name

open terminal and goto java bin folder

/Library/Java/JavaVirtualMachines/jdk1.8.0_121.jdk/Contents/Home/bin

then run below command with admin access according your release and debug keystores path and  alias-name

$ keytool -exportcert -keystore <path-to-debug-or-production-keystore> -list -v -alias <alias-name>

Ensure that you are using the correct alias name while generating the fingerprint.

Paste the fingerprint and create

Now project has been done. then copy OAuth client and move to our project and run below command. make sure put your OAuth client instead of myreversclientid

$ cordova plugin add cordova-plugin-googleplus --save --variable REVERSED_CLIENT_ID=myreversedclientid 

Next install npm package

$ npm install --save @ionic-native/google-plus@4

Edit home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { GooglePlus } from '@ionic-native/google-plus';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})

export class HomePage {
constructor(
public navCtrl: NavController,
public googlePlus: GooglePlus
) {}

login() {
this.googlePlus.login({})
.then(res => console.log(res))
.catch(err => console.error(err));
}
}

Edit home.html

<ion-header>
<ion-navbar>
<ion-title>Ionic Blank</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<buttonion-buttoncolor="light"(click)="login()">login</button>
</ion-content>

Edit app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { GooglePlus } from '@ionic-native/google-plus';
@NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
StatusBar,
SplashScreen,
GooglePlus,
{ provide: ErrorHandler, useClass: IonicErrorHandler }
]
})
export class AppModule { }

Finally run

$ ionic cordova build android
$ ionic cordova run android

Publishing your app in Google Play Store

Google re-signs your app with a different certificate when you publish it in the Play Store. Once your app is published, copy the SHA-1 fingerprint of the “App signing certificate”, found in the “App signing” section under “Release Management”, in Google Play Console. Paste this fingerprint in the Release OAuth client ID in Google Credentials Manager.

Follow up with high-quality video tutorial on YouTube

VIDEO PLAYER

VIDEO PLAYER

In this tutorial discuss about how to play video using IOS native player. so follow simple steps that have been given below. so open the terminal and run below command.

  • $ ionic start tutorial sidemenu --type=ionic-angular
  • $ cd tutorial/
  • $ ionic cordova platform add ios
  • $ cordova plugin add cordova-plugin-add-swift-support
  • $ cordova plugin add cordova-plugin-hkvideoplayer
  • $ ionic cordova run ios

To play video design play button in home, so edit home.html

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name=“menu”></ion-icon>
    </button>
    <ion-title>AV Player</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button secondary (click)=“play()”>Play</button>
</ion-content>

To play video player edit home.ts as below

import { Component } from ‘@angular/core’;
import { NavController } from ‘ionic-angular’;
declare var HKVideoPlayer;

 

@Component({
  selector: ‘page-home’,
  templateUrl: ‘home.html’
})
export class HomePage {

 

  constructor(public navCtrl: NavController) {
  }

 

play() {
HKVideoPlayer.play(“http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4”);
 }
}

Follow up with high-quality video tutorial on YouTube

Swipeable menu

Swipeable menu

In this lesson discuss simple way design swipeable menu so get a blank template and add platform then run. Simply run below command in terminal.

  • $ ionic start tutorial sidemenu --type=ionic-angular
  • $ cd tutorial/
  • $ ionic cordova platform add ios
  • $ ionic cordova run ios

To design swipeable menu edit home.html as below

<ion-header>
  <ion-navbar color=“purple”>
    <button ion-button menuToggle>
      <ion-icon name=“menu”></ion-icon>
    </button>
    <ion-title>Beache</ion-title>
  </ion-navbar>

  <ion-slides slidesPerView=“4.5”>
    <ion-slide>
      <p> Menu1</p>
    </ion-slide>
    <ion-slide>
      <p> Menu2</p>
    </ion-slide>
    <ion-slide>
      <p> Menu3</p>
    </ion-slide>
    <ion-slide>
      <p> Menu4</p>
    </ion-slide>
    <ion-slide>
      <p> Menu5</p>
    </ion-slide>
    <ion-slide>
      <p> Menu6</p>
    </ion-slide>
  </ion-slides>
</ion-header>

 

Follow up with high-quality video tutorial on YouTube

Slides List Side menu

Slides List Side menu

In this lesson discuss about combination of Slides, Lists, and side menu. so get a blank template and add platform then run. Simply run below command in terminal. First get a blank template and add platform then run.  Simply run below command in terminal.

  • $ ionic start tutorial sidemenu --type=ionic-angular
  • $ cd tutorial/
  • $ ionic cordova platform add ios
  • $ ionic generate page users --no-module
  • $ ionic generate page mypost --no-module
  • $ ionic cordova run ios

Finally edit files in order to get awesome design.

To get homepage view edit src/pages/home/home.html file

<ion-header>
  <ion-navbar color=“purple”>
    <button ion-button menuToggle>
      <ion-icon name=“menu”></ion-icon>
    </button>
    <ion-title>Beache</ion-title>
  </ion-navbar>

  <ion-slides slidesPerView=“4.5”>
    <ion-slide>
      <p> Menu1</p>
    </ion-slide>
    <ion-slide>
      <p> Menu2</p>
    </ion-slide>
    <ion-slide>
      <p> Menu3</p>
    </ion-slide>
    <ion-slide>
      <p> Menu4</p>
    </ion-slide>
    <ion-slide>
      <p> Menu5</p>
    </ion-slide>
    <ion-slide>
      <p> Menu6</p>
    </ion-slide>
  </ion-slides>
</ion-header>

<ion-content fulltext>
  <ion-card>
    <ion-slides pager=“true” autoplay=“2000” loop=“true”>
      <ion-slide>
        <img src=“assets/imgs/image1.jpg” />
      </ion-slide>
      <ion-slide>
        <img src=“assets/imgs/image2.jpg” />
      </ion-slide>
      <ion-slide>
        <img src=“assets/imgs/image3.jpg” />
      </ion-slide>
      <ion-slide>
        <img src=“assets/imgs/image4.jpg” />
      </ion-slide>
      <ion-slide>
        <img src=“assets/imgs/image5.jpg” />
      </ion-slide>
    </ion-slides>
  </ion-card>

  <ion-card>
    <ion-card-header>
      Header1
    </ion-card-header>
    <ion-slides slidesPerView=“3” spaceBetween=“5”>
      <ion-slide>
        <img src=“assets/imgs/image6.jpg” />
      </ion-slide>
      <ion-slide>
        <img src=“assets/imgs/image7.jpg” />
      </ion-slide>
      <ion-slide>
        <img src=“assets/imgs/image8.jpg” />
      </ion-slide>
      <ion-slide>
        <img src=“assets/imgs/image9.jpg” />
      </ion-slide>
      <ion-slide>
        <img src=“assets/imgs/image10.jpg” />
      </ion-slide>
    </ion-slides>
  </ion-card>

  <ion-card>
    <ion-card-header>
      Header2
    </ion-card-header>
    <ion-slides slidesPerView=“2” spaceBetween=“5”>
      <ion-slide>
        <img src=“assets/imgs/image6.jpg” />
      </ion-slide>
      <ion-slide>
        <img src=“assets/imgs/image7.jpg” />
      </ion-slide>
      <ion-slide>
        <img src=“assets/imgs/image8.jpg” />
      </ion-slide>
      <ion-slide>
        <img src=“assets/imgs/image9.jpg” />
      </ion-slide>
      <ion-slide>
        <img src=“assets/imgs/image10.jpg” />
      </ion-slide>
    </ion-slides>
  </ion-card>

  <ion-card>
    <ion-card-header>
      Header3
    </ion-card-header>
    <ion-slides slidesPerView=“4” spaceBetween=“5”>
      <ion-slide>
        <img src=“assets/imgs/image1.jpg” />
      </ion-slide>
      <ion-slide>
        <img src=“assets/imgs/image2.jpg” />
      </ion-slide>
      <ion-slide>
        <img src=“assets/imgs/image3.jpg” />
      </ion-slide>
      <ion-slide>
        <img src=“assets/imgs/image4.jpg” />
      </ion-slide>
      <ion-slide>
        <img src=“assets/imgs/image5.jpg” />
      </ion-slide>
      <ion-slide>
        <img src=“assets/imgs/image6.jpg” />
      </ion-slide>
      <ion-slide>
        <img src=“assets/imgs/image7.jpg” />
      </ion-slide>
    </ion-slides>
  </ion-card>

  <ion-card>
    <ion-card-header>
      Header4
    </ion-card-header>
    <ion-slides slidesPerView=“2” spaceBetween=“5”>
      <ion-slide>
        <img src=“assets/imgs/image10.jpg” />
      </ion-slide>
      <ion-slide>
        <img src=“assets/imgs/image9.jpg” />
      </ion-slide>
      <ion-slide>
        <img src=“assets/imgs/image8.jpg” />
      </ion-slide>
      <ion-slide>
        <img src=“assets/imgs/image7.jpg” />
      </ion-slide>
      <ion-slide>
        <img src=“assets/imgs/image6.jpg” />
      </ion-slide>
      <ion-slide>
        <img src=“assets/imgs/image5.jpg” />
      </ion-slide>
      <ion-slide>
        <img src=“assets/imgs/image4.jpg” />
      </ion-slide>
    </ion-slides>
  </ion-card>

</ion-content>

Edit src/app/pages/mypost/mypost.html file

<ion-header>
  <ion-navbar>
    <ion-title>Mypost</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-card *ngFor=“let data of post;let $index = index”>
    <ion-card-header>
      {{data.name}}
    </ion-card-header>
    <ion-card-content>
      {{data.body}}
    </ion-card-content>
  </ion-card>
</ion-content>

Edit src/app/pages/mypost/mypost.ts file

import { Component } from ‘@angular/core’;
import { NavController, NavParams } from ‘ionic-angular’;
import { HttpClient } from ‘@angular/common/http’;

@Component({
  selector: ‘page-mypost’,
  templateUrl: ‘mypost.html’,
})
export class MypostPage {
  post: any;
  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    public http: HttpClient
  ) {
  }

  ionViewDidLoad() {
    var url = ‘https://jsonplaceholder.typicode.com/comments’;
    this.http.get(url).subscribe(data => {
      this.post = data;
      console.log(data);
    });
  }
}

To function  edit src/app/app.components.ts  file

import { Component, ViewChild } from ‘@angular/core’;
import { Nav, Platform } from ‘ionic-angular’;
import { StatusBar } from ‘@ionic-native/status-bar’;
import { SplashScreen } from ‘@ionic-native/splash-screen’;

 

import { HomePage } from ‘../pages/home/home’;
import { UsersPage } from ‘../pages/users/users’;
import { MypostPage } from ‘../pages/mypost/mypost’;

 

@Component({
  templateUrl: ‘app.html’
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;

 

  rootPage: any = HomePage;

 

  pages: Array<{ title: string, component: any }>;

 

  constructor(public platform: Platform, 
public statusBar: StatusBar, 
public splashScreen: SplashScreen) {
    this.initializeApp();

 

    // used for an example of ngFor and navigation
    this.pages = [
      { title: ‘Home’, component: HomePage },
      { title: ‘My Users’, component: UsersPage },
      { title: ‘My Post’, component: MypostPage }
    ];

 

  }

 

  initializeApp() {
    this.platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }

 

  openPage(page) {
    // Reset the content nav to have just this page
    // we wouldn’t want the back button to show in this scenario
    if (page.title == ‘My Users’ || page.title == ‘My Post’) {
      this.nav.push(page.component);
    } else {
      this.nav.setRoot(page.component);
    }

 

  }
}

To design side menu edit src/app/app.html file

<ion-menu [content]=“content” type=“overlay”>
  <ion-header>

 

    <ion-toolbar class=“user-profile”>
      <ion-grid>
        <ion-row>
          <ion-col col-4>
            <div class=“user-avatar”>
              <img src=“assets/imgs/user.png” />
            </div>
          </ion-col>
          <ion-col col-8>
            <h4>
              User Name
            </h4>
            <p>
              Description
            </p>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-toolbar>
    <ion-list class=“user-list”>
    <button menuClose ion-item *ngFor=“let p of pages” (click)=“openPage(p)”>
        {{p.title}}
      </button>
    </ion-list>

 

  </ion-header>

 

  <ion-content></ion-content>

 

</ion-menu>

 

 
<ion-nav [root]=“rootPage” #content swipeBackEnabled=“false”></ion-nav>

To design side menu edit src/app/app.scss file

.user-profile {
    
      .toolbar-background{
        background-image: linear-gradient(to right#AA4AD8 , #4A69FF);
      }
        color#ffffff;
          }
  

To design userspage menu edit src/pages/users/users.html file

<ion-header>
  <ion-navbar color=“purple”>
    <ion-title>My Users</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-list>
    <ion-item>
      <ion-thumbnail item-start>
        <img src=“assets/imgs/user.png”>
      </ion-thumbnail>
      <h2>UserName1</h2>
      <p>User Description</p>
      <button ion-button clear item-end>View</button>
    </ion-item>

    <ion-item>
      <ion-thumbnail item-start>
        <img src=“assets/imgs/user.png”>
      </ion-thumbnail>
      <h2>UserName2</h2>
      <p>User Description</p>
      <button ion-button clear item-end>View</button>
    </ion-item>

    <ion-item>
      <ion-thumbnail item-start>
        <img src=“assets/imgs/user.png”>
      </ion-thumbnail>
      <h2>UserName3</h2>
      <p>User Description</p>
      <button ion-button clear item-end>View</button>
    </ion-item>

    <ion-item>
      <ion-thumbnail item-start>
        <img src=“assets/imgs/user.png”>
      </ion-thumbnail>
      <h2>UserName4</h2>
      <p>User Description</p>
      <button ion-button clear item-end>View</button>
    </ion-item>

    <ion-item>
      <ion-thumbnail item-start>
        <img src=“assets/imgs/user.png”>
      </ion-thumbnail>
      <h2>UserName5</h2>
      <p>User Description</p>
      <button ion-button clear item-end>View</button>
    </ion-item>

    <ion-item>
      <ion-thumbnail item-start>
        <img src=“assets/imgs/user.png”>
      </ion-thumbnail>
      <h2>UserName6</h2>
      <p>User Description</p>
      <button ion-button clear item-end>View</button>
    </ion-item>

    <ion-item>
      <ion-thumbnail item-start>
        <img src=“assets/imgs/user.png”>
      </ion-thumbnail>
      <h2>UserName7</h2>
      <p>User Description</p>
      <button ion-button clear item-end>View</button>
    </ion-item>

    <ion-item>
      <ion-thumbnail item-start>
        <img src=“assets/imgs/user.png”>
      </ion-thumbnail>
      <h2>UserName8</h2>
      <p>User Description</p>
      <button ion-button clear item-end>View</button>
    </ion-item>

    <ion-item>
      <ion-thumbnail item-start>
        <img src=“assets/imgs/user.png”>
      </ion-thumbnail>
      <h2>UserName9</h2>
      <p>User Description</p>
      <button ion-button clear item-end>View</button>
    </ion-item>

    <ion-item>
      <ion-thumbnail item-start>
        <img src=“assets/imgs/user.png”>
      </ion-thumbnail>
      <h2>UserName10</h2>
      <p>User Description</p>
      <button ion-button clear item-end>View</button>
    </ion-item>

    <ion-item>
      <ion-thumbnail item-start>
        <img src=“assets/imgs/user.png”>
      </ion-thumbnail>
      <h2>UserName11</h2>
      <p>User Description</p>
      <button ion-button clear item-end>View</button>
    </ion-item>

    <ion-item>
      <ion-thumbnail item-start>
        <img src=“assets/imgs/user.png”>
      </ion-thumbnail>
      <h2>UserName12</h2>
      <p>User Description</p>
      <button ion-button clear item-end>View</button>
    </ion-item>

    <ion-item>
      <ion-thumbnail item-start>
        <img src=“assets/imgs/user.png”>
      </ion-thumbnail>
      <h2>UserName13</h2>
      <p>User Description</p>
      <button ion-button clear item-end>View</button>
    </ion-item>

    <ion-item>
      <ion-thumbnail item-start>
        <img src=“assets/imgs/user.png”>
      </ion-thumbnail>
      <h2>UserName14</h2>
      <p>User Description</p>
      <button ion-button clear item-end>View</button>
    </ion-item>

    <ion-item>
      <ion-thumbnail item-start>
        <img src=“assets/imgs/user.png”>
      </ion-thumbnail>
      <h2>UserName15</h2>
      <p>User Description</p>
      <button ion-button clear item-end>View</button>
    </ion-item>

  </ion-list>

</ion-content>

Follow up with high-quality video tutorial on YouTube

Page Create

Page Create

In this lesson discus about page create, navbar color change and back & home buttons control.

First, create a blank template and add platform then run. Simply run below command in terminal.

  • $ ionic start myApp sidemenu --type=ionic-angular
  • $ cd myApp/
  • $ ionic cordova platform add ios
  • $ ionic generate page Cards --no-module
  • $ ionic cordova run ios --livereload

important points

Page create command

$ ionic generate page pageName –no-module

navbar color change

ion-navbar color=”danger”

color defines variables.scss located in the theme folder

Follow up with high-quality video tutorial on YouTube

iPhone app build

iPhone app build

Learn how to build an iPhone app

IONIC is an excellent language to learn right now. It should be comfortable for anyone who has past experience with Javascript and  HTML, but it’s also a wonderful option for those with no coding experience at all.

First, create a blank template and add platform then run. Simply run below command in terminal.

  • $ ionic start myApp blank --type=ionic-angular
  • $ cd myApp/
  • $ ionic cordova platform add ios
  • $ ionic cordova run ios

Follow up with high-quality video tutorial on YouTube