React-Native öğrenimim ve gelişimim adına, öğrendiğim çeşitli componentleri ve yapıları bir proje içerisinde kullanarak aşina olma amacıyla çeşitli kaynaklardan da yararlanarak yaptığım React-Native projemdir.
Uygulama ilk olarak GameZone adında ana menu ekranı olarak nitelendirebileceğimiz bir ekran ile açılmakta, bu menude cardView şeklinde sıralanmış oyun isimleri mevcut. spesifik olarak bir oyuna tıklarsak eğer o oyunun detaylarını "reviewDetails" kısmında görebiliriz. Aynı zamanda Header'ın hemen altındaki "+" iconu'na tıklarsak newReviewForm ekranı açılmakta ve bu ekrandan isteğimize göre GameZone ekranına yeni bir oyun eklemesi yapabilmekteyiz. (Not: yapılan eklemeler, uygulama veritabanı ile bağlı olmadığı için maalesef kalıcı değildir.)
uygulamada iki adet StackNavigation bulunmaktadır. StackNavigation yapısının biri gameZone penceresi ile reviewDetails pencerisini kapsamaktadır.
ikinci StackNavigation yapısı olarak da About ekranı mevcut. Bu iki StackNavigation yapısı arasında NavigationDrawer yapısı ile soldan açılan menu ile geçiş yapabilmekteyiz.
Menu, gameZone penceresinin sol üstünde bulunan menu butonuna tıklandığında veya sol köşeden sağa sürüklenince açılmaktadır.
About Ekranı, adından da anlaşılacağı üzere uygulama hakkında bir takım bilgileri barındırmakta.
Burada GameZone ekranında listelenen oyunların spesifik detayları mevcut. Bu detay oyundan oyuna değişmektedir.
Oyunların rating detayına göre bir png seçilip ona uygun olarak rating kısmı gösterilmektedir. Bu oyunun kalbimde yeri çok ayrı olduğu için rating değeri olarak 5 girmiştim
ve buna uygun olarak rating değerinde 5 adet kalp bulunan bir png gösterilmekte.
Bahsettiğim üzere, her oyunun rating, body ve title bilgisi reviewDetail kısmında görülebilir halde, bu oyunun da rating değeri 4 olduğu için
4 adet kalp bulunan bir png gösterilmekte.
Yine farklı değerlere sahip bir review olarak bu oyunun da rating'i 3 olduğu için 3 adet kalp içeren bir png gösteriliyor. Ayrıca isteğe bağlı olarak
body kısımlarında da değişiklik yapılabilirdi ancak örnek olarak default "review body" gibi bir değer girdim tüm oyunlara.
Rating değeri 2 olan bir oyun da görüldüğü üzere 2 adet kalp içeren bir png resmi ile listelenmekte.
Son olarak Rating değeri 1 olan oyunumuzu sizinle paylaşıyorum.
Bu kısımda anlatmak istediğim; girdilerin farklılıklarına göre ReviewDetails kısmında dinamik olarak farklılıklar görülebilmekte.
İlk Başta "+" iconu'na tıklanınca açılan newReviewForm ekranı bu kısımdır. Burada title, body ve rating değerleri girildiğinde ve "Submit" butonuna tıklandığında
GameZone ekranına yeni oyun review'i ekleyebiliriz. (tabii ki input field'ların geçerli girdilere sahip olması gerekmektedir.)
Ayrıca üstte bulunan çarpı iconu ile de ekleme yapmaksızın tekrardan GameZone ekranına dönüş yapabilmekteyiz.
Bu form'u tasarlarken react-native 3.parti paketlerinden olan "formik" paketini kullandım.
burada da az önceki newReviewForm'da girdiğimiz ve submit butonuna tıkladığımzda bu review'in GameZone ekranında görüntülendiğini görmekteyiz.
Bu kısım da girdilerin geçerli olması için oluşturduğum kontrol sistemini görmekteyiz. Bu kontrol sistemini yine react-native 3. parti paketlerinden olan
"yup" paketi ile gerçekleştirdim. Geçerli Şemayı oluşturup Formik formuna bu şemayı eklediğimzde girdileri bu şekilde belli bir kontrol şeması altında tutabiliyoruz.
İstenen Şartlar sağlanmadıkça bu kontrol sistemi sayesinde bir review eklenmesini önlemiş oluyoruz.
Dip Not: Uygulamayı yaparken çeşitli tutorial'lardan ve bir çok dokumantasyon'dan yararlandım ancak her ne kadar bu kaynaklar yardımcı olsa bile çeşitli versiyon uyuşmazlıkları çıktı. Elimden geldiğince kendime göre bir şeyler ekleyerek yapmaya çalıştım. Başta da belirttiğim gibi bu uygulamayı yapmamdaki asıl amaç öğrendiğim componentleri uygulayıp somut bir şekilde görebilmekti. Ayrıca bu süreçte araştırma yapıp hataların nedeni sorguladığımda ve çözebildiğimde de çok keyif aldığımı belirtmeliyim.