使用 Codemagic 將 Flutter Windows 應用程式釋出到 Microsoft 合作伙伴中心

會煮咖啡的貓發表於2022-02-14
FlutterWindowsROS

原文

https://medium.com/flutter-co...

前言

這篇文章最初發表在 Codemagic 部落格上，由 Souvik Biswas 撰寫

Flutter 允許您使用單個程式碼庫為移動裝置、網路、桌面和嵌入式裝置構建應用程式。2.0 的引入使得試用桌面應用程式變得更加容易，因為這個選項現在可以在 stable 頻道上使用。

本文將幫助您開始使用 Flutter 構建 Windows 桌面應用程式，生成一個版本 MSIX 構建，並使用 Codemagic 將該應用程式釋出到微軟合作伙伴中心。

如果你正在尋找一個建立 Flutter 桌面應用程式的更一般的入門指南，包括設計自適應佈局，請檢視這篇文章。

https://blog.codemagic.io/flu...

程式碼

https://github.com/sbis04/flu...
https://github.com/sbis04/flu...

正文

為 Windows 建立一個 Flutter 應用程式

在你開始建立一個新的 Flutter 應用程式之前，你應該在你的 Windows 系統上安裝 Flutter SDK。如果你沒有安裝 Flutter，按照安裝指南這裡。

https://docs.flutter.dev/get-...

如果你已經在你的系統上安裝了 Flutter，確保版本在 2.0 以上。您可以使用 Flutter -- version 命令檢查您的 Flutter 版本。

要構建 Flutter 視窗應用程式，您應該在您的系統上安裝 Visual Studio 2019 。在安裝 Visual Studio 時，如果你想構建 win32 應用程式，可以使用“帶 c + + 的桌面開發”工作負載，如果你想構建 UWP 應用程式，可以使用“通用 Windows 平臺開發”工作負載。

預設情況下，Flutter 使用 win32 來構建 Windows 應用程式:

flutter config --enable-windows-desktop

為了構建 UWP (通用 Windows 平臺)應用程式，你需要在 Flutter 的開發通道。執行以下命令:

flutter channel dev
flutter upgrade
flutter config --enable-windows-uwp-desktop

執行 flutter doctor ，檢查是否有任何未解決的問題。要驗證視窗是否列為可用裝置之一，請執行 flutter devices 命令。

要建立一個新的 Flutter 應用程式，請使用以下命令:

flutter create <project_name>
將 _<project_name>_ 替換為您希望在專案中使用的名稱ーー例如，flutter create flutter_desktop_sample。

上面的命令將建立一個 Flutter 計數器應用程式專案。你可以使用以下命令在 Windows 系統上執行它:

flutter run -d windows

要使用 UWP 執行應用程式，請使用以下命令:

flutter run -d winuwp

Windows UWP 應用程式需要一個沙盒環境才能執行，所以系統會提示您啟動它。在一個單獨的視窗中開啟具有管理員許可權的 PowerShell，並執行以下命令:

checknetisolation loopbackexempt -is -n=[APP_CONTAINER_NAME]

執行此程式後，返回到前一個視窗並按“ y”。這應該可以在 Windows 上啟動 UWP 應用程式。

生成應用程式的可執行檔案

為 Flutter Windows 應用程式生成.exe 可執行檔案非常簡單，只需執行以下命令:

flutter build 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 包的型別指定為生成引數。

在研究這兩種型別的 MSIX 構建之前，讓我們先建立一個 Microsoft 合作伙伴中心帳戶。

建立 Microsoft 合作伙伴中心帳戶

您需要一個 Microsoft 合作伙伴中心帳戶才能使用 Microsoft Store 分發 Windows 應用程式。此外，在構建可分發的 MSIX 構建時，您需要指定一些應該與您的 Partner Center 應用程式中的屬性相匹配的屬性。

按照以下步驟建立和配置 Microsoft 合作伙伴中心應用程式:

  • 你需要一個微軟開發者帳戶來發布應用到微軟商店。你可以在這裡註冊一個。
    https://developer.microsoft.c...
  • 登入到微軟合作伙伴中心。如果你沒有帳戶，你可以很容易地建立一個新的帳戶。
    https://partner.microsoft.com...
  • 從 Microsoft 合作伙伴中心的主頁上，單擊“新增程式”。

  • 在 Windows \& Xbox 下面選擇 Get started，如果需要的話填寫任何細節。

  • 進入 Windows & Xbox > Overview，點選 Create a new app 按鈕。

  • 輸入應用程式的名稱。點選保留產品名稱。

這將在 Microsoft 合作伙伴中心上建立一個應用程式，並導航到應用程式概覽頁面。

在配置 MSIX 發行版本時，您將需要從這個 Microsoft 合作伙伴中心應用程式獲得一些資訊。

為 MSIX 構建進行配置

生成 MSIX 安裝程式的最簡單方法是使用名為 MSIX 的 Flutter 包。這是一個命令列工具，幫助建立一個 msix 安裝程式從 Flutter 視窗建立檔案。

在 pubspec.yaml 檔案中新增 dev_dependencies 下的包:

dev_dependencies:
  msix: ^2.6.5

如果沒有指定其他值，那麼在構建 MSIX 時，包使用一些預設配置值。可以在 pubspec.yaml 檔案中提供 MSIX 配置。

要生成一個本地 MSIX，在 pubspec.yaml 檔案末尾新增以下配置:

msix_config:
  display_name: <AppName>
  publisher_display_name: <PublisherName>
  identity_name: <PublisherName.AppName>
  msix_version: 1.0.0.0
  logo_path: ./logo/<file_name.png>

在上面的配置中，用適當的值替換尖括號:

  • display_name: 應用程式的名稱，將顯示給使用者。
  • publisher_display_name: 要顯示給使用者的發行者名稱(可以是個人名稱或公司名稱)。
  • identity_name: Windows 應用的唯一識別符號。
  • msix_version: 指定應用程式的構建版本。使用“ Major. Minor. Build. Revision”格式，其中“ Major”不能為“0”。
  • logo_path: 徽標檔案的相對路徑(可選)。如果沒有提供，則使用預設的 Flutter 徽標。

您可以在 <project_directory>/logo 資料夾中新增徽標檔案。理想情況下，標誌應該是一個 256x256 解析度的正方形影像。你可以在這裡閱讀更多關於徽標大小的資訊。

https://docs.microsoft.com/en...

執行以下命令為您的 Flutter Windows 應用程式生成 MSIX 包:

flutter pub run msix:create

這個命令使用 pubspec.yaml 檔案中定義的配置來生成 MSIX。

注意: 任何沒有通過 Microsoft 合作伙伴中心釋出的 MSIX 包都是未簽名的包。要安裝並執行一個未簽名的 MSIX 軟體包，您必須在本地信任並簽名該應用程式，以便能夠在 Windows 上執行它。

您可以通過訪問 <project_root>buildwindowsrunnerRelease<app_name>.msix 來找到生成的包。M6.但是如果你雙擊。如果要在 Windows 系統上開啟 msix 包，安裝按鈕將被禁用。

你需要簽署與您的 Flutter 視窗應用程式本地安裝在您的 Windows 系統的 MSIX 包。要做到這一點，請遵循以下步驟:

  • 右鍵單擊.msix 檔案並選擇 Properties。
  • 轉到屬性對話方塊中的數字簽名選項卡。
  • 選擇“ Msix Testing”簽名者並單擊“ Details”，然後單擊“ View Certificate”。
  • 單擊“安裝證書”開始安裝證書。
  • 在對話方塊中選擇本地機器。單擊“下一步”。
  • 在“將所有證書放入以下儲存區”下，單擊“瀏覽”
  • 選擇“受信任根證書頒發機構”資料夾。單擊“確定”。
  • 點選下一步，然後完成
  • 現在，雙擊檔案。您將看到現在啟用了 Install 按鈕。點選它安裝應用程式。

