#21- Asp.NET Core 6 + Angular İle Mini E-Ticaret | Ürünlerin listelenmesi ve Pagination
Вставка
- Опубліковано 27 кві 2022
- Github : github.com/gncyyldz
#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.gencayyildiz.com/blog/
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
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.
Ü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
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
Ellerinize emeğinize sağlık hocam uzun ve bol pratikli bir dersti çok teşekkürler
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 ...
Çok teşekkürler hocam, emeğinize sağlık
Çok teşekkürler hocam, emeğinize sağlık...
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
Biraz geriden geliyorum ama geliyorum.
Bir kaç kez dinlemelik :) Sağlam video
Teşekkürler hocam, gayet güzel dersti, yüreğinize sağlık.
iyi bayramlar.
hocam emeğinize sağlık yine çok verimli bir ders
İleri Düzey Programlamayı bekliyordum zaten hocam. Burada bunu duymak güzel oldu 👍
Enerjiniz daim olsun hocam :)
Çok teşekkürler hocam
22-23-24 toplu yüklenecek gibi hissediyorum :)) bekliyoruz hocam
Teşekkürler hocam emeğinize sağlık biraz geriden geliyoruz ama yapıcak bir şey yok 😅
Yine harika bir içerik daha
İzledim, pekiştirmek için bir kez daha izleyeceğim teşekkürler hocam
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 ?
Hocam bayramınız mübarek olsun.Nice bayramlar görürsünüz inşallah.
Amin, ecmain kardeşim. Hep beraber inşallah.
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 :)
Sağlam bir ders oldu
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
Hocam burada promise yapılarını kullanmak yerine islerimizi tamamen Observable vs rxjs yapılarla halledemez miydik?
Hocam 48:20 de patlayarak güldüm evet simdi veri geliyor mu gelmedi tamam bir problem var 🤣🤣
Devam...
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?
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
düzeltebildin mi
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ı
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.
hocam sorgu geliyor console'da gözüküyor. Ama get işleminde sorguyu almıyor defaultu kabul ediyor
Gencay hocam ngrx veya ngxs entegre etseniz şahane olmamaz mı:)
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 :(
peki tam "bas bas bağırdınız muhtemelen hocam hocam alt tire alt tire" diye derken cidden bağırmam :) 46:30
Pagination butonlarına tıklayamıyorum bu sorunu yaşayan var mı
46:32 😂😂
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.
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 ?
çünkü servislerde bir kere daha dto kullanınca yönetilmesi zor bir hale dönüşüyo proje çok fazla mapping yapmak zorunda kalıyoruz
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
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.
dataSource de böyle bir hatayla karşılaşan oldu mu?
Type 'null' is not assignable to type 'MatTableDataSource'.
verileri birtürlü listeleyemedim yardımcı olur musunuz?
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.
@ 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
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;
}
}
@@ahmetkandil1500 Argument of type 'void' is not assignable to parameter of type 'Observable'.
hatası veriyor
Hocam pagination için backendde IQueryable interface'ine bir extension yazamaz mıyız? IPagedQueryable gibi mesela, veya merkezi bir pagination mekanizması kurulabilir mi?
Örnek kullanımı inceleyebilirsiniz
www.google.com/amp/s/code-maze.com/paging-aspnet-core-webapi/amp/
@@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.
@ merakla bekliyoruz o halde :) teşekkür ederim.
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.
@ tamamdır hocam sağolun
hocam kaç videoluk seri olacak bilgi verir misiniz?
Net sayı veremem ama takriben 100leri bulur.
Hocam toPromise() fonksiyonu deprecate edildiği için üstünü çiziyor. İlerleyen derslerde bu duruma değiniyor musunuz ?
Evet.
@ tamamdır
çözdüyseniz burda da yazarmıydınız. Adım adım geldiğimden o kısma gelemedim
@@yazilimciyizBiz ne yazıkki read operasyonu düzeltilmemiş :/ umarım mesajları görür
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.
Çok sağol breymın
.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);
};
ValidationFilter'da await next(); 'i yanlış yere koyduğum için 20 dakka uğraştım niye veri gelmiyo diye.
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 ?
@@muhammedyucedag maalesef hocam meşgulüm
@@muhammedyucedag Aynı problem bende de var bir çözüm bulabildin mi
toPromise fonksiyonu hata veriyor çözebilen var mı?
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.
@@tunazorlu Çok Teşekkür ederim. Zamanımı korudun... Allahu Tealadan Hayırlı Bereketli zamanlar diliyorum sana da...
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;
}
@@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
@@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
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
synchron (aynı zamanda paralel işlemler) diye algıladım. Yalnış ise kusura bakma
çünkü listelerken sisteme yeni veri girebilir ve sayfayı yenilemeden ekrana getirmek isteyebilirsin
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)
}
}
async read methodunu da atar mısınız yazdığınız bende promiseData da gariip bir hata veriyorda
@@ebubekirdogan3505 çö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
@@erent3055 Varyaaaa of diyorum chatgbylele beraber kafa kafaya verdik delir nerdeyse:D
@@serbaysarkaya 1 buçuk gündür uğraşıyorum
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
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}`:""}`
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});
}
@@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});
@@ismailturk9852 'toPromise' özelliği, 'Observable' türünde değil.ts(2339) bunu da aşamadım :D
@@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