Flutter Build and Release an iOS App

6 min readDec 20, 2019

Ref. https://www.emanprague.com/en/blog/lets-develop-a-mobile-app-in-flutter-13/

บทความนี้เกี่ยวกับขั้นตอนการ Release แอพพลิเคชั่นที่พัฒนาด้วย Flutter ขึ้น Apple Store มีขั้นตอนอะไรบ้างนั้นไปดูกันเล๊ยยยย++

ก่อนที่จะเริ่มขั้นตอนการ release แอพพลิเคชั่น ต้องให้แน่ใจก่อนว่าแอพของเรานั้นถูกต้องเป็นไปตามหลักเกณฑ์การตรวจสอบของ Apple ซึ่งสามารถดูรายละเอียดเพิ่มเติมได้จากที่นี่ App Review Guidelines

และการที่เราจะ publish แอพขึ้น Apple Store ได้นั้น เราต้องเป็นสมาชิกของ Apple Developer Program เสียก่อน สามารถอ่านข้อมูลเกี่ยวกับการเป็นสมาชิกเพิ่มเติมได้จากที่นี่ Membership

หากทุกอย่างพร้อมแล้วก็ลุยโล๊ดด+++

ขั้นตอนทั้งหมดมีดังต่อไปนี้

Register your app on App Store Connect
1.1 Register a Bundle ID
1.2 Create an application record on App Store Connect
Review Xcode project settings
Updating the app’s version number
Add an app icon
Create a build archive
Release your app to the App Store

1. Register your app on App Store Connect

App Store Connect มีชื่อเดิมว่า iTunes Connect ใช้สำหรับจัดการเกี่ยวกับแอพพลิเคชั่นของเรา เช่น การกำหนดชื่อและรายละเอียดของแอพ เพิ่มรูป screenshots การตั้งค่าราคาแอพ การจัดการเรื่อง release แอพขึ้น App Store และการ TestFlight

การลงทะเบียนนั้นจะประกอบไปด้วย 2 ขั้นตอน
1.1 การลงทะเบียน Unique Bundle ID
1.2 การสร้างแอพพลิเคชั่นบน App Store Connect

อันดับแรกเราต้องทำการลงทะเบียน Bundle ID ก่อน ดูต่อในหัวข้อถัดไป

1.1 Register a Bundle ID

ทุกแอพพลิชั่นของ iOS ต้องมี Bundle ID (เปรียบเสมือนเลขประจำตัวประชาชนของเรา) เป็นค่าที่ unique ที่ใช้ลงทะเบียนกับ Apple (ค่านี้จะไม่ซ้ำกัน) สำหรับขั้นตอนการลงทะเบียน Bundle ID สำหรับแอพของเราทำอย่างไรบ้างไปดูกันเลย

เปิดเว็บไซต์ developer.apple.com ทำการ login เข้าระบบ แล้วคลิ๊กเมนู Account

2. เลือกเมนู Certificates, IDs & Profiles ด้านซ้ายมือของหน้าเว็บ (Account ของผู้เขียนเป็น App Manager Role) รายละเอียดแต่ละ Roles

Click Menu **Certificates, IDs & Profiles**

3. จากนั้นเลือกเมนู Identifiers ด้านซ้ายมือ และเลือก App IDs มุมบนด้านขวามือ แล้วคลิ๊กปุ่ม +

Click Menu ***Identifiers,*** *select* ***App IDs*** *and Click button* +

4. เลือก App IDs และคลิ๊กปุ่ม Continue

Select **App IDs** and Click button **Continue**

5. เลือก Platform, กรอก Description, กรอก Bundle ID และเลือก Capability ที่ใช้กับแอพของคุณ จากนั้นคลิ๊กปุ่ม Continue

6. ตรวจสอบความถูกต้องของข้อมูล แล้วคลิ๊กปุ่ม Register

Check Information and Click button **Register**

7. จากนั้นจะ redirect มาที่หน้าแสดงลิสต์ของ App IDs และจะเห็น Bundle ID ที่เราพึ่งลงทะเบียนจากขั้นตอนก่อนหน้าปรากฏอยู่ ดังรูปด้านล่าง

ตอนนี้เราได้ทำการลงทะเบียน Bundle ID สำหรับแอพของเรากับ Apple เรียบร้อยแล้ว ^^

1.2 Create an application record on App Store Connect

ต่อมาเราจะลงทะเบียนแอพของเราบน App Store Connect

เปิดเว็บไซต์ App Store Connect และคลิ๊กที่ My Apps

2. คลิ๊กปุ่ม + ด้านบนซ้ายมือและเลือก New App เพื่อทำการสร้างแอพ

3. กรอกรายละเอียดเกี่ยวกับแอพของเรา ได้แก่ Platform (Flutter v1.12.13+hotfix.5 เป็นเวอร์ชั่นปัจจุบัน ณ ที่เขียนซึ่งยังไม่รองรับ tvOS), ชื่อแอพ, ภาษาหลักของแอพ, Bundle ID, SKU และ User Access

4. จากนั้นจะ redirect มาหน้ารายละเอียดของแอพ และเลือกเมนู App Information ด้านซ้ายมือ ให้ทำการกรอกข้อมูลให้ครบถ้วน โดยส่วนของ General Information ให้เลือก Bundle ID ที่เราได้ทำการสร้างไปจากขั้นตอนก่อนหน้า และคลิ๊กปุ่ม Save

ตอนนี้เราได้ลงทะเบียนแอพของเราบน App Store Connect เรียบร้อยแล้ว

2. Review Xcode project settings

ในขั้นตอนนี้เราจะมาตรวจสอบการตั้งค่าที่สำคัญใน Xcode workspace กัน สำหรับขั้นตอนและคำอธิบายโดยละเอียด Prepare for app distribution.

2.1 เปิดโปรเจคใน Xcode จาก path: <project_dir>/ios/Runner.xcworkspace

2.2 สำหรับการตั้งค่าของแอพ ให้เลือก Runner project ในเมนูด้านซ้ายมือของโปรแกรม Xcode จากนั้นในเมนูย่อยด้านซ้ายเลือก Runner target แล้วก็เลือก General tab

2.3 ต่อมา เราจะมาตรวจสอบการตั้งค่าที่สำคัญของแอพกัน มีอะไรบ้างนั้นมาดูกันเลย

ในส่วนของ Identity

Display Name: ชื่อของแอพพลิเคชั่นที่จะแสดงให้เห็นที่ Home screen และที่อื่นๆ
Bundle Identifier: App ID ที่เราได้ลงทะเบียนไว้บน App Store Connect.

ในส่วนของ Signing

Automatically manage signing: โดยปกติ Xcode ควรมีการกำหนดการจัดการเกี่ยวกับ signing และ provisioning แบบอัตโนมัติเป็นค่าเริ่มต้น สำหรับรายละเอียดเพิ่มเติม Code Signing Guide
Team: ทีมที่เราได้ลงทะเบียนกับ Apple Developer account

ในส่วนของ Deployment Info

Deployment Target: เวอร์ชั่นต่ำสุดของ iOS ที่รองรับ ซึ่ง Flutter รองรับตั้งแต่เวอร์ชั่น 8.0 ขึ้นไป แต่ถ้าแอพพลิเคชั่นมีการรวมโค้ด Objective-C หรือ Swift ที่มีการสร้าง APIs เสริมขึ้นมาที่ไม่รองรับ iOS เวอร์ชั่น 8.0 ต้องมีการอัพเดทการตั้งค่าให้เหมาะสม

การตั้งค่าใน General Tab และ Signing & Capabilities Tab ควรมีลักษณะดังต่อไปนี้

3. Updating the app’s version number

โดยปกติค่าเริ่มต้นของเลขเวอร์ชั่นคือ 1.0.0 สำหรับการอัพเดทนั้นสามารถทำได้โดย แก้ตัวเลขในไฟล์ pubspec.yaml ที่บรรทัด version: ดังตัวอย่างด้านล่าง

version: 1.0.0+1รูปแบบคือ version + build numberversion       = 1.0.0     // เพิ่มตามความเหมาะสม คือ 1.0.1, 1.1.0 ,...
build number  = 1         // เพิ่มทีละ1 คือ 1,2,3,..., n

ทั้ง version และ build number สามารถกำหนดได้ด้วยการใช้ command โดยเพิ่มคำสั่ง --build-name และ --build-number

$ flutter build ios --build-name 1.0.0 --build-number 1

ใน iOS build-name ใช้ตัวแปร CFBundleShortVersionString และ build-number ใช้ตัวแปร CFBundleVersion สามารถอ่านเพิ่มเติมได้ที่นี่ Core Foundation Keys

4. Add an app icon

เมื่อเราสร้างแอพใหม่ Flutter จะมีสร้างชุดของ icon ของตัวเองขึ้นเป็นค่าเริ่มต้น โดยเราสามารถสร้างชุด icon ใหม่ที่เราต้องการได้ มีขั้นตอนดังนี้

4.1 สามารถดูรายละเอียดเกี่ยวกับ iOS App Icon ได้

4.2 ใน Xcode ให้เลือก Runner project ในเมนูด้านซ้ายมือของโปรแกรม Xcode จากนั้นเลือก Assets.xcassets ในโฟลเดอร์ Runner และคลิ๊กที่ AppIcon ที่เมนูย่อยด้านซ้ายมือ จากนั้นจะเห็น icon set ค่าเริ่มต้นของ Flutter ดังรูปภาพด้านล่าง

4.3 ต่อมาเราจะสร้าง icon set สำหรับแอพพลิเคชั่นของเรา สามารถดูวิธีทำได้จากบทความนี้

สร้าง Icon Set สำหรับ Flutter App

สำหรับการสร้าง Icon set สำหรับใช้กับแอพพลิเคชั่น สามารถทำได้ง่ายๆ ด้วยแอพ Icon Set Creator สามารถติดตั้งผ่าน App Store…

medium.com

เมื่อได้ผลลัพธ์จากขั้นตอนก่อนหน้ามาแล้ว ให้นำโฟลเดอร์ AppIcon.appiconset ที่ได้ไปวางทับใน path: <project_dir>/ios/Runner/Assets.xcassets

4.4 ตรวจสอบการอัพเดท icon set ด้วยการรันคำสั่ง flutter run หากอัพเดทสำเร็จ icon ของแอพเราในหน้า home screen จะเปลี่ยนไป

5. Create a build archive

ในขั้นตอนนี้เราจะทำการ build archive และอัพโหลด build ขึ้น App Store Connect

ในระหว่างที่พัฒนานั้น เราได้มีการ build, debug, และ test ด้วย debug builds แต่เมื่อเราพร้อมที่จะนำแอพขึ้นบน App Store เพื่อให้ผู้ใช้ได้ใช้งานหรือเพื่อทำการทดสอบ(TestFlight) เราจะต้องเตรียมตัว release build ตามขั้นตอนต่อไปนี้

สร้าง Release build

5.1 เริ่มจากเข้าไปที่ไฟลเดอร์โปรเจคแล้วรันคำสั่งต่อไปนี้ เพื่อสร้าง release build (flutter build จะมีค่าเริ่มต้นคือ — release ดังนั้นไม่จำเป็นต้องใส่ในคำสั่ง)

$ flutter build ios

5.2 ให้ทำการปิดและเปิดโปรแกรม Xcode ใหม่หนึ่งครั้งเพื่อ refresh ให้เป็น release mode แต่สำหรับ Xcode เวอร์ชั่นต้ังแต่ 8.3 ขึ้นไปไม่เป็นทำขั้นตอนนี้

ตั้งค่า version และ build number

5.3 เปิดโปรเจคใน Xcode จาก path: <project_dir>/ios/Runner.xcworkspace

5.4 เลือกเมนู Product > Scheme > Runner

5.5 เลือกเมนู Product > Destination > Generic iOS Device.

5.6 แก้ไขเลข version และ build number ให้เหมาะสม

ขั้นตอนสุดท้าย สร้าง build archive และ upload ขึ้น App Store Connect

5.7 เลือก Product > Archive เพื่อที่จะทำการ build archive

5.8 กดปุ่ม Validate App เพื่อตรวจสอบความถูกต้องของแอพพลิเคชั่น ถ้ามีข้อผิดพลาดโปรแกรมจะแจ้งรายละเอียดต่างๆให้ทราบ เพื่อให้เราแก้ไขให้ถูกต้อง โดยเลข build ID สามารถใช้ซ้ำได้ จนกว่ากระทั่งเราได้ upload archive ไปแล้ว

5.9 หลังจากได้ validate สำเร็จแล้ว ให้กดปุ่ม Distribute App (การดำเนินการแต่ละขั้นตอนสามารถใช้ค่า default จนกว่าจะจบขั้นตอน)

5.10 สามารถติดตามสถานะของ build ได้ที่ Activities tab ในหน้ารายละเอียดของแอพบน App Store Connect

หลังจากอัพโหลด build ไปแล้ว เราจะได้รับอีเมลภายใน 30 นาที สำหรับแจ้งรายละเอียดเกี่ยวกับ App ของเรา หากมีข้อผิดพลาดให้ดำเนินการแก้ไขให้สมบูรณ์

*** เพิ่มเติม หากได้รับแจ้งข้อผิดพลาดเกี่ยวกับชื่อฟังก์ชั่น ดังรูปภาพด้านล่าง

สามารถแก้ไขได้ด้วยวิธีนี้

$ flutter clean$ flutter build ios$ xcodebuild -workspace ios/Runner.xcworkspace -scheme Runner -sdk iphoneos -configuration Release archive -archivePath /<project_dir>/build/Runner.xcarchive

หลังจากรันคำสั่งด้านบนเสร็จแล้ว ระบบจะสร้างไฟล์ <project_dir>/build/Runner.xcarchive ขึ้นมา จากนั้นให้ double click แล้วหน้า Archive ในโปรแกรม Xcode จะเปิดขึ้นมาอัตโนมัติและให้กลับไปเริ่มทำตั้งแต่ขั้นตอนที่ 5.8 ใหม่อีกครั้ง

สำหรับคำสั่ง build เป็น .ipa

xcodebuild -exportArchive -archivePath $PWD/build/Runner.xcarchive -exportOptionsPlist exportOptions.plist -exportPath $PWD/build/Runner.ipa

ตัวอย่าง exportOptions.plist

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>compileBitcode</key>
    <true/>
    <key>method</key>
    <string> <development|app-store|enterprise|ad-hoc> </string>
    <key>provisioningProfiles</key>
    <dict>
      <key> <Bundle-Id> </key>
      <string> <Profile-Name-Show-In-Xcode> </string>
    </dict>
    <key>signingCertificate</key>
    <string> <Certificate-Added-In-Keychain> </string>
    <key>signingStyle</key>
    <string>manual</string>
    <key>stripSwiftSymbols</key>
    <true/>
    <key>teamID</key>
    <string> XXXXXXXXXX </string>
    <key>thinning</key>
    <string>&lt;none&gt;</string>
</dict>
</plist>

หากทุกอย่างเสร็จสมบูรณ์เราจะได้รับอีเมลในลักษณะนี้

และเมื่อเข้าไปยัง Activities tab ในหน้ารายละเอียดของแอพบน App Store Connect ก็จะเห็น Build ล่าสุดของเราปรากฏในลิสต์ iOS Builds ดังรูปภาพด้านล่าง

6. Release your app to the App Store

เมื่อเราพร้อมที่จะนำแอพขึ้น App Store ขั้นตอนสุดท้ายแต่ไม่ท้ายสุดคือ กรอกรายละเอียดเพิ่มเติมเกี่ยวกับแอพ จากน้ัน submit แอพเพื่อให้ทาง apple ได้ทำการ review เมื่อผ่านแล้วก็ release แอพไปยัง App Store ได้เลย

6.1 เลือก Pricing and Availability เมนูด้านซ้าย บนเว็บ App Store Connect กรอกข้อมูลให้ครบถ้วน จากนั้นกดปุ่ม Save

6.2 เลือกสถานะจากมเมนูด้านซ้ายมือ ถ้าหากเป็นการ release ครั้งแรก สถานะจะเป็น 1.0 Prepare for Submission กรอกข้อมูลให้ครบถ้วน จากนั้นกดปุ่ม Save

6.3 เมื่อกรอกข้อมูลทุกอย่างครบถ้วน กดปุ่ม Submit for Review

รอจนกว่าทาง Apple จะทำการ review เสร็จ หาก review ไม่ผ่านจะมีอีเมลแจ้งมา บอกและสามารถคลิ๊กลิ้งเพื่อเข้าไปดูรายละเอียด จากนั้นให้แก้ไขตามที่ apple แจ้งให้ครบถ้วน แล้ว resubmit ใหม่ อันที่จริงก็ไม่ได้ยุ่งยากมากแต่เราต้องกรอกรายละเอียดและให้ข้อมูลเกี่ยวกับแอพของเราให้ชัดเจน เพื่อให้ทาง apple ง่ายต่อการทดสอบ review นั้นเอง

หวังว่าบทความนี้จะมีประโยชน์กับผู้อ่านไม่มากก็น้อยน่ะครับ ขอให้สนุกและมีความสุขกับการ coding

Reference:

Build and release an iOS app

(ข้อมูลอาจมีข้อผิดพลาด ถ้าจะเอาบทความนี้ไปอ้างอิงที่อื่นให้ตรวจสอบให้ดีก่อนนะครับ ขอบคุณครับ)

สำหรับวันนี้ ต้องขอลาไปก่อน สวัสดีครับ NottDev :)