บล็อก

สร้างเว็บ SMOCP ใน 3 วัน

อ่าน 8 นาทีExpress.js, Bootstrap, Google Script
ตอนแรกกะจะไม่ได้ทำ แต่พอเห็นพี่ๆในห้องนั่งวาด Flow diagram กันสำหรับโปรเจกต์ SMOCP ก็สนใจและได้โอกาสเข้าร่วม พัฒนาเว็บไซต์ e-commerce สำหรับสโม วิทยาลัยคอมพิวเตอร์ภายใน 3 วัน

เมื่อเห็นพี่ๆกำลังวางแผนโปรเจกต์ SMOCP (Student Management Organization of Computer Programming) ผมก็รู้สึกสนใจและอยากเป็นส่วนหนึ่งของทีม แม้ว่าตอนแรกจะคิดว่าจะไม่เข้าร่วม แต่ความท้าทายในการสร้างเว็บไซต์ e-commerce ภายใน 3 วันทำให้ผมตัดสินใจลองดู

เครื่องมือและเทคโนโลยีที่ใช้

  • Frontend: HTML, CSS, Bootstrap - เลือกใช้เพื่อความรวดเร็วในการพัฒนา
  • Backend: Express.js - Node.js framework ที่คุ้นเคยและใช้งานง่าย
  • Database: Google Sheets + Google Script - วิธีแก้ปัญหาเฉพาะหน้าที่ได้ผล
  • Deployment: Vercel - deploy ง่ายและรวดเร็ว

วันที่ 1 - การเริ่มต้นและการวางแผน

วันแรกเป็นการวางโครงสร้างเบื้องต้น หน้าเว็บมีเป็นสิบๆหน้า ต้องออกแบบ UI และวาง Flow การทำงานทั้งหมด โชคดีที่มีพี่ภูริเป็น Project Manager ทำให้การทำงานสนุกและรวดเร็วกว่าเดิมมาก เพราะพี่แกรู้ดีว่าเบื้องบนต้องการอะไร

การมี PM ที่ดีจริงๆ สำคัญมาก เพราะช่วยให้ทีมไม่ต้องเสียเวลาไปกับการคิดว่าควรทำอะไร และไม่ต้องไปเดาใจว่าลูกค้าอยากได้แบบไหน พี่ภูริช่วยแปลความต้องการให้เราเข้าใจง่ายขึ้น

บทเรียน: การมี Project Manager ที่เข้าใจทั้งทางเทคนิคและความต้องการของลูกค้า ช่วยให้การพัฒนาเป็นไปอย่างราบรื่นและมีประสิทธิภาพ

วันที่ 2 - ลงมือเขียนโค้ดจริงจัง

วันนี้ผมเริ่มลงโค้ดแบบจริงจัง อย่างแรกเลยต้องไปจัดการโค้ดด้านหลังก่อน เพราะตัวฐานข้อมูลเราใช้เป็นเหมือนรูปแบบฟอร์ม ส่วนนี้ให้พี่ด้าช่วยทำ เพราะผมไม่เคยลองใช้ Google Script มาก่อน

ส่วน UI ต้องนั่งทำจนดึกจนได้รูปแบบที่ลงตัว การใช้ Bootstrap ช่วยให้พัฒนา UI ได้เร็วมาก แต่ก็ต้องปรับแต่งให้ดูไม่เหมือน template ธรรมดา

หลังจากได้ Feedback จากแก๊งสโมบ้านใหญ่ก็เริ่มมาปรับปรุงรอบ 2 พอเสร็จก็เทสเรื่อยๆจนทำ UI เสร็จประมาณนึง การได้รับ feedback เร็วๆ ช่วยมาก เพราะไม่ต้องไปทำผิดทิศทางนาน

ความสำเร็จ: การใช้ Google Sheets เป็นฐานข้อมูลช่วยให้ทีมสามารถจัดการข้อมูลได้ง่าย โดยไม่ต้องตั้งค่า database server ที่ซับซ้อน

วันที่ 3 - วันสุดท้ายแห่งการแก้ปัญหา

