Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, Pro TV projesinde front-end developer olarak çalışan Ömer Göktuğ Poyraz tarafından sunulan bir eğitim içeriğidir. Eğitmen, progressive web applications (PWA) konusunu detaylı bir şekilde anlatmaktadır.
- Video, 2016 yılından başlayarak mobil ve mobil web kullanımının desktop web'in önüne geçtiği durumu ele alarak, PWA'ların önemini vurgulamaktadır. İçerikte React kullanarak bir PWA örneği oluşturulmakta, e-kitap uygulaması üzerinden geliştirme süreci adım adım gösterilmekte ve uygulamanın production ortamına taşınması, offline çalışma özelliğine sahip olması gibi konular ele alınmaktadır.
- Eğitimde PWA'ların özellikleri (bağlantı güvenliği, offline çalışma, mobil ilk tasarım, sürekli geliştirme), manifest dosyasının önemi, Lighthouse adlı Chrome uzantısı ile PWA kurallarının test edilmesi ve uygulamanın tarayıcıda ve emülatörde nasıl çalıştığı gibi teknik detaylar da paylaşılmaktadır. Video, izleyicilerin sorularına cevap verilerek ve PWA'ların gelecekteki önemine değinilerek sonlanmaktadır.
- 00:11Progressive Web Applications'ın Giriş
- Ömer Göktuğ Poyraz, Pro TV projesinde front-end developer olarak çalışmakta ve progressive web applications'ı (PWA) tanıtacak.
- Ekim 2016'da mobil ve mobil web kullanımı desktop web'in önüne geçti, bu durum bazı uygulamalar için büyük bir alarm oldu.
- Desktop tabanlı web uygulamaları ve mobil web uygulamaları hem compute olarak sıkıntılar çıkartıyor hem de mobil web'in yavaşlığı sorunu var.
- 02:19Performans ve Kullanıcı Deneyimi
- Desktop kullanıcıları %47'si web sitelerinin 2 saniyenin altında açılmasını bekliyor, smart phone kullanıcıları ise %64'ü 4 saniyenin altında açılmasını bekliyor.
- 100 milisaniyelik bir artış conversion rate'i %1,1 daha arttırıyor, bu rakamlar e-ticaret sitelerinde ciddi etkiler yaratıyor.
- Web uygulamaları genel olarak 420 KB civarında bir JavaScript bandına sahip ve tüm resource ile beraber 2 megabayta kadar gidebiliyor.
- 05:21Native ve Web Uygulamaları Karşılaştırması
- Mobil cihazlarda daha efektif bir şey vermeye çalışırken, web ve native application'lar arasında tercih genellikle native'i tercih ediyoruz.
- Native uygulamalarda daha yüksek performans ve daha sürükleyici bir user experience bulunuyor.
- Web mühendisleri olarak native uygulamaların web'e getirilmesi için çalışmak gerekiyor.
- 06:26Progressive Web Application'ın Özellikleri
- Progressive Web Application (PWA), single page applicationları native gibi çalışmasını sağlayan bir filozofi.
- PWA'lar HTTPS üzerinden edilmeli, kullanıcılar bu web uygulamasını telefonlarına sanki native gibi indirebiliyor ve home screen ekleyebiliyorlar.
- PWA'lar offline çalışmasını bekliyor, page dol performansı hızlı ve dizaynı mobile first olarak tasarlanıyor.
- 09:18PWA'nın Teknik Özellikleri
- PWA'lar için manifest dosyası (meta data) kullanılıyor, burada imaj ikonları, description, background color gibi bilgiler veriliyor.
- Service worker, network'ün önüne geçen bir proxy gibi bir icat ve request'ten önce service worker'a gidiyor.
- Offline support özelliği sayesinde uygulama offline olduğunda bile çalışabiliyor ve kullanıcıya uygun bir UX sunabiliyor.
- 11:35PWA Oluşturma Örneği
- PWA oluşturmak için "crack react lap" adlı bir repo kullanılıyor.
- Bu repo, zero configuration ile React uygulaması yazmanıza izin veriyor ve V2 versiyonu ile beraber otomatik olarak progressive web maddelerine izin veriyor.
- Lighthouse adlı Chrome extension, PWA kurallarına ne kadar uyduğunuzu gösteriyor ve size bir puan veriyor.
- 14:49E-kitap Uygulaması Geliştirme
- E-kitap uygulaması geliştirilirken, npm run start komutu ile develock modunda çalıştırılıyor.
- Uygulamanın production ortamına atılması için gerekli izinler alınıyor.
- Online ve offline durumunu göstermek için bir araç ekleniyor.
- 17:23Uygulamanın Çalıştırılması
- Network bölümünden offline ve online durumunu kontrol edebiliyoruz.
- React Router ile rotalar arasında geçiş yapılabiliyor.
- Uygulama için bir deploy scripti yazılıyor ve build klasörü deploy ediliyor.
- 20:30Uygulamanın Test Edilmesi
- Uygulama emülatörde test ediliyor ve network'ten offline yapıldığında bile çalışabiliyor.
- Uygulama, data ve bilgiyi kaydedip yönetebiliyor.
- Android için uygulama ekranına ekleniyor ve adres bar olmadan uygulama deneyimi sunuluyor.
- 24:32Offline Çalışma Özellikleri
- Uçak modu kapatılarak online durumu kontrol ediliyor.
- Uygulama tarayıcıdan da offline olarak kullanılabiliyor.
- Chrome'un kendi memorisine içerik kaydediliyor ve telefon kapanıp açılınca bile içerik hala var.
- 27:23Progresif Web Uygulaması
- İçerik değiştiğinde uygulama bunu algılayabiliyor.
- Progresif web uygulaması, Chrome'da çalışan bir özellik.
- Diğer tarayıcılarda da benzer özellikler bulunuyor.