Continuous Integration with Flutter using Gitlab

Slide 1

Slide 1 text

Continuous Integration

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Assumption: Flutter apps have a single codebase

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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 git@github.com:passsy/flutter-app.git

Slide 15

Slide 15 text

$ flutter build $ flutter test $ flutter analyze

Slide 16

Slide 16 text

$ flutter build ❌ command not found: flutter

Slide 17

Slide 17 text

Let’s install flutter git clone git@github.com:flutter/flutter.git export PATH="$PATH:`pwd`/flutter/bin"

Slide 18

Slide 18 text

Let’s install flutter

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Finally flutter is installed

Slide 21

Slide 21 text

The flutter update problem

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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)

Slide 24

Slide 24 text

Live Demo

Slide 25

Slide 25 text

$ ./flutterw build

Slide 26

Slide 26 text

$ 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).

Slide 27

Slide 27 text

Use a bash script to prevent vendor lock-in

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

Thanks

Slide 42

Slide 42 text

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