In this project, I created a DAPP that allowed users to reserve and pay for various rooms at the hotel. I created many different variations of room types that users could choose to book. After the room has been reserved and the payment processed then the room would no longer be available for other customers to book. My project can be organized into several key components that had to come together for the entire DAPP to be functional.
The first key component of the DAPP was the basis which is the smart contract. In my contract simply titled, Hotel, I created an enumeration array where the room could be represented by either being vacant or occupied. A vacant room could be occupied and accept customers to book it, while an occupied room would reject any booking action and display an error message. For the payments to occur, the address of the account that deployed the smart contract would be seen as the owner. In the booking function titled book would check to make sure that the room number being passed existed in the array of rooms, that the room was vacant, and that the user had given the appropriate amount of ether for the room cost. After making sure all three conditions were met the room would be changed to occupied and the ether would be transferred to the owner of the contract. The last function getRooms() would be used in the App.js file of the DAPP to make sure that if the room is occupied then the room would be unbookable.
All of the relevant hotel room information was stored in the rooms.json file. This included the id of the room, the room number, the type of room, and the room price in ether. Overall there are 16 unique rooms with the room type varying from the most basic, single, to the most high-end, penthouse. Other room types include double, triple, suite, executive, and presidential. I created such a variety of hotel rooms in order to test the different prices of ether into the smart contract.
In creating the CSS, I decided to forego the included BootStrapCSS and instead use BulmaCSS as my CSS Framework. Most of the html code is to setup the look and design of the page. In order to make the page look like a real hotel, I added many elements such as the amenities of the hotel, the nearby attractions, and some things that are included in the hotel room. Aside from this, there is a description of each of the different styles of hotel room with the amenities specific to that hotel room and a picture of the hotel room. In booking the hotel room the customer simply has to click the button labeled with the hotel room number and start the transaction to spend the ether with the price located next to the button. After the transaction is successful the button with the hotel room number is disabled to prevent any room from being double-booked.
After using truffle to compile and migrate the smart contract to the blockchain, we can access the functions using web3.js, a javascript file to act as a mediator between the blockchain and the website. I created a file called app.js that holds the code to execute the transactions and to setup the website with the necessary functions. In my first function, init(), I read the data from rooms.json and used the room type to place the button into the proper category. The button has a few important things to note. First, by using the class name btn-book¬ we can detect when the button is pressed. With javascript we can create custom attributes that we can process later, so I created data-id and data-price to hold the id and price of the room rather than looking up this information later. The functions, initWeb3() and initContract(), are simply boilerplate code to be able to use our smart contract with web3. The next function markBooked() is used to make sure that if a room has been booked and is occupied then we can change that button to disabled. The last function handleBook() is what interacts with the smart contract to call the booking function. It can pass the address of the user and their ether to book the hotel room. If it fails any of the previously mentioned requirements then it will fail and refund the ether, otherwise it will be successful and the room will be reserved as well as the ether passed to the address of the user that deployed the smart contract.
