ເຮັດ CI/CD ແບບງ່າຍໆໂດຍໃຊ້ Codemagic (Part 3): Uploading a Flutter app on TestFlight

Comet Digital Agency
6 min readJul 28, 2024

--

ຫຼັງຈາກຜ່ານໄປ 2 part ກໍຄືການ setup CI ແລະ ການ upload app ໄປທີ່ Internal Testing. ໃນທີ່ສຸດກໍມາຮອດບົດຄວາມ part ສຸດທ້າຍໃນຫົວຂໍ້ການເຮັດ CI/CD ໂດຍໃຊ້ Codemagic ແລ້ວວວວ ເຢ້ !!! 🎉🎉

ແລະ ໃນຫົວຂໍ້ນີ້ເຮົາຈະມາເວົ້າເຖິງການ deploy Flutter app ຂອງເຮົາໄປທີ່ App Store Connect ແລະ TestFlight.

ໂດຍເຮົາຈະແບ່ງຂັ້ນຕອນການເຮັດອອກເປັນ 4 steps ດັ່ງນີ້:

Step 1: iOS Code Signing

Step 2: Setting Up App Store Connect In Codemagic

Step 3: Creating An App Record

Step 4: Automatic Build Versioning

Step 1: iOS Code Signing

ການເຮັດ code signing ແມ່ນເພື່ອເຮັດໃຫ້ user ໝັ້ນໃຈວ່າແອັບເຮົາມາຈາກແຫຼ່ງທີ່ໜ້າເຊື່ອຖື ແລະ ມີຄວາມປອດໄພ. ສະນັ້ນ, ຖ້າເຮົາຕ້ອງການຕິດຕັ້ງແອັບເທິງມືຖື ຫຼື ຕ້ອງການ submit app ໄປ App Store ເຮົາກໍຕ້ອງມາ sign ດ້ວຍ certificate ທີ່ຖືກຮອງຮັບຈາກ Apple ກ່ອນ.

ສຳລັບການເຮັດ iOS code signing ໂດຍໃຊ້ Codemagic ສາມາດເຮັດໄດ້ 2 ແບບຄື: ແບບ Manual ແລະ ແບບ Automatic.

1. Manual

ສິ່ງທີ່ຕ້ອງມີສຳລັບການເຮັດ code signing ແບບ manual ມີຄື:

  1. Apple Developer Program membership
  2. App ID ຂອງ iOS app
  3. A signing certificate (Personal Information Exchange, .p12)
  4. A provisioning profile (.mobileprovision)

ຖ້າໃຜມີຄົບໝົດແລ້ວກໍເອົາມາ upload ໄດ້ໃນນີ້:

5. ແລ້ວກົດ Save changes ເພື່ອບັນທຶກການປ່ຽນແປງ.

Note: ຖ້າໃຜຍັງບໍ່ຮູ້ວິທີການສ້າງ certificate ແລະ provisioning profiles ແມ່ນເຮົາແນະນຳໃຫ້ໄປອ່ານບົດຄວາມໃນບົດຄວາມນີ້ ເຊິ່ງເຮົາໄດ້ຂຽນອະທິບາຍວິທີການສ້າງ certificate ແລະ provisioning profile ໃຫ້ແລ້ວ.

// todo: add link

2. Automatic

ສຳລັບການເຮັດ code signing ແບບ automatic, Codemagic ຈະໄປຈັດການ generate certificate ແລະ provisioning profile ມາໃຫ້ເຮົາເອງ, ແຕ່ສິ່ງທີ່ເຮົາຈະຕ້ອງເຮັດກ່ອນມີດັ່ງນີ້:

1. Creating an App Store API key for Codemagic

Log in to App Store Connect and navigate to Users and Access > Keys.

  1. Login ເຂົ້າ App Store Connect ແລະ navigate ໄປ Users and Access ແລ້ວເລືອກ tab Keys
  2. Click ທີ່ເຄື່ອງໝາຍ + ເພື່ອໄປສ້າງ API Key ອັນໃໝ່.
  3. ປ້ອນຊື່ຂອງ key ແລະ ເລືອກ access level, ເຊິ່ງໃນນີ້ເຮົາຈະເລືອກ App Manager.

4. Click Generate.

5. ຫຼັງຈາກທີ່ key ຖືກສ້າງສຳເລັດ, ເຮົາຈະເຫັນວ່າ key ໃໝ່ຖືກເພີ່ມເຂົ້າໄປໃນ list ຂອງ active key. Click ເພື່ອດາວໂຫຼດ API Key ແລ້ວເກັບໄວ້ເພື່ອໃຊ້ນຳຫຼັງ. Note: ເຮົາສາມາດໂຫຼດ key ໄດ້ແຕ່ເທື່ອດຽວເທົ່ານັ້ນເດີ້.

2. Connecting the Apple Developer Portal integration for your team/account

ກ່ອນທີ່ເຮົາຈະໄປເຮັດ iOS code signing ແບບອັດຕະໂນມັດ, ເຮົາຕ້ອງໄປເພີ່ມ App Store Connect API key ທີ່ຫາກໍ່ສ້າງໃຫ້ກັບ account ຂອງເຮົາກ່ອນ ຫຼື ເວົ້າອີກແບບໜຶ່ງແມ່ນເຮົາຕ້ອງໄປ enable Apple Developer Portal integration ເຊິ່ງນັ້ນໝາຍເຖິງການອະນຸຍາດໃຫ້ Codemagic ເຂົ້າໄປສ້າງ Certificate, Provisioning profile ໃນ account ເພື່ອໃຊ້ເຮັດ iOS Code Signing ແບບອັດຕະໂນມັດ.

ການເຮັດແນວນີ້ຈະເຮັດໃຫ້ເຮົາສາມາດໃຊ້ credential ດຽວໃນການເຮັດ automatic iOS code signing ໃຫ້ກັບ app ອື່ນໄດ້ນຳ.

  1. ເລີ່ມໂດຍການໄປທີ່ Teams > Personal Account > Integrations (ສຳລັບ project ສ່ວນຕົວ) ຫຼື ໄປທີ່ Teams > ຊື່ Team ຂອງເຮົາ > Team integration (ສຳລັບ project ທີ່ມີການ share ກັບ team ແລະ ເຮົາເປັນ admin ຂອງ team).
  2. ໃນ list ຂອງ integrations ທັງໝົດໃຫ້ click ທີ່ປຸ່ມ Connect ຂອງ Developer Portal

3. ເມື່ອ click ເຂົ້າມາ, ສິ່ງທີ່ເຮົາຄວນເຮັດທຳອິດແມ່ນໃຫ້ໄປຕັ້ງຊື່ໃຫ້ກັບ App Store Connect API key, ເຊິ່ງໃນນີ້ເຮົາຈະໃສ່ເປັນ app-store-connect.

4. ປ້ອນ Issuer ID ເຊິ່ງມັນຈະຢູ່ເທິງ table ຂອງ active keys ທີ່ຢູ່ໃນໜ້າ Users and Access page. (ຕົວຢ່າງໃນຮູບທາງລຸ່ມ)

5. ປ້ອນ Key ID.

6. ໃນຊ່ອງ API key ໃຫ້ໄປ upload API key ທີ່ເຮົາດາວໂຫຼດມາກ່ອນໜ້ານີ້.

7. ແລ້ວກົດ Save ເພື່ອບັນທຶກ.

3. Enabling automatic code signing for workflow

  1. ກັບໄປທີ່ section Distribution > iOS code signing.
  2. ເລືອກ code signing method ໃຫ້ເປັນ Automatic.
  3. ໃນ field ທີ່ຊື່ App Store Connect API key ໃຫ້ເລືອກຊື່ key ທີ່ເຮົາຫາກໍ່ເພີ່ມ
  4. ເລືອກປະເພດຂອງ provisioning profile, ໃນນີ້ເຮົາຈະເລືອກ App store ເພາະເຮົາຕ້ອງການທີ່ຈະ deploy app ໄປ App Store.
  5. ເລືອກ bundle ID ຂອງ app ເຮົາ, ຖ້າບໍ່ເຫັນແມ່ນໃຫ້ໄປສ້າງໃນ Apple Developer Portal.

6. ກົດ Save changes.

Step 2: Setting Up App Store Connect In Codemagic

ຫຼັງຈາກການ config ໃນສ່ວນຂອງ iOS code signing ແລ້ວ, ເຮົາໄປຕໍ່ທີ່ section Distribution ໃນສ່ວນຂອງ App Store Connect ເລີຍ.

  1. ເລືອກ app store connect API key ທີ່ເຮົາເພີ່ມໄປ.

3. ໄປ enable App Store Connect publishing.

4. ຈາກນັ້ນຕໍ່ມາເຮົາຈະໄປເລືອກວ່າໃຫ້ມັນ submit app ໄປໃສ. ໃນນີ້ເຮົາຈະ upload app ເຮົາໄປ TestFlight ເພື່ອ test ກ່ອນ, ເຮົາເລີຍຈະເລືອກ Submit to TestFlight beta review ຫຼື ຖ້າໃຜຕ້ອງການຈະ submit ໄປ App Store ເລີຍ ກໍໃຫ້ເລືອກ Submit to App Store review ແລ້ວກົດທີ່ Save changes.

Step 3: Creating An App Record

ກ່ອນທີ່ Codemagic ຈະສາມາດ publish app ໄປ App Store Connect ໄດ້, ເຮົາຈະຕ້ອງໄປສ້າງ app record ໃນ App Store ກ່ອນ.

  1. ໄປທີ່ App Store Connect ແລະ ກົດທີ່ເຄື່ອງໝາຍ +
  • ຈາກນັ້ນເລືອກປະເພດຂອງ platform ເຊິ່ງເຮົາເລືອກເປັນ iOS.
  • ໃສ່ຊື່ຂອງ app ເຮົາເຂົ້າໄປ.
  • ເລືອກພາສາຫຼັກຂອງແອັບ
  • ເລືອກ bundle id ທີ່ກົງກັບຂອງແອັບເຮົາ.
  • ປ້ອນ SKU ເຂົ້າໄປ, ເຊິ່ງ SKU ແມ່ນລະຫັດສະເພາະທີ່ເປັນຕົວບົ່ງຊີ້ແອັບຂອງເຮົາ (user ບໍ່ເຫັນເທິງ App Store),​ ສາມາດໃສ່ເປັນຊື່ໃດກໍໄດ້ ແຕ່ຂໍໃຫ້ມັນ unique.
  • ສຸດທ້າຍແມ່ນເຮົາສາມາດຈຳກັດໄດ້ວ່າຕ້ອງການໃຫ້ user ໃດເຫັນ app ເຮົາໃນ App Store Connect. ຖ້າເລືອກ Full Access, user ທັງໝົດຈະເຫັນ app ເຮົາ. ແຕ່ຖ້າເລືອກເປັນ Limited Access ເຮົາສາມາດກຳນົດໄດ້ວ່າໃຫ້ມີໃຜເຫັນແອັບເຮົາແນ່.

ຫຼັງຈາກນັ້ນມັນຈະ navigate ມາທີ່ໜ້ານີ້ ເຊິ່ງເປັນໜ້າຫຼັກຂອງ app ທີ່ເຮົາຫາກໍ່ສ້າງໃນ App Store Connect.

3. ເນື່ອງຈາກວ່າເຮົາຈະມາ upload app ຂອງເຮົາໄປ TestFlight ເພື່ອເຮັດ testing, ເຮົາເລີຍຈະໄປເພີ່ມ test info ໃຫ້ກັບ app ເຮົາກ່ອນ, ໂດຍເລືອກທີ່ tab TestFlight ແລະ ໃນເມນູດ້ານຂວາມື ໃຫ້ເລືອກ Test Information.

4. ໃນສ່ວນຂອງ Beta App Information

  • ເພີ່ມຄຳອະທິບາຍກ່ຽວກັບ app ຂອງເຮົາ ໃຫ້ໄປເນັ້ນວ່າມີ feature ແລະ ເຮັດຫຍັງໄດ້ແນ່.
  • ເພີ່ມ feedback email ເຊິ່ງເປັນ email ທີ່ tester ຈະສາມາດສົ່ງ feedback ຂອງແອັບກັບໄປ.
  • ຖ້າມີ link ທີ່ສາມາດບອກຂໍ້ມູນກ່ຽວກັບ app ໄດ້ ກໍໃຫ້ໃສ່ໃນ Marketing URL
  • ໃສ່ link ທີ່ບອກລາຍລະອຽດນະໂຍບາຍຄວາມເປັນສ່ວນຕົວ (privacy policy) ໃນຊ່ອງ Private Policy URL.

