第一个 Rooch dApp
本篇教程主要介绍如何使用 Rooch 提供的前端模板来实现一个简易计数器 dApp。
克隆模板源码
git clone https://github.com/rooch-network/my-first-rooch-dapp初始化项目
安装 dApp 所需依赖：
cd my-first-rooch-dapp
bun install
## if you are using yarn
yarn install运行 dApp：
bun dev当一切顺利完成后，在浏览器访问本地的预览链接，就能看到如下效果：
恭喜你！完成以上步骤后，说明你的 dApp 已经成功运行了，为了完成完整的链上交互，我们还需要部署合约。
确认 Rooch 当前的 Network
我们使用 Testnet 测试网来部署 Counter 应用，使用 rooch env switch 来切换网络：
rooch env switch --alias test
The active environment was successfully switched to `test`部署合约
在 counter_contract 目录里，我们可以看到 Counter dApp 的合约源码。
进入 counter_contract 目录，使用如下命令来部署合约。
请注意，在部署前请确保自己的地址下有足够的 Gas Fee，我们可以使用如下命令来查询：
rooch account balance
## output
Coin Type | Symbol | Decimals | Balance
--------------------------------------------------------------------
0x3::gas_coin::RGas | RGAS | 8 | 1939625968确认有足够的 Gas Fee 后，就可以使用下面的命令来部署合约了。
## in counter_contract directory
rooch move publish --named-addresses quick_start_counter=default在部署完成后，我们可以看到命令行的输出：
BUILDING quick_start_counter
Publish modules to address: rooch1e7qm7jqangukl37qs49ckv7j4w47zyu5cr2gd9tmzal89q9sudqqzhy92t
(0xcf81bf481d9a396fc7c0854b8b33d2ababe11394c0d486957b177e7280b0e340)
...如上命令行的输出，Counter 就被部署在了 0xcf81bf481d9a396fc7c0854b8b33d2ababe11394c0d486957b177e7280b0e340 这个地址上了。
修改前端配置
找到前端项目中的 src/App.tsx 文件，修改 counterAddress 这个常量：
// Publish address of the counter contract
const counterAddress = "YOUR_COUNTER_ADDRESS";替换上一步部署的 Counter 合约地址：
const counterAddress = "0xcf81bf481d9a396fc7c0854b8b33d2ababe11394c0d486957b177e7280b0e340"注意：这里的合约地址会与部署者的地址有关，请确认。
合约交互
连接上钱包，我们可以在 Session key 区域点击 Create 按钮，创建会话密钥：
创建完成后，即可看到 Session Key 的相关信息：
当替换完合约地址后, dApp Integration 区域里也可以看到 Counter Value 的计数。
完成上述步骤后，就可以在 dApp Integration 区域里点击 Increase Counter Value 按钮，调用合约并增加计数器的数值了。
总结
完成上述步骤后，你已经掌握了 创建 dApp，部署合约 以及 前端与合约进行基本的交互 的技能了。