Как отобразить тикер цены биткойнов словами в вашем приложении HTML5

Пошаговое руководство по созданию криптографического веб-приложения

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

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

В этих условиях вполне естественно, что цена Биткойна в долларовом выражении неуклонно растет с момента его создания немногим более 12 лет назад. Цена биткойнов, очевидно, интересует всех.

Многие люди каждый день проводят много времени, глядя на цену биткойнов.

В этом руководстве я покажу вам, как создать веб-приложение, которое отображает цену биткойнов в реальном времени. Чтобы было еще интереснее, цена биткойнов будет отображаться словами, а не только в числовом формате.

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

Учебное пособие будет разбито на шесть частей:

1. Создание HTML-страницы, на которой будет отображаться цена биткойнов
2. Использование веб-службы для получения цены биткойнов
3. Чтение данных в формате JSON
4. Преобразование цены биткойнов в слова
5. Использование API преобразования текста в речь для прослушивания цены биткойнов
6. Тестирование нашей цены на биткойны в веб-приложении Words

1. Создайте HTML-страницу, на которой будет отображаться цена биткойнов.

Наша HTML-страница будет довольно простой. Он будет состоять из заголовка с логотипом Биткойн и отображаемой даты и времени цены Биткойн. Эта цена будет отображаться ниже, в центре страницы.

Это дает нам следующий HTML-код:

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

2. Используйте веб-службу, чтобы узнать цену биткойнов.

Существует несколько веб-сервисов, позволяющих узнать цену биткойнов в режиме реального времени. Для этого урока я выбрал бесплатную версию от CoinDesk. Эта веб-служба доступна по следующему URL-адресу:

Https://api.coindesk.com/v1/bpi/currentprice.json

Вы можете ввести этот URL-адрес в своем браузере, чтобы увидеть ответ JSON:

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

Чтобы использовать эту веб-службу, мы будем использовать AJAX с объектом XMLHttpRequest. Мы определяем функцию обратного вызова для свойства onreadystatechange этого объекта. В этой функции мы проверяем, является ли readyState правильным и равен ли возвращенный HTTP-код 200.

Если это так, мы можем вызвать функцию parseJson для чтения данных из веб-службы CoinDesk.

Чтобы выполнить запрос AJAX и использовать CoinDesk API, мы вызываем функцию open экземпляра XMLHttpRequest, а затем вызываем его функцию send:

3. Прочтите данные в формате JSON.

Следующим шагом является чтение данных в формате JSON для получения цены биткойнов в долларах США. Это делается в функции parseJson. Данные хранятся в массиве, через который мы получаем цену.

Как только цена получена в переменной usdValue, мы передаем ее в функцию numberToWords, которая преобразует цену в слова. Эта функция будет подробно описана на следующем шаге.

Стоимость биткойнов прописью отображается в div контенте, который вы видели на шаге 1:

В конце этой функции вы можете видеть, что мы сохраняем текст, который будет продиктован API преобразования текста в речь, в переменной textToSpeech.

Наконец, мы вызываем метод bitcoinPrice каждые 60 секунд, чтобы цена биткойна автоматически обновлялась в реальном времени. Это делается путем вызова функции setTimeout.

4. Преобразуйте цену биткойна в слова.

Сейчас большая работа состоит в том, чтобы преобразовать цену биткойнов из цифрового формата в слова. Это делается в numberToWords функции, вызываемой в parseJson функции.

Мы используем простой алгоритм, чтобы перевести цену биткойна в слова. Мы определяем два массива, a и b, которые будут содержать метки для записи цены биткойна словами.

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

5. Используйте API преобразования текста в речь, чтобы узнать цену биткойнов.

Переменная textToSpeech передается в bitcoinPrice функцию. Он содержит текст, который необходимо прочитать, чтобы узнать цену биткойнов.

Итак, все, что осталось, - это создать объект SpeechSynthesisUtterance API преобразования текста в речь. Затем мы определяем используемый язык. Наконец, мы вызываем функцию speak с переменной textToSpeech в качестве входных данных.

Все это помещено в sayBitcoinPrice функцию, которая будет вызываться, когда пользователь щелкнет div, содержащий цену биткойнов, отображаемую словами:

6. Проверьте нашу цену на биткойны в веб-приложении Words

Наше веб-приложение готово. Остается только собрать различные элементы в bitcoinpriceinwords.html файл. Вот полный исходный код:

Только что разработанное нами веб-приложение можно протестировать на сайте https://www.bitcoinpriceinwords.com. Если вы сделаете это, вы получите следующий экран:

Если вы останетесь на странице HTML более 60 секунд, вы увидите обновление цены биткойнов автоматически.

Пожалуйста, не стесняйтесь тестировать этот код самостоятельно и предлагать мне идеи по улучшению сайта Bitcoin Price In Words, который делает идею этого веб-приложения для отображения цены Bitcoin в словах доступной для всех.