2.4　技术方案探索

在产品创意形成后，我们需要探索适合的技术方案。对于没有技术背景的读者，理解技术选型就像学习一门新的语言——不需要掌握所有细节，但要理解基本概念和它们的用途。下面通过与AI对话的方式，了解如何进行技术方案探索。

2.4.1　使用LLM生成技术架构图

在2.3一节中，介绍了如何利用LLM生成产品架构设计。接下来将这个产品架构转化为技术架构，这样就能清晰地了解需要用到哪些技术组件了。就像建筑师先画出房屋的整体设计，然后细化为具体的工程图纸一样，技术架构图能帮助我们明确每个组件的技术要求。

1．从产品架构到技术架构的转换

产品架构主要关注“做什么”，而技术架构则关注“怎么做”。以2.3一节设计的智能音箱为例，前面介绍了它的功能模块和业务流程，现在需要明确每个功能背后的技术实现。

在这个转换过程中，可以借助LLM的能力，向它提问。

帮我用Mermaid生成对应的技术架构图。

通过这样的提问，LLM可以将产品需求转换为具体的技术组件，并用Mermaid图表的形式呈现出来。如图2-3所示是基于之前设计的智能音箱产品架构生成的技术架构图。

扫码看大图

图2-3　智能音箱技术架构图

2．技术架构图的解读与应用

通过这个技术架构图，可以清晰地看到智能音箱从硬件到云服务的各个技术层级。

（1）硬件层：包括麦克风阵列、扬声器、指示灯等物理组件。

（2）基础平台层：负责音频处理、网络通信等基础功能。

（3）核心服务层：包含唤醒词检测、语音识别、自然语言理解等核心AI能力。

（4）业务能力层：具体的功能模块，如音乐服务、信息查询等。

（5）应用层：统筹管理各种服务和会话过程。

（6）用户交互层：与用户直接接触的界面部分。

（7）云服务层：提供后台支持的各种云端服务。

各层级之间的箭头表示数据流和依赖关系，帮助我们理解整个系统的工作原理。

3．利用技术架构图指导学习和开发

对于没有技术背景的读者，这样的架构图可以做到以下几点。

（1）明确学习重点：根据架构图中的关键组件，确定需要了解的技术领域。例如，如果你对智能音箱的语音识别部分感兴趣，就可以重点学习CORE2（语音识别引擎）相关的技术。

（2）建立系统认知：帮助你建立起技术系统的整体认知，理解各部分是如何协同工作的。

（3）指导项目开发：在实际开发中，可以按照架构图逐层实现，确保各组件能够正确地集成在一起。

（4）技术选型参考：在选择具体技术实现时，可以针对架构图中的每个组件，咨询LLM哪些技术栈最适合实现它。

2.4.2　向ChatGPT或者Cursor Ask模式咨询技术选型

如果你没有使用LLM生成技术架构图，或者需要针对架构图中的具体组件选择合适的技术实现，可以向ChatGPT或Cursor Ask模式咨询。这就像人们在装修新房时，找装修顾问来帮忙规划一样。同样的，在选择技术方案时，ChatGPT或者Cursor Ask模式就可以成为你的技术顾问，帮你了解不同技术的特点。

向AI描述技术需求就像看病时向医生描述症状一样，需要清晰且有条理。一个好的技术需求描述应该包含以下要素。

（1）产品定位：说明要开发什么类型的产品。

（2）核心功能：列出最重要的3～5个功能点。

（3）使用场景：描述用户如何使用产品。

（4）性能要求：说明产品需要达到的技术标准。

（5）发展规划：预计用户规模和未来扩展需求。

下面是一个实用的模板，大家可以直接复制使用。

下面通过一个具体的例子来说明如何使用这个模板。

当用户这样描述需求时，AI会给出更有针对性的回答。它会像下面这样，用生活化的比喻来解释技术方案。

前端技术（用户能看到的部分）如下。

·　React：就像搭积木一样组装界面，容易修改和重用；

