Sizinde bildiğiniz gibi eğer iş için kodluyorsanız bu kodlama ihtiyaca göre yapılır, canım istedi, sıkıldım gidipte bir oyun oyun yazayımdan ziyade bir ihtiyacı gidermeye yönelik çalışmalar sürdürürsünüz. Bu örnekte’de aynı durum geçerli aslında, böyle bir oyunlaştırma kurgusuna ihtiyacım vardı, internet üzerinde onlarca örnek buldum, fakat neredeyse herkes kendi makinesini aynı algoritmayı, aynı denklemleri kullanarak oluşturmuş, elbette farklı olanlarda var fakat onların çalışma sistemleri de çok karmaşık.

Bu noktada arayarak bir sonuca ulaşamayacağımı anladım ve zaman kaybetmemek için kendim hazırlamadığımı, ama ararken zaten zaman kaybettiğimi farkettim ve böylece işin sonunda çok basit bir algoritmayla yazılmış bu oyun çıktı, bende aynı duruma düşüp sizde vakit kaybetmeyin diye detaylı bir şekilde anlatarak sizlerle paylaşmak istedim. Lafı daha fazla uzatmadan anlatıma geçiyorum.

Yazı İçeriği

• Slot makinesi nedir/nasıl çalışır?
• HTML Kodlarının Yazılması
• Javascript Kodlarının Yazılması
• Kazanma Kontrolü
• Fonksiyonların Çağırılması

Slot makinesi nedir/nasıl çalışır?

Muhtemelen herkes slot makinesinin ne olduğuna aşinadır fakat biz yinede kısaca bahsedelim.

Slot makinesi ya da diğer adıyla meyve makinesi, popüler bir kumar makinesidir. Makinenin ekranında üç ya da daha fazla sayıda makara bulunur. Makaralar döndükten sonra ekrandaki hizada duran sembollere göre müşteriye ödeme yapılır.

Nasıl çalışır?

Slot makinesi nasıl çalışır sorusunun birden fazla cevabı bulunmakta ama en yaygın olanı ise makaralar rastgele bir noktada duracak şekilde çevrilir ve istenilen hizada bulunan görsellere göre kazanılıp kazanılmadığı kontrol edilir.

Peki bizim hazırlayacağımız slot makinesi nasıl çalışıyor?

Biz slot makinesine sadece görselleri değil, bu görsellerin denk gelme oranlarınıda iletiyoruz. Bu ne demek;
Örneğin elma görselimiz var ve makaralar döndükten sonra 3 ‘ünde de elma gelmesinin % kaç ihtimalle olacağını belirtiyoruz.

Öyleyse hadi algoritmayı maddelerle özetleyerek ilerleyelim.

• Kol çekilir.
• Makaraların duracakları konumlar belirlenir.
• Makaralar döner.
• Makaralar durduktan sonra kazanma/kaybeme kontrolü yapılır.
• Oyuncuya kazandı/kaybetti bilgisi verilir.
  • Eğer kaybedildi ve tekrar oynama hakkı varsa yeniden başlanır.
  • Eğer kazanıldı ise oyun biter ve oyuncuya ödülü verilir.

Oyunumuzun akış tam olarak bundan ibaret. Diğer detayları oyunu oluşturma sürecinde sizlerle paylaşacağım.

HTML Kodlarının Yazılması

<div class="machine">
    <div class="slots">
        <ul class="slot-machine1"></ul>
        <ul class="slot-machine2"></ul>
        <ul class="slot-machine3"></ul>
     </div>

</div>

Temelde ihtiyacımız olan html kodları bunlardan ibaret, fakat görsel açıdan daha iyi ve işlevsel olarakda işimize yarayabilecek bazı eklemelerde yapmak istiyorum, bunlarla birlikte html dosyamız şu haline bürünmüş oluyor.

    <div class="wis-container">
      <div class="machine">
        <div class="wis-header">
          <div class="wis-h-main">
            <div class="wis-blink-border">
              <div class="wis-h-text">Kodlayiruk</div>
            </div>
          </div>
          <div class="wis-h-rleg"></div>
          <div class="wis-h-lleg"></div>
        </div>
        <div class="slots">
          <ul class="slot-machine1"></ul>
          <ul class="slot-machine2"></ul>
          <ul class="slot-machine3"></ul>
        </div>
  
        <div class="winner-modal"></div>
        <div class="loser-modal"></div>
        <div id="machine-lever">
          <div class="lever-base">	  
            <div id="lever-bar" class="wis-brr"></div>
            <div id="lever-ball" class="wis-bll"></div>
            <div class="lever-chair"></div>
            <div class="lever-chair2"></div>
          </div>
        </div>
      </div>
      <p class="wis-txt"><span class="wis-starter-txt">pull the lever for start</span></p>
    </div>

Çok fazla html bölümü olduğunun farkındayım fakat inanın hepsini kullanacağız. Bu kısımlar içerisinde bizim oyunumuzun merkezini oluşturacak bölüm ise slots div’i ve içerisindeki listelerdir. Bu bölümler haricinde ise lever-base ve içerisindeki elementler aslında oyunumuzun başlat butonu olacaklar. Bu elementler dışındaki elementler için detaylara değinmeyeceğim çünkü tamamı yalnızca tasarım unsuru.

Javascript Kodlarının Yazılması

Öncelikle oluşturduğumuz javascript dosyasını hmtl dosyamıza ekleyelim:

<script type="text/javascript" src="./game.js" ></script>

Ardından slotMachine adında bir fonksiyon oluşturacağız ve bundan sonra yazacağımız tüm kodları bu fonksiyon içerisine yazacağız… ve kullanacağımız değişkenlerin bir kısmını tanımlayarak işe başlayalım.

function slotMachine(){  

    /*Tüm kodlarımızı bu alana yazacağız*/

}
slotMachine();

    /*Değişkenler Start*/
  var machine = document.querySelector('.machine');
  var slotMac1 = document.querySelector('.slot-machine1');
  var slotMac2 = document.querySelector('.slot-machine2');
  var slotMac3 = document.querySelector('.slot-machine3');
  var leverBall = document.querySelector('#lever-ball');  
  var leverBar = document.querySelector('#lever-bar');  
  var wisText = document.querySelector('.wis-txt');
  var gameCount = 3;
  var items = [],
      winRates = [],
      totalWRates = 0;
  
  var degree1 = '36deg',
      degree2 = '72deg',
      degree3 = '108deg';
  
    var root = document.querySelector(':root');
    var paneSize = 150;
    var xAngle1,
        xAngle2,
        xAngle3;

      /*Items Start*/
    var oc5 ='https://raw.githubusercontent.com/ktoqaloglu/Slot-Machine/master/200x200.png,10,https://raw.githubusercontent.com/ktoqaloglu/Slot-Machine/master/200x200.png,5,https://raw.githubusercontent.com/ktoqaloglu/Slot-Machine/master/200x200.png,10,https://raw.githubusercontent.com/ktoqaloglu/Slot-Machine/master/200x200.png,20';
        totalObj = oc5.split(','),
        spliterC = 0;
     /*Items END*/

    /*Değişkenler END*/ 

Gelin size Javascript selector’ler dışında kalan değişkenlerimizin neler olduğundan

• GameCount: Oyunumuzun kaç kez oynanabileceğinin verisinin tutulduğu değişkendir.
• items: Oyunumuzun item’larını tutacağımız dizidir.
• winRates: Her bir item için belirlenen winrate değerlerini bu dizi içerisinde muhafaza edeceğiz.
• totalWRates: Toplam kazanma oranını tutan değişkendir.
• degree1, degree2 ve degree3: Çarkların minimum tur miktarını belirlediğimiz bölümdür. 36 ve katlarında bir sayı olmalıdır.
• paneSize: 1 item’ın yükseklik değeridir.

Bu değişkenleri oluşturduktan sonra bir çok yerde kullanacağımız 2 fonksiyonumuzu yazalım, bunlardan ilki Javascript Dinamik if Koşulu Oluşturma konumda detaylıca anlattığım dinamik bir şekilde if sorguları oluşturmamıza yardımcı olan bir fonksiyon ve bir diğeri ise belirlediğimiz sayılar aralığında rastgele sayı üretmemizi sağlayan başka bir fonksiyondur.

  function compare(value1, operator, value2) {
  switch (operator) {
      case '>':   return value1 > value2;
      case '<':   return value1 < value2;
      case '>=':  return value1 >= value2;
      case '<=':  return value1 <= value2;
      case '==':  return value1 == value2;
      case '!=':  return value1 != value2;
      case '===': return value1 === value2;
      case '!==': return value1 !== value2;
  }
  }
  
  function randomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min)
  }

Bu iki fonksiyonu oluşturduktan sonra ilk random değerimizi oluşturalım.

var rnd = randomInt(0,100);

Ardından oyunumuzun temellerini oluşturacak init() fonksiyonumuzu yazmaya geçebiliriz.

  function init(){
  
  
    for (let index = 0; index < totalObj.length; index++) {
      if(index %2 == 0){
        items[spliterC] = totalObj[index];
      }else{
              winRates[spliterC] = totalObj[index];
              spliterC++;
              totalWRates += parseInt(totalObj[index]);
      }
    }
  
    for (let index = 0; index < winRates.length; index++) {
          if(index == 0){
        winRates[index] =parseInt(winRates[index]);  
      }else{
          winRates[index] = parseInt(winRates[index-1]) + parseInt(winRates[index]);
      }
      }
  
    for (let index = 0; index < items.length; index++) {
      slotMac1.insertAdjacentHTML('beforeend',`
      <li class="slot1_item"><img class="image_item" src='`+items[index]+`'/><span class='item_span'">`+index+`</span></li>
      `);
      slotMac2.insertAdjacentHTML('beforeend',`
      <li class="slot2_item"><img class="image_item" src='`+items[index]+`'/><span class='item_span'">`+index+`</span></li>
      `);
      slotMac3.insertAdjacentHTML('beforeend',`
      <li class="slot3_item"><img class="image_item" src='`+items[index]+`'/><span class='item_span'">`+index+`</span></li>
      `);
    }
  }

Bu fonksiyon içerisinde oc5 değişkeninden alıp parçaladığımız değerleri item ve winrate olarak parçalayıp uygun dizilere dağıtıyoruz ve herbir slot için bantları oluşturuyoruz.

Her bir slot için bir spin fonksiyonu oluşturmamız gerekmekte

function slot1Spin(){
    root.style.setProperty('--slot1Rotate',degree1);
    var panes1 = document.querySelectorAll(".slot1_item"),
        zDepth1 = paneSize / (2 * Math.tan(Math.PI/panes1.length));
  
  for (let index = 0; index < panes1.length; index++) {
        xAngle1 = 360 / panes1.length * index;
      panes1[index].style.transform= "rotateX("+ xAngle1 +"deg) translateZ("+ zDepth1 +"px)";
    }
  
  slotMac1.addEventListener('animationend',function(){
    slotMac1.style.transform = 'rotateX('+degree1+')';
    slotMac1.classList.remove('animation1');
  });
  };
  
  
  function slot2Spin(){
    root.style.setProperty('--slot2Rotate',degree2);
    var panes2 = document.querySelectorAll('.slot2_item'),
        zDepth2 = paneSize / (2*Math.tan(Math.PI/panes2.length));
  
        for (let i =0;i<panes2.length;i++){
          xAngle2 = 360 / panes2.length * i;
          panes2[i].style.transform = "rotateX("+xAngle2+"deg) translateZ("+zDepth2+"px)";
        }
  slotMac2.addEventListener('animationend',function(){
    slotMac2.style.transform = 'rotateX('+degree2+')';
    slotMac2.classList.remove('animation2');
  });
  
  }
  

1. ve 2. slotlar için fonksiyonlar neredeyse birbirinin aynısıdır, bu değerlerin tamamı 3.slot içinde gerekmekte fakat ekstra olarak 3.slot’a ait animasyonun sona erdiği durumda bir sonraki aşamanın çalışması gerektiği için bazı kodlar yazmamız gerekiyor.

  function slot3Spin(){
    root.style.setProperty('--slot3Rotate',degree3);
    var panes3 = document.querySelectorAll('.slot3_item'),
        zDepth3 = paneSize / (2*Math.tan(Math.PI/panes3.length));
  
        for (let j =0;j<panes3.length;j++){
          xAngle3 = 360 / panes3.length * j;
          panes3[j].style.transform = "rotateX("+xAngle3+"deg) translateZ("+zDepth3+"px)";
        }
  slotMac3.addEventListener('animationend',function(){
    slotMac3.style.transform = 'rotateX('+degree3+')';
    leverBall.classList.remove('downBall');
    leverBar.classList.remove ('downBar');
    slotMac3.classList.remove('animation3');
    checkWinner();
  });
  }

slot3 e ait olan fonksiyonda görebileceğiniz gibi alt bölümde bir eventListener bulunmakta ve buradaki kodlar, dönme animasyonumuz sona erdiğinde tetikleniyor.
Peki tetiklenen kodlar ne yapıyor diyecek olursanız, slot makinemizin sağ tarafında bulunan kolun animasyonunu sıfırlıyor ve oyun oynandığı için oyuncunun kazanıp kazanmadığını kontrol etmemizi sağlayan checkWinner() fonksiyonunu çağırıyor.

checkWinner fonksiyonunu anlatmaya geçmeden önce slotlarımızın dönmesini sağlayan spin() fonksiyonumuzu yazalım.

function  spin(){
  /*Degree Per By Item*/
  var perByItem = 360 / items.length;
  var winnerVal = 0;
  
  if(totalWRates < 100){
    var loserRate = totalWRates + (100 - totalWRates);
  }
  
  for(let index = 0;index<items.length;index++){
    if(index == 0){
          if(compare(rnd,'<=',winRates[index]) ){
              winnerVal = perByItem * index;
        degree1 = (360 + winnerVal)+'deg';
        degree2 = (720 + winnerVal) +'deg';
        degree3 = (1080 + winnerVal)+'deg';
          }
      }else{
          if(compare(rnd,'>',winRates[index-1]) && compare(rnd,'<=',winRates[index]) ){
              winnerVal = perByItem * index;
        degree1 = (360 + winnerVal)+'deg';
        degree2 = (720 + winnerVal) +'deg';
        degree3 = (1080 + winnerVal)+'deg';
          }
      }
  }
  if(compare(rnd,'>',winRates[items.length-1]) &&  compare(rnd,'<=',100)){
    winnerVal = rnd;
    degree1 =  (360 + (perByItem * randomInt(1,5))) + 'deg';
    degree2 =  (360 + (perByItem * randomInt(1,5)))+ 'deg';
    degree3 =  (360 + (perByItem * randomInt(5,6))) + 'deg';
  }
  
  slot1Spin();
  slot2Spin();
  slot3Spin();
  }

Sırasıyla yukarıdan aşağıya bu fonksiyonumuzun neler yaptığına birlikte bakalım;

perByItem değeri bize her bir item’a düşen açıyı veriyor bu açıları kullanarak daha aşağıdaki bölümlerde gerekli if sorgularınıda kullanarak degree1, degree2, ve degree3 değerlerine hesaplamaların sonucunda doğru değerleri aktarır ve bu değerler yardımıyla çarklar dönmeyi durdurduğunda tam olarak bizim istediğimiz item üzerinde durur.

Son olarak ise slot1Spin(), slot2Spin(), ve slot3Spin() fonksiyonlarını çağırarak animasyonu belirlenmiş değerlerle başlatır.
Not: 6-8 satırlarında ise ihtiyacınız olması halinde kaybetme yüzdesini tutuyoruz.(Bu versiyonda aktif olarak kullanmıyorum.)

Kazanma Kontrolü

  function checkWinner(){
  
    var firstSlot = slotMac1.getBoundingClientRect(),
        secondSlot = slotMac2.getBoundingClientRect(),
        lastSlot = slotMac3.getBoundingClientRect(),
        loserModal = document.querySelector('.loser-modal'),
        winnerModal = document.querySelector('.winner-modal'),
  
      r1 = document.elementFromPoint(firstSlot.x+(firstSlot.width/2),firstSlot.y+(firstSlot.height/2+10)),
      r2 = document.elementFromPoint(secondSlot.x+(secondSlot.width/2),secondSlot.y+(secondSlot.height/2+10)),
      r3 = document.elementFromPoint(lastSlot.x+(lastSlot.width/2),lastSlot.y+(lastSlot.height/2+10));
    
    setTimeout(() => {
      if (r1.parentElement.textContent == r2.parentElement.textContent && r1.parentElement.textContent == r3.parentElement.textContent && rnd <= totalWRates) {
        winnerModal.innerHTML = `
        <div class="modal-title" >Tebrikler</div>
        <div class="modal-subtitle">%20 indirim kazandınız.</div>
        <div class="wis-code">F53DWE</div>
      `;
        winnerModal.style.display = 'flex';
      } else {
        loserModal.innerHTML = `
        <div class="modal-title" >Üzgünüm Kazanamadın</div>
        <button class="try-again-btn">Yeniden Dene</button>
      `;
        loserModal.style.display = 'flex';
        var againBtn = document.querySelector('.try-again-btn');
        if(gameCount > 0){
          gameCount--;
          againBtn.addEventListener('click', function () {
            rnd = randomInt(0, 100);
  
            loserModal.style.display = 'none';
  
            slotMac1.style = '';
            slotMac2.style = '';
            slotMac3.style = '';
            slotMac1.style = '';
            slotMac2.style = '';
            slotMac3.style = '';
            spin();
            wisText.innerHTML = "<span class='wis-starter-txt'> You can spin "+gameCount+" more times.</span>"
          });
        }else{
          againBtn.textContent = 'Tüm Hakların Bitti';
          againBtn.disabled = true;
        }
      }
    }, 400);
  }

Bu bölümde ise slotlarımız dönme işlemini tamamladıktan sonra çalışacak kısımdır. Bu fonksiyonu yazımızın önceki kısmında oluşturduğumuz slot3Spin() fonksiyonu içerisinde çağırmıştık.

Fonksiyonların Çağırılması

  init();
  spin();
    /*Start Spin*/
    leverBall.addEventListener('click',function(){
    leverBall.classList.add('downBall');
    leverBar.classList.add ('downBar');
    slotMac1.classList.add('animation1');
    slotMac2.classList.add('animation2');
    slotMac3.classList.add('animation3');
  });

Projenin bütün haldeki dosyalarına erişmek için bu bağlantıyı ziyaret edebilirsiniz.

Preview:

See the Pen Slot Machine by Kamil T. (@Likapa) on CodePen.

Bu bölümle birlikte slot makinemiz artık kullanılabilir halde, buraya kadar okuduğunuz için teşekkür ederim.

The post JavaScript ile Slot Makinesi (Vanilla JS) appeared first on Kodlayiruk.

Günümüzde modern bir uygulama oluştururken performans, bellek sızıntıları, render hızı ve daha fazlası gibi şeyleri hesaba katmak gerekir.

Data Binding, geliştiricilerin Android uygulamalarında render hızının yavaşlığını önleyen gelişmiş bir konudur. Data Binding kullanmanın bazı avantajları, bellek sızıntılarını veya nullPointerException gibi hataların önlenmesi, findViewById çağrılarının azaltılması ve Jetpack Compose kullanarak declarative UI oluşturmayı sağlamaktadır.

Bu eğitimde şunları ele alacağız:

• Data Binding nedir?
• Android uygulamasında veri bağlamayı etkinleştirme
• Örnek Android Layout’u içerisinde Data Binding sınıfının kullanılması
• Veri Bağlama findViewById’den nasıl daha hızlıdır?
• Binding click listener kullanımı

Data Binding nedir?

Type safe ve null safe bir yaklaşımda görünümlere erişmek için Android uygulama geliştirmede benimsenen gelişmiş bir yaklaşımdır.

Veri bağlama, ilgili veri öğelerinin sayısına bağlı olarak basit veya karmaşık olabilir. Microsoft’a göre, basit bir veri bağlama, tek bir veri öğesini bağlayabilirken, karmaşık bir veri bağlama, birden çok veri öğesini bağlar. Veri bağlama ile, bir veri kümesindeki bir öğede yapılan değişiklik, veri kümesinin geri kalanını otomatik olarak günceller.

Şimdi ilgili kitaplığı proje içerisinde kullanabilmek için nasıl etkinleştirebileceğimize göz atacağız.

Android Uygulamasında Veri Bağlamayı Etkinleştirme

İlk olarak, veri bağlama kitaplığı ile çalışabilmek için geliştirme ortamımızı kurmamız gerekecek. Geliştirme ortamı kurulduktan sonra, veri bağlama kitaplığını etkinleştirelim. Bunu yapmak için, aşağıdaki kod parçacığında gösterildiği gibi app düzeyinde build.gradle dosyanızda veri bağlama oluşturma seçeneğini etkinleştirerek uygulamanızı yapılandırabilirsiniz.

android { ... 
      buildFeatures { 
       dataBinding true 
      } 
}

Veri bağlama yaklaşımı, çalışma zamanında oluşturulduğunda veya yeniden oluşturulduktan sonra layout öğelerini bulup, değişiklik yapmayı sağlayan View Binding işleminden daha verimlidir.

Örnek Android Layout’u İçerisinde Data Binding Sınıfının Kullanılması

Veri bağlama yardımcı sınıfı, geniş layout dosyalarına sahip Android projeleri için çok kullanışlıdır. Yardımcı sınıf herhangi bir ek yük olmadan görünüme erişmemizi sağlar. Bu bölümde, Personal sınıfına veri bağlama eklemek için gerekli adımları göreceğiz.

Veri Bağlama findViewById‘den Nasıl Daha Hızlıdır?

Veri bağlamanın ardındaki fikir, iki uzak bilgiyi derleme zamanında birbirine bağlayan ve bunları çalışma zamanında kullanılabilir hale hale getiren nesneler oluşturmaktır. Böylece onları aramak ve tek tek güncellemek zorunda kalmazsınız. Kullanılabilir hale getirilen nesneler, derleyici tarafından oluşturulur ve bağlama nesnesi olarak adlandırılır.

Veri bağlama, aşağıdaki kod parçacığını kaldırmak kaldırmayı amaçlamaktadır.

findViewById(R.id.age).apply {
    text = viewModel.age
}

Daha etkili kullanımı, aşağıdaki kod parçasını kullanarak yapılmaktadır.

buildFeatures { 
       dataBinding true 
} 

Önceki bölümde anlatıldığı gibi app veya module düzeyinde build.gradle dosyasında dataBinding etkinleştirildikten sonra uygulayabiliriz.

İlk olarak, activite_main.xml içerisindeki tüm görünümleri bir <layout> etiketine sardığınızdan emin olun. Anlaşılabilir olmak için ilgili örneği aşağıya bırakıyorum.

<layout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto">

    <ConstraintLayout... /> <!-- UI layout's root element -->
</layout>

Ardından, aşağıdaki kod parçacığını kullanarak ana etkinlikte bir bağlama nesnesi oluşturun:

private lateinit var binding: ActivityMainBinding

Ardından, onCreate içerisinde içerik görünümünü ayarlamak için DataBindingUtil yardımcı sınıfını kullanın:

binding = DataBindingUtil.setContentView(this, R.layout.activity_main)

findViewById’e yapılan tüm çağrıları bağlama nesnesiyle değiştirin:

binding.doneButton.setOnClickListener

Görüntülemeyi düşündüğünüz veri kümesi için bir veri sınıfı oluşturun. Ben yukarıda bahsettiğim gibi Personal adında bir sınıf oluşturacağım:

data class Personal(var name: String = "", var age: String = "")

Ardından, activity_main.xml dosyasına bir data bloğunu ekleyebiliriz. Data bloğunu, ana(root) view etiketinden önce layout etiketinin içine ekleyin. Data bloğunun içine Personal sınıfı için bir değişken ekleyin:

<data>
<variable
    name="Personal"
    type="mobi.kodlayiruk.guide.model.Personal" />
</data>

nameText, ageEdit ve ageText görünümlerine text kaynağını parametre olarak alan başvurularla değiştirin, örneğin:

android:text="@={Personal.name}"

MainActivity sınıfı içerisinde Personal nesnesi oluşturalım:

private val personal: Personal = Personal("Elena Allison")

İlgili sınıfın içinde bulunan onCreate() metodu içerisinde layout’un içinde belirtilen data bloğunu eşleştirelim:

binding.Personal = personal

Binding Click Listener Kullanımı

Direk örnek kullanım ile nasıl kullanacağımızı göstermeye çalışacağım. Burada kullanacağımız ClickListener yardımcı sınıfı, onButtonClick() yönteminin tetiklenmesine ve o sırada layout içerisinde belirttiğimiz görünümün tıklanabilir olmasını sağlayacaktır:

interface ClickListener {
    fun onButtonClick(v: View?)
}

Ardından layout içerisini şu şekilde güncelleyelim:

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android">

    <data>
        <variable
            name="listener"
            type="mobi.kodlayiruk.guide.listener.ClickListener"/>
    </data>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="click me"
            android:onClick="@{listener.onButtonClick}"/>
    </RelativeLayout>
</layout>

Layout’u düzenledikten sonra kullanacağımız sınıf içerisinde ilgili arayüzü etkinleştirip, uygulayabiliriz:

class MainActivity : Activity(), ClickListener {
    private var binding: ActivityMainBinding? = null
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)
        binding.setListener(this)
    }

    fun onButtonClick(v: View?) {
        Toast.makeText(context, "Button clicked", Toast.LENGTH_LONG).show()
    }
}

Umarım blog, Veri bağlama yardımcı sınıfını anlamanıza yardımcı olmuştur. Aklınıza takılan soruların cevabını almak isterseniz dilerseniz yorumlara yazabilirsiniz. Ayrıca Android’in vermiş olduğu https://kotlinlang.org/docs/ dokümandan bilgi alabilirsiniz.

Bu arada diğer yazılarıma şuradan ulaşabiliyorsunuz  Mutlu Kodlamalar.

The post Kotlin Data Binding appeared first on Kodlayiruk.

React-router kütüphanesi tam olarak ne işe yarar?

React.js de routing işlemleri için kullanabileceğiniz birçok altarnatif kütüphane bulunmaktadır, bunlar arasında en yaygın olanı ise react router ‘dur. Bunun nedeni ise kullanımının kolay olması ve tüm ihtiyaçları karşılayabiliyor olmasıdır. React-router kütüphanesi react.js prolerimiz içerisinde WEB API tarafıyla iletişimi sağlayarak router görevi görür ve tüm routing hesaplamalarını bizim yerimize yapar.

React.js projesine nasıl react router kurulur?

Öncelikle paket yükleyicisini kullanarak kütüphaneyi projeye dahil edelim.

npm i react-router-dom

Yükleme işlemini tamamladıktan sonra sonraki aşamalar için devam etmeden önce size react router ile gelen birkaç bileşenlerden bahsetmek istiyorum.

• BrowserRouter
  • Tüm bileşenlerin kullanılacağı bölümün dışına eklenir, routerların çalışacağı alanı belirlemek için kullanılır.
• Routers
  • Router’lar için kapsayıcıdır. Bunu <ul> <li> yapısındaki <ul> olarak da düşünebilirsiniz.
• Router
  • Her bir route işlemini router ile tanımlarız.
• Link
  • html’de ki <a> tag’ının görevini yapar.

Bu kısa bilgilerdende bahsettiğimize göre, artık react router ile kullanacağımız temel bileşenleri biliyorsunuz.

Yeni bir react projesi oluşturdum ve yukarıdaki “npm i react-router-dom” komutunu kullanarak gerekli dosyaları projeme dahil ettim. Şimdi ise sayfalar arasında geçiş yapabilmemi sağlayacak ufak bir navbar hazırlayacağım.

Bunun için öncelikle BrowserRouter ‘ı src klasörüm altındaki index.js dosyası içerisinde <App/> component’ımi kapsayacak şekilde kodlarıma ekliyorum.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
// as Router diyerek bu bileşeni daha sonra kullanmak istediğimde Router ismiyle çağıracağımı belirtiyorum.
import { BrowserRouter as Router } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<Router>
  <App />
</Router>
);

index.js dosyama BrowseRouter bileşenimi ekledikten sonra ise sırada App.js dosyamda rota sistemini oluşturmaya geliyor.

import './App.css';
import { Routes, Route } from 'react-router-dom';
import Homepage from './components/Homepage';
import Contact from './components/Contact';
function App() {
  return (
    <div className="App">
    <Routes>
      <Route exact path='/' element={<Homepage />} />
      <Route exact path="/contact" element={<Contact/>} />
    </Routes>
    </div>
  );
}

export default App;

Homepage ve Contact adında 2 component oluşturdum ve /contact path’ine gidilmesi durumunda Contact component’inin ana dizine gidilmesi halinde ise Homepage component’inin görüntüntülenmesini istediğimi belirttim.

Son olarak Link bileşeninin kullanımını inceleyelim.

import './App.css';
import { Routes, Route, Link } from 'react-router-dom';
import Homepage from './components/Homepage';
import Contact from './components/Contact';
function App() {
  return (
    <div className="App">
      
    <Link to="/">Anasayfa</Link>
    <Link to="/contact">Contact</Link>

    <Routes>
      <Route exact path='/' element={<Homepage />} />
      <Route exact path="/contact" element={<Contact/>} />
    </Routes>

    

    </div>
  );
}

export default App;

Tıpkı html <a> etiketinin kullanılması gibi Link bileşenide aynı şekilde kullanılmaktadır. <a> etiketinde olduğu gibi Link bileşeninin başladığı ve bittiği bölümler arasına istediğimiz herşeyi ekleyebiliriz.

Diğer Parametreler:

Exact

Tam olarak eşleşmeyi temsil eder. (Genelde en sık kullanılandır.)

<Route exact path="/blog" element={<Blog/>} />

Path

Değişkenin sağlandığı herhangi bir geçerli url’dir. Genelde parametre kullanılan path’ler için kullanılır.

<Route path="/users/:id" element={<Profile/>} />

Strict

%100 eşleşmenin sağlanmasını temsil eder.

<Route strict path="/home/" element={<Home/>} />

Sensitive

Büyük-küçük harfler hadil olmak üzere bir eşleşme sağlamak için kullanılır.

<Route sensitive path="/home" element={<Home />} />

Buraya kadar okuduğunuz için teşekkür ederim. Diğer yazılarıma buradan ulaşabilirsiniz.

The post React Router appeared first on Kodlayiruk.

styled-components Nedir?

Söz konusu bir ReactJs uygulaması yazmak olunca kullanılacak bir sürü yöntem vardır.

Etiketlerin içine inline CSS yazmak, external CSS sayfası oluşturmak, styled components gibi bir çok sayabileceğimiz yöntemde vardır.

Peki styled components neden kullanırız? 

Component içinde tanımlanan her hangi bir elemente odaklanarak component içinde tanımlanan styled components ile tetiklenen tüm tanımlamalarını optimize eder.

styled-components KURULUM

# npm ile
npm install --save styled-components

# yarn ile 
yarn add styled-components

ve her zamanki gibi import edelim.

import React from “react”
import styled from “styled-components”

styled-components Faydaları Nelerdir?

Automatic critical CSS: Bir componet sayfasında hangi bileşenlerin oluşturulduğunu takip eder ve stillerini enjekte eder. Gereken en az miktarda kod yazıldığı anlamına gelir.

No class name bugs: styled components, stilleriniz için benzersiz sınıf adları oluşturur. Çakışma veya yazım hataları böyle söz konusu olmaz.

Easier deletion of CSS: Her stil parçası belirli bir componente bağlı olduğundan dolayı herhangi bir stil parçası silinirse, tüm tetiklenen elementler stilleri onunla birlikte silinecektir.

Simple dynamic styling: Düzinelerce sınıfı manuel olarak yönetmek zorunda kalmazsınız.

Painless maintenance: Bileşeninizi etkileyen stili bulmak için asla farklı dosyalar arasında arama yapmanız gerekmez. Kod tabanınız ne kadar büyük olursa olsun böylelikle bakım çocuk oyuncağıdır.

Automatic vendor prefixing: CSS’nizi istediğiniz gibi yazın ve gerisini stil bileşenlerinin halletmesine izin verin.

Artık kullanım şekillerini inceleyelim. styled-components componentlerinize stil vermek için etiketleri kullanır.

const Title = styled.h2`
  font-size:15px; 
  color: blue;
  text-align: center;
 
`;

const Wrapper = styled.section`
  background: green;
  padding: 60px; 
  margin: 5px; 
`;

render(
  <Wrapper>
    <Title>
      Hello World!:)
    </Title>
  </Wrapper>
);

Sürekli aynı butonlar elde etmek istemiyorsanız bunu özelleştirebilirsiniz.
Burada props yardımı ile butonlarımızı çeşitlendiriyoruz.

const Button = styled.button`
  background: ${props => props.second ? "pink" : "white"};
  color: ${props => props.primary ? "white" : "pink"};

  font-size: 15px;
  border-radius: 2px;
  margin: 15px;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 2px;
`;

render(
  <div>
    <Button>Normal</Button>
    <Button second>Second</Button>
  </div>
);

Tamamen farklı butonlar oluşturun.

const BlueButton = styled(Button)`
  color: blue;
  border-color: blue;
`;

render(
  <div>
    <BlueButton>Blue Button</BlueButton>
  </div>
);

Okuduğunuz için teşekkür ederim. Umarım ki yazım sizlere, React ile styled-components oluşturmaya başlamanızda yardımcı olur.
styled components tekrar etmeyen kod satırları, kullanım kolaylığı bakımından React projelerinizde tercih edebileceğiniz bir seçim.

Daha fazla bilgi için React’ın sayfasını ziyaret edebilirsiniz.

Diğer yazılarımıza buradan erişebilirsiniz.

Kodla Kalın.

The post styled-components Nedir ve Nasıl Kullanılır? appeared first on Kodlayiruk.

Başlamadan önce bilmeniz gerekenler:

• Fonksiyonlar
• Switch Case
• Döngüler: for & if

Yazı İçeriği

• Javascript Operatörler
• Örnek: if Koşulu oluşturulması
• Switch-Case İfadesi
• Fonksiyon’un yazılması
• Örnek: Dinamik if Koşulu Kullanımı

Javascript Operatörler

Bununla birlikte if döngüsü için kullanabileceğimiz operatörlerin tümününün üzerinden geçmiş olduk.

Öncelikle sizlerle standart bir if koşulu oluşturalım.

if Koşulu Oluşturulması

Öncelikle if nedir bundan bahsedelim. “if” aslında programlama dillerinin çoğunda bulunan bir koşul ifadesidir. Türkçe ile karışaltırmak gerekirse “eğer” sözcüğü ile ifade etmek doğru olacaktır.

Örneğin: Eğer top mavi ise elbise de mavi olsun.

Bunu javascript kullanarak kodla oluşturmak istersek eğer;

if(top == 'mavi'){
    elbise = 'mavi';
}

şeklinde yazılabilir, eğer bu koşul sağlanmaz ise başka bir koşulun kontrol edilmesini sağlayabilir yada koşula bakılmaksızın gerçekleşmesi için bir atama oluşturabiliriz.

Örneğin: Eğer top mavi değilde yeşil ise elbise yeşil olsun. Eğer top yeşil de değil ise elbise pembe olsun.

if(top == 'mavi'){
    elbise = 'mavi';
}else if(top == 'yeşil'){
    elbise = 'yeşil';
}else{
    elbise = 'pembe';
}

şeklinde yazılabilir.

Switch Case

Yapı olarak if koşul ifadesine oldukça benzer yapıdadır, if ve switch-case yapısının farklı ise, if: 2 farklı ifadeyi karşılaştırmak için kullanılırken switch-case ise karşıdan gelen ifadeye göre çalıştırılması istenen kod bloklarını barındırır.Yani 2 ifade arasında karşılaştırma işlemi yapmaz.

Örneğin: Sadece haftasonu günlerini konsolda bize gösteren bir switch-case yapısı kuralım ve eğer haftasonu değilse bile bunu bize konsolda bildirmesini isteyelim.

var tarih = new Date();
  var gun = tarih.getDay();
  switch(gun) {
    case 0:
      alert("pazar");
    break;
    case 6:
      alert("cumartesi");
    break;
    default:
      alert("henüz hafta sonu değil");
  }

Evet, if koşul ifadesinin ve switch-case koşul ifadesinin nasıl işlediğini anladıysak bir sonraki aşamaya geçebiliriz.
Bu konu içerisinde sizlere fonksiyonların ne olduğunu nasıl çalıştığını ve yapısını anlatmayacağım, zira bu blog yazımızı bir hayli uzatacaktır. Eğer fonksiyonların ne olduğunu, nasıl çalıştıklarını ve nasıl oluşturulduklarını bilmiyorsanız lütfen blog yazımızı okumaya burada bir ara verin ve önce bu konuyu iyice anladığınızdan emin olun.

Fonksiyonun Yazılması

Fonksiyonumuz switch-case yapısı içerisinde bir karşılaştırma yapacak ve bize ‘true’ veya ‘false’ değeri döndürecek.

Not: Karşılaştırmayı switch-case değil içerisine yazacağımız aritmetik operatörleri kullanarak yapacağız.

function compare(value1, operator, value2) {
  switch (operator) {
    case '>':   return value1 > value2;
    case '<':   return value1 < value2;
    case '>=':  return value1 >= value2;
    case '<=':  return value1 <= value2;
    case '==':  return value1 == value2;
    case '!=':  return value1 != value2;
    case '===': return value1 === value2;
    case '!==': return value1 !== value2;
  }

Evet, yukarıdaki fonksiyon aslında şu şekilde çalışıyor;

Biz fonksiyonu çağırırken “value1” , “operator” , “value2” olmak üzere 3 değer gönderiyoruz ve gönderdiğimiz aritmetik operatör switch-case yapısında kontrol edilerek uygun kod bloğunun çalışması sağlanıyor.
Fonksiyonun çağırılması:

compare(25,random, '<', 45);

25 sayısının 45 ‘den küçük olup olmasığını sorduk ve fonksiyon veriyi işledikten sonra bize, “true” olarak bir cevap döndürecektir. Sizlerde bu fonksiyonu kullanarak dinamik if koşulları oluşturabilirsiniz. Hadi birlikte örnek bir kullanım gerçekleştirelim, bu haliyle pek anlaşılır durmuyor.

Dinamik if Koşulu Kullanımı (Örnek)

Bu örnekte sizlerle birlikte kullanıcıya otomatik olarak bir kupon kodu veren bir sistem hazırlayacağız. Bu kodlar için virgül ile ayrılacak biçimde bir düzenleme yaptım ve istediğimiz sayıda ve kazanma oranlarınıda istediğimiz şekilde ayarlayabiliriz.

Koşullar: Kazanma oranları küçükten büyüğe doğru yazılmalıdır ve oranların toplamı 100’ü geçemez.

// Dinamik if koşulu fonksiyonumuzu projemize ekliyoruz
function compare(text,value1, operator, value2) {
  switch (operator) {
    case '>':   return value1 > value2;
    case '<':   return value1 < value2;
    case '>=':  return value1 >= value2;
    case '<=':  return value1 <= value2;
    case '==':  return value1 == value2;
    case '!=':  return value1 != value2;
    case '===': return value1 === value2;
    case '!==': return value1 !== value2;
  }
}
//Bu fonksiyon rastgele sayı üretmek içindir.
function randomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min)
}


var getData,
      data,
      limitText="",
      limits,
      codeText="",
      codes,
      breaking = 0,
      selected_campaign = 'none';
// Rastgele 0-100 arasında bir sayı üretiyoruz.
const random = randomInt(0, 100);

//Döngüde kullanmak için ihtiyacımız olan veriyi alıyoruz.

 getData= "1_kupon_kodu,10,2_kupon_kodu,20,3_kupon_kodu,30";

// Aldığımız bu data'da 2 tip veri bulunuyor bunları birbirinden ayırıyoruz. 
 data = getData.split(',');

 for (let index = 0; index < data.length; index++) {
    
    if (index %2 == 0){
        codeText = codeText + data[index]+',';
    }else if (index % 2 == 1) {
        limitText = limitText+data[index]+','; 
    }
}

limitText=limitText.slice(0,-1);
limits = limitText.split(',');

for (let index = 0; index < limits.length; index++) {
    limits[index] = parseInt(limits[index]);
    if(index == 0){
        limits[index] = limits[index];
    }else{
    limits[index] =limits[index-1] + limits[index];
    }
}

codeText=codeText.slice(0,-1);
codes = codeText.split(',');

//Elimizdeki veri sayısı kadar fonksiyonumuzu çağırabileceğimiz bir "for" döngüsü oluşturuyoruz.
for (let index = 0; index < codes.length; index++) {

if(compare(codes[index],random, '<=', limits[index]) == true && breaking <= 0 && index == 0 ){
    selected_campaign = codes[index];
    console.log(selected_campaign);
    breaking++;
}else if(compare(codes[index],random, '<=', limits[index]) == true && breaking <= 0 && index != 0 && compare(codes[index],random, '>', limits[index-1]) == true ){
    selected_campaign = codes[index];
    console.log(selected_campaign);
    breaking++;


}else if(random > limits[limits.length-1] && breaking <= 0 ){
    
    selected_campaign = 'Kazanamadınız...';
    console.log(selected_campaign);
    breaking++;
}
    
}

Örnek Konsol Çıktısı

// Random değerin 99 geldiği senaryo:

Kazanamadınız...

Bununla birlikte artık kendi dinamil if koşullarınızı oluşturabilir ve projelerinizde kullanabilirsiniz. Buraya kadar okuduğunuz için teşekkür ederim.

Örnek projenin tam haline github üzerinden erişebilirsiniz.
Github

The post Javascript Dinamik if Koşulu Oluşturma appeared first on Kodlayiruk.

Enum Sınıfı

Sabit olarak kullanacağımız seçenek kümesini temsil etmemiz gerektiğinde klasik bir seçim olarak bu sınıf tercih edilmektedir.

Nasıl Yani?

Hemen örnekle açıklayalım: Her yazılımda, proje içinde ihtiyaç duyulan belirli türler olur. Bu türler bir kullanıcı modülü için User, Admin vb. olabildiği gibi, cihaz türleri için de iOS, Android, Web değerleri olarak kullanılır.

Proje analizi yapılırken de örneğin platform seçimi yapmak istendiğinde Android platformu için 0 değerini, iOS platformu için 1 değerini atayalım. Geliştirme yapılma aşamasında verdiğimiz değerlere, aşağıdaki örnekteki gibi kıyaslar yaparız.

if(platformType==1)
{
    //Android
}
else if(platformType==2)
{
    //iOS
}

Enum Sınıfının Kullanımı

Örneğin, haftanın günlerini temsil edecek bir class tanımlaması şu şekildedir:

enum class Weekday{
  MONDAY, TUESDAY, WEDNESDAY, THURSDAY, FRIDAY, SATURDAY, SUNDAY
}

Yukarıda verilen örneğe benzer, gelen kullanıcıların platformunun temsil edeceği class tanımlası şu şekildedir:

enum class Operator{
   Android, iOS, WEB
}

Bir veri tabanı içerisine veri girişi yapılırken, String değeri yerine sabit değerler için kullanılacak bir Integer değeri koyulması daha mantıklı olacaktır. Böylelikle kontroller gerçekleştirilirken yukarıda belirtilen “if” kontrolü gibi işlemler kolaylıkla yapılabilsin.

Proje içerisinde kullanımı şu şekilde olabilmektedir:

enum class Operator(val type: Int) {
    Android(1),
    iOS(2),
    Web(3)
}

İlgili sınıfla alakalı değer oluşturmak veya çağırmak için bir nesne aşağıda gösterildiği gibi çağrılamaz:

val operatorType = Operator() 

Bunun yerine şu şekilde bir kod satırı yazılmalıdır:

val operatorType = Operator.Android

İlgili özelliklere de şu kod satırını kullanarak ulaşırız:

val operatorType = Operator.Android
print(operatorType.type) //prints "1"

Kolay bir şekilde gerekli tanımlamalarımızı gerçekleştirdik. Bunun için kontrolü nasıl gerçekleştirebiliriz derseniz şu şekilde yazacağımız kod satırı ile kontrolü gerçekleştirebiliriz:

val operatorType = Operator.Android
when(operatorType){
    Operator.Android -> println("Android")
    Operator.iOS -> println("iOS")
    Operator.Web -> println("Web")
}
//prints "Android"

Tanımı yapılan sınıf içerisinde ki tüm değerlere ulaşmak için ise:

val operators = Operator.values()

for(c in operators)
  println("${c.ordinal} : ${c.name} : ${c.type}")

//prints 
0 : Android : 1
1 : iOS : 2
2 : Web : 3

Yukarıda belirtilen “ordinal” değeri ilgili sınıftaki değerin index olarak değerini vermektedir. “name” değeri ise sırayla orada tanımlı sabiti bize for döngüsü içerisinde gösterecektir.

Umarım blog, Enum classın farklı kullanımlarını daha iyi anlamanıza yardımcı olmuştur. Aklınıza takılan soruların cevabını almak isterseniz dilerseniz yorumlara yazabilirsiniz. Ayrıca Android’in vermiş olduğu https://kotlinlang.org/docs/ dokümandan bilgi alabilirsiniz.

Bu arada diğer yazılarıma şuradan ulaşabiliyorsunuz Mutlu Kodlamalar.

The post Kotlin Enum Class appeared first on Kodlayiruk.

Structure’ lar da sınıflar gibi tanımlanırlar. Yalnızca sınıflarda kullanılan class anahtar kelimesi yerine struct anahtar kelimesi kullanılır ve ardından structure için bir isim girilir. Sonrasında kod bloğu için küme parantezi açılır ve kapatılana kadar olan structure’ ın iç yapısını oluşturur.

struct StructureAdı {

// Özellik ve fonksiyonlar bu bölüme yazılır.

}

Structure’ lar kullanımları açısından da sınıflar ile benzerlik gösterirler. Örneğin sınıflar gibi türetilerek kullanılırlar. İçlerinde özellikler ve fonksiyonlar tanımlanabilir. İlk değer atamaları için init yapıcı fonksiyonu kullanılabilir.

Ancak bazı sınıf özellikleri structure yapılarında kullanılamazlar ki bunların en önemlisi kalıtımdır. Bu özellikleri itibari ile structure’ lar swift programlama dilinin sınıflardan bir numara küçük olan yapı taşıdır denilebilir.

struct Work {
    var location = ""
    var units = [String]()
    let lenght: Int
    
    func last() ->String{
        return units[units.count-1]
    }
}

Structure Tanımlanması Örneği

Structure tanımlaması yapıldıktan sonra, sınıflar gibi türetilerek yazılım içerisinde kullanılırlar. Ayrıca içersindeki özellik ve fonksiyonlara erişimde yine sınıflardaki gibi türetilen değişken üzerinden nokta operatörü aracılığı ile yapılmaktadır.

//Structure Tanımlanyor
struct ColorsToBeUsed{
    
    var black: String
    var green: String
    var yellow: String
    
    func defaultscolor() ->(black:String,green:String,yellow:String) {
        let c1 = "#000000"
        let c2 = "#000000"
        let c3 = "#000000"
        return (c1,c2,c3)
        
    }
}

//Structure Türetiliyor
var colors = ColorsToBeUsed(black: "#FFFFFF", green: "#FF0000", yellow: "#454545")

//Structer özelliklerine erişiliyor

let black = colors.black
let green = colors.green
let yellow = colors.yellow

//Structure fonksiyonlarına erişiliyor
let ReceivedColors = colors.defaultscolor()

Structure Yapısı Türetimi, Özellik ve Fonksiyonlarının Kullanımı

The post Structure Yapıları appeared first on Kodlayiruk.

Yazı İçeriği:

• HTML yapısının oluşturulması
• Stillendirme – CSS
• Javascript Kodlarının Yazılması

HTML Yapısının Oluşturulması

İster slider, ister bir kart veya bir menü oluşturun, mutlaka kapsayıcı divlere ihtiyacınız olur.

Peki neden kapsayıcı div’lere ihtiyacımız var?
Kapsayıcı div’ler stillendirme kısmında ” response ” denilen yapıyı oluşturmamızda bize kolaylık sağlamaktadır, bir websitesinin içerisinde birçok element bulunabilir.Bu elementler arasında ayrım yapabilmek, ve stillendirme aşamasında istenilen sonuçlara kolay erişebilmek için kapsayıcı div’leri kullanırız.

<div class="slider">
    <div class="kodlayiruk-slider">
        <!-- kodlarımızı bu alana yazacağız. -->
    </div>
</div>

TERİMLER

Slider ve slide: Slider hazırlamakta olduğumuz yapının bütününe verilen isimdir. Slide ise bu yapı içerisindeki her bir sayfayı(aynı anda görüntülenecek içeriği) temsilen kullanılan bir isimlendirmedir.

Kapsayıcı div’imizi oluşturduk, şimdi ise slider’ımızda bir slide’ın nasıl bir yapıya sahip olacağını belirleyebiliriz.Bu bölümde istediğiniz class isimlerini kullanabilirsiniz, fakat eğer bu eğitimle birlikte ilk kez bir slider yapıyorsanız, blog yazımı daha iyi anlayabilmeniz için class isimlerini aynı bırakmanızı tavsiye ederim.

    <div class="slide fade">
        <div class="number">1 / 3</div>
        <img src="img1.jpg" class="slide-image" />
        <div class="text">İlk Görsel</div>
    </div>

Gelin hep birlikte bu hazırladığımız içeriği inceleyelim.

Görmüş olduğunuz gibi bir kapsayıcı div’imiz bulunmakta [.slide fade] bu div bizim bir slide’ımızı temsil etmektedir.Bu div içerisine ekleyeceğimiz herşey aynı anda slider’ımız üzerinde görüntülenecektir.

Buradaki [.number] isimli div ise slider’ımız üzerinde hangi sayfada olduğumuzu kullanıcılara göstermek için var, tabi bu kısım tamamen stillendirme ile ilgili ve zorunlu değidir.
Aynı şekilde [.text] isimli div de slider’ımız üzerinde bir yazı görüntülemek için eklenmiş olup, kullanmanız tamamen kişisel isteğinize bağlıdır.
Buradaki image elementi ise bir image slider yaptığımız için olmazsa olmaz alanımızdır.

Son olarak tüm slide’larda görüntülenmesini istediğimiz, ileri ve geri butonlarını ekleyebiliriz. Bu butonlar sayesinde bir önceki veya bir sonraki slide’ı görüntüleme işlemini gerçekleştirebileceğiz.

    <a class="prev" onclick="slideRoute(-1)">&#10094;</a>
    <a class="next" onclick="slideRoute(1)">&#10095;</a>

Bu bölümde [.prev] ve [.next] butonlarını eklerken içeriğinde büyüktür(>) ve küçüktür(<) işaretlerinin görüntülenmesini istiyordum fakat bu işaretler HTML kodlarımızı yazarken elementlerin sınırlarını belirlediğimiz standart karakterler oldukları için ve sonrasında human-friendly bir kod oluşturabilmiş olmak için bu karakterleri klavye yordamıyla değil özel karakter kodlarıyla ekledim.

#10094 -> Küçüktür | #10095 -> Büyüktür

Pagination

Bu bölüme kadar olan bütün kodlarımızı [.kodlayiruk-slider] adındaki div’imiz içerine yazmıştık. Şimdi ise bu divin dışına çıkıp ilk başta oluşturduğumuz [.slider] div’i içerisinde pagination(sayfalandırma) işlemi için ihtiyacımız olacak HMTL kodlarını eklememiz gerekiyor.Elbette bu alanda isteğe bağlı bir bölüm.

<div style="text-align:center">
    <span class="dot" onclick="currentSlide(1)"></span>
</div>

Bu bölümde kaç adet slide’ınız var ise o sayıda span oluşturmanız gerekmekte.
CurrentSlide() ise bir fonksiyon olup yazımızın ilerleyen bölümlerinde bu fonksiyonu birlikte oluşturacağız. Bu fonksiyon içerisine gönderdiğimiz 1 değeri ise slide’ımıza verdiğimiz numaradır.
Not: Bu numaraların sıralı olması önemlidir

Benim yazmakta olduğum slider 3 slide’dan oluşmakta bu yüzden kodumu bu şekilde güncelliyorum.

<div style="text-align:center">
    <span class="dot" onclick="currentSlide(1)"></span>
    <span class="dot" onclick="currentSlide(2)"></span>
    <span class="dot" onclick="currentSlide(3)"></span>
</div>

Görmüş olduğunuz gibi herbir span’da değişen tek nokta currentSlide() fonksiyonuma gönderdiğim değerdir.
Bununla birlikte HTML bölümümüzü tamamladık.Artık stillendirme kısmına geçebiliriz.

Stillendirme | CSS’lerin yazılması

Stillendirme aşamasında 2 seçeneğiniz var, aynı dosya içerisinde css kodlarınızı yazabilir veya harici bir css dosyası oluşturup bunu html elementlerimizi hazırladığımız dosyaya import edebilirsiniz.

Stillerinizi harici bir dosya içerisinden çağırmak istiyorsanız html dosyanızdaki <head></head> tagları arasına
<link rel="stylesheet" href="mystyle.css"> link tağını kullanarak ekleme işlemini yapabilirsiniz.

Stillendirme aşaması tamamiyle sizlere kalmış bir bölüm, bu bölümde özellikle ihtiyacımız olan bir kaç class için stillendirmenin nasıl yapıldığını gösteceğim ve ardından kendi slider’ımı oluştururken kullandığım stillendirme(css) kodlarını sizlerle paylaşacağım.

    .active, .dot:hover {
        background-color: #717171;
    }

    /* Fading animasyonu */
    .fade {
        animation-name: fade;
        animation-duration: 1.5s;
    }

    @keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
    }

Pagination işlemi için kullanacağım noktaların renklerinin değişmesi için bir .active classı oluşturdum ve bu class’ı daha sonra javascript kullanarak işlevsel hale getireceğim.
HTML gövdemizi oluştururken slide gövdesine bir class daha eklemiştim, .fade isminde olan bu class ise ufak bir geçiş animasyonu yapmak için kullandım.

Javascript Kodlarının Yazılması

Javascript kodlarımızı aynı stillendirmede olduğu gibi farklı bir dosya içerisinden çağırabilir veya aynı dosya içerisinde <script></script> tagları arasına yazabiliriz.

Not: Eğer aynı dosya içerisinde yazmayı planlıyorsanız mutlaka </body> tagının ardına ekleyin.Aksi durumda kodlarınız doğru çalışmayacaktır.

    let slideIndex = 1;
    slideShow(slideIndex);

    function slideRoute(n) {
        slideShow(slideIndex += n);
    }

    function currentSlide(n) {
        showSlides(slideIndex = n);
    }

