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

Calculator using PHP

This Calculator model will take inputs from the Number 1 and Number 2 fields and when the user clicks on the relevant operator the result will be displayed in the Results field. For log10(), to radian, to degree, sin, cos, tan operations only require one input. Hence, the user is instructed to input the values to the 1st field only. First, before proceeding with the calculation, we need to obtain the values from the text boxes. For that we should include all the form elements inside a form. The result is directed to the same page. Therefore we will use the form action as $_SERVER['PHP_SELF'] and the method as post. Next, we can obtain the values in the text boxes.       $_POST[' form_element_name '] will give you the value of the respective element. We can write the php code as follows (in the <head>) to obtain the value from Number 1 and Number 2 fields.       <?php              $num1=...
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...
Post a Comment
Read more