ลอง Flutter for Web บ้าง

ลอง Flutter for Web บ้าง เป็น Backend สำหรับจัดการข้อมูลของ Mobile App อีกทีหนึ่ง ตัว Web App ใช้ Flutter เชื่อมต่อกับ Firebase ใช้เหมือนกับ Mobile App ดึงข้อมูลจาก Firestore, Firebase Storage และ Firebase Authentication

ตัว Plugin ที่ใช้ รองรับ Firebase service ที่เขียนออกแนว Web สักหน่อย ซึ่งคำสั่งแตกต่างจากการเขียนบน Flutter Mobile มาก เท่าที่ลองแกะ Plugin ดูเป็นการเขียน wrap เข้ากับ API ของ Firebase โดยเรียกผ่าน Javascript อีกทีนึง (dart2js) แต่ที่น่าเป็นห่วงคือจะมีคนดูแล Plugin ตัวนี้ไหมนี่แหละ

ประสบปัญหาควันพิษ

ช่วงนี้แถวๆ หมู่บ้านข้างๆ จะเผาขยะตอนเย็นๆ ควันก็ลอยมาตามลม ช่วงหน้าหนาวควันจะลอยต่ำและไม่กระจายตัวไปไหน พอควันลอยเข้ามาในบ้านมันก็เลยไม่ไปไหน ตอนนี้เลยได้เป็นผู้ประสบปัญหาควันพิษกับเขาด้วย เริ่มสังเกตระยะหลังเริ่มเผาบ่อยมากขึ้น ช่วงนี้ก็เลยต้องใส่หน้ากาก N95 กันควันพิษไปก่อน

ทำ Web Responsive ใน Flutter for Web

เริ่มมาดู Flutter for Web และทะยอยทดสอบ Widget และ Plugin ที่ใช้ใน Mobile App ว่าตัวไหนใช้ได้บ้างไม่ได้บ้าง และทดสอบเรื่อง Responsive ด้วย ซึ่งในเว็บ Flutter ก็มีอธิบายอยู่นิดเดียว คือ ให้จัดการกับ properties ต่างๆ ที่ใช้กับ Widget ก็เลยเป็นที่มาของ blog ครั้งนี้

จากที่ทดลองเขียนจัดการเรื่อง responsive เอง (วิธีที่ไม่ดี) พบว่าก็เหนื่อยเหมือนกัน เพราะต้องตรวจสอบขนาดของหน้าจอและปรับค่า propertiy ของ Widget ที่เราใช้งานด้วย ตัวอย่างเช่น GridView ถ้าเป็นหน้าจอ mobile ให้แสดงผล 2 คอลัมน์ ถ้าเป็น tablet ให้แสดงผล 4 คอลัมน์ ถ้าเป็น desktop ให้แสดงผล 6 คอลัมน์ อะไรแบบนี้ ซึ่ง ไม่ค่อยสะดวกเท่าไร


หน้าจอ Desktop


หน้าจอ Tablet


หน้าจอ Mobile

อีกวิธีนึงใช้ resource selection เหมือนกับ Android แล้วเรียก layout ที่เหมาะสม แทนการ handle widget บนกันในหน้าเดียว แบบนี้จะทำให้ง่ายมากขึ้นและโค้ดสะอาด หลังจากไปค้นแบบจริงจังมาก็พบว่ามีคนทำ package แบบ resource selection มาไว้แล้ว ชื่อ responsive_builder ลองเข้าไปดูเว็บของนักพัฒนาท่านนี้ได้ครับ

ลองดูแล้วก็พบว่าใช้ได้ดีเลย ไม่ต้อง handle ให้เหนื่อย แยก layout ไปเลยก็ดีเหมือนกัน

เก็บตก Flutter Interact

มา blog เรื่องงาน Flutter Interact สักหน่อย ผมไม่ได้ไปงานของ community ในไทย แต่ก็ได้ติดตามผ่าน live stream แทน สำหรับคนที่อยากดูย้อนหลังก็ติดตามได้ที่ youtube ครับ

สำหรับของใหม่ที่จะมาให้ได้ใช้งานกัน

  • Flutter 1.12.13+hotfix.5 มาแล้ว
  • Supernova รองรับ Flutter แล้ว และจะมีเครื่องมือออกแบบบนเว็บที่พัฒนาจาก Flutter ด้วย
  • Adobe XD เปิด opensource plugin สำหรับใช้งานร่วมกับ Flutter
  • Rive ทำเครื่องมือสร้าง 2D Animation พร้อม Plugin integrate กับ Flutter เรียบร้อย
  • gskinner เปิด Vignettes ให้ไปศึกษาเรื่อง Animation บน flutter กันได้
  • Flutter for Web เข้า Beta แล้ว

ประสบการณ์ 100 เดียวเที่ยวทั่วไทย

คุณแฟนโทรมาตั้งแต่ตี 5.45 บอกว่าให้ลงทะเบียน 100 เดียวเที่ยวทั่วไทย ก็ตื่นมาลงทะเบียน

กดไปไหนไม่ได้

จบ…ประสบการณ์ 100 เดียวเที่ยวทั่วไทย

ไว้อาลัยให้แมว

ครบ 3 เดือนแล้วที่คุณด่าง (เจ้าลาย, พรหมมา และอีกหลายชื่อที่มีคนตั้งให้) คุณด่างเป็นแมวลายเสือสีเทาขาว นิสัยสุขุม เยือกเย็น ชอบนอนกลางวัน อยู่เฝ้าบ้าน กลางคืนออกเที่ยว ที่ประจำเป็นเก้าอี้หน้าบ้านกับบนรถช็อปเปอร์ คุณด่างมีอาการไม่สบาย หงอยๆ ไม่กินอาหารและตายไป

สำหรับผมไว้อาลัยให้คุณด่าง (และแมวทุกตัวที่เลี้ยง) โดยการไว้ผม ไว้หนวดเคราไม่โกน หลายคนที่เจอผมอาจจะสงสัยว่าทำไมไว้หนวดเครารกรุงรัง ไม่ต้องแปลกใจ ผมไว้อาลัยให้แมว…

แมวหลง

เมื่อคืนวันที่ 4 ได้ยินเสียงแมวร้องอยู่ที่บ้านข้างๆ ร้องอยู่ทั้งคืน เสียงร้องเหมือนขอให้ช่วย แต่เดินออกไปดูตอนกลางคืนไม่เจอ ส่วนแก๊งแมวๆ ที่บ้านก็ไม่ได้มีปฏิกิริยาอะไร เพียงแค่พังแล้วก็บิดหู ก็เลยไม่ได้สนใจอะไร พอตอนเช้าก็ยังได้ยินเสียงร้องอยู่แต่ตำแหน่งเสียงย้ายไปอยู่หน้าบ้านแทน ก็เลยเดินไปดู ก็เจอแก๊งแมวๆ ทั้งเจ้าคด นวล และขาว นั่งจ้องอยู่ พอเดินไปดูก็เป็นลูกแมวสีน้ำตาลนั่งหมอบและร้องอยู่ สักพักก็วิ่งไปหลบใต้ต้นไม้ พอตอนเย็นก็ยอมเดินออกมา แต่ 3 แมว ก็ยังล้อมอยู่ ก็เลยเข้าไปจับไว้ก่อน

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

เจ้าแมวน้อยยังมีอาการกลัวร้องตลอดทั้งวัน เรียกได้ว่าร้องจนไม่มีเสียงร้องเลย ก็เลยเอาตุ๊กตาไปนอนทับไว้จะได้รู้สึกว่ามีเพื่อน

สำหรับที่นอนก็ให้ไปนอนในโอ่งก่อน ซึ่งเจ้านวลก็ยังหวงโอ่งอยู่ ทั้งๆ ที่ไม่ได้นอนในโอ่งนานแล้ว

เจ้าแมวน้อยนี่อุดมไปด้วยหมัด ก็ต้องหมักสมุนไพรกันสักหน่อย

ทนหนาวหน่อย ที่บ้านก็ตั้งชื่อให้ว่า “เจ้าหลง” ตอนนี้หมัดลดลงน่าจะสบายตัวมากขึ้น ค่อยๆ พักฟื้นกันต่อไป

ลอง Flutter for web ใน Raspberry Pi Kiosk

ความเดิมจากตอนที่แล้ว… หลังจากพยายามเอา Flutter Desktop App ไปทำงานบน Raspberry Pi (Raspbian) ไม่รอดก็เลยมาลองเป็น Flutter for web กัน ตัว Web App ที่ได้จากการ build จาก Fultter จะได้ไฟล์ html มา เราสามารถเอาไฟล์ไปใช้งานได้เลย ซึ่งครั้งนี้เอามาลองทดสอบดูว่าถ้าเอาไปใส่ใน Raspberry Pi Kiosk ที่เปิดด้วย Chromium browser แล้วจะเป็นอย่างไร ลองดู video กัน

จากการทดลองผลลัพท์พอใช้ ถ้าต้องการแสดงผล animation แบบสวยๆ อาจจะต้องไป run บน Android แทน 😀 สำหรับ Flutter for web ยังอยู่ในช่วง technology preview ยังไม่เหมาะสมกับการใช้ในงาน production ครับ

ประสบการณ์ Dart และ Flutter

ช่วงนี้ได้เขียน Mobile App โดยใช้ Flutter อยู่ 2 โครงการ ปล.โครงการที่ 3 ยังไม่ตัดสินใจ แต่เห็นว่าจะไป react native ก็ไม่ว่ากัน ตัวโครงการแรกเป็น App แนว E-Commerce ซึ่งมี front end ที่เป็น mobile อยู่ ส่วน back end เป็นเว็บ e-commerce และเพิ่มโมดูล REST API เข้าไป อีกโครงการเป็นเว็บคล้ายๆ E-Commerce อันแรก แต่กึ่ง Social Network เน้น Chat ตัวต่อตัว คงไม่ลงในรายละเอียด

เท่าที่ได้เขียน Flutter มาได้สักระยะ เริ่มที่จะคุ้นเคยและคล่องขึ้น เรื่อง multi platform ทั้ง iOS และ Android ผมว่า Flutter ทำได้ดีมากๆ แต่ก็มีเครื่อง package version conflic บ้าง (ก่อนเลือกใช้ต้องดูดีๆ) ก็ทำเอาปวดหัวตอน build แต่ก็ผ่านมาได้ด้วยดี

อีกเรื่องคงเป็นการ cross compile ตัว flutter engine ให้ไปทำงานบน Raspberry Pi แบบ Desktop App แต่ตอนนี้ยังติดปัญหาอยู่ คิดว่าอีกสักพักอาจจะลองดูใหม่ 🙂

ได้ไปเขียน Backend บน Dart มาโดยใช้ package http สร้าง REST API ซึ่งผมว่าเหมาะสมดีมากๆ เพราะ dart engine มีทั้ง X68_X64 และ ARM จับใส่ container ไป run ที่ไหนก็ได้ มีคนแนะนำ aqueduct.io นั่งดูแล้วใช้ได้เลย… เขียนดิบๆ อยู่ตั้งนาน

สำหรับ Dart เชื่อมต่อกับ elasticsearch ก็ทำได้ดี จริงๆ ไม่มีอะไรซับซ้อนเพราะเรียกใช้งานผ่าน REST API ชีวิตก็สะดวกหน่อย จับใส่ container ครอบด้วย Kong ก็น่าจะดี ยังไม่ได้มีโอากาสทดลอง Kong แต่เอาเป็นว่าเดี๋ยวถ้ามีเวลาคงได้ลอง

ปล. ผมเข้า Facebook ไม่ได้ ติดตามกันได้ที่ Twitter ละกันครับ

มหากาพย์ port flutter ไป Raspberry Pi (ARMv7)

ช่สงนี้ได้ทดลองอะไรบางอย่างเพราะว่าความน่าสนใจของ flutter เรื่องการเขียนและการ compile cross platform ซึ่งน่าสนใจมาก และบังเอิญมีคนที่ build desktop app บน Raspberry Pi ได้ก็รู้สึกว่าน่าสนใจมากๆ

ก็เลยตามต่อไปที่ medium ซึ่งหัวข้อบทความสยองมาก คือ Flutter on Raspberry Pi (mostly) from scratch งั้นต้องลอง!! ก็เลยได้ประสบการณ์ในการ build ไป 2 วัน ก็เลยถือโอกาสมา blog ประสบการณ์การ port flutter สักหน่อย

หลักการของ flutter ออกจะซับซ้อน แต่แนวทางถือว่าใช้ได้เลย เสียอย่างเดียวคือเรื่อง cross compiler อืมมม…จะเล่ายังไงดี ดู diagrame น่าจะเข้าใจ

ถ้าใครเคยเขียน flutter มาก่อนจะทราบว่าถ้าเราจะ build app บน platform ใดก็ตาม ไม่ว่าจะเป็น Android, iOS และบน Desktop จะต้องมีเครื่องมือในการ compile สำหรับ platform นั้นๆ ด้วย ในการณีนี้คือ ต้องการ port flutter ไป build desktop app เพื่อใช้งานบน raspberry pi ซึ่งแนวคิดออกจะดิบโหดสักหน่อย ดังนั้นเครื่องมืออย่าง flutter ต้องทำงานได้บน ARM และมี build tools ครบสำหรับการ build desktop app ด้วย

ถ้าดู architecture ของ flutter สิ่งที่ต้องทำคือ ต้อง compile flutter engine ใหม่ให้ใช้งานกับ ARMv7 (ผมใช้ raspberry pi 4) เลยต้องไล่ compile ตั้งแต่ llvm+clang, binutils ซึ่งกว่าจะ compile ได้ครบก็กินเวลาไป 2 วัน พอถึงตอนจะ compile engine ก็เกิดปัญหาซะงั้น

พอสั่ง gclient sync ดึงโค้ดของ engine ได้ source code มาไม่หมดไม่รองรับ Arch ที่จะ compile เอวัง… ไว้คราวหน้าลองใหม่บน ARMv6 นะ 😀