# Getting started

In this section, we will walk through the default example that comes with the [BUIDL](http://buidl.secondstate.io/) IDE. The complete source code for this example is [available here](https://github.com/second-state/buidl/tree/master/demo/default).

**Access the BUIDL IDE from your browser:** [**https://buidl.secondstate.io/**](https://buidl.secondstate.io/)

{% embed url="<https://www.youtube.com/watch?v=K8gMUeOwz1s>" %}
Watch a 4-min video on how to create your first DApp in BUIDL
{% endembed %}

{% hint style="info" %}
BUIDL works with the [Second State DevChain](https://docs.secondstate.io/devchain/getting-started) by default. It could also work with any [blockchain started by the Second BaaS](https://docs.secondstate.io/buidl-developer-tool/working-with-baas) service, as well as any [Ethereum compatible blockchains](https://docs.secondstate.io/buidl-developer-tool/broken-reference).
{% endhint %}

#### Step 1: Create and deploy a simple Solidity smart contract

Load [BUIDL](http://buidl.secondstate.io/) in your web browser. You will see a simple smart contract already in the online editor window.

![](https://4126318435-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ljq8VpUhFWpzGRMLvdp%2F-LjvrtFax_Kix6fS7JjF%2F-LjvsJyJ8nxi2hJ-LiDn%2Fbuidl-getting_started-01.png?alt=media\&token=21512bd9-0761-43e0-acd2-a8f5b1a69b0d)

The contract simply allows you to store a number on the blockchain. You can view or update the stored number by calling its functions `get()` and `set()`.

Click on the **Compile** button to compile the contract. A side bar will open to show you the compiled ABI and bytecode of the contract.

![](https://4126318435-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ljq8VpUhFWpzGRMLvdp%2F-LjvrtFax_Kix6fS7JjF%2F-Ljvt0TCDNmMVAyWB7Ap%2Fbuidl-getting_started-02.png?alt=media\&token=d374261c-89c2-41df-a48a-dbfaa3f5f2d6)

Next, you can press the **Deploy to the chain** button on the left panel to instantiate and deploy the contract to the [Second State DevChain](https://docs.secondstate.io/smart-contracts-search-engine/getting-started). You can interact with deployed contracts by calling its public methods from inside [BUIDL](http://buidl.secondstate.io/) -- you can **set** its value and click on the **Transact** button to save the value onto the blockchain, and then click on the **Call** button to see the value in the **LOG** panel.

![](https://4126318435-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ljq8VpUhFWpzGRMLvdp%2F-LjvrtFax_Kix6fS7JjF%2F-LjvtBzOEBmrEDsKAX9G%2Fbuidl-getting_started-03.png?alt=media\&token=397aa5f3-17c3-4553-b413-0d088a4d6d09)

#### Step 2: Create a UI in HTML

Once deployed, click on the **dapp** button on the left bar to work on your DApp.

![](https://4126318435-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ljq8VpUhFWpzGRMLvdp%2F-LjvrtFax_Kix6fS7JjF%2F-LjvtS5gzcg150d5Y5yC%2Fbuidl-getting_started-04.png?alt=media\&token=22c3aaa5-50b9-498c-ac7a-bdcf5fa52ddf)

The HTML tab above shows a simple HTML page with two buttons.

#### Step 3: Create JS script to interact with the smart contract

Next, go to the JS tab. It shows JavaScript on how to interact with the smart contract.

![](https://4126318435-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ljq8VpUhFWpzGRMLvdp%2F-Lq2crIPmRjFoa5vnQHJ%2F-Lq2d8Bzjyph4VxkOGYS%2FScreen%20Shot%202019-09-30%20at%202.25.50%20PM.png?alt=media\&token=03f6cab5-fbb4-4810-aa22-31dd3ee367c2)

The JS has four sections. The first section is `Don't modify` as it is populated by the BUIDL tool itself. It contains information about the contract you just deployed via BUIDL.

The second section shows you the boilerplate to instantiate the `contract` and `instance` objects using data from the first section.

```javascript
var contract = window.web3 && web3.ss && web3.ss.contract(abi);
var instance = contract && contract.at(cAddr);
window.addEventListener('web3Ready', function() {
  contract = web3.ss.contract(abi);
  instance = contract.at(cAddr);
});
```

The third section is the event handler for the **Set Data** button. It shows how to call the smart contract's `set()` function in a transaction from JavaScript.

```javascript
document.querySelector("#s").addEventListener("click", function() {
  var n = window.prompt("Input the number:");
  n && instance.set(n);
});
```

The last section is the event handler for the **Get Data** button. It calls the smart contract’s `get()` function and displays the result.

```javascript
document.querySelector("#g").addEventListener("click", function() {
  console.log(instance.get().toString());
});
```

#### Step 4: Run the DApp

Finally, click on the **Run** button to run the DApp. You will see the DApp UI in the right panel. You can click on the **Set Data** button to store a number, and **Get Data** button to retrieve the stored number.

![](https://4126318435-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ljq8VpUhFWpzGRMLvdp%2F-LjvrtFax_Kix6fS7JjF%2F-LjvviN3FlXf14V8PpSB%2Fbuidl-getting_started-06.png?alt=media\&token=3bab6ba5-58d3-45d0-8c96-7c94e6e3a0b2)

Congratulations. You now have a complete DApp deployed on a public blockchain!&#x20;

Next, you could explore how to develop more complex DApps on BUIDL, such as [data driven DApps](https://docs.secondstate.io/buidl-developer-tool/access-contracts-data) or [rules-based DApps](https://docs.secondstate.io/buidl-developer-tool/rule-based-smart-contract).