Xamarin.Forms 建立 Azure Moble App 後端

建立 Azure Moble App 後端

在您第一次要使用 Azure Mobile App 服務的時候，您首先需要在 Azure 上建立一個 Web + 行動 > 行動應用程式。

建立 Azure Mobile App 服務

在這裡，您需要定義您日後要存取的 Azure Mobile App服務、要使用哪個資料庫來進行存取資料、資料庫上的表格名稱。當然，日後，您可以決定是否進行身分驗證、針對不同裝置進行推播、日誌查看與效能監控等相關工作。

1. 首先，您需要登入 Azure 入口網站，請使用瀏覽器打開該網頁 https://portal.azure.com/
2. 在網頁的左上方，找到 + 新增 連結，使用滑鼠右擊 + 新增 > Web + 行動 > Mobile App，接著填寫應用程式名稱。 在這個練習中，請在最右方的 Mobile App 刀鋒視窗中的 應用程式名稱 填入DoggyLab (這裡可以依照您的需要，您寫符合 Azure 規定的應用程式名稱)；點擊與操作過程可以參考下圖。
   
3. 接著，您需要定義 資源群組，請在 [資源群組] 中選取現有資源群組或建立新的群組 (使用和應用程式相同的名稱)。若您是第一次使用 Azure 或者您的 Azure 環境中沒有任何存在的資源群組，請在 資源群組下，選擇 新建
4. 您需要為這個 Azure Mobile App 選取一個 App Service 方案/位置，這個選項會；App Service 方案是您 app 的容器。App Service 方案設定將會決定與 app 相關聯的位置、功能、成本與運算資源。在這裡，我們來新建一個 App Service 方案/位置。
   • 先點選 App Service 方案/位置，此時， App Service 方案 的刀鋒視窗會在右邊出現，接著，點選 + 新建 連結。
   • 請在 App Service 方案 欄位下，填入 DoggyLabSolution (所有的名稱在 Azure 上，都是唯一的，也就是說，您需要在此填入適合您使用的名稱)，接著在 位置 欄位的下拉選單，選擇 East Asia，來我們比較近的 Azure 機房。
   • 最後，關於 定價層 欄位，請直接點選下去，您會看到 選擇定價層 的刀鋒視窗出現，這個欄位定義了您組用的 Azure 主機規格，當然，CPU核心數越多，記憶體越多，相對的您每月要付出的費用也越多，所以，在此，可以根據您的需求，自行選擇現階段最適合您的定價層；當然，日後是可以進行變更的。
   • 在 定價層 欄位中，您可以先選擇 S1 標準
     
   • 整個 App Service 方案/位置 的設定流程，已經於下圖標示出每個點選與這定的步驟，當您最後點選了下圖左下角的 建立 按鈕之後，請稍待一段時間， Azure 會幫您建立出一個新的 Azure Mobile App 服務。
     

   在 Azure 網頁的最上方，有個鐘的圖示，點選這個圖示後，您可以查看到 Azure 正在處理中的工作與進度。 

   一旦 Azure Mobile App 已經建置與佈署完成後，會出現如下圖的提示，此時，就可以在 Azure 儀表板上看到您剛剛申請的服務(可以在 Azure 儀表板上看到這個圖示，這是因為您有勾選 釘選到儀表板 選項)

   

   

設定 Azure Mobile App 服務

當建立完成 doggylab 行動App之後，需要對其進行設定相關工作。

1. 請點選左上角的 Microsoft Azure 進入到 Azure 儀錶板內，找到剛剛建立的 doggylab 行動App，點擊這個圖示，進入到 doggylab 行動App設定刀鋒視窗。
2. 此時，Microsoft Azure 網頁會出現 DoggyLab Mobile App 刀鋒視窗；其中，左上方的 URL 欄位所標示的網址，就是這個 Mobile App的服務端點，您需要在程式內加入這個 URL ，以便可以存取相關服務。請您點選 快速入門 > Xamarin.Forms (在這裡，將會使用 Xamarin.Forms 開發環境作為使用說明)。
   
3. 在出現的刀鋒視窗中，Xamarin.Forms，有三個步驟需要設定，那就是：連線到資料庫、建立資料表與API、規劃與產生專案程式。
   • 設定連線到資料庫
     1. 點擊 Connect a database 標題下方的文字：You will need a database in order to complete this quickstart. Click here to create one.，此時，會出現一個新的刀鋒視窗Data Connections
        
     2. 在刀鋒視窗 Data Connections 的上方，滑鼠左擊 + Add 圖示，會出現 Add data connection 刀鋒視窗，您可以開始建立資料庫連線；這裡您會有兩種選擇，一個是選擇已經存在於 Azure 上的 SQL Server 作為 Mobile App 的資料儲存體，或者，您可以選擇新產生一個 SQL Server 作為 Mobile App 的資料儲存體。
     3. 在 Add data connection 刀鋒視窗中，點擊 SQL Server 設定必要設定 這個選項，接著會出現資料庫 刀鋒視窗，在這裡，點擊 建立新的資料庫 選項後，會再出現一個刀鋒視窗 新資料庫。相關操作流程，如下圖：
        
     4. 首先，在 新資料庫 刀鋒視窗中的 名稱 欄位下，輸入新建立的資料庫名稱，在這裡，輸入DoggyLabDB。
     5. 在同一個刀鋒視窗下，點擊 定價層，會出現 選擇您的定價層 刀鋒視窗，這裡有許多不同效能的資料庫主機可以選擇，當然，效能與功能越好、越多的主機，費用也較貴，因為只是進行開發測試階段，可以選擇 S0 Standard 這個類型，選好之後，點擊該刀鋒視窗最下方的 選取按鈕。
        
     6. 在 定序 欄位中，可以填入您需要的資料庫定序值，在這裡將會採用預設值SQL_Latin1_General_CP1_CI_AS
     7. 最後，點選 伺服器 設定必要設定 選項，此時，會出現刀鋒視窗 新增伺服器；在這個頁面內：
        • 伺服器名稱
          請輸入 doggylabsqlserver 做為新的伺服器名稱，此時，該 SQL Server 伺服器的主機位置將會是 doggylabsqlserver .database.windows.net
        • 伺服器管理員登入
          請輸入 doggyadmin 這個帳號，作為該 SQL Server 的管理者帳號
        • 密碼 與 確認密碼 請輸入適當的 密碼 與 確認密碼 作為該 SQL Server 管理者帳號的驗證密碼。不過，該密碼必須要有8個以上的字元、且要包含下列三個類別字元：英文大寫字母、英文小寫字木、數字(0-9)和非英數字元(!、$、#、%等)。
     8. 在該刀鋒視窗下方，點選 確定 按鈕
        
     9. 此時，刀鋒視窗回到了 新資料庫 下，在 伺服器 欄位中，已經可以看到剛剛新增的 SQL Server 伺服器。此時，可以在刀鋒視窗 新資料庫 下方，點選 確定 按鈕。
     10. 在 Add data connection 刀鋒視窗內，也看到了欄位 SQL Database 與 Connection String都已經設定完成了，請在該刀鋒視窗下方，點選 確定 按鈕。這個時候 Microsoft Azure 將開始要建立這個新的 SQL Server & SQL 資料庫，因此，需要稍微等候一段時間，才會完成Data Connection 的建立工作。
         當工作完成後，會在看到如下圖的樣貌， Quick Start 的 Xamarin.Forms 刀鋒視窗中的Connect a database 項目，出現了綠色打勾圖示，文字說明也表示已經完成此工作了。

     此時，若想要知道 Microsoft Azure 的處理進度，可以在 Microsoft Azure 的網頁上方，點選 鐘 這個圖示，就可以看到現在工作進行到哪裡而且進度為多少。

4. 第二個步驟，就是要設定 Create a table API 這個欄位的內容。 在這裡，對於 Backend language 後端語言部分，使用預設值 Node.js，並且將欄位 I acknowledge that this will overwrite all site contents 勾選起來。最後，點擊 Create TodoItem table 這個按鈕。
   
5. 最後一個步驟，就是產生一個可以存取 Azure Mobile App 服務的 Xamarin.Forms 的專案，這個步驟也非常簡單，只需要點選 3. Configure your client application 底下的 Download 這個按鈕即可。
   

實際執行 Xamarin.Forms 的專案

1. 將上述下載的專案透過 Visual Studio 2015 開啟，
2. 在方案總管上，使用滑鼠右擊 DoggyLab.Droid 專案，從彈出功能表中，選擇 設定為起始專案
3. 按下 F5 按鍵，開始執行這個 Xanarin.Forms for Android 專案。
4. 下圖是這個範例應用程式在模擬器上執行結果，首先，可以在 Item name 文字輸入盒內，輸入待辦事項，接著點選右方的 + 按鈕，此時，會看到剛剛出現的資料出現在下方的 ListView 清單內。其實，這個時候，這些資料已經透過 Azure Mobile App，將您剛剛輸入的資料，儲存到上述建立好的 SQL 資料庫內。
   
5. 回到 Microsoft Azure 網頁，可以從首頁儀表板找到 DoggyLab 行動App，點選這個項目，從右邊的 設定 刀鋒視窗內，找到 行動 > 簡易表 這個項目，滑鼠右擊這個 簡易表，從刀鋒視窗 Easy Table內，會看到一個 TodoItem 資料表；這個項目就是上述步驟產生資料的資料表，而該資料表會儲存在上述建立的 SQL Server 資料庫內。
   點選刀鋒視窗 Easy Tables 內的 TodoItem 項目，此時，右方會展開一個新的刀鋒視窗 TodoItem(2 records)，從該刀鋒視窗的下方，可看到剛剛透過模擬器執行的程式，並且輸入的資料，已經儲存到遠端資料庫內了。此時，若關閉該模擬器的應用程式，或者在 Visual Studio 2015 上停止除錯，並且再度按下 F5 來執行，您會看到該應用程式，會從遠端資料庫內，取回剛剛您輸入的相關待辦事項項目。
   

如何讓 Xamarin.Forms 的 StackLayout 可以擁有 Margin 屬性

如何讓 StackLayout 可以擁有 Margin 屬性

這裡是使用 Visual Studio 2015 Update 2 ，使用 檔案 > 新增 > 專案 > Visual C# > Cross-Platform> Blank Xaml App (Xamarin.Forms Portable) 專案樣板所建立的新專案。

當想要在 XAML 宣告定 StackLayout 版面配置元件且使用 Margin 這個屬性值的時候，卻發現到無法使用；此時，使用 物件瀏覽器 進行查看 Xamarin.Forms.Core > Xamarin.Forms > StackLayout > 基底類型> Layout<View> > Layout > View 這個類別的時候，並沒有發現到有 Margin 屬性值存在。會發生這樣的問題，這是因為使用 Visual Stdio 2015 Update 2 提供的專案樣本所產生的 Xamarin.Forms 專案，其 Xamarin.Forms NuGet 套件版本為 2.0.0.6482。

要解決此一問題，只需要將整個方案內所有專案的 Xamarin.Forms NuGet 套件，升級到最新版本，即可以解決此一問題。

要進行 Xamarin.Forms NuGet 套件升級，請在方案總管節點上，使用滑鼠右擊，選擇 管理方案的 NuGet 套件 選項，再出現 NuGet - 解決方案 這個標籤頁次視窗後，從 更新 頁次找到 Xamarin.Forms 這個項目，確認要升級到最新的版本，接著點擊 安裝 按鈕後，即可開始進行整個方案內的 Xamarin.Forms NuGet 套件。因為許多專案都會使用到這個 Xamarin.Forms NuGet 套件，因此，升級過程會花費一些時間，等到 輸出 視窗顯示了 已完成 訊息，那就表示升級動作已經完成了。不過，螢幕畫面上會出現需要您重新啟動 Visual Studio 以完成此程序的訊息，此時，您可以關閉 Visual Studio 並且重新開啟，或者，直接點選Restart 按鈕。

在 Visual Studio 重新啟動之後，再度透過使用 物件瀏覽器 進行查看 Xamarin.Forms.Core >Xamarin.Forms > StackLayout > 基底類型 > Layout<View> > Layout > View 這個類別的時候，這個時候，就會發現到有 Margin 屬性值存在。

由於 Xamarin.Forms 這個套件會提供所有 XAML 宣告語言的類別與屬性，建議您可以經常更新到最新版本，以享受到最新的 Xamarin.Forms 所提供的功能。

Mac電腦上的 Xamarin 開發工具安裝

需求說明

想要使用 Xamarin 來開發出 iOS 的應用程式，若您是使用 Visual Studio 來進行開發，此時，您會需要準備一台 Mac 電腦，用來編譯與建立 iOS 的應用程式，並且可以透過 Mac 上提供的 iOS 模擬器，進行開發與測試。Windows 上的 Visual Stuio 與 Mac 電腦之間的關係，可以從下圖觀察出來。

Visual Stuio 可以用來建立、編輯、偵錯有關 iOS 類型的專案，不過，當要執行、編譯、發布 .ipa 檔案的時候，就需要透過另外一台 Mac 電腦來運行；這兩台電腦是透過了 SSH 通訊協定進行溝通，而在 Mac 電腦這端，將會透過 Xamarin Mac Agent 這個程式，負責接收來自於 Visual Stdio 上的相關動作命令需求，並且轉交給 Xamarin.iOS Studio 或者 Xcode 來接續執行。

因此，這台 Mac 電腦上，需要安裝 Xamarin Studio 與 Xcode 開發工具，這台 Mac 電腦的需求為：

1. Mac 電腦需要執行 OS X Yosemite (10.10) 或者更高的版本。
2. Xamarin Studio 5.10 或者更高的版本。Mac 電腦上的 Xamarin Studio 版本，應該要與 Visual Studio 上所安裝的 Xamarin版本一致。
3. Xamarin.iOS SDK.
4. Apple Xcode(7+) IDE and iOS SDK

另外，您還會需要底下類型的帳號

1. Apple ID (用於下載與安裝 Xcode)
2. Xamarin Account (用於啟用 Xamarin Studio)

Xcode 軟體安裝

1. 開啟 iOS Developer Center
   使用瀏覽器開啟網址 https://developer.apple.com/download/
2. 這裡選擇下載最新版本的 Xcode 7.3.1，並且安裝到 Mac 電腦上。
   
3. 由於 Xcode 約 3.8G 大小，需要透過網路下載來安裝，因此，需要等候一些時間，才會完成安裝。

Xamarin Studio 軟體安裝

1. 開啟 Xamarin Studio 下載網頁 使用瀏覽器開啟網址 https://www.xamarin.com/download
2. 在開啟網頁，填寫基本資料與勾選同意條款，接著按下 Download Xamarin Studio for OS X 按鈕，下載安裝檔案與進行安裝。
3. 在安裝完成之後，請啟動 Xamarin Studio，要進行啟動程序，在歡迎頁面中，點擊 Log In 進行登入與啟動作業；若您沒有 Xamarin 帳號，請先點擊下方的 Create account 進行申請一個 Xamarin帳號。
   

更多詳細安裝與設定說明，請參考官方說明文件：https://developer.xamarin.com/guides/ios/getting_started/installation/mac/

關於 Xamarin Studio 的各種不同版本，請參考： https://store.xamarin.com/

啟用遠端登入

為了要能夠 Visual Studio 的 Xamarin 延伸套件可以與 Mac 主機進行通訊，此時，您需要在 Mac 電腦上進行設定，允許 遠端登入。

請在 Mac 電腦上開啟 系統偏好設定，接者開啟 共享 圖示，在 共享 對話窗中，把 遠端登入 功能啟用；如果有需要，可以指定特定使用者才可以進行遠端登入作業，這裡的範例截圖中，設定所有使用者都可以進行遠端登入到這台 Mac 電腦上。

除了上述的設定，若您的 Mac 系統中有啟用防火牆功能，您需要允許 mono-sgen 這個程式可以接收傳入的連線。

在 Windows VS2015 進行設定

接下來，請回到 Windows 作業系統下的 Visual Studio 2015，進行相關設定與Mac電腦的連線啟用作業。

1. 開啟 Viual Studio 2015
2. 在功能表中，選擇 工具 > Xamarin Account，在 Xamarin Account 對話窗中，點擊 Log In 按鈕，進行登入驗證作業，
   

連線到 Mac

1. 在 Visual Studio 2015 的功能表中，選擇 工具 > 選項 > Xamarin > iOS Settings，接下來，點選Find Xamarin Mac Agent 這個按鈕
   
2. 當出現了 Xamarin Mac Agent 對話窗後，點選 Add Mac... 按鈕
3. 請在 Add Mac 對話窗中，輸入遠端 Mac 電腦的 IP 位置，接著點選 Add 按鈕
4. 若沒有看到任何錯誤訊息，接著看到 Connect to Mac 對話窗出現，請輸入要登入 Mac 電腦的帳號與密碼
   
5. 當您回到了 Xamarin Mac Agent 對話窗，並且看到您設定的電腦右方，出現了鍊子圖示，那就表示您的 Visual Studio 2015 已經可以成功與 Mac 電腦上的 Xamarin Mac Agent連線了。
   

更多的這方面說明，請參考：https://developer.xamarin.com/guides/ios/getting_started/installation/windows/