Программирование

Как сделать свою собственную панель криптовалюты

Как сделать свою собственную панель криптовалюты

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

Если вы инвестировали или планируете приобрести какие-либо криптовалюты, то вам нужен способ отслеживать их цены в режиме реального времени. К счастью, вы можете легко создать себе крипто-панель мониторинга, используя не более чем HTML и CSS.

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

Начиная

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

криптоинструмент на CoinMarketCap

После выбора вы попадете на страницу обзора монет , где отображаются различные статистические данные, диаграммы и аналитика по выбранной вами монете. Перейдите на вкладку Инструменты . Здесь вы увидите готовый виджет, показывающий конкретные данные о выбранной вами монете. Не стесняйтесь экспериментировать с настройкой параметров этого виджета , но пока достаточно базового виджета. Скопируйте код из окна виджета веб-сайта или оставьте страницу открытой для дальнейшего использования.

Вот как выглядит код виджета для биткойнов:

<script type="text/javascript" src="https://files.coinmarketcap.com/static/widget/currency.js"></script> <div class="coinmarketcap-currency-widget" data-currency="bitcoin" data-base="USD" ></div> 

Будь вы в биткойнах , Ethereum , Ripple , Dogecoin или в любой другой из 1000+ альтернативных (альтернативных) монет, этот процесс абсолютно одинаков: найдите монету, а затем скопируйте код виджета .

Если вы хотите освоиться с автоматизацией, вы можете использовать тикер API и инструмент планирования, такой как Cron. чтобы выполнить почти все, что вам нравится Это немного выходит за рамки этой статьи, но вы можете создать оповещение по электронной почте, например, если цена упадет ниже определенного порога.

Создание веб-страницы

Теперь, когда у вас есть виджет, вам нужно создать простую HTML-страницу для его отображения. Используя ваш любимый текстовый редактор, создайте новый HTML-файл с именем dashboard.html .

Вот стартовый код, который вам нужен:

 <!doctype html> <html> <head> <title>Crypto Dashboard</title> </head> <body> </body> </html> 

Вставьте код HTML-виджета между тегами тела . Возвращаясь к Биткойну, весь код выглядит так:

 <!doctype html> <html> <head> <title>Crypto Dashboard</title> </head> <body> <script type="text/javascript" src="https://files.coinmarketcap.com/static/widget/currency.js"></script> <div class="coinmarketcap-currency-widget" data-currency="bitcoin" data-base="USD" ></div> </body> </html> 

крипто виджет панели инструментов

Это все, что нужно сделать. Это действительно так просто — создать собственную панель мониторинга криптовалюты.

Делать это довольно

Хотя эта панель приборов технически завершена, она не очень хороша. Виджет заполняет экран горизонтально, но не очень высокий по вертикали. Давайте создадим стиль с помощью каскадных таблиц стилей (CSS).

Под заголовком добавьте тег стиля :

 <style> </style> 

Внутри этих тегов стиля, где вы будете писать свой CSS. Вот что вам нужно:

 .coinmarketcap-currency-widget { width: 33%; margin: 100px auto; } 

крипто виджет панели инструментов с CSS

Этот простой CSS делает две вещи. Использование объектной модели документа (DOM), он нацелен на класс coinmarketcap-currency-widget . Этот класс является основным контейнером для виджета, поэтому эта команда указывает вашему веб-браузеру применить следующие стили к этому конкретному элементу.

Ширина виджета установлена ​​на 33% , что гарантирует, что он больше не будет выглядеть растянутым, если оставить параметр по умолчанию (в данном случае это 100%).

Наконец, сверху и снизу добавляется 100-пиксельное поле, а слева и справа — поле auto . Это отодвигает виджет от верхней части браузера и выравнивает его по горизонтали.

Нет почти никаких ограничений на то, как далеко вы можете зайти со своим стилем этого виджета. Возможно, вам нравится красный текст или синий фон? Как насчет прошивки текста? Небо действительно предел!

Добавляем больше монет

Теперь, когда вы прибили основы, пришло время добавить больше монет. Даже если у вас есть только одна монета, диверсификация панели инструментов имеет несколько преимуществ.

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

Контролируя другие валюты, вы часто можете ясно видеть, что деньги текут из одной в другую. Если вы хотите купить новую монету, добавив ее на свою панель инструментов, вы можете определить тренд или дневной минимум, чтобы получить выгодную сделку!

Используя описанные выше шаги, продолжайте и получите код виджета для любых других валют, которые вы хотите отслеживать. Просто вставьте их под трекер Bitcoin следующим образом:

 <script type="text/javascript" src="https://files.coinmarketcap.com/static/widget/currency.js"></script> <div class="coinmarketcap-currency-widget" data-currency="bitcoin" data-base="USD" data-secondary="BTC"></div> <div class="coinmarketcap-currency-widget" data-currency="ethereum" data-base="USD" data-secondary="BTC"></div> <div class="coinmarketcap-currency-widget" data-currency="ripple" data-base="USD" data-secondary="BTC"></div> <div class="coinmarketcap-currency-widget" data-currency="cardano" data-base="USD" data-secondary="BTC"></div> 

крипто панель инструментов добавить больше монет

Вам не нужен currency.js для каждого виджета. Вам нужно только один раз на страницу.

Если вы перезагрузите приборную панель, вы увидите, что она выглядит не очень хорошо. Все монеты сложены вертикально, и между ними огромные промежутки! Вам нужно будет изменить CSS, чтобы эти виджеты выглядели лучше для нескольких монет.

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

 width: 23%; margin: 10px 1%; float: left; 

крипто виджет панели инструментов горизонтальный

Используя этот же CSS, можно составить столько виджетов, сколько вам нужно, хотя вам может понадобиться немного изменить его после примерно 12 виджетов.

Крипто виджет панели инструментов сложены

Последний штрих — автоматическая перезагрузка приборной панели, которая гарантирует, что вы всегда будете в курсе последних цен.

Вставьте метатег внутри заголовков в верхней части документа:

 <meta http-equiv="refresh" content="60"> 

Это будет обновлять вашу страницу каждые X секунд, где X указано внутри содержимого . Код выше будет обновлять страницу каждые 60 секунд. Измените это на то, что вам нравится, если вы введете число в секундах.

Оставаться в здравом уме

Теперь, когда ваша криптовалютная панель готова , вам больше не нужно проверять coinmarketcap.com , coinbase.com или любой другой веб-сайт, который вы используете для мониторинга своих покупок. Только не сводите себя с ума, проверяя цены каждую минуту.

Оставьте его работающим на вашем компьютере, или, возможно, даже установите его на Raspberry Pi и запустите его в вашем коридоре!

Если вы хотите проверить цены на ходу, посмотрите наше руководство по лучшим криптовалютам для Android. , и не забудьте прочитать наше руководство обо всем, что вам нужно знать перед покупкой криптовалюты .

Вы построили крипто-панель? Где вы разместили свой? Дайте нам знать в комментариях ниже!

Похожие посты
Программирование

Что такое канал RSS? (И где его взять)

Программирование

7 причин, почему изображения не загружаются на ваш сайт

Программирование

Запустите агент SQL Server: настройте SQL Server 2012

Программирование

15 лучших бесплатных обоев дня Святого Патрика