起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識講個故事，給你一份詳細的技術書（2）
自上篇文章發出后，很多產品經理都挺有興趣的，感謝各位的認可，我會堅持寫完本書。讓技術變得有趣，消除重復的技術理解工作，這是本書的初衷，也希望各位能多反饋問題，挖掘出更多產品經理技術問題的場景。
開發說這個需求做不了，他在騙你么？
小奈：我想學習寫代碼？
大仁：為什么？
小奈：有時提出的需求技術說不會做，但在其它平臺已經實現了。
小奈：他是不是騙我？
大仁：我等下和你解釋，不過非要學也可以。
大仁：那我建議你學下html，上次和你說的輸入url后，貨品其實就是網頁，現在教你寫網頁。
1. 村姑：html
html是個鄉下來的的丫頭，她有基本的骨架和血肉。至于它的結構，我們可以把它想像成盒子，盒子套著盒子。
html非常單純，比如說：<h1>表示大標題、<p>表示段落、<img>表示段落。
html還有個非常有趣的標簽，<a href=’url’>某個鏈接</a>, 鏈接標簽，我們可以在一張網頁里寫上很多鏈接，這樣子就很方便了。就像一張網一樣，所有的網頁跳轉都變得很方便。
在互聯網早期，網頁都十分簡陋。
禁用css后
在早期，大家就是這樣子忍受的。后來大家都抱怨了，但是HTML只負責展示內容和結構。
好吧，后來瀏覽器大叔勸福它稍微打扮下，大家伙給她申請了手鐲之類的裝飾品，之后就有了size（尺寸）、color（顏色）、align（對齊）等，哎呦，稍微好看點。
村姑后來就發脾氣了，媽呀，天天出門都要打扮，很累耶。
2. 化妝師 ：css
沒辦法，只能請專門的化妝師了。css真的是很神奇，把html打扮的美輪美奐的。
（1）法寶1：選擇器
面對著一個村姑，化妝師開始想辦法了，首先是把整個html的結構定位出來。例如：要找標題，html>head>title這樣子才找到，化妝師直接規定 html head title 以后就是定位title了，類似的其它部件的定位也是如此。
部件都可以定位到了，定位到了之后就開始化妝了，例如：把這個變成紅色，字體20。
{color:red;size:20}
（2）法寶2：盒子
上面我們看到，盒子都是倒在這邊去了，盒子和盒子間的距離不行，這樣子排版很丑耶。所以給這些盒子添加了支架，固定它們的位置。
- 邊框（border）： 可以設定寬窄，樣式，顏色；
- 內邊距(padding)： 內容到邊框的間距；
- 外邊距(margin)： 邊框到相鄰元素的間距；
（3）簡單例子
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>產品經理的技術課堂</title>
</head>
<body>
<h1>產品經理的技術修養</h1>
<p>產品經理的第一行代碼</p></body>
</html>
（4）用代碼做自己介紹
<!DOCTYPE html>
<html>
<head>
</head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<body>
<pre id=”jack” class=”saying”></pre>
<div style=”display:none” id=”w”>
hello 大家好 我是jack，我想讓技術變得有趣，
今天教大家用代碼介紹自己。
首先要先介紹幾個東西，html標簽，
大家可以把它想像成箱子套箱子。html 它本身最大的箱子
head 它的頭部
body 它的身體
div 這個就是真正的箱子，可以一個套一個經常有產品新人問我技術問題。
像是前后端的區別？數據庫是怎么樣的？如何和研發溝通？
回答的多了，就想系統化的回答，寫一本書，
讓技術變得通俗易懂、有趣。
6年間，從技術小白到工程師再到后臺、數據產品經理，
2000多個日夜，為代碼、需求絞盡腦汁、也在創業路上走過，
百感交集。
本書以小說故事的形式、場景化講解技術，讓枯燥的技術變得有趣。
/div> 這個箱子需要用這個來啟動<>
</div><script language=”javascript”>
var index=0;
var word;
function type(){
var typePanel = document.getElementById(“jack”);
typePanel.innerText = word.substring(0,index++);
if(index % 3 == 0){
typePanel.className = “”;
}else if(index % 3 == 1){
typePanel.className = “saying”;
}
}
window.onload=function(){
word=document.getElementById(“w”).innerHTML;
setInterval(type, 200);
}</script>
<style>
.saying:after {
content: “|”;
font-family: Arial, sans-serif;
font-size: 1.2em;
line-height: 0;
display: inline-block;
vertical-align: baseline;
opacity: 1;
animation: caret 500ms infinite;
}
</style>
</body>
如何與開發溝通？
小奈：產品經理面對開發時，需要懂技術到什么程度，怎么樣才能合理溝通？
大仁：和你說實際案例吧，有兩個技術出身轉的產品，一個是我，一個是某大公司的。我剛轉產品的時候，很自然的會想技術細節，這時候其實開發是反感的，有種侵犯他們領域的感覺。另一個的那位產品經理則是裝不懂，實際上他技術比開發還牛。所以還是尊重開發、相信他們的專業能力（菜鳥除外）。
小奈：有時提出的需求技術說不會做，但在其它平臺已經實現了。
大仁：這個還是溝通問題，其它平臺和自家平臺，在架構以及階段等很多方面可能不一樣，開發能力也不一樣，你是想知道他有沒有騙你？你可以問另一個開發，但我建議你和他搞好關系。
建議
- 產品經理要懂技術，這樣才能理解開發，在一些功能實現可能性做取舍，和開發無障礙協作，順利推進工作。
- 產品經理的溝通能力很重要，入職第一件事是融入團隊，有點像地頭蛇，大家都比較喜歡她/他。
- 提出清晰明確需求，與開發溝通好進度。
- 非要寫代碼的話建議從html和js學起，會技術的產品經理可以隨時驗證自己的想法。
Js、App和緩存——熊孩子、籃子和倉庫
1. 前端組合：熊孩子、村姑、化妝師
上次教大家如何用代碼做自我介紹，其實用到了JavaScript（簡稱js）。
html只是個靜態頁面語言，如果用html做自我介紹的話，它是展示全部文字，而用上了js后，它可以讓它一個一個字顯示出來，像打字機一樣。
好了，介紹下今天主角，村里的那個熊孩子就是Javascript，愛搗蛋、調皮的服務員(前端編程語言)。
熊孩子、村姑和化妝師是一個組合，叫前端（js+html+css）。
有興趣就看，下面是上次的js代碼，就是有個打字方法。
type()
<script language=”javascript”> //<script>代表腳本
var index=0;
var word;
function type(){ //打字方法的邏輯，一次打一個字
var typePanel = document.getElementById(“jack”);
typePanel.innerText = word.substring(0,index++);
if(index % 3 == 0){
typePanel.className = “”;
}else if(index % 3 == 1){
typePanel.className = “saying”;
}
}
window.onload=function(){ //加載入口
word=document.getElementById(“w”).innerHTML;
setInterval(type, 200); //每隔0.2秒調用一下打字方法
}
</script>
2. 俊俏走紅的Java
村里另一個小伙子Java,，生的早也生的俏，是個好廚師，做得一手好菜（后端開發主流語言，還有php等）。經常有人誤會這兩個的關系，問這兩者的關系。
可以這樣說，Java和Javascript的關系就像雷鋒和雷鋒塔一樣。
介紹下熊孩子的發家史：
js發展史
3. 移動互聯網的到來
自從可以點外賣之后（移動互聯網時代），用戶體驗要求變高了，都在家叫外賣。（app性能好）App有兩種：iOS和Android。
- iOS app（用Objective-c開發）：1號外送員，生的俏，新電動車。
- Android app（用Java開發）：2號外送員，生的一般，舊電動車。
4. iOS發布審核流程
下圖是iOS開發到發布的流程，蘋果開發需要購買證書，發布也要各種審核，保證了App Store的應用質量。安卓流程也類似，不需要購買證書（自己用計算機可以生成），審核也比較少。
iOS開發發布流程
5. 籃子和倉庫：內存和運存
這里要介紹下緩存（一般存放在內存），雖然app和瀏覽器都有緩存，但是app有數據庫，類似小倉庫，而且app自己可以生產頁面，所以app的能力比網頁好得多。
下圖是App的工作原理：App首先和服務器請求數據，然后緩存著，接著處理數據并存入數據庫，根據數據生產頁面并展示。
可以拿到數據直接展示（1-2-4-3），也可以存入數據再展示（1-2-3-4 ）。
App工作流程
6. h5和App的區別
h5（html5）, 城里的姑娘，是村姑升級版，常見于公眾號開發。在瀏覽器打開h5網頁版淘寶，其實就是下載網頁回來，那么有時候網絡不好甚至不通的時候體驗就很差了。
通過瀏覽器打開淘寶和打開淘寶app有什么不同呢？
app還是需要聯絡服務器那邊，獲取數據（配方），這邊自己生產頁面。所以，服務器那邊返回顯示的數據（多少條，每一條里面顯示什么），app這邊根據這些數據自己生產展示出來，就不用下載頁面，效果好很多。不好的地方是占用手機的資源（內存、cpu），也需要重新化妝。
混合開發(hybrid)也很容易理解：app+h5。app里面有一個組件webview網頁盒子，可以理解為一個瀏覽器環境盒子，用代碼啟用后，它也可以打開網頁。
- 簡單的混合開發其實就是在app里套盒子，盒子里打開指定某個網頁；
- 復雜點的就是有數據的交互，在淘寶（app）打開天貓（h5），然后你發現你也可以下單購物（自動登錄了），自動用淘寶的賬戶登陸了天貓，這就是數據交互。
淘寶app，混合開發
7. 小程序
h5跨平臺但體驗差，app開發成本高（需要開發ios和安卓兩個），那有沒有更好的方案呢？
上面的混合開發算是一個，但是隨著技術的進步，Facebook推出了React Native（js開發的移動跨平臺程序），騰訊也推出了微信小程序，這是顛覆式的行業方案，從此很多iOS和安卓程序員就失業了。中小型項目都可以用React Native或小程序開發，js變成了高富帥，前端迎來巔峰期。
小程序
個人認為：小程序是為新零售而生的，小程序有個附近的功能，附近的零售店，對了，就是這樣子的。阿里和騰訊的新零售之爭，小程序服務商（有贊之類）、理發店、小賣部都可以用小程序。
8. 完善的積木盒子
微信為小程序提供了很多能力，像是和微信、公眾號互通的賬號體系、支付能力、共享微信的消息提醒等等?？梢哉f大大降低了開發成本，開發可以專注于盒子組裝使得項目快速上線。
9. 王者歸來
介紹完熊孩子的發家史了，（Node.js這個還沒介紹，下次吧，不然太多看暈了）從誕生到小程序，前端越來越強盛了。正所謂能力越大，責任越大，有非常強大的開發生態，自然養活了很多前端工程師。
10. 小作業：用小程序做個自我介紹
開發流程
小程序介紹自己
小雪面試受挫——怎么樣才算是產品經理？
1. 深南大道
不知不覺就加班到了22:00，看來手頭上的工作是做不完了，只能回家繼續做了，小奈心里想。打道回府，再遲點公交都沒了。剛好可以趕上最后一班車。
2. 面試受挫
“滴滴滴滴“，電話響起來了。
小奈：喂，小雪，怎么了？
小雪：我最近在找產品的工作，面試不怎么順利，好煩呀。
小奈：怎么了這是？
小奈：面試官好像不信任我，要看我作品，還要問很多細節。
小奈：你要不要和我表哥聊聊，他是產品大牛。
小雪：好的，太感謝了。
小奈：沒事。
3. 真正的產品經理
大仁：你之前做過產品工作么？
小雪：實習過半年，平時主要工作是畫原型和完善需求文檔，偶爾也要跟進項目，推動開發GG完成需求開發。
大仁：你有過自己發現需求、策劃、落地到用戶真正使用的經歷么？
小雪：額，好像沒有，我的工作都偏執行。
大仁：那你其實還不能算是一個產品經理，產品思維還沒開竅。
小雪：但是產品經理的工作我都做過啊，像是原型設計、需求文檔、推進項目等等。
大仁：聽起來更像是一個原型經理或項目助理。
大仁：一個產品經理的價值在哪呢？假如你假了1-2周，團隊慢慢就會亂起來，發現沒有你不行，那么你作為產品經理就是比較成功的。
4. 用產品思維生擒鰲拜
大仁：其實我心目有個產品的偶像——韋小寶。
需求：鰲拜一日不除，康熙只能是個傀儡皇帝?？滴跸胝嬲嬲龌实?，想執政，那么首先就是除掉鰲拜。
同理心：韋小寶（產品經理）無論是作為兄弟還是作為臣子，小寶一直知道皇帝要除鰲拜，做個好皇帝。
問題：鰲拜武藝高強，是滿洲第一勇士。
方案探索：小螞蟻搬得動大蜈蚣，歷史上也有很多以小勝大、以少勝多的例子。
策劃設計：秘密訓練了一批習武少年+降低鰲拜的戒心+甕中捉鱉。
落地：生擒鰲拜過程中十分兇險，小寶的隨機應變、不斷周旋才得以制服鰲拜。
生擒鰲拜
用戶反饋：康熙奪回兵權，平西王吳三桂密謀造反，隱患巨大，小寶幫朕想想辦法。
不斷迭代：斷吳三桂反叛的三路援軍 – 受封一等鹿鼎公 – 等等。
產品發版：康熙終于成為一個好皇帝，勵精圖治。
大仁：從發現需求到開發落地到用戶驗證，經歷過這樣一個完整的過程，才算是產品經理的啟蒙禮/思維開竅。
5. 簡歷怎么寫？
大仁：扯太遠了，來說點實際的吧，簡歷你是怎么寫的？
hr看簡歷都很快，基本上都是一分鐘看完一份。有些大公司由于投遞簡歷太多，干脆就直接篩選掉一些，例如：本科211或以上、3年以上工作經驗，直接卡死了很多人，當然深圳還是很多創業公司和發展中的公司。
簡歷猶如產品經理的第一個產品，面試則是第二個。簡歷要求信息清晰、排版簡潔、有一定的文案水平，當然最重要的是產品經歷，經歷和經驗是否貼合公司業務，公司往往找的是最匹配的人才。
基本信息：姓名、求職方向、電話、郵箱等。
工作經歷：有多少段工作經歷，工作業績怎么樣？是否頻繁跳槽？
項目經驗：項目相關度怎么樣，是否貼合公司業務？
6. 職業規劃
小奈：大仁哥，對產品經理職業規劃有沒有什么建議？
大仁：同樣以小寶為例子。
產品經理職場三寶：大平臺+對的領導+好項目
練武
小太監：和小玄子練武，跟對了領導。
首領太監：替領導排憂解難，職業能力強，擒鰲拜，好項目。
五品太監：協助太后殺死海大富，大公司站隊。
保護太上皇
副都統：管理路線，保護太上皇，替老板排憂解難。
老板：回家創業。
兼職工作：
天地會：青木堂堂主，產品講師。
民間邪教神龍教 ：白龍使，行業領袖。
7. 產品經理早期路線
用戶產品經理/后臺產品經理/數據產品經理/人工智能產品經理。
產品經理后期一般有兩條路線，產品專家或管理，可以根據自身的特點和優勢選擇。
8. 產品總監多了，好產品少了
產品總監就是戰略思維、商業化多了，真正有匠心的產品人少了，好的產品自然也少了。
你心目中的產品經理是誰？留言告白吧。
火車票代售點——后端API和開放平臺
1. 后端API長什么樣？
先看看API長什么樣：
- htttp://www.hellojack/?: 主頁，默認是登陸頁面；
- http://www.hellojack/user/add?：用戶，增加；
- http://www.hellojack/user/delete?：用戶，刪除；
- http://www.hellojack/user/update?：用戶，修改；
- http://www.hellojack/user/search?：用戶，查詢。
完整的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可以跳出瀏覽器沙盒，也可以干后端（Java\php）的事，還可以開發PC端（跨windows、mac、linux多平臺）。
Node.js也是個全能型語言，前后端都可以?？聪翹ode.js開發的pc應用，slack也在其中。
Node.js開發的PC應用
3. Node.js開發的后端
扯遠了，回到后端開發，下面是Node.js服務端代碼，代碼很少。
var express = require(‘express’); //Node.js實現的web服務器
var app = express(); //生成一個
app.get(‘/’, function (req, res) { //這里，今天的重點，這個就是API
res.send(‘首頁（登陸頁）’)
})
app.post(‘/user’, function (req, res) { //這里，今天的重點，這個就是API
res.send(‘小明’) //獲取用戶
})
app.post(‘/user/update’, function (req, res) { //這里，今天的重點，這個就是API
res.send(‘小明’) //獲取用戶
})
var server = app.listen(8081, function (req, res) {
console.log(“hello world”)
})
4. 火車票代售點
小奈：什么是開放平臺？
大仁：你買過火車票么？
小奈：買過。
大仁：在哪里買的？
小奈：最開始在火車站買的，后來發現附近有代售點，就在代售點買。
大仁：是吧，平臺開放的目的就是用戶方便，火車站賣票賣不過來啊，尤其逢年過節的時候，大冬天的大排長龍。代售點和火車站合作，售票壓力下降，用戶也方便。
5. 開放平臺
大仁：有沒有發現現在很多app都有IM和地圖功能？
小奈：是啊，那不是很簡單么？
大仁：如果沒有地圖和IM開放平臺 ，那是根本可能實現的，這兩個都是大工程，光是地圖數據采集就難以想象。
大仁：你看滿大街都是共享單車，他們肯定要基于地圖來實現定位吧。所以你會看到xx地圖上可以使用共享單車，肯定要合作的。照理來說應該xx地圖來做這個單車的事，但是地圖背后要做的事太多，所以開發平臺是一種趨勢，也是一種生態哲學。
6. 商業&生態
上次提到小程序，小程序其實就是應用分發入口，相當于app store、小米/華為/應用市場，這就威脅到他們的應用分發生態了，所以蘋果也曾有過“封殺”警告。
國內的安卓廠商也結盟推出了類似服務，小米有一個“一鍵直達”服務開放平臺，直接在應用商店里，所以小米也提出了“一鍵直達”。
7. 程序員小明的情書-JavaScript腳本的力量
大仁： 小明，聽說你大學的專業是計算機科學與技術？
小明： 是的，大仁哥。
大仁：?那好，去幫我搶個榮耀v9。
小明：領導，請你尊重這門專業，計算機科學是……
大仁： 請你談談NAS設備卷管理模塊中失效數據恢復問題的應用。
小明：大仁哥，腳本寫好了。
（1）效果圖
運行的效果圖，就是模擬不斷點擊換一換的效果。
（2）圖解
怎么做的呢？
讓我們一步步分解。
document.getElementsByClassName(“hot-refresh”)[0]
已經獲取該元素
模擬點擊
定時器每100毫秒點擊一次
setInterval(function () {
if (Date.now() > new Date(“2017-3-21 10:08:00”)) {
document.getElementsByClassName(“hot-refresh”)[0].click()
}
}, 100);
- 大于某個時間點；
- 模擬點擊。
（3）chrome擴展程序
為什么要打包成擴展程序？
console的腳本reload之后會被清空無法繼續執行，擴展程序是個好東西
{
“name”: “第一個Chrome插件”,
“manifest_version”: 2,
“version”: “1.0”,
“description”: “jack的第一個chrome擴展程序”,
“browser_action”: {
“default_icon”: “logo.png”
},
“content_scripts”: [
{
“matches”: [“https://www.baidu.com/*”],
“js”: [“content.js”]
}
]
}setInterval(function () {
if (Date.now() > new Date(“2017-3-21 10:08:00”)) {
document.getElementsByClassName(“hot-refresh”)[0].click()
}
}, 100);
放到chrome擴展程序就不會被reload清空了。
小明用JavaScript寫的的情書
大仁：咦，這個鏈接是干嘛的？
小明：糟了，這個不是我的情書腳本么？（超級酷炫有愛的js情書）
查看原文，可以看到小明用JavaScript寫的情書，參考程序員開源，希望各位看官們為小明轉發，轉發超過1000次，小奈將接受小明的告白，查看原文為小明瘋狂打call把。
相關閱讀：
本文由 @深圳jack 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
啥時候更新下一期呢
謝謝大牛
贊一個，講的通俗易懂
這篇寫得有趣容易理解，贊 ??
感謝認可，本書初衷就是讓技術變得有趣。
每篇文章都讀了兩遍以上，想學產品，突然對技術感興趣了，之前自學了css，突然想學js了 ?? ~~~
在我技術轉產品的路上，有人告訴我產品思維、技術思維會沖突，確實是。你得選擇一個作為主要的學習方向，建議先學點技術為做產品打基礎。
坐等下一篇更新啦
微信公眾號首發
http://www.aharts.cn/pmd/1020136.html
程序員連表白都這么6，看完想找個程序員小哥哥 ??
這，我這邊認識很多開發GG, 給你介紹幾個咯