图文好读版：http://bit.ly/2WJIr9R (原文章使用 Medium 发布)
## 馒头计画是什么?
馒头计画 (Mentor Program) 如果照意思翻译是导师计画，由较有经验的馒头
(Mentor)来带领刚入行或是经验较少的同学快速突破瓶颈，等到同学成长曲线
较平缓后，学习没接触过的新技术时，依然能在短时间内就上手。
馒头计画第零期的学生是 Moo Jing，工作经验将近一年的前端工程师，有接触
过后端，但因为碰的是 PHP 的冷门框架，所以对后端了解程度并不是很高。藉
由这次机会完整的介绍网站规划与开发流程，让 Moo Jing 的网站知识更趋于
完整。
馒头计画将来会有给零基础新手打底的幼幼班，正在准备中，应该很快就会发布
相关的教学计画。
## 为什么我想要启动馒头计画?
第一个原因是一个月前跟一个资浅前端 (Junior Front-end) 朋友 Moo Jing 聊天，
发现他在找工作，但却处于一个有点挣扎的状态。履历看起来有点不上不下，想要
往上争取更有挑战性的职位，基础还不够扎实。找同等级的前端 Junior 职位，又
有点原地踏步的感觉。
Moo Jing 是一位非常努力的工程师，下班会花时间练习写程式与学习新知。不仅如
此，还会自费买一些线上课程来学习，私心觉得这种有热情又愿意花时间精进自己的
朋友，应该要过得好一点，于是就心生一个念头，我来带你吧！
第二个原因是 2019 年我希望透过更多的分享与教学，认识与帮助更多的新血。
## 先生你那位?
先来介绍一下我自己，我是 Luka ，一个会写前端的后端工程师，目前在一家美商做
后端工程师。
为什么说是一个会写前端的后端工程师呢？ 我的职涯从全端开始，前端、后端都写，
当然是那种打杂式的全端，而不是两样都专精的全端。因为对我来说前、后端都是非
常有趣的，那就都学吧:D。
接着我面临选择专精前端或是后端两难的抉择，中间抉择过程因为程度的关系我再另
外打一篇来说明。最后我决定按照自己的兴趣，选择往后端深入研究。回过头来看几
年前的选择是正确的，选择自己所爱，坚持下去！
我从 2014 年开始接触 Web ，至今写了一百多篇技术笔记，放在这边：
http://steventtud.com
我的 Github 帐号: https://github.com/luka7go，大部分都是公司专案，以私有专
案居多。有持续地关注开源专案，因为时间规划关系较少贡献。
## 来看看 Moo Jing 一个月的训练成果
回到正题，来看看 Moo Jing 的学习成果，在一个月内上完课后，产出了 10 几篇的
笔记，手把手引导他收敛成各篇文章。写笔记很费时，但成果会让你觉得很值得。能
够完整表达出来，你才是真正的吸收了。写文章以后留下你学习的轨迹，对于未来找
工作也非常有帮助。
前端工程师的后端之旅(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
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) — 利用爬虫取得网站原始商品资料
文章连结：http://bit.ly/2UBfUlc
### 技术亮点 2 — 串接所见即所得编辑器，包含后端储存图片
Summernote 是一款前端得所见即所得得编辑器(如下图)，这是一个
前端的开源专案，要实现加入图片时，我们必须利用拖曳触发的事件通
知后端，上传图片并储存。在做这个功能之前，坦白说我是第一次碰到
这个套件。我依照我平常遇到未知领域的处理方式 Live Coding 教学。
Moo Jing 在这个试炼中通过了三个难关:
1. 阅读 Summernote 官方文件，找到编辑器是如何触发上传图片的事件。
2. 串接后端将前端传过来的图片档案储存。
3. 设计并实作图片与文章的数据库关联。
对应的笔记:
Javascript — Shrine + Summernote 所见即所得编辑器达成图片上传
文章连结：http://bit.ly/2GcevhA
### 技术亮点 3 — 部属上 GCP
坦白说我没有料到 Moo Jing 可以部属程式码到 GCP 上面。因为 Linux
的熟悉需要时间，并且在版本不同的状况下还满容易采雷的。所以这个作
业并不是“必做的”。
对应的笔记：
前端工程师的后端之旅(7) — 爬上穹顶的最后一哩路：部署
http://bit.ly/2BkiiFD
### 工商服务: Moo Jing 还在找工作!
说了这么多，Moo Jing 现在还在找工作，原因是他想要找一个有挑战性、
有成长性的工作。工作内容希望是前端，但是不限于前、后端。如果你需
要一个即战力并且具有极快学习能力的工程师，赶快把握机会吧！
传送门：http://bit.ly/2DU1qYg
## 为什么要重制一个真实世界的网站呢？
如果单纯做一个简易版教学用网站，你无法体会到开发产品级的网站需要
哪些思维，有些细节虽然不难，但是却很重要。例如：使用者体验，少做
了一些细节会让使用者很困扰，提高页面跳出率，公司的广告费就白白的
花掉了。
从头到尾做一个网站跟局部的去做一些小功能是有极大的差异的，只有局
部的开发一些小功能，很容易陷入思考的误区，例如：做一个“按赞的功
能”，当你不了解按下赞后 ajax 实际触发的后端操作是什么时，那么你
往后需要效能调教或是客制化功能时，就很有可能卡住的比别人久。越扎
实的基础，可以帮你越快速的排除问题。
馒头计画第零期的目标要来重制 Leisure Cosmetics | 台湾官方网站，
一个典型的品牌购物网站。
从重制一个网站的过程中，你可以学习到一个完整的网站开发流程。
## 分享我的教学方式
馒头计画第零期一对一的指导方式，一对多的方式准备中，应该很快的会
开始另一波的教学:D
一对一紧迫盯人强迫变强的教学方式是一对一密集的上课，在可以吸收的
情况下尽量上课。示作业的难度和所需时间来调整上课密度。
人生，学习越有效率越好，其他的时间拿去旅游、陪陪家人。我想试试看
我可以在多短的时间内让一个有基础但是可能有些某些方面还不成熟的
Junior 工程师学会完整的网站开发流程。
教学步骤如下，每一堂课都会有下面三个阶段，第一个阶段是理解，第一
次听不懂很正常，实作有问题的时候自己先尝试解决。如果这个问题超出
目前的程度那就轮到我上场了，直接带你跨越障碍，并解释整体的概念。
最后辅导学员收敛成一个个完整的主题，写成文章，这样就是一个很完整
的学习过程了。
总结步骤共有4个:
1. Live Coding + 讲解概念，介绍一个完整的规划流程或功能实作。
2. 出作业，只有实作才能帮助你产生作品，并且真正学会。
3. 学生实作时有问题的话先尝试自己找出答案，卡住的时候我会教学整体
的概念，降低学习曲线。
4. 最后写成笔记，能够完整表达出来的东西，你才是真正的吸收了。写文章
以后留下你学习的轨迹，对于未来找工作也非常有帮助。
## 接下来，馒头计画会持续嘛?
确实！馒头计画第零期是一个开始，不是结束。
馒头计画目的在于分享与推广技术。
如果愿意将自己学习的成果记录下来，
让更多人可以借由你的学习过程得到一些收获，
馒头计画是完全免费！
接下来我将推出更多版本的馒头计画，在筹划中的共有三种，分别是：
1. 馒头计画 — 从零开始茁壮班
2. 馒头计画 — 网站复制之术 (网站流程、规划实作班)
3. 馒头计画 — 觉醒 (一对一指导训练课程)
### 馒头计画- 从零开始茁壮班
馒头计画茁壮班为零基础的同学设计，从零开始带你打造第一个网页
、第一个网站。包含 HTML、CSS、JS、Bootstrap、jQuery … 等等
网页基础知识，希望尽可能的介绍网页技术给零基础的同学，或是以
前有学过，但是想要更扎实的打好底的同学上。
"有好的基础，学什么都快。"
### 馒头计画- 网站复制之术（网站流程、规划实作班）
馒头计画网站复制之术如本篇所述的教学内容，借由实际分析、规划网站
并实作出来的过程，来学习网站开发的整个流程。
适合想工作上有接触、想要了解网站开发流程的人参加。例如 PM、设计师
、前端或后端工程师…等等。
### 馒头计画- 觉醒
觉醒是一对一指导的方式，适合已经努力了一段时间，基础打的不错，但
是却苦于找不到突破点的同学。建议学习程式经验 1~3年的人参加。我会
跟你分享全端到后端之路，针对同学技术不成熟的部份提供建议、并训练，
让你脱离停滞期，快速进步。
详细的参加办法与上课的方式，我另外写一篇文章来说明，有兴趣的朋友请
follow 我的 Medium 帐号，方便收到最新的消息。
我的 medium 帐号如下：https://medium.com/@luka.tw
如果你觉得这篇文章值得跟你的朋友分享，请不吝于帮我转发分享，
如果你觉得这篇文章对你有帮助，请用拍手让我知道，我会继续努力 。
本篇文章原网址 (使用Medium 平台撰写)：
http://bit.ly/2WJIr9R