After 2 weeks of studying BlockChain and different DApps, it was time for me to try and build a simple DApp. I teamed up with a colleague, @markusveeyola, who is also studying BlockChain and we build a poll system.
DAppsとは
Decentralized Applications (DApps) are applications built using the BlockChain technology. For more information on Blockchain, please see this link: https://blockgeeks.com/guides/what-is-blockchain-technology/
There are lots of DApps availalabe online. However, there are common features between this application. Here are the features:
オープンソース (Open Source)
It should be handled by autonomy. You need a consensus to change the application.
分散型 (Decentralized)
It is necessary to store the application data in a social distributed BlockChain. This is to avoid central power.
インセンティブ化 (Incentivized)
Rewards should be given to the BlockChain's validator.
プロトコル (Protocol)
The community must agree to a cryptographic algorithm that indicates proof of value.
Pollとは
A poll is a survey in which people are asked about their opinion by choosing a category/candidate on a certain topic. This is done to find out how popular something is or what people wants.
私たちのPoll Systemとは
Our DApp lets the user create a poll and its candidates. The creator can also add a title, description, and the end-date for the poll. Then, other users can vote the candidate they want to. Elections and group decisions can be conducted through our system. Decisions such as what food to eat, where to travel, and class president election.
使用されるTools
To make the system, we used React.js, Web3.js, Solidity and Github. We placed all our data in the BlockChain via Solidity. We did the front-end of our web application using React.js. Then connect React.js and Solidity using Web3.js. We stored our code in a repository in Github. During development, we struggled the most in using Web3.js because we encountered a lot of errors. Also, there was no complete documentation about Web3.js so resolving the errors was very hard.
For more information about React.js, Web3.js, Solidity, and Github, please see the links below:
React.js : https://reactjs.org/
Web3.js : https://web3js.readthedocs.io/en/1.0/
Solidity : https://solidity.readthedocs.io/en/v0.4.25/
Github: https://github.com/features
ApplicationのScreenshot
Here are the screenshots of our application. It's a simple application that only has 2 pages.
You can view our code from GitHub in this link: https://github.com/vincemillora/pollSystemBC
Create Poll
The Create Poll page is just a simple form. The creator needs to input the name and description of the poll, and when it will end. Users can also search for a poll using the search form in the header.
Poll details と Vote Candidate
The Poll contains the name and description of the poll, and the start and end date of the poll. The creator of the poll can add a candidate using the add form. Users can view the candidates and see the progress of the poll. They can also vote for their favorite candidate.
まとめ
This test was very fun and we learn a lot. We learned how to use React.js and Web3.js. We learned how to deploy the Solidity Contract to Web3 using the Remix IDE. It was also our first time to use Github so this project is the first project in our repository. The best thing that we learned was that there are a lot of problems on building a Dapp, so thinking and looking for a solution is very important.