饅頭計畫第零彈 — 不管你是前端、後端，兇狠的變強吧 | 成果分享

饅頭計畫是什麼?

饅頭計畫 (Mentor Program) 如果照意思翻譯是導師計畫，由較有經驗的饅頭(Mentor)來帶領剛入行或是經驗較少的同學快速突破瓶頸，等到同學成長曲線較平緩後，學習沒接觸過的新技術時，依然能在短時間內就上手。

饅頭計畫第零期的學生是 Moo Jing，工作經驗將近一年的前端工程師，有接觸過後端，但因為碰的是 PHP 的冷門框架，所以對後端了解程度並不是很高。藉由這次機會完整的介紹網站規劃與開發流程，讓 Moo Jing 的網站知識更趨於完整。

饅頭計畫將來會有給零基礎新手打底的幼幼班，正在火熱準備中，很快就會發佈相關的教學計畫，敬請期待。

為什麼我想要啟動饅頭計畫?

第一個原因是一個月前跟一個資淺前端 (Junior Front-end) 朋友 Moo Jing 聊天，發現他在找工作，但卻處於一個有點掙扎的狀態。履歷看起來有點不上不下，想要往上爭取更有挑戰性的職位，基礎還不夠扎實。找同等級的前端 Junior 職位，又有點原地踏步的感覺。

Moo Jing 是一位非常努力的工程師，下班會花時間練習寫程式與學習新知。不僅如此，還會自費買一些線上課程來學習，私心覺得這種有熱情又願意花時間精進自己的朋友，應該要過得好一點，於是就心生一個念頭，我來帶你吧！

第二個原因是 2019 年我希望透過更多的分享與教學，認識與幫助更多的新血。這是我的 2019 新年新希望：

先生你哪位?

先來介紹一下我自己，我是 Luka ，一個會寫前端的後端工程師，目前在一家美商做後端工程師。

為什麼說是一個會寫前端的後端工程師呢？ 我的職涯從全端開始，前端、後端都寫，當然是那種打雜式的全端，而不是兩樣都專精的全端。因為對我來說前、後端都是非常有趣的，那就都學吧:D。

接著我面臨選擇專精前端或是後端兩難的抉擇，中間抉擇過程因為篇幅的關係我再另外打一篇來說明。最後我決定按照自己的興趣，選擇往後端深入研究。回過頭來看幾年前的選擇是正確的，選擇自己所愛，堅持下去！

我從 2014 年開始接觸 Web ，至今寫了一百多篇技術筆記，放在 Luka 的技術筆記。

我的 Github 帳號，大部分都是公司專案，以私有專案居多。有持續地關注開源專案，因為時間規劃的關係較少貢獻。

來看看 Moo Jing 一個月的訓練成果

回到正題，來看看 Moo Jing 的學習成果，在一個月內上完課後，產出了 10 幾篇的筆記，手把手引導他收斂成各篇文章。寫筆記很費時，但成果會讓你覺得很值得。能夠完整表達出來，你才是真正的吸收了。寫文章留下你學習的軌跡，對於未來找工作也非常有幫助。

1. 前端工程師的後端之旅(1) — 原來30天可以走這麼遠
2. 前端工程師的後端之旅(2) — 從畫面拆解，到整理 User Story
3. 前端工程師的後端之旅(3) — 路由設計以及Slug SEO優化
4. 前端工程師的後端之旅(4) — 前端體驗優化
5. 前端工程師的後端之旅(5) — 資料庫關聯設計
6. 前端工程師的後端之旅(6) — 利用爬蟲取得網站原始商品資料
7. 前端工程師的後端之旅(7) — 爬上穹頂的最後一哩路：部署
8. Javascript — 製作 Base on Cookie 的購物車
9. Javascript — 初探Regex 正規表達式
10. Javascript — Shrine + Summernote 所見即所得編輯器達成圖片上傳

Moo Jing 在這個月學到了什麼？依照我的教學類型來分類一下。大致上可分為「網站流程規劃的硬實力」與「高效率學習的心法」兩類，兩者都很重要，缺一不可。

訓練成果 1 — 網站流程規劃與實作

網站流程規劃包含以下三項，如果你不知道如何規畫網站流程，沒有經過實戰的練習，你就無法在公司需要你的時候挺身而出。

• Page Flow (頁面流程圖) — 使用頁面流程圖表達網站流程
• User Story (使用者故事) — 使用文字的描述出使用者的使用情景。
• Site Map(網站地圖) — 總覽網站提供的所有的功能

實作方面

• 從網站畫面反推出後台要如何設計。
• 實作功能需要如何做資料庫規劃，或是使用哪些技術來完成功能。
• 如何找到需要的開源專案(Open Source Project)來完成功能。

訓練成果 2 — 高效率學習的習慣

如果你不知道你學習的方法有哪些缺點，加以修正，那麼你可能費了很大的努力卻沒有相對應的成果。

前端工程師的後端之旅(1) — 原來30天可以走這麼遠，很到味的把我想傳達的觀念寫了出來。節錄兩小段原來「30天可以走這麼遠」的內容，想看完整請點進去原文觀看吧。

(以下兩段節錄作者是 Moo Jing)

節錄 1： 不管看了多少新的東西，記得專注解決眼前的問題

記得這段時間我每天睡醒就是開電腦看新文章，但是我有一個習慣，就是容易對眼前的疑惑追根究底，進而太過鑽牛角尖。在這次練習經驗裡，這個習慣就造成我不少困擾。不過也多虧我的mentor（Luka)在這中間給了我不少提醒，適時的調整心態，最有效的一個建議就是：

不管看了多少新的東西，記得專注解決眼前的問題

在實作期間，花在研究新技術的時間，最好都是為了解決問題，否則容易太發散，到最後根本忘了自己一開始要做什麼，而你必須有能力判斷目前正在接收的資訊是否適合現階段的學習。相信不少人在學習路上也遇到過跟我類似的問題吧，基本上只要能夠抓住這個原則，就能避免走進迷失方向的惡性循環。

節錄 2：維持紀錄所學的習慣

這段日子裡我不斷重複一種學習->吸收－>紀錄的循環。一開始看到新的東西，腦子未必能夠馬上吸收，但是可以對這個技術有一定的了解，而透過實作來學習最大的好處就是可以得到即時的回饋。最後透過寫下筆記整理思維，也可以更確立自己的了解程度。

看文章學習- > 導入實做 -> 試著把學到的東西記錄下來寫成文章

很多人一聽到要另外花時間寫筆記就覺得很麻煩，我的建議是，不管紀錄的詳不詳細，都盡量練習把理解到的東西寫下來，可以訓練對知識的熟悉度，更重要的也同時在訓練表達能力。

技術亮點 1 — 爬蟲

因為我想要讓作品更加的栩栩如生，所以我用一堂課的時間教學了如何使用爬蟲爬取真實世界的商品資料，讓這個小作品更加逼真。只要實際工作情況會用的的東西我會盡可能的教，幫助學生快速成長。

爬蟲並不是了不起的技術，之所以歸類為技術亮點，是因為原本是前端工程師的 Moo Jing 第一次接觸爬蟲，經過一堂課的時間就可以學會。這可以證明兩件事情，一是 Moo Jing 的學習能力很不錯。二是讓我知道我的教學方式應該還算容易理解的，給了我不少信心。

同學 Moo Jing 的筆記如下：前端工程師的後端之旅(6) — 利用爬蟲取得網站原始商品資料

技術亮點 2 — 串接所見即所得編輯器，包含後端儲存圖片

Summernote 是一款前端得所見即所得得編輯器(如下圖)，這是一個前端的開源專案，要實現加入圖片時，我們必須利用拖曳觸發的事件通知後端，上傳圖片並儲存。在做這個功能之前，坦白說我是第一次碰到這個套件。我依照我平常遇到未知領域的處理方式 Live Coding 教學。Moo Jing 在這個試煉中通過了三個難關:

1. 閱讀 Summernote 官方文件，找到編輯器是如何觸發上傳圖片的事件。
2. 串接後端將前端傳過來的圖片檔案儲存。
3. 設計並實作圖片與文章的資料庫關聯。

對應的筆記:
Javascript — Shrine + Summernote 所見即所得編輯器達成圖片上傳

技術亮點 3 — 部屬上 GCP

坦白說我沒有料到 Moo Jing 可以部屬程式碼到 GCP 上面。因為 Linux 的熟悉需要時間，並且在版本不同的狀況下還滿容易採雷的。所以這個作業並不是「必做的」。

對應的筆記：
前端工程師的後端之旅(7) — 爬上穹頂的最後一哩路：部署

為什麼要重製一個真實世界的網站呢？

如果單純做一個簡易版教學用網站，你無法體會到開發產品級的網站需要哪些思維，有些細節雖然不難，但是卻很重要。例如：使用者體驗，少做了一些細節會讓使用者很困擾，提高頁面跳出率，公司的廣告費就白白的花掉了。

從頭到尾做一個網站跟局部的去做一些小功能是有極大的差異的，只有局部的開發一些小功能，很容易陷入思考的誤區，例如：做一個「按讚的功能」，當你不了解按下讚後 ajax 實際觸發的後端操作是什麼時，那麼你往後需要效能調教或是客製化功能時，就很有可能卡住的比別人久。越扎實的基礎，可以幫你越快速的排除問題。

饅頭計畫第零期的目標要來重製 Leisure Cosmetics | 台灣官方網站，一個典型的品牌購物網站。

從重製一個網站的過程中，你可以學習到一個完整的網站開發流程。

分享我的教學方式

饅頭計畫第零期一對一的指導方式，一對多的方式準備中，應該很快就會發佈相關消息。

一對一緊迫盯人強迫變強的教學方式是一對一密集的上課，在可以吸收的情況下盡量上課。示作業的難度和所需時間來調整上課密度。

人生，學習越有效率越好，其他的時間拿去旅遊、陪陪家人。我想試試看我可以在多短的時間內讓一個有基礎但是可能有些某些方面還不成熟的 Junior 工程師學會完整的網站開發流程。

教學步驟如下，每一堂課都會有下面三個階段，第一個階段是理解，第一次聽不懂很正常，實作有問題的時候自己先嘗試解決。如果這個問題超出目前的程度那就輪到我上場了，直接帶你跨越障礙，並解釋整體的概念。最後輔導學員收斂成一個個完整的主題，寫成文章，這樣就是一個很完整的學習過程了。

總結步驟共有4個:

1. Live Coding + 講解概念，介紹一個完整的規劃流程或功能實作。
2. 出作業，只有實作才能幫助你產生作品，並且真正學會。
3. 學生實作時有問題的話先嘗試自己找出答案，卡住的時候我會教學整體的概念，降低學習曲線。
4. 最後寫成筆記，能夠完整表達出來的東西，你才是真正的吸收了。寫文章以後留下你學習的軌跡，對於未來找工作也非常有幫助。

接下來，饅頭計畫會持續嘛?

確實！饅頭計畫第零期是一個開始，不是結束。

饅頭計畫目的在於分享與推廣技術。

如果願意將自己學習的成果記錄下來，讓更多人可以藉由你的學習過程得到一些收獲，饅頭計畫是完全免費！

接下來我將推出更多版本的饅頭計畫，在籌劃中的共有三種，分別是：

• 饅頭計畫 — 從零開始茁壯班
• 饅頭計畫 — 網站複製之術 (網站流程、規劃實作班)
• 饅頭計畫 — 覺醒 (一對一指導訓練課程)

饅頭計畫- 從零開始茁壯班

饅頭計畫茁壯班為零基礎的同學設計，從零開始帶你打造第一個網頁、第一個網站。包含 HTML、CSS、JS、Bootstrap、jQuery … 等等網頁基礎知識，希望盡可能的介紹網頁技術給零基礎的同學，或是以前有學過，但是想要更扎實的打好底的同學上。

有好的基礎，學什麼都快。

饅頭計畫- 網站複製之術（網站流程、規劃實作班）

饅頭計畫網站複製之術如本篇所述的教學內容，藉由實際分析、規劃網站並實作出來的過程，來學習網站開發的整個流程。

適合想工作上有接觸、想要了解網站開發流程的人參加。例如 PM、設計師、前端或後端工程師…等等。

饅頭計畫- 覺醒

覺醒是一對一指導的方式，適合已經努力了一段時間，基礎打的不錯，但是卻苦於找不到突破點的同學。建議學習程式經驗 1~3年的人參加。我會跟你分享全端到後端之路，針對同學技術不成熟的部份提供建議、並訓練，讓你脫離停滯期，快速進步。

詳細的參加辦法與上課的方式，我另外寫一篇文章來說明，有興趣的朋友請 follow 我的 Medium 帳號，方便收到最新的消息。

如果你覺得這篇文章值得跟你的朋友分享，請不吝於幫我轉發分享，
如果你覺得這篇文章對你有幫助，請用拍手讓我知道，我會繼續努力 。

支持 = 10下
不錯 = 20下
讚 = 30下
很棒 = 40下
激推 = 50下