大一新生对CS的思考（理论上的项目）

目的：鉴于没有系统地学习过CS知识，但对CS有着浓厚的兴趣，在CS的自学中，发现CS的知识分支极其复杂，想要了解CS，就势必要理清楚其中的细枝末节，尽可能在当下多接触，之后在学习当中可以找清楚自己真正喜爱的并深耕其中

 

目标：理清相关概念，如前端后端。并通过对项目开发的了解，形成自己的学习系统

1.前端：前端设计和前端开发，设计可以理解为网站的视觉设计，开发可以理解为网站的前台代码，而代码实现手段包括HTML，CSS，JavaScript

HTML实现对元素的定义，CSS对元素的定位，JavaScript实现简单的交互

 

HTML支持网页的使用

CSS全名叫级联样式表，拥有扩充精确指定网页元素位置，外观以及创建特殊效果的能力

JavaScript是一种Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。

前端可以做什么

 网站：PC端和移动端

管理系统：主要用作信息管理，如图书馆管理系统，机场管理系统

app：分为混合app和原生app，混合app比如微信公众号，有自己的定位，原生app就是有自己一个独立的安装系统，应用flutter技术

小程序：依托微信，实现便利性，但不具备隐私性

数据可视化：把枯燥的数据图表化

智能家居：智能互动，手机互联

桌面应用：使用electron框架实现，比如vscode编程软件，3A游戏

网页游戏：flash游戏，unity引擎

工具和后端：因为有了Node.js 大前端可以做本地工具和后端开发了，比如基于Node.js的Webpack工具，比如基于Node.js的Serverless开发。

2.项目开发

 了解用户需求，在初步准备中完成需求与能力的协调，这是开头的重要一步，

第二步就是开始设计UI或者UE，UI设计考虑到用户的需求和心理特点，包括以下几个方面：

 

1. 布局设计：确定界面元素的排列和组织方式，使界面清晰、直观且易于导航。

 

2. 视觉设计：包括颜色、图形、图标、字体等视觉元素的选择和搭配，以营造一致的品牌形象和视觉风格。

 

3. 交互设计：设计用户与界面的交互方式，包括按钮、链接、表单、菜单等交互元素的设计，以及页面切换、动画效果等交互行为的设计。

 

4. 可用性设计：优化界面的易用性和可访问性，通过简化操作流程、提供提示反馈等方式，使用户能够轻松理解和操作界面。

 

5. 响应式设计：考虑不同终端设备（如桌面、移动端）上的展示效果，使界面在各种屏幕尺寸上都能良好适配和显示

优秀的UI设计范例

 

 第三步：客户端开发：客户端负责采集，编码，收发，解码和渲染，常见的比如爱奇艺客户端，优酷客户端，开发一个客户端，需要掌握哪些技术

前端开发技术（编程语言）：
HTML/CSS/JavaScript： 构建基本的网页结构、样式和交互。

比如iOS平台上的Objective-C或Swift，Android平台上的Java，Windows平台上的C#等

前端框架：

如React.js、Angular、Vue.js等，用于更高效地组织和管理前端代码。提供一系列的api

移动端开发框架：

如React Native、Flutter等，用于跨平台移动应用开发。

移动应用开发：
iOS开发： 使用Swift或Objective-C编写原生iOS应用。

Android开发： 使用Java或Kotlin编写原生Android应用。

跨平台移动应用开发： 使用框架如Flutter、React Native、Xamarin等，可以一套代码同时运行在多个平台上。

桌面应用开发：

Electron： 使用Web技术（HTML、CSS、JavaScript）构建跨平台桌面应用。

JavaFX： 使用Java构建富客户端应用。
WPF（Windows Presentation

Foundation）： 使用.NET框架构建Windows桌面应用。

界面设计工具UI：
Sketch、Adobe XD、Figma等： 用于设计和原型制作。

Zeplin、InVision等： 用于设计与开发之间的协作和交流。

版本控制系统：

Git： 用于跟踪和管理代码的版本。

 

包管理工具：
npm（Node Package Manager）： JavaScript的包管理工具，用于安装和管理项目依赖。
构建工具：

Webpack、Parcel、Rollup等： 用于构建、打包和优化前端资源。

测试工具：
Jest、Mocha、Selenium等： 用于进行单元测试、集成测试和端到端测试。

性能优化工具：
Lighthouse、Webpack Bundle Analyzer等： 用于分析和优化应用性能。

响应式设计：

Bootstrap、Tailwind CSS等： 用于创建响应式的用户界面。

WebAssembly：
用于在浏览器中运行高性能的底层代码，可用于提高Web应用的性能。

数据库：

比如MySQL，SQLite，MongoDB等，这些数据库都可以帮助开发者更好的处理数据存储问题

调试工具：

比如使用Xcode或AndroidStudio的调试工具，这些调试工具可以帮助开发者更好的定位和解决app开发中出现的问题。

测试和维护工具：

完成客户端的上传，测试安全性和便利性，维护版本更新，修复bug

这只是一个概要，具体的技术选择可能取决于项目的需求、规模和团队的技术栈偏好。

 

第四步：webapp

WebApp，全称Web Application，是指基于Web技术构建的应用程序，它可以通过浏览器访问，无需安装，具有跨平台、可维护性强、数据共享等优点。WebApp的原理是基于Web技术栈
核心是前端框架和后端框架的配合，前端框架主要负责用户界面的设计和交互逻辑的实现，后端框架主要负责业务逻辑的处理和数据的存储。

具有跨平台、可维护性强、数据共享等优点，应用场景非常广泛，是未来应用程序发展的趋势。

例如，淘宝、京东等电商平台的WebApp可以让用户在任何设备上购物，提高用户的购物体验；微信、微博等社交网络的WebApp可以让用户在任何设备上分享和交流信息，提高用户的互动体验。另外，在线教育和金融服务等领域，WebApp也具有极为强大的能力，相关学习可以通过浏览器开发者模式进行浏览优秀案例。（现在不会展示代码片段，主要问题是不具备分析代码的能力，也不具备将代码实现的能力，所以目前的讨论仅限理论和案例学习方面）

第五步：混合开发

混合开发(Hybrid App开发):是指在开发一款App产品的时候，为了提高效率、节省成本而利用原生与H5的开发技术的混合应用。通俗点来说，这就是网页的模式，通常由“HTML5云网站+APP应用客户端”两部份构成。混合开发是一种取长补短的开发模式，原生代码部分利用Web View插件或者其它框架为H5提供容器，程序主要的业务实现、界面展示都是利用与H5相关的Web技术进行实现的。比如现在的京东和今日头条的网页界面

混合开发的本质

在原生app中，使用webview作为容器，来承载一个web页面

 JSBridge是一座用JavaScript搭建起来的桥，一端是web（网页），一端是native（本地）

第五步：后端开发

后端开发人员需要熟悉互联网架构、数据结构、算法、网络协议和安全性等方面的知识。

后端开发的主要工作包括设计和编写API、管理和维护数据库、构建基础设施以及实现服务器端的网络通信和逻辑运算等

后端开发本质是维护程序，服务器维护，与前端开发不同

 第六步：单元测试和前后端联调

单元测试：在写代码中间，将代码以单元的格式，进行调试，避免写好所有的程序发现代码出错了，改了这边，上面的程序又得重来，这里单元的概念依据你使用的语言而定

如C语言中单元指一个函数，Java里单元指一个类，图形化的软件中可以指一个窗口或一个菜单等

这里还有一些衍生概念

经常与单元测试联系起来的另外一些开发活动包括代码走读（Code review)，静态分析（Static analysis)和动态分析（Dynamic analysis)。静态分析就是对软件的源代码进行研读，查找错误或收集一些度量数据，并不需要对代码进行编译和执行。动态分析就是通过观察软件运行时的动作，来提供执行跟踪，时间分析，以及测试覆盖度方面的信息。

这里有一些基础问题

1.什么时候测试

从经验来看，先编写产品函数的框架，然后编写测试函数，针对产品函数的功能编写测试用例，然后编写产品函数的代码，每写一个功能点都运行测试，随时补充测试用例。

所谓先编写产品函数的框架，是指先编写函数空的实现，有返回值的直接返回一个合适值，编译通过后再编写测试代码，这时，函数名、参数表、返回类型都应该确定下来了，所编写的测试代码以后需修改的可能性比较小。

2.桩代码

桩代码就是用来代替某些代码的代码

例如，产品函数或测试函数调用了一个未编写的函数，可以编写桩函数来代替该被调用的函数，桩代码也用于实现测试隔离。采用由底向上的方式进行开发，底层的代码先开发并先测试，可以避免编写桩代码。

这样做的好处有：减少了工作量；测试上层函数时，也是对下层函数的间接测试；当下层函数修改时，通过回归测试可以确认修改是否导致上层函数产生错误。

单元测试应尽一切可能避免修改桩代码

 

通常只有核心模块和底层模块的代码才需要单元测试

以下是一个单元测试报告目录的案例

前后端联调

前后端联调是一种真实业务数据和本地mock数据之间来回切换以达到前后端分离架构下的不同开发速度时数据交换的一种方式方法

本质上，前端按照客户需求写的代码，包装后的这个数据不一定与后端适配，所以要测试格式和适配

这里其实暗含了一个大前提，你服务的公司使用的是前后端分离开发模式：

一开始是系统分析阶段，系分和前端开发人员约定好页面上所需的逻辑变量

进入功能开发阶段，前端开发人员进行前台页面结构，样式，行为层的代码编写，并根据约定好的变量，逻辑规则，完成不同情况展示不同的表现。而后端开发人员，只需要按照约定，赋予这些变量含义，并提供前后端交互所需要的数据即可。

所以通过这一步骤，我们可以认识到前后端使用的平台是不一样的，需要通过正确的接口和调试才可以发挥前后端的优点

QA测试

虽然有几种不同类型的 QA 测试，但一些关键类型包括：

 

移动测试：随着移动开发的重要性不断提高，组织测试移动设备变得越来越重要。许多移动应用程序测试解决方案现在为用户提供了在虚拟移动设备上进行测试的能力。这一点至关重要，因为移动设备和桌面设备具有不同的性能特征和潜在挑战。

回归测试：回归测试确保现有的软件应用程序不会受到更改或添加的负面影响。

软件性能测试：性能测试有助于测试限制，以及检查可伸缩性、速度和稳定性。通过对软件应用程序进行性能测试，组织将更好地了解软件的功能和局限性。

用户接受度：用户接受度测试是一种性能测试形式，可以让公司更好地了解最终用户的想法以及他们对特定软件应用程序的感受。通过了解用户的需求和期望，组织可以让客户满意

QA测试本质上就是软件开发后期，对软件进行对应的测试

最后就是在商业平台上发布自己的项目了，剩下的就是经济学和博弈论的内容了

技术总结

总的来说，一个项目的完成，从想法落地，调试前后端适配的环境，编写代码，调试，修改bug，包装，发布，每一步都是一个大工程，并且一旦前面发生了失误，会对后面的工作产生很大的影响

本次是根据目前学习知识进行的项目学习的理论部分，到后面掌握技术，可以更新项目实践中的经验，把它和理论进行对照分析，找出自己的知识薄弱处