Создание dApp для потоковой передачи фильмов Web3 с использованием NextJs, Tailwind и Sia Renterd

Введение

Интернет развивается, и технологии Web3 революционизируют традиционные отрасли, включая потоковое видео. Такие платформы, как Odysee, лидируют, предлагая децентрализованные альтернативы YouTube и Rumble. Аналогичным образом, в отличие от традиционных поставщиков, таких как Google Drive и Dropbox, Sia трансформирует хранение данных, предоставляя подход, ориентированный на конфиденциальность и пользователя.

Присоединяйтесь к нам в путешествии по созданию передового Web3-видеостриминга dApp с использованием NextJs, TypeScript, Tailwind CSS и Sia Renterd. Эта серия руководств поможет вам создать децентрализованное приложение, которое использует технологию блокчейна Sia для обеспечения владения данными пользователя и конфиденциальности.

К концу этого урока вы приобретете навыки, позволяющие:

• Создайте полнофункциональную платформу потокового вещания фильмов, чтобы делиться ею с друзьями или использовать ее в качестве школьного проекта.
• Запустите собственное SaaS-приложение (программное обеспечение как услуга)
• Раскройте потенциал технологий Web3 в индустрии потокового видео

Посмотрите демонстрационное видео ниже, чтобы увидеть проект в действии, и подпишитесь на наш канал , чтобы получать больше подобного инновационного контента!

Предпосылки

Для продолжения убедитесь, что у вас установлены следующие инструменты, а знакомство со стеками также улучшит ваше понимание:

• NodeJs
• NextJs
• Попутный ветер CSS
• Машинопись
• Докер (обязательно)

В этой серии из трех частей будут рассмотрены следующие темы:

• Часть 1: Настройка проекта — тестовая сеть Zen Renterd, установка пакетов и переменные среды.
• Часть 2: Разработка бэкэнда — создание бэкэнд-сервиса
• Часть 3: Разработка фронтенда — интеграция фронтенда с бэкенд-сервисом.

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

С учетом вышесказанного, давайте приступим к настройке этого проекта.

Настройка проекта – Часть 1

Начнем с клонирования подготовленного репозитория, включающего скрипт Sia Renterd docker compose и службы backend и frontend. Выполните следующие команды:

 $ git clone https://github.com/Daltonic/sia_vid_tv $ cd sia_vid_tv

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

 $ git checkout 01_starter_branch

Далее давайте настроим связанную переменную среды для этой службы Renterd. Создайте файл .env в корне этого проекта и примените ключи ниже:

 RENTERD_SEED=<RENTERD_SEED_PHRASE> RENTERD_API_PASSWORD=<YOUR_PREFERED_PASSWORD> RENTERD_LOG_LEVEL=debug RENTERD_LOG_DATABASE_LEVEL=error

Чтобы получить эти ключи API, вам необходимо установить Sia Renterd на вашем компьютере; посмотрите короткое видео ниже, в котором все подробно изложено.

Сгенерируйте начальную фразу с помощью приложения Renterd, как показано в видео выше, и включите ее в переменную среды, как указано в видео выше. Замените пароль на то, что вы можете легко запомнить.

Далее нам нужно установить Docker, загрузив его с официального сайта, если вы еще этого не сделали. В качестве альтернативы используйте бесплатную онлайн-платформу, например Gitpod или VPS для запуска экземпляра Docker, если это возможно. В противном случае установите его на локальном компьютере.

Наконец, мы можем запустить контейнер docker, выполнив следующую команду docker в корне этого проекта. Убедитесь, что терминал находится в том же каталоге, что и этот файл docker-compose.yml .

 $ docker compose -f "docker-compose.yml" up -d --build

Обратите внимание на команду для извлечения контейнера: $ docker compose -f "docker-compose.yml" down . Запустите ее, когда захотите завершить работу экземпляра Docker (но не сейчас).

Если вы правильно выполнили приведенные выше инструкции, то при посещении браузером адреса http://localhost:9880 вы должны увидеть интерфейс, показанный ниже.

Введите свой пароль (из переменной среды) для входа в систему. Затем следуйте процедуре настройки, показанной в видео ниже, чтобы настроить экземпляр Sia Renterd для загрузки, скачивания и потоковой передачи файлов.

Видео выше начинается с отметки 6:41 минуты, пожалуйста, остановитесь на отметке 20:01 , эта часть наглядно проведет вас через процесс настройки Renterd.

Обратите внимание, что процесс синхронизации блокчейна, а также сопоставление хостов, занимает до 25 min , поэтому вам придется запастись терпением на протяжении всего процесса.

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

Удивительно. На этом этапе наша служба Renterd готова начать получать файлы, но нам нужно взаимодействовать с ней программно.

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

Настройка бэкэнд-проекта Выполните следующие инструкции, чтобы установить пакеты бэкэнд-сервисов и подготовить их к дальнейшей разработке.

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

 $ cd backend $ yarn install #you can also use npm install $ touch .env #or mannually create it at the root of the backend directory

Далее введите следующую информацию в переменные среды.

 SIA_API_BUCKET=vidtv SIA_API_PASSWORD=<YOUR_PREFERED_PASSWORD> SIA_API_BASE_URL=http://localhost:9880 ORIGIN=http://localhost:9000 PORT=9000

А теперь запустите $ yarn build && yarn start чтобы запустить бэкэнд и убедиться, что он не содержит никаких ошибок.

Настройка проекта фронтенда Наконец, выполните следующие команды для установки пакетов, связанных с фронтендом. После этого мы запустим его.

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

 $ cd frontend $ yarn install #you can also use npm install $ touch .env #or mannually create it at the root of the backend directory

Далее введите следующую информацию в переменные среды.

 NEXT_PUBLIC_PROJECT_ID=<YOUR_WALLET_CONNECT_ID> NEXT_PUBLIC_FILE_SERVICE_URL=http://localhost:9000

Зарегистрируйтесь и создайте проект с помощью Walletconnect , чтобы получить свой идентификатор проекта. После того, как вы указали идентификатор проекта в переменной среды, запустите $ yarn build && yarn start чтобы раскрутить бэкэнд и убедиться, что он не содержит никаких ошибок.

На этом этапе при посещении браузера по адресу http://localhost:3000 вы увидите интерфейс, показанный ниже.

Следующий шаг Поздравляем с достижением этого рубежа! Перейдите к Части 2 , чтобы завершить разработку бэкэнд-сервиса.

Бэкэнд-сервис – Часть 2

Добро пожаловать обратно! Пожалуйста, прочитайте Часть 1, если вы еще этого не сделали. Теперь давайте погрузимся в Часть 2: Создание бэкэнд-сервиса для нашей платформы потокового видео web3.

Мы предоставили стартовый код для бэкэнда, который в настоящее время отображает сообщение «Добро пожаловать» при запуске сервера и посещении http://localhost:9000 в вашем браузере. Давайте строить на этой основе.

В настоящее время эти коды находятся в исходном каталоге бэкенда. Позвольте мне вкратце объяснить их вам.

Файлы служебных программ Эта папка, которая полностью адресуется как backend/src/utils содержит два основных файла: функцию обработчика исключений HTTP и интерфейс для обработки информации о загрузке файлов.

Этот код определяет пользовательский класс HttpException , который расширяет встроенный класс JavaScript Error , позволяя создавать экземпляры ошибок с определенными кодами состояния HTTP и сообщениями.

https://gist.github.com/Daltonic/bb37e1d4c5f84bc9c10fcbb8c3e19621

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

https://gist.github.com/Daltonic/64fb31bf3b19668a17d14f59e087a77e

А затем в корневой папке backend/src у нас есть файл index.ts , который настраивает сервер Express.js с CORS и поддержкой загрузки файлов, определяет один маршрут GET, который возвращает сообщение «Welcome» и обрабатывает ошибки, перехватывая и повторно выдавая их как пользовательские исключения HttpException, а затем запускает сервер на порту 9000, как указано в переменных среды.

