[ตอนที่ 6] Social App Workshop ด้วย ASP.NET Core 3 กับ Angular 9 การใช้ 3rd Party Component

Line
Facebook
Twitter
Google

สารบัญเนื้อหา

  1. รายชื่อ 3rd Party Components ที่จะใช้
  2. ติดตั้งและใช้งาน Alertifyjs
  3. สร้าง Services สำหรับ Alertifyjs เพื่อแสดงข้อความแจ้งเตือน
  4. ติดตั้งและใช้งาน Angular JWT เพื่อช่วยจัดการ Token ให้ดีขึ้น
  5. ติดตั้งและใช้งาน NGX Bootstrap เพื่อเพิ่มประสิทธิภาพ Bootstrap แบบเดิม ๆ
  6. ติดตั้งและใช้งาน Theme โดยใช้ Bootswatch

1. รายชื่อ 3rd Party Components ที่จะใช้

  • Alertifyjs
  • Angular JWT
  • NGX Bootstrap
  • Bootswatch

2. ติดตั้งและใช้งาน Alertifyjs

npm install alertifyjs

import css ของ Alertifyjs ใน Styles.css

@import '../node_modules/alertifyjs/build/css/alertify.min.css';
@import '../node_modules/alertifyjs/build/css/themes/bootstrap.min.css';

3. สร้าง Services สำหรับ Alertifyjs เพื่อแสดงข้อความแจ้งเตือน

สร้างไฟล์ typings.d.ts ภายใต้ src

declare module 'alertifyjs'

เพิ่ม config ใน tsconfig.json

"typeRoots": [
      "src/typings.d.ts"
]

สร้าง Service alertify.service.ts

import { Injectable } from '@angular/core';
import * as alertify from 'alertifyjs';

@Injectable({
  providedIn: 'root'
})
export class AlertifyService {

constructor() { }

  confirm(message: string, okCallback: () => any) {
    alertify.confirm(message, (e: any) => {
      if (e) {
        okCallback();
      } else {}
    });
  }

  success(message: string) {
    alertify.success(message);
  }

  error(message: string) {
    alertify.error(message);
  }

  warning(message: string) {
    alertify.warning(message);
  }

  message(message: string) {
    alertify.message(message);
  }

}

เรียกใช้ Alertify ทุกจุดที่ต้องการแสดงข้อความเตือน ตามประเภทที่ต้องการแจ้งเตือน

ทดลองรันและสังเกตุผลการแสดงข้อความเตือน

4. ติดตั้งและใช้งาน Angular JWT เพื่อช่วยจัดการ Token ให้ดีขึ้น

ติดตั้ง Angular JWT

npm install @auth0/angular-jwt@4.2.0

ทำการ import และเรียกใช้ เพื่อตรวจสอบว่า Token นั้นหมดอายุหรือยังใน Login Service

สร้างตัวแปร decodeToken ใน Auth.service.ts

decodeToken: any;

Decode Token ที่มีอยู่ใน app.component.ts

แสดงชื่อ User ที่ Login ใน nav.component.html

อย่าลืมทำ injection authService ใน constructor ก่อนนะ

constructor(public authService: AuthService) { }

5. ติดตั้งและใช้งาน NGX Bootstrap เพื่อเพิ่มประสิทธิภาพ Bootstrap แบบเดิม ๆ

ติดตั้ง NGX Bootstrap

npm install ngx-bootstrap

หรือ (แนะนำให้ใช้คำสั่งนี้)

ng add ngx-bootstrap

ทำการ Import Module

ปรับปรุงโค้ดเมนู nav.component.html

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
  <div class="container">
    <a class="navbar-brand" href="#">Social App</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
      aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarsExampleDefault">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Lists</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Messages</a>
        </li>
        <li *ngIf="!loggedIn()" class="nav-item">
          <a class="nav-link" href="#">Register</a>
        </li>
      </ul>

      <div *ngIf="loggedIn()" class="dropdown" dropdown>
        <a class="dropdown-toggle text-light" dropdownToggle>
          Welcome {{authService.decodeToken?.unique_name | titlecase}}
        </a>

        <div class="dropdown-menu" *dropdownMenu>
          <a href="#" class="dropdown-item"><i class="fa fa-user"></i> Edit Profile</a>
          <div class="dropdown-divider"></div>
          <a (click)="logout()" class="dropdown-item"><i class="fa fa-sign-out"></i> Logout</a>
        </div>
      </div>

    </div>
  </div>
</nav>

เพิ่ม css ใน nav.component.css

.dropdown-toggle, .dropdown-item {
    cursor: pointer;
}

ทดสอบรัน

6. ติดตั้งและใช้งาน Theme โดยใช้ Bootswatch

ติดตั้ง Bootswatch

npm install bootswatch

กำหนด Theme ใน Styles.css

@import '../node_modules/bootswatch/dist/united/bootstrap.min.css';

ทดสอบรัน

โปรดติดตามตอนต่อไป…

Line
Facebook
Twitter
Google
[ตอนที่ 16] Social App Workshop ด้วย ASP.NET Core 3 กับ Angular 9 การทำ Sorting
[ตอนที่ 15] Social App Workshop ด้วย ASP.NET Core 3 กับ Angular 9 การทำ Filtering
[ตอนที่ 14] Social App Workshop ด้วย ASP.NET Core 3 กับ Angular 9 การใช้งาน Paging
No Preview
[ตอนที่ 13] Social App Workshop ด้วย ASP.NET Core 3 กับ Angular 9 การกำหนดรูปแบบการแสดงผลวัน-เวลา
เตรียม Atom สำหรับ React Native #3
เตรียม Visual Studio Code สำหรับ React Native #2
การติดตั้ง React Native บน macOs #1
การกำหนดค่า TF_MIN_GPU_MULTIPROCESSOR_COUNT เพื่อให้ TensorFlow ใช้งาน GPU ทุกตัว
ติดตั้ง Ubuntu 17.04 ใช้งานร่วมกับ Windows 10
การติดตั้ง TensorFlow & Caffe บน Ubuntu 16.04