ການແບ່ງ App environment ໃນ Flutter ດ້ວຍ Flutter Flavor Part 2: IOS Custom Schema

ຈາກບົດຄວາມທີ່ແລ້ວ

ການແບ່ງ App environment ໃນ Flutter ດ້ວຍ Flutter Flavor Part 1: Android flavor

ໃນບົດຄວາມນີ້ຈະເປັນການແບ່ງ flavor ຂອງ IOS ເຊິ່ງຈະຮ້ອງວ່າ custom schema ເພື່ອບໍ່ເປັນການເສຍເວລາກໍ່ມາເລີ່ມກັນເລີຍ.

Schema

schema ກໍ່ປຽບເໝືອນ config ຂອງແອັບທີ່ເຮົາຈະພັດທະນາຂຶ້ນມານັ້ນເອງ ບໍ່ວ່າຈະເປັນ app name , Identifier , signing , build type , …etc.

Custom Schema

ກໍ່ຄືການສ້າງ schema ໃຫມ່ຂຶ້ນມາເພີ່ມຕື່ມຈາກທີ່ຕ້ອງມີແຕ່ schema ດຽວໃນການພັດທະນາແອັບ ເຮັດໃຫ້ Dev ສາມາດແຍກ config ຂອງແຕ່ Enviroment ອອກຈາກກັນໄດ້ເລີຍ ເພື່ອຄວາມສະດວກໃນການພັດທະນາ.

Create Custom Schema

ກ່ອນອື່ນໃຫ້ເຂົາໃຈກົງກັນວ່າ:

ຜູ້ຂຽນຈະຍົກຕົວຢ່າງການສ້າງ schema UAT ເທົ່ານັ້ນເຊິ່ງຜູ້ອ່ານສາມາດສ້າງໄດ້ຫຼາຍໆ schema ດ້ວຍວິທີດຽວກັນນີ້ໄດ້ເລີຍເດີ.

ເປີດ project flutter ຂອງ IOS ດວ້ຍ Xcode ແລ້ວໄປທີ່ schema ດັງຮູບດ້ານລຸ່ມ

ເລືອກໄປທີ່ Manage Schemes... ແລ້ວ dialog manage schemes ກໍ່ຈະປະກົດຂຶ້ນ

ຫຼັງຈາກນັ້ນໃຫ້ກົດເລືອກທີ່ Runner ທີ່ເປັນ default schema ຕອນທີ່ເຮົາໄດ້ສ້າງ project ຂຶ້ນມາໃຫມ່ໆນັ້ນເອງ(ຮູບດ້ານເທິງແມ່ນຜູ້ຂຽນໄດ້ສ້າງ schema ໄວ້ກ່ອນໜ້ານີ້ແລ້ວປົກກະຕິຈະມີແຕ່ Runner)ເມື່ອເລືອກແລ້ວໃຫ້ກົດໄປທີ່ menu ໄຂ່ປາດ້ານລຸ່ມ ແລະ ກົດ Duplicate ໄປໄດ້ເລີຍເຊິ່ງເຮົາຈະສ້າງ schema ໃຫມ່ໂດຍການ clone ຈາກ schema ເກົ່ານັ້ນເອງ.

ໃສ່ຊື່ schema ຕາມຊື່ flavor ທີ່ເຮົາໄດ້ກຳນົດໄວ້ແລ້ວຢູ່ flutter

ຂໍ້ຍໍ້າວ່າຕ້ອງແມ່ນຊື່ດຽວກັນເທົ່ານັ້ນຕົວຢ່າງຢູ່ flutter ເຮົາໃສ່ເປັນ dev ຢູ່ ios schema ກໍ່ຕ້ອງເປັນ dev

ຈະໃຊ້ຊື່ອື່ນບໍ່ໄດ້ບໍ່ດັ່ງນັ້ນຖືກແຫກປາກໂວຍວາຍ error message ສີແດງໃສ່ເຕັມໜ້າແນ່ນອນຕອນ run app.

ນອກນີ້ຢ່າລືມກົດ checked ທີ່ shared ດ້ານລຸ່ມ Dialog.

ຫຼັງຈາກນັ້ນກົດ close ເປັນໄດ້ເລີຍ.

ພຽງເທົ່ານີ້ເຮົາກໍ່ສ້າງ schema ໃຫມ່ໆຂຶ້ນມາໄດ້ແລ້ວ

