Pardus ETAP 23 İçin Tauri ile Uygulama Geliştirme

-

Ülkemizdeki eğitim teknolojilerinin kalbi olan Pardus ETAP (Etkileşimli Tahta Projesi), her geçen gün daha fazla sınıfa giriyor. Peki, bu dev dokunmatik ekranlar için uygulama geliştirmek sandığınız kadar zor mu? C++ veya karmaşık sistem dilleri bilmeniz gerekiyor mu?

Cevap: Hayır. Bildiğiniz HTML, CSS ve JavaScript ile, tahtanın donanımına (USB, Ses vb.) hükmeden, performansı yüksek profesyonel uygulamalar geliştirebilirsiniz.

Bu rehberde, "Pardus Sınıf Asistanı" adında gerçek bir projeyi sıfırdan geliştireceğiz. Uygulamamız şunları yapacak:

  1. Sınavlar için Geri Sayım Sayacı.

  2. Sınıf listesinden Rastgele Öğrenci Seçme.

Hazırsanız, sınıfın geleceğini kodlamaya başlayalım!

Bölüm 1: Neden Tauri Seçmeliyiz?

Pardus ETAP tahtalarının donanımları okuldan okula değişir (Eski i3 işlemciler veya yeni nesil i7'ler). Bu yüzden performans her şeydir.

  • Electron: İçinde koca bir Google Chrome tarayıcısı barındırır. Çok RAM yer, dosya boyutu büyüktür (100MB+).

  • Tauri (Bizim Tercihimiz): İşletim sisteminin kendi web motorunu kullanır. Çok hafiftir, RAM tüketmez ve dosya boyutu sadece 3-5 MB civarındadır.

Bölüm 2: Kurulum ve Hazırlık

Geliştirme yapacağınız bilgisayarda (Pardus veya Linux dağıtımı) öncelikle gerekli kütüphaneleri ve Rust dilini kurmalıyız. Terminali açın ve sırasıyla uygulayın:

1. Sistem Kütüphaneleri:

Bash
sudo apt update
sudo apt install libwebkit2gtk-4.1-dev build-essential curl wget libssl-dev libgtk-3-dev libayatana-appindicator3-dev librsvg2-dev

2. Rust Dilinin Kurulumu: Tauri'nin arkasındaki güç olan Rust'ı kuruyoruz:

Bash:
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

Kurulum bitince terminali kapatıp açın veya source "$HOME/.cargo/env" komutunu uygulayın.

3. Node.js ve npm Kurulumu

a. Paket Listesini Güncelleyin

Önce Pardus'un market listesini yenileyelim. Terminali açın ve şu komutu girin:

Bash:
sudo apt update

b. Node.js ve npm'i Kurun

Pardus (Debian tabanlı sistemler) nodejs ve npm (paket yöneticisi) paketlerini ayrı ayrı tutar. İkisini de kurmanız gerekir:

Bash:
sudo apt install nodejs npm -y 

Alternatif (Node.js ve npm'i Kurun)

Pardus'un kendi deposundaki Node.js sürümü bazen eski olabilir. En güncel ve stabil (LTS) sürümü kurmak için NodeSource kaynağını ekleyelim:

Bash:
# Kurulum betiğini indir ve çalıştır
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -

# Node.js'i kur
sudo apt install -y nodejs

Kurulduğunu doğrulamak için:

Bash:
node -v
npm -v

(Ekranda v20.x.x gibi sayılar görmelisin.)

4. Tauri CLI Aracını Kur

Son olarak, projeleri oluşturmamızı sağlayan Tauri komut satırı aracını kuralım:

Bash:
cargo install tauri-cli

(Bu işlem Rust derlemesi yapacağı için bilgisayarının hızına göre 2-5 dakika sürebilir.)

Bölüm 3: Projeyi Oluşturma

Terminalde proje klasörünü oluşturmak istediğiniz yere gelin ve sihirli komutu yazın:

Bash:
npm create tauri-app@latest

  • Project name: pardus-sinif-asistani

  • Frontend language: JavaScript

  • UI Template: Vanilla (En sade hali)

Proje klasörüne girip gerekli paketleri yükleyelim. Ayrıca Excel okumak için xlsx kütüphanesini de ekleyelim:

Bash
cd pardus-sinif-asistani
npm install
npm install xlsx

Bölüm 4: Arayüz Tasarımı (HTML & CSS)

Akıllı tahtalar için tasarım yaparken "Şişman Parmak Kuralı" geçerlidir. Butonlar büyük olmalı ve metinler yanlışlıkla seçilmemelidir.

src/index.html dosyasını açın ve şu yapıyı kurun:

HTML:
<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Pardus Sınıf Asistanı</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <div class="container">
    
    <div class="card timer-section">
      <h2>⏳ Ders Sayacı</h2>
      <div id="timer-display">40:00</div>
      <div class="controls">
        <button id="btn-start" class="btn primary">Başlat</button>
        <button id="btn-stop" class="btn danger">Durdur</button>
        <button id="btn-reset" class="btn secondary">Sıfırla</button>
      </div>
      <div class="presets">
        <button onclick="setTimer(10)">10 Dk</button>
        <button onclick="setTimer(40)">40 Dk</button>
      </div>
    </div>

    <div class="card lottery-section">
      <h2> Talihli Öğrenci</h2>
      <textarea id="student-list" placeholder="Her satıra bir isim yazınız...">Ali
Ayşe
Mehmet
Zeynep
Can</textarea>
      <button id="btn-pick" class="btn success full-width">Kura Çek!</button>
      <div id="winner-display">???</div>
    </div>

  </div>
  <script src="main.js" defer></script>
</body>
</html>

src/styles.css dosyasını açın. Burada **"Dokunmatik Ekran Kuralları"**nı uygulayacağız (seçimi kapatmak, büyük fontlar vb.).

CSS:
:root {
  --bg-color: #f0f2f5;
  --card-bg: #ffffff;
  --primary: #3498db; /* Pardus Mavisi */
  --danger: #e74c3c;
  --success: #2ecc71;
  --text: #2c3e50;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: var(--bg-color);
  color: var(--text);
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  /* KRİTİK: Tahtada yanlışlıkla metin seçimini engeller */
  user-select: none; 
  -webkit-user-select: none;
  overflow: hidden;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  width: 95%;
  height: 90%;
}

.card {
  background: var(--card-bg);
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

h2 { margin-top: 0; font-size: 2rem; color: var(--primary); }

/* Sayaç Stilleri */
#timer-display {
  font-size: 8rem;
  font-weight: bold;
  font-variant-numeric: tabular-nums; /* Rakamların titremesini önler */
  margin: 20px 0;
}

/* Kura Stilleri */
textarea {
  width: 90%;
  height: 150px;
  font-size: 1.2rem;
  padding: 10px;
  border: 2px solid #ddd;
  border-radius: 8px;
  user-select: text; /* Sadece buraya yazı yazılabilir */
}

#winner-display {
  font-size: 3rem;
  font-weight: bold;
  color: var(--success);
  margin-top: 20px;
  min-height: 60px;
}

/* Butonlar - Şişman Parmak Dostu */
.btn {
  padding: 15px 30px;
  font-size: 1.5rem;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  color: white;
  margin: 5px;
  transition: transform 0.1s;
}

.btn:active { transform: scale(0.95); }
.primary { background-color: var(--primary); }
.danger { background-color: var(--danger); }
.success { background-color: var(--success); }
.secondary { background-color: #95a5a6; }
.full-width { width: 100%; margin-top: 10px; }

.presets button {
  padding: 10px 20px;
  font-size: 1.2rem;
  background: #ecf0f1;
  border: 1px solid #bdc3c7;
  border-radius: 5px;
  cursor: pointer;
}

Bölüm 6: Frontend Mantığı (JavaScript)

src/main.js dosyasını açın. Sayaç ve kura mantığını buraya yazıyoruz.

JavaScript:
// --- SAYAÇ MANTIĞI ---
let timeLeft = 40 * 60; // 40 dakika (saniye cinsinden)
let timerInterval = null;

const display = document.getElementById("timer-display");

function updateDisplay() {
  const minutes = Math.floor(timeLeft / 60);
  const seconds = timeLeft % 60;
  display.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
}

// Global fonksiyona ata (HTML'den çağırmak için)
window.setTimer = (minutes) => {
  stopTimer();
  timeLeft = minutes * 60;
  updateDisplay();
};

function startTimer() {
  if (timerInterval) return;
  timerInterval = setInterval(() => {
    if (timeLeft > 0) {
      timeLeft--;
      updateDisplay();
    } else {
      stopTimer();
      // Basit bir uyarı sesi çalınabilir veya renk değiştirilebilir
      display.style.color = "red";
    }
  }, 1000);
}

function stopTimer() {
  clearInterval(timerInterval);
  timerInterval = null;
}

function resetTimer() {
  stopTimer();
  timeLeft = 40 * 60;
  display.style.color = "var(--text)";
  updateDisplay();
}

document.getElementById("btn-start").addEventListener("click", startTimer);
document.getElementById("btn-stop").addEventListener("click", stopTimer);
document.getElementById("btn-reset").addEventListener("click", resetTimer);

// --- KURA MANTIĞI ---
const studentList = document.getElementById("student-list");
const winnerDisplay = document.getElementById("winner-display");
const pickBtn = document.getElementById("btn-pick");

pickBtn.addEventListener("click", () => {
  const text = studentList.value;
  // Boş satırları temizle
  const students = text.split("\n").filter(name => name.trim() !== "");

  if (students.length === 0) {
    winnerDisplay.textContent = "Liste Boş!";
    return;
  }

  // Animasyon efekti
  let count = 0;
  pickBtn.disabled = true;
  
  const interval = setInterval(() => {
    // Rastgele isim göster (animasyon)
    const randomIndex = Math.floor(Math.random() * students.length);
    winnerDisplay.textContent = students[randomIndex];
    count++;

    if (count > 20) { // 20 kez döndükten sonra dur
      clearInterval(interval);
      pickBtn.disabled = false;
      winnerDisplay.style.transform = "scale(1.2)";
      setTimeout(() => winnerDisplay.style.transform = "scale(1)", 200);
    }
  }, 100);
});

// Başlangıçta ekranı güncelle
updateDisplay();
Kaynak Kod : https://github.com/nuritiras/sinif-asistani

Bölüm 7: Pardus İçin Ayarlama ve Paketleme

Şimdi bu uygulamayı Pardus ETAP'a kurulabilir bir .deb dosyası haline getirelim.

  1. src-tauri/tauri.conf.json dosyasını açın.

  2. identifier kısmını benzersiz yapın (Örn: com.nuri.sinif-asistani).

  3. bundle kısmının altında deb dizisinin olduğundan emin olun (Tauri v2 için bundle ayarları biraz farklı olabilir, ama varsayılan ayarlar genellikle yeterlidir).

Çalıştırma ve Test Etme: Önce geliştirici modunda deneyin:

Bash
npm run tauri dev

Paketleme (.deb): Her şey düzgün çalışıyorsa, Pardus kurulum dosyasını oluşturun:

Bash
npm run tauri build

Sonuç: src-tauri/target/release/bundle/deb/pardus-sinif-asistani_0.1.0_amd64.deb yolunda dosyanız hazır! Bunu bir USB belleğe atıp herhangi bir Pardus ETAP tahtasına kurabilirsiniz.

Yorumlar

Yorum Gönder

Bu blogdaki popüler yayınlar

Android Telefon/Tablet Ekranını Pardus ETAP 23 Yüklü Akıllı Tahtaya Yansıtma

-
Resim
Bu eğitim, öğretmenlerin Android tablet veya telefonlarının ekranını kolayca tahta ekranına yansıtmaları için gereken tüm yöntemler ayrıntılı şekilde anlatılmaktadır. 1. Giriş Android cihazı akıllı tahtaya yansıtmanın amacı: Dersi telefondan yönetmek Mobil uygulamaları sınıfa göstermek YouTube, EBA, PDF, görsel veya kamera görüntüsünü aktarmak Kablosuz sunum yapmak Pardus ETAP 23 üzerinde yansıtma işlemi için en çok tercih edilen yöntemler: Scrcpy (USB + WiFi bağlantılı) — En stabil çözüm Third-party çözümler (TeamViewer Host, DeskScreen, Vysor vb.) Bu makalede en garantili ve ETAP 23’e en uyumlu yöntem olan Scrcpy başta olmak üzere tüm yöntemleri anlatıyoruz. 2. Scrcpy ile Yansıtma Scrcpy, Android cihazınızı yüksek kalite / düşük gecikme ile bilgisayara aktaran açık kaynaklı bir yazılımdır. Pardus ETAP 23 için mükemmel uyumludur. ✔️ 2.1. Kurulum Adım 1 — Gerekli paketleri yükle Terminali açın: sudo apt update sudo apt install scrcpy adb android-to...
Devamı

Pardus Etap 23’de Unutulmuş Etap Yetkili Parolasını Sıfırlama

-
Resim
Bu kısa eğitimde, Pardus sisteminde unutulmuş bir Etap Yetkli parolasının nasıl sıfırlanacağını öğreneceksiniz. Bu, etapadmin kullanıcısı olarak oturum açma ve yönetim görevlerini gerçekleştirme yeteneğinizi yeniden kazanmanıza yardımcı olacaktır. Öncelikle Pardus sisteminizi açın veya yeniden başlatın. Aşağıda gösterildiği gibi bir GRUB menüsüyle karşılaşacaksınız. İlk seçenekte devam edin ve sistem başlatılmadan önce klavyedeki " e " tuşuna basın. . Bu sizi aşağıda gösterilen ekrana yönlendirecektir. Aşağı kaydırın ve /boot/vmlinuz-* bölümünden önce gelen ve UUID 'yi de belirten ' linux ' ile başlayan satırı bulun.   İmleci bu satırın sonuna götürün ve ‘ ro quiet’ bölümünden hemen sonrasına getirin ve init=/bin/bash. parametresini ekleyin Ardından, kök dosya sistemini salt okunur (ro) erişim haklarıyla bağlayarak tek kullanıcı modunda önyüklemeyi etkinleştirmek için Ctrl + x tuşlarına basın. Parolayı sıfırlamak için erişim hakkını salt okunurdan okuma-ya...
Devamı

Pardus Başlangıç Onarma

-
Resim
Windows sisteminizi Pardus ile çift önyüklemeye çalıştıysanız, muhtemelen hoşunuza gitmeyebilecek bazı değişikliklerle karşılaşmışsınızdır. Bu ortama Pardus kurarken, GRUB önyükleyicisi, Ana Önyükleme Kaydı'ndaki (MBR) Windows önyükleyicisinin üzerine yazar. Aynı şey tersi için de geçerlidir: Önce Pardus kurduysanız ve sonra Windows kurmaya karar verdiyseniz, Windows önyükleyicisi GRUB'u üzerine yazacaktır ve Pardus Masaüstünüzü başlatmanın bir yolu olmadığını göreceksiniz. Son olarak, Windows'ta yapılan herhangi bir büyük değişiklik, önyükleyicinizi de değiştirebilir ve kullanılamaz hale getirebilir. Bu durum,  Windows 10'dan   Windows 11 yükseltmesinde  de geçerlidir . Bu senaryoların her biri yeni kullanıcı için sorunlu olabilir, biraz sabır ve özenle önyükleyiciyi geri yüklemenin ve bu süreçte MBR'yi onarmanın yolları var. İlk adım, Pardus canlı CD'nizi veya USB'nizi indirip oluşturmaktır. Farklı bir bilgisayar kullanarak Pardus  web sitesine  gidin ve m...
Devamı