Part I 開發一個後端 Web API 服務

關於 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 課程

Part I 開發一個後端 Web API 服務

首先,我們要先來開發後台的 Web API 服務,由於,Azure 行動應用服務已經提供我們相當多食用的機制與功能,讓我們可以很輕鬆的進行這些 Web API 專案開發,並且也整合了 Azure SQL Server 資料庫能力,讓相關行動裝置需要使用的資料,可以儲存在資料庫內。

在這裡,我們將會帶領大家,從無到有的實際建立起 派工與回報 跨平台應用專案需要用到的後台 Web API 服務。這個實作練習共分成七個部分,每個階段所要完成的專案原始碼,都已經存放在 https://github.com/vulcanlee/XamarinHandsOnLab/tree/master/Labs 內,若您在練習過程中,遇到問題,可以觀察各階段完成的專案原始碼,了解問題出在哪裡。

要進行這個專案,您需要先準備好 Azure 帳號,若您尚未擁有 Azure 帳號,請您到 https://azure.microsoft.com/ 網頁下免費申請。

另外,您需要在 Chrome 瀏覽器中安裝與使用 PostMan 這套工具,您可以從這裡 https://chrome.google.com/webstore/detail/postman/fhbjgbiflinjbdggehcddcbncdddomop?hl=zh-TW 取得 PostMan 工具。關於 PostMan 的相關說明文件,可以參考 https://www.getpostman.com/docs/

底下分別摘要說明每個階段要做的事情。

建立與設定 Azure Mobile App 行動應用服務

在這裡,將會帶領大家,如何建立一個 Azure Mobile App 行動應用服務;在這裡將會建立起一個後台專案(在這裡我們使用的是 ASP.NET 的專案)與 Azure SQL Server (用來儲存相關使用者與派工紀錄資料)

確認 Azure Mobile App 行動應用服務是正常運作

完成建立 Azure Mobile App 行動應用服務後,我們將會取得 Azure Mobile App 行動應用服務幫我們產生的 ASP.NET 後端專案與 Xamarin.Forms 專案檔案。

接著您將會需要在本機上,實際執行 ASP.NET 後端專案,我們將會使用 PostMan 來測試預設 Web API 服務是否可以正常運作,然後,我們將會把 ASP.NET 後端專案,佈署到 Azure 上,同樣的使用 PostMan 來檢測預設 Web API 服務是否正常。

最後,我們將會使用 Azure 提供的 Xamarin.Forms 專案,實際在 Visual Studio 下執行,看看能否與 Azure 中的後端 Web API 整合起來。

檢視 Azure Mobile App 行動應用服務提供的後端專案

在這裡,我們將會大致檢視與了解,ASP.NET 專案的幾個重要結構,以便進行底下的各個功能需求擴充。

建立使用者登入驗證之服務 Web API

第一個要建立起來的功能,那就是要實作出一個資料庫紀錄初始化的 Web API,這個 Web API 僅僅是提供給管理者使用,一般手機使用者是不需要用到這個服務的。

接著,我們將會建立使用者帳號與身分驗證之相關 Web API 服務,有了這個 Web API 服務,我們就可以在 Xamarin.Forms 行動 App中,實作出使用者登入與身分驗證的功能,讓沒有通過身分驗證的使用者,不能夠使用這個 App 功能。

建立派工紀錄資之相關服務 Web API

在這裡將會實作派工紀錄的 CRUD (新增/查詢/修改/刪除) 的功能,有了這個功能,使用者就可以透過這個 Web API 服務,進行取得需要執行的派工紀錄、回報派工紀錄內容等需求。

虛擬 QR Code 打卡測試網頁

為了要能夠讓手機端的 Xamarin.Forms 應用程式,可以實際測試 QR Code 打卡功能,因為,我們使用了 ASP.NET MVC 5 功能,建立了一個網頁,根據您提供的使用者帳號,顯示出這個使用者正在執行中的派工紀錄與每個紀錄 QR Code 圖片。

設計圖片上傳 Web API

最後,我們將會實作出可以讓 Xamarin.Forms 上傳圖片的 ASP.NET 之 Web API 服務。