5. ໃນສ່ວນຂອງ Beta App Review Information

  • ເພີ່ມ Contact information ເຊິ່ງເປັນຂໍ້ມູນຂອງຕິດຕໍ່ຂອງຄົນທີ່ທາງ Apple ສາມາດສົ່ງຕິດຕໍ່ຫາໄດ້ໃນກໍລະນີທີ່ມີຄຳຖາມ ຫຼື ຂໍ້ສົງໄສເພີ່ມເຕີມ.
  • ໃນກໍລະນີທີ່ app ເຮົາຕ້ອງມີການ login, ເຮົາຈະຕ້ອງເພີ່ມ sign-in information ນຳ ເພື່ອໃຫ້ user ສາມາດເຂົ້າໄປ test app ໄດ້.
  • ເພີ່ມ Review Notes ເພື່ອໃຫ້ຂໍ້ມູນເພີ່ມເຕີມກ່ຽວກັບ app.

6. ກົດ Save ເພື່ອບັນທຶກ.

7. ເມື່ອ upload app ໄປ TestFlight, ສິ່ງທີ່ຂາດບໍ່ໄດ້ແມ່ນ tester, ຖ້າໃຜຍັງບໍ່ມີ internal group ເທື່ອ ແມ່ນສາມາດສ້າງໄດ້ຕາມນີ້:

  • ກົດປຸ່ມ + ທີ່ຢູ່ທາງຂ້າງເມນູ Internal Testing ເພື່ອໄປເພີ່ມ testing group
  • ໃສ່ຊື່ໃຫ້ກັບ group ແລະ ກົດ Create.

9. ໃນກຸ່ມທີ່ເຮົາຫາກໍ່ສ້າງ, ໃຫ້ໄປເພີ່ມ tester ເຂົ້າມາໃນກຸ່ມ ໂດຍກົດທີ່ເຄື່ອງໝາຍ + ແລ້ວຈຶ່ງກົດ Add. Note: ເຮົາສາມາດເພີ່ມໄດ້ຮອດ 100 tester ຕໍ່ໜຶ່ງ group.

Step 4: Automatic build versioning

ສິ່ງສຳຄັນທີ່ຄວນຈື່ແມ່ນທຸກໆຄັ້ງທີ່ເຮົາ upload build ໃໝ່ຂຶ້ນໄປໃນ App Store, ເຮົາບໍ່ສາມາດ upload build ທີ່ມີ build version number ຄືກັນກັບອັນກ່ອນໜ້າໄດ້. ສະນັ້ນ, ໃນ section ນີ້ເຮົາຈະມາເບິ່ງວິທີການແກ້ໄຂ version number ຂອງ iOS app.

ຖ້າໃຜເຄີຍອ່ານບົດຄວາມກ່ອນໜ້າກ່ຽວກັບການ upload app ໄປ Internal Testing, ໜ້າຈະຮູ້ແລ້ວວ່າເຮົາສາມາດແກ້ໄຂ version ຂອງ app ທີ່ຈະ upload ຂຶ້ນໄປໄດ້ຫຼາຍວິທີ ແລະ ເຊັ່ນດຽວກັນກັບ iOS app ເຮົາກໍສາມາດເຮັດໄດ້ຫຼາຍວິທີເຊັ່ນ: ແກ້ໄຂຜ່ານ pubspec.yaml, ໃຊ້ variables ທີ່ມີຢູ່ຂອງ Codemagic ແລະ ການອັບເດດ version number ແບບອັດຕະໂນມັດໂດຍອີງຕາມ build-number ອັນລ່າສຸດໃນ App Store, ເຊິ່ງຈະເປັນວິທີທີ່ເຮົາຈະພາທຸກຄົນເຮັດໃນບົດຄວາມນີ້.

  1. ເພີ່ມ variable ຕ່າງໆເຫຼົ່ານີ້ເຂົ້າໄປໃນ section ທີ່ຊື່ວ່າ Environment variables.
  • APP_STORE_CONNECT_KEY_IDENTIFIER : ໃຫ້ໄປທີ່ App Store Connect > Users and Access > Keys, ແລະ copy ເອົາ Key ID ຂອງ App Store API key ທີ່ເຮົາສ້າງໄວ້ໃນຂັ້ນຕອນຂ້າງເທິງ.
  • APP_STORE_CONNECT_PRIVATE_KEY : ແມ່ນ private key ທີ່ເຮົາດາວໂຫຼດມາໃນຂັ້ນຕອນການສ້າງ App Store API Key ເຊິ່ງຢູ່ໃນຮູບແບບ (.p8) ໃຫ້ໄປ copy ຂໍ້ມູນທີ່ຢູ່ຂ້າງໃນ file ມາໃຫ້ໝົດ.
  • APP_STORE_CONNECT_ISSUER_ID : ໃຫ້ໄປທີ່ App Store Connect > Users and Access > Keys, ໂດຍ Issuer ID ຈະຖືກສະແດງຢູ່ຂ້າງເທິງຕາຕະລາງຂອງ active keys.
  • APP_APPLE_ID : ແມ່ນ ID ທີ່ຖືກສ້າງແບບອັດຕະໂນມັດໃຫ້ກັບ app ຂອງເຮົາ. ໂດຍໄປທີ່ General > App Information > Apple ID.

2. ຫຼັງຈາກເຮັດທີ່ເຮົາເພີ່ມ variables ຕ່າງໆໃນ environment variables ສຳເລັດແລ້ວ, ເຮົາສາມາດໃຊ້ເອີ້ນໃຊ້ຄຳສັ່ງລຸ່ມນີ້ໄວ້ໃນ build argument ຂອງ iOS ໄດ້ເລີຍ.

--build-number=$(($(app-store-connect get-latest-testflight-build-number "$APP_APPLE_ID") + 1))

ໃນ section Build, ໃຫ້ໄປທີ່ Build argument ຂອງ iOS ແລ້ວເພີ່ມຄຳສັ່ງຂ້າງເທິງໃສ່.

ເຊິ່ງຄຳສັ່ງນີ້ຈະເປັນການໄປເອົາ build-number ອັນລ່າສຸດຈາກ TestFlight ມາແລ້ວມາບວກເພີ່ມຂຶ້ນ 1 ເພື່ອ set ໃຫ້ເປັນ build-number ໃຫ້ກັບ build ຂອງ iOS app ອັນປັດຈຸບັນ.

ຈາກນັ້ນ commit code ແລະ ມາເບິ່ງວ່າ Codemagic ສາມາດ publish app ເຮົາໄປ TestFlight ໄດ້ບໍ່ ແລະ ມີ build-number ເປັນອັນລ່າສຸດບໍ່.

ສຳເລັດດດດ !!!!

Conclusion

ຈົບໄປແລ້ວສຳລັບບົດຄວາມສຸດທ້າຍໃນຫົວຂໍ້ການເຮັດ CI/CD ສຳລັບ Flutter app ໂດຍໃຊ້ Codemagic ເຊິ່ງໃນບົດຄວາມນີ້ເຮົາໄດ້ຮຽນຮູ້ກ່ຽວກັບການເຮັດ iOS signing ທັງແບບ manual ແລະ ແບບ auto, ການ set up App Store Connect ໃນ Codemagic,ການ upload app ໄປ TestFlight ໂດຍໃຊ້ Codemagic, ລວມໄປເຖິງການເພີ່ມ build number ແບບອັດຕະໂນມັດ ແລະ ອື່ນໆອີກ.

ຫວັງວ່າທຸກຄົນທີ່ອ່ານບົດຄວາມຂອງເຮົາຈົນຈົບຈະໄດ້ຮັບຄວາມຮູ້ແບບເຕັມອີ່ມ ແລະ ສາມາດເຮັດ CI/CD ໂດຍໃຊ້ Codemagic ໄດ້ດ້ວຍຄວາມສະຫວັດດີພາບ.

ແລະ ສາມາດຕິດຕາມຂ່າວສານອື່ນໆທີ່ໜ້າສົນໃຈຈາກ Comet ຜ່ານທາງ:

Facebook: https://www.facebook.com/CometDigitalAgency/

Instagram: https://www.instagram.com/cometdigitalagency/?hl=en

--

--

Comet Digital Agency

Welcome to Comet sharing space :) enjoy our pool of knowledge. We are a mobile app development agency in Laos with a focus on user experience and creativity.