Как добавить Flutter в нативное приложение iOS и протестировать его на Codemagic (Часть 3)

Hola, Amigos! На связи Саша Чаплыгин, Flutter dev компании заказной разработки Amiga. Вот и наконец-то 3 часть статьи, в которой будет идти речь про про использование «Hot Reload», «Hot Restart» и тестирование на Codemagic.

Кто пропустил, вторая часть здесь. Она про реализацию экрана Flutter в приложение для iOS и использование platform channel для отправки данных из натива во Flutter.

И первая часть здесь. Она посвящена созданию приложения на iOS и интеграции Flutter в это приложение. 

Чтобы ничего не пропускать, присоединяйтесь к нашему сообществу в телеграме Flutter. Много. Там мы с командой делимся своим опытом и разными полезными материалами.

Поехали!

Использование «Hot Reload» и «Hot Restart»

Чтобы использовать «Hot Reload» и «Hot Restart» в модуле Flutter в приложении iOS, выполните следующие действия:

1. Запускаем следующую команду из каталога проекта Flutter:

   flutter attach

2. Сразу же переходим в Xcode и запускаем приложение на устройстве, нажав кнопку «Run» в верхнем левом углу.

3. Если посмотрим на Терминал, то заметим, что соединение установлено успешно, и теперь можно использовать «Hot Reload» и «Hot Restart» для модуля Flutter, работающего внутри приложения iOS.

Codemagic с использованием YAML

Для создания приложения iOS с модулем Flutter нужно использовать codemagic.yaml. Codemagic недавно объявила о поддержке YAML для создания и тестирования приложений iOS.

Далее показано, как определить правильный конвейер для создания и тестирования приложения iOS с модулем Flutter.

Загрузка YAML-файла

1. Прежде всего, пушим код в VCS.

   Добавляем содержимое корневой папки в VCS (включая как собственную папку iOS, так и папку модуля Flutter).

2. Переходим в интерфейс Codemagic и входим в систему.

3. На панели приложений находим свой проект и переходим в его настройки.

4.  Затем на правой боковой панели в разделе «Конфигурация как код» нажимаем «Загрузить конфигурацию». При этом создается codemagic.yaml с некоторыми конфигурациями по умолчанию.

5. После скачивания файла открываем его в редакторе кода.

Файл codemagic.yaml будет содержать конвейер для создания и тестирования приложения Flutter по умолчанию. Но чтобы использовать это для приложения iOS с модулями Flutter, нужно внести в него некоторые изменения.

Добавление переменных среды

Чтобы сгенерировать .ipa iOS, нужно настроить подпись кода для приложения.

Для подписи кода iOS необходимы два файла:

• Сертификат.

• Профиль настройки (Provisioning Profile).

В разделе переменных среды codemagic.yaml следует добавить сертификат и профиль обеспечения в зашифрованной форме в виде пар ключ-значение.

Итак, добавляем следующие ключи:

• CM_CERTIFICATE (зашифрованная версия сертификата).

• CM_CERTIFICATE_PASSWORD (зашифрованная версия пароля сертификата).

• CM_PROVISIONING_PROFILE (зашифрованная версия профиля обеспечения).

Создаем зашифрованную версию файлов/переменных, выполнив следующие действия:

1. Переходим в настройки проекта из Codemagic UI.

2. На правой боковой панели нажимаем «Зашифровать переменные среды».

Здесь можно перетащить файлы или ввести переменную, чтобы создать их зашифрованную версию.

Определение сценария

Рассмотрим сценарий сборки, объясняя его построчно.

Кроме того, поскольку у нас есть две папки: одна для встроенной iOS, а другая для модуля Flutter, нужно убедиться, что команды выполняются в правильной папке.

Итак, начнем.

• Получение пакетов Flutter

  - cd $FCI_BUILD_DIR/bmi_flutter && flutter packages pub get

• Установка подфайла

  - find . -name "Podfile" -execdir pod install ;

• Инициализация связки ключей

  - keychain initialize

• Декодирование профиля обеспечения и размещение его в папке, откуда к нему можно будет получить доступ при выполнении подписи кода.

  PROFILES_HOME="PROFILES_HOME" PROFILE_PATH="PROFILES_HOME"/$(uuidgen).mobileprovision)" echo ${CM_PROVISIONING_PROFILE} | base64 --decode > $PROFILE_PATH echo "Saved provisioning profile $PROFILE_PATH"

• Расшифровка сертификата подписи и добавление его в связку ключей.

  echo $CM_CERTIFICATE | base64 --decode > /tmp/certificate.p12 keychain add-certificates --certificate /tmp/certificate.p12 --certificate-password $CM_CERTIFICATE_PASSWORD

• Создаём только модуль Flutter (этот шаг нужен для создания некоторых файлов, необходимых собственному приложению iOS для получения модуля Flutter).

  - cd $FCI_BUILD_DIR/bmi_flutter && flutter build ios --release --no-codesign

• Использование профиля и создание собственного приложения iOS с модулем Flutter для создания .ipa.

  

СОВЕТ: можно добавить этот флаг --disable-xcpretty, чтобы просматривать весь подробный вывод Xcode непосредственно в пользовательском интерфейсе Codemagic во время сборки.

Дополнительную информацию о параметрах конфигурации команды build-ipa можно получить здесь.

Получить сгенерированные артефакты

Чтобы получить .ipa после сборки, необходимо определить правильный путь к сгенерированному артефакту.

artifacts:
- build/ios/ipa/*.ipa

Перед запуском скрипта помещаем codemagic.yaml в корневой каталог проекта.

Запуск сценария сборки

1. Переходим в свой проект из панели управления приложениями в Codemagic UI.

2. Нажимаем «Начать новую сборку».

3. Нажимаем «Выбрать рабочий процесс из codemagic.yaml».

4. Выбираем правильный рабочий процесс и нажимаем «Начать новую сборку».

Процесс сборки на Codemagic с использованием YAML успешно завершен. 

Тестирование на Codemagic (с использованием YAML)

Выполнить любое тестирование Codemagic с использованием YAML очень просто.

Давайте добавим демонстрационный модульный тест в модуль Flutter.

import 'dart:convert'; import 'package:flutter_test/flutter_test.dart'; void main() {   String jsonTest = '{' +       '"value" : "44.4",' +       '"color" : "pink",' +       '"advice" : "Eat less pies!"' +       '}';   var jData = jsonDecode(jsonTest);   test("Json Data Test", (){     expect(jData['value'], "44.4");     expect(jData['color'], "pink");     expect(jData['advice'], "Eat less pies!");   });  }

Чтобы протестировать его на Codemagic CI/CD, нужно просто добавить еще одну строку в скрипт в codemagic.yaml.

Добавляем эту строку перед сборкой ios:

- cd $FCI_BUILD_DIR/bmi_flutter && flutter test

Весь YAML- скрипт для этой сборки доступен здесь.

Заключение

Codemagic.yaml позволяет создать и протестировать собственное приложение для iOS с модулем Flutter на Codemagic CI/CD. Поддерживать файл YAML удобно: он регистрируется в VCS и автоматически обнаруживается Codemagic CI/CD во время сборки. С локальным доступом можно изменить его даже без подключения к Интернету.

Новые статьи-переводы, кейсы, опыт, обсуждения в нашем телеграм-канале Flutter. Много.