Yazılım Projeleri

Spring ve React ile Fullstack Mini Twitter Web Uygulaması Geliştirmek

Herkese merhaba,

Bilindiği üzere Twitter, kullanıcıların “tweet” olarak mesajları yayımladığı ve birbirleriyle etkileşimde bulunduğu bir sosyal ağ hizmetidir. Bu yazımda backend kısmında Spring Boot ve frontend kısmında React teknolojilerini kullanarak mini bir Twitter web uygulamasının yapım aşamalarından bahsedeceğim. Uygulamamızın ismi üzerinde saatlerce düşündükten sonra “Tweety” adını verdim. Şimdi kullanacağımız IDE’lere bakalım.

  1. SpringToolSuite4
  2. Visual Studio Code
  3. Postman

SpringToolSuite4 yerine Eclipse ya da IntelliJ gibi farklı IDE’leri de tercih edebilirsiniz. Visual Studio Code gerçekten coding anlamında çok kullanışlı bir IDE, özellikle JavaScript için tercih edilebilir. Postman’i ise Unit Testing bağlamında kullanacağız.

Spring Projesi Oluşturma

Öncelikle Spring projesini oluşturmak için Spring Initializr‘ı kullanacağız. Bu projemizde proje tipini Maven olarak kullanıyoruz. (Alternatif olarak Gradle kullanabilirsiniz)

Yazılım dili olarak Java’yı, Spring Boot versiyonu şu an için güncel olan 2.4.5’i kullanıyoruz.

Projemizde kullanacağımız dependencielerimiz (bağımlılıklar) ise aşağıdaki gibidir:

  1. Spring Web (Restfull bir backend uygulaması yazmamız için içinde tomcat web server ile gelen bir dependency)
  2. Spring Security (Her web uygulamasında gereken authentication için security dependecy)
  3. Spring Data JPA (Hibernate. Development kolaylığı sağlaması sebebiyle H2 database kullanacağız. Sadece uygulama açıkken çalışacak ve development için oldukça yeterli.)
  4. Spring Boot DevTools (Uygulamayı bizim yerimize restart eden bir eklenti diyebiliriz. Yaptığımız her değişikliği otomatik olarak farkeder ve restart eder.)
  5. Lombok (@Data annotationı sayesinde bir Bean’de genellikle olması gereken ve yazmak zorunda olduğumuz kodları yazmamıza gerek kalmayacak. Örneğin bir BB(Backing Bean)’imizdeki değişkenlerin Getter ve Setter methodlarını yazmaktan kurtulacağız.)

React Projesi Oluşturma

React projesi oluşturmak için en kolay yol Facebook tarafından geliştirilen Create React App isimli toolu kullanmak. Frontend projemiz için gerekli olan birçok şeyi beraberinde getiriyor olacak.

Öncelikle projeyi kurmak istediğimiz konumun altında komut dosyasında şu komutu koşmamız gerekiyor: npx create-react-app frontend

Biraz uzun sürebilir fakat sonrasında “frontend” isimli bir klasör oluşturulacak ve içinde de basic main projeyi göreceğiz. Sonrasında komut dosyasında npm start dediğimizde uygulamamız hazırlanacak ve development serverımız tarafından paylaşılan IP ile browserdan erişebileceğiz.


Projemizin temel kısımlarından bahsettikten sonra kod tarafını direkt kendi GitHub hesabım üzerinden paylaşacağım repository üzerinden çekip inceleyebilir ve localhost üzerinden nasıl çalıştığına dair göz atabilirsiniz. Tabii ki frontend için development serverı ve backend için WS applicationı başlatmayı unutmayın. Aşağıda örnek ekran görüntülerini de paylaşacağım.

Spring ve React tarafı kendi içinde kocaman bir dünya. Dolayısıyla text olarak yazıya döküp kullanılan teknoloji ve özellikleri anlatmak çok yüzeysel, yetersiz kalacaktır.

Örneğin;

  • React tarafı için bir Global State yöntemi olan “Redux”, Class Component yerine function ile React özelliklerini kullanmamızı sağlayan ve versiyon 16.8 ile çıkan “Hooks” gibi bir çok büyük konular var.
  • Aynı şekilde Spring tarafında da Java EE(Enterprise Edition) ile Bean tarafından başlamak üzere, Repository sınıfları, Controller sınıfları, Service sınıfları ve Validation sınıflarının her birinin kendi içinde ve tümleşik olarak bir çalışma mantığı var.

Bu konuları ileride başka bir yazıda ayrı ayrı ele alabilirim. Şimdilik örnek bir mini Twitter uygulamasının çalışma mantığını debuglayarak ve kodlarını inceleyerek öğrenmebilirsiniz.

Umarım faydalı olur. Sevgiler 🙂

GitHub Repo

https://github.com/ozkanmustafaa/tweety

Yaptığım commitlerin hangi sebeple yapıldığını her commit başlığında yazdım.

23 commit arasından özellikle incelemek istediğiniz commit’e gidip yapılan değişiklikleri inceleyebilirsiniz.

Uygulamanın Ekran Görüntüleri

Anasayfa

Üye Olma Ekranı

Giriş Ekranı

Kullanıcı Girişi Yapılmış Anasayfa

Kullanıcı Profili

Tweet Atımı

Tweet Attıktan Sonra Anasayfa

Tweet Silme

Spring ve React ile Fullstack Mini Twitter Web Uygulaması Geliştirmek” üzerine bir yorum

  1. Elinize sağlık! Benzer bir çalışma gerçekleştirmeyi düşünüyorum. Yardımcı olabilir misiniz?

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir