[Review] รีวิว 3BB GIGATV กล่อง Android TV ดู TV Online

กล่อง 3BB Android TV เราสามารถใช้ดู Live TV ได้ และเท่าที่ผมลองเลื่อน ๆ ดูนั้น เราสามารถดู Live TV ได้กว่า 60 ช่อง ยังมีผังรายการ Live TV ให้เราทราบว่าแต่ละช่องมีรายการอะไรบ้างเวลาไหน และถ้าช่องไหนมีรูปเครื่องหมายนาฬิการเวลา เราจะสามารถดูรายการย้อนหลังในช่องนั้น ๆ ได้ด้วยครับ

[Review] รีวิว 3BB GIGATV กล่อง Android TV จาก 3BB

รีวิวกล่อง 3BB TV Box เป็นกล่อง Android TV ที่เป็น Android Version 10 และมี Chromecast ในตัวมาแล้ว

Chromecast และ Android TV คืออะไรก่อน

ก็จะพูดถึงกันสั้น ๆ ตรงนี้, ช่วงก่อนหน้านี้ Google ได้ทำอุปกรณ์ที่ชื่อว่า Chromecast โดยเจ้าอุปกรณ์ตัวนี้ใช้ต่อเข้ากับ TV ผ่านช่องสัญญา HDMI โดยจะทำให้ TV ธรรมดาของเราสามารถรับคำสั่งมือถือของเราได้ เช่น แชร์ภาพหน้าจอมือถือ, สั่งให้เล่น Video ผ่าน Youtube หรือเล่นเกมได้ โดยการเล่น Youtube กับเจ้าตัว Chromecast นั้นมือถือเราไม่จำเป็นต้องเปิด App Youtube ทิ้งไว้ เพราะการทำงานของ Chromecast คือรับคำสั่งจากมือถือให้เล่น Video จากนั้นตัว Chromecast จะทำการเปิด Video โดยไม่ได้ใช้การส่งภาพจากมือถือของเรา ทำให้เราสามารถใช้งานโปรแกรมอื่น ๆ ในขนาดที่ใช้งาน Chromecast อยู่

ส่วน Android TV มาหลังจาก Chromecast สักพักใหญ่ ซึ่งเจ้า Android TV เขาประกาศตัวไว้เป็น OS (Operating System) สำหรับ TV (Television) และมีเจ้า Chromecast อยู่ข้างในตัว Android TV อีกที โดยตัว Android TV นั้นก็เหมือนกับที่อยู่ในมือถือ Android ของเรา เราจะต้องทำการผูกบัญชี Google เข้ากับ Android TV และก็สามารถลงแอพต่าง ๆ ได้ใน Google Play ลงมายัง Android TV ได้อีกด้วย
***แต่ก็ยังไม่เยอะเท่าบนมือถือนะครับเท่าที่ลองทดสอบดู คิดว่าตัวแอพก็ต้องทำให้รองรับเฉพาะ Android TV ด้วย

โดยปกติแล้วไม่ชอบ TV ที่เป็น Smart หรือมี OS อะไรมาในตัวเพราะส่วนตัวคิดว่าถ้าระบบนั้นพัง TV ก็จะดูไม่ได้ไปด้วย และ TV ที่ไม่ใช่ Smart ส่วนใหญ่ก็จะราคาถูกกว่า Smart ด้วย ***เป็นความคิดเห็นส่วนตัวนะครับ ส่วนกล่องที่ได้มาเป็นของทาง 3BB ซึ่งมีเจ้าหน้าที่โทรติดต่อมาว่าต้องการปรับ Package โดยใช้กล่องหรือไหม เราเองยังไม่แน่ใจครับ แต่เพราะก็กำลังมองหาพวก Mi Box หรือ Chromecast มาใช้งานอยู่แล้วเลยตอบตกลงดู ก็เลยได้มาเขียนรีวืวตอนนี้ เพื่อจะเป็นประโยชน์กับใครที่กำลังอยากได้ข้อมูลว่ากล่องนี้มันเป็นอะไรยังไงกันแน่ครับ ไปดูกันเลย

