OhSheet! เว็บแชร์โน้ตเลคเชอร์ที่สร้างด้วย Vue และ Parse

จบเทอมแรกของปีสามสักที หนึ่งในโปรเจ็กต์ด้านโปรแกรมมิ่งของเทอมนี้ก็คือ OhSheet! โปรเจ็กต์ของวิชา Software Engineering โปรเจ็กต์นี้นั่นเอง

เท้าความถึงโปรเจ็กต์วิชานี้ก่อน อาจารย์ให้คิดแอปพลิเคชันอะไรก็ได้ขึ้นมาแล้วเอาไปเสนอ ทีมเราก็คิดออกมาหลายอย่าง เช่น แอปติดตามรถสองแถว แอปสั่งอาหารในโรงอาหาร และสุดท้ายเรามาจบที่ (เว็บ) แอปแบ่งปันสรุปบทเรียน

กระบวนการพัฒนาเราทำเป็น Agile ด้วย Scrum เต็มรูปแบบ ตามที่เรียนในวิชานี้ โดยแบ่งเป็นสี่ Sprint ให้แต่ละ Sprint มีเวลาราว 20–30 วัน เริ่มตั้งแต่ 1 กันยายน 2561 จนถึง 18 ธันวาคม 2561

เครื่องมือที่ใช้

• YouTrack ใช้จัดการงาน จากประสบการณ์คือความสามารถเทียบเคียง Jira เลย มี Agile board มี integration กับบริการอื่นๆ แล้วก็ใช้บัญชีเดียวกับ JetBrains ก็ได้
• Microsoft Teams ใช้คุยงาน ประชุมออนไลน์ อัดการประชุมได้ด้วย ตอนวิดีโอคอลก็โฟกัสที่คนพูดให้อัตโนมัติ ดีงาม แล้วก็มี integration กับหลายบริการด้วย

Technology Stack

• Parse เป็นฐานข้อมูลและระบบยืนยันตัวตนต่างๆ
• Vue เป็นเว็บแอปฝั่งผู้ใช้
• NodeJS + Express เป็นเซิร์ฟเวอร์ประมวลผลไฟล์ที่อัปโหลด
• DigitalOcean Spaces เก็บไฟล์ที่อัปโหลด และเสิร์ฟด้วย CDN

Single-Page Application ครั้งแรก

โปรเจ็กต์ OhSheet! นี้ก็เป็นโปรเจ็กต์แรกที่เราทำเป็น Vue SPA แบบจริงจัง (เคยลองครั้งนึงแบบงงมากๆๆๆๆ เมื่อสัก 13 เดือนที่แล้ว) ปกติจะทำแนว Server-Side Rendering มากกว่า แล้วค่อยใช้ Vue มาช่วยงานฝั่งไคลเอนต์

สำหรับ data store นั้นเราใช้ Puex แทน Vuex เพราะว่ามีขนาดเล็กกว่า และในโปรเจ็กต์นี้ไม่ได้ต้องการฟีเจอร์ของ Vuex มากมายด้วย แต่ถ้าหากต้องการจะเปลี่ยนไปใช้ Vuex ในอนาคต ก็สามารถเปลี่ยนได้เลยเพราะ Puex ใช้ API เดียวกัน และยังรองรับ Vue Devtools ด้วย

หมายเหตุ: วันนี้เข้าไปดูอีกที Puex ขึ้นสถานะ deprecated แล้ว…

ในโปรเจ็กต์นี้เรามีเวลาไม่มากเท่าไร เพราะยังมีโปรเจ็กต์วิชาอื่นอีกสี่วิชา 🤯 ดังนั้นเราเลยประหยัดเวลาการออกแบบและโค้ดคอมโพเนนต์เอง ด้วยการใช้ Element UI เป็นเฟรมเวิร์ก UI ไปแทน เพราะมีคอมโพเนนต์ที่เราน่าจะได้ใช้ในโปรเจ็กต์นี้หลายรายการ ซึ่งใช้แล้วก็รู้สึกว่ายืดหยุ่นดี คอมโพเนนต์สามารถปรับออปชั่นได้พอสมควร และยังอยู่ในสถานะ active development แต่ยังมีบั๊กเล็กน้อย ก็ช่วยๆ รีพอร์ตกันไป

แบ็คเอนด์ เสกง่ายด้วย Parse

ด้วยเวลาที่จำกัดแบบนี้ เราเลยต้องหาตัวช่วยที่ทำให้งานเสร็จเร็วที่สุดโดยยังมีคุณสมบัติครบกับที่วางแผนไว้ จุดสำคัญของงานไม่แพ้ส่วน UI ก็คือระบบฐานข้อมูล ระบบยืนยันตัวตน ซึ่งเราปล่อยตรงนี้ให้เป็นหน้าที่ของ Parse และ Back4App

หลายคนอาจจะยังไม่รู้จัก Parse แต่ถ้าบอกชื่อ Firebase ก็น่าจะรู้จักกัน มันคือแพลตฟอร์มแบบเดียวกันเลย มีทั้งฐานข้อมูล ระบบยูสเซอร์ และคลาวด์ฟังก์ชัน แต่ Parse เนี่ยเป็นโอเพ่นซอร์สที่มีผู้สนับสนุนใหญ่ๆ อย่าง Back4App, Facebook และ DigitalOcean ด้วย

Parse นี่เราจะต้องโฮสต์เอง แต่เราจะโฮสต์เองทำไมถ้ามีคนโฮสต์ให้แล้ว 😂 คนคนนั้นก็คือ Back4App นั่นเอง คุ้นชื่อใช้มั้ย เพราะชื่อนี้อยู่ในย่อหน้าที่แล้วไง เราเลือกใช้ Back4App เป็นผู้ให้บริการ Parse ของเรา

ในเว็บแอปเราก็จัดการใส่ระบบสมัคร ล็อกอิน รีเซ็ตรหัส อย่างง่ายดาย สิ่งที่เราชอบใน Parse ก็คือ SDK ที่ใช้งานง่าย และระบบฐานข้อมูลแบบ NoSQL ที่รองรับ relationship สามารถเก็บข้อมูลเป็นพอยน์เตอร์ของอ็อบเจ็กต์อื่นได้ เก็บเป็นอะเรย์ของพอยน์เตอร์ก็ได้ และดึงข้อมูลของพอยน์เตอร์นั้นขึ้นมาในควีรี่เดียวกันได้ การควีรี่ก็ใช้วิธีหาจากพอยน์เตอร์ หรือหาจากข้อมูลที่อยู่ในอะเรย์อีกทีก็ยังได้

ถ้าเทียบกับฐานข้อมูลแบบ SQL แล้ว ฐานข้อมูลของ Parse จะมองรีเลชัน (ตาราง) เป็นคลาส เช่น User, LectureNote, LectureCategory และเราสามารถดูข้อมูลในรูปแบบตารางได้เหมือนเป็นฐานข้อมูลแบบ SQL เลย นั่นเป็นเพราะในคลาสจะถูกกำหนดว่ามีคอลัมน์ (แอททริบิวต์) อะไรบ้าง และแต่ละคอลัมน์เป็นประเภทข้อมูลอะไร ดังนั้นแต่ละอ็อบเจ็กต์ในคลาสนั้นจะมีข้อมูลที่ไม่สะเปะสะปะ

ขาย Parse พอสมควรแล้ว ก็จะบอกว่าใช้ง่ายมากครับ ถ้าว่างๆ ก็อยากจะเขียนบทความเกี่ยวกับ Parse อยู่นะ

OhSheet! ทำอะไรได้บ้าง

เว็บไซต์ OhSheet! ของเราเป็นเว็บไซต์สำหรับให้นักศึกษาเอาโน้ตสรุปมาแบ่งปันกัน ผู้ใช้สามารถอัปโหลดโน้ตสรุปของตัวเอง ใส่หัวข้อ วิชา ระดับชั้น เพื่อให้สามารถค้นหาโน้ตสรุปได้ง่ายขึ้นด้วยสามตัวแปรดังกล่าว

ในโน้ตสรุป ผู้ใช้สามารถติดดาวโน้ตนั้น เพื่อเก็บไว้ให้หาทีหลังได้ง่าย สามารถโหวต 👍 และ 👎 ได้ รวมทั้งสามารถรีพอร์ตโน้ตนั้นได้เช่นกันถ้าเนื้อหามีปัญหา

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

สำหรับโปรไฟล์ของผู้ใช้ ​ณ ตอนนี้เราก็พอจะมีสิ่งดึงดูดใจอยู่บ้าง ก็คือเป็น “badge” หรือตราประทับในหน้าโปรไฟล์ เช่น ล็อกอินติดต่อกันหนึ่งสัปดาห์ อัปโหลดโน้ตสรุปครบ 20 อัน เป็นต้น

หากมีเวลามากกว่านี้ ก็อยากจะเพิ่มฟีเจอร์การติดตาม (follow) ผู้ใช้ เพื่อรับการแจ้งเตือนโน้ตสรุปใหม่ๆ แล้วก็มีหน้าฟีดว่าคนที่เราติดตาม อัปโหลดโน้ตสรุปอะไรใหม่ๆ กันบ้าง รวมทั้งเพิ่มการรองรับการสร้างโน้ตสรุปในแบบต่างๆ เช่น ไฟล์ภาพ หรือเพิ่มหลายไฟล์ เป็นต้น เพื่อให้ดูเป็นสังคมที่เอื้อต่อการแชร์โน้ตสรุปมากขึ้น

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

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

แต่สำหรับบล็อกนี้ก็จบเท่านี้ก่อนละกันครับ ขอบคุณที่อ่านกัน และสวัสดีครับ 🥳