DEV Community: tumit

Angular - Sub/Unsub ยังไงดี

tumit — Mon, 18 Dec 2023 01:16:12 +0000

ตอนเริ่มเขียน Angular จะมี moment โดนขู่เสมอว่า

subscribe แล้วต้อง unsubscribe นะ เดี๋ยว memory จะ leak

ก็เชื่ออะนะว่ามันจะ leak แต่อีกใจก็อยากเห็นกับตาว่ามัน leak จริงไหม ว่าแล้วก็มาลองกัน

Garbage collection

ก่อนจะไปเรื่อง memory leak ไม่ leak เรามารู้จัก Garbage collection กันก่อน ในภาษาที่มีการ จอง/คืน Memory ให้อัตโนนาโถ มักจะมี concept ที่เรียกว่า Garbage collection อยู่

ตาม concept ก็คือจะมี ระบบเล็กๆ ที่แอบทำงานอยู่ เรียกว่า Garbage Collector จะค่อยทำงานอยู่เงียบ ๆ คอยเช็คว่ามี memory ส่วนไหนที่ไม่ได้ใช้แล้ว ถ้ามีก็จะทำการคืน memory ที่ไม่ได้ใช้แล้วคืนสู่ระบบ เช่น


// (A)
const STOCKS = ['BBL', 'KBANK', 'KTB']

class StockComponent {

  // (B)
  filtered = STOCKS;

  search(q: string): void {

    // (C)
    this.filtered = STOCKS.filter(v => v.include(q))
  }
}

จาก code ท่อนนี้ ถ้าจำลองการทำงานประมาณนี้

ที่ step (A) จะมี value ['BBL', 'KBANK', 'KTB'] เก็บไว้ใน memory โดยมี var STOCKS reference ไปที่ value ['BBL', 'KBANK', 'KTB']
ที่ step (B) มี var filtered ก็ชี้ไปที่เดียวกับ STOCKS ก็คือ value ['BBL', 'KBANK', 'KTB'] นั้นเอง
เมื่อมีการ search เช่นส่ง 'K' เข้ามาทำงานที่ step (C) และ STOCK.filter จะสร้าง value ที่เป็น array ตัวใหม่จาก value ['BBL', 'KBANK', 'KTB']
แปลว่าจะมี value 2 ตัวเรียบร้อย คือ value ['BBL', 'KBANK', 'KTB'] กับ value ['KBANK', 'KTB']
และใน step (C) var filtered ก็จะเปลี่ยน reference ไปที่ value ['KBANK', 'KTB'] แทน
ต่อมาถ้า search ถูกเรียกทำงานอีกครั้งด้วย 'L' ก็จะเข้ามาทำงานที่ step (C) อีกครั้ง ครั้งก็จะสร้าง array ใหม่ขึ้นมาอีกเป็น value ['BBL']
แปลว่ามี value 3 ตัวละ คือ value ['BBL', 'KBANK', 'KTB'], value ['KBANK', 'KTB'], และ value ['BBL']
แต่มีแค่ value 2 ตัวเท่านั้นที่มี reference คือ value ['BBL', 'KBANK', 'KTB'] <= STOCKS และ value ['BBL'] <= filtered
มาถึงจังหวะนี้แล้ว ถ้า Garbage Collector ตื่นมาทำงาน value ['KBANK', 'KTB'] ที่ไม่มีใคร reference จะสามารถคืน memory ของ value นี้สู่ระบบได้

เครื่องไม้เครื่องมือในการดู memory

ใน Chrome จะมีเครื่องมือที่ช่วยดู Memory สามารถกด F12 หรือ Ctrl+Shirt+I หรือ ... -> More tools > Developer Tool พอเปิดมา เลือก tab Memory จะมีปุ่มให้เรา snapshot memory ได้ หน้าตาประมาณนี้

เราจะทดสอบด้วยวิธีง่ายๆ คือ

เราจะ snapshot memory ก่อนที่จะมีการ subscribe
เรียก code ส่วนที่มีการ subscribe แล้ว snapshot อีกครั้ง
จากนั้นเราจะ destroy code ในส่วนที่มีการ subscribe ออกไป แล้ว snapshot อีกที เพื่อดูความต่างกันระหว่าง memory

ถ้า snapshot 1 = 3 แปลว่า "ไม่ leak" เพราะได้ memory กลับมา
แต่ถ้า snapshot 2 = 3 แปลว่า "leak" เพราะทำลายแล้ว memory ไม่กลับมา

Subscribe & Unsubscribe

Angular ใช้ RxJS ในหลายส่วนเช่น Route, Router, HttpClient, Reactive Form และอื่นๆ และเพื่อสามารถทำงานแบบ async ได้ จึงต้องทำการ subscribe เพื่อ define callback function ว่า หลังจากทำงานที่เป็น async เสร็จให้ทำอะไรต่อ

แต่การ subscribe ก็ใช้ memory เหมือนกัน แปลว่าถ้าเรา subscribe แล้วไม่ unsubscribe ก็มีโอกาสที่จะทำให้ memory ส่วนนั้นยัง reference อยู่และ Garbage Collector เลยไม่สามารถทวงคืน memory สู่ระบบได้ เป็นสาเหตุที่ทำให้ memory leak นั้นเอง

มาลองดูว่าถ้าไม่ unsubscribe จะ leak จริงไหมกัน

โอเคเข้าเรื่องที่เราอยากรู้ เรามาลองทำตัวอย่างง่าย ๆ โดยมีใช้ button + @if เป็น toggle เพื่อสร้าง/ลบ child component ประมาณนี้

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { OtpComponent } from './shared/components/otp/otp.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet, OtpComponent],
  template: `
    <main class="container mt-3">
      <button (click)="toggleOtp()" class="btn btn-primary">
        Show/Hide OTP
      </button>
      <hr />
      @if (isShowOtp) {
      <app-otp />
      }
    </main>
  `,
  styles: '',
})
export class AppComponent {
  isShowOtp = false;

