Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitmen tarafından sunulan kapsamlı bir yazılım geliştirme eğitimidir. Eğitmen, izleyicilere adım adım bir blog uygulaması geliştirme sürecini göstermektedir.
- Video, Strapi ile API oluşturma, Thunder Client ile API test etme, React ile frontend geliştirme, React Router kullanarak sayfa yönlendirmesi yapma ve Bootstrap ile tasarım oluşturma konularını kapsamaktadır. Eğitim, blog bloklarının oluşturulması, kategori sisteminin geliştirilmesi, verilerin API üzerinden çekilmesi ve kullanıcı arayüzü oluşturulması gibi temel adımları içermektedir.
- Eğitim boyunca, Strapi admin panelinde collection types oluşturma, Thunder Client ile CRUD işlemlerini test etme, React Router kullanarak sayfa yönlendirmesi yapma, Bootstrap ile responsive navbar oluşturma ve Redux ile veri yönetimi gibi konular ele alınmaktadır. Ayrıca, blog detay sayfası, kategori sayfası ve yeni blok ekleme formu gibi farklı sayfaların geliştirilmesi de detaylı olarak gösterilmektedir.
- 00:02Strapi ile API Oluşturma Giriş
- Bu dersde Strapi ile güvenli ve hızlı bir şekilde API oluşturmayı öğreneceğiz.
- Geliştirilecek uygulama, React ile front-end kısmını içeren bir blog uygulaması olacak.
- Blog uygulamasında ana sayfada çeşitli blog yazıları yer alacak ve kategoriler üzerinden filtreleme yapılabilir.
- 00:55Full Stack Uygulama Özellikleri
- Geliştirilecek uygulama bir full stack uygulama olup, kullanıcıların CRUD (Create, Read, Update, Delete) işlemlerini gerçekleştirebilmesi gerekiyor.
- Bu nedenle uygulamanın arka tarafında bir API çalışması gerekiyor.
- Strapi, content management system olarak bilinen bir araç ile kolay ve hızlı bir şekilde API geliştirmeyi sağlıyor.
- 01:43Strapi Kullanım Rehberi
- Strapi.io sitesine gidip "Get Start" düğmesine tıklayarak hızlı başlangıç rehberine ulaşabilirsiniz.
- API'yi geliştirdikten sonra, React, Vue, Angular, Next.js gibi front-end framework'leri ile entegre edebilirsiniz.
- Ayrıca Python, Ruby, Go, Delphi, PHP ve Laravel gibi backend teknolojileri ile de entegrasyon yapılabilir.
- 02:33Proje Yapısı Oluşturma
- Proje için "strapi-api-react-block" isimli bir klasör oluşturuldu ve içinde "backend" ve "frontend" klasörleri bulunduruldu.
- Terminal üzerinden "backend" klasörüne gidip "npx create strapi-app quick-start" komutu ile Strapi projesi oluşturuldu.
- Kurulum tamamlandığında "http://localhost:1337" adresi verilir ve buradan Strapi API üzerinde değişiklikler yapılabilir.
- 05:27Strapi Admin Paneli
- Backend kurulumu tamamlandıktan sonra "http://localhost:1337" adresinde Strapi admin paneli açılır.
- İlk kullanımda kullanıcı adı, soyadı, e-posta ve şifre bilgileri girilerek giriş işlemleri tamamlanır.
- Profil bilgileri sağ üstteki ok simgesinden düzenlenebilir.
- 06:58Collection Oluşturma
- Sol tarafta "Collection Types" başlığı altında yeni bir collection oluşturulabilir.
- "Content Types Builder" sekmesinden "Create New Collection Type" ile yeni bir collection oluşturulur.
- Collection ismi küçük harflerle yazılmalı ve çoğul takısı eklenmemelidir.
- 07:39Alanlar Ekleme ve Veri Eklemesi
- Collection'a title, author ve body gibi alanlar eklenebilir.
- Alanlar için veri tipi (text, rich text) ve gerekli/isteğe bağlı (required/optional) gibi özellikler ayarlanabilir.
- Collection'a veri ekleme için "Add New Blocks" seçeneği kullanılır ve blog başlığı, yazar ve içerik bilgileri girilerek kaydedilir.
- 12:41API'ye Erişim İçin Thunder Client Kullanımı
- API'ye erişim için Postman kullanılabilir, ancak VS Code editörünün sunduğu Thunder Client extension'ı da kullanılabilir.
- Thunder Client'i VS Code'da indirmek için sol taraftaki Extensions'a tıklayıp "thunder client" yazarak Ranga Watnen'in imzalı uygulamasını yükleyebilirsiniz.
- Thunder Client sembolüne tıklayıp "New Request" diyerek API işlemleri gerçekleştirilebilir.
- 14:09API Endpoint'lerini Keşfetme
- API işlemleri için "http://localhost:2337" adresi kullanılır ve farklı endpoint'ler ile işlem yapılabilir.
- VS Code'da Explorer düğmesine tıklayıp backend klasöründeki api klasörüne girerek, "block" klasörünün içindeki config klasörüne ulaşılabilir.
- "root.json" dosyasında GET, POST, PUT ve DELETE metodlarıyla gerçekleştirilebilecek işlemler belirtilmiştir.
- 16:20Thunder Client ile API Test Etme
- Thunder Client'te "http://localhost:2337/blocks" adresine GET isteği gönderildiğinde, API'nin güvenlikli olduğu için yetki hatası alınabilir.
- Admin panelinde Settings > Users and Permissions > Roles bölümünden public rolüne block collection type için gerekli yetkiler verilebilir.
- Yetkiler verildikten sonra GET isteği ile tüm blog yazıları görüntülenebilir, ID'ye göre sorgulama, güncelleme ve silme işlemleri gerçekleştirilebilir.
- 22:23Frontend Projesi Oluşturma
- VS Code'da yeni bir terminal açılarak sağ tarafta frontend için terminal oluşturulabilir.
- "cd frontend" komutu ile frontend klasörüne geçildikten sonra "npx create-react-app" ile React projesi oluşturulabilir.
- React projesine axios ve react-router-dom kütüphaneleri "npm i axios react-router-dom" komutu ile eklenebilir.
- 24:08React Projesi Kurulumu ve Kütüphane İndirme
- Aksiyon ve React Router Down kütüphaneleri indirildi ve npm start komutuyla proje başlatıldı.
- React projesi açıldıktan sonra, app.js dosyasındaki header bölümü silinerek "React" yazısı eklendi.
- CSS işlemleri detaylı ele alınmayacak, app.css dosyası şimdilik korunacak.
- 25:19Komponent ve Sayfa Oluşturma
- Front-end klasörünün içindeki src klasörüne "component" adında yeni bir klasör oluşturuldu.
- Component klasörüne "Header.js" adında bir dosya eklendi ve içine bir RFC (React Function Component) oluşturuldu.
- Pages klasörü oluşturulup, "AddBlock.js", "Category.js" ve "Details.js" adında üç sayfa dosyası eklendi.
- 28:26React Router Kurulumu
- App.js dosyasına React Router kurulumu için gerekli import işlemleri eklendi.
- BrowserRouter kullanılarak ana router oluşturuldu ve Header komponenti eklendi.
- Switch bloğu içinde route'lar tanımlandı: anasayfa, details ve addblock sayfaları için.
- 32:21Route Parametreleri ve Sayfa Testi
- Details sayfası için route parametresi olarak ":id" kullanıldı.
- Kategori sayfası için de route parametresi olarak ":id" kullanıldı.
- Tarayıcıda sayfalar test edildi: homepage, addblock ve details sayfaları düzgün görüntülenirken, kategori sayfası için id parametresi gerekiyor.
- 36:01Bootstrap Kullanarak Header Ayarlama
- İlk adım olarak her sayfanın üst kısmında yer alacak navigasyon barı ayarlanacak.
- CSS işlemlerini detaylıca göstermek istemediğinden Bootstrap'ten navigasyon barı indirilecek.
- Bootstrap.com sitesinden CSS linki kopyalanarak VS Code'da index.html dosyasına title etiketinden önce eklenecek.
- 37:38Bootstrap Entegrasyonu
- Spons tasarıma sahip olmak için jQuery işlemleri gerekiyor, bu nedenle Bootstrap sitesinden iki script kopyalanıp index.html dosyasının body kısmına eklenecek.
- Header.js dosyası açılarak Bootstrap sitesinden navbar template kopyalanıp yapıştırılacak.
- Kopyalanan template'de hatalar düzeltilerek navbar oluşturulacak.
- 39:46Navbar Özelleştirme
- Navbar'ın arka planı "navbar-dark" sınıfı eklenerek koyu renge çevrilebilir.
- Navbar'daki search bölümü ve istenmeyen linkler silinebilir.
- Tüm "class" ifadeleri "className" olarak değiştirilmeli çünkü React'te "class" yerine "className" kullanılır.
- 41:16Navbar İçeriği Düzenleme
- Navbar'daki "navbar-brand" kısmına kendi logosu veya marka adı eklenebilir.
- "Home" linki "All Blocks" olarak değiştirilebilir.
- "Add Block" linki "Add Block" olarak yeniden adlandırılabilir.
- 42:13Dropdown Menü ve Responsive Tasarım
- Navbar'daki dropdown menü "Categories" olarak değiştirilebilir ve kategoriler otomatik olarak Strapi app'ten çekilecek.
- Responsive tasarım için Chrome Developer Tools'un "Toggle Device Toolbar" özelliği kullanılarak farklı cihaz boyutlarında görünüm test edilebilir.
- Ekran daraldığında navbar'daki linkler üç çizgiye dönüşür ve tıklandığında aşağı açılan menü görünümüne geçer.
- 46:56React Router ile Navbar Bağlantıları
- Navbar'daki "ACR Blocks" logosuna ve "All Blocks" linkine tıklandığında anasayfa gösterilmesi için React Router kullanılır.
- "Link" componenti import edilerek navbar'daki "a" etiketleri "Link" olarak değiştirilir.
- "to" özelliği kullanılarak linke tıklandığında sayfanın hangi yere gitmesi gerektiği belirlenir.
- 49:15Kategori ve Link Ayarları
- Kategori sayfasında "All Blocks" ve "Adblock" linkleri ayarlanıyor.
- Navbar'ın class'larına dokunulmadan, sadece "Adblock" için link özelliği ekleniyor.
- Kategori bölümü için henüz değişiklik yapılmıyor.
- 50:47State Oluşturma ve Veri Çekme
- App fonksiyonunda "blocks", "error" ve "loading" isimli state'ler oluşturuluyor.
- UseEffect hook'u ile asenkron bir "fetchData" fonksiyonu oluşturuluyor.
- Aio kütüphanesi kullanılarak "http://localhost:2377/block" adresinden veri çekiliyor.
- 59:00Verileri Ekrana Yansıtma
- Blocks state'indeki veriler, oluşma tarihine göre en son olanın en üstte olması için sıralanıyor.
- Map fonksiyonu kullanılarak her blok için bir div oluşturuluyor ve stil veriliyor.
- Her blok için başlık, oluşturulma tarihi, yazar ve içerik bilgileri ekrana yazdırılıyor.
- 1:05:20Strapy API ile Blok Oluşturma
- Strapy API'de oluşturulan bloklar listeleniyor ve en son oluşturulan blok en tepede görünüyor.
- Yeni bir blok oluşturulduğunda (add new block), title, outermary ve body gibi alanlar doldurulabilir.
- Oluşturulan bloklar sayfayı yenileyince listeleniyor ve en son oluşturulan blok en tepede yer alıyor.
- 1:06:40Blokların Detayları ve Tarih Formatı
- Konsolda "result" değişkenindeki verileri görüntüleyerek her bloğun oluşturulma zamanını görebiliriz.
- Created zamanının ilk on hanesini alarak tarih formatı oluşturabiliriz (ay, yıl, ay, gün şeklinde).
- Blok yazılarının tamamını göstermek yerine sadece ilk 70 karakteri göstermek ve sonuna üç nokta koyarak kısaltabiliriz.
- 1:08:56View Düğmesi Ekleme
- Her blok için view düğmesi eklenerek detay sayfasına yönlendirme sağlanabilir.
- View düğmesi tıklandığında, bloğun ID'sine göre detay sayfasına yönlendirme yapılıyor (örneğin details/5).
- Link componenti kullanılarak view düğmesine tıklanıldığında detay sayfasına yönlendirme yapılabiliyor.
- 1:12:09Detay Sayfası Oluşturma
- Detay sayfası için ayrı bir JS dosyası oluşturuluyor.
- Detay sayfasında seç işlemi (select) gerçekleştirilecek.
- UseEffect, useState, useParam gibi React Router DOM özellikleri import edilerek detay sayfası ayarlanacak.
- 1:13:46Details Fonksiyonu Oluşturma
- Details fonksiyonunda ilk olarak id parametresi için distruction işlemi yapılıyor.
- Bir state oluşturuluyor: const [result, setResult] = useState([]);
- Error ve loading işlemleri gerçekleştiriliyor.
- 1:14:54UseEffect Kullanımı
- useEffect kullanılarak veri çekme işlemi yapılıyor.
- SetLoading true ile yükleme işlemi başlatılıyor.
- URL'deki id parametresi kullanılarak veri çekiliyor.
- 1:16:47Veri İşleme ve Render
- Çekilen veri setResult ile state'e atanıyor.
- SetLoading false ile yükleme işlemi tamamlanıyor.
- Render işlemi id değişiminine göre gerçekleşiyor.
- 1:17:50Loading ve Error Durumları
- Loading true ise ekranda "Loading..." mesajı gösteriliyor.
- Error varsa ekranda "Error" mesajı gösteriliyor.
- Loading işlemi tamamlandıktan sonra veriler ekrana yansıtılıyor.
- 1:19:07Detay Sayfası Tasarımı
- Detay sayfası için div elementi oluşturuluyor.
- Div'e genişlik, marjin, padding, border ve border-radius gibi stil özellikleri ekleniyor.
- Div'e key olarak result id'si atanıyor.
- 1:21:38Detay İçeriği ve Silme Butonu
- Detay sayfasında blogun başlığı, yazarı ve vadesi gösteriliyor.
- Silme işlemi için bir button ekleniyor.
- Detay sayfası başarıyla çalışıyor ve blog yazıları görüntüleniyor.
- 1:23:35Kategoriler Oluşturma
- Her blog yazısının bir veya birden fazla kategorisi olacak.
- Kategorilerin gösterilmesi ve kategoriye göre blog yazıları filtrelenmesi planlanıyor.
- Content type builder üzerinden "kategori" adında yeni bir collection type oluşturuluyor.
- 1:24:23Kategori Oluşturma ve Yapılandırma
- Kategori koleksiyonunda "name" adında bir alan oluşturuldu.
- Kategori oluşturulduktan sonra, API içerisinde kategori yapılandırması otomatik olarak oluşturuluyor.
- Kategori oluşturma işlemi sırasında hata alındığında sayfayı yenilemek gerekebilir.
- 1:26:28Kategori Ekleme
- API'de kategori bölümüne gidilerek "front end", "back end", "full stack", "mobile" ve "database" isimli kategoriler eklendi.
- Kategoriler, kitap satış uygulamasında kitapların çeşitlerini veya bir blogda yazıların kategorilerini temsil edebilir.
- Kategorileri blog yazılarıyla ilişkilendirmek için "content type builder" kullanıldı.
- 1:28:13Kategorileri Blog Yazılarıyla Bağlama
- "Content type builder" üzerinden blog yazılarına kategori ilişkisi eklendi.
- "Menu to menu" ilişkisi kullanılarak birden fazla bloğun birden fazla kategorisi ve birden fazla kategorinin birden fazla blog ile ilişkisi oluşturuldu.
- İlişkileri kaydederken hata alındığında sayfayı yenilemek gerekebilir.
- 1:29:17Kategorileri Navbar'a Ekleyerek Gösterme
- Header dosyasına "useState" ve "useEffect" import edildi.
- Kategoriler için bir state değişkeni oluşturuldu ve "aio" kütüphanesi kullanılarak kategoriler çekildi.
- Kategorilerin çekimi için yetki verilmesi gerekiyor, aksi takdirde get işlemi gerçekleşmiyor.
- 1:35:09Kategorileri Navbar'a Render Etme
- Navbar'daki dropdown menüsünde kategorileri göstermek için "map" fonksiyonu kullanıldı.
- Her kategori için bir "li" elementi oluşturuldu ve kategori ismi gösterildi.
- Kategorilere tıklandığında ilgili kategori sayfasına yönlendirme için "to" attribute kullanıldı.
- 1:39:04Kategorileri Blog Yazılarına Eşleştirme
- Strapi app'ye giderek her bir blog yazısı için kategori seçildi.
- Örneğin "data science" yazısı "database" kategorisiyle, "variables" yazısı "front end" kategorisiyle eşleştirildi.
- Bazı blog yazıları birden fazla kategoriyle eşleştirilebilir.
- 1:40:26Kategori Oluşturma ve Blog Ekleme
- Kategoriler oluşturulduktan sonra yeni blog oluştururken kategori seçimi yapılabiliyor.
- Yeni bir blog oluşturulurken başlık (title), yazar (author) ve içerik (body) bilgileri giriliyor.
- Blog oluşturulduktan sonra kategorisi atanıyor ve "Publish" ediliyor.
- 1:41:46Kategori Sayfası Geliştirme
- Kategori sayfasında, kategorilere ait blog yazılarının görüntülenmesi amaçlanıyor.
- Kategori sayfası için detail sayfasından kodlar kopyalanıyor ve adaptasyonlar yapılıyor.
- Kategori sayfasında "state" değişkeni olarak "rest" adında boş bir obje oluşturuluyor.
- 1:43:26Veri Çekme İşlemi
- Kategori sayfasında "useEffect" ile veri çekme işlemi gerçekleştiriliyor.
- Asenkron bir fonksiyon oluşturulup, Axios ile veri çekimi yapılıyor.
- Veri çekimi sırasında loading ve hata durumları kontrol ediliyor.
- 1:49:11Verilerin Gösterilmesi
- Çekilen veriler "setRest" fonksiyonu ile state'e atanıyor.
- Sayfada loading ve hata durumları kontrol ediliyor, normal durumda kategori adı gösteriliyor.
- Kategori değiştirildiğinde sayfa dinamik olarak güncelleniyor.
- 1:51:17Kategori Bloklarını Map İşlemiyle Çıkarma
- Divi kopyalandıktan sonra değişiklik yapılıyor ve süslü parantez açılarak işlem başlatılıyor.
- "resBlocks.map" fonksiyonu kullanılarak kategorideki her bir blok için işlem yapılıyor.
- Bir function oluşturulup, blok detayları kopyalanarak ve "block" olarak değiştirilerek kategorilerle ilgili bloklar listeleniyor.
- 1:54:01Kategori Detay Sayfasına Bağlantı Ekleme
- Kategorilerin olduğu gibi gözükmemesi için "view" bağlantısı eklenecek.
- "body.substring(0,70)..." şeklinde metin kısaltması yapılıyor ve "view" bağlantısı ekleniyor.
- Link için "import Link from 'red router dome'" eklenerek view bağlantısı çalıştırılıyor.
- 1:56:32Yeni Blok Ekleme İşlemi
- "Add block" butonuna tıklandığında yeni bir blog yazmak için form çıkması sağlanacak.
- "useState" ile "newBlock" state'i oluşturuluyor ve bloğun içeriği için title, body ve outer alanları ayarlanıyor.
- Bootstrap kullanılarak form tasarımı yapılıyor ve title için input alanı oluşturuluyor.