Создание аналитической панели 0:00 Создание аналитической панели с использованием Next.js и Tailwind CSS. Возможность отслеживать любые данные, включая количество пользователей, покупки тарифных планов и т.д.
Настройка проекта 1:52 Создание нового проекта с помощью команды "npx create next-app". Настройка проекта с использованием TypeScript, Tailwind CSS, маршрутизатора приложений и т.д.
Настройка страницы 2:47 Изменение стиля страницы с помощью класса с промежуточными точками и темного цвета. Создание папки "analytics" в каталоге приложений и файла "page.tsx" для содержания содержимого страницы.
Создание промежуточного программного обеспечения для отслеживания событий аналитики 3:44 Создание компонента функции стрелки и его экспорт по умолчанию. Использование промежуточного программного обеспечения для отслеживания событий аналитики. Создание файла промежуточного программного обеспечения и его экспорт.
Настройка промежуточного программного обеспечения 5:35 Создание функции для отслеживания событий аналитики. Настройка механизма сопоставления для определения, когда будет запущено промежуточное программное обеспечение. Настройка промежуточного программного обеспечения для отслеживания домашней страницы.
Разработка API для отслеживания событий аналитики 10:19 Использование функционального или классового подхода для разработки API. Пример использования функционального подхода для отслеживания событий аналитики.
Создание класса для аналитики 11:22 Создание класса для аналитики, который будет иметь приватную переменную для хранения данных. Определение конструктора, который может переопределять внутренние свойства класса.
Использование базы данных Redis 16:44 Создание базы данных Redis для хранения данных аналитики. Использование функции age inc by для увеличения значения ключа в базе данных.
Отслеживание аналитики 20:28 Импорт аналитики в промежуточное программное обеспечение для отслеживания событий. Просмотр статистики посещений на главной странице и в браузере данных.
Организация событий 22:25 В видео обсуждается, как организовать события в приложении, чтобы они были представлены на панели мониторинга. События могут быть любыми действиями, такими как просмотр страницы или покупка в интернет-магазине. События хранятся в виде структурированных метаданных, которые можно легко извлечь и проанализировать.
Сохранение данных 23:23 В видео объясняется, как сохранить данные о событиях в приложении. Для этого используется функция аналитики или отслеживания, которая сохраняет информацию о событиях в виде временного ряда. Если данные не нужно сохранять, они могут быть представлены в виде "прямо сейчас" с вечным сроком жизни.
Получение даты 24:37 В видео объясняется, как получить текущую дату в приложении. Для этого используется функция get date, которая позволяет получить дату за определенный период времени. Для получения даты за определенный период времени, можно использовать функцию sub days из библиотеки date-fns.
Экспорт и импорт данных 26:46 Экспортируем данные из утилиты и импортируем их в аналитическую панель. Автоматический импорт не работает, поэтому импортируем данные вручную.
Удаление записей из базы данных 28:36 Указываем срок хранения записей и количество секунд для удаления. Данные удаляются из базы данных через указанное время.
Извлечение данных из базы данных 30:29 Создаем функцию "извлекать дни" для получения данных из базы данных. Функция принимает пространство имен и дату для извлечения данных.
Отображение данных на панели мониторинга 34:09 Преобразуем данные из базы данных в JSON и отображаем их на панели мониторинга. Данные отображаются с метаданными, прикрепленными к каждой записи.
Создание функции извлечения данных 35:26 Создание функции retrieve days, которая позволяет извлекать данные за несколько дней. Использование цикла for для создания массива обещаний, которые выполняются одновременно.
Сортировка данных 40:03 Использование функции sortBy для сортировки данных по дате. Преобразование даты из строки в дату JavaScript для сравнения.
Создание аналитической панели 42:33 Создание пользовательского компонента панели мониторинга аналитики. Модель отвечает за выборку данных, контроллер - за обработку, а представление - за отображение.
Создание аналитической панели 44:24 Создание элемента div с именем класса flex и grid. Использование компонента из библиотеки графиков для создания аналитической панели. Установка пакета tremor react для работы с графиками.
Использование компонента аналитической панели 47:13 Создание карточки с использованием компонента аналитической панели. Определение реквизита для аналитической панели и использование его для отображения среднего количества посетителей в день.
Расчет среднего количества посетителей в день 50:54 Определение количества просмотров страниц и среднего количества посетителей в день. Использование функции "исправить" для преобразования числа в строку. Возможность отслеживания количества посетителей за разные периоды времени.
Сокращение количества посетителей 54:30 Видео начинается с обсуждения сокращения количества посетителей на веб-сайте. Для этого используется утилита "точечный фильтр", которая позволяет сократить количество посетителей только для текущего дня. Затем автор объясняет, как использовать функцию получения даты для получения только тех событий, которые произошли сегодня. После этого он демонстрирует, как применить сокращение к событиям, используя накопитель текущего значения. В итоге, автор получает количество посетителей на сегодняшний день, которое можно использовать в аналитической панели.
Визуализация данных 57:42 Автор переходит к визуализации данных, используя гистограмму с tremor react. Он объясняет, как получить данные о просмотрах страниц временных рядов и как использовать их для создания гистограммы. Он также демонстрирует, как добавить данные в гистограмму и как настроить ее для отображения данных.
Ошибки и исправления 1:00:28 Автор обнаруживает ошибку в своем коде, которая приводит к тому, что гистограмма не отображается. Он исправляет ошибку, добавляя недостающие категории и индексы в свой код. После исправления ошибки, автор демонстрирует, как гистограмма теперь отображает данные о просмотрах страниц временных рядов.
Создание аналитической панели 1:02:26 В Tremor есть функция, которую нужно скопировать в конфигурацию Tailwind, чтобы получить красивые графики для аналитики. В процессе производства данные будут храниться в базе данных рядом с этой страницей.
Создание карты самых популярных стран 1:07:55 Для получения информации о стране нужно проанализировать строку и преобразовать ее в JSON. Если страна уже есть на карте, то нужно увеличить значение, иначе инициализировать его. Для упорядочивания списка самых популярных стран используется сортировка.
Создание панели мониторинга 1:12:25 Создание панели мониторинга с использованием React и TypeScript. Отображение популярных стран и количества посещений. Использование пакета react-country-flag для отображения флагов стран.
Добавление значков 1:16:46 Создание компонента "Постоянный значок" для отображения значков, показывающих увеличение производительности. Использование библиотеки иконок Lucid React для создания значков.
Развертывание на Vercel 1:22:22 Развертывание проекта на Vercel для отображения данных о странах. Настройка переменной окружения Redis для работы с Redis.
