快速创建我的轻应用
我们提供CLI工具，通过命令行来帮助您快速创建项目。
建议使用 React 进行开发，平台已提供多个 React 的组件可以减少您的开发成本，当然您也可以选择其他框架进行开发。
使用前提
使用Node.js 18.0 及以上版本，通过在终端中执行以下命令查看Node.js版本：
node --version
创建项目
全局安装CLI工具
CLI工具仅需安装一次，后续可通过命令行来快速创建轻应用的脚手架，执行以下命令安装CLI工具：
npm install @ty-sdk/tingyun-cli -g
当CLI工具安装完成后，显示版本号代表安装完成，执行以下命令查看安装版本：
tingyun-cli -v
创建轻应用脚手架
在轻应用发布时，您需要指定运行环境（即观云平台的运行环境地址）。您可以在首次创建脚手架时指定运行环境，也可以在发布时指定。请在以下选项中选择一种创建方式（推荐使用第一种）：
1.创建脚手架并指定运行环境
执行以下命令：
tingyun-cli create <my_liteapp_id> -apiRoot <https://xxxx.tingyun.com>
注意
1.请将
<my_liteapp_id>替换为您的轻应用标识，该名称也将用作项目文件的名称，支持在项目中进行修改。
<my_liteapp_id>名称规范：仅允许使用英文字符、数字、下划线和横杠，最大长度为 30 个字符。2.请将
<https://xxxx.tingyun.com>替换为您的观云平台的运行环境地址（登录观云平台后，您可以在浏览器的地址栏中复制页面的根URL），示例：<https://xxxxx.tingyun.com>或<http://10.128.x.x:8085>请注意，您还可以在项目的
package.json文件中修改运行环境地址。
2.创建脚手架
执行以下命令创建轻应用的脚手架：
tingyun-cli create <my_liteapp_id>
注意
请将
<my_liteapp_id>替换为您的轻应用标识，该名称也将用作项目文件的名称，支持在项目中进行修改。
<my_liteapp_id>名称规范：仅允许使用英文字符、数字、下划线和横杠，最大长度为 30 个字符。
安装依赖
先进入项目目录
cd <my_liteapp_id>
在项目目录下，执行以下命令安装依赖：
pnpm install
或
npm install
调试轻应用
执行以下命令在本地启动应用进行调试：
npm run start
注意
构建过程预计耗时约一分钟。
如果您的轻应用接入了非基调听云平台中的数据，需上传校验轻应用的 token 信息。请查看权限控制以了解更多详情。
配置轻应用基本信息
在发布轻应用之前，您需要设定轻应用的应用名称和版本号等基本信息。
图标
如果不指定，将使用轻应用的默认图标。如果需要指定图标，请替换项目中 public 文件夹下的 logo.svg 文件。
- 仅限 svg 的图片格式，建议图片尺寸为 90*90 像素
基本信息
在项目的 package.json 文件中可以设置轻应用的基本信息。
-
轻应用名称（cnName）
-
中文环境的轻应用名称，必填， 默认为
我的轻应用 -
仅能输入中文、英文、数字，支持下划线、空格（中间）、横杠，不能包含其他特殊字符
-
最大输入 30 个字符
-
-
轻应用标识（name）
-
轻应用的唯一标识，同一应用的标识不能重复，必填，默认为创建脚手架时指定的名称
-
仅能输入英文、数字，支持下划线、横杠
-
最大输入 30 个字符
-
-
版本号（version）
-
必填
-
仅能输入英文、数字，支持下划线、横杠、小数点，不能包含其他特殊字符
-
最大输入 30 个字符
-
-
描述信息（description）
-
轻应用的描述信息，选填
-
最大输入 100 个字符
-
-
英文环境的轻应用名称（enName）
-
报表在英文环境下轻应用的名称，选填， 默认为轻应用标识
-
仅能输入中文、英文、数字，支持下划线、空格（中间）、横杠，不能包含其他特殊字符
-
最大输入 30 个字符
-
-
运行环境（apiRoot）
- 观云平台的运行环境，即观云报表地址，必填
- 示例：
<https://xxxxx.tingyun.com>或<http://10.128.x.x:8085>
发布应用
调试完成后，请您可以选择以下方式之一将轻应用上传到观云报表：
1.使用报表界面上传
生成ZIP文件
npm run build
注意
构建过程预计耗时约一分钟。
您可以在项目的根目录中找到以应用标识命名的ZIP文件，示例为
[my_liteapp_id].zip
上传我的轻应用
登录平台后，找到轻应用市场，点击列表上方的上 传即可上传您的轻应用程序，请确保上传的是生成的 ZIP 文件。
2.使用命令行方式上传
npm run deploy
注意
构建过程预计耗时约一分钟。
您可以在项目的根目录中找到以应用标识命名的ZIP文件，示例为
[my_liteapp_id].zip
验证
控制台中的我的专属是您个人定制的空间，放置您所有自定义的轻应用，点击应用图标即可开始数据探索。
权限控制
如果您的轻应用接入了非基调听云平台中的数据，需上传校验轻应用的 token 信息，此信息在轻应用删除后也可保留。
tingyunStateClient.setAppCredential(key,value);
如何使用基调听云 React 组件库
默认情况下，脚手架中已经集成了基调听云 React 组件库，您可以直接开始使用。如果您需要在其他项目中使用这些组件，请安装并引入 TY SDK。
安装组件
您可以选择以下方式之一安装基调听云 React 组件库 TY SDK：
1.npm 安装
要使用 TY SDK 组件，您可以通过 npm 包管理器进行安装。请执行以下命令：
npm install @ty-sdk/components --save
这将安装 TY SDK 组件并将其添加到您的项目依赖中。
2.yarn 安装
您也可以使用 yarn 包管理器来安装 TY SDK 组件。请执行以下命令：
yarn add @ty-sdk/components
这将使用 yarn 安装 TY SDK 组件到您的项目中。
3.pnpm 安装
如果您使用 pnpm 作为包管理器，可以执行以下命令安装 TY SDK 组件：
pnpm install @ty-sdk/components --save
这将安装 TY SDK 组件并将其添加到您的项目依赖中。
引入组件
安装完成后，通过以下方式引入具体组件并在项目中使用：
import { 具体组件 } from "@ty-sdk/components";
将 "具体组件" 替换为您需要的组件名称，然后您就可以在项目中使用了。
组件列表
- 表格（TyTable）
- 提示框（TyTooltip）
- 时间组件（TimeRangePicker）
- 空状态（TyEmpty）
使用示例
import { TyTable } from '@ty-sdk/components';
export default () => {
const columns: any[] = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
width: 200,
align: 'left',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
width: 100,
className: 'aaa',
sorter: (a: any, b: any) => a.type - b.type,
},
{
title: 'Address',
dataIndex: 'address',
key: 'address',
width: 300,
ellipsis: true,
},
{
title: 'Phone',
dataIndex: 'phone',
key: 'phone',
fixed: 'right',
align: 'center',
width: 100,
sorter: (a: any, b: any) => a.phone - b.phone,
},
{
title: 'Phone',
dataIndex: 'phone2',
key: 'phone2',
fixed: 'right',
},
];
const data = [
{
key: '1',
name: 'John Doe',
age: 32,
address: '123 Street, City',
phone: '1588553336',
phone2: '1588553336',
},
{
key: '2',
name: 'Jane Smith',
age: 28,
address: '456 Road, Town',
phone: '1588553336',
phone2: '1588553336',
},
{
key: '3',
name: 'Jane Smith',
age: 28,
address: '456 Road, Town',
phone: '1588553336',
phone2: '1588553336',
},
{
key: '4',
name: 'Jane Smith',
age: 28,
address: '456 Road, Town',
phone: '1588553336',
phone2: '1588553336',
},
];
return <TyTable columns={columns} dataSource={data} isColumnResize={true} />;
};