一、前言
一個好的產(chǎn)品少不了一個好的產(chǎn)品經(jīng)理的策劃與設(shè)計，外界普遍認(rèn)為產(chǎn)品經(jīng)理也隸屬于技術(shù)工種蹬癌，但其實(shí)不是，產(chǎn)品經(jīng)理在我看來屬于文藝圈虹茶，設(shè)計一套產(chǎn)品對他們來說是創(chuàng)作逝薪，可以天馬星空，可以不受任何束縛盡情創(chuàng)作蝴罪，所以產(chǎn)品經(jīng)理普遍是不知道他們設(shè)計的產(chǎn)品是如何實(shí)現(xiàn)的董济，這就是為什么我們經(jīng)常聽到或者看到網(wǎng)上產(chǎn)品經(jīng)理和技術(shù)開發(fā)之間的各種爭斗段子。產(chǎn)品經(jīng)理不懂技術(shù)在創(chuàng)作層面上來說是必要的要门，反之一個好的技術(shù)是絕對設(shè)計不出一款好的產(chǎn)品的虏肾，如果讓一個人即做開發(fā)又做產(chǎn)品。欢搜。封豪。。炒瘟。吹埠。我真的很難想象產(chǎn)品出來是啥樣子的。。藻雌。雌续。。胯杭。
那么問題來了驯杜，產(chǎn)品經(jīng)理到底要不要懂技術(shù)呢？答案是了解就好做个，不要深入也不能完全不懂鸽心！為什么？打個比方居暖，我們設(shè)計一個摩天大樓顽频，這個大樓的設(shè)計者可以完全不用考慮各種物理定律天馬行空，漂浮在半空中的天空之城都沒問題太闺，但是這種大樓至少在他活著的時候是不會竣工的甚至都不會動工糯景，真正好的設(shè)計至少他得知道樓為什么不能漂浮在半空中，怎么設(shè)計這個樓才不會倒塌等等省骂。相應(yīng)的蟀淮，產(chǎn)品經(jīng)理所要了解的東西也遠(yuǎn)不止如何天馬行空如何讓最終用戶眼前一亮。恰巧钞澳，我認(rèn)識一個產(chǎn)品經(jīng)理他就完全不懂技術(shù)怠惶，最近發(fā)現(xiàn)了自己至少得了解一下產(chǎn)品是如何實(shí)現(xiàn)的，所以在網(wǎng)上看了半天轧粟，還是云里霧里策治，看了還不如不看越看越懵逼。
以上是這篇文章的前提條件兰吟，為了不讓我認(rèn)識的這位產(chǎn)品小達(dá)人更加迷茫通惫，我決定給他寫一篇干貨，介紹一下他的產(chǎn)品到底是如何落地的揽祥。
廢話不多讽膏，我們開始正式進(jìn)入主題！
二拄丰、正文
我們以一個最簡單的架構(gòu)來說，如下圖
紅色的1就是產(chǎn)品經(jīng)理設(shè)計出來的產(chǎn)品最終在用戶那里展示出來的東西俐末，一般管他叫前端料按；紅2是網(wǎng)關(guān)層，是后端與前端交互的中間層卓箫；紅3是后端服務(wù)载矿，由各種后端語言開發(fā)完成，所有的數(shù)據(jù)處理邏輯都是由后端完成；紅4是數(shù)據(jù)庫闷盔，就是存儲數(shù)據(jù)存儲文件的各種服務(wù)弯洗，那接下來就根據(jù)1、2逢勾、3牡整、4的順序分別說明一下。
2.1溺拱、前端技術(shù)
前端的實(shí)現(xiàn)就是產(chǎn)品經(jīng)理設(shè)計的產(chǎn)品最終展現(xiàn)在用戶面前的樣子逃贝，如APP、WEB前端迫摔、小程序等等沐扳，不同的展現(xiàn)方式需要由不同的攻城獅去完成，用的技術(shù)也基本不同句占，有些甚至需要用到多種語言去完成沪摄，這個是與產(chǎn)品經(jīng)打交道最多的。以目前來看主流的前端展現(xiàn)無非就是APP纱烘、WEB前端（PC端網(wǎng)站卓起、移動端網(wǎng)站等用瀏覽器打開的）、小程序這幾種凹炸。完成一個前端產(chǎn)品步驟基本分為三個戏阅，跟把大象裝進(jìn)冰箱的步驟差不多：
1、畫頁面（把冰箱門打開）：所有的頁面都是前端工程師手動畫上去的啤它，雖然也有一些前端框架可以用奕筐，但頁面還是需要細(xì)致的調(diào)整，比如頁面的布局变骡、按鈕是什么顏色的离赫、表單之間的距離、字體的大小等等塌碌；
2渊胸、頁面邏輯（把大象裝進(jìn)去）：一個前端頁面畫好之后沒有邏輯去處理，最多算是一個靜態(tài)頁面台妆，沒有那么多的前端交互翎猛，所以需要寫大量的前端邏輯去處理，比如點(diǎn)一個按鈕實(shí)現(xiàn)什么功能接剩、表單輸入的校驗(yàn)切厘、拖動效果、不同頁面之間的跳轉(zhuǎn)等等懊缺；
3疫稿、前后臺交互（把冰箱門關(guān)上）：頁面畫好了、邏輯也寫好了，但是數(shù)據(jù)從哪里來遗座？比如點(diǎn)開個人信息頁舀凛，個人信息從哪里來？那就是后端服務(wù)給的途蒋，需要發(fā)起一個HTTP請求去問后端服務(wù)要猛遍，同樣的，前端修改完一個信息之后點(diǎn)擊提交按鈕碎绎，數(shù)據(jù)提交到哪里去螃壤，也是需要發(fā)起一個HTTP請求到達(dá)后端，由后端處理完之后給出反饋筋帖。
前端這里APP的開發(fā)我不是太懂奸晴，所以只能匆匆?guī)н^，有寫的不對的地方也請大家賤量日麸！關(guān)于前端我著重說網(wǎng)站的前端寄啼。
2.1.1、APP
目前市面上主流的就是安卓版APP和IOS版APP代箭，這兩種APP由于操作系統(tǒng)不一樣墩划，所以由兩種不同的語言去完成，安卓的APP用的主流語言是JAVA嗡综，IOS由object C開發(fā)乙帮，這就是為什么你們公司為什么要分開招聘安卓和IOS工程師的原因，當(dāng)然你要是說你們公司的工程師流弊极景，一人干安卓和IOS的開發(fā)那我也沒的說察净，坐等他累死！
安卓開發(fā)：安卓機(jī)上的APP剛才說主要開發(fā)語言是JAVA盼樟，JAVA語言主要是用來處理頁面邏輯的氢卡，畫頁面的話還得需要布局文件，一點(diǎn)一點(diǎn)的去調(diào)晨缴，由于市面上安卓機(jī)的機(jī)型特別的多版本也特別的多（因?yàn)榘沧肯到y(tǒng)是開源的译秦，所以很多廠家都樂此不疲的自己去定制屬于自己的安卓操作系統(tǒng)，比如格力的開機(jī)畫面击碗。筑悴。。）延都，所以安卓工程師的大部分時間都花在做不同屏幕的適配和不同機(jī)型不同版本的兼容問題上雷猪。
IOS開發(fā)：IOS系統(tǒng)是蘋果自己出的，開發(fā)者只能在蘋果生態(tài)的環(huán)境內(nèi)開發(fā)晰房，而且蘋果的開發(fā)者賬號是收費(fèi)的，也就是說一個IOS開發(fā)工程師想要成為真正的大牛首先你得有錢買一臺蘋果電腦！其次想要你的產(chǎn)品真正能跑起來在蘋果市場上交付你不給蘋果交保護(hù)費(fèi)那是不可能的殊者！
2.1.2与境、WEB前端
我們?nèi)粘５灿脼g覽器打開的都是網(wǎng)頁端，不管是是電腦的瀏覽器還是手機(jī)的瀏覽器猖吴，包括你微信掃碼之后打開的頁面（小程序除外）摔刁，都是網(wǎng)頁端的范疇，網(wǎng)頁端的使用率其實(shí)要比APP高很多海蔽，我們現(xiàn)在日常辦公居家旅行都離不開共屈。它的實(shí)現(xiàn)其實(shí)也離不開這三個步驟，實(shí)現(xiàn)的方式最底層最核心的是三塊党窜，一塊是最基本的HTML頁面布局拗引，一塊是CSS樣式表，還有就是重中之重的JavaScript（JavaScript跟JAVA不是一回事）幌衣！
我們在頁面上能用肉眼看到的都是HTML最原始的展現(xiàn)形式矾削，它基本是用標(biāo)簽框柱的，由各種HTML標(biāo)簽組成豁护，開始和結(jié)尾是<html></html>這樣的哼凯，你看到的內(nèi)容都在<html><body></body></html>的body中，你設(shè)計一個表單楚里，里面有各種輸入报破，這些輸入就是<input/>這樣的。
CSS樣式表是用來控制HTML的樣式崭添，就好比女人的彩妝型宙，一個女人出門如果不化妝就是路人甲，一個HTML如果沒有CSS控制樣式一樣是丑到讓你無法直視吝梅，不同的是有些女人天生麗質(zhì)不需要化妝虱疏，但是HTML如果不化妝那就是慘不忍睹，你看到的就是個框架苏携，毫無美可言做瞪，所以HTML是藝術(shù)的線條勾勒，CSS樣式表就是藝術(shù)的填充方式右冻，線條什么顏色装蓬、字體多大、表單之間的距離等等都是CSS去控制纱扭。
至于JavaScript那就神了牍帚！沒有JavaScript，只有HTML+CSS那最多也就是畫上的美女乳蛾，有了JavaScript那就是活生生站在你面前的美女暗赶，試想一下鄙币，你約你心中的女神去吃飯，來的只有一張她的照片蹂随，那是什么樣的感覺十嘿？當(dāng)然JavaScript主要功能除了控制頁面的各種邏輯之外還負(fù)責(zé)做各種前后端的交互，你發(fā)起HTTP請求到后端請求數(shù)據(jù)岳锁，表單數(shù)據(jù)填寫完成之后發(fā)起HTTP請求到后端提交數(shù)據(jù)绩衷，這些都是由JavaScript來完成的，可以理解成這樣激率，請求數(shù)據(jù)就是你想請你的女神吃飯咳燕，于是你大夏天40°高溫跑到女神家樓下，然后你問你的女神出來吃飯嗎乒躺？你的女神覺得天太熱你這長相不值得她出門于是以天太熱為由委婉的拒絕了你招盲！提交數(shù)據(jù)就是你想了想確實(shí)天太熱女神不想出門，然后你又大老遠(yuǎn)跑去買了女神最愛吃的東西送去給她聪蘸，她非常感動宪肖，拿了東西跟你說了聲謝謝然后把門關(guān)上，然后你很開心健爬！
現(xiàn)在前端技術(shù)發(fā)展的特別壯大控乾，各種前端框架層出不窮，我們前兩年項(xiàng)目用的angularJS+bootstrap娜遵，后來用VUE+elementUI蜕衡，產(chǎn)品經(jīng)理聽了之后一頭霧水，不知道我們在說什么设拟，也無法理解我們?yōu)槭裁匆@么折騰用這用那的慨仿，至于angularJS更是不知道是啥了，其實(shí)很好理解纳胧，angularJS镰吆、VUE這些都可以理解為被封裝過的很牛逼的JavaScript，bootstrap被封裝過的很牛逼的HTML+CSS樣式跑慕，這些都是框架万皿，不好理解沒關(guān)系，說簡單點(diǎn)就是為了省代碼核行，邏輯框架的封裝可以這么說牢硅，以前你想請女神吃飯，你得大夏天40°高溫跑到女神家樓下去問她芝雪，現(xiàn)在有了這些框架你就可以直接躺在床上一邊喝著冰可樂一邊微信問她約嗎减余？她說不約！對話結(jié)束惩系！樣式框架也是一樣位岔，姑娘之前跟你視頻聊天得畫兩個小時的裝如筛，現(xiàn)在直接開美顏開濾鏡，一秒鐘搞定赃承！
2.1.3妙黍、Hibrid APP
Hibrid App 意為混合模式移動應(yīng)用程序悴侵，它是介于移動WEB技術(shù)和原生APP技術(shù)的中間產(chǎn)品瞧剖，它的誕生是這樣的：之前開發(fā)一款A(yù)PP需要安卓和IOS的人員分別開發(fā)，雖然APP長得都一模一樣可免，但是樣式抓于、排版、布局浇借、頁面邏輯捉撮、接口請求什么的都得分別用安卓和IOS不同的開發(fā)語言去完成，后來大家發(fā)現(xiàn)為什么不能把APP用WEB語言寫出來呢妇垢？然后分別用安卓和IOS的殼子打個包就好了嗎巾遭，這樣會省大量的開發(fā)和人員成本，于是闯估，把頁面布局灼舍、頁面邏輯全交給移動WEB，原生APP只需要包一個瀏覽器打開它就行涨薪，但是WEB瀏覽器有很多原生應(yīng)用無法解決的問題骑素，比如打開攝像頭、調(diào)起支付刚夺、手機(jī)振動献丑、讀取通訊錄、寫本地緩存等等侠姑，那么就需要借助原生應(yīng)用的功能給WEB應(yīng)用提供接口创橄，這樣就誕生了Hibrid App混合模式移動應(yīng)用程序。
2.1.4莽红、小程序
小程序是微信出的一款基于微信內(nèi)的應(yīng)用妥畏，乍一看像是個應(yīng)用程序那樣，但其實(shí)不是船老，小程序是微信基于WEB端開發(fā)語言（CSS咖熟、JavaScript）擴(kuò)展封裝而來，把原本的CSS樣式表柳畔、JavaScript腳本語言進(jìn)行封裝馍管，然后基于自己微信APP的功能提供一些可用的接口供開發(fā)人員開發(fā)，開發(fā)完成后提交至微信薪韩，微信進(jìn)行打包處理后展現(xiàn)給最終用戶确沸。微信小程序可以理解為另一種形式的Hibrid App捌锭，前端頁面、頁面處理邏輯罗捎、后端數(shù)據(jù)交互交給WEB观谦，需要原生應(yīng)用功能的微信給你開接口調(diào)用。
2.2桨菜、網(wǎng)關(guān)豁状、負(fù)載均衡
什么叫網(wǎng)關(guān)？打個比方倒得，你是一個吃貨泻红，口味廣泛，中餐個大菜系都愛吃霞掺，西餐谊路、日式什么的也都愛，你每次想吃不同口味的都要先找一下這個口味的餐廳在哪里然后才能去那里菩彬，很麻煩也記不住缠劝，這時外面公司出現(xiàn)了，你只要跟外賣公司說你想吃什么料理什么菜骗灶，外賣公司記錄了這個餐廳的地址惨恭，當(dāng)看到你的需求之后會找到對應(yīng)的餐廳地址取餐然后送給你，這樣是不是方便很多了矿卑。
負(fù)載均衡的理解還是以吃飯為例喉恋，你想請女神到你家吃飯，你叫了外賣母廷，女神喜歡吃川菜轻黑，外賣公司只記錄了一家川菜店的地址，于是跑過去一看琴昆，排隊(duì)排到大馬路上了氓鄙，等送到你家可能倆小時之后了，你跟女神的晚餐就因?yàn)榕抨?duì)的問題泡湯了业舍，女神餓了半死哪有心情跟你有后續(xù)進(jìn)展抖拦，你很生氣把外賣員給投訴了，外賣員也很冤枉舷暮，后來外賣公司學(xué)聰明了态罪，記錄了N家川菜的地址，當(dāng)你又想請女神到你家吃飯的時候外賣員發(fā)現(xiàn)這家川菜排隊(duì)于是去了另外相對人較少的川菜店下面，把餐及時的送到了你的手上复颈，你和女神吃的都很開心，吃完之后發(fā)生了什么我就不知道了沥割！
2.3耗啦、后端服務(wù)
前端服務(wù)是整個產(chǎn)品的展現(xiàn)層凿菩，后端服務(wù)是整個產(chǎn)品業(yè)務(wù)邏輯處理的最核心的地方，負(fù)責(zé)處理各種業(yè)務(wù)需求帜讲，存取各種數(shù)據(jù)衅谷，然后提供接口給前端服務(wù)進(jìn)行調(diào)用，有人會問既然前端已經(jīng)可以處理各種邏輯了那為什么還需要后端服務(wù)呢似将？因?yàn)榍岸耸遣话踩幕袂峭耆┞督o用戶的，你的HTML玩郊、CSS肢执、JavaScript代碼都會被載到用戶本地由用戶的瀏覽器進(jìn)行解釋和處理，你的數(shù)據(jù)很容易就會被不法分子給串改译红、利用，所以后端服務(wù)對于用戶來說是不可見的兴溜，只會接收數(shù)據(jù)返回結(jié)果侦厚，至于數(shù)據(jù)是怎么處理的你完全不知道。
就拿登錄來說拙徽，前端給用戶展現(xiàn)一個良好的美觀的登錄頁面刨沦，用戶輸入用戶名密碼，點(diǎn)擊登錄后膘怕，前端頁面會請求后端的服務(wù)想诅，把你的用戶名和密碼提交到后端，這時除了你自己和后端服務(wù)器沒人知道你輸入了啥岛心，后端服務(wù)器會根據(jù)數(shù)據(jù)庫中存儲的用戶名来破、密碼進(jìn)行匹配，然后返回給前端結(jié)果忘古。
后端服務(wù)的開發(fā)語言那就多了去了徘禁，根據(jù)不同公司的喜好可以選擇不同的開發(fā)語言，比如JAVA髓堪、.net送朱、PHP、python干旁、nodeJS等等驶沼，它們開發(fā)完之后都會進(jìn)行編譯、打包甚至加密處理然后在服務(wù)器中運(yùn)行争群。
我們常說的給前端的接口也是由后端服務(wù)開發(fā)的回怜，說簡單點(diǎn)就是打開了一個端口，接收各種數(shù)據(jù)祭阀，然后處理鹉戚，再把處理結(jié)果返回給你鲜戒，你可以理解為餐廳里面的服務(wù)員，你要點(diǎn)菜直接叫“服務(wù)員我要點(diǎn)菜抹凳。遏餐。∮祝”服務(wù)員負(fù)責(zé)記錄你要點(diǎn)的菜失都，然后等后廚做好之后再把菜給你端上來，至于后廚的菜到底是怎么做出來的幸冻，用的色拉油還是地溝油你完全不知道粹庞，你只管吃就好了。
2.4洽损、數(shù)據(jù)存儲
前端負(fù)責(zé)提交和提取數(shù)據(jù)庞溜，后端負(fù)責(zé)處理數(shù)據(jù)，那么數(shù)據(jù)存儲就是把前端提交上來的經(jīng)過后端服務(wù)處理過的數(shù)據(jù)存起來的一個玩意兒碑定，至于存哪些數(shù)據(jù)那是后端服務(wù)給的流码，數(shù)據(jù)庫也分為很多種，像關(guān)系型數(shù)據(jù)庫延刘、文件存儲漫试、NOSQL數(shù)據(jù)庫等等，這些數(shù)據(jù)庫都是對應(yīng)不同的數(shù)據(jù)場景來存儲不同的數(shù)據(jù)碘赖，有些數(shù)據(jù)庫會框定死它只存哪些類型的數(shù)據(jù)哪些數(shù)據(jù)不能為空的哪些數(shù)據(jù)的字段長度不能大于多少等等驾荣，就好比你跟女神表白女神說對不起你不是我的菜這樣干脆；有些數(shù)據(jù)庫不會限定條件普泡，來者不拒播掷。
三、最后
以上只是針對一套產(chǎn)品設(shè)計完成之后如何落地的一個簡單概述劫哼，真實(shí)的過程要比上述寫的要復(fù)雜的多叮趴，而且要根據(jù)業(yè)務(wù)的大小由架構(gòu)師進(jìn)行整體的規(guī)劃來定，這里只是寫給不是太明白技術(shù)是如何轉(zhuǎn)化產(chǎn)品的產(chǎn)品經(jīng)理進(jìn)行簡單了解的权烧，本人文化水平不是很高所以只能寫到這里了眯亦，望牛逼的大拿不喜勿噴謝謝！