  toggleOtp(): void {
    this.isShowOtp = !this.isShowOtp;
  }
}

import { Component } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-otp',
  standalone: true,
  imports: [ReactiveFormsModule],
  template: `
    <label class="form-label" for="otp">OTP</label>
    <input class="form-control" type="text" id="otp" />
    <button class="btn btn-secondary mt-3">Send</button>
  `,
  styles: ''
})
export class OtpComponent {
}

ตัวอย่างแรก Route & Router

ใน Angular ปกติเราจะใช้ Route & Router ผ่าน dependency inject แปลว่า reference ของ 2 ตัวนี้อยู่ที่ object pool ตรงกลาง

เพราะฉะนั้นตามทฤษฎีอันนี้จำเป็นต้อง unsubscribe แน่นอน เพราะให้เห็นได้ชัดเราจัด subscribe ไปเลย อย่างละ 10,000 เพื่อง่ายต่อการสังเกตุ

import { Component, inject } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
  selector: 'app-otp',
  standalone: true,
  imports: [],
  template: `
    <label class="form-label" for="otp">OTP</label>
    <input class="form-control" type="text" id="otp" />
    <button class="btn btn-secondary mt-3">Send</button>
  `,
  styles: ''
})
export class OtpComponent {

  route = inject(ActivatedRoute)
  router = inject(Router)

  constructor() {
    for(let i = 0; i < 10000 ; i++) {
      this.route.params.subscribe()
      this.route.url.subscribe()
    }
  }
}

สังเกตุว่า memory มีค่า 4 > 9 > 9 ไม่ได้จางหายไปไหนและถ้าเราเทียบ snapshot 1 - 3 ก็จะเห็นว่า

ค่า delta ของการ subscribe ยัง +20,000 แม้จะลบ OTP component ไปแล้ว

งั้นเรามาลอง unsubscribe กัน ตั้งแต่ v16 เรามี takeUntilDestroyed ที่อยู่ใน rxjs-interop มาช่วยให้ unsubscribe ได้ง่ายขึ้น มาลองดูว่าจะเป็นไง

import { Component, inject } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

@Component({
  selector: 'app-otp',
  standalone: true,
  imports: [],
  template: `
    <label class="form-label" for="otp">OTP</label>
    <input class="form-control" type="text" id="otp" />
    <button class="btn btn-secondary mt-3">Send</button>
  `,
  styles: ''
})
export class OtpComponent {

  route = inject(ActivatedRoute)
  router = inject(Router)

  constructor() {
    for(let i = 0; i < 10000 ; i++) {
      this.route.params.pipe(takeUntilDestroyed()).subscribe()
      this.route.url.pipe(takeUntilDestroyed()).subscribe()
    }
  }
}

memory มีค่า 4 > 20 > 4 memory ใช้มากขึ้นแต่พอ destroy ก็เอากลับมาได้ แปลว่าการถ้าเป็น route & router ควรจะ unsubscribe จริง ๆ

ลอง HttpClient

การทำงานอีกประเภทที่ใช้ในการ subscribe บ่อย ๆ คือพวก HttpClient เรามาดูว่าถ้า subscribe ต้อง unscribe ไหม
ปล. เนื่องจากไม่อยากให้ API นานขอยิงแค่ 100 พอ

import { HttpClient } from '@angular/common/http';
import { Component, inject } from '@angular/core';

@Component({
  selector: 'app-otp',
  standalone: true,
  imports: [],
  template: `
    <label class="form-label" for="otp">OTP</label>
    <input class="form-control" type="text" id="otp" />
    <button class="btn btn-secondary mt-3">Send</button>
  `,
  styles: ''
})
export class OtpComponent {

  httpClient = inject(HttpClient)

  constructor() {
    const url = 'http://localhost:3000/otp'
    for(let i = 0; i < 100 ; i++) {
      this.httpClient.get<any>(url).subscribe(v => console.log)
    }
  }
}

รอบนี้เรา snapshot 1 เทียบกับ 2 พอแล้ว filter หา Subscriber ปรากฏว่า "ไม่มี" เพราะการ subscribe จาก HttpClient เป็น "Finite Observable" แปลว่า มันจะทำลายตัวเองหลังจบการทำงาน เราจึงไม่ค่อย unsubscribe กัน

Reactive Form

อีกอันที่เราใช้ subscribe บ่อยๆ คือ valueChange ของพวก FormGroup FormControl เรามาลองกันว่ารอดไหม

import { HttpClient } from '@angular/common/http';
import { Component, inject } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-otp',
  standalone: true,
  imports: [ReactiveFormsModule],
  template: `
    debug: pin={{ pin.value }}
    <label class="form-label" for="otp">OTP</label>
    <input [formControl]="pin" class="form-control" type="text" id="otp" />
    <button class="btn btn-secondary mt-3">Send</button>
  `,
  styles: ''
})
export class OtpComponent {

  httpClient = inject(HttpClient)

  pin = new FormControl('')

  constructor() {
    for(let i = 0; i < 10000 ; i++) {
      this.pin.valueChanges.subscribe(v => console.log)
    }
  }
}

รอด ! เหมือนที่บอก เพราะ FormControl ที่เรา subscribe อยู่บน OTP Component เมื่อ instance ของ OTP Component ถูกทำลาย reference ของการ subscribe ก็หายไป Garbage collector จึงสามารถเข้ามาเก็บ memory ไปคืนระบบได้นั้นเอง แต่ถ้า...

Reactive Form จาก Parent

