iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 10
0
Cloud

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

Day27 – Xamarin.Forms新增打卡資料 Part1加入GPS打卡功能

主畫面已經製作完成, 接下來要開發新增一筆打卡資料功能, 要能打卡就必須取得GPS的經緯度座標, 搜尋了一下, 大神James開發了GeolocatorPlugin的Xamarin.Forms外掛, 位置如下
https://github.com/jamesmontemagno/GeolocatorPlugin

在NuGet搜尋Xam.Plugin.Geolocator後安裝
http://ithelp.ithome.com.tw/upload/images/20170110/20103333GcW7IqUjHW.png

另外在IOS要取得位置, 必須加入NSLocationWhenInUseUsageDescription或NSLocationAlwaysUsageDescription的設定, 根據James說明如下
http://ithelp.ithome.com.tw/upload/images/20170110/20103333ndHs60J42x.png

所以到IOS專案下找到 Info.plist如下, 用筆記本打開修改
http://ithelp.ithome.com.tw/upload/images/20170110/20103333rtMIAlnBci.png

修改完成後如下
http://ithelp.ithome.com.tw/upload/images/20170110/201033339vJxBcBTr0.png

在Portable專案中, 新增一個CheckInAddPage.xaml
http://ithelp.ithome.com.tw/upload/images/20170110/20103333iPIIVaZ3ct.png

打開CheckInAddPage.xaml, 將程式碼修改如下
http://ithelp.ithome.com.tw/upload/images/20170110/20103333PXl0rJVOcZ.png

打開CheckInAddPage.xaml.cs, 將程式碼修改如下
http://ithelp.ithome.com.tw/upload/images/20170110/20103333OoLXIVWKW9.png
http://ithelp.ithome.com.tw/upload/images/20170110/20103333MkkKFNkVjG.png

打開MainPage.xaml, 新增一個Add New CheckIn的按鈕
http://ithelp.ithome.com.tw/upload/images/20170110/20103333rA10VQ5lZm.png

打開MainPage.xaml.cs, 新增一個btnAdd_Clicked函式, 來處理當按鈕被按下時的觸發事件, 就是導向新增打卡資料頁面
http://ithelp.ithome.com.tw/upload/images/20170110/20103333HPyhTxgz0c.png

跑在模擬器的畫面如下, 按下Add New CheckIn
http://ithelp.ithome.com.tw/upload/images/20170110/20103333WxXx2i2NYz.png

輸入測試文字後按下Add
http://ithelp.ithome.com.tw/upload/images/20170110/20103333girYCzLWxE.png

最後顯示出抓到的經緯度
http://ithelp.ithome.com.tw/upload/images/20170110/20103333AbNZvEXjBs.png

到Azure SQL Database檢查看是否有正確寫入?
http://ithelp.ithome.com.tw/upload/images/20170110/20103333S2ZVhDjEv9.png

後記: 沒想到抓Location比想像中好寫很多/images/emoticon/emoticon37.gif


上一篇
Day26 – Xamarin.Forms加入日曆控制項
下一篇
Day28 – Xamarin.Forms新增打卡資料 Part2加入拍照上傳與相簿上傳功能
系列文
Xamarin.Forms, ASP.NET Core WEB API搭配AZURE的網站服務與資料庫服務整合應用實例32
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言