WTK290U-İNTERNET TABANLI PROGRAMLAMA
Ünite 5: JS Kütüphaneleri ile Çalışmak
Giriş
Javascript (JS) günümüz internet teknolojisinin bel kemiği teknolojilerinden biridir. HTML sayfaların içeriklerini ve semantik dizilimlerini işaretlerken, CSS bu içeriklerin sunumunu düzenleyen katman konumundadır. JS ise bu tablodaki programlama bileşenidir. JS, çoğu tarayıcı tarafından desteklenen standart bir dildir. JS işlevselliği, kolay öğrenilebilmesi ve esnek yapısı sayesinde son zamanlarda önemli derecede popüler hale gelmiştir. JS kütüphaneleri programcıların ihtiyacı olan temel işlevleri, elementleri ve özellikleri sağlayan, JS temelli uygulama geliştirme sürecini kolaylaştıran ve kısaltan hazır kodlarıdır.
Neden JS Kütüphaneleri
Tekrar Kullanılabilirlik
Kütüphane kullanmanın en önemli avantajı, kendini ispat etmiş kodların projeye entegre edilmesidir. Kodlar ile ilgili ortaya çıkan sorunlar geliştiriciler tarafından giderilerek kütüphanenin güvenirliği ve bütünlüğü ileri seviyelere taşınır. Geliştiriciler bu araçları kullanarak proje güvenirliğini arttırırken, yazılım geliştirme süresini kısaltır. Yazılım geliştirme projelerinde en önemli giderin zaman olduğu unutulmamalıdır.
Bununla birlikte, tekrar kullanılabilirlik ilkesinin küçük çaplı projeler için sorun yaratması olasıdır. Özellikle eski model bilgisayarlar ve mobil cihazlarda kütüphaneler nedeniyle projelerin yavaş yüklenmesi ve çalıştırılması olasıdır.
Ücretsiz Yardım Kanalları
Kütüphaneler dünya genelinde pek çok yazılımcı tarafından kullanılmakta ve geliştirilmektedir. Kütüphaneler aynı zamanda bu kütüphaneyi kullanan tüm geliştiricilerin ve yazılımcıların desteği ile birlikte gelir. Bu sayede, güvenlik, tasarım, yerelleştirme, tarayıcılar arası farklılıklarla başa çıkma ya da çoklu dil desteği gibi konular için zaman ayırmanıza gerek kalmayacaktır. Bu tür sorunlar hali hazırda diğer geliştiriciler tarafından çözülmüş olarak karşınıza geleceğinden zaman ve para harcamanıza gerek kalmayacaktır. Bunun yanında geliştirici forumlarında sıklıkla karşılaşılan sorunlar ya da özel durumlar ile ilgili pek çok yardım dokümanına ulaşılabilmektedir.
Yapısallık: Kütüphaneler genellikle MVC gibi yazılım geliştirme yaklaşımlarını kullanmaktadır. Bu sayede, proje takımına yeni katılan bir geliştiricinin uyum sağlaması daha kısa zaman alacaktır. Bunun yanında, kütüphanelerin benzer geliştirme yaklaşımlarını paylaşmaları öğrenilmelerini kolaylaştırmaktadır.
MVC (model-view-controller) bir yazılım geliştirme yaklaşımıdır. Bu yaklaşım veri soyutlanması esasına dayanır. Buna göre, kontrolcü (controller) adı verilen bir ara sistem, veri (model) ve arayüzler (view) arasında köprülük görevi görmektedir. Sistemin avantajı, yazılan kodların tekrar tekrar kullanılabilmesi ve çeşitli uygulamalar için arayüzler (views) sağlayabilmesidir.
Genişletilebilirlik: Kütüphaneler sürekli geliştirilmektedir. Her yeni versiyonla birlikte güvenlik güncelleştirmelerinin yanında uygulamalarınıza güç katacak modüller, işlevler ve elementler gelebilmektedir.
Önemli JS Kütüphaneleri
AngularJS
Google tarafından desteklenen açık kaynak kodlu bir uygulama geliştirme kütüphanesidir. AngularJS veriye dayalı tek sayfalık karmaşık uygulamaların üretilmesi için gerekli tüm araçları sağlamaktadır. AngularJS 2 versiyonuyla JS’in geliştirilmiş bir versiyonu olan TypeScript ile programlanmaya başlanmıştır. AngularJS MVC yazılım geliştirme yaklaşımını temel almaktadır. Modeller ve arayüzler arasında iki yönlü veri bağlantısı oluşturabilmektedir. AngularJS başka hiçbir kütüphaneye gerek duymadan büyük çaplı uygulamaların önyüzlerini (front-end) geliştirmenize izin verebilir.
Programlama literatüründe kullanıcının gördüğü arayüzlere ön yüz (front-end) denmektedir. Bunun yanında, uygulamaların arkasında çalışan veri tabanı erişimi, hesaplama rutinleri gibi işlevlere ise arka yüz (back-end) adı verilmektedir. Büyük ölçekli uygulamaların ön yüz ve arka yüz geliştirici takımları işbirliği içinde çalışmaktadır.
React
React, açık kaynak kodlu bir ön yüz geliştirme aracıdır. React daha çok MVC modelindeki V parçasına yani kullanıcı arayüzü elementlerine odaklanan bir kütüphanedir. En önemli avantajı HTML DOM mimarisine oranla çok daha hızlı çalışan bir sanal DOM üretmesidir React, JS içinde kullanılabilecek XML’e benzer özelliklere sahip JSX adında bir sentaks kullanmaktadır.
AngularJS ve React’e benzer işlevler sağlayan ve yaygın kullanımdaki diğer kütüphaneler arasında Ember.js (http://emberjs.com/), Backbone.js (http://backbonejs.org/) ve Knockout (http://knockoutjs.com/) sayılabilir.
Underscore
UnderscoreJS programcıların çoğu projede tekrar tekrar yazmak zorunda kaldıkları genel amaçlı araç fonksiyonlarını sağlayan bir kütüphanedir.
D3.js
Data-Driven-Documents (veri yönetimli belgeler), belgeleri bir veri setine göre düzenlemek için kullanılan bir kütüphanedir. Bu kütüphane kullanılarak veriyi temsil eden etkileşimli grafikler ve görseller hazırlanabilmektedir.
BabylonJS
BabylonJS modern web standartlarını kullanarak, güncel tarayıcılarda çalıştırılabilen üç boyutlu oyunlar üretmek için araçlar sağlayan bir kütüphanedir. Kütüphane WebGL teknolojisini kullanabilmektedir.
Bootstrap
Bootstrap, internet siteleri ve internet tabanlı uygulamaların kullanıcı arayüzlerini oluşturmak için kullanılabilecek bir
kütüphanedir. Bootstrap öncelikle akıllı telefon, tablet bilgisayar gibi mobil cihazları hedef alan bir felsefe ile geliştirilmiştir.
JQuery
JQuery, internet programcılığını kolaylaştıran bir JS kütüphanesidir. JQuery’nin temel amacı, JS ile gerçekleştirilen genel programlama görevlerinin, daha az kod ile gerçekleştirilmesidir.
JQuery’nin öğrenilebilmesi için temel düzeyde HTML, CSS ve JS bilgisi gerektirir. JQuery’nin en temel işlevleri HTML DOM üzerinde gerçekleştirilmektedir. Bunun yanında JQuery, elementlerin CSS özelliklerini düzenleyebilir. JQuery’nin temel işlevleri HTML/DOM düzenleme, CSS düzenleme, HTML olaylarına tepki verme, Görsel efekt ve animasyonlar, AJAX, şeklinde listelenebilir.
Programlama dillerinde fonksiyon ve metot kavramları birbirlerinden farklıdır. Fonksiyonlar bir program bağlamında kendi başlarına çalışan yapılardır. Parametre alıp değer döndürebilirler. Metotlar ise bir nesneye bağlı olarak çalışan fonksiyonlar gibi düşünülebilir. Örneğin burada ele aldığımız createElement metodu document nesnesi içinde tanımlı bir metottur. Buradan sonra konu edeceğimiz çoğu yapı JQuery nesnesinde tanımlı olduğundan fonksiyon yerine metot terimi kullanılacaktır. Bunun yanında function anahtar kelimesini kullanarak olaylara tepki vermek için yazacağımız kodları fonksiyon terimi ile ifade etmek daha yerindedir.
JQuery ile oluşturulan animasyon ve efektler tüm tarayıcılarda aynı şekilde çalışabilir.
İnternet programcılığındaki en önemli sorunlardan biri yazılan kodların farklı tarayıcılar tarafından standart bir şekilde yorumlanmamasıdır. JQuery’nin en güçlü yanlarından biri tarayıcılar arasındaki bu farklılaşmaları aşabilmesidir.
İçerik Dağıtım Ağları (Content Delivery (slim) Network [CDN]), JS kütüphaneleri gibi internet teknolojilerinde genel kullanımdaki dosyaların paylaşılması için kullanılan sunucu ağladır. Bu ağların sunucuları internet üzerindeki birçok veri merkezin de dağınık bir şekilde dağıtılmış durumdadır. Bu sayede kullanıcılara hızlı ve güvenilir bir servis sağlanabilmektedir.
Sayfalara JQuery Eklemek
Bir JS Kütüphanesi olan JQuery, sayfaya herhangi bir JS dosyası gibi eklenir. JS belgeleri projelere yerel ya da uzak yöntemlerle eklenebilir. JQuery kodlarını okumak istiyorsanız geliştirme (development), istemiyorsanız geliştirme (production) sürümünü indirebilirsiniz. JQuery’i sayfaya eklemenin ikinci yolu İçerik Dağıtım Ağları’ndan (İDA) yararlanmaktır. JQuery popüler bir kütüphane olduğundan pek çok İDA üzerinden sunulmaktadır. Sayfanızda JQuery kullanabilmek için kopyaladığınız kodları HTML belgenize yapıştırmanız yeterlidir. Sayfaların yüklenme performanslarını düşürmemek için
JQuery gibi kütüphaneler genellikle body etiketinin kapatılmasından sonra sayfaya eklenir.
JQuery Yazım Kuralları
JQuery yazım kuralları HTML elementlerini seçmek ve düzenlemek için özelleşmiştir. Temel yazım biçimi aşağıda gösterildiği şekildedir. Kitabınız sayfa 136’da verilen kodlarda $ simgesi, parantezler içinde bir seçici ifadesi, eylemi gerçekleştirecek metot, $(“p”), hide metodu, id özelliği dikkat çeken ögelerdir.
JQuery Olayları
Kullanıcıların sayfa üzerindeki hareketlerine tepki vermek için HTML DOM tarafından yayınlanan olaylar için fonksiyonlar yazılır. Olaylara tepki vermek için kullanılması gereken örnek sentaks kitabınız sayfa 136 ve 137’de verilmiştir. $ ile JQuery çağırılır ve ardından parantezler içinde olaylarına tepki verilecek element/elementler seçilir. Nokta ile tepki verilecek olay adı yazılır. Ardından parantezler içinde bu olaya tepki verecek kodlar yazılır. Parantez kapandıktan sonra noktalı virgül ile işlem sonlandırılır. Projelerde sıklıkla kullanılan HTML DOM olayları Kitabınız sayfa 137’de Tablo 5.1’de listelenmiştir.
JQuery kodları, script etiketleri içinde olmak kaydıyla, sayfanın herhangi bir yerinde yazılabilir. Bununla birlikte henüz yüklenmemiş ya da HTML DOM’a eklenmemiş elementler için yazılan kodlar hata verecektir. Bu tür hataları engellemek için sayfayı ifade eden document seçicisinin ready olayı kullanılabilir.
JQuery kodları yazılırken iç içe pek çok parantez ve küme parantezi kullanılabilmektedir. Bu konuda hata yapmamak için parantezleri açtığınız gibi kapatınız. Gerekli kodları daha sonra parantezler arasına tıklayarak yazabilirsiniz.
JQuery Efektleri
JQuery kullanarak HTML elementlerine özel efektler uygulanabilir. Bu amaçla seçicinin arkasına efekt metodu bağlanır. JQuery’nin sağladığı efektler sayfa 139’da Tablo 5.2’de listelenmiştir. Kitabınız sayfa 139 ve 140’da örnek effect kodları verilmiştir. JQuery efektleri zincirleme çalıştırılabilir.
JQuery DOM Metotları
JQuery DOM elementlerinin içerikleri ve değerleri ile ilgili pek çok metot sağlamaktadır. Bu özellikler, DOM düzenleme, elementlerdeki verileri ve özellikleri çekme, elementlerdeki verileri ve özellikleri düzenleme olmak üzere üç başlık altında ele alınabilir. JQuery, DOM’a element eklemek için dört metot sağlamaktadır. Bu metotlar, açıklamaları ve örnek kullanımları kitabınız sayfa 140’da Tablo 5.3’te sunulmuştur. JQuery DOM elementlerinin silinmesi için empty ve remove metotlarını sağlamaktadır. İlgili örnekler kitabınız sayfa 140’da Tablo 5.4’te verilmiştir.
JQuery, elementler üzerindeki verileri çekmek ve düzenlemek için dört metot sağlamaktadır. Bu metotlar,
açıklamaları ve örnek kullanımları kitabınız sayfa 141’de Tablo 5.5’te verilmiştir.
text metodu bir elementin metin içeriğini düzenlemek ya da çekmek için kullanılır. text metodu, elementin metnini sıfırlayarak değiştirir. Element metnine ekleme yapmak için append metodu kullanılmalıdır
Bir elementin içindeki metni çekmek için text metodu parameter verilmeden çağırılır. Bir elementin içeriğine html kodları eklenmek istenirse text metodu yerine html kullanılır. text metodunun amacı metin eklemek olduğundan, parametre olarak gönderilen HTML kodları yorumlanmadan karakter olarak eklenecektir. html metodu ile gönderilen kodlarsa tarayıcı tarafından yorumlanır. text ve html metotları arasındaki farkı gösteren örnek kitabınız sayfa 141’de örneklenmiştir.
text ve html metotları formlarda kullanılan giriş elementlerinin içeriklerini düzenlemek için kullanılamaz. text, html ve val metotları elementlerin sayfada görünen değerlerini düzenleyebilir ya da çekebilir. attr metodu ise elementlerin niteliklerini (attribute) düzenlemek ya da çekmek için kullanılır.
JQuery CSS Metotları
CSS metotları elementlerin görünüşlerini değiştirmek için kullanılır. Elementin CSS özellikleri üzerinde doğrudan düzenleme yapmak ya da özellikleri çekmek için css metodu kullanılır.
css metodu ile birden fazla özelliği aynı anda değiştirmek için nesne yazım tekniği kullanılır. Bu amaçla CSS özelliği- değer çiftleri halinde oluşturulan bir nesne css metodunda parametre olarak eklenir. Nesne içinde CSS özellikleri ile değerler iki nokta ile birleştirilir.
CSS özelliklerinin elementlere uygulama biçimlerinden biri de elementlerin class özelliğine hazırlanmış CSS sınıflarının atanmasıdır. CSS sınıfları elementlere atanarak sınıflardan gelen özelliklerin elemente uygulanması sağlanabilir. Bu işlem genellikle tasarımcılar tarafından HTML kodları yazılırken gerçekleştirilir.
Sayfada tanımlı bir CSS sınıfını elemente eklemek için addClass, elemente eklenmiş bir sınıfı çıkarmak için removeClass metodu kullanılır. CSS’in çalışma prensibi gereği elemente eklenen bir özellik daha önce düzenlendiyse bile değiştirilir.
toggleClass metodu, element üzerindeki sınıfın durumunu değiştirmek için kullanılır. toggleClass elementi kontrol ederek, verilen sınıf elementte bulunuyorsa çıkarır, bulunmuyorsa ekler. Bu sayede, toggleClass kullanılarak bir elementin iki durum arasında geçiş yapması sağlanabilir. toggle ifadesi içeren JQuery metotları (toggleClass, slideToggle vb.) ilgili özelliği tersine çevirir.
JQuery Mobile
JQuery Mobile (JQM) HTML5 temelli, öncelikle mobil cihazları hedef alan bir kullanıcı arayüzü geliştirme sistemidir. JQM ile geliştirilen arayüzler farklı ekran
boyutlarına tepki verebilir (responsive). Bunun yanında JQM, dokunmatik ekranlardaki dokunma, taşıma, kaydırma gibi olaylara tepki verebilir. JQM, kendini kanıtlamış JQuery ve JQuery UI sistemleri üzerine temellenmiştir. JQM’in sunduğu başlıca özellikler arasında sayfalar arası geçişler, AJAX kullanarak veri çekme, dokunma olayları ve öncelikle mobil cihazlar için üretilmiş elementler sayılabilir. JQM, JQuery kuruluşu çatısı altında sürdürülmekte olan açık kaynak kodlu ve ücretsiz bir sistemdir.
Sayfalara JQM Eklemek
Tepkisel tasarım (responsive design), internet siteleri ve uygulama arayüzlerinin farklı ekran boyutları ve tarayıcı genişliklerine göre kendilerini yeniden düzenleyebildiği bir tasarım yaklaşımıdır. Yaklaşımın amacı okunurluğu desteklemek ve kullanıcı etkileşimini iyileştirmektir. Yaklaşımın temelinde CSS 3 tanımlamaları ile birlikte gelen medya sorguları (media querries) yer almaktadır.
JQuery UI, internet siteleri ve uygulama arayüzleri geliştirmek için elementler, efektler ve temalar sunan farklı bir kütüphanedir.
Projedeki görsellerin doğru gösterilebilmesi için .zip dosyası içinde gelen images klasörünün css dosyası ile aynı klasörde yer alması gerekmektedir.
Örnek kodları kitabınız sayfa 146’da görebilirsiniz.
Bu kodlar, Google firması tarafından üretilen Chrome internet tarayıcısının güvenlik ayarları nedeniyle çalışmayabilir. Bu durumda, sayfanın alt bölümünde JS kodlarını bağladığınız bölümü kitabınız sayfa 147’de verilen kodda görüldüğü şekilde düzenlemeniz gerekecektir.
JQM Sayfaları
JQM tek sayfalık uygulamalar (Single page application) üretmek için kullanılır. Tek sayfalık uygulamalar tek bir HTML sayfasında oluşturulur. Tüm içerikler bir sayfa içine yazıldığından, bu uygulamalar sayfaların yeniden yüklenmesine gerek bırakmaz. Kullanıcı uygulamanın içinde önceden oluşturulmuş sanal sayfalar arasında gezinebilir ya da bir internet servisinden çekilen sanal sayfa içeriklerini inceleyebilir. JQM arayüzlerinin temel bileşeni sayfalardır. Sayfalar internet sitelerindeki HMTL dosyalarına benzetilebilir. JQM sayfası üretmek için bir div elementlerinin data-role özelliği page olarak düzenlenir. JQM sistemi tek sayfalık uygulamalar üretir.
HTML dosyasında istenildiği kadar JQM sayfası oluşturularak bunlar birbirlerine bağlanabilir. Sayfa 148’de ilk verilen kodda üç sayfa oluşturulmuştur. 2. Kodda ise bir sayfalı temel bir JQM uygulaması oluşturulmaktadır. Kodların özellikle kenar boşlukları, paragraflar arası boşluklar, satır aralıkları gibi tipografik özelliklerin okunurluğu arttırmak için düzenlenmiş olduğuna dikkat ediniz.
JQM uygulamalarında genellikle birden fazla sayfa bulunur. Sayfa 150’de verilen kodda iki sayfalı bir yapı oluşturularak bu sayfalar birbirlerine bağlanmaktadır.
Oluşturduğunuz arayüzlerin gerçek mobil telefonlarda nasıl görüleceğini incelemek için bilgisayarınıza yerel bir HTTP sunucu kurabilirsiniz. Bu amaçla XAMP (https://www.apachefriends.org/tr/index.html) ya da WAMP (http://www.wampserver.com) gibi platformları kullanabilirsiniz.
JQM Kutuları
JQM sisteminde diyalog kutuları, açılır kutular ve paneller olmak üzere üç farklı kutu elementi kullanılabilir. JQM kutularının örnek uygulamaları için kitabınız 151-154 sayfaları arasında verilen örnekleri inceleyiniz.
Diyalog Kutuları
Diyalog kutularının amacı kullanıcıya mesaj göstermek ya da kullanıcıdan bildirim almaktır.
Açılır Kutular
Kullanıcılara mesaj vermek için açılır kutular kullanılabilir. Bağlantılar farklı bir sayfa altındaki açılır kutuları açamaz. Farklı sayfalardan ulaşılması istenen kutular için diyalog kullanılabilir. Açılır kutuların önemli bir kullanım alanı sayfada resim gösterilmesidir.
Paneller
Oldukça esnek bir tasarıma sahip olan paneller, menüler, formlar ve yardımcı araçlar oluşturmak gibi pek çok amaçla kullanılabilir. Diyaloglar ve açılır kutular gibi normalde görünmeyen paneller, ekranların bir tarafını kaplayacak şekilde yerleştirilir ve kullanıcı etkileşimine bağlı olarak gösterilir. Panellerin gösterilmesi için üç tür etki kullanılabilir. JQM sisteminde varsayılan etkide, panel sabit kalırken sayfa kaydırılarak panelin üzeri açılır. Bunun yanında, overlay ve push etkileri kullanılabilir.
JQM Geçiş Efektleri
JQM, sayfa geçişleri ve kutuların gösterilmesi için bir dizi hazır geçiş efekti sağlar. Bu efektler sayfa, açılır kutu ya da diyalog kutusunu açacak olan bağlantının data-transition özelliğinde belirlenir. Geçiş efektlerinin tersten oynatılması olanaklıdır.
JQM Arayüz Araçları
Düğmeler
Arayüzlerin en çok kullanılan elementleri düğmelerdir. JQM sisteminde input, button ve a (bağlantı) elementleri düğme üretmek için kullanılabilir. Bu elementleri düğmeye çevirmek için ui-btn sınıfı eklenir.
Kitabınız sayfa 156’da yer alan Tablo 5.7 Farklı Elementler ile Düğme Oluşturmak İçin Yazılabilecek Kodlar ve Sonuçları göstermektedir.
JQM düğmelerde kullanılabilecek bir çok sınıf sunmaktadır. Bu sınıflar elementlere uygulandığında oldukça farklı düğmeler oluşturulabilir.
Simgeler
JQM arayüz elementlerini daha anlaşılır kılan bir simge kümesi sunmaktadır. JQM simgelerinin SVG ve PNG versiyonları bulunmaktadır. SVG vektörel bir format olduğundan ölçeklenme işlemlerinden etkilenmez. SVG dosya formatını desteklemeyen sistemlerde otomatik olarak simgelerin piksel tabanlı (PNG) versiyonları kullanılır. Yerel bir proje geliştirmek için JQM sistemini indirdiğinizde bu simgeleri css klasörü içinde görebilirsiniz.
Bir düğmeye sınıflar yoluyla simge eklemek için, simgeyi ifade eden sınıf ve simgenin düğmedeki pozisyonunu belirten sınıfın elemente eklenmesi zorunludur.
Simge sınıfları düğmelerde kullanılabilecek diğer sınıflar birleştirilerek oldukça farklı düğmeler elde edilebilir.
Düğmelere özgü sınıfların yanında, JQM’in simgelere özgü sınıfları da kullanılarak özelleşmiş düğmeler üretilebilir.
Son olarak arayüzler için oldukça kullanışlı olabilecek, sadece simgelerden oluşan düğmeler üretilebilir.
Düğme Grupları
Belirli bir amaca yönelik düğmeler bir grup halinde sunularak daha kompakt arayüz elementleri oluşturulabilir. Bu amaçla düğmeler data-role özelliği controlgroup olarak belirlenmiş bir gruplayıcı element içine alınır. Düğme grupları yatay ya da dikey şekillerde oluşturulabilir.
Menü Çubuğu
JQM temel bir menü çubuğu oluşturma aracı sağlar. Bu araç üzerinde yan yana beş adede kadar düğme gösterilebilir. Düğme sayısının beşi geçmesi durumunda araç otomatik olarak düğmeleri birden fazla satıra yaymaya başlar. Menü çubukları sayfadaki herhangi bir alana eklenebilir. Sayfada istendiği kadar çok menü çubuğu oluşturulabilir. Bununla birlikte, mobil cihazlarda menü çubukları genellikle başlık ya da alt bilgi barları üzerinde sağlanır.
Listeler
HTML dilinin sunduğu sırasız ve sıralı listeler müdahale edilmediği sürece sayfalarda düzenlenmeden gösterilir. Listeler, data-role özellikleri listview olarak belirlendiğinde JQM listelerine çevrilir.
JQM listelerindeki önemli bir etkileşim aracı da filtrelerdir. JQM listelerinin üzerine bir arama kutusu eklenerek, listenin bu kutuya girilen değere göre filtrelenmesi sağlanabilir.
Bölüm kapsamında yer alan konuların kalıcılığının sağlanması için kitabınızda yer alan kodları ve açıklamalarını okumanız ve uygulamanız önemlidir.