บางครั้ง เราจะมีท่าที่ @Input จาก Parent เข้ามาที่ Child แทน และเนื่องจากเราจะใช้งาน ตัวแปรที่เป็น @Input เราจะต้องย้ายการ subscribe มาไว้ที่ ngOnInit แทน หน้าจะประมาณนี้

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { OtpComponent } from './shared/components/otp/otp.component';
import { FormControl, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet, OtpComponent, ReactiveFormsModule],
  template: `
    <main class="container mt-3">
      <button (click)="toggleOtp()" class="btn btn-primary">
        Show/Hide OTP
      </button>
      <hr />
      @if (isShowOtp) {
      <app-otp [pin]="pinParent" />
      }
    </main>
  `,
  styles: '',
})
export class AppComponent {

  pinParent = new FormControl('')

  isShowOtp = false;

  toggleOtp(): void {
    this.isShowOtp = !this.isShowOtp;
  }
}

import { HttpClient } from '@angular/common/http';
import { Component, Input, OnInit, inject } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-otp',
  standalone: true,
  imports: [ReactiveFormsModule],
  template: `
    debug: pin={{ pin.value }}
    <label class="form-label" for="otp">OTP</label>
    <input [formControl]="pin" class="form-control" type="text" id="otp" />
    <button class="btn btn-secondary mt-3">Send</button>
  `,
  styles: ''
})
export class OtpComponent implements OnInit {

  httpClient = inject(HttpClient)

  @Input({ required: true })
  pin!: FormControl

  ngOnInit(): void {
    for(let i = 0; i < 10000 ; i++) {
      this.pin.valueChanges.subscribe(v => console.log)
    }
  }
}

แน่นอน "ไม่รอด" เพราะ reference ของการ subscribe อยู่ที่ Parent ไม่ได้ถูกทำลายไปด้วยตอน Child ถูกทำลาย ดังนั้นถ้าใช้ pattern นี้ต้อง unsubscribe ด้วย

การใช้ takeUntilDestroyed นอก constructor

เนื่องจากการ takeUntilDestroyed ต้องการ context ในการรู้ว่าต้อง destroy object ไหน ดังนั้นการจะใช้ นอก context อย่าง ngOnInit จำเป็นต้อง pass destroyRef ให้ด้วย หน้าตาจะประมาณนี้

import { Component, DestroyRef, Input, OnInit, inject } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { FormControl, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-otp',
  standalone: true,
  imports: [ReactiveFormsModule],
  template: `
    debug: pin={{ pin.value }}
    <label class="form-label" for="otp">OTP</label>
    <input [formControl]="pin" class="form-control" type="text" id="otp" />
    <button class="btn btn-secondary mt-3">Send</button>
  `,
  styles: '',
})
export class OtpComponent implements OnInit {
  destroyRef = inject(DestroyRef);

  @Input({ required: true })
  pin!: FormControl;

  ngOnInit(): void {
    for (let i = 0; i < 10000; i++) {
      this.pin.valueChanges
        .pipe(takeUntilDestroyed(this.destroyRef))
        .subscribe((v) => console.log);
    }
  }
}

Unscubsribe ด้วยวิธีอื่น

นอกจากการใช้ takeUntilDestroyed เรายังมีวิธี unsubscribe แบบอื่น ๆ ได้อีกเช่น การไป subscribe ที template ด้วย Async Pipe หรือใน v16 Angular ใส่ concept ที่เรียกว่า Signal เข้ามา เราสามารถย้ายวิธีการเขียนแบบ Reactive ไปที่ Signal แทนและ Signal ก็จะ auto unsubscribe ให้แทนได้ด้วยเช่นกัน

import {
  Component,
  DestroyRef,
  Injector,
  Input,
  OnInit,
  Signal,
  inject,
  runInInjectionContext,
} from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';
import { FormControl, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-otp',
  standalone: true,
  imports: [ReactiveFormsModule],
  template: `
    <label class="form-label" for="otp">OTP</label>
    <input [formControl]="pin" class="form-control" type="text" id="otp" />
    <button class="btn btn-secondary mt-3">Send</button>
  `,
  styles: '',
})
export class OtpComponent implements OnInit {
  destroyRef = inject(DestroyRef);
  injector = inject(Injector);

  @Input({ required: true })
  pin!: FormControl;

  pinValueChangeSignals: Signal<any>[] = [];

  ngOnInit(): void {
    runInInjectionContext(this.injector, () => {
      for (let i = 0; i < 10000; i++) {
        this.pinValueChangeSignals.push(toSignal(this.pin.valueChanges));
      }
    });
  }
}

สรุป

ถ้าพวกที่เป็น Finite Observable หรือ Reference มี life-cycle ที่จะโดนทำลายอยู่แล้ว เพื่อลดความซับซ้อน เราไม่จำเป็นต้อง unsubscribe ได้

แต่ถ้า reference ที่ subscribe เป็น Observable ที่อยู่ในระบบตลอดกลางเช่น ActiveRoute, Router, Renderer2, Observable.interval, Observable.fromEvent หรือพวก State manement Libreary พวกนี้ต้อง unsubscribe อาจจะด้วย takeUntilDestroyed, Async Pipe หรือโยนใส่ signal เพื่อหลีกเลี่ยง memory leak นั้นเอง

จบปิ๊ง ~

Angular - ลอง SSR บน v17

tumit — Sun, 17 Dec 2023 06:59:27 +0000

จำได้ว่าสมัยก่อน v17 เคยพยายามลองเล่น SSR ผ่านโปรเจคที่ชื่อว่า Universal มาก่อน ได้พี่ต้นมาช่วย 🙏 พอมา v17 นี้ ทีม Angular เห็นว่าทำได้สะดวกและง่ายขึ้น งั้นมาลองกัน

ก่อนจะไป SSR

ก่อนจะรู้จัก SSR เรามารู้จักท่ามาตราฐานของ Angular ก่อนนั้นก็คือ CSR (Client Side Rendering) ตาม concept ของมัน คือ