[Windows] การใช้งาน WSL 2 (Windows Subsystem for Linux 2)

การใช้งาน Windows Subsystem for Linux 2 เราสามารถใช้งานได้ผ่าน Command Line
เมื่อเราต้องการดูรายการ Linux ที่ลงไว้แล้วสามารถใช้คำสั่ง wsl --list --verbose

[Windows] ติดตั้ง WSL 2 (Windows Subsystem for Linux 2) และการใช้งาน WSL 2

การติดตั้ง WSL 2 (Windows Subsystem for Linux 2)
ขั้นตอนการติดตั้ง WSL 2
1. การ Update Windows เป็น 2004
2. เปิดใช้ Windows Subsystem for Linux Feature
3. Set เป็น Windows Subsystem for Linux 2

การดูว่า Windows ของเราเป็น 2004 หรือยังให้ไปที่ปุ่มคลิกที่ปุ่ม Start แล้วค้นหาคำว่า winver แล้วคลิกดูรายละเอียด

[React Native] Redux

Redux

- ใช้แชร์ State แบบ Global ให้ทุก Component เข้าถึงได้
- Component ต้องเรียกใช้ Action ในการแก้ไขข้อมูลใน State Global โดยตรง
- ใช้ Logger ในการ Track ได้จะเห็น prev state, action, next state

npm install redux redux-logger redux-thunk react-redux

redux react-redux : ลง redux และใช้ react-redux
redux-logger : ใช้ track การเปลี่ยนแปลงข้อมูล
redux-thunk : เพื่อให้ใช้งาน asynchronous ได้

Flow

graph LR; a([State])--defines-->b([UI]); b([UI])--triggers-->c([Actions]); c([Actions])--sent to-->d([Reducer]); d([Reducer])--updates-->e([Store]); e([Store])--contains-->a([State]);

[Blogger] ลองเปลี่ยนมาใช้ highlight.js ทำ Syntax Highlight Code

เนื่องจากครั้งก่อนใช้งาน Syntax Highlighter ซึ้งเป็น Version 3 และไม่มีภาษาใหม่ ๆ ให้ใช้งานตอนนี้ก็เลยต้องหาตัวใหม่มาใช้งาน
เจอ highlight.js น่าสดใจมากและคนใช้เยอะมาก เลยจับมาลงสักหน่อย

และเหมือนเดิมเราต้องไปทำการเพิ่ม Code ที่ Template ก่อนเอา Code มาจาก https://highlightjs.org/usage/
มองหาส่วนของ CDN Hosted เราจะใช้ของ Cloudflare https://cdnjs.com/libraries/highlight.js
เลือกภาษาและ Theme ได้ที่ https://highlightjs.org/static/demo/

<!-- highlight.js -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.3.2/styles/default.min.css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.3.2/highlight.min.js"></script>
      
<!-- and it's easy to individually load additional languages -->
<script charset="UTF-8" src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.3.2/languages/bash.min.js"></script>
<script charset="UTF-8" src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.3.2/languages/css.min.js"></script>
<script charset="UTF-8" src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.3.2/languages/javascript.min.js"></script>
<script charset="UTF-8" src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.3.2/languages/sql.min.js"></script>
<script charset="UTF-8" src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.3.2/languages/typescript.min.js"></script>
<script charset="UTF-8" src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.3.2/languages/xml.min.js"></script>

การใช้งานก็ใส่ Code ไปในบนความของเรา

<pre><code class="bash"> ... </code></pre>

[MySQL] Config Basic

การ Config ไฟล์ cnf ของ MySQL Server

เราใช้ MySQL Server 5.7 ในหัวข้อนี้พูดถึงการใช้ไฟล์ cnf ในการ Config ค่าต่าง ๆ
ถ้าอยากรู้ Version ให้พิมพ์ mysqld --version ที่ terminal

ไฟล์ conf จะเก็บไว์ที่ path /etc/mysql/my.cnf, /etc/mysql/mysql.cnf
- /etc/mysql/my.cnf
- /etc/mysql/mysql.cnf

และอีก 2 ไฟล์ที่
- /etc/mysql/conf.d/mysql.cnf
- /etc/mysql/mysql.conf.d/mysql.cnf

มาเปิดดู 2 ไฟล์แรกก่อน

#
# The MySQL database server configuration file.
#
# You can copy this to one of:
# - "/etc/mysql/my.cnf" to set global options,
# - "~/.my.cnf" to set user-specific options.
#
# One can use all long options that the program supports.
# Run program with --help to get a list of available options and with
# --print-defaults to see which it would actually understand and use.
#
# For explanations see
# http://dev.mysql.com/doc/mysql/en/server-system-variables.html

#
# * IMPORTANT: Additional settings that can override those from this file!
#   The files must end with '.cnf', otherwise they'll be ignored.
#

!includedir /etc/mysql/conf.d/mysql.conf
!includedir /etc/mysql/mysql.conf.d/

[Ubuntu] & [Linux Container]NFS Kernel Server ต้น ๆ กับ การ Mount NFS ใน Container

[Ubuntu] NFS Kernel Server

---

คำสั่งที่ใช้ติดตั้ง NFS Server

sudo apt install nfs-kernel-server

sudo mkdir -p /mnt/nfs_share
sudo chown -R nobody:nogroup /mnt/nfs_share
sudo chmod 777 /mnt/nfs_share

sudo cp /etc/exports /etc/exports.bak
sudo nano /etc/exports

[Ubuntu] การติดตั้ง OJS3 ใน Ubuntu 18.04

สรุปการติดตั้ง OJS3 (Open Conference System 3) ให้ทำการติดตั้ง Apache2, PHP7 และ MySQL ก่อน

การติดตั้ง Apache2 และ PHP7 เราสามารถติดตั้ง PHP7 ได้เลยโดยไม่ต้องใช้คำสั่งติดตั้ง Apache2 เพราะ PHP7 ต้องการ Apache2 อยู่แล้ว
และทำการติดตั้ง MySQL เสร็จแล้วก็ทำการตั้งค่า OJS3

 
apt install php php-mbstring php-xml php-mysql
apt install mysql-server

# ติดตั้งใช้งานครั้งแรก
mysql_secure_installation

[MySQL] Command Line Basic

Login to MySQL

mysql -u [username] -p

MySQL User Management

DESC mysql.user:
SELECT host, user FROM mysql.user;

CREATE USER 'username'@'hostname' IDENTIFIED BY 'password';
-- Hostname % or Localhost

DROP USER 'username'@'hostname';

ERROR 1819 (HY000)
Your password does not satisfy the current policy requirements

SHOW VARIABLES LIKE 'validate_%';
SET GLOBAL validate_password_policy=LOW;

---

Database Management

-- List all DATABASE 
SHOW DATABASES;

-- List database with DEFAULT_CHARACTER_SET_NAME and DEFAULT_COLLATION_NAME
SELECT * FROM INFORMATION_SCHEMA.SCHEMATA;

-- Create DATABASE and set CHARACTER_SET and COLLATION_NAME
CREATE DATABASE db_name [DEFAULT] CHARACTER SET utf8 [DEFAULT] COLLATE utf8_general_ci;

-- Change CHARACTER_SET and COLLATION_NAME
ALTER DATABASE db_name [DEFAULT] CHARACTER SET utf8 [DEFAULT] COLLATE utf8_general_ci;

-- Grant user to database
GRANT ALL PRIVILEGES ON *.* TO 'username'@'host';
GRANT ALL PRIVILEGES ON db_name.* TO 'username'@'host';
GRANT ALL|SELECT|INSERT|UPDATE|DELETE ON db_name.* TO 'username'@'host';
FLUSH PRIVILEGES;

-- Show user grant;
SHOW GRANTS FOR 'username'@'hostname';

-- Revoke
REVOKE ALL PRIVILEGES ON *.* TO 'username'@'host';
REVOKE ALL PRIVILEGES ON db_name.* TO 'username'@'host';
REVOKE ALL|SELECT|INSERT|UPDATE|DELETE ON db_name.* TO 'username'@'host';

Table Management

