产品经理必懂的技术那些事儿--4--前端技术
客户端
产品经理在实际工作中设计的产品更多是以用户使用的客户端产品为主，例如产品经历的原型图，就是从用户视角设计的产品功能。
客户端是指普通用户时候用的终端，用户通过客户端接触并使用产品。客户端一般指个人电脑、智能手机和平板电脑，以及逐渐普及的智能手表。如图所示：
根据现在的主流产品情况，我们主要讲一下安卓，IOS和WEB。
安卓
我们先看安卓的基础技术和基本控件，。安卓是基于Linux开发的开源软件。一般安卓会用Java作为开发语言，以及用前面提到的eclipse作为开发工具。而谷歌推出的Android studio更好用，可以一边编写界面代码，一边查看实际效果。在安卓的系统中，有多种基础控件。
包括，View,视图，表示在屏幕上展示的一个可视化控件，是安卓所有控件的根。也就是安卓所有的控件，都是基于view扩展的。设计的时候，要定义好这个view的宽度、高度。
除了view，还有button，就是一个按钮，安卓提供的按钮。Textview，是文本展示框，而editview则是文本输入框。Imageview，是图片展示控件。Listview是列表控件。GridView是容器空间，和列表类似，只不过GridView是宫格形状的，就是一块一块，比如淘宝首页的十个分类标签。就是一个宫格控件。
而微信的通讯录，就是一个列表控件、图片控件、文本展示控件的结合。而这些展示的样式，左右排列，上下排列，这种按照一定规则排列的方式叫做布局。意思就是怎么摆放。
因为安卓系统是开源的，所以安卓的权限控制，实际上是对用户授权的一种后向保证。这些权限的设置实在开发阶段，由研发人员标记在代码中的，用户下载好这个软件，同意安装的时候，则视为授权使用。当安卓App被开发出来之后，会由开发者打包完毕，生成一个产品名字.apk的软件包，并将打包后的APP发布到应用市场，提供给用户下载。安卓的发布，需要发布到很多厂家的应用市场，是一个体力活。
同时呢，为了解决安卓屏幕界面适配的问题，安卓提供了一种使用可拉伸图片作为界面素材的解决方案，这种图片是以扩展名“.9png”结尾的图像文件，通常叫做“点9图”。但是点9图只能对一些规则图形进行横向或者纵向拉伸，如果是不规则的图形，只能让设计师设计几个不同尺寸的图片了，然后系统根据当前屏幕的分辨率和尺寸自动加载适合的图片素材。
iOS
聊完安卓，我们再聊聊IOS。iOS是闭源系统，它很有个性，它的空间前面都有“UI”这两个字母。比如，UIview，和安卓view一致，是所有控件的基础。还有UIbutton，就是按钮。还有UILable，表示文本展示控件，UItextfield，是文本输入框控件，UIimageview，是图片控件，UItableview表示列表型控件，UIcollectionview是表格展示的空间，也是一个宫格图形的。
而如果安卓有权限，IOS也有系统权限，不过IOS系统的控制和安卓是不一样的，安卓的授权发生在安装阶段，而iOS的授权是在用户使用产品的过程中，一般我们刚下载一个产品，第一次打开的时候，弹出来的那些就是权限控制的。
IOS的软件打包好后，会生成一个产品名称.ipa的软件包，发布到App Store就可以了。同时，发布到App Store是需要苹果的开发者证书的，三种。第一种是个人开发者，第二种是公司开发者，第三种是企业开发者。企业开发者可以自行打包并发布应用，也就是企业开发者可以自己开发，绕过App Store提供APP下载，不过也只能在有限的范围内。现在已经很少有企业开发者证书了，很贵很贵的。
说完安卓和iOS，我们再聊聊web的基础知识。电脑网页就是web页，每一个web页，都有一个唯一的地址，所谓域名就是每一个网站的唯一地址，比如百度的域名是baidu.com，我们访问百度的时候，可以通过http://baidu.com,或者http://www.baidu.com,www是万维网，是一个网页地址的前缀，后面的baidu.com才是百度域名，域名实际上是将一个数字化的IP地址进行了表达方式的转换。比如百度的IP地址是14.215.177.39，你把这个输入网址导航栏，也会进入百度页面，但是没人会写这个，多麻烦，哪能记得住，所以就有了域名。
通常，我们会用HTML语言制作web的页面，然后通过CSS样式表对web页面进行美化。
HTML
HTML，hypertext markup language，超文本标记语言，超文本的意思就是不仅是文本，还可以是图片，链接、音乐等元素，标记语言是对HTML特性的一种描述，HTML语言的语法结构是通过一个个的标签标记体现的。
一个网页的结构往往包括‘头’和‘主体’，头部的内容使用标签<head></head>标记，第一个head标签是指标签的开头，第二个带斜线的标签标示标签结尾，头部的内容就放在头尾标签之间。
头部信息主要存放一些网页信息，例如网页标题和网页描述，主体部分用标签<body></body>表示，网页的内容全部放在body标签下。整个网页的内容都会放在一个顶层标签<html></html>下，如果我们打开一个网页，查看源代码，大概能看到的框架结构如下：
这是一个最基础的HTML结构，我们所看到的网页内部的内容，例如文字、图片、链接等都在body标签中，网页链接通过<a href= >链接文字</a >标签表示，href表示单击连接后跳转的链接地址，两个标签之间的文字就是会最终显示在网页上的链接文字。我们在网页上看到的各种图片，就是通过标签< img src=“xxx.png”/>表示的，src是图片的地址，我们也可以对图片进行大小和形状的设置。在网页上展示的输入框，可以通过标签<input name=“username”type=“text”/>表示，input标签表示输入框，name是这个输入框的名称，我们可以通过这个名称定位到这个输入框，从而获取里面的内容，type表示该输入框的输入类型是文本。
如今我们常说的H5实际上是HTML的版本号，之前还有HTML 4、HTML 3等，现在基于Web技术的开发基本都是基于H5技术进行的，H5可以很好地对移动设备进行适配。通常，我们只需要开发一套网页，可以通过适配的方式在PC浏览器和移动端浏览器上展示，省去了开发两套网页的麻烦。
CSS
CSS（Cascading Style Sheets）全称层叠样式表，是一种将网页内容与网页样式分离的技术。简单地说，CSS是给只有内容的HTML页面穿衣服，让HTML页面好看起来。我们可以定义一套CSS风格，例如指定各种型号的字体、颜色及按钮的样式等，然后将这个CSS文件嵌入HTML网页中，这个网页中所有的控件样式都会根据这个CSS文件的样式设计进行统一替换。
URL
接下来聊聊，URL（Uniform Resource Locator），URL的全称是统一资源定位符，互联网上所有的资源都有一个唯一的URL地址，资源的类型可以是一个网页、一张图片、一首歌曲或者一段视频。通过URL标记每一个资源，就可以通过浏览器很方便地访问到这些资源。。
URL就是我们所说的网址，类似“http://www.xxx.com/aa/bb/c.png”这样的结构。URL通常分为三部分，第一部分是协议，也就是上例中的“http://”,HTTP协议（Hypertext Transfer Protocol）全称超文本传输协议，是互联网的基本协议。第二部分是资源所在的服务器IP地址，为了方便识别，IP地址通常被替换成域名。第三部分是资源的具体路径，也就是域名后斜杠的部分，这部分内容和文件夹的层级结构类似，不同的结构间通过斜杠进行区分。
HTTP协议是互联网应用最广泛的一种网络协议，所有的WWW服务都必须遵守HTTP协议。
HTTP还有一个安全版本HTTPS（Hyper Text Transfer Protocol over Secure Socket Layer）.
URL和HTTP为互联网里所有的资源定义了唯一地址并制定了传输协议标准，使得互联网服务能以统一的标准运转。
移动App的实现
移动App的实现有两种形态，一种是通过Web的方式实现，也就是在App内部通过加载Web网页的方式实现产品功能；另一种是Native或者叫原生的方式实现，这种方式是使用移动平台原生的控件开发而成。
产品是以网页的方式实现，就像我们访问一个网站一样，而且网页实现通常都是动态布局的，不需要对手机进行特别的适配，相对于Native实现的方式，成本要低很多。
对于一些用户使用频率高而且对体验要求高的产品模块，使用Native方式实现能保证用户体验，对于一些使用频率不那么高，而且内容变化比较频繁的产品模块，选用Web实现可以保证灵活度，因为修改Web的内容只需要在服务端进行网页修改就行，不需要重新更新发布App，但是如果要修改Native的功能就得重新更新发布App，更新成本较高。还有之前提到的开发成本，开发Web App只需要Web开发人员就能完成，而且对适配的要求不像Native App要求得那么高。另外，可以实现跨平台运用。
Cookie和Session
在Web技术中有两个技术术语，分别是Cookie和Session。我们先看两个具体的用户场景，第一个是当我们登录一些网站要输入用户名和密码时，通常都有一个记住用户名和密码的功能，这样下次登录时就可以不重复输入。第二个场景是当我们使用电商类网站购物时，把商品加入购物车后，下次进入购物车或者从其他客户端进入购物车仍然能看到之前加入购物车的商品。
上述两个用户场景的功能实现分别用到了Cookie和Session。记住用户名和密码是通过Cookie实现的，保存购物车记录则是通过Session实现的。
无论是Cookie还是Session，实际上都是一种会话存储技术，区别在于Cookie是将信息存储在本地，而Session是将信息存储在服务器端。这也就不难理解为什么当我们换一个客户端时记住密码会失效，但保存的购物车商品仍然能看到。
通过这张图，我们可以了解Cookie和Session的区别。
Cookie的用途十分广泛，现在一些广告推广系统中常用到Cookie。例如，当我们在一个电商网站浏览过某一类商品，再去另外一个视频网站看视频，就会发现视频网站的广告栏给我们推荐了刚刚我们在电商网站浏览过的商品，而这两个网站是不同公司的产品。实际上，这里用到的就是本地缓存的Cookie信息，通过这种方式就实现了广告的精准展示。（题外话，cookie是能禁用的，禁用方法可以百度一下，有利有弊。）
与Cookie不一样，Session是一种存储在服务端的信息，存储的方式可以是文件也可以是数据库。通过Session存储的信息不会随客户端的更换而丢失，例如之前我们提到的购物车商品记录。
Hybrid App
Hybrid App是一种混合开发技术，所谓混合开发就是指在一个产品中同时使用Native技术和Web技术。根据产品使用场景的需要和技术框架设计，在不同的页面或者同一个页面的不同模块同时使用Native和Web技术，这种通过混合技术开发实现的产品就叫作Hybrid App。
产品经理要经常处理各种产品问题，协助发现和处理BUG就是日常工作之一。
从如下几个方面定位有助于非技术背景产品经理解决问题。
首先，根据客户端出问题时提示的异常信息判断。不同的信息能给工程师不同的判断依据，例如，提示网络异常和提示数据加载失败是两个完全不同的信号，网络异常有可能是用户当前设备所处的网络环境不佳，这种情况不是产品本身的问题，而是外部网络条件的问题，所以这种情况下工程师也做不了什么。如果是数据加载失败，有可能是客户端在向服务端发送请求时，数据返回有误或者数据显示有误，问题可能出自服务端，也可能是服务端修改了数据字段导致客户端解析失败。此时，如果定位不到具体问题，需要与客户端工程师、服务端工程师共同联调定位问题。
其次，对于产品表现出来的问题或BUG，产品经理不要急于下结论定位问题出在客户端还是服务端，基于前文提到的一些客户端技术，可以做一些基本判断。例如，列表中显示的数据有重复项，而且每次都能复现，这极有可能是服务端返回数据时返回了两个一样的，同时也有可能是客户端在解析数据加载显示时的问题，把一个数据展示了两次。产品经理在遇到这个问题时，可以先从一方下手，即先向服务端工程师确定返回的数据是否正确，如果确定无误，那问题肯定就出现在客户端解析和展示数据的环节，直接与客户端工程师沟通并解决问题即可。
这就是我们今天要说的全部的客户端的技术知识了。接下来，我们聊一聊服务端的技术知识。
