網站開發學習之路(4)—ALPHA Camp畢業心得
2021/12 更新：
撰文動機：
紀錄在ALPHA Camp的心路歷程
反省自己的學習歷程與職涯前言
我在去年八月中投入Alphacamp（以下簡稱AC）課程，寫完學期2–1的心得後，原本以為可以按照同樣的節奏依序完成心得，但發現從學期2–2開始的學習份量變得重得多，因此決定不寫心得，先以學習筆記為主，把每個小專案在寫成筆記，紀錄在Notion當中，不知不覺也寫了超過十篇。
我在2–3學期到學期3有中斷過兩個月，主要原因是希望有更多時間可以衝刺學期三的期末協作專案，避開孩子寒假停課＋過年。於是學期三是從今年三月開始，一直到五月初正式結束課程。
後續的準備就是完成AC畢業考題、寫side project、修改履歷、找工作。但沒想到五月中疫情爆發，女兒的學校停課，每天可支配的學習時間大幅縮短。因此拖到現在才開始寫畢業部落格。
真希望疫情早點結束。
學期1 ~ 學期2–1
當時的心得都紀錄在部落格當中。
網站開發學習之路 (2) AlphaCamp 學期 2–1 課程評價
這裡要著重撰寫後續AC的狀況。當時在部落格中有提到Pros & Cons，其中Cons部分有四點：
- 助教制有回文品質不一的風險 （已優化）
- 缺乏開放議題的社群討論（已優化）
- 學員社群經營，點到為止（已優化）
- 學員回饋給平台的管道與效果有限（管道其實很多）
這篇文章我並沒有直接回饋給AC，不過後來獲得校長Bernard的來信，從文字內容可以感受到AC的誠懇。
那麼AC在後續有什麼調整呢？
首先是從學期2–1開始試辦的作業批改量尺機制，到六月底已經推進到2–3。
作業批改量尺機制
雖然在學期三結束前，還是有感受到助教回覆品質不一的狀況，不過看到有一些助教已經在學期二採用新制做批改。
AC一起學（AC社群）
AC後續在社群經營上，也另外使用Slack平台來鼓勵同學參與，目前有七百多位學員。
裡面開放同學每天打卡，開始自學的一天（#上線打卡），可以揪團組讀書會（#想揪就揪），卡關時可以PO群組跟同學討論（#解題交流），AC也會定期舉辦讀書會和分享會，並且會發布挑戰（#眾志成城）。而這個平台真的有滿足到之前提出的Cons，覺得後來加入的AC學員實在很幸福！
由於我的時間很壓縮，又已經到要轉職的最後階段，因此暫且在這裡潛水。未來希望能和其他同學有更深的交流。
最後提到學員對AC的回饋管道，坦白說課程相關的問題只要在平台上發問，都能夠獲得助教回覆。和平台機制相關，或是個人學習進度安排的話，就要直接和AC Staff聯繫，像是Email、在平台中tag學習教練。透過問卷效果不大（主要是搜集資料用）。如果助教回答不清楚，在有效提問的前提下，繼續追問是沒問題的，可以問到飽！
總而言之，如果我此刻重新開始體驗學期1~學期2課程的話，大部分都是滿意的。
學期 2–2
學期2–2開始從微小的專案，轉而實作小專案（tiny ⇒ small）。
classie.js和Unsplash API
這裡有兩個比較重要的紀錄，一個是研究微型函式庫classie.js。
第二個是在寫作業的過程中，嘗試串接unsplash api，完成一個小的社群網站。後來也受到學習教練鼓勵，在AC一起學社群中和其他同學分享實作心得。
課外學習Figma
在2–2的學習時間安排上，並不會覺得很吃力，因此在這階段也另外在其他平台上了Figma課程，稍微體驗一下設計UI的過程，也是為了了解自己是否對前端刻板比較有熱情。
後來有將UI設計應用到作業當中（todo list）
另一個學習Figma的好處是，對後續規劃HTML結構圖、Vue Component Tree幫助蠻大的。
總結在學期2–2的心得
- 對API有比較初步的認識，透過串接Unsplash API對前後端協作開發有比較初步的體會。
- 隨著對JS語法的觀摩增多、練習次數增加，逐漸能夠閱讀並吸收教案外的程式碼，並閱讀API文件。
- 雖然讀完JavaScript的一些核心概念，也跟完教案，但上過之後很容易忘記細節，需要重新回顧並且做筆記，包括翻牌遊戲、飲料點餐機。
- 對網站開發與工具應用尚未有全局概念，這在後面銜接2–3後端課程蠻辛苦的。針對這個部分，目前2–2學期有提早加入git章節。相當能夠減輕同學在2–3的負擔。
- 雖然課外學習Figma還不錯，但如果可以重來，應該會另外再安排時間先熟悉git或node.js，因為2–3開始課程內容變得繁重許多，有點跟不上。
學期 2–3
AC對2–3學期的介紹：你將親手打造一個兼具前端體驗與後端資料庫的網路應用程式，使用網路開發的專業工具鍊，例如全端開發框架、資料庫、指令列與版本控制系統。並初步建立「產品思維」，從使用者體驗與產品功能的角度規劃程式開發流程。
從這個階段開始，開始能夠體會這張圖表：
2–2學期時，差不多就是在cliff of confusion，到了學期2-3，開始隨著上手vscode、終端機指令、github，到架設node.js伺服器、實作MVC架構，建立Mongo DB，使用Mongoose、部署到Heroku等等。學習信心逐步下滑到desert of despair。學習狀況也逐漸跟不上每週的進度。
後來調整心態，既然不是在全職狀態下學習，至少不要為了趕進度囫圇吞棗，於是決定認真把每個作業都做筆記，紀錄整個過程：
餐廳清單（github）
學習重點：
運用Node.js+ Express.js建立後端伺服器，並利用handlebars設定樣版引擎來做前端渲染。學習重點：
1. 建立MongoDB非關聯性資料庫，以及運用Mongoose來操作資料庫，包括建立Schema種子資料腳本。執行後建立種子資料。
2. 修改路由，引入MongoDB的資料。
3. 實作CRUD功能來對資料庫送request。學習重點：
1. 參考RESTful設計，修改路由。
2. 建立總路由器，將不同功能的路由拆分成不同檔案。
3. 重構Mongoose連線設定。幹話產生器（github）
學習重點：
1. 運用Node.js+ Express.js建立後端伺服器，並利用handlebars設定樣版引擎來做前端渲染。
2. 透過JS實現幹話產生器的演算法。記帳本（github / live demo）
學習重點：
1. 跟著教案思路，自行打造一個記帳本。使用工具基本上和餐廳清單一樣。
2. 將專案部署到HerokuMiddleware Time Log
學習重點：
1. 建立middleware來偵測伺服器收到請求的狀態
2. 紀錄時間戳記，包括收到請求時間、送出回應時間。Cookie & Session帳密檢查機制（github）
學習重點：
手刻Cookie-based Authentication：用瀏覽器內建的 cookie 來做，對應到伺服器的 session。短網址產生器（github / live demo）
學習重點：
1. 打造短網址產生器，將收到的網址與短網址存在資料庫中，並確保防止重複的網址出現。2. 運用套件取得五位數亂碼（nanoid）、網頁的預覽圖與說明文字（metascraper）。除了上述的全端作業，2–3還有開放選修UI/UX。
UX：同理心地圖（訪問AC學生）
UX研究：電商購物紀錄
總結在學期2–3的心得
- 大量接觸到新工具新觀念，信心有點受到影響，但寧願學得紮實，也不要為了追求速度囫圇吞棗。
- 經過許多全端專案的練習，以及UX/UI章節的學習，蠻確定自己的未來方向會走前端。詳細原因後面會再做說明。
學期 3
全端專修 or 前端專修？
從學期一走到學期三，從零開始的學習者一定會遇到這個問題。
雖然我在學期2–3發現自己比較想走前端，但一方面又覺得「懂一點後端的前端工程師應該會比較有競爭力」，因此想先學走全端路線，再自學前端。後來發現水實在太深，而且我的時間只夠專心學一個路線，那就專心衝刺前端吧！
喜歡視覺帶來的立即反饋，是我選擇專修前端的主因，其他包括我過去多年做編輯、業務、店務管理的經驗，很多時候都是站在服務業的角度來待自己的工作，覺得顧客的體驗，問題能不能被解決是重要。而前端工程師相對於後端，通常會更早思考UI的問題。
在刻畫面時，做出符合UI的畫面一直是我的成就感來源（最好是做到一模一樣）。而我也相信有好的網站外皮，才能在第一時間吸引人瀏覽。
當然網站實用度也很重要，正因為這樣，我很佩服做後端開發者，他們很可能要看到資料在畫面上跑，才會感受到較大的成就感。在尚未見到開發成果前，相信後端工程師最大的成就感是在理解一套複雜的理論，並加以應用。畫面美不美不重要，console有印出正確結果就好。
這裡另外整理一下我的想法：
為何不選擇的全端專修路線1. 全端的開發模式並不是業界主流（接案或許是）。2. 在學期2-3已經有蠻多的Node.js + Express.js練習，有一點基礎，未來再進修不難，反而是前端的基礎很薄弱。3. 個人覺得好的後端工程師，除了會更接觸底層的知識，也會很熱衷於開發libary，這部分比較不是我的興趣。為何選擇前端專修1. 前端不論使用什麼框架或工具，都需要有很紮實的css、html、javascript基礎。是一定要學習的東西，這部分前端路線有訓練到。2. 由於想要開發自己的產品，因此對UI、UX有興趣，希望自己能夠掌握刻版的能力。（刻板能力必須要訓練，目前沒有工具可以完全取代）3. 我喜歡漂亮＋實用的網頁。
AC學期三兩套課程其實都有一個共通的小毛病，就是課程版本比較舊（全端課程2021下半年會進行改版），並不能完全符合目前的趨勢。但至少通過協作專案後，能夠證明自己的自學能力。持續自學的能力可說是企業最看重的。
畢業專案協作
關於學期三的畢業專案，紀錄分成兩篇：
前端切版作品：THIRT STORE
關於這個作品
為何會選擇這個專案作為作品這個專案練習到了Navbar、Footer、Form、Stepper、Cart等版型。功能上有做出RWD、價格計算、白天／深色模式切換。以一個結帳頁面來說算是蠻齊全的。
使用了哪些技術主要運用SCSS來設定樣式，JS部分運用Template Literals載入購物車內容。其他都算比較簡單的DOM操作。之後會另外新增 Vue 3開發的版本。
相對能掌握的部分JS部分算是比較能夠掌握，因為邏輯上比較單純。
花最多時間的部分CSS設定部分，主要原因是CSS還不熟練，在要處理RWD時很容易遇到破版的狀況。此外就是在深色模式切換的部分，花了一些時間才運用Filter完整SVG的樣式變換，關於這點，置入原生SVG Code來調整fill屬性是最常見的，但在Codepen上編輯不容易管理，因此才想到要用Filter。
深刻學習的部分花最多時間的部分往往是深刻學習的部分，不過還需要更多的練習，增加切版速度。
在學期3的心得
- 從後端課程轉到前端，初步遇到最大的考驗就是CSS切版，要能在不倚靠UI框架的前提下從零刻板，還要加快切版速度，這部分需要額外多練習。
- 透過協作開發，有實際體驗到用Vue串接後端API的過程。也能夠領會前端框架之於傳統DOM操作的優勢。
- 以真正要成為一個合格的Junior前端，學期一和學期二都只是在建立觀念，要一直到學期三才會真正操練到切版和前端框架。如果過程當中沒有多做刻意練習，學期結束後就需要額外多花時間準備。以我的時間狀況只能安排到學期結束。
結語：在AC學習的收穫
這裡要先提到AC在某次問券調查中的問題：
對我來說，基本交易是一般教學平台的做法，像是Udemy、Hiskio、Ｈahow，這也是我一開始對AC的期待。基本交易與商業夥伴的差別在於，一般的教學平台不會關心課程對學員的實際成效（轉職是否成功、是否有突破），是單方向的知識傳授。當學習平台與學員的是雙向的，就能夠建立基本的商業夥伴關係，學習平台能因為學員回饋而進步，學員也能夠藉著學習平台的精進，增加學習效率。商業夥伴是我對AC的看法。
我對朋友關係的想像，比較會是像助教的角色，對至交好友的想像，應該是直接在AC內部工作才會有的關係。親密關係的話，應該就是公司核心幹部吧，完全把AC當作是人生志業。
我認為關係的建立是來自於承諾，AC其實並不承諾上完整套課程就會找到工作（還需要自學更多的課外知識），但在整個學習過程中，AC帶給我的是：
- 培養全端開發與前後端協作經驗，以及相關工具的應用。
- 建立工程師素養，包括最重要的自學能力、溝通能力、解決問題能力、良好的程式碼品質與架構、說明文件等。
一言以蔽之，就是取得成為軟體工程師的入場券吧。
題外話 — AC對個人職涯的啟發
這裡引用AC的使命宣達：
我們是 ALPHA Camp (AC)，使命是透過教育，幫助人們發展有意義、有價值的職涯，並致力於透過科技、數據、社群的力量打造最好的線上學習環境。其實這是我過去職涯一直在追求的目標，我一直試圖在工作中找到對社會的意義，比方說之前在畫室工作是為了彰顯藝術價值，在音響雜誌工作是為了提供客觀評論，在音響店工作是為了讓好音響接觸大眾。只是我眼高手低，所造成的影響力很小，收入也只能給家庭基本的溫飽。
想要轉職軟體工程師，主要原因就是意識到科技的力量，因此希望掌握軟體開發技能，投入對社會有益的產業中，AC就是其中一個我很認同的線上學習平台。
科技發展對社會的影響很大。造就了FANNG等科技巨擘，而再深入點觀察，則需要意識到我們已經進入到「監控性資本主義時代」（書籍介紹）。這本書的觀念解答了我長久的疑惑：為何現在資料科學和AI這麼發達，FANNG如何提供免費的工具，卻帶來巨大的收益？
透過AC的使命宣言和上述監控型資本主義的來臨，我希望自己在未來的職涯中，能夠常常反省自己的努力，實際上對社會貢獻了甚麼價值。
相關文摘：
在此謝謝ALPHA Camp所提供的資源，相信未來回顧這段學習經歷，不論過多久都會感到值得！
