Ionic Framework ile Chat Uygulaması Oluşturma

Standart
Bilgiyi paylaşarak çoğalt !Tweet about this on TwitterShare on LinkedIn0Share on Google+0Share on Facebook9Pin on Pinterest0

Evet arkadaşlar bu makalemde sizlere daha önceden bahsetmiş olduğum Ionic ile basit bir chat uygulaması nasıl yapılır onu göstereceğim. Yapacağım bu chat uygulamasında kişiler anonim olarak mesajlaşabilecekler ve istedikleri mesajları okunmuş olarak seçebilecekler.

Öncelikle command promt’u açıp masaüstüne geçelim ve chatUygulaması adında boş bir ionic projesi oluşturalım:

İndirme işlemi bittikten sonra command ekranında indirmiş olduğumuz klasör dizinine geçelim ve uygulamayı tarayıcıda görüntüleyelim:

wer2

Masaüstünde oluşan chatUygulamasi klasörüne çift tıklayarak açalım. İçinde bulunan www klasörüne girelim. Burası html, css, javascript ve angularjs kullanacağımız yer. Yani hybrid uygulamanın oluştuğu yerdir. Buradaki klasörleri açıklayacak olursak:

  • css: css dosyalarının bulunduğu dizin
  • img: uygulamaya eklenecek olan resimlerin bulunduğu dizin
  • js: uygulamanın fonksiyonel kısımlarının tutulduğu javascript dosyalarının bulunduğu dizin
  • lib: uygulamaya dışarıdan eklenecek olan kütüphanelerin tutulduğu dizin. Ayrıca varsayılan olarak Ionic’in kütüphaneleri indirilmiş bir şekilde gelir.
  • index.html: uygulamanın başlatıcı html dosyasıdır.

Firebase’de daha önceden nasıl uygulama oluşturulur bahsetmiştim. Chat uygulamamız için ornekchatuygulamasi adında yeni bir firebase uygulaması oluşturdum. Sizde kendi belirlediğiniz isme göre bir uygulama oluşturabilirsiniz.

Şimdi arayüzü tasarlayalım. Bunun için index.html‘imizi açalım. body tagleri ve arasında kalan kısımları siliyoruz ve aşağıdaki kodları ekliyoruz:

Burada sırasıyla yapılanları açıklayalım ve biraz angularjs komutlarından bahsedeyim:

  • body tagleri arasında yer alan ng-app ve ng-controller attribute’ları AngularJs in kullandığı directive‘lerdir. ng-app ile yeni bir modül oluşturduk ve ng-controller ile ListCtrl adında, bu sayfada gelişecek olaylar için, kullanılacak değişkenlerin tutulacağı, butonlara tıklandığında ne olacağı gibi işlemlerin ayarlanacağı kontrol yapısı oluşturuldu.
  • ion-header-bar tagi, ekranımızın üst kısmında bulunan başlığın ve mesaj ekleme butonunun bulunduğu kısımdır. Burada kullanılan class’ların hepsi ionic kütüphanesinde bulunan css dosyalarından gelmektedir. ng-click ise yine AngularJs’in directive’idir ve bir butona tıklanıldığında ne yapılacağını, bağlı olduğu Controller sınıfı içinde tamamlar.

wer3

  • ion-content tagi ekranımızın gövdesini oluşturmaktadır. Aynı html tagleri içinde bulunan body görevini görür.
  • ion-list tagi liste olarak gösterilecek verilerin görüntülenmesi için kullanılır.
  • ion-item tagi genellikle ion-list içerisinde yer alır ve listede görüntülenecek olan verileri temsil eder. Toplu şekilde tutulan verilerin – array, list vb.- otomatik olarak liste içinde görüntülenmesi için ng-repeat tagi kullanılır.
  • {{ }} tagleri arasında AngularJs değişkenleri html de görüntülenir.