หลังจาก user ใส่ url แล้ว Browser ก็จะได้ HTML กลับมา แต่.. HTML นั้นไม่ได้มี content อะไรเลยเพราะ content จริงๆแล้วอยู่ใน JS จากนั้น browser ก็จะทำดึง JS&CSS มาเพิ่ม คราวนี้ browser ถึงจะเริ่ม render content จาก JS แล้วแสดงผลได้จริงๆ

ซึ่งโดยถ้าเราสร้างเวปแอปด้วยคำสั่ง ng new my-app โดย default Angular จะสร้าง project เป็น CSR ซี่งก็มีความสุขดี ข้อดีของ CSR คือเรียบง่าย ไม่ซับซ้อน วิธี deploy ก็แค่ build ให้ได้ HTML, JS, &CSS ไปวางที่ web server เช่นพวก nginx ก็พอ เดี๋ยว Browser จะหอบเอาไฟล์ไปวาดเองสวยๆ แต่ว่า...

เมื่อ Client ไม่ได้มีแต่ Browser

คือถ้าเวปเราเป็นแนว login มาทำงาน กด next, next, submit ก็ไม่ได้มีปัญหาอะไรเลย แต่ถ้าเริ่มจะมีการให้ติดอันดับในค้นหาใน Search Engine หรือจะต้องโพส URL ประชาสัมพันธ์ใน Social media ต่างๆ ปัญหาจะเริ่มเกิดขึ้นละ

ใน CSR นั้น server จะทำการส่งมาแค่ HTML(no content) โปรแกรมพวก Spider Bot ที่คอยวิ่งไปตามเวปต่างๆ ทำการแกะ content เพื่อไว้ทำข้อมูลให้ Search Engine จะเกิดอาการงง เพราะ HTML ไม่มี content อะไรเลย ดังนั้นการจะติดอันดับค้นหาต้นๆ จะยากมาก นี่ยังไม่รวมเวลาเราเอา URL ของเวปเราไปโพสใน Social media ที่จะมีการเอารูปในเวปของเราไปแสดง (เพราะมีแต่ HTML ไม่มี content) ก็จะไม่สามารถแสดงได้เช่นกัน

SSR มาตอนนี้แหละ

เพื่อแก้ปัญหานี้ Angular ก็เลยมีท่า render HTML(with content) ในทางเทคนิคเวปเราก็เป็น JS อยู่แล้ว เราก็เลยสามารถใช้ JS Engine อย่างเช่น NodeJS มาทำตัวเปรียบเสมือน browser จอมปลอมช่วย render HTML(with content) ขึ้นมาได้ เราจึงเรียกขั้นตอนนี้ว่า Server Side Rendering นั้นเอง

SSR ใน Angular

ใน v17 ทีมได้เพิ่ม option ในตอนสร้างเวปแอปให้สามารถเลือกได้เลยว่าอยากได้เป็น SSR หรือเปล่า ซึ่งสะดวกกว่าเดิมมาก ๆ

ว่าแล้วก็ Build & Run 🏃

ก่อนจะ implement อะไร เราลอง build & run กันก่อนเลยครับ

สังเกตว่าหลังจาก build เราจะ folder ตามชื่อโปรเจค และด้านในจะแบ่งเป็น browser (สำหรับ CSR) และ server (สำหรับ run SSR) จากนั้นเรามาลอง run file ที่ build มาได้กัน โดยส่วนที่เป็น Render Process จะใช้ NodeJS ทำการ run server (Express.js) มาเพื่อหยิบไฟล์ใน browser (CSR) มา render ก่อนส่งไปให้ client นั้นเอง

node ./dist/ng17-ssr-demo/server/server.mjs

เราก็จะได้ HTML ที่ render มาให้เรียบร้อย จบปิ๊ง ~

Bonus

ในส่วนของ deployment ถ้าเราใช้ docker เราก็เขียน Dockerfile ท่า multi-stages ประมาณนี้ได้เลย

# builder
FROM node:20.10-alpine as builder

WORKDIR /app

COPY package*.json ./

RUN npm ci

COPY . .

RUN npm run build

# production
FROM node:20.10-alpine

WORKDIR /app

COPY package*.json ./

RUN npm ci --omit=dev

COPY --from=builder /app ./

EXPOSE 4000

ENTRYPOINT ["node","/app/dist/ng17-ssr-demo/server/server.mjs"]

Refs:

Python - สลับ seleniumlibrary version ด้วย venv

tumit — Fri, 24 Feb 2023 00:41:05 +0000

พอดีมีน้อง QA ในทีมท่านนึง เจอปัญหาต้องดูแล robotframework & seleniumlibrary คนละ version ทำให้ต้องสลับ keyword ไปมาระหว่างพัฒนาเทส วันนี้เลยขอเสนอท่า venv (virtual environments) เพื่อแก้ปัญหานี้กัน

virtual environment คืออะไร ?
virtual environment คือความพยายามที่จะสร้าง Python environment ให้เหมาะสมสำหรับการทำงาน ปัญหาหลัก ๆ ที่เรามักจะเจอกันคือการใช้ dependency library ที่ไม่ตรงกัน version กัน

เช่น

โปรเจค A ต้องการ lib X==1.0.0, Y==2.0.0
โปรเจค B ต้องการ lib X==2.0.0 และ Z==3.0.0

หรือบ้างครั้งเราแค่อยากทดลองลง upgrade version และทดสอบดูว่ามีอะไรพังไหมเท่านั้น ดังนั้นถ้าเราสามารถสร้างและแยก environment ให้สามารถสลับกันไปมาได้ระหว่าง lib X==1.0.0 กับ X==2.0.0 ได้ก็จะสะดวกไม่น้อยเลย

ขั้นแรก check python version กันก่อน

C:\Users\tumit>python --version
Python 3.11.2

ซึ่งตั้งแต่ version 3.5 ขึ้นไป venv ถือว่าเป็นท่าที่ recommended ในการสร้าง virtual environments

เริ่มสร้าง virtual environment และใช้ สำหรับ seleniumlibrary v.5 กัน
ต่อมาเราจะมาสร้าง virtual environment สำหรับลง seleniumlibrary v.5 เพื่อ support robot เก่า ๆ ที่อาจจะยังไม่พร้อมที่จะ move on ไป version ใหม่ เริ่มจากคำสั่ง

C:\Users\tumit>python -m venv rf-selenium-5 // ชื่อตามที่เราอยากได้เลย

มันจะทำการสร้าง folder ที่ชื่อ rf-selenium-5 ให้เราประมาณนี้

C:\Users\tumit>dir .\rf-selenium-5
 Volume in drive C has no label.
 Volume Serial Number is EXXX-0XXB

 Directory of C:\Users\tumit\rf-selenium-5

02/24/2023  07:11 AM    <DIR>          .
02/24/2023  07:11 AM    <DIR>          ..
02/24/2023  07:11 AM    <DIR>          Include
02/24/2023  07:11 AM    <DIR>          Lib
02/24/2023  07:11 AM               270 pyvenv.cfg
02/24/2023  07:11 AM    <DIR>          Scripts
               1 File(s)            270 bytes
               5 Dir(s)  74,569,793,536 bytes free

จากนั้นเราก็จะทำการ activate เพื่อเลือก environment นี้ในการพัฒนากันด้วยคำสั่ง

// คำสั้ง activate จะอยู่ใน path นี้นั้นเอง
C:\Users\tumit>.\rf-selenium-5\Scripts\activate

จะสังเกตุว่าที่ prompt ของเราจะมี (rf-selenium-5) ที่แสดงว่าเรา active อยู่ที่ environment นี้แล้ว

จากนั้นเราก็ install library ใน version ที่เราต้องการได้เลยเช่น

pip install robotframework
pip install robotframework-seleniumlibrary==5.0.0

เราสามารถใช้คำสั้ง pip freeze เพื่อแสดง dependency libraries ได้ประมาณนี้

และถ้าต้องการจะออกจาก environment นี้ก็สามารถทำได้ ด้วย command deactivate ง่าย ๆเลย

จบปิ๊ง ~

references:

VPN แค่บางส่วนกับ openconnect กับ vpn-slice

tumit — Mon, 21 Nov 2022 04:10:58 +0000

ช่วง WFH แน่นอนสิ่งที่เราต้องใช้เสมอคือ VPN สำหรับเข้าถึง network ของที่ทำงาน แต่ปัญหาคือพอ VPN แล้วเราก็เหมือนเข้าไปในจักรวาลอีกจักรวาล บางทีก็ช้าจนแชร์ screen ไม่ได้หรือบล็อกบางเว็บที่เรา วันนี้เลยมาเสนอตัวช่วยคือ Openconnet & vpn-slice

Openconnect คือ

เป็น cross-platform VPN Client (อย่างผมใช้ Manjaro Linux จะมีมาให้เลย MacOS ก็น่าจะ install ผ่าน brew ได้) ในการต่อ vpn เราสามารถใช้ openconnect ผ่าน command line ตัวอย่างเช่น

openconnect https://vpn.mycompany.com/

ข้อดีคือมันสามารถใช้กับ VPN ที่เราคุ้ยเคยอย่าง PAN GlobalProtect หรือ Fortinet SSL VPN ได้ด้วยการเพิ่ม param - protocal ได้ด้วย ตัวอย่างเช่น
openconnect --protocol=gp vpn.example.com
หรือ
openconnect --protocol=fortinet fortigate.example.com

vpn-slice พระเอกของงาน

vpn-clice เป็น python project สามารถ install ผ่าน pip ได้เลย

sudo pip3 install "vpn-slice[dnspython,setproctitle]"

พอ install เสร็จแล้วเราสามารถเพิ่ม vpn-slice ไปเป็น param ที่ openconnect เพิ่มได้ว่า "เอาแค่ network หรือ domain นี้นะที่ไปกับ VPN"
ตัวอย่างที่ผมใช้จะเป็นประมาณนี้

ทำเป็น bash ไว้เช่น myvpn.sh (chmod u+x ให้เรียบร้อยจะได้ run ได้)

echo "super-password" | sudo openconnect --protocol=gp --user=tumit --script='vpn-slice 172.16.0.0/12 myweb.tumit.co.th db.tumit.co.th' vpn.tumit.co.th --passwd-on-stdin

เนืองจากไม่อยากกรอก password ทุกครั้งเลยให้ echo "password" แล้วใส่ | เพื่อส่งไปให้ openconnect แทน
เรียกคำสั่ง openconnect ตามด้วย param อย่างผมใช้ GlobolProtect ก็ใส่เป็น protocal=gp ตาม user
ต่อมาส่วนที่ช่วยให้กำหนดว่า network หรือ domain ไหนที่เราอยาก VPN ก็มากำหนดที่ param script อย่างของผมอยากเข้าแค่ IP ที่เป็น 172.16.0.0/12 กับพวก web ใน dev environtment กับ db ก็ใส่ ๆ ไป
ที่เหลือก็ vpn domain กับส่วน password รับมาจาก echo ด้วย passwd-on-stdin

ก็จะประมาณนี้นั้นแล ~

Angular -Typed Reactive Form

tumit — Sun, 12 Jun 2022 18:36:33 +0000

หลังจาก Angular v14 ออก feature ที่ผมสนใจเป็นพิเศษคือ Typed Reactive Form เรามาลองดูสิว่ามันเปลี่ยนวิธีเขียนไปมากน้อยแค่ไหน

ทำไมต้อง Type

ข้อดีของการมี type ในการเขียนโปรแกรมข้อนึงคือ เราสามารถเขียนกำหนด biz spec ลงไปใน code ได้เช่น data ก้อนนี้มี field อะไรบ้าง ประเภทเป็นตัวหนังสือหรือตัวเลข, เป็น mandatory หรือ optional ทำให้รู้ว่าเราเขียนโปรแกรมหลุดจาก biz logic ได้เลย ณ compile time หรือถ้าใช้ editor ฉลาดพอมันจะบ่นตั้งแต่เขียนเลย

export interface Stock {
  id: string;
  abbr: string;
  remark?: string;
}

Reactive Form เดิม

แต่ก่อน Reactive form ของ Angular ไม่ได้กำหนด type มาก่อนทำให้วิธีเขียนจะค่อนข้าง dynamic มาก ๆ แต่ก็มีข้อเสียคือเวลามีการอัปเดต field เราจะไม่รู้ทันที ใน Angular 14 โดย default จะมี type แล้ว ดังนั้นถ้าใครยังอยากใช้แบบไม่มี type ต้องเปลี่ยนไปใช้ UntypedFormControl แทน หรือท่าที่สะดวกกว่านั้นคือใช้ ng update มันจะ convert พวก FormXXX ให้เป็น UntypedFormXXX ให้เองแบบอัตโนนาโถ

ng update @angular/core@14 @angular/cli@14

ว่าแล้วเรามาลองรีวิวดูว่า Typed Reactive Form มาอะไรให้เราใช้กันบ้าง

น้องเล็ก FormControl

เริ่มจาก FormControl เราถ้าเราไม่ได้ประกาศ type ให้ value ก็ยังเป็น any อยู่

const searchBox = new FormControl();
const value = searchBox.value;
console.log(value) // value: any

แต่ถ้าเราเพิ่มค่าเริ่มต้นให้ type string ของ value มันจะกลายเป็น string | null ทันที และไม่สามารถ setValue เป็น type อื่นได้นอกจาก string | null

const searchBoxStr = new FormControl('');
const valueString = searchBoxStr.value;
console.log(valueString) // valueStr: string | null
// searchBoxStr.setValue(1) // type validate
searchBox.reset() // then searchBox.value to be null

ที่มันติดค่า null ไว้เพราะ FormControl มี method reset() ซึ่งโดย default แล้วมันจะ setValue กลับไป null

ถ้า biz spec บอกว่า ค่านี้เป็น null ไม่ได้เราสามารถเพิ่ม option ให้ FormControl ไม่เอาค่า null ได้ด้วย { nonNullable: true } พอ method reset() ทำงานมันจะเอาค่าที่ init ไปใส่แทน

const searchBoxNotNull = new FormControl('', { nonNullable: true })
const valueNotNull = searchBoxNotNull.value;
console.log(valueNotNull) // valueNotNull: string

แต่สุดท้ายถ้าเราอยากกำหนด type แบบจริงจังว่าเป็นอะไรก็ทำได้เช่นกัน ด้วยการใส่ FormControl แบบตรง ๆ

const searchTyped = new FormControl<string|null>('', { nonNullable: true })
const valueTyped = searchTyped.value;
console.log(valueTyped) // valueTyped: string | null
searchTyped.setValue(null);
searchTyped.setValue('Abc');
searchTyped.reset(); // reset to init value

พี่ใหญ่ FormGroup

คราวนี้ถ้าเรา เอา FormControl ไปใส่ใน FormGroup จะเกิดอะไรขึ้นบ้าง

const stockForm = new FormGroup({
  id: new FormControl('', { nonNullable: true }),
  abbr: new FormControl('', { nonNullable: true }),
  address: new FormGroup({
    province: new FormControl('', { nonNullable: true }),
    zipCode: new FormControl('', { nonNullable: true })
  })
});

const stockID = stockForm.value.id; // string | undefine
const stockAbbr = stockForm.value.abbr; // string | undefine
const stockAddress = stockForm.value.address; // Partial<{ province, zipCode}> | undefine

ถ้าเราสังเกตจะเห็นว่าเวลาเราเอา stockID หรือ stockAbbr มันจะได้ค่าเป็น string | undefine เพราะเวลาเรา disable FormControl ที่อยู่ใน FormGroup มันจะทำให้ค่าเป็น undefine ในทางเดียวกัน ถ้าเป็น Nested FormGroup ที่ซ้อนลงไปค่าที่ได้ก็จะเป็น Partial เพราะมันมีโอกาสที่จะเป็น undefine และได้ field มาไม่ครบได้เหมือนกัน

ถ้า spec บอกว่าอยากได้ field ครบเสมอ เราใช้ getRawValue() แทน

const stockIDRaw = stockForm.getRawValue().id; // string
const stockAbbrRaw = stockForm.getRawValue().abbr; // string
const stockAddressRaw = stockForm.getRawValue().address; // { province, zipCode }

แต่ถ้าเราพยายามตีมึนใส่ของที่ไม่ได้ spec ไว้มันจะด่าทันที ว่า name ไม่มี

กรณีที่เราระบุ spec ชัดเจนแบบนี่ทำให้ editot & compiler ช่วยเช็คได้ว่า field ที่เป็น mandaroty ต้อง remove ไม่ได้ แต่ optional ทำได้แบบนี้

เพื่อนสนิท FormBuilder

พอมี type เพิ่มเข้ามา FormBuilder เลยมี .nonNullable เพื่อช่วยสร้าง FormGroup แบบ nonNullable ได้แบบนี้

@Component({})
export class StockComponent {

  protected stockFormFb = this.fb.nonNullable.group({
    id: '',
    abbr: ''
  });

