业务广泛依赖JavaScript来开发Web开发项目，以提高效率并实现目标。技术发展迅猛，有多个框架可供选择，但由于每个框架都有特定功能，因此选择合适的框架可能是一个挑战。

Express.js和Next.js是最先进的Web开发框架，因此我们希望突出这两个框架的特点、优缺点，以帮助企业做出更好的选择。

## 什么是框架？

框架是构建块，也称为预定义代码，开发人员用于设计软件或应用程序。这些代码提供指令以解决问题，并修改基本功能以获得所需组件的输出。

有工具集、支持程序、代码库和编译器，支持数据管理、路由等功能。Next.js和Express.js是[最佳JavaScript框架](https://technostacks.com/blog/best-javascript-frameworks/)，易于使用，即使初学者也能高效地设计有益于业务运营的实用软件。现在，让我们来看一下Next.js vs. Express.js的完整指南。

## 什么是Next.js？

大多数企业倾向于使用开源Web框架，这就是为什么Next.js变得非常受欢迎，因为它还提供了自由添加功能，如服务器端渲染和静态Web生成，使应用程序开发对移动端和Web端都可行。

代码是通过React编写的，这使得在不复杂的配置下轻松配置客户端和服务器端应用程序。

## Next.js的主要特点

当谈到这个JavaScript开发平台提供的功能时，强调这是构建现代和功能性Web或移动应用的最佳选择是至关重要的。以下是使其成为开发人员理想选择的特点。

- Next.js允许互操作性，这意味着系统可以轻松连接并交换关键信息，因为ES6支持系统支持它。
- 该框架下载了网页的重要代码，使加载速度快：这是每个企业的目标。
- Next.js基于热模块替换，允许在运行中的应用程序中进行所需更改；因此，开发人员无需重新加载应用程序，节省了大量时间和精力。
- 服务器端渲染是一项功能，可以加快服务器上的内容加载速度。
- 该框架可以快速将保存在HTML服务器上的文件转换为客户端的HTML页面。

## Next.js的优缺点

尽管Next JavaScript在开发人员中很受欢迎，但仍然存在一些与之相关的缺点。以下是一些优点和缺点：

### 优点

- 该框架使用TypeScript使应用程序构建更容易。
- 使用Next.js开发的应用程序确保数据安全。
- 该框架允许企业提供具有吸引力和实用功能的最佳用户体验的应用程序。
- 静态站点生成功能允许在构建时编译和渲染网页。
- 允许客户端平稳地浏览页面，提升体验。

### 缺点

- 开发人员只能使用有限数量的插件。
- 组织需要有内部团队来开发和管理应用程序。
- 由于缺乏内置状态管理器，需要下载状态管理器应用程序，如MobX或Redux。
- 静态Web开发也意味着开发时间更长。
- 使用Next.js的开发人员必须自行设计应用程序的前端页面，因为这些内容不包含在框架中。

## 何时使用Next.js？

当您需要开发支持服务器端渲染的应用程序时，Next.js框架是最佳选择。开发人员可以设计具有静态和动态页面组合的应用程序。以下是Next.js被证明有用的一些产品：

- 单个网页
- JAMstack网站
- SaaS应用程序
- 仪表板
- 交互式用户界面
- Web门户
- 电子商务网站

## 什么是Express.js？

[Express.js](https://expressjs.com/)也是一个开源框架，开发人员广泛使用它来设计API和Web应用程序。它在Node.js上运行，并允许在客户端和服务器端构建现代、功能丰富的应用程序。该框架的显著特点是开发人员可以将其与其他框架结合使用，提供最佳的开发解决方案。

## Express.js的主要特点

以下是Express JavaScript的特点，广受设计师和开发人员欢迎：

- 该框架允许在客户端接收响应之前或路由处理程序获取HTTP请求之前执行代码。
- JavaScript可以同时为不同的URL定义路由。
- 该框架具有Google V8支持，使其可扩展且可靠，适用于实时应用程序功能。
- Express.js通过MEAN堆栈提供可扩展的数据管理系统。
- 使用该框架开发的应用程序具有高端数据保护。

## Express.js的优缺点

Express.js作为一个框架被广泛应用于各行业，用于开发应用程序以改善业务产出。以下是与之相关的一些主要优缺点：

### 优点

- 具有用于决策的中间件。
- 与MongoDB、Redis、MySQL等数据库兼容。
- 对开发人员灵活且方便。
- 通过使用Jade、Vash等模板进行轻松集成。
- 开发人员可以使用相同的语言进行服务器和移动应用程序开发。

### 缺点

- 代码复杂
- 对初学者来说使用起来困难。
- 无效的错误报告使调试更加困难。
- 需要持续修补以处理安全漏洞。
- 缺乏同步回调功能。

## 何时使用Express.js？

Express.js可用于根据业务需求开发移动和Web应用程序。开发人员可以设计具有所需功能的多页、单页或混合Web应用程序。与Next.js不同，Express.js框架具有支持顶层设计的功能，使路由和服务器管理变得简单。

## Express.js和Next.js之间有什么区别？

尽管开发人员使用这两个框架来设计Web和移动应用程序，但next.js和express.js之间存在差异，它们满足不同的业务需求。以下是开发人员应该了解的主要区别，以便根据需要选择其中一个框架。

- **路由过程的差异：**  Express通过正则表达式匹配URL，而Next将URL映射为处理程序的对象。
- **接口的差异：**  Express使用基于回调的API，具有额外的功能，如中间件。另一方面，Next使用服务器端渲染的页面。
- **插件的使用：**  Next.js使用外部工具，而Express.js允许开发人员通过事件订阅使用网关插件。
- **速度：**  Express.js比Next.js更快，因为它使用最小功能和工具，而Next使用静态目标。
- **可扩展性：**  Express灵活，可以轻松扩展以设计具有多个页面的大型应用程序。Next可用于设计多个页面。

## Express.js vs. Next.js：你应该选择哪一个？

现在我们已经详细比较了next.js和express.js，开发人员和企业在计划使用特定目标设计应用程序时，将更容易选择其中一个。这两个框架都是完整的JavaScript包，具有类似的功能和性能。

对于需要具有前端库的框架的开发人员来说，Next.js是一个合适的选择，而对于只希望使用JavaScript进行后端设计的开发人员来说，Express是一个实用的选择。使用Next.js时，无需安装CSS和JavaScript，这导致页面加载速度更快。Express利用URL和HTTP方法来确保更快的响应。

因此，没有好坏框架之分，选择完全取决于项目需求和开发人员的专业知识。在选择框架之前评估项目目标是至关重要的，以确保输出没有任何不规则性。

## 主要观点

通过这份全面的Next.js vs. Express.js比较，我们旨在与对技术世界了解有限的初学者分享关键信息，并希望在没有任何错误的情况下提供最佳结果。

选择错误的框架只会导致无效的应用程序开发。在完成项目后因结果不尽如人意而切换到另一个框架会消耗时间、金钱和精力，这只会对业务产生负面影响。

## 常见问题

### 1. Express.js和Next.js哪个更好？

不可能将一个框架评为比另一个更好，因为每个框架都满足特定的项目需求。Express.js是一个灵活且快速的平台，用于构建服务器端应用程序或API。它拥有庞大且经验丰富的开发人员社区，可以在专业人员遇到问题时提供支持。还有额外的插件，使应用程序开发变得简单快捷。另一方面，Next.js适用于SEO优化、自动代码拆分或设计静态网页。

### 2. Next.js能否取代Express？

Next.js不能取代Express，因为这两个框架都具有帮助设计不同项目类型的特定功能。Express基于Node.js，开发人员广泛使用它来设计API和后端框架。Next.js基于React框架，适用于SEO优化和静态网站。

### 3. Next.js比Express.js更好吗？

开发人员根据要开发的应用程序类型选择框架，因此没有特定的平台可以被认为比其他更好。这两个框架的功能不同，这直接影响输出。对于前端开发任务，Next.js是最佳选择，对于后端开发，Express.js是一个实用的选择。

### 4. Express.js是前端还是后端框架？

Express.js主要是一个后端框架，使用Node.js设计服务器端应用程序和API；但它不适用于处理静态网页和SEO优化，这是前端框架的关键方面，因此它依赖于Next.js。

### 5. Next.js和Express.js有什么区别？

Express.js和Next.js之间的主要区别在于开发人员使用它们设计的开发项目类型不同，因为这两者满足两个不同的类别。Next.js的亮点是它基于React，并且是Web和移动端的服务器端应用程序设计和静态网页的首选框架。另一方面，Express.js更受开发人员欢迎，用于设计Web应用程序和API。

### 6. 我可以使用Next.js进行后端开发吗？

Next.js不适合后端开发，因此开发人员应该考虑使用Express.js进行此类业务项目。Next.js框架便于设计前端项目，如静态网页和简单但功能性的服务器端应用程序。

### 7. Express.js是否适合创建API？

Express.js允许开发人员和设计师编写服务器端应用程序和API，通过服务器和客户端之间的通信处理请求和响应。这种系统允许无缝地整合外部附加组件和接口，使其轻松与其他操作合并。

### 8. Next.js与Express.js有何不同？

Next和Express都是开发人员用于设计和开发移动和Web应用程序的JavaScript框架。在编码领域，Next框架使用React简化整个编程过程，这是许多开发人员青睐的一个引人注目的因素。另一方面，Express.js基于NodeJS库，帮助设计API和后端框架。

### 9. 你会在哪些情况下选择 Next.js 而不是 Express.js？

对于需要进行 SEO 优化、仪表板设计、Web 门户开发、JAMstack 网站以及其他静态网站开发任务的项目开发者来说，应该优先选择 Next.js 而不是 Express.js。通过扩展你的视野，使用基于 React 的服务器端渲染工具 Next，无需深入理解即可使用，这使其成为一个吸引人的选择。因此，初学者可以轻松理解并适应这个框架，以最小的努力提供最佳的输出。


在本文中，探索Next.js和Express.js之间的差异，包括它们的特性、优点、缺点和使用案例。

Next.js 与 Express.js：它们有什么不同？

NodeJS是由Ryan Dahl于2009年创建的开源、跨平台工具，主要为JavaScript提供了一个在浏览器之外执行的运行环境。它采用了异步编程。

NodeJS基于JavaScript V8引擎，可以在各种浏览器上运行，如Chrome，也可以作为独立应用程序运行。NodeJS Web开发能够轻松处理服务器请求。

简而言之，NodeJS Web开发扩展了JavaScript的功能。NodeJS Web开发有助于将编程语言与API、其他语言和各种第三方库集成。它专门用于Web应用程序开发中的“JavaScript无处不在”范式，并且可以管理服务器端脚本和客户端编程。

## **NodeJS功能**

以下是NodeJS的工作原理：

- 收集表单数据。
- 添加、删除和更改数据库中的数据。
- 创建动态页面内容，以及读取、写入、删除和关闭服务器文件。

## **NodeJS的8个显著特点**

我们已经了解了NodeJS Web开发的前8个特点，这些特点使其在后端Web应用程序开发的竞争解决方案中脱颖而出。

### **跨平台**

NodeJS可以在多种平台上运行，包括Windows、Unix、Linux、Mac OS X和移动设备。它可以与适当的软件包一起使用，创建自包含的应用程序。

### 使用一种编程语言

那些已经熟悉JavaScript的人可以很快掌握NodeJS。NodeJS允许开发人员在同一框架中编写前端和后端代码。因此，JavaScript是全栈开发的首选语言。

因此，程序员受益于不必在多种编程语言之间切换，并且可以处理更小的数据。

### **可扩展性**

NodeJS解决了软件开发中最紧迫的问题之一：可扩展性。如今，大多数组织都希望拥有可扩展的软件。

首先，NodeJS处理并发请求。NodeJS中的集群模块管理所有活动CPU核心的负载平衡，这是它受欢迎的第二个原因。

NodeJS的第三个最引人注目的特点是能够水平分割软件。它通过使用子进程来实现这一点。这意味着公司可以为不同的目标群体提供不同的应用程序版本，以满足客户对定制化的偏好。

### **V8引擎**

V8引擎最初是为Chrome设计的，现在已经转换为用于Web应用程序开发。V8引擎是将JavaScript转换为广泛的计算机编程语言（使用C++）的最佳引擎之一。因此，V8引擎对服务器和所有基于机器语言的产品都是有益的。

### 快速部署和微服务开发

NodeJS是一个快速应用程序开发和部署的极简框架。大多数成功的公司如今选择它，因为他们的产品可以更快地发布到市场上。

它还有助于创建微服务。这是因为NodeJS能够快速分析数据并提供非阻塞算法，这两点在构建微服务中特别有用。

### **数据处理能力**

NodeJS的数据处理机制是异步的。因此，这有助于同时处理查询。其次，NodeJS使用基于事件驱动的软件开发技术，其中提供的输出完全取决于用户的输入，没有固定的输出顺序。

### **开源社区**

NodeJS拥有一个庞大的全球社区，因为它是一个开源解决方案。实施更大的社区的好处是，开发人员可以向社区成员请求帮助，并立即得到问题的解决方案。社区成员之间自由交换工具、模块、软件包和框架。

### **最快和最强大**

当数据以多个流传输时，处理它们需要很长时间。因此，通过在上传文件时同时分析文件，NodeJS在处理信息时减少了时间。因此，NodeJS提高了数据和视频流的整体速度。

## **结语**

现在你明白了为什么NodeJS Web开发是开发真正的Web应用程序的最佳选择，而不是其他后端开发工具。它具有许多功能，可以帮助开发人员创建各种跨平台兼容的程序。与JavaScript一起使用的能力是NodeJS最重要的特点，这也是程序员选择它的原因，因为它允许他们在前端和后端开发中使用相同的编程语言。


寻找NodeJS网页开发服务？看看这八大特性让它如此受欢迎，以及为什么你应该考虑在下一个项目中使用它。

NodeJS Web开发的8大特性

简单而廉价的单板计算机（SBC）的出现是[物联网](https://dzone.com/guides/the-internet-of-things-1)世界的一个重要推动因素，为工业、家庭、医疗等领域的控制系统和设备的开发提供了可能性。现在，每个人都可以为自己的需求开发所需的东西，为公共项目的发展做出贡献，并使用他人开发的产品。

在本文中，我们将开发一个控制系统，用于管理基本的园艺活动，如浇水、照明等。为了使我们的应用程序更加灵活和可扩展，我们将其开发为一个分层的分布式系统，由松散耦合的组件通过标准（在我们的情况下是REST）协议进行通信。我们将使用广为人知的企业技术Node.js和[React.js](https://dzone.com/refcardz/reactjs-essentials)，以及树莓派Zero设备作为我们应用程序的传感器层。

我们的传感器层组件的主要功能是控制我们花园中执行主要活动的设备。假设我们需要控制浇水电路和照明电路，即打开/关闭水泵和室外灯。首先，我们连接所有硬件单元，然后开发必要的软件来使硬件运行起来。

## **硬件设置：继电器板连接，电路组装**

对于我们的两个设备，我们可以使用[Raspberry Pi Zero W](https://www.raspberrypi.com/products/raspberry-pi-zero-w/) SBC和[SB Components Zero Relay](https://learn.sb-components.co.uk/Zero-Relay)继电器HAT（‘Hardware Attached on Top’）。每个HAT继电器都有NC（常闭）和NO（常开）接点。我们需要我们的浇水和照明电路仅在需要打开水泵和灯时才关闭（打开），因此我们将电路端连接到NO和COM接点，如图1.1所示。

![](https://cdn.iokks.com/art/3d4e5df01d73/7836689a6e884d4fa7fc730254ce80e9.jpg)

## **软件设置：操作系统和库安装，控制软件开发**

提供所有硬件组件连接后，我们可以添加软件使系统运行。首先，我们需要在树莓派设备上安装操作系统。有几种方法可以做到这一点；可能最舒适的方法是使用[Raspberry Pi Imager](https://www.raspberrypi.com/software/)。使用此应用程序，我们可以下载适当的操作系统并将其写入SD卡以启动SBC；我们可以从安装菜单中使用Raspberry Pi OS（32位）。

假设您的树莓派装备有适当的操作系统并且可以访问命令行，我们可以准备所有必要的软件。我们的组件有两个任务：暴露一个API以接受控制继电器的命令并将这些命令传递给继电器。让我们从实现API开始，这是大多数现代企业应用程序的常见任务。

### **控制API的实现**

正如我们之前讨论的，我们将使用REST协议在我们的组件之间进行通信，因此我们需要为控制接口暴露REST端点。考虑到我们的树莓派Zero计算机的受限配置，我们应该尽可能轻量地实现API。对于这种情况，一个合适的技术是[Node.js](https://nodejs.org/en)框架。本质上，它是一个JavaScript引擎，提供了在服务器端运行JavaScript代码的可能性。由于其设计，Node.js特别适用于构建Web应用程序，即处理互联网上的请求并返回处理后的数据和视图的应用程序。我们将在我们的Node.js应用程序中使用[Express](https://expressjs.com/) Web框架来简化请求处理。假设我们的系统中已经运行了Node.js，我们可以开始实现控制API。让我们创建一个Web控制器，它将是我们组件的主要控制单元。我们可以为每个设备继电器实现三个端点 - 打开、关闭和状态端点。为我们的应用程序创建一个Node包是个好主意，因此我们在树莓派根目录下创建一个新目录“smartgarden”，并在该目录中运行以下命令，以安装所有必要的依赖项并创建包描述符：

`pi@raspberrypiZero:~/smartgarden $ npm install express --save`

`pi@raspberrypiZero:~/smartgarden $ npm install http --save`

我们从以下基本脚本开始，并逐渐添加所有必要的功能。

**清单2.1. smartgarden/outdoorController.js：组件Web API**

```javascript
const express = require("express");
const http = require("http");

var app = express();

app.use((req, res, next) => {
    res.append('Access-Control-Allow-Origin', ['*']);
    res.append('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.append('Access-Control-Allow-Headers', 'Content-Type');
    next();
});

var server = new http.Server(app);

  app.get("/water/on", (req, res) => {
    console.log("Watering switched on");
  });
  app.get("/water/off", (req, res) => {
    console.log("Watering switched off");
  });

  app.get("/water/status", (req, res) => {
    console.log("TODO return the watering relay status");
  });

  app.get("/light/on", (req, res) => {
    console.log("Light switched on");
  });

  app.get("/light/off", (req, res) => {
    console.log("Light switched off");
  });

  app.get("/light/status", (req, res) => {
    console.log("TODO return the light relay status");
  });

 server.listen(3030, () => {console.log("Outdoor controller listens to port 3030")});
```

我们可以使用以下命令运行应用程序：

`pi@raspberrypiZero:~ $ node smartgarden/outdoorController.js`

终端中应该显示以下消息：

`Outdoor controller listens to port 3030`

当访问定义的端点时，我们应该看到相应的输出，例如，“Light switched off”对于/light/off端点。如果是这种情况，那就意味着我们的控制API正在工作！这很好，但实际上，它现在并没有做任何有用的工作。让我们通过添加内容来修复它，以便将命令传递给物理设备，即继电器。

### **将命令传递给物理设备**

从JavaScript应用程序内部与物理设备通信有几种方法。在这里，我们将使用[Johnny-Five](http://johnny-five.io/) JavaScript库。

Johnny-Five是JavaScript机器人和物联网平台，适用于许多平台，包括树莓派。它支持各种设备，如继电器、传感器、舵机等。

假设您的树莓派上已安装了Node和npm工具，您可以使用以下命令安装Johnny-Five库：

`pi@raspberrypiZero:~/smartgarden $ npm install johnny-five --save`

此外，我们需要安装raspi-io包。Raspi IO是Johnny-Five Node.js机器人平台的I/O插件，它使Johnny-Five能够控制树莓派上的硬件。

`pi@raspberrypiZero:~/smartgarden $ npm install raspi-io --save`

为了测试安装，我们可以运行以下脚本：

```javascript
const Raspi = require('raspi-io').RaspiIO;
const five = require('johnny-five');

const board = new five.Board({
  io: new Raspi()
});

board.on('ready', () => {

  // Create an Led on pin 7 (GPIO4) on P1 and strobe it on/off
  // Optionally set the speed; defaults to 100ms
  (new five.Led('P1-7')).strobe();

});
```

由于Raspbian中与GPIO交互的权限较为保守，您需要使用sudo来执行此脚本。如果我们的安装成功，我们应该看到LED以默认频率100毫秒闪烁。

现在，我们可以像清单2.2中所示那样为我们的控制器添加Johnny-Five支持。

**清单2.2. 启用继电器控制的smartgarden/outdoorController.js**

```javascript
const express = require("express");
const http = require("http");
const five = require("johnny-five");
const { RaspiIO } = require('raspi-io');

var app = express();

app.use((req, res, next) => {
    res.append('Access-Control-Allow-Origin', ['*']);
    res.append('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.append('Access-Control-Allow-Headers', 'Content-Type');
    next();
});

var server = new http.Server(app);

const board = new five.Board({io: new RaspiIO(), repl: false});

board.on("ready", function() {

  var relay1 = new five.Relay({pin:"GPIO22",type: "NO"});
  var relay2 = new five.Relay({pin:"GPIO5",type: "NO"});
    
   app.get("/water/:action", (req, res) => {

        switch(req.params.action) {

           case 'on':
                relay1.close();
                res.send(relay1.value.toString());
                break;
           case 'off':
                relay1.open();
                res.send(relay1.value.toString());
                break;
           case 'status':
                res.send(relay1.value.toString());
                break;
           default:
                console.log('Unknown command: ' + req.params.action);
                res.sendStatus(400);
        }   
  });

  app.get("/light/:action", (req, res) => {

        switch(req.params.action) {

          case 'on':
                relay2.close();
                res.send(relay2.value.toString());
                break;
          case 'off':
                relay2.open();
                res.send(relay2.value.toString());
                break;
          case 'status':
                res.send(relay2.value.toString());
                break;
          default:
                console.log('Unknown command: ' + req.params.action);
                res.sendStatus(400);
        }   
  });

  server.listen(3030, () => {
    console.log('Outdoor controller listens to port 3030');
  });
});
```

我们可以使用以下命令运行更新后的应用程序：

`pi@raspberrypiZero:~ $ sudo node smartgarden/outdoorController.js`

如果我们现在访问端点，我们应该看到相应的继电器打开和关闭。如果是这种情况，那就意味着我们的控制器组件正常工作！

干得好！但是通过在http客户端中键入[REST](https://dzone.com/refcardz/rest-foundations-restful)请求发送命令并不是很方便。为此，提供一个GUI将是个不错的选择。

### **命令用户界面的开发**

有各种选项可用于实现控制界面，我们将使用React.js来完成这项任务。React.js是一个轻量级的JavaScript框架，专注于创建基于组件的Web UI，这对于我们这种分布式组件应用程序的情况是一个正确的选择。为了充分利用React，我们可以安装create-react-app工具：

`npm install -g create-react-app`

然后，我们可以为我们的前端内容创建一个JavaScript应用程序。假设我们在项目根目录中，我们可以运行以下命令：

`.../project-root>create-react-app smartgarden`

这个命令将创建一个新的文件夹（'smartgarden'），其中包含一个准备就绪的原型React应用程序。现在，我们可以进入该目录并运行以下命令：

`.../project-root>cd smartgarden`

`.../project-root/smartgarden>npm start`

这将在http://localhost:3000上的新浏览器中启动应用程序。这是一个简单但完全功能的前端应用程序，我们可以将其用作创建我们的UI的原型。React支持组件层次结构，其中每个组件都可以有一个状态，并且状态可以在相关组件之间共享。此外，可以通过向组件传递属性来自定义每个组件的行为。因此，我们可以开发主组件，它作为显示屏或表单的占位符，用于执行相应操作。此外，为了加快开发速度并使我们的UI看起来更加常用和用户友好，我们将使用MUI组件库，这是最受欢迎的React组件库之一。我们可以使用以下命令安装该库：
npm install @mui/material @emotion/react @emotion/styled

````

为了将所有配置设置放在一个地方，我们创建了一个配置类，并将其放在特定的配置目录中：

**清单 2.3. configuration.js：包含所有应用程序设置的配置类。** 

```javascript
class Configuration {

    WATERING_ON_PATH = "/water/on";
    WATERING_OFF_PATH = "/water/off";
    WATERING_STATUS_PATH = "/water/status";
    LIGHT_ON_PATH = "/light/on";
    LIGHT_OFF_PATH = "/light/off";
    LIGHT_STATUS_PATH = "/light/status";
    
    CONTROLLER_URL = process.env.REACT_APP_CONTROLLER_URL ? process.env.REACT_APP_CONTROLLER_URL :
        window.CONTROLLER_URL ? window.CONTROLLER_URL : "http://localhost:3030";
}

export default Configuration;
````

配置类包含控制器服务器的URL和控制端点的路径。对于控制器URL，我们提供了两种外部配置的可能性和一个默认值，在我们的情况下是http://localhost:3030。您可以将其替换为您的控制器服务器的相应URL。

将所有相关功能放在一个地方是个好主意。将我们的功能放在一个服务后面，该服务公开了某些API，可以确保我们的应用程序更灵活和可测试。因此，我们创建了一个控制服务类，该类实现了与控制器服务器进行数据交换的所有基本操作，并将这些操作公开为所有React组件的方法。为了使我们的UI更具响应性，我们将方法实现为异步的。只要API不变，我们就可以自由更改实现，而不会影响任何消费者。我们的服务可以如下所示。

**清单 2.4. services/ControlService.js – 用于与传感器层通信的API。**

```javascript
import Configuration from './configuration';

class ControlService {

  constructor() {
    this.config = new Configuration();
  }

  async switchWatering(switchOn) {
    console.log("ControlService.switchWatering():");
    let actionUrl = this.config.CONTROLLER_URL
                  + (switchOn ? this.config.WATERING_ON_PATH : this.config.WATERING_OFF_PATH);

    return fetch(actionUrl ,{
        method: "GET",
        mode: "cors"
      })
      .then(response => {
        if (!response.ok) {
            this.handleResponseError(response);
        }
        return response.text();
      }).then(result => {
        return result;
      }).catch(error => {
        this.handleError(error);
      });
  }

  async switchLight(switchOn) {
    console.log("ControlService.switchLight():");
    let actionUrl = this.config.CONTROLLER_URL
                  + (switchOn ? this.config.LIGHT_ON_PATH : this.config.LIGHT_OFF_PATH);

    return fetch(actionUrl ,{
        method: "GET",
        mode: "cors"
      })
      .then(response => {
        if (!response.ok) {
            this.handleResponseError(response);
        }
        return response.text();
      }).then(result => {
        return result;
      }).catch(error => {
        this.handleError(error);
      });
  }

   handleResponseError(response) {
      throw new Error("HTTP error, status = " + response.status);
  }

  handleError(error) {
      console.log(error.message);
  }

}

export default ControlService;
```

为了封装控制功能，我们创建了控制面板组件，如清单 2.5 所示。为了保持代码结构化，我们将组件放入“components”文件夹中。

**清单 2.5. components/ControlPanel.js：包含用于控制花园设备的UI元素的React组件。**

```javascript
import React, { useEffect, useState } from 'react';
import Switch from '@mui/material/Switch';
import ControlService from '../ControlService';
import Configuration from '../configuration';

function ControlPanel() {

    const controlService = new ControlService();

    const [checked1, setChecked1] = useState(false);
    const [checked2, setChecked2] = useState(false);

    useEffect(() => {

        const config = new Configuration();
        const fetchData = async () => {
            try {
                let response = await fetch(config.CONTROLLER_URL + config.WATERING_STATUS_PATH);
                const isWateringActive = await response.text();
                setChecked1(isWateringActive === "1" ? true : false);
                response = await fetch(config.CONTROLLER_URL + config.LIGHT_STATUS_PATH);
                const isLightActive = await response.text();
                setChecked2(isLightActive === "1" ? true : false);
            } catch (error) {
                console.log("error", error);
            }
        };

        fetchData();
    }, []);

    const handleWatering = (event) => {
        controlService.switchWatering(event.target.checked).then(result => {
            setChecked1(result === "1" ? true : false);
        });
    };

    const handleLight = (event) => {
        controlService.switchLight(event.target.checked).then(result => {
            setChecked2(result === "1" ? true : false);
        });
    };

    return(

        <React.Fragment>
            <div>
                <label htmlFor='device1'>
                    <span>Watering</span>
                <Switch id="1" name="device1" checked={checked1}         onChange={handleWatering} />
                </label>
                <label htmlFor='device2'>
                    <span>Light</span>
                <Switch id="2" name="device2" checked={checked2} onChange={handleLight}/>
                </label>
            </div>
        </React.Fragment>
        
    );
}

export default ControlPanel;
```

使用create-react-app工具生成的内容，我们可以将app.js的内容更改如下。

**清单 2.6. 基本UI组件**

```javascript
import './App.css';
import React from 'react';
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import ControlPanel from './components/ControlPanel';
import { createTheme, ThemeProvider } from '@mui/material/styles';

function App() {

  const theme = createTheme(
    {
      palette: {
        primary: {
          main: '#1b5e20',
        },
        secondary: {
          main: '#689f38',
        },
      },
    });

  return (

    <div className="App">
      <ThemeProvider theme={theme}>
       <AppBar position="static">
        <Toolbar>
          <Typography variant="h5">Smart Garden</Typography>
        </Toolbar>
       </AppBar>
          <ControlPanel/>
      </ThemeProvider>
    </div>
 );
}
export default App;
```

现在，是时候测试我们的UI应用程序了。可能需要将CONTROLLER_URL配置参数设置为Raspberry Pi设备的IP地址，该设备运行着室外控制器后端应用程序，类似于“[http://](http://localhost:3000/)[192.168.nn.nn](http://localhost:3000/)[:30](http://localhost:3000/)[3](http://localhost:3000/)[0](http://localhost:3000/)”。启动应用程序后，它将在新的浏览器选项卡中打开。

![图 2.1. 控制UI前端应用程序](https://cdn.iokks.com/art/3d4e5df01d73/bd6dd5f9cc654212b5b119981359f952.png)

如果我们的室外控制器应用程序运行在连接到控制电路的Raspberry Pi设备上（参见图 1.1），现在我们可以打开和关闭浇水和照明电路。我们应该看到类似于图 2.1 所示的屏幕。

如果是这种情况，那么你成功了！恭喜你！现在，您拥有一个可用于各种设备和设备的远程控制系统。此外，我们可以将传感器层控制器包集成到任何系统中，并从UI和业务逻辑组件与其REST端点进行通信。

本文的源代码可在\*[GitHub](https://github.com/spylypets/smartgarden)\*上找到。


我们将开发一个远程控制系统，该系统能够使用流行的企业技术和树莓派平台，以扩展至各种设备和设备。

使用 Node.js、React.js 和 Raspberry Pi 进行远程控制

文章深入探讨了每种框架的优缺点，有助于理解在何种情况下使用Flutter或React Native更为合适。

Flutter 与 React Native 开发对比及性能检测

网站可以利用IP地理定位为网站用户提供各种功能。这些功能包括根据国家进行网页重定向、以本地语言显示内容，或者根据用户的地理位置定制内容。

[React](https://react.dev/)是一个开源的JavaScript库，它使得网页开发人员可以基于组件轻松创建引人入胜的用户界面。它被设计为在前端（客户端）运行，这意味着它只能在浏览器端渲染页面。

与此同时，[Next.js](https://nextjs.org/)是由Vercel开发的开源React Web开发框架。Next.js使得React Web应用程序可以执行服务器端渲染、代码拆分等功能。该框架由[Node.js](https://nodejs.org/en)提供支持，Node.js提供了JavaScript运行环境。

在本教程中，我将介绍如何使用React和Next.js搭建一个基本的网站。然后，我将演示如何通过检查访问者的IP地址来获取IP地理定位数据。这涉及与[IP2Location.io](https://www.ip2location.io/#dzone)进行简单集成，这是IP2Location.com提供的IP地理定位数据的下一代API。

我将使用Debian 12实例进行演示。

先决条件：[IP2Location.io免费API密钥](https://www.ip2location.io/pricing#dzone)。请记下您的API密钥，它将在下面的步骤中使用。

## 1. 安装Node.js

在撰写本文时，Next.js所需的最低Node.js版本为18或更高。请参考[next.js设置](https://nextjs.org/learn/basics/create-nextjs-app/setup)以了解最新所需版本。

按照您的平台在[node.js](https://nodejs.org)上安装。

对于Debian，请使用以下命令进行安装：

`sudo apt install nodejs npm`

安装完成后，请验证两者的版本。

`nodejs --version && npm --version`

![](https://cdn.iokks.com/art/7cb926bf920f/73f2d8f765ad4beea400d7c518909b80.png)

好的，我的版本符合要求。接下来，让我们进入下一步。

## 2. 创建基本的Next.js应用程序

使用下面的命令行自动生成基本的Next.js应用程序，基于默认模板。导航到您想要创建应用程序的文件夹，然后运行以下命令。

`npx create-next-app@latest`

![](https://cdn.iokks.com/art/7cb926bf920f/b19c6539776b490bbd0c44a6af1d29dd.png)

我将使用默认项目名称“my-app”，并且不会在此演示中使用TypeScript。选择ESLint为Yes，Tailwind为No，src director为No，App Router为No，import alias为No。

运行上述命令后，您应该看到名为“my-app”的文件夹已经创建，并且包含了默认模板的骨架代码。让我们进入“my-app”文件夹，看看创建了哪些文件和文件夹。

![](https://cdn.iokks.com/art/7cb926bf920f/715d7656c85e4823b5598b68bfa5aaec.png)

查看package.json文件，您会发现它已自动包含了与React和Next.js一起使用所需的依赖项。

![](https://cdn.iokks.com/art/7cb926bf920f/67d87349650b4ae8ace26e78df840f65.png)

## 3. 安装IP2Location.io Node.js SDK

运行以下命令以安装IP2Location.io Node.js SDK。

`npm install ip2location-io-nodejs`

![](https://cdn.iokks.com/art/7cb926bf920f/1bb945405fc845c9ab0dc6b01438ecd8.png)

运行上述命令后，您会看到package.json已更新，包含了IP2Location.io Node.js SDK。

## 4. 修改Pages文件夹中的Index.js以添加IP2Location.io代码

导航到pages文件夹，让我们使用文本编辑器查看index.js文件。我假设您已经熟悉React，因此我在这里不会涵盖它。

![](https://cdn.iokks.com/art/7cb926bf920f/bdd774244f6046cb994e6c5b6a208e0b.png)

现在，让我们用下面的代码替换整个页面，以简化演示目的的页面。在粘贴下面的简化代码后保存页面。

```javascript
import Head from 'next/head'
import Image from 'next/image'
import { Inter } from 'next/font/google'
import styles from '@/styles/Home.module.css'
import ip2locationio from 'ip2location-io-nodejs'

const inter = Inter({ subsets: ['latin'] })

export async function getServerSideProps(context) {
  let ip
  const { req } = context

  if (req.headers['x-forwarded-for']) {
	ip = req.headers['x-forwarded-for'].split(',')[0]
  } else if (req.headers['x-real-ip']) {
	ip = req.connection.remoteAddress
  } else {
	ip = req.connection.remoteAddress
  }

  // Configures IP2Location.io API key
  let mykey = 'YOUR_API_KEY'
  let config = new ip2locationio.Configuration(mykey)
  let ipl = new ip2locationio.IPGeolocation(config)
  let lang = 'fr' // translation language, only supported in Plus and Security plans so use blank if not needed

  // Lookup ip address geolocation data
  const ipldata = await ipl.lookup(ip, lang)
  return { props: { ipldata: ipldata } }
}

export default function Home({ ipldata }) {
  return (
	<>
  	<Head>
    	<title>Create Next App</title>
    	<meta name="description" content="Generated by create next app" />
    	<meta name="viewport" content="width=device-width, initial-scale=1" />
    	<link rel="icon" href="/favicon.ico" />
  	</Head>
  	<main className={`${styles.main} ${inter.className}`}>
    	<div className={styles.description}>
      	IP: {ipldata.ip} <br />
      	Country: {ipldata.country_name} ({ipldata.country_code}) <br />
      	Country translation: {ipldata.country.translation.value} ({ipldata.country.translation.lang}) <br />
      	Region: {ipldata.region_name} <br />
      	City: {ipldata.city_name} <br />
      	Latitude: {ipldata.latitude} <br />
      	Longitude: {ipldata.longitude} <br />
      	Continent: {ipldata.continent.name} <br />
      	Continent translation: {ipldata.continent.translation.value} ({ipldata.continent.translation.lang}) <br />
    	</div>
  	</main>
	</>
  )
}
```

现在，让我们分解一下将允许我们检索网站访问者IP地址的IP地理位置的重要部分。

首先，我们需要导入IP2Location.io Node.js SDK，以便我们可以使用它的功能。

`import ip2locationio from 'ip2location-io-nodejs'`

接下来，添加另一个名为“getServerSideProps”的函数，这是一个Next.js函数，允许我们在每次页面请求时设置动态属性。在这里，我们检索调用者的IP地址，并将其传递给IP2Location.io API以获取地理位置数据。

```javascript
export async function getServerSideProps(context) {
  let ip
  const { req } = context

  if (req.headers['x-forwarded-for']) {
	ip = req.headers['x-forwarded-for'].split(',')[0]
  } else if (req.headers['x-real-ip']) {
	ip = req.connection.remoteAddress
  } else {
	ip = req.connection.remoteAddress
  }

  // Configures IP2Location.io API key
  let mykey = 'YOUR_API_KEY'
  let config = new ip2locationio.Configuration(mykey)
  let ipl = new ip2locationio.IPGeolocation(config)
  let lang = 'fr' // translation language, only supported in Plus and Security plans so use blank if not needed

  // Lookup ip address geolocation data
  const ipldata = await ipl.lookup(ip, lang)
  return { props: { ipldata: ipldata } }
}
```

最后，我们可以在Home函数中使用我们上面设置的属性，该函数将渲染我们的索引页面。我们将ipldata传递给函数，然后IP地理位置字段如country_code、country_name、region_name和其他字段将被显示。

```jsx
export default function Home({ ipldata }) {
  return (
	<>
  	<Head>
    	<title>Create Next App</title>
    	<meta name="description" content="Generated by create next app" />
    	<meta name="viewport" content="width=device-width, initial-scale=1" />
    	<link rel="icon" href="/favicon.ico" />
  	</Head>
  	<main className={`${styles.main} ${inter.className}`}>
    	<div className={styles.description}>
      	IP: {ipldata.ip} <br />
      	Country: {ipldata.country_name} ({ipldata.country_code}) <br />
      	Country translation: {ipldata.country.translation.value} ({ipldata.country.translation.lang}) <br />
      	Region: {ipldata.region_name} <br />
      	City: {ipldata.city_name} <br />
      	Latitude: {ipldata.latitude} <br />
      	Longitude: {ipldata.longitude} <br />
      	Continent: {ipldata.continent.name} <br />
      	Continent translation: {ipldata.continent.translation.value} ({ipldata.continent.translation.lang}) <br />
    	</div>
  	</main>
	</>
  )
}
```

## 5. 运行Next.js应用程序

运行以下命令以启动Next.js应用程序。

`npm run dev`

![](https://cdn.iokks.com/art/7cb926bf920f/5429a0c61b9646559361075319bf5cf9.png)

它会告诉您可以在本地主机的3000端口访问Web服务器。

## 6. 打开浏览器并测试页面

由于IP地理定位需要公共IP地址，我们将通过互联网从客户端机器访问我们的测试服务器，以便它可以读取我们的公共IP地址。

在客户端机器上打开浏览器，然后导航到您在端口3000上使用的服务器。

查看下面的页面输出。

注意：我的示例使用了API的Security计划，因此我能够检索更多的数据，比如大洲信息以及翻译。

![](https://cdn.iokks.com/art/7cb926bf920f/8db365d3cbfa4e69a53b9e7b68a1dd76.png)

## 结论

希望上述指南能够帮助您轻松地将IP地理定位集成到您的Next.js Web应用程序中。现代网站确实依赖于IP地理定位来实现许多功能，而这是很容易实现的。


 在Next.js中简单实现IP地理定位功能，以使用IP地址确定用户的物理位置。

如何在Next.js中获取IP地理位置数据

构建一个与RDS数据库通信的REST API对于许多开发人员来说是一项基本任务，使应用程序能够通过互联网与数据库进行交互。本文将指导您完成创建一个与Amazon关系型数据库服务（RDS）实例通信的RESTful API的过程，并附有示例。我们将使用一个流行的框架和编程语言进行演示：[Node.js](https://dzone.com/refcardz/nodejs)和Express，因为它们被广泛应用并支持构建Web服务。

## 先决条件

在开始之前，请确保您具备以下条件：

- AWS账户和已设置的RDS实例：在本示例中，假设我们使用的是[MySQL](https://dzone.com/refcardz/essential-mysql)数据库，但对于RDS支持的其他数据库引擎，方法类似。
- 在开发机器上安装了Node.js和npm（Node包管理器）
- 对[JavaScript](https://dzone.com/refcardz/object-oriented-javascript)和SQL有基本的了解

## 步骤1：设置项目

首先，为您的项目创建一个新目录并初始化一个新的Node.js应用程序：

```powershell
mkdir my-api

cd my-api

npm init -y
```

安装Express和MySQL数据库连接器：

```powershell
npm install express mysql
```

## 步骤2：创建数据库连接

在项目目录中创建一个名为**database.js** 的新文件。该文件将建立与您的RDS数据库的连接。请用您实际的RDS实例详细信息替换占位符：

```javascript
const mysql = require('mysql');

const pool = mysql.createPool({
  connectionLimit: 10,
  host: '<RDS_HOST>',
  user: '<RDS_USERNAME>',
  password: '<RDS_PASSWORD>',
  database: '<RDS_DATABASE>'
});

module.exports = pool;
```

使用连接池是推荐的，可以有效地管理多个并发数据库连接。

## 步骤3：构建REST API

创建一个名为**app.js** 的新文件。该文件将定义您的API端点以及它们如何与RDS数据库交互。

```javascript
const express = require('express');
const pool = require('./database');
const app = express();
const PORT = process.env.PORT || 3000;

app.use(express.json());

// 用于获取所有项目的端点
app.get('/items', (req, res) => {
  pool.query('SELECT * FROM items', (error, results) => {
    if (error) throw error;
    res.status(200).json(results);
  });
});

// 用于添加新项目的端点
app.post('/items', (req, res) => {
  const { name, description } = req.body;
  pool.query('INSERT INTO items (name, description) VALUES (?, ?)', [name, description], (error, results) => {
    if (error) throw error;
    res.status(201).send(`Item added with ID: ${results.insertId}`);
  });
});

// 启动服务器
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});
```

在这个示例中，我们创建了两个端点：一个用于从`items`表中检索所有项目，另一个用于向表中添加新项目。请确保您的RDS数据库中有一个`items`表，至少包含`name`和`description`列。

## **步骤4：运行您的API**

要启动您的API，请在项目目录中运行以下命令：

```powershell
node app.js
```

您的API现在正在运行，并且可以与您的RDS数据库进行交互。您可以使用Postman或cURL等工具测试端点。

## **测试API**

要测试从数据库检索项目，请使用：

```powershell
curl http://localhost:3000/items
```

要测试添加新项目，请使用：

```powershell
curl -X POST http://localhost:3000/items -H "Content-Type: application/json" -d '{"name": "NewItem", "description": "This is a new item."}'
```

## 结论

您现在已经设置了一个基本的REST API，可以与AWS RDS数据库通信。这个设置是可扩展的，可以通过更复杂的查询、额外的端点和更复杂的数据库操作进行扩展。请记住在部署应用程序到生产环境时，确保保护好您的API和数据库连接。有了这些基础，您就可以有效地将AWS RDS数据库集成到您的Web应用程序中。


本指南详细介绍了创建一个与Amazon关系型数据库服务（RDS）实例通信的RESTful API的过程，包括示例。

使用Nodejs构建并整合REST APIs与AWS RDS数据库

一天，我所在的公司决定需要一个移动应用。我们的前端团队自愿帮助这个有趣的项目。众所周知，如果你是前端开发人员，尤其是使用React库进行开发，React Native是开发移动应用的最佳方式。这就是我们开始着手开发我们的WMS应用的方式。

随着应用的不断发展，我们开始考虑其性能检查和优化方式。

我们的计划是：

1. 确定问题所在
2. 测量可测量的内容（不要凭直觉）
3. 分析
4. 如有必要，进行改进
5. 保持控制

那时，我们的应用包含两个主要部分——导航和可滚动列表。我们使用不同的工具来检查每个部分的性能。

基本上，在大多数性能检查工具中，绿色表示实际上很好，黄色表示有改进的空间，但应用仍然可以正常工作，红色表示你的应用和客户都需要帮助。

我们确定了一些问题，第一个问题主要与负责导航的抽屉组件的渲染时间有关：

![React DevTools的应用分析器](https://iokks-1253229185.cos.ap-nanjing.myqcloud.com/art/f10f11882180/ad4c62354679499c92c671a5967355d8.png)

*React DevTools的应用分析器*

我们还检查了我们应用的性能：

![Flipper + RN性能监视器的应用性能](https://iokks-1253229185.cos.ap-nanjing.myqcloud.com/art/f10f11882180/5d2f6baac0db4f6e8909267787322bc7.png)

*Flipper + RN性能监视器的应用性能*

我们发现导航的性能几乎降至0。这个问题已经存在很长时间，并且在[文档](https://reactnative.dev/docs/performance#slow-navigator-transitions)中有描述。简而言之，当推送一个新屏幕时，React Navigation首先在屏幕外渲染它，然后再将其动画显示到位。因此，如果有一个屏幕上有很多组件，很容易需要几百毫秒来渲染。

我们的应用内有很多嵌套的导航器，所以我们面临了这个问题。在React Navigation库发布修复之前，有一种避免这个问题的方法——不要使用太多的导航器，尽量减少嵌套。另外，你可以尝试使用[InteractionManager](https://reactnative.dev/docs/interactionmanager)来推迟繁重的计算。

第二个问题与我们的可滚动列表有关：

![React DevTools的可滚动列表分析器](https://iokks-1253229185.cos.ap-nanjing.myqcloud.com/art/f10f11882180/bf9fc4afa2ba42ad86eb00ae8aadd667.png)

*React DevTools的可滚动列表分析器*

![可滚动列表](https://iokks-1253229185.cos.ap-nanjing.myqcloud.com/art/f10f11882180/7b737451d1aa488b8a47d4ebca3a3f93.png)

*可滚动列表*

在滚动过程中，我们测量了性能，结果显示如下：

![Flipper + RN性能监视器的可滚动列表性能](https://iokks-1253229185.cos.ap-nanjing.myqcloud.com/art/f10f11882180/9510301f5def473d813a5ef46d1f3612.jpg)

*Flipper + RN性能监视器的可滚动列表性能*

虽然不算太糟糕，但肯定有一些地方需要优化。我们从代码和组件入手。基本上，我们有一个带有渲染数据的`FlatList`组件。首先要检查的是我们如何在那里使用记忆化。例如，我们需要扫描条形码并获取特定数据，然后根据这些数据显示相关列表。如果我们扫描相同的条形码，整个屏幕会重新渲染，因为它认为有新数据进来了。为了避免这种情况，我们需要分析哪些组件经常重新渲染，并尝试使用`useCallback`、`useMemo`和`React.memo`等方法来记忆化函数、变量和属性。但要记住，只在实际需要的地方使用，因为过度记忆化可能会进一步降低应用的性能。因此，只在需要进行昂贵计算时使用`useMemo`，只在组件经常以相同的props重新渲染且组件相对较大时使用`React.memo`，只在组件接受依赖于引用相等性的函数时使用`useCallback`。当然，这并不是所有的使用情况，但是常见的情况。

接下来要检查的是我们可滚动列表的主要组件的实现：

```typescript
    <FlatList
      data={skuInfo}
      renderItem={({ item: sku }) => <SkuCard {...sku} />}
      keyExtractor={sku => sku.id}
    />
```

我们回到文档，复习了一下。文档建议不要在`renderItem`属性中使用箭头函数。此外，`renderItem`组件应该是一个记忆化的*哑*组件，以避免不必要的重新渲染。

```typescript
  // SkuCard组件的修复
  export default memo(SkuCard);

  // FlatList的renderItem属性的修复
  const renderItem = useCallback(
    ({ item: sku }: { item: SKUInfo }) => <SkuCard {...sku} />,
    [],
  );

  // 修复后的FlatList的样子
  <FlatList
    data={skuInfo}
    renderItem={renderItem}
    keyExtractor={sku => sku.id}
  />
```

我们在这些改变后检查了可滚动列表的分析器：

![React DevTools的可滚动列表分析器](https://iokks-1253229185.cos.ap-nanjing.myqcloud.com/art/f10f11882180/c4302e558c79437fbeb5f879cbce4be3.png)

*React DevTools的可滚动列表分析器*

这有助于大大优化渲染部分。此外，我们还查看了性能：

![Flipper + RN性能监视器的可滚动列表性能](https://iokks-1253229185.cos.ap-nanjing.myqcloud.com/art/f10f11882180/f09ec718fc4644bd8232818c2685013e.jpg)

*Flipper + RN性能监视器的可滚动列表性能*

好多了。那时，我们的应用规模还很小，随着它的发展，我们将需要更多地监控性能。

另外，记住你可以使用[Shopify](https://shopify.github.io/)提供的一些不错的工具，比如`FlashList`，你可以尝试在你的应用中实现。

## 结论

1. 避免使用大量的导航器，尽量减少嵌套。
2. 推迟计算和繁重渲染，使用`InteractionManager`来避免它们影响UI的性能。
3. 尝试在首次渲染时为屏幕的繁重部分渲染占位符，然后在动画完成后用实际内容替换它们。
4. 分析应用的不同部分，看看是React Navigation占用了大部分时间，还是你的应用组件逻辑可以优化。
5. 谨慎使用外部库。在应用特定库之前和之后比较性能，决定哪个对你的应用更好。


你如何让你的应用运行得更快并提高其整体质量？考虑问题和实际解决方案以提高React Native应用的效率。

优化React Native中的用户体验，以及解决性能问题

上传大规模数据到Amazon S3可能令人望而生畏，尤其是在处理大量信息时。然而，我们可以通过利用Node.js TypeScript应用程序的流式传输能力来解决这个问题。流式传输使我们能够以非凡的效率将大量数据传输到AWS S3，同时节约内存资源并确保可扩展性。在本文中，我们将踏上一段旅程，揭示开发Node.js TypeScript应用程序的秘密，通过流式传输无缝地将大量数据上传到AWS S3的方法。

## 设置Node.js应用程序

让我们从设置一个新的Node.js项目开始：

```sh
mkdir aws-s3-upload
cd aws-s3-upload
npm init -y
```

接下来，安装必要的依赖项：

```sh
npm install aws-sdk axios
npm install --save-dev @types/aws-sdk @types/axios typescript ts-node
npm install --save-dev @types/express @types/multer multer multer-s3
```

## 配置AWS SDK和Multer

在这一部分，我们将配置AWS SDK以便与Amazon S3进行通信。确保您已准备好AWS凭据。

```javascript
import { S3 } from 'aws-sdk';
import multer from 'multer';
import multerS3 from 'multer-s3';
import { v4 as uuidv4 } from 'uuid';

const app = express();
const port = 3000;
const s3 = new S3({
  accessKeyId: 'YOUR_AWS_ACCESS_KEY_ID',
  secretAccessKey: 'YOUR_AWS_SECRET_ACCESS_KEY',
  region: 'YOUR_AWS_REGION',
});
```

我们还将设置Multer来直接处理文件上传到S3。定义存储配置并创建一个上传中间件实例。

```javascript
const upload = multer({
  storage: multerS3({
    s3,
    bucket: 'YOUR_S3_BUCKET_NAME',
    contentType: multerS3.AUTO_CONTENT_TYPE,
    acl: 'public-read',
    key: (req, file, cb) => {
      cb(null, `uploads/${uuidv4()}_${file.originalname}`);
    },
  }),
});
```

## 创建文件上传端点

现在，让我们创建一个用于处理文件上传的POST端点：

```javascript
app.post('/upload', upload.single('file'), (req, res) => {
  if (!req.file) {
    return res.status(400).json({ message: 'No file uploaded' });
  }

  const uploadedFile = req.file;
  console.log('File uploaded successfully. S3 URL:', uploadedFile.location);

  res.json({
    message: 'File uploaded successfully',
    url: uploadedFile.location,
  });
});
```

## 测试应用程序

要测试应用程序，您可以使用Postman或cURL等工具。确保将`Content-Type`标头设置为`multipart/form-data`，并在请求正文中包含一个字段名为'file'的文件。

## 选择数据库存储和云存储之间的区别

将文件存储在数据库还是S3存储桶取决于您的具体用例和要求。以下是一个简要概述：

### **数据库存储**

- **数据完整性：**  适用于确保数据完整性和结构化数据与关联文件之间的一致性，得益于ACID事务。
- **安全性：**  提供细粒度的访问控制机制，包括基于角色的访问控制。
- **文件大小：**  在性能和存储成本方面适用于中小型文件。
- **事务性工作流程：**  适用于涉及结构化数据和文件的复杂事务的应用程序。
- **备份和恢复：**  便于将文件包含在数据库备份和恢复过程中。

### **S3存储桶存储**

- **可扩展性：**  适用于大文件和高效的文件存储，可扩展到大量数据的千兆字节、太字节或拍字节。
- **性能：**  优化了快速文件存储和检索，特别是对于大型媒体文件或二进制数据。
- **成本效益：**  相对于数据库，对大量数据具有具有竞争力的价格。
- **简单性：**  提供直观的文件管理、版本控制和通过公共或签名URL轻松共享。
- **用例：**  通常用于存储静态资产和内容交付，并作为Web和移动文件上传的可扩展后端。
- **耐久性和可用性：**  确保高数据耐久性和可用性，适用于关键数据存储。

**混合方法：**  在某些情况下，元数据和文件的引用存储在数据库中，而实际文件存储在S3存储桶中，结合了两种方法的优势。

选择应与您的应用程序需求保持一致，考虑文件大小、数量、性能要求、数据完整性、访问控制和预算限制等因素。

## Multer vs. Formidable — 选择合适的文件上传中间件

在构建基于Express的Node.js应用程序时，选择合适的文件上传中间件至关重要。让我们比较两个流行的选项：Multer和Formidable。

### **Multer与Express**

- **Express集成：**  与Express无缝集成，易于设置和使用。
- **抽象层：**  提供了更高级别的抽象，用于处理文件上传，减少样板代码。
- **中间件链：**  轻松适配到Express中间件链中，在特定路由或端点上实现选择性使用。
- **文件验证：**  支持内置文件验证，增强对上传内容的安全性和控制。
- **多文件上传：**  在单个请求中高效处理多个文件上传。
- **文档和社区：**  受益于广泛的文档和活跃的社区。
- **文件重命名和存储控制：**  允许自定义文件命名约定和存储位置。

### **Formidable与Express**

- **多功能性：**  在各种HTTP服务器环境中工作，不限于Express，提供灵活性。
- **流式传输：**  能够处理传入数据流，非常适合高效处理大文件。
- **定制：**  对解析过程提供细粒度控制，支持自定义逻辑。
- **最小依赖：**  通过最小的外部依赖保持项目轻量级。
- **广泛采用：**  是Node.js社区中一个成熟的库。

根据项目的要求和库的熟悉程度选择Multer和Formidable。Multer非常适合与Express无缝集成、内置验证和直接的方法。当您需要更多定制、多功能性或用于大文件的流式传输能力时，可以选择Formidable。

## 结论

总之，本文演示了如何开发Node.js TypeScript应用程序，通过流式传输高效地将大型数据集上传到Amazon S3。流式传输是一种内存高效且可扩展的方法，特别适用于处理大量数据。遵循本指南中概述的步骤可以增强您的数据上传能力，并构建更健壮的应用程序。


本文指导您构建一个Node.js应用程序，用于高效地将数据上传到Amazon S3，包括设置、集成和数据库存储。

解锁流媒体的力量：使用Node.js轻松上传千兆字节数据到AWS S3

随着 React Native 应用程序的发展，高效的状态管理需求变得日益明显。虽然异步存储（Async Storage）可用于本地数据持久化，但使用 TypeScript 结合上下文 API 能够带来更有条理和可扩展的方法。本全面指南将逐步引导您完成迁移过程，充分发挥 TypeScript 的威力。

## 理解异步存储和上下文 API

React Native 中的异步存储为设备上的键值数据提供了异步持久化存储。随着应用程序规模的扩大，仅通过异步存储来管理状态可能变得繁琐。

上下文 API 结合 TypeScript 提供了一种有组织的方式，在组件之间共享状态，避免了属性钻取（prop drilling）。它确保类型安全并增强了开发效率。

## 为什么要在 TypeScript 中用上下文 API 替换异步存储？

1. **类型安全** ：TypeScript 的强类型系统确保了更好的代码完整性，减少了潜在的运行时错误。
2. **可扩展性和可维护性** ：上下文 API 简化了状态管理，通过促进更有条理的代码库来提升可扩展性。
3. **增强的开发体验** ：TypeScript 的静态类型有助于在开发过程中捕获错误，从而产生更健壮和可维护的代码。

## 逐步替换过程

### 1. 确定异步存储的使用情况

审查代码库，找到使用异步存储读取或写入数据的部分。

### 2. 使用 TypeScript 创建上下文

```typescript
import React, { createContext, useContext, useReducer, Dispatch } from 'react';

interface AppState {
  // 在此定义应用程序状态接口
  exampleData: string;
}

interface AppAction {
  // 在此定义操作类型和有效负载结构
  type: string;
  payload?: any;
}

const initialState: AppState = {
  exampleData: '',
};

const AppContext = createContext<{
  state: AppState;
  dispatch: Dispatch<AppAction>;
}>({
  state: initialState,
  dispatch: () => null,
});

const appReducer = (state: AppState, action: AppAction): AppState => {
  // 根据操作类型在此实现您的 reducer 逻辑
  switch (action.type) {
    case 'UPDATE_DATA':
      return {
        ...state,
        exampleData: action.payload,
      };
    // 根据需要添加其他情况
    default:
      return state;
  }
};

const AppProvider: React.FC = ({ children }) => {
  const [state, dispatch] = useReducer(appReducer, initialState);

  return (
    <AppContext.Provider value={{ state, dispatch }}>
      {children}
    </AppContext.Provider>
  );
};

const useAppContext = () => {
  return useContext(AppContext);
};

export { AppProvider, useAppContext };
```

### 3. 重构组件以使用上下文

更新组件以从新创建的上下文中获取数据：

```typescript
import React from 'react';
import { useAppContext } from './AppContext';

const ExampleComponent: React.FC = () => {
  const { state, dispatch } = useAppContext();

  const updateData = () => {
    const newData = 'Updated Data';
    dispatch({ type: 'UPDATE_DATA', payload: newData });
  };

  return (
    <div>
      <p>{state.exampleData}</p>
      <button onClick={updateData}>Update Data</button>
    </div>
  );
};

export default ExampleComponent;
```

### 4. 实现上下文提供者

使用 `AppProvider` 包装应用程序的根组件：

```typescript
import React from 'react';
import { AppProvider } from './AppContext';
import ExampleComponent from './ExampleComponent';

const App: React.FC = () => {
  return (
    <AppProvider>
      <ExampleComponent />
      {/* 使用上下文的其他组件 */}
    </AppProvider>
  );
};

export default App;
```

### 5. 测试和调试

彻底测试应用程序，确保其正常功能，并处理迁移过程中遇到的任何问题。


在React Native中使用TypeScript将状态管理从Async Storage迁移到Context API，可以提高可扩展性和类型安全性。

在React Native中使用TypeScript从异步存储过渡到上下文API

在Octomind，我们使用大型语言模型（LLMs）与Web应用程序UI进行交互，并提取我们想要生成的测试用例步骤。我们使用[LangChain](https://python.langchain.com/docs/get_started/introduction)库来构建与LLMs的交互链。LLM接收任务提示，而我们作为开发人员提供工具，模型可以利用这些工具来解决任务。

LLM输出的不可预测和非确定性性质使得确保类型安全成为一项相当具有挑战性的任务。LangChain对解析输入和处理错误的方法往往会导致类型系统内出现意外和不一致的结果。我想分享一下我对LangChain解析和错误处理的一些了解。

我将解释：

- 我们为什么首选TypeScript？
- LLM输出存在的问题
- 类型错误可能被忽略的原因
- 这可能带来的后果

所有代码示例均使用2023年9月22日的LangChain TS主分支（大约版本0.0.153）。

## 为什么选择LangChain TS而不是Python？

LangChain支持两种语言——Python和JS/TypeScript。TypeScript有一些优点和一些缺点：

- **缺点：** 我们必须接受这样一个事实，即TypeScript的实现在代码和尤其是文档方面略显滞后于Python版本——如果你愿意牺牲文档而只是直接查看源代码，这是一个可以解决的问题。
- **优点：** 我们不必再用另一种语言编写服务，因为我们在其他地方使用TypeScript，并且我们据说可以获得类型安全的保证，我们在这里是大的支持者。

我们决定选择TypeScript版本的LangChain来实现我们基于AI的测试发现的部分。

完全透明地说：我没有深入研究Python版本如何处理下文所述的问题。你是否在Python版本中发现了类似的问题？欢迎直接在我创建的GitHub问题中分享。在文章末尾找到链接。

## LLM中的类型问题

在LangChain中，您可以提供一组工具，模型可以在认为有必要时调用这些工具。对于我们的目的，工具只是一个具有\*\*\_call\*\* 函数的类，该函数执行模型无法单独完成的操作，比如在网页上点击按钮。该函数的参数由模型提供。

当您的工具实现依赖于开发人员了解输入格式（与仅对模型生成的文本执行操作相反），LangChain提供了一个名为[**StructuredTool** 的类](https://github.com/langchain-ai/langchainjs/blob/main/langchain/src/tools/base.ts#L33)。

**StructuredTool** 为工具添加了一个[zod模式](https://github.com/colinhacks/zod)，用于解析模型决定调用工具时提供的任何内容，以便我们可以在我们的代码中使用这些知识。

让我们以我们想要模型给我们一个要点击的查询选择器为例来构建我们的“点击”示例：

[![code snippet 1
](https://cdn.iokks.com/art/97f74b8bca49/ea4f60f2f9384a93a3944a4452be4e3a.png)](https://gist.github.com/ma-zah/4590c10464ac0062a91576ba89752a89#file-snippet-1-ts)

现在，当您查看这个类时，它似乎相当简单，没有太多可能出错的地方。但是模型实际上如何知道要提供什么模式？它本身没有这样的功能。它只是对提示生成一个字符串响应。

当LangChain告知模型其可以使用的工具时，它将为每个工具生成格式说明。这些说明定义了JSON是什么，以及模型应该生成的特定输入模式以使用工具。

为此，LangChain将生成一个附加到您自己的提示的内容，看起来像这样：

您可以访问以下工具。

您必须将您的输入格式化为下面的“JSON模式”定义。

“JSON模式”是一种声明性语言，允许您注释和验证JSON文档。

例如，示例`“JSON模式”实例{"properties": {"foo": {"description": "a list of test words," "type": "array," "items": {"type": "string"}}}, "required": ["foo"]}}`将匹配具有一个必需属性“`foo`”的对象。属性“`type`”指定“`foo`”必须是一个“`array`”，并且“`description`”属性在语义上描述它为“一组测试单词”。在“`foo`”内的项目必须是字符串。

因此，对象`{"foo": ["bar," "baz"]}`是这个示例“JSON模式”的格式良好的实例。对象`{"properties": {"foo": ["bar," "baz"]}}`则格式不良好。

以下是您可以访问的工具的JSON模式实例：

`click: left click on an element on a web page represented by a query selector, args: {"selector":{"type": "string," "description": "The query selector to click on."}}`

## 不要相信LLM

现在，我们有了一种尽力使模型使用正确模式的方法。不幸的是，尽力并不能保证一切。完全有可能模型生成的输入*不*符合模式。

因此，让我们来看看`StructuredTool`的实现，看看它如何处理这个问题。`StructuredTool.call`是最终调用我们上面的`_call`方法的函数。

它开始如下：

[![code snippet 2](https://cdn.iokks.com/art/97f74b8bca49/86c9440fd9c648ab9714ff586c6ac043.png)](https://gist.github.com/ma-zah/2674f361eafa2a9741fc1b65e8ed7ae9)

`arg`的签名解释如下：

如果在解析工具的模式后，输出可以只是一个字符串，那么这也可以是一个字符串，或者是模式定义的任何对象。如果您将模式定义为`schema = z.string()`，那么就是这种情况。

在我们的情况下，我们的模式不能解析为字符串，因此这简化为类型`{ selector: string }, or ClickSchema`。

## 但这实际上是这种情况吗？

根据实现，我们只在`call`内部检查输入是否符合模式。签名看起来好像我们已经对输入做出了一些假设。

因此，可以用以下内容替换签名：

[![code snippet 3](https://cdn.iokks.com/art/97f74b8bca49/57223b33957748d2846391dbeed4435a.png)](https://gist.github.com/ma-zah/bded78f8223cb2b123e637ef087813b7)

但是进一步观察，甚至这也存在问题。我们唯一确定的是模型将给我们一个字符串。这意味着有两种选择：

1. `call`实际上应该有以下签名：

[![code snippet 4
](https://cdn.iokks.com/art/97f74b8bca49/b130e9d969914904a808adfa970425cc.png)](https://gist.github.com/ma-zah/e445da1274fad29b6502bed8b9ff8622)

2. 还有另一个元素

- 必须已经有某个东西决定了模型返回的字符串是有效的JSON并对其进行了解析。
- 如果`z.output<T> extends string`，则在某个地方必须已经决定了字符串是工具的可接受输入格式，我们不需要解析JSON。（单独的字符串不是有效的JSON，`JSON.parse("foo")`将导致SyntaxError）。

## 引入OutputParser类

当然，第二种选择才是正在发生的事情。对于这种情况，LangChain提供了一个名为`OutputParser`的概念。

让我们来看一下默认的一个`(StructuredChatOuputParser)`及其[**parse** 方法](https://github.com/langchain-ai/langchainjs/blob/main/langchain/src/agents/structured_chat/outputParser.ts#L112)。

我们不需要了解每个细节，但我们可以看到这是模型生成的字符串被解析为JSON的地方，并且如果它不是有效的JSON，则会抛出错误。

[![code snippet 5](https://cdn.iokks.com/art/97f74b8bca49/8fd0eec8287a4806a5e1d6f5521d6f59.png)](https://gist.github.com/ma-zah/74d492d872c5f66773930900abde9f2e)

因此，我们要么得到`AgentAction`，要么得到`AgentFinish`。我们不需要关心`AgentFinish`，因为它只是一个特殊情况，表示与模型的交互已经完成。

`AgentAction`被定义为：

[![code snippet 6](https://cdn.iokks.com/art/97f74b8bca49/38116974b05d4334b4a8f4141c908e7f.png)](https://gist.github.com/ma-zah/545e5051a650c1cc4d888cef917914f4)

到目前为止，您可能已经看到——`AgentAction`和`StructuredChatOutputParserWithRetries`都不是泛型的，也没有办法将`toolInput`的类型与我们的`ClickSchema`连接起来。

由于我们不知道代理实际上选择了哪个工具，因此我们无法（轻松地）使用泛型来表示实际类型，所以这是可以预料的。但更糟糕的是，`toolInput`被标记为`string`类型，即使我们刚刚使用了`JSON.parse`来获取它！

考虑模型生成与我们的模式匹配的输出的正面情况，比如字符串`"{\"selector\": \"myCoolButton\"}"`（包含LangChain要求的所有额外内容）。使用\*\*`JSON.parse`\*\* ，这将反序列化为对象`{ selector: "myCoolButton" }`，而不是一个`string`。

但是因为`JSON.parse`的返回类型是`any`，TypeScript编译器无法意识到这一点。不幸的是，这也意味着我们作为开发人员很难意识到这一点。

## 对我们生产代码的影响

要理解为什么这是令人困扰的，我们需要深入了解执行循环，其中`AgentActions`用于实际调用工具。

这发生在[这里](https://github.com/langchain-ai/langchainjs/blob/main/langchain/src/agents/executor.ts#L131)的`AgentExecutor._call`中。我们实际上不需要了解这个类的所有内容。可以将其视为处理模型与工具实现交互的包装器。

循环中的第一件事是查找要执行的下一个操作。这就是使用`OutputParser`进行解析并处理其异常的地方。

您可以看到，在出现错误的情况下，`toolInput`字段将始终是一个字符串（如果`this.handleParsingErrors`是一个函数，返回类型也是`string`）。

但是我们刚刚看到，在非错误情况下，`toolInput`将被解析为JSON！这是不一致的行为。我们从未将`handleParsingErrors`的输出解析为JSON。

让我们看看循环如何继续。下一步是使用给定的输入调用所选的工具：

[![code snippet 8
](https://cdn.iokks.com/art/97f74b8bca49/ff475e5c202b4f26aaea4f61160680c0.png)](https://gist.github.com/ma-zah/97d2ce8a94b05528d9e7dccac07fb3db)

我们只将先前计算的输出传递给工具的`tool.call(action.toolInput)`！

如果这导致另一个错误，我们将重复使用相同的函数来处理解析错误，该函数将返回一个字符串，该字符串应该是错误情况下的工具输出。

让我们总结一下所有问题：

- 我们将模型的输出解析为JSON，并使用解析后的结果调用工具

- 如果解析成功，我们将使用任何有效的JSON调用工具

- 如果解析失败，我们将使用一个字符串调用工具

- 工具使用zod解析输入，仅当模式是`const stringSchema = z.string()`时，错误情况下才能通过类型检查

- 我们没有涵盖这一点，但是使用`const stringSchema = z.string()`作为工具模式将根本无法通过类型检查，因为`StructuredTool`的泛型参数是`T extends z.ZodObject<any, any, any, any>`，而`typeof stringSchema`不满足该约束

- `tool.call`的签名允许这种类型检查，因为我们当前不知道具体有哪个工具，所以字符串和任何JSON都有可能是有效的

- 实际的类型检查发生在此函数内部的运行时

- 实现该工具的开发人员对此一无所知。因为只有 `StrucStep.actionturedTool._call` 是抽象的，你将始终得到模式指示的内容，但 `StructuredTool.call` 将失败，即使你已经提供了一个名为 `handleParsingErrors` 的函数。

- 无论工具被调用时传入什么，都会被序列化为 `AgentAction.toolInput: string`，这个类型并不正确

- 库用户可以访问带有错误类型的 `AgentActions`，因为可以通过 `returnIntermediateSteps=true` 请求它们作为整体循环的返回值。

无论开发人员现在做什么，都绝对不是类型安全的！

## 我们是如何遇到这个问题的？

在 Octomind，我们使用 `AgentSteps` 来提取我们想要生成的测试用例步骤。我们注意到模型经常在工具输入格式上犯同样的错误。

回想一下我们的 `ClickSchema`，它只是 `{ selector: string }`。

在我们的点击示例中，它可能会根据模式生成 `{ element: string }`，或者只是一个我们想要的值的字符串，比如 `"myCoolButton."`

因此，我们为这些常见的错误情况构建了一个自动修复工具。修复工具基本上只是检查它是否可以使用上述任一选项修复输入。我们可以在不覆盖 LangChain 提供的大量规划逻辑的情况下最早地注入这段代码是在 `StructuredTool.call` 中。

我们无法使用 `handleParsingErrors` 来处理它，因为它只接收错误作为输入，而不是原始输入。一旦你覆盖了 `StructuredTool.call`，你就依赖于该函数的签名是正确的，而我们刚刚看到这并不是情况。

在这一点上，我陷入了必须弄清楚上述所有内容的困境，以了解为什么我得到了错误类型的输入。

## 类型安全的解决方案

虽然这些障碍可能令人沮丧，但它们也提供了深入研究库并提出可能解决方案的机会，而不是抱怨。

我在 LangChain JS/TS 上开了两个问题，讨论如何解决这些问题的想法：

- [问题 1](https://github.com/langchain-ai/langchainjs/issues/2710)
- [问题 2](https://github.com/langchain-ai/langchainjs/issues/2711)


LLM输出的不可预测性和非确定性使得确保类型安全成为一个挑战。一位机器学习工程师关于使用LangChain TS的经验分享。

关于LangChain TS中的类型安全

SELECT '随着越来越多的开发人员采用TypeScript，我精心挑选了一些**你应该在下一个项目中使用TypeScript的原因** 。尽管它在早期遇到了一些阻力，但在过去的十年里，它迅速成为了一种广泛使用的编程语言。' AS translation
`npm install –save-dev TypeScript`

### 如何卸载 TypeScript

要卸载它，你可以使用与安装相同的命令。只需将 install 替换为 uninstall，如下所示：

`npm uninstall –global TypeScript`

![如何卸载 TypeScript: npm uninstall --global TypeScript](https://cdn.iokks.com/art/8da54f8afa2f/93d0bcd3805d425d9d9c967519e8aa60.png "如何卸载 TypeScript")

## 如何使用 TypeScript

安装完成后，就可以开始使用了。你需要一个像 Visual Code Studio 这样的代码编辑器。如果你没有它，你需要下载并安装 VS Code。安装完成后，下面是如何使用 TypeScript：

**步骤 1：** 让我们创建一个简单的 Hello World 项目。这将帮助你了解如何使用 TypeScript。

**步骤 2：** 在安装完成后运行以下命令以创建一个项目目录：

`mkdir HelloWorld`

然后进入新目录：

`cd HelloWorld`

**步骤 3：** 启动 Visual Studio Code（或你喜欢的代码编辑器）。我们将在这里使用 VS Code。

**步骤 4：** 导航到文件资源管理器并创建一个名为 helloworld.ts 的新文件。文件名并不重要；你可以随意命名。但是，重要的是这些文件以 .ts 扩展名结尾。

![](https://cdn.iokks.com/art/8da54f8afa2f/fae123dd3faa44389877a1f96e68d05b.png)

**步骤 5：** 接下来，添加以下 TypeScript 代码。

`let message: string = ‘Hello, World!’; console.log(message);`

你会注意到关键字 let 和字符串类型声明。

**步骤 6：** 要编译 TypeScript 代码，只需打开集成终端（Ctrl+\`）并输入：

`tsc helloworld.ts`

![这将编译并创建一个新的 helloworld.js JavaScript 文件。](https://cdn.iokks.com/art/8da54f8afa2f/67a6d516a865493793e62cabaae2b690.png)

这将编译并创建一个新的 helloworld.js JavaScript 文件。

当你打开 helloworld.js 时，你会发现它看起来与 helloworld.ts 并没有太大的不同。你会看到类型信息现在已被移除，let 已被替换为 var。

## 结论

最终，使用 TypeScript 将取决于你的项目以及所需的时间和精力。你的团队需要评估实施的优势和劣势。因此，使用 TypeScript 将立即显现出来，从更好的代码补全到错误预防，它将使你的团队在编写代码时更加轻松。


TypeScript的主要目的是在开发复杂应用程序时提高生产力，它将使你的团队在编写代码时的工作变得更加轻松。

为什么要在你的项目中使用TypeScript？

如今，很难想象一个严肃的基于 JavaScript 的应用程序没有 TypeScript 的支持。接口、元组、泛型和其他特性在 TypeScript 开发者中广为人知。虽然一些高级构造可能需要一定的学习曲线，但它们可以显著增强类型安全性。本文旨在向您介绍一些这些高级特性。

## **类型守卫**

类型守卫帮助我们在条件块内获取有关类型的信息。有一些简单的方法可以使用 `in`、`typeof`、`instanceof` 运算符进行类型检查，或者使用相等比较 (`===`)。

在这一部分，我想更加关注用户定义的类型守卫。这种守卫充当一个返回布尔值的简单函数。换句话说，返回值是一个类型谓词。让我们来看一个例子，当我们有基本用户信息和带有额外细节的用户时：

```javascript
type User = { name: string };
type DetailedUser = { 
  name: string; 
  profile: { 
    birthday: string
  }
}

function isDetailedUser(user: User | DetailedUser) {
  return 'profile' in user;
}

function showDetails(user: User | DetailedUser) {
if (isDetailedUser(user)) {
  console.log(user.profile); // 错误：类型 'User | DetailedUser' 上不存在属性 'profile'。
          }
}
```

`isDetailedUser` 函数返回一个布尔值，但它并没有将这个函数标识为“定义对象类型的布尔值”。

为了实现期望的结果，我们需要稍微更新 `isDetailedUser` 函数，使用 `“user is DetailedUser”` 结构：

```javascript
function isDetailedUser(user: User | DetailedUser): user is DetailedUser {
  return 'profile' in user;
}
```

## **索引访问类型**

在您的应用程序中可能会出现这样的情况：您有一个大型对象类型，想要创建一个新类型，该类型使用原始类型的一部分。例如，我们的应用程序的一部分需要仅用户配置文件。`User['profile']` 提取所需的类型并将其分配给 `UserProfile` 类型。

```javascript
type User = {
  id: string;
  name: string;
  surname: string;
  profile: {
    birthday: string;
  }
}

type UserProfile = User['profile'];
```

如果我们想基于几个属性创建一个类型会怎样？在这种情况下，您可以使用一个名为 `Pick` 的内置类型。

```javascript
type FullName = Pick<User, 'name' | 'surname'>; // { name: string; surname: string }
```

还有许多其他实用类型，比如 `Omit`、`Exclude` 和 `Extract`，它们可能对您的应用程序有所帮助。乍一看，它们都是索引类型，但实际上它们都是基于 `Mapped` 类型构建的。

### 带有数组的索引类型

您可能遇到过这样的情况，应用程序为您提供了一个联合类型，例如：

```javascript
type UserRoleType = ‘admin’ | ‘user’ | ‘newcomer’;
```

然后，在应用程序的另一部分，我们获取用户数据并检查其角色。对于这种情况，我们需要创建一个数组：

```javascript
const ROLES: UserRoleType[] = [‘admin’, ‘user’, ‘newcomer’];
ROLES.includes(response.user_role);
```

看起来很累人，不是吗？我们需要在数组内重复联合类型的值。很好的是，索引类型在这里也有帮助。

首先，我们需要使用 const 断言声明我们的数组，以消除重复并创建一个只读元组。

```javascript
const ROLES = [‘admin’, ‘user’, ‘newcomer’] as const;
```

然后，使用 `typeof` 运算符和 `number` 类型，我们基于数组值创建一个联合类型。

```javascript
type RolesType = typeof ROLES[number]; // ‘admin’ | ‘user’ | ‘newcomer’;
```

您可能对这个解决方案感到困惑，但您可能知道，数组是基于数字键的对象构造。这就是为什么在这个例子中，`number` 被用作索引访问类型。

## **条件类型和 Infer 关键字**

条件类型定义一个依赖于条件的类型。通常，它们与泛型一起使用。根据泛型类型（输入类型），构造选择输出类型。

例如，内置的 `NonNullable` TypeScript 类型是基于条件类型构建的。

```javascript
type NonNullable<T> = T extends null | undefined ? never : T
type One = NonNullable<number>; // number
type Two = NonNullable<undefined>; // never
```

`infer` 关键字与条件类型一起使用，不能在‘`extends`’子句之外使用。它充当‘`类型变量创建者`’。

我认为通过看一个真实的例子，您会更容易理解它。

案例：检索异步函数的结果类型。

```javascript
const fetchUser = (): Promise<{ name: string }> => { /* implementation */ }
```

最简单的解决方案是导入类型声明并将其分配给变量。不幸的是，有些情况下结果声明是写在函数内部的，就像上面的例子一样。

这个问题可以通过**两个步骤** 解决：

1. `Awaited` 实用类型在 TypeScript 4.5 中引入。为了学习目的，让我们看一个简化的变体。

```javascript
export type Awaited<T> = T extends Promise<infer U> ? U : T;
```

使用条件类型和 `infer` 关键字，我们“提取”了承诺的类型并将其分配给 `U` 名称。这是一种类型变量声明。如果传递的类型与 `PromiseLike` 泛型兼容，构造将返回保存到 `U` 名称的原始类型。

2. 从异步函数获取值。

使用内置的 `ReturnType` 提取函数的返回类型和我们的 `Awaited` 类型，我们实现了期望的结果：

```javascript
export type Awaited ReturnType<T> = Awaited<Return Type<T>>;
```



一些高级构造可能需要一段学习曲线，但可以显著增强你的类型安全性。本文将向你介绍其中的一些高级特性。

TypeScript的一些实用功能

我记得第一次看到 Ruby on Rails 的演示时，印象深刻。演示者们几乎不费吹灰之力就创建了一个可以用于真实业务目的的全栈 Web 应用。我印象深刻，尤其是当我想到我用 Seam 和 Struts 框架提供类似解决方案时花了多少时间。

Ruby 是在 1993 年创建的，旨在成为易于使用的脚本语言，同时还包括面向对象的特性。Ruby on Rails 在 2000 年代中期将事情推向了一个新的水平——恰好在合适的时间出现，成为 Twitter、Shopify、GitHub 和 Airbnb 初创企业的首选技术。

我开始思考一个问题：“是否可能拥有一个像 Ruby on Rails 这样的产品，而无需担心基础架构或底层数据层呢？”

这就是我发现 Zipper 平台的时候。

## 关于 Zipper

Zipper 是一个使用简单的 TypeScript 函数构建 Web 服务的平台。您可以使用 Zipper 创建 applet（与 Java 无关，尽管它们有相同的名称），然后在 Zipper 平台上构建和部署它们。

Zipper 最酷的地方在于，它让您专注于使用 TypeScript 编写解决方案，而无需担心其他任何事情。Zipper 负责：

- 用户界面
- 托管解决方案的基础设施
- 持久化层
- 与您的 applet 交互的 API
- 身份验证

尽管该平台目前处于测试阶段，但已经向消费者开放使用。在我写这篇文章的时候，已经有四个模板可供新用户开始使用：

- Hello World——一个基本的 applet，让您开始
- CRUD 模板——提供一个待办事项列表，其中可以创建、查看、更新和删除项目
- Slack 应用模板——提供了如何与 Slack 服务交互的示例
- AI 生成的代码——用人类语言表达您的解决方案，并让 AI 为您创建 applet

Zipper 平台还有一个画廊，其中提供了可以像基于 Git 的存储库一样分叉的 applet。

![Zipper 仪表板](https://cdn.iokks.com/art/74ee74342939/df07fe8b06304244b383ad0e2082fc93.png)

我想测试一下 Zipper 平台，并创建一个投票 applet。

## HOA 投票使用案例

美国的房主协会（HOA）概念在 20 世纪开始在美国获得了一定的势头。分区成立 HOA 来处理诸如公共区域的护理以及为居民制定规则和指南等事务。他们的目标是在房屋建筑商完成开发后，长期维护分区的整体生活质量。

HOA 经常举行选举，让房主投票选择他们认为最符合他们观点和观念的候选人。事实上，去年我发表了一篇关于如何使用 Web3 技术创建 HOA 投票的文章。

对于这篇文章，我想使用 Zipper 采取相同的方法。

## 投票要求

投票 applet 的要求是：

1. 作为投票所有者，我需要能够创建候选人名单。
2. 作为投票所有者，我需要能够创建注册选民名单。
3. 作为选民，我需要能够查看候选人名单。
4. 作为选民，我需要能够为单个候选人投一票。
5. 作为选民，我需要能够查看每个候选人获得的当前票数。

此外，我认为一些额外的目标也很不错：

1. 作为投票所有者，我需要能够清除所有候选人。
2. 作为投票所有者，我需要能够清除所有选民。
3. 作为投票所有者，我需要能够为投票设置一个标题。
4. 作为投票所有者，我需要能够为投票设置一个副标题。

## 设计投票 applet

要开始使用 Zipper 平台，我导航到 [Zipper 的网站](https://zipper.dev/)，然后点击 **登录**  按钮。接下来，我选择了一个认证来源：

![Zipper 登录](https://cdn.iokks.com/art/74ee74342939/8079758c802b41a4adab8ac4766299b2.png)

登录后，我从仪表板中使用 **创建 Applet**  按钮创建了一个新的 applet：

![创建 Applet](https://cdn.iokks.com/art/74ee74342939/4c16d2a08a67447dad3522929d03324c.png)

生成了一个唯一的名称，但可以更改以更好地识别您的用例。目前，我保留了所有默认设置，并点击了 **下一步**  按钮——这使我可以从四种不同的模板中选择 applet 创建：

![创建 Applet](https://cdn.iokks.com/art/74ee74342939/5a5d6ab097654d2f8b7832bc336c2282.png)

我从 CRUD 模板开始，因为它提供了一个很好的示例，展示了在 Zipper 平台上如何进行常见的创建、查看、更新和删除流程。代码创建后，屏幕显示如下：

![显示代码创建后的屏幕](https://cdn.iokks.com/art/74ee74342939/7edc972b5c034f6aafd568f3318acf6e.png)

有了一个完全功能的 applet，我们现在可以更新代码以满足 HOA 投票的要求。

### 建立核心元素

对于投票 applet，我想要做的第一件事是更新 `types.ts` 文件，如下所示：

```typescript
export type Candidate = {
  id: string;
  name: string;
  votes: number;
};

export type Voter = {
  email: string;
  name: string;
  voted: boolean;
};
```

我想在一个新文件 `constants.ts` 中为投票标题和副标题建立常量值：

```typescript
export class Constants {
  static readonly BALLOT_TITLE = "样本投票";
  static readonly BALLOT_SUBTITLE = "样本投票副标题";
};
```

为了只允许投票所有者对投票进行更改，我使用了 applet 的 **Secrets**  标签来创建一个所有者密钥，其值为我的电子邮件地址。

![Secrets](https://cdn.iokks.com/art/74ee74342939/3d32dfd8755743b2bd21bd51a5c8f2fe.png)

然后，我引入了一个 common.ts 文件，其中包含了 `validateRequest()` 函数：

```typescript
export function validateRequest(context: Zipper.HandlerContext) {
  if (context.userInfo?.email !== Deno.env.get('owner')) {
    return (
      <>
         <Markdown>
         {`### 错误：
         您无权执行此操作`}
         </Markdown>
      </>
    );
  }
};
```

这样，我可以将上下文传递给此函数，以确保只有 `owner` 密钥中的值被允许对投票和选民进行更改。

### 建立候选人

在了解了原始 CRUD applet 中如何创建待办事项后，我能够引入 `create-candidate.ts` 文件，如下所示：

```typescript
import { Candidate } from "./types.ts";
import { validateRequest } from "./common.ts";

type Input = {
  name: string;
};

export async function handler({ name }: Input, context: Zipper.HandlerContext) {
  validateRequest(context);

  const candidates =
    (await Zipper.storage.get<Candidate[]>("candidates")) || [];
  const newCandidate: Candidate = {
    id: crypto.randomUUID(),
    name: name,
    votes: 0,
  };
  candidates.push(newCandidate);
  await Zipper.storage.set("candidates", candidates);
  return newCandidate;
}
```

对于这个用例，我们只需要提供候选人姓名，但 Candidate 对象包含了一个唯一的 ID 和获得的票数。

在这里，我继续编写了 `delete-all-candidates.ts` 文件，用于从键/值数据存储中删除所有候选人：

```typescript
import { validateRequest } from "./common.ts";

type Input = {
  force: boolean;
};

export async function handler(
  { force }: Input,
  context: Zipper.HandlerContext
) {
  validateRequest(context);

  if (force) {
    await Zipper.storage.set("candidates", []);
  }
}
```

此时，我使用了 **预览**  功能来创建候选人 A、候选人 B 和候选人 C：

![使用预览功能创建候选人 A、B 和 C](https://cdn.iokks.com/art/74ee74342939/179390c611a8414eb839df56e9f6e7dc.png)

### 注册选民

有了准备好的投票，我需要为投票注册选民的能力。因此，我添加了一个 `create-voter.ts` 文件，内容如下：

```typescript
import { Voter } from "./types.ts";
import { validateRequest } from "./common.ts";

type Input = {
  email: string;
  name: string;
};

export async function handler(
  { email, name }: Input,
  context: Zipper.HandlerContext
) {
  validateRequest(context);

  const voters = (await Zipper.storage.get<Voter[]>("voters")) || [];
  const newVoter: Voter = {
    email: email,
    name: name,
    voted: false,
  };
  voters.push(newVoter);
  await Zipper.storage.set("voters", voters);
  return newVoter;
}
```

为了注册选民，我决定提供电子邮件地址和姓名的输入。还有一个名为 `voted` 的布尔属性，将用于执行一票一次的规则。

与之前一样，我继续创建了 `delete-all-voters.ts` 文件：

```typescript
import { validateRequest } from "./common.ts";

type Input = {
  force: boolean;
};

export async function handler(
  { force }: Input,
  context: Zipper.HandlerContext
) {
  validateRequest(context);

  if (force) {
    await Zipper.storage.set("voters", []);
  }
}
```

现在，我们准备注册一些选民，我为投票注册了自己：

![为投票注册为选民](https://cdn.iokks.com/art/74ee74342939/7798237c146f48bb8f7fb3b09e55837d.png)

### 创建投票

我需要做的最后一件事是建立投票。这涉及更新 `main.ts`，内容如下：

```typescript
import { Constants } from "./constants.ts";
import { Candidate, Voter } from "./types.ts";

type Input = {
  email: string;
};

export async function handler({ email }: Input) {
  const voters = (await Zipper.storage.get<Voter[]>("voters")) || [];
  const voter = voters.find((v) => v.email == email);
  const candidates =
    (await Zipper.storage.get<Candidate[]>("candidates")) || [];

  if (email && voter && candidates.length > 0) {
    return {
      candidates: candidates.map((candidate) => {
        return {
          Candidate: candidate.name,
          Votes: candidate.votes,
          actions: [
            Zipper.Action.create({
              actionType: "button",
              showAs: "refresh",
              path: "vote",
              text: `Vote for ${candidate.name}`,
              isDisabled: voter.voted,
              inputs: {
                candidateId: candidate.id,
                voterId: voter.email,
              },
            }),
          ],
        };
      }),
    };
  } else if (!email) {
    <>
      <h4>错误：</h4>
      <p>
        您必须提供有效的电子邮件地址才能为此投票投票。
      </p>
    </>;
  } else if (!voter) {
    return (
      <>
        <h4>无效的电子邮件地址：</h4>
        <p>
          提供的电子邮件地址（{email}）未经授权为此投票投票。
        </p>
      </>
    );
  } else {
    return (
      <>
        <h4>投票尚未准备好：</h4>
        <p>此投票尚未配置任何候选人。</p>
        <p>请稍后再试。</p>
      </>
    );
  }
}

export const config: Zipper.HandlerConfig = {
  description: {
    title: Constants.BALLOT_TITLE,
    subtitle: Constants.BALLOT_SUBTITLE,
  },
};
```

我添加了以下验证作为处理逻辑的一部分：

- 必须包含电子邮件属性，否则将显示“您必须提供有效的电子邮件地址才能为此投票投票”消息。

- 提供的电子邮件值必须与注册选民匹配，否则将显示“提供的电子邮件地址未经授权为此投票投票”消息。

- 必须至少有一个候选人可供投票，否则将显示“此投票尚未配置任何候选人”消息。

- 如果已注册选民已经投票，那么选票按钮将对选票上的所有候选人进行禁用。

`main.ts` 文件包含每个候选人的按钮，所有这些按钮都调用下面显示的 `vote.ts` 文件：

```typescript
import { Candidate, Voter } from "./types.ts";

type Input = {
  candidateId: string;
  voterId: string;
};

export async function handler({ candidateId, voterId }: Input) {
  const candidates = (await Zipper.storage.get<Candidate[]>("candidates")) || [];
  const candidate = candidates.find((c) => c.id == candidateId);
  const candidateIndex = candidates.findIndex(c => c.id == candidateId);

  const voters = (await Zipper.storage.get<Voter[]>("voters")) || [];
  const voter = voters.find((v) => v.email == voterId);

  const voterIndex = voters.findIndex(v => v.email == voterId);

  if (candidate && voter) {
    candidate.votes++;
    candidates[candidateIndex] = candidate;

    voter.voted = true;
    voters[voterIndex] = voter;

    await Zipper.storage.set("candidates", candidates);
    await Zipper.storage.set("voters", voters);
    return `${voter.name} 成功为 ${candidate.name} 投票`;
  }

  return `无法投票。候选人=${ candidate }，选民=${ voter }`;
}
```

此时，选票小程序已经准备就绪。

## HOA 投票小程序的运行

对于每个已注册选民，我会发送一封类似于以下链接的电子邮件：

https://squeeking-echoing-cricket.zipper.run/run/main.ts?email=some.email@example.com

该链接将被定制，以为 `email` 查询参数提供适当的电子邮件地址。点击链接将运行 `main.ts` 文件并传入电子邮件参数，避免已注册选民需要输入他们的电子邮件地址。

选票显示如下：

![样本选票](https://cdn.iokks.com/art/74ee74342939/b335ab3081df45648de73dfc08106e2a.png)

我决定为候选人 B 投票。一旦我点击按钮，选票将更新如下：

![显示已投票的更新选票](https://cdn.iokks.com/art/74ee74342939/b4ab3c78cf9b4ff4a21475e2a1366d0c.png)

候选人 B 的票数增加了一票，并且所有的选票按钮都被禁用。成功！


标签：TypeScript

解锁流媒体的力量：使用Node.js轻松上传千兆字节数据到AWS S3

在React Native中使用TypeScript从异步存储过渡到上下文API

关于LangChain TS中的类型安全

为什么要在你的项目中使用TypeScript？

TypeScript的一些实用功能

使用Zipper快速构建无服务器（Serverless）应用

热门标签

热门文章