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

วางแผน

รองรับคน

เนื่องจากทุกคนต้องการเข้าไปดูคะแนนของตัวเองให้เร็วที่สุด ทำให้จำเป็นต้องรับผู้ใช้เข้ามาจำนวนมาก ถ้าเป็นคนอื่นก็อาจจะมองหาระบบ load balance ดูๆ จัดการแบบต่อให้โหนดใดโหนดหน่งล่ม ก็ยังต้องมีโหนดอื่นรองรับ แต่จากการที่ผมอยู่กับ Github pages มาเนิ่นนาน มีช่วงหนึ่งบล็อกนี้เคยเจอคนทะลักเข้ามาเป็นหมื่นๆ พร้อมกัน ก็ยังสามารถให้บริการคนได้โดยไม่ล่ม และ Github pages เองสามารถสร้าง Private Repo โดยเปิดเป็น pages ได้ เมื่อเราต้อง robots.txt ไว้ให้บอตไม่เข้ามาสแกน ก็สามารถป้องกันการดูคะแนนของคนอื่นได้ระดับหนึ่ง

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

ยืนยันตัวตน

จากตอนที่สมัครเข้าค่ายปรับพื้นฐานจะมีการขออีเมล และผู้เข้าร่วมทุกคนจะมีรหัสนักศึกษาอยู่แล้ว เราจึงใช้สิ่งนี้ในการยืนยันตัวตน โดยไฟล์ static page ที่สร้างขึ้นจะถูกตั้งชื่อตามฟังก์ชั่น md5(uid+"|"+email) ทำให้ไม่สามารถไล่ไปดูรหัสของคนอื่นได้

สร้างไฟล์

จาก Github pages สามารถใช้ได้เพียง static pages เท่านั้น งานนี้เราจึงใช้ Jekyll เป็นตัวสร้างหน้าขึ้นมาโดยต้องเปลี่ยน Google Sheet ให้เป็นหน้าเว็บให้ได้

Mobile First!

อย่าลืมทำให้เหมาะกับขนาดมือถือ เนื่้องจากผู้มาเข้าค่ายทุกคนใช้มือถือในการเข้า ไม่ได้ใช้คอมเข้าจากที่บ้าน

เริ่มงาน

แปลงจาก Google Sheets เป็น Markdown

เริ่มแรกเรามีไฟล์ Google Sheets เราจะทำการดาวน์โหลดมาเป็น CSV เพื่อจะทำการแปลงเป็น markdown ต่อไป

จากนั้นก็จะทำการแปลง csv ให้เป็นไฟล์ md โดยผมจะใช้ node.js โดยเขียนได้ดังนี้

เพียงเท่านี้ก็จะได้ไฟล์ .md ออกมาแล้ว

เขียน template สำหรับแสดงข้อมูลบน Jekyll

ทำการสร้าง template สำหรับแสดงอย่างง่ายขึ้นมาอย่างรวดเร็วแบบ

สร้างหน้าเข้าสู่ระบบ

เมื่อเราสร้างไฟล์จากคำสั่ง md5(uid+"|"+email) เราก็รอให้ผู้ใช้กรอกรหัสนักศึกษากับอีเมลลงมา เท่านั้นเอง ถ้ากรอกผิดก็จะ 404 เขียนโค้ดได้ดังนี้

ขึ้น Github!

นำไฟล์ข้อมูล .md มาวางไว้ใน โฟลเดอร์ _score ในโฟลเดอร์ที่เราเตรียม jekyll ไว้ เพิ่มโค้ดลงใน _config.yaml เพื่อให้รองรับ collection ชื่อ score ดังนี้

เสร็จแล้ว

เสร็จแล้ว อัปโหลดโลด! ทัน 1 คืนด้วย

เมื่อนำไปใช้จริง

พอบอกให้ทุกคนเข้าเท่านั้นแหละ ขึ้น 404 not found หมดเลย เนื่องจากดันไปต่อหน้ารหัสนักศึกษาด้วยเลข 0 ทำให้ 0 เกินมาตัวนึง ดีที่หาสาเหตุเจออย่างรวดเร็วและแก้ได้ ทำให้เข้าได้ แต่ดันมีผู้ใช้บางส่วนยังเข้าไม่ได้ เนื่องจากตอนสมัคร กรอกอีเมบตัวเองผิด และทางเราก็ไม่ได้มีการให้ยืนยันเมลก่อนด้วย ดังนั้นเลยทิ้งแชทเฟสไว้บ๊ตไว้ แล้วให้ทักมาหาเป็นรายคนเลย

ทิ้งท้าย

นี่ก็เป็นไอเดียที่ไม่เลยเลย หากจะนำ static page ไปทำระบบดูคะแนน แทนที่จะต้องทำ load balance จำนวนมาก ช่วยประหยัดเวลาการตั้งค่าไปได้เยอะ