เมื่อโปรเจค Slackbot 🤖 ที่เขียนขำๆ กลายเป็นเว็บ HR ที่ใช้จริงในบริษัท

ปลายปีที่แล้ว ผมเขียน Slackbot เพื่อแจ้งเตือนว่าวันนี้มีใครลาบ้าง

สั่ง Slackbot ให้เป็น HR ประจำทีม

ทุกคนใน Nextzy ก็ให้การร่วมมือ และใช้ tools ตัวนี้ ไปๆมาๆ ข้อมูลการลาของทุกคนถูกเก็บอยู่ใน database ตัวนี้ และข้อมูลอัพเดตกว่าเว็บไซต์ตัวเดิม จึงเกิดเป็นไอเดีย ทำเว็บ HRM ขึ้นมาแทนตัวเก่าเลย

🖌 Design

เมื่อได้เป้าหมายว่าจะทำแล้ว ครั้งนี้ไม่ทำแบบลูกทุ่ง ทำๆไป เจอปัญหา แล้วแก้เฉพาะหน้า เลยให้ requirement กับ UI/UX Designer มือฉมังของทีม อย่าง Sumontha Charoenpao ซึ่ง น้องก็ช่วยทำ study และ research คนใน Nextzy ให้อย่างดี รู้ตัวอีกทีก็ได้ design มาแล้ว

design template จาก sketch

ส่วนกระบวนการ research อ่านได้ที่ blog ด้านล่างนี้

5Ws to shorten UX research time

📗 Requirements

หลังจาก research แล้ว ก็ได้ requirement จากทีมงาน nextzy ตามนี้

• ดูวันลาคงเหลือได้

• มีปฏิทินดูวันลาย้อนหลังได้

• มีระบบ approve/reject การลา

• วันไหนหยุดก็บอกหน่อยน้า

• จำกัดสิทธิ์การเข้าแต่ละหน้า

staff และ senior จะเห็น menu ไม่เท่ากัน

โปรเจคนี้อยากให้คน maintain ให้น้อยมากที่สุด เท่าที่ทำได้ เนื่องจากพนักงานทุกคนจะต้องใช้ Slack ติดต่อกัน ดังนั้นทุกคนมีข้อมูล userId, profilePicture จาก Slack อยู่แล้ว จึงใช้ฐานข้อมูลและ Authorization ผ่าน Slack API ไปเลย

อีกเรื่องคือเงื่อนไขวันลา วันลา พนักงานได้ปีละ 15 วัน หรือเฉลี่ย เดือนละ 1.25 วัน ซึ่งถ้าทำไม่ครบ 1 ปี แต่ลาครบ 15 วัน จะถือว่าใช้สวัสดิการเกิน เพื่อไม่ให้มีปัญหาการคำนวณวันลาในภายหลัง จึงทำ cronjob เพิ่มวันลาอัตโนมัติ เดือนละ 1.25 วัน

นอกจากนี้ก็มีเงื่อนไขอื่นๆ ซึ่งทำให้ maintain ให้น้อยที่สุดที่เป็นไปได้

💻 ใช้เวลาว่างของ dev ให้เป็นประโยชน์?

บางวัน dev จะมีเวลาว่างวันละ 1–2 ชั่วโมง และตั้งใจจะ hack เอาเวลาส่วนนี้มาสร้าง app ใหม่ แต่มันกลับทำจริงไม่ได้

ความต่อเนื่องของงานมันน้อยเกินไป บางสัปดาห์ ว่าง 2 วัน บางสัปดาห์ไม่ว่างเลย เมื่อหายจากโปรเจคไปนาน กลับมาก็ลืมแล้วว่าเคยเขียนอะไรไว้ ทำให้งานส่วนนี้ไม่คืบหน้า และต้องพับเรื่อง hack เวลาว่างนี้ออกมาทิ้งไป และหยุดโปรเจคนี้ไว้ก่อน

👨‍🎓 👩‍🎓 Interns to the rescue

นึกได้ว่าช่วงเดือน ก.ค.-ส.ค. เป็นเดือนที่นักศึกษาฝึกงานเข้ามา ก็เลยจอง slot น้องไว้เลย ขอแค่คนเดียวพอ อันนี้ไม่ติดเรื่องมีงานแทรกแล้ว น้องมีงานเดียว ถ้าใครมายืมตัวนี่โกรธ อยากเห็นงานเสร็จ

โชคดีของผม ได้น้อง 3 คน แยกทำ 3 อย่างเลย backend, frontend และ iOS

Spoiler Alert งานเสร็จภายใน 2 เดือน

📖 Tech Stacks

คิดจะย้าย database ไป mongoDB อยู่ มันดูยืดหยุ่นกว่า Firestore แต่กลัว scope creep งานไม่เสร็จ จึงใช้ Firestore เช่นเดิม นอกจากนี้ Serverless กำลังฮิต อยากตั้ง server เป็น serverless ดู

วาง Tech Stacks ไว้ดังนี้

• Frontend — Typescript React, styled-components, antd, GraphQL (Apollo)
• Backend —Typescript Node.JS, GraphQL (Apollo)
• Authorization — Slack API
• Database — Firestore 🔥, Cloud Functions
• Server — Serverless Solutions​ (Cloud Build, Cloud Run)

👐 Authorization ผ่าน Slack OAuth

ขั้นแรกของการเอารูป profile จาก Slack มาใช้ก็ต้องผ่าน flow OAuth ของ Slack ซึ่งมีวิธีตาม

มาทำ Slack OAuth กันเถอะ

🖥 ทำ Serverless พร้อมกับ CI/CD ไปด้วย

อยากได้ Serverless ตอนแรกใช้ now.sh แต่กลับมี issue กับ Firestore เลยหาตัวเลือกใหม่ที่ setup ไม่ซับซ้อนมาก ฝั่ง gcp เพิ่งออก Cloud Run มา ไม่รอช้าจัดมาเลย ใช้งานไม่ยากเลย พอควร ดูวิธีได้ตาม blog ข้างล่าง

Commit ปุ๊ป Deploy ปั๊ปด้วย Cloud Build และ Cloud Run

✉️ แยก Staging และ Production แบบครบ flows ตั้งแต่Slackbot ยันเว็บไซต์หน้าบ้าน

เดิมถือว่าเป็นโปรเจคที่ใช้แค่ภายใน Slackbot ของผมก็มีแค่ Production only เท่านั้น เวลามีบั้คอะไรก็แก้และ deploy ไปเลย

เว็บ HRM ใหม่ มีการแก้ไขโครงสร้าง database พอสมควร ซึ่งกระทบกับ Slackbot ที่คนใช้งานอยู่ทุกวันแน่นอน หนีไม่พ้นการสร้าง staging environment ไว้สำหรับ test โดยเฉพาะ

😉 Frontend แบบ Responsive

ฝั่ง Frontend Web ได้ใส่ Loading Skeleton ตามสมัยนิยม และทำรองรับ Responsive ด้วย

🔙 ทำ Backend APIs แยกออกมาจาก Frontend

หลังบ้านออกแบบเป็น GraphQL นอกเหนือจาก Frontend Website ฝั่ง iOS เพียงแค่ลง Apollo Client ก็สามารถต่อเข้า backend ได้สบายเลย

อันนี้น้อง iOS เขียนเรื่อง GraphQL

มาทำความรู้จักกับ GraphQL กันเถอะ

ทดลองใช้ GraphQL ด้วย Apollo iOS

💂 กลายเป็น ทำทุกอย่างยกเว้นเขียนโค้ด

ผมตั้งใจจะ dev ช่วยน้องไปด้วย แต่น้องกลับสามารถทำได้หมดและยังเก็บรายละเอียดบางอย่างที่เราไม่ได้คาดไว้ด้วย ไอ้เราที่จะช่วย dev กลาย เป็นช่วย test ช่วยตัดสินใจ business logic ที่ยังคลุมเครือ หรือช่วย Review code ให้น้องแทน

🚘 Project Management through Taiga

หน้า sprint และ หน้า issues ของ taiga

แน่นอนว่าเราทำงานด้วยรูปแบบ Agile ซึ่งแบ่งเป็น Sprint นอกจากวิธีการทำงาน ก็เป็น software ที่ช่วย track การทำงาน เมื่อแทบไม่ได้ dev หน้าจอที่เปิดบ่อย ก็ไม่ใช่ vscode แต่เป็นหน้าของ taiga เนี่ยแหละ คอยดูว่าน้องทำงานถึงไหนยังไง และเปิด issue จากนั้นก็คอยมา test

➡️ What’s next?

feedback จากหลายคนที่ใช้ slack บอกอยากใช้บ้าง ตั้งแต่ blog slackbot แล้ว อย่างน้อยก็อยากได้การแจ้งเตือนผ่าน slack บอกว่าใครลา

• เป้าหมายแรก คือเปิดให้ workspace อื่นสามารถ install และใช้เว็บไซต์นี้ได้

Stay tune 🎉

Updated (2019/10/07)

ลองใช้งานได้แล้วที่ https://www.manyfox.com

🐘 อื่นๆ

เรื่อง Typescript แบบง่ายๆ

รัน Script บน Ubuntu ง่ายๆด้วย Typescript