互聯(lián)網(wǎng)產(chǎn)品技術(shù)對(duì)一般人好像沒(méi)接觸太多，肯定難以理解，那怎么講會(huì)讓大家更好理解呢？我想了個(gè)招兒，教會(huì)我4歲多的女兒，她如果能理解，那我想一般人都沒(méi)問(wèn)題了。

一、背景

互聯(lián)網(wǎng)產(chǎn)品屆，歷年來(lái)一直有個(gè)老生常談的問(wèn)題，而每當(dāng)這個(gè)問(wèn)題出現(xiàn)在知乎、脈脈一眾社交平臺(tái)時(shí)，卻總能掀起血雨腥風(fēng)。

這個(gè)頗具爭(zhēng)議的問(wèn)題就是：“產(chǎn)品需要懂技術(shù)嗎？”

因?yàn)樽约菏钱a(chǎn)品出身，除了大學(xué)里學(xué)過(guò)一些計(jì)算機(jī)知識(shí)外，并沒(méi)有自己寫(xiě)過(guò)代碼。但是工作時(shí)間長(zhǎng)了，久而久之也對(duì)技術(shù)范疇有了淺薄兒的了解。到目前為止，雖然還是不會(huì)寫(xiě)也看不懂代碼，但是卻可以做到和技術(shù)同學(xué)做到完全對(duì)等的交流，甚至有時(shí)候還能和技術(shù)瞎侃下實(shí)現(xiàn)方案。

所以，我在想，“產(chǎn)品需要懂技術(shù)嗎？”這個(gè)問(wèn)題是不是可以換個(gè)問(wèn)法，例問(wèn)：“產(chǎn)品和技術(shù)是如何交互的？”是不是更容易回答一些，畢竟前者問(wèn)題是個(gè)辯論話題，后者問(wèn)題是可以取百家答案之精華，是個(gè)覆蓋度的問(wèn)題。

所以，我就想先嘗試回答我這個(gè)新問(wèn)題，今天先聊一些，后續(xù)想起來(lái)再繼續(xù)補(bǔ)充。

回歸正題，互聯(lián)網(wǎng)產(chǎn)品技術(shù)對(duì)一般人好像沒(méi)接觸太多，肯定難以理解，那怎么講會(huì)讓大家更好理解呢？我想了個(gè)招兒，教會(huì)我4歲多的女兒，她如果能理解，那我想一般人都沒(méi)問(wèn)題了。

本篇文章，我就以一個(gè)產(chǎn)品經(jīng)理做項(xiàng)目的方式來(lái)展開(kāi)。

先定下我們的產(chǎn)品目標(biāo)：讓普通人可以理解基本的互聯(lián)網(wǎng)產(chǎn)品技術(shù)基礎(chǔ)知識(shí)。

————分割線預(yù)警（以下內(nèi)容針對(duì)一般人）———

二、需求分析

接下來(lái)，先考慮2件問(wèn)題：

1. 問(wèn)題一：我要講解哪些基礎(chǔ)知識(shí)？

針對(duì)第一個(gè)問(wèn)題，根據(jù)我多年的經(jīng)驗(yàn)，我認(rèn)為可以圍繞一個(gè)話題來(lái)闡述：“平時(shí)你在電腦/手機(jī)上操作頁(yè)面時(shí)，系統(tǒng)是如何運(yùn)行的？”

備注：我們只講應(yīng)用層，如果你要提微機(jī)原理、計(jì)算機(jī)網(wǎng)絡(luò)，那證明你已經(jīng)不是一般人了。

我認(rèn)為有一組知識(shí)，可以來(lái)解答上述問(wèn)題，一旦你知道了這個(gè)原理，其他更多問(wèn)題都只是這個(gè)基礎(chǔ)的復(fù)雜加工而已。

這組知識(shí)點(diǎn)就3個(gè)概念：前端、后端、數(shù)據(jù)庫(kù)，然后你只需要搞懂以下4個(gè)問(wèn)題，就能入門(mén)。

1. 何為前端？前端做啥？
2. 何為后端？后端做啥？
3. 何為數(shù)據(jù)庫(kù)？數(shù)據(jù)庫(kù)做啥？
4. 以上3個(gè)東東是怎么相互協(xié)作的？

