สวัสดีผู้อ่านครับ ผมมีโอกาสได้ใช้งาน Flutter ร่วมกับ App Center เป็นเครื่องมือตัวหนึ่งที่น่าสนใจในการทำ CI/CD สำหรับ mobile app จึงอยากจะเขียนบล็อกแชร์เรื่องนี้ครับ

ปัญหา

ก่อนอื่นขอเล่าถึงปัญหาก่อน เพื่อนๆเคยพัฒนาแอปแล้วต้องส่งแอปให้ Tester ทดสอบใช่ไหมครับ ถ้าไม่มีเครื่องมือมาช่วยเลยก็กินแรง เหนื่อยอยู่เหมือนกัน ดังนั้นต้องหาตัวช่วย เช่น DevOp มาช่วยเรา เพียงเรา Push code ไปที่ Git สักที่ แล้วมันทำ CI/CD ให้เรา จากนั้น Tester ก็ดาวน์โหลดแอปมาใช้งานได้เลย หนึ่งในเครื่องมือนั้นคือ App Center ที่มาช่วยแก้ปัญหาตรงนี้

App Center คืออะไร

App Center เป็นเครื่องมือ cloud solution จาก Microsoft สำหรับ DevOps ช่วย build และ test แอป พร้อมส่งแอปให้กับ Tester ในทันที หรือจะ publish ขึ้น App Store เลยก็ได้ โดยการทำงานของ App Center จะเชื่อมกับ Repository ใน Source Control เช่น Gitlab , Github (ในตัวอย่างนี้ผมจะใช้ Gitlab นะ)

ก่อนอื่น สมัครใช้งาน App Center ได้ที่
https://appcenter.ms/

สร้างโปรเจคสำหรับ Android

เข้าไปที่ App Center แล้วสร้างโปรเจคของเรา ในที่นี้ ผมจะสร้างเป็น Android ก่อน โดยเลือก Platform เป็น Java/Kotlin

จากนั้น เมื่อเข้ามาที่ project ที่เราสร้าง จะมี Getting Started ต่างๆ ตรงนี้ถ้าใช้ Flutter ให้ข้ามไปเลย ไม่ต้องทำก็ได้

แก้ไข Git Ignore

ไปที่ไฟล์ android/.gitignore ใน Flutter project ของเรา

Git ignore คือไฟล์ที่เก็บรายละเอียดว่าไฟล์ไหนที่ Git ไม่ต้องสนใจ ส่วนใหญ่จะเป็นไฟล์ที่ไม่จำเป็น หรือ compile แล้ว ซึ่งหนึ่งใน default ของ git ignore จะมี Gradlew อยู่ด้วย เป็น script ของ Gradle ตัวนึง ซึ่งเรา App Center จำเป็นต้องใช้ build แอป ดังนั้นเราต้องแก้ git ignore ไม่ให้มี grabrew จะได้ไฟล์ gitignore ประมาณนี้

/.gradle
/captures/
/local.properties
GeneratedPluginRegistrant.java

App Center Build Script (Android)

ต่อมา เราจะต้องเขียน script เพื่อให้ App Center รันคำสั่ง Flutter หรือทำอะไรบางอย่างตามที่เราต้องการ เรียกว่า Build script ในตัวอย่างนี้เราจะรันคำสั่งให้ไป clone Flutter พร้อมกับ build app

โดย build script จะมี 3 ไฟล์ คือ post-clone, pre-build, post-build ในที่เราจะรัน script หลังจาก clone repository แล้ว
ให้สร้างไฟล์ app-center-post-clone.sh ในโฟลเดอร์ android/app/src

ในไฟล์ appcenter-post-clone.sh เขียน script ดังนี้

#!/usr/bin/env bash
# place this script in project/android/app/
cd ..
# fail if any command fails
set -e
# debug log
set -x

cd ..

git clone -b stable https://github.com/flutter/flutter.git
export PATH=`pwd`/flutter/bin:$PATH

flutter channel stable
flutter doctor
flutter pub get
flutter build apk --release

# copy the APK where AppCenter will find it
mkdir -p android/app/build/outputs/apk/; mv build/app/outputs/apk/release/app-release.apk $_

การทำงานคร่าวๆ คือ เมื่อเรา push code แล้ว App Center จะรัน build script ของเราทันที ซึ่งคือการ ดาวน์โหลด Flutter SDK ดาวน์โหลด dependencies ต่างๆ แล้วรันคำสั่ง flutter build ซึ่งจะใช้เวลาราวๆประมาณ 10-20 นาทีในการทำงานแต่ละครั้ง

รายละเอียดเพิ่มเติมเกี่ยวกับ Build Script
https://docs.microsoft.com/en-us/appcenter/build/custom/scripts/

Push Code ไปที่ Gitlab

ในตัวอย่างนี้ ผมใช้ Gitlab เป็นที่เก็บ Source code โปรเจค Flutter ของผม ซึ่งจะขอข้ามขั้นตอนวิธี push code นะ
จากนั้น ที่ App Center ให้เรา connect Repository ที่ต้องการ

ผมแนะนำว่า ให้แยก branch สำหรับ App Center โดยเฉพาะนะ
เวลาที่เราต้องการ ให้ App Center ทำงาน ให้ merge

Signed Build (Android)

ขั้นตอนถัดไป คือเราจะต้องกำหนด Build config ใน App Center สังเกตว่าที่ build scripts จะมี Post-clone แสดงอยู่ตามที่เราเขียน script ไว้ โดยในหน้านี้เราสามารถกำหนดได้ว่าต้องการ build ตอนไหน เช่น build ทันทีทุกครั้งที่มี code push เข้ามา

จุดสำคัญ คือ Sign Build ให้เรากำหนด keystore ของเรา หรือถ้าใครเก็บ keystore ไว้ใน Git และ config gradle สำหรับ release ไว้แล้วก็สามารถเลือก My Gradle setting are entirely set…

จุดสุดท้ายคือให้เรากำหนด Distribute ให้ส่งอีเมลไปแจ้ง Tester ตามที่เรากำหนด ซึ่ง default App Center จะกำหนดอยู่ใน Groups ที่ชื่อว่า Collaborators

จากนั้นกด Save and Build แล้วรอ App Center ทำงานสักครู่ ประมาณ 10-15 นาที

ถ้า build สำเร็จ ไม่มี error
status จะเป็น BUILT สีเขียวแบบนี้

จากนั้น เราจะได้รับ email สำหรับดาวน์โหลดแอปจาก App Center แบบนี้

โดยเราสามารถเพิ่ม อีเมล tester ได้ที่เมนู Setting > People

สร้างโปรเจค iOS

ทำฝั่ง iOS กันต่อ โดย Platform เลือกเป็น Objective-C / Swift

จากนั้นจะพบหน้าจอ Getting Started
ตรงนี้ให้ข้ามไปได้เลย ไม่ต้องทำก็ได้นะ

App Center Build Script (iOS)

กลับมาที่โฟลเดอร์ Flutter ของเรา เราต้องกำหนด build script ให้กับ iOS
ให้สร้างไฟล์ appcenter-post-clone.sh ที่โฟลเดอร์ ios

เขียน script ดังนี้

#!/usr/bin/env bash
#Place this script in project/ios/

# fail if any command fails
set -e
# debug log
set -x

pod setup

cd ..
git clone -b stable https://github.com/flutter/flutter.git
export PATH=`pwd`/flutter/bin:$PATH

flutter channel stable
flutter doctor
flutter pub get

echo "Installed flutter to `pwd`/flutter"

flutter build ios --release --no-codesign

จากนั้นทำตามขั้นตอนเดียวกับ Android คือ Connect Repository และกำหนด Build Config ใน App Center สามารถเลือก Xcode verison ตามต้องการได้ หากถูกต้อง จะมี Post-clone แสดงที่ใน build script ด้วย

Signed Build (iOS)

ที่ Sign builds เราจะต้องกำหนด 2 สิ่ง คือ Provisioning Profile และ Certificate
โดยไฟล์ Provisioning Profile สามารถโหลดได้จาก เมนู Profile ในเว็บ Apple Developer

ส่วนไฟล์ Certificate สามารถโหลดจาก Keychains ใน Mac ของเรา
ก่อนอื่นเราต้องดูก่อนว่า ตอนเรา build release เราใช้ Certificate อะไร
วิธีคือให้เปิด Xcode โปรเจค iOS ของเรา ไปที่เมนู Signing & Capabilities
แล้วดูที่ส่วน Release ตรง Signing Certificate ว่า Certificate ที่ใช้ชื่อว่าอะไร

จากนั้นเปิดโปรแกรม Keychains ใน Mac
มองหา Certificate ที่มีชื่อเดียวกันกับ ที่ใช้ใน Xcode ของเรา
ให้คลิกขวา เลือก Export…

จากนั้นจะมีหน้าจอให้เรา Save ไฟล์ certificate นามสกุล .p12

ซึ่งจะต้องกำหนดรหัสผ่านให้กับ Certificate
โดยรหัสผ่านนี้ เราจะต้องไปใส่ที่ App Center นั่นเอง

จากนั้นกลับมาที่ Build config ใน App Center ให้กำหนด Certificate ทุกอย่างให้เรียบร้อย
แล้วกด Save & Build รอดูผลลัพธ์

ตรงจุดนี้ถ้ามี Error ให้ลองแก้ตาม Output ที่ปรากฏใน Console
โดยแนะนำว่าให้ Build Release ใน Xcode บนเครื่องเราให้สำเร็จก่อน

ผลลัพธ์

หลังจากลองใช้งาน App Center มาสักพัก ถือว่าตอบโจทย์ผมมาก เพราะผลลัพธ์ของเราคือ Tester จะได้อีเมลสำหรับดาวน์โหลดแอปหลังจาก เรา push code ไปที่ Gitlab (รอ Build 10-20 นาที) ดังนั้นเมื่อมีแอปเวอร์ชันใหม่ Tester สามารถทดสอบแอปได้อย่างสะดวกรวดเร็ว

ค่าบริการ

บริการ App Center ฟรี แต่จำกัดเวลาในการ build 240 นาทีต่อเดือน และ 120 นาทีต่อ build
ซึ่งหากเราใช้ build Flutter ก็จะได้ราวๆ 12 ครั้งต่อเดือนเท่านั้น

หากเราต้องการใช้งานแบบไม่จำกัดเวลา เราจะต้องจ่าย $40 ต่อเดือน ประมาณ 1,900 บาท
แต่ก็จะ build ได้ทีละโปรเจค หากต้องการเพิ่ม concurrency เพื่อให้สามารถ build พร้อมๆกันได้ จะต้องเพิ่มอีก $40 ต่อ build concurrency

รายละเอียด
https://visualstudio.microsoft.com/app-center/pricing/

ตอนนี้ผมลองใช้บริการแบบ $40/เดือน อยู่ครับ จะได้ build ได้ไม่จำกัดเวลา
โดยการชำระเงินจะเชื่อมกับ Azure Subscription หากใครที่ใช้ Azure อยู่แล้วจะสะดวกมากๆ

เทียบกับ Codemagic

Codemagic เป็นบริการคู่แข่งในรูปแบบเดียวกัน น่าสนใจที่หากเอามาเทียบกัน

สังเกตว่า App Center ยังไม่รองรับ Flutter แบบเป็นทางการเสียทีเดียว คือจะรองรับเป็น iOS , Android Native ซึ่งจะต่างจากคู่แข่งอย่าง Codemagic ที่มีตัวเลือก Flutter ให้เลย และ codemagic ยังสะดวกกว่าที่สามารถปรับแต่ง VM ได้ด้วย ในขณะที่ App Center ไม่มีตัวเลือก แต่ codemagic จะมีค่าบริการสูงกว่าหากใช้งานในโปรเจคที่ใหญ่ขึ้น คือถ้าใช้เกิน 500 นาที จะคิดค่าบริการเริ่มต้นนาทีละ $0.038 ต่อนาที หรือประมาณนาทีละ 1.25 บาท (Standard) หรือเหมาจ่ายเพื่อให้ไม่จำกัดเวลา จะต้องจ่ายถึง $299 ต่อเดือน ซึ่งค่อนข้างสูงสำหรับทีมเล็กๆ ในขณะที่ App Center จ่ายแบบจบๆต่อเดือน build ไม่จำกัดเวลา ในราคา $40

รายละเอียด codemagic
https://codemagic.io/pricing/

จบแล้ว

บล็อกนี้มาแชร์เกี่ยวกับ Flutter ร่วมกับ App Center ครับ เครื่องมือที่ช่วยให้การ build Flutter App ทั้ง iOS Android ไปถึงมือ Tester ได้อย่างสะดวกรวดเร็ว ในบล็อกถัดไปจะพาไปลองเล่น Codemagic ครับ

ขอบคุณที่ติดตามอ่านจนจบครับ (:

อ่านต่อเลย เรื่อง Codemagic !