VionexTube: Reklamsız ve Hızlı Bir Video Platformu İnşası
İzleyicilerin reklamlara, hesap zorunluluklarına ve hantal arayüzlere mahkum edilmediği, %100 özgür bir platform kurmak istedim. Bu yazıda, VionexTube'u geliştirirken arka planda PHP ile veri çekme (cURL) süreçlerini, mobil arayüzde (UI/UX) Native App hissiyatını yakalamak için verdiğim CSS savaşlarını ve Google'ın videoları keşfetmesi için uyguladığım SEO taktiklerini adım adım paylaşıyorum.
1. Geliştirme Evreleri ve Mimari
API Motoru ve Veri Çekimi (Backend)
Sistemin kalbinde, veritabanına ihtiyaç duymadan saniyeler içinde videoları getiren bir yapı yatıyor. Resmi kotalara takılmamak için api_search.php ve api_video.php dosyalarını yazdım. İç API uç noktalarına PHP cURL ile bağlanıp, gelen karmaşık JSON verilerini temizleyerek sadece başlık, kapak fotoğrafı ve kanal ismi gibi gerekli bilgileri JavaScript'e ileten kusursuz bir köprü oluşturdum.
Mobil Arayüzde "Native App" Hissiyatı (UI/UX)
Bir web sitesinin telefonda "gerçek bir uygulama" gibi hissettirmesi gerekir. Masaüstünde harika duran tasarım, mobilde duvara yaslanıyor veya menüleri sıkıştırıyordu. Önerilen videolar alanını şık bir border ve yuvarlak hatlı bir kutu içine aldım. Yukarıdaki kategori çipleri (chips) aşağı kaymasın diye position: sticky; uyguladım. Mobilde işe yaramayan "Sinema Modu" gibi butonları CSS ile gizleyerek temiz bir alan yarattım.
SEO ve Örümcek Ağı (Spider Crawling) Taktiği
JS ile dinamik veri çeken bir sitenin Google'da gözükmesi çok zordur. Milyonlarca videoyu indexletmek için onclick div'lerini, arama motoru botlarının (spider) takip edebileceği <a href=""> etiketlerine çevirdim. Dinamik bir sitemap.php oluşturarak Google'ın her girişte trendlerdeki 30 videoyu alıp, içlerindeki önerilen videolara daldan dala atlayarak sonsuz bir döngüde sitemi taramasını sağladım.
2. Geliştirici Günlükleri: Krizler ve Çözümler
Her pikselin arkasında saatlerce süren deneme-yanılma süreçleri var. İşte en zorlu bug'lar ve çözüm yolları:
Video Oynatıcısının Kaybolma Sorunu
Mobilde test yaparken, iframe bazen yüksekliğini kaybedip ekranda yok oluyordu. Çözüm: CSS'te "Aspect-Ratio Fallback" tekniği kullandım. Kapsayıcı dive padding-top: 56.25%; verip, videoyu position: absolute; ile içine sabitleyerek hangi ekranda açılırsa açılsın kusursuz bir 16:9 oranı yakaladım.
Boş veya Undefined Veri Çökmesi
Kullanıcı, açıklaması olmayan bir videoya girdiğinde veya geçmişi sildiğinde tüm sayfa dizilimi çöküyordu. Çözüm: app.js içinde Try/Catch blokları kullandım, boş string kontrolleri yaptım ve geçmişi temizleme butonunu localStorage.setItem('vionex_history', '[]') ile kökünden sıfırlayacak şekilde güncelledim.
Ekran Kenarına Yapışan Öğeler
"Sıradaki Videolar" listesi ve "İzleme Geçmişi" butonları telefonda ekran sınırlarına sıfıra sıfır değiyordu. Çözüm: Sistemi baştan aşağı bozmak yerine, sadece ilgili alanlara CSS ile padding: 0 16px !important; vererek basit ama etkili bir şekilde öğelerin ekranda şık bir şekilde ortalanmasını sağladım.
Front-End Mimarları İçin İpuçları
- Aşırı Geliştirmeden Kaçının: Bazen "iki basit div boşluğunu düzeltmek" için tüm grid/flex mimarisini baştan yazmak, çalışan bir sistemi kilitler. Çalışan stabil bir sürümünüz (örn: V7) varsa, nokta atışı CSS düzeltmeleriyle sadeliği koruyun.
- Sosyal Medya Paylaşım (Open Graph): Siteniz ne kadar hızlı olursa olsun; WhatsApp'ta link atıldığında videonun kocaman kapak fotoğrafı (thumbnail) gözükmüyorsa tıklanmaz. Sayfa yapınızı (watch.html'den watch.php'ye) dinamik meta etiketleri basacak şekilde kurgulayın.
- "Native" Uygulama Deneyimi: Kullanıcının tarayıcıda olduğunu unutturmalısınız. Menülerin animasyonlu kayması, butonlara basıldığında (active state) ufak
transform: scale(0.98);geri bildirimleri, kaliteyi belirleyen en büyük detaylardır.