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

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

От автора: сегодня поговорим о том, как создать с помощью Vue PWA. PWA (прогрессивные веб-приложения) уже были определены как будущее веб-приложений, и причина совершенно очевидна. PWA позволяют создавать веб-приложения, способные предоставлять пользователям опыт, не отличимый от нативных приложений.

От отправки push-уведомлений, кэширование данных для автономного извлечения, синхронизации фона. Прогрессивные веб-приложения полностью вас прикроют. PWA также могут гарантировать, что пользователи будут вовлечены и будут получать свежие данные динамические данные даже при очень плохих сетевых подключениях.

«Прогрессивное веб-приложение (PWA) — это термин, используемый для обозначения веб-приложений, использующих новейшие веб-технологии. Прогрессивные веб-приложения, также известные как «Устанавливаемые веб-приложения» или «Гибридные веб-приложения», являются обычными веб-страницами или веб-сайтами, но могут отображаться как обычные приложения или собственные мобильные приложения. Тип приложения пытается объединить функции, предлагаемые большинством современных браузеров, с преимуществами мобильного использования. — Википедия»

В этой статье показано, как создать простое PWA реального времени с Vue.js и Pusher. Vue.js — это прогрессивная веб-платформа для JavaScript, она проста в использовании и требует относительно небольшого кода для создания потрясающих результатов.

Для части реального времени этого приложения мы будем подключать библиотеку JavaScript Pusher. Pusher — это механизм реального времени, который позволяет легко добавлять функциональные возможности в реальном времени в приложения.

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

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

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

Что мы хотим создать

В этой статье мы будем создавать криптовалютное приложение под названием «KryptoWatcher». Его функция заключается в отображении обновлений цен трех криптовалют (Bitcoin, Ethereum и Litecoin) в реальном времени. Обновления цен будут получены из API Cryptocompare.

KryptoWatcher также сможет заглянуть на пять дней в прошлое и получить данные за те дни. Вот визуальное отображение того, как будет выглядеть окончательное приложение:

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

Большая часть всего этого заключается в том, что после того, как это приложение запускается один раз, оно может снова запускаться и отображать данные монет даже без подключения к Интернету. Это возможно, потому что мы построим KryptoWatcher для кэширования данных монет при первом запуске.

Давайте начнем собирать кусочки.

Требования

Чтобы следовать этому руководству, вам нужно будет иметь следующее:

Знать Vue.js.

Vue CLI, установленный на вашем компьютере.

Node и NPM установлены на вашем компьютере.

Знание инфраструктуры Node.js и Express.

Знание JavaScript.

Pusher Application. Создайте его здесь.

Как только у вас появятся требования, мы можем перейти к настройке нашего приложения.

Настройка Pusher Application

Создайте учетную запись Pusher, если вы еще этого не сделали, а затем настройте приложение, как показано на скриншоте ниже.

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

Когда закончите настройку, обратите внимание на свои ключи приложения Pusher. Позже они нам понадобятся.

Настройка нашего приложения PWA Vue.js

Вы можете думать, что инструмент Vue CLI – это облегченный инструмент для создания проектов Vue.js. Чтобы начать строить наше приложение, мы будем использовать инструмент Vue CLI, чтобы вытащить шаблон Vue PWA, с которым мы будем работать.

Чтобы создать наше приложение, выполните следующую команду на своем терминале:

Вам будут предложены подсказки и несколько вопросов «Да» или «Нет». Тем не менее, вы можете отвечать на все, как вам удобно, для подсказок «Y» или «N», так как мы не требуем дополнительных функций и функциональности, давайте ответим «N» на все запросы.

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

Шаблон дает нам потрясающие возможности PWA по умолчанию. Одной из таких функций является service worker. Service worker позволяет нашему приложению работать в автономном режиме.

Service worker — это скрипт, который ваш браузер запускает в фоновом режиме, отдельно от веб-страницы, открывая дверь для функций, которым не нужна веб-страница или взаимодействие с пользователем.

Чтобы установить зависимости, перейдите в окно терминала и выполните следующую команду:

Если вы посмотрите на свою директорию проекта, вы обнаружите, что она содержит несколько подпапок: build, config, src, static, test. Давайте откроем файл build/webpack.prod.conf.js и быстро заглянем в объект SWPrecacheWebpackPlugin:

Это означает, что при создании приложения создается новый service worker (с командой npm run build).

Service worker будет кэшировать все файлы, соответствующие выражению glob, для автономного доступа, в staticFileGlobs который в настоящее время указывает на несуществующую папку dist. Каталог dist будет создан при создании нашего приложения.

Давайте начнем строить наше приложение по компонентам.

Компоненты Vue.js

Подобно другим современным JavaScript-библиотекам и фреймворкам, таким как React, Vue позволяет нам создавать компоненты при создании приложений. Компоненты помогают нам сохранять модульное приложение и гарантировать, что приложения могут быть разделены на модули многократного использования.

Давайте построим KryptoWatcher, создав три компонента многократного использования:

