【Xamarin】在 Windows 10 上享受跨平台開發神器 Xamarin

  • Article

在人手一機的時代裡，APP 已經成為現代人生活不可或缺的一份子。而現今的 APP 又分為兩大陣營── iOS & Android，令開發者很是困擾。今天要來跟大家分享一款非常強大的開發工具── Xamarin。一款擁有高度跨平台能力的開發工具，而本篇，就是要跟大家分享如何在 Windows 10 裡準備我們的開發環境。

當然~更多詳細的資訊也能在官網查詢到囉~
那就讓我們開始吧！！！

（不是使用 Windows 嗎？ 請看 【Xamarin】在 Mac OS 上安裝跨平台開發神器 Xamarin）

步驟一：下載 Visual Studio Community 2015

到官方網站點擊下載（是免費的喔！！！）

01

下載下來的安裝檔會如下圖，點擊開始安裝過（過程中可能會要你提供系統權限，請選 YES）

02

步驟二： 開始安裝

跳出安裝畫面，我們選取自訂 → 下一步。

03

 

接下來這幾步要特別注意，要選取需要安裝的功能

在下方所有示意圖中，紅色部分一定要勾選起來，綠色為相依部分，勾選了紅色部分會自動幫你選取。橘色部分為安裝 Win 10 專用模擬器，此部分的安裝需要系統為 pro 版本以上才能正確安裝，若非 pro 版本的朋友也不要擔心，安裝完看到錯誤訊息直接略過，我們可以使用其他模擬器。 04

 

常用工具及軟體開發套件部分，也可以依照各位客官需求自行挑選喔~
選完就點擊下一步囉。

05

 

同意條款後~就能安裝啦！！！

06

 

接下來就是等待的時間~根據電腦能力安裝時間不等，可以先去喝杯水休息一下。

07

 

看到這個畫面就是安裝成功囉~重新啟動一下電腦吧！！！

08

 

如同剛剛提到模擬器的問題，有些朋友在此處可能會看到模擬器沒有正確安裝的錯誤訊息，沒關係我們就先忽略它。

 

步驟三：確認 Visual Studio 安裝狀況

電腦重啟後，在 Windows 搜尋 Visual Studio ，應該可以看到以下畫面。看到 Visual Studio 2015 已經成功安裝囉，如果模擬器有成功安裝的朋友也會看到模擬器的出現。

09

 

點擊 Visual Studio 2015 開啟 VS
第一次開啟會看到以下畫面

10

 

如果已經有 Microsoft 帳戶的朋友直接登入即可，沒有的朋友只要點註冊去註冊一組就好囉！！！

接下來就是一些基本設定，選擇語言還有喜歡的顏色佈景（這些之後都能在修改所以不擔心的選下去吧！！！)

11

 

等到準備工作完成，就進到 Visual Studio 的主畫面囉！！

12

 

開始來逐一確認吧！！！
點選 工具（tool），確認有沒有 Android 、 ios 、 Xamarin Account 三項出現。

13

 

確認有後 點選 工具 → Xamarin Account ，出現以下登入畫面，此處需登入Xamarin 專用的帳戶，若沒有的朋友可以到 Xamarin官方網站 進行註冊喔！！（當然也是免 $$ 的啦！！！）

註冊完就登入就行啦！！！

14

 

接下來檢查其他東西
點選 工具 → 選項 。

15

 

出現以下畫面，在左方找到 Xamarin 字樣並展開。

16

 

點 Android Settings 可以看到一些預設的設定。

17

 

點 iOS Settings 可以看到一些預設的設定。

在此可以看見並沒有連接上任何一台 Mac，在 Xamarin 中撰寫 iOS 的 APP 是需要 Mac 來支援編譯的喔！！ 18

 

點 Other 可以看到一些預設的設定，在視窗右方的 Check Now 字樣可以檢查有沒有更新！！！

19

 

到目前為止都 OK 的話，基本上我們的 Xamarin on Visual Studio Community 2015 就算是大致安裝完成！！！

 

步驟四：確認模擬器安裝狀況

回到桌面，在 Windows 搜尋 Visual Studio，選擇
Visual Studio Emulator for Android。

20

 

應該會看到以下畫面，預設會安裝好兩台機型，但我們依舊可以選擇自己喜歡的機型下載（注意開發 APP 的 API Level 與機型是否相容）。

我選擇啟動預設好的機型來確認安裝。

21

 

若有以下畫面出現就代表成功囉！！！

22

 

步驟五：測試專案的執行

接下來我們試著建立一個 Xamarin.Android 專案來測試是否能成功編譯！
開啟 Visual Studio，選 檔案 → 新增 → 專案。

23

 

選擇 Visual C# → Android → Blank App（Android）→ 確定。

24

 

建立好的畫面如下，當然我們直接來跑跑看，選擇剛剛我們測試成功的模擬器來執行。
如果有安裝它種模擬器點擊倒三角也可以進行選擇，也能夠直接接上 Android 的手機進行測試，就不用安裝模擬器，只是模擬器還是比較便利。 25

 

若出現以下畫面，代表成功啦！

26

 

恭喜你，執行到這裡你就完成了 Xamarin 開發環境的安裝囉！！！

 

額外步驟：安裝 Android 模擬器

無論你是甚麼原因無法使用 Visual Studio Emulator for Android，不要擔心，Xamarin 官方網站也提供了另一款模擬器可以下載。
進入後會看到以下畫面

27

 

向下滑動看到此頁面點 Download Xamarin。

28

 

填寫一些基本資料，因為我們已經安裝過 VS 所以選 YES，就開始下載啦！

29

 

接著就一連串 NEXT 安裝，此處不再贅述。
安裝完畢後開啟我們的 VS 專案
若安裝正確應該可以找到我們的模擬器出現了，一樣直接按執行。

30

 

有以下畫面就代表我們成功啦！！！

31

 

祝大家都能順利的完成安裝 ^^

參考來源：
1. Xamarin Tech
2. Howard Weng's Dot Blog
特此感謝，這兩篇給了我很大的幫助！！！

由 Microsoft Student Partners in Taiwan 台灣微軟學生大使所舉辦之 Xamarin 工作坊即將開跑，
更多資訊歡迎關注 Facebook 官方粉絲專頁。

 
 

wiffer-lin

Comments

  • Anonymous
    October 06, 2016
    Wiffer帥哦！
  • Anonymous
    November 19, 2016
    嗨~你好，我在安裝的時候沒有Microsoft Visual Studio Emulator for Android 這個選項耶~是怎麼回事呢??是不是我哪裡弄錯惹
    • Anonymous
      November 24, 2016
      哈囉，有可能是您的電腦不支援安裝 VS Emulator 喔！可以使用 Xamarin 所提供的模擬器也是沒問題的
  • Anonymous
    November 21, 2016
    要怎麼下載中文版的啊
    • Anonymous
      November 24, 2016
      您好~請問是指哪個部份的中文版呢？
    • Anonymous
      December 11, 2016
      到網頁的最下面左邊可以選取網頁語言，選你要的語言，然後下載步驟照著點，就會下載到你要的語言的程式了
      • Anonymous
        December 11, 2016
        或是下載語言包https://www.microsoft.com/zh-tw/download/details.aspx?id=48157安裝完成後，進入tools > options > environment > international setting > 調整為繁體中文，重新啟動即可。
  • Anonymous
    November 26, 2016
    請問之前已經安裝好[預設]的要怎麼處理呢?((找不到可以加裝的選項
    • Anonymous
      November 27, 2016
      哈囉，可以藉由「程式與功能」中尋找 Visual Studio，它會開啟 VS 的安裝程式選取「修改」就可以新增功能囉！
  • Anonymous
    November 29, 2016
    您好，我安裝的時候出現:C#/.NET(Xamarin v4.2.1)安裝時發生嚴重錯誤，反覆嘗試還是失敗，而打開VS後工具欄也沒有 Android 、 ios 、 Xamarin Account 三項選項，請問該如何處理？
    • Anonymous
      November 30, 2016
      哈囉！可以提供詳細的錯誤訊息嗎？
  • Anonymous
    November 30, 2016
    您好，我想請問點選 工具（tool），沒有 Android 、 ios 、 Xamarin Account 三項出現，那該怎麼辦，需要重新安裝嗎
    • Anonymous
      November 30, 2016
      嗨~可以先利用安裝程式點選「修改」確定 VS 是否有將需要的功能安裝好然後再來判斷需要重新安裝哪些部分
      • Anonymous
        December 01, 2016
        安裝程式的"修改"在哪裡?我也沒有Android 、 ios 、 Xamarin Account
        • Anonymous
          December 03, 2016
          重新點選安裝程式之後應該會有選項可以選擇喔！如下圖最左邊的按鈕http://i.imgur.com/MjbY0qs.png
  • Anonymous
    December 01, 2016
    請問測試Xamarin模擬器執行的時候，出現"部屬有錯誤存在"訊息，並且錯誤清單顯示:An unexpected error occurred trying to initialize Android Designer. Please verify the Android SDK path and the Java Development Kit path on Tools->Options->Xamarin->Android Settings menu. Please see the logs for more details.這是什麼情況呢?
    • Anonymous
      December 03, 2016
      哈囉，已錯誤訊息來做判斷的話應該是 JDK 的位置錯誤喔！
  • Anonymous
    December 06, 2016
    都安裝完了，可是打開VS，沒有看到那個模擬器阿(額外步驟那個)
    • Anonymous
      December 06, 2016
      哈囉，新增專案之後才能夠在 VS 裡面選取模擬器喔！