A Simple Guide To Create a decentralized Application on the Blockchain (DApp)

Create, compile, deploy and test a smart contracts on Ethereum + Angular/react

In this Tutorial, we learn how to create a simple decentlized application by writing a simple smart contract and the proper UI for it, then we use web3 to allow our application to talk to the blockchain, at the end we take a look at two most used javaScript Frontend frameworks "Angular and react" and see which could be the best possible option while creating a DApp.

before we start we need to know what is a blockchain and why and most importantly when should it be used, therefore we look at the pro and cons of using the blockchain to realize blockchain is not always the solution and we need to be sure before approaching it.

Content:

  • What is a Blockchain?

    • before we start with the development, we need to undrestand what blockchain is and how it works.

    by interacting with a usual web application, user connects to a central server over a network by using a web browser.
    the entire data and the code of this web application is on the central server that has a central database, therefore each transaction between user and the application, must communicate with this central server on the web.
    Hoewver in certain situation there could be problems such as the data on the database could be changed, most importantly if an event has to happens( typically in voting system or money transaction) and by having a central database, every information could be hacked or changed or removed and therefore cause various problems in higher scales.

    not only data are not immune, the source code and logic of the program could also be changed and cause major problems in server and somethimes even cause in economical issue or leak the personal information. these are our motivation to build the application on blockchain, where there is no middle man and we don't have to simply trust a thid partie.
    By builing our application on blockchain we let everybody connected to the network to use the application without the data being japordized or the avoiding any changes in the source code. Instead of having a network, a central server, and a database, the blockchain is a network and a database all in one. A blockchain is a peer-to-peer network of computers, called nodes, that share all the data and the code in the network.
    So, any device that is connected to the blockchain, in in fact a node in the network, and can talk to all the other computer nodes in the network. each node has a copy of all the data and the code on the blockchain. There are no more central servers. Just a bunch of computers that talk to one another on the same network. Instead of a centralized database, all the transaction data that is shared across the nodes in the blockchain is contained in bundles of records called

    blocks, which are chained together to create the public ledger. This public ledger represents all the data in the blockchain. All the data in the public ledger is secured by cryptographic hashing, and validated by a consensus algorithm. Nodes on the network participate to ensure that all copies of the data distributed across the network are the same.
    That’s why many applications are build on the blockchain, by doing so they can ensure that each action done by user was counted, and that it did not change(specially in voting applications).

  • What happens on the user side?

    • each user needs an account with a wallet address that is charged with some Ethers, Ethereum's cryptocurrency.
    Once they connect to the network, they pay a small transaction fee to write this transaction to the blockchain, each transaction could be an action or request from the user like voting or registering or sending information...

    This transaction fee is called “gas”. Whenever an action is done, some of the nodes on the network, called miners, compete to complete this transaction. The miner who completes this transaction is awarded the Ether that the user has paid for the transaction.
    also reading data from the blockchain is free but writing to it is not and the user pays with the ether for it.

  • Advantages:
    • Blockchain being decentralized has some advantages over traditional databases:
    1. Manipulation of data is very difficult since each node has a copy of the Blockchain.

    2. Transparency is one major advantage of the Blockchain-based data, which gives the user maximum level of trust and confidence in network.

    3. since the blockchain-based data is distributed across a large network of computers, it is safer against data loss or any possible infrastructure failures, for example if a node is currupted other nodes have the copy of the blockchain.

    4. data bieng immune to erase or undone, however this could be an advantage and sometimes a disadvantage.

  • Disdvantages:
    • Blockchain may be able to solve so many problem with it's two major advantages such as transparency and immune to manipulations, but there also some disadvatages that needs to be takeen into consideration while working with it.

    1. Transaction delays and fees, it usually takes a long time to for transactions to be registered. also each transaction costs and therefore it's not wise to write everything on the blockchain because it can cause delay in application and costs more than it should.

    2. Security vulnerabilities: over the years they have found some security vulnerabilities to attack the blockchain, therefore the network is not completely immune to attacks.

    3. We said transparency is one major advantages of the Blockchain, but even Blockchain can not guarantee a full transparency. even if they have moved their data on the blockchain, there could be part of the system running on the backend application where no user is able to see and therefore the transparency of the blockchain is not fully guaranteed and it depends on each system.

    4. Access control in a public chain, as we know there are two types of chain, public and private and in public chain each user has full access to the data written on the blockchain, which means that each user can see everything on the blockchain, this might help for the Transparency but in some cases, people are using private chain and allow only authorized member to be a part of it.

    5. The risk of “forks.” forking a blockchain has happened over the years and it's not always a negative situation but by forking the chain, people could change the protocol and use the currently saved information.

  • What to write on the blockchain?

    • As we mentioned above, before we save an information on the blockchain, we need to be sure about it, because once an information is saved, all other nodes are getting the information, thus, deleting the information is nearly impossible, also writing on the blockchain costs time and money therefore, only the most important information should be written. we can use a databank on the backed-side to save the the rest of the information.


  • What is a smart contract?

    Bitcoin blockchain is the base of all blockchains. It main goal was peer to peer transfer of value, later on a framework for code execution was introduced by Ethereum Founders. The difference between bitcoin and the Ethereum is the wallet for initiating transactions. Ethereum supports smart contracts. Smart contracts are used in decentralized application that aim for more than just the transfer of value. A smart contract is a piece of code deployed in the blockchain node, it is where the logic of the blockchain is written and will be executed from. Execution of a smart contract is initiated by a message embedded in the transaction. Bitcoin and other crypto currencies are requesting simple addition and subtraction. However, Ethereum enables transaction that can achieve more complicated operations. We can have conditions or authentication and evaluation of specific accounts. Structurally speaking, a smart contract acts same as a class definition in an object-oriented design. A smart contract like any other data structure has data, functions or methods, which could be private or public, we can set variable sate or change it and then ask for the new changed state of a variable. Solidity is the programming language provided by Ethereum, it’s the language of smart contract.

Create the smart contract

In this section we will be covering how to make a smart contract?

  1. Step 1: Write the smart contract in solidity

    2. Solidity like any other language has it’s own syntax and there is a documentation page , which will be update once a new version of library is released.
    we always start with the "pragma + version" , since it indicates the version of the solidity language.
    We usually try to keep the contract short, so we don’t have to re-deploy our contract every time something changes, because re-deploying means changing the address and, in some cases, address of smart contract needs to be stable. Other than that, everything that we write in smart contract will be staying on the blockchain, so we try to keep the private/not important information out of smart contract, basically the smart conract contains the logic behind our Application.


  2. Step 2: Test the smart contract in Remix

    3. Easiest and the fastest way to test, if our contract is functioning and the syntax of our code is correct, is by testing it in remix , remix is “a web browser-based IDE that allows you to write Solidity smart contracts, then deploy and run the smart contract .” [Remix - The Ethereum Wiki] usually when a contract runs on the remix, it means that we can deploy it and know that everything is alright. Remix has 3 type of environments: Javascript VM, Injected provider, or Web3 provider. Both Web3 provider (Ethereum node) and Injected provider (Mist or Metamask) require the use of an external tool. The JavaScript VM mode is convenient because each execution runs in your browser. Thus reloading the page will restart Remix with an empty state.


  3. Step 3: Create truffle base project and run either testRPC or ganache

    4. In order to make sure that our smart contract does exactly as it is sopposed to and checking if the right event is emited, we write a test-based application to test our smart contract and we use truffle init project for it.

    • Before: install Npm / truffle/testRPC or ganache

      • GitHub
    • Import smart contract in folder contract:

      • With truffle init, we get an empty deployable project from truffle and then we have to add our own smart contract in truffle contract folder.

    • Change the truffle.js and write another file for deploy your current contract:

      • Then we need a migration file for the new contract and in config file we have to establish our information.

    • Create tests either in JavaScript or in solidity and import them in folder test
    • Run truffle compile and test

    Once everything is ready we check for truffle migrate and compile and if did deploy and compiled without any problem, then we can start writing our test. Ther are possibility for writing the tests, one is with javascript or with solidity itself. Tests have to be usefull and they have to test our main functionality and also checks if the events are emmited, when they should and not emitted when they should not. since we need accounts to test our smart contract, one for sender and one or many other for receiver we lunch either testrpc or ganache , we just have to be sure that the local port is the same as our config file in truffle.

  4. OPTIONAL: create the frontend and use GitHub pages to upload the code and the contract

Interact with the smart contract: How to create a static web page and run it on local host: in this section we see how to make transactions on the Ethereum blockchain without using any wallet or extension like Mist or Metamask, this could be very helpful, because then our Dapp can be accesed from anybody and doesen't require metamask.

  • Step 1: Writing the smart contact:

    • when we write the smart contract and deploy it on the remix we c an copy the ABI from the remix and save it in a file called contract.jason, we also copy the address of the deployed contact in our jason file, incase we need to use it later, since we deployed on the ropsten testnet, we can find all transaction done by this contract on https://ropsten.etherscan.io/address/ + smartContractAddress. then we need another file called networkinfo.json ,which we'll be using later, what we save in this file is our infura account information public key adress and the private key address.

    GitHub

  • Step 2: Writing the Frontend:

    • in the frontend, we keep it very simple :

    GitHub
  • Step 3: Interact with the smart contract through web3.js:

    • Requirements:

      • >node.js >python (v2.7.15)

    • before installations:

      • >npm install

    • the static page can be accessed on http://localhost:80/

      • first call >npm start in consule or cmd .

    This part may be complicated because the lack of Documentation on web3.js. first, we create a server.js file and Connect to Infura’s peers and add Required node-modules such as:

    GitHub

    then we add the path of those 2 jason file that contains our ABI and our networkInfo.

    GitHub

    then we save our needed information from theses two files in seprate variable such as const abi or const infura-url, by simply calling :"const abi= contractinfo.abi".

    GitHub

    in the next step we create new instance of web3 and set the provider:

    GitHub

    what we need now is the get function to make the transaction once the button is clicked, in this get function we call the function sendTx(callback) {} in order to make a transaction and register a car in our case.

    GitHub

    now that everything is set, we can write our send transaction function, which create a transaction once the button is clicked

    GitHub

Deploy

In this section, we see how to deploy the DApp on the test-net: however there are many possibilities such as deploying directly from truffle or from remix or by using web3.js

TESTNET vs Mainnet

The only difference between a Testnet and Ethereum mainnet is that the mainnet is used for real world transactions that have real world values, however the risk of deploying directly on the mainnet is a lot therefore usually we test on a testnet like Ropsten, Rinkeby, or Kovan and after making sure that the contract works exactly as it is supposed to, then we deploy it on the mainnet.
  • There are various Testnets and each have their own advantages and disadvantages, in this tutorial we choose ropsten, since it has bigger chain size and the ether can be mined, it also is easier.

    • Deploy directly from REMIX to Ropsten:

    • Step 1: Install meta mask

      • before we start we need to install meta-mask

      What is the Metasmask?

      MetaMask is a browser extension that can be installed from https://metamask.io/. It lets you run your dapp without being part of the Ethereum network as a Ethereum Node. Instead of connecting directly to the Ethereum network, you can connect to another Ethereum Node which is called INFURA and therefore run smart contracts on Infura Node. it also manages the Ethereum wallet, which contains the Ethers that user is willing to use, by using the metamask, user can send and receive Ethers through a dApp. there are other tools similar to meta-mask, but because it’s simplicity meta mask is widely used.

      GitHub

    • Step 2: Choosing the test environment and connect:

      • in this step we choose our Testnet which is Ropsten, we can ask for test ether: https://faucet.ropsten.be/, https://faucet.metamask.io/

    • Step 3: Deploy smart contract to the ethereum TESTNET:

      • by going back to the Remix IDE,where we wrote our code, once the metamask is connected we can deploy the smart contract by making the transaction through the ropsten testnet.

    React/Angualr

    in this section we will be comparing two most used JavaScript Frontend frameworks

    Why use javascript Frontend Frameworks?

    Using a JavaScript Frontend framework makes coding easier and faster, instead of writing code from the scratch we can use currently existing libraries, we can also avoid writing the same part over and over. It also helps us to achieve simpler and shorter code, which is helpful while reviewing and debugging, therefore it is more efficient.

    A comparison between angular and React:

    • Angular

      • Angular is one of the most used javascript Frontend frameworks and it is maintained by Google which is one of the reason that it became very popular.

        Pros:
      • Two-way data binding: Angular supports data-binding, which makes it easier for developers. The two-way data binding instantly mirrors the changes made to view in the model, which allows the developer to see the result in real time.

      • DOM manipulation: since data-binding in Angular works in both ways, when a change is applied to the model, the developer will be informed, therefore if there is a manipulation in DOM (Document Object Model), the developer will be notified therefore saving time and efforts .
        Cons:
      • Divided community: through the years many developers have changed their platform and have been using other frameworks, the reason for it could be the introduction of Angular 2 which caused many developers to rewrite their App to become compatibel with the new version, many however decided to change the framework so they could avoid such problems in the future.

      • Updates: Updating the software is part of software development and many Applications are updated yearly, however Angular updates are more that this and the constant change takes the stability of the platform away, which could cause problem for the developers, it is not easy to code when the platform changes often.

      • Initial load time: This problem is mainly solved now however still affects the older generation of computers and devices, The problem with loading is the time that it takes to render all the pages of the website, which sometimes is overloaded with the DOM manipulation, is longer that usual, which can cause delays in programming.

      • poor documentation: since the Documentation provided by the platform is very limited, it makes it very difficult for the new comers to get to know the framework and fully use it. However through the years they have tried to make the documentation better but still not easy for the new users to adopt to the platform.
      • When to use?

        • There is no specific reason why to use and not to use Angular as each developer has it's own reason, however if you decide to learn the Angular framework, it's better to plan the time for learning and be patient with it's new Structure.

    • React

      • React is not a framework but a JavaScript library created by Facebook, it is a User Interface (UI) library and a tool for building UI components.One of the reason that React became popular is that the clinet and server side can be rendered together, therefore they can work together.

        Pros:
      • JSX:(JavaScript XML) which is an XML/ HTML like syntax that is currently used by React. what it does is to help to XML/ HTML like text to be co-exist along with JavaScript react code. Therefore the HTML like text found in JavaScript files can be transformed into standard JavaScript objects.

      • Virtual DOM: it is also a node tree which lists elements along with their attributes and content as Objects. a node tree will be created out of the React components by The React render function. This would then update the tree incase the data model is changed through actionsof the users or the system.

      • Testability: in React there is "state", which is an object that determines how the component should behave and render. and the user can manipulate and change this state and observe the possible actions and output of the given state. this functionality helps the user to test throughtfully and debug faster and easier.

      • SSR: with Server-Side rendering user can pre-render the initial state of involved react components only at the server side. SSR makes the rendering faster since the browser can start the rendering without waiting for all the JS to be loaded , the reason for it, is because the response of the server will be only html file of the source code that is ready to be rendered.

      • One-Way Data Binding: we said that angular supports two way data binding but reacts supports only one way data binding, which means that the user has full control over everything and there will be no manupulation from system or other users, because data flow only in one way.

        Cons:
      • Poor Documentation: Same as Angular, Reacts also lack a good Documentation, which can bring the new users to difficulty, however react is easier to learn and the react community is more active and more populated.

      • JSX: We said that Angular has a steep learning curve, reacts might be easier to learn, but the JSX (JavaScript XML) has by itself also a steep learning curve, which brings more difficulty for users and developers. JSX was supposed to be an Advantage of react, which avoid any injection to the code and therefore protect the code. But it comes with complexity that some developers are not encouraging.

      • React is not a MVC: react is only a View library. therefore in order to maintain state and model, developers are using other libraries such as Redux or the new React Hooks API.

      • When to use?

        same as for the Angular, using react is only the developer's choice, if the time is limited then reacts is the better option since it is easier to learn.

  • * Other options?

    • Ember and Vue are other options, they might not be as popular as React and Angular, but they each has their own Advantages and through the years Vue has gained a lot of attention.

  • * Is it possible to change from a framework to the other?

    • yes, it is possible, however in most cases the entire Application has to be written again in order to be compatible with new Framework, therefore it is better to choose the right Framework from the beginning.

    GitHub pages setup !

    In this section, we will be publishing the static website on github so everybody can access it. These steps will guide you through publishing your Project into a repository.

      GitHub
    1. GitHub signup: first of all, you need to create an account in github, if you don't have one already.

      2. github_signup
    2. Create a new Repository: you need to create a Repository, the Name could be the name of the project.

      3. github_signup
    3. pushing the code to the repository.

    4. by going to the setting you can see the link to the github page, which is basically username + github+ io +repository name. most importantly the HTML file needs to be the correct HTML format.