Публикация приложений Flutter для Windows в Microsoft Partner Center

Flutter позволяет использовать единую кодовую базу для создания приложений для мобильных, веб-приложений, компьютеров и встроенных устройств. Внедрение [Flutter 2.0] (https://medium.com/flutter/whats-new-in-flutter-2-0-fe8e95ecc65) упростило тестирование настольных приложений, поскольку эта опция теперь доступна на "стабильный" канал.

Эта статья поможет вам приступить к созданию настольных приложений Windows с помощью Flutter, создать сборку выпуска MSIX и опубликовать приложение в Microsoft Partner Center с помощью Codemagic.

Если вы ищете более общее руководство по началу работы с настольными приложениями Flutter, включая разработку адаптивных макетов, ознакомьтесь с [этой статьей] (https://blog.codemagic.io/flutter-desktop-apps-intro/).

Создание приложения Flutter для Windows

Прежде чем приступить к созданию нового приложения Flutter, в вашей системе Windows должен быть установлен Flutter SDK. Если у вас не установлен Flutter, следуйте инструкциям по установке [здесь] (https://docs.flutter.dev/get-started/install/windows).

Если в вашей системе уже установлен Flutter, убедитесь, что его версия выше «2.0». Вы можете проверить свою версию Flutter с помощью команды flutter --version.

Для создания приложений Flutter для Windows в вашей системе должна быть установлена ​​[Visual Studio 2019] (https://visualstudio.microsoft.com/downloads/) (не путать с Visual Studio Code или VS Code). При установке Visual Studio используйте рабочую нагрузку «Разработка для настольных ПК с C++», если вы хотите создавать приложения Win32, или используйте рабочую нагрузку «Разработка для универсальной платформы Windows», если вы хотите создавать UWP Программы.

Flutter по умолчанию использует Win32 для создания приложений Windows. Включите поддержку Windows для Win32, используя:

``ш

конфигурация флаттера --enable-windows-desktop

Чтобы создавать приложения UWP (универсальная платформа Windows), вам нужно быть на канале dev Flutter. Выполните следующие команды:

``ш

разработчик канала флаттера

флаттер обновление

конфигурация флаттера --enable-windows-uwp-desktop

Запустите команду flutter doctor один раз, чтобы проверить, есть ли какие-либо нерешенные проблемы. Чтобы проверить, указаны ли «windows» в качестве одного из доступных устройств, запустите команду «flutter devices».

Чтобы создать новое приложение Flutter, используйте следующую команду:

``ш

флаттер создать <имя_проекта>

Замените <project_name> на имя, которое вы хотите использовать для проекта, например, flutter create flutter_desktop_sample.

Приведенная выше команда создаст проект приложения счетчика Flutter. Вы можете запустить его в своей системе Windows, используя следующую команду:

``ш

флаттер запустить -d windows

Чтобы запустить приложение с помощью UWP, используйте следующую команду:

``ш

флаттер запустить -d winuwp

Для запуска приложений Windows UWP требуется изолированная среда, поэтому вам будет предложено запустить ее. Откройте PowerShell с правами администратора в отдельном окне и выполните следующую команду:

``ш

checknetisolation loopbackexempt -is -n=[APP_CONTAINER_NAME]

После запуска этого процесса вернитесь в предыдущее окно и нажмите «Y». Это должно запустить ваше приложение UWP в Windows.

Создание исполняемого файла приложения

Создать исполняемый файл .exe для приложения Flutter для Windows очень просто. Просто запустите следующую команду:

``ш

флаттер окна сборки

Вы можете найти сгенерированный файл, перейдя в <project_root>/build/windows/runner/Release/<app_name>.exe. Файл .exe может быть передан любому пользователю, который затем сможет запустить его непосредственно в своей системе.

Существует более безопасная и рекомендуемая альтернатива использованию файла .exe — пакет MSIX. Некоторые из преимуществ пакета MSIX:

• Windows использует изолированную среду для безопасной установки сборки MSIX. Это также помогает в чистой деинсталляции приложения. При использовании файла .exe изменения в файлах реестра сохраняются даже после удаления приложения.

• Чтобы распространять приложение в Microsoft Store, вам необходим пакет MSIX. Файл .exe нельзя распространять напрямую.

• Может быть два типа пакетов MSIX: один для локального запуска и один для распространения в Microsoft Store. Тип пакета MSIX, который вы хотите построить, можно указать в качестве параметра сборки.

Давайте сначала создадим учетную запись Microsoft Partner Center, прежде чем рассматривать оба типа сборок MSIX.

Создание учетной записи Microsoft Partner Center

Вам потребуется учетная запись Microsoft Partner Center, чтобы распространять приложение Windows с помощью Microsoft Store. Кроме того, при создании распространяемой сборки MSIX необходимо указать некоторые свойства, которые должны соответствовать свойствам в приложении центра партнеров.

Выполните следующие действия, чтобы создать и настроить приложение Microsoft Partner Center:

1. Вам нужна Учетная запись разработчика Microsoft, чтобы публиковать приложения в Microsoft Store. Вы можете зарегистрироваться для одного [здесь] (https://developer.microsoft.com/en-us/microsoft-store/register/).

1. Войдите в Microsoft Partner Center. Если у вас нет учетной записи, вы можете легко создать новую.

1. На главной странице Microsoft Partner Center нажмите Добавить программу.

1. Выберите Начать в разделе Windows и Xbox. При необходимости заполните любые данные.

1. Перейдите в раздел «Windows и Xbox > Обзор» и нажмите кнопку Создать новое приложение.

1. Введите название приложения. Нажмите Зарезервировать название продукта.

Это должно создать приложение в Microsoft Partner Center и перейти на страницу Обзор приложения.

Вам потребуется некоторая информация из этого приложения Microsoft Partner Center при настройке сборки дистрибутива MSIX.

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

Самый простой способ создать установщик MSIX — использовать пакет Flutter с именем [msix] (https://pub.dev/packages/msix). Это инструмент командной строки, который помогает создать установщик MSIX из файлов сборки Flutter Windows.

Добавьте пакет в раздел «dev_dependencies» в файле «pubspec.yaml»:

``ямл

dev_dependencies:

мсикс: ^ 2.6.5

Пакет использует некоторые значения конфигурации по умолчанию при построении MSIX, если вы не указали иное. Вы можете предоставить конфигурации MSIX в файле pubspec.yaml.

Чтобы создать локальный MSIX, добавьте следующую конфигурацию в конец файла pubspec.yaml:

``ямл

msix_config:

отображаемое_имя: <имя_приложения>

publisher_display_name: <Имяиздателя>

identity_name: <Имяиздателя.ИмяПриложения>

msix_version: 1.0.0.0

путь_логотипа: ./logo/<имя_файла.png>

В приведенной выше конфигурации замените угловые скобки соответствующими значениями:

• display_name: имя вашего приложения, которое будет отображаться для пользователей.

• publisher_display_name: имя издателя, которое будет отображаться для пользователей (может быть именем человека или названием компании).

• identity_name: уникальный идентификатор приложения Windows.

• msix_version: указывает версию сборки приложения. Использует формат «Major.Minor.Build.Revision», где «Major» не может быть «0».

• logo_path: относительный путь к файлу логотипа (необязательно). Если он не указан, используется логотип Flutter по умолчанию.

Вы можете добавить файл логотипа в папку <каталог_проекта>/logo. В идеале логотип должен быть квадратным изображением с разрешением 256x256. Вы можете прочитать больше информации о размере логотипа здесь.

Выполните следующую команду, чтобы сгенерировать пакет MSIX для вашего приложения Flutter для Windows:

``ш

флаттер паб запустить msix:создать

Эта команда использует конфигурации, определенные в файле pubspec.yaml, для создания MSIX.

ПРИМЕЧАНИЕ. Любой пакет MSIX, распространяемый не через Microsoft Partner Center, является неподписанным пакетом. Чтобы установить и запустить неподписанный пакет MSIX, вы должны локально доверять и подписывать приложение, чтобы иметь возможность запускать его в Windows.

Сгенерированный пакет можно найти в папке <project_root>\build\windows\runner\Release\<app_name>.msix. Но если дважды щелкнуть пакет .msix, чтобы открыть его в системе Windows, кнопка Установить будет отключена.

Вам необходимо подписать пакет с помощью приложения Flutter для Windows локально, чтобы установить пакет MSIX в вашей системе Windows. Для этого выполните следующие действия:

1. Щелкните правой кнопкой мыши файл .msix и выберите Свойства.

1. Перейдите на вкладку Цифровые подписи в диалоговом окне «Свойства».

1. Выберите подписывающую сторону «Msix Testing» и нажмите Подробности. Затем нажмите Просмотреть сертификат.

1. Начните установку сертификата, нажав Установить сертификат.

1. Выберите Локальный компьютер в диалоговом окне. Нажмите кнопку "Далее**.

1. В разделе «Поместить все сертификаты в следующее хранилище» нажмите Обзор.

1. Выберите папку Доверенные корневые центры сертификации. Нажмите ОК.

1. Нажмите Далее, а затем Готово.

1. Теперь дважды щелкните файл. Вы увидите, что кнопка Установить теперь активна. Нажмите на нее, чтобы установить приложение.

При этом ваше приложение Flutter для Windows будет установлено в вашей системе. Вы можете найти его, выполнив поиск в меню Пуск.

Распространение пакета с помощью Microsoft Partner Center

Теперь давайте посмотрим, как вы можете распространять пакет с помощью Microsoft Partner Center. Измените конфигурацию MSIX в файле pubspec.yaml следующим образом:

``ямл

msix_config:

отображаемое_имя: <имя_приложения>

publisher_display_name: <Имяиздателя>

identity_name: <Имяиздателя.ИмяПриложения>

издатель:

msix_version: 1.0.0.0

путь_логотипа: ./logo/<имя_файла.png>

магазин: правда

Здесь определены два дополнительных свойства:

• publisher: идентификатор издателя, присутствующий в вашем приложении Microsoft Partner Center.

• store: если задать для этого параметра значение true, будет создан пакет MSIX, распространяемый с помощью Microsoft Partner Center.

Кроме того, убедитесь, что значения свойств display_name, publisher_display_name и identity_name соответствуют значениям в вашем партнерском центре. Вы найдете эти значения, перейдя в своем приложении Microsoft Partner Center к Управление продуктами > Идентификация продукта.

ПРИМЕЧАНИЕ. Если вы создаете пакет MSIX для публикации в Microsoft Store, вы не сможете установить сертификат локально или запустить его. Пакет можно распространять только через Microsoft Partner Center.

Теперь, когда вы настроили приложение Flutter для Windows для распространения, давайте создадим и распространим его с помощью Codemagic. Как только вы начнете добавлять новые функции в свое приложение, Codemagic значительно упростит и ускорит распространение обновленных сборок.

Добавление вашего проекта в Codemagic

Самый простой способ добавить свой проект в Codemagic — через поставщика Git. Добавьте свой проект к поставщику Git, например (GitHub, Bitbucket или GitLab) и выполните следующие действия, чтобы начать работу с Codemagic:

1. Войдите в Codemagic. Если вы новый пользователь, зарегистрируйтесь.

1. Подключитесь к провайдеру Git, куда вы загрузили свой проект Flutter, перейдя в «Интеграции» в разделе «Настройки» (https://codemagic.io/settings). Убедитесь, что вы дали разрешение на доступ к репозиторию, в который вы загрузили свое приложение.

1. Перейдите на страницу Приложения и нажмите Добавить приложение.

1. Выберите поставщика Git:

1. Нажмите Далее: авторизовать интеграцию, чтобы авторизовать Codemagic. Если вы уже авторизовали выбранного поставщика Git, вместо этого нажмите Далее: выберите репозиторий.

Если вы используете GitHub в качестве поставщика Git, вам необходимо выполнить еще один шаг перед выбором репозитория. Нажмите Установить приложение GitHub, чтобы настроить интеграцию. Вы можете узнать больше о настройке интеграции приложений GitHub [здесь] (https://docs.codemagic.io/getting-started/adding-apps-from-custom-sources/#configuring-the-github-app-integration).

1. Теперь выберите репозиторий в раскрывающемся меню и выберите Flutter app в качестве типа проекта. Затем нажмите Готово: Добавить приложение:

1. Вы попадете в настройки проекта. Вкладка Редактор рабочих процессов будет выбрана по умолчанию.

Сборка и публикация с помощью Codemagic

Вы можете создать приложение Flutter на Codemagic, используя либо [редактор рабочего процесса] (https://docs.codemagic.io/flutter-configuration/flutter-projects/), либо [Codemagic YAML] (https://docs.codemagic. io/yaml/yaml-getting-started/). Чтобы создавать приложения для Windows на Codemagic, вам необходимо включить выставление счетов, перейдя на эту страницу.

Включить интеграцию с Microsoft Partner Center

Codemagic использует API отправки Microsoft Store для публикации Windows приложение в Microsoft Store. Чтобы использовать эту интеграцию, вы должны связать свою учетную запись Microsoft Partner Center с приложением Azure AD и предоставить Codemagic необходимую информацию (имя арендатора, идентификатор арендатора, идентификатор клиента и * Секрет клиента*).

Выполните следующие действия, чтобы получить необходимую информацию:

1. Перейдите в Настройки аккаунта, нажав на значок шестеренки.

1. Перейдите к Профиль организации > Арендаторы. Если у вас уже есть существующий клиент, вы можете связать его с учетной записью Центра партнеров. Однако рекомендуется создать новый клиент для Codemagic.

1. Чтобы создать нового арендатора, нажмите Создать и введите необходимую информацию.

1. Перейдите в свою учетную запись Azure AD, используя новый клиент.

1. Перейдите к Регистрации приложений (в меню слева) и нажмите «+ Новая регистрация».

1. Введите имя приложения и используйте параметр Один клиент. Поле URI перенаправления можно оставить пустым. Нажмите Зарегистрироваться.

1. Перейдите к Сертификаты и секреты (в меню слева), перейдите на вкладку Клиентские секреты и нажмите «+ Новый клиентский секрет».

1. Введите Описание и выберите Срок действия для секрета клиента. Нажмите Добавить.

Обратите внимание на поле Value, которое является секретом клиента. Он понадобится вам на более позднем этапе.

1. Наконец, перейдите в Партнерский центр > Настройки учетной записи > Управление пользователями. Выберите Приложения Azure AD и нажмите «+ Создать приложение Azure AD». Выберите созданное приложение, нажмите Далее и назначьте ему роль Разработчик.

Теперь вы можете перейти на веб-страницу Codemagic и включить интеграцию с Microsoft Partner Center. Его можно включить в разделе Настройки пользователя > Интеграция для личных проектов и в разделе Настройки команды > Интеграция команды для проектов, совместно используемых в групповой учетной записи.

Выполните следующие действия, чтобы включить интеграцию с Microsoft Partner Center:

1. В разделе «Интеграция» нажмите кнопку Подключить рядом с Центром партнеров.

1. Введите необходимую информацию. Имя арендатора и Идентификатор арендатора можно найти в разделе Партнерский центр > Настройки учетной записи > Профиль организации > Арендаторы. Найдите Идентификатор клиента на странице обзора Azure AD и введите Секрет клиента, который вы записали ранее.

1. Нажмите Сохранить.

Настройка Codemagic для приложений Flutter для Windows с помощью редактора рабочих процессов

Чтобы настроить проект с помощью редактора рабочих процессов, перейдите на вкладку Редактор рабочих процессов в Codemagic. Выполните следующие действия:

1. Выберите Windows в разделе Сборка для платформ.

1. Измените экземпляр виртуальной машины на Windows.

1. Прокрутите вниз до вкладки Сборка. Выберите версию Flutter, необходимую для сборки проекта, установите флажок Создать пакет Windows MSIX и установите режим Выпуск.

1. Перейдите на вкладку Распространение, чтобы настроить распространение Microsoft Partner Center. Нажмите, чтобы развернуть вкладку Microsoft Partner Center. Установите флажок Включить публикацию в Microsoft Store.

1. Выберите Tenant в раскрывающемся меню. Введите остальную информацию, которую мы обсуждали в разделе Настройка MSIX. Убедитесь, что эта информация соответствует информации в вашем приложении Центра партнеров.

1. Нажмите Сохранить изменения.

ПРИМЕЧАНИЕ. Вы должны опубликовать самую первую версию приложения в Центре партнеров вручную. Пакет MSIX можно загрузить из артефактов сборки.

Вы завершили настройку рабочего процесса публикации Windows. Нажмите Начать первую сборку в верхней части этой страницы, а затем нажмите Начать новую сборку, чтобы начать процесс сборки.

Настройка Codemagic для приложений Flutter для Windows с помощью codemagic.yaml

Чтобы настроить сборку с помощью YAML, перейдите в свой проект Flutter и создайте новый файл в корневом каталоге с именем codemagic.yaml.

Добавьте в файл следующий шаблон:

``ямл

рабочие процессы:

мой рабочий процесс:

имя: имя рабочего процесса

instance_type: mac_mini

max_build_duration: 60

Окружающая среда:

группы:

флаттер: стабильный

кеш:

кеш_пути:

• ~/.pub-кэш

скрипты:

артефакты:

издательский:

Эл. адрес:

получатели:

• имя@example.com

Это базовый шаблон рабочего процесса для создания приложений на Codemagic. Для получения дополнительной информации ознакомьтесь с документами.

Чтобы создать пакет MSIX и опубликовать его с помощью Microsoft Partner Center, измените рабочий процесс, выполнив следующие действия.

1. Определите подходящее имя рабочего процесса и используйте экземпляр виртуальной машины Windows:

``ямл

рабочие процессы:

Windows-релиз-рабочий процесс:

имя: Рабочий процесс выпуска Windows

instance_type: windows_x2

max_build_duration: 60

Для сборки Windows установите для instance_type значение windows_x2.

1. Добавьте следующие переменные среды:

``ямл

Окружающая среда:

группы:

• оконная подпись

флаттер: мастер

Вам необходимо загрузить секрет клиента в переменные среды приложения Codemagic в зашифрованном формате (windows-signing — это имя переменных среды приложения).

1. Перейдите на страницу своего проекта в Codemagic и нажмите Переключиться на конфигурацию YAML. Перейдите на вкладку Переменные среды и добавьте учетные данные. Введите имя переменной как PARTNER_CLIENT_SECRET и вставьте значение секрета клиента в поле Значение переменной. Создайте группу под названием windows-signing. Убедитесь, что установлен флажок Безопасный, и нажмите Добавить.

1. Сначала в разделе «скрипты» получите пакеты Flutter:

``ямл

скрипты:

• имя: Получить пакеты Flutter

скрипт: флаттер пакеты паб получить

1. Включите платформу Windows:

``ямл

• имя: Настроить для Windows

сценарий: конфигурация флаттера --enable-windows-desktop

1. Создайте приложение для Windows с помощью Flutter:

``ямл

• название: Сборка Windows

скрипт: флаттер окна сборки

1. Создайте распространяемый пакет MSIX:

``ямл

• имя: Пакет Windows

скрипт: флаттер паб запустить msix:создать

Если вы добавили конфигурации MSIX в файл pubspec.yaml, приведенная выше команда должна работать для вас. В противном случае вы можете напрямую указать конфигурации в инструменте CLI, не внося никаких изменений в файл вашего проекта pubspec.yaml:

```ямл

• имя: Пакет Windows

скрипт: |

флаттер паб добавить msix

flutter pub run msix:create --store --publisher-display-name= --display-name= --publisher= --identity-name= -- версия=1.0.0.0

1. Чтобы получить сгенерированный MSIX, обновите путь к артефактам следующим образом:

``ямл

артефакты:

• сборка/окна/*/.msix

1. В разделе «публикация» замените адрес электронной почты на свой.

1. Для публикации в Microsoft Partner Center добавьте следующее в разделе «публикация»:

``ямл

издательский:

партнер_центр:

store_id:

tenant_id:

client_id:

client_secret: $PARTNER_CLIENT_SECRET

Замените угловые скобки соответствующими значениями. Вы получите tenant_id и client_id на странице обзора Azure AD. Вы можете найти store_id в своем приложении Microsoft Partner Center, выбрав Управление продуктами > Идентификация продукта. client_secret извлекается из переменной среды приложения, которую вы определили ранее.

На этом настройка файла codemagic.yaml завершена. Теперь просто зафиксируйте и добавьте файл в свой Git-провайдер, и все готово.

ПРИМЕЧАНИЕ. Вы должны опубликовать самую первую версию приложения вручную, перейдя в Microsoft Partner Center. Выберите свое приложение на панели инструментов, нажмите Начать отправку и введите данные для отправки приложения. Первая версия должна быть полностью опубликована до публикации следующей версии с помощью Codemagic.

Чтобы начать сборку приложения Flutter для Windows с использованием файла YAML, перейдите на страницу своего проекта в Codemagic и нажмите Начать первую сборку. Выберите свой рабочий процесс, а затем нажмите Начать новую сборку, чтобы начать процесс сборки.

Подведение итогов

Поздравляем! 🎉 Вы успешно создали свое первое приложение Flutter для Windows и опубликовали его в Microsoft Store с помощью Codemagic.

Как только вы начнете добавлять новые функции в свое приложение, вы сможете легко опубликовать следующую версию своего приложения для Windows, просто обновив номер сборки и запустив сборку Codemagic. И, конечно же, вы можете добавить другие рабочие процессы, чтобы Codemagic создавал ваше приложение Flutter не только для Windows, но и для iOS, Android или Linux.

Вы можете найти полный файл конфигурации codemagic.yaml для примера приложения Flutter для Windows [здесь] (https://github.com/sbis04/flutter_desktop_sample/blob/main/codemagic.yaml). Ознакомьтесь с примером настольного приложения Flutter в [этом репозитории GitHub] (https://github.com/sbis04/flutter_desktop_sample).

Эта статья была впервые опубликована [здесь] (https://blog.codemagic.io/publishing-flutter-windows-apps/)