-- Create table and set CHARACTER_SET and COLLATION_NAME
CREATE TABLE tbl_name (column_list) [DEFAULT] CHARACTER SET charset_name COLLATE collation_name;

-- Change table and set CHARACTER_SET and COLLATION_NAME
ALTER TABLE tbl_name (column_list) [DEFAULT] CHARACTER SET charset_name COLLATE collation_name;

-- Temp
SHOW VARIABLES LIKE 'collation%';

Quit

QUIT;

---

https://dev.mysql.com/doc/refman/8.0/en/show-grants.html
https://dev.mysql.com/doc/refman/8.0/en/show-collation.html
https://dev.mysql.com/doc/refman/8.0/en/charset-database.html
https://dev.mysql.com/doc/refman/8.0/en/charset-table.html
https://stackoverflow.com/questions/5906585/how-to-change-the-character-set-and-collation-throughout-a-database

[Ubuntu] การติดตั้ง และ การใช้งาน Cron Jobs

การติดตั้ง Cron ก่อนอื่นให้เราเช็คดูก่อนว่ามีการติดตั้งลงไปที่เครื่องแล้วหรือยัง

dpkg -l cron

# cron installed

Desired=Unknown/Install/Remove/Purge/Hold
| Status=Not/Inst/Conf-files/Unpacked/halF-conf/Half-inst/trig-aWait/Trig-pend
|/ Err?=(none)/Reinst-required (Status,Err: uppercase=bad)
||/ Name           Version               Architecture    Description
+++-===============-====================-===============-==============================
ii  cron            3.0pl1-128.1ubuntu1  amd64           process scheduling daemon

เมื่อพบว่ายังไม่ได้ทำการติดตั้งให้เราทำการ Update Package ก่อนทำการติดตั้ง และเมื่อทำการติดตั้งแล้วให้เช็คว่า Cron ทำงาน

apt update
apt install cron

systemctl status cron

[Github] Automate - Build และ Deploy Angular JS ไปยัง Firebase

สิ่งที่เราต้องเตรียมคือ
- Account Github
- Account Firebase

ทำการ Push Project ของเราที่เป็น Angular ขึ้นไปยัง Github จากนั้นเปิดที่หน้าเว็บของ Github เข้าไปยัง Repository ของเรา สังเกตุแถบด้านบนจะเห็น แถบ Actions ให้คลิกเข้าไปแล้วเลือก set up a workflow yourself เราจะเห็นไฟล์ main.yml

[Travis-CI] Automate - Build และ Deploy Angular JS ไปยัง Firebase

เราต้องทำอะไรก่อนมาถึงตรงนี้
- มี Account Github
- มี Account Travis CI
- มี Account Firebase

สร้าง Account Github และ Travis CI และทำการเชื่อมให้ Travis CI เห็น Repo ใน Github
สร้าง Firebase Project ใน Firebase Console เพื่อใช้ทำการ Initial Firebase อีกที
สร้าง Angular Project แล้วทำการ Initial Firebase ใน Angular Project

เราจะต้องใช้งานไฟล์ .firebaserc และไฟล์ firebase.json
ไฟล์ .firebaserc เก็บชื่อ Project ที่เราจะทำการ Deploy
ไฟล์ firebase.json เก็บข้อมูลการ Deploy เราต้องแก้ไขไฟล์ส่วนที่เป็น public

ตัวอย่างไฟล์ .firebaserc ตรง default ให้เราใส่ชื่อ project เข้าไปผมใช้ project ชื่อ angular-travis-ci

{
  "projects": {
    "default": "angular-travis-ci"
  }
}

ตัวอย่างไฟล์ firebase.json ตรง public ใส่ Path ของไฟล์ที่เก็บ Build แล้วของผม Project ชื่อ travis-ci
เวลา build เสร็จแล้วจะอยู่ใน Folder ชื่อ dist/travis-ci

