ClickUp'ta Flutter CI & CD
Engineering at ClickUp

ClickUp'ta Flutter CI & CD

Büyüyen mobil takımımız ve haftalık sürümlerimizle, güvenilir bir CI boru hattına sahip olmak çok önemli. Uygulamalarımızı oluşturup test edebilmeli ve App Store ile Google Play Store'da yayınlayabilmeliyiz. Ayrıca, en yeni özellikleri test etmek için dahili önizleme sürümleri de tutuyoruz.

Sürekli Entegrasyon (CI) ve Sürekli Teslimat (CD) süreçlerimizi otomasyonla nasıl otomatikleştirdiğimizi öğrenin. ClickUp, Fastlane ve GitHub Actions'ı nasıl kullandığımızı öğrenin.

Bir hatanın ömrü 🐜

Öncelikle, hataları yönetme ve düzeltme sürecimizi hızlıca gözden geçirelim.

  1. Bir hata (veya özellik talebi) rapor edilir ve ClickUp'ta bir görev oluşturulur.
  2. Görev bir geliştiriciye atanır ve hazırlık dalına karşı bir PR'da sabitlenir.
  3. CI tüm testleri çalıştırır, uygulamayı oluşturur, web önizlemesini dağıtır ve her şeyi ClickUp görevine yükler.
  4. Kalite Güvence takımı düzeltmeyi doğrular ve uygun bulursa görev tamamlandı olarak işaretlenir.
  5. PR otomatik olarak hazırlık aşamasına birleştirilir.
  6. Staging dalı oluşturulur ve dahili TestFlight'ımıza dağıtılır.
  7. Her çarşamba bir sürüm dalı oluşturulur, geliştirilir ve test edilir.
  8. Cuma günleri GitHub'da bir sürüm oluşturuyoruz ve CI bu sürümü App Store ve Play Store'a dağıtıyor.

Bir ClickUp görevi, hatayla ilgili her şeyi içerir. Hatayı izlemek için "İlerleme" veya "Kod İnceleme" gibi Özel Durumlar kullanırız. CI ş Akışları durumu otomatik olarak değiştirir. Özel Alanlar, hatayı kimin bildirdiği, üzerinde kimin çalıştığı, ne zaman yayınlanacağı gibi ek bilgileri içerir.

PR ş akışı 📜

Yukarıda özetlenen ilk iki adım CI ile ilgili değildir, ancak üçüncü adım ilginçtir...

Geliştirme ş akışı tüm PR'ler için çalışır. Android ve iOS artefaktlarını oluşturmaya başlamadan önce lintleri ve biçimlendirmeyi kontrol eder ve tüm testleri çalıştırır.

Bir derleme başarılı olduğunda, CI bağlantılı görevde bir mesaj yayınlar. QA Mühendisleri PR'ye gidip derleme artefaktlarını indirebilir veya web önizlemesini kullanabilir.

CI, bağlantılı göreve bir mesaj gönderecektir.
Başarılı bir derleme sonrasında bağlantılı ClickUp görevine gönderilen otomatik CI mesajı

Başarılı bir derleme sonrasında bağlantılı ClickUp görevine gönderilen otomatik CI mesajı

CI çalıştırıcıda Flutter'ı ayarlama 🛠

CI'da Flutter'ı kurmak için tanınmış GitHub eylemi subosito/flutter-action'ı kullanıyoruz. Ön tanımlı olarak, en son kararlı Flutter sürümünü yükler. Yeni bir Flutter sürümü yayınlandığında CI ş akışlarınızın bozulmasını önlemek için sürümü manuel olarak belirtmelisiniz.

Birden fazla akışınız varsa, flutter sürümünü bir dosyada saklamak daha iyidir. Deponun kök dizininde FLUTTER_VERSION kullanıyoruz.

Bir başka kolay çözüm ise Flutter sürümünü GitHub gizli bilgisi olarak saklamak ve {{ secrets. FLUTER_VERSION }} kullanarak erişmektir.

Web Önizleme 🕸

Flutter'ın web üzerinde çalışabilme özelliği sayesinde, Çekme Taleblerinin tamamen işlevsel bir web önizlemesini oluşturabiliriz. device_preview paketi kullanılarak cihaz boyutu ve ayarları değiştirilebilir.

Önizleme çok yararlı olduğu kanıtlanmış ve sadece QA takımımız tarafından kullanılmıyor. Tasarımcılar ve Ürün yöneticileri de yeni özellikleri hızlı bir şekilde yinelemek için bu özelliği seviyorlar.

Flutter'da tam fonksiyonlu web önizlemesi
Flutter aracılığıyla

Flutter aracılığıyla

Web önizlemesi nasıl oluşturulur 🐶

Başlamak için, uygulamanızın Flutter web ile uyumlu olduğundan emin olun; tüm API'ler desteklenmez.

Örneğin, uygulamamızda push bildirimlerini ve web soketlerini devre dışı bırakmamız gerekiyordu.

Bu örnek ş akışı, Flutter uygulamanızın web önizlemesini oluşturur ve bunu bir S3 kovasına yükler. Üretimde device_preview'u devre dışı bırakmak için ENABLE_DEVICE_PREVIEW ortam değişkenini kullanıyoruz.

Önizleme, kovanın kökünde olmayacağı için Fix base href adımı gereklidir.

Ve device_preview'u koşullu olarak etkinleştirmek için bazı kodlar.

Ortam değişkenleri güçlü bir araçtır ve Flutter'ın ağaç sallama algoritmasının sürüm derlemeleri için hata ayıklama kodunu bırakmasına olanak tanır.

Fastlane 💨

Fastlane, Flutter uygulamalarının oluşturulmasını, imzalanmasını ve dağıtılmasını büyük ölçüde basitleştirir. Sertifikalarımızı, provizyon profillerimizi ve diğer ayarlarımızı yönetir. Şifreleri ve belirteçleri güvenli bir şekilde saklamak için GitHub gizli bilgilerini kullanırız.

Yararlı Fastlane eylemleri:

Örnek iOS geliştirme sürümü 🍏

setup_ci'yi unutmayın, sizi garip hatalardan kurtaracaktır 👾. Flutter uygulamaları için Fastlane hakkında daha fazla bilgi edinin.

Android imzalaması 🔒

Android sürüm yapılarını güvenli bir şekilde imzalamak için en kolay yol, belirteçleri GitHub gizli bilgileri olarak depolamak ve ortam değişkenleri ile geçici bir anahtar kullanmaktır. CI tarafından oluşturulan jks:

Anahtarı jks olarak GitHub Secrets'ta base64 kodlu metin dizisi olarak saklıyoruz ve ş akışında kodunu çözüyoruz:

Sürüm ve üretim ş akışı 🚀

Ön sürüm ş akışı, release/v ile başlayan dallar için çalışır. Sürülmesi planlanan kodun aynısını test ettiğimizden emin olmak için tüm hata ayıklama ve dahili kodları kaldırır.

Ayrıca, ön sürüm ş akışı, gelen webhook'ları kullanarak QA ve pazarlama takımlarını yeni bir sürüm hakkında bilgilendirmek için çeşitli Slack kanallarına gönderilir.

Her şey kapsamlı bir şekilde test edildikten sonra, GitHub'da prod ş akışını tetikleyen bir sürüm oluşturuyoruz. Uygulamayı üretim sertifikalarıyla oluşturup imzalıyor ve App Store'a gönderiyoruz.

CI'niz için daha fazla ipucu 🦾

GitHub Actions için push tetikleyicisini kullanıyorsanız, aynı dala arka arkaya birden fazla push yapıldığında sorunlarla karşılaşabilirsiniz. Birden fazla ş akışı örneği başlatılacak ve derleme süresini tüketecek veya başka sorunlara neden olacaktır.

Özet 🍩

CI'nızı oluşturmak eğlenceli bir süreçtir. Başlamak kolaydır ve ilerledikçe geliştirebilirsiniz. CI'mız, ClickUp'ın Temel Değerlerinden biri olan Mükemmelliğe doğru ilerleme ilkesine göre çalışır. QA ve mühendislik takımlarımız için CI iyileştirmeleri üzerinde sürekli iş yapıyoruz.

ClickUp, GitHub Actions ve Fastlane'in birleşimi çok güçlüdür ve bir saatten az bir sürede esnek ve tamamen otomatik bir CI/CD boru hattı oluşturmanıza olanak tanır. Deneyin!

Çok sayıda ilginç konu hazırlıyoruz, bu yüzden ClickUp Mühendislik blogunu takip etmeye devam edin! 🦄