Dummy Project - POS機 (API & DOM Application)

Dummy Project - POS機 (API & DOM Application)


完成作品: POS機

參考資料: GitHub Page


前期規畫

一開始可以先用個心智圖

描繪一下大概會有哪些步驟

可以按照自己的規劃進行作業

等實作完成後  再回來看看當初那些

地方沒有考慮到

我個人覺得這是一個不錯的練習


VScode前置作業

  1. 創建HTML , css, js檔案
  2. HTML中打入 html E5讓VScode導入初始範本
  3. 貼入套件連結
  4. 到Bootstrap首頁搜尋CDN (Content Delivery Network)即可找到

  • <head> 貼上 bootstrap的 css link
  • <body> 貼上axios → main.js → bootstrap.js 這些連結


HTML (main.html)


1. 切版

2. 一開始先把HTML該放的元素都放進去.  之後可以使用dummy的資料預覽完成品的樣子

3. 到bootstrap找可套用的Card元素 

4. 使用dumy資料完成頁面. 圖片可以隨便挑一張圖片. 也可以用參考資料中的src

5. 微調到滿意. 調整一下spacing, 字體大小, 按鈕顏色這些的. 不想調整也可以不調整

6. 很大部分的HTML後面會被main.js渲染調. 等將temlplate copy過去之後, 可以把
    原本的HTML刪掉, 留個註解假裝高手.

7. 弄到這邊差不多就可以放著了
    等main.js需要用特定元素的時候再過來看或是修改就好

8. 比較需要注意的是加到購物車的按鈕會用到三元運算子做邏輯判斷.
    強烈建議看一下MDN.  這東西好酷


css.檔案只有一段. 就是把body加個padding 15px比較好看一點

也可以直接找Bootstrap中padding的語法寫在HTML裡面. 

這樣就不用style.css這個檔案了

product list的部分 使用bootstrap的card模板做修改

這邊注意的是因為bootstrap中 row一行有12個單位, 一個卡我們給他 col-3 這樣一行可以放四個

其他細節如果不滿意可以直接先建立四張. 慢慢調整

或是等render_xx()之後再來調整



Javascript (main.js)


一開始可以先大致上layout一下. 

這次練習是為了加強MVC架構的排版

(model{資料}, view{頁面外觀}, controller{流程 })

所以我打算把程式碼做這樣的佈局

這樣先劃分出來有個好處, 

後面需要寫到哪類型的code, 

就放到那類的物件裡面

有一種收納的感覺.  🗄🗄🗄

寫程式碼的時候, 我是用比較直觀方是一路走下. 

需要什麼或是遇到什麼功能就回去寫什麼. 所以有一種往回寫的感覺

 
1. AJSA取得資料. 資料裝入productMap{ }中. 渲染頁面 
   這邊創建了一個為名productMap的物件.  作為無序資料庫. 比較好操作. 
   之後也都是用這個資料庫做資料變更以及頁面的渲染
   a. 將資料放入物件的語法:  productMap[key] = 資料value 放入 
   b. 後面都是用productMap作為產品頁面的資料庫    renderProductList(productMap)


2. 事件監聽器. 各按鈕的功能. 監聽器放置有幾種做法. 也有把放置監聽器的動作封裝成函式的. 這樣寫起來 可以讓主程式更簡潔. 但是至於哪個好. 我還沒有定見. 現階段我喜歡放一起. 這樣event.defaultPrevent() 可以只寫一次.
這個事件監聽器會delegation以下功能.  每一個功能大致列了一下步驟:


2-1 加入購物車
  • btn加上class
  • 由按鈕class確認事件.
  • 由事件dataset-id取要被加入的產品id
  • 購物車資料庫變更: 購物車有的話qty ++; 若尚未有此產品, 購物車[ ]加入此產品, qty: 1, 這裡使用了some()來回傳是否已經有此商品的布林值
  • 產品資料庫 庫存變更 productMap: inventory-1
  • 使用變更後的資料庫重新渲染product-list & cart-list & total-amount


2-2 從購物車中移除
  • 加上移除的按鈕 (btn-damger) 內文是 ”x” 以及class: btn-remove data-id
  • 可以直接複製上面由事件id取得cartItemIndex的程式碼. 照理說應該不要有重複的程式碼, 封裝起來會比較好. 但是因為太少了. 就沒有特意去封裝了.
  • 點擊事件後. 購物車中該產品數量 -1,
  • 產品資料庫庫存數量 +1,
  • 如果購物車該產品數量 = 0 則從購物車中移出
  • 重新renderCart(cartItems); renderProductList(productMap)


2-3 清空購物車 (未執行購買行為)
  • again. 按鈕增加class, 檢查按鈕class
  • 將cartIems數量逐個返回productMap
  • 清空cartItems
  • 清空TotalAmount
  • 重新renderCart(cartItems); renderProductList(productMap)
  • totalAmount.textContent = '--’ ; 個人審美…也有學長說這樣會誤導. 也可以不寫. 不寫的話總金額會等於0.
  • 這邊原本是用 cartList.innerHTML = " " 來清空購物車清單的畫面
    但是後來改成重新renderCart(carItems) 兩種做法都可以,
    雖然cartList.innerHTML = " "可能更節省瀏覽器資源
    但是現階段我偏向renderCart(carItems) . 練習使用data-driven的方式撰寫程式碼
    有錯誤也比較容易發現

2-4 結帳 (完成訂單, 庫存會減少)
  • 增加btn 屬性
  • 比對事件屬性
  • alert結帳金額
  • 總金額歸零. 清空購物車資料 重新渲染購物車
    因為庫存不用加回去, productMap{ }也沒有變更
    所以就沒有renderProductList()了
這些功能使用函式封裝可以直接寫在監聽器下面, 也可以用函式封裝起來放在controller{ }中
如果使用函式封裝的話, 除非有下註解, 否則過幾個禮拜或是換個人來看, 要重頭開始看才能知道在幹嘛.  所以建議函式封裝起來, 增加可維護性.

最後可能會發現每次加入購物車的時候. 畫面會跳到最上面 我一開始也是覺得挺苦惱的. 後來經高人指點.   這個是瀏覽器的default行為. 可以在監聽器這邊加上 event.defaultPrevent() 來解決這個煩人的問題.   感謝SevenG





留言

張貼留言