Как создать DApp с помощью Nuxt.js и Nebulas

1656580446 kak sozdat dapp s pomoshhyu nuxtjs i nebulas

Интерес к разработке децентрализованных приложений (DApp) постоянно растет. Поэтому я решил создать учебник, который поможет вам начать разработку и архитектуру модульного DApp. Мы будем использовать один из самых популярных и широко распространенных языков 21 века: JavaScript.

В этом уроке мы будем работать со следующими технологиями:

  1. Туманности: платформа BlockChain, которая позволяет нам писать смарт-контракты JavaScript. Регистрация здесь чтобы получить реферальную выгоду.
  2. Nuxt.JS: каркас, построенный на вершине. Vue.JS.
  3. NebPay: Nebulas Payment JavaScript API. Как для ПК, так и для мобильных устройств.
  4. WebExtensionWallet: Используется для взаимодействия со смарт-контрактом с целью оплаты.

Я объясню процесс создания DApp с помощью существующего DApp Distributed Stories. Он получил право на новое вознаграждение DApp в первом сезоне поощрительной программы на Платформа Туманности.

Вы можете найти исходный код DAapp интерфейса здесь. Код смарт-контракта можно найти в PayloadData здесь.

Не всегда достаточно знать о создании простого приложения для дел. Иногда мы должны понимать, как создавать большие модульные программы.

Сосредотачиваясь на таком приложении, я дам вам обзор высокого уровня структурирования большого модульного DApp с помощью Nuxt.js и Nebulas. Вы можете получить более подробную информацию, исследуя и наладив приведенный выше код.

Что мы будем строить?

Мы собираемся создать короткий история/стихотворение платформа для сотрудничества, Distributed Stories. Это позволит пользователю создать новую историю, добавив строку к существующей истории и разделившись историей в Twitter. Вот демо-ссылка.

FkrFJyNuZvkesZjjHSR7KB5JPfBGkrPxnMKP

Я буду объяснять Умный контракт и Архитектура фронтенда в следующих строчках.

Код смарт-контракта

DApp Frontend взаимодействует со SmartContract для получения и записи данных. Тогда BlockChain синхронизирует данные смарт-контракта между несколькими узлами, чтобы удовлетворить потребности децентрализации и безопасности. Этот процесс синхронизации требует немного времени, поэтому процесс записи стоит времени и денег в форме NAS.

История Инициализация

В разделе ниже я объясню вам часть смарт-контракта, определяющую объект Story:

"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() {

    }
};

Как уже упоминалось выше, каждая история будет иметь следующие поля, из которых нужно предоставить текст и image_url в качестве аргумента от пользователя. Для поля Адрес хэш можно получить с помощью API BlockChain, подробно объясняемых здесь.

Структура данных и Хранение используется в DApp

Модуль хранения позволяет хранить данные на Nebulas. Это позволяет постоянно сохранять переменные данных на Nebulas при совершении платежа. Подробно об этом можно прочесть здесь.

/*
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");
};

Сохранение и Получение История

Теперь мы рассмотрим две важнейшие функции, которые используются для написания и получения истории на платформе с помощью конструктора истории и хранения, объявленных в конструкторе выше.

/*
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 here.
*/
};
module.exports = Data;

На этом главные части смарт-контракта завершаются. В следующей главе я объясню структуру Frontend Code в Nuxt.js.

Дизайн архитектуры фронтенда

По мере развития проекта и добавления новых функций, правильная архитектура, настроенная с самого начала, может помочь нам достичь нашей цели, упрощая отладку.

Следующий подход является хорошим способом для этого:

/*
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
 ....

Осуществление API-вызовов к смарт-контракту

Я объясню один из вызовов API nebpay взаимодействовать со смарт-контрактом и получать все данные истории для целевой страницы.

Инициализируйте Nebpay, чтобы использовать его в приложении store/neb_init.js:

import * as NebPay from 'nebpay.js';
/*
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 };

Ниже Вызов API код можно найти в store/index.js файл:

/*
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));
  }
 }
});
}

Приведенный выше код вызывается из компонент/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");
}

Таким образом, вы можете обойти каждый раздел исходного кода и понять полную архитектуру DApp.

Надеюсь, это руководство помогло вам начать разработку DApp. По любым вопросам, не стесняйтесь обращаться ко мне.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *