С развитием мира криптовалюты как одного из самых быстрорастущих рынков с момента появления Интернета для разработчиков открылась новая дверь с новыми возможностями для создания приложений.
И хотя объем торговли криптовалютами во всем мире будет продолжать расти, они будут пользоваться огромным спросом на приложения для обмена криптовалютами.
Вот почему в этом руководстве… мы собираемся создать приложение для работы с криптовалютой с помощью одной из самых быстрорастущих и производительных фреймворков JavaScript Vue.js. А для части удаленных данных мы собираемся использовать CryptoCompare API, который на 100% бесплатный.
Мы сможем получить информацию о текущих ценах на криптовалюты среди других данных, таких как (рыночная капитализация, объем и оборотное предложение). Кроме того, мы собираемся использовать API, чтобы снабжать нас последними новостными статьями от всех основных поставщиков криптографических новостей, с которыми интегрирована CryptoCompare.
Примечание. Для этого приложения не потребуется процесс регистрации или какой-либо ключ API.
Но прежде чем мы углубимся, давайте кратко рассмотрим инструменты и ресурсы, которые мы собираемся использовать в этом руководстве. Во-первых, давайте начнем с фреймворка JavaScript.
Что такое Vue.js?
Vue.js - это прогрессивный JavaScript-фреймворк с открытым исходным кодом, используемый для разработки интерактивных веб-интерфейсов и одностраничных приложений. Очень популярный и легко интегрируется с белыми проектами в качестве front-end разработки.
Возможности Vue.js
Фреймворк Vue.js имеет множество функций, которые делают его лучшей альтернативой другим фреймворкам, таким как AngularJS или ReactJS. Но мы собираемся обрисовать только основные элементы и те, с которыми мы столкнемся во время этого урока.
Гибкость
Vue.js предлагает официальную поддержку множества систем сборки без каких-либо ограничений на то, как вы должны структурировать свое приложение. И многие разработчики пользуются этой свободой.
Сложность
С точки зрения дизайна и API Vue намного проще, чем AngularJS. Это означает, что любой веб-разработчик может легко создать простое приложение за день, чего нельзя сказать о Angular.js.
Производительность во время выполнения
Поскольку скорость является решающим фактором, когда дело доходит до фреймворков JavaScript, Vue работает очень быстро. Он имеет четкую систему отслеживания зависимостей с синхронизированной очередью, что гарантирует индивидуальный запуск изменений. И это не относится к AngularJS.
Директивы Vue
Vue поставляется с набором встроенных директив, таких как v-if, v-else, v-for и v-model, которые используются для выполнения различных действий во внешнем интерфейсе.
Связывание данных
Эта функция Vue помогает вам назначать значения, изменять классы CSS и управлять атрибутами HTML с помощью директивы привязки, называемой v-bind, встроенной в структуру.
Шаблон Vue
Vue предоставляет нам шаблоны на основе HTML, которые связывают DOM с данными экземпляра Vue.
Маршрутизация
Vue позволяет нам легко перемещаться между страницами (компонентами), используя свою библиотеку маршрутизации vue-router.
Сравнение Vue.js с другими фреймворками
Если вы попросите меня сравнить этот фреймворк с Angular и ReactJS, Vue - лучшее из обоих миров… почему? От React он получил свойства, односторонний поток данных для иерархии компонентов, возможность виртуального рендеринга, производительность и правильное управление состоянием приложений.
А от Angular он получил аналогичные шаблоны с хорошо подходящим синтаксисом и функцию привязки двух данных, которую вы можете использовать внутри одного компонента, когда вам нужно.
Кстати, организация Vue выделила целую страницу, на которой сравнивается их фреймворк с другими, такими как AngularJs и ReactJs, что определенно поможет вам выяснить, какой фреймворк использовать. если бы у вас был выбор, чтобы выбрать один из трех.
Что такое служба API CryptoCompare?
CryptoCompare - глобальный поставщик данных рынка криптовалют, основанный в 2014 году. Он обеспечивает доступ к данным в режиме реального времени с высококачественными и надежными рыночными и ценовыми данными по 5300+ монетам и 240 000+ валютным парам для институциональных и розничных инвесторов.
Он содержит огромное количество данных, которые мы можем использовать (цена, исторические данные, новости и потоковая передача…), как показано на изображении ниже, но мы будем беспокоиться только о цене и разделе новостей.
Как мы собираемся разработать наше приложение?
Чтобы ускорить создание пользовательского интерфейса для этого приложения, мы собираемся использовать адаптивный CSS-фреймворк под названием Bulma. И это один из моих любимых фреймворков CSS.
Bulma - это гибкий, легкий и стильный CSS-фреймворк с открытым исходным кодом, созданный Джереми Томасом. Он прост в изучении и использовании, имеет удобочитаемые классы, что может быть огромным преимуществом для некоторых разработчиков.
С точки зрения введения, это все, что нам нужно. Пришло время взглянуть на приложение в следующем разделе, а затем мы собираемся приступить к его созданию, шаг за шагом.
Обзор проекта
На домашней странице этого приложения вы сможете просмотреть текущую торговую информацию (цена, объем, открытая, рыночная капитализация, оборотные предложения и т. Д.) Для списка из пяти криптовалют в любой другой валюте, которая вам нужна. Конечно, вы можете добавить другой символ монеты, если хотите. Тогда это будет еще одна страница для отображения последних новостных статей с возможностью прочитать всю историю любой интересующей вас статьи.
А это видео на YouTube, демонстрирующее базовую функциональность проекта:
Это требовательное приложение, не правда ли? Я почти чувствую ваше нетерпение, так что приступим.
Полный исходный код этого руководства доступен на GitHub.
Предварительно требования
Чтобы следовать этому руководству, вам понадобится машина для разработки со следующими требованиями.
· Nodejs и npm (нам нужен менеджер пакетов npm для установки Vue-CLI)
· Vue-CLI (для генерации свежих проектов Vue)
· Базовое понимание Vue.js.
Как только все настроено, мы можем продолжить.
Настройка проекта Vue.js
В этом разделе мы будем использовать Vue CLI для создания нового проекта Vue. Но прежде чем мы это сделаем, нам нужно глобально установить функциональность vue init, чтобы сформировать проект с шаблоном Vue webpack, который является инструментом сборки для обработки ресурсов.
Итак, откройте командную строку и выполните следующее:
npminstall-g @vue/cli-init
Теперь давайте воспользуемся Vue CLI, чтобы начать новый проект:
vue init webpack vue-crypto-app
В процессе создания вам будет представлен ряд запросов (вопросов). Ответьте на вопрос, отображаемый на экране, вот так. И не забудьте установить «да» для установки vue-router.
Примечание. Vue CLI автоматически установит все зависимости после создания проекта. Если это не так, попробуйте ввести в консоли следующую команду «cd vue-crypto-app && npm install».
Вы можете запустить сервер разработки, перейдя в корневую папку проекта и выполнив следующие команды:
cd vue-crypto-app npm run dev
Приложение откроется на http: // localhost: 8080 в вашем браузере по умолчанию. И вы должны увидеть следующий стартовый шаблон:
Определение основного шаблона Vue
Чтобы приложение выглядело красиво, мы будем использовать CSS Framework Bulma для стилизации нашего приложения вместе с Font Awesome 5, который предоставит нам значки для использования.
Это три способа начать работу с Bulma, но для этого урока мы будем использовать CSS Framework только из CDN. И место для этого находится в файле index.html, поскольку он представляет собой точку входа во внешний интерфейс этого приложения, и его влияние будет на все компоненты.
Использование CDN для связывания таблицы стилей Bulma
Теперь откройте файл index.html и обновите его следующим кодом:
Теперь, когда основной шаблон Vue настроен, пора приступить к созданию компонентов.
Vue.js - это компонентный фреймворк, поэтому нам нужно сначала разделить приложение на отдельные компоненты (два компонента в нашем случае), один для отображения текущей цены и другой торговой информации о наших монетах, а второй будет держать нас в курсе с помощью последние новости мира криптовалют. Итак, начнем с первого.
Сборка домашнего компонента
Перед добавлением домашнего компонента нам нужно удалить любой файл внутри папки src / components (удалить файл Hello.vue), чем добавить компонент Home.vue.
Установка клиентской библиотеки HTTP
Наше приложение должно быть подключено к службе API криптовалюты, поэтому для этого нам нужна клиентская библиотека HTTP под названием Axios.
В командной строке выполните:
npm install axios --save
В отличие от Angular, который оснащен клиентской библиотекой HTTP, в Vue.js и ReactJs вам необходимо установить Axios библиотека, чтобы вы могли выполнять вызовы API.
Теперь откройте src / components / Home.vue и добавьте к нему следующий шаблон:
Внутри тега ‹template› есть разметка HTML. В этой разметке у нас есть директива v-for в форме «(значение, ключ, индекс) в монетах». Но почему мы не использовали форму «монета в монетах».
Поскольку исходные данные в этом случае монеты, являются объектом, а не массивом. Вот почему мы должны использовать эту форму для перебора свойств объекта монет.
Итак, в этом случае:
• key: будет представлять названия монет.
• value: представлять данные каждой монеты.
• Индекс: для отображения текущего положения монеты.
Затем в том же файле под тегом ‹template› добавьте следующий код:
Сначала мы импортировали пакет axios, чтобы связать приложение с CryptoCompare API и получить полные значения данных монет.
Затем в экспорте по умолчанию у нас есть атрибут данных, который содержит два свойства:
• монеты: свойство массива, которое содержит все данные нашего списка монет.
• errors: свойство массива для хранения сообщений об ошибках, если что-то пойдет не так.
Затем мы добавили в Vue уже встроенную функцию под названием created (), которая запускается при первой загрузке компонента. И это идеальное место для размещения запроса axios get службе API.
Внутри функции created () у нас есть axios. get, который принимает конечную точку API в качестве первого аргумента.
В этом компоненте мы собираемся отобразить цену, рыночную капитализацию, объем, открытие за последние 24 часа и оборотное предложение для пяти различных валют, перечисленных ниже:
1.Bitcoin (BTC).
2. Ethereum (ETH).
3. Dash (DASH).
4. Dogecoin (DOGE).
5. Theter (USDT) .
Вы можете изменить указанные выше параметры URL, чтобы включить в них другой символ монет, если хотите. Но если вы не знаете, где взять правильный символ монет, перейдите на сайт CryptoCompare и выберите какой-нибудь символ из тех, которые обведены красным цветом, как показано на изображении ниже.
Затем после axios.get мы использовали другой метод под названием then, чтобы установить значение this.coins в response.data. ДИСПЛЕЙ. Response.data вернет два массива JSON: RAW и DISPLAY. Оба они возвращают одни и те же значения, но с той лишь разницей, что возвращаемые значения DISPLAY вместе с их валютами поют, как доллар ($) и миллиард (B ), что поможет нам лучше понять эти числа.
Чтобы все находило отклик у вас, возьмите указанный выше параметр URL и вставьте его в свой браузер, чтобы проанализировать возвращаемые данные и увидеть разницу между объектами DISPLAY и RAW, которые мы только что упомянули. Или вы можете посетить документацию CryptoCompare API, чтобы узнать обо всех потенциальных конечных точках, которые вы можете назначить, включая цену, список монет, исторические данные, потоковую передачу, новости и т. Д.
Теперь, когда мы завершили компонент Home, давайте сразу перейдем к созданию компонента News, а затем ваше приложение будет готово потрясти ваш мир.
Создание компонента новостей
То, что цены на монеты растут и падают без логического объяснения или каких-либо связанных событий, объясняющих эти изменения, не имеет смысла, поэтому нам нужно создать еще один компонент, который поможет нам выйти за рамки этих цифр и достичь полной картины ... компонент новостей.
Его основная функция - это возвращать новостные статьи от поставщиков, с которыми интегрирован CryptoCompare API, и отображать их в приложении.
В редакторе кода перейдите к src / components и создайте новый файл с именем News.vue, затем добавьте следующий шаблон вверху:
В теге ‹template› у нас просто есть некоторый html-код, но я хочу, чтобы вы сосредоточили внимание на директиве v-for, которая будет отвечать за рендеринг. список элементов (новостная статья) в массиве источников новостей.
Директива v-for требует специального синтаксиса в форме «элемент в элементах». В этом случае «элемент в новостях», где новость - это массив исходных данных, а элемент - это псевдоним для элемента массива, по которому выполняется итерация.
Единственное отличие этой директивы v-for от директивы, упомянутой в компоненте Home, состоит в том, что эта директива выполняет итерацию по массиву, а другая - по итерации по объекту.
Затем под тегом ‹template› добавим тег ‹script› следующим образом:
Он почти такой же, как тег ‹script› компонента Home, но давайте смело опишем то, что мы здесь сделали.
Как всегда, чтобы иметь возможность выполнять вызовы API, нам необходимо импортировать клиентскую библиотеку axios, как показано в первой строке кода.
Затем в атрибуте data у нас есть два свойства, определенные как массив: news для хранения статей, возвращенных из API, а второе - errors… для хранения любых неожиданных ошибки, которые могут возникнуть во время HTTP-запроса.
Затем мы использовали метод запроса axios.get с переданным параметром URL, чтобы получить последние новостные статьи из CryptoCompare API.
Наконец, мы использовали метод then, чтобы установить this.news на response.data.Data и отобразить полный объект данных в браузере. консоль с помощью функции log.
Еще одна вещь, чтобы завершить этот компонент, - это добавить к нему тег ‹style›. Сразу под тегом ‹script› добавьте следующий код CSS:
Этот CSS-код выше будет утверждать, что у нас есть интерактивные заголовки, когда пользователь наводит на них курсор. А добавляя атрибут «scoped» к тегу ‹style›, мы ограничиваем CSS только для этого компонента.
Теперь, когда мы завершили работу над двумя компонентами этого приложения, давайте найдем способ перемещаться между ними.
Добавление навигации с помощью Vue Router
Плагин vue-router должен быть уже установлен в вашем проекте. Если он не установлен, выполните следующую команду из корневой папки вашего проекта:
npm install --save vue-router
Теперь перейдите к файлу src / main.js и убедитесь, что операторы импорта имеют следующий вид:
Если ваш файл похож на тот, что указан выше, значит, плагин vue-router уже был настроен с помощью webpack с помощью интерфейса командной строки Vue.
Теперь давайте объясним приведенный выше фрагмент кода.
Первая строка импортирует файл Vue. Вторая строка вводит компонент под названием App, который служит корневым компонентом для приложения. Третий - это импорт маршрутизатора, который мы объясним в следующем файле (src / router / index.js). Четвертая строка сообщает Vue, следует ли отображать предупреждающие сообщения в консоли разработчика вашего браузера.
В заключительном блоке кода создается новый экземпляр Vue, который будет смонтирован в #div в нашем html-коде ... затем он создал экземпляр компонента App вместе с внедрением маршрутизатора. конфигурация.
Теперь в файле src / router / index.js обновите свой код следующим образом:
Первые две строки импортируют vue и vue-router. Третья и четвертая строки импортируют компоненты Главная и Новости.
Затем мы говорим Vue использовать его плагин vue-router.
Наконец, маршрутизатор настроен на два маршрута. Маршрутизатор использует компоненты Vue в качестве страниц.
Итак, в приведенном выше файле мы хотим отображать компонент Home всякий раз, когда мы переходим к маршруту /, и отображать компонент News всякий раз, когда мы переходим к маршруту / news.
А теперь еще один шаг вперед, и мы будем готовы к работе. В файле src / App.vue обновите его содержимое с помощью следующего кода:
В теге ‹template› у нас есть всего лишь простая разметка HTML, но это две важные части, которые необходимо рассмотреть. ‹router-link›, которые создают HTML-ссылки на маршруты, которые мы создали ранее. Затем мы получили тег ‹router-view›. Маршрутизатор использует этот тег как контейнер для визуализации различных компонентов, принадлежащих разным маршрутам.
Тег ‹script› не содержит ничего, кроме компонента Vue под названием App, который ничего не делает.
Тег ‹style› просто содержит несколько хороших правил CSS, добавленных вручную для центрирования наших компонентов по горизонтали.
Тестирование приложения
Это тот раздел, которого вы так долго ждали. Момент обслужить приложение и убедиться, что все работает. В командной строке в корневой папке проекта запустите:
npm run dev
Это снова запустит приложение в браузере, и вы должны увидеть следующий результат:
И как только вы нажмете кнопку Новости, приложение покажет следующее:
Довольно круто, не правда ли. Поздравляем!
Вывод
В этом руководстве мы использовали Vue.js Framework и CryptoCompare API для создания приложения для криптовалюты для отображения новостных статей о ценах на монеты, связанных с миром цифровых валют, и для дизайна мы внедрили CSS Framework под названием Bulma, чтобы наше приложение выглядело красиво.
Я надеюсь, что это руководство было полезным, и вам понравилось создавать это приложение, и вы не были перегружены.
Помните, что вы можете обновить это приложение, изучив службу CryptoCompare API, и реализовать дополнительные функции, интегрированные с API.
Если у вас есть какие-либо вопросы или что-то об этом приложении, не стесняйтесь оставлять свои комментарии и отзывы ниже.
Полный исходный код этого руководства доступен на GitHub.
Всего наилучшего!
