Technology | Education | Lifelong Learning

ลองเล่น Nuxt กับ FakerJS: คู่มือแก้ปัญหา Mock Data อย่างมือโปรสำหรับ Developer

ใครเคยมีปัญหาระหว่างการพัฒนาและต้องการ test สร้าง seed หรือต้อง clone ข้อมูลจาก production แต่ยังอยากคงเรื่อง privacy (data obfuscation) ของข้อมูลไว้ FakerJS ช่วยคุณได้

เรามาเริ่มจากทำความรู้จัก FakerJS กันก่อนว่ามันคืออะไรจะได้เอามาใช้งานกันถูก

FakerJS

FakerJS มีไว้สำหรับ generate mock data สำหรับ testing และ development แล้วมี star ใน github อยู่ 13.5k เลย สามารถ Mock data ได้หลากหลายมากๆ ไม่ว่าจะเป็นชื่อคน อาหาร บทความ ที่อยู่เมือง ช่วงเวลา และอื่นๆ อีกมากมายไปตามดูใน document ได้นะครับ

ทำไมต้องใช้ FakerJS?

ประหยัดเวลา: ลืมเรื่องการกรอกข้อมูลซ้ำ ๆ FakerJS ช่วยสร้างข้อมูลตัวอย่างให้คุณในพริบตา

ความยืดหยุ่นข้อมูลดูสมจริง: ตั้งค่า locale หรือปรับแต่งข้อมูลให้ตรงกับ project ช่วยให้งานออกมาดู Pro มากขึ้น

เพิ่มประสิทธิภาพในการทดสอบ: ด้วยข้อมูลที่ seed / mock up เหมือนจริง ทำให้ทดสอบ UI และ UX ได้ง่ายขึ้น

3 Use Cases การใช้ FakerJS กันว่าเอาไว้ทำอะไร

  • สร้าง Mock data แบบสุดคูล
  • Database Seeding
  • Data obfuscation ถ้าเราต้องการใช้งานร่วมกับ Production Data ก็ใช้ FakerJS ในการแปลง data ก่อนเพื่อป้องกันเรื่อง Privacy ได้

ใน Post นี้จะมาลองเล่นหลักๆ อยู่ 2 ตัว Mock data for Testing กับ Database Seeding และถ้าใครเอาไปต่อยอดเพื่อทำ Data obfuscation จริงๆ หลักการคล้ายๆกับการทำ Seeding เลยครับ

1. สร้าง Mock data แบบสุดคูล

เราเคยบ้างมั้ยที่เราต้องทดสอบ Form Register แล้วใช้เวลามาคิดว่า ชื่ออะไร นามสกุลอะไร และที่ยากสุดคือ ที่อยู่ เพราะพิมยาวเหลือเกิน ถ้าจะ Hard Code ตอน Test ก็กลัวจะเจอ Case แปลกๆ อย่างชื่อตอนที่ใช้เป็นชื่อสั้นๆ พอใช้จริงยาวมาเลยย แล้วทำให้ layout เสีย จะดีกว่ามั้ยที่ FakerJS จะเข้ามาช่วยเราจัดการตรงนี้ให้ข้อมูลเหมือนจริงมากที่สุด

สร้าง Mock data แบบสุดคูล

ความเทพของ faker ยังไม่ได้จบเพียงช่วย Generate ชื่อต่างๆ เพียงเท่านี้นะครับ แต่ยังสามารถ Localization ข้อมูลได้อีกด้วย

สร้าง Mock data แบบสุดคูล Localization
สร้าง Mock data แบบสุดคูล Localization

ตัวอย่าง Code ในการทำ Localization

และแน่นอนเราสามารถ Mock data ในหัวข้ออาหารได้ด้วย

2. Database Seeding

อันนี้ต้อง Setup เยอะหน่อยนะครับ จากตัวอย่างผมมี github ที่ผมทำไว้มาให้ดูด้วย ลองเข้าไปดูกันได้นะครับ https://github.com/itoon/play-with-faker

ผมเริ่มจากการ ลง Prisma https://nuxt.com/modules/prisma

prisma

และก็ setup nuxt module ต่างๆ และซึ่งปกติตอนทำเราเขียน seed

เราก็จะเขียน Hard Code data ไปว่าเราจะให้มีข้อมูลอะไรเป็นข้อมูลเริ่มต้นบ้าง พอเรา run npx prisma db seed และเปิด Nuxt ขึ้นมา เราก็จะเห็นข้อมูลจาก Seed ของเราแล้วว่ามีข้อมูลอะไรบ้าง

debug prisma from nuxt

แต่ประเด็นคือถ้าต้องการใส่ทั้ง User เยอะๆ และ Post Content เยอะๆ จะไปคิดข้อมูลจากไหนละ นอกจากจะ Lorem แล้วก็คิดอะไรไม่ออก 5555 ดังนั้นพระเอกของเรา Faker ต้องเข้าแล้วเราก็ต้องจาก seed ธรรมดาของเรามาเป็นแบบนี้

ซึ่งก็ทำให้เราได้ผลลัพธ์แบบนี้

เย่ข้อมูลเต็มไปหมดหลาย 10 คน พร้อมกับ Blog อีก 20 30 Posts

3. Data obfuscation

concept ที่ผมใช้เป็นประมาณนี้นะครับ clone ข้อมูลจาก production จริงๆ และถ้าเจอข้อมูลส่วนไหนที่ Sensitive ก็ให้ใช้ Faker mock data ตามหัวเรื่องนั้นๆ แล้วก็ update ข้อมูลทับเข้าไป เพียงเท่านี้คนที่เอาข้อมูลไปทดสอบก็จะได้ข้อมูลที่ใกล้เคียงกับของจริงมากที่สุดแล้ว

สรุปโดยรวม

ส่วนตัวค่อนข้างชอบ FakerJS เพราะทั้งใช้ง่าย และก็ลดเวลาในการ development พอเยอะ ไม่ต้องไปเสียเวลาคิดอะไรที่ทำให้เกิดการหลุด focus ในตัวงาน แถมยัง Localization ได้อีกด้วย อันนี้ชอบจัด จริงๆแล้ว ยัง customize ได้อีกหลายหลากมากเลย ถ้าเพื่อนๆ คนไหนลองเล่นอะไรมาบ้างมาแชร์กันได้นะครับ :))

Leave a Reply

Your email address will not be published. Required fields are marked *