Web IDE是什么？
各位小伙伴对IDE肯定不陌生，主要是用于提供程序开发环境的应用程序，一般包括代码编辑器、编译器、调试器和图形用户界面等工具。
web IDE则是将IDE里面除用户交互之外的功能全部移到了后台，开发人员在浏览器上可以像在本机一样调试、编译、运行程序，并且不会受系统环境和机器性能的限制。
（图为一款web IDE的系统架构）
目前的web IDE主要有AWS Cloud9、Cloud Studio、Eclipse Che、Gitpod等，这些web IDE各有千秋，其中Gitpod是目前web IDE中对Github上的项目支持最好的，也是eosio主推的一款产品。并且Gitpod对于非商用的开发者，每月会有100小时的免费使用时间，本文的讲解，也会以Gitpod为例（下文中提到的web IDE，在没有特指的情况下，全部为Gitpod）
关于Gitpod，可以参考Gitpod说明文档。（https://www.gitpod.io/docs/）
为什么要使用Web IDE
EOSForce社区小伙伴在EOS Web IDE上线的同时，第一时间发布了EOSC版本。方便了开发者更好的对开源社区作出贡献，接下来将详细讲解使用教程。
1. 环境搭建及运行节点门槛
对于很多区块链爱好者来说，想要搭建一个简单的环境来了解一个区块链项目，很大程度上会因为搭建环境以及初次运行过程中的各种问题而退缩。
对于智能合约开发者来说，很多时候会因为初次运行，或者环境切换等原因，在这个过程中耗费很多不必要的时间成本。
而Web IDE的出现，会让这些问题不再成为麻烦。拿eosio来说，想要启动一个节点，并且在节点上部署开发好的智能合约，并不是一件很简单的事，需要下载代码、安装依赖、编译代码、启动节点、编译合约、然后部署。在这个过程中，可能会出现非常多的问题。
EOSIO 2官方更新后，使用Web IDE，只需要一键，就可以开始开发调试智能合约，消除开发人员的入门障碍。它在云中运行，使新开发人员能够建立智能合约和Web应用程序开发环境以及完全集成的单节点个人测试网，因此他们可以在几分钟之内从入门到构建。
2. 启动节点的机器性能要求
在计算机上运行一个eos的节点，是非常耗费性能的，很多PC机可能根本没法成功运行一个eos的节点，更不用说同时还打开IDE调试智能合约，而Web IDE将这些对机器性能的要求移到了后台，前端仅仅是一个交互页面。
3. 随处可用
传统IDE还有一个问题就是每次开发必须带上开发机或者每次改完代码都push到远程，而Web IDE解决了这个问题，它可以随时在远程保留开发环境，随时随地，只要有浏览器，就可以开始写合约。
以EOSC为例讲解使用步骤
1. 浏览器插件下载
Gitpod对Chrome和Firefox都提供了插件支持，下载插件后，会使进入Gitpod开始开发更加方便，本文以Chrome为例介绍使用步骤。
Chrome插件下载：https://chrome.google.com/webstore/detail/gitpod-online-ide/dodmmooeoklaejobgleioelladacbeki
2. 一键生成环境
插件下载成功后，打开eosforce专门为使用web IDE开发智能合约准备的github项目eosforce-web-ide，我们会发现项目的主页上多了一个Gitpod按钮。
点击Gitpod按钮，就可以直接进到一个节点已经启动好的环境中，并且这个环境提供了一些编写智能合约的模板（实际的开发环境中，建议大家先fork这个项目，然后再启动Gitpod）。
如果没有安装GitPod插件，可以直接在浏览器上新开一个页面，输入网址 https://gitpod.io/#https://github.com/xxxxx/eosforce-web-ide (其它xxxx替换成你的github用户名)
从图中可以看见，eosforce已经模拟正式环境启动了23个节点并且正在出块，同时整个编写智能合约的IDE环境已经搭建好，现在就可以使用web IDE直接开始开发智能合约了。
3. 开发调试合约
智能合约的具体开发、调试以及部署说明可以参考eosio白皮书，本文仅分析该项目模板合约的部署和调用。
在web IDE中打开contract/talk/talk.cpp文件，核心逻辑如下：
[[eosio::action]] void post(uint64_t id, uint64_t reply_to, eosio::name user, const std::string& content) {
message_table table{get_self(), 0};
require_auth(user); // 检查用户
if (reply_to) // 检查是否需要回复
table.get(reply_to);
// 检查id不能过大，并且当没有传的时候分配一个id
eosio::check(id < 1'000'000'000ull, "user-specified id is too big");
if (!id)
id = std::max(table.available_primary_key(), 1'000'000'000ull);
// 记录post的内容到table
table.emplace(get_self(), [&](auto& message) {
message.id = id;
message.reply_to = reply_to;
message.user = user;
message.content = content;
});
}
理清post方法的逻辑之后，就可以开始编译文件了，首先点击Gitpod上方导航栏的Terminal -> New Terminal(如下图)
可以看见Gitpod下方出现了一个新的命令行窗口
在该窗口执行如下命令，编译talk.cpp文件，会生成talk.abi和talk.wasm两个文件
eosforce-cpp contract/talk/talk.cpp
然后执行以下命令，创建合约账户talk，并向该合约账户转帐10000EOS(此次转账主要是该账户随后需要set code和set abi)
cleos create account eosforce talk EOS6MRyAjQq8ud7hVNYcfnVPJqcVpscN5So8BhtHuGYqET5GDW5CV
cleos transfer eosforce talk '10000.0000 EOS'
通过执行系统合约为talk账户租一定的内存(此处需要多租一点，因为set code操作需要的内存很多)，然后将编译后的wasm和abi文件绑定到talk合约账户
cleos push action eosio vote4ram '[talk, biosbpa, "2000.0000 EOS"]' -p talk
cleos set code talk talk.wasm
cleos set abi talk talk.abi
随后创建两个普通账户bob和alice，并向他们每人转帐100 EOS(因为后续执行合约需要扣除fee)，用来执行合约
cleos create account eosforce bob EOS6MRyAjQq8ud7hVNYcfnVPJqcVpscN5So8BhtHuGYqET5GDW5CV
cleos create account eosforce jane EOS6MRyAjQq8ud7hVNYcfnVPJqcVpscN5So8BhtHuGYqET5GDW5CV
cleos transfer eosforce bob '100 EOS'
cleos transfer eosforce jane '100 EOS'
为talk合约账户的post方法设置fee，此处是其他账户执行该方法时需要支付的fee
cleos set setfee talk post '1.0000 EOS'
执行合约，以下三个命令分别是
bob以1000为id，发布一条"This is a new post"消息到table，并且不需要回复
jane以2000为id，发布一条"This is my first post"消息到table，并且不需要回复
bob以1001为id，发布一条"Replying to your post"消息到table，并且回复jane
cleos push action talk post '[1000, 0, bob, "This is a new post"]' -p bob
cleos push action talk post '[2000, 0, jane, "This is my first post"]' -p jane
cleos push action talk post '[1001, 2000, bob, "Replying to your post"]' -p bob
最后，输入如下命令，查看table的内容
cleos get table talk '' message
得到如下结果，说明合约已经成功执行
{
"rows": [{
"id": 1000,
"reply_to": 0,
"user": "bob",
"content": "This is a new post"
},{
"id": 1001,
"reply_to": 2000,
"user": "bob",
"content": "Replying to your post"
},{
"id": 2000,
"reply_to": 0,
"user": "jane",
"content": "This is my first post"
}
],
"more": false
}
4. 过程分析
下面具体分析一下这个一键生成环境的过程中都发生了什么
在任何一个github项目的地址前，加上https://gitpod.io/# ， 就可以在gitpod中打开该项目，例如在eosforce-web-ide这个项目中点击Gitpod按钮，实际访问的就是https://gitpod.io/#https://github.com/ylic/eosforce-web-ide 这个地址
打开Gitpod之后，Gitpod会根据项目中的 .gitpod.yml 文件来决定环境的初始化工作，该文件内容如下：
image: ylic/eosforce-web-ide:v0.1.0 # Gitpod会加载ylic/eosforce-web-ide:v0.1.0的docker镜像，该镜像里面会部署编译好的eosforce相关程序，以及其他一些需要使用到的文件
ports: # 配置环境中需要打开的端口
onOpen: ignore
onOpen: ignore
onOpen: ignore
onOpen: ignore
onOpen: ignore
... #此处省略了部分端口
tasks: # 初始化阶段的任务
init: yarn # yarn会根据package.json文件去下载相关依赖包
command: nginx -c $PWD/nginx.conf; npx webpack-dev-server # 启动nginx反向代理
- before: cd /workspace/eosforce-web-ide
command: ./nodeoscmd # 启动nodeos
以上步骤结束后，一个完整的eosforce测试环境就运行起来了，然后IDE会加载当前项目，开发人员就可以通过浏览器开发调试智能合约了。
总结
通过以上步骤，很大的简化了编写和调试智能合约的难度，使得更多的开发者可以接触到这个优秀的区块链项目和智能合约。同时，有了这些web IDE的相关指导文档，越来越多的开源团队也可以发布自己基于Web IDE项目，来方便开发者更好的对开源社区作出贡献。
Github链接：https://github.com/ylic/eosforce-web-ide
