Создание трекера криптовалют с помощью 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 на локальную систему:

$ npm install -g vue-cli

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

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

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

Узнать подробнее
$ 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.

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

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

Узнать подробнее
....
<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.

Фреймворк 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> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree