# All material for Install Angular 7,10 for KTB 📦

## Git Project
Dev Enviorment : - https://gitlab.dev.com/ktb/frontend

> แก้ไข host เปิดไฟล์ที่ path ต่อไปนี้

path : C:\Windows\System32\drivers\etc
file : hosts     (แก้ไฟล์นี้)

> เปิดด้วย run as administrator แล้วเพิ่ม

##KTB
#172.13.33.4 gitlab.dev.com
172.13.33.6 gitlab.dev.com

> and save แล้วทดสอบเข้า https://gitlab.dev.com/

ขึ้นตอน Gen ssh key (ถ้ามีแล้วให้ข้าม)

ssh-keygen -t rsa -b 4096 -C "[e-mail]"

## Start Dev Enviorment
หลังจาก git clone

cd [เข้าไปที่ project]

ng serve

## Disabled SSL CERTIFICATE CHECK
ใช้คำสั่งต่อไปนี้

git config --global http.sslVerify false

## เปลี่ยน Remote

git remote add origin [e-mail]:frontend/fas.git

## แก้ปัญหา Remote ชื่อซ้ำแต่ คนละ Server
ไปที่ Folder .ssh ใช้ editor เปิดไฟล์ know_hosts


ลบ gitlab.dev.com, 172.13.33.4 ที่เป็น ip เดิมออก


แล้วทดลอง ใช้คำสั่งของพวก git ใหม่ว่ายังติด error หรือไม่

## Design

### invisionapp :
[Preview - Optimist](https://projects.invisionapp.com/share/V3VRWLUNF52#/screens/403525013)
[[Project KTB] - Optimist](https://projects.invisionapp.com/d/main/default/#/projects/prototypes/19297596) จะต้อง login ด้วย
> User : [e-mail]
> Pass : inet@ktb
> ***Login ครั้งแรกเข้าเมนู Solo

[Preview - PPS](https://projects.invisionapp.com/d/main#/projects/prototypes/19297795)
[[Project KTB] - PPS](https://projects.invisionapp.com/d/main#/projects/prototypes/19297795) จะต้อง login ด้วย

> User : [e-mail]
> Pass : inet@ktb
> ***Login ครั้งแรกเข้าเมนู Solo

### Zeplin(ไม่ใช้แล้ว) :
> User : [e-mail]
> Pass : inet@ktb
> >
> Download
> https://support.zeplin.io/en/articles/244698-downloading-mac-and-windows-apps

## Set Evniorment Postman
### เพื่อใช้งาน api

1) ไปที่ Manage Enviorments (ที่เป็นรูปเฟือง )
2) กดที่ปุ่ม Add 
3) ทำการเซ็ตดังรูป

## Prepare Enviorment 🏋🏻‍♂️

- node (npm) https://nodejs.org/dist/v12.14.1/node-v12.14.1-x64.msi (stable)
- ng cli ตามขั้นตอนที่ 1.

## Installation 🦾

1) ลง angular/cli (angular 7)

npm install -g @angular/cli@7.3.8
ng --version

> กรณีที่ลงเวอร์ชั่นล่าสุดไปแล้ว (Downgrade)

ng --version
npm uninstall -g @angular/cli
npm cache clean --force

npm install -g @angular/cli@7.3.8
ng --version

2. สร้างโปรเจค (*กรณีไม่ได้สร้างโปรเจคใหม่ให้ข้ามขึ้นตอนนี้)

ng new <project-name>
    
example: ng new my-app

in cli select >>
>> Would you like to add Angular routing? Yes
>> Which stylesheet format would you like to use? SCSS

3. serve project dev enviorment เพื่อทดสอบ

cd <project-name>

example : cd my-app

ng serve --open

4) ลง Bootstrap CSS framwork

npm install ngx-bootstrap bootstrap --save

กรณี add เฉพาะ bootstrap

npm install bootstrap --save

5) ลง angular material

ng add @angular/material

in cli select >>
>> Choose a prebuilt theme name, or "custom" for a custom theme?  Deep Purple/Amber  [ Preview: https://material.angular.i
o?theme=deeppurple-amber ]
>> Set up HammerJS for gesture recognition? Yes
>> Set up browser animations for Angular Material? Yes

