Hi
I have built a blockchain web application using Python and Flask. I am using VS code. My project folder is as follows:
Project folder contains: app.py, temples folder (which contains HTML files), static folder (which contains CSS and JS).
app.py:
import datetime
import hashlib
import json
from flask import Flask, jsonify, render_template, url_for
class Blockchain:
def __init__(self):
self.chain = []
self.create_block(proof=1, previous_hash='0')
def create_block(self, proof, previous_hash):
block = {'index': len(self.chain) + 1,
'timestamp': str(datetime.datetime.now()),
'proof': proof,
'previous_hash': previous_hash}
self.chain.append(block)
return block
def print_previous_block(self):
return self.chain[-1]
def proof_of_work(self, previous_proof):
new_proof = 1
check_proof = False
while check_proof is False:
hash_operation = hashlib.sha256(
str(new_proof**2 - previous_proof**2).encode()).hexdigest()
if hash_operation[:5] == '00000':
check_proof = True
else:
new_proof += 1
return new_proof
def hash(self, block):
encoded_block = json.dumps(block, sort_keys=True).encode()
return hashlib.sha256(encoded_block).hexdigest()
def chain_valid(self, chain):
previous_block = chain[0]
block_index = 1
while block_index < len(chain):
block = chain[block_index]
if block['previous_hash'] != self.hash(previous_block):
return False
previous_proof = previous_block['proof']
proof = block['proof']
hash_operation = hashlib.sha256(
str(proof**2 - previous_proof**2).encode()).hexdigest()
if hash_operation[:5] != '00000':
return False
previous_block = block
block_index += 1
return True
app = Flask(__name__)
blockchain = Blockchain()
@app.route('/')
def home_page():
return render_template('index.html')
@app.route('/mine_block', methods=['GET'])
def mine_block():
previous_block = blockchain.print_previous_block()
previous_proof = previous_block['proof']
proof = blockchain.proof_of_work(previous_proof)
previous_hash = blockchain.hash(previous_block)
block = blockchain.create_block(proof, previous_hash)
response = {'message': 'A block is MINED',
'index': block['index'],
'timestamp': block['timestamp'],
'proof': block['proof'],
'previous_hash': block['previous_hash']}
return jsonify(response), 200
@app.route('/get_chain', methods=['GET'])
def display_chain():
response = {'chain': blockchain.chain,
'length': len(blockchain.chain)}
return jsonify(response), 200
@app.route('/is_valid', methods=['GET'])
def valid():
valid = blockchain.chain_valid(blockchain.chain)
if valid:
response = {'message': 'The Blockchain is valid.'}
else:
response = {'message': 'The Blockchain is not valid.'}
return jsonify(response), 200
if __name__ == "__main__":
app.run(host='0.0.0.0', port=5000)
index.html:
<!-- html file code for main page -->
<!DOCTYPE html>
<html>
<title>Blockchain</title>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{{ url_for('static', filename='css/index.css') }}">
</head>
<body>
<h1>Web Based Blockchain</h1>
<p><a href="/mine_block">Mine a new block in Blockchain</a></p>
<p><a href="/get_chain">View Blockchain</a></p>
<p><a href="/is_valid">Check blockchain validity</a></p>
</body>
</html>
index.css:
h1{
background-color: rgb(125, 218, 247);
color: black;
margin: 0;
padding-top: 20px;
height: 70px;
text-align: center;
}
a:link, a:visited{
width: 25%;
background-color: rgb(8, 73, 52);
color: floralwhite;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
My home page looks like:
However, the three functionalities I have created for the blockchain: the two of them show the response just as a JSON object and the third one displays the message as a text.
What can I do to format (like creating HTML pages, etc.) to make my JSON response as well as message appear visually appealing and in a proper, user friendly way?