Урок 1. Установка Visual Studio Code

Аннотация. В данном уроке мы рассмотрим процесс установки среды разработки (IDE) Visual Studio Code [1].

Среда разработки (IDE) Visual Studio Code – это удобный инструмент для написания кода смарт-контрактов. Он позволяет как создавать сам код, так и производить его отладку.

Для начала нам необходимо скачать установочный пакет VS Code. Это можно сделать с официального сайта Visual Studio Code, расположенного по адресу https://code.visualstudio.com/.

Для скачивания версии для операционной системы Windows необходимо нажать кнопку Download for Windows (рис. 1.1.1).

В появившемся окне укажите место, куда будет сохранен установочный пакет VS Code, и нажмите кнопку «Сохранить» (рис. 1.1.2).

Запустите скачанный установочный пакет. Появится окно с лицензионным соглашением (рис. 1.1.3).

Выберите пункт «Я принимаю условия соглашения» и нажмите кнопку «Далее». Появится окно с выбором места установки (рис. 1.1.4).

Здесь можно оставить все по умолчанию либо изменить место установки, нажав кнопку «Обзор…». Затем нажмите кнопку «Далее». Появится окно настройки папки в меню «Пуск» (рис. 1.1.5).

В данном окне просто нажмите кнопку «Далее». Появится окно с дополнительными настройками установки (рис. 1.1.6).

Установите настройки как показано на рис. 1.1.6 и нажмите кнопку «Далее». Появится окно (рис. 1.1.7).

Нажмите кнопку «Установить», начнется процесс установки. Затем появится окно завершения установки (рис. 1.1.8).

Отключите опцию «Запустить Visual Studio Code» и нажмите кнопку «Завершить». Перезагрузите компьютер! На этом установка VS Code завершена. Перейдем к установке расширения для работы с Solidity.

Урок 2. Установка расширения Visual Studio Code для работы с Solidity

Аннотация. В данном уроке мы рассмотрим, как установить в VS Code расширение для работы с языком программирования смарт-контрактов Solidity [1].

Изначально VS Code не поддерживает язык программирования смарт-контрактов, поэтому нам необходимо установить специальное расширение.

Запустите Visual Studio Code, дважды щелкнув по значку на «Рабочем столе» или в меню «Пуск» (рис. 1.2.1).

Откроется окно VS Code, где на панели слева необходимо открыть раздел EXTENSIONS: MARKETPLACE («Магазин расширений»), щелкнув по нему (рис. 1.2.2).

В строке поиска панели EXTENSIONS: MARKETPLACE набираем слово Solidity и нажимаем на клавиатуре клавишу «Enter». В результатах поиска выбираем первый пункт «solidity… Juan Blanco» (может быть не первым). Затем на вкладке Extension: solidity щелкаем по ссылке Install (рис. 1.2.3).

Начнется установка расширения. По окончании установки вкладка Extension: solidity будет выглядеть как на рис. 1.2.4.

На этом мы завершаем установку расширения VS Code для работы с Solidity и переходим к установке компилятора Node.js. Закройте VS Code!

Урок 3. Установка компилятора Node.js

Аннотация. В данном уроке рассматривается установка компилятора смарт-контрактов Node.js [2].

Мы будем создавать наши смарт-контракты на языке программирования Solidity, похожем на JavaScript. Но блокчейн Ethereum не понимает JavaScript. Нам необходимо конвертировать наш смарт-контракт на Solidity в машинный (бинарный) код. Для этого мы будем использовать компилятор Node.js.

Для установки компилятора в браузере откройте сайт https://Node.js.org/ru/ (рис. 1.3.1).

На странице Node.js нажмите ссылку «10.16.3 LTS» для загрузки стабильной версии компилятора или ссылку «12.11.1 Текущая» для загрузки последней версии компилятора. После окончания загрузки установочного пакета его необходимо запустить. Появится окно начала установки (рис. 1.3.2).

После нажатия кнопки Next появится окно с лицензионным соглашением (рис. 1.3.3).

Включите переключатель «I agree the terms…» и нажмите кнопку Next. Появится окно выбора папки для установки компилятора (рис. 1.3.4).

Здесь можно задать папку, нажав кнопку «Change…». Затем нажмите кнопку Next. Появится окно выбора устанавливаемых компонентов компилятора (рис. 1.3.5).

Оставьте эти настройки без изменений и нажмите кнопку Next. Появится окно начала установки (рис. 1.3.6).

В данном окне нажмите кнопку Install. Начнется процесс установки компилятора. По окончании установки появится финальное окно (рис. 1.3.7).

Для завершения установки компилятора Node.js нажмите кнопку Finish.

Урок 4. Тестирование Node.js и подключение фреймворка Truffle

Аннотация. В данном уроке мы протестируем работу компилятора Node.js, а также установим и протестируем фреймворк Truffle [3].

Теперь протестируем работу компилятора. Запустите VS Code от имени администратора. Для этого на «Рабочем столе» или в меню «Пуск» щёлкните правой кнопкой мыши по значку Visual Studio Code и в появившемся меню выберите пункт «Запуск от имени администратора» (рис. 4.1).

В появившемся окне VS Code откроем терминал. Терминал нам будет необходим для ввода различных команд. Например, для управления компилятором и другими инструментами.

Замечание. В качестве альтернативы терминалу в VC Code можно использовать утилиту Windows PowerShell (впрочем, она и запускается внутри VC Code в виде терминала).

Для того чтобы запустить терминал в оконном меню VS Code, выберите пункт Terminal / New Terminal (рис. 1.4.2).

Панель терминала откроется в нижней части окна VS Code. Для работы с новым проектом откройте раздел EXPLORER, нажав самую верхнюю кнопку на панели слева (рис. 1.4.2). В итоге окно VS Code будет выглядеть как на рис. 1.4.3.

Разверните терминал на всю панель, нажав кнопку «^» в верхнем правом углу панели терминала (рис. 1.4.3). Окно VS Code примет вид как на рис. 1.4.4.

Проверим подключение компилятора к терминалу VS Code. Для этого в терминале наберите команду «npm» и нажмите клавишу Enter (рис. 1.4.5).

Если компилятор работает, то мы увидим справку о команде «npm», как на рис. 1.4.5.

Теперь установим фреймворк Truffle. Truffle – это набор инструментов и библиотек для создания смарт-контрактов на языке программирования Solidity.

Замечание. Конечно, можно обойтись и без Truffle и все делать вручную. Это сложно и занимает много времени. Поэтому давайте автоматизируем создание смарт-контрактов с использованием инструментов фреймворка Truffle.

Для установки фреймворка в терминале наберите команду «npm install –g truffle» и нажмите клавишу Enter (рис. 1.4.6).

Если все работает, терминал будет выглядеть как на рис. 1.4.6.

Теперь для проверки работы компилятора Node.js при помощи фреймворка Truffle мы развернем тестовый проект Solidity и откомпилируем его.

Для начала создадим папку проекта. Для этого в разделе EXPLORER в левой части окна VS Code нажмите синюю кнопку Open Folder (рис. 1.4.6). В окне Open Folder нажмите кнопку «Новая папка». Создайте папку MetaCoin, выделите ее и нажмите кнопку «Выбор папки» (рис. 1.4.7).

Для проверки работы нашего окружения – «песочницы» – создадим тестовый проект при помощи Truffle. Для этого в окне терминала наберите команду «truffle unbox metacoin», как на рис. 1.4.8, и нажмите кнопку Enter. После развертывания тестового контракта MetaCoin окно VS Code будет выглядеть как на рис. 1.4.8.

Обратите внимание на изменения в разделе EXPLORER слева (рис. 1.4.8). Здесь появился проект MetaCoin, содержащий папки contracts, migrations и test. В папке contracts расположены наши смарт-контракты. Это файлы с расширением sol. В папке migrations располагаются настройки компиляции смарт-контрактов. Это файлы с расширением js. В папке test расположены файлы для отладки смарт-контрактов. Это файлы с расширением js и sol. Также обратите внимание на файл truffle-config.js, в нем мы прописываем настройки блокчейн-сети, где будем публиковать и запускать наши смарт-контракты, и при помощи данного файла мы будем подключать наш проект к эмулятору.

В заключение для проверки работы компилятора Node.js произведем компиляцию проекта MetaCoin. Для начала компиляции проекта в окне терминала наберите команду «truffle compile» и нажмите кнопку Enter. Окно VS Code примет вид как на рис. 1.4.9.

Обратите внимание на то, что в проекте MetaCoin в разделе EXPLORER появилась папка build. В данной папке мы можем увидеть файлы из папки contracts, откомпилированные в формат json. Позднее мы рассмотрим, как опубликовать эти файлы в эмуляторе сети блокчейн. Успешная компиляция тестовых смарт-контрактов в формат json подтверждает функционирование компилятора Node.js.

Теперь перейдем к установке эмулятора сети блокчейн Ganache.

Урок 5. Установка эмулятора Ganache

Аннотация. В уроке рассматривается установка эмулятора блокчейн сети Ganache [4].

Рассмотрим установку эмулятора блокчейн-сети Ethereum – Ganache. Мы будем использовать его для тестирования наших смарт-контрактов. Для начала скачаем установочный пакет эмулятора. Это можно сделать с официального сайта, расположенного по адресу http://trufflesuite.com/ganache (рис. 1.5.1).

Для начала скачивания версии Ganache для Windows необходимо нажать на ссылку DOWNLOAD (WINDOWS) (рис. 1.5.1). Появится окно загрузки установочного пакета (рис. 1.5.2).

Нажмите кнопку «Сохранить» (рис. 1.5.2). По окончании скачивания запустите установленный файл. Появится окно начала установки, где необходимо нажать кнопку «Установить» (рис. 1.5.3).

