เขียน App Instant Feedback

ป๋าช้างแห่ง Ayarafun ให้ยืมจอ 7″ มาพักนึงละ แต่ยังไม่ได้เริ่มทำอะไรมาก หลังจากหมดพลังไปกับ cross compile ตัว Fultter Engine ก็ยังไม่ได้ทำอะไรต่อ คิดว่าถ้า port ไปเป็น desktop app บน Raspbian ได้ก็น่าสนใจ แต่ยังทำไม่สำเร็จก็เลยพักไว้ก่อน หันมาดูเรื่อง Flutter for Web แทน ซึ่งยังไงก็ยังได้ใช้งาน เคยออกไอเดียเรื่อง Instant Feedback ไปให้ป๋าช้างลองทำเล่นดู ไปๆ มาๆ วนกลับมาทำเองซะงั้น ก็เลยลอง Flutter 1.13 ใน master repo ซะเลย

จากวิดีโอตัว App ถูก cross compile เป็น macOS App เรียบร้อยแล้ว การแสดงผลถือว่าใช้ได้เลยทีเดียว เริ่มอยาก compile บน Raspbian บน ARM ละ

ลอง 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 ตัวนี้ไหมนี่แหละ

ทำ 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 แล้ว

ลอง 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 ละกันครับ

Wrap Omise REST API สำหรับ Flutter

ผมมีโครงการ Mobile App ที่ต้องเขียนเพื่อเชื่อมต่อกับ Omise เพื่อรับ-จ่ายเงิน ผ่านบัตรเครดิต และทำ Digital Wallet สำหรับลูกค้าในตัว แต่เนื่องจากโดนเบรคเรื่อง Wallet ไป ก็เลยไม่ได้ทำต่อ ตอนนี้ก็เอา Omise class ที่เชื่อมต่อกับ REST Api มาแปะไว้ก่อนเผื่อใครอยากทำต่อ หรือ ทำ package ที่ถูกต้องสำหรับ flutter น่ะครับ 🙂

ใครสนใจก็ไปดูกันได้ที่ github ปล.โค้ดแบบลวกๆ และทำเฉพาะ charge ด้วย token นะครับ

แนะนำ Flutter Package เผื่อได้ใช้เหมือนกัน

Flutter มีเว็บรวม package เพื่อเพิ่มความสามารถให้ app ซึ่งเราสามารถค้นหา package ที่ต้องการได้ที่ pub.dev ในเว็บนี้จะรวม package ที่ใช้งานกับ flutter, web และ dart อยากได้อะไรก็ลองไปค้นในนี้ดูก่อนได้

สำหรับ package ที่ผมใช้ มีดังนี้

  • firebase_core – firebase
  • firebase_analytics – firebase analytics
  • cloud_firestore – firebase database
  • firebase_storage – firebase cloud storage
  • firebase_messaging – firebase cloud messaging
  • firebase_auth – firebase authentication
  • google_sign_in – google sign-in
  • google_maps_flutter – google map
  • circular_profile_avatar – circular avatar
  • qr_flutter – QRCode
  • font_awesome_flutter – Fontawesome icon
  • flutter_money_formatter – Money format
  • connectivity – Check connectivity
  • double_back_to_close_app – Double press back to exit app
  • cached_network_image – Show network image + cached image
  • package_info – Read package infomation
  • url_launcher – URL launcher
  • photo_view – View photo support pitch to zoom
  • flutter_credit_card – Credit card input
  • fluttertoast – Toast
  • image_picker – Image Picker
  • flutter_local_notifications – Local notification
  • geoflutterfire – Geo-query
  • geolocator – Geolocation
  • shared_preferences – Share Preference
  • international_phone_input – International phone number input
  • pin_input_text_field – PIN input
  • flutter_masked_text – Masked Text input
  • place_picker – Place picker
  • multi_image_picker – Multiple images picker

ใครสนใจตัวไหนก็ไปลองเล่นกันดูได้

ชีวิตบน Flutter เป็นยังไง เริ่มต้นเขียน Flutter ยังไง

ผมทำงานด้าน Backend มาตลอด ทำทั้งด้าน System Admin, CI/CD, Build Automation และ Release Management ที่ต้องทำเองก็เพราะว่าไม่มีคนทำให้​ ชีวิตก็เลยไปอยู่ฝั่ง Backend เยอะมาก แต่จริงๆ ผมเป็น Developer นะ ผมกลับมาเขียน Mobile Front-end อีกรอบ คิดไปคิดมาอยู่หลายรอบว่าจะเขียนด้วยอะไรดี React Native หรือจะเขียน Flutter สุดท้ายก็มาทาง Flutter เพราะโดนป้ายยามา 😛

ช่วงแรกที่หัดเขียน Flutter ก็พบว่า “นี่มันบ้าอะไรกันเนี่ย” เพราะเขียน Android Native มาตลอดยังปรับตัวไม่ค่อยได้ แต่ความรู้เก่าๆ ที่เขียน Android Native มาก็ปรับใช้ได้ แต่ก็มีสิ่งที่ประหลาดๆ ใน Flutter เช่น Future และ Asynchronous นี่แหละ เพราะรู้สึกว่าเหมือนมันไม่มีอะไรที่แน่นอนกับชีวิตแปลกดี แต่ก็เป็นความรู้ใหม่ที่เลี่ยงไม่ได้ อีกอย่างคงเป็น Widget แปลกๆ อีกมากมายที่รู้สึกว่ามี Widget เยอะจัง อีกเรื่องก็เป็น State ซึ่งไม่เหมือน Life Cycle บน Android เท่าไร

สำหรับเรื่อง UI บน Flutter ใช้ Widget ต่างๆ มาประกอบกัน ซึ่งก็คล้ายกับเขียน Layout บน Android ก็เลยปรับตัวไม่ยาก แต่ต้องไปดู Widget ต่างๆ ว่ามีอะไรให้ใช้งานได้บ้าง ถ้ามีคนถามว่าจะเริ่มเขียน Flutter ยังไง ผมคิดว่าต้องมีความรู้ Mobile App Dev สักตัวจะเป็น Android หรือ iOS ก็ได้ เพราะ Dart จะคล้าย Java หน่อยๆ เขียนโค้ดไปมันจะค่อยๆ พิศดารขึ้นเรื่อยๆ และจะทะยอย optimized ไป

เครื่องมือที่ใช้เขียนโค้ด หลายคนแนะนำ Visual Studio Code ผมคิดว่าถ้าใครถนัด Visual Studio Code ก็ใช้ครับ ผมว่าก็สะดวกดี ถ้าใช้ sublime มาจะสนุกนะ แต่พอจะต้องใช้เครื่องมืออัตโนมัติอย่างเช่น generator ต่างๆ ก็คงต้องกลับไปใช้ Android Studio เหมือนเดิม ช่วงแรกผมก็ใช้ Visual Studio Code แต่ระยะหลังๆ ก็กลับมาใช้ Android Studio เหมือนเดิม เพราะต้องใช้เครื่องมือ generator นี่แหละ ผมทำ locale ภาษาอื่นๆ ด้วย เลยต้องใช้เครื่องมือช่วยสร้าง code จากไฟล์ locale ด้วย

ถ้าอยากจะเริ่มเขียน Flutter คงแนะนำให้อ่านจากเว็บ Flutter ก่อน ถ้ามีประสบการณ์เขียน Mobile App มาบ้าง ไปดูหัวข้อ Cookbook ได้เลย จะทำให้ศึกษาได้เร็วมากขึ้น สำหรับ Widget คงต้องค่อยๆ ลองใช้ดู เพราะเยอะมาก ลองไล่ศึกษาจาก Widget Catalog ช่วยชีวิตได้เหมือนกัน เพราะเวลางงๆ ก็กลับมาอ่านทุกครั้งสำหรับ Tutorial มีเยอะมากในอินเตอร์เน็ต ลองไปค้น Youtube กันดูได้ครับ 🙂 เกือบลืมไป ผมทำรายการ package ที่ใช้ไว้ใครสนใจก็เอาไปลองเล่นดูได้ครับ

อีกอันจะเป็น The Boring Flutter Development Show แต่ละตอนอาจจะยาวหน่อยเพราะเป็น live code และเป็น pair programming ด้วย เราจะได้เห็นแนวคิดและการแก้ปัญหาต่างๆ ผ่านรายการนี้ ได้ประโยชน์มากๆ