WeLoveDevs.com

CI/CD Flutter avec Github Actions par XPEHO

Chez XPEHO, on aime la mobilité. Il semblait donc naturel de monter une équipe pour regrouper nos idées, nos envies et nos compétences. Notre but ? Partager nos connaissances, parler de ce qui nous plaît ainsi que des sujets traités lors de nos missions. Notre équipe est actuellement constituée de 5 développeurs passionnés par le développement mobile. Nos connaissances et nos compétences sont variées, des apps natives Android et IOS aux toolkits cross plateformes type Flutter en passant par Xamarin et Ionic ou React native. Il serait dommage de ne pas en faire quelque chose !

Nous nous sommes demandé: « Par quels moyens partager ce qu’on sait faire ? » et « Comment susciter l’envie d’apprendre ces sujets ? ».

Plusieurs pistes ont été évoquées

  • Publier des applications open sources ou des librairies,
  • Faire des BBL(1),
  • Faire des meetups,
  • Ecrire des tutoriels ou publier des vidéos.

Au final on s’est lancé dans tout ça un peu en même temps.

Il allait falloir trouver un sujet, et de préférence, un qui n’est pas déjà présent des dizaines de fois sur le web. Nous avons donc puisé dans les sujets d’actualité pour nous: Flutter et Github actions. Au sein de nos missions, nous sommes amenés à créer plusieurs applications mobiles en Flutter de manière industrialisée avec la CI/CD Github actions. Et au jour où Android demande désormais de fournir des appbundle, nos clients utilisent encore les APK(2) et commencent à se tourner vers de la PWA(3). Flutter est donc tout indiqué pour couvrir ces deux besoins.

C’est donc avec ces besoins en tête que nous avons commencé à rédiger un article sur medium (https://medium.com/@xpeho.mobile/ci-cd-flutter-avec-github-actions-16aadab8d32d) et à imaginer une vidéo qui introduit cet article (ci-dessous).

 

Et comme on parle de code, nous avons aussi créé un repository Github avec la CI/CD qui l’accompagne (https://github.com/XPEHO/flutter-ci-cd).

BBL(1): Brown Bag Lunch. Il s’agit en fait d’une initiative visant à partager la connaissance en permettant à un expert de venir parler d’un sujet technique le midi dans une entreprise demandeuse, en échange d’un repas (typiquement un sandwich).

APK(2): Android Package Kit. Fichier d’archive compressée contenant tous les fichiers nécessaires à l’installation d’une application Android.

PWA(3): Progressive Web App. Application Web pouvant s’installer sur smartphones et PC et fonctionner hors ligne.

Mais en gros ça parle de quoi ?

Une CI/CD est un processus automatisé qui permet de valider et compiler le code d’une application (Continuous Integration aka: CI) dans le but de la distribuer sur une plateforme cible (Continuous Delivery aka: CD). Dans notre exemple, nous avons créé une application simple (voir illustration ci-dessous) que l’on va, valider, compiler et déployer.

Comment on fait ça ?

Des CI/CD il en existe plein. Flutter en propose quelques unes (https://flutter.dev/docs/deployment/cd). Celle que nous utilisons le plus est Github Actions (https://github.com/features/actions).

La première étape est de créer un workflow. Soit en passant par l’interface de Github, soit directement dans les sources.

Commencez par créer un dossier .github/workflows à la racine de votre projet Flutter puis créez un fichier cicd.yml

Cas n°1: construire un APK pour Android

Souvenez-vous, en entreprise, on utilise encore beaucoup l’APK. Raison pour laquelle on va s’orienter vers ce format.

Pour construire un APK avec Github Actions c’est assez simple, vous avez besoin d’une vingtaine de lignes :

name: build
on: push
jobs:
build-apk:
  runs-on:ubuntu-latest
  steps:
    - uses: actions/checkout@v2
    - uses: actions/setup-java@v1
      with:
        java-version:'12.x'
    - uses: subosito/flutter-action@v1
      with:
        flutter-version:'2.5.0'
        channel:stable
    - name: Build apk
      run:|
        flutter pub get
        flutter format --set-exit-if-changed .
        flutter analyze
        flutter test
        flutter build apk --debug

En détail:

  • checkout va récupérer le code source à compiler
  • setup-java permet d’utiliser Java dans la CI pour compiler les sources Kotlin
  • flutter-action nous met à disposition le Flutter SDK
  • la partie Build apk va accueillir les commandes à exécuter :
    • flutter pub get récupère les dépendances
    • flutter format --set-exit-if-changed . fait échouer le build si un ou plusieurs fichiers sont mal formatés
    • flutter analyze vérifie que le code ne contient pas de warning
    • flutter test s’assure que tous les tests automatisés passent
    • flutter build apk --debug construit un apk à partir des sources (l’option debug est optionnelle, retirez là pour faire une release)

Et pour la PWA ?

En gros, c’est la même chose à 2 détails près :

  1. On n’a pas besoin de java
  2. La commande flutter build apk est remplacée par flutter build web
build-web:
runs-on:ubuntu-latest
steps:
  - uses:actions/checkout@v2
  - uses:subosito/flutter-action@v1
    with:
      flutter-version:'2.5.0'
      channel:stable
  - name: Build web
    run:|
      flutter pub get
      flutter format --set-exit-if-changed .
      flutter analyze
      flutter test
      flutter build web

Maintenant la CD

Si vous avez suivi, vous avez remarqué que jusqu’à présent, on n’a fait que la partie CI. Si vous voulez y ajouter une CD, il vous suffit de programmer le déploiement vers une plateforme. On a choisi ici de déployer la version PWA sur Firebase hosting.

- name: Deploy web
env:
  WEB_DEPLOY_TOKEN:${{ secrets.WEB_DEPLOY_TOKEN }}
if:github.ref =='refs/heads/main'
run:|
  curl -sL https://firebase.tools | bash
  firebase deploy --token $WEB_DEPLOY_TOKEN

Ici, on utilise un secret nommé WEB_DEPLOY_TOKEN qui va contenir notre token de déploiement récupéré sur Firebase. Ensuite on a juste à lancer la commande firebase deploy et le tour est joué !

Vous trouverez l’application déployée ici => https://flutter-ci-cd-e37ce.web.app/#/

En conclusion

Github Actions est un moyen simple et rapide pour construire vos applications Flutter. A utiliser sans modération !

What’s next ?

Ce n’est que le début, on ne compte pas s’arrêter là. Les prochains sujets sont déjà dans notre bannette et nous prenons plaisir à les étudier pour vous les partager !

Piotr Fleury

Recent Posts

Communauté Tech et féminine : Interview avec Helvira de Motiv’her

Elles sont passées où les femmes dans la tech ? Entre le manque de représentation…

1 jour ago

Consommer des APIs HTTP en PHP comme un pro avec Nicolas Grekas.

Dans cette vidéo, on interview Nicolas Grekas, contributeur clé de Symfony, pour discuter de sa…

1 jour ago

Trouver son job grâce à WeLoveDevs.

 Comment trouver son job dans la tech ? Marie a la réponse ! Grâce à…

3 jours ago

Adobe, L’empire créatif.

Adobe, l'empire créatif, et pas des moindres ! Belle ascension de la part de ces…

7 jours ago

La MAO musique ou musique assistée par ordinateur

Est-ce plus simple de créer des morceaux avec les outils de Musique Assistée par Ordinateur…

7 jours ago