Ionic 3 and Angular 4: JSON Parsing with Token Based Restful API
Wall Script
Follow Me:
Wednesday, July 12, 2017

Ionic 3 and Angular 4: JSON Parsing with Token Based Restful API

We have covered most of the topics in building a mobile application using Ionic 3 and Angular JS 4. Today’s topic is to pull in data for news feed from a server and display it on your website. This is suggestible post since it does proper verification at the backend based on token. All it does is, it will verify system token and user token at the backend and then pulls data using feed API url. I have also added an extra code to the previous post for login authentication with PHP Restful API for showing alert messages. Please do follow the below video and code for your understanding.

Ionic 3 and Angular 4:Login and Signup with PHP Restful API.


Live Demo

Part 1
Ionic 3 and Angular 4: Create a Welcome Page with Login and Logout.


Video Tutorial
Ionic 3 and Angular 4: PHP Token Based Restful API User Authentication and JSON Parsing.


Database Design
To build the user feed system, you have to create two tables such as Users and Feed. You can check my previous tutorials for creating token-based API system.

Users
User table contains all the users registration details.
CREATE TABLE users(
user_id int AUTO_INCREMENT PRIMARY KEY,
username varchar(50),
password varchar(300),
name varchar(200),
email varchar(300));

Feed
This table contains user daily updates.
CREATE TABLE feed(
feed_id int PRIMARY KEY AUTO_INCREMENT,
feed text,
user_id_fk int,
created int
);

Download PHP Restul Project
$git clone https://github.com/srinivastamada/PHP-Slim-Restful.git


home.ts
Here getFeed function helps you to get the user feed data based on encrypted token. You will understand more if you watch the video.
import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';
import {AuthService} from '../../providers/auth-service';
@Component({selector: 'page-home', templateUrl: 'home.html'})
export class HomePage {

  userDetails : any;
  responseData : any;
  dataSet : any;
  userPostData = {"user_id": "","token": ""};

  constructor(public navCtrl : NavController, public authService : AuthService) {
    const data = JSON.parse(localStorage.getItem('userData'));
    this.userDetails = data.userData;
    this.userPostData.user_id = this.userDetails.user_id;
    this.userPostData.token = this.userDetails.token;
    this.getFeed();
  }

  getFeed() {
    this.authService.postData(this.userPostData, 'feed')
      .then((result) => {
        this.responseData = result;
        if (this.responseData.feedData) {
          this.dataSet = this.responseData.feedData;
        } else {}
      }, (err) => {

      });
  }

  convertTime(created) {
    let date = new Date(created * 1000);
    return date;
  }

  .........
  // Other Functions
  .........

}

home.html
Binding user feed with HTML. Here using *ngFor parsing the dataSet object.
<ion-header>
  <ion-navbar>
    <img ion-right src="assets/imgs/bananalogo.png" class="navbarLogo" />
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h2>Welcome to {{userDetails.name}}</h2>
  <h3><i class="fa fa-heart-o" aria-hidden="true"></i></h3>
  <h3>{{userDetails.email}}</h3>

  <ion-card *ngFor="let item of dataSet">
    <ion-card-content>
     <p [innerHTML]="item.feed | linky"></p>
     <span>{{ converTime(item.created) | amTimeAgo}}</span>
    </ion-card-content>
  </ion-card>

  <button ion-button color="primary" (click)="logout()">Logout</button>
</ion-content>


Angular Plugins
Go to your project directry and intall following plugins for timeago and linky features. These plugins will improve the user data feed.
/* Time Ago */
$npm install --save angular2-moment

/* Text to Link */
$npm install --save angular-linky

app.module.ts
Importing new plugins in application module. Now go to src/app/app.module.ts and import MomentModule and LinkyModule for improving the user feed.
import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { MyApp } from './app.component';
import { AuthService } from '../providers/auth-service';
import { Welcome } from '../pages/welcome/welcome';
import { Login } from '../pages/login/login';
import { Signup } from '../pages/signup/signup';
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { LinkyModule } from 'angular-linky';
import { MomentModule } from 'angular2-moment';

@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    Welcome,
    Login,
    Signup,
    TabsPage
  ],
  imports: [
    BrowserModule, HttpModule, LinkyModule, MomentModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    Welcome,
    Login,
    Signup,
    TabsPage
  ],
  providers: [
    StatusBar,
    SplashScreen, AuthService,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

ToastController Error Notifications
Implementing error notitifications for login and signup pages.

signup.ts
Imported ToastController for user notifications .
import { Component } from '@angular/core';
import {  NavController, ToastControllerfrom 'ionic-angular';
import { TabsPage } from '../tabs/tabs';
import { LoginPage } from '../login/login';
import { AuthService } from '../../providers/auth-service';

@Component({
  selector: 'page-signup',
  templateUrl: 'signup.html',
})
export class SignupPage {
  responseData : any;
  userData = {"username": "","password": "", "name": "","email": ""};

  constructor(public navCtrl: NavController, public authService:AuthService, , public toastCtrl:ToastController ) {
  }

  signup(){
     if(this.userData.username &&           this.userData.password && this.userData.email && this.userData.name){
     this.authService.postData(this.userData,'signup').then((result) => {
      this.responseData = result;
      if(this.responseData.useerData){
      localStorage.setItem('userData', JSON.stringify(this.responseData));
      this.navCtrl.push(TabsPage);
      }
      else {
      this. presentToast("Give valid details");
      }
     }
     else{
     this. presentToast("Give valid details");
     }
    }, (err) => {
      // Error log
    });

  }

 presentToast(msg) {
    let toast = this.toastCtrl.create({
      message: msg,
      duration: 2000
    });
    toast.present();
  }

  login(){
    //Login page link
    this.navCtrl.push(LoginPage);
  }
}

Build iOS App
Following commands for executing Xcode build, watch the video tutorial you will understand more.
$ cordova add platform ios
$ ionic build ios

Build Android App
Open Android build using Android SDK>
cordova add platform android
ionic build android

Previous Part Video Tutorial
Ionic 3 and Angular 4: PHP Token Based Restful API User Authentication Login and Signup.



Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


6 comments:

  1. Why not lazy load the modules??

    ReplyDelete
  2. Thanks for the tutorials, I've been following along and they have helped me.

    Spotted a few typos in this article, just a quick heads up:

    home.ts - text says "encryptied"
    home.html - converTime()
    signup.ts - useerData
    signup.ts - this. presentToast() - x2
    ToastController section - text says "Implemeting"

    ReplyDelete
  3. this tutorial is very good for me .
    thanks for help

    ReplyDelete
  4. guys pls when i try to change from localhost to live server i get a POST"my_url" not found...

    ReplyDelete

Make in India