NextJs, Tailwind 및 Sia Renterd를 사용하여 Web3 영화 스트리밍 dApp 구축

소개

웹은 진화하고 있으며, Web3 기술은 비디오 스트리밍을 포함한 기존 산업에 혁명을 일으키고 있습니다. Odysee 와 같은 플랫폼이 선두를 달리며 YouTube와 Rumble에 대한 분산형 대안을 제공합니다. 마찬가지로 Google Drive 및 Dropbox와 같은 기존 공급업체와 달리 Sia는 데이터 스토리지를 혁신하여 개인 정보 보호 중심적이고 사용자 중심적인 접근 방식을 제공합니다.

NextJs, TypeScript, Tailwind CSS, Sia Renterd를 사용하여 최첨단 Web3 영화 스트리밍 dApp을 구축하는 여정에 참여하세요 . 이 튜토리얼 시리즈는 Sia의 블록체인 기술을 활용하여 사용자 데이터 소유권과 개인 정보 보호를 보장하는 분산형 애플리케이션을 만드는 방법을 안내합니다.

이 튜토리얼을 마치면 다음과 같은 전문 지식을 습득하게 됩니다.

• 친구와 공유하거나 학교 프로젝트로 사용할 수 있는 완벽한 기능을 갖춘 영화 스트리밍 플랫폼을 구축하세요.
• 자체 SaaS(Software as a Service) 애플리케이션을 시작하세요
• 비디오 스트리밍 산업에서 Web3 기술의 잠재력을 활용하세요

아래의 데모 영상을 시청하여 프로젝트가 어떻게 진행되는지 살펴보고, 이와 같은 혁신적인 콘텐츠를 더 많이 받아보려면 저희 채널을 구독하세요 !

필수 조건

따라오려면 다음 도구가 설치되어 있는지 확인하세요. 또한 스택에 익숙해지면 이해도가 높아질 것입니다.

• 노드제이에스
• 다음Js
• 테일윈드 CSS
• 타입스크립트
• Docker (필수)

이 3부작 시리즈에서는 다음 내용을 다룹니다.

• 1부: 프로젝트 설정 - Renterd Zen 테스트넷, 패키지 설치 및 환경 변수.
• 2부: 백엔드 개발 - 백엔드 서비스 구축
• 3부: 프런트엔드 개발 - 프런트엔드와 백엔드 서비스 통합하기.

개발 과정 전체를 보는 걸 선호하신다면 이 재생 목록을 시청하는 걸 추천합니다 . 재생 목록에는 여기에 쓰여진 모든 내용과 더 많은 내용이 영상으로 담겨 있습니다.

이제부터 이 프로젝트를 설정해 보겠습니다.

프로젝트 설정 – 1부

Sia Renterd docker compose 스크립트와 백엔드 및 프런트엔드 서비스를 포함하는 준비된 저장소를 복제하는 것으로 시작합니다. 다음 명령을 실행합니다.

 $ 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 에 가입하고 프로젝트를 만들어 프로젝트 ID를 얻으세요. 환경 변수에 프로젝트 ID를 제공한 후 $ yarn build && yarn start 실행하여 백엔드를 시작하고 버그가 없는지 확인하세요.

이제 http://localhost:3000 에서 브라우저를 방문하면 아래 인터페이스가 표시됩니다.

다음 단계 이 이정표에 도달한 것을 축하합니다! 2부로 이동하여 백엔드 서비스 개발을 완료하세요.

백엔드 서비스 - 2부

환영합니다! 아직 읽지 않으셨다면 1부를 읽어주세요. 이제 2부로 들어가겠습니다. 웹3 영화 스트리밍 플랫폼을 위한 백엔드 서비스 구축.

백엔드에 대한 시작 코드를 제공했는데, 현재 서버를 시작하고 브라우저에서 http://localhost:9000 방문하면 "환영합니다"라는 메시지가 표시됩니다. 이 기반을 바탕으로 구축해 보겠습니다.

현재 우리는 백엔드의 소스 디렉토리에 이 코드를 가지고 있습니다. 간단히 설명해 드리겠습니다.

유틸리티 파일 이 폴더는 backend/src/utils 로 완전히 주소 지정할 수 있으며, HTTP 예외 처리기 함수와 파일 업로드 정보를 처리하기 위한 인터페이스라는 두 가지 필수 파일을 포함합니다.

