# LobsterWebIDE在线代码编辑器说明文档

**Repository Path**: lx159/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-25
- **Last Updated**: 2023-11-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

![](images/logo1.png)<br>
# LobsterWebIDE在线代码编辑器

## 介绍

WebIDE在线代码编辑器，编写LobsterBoot应用代码，包括Web端、移动端、API后端代码,采用TypeScript语言编写应用。 

支持代码自动托管到Gitee，支持在线调试断言代码。

## 系统部署

Docker拉取镜像运行

```shell
$ docker pull registry.cn-hangzhou.aliyuncs.com/kakake/lobsterwebide:latest
$ docker run -d -p 7774:80 -p 7224:7222 --restart=always --name lobsterboot registry.cn-hangzhou.aliyuncs.com/kakake/lobsterboot: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. 打开调试应用界面  
![](images/微信截图_20231101193346.png)<br>
4. DevTools界面将自动进入断点，进行调试api代码  
![](images/微信截图_20231010100802.png)<br>

### 在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代码
![](images/微信截图_20231118130712.png)<br>


## 在线体验

演示地址：http://www.mcloudsoft.cn:7774/webide/appcode.html  
登录密码：`Lobster@123456`


1.  代码编辑

![](images/微信截图_20231027204427.png)<br>