I will be explaining the Smart Contract and Frontend Architecture in the upcoming lines.

The Smart Contract Code

The DApp Frontend communicates with the SmartContract in order to fetch and write the data. It is then the BlockChain Platform which syncs this smart contract data across multiple nodes in order to meet the decentralization and security needs. This syncing process needs a little time, and that’s why the write process costs time and money in the form of NAS.

Story Initialization

In the below section, I will explain to you the part of the smart contract which defines the Story Object:

"use strict"; /*

Story Constructor which will create the story by providing the necessary field fetched from the frontend using nebpay API explained at the end of this blog:

*/

var Story = function(text, image_url) {

this.title = text;

this.address = Blockchain.transaction.from;

this.hash = Blockchain.transaction.hash;

this.image_url = image_url;

this.lines = [];

this.votes = [];

}; /*

Init function is used once while deploying the smart contract to

initialize the parameters if required:

*/ Story.prototype = {

init: function() {



}

};

As mentioned above, every story will have the following fields, out of which text and image_url need to be provided as an argument from the user. For the Address field, the hash can be obtained using the BlockChain APIs explained in depth here.

Data Structure and Storage used in the DApp

The storage module enables the data storage on Nebulas. It enables the permanent storage of data variables on Nebulas when a payment is made. You can read in depth about it here.

/*

With the help of the Storage Module, we are defining following maps and index property, which will help us to keep track of multidimensional data obtained from users. Nebulas recommend the capturing of multiple data points, which may help in improving Nebulas Rank and Search Feature.

*/ var Data = function() {

LocalContractStorage.defineMapProperty(this, "favourite_stories");

LocalContractStorage.defineMapProperty(this, "my_stories");

LocalContractStorage.defineProperty(this, "s_index");

LocalContractStorage.defineMapProperty(this, "stories_data");

};

Saving and Retrieving Story

Now we’ll look at two of the most important functions used for writing and getting the story on the Platform with the help of Story Constructor and Storage declared in the Data constructor above.

/*

stories_data hash map will contain every story stored against its unique index on the Platform storage module. Every story index added by a particular user will be stored in a hash map my_stories, in the form of an array.

*/

Data.prototype = {

/*

Initializing the index on Smart Contract. As soon as people will keep on adding a new story, s_index will keep on increasing.

*/

init: function () {

this.s_index = new BigNumber(1);

}, save_story: function (name, image_url) { var id = this.s_index; if (name.length > 25) {

throw new Error("Story Length error");

} if (name == "") {

throw new Error("empty story title");

} var story = new Story(name, image_url); this.stories_data.put(new BigNumber(id).toNumber(), JSON.stringify(story)); var my_stories_local = this.my_stories.get(Blockchain.transaction.from) || []; my_stories_local.push(this.s_index); this.my_stories.put(Blockchain.transaction.from, my_stories_local); this.s_index = new BigNumber(id).plus(1); },

/*

get_stories method will be used to retrieve all the stories stored on the platform.

*/ get_stories: function () {



var stories = [];

var total = new BigNumber(this.s_index).toNumber();

for (let i = 1; i < total; i++) {

stories.push(JSON.parse(this.stories_data.get(i)));

}

return stories;



/*

Remaining Functions can be found out in the Smart Contract Code

*/ },/*Remaining Functions can be found out in the Smart Contract Code here */ }; module.exports = Data;

This completes the major parts of the Smart Contract. In the next section, I will be explaining the structure of the Frontend Code in Nuxt.js.

Frontend Architecture Design

As the project grows, and more functionalities get added, a proper architecture set up from the beginning can help us achieve our goal by making debugging easier.

The below approach is a good way to go about it:



Go to the root directory in the source code

*/ /*Go to the root directory in the source code here and find out the below-mentioned files. This Architecture helps in creating a big modular App/Dapp.*/ pages/



about / index.vue : Static About us PAge



contact / index.vue : Static Contact us Page



create / index.vue : Page to Create the Story.



favourite / index.vue : Stories Liked by you will be here.



mystory / index.vue : My Stories Page.



index.vue / index.vue : All Stories Page

store/ index.js : Vuex code used to make API calls to Smart Contract



neb_init.js : Importing nebpay and initializing Smart Contract

Address here, which gets used throughout the app. layouts/ default.vue: Every page follows an architecture where Header and

Footer are same. So setting up the default

architecture here. components/



Header.vue: Header component which is getting used in default.vue Footer.cue: Footer component which is getting used in default.vue ....

Making API calls to the Smart Contract

I will be explaining one of the API call using nebpay to interact with the Smart Contract and get all the stories’ data for the landing page.

Initialize Nebpay, to be used across the app in store/neb_init.js:

import * as NebPay from 'nebpay.js';

Contract Address can be obtained after deploying the code on Nebulas Platform using their

It needs to be the Mainnet Address.

*/

var contractAddress = "n1pQHv...................Pm1"; /*Contract Address can be obtained after deploying the code on Nebulas Platform using their Web Wallet It needs to be the Mainnet Address.*/var contractAddress = "n1pQHv...................Pm1"; var nebPay = new NebPay(); export { contractAddress, nebPay, result,NebPay };

The below API call code can be found in the store/index.js file:



/*

nebPay API's can be used to interact with the Smart Contract and Chrome extension to perform read and write operations. More details about nebpay API's can be found out

*/ /*nebPay API's can be used to interact with the Smart Contract and Chrome extension to perform read and write operations. More details about nebpay API's can be found out here */ call: (store) => { // args needs to be sent in below format. var args = "[]"; nebPay.simulateCall(contractAddress, 0, "get_stories", args, { listener: function (data) { if (data.result != null) { store.commit("all_data", JSON.parse(data.result)); } } }); }

The above code is getting called from component/Allstories.vue.

/*

As soon as the Allstories component gets mounted, it dispatches the call action mentioned in the above lines, which then fills the Vuex Store all_data array and gets rendered in the All Stories Component.

*/ mounted() { this.$store.dispatch("call"); }

Like this, you can go around every section in the source code and understand the complete architecture of the DApp.

I hope this tutorial helped you in getting started with DApp development. For any queries, feel free to reach out to me.