Рубрики
Без рубрики

Как я построил приложение, которое следует за фондовым рынком для вызова FreeCodecamp.

Даниэль Deutsch, как я построил приложение, которое следует за фондовым рынком для FreeCodeCamp Challenge.photo by peggy Pardo на Unsplash – https://unsplash.com/photos/a6z2tyfejr8i работал над приложением из программной программы FreeCodecamp, и думал, что другие могут Найти это интересно. В этой статье вы можете прочитать

Автор оригинала: FreeCodeCamp Community Member.

Даниэль Дойч

Я работал над приложением из учебной программы FreeCodeCamp, и думал, что другие могут найти это интересно. В этой статье вы можете прочитать полную документацию для процесса здания. Наслаждаться!

Соревнование

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

Пользовательские истории довольно просты:

  • Я могу просмотреть график, отображающий недавние линии тренда для каждого добавленного запаса.
  • Я могу добавить новые акции по имени их символа.
  • Я могу удалить запасы.
  • Я могу видеть изменения в режиме реального времени, когда любой другой пользователь добавляет или удаляет запас. Для этого вам нужно будет использовать WebSockets.

Похоже, это выглядит:

Дорожная карта

Когда я сделал мое последнее приложение Full-Stack Я узнал, что начиная с заднего конца может вызвать некоторые проблемы, когда вы работаете на переднем конце позже. Так что на этот раз я решил начать с переднего конца и закончить спиной.

Вот дорожная карта, которую я использовал:

  1. Настройте среду с созданием-реактивным приложением
  2. Выложите основную структуру реагирования
  3. Настройте систему redux Eco
  4. Работайте над всеми компонентами, разделите их в компоненты контейнера и проводьте все с помощью магазина Redux
  5. Создайте компонент диаграммы с помощью реагирования
  6. Построить бэкэнд, используя Socket.IO
  7. Адаптируйте интерфейс до Websockets
  8. Развертывание Героку

Внешний интерфейс

Я собираюсь выделить ключевые краеугольные камни – это не пошаговое учебное пособие.

Настройка с пакетом Create-React-App

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

В основном это обеспечивает среду, которая:

  • Опора в режиме реагирования, JSX, ES6 и синтаксиса потока.
  • Обеспечивает языковые дополнения за пределы ES6, как оператор распространения объекта.
  • Имеет сервер Dev, который ищет общие ошибки.
  • Импортирует файлы CSS и изображения непосредственно из JavaScript.
  • Имеет Autoprefixed CSS, поэтому вам не нужно -webkit или другие префиксы.
  • Имеет скрипт сборки для развязки JS, CSS и изображения для производства с помощью SourceMaps.
  • Дает вам автономный-первый сервисный работник и манифест веб-приложения, отвечающую всем прогрессивным критериям веб-приложений.

Довольно рано, я должен был извлечь конфигурацию конфигурации среды для изменений) для изменения конфигурации WebPack.

Проблема заключалась в том, что я хотел добавить jQuery для материализец – и всегда были проблемы.

Вот некоторые решения:

  • Импорт jQuery в ES6: здесь Отказ
  • Предоставить плагин jQuery в конфиге WebPack: здесь Отказ

Реагировать, redux, реагировать

На этот раз я хотел использовать React Vis для визуализации диаграммы. Это библиотека визуализации, основанная на D3 и разработана Uber. Подводя итоги и процитировать их документы:

Некоторые заметные функции:

  • Простота Отказ React – Vis не требует никаких глубоких знаний библиотек визуализации данных, прежде чем начать строить ваши первые визуализации.
  • Гибкость Отказ React-Vis обеспечивает набор основных строительных блоков для разных диаграмм. Например, он имеет отдельные компоненты оси X и Y y. Это обеспечивает высокий уровень контроля макета диаграммы для приложений, которые его нуждаются.
  • Простота использования Отказ Библиотека предоставляет набор данных по умолчанию, которые могут быть переопределены настройками пользовательских пользователей.
  • Интеграция с React Отказ React-Vis поддерживает жизненный цикл реагирования и не создает ненужных узлов.

Некоторые практические вопросы, которые я наткнулся и решил:

  • Сделать диаграмму реагирования отзывчивающую, как это
  • Нужно правильно использовать градиенты в реакции, убедитесь, что вы включаете их в сюжет и адаптируйте контрольные точки. Проверьте это вне.
  • Используйте Lineeries вместо LineMarkseries для лучшей производительности (проверьте эту же ссылку )

В этот момент приложение было уже довольно мило. Теперь я должен был проверить последнюю пользовательскую историю, которая отображает реальные изменения, используя «веб-разъем».

Задний конец

Для данных я использовал открытую API от Quandl Отказ

Сервер: index.js:

Настройка базы данных (MongoDB, размещенная MLAB)

Просто настройте учетную запись MLAB и создайте коллекцию для нового приложения. Сделайте модель мангусты, чтобы упростить взаимодействие с базой данных, например, эта:

const mongoose = require('mongoose');
var Schema = mongoose.Schema;
var stockSchema = new Schema({  stockName: String});
module.exports = mongoose.model('stockModel', stockSchema);

Затем подключите Express Server к MLAB.

Чтобы решить предупреждение о устаревшей Mongoose Open Connection, используйте openuri.

Для большего, см. здесь Отказ

Маршруты

Настройте маршрут, чтобы по умолчанию по умолчанию индекс сборки производства .HTML потребляется. Установите другой маршрут, чтобы проверить базу данных для его контента и вернуть ее в ответ.

Добавление WebSocket.

Используйте документы сокетов для настройки слушателей в:

  • Показать соединение
  • Показать отключение
  • Сохранить данные в базу данных
  • Удалить данные из базы данных

Обязательно интегрируйте функцию слушателя с моделью Mongoose для упряжки мощности MongoDB.

На боковом примечании – потому что я потратил буквально на одну неделю по этому вопросу:

Использовать Socket.broadcast.emit Чтобы отправить сообщение всем сокетам!

Увидеть больше здесь Отказ

Адаптируйте передний конец в Websocket

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

Для этих конфигураций это ключ для обработки проблемы в самой компоненте и в утках (файлах Redux).

Я решил его путем подключения компонента контейнера с помощью клиента Socket.io и прослушивая изменения. Я сделал это с ComponentDidmount жизненный цикл. Каждый раз, когда сообщение выделяется сокетом, компонент консультируется с базой данных путем диспетчеризации действий в файлы redux.

В файлах Redux я выделил данные из базы данных и сравнил его с текущим хранилищем приложения. В зависимости от этого сравнения приложение снова извлекает все данные из службы Quandl. Таким образом, каждый новый клиент сокета может проверить для себя и всегда имеет самые современные данные.

Обратите внимание: я не уверен, что это лучшая практика для приложения Redux/React, поскольку я обрабатываю большую логику в Async Action. Не стесняйтесь указывать на ошибки или неправильно понятые концепции!:)

Async Действия на утки/stocks.js (фрагмент):

// Async actions with thunkexport function checkDB(stocks) {	return dispatch =>		axios			.get('/api/stocks')			.then(res => {				if (stocks.length === 0) {					res.data.map(elem => {						dispatch(fetchStock(elem.stockName));					});				} else if (res.data.length < stocks.length) {					dispatch(removeStock(stocks.length - 1));				} else {					let diff = [];					res.data.map((item, i) => {						if (i < stocks.length) {							if (res.data[i].stockName !== stocks[i].dataset.dataset_code) {								diff.push({									stockName: item.stockName								});							}						} else if (i === stocks.length) {							diff.push({								stockName: item.stockName							});						} else {							diff = [];						}					});
					diff.map(elem => {						dispatch(fetchStock(elem.stockName));					});					diff = [];					// console.log(res);				}			})			.catch(err => {				console.warn(err);			});}
export function fetchStock(stockCode) {	return dispatch =>		axios			.get(				`https://www.quandl.com/api/v3/datasets/WIKI/${stockCode}.json?api_key=${process					.env.REACT_APP_QUANDL_KEY}`			)			.then(res => {				dispatch(addStock(res.data));				// console.log(res.data);			})			.catch(err => {				console.error(err);				toastr['warning'](' ', 'Stock Code cannot be found!');			});}
export function newStock(stockCode, socket) {	socket.emit('update', stockCode);	return dispatch =>		axios			.get(				`https://www.quandl.com/api/v3/datasets/WIKI/${stockCode}.json?api_key=${process					.env.REACT_APP_QUANDL_KEY}`			)			.then(res => {				dispatch(addStock(res.data));				// console.log(res.data);			})			.then(socket.emit('addStock', stockCode))			.catch(err => {				console.error(err);				toastr['warning'](' ', 'Stock Code cannot be found!');			});}
export function deleteStock(ind, stockCode) {	const socket = socketIOClient('https://createdd-stockmarketchart.herokuapp.com/');	socket.emit('removeStock', stockCode);	return dispatch => {		dispatch(removeStock(ind));		console.log(`Deleted ${stockCode}`);	};}

Складной контейнер – CollapSiblecon.js

Развертывание Героку

Для развертывания к Heroku важно:

  • Чтобы использовать Create-React-App Buildpack при использовании сервера WebPack
  • Использовать Nodejs Buildpack при использовании собственного WebSocket с Express Server
  • Установить переменные среды

Увидеть результат

  • Смотрите в прямом эфире здесь .
  • См. Открытый исходный код здесь.
  • Смотрите 5min timelapse здесь.
  • Смотрите 1 час расслабляющий кодирующий сеанс здесь.

Спасибо за чтение моей статьи! Если вам понравилось, пожалуйста, дайте мне несколько хлопья, чтобы все больше людей видят это. И не стесняйтесь оставлять какие-либо отзывы.

Читайте ещё по теме: