Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitmen tarafından sunulan kapsamlı bir web geliştirme eğitim içeriğidir. Eğitmen, JavaScript, Tailwind CSS ve Jason Server kullanarak basit bir mesaj uygulaması geliştirme sürecini adım adım göstermektedir.
- Video, POST metodu kullanarak sunucuya veri kaydetme işleminden başlayarak, Tailwind CSS'in projeye nasıl ekleneceği, yapılandırılacağı ve temel özelliklerinin nasıl kullanılacağı konularını ele almaktadır. Daha sonra Jason Server modülünün kurulumu, form verilerinin sunucuya gönderilmesi ve veritabanına veri ekleme işlemleri anlatılmaktadır. Son bölümde ise JSON veri yapısında sorgulama komutları gösterilmektedir.
- Eğitim boyunca form oluşturma, Tailwind CSS ile tasarım yapma, npm paket yöneticisi kullanarak Tailwind CSS'i projeye ekleme, fetch fonksiyonu ile sunucuya post işlemi yapma, veritabanına veri kaydetme ve sorgulama işlemleri gibi pratik uygulamalar sunulmaktadır. Ayrıca, Tailwind CSS intellisense eklentisinin kurulumu, harici font ekleme ve kullanıcı dostu mesaj verme teknikleri de detaylı olarak ele alınmaktadır.
- 00:01JSON Server Projesi Tanıtımı
- Önceki derste JSON fetch işlemi ile sunucu üzerinden veri listeleme yapıldı, bu derste ise POST metodunu kullanarak sunucuya yeni veri kaydetme işlemi yapılacak.
- Basit bir mesaj uygulaması yapılacak; mesajı gönderen ve mesaj içeriği JSON üzerinde yeni kayıt olarak yazılacak.
- Kayıt işlemi için lokal sunucuda veriler barındırılacak ve bunun için REST API (Web API) uygulaması kullanılacak.
- 00:51Proje Klasörünün Oluşturulması
- Proje klasörü "post and tail c" olarak isimlendiriliyor.
- Proje klasöründe index.html, style.css, script.js ve db.json isimli veri kaynağı dosyası oluşturuluyor.
- src isimli bir klasör oluşturuluyor, burada üçüncü parti yazılımlar için harici veri kaynakları dahil edilecek.
- 01:38HTML Formunun Oluşturulması
- HTML sayfasında iletişim id'sine sahip bir form oluşturuluyor.
- Formda ad-soyad için input text (txt_ad_soyad) ve mesaj için text area (txt_mesaj) alanları ekleniyor.
- Verileri sunucuya göndermek için submit butonu kullanılıyor ve butona "sunucuya gönder" yazısı ve btn_gönderdi id'si veriliyor.
- 03:35Tailwind CSS Kullanımı
- Formun görünümünü düzenlemek için Tailwind CSS framework kullanılacak.
- Tailwind CSS, kullanıcı yararını ön plana koyan CSS frameworklerinden biri olup, standart basma kalıplar dışında özgün tasarımlara yol açıyor.
- Tailwind CSS, Bootstrap'ten sonra son 2-3 senedir kullanım alanı çoğalmış bir framework.
- 04:36npm ve Tailwind CSS Kurulumu
- Tailwind CSS kurulumu için npm (Node Package Manager) kullanılıyor, bu JavaScript ile geliştirilmiş bir platform.
- npm, üçüncü parti yazılımları yüklemeyi ve paylaşmayı sağlayan bir araçlar topluluğu.
- npm kurulumu için "npm install -g tailwindcss" komutu kullanılıyor ve Tailwind CSS kütüphanesi projeye dahil ediliyor.
- 09:58Tailwind CSS'i Projeye Ekleme
- Tailwind CSS, CSS üzerinden import edilerek projeye dahil edilir.
- Tailwind build komutu ile src klasöründeki Tailwind style.css dosyası, output olarak style.css'e aktarılır.
- Tailwind CSS kütüphanesi yaklaşık 178-180 bin kaynak kod satırı içerir ve projeye dahil edildikten sonra class'lar kullanılabilir hale gelir.
- 11:31Tailwind CSS Kullanımı
- Tailwind CSS, class mantığıyla çalışır ve özellikleri Tailwind sitesi üzerinden kullanım kılavuzundan öğrenilebilir.
- Renkler için "bg-blue-500" gibi class'lar kullanılır ve intellisense desteği ile otomatik tamamlama yapılabilir.
- Tailwind CSS intellisense eklentisi kurulup, ayarlar yapılandırılarak otomatik tamamlama özelliği aktif hale getirilir.
- 14:34Flexbox Kullanımı
- Tailwind CSS, kullanıcıya yakın bir syntax ile geliştirilmiş bir ara dil olarak kullanılır.
- Yükseklik için "h-screen", yatay hizalama için "flex-row", yatay ortalama için "justify-center" gibi class'lar kullanılır.
- Kapsayıcı için "flex-column", alt alta dizilim için "items-center", yükseklik için "h-auto" gibi özellikler kullanılabilir.
- 17:15Harici Class Kullanımı ve Font Ekleme
- HTML içerisine Tailwind class'ları yazmak yerine, CSS dosyasında harici class'lar oluşturulabilir.
- Harici class'lar için "apply" ifadesi kullanılarak Tailwind stillerine yeni özellikler eklenebilir.
- Harici font kullanımı için "link" komutu ile font kütüphanesi import edilebilir ve Tailwind config dosyasında font family yapılandırılabilir.
- 19:55Tailwind CSS Temel Ayarları
- Tailwind CSS'te iki nokta üst üste kullanılarak gerekli komutlar verilir ve goblin fontu kullanılır.
- Temel ayarlar ayar sayfasında yapılandırılarak daha sonra çağrılabilir.
- Tailwind config dosyası üzerinden yapılandırılan ayarlar için npm run build.css komutu çalıştırılmalıdır.
- 21:23Form Eklentisi Kullanımı
- Tailwind'in resmi paketinde form eklentisi bulunur ve bu eklenti form ayarlarını kolaylaştırır.
- Form eklentisi npm install talebi ile yüklenir ve config dosyasına plugin referansı eklenir.
- Class mantıklı yöntem kullanılarak form inputları için "form-input" sınıfı, textarea için "form-textarea" sınıfı kullanılabilir.
- 24:37JSON Server Kurulumu
- HTTP sunucusu statik bir dosya sunucusu olduğundan sadece GET metodu üzerinden talepleri karşılayabilir.
- JSON Server modülü npm install --save json-server komutu ile projeye dahil edilir.
- JSON Server ile 3000 portu üzerinden GET, POST, PUT, PATCH, DELETE ve OPTIONS gibi HTTP metotları çalıştırılabilir.
- 27:13Form Verilerini Alma
- Form üzerinden alınan veriler için sabitler oluşturulur: form, txtAdSoyad ve txtMesaj.
- Form ve form elemanları document.getElementById ile id'leri üzerinden yakalanır.
- Form submit olayı gerçekleştiğinde verileri kaydet isimli bir fonksiyon çalıştırılır.
- 29:03Verileri Kaydetme Fonksiyonu Oluşturma
- Klasik fonksiyon metoduyla "verileri kaydetme" isimli bir fonksiyon oluşturuldu.
- Formun action alanı varsayılan olarak hedef olarak çalışır, ancak "preventDefault" fonksiyonuyla bu varsayılan işlem engellendi.
- Kullanıcıdan ad soyad ve mesaj içeriği alınarak değişkenlere atandı.
- 30:47Fetch Fonksiyonu ile Veri Gönderme
- Fetch fonksiyonu post metoduyla kullanılarak sunucuya veri gönderildi.
- Fetch fonksiyonunda sunucunun adresi, header kısmında content tipi JSON olarak belirtildi.
- Body kısmında JSON string olarak mesaj gönderen ve mesaj içeriği gönderildi.
- 33:45Veri Kaydetme Sonuçları
- Kullanıcıdan alınan veriler sunucuya başarıyla gönderildi ve kullanıcıya "veriler başarıyla kaydedildi" mesajı gösterildi.
- Kaydedilen verilerin otomatik bir ID aldığını ve lokal veritabanına düştüğünü kontrol edildi.
- Asenkron fonksiyonlar kullanarak da veri kaydetme işlemi yapıldı ve aynı sonuçlar elde edildi.
- 37:58Veritabanı Sorgulama ve Sıralama
- Kaydedilen veriler üzerinden sorgulama yapılabilir, örneğin mesaj gönderen parametresi ile sadece belirli bir gönderenin mesajlarını getirebilirsiniz.
- Verileri sıralamak için "sort" ifadesi kullanılabilir, örneğin mesaj gönderene göre alfabetik olarak sıralama yapılabilir.
- Tarayıcı üzerinden adres çubuğu üzerinden parametrelerle sorgulama yapılabilir.
- 39:22JSON Verilerinde Sorgulama Komutları
- İlk iki kaydı göstermek için "ilk iki kaydı sadece göster" gibi komutlar kullanılabilir.
- Soru işareti kullanılarak belirli aralıklardaki kayıtlar getirilebilir.
- Benzerlik araması yapmak için "like" parametresi kullanılabilir, örneğin "a" harfi ile başlayan mesajlar aranabilir.
- 40:00Sorgulama Örnekleri
- "Like" parametresi ile sadece belirli bir ifadeyi içeren kayıtlar döndürülebilir.
- Boş dizi döndürme durumu, aranan ifadenin veritabanında bulunmadığında gerçekleşir.
- JSON üzerinden sorgulama yapmak için internette yüzlerce örnek bulunabilir.