Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitmen tarafından sunulan yazılım geliştirme eğitim serisinin üçüncü bölümüdür. Eğitmen, Vue.js, Vue Router, Vuex ve Firebase teknolojilerini kullanarak bir film uygulaması geliştirme sürecini adım adım göstermektedir.
- Video, single page application (SPA) geliştirme sürecini kapsamaktadır. İçerikte proje ayarları, Bootstrap 4 ile tasarım, Firebase entegrasyonu, Vue Router ile rotalar tanımlama, Vuex store kullanımı, film verilerini çekme ve gösterme işlemleri ele alınmaktadır. Ayrıca film kartlarının oluşturulması, responsive tasarım ve URL parametreleri gibi konular da işlenmektedir.
- Eğitim serisi, film uygulamasının geliştirilmesini detaylı şekilde göstermekte olup, bir sonraki videoda detay ekranı ve bilet ekranı gibi konuların işleneceği belirtilmektedir. Video, gerçek hayatta kullanılabilecek bir uygulama geliştirme odaklı olup, kod yazarken isimlendirme kuralları ve kod düzenlemesi hakkında pratik bilgiler de içermektedir.
- Single Page Application Serisi - Video 3
- Bu video, single page application serisinin üçüncü videosu olup, ilk kod yazılacak ve uygulamanın home sayfası yapılacak.
- Önceki videolarda ne yapılacağı ve nasıl yapılacağı anlatılmıştı.
- Videoda JavaScript, Vue.js ve Vue Router kullanılarak bir uygulama geliştirilecek.
- 00:45Gelecek Planlar
- Daha fazla video çekilecek ve single page application serisi tamamlandıktan sonra Visuals serisi bitirilecek.
- JavaScript, kişisel gelişim ve uzaktan çalışma konularında da videolar çekilecek.
- Videoların altında sorular sorulduğunda, mümkün olduğunca yardımcı olunmaya çalışılıyor.
- 01:15Proje Hazırlığı
- Webex Simple'dan bir proje oluşturulup, Vue ve Vue Router için gerekli paketler yükleniyor.
- npm run dev komutu ile proje ayağa kaldırılıyor.
- Uygulama, gerçek hayatta kullanılabilecek bir uygulama olacak ve diğer kaynaklarda bu kadar kapsamlı bir örnek bulunmuyor.
- 04:33Bootstrap ve Firebase Ekleme
- Uygulamada Bootstrap 4 kullanılarak, CDN üzerinden CSS ekleniyor.
- Firebase uygulaması oluşturulup, web uygulamasına entegre ediliyor.
- Firebase'in API'si kullanılarak uygulama geliştirilecek, View Firebase paketi kullanılmayacak.
- 06:55Vue Router Kurulumu
- Vue Router ve VueX paketleri import ediliyor ve Vue'a entegre ediliyor.
- Router nesnesi oluşturulup, ana sayfa için bir route ekleniyor.
- Home komponenti oluşturulup, uygulamaya dahil ediliyor.
- 09:48Router View Ekleme
- Router'ın oluşturduğu komponentlerin sayfada gösterilmesi için router-view etiketi eklenecek.
- App elementi Vue'a dönüştürüldükten sonra, içindeki Vue elementleri işlenecek.
- Router-view etiketi eklendikten sonra "Hello World" mesajı sayfada görüntüleniyor.
- 11:09Firebase ve Servis Oluşturma
- Uygulamada Firebase kullanılıyor ve veri Firebase üzerinden alınacak.
- Servis klasörü oluşturuluyor, servis bir uygulamada backend ile konuşan, istek yapan ve veri çeken bir yapıdır.
- İsimlendirmede kural olarak class'lar büyük harfle (Foo), instance'lar küçük harfle (foo) yazılır.
- 13:50Vuex Store Oluşturma
- Vuex için store klasörü oluşturuluyor ve içinde state, getters, mutations ve actions boş objeler tanımlanıyor.
- Main.js dosyasında Vuex store ayağa kaldırılıyor ve store options içeriği buraya aktarılıyor.
- Router options için ayrı bir dosya oluşturuluyor ve düzenlemeler yapılarak kod daha düzenli hale getiriliyor.
- 18:05Firebase Veri Çekme ve Action Oluşturma
- Servis içinde Firebase'den veri çekmek için fetch metodunu kullanılıyor, bu bir promise döndürüyor.
- Vuex store içinde actions kısmına fetchMovies adında bir action ekleniyor ve burada servis fetch metodunu çağırıyor.
- Home komponenti ayağa kalktığı anda bu action çağrılacak şekilde düzenlenecek.
- 23:17Vuex Store ve Fetch İşlemi
- Home komponenti ayağa kalktığı anda (created) store'una fetch movies action'ı dispatch ediyor.
- Dispatch işlemi servise gidip fetch metodunu çağırıyor ve firebase'den veri çekiyor.
- Firebase'den gelen veri snapshot olarak alınarak mutation'a (set movies) gönderilerek store güncelleniyor.
- 27:42Header ve Loader Komponentleri
- App header view adında bir komponent oluşturuluyor ve bootstrap navbar ile router-link kullanılarak header tasarımı yapılıyor.
- Loader view adında bir komponent oluşturuluyor ve CSS keyframe ile dönen bir-loader efekti uygulanıyor.
- Loader sadece is-loading true olduğunda ekranda gösteriliyor ve veri çekme işlemi bittiğinde is-loading false yapılıyor.
- 33:28Movie Komponenti ve Veri Gösterimi
- Movie view adında bir komponent oluşturuluyor ve her movie için ekrana "hello" yazısı basılıyor.
- v-for ile döngü oluşturulurken her eleman için key attribute'ı belirtmek gerekiyor.
- Vuex store'dan alınan movies verisi kullanılarak ekrana altı tane movie gösteriliyor.
- 37:50Kod Hatası Çözümü
- Kodda bir hata oluştu ve bu hatanın nedeni yanlış bir syntax olduğu belirtiliyor.
- Projede "fifty ikibinonbeş taksim" içindeki bir obje eksik olduğu için hata veriyor.
- Hata çözümü için bir paketin yüklenmesi ve "presets" kısmına bir şeyin eklenmesi gerekiyor.
- 39:11Kod Düzenlemeleri
- Kodu tekrar çalıştırdıktan sonra farklı bir hata ("properties movies of undefined") alınıyor.
- Hata çözümü için bir değişiklik yapıldı ve kod tekrar çalıştı.
- Kodda daha kompleks işlemler yapılabilir, örneğin değişkenler farklı gruplara ayrılabilir.
- 40:59Komponent Oluşturma
- Bir komponent oluşturuldu ve "store" içinde kaydedildi.
- Komponent içinde "text center" ve "left" gibi özellikleri kullanıldı.
- Section konteyneri oluşturuldu ve "py-5" sınıfı ile yukarıdan ve aşağıdan 5 piksel boşluk bırakıldı.
- 43:52Bootstrap Kart Kullanımı
- Bootstrap kart kullanılarak bir tasarım oluşturulmaya çalışılıyor.
- Kartlar üçerli gruplara ayrılıp yan yana gösterilecek şekilde düzenlendi.
- Her bir kartta "img", "card-title", "card-text" gibi Bootstrap elemanları kullanıldı.
- 46:31Veri Bağlantısı
- Kartlara gelen "movie" props'i kullanılarak "original-title" ve "overview" gibi veriler gösterildi.
- "average-rating" değeri için "toFixed(2)" fonksiyonu kullanılarak ondalık sayı formatı belirlendi.
- Bootstrap kart yapısında "card-footer" kullanılarak alt kısımlar düzenlendi.
- 50:17Poster Resmi Bağlantısı
- Kartlara poster resmi eklemek için "poster-path" özelliği kullanılıyor.
- Poster resminin URL'si için "https://image.tmdb.org/t/p/w500" formatı kullanılacak.
- "computed property" kullanılarak dinamik bir poster URL'si oluşturuldu.
- 53:46CSS Düzenlemeleri
- Class "kart" için max-width 350 piksel ve float left özellikleri eklenecek.
- Kart içeriğine div etiketleri eklenerek düzenleme yapılacak.
- Her bir karta marjin değeri verilerek daha düzenli bir görünüm sağlanacak.
- 57:14Gruplandırma İşlemi
- İçeriklerin üçerli gruplandırılması için movies for each döngüsü kullanılacak.
- Her üç ayda bir grupta boş bir div eklenerek içerikler gruplandırılacak.
- Gruplandırma işlemi tamamlandıktan sonra kartlar daha düzenli bir şekilde ekranda görüntülenecek.
- 1:03:00Link Ekleme ve Düzenleme
- Kartlara link vermek için compute property kullanılarak movie path değeri eklenecek.
- Linkler için "slash slash" işaretleri kullanılacak ve id değerleri eklenecek.
- Conditional mediaquer kullanılarak farklı çözünürlüklerde içeriklerin boyutları ayarlanacak.
- 1:07:16Video Kapanışı
- Video yaklaşık bir saat sürmüş ve sunucu uzun süredir ekran görüntüsü çekiyor.
- Bir sonraki videoda kartların detayları ve bilet ekranı işlenecek.
- İzleyicilerden kanala abone olmaları, beğenmeleri ve paylaşmaları isteniyor.