Building a Blockchain app in 10 minutes.
Blockchain. Love it or hate it; it has increasingly become part of the conversation when it comes to application development and data integrity. Last year many tech giants were starting to release their blockchain frameworks like Amazons QLDB or Microsofts Azure Blockchain Service. Now, these same frameworks have permeated the market, and large production scale systems are being integrated with them. From colossal financial institutes to boutique car dealerships, everyone wants Blockchain. Unfortunately, as with any (relatively) new and exciting technology, it’s hard to get started, easy to get wrong and slow to develop.
Last year I demonstrated how ProvenDB could be used to easily integrate an application with the Blockchain in 15 minutes. But there were a few limitations at the time:
- The data was stored within ProvenDB (a MongoDB compatible cloud database).
- The data could only be anchored on the public Bitcoin blockchain.
- A rudimentary understanding of MongoDB and the MongoDB driver was required.
Since writing that post, a lot has changed.
- Firstly, the cloud ProvenDB service now supports a larger number of target blockchains (Bitcoin, Ethereum, Hedera, Hyperledger, GoChain, Elastos).
- I’ve had my first child, so 15 minutes seems like an unrealistic amount of free time nowadays.
- We’ve launched Proofable, a framework for certifying digital assets on the Blockchain that doesn’t require MongoDB — allowing you to bring your database, or, no database if you prefer.
Given these changes and not being satisfied with the previous 15 minutes required to build a blockchain application, I decided to see how quickly I could create a simple application with immutable data proofs using Proofable.
Actually Building Something
The App.
I’ll be building a very similar application to my previous post, a simple web interface that allows users to enter some arbitrary data and in return receive information about where that data has been anchored on the Blockchain.
Prerequisites.
- NodeJS ≥ v12.18.3 (May work on lower versions, not tested)
- NPM ≥ v6.14.6 (May work on lower versions, not tested) or Yarn
- NPX (ships by default with NPM versions since 5.2)
You will also need to Proofable CLI to generate an API key. First, download the CLI from https://www.proofable.io/. Once you have the CLI, you can log in by running the command proofable-cli auth and selecting your login method (OAuth or Email). Once you’re logged in you should see this page in your browser.
In the top left, you can see your API key, save this somewhere (ideally an environment variable) as our application will need it to send requests to Proofable.
The boilerplate
Like any good (lazy) developer under a tight deadline, I’m going to cheat and leverage a framework to skip a lot of the boilerplate required to create my app.
I also won’t be including this setup stuff in my overall time to build, because I need to steal every minute I can.
In this case, I’ll be using Nuxt, which will create and configure everything I need for a simple VueJS web application. The quickest way to get started is with npx.
$ npx create-nuxt-app ProveMyThingcreate-nuxt-app v3.3.0
✨ Generating Nuxt.js project in ProveMyThing
? Project name: ProveMyThing
? Programming language: TypeScript
? Package manager: Yarn
? UI framework: Ant Design Vue
? Nuxt.js modules: Axios
? Linting tools: ESLint, Prettier
? Testing framework: None
? Rendering mode: Single Page App
? Deployment target: Server (Node.js hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Version control system: Git
For this demo, we’ll be using Typescript, Ant Design and Axios, but you could easily modify this example to use a different configuration. After answering the questions about your app setup, you’re all ready to go, just run the app with npm run dev.
$ cd ProveMyThing
$ npm run dev
...
ℹ Listening on: http://localhost:3000/And if we navigate to http://localhost:3000 we can see our boilerplate web app is up and running.
We’ll also be rendering some of the results in JSON, so let’s add a the vue-json-pretty library to help us render it nicely.
yarn add vue-json-prettyEnough boring stuff, let’s see some code…
Okay, let’s start the clock.
Now we can get to the fun part, creating our interface and hooking it up to the Proofable API. First, let’s model our application by creating our state store. Create a new file in the store directory called index.ts (or .js if you prefer not to use typescript)
In this file, we will define our actions and mutations. First, we can define our state by exporting a function called state. Nuxt will handle the rest for us. You can see we define our three state variables below, along with functions for mutating them.
We could use these states and mutator functions directly from our UI, but to simplify things we’re going to define some actions which will wrap multiple mutations with our Proofable API calls. Our first action will be to create a new proof.
Remember to replace ${myApiToken} with the token generated from the Proofable CLI earlier. Keep in mind, exposing the API key in this fashion is not a good idea in production, as anyone browsing to your web app could access it. In a production app, this would be passed in by the user in the interface or exposed only to the server. However, because we’re short of time, we’ll play it fast and loose in this proof of concept.
Both functions are quite simple. We set our state to loading, construct our request for sending with axios, send the request and finally update the state to reflect our result. Much of the logic here is just managing the UI state, in less than 54 lines of code and 2 REST calls, we can create an immutable proof of our data on a Blockchain. So our core logic is complete, let’s build the UI.
The interface
For this demo, we will have two pages, one to prove a digital asset on the blockchain and one to check the status of an existing proof.
To create a new page, we can create a new folder in the pages directory, along with an index.vue file to contain our template. In this case, we’ll create a page called create, and a page called verify. Nuxt will handle the routing for us, and we can view these pages by simply navigating to /create and /verify
The first thing we’ll do is add an HTML template to define our interface. We’ll add a title, a form with some inputs and finally a button to submit our form. The form and the input components will be from the antd UI library. Add the following code to create/index.vue.
You can see in the snippet above that we are using our state variables like isProving and currentProof within our components, but we haven’t defined these yet, so let’s do that now. Nuxt and Vue make this pretty easy for us, we simply add a <script> tag to the bottom of our page file. From here we can use the mapState helper function provided by Vuex to get our global state into our page, as well as define our local state.
The last part of our create page we are missing is our methods, which will be called by our file picker and submit button, these methods will do some data validation and then call our previously created ACTION_startProving method. We will add our methods object right below our computed key.
The handleRemove and beforeUpload methods are to help with our file picker. The essential method here is postProof. In this method we first validate our form (using the validation rules defined in our template), and if we have encountered no errors, we then convert our file object into a Base64 encoded string. The primary reason we do this is for simplicity, we could anchor the file on the Blockchain in any format we like, but this is an easy to way to represent the file, and its’ metadata as a single string value.
The this.$message.loading(...) function is an antd provided helper that will create a toast notification for our interface when our proof action starts and finishes. Finally, we use $store.dispatch(...) to trigger our start proving action, passing in the file, file name and our note as parameters to be included in our proof. This logic is wrapped in a try-catch statement to catch any errors that may come back from the API. That’s it! At this point, our theoretical user is able to pick a file, add a note and create an immutable proof of that file on the Blockchain. It’s that easy, by my count this can all be done (leveraging a bit of copy-paste here and there) in around 5 and a half minutes, leaving me with 4 and a half minutes to add the verify page.
But first, let’s test our newly created BEP (Blockchain-Enabled App). Open the webpage, navigate to our /create page(for example localhost:3000/create), enter a note, select a file and submit! You should see something like the GIF below.
It’s not the most beautiful interface in the world, but we’re aiming for speed here. Next, we will create our page for checking on an existing proof. Open your pages/verify/index.vue file. Our verify page will have the following components:
- A form with an input for our trie id and our proof id
- A submit button.
- A JSON output viewer for our response.
A trie is the underlying data structure used to create Blockchain proofs for millions of entries efficiently, and a trie can be used to create many, many proofs. You can learn more about tries here. For this reason, we need to provide both IDs for the API to retrieve our specific blockchain proof. Let’s add these UI elements now.
This template is very similar to our create page, but with a second text input instead of our file picker. You may also have noticed that we are passing in our currentProof values from our store as initial values into these text inputs. This will mean users don’t have to copy the values from our create screen. Now, as with our previous page, we need to add our data and methods. Because we don’t have any file picker helper methods, it’s a pretty small snippet.
Similar to our create page, we map our global state using mapState, and we can verify our proof by validating the form then dispatching our action, simple as can be. We do have one problem though, when you navigate between /create and /verify, we lose our state! Now a user could open two tabs or write their proof id down somewhere, but that’s not a very good experience. So, we’re going to fix that navigation up. Open the layouts/default.vue file and replace the existing <template> with the snippet below.
Very simply, we create a header with a navigation menu and three menu items, home and our two pages. The NuxtLink component we’re using to actually navigate will ensure that our state carries across when we move between pages. Now if we return to our webpage, we can create a proof, navigate to the verify page and see our trie ID and proof ID already pre-populated. This has nothing to do with creating blockchain proofs, but I’m much too lazy to write down or remember two ID values every time I want to verify my proof!
And if we submit our two pre-populated values to be verified, we can see our proof status in the results JSON.
You can see here that this proof is CONFIRMED on the ETH (Ethereum) Blockchain along with all the information about where on that distributed ledger your immutable proof exists, however, if you’ve just uploaded your file you may see the status as stillPROCESSING, how fast a proof becomes confirmed depends on which Blockchain is targeted.
We’ve done it! We’ve created a web app which allows a user to upload a file and it’s associated metadata directly to a blockchain in a matter of minutes, in return receiving a blockchain proof certifying the location and existence of their file at that point in time.
Blockchain doesn’t get much easier than that.
Our time was at 8 minute and 35 seconds, however, I excluded the 3 minutes of setup and copy-pasted a lot of code. So, I guess it wasn’t quite under 10 minutes after all, but it sounds a lot better as a title. Of course, this is just an example of how easily you can build applications on top of Proofable. Using this as a base, you could:
- Add your own persistence layer for storing proof details.
- Allow users to preview files or specify their target Blockchain.
- Allow user to provide their API key instead of using your own.
- Add the ability to compare a file against its Blockchain proof to detect tampering.
And of course, our little demo could use a bit of tender love and care when it comes to the styling. But within an extra hour or two, I was able to clean it up and get it (almost) production-ready.
And you can see the full source code of the finished demo app here.
