Создание веб-приложения со списком дел на основе блокчейна

Здесь мы собираемся создать приложение со списком дел, которое будет сохранять данные в блокчейне. Блокчейн-часть этого приложения также может пониматься как база данных. Сначала мы создадим смарт-контракт, а затем и само веб-приложение. Мы будем использовать Bloc в качестве имени приложения, но сначала давайте посмотрим на компоненты.

Компоненты в блочном приложении

• Ганаш - локальный блокчейн Ethereum.
• Web3 JS - для того, чтобы приложение могло взаимодействовать с блокчейном.
• Bootstrap - для интерфейса приложения.
• Solidity - для составления смарт-контракта.
• JQuery - для манипуляций с DOM.

Что такое смарт-контракт?

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

Для написания и разработки смарт-контракта мы будем использовать REMIX IDE.

Примечание. Убедитесь, что вы используете сайт Http вместо Https. Сайт Http позволит нам развернуть наш смарт-контракт в нашей локальной цепочке блоков.

Щелкните значок плюса, чтобы создать файл bloc.sol.

Создать блок Sol

Первая строка смарт-контракта должна декларировать версию надежности для компиляции нашего смарт-контракта, для этого мы напишем следующее:

 прагма солидность ^ 0.5.1;

Чтобы сообщить компилятору о нашем смарт-контракте, мы определим блок контракта. Контракт, подобный классу в ООП, который содержит все поля и методы:

 прагма солидность ^ 0.5.1;
контракт Bloc {
}

Для сохранения задачи нам необходимо сделать следующее:

1. Создайте структуру для своей задачи: Struct позволяет создавать определяемый пользователем тип данных. У него будет строка как задача и логическое значение, указывающее, выполнена ли задача или нет.

 прагма солидность ^ 0.5.1;
контракт Bloc {
 struct Task {
    строковое задание;
       bool isDone;
   } 
}

2. Создайте сопоставление для хранения нашего массива задач со связанным адресом пользователя: сопоставление похоже на хеш-таблицу, здесь мы создаем адрес в качестве ключа, а значение будет массивом структуры задачи. Установите это сопоставление как частное для модификатора доступа. Адрес - это твердый тип данных, который подчеркивает адрес учетной записи.

 прагма солидность ^ 0.5.1;
 контракт Bloc { 
   struct Task {
    строковое задание;
       bool isDone;
   }
   отображение (адрес => Задача []) частных пользователей;
}

Способы манипулирования нашей задачей в контракте:

1. Создать задачу: этот метод создает задачу.

• Метод addTask принимает строку в качестве аргумента.
• calldata устанавливает расположение данных для строкового аргумента.
• external делает метод доступным при вызове через web3js.
• msg.sender дает нам адрес пользователя, вызывающего метод.
• Метод push для добавления задачи в сопоставление.

 прагма солидность ^ 0.5.1;
 
контракт Bloc { 
   struct Task {
    строковое задание;
       bool isDone;
   }
   
   отображение (адрес => Задача []) частных пользователей;
 
  функция addTask (строка calldata _task) external {
      Пользователи [msg.sender] .push (Задача ({
          задача: _task,
          isDone: false
      }));
   } 
}

2. Чтение задачи: этот метод помогает прочитать значение в задаче.

• Чтобы вернуть структуру Task из метода getTask, нам нужно добавить строку 2.
• Метод getTask принимает индекс задачи и выдает задачу.
• memory - это место данных для возвращаемой Задачи.
• view сообщает, что функция не модифицирует состояние цепочки блоков.

 прагма солидность ^ 0.5.1;
 
контракт Bloc { 
   struct Task {
    строковое задание;
       bool isDone;
   }
   
   отображение (адрес => Задача []) частных пользователей;
 
  функция addTask (строка calldata _task) external {
      Пользователи [msg.sender] .push (Задача ({
          задача: _task,
          isDone: false
      }));
   }
   
   функция getTask (uint _taskIndex) возвращает внешнее представление (память задач) {
       Задача хранения задач = Пользователи [msg.sender] [_ taskIndex];
       вернуть задачу;
   } 
}

3. Задача обновления: этот метод обновит значения в задаче.

• Этот метод устанавливает или снимает отметку с задачи.
• Метод updateStatus принимает индекс задачи и статус для обновления.
• С помощью taskIndex мы сможем получить доступ к структуре задачи, поэтому мы установим isDone на переданный статус.

 pragma solidity ^0.5.1;
 
contract Bloc{ 
   struct Task{
    string task;
       bool isDone;
   }
   
   mapping (address => Task[]) private Users;
 
  function addTask(string calldata _task) external{
      Users[msg.sender].push(Task({
          task:_task,
          isDone:false
      }));
   }
   
   function getTask(uint _taskIndex) external view returns (Task memory){
       Task storage task = Users[msg.sender][_taskIndex];
       return task;
   }
 
  function updateStatus(uint256 _taskIndex,bool _status) external{
        Users[msg.sender][_taskIndex].isDone = _status;
   } 
}

4. Удалить задачу: метод deleteTask принимает индекс задачи и затем удаляет элемент из массива, как в C.

 прагма солидность ^ 0.5.1;
 
контракт Bloc { 
   struct Task {
    строковое задание;
       bool isDone;
   }
   
   отображение (адрес => Задача []) частных пользователей;
 
  функция addTask (строка calldata _task) external {
      Пользователи [msg.sender] .push (Задача ({
          задача: _task,
          isDone: false
      }));
   }
   
   функция getTask (uint _taskIndex) возвращает внешнее представление (память задач) {
       Задача хранения задач = Пользователи [msg.sender] [_ taskIndex];
       вернуть задачу;
   }
 
  function updateStatus (uint256 _taskIndex, bool _status) external {
        Пользователи [msg.sender] [_ taskIndex] .isDone = _status;
   }
 
    function deleteTask (uint256 _taskIndex) external {
       удалить пользователей [msg.sender] [_ taskIndex];
   } 
}

5. Получить количество задач: количество задач можно получить как длину массива задач.

А полная программа солидности после добавления всех вышеперечисленных методов решения задачи выглядит так:

Нажмите кнопку Compile под опцией левой панели навигации Solidity.

Скомпилируйте bloc.sol

Нажмите « Развернуть и запустить транзакцию» в их развертывании, и в развернутом контракте вы найдете все методы.

На этом мы закончили создание базового смарт-контракта. Этот смарт-контракт мы будем использовать в следующей статье для связи с веб-приложением. Теперь мы создадим веб-приложение, которое может взаимодействовать со смарт-контрактом, который мы создали выше.

Прежде чем мы начнем создавать веб-приложение, нам понадобится блокчейн Ethereum, который будет содержать смарт-контракт и данные нашего приложения. Мы собираемся использовать Ganache, чтобы загрузить и установить его.

После установки откройте Ganache и щелкните по быстрому запуску Ethereum, после чего обратите внимание на адрес, помеченный в разделе RPC Server (должен быть примерно так http://127.0.0.1:7545).

Теперь создаем веб-приложение

Веб-страница будет выглядеть так:

блок

getAccount.js

config.js

• Перейдите в Remix IDE и убедитесь, что у вас есть bloc.sol из предыдущего руководства (убедитесь, что сайт HTTP, а не https).
• Перейдите к компилятору solidity, расположенному на левой панели, и щелкните по compile bloc.sol. Внизу вы найдете кнопку со значком копирования и текстом, когда ABI нажимает на нее. Вставьте его в строку 1 js / config.js.

 пусть contractABI = КОПИРОВАННЫЙ ТЕКСТ;
Скопированный текст будет заключен в [].

• Перейдите к развертыванию и запуску транзакций в среде, выберите Web3 Provider.
• Введите адрес, который вы скопировали из Ganache, и вставьте его, нажмите OK.
• Теперь будет видна кнопка развертывания, щелкнув по ней.
• Внизу вы найдете ярлык «Развернутые контракты», теперь на нем будет щелкнуть кнопка со значком «Копировать».
• И вставьте в js / config.js строку 2.

 let contractAddress = 'КОПИРОВАННЫЙ текст';
Скопированный текст может выглядеть так: 0xF3017acEDd45526aC6153FBBCfcA8096173D245a.
КонтрактABI помогает web3js с нашим смарт-контрактом
ContractAddress сообщает web3js о том, где на блокчейне находится наш смарт-контракт.

app.js