Web Components #2 | Web Components | Film Arama Uygulaması | Movie Search App
HTML-код
- Опубликовано: 31 мар 2020
- Web Components #2 | Web Components | Film Arama Uygulaması | Movie Search App
Merhabalar,
Web Components, We API'nin bize sunmuş olduğu özelliklerden biridir. 2 videodan oluşacak bu eğitimin ikinci ve son videosunda bir Film arama uygulaması (Movie Search App) yapıyoruz. Tamamen Web Component yapısı kullanarak sayfamızı ve Sayfa içindeki elementlerimizi tasarlayacağız.
Component yapımızı tasarladıktan sonra;
- Web component ile Style İşlemlerine
- Harici bir CSS dosyasını Component içerisinde dahil etmeye
- Kullanıcı etkileşimlerine
- JavaScript ile dinamik olarak Web Component üretmeye
- Dış dünyadaki bir Servise bağlanıp film listesini çekmeye,
- Bu bilgilerle Component yapısını oluşturmaya
derinlemesine değiniyoruz.
Eğer Web Component konusuna ait bir alt yapınız yoksa kesinlikle ilk videoyu izlemenizi öneririm;
• Web Components #1 | We...
style.css Dosyası;
github.com/gkandemi/web-compo...
appHeader.css Dosyası;
github.com/gkandemi/web-compo...
Default Image Dosyası;
github.com/gkandemi/web-compo...
movieCard.css Dosyası;
github.com/gkandemi/web-compo...
Movies Değişkeninin bulunduğu dosya;
github.com/gkandemi/web-compo...
Kaynak Kodlara Erişmek için;
github.com/gkandemi/web-compo...
Film Aramak için Kullandığımız API;
www.omdbapi.com/
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 : • HTML Eğitimi
► CSS Eğitimi : • CSS Eğitimi
► MySQL Eğitimi : • MySQL Eğitimi
► JQuery Eğitimi: • JQuery Eğitimi
► PHP Eğitimi : • PHP Eğitimi
► Codeigniter Eğitimi : • Codeigniter Eğitimi
Proje Eğitimlerinden Bazıları;
► Firebase ToDo List Yapımı : • Firebase ToDo List Yapımı
► PHP Codeigniter ile Multi Session Yapımı : • PHP Codeigniter ile Mu...
► PHP Codeigniter Otel Rezervasyon Sistemi : • PHP Codeigniter Otel R...
► Like Dislike Yapımı : • Like Dislike Yapımı
► Codeigniter ile AutoComplete Kullanarak Arama Motoru Yapmak : • Codeigniter ile AutoCo...
► PHP Çoklu Kategori Alt Kategori Yapımı : • PHP-PDO ile Sınırsız K...
► Codeigniter ile Çoklu dosya upload işlemi (Dropzone): • Codeigniter ile Çoklu ...
► PHP Codeigniter ile Pagination Yapımı : • PHP Codeigniter ile Pa...
► PHP ile Alışveriş Sepeti Yapımı : • PHP ile Alışveriş Sepe...
► PHP Mailer Kullanımı : • PHP Mailer Kullanımı
► Vue js ile Codeigniter Rest API servisine bağlanmak eğitimi : • Vue.js ile Codeigniter...
► Nasıl yapılır köşesi: • Nasıl Yapılır?
► Vue.js Soru Cevap : • Vue.js Soru Cevap
► Kullandığım teknoloji ile ilgili bilgiler : • Kullandığım Web Yazılı...
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 : / kablosuzkedi
● Twitter : / kablosuzkedi
● Instagram : / kablosuzkedi
● Instagram : / yazilimegitim
Kaynak dosyalara, 1 Nisan günü video ile beraber erişebilir halde olacaksınız arkadaşlar :)
Eğer Web Component konusuna ait bir alt yapınız yoksa kesinlikle ilk videoyu izlemenizi öneririm;
ruclips.net/video/mIzJ5SSeO7M/видео.html
style.css Dosyası;
github.com/gkandemi/web-components-movie-search-app/blob/master/assets/css/style.css
appHeader.css Dosyası;
github.com/gkandemi/web-components-movie-search-app/blob/master/components/appHeader/appHeader.css
Default Image Dosyası;
github.com/gkandemi/web-components-movie-search-app/blob/master/assets/images/default.png
movieCard.css Dosyası;
github.com/gkandemi/web-components-movie-search-app/blob/master/components/movieCard/movieCard.css
Movies Değişkeninin bulunduğu dosya;
github.com/gkandemi/web-components-movie-search-app/blob/master/assets/js/app.js
Kaynak Kodlara Erişmek için;
github.com/gkandemi/web-components-movie-search-app
Film Aramak için Kullandığımız API;
www.omdbapi.com/
Tesekkurler hocam.
hocam udemy'deki next.js eğitiminize son eklenecek şeyleri artık atabilir misiniz? Projemi doğru düzgün deploy etmeyi beceremiyorum
Hakkını vermişsiniz helal olsun
Birinci videoda bir arkadas islandim diye yorum yapmisti kalp atmistiniz ..
Cidden islanilicak bir video yani 1. de siril siril yazmistim 2. de deliriyorum tam olarak modul odevimi anlatmissiniz ve oyle guzel anlatmissiniz ki kafayi yedim mukkemmel ya gercekten siz js anlatin sabaha kadar sizi dinleyim cok tesekkurler video icin
Takipteyiz kardeşim. Eline sağlık. Selamlar...
Supersiniz...
Teşekkürler hocam elinize dilinize sağlık
@import "../assets/css/style.css" Sadece bu şekilde de harici bir css dosyası kullanabilirsiniz, iyi çalışmalar.
Teşekkürler, nefesine sağlık...
Abi devamı gelsin, web components ile ilgili hiç düzgün bir kaynak yok 😭
Ellerinize sağlık. Çok güzel ders olmuş. Hocam videonun 55:24 dakikasındaki sitenin adı nedir?
vs code da html script ve style taglarını js dosyası içinde kkullabilmek için HTML&LESS grammar injections
eklentisini kullanabilriiz
Template nin içine link elementi eklenmiyor mu acaba
İftara 21 saat kaldı kodsusluktan dilim damağım kurudu 🙂
Hocam çok teşekkürler emeğinize sağlık. searchMovie() func içinde `data.Search` kontrolü yapabiliriz böylece film dönmediği durumda patlamamış oluruz.else olduğu durumda ise #movies id li div'e bir mesaj basabiliriz `Aradığınız film bulunamadı gibi`
Tabi ki yapılabilir :) o tarz işlemlere bilinçli girmiyorum zaten geliştirilecek bişeyler olsun diye.
@@kablosuzkedi çok teşekkürler tekrar :)
Hocam merhaba, 33:05 'te uyguladığımız çözüm aslında iş görüyor fakat, kullanıcının internet bağlantısının yavaş olduğu bir senaryoyu simule ettiğimiz zaman yarım saniyelik bir bekleme dahi bazen yetmeyebiliyor. Konu ile ilgili sizin net bir çözümünüz oldumu ? olduysa yalnızca konu başlığı olarak dahi bilgilendirirseniz araştırma yapıp problemi çözememiz için yeterli olacaktır. İyi çalışmalar dilerim.
atributu constructur da degilde connectedCallback() te cagirirsan olur
"location.origin" hem http veya https protokolünü alıyor hemde sitenin rootunu alıyor. Sanırım daha sağlıklı bir yapı olur. Ellerinize sağlık.
++ olarak link olarak çekmek daha temiz bir görünüm sağlıyor bence.
33:03 de settimeout kullanmak yerine async yapabilir miyiz?
önceki videoda attributeChangedCallback(attrName, oldVal, newVal) dan bahsetmiştiniz. bu işe yarar mı?
@@slmatc connectedCallback te cagir atributlari o zaman olmasi lazim
Hocam hangi temayı kullanıyorsunuz ?
Night Owl dostum.
Teşekkürler hocam 😊
Bu idenin adı ne?
VSCode
saçma sapan birşey miş bu Web Components. kimse kullanmaz bunu
Hazır kütüphanelerin tabanı olmasını ve bir çok kullanım faydasını geçtim, işini bilen birisin bu yapı ile canvas, svg falan kullanarak, çok güzel grafiksel şölen oluşturabilir. Teşekkürler Gökhan hocam yine çok faydalı bir içerik.