Stock Master - это веб-приложение, которое поможет вам быть в курсе биржевых тенденций компаний; вы и друзья заботитесь о.

Когда вы вводите код акций компании, на графике отображается динамика ее запасов за последний год.

Ваши действия также синхронизируются между всеми пользователями в режиме реального времени.

Stock Master просто включает в себя запрос данных о запасах из API и построение графика данных о запасах.

Я получаю биржевые данные из Quandl API и строю график биржевого тренда с помощью Highcharts (библиотеки для построения графиков).

Socket.io обеспечивает синхронизацию между пользователями в реальном времени.

Stock Master - это полнофункциональное приложение на JavaScript, построенное на: Node, Express, Pug и MongoDB.

Исходный код Stock Master имеет лицензию MIT и доступен на GitHub.

Процесс

Давайте погрузимся в то, как я создал приложение.

Stock Master - это моя версия приложения FreeCodeCamp Stock Market.

Требования к пользователю

  1. История пользователя: я могу просматривать график, отображающий последние линии тренда для каждой добавленной акции.
  2. История пользователей: я могу добавлять новые акции по названию их символа.
  3. User Story: я могу убрать стоковые.
  4. История пользователя: я могу видеть изменения в режиме реального времени, когда любой другой пользователь добавляет или удаляет акции. Для этого вам нужно будет использовать веб-сокеты.

В духе экспериментов и доведения приложений до состояния готовности к производству я решил развернуть код ES2015 и защитить приложение от уязвимостей.

Мой список дел

Первое, что мне нужно было сделать, это выяснить, как приложение будет работать. У меня были такие вопросы:

Как мне построить график динамики запасов?
Откуда мне взять данные о запасах?

Чтобы построить график, я столкнулся с двумя основными библиотеками: Highcharts и D3.js.
Я выбрал Highcharts, потому что его проще использовать. Я реализовал их демо, чтобы посмотреть, как это работает.

Еще мне понадобился API для получения данных об акциях компаний, Quandl пришел мне на помощь.

К этому моменту у меня была рабочая демонстрация, и я мог приступить к созданию подходящего приложения.

Процесс создания приложения включал 3 этапа:

Этап 1: Функциональность
* Настройка сервера и маршрутов
* Исследование WebSockets
* Реализация всех пользовательских историй
* Отправка кода ES6 +.

Этап 2
* Стиль
* Документ
* Рефакторинг
* Развертывание

Этап 3
* Протестируйте онлайн-приложение
* Получите отзывы и интегрируйте
* Напишите

ЭТАП 1
Моя рабочая демонстрация представляла собой единственный файл index.html, который содержал весь мой код: HTML, CSS и JavaScript. Это совсем не выглядело хорошо.

Я хотел использовать архитектуру MVC и сделать кодовую базу модульной.

При переходе от демонстрации моя первая итерация приложения выполняла запросы от клиента к серверу и от сервера к Quandl API. Сервер извлекает данные о запасах и передает эти данные клиенту для построения графика.

Поток моего приложения выглядел так:

Клиент - ›Сервер -› Quandl API - ›Сервер -› Клиент

Чтобы сделать приложение быстрее, я решил делать запросы напрямую от клиента к Quandl API. Таким образом, мы имеем:

Клиент - ›Quandl -› Клиент

Теперь рассуждать о потоке стало намного проще.

Создание Stock Master включало в себя множество итераций и тестов, чтобы понять, как они работают.

XSS-атаки

Я использовал DOMpurify для очистки данных перед их отправкой в ​​мою базу данных, а также перед отображением их пользователю. DOMpurify очищает данные, чтобы предотвратить атаки XSS (межсайтовый скриптинг).

Мне не пришлось беспокоиться о XSRF (подделке межсайтовых запросов), поскольку аутентификация пользователей не входила в состав приложения. Кто угодно может делать запросы к приложению, никаких специальных профилей, следовательно, никаких запросов для подделки.

WebSockets

Для синхронизации пользователей в реальном времени я использовал Socket.io, основанный на WebSockets.

Я создал простое приложение для чата, чтобы понять, как работают WebSockets, а затем использовал свои уроки для интеграции функций реального времени в Stock Master.

Доставка ES6 + Код

Доставка кода ES6 + на основе совета Филипа Уолтона была интересной. Он приводит веские аргументы в пользу того, что:

Последние версии браузеров могут поддерживать код ES6 +, поэтому разработчики должны отправлять код ES6 + пользователям, поскольку файлы меньше по размеру и предлагают более быстрое время синтаксического анализа, чем код ES5.



Развертывание кода ES2015 + в производственной среде сегодня
Мысли о веб-разработке, открытом исходном коде, архитектуре программного обеспечения и будущем. philipwalton.com



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

Филип предлагает создать два пакета JS (ES6 + и ES5) и автоматически определить, какой из них поддерживает браузер, перед загрузкой одного файла JS.

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

ЭТАП 2
Я добавил в приложение простой стиль, чтобы сделать его визуально привлекательным.

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

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

Я наткнулся на статью, в которой предлагалось удалить комментарии из кода, чтобы сделать его чище и понятнее.



Кодирование без комментариев
Если добавление в код большого количества комментариев - это хорошо, то и миллионы комментариев в вашем коде должны быть отличными… blog.codinghorror.com



Я последовал совету, и это привело к улучшению кодовой базы.

Я написал хорошую документацию на Github и добавил лицензию MIT. Мы приветствуем участие в приложении. Моя база данных находится в mlab, и я развернул приложение на Heroku.

ЭТАП 3
Я протестировал онлайн-версию приложения, чтобы убедиться, что все работает должным образом, и исправил обнаруженные мной ошибки.

Например, у меня были проблемы с адаптивностью к мобильным устройствам, и мне пришлось это исправить.

Написание этой статьи о моем процессе помогло мне задуматься и поделиться своими уроками с другими.

Уроки выучены

Несмотря на то, что в первый день создания приложения у меня была рабочая демонстрация, мне потребовалось еще 7 дней, чтобы превратить приложение во что-то правильное. Потерпи.

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

Я стоял на плечах гигантов: Highcharts и Quandl. Если бы эти ресурсы были недоступны, на создание приложения у меня ушло бы гораздо больше времени.

Создавать веб-приложения сегодня намного проще благодаря открытым исходным кодам и бесплатным ресурсам.

Если вам понравилась эта статья, вам может понравиться Chingu, мое любимое сообщество программистов.