Ionic 4 mobil uygulaması ve Angular web uygulaması arasında Socket.io kullanarak gerçek zamanlı iletişim kurmak — 2
OrderingAPP uygulamamız için geliştirdiğimiz ve backend işlemlerini içeren bir önceki yazıya bu linkten ulaşabilirsiniz.
Bu yazıda Angular Web projemizi ve ionic 4 Mobile projemizi oluşturacağız.
Angular Web Projesi Oluşturma
Bunun için öncelikle Angular uygulamaları yaratabilmemiz için gerekli olan “angular cli” kurulumunu yapmamız gerekiyor. Aşağıdaki komut ile angular cli kurulumunu yapıyoruz.
npm install -g @angular/cliSonrasında “OrderingApp” klasörü içerisindeyken aşağıdaki komutu çalıştırarak angular projemizi oluşturuyoruz.
ng new frontend
cd frontendfrontend klasörü içerisindeyken “code .” komutu ile projemizi VSCode ile açıp geliştirmelerimizi yapabiliriz.
Basit bir Sipariş Ekleme ekranı tasarlayacağız. Bunun için responsive front-end framework olan “materialize-css” kullancağız. VSCode içerisine Terminal görünümüne geçip aşağıdaki npm komutu yardımıyla ilgili paketi yüklüyoruz.
npm i materialize-css --save
Uygulamamızda bu paketi kullanabilmemiz için gerekli CSS ve Javascript dosyalarını refere etmemiz gerekiyor. Bunun için “angular-cli.json” dosyası içerisindeki “styles” ve “scripts” alanlarına dosyalarımızın path bilgisini yazıyoruz.
Material ikonlarını kullanabilmemiz için de index.html sayfasında <head> tag’i içerisine aşağıdaki linki refere etmemiz gerekiyor; <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Sipariş ekleme formu için “add-order” adında bir component oluşturacağız. Aşağıdaki ng komutu ile ilgili component’imizi oluşturuyoruz.
ng generate component add-orderOluşturacağımız Html’den yani View’dan component’e veriyi gönderebilmemiz için bir model’e ihtiyacımız var. Bunun için app klasörü içerisinde “models” adında bir klasör ve içerisine de “order.ts” dosyasını ekliyoruz. Order.ts dosyası içerisinde aşağıdaki gibi property’lerimizi oluşturuyoruz.
add-order.component.ts içerisinde oluşturduğumuz Order modelimizden bir object yaratıp initial değerlerini set ediyoruz.
order: Order = { orderDetail: “”, cost: 0, createdBy: “MMA” };
add-order.component.html dosyamızı çok basit 2 tane text input ve 1 tane de button içerecek şekilde aşağıdaki gibi revize ediyoruz.
View kısmında yapılan değişikliğin doğrudan model’e (component’e) veya model’de (component’te) yapılan değişikliğin doğrudan view’e yansıması için Two-way binding yapısını kullanıyoruz. “[(ngModel)]” syntax’ı ile modelimize two-way binding özelliği veriyoruz.
App.module.ts dosyası içerisinde bootstrap olarak AppComponent belirtilmiştir. Yani “ng serve” komutu ile Angular projemizi başlattığımızda ilk yüklenecek component app.component olacaktır. Biz de “add-order” componentimizin render olabilmesi için, add-order.component.ts dosyamız içerisinde bulunan ve ilgili component’imizi temsil eden selector değerini aşağıdaki gibi “app.component.html” sayfası içerisine html tag’i olarak yazıyoruz.
frontend klasörü içerisindeyken ng serve -open komutu ile web uygulamamızı tarayıcımızda “http://localhost:4200/” URL’si üzerinden host ediyoruz.
Backend tarafında oluşturduğumuz API’mizi frontend tarafında çağırmak için servis dosyamızı oluşturacağız. Bunun için aşağıdaki komut ile services adında bir klasör oluşturup içerisinde ilgili servisimizi ekliyoruz.
ng g s services/orderServis dosyamızın içeriği aşağıdaki gibidir;
createOrder fonksiyonu içerisindeki “environment” objemizi import ediyoruz ve environment.ts dosyamız içerisinde “backendUrl” adında key yaratıp değerini de “http://localhost:3000/” olarak set ediyoruz.
add-order.component.ts dosyamızdaki onCreateOrder fonksiyonumuzu aşağıdaki gibi revize ediyoruz.
constructor içerisinde order servisimi dependency injection ile implement ediyoruz. onCreateOrder fonksiyonu içerisinde de servisimizi subscribe ediyoruz.
Socket.io-client ile Event Emitting
Siparişimizi başarıyla oluşturduktan sonra socket.io yardımıyla event emit işlemi yapacağız. Backend server’ımıza işlemin başarıyla kaydedildiğini bildireceğiz ve server’da Mobil uygulamamız için yeni bir socket açacağız. Bu açtığımız socket ile de mobil uygulamamıza siparişin kaydedildiğini bildireceğiz.
Öncelikle angular projemize “socket.io-client” npm paketini yükleyeceğiz.
npm i socket.io-client --saveadd-order.component.ts dosyamız içerisine aşağıdaki şekilde “io” socket.io import işlemini yapıyoruz.
import * as io from "socket.io-client";constructor içerisini aşağıdaki gibi revize ediyoruz.
onCreateOrder fonksiyonu içerisinde subscription sonucu siparişimiz başarıyla kaydediliyor ve “orderCreated” adında socket açıyoruz.
Bu açtığımız socketi server tarafında bir önceki yazımda belirttiğim gibi aşağıdaki kod blok’u ile dinliyoruz.
Server tarafında “getOrders” adında socket açıyoruz ve bu socketi’de Mobile uygulamamızda dinliyor olacağız.
Ionic 4 Mobil Projesi Oluşturma
Ionic framework’ünü aşağıdaki komut ile npm yardımıyla indiriyoruz
npm install -g ionicOrderingApp projemiz içerisinde aşağıdaki komut ile ionic projemizi oluşturuyoruz
ionic start mobile blank --type=angularProjemizin adına “mobile” ismini veriyoruz. Template’imizi boş “blank” olarak ifade edip, angular frameworkü ile geliştireceğimiz için “type” olarak angular belirtiyoruz.
Kurulum sonunda aşağıdaki gibi SDK kurulumu yapılsın mı sorusu karşınıza çıkıyor. Bu soruya “No” cevabı vererek kurulumu tamamlıyoruz.
Mobile klasörümüzün içerisine girip “orders” adında sayfa oluşturuyoruz.
cd Mobile
ionic generate page ordersApp-routing.module.ts dosyamızdaki “routes” array objemizi aşağıdaki gibi revize ediyoruz. İlk açıldığında “home” sayfasına yönlenmesini önleyip yeni yarattığımız “orders” sayfasına yönlenmesini sağlıyoruz.
app klasörü altında “models” klasörü oluşturup “order.ts” adındaki modelimizi oluşturuyoruz.
Socket.io-client paketini aşağıdaki şekilde yüklüyoruz.
npm i socket.io-client --saveorders.page.ts dosyamız içerisine aşağıdaki şekilde “io” socket.io import işlemini yapıyoruz.
import * as io from "socket.io-client";Environment.ts dosyamıza aşağıdaki gibi backendUrl bilgisini ekliyoruz
Orders.page.ts sayfamızın constructor içerisinde socket objemizi initialize ediyoruz
MongoDB veritabanında siparişleri alabilmemiz için backend projemiz ile konuşmamızı sağlayacak servis dosyamızı oluşturuyoruz
ionic generate service services/orderorder.services.ts dosyamızı aşağıdaki gibi geliştiriyoruz
Servis içerisinde GET HTTP metodu ile çağırdığımız veriyi IOrder interface’i ile karşılayıp, map rxjs operatörü ile de Order class tipimize mapping işlemi yapıyoruz. Bunun için interfaces adında klasör oluşturup içerisine aşağıdaki gibi IOrder.ts Interface’imizi ekliyoruz.
Servis katmanımızı tamamladıktan sonra orders.page.html HTML sayfamızı aşağıdaki gibi geliştiriyoruz.
HTML sayfamızın ardından orders.page.ts dosyamızı da aşağıdaki gibi geliştiriyoruz;
constructor içerisinde socket’imizi initialize ediyoruz. ngOnInit() içerisinde de backend tarafından açtığımız “getOrders” socketimizi dinliyoruz.
Mobile uygulamamızı aşağıdaki komut ile çalıştırıyoruz.
ionic serve
Uygulamamız yukarıdaki gibi siparişlerimizi listelemiş olacak. Angular web uygulamamızı açıp siparişi kaydettiken sonra anlık olarak mobil uygulamamızdaki liste güncellenmiş olacaktır.
OrderingApp projesinin source code’una Github üzerinden ulaşabilirsiniz.
OrderingAPP uygulamamızın backend, frontend ve mobil tarafını elimden geldiğince tamamlamaya çalıştım. Eksik veya yanlış bir anlatımım olduysa lütfen birlikte düzeltelim.
Bir sonraki yazıda görüşmek dileğiyle…
