Создание трекера криптовалют с помощью Vue.js

Создание трекера криптовалют с помощью Vue.js

От автора: криптовалюты становятся все популярнее, поэтому их ценность может сильно меняться. Если вам повезло, и вы купили пару монет всего за несколько долларов пару лет назад, то сейчас ваши монеты могут стоить тысячи долларов. Как разработчик, вы можете интересоваться созданием приложений в области криптовалют. К счастью, у вас есть доступ к данным о текущих криптовалютах через бесплатный API от CryptoCompare – в нем есть все, что нужно.

В этом уроке мы разберем, как создать трекер криптовалют, с помощью которого можно отслеживать 5 популярных криптовалют в долларах и евро. Будем использовать Vue.js. Об этом фреймворке очень хорошо отзываются в сети, поскольку, по-видимому, он быстрее React с его реализацией Snabbdom, простой и мощный Virtual DOM, сосредоточенный на производительности. Также эта библиотека намного меньше React и весит около 14Кб.

Приступим. Будем использовать Vuetify, в котором есть все необходимые инструменты для создания потрясающих интерфейсов, дающих силу Vue и Material Design.

Использование Vue-cli

Во-первых, необходимо установить Vue-cli. Установите Node.js и npm, после чего можно перейти к глобальной установке Vue CLI на локальную систему:

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

После установки Vue-cli станет доступна команда vue. Теперь мы можем начать проект с помощью следующей команды:

Мы говорим Vue создать новый проект и использовать шаблон vuetifyjs/webpack, указав имя cryptocurrency_tracker. Во время выполнения команды на экране появится несколько вопросов, как на скриншоте ниже:

Проект сгенерировался в папку cryptocurrency_tracker. Сменим директорию, чтобы установить зависимости через npm

После установки всех зависимостей необходимо запустить сервер с помощью npm

Сервер запустится на порте 8080, в браузере автоматически откроется приложение. На скриншоте ниже видно, что открыт проект Vue.js с пользовательской темой Vuetify.

Структура файлов и папок

Откройте папку проекта. Там вы найдете файл main.js – это точка входа в приложение. Пример:

Как видно, Vue использует плагин vuetify через Vue.use(Vuetify), в котором заданы базовые настройки темы. Объект Vue также создан через new Vue(), и в нем хранится конфиг объект, атрибут el (селектор, внутри которого будет проходить рендер приложения), атрибут components регистрирует список компонентов, доступных объекту Vue, template – элементы компонентов, которые будут отрисовываться на странице (сейчас это компонент App.vue). Откройте файл App.vue, в нем должен быть код кастомного шаблона из vuetify. Также есть компонент HelloWorld, отрисованный в теге v-content, расположенном в папке src/components/. Мы можем переименовать файл в Tracker.vue и обновить импорт файла в App.vue.

Создание базового макета

Перейдем к созданию базовых макетов для отображения криптовалют. Ниже представлен шаблон списка данных, который я получил из документации Vuetify. Его можно заменить на секцию v-layout в файле Tracker.vue.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Вывод:

Подключение к Cryptocurrency API

Базовый макет готов, перейдем к получению данных от Cryptocurrency API. Для этого понадобится установить через npm библиотеку HTTP-клиента под названием Axios:

После установки библиотеку можно использовать в файле App.vue

Внутри export default у нас есть атрибут data, возвращающий объект, в котором хранятся данные, похожие на состояние приложения. В плагине Vuetify уже есть данные, нам лишь нужно добавить новый атрибут cryptocurrencies (он будет хранить данные ответа от API, а в атрибуте errors будут храниться ошибки от API).

Пора делать запрос в API. Необходимо вызвать хук created (), который выполняется во время настройки Vue событий и обзора данных. Именно здесь мы и сделаем запрос к API. Более подробно в Vue Lifecycle Method

Мы получили данные о криптовалютах. Теперь давайте отобразим их в макете. Сперва массив криптовалют необходимо передать в виде свойства в компонент Tracker

Данные о криптовалютах теперь доступны в компоненте Tracker. Давайте получим переданные свойства. Добавьте тег script с кодом ниже в файл Tracker.vue:

У нас есть атрибут image с url на изображения всех криптовалют. Необходимо изменить макет под данные криптовалют. С помощью Vue директивы v-for пробежимся в цикле по массиву объектов:

Заключение

Да, вот и все! Конечный вывод трекера криптовалют должен быть таким:

Автор: Solomon Kingsley

Источник: https://medium.com/

Редакция: Команда webformyself.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

VUE JS. Быстрый старт

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

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree