Voor het Qatar Museums project heb ik een website gemaakt waarop bezoekers een overzicht krijgen van alle kunstobjecten. De website bestaat uit meerdere pagina’s, waaronder een homepagina waarop alle objecten worden weergegeven. Gebruikers kunnen op deze pagina kunstobjecten ‘liken’ die ze interessant vinden.
Alle gelikete objecten worden automatisch opgeslagen en zijn later terug te vinden op de 'likes'-pagina, waar je jouw favorieten gemakkelijk kunt bekijken en opnieuw kunt bezoeken. Klik je op een object, dan ga je naar een detailpagina met meer informatie over het kunstwerk, zoals de titel en de kunstenaar.
Op de homepage kunnen gebruikers de objecten liken. Zodra je met de muis over een object beweegt, verschijnt er een like-knop. Wanneer je op deze knop klikt, verandert de knop tijdelijk in een animatie met drie puntjes. Deze animatie geeft aan dat de like wordt verwerkt en dat het systeem bezig is met het opslaan van je actie. Dit is de loading state, een visuele feedback om de gebruiker te laten weten dat het proces loopt.
like.button.loading.mp4
Zodra een gebruiker op de like-knop klikt, verandert het icoontje meteen in een rood gevuld hartje. Dit geeft een duidelijke bevestiging dat het object nu aan hun favorieten is toegevoegd. Het blijft zichtbaar zolang de gebruiker het object geliked houdt
succes.state.mp4
Voor deze website heb ik zowel server-side als client-side scripting gebruikt. De data wordt opgevraagd vanaf de server (server-side) en vervolgens dynamisch ingeladen in de pagina's met behulp van Liquid templates. Hierdoor wordt de content – zoals de kunstobjecten – automatisch ingevuld op basis van de data die van de server wordt opgehaald. Dit zorgt ervoor dat de website flexibel is en makkelijk aangepast kan worden wanneer de data verandert. In de server haal ik de data op via een fetch-oproep binnen een route.
app.get('/', async function (request, response) {
const apiResponse = await fetch('https://fdnd-agency.directus.app/items/fabrique_art_objects?fields=*,image.id,image.width,image.height');
const apiResponseJSON = await apiResponse.json();
response.render('index.liquid', { artworks: apiResponseJSON.data });
});
Daarna gebruik ik een for-loop in mijn Liquid-template om de afbeeldingen uit de database op de pagina weer te geven.
{% for artwork in artworks %}
<li class="li-gallery">
<a href="/object/{{ artwork.id }}">
<img src="https://fdnd-agency.directus.app/assets/{{ artwork.image.id }}" width="{{ artwork.image.width }}" height="{{ artwork.image.height }}" alt="{{ artwork.title }}">
</a>
<form action="/like/{{ artwork.id }}" method="post">
<button class="like-button"></button>
</form>
</li>
{% endfor %}
Dit project is gemaakt met Node.js. Om de website zelf te kunnen draaien, moet je eerst Node.js installeren op je computer. Vervolgens open je de terminal, daar voer je het commando npm install uit om alle benodigde pakketten te installeren. Als dat klaar is, start je de server met npm start. De website is daarna te bekijken in je browser via http://localhost:8000.
This project is licensed under the terms of the MIT license.