https://gist.github.com/Daltonic/8d76c3a212681d7bfe89b0792b0e707f

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

Файлы обслуживания

В папке backend/src создайте новую папку с названием services . В ней мы создадим две службы:

1. Служба Sia : управляет загрузкой, скачиванием, потоковой передачей и кэшированием файлов, взаимодействуя со службой Renterd.
2. Фоновая служба : управляет кэшированными файлами, автоматически удаляя их каждые 7 дней в полночь ежедневно.

Служба Sia

Давайте создадим файл с именем sia.service.ts в папке backend/src/services и выполним следующие шаги, чтобы сформулировать эту службу.

Этот код определяет класс SiaService , который инициализируется с переменными среды для настроек API Sia и исходного URL, предоставляя основу для управления взаимодействиями со службой Sia. Теперь давайте предоставим остальные коды для этой службы.

Загрузка файлов в Sia Renterd Чтобы загрузить файлы в сеть Sia, нам потребуется добавить в класс эти три метода: два будут закрытыми, а один — открытым.

Этот код определяет закрытый метод generateRandomString , который генерирует случайную строку указанной длины, состоящую из заглавных и строчных букв и цифр, используя цикл для случайного выбора символов из предопределенной строки. Мы будем использовать его для уникального переименования каждого файла перед отправкой файла в Renterd.

Приведенный выше код определяет закрытый метод uploadToSiaService , который загружает файл в Sia Renterd с помощью Axios, обрабатывает ход загрузки и ошибки, а также возвращает ответ Axios или выдает ошибку в случае сбоя загрузки.

Конечные точки Renterd описаны в документации API, с которой вы можете ознакомиться или посмотреть видео ниже, где я объяснил, как работает документация API Renterd Sia.

Теперь давайте включим публичный метод, который позже мы представим как конечную точку в нашем приложении.

Этот код определяет публичный метод uploadFile , который загружает файл, генерируя уникальный идентификатор, сохраняя файл в локальном кэше, а затем загружая его в Sia Renterd, возвращая URL-адрес файла и сообщение об успешном завершении или выдавая ошибку в случае сбоя загрузки.

Загрузка файлов в Sia Renterd Чтобы загрузить файлы в сеть Sia, нам потребуется добавить в класс два метода: один будет закрытым, а другой — открытым.

Этот код определяет закрытый метод downloadFromSiaService , который извлекает файл из службы Sia, кэширует его локально и возвращает читаемый поток файла, обрабатывая ошибки и возвращая изображение 404, если файл не найден.

Давайте сделаем эти response_files доступными в каталоге backend, иначе мы столкнемся с ошибкой при вызове файла 404.png . В каталоге backend создайте еще одну папку с именем response_files и скопируйте в нее следующие изображения.

Отлично, теперь давайте завершим этот сервис загрузки файлов. Также добавьте метод ниже в класс SiaService .

Этот код определяет открытый метод downloadFile , который вызывает закрытый метод downloadFromSiaService для извлечения файла из Sia Renterd и возвращает читаемый поток извлеченного файла.

Конечные точки обслуживания

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

Перейдите в файл backend/src/index.ts и обновите его содержимое, используя эти коды.

Этот код настраивает сервер Express.js с CORS и поддержкой загрузки файлов, определяя три конечные точки: приветственное сообщение, загрузку файла в сеть Sia и загрузку файла из сети Sia, используя класс SiaService для обработки файловых операций и HttpException для обработки ошибок.

Если вам нужна визуальная помощь, посмотрите этот фрагмент видео ниже. Обязательно остановитесь на отметке времени 01:50:44 .

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

Служба фоновой информации

Перейдите в папку backend/src/services , создайте файл с именем background.service.ts и добавьте в него следующие последовательности кода.

Этот код определяет класс BackgroundService , который устанавливает каталог кэша и планирует ежедневные задания с использованием библиотеки node-cron , инициализируя фоновые задания и регистрируя сообщение подтверждения. Давайте создадим метод, который будет отвечать за удаление файлов старше 7 дней в кэше.

Удаление старого файла Добавьте этот метод в класс BackgroundService .

Этот код определяет метод deleteOldFiles , который удаляет файлы из каталога кэша старше 7 дней, считывая содержимое каталога, проверяя время создания каждого файла, удаляя файлы, превышающие целевое время, регистрируя начало и конец задания, а также любые ошибки или успешные удаления.

Теперь давайте напишем функцию, которая будет использовать пакет node-cron для планирования времени выполнения удаления файла.

Этот код настраивает ежедневное задание cron для запуска метода deleteOldFiles каждый день в полночь (00:00) для выполнения автоматической очистки файлов.

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

Отлично, наконец, давайте добавим эту фоновую операцию как часть процесса сервера при инициализации. Перейдите в файл backend/src/index.ts и обновите метод прослушивателя приложения, чтобы импортировать файл фоновой службы.

Вам следует повторно запустить команду бэкэнд-службы с помощью $ yarn build && yarn start и увидеть распечатку терминала, подобную той, что показана на рисунке ниже.

Если вы предпочитаете посмотреть, как я кодировал всю фоновую службу, видео ниже для вас; просто убедитесь, что вы остановились на временной отметке 02:16:07 .

Следующий шаг Поздравляем, теперь вы готовы к заключительной части этого урока — Части 3 .

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

Модальная аутентификация Web3 – Часть 3

Создайте новую папку с именем 'config' в каталоге Frontend и добавьте файл индекса, получив в результате путь /frontend/config/index.tsx . Теперь давайте добавим в него следующие коды.

Этот код устанавливает конфигурацию Wagmi для нашего приложения Web3, определяя метаданные, поддерживаемые цепочки и параметры аутентификации, включая параметры кошелька и входа в социальные сети, и сохраняет их в экспорте config . Нам также нужно создать контекстный API для отслеживания состояния аутентификации.

Context API Далее создайте новую папку с именем «context» в каталоге Frontend и добавьте файл индекса, получив в результате путь /frontend/context/index.tsx . Добавьте в него следующие коды.

Этот код настраивает поставщик Web3Modal с помощью Wagmi и React Query, настраивая модальное окно Web3 с идентификатором проекта и переменными темы, а также оборачивая приложение в WagmiProvider и QueryClientProvider.

Обновление макета : Давайте обновим макет нашего приложения, включив в него указанные выше конфигурации. Перейдите в /frontend/app/layout.tsx и замените его коды на приведенные ниже.

Приведенный выше код настраивает корневой макет для приложения Next.js, включая метаданные, шрифты, стили и поставщиков для модальных окон Web3, всплывающих уведомлений и компонентов макета, таких как верхний и нижний колонтитулы.

Кнопка входа Теперь нам нужно включить кнопки входа в компоненты /frontend/app/components/layout/Header.tsx и /frontend/app/components/shared/Menu.tsx и обновить их коды, используя информацию ниже.

Этот код определяет компонент React для панели навигации, которая включает логотип, навигационные ссылки, настраиваемое меню и кнопку входа в систему, которая запускает модальное окно Web3 с адаптивным дизайном для разных размеров экрана.

Следующие изображения должны появиться в качестве доказательства того, что то, что мы сделали, работает, когда вы нажмете кнопку входа и продолжите с помощью своего предпочитаемого провайдера: X, Facebook, Google, Discord или Ethereum.

Великолепно, давайте углубимся и настроим нашу базу данных и систему на основе API NextJs. Если у вас возникли какие-либо затруднения в процессе, посмотрите видеораздел ниже; просто убедитесь, что вы остановились на отметке 02:57:59 .

Скрипты базы данных

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

Этот код определяет объект конфигурации Next.js, который настраивает перезапись маршрутов API и оптимизацию изображений, позволяя получать удаленные изображения с любого имени хоста HTTPS и локальные изображения из домена localhost.

Скрипт конфигурации базы данных Мы будем использовать SQLite для этого приложения, но вы можете использовать более надежное решение, например, провайдеров MYSQL или NOSQL. Для простоты давайте работать с плоским файлом SQLite.

Создайте путь к файлу /frontend/app/api/database.ts и добавьте в него приведенные ниже коды.

Этот код устанавливает соединение с базой данных SQLite, определяет две функции API, apiGet и apiPost , для выполнения запросов GET и POST к базе данных с обработкой ошибок и асинхронным выполнением на основе обещаний. Мы будем использовать эти коды всякий раз, когда захотим отправить или получить данные из базы данных.

Скрипт миграции базы данных Нам нужно создать как плоский файл базы данных, так и таблицу для хранения всего нашего содержимого. Создайте путь к файлу /frontend/app/api/migrations.ts и добавьте в него коды ниже.

Этот код определяет функцию миграции базы данных, которая создает таблицу 'movies' с указанными столбцами, если она не существует, используя SQLite, и регистрирует результат операции. Теперь выполните команду ниже в терминале, указывающем на каталог /frontend .

 $ cd frontend $ npx esrun app/api/migrations.ts

Следует отметить, что этот процесс также создаст плоский файл базы данных с именем movies.db в корне каталога frontend. Мы также добавили эту команду в скрипт package.json, поэтому запуск $ yarn migrate в каталоге frontend должен работать так же.

Для наглядности посмотрите видео ниже, просто остановите его на отметке 03:10:54 .

Конечные точки приложений

Теперь давайте определим некоторые конечные точки для создания, чтения, обновления и удаления фильмов. Мы будем использовать API-обеспечение NextJs для создания этих конечных точек.

Создать конечную точку фильма Для создания фильма необходимая информация включает идентификатор пользователя, название фильма, изображение, URL-адрес видео, дату выпуска, жанр, рейтинг, язык, продолжительность и описание фона. Создайте путь к файлу /frontend/app/api/movies/create/route.ts и добавьте в него коды ниже.

Этот код определяет конечную точку для обработки POST-запросов, проверки и обработки данных фильмов, генерации уникального слага и вставки данных в базу данных с помощью функции apiPost, одновременно обрабатывая ошибки и возвращая ответы JSON.

Обновление конечной точки фильма Для обновления фильма необходимая информация включает идентификатор пользователя, слаг и другую информацию, предоставленную при создании фильма. Создайте путь к файлу /frontend/app/api/movies/update/route.ts и добавьте в него коды ниже.

Этот код определяет конечную точку для обработки POST-запросов на обновление фильма, проверки требуемых свойств и выполнения SQL-запроса для обновления данных фильма в базе данных с помощью функции apiPost.

Удалить конечную точку фильма Чтобы удалить фильм, необходимая информация включает идентификатор пользователя и слаг фильма. Создайте путь к файлу /frontend/app/api/movies/delete/route.ts и добавьте в него коды ниже.

Этот код определяет конечную точку для обработки POST-запросов на удаление фильма, проверки требуемых свойств (userId и slug) и выполнения SQL-запроса для удаления фильма из базы данных с помощью функции apiPost.

Все фильмы Конечная точка Необязательные данные, необходимые для получения фильмов, — это pageSize и userId, которые можно передавать как параметры запроса для фильтрации и разбиения результатов на страницы. Создайте путь к файлу /frontend/app/api/movies/all/route.ts и добавьте в него коды ниже.

Приведенный выше код определяет конечную точку для обработки запросов GET на получение фильмов, допуская дополнительную фильтрацию по userId и разбиение на страницы по pageSize, а также возвращает результаты в формате JSON.

Конечная точка одного фильма Для получения одного фильма требуемые данные — это слаг фильма. Создайте путь к файлу /frontend/app/api/movies/[slug]/route.ts и добавьте в него коды ниже.

