Angularjs/İonic Framework Socket-io Bağlantısı Google Maps

Geliştirdiğimiz uygulamanın verilerini veritabanından çekiyorsak karşımıza bazı sorunlar çıkıyor. Örneğin uygulamamız 100 kullanıcı için veritabanına istek gönderirken bir sorun yokken kullanıcı sayımızın 1000 ya da daha fazla olduğunu düşünelim . Bu kadar kullanıcının aynı anda veritabanına istekte bulunduğunu varsayarsak bu veritabanımızın CPU değerini arttıracaktır. Artan bu CPU değeri yüzünden uygulama veritabanından cevap almayabilir ya da başka türlü sorunlar ortaya çıkarabilir. Bu sebepten dolayı comet, websocket, socket-io gibi real time çalışmamızı sağlayan modüller kullanabiliriz. Bu yazımda socket-io modülünü kendi ionic projemde nasıl kullandığımı sizlerle paylaşacağım.

1.Adım
Öncelikle socket-io’nun client ve server tarafı daha öncesinden oluşturulmuş github daki java projesini masaüstüne clone edelim.Bu proje bir chat uygulaması için geliştirilmiş. Ancak biz bu projeyi harita üzerinde marker göstermek için kullanacağız.

2.Adım
indirdiğimiz projenin altındaki server dosyasında socket-io bağlantılarının yazıldığını göreceksiniz. Eğer bilgisayarınızı server olarak kullanacaksanız burdaki classlara kendi bilgisayarınızın ip adresini vermeniz gerekecektir. Seerver’ı başlatmak için cmd‘dan server klasörünün altına gidip socket-io serverını başlatmanız gerekiyor.Bunu da aşağıdaki kod ile sağlayabilirsiniz.(Bilgisayarınızda maven kurulu olduğundan emin olun.)

  • mvn exec:java

Bu komuttan sonra 9092 portunun başladığını belirten bir yazı gördüyseniz socket-io serverınızın çalıştığını anlamış olursunuz.

3.adım

Bir ionic projesi oluşturalım.(Eğer yeniyseniz öncelikle bilgisayarınıza ionic için gerekli kurulumları yapmanız gerekecektir.)

cmd ile  projeyi kurmak istediğiniz dizine gidin .Ve aşağıdaki adımları uygulayın.

  • ionic start app_name  sidemenu

4. Adım

Githubdan indirdiğimiz projedeki client klasörünün altındaki js dosyasını alıp kendi ionic projemizde www/js klasörünün altına atalım.Burada socket-io için gerekli javascript dosyası bulunmakta. Bu dosyanın yolunu ionic projemizin altındaki index.html dosyasına yazalım.(Kullanmak istediğimiz her modülün yolunu burada vermemiz gerekecektir.)

index.html

<script src=”js/js/socket.io/socket.io.js”></script>
<script src=”js/js/moment.min.js”></script>
<script src=”js/js/jquery-1.7.2.min.js”></script>

5.Adım
Google maps üzerinde marker gösterme işlemini yapacaktık. Bunun için index.html’de google maps apisinin yolunu da vermemiz gerekecektir.

  <script src=”https://maps.googleapis.com/maps/api/js?key=keyinizi girin“></script>

6.Adım
app.js dosyamızda .run metodunun altına socketio’nun bağlantı kodlarını ekliyoruz. Buraya eklememizin sebebi uygulama ilk çalışmaya başladığında socketio bağlantısını yapması .

.run(function($ionicPlatform,$ionicPopup,$state) {

$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);

}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}

if(window.Connection) {
if(navigator.connection.type == Connection.NONE) {
$state.go(‘app.login’);

}
}
//Socket-io connection
socket = io.connect(‘bağlanacağınız_server_adresi:9092’);

socket.on(‘connect’, function() {
console.log(“socket io bağlantısı sağlandı”);
});

socket.on(‘chatevent’, function(data) {

});

socket.on(‘disconnect’, function() {
console.log(“socket io bağlantısı sağlanamadı”);
});

});

})

7.Adım

Şimdi İonic projemizde Controller.js de harita için bir controller oluşturalım.

angular.module(‘starter.haritacontroller’, [])
.controller(‘HaritaCtrl’, function($scope, $cordovaGeolocatio) {

function initMap() {
var socket_locations=[];
var myLatLng = {lat: -25.363, lng: 131.044};
$http.post(“db_server_url”)
.success(function (data, status, headers, config) {
$scope.dbden_gelen_veri=data;
socket_locations.push($scope.dbden_gelen_veri);
socket.emit(‘chatevent’, socket_locations);
var map = new google.maps.Map(document.getElementById(‘map’), {
zoom: 4,
center: myLatLng
});

var marker = new google.maps.Marker({
position: socket_locations,
map: map,
title: ‘Hello World!’
});

}
}

})

gördüğünüz gibi socket.emit(‘chatevent’, socket_locations) kodu ile socketio serverına  veritabanından çektiğimiz enlemve boylam değerlerini gönderdik ve ordan aldığımız socket_locations değerini de markera gönderdik . Böylelikle ver tabanından gelen her yeni değer için socketio onu dinleyecek ve aldığı değeri markera verecektir.

8.Adım

Haritayı göstermek  için harita.html sayfası oluşturalım.

Oluşturduğumuz bu sayfayı uygulama da görebilmemiz için app.js e yolunu eklememiz gerekecektir.


.state(‘app.harita’, {

url: ‘/harita,
views: {
‘menuContent’: {
templateUrl: ‘templates/harita.html’,
controller:’HaritaCtrl’

}
}
})

harita.html’de map için şu kodu ekleyelim.

<ion-view title=”Harita Socket Uygulaması”>
<ion-content style=”background-color:#FAF1F1″ >

<div id=”map” data-tap-disabled=”true” ></div>

</ion-content>
</ion-view>


9.Adım

style.css dosyasında map için 

#map {
 height: 100%;
}
     
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
      }

yazdıktan sonra uygulamamızı çalıştırabiliriz.

10.Adım

cmd de ionic projesinin bulunduğu dizine gittikten sonra ;

ionic serve –lab derseniz uygulamayı webde görüntülemiş olacaksınız.

Eğer uygulamayı telefonunuzda görmek istiyorsanız ;

uygulamaya android ya da ios platformlarını ekleyiniz .Ardından;

ionic run android –device derseniz uygulama telefonunuza kurulacaktır.

Figen Önün Kâşif on 18 Kasım 2016 yazdı
Yorum Ekle
  • 0 Yanıt(lar)
  • Yanıtınız

    Cevabınızı göndererek Gizlilik Politikası ve Hizmet Şartlarını kabul ediyorsunuz.