跳到主要內容

細看Apps Script的呼叫

上篇參考Google Apps Script Doc的部分,已經可以正常呼叫該url帶出的json資源
但是Google在Serving JSONP in Web Pages片段中提到的JSONP(可參考Wiki定義的JSONP)的方式...個人不太喜歡這個作法

雖然JSONP也是個滿普遍的作法...
但是正常來說,CORS(這邊有一篇Node.js實作CORS Server Side的文章)應該是比較正確的作法吧!
而且,上一篇實際也是用了ajax來呼叫資源成功
因此這次加上一些參數來實際了解Apps Script的Header包裝了些什麼東西...

HTTP/1.1 302 Moved Temporarily
Content-Type: text/html; charset=UTF-8
Access-Control-Allow-Origin: *
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Pragma: no-cache
Expires: Fri, 01 Jan 1990 00:00:00 GMT
Date: Sat, 20 Jul 2013 02:24:13 GMT
Set-Cookie: NID=67=R7b_RUOMh-I59....L6A8QpSgyAV;Domain=.google.com;Path=/;Expires=Sun, 19-Jan-2014 02:24:13 GMT;HttpOnly
Set-Cookie: S=maestro=inVYnnByljs; Domain=.google.com; Path=/; Secure; HttpOnly
P3P: CP="This is not a P3P policy! See http://www.google.com/support/accounts/bin/answer.py?hl=en&answer=151657 for more info."
X-Content-Type-Options: nosniff
X-Frame-Options: SAMEORIGIN
X-XSS-Protection: 1; mode=block
Server: GSE
Transfer-Encoding: chunked

HTTP/1.1 200 OK
Content-Type: application/json; charset=utf-8
Access-Control-Allow-Origin: *
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Pragma: no-cache
Expires: Fri, 01 Jan 1990 00:00:00 GMT
Date: Sat, 20 Jul 2013 02:24:14 GMT
Set-Cookie: NID=67=aJjVSxPeIV5N1p...lJnWx2tGzMayBU9HwRjID3vAid-D;Domain=.googleusercontent.com;Path=/;Expires=Sun, 19-Jan-2014 02:24:14 GMT;HttpOnly
P3P: CP="This is not a P3P policy! See http://www.google.com/support/accounts/bin/answer.py?hl=en&answer=151657 for more info."
X-Content-Type-Options: nosniff
X-Frame-Options: SAMEORIGIN
X-XSS-Protection: 1; mode=block
Server: GSE
Transfer-Encoding: chunked

{"name":["test1234"]}


解讀上面的回傳...
透過curl -i是為了讓回傳的資訊帶出header,而header中透漏了兩件事情:
  1. Ajax輸入的網址,再第一次回傳時,是一個302的redirect動作,所以之前使用curl -L的方式來取回實際302所指到location的資源
  2. 紅色字處的"Access-Control-Allow-Origin: *",說明Apps Script已經幫我們考慮到CORS的問題(原則上是不太需要JSONP動作的)
因此,前端的使用者,可以開始大量的使用Apps Script啦!!

簡單講一下想到的應用範圍:
  • 結合Drive應用,做排成、資料顯示、互動...等
  • 結合Github Page, Cloud CMS等軟體,這些純靜態HTML的頁面也可以有動態的結合
  • 結合Mobile的應用,讓Apps Script當做Mobile的Server端,資料庫資源部分則可以使用Apps Script呼叫RDB, NDB, BigQuery...等
  • 結合Chrome Extension的應用...
感覺很多∼Startup是不是更容易啦  :D

留言

這個網誌中的熱門文章

Google指令碼基本操作介紹 - Web Server篇

Google的指令碼是什麼東西呢?!原則上他就是Google的一份靜態檔案,但是透過Google的雲端服務平台的一些能力,將靜態檔案內的scriptlet片段拉到Google的後端作運算,寫起來就像在寫JavaScript(這邊說Node.js可能比較貼切,因為同為server side language)或JSP,而在scriptlet片段中,則可以操作許多Google的API服務,甚至他提供你連接JDBC的能力、URL呼叫的能力...等,宛如就是一套完整的雲端程式語言(這樣說應該不為過拉,這真是個創新!),有並駕於App Engine的氣勢喔!
Google指令碼的範圍很廣,筆者也仍在摸索中,之前介紹過透過Sheet+指令碼做一個簡單的URL監控(這裡),而本篇簡單介紹一下指令碼如何製作一個Web Server(嚴格說起來是Web Page拉,但是具備Server端運作功能喔!)。您將可以體驗到No-Hosting Web Server的威力!
指令碼是Google Drive的一個服務,Google將指令碼(Code)以檔案方式寄存在Drive中,類似的靜態檔案服務的應用,最近滿火紅的!

