Bileşenler ve Stil

Konu Anlatımı

Bileşenler ve Stil

Bileşenler ve Stil, Mobil Uygulamalar dersi kapsamındaki Arayüz Tasarımı ünitesinin temel konularından biridir. Bu konu alanın gerektirdiği bilgi ve becerilerin kazandırılmasına temel oluşturur.

Temel Bilgiler

• Mobil arayüz küçük ekrana uygun tasarlanmalıdır.
• Buton, metin kutusu ve liste temel bileşenlerdir.
• Duyarlı yerleşim farklı ekran boyutlarına uyar.

Uygulama ve Dikkat Edilmesi Gerekenler

Bu konunun uygulamasında iş güvenliği kurallarına uyulmalı, kullanılan araç ve malzemeler amacına uygun seçilmeli ve yapılan işlemler standartlara göre kontrol edilmelidir. Öğrenilen bilgiler atölye ve iş yeri uygulamalarıyla pekiştirildiğinde kalıcılık artar.

Bileşen Kavramı

Bileşen, arayüzün yeniden kullanılabilir parçasıdır; kendi görünümünü ve davranışını bir arada taşır. Büyük ekranlar küçük bileşenlere bölünür; böylece tek bir sorumluluk tanımlanır, hata ayıklama kolaylaşır. Bileşenler birbirleriyle props aracılığıyla veri alır, durum (state) kendi içinde saklanır.

Özellik ve Durum Yönetimi

Özellikler üst bileşenden gelen değişmez girdilerdir; durum ise zamanla değişen veridir. Durum yalnız gerektiğinde bileşen içinde tutulur, aksi halde kopya veri tutarsızlığı oluşur. Stil yaklaşımında ise renk, boşluk ve yazı boyutu gibi kararlar tasarım tokenlarına bağlanır; böylece tema değiştiğinde tek yerden güncellenir.

Adım Adım Bileşen Tasarımı

1. Ekranı tekrar eden ve edemeyen parçalara ayır.
2. Her parçanın girdi (props) ve çıktı olaylarını belirle.
3. Gereken durumu en yakın ortak atasında tut, gereksiz durumu yükseltme.
4. Stilleri tasarım tokenlarıyla düzenle ve koyu tema seçeneğini dene.

Örnek Uygulama

Bir liste kartı, başlık ve açıklama alanlarını tek bileşende toplar; dışarıdan başlık, açıklama ve tıklama olayını alır. Aynı kart, arama sonuçlarında ve favorilerde farklı verilerle yeniden kullanılır.

Sınav ve Uygulama Odaklı Noktalar

Sınavda özellik ile durum farkı, durumun nerede tutulacağı ve yeniden kullanılabilirliğin kazancı sorulur. Uygulamada her bileşenin tek sorumluluğu olduğu, stil tekrarının tokenlara taşındığı denetlenir.

Bileşen test edilirken farklı özellik değerleri denenir: uzun metin, boş veri ve çok sayıda kayıt ekranın taşmadığını doğrular. Bileşenin adlandırması da işleviyle eşleşmelidir; okunur adlar, kod incelemesinde niyeti açığa çıkarır ve bir sonraki geliştiricinin adaptasyonunu hızlandırır.

Bileşenlerin Modüler Tasarımı

Bileşenlerin modüler tasarımı, arayüzün farklı ekran boyutlarına uygun olarak çalışmasını sağlamak için kritik bir adımdır. Mobil uygulamaların küçük ekranlarda etkin çalışması için bileşenlerin boyutları ve yerleştirilmesi dikkatli bir şekilde planlanmalıdır. Modüler tasarım, bileşenlerin tekrar eden parçalar olarak kullanılmasını sağlar ve bu sayede ekran boyutlarındaki değişikliklere hızlı ve etkili bir şekilde uyum sağlanır. Bu yaklaşım, özellikle mobil uygulamalar için büyük bir avantaj sunar.

Bileşenlerin modüler tasarımı, ayrıca ekran boyutlarındaki değişikliklere karşı daha dayanıklı bir yapı oluşturur. Her bileşenin kendi görünümünü ve davranışını taşımaları, farklı ekran boyutlarında bile aynı işlevi yerine getirebilir. Bu şekilde, mobil uygulamaların kullanıcı deneyimini daha iyi hale getirmesi ve ekran boyutlarındaki değişikliklere hızlı uyum sağlama konusunda büyük bir kazanç elde edilir. Ayrıca, modüler tasarım, bileşenlerin yeniden kullanılması konusunda da büyük bir kolaylık sağlar.

Bileşenlerin Test Edilmesi

Bileşenlerin test edilmesi, arayüz tasarımlarının kalitesini ve işlevselliğini sağlamak için gerekli bir adımdır. Test edilmesi gereken bileşenler, farklı özellik değerleriyle çalıştırılır; bu değerler arasında uzun metin, boş veri ve çok sayıda kayıt gibi durumlar bulunur. Testler, bileşenlerin ekranın taşmadığını doğrulamak için yapılır ve bu sayede arayüzün kullanıcı deneyimini etkileyecek hataların önüne geçilir.

