От автора: криптовалюты становятся все популярнее, поэтому их ценность может сильно меняться. Если вам повезло, и вы купили пару монет всего за несколько долларов пару лет назад, то сейчас ваши монеты могут стоить тысячи долларов. Как разработчик, вы можете интересоваться созданием приложений в области криптовалют. К счастью, у вас есть доступ к данным о текущих криптовалютах через бесплатный API от CryptoCompare – в нем есть все, что нужно.
В этом уроке мы разберем, как создать трекер криптовалют, с помощью которого можно отслеживать 5 популярных криптовалют в долларах и евро. Будем использовать Vue.js. Об этом фреймворке очень хорошо отзываются в сети, поскольку, по-видимому, он быстрее React с его реализацией Snabbdom, простой и мощный Virtual DOM, сосредоточенный на производительности. Также эта библиотека намного меньше React и весит около 14Кб.
Приступим. Будем использовать Vuetify, в котором есть все необходимые инструменты для создания потрясающих интерфейсов, дающих силу Vue и Material Design.
Использование Vue-cli
Во-первых, необходимо установить Vue-cli. Установите Node.js и npm, после чего можно перейти к глобальной установке Vue CLI на локальную систему:
|
1 |
$ npm install -g vue-cli |
После установки Vue-cli станет доступна команда vue. Теперь мы можем начать проект с помощью следующей команды:
|
1 |
$ vue init vuetifyjs/webpack cryptocurrency_tracker |
Мы говорим Vue создать новый проект и использовать шаблон vuetifyjs/webpack, указав имя cryptocurrency_tracker. Во время выполнения команды на экране появится несколько вопросов, как на скриншоте ниже:
Проект сгенерировался в папку cryptocurrency_tracker. Сменим директорию, чтобы установить зависимости через npm
|
1 2 |
$ cd cryptocurrency_tracker $ npm install |
После установки всех зависимостей необходимо запустить сервер с помощью npm
|
1 |
$ npm run dev |
Сервер запустится на порте 8080, в браузере автоматически откроется приложение. На скриншоте ниже видно, что открыт проект Vue.js с пользовательской темой Vuetify.
Структура файлов и папок
Откройте папку проекта. Там вы найдете файл main.js – это точка входа в приложение. Пример:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
import Vue from 'vue' import App from './App' import Vuetify from 'vuetify' import 'vuetify/dist/vuetify.min.css' Vue.use(Vuetify, { theme: { primary: '#ee44aa', secondary: '#424242', accent: '#82B1FF', error: '#FF5252', info: '#2196F3', success: '#4CAF50', warning: '#FFC107' }}) Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', components: { App }, template: '<App/>' }) |
Как видно, 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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
.... <script> import Tracker from './components/tracker' export default { data () { return { clipped: false, drawer: true, fixed: false, items: [{ icon: 'bubble_chart', title: 'Inspire' }], miniVariant: false, right: true, rightDrawer: false, title: 'Cryptocurrency Tracker' } }, name: 'App', components: { Tracker } } </script> .... |
Создание базового макета
Перейдем к созданию базовых макетов для отображения криптовалют. Ниже представлен шаблон списка данных, который я получил из документации Vuetify. Его можно заменить на секцию v-layout в файле Tracker.vue.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<v-layout row> <v-flex xs12 sm10 offset-sm1> <v-card> <v-toolbar color="blue" dark> <v-toolbar-title>Tracker</v-toolbar-title> <v-spacer></v-spacer> <v-text> USD | EURO </v-text> </v-toolbar> <v-list> <v-list-tile avatar @click=""> <v-list-tile-avatar> <img src="'currency_img'"> </v-list-tile-avatar> <v-list-tile-content> <v-list-tile-title v-text="'Currency Name'"> </v-list-tile-title> </v-list-tile-content> <v-list-tile-action> <span>Currency Price</span> </v-list-tile-action> </v-list-tile> </v-list> </v-card> </v-flex> </v-layout> |
Вывод:
Подключение к Cryptocurrency API
Базовый макет готов, перейдем к получению данных от Cryptocurrency API. Для этого понадобится установить через npm библиотеку HTTP-клиента под названием Axios:
|
1 |
$ npm install axios --save |
После установки библиотеку можно использовать в файле App.vue
|
1 2 3 4 5 6 7 8 9 |
... ... ... <script> import axios from 'axios'; ... ... </script> ... |
Внутри export default у нас есть атрибут data, возвращающий объект, в котором хранятся данные, похожие на состояние приложения. В плагине Vuetify уже есть данные, нам лишь нужно добавить новый атрибут cryptocurrencies (он будет хранить данные ответа от API, а в атрибуте errors будут храниться ошибки от API).
|
1 2 3 4 5 6 7 8 9 10 11 12 |
export default { data () { return { cryptocurrencies: [], errors: [], ... ... } }, ... ... } |
Пора делать запрос в API. Необходимо вызвать хук created (), который выполняется во время настройки Vue событий и обзора данных. Именно здесь мы и сделаем запрос к API. Более подробно в Vue Lifecycle Method
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
export default { data () { return { cryptocurrencies: [], errors: [], ... ... } }, created () { axios.get('//min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH,IOT,LTC,XMR&tsyms=USD,EUR') .then(response => { this.cryptocurrencies = response.data; }).catch(error => this.errors.push(error)); } ... ... } |
Мы получили данные о криптовалютах. Теперь давайте отобразим их в макете. Сперва массив криптовалют необходимо передать в виде свойства в компонент Tracker
|
1 2 3 |
... <Tracker v-bind:cryptocurrencies="cryptocurrencies" /> ... |
Данные о криптовалютах теперь доступны в компоненте Tracker. Давайте получим переданные свойства. Добавьте тег script с кодом ниже в файл Tracker.vue:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<script> export default { props: ['cryptocurrencies'], data () { return { images: { BTC: '//www.cryptocompare.com/media/19633/btc.png', IOT: '//www.cryptocompare.com/media/1383540/iota_logo.png', ETH: '//www.cryptocompare.com/media/20646/eth_logo.png', XMR: '//www.cryptocompare.com/media/19969/xmr.png', LTC: '//www.cryptocompare.com/media/19782/litecoin-logo.png' } } } } </script> |
У нас есть атрибут image с url на изображения всех криптовалют. Необходимо изменить макет под данные криптовалют. С помощью Vue директивы v-for пробежимся в цикле по массиву объектов:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<v-layout row> <v-flex xs12 sm10 offset-sm1> <v-card> <v-toolbar flat color="blue" dark> <v-toolbar-title>Tracker</v-toolbar-title> <v-spacer></v-spacer> <v-text> USD | EURO </v-text> </v-toolbar> <v-list> <v-list-tile style="width: 100%" avatar v-for="(price, currency) in cryptocurrencies" :key="currency" @click=""> <v-list-tile-avatar> <img :src="images[price]"> </v-list-tile-avatar> <v-list-tile-content> <v-list-tile-title v-text="currency"></v-list-tile-title> </v-list-tile-content> <v-list-tile-action> <span>${{price.USD}} | €{{price.EUR}}</span> </v-list-tile-action> </v-list-tile> </v-list> </v-card> </v-flex> </v-layout> |
Заключение
Да, вот и все! Конечный вывод трекера криптовалют должен быть таким:
Автор: Solomon Kingsley
Источник: //medium.com/
Редакция: Команда webformyself.
