Flutter: Build and release an Android app.

สำหรับบทความนี้จะเป็นการเริ่มต้น build app เพื่อ release to Playstore นะคับ มีขั้นตอนยังไงเรามาดูกันเลยดีกว่าคับ

https://developer.android.com/studio/publish/app-signing

จากรูปจะเห็นว่า Flutter จะต้องมีการ Sign ก่อนนะจึงจะ upload to Store ได้

https://flutter.dev/docs/deployment/android

ก่อนที่จะเริ่ม build app เราจะต้องมา make sure ที่

• build.gradle : เช็คค่าต่างๆไม่ว่าจะเป็น applicationId, minSdkVersion, targetSdkVersiion เป็นต้น
• AndroidManifest.xml : ดูพวก permission ต่างๆว่าได้เพิ่มไว้หมดรึยัง, หรือ label ที่จะโชว์, icon ที่จะใช้ เป็นต้น
• ที่สำคัญต้อง make sure ว่า app เราทำงานได้ปกตินะ

ภาพด้านบนคือ official document ของ Flutter นะคับ ซึ่งเราจะ follow ตามนั้นเลยก็ได้

1. ให้จัดการเพิ่ม icon ให้เรียบร้อยก่อนนะคับ วิธีที่ง่ายที่สุดคือใช้ package “flutter_launcher_icons” ช่วยนะคับ (ผมเคยเขียน article ไว้ล่ะ)
2. ให้เพิ่ม splash screen เข้าไปตาม link นี้เลยนะคับ โดยจริงๆแล้ว splash screen จะเพิ่มกัน 2 รูปนะคับ คือ รูปหลัก (screen) และรูปถัดไป (screenafter) จะแสดงแว๊บๆแปปเดียว วิธีการเพิ่มมีขั้นตอนดังนี้นะคับ

• ให้นำไฟล์รูป png ทั้ง 2 ไฟล์ไปวางไว้ใน folder “res/drawable” ดังรูป
• ไปที่ launch_background.xml และระบุ path ของรูปหลัก (screen.png) ให้ตรงตามรูปนะคับ

ไปที่ launch_background.xml และระบุ path ของรูปหลัก (screen.png) ให้ตรงตามรูปด้านบนนะคับ

ถัดไปให้เพิ่มรูปที่สอง (screenafter) โดยไปที่ ​values/styles.xml และเพิ่ม <style> ตามรูปนะคับ จริงๆไป copy จากที่นี่ และค่อยมาเปลี่ยนเฉพาะ path ได้เลย

<style name="NormalTheme" parent="@android:style/Theme.Black.NoTitleBar">
    <item name="android:windowBackground">@drawable/normal_background</item>
</style>
ก๊อบอันนี้ไปเปลี่ยนเฉพาะ path ได้เลยนนะคับ

ถัดไปให้ไปที่ AndroidManifest.xml และ copy <meta-data> แทรกลงไปตามรูปเลยคับ หรือ copy จากด้านล่างนี้ก้อได้

<meta-data
   android:name="io.flutter.embedding.android.NormalTheme"
   android:resource="@style/NormalTheme"
   />

หรือ ถ้าดูแล้วไม่สวย เราอาจใส่แค่รูปเดียวก็ได้นะคับ แต่โดยปกติภาพที่สอง มักจะให้สีเป็นโทนเดียวกับภาพแรกเพื่อให้ดูกลืนเข้าไปกับแอฟนะคับ

3. กลับมาขั้นตอนต่อไปนะคับ ตอนนี้จะเป็นการ Sign app นะคับ เราจะมาเริ่มกันจา

3.1 สร้าง key store ขึ้นมาก่อน ซึ่ง key store นี้จะมีผลกับการ build app แบบ release ที่จะขึ้นไปทาง Google play store นะคับ (หากไม่ build แบบนี้จะไม่สามารถนำขึ้น Store ได้)

ให้ create key store โดยการ copy คำสั่งนี้ไปแปะไว้ที่ Terminal นะคับ

ในส่วนของ ~/upload-keystore.jks คือชื่อ key store ที่จะได้ออกมานะคับ เราสามารถเปลี่ยนได้

keytool -genkey -v -keystore ~/upload-keystore.jks -keyalg RSA -keysize 2048 -validity 10000 -alias upload

