寫程式作業心得 week2

在開始寫程式以前,我本來就知道自己不會寫程式T_T,不過我還是來記錄一下這些挫折又開心的學習心得。這是第二週大致做出來的東西:

首頁部分:本週作業補齊了 search 的功能、Campaign 頁輪播,打關鍵字可以找到相對應的產品,然後完成了 Infinite Scroll ,在首頁往下滑後,可以一直 load 到下ㄧ頁直到沒有商品為止。基本上就是一直去抓 API 給的東西,把它畫出來。

新增了產品頁 & 結帳頁面:

產品頁新增的功能就是,可以點擊顏色、尺寸、數量,然後點擊加入購物車,跳到結帳頁面。

結帳頁面目前就只有把資料從 LocalStorage 撈進來,然後畫出來。

記錄一下,廢物如我,每次在刻頁面前都沒想清楚,所以當我一開始用 JS HTML 畫出來的時候,手機版又爆炸了 T_T

統整一下第二週碰到的問題:

ㄧ、先想好產品頁流程
我在產品頁那邊卡很久,原因是 API 給的資料包含每一種商品的各顏色、尺寸有多少個庫存,也就是說我在程式裡必須先撈出每種顏色、與尺寸對應到的庫存。當有庫存跟沒庫存時點擊時各會發生什麼事。這邊可以是一個大 function,裡面包針對尺寸、顏色、庫存的各種 function(倒)。

我的寫法是:先處理尺寸、顏色,先不要管庫存。

若使用者只點尺寸或是只點顏色,都先跑一個 for 迴圈,當某個尺寸等於使用者點擊的尺寸時,或當某個顏色等於使用者點擊的ㄧ樣時,如果庫存是 0 的時候,在這樣的情況下,再去跑一個 for 迴圈,如果使用者再點到了同樣的顏色時或同樣的尺寸,會讓顏色或尺寸的 class 變成不能點的樣式。當使用者點擊顏色又點擊尺寸找到對應 API 給的相同 id 的時候,會去找庫存數量,會有庫存是 0 時的狀況,跟如果不是 0 的狀況。

這邊程式解完後,頁面呈現上也卡關了,一開始是想說正常使用者是不會指點擊一個顏色就去結帳吧!應該會點顏色、尺寸再數量(按照我的排版邏輯),不過這也是要考量的,就是當使用者只點顏色或尺寸或數量就直接結帳時,其實是不行的,要讓使用者也不能點。

所以接著再去做當我只點擊尺寸以及當我只點擊顏色以及我點擊了尺寸 & 顏色的 click EventListener 。最後寫判斷庫存有多少的 function 以及購買時使用者根據庫存有多少可以點擊加減數量的 function,然後加、減再做 click EventListener。

二、function 的規劃
這兩週在做的事情其實都差不多是這樣:先寫一個 function 拿 API 資料,把資料用 JS 寫成 HTML 出來(通常會用 loop 去把重複的東西畫出來),或是再寫一個 function 去拿 API 裡面我要的特定資料。 一開始其實就要想清楚了,我要拿哪些資料。

比如我產品頁的圖片、資訊,是因為拿到首頁使用者點擊的該商品的 id 後,才對應 API 給的這個商品 id 的資料畫出來的,也就是說我一拿到 API 後,就要寫一個取 id 的 function,拿到後就一樣再寫個 function 開始用 JS 寫成 HTML 出來,畫出產品頁面資訊。

const getProductDetails = (id) => {
 const endPoint = `/products/details?id=${id}`; 
 return get(endPoint); 
}

然後碰到的狀況是,有時候頁面會 load 不到 API 資料,這時候就要用到 promise (同步異步這邊我真的爆炸,要再花時間去理解一下)。所以順序其實是,拿到 API 資料後,.then 是為了看好了沒,好了就會執行裡頭的 function。

所以我的步驟其實是:拿資料 -> 印出資料 -> 使用者在購買時的資料 ->拿 localStorage 的資料->印出 localStorage 的資料。

getProductDetails(id).then((data) => {
 printProductDetails(data);
 productHandleStock(data); 
 getlocalStorage(data);
});

三、localStorage
這邊也卡很久,要先想通為啥我在 product 頁面點擊的東西,可以直接跳到結帳頁面。簡單來講就是要先寫個 function,就是 localStorage 去拿使用者買的東西的一串資料。然後當使用者在 product 頁面上點擊加入購物車後的那一刻開始,資料會先更新,更新的時候還要判斷使用者是不是買了同樣的商品(囧),如果是沒買過的商品,才會新增一個品項到那串資料。資料更新完後要轉成 string 再傳給 localStorage。

然後最後就會執行在右上方購物車顯示 localStorage 現在拿到的商品數量,一樣就是要畫出那個數量。

四、結帳頁面取資料的流程
這邊也卡很久(到底哪邊卡不久…應該沒有…),結帳頁面要做的是就是拿 localStorage 的資料跟 API 資料中的庫存,才能確定有多少購買數量,然後最後要寫兩個 function,一個是可以在結帳頁面改數量,另一個是移除商品,最後就是把資料畫出來。

總之就是, CSS 常常被我寫爆外,連用 JS 寫 HTML 也會爆掉,然後 JS 本身更不用說了,我的程式邏輯真的需要…再加強…附上最近寫程式的心得…

大致是這樣,有空再來寫之後的學習心得~