• Buradasın

    Vue.js ile COVID-19 Bilgilendirme Uygulaması Geliştirme Eğitimi

    youtube.com/watch?v=ljDV11RQPxs

    Yapay zekadan makale özeti

    • Bu video, bir eğitmen tarafından sunulan teknik bir yazılım eğitim içeriğidir. Eğitmen, Vue.js ve Vuex kullanarak COVID-19 hakkında bilgilendirici bir uygulama geliştirme sürecini adım adım göstermektedir.
    • Video, COVID-19 verilerine erişmek için API servislerinin kullanımı ile başlayıp, Vue.js ve Vuex ile uygulama yapısının oluşturulmasına geçmektedir. Eğitim boyunca, uygulamanın kullanıcı arayüzü tasarımı, responsive tasarım, veri çekme işlemleri, Vuex state yönetimi ve ApexCharts ile veri görselleştirme konuları ele alınmaktadır. Uygulama, ana sayfa, tüm dünya ve haberler gibi bölümlerden oluşmakta ve Türkiye'deki vakalar, en çok etkilenen ülkeler ve son haberler gibi bilgileri sunmaktadır.
    • Eğitimde ayrıca grid ve flexbox düzenlemeleri, medya sorguları, CSS değişkenleri, computed properties, Vuex actions, mutations ve state yönetimi gibi konular detaylı olarak gösterilmektedir. Uygulama, mobil ve büyük ekranlar için farklı görünümlere sahip olacak şekilde tasarlanmaktadır.
    COVID-19 Bilgilendirme Uygulaması Geliştirme
    • Videoda COVID-19 hakkında bilgilendirmeler yapacak bir uygulama geliştirilecek.
    • Uygulamada Rept API ve Correct API adlı iki farklı servis kurulacak.
    • Her iki API'de de üye olup API anahtarları alınabilir ve birden fazla API kullanılabilir.
    00:47Rept API Kullanımı
    • Rept API'de Coronavirus Monitor API'si bulunmakta ve çeşitli endpoint'ler mevcuttur.
    • "effected countries" endpoint'i GET isteği alarak hangi ülkelerde vaka olduğu bilgisini döndürür.
    • "country" endpoint'i bir ülke için tarihine göre vaka sayılarını gösterir ve "county" parametresi bekler.
    • "all" endpoint'i tüm ülkelerdeki vakalar hakkında bilgi döndürür.
    02:40Correct API Kullanımı
    • Correct API'de de hangi ülkelerde vaka görüldüğü ve tüm ülkelerdeki vaka sayısı hakkında endpoint'ler bulunmaktadır.
    • Corona News endpoint'i Türkiye gündemindeki COVID-19 ile ilgili son haberleri döndürür.
    • Rept API gibi Correct API'de de iki header (x-rapidapi-host ve x-rapidapi-key) gönderilmesi gerekir.
    • Correct API'de "country by count" endpoint'i bir ülkenin vaka bilgilerini döndürür.
    06:49Uygulama Kurulumu ve Tasarım
    • Vue.js ve Webpack kullanılarak "covid19-app" adında bir uygulama kuruluyor.
    • CSS reseti yapılıyor ve materyal tasarım için renk değişkenleri tanımlanıyor.
    • Open Sans fontu import ediliyor ve varsayılan font family üzerine yazdırılıyor.
    10:16Navbar Oluşturma
    • Navbar için HTML yapılandırması yapılıyor ve "Covid19 Türkiye", "Haberler" ve "Tüm Dünya" menüleri oluşturuluyor.
    • Navbar için CSS stil uygulanıyor: display flex, background-color primary, color white ve a tag'ları için text-decoration none.
    • Navbar component'i ayrı bir dosyaya taşınıp import ediliyor.
    13:43Ana İçerik Tasarımı
    • Ana içerik için grid sistemi kullanılıyor: birinci grid toplam vaka sayısını, ikinci grid ise toplam iyileşen sayısı, yeni vakalar ve toplam ölü bilgilerini gösterecek.
    • İkinci grid altında flex kullanılarak flex-direction column ve justify-content space-between ayarlanıyor.
    • Ana içerik için section oluşturuluyor ve grid template, justify-items, padding gibi stil uygulanıyor.
    17:28CSS Grid ve Flexbox Kullanımı
    • FaceInfos altındaki Facecad sınıfına background color olarak kart color değeri veriliyor ve minimum yükseklik 15 değerine ayarlanıyor.
    • Flexbox kullanılarak uzaklıklar ayarlanıyor: flex direction column ve justify content space between ile elemanlar birbirinden uzaklaştırılıyor.
    • Grid yapısı oluşturulup, tüm genişlik kullanmak için %100 değerini kullanıyor ve aradaki boşluk için c diyerek 0.5m uzaklık farkı açılıyor.
    19:22Total Case ve Kart Stil Ayarları
    • TotalCase içerisinde bir h1 tagı oluşturulup "Vaka Sayısı" ve "Toplam Vaka" yazısı ekleniyor ve flexbox ile düzenleniyor.
    • Box-sizing border-box kullanılarak padding ve border etkilenmemesi sağlanıyor.
    • Kartlar için h2 tagı kullanılarak iki eleman oluşturulup, display flex, flex direction column ve justify content flex end ile düzenleniyor.
    22:55Haber Marquee Ekleme
    • Corona API'den dönen haberler marquee ile ekran boyunca kayarak gösteriliyor.
    • Marquee div'i ekran genişliğine göre dönmek için min genişlik içine alınıyor.
    • Main altındaki div'ler 80% genişliğinde ve margin auto ile merkeze hizalanıyor.
    25:13Componentlere Dönüşüm ve Değişkenler
    • TurkeyCases section'ı component haline getirilerek "TurkeyCasesView" olarak adlandırılıyor.
    • RustNewsView isminde yeni bir component oluşturulup, haberler buraya aktarılıyor.
    • Default değişkeni oluşturulup, padding ve yükseklik değerleri bu değişkenden çekiliyor.
    28:14Etkilenen Ülkeler Grid Yapısı
    • Etkilenen ülkeler için grid yapısı oluşturulup, yan yana üç grid ve alt tarafta altı div oluşturuluyor.
    • MostEffectedCountries div'ine display grid, grid-template-columns: 3, justify-items center ve padding top: default değerleri veriliyor.
    • Mobil ekranlarda grid yapısı için media query kullanılarak ekran genişliği 900 piksel altındayken grid kalınlığı 2 olarak ayarlanıyor.
    34:45Kart Hover Efekti ve Footer
    • Kartlara hover efekti ekleniyor: kart üzerine geldiğinde opacity 0.9'a düşürüldüğü ve alttaki bilgi div'i display block olarak gösteriliyor.
    • Ekran küçültüldüğünde de aynı hover efekti geçerli kalıyor.
    • Son olarak footer ekleniyor ve most effected country view componenti oluşturulup site isteniyor.
    36:48Footer Oluşturma ve Eksis Kütüphanesi Ekleme
    • Footer componenti oluşturuldu ve siteye entegre edildi.
    • Footer için padding bottom değeri 2m olarak ayarlandı.
    • Eksis kütüphanesi npm install ile eklendi ve uygulama yeniden başlatıldı.
    38:52Vuex Store Oluşturma
    • Store isimli bir klasör ve içinde index.js dosyası oluşturuldu.
    • Vuex store oluşturuldu ve main.js dosyasına import edildi.
    • Modül yapısı kullanılarak "turkey traces" adında bir modül oluşturuldu.
    41:09API İstekleri ve State Yönetimi
    • "getTurkeyCases" adında bir action oluşturuldu ve API isteği gönderildi.
    • State içinde "cases" adında boş bir dizi oluşturuldu ve API cevabı bu state'e eklendi.
    • Vue componentinde computed property kullanılarak state verileri ekrana yazdırıldı.
    48:32Haber Modülü Oluşturma
    • "news" adında bir modül oluşturuldu ve "getLastNews" actionı tanımlandı.
    • Haber API'sine istek gönderildi ve cevap alınan veriler state'e eklendi.
    • Haber verilerini ekrana yazdıran component oluşturuldu ve stili düzenlendi.
    55:16En Etkilenen Ülkeler Modülü
    • "mostEffectedCount" adında bir modül oluşturuldu.
    • "getMostEffectedCount" actionı tanımlandı ve API isteği gönderildi.
    • En etkilenen ülkeler için state yönetimi yapıldı.
    57:19API Key Hatası ve Çözümü
    • API isteğinde header'ın eksik olması nedeniyle "missing api key" hatası alınıyor.
    • Rapid API header'ı eklenerek istek tekrar gönderilince "cats by county" verisi başarıyla döndürüldü.
    • Veri setinde 197 ülke bilgisi bulunuyor ve bu veriler "most effected count" olarak işleniyor.
    58:51Verilerin Vue Component'e Entegrasyonu
    • Vue component'inde "set most effect count" fonksiyonu oluşturuluyor ve response data'dan countrys stack çağrılıyor.
    • View def turumunda altı tane obje bulunuyor ve bunlar compute property ile yönetiliyor.
    • Component kısmina "most effect countries" property'si gönderiliyor ve v-for döngüsü ile veriler ekrana yazdırılıyor.
    02:39Ülke İsimlerinin Düzenlenmesi
    • Data properties içerisinde "country names" isminde bir obje oluşturuluyor.
    • Çin, ABD, İspanya, Almanya, İtalya ve İran gibi ülkelerin isimleri Türkçe karşılıklarıyla değiştiriliyor.
    • Bu düzenleme sayesinde ekranda ülkelerin Türkçe isimleri görüntüleniyor.
    1:04:17Çizelge Verilerinin Gösterilmesi
    • "History by parcal country" rootunda Türkiye için açıklanan vakalar verisi çekiliyor.
    • Verileri çizelge üzerinde göstermek için Vue Apex ve Apex Charts kütüphaneleri uygulamaya dahil ediliyor.
    • Apex Charts component'i için options ve series parametreleri kullanılıyor.
    1:07:02Çizelge Oluşturma ve Veri İşleme
    • Vue Apex component'i oluşturuluyor ve import ediliyor.
    • Çizelgenin türü "line" olarak belirleniyor ve ekranda çizelge görüntüleniyor.
    • Türkiye için çekilen verilerin total cases kısmı bir dizeye aktarılıyor ve benzer değerler filtrelenerek unique bir liste oluşturuluyor.
    1:15:12Veri İşleme ve Çizelge Oluşturma
    • Verileri ekranda görüntülemek için consol.lock kullanılıyor ve verilerdeki virgül kaldırılıyor.
    • State.speed ile virgül kaldırılıyor ve boş karakterle değiştiriliyor.
    • İki çizelge kullanılacak: taçlı ve line çizelgeleri.
    1:17:29Sayfa Düzeni ve Router Ayarları
    • İki çizelge yan yana görüntülenmek için display flex ve grid kullanılıyor.
    • Ana sayfada iki ek sayfa daha oluşturulacak: haberler ve tüm dünya.
    • Pages klasörü oluşturulup home view template dosyası içine temp ve script kopyalanıyor.
    1:20:15Router ve Sayfa Oluşturma
    • Router view kullanılarak home componenti çağrılıyor.
    • Navbar import ediliyor ve ana sayfa aynı şekilde görünüyor.
    • Router dosyasında mod history olarak değiştiriliyor.
    1:22:03Tüm Dünya Sayfası Oluşturma
    • World state view isminde bir template oluşturuluyor.
    • Navbar'da tüm dünya linki ekleniyor ve yönlendirme yapılıyor.
    • Tüm dünya sayfasında main tag ve section oluşturuluyor.
    1:24:48Veri Gösterimi ve Stil Uygulama
    • Toplam vakalar, iyileşenler ve ölümler için h1 tagları oluşturuluyor.
    • Verileri göstermek için flex ve space-between kullanılıyor.
    • H1 tagları için farklı renkler (turuncu, yeşil, kırmızı) ve font size ayarlanıyor.
    1:28:52Günün Verileri ve Component Oluşturma
    • Bugünkü vakalar için today divi oluşturuluyor.
    • Today divi için display flex ve space-around kullanılıyor.
    • Total cases, recovered ve dead verileri component haline getiriliyor.
    1:35:46World State Modülü Oluşturma
    • Store içerisinde "world stacks" isimli bir dosya oluşturulup get action'lar oluşturuldu.
    • Modülde state altında "over" ve "today" isimli iki diz var ve getlar oluşturuldu.
    • Action içerisinde word state rootuna istek gönderildi ve set o obje olarak belirtildi.
    1:37:09World State View ve Tema Oluşturma
    • World state view dosyasında compute oluşturuldu ve gelirler ret edildikten sonra property olarak geçirildi.
    • Tüm dünyadaki istatistikler ve son güncelleme yazdırıldı.
    • Mobil ekranlarda flex direction column'a çevrildi ve margin top değeri değişken olarak belirtildi.
    1:39:09Footer Component Oluşturma
    • Footer import edildi ve home sayfasındaki footer kaldırıldı.
    • Footer component tarihine getirildi ve template tag açıldı.
    • Footer ve navbar'daki h1 tag'ları pointer olarak işaretlendi.
    1:43:14Haberler Sayfası Oluşturma
    • "news" isimli bir klasör oluşturuldu ve home view sayfasında component'ler çağrıldı.
    • News view sayfası oluşturuldu ve template açıldı.
    • Router'a haberler için news component'i import edildi ve name olarak news belirtildi.
    1:45:05Haber Kartı Oluşturma
    • News için state, getation ve action oluşturuldu.
    • News view'da computer property oluşturuldu ve haber kartı oluşturuldu.
    • News isimli bir component klasör oluşturuldu ve new card view oluşturuldu.
    1:46:37Haber Kartı Stil ve İçerik Oluşturma
    • New card için padding top, height, border ve grid template ayarlandı.
    • Resim ve açıklama için new image ve new body oluşturuldu.
    • V-for döngüsüyle haberler listelendi ve buton için stil ayarlandı.
    1:53:01Uygulamanın Özeti
    • Uygulama coronavirüs hakkında bilgilendirme yapmaktadır.
    • Ana sayfada Türkiye'deki vakalar, çizelgeler, en çok etkilenen ülkeler ve en son haberler bulunmaktadır.
    • Tüm dünya ve haberler sayfaları da uygulamada yer almaktadır.

    Yanıtı değerlendir

  • Yazeka sinir ağı makaleleri veya videoları özetliyor