Mirochiu's coding note

在前10篇中我們建構了一個生成動態網頁的環境，背後使用sheet作為資料庫，可上傳html檔案，在透過doGet()將其顯示出來。然而在結合更多服務之後，諸如：上傳檔案，顯示檔案列表與縮圖、提供不同類型的檔案、提供註冊會員與確認信，導致doGet()內的判斷變得太多，用戶存取時間增加。這裡就是針對doGet()流程進行結構性的重構，減少判斷，提高伺服器回應速度。

  感謝 enuchi/React-Google-Apps-Script 給予的一個良好的基礎。我在這個基礎上做了一些調整，也分享到github上，移除先前與Spreadsheet榜在一起的設定，並升級到bootstrap 5版本。之後我也會之前寫的一系列AppsScript生成動態網頁的功能，轉移到這個template之上。

在前一篇 Apps Script用Sheet生成動態網頁(9): 會員登入頁面 ，中最後將token以?Query參數的形式給予首頁。 所以在首頁部份就要處理登入token，並且還要能讓使用者進行登出。

  wiki有解釋:  解決方案堆疊 LAMP stack (Linux, Apache, MySQL, PHP) WAMP(Windows, Apache, MySQL, PHP) MAMP(Mac OS,Apache, MySQL, PHP) XAMPP (cross-platform, Apache, MySQL/MariaDB, PHP, Perl) LEMP/LNMP (Linux, Nginx, MySQL/MariaDB, PHP/Python) Jamstack (JavaScript, APIs, Markup) MEAN stack (MongoDB, Express.js, Angular.js, Node.js) MERN stack (MongoDB, Express.js, React.js, Node.js) MEVN stack (MongoDB, Express.js, Vue.js, Node.js) Full stack (front-end, back-end) ELK stack (Elasticsearch, Logstash, Kibana）

在 前一篇 中我們製作了一個會員註冊系統，使用者可以透過網頁註冊成會員，隨後用Apps Script發信請使用者確認，只要使用者有點擊確認信，就能用這篇將介紹的會員登入頁面。 話不多說，我們直接上code...

其實在寫Apps Script的時候，總是很困擾該如何寫內部的連結。因為如果直接寫相對連結，例如，。但是寫絕對連結它又會因為deploy版本改變實際的URL。 直到看到stackoverflow的大大寫了一條getServerUrl()函數在Apps Script內...

最近測試自動跳轉網頁機制，從結論上來說， Apps Script不能正常自動跳轉，需要請使用者點擊 。本篇彙整4種自動跳轉機制。

有了前面7篇的的一些經驗，我們已經。這之後在修改權限檢查的機制，將上傳、刪除等功能開放給會員使用。 因為這篇得程式碼較多，所以就馬上開始吧！

我們在 Apps Script用Sheet生成動態網頁(2): 動態生成網頁連結列表 裡，完成了自動從Sheet動態產生連結列表，這篇則是要在裡頭加入刪除功能的按鈕。這樣就完成html的 上傳/更新 、 顯示 、及刪除功能(本篇)。

在去年2020年曾 實測 單純使用HTML表單，都不能將檔案資料傳到Apps Script。 而更早之前，網路上也有許多Apps Script方法表示可以提供檔案上傳，不過最近我實測之後其實是有些問題的，例如我只能傳文字檔，傳其他類型就會發生檔案損毀的問題。 所以當我今年2021開始寫Apps Script系列文章時，就以目前仍可用的方法做來分享

彙整項目 使用HTML form的2種post方法上傳檔案 使用javascript以put方法上傳檔案 針對表單上傳對應的伺服器端寫法 各種上傳對應的CURL指令(見註解) 上code

在前一篇 Apps Script用Sheet生成動態網頁(5): 上傳檔案 中，我們完成了上傳任意類型的檔案，不過我們不想整個share資料給所有，想從我們的AppsScript網頁呈現，所以就需要製作瀏覽上傳檔案的UI。 要製作一個完備的瀏覽UI需要比較多的前端知識，不過如果是要把檔案的資訊顯示出來，只需要找一套好懂的UI框架就好。這裡會使用Bootstrap 5.0作為範例，本篇不會著墨在UI的用法，若有不懂的部份可以在下面留言提問。我們這就開始吧!

前言 看到上一篇， Apps Script用Sheet生成動態網頁(4):上傳HTML檔案 ，很容易就會聯想到，既然可以上傳HTML檔案，那應該也可以上傳一般檔案吧? 用來上傳像是圖片、影片等等的檔案。 只是很不幸的，除了HTML和文字檔案，其他類型檔案用相同的上傳方法，再下載回來都會變成無法辨識的格式。而在上一年的時候，我也曾實測並彙整在 Apps Script上傳檔案到Google Drive ，關於常見的2種表單上傳檔案的方法，也是以失敗作收。 不過感謝 tanaikech的文章 ，除了表單方法之外，我們還有方法可以突破平台限制。以下就針對這種上傳方法做說明。

 昨天完成了如何動態在首頁呈現sheet內的所有網頁，今天製作用來上傳HTML檔案的頁面。這樣就能夠完成維護動態網頁的基礎機制。今天將利用Apps Script提供的google.script.run功能，快速的完成上傳HTML檔案的功能。

在第一篇中我們完成了只要 改sheet的內容就會動態改變網頁的內容 。但是首頁的內容卻是寫死的。所以這篇就在依照上一篇的程式碼做修改，讓首頁的列表自動變更。

一個現代網站的構成不是只有HTML網頁本身，還會包含JavaScript以及設定檔json等等資料。上週提到 怎麼將Sheet的資料直接輸出成AppsScript的網頁 ，這篇則要針對javascript檔和json檔，也要能用AppsScript產生出來。

為何需要用Sheet生成動態網頁? 因為如果你的AppsScript網頁要變成可以給其他人維運，就需要讓他們可以自己改網頁的內容，然而AppsScript介紹的sample是要求你把html放上AppsScript。 實際上要改內容就會需要用 clasp工具 才能上版，然後你還要安裝對應工具，教會維運人員如何使用，這樣實在是太麻煩了! 乾脆給它個sheet維運就好

我很久之前曾分享 BASH如何轉換BASE64編碼 ，從bin或文字檔轉過去BASE64亦或是在轉換回來。因為最近在整理Apps Script與還技術債，所以就也來整理一下Apps Script上使用BASE64的方式。  Apps Script首先要先釐清，你究竟是要用在 (1)網頁端 ，還是在 (2)伺服器端 ？

這篇示範一個實體拖曳圖片檔案顯示在網頁上。 使用上一篇: HTML5: div內文字置中與多class結果展示 ，設定一個拖曳區域。加入drop事件，使用dataTransfer取得拖曳的檔案路徑。再設定img標籤的src完成顯示圖片的功能

因為寫了使用bootstrap的網站在排版上真的是很有威力，不過拿掉之後就對HTML5本身都不太熟了。這裡紀錄一下，現代瀏覽器可以只用css排版，這裡展示一下多個class一起指定div的屬性。

clasp是command line工具可以管理Google Apps Script項目，專案網址:  https://github.com/google/clasp  後面會將Google Apps Script的項目簡稱為script。

原本只是想弄LINE通知，不過看到要oauth就覺得煩，乾脆直接了解LINE登入機制。這篇會講登入的作法，和需要存取的LINE API，以CURL指令舉例說明。建議可以先了解 LINE BOT機制 再來整合。

會有這個需求是有個既有的網頁只能接受POST表單上傳檔案

之前用docker-compose沒想過把它當服務用，都是想說開發跟傳給其他人方便上執行。