Groceries Shopping App : Flutter Web

İlk olarak hazırladığımız için mobil uygulamamız için, C.R.U.D işlemlerini yapabilmemiz için web uygulamasına ihtiyacımız var.

Başlarken ilk olarak şöyle başladım.

Admin paneli yapabilmek için bir web uygulaması geliştirmek istedim ve önüme alternatifleri koydum.

• React
• Angular
• Svelte
• Flutter Web

Burada tercih ederken dikkat etmeye çalıştığım, web tarafında çok büyük bir geliştirme yapmadan basit bir framework seçmek oldu.

• React ve Angular’ı eledim çünkü baştan bir java script ile geliştirme yapmak bu app için fazla geldi.
• Svelte hoşuma gitti ve başladım.
• Sonra dedim ki ya benim elimde yazdığım dart kodu var neden bir daha uğraşıyorum deyip, son durağımı flutter web ile bitirdim.

Çok ufak birkaç naçizane görüşüm.

Svelte ile geliştirme yaparken ilk başta çok hoş gitti ve çok güçlü bir framework. Fakat geliştirme yaparken çok fazla zaman harcadığımı ve web geliştirme için fazla emek verdiğimi düşünerek, flutter web ile geliştirmeye devam ettim. Svelte ile güzel işler yapılacağı çok açık gibi.

Flutter web tutorial

Ekranlarımızı tasarlayalım

• Admin panellerinde basitlik önde gelir, şuanki projemiz ise üç farklı ekran ihtiyacı bulunuyor.
• Birisi ürün ekleme, bir diğerinde ürün güncelleme ve ürün listeleme ekranımız mevcut.

Ürün listeleme ekranımız: product_view.dart

• Ekranda bizleri bir liste karşılıyor bu liste için çok basitçe bir “Listview” kullandık.
• Ekranın detaylarında ekleme ve update işlemleri için ilgili “widget”’lar tasarlanmalıdır.

Bu ekranda en önemli detay şunlardır:

• Bir kayıt işlemi yapmak için form ekranına ihtiyacımız var.
• Bu ekranı isteseydik burada çizebilirdik ama bundan vazgeçip bu form kayıt ekranı başka bir ekran olarak ve kendi durumunu bilecek “Stateful Widget” olarak yaptık.
• Eğer tüm işlemler başarılı ise geriye onComplete ile model’i dönüyoruz bu sayede o sayfamızda kod tekrarını engellemiş ve temiz bir geliştirme yapmış olduk.

Ürün ekleme ekranımız : create_product_view.dart

• Burada form kontrol işlemi çok önemli bir yer tutuyor.
• Form widget’i bizim için hazırlanmış ve çok rahat şekilde kontrol yapmanızı sağlar.
• Burada çok ufak bir “hacking” yapıyoruz.
  Textfield’e data girilidiği ilk anda kullanıcıya hatala girdiniz gibi kırmızı bir kutu çıkarmak iyi olmuyor.
  Kullanıcı ilk girdiğinde “autovalidate” değerini false yapıp kontrol etmiyoruz ama kullanıcı butona basıp kayıt işlemi yaptığında eğer başarısız olur ise bu değeri true çekip bundan sonra girilen değerleri otomatik kontrol eder hale getiriyoruz.
• Bir diğer önemli nokta validator paramatresidir.
  Bu validator size o fielde girilmiş değeri döner ve siz kendi kontrolünüzü yazarsınız.
  Eğer geri null dönerseniz bu işlem başarılı anlamına gelir aksi senaryoda misal “Boş Girilemez” dönerseniz ekrana otomatik kırmızı bir şekilde error text basacaktır.

Ürün güncelleme ekranımız: update_product_view.dart

• Bu ekranı basit bir “menu” olarak açarak yapmaya karar verdik.
• Burada önemli olan update işlemi bittikten sonra “socket” bağlantısı ile ilgili client’lara güncellenmiş datayı haber vermeyi sağlamaktır.

Sayfa tasarımlarımız tamamlandı, şimdi ekranlarımızın işlem yapan kısmı : product_view_model.dart

• Bu sayfada çok önemli olan kısım “update” veya “create” işlemlerinden sonrasında servisimiz ile haberleşmeyi sağlamak.
• GlobalKey ise bir keyden öte içerisinde verdiğiniz state göre tüm bilgilerini saklıyor ve işlemler yapmamız için bize olanak sağlıyor.

Ve son olarak servis kısmımız : shop_dio.dart

• Servis isteklerimizi yönetebilmek için bir yöneten yapıya ihtiyacımız var.
• Birçok seçenek olduğu gibi aralarında en çok güçlü ve çok fazla opsiyonu bulunan bir örneği kendimize göre düzenleyip yazıyoruz.
• Burada base url’imiz log opsiyonu, timeout gibi bir çok alanı veriyoruz ve make diye yaptığımız method ile kendi “parser” mekanizmamızı ve istediğimiz tüm logiclere göre hazırlıyoruz.

Vee projemiz hazır 🎊🎊

Bu projeyi ayrı bir proje olarak açmamızın sebebi front-end işlemleri ayrı bir dünya olarak incelediğim içindi . Eğer isteseydik aynı “flutter” projesinde yönlendirme ile mobil ve web ayağını yönetebilirdik.

Flutter web konusunda yorumlarım ise:

• Debug yaparken oldukça sıkıntı yaşadım ve bu sorun yüzünden hatayı doğru kontrol edemedim.
• Hot Reload bir yerden sonra tıkanıyor ve yeniden başlatmak zorunda kaldım.
• Dart ile çok esnek ve mobile-web birebir kod paylaşarak kullandım, çok şık oldu.
• Yazdığım servis ve tüm yapılar mobil ve web için ortak bir şekilde kullanmış olduk.

Projenin kaynak kodlarına buradan ulaşabilirsiniz.

Sevgilerimle
Emeğin gücüne inanan herkese selam olsun!