Flutter CI & CD presso ClickUp
Engineering at ClickUp

Flutter CI & CD presso ClickUp

Con un team mobile in crescita e rilasci settimanali, è essenziale disporre di una pipeline CI affidabile. Dobbiamo essere in grado di creare e testare le nostre app e distribuirle sull'App Store e sul Google Play Store. Manteniamo anche versioni di anteprima interne per testare le ultime funzionalità/funzioni.

Scopri come utilizziamo ClickUp, Fastlane e GitHub Actions per automatizzare la nostra integrazione continua (CI) e la consegna continua (CD).

La vita di un bug 🐜

Iniziamo con una rapida panoramica del nostro processo di gestione e correzione dei bug.

  1. Viene segnalato un bug (o una richiesta di funzionalità) e viene creata un'attività in ClickUp.
  2. L'attività viene assegnata a uno sviluppatore e fissata in una PR rispetto al ramo di staging.
  3. La CI esegue tutti i test, crea l'app, distribuisce un'anteprima web e carica tutto nell'attività di ClickUp.
  4. Il nostro team di controllo qualità verifica la correzione e, se è corretta, l'attività viene contrassegnata come terminata.
  5. La PR viene automaticamente unita alla fase di staging.
  6. Il ramo di staging viene creato e distribuito sul nostro TestFlight interno.
  7. Ogni mercoledì viene creato, sviluppato e testato un ramo di rilascio.
  8. Il venerdì creiamo una release su GitHub e la CI la distribuisce sull'App Store e sul Play Store.

Un'attività di ClickUp contiene tutte le informazioni relative al bug. Utilizziamo stati personalizzati come "In corso" o "Revisione codice" per tenere traccia del bug. I flussi di lavoro CI modificano automaticamente lo stato. I campi personalizzati contengono informazioni aggiuntive come chi ha segnalato il bug, chi ci sta lavorando, quando verrà rilasciato, ecc.

Flusso di lavoro PR 📜

I primi due passaggi descritti sopra non sono realmente correlati alla CI, ma il terzo è interessante...

Il nostro flusso di lavoro di sviluppo viene eseguito per qualsiasi PR. Controlla i lint, la formattazione ed esegue tutti i test prima di iniziare a creare gli artefatti Android e iOS.

Quando una build ha esito positivo, la CI pubblica un messaggio nell'attività collegata. I tecnici QA possono andare alla PR, scaricare gli artefatti della build o utilizzare l'anteprima web.

Il CI pubblicherà un messaggio nell'attività collegata.
Un messaggio CI automatizzato pubblicato nell'attività di ClickUp collegata dopo un esito positivo della compilazione

Un messaggio CI automatizzato pubblicato nell'attività di ClickUp collegata dopo un esito positivo della compilazione

Configurazione di Flutter sul CI runner 🛠

Utilizziamo la nota azione GitHub subosito/flutter-action per configurare Flutter sulla CI. Per impostazione predefinita, verrà installata l'ultima versione stabile di Flutter. Per evitare di interrompere i flussi di lavoro CI quando viene rilasciata una nuova versione di Flutter, è necessario specificare manualmente la versione.

Se hai più flussi di lavoro, è meglio memorizzare la versione di Flutter in un file. Noi utilizziamo FLUTTER_VERSION nella root del repository.

Un'altra soluzione semplice consiste nel memorizzare la versione di Flutter come segreto GitHub e accedervi utilizzando {{ secrets. FLUTER_VERSION }}.

Anteprima web 🕸

Grazie alla capacità di Flutter di funzionare sul web, possiamo creare un'anteprima web completamente funzionante delle richieste pull. Utilizzando il pacchetto device_preview, è possibile regolare le dimensioni e le impostazioni del dispositivo.

L'anteprima si è dimostrata molto utile e non viene utilizzata solo dal nostro team di controllo qualità. Anche i designer e i product manager la apprezzano per iterare rapidamente sulle nuove funzionalità/funzioni.

Anteprima web completamente funzionante in Flutter
tramite Flutter

tramite Flutter

Come creare un'anteprima web 🐶

Per iniziare, assicurati che la tua app sia compatibile con Flutter web: non tutte le API hanno supporto.

Nella nostra app, ad esempio, abbiamo dovuto disabilitare le notifiche push e i web socket.

Questo flusso di lavoro di esempio crea un'anteprima web della tua app Flutter e la carica su un bucket S3. Utilizziamo una variabile di ambiente ENABLE_DEVICE_PREVIEW per disabilitare device_preview in produzione.

Il passaggio Fix base href è necessario perché l'anteprima non sarà nella radice del bucket.

E alcuni codici per abilitare in condizioni il device_preview.

Le variabili di ambiente sono uno strumento potente e consentono all'algoritmo tree shaking di Flutter di eliminare il codice di debug per le build di rilascio.

Fastlane 💨

Fastlane semplifica notevolmente la creazione, la firma e la distribuzione delle app Flutter. Gestisce i nostri certificati, i profili di provisioning e altre impostazioni. Utilizziamo i segreti GitHub per archiviare password e token in modo sicuro.

Azioni Fastlane utili:

Campione di build di sviluppo iOS 🍏

Non dimenticare setup_ci: ti eviterà strani errori 👾. Ulteriori informazioni su Fastlane per le app Flutter.

Firma Android 🔒

Il modo più semplice per firmare in modo sicuro le build di rilascio Android è archiviare i token come segreti GitHub e utilizzare variabili di ambiente e una chiave temporanea. jks creati dalla CI:

Memorizziamo la chiave jks come stringa codificata in base64 in GitHub Secrets e la decodifichiamo nel flusso di lavoro:

Flusso di lavoro di rilascio e produzione 🚀

Il flusso di lavoro pre-rilascio viene eseguito per i rami che iniziano con release/v. Elimina tutto il codice di debug e interno per garantire che venga testato lo stesso codice che verrà rilasciato.

Inoltre, il flusso di lavoro pre-rilascio pubblica su vari canali Slack per notificare ai team di controllo qualità e marketing un nuovo rilascio utilizzando i webhook in entrata.

Dopo aver testato accuratamente tutto, creiamo una release su GitHub che triggera il flusso di lavoro di produzione. Questo flusso di lavoro compila e firma l'app con certificati di produzione e la invia all'App Store.

Altri trucchi per la tua CI 🦾

Se utilizzi il trigger push per GitHub Actions, potresti incontrare dei problemi se vengono effettuati più push in rapida successione sullo stesso ramo. Verranno avviate più istanze del flusso di lavoro, che consumeranno minuti di build o causeranno altri problemi.

Riepilogo 🍩

Costruire la tua CI è un processo divertente. È facile iniziare e puoi evolverla man mano che procedi. La nostra CI vive secondo uno dei valori fondamentali di ClickUp: Progresso verso la perfezione. Lavoriamo costantemente al miglioramento della CI per i nostri team di controllo qualità e ingegneria.

La combinazione di ClickUp, GitHub Actions e Fastlane è molto potente e consente di creare una pipeline CI/CD flessibile e completamente automatizzata in meno di un'ora. Provala!

Abbiamo molti argomenti interessanti in cantiere, quindi continua a seguire il blog ClickUp Engineering! 🦄