Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitmen tarafından sunulan Angular 2 ve TypeScript programlama dili eğitim içeriğidir. Eğitmen, Bob adlı bir kişiyle birlikte çalışmaktadır.
- Video, Angular 2'de servis yapısı ve HDT (Http Data Transfer) kullanarak servisten veri çekme sürecini adım adım göstermektedir. İçerik, JSON formatında veri dosyası oluşturma, HDT kütüphanesinin ekleme, servislere enjeksiyon yapma, verilerin modellere dönüştürülmesi, asenkron veri çekme yöntemleri (Observable, Promis), Pipe kullanımı ve pay (capitalize) işlemleri gibi konuları kapsamaktadır.
- Eğitim, servis verisinin çekilmesi, JSON formatındaki verinin TypeScript'e dönüştürülmesi, propertilere atanması, asenkron veri çekme teknikleri ve veri işleme yöntemlerini detaylı şekilde anlatmaktadır. Video sonunda, gelecek videolarda validation, form yapısı, template yapısı ve veri gönderme/alma konularının işleneceği belirtilmektedir.
- Angular 2'de Servis Yapısı ve Veri Çekme
- Video, Angular 2'de servis yapısını ve HDT ile servisten veri çekme konusunu ele alacak.
- HDT ile servisten veri çekme sırasında asenkron yapılar nasıl oluşturulacağı ve HD tipi ile veri çekme zorlukları anlatılacak.
- Eski videolarda statik dizilerden alınan veriler yerine artık servisten veri çekilecek.
- 02:20HDT Kütüphanesinin Bulunması
- HDT kütüphanesinin Angular 2'de nerede olduğunu bulmak için Angular.io sitesindeki API referansları kullanılabilir.
- API referanslarında "filter" kısmına HDT yazarak kütüphanenin yerini bulabilirsiniz.
- Kütüphaneyi kullanmak için kodda "import" ile eklemek gerekiyor.
- 04:29HDT Servisini Kullanma
- HDT servisini kullanmak için person servisinde HDT servisini injection yapmak gerekiyor.
- HDT servisini kullanmak için "HDT" yazarak servisi çağırabilirsiniz.
- Veri çekmek için "data.json" şeklinde bir yol belirtmek gerekiyor.
- 06:26Veri Modeline Adapte Etme
- Çekilen veriyi modelimize adapte etmek için bir data şablonu oluşturmak gerekiyor.
- Bu adaptör veya dezenfeter olarak adlandırılıyor ve dışarıdan alınan servislerden sistemimize entegre edilecek.
- Veri şablonunu oluşturmak için "People" adında bir sınıf oluşturuluyor ve "name" ve "soyisim" özellikleri ekleniyor.
- 08:05Map Operatörü Kullanımı
- Çekilen veriyi modelimize map etmek için "map" operatörü kullanılıyor.
- Map operatörü kullanabilmek için "Access" kütüphanesini import etmek gerekiyor.
- Kütüphaneleri bulmak için internetten araştırma yapmak gerekiyor, ancak zamanla ezberleyebilirsiniz.
- 09:14Angular'da Veri Çekme ve Modelleme
- Angular'da çekilen veriyi sistemimize konverterimiz sayesinde yapının anlaşılmasını sağlıyoruz.
- Response değerini HD modelimize eşitlemek için "response" yazıp, aynı kütüphaneden geldiğini belirtmek gerekiyor.
- Angular ile çalışırken karşılaşılan sorunlar başta zorlanabilir ancak alıştıktan sonra işler kolaylaşır.
- 10:53Veri Kesme ve Modelleme İşlemi
- Gelen data cinsinden gelen response'u kesiyoruz ve TypeScript'in bu özelliği sayesinde neye keseceğimizi belirleyebiliyoruz.
- Response değerini people modelimize kesip, response değerini C# modeline dönüştürüyoruz.
- Çekilen veriyi propertimize set etmek için "subscribe" keyword'ünü kullanıyoruz.
- 14:07Veri Çekme Sürecindeki Sorunlar
- Hata dönüştürme kısmında konsol.log ile hata yazdırmak ve başarılı durumda "okey" yazdırmak önemlidir.
- Bloklamaları yapmazsanız, sorun çıktığında nerede neyin olduğunu göremeyebilirsiniz.
- Servisten çekilen veriyi propertimize atadıktan sonra artık servisten çalışabilir hale geliriz.
- 16:10Veri Çekme Sürecindeki Hatalar ve Çözümleri
- Servis çalıştırıldığında data gelmiyor çünkü çekilen verinin gelişini beklememiş oluyoruz.
- Veriler henüz gelmemişken ilgili değişkene veri atanmadığı için sayfa bembeyaz kalıyor.
- Bu sorunu çözmek için veriyi çekilmeden önce farklı bir yerde ve farklı bir şekilde çekmek gerekiyor.
- 18:08Asenkron Veri Çekme Yöntemi
- Servis metodunu kullanarak veriyi çekmek için "get people" adında bir metod oluşturuyoruz.
- Konstrant dışındaki servise ulaşabilmek için private olarak belirtmek gerekiyor.
- Dolaylı yoldan ilgili properti metodla çektiğimizde veri başarıyla geliyor, ancak bu doğru bir sonuç değil.
- 20:46Asenkron Veri Çekme İçin Observable Kullanımı
- Asenkron veri çekme için iki yapı kullanılacak: Observable ve Promise.
- Observable kullanmak için "import @angular/rxjs/observable" ve "import @angular/rxjs/extensions" kütüphaneleri import edilmeli.
- Observable ile veri çekmek için "Observable<Array<People>>" türünde bir değişken oluşturulmalı ve bu değişkene servis metodu atanmalı.
- 26:25Observable ile Veri Çekme İşlemi
- Observable ile veri çekmek için "ngOnInit" metodu kullanılarak servis metodu çağrılmalı.
- TypeScript, "ngOnInit" metodunu zorunlu kılıyor ve bu sayede kodun daha güvenilir hale geliyor.
- Asenkron veri çekme işlemi sayesinde sistem yavaşlamadan dışarıdan veri çekilebiliyor ve en kötü senaryolara hazırlıklı olunabiliyor.
- 31:49Promise Yapısı
- Promise yapısı da asenkron veri çekme için kullanılabilir ve Observable ile benzer şekilde çalışır.
- Promise yapısı için "import @angular/rxjs/promise" kütüphanesi import edilmeli.
- Promise yapısı, Observable ile benzer şekilde servis metodu çağrılabilir ve veri alınabilir.
- 32:32Promise Kullanımı
- Bir CS kütüphanesi kullanılarak promise isteği yapılıyor ve sonuç toz pembe renkte görüntüleniyor.
- App kompoza kısmında "people prom" adında bir değişken oluşturuluyor ve bu değişken yapıda kullanılıyor.
- People modelinden promise alarak "get promise people" adında bir metod oluşturuluyor ve bu metod servisin get promise metoduyla eşleştiriliyor.
- 35:32Asenkron Veri Çekme
- Asenkron şekilde veri çekiliyor ve kodun çalışması kontrol ediliyor.
- Observer ve promise arasındaki farklar ve avantajları bir sonraki videoda incelenecek.
- 36:07Pipes Kullanımı
- Pipes, verileri çekerken veya ekrana basarken işleme sokup farklı şekilde ekrana basmak için kullanılıyor.
- Pipes ile gelen kelimelerin baş harflerini büyütüp ekrana basmak veya dil desteği için veriyi başka bir dile çevirmek gibi işlemler yapılabilir.
- 37:14Capital Letter Pipes Oluşturma
- "Capital letter" adında yeni bir pipe oluşturuluyor ve TypeScript snippets extension kullanılarak kod yazılıyor.
- Pipes, transform olarak bir değer alacak ve bu değer kelime adı olacak.
- Pipes, bir cümledeki her kelimenin baş harfini büyütüp boşluklu olarak ekrana basacak şekilde tasarlanıyor.
- 42:10Angular'da Pay Kullanımı
- App component kullanmak istediğimizde direkt kullanamayız, önce modülümüzde capital letter payımızı tamamlamamız gerekiyor.
- Modülümüzde capital letter payımızı tamamladıktan sonra dekorasyonları da tamamlamalıyız.
- Payımızı sistemimize entegre ettikten sonra artık her yerde kullanabiliriz.
- 43:36Pay Kullanım Örneği
- Payımızı başka bir servisimizde kullanabiliriz, örneğin person komponentinde ad ve soyad yazdığımız yere payımızı ekleyebiliriz.
- Payımız, sayfada tek bir kelime varsa sadece baş harfini, uzun bir cümle varsa tüm kelimeleri büyük harfe çevirir.
- Paylar çok kullanışlıdır ve sadece dil destekleri için değil, farklı birçok yapıda da kullanılabilir.
- 45:44Video Özeti
- Videoda Angular 2'de data JSON yapıdan veri çekme, verinin tamamlanmasını bekleme ve asenkron veri çekme yöntemleri gösterildi.
- Promise kullanımı, construct servisleri ve private değişkenler, foreach yapısı gibi konular anlatıldı.
- Gelecek videolarda validation, form yapısı, template yapısı ve verilerin servise gönderilmesi gibi konular ele alınacak.