Share via

將你的網站轉為 Windows App- 使用 Windows App Studio

  • Article

[感謝微軟學生大使、清華大學計量財務金融學系賴虹安同學，協助翻譯原發佈於 Building Apps for Windows 部落格中的文章：Building Hosted Web Apps with Windows App Studio]

以下則是賴同學在 3 分鐘內，將自己的履歷網站轉為 Windows App 之經驗分享：

利用Windows app studio建立Hosted Web App from 賴 虹安

將你的網站轉為 Windows App- 使用 Windows App Studio)

如果你已經擁有自己的 Web App ，並且有公開的 URL ，那麼只要使用 Windows App Studio (有中文介面) 裡的 Hosted Web App 範本，你就可以輕易地將它轉移成 Windows 10 的 App 。 Windows App Studio 這個線上服務，能讓無程式基礎的人也能輕鬆地創建 Windows 系統上的 App 。這篇文章將帶各位了解如何建立屬於自己的 Hosted Web App 。

在 Windows App Studio 裡，你可以藉由範本或是空白的網頁畫布（ canvas ）於瀏覽器中創建原生 Windows 10 App ，接著加入所需資訊、數據、服務及風格設計等等。建立完成後，你就等於建構了一個 Visual Studio Solution 、側載套件（ Sideloading Package ）或發行套件（ Publishing Package ）的App，同時也代表著，你將接觸到 Windows Store 中超過 20 億個 Windows 10 裝置的使用者。
在眾多範本中，可讓無障礙網頁（ Accessible Websites ）及 Web App 發布至 Windows 上的便是 Hosted Web App （ HWA ）。它會要求你輸入Web App 的 URL 、新增 App 的圖示（ icon ）、確認所有設定、並準備發布至 Windows Store 。而這些步驟只會花費你一些時間即可完成。
底下這些生活日常所花費的時間甚至比建一個 HWA 的時間還多呢！例如：
 檢查 E-mail
 微波一袋爆米花
 逛逛百貨
 刷刷牙
 欣賞電視節目中的廣告片段（建 HWA 的最佳時間！）

所以如果你願意花 3 分鐘的時間來學習，那就讓我們開始吧！1_foursteps

步驟 1 ：建立專案
如果你還沒用你的 Microsoft 帳號登入 Windows App Studio ，別擔心，這是一項完全免費的服務，成功登入後前往「 Start New Page 」，那裏就會有建立 HWP 的選項。

2_createyourHWA

點選建立 Hosted Web App 後，會有一個彈出視窗，輸入你的Windows App 的名字後點擊「 Start with this one 」，而右側的裝置預覽（ device previews ）將會展示 App 在各式裝置螢幕上的呈現樣貌。

3_nametheapp

步驟 2 ：安裝 App
在建立專案後，你會前往內容編輯（ Content ）的頁面，在這個頁面你唯一需要做的事情便是輸入你想要轉換的網頁 URL 。

4_themanifest

接著你可以選擇上傳安裝資訊檔（ Manifest ），或是你也可以定義新的URL 規則以及旋轉偏好（ rotation preference ），但是這些都是非強制性的喔！
在右方預覽的螢幕上，會顯示你的 HWA 在各式裝置螢幕上的顯現效果，如果你沒有預覽成功也不必擔心，這通常代表這個網站不被允許嵌入在iframe 裡，但仍然是可運作的喔！
在輸入 URL 及其他相關資訊後，你可能會想要更新 App 的預設 icon ，只要點擊 Content tab 裡導覽列上的 icon 就可以打開 icon 編輯器了。

5_iconeditor

接著點擊「 App Logo 」下方的圖標，就會打開一個資料夾，在裡頭你可以選擇你想要的 icon 來使用，上傳自己喜歡的 icon 後，這個工具將會自動產生各種 icon 大小供你使用。

最後，點擊「 Settings 」來編輯你的市集（ Store ）清單細節，例如： App 的描述、語言、市集相關細節、隱私條款，以及其他資訊等。在發布到市集前，你需要填妥市集相關資料，更多詳細發布指示請見文件 (中文)。

6_publishtostore

步驟 3 ：建立 App
當你完成安裝設定後，點擊上方灰色「 Finish 」按鈕，你將被導入一個新的頁面，在此頁面你可以瀏覽你的 App 在各式裝置上的新樣貌，而你在這個頁面所需要做的事情，便是點擊上方「 Generate 」大按鈕，接著會打開一個彈出視窗，選擇你所要的產生的套件即可（ Visual Studio Solution 通常為預設選項）。
值得注意的一點是，為了能夠產生發行套件，你必須確實完成上述所提的市集相關資訊。

在所有步驟都結束後，按下「 Generate 」，等候一分鐘，你就可以擁有屬於自己的 App 囉！

結論
只要上述這些步驟，就能輕鬆在 Ｗindows App Studio 建立一個 HWA ，是不是非常簡單？
如果你在使用這個工具後有任何意見，我們都非常歡迎你提出與我們分享喔！