XAML in Xamarin.Forms 基礎篇 電子書

特別說明

2019/04/10

Visual Studio 2019 for Xamarin 之安裝與設定 Part3 - Visual Studio 2019 安裝與相關相關設定 2

Visual Studio 2019 for Xamarin 之安裝與設定 Part3 - Visual Studio 2019 安裝與相關相關設定 2

Mac 作業系統電腦開發工具之安裝與設定

現在,要來開始進行安裝 Xamarin.iOS 需要用到的開發工具,在這裡所有的操作過程,將會採用一台全新新安裝的 macOS 系統,來進行執行過程步驟的解說說明。
在這裡的 macOS 將會是 Mojave 10.14.3 版本,想要知道這台 Mac 電腦的作業系統版本,可以從位於畫面左上角落的「蘋果」選單中,選擇「關於這台 Mac」,就可以查看的到。
macOS Mojave 版本資訊

安裝 Xcode 開發人員工具

Xcode 提供建置 iOS 應用程式所需要用到的 SDK & IDE,因此,要在 Mac 電腦上能夠開發出 iOS 應用程式,就一定需要安裝這套開發工具。
  • 打開 App Store 圖示
  • 在左上方搜尋文字輸入盒,輸入 Xcode
    搜尋 Xcode 這個關鍵字
  • 當按下 Enter 按鍵之後,就會在第一個項目看到了 Xcode 這個 iOS 開發工具必備的軟體
    搜尋出 Xcode 開發工具
  • 點選 Xcode 這個項目,此時將會顯示 Xcode 這個開發人員工具的介紹內容,請點選該頁面右上方的下載圖示,以便進行下載與安裝這個軟體。
    開始下載與安裝 Xcode
  • 現在,為了要能夠從 App Store 下載這個 Xcode 軟體,此時,請在螢幕最上方的對話窗內,輸入您的 Apple ID 與 密碼,完成後,請點選 [好] 按鈕。
    輸入 Apple ID 和密碼
    此時,剛剛點選的下載圖示
    準備要下載的按鈕圖示
    將會變成底下截圖,顯示出現在正在下載的進度,因此,在此需要等候 Xcode 這個開發人員工具下載完成,畢竟,這的軟體檔案大小也是很大的,需要花些時間來下載。
    正在進行下載的按鈕圖示
  • 當下載完成之後,在該視窗的右上方將會看到 [打開] 按鈕,請點選這個 [打開] 按鈕。
    下載完成後的按鈕圖示
  • 現在,將會看到 Xcode 已經啟動了,並且顯示一個 [Xcode and iOS SDK License Aggreement] 對話窗,這裡需要您同意接受 Xcode 的使用授權,因此,請點選該對話窗右下方的 [Agree] 按鈕
    接受 Xcode 開發工具使用授權
  • 此時,需要輸入這台系統的管理這帳號與密碼,以便進行 Xcode 需要處理的工作,因此,當輸入完成使用者名稱與密碼之後,請點選該對話窗右下方的 [好] 按鈕。
    輸入安裝檔案到電腦上的帳號與密碼
  • 現在,等候 Xcode 安裝相關元件到系統上
    正在進行安裝 Xcode 軟體
  • 當看到底下的畫面出現之後,那就表示在這台 Mac 電腦上的 Xcode 開發人員工具已經安裝好了。
    Xcode 安裝完成的畫面

安裝 Visual Studio for Mac

Visual Studio for Mac 可以讓開發人員在這個 Mac 電腦上直接開發 Xamarin & ASP.NET Core 類型的專案,另外一個重要的功能那就是提供與 Windows 作業系統上的 Visual Studio 2019 相關建置 iOS 專案的能力。
  • 現在,請打開 Safai 應用程式,搜尋 Visual Studio for Mac,將會看到第一個搜尋結果 [Visual Studio for Mac | Visual Studio],請打開這個頁面
    搜尋 Visual Studio for Mac 產品
  • 在這裡,請點選左上方的 [下載 Visual Studio for Mac] 下載按鈕,開始下載這個安裝工具。
    Visual Studio for Mac 官方網頁來下載安裝軟體
  • 當安裝軟體下載完成之後,請在 [下載完成] 找到這個項目,並且打開這個檔案。
    打開並執行下載完成的安裝檔案
  • 當這個檔案載入並且執行完成之後,將會出現如同底下畫面,請點選下載按鈕圖示,開始安裝 Viusl Studio for Mac
    啟動 Visual Studio for Mac 安裝程式
  • 現在出現一個對話窗,顯示 [「Install Visual Studio for Mac」是一個從 Internet 下載的 App,確定要打開嗎?],請點選該對話窗右下方的 [打開] 按鈕
    確認要開啟
  • 此時,Visual Studio for Mac 的安裝程式啟動起來了,並且顯一個對話窗,請點選該對話窗右下方的 [繼續] 按鈕
  • 當出現如下圖,詢問希望安裝那些內容的時候,使用預設安裝選項即可,而最後一個選項 [Xamarin Workbooks] ,原則上大部分的人都不會使用到這個工具。因此,請點選該對話窗右下方的 [安裝] 按鈕。
    要安裝 Visual Studio for Mac 的元件
  • 現在,您將會看到安裝程式正在進行下載檔案,不過,此時,將會出現一個對話窗,要求您輸入這台系統的管理者帳號與密碼,以便安裝 Visual Studio for Mac 這個軟體,所以,請輸入 使用者名稱 與 密碼之後,點選該對話窗右下方的 [好] 按鈕。從這個對話窗的右下方將會看到 [macOS可能會多次需要系統密碼] 這樣的文字,而在此次安裝過程中,這個對話窗將會出現 2 次。
    授權 Visual Studio for Mac 安裝檔案到 Mac 電腦上
  • 當整個安裝過程完成之後, 會出現底下視窗,請點選右下角的 略過 按鈕。
