SAPUI5框架开发调用DeepSeek接口实现聊天对话的程序

1.一、环境准备

1.1.1. 安装VSCode和Node.js

VSCode：从VSCode官网下载并安装。
Node.js：从Node.js官网下载并安装，安装完成后可通过node -v和npm -v命令验证安装是否成功。

1.2.2. 安装VSCode插件

在VSCode中安装SAP Fiori tools插件，该插件可帮助我们创建和运行SAPUI5应用。

2.二、创建SAPUI5本地应用

2.1.1. 打开VSCode命令面板

点击菜单【查看】-【命令面板】（快捷键ctrl + shift + p），输入Fiori，选择 “Fiori: Open Applicatio Generatior”。

2.2.2. 配置应用信息

在 “Application Type” 中，选择 “SAPUI5 freestyle”，再选择 “SAPUI5 Application”，点击 “NEXT”。
选择 “Data source: None” 后点击 “NEXT”（若有系统或OData，可选择对应的选项）。
输入 “View name: V_Main”，继续 “NEXT”。
输入 “Module name” 等信息，点击 “Finish”。

2.3.3. 运行应用

在创建好的应用上，右键选择 “在集成终端中打开”，输入命令 npm start（需先安装node.js），VSCode会自动打开对应的网页。

3.三、了解SAPUI5框架开发基本流程和调用ODATA服务的方法

3.1.1. SAPUI5框架概述

SAPUI5是一种用于构建企业级Web应用程序的开发框架，由SAP开发，基于HTML5、CSS3和JavaScript技术。它提供了丰富的UI控件和工具，支持数据绑定、MVC架构、国际化等功能，还能与SAP后端系统集成。

3.2.2. 调用ODATA服务

3.2.1.配置OData Model

在SAP UI5项目中，通常在manifest.json文件中配置OData Model，示例如下：

{
    "sap.app": {
        "dataSources": {
            "mainService": {
                "uri": "/path/to/your/service/",
                "type": "OData",
                "settings": {
                    "odataVersion": "2.0"
                }
            }
        }
    },
    "models": {
        "": {
            "dataSource": "mainService",
            "settings": {
                "defaultBindingMode": "TwoWay",
                "defaultCountMode": "Inline",
                "useBatch": true
            }
        }
    }
}

