giriiş Web gelişiyor ve Web3 teknolojileri video akışı da dahil olmak üzere geleneksel endüstrilerde devrim yaratıyor. 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, veri depolamayı dönüştürüyor ve gizlilik odaklı ve kullanıcı merkezli bir yaklaşım sağlıyor. Odysee Sia NextJs, TypeScript, Tailwind CSS ve Sia Renterd kullanarak . 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. son teknoloji bir Web3 film akışı dApp'i oluşturma yolculuğuna katılın 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 ve bunun gibi daha yenilikçi içerikler için ! aşağıdaki demo videosunu izleyin kanalımıza abone olun https://www.youtube.com/watch?v=Hgfdesry8Ss&embedable=true Ö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: - Renterd Zen testnet, Paket Kurulumları ve ortam değişkenleri. Bölüm 1: Proje Kurulumu - Arka Uç Hizmetinin Oluşturulması Bölüm 2: Arka Uç Geliştirme - Önyüzün Arkayüz hizmetiyle entegrasyonu. Bölüm 3: Önyüz Geliştirme Tüm geliştirme sürecini izlemeyi tercih ederseniz, , oynatma listesinde, burada yazılan her şey ve daha fazlası videolarda yakalanmıştır. bu oynatma listesini izlemenizi öneririm 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 dosyası oluşturun ve aşağıdaki anahtarları uygulayın: .env 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. https://www.youtube.com/watch?v=78XCHGWZwhA&embedable=true 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 Docker'ı yüklememiz gerekiyor. Alternatif olarak, mümkünse bir Docker örneği çalıştırmak için veya VPS gibi ücretsiz bir çevrimiçi platform kullanın. Aksi takdirde, yerel bilgisayarınıza yükleyin. resmi web sitesinden indirerek Gitpod Son olarak, bu projenin kökünde aşağıdaki docker komutunu çalıştırarak bir docker konteyneri döndürebiliriz. Terminalin bu dosyasıyla aynı dizin konumunda olduğundan emin olun. docker-compose.yml $ docker compose -f "docker-compose.yml" up -d --build Konteyneri aşağı çekmek için şu komutu not edin: . Docker örneğinizi kapatmak istediğinizde (ama şimdi değil) bunu çalıştırın. $ docker compose -f "docker-compose.yml" down Yukarıdaki talimatları doğru bir şekilde uyguladıysanız adresine gittiğinizde aşağıdaki arayüzü görmeniz gerekir. http://localhost:9880 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. https://www.youtube.com/watch?v=ZJ8YWdVTWUA&t=401s&embedable=true Yukarıdaki video dakikadan itibaren başlıyor, lütfen dakikada durun, bu bölüm Renterd yapılandırma sürecinde görsel olarak size rehberlik edecektir. 6:41 20:01 Blockchain senkronizasyon sürecinin, ana bilgisayar eşleştirmesiyle birlikte, hazır hale gelmesinin kadar sürebileceğini, bu nedenle tüm süreçte sabırlı olmanız gerektiğini unutmayın. 25 min Lütfen Renterd'de 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. vidtv Ş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ç hizmet paketlerinin kurulup daha ileri geliştirmeye hazır hale getirilmesi için aşağıdaki talimatları uygulayın. Arka Uç Proje Kurulumu 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 çalıştırın. $ yarn build && yarn start 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. Önyüz Proje Kurulumu 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 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 çalıştırın. Walletconnect $ yarn build && yarn start Bu noktada adresine girdiğinizde aşağıdaki arayüzü göreceksiniz. http://localhost:3000 Bu dönüm noktasına ulaştığınız için tebrikler! Arka uç hizmet geliştirmeyi tamamlamak için . Sonraki Adım Bölüm 2'ye geçin Arka Uç Hizmeti – Bölüm 2 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. Tekrar Hoş Geldiniz! Sunucuyu başlattığınızda ve tarayıcınızda 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. http://localhost:9000 Şu anda bu kodlar backend'in kaynak dizininde bulunmaktadır. Bunları size kısaca açıklayayım. Tamamen 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. Yardımcı Dosyalar backend/src/utils Bu kod, yerleşik JavaScript sınıfını genişleten özel bir sınıfını tanımlar ve belirli HTTP durum kodları ve mesajları içeren hata örneklerinin oluşturulmasına olanak tanır. Error HttpException 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 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. FileUpload https://Gist.github.com/Daltonic/64fb31bf3b19668a17d14f59e087a77e Ve sonra kök klasöründe, CORS ve dosya yükleme desteği ile bir Express.js sunucusu , "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. backend/src index.ts https://Gist.github.com/Daltonic/8d76c3a212681d7bfe89b0792b0e707f Artık temel dosyaları ele aldığımıza göre, klasöründe uygulamamızda her biri farklı bir amaca hizmet eden iki yeni dosya oluşturalım. services Hizmet Dosyaları klasöründe, bu konumda adında yeni bir klasör oluşturun, burada iki adet service oluşturacağız: backend/src services : Renterd servisiyle iletişim kurarak dosya yükleme, indirme, akış ve önbelleğe alma işlemlerini gerçekleştirir. Sia Servisi : Önbelleğe alınmış dosyaları yönetir, bunları her gün gece yarısı 7 gün sonra otomatik olarak kaldırır. Arka Plan Servisi Sia Hizmeti klasöründe adında bir dosya oluşturalım ve bu servisi oluşturmak için aşağıdaki adımları takip edelim. backend/src/services sia.service.ts https://Gist.github.com/Daltonic/a82a0c1cf8d3e7b31702b66eeead3718?embedable=true Bu kod, Sia API ayarları ve bir kaynak URL'si için ortam değişkenleriyle başlatılan bir 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. SiaService Sia Ağına dosya yüklemek için, bu üç metodu sınıfa eklememiz gerekecek, ikisi gizli, biri ise herkese açık olacak. Sia Renterd'e Dosya Yükleme https://Gist.github.com/Daltonic/ddf74dffc5ac1005585f7ae3ad55c286?embedable=true 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 yöntemini tanımlar. Bunu, Renterd'e bir dosya göndermeden önce her dosyayı benzersiz şekilde yeniden adlandırmak için kullanacağız. generateRandomString https://Gist.github.com/Daltonic/e6a82ac4af9eca9c881f4e0bdd1d682b?embedable=true 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 adlı özel bir yöntem tanımlar. uploadToSiaService 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. https://www.youtube.com/watch?v=zOmUMz0DBQM&embedable=true Şimdi daha sonra endpoint olarak göstereceğimiz public metodunu uygulamamıza dahil edelim. https://Gist.github.com/Daltonic/ce565350160a39c4d9f0abc0b7e7dc26?embedable=true 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 yöntemini tanımlar. uploadFile Sia Ağına dosya indirmek için, sınıfa bu iki metodu eklememiz gerekecek, biri private diğeri public olacak. Sia Renterd'e Dosya İndirme https://Gist.github.com/Daltonic/b401e92d510ffddc8a0b7301d526f702?embedable=true 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 yöntemini tanımlar. downloadFromSiaService Bu response_files'ı arka uç dizininde bulunduralım, aksi takdirde dosyasını çağırırken bir hatayla karşılaşacağız. dizininde adında başka bir klasör oluşturun ve aşağıdaki görselleri içine kopyalayın. 404.png backend response_files Tamam, şimdi bu dosya indirme servisini tamamlayalım. Ayrıca sınıfına aşağıdaki metodu ekleyelim. SiaService https://Gist.github.com/Daltonic/1f1a99c82d5b15693eaa2d8d2482f6c2?embedable=true Bu kod, Sia Renterd'den bir dosyayı almak için özel yöntemini çağıran ve alınan dosyanın okunabilir akışını döndüren genel bir yöntemini tanımlar. downloadFromSiaService downloadFile 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. dosyasına gidin ve içeriğini bu kodlarla güncelleyin. backend/src/index.ts https://Gist.github.com/Daltonic/c8dec40acbc47b2582c651e04fae432f?embedable=true 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 zaman damgasında durduğunuzdan emin olun. 01:50:44 https://www.youtube.com/watch?v=ZJ8YWdVTWUA&t=3795&si=A6fF8n8Pd92i6weM&embedable=true 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 azaltmak olduğunu bilmek önemlidir. veri gecikmesini Arka Plan Hizmeti klasörüne gidin ve adında bir dosya oluşturun ve içine şu kod dizilerini ekleyin. backend/src/services background.service.ts https://Gist.github.com/Daltonic/bc62ccefd72cec85772dedd311afbffd?embedable=true Bu kod, 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 sınıfını tanımlar. Önbellekteki 7 günden eski dosyaları silmekten sorumlu olacak bir yöntem oluşturalım. node-cron BackgroundService Bu metodu sınıfına ekleyin. Eski Dosyayı Silme BackgroundService https://Gist.github.com/Daltonic/43da392512b88b6abf068be62d14eb7e?embedable=true 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 adlı bir yöntemi tanımlar. deleteOldFiles Şimdi, dosya silme işleminin ne zaman gerçekleştirileceğini zamanlamak için node-cron paketini kullanacak bir fonksiyon yazalım. https://Gist.github.com/Daltonic/18b60b0bc1f7414a306f01f9087db435?embedable=true Bu kod, otomatik dosya temizliğini gerçekleştirmek için her gün gece yarısı (00:00) yöntemini çalıştıracak günlük bir cron işi ayarlar. deleteOldFiles 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. https://Gist.github.com/Daltonic/5f608cd3793ff6deea56c262bdfbc395?embedable=true Mükemmel, son olarak, bu arka plan işlemini başlatma sırasında sunucu sürecinin bir parçası olarak ekleyelim. dosyasına gidin ve arka plan servis dosyasını içe aktarmak için uygulama dinleyicisi yöntemini güncelleyin. backend/src/index.ts https://Gist.github.com/Daltonic/7966a7b27fa7eade2c6d1a7e60b2e530?embedable=true kullanarak arka uç servis komutunu tekrar çalıştırmalısınız; aşağıdaki görseldeki gibi bir terminal çıktısı göreceksiniz. $ yarn build && yarn start Eğer tüm arka plan servisini nasıl kodladığımı izlemek isterseniz, aşağıdaki videoyu izleyebilirsiniz; sadece zaman damgasında durmayı unutmayın. 02:16:07 https://www.youtube.com/watch?v=ZJ8YWdVTWUA&t=8167&si=4DZ27j0lqwufUgRf&embedable=true Tebrikler, artık bu eğitimin son kısmı olan hazırsınız. Sonraki Adım Bölüm 3'e 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 yolunu veren bir dizin dosyası ekleyin. Şimdi, aşağıdaki kodları buna ekleyelim. /frontend/config/index.tsx https://Gist.github.com/Daltonic/38bbe9fa325fb793dd59136ebdea8b43?embedable=true 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 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. config Ardından, Frontend dizininde 'context' adlı yeni bir klasör oluşturun ve yolunu veren bir dizin dosyası ekleyin. Aşağıdaki kodları buna ekleyin. Context API /frontend/context/index.tsx https://Gist.github.com/Daltonic/db7330a9159ff83727cda0a384fd907e?embedable=true 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. : Yukarıdaki yapılandırmaları içerecek şekilde uygulama düzenimizi güncelleyelim. gidin ve kodlarını aşağıdaki kodlarla değiştirin. Düzeni Güncelleme /frontend/app/layout.tsx https://Gist.github.com/Daltonic/2b54f191d56fa02f0ae3974bd8ffd11b?embedable=true 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. Şimdi ve bileşenlerindeki giriş butonlarını etkinleştirmemiz ve aşağıdaki bilgileri kullanarak kodlarını güncellememiz gerekiyor. Giriş Butonu /frontend/app/components/layout/Header.tsx /frontend/app/components/shared/Menu.tsx https://Gist.github.com/Daltonic/f9f60e85c18da94a5bbc97d1acb3d423?embedable=true 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 işaretinde durduğunuzdan emin olun. 02:57:59 https://www.youtube.com/watch?v=ZJ8YWdVTWUA&t=9305&si=OadhxKlut7o3iLl5&embedable=true 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. https://Gist.github.com/Daltonic/a4ecb4d168f8bb01cb8abb600653c4cf?embedable=true 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. 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. Veritabanı Yapılandırma Komut Dosyası dosya yolunu oluşturun ve aşağıdaki kodları içine ekleyin. /frontend/app/api/database.ts https://Gist.github.com/Daltonic/b699c52587b28c2d9435827837019633?embedable=true Bu kod bir SQLite veritabanı bağlantısı kurar, veritabanında GET ve POST istekleri gerçekleştirmek için iki API işlevi, ve 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. apiGet apiPost Hem bir veritabanı düz dosyası hem de tüm içeriklerimizi tutacak bir tablo oluşturmamız gerekiyor. dosya yolunu oluşturun ve aşağıdaki kodları buna ekleyin. Veritabanı Göçü Komut Dosyası /frontend/app/api/migrations.ts https://Gist.github.com/Daltonic/4c213153fe53334fcf8444666587d6a5?embedable=true 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, dizinine işaret eden bir terminalde aşağıdaki komutu çalıştırın. /frontend $ cd frontend $ npx esrun app/api/migrations.ts Bu işlemin ön uç dizininin kökünde 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 çalıştırmak aynı şekilde çalışmalıdır. movies.db $ yarn migrate Görsel yardım için aşağıdaki videoyu izleyin, sadece noktasında durdurun. 03:10:54 https://www.youtube.com/watch?v=ZJ8YWdVTWUA&t=10679&si=-uhv8Zw0T3Gx0XgQ&embedable=true 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. 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. dosya yolunu oluşturun ve aşağıdaki kodları buna ekleyin. Film Son Noktası Oluşturma /frontend/app/api/movies/create/route.ts https://Gist.github.com/Daltonic/bf8a431ec00aa71491ae71781fb99278?embedable=true 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. 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. dosya yolunu oluşturun ve aşağıdaki kodları buna ekleyin. Film Son Noktasını Güncelle /frontend/app/api/movies/update/route.ts https://Gist.github.com/Daltonic/2ed7d44cb8efe091675ebc0fc1bdf27c?embedable=true 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. Bir filmi silmek için gerekli bilgiler arasında filmin kullanıcı kimliği ve slug'ı bulunur. dosya yolunu oluşturun ve aşağıdaki kodları içine ekleyin. Film Son Noktasını Sil /frontend/app/api/movies/delete/route.ts https://Gist.github.com/Daltonic/aa7ab36b982ad1f377b2a4d26930dd8d?embedable=true 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. 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. dosya yolunu oluşturun ve aşağıdaki kodları buna ekleyin. Tüm Filmler Son Noktası /frontend/app/api/movies/all/route.ts https://Gist.github.com/Daltonic/23bb2aa55446995dad87084bb7968c3e?embedable=true 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 bir filmi almak için gereken veri, bir filmin slug'ıdır. dosya yolunu oluşturun ve aşağıdaki kodları buna ekleyin. Tek Film Son Noktası /frontend/app/api/movies/[slug]/route.ts https://Gist.github.com/Daltonic/64e069e9bafd026a83796eaa95334ac8?embedable=true 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 zaman damgasında durduğunuzdan emin olun. 03:48:22 https://www.youtube.com/watch?v=ZJ8YWdVTWUA&t=10679&si=3Ynq9tNLx5SZXHBE&embedable=true 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 dizininde oluşturduğumuz uç noktalarla etkileşim kurmak için bir hizmet oluşturarak başlayacağız. api dosya yolunu oluşturun ve aşağıdaki kodları içine ekleyin. /frontend/app/services/api.service.ts https://Gist.github.com/Daltonic/fdf65c7ffaf3ea8219c617cdb7c96375?embedable=true 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 bulunan dosyayı aşağıdaki kodlarla güncelleyelim. /frontend/app/pages/create/page.tsx https://Gist.github.com/Daltonic/0ec440d6dfc2b46e07ecec3e81f532c6?embedable=true Bu kodda orijinaline göre yapılan değişiklikler şunlardır: fonksiyonunu içe aktardım ve fonksiyonunda kullanarak yeni bir film oluşturdum. api.service createMovie handleSubmit fonksiyon çağrısına parametresi eklendi ve kullanıcının adresi kancasından geçirildi. createMovie userId useAccount fonksiyonu, tarafından döndürülen sözü işlemek için kullanacak şekilde güncellendi. handleSubmit createMovie toast.promise fonksiyonundaki fonksiyon çağrısına hata işleme eklendi. handleSubmit createMovie 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 dizinindeki dosyayı aşağıdaki kodlarla güncelleyelim. /frontend/app/pages/movies/edit/[slug]/page.tsx https://Gist.github.com/Daltonic/63ddb6e3c65e3bcd2665ab0e3ffb6205?embedable=true Orijinalden farklı olarak kodda yapılan güncellemeler şunlardır: dizininden ve fonksiyonlarını içe aktardım ve bunları sırasıyla kancasında ve fonksiyonunda kullandım. @/app/services/api.service fetchMovie updateMovie useEffect handleSubmit Film verilerini almak için metodunu fonksiyonuyla değiştirdim. posters.find() fetchMovie Güncellenen film ayrıntılarıyla fonksiyonunu çağırmak için fonksiyonu güncellendi. updateMovie handleSubmit fonksiyonundaki fonksiyon çağrısına hata işleme eklendi. handleSubmit updateMovie Bu değişiklikler, orijinal kodun yerel 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. posters 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. bulunan dosyayı aşağıdaki kodlarla güncelleyin. /frontend/app/pages/page.tsx https://Gist.github.com/Daltonic/97cb49662ed70be9b183b4f601b529d6?embedable=true Ana sayfada yaptığımız değişiklikler şunlardır: dosyasından fonksiyonunu içe aktardım ve API'mizden film verilerini almak için kancasında kullandım. ./services/api.service fetchMovies useEffect Yerel verilerini, API'mizden veri çeken fonksiyon çağrısıyla değiştirdik. posters fetchMovies durumunu ayarlamadan önce tarafından döndürülen sözün çözülmesini beklemek için anahtar sözcüğü eklendi. movies fetchMovies await 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. dizinindeki dosyayı aşağıdaki kodlarla güncelleyin. /frontend/app/pages/account/page.tsx https://Gist.github.com/Daltonic/ba714bfa557f10aebacfa8b5ac3d7111?embedable=true Sayfada yapılan değişiklikler şunlardır: dizininden fonksiyonunu içe aktardım ve API'mizden film verilerini almak için kancasında kullandım. @/app/services/api.service fetchMovies useEffect Yerel verilerini, API'mizden veri çeken fonksiyon çağrısıyla değiştirdik. posters fetchMovies Kullanıcıya özel film verilerini almak için fonksiyonuna argüman olarak geçirildi. fetchMovies address Film listesini oluşturmadan önce için koşullu kontrol kaldırıldı, çünkü fonksiyonu artık bu mantığı işliyor. address fetchMovies Yükleme iskeletini görüntülemek için koşullu ifade basitleştirildi, artık yalnızca duruma bağlı. loaded 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. dizininde bulunan dosyayı aşağıdaki kodlarla güncelleyin. /frontend/app/pages/movies/[slug]/page.tsx https://Gist.github.com/Daltonic/5e37c94db3d73005a481ffd0cd141140?embedable=true Burada bazı büyük değişiklikler yaptık! İşte yaptıklarımızın özeti: , ve fonksiyonlarını dizininden içe aktardık ve bunları API uç noktalarımızla etkileşim kurmak için kullandık. deleteMovie fetchMovie fetchMovies @/app/services/api.service Film verilerini almak için yerel verileri API çağrılarıyla değiştirdim. fonksiyonunu kullanarak film silme işlevi uygulandı. deleteMovie Bir filmi silerken bildirim görüntülemek için kullanıldı. toast.promise yerel verileri kaldırıldı ve yerine API çağrıları konuldu. posters fonksiyonu fonksiyonunu çağıracak ve yanıtı işleyecek şekilde güncellendi. handleSubmit deleteMovie kancasını ve fonksiyonlarını çağıracak şekilde güncelledik. useEffect fetchMovie fetchMovies 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 zaman damgasında durduğunuzdan emin olun. 04:57:41 https://www.youtube.com/watch?v=ZJ8YWdVTWUA&t=14070&si=XCKxX3HvX3RjtNHY&embedable=true 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 adresinde değerlendirilebilir. /frontend/app/components/home/Banner.tsx 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 adresinde değerlendirilebilir. /frontend/app/components/home/Posters.tsx 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 adresinde değerlendirilebilir. /frontend/app/components/home/PosterUI.tsx 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 adresinde değerlendirilebilir. /frontend/app/components/home/Subscription.tsx 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 adresinde değerlendirilebilir. /frontend/app/components/layout/Header.tsx 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 adresinde değerlendirilebilir. /frontend/app/components/layout/Footer.tsx 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 adresinde değerlendirilebilir. /frontend/app/components/shared/Menu.tsx 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 adresinde değerlendirilebilir. /frontend/app/components/shared/MovieCard.tsx 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 adresinde değerlendirilebilir. /frontend/app/components/shared/Uploaded.tsx 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. bulunan dosyayı aşağıdaki kodlarla güncelleyin. /frontend/app/components/shared/uploader.tsx https://Gist.github.com/Daltonic/2aee8838dedcd6f14ef0f25103106a3a?embedable=true Bu bileşende yapılan değişiklikler şunlardır: : 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 işlevini içerir. Dosya Yükleme İşlevi api.service uploadFile : Güncellenen kod yükleme ilerlemesini izler ve kullanıcı arayüzünde görüntüler. İlerleme Takibi : Güncellenen kod, dosya yükleme işlemi için hata işlemeyi içeriyor. Hata İşleme : Güncellenen kod, düzenli ifade kullanarak daha sağlam bir dosya türü doğrulaması kullanır. Dosya Türü Doğrulaması : 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ı. Kod Organizasyonu : 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. Kullanıcı Arayüzü Güncellemeleri 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. https://www.youtube.com/watch?v=ZJ8YWdVTWUA&t=17861&si=LNxLwBkKeE7kH3Xt&embedable=true 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 çalıştırın. $ yarn build && yarn start 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 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 yönetiyorum ve blockchain alanındaki en son trendler hakkında düzenli olarak çevrimiçi makaleler yayınlıyorum. Dapp Mentors'un Dapp Mentors adlı bir YouTube kanalı