Visual Studio for Mac 安裝完成畫面
  • 現在 Visual Studio for Mac 程式將會啟動起來,並且顯示在螢幕上。
Visual Studio for Mac 安裝完成畫面

在 Mac 上啟用遠端登入

若想要在 Visual Studio 2019 for Windows 環境中,建立 Xamarin.iOS 的專案與進行除錯,就需要先在 Mac 電腦上啟用遠端登入,請在 Mac 開啟 [系統偏好設定]
系統偏好設定 圖示
接著點選 [共享] 圖示,開啟 [共享] 視窗
Mac 電腦的 共享 設定圖示
在 [共享] 視窗內,最左邊的 [服務] 清單中找到的 [遠端登入] 項目,請勾選這個項目,另外,也需要確認右下方的 允許下列使用者存取 中,要存取這台 Mac 電腦的帳號是否有被選取。
在共享對話窗中,啟用遠端登入

安裝 Prism Template Pack

  • 請回到 Visual Studio 2019 程式中,點選功能表
    延伸模組 > 管理延伸模組
    管理延伸模組
  • 當 管理擴充功能 視窗出現之後,請先在左方點選 線上 選項
    接著在右上方搜尋文字輸入盒,輸入 prism 關鍵字
    此時,您將會看到 Prism Template Pack 項目出現在清單內,請點選該項目的 下載 按鈕,安裝這個擴充功能
    安裝 Prism Template Pack
  • 若從該視窗的左邊之 更新 項目中,看到有尚未更新的選項,請點選 更新 項目
    從環境中看到 GitHub Extension for Visual Studio 需要進行更新,因此,請點選該項目中的 更新 按鈕
    管理擴充功能 更新
  • 完成之後,請關閉 擴充功能和更新 視窗與關閉 Visual Studio,以便進行更新這些擴充功能,完成後,請再度開啟 Visual Studio 2019

下載與安裝 Xamarin.Forms 專用的程式碼片段

  • 請先建立一個 Xamarin 資料夾(任何名稱皆可),在這裡,建立 C:\Xamarin
  • 請在右方方案總管視窗下方,點選 Team Explorer 標籤頁次
    請在下方的 本機 Git 存放庫 的下方,點選 複製 選項
    請在第一個文字輸入盒中輸入這個 URL : https://github.com/vulcanlee/XamarinProductive.git
    請在第二個文字輸入盒中,輸入 C:\Xamarin\XamarinProductive
    C:\Xamarin 目錄,是剛剛建立的目錄,您可以指定任何您電腦中的一個目錄
    最後,請點選 複製 按鈕
    複製程式碼片段
  • 從 Visual Studio 2019 功能表中,點選
    工具 > 程式碼片段管理員
    安裝程式碼片段
  • 在 程式碼片段管理員 視窗中,切換 語言 項目為 CSharp
    這裡很重要,若沒有切換,您的程式碼片段設定將會失敗
    安裝程式碼片段
  • 接著,在這個 程式碼片段管理員 視窗下方,點選 加入 按鈕
    請不要點選 匯入 按鈕
  • 請在剛剛出現的 程式碼片段目錄 對話窗中,切換到剛剛建立的 C:\Xamarin 目錄
    接著點選切換到 XamarinProductive 目錄下
    最後,只需要使用滑鼠點擊一下 CodeSnippetV2 這個目錄
    不需要使用滑鼠雙擊切換到這個目錄內
    現在,請點選 選擇資料夾 按鈕
    安裝程式碼片段
  • 此時將會回到 程式碼片段管理員 視窗內,您應該可以看到 CodeSnippetV2 出現在這個對話窗中。
    現在已經完成了程式碼片段的安裝
    安裝程式碼片段
  • 在 程式碼片段管理員 視窗中,切換 語言 項目為 XAML
    這裡很重要,若沒有切換,您的程式碼片段設定將會失敗
    安裝程式碼片段
  • 接著,在這個 程式碼片段管理員 視窗下方,點選 加入 按鈕
    請不要點選 匯入 按鈕
  • 請在剛剛出現的 程式碼片段目錄 對話窗中,切換到剛剛建立的 C:\Xamarin 目錄
    接著點選切換到 XamarinProductive 目錄下
    最後,只需要使用滑鼠點擊一下 CodeSnippetXAMLV2 這個目錄
    不需要使用滑鼠雙擊切換到這個目錄內
    現在,請點選 選擇資料夾 按鈕
    安裝程式碼片段
  • 此時將會回到 程式碼片段管理員 視窗內,您應該可以看到 CodeSnippetXAMLV2 出現在這個對話窗中。
    現在已經完成了程式碼片段的安裝,您可以關閉這個視窗
    安裝程式碼片段




2 則留言:

  1. 匿名22/4/19

    程式碼片段管理員的XAML文案部分好像打錯了, 圖片是CodeSnippetXAMLV2, 但文案是寫CodeSnippetV2, 謝謝!

    回覆刪除