Kapsamlı Azazil Rehberi
Azazil, web arayüzlerini ve uygulamaları sıfır kodlama karmaşasıyla, tamamen Türkçe düşünme yapısıyla inşa etmenizi sağlayan yeni nesil bir dildir. Süslü parantezler, noktalı virgüller ve yüzlerce satırlık CSS dosyaları tarih oluyor.
Bu rehberde, bir bileşenin rengini değiştirmekten, farklı sayfalar arasında çalışan matematiksel sistemlere kadar her şeyi adım adım, kusursuz hizalamalarla (girintilerle) öğreneceksiniz.
En Önemli Kural: Girinti (Indentation)
Bir bileşenin alt özelliklerini yazmak için her zaman bir TAB tuşu (veya 4 boşluk) içeri girmelisiniz.
❌ Yanlış Kullanım (Aynı Hizada)
kutu: renk = "mavi" // HATA: Kutuyla aynı hizada! Kutuya etki etmez. metin "Merhaba" // HATA: Kutunun içinde görünmez, bağımsız olur.
✅ Doğru Kullanım (İçeride - Girintili)
kutu: renk = "mavi" // Doğru: Kutunun altında, 1 Tab içeride. Kutu mavi olur. köşe = 10 metin "Merhaba": // Doğru: Kutunun içinde. boyut = 20 // Doğru: Metnin bir alt kademesinde (2 Tab içeride).
Değişkenler
Kullanıcı adı, sepet tutarı, açılır menü durumu gibi verileri hafızada tutmak için değişken komutunu kullanırız. Değişkenler her zaman kodun en üst satırlarında tanımlanmalıdır.
// Metin verileri tırnak içine alınır değişken siteBasligi = "Azazil Projesi" değişken emailAdresi = "" // Boş bir metin kutusu // Sayısal veriler doğrudan yazılır değişken sayac = 0 değişken urunFiyati = 1250
Yazdır() Komutu
Uygulama çalışırken sistemin ne durumda olduğunu, değişkenlerin ne değer taşıdığını IDE üzerindeki Terminal (Konsol) ekranına yazdırmak için kullanılır.
buton "Test Et": olay tıklama: // Sabit bir mesaj gönder yazdır("Sistem başarıyla tetiklendi!") // Hafızadaki bir değişkenin o anki değerini gönder yazdır(urunFiyati)
Matematiksel İşlemler
Azazil, değişkenler arasında temel işlemleri (+, -, *, /) olayların (event) içerisinde yapmanıza olanak tanır.
değişken adet = 2 değişken fiyat = 50 değişken toplam = 0 buton "Sepeti Hesapla": olay tıklama: // Matematiksel hesaplama yapılıp yeni değişkene atanıyor toplam = adet * fiyat yazdır("Hesaplandı, yeni tutar:") yazdır(toplam)
Sayfa (Page)
Uygulamanızın taşıyıcı ana unsurudur. Uygulamalar birden fazla sayfadan (Örn: ana, profil, ayarlar) oluşabilir. Kod başlarken ilk tanımlanan sayfa ekranda açılır.
sayfa "ana": // Ana sayfanın içindeki tüm tasarımlar (1 Tab içeride) metin "Burası Ana Sayfa" sayfa "profil": // Profil sayfasının tasarımları (1 Tab içeride) metin "Burası Profil Sayfası"
Taşıyıcılar: Dikey, Yatay ve Kutu
Arayüzdeki bileşenleri yan yana dizmek, alt alta listelemek veya çerçeve içine almak için taşıyıcı blokları kullanırız.
dikey:İçine konulan her elemanı alt alta (sütun gibi) dizmeye zorlar. Sayfa yapılarını kurarken temel taşıdır.yatay:İçine konulan elemanları yan yana (satır gibi) dizer. Üst menüler (Navbar) veya kartları yan yana dizmek için kullanılır.kutu:Standart bir zarftır. Arka plan rengi vermek, kenarlarını yuvarlatmak ve kart (Card) tasarımı oluşturmak için idealdir.
yatay: boşluk = 20 // İçindeki elemanların arasına 20px mesafe koyar // 1. Kutu (Sol) kutu: renk = "mavi" metin "Sol Taraftaki Kutu" // 2. Kutu (Sağ) kutu: renk = "kırmızı" metin "Sağ Taraftaki Kutu"
Tasarım Özellikleri (CSS Alternatifleri)
Görsel özellikleri bileşenin hemen altına, 1 Tab (girinti) içeriye geçerek tanımlarız. Atama işlemi her zaman = ile yapılır.
| Özellik | Açıklama | Örnek Kullanımlar |
|---|---|---|
renk | Arka plan rengi. İsim (mavi, beyaz, gri) veya HEX kodu (#ffffff). | renk = "mavi" |
metin_rengi | Yazının rengi. İsim veya HEX kodu alabilir. | metin_rengi = "gri" |
genişlik | Ekranın ne kadarını kaplayacağı. Piksel veya % (Örn: "100%") kullanılabilir. "tam" %100 anlamına gelir. | genişlik = 300, genişlik = "tam" |
yükseklik | Bileşenin uzunluğu. | yükseklik = "tam", yükseklik = 500 |
hizalama | İçindeki elemanları merkeze, sağa, sola veya aralıklı yaymaya yarar. | hizalama = "merkez" (sol, sağ, ara) |
iç_boşluk | (Padding) İçerikten kutu kenarlarına doğru bırakılan nefes payı. CSS mantığıyla çoklu değer alabilir. | iç_boşluk = 20, iç_boşluk = "10px 40px" |
boşluk | (Gap) Yatay veya Dikey taşıyıcıların içindeki elemanlar arasındaki fiziki mesafe. | boşluk = 15 |
köşe | (Border-radius) Köşeleri yuvarlatır. | köşe = 16 |
gölge | Kartlara derinlik (3D) katar. | gölge = "hafif", "normal", "büyük" |
kaydırma | İçerik ekranı taştığında kaydırma (Scroll) çubuğu çıkartır. Sayfa bazında çok önemlidir. | kaydırma = "dikey", kaydırma = "yatay" |
boyut | Metinlerin punto büyüklüğü (Font size). | boyut = 24 |
kalınlık | Yazının tipi. | kalınlık = "kalın", kalınlık = "orta" |
kenarlık | Çizgi şeklinde dış kenarlık ekler. | kenarlık = "gri", kenarlık = "mavi" |
İçerik: Metin (Text)
Ekrana başlıklar ve paragraflar basmak için metin kullanılır. Tırnak içindeyse o sabit metni, tırnaksız ise o isimdeki değişkeni yazdırır.
değişken sepetTutari = 450 // Sabit Metin Kullanımı (Tırnaklı) metin "Alışveriş Sepetiniz": boyut = 28 kalınlık = "kalın" metin_rengi = "siyah" // Değişken Kullanımı (Tırnaksız) - Tutar değiştikçe ekrandaki sayı da otomatik güncellenir! metin sepetTutari: boyut = 20 metin_rengi = "mavi"
Giriş (Input) ve Reaktif UI Sistemi
Kullanıcıdan veri (e-posta, arama metni vb.) almak için giriş kutusu kullanılır. Azazil'in en güçlü yanı: Giriş bileşenleri daima bir değişkene bağlanır. Kullanıcı klavyeden o kutuya bir harf girdiği anda, o değişkenin bağlı olduğu her yer (metinler, resimler vb.) saniyede otomatik olarak güncellenir.
değişken canliArama = "" giriş canliArama: ipucu = "Aramak istediğiniz kelimeyi yazın..." genişlik = 300 köşe = 8 iç_boşluk = 15 // Kullanıcı yukarıdaki kutuya yazı yazarken, aşağıdaki metin eş zamanlı değişecektir! metin canliArama: boyut = 24 metin_rengi = "turuncu"
Olaylar (Tıklama ve Etkileşim)
Arayüzünüze etkileşim eklemek için olay bloğunu kullanırız. Genellikle butonların altında kullanılır.
olay kelimesinden 1 Tab (Girinti) daha içeride olmalıdır.
buton "Kaydet ve Çık": renk = "kırmızı" olay tıklama: // Olayın içindeki eylemler (Bir tık daha içeride!) veriDurumu = "Kaydedildi" yazdır("Kayıt işlemi veritabanına iletildi.")
Sayfa Yönlendirme: Git()
Oluşturduğunuz sayfalar arasında navigasyon yapmak için olayların içerisinde git("sayfa_ismi") kullanılır.
buton "Profilime Git": renk = "mavi" olay tıklama: git("profil_sayfasi")
🌟 Kapsamlı Uygulama Örnekleri
Aşağıdaki tam kod bloklarını kopyalayıp IDE ekranına (app.az) yapıştırarak kusursuz tasarımlı ve gerçek zamanlı test edebilirsiniz. Girintiler ve tasarımsal boşluklar IDE'de tam performans çalışacak şekilde iyileştirilmiştir.
1. Modern SaaS Landing Page
Kurumsal bir ürün tanıtım sitesi. Üst Menünün (Navbar) sağ-sol dengesi hizalama = "ara" ve sabit yükseklik ile düzeltildi. Özellik kartlarının oranları mükemmelleştirildi.
değişken emailAdresi = "" sayfa "ana": dikey: kaydırma = "dikey" genişlik = "tam" yükseklik = "tam" renk = "beyaz" // --- 1. ÜST MENÜ (NAVBAR) --- yatay: genişlik = "tam" iç_boşluk = "20px 40px" renk = "beyaz" gölge = "hafif" hizalama = "ara" metin "☁️ BulutDrive": boyut = 26 kalınlık = "kalın" metin_rengi = "mavi" yatay: boşluk = 30 hizalama = "merkez" metin "Özellikler": metin_rengi = "siyah" kalınlık = "orta" metin "Fiyatlar": metin_rengi = "siyah" kalınlık = "orta" buton "Giriş Yap": renk = "mavi" köşe = 8 iç_boşluk = "10px 24px" // --- 2. KAHRAMAN ALANI (HERO SECTION) --- dikey: genişlik = "tam" iç_boşluk = "80px 20px" hizalama = "merkez" boşluk = 20 renk = "açık_gri" metin "Verilerinizi Yeni Nesil Buluta Taşıyın": boyut = 42 kalınlık = "kalın" metin_rengi = "siyah" metin "Kurumunuz için en güvenli, hızlı ve sınırsız depolama.": boyut = 18 metin_rengi = "gri" yatay: boşluk = 15 iç_boşluk = 20 giriş emailAdresi: ipucu = "E-posta adresinizi girin..." genişlik = 300 köşe = 8 buton "Hemen Başla": renk = "siyah" kalınlık = "kalın" köşe = 8 iç_boşluk = "12px 24px" // --- 3. ÖZELLİK KARTLARI --- yatay: genişlik = "tam" hizalama = "merkez" iç_boşluk = 60 boşluk = 40 kutu: genişlik = 320 renk = "beyaz" köşe = 16 iç_boşluk = 30 gölge = "büyük" boşluk = 15 metin "🔒 Şifreleme": boyut = 22 kalınlık = "kalın" metin "Askeri düzeyde uçtan uca şifreleme ile tam güvenlik.": metin_rengi = "gri" kutu: genişlik = 320 renk = "beyaz" köşe = 16 iç_boşluk = 30 gölge = "büyük" boşluk = 15 metin "⚡ Yüksek Hız": boyut = 22 kalınlık = "kalın" metin "Dünyanın her yerinden dosyalarınıza saliseler içinde ulaşın.": metin_rengi = "gri"
2. Etkileşimli Not Defteri Panosu
Reaktif UI felsefesini şık bir tasarımla taçlandırıyoruz. Sol taraftaki beyaz forma yazdıklarınız, sağ taraftaki koyu renkli karanlık karta gerçek zamanlı olarak ve şık bir fontla anında geçecek.
değişken baslik = "" değişken icerik = "" sayfa "ana": dikey: genişlik = "tam" yükseklik = "tam" renk = "açık_gri" hizalama = "merkez" boşluk = 30 metin "📌 Akıllı Not Defteri": boyut = 32 kalınlık = "kalın" metin_rengi = "siyah" yatay: boşluk = 30 hizalama = "merkez" // SOL TARAF: FORM kutu: renk = "beyaz" genişlik = 350 iç_boşluk = 30 köşe = 16 gölge = "normal" boşluk = 20 metin "Yeni Not Ekle": kalınlık = "kalın" boyut = 20 giriş baslik: ipucu = "Not Başlığı..." köşe = 8 giriş icerik: ipucu = "Notunuzu yazın..." köşe = 8 buton "Temizle": renk = "kırmızı" genişlik = "tam" köşe = 8 olay tıklama: baslik = "" icerik = "" // SAĞ TARAF: CANLI KART kutu: renk = "siyah" genişlik = 350 yükseklik = 310 iç_boşluk = 30 köşe = 16 gölge = "büyük" boşluk = 15 metin "Canlı Önizleme": metin_rengi = "gri" kutu: renk = "gri" genişlik = "tam" yükseklik = 1 boşluk = 10 metin baslik: boyut = 24 kalınlık = "kalın" metin_rengi = "mavi" metin icerik: boyut = 16 metin_rengi = "beyaz"
3. Profesyonel Güvenli Giriş Ekranı (Routing)
Zarif bir giriş paneli ve `git()` fonksiyonu ile sayfalar arası geçişin estetik tasarımı.
değişken eposta = "" değişken sifre = "" // SAYFA 1: GİRİŞ EKRANI sayfa "giris": dikey: yükseklik = "tam" genişlik = "tam" hizalama = "merkez" renk = "mavi" kutu: renk = "beyaz" iç_boşluk = 40 köşe = 24 boşluk = 20 gölge = "büyük" genişlik = 380 hizalama = "merkez" metin "🔐": boyut = 48 metin "Yönetim Paneli": boyut = 24 kalınlık = "kalın" giriş eposta: ipucu = "E-posta adresiniz..." köşe = 8 genişlik = "tam" giriş sifre: ipucu = "Şifreniz..." köşe = 8 genişlik = "tam" buton "Güvenli Giriş Yap": renk = "siyah" genişlik = "tam" köşe = 8 iç_boşluk = 15 olay tıklama: git("panel") // SAYFA 2: BAŞARILI GİRİŞ PANELİ sayfa "panel": dikey: yükseklik = "tam" genişlik = "tam" hizalama = "merkez" renk = "açık_gri" boşluk = 20 kutu: renk = "beyaz" iç_boşluk = 40 köşe = 24 gölge = "büyük" hizalama = "merkez" boşluk = 15 metin "✅ Başarılı!": boyut = 32 metin_rengi = "yeşil" kalınlık = "kalın" yatay: boşluk = 10 metin "Hoş Geldin:": metin_rengi = "gri" metin eposta: kalınlık = "kalın" metin_rengi = "siyah" buton "Çıkış Yap": renk = "kırmızı" köşe = 8 olay tıklama: eposta = "" sifre = "" git("giris")
4. E-Ticaret Sepet Kartı Modülü
Uygulama içi dinamik matematiği ve arayüz içi harika hizalamayı gösteren çok daha temiz bir ödeme ekranı kartı tasarımı.
değişken adet = 1 değişken fiyat = 850 değişken toplam = 850 sayfa "ana": dikey: yükseklik = "tam" genişlik = "tam" hizalama = "merkez" renk = "siyah" kutu: renk = "beyaz" genişlik = 450 iç_boşluk = "30px 40px" köşe = 24 gölge = "büyük" boşluk = 25 metin "🛍️ Sepetiniz": boyut = 24 kalınlık = "kalın" kutu: renk = "açık_gri" iç_boşluk = 20 köşe = 16 boşluk = 15 metin "Mekanik Klavye - Pro": kalınlık = "kalın" boyut = 18 metin "Birim Fiyat: 850 TL": metin_rengi = "gri" yatay: hizalama = "ara" metin "Miktar:": metin_rengi = "siyah" yatay: boşluk = 15 hizalama = "merkez" buton "-": renk = "kırmızı" köşe = 8 olay tıklama: adet = adet - 1 toplam = adet * fiyat metin adet: boyut = 20 kalınlık = "kalın" buton "+": renk = "yeşil" köşe = 8 olay tıklama: adet = adet + 1 toplam = adet * fiyat kutu: renk = "gri" genişlik = "tam" yükseklik = 1 yatay: hizalama = "ara" metin "Toplam Ödenecek:": metin_rengi = "gri" boyut = 18 yatay: boşluk = 8 hizalama = "merkez" metin toplam: boyut = 28 kalınlık = "kalın" metin_rengi = "mavi" metin "TL": boyut = 20 metin_rengi = "mavi" buton "Siparişi Tamamla": renk = "mavi" genişlik = "tam" köşe = 12 iç_boşluk = 15 kalınlık = "kalın"
5. Yönetim Paneli (Admin Dashboard)
Modern bir web uygulamasının kalbi. Ekranı Sol Menü (Sidebar) ve Sağ İçerik Alanı olarak yatay böler. Siyah sidebar ve beyaz istatistik kartlarının oluşturduğu o profesyonel zıtlık çok iyi yansıtılmıştır.
değişken yeniKayit = 128 değişken aktifZiyaretci = 45 sayfa "ana": yatay: genişlik = "tam" yükseklik = "tam" renk = "açık_gri" // --- SOL MENÜ (Sidebar) --- dikey: genişlik = 260 yükseklik = "tam" renk = "siyah" iç_boşluk = 30 boşluk = 30 yatay: boşluk = 10 hizalama = "merkez" metin "⚡": boyut = 24 metin "Yönetim": boyut = 22 metin_rengi = "beyaz" kalınlık = "kalın" dikey: boşluk = 20 metin "📊 Panel": metin_rengi = "mavi" metin "👥 Kullanıcılar": metin_rengi = "gri" metin "🛍️ Siparişler": metin_rengi = "gri" metin "⚙️ Ayarlar": metin_rengi = "gri" // --- SAĞ İÇERİK ALANI --- dikey: kaydırma = "dikey" genişlik = "tam" iç_boşluk = 50 boşluk = 40 yatay: hizalama = "ara" genişlik = "tam" metin "Gösterge Paneli": boyut = 28 kalınlık = "kalın" metin_rengi = "siyah" buton "Rapor İndir": renk = "mavi" köşe = 8 // İstatistik Kartları yatay: boşluk = 30 genişlik = "tam" kutu: renk = "beyaz" köşe = 16 gölge = "normal" iç_boşluk = 30 boşluk = 15 genişlik = 280 metin "Yeni Kayıtlar": metin_rengi = "gri" boyut = 18 yatay: hizalama = "ara" metin yeniKayit: boyut = 42 kalınlık = "kalın" metin_rengi = "mavi" metin "📈": boyut = 24 kutu: renk = "beyaz" köşe = 16 gölge = "normal" iç_boşluk = 30 boşluk = 15 genişlik = 280 metin "Aktif Ziyaretçi": metin_rengi = "gri" boyut = 18 yatay: hizalama = "ara" metin aktifZiyaretci: boyut = 42 kalınlık = "kalın" metin_rengi = "yeşil" metin "🔥": boyut = 24