Mobil uygulama için framework
#Ionic Framework #Ionic kurulumu

Uzem Akademi Yaz Kampı’nın eğitimlerinin sonraki günlerinde AngularJS anlatıldı ve son gnülerinde de ionic framework’ü anlatıldı. Aslında ionic framework’ünü daha önce kullanmıştım, ama tekrarlamakta her zaman fayda vardır…

  • Kurulum:
    Ionic Framework'ünü kurabilmek için, öncellikle https://nodejs.org/ tan Node paketini indirmeliyiz. Node.js modüllerini kurduktan sonra:

    $ npm install -g cordova ionic
    Komutu ile Cordova ve Ionic kurulumlarını yapıyoruz.

  • Ionic ile proje oluşturma:
    Ionic ile proje oluşturulurken, bize üç tane template seçeneği sunulmaktadır(blank:boş, sidemenu:menü içeriyor, tabs:sayfalar içeriyor). Bunlardan birini seçerek Ionic uygulamamızı aşağıdaki kodu yazarak oluştuabiliriz:

    $ ionic start <-uygulamadi-> sidemenu
    Daha sonra, olşturulan dizinin içine girerek ios ya da android platformların birini eklememiz gerekiyor:

    $ ionic add platform android
    Uygulamamızı tarayıcımızda test etmek için:
    $ ionic serve
    cep telefonumuzda test etmek için de:
    $ ionic run
    komutlarını çalıştırmamız gerekiyor.

    Plugin'ler


    ngCordova ile gereken plugin'leri uygulamamıza dahil ederek kamera, gps gibi özellikleri kullanabiliriz. Bunun için aşağıdaki adımları yapmamız gerekmektedir.

    Öncellikle bu adresteki zip dosyayı indirmek gerekmektedir. Onun içerisinde dist dizin altında bulunan ng-cordova.min.js dosyasını oluşturduğumuz uygulamadaki www/js dizini altına kopyalamak gerekiyor.
    Daha sonra, index.html sayfamıza, eklediğimiz dosyayı aşağıdaki kod satırı ile dahil ediyoruz: 
    <script src="js/ng-cordova.min.js"></script>
    Aynı şekilde, ngCordova modülünü, www/js/app.js dosyasına aşağıdaki şekildeki gibi eklemeliyiz: 
    angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'ngCordva'])
    Bu adımları gerçekledikten sonra istediğimiz plugin'i uygulamamıza ekleyebiliriz. Pluginleri buradan seçebilir ve kullanabiliriz.

    Seçtiğimiz plugini uygulamamıza şu şekilde eklemeliyiz:
    $ cordova plugin add secilen-cordova-plugin-adı
    Pluginimizi de ekledikten sonra, o plugin'i bulduğumuz sayfadaki kod satırlarını uygulamamızın controller.js sayfasına kendimize göre düzenleyerek ekliyoruz. app.js sayfasında da bu pluginController için gidilecek url adresini belirterek location'ını(örn., /bilmemneplugin.html) belirtiyoruz. Ve bu bilmemneplugin.html sayfasında da plugin'i(n girdi/çıktılarını) kullanıyoruz. (Son kısım bir örnekle daha iyi anlaşılacaktır..)