好长一段时间没有更新了，因为爱莉莎参加了全栈营的商店魔改大赛，和搭档忙得天昏地暗。想想每周更新的诺言，已食言而肥，痛定思痛，今天牙缝里挤时间，总结一下大赛过去的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、工具，对作品提意见。对我们的开发帮助很大。和大家彼此鼓励打气，很欢乐。
对第二期学员的三点建议
- 先做出MVP（最小可行性产品），再做优化。时刻问自己，什么是最重要的功能？
- 建议从Bootstrap Theme "Company" 开始更改，而不是从真实商业网站全盘克隆代码，全盘克隆，坑太多。实在要抄，抄你喜欢的那一部分，把相应的CSS, js抄下来。
- 我和小伙伴开始按前端/后端分工，需要频繁交流，白天上班通信很少的我们有些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
喜欢我的文章，请关注我的微信公众号【爱莉莎的雪月花】。
谢谢阅读。
网友评论