วันนี้วันสุดท้ายที่โค้ดจะต้องสมบูรณ์แล้ว แต่มันติดปัญหาที่ทางเบื้องบนติดเรื่องความ Security ผมเลยต้องกระหน่ำแก้ไข Domain และ Host ก็เช่าให้ ความปลอดภัยไม่ต้องพูดถึง บล็อกหมดทุกทางที่จะทำอะไรแปลกๆ

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

ช่วงบ่ายเป็นการ rush ปรับแต่งระบบ security และเตรียมความพร้อมสำหรับการเปิดตัว ทุกคนต่างก็ตื่นเต้นและเครียดกันหน่อย เพราะเวลาเหลือน้อยมาก

ความท้าทาย: การจัดการกับข้อกังวลเรื่อง security ในช่วงสุดท้าย ทำให้เรียนรู้ว่าควรคิดเรื่องนี้ตั้งแต่เริ่มต้นโปรเจกต์

Launch Day - วันแห่งความภาคภูมิใจ

วันนี้มีแพลนเดินทางไปเขาใหญ่เพราะมีแพลนกับคุณนายไว้แล้ว แต่ก็ต้องแบก MacBook ไปเพราะเป็นวันรันเว็บ ช่วงเช้าเป็นช่วงที่เทสระบบทั้งหมดว่าใช้ได้ปกติมั้ย ข้อมูลถูกต้องมั้ย เลขใบเสร็จถูกมั้ย

เรื่องนี้ให้พี่ภูริกับทางบ้านใหญ่สโม CP เทส นี่คือดีมากเพราะพอเทสเราก็รู้ปัญหา ผมก็ต้องจอดปั๊มแก้ให้ แต่ก่อนขึ้นมอเตอร์เวย์ก็บอกพี่ภูริแล้วว่า ถ้าพี่อยากแก้อะไรให้ push ขึ้นมา ผมจะ Deploy ให้เลยทันที

พอถึงที่พักก็ถึงเวลาสำคัญแล้ว อยากอยู่เป็นส่วนร่วมในวันเปิดขายเลย บอกให้พี่ภูริเปิดรูปให้หน่อย อยากมีส่วนร่วม พี่นั่งนับถอยหลัง Launch เว็บ

ช่วงเวลาแห่งความสำเร็จ

พอ Order แรกเข้านี่ดีใจมากๆๆ ไม่คิดว่าจะเร็วขนาดนี้!มันฟินมากเลยที่เว็บที่เราทำมันมีคนใช้จริง

ความรู้สึกเมื่อเห็นผลงานของตัวเองถูกใช้งานจริงๆ เป็นสิ่งที่ไม่สามารถอธิบายได้ มันทำให้รู้ว่าสิ่งที่เราทำมีความหมายและเป็นประโยชน์จริงๆ

สิ่งที่ได้เรียนรู้จากโปรเจกต์นี้

บทเรียนสำคัญ:

  • การทำงานเป็นทีมในเวลาจำกัด: การสื่อสารที่ชัดเจนและการแบ่งงานที่เหมาะสมสำคัญมาก
  • การจัดการปัญหาเฉพาะหน้า: ยืดหยุ่นและหาทางออกที่ใช้ได้จริงในเวลาจำกัด
  • การใช้เครื่องมือใหม่: Google Script เป็นทางเลือกที่ดีสำหรับ prototype รวดเร็ว
  • ความรู้สึกเมื่อเห็นผลงานถูกใช้: แรงจูงใจที่ยิ่งใหญ่ที่สุดสำหรับ developer

สิ่งที่จะทำต่างไปถ้าได้ทำใหม่

  • วางแผนเรื่อง security ตั้งแต่เริ่มต้น
  • เตรียมแผน backup สำหรับการ deploy
  • ทำ testing แบบ automated เพื่อลดเวลา manual testing
  • สร้าง documentation ระหว่างการพัฒนา

อ่านเรื่องราวต้นฉบับได้ที่โพสต์ Threads

อ่านโพสต์ต้นฉบับ