S rostoucím mobilním týmem a týdenními vydáváními je nezbytné mít spolehlivý CI pipeline. Musíme být schopni vytvářet a testovat naše aplikace a nasazovat je do App Store a Google Play Store. Také udržujeme interní preview verze pro testování nejnovějších funkcí.
Zjistěte, jak používáme ClickUp, Fastlane a GitHub Actions k automatizaci naší kontinuální integrace (CI) a kontinuálního dodávání (CD).
Život chyby 🐜
Začněme tím, že si rychle projdeme náš proces správy a opravy chyb.
- Hlášení chyby (nebo požadavku na funkci) a vytvoření úkolu v ClickUp
- Úkol je přiřazen vývojáři a opraven v PR proti stagingové větvi.
- CI provádí všechny testy, sestavuje aplikaci, nasazuje webový náhled a nahrává vše do úkolu ClickUp.
- Náš tým QA ověří opravu a pokud je v pořádku, úkol je označen jako hotový.
- PR se automaticky sloučí do stagingu.
- Stagingová větev se sestaví a nasadí do našeho interního TestFlightu.
- Každou středu je vytvořena, sestavena a otestována release větev.
- V pátek vytvoříme release na GitHubu a CI nasadí release do App Store a Play Store.
Úkol ClickUp obsahuje vše, co se týká chyby. K sledování chyby používáme vlastní stavy, jako je „Probíhá“ nebo „Kontrola kódu“. Pracovní postupy CI automaticky mění stav. Vlastní pole obsahují další informace, jako kdo chybu nahlásil, kdo na ní pracuje, kdy bude opravena atd.
PR workflow 📜
První dva výše uvedené kroky se vlastně netýkají CI, ale ten třetí je zajímavý...
Náš vývojový pracovní postup běží pro všechny PR. Kontroluje linty, formátování a spouští všechny testy předtím, než začne vytvářet artefakty pro Android a iOS.
Po úspěšném sestavení CI zveřejní zprávu v propojeném úkolu. Inženýři QA mohou přejít na PR, stáhnout artefakty sestavení nebo použít webový náhled.

Automatická zpráva CI zveřejněná v propojeném úkolu ClickUp po úspěšném sestavení
Nastavení Flutteru na CI runneru 🛠
K nastavení Flutteru na CI používáme známou akci GitHub subosito/flutter-action. Ve výchozím nastavení nainstaluje nejnovější stabilní verzi Flutteru. Abyste předešli narušení pracovních postupů CI při vydání nové verze Flutteru, měli byste verzi zadat ručně.
Pokud máte více pracovních postupů, je lepší uložit verzi Flutteru do souboru. Používáme FLUTTER_VERSION v kořenovém adresáři repozitáře.
Dalším jednoduchým řešením je uložit verzi Flutteru jako tajemství GitHubu a přistupovat k ní pomocí {{ secrets. FLUTER_VERSION }}.
Náhled webu 🕸
Díky schopnosti Flutteru běžet na webu můžeme vytvořit plně funkční webový náhled pull requestů. Pomocí balíčku device_preview lze upravit velikost a nastavení zařízení.
Náhled se ukázal jako velmi užitečný a nepoužívá ho pouze náš tým QA. Designéři a produktoví manažeři ho také oceňují, protože jim umožňuje rychle iterovat nové funkce.

prostřednictvím Flutter
Jak vytvořit náhled webu 🐶
Než začnete, ujistěte se, že vaše aplikace je kompatibilní s Flutter web – ne všechny API jsou podporovány.
V naší aplikaci jsme například potřebovali deaktivovat push notifikace a webové sokety.
Tento vzorový pracovní postup vytvoří webový náhled vaší aplikace Flutter a nahraje jej do úložiště S3. K deaktivaci device_preview v produkčním prostředí používáme proměnnou prostředí ENABLE_DEVICE_PREVIEW.
Krok Fix base href je nutný, protože náhled nebude v kořenovém adresáři úložiště.
A také se podívejte na kód, který podmíněně aktivuje device_preview.
Proměnné prostředí jsou výkonným nástrojem a umožňují algoritmu Flutteru tree shaking odstranit ladicí kód pro release buildy.
Fastlane 💨
Fastlane výrazně zjednodušuje vytváření, podepisování a nasazování aplikací Flutter. Spravuje naše certifikáty, profily provisioningu a další nastavení. K bezpečnému ukládání hesel a tokenů používáme GitHub secrets.
Užitečné akce Fastlane:
- fastlane match pro vytváření a ukládání klíčů a profilů iOS v úložišti GitHub
- build_app pro vytváření aplikací pro iOS a Android
- upload_to_testflight a dodávka pro nasazení sestavení iOS
- upload_to_play_store pro nasazení sestavení pro Android
Ukázka sestavení pro iOS 🍏
Nezapomeňte na setup_ci, ušetří vám to podivné chyby 👾. Zjistěte více o Fastlane pro aplikace Flutter.
Podepisování Androidu 🔒
Nejjednodušší způsob, jak bezpečně podepsat sestavení pro Android, je uložit tokeny jako tajemství GitHubu a použít proměnné prostředí a dočasný klíč. jks vytvořené CI:
Klíč jks ukládáme jako řetězec zakódovaný v base64 v Github Secrets a dekódujeme jej v pracovním postupu:
Workflow pro vydávání a produkci 🚀
Předběžný pracovní postup se spouští pro větve, které začínají release/v. Odstraňuje veškerý ladicí a interní kód, aby bylo zajištěno, že testujeme stejný kód, který bude vydán.
Kromě toho předběžný pracovní postup zveřejňuje příspěvky na různých kanálech Slack, aby informoval týmy QA a marketingu o nové verzi pomocí příchozích webhooků.
Poté, co je vše důkladně otestováno, vytvoříme na GitHubu release, který spustí produkční workflow. Ten sestaví a podepíše aplikaci produkčními certifikáty a odešle ji do App Store.
Další triky pro vaši CI 🦾
Pokud používáte spouštěč push pro GitHub Actions, pravděpodobně narazíte na problémy, pokud dojde k rychlému sledu více pushů do stejné větve. Spustí se více než jedna instance workflow, což zabere minuty sestavení nebo způsobí jiné problémy.
- Doporučujeme použít akci Zrušit pracovní postup k zrušení všech předchozích instancí pracovního postupu.
- Pokud hledáte snadné a udržovatelné řešení pro generování sekvenčních čísel sestavení, vyzkoušejte generátor čísel sestavení. Můžete také použít GITHUB_RUN_ID, ale ten nelze přizpůsobit.
- Podívejte se na aplikaci ClickUp GitHub, kde můžete přímo ve svých úkolech ClickUp zobrazit větve, commity a stav GitHub. Pro pokročilou automatizaci použijte ClickUp Automations nebo veřejné API ClickUp.
Shrnutí 🍩
Budování CI je zábavný proces. Je snadné s ním začít a můžete ho postupně vylepšovat. Naše CI se řídí jednou z hlavních hodnot ClickUp: Pokrok směrem k dokonalosti. Neustále pracujeme na vylepšování CI pro naše týmy QA a inženýrů.
Kombinace ClickUp, GitHub Actions a Fastlane je velmi výkonná a umožňuje vytvořit flexibilní a plně automatizovaný CI/CD pipeline za méně než hodinu. Vyzkoušejte to!
Máme v plánu mnoho zajímavých témat, takže sledujte blog ClickUp Engineering! 🦄

