Skapa en databas för produkt med flera bilder

Jag har en csv-fil för en mängd olika produkter, men där en av raderna innehåller en array med flera olika bild-urler och inte bara en (som vi jobbat med under kurserna). Jag har försökt fram och tillbaka med hur jag kan skapa en MySQL-databas för detta, och kommit fram till att jag förmodligen bör ha två tabeller: En för produkten i sig (id, namn beskrivning osv.), och en egen för bilder med kolumnerna id och bild-url (har en produkt 20 bilder så blir det följaktligen 20 rader). Alltså: En tabell "products" och en "images".

Men när jag ska ladda in detta från csv-filen blir det genast svårt. Jag vill väl att varje bild ska få en egen rad i SQL-tabellen "images", fast med id som är samma som för den produkt som bilden tillhör?

Mina frågor:
1) Tänker jag rätt till att börja med, att jag ska använda två tabeller och sen referera/länka med hjälp av gemensamt id (får köra typ en inner join sen)?
2) Hur kan jag importera csv-filen så att bilderna hamnar på en egen rad i tabellen "images"? Kanske är det lättare att försöka strukturera csv-filen först och separera bilderna från produkt så det blir två olika csv-filer, där respektive bild redan från början kan få en egen rad? Hur hade ni tänkt?

Tar gärna emot tips och idéer från de som är lite mer rutinerade. Tack på förhand!

/Filip

1) Låter som en bra plan.

Någon som inte var skolad i SQL hade säkert tänkt tanken att serialisera en sträng av bild-länkar och sparat i en kolumn. Jag kan inte säga att det är fel, bara en annan form av lösning.

2) Jag hade nog (A) antingen delat upp filen i två csv-filer, om jag kunde lösa så att FK fanns tillgänglig i csv-filerna (rätt produkt till rätt bilder).

Eller så hade jag (B) skrivit ett litet skript i php/python/bash som hade parsat orginalfilen och gjort INSERT-satser rad för rad. Då kan jag lägga till lite logik.

Vilket som hade funkat bra (A/B).

Jag valde att läsa in csv-filen via pandas (python) och välja vilka kolumner jag ville ha. Kunde på så sätt bryta ut det utan att skapa två csv-filer. Sedan la jag in datan i SQL-tabellerna med hjälp av mysql-connector. Var lite trixigt att sortera upp det som jag ville i pandas och bryta ut varje bild på en ny rad med rätt id, men efter det var löst så var det väldigt straightforward.

Men nu har jag en ny fundering kring hur jag mest effektivt laddar in produktinfo och bilderna i resultatsidan som jag har frontend i ReactJS. För varje produkt, som renderas via att loopa en array och sen visa upp individuella "components", likt Airbnb har, så har jag även en bildkarusell med 5-20 bilder (kanske smart att begränsa?). Vad är best practice och hur hade du tänkt kring att visa upp resultat för de två tabellerna i en SPA-app? Skiljer sig tänket ifall du istället hade gjort det med PHP?

För tillfället laddar jag in allt direkt, och sedan sköts både sök/filtering och pagination frontend. Men har drygt 20k produkter, så känns inte särskilt effektivt. Kanske bättre att söka mot SQL-tabellerna från Express?

Just nu delar de båda tabellerna på en POST-route i Express, och jag tar de båda genom `result.json({prodData: prodTable, imgData: imgTable})` och tar sedan emot dem i React genom att använda fetch(). Sedan lägger jag svaret (de två objekten) i en varsin (väldigt stor) array i React, som jag sedan använder mig av.

Tar tacksamt emot vägledning och hur man bör tänka kring arkitekturen!

Jag fastnar på 20k produkter och en json med alla och sen filtrera/paginera på frontend.

Det är ändå en stor klump data och en hel del programmeringslogik som skall ske på frontenden. Oavsett om det var mobil eller desktop så hade ett par varningsklockor ringt i mitt huvud.

Jag hade funderat lite på usability/user expericence och funderat över hur användaren vill se, filtrera, söka och skrolla produkterna.

Att hantera 20k produkter på klientsidan känns inte orimligt. Då kan jag lägga all kod där.

Jag får helt enkelt göra en avvägning om jag vill lägga koden i klienten eller servern (med json eller förformatterade vyer). Båda varianterna hade varit skäliga enligt mig. En smart eller tunn klient.

Jag tror jag hade styrts lite beroende av vilken typ av app det är och hur den skall användas samt kompetensen på de kodare som skall lösa uppgiften.

Bra funderingar! Gällande bilderna så slog jag ihop allting till ett objekt genom Object.assign, så det löste sig ganska smidigt och nu har alla produkter ett objekt med bild-array inuti sig. Det blev två stycken sql-queries (allt i en route) som hämtade info och bilder om produkterna, sedan för att aligna de båda fick jag köra en filter() där bild-id var samma som produkt-id.

Jag får tänka vidare lite hur jag ska göra med UX, men jag lutar åt att ha så lite som möjligt i klienten. För pagination skulle man kanske kunna ladda nuvarande sida+1, ifall man vill åt snabbheten (får testa om det blir någon skillnad). Filtren är nog det enda, som jag tänker nu, som kommer hanteras i klienten. Men det får komma senare under sommaren, har ju två skolprojekt att tänka på först!