快速开始 - 开发从未如此简单

• 1: SmartIDE CLI 快速开始
• 2: SmartIDE Server 快速开始
• 3: Node 快速启动教程
• 4: .NET 快速启动教程
• 5: Java 快速启动教程
• 6: Jupyter Notebook 快速启动教程

1 - SmartIDE CLI 快速开始

作为开发者，你无需了解什么是云，什么是容器，也无需学习复杂的docker命令，你所需要的就是学会一个简单的命令（smartide start），即可真正实现“一键启动”开发环境.

你也无需在本地安装IDE软件，只需要浏览器就够了。SmartIDE内置了Web版的vscode，你只需要打开浏览器就可以进行编码，使用智能提示，设置断点并且进行交互式单步调试，就如同使用一个全功能的IDE软件一样的体验。

以下为文档演示视频，视频长度4:40，无快进无剪辑。

准备工作

请参考 安装手册 完成 SmartIDE 工具的安装。

本地模式

本地模式允许用户在已经安装了Docker Desktop的本地开发机上，运行并管理运行在容器中的开发调试环境。这种模式下SmartIDE会根据代码库中预置的配置文件（位于 .ide/.ide.yaml）完成拉取开发容器镜像，启动容器，代码目录映射以及WebIDE的启动。

1. 一键启动

运行以下脚本一键启动 Boathouse计算器 应用的 集成开发环境(IDE) 。

• MacOS
• Windows

# 在 MacOS 上打开 终端应用(Terminal) 并复制粘贴本段脚本
smartide start https://gitee.com/idcf-boat-house/boathouse-calculator.git 

# 在 Windows 上打开 PowerShell 并复制粘贴本段脚本
smartide start https://gitee.com/idcf-boat-house/boathouse-calculator.git 

运行后的效果如下：

2. 编码调试

SmartIDE会自动启动内置的WebIDE，你会看到一个类似vscode的IDE窗口在你的默认浏览器中出现。

同时，SmartIDE会自动启动 npm install 脚本的运行，自动完成依赖包的获取和安装。

说明: npm是node.js的包管理器，npm install 的作用是获取应用所需要的依赖包。一般来说，为了能够正确运行 node.js 应用，你首先需要安装 node.js 的 sdk 环境，但是 SmartIDE 已经为完成了这个动作，作为开发者的你不再需要关心开发环境搭建的问题。

完成以上操作后，你可以直接点击 WebIDE 左侧的调试工具栏，启动调试。

你也可以像我一样在 /api/controllers/arithmeticController.js 文件的 第47行 设置一个断点，并用另外一个浏览器打开 http://localhost:3001 即可进入交互式调试状态。现在，你可以尝试在计算机中进行一些加减乘除的操作，当你点击 = 按钮的时候，代码中的断点就会被触发，应用进入暂停状态，IDE会自动聚焦到断点所在的代码行，如下图所示：

到这里，你已经完成了 Boathouse计算器示例应用 的开发调试过程，一切的操作就像在本地使用vscode一样的顺畅。

远程模式

远程模式允许用户通过SSH调度远程linux主机，并在远程主机上根据预置在代码库中的配置文件（文件位置：.ide/.ide.yaml）完成拉取开发容器镜像，启动容器，代码映射和启动容器内的WebIDE的一系列动作；在开发容器启动成功后，SmartIDE CLI（命令行工具）会作为驻守程序监听远程容器中开发的端口并将这些端口通过SSH隧道的方式转发到本地开发机上，允许用户通过localhost访问，达到“远程开发，本地体验”的目录。

使用远程模式也非常简单，只需要2个步骤

1. 准备远程主机

按照 Docker & Docker-Compose 安装手册 (Linux服务器) 准备远程linux主机

2. 启动环境

使用以下命令添加主机记录并启动SmartIDE环境

• MacOS
• Windows

# 在 MacOS 上打开 终端应用(Terminal) 并复制粘贴本段脚本
## 添加远程主机
smartide host add <ip地址> --username <用户名> --password <密码> --port 22
## 获取远程主机ID
smartide host list 
## 使用远程主机ID和git库地址启动SmartIDE远程开发环境
smartide start --host <远程主机ID> https://gitee.com/idcf-boat-house/boathouse-calculator.git 

# 在 Windows 上打开 PowerShell 并复制粘贴本段脚本
## 添加远程主机
smartide host add <ip地址> --username <用户名> --password <密码> --port 22
## 获取远程主机ID
smartide host list 
## 使用远程主机ID和git库地址启动SmartIDE远程开发环境
smartide start --host <远程主机ID> https://gitee.com/idcf-boat-house/boathouse-calculator.git 

远程模式启动后的使用体验与本地模式保持一致。

各类技术栈的操作入口

Boathouse计算器 是一个已经适配好 SmartIDE 开发环境的应用，如果你希望了解如何使用 SmartIDE 从头创建一个全新的项目，我们还为你准备了一系列针对不同开发技术栈的快速启动教程：

• Node.JS
• Golang
• Java
• .NetCore
• Python
• PHP
• C/C++

开源项目项目SmartIDE适配

我们还对很多 开源项目 进行了SmartIDE适配，你可以通过 示例应用 获取更多示例应用的体验文档，示例部分所展示的全部都是真实项目的开发场景，包括 SmartIDE 本身其实都是使用 SmartIDE 开发环境进行开发的。

这些示例包括：

• IDCF黑客马拉松Boathouse应用前后端联调
• 使用SmartIDE开发smartide.dev网站
• 使用SmartIDE开发smartide-cli应用
• 使用SmartIDE开发smartide开发容器镜像
• Vue Element Admin
• Element UI
• iTop

更多示例会持续更新

已有私有项目SmartIDE适配

如果是自己或团队内的私有项目，也可以使用SmartIDE提供的开发容器进行开发。具体适配方式请参考 项目适配 文档

感谢您对SmartIDE的支持：Be a Smart Developer，开发从未如此简单。

2 - SmartIDE Server 快速开始

概述

SmartIDE Server 为开发团队提供对开发环境的统一在线管理和访问能力，企业管理者可以通过SmartIDE Server为开发团队提供统一的一致的开发环境，大幅降低开发者花费在搭建环境上的时间消耗，让开发者可以将更多的精力投入到业务需求开发和技术方案改进上。更为重要的是，SmartIDE Server提供了完全受控的开发测试环境，管理者可以通过工作区策略对开发环境进行管理，比如：

• 端到端的代码安全：通过策略配置实现开发者只能通过浏览器修改和发布代码，完全避免开发者将代码下载到个人开发机上；
• 质量左移：通过指定制定策略在开发者提交代码之前就进行质量门禁的验证，从而彻底杜绝有问题的代码进入代码仓库；
• 优化DevOps流水线：通过提供与生产环境一致的开发测试环境部署方式，大幅降低DevOps流水线的复杂度，并通过将更多的串行的流水线环节集成到开发编码过程中，大幅缩短流水线运行时间并提高部署成功率。

SmartIDE Server 使用容器和云原生技术，可以部署在任何标准的虚拟化或者k8s平台上，企业云管理员可以自行完成SmartIDE Server的私有部署，并将企业内部开发团队的开发测试环境纳入企业云的管理之中。开发测试环境一旦纳入云平台的管理可以有效降低企业内部开发测试环境的管理复杂度，提高资源利用率；容器化开发测试环境可以根据开发者的需要动态的创建或者销毁环境，为开发测试环境提供弹性伸缩能力。与当前企业中大量使用的基于VDI的开发测试环境管理模式相比，基于容器的开发测试环境将大幅提高资源利用率，同时大幅降低成本。

对于开发者而言，使用SmartIDE Server可以完全消除开发者搭建环境的技能要求，避免因为环境不一致或者工具/SDK版本，安装配置问题所造成的时间浪费，让开发者将更多的精力投入到更有价值的应用开发中去。对于团队而言，当一个团队成员开始使用SmartIDE以后，其他开发者就可以完全重用这个环境，而不必重新配置；如果一名成员变更了环境配置，其他的成员也可以通过一个简单的git pull就可以获取到这个变更后的开发环境。

操作视频

为了便于大家更直观地了解和使用SmartIDE Server，我们在B站提上提供了视频供大家参考，视频如下：

跳转到B站： https://www.bilibili.com/video/av553362128

操作手册

使用SmartIDE你可以在5分钟内完成任何开发语言，任何代码的开发环境搭建。以下，我们以IDCF Boathouse 计算器应用为例，说明如何使用SmartIDE Server进行这个应用的开发和调试过程。

1. 登录

首先，让我们登录到SmartIDE Server，我们提供了托管的SmartIDE Server环境，当前这个环境仍然处于内测阶段，账号需要我们的管理员为您创建，暂时不开放自助注册功能。如果您需要访问我们托管的SmartIDE Server，可以扫描以下二维码加入我们的社区早鸟计划。

a. 请访问SmartIDE Server版网站：http://dev.smartide.cn/，登录Server版：

b. 输入已分配的账号、密码，以及验证码，点击【登录】：

c. 登录后，进入SmartIDE首页：

到这里，我们就完成了SmartIDE Server端登录。

d. CLI客户端登录

说明：当前，SmartIDE仅支持通过cli建立安全隧道（SSH Tunnel）的方式的方式访问工作区，所以这里我们需要安装并通过CLI客户端完成登录，连接Server。未来我们会提供完全在线的方式，这样就可以通过一个简单的URL来访问你的工作区。
CLI具体安装操作见：客户端安装。

通过 se connect 命令连接server工作区：

这样我们本地计算机就通过CLI客户端与Server的建立起连接了。

2. 创建资源

资源是SmartIDE Server用于管理主机和k8s的方式，用户可以将自己的主机或者k8s集群加入到SmartIDE Server中进行统一管理。一旦资源纳入SmartIDE Server的管理，就可以通过以下的工作区管理功能在对应的资源上运行容器化开发环境，并通过WebIDE的方式进行访问。

说明：当前仍未开放k8s资源的管理特性，请持续关注我们的开发进展，我们会在第一时间通知您最新的特性列表。

a. 点击左侧【资源管理】菜单，进入资源管理列表后，点击【新增Linux主机】按钮，添加主机资源：

说明：添加主机前，需要主机已完成 SmartIDE初始化配置 。

在这里，需要填写以下信息：

• 名称：自定义资源的名称，后续在新建工作区时，可以选择工作区所部署的资源。
• 资源类型：选择Linux主机。
• HOST：已准备好的Linux主机IP地址。
• 用户名/密码：已配置好SmartIDE初始化环境的主机用户名密码。不推荐使用root账号。

填写完毕后，点击【确定】按钮。

b. 创建成功后，列表中，可以看到刚刚添加的记录。

3. 创建并连接在线工作区，进行编码及调试

工作区是SmartIDE中用于管理开发环境的单元，每个代码版本对应一个工作区。当你完成了资源创建后，就可以通过工作区管理，在这些资源上创建工作区了。

注意：我们使用的Boathouse计算器中已经适配了SmartIDE工作区，如果你需要在SmartIDE中运行其他代码的开发环境，请参考 项目适配 文档。

a. 资源创建完毕后，点击【工作区管理】，进入工作区列表，此时点击【新增工作区】按钮。

这里输入工作区名称，选择刚刚建立的主机资源，并且输入git克隆地址，点击【确定】按钮。

b. 新增工作区后，在工作区列表中查看到工作区记录及其运行状态。点击工作区【详情】按钮，进入工作区。

c. 工作区详情中，我们可以看到工作区已经处于部署之中，并且会刷新状态。启动成功后，工作区变为【已启动】状态，并且因为我们在项目中通过SmartIDE配置文件.ide.yaml进行了IDE及端口声明，所以可以明确地看到工作区要对应的IDE图标以及应用访问地址，如下图所示：

d. 点击IDE图标，打开WebIDE界面，如下图：

e. 这时，就可以在打开的WebIDE界面中，像使用本地IDE那样，进行代码的开发以及调试了：

说明：有关如何在WebIDE中开发和调试Node.js应用的方法，请参考 cli快速启动 和 node快速启动 文档。

私有化部署

SmartIDE Server提供私有化部署，你可以在任何公有云/私有云，甚至虚拟机上完成私有部署。有关私有部署的详细操作手册，请持续关注此文档。

感谢您对SmartIDE的支持：Be a Smart Developer，开发从未如此简单。

3 - Node 快速启动教程

SmartIDE内置了node.js开发环境模板，你可以通过一个简单的指令创建带有WebIDE的开发环境，并立即开始编码和调试。

如果你还没有完成SmartIDE安装，请参考 SmartIDE 安装手册 安装SmartIDE命令行工具。

说明：SmartIDE的命令行工具可以在Windows、MacOS和Linux操作系统上运行，对大多数命令来说，操作是完全一致的。本文档中虽然使用的是MacOS上的截图，但是其他操作系统环境的所有日志和工作状态完全一致。对于脚本格式有区别的地方，我们会同时提供2套脚本。

VSCode

1. 创建开发环境

运行以下命令创建node开发环境：

# 在 MacOS/Windows 上打开 终端（Terminal）或者 PowerShell 应用
# 执行以下命令
mkdir sample-node-vscode 
cd sample-node-vscode  
smartide new node -T vscode

运行后的效果如下，你可以通过命令窗口中的日志详细了解 SmartIDE 的启动过程，当 SmartIDE 启动完毕之后，会自动打开浏览器窗口并导航 WebIDE 界面。

启动WebIDE内置的Terminal

后续的操作我们会通过 WebIDE 内置的 Terminal 来完成，默认情况下 Web Terminal 应该已经自动打开，如果没有的话，可以通过 WebIDE 内置菜单的 Terminal | New Terminal 打开新的 Web Terminal 窗口。

Web Terminal 开启后如下图所示：

2. 创建并配置项目

注意：如果没有特别提示，后续的命令都是在这个 Web Terminal 中运行的。

运行以下命令将 node 包管理器 npm 的源地址设置到国内淘宝镜像，这样可以明显改善后续的操作流畅性。

npm config set registry https://registry.npmmirror.com

运行以下命令安装 express 脚手架工具并创建 node express 项目基础代码结构

npm install -g express-generator
express --view=pug myapp

执行完毕后的效果如下，左侧文件管理器里面已经出现了 myapp 文件夹，并在其中创建了 node express 应用的基础代码结构，右侧 Terminal 窗口中列出了创建过程的日志信息。

使用以下内容对 /myapp/package.json 文件进行全文替换，这里我们设置了几个关键配置

• 设置了 npm start 启动脚本使用 production 环境变量和 3001 端口
• 设置了 npm run dev 启动脚本使用 development 环境变量、 3001 端口，并且使用 nodemon 工具提供更好的调试体验

{
  "name": "myapp",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "NODE_ENV=production PORT=3001 node ./bin/www",
    "dev": "NODE_ENV=development PORT=3001 nodemon --inspect --exec node ./bin/www"
  },
  "dependencies": {
    "cookie-parser": "~1.4.4",
    "debug": "~2.6.9",
    "express": "~4.16.1",
    "http-errors": "~1.6.3",
    "morgan": "~1.9.1",
    "pug": "2.0.0-beta11",
    "nodemon": "~2.0.15"
  }
}

创建 /.vscode/launch.json 文件，并写入如下内容：

注意：.vscode 目录一定要放置在工作区根目录中

• 此文件为 vscode 的调试器启动配置文件，因此我们的代码结构兼容使用vscode桌面版直接进行开发调试
• 配置了 debugger 的启动命令为 package.json 所定义的 npm run dev 脚本

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch via NPM",
            "type": "node",
            "request": "launch",
            "cwd": "${workspaceFolder}/myapp/",
            "runtimeExecutable": "npm",
            "runtimeArgs": ["run","dev"],
            "port": 9229 
        }
    ]
}

现在我们可以运行脚本完成 npm 依赖包的安装

cd myapp
npm install

运行后的效果如下：

3. 开发调试

完成以上配置之后，你的代码已经完全准备好，可以开始进行编码调试了。

在 /myapp/routes/users.js 文件的 第6行 代码处 单击设置断点

点击 左侧菜单栏 ｜ 调试按钮 ｜ 点击 启动按钮 启动交互式调试

启动调试后，请注意 smartide 的日志输出，SmartIDE 会在后台持续监控容器内的进程情况，并将所有端口转发到 localhost 上

现在你可以开启一个新的浏览器，按照日志中所提示的 3001 端口，打开 http://localhost:3001，就可以访问这个应用了。进入交互式调试状态的 SmartIDE 开发环境如下图：

现在，让我们打开 http://localhost:3001/users 以便触发我们之前所设置的断点，注意下图中的几个关键点

1. 通过打开 http://localhost:3001/users 这个地址触发我们预设的断点
2. 将鼠标移动到特定的变量上以后，IDE 会自动加载当前变量的结构体以及赋值状态（实时），方便开发者观察运行时状态
3. Variables (变量) 窗口实时显示当前运行时内的变量状态
4. Call Stack (调用堆栈) 窗口实时显示当前运行时堆栈状态

保持以上调试状态，直接对代码进行修改，打开 /myapp/routes/users.js 文件并将 第6行 按下图进行修改，修改完成后保存文件，并按下 调试控制拦 上的 继续按钮

此时，你可以看到左侧应用运行窗口中已经按照你的修改自动加载了修改后的代码。

此功能借助 nodemon 对代码文件进行性监控，并在检测到改动的时候自动进行重新编译；以上我们所配置的 package.json 和 launch.json 的配置是实现这一场景的关键性配置。如果你发现你的环境无法完成以上操作，请仔细检查这两个文件的内容。

至此，我们已经使用 SmartIDE 完成了一个 Node Express 应用程序的创建，配置和编码调试过程。

4. 提交并分享

SmartIDE 环境中已经内置了 Git 的支持，你可以点击 菜单栏左侧 ｜ 源代码管理 ｜ 点击 Initialize Repository 按钮 将当前工作区初始化成一个 Git代码库。

在 提交注释 中填写 使用SmartIDE创建，然后点击 提交按钮

点击 Remote | Add Remote 按钮，添加一个远端 Git库 地址。SmartIDE 支持任何Git服务，包括：GitHub, Gitlab, Azure DevOps, Gitee 等等。

这时，我们可以将创建的这份代码推送到了类似Gitee的代码仓库上，代码库地址类似如下 https://gitee.com/smartide/sample-node-vscode

至此，我们已经使用 SmartIDE 完成了一个 Node Express 应用从环境搭建，创建基础代码结构，配置调试环境，完成编码开发到提交代码的全过程。

现在可以将你的代码库发送给其他的小伙伴，让他通过以下指令一键启动你的应用。

smartide start https://gitee.com/smartide/sample-node-vscode

是不是很爽！

JetBrains WebStorm

1. 新建开发环境

运行以下命令创建React前端项目开发环境：

mkdir sample-node-webstorm
cd sample-node-webstorm
smartide new node -T webstorm

运行后的效果如下，你可以通过命令窗口中的日志详细了解 SmartIDE 的启动过程，当 SmartIDE 启动完毕之后，会自动打开浏览器窗口并导航 WebIDE 界面。

2. 创建并配置项目

• 点击创建项目

这里我们选择创建一个React 前端项目，注意修改项目默认保存的路径和Node版本

SmartIDE提供的WebStorm镜像中，集成了三个版本的NodeJS和nvm，分别为：V14.17.6(默认)、V12.22.7、V16.7.0, 如果要切换node版本，可以使用nvm指令，比如如果想切换到V16.7.0,可以在Terminal输入命令：nvm use 16.7.0

点击创建后，WebStorm 会自动下载依赖包，等待下载完。

国内环境有可能会下载失败，可能需要修改npm registry 为国内淘宝源。

启动WebIDE内置的Terminal

后续的操作我们会通过 WebIDE 内置的 Terminal 来完成，点击窗口底部的 Terminal 即可打开命令行窗口

注意：如果没有特别提示，后续的命令都是在这个 Web Terminal 中运行的。

运行以下命令将 node 包管理器 npm 的源地址设置到国内淘宝镜像，这样可以明显改善后续的操作流畅性。

npm config set registry https://registry.npmmirror.com
npm config get registry

如果项目初始完成后，可以看到以下内容，这时可以启动项目进行预览了。启动前，先打开文件app.tsx，添加一段代码:Hello SmartIDE!

3. 启动项目

然后在Terminal输入启动命令：PORT=3001 npm start

等启动后，可以看到以下内容，在本机浏览器输入：http://localhost:3001/ , 即可查看Web应用

4. 提交并分享

先初始化git仓库

在 提交注释 中填写 使用SmartIDE创建，然后点击 提交按钮

