Вступление
В 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 APIClient
- Документация OpenLaw Object
Создайте шаблон 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
- Настройте константы API OpenLaw и получите доступ к нашему экземпляру OpenLaw и текущему шаблону соглашения о продаже учебного пособия OpenLaw.
- Установите переменные состояния.
- Захватите ввод пользователя из формы.
- Создайте параметры объекта OpenLaw
- Отправьте объект OpenLaw в экземпляр OpenLaw, и он появится на вкладке «Управление черновиками» или «Управление контрактами».
Ниже приводится описание всех переменных и функций, которые мы будем использовать для интеграции OpenLaw в наш файл App.js. Весь код App.js находится после этих таблиц.
Наконец, вот код App.js:
Перейдите к своему экземпляру OpenLaw, войдите в систему и перейдите по ссылке «Управление черновиками» в меню. Теперь вы должны увидеть черновик, который вы отправили в OpenLaw.
Заключение
Чтобы узнать больше об OpenLaw, посетите наш сайт и документацию, где вы найдете обзор и подробное справочное руководство, а также. Кроме того, обязательно ознакомьтесь с OpenLaw Elements, который позволяет вам динамически отображать компоненты формы React из вашего шаблона OpenLaw, а не подключать каждое поле индивидуально. Вы также можете найти нас по адресу [email protected] или подключиться к нашему сообществу Slack channel. Следите за нашими Medium и Twitter для дальнейших объявлений, руководств и полезных советов в ближайшие недели и месяцы.
Ссылки на учебное пособие по OpenLaw
- Обзор OpenLaw Docs
- OpenLaw Модуль NPM
- OpenLaw REST API и APIClient
- Объект OpenLaw
- OpenLaw Elements - для более быстрой разработки в React
- Уценка для шаблонов OpenLaw
- Учебное пособие по OpenLaw от Майкла Райса 😎: Учебное пособие по OpenLaw: смарт-контракты с поддержкой блокчейна, юридически закрепленные смарт-контракты
- Бонусное руководство от члена сообщества OpenLaw » Росс Кэмпбелл, «Начало работы с юридической инженерией - № 1 Openlaw.io
- Бонусное руководство от члена сообщества OpenLaw Джоша Ма, Dapps для ваших умных соглашений