В этой статье мы расскажем, как создать очень простое приложение для отслеживания зарегистрированных случаев печально известного коронавируса, известного как COVID-19, с помощью простого JavaScript без какой-либо инфраструктуры и данных, находящихся в свободном доступе. Центром системных наук и инженерии (CSSE) Университета Джона Хопкинса. Учреждение создало потрясающую интерактивную веб-панель инструментов для визуализации и отслеживания зарегистрированных случаев в режиме реального времени.

Если вы чистый разработчик, который понятия не имеет о новом смертельном коронавирусе (как я и я), ознакомьтесь с официальным отчетом Всемирной организации здравоохранения здесь. Добро пожаловать!

Давай сделаем это уже

Прежде всего, давайте создадим очень простой index.html с несколькими элементами HTML и JavaScript app.js для загрузки и обработки данных.

Затем, как вы, наверное, уже догадались, создайте файл app.js.

Получение данных

Наиболее важной частью этой реализации является то, как мы можем получить данные. Как уже было сказано, данные я беру с этого GitHub. Там много разных данных. Для простоты мы сосредоточимся только на данных, показывающих зарегистрированные случаи во всех странах ежедневно. Он находится в этой директории — https://github.com/CSSEGISandData/COVID-19/tree/master/csse_covid_19_data/csse_covid_19_daily_reports. Если вы на шаг впереди меня, возможно, вы уже перешли в каталог и изучили его структуру. Что ж, как вы видели, в нем есть все данные, начиная с 22 января 2020 года по текущий день (или вчера). Файл находится в формате CSV и называется в формате ММ-ДД-ГГГГ. Если вы нажмете на один из CSV-файлов и нажмете на него кнопку RAW, он отобразит вам файл в необработанном формате с другой ссылкой — например, https://raw.githubusercontent. com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid_19_daily_reports/03-07-2020.csv.

Вуаля, вот как я мог получить ежедневные данные. Что нам нужно сделать, чтобы заменить «03–07–2020» на текущую дату или любую дату, которую мы хотели бы получить.

Если мы увеличим масштаб до fetchData, он сначала создаст URL-адрес для выборки данных, получив значение из переданного аргумента date и исправив его с помощью https:// cors-anywhere.herokuapp.com в качестве URL-адреса прокси-сервера CORS для решения проблемы перекрестного происхождения. Затем он вернет данные, если они доступны, или попытается получить вчерашние данные и так далее.

Отображение данных

После того, как мы получили данные, следующая и последняя задача — приготовить данные по нашему желанию и воображению и отобразить их на тарелке.

Наша цель — получить общее количество подтвержденных случаев для каждой страны. Поэтому я предложил вам очень простое решение: получить название страны из 4-го столбца. Кроме того, если страна «другая», мы объединяем столбец «провинция», чтобы придать ему смысл. Наконец, мы отображаем его в простых элементах списка. Готово!

Обновление (2020/03/28): они изменили формат данных, поэтому я соответствующим образом обновляю статью и исходный код.

Бонусный балл — внедрить кэширование и автономную поддержку

Мы собираемся использовать Workbox для выполнения грязной задачи. Если вам интересно, что это такое, пожалуйста, прочитайте мой предыдущий блог.

Workbox – это набор библиотек и модулей Node, которые упрощают кэширование ресурсов и в полной мере используют возможности, используемые для создания прогрессивных веб-приложений.

Сначала вам нужно установить пакет

npm install workbox-cli --save-dev

Далее создайте manifest.json — скачать можно отсюда. В основном это нужно для того, чтобы указать, какой значок вы получите при установке на свое устройство.

Затем создайте workbox-config.js для конфигурации рабочего ящика. Достаточно просто кэшировать все файлы (таблицы стилей, HTML, JavaScript и изображения) и указать конфигурацию источника и назначения сервис-воркера.

Затем создайте service-worker-src.js для настройки предварительного кэша и кэша среды выполнения.

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

Наконец, что не менее важно, перейдите в каталог приложения и выполните следующую команду, чтобы сгенерировать скомпилированный файл service-worker.js.

npx workbox injectManifest workbox-config.js

И еще одно, извините, зарегистрируйте service-worker и manifest.json в своем index.html.

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

…. На этот раз мы закончили.

Домашнее задание

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

Еще один бонус — E2E-тестирование

Так как вы хороший человек, мы дадим вам еще один бонусный балл, который заключается в реализации End To End Test с Cypress.

Что такое кипарис?

Cypress — это инструмент тестирования внешнего интерфейса нового поколения, созданный для современного Интернета. Мы обращаемся к ключевым проблемам, с которыми сталкиваются разработчики и QA-инженеры при тестировании современных приложений.

Почему Кипарис?

Я стремился найти лучший инструмент для сквозного тестирования продукта, который мы создали. Я пробовал несколько инструментов и фреймворков для тестирования, но ничто не сравнится с Cypress. Затем мы решили попробовать его для проверки концепции, и всей команде он понравился еще больше. Недавно команда Cypress выпустила версию 4.0, в которой появилась Поддержка Firefox и Edge поверх поддержки Chrome. Поскольку сейчас он поддерживает почти все основные браузеры, вам тоже стоит попробовать.

Установка

Давайте реализуем тест E2E в нашем проекте. Сначала перейдите в каталог проекта и установите следующую команду.

npm install cypress -D

После установки вы можете открыть инструмент кипариса, запустив npx cypress open. Чтобы протестировать его, вы можете щелкнуть любой файл примера, затем он должен открыть другие окна и запустить интерактивный тестовый браузер.

Кодирование

Что ж, мы можем удалить все эти файлы примеров и создать наш простой файл спецификации cypress/integration/spec.js следующим образом.

Давайте разберемся, что означают коды

Раздел beforeEach: этот раздел будет запускаться каждый раз перед каждым обращением. Он переходит к локальному URL-адресу, прежде чем мы сможем протестировать элемент.

Первый случай (строка 9): он просто проверяет, видим ли мы элемент date и не является ли он пустым. Это очень прямолинейно, не так ли?

Второй случай (строка 15): сначала он проверяет, чтобы элемент data был видимым и пустым. Затем он проверяет элемент, содержит ли он «Китай» и «Корея».

Далее нам нужно создать конфигурацию Cypress, как показано ниже.

Запустить тест

Простой способ запустить тест, запустить npx cypress open и вы получите что-то вроде следующего.

Если вы пользователь терминала, давайте создадим скрипт dev и test в package.json, чтобы мы могли легко запустить его в следующий раз.

Затем установите browser-sync и запустите npm run dev, чтобы запустить сервер разработки. Затем установите пакет wait-on и запустите npm run test на другом терминале, чтобы запустить тест. wait-on используется для ожидания, пока http://localhost:8888 не вернет код OK, а затем запустит тест.

Уф... На этот раз, наконец, все готово. Если вы не смогли уследить за ним, вы можете просто клонировать репозиторий и учиться в своем собственном темпе.

Берегите себя и будьте в безопасности!

Примечание от Plain English

А вы знали, что мы запустили канал на YouTube? Каждое видео, которое мы делаем, направлено на то, чтобы научить вас чему-то новому. Загляните к нам, нажав нажмите здесь, и обязательно подпишитесь на канал 😎