有了這個，您的 Flutter 視窗應用程式將安裝在您的系統上。你可以通過在開始選單中搜尋找到它。

在 Microsoft 合作伙伴中心分發您的包

現在，讓我們看看如何使用 Microsoft Partner Center 釋出包。修改 pubspec.yaml 檔案中的 MSIX 配置，如下所示:

msix_config:
  display_name: <AppName>
  publisher_display_name: <PublisherName>
  identity_name: <PublisherName.AppName>
  publisher: <PublisherID>
  msix_version: 1.0.0.0
  logo_path: ./logo/<file_name.png>
  store: true

這裡定義了另外兩個屬性:

  • publisher: 在 Microsoft 合作伙伴中心應用程式中顯示的 Publisher ID。
  • store: 將此設定為 true 將使用 Microsoft Partner Center 生成一個 MSIX 包可分發。

此外，確保 display_name、 publisher_display_name 和 identity_name 的屬性值與合作伙伴中心中的值相匹配。通過在 Microsoft Partner Center 應用程式中導航到 Product management > Product Identity，您將找到這些值。

注意: 如果您正在生成用於釋出到 Microsoft Store 的 MSIX 包，那麼您將無法在本地安裝或執行證書。該軟體包只能通過 Microsoft 合作伙伴中心釋出。

現在，您已經配置您的 Flutter Windows 應用程式的發行版，讓我們建立和分發它使用 Codemagic。一旦你開始為你的應用程式新增新的特性，Codemagic 使得分發更新的版本變得更加容易和快速。

將專案新增到 Codemagic

將專案新增到 Codemagic 的最簡單方法是通過 Git 提供程式。將您的專案新增到 Git 提供程式中，比如(GitHub、 Bitbucket 或 GitLab) ，並按照下面的步驟開始使用 Codemagic:

  • 登入 Codemagic。如果你是一個新使用者，請sign up。
  • 連線到 Git 提供者，你已經上傳了您的 Flutter 專案通過進入 Settings 下的整合。請確保您已經授權到上傳應用程式的儲存庫。
  • 導航到 Applications 頁面，然後點選新增應用程式。

  • 選擇 Git provider:

  • 單擊 Next: Authorize integration to Authorize Codemagic。如果您已經授權了您選擇的 Git provider，請單擊 Next: Select repository。

如果您使用 GitHub 作為您的 Git 提供者，那麼您需要在選擇儲存庫之前執行一個額外的步驟。單擊 Install GitHub App 設定整合。您可以在這裡瞭解更多關於如何配置 GitHub 應用程式整合的資訊。

https://docs.codemagic.io/get...

  • 現在，從下拉選單中選擇儲存庫，並選擇 Flutter app 作為專案型別。然後單擊 Finish: Add application:

  • 您將被帶到專案設定。工作流編輯器選項卡將被預設選中。

使用 Codemagic 構建和釋出

你可以使用 Workflow Editor 編輯器或 Codemagic YAML 檔案在 Codemagic 上構建一個 Flutter 應用程式。要在 Codemagic 上構建 Windows 應用程式，您需要通過訪問這個頁面來啟用計費。

啟用 Microsoft 合作伙伴中心整合

Codemagic 使用 Microsoft Store submission API 將 Windows 應用程式釋出到 Microsoft Store。要使用這種整合，必須將 Microsoft 合作伙伴中心帳戶連結到 Azure AD 應用程式，並向 Codemagic 提供必要的資訊(租戶名、租戶 ID、客戶 ID 和客戶機密)。

按照下面的步驟生成必要的資訊:

  • 通過點選齒輪圖示進入你的帳戶設定。
  • 瀏覽組織概要 > 租戶。如果已經有一個現有租戶，則可以將其與合作伙伴中心帳戶關聯。但是，建議為 Codemagic 建立一個新的租戶。

  • 要建立新租戶，請單擊 Create 並填寫所需資訊。
  • 使用新租戶訪問你的 Azure AD 賬戶。
  • 進入應用程式註冊(從左邊的選單) ，然後點選「 + 新註冊」。

-輸入應用程式的名稱，並使用 Single tenant 選項。您可以將 Redirect URI 欄位保持為空。點選註冊。

  • 進入證書和機密(從左邊的選單) ，進入客戶機密標籤，並單擊“ + 新客戶機機密”。

  • 輸入描述，選擇客戶機密的有效期。點選新增。

注意 Value 欄位，這是客戶機機密。

  • 最後，轉到合作伙伴中心 > 帳戶設定 > 使用者管理。選擇 Azure AD 應用程式，然後點選“ + Create Azure AD application”。選擇您建立的應用程式，單擊 Next，並將 Developer 角色賦予它。

現在，您可以進入 Codemagic 網頁並啟用 Microsoft 合作伙伴中心整合。它可以在使用者設定 > 個人專案整合部分中啟用，也可以在團隊設定 > 團隊帳戶中共享專案的團隊整合中啟用。

按照以下步驟啟用 Microsoft 合作伙伴中心整合:

  • 在“整合”下，單擊“合作伙伴中心”旁邊的“連線”按鈕。
  • 輸入所需的資訊。通過進入合作伙伴中心 > 帳戶設定 > 組織配置檔案 > 租戶，可以找到租戶名和租戶 ID。在 Azure AD 的概覽頁面上找到客戶端 ID，然後輸入您早先注意到的客戶端祕密。

  • 點選儲存。

配置程式碼魔法使用工作流編輯器顫動視窗應用程式

要使用工作流編輯器配置您的專案，請轉到 Codemagic 上的 Workflow Editor 選項卡:

  • 在“為平臺生成”下選擇“ Windows”。
  • 將 VM 例項更改為 Windows。

  • 向下滾動到 Build 選項卡。選擇生成專案所需的 Flutter 版本，選中 Create a Windows MSIX package 核取方塊，並將模式設定為 Release。

  • 轉到“分發”選項卡，以配置 Microsoft 合作伙伴中心分發。單擊此處可展開 Microsoft 合作伙伴中心選項卡。選中“啟用釋出到 Microsoft 商店”核取方塊。
  • 從下拉選單中選擇租戶。輸入我們在 Configuring MSIX 部分中討論的其餘資訊。確保此資訊與您的合作伙伴中心應用程式相匹配。

  • 點選儲存更改。
注意: 您必須手動將應用程式的第一個版本釋出到合作伙伴中心。您可以從構建工件中下載 MSIX 包。

您已完成 Windows 釋出工作流的配置。單擊此頁面頂部的“啟動第一個構建”，然後單擊“啟動新構建”以啟動構建過程。

使用 Codemagic.yaml 為 Flutter Windows 應用程式配置 Codemagic

要使用 YAML 配置構建，請轉到 Flutter 專案，在根目錄 codemagic.yaml 中建立一個新檔案。

Add the following template to the file:

將以下模板新增到檔案中:

workflows:
  my-workflow:
    name: Workflow name
    instance_type: mac_mini
    max_build_duration: 60
    environment:
      groups:
        - ...
      flutter: stable
    cache:
      cache_paths:
        - ~/.pub-cache
    scripts:
      - ...
    artifacts:
      - ...
    publishing:
      email:
        recipients:
          - name@example.com

這是一個在 Codemagic 上構建應用程式的基本工作流模板。

https://docs.codemagic.io/yam...

要生成一個 MSIX 包並使用 Microsoft 合作伙伴中心釋出它，請按以下步驟修改工作流:

  • 定義一個合適的工作流名稱，並使用 Windows VM 例項:

workflows: windows-release-workflow: name: Windows release workflow instance_type: windows_x2 max_build_duration: 60

對於 Windows 生成，將 instance_type 設定為 windows_x2。

  • 新增以下環境變數:

environment: groups: \- windows-signing flutter: master

您需要以加密的格式將客戶機機密上傳到 Codemagic 的應用程式環境變數(windows-signing 是應用程式環境變數的名稱)。

  • 轉到 Codemagic 上的專案頁面，然後單擊 Switch to YAML configuration。轉到 Environment variables 選項卡，並新增憑據。輸入變數名為 PARTNER_CLIENT_SECRET，然後將客戶端機密值貼上到變數值欄位中。建立一個名為 windows-signing 的組。確保選中了安全核取方塊，然後單擊“新增”。

  • 首先，在 scripts 部分，獲取 Flutter 包:

scripts: \- name: Get Flutter packages script: flutter packages pub get

  • 啟用 Windows 平臺:

- name: Configure for Windows script: flutter config \--enable-windows-desktop

  • 使用 Flutter 構建 Windows 應用程式:

- name: Build Windows script: flutter build windows

  • 生成可分發的 MSIX 包:

- name: Package Windows script: flutter pub run msix:create

  • 如果您已經將 MSIX 配置新增到 pubspec.yaml 檔案中，那麼上面的命令應該適用於您。否則，您可以直接在 CLI 工具中提供配置，而無需對您的專案 pubspec.yaml 檔案進行任何修改:

- name: Package Windows script: | flutter pub add msix flutter pub run msix:create \--store \--publisher-display-name=<PublisherName> \--display-name=<AppName> \--publisher=<PublisherID> \--identity-name=<PublisherName.AppName> \--version=1.0.0.0

  • 為了檢索生成的 MSIX，將 artifacts 路徑更新為:

artifacts: \- build/windows/**/*.msix

  • 在 publishing 部分，用你自己的 email 代替電子郵件。
  • 若要向 Microsoft 夥伴中心釋出，請在釋出下新增以下內容 publishing:

publishing: partner_center: store_id: <STORE_ID> tenant_id: <TENANT_ID> client_id: <CLIENT_ID> client_secret: $PARTNER_CLIENT_SECRET

  • 用適當的值替換尖括號。您將從 Azure AD Overview 頁面獲得 tenant_id 和 client_id 。你可以通過進入產品管理 > 產品標識，在微軟合作伙伴中心應用程式中找到 store_id 。client_secret 是從前面定義的應用程式/環境變數中檢索到的。

這樣就完成了 codemagic.yaml 檔案的配置。現在，只需提交併將檔案新增到 Git 提供程式中，就可以開始了。

注意: 你應該通過微軟合作伙伴中心手動釋出第一個版本的應用。從儀表板上選擇你的應用程式，點選開始提交，然後填寫詳細資訊提交應用程式。第一個版本應該在使用 Codemagic 釋出下一個版本之前完全釋出。

要開始使用 YAML 檔案構建 Flutter Windows 應用程式，請訪問 Codemagic 上的專案頁面，然後單擊 Start your first build。選擇您的工作流程，然後單擊“啟動新生成”以啟動生成過程。

結束了

祝賀你\! 你已經成功地建立了你的第一個 Flutter Windows 應用程式，並且使用 Codemagic 將它釋出到微軟商店。

一旦你開始給你的應用新增新的功能，你可以通過簡單地更新構建編號和執行 Codemagic 構建，輕鬆地釋出你的 Windows 應用的下一個版本。當然，你也可以新增其他工作流，這樣 Codemagic 就可以為 Windows、 iOS、 Android 或 Linux 構建 Flutter 應用程式。

您可以在這裡找到樣本 Flutter Windows 應用程式的完整 codemagic.yaml 配置檔案。在這個 GitHub 倉庫上檢視 Flutter 桌面應用程式示例。

https://github.com/sbis04/flu...

https://github.com/sbis04/flu...

© 貓哥

相關文章