Learning Ionic 4 - Part 3

In this Part 3, we will focus on adding a component into page, working with ionic components, using SCSS, and rolling numbers to play games.

According to the mockup, we have an array of numbers which appears on pages: Games (Home), Play Games and History. Below is my Home page after finishing:

So creating a component presenting array of numbers for reusing in pages is a good idea. Let generate this component:

ionic g component components/NumbersPanel

It will generate files:
src/app/components/numbers-panel/numbers-panel.component.html
src/app/components/numbers-panel/numbers-panel.component.spec.ts
src/app/components/numbers-panel/numbers-panel.component.ts
src/app/components/numbers-panel/numbers-panel.component.scss

Modify numbers-panel.component.ts as below:

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-numbers-panel',
  templateUrl: './numbers-panel.component.html',
  styleUrls: ['./numbers-panel.component.scss']
})
export class NumbersPanelComponent implements OnInit {
  @Input() numbers: any = [];
  @Input() minval: number;
  @Input() maxval: number;

  constructor() {
  }

  ngOnInit() {
  }
}

Modify numbers-panel.component.html as below:

<div class="box-number-outline">
  <div class="box-number" *ngFor="let n of numbers">{{n}}</div>
</div>

Modify numbers-panel.component.scss as below:

.box-number-outline {
    text-align: center;
}
.box-number {
    width: 35px;
    height: 25px;
    background-color: purple;
    display: inline-block;
    border: solid 1px white;
    color: white;
    padding-top: 2px;
}

To allow this component used in pages, let create a file src\app\components\components.module.ts and add below code (this file can be created with the command ionic g module components/components, however I got error 'Tree type is not supported' - ng cli error so I created it manually):

import { NgModule } from '@angular/core';
import { NumbersPanelComponent } from './numbers-panel/numbers-panel.component';
import { IonicModule } from '@ionic/angular';
import { CommonModule } from '@angular/common';

@NgModule({
    declarations: [NumbersPanelComponent],
    imports: [CommonModule , IonicModule],
    exports: [NumbersPanelComponent]
})

export class ComponentsModule {}

OK, we already had our component, let use it in Home page by declaring some things in src\app\home\home.module.ts:

...
import { ComponentsModule } from '../components/components.module';

...

@NgModule({
  imports: [
    ...
    ComponentsModule,
    …

Below is new code of src\app\home\home.page.ts:

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../services/auth.service';
import { MyTablesService } from '../services/my-tables.service';
import { NavController, AlertController } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: './home.page.html',
  styleUrls: ['./home.page.scss'],
})
export class HomePage implements OnInit {
  games: any = [];
  history: any = [];

  constructor(
    private auth: AuthService,
    private tableService: MyTablesService,
    private navCtrl: NavController,
    private alertCtrl: AlertController
  ) { }

  ngOnInit() {
    this.auth.loggedin().then(isLoggedin => {
      if (!isLoggedin) {
        this.navCtrl.goRoot('/login');
      }
    });
  }

  ionViewWillEnter() {
    this.loadGames();
  }

  loadGames() {
    this.tableService.getItems('games').then((d) => {
      this.games = d;
      this.tableService.getItems('history').then((h) => {
        this.history = h;
        for(let game of this.games) {
          let gh = this.tableService.getItemByField(this.history, 'game_id', game.id);
          if(gh.length > 0) {
            gh.sort(this.tableService.sortDescByField('play_time'));
            game.last_play_time = new Date(gh[0].play_time).toLocaleString('vi-VN');
            game.last_result = JSON.parse(gh[0].result);
          }
        }
      });
    });
  }

  newGame() {
    this.navCtrl.goForward('/new-game');
  }

  playGame(game_id) {
    this.navCtrl.goForward(`/play-game/${game_id}`);
  }

  async deleteGame(game_id) {
    let alert = await this.alertCtrl.create({
      message: 'Do you want to delete this game?',
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel',
          handler: () => {
          }
        },
        {
          text: 'OK',
          handler: () => {
            this.tableService.setItem('games', game_id, 'deleted', true);
          }
        }
      ]
    });
    await alert.present();
  }
}

And new code of src\app\home\home.page.html:

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>Games</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-grid *ngFor="let game of games; let i = index;">
    <div [ngClass]="(i % 2 == 0) ? 'grid_odd' : 'grid_even'" *ngIf="!game.deleted">
        <ion-row>
          <ion-col size="11">
            <b>{{game.name}}</b>
          </ion-col>
          <ion-col size="1">
            <div class="play_icon">
              <ion-icon name="arrow-dropright-circle" style="zoom:1.2;" (click)=playGame(game.id)></ion-icon>
            </div>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col size="11">
            <div class="last_play_time" *ngIf="game.last_play_time">
              Last time: {{game.last_play_time}}
            </div>
            <div class="last_play_time" *ngIf="!game.last_play_time">
              Haven't been played yet. Let play.
            </div>
          </ion-col>
          <ion-col size="1">
            <div class="delete_icon">
              <ion-icon name="close-circle" style="zoom:1.2;" (click)=deleteGame(game.id)></ion-icon>
            </div>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col size="3">
            <div class="last_result" *ngIf="game.last_play_time">
                Last result:
            </div>
          </ion-col>
          <ion-col size="9">
            <app-numbers-panel [numbers]="game.last_result"></app-numbers-panel>
          </ion-col>
        </ion-row>
    </div>
  </ion-grid>
   
  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
    <ion-fab-button color="danger" (click)="newGame()">
      <ion-icon name="add"></ion-icon>
    </ion-fab-button>
  </ion-fab>
</ion-content>

Pay your attention on the code <app-numbers-panel [numbers]="game.last_result"></app-numbers-panel> : ==> it will show the NumbersPanel component and put the last result of game to the component for displaying.

On above html file, I also make alternate color for game rows, watch the code: [ngClass]="(i % 2 == 0) ? 'grid_odd' : 'grid_even'".

At this time, your Home page can list games but won't have any info about last playing result of games. So let generate PlayGame page and play, run the command:

ionic g page PlayGame

Modify src\app\play-game\play-game.page.ts as below:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { History,  MyTablesService } from '../services/my-tables.service';
import { delay } from 'q';

@Component({
  selector: 'app-play-game',
  templateUrl: './play-game.page.html',
  styleUrls: ['./play-game.page.scss'],
})
export class PlayGamePage implements OnInit {
  game: any;
  numbers: any = [];
  history: History;
  curTime: any;
  played: boolean = false;

  constructor(
    private activeRoute: ActivatedRoute,
    private tableService: MyTablesService) {
      this.curTime = new Date().toLocaleString('vi-VN');
      this.history = new History();
      let game_id = this.activeRoute.snapshot.paramMap.get('id');
      this.tableService.getItem('games', game_id).then((d) => {
        this.game = d;
        for(let i=0; i < this.game.numbers; i++) {
          this.numbers.push(-1);
        }
      });
  }

  ngOnInit() {
  }

  async startGame() {
    for(let i = 1; i < 3; i++) {
      for(let j = this.game.min_number; j <=  this.game.max_number; j++) {
        for(let k=0; k < this.game.numbers; k++) {
          this.numbers[k] = j;
        }
        await delay(200);
      }
    }
   
    for(let i=0; i < this.game.numbers; i++) {
      this.numbers[i] = Math.floor(Math.random() * this.game.max_number) + this.game.min_number;
    }

    this.saveHistory();
    this.played = true;
  }

  saveHistory() {
    this.history.play_time = new Date();
    this.history.game_id = this.game.id;
    this.history.result = JSON.stringify(this.numbers);
    this.tableService.addItem('history', this.history);
  }
}

Modify src\app\play-game\play-game.page.html as below:

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>Play Game</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <div *ngIf="game" style ="text-align: center; padding: 10px;">
    <b>{{game.name}}</b><br>
    <i>{{curTime}}</i><br>
  </div>
  <app-numbers-panel [numbers]="numbers"></app-numbers-panel>
  <div style ="text-align: center; padding: 10px;">
      <ion-button size="default" shape="round" color="secondary" (click)="startGame()" [disabled]="played">
        Start
      </ion-button>
  </div>
</ion-content>

In the function startGame(), I roll numbers from its min to max and delay 200ms when changing numbers. It is done 2 times and finished by randomizing numbers between its min & max. This is how I make the animation for rolling numbers -:)

Yeah! Now we can create games, play them and have a fun. See how I play a game:

After playing, we may need to see the history of playing games. It's time to code the History page.
Modify src\app\history\history.page.ts as below:

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../services/auth.service';
import { MyTablesService } from '../services/my-tables.service';
import { NavController } from '@ionic/angular';

@Component({
  selector: 'app-history',
  templateUrl: './history.page.html',
  styleUrls: ['./history.page.scss'],
})
export class HistoryPage implements OnInit {
  games: any = [];
  history: any = [];
  items: any = [];
  keywords: string = '';
  showSearchBar: boolean = true;

  constructor(
    private auth: AuthService,
    private tableService: MyTablesService,
    private navCtrl: NavController) { }

    ngOnInit() {
      this.auth.loggedin().then(isLoggedin => {
        if (!isLoggedin) {
          this.navCtrl.goRoot('/login');
        }
      });
    }
 
    ionViewWillEnter() {
      this.loadGames();
    }
 
    loadGames() {
      this.tableService.getItems('games').then((d) => {
        this.games = d;
        this.items = d;
        this.tableService.getItems('history').then((h) => {
          this.history = h;
          for(let game of this.games) {
            let gh = this.tableService.getItemByField(this.history, 'game_id', game.id);
            game.pcount = gh.length;
          }
        });
      });
    }

    searchGames() {
      this.items = this.games.filter((item) => {
        return item.name.toLowerCase().indexOf(this.keywords.toLowerCase()) > -1;
      });
    }

    toggleSarchBar() {
      this.showSearchBar = !this.showSearchBar;
    }

    showGameHistory(game_id) {
      this.navCtrl.goForward(`/game-history/${game_id}`);
    }
}

Modify src\app\history\history.page.html as below:

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>History</ion-title>
    <ion-buttons slot="end">
      <div class="button">
        <ion-icon name="search" style="zoom:1.2;" (click)="toggleSarchBar()"></ion-icon>
      </div>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <div *ngIf="showSearchBar" [hidden]="!showSearchBar">
      <ion-searchbar [(ngModel)]="keywords" (ionChange)="searchGames()" placeholder="Filter games" debounce="1000"></ion-searchbar>
  </div>
  <ion-grid *ngFor="let game of items; let i = index;">
    <div [ngClass]="(i % 2 == 0) ? 'grid_odd' : 'grid_even'" *ngIf="!game.deleted" (click)="showGameHistory(game.id)">
      <b>{{game.name}}</b><br/>
      <i>Created time: {{game.created_time}}</i><br/>
      Played: {{game.pcount}} times
    </div>
  </ion-grid>
</ion-content>

There is a tricky that I used to make the icon search can be clicked on the tool bar, that is wrapping the icon with <div class="button">. Without class="button", we cannot click on the icon. I don't know if it is normal behavior of Ionic 4 or a bug.

The search bar (ion-searchbar) also is set debounce="1000" to avoid filter immediately when keying. This debounce="1000" means if you stop keying in 1 second, the input value will be fired to ionChange event.

The last page is GameHistory page to show all playing history of a game. Let generate it:

ionic g page GameHistory

This page will use the NumbersPanel component, so let import ComponentsModule to its module file src\app\game-history\game-history.module.ts.

Basically, coding of this page is nearly same with other pages we done, except that it has new component for rating playing results. But I want to keep this for next article.

In next article, we may study how to make general CSS applied for all pages and code a rating component.

