讲个故事给你一份详细的技术书

　　自上篇文章发出后，很多aclasstaghrefwiki10561ICaiii2。html产品a经理都挺有兴趣的，感谢各位的认可，我会坚持写完本书。让技术变得有趣，消除重复的技术理解工作，这是本书的初衷，也希望各位能多反馈问题，挖掘出更多产品经理技术问题的场景。
　　开发说这个需求做不了，他在骗你么？
　　小奈：我想学习写代码？
　　大仁：为什么？
　　小奈：有时提出的需求技术说不会做，但在其它平台已经实现了。
　　小奈：他是不是骗我？
　　大仁：我等下和你解释，不过非要学也可以。
　　大仁：那我建议你学下html，上次和你说的输入url后，货品其实就是网页，现在教你写网页。
　　1。村姑：html
　　html是个乡下来的的丫头，她有基本的骨架和血肉。至于它的结构，我们可以把它想像成盒子，盒子套着盒子。
　　html非常单纯，比如说：
　　lt；h1gt；表示大标题、表示段落、lt；imggt；表示段落。
　　html还有个非常有趣的标签，lt；ahref’url’gt；某个链接lt；agt；，链接标签，我们可以在一张网页里写上很多链接，这样子就很方便了。就像一张网一样，所有的网页跳转都变得很方便。
　　在互联网早期，网页都十分简陋。
　　禁用css后
　　在早期，大家就是这样子忍受的。后来大家都抱怨了，但是HTML只负责展示内容和结构。
　　好吧，后来浏览器大叔劝福它稍微打扮下，大家伙给她申请了手镯之类的装饰品，之后就有了size（尺寸）、color（颜色）、align（对齐）等，哎呦，稍微好看点。
　　村姑后来就发脾气了，妈呀，天天出门都要打扮，很累耶。
　　2。化妆师：css
　　没办法，只能请专门的化妆师了。css真的是很神奇，把html打扮的美轮美奂的。
　　（1）法宝1：选择器
　　面对着一个村姑，化妆师开始想办法了，首先是把整个html的结构定位出来。例如：要找标题，htmlamp；gt；headamp；gt；title这样子才找到，化妆师直接规定htmlheadtitle以后就是定位title了，类似的其它部件的定位也是如此。
　　部件都可以定位到了，定位到了之后就开始化妆了，例如：把这个变成红色，字体20。
　　｛color：red；size：20｝
　　（2）法宝2：盒子
　　上面我们看到，盒子都是倒在这边去了，盒子和盒子间的距离不行，这样子排版很丑耶。所以给这些盒子添加了支架，固定它们的位置。
　　边框（border）：可以设定宽窄，样式，颜色；
　　内边距（padding）：内容到边框的间距；
　　外边距（margin）：边框到相邻元素的间距；
　　（3）简单例子
　　lt；！！doctypegt；
　　lt；metacharsetutf8gt；
　　lt；titlegt；产品经理的技术课堂lt；titlegt；
　　lt；h1gt；lt；h1gt；产品经理的技术修养lt；h1gt；
　　产品经理的第一行代码
　　（4）用代码做自己介绍
　　lt；！！doctypegt；
　　lt；metahttpequivContentTypecontenttexthtml；charsetutf8gt；
　　lt；preidjackclasssayinggt；
　　lt；pregt；
　　lt；divstyledisplay：noneidwgt；lt；divgt；
　　hello大家好我是jack，我想让技术变得有趣，
　　今天教大家用代码介绍自己。
　　首先要先介绍几个东西，html标签，
　　大家可以把它想像成箱子套箱子。
　　html它本身最大的箱子
　　head它的头部
　　body它的身体
　　div这个就是真正的箱子，可以一个套一个
　　经常有产品新人问我技术问题。
　　像是前后端的区别？数据库是怎么样的？如何和研发沟通？
　　回答的多了，就想系统化的回答，写一本书，
　　让技术变得通俗易懂、有趣。
　　6年间，从技术小白到工程师再到后台、数据产品经理，
　　2000多个日夜，为代码、需求绞尽脑汁、也在创业路上走过，
　　百感交集。
　　本书以小说故事的形式、场景化讲解技术，让枯燥的技术变得有趣。
　　divamp；gt；这个箱子需要用这个来启动amp；lt；amp；gt；
　　lt；scriptlanguagejavascriptgt；
　　varindex0；
　　varword；
　　functiontype（）｛
　　vartypePaneldocument。getElementById（jack）；
　　typePanel。innerTextword。substring（0，index）；
　　if（index30）｛
　　typePanel。className；
　　｝elseif（index31）｛
　　typePanel。classNamesaying；
　　｝
　　｝
　　window。onloadfunction（）｛
　　worddocument。getElementById（w）。innerHTML；
　　setInterval（type，200）；
　　｝
　　lt；scriptgt；
　　lt；stylegt；
　　。saying：after｛
　　content：；
　　fontfamily：Arial，sansserif；
　　fontsize：1。2em；
　　lineheight：0；
　　display：inlineblock；
　　verticalalign：baseline；
　　opacity：1；
　　animation：caret500msinfinite；
　　｝
　　lt；stylegt；
　　如何与开发沟通？
　　小奈：产品经理面对开发时，需要懂技术到什么程度，怎么样才能合理沟通？
　　大仁：和你说实际案例吧，有两个技术出身转的产品，一个是我，一个是某大公司的。我刚转产品的时候，很自然的会想技术细节，这时候其实开发是反感的，有种侵犯他们领域的感觉。另一个的那位产品经理则是装不懂，实际上他技术比开发还牛。所以还是尊重开发、相信他们的专业能力（菜鸟除外）。
　　小奈：有时提出的需求技术说不会做，但在其它平台已经实现了。
　　大仁：这个还是沟通问题，其它平台和自家平台，在架构以及阶段等很多方面可能不一样，开发能力也不一样，你是想知道他有没有骗你？你可以问另一个开发，但我建议你和他搞好关系。
　　建议
　　产品经理要懂技术，这样才能理解开发，在一些功能实现可能性做取舍，和开发无障碍协作，顺利推进工作。
　　产品经理的沟通能力很重要，入职第一件事是融入团队，有点像地头蛇，大家都比较喜欢她他。
　　提出清晰明确需求，与开发沟通好进度。
　　非要写代码的话建议从html和js学起，会技术的产品经理可以随时验证自己的想法。
　　Js、App和缓存熊孩子、篮子和仓库
　　1。前端组合：熊孩子、村姑、化妆师
　　上次教大家如何用代码做自我介绍，其实用到了JavaScript（简称js）。
　　html只是个静态页面语言，如果用html做自我介绍的话，它是展示全部文字，而用上了js后，它可以让它一个一个字显示出来，像打字机一样。
　　好了，介绍下今天主角，村里的那个熊孩子就是Javascript，爱捣蛋、调皮的服务员（前端编程语言）。
　　熊孩子、村姑和化妆师是一个组合，叫前端（jshtmlcss）。
　　有兴趣就看，下面是上次的js代码，就是有个打字方法。
　　type（）
　　lt；scriptlanguagejavascriptgt；lt；scriptgt；代表脚本
　　varindex0；
　　varword；
　　functiontype（）｛打字方法的逻辑，一次打一个字
　　vartypePaneldocument。getElementById（jack）；
　　typePanel。innerTextword。substring（0，index）；
　　if（index30）｛
　　typePanel。className；
　　｝elseif（index31）｛
　　typePanel。classNamesaying；
　　｝
　　｝
　　window。onloadfunction（）｛加载入口
　　worddocument。getElementById（w）。innerHTML；
　　setInterval（type，200）；每隔0。2秒调用一下打字方法
　　｝
　　lt；scriptgt；
　　2。俊俏走红的Java
　　村里另一个小伙子Java，，生的早也生的俏，是个好厨师，做得一手好菜（后端开发主流语言，还有php等）。经常有人误会这两个的关系，问这两者的关系。
　　可以这样说，Java和Javascript的关系就像雷锋和雷锋塔一样。
　　介绍下熊孩子的发家史：
　　js发展史
　　3。移动互联网的到来
　　自从可以点外卖之后（移动互联网时代），用户体验要求变高了，都在家叫外卖。（app性能好）App有两种：iOS和Android。
　　iOSapp（用Objectivec开发）：1号外送员，生的俏，新电动车。
　　Androidapp（用Java开发）：2号外送员，生的一般，旧电动车。
　　4。iOS发布审核流程
　　下图是iOS开发到发布的流程，苹果开发需要购买证书，发布也要各种审核，保证了AppStore的应用质量。安卓流程也类似，不需要购买证书（自己用计算机可以生成），审核也比较少。
　　iOS开发发布流程
　　5。篮子和仓库：内存和运存
　　这里要介绍下缓存（一般存放在内存），虽然app和浏览器都有缓存，但是app有数据库，类似小仓库，而且app自己可以生产页面，所以app的能力比网页好得多。
　　下图是App的工作原理：App首先和服务器请求数据，然后缓存着，接着处理数据并存入数据库，根据数据生产页面并展示。
　　可以拿到数据直接展示（1243），也可以存入数据再展示（1234）。
　　App工作流程
　　6。h5和App的区别
　　h5（html5），城里的姑娘，是村姑升级版，常见于公众号开发。在浏览器打开h5网页版淘宝，其实就是下载网页回来，那么有时候网络不好甚至不通的时候体验就很差了。
　　通过浏览器打开淘宝和打开淘宝app有什么不同呢？
　　app还是需要联络服务器那边，获取数据（配方），这边自己生产页面。所以，服务器那边返回显示的数据（多少条，每一条里面显示什么），app这边根据这些数据自己生产展示出来，就不用下载页面，效果好很多。不好的地方是占用手机的资源（内存、cpu），也需要重新化妆。
　　混合开发（hybrid）也很容易理解：apph5。app里面有一个组件webview网页盒子，可以理解为一个浏览器环境盒子，用代码启用后，它也可以打开网页。
　　简单的混合开发其实就是在app里套盒子，盒子里打开指定某个网页；
　　复杂点的就是有数据的交互，在淘宝（app）打开天猫（h5），然后你发现你也可以下单购物（自动登录了），自动用淘宝的账户登陆了天猫，这就是数据交互。
　　淘宝app，混合开发
　　7。小程序
　　h5跨平台但体验差，app开发成本高（需要开发ios和安卓两个），那有没有更好的方案呢？
　　上面的混合开发算是一个，但是随着技术的进步，Facebook推出了ReactNative（js开发的移动跨平台程序），腾讯也推出了微信小程序，这是颠覆式的行业方案，从此很多iOS和安卓程序员就失业了。中小型项目都可以用ReactNative或小程序开发，js变成了高富帅，前端迎来巅峰期。
　　小程序
　　个人认为：小程序是为新零售而生的，小程序有个附近的功能，附近的零售店，对了，就是这样子的。阿里和腾讯的新零售之争，小程序服务商（有赞之类）、理发店、小卖部都可以用小程序。
　　8。完善的积木盒子
　　微信为小程序提供了很多能力，像是和微信、公众号互通的账号体系、支付能力、共享微信的消息提醒等等。可以说大大降低了开发成本，开发可以专注于盒子组装使得项目快速上线。
　　9。王者归来
　　介绍完熊孩子的发家史了，（Node。js这个还没介绍，下次吧，不然太多看晕了）从诞生到小程序，前端越来越强盛了。正所谓能力越大，责任越大，有非常强大的开发生态，自然养活了很多前端工程师。
　　10。小作业：用小程序做个自我介绍
　　开发流程
　　小程序介绍自己
　　小雪面试受挫怎么样才算是产品经理？
　　1。深南大道
　　不知不觉就加班到了22：00，看来手头上的工作是做不完了，只能回家继续做了，小奈心里想。打道回府，再迟点公交都没了。刚好可以赶上最后一班车。
　　2。面试受挫
　　滴滴滴滴，电话响起来了。
　　小奈：喂，小雪，怎么了？
　　小雪：我最近在找产品的工作，面试不怎么顺利，好烦呀。
　　小奈：怎么了这是？
　　小奈：面试官好像不信任我，要看我作品，还要问很多细节。
　　小奈：你要不要和我表哥聊聊，他是产品大牛。
　　小雪：好的，太感谢了。
　　小奈：没事。
　　3。真正的产品经理
　　大仁：你之前做过产品工作么？
　　小雪：实习过半年，平时主要工作是画原型和完善需求文档，偶尔也要跟进项目，推动开发GG完成需求开发。
　　大仁：你有过自己发现需求、策划、落地到用户真正使用的经历么？
　　小雪：额，好像没有，我的工作都偏执行。
　　大仁：那你其实还不能算是一个产品经理，产品思维还没开窍。
　　小雪：但是产品经理的工作我都做过啊，像是原型设计、需求文档、推进项目等等。
　　大仁：听起来更像是一个原型经理或项目助理。
　　大仁：一个产品经理的价值在哪呢？假如你假了12周，团队慢慢就会乱起来，发现没有你不行，那么你作为产品经理就是比较成功的。
　　4。用产品思维生擒鳌拜
　　大仁：其实我心目有个产品的偶像韦小宝。
　　需求：鳌拜一日不除，康熙只能是个傀儡皇帝。康熙想真真正正做皇帝，想执政，那么首先就是除掉鳌拜。
　　同理心：韦小宝（产品经理）无论是作为兄弟还是作为臣子，小宝一直知道皇帝要除鳌拜，做个好皇帝。
　　问题：鳌拜武艺高强，是满洲第一勇士。
　　方案探索：小蚂蚁搬得动大蜈蚣，历史上也有很多以小胜大、以少胜多的例子。
　　策划设计：秘密训练了一批习武少年降低鳌拜的戒心瓮中捉鳖。
　　落地：生擒鳌拜过程中十分凶险，小宝的随机应变、不断周旋才得以制服鳌拜。
　　生擒鳌拜
　　用户反馈：康熙夺回兵权，平西王吴三桂密谋造反，隐患巨大，小宝帮朕想想办法。
　　不断迭代：断吴三桂反叛的三路援军受封一等鹿鼎公等等。
　　产品发版：康熙终于成为一个好皇帝，励精图治。
　　大仁：从发现需求到开发落地到用户验证，经历过这样一个完整的过程，才算是产品经理的启蒙礼思维开窍。
　　5。简历怎么写？
　　大仁：扯太远了，来说点实际的吧，简历你是怎么写的？
　　hr看简历都很快，基本上都是一分钟看完一份。有些大公司由于投递简历太多，干脆就直接筛选掉一些，例如：本科211或以上、3年以上工作经验，直接卡死了很多人，当然深圳还是很多创业公司和发展中的公司。
　　简历犹如产品经理的第一个产品，面试则是第二个。简历要求信息清晰、排版简洁、有一定的文案水平，当然最重要的是产品经历，经历和经验是否贴合公司业务，公司往往找的是最匹配的人才。
　　基本信息：姓名、求职方向、电话、邮箱等。
　　工作经历：有多少段工作经历，工作业绩怎么样？是否频繁跳槽？
　　项目经验：项目相关度怎么样，是否贴合公司业务？
　　6。职业规划
　　小奈：大仁哥，对产品经理职业规划有没有什么建议？
　　大仁：同样以小宝为例子。
　　产品经理职场三宝：大平台对的领导好项目
　　练武
　　小太监：和小玄子练武，跟对了领导。
　　首领太监：替领导排忧解难，职业能力强，擒鳌拜，好项目。
　　五品太监：协助太后杀死海大富，大公司站队。
　　保护太上皇
　　副都统：管理路线，保护太上皇，替老板排忧解难。
　　老板：回家创业。
　　兼职工作：
　　天地会：青木堂堂主，产品讲师。
　　民间邪教神龙教：白龙使，行业领袖。
　　7。产品经理早期路线
　　用户产品经理后台产品经理数据产品经理人工智能产品经理。
　　产品经理后期一般有两条路线，产品专家或管理，可以根据自身的特点和优势选择。
　　8。产品总监多了，好产品少了
　　产品总监就是战略思维、商业化多了，真正有匠心的产品人少了，好的产品自然也少了。
　　你心目中的产品经理是谁？留言告白吧。
　　火车票代售点后端API和开放平台
　　1。后端API长什么样？
　　先看看API长什么样：
　　htttp：www。hellojack：主页，默认是登陆页面；
　　http：www。hellojackuseradd：用户，增加；
　　http：www。hellojackuserdelete：用户，删除；
　　http：www。hellojackuserupdate：用户，修改；
　　http：www。hellojackusersearch：用户，查询。
　　完整的API是这样的，很长是吧，所以API文档是声明前缀，然后把http：www。hellojack。com前缀略去。
　　介绍下API调用的method姿势吧，有四种姿势：post（增）、get（差）、put（改）、delete（删），这个规范叫Restful化，规范是规范，怎么使用又是另一回事了，常用的是post（增删改）和get（改）。
　　2。Node。js
　　这里以Node。js为例：编写后端，因为它比较简洁，一句代码就可以启动web服务器。
　　说明下Node。js和Js的关系，Node。js和Javascript有着本质的区别，是平台环境和创业者的关系，Javascript本身一直在浏览器沙盒里生活运行着。
　　有一天，有一帮黑客比赛项目中创造了一个新环境（Node。js），它让Javascript可以跳出浏览器沙盒，也可以干后端（Javaphp）的事，还可以开发PC端（跨windows、mac、linux多平台）。
　　Node。js也是个全能型语言，前后端都可以。看下Node。js开发的pc应用，slack也在其中。
　　Node。js开发的PC应用
　　3。Node。js开发的后端
　　扯远了，回到后端开发，下面是Node。js服务端代码，代码很少。
　　varexpressrequire（‘express’）；Node。js实现的web服务器
　　varappexpress（）；生成一个
　　app。get（‘’，function（req，res）｛这里，今天的重点，这个就是API
　　res。send（‘首页（登陆页）’）
　　｝）
　　app。post（‘user’，function（req，res）｛这里，今天的重点，这个就是API
　　res。send（‘小明’）获取用户
　　｝）
　　app。post（‘userupdate’，function（req，res）｛这里，今天的重点，这个就是API
　　res。send（‘小明’）获取用户
　　｝）
　　varserverapp。listen（8081，function（req，res）｛
　　console。log（helloworld）
　　｝）
　　4。火车票代售点
　　小奈：什么是开放平台？
　　大仁：你买过火车票么？
　　小奈：买过。
　　大仁：在哪里买的？
　　小奈：最开始在火车站买的，后来发现附近有代售点，就在代售点买。
　　大仁：是吧，平台开放的目的就是用户方便，火车站卖票卖不过来啊，尤其逢年过节的时候，大冬天的大排长龙。代售点和火车站合作，售票压力下降，用户也方便。
　　5。开放平台
　　大仁：有没有发现现在很多app都有IM和地图功能？
　　小奈：是啊，那不是很简单么？
　　大仁：如果没有地图和IM开放平台，那是根本可能实现的，这两个都是大工程，光是地图数据采集就难以想象。
　　大仁：你看满大街都是共享单车，他们肯定要基于地图来实现定位吧。所以你会看到xx地图上可以使用共享单车，肯定要合作的。照理来说应该xx地图来做这个单车的事，但是地图背后要做的事太多，所以开发平台是一种趋势，也是一种生态哲学。
　　6。商业amp；amp；生态
　　上次提到小程序，小程序其实就是应用分发入口，相当于appstore、小米华为应用市场，这就威胁到他们的应用分发生态了，所以苹果也曾有过封杀警告。
　　国内的安卓厂商也结盟推出了类似服务，小米有一个一键直达服务开放平台，直接在应用商店里，所以小米也提出了一键直达。
　　7。程序员小明的情书JavaScript脚本的力量
　　大仁：小明，听说你大学的专业是计算机科学与技术？
　　小明：是的，大仁哥。
　　大仁：那好，去帮我抢个荣耀v9。
　　小明：领导，请你尊重这门专业，计算机科学是
　　大仁：请你谈谈NAS设备卷管理模块中失效数据恢复问题的应用。
　　小明：大仁哥，脚本写好了。
　　（1）效果图
　　运行的效果图，就是模拟不断点击换一换的效果。
　　（2）图解
　　怎么做的呢？
　　让我们一步步分解。
　　document。getElementsByClassName（hotrefresh）〔0〕
　　已经获取该元素
　　模拟点击
　　定时器每100毫秒点击一次
　　setInterval（function（）｛
　　if（Date。now（）amp；gt；newDate（201732110：08：00））｛
　　document。getElementsByClassName（hotrefresh）〔0〕。click（）
　　｝
　　｝，100）；
　　大于某个时间点；
　　模拟点击。
　　（3）chrome扩展程序
　　为什么要打包成扩展程序？
　　console的脚本reload之后会被清空无法继续执行，扩展程序是个好东西
　　｛
　　name：第一个Chrome插件，
　　manifestversion：2，
　　version：1。0，
　　description：jack的第一个chrome扩展程序，
　　browseraction：｛
　　defaulticon：logo。png
　　｝，
　　contentscripts：〔
　　｛
　　matches：〔https：www。baidu。com〕，
　　js：〔content。js〕
　　｝
　　〕
　　｝
　　setInterval（function（）｛
　　if（Date。now（）amp；gt；newDate（201732110：08：00））｛
　　document。getElementsByClassName（hotrefresh）〔0〕。click（）
　　｝
　　｝，100）；
　　放到chrome扩展程序就不会被reload清空了。
　　小明用JavaScript写的的情书
　　大仁：咦，这个链接是干嘛的？
　　小明：糟了，这个不是我的情书脚本么？（超级酷炫有爱的js情书）
　　查看原文，可以看到小明用JavaScript写的情书，参考程序员开源，希望各位看官们为小明转发，转发超过1000次，小奈将接受小明的告白，查看原文为小明疯狂打call把。
　　小明用JavaScript写的的情书
　　相关阅读：
　　讲个故事，给你一份详细的技术书