Fatih Can
- 12 Kas 2020
- 4 dakikada okunur

FullStack Flutter App: NodeJS(RestApi) + Flutter

En son güncellendiği tarih: 13 Kas 2020

Herkese selamlar, bu yazımda birden fazla teknolojiyi kullanarak; Back-End, Front-End, UI tasarımı ile birlikte gezegenler hakkında bilgilerin yer aldığı sade bir uygulama geliştireceğiz. Açıkçası çok heyecanlıyım çünkü A’dan-Z’ye uygulamanın süreçlerine inceleyeceğimiz keyifli bir yazı olacağına inanıyorum. 😊🥳

Uygulamayı kodlamayı başlamadan önce kullandığımız teknolojilerden bahsedelim.

Kullandığımız Teknolojiler:

UI tasarımı için Adobe XD,
Front-End için Flutter,
Back-End için ise Node.JS ile bir RESTful API oluşturuyoruz.

Adobe XD — UI Tasarımı

Sırayla, adım adım ilerlemek gerekirse ilk olarak UI tasarımını inceleyelim. Tasarımı Adobe XD üzerinden, bir renk paleti kullanarak uygulamanın renklerinin uyumlu olmasını sağladım.

Uygulamamız splash, ana sayfa ve gezegenlerin bulunduğu üç temel bileşen ekrandan oluşuyor. Tasarım sırasında kullandığım ikonları için Iconfinder web sitesinden yararlandım. Aynı zamanda tasarımda kullandığım fontlar için Google fontlarını kullandım.

UI Tasarımı Nedir ?

UI açılımı User Inerface yani kullanıcı arayüzü tasarımı anlamına gelir. Kullanmış olduğumuz uygulamalarda butonların yerleri, renkleri, sayfa yapısı, boşlukları gibi grafik tasarım bileşenlerinden oluşan bir tasarımdır.

Front-End | Flutter 💙

Planladığımız uygulamanın arayüz tasarımını tamamladıktan sonra Flutter ile ekranlarımızın kodlamasını geçebiliriz. 🧙‍♂️

Flutter için kullandığım kod düzenleyicisi VS Code. Şimdi klasör yapısını inceleyelim.

Klasör yapımız, temel klasör hiyerarşisinde olduğu gibi sırasıyla component, model, routes, services, view klasörlerinden oluşmaktadır. Bu klasörlerin içerisinde hangi dosyalar yer alıyor diye sorarsanız sırasıyla klasörlerde neler olacağından bahsedelim.

Components: Türkçede bileşenler anlamına gelmektedir. Bu projemizde kullanacağımız card widgetlarımız ve renk kodlarımız bu klasörün içerisinde yer alacaktır.
Model: Modelde genel verilerimizin yapısının bulunduğu klasör yer alıyor. Yani bu projemizde JSON’dan Dart’a çevirdiğimiz veri modelimiz yer alacak.
Routes: Rota anlamına gelen routes klasöründe, bu projede sayfalar arası geçişler için kullanılan yönlendirme dosyamız yer alacaktır.
Service: Servis anlamına gelen yani veri tabanında oluşturduğumuz verilerimize istekte bulunacağımız kısım, bu klasörün içerisinde yer alacaktır.
View: Görünüm anlamına gelen view klasöründe, uygulamamızda yer alan tüm ekranlar bu klasörün içerisinde yer alacaktır.

Components

Components klasörünün içerisinde iki tane card widgetımız yer alıyor. Birincisi ana sayfa ekranımızda yer alan resmin card widgetı, ikincisi ise tüm gezegenlerin yer aldığı resimlerin card widgetı.

Model

Veri tabanında kayıt ettiğimiz gezegenlerin bilgilerinin modelleri, JSON tipinden Dart’a çeviriyoruz(quicktype) ve Dart dosyamızın içerisine kodluyoruz. Bu çevirme için ise dart-convert paketi import ediyoruz.

Routes

Routes klasörün içerisinde ise router adlı dart dosyası yer alıyor. Bu dosyanın içerisinde MaterialApp içerisinde yer alan yönlendiricileri kodluyoruz.

Service

Servis klasöründe local URL’in yer aldığı ve verileri çektiğimiz Dart yapısı mevcut. Burada http paketini import ediyoruz.

Şimdi ise ekranlarımızı nasıl oluşturduğumuzu inceleyelim.

Adım: 1- Splash Ekranı

Splash ekranında yer alan benzer gifleri LottieFile üzerinden bulabilirsiniz. Future.delayed parametresi ile splash ekranın saniyesini belirliyoruz. Sonrasında splash ekranından sonra hangi sayfaya yönlendirilmesi gerektiğini Navigator.pushNamed ile ana sayfa ekranına yönlendiriyoruz.

Adım: 2- Ana Sayfa Ekranı

Ana sayfa ekranında gezegenlerin ön izlemesi yer alan card widgetı bulunuyor. Bu card widgetın child parametresine asset klasöründe yer alan fotoğrafı alıyoruz. Sonrasında iki tane buton için ButtonTheme widgetı ile boyutlarını veriyoruz. Child parametresine ise RaisedButton widgetını kodluyoruz. OnPressed parametresi ile butonlar tıklandığında hangi sayfaya yönlendirilmesi gerektiğini kodluyoruz. Çıkış butonu için ise tıklandığında uygulamadan çıkması için OnPressed parametresine SystemNavigator.pop fonksiyonunu ekliyoruz. Böylelikle uygulamadan çıkışı gerçekleştiriyoruz.

Adım: 3- Gezegenlerin Bulunduğu Ekran

Bu ekranda tüm gezegenleri ikili sırayla yer alması için GridView.count() widgetını kodluyoruz ve uzunluğuna 10, crossAxisCount parametresine 2 veriyoruz. Sonrasında PlanetsCard() fonksiyonu çağırıyoruz. Bu fonksiyon components klasöründen gelmektedir. Fonksiyonun içerisinde ise tüm gezegenlerin sayfaları ve gezegenlerin fotoğraflarının tutulduğu iki tane list parametresi bulunuyor. Bu parametrelerin ilkini GridView.count() widgetın onTap parametresi için kullanıyoruz, onTap parametresinde, sayfaların tutulduğu parametreyi ekliyoruz ve her birine index tanımlıyoruz. İkinci parametrede ise GridView.count() widgetın child parametresine card widgetı ekliyoruz, bu widgetın child parametresine ikinci parametreyi tanımlıyoruz. Tüm fotoğrafları almamız için index tanımlıyoruz.

Kullandığımız fotoğrafları asset klasöründe saklıyoruz ve kullanmamız için pubspec.yaml dosyasında tanımlıyoruz.

Ekranları kodlamayı Flutter’da tamamladık, şimdi Back-End tarafına API oluşturma kısmına geçelim.

Back-End | Node.js 🤍

Node.js ile API oluşturmaya başlamadan önce biraz Node.js’den bahsedelim.

Node.js: JavaScript programlama dili kullanılarak geliştirilen açık kaynaklı bir frameworkdur. Bu framework JavaScript kodlarını sunucu tarafında çalışmasını sağlar. Hızı, performansı ve esnek olmasından dolayı popüler olmasını sağlamıştır. Ayrıca ek bir sunucuya ihtiyaç duymaması popüler yapan etkenlerin arasında yer almaktadır.

Şimdi Node.js’de uygulamamızın bilgilerinin yer aldığı bir API oluşturalım. Öncellikle VS Code'da Node.js için npm ile projeyi oluşturmamız gerekiyor. Terminalden npm init komutu ile projemizi oluşturuyoruz.

Devamında gerekli paketleri npm install — save “paket ismi” ile yüklüyoruz.

Body-Parser: Post edilen verilerin yakalanmasını sağlar.
Dotenv: Veri tabanı ile bağlantı kurduğumuz URL gizlememizi sağlar.
Express: Kullandığımız metotları(get,delete,post, routing) işlemlerinde kolaylık sağlar.
Mongoose: MongoDB işlemlerimizi kolaylaştırmayı sağlar.
Nodemon: Kodumuzda herhangi bir değişiklikte sunucuyu tekrar kapatıp açmayı otomatik hale getirmemizi sağlar.

Not: MongoDB Atlas’tan database oluşturuyoruz. (.env dosyası içerisinde database'den aldığımız URL'i gizliyoruz.)

Klasör yapısını inceleyelim.

Klasör yapısı models, router klasörleri ile birlikte app.js dosyasından oluşuyor.

App.js dosyasında MongoDB ile bağlantıyı ve dinlenecek portu kodluyoruz.

Models klasöründe modelimizi oluşturuyoruz. Oluşturduğumuz modelde id, name, description olmak üzere üç veriden oluşuyor. Id ile her bir gezegenimize bir numara tanımlıyoruz, name ile gezegenlerin ismini veriyoruz, description da ise gezegenlerin bilgilerini tutuyoruz.

Router klasöründe ise postumuzun yönlendirme işlemlerini tanımlıyoruz. Bu işlemler postu kayıt etmek, idye göre post sorgulamak, postları silmek, postları güncellemek gibi işlemler.

Veri Oluşturmak — Verileri Veri Tabanına Yüklemek

Gezegenlerin verilerini post ettikten sonra MongoDB Atlas üzerinden kontrol ediyoruz.

Oluşturduğumuz verileri MongoDB Atlas üzerinde saklamayı tamamladık. Sırada son adımımız olan Flutter’da oluşturduğumuz verileri tanımlamak kaldı.

Oluşturduğumuz Verileri Flutter’da Kullanmak

Flutter’da bu verileri gösterebilmemiz için FutureBuilder<> yapısını kullanıyoruz. View klasöründe bulunan gezegen ekranlarının, Container widget oluşturarak, child parametresine FutureBuilder<> ile istediğimiz verileri gösteriyoruz. Description indexi, tanımladığımız gezegenlerin idlerini verip, istediğimiz gezegenin bilgilerini ekranda gösterebiliyoruz.