หลังจากแปะคำส่งนี้ลงไปแล้ว +enter, จะต้องขึ้นให้ใส่ password นะคับ (แสดงว่าเครื่องเรารู้จักคำสั่ง keytool แล้ว แต่ถ้าไม่ขึ้นแสดงว่า Android toolchain มีปัญหา ถ้าเราเช็คด้วย flutter doctor ก็จะเห็นเป็นสีแดงนะคับ ต้องแก้ไขส่วนนี้ก่อน)

จะขึ้นให้ใส่ password แบบนี้

3.2 ให้ตั้ง password ลงไปนะ ซึ่ง key ที่เราจะสร้างตรงนี้เปรียบเสมือน private key นะคับ (ไม่ต้อง up ขึ้น version control นะคับ และจะต้อง secure เป็นพิเศษเพราะมีผลกับตอนที่เรา build apk และต้องใช้ตลอดไป ห้ามหายและห้ามหลุดออกไป)

3.3 ถัดไปให้กรอกตามที่เขาถามมาเลยนะคับ ไม่ว่าจะเป็น
- first and last name? (atthana p.)
- name of your organizational unit? (company)
- name of your organization? (q_electronics)
- name of your city or localify? (thailand)
- name of your state or province? (bangkok)
- two-letter country code? (66)
- กด y เพื่อยืนยันความถูกต้อง

จากนั้นระบบจะให้กรอก password อีกครั้งซึ่งไม่จำเป็นต้องเหมือนข้อ 3.1 นะคับ หรือจะเหมือนก้อได้ โดย passsword ตัวนี้จะช่วยในการ sign เข้าไปอีกทีนึง
- จากนั้น keychain จะช่วย generate keystore ขึ้นมาแล้วตาม path ที่ปรากฎนะคับ

กรอกข้อมูลไปเรื่อยๆ จะกระทั้งได้ keychain ที่ระบบจะสร้างขึ้นมาให้ ชื่อว่า key.jks นะคับ

3.4 ให้เข้าไปที่ path ที่เก็บ keystore นี้ ( /Users/atthana/key.jks ) โดยเราไป copy มาเก็บไว้ใน path ที่เราต้องการได้เลย และสามารถเปลี่ยนชื่อได้ด้วย เช่น test.jks (ถึงขั้นตอนนี้ เราจะได้ keystore ออกมาเก็บไว้สำหรับใช้ build apk แล้วนะคับ)

3.5 ต่อไปให้สร้าง file ชื่อว่า “key.properties” ตาม location นี้นะคับ
<app dir>/android/key.properties

https://flutter.dev/docs/deployment/android

storePassword=123456789
keyPassword=123456789
keyAlias=upload
storeFile=/Users/atthana/Desktop/deploy_key/upload-keystore.jks

หน้าตาจะประมาณนี้นะคับ

ให้เข้าไปที่เว็บแล้วก้อ copy 4 บรรทัดนี้ไปวางไว้ที่ key.properties ให้เหมือนกันเลยนะคับ โดย storePassword กับ keyPassword ก้อคือ password ที่เราได้ตั้งไว้ก่อนหน้านี้ (จะเหมือนหรือไม่เหมือนกันก็ได้), keyAlias ไม่ต้องแก้ไขอะไร, ส่วน storeFile ก้อคือ path ของ key.jks ที่เราเก็บไว้นะคับ

ทุกๆบรรทัดด้านหลังจะต้องไม่มี space นะคับ และที่สำคัญ !!!

File นี้ห้าม publish นะคับ ไม่นำขึ้น version control ต้องเก็บไว้แบบ private จริงๆ หรือ เอาขึ้นก็ได้แต่ต้องทำให้เป็น private repo ด้วย

3.6 กลับมาที่ android > app > build.gradle นะคับ และเพิ่มคำสั่งชุดนี้เข้าไป (ไป ​copy จากหน้าหลักของ Flutter ได้เลย)

def keystoreProperties = new Properties()
def keystorePropertiesFile = rootProject.file('key.properties')
if (keystorePropertiesFile.exists()) {
    keystoreProperties.load(new FileInputStream(keystorePropertiesFile))
}ter

ตัวอย่างการวางไว้ใน build.gradle

3.7 ถัดไป ให้ copy คำสั่งเหล่านี้เช่นกัน ไปวางไว้ก่อน buildTypes{} ตามรูปเลย

signingConfigs {
       release {
           keyAlias keystoreProperties['keyAlias']
           keyPassword keystoreProperties['keyPassword']
           storeFile keystoreProperties['storeFile'] ? file(keystoreProperties['storeFile']) : null
           storePassword keystoreProperties['storePassword']
       }
   }

แสดงภาพลักษณะการวางบน buildTypes

3.8 ถัดไปให้เปลี่ยนตรง buildTypes จาก debug เป็น release นะคับ

อันนี้ถัดลงมาจากด้านบนนะคับ เปลี่ยนนิดเดียว

3.9 ต่อจากนี้เราก้อจะ build apk ได้แล้วนะคับ โดยเข้าไปที่ root ของ project เลย และพิมพ์คำสั่ง (ถ้าทุกอย่างถูกต้อง จะได้ apk พร้อมทั้งระบุ path ที่เก็บ apk ออกมา)

flutter build apk

ps: ในการ build apk แต่ละครั้ง จะต้องมีการ control version ด้วย ซึ่งในครั้งแรกจะเป็น

versionCode = 1 และ versionName = 1.0.0
(หรือ ง่ายๆอาจเป็น versionCode=1 และ versionName=1.0.1 ก็ได้)

ภาพตัวอย่างของการเปลี่ยน versionName และ versionCode โดยให้เปลี่ยนที่ pubspec.yaml

แต่หลังจากนั้นเมื่อมีการ build ครั้งถัดไปจะต้องเปลี่ยน versionName ด้วย ไม่งั้นจะไม่สามารถนำขึ้น PlayStore ได้เพราะ version มันซ้ำกัน
(ต้องเติม option ตอน build แบบนี้)

flutter build apk --build-name=1.0.2 --build-number=2

อ่อ แต่สำหรับการเอาขึ้น PlayStore ตอนนี้แนะนำให้ build เป็น appBundle แบบนี้ดีกว่านะคับ

flutter build appbundle --build-name=1.0.2 --build-number=2

ถึงแม้ว่าเราจำ update version ใน pubspec.yaml แล้ว, อาจจะถูก override เมื่อเราใส่ option ใน command “Flutter build apk” ได้นะคับ

สรุปการเปลี่ยน version app นะคับ
1. เปลี่ยนที่ pubspec.yaml เช่น

version: 1.0.3+3

2. เมื่อทำการ build app ให้ระบุ option เพิ่มเติมให้เป็น version เดียวกับใน pubspec ด้วย

flutter build appbundle --build-name=1.0.3 --build-number=3

จากนั้นก้อนำ file .aab หรือ .apk ไปขึ้น PlayStore ได้เลยคับ ด้วย step ตามนี้เลยคับ

1. Go to Google Play Console
2. All app > Create app
3. Configure App details > Create app
4. In tab Dashboard > Set up your app > App access > check: All functionality is available without special access
5. Ads > check: No, my app does not contain ads
6. Content ratings > Start questionnaire > Configure email address and Category > check: Utility > Next > select every check box are “No” > Save > Next > Submit
7. App content (left menu) > Privacy policy > Start > fill Privacy policy URL > Save
8. Target audience and content > Start > check: the target of age > Next > Appeal to children: No > Next > Save
9. Go back to tab Dashboard > News apps > select: Is your app a news app? : Yes and provide information to help to verify credential > save
10. Go back to tab Dashboard > Select an app category and provide contact details > fill our info of Store settings > save
11. Go back to tab Dashboard > Setup your store listing > fill info (App name, short description, Full description), app icons (512x512), Feature graphic (1024x500), screenshot (Mobile only can accept)>Save
12. Go back to tab Dashboard > will find word “Release your app” > go to “Publish your app on Google Play”> Select countries and regions > Add countries/ regions > choose Thailand > Add countries/regions > Add
13. Go back to tab Dashboard > Publish your app on Google Play >
    Create a new release > Create new release > Select “Continue” > select “Upload” to upload “Android App Bundles” or “APKs” > fill more info such as “Release Name”, “Release notes” > Save > Review release > Rollout > Start rollout to Production
14. End

Ref: https://www.youtube.com/watch?v=2Y-8XVdhuCA

แล้วพบกันใหม่คับ