介紹Xamarin可使用的Azure後端PaaS服務的簡易上手方法，以及使用上需注意的坑，最後以前後端都是C#的完美結合架構來說明前後端語言統一的好處。

1. Xamarin的
Azure後端懶人包
Azure Mobile App Service簡易上手

2. Azure Mobile App Service
Azure提供的PaaS服務(http://bit.ly/2o7S14J)
→提供簡易快速的OData (http://www.odata.org/)格式 REST API搭建
→整合AD, Facebook, Google帳號以及簡單自製規則認證
→提供可離線操作的API架構
→可整合Azure Notification Hub做推播功能
→Node.js的後端可完全用免費Quota的配置節省成本
Backend Language: C#, Node.js
前後端框架都開源放在Github：
C# client http://bit.ly/2DNzpCY
C# backend http://bit.ly/2DMW8Lq
Node.js backend http://bit.ly/2EruIfh

3. 選Mobile App Quick Start有免費立即可用
Node.js後端

4. 預設新建Service Plan記得要選成免費的

5. 建立完成後進入Overview
網址copy起來

6. 瀏覽器可看到預設的建立完成頁面

7. 還有多少免費使用Quota會顯示在Azure
Portal，過一定時間後會重設

8. Azure Mobile App Quick Start範本
→預設建立起來的是Node.js + Sqlite的OData Web API架構
→Node.js的程式碼可以直接在Azure Portal網站上編輯
提供的功能：
→Easy Table：提供OData 格式的CRUD Web API，預設會建立一個TodoItem表
→Easy API：可用Node.js撰寫自訂格式的Web API

10. Easy API:
Step1

11. Easy API:
Step 2

12. Easy API:
Step 3

13. Easy API:
Step 4

14. Easy API:
Step 5

15. 建完可直接用Postman驗證

16. C# Backend專案直接從Visual Studio建立

17. 專案範本有bug，預設建立起來的一直是
.NET Framework v4.6，建議切換到v4.7

18. 預設也是建立
TodoItem
資料表
後端儲存架構
Entity Framework
Code-First

19. 佈署：下載Publish Profile

20. 在Visual Studio內匯入該Publish Profile的
方式佈署

21. Xamarin
Quick Start
專案
預設產生的專案格式太舊，無
法在現在的Visual Studio 2017
正常開啟執行
修正後可直接在Visual Studio
2017開啟的版本放在GitHub：
http://bit.ly/2BFIIPA

22. 記得改連線的URL

23. 前端Debug
Azure Mobile App Client端框架C#版有提供
HttpHandler機制，可在建立存取API用的物
件時，加入Handler來做客製化動作(log data,
add custom header)
也可用
Fiddler(https://www.telerik.com/fiddler )來做
中間擷取Http封包的方式來偵錯，但要在建
立存取API用的物件上設定使用系統default
proxy，否則Fiddler會抓不到。
GitHub的範例程式碼：http://bit.ly/2rOYSGQ

24. 其他注意事項及相關資源
→Node.js版後端可用內建Sqlite的Easy Table或是用MS SQL資料庫
→C#版後端的底層架構是搭建在
ASP.NET Web API + Entity Framework Code-First
配合MS SQL資料庫，但MS SQL在Azure上沒有免費層級的資源可使用，且也不
能使用Easy Tables和Easy APIs (Node.js後端獨享)。
→串自製使用者驗證而不是使用AD, Facebook, Google帳號的，取得使用者資訊、
取得群組資訊API、更新API token機制得自行實作且不能和原本提供的名稱一樣。
→較完整介紹各個功能的Online E-book: http://aka.ms/zumobook
→30 Days of Azure Mobile Apps: http://bit.ly/2DZaA6C

25. 範例：http://bit.ly/2GyHKIA
C# Xamarin +
C# Azure Mobile App
利用 .NET Standard
定義介面共享專案
【前後端密切整合】
真‧全端工程師