這是我記錄自學程式,Alpha Camp 學期一的W2。
回顧:Alpha Camp 學期一 心得,W1-入門磚
這禮拜的學到的:
- 著手寫程式
- HTML/CSS/JS
- 使用DevTools檢視網頁內容
- 寫程式之前
- 寫code前的解構工具,pseudo code, 流程圖
- 開發前的設計工具,persona, user story, wireframe, user flow
著手寫程式
第一次挫折
這禮拜算是學程式上的第一個挫折,在解題目終極密碼時連拆解也不知從何下手,需要先參考其他同學寫法。較挫折的是:看了同學的寫法,還是不懂為何這樣可以解出來…
因為當天真的太挫折了,最後我的辦法是「先離開這個題目,隔幾個小時或隔天再回頭看看」
隔天冷靜下來後,重新再次嘗試解題時,果真腦袋比較清楚了。最終寫出自己的答案,頓時豁然開朗!
HTML/CSS
開始了基本的HTML及CSS的學習:
- HTML:說明整個網頁的內容架構、骨幹
- CSS:說明網頁內容骨幹的外觀該長什麼(顏色、大小、樣式)
了解基本的標籤語法,並CodePen做了幾個練習
七夕挑戰練習
七夕挑戰禮拜二(7/25)收到一個應景的挑戰作業,是要做出一張七夕的愛心卡片。配合學員現在的程度,給予適合難度的作業,可以感受到Alpha Camp的用心且也在作業區看到其他同學一些更簡潔的寫法,如:雙重迴圈
附上當時完成的愛心卡片程式碼
寫程式之前
開發軟體前的準備
軟體開發前的設計規劃工具(persona, user story, wireframe, user flow)
- 使用者故事 user story
- 使用者人物誌 persona
- 框線搞 wireframe
- 使用動線 user flow
開發軟體會需要開好規格、需求(通常是由PM列好)而persona, user story, wireframe, user flow,便是用來將需求聚焦、具體化的工具,以便更順暢的開發
其中一份最喜歡的作業是,模擬開發Gmail的 user story
這是我當時繳交的user story:
1. 主要功能為寄信及收信
2. 所有使用者使用同一界面(不需區分收信者或寄信者)
3. 使用 [寄信] [收信] [寄/收信] [信件管理] 四個標籤標示出任務屬性
- 優先
- [寄信] 使用者可撰寫信件,以便傳遞訊息(信件標題、信件內文)
- [收信] 使用者可辨識出信件是誰發來的,(使用者需申請並登入帳號方可使用服務)
- [寄信] 使用者可以將信件寄出,讓他人收到信件
- [收信] 使用者可查看收到的信件(收件夾)
- [寄信] 使用者可查看自己發過的信件 (寄件備份)
- [寄/收信] 使用者可看到信件收/發時間,以便安排信件的優先順序
- 次之
- [收信] 使用者可辨識該封收件是否看過,以免重複查看看過的郵件
- [寄信] 使用者可將未寫完的郵件存成草稿,以便被中斷時,下次能快速寫完未完成的信件
- [信件管理] 使用者可搜尋功能,可用搜尋可找到[標題、寄/收件者、內文、標籤]中符合關鍵字的信件
- [信件管理] 使用者可對信件貼上標籤(自己才看得到),以便分類郵件屬性、重要性
(對,後來看其他人的作業,才發現自己忘記考量到「刪除信件」)
前一份工作雖有做過PM相關職務(廣告系統開發),但一直沒有受過軟體工程的訓練(當然也沒有用過上面的工具)。
在Alpha Camp的這兩周開始更系統性的對軟體開發了解,現在回頭想當時的工程師夥伴真是佛心,會耐著性子解釋給我聽…
寫code前的準備
工程師開始寫code前的準備(pseudo code, 流程圖)
終於收到PM開好的需求規格後,並不會馬上就著手寫code,而是需要拆解需求,解構出每一個個小步驟,Step by step 完成任務。
並在「明確需求→寫出程式碼」的中間,還有一段人類語言轉譯為電腦語言的過程,因為直接寫程式碼會需要注意各種語法、排版…等細節,所以會用pseudo code、流程圖當成草稿列出大方向思路。
最後才是用code將腦中的解題邏輯重現!
總結,接下來要做的事
- 改善筆記的記錄方式
讓筆記更能反映出學習時遇到的困難、思考的過程,以及解決問題後對回顧當時卡住的原因以便以後遇到同樣問題時可以快速了解 - 更熟練程式工具
下周的進度會開始製作履歷網頁,應該會需要更熟練 HTML/CSS/JS跟其他工具
繼續看:
Alpha Camp 學期一 心得,W3-切版實作、期末考驗收