2. 問(wèn)題二：我要怎么講解才能讓一般人聽(tīng)懂？

既然要達(dá)到讓幼兒園小朋友都能理解，那必然是游戲嘍~

大家都知道，互聯(lián)網(wǎng)產(chǎn)品在現(xiàn)實(shí)中都存在原型場(chǎng)景，從抽象的業(yè)務(wù)流程角度，現(xiàn)實(shí)與網(wǎng)絡(luò)都是一一映射的。

所以游戲設(shè)計(jì)中，第一層是現(xiàn)實(shí)場(chǎng)景與互聯(lián)網(wǎng)產(chǎn)品之間的映射比較，第二層是互聯(lián)網(wǎng)產(chǎn)品內(nèi)各個(gè)環(huán)節(jié)也實(shí)體可視化，這樣兩者結(jié)合起來(lái)，大家理解就會(huì)容易很多。

三、產(chǎn)品設(shè)計(jì)（請(qǐng)叫我游戲策劃）：

1. 構(gòu)思

（1）腦海中獲取到的創(chuàng)意點(diǎn)兒

① 小孩對(duì)玩具都比較喜歡，前幾天剛好給女兒買(mǎi)了一套發(fā)條小玩具（共計(jì)10個(gè)）；

② 小孩都喜歡玩過(guò)家家類(lèi)游戲，對(duì)可交互類(lèi)的游戲接受度更高；

③ 4歲小孩對(duì)顏色、數(shù)字、部分漢字已掌握，基本算數(shù)、邏輯推理也已具備；

④ 小孩對(duì)幼兒園也比較有歸屬感，對(duì)年級(jí)、教室都有認(rèn)知；

⑤ 家里買(mǎi)了不少樂(lè)高玩具，小孩對(duì)拼樂(lè)高也都比較喜歡且已經(jīng)可以動(dòng)手拼裝，樂(lè)高顏色種類(lèi)不少。

（2）我想要傳達(dá)的知識(shí)點(diǎn)（此處寫(xiě)文章需要，下邊①②③④⑤看不懂沒(méi)關(guān)系，往后看）

① 現(xiàn)實(shí)世界與互聯(lián)網(wǎng)產(chǎn)品的映射表現(xiàn)；

② 前端、后端、數(shù)據(jù)庫(kù)的概念以及三者如何交互；

③ 前端信息提交后邏輯層不僅是后端，還可以是前端；

④ 數(shù)據(jù)庫(kù)表以及關(guān)聯(lián)表的概念；

⑤ 場(chǎng)景覆蓋4種典型互聯(lián)網(wǎng)操作場(chǎng)景，對(duì)應(yīng)4種數(shù)據(jù)庫(kù)原子操作。

結(jié)合以上A和B，我構(gòu)思出來(lái)以下發(fā)散的信息：

① 幼兒園場(chǎng)景，游戲主線任務(wù)就是來(lái)管理學(xué)生和班級(jí)信息；

② 小動(dòng)物作為幼兒園學(xué)生，把顏色、年齡、姓名、照片小孩可以認(rèn)知的元素作為學(xué)生信息表的組成；

③ 樂(lè)高組裝成幼兒園的教室，區(qū)分樓層、顏色作為教室的元素；

④ 判斷邏輯：把年齡這個(gè)因素作為提交信息后邏輯層判斷的依據(jù)；

⑤數(shù)據(jù)庫(kù)表：為了引入關(guān)聯(lián)表，需要有個(gè)班級(jí)信息表，如樓層、教室顏色與學(xué)生信息表進(jìn)行關(guān)聯(lián)使用；

⑥增加場(chǎng)景：小朋友入學(xué)報(bào)名場(chǎng)景；

⑦刪除場(chǎng)景：小朋友轉(zhuǎn)學(xué)場(chǎng)景；

⑧ 修改場(chǎng)景：幼兒園班級(jí)教室顏色粉刷變更；

⑨ 查詢(xún)場(chǎng)景：統(tǒng)計(jì)班級(jí)小朋友總數(shù)、通過(guò)學(xué)生關(guān)聯(lián)表查詢(xún)班級(jí)信息。

以下就是我打草稿的2個(gè)原圖：

圖1：學(xué)生表、班級(jí)表2個(gè)數(shù)據(jù)表、增刪改查4個(gè)場(chǎng)景的簡(jiǎn)要邏輯

圖2：針對(duì)增刪改查4個(gè)場(chǎng)景做了細(xì)節(jié)邏輯的補(bǔ)充

2. 準(zhǔn)備素材&開(kāi)發(fā)產(chǎn)品

分析下不同場(chǎng)景下需要的素材清單：

以下就是我準(zhǔn)備好的素材成品（擺放沒(méi)有按照以上三類(lèi)區(qū)分，大家忽略對(duì)應(yīng)關(guān)系）：

四、產(chǎn)品上線（含3層映射邏輯講解）：

OK，產(chǎn)品開(kāi)發(fā)完成，我們直接上線運(yùn)行，同時(shí)講解開(kāi)始。

首先，我們先確定下現(xiàn)實(shí)世界中的一些客觀信息，即就算我們沒(méi)有線上互聯(lián)網(wǎng)產(chǎn)品這套系統(tǒng)，這些信息在線下幼兒園場(chǎng)景中也一樣會(huì)真實(shí)存在。

以上基礎(chǔ)信息，會(huì)映射到互聯(lián)網(wǎng)產(chǎn)品對(duì)應(yīng)的數(shù)據(jù)庫(kù)表設(shè)計(jì)中，而規(guī)則邏輯會(huì)映射到增刪改查的邏輯中。

1. 數(shù)據(jù)庫(kù)

第一個(gè)概念數(shù)據(jù)庫(kù)比較好理解，我們就拿其中一個(gè)貓頭鷹小朋友和對(duì)應(yīng)的班級(jí)來(lái)對(duì)比舉例。

上邊2個(gè)圖，分別是學(xué)生信息表、班級(jí)信息表的數(shù)據(jù)表結(jié)構(gòu)，大家第一感覺(jué)是啥？不就是我們天天用的excel么，excel沒(méi)用過(guò)，現(xiàn)在防疫期間天天門(mén)崗查溫度登記的那個(gè)紙質(zhì)表格總見(jiàn)過(guò)吧。

沒(méi)錯(cuò)，這其實(shí)就是數(shù)據(jù)庫(kù)的表現(xiàn)。

理解這個(gè)基礎(chǔ)上，我給大家再普及2個(gè)數(shù)據(jù)庫(kù)的常見(jiàn)概念：主鍵和外鍵。

除此之外，大家還需要知道數(shù)據(jù)庫(kù)有4個(gè)最基本原子操作，分別是增刪改查，就是增加數(shù)據(jù)、刪除數(shù)據(jù)、修改數(shù)據(jù)、查詢(xún)數(shù)據(jù)。這些場(chǎng)景的描述和解釋?zhuān)挛闹袝?huì)按照4個(gè)場(chǎng)景展開(kāi)描述。

數(shù)據(jù)庫(kù)的表結(jié)構(gòu)和4種原子操作就是數(shù)據(jù)庫(kù)的核心內(nèi)核，其他再?gòu)?fù)雜的場(chǎng)景都不會(huì)離開(kāi)這個(gè)范疇，當(dāng)然是針對(duì)除技術(shù)之外的其他人員而言。

2. 新增（幼兒園招生報(bào)名）

前文已經(jīng)說(shuō)了，幾乎一切互聯(lián)網(wǎng)都可以在現(xiàn)實(shí)場(chǎng)景中找到映射，而互聯(lián)網(wǎng)產(chǎn)品也恰恰是替代人力解決問(wèn)題的。

所以，我們先還原下我設(shè)計(jì)這個(gè)游戲在現(xiàn)實(shí)場(chǎng)景中的交互流程（大家不要怕，都能看懂的）

根據(jù)上圖中，老師的五官承擔(dān)了與小朋友的前端交互任務(wù)，耳朵眼睛負(fù)責(zé)信息的輸入，嘴巴負(fù)責(zé)語(yǔ)言表達(dá)是輸出。

而老師查詢(xún)的登記簿資料就是與數(shù)據(jù)庫(kù)信息交互，最終按照招生規(guī)則判斷小朋友是否可以入學(xué)及入學(xué)分班等后端行為，是由大腦完成的。

OK，接下來(lái)，我們用我設(shè)計(jì)的游戲，即實(shí)體化的互聯(lián)網(wǎng)產(chǎn)品來(lái)模擬一遍。