REF:
[NGX-Bootstrap](https://valor-software.com/ngx-bootstrap/#/)
, [Material Angular](https://material.angular.io/)
, [Semantic-UI](https://semantic-ui.com/)
, [Bootstrap](https://getbootstrap.com/docs/4.4/getting-started/introduction/)
, [Note for Install Bootstrap](https://github.com/valor-software/ngx-bootstrap/blob/development/docs/getting-started/bootstrap.md)

> เรียกใช้งาน style bootstrap โดยไปที่ angular.json แล้วเพิ่ม path : node_modules/bootstrap/dist/css/bootstrap.min.css

"styles": [ 
            "src/styles.css",   
            "node_modules/bootstrap/dist/css/bootstrap.min.css"
          ] 

## ขึ้นตอนการ Install NgRx (state management)
1) ลงตัว gen config

npm install @ngrx/schematics --save-dev
ng config cli.defaultCollection @ngrx/schematics

npm install @ngrx/store-devtools --save
npm install @ngrx/store --save
npm install @ngrx/entity --save
npm install @ngrx/effects --save

2) เริ่มรันโครงสร้าง store

ng g store store --module=app.module.ts --root=true --statePath=store --stateInterface=AppState

**** คำอธิบาย
ng g store store -> สร้าง store
--module=app.module.ts -> อ้างอิงไปที่ module ไหน ซึ่งในที่นี้เป็น app.module.ts 
--root=true -> เนื่องจากเราต้องการทำเป็น state เป็น global ที่ app.module ดังนั้นจะต้องเซ็ตเป็น root=true
--statePath=store -> src/app/store สร้างไปที่ path ไหน
--stateInterface=AppState -> ชื่อ interface เริ่มต้น ใช้ชื่ออะไรก็ได้

3) สร้าง action

 ng g action store/actions/config --api=true --skipTests=true 

4) สร้าง reducer

ng g reducer store/reducers/config --api=true --skipTests=true --reducers=../index.ts

## สร้าง Component

ng g c /customer/yourcomponent
ng g m /customer/yourcomponent --module app --flat --routing

## ขั้นตอนการ Build และ Deploy บนระบบงาน k8s

build image > harbor > deploy
1) สร้าง Folder ใหม่เพื่อเตรียม environment
2) เข้าไปที่ Folder Project แล้ว build file ที่จะเตรียมขึ้น

ng build --prod
หรือ
npm run build

จะได้โฟล์เดอร์ /dist แล้ว copy โฟล์เดอร์นี้ไปยัง Folder ที่เตรียมไว้

3) นำ /dist ไปขึ้น docker โดยทำการเตรียมไฟล์ดังต่อไปนี้

> Dockerfile

FROM nginx:1.14.0-alpine
COPY dist/ /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
VOLUME /usr/share/nginx/html
VOLUME /etc/nginx/conf.d/default.con

CMD ["/bin/sh",  "-c",  "envsubst < /usr/share/nginx/html/assets/env.template.js > /usr/share/nginx/html/assets/env.js && exec nginx -g 'daemon off;'"]

> nginx.conf

server {
    listen 8080;
    access_log on;
    error_log on;
    location / {
        root /usr/share/nginx/html;
        index index.html index.htm;
        try_files $uri $uri/ /index.html =404;
    }
}

4) ทำการ build docker images (โดยดู เลข version จาก harbor จากขั้นตอนที่ 6)

# fas
docker build --no-cache -f Dockerfile -t fas-web:0.0.x .
*** fas-web:0.0.x คือให้ทำการเปลี่ยนเลขเวอร์ชั่นตลอดทุกการ build 
เช่น fas-web:0.0.1 , fas-web:0.0.2 , fas-web:0.0.3  

# pps 
docker build --no-cache -f Dockerfile -t pps-web:0.0.x .

# webcl
docker build --no-cache -f Dockerfile -t webcl-web:0.0.x .

# sds
docker build --no-cache -f Dockerfile -t sds-web:0.0.x .

5) ทำการ tag version ที่จะขึ้น harbor

# fas
docker tag fas-web:0.0.x harbor.dev.com:8444/frontend-fas/fas-web:0.0.x

(pg_fas)
docker tag fas-web:0.0.x harbor.dev.com:8444/fas-pg/web:0.0.x

# pps 
docker tag pps-web:0.0.x harbor.dev.com:8444/frontend-pps/pps-web:0.0.x

# webcl
docker tag webcl-web:0.0.x harbor.dev.com:8444/webcl/webcl-web:0.0.x

# sds
docker tag sds-web:0.0.x harbor.dev.com:8444/sds-db2/sds-web:0.0.x

6) login docker harbor (ถ้า login แล้วให้ข้าม)

docker login 

> username : frontend
> password : frontend@KTB12345

7) นำ docker images ขึ้น harbor (https://harbor.dev.com:8444/)

# fas
docker push harbor.dev.com:8444/frontend-fas/fas-web:0.0.x

(pg_fas)
docker push harbor.dev.com:8444/fas-pg/web:0.0.x

# pps 
docker push harbor.dev.com:8444/frontend-pps/pps-web:0.0.x

# webcl
docker push harbor.dev.com:8444/webcl/webcl-web:0.0.1

# sds
docker push harbor.dev.com:8444/sds-db2/sds-web:0.0.1

8) เตรียมไฟล์ pods และ svc เพื่อไป Deploy ที่ k8s (ตัวอย่างระบบ fas)(ถ้าเตรียมเสร็จแล้วให้ข้ามไปที่ขึ้นตอนที่ 9. )

> fas-web-pod.yml

apiVersion: apps/v1
kind: Deployment
metadata:
  name: fas-web
  labels:
    name: fas-web
spec:
  replicas: 1
  selector:
    matchLabels:
      name: fas-web
  template:
    metadata:
      name: fas-web
      labels:
        name: fas-web
    spec:
      containers:
      - image: harbor.dev.com:8444/frontend-fas/fas-web:0.0.x
        name: fas-web
        ports:
          - containerPort: 8080
            name: http

