iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 18
1
Cloud

Xamarin.Forms, ASP.NET Core WEB API搭配AZURE服務與資料庫服務整合應用實例系列 第 18

Day18 - Azure Mobile App & Azure Notification Hubs Part1 Windows篇

  • 分享至 

  • xImage
  •  

首先在Azure Portal, 開啟應用程式服務, 按下新增後, 找到Notification Hub如下圖所示
http://ithelp.ithome.com.tw/upload/images/20161227/20103333AhDOjC4oks.png

出現Notification Hub視窗後按下建立
http://ithelp.ithome.com.tw/upload/images/20161227/20103333GtfkQFRk4D.png

填好相關資訊後, 按下建立
http://ithelp.ithome.com.tw/upload/images/20161227/20103333ecxKUVucah.png

之後按下推播通知服務
http://ithelp.ithome.com.tw/upload/images/20161227/20103333NKIpZ09KUO.png

點選Windows(WNS), 出現必填的兩個關鍵道具, 套件SID3與安全性金鑰, 這兩個必須到Windows開發人員網站取得
http://ithelp.ithome.com.tw/upload/images/20161227/20103333c1KFkazLR3.png

接著到Windows Developer Center取得上述兩項關鍵道具, https://dev.windows.com, 點擊Create a new app
http://ithelp.ithome.com.tw/upload/images/20161227/201033339R5p6HcaWs.png

點選Services下的Push notification
http://ithelp.ithome.com.tw/upload/images/20161227/2010333398mUuDfPXJ.png

再點選WNS/MPNS
http://ithelp.ithome.com.tw/upload/images/20161227/20103333EpLXkbJNUq.png

最後會看到Live Services site連結然後點下, 這個UX設計真的是好繞啊,
http://ithelp.ithome.com.tw/upload/images/20161227/20103333sh1kMSLlVw.png

接著開始輸入Name欄位, 然後把Application Secrets記下來, 這個就是安全性金鑰
http://ithelp.ithome.com.tw/upload/images/20161227/20103333nZfXcOGC9s.png

接著將畫面往下捲動, 會看到SID如紅框所示, 也要記下來
http://ithelp.ithome.com.tw/upload/images/20161227/20103333NppZbwtTTh.png

捲動到最後按下Save
http://ithelp.ithome.com.tw/upload/images/20161227/201033332wMkz65r3i.png

接著到應用程式服務新增一個Azure Mobile Apps, 這個服務可以用來做為
Xamarin.Forms與Azure Notification Hubs中介的橋樑
http://ithelp.ithome.com.tw/upload/images/20161228/20103333HMGn2ZXyEo.png

建立完成之後, 點選概觀, 把URL記下, 之後需要在Xamarin.Forms當成參數輸入
http://ithelp.ithome.com.tw/upload/images/20161228/20103333ntGDChBBSY.png

接著往下捲動, 找到推送, 按下連接如下紅框所示
http://ithelp.ithome.com.tw/upload/images/20161228/20103333Jp29LggXqA.png

點選剛剛在Notification Hub建立的服務
http://ithelp.ithome.com.tw/upload/images/20161228/201033332gqxXSWn7d.png

完成畫面如下
http://ithelp.ithome.com.tw/upload/images/20161228/20103333maQUPGvi1L.png

接著在Visual Studio打開在Day02建立的測試專案, 因為UWP, Windows與Windows Phone接受訊息的方式均雷同, 這邊就以Windows Phone當範例練習, 所以點選Windows Phone專案, 按下右鍵, 找到Store後,再點選Associate App with the Store, 如下圖所示
http://ithelp.ithome.com.tw/upload/images/20161228/20103333IWtth44eMj.png

接著按下Next
http://ithelp.ithome.com.tw/upload/images/20161228/20103333xMbpBQM9jN.png

選擇在Windows Developer Center建立的App後, 按下Next
http://ithelp.ithome.com.tw/upload/images/20161228/20103333L8GXO4vWCu.png

最後按下Associate
http://ithelp.ithome.com.tw/upload/images/20161228/20103333cdtUV3BUYN.png

接著開啟NuGet, 搜尋Microsoft.Azure.Mobile.Client然後安裝
http://ithelp.ithome.com.tw/upload/images/20161228/201033338bj8X3NBrx.png

在Windows Phone專案裡, 打開Package.appxmanifest, 將Toast capable設為Yes
http://ithelp.ithome.com.tw/upload/images/20161228/20103333sJKyCY7i0F.png

經過冗長的設定後, 終於可以開始寫Code了, 在Windows Phone專案裡, 打開App.xaml.cs, 先加入底下參考
...
using Newtonsoft.Json.Linq;
using System.Threading.Tasks;
using Windows.Networking.PushNotifications;
using Microsoft.WindowsAzure.MobileServices;
...
http://ithelp.ithome.com.tw/upload/images/20161228/201033339zaWzfa4m0.png

然後App.xaml.cs最下方加入底下的函式InitNotificationsAsync(), 而紅框就是輸入Azure Mobile App拿到的URL
http://ithelp.ithome.com.tw/upload/images/20161228/20103333d0Rom1ODwW.png

在OnLaunched函式末端, 加入上述的InitNotificationsAsync()
http://ithelp.ithome.com.tw/upload/images/20161228/20103333zjWPhWBAVF.png

接著將Windows Phone專案設為起始專案用模擬器跑起來
http://ithelp.ithome.com.tw/upload/images/20161228/20103333zP2spEUyCO.png

接著回到Azure 的Notification Hub,點選測試傳送, 設定如下紅框所示
http://ithelp.ithome.com.tw/upload/images/20161228/201033331jPdhAUfWr.png

捲動至下方, 按下傳送
http://ithelp.ithome.com.tw/upload/images/20161228/20103333Z4e9qwaiVA.png

就可以看到模擬器裡收到訊息了
http://ithelp.ithome.com.tw/upload/images/20161228/201033334TAvxFp55w.png

後記: 這個設定也是搞了半天, code寫不到幾行, 只能說Azure包的太好. 下一篇Android設定應該更煩人吧/images/emoticon/emoticon10.gif


上一篇
Day17 - Azure Blob storage Part2 Azure上下傳檔案測試
下一篇
Day19 - Azure Mobile App & Azure Notification Hubs Part2 Android篇
系列文
Xamarin.Forms, ASP.NET Core WEB API搭配AZURE服務與資料庫服務整合應用實例32
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言