🎮 Angular E-Ticaret Macerası 🚀
Hoş geldin genç kahraman! 🦸♂️
Önünde muhteşem bir yolculuk var. Angular framework'ü ile kendi e-ticaret siteni inşa edeceksin!
Her seviyeyi tamamladıkça yeni beceriler kazanacak ve daha güçlü bir yazılımcı olacaksın! 💪
Maceraya başlamadan önce yazılım dünyasının temel mantığını anlamalısın. Bir e-ticaret sitesinin nasıl çalıştığını düşün!
📋 Görevler:
Amazon veya Trendyol'u aç, nasıl çalıştığını incele (menüler, ürün kartları, sepet)
Bir web sitesinin "yapı taşları"nı düşün: Sayfa, buton, resim, yazı...
Angular'ın ne olduğunu ve neden kullanıldığını araştır (5 dakikalık bir video yeterli!)
🎁 Ödül: +10 XP + "Web Kaşifi" Rozeti 🔍
Her kahramanın silahlarına ihtiyacı var! Senin silahların ise Node.js, Angular CLI ve bir kod editörü olacak.
📋 Görevler:
Node.js'i bilgisayarına kur (nodejs.org)
Angular CLI'yi yükle (npm install -g @angular/cli)
VS Code editörünü kur ve keşfet
İlk Angular projesini oluştur: ng new mete-shop
🎁 Ödül: +15 XP + "Hazırlıklı Savaşçı" Rozeti ⚔️
İlk komponent'ini oluşturma zamanı! Ana sayfa her web sitesinin kalbidir.
📋 Görevler:
Component nedir? Neden kullanılır? (Lego parçaları gibi düşün!)
ng generate component home komutuyla ana sayfa component'i oluştur
Basit bir "Hoş Geldiniz" yazısı ve mağazanın ismini ekle
Projeyi çalıştır: ng serve ve tarayıcıda gör!
🎁 Ödül: +20 XP + "İlk İnşaatçı" Rozeti 🏗️
Siyah-beyaz bir site sıkıcı! Şimdi siteni renklendir ve canlandır.
📋 Görevler:
CSS nedir? Neden önemli?
Ana sayfana renk, arkaplan ve yazı stilleri ekle
Bir logo veya banner tasarla (Canva veya başka bir araç kullanabilirsin)
Responsive tasarım nedir? Mobilde de güzel görünsün!
🎁 Ödül: +20 XP + "Tasarım Ustası" Rozeti 🎨
Bir e-ticaret sitesinde birden fazla sayfa olmalı: Ana sayfa, Ürünler, Sepet, İletişim...
📋 Görevler:
Routing (yönlendirme) kavramını öğren
Ürünler, Sepet ve İletişim sayfaları için component'ler oluştur
Menü oluştur ve sayfalar arası geçişi sağla
Aktif sayfayı vurgula (routerLinkActive)
🎁 Ödül: +25 XP + "Yol Gösterici" Rozeti 🧭
Şimdi ürünlerini gösterme zamanı! Önce TypeScript'te veri yapısını öğreneceksin.
📋 Görevler:
TypeScript interface nedir? Ürün modeli oluştur (isim, fiyat, resim)
Bir dizi içinde 5-10 örnek ürün oluştur
*ngFor kullanarak ürünleri listele
Her ürün için kart tasarımı yap
🎁 Ödül: +30 XP + "Ürün Yöneticisi" Rozeti 📊
E-ticaretin kalbi sepettir! Kullanıcı ürünleri sepete ekleyebilmeli.
📋 Görevler:
Service nedir? CartService oluştur
"Sepete Ekle" butonu ekle
Sepetteki ürün sayısını göster
Sepet sayfasında ürünleri listele ve toplam fiyatı hesapla
🎁 Ödül: +35 XP + "Sepet Sihirbazı" Rozeti 🎩
Yüzlerce ürün arasında arama yapabilmek süper bir özellik!
📋 Görevler:
Arama çubuğu oluştur
Pipe kullanarak ürünleri filtrele
Kategoriye göre filtreleme ekle
Fiyata göre sıralama yap
🎁 Ödül: +30 XP + "Arama Dedektifi" Rozeti 🕵️
Artık hazırsın! Gerçek bir API'den veri çekmeyi öğren.
📋 Görevler:
HTTP nedir? API nedir?
HttpClient ile FakeStore API'den ürünleri çek
Observable ve subscribe kavramlarını öğren
Yükleme (loading) göstergesi ekle
🎁 Ödül: +40 XP + "API Bağlayıcısı" Rozeti 🔌
Tüm dünya senin projenı görmeli! Siteni internete yayınla!
📋 Görevler:
ng build --configuration production ile projeyi derle
GitHub hesabı oluştur ve projeyi yükle
Netlify veya Vercel'de ücretsiz hosting al
Siteyi arkadaşlarınla paylaş! 🎉
🎁 Ödül: +50 XP + "Angular Master" Ünvanı 👑 + Tüm Rozetler!
"Her büyük yazılımcı bir gün senin gibi başladı. Fark yaratan şey, her gün bir adım daha ileri gitmek! 🌟"
- Senin geleceğin parlak, sadece devam et! 💪
🎮 Oyun Kuralları
✅ Her gün en az 1 görev tamamla
✅ Anlamadığın yerleri sormaktan çekinme
✅ Kod yazarken hata yapmaktan korkma - hatalar en iyi öğretmendir!
✅ Sıkıldığında ara ver, sonra geri dön
✅ Kendi fikirlerini ekle - bu senin projen!
✅ En önemlisi: EĞLEN! 🎉