第一步：前端輸入頁(yè)面

這個(gè)頁(yè)面如果是真的互聯(lián)網(wǎng)產(chǎn)品，就是呈現(xiàn)在手機(jī)或者電腦的各種頁(yè)面，這里游戲中，我們用圖畫(huà)紙可以達(dá)到同樣的目的。

那么，這個(gè)頁(yè)面就是所謂的前端，用來(lái)收集小朋友的報(bào)名信息的，等同于現(xiàn)實(shí)場(chǎng)景中老師看到/聽(tīng)到/拿到你的報(bào)名信息。

這里需要填寫(xiě)的4個(gè)信息，就是后端（是否可以報(bào)名成功）的輸入?yún)?shù)，信息填寫(xiě)完成之后，點(diǎn)擊【報(bào)名】按鈕就會(huì)調(diào)用后端接口開(kāi)始執(zhí)行判斷程序，類(lèi)似老師的大腦處理信息。

在這里插入一個(gè)小知識(shí)，前端判斷和后端判斷的區(qū)別，前端判斷就是不需要后端邏輯判斷前端就可以校驗(yàn)的意思，例如上圖中的照片尺寸需要一寸，那么如果你提交非1寸照片是不能提交成功的，這個(gè)就不需要大腦判斷的。

第二步：后端判斷

后端判斷，在真的互聯(lián)網(wǎng)產(chǎn)品技術(shù)中，就是一段段代碼了，游戲中也沒(méi)有實(shí)體化展示這個(gè)東西，還是大腦運(yùn)算，不過(guò)我用注釋來(lái)描述這里面的邏輯。

很簡(jiǎn)單的表達(dá)，不復(fù)雜，不抽象，看圖：

所以，后端接口其實(shí)就是接收前端提交信息當(dāng)做入?yún)ⅲ缓髢?nèi)部按照一定規(guī)則運(yùn)算之后，返回出參結(jié)果給到前端。而后端的復(fù)雜度就是這個(gè)規(guī)則的復(fù)雜和實(shí)現(xiàn)方式，而內(nèi)核其實(shí)不會(huì)變化。

第三步：添加信息到數(shù)據(jù)庫(kù)（報(bào)名失敗沒(méi)有這一步）

對(duì)于報(bào)名失敗不需要寫(xiě)入數(shù)據(jù)庫(kù)的情況下，是沒(méi)有這第三步的，會(huì)直接跳轉(zhuǎn)第四步。而對(duì)于報(bào)名成功的情況，后端會(huì)先把信息寫(xiě)入數(shù)據(jù)庫(kù)后，然后將數(shù)據(jù)庫(kù)的信息再通過(guò)接口返回。

第四步：前端展示后端返回?cái)?shù)據(jù)

接第二步，拿到輸出信息，然后通過(guò)前端頁(yè)面展示出來(lái)，上述有3種報(bào)名結(jié)果，對(duì)比圖如下：

在這里，強(qiáng)調(diào)下前端頁(yè)面表達(dá)，接口返回信息是數(shù)據(jù)化的，沒(méi)有任何格式，需要通過(guò)前端的各種樣式來(lái)展示頁(yè)面，例如頁(yè)面布局、顏色、動(dòng)畫(huà)、固定文案等內(nèi)容，可以參考上邊表格中的3個(gè)頁(yè)面展示效果。

新增場(chǎng)景介紹完了，這個(gè)其實(shí)也是增刪改查最復(fù)雜的案例了，接下來(lái)篇幅有限，我會(huì)不再贅述現(xiàn)實(shí)場(chǎng)景與互聯(lián)網(wǎng)產(chǎn)品的映射關(guān)系了，主要說(shuō)產(chǎn)品與技術(shù)交互映射。

3. 刪除（幼兒園小朋友轉(zhuǎn)學(xué)）

第一步：前端輸入頁(yè)面

前置已經(jīng)用了查詢(xún)能力（詳見(jiàn)下文）定位到要處理的學(xué)生對(duì)象上，老師操作“轉(zhuǎn)?！辈僮?，會(huì)出現(xiàn)彈窗操作確認(rèn)，這個(gè)是前端實(shí)現(xiàn)減少誤刪除。

點(diǎn)擊“確定”之后，調(diào)用后端的“刪除學(xué)生信息接口”，同時(shí)傳入?yún)?shù)1002（學(xué)生表主鍵可以唯一確定一個(gè)學(xué)生）。

第二步：后端操作

后端“刪除接口”做的事情也比較簡(jiǎn)單，就是直接調(diào)用數(shù)據(jù)庫(kù)本身的原子能力刪除功能，就可以將學(xué)號(hào)1002這條數(shù)據(jù)刪除掉。操作完成之后，告訴前端刪除完成。

此時(shí)數(shù)據(jù)庫(kù)里，已經(jīng)沒(méi)有了1002第二條數(shù)據(jù)，如下圖：

4. 修改（幼兒園班級(jí)教室顏色變更）

第一步：前端輸入頁(yè)面

前置已經(jīng)用了查詢(xún)能力（詳見(jiàn)下文）定位到所有班級(jí)信息，老師選擇要處理的班級(jí)信息，操作“編輯”操作，老師填寫(xiě)教室變更后的顏色黃色，然后確定提交，經(jīng)過(guò)彈窗確認(rèn)之后，真正調(diào)用后端“修改班級(jí)信息”接口。

第二步：后端操作

后端“修改班級(jí)信息接口”做的事情也比較簡(jiǎn)單，就是直接調(diào)用數(shù)據(jù)庫(kù)本身的原子能力修改功能，就可以將貝貝班對(duì)應(yīng)的教室顏色由“綠色”變?yōu)椤包S色”。操作完成之后，告訴前端刪除完成。

此時(shí)班級(jí)數(shù)據(jù)庫(kù)表里，第三條信息已經(jīng)發(fā)生改變，如下圖：

5. 查詢(xún)（幼兒園各班級(jí)人員總數(shù)、學(xué)生所在的班級(jí)信息）：

第一步：前端輸入頁(yè)面

這個(gè)頁(yè)面，其實(shí)集成了2個(gè)查詢(xún)類(lèi)的功能：一個(gè)是按照班級(jí)查詢(xún)學(xué)生總數(shù)。另一個(gè)是通過(guò)學(xué)生，查詢(xún)班級(jí)信息。

第二步：后端操作

先說(shuō)按照班級(jí)查詢(xún)學(xué)生總數(shù)，我們以聰聰班為例，后端運(yùn)行邏輯如下圖所示，最后運(yùn)算過(guò)后返回前端結(jié)果數(shù)為“4”即可。

再說(shuō)按學(xué)生查詢(xún)班級(jí)信息，以貓頭鷹為例，后端運(yùn)行邏輯如下圖所示，這個(gè)用到了關(guān)聯(lián)表邏輯。

第三步：前端展示后端返回?cái)?shù)據(jù)

將上邊2個(gè)后端接口運(yùn)算的結(jié)果分別返回到前端，然后前端渲染樣式展示給老師。

五、產(chǎn)品復(fù)盤(pán)

產(chǎn)品終于上線成功，沒(méi)想到寫(xiě)文章這個(gè)產(chǎn)品做起來(lái)比準(zhǔn)備游戲本身還要費(fèi)力。這篇文章篇幅有點(diǎn)長(zhǎng)，主要是圖片太多。

希望可以通過(guò)這篇文章，能夠讓不太懂互聯(lián)網(wǎng)產(chǎn)品技術(shù)的朋友們也能有所了解，對(duì)于想要轉(zhuǎn)行做產(chǎn)品的其他朋友，我想說(shuō)這個(gè)真的是入門(mén)中最核心的知識(shí)點(diǎn)了。

突然發(fā)現(xiàn)這個(gè)路子也還不錯(cuò)，既能陪女兒玩，讓她學(xué)習(xí)一些小知識(shí)，還能沉淀一些文章普及別人。

嗯，又可以搞一個(gè)系列了，哈哈。下一次不行就用游戲模擬下電商購(gòu)物背后的資金、信息、供應(yīng)鏈流轉(zhuǎn)吧。

作者：減形簡(jiǎn)遠(yuǎn)，轉(zhuǎn)轉(zhuǎn)交易中臺(tái)產(chǎn)品負(fù)責(zé)人。公眾號(hào)：產(chǎn)品雜談

本文由 @減形簡(jiǎn)遠(yuǎn) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議