您可以通过 DTK 建立本地实例,开发和定制 Sterling Store Engagement 用户界面,以满足您的业务需求。
开发基于 Angular 18 的应用程序的最佳方法是在本地开发时使用 Angular CLI。 在本地开发功能部件后,可以在开发者工具箱或云环境中部署应用程序。
开始之前
确保已设置用户界面中间件。 目前,您必须下载开发 Sterling Store Engagement 所需的中间件。
过程
- 下载最新的开发者工具箱。
- 浏览 <runtime>/repository/eardata/isf/war/store-frontend-src 并复制 Sterling Store Engagement 源代码。
- 将源代码粘贴到临时目录。 例如, <WORKSPACE>/store-frontend-src,称为
<store_temp>。 package.json 存在于 <store_temp>中。 要管理源代码管理,请使用 <WORKSPACE>/store-frontend-src/extensions。 - 安装节点模块依赖关系。 转至
<store-temp> 文件夹,然后运行以下命令: - 运行以下命令将 node_modules 从 schematics 链接到 angular-cl。
ln -s <store-temp>/store-cli/schematics/node_modules <store-temp>/store-cli/node_modules
在此之前运行命令时,请确保使用绝对路径。
- 修改
app-config-overrides.json 文件以选取需要在本地运行的路径 (useRemote:false)。 缺省情况下,所有路由都从远程服务器运行。 要在本地运行所有路由,请设置 serveAllAppsFromLocal:true
例如,如果希望 app-shell、home、login、navigation-bar 和 backroom-pick 应用程序在本地运行,
app-config-overrides.json 文件将如图所示。
{
"name": "store-frontend",
"serveAllAppsFromLocal": false,
"remoteServerConfig": {
"hostName": "1.1.1.1",
"port": 9080,
"https": true
},
"routes": {
"app-shell": {
"useRemote": false
},
"login": {
"useRemote": false
},
"nav-bar": {
"useRemote": false
},
"home": {
"useRemote": false
},
"backroom-pick": {
"useRemote": false
}
}
}
- 修改
app-config-overrides.json 文件以选取需要在本地运行的路径 (useRemote:false)。 缺省情况下,所有路由都从远程服务器运行。 要在本地运行所有路由,请设置 serveAllAppsFromLocal:true - 测试自定义功能。
下一步
启动所有微前端应用程序后,可通过以下方式访问 Sterling Store Engagement URL : http://localhost:9000/isf/store-frontend/index.html
注意: 在开发过程中,如果您从本地
Sterling Store Engagement 应用程序登录到启用了
Store Inventory Management 的 Sterling
Store Engagement 应用程序,建议您在网络安全禁用模式下启动 Google Chrome 浏览器。 这是为了确保您的浏览器不会阻止从本地
Sterling Store Engagement 应用程序向
商店库存管理服务器发出的任何跨源 HTTP 请求。