Mobil uygulama geliştirmek için hibrit bir kütüphaneyi tercih ettiyseniz, en önemli sebeplerinizden biri uygulamanızı hızlıca son kullanıcılara sunmaktır. Yani mobil uygulamanızı hızlıca geliştirmek ve markete koymak. Eğer “uygulama arayüzünün kendine özgü ve sıradışı olmasına gerek yok” diyorsanız hazır temalar işinizi fazlasıyla görecektir.

Konumuz Ionic olduğu için sizlere Ionic Market’ten kısaca bahsedeceğim. Aklınıza gelebilecek birçok alanda işinizi görecek tema ve diğer bileşenler Ionic Market web adresinden(https://market.ionic.io) veya benzeri tema vb. sağlayan sitelerden bulabilirsiniz(örneğin https://ionicthemes.com). Sosyal medya temalarından, e-ticaret temalarına, hava durumundan, taksi çağırma uygulamalarına kadar pek çok temayı bu sitelerden bulabilirsiniz. Çoğu temanın ücretsiz olduğu bu sitelerde ücretli temalar da bulunmaktadır.

Ionic Market’te temaların dışında çalışmaya hazır proje şablonları(starter), uygulamanıza eklenti veya kontrol olarak ekleyebileceğiniz plugin’ler de bulunmaktadır. Buralardaki plugin’leri inceleyip kullanarak, çoğu native özelliği ve Ionic Framework’un sağladığı kolaylıkları nasıl kullanacağınız hakkında fikir sahibi olabilirsiniz.

Örneğin aşağıda ionic 2 food adlı bir uygulama temasının görüntülerini görebilirsiniz. Bir restoran veya yemek sipariş uygulaması hazırlamak isterseniz 20$ ödeyip bu temayı indirebilir ve kendinize göre özelleştirmeler yapıp geliştirmeleri tamamlayıp uygulama marketlerine gönderebilirsiniz. Detaylı incelemek için: https://market.ionic.io/themes/ionic-2-food  Yine alışveriş uygulaması için kullanabileceğiniz ionic 2 ecommerce UI isimli temaya da göz atabilirsiniz: https://market.ionic.io/themes/ionic-2-ecommerce-ui

Ionic 2 Projesi Oluşturma ve Üzerinde Geliştirme Yapma

Bir önceki yazımda belirttiğim adımları izleyerek Ionic kurulumunu yapabilir ve yeni bir Ionic uygulaması oluşturabilirsiniz. Bilgisayarınıza Ionic kurulumunu daha önceden yaptıysanız aşağıdaki komutu kullanarak yeni bir Ionic 2 projesi oluşturabilirsiniz:

ionic start --v2 myApp tabs

Komutun çalıştırıldığı klasörde myApp adında bir proje oluşturduk. Açılan projeyi hemen tarayıcıda görmek için de şu komutu çalıştırabilirsiniz:

ionic serve

Komut çalıştığında varsayılan tarayıcınızda http://localhost:8100 adresi açılacak ve alttaki resimdeki gibi Ionic uygulamamızın giriş sayfasını görebileceksiniz. Artık uygulama üzerinde geliştirmeler yapabiliriz.

Projemizin klasör yapısı aşağıdaki gibidir(solda). Geliştirme yapacağımız dosyalar bu dizinde yer alan src klasörünün içinde bulunmaktadır(sağda).

ionic serve komutunu çalıştırdığımızda src klasörünün içindeki .ts uzantılı dosyalar derlenerek tek bir .js dosyası haline getirilmekte ve www klasörünün altına çıktı olarak gelmektedir. Web tarayıcımız aslında www klasörünün içeriğini görüntülemektedir. Dolayısıyla mobil uygulamamızda da bu www klasörü işletilmektedir. Yani geliştirme yaparken www klasörünü gerekmedikçe düzenlememeli, yalnızca src klasörüyle çalışmalısınız.

Ionic uygulamaları Single Page Application(SPA) olarak çalışmaktadır, yani her şey ilk açılış sayfası üzerinde dönmektedir. Bizim de açılış sayfamız burada gördüğümüz index.html sayfasıdır. Asıl geliştirmeleri src klasörünün altındaki app ve pages klasörlerinde yapacağız. app klasörünün içeriğine bakacak olursak;

Uygulamadaki tüm sayfaların bağlandığı ve uygulamayı ayağa kaldıran kodlar burada bulunmaktadır. Projenize yeni bir sayfa veya tab eklemek istediğinizde app.module dosyasına bu sayfayı tanımlamanız gerekir. Burada pages klasöründe bulunan 3 tab çağırılarak projeye dahil edilmiş. Yeni bir sayfa oluşturmak istemediğiniz sürece burada yapmanız gereken bir şey yok.

Ionic ile basit bir geliştirmeyi nasıl yapabileceğimizi anlamak ve Angular 2 ile TypeScript’in buradaki temel geliştirme araçlarımız olduğunu görmek için bir sayı tahmini oyunu hazırladım. Birkaç dakika içerisinde hazırlayıp test edebileceğiniz bir örnek. Aşağıda home.html sayfasına eklediğim kodlar bulunmakta,

<ion-header>
  <ion-navbar>
    <ion-title>Anasayfa</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h2>Sayı Tahmin Oyunu</h2>
  <ion-list>
  	<ion-item>
		 <ion-input #sayi (keyup)="kontrolEt(sayi.value)" 
                            placeholder="Sayı tahmin edin" type="number"></ion-input>
	</ion-item>
	
	<ion-item>
		{{mesaj}}
	</ion-item>
  </ion-list>
</ion-content>

Burada sayi adlı bir input oluşturduk ve bu inputun içine birşey yazıldığında kontrolEt metodunu çağırılmasını söyledik. mesaj bilgisini de input alanının altına ekledik. TypeScript ile neler yaptığımıza bakacak olursak, home.ts dosyamız da aşağıdaki gibi:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  constructor(public navCtrl: NavController) { 
      this.mesaj="1 ile 10 arasında bir sayı tahmin edin"
  }
   randomSayi=Math.floor((Math.random() * 10) + 1)
   mesaj="";
   kontrolEt(sayi){ 
       if(this.randomSayi==sayi){
	     this.mesaj="Tebrikler doğru bildiniz";
	     return;
       }
       this.mesaj="Yanlış tahmin! tekrar deneyin";
   }
}

TypeScript ile oluşturduğumuz class içerisinde rastgele sayı üretip, kullanıcıdan alınan input değeriyle karşılaştırma yapıyoruz. Burada tanımlı kontrolEt fonksiyonu HTML tarafından çağrılmakta ve sonuca göre ekrandaki mesaj alanı class içerisindeki aynı isimli property ile doldurulmaktadır. Sayfamızın çıktıları aşağıdaki gibi olacaktır.

Sadece Angular 2 ve TypeScript’in gücünü kullanarak birçok Ionic uygulaması geliştirmeniz mümkün. Tabii ki mobil cihazın donanımına erişmek ve cihaz özelinde işlemler yapmak için Cordova kütüphanesini iyi bilmek gerekiyor. Ionic dokümantasyonunu incelemek isterseniz http://ionicframework.com/docs adresine göz atabilirsiniz.