![Search icon](https://hackernoon.imgix.net/search-new.png?w=19&h=19)
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:
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 !
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:
Bu üç bölümlük dizi şunları kapsayacaktır:
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.
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 .
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.
backend/src
klasöründe, bu konumda services
adında yeni bir klasör oluşturun, burada iki adet service oluşturacağız:
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.
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.
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.
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.
Ö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.
Ş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.
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.
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:
api.service
createMovie
fonksiyonunu içe aktardım ve handleSubmit
fonksiyonunda kullanarak yeni bir film oluşturdum.createMovie
fonksiyon çağrısına userId
parametresi eklendi ve kullanıcının adresi useAccount
kancasından geçirildi.handleSubmit
fonksiyonu, createMovie
tarafından döndürülen sözü işlemek için toast.promise
kullanacak şekilde güncellendi.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:
@/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.posters.find()
metodunu fetchMovie
fonksiyonuyla değiştirdim.updateMovie
fonksiyonunu çağırmak için handleSubmit
fonksiyonu güncellendi.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:
./services/api.service
dosyasından fetchMovies
fonksiyonunu içe aktardım ve API'mizden film verilerini almak için useEffect
kancasında kullandım.posters
verilerini, API'mizden veri çeken fetchMovies
fonksiyon çağrısıyla değiştirdik.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:
@/app/services/api.service
dizininden fetchMovies
fonksiyonunu içe aktardım ve API'mizden film verilerini almak için useEffect
kancasında kullandım.posters
verilerini, API'mizden veri çeken fetchMovies
fonksiyon çağrısıyla değiştirdik.fetchMovies
fonksiyonuna argüman olarak address
geçirildi.address
için koşullu kontrol kaldırıldı, çünkü fetchMovies
fonksiyonu artık bu mantığı işliyor.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:
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.deleteMovie
fonksiyonunu kullanarak film silme işlevi uygulandı.toast.promise
kullanıldı.posters
yerel verileri kaldırıldı ve yerine API çağrıları konuldu.handleSubmit
fonksiyonu deleteMovie
fonksiyonunu çağıracak ve yanıtı işleyecek şekilde güncellendi.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.
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:
api.service
uploadFile
işlevini içerir.
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!
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.