Part II

關於 Xamarin 在台灣的學習技術資源

Xamarin 實驗室 粉絲團

歡迎加入 Xamarin 實驗室 粉絲團,在這裡,將會經常性的貼出各種關於 Xamarin / Visual Studio / .NET 的相關消息、文章、技術開發等文件,讓您可以隨時掌握第一手的 Xamarin 方面消息。

Xamarin.Forms @ Taiwan

歡迎加入 Xamarin.Forms @ Taiwan,這是台灣的 Xamarin User Group,若您有任何關於 Xamarin / Visual Studio / .NET 上的問題,都可以在這裡來與各方高手來進行討論、交流。

Xamarin 實驗室 部落格

Xamarin 實驗室 部落格 是作者本身的部落格,這個部落格將會專注於 Xamarin 之跨平台 (Android / iOS / UWP) 方面的各類開技術探討、研究與分享的文章,最重要的是,它是全繁體中文。

Xamarin.Forms 系列課程

Xamarin.Forms 系列課程 想要快速進入到 Xamarin.Forms 的開發領域,學會各種 Xamarin.Forms 跨平台開發技術,例如:MVVM、Prism、Data Binding、各種 頁面 Page / 版面配置 Layout / 控制項 Control 的用法等等,千萬不要錯過這些 Xamarin.Forms 課程

Azure Mobile App 後端服務建立說明

在這裡,需要使用 Azure Mobile App 來建立 Doggy 這家公司跨平台行動應用程式所需要的後端服務,這包含了,身分驗證、資料存取、圖片檔案存取服務。

這篇文章將會說明如何建立與設定這些服務,並且,利用 Azure Mobile App 平台提供的範例專案,進行測試,確認這些功能可以正常運作。

建立 Azure Mobile App

  1. 開啟瀏覽器,輸入網址:https://azure.microsoft.com/en-us/ ,接著,點選右上角的 PORTAL,進入到 Azure 管理儀表板中。

    在這裡,假設您已經具有 Azure 使用權的帳號與密碼,若還沒有,可以線上進行免費申請。

    Azure儀錶板

  2. 在 Azure 儀表板點選 + 新增,接著在出現的刀鋒視窗內點選 Web + 行動,在 Web + 行動 刀鋒視窗內點選 Mobile App

    • 請在 Mobile App 刀鋒視窗內的 應用程式名稱 欄位內輸入 DoggyMobileBE

    • 選擇您的 Azure 訂閱帳戶

    • 資源群組 您可以選擇新建立,或者在這裡是選擇之前建立過的資源群組

    • 請點選 App Service 方案與位置,在 App Server 方案之刀鋒視窗內,點選 + 新建

      (App Service 方案是您 app 的容器。App Service 方案設定將會決定與 app 相關聯的位置、功能、成本與運算資源。)

    • 在 App Service 方案 刀鋒視窗內的 App Service 方案 輸入 DoggyMobileSolution,而在 位置 選擇 East Asia定價層 則使用預設值 S1 標準,最後點選下方的 確定 按鈕。

    • 此時,最右邊的刀鋒視窗就會成為 Mobile App (另外兩個刀鋒視窗,會自動關閉),請在此刀鋒視窗下,勾選 釘選到到儀表板 檢查盒,接著點選 建立 按鈕。

    • 此時,Microsoft Azure 就會開始進行建立 DoggyMobileBE 這個 Azure Mobile App 後端服務。

      新增MobileApp

    • 當這個服務建立完成後,可以透過右上方的通知圖示 (一個鐘的符號)得知,而各項在 Microsoft Azure 上的操作,都可以透過這個通知功能知道操作是成功還是失敗與處理進度到哪裡。

      MicrosoftAzure操作通知

  3. DoggyMobileBE 這個 Azure Mobile App 後端服務建立完成後,點選左上角的 Microsoft Azure 文字,就可以回到 Microsoft Azure 儀表板,也會看到 doggymobilebe 這個行動App服務已經建立完成了。

    DoggyMobileBE後端服務建立完成之儀表板

建立後端資料存取來源

