演示目的
本示例演示应用通义灵码，使用React Native作为前端方案，以node.js作为后端方案，在Mac上开发一个类似通义的app。重点演示iOS app开发过程。开发完成的代码在Android平台同样可运行。
- 演示灵码生成前端页面的能力。
- 演示灵码自动生成app后端代码库的能力。
- 演示灵码自动使用前后端通信库RTK query的方式。
- 演示灵码根据API参考文档自动生成API调用程序的能力。
演示准备
在电脑本地安装Node环境。以下以Mac环境为例。
brew install node
安装Xcode以及iPhone Simulator。
演示步骤
初始化iOS app前端项目
运行如下命令，使用expo初始化一个app的前端代码库。
npx create-expo-app@latest
在命令运行过程中，系统会提示为前端项目命名，命名为：demo-app-frontend。运行完成后，生成代码库。
# 进入该项目的代码库 cd demo-app-frontend # 运行 npm start
演示1：前端 - 生成AI对话页面
在灵码的对话框中输入：
把home页面改成一个ai对话页面，在其中，可以像在使用通义app一样，与ai进行文字对话
生成如下页面。
演示2：后端 - 生成Node.js后端
现在，为我生成这个App 的后端代码。后端的代码文件名称为demo-app-backend, 与demo-app-frontend同级。后端采用 Node.js，使用express框架。
mkdir demo-app-backend cd demo-app-backend && npm init -y cd demo-app-backend && npm install express cors dotenv cd demo-app-backend && npm install --save-dev nodemon
可以看到，灵码生成了完整的 Node.js 后端代码库demo-app-backend, 与demo-app-frontend，一个是app的后端，另一个是前端。
Node.js后端已经在运行，监听3000端口。
演示3：设置前后端通信方式
使用RTK query作为前端与后端通信的方式。灵码将自动安装redux等依赖，并实现用RTK query做前后端的通信方案。
在实现过程中，页面的样式可能会被更改，可以告诉灵码，进行纠错。首页，回到你第一版设计的类似通义app的设计样式
目前，Node.js后端还没有连接到qwen的api服务。灵码自动生成了一些mock的回复，用于测试前后端的通信是否正常。
演示4：后端 - 调用Qwen API服务
下面，设置让Node.js后端连接到qwen的api服务，此处我们使用qwen-plus模型做示例。需要准备百炼的DASHSCOPE_API_KEY。
下面，我们来完善后端服务，让后端与qwen api连接。这里是百炼提供的node.js连接到qwen api的方式。仿照它的方式在node.js后端中写一个服务用以连接到qwen api，DASHSCOPE_API_KEY我将配置在node.js后端的.env文件中。import OpenAI from "openai"; const openai = new OpenAI( { // 若没有配置环境变量，请用百炼API Key将下行替换为：apiKey: "sk-xxx", apiKey: process.env.DASHSCOPE_API_KEY, baseURL: "https://dashscope.aliyuncs.com/compatible-mode/v1" } ); async function main() { const completion = await openai.chat.completions.create({ model: "qwen-plus", //此处以qwen-plus为例，可按需更换模型名称。模型列表：https://help.aliyun.com/zh/model-studio/getting-started/models messages: [ { role: "system", content: "You are a helpful assistant." }, { role: "user", content: "你是谁？" } ], }); console.log(JSON.stringify(completion)) } main();
可以看到，用户已经可以通过app的前端与后端对话，对话的回复来自于qwen模型生成的内容。
