A+ 專案介紹
經過了五週的 A+ 計畫，前半場即將進入尾聲，在這五週練習了刷題演算法、求職準備，與打造自己的專案作品。這次專案我選擇用 Vue 來打造一個前端作品，主要為了練習剛學的前端框架以及熟練前端技能並嘗試之前沒用過的新技術。
專案的主題
以台灣旅遊平台 kkday 為模仿參考，做出使用者可以下單行程的旅遊網站。透過模仿功能來嘗試自己比較沒做過的功能。
旅遊行程網站主要核心功能：
- 使用者可以方便地瀏覽商品並且選購行程下單結帳
- 查詢過去的訂單紀錄，更改或取消行程
- 建立修改個人帳戶資料
- 可以收藏喜愛的商品方便下次購買
- 使用者可以快速搜尋商品
實作
原本是計畫建立後端部分資料庫來串接資料，但由於商品的資料結構比較複雜，時間的考量上為了將重心放在前端部分，後端先只開了個人帳戶註冊與登入，以及個人資料修改的簡單資料操作 API Server。
後端 API 使用之前熟悉的 Node.js 與 express.js 來開發，搭配 MySQL 資料庫儲存會員資料，Passport JWT 驗證 token，最後部署到 Heroku 後由前端串接 API 來取得使用者資料。
前端用 Vue 框架做開發，原本要建立在後端的資料改由使用 JSON Server 模擬 Restful API 串接。除了一些小功能與排版的熟練外，也嘗試使用一些沒使用過的框架與套件，例如以前習慣使用 Bootstrap，這次試著使用 Vuetify，也嘗試了 carousel 套件來做出 RWD 的 slide 功能。商品的地圖與商家資訊串接了幾種不同的 Google Map API 來取得地圖、評論以及時間等資訊。
透過 Vuex 保存使用者狀態，收藏清單與訂單資訊，由於暫時捨棄了後端資料庫，所以將紀錄暫存在 LocalStorage 上，專案整體目標以模擬前端使用者體驗為主。
遇到的困難與解決
在串接 API 最大的問題就是處理非同步問題，過去使用原生 JS 或是 Handlebars 開發前端頁面與用前端框架的不同是，使用框架主要是由資料來驅動畫面，所以必須配合框架的生命週期來操作監聽資料來讓資料渲染畫面。在不熟悉框架的使用下，常常無法如預期地讓資料顯示在頁面上。透過查找文件與實作練習加上 mentor 的討論建議來讓專案順利進行，也更加熟悉前端框架的操作。
目前的專案進度完成 80%
最後一週預計完成 Google Map 多地標地圖、訂單期限過期顯示、TWD, USD匯率轉換、以及優化部分 CSS 和效能。
