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

一、背景

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

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

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

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

所以，我就想先嘗試回答我這個新問題，今天先聊一些，后續(xù)想起來再繼續(xù)補充。

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

本篇文章，我就以一個產(chǎn)品經(jīng)理做項目的方式來展開。

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

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

二、需求分析

接下來，先考慮2件問題：

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

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

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

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

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

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

2. 問題二：我要怎么講解才能讓一般人聽懂？

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

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

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

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

1. 構(gòu)思

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

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

② 小孩都喜歡玩過家家類游戲，對可交互類的游戲接受度更高；

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

④ 小孩對幼兒園也比較有歸屬感，對年級、教室都有認知；

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

（2）我想要傳達的知識點（此處寫文章需要，下邊①②③④⑤看不懂沒關(guān)系，往后看）

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

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

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

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

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

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

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

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

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

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

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

⑥增加場景：小朋友入學(xué)報名場景；

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

⑧ 修改場景：幼兒園班級教室顏色粉刷變更；

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

以下就是我打草稿的2個原圖：

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

圖2：針對增刪改查4個場景做了細節(jié)邏輯的補充

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

分析下不同場景下需要的素材清單：

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

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

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

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

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

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

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

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

沒錯，這其實就是數(shù)據(jù)庫的表現(xiàn)。

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

除此之外，大家還需要知道數(shù)據(jù)庫有4個最基本原子操作，分別是增刪改查，就是增加數(shù)據(jù)、刪除數(shù)據(jù)、修改數(shù)據(jù)、查詢數(shù)據(jù)。這些場景的描述和解釋，下文中會按照4個場景展開描述。

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

2. 新增（幼兒園招生報名）

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

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

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

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

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

第一步：前端輸入頁面

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

那么，這個頁面就是所謂的前端，用來收集小朋友的報名信息的，等同于現(xiàn)實場景中老師看到/聽到/拿到你的報名信息。

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

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

第二步：后端判斷

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

很簡單的表達，不復(fù)雜，不抽象，看圖：

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

第三步：添加信息到數(shù)據(jù)庫（報名失敗沒有這一步）

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

第四步：前端展示后端返回數(shù)據(jù)

接第二步，拿到輸出信息，然后通過前端頁面展示出來，上述有3種報名結(jié)果，對比圖如下：

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

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

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

第一步：前端輸入頁面

前置已經(jīng)用了查詢能力（詳見下文）定位到要處理的學(xué)生對象上，老師操作“轉(zhuǎn)?！辈僮鳎瑫霈F(xiàn)彈窗操作確認，這個是前端實現(xiàn)減少誤刪除。

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

第二步：后端操作

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

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

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

第一步：前端輸入頁面

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

第二步：后端操作

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

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

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

第一步：前端輸入頁面

這個頁面，其實集成了2個查詢類的功能：一個是按照班級查詢學(xué)生總數(shù)。另一個是通過學(xué)生，查詢班級信息。

第二步：后端操作

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

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

第三步：前端展示后端返回數(shù)據(jù)

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

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

產(chǎn)品終于上線成功，沒想到寫文章這個產(chǎn)品做起來比準備游戲本身還要費力。這篇文章篇幅有點長，主要是圖片太多。

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

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

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

作者：減形簡遠，轉(zhuǎn)轉(zhuǎn)交易中臺產(chǎn)品負責(zé)人。公眾號：產(chǎn)品雜談

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

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