wer4

  • ion-option-button ise listede bulunan bir item eğer sola doğru kaydırılırsa görüntülenecek olan butonlar için kullanılır.

wer5

Şimdi kendi oluşturduğumuz css’leri ekleyelim. Bunun için www klasörünün altında bulunan css klasörüne girin ve style.css dosyasını açın ve için şu şekilde doldurun:

Son olarak js klasörü altında bulunan app.js‘i açalım ve fonksiyonellikleri ekleyelim:

Yine burada neler yapıldığını açıklayacak olursak:

  • angular.module, angular ile bir modül oluşturmamızı sağlar. Bu modül Java da ve ya C# da bulunan main metoduna benzetilebilir. Aldığı parametrelerden ilki, index.html de body taglerinde kullandığımız ng-app içerisinde yazan isimdir. Kısaca bize uygulamanın başlangıç olarak nereden başlatılacağını gösterir. İkinci parametre ise kullanılacak olan kütüphanelerin olduğu bir arraydir. Bu uygulamada ionic ve firebase kütüphaneleri kullanılmıştır.
  • factory ile uygulama içinde aynı modül içerisinde her yerden kullanabileceğimi global metotları oluşturduğumuz yapı olarak düşünülebilir.Burada Messages adında bir metot oluşturuldu ve bu metot, firebase de bulunan uygulamamıza bağlanıyor ve verileri çekip firebaseArray şeklinde döndürüyor.
  • controller ile index.html de bahsettiğim, fonksiyonellik kazandıran, değişkenlerin tutulduğu kontrol yapıları oluşturmamıza yarar. Almış olduğu parametrelerin başında eğer $ (dolar) sembolü var ise bu ionic kütüphanesinden çağrılmış bir sınıftır. İçerisinde yer alan kodlar javascript kodudur.

Bütün bunları tamamladıktan uygulamayı çalıştırdığınızda aşağıdaki çıktı oluşur:

wer7

Firebase tarafında ise değişiklikler şu şekilde oluşturulmuştur:

wer8

 

6 Comments

  1. ayrıca ionic frameworkünde ionic run –livereload komutuyla usb üzerinde telefonunuzda anlık olarak uygulamayı çalıştırabilirsiniz.. tabi android cihazının geliştirici seçeneklerinden usb hata ayıklaması açık olmalı… yaptığınız değişiklikleri kullandığınız editörde kaydedince otomatik usb ile telefonda anlık uygulama güncelleniyor ben başarılı buldum bilmeyenler deneyebilir diye söylemek istedim..

  2. dersler için teşekkürler, senden ricam derslerin devamı gelecek gibi umarım ilgi artar 🙂 bir web sitesini nasıl mobil uygulama yaparız üzerine bir ders yaparsan sevinirim. mesela direk iframe etiketiyle ile sitemi çekiliyor yada mobilde sitedeki verileri alıp nasıl kullanıcıya veririz genelde mobil uygulamalar bu yönde çünkü onun için…

    • Merhaba,
      Öncelikle güzel yorumların için teşekkür ederim.
      Bir web sitesini mobil uygulama yaparız derken biraz daha açık olabilir misin? Popüler bir örneği var mı mukayese edebileceğim?
      İyi günler

      • yani tam olarak mesela bir blog veya haber sitesi diyelim var, bu sitenin mobil uygulaması olsun istiyoruz burada iframe ile mi çekilir yada bu tarz işlerde profesyoneller api falanmı geliştiriyorlar.. piyasada nasıl yapılıyor merak ettim 🙂 acemilikde var…

        Eğer bu konuyu anlatma imkanınız olmaz ise sayfalar arası geçişi anlatırsanız iyi olur örnek olarak yeni bir proje başlatırken tabs template var burada indexde farklı dosyalar çağrılmış bu tarzda … tekrardan dersler için teşekkürler…

        • Webview araştır dostum. Internette çok örneği var. O şekilde yapabilirsin. // anlatım güzel , Teşekkürler.

Leave a Reply