一個月的實作練習,幫助自己深入了解網頁開發流程

鰻魚燒
Aug 28, 2021

--

在AC第二個月的學習,相較於第一個月一次學習兩學期的課程,在時間運用上更為充裕,因此除了完成既定的學期內容與作業之外,還特別針對每項作業的設計一些新的功能,來練習之前所學的語法和概念。透過不斷的嘗試與實作,這一個月來對於陣列、HTML表單操作的語法更為的熟練,也能夠更熟練利用Bootstrap架構出網站頁面。

同時藉由回顧以前所學到的user story、流程圖、虛擬碼,在進行程式碼的撰寫前做好事先規劃,加快寫程式碼的速度,並且讓自己更快釐清程式的架構,設計出自己想要的網站功能,另外透過這學期所學MVC架構,幫助自己一次專注在一個點上,debug的速度也加快、更容易找到問題點出在哪裡。

在這過程中刻意練習最多的兩份作業是,「A4: TodoList 體驗強化版」和「A11: 你的社群名單」

在「A11: 你的社群名單」當中大量使用Bootstrap的套件,以前沒用過的Button group、Carousel、Forms、Jumbotron在這份作業被大量使用到,為了讓使用者有更好的視覺體驗,以及讓網站的體驗流程更為順暢。

同時在測試網站運行的過程中,想到如果能給使用者更多的操作提示,能幫助使用者深入體驗網站的各項功能,那再好不過,因此當使用者無法搜尋到自己想要的結果,網站會跳出各類的提示訊息,並搭配快捷鍵幫助使用者使用其他功能。

此外這份作業額外加入兩個網頁,作為額外的練習。

第一個是魔王關卡「進階搜尋」的表單設計,能讓使用者填寫表單後,選出符合條件的朋友資訊顯示在網頁上。從一開始如何透過DOM操作取得使用者填寫的表單資料就開始卡關,開始不斷找資料、debug的旅程,從這裡學到最多的是陣列操作的語法和HTML的表單設計,此外也因為遇到太多自己找不出來的bug,藉由與助教討論的過程中,學到很多debug的技巧,以及利用三元運算子簡化程式碼的技巧

第二個隨機配對的網頁設計,比較像是學完基礎jQuery練習用的網頁,一開始會想學jQuery,主要是因為太常在找資料的過程中,看到有關於jQuery的語法,因為沒學過jQuery看不懂別人寫程式碼,但又覺得這個方法不錯想學起來,因此下定決心先學一些基礎的語法,並且在實作中練習它。

在「A4: TodoList 體驗強化版」這份作業中,透過不斷的改版、新增功能,去複習之前所學的各項語法操作。某方面來講這份TodoLis作業的進化史,也能反映出我撰寫程式碼功力的進化史。

剛進入2–2新手村:完成基本題目要求,能夠操基本的DOM事件,按enter輸入新的代辦項目,點擊垃圾桶刪除清單,點擊清單切換完成與未完成的狀態。

從新手集訓營出來:替代辦清單新增不少對使用者友善的功能,利用CSS的 :hover 方便使用者辨認自己點到清單位置(幫自己複習之前學過的CSS選擇器用法)。

同時多加新增額外資訊的功能,透過sweetAlert外部套件,顯現出來的警示和輸入額外資訊的視窗,畫面比一般Alert的還要好看,主要透過觀摩其他同學的作業,才發現這個好用的套件。

獲取local storage新技能:藉由這項技能,即便網頁從新整理過,也能夠在網頁載入時,顯現之前輸入過的資訊,對於代辦清單的網頁來說,這算是很重要的功能,畢竟使用者不會想要每次進入網頁,都還要從新輸入一次。同時也藉由local storage練習規劃網頁的資料架構,以物件加陣列的形式儲存每一項代辦清單的資訊。

學期2–2畢業最終版:
在將作業改成能讓使用者新增多項代辦清單的功能,遇到蠻多困難點的,主要是卡在既有的程式架構要擴展到原本的2–3倍大,資料架構、版面也必須重新設計,按照原本想到什麼功能就加什麼功能的程式撰寫模式,很容易改一個功能壞一個功能,也很常改到自己亂掉不知道在改什麼,因此有短暫放棄一陣子。

等到學完整學期課程,並且聽完兩場學長姐工作坊的分享,才意識到過去寫程式的方法是行不通的,在開始寫程式之前,如果有先規劃好資料架構、網頁排版、整體使用流程,在撰寫程式碼速度更快,也因為完整釐清自己程式的架構,在之後的修改、新增功能,也能更快達成。

再加上第四週所學到的MVC架構,讓我容易將函式進行分類與細分出不同的功能,每一個函式也比以往更加的簡潔,並且只專注執行單一事件,同時也因為這個變化,讓我在debug的速度加快,再加上之前所學到的debug技巧,遇到問題時能更快找到區問題的程式碼區段,並進行修改。

這學期透過大量的實作,幫助自己進步,與助教討論實作上的問題,逐漸釐清自己過往沒注意到問題點,也透過嘗試新的語法學習到更多新的事物,也期許下學期的我能在網頁開發上有更大的進步,能實現明年轉職的目標。

--

--

鰻魚燒

剛轉職成後端工程師的小菜雞,分享自己的學習筆記