ประสบการณ์คนเขียนระบบ Vote ดาวเดือน IT-3K 2019 #16 – จากเด็ก alchemist ปี 2 เอ๊ง

Published in

Alchemist

4 min readFeb 6, 2019

สวัสดีค่ะ วันนี้จะมาเล่าประสบกาณ์การเขียนระบบ Vote ดาวเดือน IT-3K 2019 ใน วันที่ 2 กุมภาพันธ์ 2019 ณ มหาวิทยาลัยเทคโนโลยีพระจอมเกล้าธนบุรี ที่ผ่านมา ก่อนอื่นต้องขอบอกให้คนที่ไม่ทราบได้รู้ก่อนว่า IT-3K คืออะไร ?

งาน IT-3K คืออะไร ?

เป็นงานที่ รวมตัวคณะเทคโนโลยีสารสนเทศ ทั้ง 3 พระจอมมาแข่งกีฬาสานสัมพันธ์กัน (คล้ายๆ ประเพณีฟุตบอลจุฬาธรรมศาสตร์) ภายในงานก็จะประกอบไปด้วย การแข่งกีฬา แข่งหลีด และประกวดดาวเดือน ซึ่งปีนี้ บางมด (มหาวิทยาลัยเทคโนโลยีพระจอมเกล้าธนบุรี) เป็นเจ้าภาพ ก็สนุกเลยสิ ฝุ่นเยอะ ฟุตบอล ฟุลซอล ก็ยกเลิกการแข่งไป .. ทำให้ถูกจัดที่โรงยิม เราเป็นเจ้าภาพ ทุกอย่างต้องบริการอย่างดี ในยิมก็จะเปิดแอร์รอตั้งแต่เช้า ตามด้วยเครื่องฟอกอากาศอีกประมาณ 7 ตัว และ access point อีก 10 ตัว นำมาติดตั้ง เพื่อความสะดวกสบายของคนในงาน และระบบ vote ก็เป็นส่วนหนึ่งในงานนั้น

เริ่มงาน ……. (เฉพาะทีมทำระบบ)

ต้องบอกก่อนว่า เป็นครั้งแรกที่ทำระบบให้คนใช่พร้อมๆ กัน เยอะขนาดนี้ เราเริ่มวางแผนที่จะทำระบบกันใน วันที่ 9 ม.ค. 2019 คือ ตอนนั้น เราเองก็พึ่งทำระบบไอติมเสร็จ และกำลังจะทำระบบ wippo ต่อ (เดี๊ยวจะเล่าให้ฟังในครั้งหน้า) ในวันนั้น ทุกที่ทำระบบมานั่งคุยกัน ถึง flow ของงาน user story และทำ Blueprint

และเราก็ได้ตกลง framework และ Tools ที่จะใช้

ใช้อะไรบ้างงงงง ในการเขียนระบบ

Next.js เหตุผลที่ใช้ Next.js เพราะขี้เกียจเขียน Route เอง และ คุ้นเคยกับการใช้งาน แต่ข้อเสียก็มี คือ บางครั้งมันก็ค้าง ตอนเขียน ก็จะงง ว่าทำไมมัน error อยู่ทั้งๆ ที่แก้มันไปแล้ว ตอน refresh หน้าใหม่อีกรอบ เพื่อให้มันแสดงผลใหม่
socket.io ตัวเอกเลย ลองอ่านดู flow ก็จะรู้ว่าต้องใช้ แต่ถ้ามีตัวอื่นแนะนำ ก็บอกมาเลยนาจา (พึ่งเคยเขียนครั้งแรก)
Laravel ตอนที่เขียน itim หลังบ้านก็ใช้ และเพื่อนคนในทีมก็เขียนเป็น เลยเลือกตัวนี้ กะว่า เราจะเขียน fontend แบบเต็มๆ ให้คนอื่นเขียน backend ไปเลย (แต่ก็มีแอบเข้าไปเขียนอยู่)
Ant design มันบอก support react แต่ใช้ยากตลอด อะไรฟร้ะ
React-strap กราบบบ code ดู clean ขึ้นเยอะ แต่ก็ยังมีใช้ className อยู่บ้าง
styled-components ขาดไม่ได้เลย เดี๊ยวเว็บไม่เหมือนใน UX/UI
ทำ Design System

Flow ของระบบเป็นยังไง ?

เราจะมี หน้าจอ 3 อัน ที่ใช้แสดงผล คือ ของ user เพื่อให้ผู้ใช้สามารถเข้ามา vote ได้ projector จะแสดงบน หน้าจอ projector จริงในวันงาน และ ของ admin ที่เอาไว้ควบคุมทั้ง projector นับจำนวนคนที่เข้าระบบ และ รวมทั้ง หาคำนวณผลในการ vote

Flow ของ ระบบ

ระบบทั้งหมด จะถูกควบคุมด้วย admin

อธิบายระบบ — ในหน้าแรกที่ user เข้า link มา จะไม่เจอปุ่ม login ซึ่ง admin จะรอ ให้คนเข้ามาเยอะที่สุด จากนั้น จึงจะส่ง รอบ (Round ซึ่งจะมี 2 รอบ) ไปให้ user แต่ละคนเรื่อยๆ แล้ว ปุ่ม Login ก็จะ show ให้ user ได้ทำการ login และไปหน้า select เพื่อเลือกผู้ประกวด พอเลือกเสร็จ ก็จะไปหน้า โปรดรอสักครู่ … จากนั้น admin จะไปกดเปลี่ยน projector เป็น หน้า waiting ฝั่ง admin ก็จะดูว่า user เข้ามา หน้า โปรดรอสักครู่ … เท่ากับหน้า login หรือไม่ เอาให้ใกล้เคียงที่สุด แล้วก็สั่งเปลี่ยนเป็น หน้า count 321 พอ count 321 เสร็จ projector จะสั่งให้ user เปลี่ยนหน้า ไปหน้า vote ส่วน projector จะ count 10 วินาที (พอจะเห็นปัญหาแล้ว..) จากนั้น projector ก็เปลี่ยนไปหน้า timeout ส่วนฝั่ง user จะไปหน้า result ที่แสดงผลว่าตัวเองกดไปเท่าไหร่ ……

เข้าไปดูระบบ ได้ที่ .. https://github.com/safesit23/IT3K-16th-PopularVote.git

เข้าไปดู การใชังานระบบ ได้ที่ https://youtu.be/14zXL3CUj0A

ปัญหาที่พบ …..

socket.io ส่งช้า และ เข้าใจแล้วว่า เมื่อเขียน function ทุกอย่างเอามารวมกันที่ port เดียว จะทำให้ฝั่ง server ให้ พี่ปุ๊ แนะนำให้ใช้ namespace แทน คือ แยกเป็น path ออก มา เพื่อเอาไว้นับจำนวนคน กับอีกอันที่เอาไว้ส่ง ข้อมูล เฉยๆ (แต่ก็ยังแก้ไม่ได้ 100% เพราะถ้ามีคน request หรือยิงเข้ามาเยอะๆ ก็พังได้เหมือนกัน)

// server.js
const select = io.of('/select');
select.on('connection', function(socket){
  socket.on('countSelect',(count) => {
    countSelectPage = countSelectPage + count
    console.log('Select Page : ',countSelectPage)
    io.emit('getCountSelect',countSelectPage)
  })
});//select.js
const socket = socketIOClient(`${ENV.PATH_SOCKET}/select`);

ตอนใช้ระบบจริง (ซึ่งไม่ได้อยู่ ถึงตอนใช้ เพราะว่า แข่งบาสเสร็จ ก็ไม่ไหวแล้ว 555 ) ทำให้รู้ว่า Laravel default ที่รับ request มันตั้งไว้ที่ 60 ปั๊ดโถ่ !!! นี่ต้องขอบคุณเพื่อน ที่เจอและแก้ได้ทันรอบที่สอง ถามว่า Test มั้ย Test ค่ะ แต่ Test แค่ 6 คน และตอนยิง Load Test ก็ Test แค่ของ socket.io

//Kernel.php
'api' => [
            'throttle:60,1', //โถ่ววว comment มันปายยย ...
            'bindings',
        ],

บาง device ไม่ลองรับ การทำงานของ code ที่เขียนลงไป โอ้ย !! เดี๋ยวดีเดี๋ยวร้าย
ipone นี่ ตัวดีเลย 555+
UX/UI แก้บ่อย เรา frontend ก็ต้องแก้ตาม 555+

รู้สึกว่า ยังคุยงาน และ วางแผนไม่ดีพอ พึ่งรู้ว่า ทำแล้วส่งครั้งเดียวคือ การทำงานแบบ water fall (fall จริงๆ ดังตุบ เลย…) ต่อไปนี้ จะทำ Test ให้ครอบคุมและส่งงานบ่อย จะพยายามทำงานแบบ Aglie จริงๆ ละ 555
ลืมคิดว่า ระบบนี้มันใหญ่คนใช้เยอะ ประมาทไปนิดนึง
เขียน code ยังไม่ clean และ clear มากพอนะจ๊ะ มายจ๋า … ต่อไปนี้ จะเขียนให้ clean และ clear คิดก่อนเขียน
ฝั่ง infra (ซึ่งเป็นเพื่อนเราเอง) มัน deploy ไม่ได้ ก็จะทักมาถามตลอด ไอ้เราก็มั่วแต่ตอบเพื่อน เกือบไม่ได้เขียน code (คราวหน้าก็สอนเรา deploy สิ่ 55+)
User ส่วนใหญ่ ใช้เน็ตตัวเอง ทำให้ เวลาใช้ระบบมันช้า นั่นไม่ต้องถามเลย ว่าทำไมมันค้าง เพราะเครื่อง serve ตั้งอยู่ในมหาวิทยาลัย ถ้าใช้ 4G ลงนึกตามดูว่า กว่าจะเจอ link นี้ ต้อง next hop กี่ครั้ง มันช้าค่ะ จริงๆ ก็ผิดที่ฝั่งเรา ไม่ได้แจ้งให้ทราบ ต้องขออภัย User ทุกคนด้วยค่ะ กับปัญหาหลายอย่างที่ควบคุมไม่ได้จริงๆ ค่ะ

สิ่งที่ได้

ได้ลองใช้ Socket
ได้เขียน Method ที่จะไป Get ข้อมูลหลังบ้าน
เขียน fontend เต็มตัว
ได้แก้ Error ต่างๆ อ่าน Error เป็นแล้ว เย้ !!
ได้ F12 ดู Network, ดู Request เป็น
ได้โครงสร้างของ Next.js มากขึ้น
ได้มิตรภาพ
ได้รับคำติชมต่างๆ ทั้งดีและไม่ดี ความรู้สึกที่ได้ คือ ถ้าเป็นแง่บวก จะเก็บไว้เป็นกำลังใจ แต่ถ้าเป็นในแง่ลบ ก็จะเก็บไว้เป็นแรงผลักดันตัวเอง

ขอบคุณ

ตัวเองที่มีไฟและความพยายามที่อยากทำต่อ คงเพราะ พี่ๆ บอกว่า “อยู่นี่ อยากทำไรทำเลย อยากลองอะไรลองเลย ออกไปอยู่ข้างนอกเมื่อไหร่ …. จะมาลอง จะมาพัง ไม่ได้ละนะ”
ขอบคุณ เซฟ ที่เป็นคนคอยประสานงานให้ทุกๆ อย่าง เราแอบบ่นนายด้วยแหละ ว่าทำไมไม่มานั่ง code ตอนนี้เราเข้าใจแล้ว ขอโทษ ที่บ่นไป และบางทีเผลอเหวี่ยงใส่นายบ้าง ขอโทษจริงๆ
ขอบคุณ ข้าวตู ผู้เอาเว็บเราขึ้น serve และ ค่อยรับฟังทุกปัญหา และ บอกปัญหาให้กับกู ขอบคุณค่ะ -0-
ขอบคุณ จิ๋ว ที่เข้ามาช่วยทำ UX/UI ไม่งั้นนะ ไม่รอดแน่ๆ
ขอบคุณ แบงค์ ที่เข้าใจกู คุยและรู้เรื่อง 555
ขอบคุณ อ๊อฟ ที่พยายามหาทางให้ frontend เขียนง่ายที่สุด
ขอบคุณ เปเป้ ที่มาช่วย code คืนวันสุดท้าย Test ระบบ และ แก้ bug ให้
ขอบคุณ มอส design ผู้เป็น reference ให้ระบบ vote ในครั้งนี้
ขอบคุณ บอส ที่เข้ามาช่วย มอส
ขอบคุณปอย ผู้ของานไป แล้วได้เลย
ขอบคุณพี่ปุ๊ ที่แนะนำ บางอย่างให้
ขอบคุณ พี่เฟิร์ส ที่ให้คำแนะนำ ในการเขียน code
ขอบคุณพี่เต้ และพี่ฟรุก ที่เป็นที่ปรึกษาให้
ขอบคุณ คำติชม user ทุกคน ต่อไปนี้ จะนำคำติชมเหล่านั้นเป็นแรงผลักดันให้พัฒนาให้ดีขึ้น

สุดท้าย อยากบอกว่า “เราโตขึ้นอีกขั้นแล้วนะ …… และเราจะพัฒนาตัวเองไปเรื่อยๆ “ :)

— — -https://github.com/mild20091931/timer-it3k.git— นอกจากระบบ vote ที่ใช้ในงาน IT3-K แล้ว ยัง Timer ที่ใช้ในงานด้วยนะ

ขอโทษทุกคน ที่ระบบ ใช้การได้ไม่ดี ต้องขอภัยจริงๆ เหตุมันเกิดจากปัจจัยหลายๆ อย่าง ก็ตามไปอ่าน blog ของเพื่อน ในวันงานได้ที่ https://alchemist.itbangmod.in.th/@kaotu — ปัญหาเยอะจิมๆ

>> Next station Wippo