От автора: криптовалюты становятся все популярнее, поэтому их ценность может сильно меняться. Если вам повезло, и вы купили пару монет всего за несколько долларов пару лет назад, то сейчас ваши монеты могут стоить тысячи долларов. Как разработчик, вы можете интересоваться созданием приложений в области криптовалют. К счастью, у вас есть доступ к данным о текущих криптовалютах через бесплатный API от CryptoCompare – в нем есть все, что нужно.
В этом уроке мы разберем, как создать трекер криптовалют, с помощью которого можно отслеживать 5 популярных криптовалют в долларах и евро. Будем использовать Vue.js. Об этом фреймворке очень хорошо отзываются в сети, поскольку, по-видимому, он быстрее React с его реализацией Snabbdom, простой и мощный Virtual DOM, сосредоточенный на производительности. Также эта библиотека намного меньше React и весит около 14Кб.
Приступим. Будем использовать Vuetify, в котором есть все необходимые инструменты для создания потрясающих интерфейсов, дающих силу Vue и Material Design.
Использование Vue-cli
Во-первых, необходимо установить Vue-cli. Установите Node.js и npm, после чего можно перейти к глобальной установке Vue CLI на локальную систему:
$ npm install -g vue-cli
После установки Vue-cli станет доступна команда vue. Теперь мы можем начать проект с помощью следующей команды:
$ vue init vuetifyjs/webpack cryptocurrency_tracker
Мы говорим Vue создать новый проект и использовать шаблон vuetifyjs/webpack, указав имя cryptocurrency_tracker. Во время выполнения команды на экране появится несколько вопросов, как на скриншоте ниже:
Проект сгенерировался в папку cryptocurrency_tracker. Сменим директорию, чтобы установить зависимости через npm
$ cd cryptocurrency_tracker $ npm install
После установки всех зависимостей необходимо запустить сервер с помощью npm
$ npm run dev
Сервер запустится на порте 8080, в браузере автоматически откроется приложение. На скриншоте ниже видно, что открыт проект Vue.js с пользовательской темой Vuetify.
Структура файлов и папок
Откройте папку проекта. Там вы найдете файл main.js – это точка входа в приложение. Пример:
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.
....
<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.
<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:
$ npm install axios --save
После установки библиотеку можно использовать в файле App.vue
... ... ... <script> import axios from 'axios'; ... ... </script> ...
Внутри export default у нас есть атрибут data, возвращающий объект, в котором хранятся данные, похожие на состояние приложения. В плагине Vuetify уже есть данные, нам лишь нужно добавить новый атрибут cryptocurrencies (он будет хранить данные ответа от API, а в атрибуте errors будут храниться ошибки от API).
export default { data () { return { cryptocurrencies: [], errors: [], ... ... } },
...
...
}
Пора делать запрос в API. Необходимо вызвать хук created (), который выполняется во время настройки Vue событий и обзора данных. Именно здесь мы и сделаем запрос к API. Более подробно в Vue Lifecycle Method
export default { data () { return { cryptocurrencies: [], errors: [], ... ... } }, created () { axios.get('https://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
... <Tracker v-bind:cryptocurrencies="cryptocurrencies" /> ...
Данные о криптовалютах теперь доступны в компоненте Tracker. Давайте получим переданные свойства. Добавьте тег script с кодом ниже в файл Tracker.vue:
<script> export default { props: ['cryptocurrencies'], data () { return { images: { BTC: 'https://www.cryptocompare.com/media/19633/btc.png', IOT: 'https://www.cryptocompare.com/media/1383540/iota_logo.png', ETH: 'https://www.cryptocompare.com/media/20646/eth_logo.png', XMR: 'https://www.cryptocompare.com/media/19969/xmr.png', LTC: 'https://www.cryptocompare.com/media/19782/litecoin-logo.png' } } } }
</script>
У нас есть атрибут image с url на изображения всех криптовалют. Необходимо изменить макет под данные криптовалют. С помощью Vue директивы v-for пробежимся в цикле по массиву объектов:
<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
Источник: https://medium.com/
Редакция: Команда webformyself.