歷經15週，AC 的網頁前端課程學期二終於到了最後一項作業：自行解決問題。
而我最想解決的問題就是當初讓我報名AC課程的原因之一：不再人工幫日本母公司每三個月做一次無限複製貼上的商品特賣網頁！
以前的作法有多麻煩呢？
你可以看一下過往的頁面長這樣(以 2021 年 12 月的特賣頁為例)：
https://www.rakuten.ne.jp/gold/pg-gloria/spsale/202112SPSALE.html
裡面一個一個商品項目都是在HTML裡無限複製一樣個格式再改商品資訊…
而每三個月一次，就要把這次沒有特賣的項目<!—->關起來，把有要特賣的打開。
品項很多，雖然可以搜尋商品編號尋找它在茫茫 html 碼的哪裡，但還是很麻煩。
最麻煩的是還要檢查有沒有換價格…有沒有從上次賣 10% OFF 這次變 50% OFF 呢？！
而且這還是日本來的資料都正確的情況，日本窗口常常粗心沒給到對的資料，我上傳完網頁給他檢查後還要再修改金額或特價商品連結…
今年12月要做特賣頁的要求又來了。
而且還很特別，日本窗口說這次想來點不一樣的，所以畫了設計稿給我。
我心想太好了，我也想趁機改一改以前留傳到現在的公版和難用的製作方法。
…結果我收到一份用EXCEL做的網頁設計稿。
雖然我點開檔案的當下大笑出來，但我想我心裡應該是在流淚才是。
就在和日本窗口一一確認需求時，再次哭笑不得…
對於在商品圖上加特價與幾%折扣等等的需求，我建議可以用 CSS 樣式的position來達成，
當然對方不能理解我的建議，馬上就貼給他之前在 AC 練習的切版作業當範例：
https://codepen.io/tsouhare/pen/ZERarQp
OK，雖然他最後應該有看懂(?)，但他說：
「可是我已經很努力把這次要用的商品圖都做好了，這次可以先用我的圖嗎QQ？」
呃、我也只能說好囉…？
好的，對日本母公司的抱怨告一段落，進入正題吧(喂)。
第一件想解決的問題就是大家都討厭的問題：重複性工作。
所以這邊先是把本次的特賣商品資訊寫成一個陣列，裡面每一個物件都是一個商品資訊。
並使用迴圈的方式將它們 render 出來。
但在把特賣商品資訊一件一件手 key 進來時又覺得很不對勁，這種麻煩又浪費時間的事也是該解決的問題！
雖然知道一定有現有工具可以將EXCEL轉成想要的物件資料，但這麼做就又小看日本母公司了…
就在我一天完成上述手 key 物件並 render 成的特賣網頁後，請對方查收，
對方又陸陸續續發現自己圖片上壓的特價有錯、商品連結沒有給對等狀況，
是陸陸續續發現，不是檢查一次就全部發現，這個陸陸續續的過程大概是四天，所以我來來回回改檔案再上傳大概快10次…
而每次都在進行別的工作時又要被打斷回來改我認為早就做完的工作…
所以我的目標就是要做出一個只會用 EXCEL 的人也可以改的網頁！
於是找到了這個看標題就覺得很適合的教學：
【Google Sheets變成資料庫- EP2】指定Google試算表上的資料到網頁上/fetch specific data from Google Sheets to a webpage
雖然也照個教學完成了 Google Apps Script ，只是最終需要以 iframe 的方式將在 Google Apps Script 中 做好的 URL script 放入網頁中。
除了需要透過 iframe 嵌進網頁裡總覺得哪裡不夠直接(?)外，在讀取的過程可能會因為 google 帳號與瀏覽器的問題發生以下截圖的錯誤：
所以我開始找可能的解決方法，透過上面得到的 Google Sheet 的線索找到這個教學：
操作 Sheet API 讀取 Google 試算表取得 JSON 資料
看到可以用 JSON 就好開心啊！這不就是也在 AC 練習過的作業嗎？
https://codepen.io/tsouhare/pen/abGRJdM
作業上利用 axios 取得 JSON 資料，而這邊需要的是連到 Sheet API 的 JSON 資料。
原來解決方法一直在身邊(?)，只是一開始還沒有找到 Sheet API 這塊拼圖。
最終完成的程式碼可查看：https://codepen.io/tsouhare/pen/GRGYVdB
看到清爽的 html 就是舒爽，跟之前的版本有一千多行真的是看了舒服多了…
完成的準備給公司看的 demo 網頁和使用的 Google Sheet 如下：
Google Sheet https://docs.google.com/spreadsheets/d/1RJSriiK_4UKVBOKqKXrlvuZqgJTO1dC1NIAg2K5fGMI/edit?usp=sharing
demo 網頁 https://www.rakuten.ne.jp/gold/pg-gloria/spsale/spsale.html
只要在表單上更改內容，就能連動到 demo 網頁上的內容一起改！
終於可以丟個 Google Sheet 請日本那邊自己資料想修幾次就幾次，再也不會來煩我了(撒花)。