สวัสดีครับ เพื่อนๆ หลังจากเมื่อวานผมได้อัพเดทบล็อกเรื่อง Flutter Web ไป เพราะอันเดิมเนื้อหาเก่าแล้ว และตอนนี้ Flutter Web ได้ถูก merge เข้าไปอยู่กับ Flutter core แล้ว (แต่ก็ยัง beta อยู่นะ) ทำให้การติดตั้งง่ายขึ้น อยู่บน Flutter SDK เลย นั่นทำให้ผมติดลม อยากลองทำเว็บแอปอะไรเล่นๆสักอัน แล้วอัพขึ้น Github Pages สักหน่อย ประกอบกับกลุ่ม Flutter community มักจะมีคนมาอวด Github pages ที่เขียนจาก Flutter Web เสมอๆ นี่ก็เลยอยากมีกับเขาบ้าง

หากใครที่ยังไม่ได้ติดตั้ง Flutter Web ลองอ่านได้ที่

คิดโปรเจค

ไม่รอช้าผมก็เข้าไปสร้าง github repo สำหรับโปรเจคเล่นๆนี้ แต่ว่าจะทำอะไรดีล่ะ คิดอยู่พักนึงก็ได้ไอเดียมาจากพี่ที่ออฟฟิศคนนึงที่ต้องคำนวณส่วนลด ค่าส่งเวลาสั่งอาหารจาก delivery เอ้อ! ผมจะทำเว็บอันนี้แหละ ง่ายดีนะ ไม่รอช้า ก็เข้าไปสร้าง Gitlab repo ไว้

เริ่มงานได้

ใช้เวลาเขียนโปรแกรมน่าจะครึ่งวันได้ คิดว่าจะยังไม่ทำให้ responsive เพราะจะเน้นใช้ในคอม และด้วยความที่มันเขียนเหมือนกับ Flutter เป๊ะ อย่างกับแกะ และสิ่งที่ได้คือเว็บ ทำให้ผมแทบไม่เชื่อตัวเองว่า เราได้กลับมาเขียนเว็บแล้วหรอเนี้ย แม้ว่ามันจะออกแนว static web ก็เถอะนะ

ลอง build

หลังจากทำเว็บได้จนที่พอใจแล้ว ก่อนอัพขึ้น Github page เราก็ต้อง build ก่อนโดยรันคำสั่ง create . เพื่อให้ flutter เพิ่ม support web เข้ามาในโปรเจค

$ flutter create .

จากนั้นสั่ง build แบบ release ไปเลย

$ flutter build web --release

สิ่งที่ได้คือ โฟลเดอร์ build/web ภายในจะมีไฟล์ html และ js

Push ไปที่ Github Pages

ก่อนอื่นผม copy โฟลเดอร์ web ออกมาไว้นอกโฟลเดอร์ build ก่อน เพราะโฟลเดอร์ build อยู่ใน gitignore จะไม่ได้ push ไปด้วยและจะได้ไม่ปนกัน

เสร็จแล้วก็ จัดการ push ไปเลย ผมขอตั้งชื่อเท่ๆว่า Billing Valley ฮ่าๆ

จากนั้นไปที่ Setting ของ repository เพื่อเปิดใช้งาน Github Pages ซึ่งจะมีเงื่อนไขคือจะต้องเป็น public repo หรือ Github Pro นะ ในที่นี้ของผมตั้งใจเปิด Public

จากนั้นลองเข้า URL ที่ทาง github ให้มาของผมคือ
https://benznest.github.io/billing_valley/
ซึ่งผม build ไฟล์ และ copy ไว้ในโฟลเดอร์ web ใช่มัย ดังนั้น Web app ของผมเลยอยู่ที่
https://benznest.github.io/billing_valley/web/

เท่านี้ก็ได้ Flutter Web บน Github Pages แล้วง่ายมากๆ ฝากลองเล่นกันดูครับ

สรุป

บล็อกนี้ได้ลองเขียน Flutter Web แบบง่ายๆ ใช้เวลาไม่ถึง 1 วัน แล้วลองอัพไปที่ Github Pages ครับ ง่ายมากจริงๆ ในอนาคต Flutter Web น่าจะเป็นที่นิยมมากขึ้นเรื่อยๆ ต้องรอดูการพัฒนาต่อไปครับ

ฝากลองเล่น Billing Valley ด้วยน้า
ขอบคุณครับที่ติดตามครับ