สร้าง Flag

สร้าง Feature แรกของคุณใน GrowthBook

Feature ใน GrowthBook แมปตรงกับ feature flag ในโค้ดของคุณ ต่อไปนี้คือวิธีสร้างขึ้นมาตั้งแต่ต้น

ขั้นที่ 1 — เปิดรายการ Features

ล็อกอินเข้า GrowthBook ที่ http://localhost:3000 (หรือ Cloud URL ของคุณ)
ในแถบด้านซ้าย คลิก Features
คลิกปุ่ม Add Feature ที่มุมขวาบน

ขั้นที่ 2 — กรอกรายละเอียดของ Feature

Feature Key — ใส่ identifier ที่เป็นตัวพิมพ์เล็กและคั่นด้วยขีดกลาง เช่น my-flag นี่คือสตริงที่โค้ดของคุณจะใช้ตลอดไป — เลือกอย่างรอบคอบ
Value Type — เลือก Boolean สำหรับ flag เปิด/ปิดแบบง่าย ๆ
Default Value — ตั้งเป็น false (ปิดเป็นค่าเริ่มต้นในทุกที่)
คลิก Create Feature

ขั้นที่ 3 — เปิดใช้งาน flag ใน environment

โดยค่าเริ่มต้น flag ของคุณมีอยู่แต่ถูกปิดใช้งานในทุก environment

ในหน้ารายละเอียดของ Feature ให้หาส่วน Environments คุณจะเห็นแถวสำหรับ development, staging และ production
คลิก toggle ข้าง ๆ development เพื่อสลับจาก Disabled เป็น Enabled
เนื่องจากยังไม่มี override rule ใด ๆ ผู้ใช้ทุกคนจะได้รับ default value เป็น true ใน development

เคล็ดลับ: คุณสามารถตั้ง default value เฉพาะแต่ละ environment ให้ต่างจาก default ส่วนกลางได้ ทำให้คุณปล่อย true ใน development ได้ โดยยังคงเป็น false ใน production จนกว่าคุณจะพร้อม

อ่านค่า flag ในโค้ดของคุณ

เมื่อ feature มีอยู่ใน GrowthBook แล้ว ให้ใช้ SDK ประเมินค่า:

ตรวจค่า boolean ด้วย isOn

import { GrowthBook } from '@growthbook/growthbook';

const gb = new GrowthBook({
  apiHost: 'https://cdn.growthbook.io',
  clientKey: 'sdk-YOUR_DEV_KEY',
});

await gb.init({ timeout: 2000 });

if (gb.isOn('my-flag')) {
  console.log('Flag is ON');
} else {
  console.log('Flag is OFF');
}

อ่านค่าด้วย getFeatureValue

สำหรับ boolean flag คุณก็ใช้ getFeatureValue ได้เช่นกัน ซึ่งต้องระบุ fallback อย่างชัดเจน:

const flagValue = gb.getFeatureValue('my-flag', false);
// returns true or false, never throws

import { GrowthBook } from '@growthbook/growthbook';

const gb = new GrowthBook({
  apiHost: 'https://cdn.growthbook.io',
  clientKey: 'sdk-YOUR_DEV_KEY',
});

await gb.init({ timeout: 2000 });

// boolean shorthand
if (gb.isOn('my-flag')) {
  console.log('Flag is ON');
}

// explicit value with fallback
const flagValue = gb.getFeatureValue('my-flag', false);

ข้อแลกเปลี่ยน

ตัวเลือก	Benefit	Cost
Boolean flag	เรียบง่าย เข้าใจง่ายที่สุด	ใช้ได้แค่ on/off ไม่ flexible
Multi-variate / JSON flag	flexible กว่ามาก ปรับ config ได้ละเอียด	ซับซ้อนกว่าในการ maintain และ validate

ข้อผิดพลาดที่พบบ่อย

สร้าง flag โดยไม่ตั้งชื่อที่สื่อความหมาย (เช่น flag1)
ไม่ตั้ง description ทำให้ทีมอื่นไม่เข้าใจว่า flag ทำอะไร
สร้าง flag ซ้ำสำหรับ feature เดียวกันในหลาย environment

💡 ตัวอย่างจากของจริง

Spotify ใช้ feature flag ตั้งชื่อตาม convention ที่ชัดเจน (team-feature-purpose) เพื่อให้ค้นหาและ audit ได้ง่ายเมื่อมี flag หลักพันตัว