Skip to main content

Creating a dApp using Ethereum and Meteor (Setting up)

This blog posts contains the step to be followed when creating a simple dApp (Decentralized Application) using Ethereum and Meteor. 

 This application will not use the actual ethereum blockchain. Instead it will connect to the Testnet. This application is developed for Demo purposes. Hence, Meta mask extention will be used. If you need to connect to the main network, geth client or any other client for Ethereum should be used.

 Step 1: Create a meteor project

 In order to create a new meteor application, run the following command inside the directory you want the app to be created in.

meteor create <app_name>

 The application will be created as follows.

Step 2: Add Web3 to the project

 Web3 library is what allows you to interact with the ethereum blockchain. Web3 library can be found at [1]. Inside the meteor application just created run the following command to add Web3.
meteor add ethereum:web3



 Step 3: Download and install Metamask extension for Chrome

 This will allow you to interact with the Ethereum blockchain without having to download the entire blockchain into your local machine like geth client does.



Make sure you are connected to the Test Network as shown below.


 Step 4: Launch the Meteor Application

 To run the meteor application give the following commands.

meteor npm install


 meteor 



Now if you browse localhost:3000 via the browser, your application will be available.


Step 5: Open the application in an IDE / Text Editor

Create a folder (lib) and a JS (lib.js) file inside that folder as below.



Step 6: Developing a sample dApp

1) Initialize web3 object


Now your application is connected to the Ethereum blockchain.



2) Checking the balance

Inside the main.js insert the following code inside the button click function.

web3.eth.getBalance("0x6DcFA49E1c61758AFd02789c6d2bacdfC4c9cEd9", function (error,result) {
  instance.counter.set(result);});

This address should be replaced with yours.

Your address can be found through the meta mask extention as below.

Your final main.js will look like below.




You can also change your HTML as below.



When you reload the application and click on the button, the balance will be shown.




Labels:

Comments

Post a Comment

Popular posts from this blog

Admin panel of a Q & A Forum

In a Q & A Forum, when a user posts a question, it should be sent to the administrator for approval in case it contains inappropriate content. After approval it should be removed from this pending approval page and other users should be able to see the question afterwards. To enable this, we should maintain an approval column in our database table of records and for each record approval should be set to false by default. In the Pending approvals page only the records with approval=false should be displayed. Below is  the MySQL  statement for retrieval, $sql="SELECT * FROM topics WHERE approval=false"; To know which post was approved we should embed the post_id to the URL. And the relevant post should be updated as approval=true. Below is the complete code. <?php $sql="SELECT * FROM topics WHERE approval=false"; $query=mysqli_query($conn,$sql); echo '<form name="approve" method="p...
Post a Comment
Read more

Getting Started with OAuth 2.0 using WSO2 Identity Server 5.3.0 and Playground2 Sample

This blog post provides step by step instructions for trying out OAuth 2.0 using WSO2 Identity Server . Here I use Identity Server 5.3.0 which is the latest released version by the time of this writing. The official documentation for this is available in https://docs.wso2.com/display/IS530/OAuth+2.0+with+WSO2+Playground , however for a beginner, it does not provide all the instructions such as creating a Service Provider with necessary configuration. However, by following the steps below, you can simply setup Identity Server and the playground2 sample webapp and test the entire OAuth 2.0 flow. Creating the Service Provider First step is to create a service provider in Identity Server. This is required because when a client application talks to Identity Server via OAuth 2.0, Identity Server has to identify the client and the incoming traffic. We set this configuration inside the service provider. Login to the Management Console of Identity Server and create a service provi...
1 comment
Read more

Interacting with an Ethereum Smart Contract using Meteor and Ethereum

This blog post contains steps on how to interact with a specific contract on the blockchain extending the application created in the previous blog post [1]. Step 1: Add  frozeman:template-var This is used since we use callback very often. This wrapper can be found at [2]. Give the following command in order to add it to our application. meteor add frozeman:template-var Step 2: Adding the balance to be viewed inside the template Alter your code as below. main.js main.html When you refresh the browser, you should get the below output without having to click the button. Step 3: Writing the Smart Contract in Solidity Solidity is the language that ethereum uses to write smart contracts. In order to write the smart contract for our application we will use the online Solidity compiler which can be found at [3]. Step 4: Deploying the Smart Contract Log in to the MetaMask and make sure you are on the testnet. Select 'Create' in the right side p...
Post a Comment
Read more