Apps Script用Sheet生成動態網頁(29): 表單input動態候選清單(auto-complete) 取得連結 Facebook X Pinterest 以電子郵件傳送 其他應用程式 - 11月 30, 2021 我們常用搜尋時下方都會有個建議清單,這種可以稱為建議或候選清單。而在網頁表單上的說法則是自動完成(auto-complete),我們這裡就是要在上傳HTML檔案時,動態從伺服器取得這些建議幫我們列出候選清單,可以大幅增加使用者的使用體驗。 閱讀完整內容
Apps Script用Sheet生成動態網頁(28): 整合Google登入 取得連結 Facebook X Pinterest 以電子郵件傳送 其他應用程式 - 11月 29, 2021 整合Google登入的方式採用與LINE相同的OAuth 2的機制,可以讓我們基本沿用相同的程式,只是改改置入參數就可以完成整合登入的作業。 閱讀完整內容
Apps Script用Sheet生成動態網頁(27): 整合LINE登入 取得連結 Facebook X Pinterest 以電子郵件傳送 其他應用程式 - 11月 24, 2021 這篇要實施LINE登入的功能,建議 先閱讀我之前寫的LINE登入流程 一文,下面會假定您已經知道該如何成為LINE開發者,只進行登入系統的LINE整合。 閱讀完整內容
Apps Script用Sheet生成動態網頁(26): 移植註冊會員及確認信 取得連結 Facebook X Pinterest 以電子郵件傳送 其他應用程式 - 11月 23, 2021 我們在 第八篇 時製作了會員註冊系統,本篇就是要移植註冊會員頁跟確認信功能。廢話不多說,馬上開始! 閱讀完整內容
Apps Script用Sheet生成動態網頁(25): 登入才能使用的功能分項 取得連結 Facebook X Pinterest 以電子郵件傳送 其他應用程式 - 11月 22, 2021 關於登入後才能用的功能分項,我之前一直都只有硬幹的想法。直到看到了 Protected Routes and Authentication with React Router 心想:這就是我要的東西阿!所以我們就來套用囉。 這篇裡頭都是前端的功能調整,是處理選單及登出入狀態,後端調整則是要使用者的權限結合,不會在這裡。 閱讀完整內容
Apps Script用Sheet生成動態網頁(24): 移植刪除HTML連結功能 取得連結 Facebook X Pinterest 以電子郵件傳送 其他應用程式 - 11月 19, 2021 一週又過去了,我們本週將許多之前實作的功能都移植到React上了,程式碼的份量佔比也很高,所以今天就簡單的移植上一篇中的未實施的刪除連結功能。 從下週開始便會使用React的hook處理會員登入後才能使用的功能。 閱讀完整內容
Apps Script用Sheet生成動態網頁(23): 移植HTML連結列表 取得連結 Facebook X Pinterest 以電子郵件傳送 其他應用程式 - 11月 18, 2021 在上一篇中我們移植了HTML檔案上傳的部份,但是只能在上傳後點擊連結來查看,所以這一篇就是來移植上傳HTML的連結列表到React上。(之前是在 第2篇中實作 ) 閱讀完整內容
展示流程:既有專案使用Heroku推出你的應用 取得連結 Facebook X Pinterest 以電子郵件傳送 其他應用程式 - 11月 17, 2021 在 使用Heroku推出你的應用,可適用於新建與既有專案! 一文中僅介紹了整個流程,這篇以實際的既有專案做流程展示。 要使用React的CRA其實也是可以,不過既然要展示,我們就直接用公開的作品。以下選擇github的Tim Baker所提供的React JS Resume Web App Template作為既有專案。 閱讀完整內容
Apps Script用Sheet生成動態網頁(21): 移植會員登入頁面 取得連結 Facebook X Pinterest 以電子郵件傳送 其他應用程式 - 11月 16, 2021 接著我們來移植在 第9篇 我們製作的會員登入頁面,這裡為了順著React範本的整理方式,所以會需要寫調整很多程式碼的風格與寫法。 閱讀完整內容
Apps Script用Sheet生成動態網頁(22): 移植上傳HTML功能 取得連結 Facebook X Pinterest 以電子郵件傳送 其他應用程式 - 11月 16, 2021 在 第4篇 中我們製作了HTML檔案上傳功能,接著就來移植到React上。 這裡上傳功能一樣使用Google Apps Script的AIP確認當前使用者的E-mail,如果沒有先登入google帳號上傳檔案就會被內部檢核機制阻止。未來這部份會再改成使用會員登入後,就能上傳HTML檔案。拭目以待! 閱讀完整內容
使用Heroku推出你的應用,可適用於新建與既有專案! 取得連結 Facebook X Pinterest 以電子郵件傳送 其他應用程式 - 11月 16, 2021 昨天學弟提醒才發現我Heroku的基礎用法沒有放上來。之前寫Line BOT寫了一堆東西都要用到這基礎筆記阿!! 閱讀完整內容
Apps Script用Sheet生成動態網頁(20): 移植Google Drive檔案列表 取得連結 Facebook X Pinterest 以電子郵件傳送 其他應用程式 - 11月 15, 2021 在 第六篇 的時候我們製作了瀏覽Drive上檔案的UI,因為我們改成用React範本來建構網站,所以些就來移植之前的成果,透過移植的過程,我們也可以更好的了解React與Apps Script之間的互動方法,之後幾篇都會持續移植之前的成果。 閱讀完整內容
筆記:在Ubuntu20.04安裝podman及podman-compose 取得連結 Facebook X Pinterest 以電子郵件傳送 其他應用程式 - 11月 13, 2021 因為Docker Desktop要開始對企業收費的新聞,讓我也開始嘗試其他的替代方案,其中一種過渡就是用podman來取代docker,這裡就針對我嘗試安裝podman做個紀錄。 閱讀完整內容
Apps Script用Sheet生成動態網頁(19): 選單上加入圖示 取得連結 Facebook X Pinterest 以電子郵件傳送 其他應用程式 - 11月 12, 2021 前兩篇因為剛開始React就跳到實際使用,在內容歸屬上是比較硬的,今天就來一個比較簡單的部份,加入選單圖示。這裡會使用到react-icons這個套件 閱讀完整內容
Apps Script用Sheet生成動態網頁(18): 使用router建構選單功能 取得連結 Facebook X Pinterest 以電子郵件傳送 其他應用程式 - 11月 11, 2021 前幾篇已經先將基本的React語法及Hook概念說明了一下,這裡要開始以React建構之前的功能,如果對於之前的React基礎還不太明瞭的部份,可以在底下請留言,或從React官方網站中學習一下基礎,對於之後的部份才會能順利銜結。 之前我們建構的Apps Script網站有幾項功能,登入會員、顯示Drive資料夾、上傳HTML、顯示/刪除已上傳的HTML等等。現在用React就要做一個整理,建構一個在網站上方的選單功能,可以方便使用者點擊進入不同的功能。 閱讀完整內容
Apps Script用Sheet生成動態網頁(17): 認識React的hook 取得連結 Facebook X Pinterest 以電子郵件傳送 其他應用程式 - 11月 10, 2021 延續上一篇 Apps Script用Sheet生成動態網頁(16): 認識React ,我們接著要來認識React的hook機制。 我們在App.jsx中會看到useState(),這個由use開頭的函數,就是我們的hook,React在16.8.0版時加入Hook的支援。是為了functional元件所添加的功能,使得funcional元件不再只是寫寫固定內容的元件或是樣板,而是已具備一個完整的互動功能。 閱讀完整內容
Apps Script用Sheet生成動態網頁(16): 認識React 取得連結 Facebook X Pinterest 以電子郵件傳送 其他應用程式 - 11月 09, 2021 在上一篇 Apps Script用Sheet生成動態網頁(15): 使用React動態網頁範本 我們使用了React網頁的範本,為了日後進行順暢,需要先對React有基本認知。這篇以範例的內容,對React做說明。 閱讀完整內容
Apps Script用Sheet生成動態網頁(15): 使用React動態網頁範本 取得連結 Facebook X Pinterest 以電子郵件傳送 其他應用程式 - 11月 08, 2021 在前14篇中我們已經學到如何使用Apps Script來操作Google Sheet作為資料庫和Google Dirve資料儲存,接著我們就進入現代WebApp應用範疇,加入React並整合更多功能。 之後Apps Script與React我都會放在 Mirochiu/ReactOnAppsScript 供參考,是使用Elisha Nuchi的範本為基礎我再 調改成預設使用webapp 的版本。十分感謝由 Elisha Nuchi所貢獻的良好範本 。 閱讀完整內容
Apps Script用Sheet生成動態網頁(14): 處理使用者登入/出狀態(LocalStorage) 取得連結 Facebook X Pinterest 以電子郵件傳送 其他應用程式 - 11月 05, 2021 在上一篇中我們完成用Local Storage改寫會員登入機制,這篇繼續來改寫首頁的使用者登入狀態及登出功能。先前的登入token是寫在?參數列上,現在要改成讀取Local Storage。 閱讀完整內容
Apps Script用Sheet生成動態網頁(13): 會員登入頁面(LocalStorage) 取得連結 Facebook X Pinterest 以電子郵件傳送 其他應用程式 - 11月 04, 2021 在先前的 會員登入頁面 施作中,我們使用?參數作為登入資料的傳遞方式,但是以這種方式難以維護登入狀態,使用者一但重新進入網站,或是開新分頁,就會發現登入狀態消失了,在使用者體驗上十分不好。然而,Apps Script中又不提供傳統紀錄登入Cookie的方式。因此,我們只好求援於HTML5的Local Storage,協助我們儲存登入資訊。 閱讀完整內容
Apps Script在內部網頁之間的連結:改變base標籤 取得連結 Facebook X Pinterest 以電子郵件傳送 其他應用程式 - 11月 03, 2021 上次在 AppsScript在內部網頁之間的連結 有提到可以用template取用getServerUrl()來組合URL,然後以document.baseURI來組合我們AppsScript內的相對連結。但是這一切也還是麻煩,所以就衍生出了只想要改變base標籤就能一體適用的想法。 閱讀完整內容
Apps Script用Sheet生成動態網頁(12): 使用LocalStorage紀錄資料 取得連結 Facebook X Pinterest 以電子郵件傳送 其他應用程式 - 11月 02, 2021 在 第10篇 我們處理了使用者登入token及登出功能,登入的token是透過?參數傳遞給首頁。如果使用者重新進入我們的網站,例如開新的分頁,就會發現使用者登入了,怎麼Apps Script用起來跟一般的網站登入的狀態不一樣呢? 閱讀完整內容