添加一个远端 Git库 地址。SmartIDE 支持任何Git服务，包括：GitHub, Gitlab, Azure DevOps, Gitee 等等。

最后推送代码

这时，我们可以将创建的这份代码推送到了类似Gitee的代码仓库上，代码库地址类似如下 https://gitee.com/smartide/sample-node-webstorm

至此，我们已经使用 SmartIDE 完成了一个React前端 应用从环境搭建，创建基础代码结构，完成编码开发到提交代码的全过程。

现在可以将你的代码库发送给其他的小伙伴，让他通过以下指令一键启动你的应用。

smartide start https://gitee.com/smartide/sample-node-webstorm

是不是很爽！

OpenSumi

1. 创建开发环境

运行以下命令创建node开发环境：

# 在 MacOS/Windows 上打开 终端（Terminal）或者 PowerShell 应用
# 执行以下命令
mkdir sample-node-opensumi 
cd sample-node-opensumi 
smartide new node -T opensumi

运行后的效果如下，你可以通过命令窗口中的日志详细了解 SmartIDE 的启动过程，当 SmartIDE 启动完毕之后，会自动打开浏览器窗口并导航 WebIDE 界面。

启动WebIDE内置的Terminal

后续的操作我们会通过 WebIDE 内置的 Terminal 来完成，默认情况下 Web Terminal 应该已经自动打开。

Web Terminal 开启后如下图所示：

2. 创建并配置项目

注意：如果没有特别提示，后续的命令都是在这个 Web Terminal 中运行的。

运行以下命令将 node 包管理器 npm 的源地址设置到国内淘宝镜像，这样可以明显改善后续的操作流畅性。

npm config set registry https://registry.npmmirror.com

运行以下命令安装 express 脚手架工具并创建 node express 项目基础代码结构

npm install -g express-generator
express --view=pug myapp

执行完毕后的效果如下，左侧文件管理器里面已经出现了 myapp 文件夹，并在其中创建了 node express 应用的基础代码结构，右侧 Terminal 窗口中列出了创建过程的日志信息。

使用以下内容对 /myapp/package.json 文件进行全文替换，这里我们设置了几个关键配置

• 设置了 npm start 启动脚本使用 production 环境变量和 3001 端口
• 设置了 npm run dev 启动脚本使用 development 环境变量、 3001 端口，并且使用 nodemon 工具提供更好的调试体验

{
  "name": "myapp",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "NODE_ENV=production PORT=3001 node ./bin/www",
    "dev": "NODE_ENV=development PORT=3001 nodemon --inspect --exec node ./bin/www"
  },
  "dependencies": {
    "cookie-parser": "~1.4.4",
    "debug": "~2.6.9",
    "express": "~4.16.1",
    "http-errors": "~1.6.3",
    "morgan": "~1.9.1",
    "pug": "2.0.0-beta11",
    "nodemon": "~2.0.15"
  }
}

创建 /.sumi/launch.json 文件，并写入如下内容：

注意：.sumi 目录一定要放置在工作区根目录中

• 此文件为 opensumi 的调试器启动配置文件
• 配置了 debugger 的启动命令为 package.json 所定义的 npm run dev 脚本

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch via NPM",
            "type": "legacy-node",
            "request": "launch",
            "cwd": "${workspaceFolder}/myapp/",
            "runtimeExecutable": "npm",
            "runtimeArgs": ["run","dev"],
            "port": 9229 
        }
    ]
}

现在我们可以运行脚本完成 npm 依赖包的安装

cd myapp
npm install

运行后的效果如下：

3. 开发调试

完成以上配置之后，你的代码已经完全准备好，可以开始进行编码调试了。

在 /myapp/routes/users.js 文件的 第6行 代码处 单击设置断点

点击 左侧菜单栏 ｜ 调试按钮 ｜ 点击 启动按钮 启动交互式调试

启动调试后，请注意 smartide 的日志输出，SmartIDE 会在后台持续监控容器内的进程情况，并将所有端口转发到 localhost 上

现在你可以开启一个新的浏览器，按照日志中所提示的 3001 端口，打开 http://localhost:3001，就可以访问这个应用了。进入交互式调试状态的 SmartIDE 开发环境如下图：

现在，让我们打开 http://localhost:3001/users 以便触发我们之前所设置的断点，注意下图中的几个关键点

1. 通过打开 http://localhost:3001/users 这个地址触发我们预设的断点
2. 将鼠标移动到特定的变量上以后，IDE 会自动加载当前变量的结构体以及赋值状态（实时），方便开发者观察运行时状态
3. Variables (变量) 窗口实时显示当前运行时内的变量状态
4. Call Stack (调用堆栈) 窗口实时显示当前运行时堆栈状态

至此，我们已经使用 SmartIDE 完成了一个 Node Express 应用程序的创建，配置和编码调试过程。

4. 提交并分享

SmartIDE 环境中已经内置了 Git 的支持，你可以点击 菜单栏左侧 ｜ 源代码管理 ｜ 点击 Initialize Repository 按钮 将当前工作区初始化成一个 Git代码库。

在 提交注释 中填写 使用SmartIDE创建，然后点击 提交按钮

点击 Remote | Add Remote 按钮，添加一个远端 Git库 地址。SmartIDE 支持任何Git服务，包括：GitHub, Gitlab, Azure DevOps, Gitee 等等。

至此，我们已经使用 SmartIDE 完成了一个 Node Express 应用从环境搭建，创建基础代码结构，配置调试环境，完成编码开发到提交代码的全过程。

这时，我们可以将创建的这份代码推送到了类似Gitee的代码仓库上，代码库地址类似如下 https://gitee.com/smartide/sample-node-opensumi

现在可以将你的代码库发送给其他的小伙伴，让他通过以下指令一键启动你的应用。

smartide start https://gitee.com/smartide/sample-node-opensumi

是不是很爽！

远程开发

上面我们已经使用SmartIDE的本地工作区模式完成了一个应用的创建和开发过程，这个过程和你所熟悉的开发模式有2个区别，1）我们使用了VSCode/Webstorm/OpenSumi WebIDE；2）开发环境全部通过容器获取并运行。

在这个过程中你的项目代码也已经具备了远程开发的能力，你可以按照以下文档中的说明使用任意一种远程工作区来开发调试你的应用

• 远程主机工作区
• k8s工作区
• Server工作区

另外，你也可以通过VSCode或者JetBrains内置的远程开发模式进行Hybird模式的远程开发，具体请参考

• IDE远程开发操作手册

感谢您对SmartIDE的支持：Be a Smart Developer，开发从未如此简单。

4 - .NET 快速启动教程

SmartIDE内置了.NET 6开发环境模板，你可以通过一个简单的指令创建带有WebIDE的开发环境，并立即开始编码和调试。

如果你还没有完成SmartIDE安装，请参考 SmartIDE 安装手册 安装SmartIDE命令行工具。

说明：SmartIDE的命令行工具可以在Windows和MacOS操作系统上运行，对大多数命令来说，操作是完全一致的。本文档中虽然使用的是MacOS上的截图，但是Windows环境的所有日志和工作状态完全一致。对于脚本格式有区别的地方，我们会同时提供2套脚本。

VSCode

1. 创建开发环境

运行以下命令创建.NET 6开发环境：

# 在 MacOS/Windows 上打开 终端（Terminal）或者 PowerShell 应用
# 执行以下命令
mkdir sample-dotnet-vscode 
cd sample-dotnet-vscode
smartide new dotnet -T vscode

运行后的效果如下，通过命令窗口中的日志详细了解SmartIDE的 启动过程，会自动打开浏览器窗口并导航到VSCode界面，输入

#检查dotnet sdk 版本
dotnet --version

你可以看到dotnet sdk 6.0已经安装完毕。

2. 创建ASP.NET Core minimal web API 项目

基于刚才搭建的环境中已经集成了dotnet sdk，现在只需要打开VS Code编辑器的命令行终端执行如下指令来初始化一个基于 ASP.NET Core 的minimal web API项目

# 初始化dotnet minimal web api 项目
dotnet new webapi -minimal -o TodoApi

执行成功后Web Api项目已经初始化成功了如下图：

打开VS Code 命令终端执行如下命令安装EntityFrameworkCore工具包：

# 访问TodoApi项目文件夹
cd TodoApi
# 安装Nuget包（Microsoft.EntityFrameworkCore.InMemory）
dotnet add package Microsoft.EntityFrameworkCore.InMemory
# 安装Nuget包（Microsoft.AspNetCore.Diagnostics.EntityFrameworkCore）
dotnet add package Microsoft.AspNetCore.Diagnostics.EntityFrameworkCore

修改Program.cs文件，代码如下：

using Microsoft.EntityFrameworkCore;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
// Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();
builder.Services.AddDbContext<TodoDb>(opt => opt.UseInMemoryDatabase("TodoList"));
builder.Services.AddDatabaseDeveloperPageExceptionFilter();

var app = builder.Build();

// Configure the HTTP request pipeline.
app.UseSwagger();
app.UseSwaggerUI();

app.MapGet("/", () => "Hello World!");

app.MapGet("/todoitems", async (TodoDb db) =>
    await db.Todos.ToListAsync());

app.MapGet("/todoitems/complete", async (TodoDb db) =>
    await db.Todos.Where(t => t.IsComplete).ToListAsync());

app.MapGet("/todoitems/{id}", async (int id, TodoDb db) =>
    await db.Todos.FindAsync(id)
        is Todo todo
            ? Results.Ok(todo)
            : Results.NotFound());

app.MapPost("/todoitems", async (Todo todo, TodoDb db) =>
{
    db.Todos.Add(todo);
    await db.SaveChangesAsync();

    return Results.Created($"/todoitems/{todo.Id}", todo);
});

app.MapPut("/todoitems/{id}", async (int id, Todo inputTodo, TodoDb db) =>
{
    var todo = await db.Todos.FindAsync(id);

    if (todo is null) return Results.NotFound();

    todo.Name = inputTodo.Name;
    todo.IsComplete = inputTodo.IsComplete;

    await db.SaveChangesAsync();

    return Results.NoContent();
});

app.MapDelete("/todoitems/{id}", async (int id, TodoDb db) =>
{
    if (await db.Todos.FindAsync(id) is Todo todo)
    {
        db.Todos.Remove(todo);
        await db.SaveChangesAsync();
        return Results.Ok(todo);
    }

    return Results.NotFound();
});

app.Run();

class Todo
{
    public int Id { get; set; }
    public string? Name { get; set; }
    public bool IsComplete { get; set; }
}

class TodoDb : DbContext
{
    public TodoDb(DbContextOptions<TodoDb> options)
        : base(options) { }

    public DbSet<Todo> Todos => Set<Todo>();
}

继续执行如下命令确保当前项目初始化正确：

# 编译dotnet TodoApi项目
dotnet build
# 启动dotnet TodoApi项目
dotnet run

如果输出结果如下图，说明当前初始化项目能编译通过并且可以正常启动

通过启动项目输出的日志了解当前初始化项目默认设置的端口为7163与5105 与SmartIDE初始化的环境开放的端口不一致，访问.ide文件夹下的.ide.yaml

你会看到端口是可以通过当前文件进行配置的，这里默认开放的端口如下：

• 6822映射容器的22端口用于ssh连接访问
• 6800映射容器的3000端口用于web ide窗口访问
• 5000映射容器的5000端口用于对你当前开发项目的访问

访问TodoApi项目下的Properties文件夹下的launchSettings.json文件

修改 applicationUrl 属性如下：

"applicationUrl": "http://0.0.0.0:5000",

由于localhost指的是127.0.0.1是一个回环地址，这个地址发出去的信息只能被自己接受，所以宿主机是无法通过这个IP地址访问进来的，0.0.0.0表示的是所有的IPV4地址，如果当前的宿主机有多个IP地址，并且0.0.0.0开放了5000端口，那么该端口均可以被这些IP访问到，再次启动项目，访问地址 http://localhost:5000/swagger 如下图：

3. 开发调试

通过之前的操作我们已经可以对项目进行编译运行的操作了，想要对当前项目进行调试操作还需要做额外配置，点击 VS Code 的 Run and Debug 中的 create a launch.json file 按钮如下图：

点击后并选择 .NET 5+ and .NET Core，执行完上述操作后会创建一个名为.vscode的文件夹里面包含两个文件如下图：

修改 vscode文件夹下的 launch.json 文件中的args属性如下：

 "args": ["--urls","http://0.0.0.0:5000"],

回到 Run and debug 页面点击Run and debug 按钮，VS code会出现 Start Debugging 按钮点击它或者按F5键即可进入该项目的调试模式，如下图：

设置调试断点，如下图：

访问swagger页面触发标记断点的api接口，访问 http://0.0.0.0:5000/ 可以看到当前的Http请求停止在了已设置的断点

之前添加的代码是通过minimal api 完成的增删改查的操作，触发Post/ todoitems 的api可以完成插入数据的操作如下图：

通过触发api Get/ todoitems可以直接查询到之前插入过的数据，如下图：

JetBrains Rider

JetBrains Rider 是由JetBrains公司开发的一个跨平台的.NET IDE工具，不同于VSCode，JetBrains Rider构建.Net 项目并不需要单独配置调试环境

1. 新建开发环境

运行以下命令创建基于JetBrains Rider的.Net环境

mkdir sample-dotnet-rider
cd sample-dotnet-rider
smartide new dotnet -T rider

运行后效果如下：

然后根据配置向导逐一完成操作，最终会到配置Licenses的页面如下图：

到这里你需要登录你自己的Jetbrains 账号（第一次使用Jetbrains 软件的用户会有一年的免费试用期），配置完如下图：

2. 创建ASP.NET Core Web Api项目

点击New Solution 选择ASP.NET Core Web Application选项，由于Rider目前并未集成minimal web api类型，因此这里项目类型选择Web Api如下图：