{

"sap.app": {

"dataSources": {

"mainService": {

"uri": "/path/to/your/service/",

"type": "OData",

"settings": {

"odataVersion": "2.0"

}

"models": {

"": {

"dataSource": "mainService",

"settings": {

"defaultBindingMode": "TwoWay",

"defaultCountMode": "Inline",

"useBatch": true

}

3.2.2.调用Function Import

在UI5控制器中调用Function Import，示例代码如下：

onCalculateDiscount: function() {
    var oModel = this.getView().getModel();
    var sPath = `/CalculateDiscount`;

    oModel.callFunction(sPath, {
        method: `GET`, // or `POST` depending on how the function import is defined in the OData service
        urlParameters: {
            ProductID: `123`,
            Quantity: `10`
        },
        success: function(oData, oResponse) {
            sap.m.MessageToast.show(`Discount calculated: ` + oData.Discount);
        },
        error: function(oError) {
            sap.m.MessageToast.show(`Error calculating discount`);
        }
    });
}

onCalculateDiscount: function() {

var oModel = this.getView().getModel();

var sPath = `/CalculateDiscount`;

oModel.callFunction(sPath, {

method: `GET`, // or `POST` depending on how the function import is defined in the OData service

urlParameters: {

ProductID: `123`,

Quantity: `10`

success: function(oData, oResponse) {

sap.m.MessageToast.show(`Discount calculated: ` + oData.Discount);

error: function(oError) {

sap.m.MessageToast.show(`Error calculating discount`);

}

});

}

4.四、获取DeepSeek API密钥

4.1.1. 登录DeepSeek开放平台

访问DeepSeek开放平台并登录（目前平台可能因高流量而暂时维护）。首次注册的用户会收到一些免费的tokens额度。

4.2.2. 创建并复制API Key

在DeepSeek开放平台左侧边栏中，找到 “API Keys” 选项，点击进入后创建一个新的API Key。创建完成后，将API Key复制并保存在安全且易于访问的地方，注意该密钥只会显示一次，若丢失需重新生成。

5.五、在SAPUI5中调用DeepSeek接口

5.1.1. 安装OpenAI SDK（DeepSeek API兼容OpenAI SDK）

在项目终端中运行命令 pip3 install openai（若使用Python）。

5.2.2. 配置模型参数

为保护API Key的安全性，可将其存储在环境变量中，以下是两种常见配置方法：

5.2.1.方法一：终端中临时添加环境变量

在终端中输入命令 export api_key="填入你的API Key"（该方法仅在当前终端会话中有效）。若希望永久添加，可将上述命令添加到~/.bashrc文件中。在Python脚本中，通过以下代码获取环境变量中的API Key：

import os
api_key = os.getenv('api_key')
base_url = "https://api.deepseek.com/v1"
chat_model = "deepseek-chat"

import os

api_key = os.getenv('api_key')

base_url = "https://api.deepseek.com/v1"

chat_model = "deepseek-chat"

5.2.2.方法二：创建.env文件

创建一个.env文件，并在其中写入以下内容（记得替换为你的API Key）：

1api_key="your_api_key"

1	1api_key="your_api_key"

在同一路径下创建Python脚本文件，并在代码中添加以下内容：

import os
from dotenv import load_dotenv
load_dotenv()
api_key = os.getenv('api_key')
base_url = "https://api.deepseek.com/v1"
chat_model = "deepseek-chat"

import os

from dotenv import load_dotenv

load_dotenv()

api_key = os.getenv('api_key')

base_url = "https://api.deepseek.com/v1"

chat_model = "deepseek-chat"

5.3.3. 调用DeepSeek API

使用以下代码调用DeepSeek API：

from openai import OpenAI
client = OpenAI(api_key=api_key, base_url=base_url)
response = client.chat.completions.create(
    model=chat_model,
    messages=&#91;
        {"role": "system", "content": "你是一个乐于助人的AI助手，能够帮助用户解决各种专业问题。"},
        {"role": "user", "content": "你好，介绍下你自己"}
    ],
    stream=False # 设置为True可启用流式输出
)
print("Model response:")
print(response.choices&#91;0].message.content)

from openai import OpenAI

client = OpenAI(api_key=api_key, base_url=base_url)

response = client.chat.completions.create(

model=chat_model,

messages=[

{"role": "system", "content": "你是一个乐于助人的AI助手，能够帮助用户解决各种专业问题。"},

{"role": "user", "content": "你好，介绍下你自己"}

stream=False # 设置为True可启用流式输出

)

print("Model response:")

print(response.choices[0].message.content)

6.六、开发聊天对话程序

6.1.1. 设计UI界面

在webapp/view/V_Main.view.xml文件中设计聊天界面，例如添加输入框和消息显示区域。示例代码如下：

&lt;mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="your.controller.name">
    &lt;Page title="Chat with DeepSeek">
        &lt;content>
            &lt;List id="chatList" items="{/messages}">
                &lt;items>
                    &lt;StandardListItem title="{sender}" description="{message}"/>
                &lt;/items>
            &lt;/List>
            &lt;Input id="inputMessage" placeholder="Type your message here" liveChange="onInputChange" />
            &lt;Button text="Send" press="onSendMessage" />
        &lt;/content>
    &lt;/Page>
&lt;/mvc:View>

<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="your.controller.name">

<items>

</items>

</List>

</content>

</Page>

</mvc:View>

6.2.2. 实现控制器逻辑

在对应的控制器文件中实现输入框输入和发送消息的逻辑，并调用DeepSeek API获取回复。示例代码如下：

sap.ui.define(&#91;
    "sap/ui/core/mvc/Controller",
    "openai"
], function (Controller, OpenAI) {
    "use strict";

    return Controller.extend("your.controller.name", {
        onInit: function () {
            this.oModel = new sap.ui.model.json.JSONModel({ messages: &#91;] });
            this.getView().setModel(this.oModel);
            this.client = new OpenAI({ api_key: "your_api_key", base_url: "https://api.deepseek.com/v1" });
        },
        onInputChange: function (oEvent) {
            this.sMessage = oEvent.getParameter("value");
        },
        onSendMessage: function () {
            var aMessages = this.oModel.getProperty("/messages");
            aMessages.push({ sender: "You", message: this.sMessage });
            this.oModel.setProperty("/messages", aMessages);

            this.client.chat.completions.create({
                model: "deepseek-chat",
                messages: &#91;
                    { "role": "system", "content": "你是一个乐于助人的AI助手，能够帮助用户解决各种专业问题。" },
                    { "role": "user", "content": this.sMessage }
                ],
                stream: false
            }).then(function (response) {
                var sResponseMessage = response.choices&#91;0].message.content;
                aMessages.push({ sender: "DeepSeek", message: sResponseMessage });
                this.oModel.setProperty("/messages", aMessages);
            }.bind(this)).catch(function (error) {
                console.error("Error calling DeepSeek API: ", error);
            });
        }
    });
});

sap.ui.define([

"sap/ui/core/mvc/Controller",

"openai"

], function (Controller, OpenAI) {

"use strict";

return Controller.extend("your.controller.name", {

onInit: function () {

this.oModel = new sap.ui.model.json.JSONModel({ messages: [] });

this.getView().setModel(this.oModel);

this.client = new OpenAI({ api_key: "your_api_key", base_url: "https://api.deepseek.com/v1" });

onInputChange: function (oEvent) {

this.sMessage = oEvent.getParameter("value");

onSendMessage: function () {

var aMessages = this.oModel.getProperty("/messages");

aMessages.push({ sender: "You", message: this.sMessage });

this.oModel.setProperty("/messages", aMessages);

this.client.chat.completions.create({

model: "deepseek-chat",

messages: [

{ "role": "system", "content": "你是一个乐于助人的AI助手，能够帮助用户解决各种专业问题。" },

{ "role": "user", "content": this.sMessage }

stream: false

}).then(function (response) {

var sResponseMessage = response.choices[0].message.content;

aMessages.push({ sender: "DeepSeek", message: sResponseMessage });