# appsmith集成

Appsmith 是一个开源的前端低代码平台，帮助快速构建内部工具。例如，仪表盘、工具箱、CMS以及其它能帮团队完成特定任务的工具

### appsmith特性

* 拖拽构建UI：像设计PPT一样，在网格画布上拖拽预制组件构建UI，无需掌握Html+CSS
* 简化前后端集成：支持多种数据源，快速为UI绑定数据
* JS扩展逻辑：支持用JS处理数据，定制复杂工作流

### 集成fireboom

appsmith 从前端切入，擅长界面构建，利用 sql 能够处理简单数据。但对于复杂业务逻辑，需要依赖API处理。**而API构建是Fireboom的强项，因此两者结合将进一步扩展appsmith的适用范围。**不仅适用内部系统开发，还能扩展到更多领域。

#### appsmith引入js库

appsmith支持[引入UMD格式的js库](https://docs.appsmith.com/core-concepts/writing-code/ext-libraries)，导入方式如下：

1. 点击Libraries->新建 icon
2. 输入js库url，点击 install
3. 使用库

<figure><img src="https://2707494476-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNx22Cp3wzkuW1siRbMwW%2Fuploads%2FHUBNTuc3SJmZCBvD9hmc%2Fimage.png?alt=media&#x26;token=2d288767-7b18-4c29-ba34-2c17c7dc97bc" alt=""><figcaption><p>appsmith引入js库</p></figcaption></figure>

#### Fireboom 生成JS-SDK

Fireboom支持生成UMD格式的客户端SDK—— [js-sdk](https://docs.fireboom.io/shi-yong-bu-shu-shang-xian/sdk-sheng-cheng/js-sdk "mention")。

1. 浏览模板市场，下载JavaScript client
2. 打开`js-client`，文件将生成到`./generated-sdk/js-client`
3. 查看js，访问：<http://localhost:9123/generated-sdk/js-client/index.umd.min.js>
4. 将上述链接填入appsmith的Add Js Libraries-> Library URL中，安装即可

<figure><img src="https://2707494476-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNx22Cp3wzkuW1siRbMwW%2Fuploads%2FoYgtLV9Efkz9swtd26tM%2Fimage.png?alt=media&#x26;token=f80dd897-4e47-428c-af1c-6351bcc7c887" alt=""><figcaption></figcaption></figure>

#### appsmith中使用Js-SDK

appsmith中有如下方式使用sdk，如：

**1，js object中使用**

```javascript
export default {
	async create(){
		let res=await FBClient.mutation.CreateT({input:{name:"sss",des:"des"}})
		console.log(res)
	},
	async get(){
		let res=await FBClient.query.GetT({input:{id:1}})
		console.log(res)
	}
}
```

**2，在组件中直接调用**

<figure><img src="https://2707494476-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNx22Cp3wzkuW1siRbMwW%2Fuploads%2FoJ3e9hiATYeYgHjOjnWK%2Fimage.png?alt=media&#x26;token=ea5d1318-3aa4-4cdd-9a2f-32409bb088fe" alt=""><figcaption></figcaption></figure>

FBClient更多用法，请参考 [js-sdk](https://docs.fireboom.io/shi-yong-bu-shu-shang-xian/sdk-sheng-cheng/js-sdk "mention")

### 总结

使用该方法可以将fireboom和appsmith集成在一起，充分发挥两者各自的优势。未来，希望将fireboom作为数据源直接集成到appsmith中，进一步提升开发体验。

参考：

* [appsmith简明教程](https://bar9vnf09af.feishu.cn/mindnotes/Bi5nbgcZtmACZfnAMN7c796lnfd)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.fireboom.io/zui-jia-shi-jian/appsmith-ji-cheng.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.