Advertisement
  1. Code
  2. Ionic

Ionic入門:Cordova

by
Read Time:9 minsLanguages:

Chinese (Traditional) (中文(繁體)) translation by Qiang Ji (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Ionic入門系列的最後一部分中,你將了解如何利用Cordova為你的應用添加設備硬件功能。 我們將介紹如何使用地理位置等功能,並向你展示如何與ngCordova庫集成以完成我們的應用程序。 在我們開始之前你需要確保已經為Ionic設置了你的計算機,並確保你還設置了特定於平台的工具。

項目文件

在GitHub上可找到教程項目文件。 此應用程序的基本用途是,它顯示一些關於你附近設施的信息。 在本教程中,我們使此應用程序擁有了查找當前位置並顯示附近結果的能力。 你可以在這裡看到工作示例

如果你克隆此項目,你也可以使用Git和運行git checkout -b start來接著編寫代碼。 這個課程的編碼從最後一篇教程(Ionic入門:導航)結束處開始。 你还可以预览此起始点

設置Cordova

在我們編寫任何代碼之前,我們需要設置我們的項目。 Ionic已經建立了一個基本的Cordova項目,但是我們需要自己初始化一些額外的東西。

首先,我們需要安裝ngCordova庫。 這是一個Angular模塊,它讓使用一些最流行的Cordova插件變得更容易。 (雖然不是所有的插件ngCordova都支持。)Bower 就是用來安裝此依賴關係的。

其次,我們需要為我們的項目添加一個平台。 這將是iosandroid(或兩者都添加!),這取決於你選擇支持的平台。 我在我的例子中使用了ios,但你可以用android替換它,以在android裡實現相同的應用程序。

第三,我們將為Cordova安裝geolocation插件。 這可以增強應用程序獲取用戶的當前位置(需要權限)的能力。 您可以在https://cordova.apache.org/plugins/查看所有插件的目錄,以及如何設置每個插件的詳細信息。

以下命令應從項目的根目錄運行,以執行這三個設置步驟。

一旦完成,我們需要給應用程序添加ngCordova,以便它被Ionic識別。 打開www/index.html文件,並在ionic.bundle.js文件後添加下面幾行代碼。

然後我們需要更新www/js/app.js文件來收入ngCordova模塊。 第一行應該被更新,顯示如下。

現在我們已經更新了依賴,我們的項目已經準備好使用geolocation插件。 下一步是設置一個新的視圖並開始使用它!

添加Location視圖

我們將為該應用創建一個新的首頁。 此屏幕顯示有關使用用戶當前位置查找附近地點的消息。 他們將點擊一個按鈕以確認他們希望此應用訪問他們的位置,然後查看反映其當前位置的地點目錄。

用戶位置數據有關隱私,應用程序在收集時應小心,所以移動設備不允許應用自動訪問地理位置數據。 應用程序必須請求權限(這可以被隨時拒絕或撤消),所以在使用需要權限的某些插件時,你需要牢記這一點。 (仔細使用該數據,並避免違反用戶的隱私!)

首先,我们将为location视图创建模板。 创建一个新文件www/views/location/location.html,并包括以下内容。 (我们应该从前面的教程中熟悉这个,但它本质上是创建一个新的视图与一个按钮,调用我们的控制器中的一个方法,我们将在下面定义这个方法。)

我們現在將創建控制器外殼,然後添加一個方法來處理用戶位置的獲取。 創建另一個新文件www/views/location/location.js,並包含以下代碼。 請務必在www/index.html文件中加入此文件的鏈接。

當下,我們有一個新的location視圖,但該按鈕還不能工作。 你可以通過運行ionic serve從你的瀏覽器中預覽該應用程序。 如果你去http://location:8100/#/location,你應該能看到這個視圖。

你會注意到在控制器構造函數中有一個名為$cordovaGeolocation的服務,它將向我們提供對用戶位置數據的訪問。 其餘的服務注入只是為了處理與位置數據相關的業務邏輯。

在此應用中獲取用戶的位置實際上涉及兩個步驟,首先是從Cordova插件獲取地理位置數據(僅返回緯度和經度值),然後在Google Geocode API中執行反向查找以找到當前的位置(這與我們的其他API調用工作良好)。

將以下方法添加到控制器,我們將在下面詳細介紹。

第一件事是使用$ionicLoading服務在檢測到當前位置時顯示加載指示器。

然後我們使用$cordovaGeoposition服務,它有一個名為getPosition的方法,這是用來獲取當前位置的。 我們指定選項,這是合理的默認值。 你可以閱讀文檔中的其它getPosition選項。

getPosition方法返回一個promise,所以我們使用then來處理響應。 假設用戶同意共享他們的位置,它會返回給我們一個對象,這包含緯度和經度的坐標。 然後,我們將使用這些值調用API執行反向地址解析,以查找最接近的位置。 如果它失敗了,緩存處理程序將使用$ionicPopup顯示一個失敗的警報。

$http服務用於查找反向地址,如果它成功,我們需要檢查是否返回任何結果。 如果找到一個,則更新Geolocation服務值,並使用$state.go將用戶重定向到地點目錄。 否則,它使用$ionicPopup顯示一條警告,說找不到任何地方。

這就是我們必須做的,以用來啟用在我們的應用程序中的設備的地理位置功能。 但是,我們仍然需要對location視圖和app.js文件進行一些小的調整。

首先打開www/js/app.js文件並將Geolocation服務更新為以下內容。 這有必要去清除我們以前硬編碼到芝加哥地理位置服務的默認值,並啟用消化週期來正確地同步更改。

然後,通過將最後一個配置行更新為以下內容來修改應用程序的默認視圖。 這將使應用程序在location視圖上被啟動。

最後,我們要調整location視圖,使其不再緩存(因此始終反映更新的位置),如果找不到位置,則重定向到location視圖。 打開www/views/places/places.html並更新第一行代碼,如下。

然後打開www/views/places/places.js並更新控制器的開始部分以匹配以下內容。

我們在控制器啟動之前進行快速檢查,以檢測是否找到地理位置,如果沒有找到,我們將重定向到該位置去重置它。

這實際上也可在你的瀏覽器中工作,因為瀏覽器支持地理位置功能。 在下一節中,我們將簡要介紹如何在模擬器中預覽應用程序。

在模擬器中預覽

Ionic CLI有一個命令,可以讓你輕鬆地在設備的軟件版本中模擬應用程序的使用。 並不是所有的硬件功能都可用,但許多都可以被模擬,包括地理位置。

運行ionic emulate ios,Ionic將啟動模擬器並加載應用程序(類似於Android)。 如果你看到有報錯,可能是你的機器對你試圖模擬的平台尚未完全地設置好。

此命令將啟動平台操作系統的真實版本,並模擬一個非常現實的設備。 對於沒有實際設備進行測試的用戶,這是一種快速驗證不同設備與你應用程序配合使用的好方法。

你可能需要在一些時候重置模擬器,以確保你所做的更改會體現在模擬器裡。 例如,如果你拒絕應用程序的地理位置權限,你將需要找到設置頁面來允許以後再修改,或者你可以重置模擬器來刪除所有的設置。

結論

在本教程中,我們討論瞭如何使用Cordova創建一個能利用硬件功能和傳感器的應用程序。 使用ngCordova,很容易在Ionic應用程序中訪問此信息。 你現在可以訪問設備功能,如相機,地理位置,指紋讀取器和日曆。 如果可能,你應該利用ngCordova庫來使與硬件集成變的容易,但還有其他Cordova插件並沒有包含在ngCordova庫中。

這也是Ionic入門系列的一個總結。 你現在應該掌握了Ionic的基本知識,並能夠運用它進行更多的開發。 如果你有更多的興趣,請查閱我們的其他課程和Ionic框架的教程。


关注我们的公众号
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.