Bitirme Çalışması - Bahar 2020

İlk İlerleme Raporu

Kocaeli Üniversitesi, Bilgisayar Mühendisliği

Ata GÜLALAN
160202034

Oğuzhan TÜRKER
160202015

Serdar TUNALI
1602020

Kasu

01.04.2020

Kasu Tasarım

Bu hafta oyunun ana karakteri olan Kasu için bir component tanımladık. Bu komponentin içerisine dinamik olarak prop alabilen alt komponentler tanımladık. Böylece üst komponentte bir prop değişimini alt komponente atarak state management’i kolaylaştırdık.

Problem, her bir komponentin üst üste render edilmesiydi. Örneğin Kasu’nun gözlüğünün, Kasu’nun sadece kafasını etkilemesi ve kafası hareket ettiğinde, gözlüğün de kafa ile beraber hareket etmesi gerekiyordu. Ancak gözlerin hareketi, gözlüğün hareketini etkilememeliydi. Ayrıca gözlük, gözlerin her zaman üstüne olmalıydı. Son olarak, gözleri tamamen kapayan gözlüklerin, gözleri gizlemesi gerekiyordu. Son olarak, gözlüğün kafanın arkasında değil, önünde render edilmesi gerekiyordu. Tüm bu problemleri ana komponentte düzenlememiz oldukça kafa karıştırıcı olabilirdi. Bu yüzden karakter bölümlendirmeyi buna göre belirledik.

İşin sonunda elimizde tamamen kişiselleştirebildiğimiz, küçük bölümlere bölünmüş bir karakter vardı. Rengini ve kullandığı eşyaları değiştiren bir ekran tasarlayacağız. Böylece kullanıcı, mağazadan aldığı eşyaları kuşanabilecek.

Şekil 1 - Karakter Kişiselleştirmenin Çalıştığını Anladığımız An

Kasu Animasyon

Aynı zamanda bu hafta, Kasu’nun CSS animasyonunu gerçekleştirdik. Bunu yaparken Chrome Dev Tools’un sağlamış olduğu Animations kısmı çok büyük yarar sağladı. Animasyonların zamanını ayarlamak ve Kasu’nun nefes alıp veriyormuş gibi salınmasını sağlamak, Kasu’ya canlılık kattı. Aynı zamanda, parçaların aynı animasyon class’ını kullanması, koddaki tekrarlığı azalttı.

Kasu’ya Hayat Katan Küçük Kod Parçacığı

Ana Ekran Tasarımı

06.04.2020

Projenin ana ekran tasarımında kaydırdıkça gözüken 4 bölüm bulunmaktadır. Bu bölümler ekran kaydırdıkça perspektifi değiştirerek sanki ekran üç boyutluymuş gibi gözüken erkranlardır. Bunu yapmamızdaki amaç, çocukların sayfaya olan ilgisini çekmek ve daha sonrasında ise bu ilgiyi yöneterek eğlenceli bir şekilde bilgi edinmelerini sağlamaktır. Ana ekranda kullanılan ilk “POD”, oyuna başlandığında ilk ekilecek olan bitkiyi ifade eder. Resimlerden de gördüğünüz üzere, ekranda bir çok hareketli nesne bulunmakta. Örneğin paranın dönüşü, robotun uçuşu, bulutların süzülüşü ve kutuların ilerleyişi gibi. Bu animasyonlar, kullanıcıyı sıkmadan bilgiyi aktarmak ve sayfada geçirilen süreyi arttırmak için tasarlanan küçük bileşenlerdir. Not: Mobil versiyon sitede şu anlık çalışmamaktadır. Site Adresi: https://pod.xava.me/

Mobil ve Masaüstü için Tasarladığımız Ekranlar, Adobe Illustrator Ekranı

Authentication

03.04.2020

Frontend

Kullanıcının  authentication işlemleri için gerekli sayfaları oluşturduk. Hesap girişi, kayıt olma ve şifre sıfırlama ekranları oluşturduk. Bu ekranları ana sayfa ile birleştirdik. Modal’i elle çizilmiş gibi yaparak tasarımın temiz, ancak doğal gözükmesini amaçladık.

Giriş ve Kayıt Ekranı

Backend

Bu hafta kullanıcının authentication işlemlerini gerçekleştirmek için gereken altyapı işlemlerini tanımladık. Öncelikle kullanıcının veritabanı modeli oluşturuldu. Daha sonra login, logout, register, resetPassword router tanımları yapıldı. Router tanımları yapıldıktan sonra controller tanımları yapıldı. Controller tanımlarında her bir işlem için ayrı fonksiyonlar içinde gerekli tanımlamalar yapıldı. Kullanıcı authentication işlemlerini yönetmek için JWT standardı kullanıldı. Kullanıcı giriş yaptıktan sonra üretilen tokeni kontrol edip API’lere erişebilmesi için gerekli olan middleware yapısı oluşturuldu. Kullanıcının güvenliği için girdiği şifreyi hashleme ve salt işlemlerini yapacak kütüphane projeye entegre edildi. Kullanıcının şifresini unutması durumunda şifresini değiştirmesi için e-posta ile şifre yenileme mekanizması geliştirildi. Şifre yenileme ekranında API işlemlerini yönetmek için token yapısı kullanıldı. Oyunda oluşabilecek hataları yönetmek için merkezi bir hata mekanizması oluşturuldu.Veritabanını bulut ortamında kullanmak için gerekli ayarlar yapıldı.