Mirochiu's coding note

我們常用搜尋時下方都會有個建議清單，這種可以稱為建議或候選清單。而在網頁表單上的說法則是自動完成(auto-complete)，我們這裡就是要在上傳HTML檔案時，動態從伺服器取得這些建議幫我們列出候選清單，可以大幅增加使用者的使用體驗。

整合Google登入的方式採用與LINE相同的OAuth 2的機制，可以讓我們基本沿用相同的程式，只是改改置入參數就可以完成整合登入的作業。

這篇要實施LINE登入的功能，建議 先閱讀我之前寫的LINE登入流程 一文，下面會假定您已經知道該如何成為LINE開發者，只進行登入系統的LINE整合。

我們在 第八篇 時製作了會員註冊系統，本篇就是要移植註冊會員頁跟確認信功能。廢話不多說，馬上開始!

關於登入後才能用的功能分項，我之前一直都只有硬幹的想法。直到看到了 Protected Routes and Authentication with React Router  心想：這就是我要的東西阿！所以我們就來套用囉。 這篇裡頭都是前端的功能調整，是處理選單及登出入狀態，後端調整則是要使用者的權限結合，不會在這裡。

一週又過去了，我們本週將許多之前實作的功能都移植到React上了，程式碼的份量佔比也很高，所以今天就簡單的移植上一篇中的未實施的刪除連結功能。 從下週開始便會使用React的hook處理會員登入後才能使用的功能。

 在上一篇中我們移植了HTML檔案上傳的部份，但是只能在上傳後點擊連結來查看，所以這一篇就是來移植上傳HTML的連結列表到React上。(之前是在 第2篇中實作 )

在 使用Heroku推出你的應用，可適用於新建與既有專案! 一文中僅介紹了整個流程，這篇以實際的既有專案做流程展示。 要使用React的CRA其實也是可以，不過既然要展示，我們就直接用公開的作品。以下選擇github的Tim Baker所提供的React JS Resume Web App Template作為既有專案。 

接著我們來移植在 第9篇 我們製作的會員登入頁面，這裡為了順著React範本的整理方式，所以會需要寫調整很多程式碼的風格與寫法。

在 第4篇 中我們製作了HTML檔案上傳功能，接著就來移植到React上。 這裡上傳功能一樣使用Google Apps Script的AIP確認當前使用者的E-mail，如果沒有先登入google帳號上傳檔案就會被內部檢核機制阻止。未來這部份會再改成使用會員登入後，就能上傳HTML檔案。拭目以待!

昨天學弟提醒才發現我Heroku的基礎用法沒有放上來。之前寫Line BOT寫了一堆東西都要用到這基礎筆記阿!!

在 第六篇 的時候我們製作了瀏覽Drive上檔案的UI，因為我們改成用React範本來建構網站，所以些就來移植之前的成果，透過移植的過程，我們也可以更好的了解React與Apps Script之間的互動方法，之後幾篇都會持續移植之前的成果。

因為Docker Desktop要開始對企業收費的新聞，讓我也開始嘗試其他的替代方案，其中一種過渡就是用podman來取代docker，這裡就針對我嘗試安裝podman做個紀錄。

前兩篇因為剛開始React就跳到實際使用，在內容歸屬上是比較硬的，今天就來一個比較簡單的部份，加入選單圖示。這裡會使用到react-icons這個套件

前幾篇已經先將基本的React語法及Hook概念說明了一下，這裡要開始以React建構之前的功能，如果對於之前的React基礎還不太明瞭的部份，可以在底下請留言，或從React官方網站中學習一下基礎，對於之後的部份才會能順利銜結。 之前我們建構的Apps Script網站有幾項功能，登入會員、顯示Drive資料夾、上傳HTML、顯示/刪除已上傳的HTML等等。現在用React就要做一個整理，建構一個在網站上方的選單功能，可以方便使用者點擊進入不同的功能。

 延續上一篇 Apps Script用Sheet生成動態網頁(16): 認識React ，我們接著要來認識React的hook機制。 我們在App.jsx中會看到useState()，這個由use開頭的函數，就是我們的hook，React在16.8.0版時加入Hook的支援。是為了functional元件所添加的功能，使得funcional元件不再只是寫寫固定內容的元件或是樣板，而是已具備一個完整的互動功能。

 在上一篇 Apps Script用Sheet生成動態網頁(15): 使用React動態網頁範本 我們使用了React網頁的範本，為了日後進行順暢，需要先對React有基本認知。這篇以範例的內容，對React做說明。

在前14篇中我們已經學到如何使用Apps Script來操作Google Sheet作為資料庫和Google Dirve資料儲存，接著我們就進入現代WebApp應用範疇，加入React並整合更多功能。 之後Apps Script與React我都會放在 Mirochiu/ReactOnAppsScript 供參考，是使用Elisha Nuchi的範本為基礎我再 調改成預設使用webapp 的版本。十分感謝由 Elisha Nuchi所貢獻的良好範本 。

在上一篇中我們完成用Local Storage改寫會員登入機制，這篇繼續來改寫首頁的使用者登入狀態及登出功能。先前的登入token是寫在?參數列上，現在要改成讀取Local Storage。

在先前的 會員登入頁面 施作中，我們使用?參數作為登入資料的傳遞方式，但是以這種方式難以維護登入狀態，使用者一但重新進入網站，或是開新分頁，就會發現登入狀態消失了，在使用者體驗上十分不好。然而，Apps Script中又不提供傳統紀錄登入Cookie的方式。因此，我們只好求援於HTML5的Local Storage，協助我們儲存登入資訊。

上次在 AppsScript在內部網頁之間的連結 有提到可以用template取用getServerUrl()來組合URL，然後以document.baseURI來組合我們AppsScript內的相對連結。但是這一切也還是麻煩，所以就衍生出了只想要改變base標籤就能一體適用的想法。

在 第10篇 我們處理了使用者登入token及登出功能，登入的token是透過?參數傳遞給首頁。如果使用者重新進入我們的網站，例如開新的分頁，就會發現使用者登入了，怎麼Apps Script用起來跟一般的網站登入的狀態不一樣呢？