Найти тему

Установите CI/CD для вашего приложения Flutter

Оглавление
                                                    Магия кода и Flutter
Магия кода и Flutter

Как Вы отреагируете, если я скажу: "Сосредоточьтесь только на развитии Flutter и напишете качественный код, а один волшебный инструмент позаботится обо всем остальном за Вас: проведет все тесты, сделает сборки для Android и IOS, внедрит их в Google Play и Apple Store и даже поделится ими с коллегами в Slack". Интересно? 😲

Позвольте представить вам волшебный инструмент под названием Code Magic!

Все, что вам нужно сделать, это установить код в виртуальном хранилище, а CI/CD сделает все остальное за вас!

Что такое Code Magic?

Code Magic - это инструмент CI/CD для мобильных приложений, один из моих самых любимых. Он поддерживает Flutter, Android и iOS, React Native, Ionic и Unity. Code Magic является зарегистрированной торговой маркой Nevercode Ltd, и Google в партнерстве с ними создал редактор рабочих процессов CI/CD для таких разработчиков Flutter, как мы. Прежде чем мы изучим этот редактор рабочих процессов, давайте разберемся, что такое CI/CD и почему это важно.

Что такое CI/CD?

CI/CD расшифровывается как Continuous Integration/Continuous Deployment, то есть Непрерывная интеграция/Непрерывное развертывание.

Основная цель CI/CD - обеспечить более короткий цикл выпуска релизов. CI/CD - это один из самых практичных конвейеров, который внедряют команды DevOps для более частой и надежной доставки изменений кода. Он обеспечивает автоматизацию разработки, благодаря чему новый код автоматически интегрируется с предыдущим, при этом выполняются все необходимые тесты, а в случае успешного прохождения тестов происходит сборка/развертывание приложения.

                                                          Конвейер CI/CD
Конвейер CI/CD

Code Magic бесплатный?

Code magic бесплатный в течение первых 500 минут сборки, после чего вам нужно оплатить один из их тарифных планов. Я думаю, 500 минут будет достаточно, чтобы вы полюбили этот инструмент. Вы даже можете сэкономить минуты сборки, кэшируя свои зависимости.

Как установить Code Magic для приложения Flutter?

Теперь, когда вы знаете, что такое Code Magic, давайте погрузимся в процесс автоматизации нашего рабочего процесса:

1. Зарегистрируйтесь в Code Magic. Я предпочитаю регистрироваться через GitHub, поскольку и Code Magic, и GitHub впоследствии будут связаны между собой.

2. Создайте свое приложение на Code Magic. Введите все необходимые данные.

                                    Добавьте новое приложение в Code Magic
Добавьте новое приложение в Code Magic

3. Соедините ваше приложение Сode Magic с виртуальным хранилищем вашего приложения Flutter. Если вы владеете этим хранилищем, нажмите на Github, Bitbucket или Gitlab соответственно.

                               Подключение Вашего хранилища к Code Magic
Подключение Вашего хранилища к Code Magic

Если вы не являетесь владельцем, но сотрудничаете с этим хранилищем или это открытое хранилище, вам нужно выбрать опцию "Другое", чтобы копировать хранилище по URL.

              Подключение открытого или совместного хранилища к Magic Code
Подключение открытого или совместного хранилища к Magic Code

Если это частное хранилище, вам будет предложено подтвердить свой доступ к хранилищу. После успешного выполнения вы увидите редактор рабочего процесса:

                                    Редактор рабочего процесса Magic Code
Редактор рабочего процесса Magic Code

Это то, что мы называем редактором рабочего процесса, специально разработанным и созданным для приложений Flutter.

4. У нас есть несколько платформ сборки, так что вы можете выбрать подходящую для своего приложения. Я хотел бы создавать приложения для Android и IOS, поэтому протестировал обе платформы.

Если вы хотите просто запустить тест и ничего не создавать, то можете отметить "Run Tests only".

5. Далее идут "Build Triggers" (Триггеры сборки). Вы можете сами решить, когда Сode Magic соберет ваше приложение. Этот процесс можно автоматизировать, включив систему триггерных уведомлений в хранилище: Code Magic начнет сборку вашего приложения, когда будет новый запуск в main/master branch или когда будут обновлены или объединены отправки изменений. Все зависит от вас!

               Добавление триггеров сборки в редактор рабочих процессов Code Magic
Добавление триггеров сборки в редактор рабочих процессов Code Magic

6. Вы можете ускорить сборку, включив кэширование зависимостей.

                                   Кэширование зависимостей в Code Magic
Кэширование зависимостей в Code Magic

7. Можно включить статический анализ кода, а также интеграционные и модульные тесты (flutter test), выполнив необходимые шаги:

                                          Настройка проверки Code Magic
Настройка проверки Code Magic

8. Далее перед нами раздел сборки, в котором вы можете указать, какая сборка Android вам нужна: APK или App bundle — и написать любые дополнительные параметры, которые у вас могут быть, например, отключить звук и т.д.

                                              Настройки сборки Android
Настройки сборки Android

9. Если вы также хотите использовать IPA, то вам нужно прикрепить ключ от вашей учетной записи разработчика apple к Code Magic. Сейчас я покажу вам, как это сделать:

  • Войдите в App Store Connect.
  • Перейдите в раздел Пользователи и доступ > Ключи
                                           Генерация ключа для входа на IOS
Генерация ключа для входа на IOS
  • Создайте новый ключ, нажав на значок "+".
  • Введите любое имя для нового ключа и дайте ему разрешения на доступ к App Manager
                                        Генерация ключа для входа на IOS
Генерация ключа для входа на IOS
                                         Генерация ключа для входа на IOS
Генерация ключа для входа на IOS

  • Скачайте API-ключ (файл .p8), его можно скачать только один раз.
  • Итак, теперь у вас есть ID ключа и ID эмитента. Скопируйте оба в свой аккаунт code magic. (Настройки пользователя > Ключи портала разработчиков Apple > Добавить ключ)
      Добавление ключа доступа API для устройств Apple в Code Magic
Добавление ключа доступа API для устройств Apple в Code Magic

После успешного добавления ключа вернитесь к приложению и в разделе "Подписание кода iOS" выберите ключ и приложение магазина приложений.

                                 Подписание кода iOS и настройки сборки
Подписание кода iOS и настройки сборки

10. Вот и все. Теперь вы будете получать версии вашего приложения для Android и IOS каждый раз, когда происходит обновление хранилища. (Вам даже не нужен MacBook, чтобы выполнить все действия с XCode). Вы можете выполнить другие дополнительные шаги, если хотите настроить развертывание в Firebase, Apple или Google Play Store соответствующим образом.

                   Настройки параметров размещения для Flutter Magic Code
Настройки параметров размещения для Flutter Magic Code

Настройка завершена: это все, что вам нужно было сделать. Codemagic запомнит вашу конфигурацию для следующей работы. Приступайте и создайте свою первую сборку.

                                       Сборка Code Magic прошла успешно
Сборка Code Magic прошла успешно

                                                        Сборка завершена
Сборка завершена

11. Сделайте дополнительный шаг, объединив Slack и Email для получения уведомлений о сборке.

                      Включение уведомлений для сборок в Code Magic Flutter
Включение уведомлений для сборок в Code Magic Flutter

Удачи вам в изучении Code Magic, программируйте больше и волнуйтесь меньше. Если вы узнали что-то новое из этой статьи, не забудьте поставить ей большой палец вверх!