Bileşenlerin test edilmesi, ayrıca bileşenlerin doğru şekilde çalıştığından emin olmak için gereklidir. Testler, bileşenlerin farklı durumlarda nasıl davranacağını incelemek için yapılır ve bu sayede arayüzün kullanıcı deneyimini etkileyecek hataların önüne geçilir. Ayrıca, testlerin sonucunda bileşenlerin adlandırılması da işleviyle eşleşir ve bu, kod incelemesinde niyeti açığa çıkarır.

Ne Öğreneceğiz

Mobil Uygulamalar dersi kapsamında Bileşenler ve Stil konusu. Bu konuda ögrenme çıktıları:

• Bileşenler ve Stil ile ilgili temel kavramları açıklar.
• Bileşenler ve Stil konusunun Mobil Uygulamalar dersi içindeki yerini ve önemini belirtir.
• Konuyla ilgili araç, gereç ve malzemeleri amacına uygun seçer.
• İş sağlığı ve güvenliği kurallarına uygun çalışır.
• Öğrendiği bilgi ve becerileri atölye/iş yeri uygulamalarında kullanır.

Ön Bilgi

Bu konuya başlamadan önce temel kavram ve ön koşulları kavramanız yardımcı olacaktır. Konunun çerçevesinde şu kavramlar dikkat ister:

• Mobil arayüz küçük ekrana uygun tasarlanmalıdır.
• Buton, metin kutusu ve liste temel bileşenlerdir.
• Duyarlı yerleşim farklı ekran boyutlarına uyar.
• Durum, verinin en yakın ortak atasında tutulur; alt bileşenlere kopyalanmaz.
• Aynı bileşen farklı verilerle yeniden kullanıldığında kod tekrarı ve hata yüzeyi azalır.

Basit Örnek ve Günlük Yaşam

Günlük yaşamda ve mesleki bağlamda bir uygulama:

Soru: Mobil arayüz küçük ekrana uygun tasarlanmalıdır.

1. Konuyu tanımla ve ilgili kavramları belirle.
2. Doğru yöntem veya hesaplamayı uygula.
3. Sonucu standartlara göre kontrol et.

Sonuç/cevap: Doğru uygulama sonucunda konuyla ilgili kazanım elde edilir.

İleri Örnek

Daha ileri bir uygulama:

Soru: Aynı kart iki farklı sayfada kullanılacaktır. Tasarım nasıl olur?

1. Adım 1: Kartın değişmeyen gövdesini sabitle.
2. Adım 2: Değişen alanları özellik olarak dışarıdan al.
3. Adım 3: Her iki sayfada farklı verilerle test et.

Sonuç/cevap: Gövde sabit, içerik özelliklerle verilerek kart iki sayfada aynı bileşenle kullanılır.

Karşılaştırma Tablosu

Sık Yapılan Hatalar

Bileşenler ve Stil ile ilgili kavramları birbirine karıştırmak: Temel kavramları tablo veya zihin haritasıyla ayırt et.

Uygulamada standartlara ve iş güvenliği kurallarına uymamak: Her adımda güvenlik ve kalite kurallarını uygula.

Kullanılan araç-gereci amacına uygun seçmemek ve bakımını ihmal etmek: Doğru ekipmanı seç, kullanım öncesi ve sonrası kontrol et.

Aynı veriyi birden fazla bileşende kopyalamak: Kopyalar zamanla farklılaşır; tek kaynak tutulup özellik ile dağıtılır.

Özet

Bileşenler ve Stil, Mobil Uygulamalar dersi kapsamında ele alınan temel konulardan biridir. Mobil arayüz küçük ekrana uygun tasarlanmalıdır. Buton, metin kutusu ve liste temel bileşenlerdir. Duyarlı yerleşim farklı ekran boyutlarına uyar. Bu bilgiler uygulama ve iş güvenliği kurallarıyla birlikte pekiştirilmelidir.

Kendini Dene

Soru: Yönerge: Bir liste ekranı için bileşen mimarisi kur. Mimariye göre bileşenin görünüm ve davranışını, özelliklerle verinin nasıl aşağı akacağını, alt bileşen olaylarının nasıl yukarı taşınacağını, ortak durumun nerede tutulacağını ve tema değerlerinin nasıl tek yerden yönetileceğini ayrı maddeler hâlinde yaz; ardından bu mimarinin kod tekrarını nasıl azalttığını açıkla.

Örnek cevap: Puanlama anahtarı: bileşenin görünüm ve davranış olarak tanımlanması 3 puan; özelliklerle verinin aşağı aktığının yazılması 4 puan; geri bildirim fonksiyonuyla olayın yukarı taşındığının yazılması 4 puan; durumun en yakın ortak atasında tutulduğunun yazılması 4 puan; tema değerlerinin tasarım tokenlarıyla tek yerden yönetildiğinin yazılması 3 puan; kod tekrarı ve hata yüzeyinin azaldığının açıklanması 2 puan. Toplam 20 puan. Model cevap: Mimari bileşen, özellik, olay, ortak durum ve token başlıklarını içerir; tek bileşenin yeniden kullanımı kod tekrarını düşürür.