Logboek - RoyCsuka/frontend-applications GitHub Wiki

Proces

Hieronder kun je mijn proces volgen. Welke stappen ik heb gezet en hoe ik tot het resultaat ben gekomen. Ook kun je lezen dat sommige dingen niet gelukt zijn omdat ik Vue nog niet heel goed beheers.

Week 1

Componenten aanmaken

Eerst heb ik twee componenten aangemaakt "TheData.vue" en "HelloWorld.vue".

Titel ophalen met SPARQL

Vervolgens heb ik de data uit de database (SPARQL) proberen te halen via het hulp bestand door gewoon een aantal stukken code te kopiëren en te plakken (Met hulp van mijn studiegenoten). Hieronder is de code te zien die een array aan titels m.b.t. maskers laat zien in de console.

export default {
    components: {
        HelloWorld
    },
    data () {
        return {
          title: "Maskers van Toen",
          results: []
        }
    },

    // FETCH THE DATA
    mounted () {
    const url = "https://api.data.netwerkdigitaalerfgoed.nl/datasets/ivo/NMVW/services/NMVW-14/sparql"

    //Note that the query is wrapped in es6 template strings to allow for easy copy pasting
    const query = `
    PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
    PREFIX dc: <http://purl.org/dc/elements/1.1/>
    PREFIX dct: <http://purl.org/dc/terms/>
    PREFIX skos: <http://www.w3.org/2004/02/skos/core#>
    PREFIX edm: <http://www.europeana.eu/schemas/edm/>
    PREFIX foaf: <http://xmlns.com/foaf/0.1/>
    SELECT * WHERE {
        ?cho dc:title ?title .
        OPTIONAL { ?cho dc:description ?desc .}
        FILTER (CONTAINS (?title, "maskers") OR
                CONTAINS (?title, "mask")
        )
    } LIMIT 50
    `

    this.runQuery(url, query)
    },
    methods :{
        runQuery(url, query) {
            fetch(url)

            fetch(url+"?query="+ encodeURIComponent(query) +"&format=json")
            .then(res => res.json())
            .then(json => {
                this.results = json.results.bindings;
                var results = this.results;

            })
        }
    }
}

Nu de titels worden uit SPARQL worden gehaald en deze in de console te zien zijn ga ik als eerst de titels proberen te tonen op mijn home pagina.

Titels tonen in Vue

Om de data te kunnen tonen via Vue heb ik de regel code hieronder toegevoegd. Door wat te google'en heb ik gevonden en begrepen hoe je data te kan tonen in je app via deze website. Er wordt ook een for loop uitgevoerd door de data in de

  • tag met v-for="item in results". 
    <li v-for="item in results">
    {{ item.title.value }}
</li>

    Achtergrond afbeelding Vue

    Om de afbeeldingen als achtergrond afbeelding in te laden heb ik in SPARQL dit stukje code toegevoegd: ?cho edm:isShownBy ?img . en om het te laten werken in Vue heb ik dit gevonden om het te laten werken: https://stackoverflow.com/questions/35242272/vue-js-data-bind-style-backgroundimage-not-working

    Week 2

    Herfstvakantie.

    Week 3

    Structuur en styling

    De data is opgehaald en nu is het tijd voor wat CSS en HTML. Omdat ik het fijn vindt om in scss te werken heb ik een stukje code toegevoegd in de main.js file import './style.scss' wat het mogelijk maakt om met scss te werken.

    On-click functie in Vue

    Om te begrijpen hoe je functies verwerkt in Vuejs, heb ik gewerkt aan een simpele "add class on-click" functie die ik hier gevonden heb: https://stackoverflow.com/questions/42971081/use-arrow-function-in-vue-computed-does-not-work. Deze functie heb ik toegepast op de home page knop: "bekijk de collage". Met deze functie wil ik zorgen dat je naar beneden scrollt.

    Scroll functie in Vue

    De volgende functie die ik heb toegevoegd is als er gescrollt wordt dat er een class wordt toegevoegd aan een container zodat ik de titel kan verplaatsen en ander soort content kan tonen.

    Infinte scrolling

    1. Toen dit gelukt was heb ik naar infinite scrolling gekeken en door deze tutorial te volgen maar kwam tot geen resultaat. Het probleem lag hem bij mij dat ik deze code niet goed begrijp. https://alligator.io/vuejs/implementing-infinite-scroll/.
    2. Infinite scrolling heb ik ook geprobeerd via deze tutorial: https://medium.com/@fayazara/easiest-way-to-implement-infinite-scroll-in-vue-js-54a0a6c1111. Hier wordt het gedaan via een plug-in.

    Sorteren in Vue

    Na een mislukte poging voor infinite scrolling ben ik mij gaan focussen op het sorteren van mijn resultaten. Voor deze optie heb ik de onderstaande tutorials / oplossingen gevolgd:

    Sorteren on click in Vue

    In combinatie met sorteren wil ik ook dat er een class wordt getoggled op het element (om visueel te laten zien wat er gebeurt). De link hieronder heeft mij verder geholpen om twee functies in een click te verwerken. Link is gevonden door Coen en ik heb zelf de code zo toegepast en omschreven dat het voor mijn applicatie werkt.

    • ⚠️ **GitHub.com Fallback** ⚠️