What this tutorial covers
This tutorial is a brief introduction to Full Stack DApp deployed on Matic with Proof of Stake Security. As a DApp developer, to build on PoS security, the procedure is as simple as taking your smart contract and deploying it on Matic. This is possible because of the account based architecture enabling an EVM-compatible sidechain.
Building a Decentralized Airbnb
Installation and Prerequisites
- Nodej 8.10+
If you need to update node:
You can download the Metamask extension by using this link: https://metamask.io/
What are we building?
We plan to build a Decentralized Airbnb that incorporates three main functionalities:
- Rent out a space
- View available spaces
- Rent a space
Go ahead and clone the repository and install dependencies and then run
Setting up Data Structures
We’d like a property with a name, description, owner and a price to be rented.
So we’d like a structure named ‘property’ that would include a name, description, price, owner, boolean flag denoting if its active or not, and a boolean array denoting the booked days of the property.
We’d also like to keep track of the Property object we just created by mapping a unique property id to each new Property object.
For this, we first declare a variable propertyId followed by a mapping of propertyId to property, called properties.
Having a property we’d also like to keep track of all the bookings made till date.
We can do that by creating another structure for a Booking with properties such as: propertyId, check in and check out date and the user who made the booking.
Similar to what we did to keep track of each property, we can do to keep track of each booking - by mapping each booking id to a particular booking object.
Next, we would want to add some logic to the flow of data and the working of the smart contract. For this, we add functions.
On the whole, we require three basic functions:
- To put up a property for rent on Airbnb market -
- To make a booking -
- To take down a property from the market -
We used two functions
_createBooking in the
rentProperty function. These two functions are internal functions and as the naming convention in Solidity goes, they are prefixed with an underscore. We require these to be internal for we won’t want anyone to be able to send funds to their own account or create a booking on an inactive property.
These two functions are defined as:
_sendFundsYou can read more about the particular transfer function we’ve used here.
You can view the entire code here.
Once you have the contract code ready, next steps would be to deploy the code on a testnet and test its working.
Deploy and Test!
For this, we use the Remix IDE - an online IDE to develop smart contracts.
- Head over to https://remix.ethereum.org If you’re new to Remix, You’ll first need to activate two modules: Solidity Compiler and Deploy and Run Transactions.
If not already activated, you will need to activate plugins such as
Deploy & Run Transactions and
Your left menu should look something like this:
- Create a new file, Airbnb.sol
- Copy the entire smart contract code and paste it in the editor
0.5.7+commit.6da8b019as the compiler and compile the smart contract
- Once compiled, the smart contract is ready to be deployed onto the testnet/mainnet. For this tutorial
- Copy the generated ABI - we would be needing that for our next steps
Once Metamask is connected to Remix, the ‘Deploy’ transaction would generate another metamask popup that requires transaction confirmation.
- Click Deploy
- And once the contract is deployed you can test the functions
Setting up our DApp
Inside the cloned repository, navigate to
plugins directory inside
Paste the contract address copied in previous step to the
airbnbContractAddress variable present in
Get the ABI copied from the previous step
- navigate to
dapp-ui/plugins/airbnbABI.jsonand add the following:
- Paste the ABI as the value of the “abi” key just defined
- It should look something like this:
Connect UI to Metamask
Next, we’d like the UI to be connected with Metamask. For this we follow the following two steps:
First, add the
setProvider() method inside
mounted() method in
Note: You might face indentation issues after pasting it.
Next we’d like to inject metamask instance - for this we define the
setProvider() method in
Defining components and functions
Once we have connected metamask, we’d next want to be able to communicate with the deployed contract. For this, we’ll create a new contract object - that represents our airbnb smart contract
dapp-ui/plugins/utils.js create the following function that instantiates and returns the
With metamask connected and contract initiated we can go forward with interacting with our contract
dapp-ui folder structure looks something like this:
dapp-ui/components directory, we have the separate components that make up our app interface.
The three main functions we’d like our app to support are:
- Post a new property - or rent out space
- View all available properties
- Rent a new property from all available spaces
We’ll first set up our property form - which is used to rent out a property - on the backend it interacts with the
rentOutProperty function of our Airbnb smart contract
dapp-ui/components/propertyForm.vue and add the following code inside
postAd() method. The
postAd() method should look something like this:
postProperty function is to be defined inside
dapp-ui/plugins/utils.js. Which should look something like this:
Next, to incorporate booking of a new property, we’ll define the
book() function in
dapp-ui/components/detailsModal.vue. Copy the code snippet inside the
bookProperty() function is to be defined inside
utils.js and should look something like this:
Copy the code snippet inside the
The next and final functionality to add is fetching and displaying all available spaces.
fetchAllProperties() function is invoked inside
index.vue and defined inside
dapp-ui/plugins/utils.js and add the following code to the
Run and Test!
Aaand this marks the end of our DApp tutorial! We know it’s been a long one.
npm run dev to view and interact with your decentralized application!
Click on ‘Rent your Property’ button on top right, it displays a dialogue box requiring title, description and price. The submit button sends these values to the function ‘rentOutProperty’ on the smart contract in the form of a transaction. Since it ‘transacts’ with the blockchain it would create a metamask popup requiring you to sign the transaction, shown below.
The Metamask popup displays the gas price for the transaction.
After the transaction is confirmed, the property lives on the blockchain and since it is available to be booked, it is displayed on the homepage.