最近一直想要試作一些個人用的 APP,然後試試看用 ionic 3 寫看看,看能不能每天自己用,然後慢慢改善、慢慢收集一些資料,做一些小功能的試做,不過用 ionic 3 開發,真的遇到蠻多問題的,像是我就不知道資料庫應該怎麼抉擇,一開始用 SQLite 結果開發起來好綁手綁腳的 QQ
因為 ionic 2 之後是根據 Angular 架構設計的,所以兩者的程式碼和檔案架構會很像,我文章中 ionic 和 Angular 可能會切換來切換去的,請見諒。
網路上 Google “使用 Google 試算表當作資料庫” 就可以找到很多資源,不過大家都是寫說怎麼使用 jQuery,因為寫網頁,用 jQuery 是最省事的,但是 Angular 本身就有 http 的模組可以使用,不必再靠 jQuery,但是我在參考網路上資源時遇到一些問題,後來解決了,分享給大家。
Angular Service
這裡不多做 Angular Service 的介紹,只要知道 Angular 的 Service 主要是用來存取 App 內資料的,不管是透過 API 還是將資料寫死在 Service 都是常見的用法。
1 | public addTrans(params): Observable<boolean>{ |
addTrans() 是一個將資料傳送給 Google App Script API 的函式。
Observable 是 Angular 使用 RXJS 經常會用到的物件類型,可以當作 Promise 進階應用。
this.http.post() 就是 Http Request 方法(method)指定為 POST 的函式,至少要傳兩個參數,第一個為 url,第二個為 data
JSON.stringify() 建議將參數使用字串的方式傳給 Google App Script API,也可以等後面介紹 Google App Script 實在自行決定。
map(res=> res.json()) 將 Google App Script API 回傳的結果以 json 格式回傳給呼叫 addTrans() 的對象。
Google 試算表
在自己的 Google 雲端硬碟建立一個試算表,記下該試算表的 id
Google App Script
邏輯和網路上搜尋前幾名的做法一樣
- 先取得 Angular Service 傳進來的參數
- 設定要儲存的試算表 ID 和 試算表工作表名稱
- 儲存資料
差別主要在於取得參數,原本是 e.parameters,要改為 e.postData.contents,程式碼如下:
1 | function doPost(e) { |
JSON.parse()
因爲我 Angular Service 傳進來是 JSON 格式的字串,所以可以使用 JSON.parse() 再轉回 JSON 的物件,後面要取得比較容易。
e.postData.contents
我是用 Google App Script 的 console.log() 才找到我傳進來資料的結構,才知道要從 postData.contents 取得
Google App Script Log
Access-Control-Allow-Origin
因為是使用 ionic 的 serve 在運行,會運行在 http:localhost:8100 下,所以會遇到此情況,你可以選擇直接 build 成 App,應該就不會遇到此情況,可是每次 build 都要一陣子,你就可以使用 Proxy 解決這問題。
ionic.config.json
這是 ionic serve 在運行時會來參考的一個設定檔,加入以下訊息:
1 | "proxies": [ |
其他設定不用動到,加入後記得要符合 json 格式
Angular Service
1 | public addTrans(params): Observable<boolean>{ |
https://script.google.com/ 改為 /goto
這樣 localhost:8100 的 domain 就會被認為是在 script.google.com 下向 API 執行 request
參考資料
用 Google Apps Script 操作試算表 (1)製作資料庫 + 寫入資料
The Ionic 2 proxy
Google App Script Log