Этот код определяет конечную точку для обработки запросов GET на извлечение фильма по его слагу, проверки параметра слага и выполнения SQL-запроса для извлечения данных фильма из базы данных с помощью функции apiGet.

Это отмечает все конечные точки, которые нам понадобятся для этого приложения. Если вам нужна визуальная помощь, чтобы лучше понять эти конечные точки, пожалуйста, посмотрите видео ниже, просто убедитесь, что вы остановились на временной метке 03:48:22 .

Интеграция конечных точек

Наша задача — просмотреть и обновить предварительно закодированные компоненты и страницы, объяснив назначение и функциональность каждого из них и задокументировав изменения, которые мы вносим в существующий код. Мы начнем с создания сервиса для взаимодействия с конечными точками, которые мы ранее создали в каталоге api .

Создайте путь к файлу /frontend/app/services/api.service.ts и добавьте в него приведенные ниже коды.

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

Страницы приложений

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

Создать страницу фильма

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

Теперь обновите файл, находящийся в /frontend/app/pages/create/page.tsx , используя коды ниже.

Изменения, внесенные в этот код по сравнению с исходным, следующие:

1. Импортировал функцию createMovie из api.service и использовал ее в функции handleSubmit для создания нового фильма.
2. Добавлен параметр userId в вызов функции createMovie , передающий адрес пользователя из хука useAccount .
3. Обновлена функция handleSubmit для использования toast.promise для обработки обещания, возвращаемого createMovie .
4. Добавлена обработка ошибок в вызов функции createMovie в функции handleSubmit .

Эти изменения позволяют форме отправлять данные о фильмах в API и создавать новую запись о фильме, одновременно обрабатывая ошибки и отображая сообщение об успешном выполнении.

Редактировать страницу фильма

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

Теперь обновите файл, найденный в /frontend/app/pages/movies/edit/[slug]/page.tsx , используя коды ниже.

Изменения, внесенные в код и отличающиеся от оригинала:

1. Импортировал функции fetchMovie и updateMovie из @/app/services/api.service и использовал их в хуке useEffect и функции handleSubmit соответственно.
2. Метод posters.find() заменен функцией fetchMovie для извлечения данных о фильмах.
3. Обновлена функция handleSubmit для вызова функции updateMovie с обновленными сведениями о фильме.
4. Добавлена обработка ошибок в вызов функции updateMovie в функции handleSubmit .

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

Домашняя страница

На этой домашней странице отображается компонент баннеров, список фильмов (из источника API или пользовательского интерфейса загрузки) и параметры подписки с использованием React и Next.js, что позволяет создать привлекательную и информативную целевую страницу для пользователей.

Обновите файл, найденный в /frontend/app/pages/page.tsx , используя следующие коды.

Изменения, которые мы внесли на домашнюю страницу:

1. Импортировали функцию fetchMovies из ./services/api.service и использовали ее в хуке useEffect для извлечения данных о фильмах из нашего API.
2. Заменили данные локальных posters вызовом функции fetchMovies , которая извлекает данные из нашего API.
3. Добавлено ключевое слово await для ожидания разрешения обещания, возвращаемого fetchMovies , перед установкой состояния movies .

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

Страница учетной записи пользователя

На этой странице отображается список фильмов, опубликованных подключенным в данный момент пользователем, с заполнителем скелета загрузки во время загрузки данных и сообщением, предлагающим пользователю подключить свою учетную запись, если он этого еще не сделал, с помощью Wagmi и react-loading-skeleton.

Обновите файл, находящийся в /frontend/app/pages/account/page.tsx , используя следующие коды.

Изменения, внесенные на страницу:

1. Импортировали функцию fetchMovies из @/app/services/api.service и использовали ее в хуке useEffect для извлечения данных о фильмах из нашего API.
2. Заменили данные локальных posters вызовом функции fetchMovies , которая извлекает данные из нашего API.
3. address передается в качестве аргумента функции fetchMovies для извлечения данных о фильме, специфичных для пользователя.
4. Удалена условная проверка address перед отображением списка фильмов, так как теперь эту логику обрабатывает функция fetchMovies .
5. Упрощен условный оператор для отображения скелета загрузки, так как теперь он зависит только от loaded состояния.

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

Страница с подробностями фильмов

На этой странице отображаются сведения об одном фильме, включая его название, год выпуска, рейтинг, продолжительность, жанр и дополнительную информацию, а также видеоплеер и связанные с ним фильмы, а также предоставляются возможности редактирования или удаления фильма, если пользователь является его владельцем, с использованием Next.js и Wagmi.

Обновите файл, найденный в /frontend/app/pages/movies/[slug]/page.tsx , используя следующие коды.

Мы внесли здесь огромные изменения! Вот краткое изложение того, что мы сделали:

1. Импортировали функции deleteMovie , fetchMovie и fetchMovies из @/app/services/api.service и использовали их для взаимодействия с нашими конечными точками API.
2. Локальные данные заменены вызовами API для извлечения данных фильмов.
3. Реализована возможность удаления фильмов с помощью функции deleteMovie .
4. Использовал toast.promise для отображения уведомления при удалении фильма.
5. Удалены локальные данные posters и заменены вызовами API.
6. Обновлена функция handleSubmit для вызова функции deleteMovie и обработки ответа.
7. Обновлен хук useEffect для вызова функций fetchMovie и fetchMovies .

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

Эта часть видео ниже покажет вам на практике, как мы интегрировали эти страницы с конечной точкой, пожалуйста, не стесняйтесь смотреть эту часть, если у вас возникнут какие-либо проблемы. Просто убедитесь, что вы остановились на временной метке 04:57:41 .

Компоненты приложения

Давайте обсудим назначение каждого компонента в нашем приложении. Мы обновим любой компонент, который необходимо изменить.

Компонент баннера

Этот компонент отображает вращающееся фоновое изображение баннеров фильмов, циклически прокручивая массив изображений фильмов каждые 5 секунд, создавая простой и автоматический эффект слайд-шоу. Код этого компонента можно оценить по адресу /frontend/app/components/home/Banner.tsx .

Компонент плакатов

Этот компонент отображает адаптивную и интерактивную карусель постеров фильмов с использованием библиотеки Swiper с такими функциями, как автовоспроизведение, разбиение на страницы и навигация, демонстрируя список фильмов, переданных в качестве реквизита, с динамическим макетом, адаптирующимся к разным размерам экрана. Код этого компонента можно оценить по адресу /frontend/app/components/home/Posters.tsx .

Компонент пользовательского интерфейса постера

Этот компонент отображает макет скелета-заполнителя для раздела постеров фильмов, используя библиотеку react-loading-skeleton, показывая динамическое количество скелетов постеров на основе реквизита "posters", с адаптивным дизайном, адаптирующимся к разным размерам экрана, указывая состояние загрузки до тех пор, пока фактические данные постеров не будут извлечены и отображены. Этот код компонента можно оценить по адресу /frontend/app/components/home/PosterUI.tsx .

Компонент подписки

Этот компонент отображает раздел планов подписки, демонстрируя различные фиктивные планы с их подробностями, ценами и преимуществами. Он позволяет пользователям выбирать план, который соответствует их потребностям, используя адаптивную сетку и интерактивные эффекты наведения для улучшения пользовательского опыта. Код этого компонента можно оценить по адресу /frontend/app/components/home/Subscription.tsx .

Компонент заголовка

Этот компонент отображает фиксированную панель навигации в верхней части страницы, содержащую логотип, навигационное меню со ссылками на различные разделы, кнопку переключения меню для адаптивного дизайна и кнопку входа, обеспечивая последовательный и доступный раздел заголовка во всем приложении. Код этого компонента можно оценить по адресу /frontend/app/components/layout/Header.tsx .

Компонент нижнего колонтитула

Этот компонент отображает раздел нижнего колонтитула в нижней части страницы, содержащий логотип приложения, краткое описание, навигационные ссылки, контактную информацию и кредит, упоминающий децентрализованное решение для хранения данных, поддерживаемое Sia Foundation, предоставляя понятный и организованный раздел нижнего колонтитула с соответствующей информацией и ссылками. Этот код компонента можно оценить по адресу /frontend/app/components/layout/Footer.tsx .

Компонент меню

Этот компонент отображает адаптивную кнопку переключения меню, которая при нажатии открывает или закрывает раскрывающееся меню, содержащее навигационные ссылки, позволяя пользователям получать доступ к различным разделам приложения на меньших экранах, скрывая меню на больших экранах, где навигационные ссылки уже видны. Код этого компонента можно оценить по адресу /frontend/app/components/shared/Menu.tsx .

Компонент карты фильма

Этот компонент отображает постер одного фильма с эффектом наведения, показывая дополнительную информацию, такую как название фильма, год выпуска и краткое описание, а также служит ссылкой на страницу с подробностями фильма, используя адаптивный дизайн и анимированные переходы для улучшения пользовательского опыта. Код этого компонента можно оценить по адресу /frontend/app/components/shared/MovieCard.tsx .

Загруженный компонент

Этот компонент отображает предварительный просмотр загруженного файла, изображения или видео, с полосой прогресса и кнопкой удаления, позволяя пользователям просматривать и удалять загруженный файл, а также предоставляя визуально привлекательный и интерактивный интерфейс с анимацией и эффектами наведения. Этот код компонента можно оценить по адресу /frontend/app/components/shared/Uploaded.tsx .

Компонент загрузчика

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

Обновите файл, найденный в /frontend/app/components/shared/uploader.tsx , используя следующие коды.

Изменения, внесенные в этот компонент, следующие:

1. Функциональность загрузки файла : в исходном коде не была реализована фактическая функциональность загрузки файла. Он только показывал всплывающее уведомление об успешной загрузке без загрузки файла. Этот обновленный код включает функцию uploadFile из api.service , которая обрабатывает загрузку файла.
2. Отслеживание хода выполнения : обновленный код отслеживает ход загрузки и отображает его в пользовательском интерфейсе.
3. Обработка ошибок : обновленный код включает обработку ошибок в процессе загрузки файлов.
4. Проверка типа файла : обновленный код использует более надежную проверку типа файла с использованием регулярного выражения.
5. Организация кода : обновленный код лучше организован, с отдельными функциями для обработки различных задач, что упрощает его чтение и поддержку.
6. Обновления пользовательского интерфейса : обновленный код включает некоторые обновления пользовательского интерфейса, такие как отображение хода загрузки и кнопка отмены во время загрузки.

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

В представленном ниже видео более подробно объясняется, что делает каждый компонент. Посмотрите его для вашего удобства.

И вот, ребята, мы завершили этот проект, и последний шаг, который нам нужно сделать, это запустить этот проект в браузере. Запустите $ yarn build && yarn start , чтобы увидеть проект в реальном времени в браузере.

Если у вас возникнут какие-либо проблемы, обратитесь к следующим ресурсам для устранения неполадок. До следующего раза, всего наилучшего!

• 🏠 Сайт Sia
• 🔥 Sia Renterd
• 👨‍💻 API Sia Renterd
• 🚀 Sia Discord Канал
• 💡 Видео плейлист YouTube

Об авторе

Я разработчик web3 и основатель Dapp Mentors , компании, которая помогает компаниям и частным лицам создавать и запускать децентрализованные приложения. У меня более 8 лет опыта работы в индустрии программного обеспечения, и я увлечен использованием технологии блокчейн для создания новых и инновационных приложений. Я веду канал на YouTube под названием Dapp Mentors, где делюсь руководствами и советами по разработке web3, а также регулярно публикую статьи в Интернете о последних тенденциях в сфере блокчейна.