Awesome Tables把Google Sheet當作簡單好用的後端資料庫

Awesome Table從2010年就被開發出來，但在台灣很少人關注它。若要讓對於資料庫沒有概念的人能很容易將Google Sheet當作資料庫來用，做出有專業水準的資料呈現並且簡單兩三下就能套到網頁中，Awesome Table絕對是最佳選擇!

先參閱下列的資訊吧，絕對會對這個工具平台更有興趣!

• Template Gallery
• Who uses Awesome Table?
  
• 以Awesome Table做出的列表內容，在2016年每個月有5萬人次瀏覽20萬頁次。
  As of April 2016, this website, Script Examples, receives 50K users every month for a total of 200K pageviews.
• Awesome Table也有Chrome外掛套件，已有300萬使用者安裝。
  nearly 3 Millions users on the Google Apps Marketplace now, meaning that Awesome Table is in the top 15 of the most installed apps on this marketplace.
• 在Google+社群有著熱烈且持續的討論

目前為止，我們寫了七篇教學文件，這些都是非常實用的:

1. 用Awesome Table快速做出專業的師資列表介紹
2. 將Awesome Table嵌入Mobirise製作的網頁
3. 用Awesome Table快速做出最新消息列表
4. 用Awesome Table做的最新消息列表結合Google Form輸入
5. 用Awesome Table做的最新消息列表可用Google Form修改
6. 用Awesome Table的外掛Files Cabinet做出雲端硬碟文件列表
7. 用Awesome Table的外掛Photo Gallery做出雲端相簿列表

如果不想花時間每個都學會，而想直接用我們的範例來套用，那也沒關係，請參考下列內容:

1. 【直接套用版】用Awesome Table做出師資列表介紹 (Youtube影片)
2. 【直接套用版】用Awesome Table做的最新消息列表結合Google Form輸入 (Youtube影片)
3. 【直接套用版】用Awesome Table做的最新消息列表可用Google Form修改 (Youtube影片)
4. 【直接套用版】用Awesome Table做出歷屆專題成果 
5. 【直接套用版】用Awesome Table做出表現亮點列表  (Youtube影片)
6. 【直接套用版】用Awesome Table做出影音集錦 (Youtube影片)
7. 【直接套用版】用Awesome Table做出學期時刻 (Youtube影片)
8. 【直接套用版】用Awesome Table做出某學制課程 
9. 【直接套用版】用Awesome Table做出系友地圖 (Youtube影片)
10. 【半成品套用】用Awesome Table做出產品目錄

 

Read More

用Awesome Table快速做出專業的師資列表介紹

Awesome Table在2016年大改版之後，提供了不少專業版型(What is a template for?)，讓我們更容易建立網頁上要呈現的各種類型資料表列，真的太好用了!

來吧，就開始跟著下列步驟，幾分鐘就能做出一個有專業水準的「師資列表介紹」。


首先，將TEMPLATE GALLERY展開:

 

準備套用People Directory這個版型:

點擊右上角的USE TEMPLATE按鈕，就會開始將該版型後端所需要的Google Sheet檔案建立到你自己的雲端硬碟裡面。

然後，我們就可以開始編輯自己的這個View，右上角標示了DATA SOURCE是你雲端硬碟裡的Google Sheet檔案(資料來自Data Sheet之範圍A1:M)，點擊之可開啟做編輯。

在還沒搞懂這個Data Sheet各欄各列意義前，先記得將其設定與他人共用可以檢視(Share your Google Sheet):

再回到Awesome Table編輯這個View的畫面，右邊的VIEW CONFIGURATION設定中的Layout預設是"Filters, chart"，這個意思是左邊看到的版面安排上面先呈現可以做篩選查詢的一些元件(稱為Filters)，下面才是呈現依據資料所顯示的列表內容(稱為Chart)。原則上，若要讓那些Filters放在下面，就在Layout改選成"Chart, filters"。而若是要讓整個Filters消失，要從Google Sheet裡面去做設定，這部份稍後再說明。

