#Vue3 Bootcamp #6 | BookLike Uygulaması | Vuex | Vue Router | Authentication Merhaba arkadaşlar, Bu dersimizde uygulama yapıyoruz. Yapacağımız uygulama kullanıcıların faydalı olduğunu düşündüğü linkleri kaydettikleri ve bunu diğer kullanıcılarla paylaştıkları bir platform olacak. Bu platform içerisinde; - Vuex - Vue Router - Authentication - SecureLS gibi yapıları kullanacağız. İçeriği görmek ve Müfredata Link üzerinden katılarak vereceğim ödevlere erişebilirsiniz. eduflow.kablosuzkedi.com/ Bootcamp Telegram grubuna katılmak için; t.me/joinchat/pqiJOgi8byQ5Y2E0 Bu haftanın kaynak kodları ve Ödevleri; github.com/gkandemi/kablosuzkedi-vue3-bootcamp Ayrıcalıklardan yararlanmak için bu kanala katılın: th-cam.com/channels/YT5QTr38bwp85Pka8YSVIg.htmljoin Yayın Akışı; 00:00:00 Giriş 00:16:14 Temanın Tanıtımı 00:20:40 Vue Projesinin Oluşturulması 00:21:05 Composition API Nedir? Sorusuna Cevap 00:26:34 Projenin Kurulumuna devam ediyoruz 00:27:28 VueRouter'ın Projeye Dahil Edilmesi 00:33:35 Temanın Sayfalara ve Componentlere Ayrıştırılması 00:39:20 Home Sayfasının Entegrasyonu 00:47:00 appBookmarkList Componentinin Oluşturulması 00:51:28 Component Seviyeleri Hakkında 00:52:55 NewBookmarkItem Sayfasının Yapımı 00:57:30 Ara 01:09:10 Fake API' nin projeye dahil edilmesi 01:11:40 Register Sayfasının Yapımı 01:12:31 Axios'un Projeye Dahil Edilmesi ve Custom Axios Instance Oluşturulması 01:17:45 Register Sayfasının Yapımına Devam Ediyoruz 01:24:00 CryptoJS ile Kullanıcı Şifresini Şifreleyelim 01:36:20 Login Sürecinin Başlangıcı 01:37:45 Vuex'in Projeye Dahil Edilmesi 01:43:20 Login Sayfasının Yapımı 01:52:10 Şifre Probleminin Çözümü 01:58:20 Login Olan Kullanıcının State Üzerine Tutulması 02:02:15 Login İşlemine göre appHeader Component'inin Düzenlenmesi 02:06:15 State'in Kalıcı Olmasını Sağlamak 02:07:10 vuex-persistedstate Paketinin Projeye Dahil Edilmesi 02:10:40 GÜVENLİK : State'in Şifrelenmesi 02:11:20 SecureLS Paketinin Projeye Dahil Edilmesi 02:18:00 Route Üzerinden Authentication Kontrolü 02:34:14 Soru Cevap 02:37:43 Kapanış Kanal içerisinde bulabileceğiniz eğitimlerden bazıları; 1. PHP Programlama eğitimi 2. Codeigniter framework eğitimi 3. HTML ve CSS Eğitimi 4. JavaScript Eğitimi 5. JQuery Eğitimi 6. Vue js Eğitimi 7. Nuxt js Eğitimi 8. Node js Eğitimi 9. Express js Eğitimi 10. JavaScript Frameworkleri 11. MongoDB Eğitimi 12. MySQL Eğitimi 13. Docker Eğitimi 14. Go programlama Eğitimi 15. PHP ile proje Eğitimi 16. Codeigniter ile proje Eğitimi 17. Vue js ile proje Eğitimi 18. Nuxt js ile proje Eğitimi 19. Yeni web teknolojilerin tanıtımları 20. IDE kullanımları gibi daha birçok eğitime ücretsiz olarak ulaşabilirsiniz. Eğitimleri izlemek için Oynatma listelerine göz atmayı kesinlikle unutmayın!!! Başlıca oynatma listeleri; Eğitim Serileri; ► HTML Eğitimi : th-cam.com/play/PL_f2F0Oyaj4-Qro_C0ixzMWpCiogfXxKE.html ► CSS Eğitimi : th-cam.com/play/PL_f2F0Oyaj4-RyFL8mkfjYjEVCmJhWDQ3.html ► MySQL Eğitimi : th-cam.com/play/PL_f2F0Oyaj4-6vvPSJssG4Jp6UqCTmWSz.html ► JQuery Eğitimi: th-cam.com/play/PL_f2F0Oyaj4-Jt6F-dyl6LEHNVaudH3rk.html ► PHP Eğitimi : th-cam.com/play/PL_f2F0Oyaj4-K_h0rC656Why8nJPF_dIO.html ► Codeigniter Eğitimi : th-cam.com/play/PL_f2F0Oyaj4_xGyQlwgsd9gI1UgnTTHkC.html Proje Eğitimleri; ► Asp.Net ile Okul Projesi: th-cam.com/play/PL_f2F0Oyaj49bsuq6iLrg1qyZtekSCgPW.html ► Firebase ToDo List Yapımı : th-cam.com/play/PL_f2F0Oyaj48rnkNZaHqnXiZrs4q7ogex.html ► PHP Codeigniter ile Multi Session Yapımı : th-cam.com/play/PL_f2F0Oyaj480n9rg6PEwk-6O4NJcneFh.html ► PHP Codeigniter Otel Rezervasyon Sistemi : th-cam.com/play/PL_f2F0Oyaj49nS8eZW1qQie6Zr4yRqDMF.html ► Like Dislike Yapımı : th-cam.com/play/PL_f2F0Oyaj4_yt6Hn5GfwL5L9U2wumlVs.html ► PHP Codeigniter ile Malzeme Uygulaması : th-cam.com/play/PL_f2F0Oyaj4_-tbmkqsQy3g0IGLSsxj5I.html ► Vue js ile Codeigniter Rest API servisine bağlanmak eğitimi : th-cam.com/play/PL_f2F0Oyaj48ufRtQ8EVo0spOEZPochfv.html Sosyal medyadan takip edin : ● VideoSınıf : www.videosinif.com ● Yazılım Eğitim : www.yazilimegitim.net ● Kişisel Web Sayfam : www.gokhankandemir.com ● Facebook : facebook.com/kablosuzkedi ● Twitter : twitter.com/kablosuzkedi ● Instagram : instagram.com/kablosuzkedi/ ● Instagram : instagram.com/yazilimegitim/ • Song: Stomps claps & Beatbox (Music Today 80) • Composed & Produced by : Anwar Amr • Video Link: th-cam.com/video/uasEn_xANXE/w-d-xo.html • Song: Loodus- (Felix - Yiğit Diri) • Video Link: th-cam.com/video/SsNULUJPPUo/w-d-xo.html
Hocam selamlar. Proje içinde verdigimiz belli constant değerler var. Mesela saltKey veya buna benzer birden fazla sabitim veya configlerim olabilir. Sorum şu, acaba proje dizininde bir de settings.json gibi bir isimde bir config dosyası oluşturup bu değerleri burada tutsak, projeyi yayınladığımızda da tekrardan publish çıkmaya gerek kalmadan bu değerleri serverdan veya herhangi bir devops platformundan güncellemek mümkün müdür?
Hocam bu persistedstatei kullanırken ls-secure aşamasında sıkıntı yaşıyorum eski haline döndürüce sıkıntı kalkıyor , dolayısıyla bu localstorage'de verileri şifreleyemiyorum
Hocam yayın için tekrar teşekkürler fakat takılmalar ne yazık ki oldu ses ile ilgili bir sorun olmadı çözünürlük 1080 di hiç kalite düşmedi yalnız ses gelirken drop olup görüntü 3,4 defa devam etmedi drop süreleri de 10 snyi geçmedi
Arkadaşlar kolay gelsin, derslere başladım güzel gidiyor ancak multi-word hatası alıyorum devamlı. appBookmarkList içindeki index.vue dosyasında bunu nasıl çözebilirim? birkaç yol denedim ancak daha da berbat ettim :)
Bende aynı sorunu aldım 1 saatten fazla uğraştım çözemedim en son components altına BookmarkList onunda altına appBookmarkList.vue yaptım appBookmarkListItem ile index.vue ayrı component olmadan hepsini appBookmarkList.vue içinde kullandım. Bir de index.vue kullandığında eslint hatası da alıyordum o yüzden bu şekilde çözüm buldum bende.
hocam harikasınız emeklerinze sağlık
#Vue3 Bootcamp #6 | BookLike Uygulaması | Vuex | Vue Router | Authentication
Merhaba arkadaşlar,
Bu dersimizde uygulama yapıyoruz. Yapacağımız uygulama kullanıcıların faydalı olduğunu düşündüğü linkleri kaydettikleri ve bunu diğer kullanıcılarla paylaştıkları bir platform olacak. Bu platform içerisinde;
- Vuex
- Vue Router
- Authentication
- SecureLS
gibi yapıları kullanacağız.
İçeriği görmek ve Müfredata Link üzerinden katılarak vereceğim ödevlere erişebilirsiniz.
eduflow.kablosuzkedi.com/
Bootcamp Telegram grubuna katılmak için;
t.me/joinchat/pqiJOgi8byQ5Y2E0
Bu haftanın kaynak kodları ve Ödevleri;
github.com/gkandemi/kablosuzkedi-vue3-bootcamp
Ayrıcalıklardan yararlanmak için bu kanala katılın:
th-cam.com/channels/YT5QTr38bwp85Pka8YSVIg.htmljoin
Yayın Akışı;
00:00:00 Giriş
00:16:14 Temanın Tanıtımı
00:20:40 Vue Projesinin Oluşturulması
00:21:05 Composition API Nedir? Sorusuna Cevap
00:26:34 Projenin Kurulumuna devam ediyoruz
00:27:28 VueRouter'ın Projeye Dahil Edilmesi
00:33:35 Temanın Sayfalara ve Componentlere Ayrıştırılması
00:39:20 Home Sayfasının Entegrasyonu
00:47:00 appBookmarkList Componentinin Oluşturulması
00:51:28 Component Seviyeleri Hakkında
00:52:55 NewBookmarkItem Sayfasının Yapımı
00:57:30 Ara
01:09:10 Fake API' nin projeye dahil edilmesi
01:11:40 Register Sayfasının Yapımı
01:12:31 Axios'un Projeye Dahil Edilmesi ve Custom Axios Instance Oluşturulması
01:17:45 Register Sayfasının Yapımına Devam Ediyoruz
01:24:00 CryptoJS ile Kullanıcı Şifresini Şifreleyelim
01:36:20 Login Sürecinin Başlangıcı
01:37:45 Vuex'in Projeye Dahil Edilmesi
01:43:20 Login Sayfasının Yapımı
01:52:10 Şifre Probleminin Çözümü
01:58:20 Login Olan Kullanıcının State Üzerine Tutulması
02:02:15 Login İşlemine göre appHeader Component'inin Düzenlenmesi
02:06:15 State'in Kalıcı Olmasını Sağlamak
02:07:10 vuex-persistedstate Paketinin Projeye Dahil Edilmesi
02:10:40 GÜVENLİK : State'in Şifrelenmesi
02:11:20 SecureLS Paketinin Projeye Dahil Edilmesi
02:18:00 Route Üzerinden Authentication Kontrolü
02:34:14 Soru Cevap
02:37:43 Kapanış
Kanal içerisinde bulabileceğiniz eğitimlerden bazıları;
1. PHP Programlama eğitimi
2. Codeigniter framework eğitimi
3. HTML ve CSS Eğitimi
4. JavaScript Eğitimi
5. JQuery Eğitimi
6. Vue js Eğitimi
7. Nuxt js Eğitimi
8. Node js Eğitimi
9. Express js Eğitimi
10. JavaScript Frameworkleri
11. MongoDB Eğitimi
12. MySQL Eğitimi
13. Docker Eğitimi
14. Go programlama Eğitimi
15. PHP ile proje Eğitimi
16. Codeigniter ile proje Eğitimi
17. Vue js ile proje Eğitimi
18. Nuxt js ile proje Eğitimi
19. Yeni web teknolojilerin tanıtımları
20. IDE kullanımları
gibi daha birçok eğitime ücretsiz olarak ulaşabilirsiniz.
Eğitimleri izlemek için Oynatma listelerine göz atmayı kesinlikle unutmayın!!!
Başlıca oynatma listeleri;
Eğitim Serileri;
► HTML Eğitimi : th-cam.com/play/PL_f2F0Oyaj4-Qro_C0ixzMWpCiogfXxKE.html
► CSS Eğitimi : th-cam.com/play/PL_f2F0Oyaj4-RyFL8mkfjYjEVCmJhWDQ3.html
► MySQL Eğitimi : th-cam.com/play/PL_f2F0Oyaj4-6vvPSJssG4Jp6UqCTmWSz.html
► JQuery Eğitimi: th-cam.com/play/PL_f2F0Oyaj4-Jt6F-dyl6LEHNVaudH3rk.html
► PHP Eğitimi : th-cam.com/play/PL_f2F0Oyaj4-K_h0rC656Why8nJPF_dIO.html
► Codeigniter Eğitimi : th-cam.com/play/PL_f2F0Oyaj4_xGyQlwgsd9gI1UgnTTHkC.html
Proje Eğitimleri;
► Asp.Net ile Okul Projesi: th-cam.com/play/PL_f2F0Oyaj49bsuq6iLrg1qyZtekSCgPW.html
► Firebase ToDo List Yapımı : th-cam.com/play/PL_f2F0Oyaj48rnkNZaHqnXiZrs4q7ogex.html
► PHP Codeigniter ile Multi Session Yapımı : th-cam.com/play/PL_f2F0Oyaj480n9rg6PEwk-6O4NJcneFh.html
► PHP Codeigniter Otel Rezervasyon Sistemi : th-cam.com/play/PL_f2F0Oyaj49nS8eZW1qQie6Zr4yRqDMF.html
► Like Dislike Yapımı : th-cam.com/play/PL_f2F0Oyaj4_yt6Hn5GfwL5L9U2wumlVs.html
► PHP Codeigniter ile Malzeme Uygulaması : th-cam.com/play/PL_f2F0Oyaj4_-tbmkqsQy3g0IGLSsxj5I.html
► Vue js ile Codeigniter Rest API servisine bağlanmak eğitimi : th-cam.com/play/PL_f2F0Oyaj48ufRtQ8EVo0spOEZPochfv.html
Sosyal medyadan takip edin :
● VideoSınıf : www.videosinif.com
● Yazılım Eğitim : www.yazilimegitim.net
● Kişisel Web Sayfam : www.gokhankandemir.com
● Facebook : facebook.com/kablosuzkedi
● Twitter : twitter.com/kablosuzkedi
● Instagram : instagram.com/kablosuzkedi/
● Instagram : instagram.com/yazilimegitim/
• Song: Stomps claps & Beatbox (Music Today 80)
• Composed & Produced by : Anwar Amr
• Video Link: th-cam.com/video/uasEn_xANXE/w-d-xo.html
• Song: Loodus- (Felix - Yiğit Diri)
• Video Link: th-cam.com/video/SsNULUJPPUo/w-d-xo.html
Hocam selamlar. Proje içinde verdigimiz belli constant değerler var. Mesela saltKey veya buna benzer birden fazla sabitim veya configlerim olabilir. Sorum şu, acaba proje dizininde bir de settings.json gibi bir isimde bir config dosyası oluşturup bu değerleri burada tutsak, projeyi yayınladığımızda da tekrardan publish çıkmaya gerek kalmadan bu değerleri serverdan veya herhangi bir devops platformundan güncellemek mümkün müdür?
hocam localstorageyi nasıl kullandınız ?
Hocam bu persistedstatei kullanırken ls-secure aşamasında sıkıntı yaşıyorum eski haline döndürüce sıkıntı kalkıyor , dolayısıyla bu localstorage'de verileri şifreleyemiyorum
Teşekkürler
Hocam yayın için tekrar teşekkürler fakat takılmalar ne yazık ki oldu ses ile ilgili bir sorun olmadı çözünürlük 1080 di hiç kalite düşmedi yalnız ses gelirken drop olup görüntü 3,4 defa devam etmedi drop süreleri de 10 snyi geçmedi
teşekkürler. Bu adamlar paramızı geri vermediler :))) Bakalım bir sonraki yayın ne yapacağız.
@@kablosuzkedi Hocam bende de aynı sorun vardı bilginize. Yayın için teşekkürler elinize emeğinize sağlık.
@@kablosuzkedi abi gidip alıyım mı ? .d
Arkadaşlar kolay gelsin, derslere başladım güzel gidiyor ancak multi-word hatası alıyorum devamlı. appBookmarkList içindeki index.vue dosyasında bunu nasıl çözebilirim? birkaç yol denedim ancak daha da berbat ettim :)
Bende aynı sorunu aldım 1 saatten fazla uğraştım çözemedim en son components altına BookmarkList onunda altına appBookmarkList.vue yaptım appBookmarkListItem ile index.vue ayrı component olmadan hepsini appBookmarkList.vue içinde kullandım. Bir de index.vue kullandığında eslint hatası da alıyordum o yüzden bu şekilde çözüm buldum bende.
@@emine.yalman main.js içerisinde yolu verirken tam adresi verdim, dosya yolunu değil ve multi-word kullanarak aştım sorunu