ສ້າງ Build Config ສຳລັບ schema ໃຫມ່

ຫຼັງຈາກໄດ້ສ້າງ schema ໃຫມ່ຂຶ້ນມາແລ້ວຂັ້ນຕອນຕໍ່ໄປແມ່ນການສ້າງ build config ໃຫ້ກັບ schema ທີ່ເຮົາສ້າງຂຶ້ນມາໃຫມ່ນັ້ນ.

ໄປທີ່ Runner > Info > Configurations

ເລືອກ build configuration ເປັນ Debug ແລ້ວກົດໄປທີ່ປຸ່ມເຄື່ອງໝາຍບວກ(+) ແລະ ກົດ Deplicate "Debug" Configuration

ຕັ້ງຊື່ build configuration ໂດຍຈະຕັ້ງດ້ວຍຊື່ໃດກໍ່ໄດ້ແຕ່ແນະນຳໃຫ້ຢູ່ໃນຮູບແບບ

<Schema name><Build type>

ເພື່ອຄວາມເຂົ້າໃຈງ່າຍ ແລະ ບໍ່ສັບສົນ

ເຮັດແບບດຽວກັນກັບ debug configuration ສຳລັບrelease configuration ດັ່ງສະແດງໃນຮູບດ້ານລຸ່ມ

ສ້າງ UAT release configuration ໂດຍການ duplicate Releas Configuration

ຕັ້ງຊື່ build configuration ໃນຮູບແບບ <schema name><build type>

ຫຼັງຈາກນັ້ນກັບໄປທີ່ Manage Schemes... ເລືອກ schema ໃຫມ່ທີ່ເຮົາສ້າງຂຶ້ນມາ ແລະ ກົດ Edit... .

ໃນໜ້າ Edit ໃນ Tab Run ໃຫ້ກຳນົດ Build Configuration ເປັນ UATDebug ທີ່ເຮົາໄດ້ສ້າງໄປກ່ອນໜ້ານີ້.

ແລະ ເຊັ່ນດຽວກັນຢູ່ໃນ Tab Archive ໃຫ້ເລືອກເປັນ UATRelease

ສ່ວນ Tab Test ບໍ່ຈຳເປັນຕ້ອງກຳນົດເພາະເຮົາເຮັດ Test ຢູ່ Flutterຫຼັງຈາກນັ້ນກົດ close ໄປໄດ້ເລີຍ.

ພຽງເທົ່ານີ້ກໍ່ເປັນອັນສຳເລັດໃນການກຳນົດ build config ໃຫ້ກັບ schema ທີ່ສ້າງຂຶ້ນມາໃຫມ່

ການ Config Schema ທີ່ສ້າງຂຶ້ນມາໃຫມ່

ເມື່ອມາເທິງຂັ້ນຕອນນີ້ແມ່ນເຮົາສຳເລັດໃນການສ້າງ schema ໃຫມ່ຂຶ້ນມາແລ້ວຕໍ່ຈາກນີ້ໄປແມ່ນການ config ໃຫ້ເປັນໄປຕາມການໃຊ້ງານຂອງເຮົາເອງເຊິງກໍ່ມີຫຼາກຫຼາຍ config ແຕ່ຜູ້ຂຽນຈະເອົາ ການ config ສຳຄັນທີ່ອາດຕ້ອງໄດ້ເຮັດຕະຫຼອດໃນການພັດທະນາແອັບສະນັ້ນກໍ່ຕາມກັນມາເບິ່ງໄດ້ເລີຍ.

Signing & Capabilities

ການ config signing ແລະ Capabilities ເປັນອັນດັບທຳອິດທີ່ເຮົາຕ້ອງເຮັດເພື່ອໃຫ້ສາມາດ run app ຂຶ້ນມາໄດ້ເຊິ່ງວິທີການກໍ່ບໍ່ຕ່າງຫຍັງກັບເຮົາເຮັດກັບ default build configuration ເລີຍໂດຍກ່ອນອື່ນກໍ່ເຂົ້າໄປສ້າງ Identifier ທີ່ຈະໃຊ້ກັບ schema ດັ່ງກວ່າໃນ apple develop website

ພ້ອມກັນນັ້ນກໍ່ສ້າງ provisioning profile ຂອງ Identifier ດັ່ງກວ່າຂຶ້ນມານຳ ເພື່ອເອົາໄປໃຊ້ຢູ່ xcode. ຫຼັງຈາກນັ້ນກໍ່ໄປທີ່ xcode ໄປທີ່ Targets > Runnner > Signing & Capabilities ເລືອກ build Configuration ທີ່ຕ້ອງການ config ແລ້ວກໍ່ໃສ່ Identifier ແລະ provisioning profile ທີ່ໄດ້ຈາກຂັ້ນຕອນກ່ອນໜ້ານີ້ເຂົ້າໄປໄດ້ເລີຍ.

ສຳລັບ build configuration ອື່ນໆກໍ່ເຮັດແບບດຽວກັນເທົ່ານີ້ກໍ່ເປັນອັນສຳເລັດໃນການ config Signing & Capabilities.

Schema ຕ່າງກັນຊື່ແອັບກໍ່ຕ້ອງຕ່າງກັນ

ເມືອເຮົາ dev ຫຼາຍ enviroment ເພື່ອໃຫ້ງ່າຍ ແລະ ບໍ່ສັບສົນຕໍ່ການບອກວ່າ app ທີ່ເຮົາ build ໄປນັ້ນເປັນ enviroment ໃດກໍ່ໃສ່ຊື່ແອັບໃຫ້ມັນຕ່າງກັນໃນແຕ່ລະ schema ໄປເລີຍ.

ໂດຍໄປທີ່ Targets > Runnner > Build Settings ເລື່ອນຫາ section User-Defined ແລ້ວກົດເຄື່ອງໝາຍບວກເລືອກ Add USer-Defined Setting ຫຼັງຈາກນັ້ນໃສ່ຊື່ວ່າ DISPLAY_NAME

ເພື່ອ user-defined setting

ຫຼັງຈາກນັ້ນກໍ່ກຳນົດຊື່ທີ່ຕ້ອງການໃນແຕ່ລະ Schema Build Configuration ໄດ້ເລີຍເພື່ອເຮັດໃຫ້ເຮົາສາມາດແຍກອອກໄດ້ວ່າ app ທີ່ເຮົາ run ຫຼື build ຢູ່ໃນ schema ໃດ.

ຫຼັງຈາກນັ້ນໄປທີ່ info.plist ແລ້ວແກ້ໄຂ້ດັ່ງນີ້

 <key>CFBundleDisplayName</key>
  <string>$DISPLAY_NAME</string>

ເທົ່ານີ້ກໍ່ເປັນອັນສຳເລັດແລ້ວ.

Load Differen Firebase Configuration

ສຳລັບ project ທີ່ຕ້ອງໃຊ້ firebase ແລ້ວຢາກແຍກ firebase config ໃນແຕ່ລະ schema ກໍ່ສາມາດເຮັດໄດ້ດັ່ງນີ້.

ສ້າງ folder ຂອງແຕ່ລະ enviroment ຫຼື schema ເພື່ອເກັບ resource ຂອງແຕ່ລະ enviroment ຕົວຢ່າງດັງຮູບດ້ານລຸ່ມນີ້ຈະມີ dev, sit, uat, prod ຕາມ enviroment ທີ່ໄດ້ກຳນົດໄວ້ແລ້ວ.

ຫຼັງຈາກນັ້ນກໍ່ເອົາ resource ທີ່ຕ້ອງການແຍກເຊິ່ງໃນທີ່ນີ້ແມ່ນ firebase config ໄປໃສ່ໃນແຕ່ລະ folder ໄດ້ເລີຍ.

ສຳລັບ ios ນັ້ນແມ່ນບໍ່ຄື android ທີ່ມັນຈະຈັບເອົາ file ຕາມ enviroment ໃຫ້ເຮົາແບບອັດຕະໂນມັດສະນັ້ນເຮົາຕ້ອງຂຽນ script ຂຶ້ນມາເອງ ແຮ ແຮ . ຜູ້ອ່ານສາມາດໃຊ້ ChatGPT ໃຫ້ມັນຂຽນໃຫ້ກໍ່ໄດ້ ສະດວກສະບາຍ ຫຼື copy ຂອງເຈົ້າຂອງ blog ໄປແກ້ໄຂໄດ້ເລີຍກໍ່ໄດ້.

ໂດຍກ່ອນອື່ນໃຫ້ໄປທີ່ Targets > Runnner > Build Phases ແລ້ວກົດປຸ້ມບວກ ແລະ ເລືອກ New Run Script Phase

ຕັ້ງຊື່ script ໃຫມ່ນີ້ເປັນ Copy Assets ເຊິ່ງຕ້ອງໃຫ້ຢູ່ລະຫວ່າງ Run Script ແລະ Compile Sources ດັ່ງຮູບ

ຫຼັງຈາກນັ້ນໃສ່ Script ລຸ່ມນີ້ເຂົ້າໄປ

echo "Current Config =======> ${CONFIGURATION}"

if [ "${CONFIGURATION}" == "Debug" ] || [ "${CONFIGURATION}" == "Release" ] || [ "${CONFIGURATION}" == "Debug-dev" ] || [ "${CONFIGURATION}" == "Release-dev"  ]; then

cp -r "${PROJECT_DIR}/dev/GoogleService-Info.plist" "${PROJECT_DIR}/Runner/GoogleService-Info.plist"

echo "Development plist copied"

elif [ "${CONFIGURATION}" == "Debug-sit" ] || [ "${CONFIGURATION}" == "Release-sit" ]; then

cp -r "${PROJECT_DIR}/sit/GoogleService-Info.plist" "${PROJECT_DIR}/Runner/GoogleService-Info.plist"

echo "SIT 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-prod" ] || [ "${CONFIGURATION}" == "Release-prod" ]; then

cp -r "${PROJECT_DIR}/prod/GoogleService-Info.plist" "${PROJECT_DIR}/Runner/GoogleService-Info.plist"

echo "Production plist copied"

fi

Script ດັ່ງກວ່າຈະເປັນການ copy firebase config ຂອງ enviroment ທີ່ເຮົາຕ້ອງການ run ຫຼື build ໄປໄວ້ໃນ Runner folder ໃຫ້ເຮົາແບບອັດຕະໂນມັດເມື່ອເຮົາໃຊ້ຄຳສັ່ງ run ຫຼື build app. ຜູ້ອ່ານສາມາດ copy ແລ້ວນຳໄປແກ້ໄຂໃຫ້ເຂົ້າກັບ enviroment ຂອງຕົວເອງໄດ້ເລີຍ. ຄວາມຈິງແລ້ວບໍ່ສະເພາະແຕ່ firebase config ສາມາດໝູນໃຊ້ໄດ້ກັບ resource ອື່ນໆໄດ້ເລີຍສັງເກດວ່າຄຳສັ່ງກໍ່ເປັນພຽງ shell command copy file ທຳມະດານີ້ເອງ.

ການແຍກ Google Map Key ໃນແຕ່ Enviroment

ສຳລັບ project ທີ່ໃຊ້ google map ໃນການແຍກ google map api key ຕາມ enviroment ນັ້ນມາມາດເຮັດໄດ້ດັ່ງນີ້

ໄປທີ່ Targets > Runnner > Build Phases ໃນຊ່ອງ Filter ໃຫ້ຄົ້ນຫາຄຳວ່າ Active Compilation Conitions ເພື່ອ define ຄ່າຂອງ enviroment ເຊິ່ງຈະເອົາໄປໃຊ້ໃນ swift code.

ຫຼັງຈາກນັ້ນໄປທີ່ info.plist ແລະ ແກ້ໄຂດັ່ງນີ້

<key>MAPS_API_KEY</key>
  <string>$(IOS_MAP_API_KEY)</string>

ເມື່ອສຳເລັດແລ້ວກໍ່ໄປແກ້ໄຂ AppDelegate.swift ເພື່ອໂຫຼດ google map api key ຕາມແຕ່ລະ enviroment.

 // google maps config
    #if dev
      GMSServices.provideAPIKey("XIzaSyB1AnIV9p07j5igXXXX")
    #else
      GMSServices.provideAPIKey(Bundle.main.object(forInfoDictionaryKey: "MAPS_API_KEY") as? String ?? "")
    #endif

ເທົ່ານີ້ກໍ່ເປັນອັນສຳເລັດແລ້ວ

ສຳລັບ blog ນີ້ກໍ່ຈົບພຽງເທົ່ານີ້ແລ້ວ ແລະ ໃນ blog ຕໍ່ໄປຈະເປັນການເວົ້າເຖິງ CI/CD ໄວ້ເຈີກັນ ບາຍ ບາຍຍຍຍຍຍຍ……ສະບາຍປີໃຫມ່ລາວວວວວ

Referent: LAOITDEV

Mobile Development Flutter Flavor Ios Schema