มาสร้างข้อมูลปลอม จำนวนมหาศาลด้วย faker.js กันเถอะ (ของดีจริง ๆ นะ)

 สวัสดีผู้อ่านทุกท่านครับ… เชื่อว่าหลาย ๆ ท่านคงเคยประสบปัญหาในการสร้างสรรค์เว็บไซต์ เราอาจต้องวาง Layout ขึ้นมาเพื่อให้ทีมงานดูก่อนอยู่แล้ว ว่าน่าตามันจะเป็นงี้ ๆ ๆ นะ ทั้ง UX/UI แล้วเราก็ต้องไปหา ข้อความ, รูปภาพ, ข้อมูลที่อยู่ลูกค้า บลา ๆ ๆ อีกมากมาย เพื่อนำมา Mock ให้ผู้เกี่ยวข้องดู บางคนก็ใส่ข้อมูลได้งี่เง่ามาก เช่น name: test, surname: test, email: test@test.com ถ้าเป็นรูปภาพ คุณก็อาจจะเอารูป annonymus เข้ามาใช้ (ถ้าคุณอยู่ฝั่ง Designer ผมเชื่อว่าคุณเคยเจอ Lorem Ipsum ที่เอามา Mock ข้อมูล) ทีนี้ไอพวกคำในนั้น มันมีปัญหาบางอย่าง ว่ามันก็เหมือนกันหมด ไม่แตกต่าง ไม่เห็นชัดเท่าไหร่นัก หรืออ่านแล้วไม่ค่อยสื่อ… ผมคิดว่าจาก Pain ตรงนี้แหละครับ จึงทำให้เกิดสิ่งที่ผมกำลังจะขายขึ้นมา… สิ่งที่ผมกำลังจะขาย (อีกแล้ว) มันมีชื่อว่า faker.js ครับ

faker.js

WHAT IS FAKER.JS

มาดูกันว่าแล้ว faker.js มันคืออะไร แล้วมันจะเข้ามาช่วยอะไรเราได้บ้าง
— faker.js เป็น javascript library ตัวนึงที่จะเข้ามาช่วยเรา “ในการจัดการสร้างข้อมูลปลอมจำนวนมหาศาลให้ Browser และ Node.js”
— ปัจจุบันตอนที่ผมเขียนนี่ก็มี Star ใน Github อยู่ประมาณ 20,000 กว่าดวง

Usage

faker.js สามารถแบ่งการใช้งานได้ 2 แบบ Browser, Node.js ดังตัวอย่างข้างล่าง

Browser

<script src = "faker.js" type = "text/javascript"></script>
<script>
   var randomName = faker.name.findName(); // Caitlyn Kerluke
   var randomEmail = faker.internet.email(); // Rusty@arne.info
   var randomCard = faker.helpers.createCard(); // random contact card containing many properties
</script>

Node.js

var faker = require('faker');
var randomName = faker.name.findName(); // Rowan Nikolaus
var randomEmail = faker.internet.email(); // Kassandra.Haley@erich.biz
var randomCard = faker.helpers.createCard(); // random contact card containing many properties

API

มาดูทางด้านการใช้งานกันบ้าง ทาง faker.js ได้ทำการ Provide API มาให้เราเยอะมาก เรียกได้ว่ามีน่าจะตอบโจทย์การใช้งานได้เกือบหมด เช่น address, commerce, company, database, date, fake, finance, hacker, helpers, image, internet, lorem, name, phone, random, system แล้วก็ยังสามารถปลอม localization ได้ด้วย คุณสามารถไปอ่าน document ได้ ที่นี่

console.log(faker.fake("{{name.lastName}}, {{name.firstName}} {{name.suffix}}"));
// outputs: "Marks, Dean Sr."

Example

ผมจะทำการสร้าง Comment box ขึ้นมา (React + Sematic UI + faker.js) โดยใช้ faker.js ในการช่วย Generate fake data ตัวอย่างดัง Code ด้านล่าง

สร้าง Component ชื่อ CommentDetail

//commentDetail.jsimport React from 'react'
const CommentDetail = props => {
   return (
      <div className="comment">
         <a href="/" className="avatar">
            <img alt="avatar" src={props.avatar} />
         </a>
         <div className="content">
            <a href="/" className="author">
               {props.author}
            </a>
            <div className="metadata">
               <span className="date">{props.timeAgo}</span>
            </div>
            <div className="text">{props.content}</div>
         </div>
      </div>
   )
}
export default CommentDetail;

ที่ไฟล์ index.js ทำการเรียกใช้ faker.js

//index.jsimport faker from 'faker'
...
<CommentDetail
   author={faker.name.firstName()}
   timeAgo="Today at 2:30PM"
   content={faker.lorem.words()}
   avatar={faker.image.avatar()} 
/>

ผลลัพธ์ที่ได้

เมื่อทำการ refresh ไปเรื่อย ๆ เราก็จะได้ข้อมูลใหม่เสมอ โดยที่ไม่ต้องไปนั่งคิดอะไร หรือไปดู demo อื่น ๆ ต่อได้ ที่นี่

Conclusion

faker.js เป็นอะไรที่ดีมาก ๆ สำหรับผมเลย มันทำให้เราไม่ต้องมานั่งคิดคำต่าง ๆ หรือรูปภาพต่าง ๆ ว่าจะเอารูปอะไรมาใช้ดีน้า จะเอาชื่ออะไรดีน้า ในการจำลองข้อมูลก่อนยิงขึ้น Server จริง อีกทั้งในฝั่งของ Node.js ก็ช่วยผมในการจำลองข้อมูลขึ้นมาทดสอบอะไรหลายอย่างได้อีกด้วย แนะนำครับ

source : https://medium.com/@iamgique/%E0%B8%A1%E0%B8%B2%E0%B8%AA%E0%B8%A3%E0%B9%89%E0%B8%B2%E0%B8%87%E0%B8%82%E0%B9%89%E0%B8%AD%E0%B8%A1%E0%B8%B9%E0%B8%A5%E0%B8%9B%E0%B8%A5%E0%B8%AD%E0%B8%A1-%E0%B8%88%E0%B8%B3%E0%B8%99%E0%B8%A7%E0%B8%99%E0%B8%A1%E0%B8%AB%E0%B8%B2%E0%B8%A8%E0%B8%B2%E0%B8%A5%E0%B8%94%E0%B9%89%E0%B8%A7%E0%B8%A2-faker-js-%E0%B8%81%E0%B8%B1%E0%B8%99%E0%B9%80%E0%B8%96%E0%B8%AD%E0%B8%B0-%E0%B8%82%E0%B8%AD%E0%B8%87%E0%B8%94%E0%B8%B5%E0%B8%88%E0%B8%A3%E0%B8%B4%E0%B8%87-%E0%B9%86-%E0%B8%99%E0%B8%B0-5c237f464fc1