  constructor(private fb: FormBuilder) {
    this.stockFormFb.value; // Partail<{id, abbr}>
    this.stockFormFb.getRawValue(); {id, abbr}
  }

นอกจากนี้ FormBuilder ยังมีท่าที่น่าสนใจอีกท่านึงคือเราสามารถส่ง interface ที่เป็น model spec ลงไปได้ ทำให้การล็อก spec การสร้าง FormGroup ได้อีกด้วย

@Component({})
export class StockComponent {

  protected stockFormFbInterface = this.fb.nonNullable.group<Stock>({
    id: '',
    abbr: '',
  });

  constructor(private fb: FormBuilder) {
    this.stockFormFbInterface.value; // Partail {id, abbr, remark?}
    this.stockFormFbInterface.getRawValue(); // {id, abbr, remark?}
  }
}

ถ้ามีของแปลกปลอมจะแดงทันที

แต่ถ้า spec บอกว่ายังไงก็ nonNullable เราสามารถ inject NonNullableFormBuilder เพื่อไม่ต้องคอย .nonNullable ได้ประมาณนี้

@Component({
  selector: 'app-stock',
  template: ``
})
export class StockComponent {

  protected stockFormNnInterface = this.nnFb.group<Stock>({
    id: '',
    abbr: '',
  })

  constructor(private nnFb: NonNullableFormBuilder) {
    this.stockFormNnInterface.value;
  }
}

น้องใหม่ FormRecord

บางครั้งเราอยากจะเจอโจทย์ประมาณอยากให้ Form ของเรามี filed dynamic ณ runtime ยังนึกเคสไม่ออกแต่คิดว่าคงประมาณนี้

// runtime data
const stocks: Stock[] = [
  { id: 'BKK.ABC', abbr: 'ABC' },
  { id: 'CGM.ABC', abbr: 'ABC' },
  { id: 'BKK.DGF', abbr: 'DEF' }
];
// runtime init
const topStockRecord = new FormRecord<FormControl<string>>({});
stocks.forEach(stock =>
  topStockRecord.addControl(
    stock.id,
    new FormControl(stock.abbr, { nonNullable: true })
  )
);

ของแถม

จาก blog @netbasal เขาแถม type ที่ชื่อว่า ControlsOf (มาจาก lib ที่ชื่อ ngneat/reactive-forms) เพื่อให้สามารถกำหนด interface ให้เราจะได้เลยตอน new FormGroup ท่าก็จะประมาณนี้

export type ControlsOf<T extends Record<string, any>> = {
  [K in keyof T]: T[K] extends Record<any, any>
  ? FormGroup<ControlsOf<T[K]>>
  : FormControl<T[K]>;
};

@Component({
  selector: 'app-stock',
  template: ``
})
export class StockComponent {
  protected stockControlOf = new FormGroup<ControlsOf<Stock>>({
    id: new FormControl('', {nonNullable: true}),
    abbr: new FormControl()
  })

  constructor() {
    this.stockControlOf.value;
    this.stockControlOf.getRawValue();
  }
}

บ่นทันทีที่ field ไม่มี

เท่าที่ลองก็จะประมาณนี้ครับ ใครลองแล้วมีอะไรมากกว่านี้ก็แนะนำกันได้นะครับ สวัสดี (-/-)

Refs:

MS-Teams — ใส่รูป profileให้ guest

tumit — Fri, 10 Jun 2022 08:19:56 +0000

เนื่องจากทีมที่ทำงานอยู่ใช้ MS-Teams ของลูกค้าเป็นช่องทางการติดต่อหลัก + role เราเป็น guest ทำให้ features ต่าง ๆ ได้มาไม่ครบ แต่เรื่องพวกนั้นก็ยังหาท่าหาทางไปได้ แต่สิ่งที่รู้สึกยอมไม่ได้ คือ ทำไมเราเปลี่ยนรูป profile เราไม่ได้ (ฟร่ะ)

ไม่ยอม อยากได้ ๆ

เริ่มจาก google เลยว่า guest ใน MS-Teams ถ้าอยากแก้รูป profile ทำไงได้บ้าง ใล่ ๆ ดูก็เจอคนที่อยากได้เหมือนกัน และไปพบว่าถ้าเราอัปเดตรูปบน AzureAD มันจะดึงมาเป็น MS-Teams profile ให้ ว่าแล้วเราก็เริ่มเลย

เปิด Power Shell ก่อนเลย (Run as administrator ด้วยนะ)

และก็ install AzureAD PowerShell module เพื่อให้สามารถ connect AzureAD ผ่าน command ด้วยคำสั่ง

Install-Module AzureAD

จากนั้น connect ไปที่ AzureAD ที่เราเป็น guest อยู่ ประมาณนี้

Connect-AzureAD -TenantDomain xxxth.onmicrosoft.com

จากนั้นก็ใช่ command เพื่อ upload รูป profile ขึ้นไปไว้บน AzureAD โดยแทนที่ @ ใน email ด้วย _ และเพิ่ม #EXT#@ ตามด้วย domain ที่เรา login โดยไฟล์ใช้เป็น jpg หรือ png ~100kb

Set-AzureADUserThumbnailPhoto -ObjectId ‘your_mail.com#EXT#@xxxth.onmicrosoft.com’ -FilePath ‘c:\pic.jpg’

ทดสอบว่าไฟล์ไปไหม ถ้าขึ้นว่ามีก็ใช้ได้

Get-AzureADUserThumbnailPhoto -ObjectId ‘your_mail.com#EXT#@xxxth.onmicrosoft.com’

ที่เหลือก็แค่รอว่าเหมือนไหร่ cache มันจะหมดอายุแล้วโหลดรูป profile ใหม่จาก AzureAD มาแทน หรือถ้าใจร้อนก็ไป clear cache ของ MS-Teams เอาครับ (กรณี Window ก็ %AppData%\Microsoft\Teams ) ของผมรอประมาณ 4–5 วัน แต่กว่าคนอื่นก็รอไปประมาณ 1 เดือน LoL

จบการเล่นซนแต่เพียงเท่านี้ (-/-)

Refs: https://eightwone.com/2021/04/11/change-teams-guest-profile-picture/

P6Spy - มา debug SQL command จาก JPA

tumit — Fri, 04 Feb 2022 06:45:54 +0000

เวลาเราใช้ Spring Data ปัญหาที่เราจะเจอกันบ่อย ๆ คือ พอมีปัญหาอยาก debug เราอยากรู้ว่า ไอ้ JPQL หรือ query ที่มาจาก method name strategy จริงแล้วมัน run SQL command อะไรกันแน่ ทำไงดี

ข้อควรระวัง

ถ้าเป็นไปได้ควรใช้แค่ none-prod env เท่านั้น หรือถ้าจะใช้ใน prod ให้ระวังเพิ่มอีกนิดเพราะอาจจะมีปัญหาเรื่อง sensitive information ใน log ได้

ท่าปกติ : spring.jpa.show-sql=true

ในที่นี้เราใช้ Spring Boot (เป็นท่ามาตราฐานของ Java ไปแล้วมั้ง) สมมุติว่าเรามี code ไว้สำหรับ CRUD ข้อมูลใน DB หน้าตาประมาณนี้

Entity

package ga.tumit.p6spyspbdemo.member;

import lombok.Getter;
import lombok.Setter;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;

@Getter
@Setter
@Entity(name = "MEMBER")
public class MemberEntity {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long memberId;

