How to build a decentralized chat app in 10 minutes using fds.js

When we were building Fairdrop we knew from the start that we needed to create a library. At the same time, we knew this would enable other developers to build zero data apps faster and easier. Thus fds.js was born. #DRY

With the fds.js library, we aim to build a decentralized data layer that would give developers the same experience in developing decentralized applications as they have now, using centralized technologies.

In this short tutorial blog, we want to show you how you can easily build your own basic decentralized chat application in 10 minutes. FYI, our Chattie demo also uses the Fairdrive API, but we’ll reveal more about it in an upcoming announcement.

The tutorial includes ten steps:

1. Configuration and connecting to Swarm
2. Account creation
3. Account unlocking
4. Application domain setting
5. Fairdrive data pull
6. Application domain node check
7. Sample file creation
8. File sending
9. File reception
10. Message processing and content reading

We extracted a minimal set of commands that you will require to start building your decentralized app. Keep in mind, you will also need a multibox¹ branch of fds.js library, available here.

But, first, what is fds.js?

FDS.js is a very simple framework to create apps using the Ethereum and Swarm networks.

It provides simple encrypted file storage, key-value storage and file sending with baked-in authentication for javascript web applications.

Step 1: Configuration

First, you’ll have to initialize fds.js. to connect to Swarm network and our Noordung blockchain:

window.FDS = new FDS({
swarmGateway: ‘https://swarm.fairdatasociety.org',
ethGateway: ‘https://geth-noordung.fairdatasociety.org',
faucetAddress: ‘https://dfaucet-testnet-prod.herokuapp.com/gimmie',
httpTimeout: 1000,
gasPrice: 1,
ensConfig: {
 domain: ‘datafund.eth’,
 registryAddress: ‘0xc11f4427a0261e5ca508c982e747851e29c48e83’,
 fifsRegistrarContractAddress:
  ‘0x01591702cb0c1d03b15355b2fab5e6483b6db9a7’,
 resolverContractAddress:
  ‘0xf70816e998819443d5506f129ef1fa9f9c6ff5a7’ 
},
// multibox extension
applicationDomain: “/shared/chattie/”
});

Step 2: create an account:

let account = await window.FDS.CreateAccount(accountName, password);

Step 3: unlock account:

await window.FDS.UnlockAccount(account.subdomain, password);

Step 4: set application domain²:

let appdomain = await account.setApplicationDomain(applicationDomain);

Step 5: Get Fairdrive data:

let fairdriveData = await  account.Mail.Multibox.traverseMultibox(account, account.subdomain))

Step 6: Perform application domain node check:

This checks and creates an application domain node if it does not exist.

let appdomain = await account.Mail.Multibox.createPath(account, this.state.applicationDomain, this.state.fairdriveData.id);

Step 7: Create a sample file for sending

let file = new File([`contents`], `filename.txt`, { type: ‘text/plain’ });

Step 8: Send file:

let result = await account.send(toAnotherAccountName, file, applicationDomain);

Step 9: Get received messages/files:

var messages = await account.messages(‘received’, applicationDomain);

Step 10: Process messages and get file contents:

var file = await message.getFile();

or read the contents of the file:

var f = await account.receive(message);
reader.onload = function(e) {
    // reader.result will contain decrypted contents of the file
}
await reader.readAsText(f);

A new paradigm of apps

There you have it! In just a few short steps and lines of code, you can build a decentralized and zero-data chat app that doesn’t collect any personal information. This way, everyone can start building a whole new paradigm of apps that put the privacy of the individual first!

You can also add additional functionality to your app by integrating our consent receipt generator (see the demo here & here) and make it GDPR-compliant. With such functionality on board, it can be easily added to any website or service that requires a chat support application.

Check sample ‘dialogue’ React app to see how to put it all together.

Take a look at our simple React app on GitHub, too, where we have hacked together some practical examples of how to use fds.js, so you can easily start building your apps.

What’s coming next

At the beginning of the blog we briefly mentioned Fairdrive, our next big step and upgrade to Fairdrop. This next big stage of Fairdrop’s evolution will enable individuals to safely store and categorize their multi-app data in a decentralized file-storing and sharing app. We’ll also begin activities to set up a Fair Data Society DAO.

To sum up, try the code yourself, give fds.js a spin and let us know how you liked it or what you were able to do with it.

We’d love to hear from you!

Chattie is built on Fair Data Society principles. You can show your support by contributing to the Fair Data Society Campaign on Giveth

GitHub — Telegram — Twitter

[1] This will later be refactored to Fairdrive.
[2] Application domain is a base node of your application. If you need data sharing between users, it has to be under the node ‘/shared/’. For example, ‘/shared/ApplicationDomain’. When users of your application send data among themselves, their data will be stored in /shared/ApplicationDomain/AccountName. By default, nodes are inserted into the first tree of a receiver’s multibox/fairdrive and contain key-value pairs, where the key is a name hash and the value is a Swarm feed location. For more info, see the contract source code.