Flutter Demo by KBTG: ตัวอย่าง Flutter Secure App

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

เราจะทำ Configurations จาก Debug มาเป็น Debug-dev, Debug-uat และ Debug-production

พอทำเสร็จ จะได้แบบนี้ครับ

สร้างโฟลเดอร์ Dev, UAT, และ Production ในโปรเจค Xcode ไม่จำเป็นต้องคัดลอกมาใน Xcode นะครับ

ทำ Script ใน Build Phases

Script นี้จะทำหน้าที่ในการคัดลอกข้อมูลจากโฟลเดอร์ต่างๆ มาไว้ในโปรเจคตอนเรารัน Command

# Type a script or drag a script file from your workspace to insert its path.
echo "Current Config ======= ${CONFIGURATION}"
if [ "${CONFIGURATION}" == "Debug" ] || [ "${CONFIGURATION}" == "Debug-dev" ] || [ "${CONFIGURATION}" == "Release" ] || [ "${CONFIGURATION}" == "Release-dev" ]; then
cp -r "${PROJECT_DIR}/dev/GoogleService-Info.plist"
echo "Development plist copied"
elif [ "${CONFIGURATION}" == "Debug-uat" ] || [ "${CONFIGURATION}" == "Release-uat" ]; then
cp -r "${PROJECT_DIR}/uat/GoogleService-Info.plist" "${PROJECT_DIR}/Runner/GoogleService-Info.plist"
echo "UAT plist copied"
elif [ "${CONFIGURATION}" == "Debug-production" ] || [ "${CONFIGURATION}" == "Release-production" ]; then
cp -r "${PROJECT_DIR}/production/GoogleService-Info.plist" "${PROJECT_DIR}/Runner/GoogleService-Info.plist"
echo "Production plist copied"
fi

ผมลองวาง GoogleService-Info.plist ซึ่งเป็นไฟล์ .plist ใน Firebase โดยเราสามารถใช้วิธีนี้กับ Asset อื่นๆ ได้ เช่น .plist อื่นๆ รูป หรือ Cerfiticate ต่างๆ จากนั้นไปที่โฟลเดอร์ fastlane ใน iOS ผมได้ทำการวางข้อมูลที่จำเป็นไว้แล้ว แค่เปลี่ยนเป็นข้อมูล Apple ID ของคุณเท่านั้นก็เป็นอันเสร็จ

Android Studio

ผมได้เพิ่ม productFlavors เข้าไปใน build.gradle(app) โดยเพิ่ม Flavor Dev, UAT, Production เหมือนกับของ Xcode ครับ รวมถึงใส่พวก Parameter บางอันที่คุณอาจจะได้ใช้ เช่น พวก manifestPlaceholders เป็นต้น

สร้างโฟลเดอร์ Dev, UAT, Production ในโฟลเดอร์ App > Src เพื่อใช้สำหรับ Asset ในแต่ละ Flavor ตรงนี้ของ Android Studio จะง่ายกว่าครับ เพราะสามารถทำงานเองได้เลย เราไม่จำเป็นต้องมี Script อะไรเป็นพิเศษ แต่ต้องใส่ชื่อให้ตรงนะครับ สุดท้ายไปที่ fastlane ใน Android ซึ่งผมได้เตรียมข้อมูลสำหรับส่งขึ้น Firebase Distribution ไว้ให้แล้วเช่นกันครับ

จบจากใน Native ลำดับถัดมาผมไปที่ main.dart ทำออกมาเป็น main_dev.dart, main_sit.dart, main_prod.dart และส่ง Parameter ที่ต้องการของแต่ละ Environment เข้าไปที่ main.dart แทน

เมื่อเสร็จสิ้นทั้งหมด เราจะเรียก Command นี้แทนการรัน Flutter แบบธรรมดา

flutter run --flavor dev -t lib/main_dev.dart

Flutter Method Channel Template

ผมได้ใส่วิธีการทำ Method Channel ที่ไว้คุยกันระหว่าง Flutter กับ Native ให้ โดยแบ่งออกเป็น 3 แบบ

1. แบบคืนค่าทันที
2. แบบคืนค่าหลังจากผ่านฟังก์ชันไปเรียบร้อยแล้ว
3. แบบคืนค่าหลังจากที่ผ่าน Callback เรียบร้อย โดยจะผ่าน Delegate ของ iOS และ Lambda ของ Android

สามารถไปดูตัวอย่างการใช้ที่ Template ได้เลยครับ

Flutter Basic Security Template

ผมได้ใส่ Security App แบบพื้นฐานไปให้ใน Xcode และ Android Studio เรียบร้อยครับ ถ้าตรงไหนอยากจะปิดก็สามารถไปแก้ไขได้ครับ

อันนั้นเป็นโปรเจค Template ครับผม

theamorn/flutter-template

ส่วนอันนี้คือ Demo ตัวอย่างครับ

เมื่อนำ Template นี้ไปใช้ จะต้องแก้ตามนี้ก่อนนะครับถึงจะใช้งานได้

1. แก้ไข fastlane ในทั้ง iOS/Android
2. ตรวจสอบที่ AppDelegate.swift/ MainActivity.kt เพื่อสำรวจว่าส่วนไหนไม่สำคัญและอยากจะเอาออก
3. แก้ไข Deploy.sh ให้เหมาะสมกับทีมของคุณ

ในอนาคตถ้า Flutter มีเวอร์ชันใหม่ๆ หรือผมได้ความรู้อะไรใหม่ๆ จะมาพัฒนาส่วนนี้ให้อย่างต่อเนื่องนะครับ

สำหรับชาวเทคคนไหนที่สนใจเรื่องราวดีๆแบบนี้ หรืออยากเรียนรู้เกี่ยวกับ Product ใหม่ๆ ของ KBTG สามารถติดตามรายละเอียดกันได้ที่เว็บไซต์ www.kbtg.tech