·　React Native：能同时制作手机App和网页版本，省时省力；

·　Tailwind CSS：快速美化界面的工具，就像给应用穿衣服。

后端技术（在后台运行的部分）如下。

·　Node.js：处理用户请求的服务器程序，像餐厅里的服务员；

·　MongoDB：存储用户数据的数据库，像一个巨大的电子档案柜；

·　Redis：加快数据访问的缓存系统，像便利贴记事本。

图片处理和存储如下。

·　AWS S3：存储图片的云空间，像一个无限大的网络相册；

·　CloudFront：加速图片加载的分发系统，像遍布全球的快递网络。

实时通信如下。

·　Socket.IO：处理即时消息，像即时通信软件的引擎；

·　Firebase：提供消息推送服务，像手机的通知系统。

2.4.3　GitHub搜索开源项目指南

作为一个初学者，你可能会觉得GitHub（一个全球最大的代码托管平台，就像程序员的社交网络）就像一座巨大的图书馆，里面存放着数不清的“技术书籍”（开源项目）。不要担心，下面就来教你如何在这座“图书馆”中找到适合你的“书”。

1．基础搜索技巧

就像在淘宝上搜索商品一样，在GitHub上搜索项目也有一些实用的技巧。

（1）进入GitHub首页（github. com）后，会在顶部看到一个搜索框。

（2）在搜索框中输入想找的项目类型，比如“图片分享应用”。

（3）使用右侧的筛选器，就像在网购时筛选商品一样。

举个例子，如果想找一个图片分享应用的项目，按以下步骤操作。

（1）搜索image sharing app或photo sharing。

（2）在左侧的筛选选项中选择感兴趣的编程语言（比如JavaScript）。

（3）按照Stars（星标数）排序，这就像商品的好评数。

2．解读项目信息

每个GitHub项目页面都有一些重要的“身份信息”，下面就来介绍它们。

1）基础数据（就像商品的基本信息）

·　Stars（星标数）：相当于点赞数，数字越大，说明项目越受欢迎。

·　Forks（复制数）：其他开发者复制这个项目的次数，反映项目的影响力。

·　Watchers（关注者）：关注这个项目的人数。

2）项目标签（Topics）

·　位于项目描述的下方，就像商品的标签。

·　这些蓝色的标签说明了项目的特点，比如：react（使用的技术）、web-app（项目类型）等。

·　单击这些标签可以找到类似的项目。

3）编程语言构成

·　显示在项目描述下方的彩色条。

·　就像配料表一样，告诉你项目用了哪些编程语言。

·　帮助你了解项目的技术组成。

3．阅读项目说明书（README.md ）

README.md文件就像项目的说明书，通常包含以下内容。

1）项目介绍

·　这个项目是做什么用的；

·　这个项目能解决什么问题；

·　项目的实际效果图或演示视频。

2）技术特点

·　这个项目使用了哪些主要技术；

·　这个项目需要什么样的运行环境；

·　整体的设计思路。

3）使用指南

·　如何安装和运行；

·　基本的使用方法；

·　常见问题的解答。

4．评估项目质量

作为非技术人员，可以从以下方面来判断一个项目是否优秀。

1）项目活跃度

·　Stars数量超过1000的通常都是不错的项目；

·　看最近更新时间，半年内有更新的项目比较活跃；

·　看开发者是否及时回应用户的问题。

2）文档完整性

·　README.md是否详细清晰；

·　是否有清晰的截图或演示；

·　说明文档是否通俗易懂。

3）使用门槛

·　安装步骤是否简单明了；

·　是否提供详细的使用教程；

·　最好有在线演示功能。

5．实用小技巧

1）使用热门项目页面

·　访问github.com/trending；

·　这里展示当前最受欢迎的项目；

·　可以按照编程语言和时间筛选。

2）收藏好项目

·　单击项目页面右上角的Star按钮；

·　之后可以在个人主页找到收藏的项目。

3）查看相似项目

·　单击项目的标签（Topics）；

·　找到同类型的其他项目。

4）遇到问题时

·　查看项目的Issues（问题）页面；

·　看看是否有人遇到过类似的问题；

·　可以用英文在Issues中提问。

2.4.4　使用GitHub Copilot寻找开源项目

想象一下，你正在逛一个巨大的图书馆，但是有一位智能助手可以帮你找到最适合的书。GitHub Copilot（由GitHub和OpenAI联合开发的AI编程助手）就是这样一位助手，它不仅能帮你写代码，还能帮你找到合适的开源项目。

GitHub Copilot是由GitHub和OpenAI联合开发的AI编程助手，就像一位经验丰富的技术顾问。它的官方网址是https://github.com/copilot/。下面就来看看如何用它来寻找开源项目。

1．两种对话模式

GitHub Copilot提供了两种不同的对话方式，就像你可以选择和图书管理员聊天，或者在具体的书架前请教问题一样。

1）GitHub Copilot Chat模式

GitHub Copilot Chat模式界面如图2-4所示。

图2-4　GitHub Copilot Chat模式界面

这就像在图书馆的咨询台和智能助手聊天。

·　你可以用自然语言描述想要的项目类型；

·　它会推荐最适合的开源项目；

·　会解释每个项目的特点和使用方法；

·　可以询问项目相关的技术问题。

比如，可以像下面这样问。

我想找一个适合初学者的图片分享应用项目，最好使用React技术栈。能推荐一些维护活跃、文档完
整的项目吗？

2）仓库内对话模式

这就像在某一具体的书架前，请教管理员这些书的内容。

·　当你打开某个项目时，可以直接询问这个项目的细节；

·　帮你理解项目的代码结构；

·　解释项目中的专业术语；

·　指导你如何使用这个项目，GitHub仓库内Copilot使用界面如图2-5所示。

图2-5　GitHub仓库内Copilot使用界面

2．实用的对话技巧

就像和图书管理员交流时需要技巧一样，和GitHub Copilot对话也有一些窍门，具体如下。

1）描述的需求要具体

我需要一个：
- 使用React和Node.js技术的项目
- 适合初学者学习
- 代码结构清晰
- 有详细的中文文档
请推荐一些符合条件的项目。

2）询问项目细节

关于这个项目：
1. 核心功能是什么？
2. 适合什么水平的开发者？
3. 需要哪些基础知识？
4. 有哪些学习难点？

3）请求通俗解释

请用生活中的例子解释这个项目的以下信息。
1. 整体架构
2. 数据流转方式
3. 核心技术的作用

3．使用注意事项

1）项目推荐

·　告诉Copilot你的技术水平；

·　说明你的学习目标；

·　描述你感兴趣的技术方向。

2）代码解读

·　请求分步骤解释；

·　要求用类比来说明复杂的概念；

·　多问“为什么”而不是“是什么”。

3）学习建议

·　询问学习路线图；

·　请教常见的坑和解决方案；

·　寻求实践建议。

通过合理使用GitHub Copilot，你就像有了一位全天候的技术导师，帮助你在开源项目的海洋中找到最适合的学习资源。记住，学习编程最重要的是循序渐进，从简单的项目开始，慢慢积累经验。

2.4.5　使用AI解读技术文档

技术文档就像一本写给专业人士看的说明书，对没有技术背景的人来说，阅读起来可能会觉得晦涩难懂。不过别担心，现在我们有了AI这个“翻译官”，它可以帮我们把专业的技术语言转换成通俗易懂的解释。下面一起来看如何借助Cursor这个强大的AI助手来轻松解读技术文档。

1．准备工作

在开始使用AI解读文档之前，需要做一些准备工作，就像去国外旅游要提前准备护照和地图一样：

1）收集需要阅读的资料

·　把开源项目的代码下载到电脑上；

·　收藏与项目相关的技术文档网址；

·　准备好想了解的API文档链接。

2）设置AI翻译官

·　打开Cursor软件，导入项目文件夹；

·　等待Cursor完成项目索引；

·　在设置里添加技术文档。

2．利用Docs功能解读技术文档

Cursor的Docs功能就像给AI助手配备了一个专业的参考书库，能让它更准确地回答问题。

1）添加文档

·　在Cursor的对话框中输入@Docs命令，选择Add new doc选项；或在设置中的“功能”标签页添加；

·　输入技术文档的网址（如框架官方文档、API文档等）；

·　给文档起个好记的名字（如“React文档”或“Express API”）；

·　等待文档添加成功。

2）使用文档解读技术内容

@docs React Router请帮我解读React Router的文档。
1. 用通俗的语言解释路由的概念
2. 提供一个简单的路由配置示例
3. 指出使用时的常见陷阱
4. 解释与普通React组件的区别

3）文档管理技巧

·　按技术类型整理文档（前端、后端、数据库等）；

·　定期更新文档获取最新信息；

·　移除不再使用的文档，保持文档列表清晰；

·　团队成员间共享重要文档资源。

3．利用Codebase分析项目代码

Codebase是Cursor中一个强大的代码理解和交互功能，它通过扫描和索引整个项目代码库，使AI能够理解完整的代码上下文。

1）工作原理

·　自动扫描并索引整个项目代码库；

·　使用向量化技术存储代码语义信息；

·　实时更新以保持与代码同步；

·　分析代码间的依赖关系和项目架构。

2）使用Codebase分析项目

@Codebase请分析这个项目的结构：
1. 主要功能模块的划分
2. 数据流转的方式
3. 核心业务逻辑在哪些文件中
4. 项目的整体架构设计

3）结合文档和代码进行交叉验证

@docs @Codebase关于用户认证功能：
1. 对比文档中的最佳实践和当前实现
2. 指出可能的安全隐患
3. 建议改进的方向

4．技术可行性评估

在确定技术方案时，可以结合文档和代码分析来评估可行性。

基于文档和代码分析，请评估[技术方案]：
1. 技术难度：适合什么水平的开发团队
2. 开发周期：大概需要多少时间
3. 维护成本：需要什么样的技术支持
4. 扩展性：未来扩展的难度如何

5．使用技巧与注意事项

1）Docs功能使用技巧

·　确保添加的文档来源可靠；

·　不要添加包含敏感信息的文档；

·　控制文档数量，避免混乱；

·　可以添加自定义文档，如团队的内部开发规范。

2）Codebase功能使用技巧

·　保持代码库索引更新（修改项目后重新索引）；

·　编写清晰的代码注释有助于AI理解；

·　合理组织项目结构，提高分析的准确度；

·　大型项目可以选择性索引核心模块。

3）组合使用的最佳实践

·　先通过Codebase了解项目结构；

·　再通过Docs学习相关技术细节；

·　结合两者分析现有实践与最佳实践的差距；

·　利用AI提供的建议指导开发方向。

6．实际应用案例

1）学习新框架

·　添加框架官方文档到Docs；

·　导入示例项目到Codebase；

·　请求AI解释核心概念并对比代码实现；

·　逐步深入学习框架的高级特性。

2）接手维护现有项目

·　使用Codebase快速理解项目架构；

·　添加相关技术文档到Docs；

·　通过AI分析代码质量和潜在问题；

·　规划改进路线和优先级。

3）评估技术选型

·　添加多个候选技术的文档到Docs；

·　请求AI对比各技术的优缺点；

·　结合项目需求选择最适合的技术；

·　验证所选技术是否满足扩展需求。

通过这种方式，即使是没有技术背景的读者也能够做到以下几点。

（1）理解技术文档的核心内容；

（2）掌握项目的整体架构；

（3）评估技术方案的可行性；

（4）与开发团队进行有效沟通。

记住，目标不是成为技术专家，而是能够做出明智的技术决策，并与开发团队有效沟通。