CryptoMonitor: различия между версиями

Материал из Поле цифровой дидактики
Новая страница: «Определение функциональных требований# Перед началом разработки системы мониторинга криптоактивов, я сформировал перечень требований, чтобы обеспечить максимальную информативность и удобство для пользователя. В моем представлении, современный тр...»
 
Нет описания правки
 
(не показаны 3 промежуточные версии 2 участников)
Строка 1: Строка 1:
Определение функциональных требований#
== Определение функциональных требований ==
Перед началом разработки системы мониторинга криптоактивов, я сформировал перечень требований, чтобы обеспечить максимальную информативность и удобство для пользователя.
Перед началом разработки системы мониторинга криптоактивов, я сформировал перечень требований, чтобы обеспечить максимальную информативность и удобство для пользователя.


В моем представлении, современный трекер должен не просто показывать цифры, а предоставлять контекст: динамику за 24 часа, общую капитализацию рынка и детальную аналитику по каждому активу.
В моем представлении, современный трекер должен не просто показывать цифры, а предоставлять контекст: динамику за 24 часа, общую капитализацию рынка и детальную аналитику по каждому активу.  


Реестр функциональных и нефункциональных требований:
'''Реестр функциональных и нефункциональных требований:'''
* '''Мониторинг цен''': Отображение актуальных курсов топ-50 криптовалют.
* '''Фильтрация и сортировка''': Возможность быстрого поиска "Лидеров роста" и "Лидеров падения".
* '''Глобальная аналитика''': Показ доминации BTC/ETH и общей капитализации рынка в реальном времени.
* '''Детальный разбор''': Модальное окно с описанием актива и графиком изменения цены (Sparkline).
* '''Автообновление''': Система должна автоматически синхронизировать данные каждые 20 секунд без перезагрузки страницы.


Мониторинг цен: Отображение актуальных курсов топ-50 криптовалют.
== Получение API и конфигурация проекта ==
Фильтрация и сортировка: Возможность быстрого поиска "Лидеров роста" и "Лидеров падения".
Для работы приложения требуется доступ к агрегатору данных. Я выбрал '''CoinGecko API''', так как он предоставляет один из самых полных наборов данных бесплатно (Demo-план).
Глобальная аналитика: Показ доминации BTC/ETH и общей капитализации рынка в реальном времени.
Детальный разбор: Модальное окно с описанием актива и графиком изменения цены (Sparkline).
Автообновление: Система должна автоматически синхронизировать данные каждые 20 секунд без перезагрузки страницы.


Получение API и конфигурация проекта
'''Процесс получения ключа:'''
Для работы приложения требуется доступ к агрегатору данных. Я выбрал CoinGecko API, так как он предоставляет один из самых полных наборов данных бесплатно (Demo-план).
# Регистрация на CoinGecko Developer Dashboard.
# Создание нового API Key (Demo).
# Сохранение ключа в конфигурационный файл.


Процесс получения ключа:
'''Структура окружения (.env):'''
Ключи и настройки хранятся отдельно от кода для безопасности:
<pre>
COINGECKO_API_KEY="твой_ключ"
DEBUG=True
</pre>


Регистрация на CoinGecko Developer Dashboard.
== Разработка приложения ==
Создание нового API Key (Demo).
Сохранение ключа в конфигурационный файл.
Структура окружения (.env): Ключи и настройки хранятся отдельно от кода для безопасности:


env
=== 1. Управление зависимостями ===
COINGECKO_API_KEY="твой_ключ"
DEBUG=True
Разработка приложения
1. Управление зависимостями
Для стабильной работы бэкенда на Python был создан файл зависимостей.
Для стабильной работы бэкенда на Python был создан файл зависимостей.


requirements.txt:
'''requirements.txt:'''
 
<pre>
text
fastapi
fastapi
uvicorn
uvicorn
requests
requests
python-dotenv
python-dotenv
2. Архитектура Backend (Python + FastAPI)
</pre>
 
=== 2. Архитектура Backend (Python + FastAPI) ===
Бэкенд разделен на два основных модуля:
Бэкенд разделен на два основных модуля:
* '''api_client.py''': Логика взаимодействия с внешним API, механизм кэширования для снижения нагрузки на лимиты.
* '''main.py''': RESTful API сервис на базе FastAPI, обслуживающий запросы фронтенда.


api_client.py: Логика взаимодействия с внешним API, механизм кэширования для снижения нагрузки на лимиты.
'''Пример реализации кэширования в api_client.py:'''
main.py: RESTful API сервис на базе FastAPI, обслуживающий запросы фронтенда.
<pre>
Пример реализации кэширования в api_client.py:
 
python
cache = {
cache = {
     'prices': {'data': None, 'timestamp': 0},
     'prices': {'data': None, 'timestamp': 0},
Строка 49: Строка 51:
}
}
_CACHE_EXPIRE = 60 # Кэш на 60 секунд
_CACHE_EXPIRE = 60 # Кэш на 60 секунд
3. Разработка Frontend (Vanilla JS + CSS)
</pre>
 
=== 3. Разработка Frontend (Vanilla JS + CSS) ===
Интерфейс выполнен в современном стиле с использованием "стеклянного" дизайна (glassmorphism) и плавных анимаций.
Интерфейс выполнен в современном стиле с использованием "стеклянного" дизайна (glassmorphism) и плавных анимаций.


Ключевые особенности UI:
'''Ключевые особенности UI:'''
* '''Lucide Icons''': Использование векторных иконок для визуализации трендов.
* '''SVG Charts''': Динамическая генерация графиков изменения цены за 7 дней прямо в браузере.
* '''Responsive Design''': Адаптация под мобильные устройства и планшеты.


Lucide Icons: Использование векторных иконок для визуализации трендов.
== Тестирование и запуск ==
SVG Charts: Динамическая генерация графиков изменения цены за 7 дней прямо в браузере.
Responsive Design: Адаптация под мобильные устройства и планшеты.
Тестирование и запуск
Запуск проекта осуществляется через терминал:
Запуск проекта осуществляется через терминал:
 
<pre>
bash
python main.py
python main.py
</pre>
[[Файл:Запуск скрипта.png|средний]]
После запуска сервер становится доступен по адресу http://localhost:8000. Приложение сразу начинает цикл обновления данных:
После запуска сервер становится доступен по адресу http://localhost:8000. Приложение сразу начинает цикл обновления данных:
# '''Главная страница''': Показ сетки карточек с ценами.
# '''Индикатор обновления''': Таймер в шапке отсчитывает время до следующей синхронизации.
# '''Аналитика''': При клике на карточку открывается окно с подробным описанием монеты на русском языке.
[[Файл:Интерфейс.png|средний]]
== Методические материалы ==
{| class="wikitable"
! Понятие !! Описание
|-
| '''FastAPI''' || Современный, быстрый (высокопроизводительный) веб-фреймворк для создания API.
|-
| '''CoinGecko API''' || Программный интерфейс, предоставляющий доступ к данным рынка криптовалют.
|-
| '''Vanilla JavaScript''' || Чистый JavaScript без использования сторонних фреймворков.
|-
| '''Sparkline''' || Небольшой график, показывающий общую динамику изменения во времени.
|-
| '''[[REST API]]''' || Архитектурный стиль взаимодействия компонентов по протоколу HTTP.
|}


Главная страница: Показ сетки карточек с ценами.
[[Категория:Работа с API]]
Индикатор обновления: Таймер в шапке отсчитывает время до следующей синхронизации.
Аналитика: При клике на карточку открывается окно с подробным описанием монеты на русском языке.
Методические материалы
Понятие Описание
FastAPI Современный, быстрый (высокопроизводительный) веб-фреймворк для создания API на Python 3.8+.
CoinGecko API Программный интерфейс, предоставляющий доступ к фундаментальным данным рынка криптовалют.
Vanilla JavaScript Чистый JavaScript без использования сторонних фреймворков (таких как React или Vue).
Sparkline Небольшой, упрощенный график, показывающий общую динамику изменения показателя во времени.
REST API Архитектурный стиль взаимодействия компонентов, использующий протокол HTTP.

Текущая версия от 22:00, 19 марта 2026

Определение функциональных требований

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

В моем представлении, современный трекер должен не просто показывать цифры, а предоставлять контекст: динамику за 24 часа, общую капитализацию рынка и детальную аналитику по каждому активу.

Реестр функциональных и нефункциональных требований:

  • Мониторинг цен: Отображение актуальных курсов топ-50 криптовалют.
  • Фильтрация и сортировка: Возможность быстрого поиска "Лидеров роста" и "Лидеров падения".
  • Глобальная аналитика: Показ доминации BTC/ETH и общей капитализации рынка в реальном времени.
  • Детальный разбор: Модальное окно с описанием актива и графиком изменения цены (Sparkline).
  • Автообновление: Система должна автоматически синхронизировать данные каждые 20 секунд без перезагрузки страницы.

Получение API и конфигурация проекта

Для работы приложения требуется доступ к агрегатору данных. Я выбрал CoinGecko API, так как он предоставляет один из самых полных наборов данных бесплатно (Demo-план).

Процесс получения ключа:

  1. Регистрация на CoinGecko Developer Dashboard.
  2. Создание нового API Key (Demo).
  3. Сохранение ключа в конфигурационный файл.

Структура окружения (.env): Ключи и настройки хранятся отдельно от кода для безопасности:

COINGECKO_API_KEY="твой_ключ"
DEBUG=True

Разработка приложения

1. Управление зависимостями

Для стабильной работы бэкенда на Python был создан файл зависимостей.

requirements.txt:

fastapi
uvicorn
requests
python-dotenv

2. Архитектура Backend (Python + FastAPI)

Бэкенд разделен на два основных модуля:

  • api_client.py: Логика взаимодействия с внешним API, механизм кэширования для снижения нагрузки на лимиты.
  • main.py: RESTful API сервис на базе FastAPI, обслуживающий запросы фронтенда.

Пример реализации кэширования в api_client.py:

cache = {
    'prices': {'data': None, 'timestamp': 0},
    'global': {'data': None, 'timestamp': 0}
}
_CACHE_EXPIRE = 60 # Кэш на 60 секунд

3. Разработка Frontend (Vanilla JS + CSS)

Интерфейс выполнен в современном стиле с использованием "стеклянного" дизайна (glassmorphism) и плавных анимаций.

Ключевые особенности UI:

  • Lucide Icons: Использование векторных иконок для визуализации трендов.
  • SVG Charts: Динамическая генерация графиков изменения цены за 7 дней прямо в браузере.
  • Responsive Design: Адаптация под мобильные устройства и планшеты.

Тестирование и запуск

Запуск проекта осуществляется через терминал:

python main.py

средний После запуска сервер становится доступен по адресу http://localhost:8000. Приложение сразу начинает цикл обновления данных:

  1. Главная страница: Показ сетки карточек с ценами.
  2. Индикатор обновления: Таймер в шапке отсчитывает время до следующей синхронизации.
  3. Аналитика: При клике на карточку открывается окно с подробным описанием монеты на русском языке.

средний

Методические материалы

Понятие Описание
FastAPI Современный, быстрый (высокопроизводительный) веб-фреймворк для создания API.
CoinGecko API Программный интерфейс, предоставляющий доступ к данным рынка криптовалют.
Vanilla JavaScript Чистый JavaScript без использования сторонних фреймворков.
Sparkline Небольшой график, показывающий общую динамику изменения во времени.
REST API Архитектурный стиль взаимодействия компонентов по протоколу HTTP.