2013年7月4日 星期四

第一次使用Xamarin就上手(二) - 安裝Xamarin Step-by-Step Part2


將將~~各位看倌久等啦~~

為了慶祝美國獨立紀念日的到來,我們接下來繼續探索如何透過Xamarin來撰寫C#,開發出iOS的Native App吧~

(不過各會看倌也別高興得太早,雖然我們可以透過Xamarin來撰寫C#,並且開發出iOS的Native App,但前提條件仍是需要有一台Mac,而上面也要先裝好Xcode的開發工具。)


不囉嗦~

咱們開始一探究竟吧~~

Step 1

在Mac電腦上,前進Xamarin官網 http://xamarin.com/

Step 1

Step 2

快點選那個綠色的"Download Now"按鈕吧~~

Step 2

Step 3

填寫左邊的相關註冊資訊後,點選"Download Xamarin for OS X"

Step 3

Step 4

下載完成後會看到"XamarinInstaller.dmg"的出現。

Step 4

Step 5

Xamarin的啟動安裝畫面出現後,點選"Install Xamarin"。並且點選"打開"來確定開始安裝Xamarin。

Step 5-1
Step 5-2

Step 6

Xamarin 的使用授權同意。勾選同意後,點選"Continue"。

Step 6

Step 7

勾選想要安裝的Xamarin工具之後,點選"Continue"。

(如果沒有要開發Android的看倌,可以取消Xamarin.Android的安裝)

Step 7

Step 8

確認要安裝路徑之後,點選"Continue"。

Step 8

Step 9

確認目前要安裝的相關SDK版本後,點選"Continue"。

Step 9

Step 10

Android SDK的授權同意書,勾選接受後,點選"Continue"。

Step 10

Step 11

接著就會開始進行Xamarin的安裝作業。

(跟在Windows的環境安裝是一樣需要等很長一段時間,尤其是從沒裝過Java SDK以及Android SDK的話,會等超久的...各位看官,就請耐心等候吧。)

 Step 11-1 Step 11-2 Step 11-3

Step 12

恭喜啦,終於安裝完成,點選"Quit"。

Step 12

Step 13

接著在Launchpad當中點選"MonoTouchActivation"。

Step 13

Step 14

接著會出現啟用Xamarin的連線畫面。
(在這邊需要輸入之前在Xamarin所註冊的測試帳號以及密碼)

Step 14

Step 15

根據所註冊的帳號權限,啟用Mac上Xamarin的Build Server。

Step 15

Step 16

順利的話會看到啟用成功,接著點選"OK"。

Step 16

 

以上,Mac安裝與啟用Xamarin完成~~~

接著之後要在Windows上快樂的用Visual Studio 2012撰寫C#程式,然後要透過Mac來幫忙編譯與部屬App程式到iOS的Device上,所以我們接下來要在Mac上做一些系統的連線設定。


Step 17

打開"系統偏好設定",接著點選"安全性與隱私"。

Step 17

Step 18

如果防火牆是呈現"開啟"的狀態,官網上是教導點選"關閉防火牆"。不過筆者是認為直接關閉電腦的防火牆的作法不太安全,所以就選擇點選"防火牆選項"。

Step 18-1

(如果呈現不能點選的狀態,請先點選左下的"鎖頭",取得權限解鎖)

Step 18-2

Step 19

接著設定"msbserver"允許傳入連線,接著點選"好"。

Step 19

Step 20

接著確認在"網路"當中確認目前這台Mac的IP位址,等等在後面的步驟當中會用到。

Step 20

Step 21

接著回到Windows的電腦,打開Visual Studio 2012。

Step 21

Step 22

點選選單的"工具"->"選項"。

Step 22

Step 23

在"選項"的對話視窗當中,捲動左邊的列表選項,找到"Xamarin”。

Step 23

Step 24

展開"Xamarin"的選項,點選"iOS Settings",接著點選右邊的"Configure…"。

(若點選"Configure..."只會出現啟用Xamarin.iOS的警告視窗,請先參考Step 31~Step  37)

Step 24

Step 25

在"Connect to a Xamarin.iOS Build Host"的對話視窗當中,點選"Configure Host Manually"。

Step 25

Step 26

出現"Enter Mac build host"的對話視窗。

Step 26-1

鍵入之前在Step 20所看到的IP位址,接著按下OK。

Step 26-2

Step 27

回到"Connect to a Xamarin.iOS Build Host"的對話視窗,會看到正在測試跟Mac的連線當中,等到出現"Status: Ready"。

 Step 27 Step 27-2

Step 28

點選所Ready的Mac電腦,接著點選"Connect"。

Step 28

Step 29

接著會出現跟所設定的Mac電腦的Xamarin的連線狀況確認。

Step 29

Step 30

順利的話會回到"選項"的對話視窗。不過,若此時如果兩邊電腦的Xamarin.iOS SDK版本不一時,會要求做升級或同步的動作,就點選"是"吧。

Step 30-1

Step 30-2

Step 30-3

Step 31

接著點選Visual Studio 2012的新增專案,在"新增專案"的對話窗格當中,點選"Visual C#"的專案範本。

Step 31

Step 32

在"Visual C#"的專案範本底下,點選"iOS"的範本選項,中間也會出現三種專案範本。

Step 32

Step 33

若是展開"iOS"範本選項的下面,則會出現iPad、iPhone、Universal的三種範本選項,這三種範本選項各有提供專屬的專案範本。

Step 33-1

Step 33-2

Step 33-3

Step 34

接著我們先嘗試看看"iPhone"的"HelloWorldApplication"專案範本吧,接著點選"確定"。

Step 34

Step 35

在Visual Studio 2012建立相關的專案檔案時,會去驗證安裝在這台電腦上的Xamarin.iOS是否已經授權啟用。若尚未啟用則會看到以下畫面,點選"Begin a Trial"。

Step 35

Step 36

看到瀏覽器出現,連線到Xamarin的官網,登入之前所註冊的測試帳號資訊吧。

Step 36-1

Step 36-2

Step 37

回到Visual Studio 2012,專案建立順利成功的話,就會看到"iPhone"的"HelloWorldApplication"專案建立完成。

(若是從Step 24過來的看倌們,應該會遇到Step 25開始的連線設定)

Step 37

Step 38

按下"開始(F5)"按鈕編譯執行我們的專案程式之前,請先確認一下要部署的裝置,在這邊我們選"iPhone Simulator"~~

Step 38

Step 39

Visual Studio 2012進入除錯模式...阿...程式哩?趕緊到Mac電腦看看吧~~應該會看到"iPhone Siumlator"正在啟動執行當中。

Step 39

Step 40

點點看,玩玩看,感覺完全不輸直接用XCode寫Objective-C程式iOS App呢~~

 Step 40-1 Step 40-2 Step 40-3 Step 40-4

Step 41

回到Visual Studio 2012 點選"停止偵錯(Shift + F5)",停止應用程式的偵錯執行。

Step 41


以上...收工啦~~~

這樣看下來,幾乎就可以讓我們C#程式開發人員利用在Visual Studio 2012中所使用的開發技巧來開發iOS的App,也就不用學那閱讀與撰寫難到爆炸的Objective-C程式了呢~~~

各位熟習C#開發的看倌們,這樣是不是超讚的啊~~~

 


參考資料:

http://docs.xamarin.com/guides/ios/getting_started/installation/mac/

http://docs.xamarin.com/guides/ios/getting_started/installation/windows/

http://blog.xamarin.com/xamarin-is-ready-for-visual-studio-2012-launch/

6 則留言:

  1. 作者您好...

    在開發 Xamarin 時如只有單一台 Mac 但又不想用 Mac 模擬 Windows 方式的話,可以直接在 Windows 直接執行 Xamarin Code 的內容嗎??

    回覆刪除
    回覆
    1. 如果要利用Xamarin開發iOS的App,就必須同時要有一台Windows以及一台Mac才能編譯執行。如果只有Windows的話,就沒辦法了(可看Code,但不能編譯)...

      但是要如何同時擁有一台Windows以及一台Mac,這就看大家的巧思了~~

      刪除
  2. 作者已經移除這則留言。

    回覆刪除