Library ของ React สำหรับการทำ Back Office ที่ควรรู้
Back Office Website ถูกสร้างขึ้นเพื่อช่วยให้แอดมิน ทีม Call Center และบุคลากรคนอื่นๆ สามารถทำงานที่เกี่ยวข้องกับ Website, Web Application, Application หรือ WebView อย่างสะดวกสบายและเข้าถึงข้อมูลได้อย่างง่ายดาย เช่น เช็คข้อมูลลูกค้า ตรวจสอบสถานะต่างๆ เป็นต้น ในบทความนี้เราจะมาพูดถึง Library ที่มีประโยชน์และช่วยในการเขียน Frontend ของ Back Office ที่ใช้งานกับ ReactJs เป็นหลักครับ
Ant Design
Ant Design เป็น Library ที่มีส่วนประกอบหลายๆ ส่วนที่เราเลือกใช้งานได้ เช่น Form, Input, Table, Icon, Layout เป็นต้น มีการตกแต่งและดีไซน์ต่างๆ ในตัวที่ค่อนข้างสวยงาม สามารถแก้ไขและนำมาจัดให้เข้ากับการใช้งานของตัว Website ของเราได้ โดยส่วนใหญ่ที่ทาง Back Office ใช้งานจะเป็นในส่วนของ Table ที่สามารถมี Pagination ได้อย่างสวยงาม หรือจะเป็นตัวฟอร์มในการกรอกข้อมูลต่างๆ ที่ใช้ Input และ Button ของ Ant Design ซึ่งตัวฟอร์มเราสามารถนำมาใช้กับ Input หลายรูปแบบมากมายของ Ant Design เช่น
- AutoComplete สำหรับแนะนำข้อมูลตัวเลือกต่างๆ
- Switch สำหรับโหมด Toggle เปิดปิด
- InputNumber สำหรับ Input สำหรับ Number แยกออกมาต่างหาก
ในส่วนของการจัดการหน้า Website ของเรานั้น นอกเหนือจากตัว Layout เรายังสามารถนำ Grid, Divider หรือ Space มาใช้ในการจัดสัดส่วนต่างๆ หรือแบ่งส่วนของหน้าได้ด้วย ในกรณีที่อยากให้มีฟีเจอร์การแจ้งเตือน เราสามารถใช้ส่วนของ Notifications, Alert หรือ Message เพื่อให้แสดงผลอย่างง่ายได้
ทั้งนี้การใช้งานของ Ant Design ยังมีการใช้คู่กับ Moment.js ไว้ใช้งานเกี่ยวกับเรื่องของ Date/Time ต่างๆ ซึ่งในส่วนของ Ant Design จะใช้กับพวก Component เช่น Calendar หรือ DatePicker
ตัวอย่างโค้ดการใช้งาน Ant Design ของ Table ผสมกับตัวอื่นๆ
Moment.js
ต่อมาเราจะมาพูดถึง Moment.js ตามที่ได้กล่าวไปข้างต้น Library นี้จะเกี่ยวข้องกับ Date/Time ต่างๆ ช่วยให้เราสามารถใช้งานหรือรับส่งข้อมูลได้อย่างง่ายมากขึ้น ส่วนของ Back Office ที่จะใช้งาน Moment ก็จะมีการเก็บข้อมูลหรือค้นหา Transaction ต่างๆ ในระบบ การออกแบบหรือกำหนดวันเวลาในการใช้งานโปรโมชัน หรือการดู Activities ของผู้ใช้งานในระบบของเรา เป็นต้น
ข้อมูลที่เป็น Moment.js จะเป็นในรูปแบบของ Object ที่จะสามารถนำฟังก์ชันต่างๆ ใน Library มาแปลงเป็นรูปแบบอื่นได้ เช่น การแปลงเป็นในรูปของ Day/Month/Year หรือว่าจะมี Time ที่สามารถบอกได้ถึง Time Zone
ตัวอย่างโค้ดที่ใช้ Moment.js มาทำคู่กับ Ant Design (DatePicker)
React Image Crop
Library ตัวถัดไปจะมาแนะนำคือ React-Image-Crop ใช้สำหรับช่วยแก้ไขสัดส่วนรูปต่างๆ ตาม Gif ตัวอย่างด้านบน ซึ่งเราสามารถใช้ในการ Crop, Rotate, Filter รูปและอื่นๆ ได้อย่างสะดวกสบาย ส่วนใหญ่จุดประสงค์ที่ใช้กับ Back Office จะเน้นไปทางด้านการอัพโหลดรูป แต่อาจต้องการเพิ่มความสามารถในการ Crop หรือว่า Edit รูปได้ เพื่อให้ตรงกับ Scale หรือ Requirement ต่างๆ ที่เกิดขึ้น
ตัวอย่างเคสการใช้งาน React-Image-Crop มักจะเป็นการ Config ของใน Back Office เพื่อแสดงผลบน Application หรือ Website ที่เปิดให้ลูกค้าใช้งาน เช่น ภาพสินค้าที่ขาย ภาพแคมเปญหรือโปรโมชัน หรือใช้ในการเปลี่ยนรูปที่เคยมีอยู่แล้ว เป็นต้น
ตัวอย่างโค้ดที่ใช้ React Hooks ในการเขียน
Js Export Excel
ตัวสุดท้ายที่จะมาแนะนำคือ Js-Export-Excel ซึ่งทำหน้าที่ตามชื่อเลย คือจะช่วยในการ Export ไฟล์จำพวก Excel ต่างๆ สามารถทำได้ตั้งแต่การตั้งชื่อไฟล์หรือ Sheets ต่างๆ ใน Excel ไปจนถึงการตั้งค่าความกว้างของช่องใน Excel โดยส่วนของ Data ที่จะใช้ในการแปลงไฟล์นั้นจะต้องจัดให้อยู่ในรูปแบบของ Array of Object หรือจะเป็นในรูปของ Array ที่ข้างในเป็น Array ที่มี Value ต่างๆ อยู่ในรูปของ String
เคสการใช้งานยกตัวอย่างเช่น ผู้ใช้งานในระบบอยากได้ข้อมูลเพื่อนำมาทำงานต่อภายหลัง หรือส่งมอบข้อมูลจากทีมหนึ่งไปยังอีกทีมหนึ่ง เป็นต้น
ทั้งหมดนี้เป็น Library ที่ผู้เขียนอยากจะแนะนำสำหรับทำ Back Office แม้ว่า Library ดังกล่าวอาจจะไม่ตรงกับความต้องการหรือว่าตาม Requirement ได้ 100% เสมอไป เรายังมี Library ให้ลองใช้งานและเรียนรู้ได้อีกมากมาย หากบทความนี้มีข้อผิดพลาดใดๆ ก็ขออภัยมา ณ ที่นี้ด้วยครับ และหวังว่าผู้อ่านจะได้ประโยชน์ไม่มากก็น้อย ถ้ามีขอติชม คำแนะนำ หรือว่าจะเป็นการแนะนำ Library ก็สามารถบอกกล่าวมาได้เลยนะครับ ขอบคุณครับ
สำหรับชาวเทคคนไหนที่สนใจเรื่องราวดีๆแบบนี้ หรืออยากเรียนรู้เกี่ยวกับ Product ใหม่ๆ ของ KBTG สามารถติดตามรายละเอียดกันได้ที่เว็บไซต์ www.kbtg.tech