    private String memberName;
}

Repository

public interface MemberRepository extends JpaRepository<MemberEntity, Long> { }

Test

package ga.tumit.p6spyspbdemo.member;

import org.junit.jupiter.api.Test;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;

import java.util.Optional;

import static org.assertj.core.api.Assertions.assertThat;

@SpringBootTest
public class MemberRepositoryTest {

    @Autowired
    private MemberRepository memberRepository;

    @Test
    void findById() {
        long id = 999L;
        Optional<MemberEntity> member = memberRepository.findById(id);
        assertThat(member.isPresent()).isFalse();
    }
}

ถ้าเราอยากจะ debug SQL command ก็สามารถ enable ของ show-sql ได้ประมาณนี้

# enable show-sql
spring.jpa.show-sql=true

เราก็จะได้ log หน้าตาประมาณนี้

Hibernate: select memberenti0_.member_id as member_i1_0_0_, memberenti0_.member_name as member_n2_0_0_ from member memberenti0_ where memberenti0_.member_id=?

แต่ชีวิตมันไม่ง่ายเหมือนบะหมี่กึ่งสำเร็จรูป ข้อเสียของ option นี้คือมันแค่ log ที่เป็น query command เท่านั้น เช่นในตัวอย่างจะได้แค่

where memberenti0_.member_id=?

ในส่วนของ params ต้องไปนั่งไล่ใส่เองซึ่งในการ debug มันก็ยังไม่ง่ายเท่าไหร่นัก เราเลยมีตัวช่วยคือ p6spy นั้นเองงงง

ท่าเพิ่มเติม: p6spy

เป็น lib ที่ทำตัวเหมือน proxy ช่วยในการเพิ่ม params เข้าไปใน log ให้เราสามารถเอาไป debug ได้ง่ายขึ้น โดยเฉพาะตัวอย่างนี้ที่เป็น Spring Boot เราสามารถเพิ่ม dependencies

ผป

implementation 'com.github.gavlyukovskiy:p6spy-spring-boot-starter:1.8.0'

แล้ว config application.properties เพิ่มอีกนิด เพราะค่า default log มีข้อมูลเกินความต้องการไปนิด (log format ไปตามดูได้ในอ้างอิงเด้อ ~)

# p6spy config
decorator.datasource.p6spy.log-format=%(category): %(sql)

เราก็จะได้ log หน้าตาประมาณนี้

Hibernate: select memberenti0_.member_id as member_i1_0_0_, memberenti0_.member_name as member_n2_0_0_ from member memberenti0_ where memberenti0_.member_id=?
2022-02-04 09:10:56  INFO  p6spy.logSQL:60 - statement: select memberenti0_.member_id as member_i1_0_0_, memberenti0_.member_name as member_n2_0_0_ from member memberenti0_ where memberenti0_.member_id=999
2022-02-04 09:10:56  INFO  p6spy.logSQL:60 - commit:

เราก็จะได้ log SQL ที่มี param มา debug ได้อย่างสวยงามมมมม

where memberenti0_.member_id=999

อ้างอิง

เปลี่ยน mac address กัน

tumit — Fri, 01 Nov 2019 03:57:36 +0000

มีช่วงนึงต้องเอาคอมพ์วางตักไปซ่อม เลยต้องเอาคอมพ์สำรองมาใช้ ปัญหาคือเน็ตเวิร์กคุณลูกค้าอนุญาตแค่ mac-address ที่เราเคยลงทะเบียนไว้เท่านั้น ทำไงดีละ

พอดีนึกขึ้นมาได้ว่าตอนเราใช้ Windows ก็เคยเปลี่ยน mac-address นิ Osx ก็ต้องได้เลย google แล้วก็ได้เลย

ก่อนอื่นจด mac-address เดิมเรามาก่อน

ifconfig en0 | grep ether
    ether 90:28:5c:8c:8x:yz

เอา mac-address มาเซ็ตให้เครื่องสำรอง

sudo ifconfig en0 ether 90:28:5c:8c:8x:yz

แค่นี้เราก็สามารถเข้าถึงเน็ตเวิร์กได้แล้ว ~

อ้างอิง: https://www.online-tech-tips.com/computer-tips/how-to-change-mac-address/