Building a NodeJS/Blockchain app in 15 minutes.
The blockchain is one of the biggest and most exciting new technologies to emerge in recent years. Putting aside the social and economic impact crypto-currencies such as bitcoin have had, blockchain technologies have the potential to disrupt and improve almost every industry. Most large companies are at least planning blockchain enabled applications, and with software titans like Amazon and Microsoft working on blockchain offerings, it seems likely that skilled blockchain developers will be in high demand.
Developing applications for the blockchain is no easy task, but we believe it’s never been easier than by using ProvenDB, a blockchain enabled database service. In this tutorial, we’ll create a quick and straightforward blockchain enabled application using ProvenDB. You’ll need basic knowledge of NodeJS and MongoDB. As you’ll see in the tutorial, you don’t need a full understanding of blockchain to build the application, but we recommend learning the fundamentals of what blockchain can offer and how it functions. You can learn more about the blockchain in the context of ProvenDB here.
Let’s get started.
Getting a free account
Navigate to ProvenDB.com and sign up with your preferred OAuth provider or with email. Once you’ve signed up and logged in, you should see the dashboard.
Click the “Build a Service” button in the middle of the screen and fill out the form for your new service. Only early access accounts are available at this time; they are free for life and have 1GB of storage.
Select a service name, username and password. Make sure to take note of these because you’ll need them later. Once you’re done, click the “Create Service” button in the bottom right of the screen. The service may take a few minutes to create so let’s get started on our application code.
Building our Blockchain App
Prerequisites:
- NodeJS ≥ v11.10.1 (May work on lower versions, not tested)
- NPM ≥ v6.8.0 (May work on lower versions, not tested)
- MongoDB ≥ v3.6
The first thing we want to do is create a basic NodeJS project, we’re going to use create-react-app here for simplicity. If you’re on a recent (5.2+) version of npm, you can use npx to create the app:
npx create-react-app my-blockchain-app
cd my-blockchain-app
npm startAfter a few minutes a browser window should automatically open at this point, but otherwise navigate to localhost:3000 to see the following page:
create-react-app.We’re going to need some libraries to get our application up and running quickly: express for handling our requests, mongodb for connecting to our database, antd for UI components and axios for making requests to our server. Let’s install them now. This may take a few minutes.
npm add express antd mongodb axiosThere’s one other library that is optional but will help us connect to the Blockchain quickly.ProvenDB-Node-Driver is a package containing helpful wrapper functions and helpers for common Blockchain operations. If you prefer you can accomplish the same thing using the native MongoDB driver, both ways will be included in the sample code.
npm add @southbanksoftware/provendb-node-driverCreating the Server
Let’s add some code to handle our requests, create a new file called server.js in the src directory and add these basic routes.
You may notice right away that we have referenced an ideas.js file that we have not yet created, we’ll create that next but first, add the following to your package.json file.
"proxy": "http://localhost:8080",And replace your start script with the following.
"start": "react-scripts build && node server.js",Our core logic.
With our server set up, we can implement our back-end logic for proving an idea. Let’s create a new file named ideas.js in the src folder. We’ll need two main functions, one to add a new idea on the blockchain and another to get a list of ideas we have already added.
Insert the following code into your ideas.js file.
If you’re familiar with building MongoDB applications in NodeJS, you’ll be very familiar with this type of code. We create our connection to the database, choose our collection and then insert or query documents just like we would against normal MongoDB. You may have noticed though that after we have added our document we run a few commands you won’t have seen before. These are ProvenDB specific commands, and they are what allows us to place (or anchor) our data on the blockchain. You can read more about these commands in the ProvenDB documentation.
You may also have noticed that using the driver allowed us to skip a few steps and a lot of boilerplate code by invoking the pdb.submitProof() function. This function is essentially a wrapper, take a look at the commented code without using the ProvenDB driver:
dbObject.command({ getVersion: 1 }, (error, res) => { ...This first command is to query the database for the currently selected version. In ProvenDB write operations will create new versions of the database, allowing us to keep track of what versions of the database we have anchored on the bitcoin blockchain. You can read more about the ProvenDB versioning system here.
dbObject.command({ submitProof: currentVersion }, (error, res) => {This second command tells ProvenDB that we want to anchor the selected version of our database on the blockchain. In our case, we’re going to create a new proof any time an idea is added, however, in other applications you may not want to bother proving every version.
The pdb.submitProof() function wraps these and provides useful defaults to reduce code complexity.
You may have also noticed we haven’t yet specified our ProvenDB URL or database name yet.
5 const provenDB_URI = 'YOUR_PROVENDB_URI_HERE';
...
16 dbObject = client.db('YOUR_PROVENDB_SERVICE_HERE');By now our ProvenDB service should be up and running, go back to the dashboard and click on the URL to copy it to clipboard. Replace YOUR_PROVENDB_URI_HERE on line 5with your service URI and then replace ${USERNAME} and ${PASSWORD} with the username and password you specified when creating the database.
Also, replace YOUR_PROVENDB_SERVICE_HERE on line 16 with the service name you chose (the database name).
Restart your node server (npm start) and let’s test the routes we’ve just created by navigating to the URLs below:
Now Add Blockchain.
Great, we’ve got a basic API for putting ideas into ProvenDB. You may be wondering where the blockchain part comes in, so far this is very similar to a MongoDB tutorial. That’s the point! If you know MongoDB, you know ProvenDB. All the complicated blockchain logic is happening in the background. Let’s add a new function and route to check the blockchain status for a given idea.
In ideas.js, add the following function to the module.exports.
Add this new function to ideas.js
This snippet is very similar to our upload idea function, with the exception being that at the very end we run this command getDocumentProof which will query the proof status for a single document rather than the entire database.
And in server.js add the new route below the existing /ideas route:
Add this new route in server.js
Restart your NodeJS server and navigate to this endpoint. You should see something like this:
There’s quite a bit of information here relating to how our document is going to be placed on the blockchain, and you can learn more about this in the documentation. However, for this tutorial, we only care about the status: “Submitted” and errmsg: “The proof is not yet valid” parts of this response. This is telling us that the document does exist as part of a proof but that the proof has not yet been fully anchored on the blockchain.
We went through this process while creating a more complex Blockchain enabled application called ProvenDocs and it’s all open-source! You can check out the source code for ProvenDocs here and sign up for free here. ProvenDocs allows you to upload preview and prove documents of various file formats. Once your document is proven on the blockchain we also generate a proof certificate with the relevant information included.
Creating an interface.
In summary, we now have a simple node server with routes that allow us to:
- Upload an idea into our database and anchor that idea on the blockchain.
- Get a list of all our ideas in the database.
- Find out the blockchain information and status for a given idea.
Let’s add a basic user interface on top of this to make our first blockchain app a little more usable. First up let’s change the default styling, open src/App.css and modify line 12, setting the background colour to #fffff (or any colour of your choosing).
12 background-color: #fbfbfbLet’s list our ideas on the front page, create a new file src/IdeasTable.jsx and add the following code:
There may seem to be a lot going on here, but most of the code is just boilerplate used to set up our react component and wrap the antd Table. When the component mounts, we use axios to query the server for a list of ideas from the /ideas route we created earlier. The slugify method is used to turn whatever idea a user inputs into a URL compatible string.
Before we can see this in action, we must add this component to our application. Replace src/App.js with this snippet.
Let’s test our new UI. Run npm start, once you see Server is listening on port 8080… you can navigate to localhost:8080 and you should be able to add a new idea to the blockchain.
Looking good! We now have an application for putting our ideas on the blockchain, but there’s one thing missing. Eventually, these ideas will make their way on to the blockchain; however, there’s not much indication of that in our UI. Let’s use our /ideaProof API route to fetch a proof when a user clicks on an element.
In the src/IdeasTable.jsx file add a new function with the code below:
Add this function to src/IdeasTable.jsx
Now replace line 141 with:
this. onClickIdea(record);Our new function now gets triggered on each click. Restart your server with npm start and try clicking on an idea, you should see something like the gif below.
Conclusion
In a small amount of time we’ve set up our blockchain database, made a basic user interface and written a simple server capable of anchoring our ideas on the blockchain. There’s a lot more you can do from here; this is just a small example of how easy it is to build blockchain applications with ProvenDB. Some next steps may include;
- Checking for and blocking duplicate ideas.
- Using OAuth or a user’s private key to include the author in the blockchain proof.
- Adding interface options for verifyProof — Check that the original idea hasn’t been tampered with and exists in the same form on the Blockchain.
- Displaying the proof status of each idea without having to click.
- Add versioning support for ideas and show their history with the docHistory command.
If you are building a Blockchain application, you may also want to read some of our key learnings from our experience in our previous blog post. If you have thoughts, feedback or suggestions (either for this article or for ProvenDB) please leave a comment below, engage us on Facebook, Twitter or email us at support@provendb.com. We would love to hear from you! Thanks for reading.
ProvenDB integrates MongoDB with the Bitcoin Blockchain. Immutable versions of database state are anchored to the Blockchain, delivering an unparalleled level of data integrity. ProvenDB allows MongoDB developers to build high-performance applications that include cryptographic proof of data integrity and provenance without having to understand blockchain programming complexities.
