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.

spring boot project
Spring Boot Proje Oluşturma

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.

Signup Page
Signup Page

Input Değişkenleri

Inputlar ile kullanıcıdan alınan veriler form isimli “useState hook” da tutulur.

React useState
Form verileri

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.

React onChange method
onChange Metodu

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.

React custom input component
Input Component

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.

React onClickSignup Method
onClickSignup Metodu
React Signup Validation
Doğrulama Mesajları

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.

Spring Boot User Entity
User Entity

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.

Spring Boot Password Encoder
Parola Şifreleme
H2 Database Encoded Password
Veri Tabanında Parola Tutma

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.

spring boot custom api error
Custom Api Error
spring boot error handler
Error Handler

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.

spring boot application.yml
Application.yml

--

--

--

Software Engineer

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Mustafa KAPLAN

Mustafa KAPLAN

Software Engineer

More from Medium

JavaScript, NoSQL and MongoDB

Use Spring Framework, React, and PostgreSQL to create a simple To-do Application #1

Simple Guide to React Js Internationalization