สวัสดีครับ บล็อกนี้เป็นการบันทึกการทำเว็บโปรเจคเล็กๆของผม (อาจจะไร้สาระสักหน่อย) เรื่องมีอยู่ว่าหลายวันก่อนผมได้ลองเล่น Flutter Web ซึ่งเป็นการเขียนเว็บโดยใช้ Flutter โดยจะ build ด้วยการแปลงไฟล์ dart ออกมาเป็น js ผมเลยลองเขียนโปรเจคเล็กๆโปรเจคนึงขึ้นมา เป็นเว็บแอปสำหรับคำนวณค่าส่งและส่วนลด เพราะว่าที่ออฟฟิศมักจะสั่งอาหาร delivery มาบ่อยๆแล้วก็จะมีค่าส่งและส่วนลดทำให้คำนวณและหารกันยุ่งยาก เสร็จแล้วก็จะ deploy ไปที่ Github Pages ผมตั้งชื่อโปรเจคนี้ว่า Billing Valley

ตอนก่อนหน้านี้ วิธีติดตั้ง Flutter Web + deploy Github Pages

แน่นอนว่าโปรเจคนี้ผมได้ publish ไว้ที่ Github ด้วย สามารถ clone หรือ fork มาลองเล่นได้เลยนะ

https://github.com/benznest/billing_valley

สำหรับตัวเว็บสามารถลองใช้งานได้ที่ Github Pages ของผม

https://benznest.github.io/billing_valley/web/

มาดูกันว่ามีฟีเจอร์อะไรบ้างใน Billing Valley

v.1

เวอร์ชันแรกลองเขียนออกมาง่ายๆก่อน หน้าแรกมีไอคอนไข่ดาว ฮ่าา

ส่วนฟอร์มก็มีให้กรอกค่าสอง ส่วนลด แล้วก็ให้เพิ่มกลุ่มกับรายการย่อยได้

พอกดสรุปผลก็จะรวมออกมาว่าใครต้องจ่ายเท่าไหร่

v.2

เพิ่มให้สามารถเลือกไอคอนรูปแต่ละคนได้ (ฮ่าา) แล้วก็เพิ่มตัวเลือกว่าคนนี้ จะให้จ่ายค่าส่งหรือได้รับส่วนลดหรือไม่ เป็น optional

ตัวอย่างไอคอนที่ให้เลือกได้

v.3

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

ตัวอย่างการสร้างกลุ่มเอาไว้ เช่นกลุ่มทำ OT ใส่ไอคอนแล้วก็ชื่อว่ามีใครบ้าง

ตอนที่จะคำนวณก็มาเลือกกลุ่มได้เลย โดยข้อมูลนี้จะเก็บใน Local storage นะ

จากนั้นก็เพิ่มการแสดงเวอร์ชัน เป็นไอคอน About มุมล่างขวา

v.4

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

v.5

มีแก้บัคเรื่องคำนวณส่วนลดและค่าส่งแบบอัตราส่วนใน v4 แล้วก็ได้เพิ่มไอคอนมาให้เลือกเพิ่ม จาก 12 ไอคอน เป็น 28 ไอคอน เลือกกันให้เต็มที่เล้ยย

v.6

เพิ่มให้เว็บรองรับ ภาษาอังกฤษด้วย โดยสามารถเลือกเปลี่ยนได้จากตัวเลือก บนซ้าย คือ ไทย / English

v.7

ไหนๆก็ไหนๆ เอาตัวเลือกภาษามาไว้ในหน้าแรกด้วยเลย ทำให้คิดว่าน่าจะเปลี่ยนสีหน้าแรกใหม่นะ อันเดิมมันดูม่นๆเทาๆไปนิด เลยเปลี่ยนสีใหม่เป็นโทนส้ม และเพิ่มตัวเลือกภาษาในหน้านี้ด้วย

เรื่องเล่าก่อนจบ

หลังจากที่ผม publish เว็บแอป v1 ไปที่ Github Pages แล้ว ผมอยากจะอัพเดท v2 ก็ build และ push ขึ้นไปตามปกติ ปรากฏว่า Github Pages ไม่อัพเดทให้แหะ ยังคงเป็น v1 อยู่ ก็ลอง build และ push อยู่หลายครั้งก็ยังไม่ได้ ตัวปัญหาที่คิดได้อย่างแรกคือ Github Pages มันไม่อัพเดทตามที่เรา push หรือเปล่า ผมเลยลองเพิ่มไฟล์ไปไฟล์นึงแล้ว push ขึ้นไปเพื่อจะดูว่า Github pages มันจะเห็นไฟล์นี้ไหม ปรากฏว่ามันเห็น แสดงว่ามันทำงานตามปกติ ต่อมาคิดต่อ ถ้าไม่เป็นที่ Github pages ก็น่าจะ Flutter นี่แหละที่มัน build ไม่ถูกต้อง

โดยปกติพอเรารันคำสั่ง flutter build web –release มันจะได้ไฟล์ main.dart.js และ main.dart.js.map ในโฟลเดอร์ build ใช่มันล่ะ ผมสั่งเกตว่า วันที่ modifier date มันเป็นของเมื่อวาน ในขณะที่ไฟล์อื่นๆในโฟลเดอร์เดียวกัน มันเป็นวันที่ปัจจุบัน ทั้งๆที่ไฟล์นี้มันสำคัญที่สุดเลยนะ แสดงว่า main.dart.js มันไม่ build ของ v2 มาให้ มันยังคง v1 อยู่ แล้วจะทำยังไงล่ะ ผมลองลบไฟล์ทั้งหมดใน build หรือสั่ง flutter clean แล้วลอง สั่ง flutter build web –release ใหม่ ปรากฏว่า มันก็ generate ไฟล์ในโฟลเดอร์ build มาใหม่ทั้งหมด ยกเว้น main.dart.js นั่นแหละ มันก็ไปเอาอันเก่าของเมื่อวานมาอยู่ดี แสดงว่ามันต้อง cache ไว้ที่ไหนสักที่แน่ๆ

ผมลองลองค้นไฟล์ในโปรเจค พบว่าที่โฟลเดอร์ .dart_tool/flutter_build มันจะมีโฟลเดอร์ที่ build ไว้หลายอันและหนึ่งในนั้น มีไฟล์นึง ชื่อว่า main.dart.js ที่วันที่เป็นปัจจุบัน และขนาดใหญ่กว่าอันเดิมนิดนึง ผมเลยคิดว่าอันนี้น่าจะเป็น อันที่ถูกต้อง เลย copy มันออกมาและมาไว้ที่โฟลเดอร์ web จากนั้นลอง push ไปที่ Github pages ผลที่ได้คือเว็บอัพเดทเป็น v2 เรียบร้อยแล้ว และการอัพเดทต่อๆมา ผมก็ต้องทำแบบนี้คือสั่ง build เสร็จต้องไป copy ไฟล์ main.dart.js ออกมา ไม่รู้ว่านี่เป็นบัคของ flutter web หรืออะไรนะ

จบแล้ว

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

ขอบคุณที่ติดตามครับ (: