#21- Asp.NET Core 6 + Angular İle Mini E-Ticaret | Ürünlerin listelenmesi ve Pagination

Github : github.com/gnc...
#aspnetcore6 #angular #eticaret #aspnetcoreuygulama #onionarchitecture #angular #angular13 #pagination
Bu video Gençay Yıldız tarafından NGAkademi bünyesinde ücretsiz çekilmiştir.
Gençay Yıldız'ın Bloğu
www.gencayyild...
Güncel Duyuru ve Bildiriler İçin Sosyal Medya Hesaplarımız
/ ngakademi.sosyal
/ ngakademi
/ ngakademii
Bana destek olmak için kanalıma üye olabilirsiniz:
/ gençay yıldız

[@fatihdeniz3702]

Ülen arkidis, bu ders itibari ile müfredatin %50 sindeyim. Bir türlü yakalayamiyorum sizi. Allah'im bana ve benim gibilere birlikte bu kursu devam etmeyi nasip eyle, insallah :D

[@yasinbas]

abi yanlız değilsin :D merak etme yaklaşık 3-4 defa solution floderların içinde gömüldüm kaldım #21 ye kadar ilerledim saçma bi config yüzünden silip baştan aldım :D hemde 3 defa ama o kadar keyif alıyorum ki anlatamam . gerçekten bu adam eğitim ne demek nedir nası yapılır canlı kanlı örneği

[@oguzkurt7142]

Değerli hocam, sağlamış olduğunuz eğitimler için tekrar tekrar teşekkürler her biri ayrı ayrı çok katkısı var. Sağlıcakla kalın.

[@omerfarukcan3982]

Hocam eğitimin henüz 3 de 1 i bile bitmedi ama diğer videoların konu başlıklarını görünce heyecandan bir video daha diye diye günün 13-14 saatini bu projeyle geçiriyorum allah sizden razı olsun iyiki varsınız

[@zneam]

İleri Düzey Programlamayı bekliyordum zaten hocam. Burada bunu duymak güzel oldu 👍

[@pazuzux]

Frontend kısmında hiç mi hiç merakım olmamasına rağmen sabırla sonunu getirsem de bi yanma mevcut ama yapısal olarak Pagination'ı görmek mutlu etti. Ts yada angular çok karışık gelsede Pagination yaparken bütün datayı çekmenin mantıksız olduğunu öğrendim, bu 1.5 saate deydi diye düşünüyorum :D Teşekkür ederim :)

[@storycorner03]

Hocam bayramınız mübarek olsun.Nice bayramlar görürsünüz inşallah.

Amin, ecmain kardeşim. Hep beraber inşallah.

[@yazilimciyizBiz]

15.02.2023 Elhadülillah uygulamalı dinledim. arkadaşların vermiş olduğu ip uçları ile de takılmadan geçtim, bir oturuma. Teşekkürler başta Hocamız olmakla Tüm sınıf arkadaşlarıma ...

[@muhmkaraca]

Bir kaç kez dinlemelik :) Sağlam video

[@nihatyavuz2206]

22-23-24 toplu yüklenecek gibi hissediyorum :)) bekliyoruz hocam

[@hakanyavas5486]

Ellerinize emeğinize sağlık hocam uzun ve bol pratikli bir dersti çok teşekkürler

[@mesutdemirci7933]

iyi bayramlar.

[@ilhanylmaz5977]

hocam emeğinize sağlık yine çok verimli bir ders

[@yusufkalyoncu8704]

Teşekkürler hocam emeğinize sağlık biraz geriden geliyoruz ama yapıcak bir şey yok 😅

[@feyzakaymakc7385]

İzledim, pekiştirmek için bir kez daha izleyeceğim teşekkürler hocam

[@muhammedyucedag]

merhaba feyza en güncel sizin yorumunuz var bir sorum olacaktı 1:27:43 / 1:37:45 zamanında gösterilen alan bende çalışmadı yardımcı olabilir misin acaba ?

[@emreaka3965]

Biraz geriden geliyorum ama geliyorum.

[@ugurcimenoglu1728]

Çok teşekkürler hocam, emeğinize sağlık...

[@furkan3946]

Enerjiniz daim olsun hocam :)

[@Furki4_4]

Teşekkürler hocam, gayet güzel dersti, yüreğinize sağlık.

[@Merve_Esen]

Çok teşekkürler hocam, emeğinize sağlık

[@muhammedtaha4345]

sanırım buna değinilmiş, hangi videoda olduğu paylaşılırsa, silme işlemlerini yapıcağım, ancak ilerliyemiyoum, şimdiiden teşekkür ederim

[@5ura_999]

Tasarım işi ne zormuş ya, backendi özlüyorum😥

[@kemalsen96]

Yine harika bir içerik daha

[@korayozyurt2341]

Hocam elinize sağlık yine keyifli bir video olmuş, 25. dakikada kullandığımız toPromise sanırım deprecated edilmiş rxjs 8.0 dan itibaren firstValueFrom veya LastValueFrom kullanılacakmış. Size de şimdiden hayırlı bayramlar dilerim 😄

Bunu bilmiyordum. O halde bir sonraki dersimizde bu bilgi doğrultusunda güncellememizi yapalım. Teşekkür ederim. Sevgiler.

[@korayozyurt2341]

@ ilginize teşekkürler hocam, araştırdığım kadarı ile 8.0 da gelecekmiş biz şu an 7.6 kullanıyoruz, rxjs e ben çok hakim değilim. Çok saygılar

[@ahmetkandil1500]

Gencay Hoca değinmiştir belki ileriki videolarda ama ben şöyle değiştirdim. async get(pageSize:number=5,pageIndex:number=0,successCallBack?: () => void, errorCallBack?: (errorMessage: string) => void) : Promise { let _responseModel:{products:ListProductResponseModel[];totalCount:number}=null; const getFunc = this.httpClientService.get({ controller: "products" ,queryString:`PageIndex=${pageIndex}&PageSize=${pageSize}` }); await lastValueFrom(getFunc) .then(data => { _responseModel=data; successCallBack() }) .catch((httpErrorResponse: HttpErrorResponse) => { errorCallBack(httpErrorResponse.error) }); return _responseModel; } }

[@muhammedtaha4345]

@@ahmetkandil1500 Argument of type 'void' is not assignable to parameter of type 'Observable'. hatası veriyor

[@Fds704]

Çok teşekkürler hocam

[@omerfarukcan3982]

Hocam 48:20 de patlayarak güldüm evet simdi veri geliyor mu gelmedi tamam bir problem var 🤣🤣

[@majeste1646]

Sağlam bir ders oldu

[@akcanmurat441]

peki tam "bas bas bağırdınız muhtemelen hocam hocam alt tire alt tire" diye derken cidden bağırmam :) 46:30

[@mehmetkarakus3693]

gelen verileri tüm değil parça parça bölmeye kadarki ana kadar çok iyi anlamıştım da sonrası baya bi karışık oldu üstünden tekrar geçtim ama biraz sıkıntı oldu benim için :(

[@bayrameren4462]

Gencay hocam ngrx veya ngxs entegre etseniz şahane olmamaz mı:)

[@HHSWare]

Hocam burada promise yapılarını kullanmak yerine islerimizi tamamen Observable vs rxjs yapılarla halledemez miydik?

[@batuhanark256]

Devam...

[@semihatalay865]

46:32 😂😂

[@Berk.demir.]

1:28:00 da kini uygularken tüm veriler aşağıda gözüküyor geldi 1-5 of 26 diyor ancak sayfa geçtiğimde yine aynı veriler geliyor ilk 5 veri. 10 arlı sırala dersem bu seferde sadece ilk 10 veri geliyor değişmiyor nasıl düzeltebilirim items per page kısmı değişiyor sadece ne yapsam düzeltemedim

[@antichristsuperstar2090]

düzeltebildin mi

[@mr.kuzoluk68]

Bende aynı şeyle karşılaştım çözemedim. Çözdün mü?

[@cumalibarlas3644]

@@mr.kuzoluk68 hocam çözebildiniz mi sorunu

[@mr.kuzoluk68]

@@cumalibarlas3644 Şu kısımda parantez içerisinde boşluk bırakmışım ondan dolayı çalışmıyormuş. " queryString:`page=${page}&size=${size}` "

[@orenda3]

Pagination kısmında sayfayı geçmenize rağmen veriler değişmiyorsa query stringleri yazarken aralarda hiç boşluk bırakmadan alt satıra bile geçmeden tam doğru bir şekilde yazmamız gerekiyor galiba bendeki hata boşlukları silerek ve query stringleri tek satır halinde yazarak düzeldi özellikle httpClientService kısmındaki query strıingleri kontrol ederek yazdım umarım faydası olur.

[@diary3613]

Çok sağol breymın

[@diary3613]

.toSubscribe() depreciated ise main.ts içine bunu yaz declare module "rxjs" { interface Observable { /** * Extension method. Applies 'lastValueFrom' to Observable. */ toPromise(): Promise; } } Observable.prototype.toPromise = function (this: Observable): Promise { return lastValueFrom(this); };

[@semihatalay865]

Hocam toPromise() fonksiyonu deprecate edildiği için üstünü çiziyor. İlerleyen derslerde bu duruma değiniyor musunuz ?

Evet.

[@semihatalay865]

@ tamamdır

[@yazilimciyizBiz]

çözdüyseniz burda da yazarmıydınız. Adım adım geldiğimden o kısma gelemedim

[@muhammedtaha4345]

@@yazilimciyizBiz ne yazıkki read operasyonu düzeltilmemiş :/ umarım mesajları görür

[@dragon8487]

Hocam merhaba, Angular 13 cli bende çok yavaş compile ediyor(PC donanımım iyi) sizde nasıl bu kadar hızlı compile ediyor(Yoksa sizin donanım ayrı bir seviyede mi)? Angular 13 kullanıyorsunuz sizde.

[@ahmedhakanokumus]

dataSource de böyle bir hatayla karşılaşan oldu mu? Type 'null' is not assignable to type 'MatTableDataSource'.

[@ahmedhakanokumus]

verileri birtürlü listeleyemedim yardımcı olur musunuz?

[@musacan88]

hocam kaç videoluk seri olacak bilgi verir misiniz?

Net sayı veremem ama takriben 100leri bulur.

Hocam selamlar, Bir sorum olacak 01:05'de konu olan Take() ve Skip() de aslında client da ki pagination mantığında çalışmıyor mu bu şekilde yaptık fakat. 100 bin ürün geldiğini düşünürseniz. Aslında siz GetAll() da tüm ürünleri çekmesini bekledikten sonra backend tarafında Take() - Skip() yapmış olacaksınız. Dolayısı ile buda doğru yol değil gibi görünüyor ? Bu konu da beni aydınlatabilir misiniz? Teşekkürler.

IQueryable çalıştığımız için sorun yok.

[@erenakgoz5201]

Hocam merhaba, dersin 10.15. dakikasında client kısmına ürün bilgisini göndermek istediğimiz zaman select ile dönüşüm yaptık bunu yapmak yerine Dto kullanarak bu işi çözemez miydik?

[@umitdogan9718]

hocam jwt kullanmak istersek bu yapılanmayı application da mı Infrastructure da mı yapmamız gerekir idi?

Buna cevabı video olarak 24 ya da 25. eğitimleri çektiğimde vermiş olacağım.

[@umitdogan9718]

@ tamamdır hocam sağolun

[@emrebaspnar8530]

hocam sorgu geliyor console'da gözüküyor. Ama get işleminde sorguyu almıyor defaultu kabul ediyor

[@kuzeytekinoglu5]

Herkese iyi çalışmalar; Sorumu gören kişilerden acil cevap bekliyorum. Listelerken neden promise&await yapısını kullandık? Silme işlemini subscribe ile gerçekleştirmiştik, subscribe metodu await işlemi gibi dönen cevabı beklemiyor mu? Listeleme işlemini subscribe ile yapsaydık ne gibi değişiklik olurdu? Cevap yazanların elleri dert görmesin

[@yazilimciyizBiz]

synchron (aynı zamanda paralel işlemler) diye algıladım. Yalnış ise kusura bakma

[@galaxy1066]

çünkü listelerken sisteme yeni veri girebilir ve sayfayı yenilemeden ekrana getirmek isteyebilirsin

[@eh4756]

hocam ben datasource eşitlemesini datayı await ile almak yerine successCallbackte gelen datayla eşitledim hangisi daha mantıklı sizce eğer hata olsaydı program patlar mıydı

[@abdulkadirkg]

Hocam pagination için backendde IQueryable interface'ine bir extension yazamaz mıyız? IPagedQueryable gibi mesela, veya merkezi bir pagination mekanizması kurulabilir mi?

[@dogukanergezer9760]

Örnek kullanımı inceleyebilirsiniz www.google.com/amp/s/code-maze.com/paging-aspnet-core-webapi/amp/

[@abdulkadirkg]

@@dogukanergezer9760 evet biliyorum bunu incelenmiştim. Teşekkür ederim yine de

Evet, bunu da tasarlayalım. Ama şimdilik Angular'ın temellerini tam olarak atabilmek için ProductsController'ı test amaçlı kullanıyor ve API kısmında herhangi bir mimarisel çalışma yapmıyorum. Yapmaya başlayınca orasını da adam ediyor olacak ve bu dediğinizi de malzemelerden biri olarak tasarlayacağız, inşallah diyelim.

[@abdulkadirkg]

@ merakla bekliyoruz o halde :) teşekkür ederim.

[@omerfaruksandkc1630]

hocam iyi çalışmalar bir sorum olucaktı. fakat seride soruyla ilgili videoyu bulamadım sanırım oyüzden buraya yazıyorum. sorum şu: hocam şimdi CQRS tarafında request sınıflarıyla dto gibi apiden parametre aldık. ayrıca servislerde niye CreateUser gibi dto yapıları kullanıyoruz ? servis parametrelerinde dto kullanmayıp direk entitynin kendisini kullansak ne gibi dezavantajlar ortaya çıkar açıklayabilir misiniz ?

[@omerfaruksandkc1630]

çünkü servislerde bir kere daha dto kullanınca yönetilmesi zor bir hale dönüşüyo proje çok fazla mapping yapmak zorunda kalıyoruz

[@yavuzeroglu7994]

Pagination'da Items per page : 10 - 20 yapıyorum ama halen 5 adet gösteriyor düzeltemedim bir türlü sorunu bulamıyorum yardımcı olabilecek var mı ? Sayfaları bölüyor fakat halen 5 er adet gösteriyor

[@tunazorlu]

Backend'de mediatr içerisindeki Handler'larda size=10 yapmalıyız diye düşünüyorum. Tabi bunun angulardaki karşılıklarıda 10 olarak düzeltilebilir. Ben hepsini 10 yapmayı tercih ettim ve pagination da 5 seçeneğini kaldırdım.

[@harundurakoglu3414]

Pagination butonlarına tıklayamıyorum bu sorunu yaşayan var mı

[@BurakTemelkaya]

ValidationFilter'da await next(); 'i yanlış yere koyduğum için 20 dakka uğraştım niye veri gelmiyo diye.

[@muhammedyucedag]

merhaba burak en güncel sizin yorumunuz var bir sorum olacaktı 1:27:43 / 1:37:45 zamanında gösterilen alan yani sayfa değiştikçe verilerin yüklenmesi bende çalışmadı yardımcı olabilir misin acaba ?

[@BurakTemelkaya]

@@muhammedyucedag maalesef hocam meşgulüm

[@mustafaoge6913]

@@muhammedyucedag Aynı problem bende de var bir çözüm bulabildin mi

[@oguzhan543]

toPromise fonksiyonu hata veriyor çözebilen var mı?

[@tunazorlu]

toPromise'in modası geçmiş (depreceated). Açıklamada bunu ya firstValueFrom yada lastValueFrom olarak kullanmalısınız diyor. basitçe yapmamız gereken async read sonunda belirttiğimiz .toPromise() i silmek ve ardından = ile başlayan dizinin başına = firstValueFrom( ve en sonda (toPromise'i sildiğimiz noktada) parantez ) ile kapatmak olacaktır. Hatam varsa düzeltin lütfen.

[@yazilimciyizBiz]

@@tunazorlu Çok Teşekkür ederim. Zamanımı korudun... Allahu Tealadan Hayırlı Bereketli zamanlar diliyorum sana da...

[@yazilimciyizBiz]

Kodun Tamamı Burda... async read(page?: number, size?: number, successCallBack?: () => void, errorCallback?: (errorMessage: string) => void): Promise { const promiseData: Promise = firstValueFrom(this.httpClientServisim.get({ controller: "products", queryString:`page=${page}&size=${size}` })); promiseData.then(p => successCallBack()) .catch((errorResponse: HttpErrorResponse) => errorCallback(errorResponse.message)); return await promiseData; }

[@muhammedtaha4345]

@@yazilimciyizBiz şöyle bir hata var, bu arada bir haftadır arayış içindeyim. Dediğinizi aynen uyguladığımızda Argument of type 'void' is not assignable to parameter of type 'Observable'. hatası alıyorum. Neticede ne yaptıysam void assigment hatasından kurtulamıyorum

[@diary3613]

@@tunazorlu async read(page: number = 0,size: number = 5 ,successCallBack?: () => void, errorCallBack?:(errorMessage:string)=> void): Promise { const promiseData: Promise = firstValueFrom(this.httpClientService.get({ controller:"products", queryString: `page=${page}&size=${size}` //Return QueryString values })); Olmadı kral

[@yusufunal6962]

paginationı çalışmayan varsa datasource kısmını aşağıdaki gibi yapınca düzeliyor export class ListComponent implements OnInit { displayedColumns: string[] = ['productName', 'stock', 'price', 'createdDate', 'updatedDate'] dataSource = new MatTableDataSource() @ViewChild(MatPaginator) paginator: MatPaginator; constructor(private productService: ProductService, private spinner: NgxSpinnerService, private toastr: ToastrService) { } ngOnInit(): void { this.getProducts() } async getProducts() { this.spinner.show() let products = await this.productService .getProducts(() => this.spinner.hide(), (errorMessage) => { this.spinner.hide() this.toastr.error(errorMessage) }) this.dataSource = new MatTableDataSource(products) this.dataSource.paginator = this.paginator console.log(this.dataSource.paginator) } }

[@geziyurdum]

async read methodunu da atar mısınız yazdığınız bende promiseData da gariip bir hata veriyorda

[@erent3055]

@@geziyurdum çözdünüz mü bilmiyorum ama bu hatayı veren arkadaşlar için yazayım tsconfig.json dosyasında strict i false yapmanız gerekiyor

[@serbaysarkaya]

@@erent3055 Varyaaaa of diyorum chatgbylele beraber kafa kafaya verdik delir nerdeyse:D

[@antichristsuperstar2090]

@@serbaysarkaya 1 buçuk gündür uğraşıyorum

[@yasinbas]

Http failure response for localhost:7210/api/products%20?page=0&size=5: 404 Not Found böyle bir hata alan var mı ya client api ile haberleşmiyor bu videoda ki işlemleri bire bir uyguladım

[@ismailturk9852]

producttan sonra %20 yazma nedeni urlde olusan bosluktan dolayıdır muhtemelen bundan dolayı da api ile haberlesme saglanamıyor. urlinizi kontrol edin veya attıgımı kendinize gore tekrar duzeltin sorun cozulecektir. private url(requestParameters: Partial): string { return `${requestParameters.baseUrl?requestParameters.baseUrl:this.baseUrl}/${requestParameters.controller}${requestParameters.action ?`/${requestParameters.action}`:""}`

[@ismailturk9852]

get(requestParameters:Partial, id?:string) : Observable { let url: string=""; if(requestParameters.fullEndpoint){ url= requestParameters.fullEndpoint; } else{ url = `${this.url(requestParameters)}${id ? `/${id}` : ""}${requestParameters.queryString ? `?${requestParameters.queryString}` : ""}`; // url=`${this.url(requestParameters)}${id ? `/${id}` : ""}${requestParameters.queryString ?`?${requestParameters.queryString}` : ""}`; } return this.httpClient.get(url,{headers:requestParameters.headers}); }

[@yasinbas]

@@ismailturk9852 selamlar abi bahsettiğin bloğu inceledim ama bende bu şekilde , bir hata tespit edemedim . private url(RequestModel:Partial ):string{ return `${RequestModel.baseUrl ? RequestModel.baseUrl:this.baseUrl}/${RequestModel.controller}${RequestModel.action ?`/${RequestModel.action}`:""}`; } get(RequestModel: Partial ,id?: string):Observable{ let url : string = ""; if(RequestModel.fullEndPoint) url = RequestModel.fullEndPoint; else debugger; url = `${this.url(RequestModel)}${id ? `/${id}` : ""} ${RequestModel.queryString ? `?${RequestModel.queryString}` : ""} `; return this.httpClient.get(url,{headers:RequestModel.headers});

[@yasinbas]

@@ismailturk9852 'toPromise' özelliği, 'Observable' türünde değil.ts(2339) bunu da aşamadım :D

[@ismailturk9852]

@@yasinbas url = `${this.url(RequestModel)}${id ? `/${id}` : ""} ${RequestModel.queryString ? `?${RequestModel.queryString}` : ""} `;{id ? `/${id}` : ""} ${id}` : ""} ${RequestModel.queryString hocam $dan once arada bosluk var kontrol eder misiniz burayı bi