NextJs, Tailwind ve Sia Renterd kullanarak bir Web3 Film Akışı dApp'i oluşturun

giriiş

Web gelişiyor ve Web3 teknolojileri video akışı da dahil olmak üzere geleneksel endüstrilerde devrim yaratıyor. Odysee gibi platformlar, YouTube ve Rumble'a merkezi olmayan alternatifler sunarak bu alanda öncü oluyor. Benzer şekilde, Google Drive ve Dropbox gibi eski sağlayıcıların aksine, Sia veri depolamayı dönüştürüyor ve gizlilik odaklı ve kullanıcı merkezli bir yaklaşım sağlıyor.

NextJs, TypeScript, Tailwind CSS ve Sia Renterd kullanarak son teknoloji bir Web3 film akışı dApp'i oluşturma yolculuğuna katılın . Bu eğitim dizisi, kullanıcı verisi sahipliğini ve gizliliğini sağlamak için Sia'nın blok zinciri teknolojisinden yararlanan merkezi olmayan bir uygulama oluşturmanızda size rehberlik edecektir.

Bu eğitimin sonunda şu konularda uzmanlaşacaksınız:

• Arkadaşlarınızla paylaşmak veya okul projesi olarak kullanmak için tam işlevli bir film akışı platformu oluşturun
• Kendi SaaS (Hizmet Olarak Yazılım) uygulamanızı başlatın
• Video akışı sektöründe Web3 teknolojilerinin potansiyelini ortaya çıkarın

Projenin nasıl çalıştığını görmek için aşağıdaki demo videosunu izleyin ve bunun gibi daha yenilikçi içerikler için kanalımıza abone olun !

Ön koşullar

Takip edebilmek için aşağıdaki araçların yüklü olduğundan emin olun; yığınlara aşinalık da anlayışınızı artıracaktır:

• NodeJs
• SonrakiJ'ler
• Tailwind CSS
• Yazılı metin
• Docker (gerekli)

Bu üç bölümlük dizi şunları kapsayacaktır:

• Bölüm 1: Proje Kurulumu - Renterd Zen testnet, Paket Kurulumları ve ortam değişkenleri.
• Bölüm 2: Arka Uç Geliştirme - Arka Uç Hizmetinin Oluşturulması
• Bölüm 3: Önyüz Geliştirme - Önyüzün Arkayüz hizmetiyle entegrasyonu.

Tüm geliştirme sürecini izlemeyi tercih ederseniz, bu oynatma listesini izlemenizi öneririm , oynatma listesinde, burada yazılan her şey ve daha fazlası videolarda yakalanmıştır.

Bunları söyledikten sonra projemizin kurulumuna geçelim.

Proje Kurulumu – Bölüm 1

Sia Renterd docker compose betiğini ve arka uç ve ön uç servislerini içeren hazırlanmış bir deponun klonlanmasıyla başlayacağız. Aşağıdaki komutları çalıştırın:

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

Şimdi, yeni klonlanmış GitHub projemizdeki başlangıç dalına geçmemiz ve bunu tamamlamak için aşağıdaki komutu çalıştırmamız hayati önem taşıyor.

 $ git checkout 01_starter_branch

Sonra, bu Renterd hizmeti için ilişkili ortam değişkenini ayarlayalım. Bu projenin kökünde bir .env dosyası oluşturun ve aşağıdaki anahtarları uygulayın:

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

Bu API anahtarlarını alabilmek için, makinenizde Sia Renterd'in kurulu olması gerekiyor; lütfen her şeyi özetleyen aşağıdaki kısa videoyu izleyin.

Yukarıdaki videoda görüldüğü gibi Renterd uygulamasıyla bir tohum cümlesi oluşturun ve yukarıdaki videoda belirtildiği gibi ortam değişkeninizin içine ekleyin. Şifreyi kolayca hatırlayabileceğiniz bir şeyle değiştirin.

Daha sonra, henüz yapmadıysanız resmi web sitesinden indirerek Docker'ı yüklememiz gerekiyor. Alternatif olarak, mümkünse bir Docker örneği çalıştırmak için Gitpod veya VPS gibi ücretsiz bir çevrimiçi platform kullanın. Aksi takdirde, yerel bilgisayarınıza yükleyin.

Son olarak, bu projenin kökünde aşağıdaki docker komutunu çalıştırarak bir docker konteyneri döndürebiliriz. Terminalin bu docker-compose.yml dosyasıyla aynı dizin konumunda olduğundan emin olun.

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

Konteyneri aşağı çekmek için şu komutu not edin: $ docker compose -f "docker-compose.yml" down . Docker örneğinizi kapatmak istediğinizde (ama şimdi değil) bunu çalıştırın.

Yukarıdaki talimatları doğru bir şekilde uyguladıysanız http://localhost:9880 adresine gittiğinizde aşağıdaki arayüzü görmeniz gerekir.

Giriş yapmak için parolanızı (ortam değişkeninizden) girin. Ardından, dosya yüklemeleri, indirmeleri ve akışı için Sia Renterd örneğinizi ayarlamak üzere aşağıdaki videodaki yapılandırma prosedürünü izleyin.

Yukarıdaki video 6:41 dakikadan itibaren başlıyor, lütfen 20:01 dakikada durun, bu bölüm Renterd yapılandırma sürecinde görsel olarak size rehberlik edecektir.

Blockchain senkronizasyon sürecinin, ana bilgisayar eşleştirmesiyle birlikte, hazır hale gelmesinin 25 min kadar sürebileceğini, bu nedenle tüm süreçte sabırlı olmanız gerektiğini unutmayın.

Lütfen Renterd'de vidtv adında yeni bir kova oluşturun, bu proje için tüm dosyalarımız burada saklanacaktır. Yukarıdaki talimatları başarıyla yürüttüyseniz, Renterd düğümünüz yükleme ve indirme için hazır olmalıdır. Aşağıdaki resme bakın.

Şaşırtıcı. Bu noktada, Renterd servisimiz dosyaları almaya hazır, ancak onunla programatik olarak iletişim kurmamız gerekiyor.

Bu eğitimin birinci bölümünü, arka uç ve ön uç için paketleri ve ortam değişkenlerini ayarlayarak tamamlayalım.

Arka Uç Proje Kurulumu Arka uç hizmet paketlerinin kurulup daha ileri geliştirmeye hazır hale getirilmesi için aşağıdaki talimatları uygulayın.

Aşağıdaki komutları kullanarak yeni bir terminal örneğinden arka uç dizinine gidin:

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

Daha sonra ortam değişkenlerine aşağıdaki bilgileri girin.

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

Ve şimdi, arka ucu döndürmek ve herhangi bir hata içermediğini doğrulamak için $ yarn build && yarn start çalıştırın.

Önyüz Proje Kurulumu Son olarak, önyüzle ilişkili paketleri yüklemek için aşağıdaki komutları çalıştırın. Daha sonra, onu çalıştıracağız.

Aşağıdaki komutları kullanarak yeni bir terminal örneğinden arka uç dizinine gidin:

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

Daha sonra ortam değişkenlerine aşağıdaki bilgileri girin.

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

Kayıt olun ve proje kimliğinizi almak için Walletconnect ile bir proje oluşturun. Proje kimliğini ortam değişkenine sağladıktan sonra, arka ucu döndürmek ve herhangi bir hatadan arınmış olduğunu doğrulamak için $ yarn build && yarn start çalıştırın.

Bu noktada http://localhost:3000 adresine girdiğinizde aşağıdaki arayüzü göreceksiniz.

Sonraki Adım Bu dönüm noktasına ulaştığınız için tebrikler! Arka uç hizmet geliştirmeyi tamamlamak için Bölüm 2'ye geçin .

Arka Uç Hizmeti – Bölüm 2

Tekrar Hoş Geldiniz! Lütfen henüz okumadıysanız Bölüm 1'i okuyun. Şimdi Bölüm 2'ye geçelim: Web3 film akışı platformumuz için arka uç hizmetini oluşturma.

Sunucuyu başlattığınızda ve tarayıcınızda http://localhost:9000 ziyaret ettiğinizde şu anda bir "Hoş Geldiniz" mesajı görüntüleyen arka uç için bir başlangıç kodu sağladık. Bu temelin üzerine inşa edelim.

Şu anda bu kodlar backend'in kaynak dizininde bulunmaktadır. Bunları size kısaca açıklayayım.

Yardımcı Dosyalar Tamamen backend/src/utils adresine adreslenebilen bu klasör iki temel dosyayı içerir: bir HTTP istisna işleyici fonksiyonu ve dosya yükleme bilgilerini işlemek için bir arayüz.

Bu kod, yerleşik JavaScript Error sınıfını genişleten özel bir HttpException sınıfını tanımlar ve belirli HTTP durum kodları ve mesajları içeren hata örneklerinin oluşturulmasına olanak tanır.

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

Bu kod, yüklenen bir dosyayı temsil eden, dosyanın adı, verileri, boyutu, kodlaması ve daha fazlası gibi özelliklerini belirten bir FileUpload arayüzünü tanımlar ve bu arka uç uygulamasında dosya yüklemelerini işlemek için yapılandırılmış bir yol sağlar.

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

Ve sonra backend/src kök klasöründe, CORS ve dosya yükleme desteği ile bir Express.js sunucusu index.ts , "Hoş Geldiniz" mesajı döndüren tek bir GET rotası tanımlayan ve hataları yakalayıp özel HttpExceptions olarak yeniden atarak işleyen ve ardından ortam değişkenlerinde belirtildiği gibi sunucuyu 9000 numaralı portta başlatan bu index.ts dosyamız var.

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

Artık temel dosyaları ele aldığımıza göre, services klasöründe uygulamamızda her biri farklı bir amaca hizmet eden iki yeni dosya oluşturalım.

Hizmet Dosyaları

backend/src klasöründe, bu konumda services adında yeni bir klasör oluşturun, burada iki adet service oluşturacağız:

1. Sia Servisi : Renterd servisiyle iletişim kurarak dosya yükleme, indirme, akış ve önbelleğe alma işlemlerini gerçekleştirir.
2. Arka Plan Servisi : Önbelleğe alınmış dosyaları yönetir, bunları her gün gece yarısı 7 gün sonra otomatik olarak kaldırır.

Sia Hizmeti

backend/src/services klasöründe sia.service.ts adında bir dosya oluşturalım ve bu servisi oluşturmak için aşağıdaki adımları takip edelim.

Bu kod, Sia API ayarları ve bir kaynak URL'si için ortam değişkenleriyle başlatılan bir SiaService sınıfını tanımlar ve Sia hizmetiyle etkileşimleri yönetmek için bir temel sağlar. Şimdi, bu hizmet için kodların geri kalanını sağlayalım.

Sia Renterd'e Dosya Yükleme Sia Ağına dosya yüklemek için, bu üç metodu sınıfa eklememiz gerekecek, ikisi gizli, biri ise herkese açık olacak.

Bu kod, büyük ve küçük harflerden ve sayılardan oluşan, önceden tanımlanmış bir dizeden karakterleri rastgele seçmek için bir döngü kullanan, belirtilen uzunlukta rastgele bir dize üreten özel bir generateRandomString yöntemini tanımlar. Bunu, Renterd'e bir dosya göndermeden önce her dosyayı benzersiz şekilde yeniden adlandırmak için kullanacağız.

Yukarıdaki kod, Axios kullanarak Sia Renterd'e bir dosya yükleyen, yükleme ilerlemesini ve hatalarını işleyen ve yükleme başarısız olursa Axios yanıtını döndüren veya bir hata atan uploadToSiaService adlı özel bir yöntem tanımlar.

Renterd uç noktaları API dokümantasyonunda yazılmıştır, inceleyebilir veya aşağıdaki videoyu izleyerek Sia Renterd API dokümantasyonunun nasıl yapıldığını öğrenebilirsiniz.

Şimdi daha sonra endpoint olarak göstereceğimiz public metodunu uygulamamıza dahil edelim.

Bu kod, benzersiz bir tanımlayıcı üreterek dosyayı yükleyen, dosyayı yerel bir önbelleğe kaydeden ve ardından Sia Renterd'e yükleyen, dosyanın URL'sini ve bir başarı mesajını döndüren veya yükleme başarısız olursa bir hata veren genel bir uploadFile yöntemini tanımlar.

Sia Renterd'e Dosya İndirme Sia Ağına dosya indirmek için, sınıfa bu iki metodu eklememiz gerekecek, biri private diğeri public olacak.

Bu kod, Sia servisinden bir dosya alan, bunu yerel olarak önbelleğe alan ve dosyanın okunabilir bir akışını döndüren, hataları işleyen ve dosya bulunamazsa 404 görüntüsü döndüren özel bir downloadFromSiaService yöntemini tanımlar.

Bu response_files'ı arka uç dizininde bulunduralım, aksi takdirde 404.png dosyasını çağırırken bir hatayla karşılaşacağız. backend dizininde response_files adında başka bir klasör oluşturun ve aşağıdaki görselleri içine kopyalayın.

Tamam, şimdi bu dosya indirme servisini tamamlayalım. Ayrıca SiaService sınıfına aşağıdaki metodu ekleyelim.

Bu kod, Sia Renterd'den bir dosyayı almak için özel downloadFromSiaService yöntemini çağıran ve alınan dosyanın okunabilir akışını döndüren genel bir downloadFile yöntemini tanımlar.

Hizmet Uç Noktaları

Bu çeşitli yöntemleri ilgili uç noktalarına bağlamamızın zamanı geldi, şu anda sadece bir tane var, ancak dosyaları yüklemek ve indirmek için ek iki taneye ihtiyacımız olacak. Dosya akışı da indirme uç noktasını kullanacaktır.

backend/src/index.ts dosyasına gidin ve içeriğini bu kodlarla güncelleyin.

Bu kod, CORS ve dosya yükleme desteğiyle bir Express.js sunucusu kurar ve üç uç nokta tanımlar: bir karşılama mesajı, Sia Ağına dosya yükleme ve Sia Ağından dosya indirme. Dosya işlemlerini işlemek için SiaService sınıfını ve hata işleme için HttpException sınıfını kullanır.

Görsel yardıma ihtiyacınız varsa aşağıdaki videonun bu bölümünü izleyin ve 01:50:44 zaman damgasında durduğunuzdan emin olun.

Sunucumuzun kullanılmayan dosyalarla dolmamasını sağlamak için dosyaların önbellekte ne kadar süre kalacağını kontrol ederek bir önbellek yönetim hizmeti oluşturmamız gerekiyor. Bu hizmete ihtiyaç duymamızın tek nedeninin veri gecikmesini azaltmak olduğunu bilmek önemlidir.

Arka Plan Hizmeti

backend/src/services klasörüne gidin ve background.service.ts adında bir dosya oluşturun ve içine şu kod dizilerini ekleyin.

Bu kod, node-cron kütüphanesini kullanarak bir önbellek dizini ayarlayan ve günlük işleri zamanlayan, arka plan işlerini başlatan ve bir onay mesajı kaydeden bir BackgroundService sınıfını tanımlar. Önbellekteki 7 günden eski dosyaları silmekten sorumlu olacak bir yöntem oluşturalım.

Eski Dosyayı Silme Bu metodu BackgroundService sınıfına ekleyin.

Bu kod, dizini okuyarak, her dosyanın oluşturulma zamanını kontrol ederek, hedef zamanı aşan dosyaları kaldırarak, işin başlangıcını ve sonunu ve tüm hataları veya başarılı silmeleri günlüğe kaydederek, 7 günden eski dosyaları önbellek dizininden kaldıran deleteOldFiles adlı bir yöntemi tanımlar.

Şimdi, dosya silme işleminin ne zaman gerçekleştirileceğini zamanlamak için node-cron paketini kullanacak bir fonksiyon yazalım.

Bu kod, otomatik dosya temizliğini gerçekleştirmek için her gün gece yarısı (00:00) deleteOldFiles yöntemini çalıştıracak günlük bir cron işi ayarlar.

Ayrıca arka plan servis sınıfının örneklenmesi sırasında günlük İşleri zamanlamak için constructor fonksiyonunu güncellememiz gerekiyor.

Mükemmel, son olarak, bu arka plan işlemini başlatma sırasında sunucu sürecinin bir parçası olarak ekleyelim. backend/src/index.ts dosyasına gidin ve arka plan servis dosyasını içe aktarmak için uygulama dinleyicisi yöntemini güncelleyin.

$ yarn build && yarn start kullanarak arka uç servis komutunu tekrar çalıştırmalısınız; aşağıdaki görseldeki gibi bir terminal çıktısı göreceksiniz.

Eğer tüm arka plan servisini nasıl kodladığımı izlemek isterseniz, aşağıdaki videoyu izleyebilirsiniz; sadece 02:16:07 zaman damgasında durmayı unutmayın.

Sonraki Adım Tebrikler, artık bu eğitimin son kısmı olan Bölüm 3'e hazırsınız.

Bu eğitim serisinin son bölümüne dalalım, burada arka ucu ön uçla entegre edeceğiz ve dosya yükleme uygulamasını tamamlamak için parçaları birbirine bağlayacağız. Ön uçtaki kimlik doğrulamalarının çalışır durumda olduğundan emin olarak başlayacağız.

Web3 Modal Kimlik Doğrulaması – Bölüm 3

Frontend dizininde 'config' adında yeni bir klasör oluşturun ve /frontend/config/index.tsx yolunu veren bir dizin dosyası ekleyin. Şimdi, aşağıdaki kodları buna ekleyelim.

Bu kod, Web3 uygulamamız için bir Wagmi yapılandırması kurar, meta verileri, desteklenen zincirleri ve cüzdan ve sosyal oturum açma seçenekleri dahil kimlik doğrulama ayarlarını tanımlar ve bunu config dışa aktarımında depolar. Ayrıca kimlik doğrulama durumunu takip etmek için bir bağlam API'si oluşturmamız gerekir.

Context API Ardından, Frontend dizininde 'context' adlı yeni bir klasör oluşturun ve /frontend/context/index.tsx yolunu veren bir dizin dosyası ekleyin. Aşağıdaki kodları buna ekleyin.

Bu kod, Wagmi ve React Query kullanarak bir Web3Modal sağlayıcısı kurar, Web3 modalını proje kimliği ve tema değişkenleriyle yapılandırır ve uygulamayı bir WagmiProvider ve QueryClientProvider'a sarar.

Düzeni Güncelleme : Yukarıdaki yapılandırmaları içerecek şekilde uygulama düzenimizi güncelleyelim. /frontend/app/layout.tsx gidin ve kodlarını aşağıdaki kodlarla değiştirin.

Yukarıdaki kod, Next.js uygulaması için meta veriler, yazı tipleri, stiller ve Web3 modal, bildirim bildirimleri ve başlık ve alt bilgi gibi düzen bileşenleri için sağlayıcılar dahil olmak üzere kök düzeni ayarlar.

Giriş Butonu Şimdi /frontend/app/components/layout/Header.tsx ve /frontend/app/components/shared/Menu.tsx bileşenlerindeki giriş butonlarını etkinleştirmemiz ve aşağıdaki bilgileri kullanarak kodlarını güncellememiz gerekiyor.

Bu kod, bir logo, gezinme bağlantıları, özel bir menü ve farklı ekran boyutları için duyarlı tasarıma sahip bir Web3 Modal'ı başlatan bir oturum açma düğmesi içeren bir gezinme çubuğu için bir React bileşeni tanımlar.

Giriş butonuna tıklayıp tercih ettiğiniz sağlayıcı olan X, Facebook, Google, Discord veya Ethereum ile devam ettiğinizde yaptığımız şeyin işe yaradığının kanıtı olarak aşağıdaki görseller karşınıza çıkacaktır.

Harika, daha derine inelim ve veritabanımızı ve NextJs API tabanlı sistemimizi kuralım. İşlemle ilgili herhangi bir karışıklık için lütfen aşağıdaki video bölümünü izleyin; sadece 02:57:59 işaretinde durduğunuzdan emin olun.

Veritabanı Komut Dosyaları

Öncelikle NextJs yapılandırma betiğini sayfalarımızı ve uç noktalarımızı doğru bir şekilde adresleyecek ve uzak görüntülerimizi uyarılardan ve incelemelerden kurtaracak şekilde güncelleyelim.

Bu kod, API rotası yeniden yazımlarını ve görüntü optimizasyonunu ayarlayan ve herhangi bir HTTPS ana bilgisayar adından uzak görüntülere ve localhost etki alanından yerel görüntülere izin veren bir Next.js yapılandırma nesnesini tanımlar.

Veritabanı Yapılandırma Komut Dosyası Bu uygulama için SQLite kullanacağız, ancak MYSQL veya NOSQL sağlayıcıları gibi daha sağlam bir çözüm kullanmakta özgürsünüz. Basitlik adına, bir SQLite düz dosyasıyla çalışalım.

/frontend/app/api/database.ts dosya yolunu oluşturun ve aşağıdaki kodları içine ekleyin.

Bu kod bir SQLite veritabanı bağlantısı kurar, veritabanında GET ve POST istekleri gerçekleştirmek için iki API işlevi, apiGet ve apiPost tanımlar, hata işleme ve söz tabanlı asenkron yürütme ile. Veritabanından veri göndermek veya almak istediğimizde bu kodları kullanacağız.

Veritabanı Göçü Komut Dosyası Hem bir veritabanı düz dosyası hem de tüm içeriklerimizi tutacak bir tablo oluşturmamız gerekiyor. /frontend/app/api/migrations.ts dosya yolunu oluşturun ve aşağıdaki kodları buna ekleyin.

Bu kod, SQLite kullanarak, mevcut değilse belirtilen sütunlara sahip bir 'filmler' tablosu oluşturan ve işlemin sonucunu kaydeden bir veritabanı geçiş fonksiyonunu tanımlar. Şimdi, /frontend dizinine işaret eden bir terminalde aşağıdaki komutu çalıştırın.

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

Bu işlemin ön uç dizininin kökünde movies.db adlı bir veritabanı düz dosyası da oluşturacağı unutulmamalıdır. Bu komutu package.json betiğine de ekledik, bu nedenle ön uç dizininde $ yarn migrate çalıştırmak aynı şekilde çalışmalıdır.

Görsel yardım için aşağıdaki videoyu izleyin, sadece 03:10:54 noktasında durdurun.

Uygulama Uç Noktaları

Şimdi, film oluşturma, okuma, güncelleme ve silme için bazı uç noktaları tanımlayalım. Bu uç noktaları oluşturmak için NextJs API sağlamasını kullanacağız.

Film Son Noktası Oluşturma Bir film oluşturmak için gereken bilgiler arasında kullanıcı kimliği, film adı, resim, video URL'si, yayın tarihi, tür, derecelendirme, dil, süre ve arka plan açıklaması bulunur. /frontend/app/api/movies/create/route.ts dosya yolunu oluşturun ve aşağıdaki kodları buna ekleyin.

Bu kod, POST isteklerini işlemek, film verilerini doğrulamak ve işlemek, benzersiz bir slug oluşturmak ve hataları işlerken ve JSON yanıtları döndürürken verileri bir apiPost fonksiyonu kullanarak bir veritabanına eklemek için bir uç nokta tanımlar.

Film Son Noktasını Güncelle Bir filmi güncellemek için gereken bilgiler arasında kullanıcı kimliği, slug ve film oluşturulurken sağlanan diğer bilgiler bulunur. /frontend/app/api/movies/update/route.ts dosya yolunu oluşturun ve aşağıdaki kodları buna ekleyin.

Bu kod, bir filmi güncellemek, gerekli özellikleri doğrulamak ve apiPost fonksiyonunu kullanarak veritabanındaki film verilerini güncellemek için bir SQL sorgusu yürütmek üzere POST isteklerini işleyecek bir uç nokta tanımlar.

Film Son Noktasını Sil Bir filmi silmek için gerekli bilgiler arasında filmin kullanıcı kimliği ve slug'ı bulunur. /frontend/app/api/movies/delete/route.ts dosya yolunu oluşturun ve aşağıdaki kodları içine ekleyin.

Bu kod, bir filmi silmek için POST isteklerini işleyecek, gerekli özellikleri (userId ve slug) doğrulayacak ve apiPost fonksiyonunu kullanarak filmi veritabanından silmek için bir SQL sorgusu yürütecek bir uç nokta tanımlar.

Tüm Filmler Son Noktası Filmleri almak için gereken isteğe bağlı veriler pageSize ve userId'dir. Bunlar sonuçları filtrelemek ve sayfalandırmak için sorgu parametreleri olarak geçirilebilir. /frontend/app/api/movies/all/route.ts dosya yolunu oluşturun ve aşağıdaki kodları buna ekleyin.

Yukarıdaki kod, filmleri almak için GET isteklerini işleyecek bir uç nokta tanımlar, kullanıcı kimliğine göre isteğe bağlı filtrelemeye ve pageSize'a göre sayfalandırmaya izin verir ve sonuçları JSON biçiminde döndürür.

Tek Film Son Noktası Tek bir filmi almak için gereken veri, bir filmin slug'ıdır. /frontend/app/api/movies/[slug]/route.ts dosya yolunu oluşturun ve aşağıdaki kodları buna ekleyin.

Bu kod, bir filmi slug'ına göre almak için GET isteklerini işleyecek, slug parametresini doğrulayacak ve apiGet fonksiyonunu kullanarak veritabanından film verilerini almak için bir SQL sorgusu yürütecek bir uç nokta tanımlar.

Bu uygulama için ihtiyaç duyacağımız tüm uç noktaları işaretler. Bu uç noktaları daha iyi anlamanıza yardımcı olacak görsel bir yardıma ihtiyacınız varsa, lütfen aşağıdaki videoyu izleyin, sadece 03:48:22 zaman damgasında durduğunuzdan emin olun.

Uç Nokta Entegrasyonu

Görevimiz önceden kodlanmış bileşenleri ve sayfaları gözden geçirmek ve güncellemek, her birinin amacını ve işlevselliğini açıklamak ve mevcut kodda yaptığımız değişiklikleri belgelemektir. Daha önce api dizininde oluşturduğumuz uç noktalarla etkileşim kurmak için bir hizmet oluşturarak başlayacağız.

/frontend/app/services/api.service.ts dosya yolunu oluşturun ve aşağıdaki kodları içine ekleyin.

Bu servis, bir film veritabanıyla etkileşim kurmak için bir dizi işlev sunar ve uygulamanın filmleri getirmesine, tek bir filmi slug ile getirmesine, yeni bir film oluşturmasına, mevcut bir filmi güncellemesine, bir filmi silmesine ve API isteklerini kullanarak ve hataları işleyerek dosyaları yüklemesine olanak tanır.

Uygulama Sayfaları

Uygulamamızla ilişkili çeşitli sayfaları gözden geçirelim ve güncelleyelim. Burada vurgulananlar dışında pek çok şeyi değiştirmenize gerek kalmayacak.

Film Sayfası Oluştur

Bu sayfa, kullanıcıların video ve resim dosyalarını yüklemelerine, film bilgilerini girmelerine ve filmi yayınlamak için formu göndermelerine, doğrulama ve hata işleme işlemlerini React ve Wagmi kütüphanelerini kullanarak yapmalarına olanak tanıyan bir film yayınlama formudur.

Şimdi /frontend/app/pages/create/page.tsx bulunan dosyayı aşağıdaki kodlarla güncelleyelim.

Bu kodda orijinaline göre yapılan değişiklikler şunlardır:

1. api.service createMovie fonksiyonunu içe aktardım ve handleSubmit fonksiyonunda kullanarak yeni bir film oluşturdum.
2. createMovie fonksiyon çağrısına userId parametresi eklendi ve kullanıcının adresi useAccount kancasından geçirildi.
3. handleSubmit fonksiyonu, createMovie tarafından döndürülen sözü işlemek için toast.promise kullanacak şekilde güncellendi.
4. handleSubmit fonksiyonundaki createMovie fonksiyon çağrısına hata işleme eklendi.

Bu değişiklikler, formun film verilerini API'ye göndermesini ve yeni bir film girişi oluşturmasını, aynı zamanda hataları ele almasını ve bir başarı mesajı görüntülemesini sağlar.

Film Sayfasını Düzenle

Bu film düzenleme sayfası, yetkili kullanıcıların film ayrıntılarını güncellemelerine, poster ve video yüklemelerine, değişiklikleri kaydetmelerine, doğrulama ve hata işlemelerine olanak tanır ve özellikle kullanıcıların filmlerini düzenlemeleri için tasarlanmış React, Wagmi ve Next.js'yi kullanır.

Şimdi /frontend/app/pages/movies/edit/[slug]/page.tsx dizinindeki dosyayı aşağıdaki kodlarla güncelleyelim.

Orijinalden farklı olarak kodda yapılan güncellemeler şunlardır:

1. @/app/services/api.service dizininden fetchMovie ve updateMovie fonksiyonlarını içe aktardım ve bunları sırasıyla useEffect kancasında ve handleSubmit fonksiyonunda kullandım.
2. Film verilerini almak için posters.find() metodunu fetchMovie fonksiyonuyla değiştirdim.
3. Güncellenen film ayrıntılarıyla updateMovie fonksiyonunu çağırmak için handleSubmit fonksiyonu güncellendi.
4. handleSubmit fonksiyonundaki updateMovie fonksiyon çağrısına hata işleme eklendi.

Bu değişiklikler, orijinal kodun yerel posters dizimize dayanmasına rağmen, uygulamamızın film verilerini almak ve güncellemek için API uç noktalarımızla etkileşime girmesini sağlıyor.

Ana Sayfa

Bu ana sayfa, React ve Next.js'yi kullanarak, kullanıcılar için ilgi çekici ve bilgilendirici bir açılış sayfası sağlamak amacıyla afiş bileşenini, film listesini (bir API kaynağından veya yükleme kullanıcı arayüzünden) ve abonelik seçeneklerini sunar.

/frontend/app/pages/page.tsx bulunan dosyayı aşağıdaki kodlarla güncelleyin.

Ana sayfada yaptığımız değişiklikler şunlardır:

1. ./services/api.service dosyasından fetchMovies fonksiyonunu içe aktardım ve API'mizden film verilerini almak için useEffect kancasında kullandım.
2. Yerel posters verilerini, API'mizden veri çeken fetchMovies fonksiyon çağrısıyla değiştirdik.
3. movies durumunu ayarlamadan önce fetchMovies tarafından döndürülen sözün çözülmesini beklemek için await anahtar sözcüğü eklendi.

Bu değişiklikler, uygulamamızın yerel verilere dayanmak yerine film verilerini API'mizden almasına yardımcı oluyor ve uygulamayı daha dinamik ve veri odaklı hale getiriyor.

Kullanıcı Hesabı Sayfası

Bu sayfa, şu anda bağlı olan kullanıcı tarafından gönderilen filmlerin bir listesini, veriler alınırken bir yükleme iskeleti yer tutucusunu ve kullanıcı henüz bağlanmadıysa, Wagmi ve react-loading-skeleton'ı kullanarak hesabını bağlamasını isteyen bir mesajı görüntüler.

/frontend/app/pages/account/page.tsx dizinindeki dosyayı aşağıdaki kodlarla güncelleyin.

Sayfada yapılan değişiklikler şunlardır:

1. @/app/services/api.service dizininden fetchMovies fonksiyonunu içe aktardım ve API'mizden film verilerini almak için useEffect kancasında kullandım.
2. Yerel posters verilerini, API'mizden veri çeken fetchMovies fonksiyon çağrısıyla değiştirdik.
3. Kullanıcıya özel film verilerini almak için fetchMovies fonksiyonuna argüman olarak address geçirildi.
4. Film listesini oluşturmadan önce address için koşullu kontrol kaldırıldı, çünkü fetchMovies fonksiyonu artık bu mantığı işliyor.
5. Yükleme iskeletini görüntülemek için koşullu ifade basitleştirildi, artık yalnızca loaded duruma bağlı.

Bu değişiklikler, bağlı kullanıcıya özel olarak API'mizden film verilerini alır ve veriler alınırken bir yükleme iskeleti görüntüler.

Film Detayları Sayfası

Bu sayfa, tek bir filmin adını, yayın yılını, reytingini, süresini, türünü ve arka plan bilgilerini, bir video oynatıcısını ve ilgili filmleri görüntüler ve kullanıcı sahibiyse Next.js ve Wagmi'yi kullanarak filmi düzenleme veya silme seçenekleri sunar.

/frontend/app/pages/movies/[slug]/page.tsx dizininde bulunan dosyayı aşağıdaki kodlarla güncelleyin.

Burada bazı büyük değişiklikler yaptık! İşte yaptıklarımızın özeti:

1. deleteMovie , fetchMovie ve fetchMovies fonksiyonlarını @/app/services/api.service dizininden içe aktardık ve bunları API uç noktalarımızla etkileşim kurmak için kullandık.
2. Film verilerini almak için yerel verileri API çağrılarıyla değiştirdim.
3. deleteMovie fonksiyonunu kullanarak film silme işlevi uygulandı.
4. Bir filmi silerken bildirim görüntülemek için toast.promise kullanıldı.
5. posters yerel verileri kaldırıldı ve yerine API çağrıları konuldu.
6. handleSubmit fonksiyonu deleteMovie fonksiyonunu çağıracak ve yanıtı işleyecek şekilde güncellendi.
7. useEffect kancasını fetchMovie ve fetchMovies fonksiyonlarını çağıracak şekilde güncelledik.

Bu değişiklikler, uygulamamızın film verilerini almak ve silmek ve silme işlemi sırasında kullanıcıya bildirimler görüntülemek için API'mizle etkileşime girmesine neden olur.

Aşağıdaki videonun bu kısmı, bu sayfaları uç noktayla nasıl entegre ettiğimizi uygulamalı olarak gösterecektir, herhangi bir sorunla karşılaşırsanız lütfen o kısmı izlemekten çekinmeyin. Sadece 04:57:41 zaman damgasında durduğunuzdan emin olun.

Uygulama Bileşenleri

Uygulamamızdaki her bileşenin amacını tartışalım. Değiştirilmesi gereken herhangi bir bileşeni güncelleyeceğiz.

Banner Bileşeni

Bu bileşen, her 5 saniyede bir film görüntüleri dizisi arasında geçiş yaparak film afişlerinin dönen bir arka plan görüntüsünü görüntüler ve basit ve otomatik bir slayt gösterisi efekti oluşturur. Bu bileşen kodu /frontend/app/components/home/Banner.tsx adresinde değerlendirilebilir.

Posterler Bileşeni

Bu bileşen, otomatik oynatma, sayfalama ve gezinme gibi özelliklerle Swiper kütüphanesini kullanarak film posterlerinin duyarlı ve etkileşimli bir karuselini görüntüler ve farklı ekran boyutlarına uyum sağlayan dinamik bir düzen ile bir destek olarak geçirilen filmlerin bir listesini gösterir. Bu bileşen kodu /frontend/app/components/home/Posters.tsx adresinde değerlendirilebilir.

Poster UI Bileşeni

Bu bileşen, react-loading-skeleton kütüphanesini kullanarak, "posters" özelliğine dayalı dinamik sayıda iskelet posteri gösteren, farklı ekran boyutlarına uyum sağlayan duyarlı bir tasarımla, gerçek poster verileri getirilip görüntülenene kadar bir yükleme durumu belirten bir film posterleri bölümü için bir yer tutucu iskelet düzeni görüntüler. Bu bileşen kodu /frontend/app/components/home/PosterUI.tsx adresinde değerlendirilebilir.

Abonelik Bileşeni

Bu bileşen, çeşitli sahte planları ayrıntıları, fiyatları ve avantajlarıyla sergileyen bir abonelik planları bölümü görüntüler. Kullanıcıların ihtiyaçlarına uygun bir plan seçmelerine olanak tanır, kullanıcı deneyimini geliştirmek için duyarlı bir ızgara düzeni ve etkileşimli gezinme efektleri kullanır. Bu bileşen kodu /frontend/app/components/home/Subscription.tsx adresinde değerlendirilebilir.

Başlık Bileşeni

Bu bileşen, sayfanın en üstünde bir logo, çeşitli bölümlere bağlantılar içeren bir gezinme menüsü, duyarlı tasarım için bir menü geçiş düğmesi ve bir oturum açma düğmesi içeren sabit bir gezinme çubuğu oluşturur ve uygulama genelinde tutarlı ve erişilebilir bir başlık bölümü sağlar. Bu bileşen kodu /frontend/app/components/layout/Header.tsx adresinde değerlendirilebilir.

Altbilgi Bileşeni

Bu bileşen, sayfanın alt kısmında uygulamanın logosunu, kısa bir açıklamayı, gezinme bağlantılarını, iletişim bilgilerini ve Sia Foundation tarafından desteklenen merkezi olmayan depolama çözümünden bahseden bir krediyi içeren bir alt bilgi bölümü oluşturur ve ilgili bilgi ve bağlantılarla net ve düzenli bir alt bilgi bölümü sağlar. Bu bileşen kodu /frontend/app/components/layout/Footer.tsx adresinde değerlendirilebilir.

