Yaklaşık 2 aydır nvm kullanıyorum ve node.js versiyonları arası geçişte büyük kolaylık sağlıyor. Varsayılan versiyonu değiştirmem yükseltmem gerektiğinde biraz araştırma yaparak aşağıdaki komutları buldum. Umarım sizin de işinize yarar.

1
2
3
4
5
6
7
8

# İstediğiniz versiyonu yükleyin
nvm install 8.9.4

# Varsayılan olarak kullanın
nvm alias default 8.9.4

# Daha sonra node -v  yazarsanız varsayılan versiyonu verecektir.

Yukardaki gif Javascript geliştiricileri için oldukça büyük anlam ifade etse gerek. Javascript geliştiricleri yıllarca asenkron kod yazmak için callback fonksiyonlarını ihtiyaç duyuyorlardı.

Sonuç olarak birçoğumuz “callback hell” ile karşı karşıya gelmek zorunda kaldık.

Neyse ki daha sonra ise Promise geldi. Bize callback fonksiyonlarından daha organize bir yapı sundu. ve halen birçok geliştirici tarafından sıklıkla kullanılmakta.

Son olarak ise Async/Await'in eklenmesiyle daha okunabilir ve bakımı kolay bir hale geldi.

Nedir Bu Async/Await ?

Async/Await uzun zamandır beklenen asenkron işlemleri daha anlaşılması kolay bir hale getiren Promise tabanlı Javascript özelliğidir.

Şimdi gelin Promise tabanlı bir örnek yapalım.

1
2
3
4
5
6
7
8
9
10
11
12

const fetch = require('node-fetch');

async function makeRequest() {
  const url = 'http://jsonplaceholder.typicode.com/posts/1';
  fetch(url).then( response => response.json())
    .then(result => {
      console.log(result.title);
      console.log(result.body);
  });
}

makeRequest();

Şimdi ise async/await fonksiyonuna nasıl dönüştüreceğimizi görelim. ilk olarak async anathar kelimesini fonksiyonuna ekliyoruz. Daha sonra ise .then() kısmında aşağıdaki gibi değişiklik yapıp await ekliyoruz.

1
2
3
4
5
6
7
8
9
10

const fetch = require('node-fetch');

async function makeRequest() {
  const url = "http://jsonplaceholder.typicode.com/posts/1";
  const response = await  fetch(url);
  const json = await response.json();
  console.log(json.title);
}

makeRequest();

Facebook mühendisleri tarafından geliştirilmiş olan Yarn, hız ve güvenlik konusunda npm'den daha iyi olduğuna söz veriyor.

Yarn kurulumu

Yarn'ı kurmak için birçok yol bulunuyor. Eğer npm'e sahipseniz. npm ile yükleyebilirsiniz.

1
2

 npm install -g yarn

Başka bir yol ise (Yarn'ı geliştiren takımında önerdiği) işletim sistemizin native paket yöneticisi ile yüklemek.Eğer bir Mac kullanıcısıysanız homebrew ile yükleyebilirsiniz.

1
2
3

 brew update
 brew install yarn

Diğer işletim sistemleri için

Yarn CLI komutları

• yarn add: aktif pakette kullanmak için bir paket ekler.
• yarn init: yarn dosyasını oluşturur.
• yarn install: package.json dosysası içindekileri yükler.
• yarn publish: paket yöneticisinde bir paketi yayınlar.
• yarn remove: aktif paketten bir paketi siler.

Merhaba Dünya uygulaması

1

print("Merhaba Dünya")

Değişken Tanımlama

1
2

var myName = "Nazır"
var myNumber = 13

Sabit Tanımlama

1

let myName = "Nazır"

Veri Tipleri

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

    // Character veri tipi
  var character :Character = "N"
  
  // String Veri Tipi
  var myName: String = "Nazır"
  
  // Int Veri Tipi
  var myNumber: Int = 13
  
  // Float ve Double veri tipi
  
  var number:Float = 4.2
  
  var number2:Double = 1.1
  
  // sabitlerde bu şekilde yazılabilir
  let myName:String = "Nazır"

For döngüsü oluşturma

1
2
3

for var x in 0..<10 {
  print(x)
}

Switch case yapısı

1
2
3
4
5
6
7

let name = "Nazır"
// 'break' yazmak gerekmez.
switch name {
 case "Nazır" : print("Merhaba Nazır")
 case "Damla" : print("Merhaba Damla")
 default : print("Merhaba")
}

While Döngüsü

1
2
3
4
5
6
7

var x = 0
  
// 0'dan 9 a kadar sayar
while x<10 {
  print(x)
  x++
}

If Else yapısı

1
2
3
4
5
6
7
8

let swiftIsCool = true
  
if swiftIsCool {
  print("Tabi Canım")
}
else {
  print("Hayır")
  }

if you are new in iOS development and using Interface Builder for creating UI elements. Maybe you want to learn how can do with code. In this post I will talk about this and give a snippet.

UIView

1
2
3

let child = UIView(frame: CGRect(x: 100, y: 100,width:100, height: 100))
child.backgroundColor = UIColor.red
self.view.addSubview(child)

UISlider

1
2
3
4
5
6
7
8

 let slider = UISlider (frame: CGRect(x: 10, y: 300,width:300, height: 100))
     slider.minimumValue = 0
     slider.maximumValue = 100
     slider.tintColor = UIColor.red
     slider.isContinuous = true
     slider.value = 30
     slider.addTarget(self, action:#selector(sliderValueDidChange), for: .valueChanged)
     self.view.addSubview(slider)

1
2
3
4

func sliderValueDidChange(sender:UISlider!)
   {
      print("value : \(sender.value)")
   }

UIButton

1
2
3
4
5

let button  = UIButton (frame : CGRect (x:100, y:100 ,width:100 , height:40))
    button.backgroundColor = UIColor.red
    button.setTitle("My Button", for:.normal)
    button.setTitleColor(UIColor.yellow, for: .normal)
   self.view.addSubview(button)

1

 button.addTarget(self, action: #selector(buttonClicked), for: .touchUpInside)

UISwitch

1
2
3
4

let switchDemo = UISwitch(frame: CGRect(x:100, y:100 ,width:40, height:40))
    switchDemo.isOn  = true
    switchDemo.addTarget(self, action: #selector(switchChanged), for: .valueChanged)
    self.view.addSubview(switchDemo)

1
2
3
4

func switchChanged(sender: UISwitch!){

      print("value: \(sender.isOn)")
  }

UISegmentedControl

1
2
3
4
5
6
7

let segmentedControl = UISegmentedControl(frame: CGRect(x:10, y:100 ,width:260, height:30))
    segmentedControl.insertSegment(withTitle:"index 0", at: 0, animated: false)
    segmentedControl.insertSegment(withTitle:"index 1", at: 1, animated: false)
    segmentedControl.insertSegment(withTitle:"index 2", at: 2, animated: false)
    segmentedControl.addTarget(self, action: #selector(getSegmentedControlValue), for: .valueChanged)
    segmentedControl.selectedSegmentIndex = 0
    self.view.addSubview(segmentedControl)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

func getSegmentedControlValue(sender:UISegmentedControl!) {
       if  sender.selectedSegmentIndex == 0 {
           print("index 0")

       }
       else if sender.selectedSegmentIndex == 1 {

           print("index 1")

       }
       else {
           print("index 2")
       }

   }

Bu yazımda Apache Cordova için iOS uygulamalarında uzaktan hata ayıklama nasıl yapılır onu göstereceğim.

Hata Ayıklamayı Etkinleştirme

ilk olarak Safari'nin “Develop Menu” kısmını etkinleştirmeniz gerekmekte. Bunun için Safari > Preferences ve “Show Develop Menu” checkbox'unu seçilmiş oldugundan emin olalım.

Şimdi ise iOS cihaz üzerinden gidip Web Denetçisini aktif hale getirmek. Bunun için Ayarlar > Safari > ileri Düzey ve Web Denetçisini aktif hale getirin.

Safari ile Hata ayıklama

Gerekli ayarları yaptıktan sonra ise hata ayıklamaya geçebiliriz. Öncelikle uygulamayı cihazımızda başlatıyoruz. (Cihazımız USB ile bağlı olmalı) Daha sonra ise Safari'de Develop Menusünden Cihazımızı seçerek hata ayıklama işlemini başlatabiliriz.

Bu yazımda Ionic 2 uygulamalarında Google Maps‘ı nasıl ekleyeceğimiz ve ionic-native kullanarak konum bilgisini almayı öğreneceğiz.

Şimdi yeni bir ionic projesi oluşturarak başlayalım.

1
2
3

ionic start ionic-maps blank --v2
cd ionic-maps
ionic platform add android

Daha sonra ise konum bilgisi alabilmek için Geolocation pluginini ekliyoruz.

1

ionic plugin add cordova-plugin-geolocation

Google Maps'in script'ini index.html‘e ekliyoruz.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<body>
  <ion-app></ion-app>

<!-- Google Maps -->
 <script src="http://maps.googleapis.com/maps/api/js"></script>


  <!-- cordova.js required for cordova apps -->
  <script src="cordova.js"></script>
  <!-- Polyfill needed for platforms without Promise and Collection support -->
  <script src="build/js/es6-shim.min.js"></script>
  <!-- Zone.js and Reflect-metadata  -->
  <script src="build/js/Reflect.js"></script>
  <script src="build/js/zone.js"></script>
  <!-- the bundle which is built from the app's source code -->
  <script src="build/js/app.bundle.js"></script>
</body>

Bunları ekledikten sonra angular/core‘dan OnInit'i ekliyoruz.

1
2

import {Component, OnInit} from '@angular/core';

Konum almak için ise Geolocation'i ekliyoruz.

1
2

import {Geolocation} from 'ionic-native';

Daha sonra fonksiyonumuzu yazıyoruz.

1
2
3
4
5
6
7
8
9
10
11
12

  loadMap() {
    Geolocation.getCurrentPosition().then((resp) => {
      var latlng = new google.maps.LatLng(resp.coords.latitude, resp.coords.longitude);
      var myOptions = {
        zoom: 8,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var map = new google.maps.Map(document.getElementById("map"), myOptions);
    });
  }

Eğer Typescript yazıyorsanız Google Map'sin hata verdiğini göreceksiniz.

1
2
3
4
5

TypeScript error: /Users/nazirdogan/ionic-maps/app/pages/home/home.ts(21,24): Error TS2304: Cannot find name 'google'.
TypeScript error: /Users/nazirdogan/ionic-maps/app/pages/home/home.ts(25,20): Error TS2304: Cannot find name 'google'.
TypeScript error: /Users/nazirdogan/ionic-maps/app/pages/home/home.ts(27,21): Error TS2304: Cannot find name 'google'.
TypeScript error: typings/index.d.ts(2,1): Error TS6053: File 'typings/globals/google.maps/index.d.ts' not found.

Bu hatanın nedeni ise Typescript Definition dosyalarının olmamasıdır.

Bu hatayı gidermek için

1
2
3

 npm install typings --global   

 typings install dt~google.maps --global

Yukarıdaki gibi typings'i yüklersek projemizde typings klasörü altında globals klasörü içinde google.maps dosyaları yüklenecektir.

Yazdığımız fonksiyonu ngOnInit ile çagırıyoruz.

1
2
3
4
5
6

ngOnInit() {
    console.log('ngOnInit');
    this.loadMap();
  }

Html tarafında ise id'si map olan bir div oluşturuyoruz.

1
2
3
4
5
6
7
8
9
10

<ion-header>
  <ion-navbar>
    <ion-title>
      Google Maps
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content scroll="false">
  <div id="map"></div>
</ion-content>

sass dosyamız

1
2
3
4
5
6
7
8
9
10
11
12

.home {

}
.scroll {
    height: 100%;
}

#map {
    width: 100%;
    height: 100%;

}

Projenin Github linki

Mobil uygulamaların birçoğu servis olmadan çokta birşey ifade etmezler. ve birçok uygulama REST ve benzeri servisleri kullanmaktadır. Şimdi bizde yapacağımız uygulama ile basit bir servis çagırısı yapıp veriyi ekrana basacağız.

Yapacağımız uygulama basit bir hava durumu uygulaması olacak. Servisden veriyi alma dışında Geolocation pluginini kullanımını göreceğiz. Ayrıca ionic'in yeni CLI yeni özelliğinden bir tanesini kullanacağız.

Şimdi uygulamayı oluşturarak başlayalım.

1
2

 ionic start Ionic2Weather blank --v2
 cd Ionic2Weather

uygulamayı oluşturuduktan sonra ilk iş olarak servis için provider'i üretiyoruz.

Bunu Ionic CLI'da bulunan generate komutu ile yapıyoruz.

Not : Bu komut ile sayfa sayfa'da generate edilmekte. Dökümanda bulabilirsiniz.

1

ionic g provider MyData

yukaradaki komut ile Ionic bizim için yok ise bir providers klasörü oluşturuyor. Ayrıca verdiğimiz isimde bir klasör daha oluşturup içerisinde aynı isimle typescript dosyası oluşturuyor.

providers - > my-data -> my-data.ts

Bir önceki yazımda Ionic 2' nin nasıl kurulacağından bahsettim.

Bu yazımda ise proje yapısınıdan bahsetmek ve önemli birkaç dosyayı göstermek istiyorum.

Not:Görseldeki editor Visual Studio Code ve ionic'in oluşturdugu blank projedir.Sadece homeSercives.ts dosyası eklenmiştir.

Projemizde Ionic 1.x de oldugu gibi platforms, plugins ,hooks gibi Cordova'nın eklediği klasörler mevcut.

node_modules klasörü ve diğer config dosyaları üzerinde durmayacağım. config dosyalarını biraz karıştırarak neler olduguna bakabilirsiniz.

Bizim için en önemli klasör app klasörü. app klasörü pages içersinde html'lerimiz ve .ts (typescript) dosyaları bulunmaktadır. ayrıca platformlara özel yazdığımız stillerin bulunduğu theme klasörü yer almaktadır. Ayrıca ana root'ta bir app.ts dosyası bulunmaktadır. adındanda anlaşılacağı üzere uygulama bu dosyadan başlamaktadır.

şimdi app.ts , home.ts , home.html ‘e bakalım.

Proje yapısına dair söylenebilecek çok şey olsada şimdilik bu kadar. İlk bakışta biraz karışık gelebilir ama konsepti öğrendikten sonra oldukça modüler ve kullanışlı geleceğinden eminim. ionic 1.x de şikayet ettiğim birçok şeyden kurtulmuşa benziyor. Ionic 2' ye başlamadan önce Angular 2 ve Typescript çalışmanızı şiddetle tavsiye ediyorum.

Javascript dünyası son bir iki yıldır baş döndürücü bir şekilde ilerliyor. Node.js'in çok hızlı yükselişi ve ES6 ile Javascript'in yeni özelliklere kavuşması Javascript'i vazgeçilmez bir dil yaptı.

Buna bağlı olarak gelişen Framework'ler (Angular,React) ve dillerde (TypeScript) bundan nasibini aldı. Şu an bütün tarayıcılar bütün özellikleri desteklemesede endişelenecek birşey yok.Bunun için geliştirilen çözümlerde mevcut ( es6-shim ve Babel,TypeScript(programlama dili) gibi araçlar)

Ionic 2'de Ionic 1.x gibi Angular üzerine kurulu bir framework. 1.x'den farkı Angular 2' yi kullanması. Angular 2 ise Angular 1.x düşünüldügünde major bir güncelleme değil komple yeniden yazılmış bir framework diyebiliriz.

Angular 1.x öğrenen ve kullanan birisi için kulağa kötü gibi gelsede front-end geliştiricileri için birçok sorunu ortadan bir değişiklikler getirdiği kesin. Bende yeni yeni Angular2'ye alışmaya çalışan biri olarak daha büyük projeler için oldukça iyi olacağı kanaatindeyim.

Ionic 2 ye daha önceden göz gezdirip geçmiştim.Hazır oldugu kanaatinde değildim. Şimdi biraz daha gelişen framework birçok sorunu çözmüş gibi gözüküyor. Bu yazıda ve bunun devamı olacak yazılarda Ionic 2 ye yönelik örnekleri göstermeye çalışacağım. Hemde kendim öğrenmiş olacağım :)

Hadi başlayalım.

Cordova ve Ionic

ilk olarak Cordova ve Ionic'i yüklüyoruz. ( Sisteminize Node.js'i yüklediğinizden emin olunuz.)

1

npm install -g cordova ionic@beta

veya

1

npm update -g cordova ionic@beta

Not: Eğer Ionic 1.x ile geliştirme yapıyorsanız endişe etmenize gerek yok. Eski kurulumlarınız ve projeleriniz oldugu gibi kullanımına devam edebilirsiniz.

Proje Oluşturma

1
2
3

ionic start Ionic2İlkUygulama blank --v2

cd Ionic2İlkUygulama

Not: Proje ilk oluşurken sabırlı olunuz npm paketlerinin yüklenmesi zaman alabilmektedir.

Daha sonra Android platformunu ekliyoruz.

1

  ionic platform add android

Not :Eğer MacOS üzerinde geliştirme yapıyorsanız iOS platform otomatik olarak eklenmektedir.

Çalıştırmak için ise

1
2

ionic run android -l -c -s

Browser'da test etmek için ise

1
2

ionic serve -l -c -s