Создайте кроссплатформенный настольный клиент Bitcoin с помощью Electron

Нажмите здесь, чтобы опубликовать эту статью в LinkedIn »

В этом руководстве мы собираемся создать настольный клиент Bitcoin. Это будет не самый искушенный клиент; на самом деле это будет довольно просто. Однако его большим преимуществом является то, что вы можете использовать его во всех Windows, Linux или MacOS благодаря кроссплатформенной архитектуре Electron. С помощью этого приложения вы сможете покупать и продавать биткойны с помощью Coinbase и следить за балансом своих счетов.

Помните, что основная цель этого руководства - научить вас создавать приложение с помощью Electron и использовать Coinbase Node.js SDK. Следовательно, биткойн-клиент не будет «готов к производству», даже если он сможет выполнять транзакции с реальными деньгами. Если вы торгуете с ним, вы всегда на свой страх и риск.

Вот как наше приложение будет выглядеть после этого урока:

Вы можете найти последнюю версию исходного кода Биткойн-клиента в Github.

Предварительные условия

• Знание JS, HTML и CSS.
• Некоторое базовое понимание торговых «модных словечек» (например, фиат, покупка, продажа…)
• Мотивация научиться разрабатывать настольные приложения с Electron!

Что такое Электрон?

Согласно официальной документации:

«Electron позволяет создавать настольные приложения с использованием чистого JavaScript, предоставляя среду выполнения с богатыми собственными (операционной системой) API. Вы можете рассматривать его как вариант среды выполнения Node.js, ориентированный на настольные приложения, а не на веб-серверы ».

Вот и все. Если вы когда-либо использовали Javascript / node.js в прошлом, вы почувствуете себя как дома. Единственная часть, которая немного «уникальна», - это два разных типа процессов, составляющих каждое приложение Electron: «основной» и «рендеринг».

Официальная документация довольно хорошо объясняет различия:

«В Electron процесс, выполняющий сценарий package.json main, называется основным процессом. Сценарий, выполняемый в основном процессе, может отображать графический интерфейс, создавая веб-страницы. В приложении Electron всегда есть один основной процесс, но не более того.

Поскольку Electron использует Chromium для отображения веб-страниц, также используется многопроцессорная архитектура Chromium. Каждая веб-страница в Electron выполняется в собственном процессе, который называется процессом рендеринга ».

Короче говоря, каждый «экран» в вашем приложении будет отдельным процессом «рендеринга». Эти процессы будут полагаться на «основной» процесс (который будет уникальным) для создания элементов графического интерфейса пользователя, таких как диалоги или новые экраны.

Например, это может быть структура типичного приложения Electron:

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

Если вам интересно, вы можете найти дополнительную информацию здесь.

Выполнение

Шаг 0: Создайте токен API в Coinbase

• Если у вас все еще нет учетной записи Coinbase, вы можете создать ее здесь
• Перейдите в «Настройки» → «Доступ к API» → «+ Новый ключ API».
• Заполните модальное диалоговое окно и нажмите «Создать». Имейте в виду, что мы не будем использовать все эти права, это просто для того, чтобы избежать проблем с разрешениями при разработке нашего приложения. Для рабочих приложений НЕ используйте этот подход. Выбирайте только то, что вам нужно.

• Скопируйте как «ApiKey», так и «ApiSecret». Они нам понадобятся позже. Храните эти учетные данные в безопасности и не размещайте их нигде!
• Вот и все. К сожалению, из соображений безопасности Coinbase отключает ApiKey в первые 48 часов. Но не волнуйтесь, это не препятствие для разработки нашего приложения.

Шаг 1. Клонируйте репозиторий «electronic-quick-start» и установите электрон

git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install

Шаг 2: Переименуйте проект в «биткойн-клиент».

mv electron-quick-start bitcoin-client

Шаг 3. Подготовьте структуру проекта.

# Create the assets folder
mkdir bitcoin-client/assets
# Create the css folder
mkdir bitcoin-client/assets/css
# Create the "utils.js" file, where we'll store utilities
touch bitcoin-client/utils.js

Теперь у вас должно получиться что-то вроде этого:

Шаг 4. Добавьте HTML-код

Откройте файл index.html и добавьте следующий код:

Как видите, это довольно стандартный HTML-файл. Здесь нет ничего особенного для Electron.

Шаг 5: добавляем несколько стилей

У нашего приложения теперь есть скелет, но он также очень уродлив. К счастью, это легко исправить. Создайте файл index.css внутри assets / css и добавьте следующий код:

Шаг 6. Изменение размера окна браузера

Он намного лучше, но и экран тоже не очень хорошо выглядит. Он слишком велик для нашего контента. Теперь перейдите к файлу main.js и замените:

// Create the browser window.
mainWindow = new BrowserWindow({width: 800, height: 600})

By:

// Create the browser window.
mainWindow = new BrowserWindow({ width: 450, height: 460 })

Шаг 7. Установите библиотеку node.js «coinbase»

Перейдите в корневой уровень папки нашего приложения и запустите:

npm install coinbase --save

Это не только установит библиотеку, но и добавит ее в наш список зависимостей в файле «package.json».

Шаг 8. Добавьте библиотеку coinbase в файл renderer.js.

Теперь перейдите в файл «renderer.js» и добавьте этот код вверху:

Вы можете поместить сюда как apiKey, так и apiSecret, которые вы скопировали с Coinbase. Если вы находитесь в течение первых 48 часов после создания, а ключ все еще отключен, не беспокойтесь, вы можете добавить его позже.

Шаг 9. Добавьте ссылки на элементы HTML и некоторые переменные.

Также в renderer.js добавьте этот код после строк, которые мы добавили на предыдущем шаге:

Здесь мы создаем ссылки для наших HTML-элементов, чтобы мы могли прикреплять события и использовать их позже. Кроме того, мы определяем переменную «useSandboxMode», чтобы мы могли по-прежнему использовать приложение с поддельными данными, если захотим (или если мы все еще ждем активации нашего ApiKey).

Важно упомянуть переменную «fiatCurrency». Здесь вам нужно указать валюту вашего кошелька Coinbase. Поскольку я нахожусь в Европе, я использую «евро». Если вы находитесь в «США», вы, вероятно, захотите использовать «доллары США». Установка правильной валюты здесь крайне важна для работы приложения, поэтому, если вы не уверены, перейдите в свою учетную запись Coinbase и дважды проверьте.

Наконец, мы определяем currentBalanceFiat и currentBalanceBtc. Они будут содержать поддельные данные (5000 и 3) в «SandboxMode» или 0, если мы получим значения непосредственно из Coinbase.

Шаг 10. Давайте создадим несколько утилит.

Теперь, прежде чем мы создадим события для различных кнопок и входов, нам нужно определить некоторые функции утилит, которые помогут нам взаимодействовать с Coinbase.

• getHowManyBtcCanIBuy: эта функция возвращает количество биткойнов, которое мы могли бы получить в зависимости от суммы денег (долларов или евро), которую мы готовы заплатить. Если режим «SandboxMode» активен, мы принимаем 9000 евро за цену биткойнов.
• getTotalPriceOfBtcAmount: эта функция возвращает цену, которую мы получили бы в зависимости от количества биткойнов, которые мы готовы продать. Если режим «SandboxMode» активен, мы принимаем 9000 евро за цену биткойнов.
• refreshRealData: эта функция обновит баланс в графическом интерфейсе с реальными данными, извлеченными непосредственно из Coinbase, поэтому мы всегда знаем реальный статус нашей учетной записи. Конечно, это будет работать, только если «SandboxMode» имеет значение false.

Перейдите в файл utils.js и добавьте следующие строки:

Шаг 11. Давайте добавим несколько событий для покупки и продажи биткойнов!

Круто, мы к цели. К сожалению, наше приложение пока мало что делает. Когда мы нажимаем наши кнопки, ничего не происходит. Давай исправим это. Добавьте следующий код в начало файла «renderer.js».

Это позволит нам как использовать некоторые диалоги из Electron, так и вызывать функции, которые мы только что определили в файле utils.js. Обратите внимание на то, как мы используем «require ('electronics'). remote». Этот «.remote» в конце сообщает Electron, что мы хотели бы запускать эти функции в «основном» процессе. вместо этого в текущем процессе «рендерера». Причина в том, что только «основной» процесс может создавать элементы пользовательского интерфейса, такие как диалоги или новые экраны.

