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 來執行，您會看到該應用程式，會從遠端資料庫內，取回剛剛您輸入的相關待辦事項項目。