Компонент Intro который будет содержать вводную разметку и стили для приложения.

Current компонент, который будет отображать цены монет в реальном времени.

Previous компонент, который будет отображать цены монет от «x дней назад».

Давайте начнем создавать компоненты. Мы будем делать их вручную, однако вы всегда можете использовать пакет NPM, как здесь, чтобы упростить создание компонентов. Создайте каталог src/components и создайте следующие файлы в каталоге: Intro.vue , Current.vue и Previous.vue.

Компонент intro

Этот компонент не имеет особых функций, поскольку он просто содержит встроенную разметку и стили, которые сделают приложение презентабельным. HTML идет между тегами template, а стили идут в теге styles.

В файле Intro.vue вставьте следующее:

С компонентом intro закончили.

Компонент current

В компоненте Current.vue мы напишем некоторый HTML, который отображает цены в реальном времени по мере их обновления. Откройте файл и вставьте следующее внутри файла:

Ниже тегов template у нас будет тег script. Это будет то, где мы будем обрабатывать скрипты компонента. Ниже тега template в том же файле вставьте следующий код:

Скрипт выше указывает props, которые должен ожидать компонент Current. Он будет получать его, currentCurrency, из родительского компонента App.vue.

Наконец, под тегом script, давайте укажем style для компонента. Вставьте следующий код после тега script:

С компонентом Current закончили.

Компонент Previous

Этот компонент должен показывать цены на монеты в прошлом, максимум пять дней. Мы также покажем даты каждого из дней. В файле Previous.vue вставьте следующий код:

В разделе script мы будем получать объект previousCurrency из родительского компонента App.vue. В том же файле вставьте следующий код после тега template:

Наконец, немного декоративных стилей:

Это почти все, что у нас есть с тремя компонентами, они довольно просты. Большая часть сложности и логики приложений App.vue в корневом компоненте App.vue. Давайте исследуем его дальше.

Настройка корневого компонента

Корневой компонент включен по умолчанию в каждой новой установке Vue в файле src/App.vue, поэтому нам не нужно его создавать. В отличие от других компонентов, которые мы создали ранее, корневой компонент содержит логику и сложнее, чем они.

Мы сохраним тег template корневого компонента простым. Мы включаем более ранние компоненты, Intro.vue , Current.vue и Previous.vue, в качестве пользовательских тегов и передаем соответствующие props. В файле App.vue замените содержимое следующим:

Затем добавим script и добавим логику в script . Вставьте следующее ниже тега template:

Сценарий выше не делает многого, но он создает основу для нашей логики. Мы установили все значения по умолчанию для data, которые будем использовать в приложении, и мы определили created метод, который вызывается автоматически во время жизненного цикла компонента Vue. Мы также импортировали компоненты, которые будем использовать в приложении.

Прежде чем мы начнем добавлять скриптовую логику, добавим стили для корневого компонента. Ниже тега script вставьте следующий код:

Добавление методов в наш корневой компонент

Нам нужно заполнить объект method с помощью реальных методов. Начнем с определения методов, которые будут получать цены на монеты за предыдущие дни.

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

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

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

Подтягивание зависимостей

Поскольку мы получаем данные из удаленного API, нам нужен HTTP-клиент, чтобы вытащить данные для нас. В этой статье мы будем использовать ориентированные на promise HTTP-клиент axios для отправки HTTP-запросов. Нам также нужен moment чтобы легко работать с датами.

Чтобы добавить Axios и Moment.js в наш проект, выполните следующую команду в своем терминале:

vue-axios и vue-momentjs — обертки Vue вокруг пакетов Axios и Moment.js.

Когда установка будет завершена, мы будем глобально импортировать пакеты в наше приложение. Откройте файл src/main.js и замените:

на:

Построение логики методов

Затем мы хотим вернуться к нашему корневому компоненту и построить объект methods. В объекте methods давайте создадим первый метод. Вставьте следующий код внутри объекта methods в файл App.vue:

Вышеуказанный метод является вспомогательным методом для сбора обменного курса монеты в течение определенного периода времени и сохранения ответа в localStorage и this.previousCurrency. Мы будем использовать это позже в коде.

Затем вставьте следующую функцию внутри объекта methods рядом с тем, который мы добавили выше:

Вышеуказанный метод просто извлекает данные монеты за текущую дату и сохраняет ответ на localStorage и объект this.currentCurrency. Далее, внутри метода created() корневого компонента вставьте следующий код:

В приведенном выше коде мы определили код для извлечения текущей валюты из localStorage если клиент находится в автономном режиме. Если клиент находится в сети, он извлекает данные из API.

Теперь все должно работать, кроме функциональности в реальном времени.

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

Интеграция функций реального времени с помощью Pusher

Теперь, когда у нас есть функциональное приложение, мы хотели бы добавить некоторые функции реального времени, чтобы мы видели обновления по мере их возникновения.

Мы будем использовать Pusher для предоставления этой функции, если вы этого не сделали, создайте приложение Pusher с панели инструментов Pusher, так как вам понадобятся: app_id, key, secret и cluster.