而這個人員列表介紹的Chart可看到有左右兩邊的設計，左半部是所有人員的列表(只列出照片及姓名)，而點選其中一筆就會在右半部呈現該人員的更多資料。這個設計其實都藏在Template Sheet裡面喔，先看下列框起來的Directory部分，對應的是Template Sheet的A2格裡面的HTML碼(Configuring the template sheet)。如果你對HTML不陌生，一看就大概能懂為什麼Directory部分每一筆都是呈現照片、名、姓這三個欄位內容。

 

再看下列框起來的About部分，對應的是Template Sheet的B2格裡面的HTML碼。

由於既有欄位還無法完全滿足我們要設計的「師資列表介紹」，所以我們在Data Sheet增加了Title(C欄)、Office(F欄)、Education(J欄)、Laboratory(K欄)、Teaching(M欄)。而這些新增欄的第二列(Second row :  the data filters & parameters)都是設定為"Hidden" (Use the Hidden parameter to avoid displaying data from a column in your view)。另外，我們還將原本版面安排上面呈現篩選查詢的一些Filters，將對應的Last Name欄、Skills & Expertise欄的第二列也都改成設定為"Hidden"，讓整個篩選查詢的Filters都隱藏起來。

 同時，我們也在Template Sheet調整了A2、B2格的HTML碼(Configuring the template sheet)，將新增的欄位也在指定的位置呈現出來。

注意，因為新增欄而讓原位於C欄的Directory後退到D欄、J欄的About後退到O欄，於是，我們再回到Awesome Table編輯這個View的畫面，右邊的ADVANCED PARAMETERS設定中的Query語法必須配合改為"Select D,O,A,B,C,E,F,G,J,K,L,M,N"才行，這裡不多說，就是為了Show only some columns(詳見What is a query ?)，[2017.4.11修正]意思是先抓D欄與O欄來做呈現，但這兩欄都空著是因為對應到Template Sheet已定義Directory與About要呈現的HTML語法，於是呈現出我們看到的Chart部分，至於後續要抓A,B,C,E,F,G,J,K,L,M,N欄就是那些需要取得的資料並編排到Directory與About呈現，而其他不需要的欄位就不必Select來用了。

 


搞定上述步驟，以我們修改過的Google Sheet為後端資料來源所呈現的「師資列表介紹」就完成了，然後就將Awesome Table平台提供的Embed碼複製起來，嵌入自己網頁的HTML即可呈現(如此範例呈現於jsfiddle、jsbin)。注意，若你只是先嵌入自己電腦上的HTML檔而直接以Chrome開啟，將會因為新版Chrome對於安全控制而阻擋其程式的正確執行，但若使用Firefox開啟自己電腦上的HTML檔則能看到正確執行。

 

Read More

【直接套用版】用Awesome Table做出師資列表介紹

在你已經先登入Google帳號的情況下，利用此Google Sheet建立副本，並將其設定與他人共用可以檢視(Share your Google Sheet)，然後照著套用Awesome Table的People Directory版型並照著下列步驟進行設定。

Select D,R,A,B,C,E,F,G,J,K,L,M,N,O,P,Q

剩下要做的，就將自己的Google Sheet一筆一筆資料填上。特別提醒，若是打算引用放置在Google雲端硬碟上的照片，首先要記得將圖片設定與他人共用可以檢視，然後取得檔案共用連結存到N欄，但要將連結中的"open"改為"thumbnail"，也就是https://drive.google.com/thumbnail?id=.....，詳見Displaying images from Google Drive。

Read More

用Awesome Table快速做出最新消息列表

跟著下列步驟，幾分鐘就能做出一個「最新消息列表」。

首先，將TEMPLATE GALLERY展開:

 

準備套用Announcements List這個版型: 

點擊右上角的USE TEMPLATE按鈕，就會開始將該版型後端所需要的Google Sheet檔案建立到你自己的雲端硬碟裡面。

然後，我們就可以開始編輯自己的這個View，右上角標示了DATA SOURCE是你雲端硬碟裡的Google Sheet檔案(資料來自Articles Sheet之範圍A1:H)，點擊之可開啟做編輯。

在還沒搞懂這個Data Sheet各欄各列意義前，先記得將其設定與他人共用可以檢視(Share your Google Sheet):

