Eason Lin

[相關技術]

• 使用 Vue CLI 3 開發網站。
• 使用 Vuetify + SCSS 管理 CSS 及美化頁面。
• 使用 Vue Component 管理重複結構。
• 透過 Router 管理前後台路由。

[遇到的問題]

• Question: 使用 Router 傳遞使用者的旅遊時間、地點及目的，在不需要這些參數的步驟中還是要接收並傳至下一個 Router 使網頁 Url 變的很冗長。
  Solution: 應該要加入 Vuex 管理統一資料，沒用到資料的 Component 就無需幫忙傳遞。
• Question: 初賽甄選時使用 Materialize CDN 直接搭配 HTML 、 CSS 及 JavaScript 寫程式，初賽入圍後導入 Vue 框架發現 Materialize 的一些動畫效果都失效，因為 .Vue 會經過編譯才轉換成原生 HTML 、 CSS 及 JavaScript。
  Solution: 搜尋資料找到運用 Materialize for Vue 的框架 Vuetify ，學習並使用在此專案中。
• Question: 串接後端 API 時失出現
  'Access-Control-Allow-Origin' header is present on the requested resource。
  Solution: 學習程式的教學平台助教有開直播跟同學們分享 跨來源資源共用 CORS 這個問題，所以一看到就立馬通知後端的隊友處理這個跨瀏覽器資料共享的問題。

[相關技術]

• 使用 Vue CLI 3 開發 SPA 網站。
• 透過 Router 管理前後台路由。
• jQuery 製作功能頁面及商店頁面動畫。

[遇到的問題]

• Question: 第一次把 jQuery 加入 Vue 的專案，要如何在每一個 .vue 檔都能使用到 jQuery 選擇器 $ 呢?
  Solution: 跟夥伴上網搜尋方法，最後在 Youtube 上搜尋到教學影片，而且也發現 jQuery + JavaScript 可以更方便撰寫程式，例如:
  $(`.${CurrentBoot}`).attr("src", `/static/${getBootsColor}.png`)
  可以把選擇目標 (CurrentBoot) 及圖片路徑 (getBootsColor) 轉換成動態的變數。
• Question: SendGrid 發送訂票通知信時都會被分到垃圾信箱。
  Solution: 原本以為在 SendGrid 的系統可以設定這個問題，最後找到的解決方法是設定 Domain Name 讓 Gmail 不要判斷為垃圾信或廣告信，有試著將放在 heroku 的 Domain Name 設定至 SendGrid 後台，也許是因為 heroku 網址有亂數所以還是失敗。
• Question: 後端發送 Email 的信無法套用 CSS Class 郵件格式整個跑掉。
  Solution: 想到平常收信時都會看到排版過的 Email 所以到自己的信箱尋找類似的 Email 結果發現都使用 Inline CSS ，不過也發現有亂碼的 Class ，後來對照一下 Inline CSS 發現原來 Gmail 會編譯過一次才寄出。

[相關技術]

• 使用記事本存放專案的資料。
• 使用 C# Windows Form 撰寫程式碼。
• 使用計時器提醒休息時間。
• 使用 icon 代替文字功能按鈕。

[遇到的問題]

• Question: 要怎麼與 Windows 開啟檔案的畫面互動 ( 開啟檔案或是另存新檔 ) ?
  Solution: 搜尋 Windows Form open txt ，找到 OpenFileDialog 及 SaveFileDialog 這兩個開啟及存檔的元件，經由不斷嘗試後完成此互動功能。
• Question: 要怎麼讀取 .txt 檔案內容 ?
  Solution: 搜尋 Windows Form read txt ，找到 ReadAllText() 及 WriteAllText() 兩個 Function ， 之後又遇到檔案變亂碼，後來發現需要設定 Encoding 為 Default。

[相關技術]

• 使用 React 開發 SPA 網站。
• 透過 Redux 統一管理資料。
• 透過 Thunk 結合非同步與後端資料庫互動。
• 使用 Firebase 管理 Server 端、資料庫以及使用者權限。
• 使用 Materialize 美化頁面。

[遇到的問題]

• Question: 設定 this.setState() 時發現資料沒有即時更新。
  Solution: 後來發現 this.setState() 因為效能的關係並不保證即時更新，所以後來就用 updater 的方式傳一個 callback 解決不保證即時更新的問題。
• Question: 刪除 Project 裡面的 Todos 也要一併刪除，一開始這樣寫但是馬上就報錯
  firestore.collection('todos').where('projectId', '==', id).delete()
  Solution: 上網搜尋後發現需要先把所有資料拿出來
  return firestore.collection('todos').where('projectId', '==', id).get()
  然後在 callback function 把子資料一個個刪除；不過如果是大專案一定不可能這樣做，光撈出全部的子資料就可能花很多時間，於是我思考有沒有可能集合中新增子集合 ? ，結果真的有，於是我很好奇如果刪掉集合那子集合會跟著刪除嗎 ? 結果子集合沒有因為刪除集合而跟著被移除，而且更糟的是子集合還存在資料庫裡面，如果沒有處理這一部分的話，存取資料庫的速度就會被這些幽靈資料所影響，而降低程式的執行速度。