Şimdi sizin kafanızda iki soru var: React Native nedir ve neden kullanılır?

React Native nedir? Bir Facebook ürünü. JavaScript ile native iOS uygulamaları geliştirebileceğiniz bir framework.

Aslında halihazırda çoğu developer PhoneGap sayesinde JavaScript ve HTML5 kullanarak iOS uygulamaları geliştirebiliyor. Peki React Native gerçekten bu kadar önemli mi?

Cevap: evetönemli ve insanların bu kadar heyecanlanmasının iki ana sebebi var:

  1. React Native ile uygulamanızın çalışma mantığı JavaScript ile yazılabiliyorken, arayüzü (UI) tamamen native kalabiliyor. Bu sebepten HTML5 UI kaynaklı herhangi bir sorun yaşamıyorsunuz.
  2. React Native kullanıcı arayüzü geliştirmede alışılmışın dışında, radikal ve yüksek fonksiyonlu bir yaklaşım sunuyor.

React Native’in çıkış noktası React programlama modelininin gücünü mobil uygulama geliştirmeye getirmek. React Native’in cross platform (her işletim sisteminde çalışabilme) olma gibi bir hedefi yok. Aşağıda React Native’i iOS ortamında nasıl kullanabileceğinize dair küçük bir örnek var. Konsepti yakalarsanız Android ve diğer platformlarda da rahatlıkla uygulayabilirsiniz.

Aşağıdaki örnekte React Native ile Sahibinden.com benzeri bir uygulama geliştireceğiz. Fakat daha basit ve yalın olacak tabii ki. Bir adet arama kutucuğu olacak ve buraya yazdığımız isme ya da lokasyona göre sonuçları listeleyeceğiz ve sonra bu sonuçlardan birine tıklandığında da detayı göstereceğiz. Ve bütün bunları React Native ile yapacağız!

react-native-ornek

Eğer daha önce JavaScript ile program yazmadıysanız korkmanıza gerek yok, bu örnekte adım adım yapmanız gerekenler anlatılacak. React stil için CSS kullanır ve genelde okuması ve anlaması kolaydır.

Hazırsanız, başlıyoruz. Bismm…

Başlarken

React Native framework’ünü GitHub üzerinden indirebilirsiniz. Framework’ü git komutunu kullanarak klonlayabilir ya da doğrudan zip dosyası olarak bilgisayarınıza indirebilirsiniz. Eğer kaynak kodlarla çok ilgilenmeyecekseniz CLI (komut satırı arayüzü) kullanarak da React Native projenizi yaratabilirsiniz. Bu örnekte biz de bu yöntemi kullanacağız.

React Native JavaScript kodları için Node.js kütüphanesini kullanır. Eğer makinanızda Node.js kurulu değilse ilk iş olarak onu kurmakla başlayalım.

Fakat.. Node.js’yi de kurabilmek için önce Homebrew‘i kuralım.

Aşağıdaki komutu terminalde çalıştırıp Homebrew’i kurabilirsiniz.

ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)”

homebrewHomebrew’i kurduktan sonra terminalde aşağıdaki komutu çalıştırarak Node.js’yi kurabilirsiniz.

brew install node

brew kurulum

Sonraki adım olarak watchman kuracağız. React Native watchman’i kullanarak kodunuzun ne zaman değiştiğini takip eder ve ona göre build eder. Otomatik olarak kodunuzu kaydeder.

brew install watchman

watchman kurulum

Şimdi npm kullanarak React Native CLI aracını kuralım:

npm install -g react-native-cli

react native cli

npm ya da uzun adıyla Node Package Manager (Node Paket Yöneticisi) ile CLI aracını indirip kurabilirsiniz. npm işlev olarak CocoaPods veya Carthage ile eşdeğerdir.

Şimdi React Native uygulamanızı geliştireceğiniz klasöre gidin ve CLI tool’unu kullanarak projenizi oluşturun. Bu örnekte projemizin adı PropertyFinder olacak.

react-native init PropertyFinder

init

Bu komut ile React Native uygulamanız için gerekli tüm proje dosyaları otomatik olarak yaratılmış olacak.

Oluşan proje klasörlerini incelediğinizde node_modules adında bir klasör göreceksiniz. Bu klasörün içinde React Native framework’ü bulunur. Ayrıca index.ios.js adında bir dosya göreceksiniz. Bu dosya CLI tarafından yaratılan ve uygulamanızın iskeletini oluşturan kısımdır. Son olarak Xcode proje dosyası ve iOS klasörü göreceksiniz. Bu klasörde uygulamanız için gerekli bootstrap kodları vardır.

Klasörün içindeki Xcode projesini açıp build ettikten sonra çalıştırın. Simülatör açılacak ve aşağıdaki ekran çıkacak:

ReactNative-Starter

Aynı zamanda yeni bir terminal ekranında aşağıdaki şekilde bir ekranın çıktığını göreceksiniz:

 ===============================================================
 |  Running packager on port 8081.       
 |  Keep this packager running while developing on any JS         
 |  projects. Feel free to close this tab and run your own      
 |  packager instance if you prefer.                              
 |                                                              
 |     https://github.com/facebook/react-native                 
 |                                                              
 ===============================================================
 
Looking for JS files in
   /Users/sensahin/Temp/TestProject
 
React packager ready.

Bu gördüğünüz aslında node altında çalışan React Native paket sistemi. Bu paketin ne yaptığını biraz sonra öğreneceksiniz. Bu noktada unutmamanız gereken şey yeni ekranda açılan terminal penceresini kapatmamanız gerektiği. Arka tarafta çalışıyor olması lazım yoksa kodunuzu derlerken hata alırsınız. Yanlışlıkla kapatırsanız projeyi Xcode üzerinden durdurup tekrar çalıştırmanoz yeterli.

Not: Daha derinlere inmeden önce küçük bir not düşeyim; bu örnekte çok fazla JavaScript kodu yazıyor olacaksınız ve Xcode bu iş için çok iyi olmayabilir. En azından benim için öyle. Ben Sublime Text kullanıyorum ve size de şiddetle öneriyorum.

Merhaba React Native

Emlak arama uygulamamıza geçmeden önce gelenek olduğu üzere çok basit bir Merhaba Dünya uygulaması yazacağız.

index.ios.js dosyasını text editör ile açın ve içeriğini silin. Aşağıdaki kodu başlangıç kısmına yazın:

'use strict';

Strict mod gelişmiş bir hata yönetimi (error handling) sunar.

Sonra, aşağıdaki kodu ekleyin:

var React = require('react-native');

Bu satırdaki kod react-native modülünü yükler ve onu React’e atar. React Native Node.js ile aynı modül yükleme teknolojisini kullanır.

require kodunu içeren satırdan sonra aşağıdakini ekleyin:

var styles = React.StyleSheet.create({
  text: {
    color: 'black',
    backgroundColor: 'white',
    fontSize: 30,
    margin: 80
  }
});

Bu kod basit bir stil ekler uygulamanıza. Daha önce CSS ile uğraştıysanız zaten bu ifadeler size yabancı gelmeyecektir.

Devam ediyoruz. Stil kodlarını yazdığımız satırların altına aşağıdaki kodu ekliyoruz:

class PropertyFinderApp extends React.Component {
  render() {
    return React.createElement(React.Text, 
{style: styles.text}, "Hello World!");
  }
}

Evet, yanlış görmediniz; bu bir JavaScript class’ı!

Son olarak aşağıdaki kısmı kodunuza ekleyin:

React.AppRegistry.registerComponent('PropertyFinder', function() { 
return PropertyFinderApp });

index.ios.js içinde yapmış olduğunuz değişiklikleri kaydedin ve Xcode’a geri dönün. PropertyFinder scheme seçili iken projenizi build edip çalıştırın. Birkaç saniye sonra “Merhaba Dünya” uygulamanızın çalıştığını göreceksiniz:

react-helloworld-281x500

Yukarıda gördüğünüz tarayıcıya ihtiyaç duymadan simülatörde çalışan, native UI render eden bir JavaScript uygulaması!

İnanmadınız mı 🙂 Kendiniz de bunu kontrol edebilirsiniz: Xcode içerisinde Debug/View Debugging/Capture View Hierarchy seçeneğine seçerek hiyerarşiye bakabilirsiniz. İncelediğinizde herhangi bir UIWebView instance’i olmadığını göreceksiniz.