Menü Bileşeni

Bu bileşen, tıklandığında gezinme bağlantıları içeren bir açılır menüyü açan veya kapatan, kullanıcıların daha küçük ekranlarda uygulamanın çeşitli bölümlerine erişmesine olanak tanıyan ve gezinme bağlantılarının zaten görünür olduğu daha büyük ekranlarda menüyü gizleyen duyarlı bir menü geçiş düğmesi oluşturur. Bu bileşen kodu /frontend/app/components/shared/Menu.tsx adresinde değerlendirilebilir.

Film Kartı Bileşeni

Bu bileşen, filmin adı, yayın yılı ve arka plan özeti gibi ek bilgileri gösteren ve aynı zamanda filmin ayrıntılar sayfasına bağlantı görevi gören bir gezinme efektiyle tek bir filmin posterini görüntüler ve kullanıcı deneyimini geliştirmek için duyarlı bir tasarım ve animasyonlu geçişler kullanır. Bu bileşen kodu /frontend/app/components/shared/MovieCard.tsx adresinde değerlendirilebilir.

Yüklenen Bileşen

Bu bileşen, yüklenen bir dosyanın, bir resim veya videonun önizlemesini, bir ilerleme çubuğu ve bir kaldırma düğmesiyle görüntüler ve kullanıcıların yüklenen dosyayı incelemesine ve silmesine olanak tanırken, animasyonlar ve gezinme efektleriyle görsel olarak çekici ve etkileşimli bir arayüz de sağlar. Bu bileşen kodu /frontend/app/components/shared/Uploaded.tsx adresinde değerlendirilebilir.

Yükleyici Bileşeni

Bu bileşen, sürükle ve bırak, dosya türü doğrulaması, boyut sınırlamaları, yükleme ilerleme takibi ve başarı/hata bildirimleri gibi özelliklerle dosyaları, özellikle de videoları veya posterleri yüklemek için bir kullanıcı arayüzü sağlar ve yükleme sürecini yönetmek için React durum yönetimi, olay işleme ve API entegrasyonunun bir kombinasyonunu kullanır.

/frontend/app/components/shared/uploader.tsx bulunan dosyayı aşağıdaki kodlarla güncelleyin.

Bu bileşende yapılan değişiklikler şunlardır:

1. Dosya Yükleme İşlevi : Orijinal kodda gerçek yükleme dosyası işlevi uygulanmamıştı. Dosyayı yüklemeden yalnızca bir başarı bildirimi gösterdi. Bu güncellenmiş kod, dosya yüklemesini işleyen api.service uploadFile işlevini içerir.
2. İlerleme Takibi : Güncellenen kod yükleme ilerlemesini izler ve kullanıcı arayüzünde görüntüler.
3. Hata İşleme : Güncellenen kod, dosya yükleme işlemi için hata işlemeyi içeriyor.
4. Dosya Türü Doğrulaması : Güncellenen kod, düzenli ifade kullanarak daha sağlam bir dosya türü doğrulaması kullanır.
5. Kod Organizasyonu : Güncellenen kod daha iyi organize edildi, farklı görevleri ele almak için ayrı işlevler eklendi, bu da okunmasını ve sürdürülmesini kolaylaştırdı.
6. Kullanıcı Arayüzü Güncellemeleri : Güncellenen kod, yükleme ilerleme durumunu gösterme ve yükleme sırasında iptal düğmesi gibi bazı kullanıcı arayüzü güncellemelerini içeriyor.

Bu güncellenmiş kod daha eksiksiz ve sağlamdır; gerçek dosya yükleme işlevi, ilerleme takibi, hata işleme ve daha iyi kod organizasyonu vardır.

Aşağıdaki videoda her bir bileşenin ne işe yaradığı daha detaylı olarak açıklanmaktadır, kendi iyiliğiniz için lütfen izleyin.

Ve işte bu kadar arkadaşlar, bu projeyi tamamladık ve atmamız gereken son adım bu projeyi tarayıcıda başlatmak. Projeyi tarayıcıda canlı görmek için $ yarn build && yarn start çalıştırın.

Herhangi bir sorunla karşılaşırsanız, sorun giderme için aşağıdaki kaynaklara başvurun. Bir dahaki sefere kadar, en iyisi!

• 🏠 Sia Web Sitesi
• 🔥 Sia Renterd
• 👨‍💻 Sia Renterd API
• 🚀 Sia Discord Kanalı
• 💡 YouTube Video Oynatma Listesi

Yazar Hakkında

Ben bir web3 geliştiricisiyim ve işletmelerin ve bireylerin merkezi olmayan uygulamalar oluşturmasına ve başlatmasına yardımcı olan bir şirket olan Dapp Mentors'un kurucusuyum. Yazılım sektöründe 8 yılı aşkın deneyimim var ve yeni ve yenilikçi uygulamalar oluşturmak için blockchain teknolojisini kullanma konusunda tutkuluyum. Web3 geliştirme hakkında eğitimler ve ipuçları paylaştığım Dapp Mentors adlı bir YouTube kanalı yönetiyorum ve blockchain alanındaki en son trendler hakkında düzenli olarak çevrimiçi makaleler yayınlıyorum.