点击create 创建项目，操作完成后如下图：

3. 开发调试

编译项目确保默认初始化项目没有问题，点击Build Solution编译项目操作如下图：

编译成功后如下图：

与配置基于VS Code的.NET 环境一样我们需要确认当前SmartIDE开发环境的配置端口信息，访问宿主机的sample-dotnet-rider文件夹下的.ide文件夹中的.ide.yaml文件如下图：

通过ide.yaml文件确认将默认初始化的项目端口设置为5000即可，修改项目中的Properities文件夹中的launchSettings.json文件如下图：

修改 applicationUrl 属性如下：

"applicationUrl": "http://0.0.0.0:5000",

修改完成后点击Debug进入调试模式，访问该项目的Swagger页面并触发Api WeatherForecast如下图：

远程开发

上面我们已经使用SmartIDE的本地工作区模式完成了一个应用的创建和开发过程，这个过程和你所熟悉的开发模式有2个区别，1）我们使用了WebIDE；2）开发环境全部通过容器获取并运行。

在这个过程中你的项目代码也已经具备了远程开发的能力，你可以按照以下文档中的说明使用任意一种远程工作区来开发调试你的应用

• 远程主机工作区
• k8s工作区
• Server工作区

另外，你也可以通过VSCode或者JetBrains内置的远程开发模式进行Hybird模式的远程开发，具体请参考

• IDE远程开发操作手册

感谢您对SmartIDE的支持：Be a Smart Developer，开发从未如此简单。

5 - Java 快速启动教程

SmartIDE内置了Java开发环境模板，你可以通过一个简单的指令创建带有WebIDE的开发环境，并立即开始编码和调试。

如果你还没有完成SmartIDE安装，请参考 SmartIDE 安装手册 安装SmartIDE命令行工具。

说明：SmartIDE的命令行工具可以在Windows和MacOS操作系统上运行，对大多数命令来说，操作是完全一致的。本文档中虽然使用的是MacOS上的截图，但是Windows环境的所有日志和工作状态完全一致。对于脚本格式有区别的地方，我们会同时提供2套脚本。

VSCode

完整操作视频

为了便于大家更直观地了解和使用SmartIDE创建Java环境，并开始Spring Web项目的开发和调试，我们在B站提上提供了视频供大家参考，视频如下：

跳转到B站： https://www.bilibili.com/video/av852887843

1. 创建开发环境

运行以下命令创建Java开发环境：

# 在 MacOS/Windows 上打开 终端（Terminal）或者 PowerShell 应用
# 执行以下命令
mkdir sample-java-vscode 
cd sample-java-vscode
smartide new java -T vscode

运行后的效果如下，你可以通过命令窗口中的日志详细了解 SmartIDE 的启动过程，当 SmartIDE 启动完毕之后，会自动打开浏览器窗口并导航到 WebIDE 界面。

2. 安装Java及Spring常用插件包

Spring Boot应用，本质上是Java应用，所以我们需要Java和Spring两方面的扩展支持。VS Code为了方便安装，提供一种Extension Pack的方式，把相关技术的多个常用Extension打包成一个Pack，可以实现一键安装，所以我们可以直接安装以下两方面的扩展包即可：

1. Java支持：Java Extension Pack(vscjava.vscode-java-pack）

   功能包括：流行的Java开发扩展，提供Java自动补全、调试、测试、Maven/Gradle支持、项目依赖管理等等。

2. Spring支持：Spring Boot Extension Pack(pivotal.vscode-boot-dev-pack)

   功能包括：用于开发Spring Boot应用程序的扩展集合。

SmartIDE已经通过初始化脚本的方式，为开发环境自动安装了这两个扩展包。在WebIDE启动后请稍等片刻，SmartIDE会自动启动Terminal并执行以上两个插件的安装脚本，安装完毕后，如下图所示：

对应初始化插件包安装脚本如下：

脚本供参考，你无需手工执行这些脚本

# 安装Java扩展包集合（Extension Pack for Java）
code --install-extension vscjava.vscode-java-pack
# 安装Spring扩展包集合（Spring Boot Extension Pack）
code --install-extension pivotal.vscode-boot-dev-pack

3. 创建并配置项目

使用快捷键运行Spring向导，快速创建一个Spring Boot应用。

使用快捷键Ctrl + Shift + P，然后输入Spring Initializr，选择 Spring Initializr:Create a Maven Project… 创建项目，进入创建向导：

在这里指定 Spring Boot 版本，2.6.4，如下图：

指定语言，Java，如下图：

输入maven项目Group Id: cn.smartide，并回车，如下图：

输入maven项目Artifact Id: smartide-demo，并回车，如下图：

指定打包方式: Jar，如下图：

指定 Java (JDK) 版本: 11，如下图：

选择项目依赖: Spring Web Web，如下图：

可对依赖进行多选，这里我们直接回车确认不再添加其他依赖包，如下图：

代码目录：/home/project，如下图：

确认后，扩展将为我们创建Spring Boot Web项目。

创建成功后，IDE的右下方会给出提示，点击：Add to Workspace，添加项目到工作区，如下图：

执行完毕后的效果如下，左侧文件管理器里面已经出现了 smartide-demo 文件夹，并在其中创建了 spring web 应用的基础代码结构。如下图：

此时，IDE会自动打开Java项目并进行初始化构建操作，如下图所示：

点击查看详细信息，查看项目的初始化构建情况，如下图所示：

初始化完成后，如下图所示，所有操作都显示为Done：

工作区添加完毕后，会提示项目导入成功，如下图：

默认，构建时会通过maven官方源下载依赖，我们可以修改 pom.xml，将依赖拉取地址改为国内阿里源。在 pom.xml 中 第5行 ，添加：

<repositories>
    <repository>
        <id>alimaven</id>
        <name>aliyun maven</name>
        <url>http://maven.aliyun.com/nexus/content/groups/public/</url>
        <releases>
            <enabled>true</enabled>
        </releases>
        <snapshots>
            <enabled>false</enabled>
        </snapshots>
    </repository>
</repositories>
<pluginRepositories>
    <pluginRepository>
        <id>alimaven</id>
        <name>aliyun maven</name>
        <url>http://maven.aliyun.com/nexus/content/groups/public/</url>
        <releases>
            <enabled>true</enabled>
        </releases>
        <snapshots>
            <enabled>false</enabled>
        </snapshots>
    </pluginRepository>
</pluginRepositories>

这样可以更快地拉取依赖，进行maven构建。新建终端，执行命令：

# 进入spring web项目目录
cd /home/project/smartide-demo
# 运行mvn构建安装
mvn install

4. 开发调试

完成以上配置之后，你的代码已经完全准备好，可以开始进行编码调试了。

首先，我们建立一个controller包，路径为cn.smartide.smartidedemo.controller，并且新建一个类：SmartIDEController.java，代码如下

/*SmartIDEController.java*/

package cn.smartide.smartidedemo.controller;

import org.springframework.boot.autoconfigure.EnableAutoConfiguration;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

@RestController
@EnableAutoConfiguration
public class SmartIDEController {
    @RequestMapping("/home")
    String home(@RequestParam String language) {
        String hello = "Hello, SmartIDE Users!";
        return hello + " The dev language is:" + language + ".";
    }
}

新建完成后，在启动类 SmartideDemoApplication.java 点击Debug，通过Debug模式启动项目。启动调试后，请注意 smartide 客户端的日志输出，SmartIDE 会在后台持续监控容器内的进程情况，并将所有端口转发到 localhost 上

在SmartIDEController.java文件的 第13行 代码处 单击设置断点

在浏览器中输入地址： http://localhost:8080/home?language=Java 触发我们之前所设置的断点，

现在，进入到调试状态，注意上图中的几个关键点

1. 通过打开 http://localhost:8080/home?language=Java 这个地址触发我们预设的断点
2. 将鼠标移动到特定的变量上以后，IDE 会自动加载当前变量的结构体以及赋值状态（实时），方便开发者观察运行时状态
3. Variables (变量) 窗口实时显示当前运行时内的变量状态
4. Call Stack (调用堆栈) 窗口实时显示当前运行时堆栈状态

点击单步运行，并跳出断点，页面将返回输出结果，如下图所示：

至此，我们已经使用 SmartIDE 完成了一个 Spring Web 应用程序的创建，配置和编码调试过程。

5. 提交并分享

SmartIDE 环境中已经内置了 Git 的支持，你可以点击 菜单栏左侧 ｜ 源代码管理 ｜ 点击 Initialize Repository 按钮 将当前工作区初始化成一个 Git代码库。

在 提交注释 中填写 使用SmartIDE创建，然后点击 提交按钮

点击 Remote | Add Remote 按钮，添加一个远端 Git库 地址。SmartIDE 支持任何Git服务，包括：GitHub, Gitlab, Azure DevOps, Gitee 等等。

这时，我们可以将创建的这份代码推送到了类似Gitee的代码仓库上，代码库地址类似如下 https://gitee.com/smartide/sample-java-vscode

至此，我们已经使用 SmartIDE 完成了一个 Spring Boot 应用从环境搭建，创建基础代码结构，配置调试环境，完成编码开发到提交代码的全过程。

现在可以将你的代码库发送给其他的小伙伴，让他通过以下指令一键启动你的应用。

smartide start https://gitee.com/smartide/sample-java-vscode

是不是很爽！

JetBrains IntelliJ IDEA

1. 新建开发环境

运行以下命令创建Spring Web项目开发环境：

mkdir sample-java-idea
cd sample-java-idea
smartide new java -T idea

运行后的效果如下，你可以通过命令窗口中的日志详细了解 SmartIDE 的启动过程，当 SmartIDE 启动完毕之后，会自动打开浏览器窗口并导航到 WebIDE 界面。

2. 创建并配置项目

SmartIDE启动的JetBrains IDEA环境为 社区版，在新建Spring Web项目时，建议安装Spring初始化插件，这样新建项目会更加方便。 这里我们安装第三方插件：Spring Initializr and Assistant。

点击插件，在搜索框输入：Spring Initializr and Assistant，并安装插件。

接受第三方插件安装:

安装完毕后，新建项目：

使用 Spring Initializr向导 新建项目：

输入项目信息：

选择项目依赖项目信息，这里我们选择了两个依赖，分别是：

• 1）Developer Tools -> Lombok
• 2）Web -> Spring Web

修改项目名称，以及默认 保存路径：

至此，Spring Web项目已创建完成。

下面，打开File—Project Structure—Modules ( Win快捷键：Ctrl+Alt+Shift+S，Mac快捷键 Command+; ) ，设置Maven项目的目录结构：

• 1）src/main/java：Sources文件夹
• 2）src/main/resources：Resources文件夹
• 3）src/test/java：Tests文件夹

接着，我们设置依赖拉取地址为国内阿里源，在pom.xml中第5行，添加：

<repositories>
    <repository>
        <id>alimaven</id>
        <name>aliyun maven</name>
        <url>http://maven.aliyun.com/nexus/content/groups/public/</url>
        <releases>
            <enabled>true</enabled>
        </releases>
        <snapshots>
            <enabled>false</enabled>
        </snapshots>
    </repository>
</repositories>
<pluginRepositories>
    <pluginRepository>
        <id>alimaven</id>
        <name>aliyun maven</name>
        <url>http://maven.aliyun.com/nexus/content/groups/public/</url>
        <releases>
            <enabled>true</enabled>
        </releases>
        <snapshots>
            <enabled>false</enabled>
        </snapshots>
    </pluginRepository>
</pluginRepositories>

设置完毕后，在pom.xml文件中，指定spring-boot-maven-plugin插件版本：

点击Reload All Maven Projects，重新加载Maven项目。Maven项目加载完毕后，点击mvn install，触发依赖下载与安装：

至此，我们设置完毕项目所有的Maven依赖，这时可以启动Spring Web项目了。

3. 开发调试

完成以上配置之后，基础代码已经完全准备好，就可以开始进行编码调试了。

首先，我们建立一个controller包，路径为cn.smartide.demo.controller，并且新建一个类：SmartIDEController.java，代码如下:

/*SmartIDEController.java*/

package cn.smartide.demo.controller;

import org.springframework.boot.autoconfigure.EnableAutoConfiguration;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

@RestController
@EnableAutoConfiguration
public class SmartIDEController {
    @RequestMapping("/home")
    String home(@RequestParam String language) {
        String hello = "Hello, SmartIDE Users!";
        return hello + " The dev language is:" + language + ".";
    }
}

新建完成后，在启动类 SmartideDemoApplication.java 上右键点击Debug，通过Debug模式启动项目。启动调试后，请注意 smartide 客户端的日志输出，SmartIDE 会在后台持续监控容器内的进程情况，并将所有端口转发到 localhost 上

在SmartIDEController.java文件的 第15行 代码处 单击设置断点

在浏览器中输入地址：http://localhost:8080/home?language=Java 触发我们之前所设置的断点，

现在，进入到调试状态，注意上图中的几个关键点

1. 通过打开 http://localhost:8080/home?language=Java 这个地址触发我们预设的断点
2. 将鼠标移动到特定的变量上以后，IDE 会自动加载当前变量的结构体以及赋值状态（实时），方便开发者观察运行时状态
3. Variables (变量) 窗口实时显示当前运行时内的变量状态
4. Debugger (调试) 窗口实时显示当前运行时堆栈状态

点击单步运行，并跳出断点，页面将返回输出结果，如下图所示：

至此，我们已经使用 SmartIDE 完成了一个 Spring Web 应用程序的创建，配置和编码调试过程。

4. 提交并分享

环境中已内置了git命令，这里我们通过命令行的方式，将代码提交到远端 Git库。 SmartIDE 支持任何Git服务，包括：GitHub, Gitlab, Azure DevOps, Gitee 等等。

下面我们执行git提交命令：

# 初始化git仓库
git init
# 添加项目文件
git add .
# 提交
git commit -m "使用SmartIDE创建smartide-java-demo"
# 添加远端地址
git remote add origin https://gitee.com/smartide/sample-java-idea
# 推送到远端
git push -u origin "master"

这时，我们可以将创建的这份代码推送到了类似Gitee的代码仓库上，代码库地址类似如下 https://gitee.com/smartide/sample-java-idea

至此，我们已经使用 SmartIDE 完成了一个Spring Web 应用从环境搭建，创建基础代码结构，完成编码开发调试到提交代码的全过程。

现在可以将你的代码库发送给其他的小伙伴，让他通过以下指令一键启动你的应用。

smartide start https://gitee.com/smartide/sample-java-idea

是不是很爽！

5. 快速创建Spring Boot项目

SmartIDE模板中提供了创建Spring Boot的示例模板，可以更快速地创建一个Spring Web项目。

命令如下：

smartide new java -T springboot-idea

详情请参考：https://gitee.com/smartide/smartide-springboot-template

基于Spring Boot并包含前端、数据库等的Java项目，可参考示例应用-若依项目。

远程开发

上面我们已经使用SmartIDE的本地工作区模式完成了一个应用的创建和开发过程，这个过程和你所熟悉的开发模式有2个区别，1）我们使用了WebIDE；2）开发环境全部通过容器获取并运行。

在这个过程中你的项目代码也已经具备了远程开发的能力，你可以按照以下文档中的说明使用任意一种远程工作区来开发调试你的应用

• 远程主机工作区
• k8s工作区
• Server工作区

另外，你也可以通过VSCode或者JetBrains内置的远程开发模式进行Hybird模式的远程开发，具体请参考

• IDE远程开发操作手册

感谢您对SmartIDE的支持：Be a Smart Developer，开发从未如此简单。

6 - Jupyter Notebook 快速启动教程

概述

远程工作区的一个重要优势就是可以帮助开发者更好的利用远程主机的强大算力和数据处理能力，在这个领域中 Jupyter Notebook 无疑是非常典型的应用类型。SmartIDE 提供了对 Jupyter Notebook 的远程工作区支持，开发者只需要一个简单的指令就可以启动一个预装了 Jupyter Notebook 的远程工作区，并通过 --host 参数将这个工作区漫游到任意主机或者 k8s 环境中。

在这个快速开始教程中，我们将一起使用 SmartIDE 创建一个基于 Jupyter Notebook 的开箱即用的环境，并利用 Jupyter 的数据分析能力针对新冠疫情数据进行简单的分析。这个示例的目的是帮助使用 Jupyter 的开发者了解 SmartIDE 的能力，并希望有更多的开发者加入 SmartIDE 开发者的行列。

完整操作视频

为了便于大家更直观地了解和使用 SmartIDE 创建 Jupyter Notebook 环境，并开始项目的开发，我们在B站提上提供了视频供大家参考，视频如下：

1. 开发环境设置

Jupyter Notebook 默认需要运行在 Python 环境下，并且需要引入 Numpy， Pandas，Matplotlib 等常用的组件， 为此 SmartIDE 参考社区镜像，制作了开箱即用的模板，并内置了中文字体。用户只需要简单的命令即可快速创建出一个 JupyterNotebook 的开发环境。

1.1 使用SmartIDE模板创建开发环境

本地启动

# 在 MacOS/Windows 上打开 终端（Terminal）或者 PowerShell 应用，执行以下命令

# 创建空文件夹
mkdir sample

# 进入到目录下
cd sample

# 创建开发环境
smartide new anaconda -T jupyter
# done！

远程启动

# 添加远程主机到SmartIDE
smartide host add <IP-Address> --username <user> --password <pwd> --port <ssh port | 22>
# 获取新添加的hostId
smartide host list
# 创建开发环境
smartide new --host <hostId> anaconda -T jupyter -w <workspace-name>
# done！

1.2 基于已有仓库创建开发环境

这里，我们以 SmartIDE 官方的 Jupyter Notebook 示例仓库为例， 运行以下命令创建开发环境：

# 在 MacOS/Windows 上打开 终端（Terminal）或者 PowerShell 应用，执行以下命令
# 克隆示例仓库
git clone https://github.com/SmartIDE/sample-anaconda-jupyter.git

# 进入到仓库目录下
cd sample-anaconda-jupyter

# 启动开发环境
smartide start
# done!

1.3 (可选）远程主机模式创建开发环境

如果你是一个 SmartIDE 的高级用户，并且已经用 SmartIDE 关联了远程开发机器，可以直接用远程模式创建 Jupyter Notebook 开发环境

# 添加远程主机到SmartIDE
smartide host add <IP-Address> --username <user> --password <pwd> --port <ssh port | 22>
# 获取新添加的hostId
smartide host list
# 启动
smartide start --host <hostId> https://github.com/SmartIDE/sample-anaconda-jupyter.git

运行后的效果如下，你可以通过命令窗口中的日志详细了解 SmartIDE 的启动过程，当 SmartIDE 启动完毕之后，会自动打开浏览器窗口并导航到 WebIDE 界面。

2. 访问 Jupyter Notebook 页面，浏览目录下的文件

Jupyter Notebook 服务端会自动在开发环境环境启动后运行，默认会监听 8888 端口， 通过浏览器访问 http://localhost:8888/ 可以进入 JupyterNotebook 主界面。 Jupyter Notebook 中展示的文件列表和当前所在的文件目录保持一致，我们可以访问到当前仓库中所有的示例 notebooks。

3. 运行 sample-03 Notebook

进入 sample3 目录， 打开示例文件后，点击上方的 Run 按钮，运行 notebook 到最底部后，将绘制出疫情数据统计图形。 这个示例中综合利用了 Numpy， Pandas, 和 Matplotlib 等 Jupyter Notebook 中常用的lib，并在图表的组件中设置了中文字体。

4. 回到 Web IDE主界面，进入 Source Control 侧边栏， 进行 Git 常规操作

在上一步的运行过程中，我们在 notebook 中动态从 API 中获取了最新的数据，并把数据保存到了 csv 文件中。回到我们的 Web IDE 页面，点击 Source Control 侧边栏，可以查看变化的文件（如果没有显示文件，可以点击上面的刷新按钮）。 点击第一个变化的 csv 文件，查看文件差异，可以清楚的看到文件里增加了一些新的数据

点击 .ipynb 文件，也可以在右侧看到 notebook 中产生的差异信息

5. 提交修改

将发生变化的文件提交并同步到远程仓库。

6. Great Job!

通过上面的几个步骤， 我们初步实现了一个 Jupyter Notebook的 Dev Loop。通过 WebIDE 和 Jupyter Notebook 相互结合使用，给开发者带来了流畅的开发体验。 另，SmartIDE 在开发环境中内置了 Anaconda 和 常用的 packages， 方便开发者对环境和 package 进行管理。内置的 packages 可通过下面的命令查看：

conda list

感谢您对SmartIDE的支持：Be a Smart Developer，开发从未如此简单。