Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Continuous Integration with Flutter using Gitlab

Pascal Welsch
February 12, 2019

Continuous Integration with Flutter using Gitlab

mobile.cologne Februrary 12th
https://mobile.cologne/2019-02-12-vortragsabend

Pascal (@passsy) presents how to build a Continuous Integration Pipeline for Flutter.

flutter build
flutter test
flutter analyze

He creates a sample project and builds it on gitlab CI, for Android and iOS.

Pascal Welsch

February 12, 2019
Tweet

More Decks by Pascal Welsch

Other Decks in Programming

Transcript

  1. Continuous Integration

    View full-size slide

  2. grandcentrix.net
    @grandcentrix
    We are hiring!
    +Pascal Welsch
    @passsy

    View full-size slide

  3. Assumption:
    Flutter apps have a
    single codebase

    View full-size slide

  4. Reality:
    Flutter apps have
    one codebase and
    n platform wrappers (with
    code)

    View full-size slide

  5. Flutter app
    code
    Flutter Codebases
    iOS embedder
    Android
    embedder
    Fuchsia
    embedder
    Windows
    embedder

    View full-size slide

  6. Flutter app code
    Perfect Flutter Codebase
    iOS embedder
    Android
    embedder
    Fuchsia
    embedder
    Windows
    embedder

    View full-size slide

  7. Flutter app code
    Real Flutter Codebase
    iOS embedder
    Android
    embedder
    Fuchsia
    embedder
    Windows
    embedder
    Plugin
    Plugin
    Plugin
    Plugin
    Plugin
    Plugin
    Plugin
    Plugin
    Plugin
    Plugin
    Plugin
    Plugin

    View full-size slide

  8. Flutter Core
    Assets
    Platform code Plugins
    Core
    Embedder
    Dart
    Code
    Your app
    Flutter Plugins

    View full-size slide

  9. Embedder App
    App code
    (Dart)
    Flutter
    Core
    Assets
    Plugins
    Platform code
    Flutter SDK
    Embedder SDK
    Responsibility

    View full-size slide

  10. CI steps
    - Build app
    - Run unit tests
    - Run UI tests
    - Run static analysis
    - Code coverage
    - Lint
    - Danger

    View full-size slide

  11. Difficulties of CI in mobile
    development
    - Android Emulator required for Instrumentation Tests
    - iOS Simulator required for iOS UI Tests
    - iOS apps can’t be build on linux
    Jenkins, one of the few solutions offering, runners on OSX

    View full-size slide

  12. Flutter CI
    - Tests (even UI tests) run headless on every OS
    - Building/Testing embedder apps requires embedder SDK
    tools
    - For iOS/Mac apps you need macOS
    - For Android you need the Android SDK
    - For Windows you need new hardware every year

    View full-size slide

  13. Which CI is good for Flutter?
    - Travis CI
    - CircleCi
    - Jenkins
    - GitLab CI
    - GitHub Actions
    - you name it...

    View full-size slide

  14. Which CI?
    Any CI, but I’ll focus on GitLab CI for today
    Let’s assume the following is given:
    $ echo “Let’s build”
    $ git clone [email protected]:passsy/flutter-app.git

    View full-size slide

  15. $ flutter build
    $ flutter test
    $ flutter analyze

    View full-size slide

  16. $ flutter build
    ❌ command not found: flutter

    View full-size slide

  17. Let’s install flutter
    git clone
    [email protected]:flutter/flutter.git
    export PATH="$PATH:`pwd`/flutter/bin"

    View full-size slide

  18. Let’s install flutter

    View full-size slide

  19. What flutter doesn’t require
    - Dart
    - Flutter engine
    - Java
    - Android SDK *
    - Xcode toolchain *
    * Optional

    View full-size slide

  20. Finally flutter is
    installed

    View full-size slide

  21. The flutter update
    problem

    View full-size slide

  22. Make your CI builds
    reproducible!
    Never use latest
    Let all developers and CI use the same flutter version
    Make flutter part of your project

    View full-size slide

  23. Flutter wrapper
    github.com/passsy/flutter_wrapper
    - single executable flutterw which downloads the correct
    version before executing flutter
    - Version is part of your repository (submodule)

    View full-size slide

  24. $ ./flutterw build

    View full-size slide

  25. $ flutter build -h
    Available subcommands:
    aot Build an ahead-of-time compiled snapshot of your
    app's Dart code.
    apk Build an Android APK file from your app.
    bundle Build the Flutter assets directory from your app.
    ios Build an iOS application bundle (Mac OS X host
    only).

    View full-size slide

  26. Use a bash script to
    prevent vendor lock-in

    View full-size slide

  27. Build our build_android.sh
    #!/bin/bash
    set -e
    flutter build apk

    View full-size slide

  28. Execute it on GitlabCI
    image: "passsy/flutterw:0.1.0"
    before_script:
    - ./flutterw doctor --verbose
    pr:
    script:
    - ./ci/build_flutter.sh

    View full-size slide

  29. Execute it on Jenkins
    pipeline {
    agent { docker "cirrusci/flutter"}
    stages {
    stage(“pr”) {
    sh ‘ci/pr.sh’
    }
    }
    }

    View full-size slide

  30. Docker!
    - Use Docker to build your flutter app
    - Except for iOS builds
    - Allows building it locally (gitlab-runner)
    - Works on almost every modern CI

    View full-size slide

  31. Improve our build_flutter.sh
    #!/bin/bash
    set -e
    flutter format lib
    flutter analyze
    flutter test --coverage
    flutter build android

    View full-size slide

  32. Improve build script
    ./flutterw test --coverage
    # parse and show code coverage (via lcov)
    genhtml -o coverage/html coverage/lcov.info

    View full-size slide

  33. Improve build script
    # format with line width 120
    ./.flutter/bin/cache/dart-sdk/bin/dartfmt
    --set-exit-if-changed -w -l 120 lib test

    View full-size slide

  34. Build iOS on macOS
    - Use gitlab-runner and make your MacBook a runner
    -

    View full-size slide

  35. Build android
    - Create build_android.sh
    - Works in docker container

    View full-size slide

  36. Create releases
    - Use existing tools of the embedder platform
    -
    -

    View full-size slide

  37. Create releases (android)
    - release_android.sh
    - Use gradle plugin to publish to play store
    github.com/Triple-T/gradle-play-publisher
    - ./gradlew publishApk

    View full-size slide

  38. Create releases (ios)
    - Use what Sebastian suggested in his talk
    - Fastlane
    - xcbuild is your friend

    View full-size slide

  39. Codemagic
    - It works
    - Runs tests, builds apps
    - Easy way to get running for iOS without a Mac
    - I don’t trust them

    View full-size slide

  40. Flutter Workshop
    Hot Reload Hackathon
    Tuesday, March 12, 2019
    Cologne, grandcentrix
    https://flutter.school

    View full-size slide