Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir konuşmacının Vue.js kullanarak alışveriş uygulaması geliştirme sürecini adım adım anlattığı bir eğitim içeriğidir.
- Eğitim, Vue.js'te komponent oluşturma ve kullanma konusunu ele almaktadır. Konuşmacı, "Hello World" uygulamasından başlayarak, ürün listesi oluşturacak bir komponent oluşturma sürecini göstermektedir. Video, HTML, script ve style bölümlerinin kullanımı, v-for döngüsü ile veritabanından ürün listeleme, Bootstrap entegrasyonu ve arayüz tasarımı gibi temel konuları kapsamaktadır.
- Eğitimde ayrıca ürün detay sayfasına yönlendirme, ücretsiz teslimat etiketi oluşturma, ürün özelliklerinin listelenmesi, fiyat hesaplama, sayısal input kullanımı ve para birimi seçimi gibi pratik uygulamalar da gösterilmektedir. Video, bir sonraki bölümde ürün listeleme için JSON verisi kullanarak komponentin nasıl kullanılacağına değineceğini belirterek sona ermektedir.
- 00:06Alışveriş Uygulaması Projesi
- Son bölümde oluşturulan klasörde, alışveriş uygulaması için ürün listeleme komponenti oluşturulacak.
- Projenin repositorisi üzerinden ilerlenecek ve son değişiklikler burada bulunacak.
- Uygulama ayağa kaldırıldığında basit bir arayüz oluşturmuş, ancak backend'e henüz ihtiyaç yok.
- 01:42Proje Yapısı
- Tüm bileşenler bir araya getirilecek compound ve her component component klasörünün altına konulacak.
- Page klasörü eklenerek about, login gibi sayfalar oluşturulacak.
- Ana sayfada tüm ürünlerin listesi Amazon veya Apple gibi sitelerin listeleme mantığıyla gösterilecek.
- 02:49Component Kavramı
- Component, HTML komponentlerine benzer mantıkla çalışır ve kendi bileşenlerimizi oluşturabiliriz.
- Component'e parametre göndermek için props özelliği kullanılır.
- Component içinde HTML ve JavaScript kodları bulunur, HTML kısmı component'i render eder.
- 04:56Bootstrap Kullanımı
- Projeye Bootstrap eklenerek arayüz tasarımı kolaylaştırılacak.
- Bootstrap, HTML'deki buton gibi bileşenleri daha kolay kullanabilmek için komponent haline getirmiştir.
- Bootstrap 4.5.3 kullanılıyor, ancak gelecekte 5.0 veya daha yeni versiyonlar kullanılabilir.
- 09:16Bootstrap Kurulumu ve Kullanımı
- Bootstrap'i kullanabilmek için önce saat ve saat loader'ı yüklemek gerekiyor.
- Bootstrap'i kullanabilmek için import etmek gerekiyor, aksi takdirde CSS uyumlu hale getirilmiyor.
- Bootstrap ile butonlar ve diğer bileşenler kolayca eklenebiliyor.
- 11:33Ürün Listesi Tasarımı
- Hello world videosu değiştirilmeden tüm içerik kopyalanarak ürün listesi tasarımı yapılacak.
- Ürün listesi alt alta gösterilecek ve butonlar eklenecek.
- Kullanıcılar CSS konusunda değişiklikler yapabilir ve pull request olarak gönderebilirler.
- 13:13HTML ve Style Yapısı
- HTML yapısında HD, script ve style bölümleri bulunuyor, ancak style kısmı çok önemsenmiyor.
- Background kaldırı özelliği kullanılarak ana uygulamanın arka planı taşınabiliyor.
- Ürünlerin listesinin arkasında boşluk bırakılıyor ve beyaz renkler değiştirilebiliyor.
- 14:06Dinamik İçerik Oluşturma
- Dinamik içerik oluşturmak için veritabanından ne tutulacağı ve ne getirileceği karar verilmeli.
- V for ve for döngüsü kullanılarak verilen data üzerinde teker teker gezip her birine aydınlama veriliyor.
- For döngüsü, div içerisindeki tüm her şeyi tekrar ettiriyor ve kaç tane ürün gelirse ondan o kadar ürün oluşturuluyor.
- 15:29Veri Kaynağı ve Alternatifler
- Ürünlerin nereden geleceği, API'dan çekilecek veya component içerisinde gösterilecek veriler olabilir.
- Component'ın kendisi API'dan çekebilir veya component içerisinde göstereceği veriyi "items" olarak gösterebilir.
- "Hello World" isimli component anasayfada gösterilecek ve kendi içerisinde datayı oluşturacak.
- 17:52Bootstrap Kullanımı
- Bootstrap'ın style pro özelliği kullanılarak satır şeklinde bir yapı oluşturuluyor.
- Bootstrap 12'ye bölüyor ve her bir satır için farklı bileşenler oluşturuluyor.
- İlk satırda bir image gösteriliyor ve src'ye bağlı olarak for döngüsünde dönen her bir elemana ait imaj getiriliyor.
- 20:06Ürün Bilgilerinin Gösterimi
- Ürün bilgilerini veren bileşen 5-3-2-1 şeklinde bölünmüş ve item'ın fiyatı getiriliyor.
- Ürün detay sayfasına gitmek için link kullanılıyor.
- Ürün başlığı, fiyatı, satıcısı, ücretsiz teslimat durumu ve teslimat süresi gibi bilgiler gösteriliyor.
- 23:31Dil Desteği ve Ürün Özellikleri
- Dil desteği için "international" kullanılarak sayfa Türkçe görüntüleniyorsa "ücretsiz teslimat", İngilizce görüntüleniyorsa "free delivery" yazılabilir.
- Ürünün özellikleri için farklı ürünler için farklı özellikler yazılabilir (telefon için kutu, araba için kilometre gibi).
- Ürün özellikleri için text editör veya textbox kullanılabilir, ayrıca kısıtlamalar da eklenebilir.
- 25:01HTML Render Etme ve Komponent Oluşturma
- Dört özelliği listeleyen tag ile HTML render etmek için "view html" parametresi kullanılıyor.
- Bir değişkenin veya JavaScript tarafında oluşmuş olan bir variable'ın tüm datasını köşeli parantezler içerisinde render edebiliriz.
- Komponent oluştururken "v for" parametresi kullanılarak veriler bağlanıyor.
- 26:49Ürün Özellikleri ve Para Birimi
- Ürün için sayısal input oluşturuluyor ve ürün adedi eksi bire düşmemesi gerekiyor.
- Fiyat hesaplamasında para birimi (dolar, euro, TL) ayrı tutulmalı, aksi takdirde çarpma işlemi yapılamıyor.
- Para birimi için "money" adında bir field oluşturuluyor ve içinde dolar, euro veya TL gibi para birimleri bulunuyor.
- 30:14Komponent Kullanımı ve Gelecek Planlar
- Oluşturulan komponent "product" olarak isimlendiriliyor ve uygulamada import ediliyor.
- Bir sonraki videoda ürün listeleme için JSON dönebilecek bir endpoint geliştirilecek.
- Ürün detayları için farklı komponentler oluşturulabilir: resim gösteren kısım, butonlar, özellikler alanı gibi.
- 34:19Uygulama Yapısı
- Ürün özellikleri farklı nesnelere ait olabilir: bazıları pro nesnesine, bazıları fiyatla ilgili kısımlar başka bir servisten gelebilir.
- Ana komponent içerisinde JSON array for döngüsüyle dönüp gösteriliyor.
- Oluşturulan komponent son halini repository'ye gönderilecek.