【直播笔记】如何应对Xdite的夺命连环问?

关于Xdite模拟面试直播讲座



在今天的直播讲座中Xdite老师视频面试了三位同学。相信即使不是亲身参与的围观群众,听到这样一个个问题也会一身冷汗。

其实像编程学习一样,应对面试也是有套路的。我在美国工作期间也经历过大大小小数场面试,之后也当过公司的面试官去interview比我资深很多的部门主管申请者,深感做一个好的故事叙述者(storyteller),能够很大程度上在面试中胜出。

以下分享几个面试小套路,希望能够对于全栈营中求职的同学有所帮助。






模拟面试问题


1.对为什么选择RoR?
2.看到你在简历上之前的专业不是编程相关,为什么会有这么大的跨度?
3.你是如何学习的ruby on rails?



面试总体策略:让面试官进入到你的套路


首先要有一个总体的框架。要想要有一个成功顺利的面试,如果只寄希望于自己的应激反应的话是靠不住的。

因此要提前设计一个框架,尽量通过一条提前设计好的套路,把经历中的闪光点可以串联起来,把面试的主动权掌握在自己的手里。要想设计这样一个套路,可以通过这种方式:

1.把自己在经历中的闪光点和成功故事罗列出来。

2.从每一段故事中提炼出两个关键词:

    一个关键词是“专业关键词”(Profession keyword),即跟专业直接相关,能够证明你自身专业能力的专业词语。这个词最好能够符合该行业的最新发展趋势,能够证明你不仅是一个已经入门的高级新手,而且是一名紧跟业界动态,具有快速学习能力的潜力新人。

    第二个关键词是“铺垫衔接词”(Clue keyword),即能够高度概括该成功故事,并且能够埋线到自己平铺直叙中的“爆点”。如刚刚Xdite老师和Nic助教在模拟面试中提到的,“比赛第一名”,“写出一个实用的小程序”等等,都是可以埋在前一段回答中,导向你设计好的下一个故事的关键词。

3.想办法把“铺垫衔接词”按照时间顺序或逻辑发展顺序串联起来。





回答具体战术:讲好一个故事



在刚才的模拟面试中,大家应该可以清晰地体会到什么是“平铺直叙”,什么是“故事讲述”。每个人在之前的工作经历中往往都是细节琐碎的,一个看似简单的产出结果其实背后可能是付出了巨大的努力。而如果你只是如同写ppt一样分点陈述,岂不是把你丰富的工作经历缩略简化了么?

因此我们要学会讲故事,把你的经历通过一个一个细节丰富首尾完整的故事表达出来。你可以通过以下这个“STAR”模型将故事讲出来:

    状况(Situation): 你是在什么样的情况之下开始的这一个项目或工作的。

在这里,其实需要来适当强调一下情况的复杂性。可能你的team或者整个公司都面临着一个棘手的问题,这个时候就需要你出场啦。

    任务(Task): 在这样的情况下,你的任务或者使命是什么,来改善目前的状况?

这个任务应该是“我需要解决一个怎样的问题”,而不是“我要做一件什么事情”。因为很有可能你的面试官在之前也遇到过类似的问题,这样来表达可以引发对方的共鸣。

    行动(Action): 你具体是是如何做的?

可以用三四句话把你通过什么样的办法,结合了什么样的工具,经过了怎样的协作,提出了什么样的解决方案。这里可以把上文中的“专业关键词”包括进去。

    结果(Result): 最终这些行动的最终产出是什么?

其中包括获得的成绩(如在编程比赛中获得名次),数字(如产品销量提高了多少),消费者/客户反馈。

刚才的模拟面试中Nic助教还有一点很棒的回答提醒到了我,就是要在Result部分加入自己对自己的点评,比如通过这个项目“发现了自己对于该领域的热忱”,“发现了自己还有巨大的潜力”,或是“对于该领域有了更多的自信”。这一部分不仅可以彰显你的独特的人格,而且很大程度上可以表达你对于该领域的自信。





除此之外,还需要注意的几个tips:


  1. 如果你是一个新手,必须要在一开始表现出对于该领域极大的热忱,以及自己具有快速学习的潜质。
  2. 在interview中快速切入到主题,避免长时间自说自话。
  3. 在初面中,丰满的人格比冰冷的技术能力更重要。初面中很多面试官不一定是技术主管,对于技术的知识不一定比你丰富。即使是技术主管,他要找的是一个之后朝夕相处的同事,而不只是一个会编程的AI。


我是懂品牌会设计会营销的产品经理MaxZ,希望跟你一起火力全栈。欢迎志同道合的朋友加我微信:zhangpengMAX


[JDstore前端秘籍] 好好的产品列表页面,为什么要跟别人长得一样呢?


关于这篇教程


做网站其实远不仅仅是“后端+前端”那么简单。对于购物网站中的【产品列表】,很多JDstore参赛同学可能只是“知其然”,知道列表页要做得像是淘宝或是京东那样的瀑布流一样的列表,然而为什么要这么做呢?这样做是适用于任何购物网站么?

很显然不尽然。很多像我的参赛作品[BosGalRun元气少女慢跑社区](https://fullstack.xinshengdaxue.com/works/581)一样,都是“服务购买”而非“产品购买”。这种类型的网站首先往往没有那么多的上架“商品”,无法组成一个产品矩阵;
其次服务作为一种体验式的购买,能够直接在【产品列表】上尽量完全地呈现服务内容和重要信息,能够很好地提高页面打开率。

同时,如果将【用户证言】,【活动回顾】等增强用户购物信心的内容如果可以有机地结合在产品列表页面,就可以在同样的产品页面面积上增加多一到两倍的触发点(touchpoint),也增加了更多转化到产品细节页面的机会。

所以就有了这篇【卡片式产品页面】教程。

Github开源代码

[BosGalRun Github](https://github.com/sihhanwang/JD-BSG)

Demo

功能版块

商品列表页面 - 左侧:商品列表(product index) ; 商品列表页面 - 右侧:明星产品介绍(products list); 商品列表页面 - 右侧:用户体验证言(testimony); 商品列表页面 - 右侧:照片回顾(recap)。

如何使用


实现整个分栏布局基本分四步: 1. 左右分栏布局; 2. 套卡片版式框架; 3. 定义卡片样式scss; 4.更改上传系统image uploader。
**1* 先布局左右分栏:** products/index.html.erb
<div class="product-index">
  <div class="container">
      <!-- 左側:產品列表,佔 8/12 -->
      <section class="col-md-8 main">
          <% @products.each_with_index do |product, index| %>
          <!-- 单个产品 -->
          <div class="row">

          </div>
        <% end %>
      </section>


      <!-- 右側:廣告欄位,佔 4/12 -->
      <section class="col-md-4 side">
        <!-- 明星产品介绍 -->
        <section class="coach-box">
        </section>

        <!-- 用户体验证言 -->
        <section class="bos-girl-box">
        </section>

        <!-- 照片回顾 -->
        <section class="event-box">
        </section>
      </section>
  </div>
</div>

2* 套卡片式框架
这个卡片式分成两个部分:
一个是row,放在后台提交的大图;
另一个是container,放下方的产品内容。

<!-- 左側:產品列表,佔 8/12 -->
<section class="col-md-8 main">
    <% @products.each_with_index do |product, index| %>
        <!-- 单个产品 -->
        <div class="row">
            <div class="w3-card-4 w3-margin w3-white">
            <!-- 产品图 -->
            <div class="clip">
                <% if product.image.present? %>
                    <%= image_tag(product.image.thumb.url, class: "clip") %>
                <% else %>
                    <%= image_tag("http://placehold.it/200x200&text=No Pic", class: "clip") %>
                <% end %>
            </div>
<!-- 产品信息部分 -->
    <div class="w3-container">
        <%= link_to(product.title , product_path(product)) %>
        <h5><span class="w3-opacity">$<%= product.price %></span></h5>
    </div>
  </div>
  </div>
  <% end %>
</section>

3* 写卡片式图片框的样式

写这个版块我参照了css剪切图片和clip的属性,具体原理可以参照这篇教学帖子的内容。如果图片无法完美适应于container的话不要着急,可以在Chrome里的“检查”选项里换着数字来调效果。
app/stylesheets/application.scss

.clip{
        position:relative;
        width:800px; //宽可根据container的大小来调试
        height:700px; //高可根据container的大小来调试
        margin-bottom: -350px; //留白下方信息框的距离

    }
    .clip img{
        position:absolute; //这个是必须设置的
        top:-20px; //top值减bottom等于矩形展示区域的高
        left:-72px; //right值减left值等于矩形展示区域的宽
        clip:rect(20px 800px 350px 70px); // (top, right, bottom, left)
    }

4* 修改uploader

如果你是按照全栈营的JDstore教程做的图片上传功能的话,会发现你从后台上传的图片,在商品列表显示时都特别模糊。
原因是因为在uploader里图片设置了压缩尺寸。经过非常长时间的苦逼调试,调试出了不太压缩图片的数值:
app/uploaders/image_uploader.rb

到这里就大功告成了!



如果你觉得这个教程对你有用的话,欢迎留言告诉我,同时更欢迎给我们的作品[BosGalRun元气少女慢跑社区]



我是懂品牌会设计会营销的产品经理MaxZ,希望跟你一起火力全栈。欢迎志同道合的朋友加我微信:zhangpengMAX




参考资料:
Rails如何使用Carrierwave上傳圖片:
http://springok-blog.logdown.com/posts/2015/10/21/railsgem-how-to-use-carrierwave-upload-pictures
感谢Anndo同学的详尽解答和帮助。Anndo同学给我参考的分栏框架:
https://gist.github.com/anndoko/16995a0d680a117e69386106618de3f4
论坛回答:
https://forum.qzy.camp/t/jdstore/1748

[前端秘籍] 视频全景首页,让你的网站鲜活起来

先上我们参赛作品[BosGalRun元气少女慢跑社区]的首页效果:
http://bosgalrun.herokuapp.com/

是否足够惊艳呢?

其实这样的首页并不是适合于每一个购物网站。相对于京东式的百货网站,可能一上来直观的landing page和产品列表会更加适合一些。

但是由于我们的网站是一个品类少,且体验性为主的网站,在大家对于产品了解有限的情况下,给用户一个好的第一印象impression是必不可少的。

因此,如果你的购物网站也与我们相似是属于服务类别的购物网站的话,不妨做一个这样令人眼前一亮的首页吧!


如果你是在JDStore的框架上,想要新建一个视频背景的home page的话,可以在welcome里新建一个home.html.erb
1* 先做一个全屏的container:

<div class="bg-container-fluid">
</div>

2* 定义一个可以放视频的display container。我这里引用了w3school的在线样式,相对来说更简单一点。所以要在页面的一开始引用。同时,因为我想在全屏视频中央放网站标题和slogan,所以我也要定义text的部分:

+ <!DOCTYPE html>
+ <html>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

+ <head>
<div class="bg-container-fluid">
+  <div class="container-video w3-display-container w3-text-white">
+  </div>
</div>

+ </head>

3* 确定样式。在刚刚引用的下面,加入样式定义:

...
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 

<style>
 .container-video {
  background-color: rgba(0, 0, 0, 0);
  margin-top: -200px;
  padding: 0px;
 }
</style>
 ...

在这里为什么要把margin-top定义为-200px呢?因为视屏放入的时候都会有默认的margin,这样会导致视频的上边与navbar会留出空隙。因此-200px会把这个视频向上“拉”,使得能呈现满屏的效果。

4* 放视频。这里的<video></video>的代码需要包裹在<div class="container-video w3-display-container w3-text-white"></div>里面。

<video autoplay=""  preload="true"  loop="" muted="" style="height: 200%; width: 120%; margin-top: -20px; margin-bottom: -50px; margin-left: -20px; margin-right: -20px;" >
<source src="你想放的视频地址" type="video/webm">
<img src="高清大图地址" title="Your browser does not support the <video> tag">
</video>

同时放一张照片<img>,是因为以防有一些浏览器不支持mp4的播放,也可以显示一张背景图片。

5* 最后,在<video></video>下面放背景视频上的logo和slogan。
<div class="w3-display-middle w3-jumbo text-center">
<img src="logo图片的地址" style="width:25%">
<p style="font-size: 32px;">网站名称</p>
<p style="font-size: 32px;">slogan</p>
</div>

这样,一个清爽且令人眼前一亮的全屏视频背景的home page就呈现出来了。

如果你觉得这个教程对你有用的话,欢迎留言告诉我,同时更欢迎给我们的作品[BosGalRun元气少女慢跑社区]投上一票!欢迎跟多的技术交流和相互支持!https://fullstack.xinshengdaxue.com/works/581

JDStore练习日志01:rake三兄弟是个好东西

Objective

今天练习了JDStore的购物车部分,包括购物车model,购物车明细,总价计算,以及编辑购物车功能的实作。
练习总共约4个小时(8个番茄钟),前后遇到两个坑耽误了时间:
一个是在进行到4-4 Story部分设置route时,出现教材内容前后不相符,导致无法设置成功页面。
后面一方面使用了rake三兄弟(感谢partner思涵同学的提醒),另一方面到github看了别的同学的代码,重新粘贴了一下route上的代码才成功。
这个也是我第一次使用github来debug。感觉自我debug的能力在增强中...
另一个是,设置购物车时报错,无法把商品添加到购物车里:


自己查了半天没找到问题,最后问助教才发现cart.rb里有一部分
def add_product_to_cart(product)
漏贴上去了......
究其原因,还是自己对于整个框架没有一个清楚的把握,先后查了好几个cart的文件都没有找到这个遗漏。对于每个功能的model,view,route的关系,需要更加清楚一些啊。

Reflective

今天全天在家里练习,虽然好不容易有一个完全的整天来赶进度,但是还是浪费了挺多的时间。整个上午时间基本上就因为做个图就浪费过去了。
还好下午调整了过来,不知道是咖啡还是午休了一下的原因。
要提醒自己,尽快要把产品做出来,把网站做出来,把影响做出来啊!离回国的时间还有11周!抓紧时间啊!

Interpretive

今天学到两个技能点:一个在migrate出错的时候学会用rake三兄弟(虽然早就知道这个了,但是一直没有去听编程英语导致没有牢固掌握这个内容);另外一个就是学会从github来看其他人同等进度的代码。
同时再次感叹一下partner的努力程度,光看她pull的commit就知道了!

Decisional

还好今天先照着贴完了第一次的JDStore,没有落下进度。
但是从下周开始一定要保证每天2-3小时的练习量,否则很容易在这个时间段被落下进度,从而功亏一篑的!
同时要做每一个小功能的复盘,总结规律,尽快对于架构有更清晰的掌握。
还有,多去参加meetup!

信息图:魔改大赛的成功方程式 (更新)

第二届的魔改大赛已经落下了帷幕。本次的比赛竞争相当激烈,同时每一位同学,包括我在内也见证了自己在这段时间里的飞速成长。

那么对照一下最终夺得名次的同学作品,是否看到了差距?

优秀作品的竞争力都体现在什么地方?

你知道第一名和第二名的得票数,来源是如此的不同么?

你知道哪一个作品,VIP投票比例是最高的么?

接下来的JDStore比赛,我们又应该从哪些地方来努力呢?

我根据本次比赛的最终数据,收集了前10名同学的得票数,投票人数,评论数,浏览量,提交作品时间以及投票成功转化率,对照我自己在比赛中的表现,设计制作了以下的信息图。如果有同学喜欢这幅信息图,欢迎评论和转发,也希望可以和同学探讨我的作品网站BosGalRun的迭代建议。

在我发布了信息图后,Xdite老师的一次线上直播对JD Store进行了展望,我在这里也用文字的方式整理到“成功方程式”:

  1. 明确比赛目的:
    做完教材上面的功能,做出不错的前端设计,做出额外的10项功能或者改动;
    学会协作技能(对于我和我的partner思涵来说,远程协作更是一种考验);
    交到许多战友;
    在大赛得到名次。

  2. 如何挑一个好主题?
    如果你认为你实力中等,做一个“主题商店”;
    如果你认为自己很有实力,做一个“服务贩售下单”网站。
    ————虽然自认为实力有限,但是有益于一开始选择了一个真的很有意思的主题——“女生慢跑社交社区”,我和我的partner商量后决定就沿用这个主题,并在现有的基础上做出“服务购买”的功能,让一个真实的产品真正在网站上上线。

  3. 功能如何不进坑?
    先写User sotry;
    功能相关角色不能超过两个;
    先排Must have/should have;
    Must have+should have不能超过10个。
    ————User Story是我和partner最近一直在做的,在打磨User Story的过程中也发现了一个很好的工具:Realtime Board. 之后会用专门的篇幅来介绍一下用这个工具的心得。

  4. 画面如何不进坑?
    先用手稿打画面;
    主线不能超过10张画面(登入/登出/静态页面/主要购买流程/个人账号设定/个人账单)。
    ————手稿画画面真的很重要,能够帮助自己来visualize你的网页。

  5. 协作建议:
    在JD Store中,两位合作者将分为主程和副程。
    主程:主要决定主题,安排事务;
    副程:辅助解决细项修饰。
    两个人最好是同一地区,同时相互能力互补,比如说后端+前端,或者开发+美术。
    同时要明确两人的上线时间和协作时间————尤其是远程协作的同学;
    只鼓励,帮助对方做得更好;
    不给对方制造麻烦(写code加注释,css命名清晰)。

  6. 关于如何赢得下一次的比赛:
    结合我上面的信息图,其实不难发现,进入前十名骑士只需要20名VIP即可。
    因此,可以学习写教程, meetup帮助别人;
    可以“组组互助”,帮助别组写功能;
    同时要不断迭代功能或者迭代画面;
    去留言鼓励别人;
    或者通过网外拉票的方式产生社交。

如果你喜欢我的这篇信息图和以上的总结,欢迎留言,转发或者打赏 : )

魔改大赛,做自己的产品经理——第二期魔改大赛回顾

作为一名二十多天前还不懂js是啥的零基础编程小白,我用5天的时间用Rails写出了人生的第一个网站——一个女性社交运动产品的线上社区:

这个网站是一个全栈编程比赛的参赛作品。一个月的时间从0到1,5天业余时间开发比赛作品,7天迭代四个版本,跟着一大群专业的developer打比赛居然还获得了不错的成绩。

更重要的是,与比赛里面大部分为了比赛而随便做一个模版的参赛作品不同,我的作品其实已经可以随时Go to Market了。

周围很多人都惊讶于我这样敏捷的开发速度——

不是说学编程至少需要半年么?
不是说超过50%的编程初学者都是“从入门到放弃”么?
产品设计——后台开发——前端开发——产品测试——增长策略,作为一个新产品开发阶段需要经历的种种环节,怎么可能在一个月的时间用业余时间就做出来了?

作为零基础入门编程的选手,我清楚地认识到自己当然不是靠技术取胜的选手。那么,在这次编程比赛中,我是如何整合自己“Mkter+PM+Developer”的角色,实现了自己和产品的“跨越式增长”呢?





策略一:心中有谱不盲目

很多产品经理似乎和程序员在产品开发中常常像一对冤家:Developer往往是“树状+线性”思维,往往都是需要在一开始画定整个工作的框架,确认开发主体(master),然后再在一个个支线(branch)上迭代完善功能;

而Product Manager的心态往往是聚焦于市场和用户(customer-facing)的,这样导致产品经理是需要“拼图性”思维,即市场的需求,产品的功能点和PMF是一个逐渐探索的过程。而这种非线性的思维和Developer的框架性思维常常会发生冲突,最经常发生的一个情况就是:

产品经理“指点江山”地要求添加新功能,工程师们“疲于奔命”地修补代码。

这种冲突,在我参加这次全栈编程大赛的时候如同双重人格一般地在我身上显现。编程大赛开始之后优秀作品出现了很多,各种教程也层出不穷。很多小白跟我一样看得眼花缭乱,什么功能都想加上去,什么bootstrap的套件都想套在自己的网站上。

常常令产品陷入到开发困境的,往往不是“不知道要什么”,而是“想要的太多”。

这个时候就要尝试把产品经理思维和工程师思维结合一下:既要有User-Oriented的思维,用于确立产品的“开发纲领”;同时又要有Computational thinking,将产品功能的开发进行解构并框架化,设计一条简洁清晰的开发路径。

全栈开发者,应该始终从User的角度出发,研究User Journey到底是什么。首先用Moscow模型筛选出Must have和should have功能,根据功能归纳出网站上的相关用户(stakeholder)后,确保每一类用户都可以顺利实现自己的目的。比如说我的参赛网站BosGalRun,核心的User Story是这样的:

这就是产品的开发纲领,也是我在该项目阶段的指南针。

然后就以该纲领为原则,切分开发时间表。大概把整个比赛分成三个阶段:

第一阶段:开发核心框架,做出最小化可行性产品(Minimum viable product);
第二阶段:优化MVP,做到更好的用户体验;
第三阶段:去做其他锦上添花的功能。
因为MVP承载了实现User Story的核心使命,因此要拿出超过60%的时间去做这看似简单的内容!在实现User Story后剩余的三分之一时间,一方面用于产品调试,另一方面谨慎开发锦上添花的功能。

千万不要看到别人有什么自己就急急忙忙去添加什么,这样只会越来越焦虑!!!





策略二:小步快跑不求完美

大多数的Hackthorn选手,在比赛前往往信心爆棚,深信自己在比赛结束的时候一定可以拿出特别炸的参赛作品,横空出世。

大多数产品开发团队,在项目开始时往往信心满满,深信自己的产品一定是最完美最颠覆的那一款,终会一炮而红。

然而一旦开始秉持“完美主义”的态度做开发,就会陷入一个“越做越做不完”的怪圈,导致功能越做越多,拼图面积越来越大。

就像这次很多参加编程比赛的选手一样,埋头苦干做网站,发誓要做出功能最全,前端最漂亮,体验最流畅的作品,结果抬头一看时间傻眼了:比赛时间将尽,大牛们的作品早已票数遥遥领先,而自己的网站做得七零八落迟迟上不了台面。

这个时候千万不要继续“闭门造车”了,赶紧把作品先扔出来再说!

之所以一旦做好MVP要先扔出来,是因为不管是开发网站还是做产品,都需要不断地调试,验证和迭代。

没有产品可以不经历testing就做出好的用户体验,而经过小范围的试错和验证,你就可以更好地找到Mkt/Product Fit,找到能够切入时常的痛点!

那么怎样地跑才是“小步快跑”呢?

比如这次编程比赛,结合上面提到的开发时间表,我是这样制定项目开发的频率(sprint)的:

以两天为一个小周期作为迭代频率。制定一个属于自己的产品开发日志(Product log),内容包括:

Objective【目标任务】
Resource【资源】
Done【已完成】
Haven't Done【未完成】
Inspiration【今日启发】
Idea【关于网站更好的想法】:有些好想法不一定要立马去做,但是可以先存起来再说。

这样其实是把敏捷开发(Agile Development)的Scrum模式进行了压缩精简,更加适合小团队协作或者全栈工程师个人作战。这样不仅能够明确目标避免跑偏,同时更能够逐渐找到自己迭代的节奏,从全局上摸清项目进程的脉络,这样的话你已经开始变得像一个产品经理了!





策略三:模块开发物尽其用

如果说我每个人都知道,认知新事物是有时间成本的。

高手对于新手而言,最大的优势可能不在于知识边界的广博,而是

对于核心知识/技能的迁移能力。

换句话说,

就是对于核心技能知识的活学活用的能力。

那么新手如果在有限的时间内无限制地扩张认知版图,就很难做到“对于核心知识的迁移”——因为想要覆盖的知识点太多,所以分配到每个知识点上的时间就会很少,认知都不一定可以完成,何谈“活学活用”呢?

而这个迁移能力体现在网站开发上,就是同一套路运用在不同使用场景。比如说bootstrap里面又一个组件叫做Carousel5的插件,就是做循环播放的幻灯片的。

你觉得这个功能可以实现哪些效果呢?

首先当然是首页的轮播效果:

另外如果你想增加一个用户证言 (testimonial) ,既然都是幻灯片类的轮播,那也可以用这个效果实现!

诸如此类的小模块内容其实还很多,比如说很基本的Bootstrap Thumbnail和Grid功能,这对于编程小白也没什么难度。把两个功能放在一起,不仅可以实现landing page的value proposition板块,还可以做活动listing的板块。

作为自己网站的产品经理,一定要学会做资源控制,尽可能地最大化成熟模块的效能,利用灵活的迁移应用实现产品的快速开发。

我就是利用以上这三大策略来指导我的开发工作的。基本上利用工作日每天2小时+一个周末6小时,大约12小时完成的文章开头的效果。







以上,就是我在参与这次编程比赛中体会到的产品开发的经验。对于我来说最大的感悟是

“一切不懂技术的产品经理都是在耍流氓。”

同时作为教育公司的产品经理,我深刻地感觉到这个side project给我带来的巨大好处:我不仅能够更加设身处地地从developer的角度来思考,而且从中学习到的很多编程思路跟产品和营销思路整合在一起,将我带到了一个新的认知层次。

虽然想要成为一个真正的full-stack product manager还有很长的路要走,但相信如果产品经理在可以在技术层面多开启一个维度,绝对会成为一个产品在敏捷开发中的强劲助推器。

原文刊载于Linkedin,题目为《一个月的时间,我是如何成为一个全栈产品经理的》

《Git入门篇》——Nic直播回顾

Git是一种时光机
代码master+branch
Github是一个代码托管仓库
其他托管仓库:github, gitlab, bitbucket, coding

Github简单介绍 Fork & Clone
Fork——叉子:从别人的reposity复制,直接建立一个一样的project在仓库上,管理者是你,但进度不会与原作者同步(需自行更新),目的在于共同协作开源代码
Clone:知识单纯复制代码到机器上,不可以再上传到reposity上(因为reposity还是别人的)
Pull request:发送代码合并请求给原作者,用意是可以合作开发开源项目,可以被原作者merge
git clone + (github上clone的代码)
先从别人地方fork 再clone自己

Work Flow工作流程

  1. master就是稳定的production
  2. develop涌来当作开发的主要分支
  3. 其他开发都是从develop切出去,最后合并回来

单人开发:

  1. Master就是稳定的production,涌来当作开发的主要分支

合并回master的隐藏好处:

  1. Github是实力展示的地方
  2. 预设branch才会被计算

日常开发流程分享

git checkout . 把之前更改的东西删掉
git diff 显示变更的内容
git merge merge到master里面
<%= users.count %>计算user人数

小工具Source tree

魔改大赛:heroku推送问题

在做好第一版搭好框架之后,决定先把作品推上去再说。然而做到git push heroku 分支名:master的时候,出现问题:
fatal
原因:在Gemfile中,未把上面的gem'sqlite3'删除掉,而是直接在第40行加了gemgem'sqlite3'~>1.3.11'
这样更新之后,还有一系列的后续步骤:
因为是修改了Gem,所以bundle install
然后Git add .
Git commit -m ""
再去执行git push heroku 分支名:master就没有问题了。
最重要的是,还要再heroku run rake db:migrate

本地图片上传平台:七牛云

Objective:学到了如何处理再heroku中上传时的问题:链接
学会了如何在网页上查看css的代码:
右键-检查-选择单独视窗-点选section查看代码;

学会了框线系统-12格
学会了敏捷项目管理开发

Relection:
高峰出现在下午听Xdite老师的敏捷项目管理,感觉对于现在的工作超级有帮助,对于自己工作和私下的几个项目开发充满了信心。
低谷出现于上午,面对一堆未知的challenge,有一些depress,不知道是应该继续做还是放弃。

Inspiration:
学到了在处理Heroku的问题时其实很简单的错误,但是不小心就疏忽了。当出现问题时,应该回头再看一下教程,一步一步地检查是否有错误,然后再Google报错。
最重要的体悟就是,人在思考问题的时候很容易失焦。如同项目开发一样,需要确定“定义成功的标准是什么”,然后再拓展出最重要的feature,再然后开始快速部署任务。

Decisional
虽然今天没怎么使用番茄钟,但是回顾一下发现学到了好多东西!
另外今天健身教练Horward的一句话很激励我:Paying the cost to be the boss.
明天早晨6点钟起,打2小时代码后再上班!

Xdite《敏捷项目管理》总结及反思

昨天听了一节自认为是全栈营开营以来对我最有价值的一门课。Xdite根据她在2012年 Facebook Hackathon上得到冠军的比赛经验,总结了一套敏捷项目管理的方法论,以下是课程的总结:

1. Hackathon和好产品的共同点:

Hackathon VS 好产品——
牛逼投影片 vs. 牛逼投影片
正确的产品,适合主办方开发布会 vs. 被市场认可并获利
最小可行性产品 vs. 在正确的时间开发出产品

因此,Hackthon的本质就是“在10小时内打造牛逼产品”。

2. 对于能够在Hackathon里可以获得名次的关键:

首先大赛最后的demo部分是最为重要的,因此必要条件就是很棒的ppt和很棒的演讲分享;
其次要从评判者的角度出发,研究清楚主办方想要的点子;
第三,大赛总共只有9个小时的时间,刨除吃饭休息的时间,只有7小时内完成。

总结过去输的原因,最主要有三个:政治不正确,时间不够,Bug很多。

3. 比赛策略

因此在一个新项目开始的时候,第一件事情就是进行时间计划:
Step 1:估算可用时间总量
9:00 - 18:00 共9小时
至少需要2个小时准备演示
莫非定律:3倍出错几率————只focus在一个功能点
9:00 - 12:00 开发
12:00 - 14:00 修补
14:00 - 16:00 测试
16:00 - 18:00 排练

Step 2: 集中精力做主要功能
9:00 - 9:30 讨论
9:30 - 10:00 部署
抓出最有风险的步骤,先行实作,铺基础
12:00 完成主要功能

Step 3:实做小功能
填补细节
找时机用户测试
防止预期外事件

Step 4: 集中力量做好demo!
Landing page说明自己
设计投影片
排演5,6次

4. 获胜要点

最终,Xdite老师获得了比赛的冠军。她总结的获胜关键是:
投影片牛逼:毕竟这是成功的关键!
演示牛逼:功能直接,演示流畅,没有bug!
有意义的成品:作为一个Facebook的收藏功能的网站,是一个很好的Facebook辅助产品!
市场成熟,明天就可以上市(production ready)。

而对比其他组,别人是如何搞砸的?
首先,花很多时间找牛逼队友;
其次,生成10个idea,依依不舍地看到了6个;
然后花掉了大把时间(5个小时)做出2个残废功能;
最后匆忙上线,bug一大把。

5. 对于长期项目

这只是一个Hachrthon的比赛策略。那么如果是一个有3个月的预计时间的项目呢?
最重要的还是抓住两个重点:
1. 定义【成功】。
明确成功的定义是什么,根据【成功】排定优先级,并保留测试时间。
在任务排序的时候要先做主线,支线,再做细节。

2. 时间规划。
先预留最后1个月时间测试;
2个月时间做功能:
Part 1:地面作业,必须做到的kit
Part 2:主干功能
Part 3:细小功能

在这样的情况下,把90天砍成60天,因为很多时候时间不充裕的情况下最高效;最后可以储存时间挥霍在排练与测试。
而很多时候做项目,往往是90天工期花了60天策划,20天搞画面,留最后10天写代码,最后项目爆炸。

6. 反思

综上所述,有两个很震撼的点:一个是定义目标,定义成功。确确实实很多时候随着产品项目的推进,大家会把大量的想法加到项目中,导致事情越做越多。而定义成功的重要性,就是使用Must Have - Should Have - Could Have - Nice to Have先来排定优先级,并且全力focus在Must Have和Could Have上。
同时,这也是做User Story的重要性:究竟User最为value的事情是什么?虽然User Story是做出MSCN下面的一步,但是User Story相当于一个Value Proposition的一个验证。当User能够完成这些story,并且这些story也是产品最希望达到的目的时,这个“成功”的定义就是合理的。

第二个点,就是关于项目时间管理。首先要把项目时间砍掉三分之一,其中前三分之二是用于产品开发,后三分之一时间用于产品调试和迭代。也许之前理想中的一个长期的项目分为两到三个小cycle进行螺旋循环开发是不太实际的。先来解决地面作业(虽然这个还不太清楚具象到自己的项目中是什么意思),然后做主干功能,再然后做细小功能。

而且“别人是如何搞砸”的部分得到的启发是,最一开始的时间,要放在快速部署和主要功能实做上,而不是无休止的brainstorming和讨论上。这个太警醒了!

另外,Xdite老师的意见更多适用于一个互联网产品上,中间省略了项目marketing和preparation的环节。实际上,应该是在完成地面作业和确定Must Have之后,就要即刻部署Marketing和BD了。当Marketing和BD开始运转后,产品可以一直保持开发,同时市场和BD在进行Generate Leads的同时也可以带回来很多产品调试和迭代的意见。这样的话必须要做到的是,在产品开发中设置适当的节点保留产品修改的checkpoint。

无敌的未来——Xdite《冲破人生天花板,从魔改大赛做起》直播回顾

主讲人: Xdite 老师
时间: 4月20日 20:00
时长: 本次直播总时长预计30分钟。
概要:冲破人生天花板,从魔改大赛做起

1. 为什么无法突破人生天花板?

因为当遇到一个有用的方法论时,90%的人不会去践行,而10%的人群中的90%不会想要做好。因此最后1%成功的人是全力以赴去做到最好,并且将自己所学总结的知识拿去教给别人。

获胜的公式:勇于踏出第一步去## 践行, 重复做三次,做总结(提取练习),教给别人。

2. 关于魔改大赛的意义:

快速提升能力:用是最好的学;
Milestone:突破自我的关键,训练做成完整作品的能力;
学会用html css装潢网站;
通过自我知识习得,获得超出教程三倍以上的知识;
用基础教材去寻找问题解答并完成作品;
更是一个结交未来创业伙伴的高品质MBA!

3. 赢得魔改大赛的秘诀:

作品要有特色,考虑能否迁移称为更好的题材;
让别人一眼知道你的网站亮点以及如何使用;
使用User Story拆解任务,通过把复杂任务拆解进行迁移学习;
总结看第一期的作品,找出必要条件,然后把几个条件做到;
不要害怕起步太晚。先迈出第一步再说,不要掉入一样的坑;
先过一遍之前别人的作品,研究别人怎么赢,然后计划自己在物理上如何接近目标;
想办法让自己的时间投入和金钱最大化。

4. 如何修改魔改大赛网站:

先做一个有所有基础功能的稳定版本,再用git checkout去做一个实验性版本。
使用git checkout可以帮助你不断试错,并且没有成本。
可以参考别人的代码,但是css不可以全文抄袭。
参考网站:
主题模版网站:https://themeforest.net/
bootstrap小元件网站:http://bootsnipp.com

5. 全栈开发者的未来:

编程能力是一个放大器。Rails学差不多5,6年就封顶,但是能够帮助你最大化很多其他的技能。
ihower老师是在学成之后开始开发其他的语言,Xdite老师是来学习项目管理。
比如Growth hacking,如果可以同时掌握开发能力和marketing,再加上项目管理能力,那就是

无敌!

(暗自幻想一下自己六月之后,应该就是一个Growth hacker的全新自己!)

6. 自我启发:

对于自己的启发是,今天就要参加魔改大赛。一方面自己要快速部署快速迭代,在编程要实现一个跨越性的增长;
另外一方面“要让自己的时间和金钱投入最大化”,所以希望这个网站做出来不只是一个暂时的template,而是一个真正可以使用的网站。正好最近女票在做一个运动社群网站,就试试能否把job-listing和她的项目结合,在自我成长的时候也可以他人实现。

这不就是最好的学么?!

另外,“全力以赴”的概念,确确实实也打动了我。或许对于编程学习和工作,哪怕目前未来待定,但是都要全力以赴,而不是“尽力而为”。

7. 5-6月小计划:

把时间节点设定在六月。希望一方面:
我可以积累更丰富的产品开发和管理经验,尤其是线上+线下产品开发。不管因为工作签证的问题是否考虑要回国,也希望在六月的时候可以做成一个ready-to-go的产品。同时可以积极向资深的老板学习经验(毕竟好像之前从来没有过一个白人男老板!),而且应该可以学到项目管理,领导力和编程多方面的经验!
另外一方面,在业余时间,可以每天抽出2小时的学习时间用于编程。目标是在2个月后,可以很好地完成全栈营的学习,并且化身为一个Growth hacker!