이 코드는 내장된 JavaScript Error 클래스를 확장하는 사용자 정의 HttpException 클래스를 정의하여 특정 HTTP 상태 코드 및 메시지를 사용하여 오류 인스턴스를 생성할 수 있도록 합니다.

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

이 코드는 업로드된 파일을 나타내는 FileUpload 인터페이스를 정의하고 이름, 데이터, 크기, 인코딩 등의 속성을 지정하여 백엔드 애플리케이션에서 파일 업로드를 처리하는 구조화된 방법을 제공합니다.

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

그리고 backend/src 루트 폴더에는 CORS와 파일 업로드 지원을 갖춘 index.ts 서버를 설정하고, "Welcome" 메시지를 반환하는 단일 GET 경로를 정의하고, 사용자 정의 HttpExceptions로 오류를 잡아서 다시 throw하여 오류를 처리한 다음, 환경 변수에 지정된 대로 포트 9000에서 서버를 시작하는 index.ts 파일이 있습니다.

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

이제 주요 파일을 살펴보았으니 services 폴더에 두 개의 새 파일을 만들어 보겠습니다. 각 파일은 애플리케이션에서 서로 다른 목적을 갖습니다.

서비스 파일

backend/src 폴더에서 해당 위치에 services 라는 새 폴더를 만듭니다. 여기에 두 개의 서비스를 만들 것입니다.

1. Sia 서비스 : 파일 업로드, 다운로드, 스트리밍, 캐싱을 처리하고 Renterd 서비스와 통신합니다.
2. 백그라운드 서비스 : 캐시된 파일을 관리하고 매일 자정에 7일 후 자동으로 제거합니다.

시아 서비스

backend/src/services 폴더에 sia.service.ts 라는 이름의 파일을 만들고 아래 단계에 따라 이 서비스를 구성해 보겠습니다.

이 코드는 Sia API 설정과 원본 URL에 대한 환경 변수로 초기화하는 SiaService 클래스를 정의하여 Sia 서비스와의 상호작용을 관리하기 위한 기반을 제공합니다. 이제 이 서비스의 나머지 코드를 제공하겠습니다.

Sia Renterd에 파일 업로드 Sia 네트워크에 파일을 업로드하려면 클래스에 세 가지 메서드를 추가해야 합니다. 두 가지는 비공개이고 하나는 공개입니다.

이 코드는 대문자, 소문자, 숫자로 구성된 지정된 길이의 난수 문자열을 생성하는 개인 메서드 generateRandomString 정의합니다. 루프를 사용하여 미리 정의된 문자열에서 문자를 무작위로 선택합니다. Renterd에 파일을 전송하기 전에 각 파일의 이름을 고유하게 바꾸는 데 사용합니다.

위 코드는 Axios를 사용하여 Sia Renterd에 파일을 업로드하고, 업로드 진행률과 오류를 처리하고, 업로드에 실패하면 Axios 응답을 반환하거나 오류를 발생시키는 개인 메서드 uploadToSiaService 정의합니다.

Renterd 엔드포인트는 API 문서에 작성되어 있으며, 이를 확인하거나 아래 비디오를 시청하여 Sia Renterd API 문서를 사용하는 방법을 설명했습니다.

이제 나중에 애플리케이션의 엔드포인트로 노출할 공개 메서드를 포함시켜 보겠습니다.

이 코드는 고유 식별자를 생성하여 파일을 업로드하고, 로컬 캐시에 파일을 저장한 다음 Sia Renterd에 업로드하고, 파일의 URL과 성공 메시지를 반환하거나 업로드에 실패하면 오류를 표시하는 공개 메서드 uploadFile 정의합니다.

Sia Renterd에 파일 다운로드 Sia 네트워크에 파일을 다운로드하려면 클래스에 두 가지 메서드를 추가해야 합니다. 하나는 비공개이고 다른 하나는 공개입니다.

이 코드는 Sia 서비스에서 파일을 검색하고, 로컬에 캐시하고, 파일의 읽을 수 있는 스트림을 반환하고, 오류를 처리하고, 파일을 찾을 수 없으면 404 이미지를 반환하는 개인 메서드 downloadFromSiaService 정의합니다.

백엔드 디렉토리에서 response_files를 사용할 수 있도록 합시다. 그렇지 않으면 404.png 파일을 호출하는 데 오류가 발생합니다. backend 디렉토리에서 response_files 라는 다른 폴더를 만들고 다음 이미지를 복사합니다.

완벽합니다. 이제 이 파일 다운로드 서비스를 완성해 보겠습니다. 또한 SiaService 클래스에 아래 메서드를 추가합니다.

이 코드는 Sia Renterd에서 파일을 검색하기 위해 개인 메서드 downloadFromSiaService 호출하는 공개 메서드 downloadFile 정의하고 검색된 파일의 읽을 수 있는 스트림을 반환합니다.

서비스 엔드포인트

이제 다양한 방법을 각각의 엔드포인트에 결합할 때입니다. 현재는 하나만 있지만 파일을 업로드하고 다운로드하려면 두 개가 더 필요합니다. 파일 스트리밍도 다운로드 엔드포인트를 활용합니다.

backend/src/index.ts 파일로 가서 다음 코드로 내용을 업데이트합니다.

이 코드는 CORS와 파일 업로드 지원 기능을 갖춘 Express.js 서버를 설정하고, 세 가지 엔드포인트(환영 메시지, Sia 네트워크로의 파일 업로드, Sia 네트워크에서 파일 다운로드)를 정의하며, SiaService 클래스를 사용하여 파일 작업을 처리하고 HttpException을 사용하여 오류를 처리합니다.

시각적인 도움이 필요하면 아래 비디오의 이 부분을 시청하고, 01:50:44 타임스탬프에서 멈추세요.

우리는 파일이 캐시에 얼마나 오래 머무는지 제어하여 서버가 사용되지 않는 파일로 가득 차지 않도록 캐시 관리 서비스를 만들어야 합니다. 이 서비스가 필요한 유일한 이유는 데이터 지연 시간을 줄이기 위한 것이라는 것을 아는 것이 중요합니다.

백그라운드 서비스

backend/src/services 폴더로 가서 background.service.ts 라는 파일을 만들고 다음 코드 시퀀스를 추가합니다.

이 코드는 캐시 디렉토리를 설정하고 node-cron 라이브러리를 사용하여 일일 작업을 예약하고 백그라운드 작업을 초기화하고 확인 메시지를 로깅하는 BackgroundService 클래스를 정의합니다. 캐시에서 7일 이상 된 파일을 삭제하는 작업을 담당하는 메서드를 만들어 보겠습니다.

이전 파일 삭제 이 메서드를 BackgroundService 클래스에 추가합니다.

이 코드는 디렉토리를 읽고, 각 파일의 생성 시간을 확인하고, 대상 시간을 초과한 파일을 제거하고, 작업의 시작과 종료, deleteOldFiles 또는 삭제 성공을 기록하여 캐시 디렉토리에서 7일보다 오래된 파일을 제거하는 deleteOldFiles라는 메서드를 정의합니다.

이제 node-cron 패키지를 활용해 파일 삭제를 언제 실행할지 예약하는 함수를 작성해 보겠습니다.

이 코드는 매일 자정(00:00)에 deleteOldFiles 메서드를 실행하여 자동 파일 정리를 수행하는 일일 cron 작업을 설정합니다.

또한 백그라운드 서비스 클래스의 인스턴스화에서 일일 작업을 예약하기 위해 생성자 함수를 업데이트해야 합니다.

완벽합니다. 마지막으로, 초기화 시 서버 프로세스의 일부로 이 백그라운드 작업을 추가해 보겠습니다. backend/src/index.ts 파일로 이동하여 앱 리스너 메서드를 업데이트하여 백그라운드 서비스 파일을 가져옵니다.

$ yarn build && yarn start 을 사용하여 백엔드 서비스 명령을 다시 실행하면 아래 이미지와 같은 터미널 출력이 표시됩니다.

백그라운드 서비스 전체를 어떻게 코딩했는지 보고 싶으시다면 아래 영상을 시청하세요. 02:16:07 타임스탬프에서 멈추세요.

다음 단계 축하합니다. 이제 이 튜토리얼의 마지막 부분인 3부를 읽을 준비가 되었습니다.

이 튜토리얼 시리즈의 마지막 부분으로 들어가 백엔드와 프런트엔드를 통합하여 조각들을 연결하여 파일 업로드 애플리케이션을 완성해 보겠습니다. 프런트엔드에서 인증이 실행 중인지 확인하는 것으로 시작하겠습니다.

Web3 모달 인증 – 3부

Frontend 디렉토리에 'config'라는 이름의 새 폴더를 만들고 index 파일을 추가하여 경로 /frontend/config/index.tsx 만듭니다. 이제 다음 코드를 추가해 보겠습니다.

이 코드는 Web3 애플리케이션에 대한 Wagmi 구성을 설정하여 메타데이터, 지원되는 체인 및 인증 설정(지갑 및 소셜 로그인 옵션 포함)을 정의하고 config 내보내기에 저장합니다. 또한 인증 상태를 추적하기 위한 컨텍스트 API를 만들어야 합니다.

Context API 다음으로, 여전히 Frontend 디렉토리에 'context'라는 이름의 새 폴더를 만들고 인덱스 파일을 추가하여 경로 /frontend/context/index.tsx 만듭니다. 다음 코드를 추가합니다.

이 코드는 Wagmi와 React Query를 사용하여 Web3Modal 공급자를 설정하고, 프로젝트 ID와 테마 변수로 Web3 모달을 구성하고, WagmiProvider와 QueryClientProvider로 애플리케이션을 래핑합니다.

레이아웃 업데이트 : 위의 구성을 포함하도록 애플리케이션 레이아웃을 업데이트해 보겠습니다. /frontend/app/layout.tsx 로 이동하여 해당 코드를 아래 코드로 바꾸세요.

위 코드는 Web3 모달, 토스트 알림, 헤더 및 푸터와 같은 레이아웃 구성 요소를 위한 메타데이터, 글꼴, 스타일, 공급자를 포함하여 Next.js 애플리케이션의 루트 레이아웃을 설정합니다.

로그인 버튼 이제 /frontend/app/components/layout/Header.tsx 및 /frontend/app/components/shared/Menu.tsx 구성 요소에서 로그인 버튼을 활성화하고 아래 정보를 사용하여 해당 코드를 업데이트해야 합니다.

이 코드는 로고, 탐색 링크, 사용자 정의 메뉴, 다양한 화면 크기에 맞는 반응형 디자인의 Web3 Modal을 시작하는 로그인 버튼이 포함된 탐색 모음을 위한 React 구성 요소를 정의합니다.

다음 이미지는 로그인 버튼을 클릭하고 X, Facebook, Google, Discord 또는 Ethereum 중 원하는 제공자를 통해 진행하면 우리가 한 일이 제대로 작동함을 증명하는 증거로 나타납니다.

훌륭합니다. 더 깊이 들어가서 데이터베이스와 NextJs API 기반 시스템을 설정해 보겠습니다. 프로세스에 대한 혼란이 있으면 아래 비디오 섹션을 시청하세요. 02:57:59 지점에서 멈추세요.

데이터베이스 스크립트

먼저 NextJs 구성 스크립트를 업데이트하여 페이지와 엔드포인트를 올바르게 처리하고 원격 이미지에 대한 경고 및 감시를 해제하겠습니다.

이 코드는 API 경로 재작성 및 이미지 최적화를 설정하는 Next.js 구성 객체를 정의하며, 이를 통해 모든 HTTPS 호스트 이름의 원격 이미지와 로컬 호스트 도메인의 로컬 이미지를 허용합니다.

데이터베이스 구성 스크립트 이 애플리케이션에는 SQLite를 사용하지만 MYSQL 또는 NOSQL 공급자와 같은 보다 강력한 솔루션을 사용할 수도 있습니다. 단순성을 위해 SQLite 플랫 파일로 작업해 보겠습니다.

/frontend/app/api/database.ts 파일 경로를 생성하고 해당 경로에 아래 코드를 추가합니다.

이 코드는 SQLite 데이터베이스 연결을 설정하고, apiGet 과 apiPost 라는 두 개의 API 함수를 정의하여 데이터베이스에서 GET 및 POST 요청을 수행하고, 오류 처리 및 약속 기반 비동기 실행을 수행합니다. 우리는 데이터베이스에서 데이터를 보내거나 검색할 때마다 이 코드를 사용할 것입니다.

데이터베이스 마이그레이션 스크립트 우리는 모든 내용을 보관하기 위해 데이터베이스 플랫 파일과 테이블을 모두 만들어야 합니다. /frontend/app/api/migrations.ts 파일 경로를 만들고 아래 코드를 추가합니다.

이 코드는 SQLite를 사용하여 존재하지 않는 경우 지정된 열이 있는 'movies' 테이블을 만들고 작업 결과를 기록하는 데이터베이스 마이그레이션 함수를 정의합니다. 이제 /frontend 디렉토리를 가리키는 터미널에서 아래 명령을 실행합니다.

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

이 프로세스는 또한 frontend 디렉토리의 루트에 movies.db 라는 데이터베이스 플랫 파일을 생성한다는 점에 유의해야 합니다. 또한 이 명령을 package.json 스크립트에 추가했으므로 frontend 디렉토리에서 $ yarn migrate 실행하면 동일하게 작동해야 합니다.

시각적인 도움이 필요하면 아래 영상을 시청하세요. 03:10:54 지점에서 멈추세요.

애플리케이션 엔드포인트

이제 영화를 만들고, 읽고, 업데이트하고, 삭제하기 위한 몇 가지 엔드포인트를 정의해 보겠습니다. NextJs API 프로비전을 사용하여 이러한 엔드포인트를 만들 것입니다.

영화 엔드포인트 만들기 영화를 만들려면 사용자 ID, 영화 이름, 이미지, 비디오 URL, 출시일, 장르, 등급, 언어, 길이, 배경 설명 등의 정보가 필요합니다. /frontend/app/api/movies/create/route.ts 파일 경로를 만들고 아래 코드를 추가합니다.

이 코드는 POST 요청을 처리하고, 영화 데이터의 유효성을 검사하고 처리하고, 고유한 슬러그를 생성하고, apiPost 함수를 사용하여 데이터를 데이터베이스에 삽입하고, 오류를 처리하고 JSON 응답을 반환하는 엔드포인트를 정의합니다.

영화 엔드포인트 업데이트 영화를 업데이트하려면 사용자 ID, 슬러그, 영화를 만들 때 제공된 기타 정보가 필요합니다. /frontend/app/api/movies/update/route.ts 파일 경로를 만들고 아래 코드를 추가합니다.

이 코드는 apiPost 함수를 사용하여 영화 업데이트, 필수 속성의 검증, 데이터베이스의 영화 데이터를 업데이트하는 SQL 쿼리 실행을 위한 POST 요청을 처리하는 엔드포인트를 정의합니다.

영화 엔드포인트 삭제 영화를 삭제하려면 필요한 정보에는 영화의 사용자 ID와 슬러그가 포함됩니다. /frontend/app/api/movies/delete/route.ts 파일 경로를 만들고 아래 코드를 추가합니다.

이 코드는 영화 삭제를 위한 POST 요청을 처리하고, 필수 속성(userId 및 slug)을 검증하고, apiPost 함수를 사용하여 데이터베이스에서 영화를 삭제하는 SQL 쿼리를 실행하는 엔드포인트를 정의합니다.

모든 영화 엔드포인트 영화를 가져오는 데 필요한 선택적 데이터는 pageSize와 userId이며, 이는 결과를 필터링하고 페이지 나누기 위한 쿼리 매개변수로 전달될 수 있습니다. /frontend/app/api/movies/all/route.ts 파일 경로를 만들고 아래 코드를 추가합니다.

위 코드는 영화 검색을 위한 GET 요청을 처리하는 엔드포인트를 정의하고, userId로 선택적으로 필터링하고 pageSize로 페이지를 매기는 기능을 제공하며, 결과를 JSON 형식으로 반환합니다.

단일 영화 엔드포인트 단일 영화를 검색하려면 필요한 데이터는 영화의 슬러그입니다. /frontend/app/api/movies/[slug]/route.ts /api/movies/[슬러그]/route.ts 파일 경로를 만들고 아래 코드를 추가합니다.

이 코드는 슬러그를 통해 영화를 검색하기 위한 GET 요청을 처리하고, 슬러그 매개변수를 검증하고, apiGet 함수를 사용하여 데이터베이스에서 영화 데이터를 검색하는 SQL 쿼리를 실행하는 엔드포인트를 정의합니다.

이 애플리케이션에 필요한 모든 엔드포인트를 표시합니다. 이러한 엔드포인트를 더 잘 이해하는 데 도움이 되는 시각적 보조 자료가 필요한 경우 아래 비디오를 시청하고 03:48:22 타임스탬프에서 멈추십시오.

엔드포인트 통합

우리의 과제는 미리 코딩된 구성 요소와 페이지를 검토하고 업데이트하고, 각각의 목적과 기능을 설명하고 기존 코드에 대한 변경 사항을 문서화하는 것입니다. 우리는 api 디렉토리에서 이전에 만든 엔드포인트와 상호 작용하기 위한 서비스를 만드는 것으로 시작할 것입니다.

/frontend/app/services/api.service.ts 파일 경로를 생성하고 해당 경로에 아래 코드를 추가합니다.

이 서비스는 영화 데이터베이스와 상호작용하기 위한 일련의 기능을 제공하여, 애플리케이션이 영화를 가져오고, 슬러그로 단일 영화를 가져오고, 새로운 영화를 만들고, 기존 영화를 업데이트하고, 영화를 삭제하고, API 요청을 사용하여 파일을 업로드하고 오류를 처리할 수 있도록 합니다.

응용 프로그램 페이지

우리 애플리케이션과 관련된 다양한 페이지를 검토하고 업데이트해 보겠습니다. 많은 것을 변경할 필요는 없고, 여기에 강조된 것만 변경하면 됩니다.

영화 페이지 만들기

이 페이지는 사용자가 비디오 및 이미지 파일을 업로드하고, 영화 세부 정보를 입력하고, React 및 Wagmi 라이브러리를 사용하여 검증 및 오류 처리를 통해 영화를 게시하기 위한 양식을 제출할 수 있는 영화 게시 양식입니다.

이제 /frontend/app/pages/create/page.tsx 에 있는 파일을 아래 코드로 업데이트하세요.

이 코드에서 원본 코드와 비교했을 때 변경된 내용은 다음과 같습니다.

1. api.service 에서 createMovie 함수를 가져와 handleSubmit 함수에서 사용하여 새로운 영화를 만들었습니다.
2. createMovie 함수 호출에 userId 매개변수를 추가하고, useAccount 후크에서 사용자의 주소를 전달했습니다.
3. createMovie 에서 반환된 promise를 처리하기 위해 toast.promise 사용하도록 handleSubmit 함수를 업데이트했습니다.
4. handleSubmit 함수에서 createMovie 함수 호출에 오류 처리 기능을 추가했습니다.

이러한 변경을 통해 양식에서 영화 데이터를 API에 제출하고 새로운 영화 항목을 생성하는 동시에 오류를 처리하고 성공 메시지를 표시할 수 있게 되었습니다.

영화 편집 페이지

이 영화 편집 페이지에서는 권한이 있는 사용자가 영화 세부 정보를 업데이트하고, 포스터와 비디오를 업로드하고, 변경 사항을 저장할 수 있으며, React, Wagmi, Next.js를 활용하여 검증 및 오류 처리를 수행하며, 특히 사용자가 영화를 편집하도록 설계되었습니다.

이제 /frontend/app/pages/movies/edit/[slug]/page.tsx 에 있는 파일을 아래 코드로 업데이트하세요.

원본과 다른 코드에 적용된 업그레이드는 다음과 같습니다.

1. @/app/services/api.service 에서 fetchMovie 와 updateMovie 함수를 가져와서 각각 useEffect 후크와 handleSubmit 함수에서 사용했습니다.
2. posters.find() 메서드를 fetchMovie 함수로 바꿔서 영화 데이터를 검색했습니다.
3. updateMovie 함수를 업데이트하여 업데이트된 영화 세부 정보로 호출하도록 handleSubmit 함수를 업데이트했습니다.
4. handleSubmit 함수의 updateMovie 함수 호출에 오류 처리 기능을 추가했습니다.

이러한 변경 사항을 통해 애플리케이션이 API 엔드포인트와 상호 작용하여 영화 데이터를 검색하고 업데이트할 수 있게 되었지만, 원래 코드는 로컬 posters 배열에 의존했습니다.

홈페이지

이 홈페이지는 React와 Next.js를 활용하여 배너 구성 요소, 영화 목록(API 소스 또는 로딩 UI에서 제공), 구독 옵션을 렌더링하여 사용자에게 매력적이고 유익한 랜딩 페이지를 제공합니다.

/frontend/app/pages/page.tsx 에서 찾은 파일을 다음 코드로 업데이트합니다.

홈페이지에 대한 변경 사항은 다음과 같습니다.

1. ./services/api.service 에서 fetchMovies 함수를 가져와 useEffect 후크에서 사용하여 API에서 영화 데이터를 검색했습니다.
2. 로컬 posters 데이터를 API에서 데이터를 가져오는 fetchMovies 함수 호출로 대체했습니다.
3. fetchMovies 에서 반환된 약속이 해결된 후 movies 상태를 설정하기 위해 await 키워드를 추가했습니다.

이러한 변경 사항은 로컬 데이터에 의존하지 않고 API에서 영화 데이터를 검색하는 데 도움이 되며 애플리케이션을 보다 동적이고 데이터 중심으로 만들어줍니다.

사용자 계정 페이지

이 페이지는 현재 연결된 사용자가 게시한 영화 목록을 표시하고, 데이터를 가져오는 동안 로딩 스켈레톤 플레이스홀더를 표시하고, 사용자가 계정을 연결하지 않은 경우 Wagmi와 react-loading-skeleton을 활용하여 계정을 연결하라는 메시지를 표시합니다.

/frontend/app/pages/account/page.tsx 에서 찾은 파일을 다음 코드로 업데이트합니다.

페이지에 적용된 변경 사항은 다음과 같습니다.

1. @/app/services/api.service 에서 fetchMovies 함수를 가져와 useEffect 후크에서 사용하여 API에서 영화 데이터를 검색했습니다.
2. 로컬 posters 데이터를 API에서 데이터를 가져오는 fetchMovies 함수 호출로 대체했습니다.
3. 사용자별 영화 데이터를 검색하기 위해 fetchMovies 함수에 인수로 address 전달했습니다.
4. fetchMovies 함수가 이제 이 논리를 처리하므로, 영화 목록을 렌더링하기 전에 address 에 대한 조건부 검사를 제거했습니다.
5. 로딩 스켈레톤을 표시하기 위한 조건문을 간소화했습니다. 이제 loaded 상태에 따라서만 조건이 달라지기 때문입니다.

이러한 변경 사항은 연결된 사용자에 대한 API에서 영화 데이터를 검색하고, 데이터를 가져오는 동안 로딩 스켈레톤을 표시합니다.

영화 세부 정보 페이지

이 페이지는 영화 이름, 개봉 년도, 등급, 기간, 장르, 배경 정보 등을 포함한 단일 영화의 세부 정보와 비디오 플레이어 및 관련 영화를 표시하며, 사용자가 소유자인 경우 Next.js와 Wagmi를 활용하여 영화를 편집하거나 삭제할 수 있는 옵션을 제공합니다.

/frontend/app/pages/movies/[slug]/page.tsx 에서 찾은 파일을 다음 코드로 업데이트하세요.

우리는 여기서 큰 변화를 만들었습니다! 우리가 한 일의 요약은 다음과 같습니다.

1. @/app/services/api.service 에서 deleteMovie , fetchMovie , fetchMovies 함수를 가져와서 API 엔드포인트와 상호 작용하는 데 사용했습니다.
2. 로컬 데이터를 API 호출로 대체하여 영화 데이터를 검색했습니다.
3. deleteMovie 함수를 사용하여 영화 삭제 기능을 구현했습니다.
4. 영화를 삭제하는 동안 알림을 표시하기 위해 toast.promise 사용했습니다.
5. posters 로컬 데이터를 제거하고 API 호출로 대체했습니다.
6. deleteMovie 함수를 호출하고 응답을 처리하기 위해 handleSubmit 함수를 업데이트했습니다.
7. fetchMovie 및 fetchMovies 함수를 호출하기 위해 useEffect 후크를 업데이트했습니다.

이러한 변경 사항으로 인해 애플리케이션이 API와 상호 작용하여 영화 데이터를 검색하고 삭제하고 삭제 프로세스 중에 사용자에게 알림을 표시합니다.

아래 비디오의 이 부분은 우리가 이 페이지를 엔드포인트와 통합하는 방법을 직접 보여드립니다. 문제가 생기면 그 부분을 자유롭게 시청하세요. 04:57:41 타임스탬프에서 멈추세요.

응용 프로그램 구성 요소

