Try to compare pixels at the head of the bird in the middle

A golden test is a type of unit test to ensure that your UI stays the same after adding new functionalities to your widget. It saves the snapshot image of your last UI and compares it with the new one. If the new UI looks different than before, the unit test will fail and show an error.

Since Flutter is based on widgets, we usually end up with a ton of them in our app. My app has about 100 widgets in total, not to mention each one might have different states such as Error State or Progressing State, or…


ลองสังเกตที่หัวของนกตัวตรงกลางนะครับ เป็นไอเดียของการทำ Golden Test

Golden Test เป็น Unit Test ประเภทหนึ่งที่จะทำให้เรามั่นใจว่า UI ที่เราแก้ไขไปนั้นไม่มีการเปลี่ยนแปลง โดยหลักการคือเราจะทำการบันทึกรูปที่เคยทำเอาไว้ และทุกครั้งที่มีการเปิด Pull Request มานั้น Pipeline ของเราจะนำรูปที่เก็บไว้มาทำการทดสอบแบบ Pixel by Pixel เลยว่ามีการเปลี่ยนแปลงตรงไหนหรือไม่ ถ้ามีแม้แต่นิดเดียวก็จะทำการแจ้งและทำให้ Test Failed ครับ

สำหรับ Flutter นั้นมีหลักการคือทุกอย่างเป็น Widget ทำให้เวลาพัฒนาจะมี Widget เยอะมากๆ อย่างแอปที่ผมทำก็มีเป็นหลักร้อยเลยครับ และแต่ละ Widget นั้นมี State ที่ต่างกัน ทำให้มี UI ที่หลากหลายมากขึ้น ซึ่งบาง Widget เราไม่สามารถเทสได้ง่ายๆ จะต้องมีการ Mock ค่า เพื่อให้แสดงผลที่เราต้องการ ยิ่งไปกว่านั้นจะเกิดอะไรขึ้นถ้ามีผู้พัฒนา 4–5 คนในทีมและทุกคนต่างทำ UI ของตัวเองซ้ำกันโดยที่ไม่ได้ปรึกษาใคร ปัญหาเหล่านี้ล้วนเป็นสิ่งที่เกิดขึ้นจริง แต่ไม่ได้เป็นประเด็นที่สำคัญในมุมมองของหลายๆ คน เพราะการเทสส่วนใหญ่จะสนใจแค่ Functionality Test ว่าทำงานได้เท่านั้น ไม่ได้สนใจว่า UI เพี้ยนไปหรือไม่ ถ้าต้องการการพัฒนาแอปที่มีคุณภาพยิ่งขึ้น…


Flutter integration test is an end-to-end test for mobile, which is a part of the software development process. We usually divide the tests into three types:

  1. Unit Test developers usually handle this by themselves
  2. Integration Tests or API testing, is mostly handled by test automation teams
  3. UI Tests is a real testing on real devices to see the final result if everything’s working correctly
Credit: https://medium.com/android-testing-daily/the-3-tiers-of-the-android-test-pyramid-c1211b359acd

The traditional way to group software tests is in the shape of a pyramid. However, lately I have read some articles that shows the test trend starting to shift to a diamond shape. I think it’s…


Flutter Integration Test เป็นการเทสระบบที่ผู้ใช้งานจะได้เห็นจริงๆ แบบ End-to-End ซึ่งถือเป็นส่วนหนึ่งของการพัฒนาซอฟต์แวร์ โดยปกติเราจะแบ่งการเทสออกเป็น 3 แบบ

  1. Unit Test โปรแกรมเมอร์จะเป็นคนเขียนส่วนนี้เอง
  2. Integration Tests หรือ API Testing ส่วนใหญ่จะเป็นหน้าที่ทีม Test Automation
  3. UI Tests คือการเทสการกดปุ่มและใช้งานจริง ยิง API จริงบนเครื่องจริง จะเป็นการเทสที่จะได้ผลลัพธ์สุดท้ายที่จะใช้งานได้จริงๆ
