วิธีทำระบบเผยแพร่บล็อกเทคนิคอัตโนมัติด้วย Slackbot

• กระบวนการและวิธีการพัฒนา Slackbot สำหรับเผยแพร่คอนเทนต์ไปยังบล็อกเทคนิคโดยอัตโนมัติ
• กระบวนการพัฒนา
  • 1. วางแผนอัตโนมัติ
    • ประการแรก เมื่อต้องเผยแพร่คอนเทนต์ไปยังบล็อกเทคนิค ได้ตัดสินใจรวมเครื่องมือเดิมที่ใช้อยู่ (Notion, GitLab) เข้ากับเครื่องมือใหม่ (Slackbot) เพื่อช่วยให้สมาชิกทีมปรับตัวกับระบบเผยแพร่ใหม่ได้ง่ายและรวดเร็ว
    • ประการที่สอง ตัดสินใจใช้เฟรมเวิร์ก TypeScript เนื่องจาก TypeScript ถูกใช้อย่างแพร่หลาย และเป็นภาษาที่มี static type จึงช่วยให้พัฒนาได้อย่างเสถียร ซึ่งเป็นประโยชน์ต่อการบำรุงรักษาระบบเผยแพร่ใหม่ให้ทำได้ง่ายและสะดวก
    • ประการที่สาม รองรับการโต้ตอบที่เป็นมิตรกับผู้ใช้
    • เหตุผลที่เลือก Slackbot
      • Slackbot ตอบโจทย์หลักการทั้งหมดเหล่านี้
      • Slackbot มีเฟรมเวิร์กชื่อ Bolt ให้ใช้งาน รองรับทั้ง JavaScript, Java, Python และยังมีเอกสารที่ดีด้วย เมื่อนำมาอ้างอิงจะช่วยให้พัฒนาเครื่องมืออัตโนมัติสำหรับเผยแพร่บล็อกเทคนิคได้ง่าย อีกทั้งยังสามารถทดสอบเครื่องมือบนแอปพลิเคชัน Slack ได้แม้รันในสภาพแวดล้อม local
      • Slack รองรับการออกแบบหน้าจอที่ผู้ใช้มองเห็นผ่านฟีเจอร์ Block Kit โดยสามารถออกแบบ flow ของหน้าจอเป็น JSON และจัดการข้อมูลด้วยฟังก์ชัน ทำให้โต้ตอบได้อย่างเข้าใจง่าย
  • 2. ออกแบบหน้าจอ
    • Slack รองรับทั้ง message และ modal สำหรับใช้งานโต้ตอบกับผู้ใช้
    • นำ workflow การเผยแพร่คอนเทนต์ไปยังบล็อกเทคนิคมาสร้างเป็น modal
    • ขั้นตอนการเผยแพร่บล็อกเทคนิคด้วย Slackbot
      • โพสต์บล็อก: เลือกว่าจะเผยแพร่คอนเทนต์อะไรและไปที่ใด
      • ตรวจสอบความถูกต้องของบล็อก: ตรวจว่าคอนเทนต์ที่จะเผยแพร่มีองค์ประกอบที่ฝั่งฟรอนต์เอนด์ต้องใช้ครบหรือไม่ เช่น metadata และ cover image
      • ตรวจสอบ GitLab issue/MR: ขั้นตอนสร้าง issue และ MR ใน GitLab หากมี issue และ MR อยู่แล้ว ก็จะ commit เข้าไปที่ MR นั้น
      • ข้อความเสร็จสมบูรณ์: เมื่อเผยแพร่เสร็จ จะทิ้งข้อความที่มีลิงก์ต้นฉบับคอนเทนต์ใน Notion และลิงก์ GitLab MR
  • 3. ออกแบบและพัฒนาบอต
    • ต้องการให้บอตตัวเดียวโต้ตอบกับบริการอื่นทั้งหมด เช่น Notion และ GitLab
    • เมื่อสร้าง CI/CD pipeline บน GitLab เพื่อ deploy แอปพลิเคชันหรือแก้ไขบอต มองว่าวิธีนี้มีข้อได้เปรียบมากกว่า
    • ในการพัฒนาบอต ใช้ภาษา TypeScript และเฟรมเวิร์ก Bolt ที่ Slack รองรับ
    • โครงสร้างโฟลเดอร์นำแนวคิดมาจาก NestJS
      • workflow.ts : กำหนดหน้าจอและการไหลของข้อมูล และเป็นจุดเริ่มต้นของทุก workflow
      • service.ts : กำหนด business logic
      • model.ts : กำหนด data type สำหรับ Slack หรือ third-party API
      • modal.ts : กำหนดหน้าจอที่ใช้โต้ตอบกับผู้ใช้
  • 4. วิธีการทำงานของบอต
    • เมื่อพิมพ์คำสั่งในช่องใดก็ได้บน Slack บอตจะถูกเรียกใช้งาน
    • จากนั้นเลือกชื่อคอนเทนต์ใน Notion และช่องที่จะเผยแพร่คอนเทนต์ แล้วกดปุ่ม “ส่ง” ระบบจะค้นหาโดยอัตโนมัติว่ามีการกรอก metadata ที่จำเป็นครบหรือไม่
    • metadata ที่ต้องกรอกได้แก่ GitLab ID, ชื่อผู้เขียน, ชื่อไฟล์ md, cover image, <!--truncate--> เป็นต้น และหากขาดอย่างใดอย่างหนึ่งจะไม่สามารถเผยแพร่คอนเทนต์ได้
    • หากกรอก metadata ที่จำเป็นครบทั้งหมดแล้ว จะสามารถกดปุ่ม “ดำเนินการต่อ” เพื่อไปยังขั้นตอนถัดไปได้
    • ในขั้นตอนนี้ issue และ MR ของคอนเทนต์นั้นจะถูกสร้างใน GitLab โดยอัตโนมัติ
    • ระบบยังติด label ให้กับ MR อัตโนมัติ และรัน pipeline สำหรับเผยแพร่คอนเทนต์ให้อัตโนมัติด้วย
    • เมื่อรัน pipeline เสร็จแล้ว จะสามารถตรวจสอบสถานะการเผยแพร่คอนเทนต์ล่วงหน้าได้ผ่าน GitLab Review App
• ผลลัพธ์หลังนำมาใช้
  • ความถี่ที่ technical writer และ engineer สร้าง MR เพื่อเผยแพร่คอนเทนต์ไปยังบล็อกเทคนิคเพิ่มขึ้นประมาณ 30%
  • เผยแพร่คอนเทนต์ได้ภายใน 1 นาทีด้วยการคลิกเพียงครั้งเดียว
  • อัตราความล้มเหลวของ pipeline ลดลงต่ำกว่า 5%