For The Record — A web app starter kit built on Aion

We built an open source Aion web app starter kit that provides you with the following:

• a script to compile a smart contract
• a script to deploy a smart contract
• a React web app that 1) reads the event log of your deployed smart contract, and 2) executes a function of your deployed contract

The app itself is quite simple, it is a single page that allows a user to write a tweet-length message and store that message forever on the Aion blockchain. The recently written messages will also be displayed. You can try out the demo right now.

Our goal with this open source app is to help any developer get started quickly building on top of Aion. Please check it out and give us your feedback!

In this post, we’re going to discuss the architecture of the application and what technologies it is built with. We’ll also go through the interesting bits of JavaScript code that allow you to interact with the Aion Network

If you want to skip straight to the source code, you can check it out here. We have a detailed README on how to run this sample locally.

Overview & is this a dApp or not?

The high level overview of the For the Record app is as follows:

1. A user visits the webpage — where previous messages that stored in the contract are loaded client side via Web3.
2. A user can submit a 140 character message. This message will be sent to the app’s backend service.
3. The backend service will then use Web3 to call the sole method on the ForTheRecord contract as a transaction with the message as input data.
4. When that transaction is executed, an event will be emitted. This event contains the message and will forever be stored in the contract’s logs. This is a cheaper form of storage than storing the value directly in the contract.

One thing that is important to note is that this sample is not a “pure dApp”. In this sample, we are using small backend webserver. The webserver has a private key that is used to sign transactions (including paying for them).

This is a very useful model for many applications. It allows you to utilize some of the benefits of blockchain technology without forcing your users to own a specific token or understand how to interact with decentralized networks.

A “pure dApp” version of this app would allow users to point the dApp to their own local node, or utilize something like Aiwa to allow users to submit their own transactions. We will soon be releasing a version of this repository that does just that.

Tech Stack

For this sample, we tried to stick with only well known & widely used frameworks & tools — and as few of them as possible. Our tech stack for this sample consists of the following:

• Create React App — general framework of our front end application. There are tons of great tutorials out there on React and create-react-app, so we won’t go into detail here, but this is a great tool for building a React front end quickly.
• Express — the node.js framework for our server component.
• Material UI React Component Library — a high quality library of react components that implements Google’s Material Design.
• Nodesmith — Nodesmith provides the hassle-free APIs that interact with our hosted Aion nodes.

Try it out!

We have a test version of the For The Record app available at https://aion-for-the-record.herokuapp.com.

For developers, we also wrote a detailed set of instructions at https://github.com/nodesmith/aion-for-the-record. This will walk you through the following:

1. Creating your private key string from an Aion Keystore
2. Configuring your Nodesmith endpoint to use your own API Key
3. Funding your account with some testnet Aion coin
4. Compiling & deploying your smart contract
5. Running the sample locally