Инструкция по запуску

Превью: убедитесь, что на вашем компьютере установлен git. Если git отсутствует, то: Для Windows скачайте по ссылке https://git-scm.com/download/win и установите, следуя инструкциям Для Ubuntu выполните следующие команды в терминале: sudo apt-get update sudo apt-get install git-core git --version

1. Для запуска необходима установленная среда Node.js

• Для Ubuntu Node.js можно установить через менеджер пакетов. Откройте терминал и введите следующие команды: curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash - sudo apt-get install -y nodejs
• Для Windows нужно перейти по ссылке https://nodejs.org/en/download/ и скачать, следуя инструкциям
• Перезагрузите компьютер

2. Проверьте, что Node.js установлен с помощью команды node -v в терминале Ubuntu или в консоли Windows

3. Проверьте, что менеджер пакетов npm установлен с помощью команды npm -v (Устанавливается вместе с Node.js)

4. Также необходим менеджер пакетов yarn

• Для Ubuntu нужно выполнить в терминале следующие команды:
  • curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
  • echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
  • sudo apt-get update && sudo apt-get install yarn
• Для Windows нужно проследовать инструкции по ссылке: https://yarnpkg.com/lang/en/docs/install/#windows-stable

5. Проверьте, установлен ли yarn с помощью команды yarn --version в терминале Ubuntu или в консоли Windows

6. Если yarn установлен, склонируйте репозиторий с помощью команды git clone https://github.com/shinnik/startblock-frontend-demo.git После этого выполните команду git checkout development , чтобы перейти в ветку разработки.

7. Перейдите в папку с проектом и выполните следующие команды: sudo yarn install yarn start

8. Проект должен открыться в браузере по адресу localhost:3000

Инструкция по коду

Используется стэк React + redux.

Кодовая база UI разделена на несколько частей:

Директория lib

Хранит основные компоненты и почти всю кодовую базу связанную с React.

1. Компоненты (директория components)

• Основные элементы приложения. В идеале - атомарные. В текущей версии кодовой базы это может не всегда соблюдаться. Как правило, вкладываются в контейнеры и получают свойства из них.

2. Контейнеры (директория containers)

• Сгруппированные компоненты, подключенные к глобальному стору (т.н. умные компоненты). Управляют состоянием компонентов, которые в них содержатся

3. Константы/Модели (директории constants/models)

• Вынесенные в отдельные js-файлы переменные для отрисовки. Смысл их использования в упрощении кодовой базы и централизации управления компонентами

4. Страницы (директория pages)

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

5. Обертки (директория wrappers) Компоненты-обертки для придания стилей вложенным компонентам. Похоже на atomic-css в стиле React-components.

Директория store

Хранит логику взаимодействия компонентов React с redux.

1. Действия (директория actions) Перечислены действия, которые пользователь может производить с интерфейсом. А также реализованы функции, необходимые для связи компонентов с глобальным стором (action creators)

2. Редьюсеры (директория reducers) Реализованы и скомпозированы функции, отвечающие за свою часть стора и меняющие состояние этой части.

Директория styles

Хранит константы стилей

Директория utils

Хранит вспомогательные функции. Как правило небольшие. Для использования в компонентах и контейнерах.

Инструкция по деплоингу на удаленный сервер совместно с ONDER

• Перейти в директорию с UI
• Открыть файл src/lib/constants/endpoints.js
• Выставить serverName удаленного сервера
• Выставить ethAddress ячейки
• port и uri должны быть выставлены на null
• Запустить yarn build. Эта команда займет время. Появится папка build с собранными файлами UI. Настройка UI окончена
• Открываем PostgreSQL, создаем базу данных onder
• Переходим в папку с ONDER
• Открываем seller-virtual.json
• Выставляем нужные значения cellName, эфирного адреса ячейки, tradeHost. Последнее – это серый ip удаленного сервера. Его можно узнать командой ifconfig.
• Соберем ONDER командой yarn build. Ждем окончания. Тоже небыстрая процедура
• Команда DEBUG=* node packages/metering-kit-node/dist/bin/main.js --config ./config/seller-virtual.json запустит ONDER.
• Настроим nginx. Открываем конфиг.
• Добавляем следующее:

location /meters {
        proxy_set_header Host $http_host;
        proxy_set_header X-Forwarded-For $remote_addr;
        proxy_http_version 1.1;
        proxy_pass http://localhost:8881;	
        proxy_connect_timeout 600s;
        proxy_read_timeout 600s;
        proxy_send_timeout 600s;
    }

Обратите внимание на то, что проксирование идет на тот же порт, что и порт webInterfacePort в конфиге ONDER

• Ставим root равным тому пути, который ведет к папке build с собранным UI
• Перезапускаем nginx