Credit: https://medium.com/android-testing-daily/the-3-tiers-of-the-android-test-pyramid-c1211b359acd

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


https://medium.com/flutter/announcing-flutter-2-2-at-google-i-o-2021-92f0fcbd7ef9

In this article, I used all my experiences to create a Flutter project that everyone can use as a starter. For this, I use Flutter 2.2.2 . The project consists of a demo in 3 parts:

  1. Flutter CI/CD and Flavor Template you can fill out the needed information in Fastlane to deploy to TestFlight for iOS and Firebase distribution for Android
  2. Flutter Method Channel Template you can use this part if you have to connect it to a native SDK or need any function from Native. Otherwise, you can comment the code out.
  3. Flutter Basic Security Template it’s built-in security…


https://medium.com/flutter/announcing-flutter-2-2-at-google-i-o-2021-92f0fcbd7ef9

บทความนี้ผมได้รวบรวมความรู้ที่มีทำออกมาเป็น Sample Project สำหรับคนที่กำลังเริ่มเขียน โดยมี Flutter 2.2.2 เป็นต้นแบบ โปรเจคนี้จะมีทั้งหมด 3 ส่วนครับ

  1. Flutter CI/CD and Flavor Template ซึ่งผมได้ทำแบบ Flavor และทำการติดตั้ง CI/CD เบื้องต้นไว้ให้แล้ว สามารถแก้ไขให้เหมาะกับทีมคุณได้เลย โดย iOS จะส่งขึ้น TestFlight ในขณะที่ Android จะส่งไปที่ Firebase Distribution
  2. Flutter Method Channel Template แสดงให้เห็นส่วนของการเชื่อมต่อ Native ไป Flutter และ Flutter ไป Native กลับมา
  3. Flutter Basic Security Template ใส่ Security แบบพื้นฐานเข้าไปในแอปทั้ง iOS และ Android

มาดูรายละเอียดของแต่ละขั้นตอนกัน

Flutter CI/CD and Flavor Template

Xcode

ผมแบ่งออกมาเป็น 3 ประเภท

  • Dev: Flavor สำหรับการพัฒนา หลักๆ Developer จะเป็นคนใช้
  • UAT: Flavor สำหรับ User Acceptance Testing Environment คือเกือบ 100% จะเหมือนกับบน Production ครับ เรามี Environment นี้ไว้สำหรับทดสอบโค้ดใหม่ที่เราจะขึ้น Production ว่าจะมีผลกระทบใดๆ หรือไม่
  • Production: Flavor สำหรับ Production


This article is also useful for Swift users. Just ignore the MethodChannel part since you don’t have to send any information back to Flutter.

App Clips is a new feature in iOS 14 that allows users to install your app more easily by partially activating your app. When you scan the QR code (a specific one from Apple) or tap the NFC or open via website, a popup will display at the bottom of the screen with a nice image and a button to open the App Clips.

Currently, the Flutter team is faced with a limitation when using App…


ชาว Swift สามารถใช้บทความนี้ได้เช่นกันนะครับ โดยข้ามส่วนที่เป็น Flutter เพราะไม่ต้องมีส่งข้อมูลกลับมา

App Clips เป็นหนึ่งฟีเจอร์ใน iOS 14 ที่ให้ผู้ใช้งานได้ทดลองเล่นแอปของคุณก่อนใช้งานจริง โดยเริ่มจากการสแกนตัว QR Code (ต้อง QR Code พิเศษของ Apple เท่านั้น) หรือแตะที่ NFC หรือเปิดผ่านเว็บไชต์ เมื่อทำสำเร็จจะมีภาพเลื่อนจากด้านล่างของจอออกมาพร้อมกับคำบรรยายสำหรับ App Clips

ทาง Flutter เองได้ทำ App Clips ขึ้นมา แต่มีข้อจำกัดว่าตัว App Clips ต้องการขนาดที่เล็กกว่า 10 MB ซึ่งตอนนี้ทีม Flutter ยังคงติดปัญหาในการลดขนาดตามที่ iOS ต้องการอยู่

ในบทความนี้เราจึงจะมาเขียน App Clips ด้วย Native และเชื่อมต่อกับ Flutter กันครับ 😄 ผมไม่ได้จะบอกว่าวิธีผมดีกว่าของทีม Flutter เพราะแบบของผมจะต้องเขียน 2 ครั้งใน Flutter และ Swift ในขณะที่ทีม Flutter ต้องการให้เขียนใน Flutter และเฉพาะบางส่วนที่จะแชร์ไปให้ App Clips ใช้ ไม่ว่าจะเป็นเรื่อง UI หรือระบบฟังก์ชันการทำงาน แต่ถ้าโปรเจคของคุณต้องการด่วนจริงๆ รอ Flutter ไม่ได้ ก็สามารถใช้วิธีแบบผมได้ครับ โดยเริ่มจาก…

flutterd doctor…

To start a project with Flutter, many project owners rely on a checklist to see if Flutter can answer all of their requirements.

  • Some might need a very high-performance app such as one for video editing
  • Some might need to connect to a printer
  • Some might need to connect to native SDK but there’s no SDK that supports Flutter
  • Some might need to connect to specific API in Native such as Apple Watch or any new APIs in the future

Project owners’ main concern about Flutter is that despite reducing cost and ensuring faster development, at some point when the…


ก่อนที่เราจะเริ่มโปรเจคใดๆ โดยปกติแล้วทาง PO จะมีพวก Checklist ต่างๆ ช่วยคัดเลือกเทคโนโลยีที่จะใช้ในโปรเจคนั้นๆ แม้แต่ Flutter เอง ทาง PO ก็ต้องเช็คว่าสามารถตอบโจทย์ที่ต้องการทั้งหมดนี้ได้หรือไม่

  • บางโจทย์อาจจะบอกว่าต้องการใช้แอปที่ Performance สูงๆ เช่น พวกแอปตัดต่อวิดีโอ
  • บางโจทย์อาจจะบอกว่ามี SDK ที่ต้องบังคับใช้ และเป็นของ Native ไม่มีของ Flutter
  • บางโจทย์อาจจะบอกว่าต้องต่อ Printer ได้ และบางโจทย์บอกว่าในอนาคตเราจะขยายไปเชื่อมต่อกับ Apple Watch หรือ Native API บางตัว

PO บางคนอาจจะกังวลเรื่องการใช้ Flutter เพราะแม้จะช่วยลดค่าพัฒนาหรือพัฒนาได้เร็วขึ้นจริง สุดท้ายพอโปรเจคใหญ่ขึ้นและมีโจทย์แปลกๆ เพิ่มมา กลัวว่าสุดท้ายจะตอบโจทย์ไม่ได้ หากเป็นเช่นนั้นก็ต้องมาเสียทั้งเวลาทั้งเงินเพื่อเขียนให้เป็น Native ใหม่ทั้งหมด

ตรงนี้ Flutter Method Channel ช่วยท่านได้

Flutter Method Channel

เป็นช่องทางของ Flutter ที่เปิดไว้เพื่อทำการเชื่อมต่อให้ไปที่ Native API และสามารถส่งข้อมูลไปกลับได้ แปลว่าถ้าฟังก์ชันไหนไม่มีใน Flutter เราก็เขียนเองซะเลยด้วย Native ที่ทั้ง iOS/Android

จากที่ได้ลองมาแล้ว หลาย Use Case ใช้ได้สบายครับ ยกตัวอย่างเช่น การต่อกับ Printer ผ่าน Native, ใช้ Native SDK ของ 3rd Party และเชื่อมต่อ API ที่มีเฉพาะใน Native เท่านั้น ผมเคยลองมาหมดแล้วครับ ไม่ติดปัญหาใดๆ…

Amorn Apichattanakul

Software Engineer focusing on Mobile technology

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store