├── screenshots ├── main.jpg ├── project.png └── startup.jpg ├── README.md └── README.EN.md /screenshots/main.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ObsidianLabs/bsc-dapp-tutorial/HEAD/screenshots/main.jpg -------------------------------------------------------------------------------- /screenshots/project.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ObsidianLabs/bsc-dapp-tutorial/HEAD/screenshots/project.png -------------------------------------------------------------------------------- /screenshots/startup.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ObsidianLabs/bsc-dapp-tutorial/HEAD/screenshots/startup.jpg -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # BNB 快速开发指南 2 | 3 | 简体中文 | [English](https://github.com/ObsidianLabs/bsc-dapp-tutorial/blob/master/README.EN.md) 4 | 5 | ## 目录 6 | - [关于BNB链](#关于BNB链) 7 | - [准备BNB数字钱包](#准备BNB数字钱包) 8 | + [使用浏览器插件钱包](#使用浏览器插件钱包) 9 | + [使用APP钱包](#使用APP钱包) 10 | - [准备BNB的开发环境](#准备BNB的开发环境) 11 | + [使用BNB Studio开始一站式开发旅程](#使用BNBStudio开始一站式开发旅程) 12 | + [通过网页端在线体验 BNB 合约开发](#通过网页端在线体验BNB合约开发) 13 | - [接入BNB网络](#接入BNB网络) 14 | - [BNB 智能合约开发](#BNB智能合约开发) 15 | + [BNB开发中的关键工具](#BNB开发中的关键工具) 16 | + [创建智能合约项目](#创建智能合约项目) 17 | + [合约部署和调用](#合约部署和调用) 18 | - [开发完整的BNB dApp应用](#开发完整的BNB-dApp应用) 19 | 20 | ## 关于BNB链 21 | BNB 链（BNB Chain）是一条以太坊虚拟机兼容，包括币安链与币安智能链的区块链系统。BNB 是加密资产行业顶尖项目的测试和前沿探索。通过引入权益权威证明（PoSA）共识机制，BNB 创建了验证一个允许节点、代币持有者、开发者和用户都能够从区块链中获益的生态系统，享受更高的性能和更充裕的创新空间。 22 | 23 | 24 | 官方网站：https://www.binance.org/cn/smartChain 25 | 26 | 本文为 BNB 开发快速上手指南，希望为开发者提供指导和帮助。 27 | 28 | ## 准备BNB数字钱包 29 | 在区块链应用中，数字钱包装载的并不是数字货币，而是密钥（私钥和公钥）。数字钱包中包含成对的私钥和公钥，公钥用于交易转账，私钥用于签名和解密。拥有了密钥相当于拥有相应地址上数字货币的支配权。在开发流程中，我们通过钱包来创建随机私钥、公钥、以及一串用于交易的地址信息。这段地址信息可以用于接受他人转账的数字货币，以及把你所拥有的数字货币转账给其他人。因此在我们开发智能合约之前，首先要先准备一个数字钱包。 30 | 对于币安智能链来说，我们推荐使用浏览器插件钱包或者APP钱包作为管理密钥的工具。 31 | 32 | ### 使用浏览器插件钱包 33 | 在开发过程当中，最常用的是浏览器插件钱包。浏览器插件钱包配置简单，插件钱包的安装和使用都很便捷。此外，由于目前大多数区块链应用都是网页的，因此通过浏览器钱包可以轻松访问目前主流的所有 Defi 和 NFT 应用。 34 | 35 | | | 钱包 | 地址 | 教程 | 36 | |:---:|:---:|---|---| 37 | | 1 | MetaMask | https://metamask.io/ | https://docs.binance.org/smart-chain/wallet/metamask.html | 38 | | 2 | Binance Chain Wallet | https://chrome.google.com/webstore/detail/binance-chain-wallet/fhbohimaelbohpjbbldcngcnapndodjp?hl=en | https://binance-wallet.gitbook.io/binance-chain-extension-wallet/ 39 | 40 | 需要大家注意的是，Binance Chain Wallet 同时支持币安链 (Binance Chain) 和 币安智能链 (BNB Chain)，这是两条不同的链，需要大家注意区分。 41 | ### 使用 APP 钱包 42 | 在智能合约上线以后，大部分用户会选择使用APP钱包来访问并使用。 43 | 44 | | | 钱包 | 地址 | 教程 | 45 | |:---:|:---:|---|---| 46 | | 1 | TrustWallet | https://trustwallet.com/ | https://www.binancezh.cc/zh-CN/blog/421499824684901157 | 47 | | 2 | 麦子钱包(MathWallet) | https://www.mathwallet.org/zh-cn/ | https://blog.mathwallet.xyz/?p=3895 | 48 | | 3 | TokenPocket | https://www.tokenpocket.pro/zh/ | https://mp.weixin.qq.com/s/xXjP_qAOF31f-mGauXl7Kw | 49 | 50 | 51 | ## 准备BNB的开发环境 52 | ### 使用BNB Studio开始一站式开发旅程 53 | BNB Studio 是一套功能强大且简便易用的BNB币安智能链图形化IDE开发平台。它支持运行于包括Windows, macOS以及Linux等主流操作系统在内的桌面端，也可以运行于Web端。相较于以Remix和Ganache为代表的传统的以太坊开发工具链，BNB Studio优化了BNB开发环境的检测和安装，并整合了完整开发流程中必需的工具，例如图形化代码编辑器，项目管理器，密钥管理器，区块浏览器，合约调试器以及网络链接管理器。 54 | 通过桌面端进行本地开发 55 | 56 | 桌面端包含完整的开发工具，适合从新手到资深团队等不同阶段的 BNB 开发者。用户可以前往[Github Repo](https://github.com/ObsidianLabs/BNB-Studio) 下载最新版的BNB Studio桌面端软件，目前支持包括macOS，Linux和Windows在内的主流操作系统。 57 | 安装 58 | * macOS: 双击打开 `BNB-Studio-x.x.x.dmg` 并将 BNB Studio 拖动到应用文件夹内 59 | * Linux: 双击打开 `BNB-Studio-x.x.x.AppImage`, *选择 Properties( => Permissions => Execute, 将 Allow executing file as progrom 选项打勾。关闭属性设置窗口并双击打开应用（不同的 Linux 发行版可能会有不同的安装方式* 60 | * Windows: 双击打开 `BNB-Studio-x.x.x.exe`。 61 | 准备环境依赖 62 | 在正确安装 BNB Studio 并初次启动时，你将看到一个欢迎页面，这里有正常运行币安智能链 BNB 开发所需要的依赖，包括了 Docker，BNB Node 以及Truffle. 63 | * BNB Studio 使用[Docker](https://www.docker.com/) 来启动 BNB 节点和进行项目编译。如果你之前没有安装过 Docker，可以点击 *Install Docker* 按钮访问 Docker 官方网站并进行下载安装； 64 | * [BNB Docker Hub](https://hub.docker.com/repository/docker/obsidians/bsc)存储着BNB 节点镜像，BNB Studio 使用这个镜像来运行 BNB 节点； 65 | * [BNB Truffle](https://hub.docker.com/repository/docker/obsidians/truffle) BNB Studio 使用Truffle工具包进行项目的创建和编译。 66 | 67 | 当所有依赖都正确安装并运行后，灰色的 Skip 按钮将会变成绿色的 Get Started 按钮。点击这个按钮进入主界面，就可以开始智能合约开发了！ 68 | 69 |

70 | 71 |

72 | 73 | ### 通过网页端在线体验 BNB 合约开发 74 | BNB Studio提供了Web版供大家在线编译和运行 BNB 合约。Web版本在集成了BNB Studio桌面版本绝大多数功能的同时，省略了开发者在本地准备和调试开发环境的过程，降低了开发者的入门的门槛，适合刚刚加入 BNB 生态的轻度开发者使用。开发用户可以前往 [bsc.ide.black](http://bsc.ide.black/) 立刻刻开始云端开发新体验。 75 | 76 | 77 |

78 | 79 |

80 | 81 | 82 | 关于 BNB Studio 的更多使用说明，请参见 [Github Page](https://github.com/ObsidianLabs/BSC-Studio) 83 | 84 | 85 | ## 接入BNB网络 86 | BNB 主要有两个网络，分别为主网 (BNB Mainnet) 和测试网 (BNB Testnet)。： 87 | * BNB测试网，是供开发者进行合约测试使用的，测试网上的token是可以免费领取 (通过Faucet)，测试网Token没有任何经济价值。 88 | * BNB主网，是智能合约正式部署的网络，用户实际是在主网上使用你的智能合约，主网上的代币（BNB及BEP20标准）是有实际经济价值的。 89 | 90 | BNB Studio 已经在软件中预配置了BNB主网和测试网的链接，可以方便的进行切换。为了方便用户在网络上进行开发，我们集成了很多工具，涵盖了浏览器钱包（密钥管理，转账工具) 、BNB 区块浏览器、Faucet等日常需要的工具。 91 | 92 | BNB区块浏览器 93 | 如果需要查询网络信息和链上数据，BNB提供了测试网区块浏览器[testnet.bscscan.com](https://testnet.bscscan.com/) 主网区块浏览器[bscscan.com](https://bscscan.com/)供开发者和用户查询链上数据。 94 | 95 | Faucet 96 | 在使用BNB测试网开发中，我们需要使用 token 进行合约的部署、调用、转账等操作。通过测试网的 [Faucet](https://testnet.binance.org/faucet-smart) 服务，可以申请测试Token。同样的，BNB Studio 集成了Faucet按钮 [Faucet功能](https://github.com/ObsidianLabs/BSC-Studio#faucet)，方便用户使用 Faucet 服务获取测试代币。 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | ## BNB 智能合约开发 106 | 107 | ### BNB开发中的关键工具 108 | 109 | [Truffle](https://www.trufflesuite.com/truffle) 110 | Truffle是一套基于Solidity语言的开发框架，它简化了去中心化应用（Dapp）的构建和管理流程。Truffle本身是采用Javascript编写，支持智能合约的编译、部署和测试。 111 | Truffle开发框架提供了很多功能，简化了我们的开发、编译、部署与调试过程合约开发编辑部署调用。 112 | 113 | [Solc](https://github.com/ethereum/solidity) 114 | solc是Solidity的命令行编译器，Solidity编写的以太坊智能合约可通过带参数的命令行工具solc进行编译，成为以太坊虚拟机中的代码。最终部署到链上形成我们所见到的各种智能合约。 115 | 116 | [BNB Client (base on Geth)](https://github.com/binance-chain/bsc) 117 | 基于以太坊黄皮书，任何人都能够以他们认为合适的语言创建自己的以太坊节点实现。 118 | 迄今为止最受欢迎的客户是Geth和Parity。实现的不同之处主要在于选择的编程语言：Geth使用Golang，而Parity使用Rust。而Geth是目前最受欢迎的客户端实现。 119 | BNB Client是基于Geth开发的BNB节点应用，BNB主网和BNB测试网节点都是通过这个应用来运行的。在本地开发中，我们可以自己安装BNB Client，在本地机器上运行自己的BNB节点和BNB本地开发网络。 120 | 121 | BNB Studio 已经集成了包括Truffle, Solc 和 BNB Client在内的所有关键开发工具。 122 | 123 | ### 创建智能合约项目 124 | BNB Studio中集成了若干智能合约模版，你可以选择对应的模版，创建第一个智能合约项目，并开始智能合约开发。这些模版包括： 125 | * Coin:一个非常基本的代币合约） 126 | * [Open Zeppelin](https://openzeppelin.com/):基于Open Zeppelin模版，提供了ERC-20，ERC-721（NFT）等合约。 127 | * [MetaCoin](https://github.com/truffle-box/metacoin-box):基于Truffle的MetaCoin模版. 128 | 129 |

130 | 131 |

132 | 133 | ### 合约部署和调用 134 | 135 | 使用 BNB Studio 可以快速进行： 136 | 1. [合约部署](https://github.com/ObsidianLabs/BSC-Studio#部署智能合约项目) 137 | 2. [合约调用](https://github.com/ObsidianLabs/BSC-Studio#调用合约) 138 | 139 | 点击链接可以查看相关教程。 140 | 141 | 142 | 143 | ## 开发完整的BNB dApp应用 144 | 145 | 我们刚刚编写部署的智能合约是一个在BNB链上运行的服务，它规定一系列链上的交易以完成我们开发中所设定好的功能任务。它相当于传统互联网开发中的后台服务。为了使用户能够方便的调用这些底层服务，避免不必要的门槛和编程的麻烦，我们也还需要编写一个前端应用作为用户界面，这个前端应用以及我们编写的后端智能合约合体就成为了一个简单易用的区块链应用，也叫去中心化应用或者dApp。 146 | 147 | 成功开发一个Dapp 的关键需要以下几步： 148 | * 集成前端SDK：可以使用任何以太坊支持的SDK，例如web3.js或者ethers.js 149 | * 使用BNB的rpc接口配置SDK：BNB提供的rpc接口可以在这里查看[BNB-RPC](https://docs.binance.org/smart-chain/developer/rpc.html) 150 | * 集成浏览器插件对应的SDK：例如MetaMask或Binance Wallet Wallet 151 | * 如果希望查询一些rpc接口不支持的链上数据（例如交易记录，token信息），还可以集成区块链浏览器的接口[BNB Scan APIs](https://bscscan.com/apis) 152 | 153 | 我们提供了一个完成上述集成的[BNB dApp 示例](https://github.com/ObsidianLabs/bsc-dapp-example) 154 | 155 | 在这个例子中： 156 | * 应用在启动的时候会自动检测浏览器插件钱包，包括 Metamask 和 Binance Chain Wallet； 157 | * dApp也将会自动检测目前正在连接的网络（BNB主网或BNB测试网）； 158 | * 检测成功后，插件会弹出窗口请求用户授权访问； 159 | * 完成授权后 dApp 便可以访问到对应地址的信息，如地址和余额信息； 160 | * dApp 提供转账按钮，填入对应信息后点击调用按钮，dApp 会调用浏览器插件弹窗，用户通过插件进行签名后就可以完成交易了； 161 | * dApp同时提供了调用合约的方式。 162 | 163 | -------------------------------------------------------------------------------- /README.EN.md: -------------------------------------------------------------------------------- 1 | # BNB Development Quick Reference Guide 2 | 3 | English | [简体中文](https://github.com/ObsidianLabs/bsc-dapp-tutorial#readme) 4 | 5 | ## Catalog 6 | - [About BNB Chain](#About-Binance-Smart-Chain) 7 | - [Get Your BNB Wallet Ready](#Get-Your-BNB-Wallet-Ready) 8 | + [Using Browser Plugin Wallet](#Browser-Plugin-Wallet) 9 | + [Using Wallet App](#Wallet-App) 10 | - [Preparing BNB Development Environment](#Preparing-BNB-Development-Environment) 11 | + [Develop locally with BNB Studio Desktop](#Develop-locally-with-BNB-Studio-Desktop) 12 | + [Develop online with BNB Studio Web](#Develop-online-with-BNB-Studio-Web) 13 | - [Connecting to BNB networks](#Connecting-to-BNB-networks) 14 | - [BNB Smart Contract Development](#BNB-Smart-Contract-Development) 15 | + [Key Tools in BNB Development](#Key-Tools-in-BNB-Development) 16 | + [Creating Smart Contract Project](#Creating-Smart-Contract-Project) 17 | + [Contract Deployment and Interaction](#Contract-Deployment-and-Interaction) 18 | - [Developing a complete dApp](#Developing-a-complete-dApp) 19 | 20 | ## About BNB Chain 21 | BNB Chain is a sovereign smart contract blockchain delivering Ethereum Virtual Machine (EVM) compatible programmability and that are composed of Binance Chain and Binance Smart Chain (BSC) . By introducing the Proof of Stake Authority (PoSA) consensus mechanism, BNB has created an ecosystem that allows nodes, token holders, developers, and users to benefit from the blockchain. 22 | 23 | This article is a quick start guide for BNB developers, hoping to provide developers with help. 24 | 25 | ## Get Your BNB Wallet Ready 26 | In the blockchain world, digital wallet is not the actual container for cryptocurrencies. Rather, it stores pairs of encryption keys that represents ownership at certain address. Each pair of keys stored in digital wallets consists of a public key that is needed to initiate transactions and a matching private key for transaction encryptions and decryptions. Therefore, ownership of keypairs confers full control of the cryptocurrencies at the address associated to the keypairs. In development stage, we create randomized keypairs and a piece of address information through our digital wallet, with which we are able to receive from or send to cryptocurrencies to others. And this is why we have to get our wallet ready for development. 27 | 28 | We highly recommend to use **Browser Plugin Wallet** or **Wallet App** to manage keypairs while developing on BNB Chain. 29 | 30 | ### Browser Plugin Wallet 31 | Browser plugin wallet is the most popular choice in blockchain development. It's easy to set up, install and access the wallet in the browser. Besides that, since majority of blockchain applications are web-based, browser plugin wallet gives an intuitive access to pretty much all DeFi and NFT apps available on the market. 32 | 33 | | | Wallet | Address | Tutorial | 34 | |:---:|:---:|---|---| 35 | | 1 | MetaMask | https://metamask.io/ | https://docs.binance.org/smart-chain/wallet/metamask.html | 36 | | 2 | Binance Chain Wallet | https://chrome.google.com/webstore/detail/binance-chain-wallet/fhbohimaelbohpjbbldcngcnapndodjp?hl=en | https://binance-wallet.gitbook.io/binance-chain-extension-wallet/ 37 | 38 | *Please note*，**Binance Chain Wallet** supports both **Binance Chain** and **BNB Chain** and they're two distinctive blockchains that sometimes confuses people. 39 | 40 | ### Wallet App 41 | When a smart contract goes live, most of its users access it through a wallet app of their choice. 42 | 43 | | | Wallet | Address | Tutorial (Chinese only) | 44 | |:---:|:---:|---|---| 45 | | 1 | TrustWallet | https://trustwallet.com/ | https://www.binancezh.cc/zh-CN/blog/421499824684901157 | 46 | | 2 | MathWallet | https://www.mathwallet.org/en-us/ | https://blog.mathwallet.xyz/?p=3895 | 47 | | 3 | TokenPocket | https://www.tokenpocket.pro/en/ | https://mp.weixin.qq.com/s/xXjP_qAOF31f-mGauXl7Kw | 48 | 49 | 50 | ## Preparing BNB Development Environment 51 | ### Start Development today with BNB Studio 52 | BNB Studio is a powerful yet user-friendly graphic IDE platform, specially designed for BNB. It supports running locally on majority OS, including macOS, Windows and Linux and also on web browsers. Comparing with traditional Ethereum development toolkit like Remix and Ganache, BNB Studio streamlines environment preparation procedure and integrates essential tools for a complete development lifecycle, including a graphic code editor, project manager, keypair manager, block explorer, contract inspector and network manager. 53 | 54 | ### Develop locally with BNB Studio Desktop 55 | BNB Studio Desktop is a great all-in-one IDE platform for BNB developers at all levels. You may download the latest release of BNB Studio Desktop at its [Github Repo](https://github.com/ObsidianLabs/BSC-Studio) . BNB Studio currently supports major OS including macOS, Linux and Windows. 56 | 57 | #### Installation 58 | * macOS: Double click to open *BNB-Studio-x.x.x.dmg* and drag the app into Application folder. 59 | * Linux: Double click to open *BNB-Studio-x.x.x.AppImage*, Select *Properties => Permissions => Execute* and tick *Allow executing file as program* option. Close Properties window and double click to open the application.**Please note, different Linux distribution might have different application installation procedure.** 60 | * Windows: Double click to open *BNB-Studio-x.x.x.exe* 61 | 62 | #### Preparing Prerequisites 63 | Upon first successful startup of BNB Studio, you'll be directed to a welcome screen where shows a list of prerequisites for BNB Development, including Docker, BNB Node and Truffle. 64 | * BNB Studio relies on [Docker](https://www.docker.com/) to start BNB node and compile projects. If you haven't had Docker on your machines yet, click on *Install Docker* to visit official Docker website to download latest release and install. 65 | * [BNB Docker Hub](https://hub.docker.com/repository/docker/obsidians/bsc) stores Docker images for BNB nodes, which BNB Studio relies on to run BNB node. 66 | * [BNB Truffle](https://hub.docker.com/repository/docker/obsidians/truffle) is the truffle toolkit used by BNB Studio for project creation and compilation. 67 | 68 | When all prerequisites are successfully installed and started on local machine, a green *Get Started* button will replace the gray *Skip* button. Now go ahead and click to start your smart contract development! 69 | 70 |

71 | 72 |

73 | 74 | ### Develop online with BNB Studio Web 75 | BNB Studio also offers a web version for developers who wish to develop, compile and run BNB smart contracts online. BNB Studio web inherits most functionalities of the Desktop version but no longer require setting up dependencies on local machines. It's the perfect choice for BNB developers who wants to try out BNB development without worrying about setting up BNB dependencies locally. Visit [bsc.ide.black](http://bsc.ide.black/) to experience BNB development on the cloud. 76 | 77 |

78 | 79 |

80 | 81 | 82 | For more information and tutorials on BNB Studio, check out BNB Studio [Github Page](https://github.com/ObsidianLabs/BSC-Studio) 83 | 84 | 85 | ## Connecting to BNB networks 86 | BNB primarily offers two networks, namely BNB Mainnet and BNB Testnet. 87 | * BNB Testnet, is a test network for test purposes, where Testnet tokens can be *faucet* free of charge and therefore contains no monetary value. 88 | * BNB Mainnet, is the main network for production applications. Users are interacting with smart contracts on the Mainnet and thus Mainnet tokens (BNB/BEP20) are actual cryptocurrencies. 89 | 90 | BNB Studio has BNB Mainnet and Testnet connection preconfigured in the application and you may easily switch between these two networks. In order to support smoother development on BNB networks, BNB Studio comes with a set of built-in tools like Browser Wallet, Block Explorer, Faucet Tool, covering the most popular tools among BNB developers. 91 | 92 | ### BNB Block Explorer 93 | BNB offers block explorer apps for network and on-chain information inquiry, Click to access [Testnet Explorer - testnet.bscscan.com](https://testnet.bscscan.com/) or [Mainnet Explorer - bscscan.com](https://bscscan.com/). 94 | 95 | ### BNB Data Solution 96 | If you're no longer satisfied with the chain's speed in sync as a result of scalability limited by native nodes, StreamingFast offers an alternative streaming solution with full history for those who wants to get real-time updates of contracts, account balances, AMM prices or sync their local database, with speed 50x faster than nodes. Available to everyone for free at [StreamingFast.io](https://streamingfast.io) 97 | 98 | ### Faucet 99 | Developers often needs tokens when developing on BNB Testnet to play with contract or to make transactions. BNB Testnet offers [Faucet](https://testnet.binance.org/faucet-smart) service to acquire free Testnet tokens, of course BNB Studio also integrates [Faucet Functionality](https://github.com/ObsidianLabs/BSC-Studio#faucet) in the toolbar for easier invocation to faucet tokens. 100 | 101 | ## BNB Smart Contract Development 102 | 103 | ### Key Tools in BNB Development 104 | 105 | [Truffle](https://www.trufflesuite.com/truffle) 106 | Truffle is a development framework based on Solidity that aim to simplifies construction and management process of dApp. Truffle is written in Javascript comes with a powerful set of features to support compilation, deployment and test of smart contracts. 107 | 108 | [Solc](https://github.com/ethereum/solidity) 109 | Solc is command line compiler for Solidity. It compiles smart contract code written in Solidity into binary code in EVM and eventually deploy to act just like other smart contracts we have seen on chain. 110 | 111 | [BNB Client (base on Geth)](https://github.com/binance-chain/bsc) 112 | Based on Ethereum Yellow Paper, anyone are allowed to construct their Ethereum node with a programming language of their choice, however the most popular clients so far go to **Geth** and **Parity**. The difference is mainly the language, where Geth is written in Golang while Parity is made of Rust. Between these two, Geth is more popular and thus is the client implementation we use here. 113 | BNB Client is a BNB client application based on Geth, where both our BNB nodes (Testnet/Mainnet) are running on it. We can also run our own BNB nodes and local development network with self-installed BNB client of our choice. 114 | 115 | **BNB Studio** has integrated all essentials development tools including Truffle, Solc and BNB Client. 116 | 117 | ### Creating Smart Contract Project 118 | BNB Studio integrates a few smart contract template. You may create your first smart contract project with a corresponding template and start building your smart contract instantly. Built-in templates include: 119 | * Coin: A basic token-based smart contract 120 | * [Open Zeppelin](https://openzeppelin.com/): A smart contract offers ERC-20, ETC-721(NFT) tokens, based on Open Zeppelin. 121 | * [MetaCoin](https://github.com/truffle-box/metacoin-box):A MetaCoin template based on Truffle. 122 |

123 | 124 |

125 | 126 | ### Contract Deployment and Interaction 127 | 128 | BNB Studio offers one-click automated process to 129 | 1. [Contract Deployment](https://github.com/ObsidianLabs/BSC-Studio#Deploy-Smart-Contract-Project) 130 | 2. [Contract Interaction](https://github.com/ObsidianLabs/BSC-Studio#Call-the-Contract) 131 | 132 | Click to view corresponding tutorials on our Github. 133 | 134 | ## Developing a complete dApp 135 | 136 | The smart contract we just written is a services running on BNB Chain, it defines a series of on-chain transaction serving the purpose we have set in development. It functions like the backend service in the traditional software practice, so in order to take off the burden of programming, we also need to develop a frontend application to serve as the user interface to the smart contract so that the combination makes a simple, but complete blockchain application, also known as decentralized application or dApp. 137 | 138 | A successful Dapp project requires all of the following steps: 139 | * Integrate front-end SDK: A Ethereum-supported SDK like **web3.js** or **ethers.js** 140 | * Configure SDK with BNB-RPC interface: Documentation can be found at [BNB-RPC](https://docs.binance.org/smart-chain/developer/rpc.html) 141 | * Integrate Browser Plugin SDK: such as MetaMask or Binance Chain Wallet 142 | * *Optional* Integrate [BSC Scan APIs](https://bscscan.com/apis) to allow inquiry on-chain data that are not supported by RPC interface (i.e. transaction history, token information) 143 | 144 | Here's a complete [BNB dApp Example](https://github.com/ObsidianLabs/bsc-dapp-example) for your reference. 145 | 146 | In this example: 147 | * Application auto-detect Browser Plugin Wallet, including **MetaMask** or **Binance Chain Wallet**; 148 | * This dApp auto-detect current network (BNB Testnet/Mainnet); 149 | * If all tests passed, A pop-up windows will show up to request authorization for access; 150 | * This dApp offers **transfer** button. Input required information and press **Execute** button, dApp will invoke pop-up windows through browser plugin where users can sign the transaction to complete it; 151 | * This dApp provides methods to interact with contract. 152 | 153 | --------------------------------------------------------------------------------