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

在人手一機的時代裡,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