Ionic 3 and Angular 4: JSON Parsing with Token Based Restful API
Wall Script
MailxEngine
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 platform add ios
$ ionic build ios

Build Android App
Open Android build using Android SDK>
cordovaplatform add 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


10 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
  5. Please continue to post such an informative blog. Therefore, people like us will be motivated in real life.
    I'm new in this area and I'm building my website, I'm working hard on this
    Your blogs are very useful here and especially to this blog, which provide this point information, I have received lots of help to read this blog post, please continue to share this kind of information.
    Thank you.

    ReplyDelete
  6. HI. Thanks for the video.

    I have a question.
    What will happend if for example whathever user get the localstorage from you computer or your device. Would he need just copy and paste and that's it? could he login normal whithout problem because he has the localstorage?

    How could it be in angular 4 and ionic 3 this problem?


    Is easy to get localstorage from mobile device?
    In the browser is easy to get localstorage. One of the things I can do is only create the same variables of the user in localstorage of my browser and that's it. It's something like the credentials in the notepad of your computer.

    ReplyDelete

Make in India