Node.js’de RESTful API ile Flutter’da Uygulama Geliştirmek

Published in

HardwareAndro

6 min readSep 13, 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 kullanıyoruz.
Front-End için kullandığımız teknoloji Flutter.
Back-End için ise Node.JS teknolojisi 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ızda splash, ana sayfa ve gezegenlerin bulunduğu üç temel bileşen ekranlardan oluşuyor. Tasarım sırasında kullandığım ikonları ise Iconfinder web sitesinden ekledim. Aynı zamanda tasarımda kullandığım fontlar için Google fontları kullandım.

UI Tasarımı Nedir ?

UI açılımı User Interface yani kullanıcı arayüzü tasarımı anlamına gelir. Kullanmış olduğumuz uygulamaların 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 teknolojisi 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,viewklasö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ı 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ü, bu projemizde sayfalar arası geçişler için yönlendirme dosyamız bu klasörün içerisinde yer alacaktır.
Service: Servis anlamına gelen yani veri tabanında oluşturduğumuz verilerimizi 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ı.

Kullandığımız tema renkleri için renk kodlarımız.

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ı. Burada http paketini import ediyoruz.

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

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.

https://gist.github.com/fatihhcan/a670b7fba20aeed6995eff69fde0027c

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.

https://gist.github.com/fatihhcan/f93c39d6963b717bef4b3bc524ed33cc

Gezegenlerin Bulunduğu Ekran

Bu ekranda tüm gezegenleri ikili sırayla yer alması için GridView.count() widgetını kodluyoruz ve uzunluğuna on, crossAxisCount parametresine iki 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ı 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.

https://gist.github.com/fatihhcan/dc8fd0e5f286c93a71e69ed59f3fedd0

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çiyoruz.

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 gelelim Node.js’de uygulamamızın bilgileri yer aldığı bir API oluşturalım. Öncellikle Node.js için npm ile projeyi oluşturmamız gerekiyor. Terminalden npm init komutu ile projemizi oluşturuyoruz.

Sonrası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 databaseden aldığımız URL 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 ise gezegenlerin bilgilerini tutuyoruz.

Router klasöründe ise postumuzun yönlendirme işlemlerini tanımlıyoruz. Bu işlemler, postu kayıt etme, idye göre post sorgulama, postları silme, postları güncelleme gibi işlemleri kodluyoruz.

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

Sırada oluşturduğumuz verilerimizi veri tabanına yüklemek kaldı. Bu verileri postman üzerinden post ile kayıt ediyoruz.

Gezegenlerin verilerini post edildikten sonra MongoDB Atlas üzerinden verilerimizi 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ı.

Flutter’da Oluşturduğumuz Verileri 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 verilerimizi gösteriyoruz. Description indexi, tanımladığımız gezegenlerin idlerini verip, istediğimiz gezegenin bilgilerini ekranda gösterebiliyoruz.