System Architecture Diagram at time of first Prototype
Implementation of Finished Functionalities at time of first Prototype
The video below shows our AR model working using a £5 note as the anchor.
The link below takes you to a video showing our walkthrough of the webapp. The file was too big to include directly, so instead we uploaded it to OneDrive.
Users can submit data to the blockchain through the front-end React application. After submission, the data submitted will essentially be split into 2 parts,
files and other data such as strings, integers etc. The file will first be uploaded to the backend Nodejs server to be stored off-site as the size limit of a
blockchain transaction is very small, it limits our ability to store a file directly on the blockchain. The file names will then be hashed through SHA-256, we
do this to ensure uniqueness on the blob storage. After that, the file will then be uploaded to the Azure blob storage, the backend will then obtain the download URL
of that respective file and send that as a response to the frontend. Once we got a response from the backend server, we continue the blockchain upload.
We can interact with the blockchain through web3, we have a function in the React app that obtains the injected web3 through metamask in the browser.
Metamask acts as a bridge between the frontend and the blockchain. Metamask will prompt the user to confirm the transaction to the RPC URL of the Azure
blockchain service and data will then be stored in the transaction on the blockchain.
React: Fetching data from Blockchain
Fetching data from the blockchain is usually faster as compared to sending data, this is because we will be able to view data from the access node of the
blockchain through the functions in the smart contract and we do not have to iterate through the whole blockchain. However, the rate as which we are currently
fetching data from the blockchain is limited by the smart contract. The data obtained from the blockchain will then be displayed on the front-end application.
Implementation of Key Functionalities
Key Functionalities
Technology
Implementation
Interaction between Blockchain
React.js
React is allows us to obtain the injected web3 in the browser from metamask, this allows us to get the contract and deployed network address.
These variables will then allow us to create a local instance of the smart contract through the deployed network address and the ABI file.
This then allows us to carry out functions and methods on the smart contract in the front-end allowing us to make calls and sends to the blockchain.
The react front-end interact with the Node.js backend, which in turns interacts with the blob storage.
Hashing files and upload / download files from the Blob Storage
Node.js
The Nodejs backend was utilized to connect to the blob storage. The backend handles basic functions such as hashing and uploading files, downloading files.
The hashing algorithm also runs on the backend, we hash the files to ensure uniqueness when adding to the blob storage.
Interaction between Blockchain and Blob Storage
Solidity Contract
We created a struct type called File in the smart contract to store the construction records on the contract, which contains the file name,
file version and the file contents. There are various variables and mappings, in addition to setter and getter methods written in Solidity
to store and retrieve these records on the Blockchain. This allows the React web-app to interact with the smart contract whilst abstracting
the way the data is stored when developing on React. The smart contract has been written in a way such that the gas cost is low which ensures that
the cost of adding data to the Blockchain is as low as can be.
Interactive AR Application,
Ability to place down models in AR, Interaction between Unity and Blockchain/Blob Storage
Unity, Vuforia, Nethereum
Using Vuforia SDK to implement the marker-based model placement. We have currently set it to place the model on a detected 5pound/10pound bill.
In addition to that, we utilised Nethereum to establish the connection to the blockchain. Web3 is utilised throught the Nethereum library. This allows us
to interact with the smart contract deployed on the blockchain networks.
The Unity Application will be able to place down models based off of markers, place down models based off of plane detection,
interact with the smart contract deployed on both our public Ropsten testnet as well as our private Quorum blockchain.
Furthermore, it can download and display the file contents from our blob storage after retrieving data from the blockchain. This is implemented by
using the Unity download handler.
Demo videos
Links to the finished features video as well as the technical explanation video can be found below.