slideIndex adında bir değişken tanımladık ve varsayılan değerini 1 olarak belirledik bu 1 değeri sayfa yüklendiğinde slider ‘ımızdaki hangi slide ‘ın görüntüleneceğini belirlemektedir.
currentSlide(n) fonksiyonu, pagination bölümünde oluşturduğumuz geçiş butonlarını işlevsel hale getiren fonksiyonumuzdur.
slideRoute(n) fonksiyonu ise ileri ve geri butonlarımızın işlevsel hale gelmesi için kullandığımız fonksiyondur.

Yukarıdaki kod bloklarında gördüğünüz üzere 2 fonksiyonda içerisindeki slideShow() adlı fonksiyona değer göndermekten başka bir iş yapmıyor. Gelin birlikte slideShow() fonksiyonunu oluşturalım.

    function slideShow(n) {
        let i;
        let slides = document.getElementsByClassName("slide");
        let dots = document.getElementsByClassName("dot");
        if (n > slides.length) {
            slideIndex = 1
        }
        if (n < 1) {
            slideIndex = slides.length
        }
        
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display="none";
        }
        for (i = 0; i < dots.length; i++) {
            dots[i].className = dots[i].className.replace(" active", "");
        }
        slides[slideIndex-1].style.display = "block";

        dots[slideIndex-1].className +=" active";
    }

Fonksiyonumuzda kullandığımız değişkenleri tanımakla başlayabiliriz:

• i -> Daha sonra for döngülerimizde kullanmak için oluşturduğumuz bir değişkendir.
• slides -> Öncesinde oluşturduğumuz slide’ları html tarafından javascript ile bulup bu değişken atıyoruz ardından bu değişkeni elementlerde javascript ile düzenlemeler yaparken kullanabiliriz.
• dots -> Aynı şekilde pagination işleminde kullanacağımız elementleri bu değişkene atıyoruz.

Sizlerinde gördüğü gibi bu değişken tanımlama işlemlerinin ardından 2 adet if döngüsü kullanıyoruz.
Bu if döngüleri ileri veya geri butonuna bastığımızda değişen slideIndex değerimizin sıfırın altına düşmesini ve slide sayımızın üzerine çıkmasını engellemekle görevlidir.

Ardından gelen 2 for döngüsü ise slide ‘ların görünürlüğünün kaybolmasını ve sayfa değişimlerinde pagination da kullandığımız elementlerin stillendirmesini değiştirmek için kullanılmıştır.

Son olarak ise görüntülenecek olan slide ‘ın ve active class ‘ını alacak olan olan pagination element ‘imizin stillendirmesi yapılmıştır.

Bununla birlikte slider ‘ımız tamamlanmıştır.
ilerleyen süreçte Javascript ile element yakalama hakkında kapsamlı bir blog yazısı hazırlayıp sizlerle paylaşacağım.

Buraya kadar okuduğunuz için teşekkür ederim.

See the Pen Kodlayiruk – Javascript Slider by Kamil T. (@Likapa) on CodePen.

The post Javascript ile Slider Oluşturma appeared first on Kodlayiruk.

Mevcut bir iOS projesine Core Data eklerken gerekli olan birkaç şey vardır. Projenizi oluştururken “Use Core Data” onay kutusunu işaretlemediyseniz, o zaman Data Model dosyasına sahip olamayacaksınız. Diğer bir sorun ise, AppDelegate dosyanızda doğru kodun olmamasıdır.

Bu yazımda mecvut bir projede Core Data’yı kullanabilmek için neler yapmanız gerektiği ve projenize nasıl kolayca ekleyebileceğinizi göstereceğim.

Öncelikle Data Model dosyasını eklememiz gerekiyor.

New File>Data Model

Data Model dosyanızı ekledikten sonra AppDelegate dosyanızı güncellemeniz gerekiyor.

import CoreData

lazy var persistentContainer: NSPersistentContainer = {
        /*
         The persistent container for the application. This implementation
         creates and returns a container, having loaded the store for the
         application to it. This property is optional since there are legitimate
         error conditions that could cause the creation of the store to fail.
         */
        let container = NSPersistentContainer(name: {YOU NEED TO CHANGE THIS})
        container.loadPersistentStores(completionHandler: { (storeDescription, error) in
            if let error = error as NSError? {
                // Replace this implementation with code to handle the error appropriately.
                // fatalError() causes the application to generate a crash log and terminate. You should not use this function in a shipping application, although it may be useful during development.
                
                /*
                 Typical reasons for an error here include:
                 * The parent directory does not exist, cannot be created, or disallows writing.
                 * The persistent store is not accessible, due to permissions or data protection when the device is locked.
                 * The device is out of space.
                 * The store could not be migrated to the current model version.
                 Check the error message to determine what the actual problem was.
                 */
                fatalError("Unresolved error \(error), \(error.userInfo)")
            }
        })
        return container
    }()
    
    // MARK: - Core Data Saving support
    
    func saveContext () {
        let context = persistentContainer.viewContext
        if context.hasChanges {
            do {
                try context.save()
            } catch {
                // Replace this implementation with code to handle the error appropriately.
                // fatalError() causes the application to generate a crash log and terminate. You should not use this function in a shipping application, although it may be useful during development.
                let nserror = error as NSError
                fatalError("Unresolved error \(nserror), \(nserror.userInfo)")
            }
        }
    }

Bu kodu projenize eklediğinizde çalışmayacaktır. Kodunuzun Data Model oluşturduğunuz dosyanızla aynı ada sahip olması gerekiyor.

   let container = NSPersistentContainer(name: {YOU NEED TO CHANGE THIS})

Bu kısmı kendi Data Model adınızla değiştirdikten sonra projenizde Core Data kullabileceksiniz.

The post Mevcut Projeye Core Data Entegrasyonu appeared first on Kodlayiruk.

Öncelikle dosyamızın olduğu konumda terminal ekranı açıp pod init yazarak podfile’ımızı oluşturalım.

Cocopods’a aşina değilseniz, buraya bir göz atmanızı öneririm: https://www.raywenderlich.com/7076593-cocoapods-tutorial-for-swift-getting-started

SwiftGeni projemize entegre edelim ben bunun için en güvenli yol olan cocoapods’u kullanıyorum.Podfile dosyamızın ilgili kısmına aşağıdaki satırı ekleyelim.

pod 'SwiftGen'

sonrasında Podfile dosyamızın olduğu konumda terminal ekranı açalım ve aşağıdaki komut ile kütüphanenin projemize entegre olmasını sağlayalım.

pod install

Pods/SwiftGen’i oluşturduğumuzda klasör boş olacaktır. SwiftGen gerçek bir pod değildir.

SwiftGen swiftgen.yml dosyayasına ihtiyaç duyar. Aşağıdaki terminal komutu ile dosyayı oluşturalım.

touch swiftgen.yml

Bu komut bize swiftgen adında yml uzantılı bir dosya oluşturacak. Şimdi bu dosyayı Xcode ile açıp düzenleyelim.
Bu dosya içerisinde kodu oluşturulacak içeriğin tipi ve bu tip altında dosya konumu ve oluşturulacak içerik için bir dosya yolu belirtmemiz gerekmektedir.

// swiftgen.yml
xcassets:
  inputs: 
    - YourProjectName/Assets.xcassets // 1
  outputs:
    templateName: swift5 // 2
    output: ProjectName/Assets.swift // 3

Bir sonra ki aşamada Xcode’da bir Run Script’e ihtiyacımız var. Build Phases kısmından yeni bir Run Script ekleyip içeriğine aşağıdaki komutu yapıştırmamız gerekiyor.

if which swiftgen >/dev/null; then
  swiftgen
else
  echo "warning: SwiftGen not installed, download it from https://github.com/SwiftGen/SwiftGen"
fi

Run Script’in ne olduğu ve nasıl çalıştığı hakkında bilginiz yoksa, lütfen buraya bir göz atın: https://help.apple.com/xcode/mac/10.0/index.html?localePath=en.lproj#/devc8c930575

Bir sonra ki yazımda SwiftGen kullanımıyla ilgili örnekler olacak

The post SwiftGen appeared first on Kodlayiruk.