Введение Интернет развивается, и технологии Web3 революционизируют традиционные отрасли, включая потоковое видео. Такие платформы, как лидируют, предлагая децентрализованные альтернативы YouTube и Rumble. Аналогичным образом, в отличие от традиционных поставщиков, таких как Google Drive и Dropbox, трансформирует хранение данных, предоставляя подход, ориентированный на конфиденциальность и пользователя. Odysee, Sia с использованием NextJs, TypeScript, Tailwind CSS и Sia Renterd. Эта серия руководств поможет вам создать децентрализованное приложение, которое использует технологию блокчейна Sia для обеспечения владения данными пользователя и конфиденциальности. Присоединяйтесь к нам в путешествии по созданию передового Web3-видеостриминга dApp К концу этого урока вы приобретете навыки, позволяющие: Создайте полнофункциональную платформу потокового вещания фильмов, чтобы делиться ею с друзьями или использовать ее в качестве школьного проекта. Запустите собственное SaaS-приложение (программное обеспечение как услуга) Раскройте потенциал технологий Web3 в индустрии потокового видео чтобы увидеть проект в действии, и , чтобы получать больше подобного инновационного контента! Посмотрите демонстрационное видео ниже, подпишитесь на наш канал https://www.youtube.com/watch?v=Hgfdesry8Ss&embedable=true Предпосылки Для продолжения убедитесь, что у вас установлены следующие инструменты, а знакомство со стеками также улучшит ваше понимание: NodeJs NextJs Попутный ветер CSS Машинопись Докер (обязательно) В этой серии из трех частей будут рассмотрены следующие темы: — тестовая сеть Zen Renterd, установка пакетов и переменные среды. Часть 1: Настройка проекта — создание бэкэнд-сервиса Часть 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 на вашем компьютере; посмотрите короткое видео ниже, в котором все подробно изложено. https://www.youtube.com/watch?v=78XCHGWZwhA&embedable=true Сгенерируйте начальную фразу с помощью приложения Renterd, как показано в видео выше, и включите ее в переменную среды, как указано в видео выше. Замените пароль на то, что вы можете легко запомнить. Далее нам нужно установить Docker, если вы еще этого не сделали. В качестве альтернативы используйте бесплатную онлайн-платформу, например или VPS для запуска экземпляра Docker, если это возможно. В противном случае установите его на локальном компьютере. загрузив его с официального сайта, Gitpod Наконец, мы можем запустить контейнер docker, выполнив следующую команду docker в корне этого проекта. Убедитесь, что терминал находится в том же каталоге, что и этот файл . docker-compose.yml $ docker compose -f "docker-compose.yml" up -d --build Обратите внимание на команду для извлечения контейнера: . Запустите ее, когда захотите завершить работу экземпляра Docker (но не сейчас). $ docker compose -f "docker-compose.yml" down Если вы правильно выполнили приведенные выше инструкции, то при посещении браузером адреса вы должны увидеть интерфейс, показанный ниже. http://localhost:9880 Введите свой пароль (из переменной среды) для входа в систему. Затем следуйте процедуре настройки, показанной в видео ниже, чтобы настроить экземпляр Sia Renterd для загрузки, скачивания и потоковой передачи файлов. https://www.youtube.com/watch?v=ZJ8YWdVTWUA&t=401s&embedable=true Видео выше начинается с отметки минуты, пожалуйста, остановитесь на отметке , эта часть наглядно проведет вас через процесс настройки Renterd. 6:41 20:01 Обратите внимание, что процесс синхронизации блокчейна, а также сопоставление хостов, занимает до , поэтому вам придется запастись терпением на протяжении всего процесса. 25 min Пожалуйста, создайте новый контейнер на Renterd под названием , где будут храниться все наши файлы для этого проекта. Если вы успешно выполнили приведенные выше инструкции, ваш узел Renterd должен быть готов к загрузке и скачиванию. Смотрите изображение ниже. vidtv Удивительно. На этом этапе наша служба 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 В настоящее время эти коды находятся в исходном каталоге бэкенда. Позвольте мне вкратце объяснить их вам. Эта папка, которая полностью адресуется как содержит два основных файла: функцию обработчика исключений HTTP и интерфейс для обработки информации о загрузке файлов. Файлы служебных программ backend/src/utils Этот код определяет пользовательский класс , который расширяет встроенный класс JavaScript , позволяя создавать экземпляры ошибок с определенными кодами состояния HTTP и сообщениями. HttpException Error https://gist.github.com/Daltonic/bb37e1d4c5f84bc9c10fcbb8c3e19621 Этот код определяет интерфейс , который представляет загруженный файл, указывая его свойства, такие как имя, данные, размер, кодировку и т. д., обеспечивая структурированный способ обработки загрузок файлов в этом внутреннем приложении. FileUpload https://gist.github.com/Daltonic/64fb31bf3b19668a17d14f59e087a77e А затем в корневой папке у нас есть файл , который настраивает сервер Express.js с CORS и поддержкой загрузки файлов, определяет один маршрут GET, который возвращает сообщение «Welcome» и обрабатывает ошибки, перехватывая и повторно выдавая их как пользовательские исключения HttpException, а затем запускает сервер на порту 9000, как указано в переменных среды. backend/src index.ts https://gist.github.com/Daltonic/8d76c3a212681d7bfe89b0792b0e707f Теперь, когда мы рассмотрели ключевые файлы, давайте создадим два новых файла в папке , каждый из которых будет служить определенной цели в нашем приложении. services Файлы обслуживания В папке создайте новую папку с названием . В ней мы создадим две службы: backend/src services : управляет загрузкой, скачиванием, потоковой передачей и кэшированием файлов, взаимодействуя со службой Renterd. Служба Sia : управляет кэшированными файлами, автоматически удаляя их каждые 7 дней в полночь ежедневно. Фоновая служба Служба Sia Давайте создадим файл с именем в папке и выполним следующие шаги, чтобы сформулировать эту службу. sia.service.ts backend/src/services https://gist.github.com/Daltonic/a82a0c1cf8d3e7b31702b66eeead3718?embedable=true Этот код определяет класс , который инициализируется с переменными среды для настроек API Sia и исходного URL, предоставляя основу для управления взаимодействиями со службой Sia. Теперь давайте предоставим остальные коды для этой службы. SiaService Чтобы загрузить файлы в сеть Sia, нам потребуется добавить в класс эти три метода: два будут закрытыми, а один — открытым. Загрузка файлов в Sia Renterd https://gist.github.com/Daltonic/ddf74dffc5ac1005585f7ae3ad55c286?embedable=true Этот код определяет закрытый метод , который генерирует случайную строку указанной длины, состоящую из заглавных и строчных букв и цифр, используя цикл для случайного выбора символов из предопределенной строки. Мы будем использовать его для уникального переименования каждого файла перед отправкой файла в Renterd. generateRandomString https://gist.github.com/Daltonic/e6a82ac4af9eca9c881f4e0bdd1d682b?embedable=true Приведенный выше код определяет закрытый метод , который загружает файл в Sia Renterd с помощью Axios, обрабатывает ход загрузки и ошибки, а также возвращает ответ Axios или выдает ошибку в случае сбоя загрузки. uploadToSiaService Конечные точки Renterd описаны в документации API, с которой вы можете ознакомиться или посмотреть видео ниже, где я объяснил, как работает документация API Renterd Sia. https://www.youtube.com/watch?v=zOmUMz0DBQM&embedable=true Теперь давайте включим публичный метод, который позже мы представим как конечную точку в нашем приложении. https://gist.github.com/Daltonic/ce565350160a39c4d9f0abc0b7e7dc26?embedable=true Этот код определяет публичный метод , который загружает файл, генерируя уникальный идентификатор, сохраняя файл в локальном кэше, а затем загружая его в Sia Renterd, возвращая URL-адрес файла и сообщение об успешном завершении или выдавая ошибку в случае сбоя загрузки. uploadFile Чтобы загрузить файлы в сеть Sia, нам потребуется добавить в класс два метода: один будет закрытым, а другой — открытым. Загрузка файлов в Sia Renterd https://gist.github.com/Daltonic/b401e92d510ffddc8a0b7301d526f702?embedable=true Этот код определяет закрытый метод , который извлекает файл из службы Sia, кэширует его локально и возвращает читаемый поток файла, обрабатывая ошибки и возвращая изображение 404, если файл не найден. downloadFromSiaService Давайте сделаем эти response_files доступными в каталоге backend, иначе мы столкнемся с ошибкой при вызове файла . В каталоге создайте еще одну папку с именем и скопируйте в нее следующие изображения. 404.png backend response_files Отлично, теперь давайте завершим этот сервис загрузки файлов. Также добавьте метод ниже в класс . SiaService https://gist.github.com/Daltonic/1f1a99c82d5b15693eaa2d8d2482f6c2?embedable=true Этот код определяет открытый метод , который вызывает закрытый метод для извлечения файла из Sia Renterd и возвращает читаемый поток извлеченного файла. downloadFile downloadFromSiaService Конечные точки обслуживания Пришло время связать эти различные методы с соответствующими конечными точками, в настоящее время у нас есть только один, но нам понадобятся еще два для загрузки и скачивания файлов. Потоковая передача файлов также будет использовать конечную точку загрузки. Перейдите в файл и обновите его содержимое, используя эти коды. backend/src/index.ts https://gist.github.com/Daltonic/c8dec40acbc47b2582c651e04fae432f?embedable=true Этот код настраивает сервер Express.js с CORS и поддержкой загрузки файлов, определяя три конечные точки: приветственное сообщение, загрузку файла в сеть Sia и загрузку файла из сети Sia, используя класс SiaService для обработки файловых операций и HttpException для обработки ошибок. Если вам нужна визуальная помощь, посмотрите этот фрагмент видео ниже. Обязательно остановитесь на отметке времени . 01:50:44 https://www.youtube.com/watch?v=ZJ8YWdVTWUA&t=3795&si=A6fF8n8Pd92i6weM&embedable=true Нам нужно создать службу управления кэшем, чтобы гарантировать, что наш сервер не будет заполнен неиспользуемыми файлами, контролируя, как долго файлы остаются в кэше. Важно знать, что единственная причина, по которой нам нужна эта служба, — это сокращение . задержки данных Служба фоновой информации Перейдите в папку , создайте файл с именем и добавьте в него следующие последовательности кода. backend/src/services background.service.ts https://gist.github.com/Daltonic/bc62ccefd72cec85772dedd311afbffd?embedable=true Этот код определяет класс , который устанавливает каталог кэша и планирует ежедневные задания с использованием библиотеки , инициализируя фоновые задания и регистрируя сообщение подтверждения. Давайте создадим метод, который будет отвечать за удаление файлов старше 7 дней в кэше. BackgroundService node-cron Добавьте этот метод в класс . Удаление старого файла BackgroundService https://gist.github.com/Daltonic/43da392512b88b6abf068be62d14eb7e?embedable=true Этот код определяет метод , который удаляет файлы из каталога кэша старше 7 дней, считывая содержимое каталога, проверяя время создания каждого файла, удаляя файлы, превышающие целевое время, регистрируя начало и конец задания, а также любые ошибки или успешные удаления. deleteOldFiles Теперь давайте напишем функцию, которая будет использовать пакет node-cron для планирования времени выполнения удаления файла. https://gist.github.com/Daltonic/18b60b0bc1f7414a306f01f9087db435?embedable=true Этот код настраивает ежедневное задание cron для запуска метода каждый день в полночь (00:00) для выполнения автоматической очистки файлов. deleteOldFiles Нам также необходимо обновить функцию конструктора, чтобы планировать ежедневные задания при создании экземпляра класса фоновой службы. https://gist.github.com/Daltonic/5f608cd3793ff6deea56c262bdfbc395?embedable=true Отлично, наконец, давайте добавим эту фоновую операцию как часть процесса сервера при инициализации. Перейдите в файл и обновите метод прослушивателя приложения, чтобы импортировать файл фоновой службы. backend/src/index.ts https://gist.github.com/Daltonic/7966a7b27fa7eade2c6d1a7e60b2e530?embedable=true Вам следует повторно запустить команду бэкэнд-службы с помощью и увидеть распечатку терминала, подобную той, что показана на рисунке ниже. $ yarn build && yarn start Если вы предпочитаете посмотреть, как я кодировал всю фоновую службу, видео ниже для вас; просто убедитесь, что вы остановились на временной отметке . 02:16:07 https://www.youtube.com/watch?v=ZJ8YWdVTWUA&t=8167&si=4DZ27j0lqwufUgRf&embedable=true Поздравляем, теперь вы готовы к заключительной части этого урока — . Следующий шаг Части 3 Давайте погрузимся в заключительную часть этой серии руководств, где мы интегрируем бэкенд с фронтендом, соединяя части для завершения приложения загрузки файлов. Мы начнем с того, что убедимся, что аутентификации во фронтенде запущены и работают. Модальная аутентификация Web3 – Часть 3 Создайте новую папку с именем 'config' в каталоге Frontend и добавьте файл индекса, получив в результате путь . Теперь давайте добавим в него следующие коды. /frontend/config/index.tsx https://gist.github.com/Daltonic/38bbe9fa325fb793dd59136ebdea8b43?embedable=true Этот код устанавливает конфигурацию Wagmi для нашего приложения Web3, определяя метаданные, поддерживаемые цепочки и параметры аутентификации, включая параметры кошелька и входа в социальные сети, и сохраняет их в экспорте . Нам также нужно создать контекстный API для отслеживания состояния аутентификации. config Далее создайте новую папку с именем «context» в каталоге Frontend и добавьте файл индекса, получив в результате путь . Добавьте в него следующие коды. Context API /frontend/context/index.tsx https://gist.github.com/Daltonic/db7330a9159ff83727cda0a384fd907e?embedable=true Этот код настраивает поставщик Web3Modal с помощью Wagmi и React Query, настраивая модальное окно Web3 с идентификатором проекта и переменными темы, а также оборачивая приложение в WagmiProvider и QueryClientProvider. : Давайте обновим макет нашего приложения, включив в него указанные выше конфигурации. Перейдите в и замените его коды на приведенные ниже. Обновление макета /frontend/app/layout.tsx https://gist.github.com/Daltonic/2b54f191d56fa02f0ae3974bd8ffd11b?embedable=true Приведенный выше код настраивает корневой макет для приложения Next.js, включая метаданные, шрифты, стили и поставщиков для модальных окон Web3, всплывающих уведомлений и компонентов макета, таких как верхний и нижний колонтитулы. Теперь нам нужно включить кнопки входа в компоненты и и обновить их коды, используя информацию ниже. Кнопка входа /frontend/app/components/layout/Header.tsx /frontend/app/components/shared/Menu.tsx https://gist.github.com/Daltonic/f9f60e85c18da94a5bbc97d1acb3d423?embedable=true Этот код определяет компонент React для панели навигации, которая включает логотип, навигационные ссылки, настраиваемое меню и кнопку входа в систему, которая запускает модальное окно Web3 с адаптивным дизайном для разных размеров экрана. Следующие изображения должны появиться в качестве доказательства того, что то, что мы сделали, работает, когда вы нажмете кнопку входа и продолжите с помощью своего предпочитаемого провайдера: X, Facebook, Google, Discord или Ethereum. Великолепно, давайте углубимся и настроим нашу базу данных и систему на основе API NextJs. Если у вас возникли какие-либо затруднения в процессе, посмотрите видеораздел ниже; просто убедитесь, что вы остановились на отметке . 02:57:59 https://www.youtube.com/watch?v=ZJ8YWdVTUA&t=9305&si=OadhxKlut7o3iLl5&embedable=true Скрипты базы данных Сначала давайте обновим скрипт конфигурации NextJs, чтобы он правильно обращался к нашим страницам и конечным точкам и освободил наши удаленные изображения от предупреждений и проверок. https://gist.github.com/Daltonic/a4ecb4d168f8bb01cb8abb600653c4cf?embedable=true Этот код определяет объект конфигурации Next.js, который настраивает перезапись маршрутов API и оптимизацию изображений, позволяя получать удаленные изображения с любого имени хоста HTTPS и локальные изображения из домена localhost. Мы будем использовать SQLite для этого приложения, но вы можете использовать более надежное решение, например, провайдеров MYSQL или NOSQL. Для простоты давайте работать с плоским файлом SQLite. Скрипт конфигурации базы данных Создайте путь к файлу и добавьте в него приведенные ниже коды. /frontend/app/api/database.ts https://gist.github.com/Daltonic/b699c52587b28c2d9435827837019633?embedable=true Этот код устанавливает соединение с базой данных SQLite, определяет две функции API, и , для выполнения запросов GET и POST к базе данных с обработкой ошибок и асинхронным выполнением на основе обещаний. Мы будем использовать эти коды всякий раз, когда захотим отправить или получить данные из базы данных. apiGet apiPost Нам нужно создать как плоский файл базы данных, так и таблицу для хранения всего нашего содержимого. Создайте путь к файлу и добавьте в него коды ниже. Скрипт миграции базы данных /frontend/app/api/migrations.ts https://gist.github.com/Daltonic/4c213153fe53334fcf8444666587d6a5?embedable=true Этот код определяет функцию миграции базы данных, которая создает таблицу 'movies' с указанными столбцами, если она не существует, используя SQLite, и регистрирует результат операции. Теперь выполните команду ниже в терминале, указывающем на каталог . /frontend $ cd frontend $ npx esrun app/api/migrations.ts Следует отметить, что этот процесс также создаст плоский файл базы данных с именем в корне каталога frontend. Мы также добавили эту команду в скрипт package.json, поэтому запуск в каталоге frontend должен работать так же. movies.db $ yarn migrate Для наглядности посмотрите видео ниже, просто остановите его на отметке . 03:10:54 https://www.youtube.com/watch?v=ZJ8YWdVTUA&t=10679&si=-uhv8Zw0T3Gx0XgQ&embedable=true Конечные точки приложений Теперь давайте определим некоторые конечные точки для создания, чтения, обновления и удаления фильмов. Мы будем использовать API-обеспечение NextJs для создания этих конечных точек. Для создания фильма необходимая информация включает идентификатор пользователя, название фильма, изображение, URL-адрес видео, дату выпуска, жанр, рейтинг, язык, продолжительность и описание фона. Создайте путь к файлу и добавьте в него коды ниже. Создать конечную точку фильма /frontend/app/api/movies/create/route.ts https://gist.github.com/Daltonic/bf8a431ec00aa71491ae71781fb99278?embedable=true Этот код определяет конечную точку для обработки POST-запросов, проверки и обработки данных фильмов, генерации уникального слага и вставки данных в базу данных с помощью функции apiPost, одновременно обрабатывая ошибки и возвращая ответы JSON. Для обновления фильма необходимая информация включает идентификатор пользователя, слаг и другую информацию, предоставленную при создании фильма. Создайте путь к файлу и добавьте в него коды ниже. Обновление конечной точки фильма /frontend/app/api/movies/update/route.ts https://gist.github.com/Daltonic/2ed7d44cb8efe091675ebc0fc1bdf27c?embedable=true Этот код определяет конечную точку для обработки POST-запросов на обновление фильма, проверки требуемых свойств и выполнения SQL-запроса для обновления данных фильма в базе данных с помощью функции apiPost. Чтобы удалить фильм, необходимая информация включает идентификатор пользователя и слаг фильма. Создайте путь к файлу и добавьте в него коды ниже. Удалить конечную точку фильма /frontend/app/api/movies/delete/route.ts https://gist.github.com/Daltonic/aa7ab36b982ad1f377b2a4d26930dd8d?embedable=true Этот код определяет конечную точку для обработки POST-запросов на удаление фильма, проверки требуемых свойств (userId и slug) и выполнения SQL-запроса для удаления фильма из базы данных с помощью функции apiPost. Необязательные данные, необходимые для получения фильмов, — это pageSize и userId, которые можно передавать как параметры запроса для фильтрации и разбиения результатов на страницы. Создайте путь к файлу и добавьте в него коды ниже. Все фильмы Конечная точка /frontend/app/api/movies/all/route.ts https://gist.github.com/Daltonic/23bb2aa55446995dad87084bb7968c3e?embedable=true Приведенный выше код определяет конечную точку для обработки запросов GET на получение фильмов, допуская дополнительную фильтрацию по userId и разбиение на страницы по pageSize, а также возвращает результаты в формате JSON. Для получения одного фильма требуемые данные — это слаг фильма. Создайте путь к файлу и добавьте в него коды ниже. Конечная точка одного фильма /frontend/app/api/movies/[slug]/route.ts https://gist.github.com/Daltonic/64e069e9bafd026a83796eaa95334ac8?embedable=true Этот код определяет конечную точку для обработки запросов GET на извлечение фильма по его слагу, проверки параметра слага и выполнения SQL-запроса для извлечения данных фильма из базы данных с помощью функции apiGet. Это отмечает все конечные точки, которые нам понадобятся для этого приложения. Если вам нужна визуальная помощь, чтобы лучше понять эти конечные точки, пожалуйста, посмотрите видео ниже, просто убедитесь, что вы остановились на временной метке . 03:48:22 https://www.youtube.com/watch?v=ZJ8YWdVTWUA&t=10679&si=3Ynq9tNLx5SZXHBE&embedable=true Интеграция конечных точек Наша задача — просмотреть и обновить предварительно закодированные компоненты и страницы, объяснив назначение и функциональность каждого из них и задокументировав изменения, которые мы вносим в существующий код. Мы начнем с создания сервиса для взаимодействия с конечными точками, которые мы ранее создали в каталоге . api Создайте путь к файлу и добавьте в него приведенные ниже коды. /frontend/app/services/api.service.ts https://gist.github.com/Daltonic/fdf65c7ffaf3ea8219c617cdb7c96375?embedable=true Эта служба предоставляет набор функций для взаимодействия с базой данных фильмов, позволяя приложению извлекать фильмы, извлекать отдельные фильмы по ярлыку, создавать новые фильмы, обновлять существующие фильмы, удалять фильмы и загружать файлы с помощью запросов API и обработки ошибок. Страницы приложений Давайте рассмотрим и обновим различные страницы, связанные с нашим приложением. Вам не придется менять много вещей, только те, что выделены здесь. Создать страницу фильма Эта страница представляет собой форму публикации фильма, которая позволяет пользователям загружать видео- и графические файлы, вводить сведения о фильме и отправлять форму для публикации фильма с проверкой и обработкой ошибок с использованием библиотек React и Wagmi. Теперь обновите файл, находящийся в , используя коды ниже. /frontend/app/pages/create/page.tsx https://gist.github.com/Daltonic/0ec440d6dfc2b46e07ecec3e81f532c6?embedable=true Изменения, внесенные в этот код по сравнению с исходным, следующие: Импортировал функцию из и использовал ее в функции для создания нового фильма. createMovie api.service handleSubmit Добавлен параметр в вызов функции , передающий адрес пользователя из хука . userId createMovie useAccount Обновлена функция для использования для обработки обещания, возвращаемого . handleSubmit toast.promise createMovie Добавлена обработка ошибок в вызов функции в функции . createMovie handleSubmit Эти изменения позволяют форме отправлять данные о фильмах в API и создавать новую запись о фильме, одновременно обрабатывая ошибки и отображая сообщение об успешном выполнении. Редактировать страницу фильма Эта страница редактирования фильмов позволяет авторизованным пользователям обновлять сведения о фильмах, загружать постеры и видео, а также сохранять изменения с проверкой и обработкой ошибок, используя React, Wagmi и Next.js, специально разработанные для редактирования пользователями своих фильмов. Теперь обновите файл, найденный в , используя коды ниже. /frontend/app/pages/movies/edit/[slug]/page.tsx https://gist.github.com/Daltonic/63ddb6e3c65e3bcd2665ab0e3ffb6205?embedable=true Изменения, внесенные в код и отличающиеся от оригинала: Импортировал функции и из и использовал их в хуке и функции соответственно. fetchMovie updateMovie @/app/services/api.service useEffect handleSubmit Метод заменен функцией для извлечения данных о фильмах. posters.find() fetchMovie Обновлена функция для вызова функции с обновленными сведениями о фильме. handleSubmit updateMovie Добавлена обработка ошибок в вызов функции в функции . updateMovie handleSubmit Эти изменения позволяют нашему приложению взаимодействовать с нашими конечными точками API для извлечения и обновления данных о фильмах, тогда как исходный код полагался на наш локальный массив . posters Домашняя страница На этой домашней странице отображается компонент баннеров, список фильмов (из источника API или пользовательского интерфейса загрузки) и параметры подписки с использованием React и Next.js, что позволяет создать привлекательную и информативную целевую страницу для пользователей. Обновите файл, найденный в , используя следующие коды. /frontend/app/pages/page.tsx https://gist.github.com/Daltonic/97cb49662ed70be9b183b4f601b529d6?embedable=true Изменения, которые мы внесли на домашнюю страницу: Импортировали функцию из и использовали ее в хуке для извлечения данных о фильмах из нашего API. fetchMovies ./services/api.service useEffect Заменили данные локальных вызовом функции , которая извлекает данные из нашего API. posters fetchMovies Добавлено ключевое слово для ожидания разрешения обещания, возвращаемого , перед установкой состояния . await fetchMovies movies Эти изменения помогают нашему приложению извлекать данные о фильмах из нашего API, а не полагаться на локальные данные, что делает приложение более динамичным и управляемым данными. Страница учетной записи пользователя На этой странице отображается список фильмов, опубликованных подключенным в данный момент пользователем, с заполнителем скелета загрузки во время загрузки данных и сообщением, предлагающим пользователю подключить свою учетную запись, если он этого еще не сделал, с помощью Wagmi и react-loading-skeleton. Обновите файл, находящийся в , используя следующие коды. /frontend/app/pages/account/page.tsx https://gist.github.com/Daltonic/ba714bfa557f10aebacfa8b5ac3d7111?embedable=true Изменения, внесенные на страницу: Импортировали функцию из и использовали ее в хуке для извлечения данных о фильмах из нашего API. fetchMovies @/app/services/api.service useEffect Заменили данные локальных вызовом функции , которая извлекает данные из нашего API. posters fetchMovies передается в качестве аргумента функции для извлечения данных о фильме, специфичных для пользователя. address fetchMovies Удалена условная проверка перед отображением списка фильмов, так как теперь эту логику обрабатывает функция . address fetchMovies Упрощен условный оператор для отображения скелета загрузки, так как теперь он зависит только от состояния. loaded Эти изменения извлекают данные о фильмах из нашего API, специфичные для подключенного пользователя, и отображают скелет загрузки во время извлечения данных. Страница с подробностями фильмов На этой странице отображаются сведения об одном фильме, включая его название, год выпуска, рейтинг, продолжительность, жанр и дополнительную информацию, а также видеоплеер и связанные с ним фильмы, а также предоставляются возможности редактирования или удаления фильма, если пользователь является его владельцем, с использованием Next.js и Wagmi. Обновите файл, найденный в , используя следующие коды. /frontend/app/pages/movies/[slug]/page.tsx https://gist.github.com/Daltonic/5e37c94db3d73005a481ffd0cd141140?embedable=true Мы внесли здесь огромные изменения! Вот краткое изложение того, что мы сделали: Импортировали функции , и из и использовали их для взаимодействия с нашими конечными точками API. deleteMovie fetchMovie fetchMovies @/app/services/api.service Локальные данные заменены вызовами API для извлечения данных фильмов. Реализована возможность удаления фильмов с помощью функции . deleteMovie Использовал для отображения уведомления при удалении фильма. toast.promise Удалены локальные данные и заменены вызовами API. posters Обновлена функция для вызова функции и обработки ответа. handleSubmit deleteMovie Обновлен хук для вызова функций и . useEffect fetchMovie fetchMovies Эти изменения заставляют наше приложение взаимодействовать с нашим API для извлечения и удаления данных фильмов, а также отображать уведомления пользователю во время процесса удаления. Эта часть видео ниже покажет вам на практике, как мы интегрировали эти страницы с конечной точкой, пожалуйста, не стесняйтесь смотреть эту часть, если у вас возникнут какие-либо проблемы. Просто убедитесь, что вы остановились на временной метке . 04:57:41 https://www.youtube.com/watch?v=ZJ8YWdVTWUA&t=14070&si=XCKxX3HvX3RjtNHY&embedable=true Компоненты приложения Давайте обсудим назначение каждого компонента в нашем приложении. Мы обновим любой компонент, который необходимо изменить. Компонент баннера Этот компонент отображает вращающееся фоновое изображение баннеров фильмов, циклически прокручивая массив изображений фильмов каждые 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 https://gist.github.com/Daltonic/2aee8838dedcd6f14ef0f25103106a3a?embedable=true Изменения, внесенные в этот компонент, следующие: : в исходном коде не была реализована фактическая функциональность загрузки файла. Он только показывал всплывающее уведомление об успешной загрузке без загрузки файла. Этот обновленный код включает функцию из , которая обрабатывает загрузку файла. Функциональность загрузки файла uploadFile api.service : обновленный код отслеживает ход загрузки и отображает его в пользовательском интерфейсе. Отслеживание хода выполнения : обновленный код включает обработку ошибок в процессе загрузки файлов. Обработка ошибок : обновленный код использует более надежную проверку типа файла с использованием регулярного выражения. Проверка типа файла : обновленный код лучше организован, с отдельными функциями для обработки различных задач, что упрощает его чтение и поддержку. Организация кода : обновленный код включает некоторые обновления пользовательского интерфейса, такие как отображение хода загрузки и кнопка отмены во время загрузки. Обновления пользовательского интерфейса Этот обновленный код стал более полным и надежным, с реальной функциональностью загрузки файлов, отслеживанием хода выполнения, обработкой ошибок и лучшей организацией кода. В представленном ниже видео более подробно объясняется, что делает каждый компонент. Посмотрите его для вашего удобства. https://www.youtube.com/watch?v=ZJ8YWdVTUA&t=17861&si=LNxLwBkKeE7kH3Xt&embedable=true И вот, ребята, мы завершили этот проект, и последний шаг, который нам нужно сделать, это запустить этот проект в браузере. Запустите , чтобы увидеть проект в реальном времени в браузере. $ yarn build && yarn start Если у вас возникнут какие-либо проблемы, обратитесь к следующим ресурсам для устранения неполадок. До следующего раза, всего наилучшего! 🏠 Сайт Sia 🔥 Sia Renterd 👨💻 API Sia Renterd 🚀 Sia Discord Канал 💡 Видео плейлист YouTube Об авторе Я разработчик web3 и основатель , компании, которая помогает компаниям и частным лицам создавать и запускать децентрализованные приложения. У меня более 8 лет опыта работы в индустрии программного обеспечения, и я увлечен использованием технологии блокчейн для создания новых и инновационных приложений. Я веду где делюсь руководствами и советами по разработке web3, а также регулярно публикую статьи в Интернете о последних тенденциях в сфере блокчейна. Dapp Mentors канал на YouTube под названием Dapp Mentors,
