Konuşan Kodlar

Web Speech API ile kodları sesli olarak açıklayan interaktif örnekler. Kod örneklerinin üzerine gelin ve açıklamalarını dinleyin.

1
Kod üzerine gelin
2
Sesli açıklamayı dinleyin
3
Öğrenin ve uygulayın
JavaScript Baslangic
7 
// ZebifyTech Konuşan Kodlar'a Hoş Geldiniz 🎙️
// Bu örnek, dinamik bir karşılama mesajı oluşturur.

const platform = "ZebifyTech";
const bolum = "Konuşan Kodlar";

function hosGeldiniz() {
  const mesaj = `👋 ${platform} ${bolum} bölümüne hoş geldiniz! 
Burada her satır kod, sadece yazılmak için değil, anlaşılmak için var.`;
  console.log(mesaj);
}

hosGeldiniz();

ZebifyTech Konuşan Kodlar’a Hoş Geldiniz

Detay

Kodun sadece yazıldığı değil, anlatıldığı bir dünyadasınız! ZebifyTech Konuşan Kodlar, yazılımın satır aralarındaki mantığı sesle buluşturan etkileşimli bir öğrenme alanıdır. Burada PHP’den React’e, Python’dan Laravel’e kadar farklı dillerdeki kod örneklerini yalnızca görmekle kalmaz, neden o şekilde yazıldığını da duyarsınız. Her örnek, gerçek projelerden alınmış kısa ama öğretici bir hikaye anlatır — bazen ciddi, bazen eğlenceli ama her zaman öğretici. Bizim için teknoloji sadece bir araç değil; fikirleri anlatmanın evrensel dili. Hazırsanız, kulaklığınızı takın ve birlikte kodun sesini duyalım!

Symfony Orta
10 
// src/Controller/AnasayfaController.php
namespace App\Controller;

use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;

class AnasayfaController extends AbstractController
{
    #[Route('/', name: 'anasayfa')]
    public function index(): Response
    {
        $veri = [
            'baslik' => 'Symfony Twig Örneği',
            'icerik' => 'Zebifytech Symfony ile modern PHP uygulamaları geliştiriyor 🚀'
        ];

        return $this->render('anasayfa.html.twig', $veri);
    }
}


// templates/anasayfa.html.twig
<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>{{ baslik }}</title>
</head>
<body>
  <h2>{{ baslik }}</h2>
  <p>{{ icerik }}</p>
</body>
</html>

Symfony’de Twig Şablon Motoru Kullanımı

Detay

Symfony, Blade benzeri bir şablon sistemi olan Twig kullanır. Aşağıdaki örnekte Controller’dan Twig şablonuna veri gönderiyoruz. Bu yapı, kurumsal sitelerde dinamik içerikleri yönetmek için idealdir.

Symfony Baslangic
3 
// src/Controller/IletisimController.php
namespace App\Controller;

use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;

class IletisimController extends AbstractController
{
    #[Route('/iletisim', name: 'iletisim')]
    public function index(): Response
    {
        return new Response("<h2>Symfony Konuşan Kod - İletişim Sayfası</h2>");
    }
}

Symfony ile Sayfa Route ve Controller Oluşturma

Detay

Symfony projelerinde her sayfa bir Controller aracılığıyla tanımlanır. Bu örnekte /iletisim adresi için bir Route oluşturup, basit bir metin döndürüyoruz. Symfony’nin Route yapısı, güçlü URL yönetimi ve temiz kod standartları sağlar.

Laravel Orta
4 
// routes/web.php
use App\Http\Controllers\FormController;
use Illuminate\Support\Facades\Route;

Route::get('/form', [FormController::class, 'show']);
Route::post('/form', [FormController::class, 'store'])->name('form.store');


// app/Http/Controllers/FormController.php
namespace App\Http\Controllers;
use App\Models\Musteri;
use Illuminate\Http\Request;

class FormController extends Controller
{
    public function show() {
        return view('form');
    }

    public function store(Request $request) {
        Musteri::create([
            'ad' => $request->ad,
            'email' => $request->email,
        ]);
        return back()->with('success', 'Kayıt başarıyla oluşturuldu!');
    }
}


// resources/views/form.blade.php
<form action="{{ route('form.store') }}" method="POST">
  @csrf
  <input type="text" name="ad" placeholder="Adınız">
  <input type="email" name="email" placeholder="E-posta">
  <button type="submit">Kaydet</button>
</form>

Laravel’de Form Gönderimi ve Veritabanına Kayıt

Detay

Laravel form işlemleri oldukça güvenlidir. Bu örnekte bir form aracılığıyla kullanıcıdan veri alıp, create() metodu ile veritabanına kaydediyoruz. Laravel’in csrf_token koruması sayesinde form güvenliği otomatik sağlanır.

Laravel Baslangic
6 
// routes/web.php
use App\Http\Controllers\AnasayfaController;
use Illuminate\Support\Facades\Route;

Route::get('/', [AnasayfaController::class, 'index']);


// app/Http/Controllers/AnasayfaController.php
namespace App\Http\Controllers;

use Illuminate\Http\Request;

class AnasayfaController extends Controller
{
    public function index()
    {
        $mesaj = "Laravel Route ve Controller örneği";
        return view('welcome', compact('mesaj'));
    }
}


// resources/views/welcome.blade.php
<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>Laravel Konuşan Kod</title>
</head>
<body>
  <h2>{{ $mesaj }}</h2>
</body>
</html>

Laravel Route ve Controller Mantığı

Detay

Laravel’de her isteğin bir Route üzerinden karşılanması gerekir. Bu örnekte bir Route tanımlayıp onu Controller’a yönlendiriyoruz. Controller, gelen isteği işleyip kullanıcıya yanıt döner. Bu yapı, Laravel’in MVC mimarisinin temelidir.

Node.js Orta
6 
const express = require("express");
const app = express();
const port = 4000;

app.get("/api/kullanicilar", (req, res) => {
  res.json([
    { ad: "Bilal", sehir: "Manisa" },
    { ad: "Metin", sehir: "İzmir" },
  ]);
});

app.listen(port, () => {
  console.log(`API http://localhost:${port} adresinde çalışıyor 🚀`);
});

Node.js ile Express Framework Kullanarak API Geliştirme

Detay

Express.js, Node.js ile RESTful API’ler geliştirmek için en popüler framework’tür. Aşağıdaki örnek, basit bir “/api/kullanicilar” endpoint’i oluşturur ve JSON formatında yanıt döner.

Node.js Baslangic
4 
const http = require("http");

const server = http.createServer((req, res) => {
  res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
  res.end("<h2>Zebifytech Node.js Sunucusu Aktif 🚀</h2>");
});

server.listen(3000, () => {
  console.log("Sunucu 3000 portunda çalışıyor...");
});

Node.js ile Basit HTTP Sunucusu Oluşturma

Detay

Node.js, JavaScript’i sunucu tarafında çalıştırmamıza olanak tanır. Aşağıdaki örnekte http modülünü kullanarak basit bir web sunucusu oluşturuyoruz. Tarayıcıda “localhost:3000” adresine girdiğinizde özel bir mesaj dönecektir.

Angular Orta
4 
// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  urunler = [
    { ad: "GrandX Evye", stok: true },
    { ad: "Nano Batarya", stok: false },
    { ad: "Mutfak Dolabı", stok: true }
  ];
}

Angular ile *ngFor ve *ngIf Kullanımı (Liste ve Koşul Görünümü)

Detay

Angular’da *ngFor ve *ngIf direktifleri, dinamik veri gösterimi için en sık kullanılan yapılardır. Bu örnekte, bir ürün listesi oluşturuyoruz ve stokta olmayan ürünleri koşullu olarak gizliyoruz.

Angular Orta
4 
// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  mesaj: string = "Zebifytech Angular örneği";
}

Angular ile Veri Bağlama (Two-Way Binding)

Detay

Angular’da veriler iki yönlü olarak bağlanabilir: hem bileşen (component) hem HTML tarafı birbirini anında günceller. Bu örnekte, [(ngModel)] kullanarak input alanındaki değişikliğin anında ekranda yansımasını sağlıyoruz. Bu yapı, formlar ve dinamik arayüzlerde temel bir Angular yeteneğidir.

Vue.js Orta
4 
<div id="app">
  <h2>Koşullu Görünüm Örneği</h2>
  <button @click="goster = !goster">
    {{ goster ? "Gizle" : "Göster" }}
  </button>

  <p v-if="goster">🎉 Vue.js ile koşullu görünüm aktif!</p>
  <p v-else>💡 Mesaj gizlendi.</p>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const { createApp } = Vue;
createApp({
  data() {
    return {
      goster: true
    };
  }
}).mount("#app");
</script>

Vue.js ile Koşullu Görünüm (v-if / v-else)

Detay

Vue.js’te v-if ve v-else direktifleri, bileşenlerin veya HTML elemanlarının görünürlüğünü koşula göre kontrol etmemizi sağlar. Bu örnekte bir butona tıklayarak mesajın görünümünü değiştiriyoruz. Bu yapı, bildirim sistemlerinden dinamik menülere kadar birçok senaryoda kullanılır.

Vue.js Orta
4 
<div id="app">
  <h2>Canlı Veri Bağlama Örneği</h2>
  <input v-model="mesaj" placeholder="Bir şey yaz...">
  <p>{{ mesaj }}</p>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const { createApp } = Vue;
createApp({
  data() {
    return {
      mesaj: "Zebifytech Vue.js örneği 🚀"
    };
  }
}).mount("#app");
</script>

Vue.js ile Veri Bağlama (Data Binding)

Detay

Vue.js’in en güçlü yanlarından biri, veri bağlama (data binding) özelliğidir. Bu özellik sayesinde HTML içindeki değerler, JavaScript’te tanımlanan verilere otomatik olarak bağlanır. Aşağıdaki örnekte, kullanıcının yazdığı metin anında ekrana yansıyor — tamamen canlı etkileşim! Bu yapı, form verileri, dinamik arayüzler ve anlık hesaplamalar için vazgeçilmezdir.

React Orta
8 
import React, { useEffect, useState } from "react";

function KullaniciListesi() {
  const [veri, setVeri] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((res) => res.json())
      .then((data) => setVeri(data))
      .catch(() => console.log("Veri çekme hatası!"));
  }, []);

  return (
    <div style={{ padding: 30 }}>
      <h2>Kullanıcı Listesi</h2>
      <ul>
        {veri.map((kullanici) => (
          <li key={kullanici.id}>{kullanici.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default KullaniciListesi;

React’ta useEffect Kullanımı (Veri Çekme ve Güncelleme)

Detay

React’ta useEffect Hook’u, bileşen ilk yüklendiğinde veya belirli bir değişken değiştiğinde çalıştırılacak kodları tanımlar. Bu örnekte, bileşen her yüklendiğinde API’den veri çeken basit bir uygulama oluşturuyoruz. Gerçek projelerde bu yapı genellikle “sayfa açıldığında veriyi yükle” mantığı için kullanılır.

Web Speech API Nasıl Çalışır?

Modern tarayıcıların sunduğu Web Speech API ile kodları sesli olarak açıklıyoruz.

Hover Efekti

Kod bloğunun üzerine mouse ile geldiğinizde otomatik olarak sesli açıklama başlar.

Sesli Açıklama

Web Speech API kullanılarak kod açıklaması Türkçe olarak seslendirilir.

Öğrenme

Görsel ve işitsel öğrenme ile kodları daha kolay anlayabilir ve öğrenebilirsiniz.

Kendi Konuşan Kodunuzu Oluşturun

Web Speech API ile kendi projelerinizde de konuşan kod örnekleri oluşturabilirsiniz.

Proje Danışmanlığı Öğreticileri İncele