miratcan

[miratcan]

Vaaay

[miratcan]

2013 yılından Mirat fotosu, beyaz saçsız halim.

[miratcan]

2012 yılında bu fotoğrafı çekmişim. Bostancı'daki kızılay olmalı doktor kontrolüne gitmiştim.

[miratcan]

Blog yazmayı neden bıraktınız? Devam ediniz.

Peki

[miratcan]

Merhabalar. Az bucuk python biliyorum ve bazı kutuphaneler ogrenmeye basladım django felan gibi. Fakat nodejs veya tornado gibi web application tarzı seyler cok hosuma gidiyor,ogrenmekten, ugrasmaktan zevk alıyorum. Sizce nodejs mi tornado mu demeyecegim cunku blogunuzda bunu acıklayarak tornado demişsiniz haklı olarak. sizce tornado yerine flask ile baslamak ne derece mantıklı.yoksa direk tornado mu dalmalıyım djangodan sonra?

O yazı baya eski, flask ile başla hatta fastapi ile başla diyebilirim.

[miratcan]

Çukur dizisindeki hacker sahnesinde akan kod Mississippi üniversitesinin web sitesinde yayınlanmış örnek kod parçacığı. Ada dilinde integer tipi stack kullanma mantığını göstermek için paylaşılmış. Kodun tamamina şuradan göz atabilirsiniz:

http://sandbox.mc.edu/~bennet/ada/examples/int_stack_user_adb.html

[miratcan]

İnternette Gezerken Bitcoin Kazanmak

Reddit'de gezerken gördüğüm Cyptobrowser adındaki browser'ı deniyorum şu an. Bu browser'ı kullanırken internette gezerken boşta kalan işlemci gücümüzü bitcoin kazmak için kullanarak para kazanabiliyormuşuz.

Bir kaç saat boyunca günlük işlerimi yaparken bana kazandırdığı miktarı şu oldu:

Tamam kazanç çok çok az ancak günlük işlerimi yaparken sadece işlemci gücümü kullanmasına izin vererek bu şekilde kolayca bir şeyler kazanmak çok çok ilginç bir şey. Öte yandan bir browser olarak ilk açılışta getirdiği konfigurasyonları da çok beğendim. Bir ay sonra falan toplam kazancımın ne olduğunu paylaşmayı düşünüyorum.

Şuradan indirip siz de deneyebilirsiniz: https://cryptobrowser.site

[miratcan]

Bu yaşımda hala beni yoran sorulardan biri "ben kimim" sorusu. Bu video bu soruyu nasıl sormamız gerektiğini çok güzel anlatıyor. Adam özetle diyor ki "Sen hayattaki en büyük projen neyse osun". Çok şiddetle tavsiye ediyorum.

[miratcan]

Yazılımcı olarak staj yapmak isteyenlere tavsiyeler.

Stajer ya da yazılım işçisi arayan kişilerin hoşuna gidecek şeyler şunlar:

CV'nizin Word formatında değil, PDF formatında olması.

PDF bir dağıtım formatıdır. Yani karşı tarafa bir belgeyi editlemesi için değil incelemesi/okuması için gönderiyorsanız Word belgesi olarak yollamamalısınız. Bu internet kültürünün basit kurallarından biridir.

CV'nizde imla hatası olmaması.

Elime geçen bir çok CV'de en basit imla kurallarına dikkat edilmediğini görüyorum. İmla hatası direkt elenmenize yol açabilir. Oysa düzgün yazmak zor değil.

CV'nizin 1 sayfadan uzun olmaması.

IK elemanı olduğunuzu düşünün gün içerisinde 100 tane CV inceleyeceksiniz. Önünüze gelen 4 sayfalık CV'yi görünce oflaya puflaya okumaya başlarsınız değil mi? Bu negatif his içerisinde okumaya başladığınız CV'yi nasıl değerlendirirsiniz?

Kısa öz, ama bilgilendirici CV iyidir.

Yapmaktan heyecan duyduğunuz şeylerden bahsetmeniz.

Mail grubunda ya da herhangi bir konuşma sırasında yeri geldiğinde okulda yaptığınız şeylerden bahsetmeniz insanların sizi tanıması konusunda büyük kolaylık sağlayacaktır. LUA ile platform oyunu yaparken çok mu eğlendiniz? Yoksa okulda kartondan asansör yapıp doğru katta durmasını sağlamaya çalışırken mi?

Github hesabınızın olması, yazdığınız bazı kodları yayınlamış olmanız.

Github'da kod paylaşmış olmanız iyi olur dediğimde hemen akla büyük bir proje ya da kütüphane yazıp paylaşmak geliyor. Oysa yazdığınız küçük scriptleri de Gist olarak paylaşabilirsiniz.

Fibonacci sayılarını bulan kodunuz olabilir, bubble sort yapan kodunuz olabilir, kelimeyi hecelerine ayıran kodunuz da olabilir.

Bunları paylaşırsanız sizi tanımaya çalışacak insanlara nasıl düşündüğünüzü, kodlama standartlarına ne kadar uyabildiğinizi nelere özen gösterdiğinizi için büyük fırsat vermiş oluyorsunuz.

[miratcan]

Kızımın Sevdiği Ninniler: Pullu Tepe

Kızım olana kadar bir tane sevdiğim türkü sayamazdım. Kızım seviyor, o sevince ben de seviyorum. Ben bunu söyleyince hemen uyuyor mesela.

Bu Barış Erdinç adlı arkadaşın söyleme-çalma tarzının çok beğeniyorum bu arada. Bu eser bir ninni olarak geçiyor diğer yorumcuların yaptığı gibi bağıra bağıra söylenecek bir şey değil.

[miratcan]

Kod + Sanat

Şimdi ben pek kıskanma duygusuna aşina değilim, ergenliğimde falan da hiç idolüm olmadı. Ancak bir kişi var ki yaptığı işlerle biraz beni kıskandırıyor. Kendisi bilgisayar teknolojilerini kullanarak yazılım ve donanımlar oluşturarak sanat eserleri üreten biri. Radiohead'in Hause of Cards klibinin kodunu yazdı mesela. Sitesindeki paylaştığı kodlardan anladığım processing ve C++ kullanıyor.

Aşağıda Hubble teleskobundan gelen fotoğraflarla eğittiği yapay sinir ağının webcam'den aldığı görüntüleri kendi bilgisiyle gerçek zamanlı olarak yeniden inşa ettiği bir çalışma var.

Sitesinde ve vimeo hesabında yaptığı işleri bulmak mümkün.

[miratcan]

Python ile Basit Blockchain Yapımı

Aşağıda şu blockchain demosudan anladığım kadarıyla bir blockchain implementasyonu yaptım. Soru olursa yazabilirsiniz.

from hashlib import sha256 from time import time HARDNESS = 4 VALID_BLOCK_PREFIX = "0" * HARDNESS def is_valid_hash(hash_str): return hash_str.startswith(VALID_BLOCK_PREFIX) class Block(object): def __init__(self, prev_hash, data): self.nonce = 0 self.data = data self.prev_hash = prev_hash self.curr_hash = self.calc_hash(self.nonce) def is_valid(self): return is_valid_hash(self.curr_hash) def calc_hash(self, nonce): hash_str = str(nonce) + self.prev_hash + self.data return sha256(hash_str.encode('utf-8')).hexdigest() def mine(self): t1 = time() new_nonce = self.nonce while True: new_hash = self.calc_hash(new_nonce) if is_valid_hash(new_hash): break new_nonce += 1 t2 = time() print('Block mined in {} seconds ({} iterations).'.format( t2 - t1, new_nonce - self.nonce)) self.nonce = new_nonce self.curr_hash = new_hash class BlockChain(object): def __init__(self): self.chain = [] def add_block(self, data): if len(self.chain) > 2: prev_hash = self.chain[-1].curr_hash else: prev_hash = '0' * 64 block = Block(prev_hash, data) block.mine() self.chain.append(block) blockchain = BlockChain() blockchain.add_block( 'Ben manevî miras olarak hiçbir nas-ı katı, hiçbir dogma, hiçbir ' 'donmuş, kalıplaşmış kural bırakmıyorum. Benim manevî mirasım ilim ve ' 'akıldır. Benden sonra beni benimsemek isteyenler, bu temel mihver ' 'üzerinde akıl ve ilmin rehberliğini kabul ederlerse manevî ' 'mirasçılarım olurlar') blockchain.add_block( 'Bütün ilerlemeler, insan fikrinin eseridir. Fikri harekete getirmek, ' 'birinci işimiz olmalıdır. Bir kere millet benliğine hakim olsun ve ' 'düşünebilsin, yeter! Başlangıçta hatalı düşünse de, az zaman sonra bu ' 'hatayı düzeltebilir. Fikir bir kere faaliyete başladı mı, her şey yavaş ' 'yavaş düzene girer ve düzelir. Fikrin serbest hareketi ise, ancak ' 'bireyin düşündüğünü serbest olarak söylemek, yazmak ve verdiği karara ' 'göre her türlü girişimde bulunmak serbestisine sahip olmakla mümkündür.' ) blockchain.add_block( 'Büyüklük odur ki hiç kimseye iltifat etmeyeceksin, hiç kimseyi ' 'aldatmayacaksın, memleket için gerçek ülkü neyse onu görecek, o hedefe ' 'yürüyeceksin. Herkes senin aleyhinde bulunacaktır. Herkes seni yolundan ' 'çevirmeye çalışacaktır. İşte sen bunda karşı koyuşları yok eden ' 'olacaksın. Önüne sayılamayacak güçlükler yığacaklardır. Kendini büyük ' 'değil küçük, zayıf, araçsız, hiç sayarak, kimseden yardım ' 'gelmeyeceğine inanarak bu güçlükleri aşacaksın. Ondan sonra sana ' '"büyüksün" derlerse, bunu diyenlere de güleceksin.') blockchain.add_block( 'Dünyada her şey için, maddiyat için, maneviyat için, hayat için, ' 'başarı için en hakikî yol gösterici ilimdir, fendir. İlim ve fennin ' 'dışında yol gösterici aramak gaflettir, cahilliktir, doğru yoldan ' 'sapmaktır. Yalnız ilmin ve fennin yaşadığımız her dakikadaki ' 'safhalarının gelişimini anlamak ve ilerlemeleri zamanında takip etmek ' 'şarttır') print("-" * 80) for block in blockchain.chain: print('BLOCK: {}\nDATA: "{}"\nIS_VALID: {}\n'.format( block.curr_hash, block.data, block.is_valid()))

[miratcan]

Baba oldum.

Baba olacağımı duyduğum zaman şu filmlerdeki haberi duyunca havalara uçan baba tipi vardır ya. Bana tam tersi oldu. Salonda oturuyorken "Evin babası gibi yerleştim şu koltuğa he" diye yaptığım şakanın ardından hatunun "belki de gerçekten baba olacaksındır" dediği anda kafamın içinde o kadar çok ses aynı anda konuşmaya başladı ki sevinemedim bile. Nasıl doğacak, nasıl bakacağız, benim kadar unutkan biri nasıl yapacak, hanım da şahsına münasır zaten, hazırlık sınıfını nasıl geçecek, ülkenin durumu vahim, bu çocuk ne yer ne içer, ergenlikte benim yaptığım kadar artislik yapar mı?

Susmuyor sesler delireceğim. Başıma ağrı saplandı. Beynim gaz pedalı takılmış arabaya döndü durduramıyorum. Bana bir şeyler söyleniyor duyamıyorum bile. Sonra ultrasona gittik. Ellerini gördüm ağlamaya başladım. Kafamın içindeki gürültü en sevdiğim şarkıya dönüştü o anda.

[miratcan]

Kaş'da küçük çakıl adında bir plaj vardır. Yüzmeyi orada öğrendim sayılır en az 16 yıl olmuştur.

O zaman sanıyorum yanındaki tesisler çok basit şekilde inşa edilmişti. İki tane kayalığın ortasındaydı deniz.

Abimlerin o kayaların kenarından suya balıklama atladığını hatırlıyorum. Bense kenarda durup bir türlü cesaret edemiyordum. Ne zaman şu parçayı dinlesem yine o kayaların üzerinde duruyor cesaretimi toplamaya çalışıyorum.

[miratcan]

React Native Notları

React Facebook tarafından ortalara atılmış bir javascript kütüphanesi. MVC desenli tasarımlarda V (View) katmanını oluşturduğu söylense de redux gibi kütüphanelerle birleştiğinde başlı başına bir çalışma tasarım şemasına sahip olduğunuz söyleniyor. Bu yazıda sıfırdan başlayarak react native ile bir uygulama geliştirmeye çalışacağız.

Okumadan Önce:

Hedef işletim sistemim Android, geliştirme yaptığım işletim sistemi ise OSX olacak. Bu yüzden örneğin IOS için geliştirme yapmak istiyorsanız bu yazı bir yere kadar yeterli olacaktır. Geliştirme yaptığınız sistemde NodeJS, NPM, Watchman ve Homebrew kurulu olmalıdır. Eğer kurulu değillerse aşağıdaki komutları kullanarak yükleyebilirsiniz:

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" $ brew install nodejs watchman

Getirileri:

JSX adında bir markup dili getiriyor, bunu kullanmak zorunlu olmasa da şiddetle tavsiye edilmekte. Ha HTML yerine kullanılması avantajlı mı? Tartışılır.

React bir web sayfası ya da uygulamayı tasarlarken HTML etiketleri olarak değil de görünüm bileşenleri (componentleri) tasarlamanızı sağlıyor. Ne faydası var diyecek olursanız, bileşenler bir kere düzgün tasarlandıktan sonra farklı projelerde kullanılabiliyorlar. Örneğin hesap makinesi adında büyük bir bileşen yaparsanız bunu yaptığınız farklı farklı uygulamalara takabiliyorsunuz.

Çift Taraflı Veri Akışı: React componentlerin veriden yola çıkarak gösterimini, aynı zamanda da verinin componentlerin durumuyla güncellenmesini sağlayabiliyor. Bunu flux adında bir kütüphane ile yapıyor.

Avantajları:

Tek kod yazarak birden fazla platform için native uygulama çıkartmak.

React ile ilgili dönen çay kahve muhabbetlerinde bile söylenir ama ben yine de burada tekrar edeyim: React web sayfalarını render ederken gerçek DOM'u değil de kendi salan DOM'unu kullanıyor ve burada güncellemeleri değişiklikleri yaptıktan sonra gerçek DOM'a bu değişiklikleri aktarıyor. Bu da muazzam bir performans artışı demek.

React sunucu ve istemci tarafında kullanılabiliyor. React ile hazırladığınız componentler sonradan render edilmek zorunda değil.

Component ve veri tipleri javascript kodunun okunabilirliğini arttırıyor.

Sınırlamaları:

React sadece view katmanını temsil ettiği için geliştirme ortamınızı tamamlamak adına başka kütüphanelere ihtiyaç duyabiliyorsunuz. React'ın kullandığı JSX markup dili bazı geliştiricilere acayip gözükebiliyor.

GELİŞTİRME ORTAMININ KURULMASI

Şimdiye kadar yaptığım denemelerde geliştirme ortamının kurulması bana geliştirme yapmanın en zor kısmıymış gibi geldi. Zira Android SDK'nın ve SDK içerisinde bulunması gereken paketlerin kurulumunu anlatan birden falza döküman var.

ADIM 1 - GLOBAL GEREKLİ PAKETLERİN KURULMASI:

Öncelikle babel pakedini kurmanız gerekiyor. Bu paket javascript yazarken ES6 standardını kullanabilmenizi sağlıyor. ES6 standardı ile yazdığınız javascript kodunun eğer broser desteklemiyor ise downgrade edilmiş bir versionunu compile ediyor. Artık modern javascript yazmak için babel kullanmak zorunlu gibi bir şey.

$ npm install -g babel babel-cli react-native-cli

NOT: Bazı yerlerde React Native ES2015 standardını kullanıyor gibi bir şeyler okuyabilirsiniz. ES2015, ES6'nın draft hali yani ES6 standardının bitirilmeden önceki halini ifade ediyor.

ADIM 2 - ANDROID SDK'NIN KURULUMU:

Yazacağınız uygulamaların telefonda ya da bir telefon emülatöründe çalıştırılması gerekiyor. Eğer yazdığımız kodların sonucunu sanal ya da değil bir Android makine üzerinde görmek istiyorsanız (benim senaryomda istiyoruz) Android SDK'nın kurulumunu yapmamız gerekiyor.

$ brew tap caskroom/cask $ brew cask install android-sdk

Brew güzel alet, Android SDK'nın çıplak haliyle kurulumunu yaptık. Ardından yapmamız gereken şey ise ANDROID_HOME ortam değerinin set edilmesi. Bu değer Android SDK'yı kurduğunuz yer olmalı.

Unix sisteminizde aşağıdaki satırı (eğer yoksa) ~/.bashrc, ~/.bash_profiel ya da fish kullanıyorsanız adını hatırlamadığım başka bir dosya içine yazmanız gerekiyor:

export ANDROID_HOME=/usr/local/share/android-sdk

Burada tekrar hatırlatmamda fayda var verdiğimiz yolun SDK'nın kurulu olduğu yeri göstermesi gerekiyor. Kontrol edip yolu ona göre gerekiyorsa değiştirin.

Bu değişkeni doğru olarak değiştirdiyseniz aşağıdaki komutun çıktısı şunun gibi olmalıdır:

ls $ANDROID_HOME INSTALL_RECEIPT.json add-ons build-tools extras platforms sources temp README bin etc platform-tools samples system-images tools

Bu aşamadan sonra SDK için çeşitli paketlerin yüklenmesi gerekiyor. React Native'in kendi dökümantasyonu bu konuda biraz eski, şu an baktığımda Android Studio kurmaya, oradan görsel arabirim üzerinden çeşitli kütüphaneleri elle yüklemeye yönlendiriyor ama bunlara gerek olmadığını gördüm. Eğer Android SDK doğru bir şekilde kuruldu ve tanımlandıyda ilk çalıştırma sırasında React Native gerekli paketleri kuruyor.

ADIM 3 - TELEFONUN TANITILMASI

Bu işlem basit, Android telefonunuzun önce geliştirici modunu açacak. Sonra da USB den bilgisayarınıza bağlayacaksınız. Bu işlemleri yaptıktan sonra şu komutu verdiğinizde şunun gibi bir çıktı görmelisiniz:

#terminalde adb devices List of devices attached TELEFON MODELI

Eğer telefonunuz bu listede gözükmüyorsa emin olmanız gereken şeyler şunlar.

Telefonunuz USB ile bağlı olmalı.

Telefonunuz sadece şarj ya da fotoğraf makinesi modunda değil MTP modunda bağlı olmalı.

Telefonunuzun geliştirici seçenekleri açık olmalı.

Geliştirici seçenekleri içerisindeki USB üzerinden hata ayıklama seçeneği açık olmalı.

Eğer bütün bunları sağladıysanız ve yine de bilgisayarınız bir cihaz görmüyorsa, telefonunuzu bilgisayarınızdan ayırın, adb servisini öldürün, telefonunuzu takın ve tekrar adb devices komutunu verin. Benim telefonum USB kablosu her çıkarıldığında USB Üzerinden Hata Ayıklama seçeneğini kapatıyor, eğer çıkar tak yaptıysanız hata ayıklamanın hala açık olduğundan emin olun.

Bu arada sanal bir Android makine oluşturup bunun üzerinde geliştirme yapmak da mümkün ancak ben bu şekilde, gerçek bir telefon üzerinde çalışmayı daha mantıklı buldum. Sanal makine için -zaten gerçeği varken- CPU, disk alanı, RAM harcamak, geliştirme yaparken sürekli tab yaparak ya da pencereleri hizalamaya çalışarak sanal makineyi takip etmektense bilgisayarın yanına telefonunuzu koymak ve değişiklikleri oradan takip etmek çok daha mantıklı geldi bana.

REACT NATIVE ILE PROJENIN BAŞLATILMASI

Yukarıdaki adımları takip ettikten sonra artık react-native komutu bizim için çalıştırılabilir olmalı:

$ react-native init ReactHello

Bu komut baya bir indirme yapıyor ve bana çok devasa gözüken bir dizin ağacı yaratıyor. Daha hiç bir şey yapmadan 22.700 tane dosya oluştu proje dizinimin içinde. Bu bana biraz sevimsiz geldi açıkcası ama soğuyup bırakacak değilim.

$ cd ReactHello $ ReactHello/ $ ls __tests__ app.json index.ios.js node_modules <figure data-orig-height="462" data-orig-width="260" data-orig-src="https://kylewbanks.com/images/post/react-native-tutorial-1.png"><img src="https://64.media.tumblr.com/b1f4680b00fab0ef18c6b2e43994c9c6/tumblr_inline_p7gxxpFnO81qdjsvv_540.png" data-orig-height="462" data-orig-width="260" data-orig-src="https://kylewbanks.com/images/post/react-native-tutorial-1.png"></figure>

Bu ekrandayken telefonu salladığınızda karşınıza çeşitli geliştirici seçenekleri çıkacak. Bunları biraz kurcalayın ne olduğunu anlamaya çalışın. İlerde lazım olacaklar.

Hello World

Şimdi yukarda index.android.js ve index.ios.js dosyalarımızın bulunduğunu, bunların iki farklı cihaz için üretilmiş kodlar olduğunu söylemiştik. Şimdi bu iki dosyayı sıfırlayıp baştan yazarak React'ın ve React Native'in nasıl çalıştığını biraz inceleyelim. İki dosyanın da içini boşaltın ve aşağıdaki satırları ekleyin:

import React, { Component } from 'react'; import { Text, AppRegistry } from 'react-native';

Şimdiye kadar sadece kurulumla konfigurasyon ile geçirmiştik zamanımızı, şimdi ise ilk defa elimizi taşın altına attık ve Javascript yazmaya başladık. React Native Javascript yazımında ES6 standardını kullanıyor. Yukarıdaki kod parçacığındaki import yönergeleri de bu standarda ait yönergeler. Daha önce görmediyseniz şöyle basitçe açıklayayım. 'react' pakedinden React ve Component'i, react-native pakedinden de Text ve AppRegistry dosyalarını import ediyoruz. Eğer bir paketten export edilmemiş bir şeyi import etmeye çalışıyorsak bunu kıvrımlı parantezler içinde yazıyoruz. ES6'daki import yönergeleri için Mozilla vakfının dökümanına göz atabilirsiniz.

Bu arada yeri gelmişken söyleyeyim bu yazıyı yazarken-React ortamını incelerken ES6 spesifikasyonuna aşina oldum. Neredeyse Javascript çok güzel olmuş diyeceğim. Dili bütün saçmalıklarından ayıklamışlar.ES6 hakkında daha fazla bilgi sahip olmak için şu ve şu sayfalara göz atabilirsiniz. Ayrıca bunları okumak sıkıcı gelirse Üstün Özgür'ün Youtube'da çok güzel bir sunumu var.

Şimdi devam edelim ve ilk bileşenimizi (componentimizi ekleyelim). Component dediğimiz şey aslında bir gösterimi ifade eden sınıf. Bu sınıflar alt sınıflara sahip olabiliyor. Bir hesap makinesi bileşeni yaratıp, o bileşenin içerisine de tuş bileşenlerini koyabiliyoruz mesela.

class ReactHello extends Component { render() { return ( <text>Selam, React!</text> ) } }

Burada ReactHello sınıfı Component ana sınıfından türemekte. Bu syntax'da ES6'nın bir hediyesi bu arada. Neyse, göreceğiniz gibi sınıfımız (ya da bileşenimiz) sadece bir render fonksiyonuna sahip, ve bu fonksiyon içerisinde XML benzeri bir yazım dili içeriyor, adı da JSX. Bunun ne olduğunu birazdan anlatacağım biz şimdilik devam edelim.

Son olarak yapmamız gereken şey componentimizin, uygulamamızın ana görünümü olduğunu belirtmek. Bunun için şöyle bir hareket çekiyoruz.

AppRegistry.registerComponent('ReactHello', () => ReactHello);

Burada uygulamamızın sahip olduğu bileşeni uygulamamızın ana bileşeni olarak belirlemiş oluyoruz. React Native projenin klasör adını projenin ana bileşen ismi olarak kullanıyor. Yani klasör ismimiz 'ReachNaber' olsaydı register ederken:

AppRegistry.registerComponent('ReactNaber', () => ReactHello);

Şeklinde kaydedecektik. Neticede uygulamamızın son hali şu şekilde olmalı:

import React, { Component } from 'react'; import { Text, AppRegistry } from 'react-native'; class ReactHello extends Component { render() { return ( <text>Selam, React!</text> ) } } AppRegistry.registerComponent('ReactHello', () => ReactHello);

Şimdi uygulamamızı tekrar run komutu vererek çalıştırabiliriz, ya da hiç kapatmadıysak telefonu sallayıp, çıkan menüden reload edebiliriz. Ekrana selam, React! yazmaktan başka hiç bir şey yapamayan rezil uygulamamızın çalışıyor olması lazım.

Daha Kolay Bir Test Ortamı Edinelim

Ben genelde yazılarımı ve bu tip denemelerimi işe giderken serviste yazıyorum. React native ile yaptığım denemeleri testleri snack.expo.io üzerinden yapıyorum. Normal geliştirme ortamından tek farkı App adında bir bir bileşenin ana bileşen olarak belirlenmesi gerekliliği. Bu bileşen kodda var olduktan sonra herhangi bir register işlemi yapmak gerekmiyor. (Normalde geliştirme yaparken projenin bulunduğu klasörün ismiyle aynı isimde bir bileşen koymamız ve kayfetmemiz gerekiyordu)

snack.expo.io adresine girdiğinizde size verilen öntanımlı "hello world" kodunu değiştirerek hemen bir şeyler denemeye başlayabilir. Preview kaydırmasını değiştirerek sanal telefon üzerinde kodu çalıştırabilir, öte yandan bileşen galerisindeki bileşenleri sürükleyip kodun içine bırakarak ön tanımlı propertylerin ve fonksiyonların oluşmasını sağlayabilirsiniz.

JSX

Şu return ettiğimiz XML benzeri yazım var ya. Bu yazım JSX olarak adlandırılıyor. HTML de değil Javascript de değil. React tarafından sunulan bir Javascript eki (kütüphane değil). Javascript notasyonuna uymuyor. Bu yüzden de beni biraz rahatsız etti açıkcası. Bir JSX bloğu yazarken aslında React yazdığımız kodu şunun gibi bir çevrime sokuyor:

// JSX Kodu: <mybutton color="blue" shadowsize="{2}"> Click Me </mybutton> // Javascript Çıktısı: React.createElement(MyButton, {color: 'blue', shadowSize: 2}, 'Click Me')

Yani derleme işlemi yapılana kadar editör içinde Javascript, JSX karışık bir syntax görüyorsunuz. Bunun eleştirilecek bir kaç yönü var. Yıllarca tasarım, yazım ve mantığı ayırmaya uğraşmış ve bunu başarmışken böyle bir kod yazmak tarih öncesine dönmüş gibi hissettiriyor. JSX yazarken dikkat etmeniz ve hep hatırınızda tutmanız gereken şey çalışma aşamasına gelindiğinde Javascript koduna dönüşecek bir şey yazdığınız. Bu yüzden örneğin eğer bir değişken kullanıyorsanız bunun JSX'in içinde bulunduğu scope'da tanımlı olması gerekiyor. Ha evet tam yeri geldi şu anda, JSX içerisinde değişkenler ve ifadeler kullanabiliyoruz:

import React, { Component } from 'react'; import { Text, AppRegistry } from 'react-native'; class ReactHello extends Component { render() { let name = 'Mirat'; return ( <text>Selam, React! ben {name} Üç artı beş {3+5} eder.</text> ) } } AppRegistry.registerComponent('ReactHello', () => ReactHello);

Kullanmak istediğimiz değişkeni ya da ifadeyi {} içerisinde yazmamız yeterli oluyor.

Bileşenleri Anlamak

Bileşenler aslında birer view fonksiyonu demiştik. Yukarda bileşen tanımlarken döndürdüğümüz Text etiketi aslında Text adındaki başka bir React bileşenini çağırıyor. Her bileşenin kendi özellik ve durumu var. Özellikler (property) bir component oluşsun çağrsı yaptığımızda dışardan gönderilen parametreler oluyor ve bunlar bileşenin yaşam döngüsü içerisinde değiştirilmiyorlar. Durumlar ise (state) bileşenin o anki durumunu ifade eden değişkenleri ifade ediyor ve yaşam döngüsü içerisinde değiştirilebilir oluyor.

Örneğin bir oyun yapıyoruz diyelim ve Ninja adında bir bileşen oluşturduk. Ninjanın elinde bir silah var ya da hiç bir şey yok. Ninjamızın elinde ne olduğu ya da olmadığı varlığı süresince değiştirilebilir bir şey olduğu için durum (state) olarak tanımlanabilir. Ninjamızın ismi ise değişmez bir şey olduğu için (oyunumuzda dava açıp kendi adını değiştiremiyor olduğu için) Bu ise bir özellik olur. Şimdi bu ninja örneği üzerinden React Native componentimizi yazmaya çalışalım.)

import React, { Component } from 'react'; import { Text } from 'react-native'; class Ninja extends Component { render() { return ( <text>Ben bir Ninjayım Adım {this.props.name} ve şu an elimde XXX var.</text> ) } } class ReactHello extends Component { render(){ return( <ninja name="Mirat"></ninja> ) } } AppRegistry.registerComponent('ReactHello', () => ReactHello);

Şimdi ilk aşama olarak sadece bir adet "name" adında özelliği olan "Ninja" adında bir bileşen yazdık. Bu bileşenimizi de uygulamamızın ana bileşenine taktık. Bu bileşene dışardan verilen "name" özelliğine {this.props.name} yazarak ulaştık. React native ile uygulama tasarlarken bir ana bileşen ve ona üst üste eklenen bileşenler olarak tasarlamak gerekiyor. Bunun haricinde farklı ekranlar arası geçişler için Navigator adında bir bileşen var. Bu bileşen sayesinde farklı sayfalar ve bu sayfalar arası geçişler yapabiliyoruz.

Neyse konumuza geri dönelim, özellik tanımlamaları yukarda bahsettiğim şekilde gerçekleşiyor. Şimdi weapon adında bir state ekleyelim:

import React, { Component } from 'react'; import { Text, View } from 'react-native'; class Ninja extends Component { constructor() { super(); this.state = { weapon: 'Bıçak' } } render() { return ( <text>Ben bir Ninjayım Adım {this.props.name} ve şu an elimde {this.state.weapon} var.</text> ) } } export default class App extends Component { render(){ return( <view style="{{flex:" justifycontent: alignitems:><ninja name="Mirat"></ninja></view> ) } }

Burada bir constructor method ekle

Kaynaklar:

https://www.tutorialspoint.com/react_native/

https://facebook.github.io/react-native/releases/0.23/docs/android-setup.html

https://kylewbanks.com/blog/react-native-tutorial-part-1-hello-react

https://facebook.github.io/react-native/docs/getting-started.html

https://benmccormick.org/2015/09/14/es5-es6-es2016-es-next-whats-going-on-with-javascript-versioning/

https://www.youtube.com/watch?v=Vp4K03xWsgE

https://facebook.github.io/react/docs/components-and-props.html

https://facebook.github.io/react/docs/jsx-in-depth.html

https://ysfzrn.gitbooks.io/react-native-turkce/

[miratcan]

PostgreSql’de uzaktaki tablodan veri kopyalamak.

Uzaktaki veritabanından tablonun tamamını değil de bir kısmını kopyalamam gerekiyordu. Bu konuda çeşitli çözümler var. pg_dump ile tablonun tamamını alıp regex uygulamak, db_link denen zımbırtı ile yerel db'den uzak db'ye sorgu atmak falan. En kolayının COPY olduğunu gördüm. Basitçe bir sorgu yapıp çıktısını CSV olarak almak, sonra da yerelde CSV dosyasını içeri sokmak yani.

CSV çıktısını almak için:

\copy (select * from ...) TO '/tmp/tblname.csv' DELIMITER ',' CSV HEADER;

CSV çıktısını yerele sokmak için:

COPY tblname FROM '/tmp/tblname.csv' CSV HEADER;

[miratcan]

BEM Metodolojisi

BEM (Block Element Modifier) frontend dünyasından çıkma bir css yazma stratejisi. Amacı css yazımını, html etiketlerinin sınıflandırılmalarını daha okunabilir bir şekilde yapmak.

Eğer bir yerlerde css yazımında header__form—email gibi bir kullanım gördüyseniz BEM yazımıyla tanışmışsınız demektir. Şimdi bu yazımdaki elemanları görelim:

BLOCK

Blokları sayfadaki büyük divler, taşıyıcılar olarak düşünebiliriz. Hani genelde header, content, footer adıyla büyük bölümlere ayrılır içerisinde daha küçük bölümler olur ya, bu büyük bölümlere block adını veriyoruz.

ELEMENT

Bloklar içerisindeki daha küçük elemanlara element adı veriliyor. BEM'e sadık yazımda her eleman .[ait olduğu blok]_[eleman] şablonuyla yazılıyor. Örneğin:

.header__navigation {}

Header bloğu içerisindeki logo elemanını temsil ediyor. Burada önemli olan isimlendirmeleri mümkün olduğunca basit ve anlaşılır tutmak.

MODIFIER

Spesifik bir elemanı modifiye etmek istediğinizde kullanılan alt başlık da bu oluyor. Modifier'lar isimlendirmenin sonuna iki tane tire işareti konduktan sonra yerleştiriliyor. Örneğin:

.header__navigation--secondary {}

Header bloğu içindeki navigasyon elemanını, ama ikinci elemanı belirtmek istediğimizde kullanıyoruz bunu. Header blok, navigation element, secondary de modifier oluyor. Bunu icat eden ve moda haline getiren vatandaşlar bunun çok okunabilir bir yöntem olduğunu DRY prensibine uymayı kolaylaştırdığını iddia ediyorlar. Son olarak şöyle bir örnek vereyim:

.navigation__label { background: #eee; border-radius: 505; color: #333; font-size: 1rem; } .navigation__label--alarm { background: #da4531; color: #fff; }

Böyle bir kullanımda yani 24 karakterli bir isimlendirme yaparken nasıl kodu rahat okuyacağız benim pek aklım almadı açıkcası. Ancak yine de bilmekte fayda var. Daha fazla bilgi için şurayı okuyabilirsiniz: https://en.bem.info/methodology/quick-start/