{
  "hosting": {
    "public": "dist/travis-ci",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

[Review] การต่อ Notebook ออก Port VGA 2 จอ และมีจอ Notebook อีกรวมเป็น 3 จอ

มันเป็นปัญหาสำหรับผมมานานในการใช้งาน Notebook แล้วพยายามต่อออกจอมากกว่า 1 จอเนื่องจาก Port ที่มีมามีแค่ HDMI 1 Port ไม่สามารถต่อมากกว่านั้นได้ก็เลยจะต่อเพิ่มได้แค่ 1 จอ ผมเลยทำการซื้อ USB 3.0 แปลงเป็น VGA เพื่อต่อได้อีก 1 จอ กลายเป็นสอง ปัญหาคือ อะไร ละงั้น ?

ปัญหาคือ
1. ผมต้องเสียบ HDMI กับ USB 3.0 ซึ่งส่วนตัวไม่อยากทำแบบนั้น อยากลดลงเหลือแค่ HDMI หรือ USB อย่างไดอย่างหนึ่ง
2. ช่องต่อที่เป็น USB 3.0 มีแค่ 1 ช่องเท่านั้น และ USB 3.0 แปลงเป็น VGA มีความเพี้ยนของภาพทำให้รู้สึกไม่ดีเวลาใช้งาน

ผมจึงเริ่มตามหา USB 3.0 แปลงเป็น VGA แบบชัดขึ้น และก็เลยได้เจอกับตัว G-Link ครับลองสั่งมาเลย 2 ตัว เพื่อจะเปลี่ยนแทนตัว HDMI (เดิม HDMI ของผมเป็น HDMI แปลงเป็น VGA เหมือนกัน) และเจอว่ามี USB 3.0 Hub เลยสั่งมาด้วย เพราะจะต่อพวงกันไปเลย และผลที่ได้ก็น่าพอใจมากครับ คิดว่าถ้าจะเพิ่มอีกจอน่าจะไม่มีปัญหา แต่ตอนนี้ยังไม่มีจอ ก็พักก่อนหาเรื่องเสียเงินไปเรื่อย ๆ จริง ๆ

[Linux Container] - สร้าง Network และ Storage ไว้ก่อนแล้วค่อยมา Init

การใช้งาน Linux Container สักพักหนึ่งก็พบความไม่สะดวกในการใช้งาน Network กับ Storage ตอนที่ทำการ Init
Network ปกติจะ Init เป็น 10.x.x.x ทำให้ชนกับ Network ภายใน และ Storage ก็เพิ่มได้ยากเพราะหาไม่เจอ เลยทำการสร้างไว้ก่อน

สร้าง Network -> https://im-jumbo.blogspot.com/2019/04/how-to-use-lxc-network.html
สร้าง Storage -> https://im-jumbo.blogspot.com/2019/08/linux-container-storage-pool-lxc-storage.html

เมื่อทำการสร้าง Network กับ Storage เสร็จแล้วก็ทำการ Init ตามปกติ

Welcome to Ubuntu 18.04.4 LTS (GNU/Linux 4.15.0-76-generic x86_64)

 * Documentation:  https://help.ubuntu.com
 * Management:     https://landscape.canonical.com
 * Support:        https://ubuntu.com/advantage

  System information as of Mon Feb  3 14:55:06 +07 2020

  System load:  0.0               Users logged in:       0
  Usage of /:   7.8% of 77.26GB   IP address for ens192: 10.1.4.50
  Memory usage: 3%                IP address for ens224: 192.168.0.115
  Swap usage:   0%                IP address for lxdbr1: 172.168.0.1
  Processes:    202

 * Overheard at KubeCon: "microk8s.status just blew my mind".

     https://microk8s.io/docs/commands#microk8s.status

 * Canonical Livepatch is available for installation.
   - Reduce system reboots and improve kernel security. Activate at:
     https://ubuntu.com/livepatch

0 packages can be updated.
0 updates are security updates.

Failed to connect to https://changelogs.ubuntu.com/meta-release-lts. 
Check your Internet connection or proxy settings


Last login: Mon Feb  3 14:44:48 2020 from 192.168.0.251
sarankon@conf:~$ lxd init
Would you like to use LXD clustering? (yes/no) [default=no]:
Do you want to configure a new storage pool? (yes/no) [default=yes]: no
Would you like to connect to a MAAS server? (yes/no) [default=no]:
Would you like to create a new local network bridge? (yes/no) [default=yes]: no
Would you like to configure LXD to use an existing bridge or host interface? (yes/no) [default=no]: yes
Name of the existing bridge or host interface: lxdbr1
Would you like LXD to be available over the network? (yes/no) [default=no]:
Would you like stale cached images to be updated automatically? (yes/no) [default=yes]
Would you like a YAML "lxd init" preseed to be printed? (yes/no) [default=no]:
sarankon@conf:~$

Convert PFX File To PEM File By OpenSSL

การใช้ Cert กับ Apache2 ผมยังใช้งานกับไฟล์ PEM อยู่ซึกปกติแล้ว Cert ที่ได้มาจะเป็นไฟล์ PFX ผมเลยต้องทำการ Convert อีกครั้งก่อนใช้งานจริง
ขอบคุณข้อมูลจากเว็บ: https://www.xolphin.com/

# สร้างไฟล์ PEM ที่รวมทั้ง Private Key และ Certificate จากไฟล์ PFX
openssl pkcs12 -in filename.pfx -out cert.pem -nodes

# สร้างไฟล์ Private Key จากไฟล์ PFX
openssl pkcs12 -in filename.pfx -nocerts -out key.pem

# สร้างไฟล์ Certificate จากไฟล์ PFX
openssl pkcs12 -in filename.pfx -clcerts -nokeys -out cert.pem

# ลบรหัสผ่านออกจาก Private Key
openssl rsa -in key.pem -out server.key

Angular 8 - การ Build เพื่อนำไปใช้งาน

ข้อมูลเพิ่มเติมอ่านได้จาก https://angular.io/start/deployment

การใช้งาน Angular เราต้องทำการ Build Project ของเราก่อนด้วยคำสั่ง ng build เสร็จแล้วจะได้ไฟล์พร้อมใช้งานอยู่ที่ Folder dist
ให้เราทำการ Copy ไฟล์ข้างในที่อยู่ในระดับเดียวกัน index.html ลงไป ไปว่างไว้ที่ Root Web ก็สามารถใช้งานได้

 
ng build --prod
ng build --prod --base-href=/project-name/

Angular 8 - การสร้าง Form สำหรับรับข้อมูล

การสร้าง Form เราจะต้องทำการ Import Module ชื่อ ReactiveFormsModule ในไฟล์ app.module.ts ก่อนถึงจะเรียกใช้งานใน Component อื่นๆ ได้

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { ReactiveFormsModule } from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { RouterModule } from '@angular/router';

import { TopBarComponent } from './top-bar/top-bar.component';
import { ProductListComponent } from './product-list/product-list.component';
import { ProductAlertsComponent } from './product-alerts/product-alerts.component';
import { ProductDetailComponent } from './product-detail/product-detail.component';
import { CartComponent } from './cart/cart.component';

@NgModule({
  declarations: [
    AppComponent,
    TopBarComponent,
    ProductListComponent,
    ProductAlertsComponent,
    ProductDetailComponent,
    CartComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    AppRoutingModule,
    ReactiveFormsModule,
    RouterModule.forRoot([
      { path: '', component: ProductListComponent },
      { path: 'product/:productId', component: ProductDetailComponent },
      { path: 'cart', component: CartComponent}
    ]),
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

Angular 8 - เรียกข้อมูลแบบ JSON ผ่าน HTTPClient

เตรียมข้อมูล JSON ชื่อ shipping.json ใน Folder assets แล้วทดสอบเรียกผ่าน URL : "http://localhost:4200/assets/shipping.json"

[
    {
        "type": "Overnight",
        "price": "25.99"
    },{
        "type": "2-Day",
        "price": "9.99"
    },{
        "type": "Postal",
        "price": "2.99"
    }
]

Angular 8 - บริการเก็บข้อมูลด้วย Service

การสร้าง Service ที่ใช้ในการจัดการข้อมูลต่าง ๆ ใน App ของเราใช้ Tutorial Guide จาก https://angular.io/start/data
ใน App ของเรานั้นจำเป็นต้องมี Service เอาไว้ใช้งาน เราสามารถใช้ในการจัดการข้อมูล และดึงข้อมูลจากแหล่งข้อมูลอื่น ๆ ผ่านทาง Service ได้ สำคัญมาก

สร้าง Service ชื่อ CartService ไว้เก็บข้อมูลการสั่งซื้อมือถือ ให้ใช้คำสั่ง "ng generate service cart" เสร็จแล้วเราจะได้ไฟล์มา 2 ไฟล์
1. "src/app/cart.service.spec.ts" และ 2. "src/app/cart.service.ts" เราจะเข้ามาแก้ไฟล์ที่ 2. นี่กัน

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

@Injectable({
  providedIn: 'root'
})

export class CartService {

  constructor() { }
}

ให้เราเพิ่ม Function 3 ตัวคือ addItem() ใช้เพิ่ม Item ลงตะกร้า , getItems() เรียกดูค่า Item ในตะกร้า และ clearItems() ลบ Item ออกจากตะกร้าทั้งหมด

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

@Injectable({
  providedIn: 'root'
})

export class CartService {

  items = [];

  addItem(product) {
    this.items.push(product);
  }

  getItems() {
    return this.items;
  }

  clearItems() {
    this.items = [];
  }

  constructor() { }

}

Angular 8 - แบ่ง Component เป็นหน้า ๆ กับ Router Module

ความเดิมจากตอนที่แล้วเราได้ทำการ Follow Guide หัวข้อ Your First App เสร็จแล้ว https://angular.io/start
ให้หัวข้อต่อมาเรื่องของ Routing https://angular.io/start/routing จะเริ่มสร้างหน้าย่อ ๆ กัน

ใช้ Code ต่อจากตอนที่แล้วเราจะทำการเพิ่ม RouterModule อย่างเดียวแล้วทำความเข้าใจกันก่อนว่ามันเป็นส่วนไหน
ให้เราทำการ Import Module ชื่อ "RouterModule" และทำการ Import และใส่ข้อมูล Path ด้วยใน "RouterModule.forRoot([])"
ส่วนของ path ใช่เป็น ' ' หมายถึง Root และแสดง Component ProductListComponent

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { RouterModule } from '@angular/router';

import { TopBarComponent } from './top-bar/top-bar.component';
import { ProductListComponent } from './product-list/product-list.component';
import { ProductAlertsComponent } from './product-alerts/product-alerts.component';


@NgModule({
  declarations: [
    AppComponent,
    TopBarComponent,
    ProductListComponent,
    ProductAlertsComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    RouterModule.forRoot([
      { path: '', component: ProductListComponent }
    ]),
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

<app-top-bar></app-top-bar>
<app-product-list></app-product-list>

<router-outlet></router-outlet>

Angular 8 - สร้าง Component ใน Component ไปอีก

สร้างปุ่ม Notify Me เป็นแล้วเรียกใช้ใน Product List โดยจะสร้างเป็น Component และมีการรับค่าด้วย

เริ่มด้วยการสร้าง Component ชื่อ product-alerts อย่าลืมใช้คำสั่ง ng generate component product-alerts
แล้วเพิ่มปุ่ม Notify Me ใน Template

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

@Component({
  selector: 'app-product-alerts',
  templateUrl: './product-alerts.component.html',
  styleUrls: ['./product-alerts.component.css']
})
export class ProductAlertsComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

<p>
    <button>Notify Me</button>
</p>

Angular 8 - สร้าง Event กับ Component และ เงื่อนไขในการแสดงผล

หัวข้อที่แล้วเราได้รู้จักกับ *ngFor, Interpolation {{ }} และ Property Binding [ ] ไปแล้ว
ในส่วนที่เราจะมาทำความรู้จักกับอีก 2 ตัวคือ *ngIf และ Event Binding ( ) กัน

พาทนี้ยังอยู่กับ https://angular.io/start ครับ โดยจากภาพแล้วเราจะทำการแสดง Description ออกมา
ส่วน Product ไหนไม่มี Description เราก็จะไม่แสดง