Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, Enes Bayram tarafından sunulan bir web geliştirme eğitim serisidir. Eğitmen, izleyicilere adım adım döviz kuru uygulaması geliştirme sürecini göstermektedir.
- Video, döviz kuru uygulamasının geliştirilmesini üç ana bölümde anlatmaktadır. İlk bölümde Free Currency API'si kullanılarak güncel döviz kur değerlerinin nasıl alınacağı ve Postman üzerinden nasıl kullanılacağı gösterilmektedir. İkinci bölümde HTML ve CSS kullanılarak uygulamanın arayüz tasarımı yapılmakta, üçüncü bölümde ise mail arayüzü tasarımı detaylı şekilde anlatılmaktadır.
- Eğitim serisi, web geliştirme öğrenmek isteyenler için temel bir kaynak niteliğindedir. Video, bir sonraki derste JavaScript ile backend kısmının işleneceği bilgisiyle sona ermektedir.
- 00:01Döviz Kur Uygulaması Tanıtımı
- Bu derste döviz kur uygulaması yapımı gösterilecek, bu ikinci uygulama olacak.
- Uygulama, döviz kurlarının güncel değerlerini alabilmek için ücretsiz bir REST API kullanacak.
- Uygulamada miktar girildiğinde, seçilen para birimi diğer para birimlerine çevrilebiliyor.
- 01:39Döviz Kur API'si
- Güncel kur değerlerini almak için "free currency api.com" API'si tavsiye ediliyor.
- API'ye giriş yapmak için Gmail hesabı veya farklı bir hesapla sign-in yapılabilir.
- API'nin dökümantasyonunda endpointler ve kullanım şekli detaylı olarak anlatılıyor.
- 03:47API Kullanımı
- API'ye istek yaparken URL'ye "api-key" parametresi eklenmeli.
- Birden fazla parametre geçirmek için ilk parametre soru işareti ile başlar, ikinci parametre "&" ile başlar.
- "base_currency" parametresi ile hangi para biriminin diğer para birimlerindeki karşılığını almak istendiği belirlenir.
- 07:28Uygulama Tasarımı
- Proje "currency rates" adıyla bir holder açılarak başlıyor.
- Ana sayfa ve döviz işlemleri için "currency" sayfası oluşturuluyor.
- Arayüz tasarımı için konteyner, main div ve header div'leri kullanılıyor.
- 09:56Input ve Select Elemanları
- Döviz kuru çevirici için inputlar "content-rapper" div'i içinde yerleştiriliyor.
- Miktar için "number" tipinde bir input oluşturuluyor ve "amount" id'si veriliyor.
- Para birimleri için select seçenekleri önceki projeden kopyalanıyor.
- 11:56HTML ve CSS ile Döviz Kuru Çevirme Arayüzü Oluşturma
- Euro, dolar ve TL seçenekleri için select etiketleri kullanılıyor ve id'leri "first option" ve "second price option" olarak ayarlanıyor.
- Sonuç için bir input etiketi oluşturuluyor ve "read only" özelliği ile içine değer yazılamıyor.
- Copyright bilgisi için span etiketi kullanılıyor çünkü paragraf etiketi marjin değerleri nedeniyle boşluk bırakabilir.
- 14:04Font Awesome İkonları Ekleme
- Font Awesome'dan ok ikonu kullanmak için CDN ile import ediliyor.
- Font Awesome'dan "arrow" ikonu seçiliyor ve HTML koduna ekleniyor.
- İkonlar CSS ile düzenlenecek.
- 15:39HTML Yapısı ve Div Kullanımı
- Uygulama için genel bir konteyner div'i oluşturuluyor.
- Konteyner içinde main div'i bulunuyor ve header ile content'i tutuyor.
- Döviz kuru çevirici için ayrı bir div oluşturuluyor.
- 16:57CSS ile Flexbox Kullanımı
- Main div'e "display flex" ve "flex-direction column" özellikleri verilerek elemanlar alt alta diziliyor.
- Elemanlar için border, genişlik, yükseklik, padding ve border-radius özellikleri ekleniyor.
- Konteyner için "display flex", "flex-direction column" ve "align-items center" özellikleri kullanılarak elemanlar dikeyde ortalanıyor.
- 23:12Header Düzenleme
- Header için "display flex" ve "align-items center" özellikleri kullanılarak dikeyde ortalanıyor.
- Header rapper class'ına marjin özellikleri eklenerek üstten ve alttan boşluklar ayarlanıyor.
- Header'daki h4 etiketinin yazı tipi "Arial" olarak değiştiriliyor.
- 25:57CSS Özellikleriyle Düzenleme
- Font size değeri 20 piksel olarak ayarlanarak yazı boyutu büyütülüyor.
- HR etiketi kullanılarak div'in altına çizgi ekleniyor ve rengi kırmızı olarak değiştiriliyor.
- Input elementlerine padding özelliği verilerek kenarlardan kırpma yapılıyor ve border özelliği kaldırılıyor.
- 27:41Element Seçimi ve Düzenleme
- ID'si "amount" olan input'a padding değeri 5 piksel olarak atanıyor.
- Select elementleri class ismiyle seçilerek padding değeri 5 piksel olarak ayarlanıyor.
- Tüm input'lara etiket ismi "input" olarak atanarak padding değeri 5 piksel olarak uygulanıyor.
- 30:04Span Elementi Düzenleme
- Span elementinin display özelliği block olarak ayarlanarak tüm satırı kaplaması sağlanıyor.
- Text-align center özelliği ile span elementi ortalanıyor ve margin-top değeri 20 piksel olarak ayarlanarak aşağı kaydırılıyor.
- Etiket ismine göre seçim yapmanın tehlikeli olduğu, büyük uygulamalarda class ve id'lerin kullanılması gerektiği vurgulanıyor.
- 31:44Flexbox Kullanımı
- Flex direction line-items center özelliği ile elemanlar ortalanıyor.
- Elementlerin genişlikleri ayarlanarak 120 piksel olarak belirleniyor.
- Padding değeri 10 piksel olarak ayarlanarak elemanlar arasında boşluk bırakılıyor.
- 32:35Arka Plan Rengi ve Yapı Açıklaması
- Elementlere arka plan rengi verilerek görünüm değiştiriliyor.
- Konteyner, main, header ve content gibi elementlerin yapısı açıklanıyor.
- Flexbox ve column özellikleri arasındaki farklar açıklanıyor: flexbox ile elemanlar yan yana, column ile alt alta geliyor.
- 37:02Dersin Sonucu
- Arayüz tamamlanmış durumda.
- Bir sonraki derste backend tarafına (JavaScript) geçilecek.
- Dersin sonunda bir sonraki derste görüşmek üzere veda ediliyor.