Auteur: Danny Holstein

Waar een kunstenaar een portofolio heeft om zijn werk te tonen, daar hebben developers repositories op Github om werk te tonen. Om mijn eigen repositories aan te vullen, heb ik enige tijd geleden een 2D kunstgalerij gemaakt dat bestaat uit een database (PostgreSQL), WebAPI (.NET/C#) en een Frontend (Angular). Deze repository toont alle CRUD-functionaliteiten (CRUD = Create, Update en Delete). In dit nieuwe blogbericht wordt de ontwikkeling hiervan behandeld.

Op Github zijn er al veel repositories die CRUD-functionaliteit in actie tonen met de bekende boeken- en sportartikelenwinkels, te-doen lijstjes en andere voorbeelden uit tutorials die weinig origineel zijn. Voor meer originaliteit heb ik gekozen om een 2D kunstgalerij te maken. Maar veel afbeeldingen van kunstwerken uit de echte wereld zijn rechtelijk beschermd waarbij vaak de rechten toebehoren aan een museum. Als beeldmateriaal wordt er gebruik gemaakt van door AI-gegenereerde afbeeldingen waar geen auteursrechten op zitten. Tijdens het experimenteren met verschillende AI-tools, zoals Gemini, ChatGPT-5 en Fotor, is het genereren van afbeeldingen een beetje uit de hand gelopen, maar het voordeel is dat er voldoende beeldmateriaal beschikbaar is.

De namen van de kunstenaars zijn door mij zelf verzonnen, door AI gegenereerd of er zijn fictieve kunstenaars geleend van Wikipedia. Hetzelfde geldt voor de achtergronden van deze fictieve kunstenaars. De namen van de kunststromingen zijn door mij bedacht (Glamour-Estheticism, Flower Art en Old School Revivalism) of wanneer er een vergelijkbare kunststroming al bestond dan is er hier door mij een Neo-stijl van gemaakt. De teksten bij de schilderijen kostte de meeste tijd en volgen het stramien: wat is er te zien op het schilderij, waar staat dit alles symbool voor en wat is een mogelijke betekenis. Voor nog meer tekst is door mij de fictieve kunstcriticus ‘John Ruskin III Junior’ opgevoerd die kritiek en commentaar levert op schilderijen.

Al met al heb ik veel creativiteit en fantasie kwijt gekund in de ontwikkeling van de 2D kunstgalerij. Er zijn nog genoeg andere ideeën voor fictieve kunststromingen en er staan ook nog genoeg door AI gegeneerde afbeeldingen op mijn computer. Soms komen er ‘bekende namen’ voorbij van de bij BEE-2B inmiddels bekende usual suspects (Saskia des Esseintes, Juliette Wolpertinger, Victoria de la Mer, etc.). Een andere kunst is om deze informatie in en uit de database te krijgen via een WebAPI en uiteindelijk via de Frontend applicatie in de browser te tonen.

Als database is voor PostgreSQL gekozen, want dit draait redelijk snel in een Docker container. In de repository is een docker-compose bestand opgenomen om de database snel up-and-running te krijgen met als voordeel dat er geen PostgreSQL database geïnstalleerd hoeft te worden op een computer. De database heeft 5 tabellen: Artist, Image, Painting, Style en Thumbnail waarin alle data wordt opgeslagen. Door middel van Foreign Keys (dat een link legt tussen parent-child tabellen) wordt vanuit de Painting tabel verbindingen aangelegd tussen informatie over de kunstenaar (Artist tabel), de kunststijl (Style tabel) en de grote en kleine afbeeldingen (Image en Thumbnail tabellen).

In de afbeelding hierboven is te zien dat de Image en Thumbnail tabellen relatief groot zijn, want daar worden Mb’s gebruikt in plaats van Kb’s. Om zaken simpel te houden heb ik besloten om de afbeeldingen op te slaan als base64-strings met als gevolg dat de database tabel relatief groot is. Aan de andere kant (en dat is misschien een voordeel) moeten mensen wat meer moeite doen als zij de kunstwerken willen ‘lenen’. 😊 Via de WebAPI kan de data uit de PostgreSQL-database opgehaald, ingevoerd, geüpdatet of verwijderd worden. De grootte van de base64-strings was voor de .NET migratie tool aanvankelijk een probleem. Maar dit is opgelost door een flag (zie: experimental-data-section-string-literals) toe te voegen in het C# project bestand.

De architectuur van de C#/.NET WebAPI is ‘klassiek’. De 3 lagen zijn: RepositoryLayer (voor alle CRUD operaties van de database), ServiceLayer (een laag tussen de RepositoryLayer en de Controller – zet de data om in Database Entities en Data Transfer Objects, kan afbeeldingen van grootte veranderen en voert controles uit) en de Controller (maakt endpoints beschikbaar voor de Frontend applicatie). Om verbinding met de database en migraties (data voor de database) te maken wordt er gebruik gemaakt van het EntityFramework. De database-provider is in dit geval PostgreSQL, maar kan relatief makkelijk veranderd worden in een andere provider voor een andere database (MySQL, MSSQL, Firebird, etc.).

Naast het EntityFramework worden er ook nog 2 andere libraries in de WebAPI gebruikt, namelijk: SixLabors.ImageSharp en FileSignatures. De eerste library dient onder andere om afbeeldingen in omvang te verkleinen of met andere woorden: er wordt een thumbnail van gemaakt. Door middel van de tweede library worden de toegestane bestandsextensies van afbeeldingen gelimiteerd tot 3 (jpg, png en gif). Voor de rest maakt de WebAPI veel gebruik van Dependency Injection en is CORS (Cross-Origin Resource Sharing) ingesteld op het domein (met zowel schemas: HTTP en HTTPS als poort) waarop de Angular applicatie draait (gewoonlijk http://localhost:4200).

De Angular applicatie maakt gebruik van de libraries: Angular Material (een library met kant-en-klare componenten), ngx-toastr (voor meldingen aan de gebruiker) en ngrx/store voor state-mangement (dat onthoudt op welke pagina er is gebleven en of de filters aan staan). De applicatie is oorspronkelijk gemaakt in Angular 19 en is recentelijk geüpgraded naar Angular 21 met nieuwe features en de meest recente gangbare codeerpraktijken. De Angular applicatie is Zoneless en dit wil zeggen dat er geen gebruik gemaakt wordt van Zone.js voor change-detection, maar in plaats daarvan wordt er gebruik gemaakt van Angular signals.

Doordat het aantal kunstwerken later is uitgebreid, is er ook paginering toegevoegd alsook rechtsonder een knop om terug te scrollen naar boven. Verder zijn er in de tussentijd de packages geüpdatet, overbodige packages verwijderd, Cypress end-to-end testing toegevoegd en verschillende veranderingen toegepast om de applicatie meer gebruiksvriendelijk te maken. Het menu aan de linkerzijde is inklapbaar en hetzelfde geldt ook voor het menu met alle informatie (beschrijving, details, informatie over de kunstenaar en de kunststijl) op de detailpagina. De frontend applicatie is bovendien responsive waardoor op mobiele apparaten de layout compacter wordt.

Via de Frontend kunnen ook nieuwe kunstenaars, kunststromingen en kunstwerken worden toegevoegd. Er is een gescheiden pagina om afbeeldingen te uploaden via de WebAPI die in de ServiceLayer de afbeelding verkleint tot een thumbnail waarna deze in de database wordt ingevoerd. Angular blinkt uit in forms (in het bijzonder reactieve formulieren) waarmee data naar een WebAPI verzonden kan worden. In het form kan de titel van het schilderij, een beschrijving en een jaartal worden opgegeven. Door middel van dropdowns is de gewenste afbeelding te selecteren, alsook de kunstenaar en de kunststijl.

Wanneer er een nieuw kunstwerk wordt toegevoegd, dan is de tekst van de submit-knop ‘Create’, maar wanneer dit een update betreft dan is de tekst van de submit-knop ‘Update’. Via de WebAPI wordt de verzonden data gecontroleerd en wanneer deze juist is dan wordt deze in de PostgreSQL-database ingevoerd. Wanneer alles goed is gegaan, dan is het nieuwe schilderij beschikbaar op de pagina met alle schilderijen en zijn de details te zien op de detailpagina.

In dit nieuwe blogbericht heb ik geschreven over de ontwikkeling van de 2D Art Gallery. In ieder geval heb ik mijn repositories op Github weten op te leuken. In de ontwikkeling hiervan heb ik mijn creativiteit en fantasie kwijt gekund. En de fantasie staat helemaal vrij. Als beloning heeft een andere Github-user mijn repository een ster gegeven, dat erop wijst dat de code technisch juist is en of de kunstwerken bijzonder esthetisch zijn. 😊