接下來,您需要在 Azure Mobile App 內,設定所要存取後端資料的資料庫資訊、選擇後端服務的程式語言、佈署與測試端服務是否有正常運作。

  1. 請點選網頁左上角 Microsoft Azure 文字,進入到 Microsoft Azure 儀表板,接著點選 doggymobilebe 行動 App 圖示,進入到 doggymobilebe 行動 App 設定刀鋒頁面。

  2. 當出現 設定 刀鋒視窗,請點選 快速入門

  3. 當出現 Quick start 刀鋒視窗, 請點選 Xamarin.Forms

    建立資料庫與範例前後台

  4. Xamarin.Forms 刀鋒視窗內,點選 1 Connect a database 下的 i 圖示,準備進入設定資料庫伺服器與資料庫的設定:

    在這裡,將會假設您需要新建立一個新的 SQL Server 伺服器並且建立一個新的資料庫,若您需要採用現行 Azure 上存在的 SQL Server 伺服器或者資料庫,請自行點選相關設定。

    • 當出現 Data Connections 刀鋒視窗,請點選 + Add 連結

    • Add Data Connections 刀鋒視窗下,點選 SQL Database 設定必要條件

    • 資料庫 刀鋒視窗,點選 建立新資料庫

    • 新資料庫 刀鋒視窗,在 名稱 欄位,輸入 DoggyMobileDb,設定該資料庫的名稱

    • 定價層定序 都使用預設值

    • 點選 伺服器 設定必要條件

    • 當出現 新增伺服器 刀鋒視窗,

      伺服器名稱 欄位輸入 doggymobiledbsrv ,表示 SQL Server 伺服器的名稱

      伺服器管理員登入 欄位輸入 miniadmin ,表示 SQL Server 管理員的帳號

      密碼 欄位輸入 U9AkQ!eR!XN_M- ,表示 SQL Server 管理員的密碼

      確認密碼 欄位輸入 U9AkQ!eR!XN_M- ,表示 SQL Server 管理員的密碼

    • 位置 欄位,請選擇 東亞

    • 最後,在 新增伺服器 刀鋒伺服器視窗的下方,點選 確定 按鈕

    建立資料庫伺服器與資料庫的刀鋒視窗

    • 新資料庫 刀鋒伺服器視窗的下方,點選 確定 按鈕

    • Add data connections 刀鋒伺服器視窗的下方,點選 確定 按鈕

    • 當資料連線建立完成後,可以從通知圖示知道,這個工作需要等候一些時間,才能夠完成

      正在建立SQL資料庫

  5. 在資料庫建立完成後,在 Data Connections 刀鋒視窗下,會顯示一個新的項目 MS_TableConnectionString,而在 Xamarin.Forms 刀鋒視窗內的 1 Connecton a database 下的圖示,會變成綠色打勾圖示。

  6. 接著在 Xamarin.Forms 刀鋒視窗中的 2 Create a table API,在 Backend language標題下方的下拉選單,請選擇 C#,接著點選 Download 按鈕,將這個後端專案下載下來,並且解壓縮到您硬碟目錄下,此專案稱為 Azure Mobile App後端服務專案

  7. 接著在 Xamarin.Forms 刀鋒視窗中的 3 Configure your client application,點選 Download 按鈕,將這個後端專案下載下來,並且解壓縮到您硬碟目錄下,此專案稱為 Azure Mobile App前端專案

佈署 Azure Mobile App 後端服務專案與進行測試

接下來,要使用剛剛下載下來的兩個專案,進行測試 Azure Mobile App 是否有設定完成。

佈署 Azure Mobile App 後端服務專案

  1. 使用 Visual Studio 2015,開啟 Azure Mobile App後端服務專案 DoggyMobileBE.sln

  2. 滑鼠右擊 DoggyMobileBEService 專案節點,選擇 重建

  3. 重建完成後,滑鼠右擊 DoggyMobileBEService 專案節點,選擇 發行

  4. 發行 對話窗內,點選 選取發行目標 下方的 Microsoft Azure App Service(A)

  5. 在出現 App Service 對話窗後

    • 請在 訂用帳戶 下拉選單,選擇您要佈署的訂用帳戶

    • 請在 檢視 下拉選單,選擇 資源類型 項目,此時,最下方的清單會顯示出有 Mobile App 資料夾節點。

    • 請展開 Mobile App 資料夾節點,就會看到 DoggyMobileBE 這個項目,請選擇這個項目。

    • 最後,點選 確定 按鈕

    • 當回到 發行 對話窗,點選 發行 按鈕,開始佈署這個專案到 Azure App 服務上。

    發行DoggyMobileBE專案

使用 Azure Mobile App 前端專案測試後端服務

  1. 使用 Visual Studio 2015,開啟 Azure Mobile App 前端專案 DoggyMobileBE.sln

  2. 在這裡選擇使用 Android 專案來進行測試,因此,在方案總管上,滑鼠右擊專案 DoggyMobileBE.Droid 選擇 設為起始專案,選擇好要執行的Android模擬器,就可以按下 F5 開始執行。

  3. 若啟動該應用程式後的畫面如下圖,則表示,這個 Android 的 Xamarin.Forms 的專案,成功的抓取到後端資料

    前端測試專案執行結果

  4. 您可以在模擬器上執行的應用程式,Item Name 欄位內,輸入一些文字,接著點選 + 按鈕,就可以把資料透過 Xamarin.Forms 應用程式,儲存到後端 SQL Server 上;另外,在 ListView 透過手勢,由上往下滑動,可以即時讀取後端資料庫內的資料,更新顯示在螢幕上。

  5. 透過 Visual Studio 2015 的 SQL Server 物件管理 可以查看到 Azure SQL Server 上的 TodoItems 資料表上的資料,確定您剛剛輸入的資料,有寫入到後端資料庫內。

    檢視資料庫內的紀錄

其他相關文章

更多關於 Xamarin / Xamarin.Forms 教學、技術分享、用法文章,請參考 I ♥ Xamarin