講個故事,給你一份詳細的技術(shù)書
本文以一個故事的形式,給產(chǎn)品新人一份技術(shù)書,如果你是產(chǎn)品新人,那就進來看看吧~
序言
經(jīng)常有產(chǎn)品新人問我技術(shù)問題:是前后端的區(qū)別?數(shù)據(jù)庫是怎么樣的?如何和研發(fā)溝通?
回答的多了,就想系統(tǒng)化的回答,寫一本書,讓技術(shù)變得通俗易懂、有趣。
6年間,從技術(shù)小白=>工程師=>后臺、數(shù)據(jù)產(chǎn)品經(jīng)理,2000多個日夜,為代碼、需求絞盡腦汁、也在創(chuàng)業(yè)路上走過,百感交集。
本書以小說故事的形式、場景化講解技術(shù),讓枯燥的技術(shù)變得有趣。感謝一些幫助我的小伙伴,謝謝。
另提下里面的人物用的是臉萌設(shè)計的,侵刪(設(shè)計師正在設(shè)計人物)。
封面
故事背景
故事也很簡單,兩條主線,李大仁來深圳的創(chuàng)業(yè)故事,表妹小奈和小明的愛情故事。
- 小明和小奈戀愛,程序員和產(chǎn)品經(jīng)理的愛情故事
- 大仁用戶量破億,一番挫折后破土而出,創(chuàng)業(yè)進入新階段,拿到了B輪融資
人物關(guān)系
課程目錄
前8章,總共有20章。
1. 李大仁來深創(chuàng)業(yè)-互聯(lián)網(wǎng)介紹
(1)離開廣州
“故事的小黃花 從出生那年就飄著 童年的蕩秋千 隨記憶一直……“。李大仁聽著歌,望著廣州,這座生活了快10年的城市。腦中閃過了大學(xué)生活、同事、前女友,百感交集。但是為了最初的夢想,來到深圳創(chuàng)業(yè)。
(2)來深創(chuàng)業(yè)
“各位乘客你好,列車已到站“。終于邁出了這一步,深圳或許是創(chuàng)業(yè)氛圍最好的地方了。
小奈:喂,表哥你在哪?
大仁:我在深圳北站。
剛到深圳,大仁決定投靠表妹那邊,表妹家里在南山,離投資人提供的孵化器也很近。大仁目前暫時住在表妹這邊。小奈今年剛畢業(yè),在一家大公司里當(dāng)產(chǎn)品助理,非技術(shù)專業(yè)、初入職場的她遇到了挺多阻礙。
2018年,大仁今年也30歲了。
小奈:表哥,你女朋友呢?
大仁:分了,她不同意我來深圳這邊創(chuàng)業(yè)。
(3)落腳
小奈:表哥,你睡這間房吧。
大仁:好的。
(4)互聯(lián)網(wǎng)
疲累了一天,躺在床上,大仁陷入了沉思?;ヂ?lián)網(wǎng),是網(wǎng)絡(luò)與網(wǎng)絡(luò)之間所串連成的全球網(wǎng)絡(luò),這里的網(wǎng)絡(luò)可以理解成一個或多個電腦,這些網(wǎng)絡(luò)以一組標(biāo)準(zhǔn)的網(wǎng)絡(luò)TCP/IP協(xié)議族相連,互聯(lián)網(wǎng)在信息層面把世界變成地球村。
互聯(lián)網(wǎng)互通是全球性的,是屬于全人類的?;ヂ?lián)網(wǎng)低成本的、高效信息交流深受大家歡迎。它是是平等的,開放的信息高速公路,是人類發(fā)展進程的一個里程碑。
(5)中國電商發(fā)展史
下圖以中國互聯(lián)網(wǎng)、電商發(fā)展史為例子:
(6)三巨頭BAT,崛起的TMD
中國互聯(lián)網(wǎng)發(fā)展了20年,百度(B)阿里(A)騰訊(T)成為中國最大的三家互聯(lián)網(wǎng)公司,形成了三組鼎力的格局,三家公司有各自的體系和地位,百度的搜索、阿里的電商、騰訊的社交。
頭條(T)美團(M)滴滴(D),TMD被稱為創(chuàng)業(yè)公司在BAT這樣巨頭下最大的成長界限,互聯(lián)網(wǎng)也有階層固化之勢。
(7)商戰(zhàn)&混戰(zhàn)
自2016起,阿里和騰訊的新零售之戰(zhàn)開始布局,什么是新零售?馬云口中的新零售是什么?
商戰(zhàn):美團打車vs滴滴外賣,阿里收購餓了么、高德推出順風(fēng)車、美團推出打車、收購摩拜。創(chuàng)業(yè)環(huán)境如此艱難,但總有人能破土而出。
想著想著居然睡著了….
2. 服務(wù)員與廚師-前后端的區(qū)別
窗外下起了雨,滴答滴答…
周末了,本該很開心才對,小奈的心情卻有點郁悶。坐在公交上,想著下午被Leader懟的話,心情十分不美麗。好不容易下班了,還下雨了,得找表哥好好傾訴。
大仁:喲喲喲,你這是怎么啦?
小奈:今天被Leader一頓懟…
大仁:為什么會被Leader懟呢?
小奈:是這樣的,我方案今天上交的時候Leader說很多地方做得不對,前后端都沒分清,微服務(wù)就更不用說了。
大仁:不要氣餒,產(chǎn)品上有什么問題你可以問我呀
小奈:前后端怎么區(qū)分?后端寫代碼,前端負責(zé)顯示?
大仁:這個前后端的區(qū)別,我畫張圖給你看看就知道了。
前后端區(qū)別
大仁:前端也要寫代碼的,后端寫的代碼沒有界面顯示,前端才有。好比飯店一樣,服務(wù)員是前端, 廚師是后端開發(fā)。服務(wù)員會給你端菜(看得到的前端),但是做菜的是廚師(后端處理數(shù)據(jù)返給前端)。
小奈:那前后端怎么交互?
大仁:你看到那個窗口沒有,服務(wù)員通過窗口拿菜,菜就是用戶要的數(shù)據(jù),窗口就是接口,前后端通過接口來協(xié)作,接口是后端的工作。
小奈:哦~那后端是不是做的比較多、比較累一點。
大仁:是的,廚師累一點。
大仁:不過今時不同往日,現(xiàn)在客人要求高了。要求服務(wù)員長得漂亮(界面好看) 還要會耍雜技(交互好)。這樣說你可以理解么 ?
小奈:UI和UE有什么不一樣么?
大仁:視覺設(shè)計(界面設(shè)計)ui像是服務(wù)員的衣服,ue (界面交互)就是點擊這個按鈕怎么跳轉(zhuǎn),ue像是服務(wù)員的上菜流程、手勢等。數(shù)據(jù)庫就是神奇的物料倉庫,廚師要做什么菜,需要從倉庫里取, 取得時候會自動復(fù)制了一份,這個數(shù)據(jù)庫以后再和你仔細講。
小奈:哇,理解了,表哥好厲害呀。
大仁:總結(jié)起來的話,涉及界面展示的屬于前端,當(dāng)請求數(shù)據(jù)的時候,就是常見的增刪改查,屬于后端工作,后端需要提供好這些窗口,把菜放在那里,服務(wù)員就可以過去拿。
微服務(wù)vs單體應(yīng)用
小奈:那微服務(wù)又是什么呢?
大仁:我再畫2張圖(產(chǎn)品經(jīng)理就是愛畫圖)。
大仁:你們公司是搞電商的,電商后臺系統(tǒng)比較大而全。基本上由用戶管理、商品管理、訂單管理、物流管理、采購管理、資產(chǎn)管理、內(nèi)容管理等組成。而且項目早期研發(fā)的時候,都是都所有功能堆在一起,部署在一臺服務(wù)器上。這種其實就是所謂的“單體應(yīng)用”。
但是呢,隨著業(yè)務(wù)發(fā)展,流量越來越大,這種單體應(yīng)用的弊端就變得明顯了。怎么理解呢?
單體應(yīng)用之間各個模塊互相依賴,如果某個模塊掛了,就會影響其它模塊?;蛘咦鰞?yōu)惠活動的時候,對用戶管理和優(yōu)惠券這些模塊壓力較大,但是做負載均衡的時候其它模塊也得上,浪費資源。
小奈:那怎么辦?
大仁:其實把各個模塊單獨拎出來就好了。那里需要強化就強化那里。模塊間依賴性也不會那么大。
小奈:那前期為什么不直接用微服務(wù)?
大仁:微服務(wù)其實比較花時間,但是各個服務(wù)拆分好后,對后續(xù)擴展和性能等的好處多多。所以很多創(chuàng)業(yè)項目前期都是單體應(yīng)用,大公司除外。
為了感謝大仁悉心指導(dǎo),小奈點了奶茶給大家喝,分奶茶的時候,看到大明一手鼠標(biāo)一手鍵盤目不轉(zhuǎn)睛地盯著屏幕。
(1)初次見面-瀏覽器輸入url后
小明來了
“叮咚叮咚”
初次見面
大仁:你去接待下我朋友,他叫小明,我們公司后端開發(fā)。
耳邊突然傳來一個甜美的聲音。
小奈:你好,你是小明吧。
小奈:你好,我是小奈,表哥現(xiàn)在在忙,我來招待下你。
小奈:這是給你的茶,你先在這邊坐下。
刷地一下從臉到耳根一陣通紅,木住三秒后,小明愣了下,然后雙手接過茶
人物檔案
原名黃小明,29歲,黑龍江某大學(xué)心理學(xué)專業(yè),畢業(yè)后在五道口切過菜,某一天看懂犀牛書,從此進入前端,立志成為黑客。大仁公司后端主力開發(fā)。
小奈:你是做后端的吧,我有些技術(shù)問題可以請教你嗎?
小明:可以,具體是什么問題呢?
小奈:我想知道你們平時敲的代碼,是怎么變成網(wǎng)頁的?怎么放到網(wǎng)上去的?
小明掏出了雙肩包里面的筆記本
小明:你平時怎么看網(wǎng)頁的?
小奈:在瀏覽器輸入?www.hellojack.com?然后就可以了啊
小明:那你知道背后發(fā)生了什么么?我畫個圖給你看下。
小明:首先這里幾個家伙:瀏覽器(360之類)、服務(wù)器(阿里云之類)、域名商(萬網(wǎng)之類)、網(wǎng)頁文件(index.html)、web環(huán)境盒子(Nginx之類)。
小明:當(dāng)你輸入地址的時候,背后的事情是這樣的。
瀏覽器打電話給域名商, hellojack.com 這個sb家地址在哪?域名商告訴他ip地址,稍等,我給你轉(zhuǎn)過去。瀏覽器就把這個地址記到小本本上了,下次就不用問域名商了。然后問服務(wù)器要東西了,你盒子里面那個東西呢?
服務(wù)器掏出盒子里的文件,切成很多小拼塊,好的,我馬上寄過去。然后順著網(wǎng)線傳過去,傳到瀏覽器這邊。瀏覽器就把拼塊憑起來,展示出來了,你好你的文件。
小奈:每個域名都有IP地址地,之前我都不曉得IP跟域名有什么聯(lián)系。
小明:1對1的,當(dāng)然你也可以搬家。
小奈:好像懂了。
小明:那你看看我們是怎么實現(xiàn)的吧。
小明:我們首先就是寫代碼咯,長得像這樣子:<h1>hello jack</h1>。
保存為 index.html 后,本地打開??吹?jīng)],長這樣子,我啟動個神奇的盒子:
var express = require(‘express’);
var app = express();
app.set(‘view engine’, ‘html’);
app.engine(‘html’, require(‘ejs-mate’));
var server = app.listen(8081, function (req, res) {
console.log(“hello world”)
})
- 瀏覽器輸入:localhost:8081
- 瀏覽器輸入:127.0.0.1:8081
小奈:喔,原來這樣子,那怎么輸入 hellojack.com 來訪問呢?
小明:對,接下來我要把它部署到阿里云上去,我之前買的。但是域名這個我只買過 pmjishu.com 這個,我得去域名商那里買一下才行。
小奈:不用啦,我明白了。
小奈:實在太感謝你了,你好厲害喔。
只見小明又通紅著臉
小明:不用客氣,有什么不懂的問題隨時請教”
今晚好美,月亮很好看。
(2)小區(qū)與隔板間-機房和虛擬機
電腦主機vs虛擬機
小奈:一直不太明白,服務(wù)器是一個實體的機器嗎?(類似一臺主機)還是一個概念上的數(shù)據(jù)庫?本地是指的是?
大仁:
- 第一個問題:早期服務(wù)器就是一個實體的機器(物理機器)。但是虛擬機技術(shù)成熟后可以在一臺物理機器上創(chuàng)建很多臺虛擬機,所以這些虛擬機也可以作為服務(wù)器。類似A101和里面的隔板間。
- 第二個問題:我們常說的服務(wù)器(后臺)是指后臺程序+數(shù)據(jù)庫,也就是主人+衣柜,衣柜是存儲衣服(數(shù)據(jù)),主人是收拾、處理衣服的。你有錢可以一個住一間大房子,沒錢或者覺得太大也可以隔出幾個小板間租給別人。目前常見的服務(wù)商是這樣子做的,可能A101這間房間住了不同創(chuàng)業(yè)公司的后臺。但是房間之間都是隔離的(技術(shù)成熟)。
- 第三個問題:其實我們自己也可以搭建服務(wù)器,要和運營商申請公網(wǎng)IP,一月好幾千,那我們的電腦也就是服務(wù)器了。
云主機vs機房
- 機房:類似小區(qū),由很多服務(wù)器組成;
- 云主機:由多臺服務(wù)器組成,共同處理計算數(shù)據(jù)。
機房,類似小區(qū),由很多服務(wù)器組成。但是可能這些業(yè)主互不相識,也可能這一層住的都是老王家族。
云主機:類似別墅,老王家族住在別墅,他們之間是有關(guān)系的,一起合作處理一些大事。
3. 世界之窗門票-賬號與Token
(1)世界之窗
終于周末了,真開心。對小奈這種初入職場的人來說,還是很期待周末的。和表哥約好周末去世界之窗玩,放松之余,還要抓緊和表哥學(xué)習(xí)東西。
(2)賬號和門票一樣
世界之窗外面是開放的,但是如果要進去里面的話,就需要買門票了。
小奈:這個門票是不是和賬戶密碼一樣?
大仁:是的
小奈:賬號登陸是怎么實現(xiàn)的?
大仁:那要先給你簡單講下數(shù)據(jù)庫。
(3)數(shù)據(jù)庫是什么?
數(shù)據(jù):舉個例子,班級里面的每個人,例如:小周,他的各個字段:年級,性別、語數(shù)英等等,周杰倫的所有信息算是一條數(shù)據(jù)。
數(shù)據(jù)表:數(shù)據(jù)表就像一個excel表格,里面存了3年1班所有學(xué)生的數(shù)據(jù)。
數(shù)據(jù)庫:數(shù)據(jù)庫可以理解成一個文件夾,里面有很多excel表格,例如3年級所有班級(1、2、3班)的excel表格。
(4)賬號密碼
大仁:這里的賬號登陸和門票進場一樣,但是稍微不同的是,它是永久性的,只要你不改密碼/不被禁用。
(5)Token則是憑據(jù)
“叮鈴叮鈴”
大仁:喂,小明啊,你也要來世界之窗么?
小明:是啊,但是我沒門票,進不去啊。
大仁:我記得你是如花酒店會員是吧?
小明:是啊。
大仁:他們有和這個酒店合作,你試一下。
小明:你好,我是如花酒店的會員,能不能進去這里玩下。
檢票員打電話給如花酒店,小明和酒店說了自己信息,酒店經(jīng)理給了臨時暗號:0007,你好可以了。
Token則更像是臨時暗號,這個臨時暗號是賬號授權(quán)生成的,門票丟了得重新花錢買,token丟了重新操作下認證一個就可以了,因此token丟失的代價是可以忍受的。
(6)Cookie 和 Session
這個賬號密碼,其實還有兩個重要的概念,下回分解。
?5. 暗號和鑰匙-Cookie和Session的區(qū)別
(1)Cookie和Session的區(qū)別
小奈:表哥那個cookie和session有什么區(qū)別?
大仁:記得上次了小明和你講的故事么?, 在瀏覽器輸入url背后發(fā)現(xiàn)的事。?2.1 初次見面-瀏覽器輸入url后
大仁:上次輸入的網(wǎng)址?www.hellojack.com?,其實完整的是?http://www.hellojack.com,前面有個http前綴,它是一個協(xié)議,無狀態(tài)協(xié)議。
大仁:我來給你講個故事吧。
(2)http
很久很久以前(30年前,只有靜態(tài)html的時候),有個發(fā)快遞的人叫http。偶爾有人打電話(無來電顯示)向他買東西,他收到請求后,就會去中心倉庫克隆一份這個東西,然后把貨品塞到管道里,這樣客人就收到了。
那時候工作很輕松,小日子過的挺舒服啊。好景不長(社區(qū)、電商網(wǎng)站的出現(xiàn)),倉庫里進了很多貴重和私密物品。老板要求他記錄訂購貴重物品的客人,私密物品一定要鑒別客人身份。
(3)暗號:cookie
但是沒有來電顯示啊,鬼知道誰定的,http就很苦惱了。想了想,終于想到一個辦法了。以后客人打電話過來,我就給他個暗號。終于可以記錄了,但是又遇到了一個問題。由于暗號比較簡單,其他客人可以偽造。
(4)檔案袋和鑰匙:session和session-id
http想了很久,最后和服務(wù)器協(xié)商,讓服務(wù)器那邊建立檔案袋,并把鑰匙給客人,下次叫客人把鑰匙給他。之后客人都通過鑰匙來打開檔案袋,確定身份。如果打不開的話就證明錯了。
express 中的 cookie
express 在 4.x 版本之后,session管理和cookies等許多模塊都不再直接包含在express中,而是需要單獨添加相應(yīng)模塊。
var express = require(‘express’);
// 首先引入 cookie-parser 這個模塊
var cookieParser = require(‘cookie-parser’);
var app = express();
app.listen(3000);
// 使用 cookieParser 中間件,cookieParser(secret, options)
app.use(cookieParser());
app.get(‘/’, function (req, res) {
// 如果請求中的 cookie 存在 isVisit, 則輸出 cookie
// 否則,設(shè)置 cookie 字段 isVisit, 并設(shè)置過期時間為1分鐘
if (req.cookies.jack) {
console.log(req.cookies.jack);
res.send(“welcome”);
} else {
res.cookie(‘jack’, ‘content’, {maxAge: 60 * 1000});
res.send(“no cookie”);
}
});
(6)session
cookie 雖然很方便,但是使用 cookie 有一個很大的弊端,cookie 中的所有數(shù)據(jù)在客戶端就可以被修改,數(shù)據(jù)非常容易被偽造,那么一些重要的數(shù)據(jù)就不能存放在 cookie 中了,而且如果 cookie 中數(shù)據(jù)字段太多會影響傳輸效率。為了解決這些問題,就產(chǎn)生了 session,session 中的數(shù)據(jù)是保留在服務(wù)器端的。
session 的運作通過一個session_id來進行,session_id通常是存放在客戶端的 cookie 中,比如:在 express 中,默認是connect.sid這個字段,當(dāng)請求到來時,服務(wù)端檢查 cookie 中保存session_id 并通過這個 session_id 與服務(wù)器端的 session data 關(guān)聯(lián)起來,進行數(shù)據(jù)的保存和修改。
作者:深圳jack,微信公眾號:產(chǎn)品經(jīng)理的技術(shù)課堂
本文由 @深圳jack 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
有意思,電子書怎么獲???產(chǎn)品經(jīng)理的技術(shù)課堂公眾號不存在!
給你贊一個
圖片看不清楚
太形象了,深入淺出,不夸張的說是我在人人看過最有趣易懂的文章了!很棒!
過譽了,還有很多需要改進的地方
感覺比喻都很形象,但是只有喻體的描述,沒有本體的描述,還是有點知其然不知其所以然
本體可以繼續(xù)追問,可以看下2,本體描述比較多一些
更新了,各位。 看這里 http://m.codemsi.com/pmd/1012306.html
厲害,做了一年的產(chǎn)品還是不能夠說清楚技術(shù)之間的關(guān)系,看這個淺顯易懂
意猶未盡,感覺Jack還有很多話要說,聽說要出電子版,怎么第一時間獲取呢,給個公眾哈或者博客,最好是加你微信啦 ??
公眾號: 產(chǎn)品經(jīng)理的技術(shù)課堂
搜索不到這個公眾號哦
請問是要出書嗎?我覺得寫的很好,想買!什么時候能出來 ??
感謝,評價太高了吧。 出書流程好像挺長的,電子版估計6月寫完。 等電子版吧。
苦于不懂技術(shù)的小白,學(xué)習(xí)都快瘋狂了,這個感覺比喻很形象很容易理解,電子書出了一定要廣而告之啊 ??
好的,初衷也是想消除重復(fù)的理解工作,讓技術(shù)理解標(biāo)準(zhǔn)化、變得有趣,變成一本詞典。
這種形式還挺好的,對于想走PM道路的我還挺受用的~
?? ?? 小明和小奈的愛情故事 即將展開
贊一個!謝謝謝謝
不客氣,歡迎提問。
簡單,通俗,易懂
感謝認可 持續(xù)更新中
有錯別字
非常感謝,請指出。
很棒
還沒更完是吧?
是的,前面1/4,大概20章,50多篇。昨日更新到3.2 村姑與化妝師–html和css的故事 3.3 API的使用
在哪可以看到完整版
打錯, 公眾號: 產(chǎn)品經(jīng)理的技術(shù)課堂
更新是在這里原文更新嗎
這邊慢一點,微信公眾號是最新的
產(chǎn)品經(jīng)理面對開發(fā)時,需要懂技術(shù)到什么程度,怎么樣才能合理溝通? 有時提出的需求技術(shù)說不會做,但在其它平臺已經(jīng)實現(xiàn)了。
剛好昨天在知識星球(產(chǎn)品經(jīng)理的技術(shù)修養(yǎng))回答過這個問題。
和你說實際案例吧,有兩個技術(shù)出身轉(zhuǎn)的產(chǎn)品,一個是我,一個是華為的。
我剛轉(zhuǎn)產(chǎn)品的時候,很自然的會想技術(shù)細節(jié),這時候其實開發(fā)是反感的,有種侵犯他們領(lǐng)域的感覺。
華為的那位產(chǎn)品經(jīng)理則是裝不懂,實際上他技術(shù)比開發(fā)還牛。所以還是尊重開發(fā)、相信他們的專業(yè)能力(菜鳥除外)。
1、產(chǎn)品經(jīng)理要懂技術(shù),這樣才能理解開發(fā),在一些功能實現(xiàn)可能性做取舍,和開發(fā)無障礙協(xié)作,順利推進工作。
(這個則是溝通問題,其它平臺和自家平臺,在架構(gòu)以及階段等很多方面可能不一樣,開發(fā)能力也不一樣,你是想知道他有沒有騙你?你可以問另一個開發(fā),但我建議你和他搞好關(guān)系。)
2、產(chǎn)品經(jīng)理的溝通能力很重要,入職第一件事是融入團隊,有點像地頭蛇,大家都比較信任喜歡。
在技術(shù)方面,懂就行(掌握一套技術(shù)論,我在研發(fā)中),最后寫代碼的還是研發(fā),提出清晰明確需求,與開發(fā)溝通好進度。
3、如果真的要在技術(shù)上做提升,可以學(xué)數(shù)據(jù)分析,從excel基礎(chǔ)函數(shù)數(shù)據(jù)透視開始。
非要寫代碼的話建議從html和js學(xué)起。
會技術(shù)的產(chǎn)品經(jīng)理可以隨時驗證自己的想法
怎么說呢自己大學(xué)的時候自學(xué)過前端,實習(xí)做過測試,大三暑假自學(xué)了數(shù)據(jù)分析,秋招面的數(shù)據(jù)分析崗,現(xiàn)在的職位是數(shù)據(jù)產(chǎn)品,這樣的經(jīng)歷對于做產(chǎn)品會不會有幫助?
緩存是存在用戶端的,進程是存在服務(wù)器端的嗎?
用戶端和服務(wù)端,攻和受,他們都有緩存和進程。 用戶口中的緩存是在客戶端,沒錯。 后續(xù)出一篇進程、線程、緩存詳細講解下。