[Challenge] — Frontend: подключение к API для SSE


Оригинальное содержание в этом твите


Привет, frontend dev,

Давайте укрепим нашу дружбу с помощью испытания, которое я подготовил специально для вас?

Я просто хочу, чтобы вы сделали фронтенд, который подключается к API, предоставляющему поток значений акций с помощью Server Sent Events ─ SSE!

Достаточно.

cc @sseraphini


Цель этой темы не в том, чтобы объяснить, что такое SSE (поищите в Google). Но, грубо говоря, SSE работает как способ для клиента получать постоянный поток информации от сервера ─ поток. Это похоже на веб-сокет, только направление идет от сервера к клиенту.


После этого грязного вступления перейдем к задаче!

Сделайте фронтенд, который подключается к API (который я уже сделал и докеризировал для вас), чтобы начать получать поток котировок акций. Придумайте какой-нибудь способ динамического отображения ─ динамическая диаграмма была бы кстати!


Вот инструкции для начала работы.

Самый простой и рекомендуемый способ

  1. Запустите контейнер docker;
  2. Более или менее понимать, как это работает; и
  3. Наконец-то сделайте фронтенд по своему вкусу.

Ниже мы подробно рассмотрим каждый шаг.


1 . Загрузите контейнер docker:

docker run —rm -p 8080:80 zanfranceschi/des desafio-02-frontend_e_sse

Легче, чем заснуть днем после того, как съел фейжоаду.


2 . Более или менее понятно, как это работает:

Забравшись на контейнер, просто перейдите на сайт http://localhost:8080/. Я собрал нечто довольно простое и отвратительное, чтобы вы потрудились и сделали лучше. Посмотрите источник, чтобы получить представление.



3 . Наконец-то сделайте фронтенд по своему вкусу:

Эта часть важна, чтобы вы сделали все так, как вам нужно, хорошо?

Однако, если вы хотите или нуждаетесь в предложении, посмотрите на lib highcharts и его динамические графики.

https://highcharts.com/demo

https://highcharts.com/demo/live-data


Все, что я сделал для этой задачи, доступно на github, если вы хотите проверить это.

Если вы выполните задачу и версифицируете ее в git, откройте pull request, чтобы добавить ссылку в README этого репозитория задачи, хорошо? Я буду очень счастлив!

https://github.com/zanfranceschi/desafio-02-frontend_e_sse


Если вы дошли до этого момента, мне даже не нужно рассказывать вам, верно? ❤️

Много лет назад, во время занятий в колледже, преподаватель сказал, что «качество программного обеспечения диктуется пользовательским интерфейсом». Тогда мне казалось, что это неправильно, но сегодня я понимаю, что она имела в виду. И она права!

Оцените статью
devanswers.ru
Добавить комментарий