Peki bu şekilde nasıl çalıştığını merak ediyor musunuz? Xcode içerisinde AppDelegate.m dosyasını açın ve application:didFinishLaunchingWithOptions kısmını bulun. Bu metot RCTRootView build eder ve bu View JavaScript uygulamasını yükleyip view içerisinde render eder.

Uygulama başladığında, RCTRootView uygulamayı aşağıdaki URL’den yükler:

http://localhost:8081/index.ios.bundle

Uygulamayı ilk çalıştırdığınızda açılan yeni terminal penceresini hatırladınız mı? İşte bu pencere sayesinde sunucu yukarıdaki request’leri kabul eder ve işler.

Bu URL’i Safari’de açarsanız uygulamanızın JavaScript kodlarını görürsünüz.

Uygulamanız başladığında bu kod yüklenir ve JavaScriptCore framework’ü tarafından çalıştırılır. Bu uygulama örneğinde PropertyFinderApp komponenti yüklenir ve native UIKit view’ı inşa edilir.

JSX Kullanımı

Yukarıda oluşturduğumuz Hello World uygulaması React.createElement elementini kullanır.

Uygulama çalışırken index.ios.js dosyasına dönün ve returnstatement kısmını aşağıdaki şekilde değiştirin:

return <React.Text style={styles.text}>Hello World (Again)</React.Text>;

İşte bu JSX. Bu JavaScript sintaks uzantısı sayesinde HTML-benzeri sintaksı direkt olarak JavaScript kodunuza gömebilirsiniz.

index.ios.js içindeki değişiklikleri kaydedin ve simülatöre geri dönün. Cmd+R basarak uygulamanızı refresh ettiğinizde ekranda “Hello World (Again)” yazısını göreceksiniz.

Gördüğünüz gibi React Native uygulamasını tekrar çalıştırmak tarayıcıda sayfayı resfresh etmek kadar kolay 🙂

Tamam, Hello World uygulaması ile olan işimiz bitti. Şimdi gerçek fonksiyonlu bir uygulama geliştirmeye geçiyoruz!

Navigasyon Ekleme

Property Finder uygulaması UIKit’in navigasyon kontrollerinden olan standart stack-based navigasyon deneyimini kullanacak. Şimdi bu seçeneği ekleyelim.

index.ios.js içerisinde HelloWorld sınıfını PropertyFinderApp olarak değiştirin:

class HelloWorld extends React.Component {

Hello World yazısını biraz daha ekranda tutacağız fakat bu uygulamamızın ana komponenti olmayacak.

Şimdi aşağıdaki class’ı HelloWorld komponentine ekleyin:

class PropertyFinderApp extends React.Component {
  render() {
    return (
      <React.NavigatorIOS
        style={styles.container}
        initialRoute={{
          title: 'Property Finder',
          component: HelloWorld,
        }}/>
    );
  }
}

Bu kod ile bir navigasyon kontroller’ı yaratmış ve bir stil uygulayarak ana rutu HelloWorld komponentine yönlendirmiş olursunuz.

Aynı dosya içerisinde stil deklarasyonunu aşağıdaki şekilde değiştirin:

var styles = React.StyleSheet.create({
  text: {
    color: 'black',
    backgroundColor: 'white',
    fontSize: 30,
    margin: 80
  },
  container: {
    flex: 1
  }
});

Biraz sonra flex: 1 ne demek onu da açıklayacağım. Şimdi simülatöre geri dönün ve cmd+R butonlarına basarak yeni arayüzünüzü inceleyin:

react-helloworldagain-281x500

Yukarıdaki örnekte root view ile birlikte bir navigasyın kontroller’ı var ve bu kontroller Hello World yazısını gösteriyor. Şimdi biraz gerçek UI ekleyelim!

Arama Sayfası

Şimdi arama sayfamızı hazırlayalım. Projenize SearchPage.js adında yeni bir dosya ekleyin ve index.ios.js ile aynı klasörde olmasına dikkat edin. Aşağıdaki kodu bu dosyanın içine ekleyin:

'use strict';
 
var React = require('react-native');
var {
  StyleSheet,
  Text,
  TextInput,
  View,
  TouchableHighlight,
  ActivityIndicatorIOS,
  Image,
  Component
} = React;

Daha sonra aşağıdaki kodu ekleyin:

var styles = StyleSheet.create({
  description: {
    marginBottom: 20,
    fontSize: 18,
    textAlign: 'center',
    color: '#656565'
  },
  container: {
    padding: 30,
    marginTop: 65,
    alignItems: 'center'
  }
});

Gördüğünüz gibi standart CSS kullandık.

Şimdi bu stilin altına aşağıdaki komponenti ekleyin:

class SearchPage extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.description}>
          Search for houses to buy!
        </Text>
        <Text style={styles.description}>
          Search by place-name, postcode or search near your location.
        </Text>
      </View>
    );
  }
}

render JSX kullanımı ile ilgili çok güzel bir örnek.

Son olarak aşağıdaki kodu ekleyin:

module.exports = SearchPage;

Bu modül SearchPage class’ının başka dosyalarda kullanılmasına izin vererek export eder.

Sonraki adımda uygulamanın rutunu güncellememiz gerekir.

index.ios.js dosyasını açın ve aşağıdaki kodu en tepedeki require satırından hemen sonraya ekleyin:

var SearchPage = require('./SearchPage');

render fonksiyonu içerisinde initialRoute kısmını yeni eklediğimiz SearchPage sayfasına referans verecek şekilde güncelleyin:

component: SearchPage

Bu noktada HelloWorld class’ını ve ona bağlı stili isterseniz kaldırabilirsiniz. Kodun bu kısmına ihtiyacınız olmayacak.

Şimdi simülatöre geri dönün ve cmd+R ile yeni arayüzü inceleyin:

react-searchstarter-281x500

Flexbox ile stil hazırlama

Şimdiye kadar temel CSS elementleriyle margin, padding ve renk ayarlama kısımlarını hallettik. Fakat flexbox diye bir şey var ki bunun sayesinde uygulama UI arayüzü hazırlamak çok kolay.

Uygulamanızda container’ın sütun şeklinde bir yönü var yani bu şu demek; ona bağlı elemanlar dikey olarak sıralanacak. Yani şu şekilde:

FlexStack

Şimdi arama yapılabilmesi için bir adet kutucuk ve butonlarımızı ekleyelim. SearchPage.js dosyasını açın ve aşağıdaki kodu ikinci Text elementinden hemen sonra ekleyin:

<View style={styles.flowRight}>
  <TextInput
    style={styles.searchInput}
    placeholder='Search via name or postcode'/>
  <TouchableHighlight style={styles.button}
      underlayColor='#99d9f4'>
    <Text style={styles.buttonText}>Go</Text>
  </TouchableHighlight>
</View>
<TouchableHighlight style={styles.button}
    underlayColor='#99d9f4'>
  <Text style={styles.buttonText}>Location</Text>
</TouchableHighlight>

Burada iki tane top-level view ekledik: biri text input diğeri ise buton.

Şimdi aşağıdaki stili style tanımlamasının olduğu yere ekleyin:

flowRight: {
  flexDirection: 'row',
  alignItems: 'center',
  alignSelf: 'stretch'
},
buttonText: {
  fontSize: 18,
  color: 'white',
  alignSelf: 'center'
},
button: {
  height: 36,
  flex: 1,
  flexDirection: 'row',
  backgroundColor: '#48BBEC',
  borderColor: '#48BBEC',
  borderWidth: 1,
  borderRadius: 8,
  marginBottom: 10,
  alignSelf: 'stretch',
  justifyContent: 'center'
},
searchInput: {
  height: 36,
  padding: 4,
  marginRight: 5,
  flex: 4,
  fontSize: 18,
  borderWidth: 1,
  borderColor: '#48BBEC',
  borderRadius: 8,
  color: '#48BBEC'
}

Buraya eklediğimiz stil hem buton hem de text input tarafından kullanılacak.

Şimdi simülatöre geri dönün ve cmd+R ile yeni arayüzü inceleyin:

react-searchpageinput-281x500

Sonraki adım olarak arama sayfasını tamamlamak için bir adet ev görseli ekleyelim. Görseli buradan indirebilirsiniz.

Xcode içerisinde Images.xcassets dosyasını açın ve artı butonuna tıklayarak yeni bir görsel seti ekleyin. Sonra ev görselini doğru slot içine sürükleyip bırakın:

AddingHouseImage-700x459

Uygulamanızı burada durdurup yeninden başlatmanız gerekiyor ki bu görseller React Native uygulamanızda görünür hale gelsin.

Aşağıdaki kodu TouchableHighlight komponentinin hemen altına ekleyin:

<Image source={require('image!house')} style={styles.image}/>

Şimdi görselin ilgili stilini style tanımlamasının en sonuna ekleyin:

image: {
  width: 217,
  height: 138
}

require(‘image!house’) ifadesi asset kataloğuna eklediğiniz görselin kullanılması gerektiğini bildirir.

Şimdi simülatöre geri dönün ve cmd+R ile yeni arayüzü inceleyin:

react-searchpagehouse-281x500

İlk React Native uygulamanız harika gözüküyor! Şimdi biraz fonksiyon ekleyelim.

Komponent State’i Ekleme

Her bir React komponentinin kendi state objesi vardır ve bu obje bir anahtar değer saklamak için kullanılır. Bir komponenti render etmeden önce state’ini belirtmeniz gerekir.

SearchPage.js içerisinde aşağıdaki kodu render() kısmından hemen önce SearchPage class’ına ekleyin:

constructor(props) {
  super(props);
  this.state = {
    searchString: 'london'
  };
}

Komponentinizin şimdi bir adet state değişkeni var.

Şimdi bu komponent state’ini kullanalım. render sayesinde TextInput elementini aşağıdaki şekilde değiştirelim:

<TextInput
  style={styles.searchInput}
  value={this.state.searchString}
  placeholder='Search via name or postcode'/>

Şimdi event handler olacak şekilde bir metot oluşturalım ki kullanıcılar bu arama kutucuğuna birşeyler yazdığında olabilecek sonuçları ayarlayalım. SearchPage class’ı içerisine aşağıdaki kodu ekleyin:

onSearchTextChanged(event) {
  console.log('onSearchTextChanged');
  this.setState({ searchString: event.nativeEvent.text });
  console.log(this.state.searchString);
}

Bu kod text elementindeki değeri alır ve komponentin durumunu güncellemede kullanır.

Aşağıdaki onChange property’sini kodunuza ekleyin:

<TextInput
  style={styles.searchInput}
  value={this.state.searchString}
  onChange={this.onSearchTextChanged.bind(this)}
  placeholder='Search via name or postcode'/>

Kullanıcı ne zaman yazıyı değiştirirse onChange tarafından sunulan fonksiyon çalıştırılacak.

Uygulamanızı refresh etmeden önce son adım olarak aşağıdaki logging ifadesini render()’in en tepesine return’den hemen önceki kısma ekleyin:

console.log('SearchPage.render');

Bu loglar sayesinde çok faydalı şeyler öğreneceksiniz 🙂

Simülatöre geri dönün ve cmd+r butonlarına basın. Şimdi arama kutucuğunda “london” değerini göreceksiniz ve bu text’i editlemeye başladığınızda Xcode konsol ekranında aşağıdaki logları göreceksiniz:

react-renderconsole

React ile uygulama arayüzünüzün hangi kısmının durum değişikliği geçirdiğini düşünmenize gerek yok, çünkü UI’nin tamamı uygulama state’inin bir fonksiyonu olarak ifade ediliyor.

Bu noktada çok radikal bir durumu kesin olarak gözlemlediğinizi düşünüyorum: performans!

Şimdi kodunuzu son kez gözden geçirin ve en son eklediğiniz loglama kısmını kaldırın çünkü buna çok ihtiyacınız yok şimdilik.

Arama Yapma

Şimdi text kutumuz tamam, arama yapabilmek için butonumuza bir fonksiyon tanımlamamız gerekiyor.

SearchPage.js içinde state’i aşağıdaki gibi güncelleyin:

this.state = {
  searchString: 'london',
  isLoading: false
};

isLoading sayesinde uygulamanız herhangi bir query var mı yok mu dinleyecek.

Aşağıdaki kodu render’in başlangıcına ekleyin:

var spinner = this.state.isLoading ?
  ( <ActivityIndicatorIOS
      hidden='true'
      size='large'/> ) :
  ( <View/>);

Aşağıdaki kodu Image’in hemen altına ekleyin:

{spinner}

Şimdi, TouchableHighlight etiketi içerisine aşağıdaki kodu ekleyin:

onPress={this.onSearchPressed.bind(this)}

SearchPage class’ına aşağıdaki metodu ekleyin:

_executeQuery(query) {
  console.log(query);
  this.setState({ isLoading: true });
}
 
onSearchPressed() {
  var query = urlForQueryAndPage('place_name', this.state.searchString, 1);
  this._executeQuery(query);
}

Son olarak aşağıdaki fonksiyonu SearchPage class deklarasyonunun en tepesine ekleyin:

function urlForQueryAndPage(key, value, pageNumber) {
  var data = {
      country: 'uk',
      pretty: '1',
      encoding: 'json',
      listing_type: 'buy',
      action: 'search_listings',
      page: pageNumber
  };
  data[key] = value;
 
  var querystring = Object.keys(data)
    .map(key => key + '=' + encodeURIComponent(data[key]))
    .join('&');
 
  return 'http://api.nestoria.co.uk/api?' + querystring;
};

Simülatöre geri dönün ve uygulamayı refresh edin. Go butonuna bastığınızda bir indikatörün döndüğünü göreceksiniz, Xcode log konsoluna baktığınızda şunu göreceksiniz:

SearchAcitivityIndicator-700x169

Not: Bu uygulama emlak arama için Nestoria sitesinin API’sini kullanıyor. API’den dönen JSON cevabı çok açık ve net fakat daha detaylı incelemek isterseniz sitenin API dökümantasyonuna bakabilirsiniz.

Şimdi sonraki adım olarak API requestinde bulunacağız ve dönen sonuçları ekrana yazdıracağız.

API Request

SearchPage.js içerisine message değişkenini ekleyin:

this.state = {
  searchString: 'london',
  isLoading: false,
  message: ''
};

Render içerisinde aşağıdaki kodu UI’nin en altına ekleyin:

<Text style={styles.description}>{this.state.message}</Text>

Kullanıcılara mesajlar göstermek için bunu kullanacağız.

SearchPage class’ı içerisinde aşağıdaki kodu_executeQuery() sonuna ekleyin:

fetch(query)
  .then(response => response.json())
  .then(json => this._handleResponse(json.response))
  .catch(error => 
     this.setState({
      isLoading: false,
      message: 'Something bad happened ' + error
   }));

Son adım olarak aşağıdaki fonksiyonu SearchPage’e ekleyin:

_handleResponse(response) {
  this.setState({ isLoading: false , message: '' });
  if (response.application_response_code.substr(0, 1) === '1') {
    console.log('Properties found: ' + response.listings.length);
  } else {
    this.setState({ message: 'Location not recognized; please try again.'});
  }
}
Çalışmanızı kaydedin ve simülatöre geri dönerek sayfayı refresh edin. Arama kutucuğuna london yazıp arayın. Log konsolunda 20 adet emlağın bulunduğunu söyleyen bir ifade göreceksiniz. Şimdi de olmayan bir lokasyon arayın, örneğin narnia yazıp arayın ve aşağıdaki mesajı görüyor olacaksınız:

react-narnia-281x500

Sonuçları Gösteriyoruz

SearchResult.js adında yeni bir dosya yaratın ve aşağıdaki kodu ekleyin:

'use strict';
 
var React = require('react-native');
var {
  StyleSheet,
  Image, 
  View,
  TouchableHighlight,
  ListView,
  Text,
  Component
} = React;

Evet, doğru gördünüz. require ifadesi kullandık ve react-native modülünü istedik.

Şimdi aşağıdaki komponenti ekleyin:

class SearchResults extends Component {
 
  constructor(props) {
    super(props);
    var dataSource = new ListView.DataSource(
      {rowHasChanged: (r1, r2) => r1.guid !== r2.guid});
    this.state = {
      dataSource: dataSource.cloneWithRows(this.props.listings)
    };
  }
 
  renderRow(rowData, sectionID, rowID) {
    return (
      <TouchableHighlight
          underlayColor='#dddddd'>
        <View>
          <Text>{rowData.title}</Text>
        </View>
      </TouchableHighlight>
    );
  }
 
  render() {
    return (
      <ListView
        dataSource={this.state.dataSource}
        renderRow={this.renderRow.bind(this)}/>
    );
  }
 
}

Şimdi de aşağıdaki export modülünü en sona ekleyin:

module.exports = SearchResults;

SearchPage.js içerisinde en tepeye require’ın hemen altına aşağıdaki kodu ekleyin:

var SearchResults = require('./SearchResults');

_handleResponse metodunu aşağıdaki şekilde değiştirin:

this.props.navigator.push({
  title: 'Results',
  component: SearchResults,
  passProps: {listings: response.listings}
});

Şimdi simülatöre geri dönün ve uygulamanızı refresh edin. Aşağıdaki şekilde sonuçların döndüğünü göreceksiniz:

react-searchresults1-281x500

Stil Ekleyelim

Evet sonuçları da döndürdük. Fakat biraz karışık gözüküyor. Şimdi biraz stil ekleyelim ve arayüzü güzelleştirelim.

SearchResults.js içine aşağıdaki stili ekleyin:

var styles = StyleSheet.create({
  thumb: {
    width: 80,
    height: 80,
    marginRight: 10
  },
  textContainer: {
    flex: 1
  },
  separator: {
    height: 1,
    backgroundColor: '#dddddd'
  },
  price: {
    fontSize: 25,
    fontWeight: 'bold',
    color: '#48BBEC'
  },
  title: {
    fontSize: 20,
    color: '#656565'
  },
  rowContainer: {
    flexDirection: 'row',
    padding: 10
  }
});

Sonra renderRow()’u aşağıdaki ile değiştirin:

renderRow(rowData, sectionID, rowID) {
  var price = rowData.price_formatted.split(' ')[0];
 
  return (
    <TouchableHighlight onPress={() => this.rowPressed(rowData.guid)}
        underlayColor='#dddddd'>
      <View>
        <View style={styles.rowContainer}>
          <Image style={styles.thumb} source={{ uri: rowData.img_url }} />
          <View  style={styles.textContainer}>
            <Text style={styles.price}>£{price}</Text>
            <Text style={styles.title} 
                  numberOfLines={1}>{rowData.title}</Text>
          </View>
        </View>
        <View style={styles.separator}/>
      </View>
    </TouchableHighlight>
  );
}

Son adım olarak aşağıdaki metodu ekleyin:

rowPressed(propertyGuid) {
  var property = this.props.listings.filter(prop => prop.guid === propertyGuid)[0];
}

Simülatöre geri dönün ve refresh edin. Şöyle bir ekran gelmesi lazım:

react-searchresults2-281x500

Şahane değil mi 🙂 En ufak bir Objective C veya Swift kodu kullanmadan sadece JavaScript ile native mobil uygulaması yazıyoruz, insan daha ne ister 🙂

Emlak Detay Görünümü

Şimdi gelen sonuçlardan birine tıkladığımızda bizi detay sayfasına götürsün ve bu detay sayfasında bizi o emlakla ilgili detaylı bilgi versin istiyoruz.

PropertyView.js adında yeni bir dosya oluşturun ve aşağıdaki kodu en tepeye ekleyin:

'use strict';
 
var React = require('react-native');
var {
  StyleSheet,
  Image, 
  View,
  Text,
  Component
} = React;

Şimdi de aşağıdaki stili ekleyin:

var styles = StyleSheet.create({
  container: {
    marginTop: 65
  },
  heading: {
    backgroundColor: '#F8F8F8',
  },
  separator: {
    height: 1,
    backgroundColor: '#DDDDDD'
  },
  image: {
    width: 400,
    height: 300
  },
  price: {
    fontSize: 25,
    fontWeight: 'bold',
    margin: 5,
    color: '#48BBEC'
  },
  title: {
    fontSize: 20,
    margin: 5,
    color: '#656565'
  },
  description: {
    fontSize: 18,
    margin: 5,
    color: '#656565'
  }
});

Şimdi de komponenti ekleyin:

class PropertyView extends Component {
 
  render() {
    var property = this.props.property;
    var stats = property.bedroom_number + ' bed ' + property.property_type;
    if (property.bathroom_number) {
      stats += ', ' + property.bathroom_number + ' ' + (property.bathroom_number > 1
        ? 'bathrooms' : 'bathroom');
    }
 
    var price = property.price_formatted.split(' ')[0];
 
    return (
      <View style={styles.container}>
        <Image style={styles.image} 
            source={{uri: property.img_url}} />
        <View style={styles.heading}>
          <Text style={styles.price}>£{price}</Text>
          <Text style={styles.title}>{property.title}</Text>
          <View style={styles.separator}/>
        </View>
        <Text style={styles.description}>{stats}</Text>
        <Text style={styles.description}>{property.summary}</Text>
      </View>
    );
  }
}

Son olarak da dosyanın sonuna aşağıdaki export modülünü ekleyin:

module.exports = PropertyView;

SearchResults.js dökümanına geri dönün ve require ifadesini ekleyin en tepeye:

var PropertyView = require('./PropertyView');

Şimdi rowPressed() kısmını güncelleyin:

rowPressed(propertyGuid) {
  var property = this.props.listings.filter(prop => prop.guid === propertyGuid)[0];
 
  this.props.navigator.push({
    title: "Property",
    component: PropertyView,
    passProps: {property: property}
  });
}

Simülatöre geri dönün ve uygulamanızı refresh edin. Detaya tıkladığınızda aşağıdaki ekran gelecek:

react-property-281x500

Geolocation Kullanımı

Uygulamamız kullanıcıların lokasyon bilgisini kullanacağından öncelikle kullanıcılardan bunun iznini almamız lazım.

Xcode içinde Info.plist dosyasını açın ve Add Row butonuna tıklayarak yeni bir anahtar ekleyin. NSLocationWhenInUseUsageDescription anahtar adı olarak girin ve aşağıdaki değeri yazın:

PropertyFinder would like to use your location to find nearby properties

plist dosyanızın şu şekilde gözükmesi lazım:

Screen-Shot-2015-03-20-at-21.49.06-480x162

SearchPage.js açın ve TouchableHighlight kısmını bulun ve aşağıdaki değeri ekleyin:

onPress={this.onLocationPressed.bind(this)}

SearchPage body kısmına aşağıdaki kodu ekleyin:

onLocationPressed() {
  navigator.geolocation.getCurrentPosition(
    location => {
      var search = location.coords.latitude + ',' + location.coords.longitude;
      this.setState({ searchString: search });
      var query = urlForQueryAndPage('centre_point', search, 1);
      this._executeQuery(query);
    },
    error => {
      this.setState({
        message: 'There was a problem with obtaining your location: ' + error
      });
    });
}

Tebrikler! Uygulamanız kullanıma hazır 🙂

Yukarıdaki örnek uygulamanın bütün proje dosyalarını ve kodlarını GitHub üzerinde bulabilirsiniz.

Umarım React Native nedir ne değildir biraz fikir edinmişsinizdir.

Hadi şimdi koşun ve kendi emlak arama uygulamanızı React Native ile geliştirin. Başarılar.

Not: Bu yazı http://www.raywenderlich.com/99473/introducing-react-native-building-apps-javascript adresinden Türkçe’ye çevrilmiştir.

JavaScript ile Java Arasındaki Fark

Java ile JavaScript’i karıştırmak Mal ile Maltepe’yi birbirine karıştırmak gibidir. Her iki dil de birbirinden çok farklıdır ve farklı kulvarlardadır.

JavaScript programlama dili Netscape tarafından geliştirilmiştir. Java ise daha sonra Oracle tarafından satın alınan Sun Microsystems tarafından geliştirilmiştir.

JavaScript ile applet dediğimiz küçük uygulamalar veya stand-alone uygulamalar geliştirilemez. JavaScript HTML dökümanlarını maniple etmeyi ve web sayfaları üzerinde HTML ile elde edilemeyen etkileşimleri sağlar.

Çoğu kullanıcı sırf içinde Java geçiyor diye JavaScript’i de aynı şey zanneder. Buna karşı pek çok programcı her iki dilin birbirine karıştırılması karşısında saçını başını yolar.

Eğer 5 yıl öncesine seyahat edebilseydik kıyaslamamız şu şekilde olacaktı: Java genel amaçlı programlama dilidir, JavaScript ise web sayfalarını etkileşimli hale getirmek için kullanılan scripting dilidir. Fakat artık günümüzde JavaScript ciddi manada büyüdü ve gelişti. Kıyaslama biraz daha komplike hale geldi. Web geliştirme perspektifinden şimdi iki dil arasındaki benzerlik ve farklara bakalım.

JavaScript ile Java Arasındaki Fark

Web Tarayıcıda Çalışabilirlik

JavaScript günümüzün pek çok modern tarayıcısında çalışır ve pek çok web sitesi JavaScript kullanarak kullanıcılarıyla etkileşime geçer ve kullanıcı deneyimini arttırır. Java appletler de (küçük uygulamacıklar) web tarayıcılarda çalışabilir fakat uyumluluk ve güvenlik gibi çeşitli sebeplerden ötürü kullanımları ve popülariteleri azalma göstermektedir. Genelde kullanıcıların tarayıcılarında JavaScript enabled yani aktif halde gelir iken Java Appletler default olarak disabled yani pasif halde gelir.

JavaScript ile Java Arasındaki Fark

Sunucu Taraflılık

Java pek çok kurumsal firewall ve web uygulamalarda çalışan WebSphere, JBoss ve Apache Tomcat gibi uygulama sunucular ile webin atgücü konumundadır. JavaScript ise sunucu tarafında tabiri caizse amatör olarak takılmaktadır. Son zamanlarda ortaya çıkan Node.js gibi frameworkler sayesinde JavaScript tabanlı uygulama sunucuların sayısında da artış gözlemlenmektedi.r

Derlenmiş vs Yorumlanmış

Java kodları genelde Integrated Development Environment (IDE) dediğimiz edötörlerde yazılır ve bytecode şeklinde derlenir. Bu bytecode insanlar tarafından okunabilir değildir ve çalışabilmesi için Java Virtual Machine (JVM) gereklidir. JavaScript kodları ise genelde JavaScript motoru tarafından çalıştırılır. Bir Java uygulamasında değişiklik yapmak için pek çok farklı adım gerekebilir. Tekrar derleyip tekrar deploy etme işlemleri yapılır. Fakat JavaScript kodları Notepad gibi basit text editörleriyle istendiği anda değiştirilebilir ve çalıştırılabilir.

Geliştirmeler

Java Java Community Process adında bir süreçle yeni Java sürümlerinde ne kullanacağını kullanıcılardan gelen geri bildirimler ile belirler. Java’nın şu anki sahibi Oracle bu geri bildirimleri gözönünde bulundurarak geliştirmeler yapar. JavaScript ise kar amacı gütmeyen kuruluş olan ECMA tarafından tanımlanan bir dildir. Günümüzde diller ve uygulamalar genelde kullanıcı topluluğu tarafından geri beslemeyle geliştirilir.

Uyumluluk

Java’nın sloganı “Write-once, Run-anywhere” şeklindedir. Yani “Bir kere yaz, her yerde çalıştır” manasına gelir. Geliştiricilerin kodlarını bir kere yazıp derledikten sonra her türlü işletim sisteminde çalıştırabilmelerini hedefler. Genelde bu şekilde çalışır fakat bazen JVM ve kullanılan koda bağlı olarak uyumluluk vs sorunları çıkabilir. JavaScript ise standart bir scripting dili olduğundan uyumluluk ve çalışmama noktasında daha az sorun yaşar.

Debugging

Java çalıştırılmadan önce derlenmek zorundadır. Dolayısıyla herhangi bir hata veya sorun varsa önceden tespit edilebilir. JavaScript ise aynı şekilde debug edilmez. Bütün buglar ve sorunlar runtime yani çalıştırma anında tespit edilir.

Kütüphane ve Framework’ler

Kütüphane ve frameworkler programcılar için çok faydalı araçlardır. Bu kütüphane ve frameworkler farklı uygulamalarda tekrar tekrar kullanılabilir. Düzgün kullanıldığında kütüphaneler sayesinde geliştirme evresi ciddi ölçüde kısalabilir. Hem Java hem de JavaScript çok fazla kütüphane ve frameworke sahiptir.

JavaScript ile Java arasındaki fark özetlenecek olursa;

  • Java nesne yönelimli programlama dilidir. JavaScript ise nesne yönelimli scripting dilidir.
  • Java sanal makinada ya da tarayıcıda çalışabilen uygulamalar yaratabilir. JavaScript kodları ise sadece tarayıcılarda çalışır.
  • Java kodunun derlenmesi gerekir, JavaScript kodları ise tamamen yazı şeklindedir.
  • Her iki dil de farklı eklentilere ihtiyaç duyar.

JavaScript ile Java arasındaki fark özetle bu şekilde. Sizin de eklemek istedikleriniz varsa yorum bırakabilirsiniz.

HTML ile HTML5 Arasındaki Fark

HTML ile HTML5 Arasındaki Fark: HTML (HyperText Markup Language) web üzerinde sayfa geliştirmek için kullanılan bir dil standardıdır. HTML çok uzun süredir var olan ve yaygın kullanılan bir dildir. Daha çok web siteleri için ön yüz tasarımında kullanılır. XML ya da uzun adıyla Extensible Markup Language dökümanları çözümleyebilmek ve hem insan hem de makinalar tarafından okunmalarını sağlayabilmek için bazı kurallar belirler.

HTML, HTML elementleri kullanılarak yazılır. Tag dediğimiz etiketler kullanılarak açılış ve kapanış tagleri ile yazılır. Bu tagler arasındaki veri ise genelde içeriği oluşturur. HTML’nin asıl ortaya çıkış amacı web tarayıcıların tagler arasına yazılmış içeriği okunabilir şekilde kullanıcıya sunmaktır. HTML önceden tanımlanmış bazı tagler ile birlikte gelir. Bir web sayfasına görüntü, ses, video ve yazı gibi içerikler eklemeye izin verir.

HTML ile HTML5 Arasındaki Fark

HTML’nin elemanları bir web sayfası oluşturabilmek için gerekli basit temel yapıtaşlarıdır. HTML sayesinde görüntü ve objeleri web sayfasına gömebiliriz. Ayrıca HTML ile etkileşimli ve interaktif formlar oluşturulabilir. HTML ile yapılı ve düzenli dökümanlar oluşturulabilir. Bu düzenli sayfaları başlık (heading), paragraf (p), listeler (li), linkler (a) gibi elemanlar sayesinde yapabiliriz. Fakat günümüzde internet üzerinde sayfalar çok nadiren HTML ile geliştirilir oldu. PHP, ASP, Phyton gibi farklı dillerle de daha interaktif ve kullanıcı etkileşimli sayfalar hazırlanabilir. HTML geliştiricilerin sayfaların içerisine JavaScript gibi scripting dillerinde ek kodlar yerleştirmelerine izin verir. Bu scriptler ile HTML sayfalarının davranışları değiştirilebilir.

HTML5 ise HTML standartlarının 5. revizyonudur. HTML5’in ana çıkış noktası HTML dilinin günümüz modern multimedya araçlarını destekleyebilmesi için geliştirilmesidir. HTML5 HTML4’ün ve XHTML’nin devamıdır. 2012 itibariyle de HTML5 W3C standarları tarafından önerilen dillerden biridir.

HTML5 yeni modern web tarayıcılar tarafından sununlar yeni teknolojileri karşılamak ve desteklemek amacı güder. Ayrıca web dökümanlarından pek çok sintaks ve yazım hatalarını gidermeyi amaçlar. Ayrıca hem HTML hem de XHTML sintaksı ile yazılabilen tek bir standart format getirmeyi hedefler. Daha önceki HTML versiyonları ile de uyumludur.

HTML ile HTML5 Arasındaki Fark

HTML gibi daha önceki versiyonlarla kıyaslarsak HTML5’de aşağıdaki gibi yenilikler vardır:

  • HTML5 detaylı işleme modelleri içerir.
  • HTML5 standart yazım dilini ilerletir, geliştirir ve rasyonalize eder.
  • HTML5 kompleks web uygulamaları için API’ler sunar.
  • HTML5 çok platformlu mobil uygulamalar için potansiyel adaydır.
  • HTML5 üçüncü parti yazılımlara ve eklentilere ihtiyaç duymadan multimedya ve grafik görüntüleri oynatabilir.
  • HTML5 ses ve görüntü dosyaları için daha iyi bir destek sunar.
  • HTML5’te JS GeoLocation API ile lokasyon belirlenebilir.
  • HTML5 detaylı parsing kuralları içerir ve hata yönetim sistemi daha iyidir.
  • HTML5 HTML ve HTML4 ile uyumludur.
  • HTML5 XML sintaksı kullanabilir.
  • HTML5’in yeni özellikleri HTML, CSS, DOM ve JavaScript üzerine kuruludur.
  • HTML5’te Flash gibi üçüncü parti yazılımlara ihtiyaç yoktur.
  • HTML5 cihazdan bağımsızdır.
  • HTML5 çizim için canvas elemanına sahiptir.
  • HTML5 yerel offline depolama için daha iyi bir destek sunar.

Bilgisayar Mühendisliği ile Yazılım Mühendisliği Arasındaki Fark

Anahtar fark: Yazılım mühendisliği bir probleme pratik bir çözüm üretmeyi amaçlayan bir branştır. Yazılım mühendisliği bir problemi çözmek için bilgisayar tabanlı bir yazılım geliştirme üzerine kafa yorar. Bilgisayar mühendisliği ise çok daha geniş ve kapsamlı bir daldır ve hem elektrik mühendisliğini hem de bilgisayar bilimlerini kapsayarak bilgisayar sistemleri geliştirmeyi hedefler. Bu yazıda bilgisayar mühendisliği ile yazılım mühendisliği arasındaki fark nedir bunu inceleyeceğiz.

Bilgisayar Mühendisliği ile Yazılım Mühendisliği Arasındaki Fark

Bilgisayar Mühendisliği ile Yazılım Mühendisliği Arasındaki Fark

Yazılım mühendisliği ve bilgisayar mühendisliği bilgisayarlar ile ilişkili iki farklı mühendislik dalıdır. Bu iki dal çok fazla ortak noktaya sahip olduğundan pek çok kimse tarafından karıştırılır. İki mühendislik arasındaki en büyük fark; yazılım mühendisliği tamamen yazılım tasarlama, uygulama, test ve bakımına odaklıdır. Bilgisayar mühendisliği ise bilgisayar bilimlerinin hem yazılım hem de donanım tarafını birlikte inceler.

Yazılım Mühendisliği

Yazılım mühendisliği var olan bir soruna bilgisayar tabanlı bir çözüm üretmeye odaklanır. Ya yeni bir yazılım tasarlanır, ya da var olan yazılım maniple edilir. Yazılım bir bilgisayarı fonksiyonel hale getirmeye yarar. Genelde takım işidir. Mühendisler ve programcılar bir araya gelerek yazılım geliştirirler.

Yazılım mühendisliği bölümünde öğrenilen pek çok konu Bilgisayar Bilimleri’nde öğrenilenlere benzer. Buna ek olarak mühendislik, yazılım mimarlığı, yazılım testi, ve yazılım dağıtımı gibi konuları da içerir. Yazılım mühendisliğinde ayrıca liderlik, iletişim, zaman yönetimi ve insan yönetimi gibi konular da incelenir. Mühendisler sorunu tespit edip bu sorun için çözüm üretip adım adım ilgili sonuca ulaşmaya çalışır. Yazılım mühendisleri ve programcılar birlikte çalıştığı zaman genelde kod yazma işleminin çoğunluğu programcılar tarafından yapılır. Bir yazılım mühendisinin yazılım tasarlama, programlama dilleri, matematik ve bilgisayar donanımı hakkında geniş bilgiye sahip olması gerekir.

Bilgisayar Mühendisliği

Bilgisayar mühendisliği ise hem elektrik mühendisliği hem de Bilgisayar Bilimleri’ni kapsar. Bir bilgisayar mühendisinin genelde elektronik mühendisliği ve yazılım-donanım entegrasyonu hakkında geniş bilgiye sahip olması beklenir. Bu bölümün ana odak noktası mikroişlemci tasarımı, kapalı devre sistemler, bilgisayar ve donanımlardır. Bu bölümün yine en büyük odak noktası sadece bilgisayarların nasıl çalıştığını incelemek değil, aynı zamanda bilgisayar sistemleriyle ilgili “büyük resim”i de görebilmektir.

Bilgisayar mühendisliği iki dalda incelenir: yazılım ve donanım. İsteyen öğrenciler yazılımı ya da donanımı seçip bu alanlarda uzmanlaşabilir. Yazılım alanında mikro denetleyici, çip ve sensörlerle çalışan donanımlar için yazılım geliştirme çalışmaları yapılır. Bilgisayar mühendisleri ayrıca robotik araştırmalar için de çok uygundur.

Bilgisayar mühendisliği çok güçlü bir matematik ve bilim altyapısı gerektirir. Bilgisayar mühendisliğinde kodlama, şifreleme, bilgi güvenliği, iletişim, kablosuz ağlar, derleyiciler, işletim sistemleri, bilgisayar bilimleri, bilgisayar ağları, dağınık sistemler, gömülü sistemler, robotik, kapalı devreler, test, CAD sinyal, görüntü ve ses işleme gibi konular işlenir.

Abstract ile Interface Arasındaki Fark

Abstract ile interface arasındaki fark: Abstract ve interface programlamada kullanılan iki farklı ifade. Interface Türkçe arabirim anlamına gelir. Nesne yönelimli programlamada ise metot ve property listesidir. Abstract ise hem sınıflarda (class) hem de fonksiyonlarda kullanılan bir modifier’dır.

Abstract ile Interface Arasındaki Fark

Bir class sadece bir tane abstract class inherit edebilir.

Bir class birden fazla interface inherit edebilir.

Bir abstract class kodun tamamını ya da yazılması gerekenin sadece detayını sunabilir.

Bir interface sadece imza sunar, herhangi bir kod sunamaz.

Bir abstract class sub’lar, fonksiyonlar ve property’ler için access modifier’lar içerebilir.

Bir interface sub’lar, fonksiyonlar ve property’ler için access modifier’lar içeremez. Herşey public kabul edilir.

İlgili sınıftaki metodu bulabilmek için daha çok zamana ihtiyaç duyar.

Abstract ile Interface Arasındaki Fark

Abstract ile interface arasındaki fark; Ferid Mövsümov blogunda çok kapsamlı ve detaylı bir şekilde yazılmış. Bu farkları aşağıda alıntıladım.

  1. Interfaceler çoklu kalıtımı sağlamaya yardımcı abstract classlar ise çoklu kalıtımı desteklemez.
  2. Interfacelerde metodların içerisini dolduramayız ama abstract classlarda doldurabiliriz Böylece bütün alt sınıfların belli bir özelliğe sahip olmasını sağlayabiliriz.
  3. Interface ile yapabildiğimiz herşeyi hatta daha fazlasını abstract classlar ile de yapabiliriz.
  4. Eğer türeteceğimiz classlarda belli başlı varsayılan özellikleri tekrar tekrar kopyala-yapıştır yapmak istemiyorsak o zaman abstract class kullanmamız gerekir. Çünkü abstract classlarla bir metodu tüm alt classlarda varsayılan metod şeklinde tanımlayabiliriz ve alt classlarda bunları tekrar yazmamıza gerek kalmaz kalıtımla aktarılmış olur.
  5. Kalıtım sağlamak istiyorsak abstract classlar kullanmamız gerekir.
  6. Abstract classları kullanmak hız açısından avantaj sağlar.
  7. Interface de yeni bir metod yazdığımız zaman bu interfaceden implement ettiğimiz tüm classlarda bu metodun içini tek tek doldurmak gerekiyor ancak abstract classlarda durum farklıdır burada bir metod tanımlayıp içini doldurduğumuzda abstract sınıfımızdan türetilmiş bütün sınıflar bu özelliği kazanmış olur.

Programlama Dillerinin Ülke Olarak Karşılıkları

Quora çok sevdiğim bir site. Bazen saatlerce içine girip çıkamadığım oluyor. Her konu hakkında topluluk tarafından oylanarak öne çıkarılan kaliteli bir içerik sunuyor. Programlama dillerinin ülke olarak karşılıklarıyla ilgili çok güzel bir yazıya denk geldim, onu paylaşmadan geçemem.

programlama_dilleri_ulkeler

Java = ABD İyimser, güçlü, bazı ufak tefek aksaklıkları örtbas etmekte usta.

C++ = İngiltere Güçlü, heyecanlı fakat işleri bitirmede çok iyi olmayan ve Java tarafından sollanan.

Python = Hollanda “Sorun yok kanka, iki dakkada hallederiz” diyen.

Ruby = Fransa Güçlü, stil sahibi ve doğruluğuna kendini inandırmış fakat her nasılsa herkes tarafından görmezden gelinen.

Assembly = Hindistan Devasa, derin, hayati derecede önemli fakat problem dolu.

Cobol = Rusya Bir zamanlar çok güçlü ve yönetici kafasıyla yazılan fakat sonrasında bu kafayı kaybeden.

SQL = Almanya Çok katı, güvenilir ve beygir gücünde.

Javascript = İtalya Çok etkili ve herkes tarafından sevilen ama çok kolay bozulan.

Scala = Macaristan Teknik açıdan çok temiz ve doğru fakat başarısını kısıtlayan kullanışsız bir gramere aşık olan.

C = Norveç Zorlu ve çetin fakat çok heyecan vermeyen.

PHP = Brezilya Çok fazla güzelliğe sahip ve bu güzelliklerini öne çıkaran fakat içten içe çok muhafazakar.

LISP = İzlanda İnanılmaz zeki ve düzenli fakat soğuk ve uzak.

Perl = Çin Hemen hemen herşeyi yapabilen fakat anlaşılmaz ve gizemli.

Swift = Japonya Bir dakika önce hiçbir yerde yokken, bir dakika sonra her yerde ve cep telefonunuz onsuz yapamıyor.

C# = İsviçre Güzel ve iyi tasarlanmış fakat kendisiyle ciddi ilişkiye girecekseniz çok fazla ödemeniz gereken.

R = Lihtenştayn Muhtemelen harika birşey fakat kimsenin tam olarak ne iş yaptığını bilmediği.

Awk = Kuzey Kore Değişime inatla karşı ve kullanıcıları tarafında yapmacık bir şekilde seviliyor gözüken.

Clojure = Vatikan Çok güzel mimariye sahip, boyuna göre çok güçlü ama antik bir imparatorluğun kemikleri üzerine kurulu.

Tcl= Kiribati Hiç duymadım.

Scheme = Singapur Makro seviyede hijyenik.

Haskell = Monako Çok fazla insan yok ama baya zengin.

Basic = Finlandiya Kolay kullanılabilen fakat çok güçlü olmayan.

Türkiye için düşündüm ama bir karşılık bulamadım. Sizce Türkiye’nin programlama dili karşılığı ne olurdu?

En Çok Kazandıran 10 Programlama Dili

Bilgisayar endüstrisi son 30 yılın en büyük endüstrilerinden biri haline geldi. Dünyanın en zenginleri listesini artık bakkal, market sahipleri değil, Facebook, Microsoft gibi bilgisayar eksenli firmaların sahipleri dolduruyor. ABD’de bir bilgisayar programcısının ortalama kazancı 2015 itibariyle yıllık 100.000$ (~250.000 TL) ile en yüksek seviyeyi görmüş durumda şu an.

Her sene çok fazla sayıda bilgisayar mühendisi üniversitelerden mezun oluyor. Gerçek anlamda aşağıda belirtilen paraları kazananlar ise bu dillere çok iyi hakim olan ve istenilen uygulamaları yazabilenler. Quartz’ın yaptığı araştırmaya göre 2014’ün en çok kazandıran programlama dilleri aşağıdakiler. Siz bunlardan kaçını biliyorsunuz?

10. Visual Basic – 17.491 TL (Aylık)

En Çok Kazandıran 10 Programlama Dili

Yıllık (TL) = 209.897 TL
Aylık (TL) = 17.491 TL

En çok kazandıran programlama dilleri listesinin 10ncu ve son sırasında Microsoft’un geliştirdiği Visual Basic var. Yaklaşık aylık 17.000 TL kazandırıyor Visual Basic kendisini iyi bilip kullananlar.

Visual Basic özetle üçüncü nesil, olay güdümlü programalama dilidir. İlk olarak 1991 yılında yayınlandı. Çıkış noktası olabildiğince kullanımı kolay bir dil sunmaktı. BASIC’ten türedildi. Hızlı bir şekilde grafiksel kullanıcı arayüzlü uygulamalar geliştirmeye olanak sağlar. Data Access objeler kullanarak veritabanlarına da bağlantı kurma imkanı verir. İçeriğindeki komponentler sayesinde uygulamaya kolayca objeler eklenebilir. Visual Basic ile yazılan programlar aynı zamanda Windows API’sini de kullanabilir.

Visual Basic’in son versiyonu 1998 yılında yayınlandı. En son versiyonu 6’dır. IDE’nib pek çok desteği kalkmış olsa bile halen pek çok geliştirici Visual Basic’i Visual Basic .NET’e tercih etmekte.

Piyasada halen VB ile programlar yazılmakta ve dili iyi kullanabilen programcılar istenilen türde uygulamalara VB ile çözüm üretebilmekte.

9. C# – 18.125 TL (Aylık)

Yıllık (TL) = 217.496 TL
Aylık (TL) = 18.124 TL

Visual Basic’in üçüncü nesil programalama dili olduğunu söylemiştik. C# ise multi-paradigmalı bir programalama dilidir. Bu şu demek: C# birden fazla programlama paradigmasını destekler demek. Microsoft’un .NET insiyatifi ile birlikte geliştirilmeye başlandı ve daha sonra ECMA ve ISO tarafından onaylanarak standardizasyon kazandı. Bu dilin çıkış noktası basit, kolay, modern, çok amaçlı ve nesne merkezli bir dil yaratmaktı. Nitekim piyasadaki kullanım oranına baktığımızda Microsoft’un bunu başardığını da söyleyebiliriz. En son yayınlanan C# 5.0 versiyonudur ve Ağustos 2012’de yayınlanmıştır.

Yine bugün piyasadaki bankacılık sektöründen diğer pek sektöre kadar C# aktif olarak kullanılmaktadır. Bu dili iyi bilen ve kullanabilen programcılar yıllık 200.000 TL üzerinde para kazanma imkanına sahip.

8. R – 18.324 TL (Aylık)

Yıllık (TL) = 219.891 TL
Aylık (TL) = 18.324 TL

R istatistiksel hesaplama ve grafikler için kullanılan bir programlama dilidir. İstatistiksel uygulamalar geliştirmek ve veri analizi yapmak için istatistikçiler ve veri mühendisleri arasında oldukça yaygın kullanılan bir dildir. Yapılan araştırmalara ve anketlere göre R’nin kullanımı son yıllarda yükselerek artmaktadır.

R aslında S programlama dilinin bir implementasyonudur. R Yeni Zelanda’nın en büyük üniversitesi Auckland Üniversitesi’nde geliştirildi. Dili geliştiren Ross Ihaka ve Robert Gentleman’ın isimlerinin başındaki R harfinden dolayı dile bu isim verildi. Dil GNU projesi kapsamındadır ve ilk olarak 1993 yılında ortaya çıkmıştır.

Bugün internet ve sosyal ağlar sayesinde saniyede milyarlarca veri üretilmekte. Bu verilen işlenmesi, incelenmesi, analiz edilmesi gibi çalışmalar belki de insanlığın ilerleyişinin en büyük etkenlerinden biri olacak. R programlama dili de burada devreye giriyor. Milyarlarca veriyi işleme, istatistiksel hesaplamalar yapabilme ve bunların grafiklerini oluşturabilme yüksek bir yetenek. R sayesinde bu yetenek daha ileri seviyeye götürülebilir. Piyasada özellikle istatistiğin sık kullanıldığı sektörlerde R oldukça popüler hale gelmiş durumda.

7. C – 18.340 TL (Aylık)

Yıllık (TL) = 220.084 TL
Aylık (TL) = 18.340 TL

C programlama dilinin ve Unix’in babası Dennis Ritchie. Tek kelimeyle müthiş bir insan. C dilini 1972’de ABD’de Bell laboratuvarlarında geliştirdi ve o tarihten sonra tüm zamanların en çok kullanılan programlama dili haline geldi.

C çok amaçlı, imperatif (emir kipli) programlama dilidir. Yapısal programlamayı destekler. D, Go, Rust, Java, JavaScript, Limbo, LPC, C#, Objective-C, Perl, PHP ve Python gibi pek çok dil bazı şeyleri C’den ödünç almıştır.

C daha çok sistem programlamada, embedded sistem uygulamalarında ve işletim sistemlerinde kullanılır. Bu kadar yaygın olmasının bir neticesi olarak pek çok dilin derleyicisi, kütüphanesi ve interpreter’ı C’de geliştirilmiştir. Örneğin Phyton, Perl 5 ve PHP’nin implementasyonları C’de yazılmıştır.

Piyasada C bilen geliştirici sayısı diğer dillere göre çok fazla değildir. Bu da C bilen geliştirici talebinin artmasına ve bu dili bilenlere ödenen ücretlerin yüksek olmasına sebep olmuştur. Çok iyi seviyede C bilen bir programcının aylık geliri yaklaşık 18.000 TL civarındadır.

6. JavaScript – 18.610 TL (Aylık)

Yıllık (TL) = 223.324 TL
Aylık (TL) = 18.610 TL

Çok iyi seviyede JavaScript biliyorsanız aylık 18.610 TL kazanma imkanınız var. JavaScript ya da kısaca JS dinamik bir programlama dilidir. Kullanıcıyla etkileşimi sağladığı için web tarayıcılar üzerinde çok yaygın olarak kullanılır. Sunucu tarafından herhangi bir işlem yapmadan JavaScript ile bütün işlemleri client tarafında halledebilirsiniz. Node.js gibi framework’lerle birlikte server-side network programlamasında da kullanılır. Multi paradigmalı bir dil olmasının yanısıra object-oriented, imperatif gibi stilleri de destekler.

İsim, sintaks ve standart kütüphane benzerliklerinin rağmen Java ve JavaScript birbirinden farklı ve bağımsız dillerdir. Ve çok farklı semantiğe sahiptirler. Pek çok kez bu ikisi karıştırılır. JavaScript’in sintaksı C’den, semantik ve dizaynı Self ve Scheme programlama dillerinden türetilmiştir.

JavaScript kullanımı zevkli, kolay bir dildir. Pek çok web tabanlı oyun, uygulama, site yapılabilir bu dille. Oldukça iyi ve detaylı dökümantasyonu da vardır internette. JavaScript öğrenmeye Code Academy’nin etkileşimli muhteşem JavaScript kursundan başlayabilirsiniz.

5. C++ – 19.025 TL (Aylık)

Yıllık (TL) = 228.308 TL
Aylık (TL) = 19.025 TL

C++ en çok kazandıran programlama dillerinden biri. Listede 5nci sırada. Bu dili yetkin bir şekilde bilen bir programcının ortalama aylık kazancı 19.000 TL civarında. Tabi bu rakam deneyime göre daha da artabilmekte. Üniversitelerin bilgisayar mühendisliği bölümünden veya herhangi bir bölümden veya liseden mezun biri bu dili çok iyi biliyorsa boşta kalmasının imkanı yok gibi.

C++ da diğer pek çok dil gibi çok amaçlı bir programlama dilidir. İmperatif (emir kipli), nesne merkezli ve jenerik programlama özelliklerine sahiptir. Ayrıca düşük seviye bellek maniplasyonuna da izin verir.

Daha çok gömülü sistemlerde, işletim sistemi çekirdeklerinde ve sistem programlamada kullanılır. Bunların yanısıra masaüstü uygulamalarda, sunucularda ve performansın önemli olduğu uygulamalarda da yaygın bir şekilde kullanılır.

C#, Java ve C’nin yeni versiyonları da dahil olmak üzere pek çok dil C++’dan etkilenmiştir.

4. Java – 19.311 TL (Aylık)

Yıllık (TL) = 231.741 TL
Aylık (TL) = 19.311 TL

Java bilmek bir programcı için çok büyük bir yetkinlik sayılabilir. Oldukça güçlü bir dil ve piyasada oldukça rağbet görüyor. C ve C++ gibi çok amaçlı, sınıf tabanlı ve nesne merkezli bir dildir. Çıkış noktası “Write once, run everywhere” yani “Bir kere yaz, heryerde çalıştır”. Yani Java ile yazılan uygulamanın yazıldığı platformdan farklı platformlarda çalıştırılması için tekrar derlenmeye ihtiyacı yok demektir. Java ile yazılan programlar bytecode’a derlenir ve herhangi bir Java virtual machine üzerinde kolaylıkla çalışır.

2015 itibariyle en popüler ve en yaygın kullanılan dillerin başında Java gelmektedir. 9 milyona yakın geliştiricisi ile birlikte daha çok client-server web uygulamarda kullanılan Java’nın daha pek çok kullanım alanı bulunmakta.

Java sintaksının çoğunluğu C ve C++’dan türetilmiştir.

Sektörün en büyük payını alır Java. Piyasada bu dili bilenler ya da şöyle diyelim bu dili iyi bilenler el üstünde tutulur ve oldukça büyük firmalarda iş bulma imkanına sahiptir. Java’yı çok iyi biliyorsanız bir üniversite mezunu bile olmanıza gerek yok aslında. Piyasada kolaylıkla iş bulabilirsiniz zira sektör sağlam Java bilen geliştiriciye henüz doymuş değil.

3. Python – 20.493 TL (Aylık)

Yıllık (TL) = 245.925 TL
Aylık (TL) = 20.493 TL

Python en çok kazandıran programlama dilleri listesinin 3ncü sırasında yer alıyor. İnanılmaz güçlü ve yetenekli bir dil. Yazamayacağınız uygulama yok gibi. Ben de bireysel olarak çok seviyorum Python’u. Okunuşunu bir türlü denk getiremedim. Bazıları Piton diyor, bazılar payton. Fayton diyen de var :). Hangisi kolayınıza geliyorsa o şekilde okuyabilirsiniz.

Python çok-amaçlı, yüksek seviyeli bir programlama dilidir. Tasarım felsefesinde kodun rahat okunabilirliği öne çıkar. Konsepti sayesinde uzun satırlar gerektiren işlemleri birkaç satırda yazabilirsiniz.

Nesne merkezli, imperatif ve fonksiyonel programlama gibi çoklu programlama paradigmasını destekler. Ayrıca otomatik bellek yönetimi ve çok geniş ve kapsamlı kütüphane standartlarına sahiptir.

Google, Yahoo, NASA, CERN gibi büyük şirketlerde de kullanılır bu dil. Web uygulamalar için scripting dili işlevi görür. Django ve Flask gibi güçlü frameworkleri vardır.

3DS Max, GIMP, Paintshop Pro gibi pek çok masaüstü uygulamada da kullanım alanı vardır.

Özetle Python bilip sektörde boşta kalmak imkansız gibi birşeydir. İyi Python bilen bir geliştirici aylık ortalama 20.500 TL kazanmakta.

2. Objective C – 22.021 TL (Aylık)

Yıllık (TL) = 264.257 TL
Aylık (TL) = 22.021 TL

2008 yılında Apple’ın App Store’u kullanıma açmasıyla ve iOS dilini tanıtmasıyla birlikte Objective C dilinin popülerliği çok arttı. Bugün App Store’da bir iPhone ya da iPad vs uygulaması yayınlamak istiyorsanız Objective C bilmeniz işinizi çok kolaylıştıracaktır. App Store uygulamalarının popülerliğinin artmasıyla firmalar ve şirketler burada kendi ürünlerini tanıtmak ya da varolan uygulamalarını buraya taşıma ihtiyacı duydu. Dolayısıyla Objective C bilen geliştiricilerin önemi arttı. 2015 itibariyle Objective C en popüler ve en çok kazandıran 2nci dil. Eğer bu dile çok iyi hakim iseniz istediğiniz iPhone, iPad uygulaması yazabilir ve App Store’da yayınlayabilirsiniz.

Dili öğrenmek isterseniz Code School’un çok öğretici, interaktif bir online kursu var.

1. Ruby on Rails – 22.272 TL (Aylık)

Yıllık (TL) = 267.273 TL
Aylık (TL) = 22.272 TL

Ruby on Rails en çok kazandıran programlama dillerinin başında geliyor. Ruby on Rails bilen bir geliştirici aylık ortalama 22.000 TL kazanabiliyor. Aslında Ruby on Rails bir programlama dili değil. Ruby ile yazılmış açık kaynak kodlu web uygulaması framework’ü. Kısaca Rails de deniyor. 2005 yılında ilk olarak yayınlandı.

Bugün piyasada bu frameworkü etkili bir şekilde kullanan ve çok iyi bilen yazılımcılar el üstünde tutuluyor diyebiliriz. Pek çok büyük firma bu frameworkü kullanmakta. Örneğin Twitter Ruby on Rails kullanıyor diye biliyorum. Her işlemin anlık yapıldığı ve hızın ve performansın çok önemli olduğu Twitter’ın Ruby on Rails kullanması bu framework için çok büyük bir referans.

Ruby on Rails öğrenmek için resmi sitesine başvurabilirsiniz. Oldukça kapsamlı bir dökümantasyonu ve kod örnekleri mevcut.