# LobsterWebIDE在线代码编辑器说明文档
**Repository Path**: lobsterboot/lobsterwebide_doc
## Basic Information
- **Project Name**: LobsterWebIDE在线代码编辑器说明文档
- **Description**: 编写LobsterBoot应用代码，包括Web端、移动端、API后端代码,采用TypeScript语言编写应用。
支持代码自动托管到Gitee，支持在线调试断言代码。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 1
- **Created**: 2023-11-01
- **Last Updated**: 2025-01-09
## Categories & Tags
**Categories**: Uncategorized
**Tags**: lobsterboot
## README
# LobsterWebIDE在线代码编辑器
## 介绍
WebIDE在线代码编辑器，编写LobsterBoot应用代码，包括Web端、移动端、API后端代码,采用TypeScript语言编写应用。
支持代码自动托管到Gitee，支持在线调试断言代码。
在线代码开发平台，也常被称为在线集成开发环境（IDE），提供了一种在网络浏览器中直接编写、测试和部署代码的方式。这种平台的价值体现在多个方面：
1. **便捷性**：
- 用户无需在本地安装和配置复杂的开发环境。
- 可以随时随地通过互联网访问，只要有浏览器即可。
2. **协作性**：
- 支持多人实时在线协作，提高团队工作效率。
- 可以实时查看其他开发者的代码更改和注释。
3. **跨平台**：
- 不受操作系统限制，开发者可以在任何设备上工作。
- 代码和项目文件存储在云端，便于跨平台使用。
4. **成本效益**：
- 减少了对本地硬件资源的需求，降低了维护成本。
- 许多在线IDE提供免费的基础服务，降低了入门门槛。
5. **即时反馈**：
- 能够快速测试代码，获得即时反馈。
- 集成了版本控制功能，方便代码的版本管理和回滚。
6. **插件和扩展**：
- 支持各种插件和扩展，可以根据需要定制开发环境。
- 提供了丰富的工具和库，增强开发能力。
7. **安全性**：
- 代码和数据存储在云端，有专业的安全措施保护。
- 可以设置访问权限，控制谁可以访问代码。
8. **环境一致性**：
- 确保所有开发者使用相同的开发环境，减少环境差异导致的问题。
- 便于部署和测试，因为开发环境与生产环境可以保持一致。
9. **教育和学习**：
- 适合教育和培训，学生和新手开发者可以快速开始学习编程。
- 提供了代码示例和教程，帮助用户学习新语言和技术。
10. **快速原型开发**：
- 适合快速构建和测试原型，加速开发流程。
- 可以快速迭代和调整，响应市场变化。
LobsterWebIDE【协同版】是一个在线代码开发平台，它支持多个应用和模板应用的开发，具备分支管理、代码提交日志记录等功能，这些都是在线代码开发平台价值的体现。通过这样的平台，开发者可以更高效、便捷地进行软件开发和协作。
## 系统部署
Docker拉取镜像运行
```shell
$ docker pull registry.cn-hangzhou.aliyuncs.com/kakake/lobsterwebide:latest
$ docker run -d -p 7774:80 -p 7224:7222 --restart=always --name lobsterwebide registry.cn-hangzhou.aliyuncs.com/kakake/lobsterwebide:latest
```
## 新建应用的流程
1. 在Gitee上新建应用的仓库
2. 在WebIDE新建应用，填写上面Gitee上的仓库名称，进行绑定
3. 初始化应用代码
4. 创建API控制器
5. 创建WebApp页面
6. 创建WeUIApp页面
7. 提交代码到Gitee仓库
8. 这样LobsterBoot服务就可以从Gitee上拉取应用最新代码进行发布
## 调试应用代码
### 在浏览器中调试后端API代码
1. 在浏览器输入chrome://inspect/#devices，配置地址localhost:7222
2. 将出现Remote Target#LOCALHOST，点击inspect打开DevTools界面
3. 打开调试应用界面
4. DevTools界面将自动进入断点，进行调试api代码
### 在VSCode中调试后端API代码
1. 打开VSCode，然后随便打开一个文件夹
2. 点击`Run and Debug` 菜单，然后点击链接`create a launch.json file`，选择`Node.js`后就默认创建文件`launch.json`
3. 修改`launch.json`内容
```json
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "attach",
"name": "webide",
"protocol": "inspector",
"address": "121.4.127.224",
"port": 7224
}
]
}
```
4. 点击Start按钮启动调试
5. 打开调试应用界面，填写你需要调试的api接口
6. 界面将自动进入断点，进行调试api代码
## 在线体验
演示地址：http://www.mcloudsoft.cn:7774/webide/appcode.html
登录密码：`Lobster@123456`
1. 代码编辑
