epey.com klonu yapmak için gerekli teknoloji yığını

85 views
Skip to first unread message

İsmail Arılık

unread,
Sep 18, 2021, 8:47:52 AM9/18/21
to istanbul-coders
Merhaba.

epey.com'un bir klonunu yapmak için nasıl bir teknoloji yığını kullanmak gerekir? Burada ulaşmaya çalıştığım bir epey.com klonundan ziyade bunun nasıl yapılacağı. Asıl ilgilendiğim ürünlerin sıralandığı bölüm. Mesela şu sayfa: https://www.epey.com/akilli-telefonlar/

Araştırdığım ve sizden  de yardım beklediğim kısımlar:
  1. Türkiye'de daha az bilinen, yurtdışında muhtemelen daha popüler olan versus.com ve productz.com gibi siteler var ve bunlarda da benzer UI'lar var. Ancak bunlar hep kapalı kaynak kodlu. Açık kaynak bir alternatif biliyor musunuz?
  2. Burada ortada bir data table (ya da grid), solda da filtreleme widget'ları var. JS için çeşitli data table gerçeklemeleri mevcut. Hatta Vuetify ve BootstrapVue'da bile iş görecek yetkinlikte widget'lar var. Ancak sol taraftaki filtreleme widget'larını ayrı olarak sunan bir kütüphane bulamadım. Ag-grid'de bile yok sanırım. Bu UI'a benzeyen, bir veri üzerinde gelişmiş filtre, sıralama, vb. sunan bir UI kütüphanesi biliyor musunuz?
  3. Böyle bir veri odaklı uygulama için arka uçta ne önerirsiniz? Express.js gibi bir framework mü? AWS Amplify gibi sunucusuz bir mimari mi? Ya da başka bir şey mi?
Teşekkürler.

Sabri

unread,
Oct 19, 2021, 6:40:22 AM10/19/21
to istanbu...@googlegroups.com
Merhaba İsmail Bey,
2. sorunuza dair şunu söylemek isterim,  her bir filtre başlığına tıklayınca ajax sorgu atarak filtre elemanlarını getiriyor. Jquery 3.5.1 kullanmışlar ve filtre itemları gelince onlar da click anında başka filtrelemeler yapıyorlar. 
image.png
Dev tools ile test ettim sayfa responsive değil, ürünlerin listelendiği tablo aslında ul > li taglarıyla oluşturulmuş ama responsive olabilirdi. Bence bu siteyi kopyalamak yerine daha iyisini yapabilirsiniz.
image.png

--
İstanbul Coders Grubu Kurallarını okuyun: https://groups.google.com/forum/#!topic/istanbul-coders/LuV8_2lSO0w
---
Bu iletiyi Google Grupları'ndaki "istanbul-coders" grubuna abone olduğunuz için aldınız.
Bu grubun aboneliğinden çıkmak ve bu gruptan artık e-posta almamak için istanbul-code...@googlegroups.com adresine e-posta gönderin.
Bu tartışmayı web'de görüntülemek için https://groups.google.com/d/msgid/istanbul-coders/CAGdcmE9ZAZRmn2vU0mrrhy94JsvnY5VwXnO_cJDtFMXN%2BcvHkQ%40mail.gmail.com adresini ziyaret edin.

Necmettin Begiter

unread,
Oct 19, 2021, 7:52:51 AM10/19/21
to istanbul-coders
1. Açık kaynak bir karşılaştırma "arayüzü" bulabileceğinizi pek sanmıyorum. Zaten böyle bir arayüzün içerisinde onlarca bileşen olduğunu düşünürsek tam aklınızdaki gibi birşey zaten bulamazsınız.
2. İlk maddede söylediğim gibi, filtrelemeyi tek bir bileşen gibi düşünmemek lazım. Kendin o yapıyı kolayca kurabilirsin. Filtrelerin her birinin farklı türde olacağını (biri fiyat aralığı, biri marka listesi, biri disk kapasitesi gibi) da düşünürsek tüm filtre türlerini kapsayan bir bileşeni yönetmek her filtre türü için ayrı bir bileşenle ilerlemekten daha zor olacaktır.
3. Arkadaki uygulamada kullanacağın mimari bence oldukça önemsiz. Veriyi hızlı toparlayabildiğin sürece Express olmuş, Amplify olmuş, Laravel olmuş, FastAPI olmuş, pek de önemli değil. Bu konuda uzun uzun yazmak mümkün ama özeti şu, sen hangisini biliyorsan onu seç.

Böyle bir projede asıl zaman alacak şey verinin toparlanması olacaktır. O yapıyı sağlam kurduktan sonra diğerleri ikinci planda kalıyor. Veriyi filtrelere göre baştan organize edeceğin bir Redis/RediSearch veya tercihe göre ElasticSearch hayat kurtarır.
Reply all
Reply to author
Forward
0 new messages