***ตรง - image อย่าลืมเปลี่ยน version tags เพราะ harbor จะทำการไป pull images จาก tags ที่เราทำการเขียนไว้ในไฟล์

> fas-web-svc.yml

apiVersion: v1
kind: Service
metadata:
  name: fas-web-svc
  labels:
    name: fas-web-svc
spec:
  type: NodePort
  ports:
    - name: fas-web-svc
      port: 8080
      targetPort: 8080
  selector:
    name: fas-web

9) copy file [fas-web-pod.yml] และ [fas-web-svc.yml] ขึ้น server

SSH เข้าเครื่อง Web
172.13.33.1 (fas) 
172.13.33.2 (pps) 
172.13.33.3 (sds),(webcl)

ใช้รหัสเดียวกัน
User : root
Password : =u;b9sohkg[njv

ssh root@172.13.33.2

10) ไปที่ Folder ที่นำไฟล์ขึ้นไป จากนั่นใช้คำสั่ง (เรียงกัน)

kubectl get pods -n fas      (ไว้สำหรับ list pod ที่ online อยู่ทั้งหมด เพื่อตรวจเช็ค)
kubectl delete -f fas-web.yml      ( ไว้สำหรับ ลบ pod และ svc ทั้งหมด)
kubectl create -f fas-web.yml      (ไว้สำหรับสร้าง pod และ svc ทั้งหมด)

[ ***ตรวจสอบ error*** ]

kubectl logs -f <ชื่อpod>

get ชื่อ pod จาก 
kubectl get pods

ตัวอย่าง : kubectl logs -f fas-web-7889dc6b55-n9wd

[ ***ปัญหาที่พบในบางครั้ง*** ]

พบปัญหาว่าบ้างครั้ง k8s ไม่สามารถไปดึง docker images มาจาก harbor ได้
ให้เราทำการ pull docker images เองโดย เข้าไปที่หน้า harbor แล้วทำการ copy คำสั่งดังรูป โดยอิงจากเลข Tag version ของ images


จะได้คำสั่ง ตัวอย่างเช่น

docker pull harbor.dev.com:8444/frontend-fas/fas-web:0.0.11

แล้วทำการ run คำสั่งบน server แล้วทำตามขึ้นตอนที่ [10](#10)

กรณีไม่สามารถ pull images จาก harbor ได้จากขั้นตอนด้านบน ซึ่งก็คือไม่สามารถ docker login ได้เลย โดยกรณีนี้เราจะทำการ save image จากเครื่อง local ของเราเอง แล้วนำไปขึ้น server เอง

# fas
docker save harbor.dev.com:8444/frontend-fas/fas-web:0.0.x | gzip > fas-web_0.0.x.tar.gz

# pps 
docker save harbor.dev.com:8444/frontend-pps/pps-web:0.0.x | gzip > pps-web_0.0.x.tar.gz

แล้วทำการ load image เข้า docker บน server โดยใช้คำสั่ง

# fas
docker load --input fas-web_0.0.x.tar.gz

# pps 
docker load --input pps-web_0.0.x.tar.gz

kubectl config set-context --current --namespace=pps

[reference คำสั่ง kube](https://github.com/pragasitcha/config/blob/master/README.md)

## VS Code Extension 🎁
- Angular Files
- Angular Snippets
- Auto Import
- TSLint

## Any library or extension for angular
- Bootstrap (สำหรับขึ้น layout)
- Material Angular

## รวม Module Custom 👽 และเอกสารต่างๆ
#### เพื่อช่วยในการทำงานและเป็น Guideline สำหรับงานต่อๆ ไป

- ngx-mask สำหรับแปลงหน้าตา input เช่น 2000 -> 2,000 https://stackblitz.com/edit/ngx-mask-rlzyd1?file=src%2Fapp%2Fapp.component.html
- angular-language-swither เปลี่ยนภาษา https://stackblitz.com/edit/angular-language-swither
- stackbar chart (apex chart) https://stackblitz.com/edit/angular-n5ys8l
- save .zip file https://stackblitz.com/edit/angular-save-filezip-from-base64
- ckeditor ตัว editor pps พวกส่งเมล์ https://stackblitz.com/edit/angular7-ckeditor-inline-example
- drag and drop เอกสาร https://v7.material.angular.io/cdk/drag-drop/overview
- radio button ทำตัวครอบ radio https://stackblitz.com/edit/angular-material-radio-warpper
- ระวังเรื่องการ Copy Array โดยใช้ '=' https://www.samanthaming.com/tidbits/35-es6-way-to-clone-an-array/
- Template ngModule ไม่รอค่าจาก api ทำให้บางครั้งเกิด error undefined เนื่องจาก Template ไม่รอข้อมูลที่เป็น async https://angular.io/guide/template-expression-operators#safe-navigation-operator

- Get Current Router
https://stackoverflow.com/questions/34597835/how-to-get-current-route