Spring Boot ve React ile Not Tutma Web Uygulaması — 1
Spring Boot Projesinin Oluşturulması
Spring Boot projesi oluşturmak için start.spring.io sitesi kullanılır. Bu kısımda ilgili proje tipleri, versiyonlar, isimler ve bağımlılıklar seçilerek proje oluşturulur ve herhangi bir IDE ile çalıştırılabilir.
Dependencies
Spring Web: Web uygulaması geliştirmek için gereklidir ve içerisinde Tomcat Web Server yer almaktadır.
Spring Security: Uygulamanın güvenlik ihtiyaçları için kullanılmaktadır.
Spring Data JPA: Veri tabanı ile iletişim için kullanılmaktadır.
H2 Database: Uygulama içerisinde gömülü olarak çalışan bir veri tabanıdır ve geliştirme aşamasında idealdir.
Spring Boot DevTools: Uygulama geliştirme aşamasında yapılan değişikliklerin otomatik olarak farkedilip uygulamanın restart edilmesi sağlanır.
Lombok: Sınıf içerisindeki özellikler için otomatik getter ve setter gibi metotları tanımlar. Daha temiz ve az kod yazılmasını sağlar.
Validation: Api’ye gelen verilerin istenilen formatta olup olmamasını kontrol etmektedir.
Bu bağımlılıklar proje içerisinde “pom.xml” dosyasında yer alır ve buradan düzenlenebilir. Bağımlılık eklemek için mvnrepository.com sitesi kullanılabilir.
React Projesinin Oluşturulması
Node.js yüklü bir bilgisayarda ilgili klasör altında terminalde “npx create-react-app my-app” ile React projesi oluşturulur. “cd my-app” komutu ile oluşturulan proje klasörüne gidilir. Daha sonra “npm start” komutuyla proje başlatlır ve tarayıcıda “localhost:3000" ile uygulamaya erişilebilir.
Signup Page
Uygulamayı kullanabilmek için kayıt sayfasında benzersiz bir kullanıcı adı, ad ve soyad, parola ile parola tekrarı bilgileri istenilen formatta girilerek “Signup” butonuna basılır ve kayıt başarılı bir şekilde tamamlanır.
Input Değişkenleri
Inputlar ile kullanıcıdan alınan veriler form isimli “useState hook” da tutulur.
Input Değerlerinin Güncellenmesi
Input verileri her değişimde “onChange” metodu ile değiştirilir. Önceki form verileri değiştirilmeden sadece “name” değerine göre ilgili “value” atanır. Her değişim işleminde de kullanıcıya gösterilen validasyon hataları içerisinde değişim yapılan hata mesajı undefined yapılır. Kullanıcıya kayıt başarılı bilgisi gösteren değer de bu kısımda false olarak değiştirilir.
Input Component
Form elemanları için “Input” bileşeni kod sayısını azaltmakta ve birden fazla yerde kullanılmaktadır. Gelen değerlere göre input elemanı oluşturulur ve ilgili yerlerde çağırılarak kullanılabilir.
Kayıt Metodu
İstenilen bilgiler girilip “signup” butonuna basıldıktan sonra “onClickSignup” metodu tetiklenir. Bu kısımda girilen bilgiler alınır ve redux ile backend kısmına istek atılır. Gelen cevap başarılıysa kullanıcıya kayıt başarılı bilgisi gösterilir, hata alınırsa (format, uzunluk, benzersiz kullanıcı adı hataları vb.) da ilgili hatanın mesajı input altında kullanıcıya gösterilir.
User Entity
Spring Data JPA ile kullanıcı tablosu “Entity” anotasyonu ile oluşturulur. Bu sayede veri tabanında “User” adlı bir tablo oluşur ve bu sınıftaki özellikler ile tablodaki sütunlar eşleştirilir. Aynı zamanda gelen veri için “NotNull, Size, Pattern” vb. anotasyonlar veya özel anotasyonlar ile de istenilen doğrulukta olması sağlanabilir.
Kullanıcı Parolasının Şifrelenmesi
Kayıt aşamasında kullanıcının parolası “BCryptPasswordEncoder” ile şifrelenir ve veri tabanına bu şekilde kaydedilir. Bu sayede güvenli bir depolama şekli elde edilmiş olur.
Hata Kontrolü
Gelen isteklerde hata oluşması durumunda kullanılabilecek “ApiError” sınıfı ilgili değerlerle oluşturulur. İsteklerde error oluşması durumunda “ErrorHandler” içerisindeki metot çalışacaktır ve burada ApiError sınıfı kullanılarak istenilen değerlere göre bir hata cevabı dönülecektir.
Application.yml Dosyası
Spring Boot proje konfigürasyonları “application.yml” dosyasında yapılabilmektedir. “spring.jpa.properties.javax.persistence.validation-mode: none” ile veri tabanına gönderilen varlıkların “Hibernate Validator” ile doğrulanması işlemi iptal edilir. “prod” ve “dev” isimli profiller oluşturulur ve uygulama geliştirme ile yayın aşamaları için farklı ayarlar kullanılması sağlanabilir. “generate-unique-name” ile H2 veri tabanı kullanılırken dinamik bir veri tabanı ismi oluşturulması engellenir. “ddl-auto:update” ile veri tabanı şeması Hibernate tarafından otomatik olarak oluşturulur.