Вступление

В OpenLaw мы хотим помочь вашему децентрализованному приложению («DApp») интегрироваться с сегодняшними правовыми системами. DApp - это программное приложение, в котором внутренний код выполняется на децентрализованной и распределенной цепочке блоков, такой как Ethereum, в отличие от централизованного сервера.

Основываясь на предыдущем учебнике Майкла Райса по OpenLaw, мы продемонстрируем полное сквозное руководство о том, как создать простой DApp, интегрированный с OpenLaw JavaScript API и Truffle's React Box. Для построения DApp с OpenLaw требуются библиотеки OpenLaw APIClient и OpenLaw Object, которые входят в пакет OpenLaw NPM.

Хотя в этом руководстве рассматривается развертывание смарт-контракта в Truffle с использованием React в качестве интерфейса, нет необходимости использовать Truffle или React с OpenLaw. Эти инструменты - лишь один из способов от начала до конца создать DApp и использовать его на основе OpenLaw. Итак, если у вас уже есть развернутый смарт-контракт и вы хотите пропустить раздел о развертывании контракта с Truffle, пожалуйста, сделайте это.

Предварительные требования: базовые знания JavaScript и NPM / Node.js. Практическое знание React и фреймворка Truffle полезно для этого конкретного руководства, но не обязательно для использования OpenLaw API и объекта OpenLaw в целом.

Уже установлено на вашем компьютере (чтобы полностью изучить это руководство, убедитесь, что у вас есть все перечисленное ниже). Node версии 8.9.4, NPM версии 6.0.0, Truffle версии 5.0.3. В этом руководстве мы используем глобально установленную версию Truffle. Если вы не установили Truffle, см. Документы Truffle и Пакет Truffle NPM. Также необходимы MetaMask в вашем браузере. Rinkeby Ether в вашей учетной записи MetaMask и учетная запись Infura.io для подключения вашего DApp к тестовой сети Rinkeby.

Пропустить:

Если вы хотите сразу перейти к коду, перейдите на Github здесь.

Если вы хотите пропустить развертывание контракта с разделом Truffle и сразу перейти к созданию с помощью OpenLaw API в вашем App.js, нажмите здесь.

Что мы создаем: - DApp для взаимодействия с OpenLaw API.

Обзор

В этом руководстве мы собираемся 1) создать шаблон OpenLaw с помощью простого в использовании языка разметки OpenLaw, 2) использовать Truffle React Box для развертывания смарт-контракта, сопровождающего наш шаблон OpenLaw, 3) и, наконец, использовать OpenLaw JavaScript API для создания микросайт с React.js для взаимодействия с нашим шаблоном OpenLaw.

Настроить OpenLaw

Зарегистрируйтесь в учетной записи OpenLaw. Если у вас еще нет учетной записи OpenLaw, вы можете создать бесплатную учетную запись.

Документация OpenLaw. Мы в первую очередь будем ссылаться на документацию OpenLaw APIClient и OpenLaw Object, оба из которых входят в состав модуля OpenLaw NPM.

Создайте шаблон OpenLaw. Войдите в экземпляр OpenLaw.io, который вы используете, и создайте шаблон, для этой демонстрации я буду использовать заголовок Соглашение о продаже учебного пособия по OpenLaw API , но вы можете называть свое согласие как угодно. Затем вырежьте и вставьте приведенный ниже код (полное объяснение того, как создать этот шаблон, см. В предыдущем руководстве OpenLaw). В предыдущем руководстве объясняется, как создать шаблон Bill of Sale, который представляет собой простое юридическое соглашение на основе блокчейна, в котором одна сторона соглашается купить товар по определенной цене у другой стороны.

<%
[[Seller Address: EthAddress]]
[[Buyer Address: EthAddress]]
[[Purchased Item]]
[[Purchase Price: Number]]
[[@Purchase Price in Wei = Purchase Price * 1000000000000000000]]
[[Record Contract:EthereumCall(
contract: "0x9570a3C2e9cC4a43D03d06EC9bf36fa5B9bCd0D2";
interface:[{"constant":false,"inputs":[{"name":"_descr","type":"string"},{"name":"_price","type":"uint256"},{"name":"_seller","type":"address"},{"name":"_buyer","type":"address"}],"name":"recordContract","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"}];
network:"Rinkeby";
function:"recordContract";
arguments: Purchased Item, Purchase Price in Wei, Seller Address, Buyer Address)]]
%>
\centered ** BILL OF SALE **
Seller at Ethereum address [[Seller Address]] ("Seller") agrees to sell a **[[Purchased Item]]**, and buyer at Ethereum address [[Buyer Address]]  ("Buyer") agrees to pay [[Purchase Price]] ether located at the contract address "Insert your contract address".
[[Record Contract]]
SELLER:
[[Seller Signatory Email: Identity | Signature]]
________________
BUYER:
[[Buyer Signatory Email: Identity | Signature]]

Настройте с помощью Truffle's React Box, добавьте CSS и разверните смарт-контракт.

См .: Документы Truffle React Box. Как отмечалось ранее, нет необходимости использовать Truffle и / или React.js с API OpenLaw.

Запустите новый DApp с Truffle’s React Box из терминала:

mkdir openlaw-api-tutorial
cd openlaw-api-tutorial
truffle unbox react

В корневой каталог установите NPM-пакеты dotenv и truffle-hdwallet:

npm install dotenv
npm install truffle-hdwallet-provider@web3-one

Из корневого каталога установите пакет OpenLaw NPM (на момент написания это версия 0.1.20) в папку клиента:

cd client
npm install openlaw --save

Добавьте файлы .env и truffle.js в корневой каталог. Корневой каталог должен выглядеть так:

Добавьте CSS. Из корневого каталога добавьте Semantic-UI и Semantic-UI-React для CSS. Вы также можете использовать предпочитаемый вами фреймворк CSS.

cd client 
npm i semantic-ui
npm i semantic-ui-react

Примечание: при появлении запроса в терминале установите semantic-ui в папки по умолчанию.

Из корневого каталога перейдите в файл index.html.

cd client/public/index.html

и добавьте ссылку на таблицу стилей Semantic-UI внутри ‹head› ‹/head›

<link 
rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css/>

Развертывание контракта BillOfSale.sol с Truffle.

Для этой части урока вам понадобится бесплатная учетная запись Infura.io. Infura.io предоставляет бесплатный доступ к узлу Ethereum, что означает, что вам не нужно загружать всю цепочку блоков Ethereum, чтобы начать разработку. Зарегистрируйтесь бесплатно, войдите в систему, перейдите в Панель управления, создайте новый проект, после создания нового проекта используйте Идентификатор проекта в качестве ключа Infura API.

В файле .env создайте переменные MNEMONIC и INFURA_API_KEY. Это должна быть ваша собственная мнемоника и ключ Infura API (примечание: не заключайте мнемонику в кавычки).

В файле truffle.js скопируйте и вставьте следующий код для подключения к сети Rinkeby (для более подробного обсуждения настройки сети в трюфеле с помощью Infura нажмите здесь):

require('dotenv').config();
var HDWalletProvider = require("truffle-hdwallet-provider");
var mnemonic = process.env["MNEMONIC"];
var infuraKey = process.env["INFURA_API_KEY"];
module.exports = {
  // See <http://truffleframework.com/docs/advanced/configuration>
  // to customize your Truffle configuration!
  //https://truffleframework.com/docs/truffle/getting-started/truffle-with-metamask
  //add solc optimizer
    solc: {
    optimizer: {
      enabled: true,
      runs: 2000
    }
  },
   //default -- contracts_build_directory:"./build/contracts",
 // contracts_build_directory:"./client/src/contracts",
  networks: {
    ganache: {
      host: "localhost",
      port: 8545,
      network_id: "*" // match any network
    },
    rinkeby: {
      //wrap provider in function to avoid crashing
      provider: function() {
        return new HDWalletProvider(mnemonic, "https://rinkeby.infura.io/v3/" + infuraKey);
      },
      host: "localhost",
      //port: 8545,
      network_id: 4, //rinkeby test network
      gas:  4000000, // Gas limit used for deploys
      gasPrice : 1000000000
    }
  }
};

В папке. / контракты удалите файл SimpleStorage.sol по умолчанию и замените его на BillOfSale.sol, а затем скопируйте и вставьте код в:

pragma solidity ^0.5.0;
contract BillOfSale {
  address payable public seller;
  address public buyer;
  string public descr;
  uint public price;
  bool public confirmed;
  //from OpenLaw Template
  function recordContract(string memory _descr, uint _price,
    address payable _seller, address _buyer
  ) public {
    descr = _descr;
    price = _price;
    seller = _seller; 
    buyer = _buyer;
  }
function () external payable { }
function confirmReceipt() public payable {
    require(msg.sender == buyer, "only buyer can confirm");
    require(address(this).balance == price, "purchase price must be funded");
    address(seller).transfer(address(this).balance);
    confirmed = true;
  }
}

В папке ./migrations удалите внутри «2_deploy_contracts.js» код, относящийся к SimpleStorage, а затем скопируйте и вставьте этот код:

var BillOfSale = artifacts.require("./BillOfSale.sol");
module.exports = function(deployer) {
  deployer.deploy(BillOfSale);
};

Скомпилируйте и перенесите наш контракт BillOfSale в тестовую сеть Rinkeby. Войдите в терминал и в корневой каталог нашего DApp и запустите:

rm -r build/

эта команда очистит папку ./build, и ее удобно использовать при изменении файлов solidity.

Из корневого каталога скомпилируйте и разверните наш контракт BillOfSale в тестовой сети Rinkeby:

truffle compile
truffle migrate --reset --network rinkeby

Если переход на Rinkeby прошел успешно, он должен выглядеть следующим образом:

Сохраните адрес вашего контракта (я выделил свой, например, синим цветом).

Использование OpenLaw JavaScript API

Добавьте адрес развернутого смарт-контракта в свое соглашение о продаже учебного пособия по OpenLaw API (выделено синим)

Откройте второе окно терминала, перейдите из корневого каталога в свою клиентскую папку и запустите DApp на http: // localhost: 3000 / в своем браузере. (Примечание: пока мы не изменим наш файл App.js, в браузере будет отображаться ошибка, к которой мы скоро вернемся).

cd client
npm run start

Затем перейдите в client / src / App.js. Здесь мы будем импортировать наш клиент OpenLaw API и объект OpenLaw из модуля NPM. Мы будем писать основную часть кода в App.js.

Импортируйте в App.js следующее:

import React, { Component } from "react";
import BillOfSaleContract from "./contracts/BillOfSale.json";
import getWeb3 from "./utils/getWeb3";
import { Container,Grid, Button, Form} from 'semantic-ui-react';
import { APIClient, Openlaw } from 'openlaw';
import "./App.css";

Примечание. Проблема с Truffle с приложением Create-React-App. (Если вы открываете консоль JavaScript в своем браузере и видите, что не можете импортировать BillOfSaleContract в App.js, то это может быть проблема с частью Create-React-App в Truffle React Box. Это можно исправить, установив ссылку или скопировав папку ./contracts из папки ./build в ./src, см. снимок экрана ниже.)

Порядок операций для App.js

  1. Настройте константы API OpenLaw и получите доступ к нашему экземпляру OpenLaw и текущему шаблону соглашения о продаже учебного пособия OpenLaw.
  2. Установите переменные состояния.
  3. Захватите ввод пользователя из формы.
  4. Создайте параметры объекта OpenLaw
  5. Отправьте объект OpenLaw в экземпляр OpenLaw, и он появится на вкладке «Управление черновиками» или «Управление контрактами».

Ниже приводится описание всех переменных и функций, которые мы будем использовать для интеграции OpenLaw в наш файл App.js. Весь код App.js находится после этих таблиц.

Наконец, вот код App.js:

Перейдите к своему экземпляру OpenLaw, войдите в систему и перейдите по ссылке «Управление черновиками» в меню. Теперь вы должны увидеть черновик, который вы отправили в OpenLaw.

Заключение

Чтобы узнать больше об OpenLaw, посетите наш сайт и документацию, где вы найдете обзор и подробное справочное руководство, а также. Кроме того, обязательно ознакомьтесь с OpenLaw Elements, который позволяет вам динамически отображать компоненты формы React из вашего шаблона OpenLaw, а не подключать каждое поле индивидуально. Вы также можете найти нас по адресу [email protected] или подключиться к нашему сообществу Slack channel. Следите за нашими Medium и Twitter для дальнейших объявлений, руководств и полезных советов в ближайшие недели и месяцы.

Ссылки на учебное пособие по OpenLaw