I hope that through Part 1 - Part 2 - Part 3, you can start to code your real application with Ionic 4. In case you want grab the source code, let check https://github.com/vnheros/GameLot on my GitHub.

See you. Any comment is welcome!

Learning Ionic 4 - Part 2

After long time I'm busy with the projects in my company, now I have a time to write this Part 2.
In Part 1, we finished the login & sign-up page. In this part, we will focus on how to create pages with main menu (side menu), how to deal with local storage (use local storage as DB with tables).

The main menu has 2 submenu Games menu & History menu. Because we will Home page for Games menu, so we jus generate new page called History for History menu:

ionic g page History

Next, we add a side menu. Open file src/app/app.component.ts and add menuPages:

export class AppComponent {
  public menuPages = [
    {
      title: 'Games',
      url: '/home',
      icon: 'logo-usd'
    },
    {
      title: 'History',
      url:'/history',
      icon: 'list'
    }
  ];
  constructor(
...

Then open file src/app/app.component.html and change as below:

<ion-app>
  <ion-split-pane>
    <ion-menu>
      <ion-header>
        <ion-toolbar>
          <ion-title>Menu</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content padding>
        <ion-list>
          <ion-menu-toggle *ngFor="let p of menuPages">
            <ion-item [routerLink]="p.url" [routerDirection]="'root'">
              <ion-icon slot="start" [name]="p.icon"></ion-icon>
              <ion-label>{{p.title}}</ion-label>
            </ion-item>
          </ion-menu-toggle>
        </ion-list>
      </ion-content>
    </ion-menu>
    <ion-router-outlet main></ion-router-outlet>
  </ion-split-pane>
</ion-app>

This change will add ion-split-pane into ion-app, and it will hold ion-menu (for menu content) and ion-router-outlet (for routing).
To display menu button on any page, let add ion-menu-button into its html. We need to add it into Home page & History page, for example src/app/home/home.page.html of Home page:

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>Games</ion-title>
  </ion-toolbar>
</ion-header>
…

OK, now we had the menu.
In Login page, we use a remote DB for authenticating, however we will use local storage to store the content of Games & History. In the real app, what is needed to store in centralized remote DB and what is needed to save on local storage depending on your strategy for your app. Here I want to show you a way to deal with the local storage like we work with tables. For beginning, let generate a MyTablesService service:

ionic g service services/MyTables

Open src/app/services/my-tables.service.ts and add the codes like the following:

import { Injectable } from '@angular/core';
import { Storage } from '@ionic/storage';
export class Game {
  public id: number;
  public name: string;
  public numbers: number;
  public min_number: number;
  public max_number: number;
  public created_time: Date;
  public deleted: boolean;
  public deleted_time: Date;
}
export class History {
  public id: number;
  public game_id: number;
  public play_time: Date;
  public result: string;
  public rating: number;
}
@Injectable({
  providedIn: 'root'
})
export class MyTablesService {
  table = 'table_';
  seedkey = 'seed_table';
  items: any = [];
  seed = 0;
  constructor(private storage: Storage) { }
  private getKeyFormat(id) {
    return this.table + id;
  }
  private _addItem(item) {
    item.id = this.seed;
    this.storage.set(this.getKeyFormat(item.id), JSON.stringify(item));
    this.seed++;
    this.storage.set(this.seedkey, this.seed);
  }
  private setTable(table_name: string) {
    this.table = table_name + '_';
    this.seedkey = 'seed_' + table_name;
  }
  getItems(table_name: string) {
    this.setTable(table_name);
    this.items = [];
    var promise = new Promise((resolve, reject) => {
      this.storage.forEach((v, k, i) => {
        let a = this.table;
        if (k.indexOf(a) > -1) {
          this.items.push(JSON.parse(v));
        }
      }).then(() => {
        resolve(this.items);
      });
    });
    return promise;
  }
  addItem(table_name: string, item: any) {
    this.setTable(table_name);
    this.storage.get(this.seedkey).then((value) => {
      if (value) this.seed = value;
      else this.seed = 1;
      this._addItem(item);
  }, (error) => {
      this.seed = 1;
      this._addItem(item);
    });
  }
  getItem(table_name: string, id: any) {
    this.setTable(table_name);
    var promise = new Promise((resolve, reject) => {
      this.storage.get(this.getKeyFormat(id)).then((value) => {
        resolve (JSON.parse(value));
      }, (error) => {
        reject (false);
      });
    });
    return promise;
  }
  getItemByField(data: any, field: string, value: string) {
    return data.filter(i => i[field] == value);
  }
  sortAscByField(field: string) {
    return function(a,b){
      if( a[field] > b[field]){
          return 1;
      }else if( a[field] < b[field] ){
          return -1;
      }
      return 0;
    }
  }
  sortDescByField(field: string) {
    return function(a,b){
      if( a[field] > b[field]){
          return -1;
      }else if( a[field] < b[field] ){
          return 1;
      }
      return 0;
    }
  }
}

Basically the local storage will store data in form of key & value, the MyTablesService service above will help to work with local storage as tables. In which, Game class and History class present for the structure of games table & history tables. We will see on later code.

Next, we will generate "New Game" page for adding new game:

ionic g page "New Game"

Here are codes for src/app/new-game/new-game.page.ts:

import { Component, OnInit } from '@angular/core';
import { Game,  MyTablesService } from '../services/my-tables.service';
import { NavController } from '@ionic/angular';
@Component({
  selector: 'app-new-game',
  templateUrl: './new-game.page.html',
  styleUrls: ['./new-game.page.scss'],
})
export class NewGamePage implements OnInit {
  game: Game;
  constructor(private gameService: GamesService, private navCtrl: NavController) {
    this.game = new Game();
    this.game.numbers = 5; //default value
  }
  ngOnInit() {
  }
  save() {
    this.game.created_time = new Date();
    this.gameService.addItem('games', this.game);
    this.navCtrl.goRoot('/home');
  }
}

And codes for src/app/new-game/new-game.page.html:

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>New Game</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content padding>
  <ion-list>
    <ion-item>
      <ion-label>Name:</ion-label>
      <ion-input [(ngModel)]="game.name" type="text"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>Quantity of numbers (1-10):</ion-label>
      <ion-select [(ngModel)]="game.numbers" value="5" okText="Ok" cancelText="Cancel">
          <ion-select-option value="1">1</ion-select-option>
          <ion-select-option value="2">2</ion-select-option>
          <ion-select-option value="3">3</ion-select-option>
          <ion-select-option value="4">4</ion-select-option>
          <ion-select-option value="5">5</ion-select-option>
          <ion-select-option value="6">6</ion-select-option>
          <ion-select-option value="7">7</ion-select-option>
          <ion-select-option value="8">8</ion-select-option>
          <ion-select-option value="9">9</ion-select-option>
          <ion-select-option value="10">10</ion-select-option>
      </ion-select>
    </ion-item>
    <ion-item>
      <ion-label>Random # between:</ion-label>
      <ion-input [(ngModel)]="game.min_number" type="number"></ion-input>
      <ion-label>and</ion-label>
      <ion-input [(ngModel)]="game.max_number" type="number"></ion-input>
    </ion-item>
  </ion-list>
  <ion-button expand="full" shape="round" color="secondary" (click)="save()">Save</ion-button>
</ion-content>

To invoke this New Game page, let add a FAB (floating action button) into the html of Home page:

...
<ion-fab vertical="bottom" horizontal="end" slot="fixed">
    <ion-fab-button color="danger" (click)="newGame()">
      <ion-icon name="add"></ion-icon>
    </ion-fab-button>
</ion-fab>
...

Add function newGame() into src/app/home/home.page.ts:

newGame() {
    this.navCtrl.goForward('/new-game');
}

Below are new screenshots of our app until now after login:

Through this part, we have known how to add a menu, work with local storage and create a new game. In next Part 3, we will code remain things & finish the app. See you!