---

圖文好讀版：http://bit.ly/2WJIr9R (原文章使用 Medium 發佈)

## 饅頭計畫是什麼?





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


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

第一個原因是一個月前跟一個資淺前端 (Junior Front-end) 朋友 Moo Jing 聊天，




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


## 先生你那位?

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





我從 2014 年開始接觸 Web ，至今寫了一百多篇技術筆記，放在這邊：
http://steventtud.com

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


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



前端工程師的後端之旅(1)  -  原來30天可以走這麼遠
文章連結：http://bit.ly/2DU1qYg

前端工程師的後端之旅(2)  -  從畫面拆解，到整理 User Story
文章連結：http://bit.ly/2TEgZIE

前端工程師的後端之旅(3)  -  路由設計以及Slug SEO優化
文章連結：http://bit.ly/2REHFHD

前端工程師的後端之旅(4)  -  前端體驗優化
文章連結：http://bit.ly/2REOAR2

前端工程師的後端之旅(5)  -  資料庫關聯設計
文章連結：http://bit.ly/2WDZA57

前端工程師的後端之旅(6)  -  利用爬蟲取得網站原始商品資料
文章連結：http://bit.ly/2UBfUlc

前端工程師的後端之旅(7)  -  爬上穹頂的最後一哩路：部署
文章連結: http://bit.ly/2BkiiFD

Javascript  -  製作 Base on Cookie 的購物車
文章連結: http://bit.ly/2MOV1Am

Javascript  -  初探Regex 正規表達式
文章連結：http://bit.ly/2Dkbfx9

Javascript  -  Shrine + Summernote 所見即所得編輯器達成圖片上傳
文章連結：http://bit.ly/2GcevhA

Javascript-世界時間表
文章連結：http://bit.ly/2HPDFEw



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

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

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

實作方面

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

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

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



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

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

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

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



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


下筆記整理思維，也可以更確立自己的了解程度。

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



### 技術亮點 1 - 爬蟲





同學 Moo Jing 的筆記如下：
前端工程師的後端之旅(6)  —  利用爬蟲取得網站原始商品資料
文章連結：http://bit.ly/2UBfUlc


前端的開源專案，要實現加入圖片時，我們必須利用拖曳觸發的事件通



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

對應的筆記:
Javascript  —  Shrine + Summernote 所見即所得編輯器達成圖片上傳
文章連結：http://bit.ly/2GcevhA

### 技術亮點 3  —  部屬上 GCP



對應的筆記：
前端工程師的後端之旅(7)  —  爬上穹頂的最後一哩路：部署
http://bit.ly/2BkiiFD

### 工商服務: Moo Jing 還在找工作!



傳送門：http://bit.ly/2DU1qYg


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





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

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


## 分享我的教學方式

饅頭計畫第零期一對一的指導方式，一對多的方式準備中，應該很快的會
開始另一波的教學:D

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

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



總結步驟共有4個:

1. Live Coding + 講解概念，介紹一個完整的規劃流程或功能實作。

2. 出作業，只有實作才能幫助你產生作品，並且真正學會。

3. 學生實作時有問題的話先嘗試自己找出答案，卡住的時候我會教學整體
的概念，降低學習曲線。

4. 最後寫成筆記，能夠完整表達出來的東西，你才是真正的吸收了。寫文章
以後留下你學習的軌跡，對於未來找工作也非常有幫助。


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

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

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

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

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

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

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




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

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

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


### 饅頭計畫- 覺醒


跟你分享全端到後端之路，針對同學技術不成熟的部份提供建議、並訓練，

讓你脫離停滯期，快速進步。

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

我的 medium 帳號如下：https://medium.com/@luka.tw

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

本篇文章原網址 (使用Medium 平台撰寫)：
http://bit.ly/2WJIr9R


--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 36.226.228.98
※ 文章代碼(AID): #1SMKcXfD (Soft_Job)
※ 文章網址: https://www.ptt.cc/bbs/Soft_Job/M.1549355425.A.A4D.html