再回到Awesome Table編輯這個View的畫面，右邊的VIEW CONFIGURATION設定中的Layout預設是"Filters, chart"，這個意思是左邊看到的版面安排上面先呈現可以做篩選查詢的一些元件(稱為Filters)，下面才是呈現依據資料所顯示的列表內容(稱為Chart)。在最新消息列表有這些Filters的設計會對使用者很方便，可以輸入文字或挑選項目來做篩選查詢，可以加快找尋需要的消息。

而這個最新消息列表的Chart設計，就藏在Template Sheet的A2格裡面的HTML碼(Configuring the template sheet)。如果你對HTML不陌生，一看就大概能懂為什麼News部分每一筆都是在左邊有個圖片(標示紫色底線的那四行HTML語法為每一則最新消息都呈現其分類圖示)，而文字內容就是依日期、標題、內文這三個欄位由上而下排列。

  

Articles Sheet的E欄(Apps)、F欄(Category)、G欄(Article date)，從第二列(Second row :  the data filters & parameters)的內容csvFilter、CategoryFilter、DateFilter，可以知道這三欄會呈現在Filters用以做篩選查詢，但第一列(First Row : the column headers)的標題如果不改成中文，就不夠直覺讓人使用Filters做篩選查詢，所以我們先把這三欄的第一列名稱都改成中文: 類別、色彩標示、公告日期。但是，在Template Sheet的A2格裡面的HTML碼所對應的欄名也要改成相同的中文名稱(Configuring the template sheet)，才能讓本來的Chart設計仍然正常呈現。

另外，Articles Sheet的E欄、F欄是設計成儲存格資料限定用下拉式清單擇定值，這可以從[資料]>[驗證清單]裡面的設定看到F欄的範圍是"List!D2:D20"，也就是以List Sheet裡的D2至D20格當作清單選擇項目。所以，F欄的儲存格下拉清單內容就是那三個項目。

為了要改成適合我們使用的，將List Sheet的D欄內容做些改變。同時，還要將Template Sheet的B2格最後面的三個CSS設定也改掉。

 

然後回到Article Sheet把前三筆資料的F欄改選成新的Red、Yellow、Green等值，就能看到最新消息列表的Chart前三筆還是能正常呈現紅、黃、綠標示。(至於第四筆之後的F欄若仍維持舊值，當然色彩標示就會出問題。)

至於Articles Sheet的E欄的[資料]>[驗證清單]裡面的設定範圍是"List!A:A"，也就是以List Sheet裡的A欄當作清單選擇項目，讓儲存格資料限定用下拉式清單擇定值。於是，我們將List Sheet裡的A欄重新定義適合的分類項目名稱，包含: 一般公告、演講公告、競賽公告、徵才公告、教師成就、學生表現、計畫成果等六個項目，而且也在B欄記錄了對應這六項的圖示網址。(附帶一提，如果你打算將圖檔放在Google雲端硬碟，可以參考Displaying images from Google Drive來取得圖檔網址。)

於是將Articles Sheet每一筆資料的A、B、E欄換上自己的內容，重點是在C2格有設定一個以VLOOKUP公式為主而能將E欄選擇分類後就自動從List Sheet找出對應圖示網址存於C欄。( ={"Hidden";ArrayFormula(VLOOKUP(E3:E;List!$A$2:$B;2; false))} )

再回到Awesome Table重新整理這個View的畫面，可以看到每一筆最新消息都有標示正確的類別圖示，而且在上方的Filters也可以看到可篩選查詢特定某些類別(csvFilter)或某些色彩標示(CategoryFilter)的消息。

最後，我們查看上述Awesome Table這個View的畫面，右邊的ADVANCED PARAMETERS設定中的Query語法是" SELECT * where A is not null ORDER BY G DESC"，這樣的語法相信不用多說了(詳見What is a query ?)，目前也不需要做任何修正。

搞定上述步驟，以我們修改過的Google Sheet為後端資料來源所呈現的「最新消息列表」就完成了，然後就將Awesome Table平台提供的Embed碼複製起來，嵌入自己網頁的HTML即可呈現(如此範例呈現於jsfiddle、jsbin)。注意，若你只是先嵌入自己電腦上的HTML檔而直接以Chrome開啟，將會因為新版Chrome對於安全控制而阻擋其程式的正確執行，但若使用Firefox開啟自己電腦上的HTML檔則能看到正確執行。

 

Read More