Tutorial CI/CD Flutter dengan Azure Pipelines dan AppCenter
Pada tutorial kali ini, akan dibahas mengenai lint, build, dan distribute aplikasi Flutter iOS/Android dengan menggunakan Azure Pipeline sebagai Continuous Integration (CI) dan AppCenter sebagai Continuous Delivery (CD). Kode sumber untuk tutorial ini dapat diakses di sini. Untuk kasus ini, kode sumber dihosting di Github dan dihubungkan ke Azure Pipeline. Persyaratan dasar untuk dapat mengikuti tutorial ini adalah:
- Sudah memiliki kode Flutter (jika ingin dibuatkan tutorial dasar Flutter, silahkan tulis response di bawah)
- Kode sumber sudah menggunakan git. Dalam kasus ini, kode sumber disimpan di Github.
- Sudah memiliki akun Azure DevOps dan memiliki peran/role untuk membuat pipeline dan menghubungkannya dengan repository git.
- Sudah memiliki akun AppCenter dan memiliki peran/role untuk menghubungkan dengan repository git.
Install Flutter untuk Azure DevOps
Pada saat tutorial ini ditulis, Azure Pipeline belum mendukung task/perkakas untuk menjalankan flutter. Untungnya, sudah ada yang membuat task Flutter di visual studio marketplace yang gratis sehingga dapat digunakan sebagai basis Flutter di Azure DevOps. Untuk menginstalnya, pergi ke https://marketplace.visualstudio.com/items?itemName=aloisdeniel.flutter dan install dengan menekan tombol “Get it free”. Jangan lupa untuk login terlebih dahulu.
Lalu pilih organisasi yang ingin di instal Flutter dan tekan “Install”.
Menghubungkan Github dengan Azure Pipeline
Tahap selanjutnya adalah menghubungkan Github dengan Azure Pipeline. Pergi ke Azure DevOps dashboard lalu masuk ke “Pipelines” dan “create new Pipeline”. Pilih tempat kode sumber, dalam kasus ini Github.
Berikutnya, pilih repository yang akan dihubungkan:
Dan konfigurasi untuk membuat konfigurasi baru atau menggunakan konfigurasi yang sudah ada. Dalam kasus contoh yang menggunakan github “hello_flutter”, pilih “Existing Azure Pipelines YAML file” karena di repository github telah ada berkas “azure-pipeline.yml”.
Setelah itu, pilih “Run” ataupun “Save” untuk menyimpan konfigurasi pipeline:
Tampilan di halaman Pipelines akan bertambah dengan pipeline baru yang telah dibuat.
Flutter Continuous Integration dengan Azure Pipeline
Ada beberapa hal dasar yang perlu diketahui untuk menggunakan Flutter di Azure Pipeline:
- Selalu jalankan “Flutter Install” di awal definisi.
- Untuk menjalankan perintah Flutter, setelah “Flutter Install” dijalankan, gunakan “FlutterToolPath” environment variable untuk mengakses binary flutter. Contoh: $(FlutterToolPath)/flutter test.
- Dart binary bisa diakses di $(FlutterToolPath)/cache/dart-sdk/bin/dart.
Kembali ke CI di Azure Pipeline, ada beberapa hal yang bisa dilakukan menggunakan Azure Pipeline misal lint, test, build, dan membuat artefak. Dalam kasus ini, CI yang akan digunakan hanyalah lint dan test (termasuk cakupan kode/code coverage). Untuk build dan membuat artefak/binary file (singkatnya: Continuous Deliverynya) tidak akan dilakukan di Azure Pipeline karena akan menggunakan AppCenter. Salah satu alasan mendasarnya adalah signing untuk multiple environment akan lebih susah jika dilakukan di Azure Pipeline (terutama iOS).
Ini adalah contoh “azure-pipeline.yml” yang ada di hello_flutter github:
Linting dilakukan dengan menjalankan Flutter analyze (tulis respon dibawah jika ingin dibuatkan tutorial mengenai linting di Flutter), sedangkan testing dilakukan dengan menggunakan task bawaan dari Flutter task yaitu “FlutterTest”. “FlutterTest” akan menampilkan hasil uji di tab “Tests”.
Untuk cakupan kode/code coverage, secara standar Flutter akan mengeluarkan cakupan kode menggunakan Lcov di dalam folder “coverage”. Padahal, di Azure Pipeline “code coverage result task” hanya menerima hasil cakupan kode dengan format Cobertura atau JaCoCo. Untungnya, telah ada naskah Python untuk merubah dari Lcov menjadi Cobertura sehingga hasil cakupan kodenya dapat muncul di tab “Code Coverage”.
Menghubungkan Github dengan AppCenter
Continuous Delivery dilakukan di AppCenter. Salah satu keunggulan menggunakan AppCenter adalah kemudahan untuk mendistribusikan artefak/binary. Keunggulan lain dari penggunaan AppCenter adalah kemudahan untuk melakukan CodeSign untuk aplikasi iOS yang lebih rumit jika dilakukan di Azure Pipeline. Secara garis besar, untuk membuat binary Android dan iOS, buat lah 2 App di AppCenter secara terpisah yaitu satu untuk Android dan satu untuk iOS.
Ada beberapa hal yang perlu dilakukan di sisi repository untuk dapat menjalankan Flutter di AppCenter. Konsep dari cara yang diperlukan adalah melakukan instalasi Flutter, melakukan “flutter build” untuk mendapatkan dependencies yang diperlukan dan menghasilkan binary (apk/aab/ipa) yang akan didistribusikan. Untungnya, Microsoft telah membuat beberapa naskah untuk install Flutter di AppCenter yang dapat diakses disini. Untuk lebih detailnya, akan dijelaskan di tahap masing-masing platform.
Kode contoh dapat dilihat di github hello flutter dengan nama branch “chore/add-appcenter-post-clone-script”. Untuk melihat perubahan apa saja yang ada di dalam branch tersebut, silahkan coba untuk buat PR dari branch tersebut ke branch “master”.
Untuk membuat app baru, di dashboard utama pilih “Add new app”.
iOS Flutter Continuous Delivery dengan AppCenter
Pertama-tama, ambil naskah “appcenter post clone” untuk menginstal Flutter dan melakukan Flutter build sebagai ios dengan perintah:
cd ios
Jangan lupa untuk commit dan dipush sebelum lanjut ke tahap berikutnya. Selanjutnya, untuk membuat App baru sebagai Flutter, pilih iOS dan Objective-C / Swift.
Setelah itu lakukan konfigurasi seperti membuat App iOS seperti biasa termasuk konfigurasi Build, Signing, dan Distribution. AppCenter iOS untuk Flutter telah siap digunakan seperti biasa.
Android Flutter Continuous Delivery dengan AppCenter
Agar aplikasi Flutter Android dapat dideteksi oleh AppCenter, berkas-berkas “gradle” perlu dicommit juga. Oleh karena itu, hapus beberapa gitignore yang berada di dalam folder “android”.
Lalu ambil naskah “appcenter post clone” untuk instal Flutter dan melakukan Flutter build sebagai android dengan perintah:
cd android
Secara standar, naskah tersebut akan melakukan build sebagai “apk”. Untuk membuat naskah tersebut menghasilkan “aab”, cukup komen baris 27 dan hapus tanda komentar di baris 30.
Selanjutnya, untuk Android, pilih Android dan Java / Kotlin.
Setelah itu lakukan konfigurasi seperti membuat app Android seperti biasa termasuk konfigurasi Build, Signing, dan Distribution. AppCenter Android untuk Flutter telah siap digunakan seperti biasa.
Sumber-sumber lain mengenai Flutter dengan Azure Pipeline dan AppCenter:
- https://medium.com/@levelfivecoder/how-to-build-sign-and-distribute-your-flutter-android-application-using-azure-devops-and-appcenter-965382b85b8b
- https://buildflutter.com/deploying-flutter-apps-via-appcenter
- https://github.com/microsoft/appcenter/tree/master/sample-build-scripts/flutter
Semoga tutorial ini membantu kalian. Clap jika kalian suka, share jika tutorial ini membantu buat kalian. See you next time!
Hyperjump is an open-source-first company providing engineering excellence service. We aim to build and commercialize open-source tools to help companies streamline, simplify, and secure the most important aspects of its modern DevOps practices.