Создание базы данных Node.js для нашего приложения

Нам нужен сервер базы данных для запуска событий в Pusher, мы будем использовать Node.js для создания бэкэнд для этой статьи.

Чтобы начать работу, создайте новый файл в корневом каталоге нашего приложения и назовите его server.js. В этом файле server.js мы будем использовать Express в качестве веб-фреймворка, поэтому нам нужно потянуть его. Мы также будем использовать axios, Pusher и body-parser так как мы будем ссылаться на них в нашем коде.

В вашем терминале введите следующую команду:

По завершении установки откройте файл server.js и вставьте в него следующий код:

Вам нужно заменить PUSHER_APP_ID, PUSHER_APP_KEY, PUSHER_APP_SECRET и PUSHER_APP_CLUSTER на детали с панели инструментов приложения Pusher.

В приложении Express выше мы импортируем наши зависимости, а затем создаем экземпляр Pusher. Затем мы регистрируем некоторое промежуточное программное обеспечение, включая промежуточное CORS, поэтому мы не получаем ошибок запроса на перекрестное происхождение.

Затем у нас есть «Simulated Cron», который работает через 5 секунд. Задача — получить обновления с сервера и отправить обновления в Pusher. Затем наше приложение Vue подписывается на Pusher, вытягивает изменения и отображает их.

Наконец, мы сообщаем приложению Node прослушивать порт 8000. Чтобы запустить сервер Node, выполните следующую команду:

Это запустит сервер Node, и Simulated Cron начнет работу и отправит события в Pusher.

Создание прокси-сервера API

Чтобы получить доступ к нашему серверу API из приложения Vue, мы можем создать прокси в config/index.js и запустить сервер-разработчик и бэкэнд API бок о бок. Все запросы /api в нашем интерфейсном коде будут проксированы на back end сервер.

Откройте config/index.js и внесите следующие изменения:

В proxyTable мы пытаемся пропустить через прокси запросы от /api до localhost:8000.

Использование Pusher в нашем приложении Vue.js

Чтобы использовать Pusher на клиентской стороне нашего приложения, нам нужно подтянуть pusher-js . Выполните следующую команду в терминале:

Когда установка будет завершена, мы импортируем pusher-js в корневой компонент. В теге script добавьте следующее вверху:

Затем мы инициализируем Pusher с учетными данными приложения с панели инструментов Pusher и подписываемся на канал в created() жизненном цикле. Откройте App.vue и добавьте это в нижнюю часть метода created() в блоке else:

В приведенном выше коде мы подписываемся на получение обновлений на канале price-updates. Затем мы привязываемся к событию coin-updates на канале. Когда событие запускается, мы получаем данные и обновляем currentCurrency.

Вот и все. Вы можете создать приложение, выполнив следующую команду:

Команда должна открыть Vue PWA в вашем браузере. Чтобы убедиться, что вы получаете обновления, убедитесь, что ваш Node-сервер запущен.

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

Использование service workers и автономных возможностей

Как бы то ни было, приложение уже функционирует, но не является PWA в истинном смысле этого слова. Поэтому давайте работать над тем, чтобы приложение PWA поддерживало автономное хранилище. Процесс сборки уже автоматически генерирует service worker при создании приложения, поэтому давайте создадим приложение. Для создания приложения выполните следующую команду:

Эта команда создает папку dist в нашем рабочем каталоге, а также регистрирует новый service worker. Давайте откроем service worker в веб-браузере Chrome.

Мы будем обслуживать это приложение, используя пакет NPM под названием Serve. Для его установки выполните следующую команду:

Когда установка будет завершена, мы будем использовать пакет для обслуживания приложения. Для обслуживания приложения выполните следующую команду:

Мы должны получить вывод, который выглядит так:

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

Если мы перейдем к этому адресу http://localhost:5000 в нашем веб-браузере, мы увидим наше приложение, поскольку это был последний раз, никаких очевидных изменений, кроме того факта, что приложение теперь является PWA.

Мы можем проверить эту функцию, открыв инструменты разработчика браузера и щелкнув вкладку «Приложение». Вот что мы должны увидеть:

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

Наше приложение зарегистрировало service worker, который кэширует оболочку приложения при первом запуске, благодаря шаблону Vue PWA.

Оболочка приложения (или app shell) относится к локальным ресурсам, которые вашему веб-приложению необходимо загрузить как скелет вашего пользовательского интерфейса (UI). Представьте оболочку вашего приложения, как комплект кода, который вы опубликуете в собственном магазине приложений при создании собственного приложения.

Заключение

В этом уроке мы увидели, как написать простое PWA реального времени с Vue.js, Pusher и Service Workers. Мы также увидели, как кэшировать динамические значения из удаленного API с помощью объекта хранения данных Web Storage API. Существует намного больше возможностей для PWA и Vue, но это хорошее введение до сих пор.

Автор: Neo Ighodaro

Источник: 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