Welcome to the world of decentralized applications (Dapps), where the integration of real-time data is crucial for functionality and user experience.
In this tutorial, I will walk you through the process of building a DApp that utilizes RedStone Oracle to provide real-time Bitcoin price data.
This guide assumes you have a basic understanding of Node.js, Express.js, EJs, and JavaScript.
Step 1: Initialize Your Node Project
Create a new folder in your preferred directory and create a new file inside the folder with the name app.js.
mkdir bitcoin-price-tracker
cd bitcoin-price-tracker
touch app.js
Step 2: Initializing the app.js using NPM command
Initializing the app with the npm init command sets the developer environment with our specific configurations.
npm init -y
In your code editor, open the package.json file and modify it to the code below:
{
"name": "bitcoin-price-tracker",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"start": "node app.js"
},
"keywords": [],
"author": "",
"license": "ISC"
}
Step 3: Installing Dependencies on the app
Installing the dependencies needed to get the tracker running; you need Express, EJS, and redstone-api.
npm i express ejs redstone-api
Step 4: Fetch Bitcoin Price Data
Modify your app.js file to include the logic for fetching Bitcoin price data from RedStone Oracle.
const express = require('express');
const ejs = require('ejs');
const redstone = require('redstone-api');
const app = express();
app.use(express.static('public'));
app.set('view engine', 'ejs');
app.get('/', async(req, res) => {
const bitcoinPrice = await redstone.getPrice('BTC');
const btcPrice = bitcoinPrice.value.toFixed(2);
res.render('index.ejs', {price: btcPrice});
});
app.listen(5000, ()=> {
console.log(`Server started at port 5000`);
})
Then create a folder named views in your project and in the folder, create a file named index.ejs and paste the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bitcoin Price Tracker</title>
<style>
*{
margin:0;
padding:0;
}
body{
background-color: #111;
}
.container{
top: 50%;
left: 50%;
width: 70%;
height: 70%;
position: absolute;
transform: translate(-50%, -50%);
text-align: center;
}
.main-tab h1{
color: white;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 2.875rem;
line-height: 1.6;
}
.main-tab p{
color: white;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 1.2rem;
line-height: 1.6;
}
#price{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: 600;
line-height: 1.6;
margin: 1rem 0;
font-size: 1.8rem;
letter-spacing: 1.8px;
}
</style>
</head>
<body>
<header class="container">
<div class="main-tab">
<h1>Bitcoin Price Tracker</h1>
<p>The current Bitcoin Price is</p>
<p style="color: springgreen;" id="price">$<%= price %></p>
</div>
</header>
</body>
</html>Step 4: Run your DApp
Start your development server to see your DApp in action. The Bitcoin price will be displayed on the screen.
npm start
Navigate to the address on any browser.
Step 5: Test and Deploy
Ensure that the Bitcoin price updates as expected. Once you’re satisfied with the functionality, deploy your DApp to a hosting service of your choice.
Conclusion
Congratulations! You’ve built a DApp that tracks the Bitcoin price in real-time using RedStone Oracle. This is just the beginning; you can expand this DApp to track more cryptocurrencies or add additional features.
This tutorial provides a straightforward way to integrate RedStone Oracle into your DApp for tracking Bitcoin prices. With this foundation, you can further customize and enhance your application to suit your needs.
Thank you for reading this, please leave a like and comments would be very much appreciated.
