Apps Script用Sheet生成動態網頁(15): 使用React動態網頁範本

-

在前14篇中我們已經學到如何使用Apps Script來操作Google Sheet作為資料庫和Google Dirve資料儲存，接著我們就進入現代WebApp應用範疇，加入React並整合更多功能。

之後Apps Script與React我都會放在 Mirochiu/ReactOnAppsScript 供參考，是使用Elisha Nuchi的範本為基礎我再調改成預設使用webapp的版本。十分感謝由Elisha Nuchi所貢獻的良好範本。

事前準備

之前使用的工具只有Google Apps Script版本發布工具clasp，現在要用React就需要安裝很多相關套件，這時候就需要用到套件管理系統。在node.js這方面我習慣使用yarn套件管理程式，所以的範本裡已經改成用yarn來管理。關於yarn的安裝方式可以參考我之前在Ubuntu20.04上的安裝經驗。

進入專案目錄，使用yarn指令下載相關套件。

設定專案

請先使用yarn login來進行clasp的登入。

接著你有兩種方式設定專案：
  1. 建立新的AppsScript專案
    可以使用yarn setup來幫你產生新的Apps Script專案，預設創立的名稱為React Webapp。
  2. 使用既有Apps Script專案
    修改專案根目錄下.clasp.json和appsscript.json檔案成你的AppsScript專案的內容。

以一個webapp來說.clasp.json會紀錄scriptId和clasp發布檔案的路徑，請修改裡頭的scriptId。

{"scriptId":"1xpui...8R7y","rootDir":"./dist"}

appsscript.json預設應為

{
"timeZone": "America/New_York",
"dependencies": {},
"exceptionLogging": "STACKDRIVER",
"oauthScopes": [],
"runtimeVersion": "V8",
"webapp": {
"executeAs": "USER_DEPLOYING",
"access": "ANYONE_ANONYMOUS"
}
}

發布專案

你可以使用yarn deploy發布這個AppsScript專案

然後用yarn open來選擇開啟你發布的網站(開啟預設的瀏覽器)

展示畫面

在展示畫面中按下Press Me按鈕，會與Server端取的當前的AppsScript URL

程式碼位置

在Elisha Nuchi的範本中原本提供3種前端範例，為了避免混淆，這裡僅留下demo-bootstrap的這個範例，你可以在專案路徑的src/client中找到前端的程式碼範例。而後端的程式碼範例則是在src/server中。

Coding Style

由於Elisha Nuchi原本的範本中已套用了Coding Style，例如會用空白取代TAB，TAB大小為2格空白等等，所以如果你要套用自己的，可以再自行修改，我這裡因為VSCode預設編輯設定不太一樣，所以已經先將這兩個設定寫到.vscode/settings.json內

"editor.detectIndentation": false,
"editor.insertSpaces": true,
"editor.tabSize": 2


留言

張貼留言