우리 애플리케이션의 각 구성 요소의 목적에 대해 논의해 보겠습니다. 수정해야 할 구성 요소가 있으면 업데이트합니다.

배너 컴포넌트

이 구성 요소는 영화 배너의 회전 배경 이미지를 표시하고, 5초마다 영화 이미지 배열을 순환하여 간단하고 자동적인 슬라이드쇼 효과를 만듭니다. 이 구성 요소 코드는 /frontend/app/components/home/Banner.tsx 에서 평가할 수 있습니다.

포스터 구성 요소

이 구성 요소는 Swiper 라이브러리를 사용하여 영화 포스터의 반응형 및 대화형 회전목마를 표시하며, 자동 재생, 페이지 매김 및 탐색과 같은 기능을 갖추고 있으며, 소품으로 전달된 영화 목록을 보여주고, 다양한 화면 크기에 맞게 조정되는 동적 레이아웃을 제공합니다. 이 구성 요소 코드는 /frontend/app/components/home/Posters.tsx 에서 평가할 수 있습니다.

포스터 UI 구성 요소

이 구성 요소는 react-loading-skeleton 라이브러리를 사용하여 영화 포스터 섹션에 대한 플레이스홀더 스켈레톤 레이아웃을 표시하여 "posters" prop에 따라 동적 개수의 스켈레톤 포스터를 표시하고, 다양한 화면 크기에 맞게 반응형 디자인을 적용하여 실제 포스터 데이터를 가져와서 표시할 때까지 로딩 상태를 나타냅니다. 이 구성 요소 코드는 /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. 파일 업로드 기능 : 원래 코드에는 실제 파일 업로드 기능이 구현되지 않았습니다. 파일을 업로드하지 않고 성공 토스트 알림만 표시했습니다. 이 업데이트된 코드에는 파일 업로드를 처리하는 api.service 의 uploadFile 함수가 포함되어 있습니다.
2. 진행 상황 추적 : 업데이트된 코드는 업로드 진행 상황을 추적하여 UI에 표시합니다.
3. 오류 처리 : 업데이트된 코드에는 파일 업로드 프로세스에 대한 오류 처리가 포함되었습니다.
4. 파일 유형 검증 : 업데이트된 코드는 정규 표현식을 사용하여 보다 강력한 파일 유형 검증을 사용합니다.
5. 코드 구성 : 업데이트된 코드는 더욱 잘 구성되었으며, 다양한 작업을 처리하기 위한 별도의 기능이 있어 읽고 유지 관리하기가 더 쉬워졌습니다.
6. UI 업데이트 : 업데이트된 코드에는 업로드 진행률 표시, 업로드 중 취소 버튼 등 일부 UI가 업데이트되었습니다.

업데이트된 코드는 실제 파일 업로드 기능, 진행 상황 추적, 오류 처리, 더 나은 코드 구성 등을 통해 더욱 완벽하고 강력해졌습니다.

아래 영상에서는 각 구성 요소의 기능을 자세히 설명합니다. 더 나은 결과를 위해 영상을 꼭 시청해 보시기 바랍니다.

그리고 그게 전부입니다. 우리는 이 프로젝트를 완료했고, 우리가 해야 할 마지막 단계는 브라우저에서 이 프로젝트를 시작하는 것입니다. $ yarn build && yarn start 실행하여 브라우저에서 프로젝트를 라이브로 보세요.

문제가 발생하면 다음 리소스를 참조하여 문제 해결을 진행하세요. 다음 시간까지, 최선을 다하세요!

• 🏠 Sia 웹사이트
• 🔥 시아 렌터드
• 👨‍💻 Sia Renterd API
• 🚀 Sia Discord 채널
• 💡 YouTube 비디오 재생 목록

저자 소개

저는 web3 개발자이며, 기업과 개인이 분산형 애플리케이션을 구축하고 출시할 수 있도록 돕는 회사인 Dapp Mentors 의 창립자입니다. 저는 소프트웨어 산업에서 8년 이상의 경험을 가지고 있으며, 블록체인 기술을 사용하여 새롭고 혁신적인 애플리케이션을 만드는 데 열정적입니다. 저는 Dapp Mentors라는 YouTube 채널을 운영하며, 여기서 web3 개발에 대한 튜토리얼과 팁을 공유하고, 블록체인 분야의 최신 트렌드에 대한 기사를 정기적으로 온라인에 게시합니다.