痛并快乐着——全栈营魔改大赛心得（附三步克隆无印良品首页 + 对

好长一段时间没有更新了，因为爱莉莎参加了全栈营的商店魔改大赛，和搭档忙得天昏地暗。想想每周更新的诺言，已食言而肥，痛定思痛，今天牙缝里挤时间，总结一下大赛过去的2/3时间，我的心得体会——痛~并快乐着。

痛

卖什么好？—— 小而美差点做成了小而杂

魔改大赛，二人一组。 组队后，和搭档决定做个小而美的精品商城。开始搜集商品。
觉得卖程序员喜用的物品很棒，比如Xdite老师推荐的：超级符合人体工程学的椅子、瞬间进入心流的耳机、无影手键盘什么的。起名：神器库。响亮！（网站我还没有删http://shenqiku.herokuapp.com/）。
后又加入硅谷流行的防弹咖啡，新开一栏——生物科技饮食。 再后来，规格高的话，应该加众筹，加吧。越加越多，东西越来越杂。

第一个大坑：商品太杂。 开发前期，大部分时间砸在选商品，P图上，因为得选逼格高的商品嘛。

上线之后，发给亲朋好友看，普遍反映：东西太杂，你们到底卖什么？
Meetup 会议上，小伙伴也再三提醒，最重要的是项目能够完成，完成！！商品种类太多太杂，后面资料图片还会有很多工作要做， 难度指数上升。真是当头棒喝！

决定改版，精简产品线。刚好碰到雾霾天，现在北京上海空气污染严重，防霾产品有市场。口罩，霾表，空气净化，全方位防霾方案。防霾库：http://fangmaiku.herokuapp.com/
一个礼拜的时间白白溜走。

克隆无印良品商城网站——差点淹死在CSS、js的海洋里

定好产品，开始挑喜欢的风格，喜欢无印良品的极简风格，在手机上也适配得很好。作为主程的我，开始克隆无印良品的网络商城。

请警惕新手的幸运，花了不到四个小时，把无印良品的网站首页，克隆了下来，并贴上了自己的产品。很顺利！我们很快提交了参赛网址和源码地址。
后来，后来就傻眼了。

Muji的css文件层层嵌套，后来，我的改动经常不生效。一个导航栏（Nav bar)，调了快两天，那些控件还像下水的葫芦，按下这头，翘起那头，根本不听使唤。后来静下心来，抽丝剥茧，是上层的Container里面做了种种设置先定，一段段去掉，方好。

搭档负责页面的js $(document).ready()事件始终无法执行。但它在别的项目里正常运行。最后发现是因为muji自定义lib/map_cn.js文件导致，删除就OK。

第二个大坑： 克隆商业网站，CSS，javasript 层层嵌套，发生冲突。

好比游泳初学者，如果一开始在游泳池里学，然后到河里游泳，最后再下海，安全系数最高。
而我们，一开始就扑腾进海里，差点被淹死。

做产品，一定要谨记 must have/ should have/ could have/ nice to have 的先后顺序，先把最小可行的功能做好，再层层迭代，做加法，锦上添花。

乐

• 老师的肯定： 改版后，XDtie老师说，很有创意。我们很开心。

• 镜像学习
  搭档每天改代码改到很晚，看到那么努力的她，我也不敢心生懈怠。
  小伙伴p图功力日渐增长，把Mac自带的Preview玩出了photoshop的新高度。请看她的分享。
  我对数据库，routes.rb理解更为深刻，没在Muji CSS、js的大海里淹死，呛了几口水，我就不怕水了。只要花时间，一层层理，bug大多数可以自我解决。
  Meetup上，同学们分享好用的Gem、工具，对作品提意见。对我们的开发帮助很大。和大家彼此鼓励打气，很欢乐。

对第二期学员的三点建议

1. 先做出MVP（最小可行性产品），再做优化。时刻问自己，什么是最重要的功能？
2. 建议从Bootstrap Theme "Company" 开始更改，而不是从真实商业网站全盘克隆代码，全盘克隆，坑太多。实在要抄，抄你喜欢的那一部分，把相应的CSS, js抄下来。
3. 我和小伙伴开始按前端/后端分工，需要频繁交流，白天上班通信很少的我们有些hold不住。
   后来改为模块分工：比如我做主页，她做商品展示页，各自负责相应的前后端，更方便同步，更有效率。

三步克隆无印良品首页

工具： Chrome 浏览器， 查看网页
在你的工程里把 index.html.erb 清空。

第一步

打开muji官网，点击右键，【查看网页源代码】，复制粘贴到自己的index.html.erb里面。

点击右键，【查看网页源代码】：

微信公众号【爱莉莎的雪月花】2.png

muji 首页源码：

微信公众号【爱莉莎的雪月花】3.png

复制粘贴到自己的index.html.erb里面：

微信公众号【爱莉莎的雪月花】4.png

第二步

打开muji官网，点击右键 ->【检查】->进入开发工具->点击 Source， 将 image、css、javascript 文件分别复制到 public/images 、app/assets/stylesheets 、app/assets/javascripts 下面。
注意子文件夹，要将整个文件夹和内容都复制过来。

右键 ->【检查】：

微信公众号【爱莉莎的雪月花】1.png

进入开发工具->点击 Source：

微信公众号【爱莉莎的雪月花】5.png

将 image文件复制到 public/images， panel 文件夹整个Copy过来：

微信公众号【爱莉莎的雪月花】6.png 微信公众号【爱莉莎的雪月花】9.png

将 css文件复制到 app/assets/stylesheets 下面：

微信公众号【爱莉莎的雪月花】8.png

将javascript 文件复制到 app/assets/javascripts 下面：

微信公众号【爱莉莎的雪月花】7.png

第三步，将index.html.erb 中的相对路径，指到你的项目中的路径：

比如： images 从 /cn/store/contents/img/ 更改为：/images/

微信公众号【爱莉莎的雪月花】10.png

刷新，搞定

微信公众号【爱莉莎的雪月花】11.png
：
如果你遇到问题，请联系我。

感谢这次魔改大赛，给了我们很棒的一次提取练习。

点击防霾库， 或者 扫描下面二维码，进入我们的参赛作品页面。
喜欢我们的作品，请投上您宝贵的一票（需要邮箱注册，但勿许验证），你的鼓励，如春天初升的太阳，温暖感人！感谢！

投票.jpg

喜欢我的文章，请关注我的微信公众号【爱莉莎的雪月花】。
谢谢阅读。