Mirochiu's coding note

今日完成的Mirochiu/React-Google-Apps-Script升級作業 今天完成了 Mirochiu/React-Google-Apps-Script 的升級作業。這個專案是延伸自 enuchi/React-Google-Apps-Script 3.1.0 版本，我將專案的打包與本機開發環境從 Webpack 升級到 Vite 。透過 Vite 的 HMR（Hot Module Replacement） ，開發效率得到了顯著提升，修改前端程式碼可以即時看到效果，開發流程更加順暢。 目前專案狀態： 前端 ：專注於使用 React.js 後端 ：仍使用 Google Apps Script (GAS) 作為網頁伺服器 程式語言與工具 ：TypeScript + Vite + pnpm 套件管理 ：使用 pnpm 支援指令 ： start ：本地開發 lint ：程式碼檢查 test:integration ：整合測試 deploy ：部署到 GAS 整體來說，這次升級不僅更新了開發工具鏈，也讓前端開發體驗更加流暢，同時保留了後端 GAS 作為伺服器的架構，非常適合快速開發 React.js + GAS 的 Web 專案。

這個小程式是詢問ChatGPT後得到的idea 只要將這個script發布成網頁應用程式就能代理影像URL 備註:如果來源有透過token,user-agent阻擋存取,則還需要改一下這個小程式 代理影像的使用方式是給予imageUrl參數, 就會回傳該影像的DataURL 該如何使用DataURL會另外發文

許久沒有發新的Google Apps Script的文章，這篇發一個完整的程式碼，透過Apps Script部屬成網頁，就能完成上傳，也可以用這個程式碼改成儲存到Google Drive或是其他雲儲存哦!

這幾天將 ReactOnAppsScript 做了更版，主要應對template升級到Webpack 5和React 18。過程比我想的還艱難，react-router-dom在這版本被去除，導致前端部份重寫了1/3，所以跟之前寫的教學都無法一致化，往後會再整理。 這個專案旨在使用Google Apps Script這個(免費)伺服器框架下，進行React網站的開發建置，並以Google Sheet作為簡易型資料庫，Google Drive作為內容儲存庫，讓網頁可以動態呈現並方便管理。 github連結 https://github.com/Mirochiu/ReactOnAppsScript Demo網站連結 https://script.google.com/macros/s/AKfycbyxc4-xeCm4xag9YbtFK9wmMLzFFFyBtJQ2gFEM-Vju4Bp5ONN_AyWwPrYHj0cTwIxI/exec

今日已將React-Google-Apps-Script升級到 enuchi的main分支 本repo與enuchi的差異，只提供webapp的sample code https://github.com/Mirochiu/React-Google-Apps-Script 升級到enuchi main分支的特點 使用Webpack 5 React升級到18版 開發模式可正常運作 消除惱人的dependency alert 升級後的差異 使用npm, 之前我使用yarn enuchi的deploy指令只有上傳到Google Apps Script,沒有真正發布出去 npm操作指令 npm install npm run login npm run setup npm run deploy npm exec clasp deploy --description \"DEV@$(date)\" npm run open npm exec如果後面的參數都是要給執行指令, 請用--讓npm知曉後方都不要處理 例如使用 npm exec -- clasp create -h 才會看得到clasp的說明

剛發布一版Google Apps Script網頁開發的範本，使用ECMA 2022和webpack 5打包，clasp發布工具，沒有榜定jquery, react或是vue。 https://github.com/Mirochiu/gas-webpack5-template

我近期的部落格內容都是以Apps Script作為主軸搭Sheet做資料庫開發，不過用的過程中其實都一直有一些議題會跑出來。這裡整理出一個列表，覺得不好處理的問題。

 之前都沒對Google Apps Script的base64了解，一直套用它人的JWTcode，直到我膝蓋中了一箭....

最近在寫一些互動的功能，遭遇Trigger無故停用問題。如圖所示。 This Trigger Has Been Disabled For Unknown Reason

這個問題之前沒發生過，可能都是我用了各種套件react/bootstrap，直到我寫vanilla js...

在一些純前端的環境中，如Github page和Apps Script，和我們依然會想用URL中parameter方式來完成一些事情，這時候就會需要URLSearchParams的幫忙！

像是LINE登入時會使用get來轉移到我們的網站中，若是我們後端沒有處理好，這時候就只能用前端的javascript程式來處理。

關於LINE flex message 官方介紹 會叫做flex message是因為其排版方式與網頁CSS的flex模式，主要是在手機/平板上呈現。在電腦版呈現時只會顯示  "本訊息無法顯示。 請至手機版LINE中查看。"

在Apps Script中比較困擾的就是如果執行正常的狀況下，Logger.log和console.log都不會顯示出來，所以就會用Sheet來當做Logger。 最精簡的方式就是寫下面這樣的一個doLog函數。

在Apps Script中發送Line Notify訊息，你需要先進入 Line Notify的網站 取得群組的TOKEN，再填如下圖程式碼的指定位置。

之前寫的 把Google sheet變成JSON Api伺服器2(進階) 可以很容易的和Datatable一起使用。 這方面也是因為Datatable本身優秀的功能，所以可直接將Api伺服器的url丟給套件，幫我們執行存取的功能。如果要重新讀取Api伺服器，Datatable也有提供呼叫的方法可以處理。

上一篇中製作了一個會把Google sheet變成JSON Api伺服器的簡單小程式，今天在稍微改變一下，讓它會以物件陣列的方式回傳。  之後我們會將這個小程式應用在datatables上頭。

JSON Api伺服器臨時要測試使用找不到，這裡提供一個3分鐘的版本。

 在第28篇裡我們整合了Google登入( 文章連結 )，不過就直接讓所有Google帳號可以直接當成我們的帳號進行登入。這裡我們要補足之前的實作，檢查並確認榜定既有帳號，如果沒有既有帳號才會直接當成帳號進行登入。

浮動標籤是Bootstrap 5裡頭新增的功能，個人覺得很有趣，然後看到Apple登入頁面也是使用浮動標籤，就來套用到這個專案的登入頁面。 若是要在Bootstrap 4中使用浮動標籤，可以參考Anton Staroverov的 Bootstrap 4 Float Label 示範。