А теперь давайте добавим событие, которое позволит нам покупать биткойны! Добавьте следующий код в конец файла «renderer.js»:

Примечание (10–03–2018). На сегодняшний день у меня возникли проблемы с покупкой BTC с помощью библиотеки coinbase node.js. Я не исключаю, что это из-за какой-то плохой конфигурации на моей стороне, но у других людей тоже есть подобные проблемы. Я обновлю руководство, как только выясню причину этого.

Как видите, все довольно просто. В зависимости от того, используем ли мы «SandboxMode» или нет, мы вызываем метод «buy» из библиотеки Coinbase или просто «подделываем» Buy. Мы также «обновляем» балансы после завершения процесса, чтобы предотвратить покупки на деньги, которых у нас больше нет.

Теперь, как было бы событие по продаже биткойнов ?. После предыдущего кода добавьте следующие строки:

Как видите, он практически идентичен предыдущему, так что здесь никакой загадки :)

Шаг 12: Хорошо! Но мне бы хотелось видеть, сколько биткойнов я покупаю на свои деньги.

Эта функция есть почти в каждом клиенте Биткойн, который я видел, поэтому я думаю, что это было бы отличным дополнением к нашему приложению. Добавьте следующий код в файл renderer.js после метода продажи:

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

12 BTC = 108000 евро

9000 Евро = 1 BTC

Вот как это выглядит:

Шаг 13: последнее касание к файлу renderer.js

Наконец, мы хотели бы, чтобы наш графический интерфейс время от времени обновлялся. Это важно, потому что, если вы выполняете некоторые транзакции в Coinbase вне нашего приложения, наши балансы будут полностью устаревшими !. Внизу файла «renderer.js» добавьте следующий код:

Как видим, мы создаем интервал, который выполняется каждые 30 секунд.

Шаг 14: используйте собственное меню

Теперь приложение выглядит намного лучше. Осталось только одно важное. Меню окна. Добавьте этот импорт в начало файла «main.js»:

Теперь также в файле main.js после переменных добавьте Custom Menu:

Шаг 15: готово!

Наконец, если вы запустите:

npm start

Вы должны увидеть полнофункциональный биткойн-клиент:

А как насчет только что созданного меню?

Просто, но теперь мы знаем, как это настроить!

Шаг 16. Давайте изменим файл package.json.

Имеет смысл изменить файл «package.json», чтобы мы указали правильное «имя», «ключевые слова» и так далее. Не забудьте сменить имя «автора», теперь это ваше приложение!

Шаг 17: Создание исполняемых файлов

Что касается последнего шага, нам нужно сгенерировать исполняемые файлы для распространения нашего приложения в желаемых операционных системах. К счастью, Electron упрощает этот процесс.

• Установить npm install electron-packager -g
• Добавьте необходимые команды «скриптов» в package.json:

• Создайте папку «значки» в активах и следующие «подпапки» для каждой ОС:

• Загрузите эти значки для каждой операционной системы и сохраните их в нужную папку: Windows, Linux, MacO S
• Теперь, в зависимости от вашей операционной системы, вы можете просто запустить:

npm run package-mac

npm run package-win

npm run package-linux

• Это создаст папку с названием «release-builds» с вашими исполняемыми файлами внутри!

Шаг 18: Заключительные слова

Это все!. Когда ваш ключ API будет активирован, вы сможете использовать Coinbase для покупки / продажи биткойнов, просто установив для «useSandboxMode» значение «true» и добавив учетные данные в файл «renderer.js».

Как мы сказали в начале, основная цель этого руководства - научить разрабатывать настольные приложения с помощью Electron. Поэтому я не рекомендую использовать этот клиент для ежедневной торговли реальными биткойнами. Причина в том, что это приложение нуждается в серьезном тестировании и улучшенной проверке входных данных, прежде чем оно станет «готовым к производству».

Тем не менее, если вы любите приключения, вы, конечно, можете попробовать настроить и протестировать его, чтобы увидеть, подходит ли вам это, но всегда на свой страх и риск :)

Спасибо, что следуете этому руководству! Хорошего дня!