2015年5月19日 星期二

Hybrid Apps開發系列之7.2:SideMenu側欄選單(Spotify歌曲試聽範例)

隨著Apps功能越來越豐富,為讓使用者能有較佳的介面操作體驗,通常會以「側欄選單」(sidemenu, 如圖) 的方式解決。
圖1. 側欄選單
「側欄選單」和「頁籤」(參考Hybrid Apps開發系列之4.4:多頁面App程式 (天氣app-非線上版))一樣都是屬於主頁面類型,實作時會將「側欄選單」所在頁面設定為parent state,其他頁面則共用「側欄選單」所在的parent state。

建立「側欄選單」


2015年5月13日 星期三

Hybrid Apps開發系列之6.3:使用Parse User實作雲端會員管理機制

[Parse.com服務已終止]延續前文Hybrid Apps開發系列之5.5:以REST API存取Parse雲端資料庫 ,本文繼續介紹Parse提供的會員管理機制:Parse User。透過此Parse內建的class,註冊、登入等會員基本管理,都非常簡單。

Parse User是Parse App內建的class,只要建立app,就會自動產生。Parse User class預設有9個欄位如下圖所示,視需求可自行擴充。
圖1. Parse app自動產生User class,內有username, password, email等欄位
以下以EnrollApp的雲端資料庫(如下圖)為例,說明如何以Parse REST API進行會員註冊與登入的動作。
圖2. EnrollApp雲端資料庫

2015年5月9日 星期六

Hybrid Apps開發系列之6.2:使用Google Maps API顯示地圖

地圖服務是行動apps最常提供的功能。本文介紹如何在Ionic Apps裡使用Google Maps API顯示地圖。
 圖1. 顯示Google Map

前置動作:產生Google API Key

Google API的使用方式如下:
http://maps.googleapis.com/maps/api/js?key=[你的API金鑰]&sensor=true
因此必須先取得API金鑰,步驟如下:
  1. 前往Google Developers Console (https://console.developers.google.com/)。
  2. 以gmail帳號登入後,點選「建立專案」,並輸入專案名稱。
  3. 進到專案頁面,選取左側選單「API和驗證」項目下的「API」,從右邊各種API列表中選取Google Maps JavaScript API,並在下一個畫面啟動之。
  4. 在「API和驗證」項目下的「憑證」頁面,點選「建立新的金鑰」,選擇「瀏覽器金鑰」,並輸入http:/localhost:8100/*。
  5. 將「API 金鑰」複製起來,放到index.html引用Google Maps API的地方,例如:
  6. <script src="http://maps.googleapis.com/maps/api/js?key=[你的API 金鑰]&sensor=true"></script>

2015年5月7日 星期四

Hybrid Apps開發系列之6.1:登入授權OAuth以Facebook為例

OAuth是一種讓第三方取得某用戶登入授權,進而存取該用戶在某網站上所擁有資源的開放標準。簡單說,目前各大網站例如Facebook, Google, Twitter等,都有OAuth登入授權機制,如果想在你的apps裡使用這些網站的資源,便需要實做OAuth。對Ionic Apps而言,OAuth登入授權可使用ngCordova OAuth外掛。該外掛支援Fackbook, Google, Dropbox, Twitter等許多網路服務登入授權,用法也很簡單。底下以Facebook登入授權為例,說明如何在Ionic Apps上取得Facebook內容。

Facebook前置作業:create Facebook App

以OAuth登入前,必須先在Facebook建立對應的App。步驟簡述如下:
  1. 登入FB,前往「管理應用程式」頁面(https://developers.facebook.com/)。
  2. 選取My Apps / Add a New App,接著在跳出的頁面裡選擇「WWW網站」類型。
  3. 圖1.App類型選擇WWW網站

2015年5月4日 星期一

Hybrid Apps開發系列之5.5:以REST API存取Parse雲端資料庫

[Parse.com服務已終止]SQLite是手機內建的資料庫,僅適合用來儲存local data。「資料庫伺服器」或是「網路資料庫服務」對許多apps而言,才是儲存資料的正解。因此,本文以Parse雲端資料庫服務為例,使用Parse REST API存取雲端資料庫。

前置作業(1/4):在parse.com建立App

透過API使用Parse雲端資料庫必須先在Parse.com註冊、建立App、並取得App Keys才能順利使用。Parse的帳號啟用之後,點選"Create a new App"建立App,切換到Dashboard,便可看到已經建立的所有Apps,如下圖:
圖1.Parse.com提供雲端資料庫服務

2015年5月3日 星期日

Hybrid Apps開發系列之5.4:表單輸入驗證 (Form validation)

表單輸入驗證 (form validation) 是資料寫入資料庫的第一道檢查關卡,程式必須確認使用者已經輸入必要的資料,且一切格式都符合要求。Ionic專案的表單輸入驗證是採用AngularJS的驗證機制,基本程式碼如下:

<form name="form" novalidate>帳號:
  <input type="text" name="user" ng-model="username" required  />
  <span ng-show="form.user.$error.required">帳號不得為空</span>

  <input ng-disabled="form.user.$dirty && form.user.$invalid" type="submit" />
</form>

  • 第1行:由於驗證結果(例如格式錯誤、未填寫等)必須透過表單存取,故必須設定name屬性,此處自訂表單的名稱為"form",供後續存取驗證結果。另外novalidate表示關閉browser內定的驗證機制,由AngularJS進行驗證。
  • 第2行:每個要做輸入驗證的欄位,都必須自訂name屬性值,此處自訂為"user",如為必要欄位,則必須設定required。
  • 第3行:驗證錯誤訊息。form.user代表第2行帳號填寫欄位。$error則是驗證結果出現錯誤。AngularJS內建了一些驗證程序,例如.requried會負責驗證有無填寫,因此使用$error.required代表未填寫。