寫程式作業心得 week3

第三週主要在處理的東西是串 TapPay 這個平台的金流,就是在從 localStorage 拿進來購物車的頁面後,下面使用者就要填寫資料,就可以點擊「確認付款」結帳了。從填寫資料到確認付款的填寫都要做一些判斷(比如使用者有沒有填對 email、手機之類),最後結帳時要拿到 TapPay prime,再把拿到的 prime 傳給 checkout API ,從 checkout API 拿到 order number 資料,完成「確認付款」這個動作(這裡要判斷拿到資料跟有資料沒拿到兩種狀況)。

這是第三週大致做出來的東西(持續搞爆自己的作業…每天都長得不一樣):

「完成付款」後就會跳到 Thank you page(這邊設計就簡單做啊…有空會再修改),讀出剛從 checkout API 拿到的 order number(訂單編號),把它讀到頁面上。

做一個使用者的 profile 頁面(這邊設計也速速做完,之後會再改完…),可以登入自己的 facebook ,登入後我們要拿到使用者的姓名、Email 跟大頭照,然後畫到 profile 頁面上,這邊參考 Facebook Login DocumentationFacebook Graph API

拿到使用者的資料後,要把一個 FB 的 access token 給 Check Out API 去紀錄。

最後就是把自己的網站創一個 GA 帳號,每個頁面埋 code, 網頁 HTML meta 的地方做一點修改,做一點 SEO 優化(詳情:Google SEO Guide):

最後放了網頁在 loading 時的小動畫,一些 input 的地方使用 regular expression 做判斷。然後用 ESLint 修了一下我爆炸的程式碼們…最後用Google Page Speed InsightsMobile-Friendly Test — Google Search Console 測一下放上去的網頁有沒有大爆炸。

這週碰到的問題小做整理

  1. 要學會看開發文件(解法就多看多用吧):
    在用 FB 登入後要拿 API 的 access token 時,整個開發文件我看不太懂,但跑去問了別人後,一下就有解了…
  2. 難以實現的高內聚,低耦合(high cohesion、low coupling):
    程式碼要盡量減少混亂,現在碰到的狀況就是,我昨天寫的程式碼,我今天可能…就忘了。要盡量寫所有程式碼前先規劃好,寫得過程中也要想清楚某些 function 附近的程式碼在幹嘛,讓我能夠之後就算忘了,看一看就知道我在做什麼,然後切開的功能在程式碼裡面就要看得出來。總之這很難…我繼續加油吧!
  3. GA 進階使用(還沒時間埋,之後來研究一下埋進去:GA Documentation
    -Event Tracking and Timing Tracking
    -eCommerce Tracking
  4. 「不要有藉口,這個東西使用起來就是很爛…」
    找了幾個人測試這個作業,嗚嗚!就是還有很多東西要修改,不能用自己的邏輯去套用在使用者身上,一定要嚴格要求自己(外觀跟程式碼都是)。