首先開啟指令碼時候,選擇"作為網路應用程式的指令碼",檔案開啟後,會有愈設定程式碼片段供編輯


程式碼片段大致上如下,是一個doGet function,Web base的指令碼需要認得doGet()作為server的進入點 如果選擇到空白專案的話,只要把doGet function建上即可

作為一個Cloud IDE,Google當然也有把Code Hint擺上來,透過簡單的提示,寫啟程是來就更容易拉!

而Web部分物件的建立主要是透過HtmlService這個模組來進行操作,我們利用他來output html, load static html page, load template html page..等,範例如下:
Output HTML: // Script-as-app template.
function doGet(e) {
  return HtmlService.createHtmlOutput("<h1>HELLO!</h1>");
}
透過上HtmlService的createHtmlOutput的功能,…

透過Google Apps Script結合Google Form做即時郵件通知

體驗過Google Apps Script的功能後,也發現他結合GmailApps的模組GmailApps的應用可以用在表單填寫完成後,做發信的通知 例如您開立了一個訂購的表單,為了要在第一時間通知商家有訂單進入 就可以直接呼叫Gmail做發信的通知,讓手持Smart Phone的我們可以很快的知道生意上門了!
下面規劃三個function,其中: onCommit():為form commit時候觸發的function,需要掛載於form commit trigger上
jsonArrToTable():目的將json array解析成為一個Table
getLastRowTable():目的將整個table的回傳過濾為剩下第一筆(表頭,含有Form的欄位說明)與最後一筆(原則上就是剛剛送出的那一筆表單)完整程式碼如下: function onCommit(){
  var sheet = SpreadsheetApp.getActiveSheet();
  var rows = sheet.getDataRange();
  var numRows = rows.getNumRows();
  var values = rows.getValues();
  var content = getLastRowTable(values);
  var htmlBody = "Hi Admin: <br/><br/>有訂單拉,檢查一下吧! <br/><br/>" + content + '<br/><br/>Send by Google Apps';
  GmailApp.sendEmail(
    "your-email-address@gmail.com", 
    "Order Confirm Notice", 
    htmlBody, 
    {from: 'from-email-address@gmail.com', htmlBody:htmlBody}
  ); 
}
function getLastRowTable(arr){
  var newArr = new Array();
  newArr.p…

透過Google Cloud Storage建置您的靜態網站

大家知道靜態網站的服務越來越先進,透過Github Page或是S3都可以快速的建置好可以提供服務的靜態網站,這次要介紹的是Google Cloud Storage上建置靜態網站的功能...
首先我們先準備一個美美的靜態網站,不少人可能想到用PC的網頁編輯器,我這邊是使用Jetstrap的雲端服務來拉出基本的版型:


左上方的是提供下載專案的地方,下載之後可以解壓縮後看到裡面的html跟css相關檔案


接下來就是透過Google Cloud Storage來把這個些檔案變成一個網站囖,設定相當簡單...
Step 1 : 在Google Cloud Storage建置您的domain bucket,並把相關檔案上傳到這個bucket裡面
這邊需要先有Cloud Platform Project,並且開通好Cloud Storage的服務,這邊不贅述這些設定... 我在這邊建立的是gsweb.micloud.tw這個網站,因此bucket用這個命名(這邊必須注意,Google會針對domain name進行認證,如果domain name非自己所屬,或被別人註冊了,將無法使用該domain name來建立bucket),並且將檔案上傳,主頁修改為index.html。

這邊完成後,仍需要在最右邊的"SHARED PUBLICLY"的地方勾選發佈,讓全世界的人可以看到您的網站...
Step 2 : 透過gcutil將bucket變成一個網站
下面指令可以讓您設定一個bucket成為靜態網站,並且指定一個主頁,以及錯誤頁面,相關的help可以透過gsutil help setwebcfg來檢視...
$ gsutil web set -m index.html -e 404.html gs://gsweb.micloud.tw



Step 3 : 設定Domain name CNAME對應
接下來您需要到您的DNS server上指定一筆CNAME記錄,將yourdomain.com對應到c.storage.googleapis.com,指定完成後,在nslookup的查詢會類似這樣:


這也表示您的網站應該已經生效了: