WebIDE 环境使用指南
WebIDE 界面提供的是一个可以在浏览器中编辑代码的 IDE 的界面。在 WebIDE 中，可以编辑代码文件，打开 Terminal 终端执行 Linux 命令，还可以在 Terminal 中运行 Web 服务获得临时域名，打开浏览器进行预览调试。本次实验将会了解和熟悉 WebIDE 的常用功能及特点。
首先，请点击右侧「默认环境」打开 WebIDE 环境。然后，点击界面下方 下一步 按钮开始学习吧。
为什么要使用 WebIDE
2017 年 12 月，全球市场占有率第一的云计算厂商 AWS 在其开发者大会上正式推出 Cloud9，这是一款用于编写、运行和调试代码的 IDE，同时运行在浏览器中。相对于本地的 IDE，可以称它为 WebIDE。
2019 年，微软在 Build 2019 开发者大会正式宣布了 Visual Studio Online，其是 Visual Studio Code（简称 VS Code）的 WebIDE 版本。
VS Code 是微软 2015 年推出的跨平台 IDE 产品，在 2019 年的 Stack Overflow 组织的开发者调研中，VS Code 被认为是最受开发者欢迎的开发环境，据调查 87317 名受访者中有 50.7% 的受访者声称正在使用 VS Code。
随着云计算时代的全面到来，WebIDE 逐渐被开发者接受和喜爱。相对于本地 IDE，WebIDE 最大的好处就是随处可用，同时具备较好的代码安全性。以蓝桥提供的 WebIDE 环境为例，你只需要十几秒钟就可以开启线上开发环境。同时，你可以在 Mac，Windows，Linux，甚至 iPad 等平台上使用，拥有非常好的跨平台特性。
蓝桥提供的 WebIDE 基于 Eclipse Theia 开发，提供了更多的易用功能。Eclipse Theia 是 Eclipse 基金会推出的 WebIDE 产品，其参考了 VS Code 的界面风格，同时支持 VS Code 提供的插件。简单来讲，Eclipse Theia 拥有和 VS Code 几乎一致的体验，如果你之前是 VS Code 的用户，那么可以无缝切换到蓝桥的 WebIDE 环境。
当然，如果你之前对 VS Code 也不熟悉，那么接下来将带你入门 WebIDE 的使用。
WebIDE 界面
WebIDE 不同于桌面环境，对带宽要求较低，所以比较适用于一些需要大量代码编辑的场景，例如 C/C++，Java 开发和 Web 前端开发。在大多数情况下，我们更推荐你使用 WebIDE 环境，而非 Linux 桌面环境。
启动 WebIDE 之后，你可以看到它的默认界面，大致分为 3 部分：
代码文件浏览区：左边的区域将用于组织项目的文件结构，你可以在此区域创建各种类型的代码文件和文件夹。
代码文件编辑区：当你双击打开相应的代码文件之后，将会呈现在编辑区域。你可以在此区域编辑代码，编辑后的代码会实时保存。
Linux 终端：因为 WebIDE 本身是运行在 Linux 容器环境中，所以下方的区域是一个 Linux 终端。你可以通过终端运行命令，执行编译、运行代码等操作。
接下来，我们将通过多个示例项目，带你入门 WebIDE 的使用
C/C++ 示例项目
首先，我们从一个简单的 C/C++ 示例项目开始。
我们需要先在代码文件浏览区中通过右键 New File 创建一个名为 hello.c 的 C 语言文件。
然后，在编辑区域键入以下 C 代码，代码会自动保存。
#include<stdio.h> int main() { printf("Hello, World."); return 0; }
如果想要执行上方的 C 语言代码，需要先编译代码。编译代码需要用到 Linux 终端，接下来在终端中输入以下命令。
gcc -o hello hello.c
注意参数是小写字母 o，不是数字 0。单击回车，这时目录下会生成了一个名为 hello 的文件，这是 C 语言程序编译后得到的可执行程序。
接下来，我们就可以在终端中执行文件，注意执行的是编译之后的文件：
./hello
执行完之后，就可以看到刚刚编写 C 语言文件的输出了。
前端示例项目
由于 WebIDE 本身就是在浏览器中工作的 IDE，所以其非常适合于前端项目的开发和调试。接下来，我们以一个简单的前端项目为例，演示 WebIDE 常用功能使用。
首先，在代码文件浏览区中通过右键 New File 创建一个名为 hello.html 的 HTML 文件，然后在编辑区域输入以下 HTML 代码：
然后，我们键入以下 HTML 内容：
<!DOCTYPE html> <html> <head> <title>欢迎来到 HTML 的世界</title> </head> <body> <p>WebIDE 示例教学项目.</p> </body> </html>
代码会自动保存。此时，如果希望预览刚刚编写的 HTML 页面效果，可以单击编辑器页面右上角的预览图标打开。
除了预览按钮，你还可以：选择代码文件 → 右键 → Open With → Preview 打开预览：
你可以看到，右侧的 HTML 页面已经可以展示出来了。如果后续编辑和修改代码，预览页面也会动态更新。
Java 示例项目
除了前端开发， WebIDE 界面也非常适合进行 Java Web 开发。在 WebIDE 中，Java 主要使用命令行和 maven 来开发项目。
首先，我们在 WebIDE 提供的终端中输入命令，使用 Maven 建立项目：
mvn archetype:generate -DgroupId=com.shiyanlou -DartifactId=demo -DarchetypeArtifactId=maven-archetype-webapp
如果你的终端被不慎关闭了，可以点击顶部菜单栏 Terminal → New Terminal 打开终端。
稍等片刻，就会创建好一个名为 demo 的 Maven 项目。创建过程中，可能需要单击回车进行步骤确认。
接下来，我们尝试启动 Maven 的示例项目。在 Java Web 开发过程中，需要运行 Web 服务进行调试，这个时候就需要 Jetty 或者 Tomcat。所以，需要先修改刚刚新建的项目配置，添加 Jetty maven 插件。
你需要打开 demo 文件夹下方的 pom.xml 配置文件，并使用下方配置替换默认内容，复制并粘贴即可。
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>com.shiyanlou</groupId> <artifactId>demo</artifactId> <packaging>war</packaging> <version>1.0-SNAPSHOT</version> <name>demo Maven Webapp</name> <url>http://maven.apache.org</url> <build> <plugins> <plugin> <groupId>org.eclipse.jetty</groupId> <artifactId>jetty-maven-plugin</artifactId> <version>9.4.12.v20180830</version> <configuration> <scanIntervalSeconds>10</scanIntervalSeconds> <webApp> <contextPath>/</contextPath> </webApp> </configuration> </plugin> </plugins> </build> </project>
上方的配置中，我们新增了 jetty-maven-plugin 插件支持。接下来，继续在终端操作：
cd demo mvn jetty:run
上方的命令中，cd demo 是切换路径到 demo 文件夹中，mvn jetty:run 则是启动 Web 服务。由于需要下载的依赖较多，执行后需要稍等一会。项目启动完成之后，你可以看到服务运行在公网 8080 端口。
此时，我们就可以通过蓝桥线上环境提供的 Web 服务，打开运行在 8080 端口的 Maven 示例项目。
在环境右侧工具栏中找到「Web 服务」按钮，然后单击打开。
线上环境会自动分配一个临时域名给当前的 Web 服务，你可以在浏览器新的标签页面看到预览效果。
看到 Hello，World 默认页面，意味着刚刚 Maven 项目运行正常。
特别提醒：为了保证环境运行安全，线上环境提供的 Web 服务仅监听 8080 端口。Maven 项目默认运行在 8080 端口，其他一些服务运行时则可能需要手动指定端口号。
项目上传和下载
实验中，如果需要运行已有项目或者继续之前没有完成的项目，我们可以在终端 Terminal 中使用 wget 或者 git 命令获取代码。
请在终端中尝试下载并解压示例项目：
wget https://labfile.oss-internal.aliyuncs.com/courses/1433/maven-demo.zip unzip maven-demo.zip
同时，WebIDE 支持上传本地项目压缩包，你可以在代码浏览区域，通过鼠标右键找到 Upload Files 的上传选项。
你可以在上图看到 Download 下载选项。在 WebIDE 中如果需要下载代码，只需要选中要下载的文件夹或者代码文件，右键选择 Download，就可以下载到本地。
下载的代码会被打包成 tar 压缩包，下载后在 Mac 和 Windows 上都可以通过常用的解压软件，例如 7zip 进行解压，在 Linux 上可以使用 tar 命令解压。
实验总结
本次试验中，我们了解了 WebIDE 的界面布局以及常用功能的使用，你可以进一步通过鼠标点击菜单栏中的每一个按钮了解 WebIDE 提供的全部功能。
WebIDE 非常适合频繁使用命令行工具的项目、前端项目、以及涉及 Web 服务的项目开发，实验中的示例项目只能算作抛砖引玉，希望你能多多尝试使用 WebIDE 开发。
开始学习使用 WebIDE 环境的课程：
Notebook 环境使用指南
介绍
Jupyter Notebook 是一个能运行 Python 代码的 Web 应用程序，它是目前进行机器学习实践的主流工具。蓝桥云课依托 Jupyter Notebook，开发出了自己的机器学习在线实验环境蓝桥云课 Notebook 环境。完成本次实验课程内容，你将掌握蓝桥云课 Notebook 环境的基本操作，这也是学习后续课程的重要基础。
IPython
如果你对 Python 比较熟悉，应该都听说过 IPython，它是一种基于 Python 的交互式解释器。相较于原生的 Python Shell，IPython 提供了更为强大的编辑和交互功能。
IPython 之后，就出现了 IPython Notebook，它完整地继承了 IPython 的交互式特性，同时以 Web 形式运行。IPython Notebook 的出现，让数据分析和机器学习的过程变得高效。
Jupyter Notebook
再之后，在谷歌、微软等互联网巨头的赞助下，IPython Notebook 发展成为更加成熟和完善的开源项目，并更名为 Jupyter Notebook。相信部分朋友对这个名字和下面的界面并不陌生。
Jupyter Notebook 已经成为现代处理数据的必备工具。从数据清理、数据可视化、数据分析，再到后面的建立机器学习或深度学习模型，都可以在 Jupyter Notebook 完成。同时，Jupyter Notebook 可以保留代码运行后的结果，方便内容的传播，以及回顾做过的工作。
蓝桥云课 Notebook
如今，蓝桥云课基于 Jupyter Notebook 开发出了更加简洁易用的蓝桥云课 Notebook 在线实验环境，界面如下所示。
如果你先前使用过 Jupyter Notebook，我们相信当你接触到蓝桥云课 Notebook 环境时会很容易上手。当然，感到陌生的你也完全不用担心，下面就手把手教你蓝桥云课 Notebook 环境的正确使用方法。
目前，蓝桥云课通用的在线环境界面如下图所示，大致分为两部分：左边是实验文档，右边是在线实验环境。学习时，你通过阅读文档内容，并自己动手在右侧的在线环境中练习。
而在蓝桥云课 Notebook 中，学习逻辑就会发生一些变化。如今，实验文档和实验环境被融为一体，你只需要跟随蓝桥云课制作好的每一个课程内容，从头到尾一步一步完成练习即可，就像你现在正在阅读的这份实验文档一样。下面，我们就了解一下课程内容的组成结构。
单元格
内容结构中最基本的组成单位被称之为单元格，一节完整的实验课程由若干个单元格按顺序构成。如下图所示，当你使用鼠标在课程界面【单击】时，就会选中相应的单元格，被处于选中状态的单元格的左侧会出现一条蓝色的竖线。
单元格的两种模式
每一个单元格会有两种模式，分别是 Markdown（文本） 和 Code（代码）。在蓝桥云课的课程中，教学内容都是以 Markdown 单元格展示，而你需要动手练习的代码将在 Code 单元格中执行。
如何判断一个单元格是 Markdown 单元格，还是 Code 单元格？一般有两种方式。首先，选中之后的单元格右上角会出现一个菜单栏，绿色高亮的按钮就代表当前单元格的模式。上图中，就是一个典型的 Markdown 单元格。
除此之外，更简单的方法就是观察单元格的背景色。如下图所示，我们将 Code 单元格的背景色设置成为黑色，而 Markdown 单元格的背景则为白色。
观察题 当前单元格是 Markdown（文本）单元格，还是 Code（代码）单元格？【当然是 Markdown 啦。】
单元格菜单栏
上面提到了单元格右上角的菜单栏。如下图所示，菜单栏中包含了针对单元格常见的 4 种操作。
动手题 亲自点一点这些按钮，看看都有什么效果？
运行代码
你可能会有疑问，那就是自己在哪里书写练习代码并执行呢？当前，这一切都是在 Code 单元格中完成。如下图所示，当你在 Code 单元格中书写 print('hello, world!') 时，点击左侧的运行按钮 ▶，相应的代码就会立即执行，并在单元格的下方显示输出内容。
动手练习
# 点击左侧的运行按钮 ▶ 运行代码 print('hello world!')
蓝桥云课 Notebook 沿用了 Jupyter Notebook 全部的快捷键。所以，当你需要执行一个单元格时，也可以通过快捷键 Shift + Enter 来运行。使用快捷键的好处是你的双手不需要离开键盘。
# 选中单元格，并按 Shift + Enter print('hello world!')
你所看到的实验文档内容，都书写在 Markdown 单元格中。如果你一不小心双击了相应单元格进入到编辑状态。不用担心，选中相应单元格，并同样使用快捷键 Shift + Enter 执行，就可以恢复到先前的状态。
动手题 双击我，然后再按 Shift + Enter
你在实验环境中输入的字符和代码都是自动保存的。只要当前环境没有终止（点击右上角的停止按钮，或环境超时自动终止），那就无需担心刷新页面后造成自己动手练习代码出现丢失。
单元格执行顺序
无论是 Markdown 单元格，还是 Code 单元格，它们在课程中都是按照从上到下的顺序依次执行的。后面的单元格需要等待前面的单元格执行完成后，才能继续执行。执行完成的单元格左侧会出现 In [序号] 的标志，例如：
动手练习
a = 1 b = 2
# 需要先执行上方单元格给 a,b 变量赋值才能执行我呢～ a + b
为了方便，在蓝桥云课 Notebook 中，print() 打印操作并不是必须的。例如上方的单元格, a + b 就能输出结果。
代码补全
当我们在写代码的时候，代码自动补全可以极大地节省时间。而在蓝桥云课 Notebook 中，可以通过 Tab 键激活代码补全功能。
# 当我们在使用 import 导入模块时，只需输入 im ，然后按 Tab 键 im
值得注意的是，某个模块下包含函数的自动补全，必须要导入模块之后才会生效。举例来讲，只有当你运行了 import numpy as np，才能够使用 Tab 键自动补全 np. 下面的类和相关函数。
函数使用建议
对于一个陌生的函数不够了解，那么可以通过 shift + tab 快捷键查看使用建议。
# 运行导入 random 模块 import random
# 鼠标点击至 random.randint 并按 shift + tab 查看使用建议 random.randin
你应该能看到如下的函数介绍气泡内容：
<span style="background-color:#23241f"><span style="color:#f8f8f2">Signature: random.randint(a, b) Docstring: Return random integer in range [a, b], including both end points. </span></span>
单元格的执行状态
对于复杂度高的代码，往往会意味着更长的执行等待时间。在蓝桥云课 Notebook 中，当一个单元格处于执行状态时，单元格前面会出现 In [*] 符号，只有执行完成的单元格, [] 中的 * 才会变成相应的 序号。
除此之外，你可以通过页面右上角的 Kernel 状态指示器判断内核占用情况。如果 Python 字符右边出现了实心圆圈 ◉，代表内核处于占有状态。而空心圆圈 ◯ 则代表内核处于空闲状态。当然，也可能出现链接断开的符号，那就代表着内核已经断开链接，你可能需要刷新页面或重启实验环境。当然，蓝桥云课会尽力让你避免遇到内核断开的状态。
重启内核
有些时候，当你在运行复杂的代码时，可能会造成实验环境资源占用大而 Notebook 出现「假死」的现象。在遇到这种情况时，你可能不希望重新关闭再打开实验，那么可以执行「重启 Notebook 内核」操作。
重启内核的按钮在环境的顶部，点击 样式按钮后会弹出确认对话框，点击 Restart 即可。
动手题 现在执行重启内核操作试一试，然后再运行下方单元格。
a
如果重启完内核后，执行上方单元格会报错 NameError。原因在于重启内核后之前全部的单元格运行状态都会重置，即上文中我们赋值过的变量 a 又会回到未赋值状态。现在你应该明白重启内核的作用和影响了吧。
强制终止
有的时候，如果代码运行时间过长，或者陷入死循环，我们会想到强制终止单元格的运行状态。此时，顶部的 按钮就发挥作用了。
动手题 运行下方无限循环代码，并执行强制终止操作。
import time while True: print("hello, shiyanlou.") time.sleep(1)
快捷键
为了提高 Jupyter Notebook 的使用效率，其提供了一系列快捷键，我们挑选了常用的几个总结如下：
B：在当前单元格下方新建空白单元格。
M：将单元格格式转换为 Markdown。
Y：将单元格格式转换为 Code。
连续按 D+D：删除当前单元格。（慎用，推荐使用按下 X 剪切单元格代替，因为其可以起到删除效果，且删错了还可以按 V 粘贴回来）
Shift + Enter：运行当前单元格内容。（当 Markdown 单元格处于编辑状态时，运行即可复原）
请注意，所有快捷键触发式，需保证单元格处于选中状态，而非编辑状态。
实验总结
在本实验中，我们学习了蓝桥云课 Notebook 的基本使用技巧，这对后续的学习非常重要。正如前面所说，Jupyter Notebook 在数据科学、机器学习、深度学习领域非常的流行，熟练运用 Jupyter Notebook 将为未来的学习工作提供极大便利。
