Buradasın
Vue.js ile Google Cloud Platform'da Frontend Geliştirme Eğitimi
youtube.com/watch?v=zNQPwrfcY3AYapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitim serisinin parçası olup, konuşmacı Vue.js kullanarak frontend uygulaması geliştirme sürecini anlatmaktadır.
- Video, Vue.js'in kurulumundan başlayarak, Node.js ve npm paket yöneticisinin önemi, Vue.js CLI'nin kurulumu ve bir Vue.js projesi oluşturma sürecini göstermektedir. Ayrıca, Vue.js'in temel komutları (start, build, lint), dependency'leri ve proje yapısı detaylı olarak anlatılmaktadır. Eğitim, mikro servis mimarisi ve birden fazla programlama dili kullanılarak geliştirilen bir alışveriş sitesi örneği üzerinden ilerlemektedir.
- Konuşmacı, bir sonraki bölümde veritabanı kurulumu ve frontend'de component oluşturma konularına değineceğini belirtmektedir. Video, TypeScript ile geliştirilen kodların JavaScript'e dönüştürülmesi ve bu JavaScript'in index.js dosyası üzerinden nasıl çalıştırıldığı konusunda temel bilgiler sunmaktadır.
- 00:06Vue.js Projesi Oluşturma
- Önceki bölümde Spring.io sitesi üzerinden gerekli kütüphaneler belirlenerek proje oluşturulmuştu.
- Bu bölümde projeye Vue.js ile frontend oluşturulacak.
- Manuel olarak teker teker yapmak yerine Vue.js CLI kullanmak daha mantıklı bir yöntemdir çünkü bağımlılıkları yönetmek daha kolaydır.
- 01:30Vue.js CLI Kurulumu
- Vue.js CLI'nin kurulumu için npm install vue-cli komutu kullanılır.
- Node.js'in yüklü olması gerekiyor, en az 8.90 veya üstü bir versiyon önerilir.
- Farklı Node.js versiyonları ile çalışmak için npm kullanılır.
- 05:10Vue.js CLI ile Proje Oluşturma
- Proje, mevcut projenin web klasöründe oluşturulacak.
- Vue.js CLI ile proje oluşturmak için "vue create" komutu kullanılır.
- Proje oluştururken Babel ve ES6'nin kullanılması ve Vue versiyonu seçilebilir.
- 08:57Proje Yapılandırması
- Proje oluşturulduktan sonra "cd web" ve "yarn start" komutları ile proje ayağa kaldırılır.
- Proje localhost:8080 veya makine IP'si üzerinden erişilebilir.
- Proje yapısında "src" klasörü Vue.js kodları için, "public" klasörü ise JavaScript dosyası için kullanılır.
- 10:26Vue.js Temel Yapısı
- Tarayıcı HTML, JavaScript ve CSS'i bilir, diğer teknolojileri bilmez.
- TypeScript ile geliştirilen kodlar JavaScript'e dönüştürülür.
- Tüm JavaScript kodları bir JS dosyasına konulur ve index.html dosyasında linklenir.
- 11:19Web Uygulamalarında JavaScript Kullanımı
- Web uygulamalarında scriptler çoğunlukla action'lar olarak kullanılır; mouse ile üzerine gelme, tıklama, sürükle-bırak gibi kullanıcı etkileşimleri event olarak adlandırılır.
- Scriptler event oluşumunu, server ile konuşma işlemlerini ve anlık değişimleri yönetir; JavaScript arayüzde JavaScript ve HTML ile oynayarak değişiklikler sağlar.
- Tarayıcı sadece style'lar ve HTML'leri gösterirken, JavaScript uygulamaya fonksiyonel yüklemeyi sağlar ve kullanıcı etkileşimlerini yönetir.
- 12:48TypeScript ve Babel Kullanımı
- Yazılan kodlar TypeScript olabilir ancak sonuçta JavaScript çıktısı verir ve bu çıktıyı Babel sağlar.
- Yazılan scriptler minify edilir ve başka işlemler gerçekleştirilir.
- Arayüz tarafında view dosyaları kullanılır ancak burada JavaScript yazılabilir, ayrıca js dosyaları da görülebilir.
- 13:44Proje Yönetimi ve Komutlar
- Proje Intel ile kullanılır ve terminalde tüm işlemler yönetilir.
- "npm start" komutu uygulamayı başlatır, "npm build" komutu projeyi build alır.
- "package.json" dosyasında projenin versiyonu ve ismi bulunur.
- 15:57Dependencies ve Proje Yapısı
- "package.json" dosyasındaki "dependencies" bölümünde uygulamanın çalışması için gerekli bağımlılıklar listelenir.
- Development dependencileri projeyi build alabilmek için gerekli olan View compiler ve Babel gibi araçları içerir.
- Proje bir mikro servis mimarisi içinde geliştirilmiş bir alışveriş sitesi benzeri uygulama olacak.
- 18:34Gelecek Adımlar
- Daha önceki videoda hangi servislerin oluşturulacağı gibi kısımlara başlamadan önce gerekli veritabanları ve diğer ihtiyaçlar incelenecektir.
- Bir sonraki bölümde bakır kompost dosyası oluşturulacak ve front-end'de component gibi yapılar geliştirilecektir.