После окончании установки эмулятора появится окно с вопросом о сборе статистики. В данном окне нажмите кнопку CONTINUE (рис. 1.5.4).

Теперь произведем настройку рабочего окружения. Для начала активируем опцию QUICKSTART. Это автоматическая настройка окружения. Если выбрать опцию NEW WORKSPACE, то появятся расширенные настройки окружения. Если вы продвинутый пользователь, то можно их настроить. Всем остальным я советую предпочесть опцию QUICKSTART (рис. 1.5.5).

Замечание. Мы для простоты остановили свой выбор на опции QUICKSTART. Однако в данном случае все настройки эмулятора будут сброшены при последующем запуске эмулятора. Для текущих задач этого достаточно. Позже мы посмотрим, как создать постоянное окружение.

Появится рабочее окно Ganache. Рассмотрим его более подробно. Первое, что мы здесь видим, – это вкладка ACCOUNTS. В центре окна расположено десять криптокошельков с виртуальными 100 ETH на счету (рис. 1.5.7). Их можно добавлять и удалять. Обратите внимание, что в столбце ADDRESS отображается адрес кошелька, а знак ключа предоставляет доступ к адресу и закрытым ключам кошелька – эта информация понадобится нам позже (рис. 1.5.6).

В верхней части окна расположены кнопки для открытия других вкладок и текущая информация по состоянию нашей «виртуальной» сети, «Цена газа», «Остаток газа», «Состояние майнинга» и т. д. (рис. 1.5.7).

Рассмотрим другие вкладки. Вкладка BLOCKS отображает состояние майнинга (рис. 1.5.8), т. е. сколько блоков было создано вашим компьютером, пока был запущен эмулятор. Блоки будут создаваться в результате каких-либо действий в эмуляторе.

Перейдем на вкладку TRANSACTIONS. Здесь отображаются все транзакции в нашей виртуальной сети. Поскольку мы только установили эмулятор и не производили никаких транзакций, эта вкладка будет пуста (рис. 1.5.9).

Вкладка CONTRACTS отображает опубликованные в нашей виртуальной сети смарт-контракты, их состояние и действия (рис. 1.5.10). Далее мы будем часто работать с этой вкладкой.

На вкладке EVENTS отображаются различные события, происходящие в нашей виртуальной блокчейн-сети (рис. 1.5.11).

Ну и наконец, последняя вкладка LOGS. На данной вкладке отображаются все действия и события в нашей блокчейн-сети. Данный «журнал» можно очистить, нажав кнопку CLEAR LOGS, расположенную в верхнем левом углу окна (рис. 1.5.12).

Если нажать кнопку с шестеренкой, расположенную в верхнем правом углу (рис. 1.5.12), появится окно с настройками эмулятора (рис. 1.5.13).

В данном окне для нас наиболее интересна вкладка «Server». На данной вкладке находятся параметры подключения нашего проекта на Solidity в VS Code к нашей виртуальной блокчейн-сети в Ganache. Для подключения проекта нам понадобятся параметры HOSTNAME, PORT NUMBER и NETWORK ID (рис. 1.5.13).

Урок 6. Подключение тестового проекта в VS Code к эмулятору Ganache и проверка работы эмулятора

Аннотация. В данном уроке мы подключим наш тестовый проект в VS Code к эмулятору блокчейн-сети, опубликуем его в нашей виртуальной сети и протестируем его работу.

Теперь перейдем к подключению нашего тестового проекта, созданного нами ранее в VS Code. Сверните окно Ganache, но не закрывайте его! Запустите VS Code и на панели EXPLORER в нашем тестовом проекте METACOIN откройте файл truffle-config.js, в центре окна отобразится его содержимое (рис. 1.6.1).

Файл truffle-config.js содержит настройки подключения проекта к блокчейн-сети. Обратите внимание на то, что почти все строки в этом файле сейчас отключены. Они помечены символами «//», как комментарии. Давайте включим некоторые строки. Удалите символы «//» у строк с номерами 8–12, 18, 19 и 21, как на рис. 1.6.2.

Мы можем видеть, что параметры подключения к сети «host» и «port» совпадают с параметрами HOSTNAME и PORT NUMBER из окна настроек Ganache (урок 5, см. рис. 1.5.13). Параметр network_id мы оставили как «*» (любой), хотя его можно было задать как параметр NETWORK ID из окна настроек Ganache, т. е. «5777». Сохраните изменения в файле с настройками, выбрав в оконном меню VS Code пункт File/Save (рис. 1.6.3).

После подключения нашего проекта к эмулятору необходимо подключить эмулятор к нашему проекту, т. к. пока проект «видит» эмулятор, а эмулятор «не видит» наш проект. Для подключения эмулятора к проекту в окне Ganache откройте вкладку CONTRACTS. Мы видим, что эмулятор «не видит» наши тестовые смарт-контракты. Для подключения проекта нажмите кнопку LINK TRUFFLE PROJECTS в центре вкладки CONTRACTS (рис. 1.6.4).