1. Week 1
Je hebt gewerkt volgens de verschillende fases van de development-lifecycle en je hebt je werk gedocumenteerd in de Readme en Wiki.
Je toont aan dat je in de analysefase verschillende methoden en technieken hebt ingezet om te inventariseren wat er moet gebeuren.
Je toont aan dat je in de ontwerpfase verschillende methoden en technieken hebt ingezet die ervoor zorgen dat je precies weet wat je moet bouwen.
Je toont aan dat je in de bouwfase verschillende methoden en technieken hebt ingezet om het ontwerp te realiseren.
Je toont aan dat je in de integratiefase verschillende methoden en technieken hebt ingezet om je website live te zetten.
Je toont aan dat je in de testfase verschillende methoden en technieken hebt ingezet om het ontwerp te testen en verbeteren.
De code staat op Github en heeft een live url.
We zijn begonnen met het analyseren van fresk.digital. Daarna hebben we een aantal vragen voorbereid.
- wat is de opdracht
- welke doelen hebben we hiervoor
- wat wilt de opdrachtgever bij de sprint review
- heeft het een relatie met een ander project
- Is het deel van een groter geheel? of is het een zelfstaand project?
- Is er al een huisstijl? Hebben jullie hiervoor een voorbeeld zoals een draaiboek/styleguide?
- Krijgen wij toegang tot een database/API? Of moeten wij zelf een database opzetten?
- Wie is de doelgroep?
- Waarom deze doelgroep?
- Wat willen zij bereiken?
- Waarom tonen zij bepaald gedrag?
- Waarop baseren zij hun keuzes?
- Hoe denken zij over het gebruik van het product of dienst?
Iedereen bij fresk.digital heeft jarenlange ervaring met complexe uitdagingen die op het snijvlak liggen van het digitale en fysieke in de business kern van onze klanten. Elk met onze eigen expertise, maar gezamenlijk complementair. Samen representeren wij de dwarsdoorsnede van wat nodig is om een meaningful digital product op te leveren dat de behoefte van onze klanten en hun doelgroep vervult.
Fresk.digital https://fresk.digital/nl Lange Viestraat 2B 3511 BK Utrecht Martijn Nieuwenhuizen 085-7430640 contact@fresk.digital LinkedIn Instagram Datum aanvraag: 03-06-2024 Datum oplevering: 20-06-2024
(De)briefing Contactgegevens Fresk Digital https://freks.digital/nl
Lange Viestraat 2B 3511 BK Utrecht
Martijn Nieuwenhuizen 085-7430640 contact@freks.digital
Datum aanvraag: 03-06-2024 Datum oplevering: 20-06-2024 Achtergrondinformatie Iedereen bij Freks heeft jarenlange ervaring met complexe uitdagingen die op het snijvlak liggen van het digitale en fysieke in de business kern van hun klanten. Elk met hun eigen expertise, maar gezamenlijk complementair. Samen representeren ze de dwarsdoorsnede van wat nodig is om een meaningful digital product op te leveren dat de behoefte van hun klanten en hun doelgroep vervult. Opdrachtomschrijving In dit project kunnen we aan de slag met verschillende User Stories: Initial Setup, zet je project klaar. Laat data zien van de Google Analytics API; Laat data zien van de Linkedin Analytics API; Laat data zien van de Hotjar Analytics API; Om de data niet voor iedereen zichtbaar te maken hebben we een login/authentication nodig; Stijl dit volgens de styleguide van Fresk; Combineer alle data en laat dat zien van 1 gebruiker.
Deze user stories zijn nader beschreven in de presentatie van Fresk. Aanleiding De aanleiding van deze opdracht is dat Fresk graag wil inzien wat de activiteiten zijn op hun platforms. Vanuit hier kunnen ze inzien wat voor acties er zijn en welke acties zij kunnen uitvoeren of veranderen om dit eventueel te verbeteren. Zij willen een overzicht kunnen zien van data op verschillende platforms, om het gebruik goed te kunnen meten van een gebruiker. Het is dan gemakkelijker om te kijken hoe het gaat met een platform en de acties die zijn uitgevoerd. Doelstelling Het doel van dit project is om statistieken te kunnen zien van het gebruik van de Fresk Digital website in een duidelijk overzicht. Zij willen intern kunnen zien wat hun analytics zijn. Oplevering Wat moeten wij opleveren? Fresk wil graag een website zien die door een login toegankelijk is. Aangezien het voor intern gebruik is van het bedrijf. Hierbij willen ze volgende onderdelen zien: Een overzicht van de API’s waarbij de data wordt gegeven over het gebruik op de platforms. Zo kunnen zij een duidelijk overzicht krijgen over het gebruik van hun platforms door gebruikers en eventuele klanten. Hou hierbij rekening dat je data vanuit de volgende API’s gebruikt: Google Analytics API Linkedin Analytics API Hotjar Analytics API Wanneer je deze data laat zien, zorg dat je dan in ieder geval de data van Google kan zien API key data mag niet openbaar worden :) Een login formulier, om ervoor te zorgen dat de data niet openbaar wordt voor gebruikers. Deze data is alleen voor intern gebruik gestijld is volgens de huisstijl. Vergeet niet dat niet alle eisen hoeven worden voldaan. Zorg eerder dat je goed focust op één user story en daarvan de code en uitleg goed uitschrijft, dan dat je bij meerdere user stories half werk aanlevert. Randvoorwaarden Well written code: Zorg voor semantische, overzichtelijke code met de benodigde uitleg waardoor iedereen met jouw code aan de slag zou kunnen.
Progressive Enhancement: Binnen ons bedrijf werken we vooral in 2 lagen. Hierin hebben wij de Foundation en de Meaningful laag. Zo willen we dat er altijd een sterke basis is, waar alles naar behoren functioneert. Pas als er een sterke basis is, willen wij de pagina meer meaningful maken.
Accessible / Inclusive: De pagina moet toegankelijk zijn. Tested: Zorg dat de pagina goed getest is, je wilt altijd voorkomen dat gebruikers in de war raken door wat jij hebt gemaakt. Beter goed getest, dan snel verpest.
Not too much dependencies: Pas op bij het gebruik van bijvoorbeeld plug-ins etc. Hoe meer dingen je toevoegt aan de website, hoe meer dingen er kapot kunnen gaan of afhankelijk worden van elkaar. Wat wordt er verwacht? Zij vinden het in ieder geval belangrijk om in ieder geval op één user story focussen en die optimaliseren, dan dat je aan alles half werk levert.
Verder zijn de volgende dingen van belang: Zorg dat als je aan een API werkt, je begint met de Google Analytics API. Je hebt goede semantische HTML, die kan worden meegenomen in opkomende projecten. Gebruikers van het eindresultaat De doelgroep is gericht op het eigen personeel. Zij willen intern kunnen zien wat hun analytics zijn. Dit is met het doel dat zij marketing gericht naar hun acties kunnen kijken. Waarbij zij ook willen kijken met welke acties de meeste kijkers behaalt. Voor hen is deze data waardevol om overzichtelijk een aanpak te kunnen maken over hun werk en socials. Relatie met andere projecten Dit project staat los van andere projecten. Dit is iets wat Fresk zelf wil gaan gebruiken, en wat nergens aan vast gelinkt staat. Het doel van dit project is om statistieken te zien van het gebruik van de Fresk Digital website. Vragen voor de opdrachtgever Wat voor opdracht hebben jullie voor ons? Wat is jullie doelgroep? In hoeverre moeten wij daar rekening mee houden? Moet er speciale content op de pagina komen, is hier een database of API voor? Maken jullie gebruik van een huisstijl? Heeft dit project relaties met andere projecten? Of staat dit los? Hebben jullie nog bepaalde criteria voor de oplevering van dit project? Hoe komen jullie bij deze opdracht? Wat is hiervoor de aanleiding geweest? Alle vragen die wij hadden voorbereid zijn niet aan bod gekomen tijdens de briefing. Ze hadden een duidelijke presentatie voorbereid waardoor al onze vragen al beantwoord waren.
Ik ben begonnen met npm install en json bestanden
Ik heb oriënterende schetsen gemaakt van data visualization, Ik ga hier later een nettere ontwerp van maken. Dit was vooral om gedachten en processen te verkennen door middel van schetsen.
Daarna heb ik een sitemap gemaakt om te verkennen hoeveel pagina's er uiteindelijk horen te komen.
Ik heb op woensdag een nieuw ontwerp gemaakt. Dit nieuwe ontwerp laat een preview zien op een het dashboard, in de eerdere schets was het dashboard nog een beetje nietszeggende, maar door een preview data toe te voegen heeft het meer waarde.
De afgelopen dagen was ik ook bezig met het opzetten van de GA API. Ik ben begonnen met bestanden aanmaken en daarna begon ik met npm install. Daarna was ik verder gegaan met environment variable, ik heb gebruik gemaakt van Dotenv. Ik heb het stappenplan gevolgd van npm.
- npm install dotenv;
- Create a .env file in the root of your project (add the key in the .env file);
- Import and configure Dotenv (add this code in server.js -> import dotenv from "dotenv";dotenv.config());
- Add parsing.
Daarna heb ik een het API QuickStart stappenplan gevolgd.
- Stap 1 en 2 waren al gedaan dus die kon ik overslaan;
Configure authentication
- Voeg credential file toe (+ zet deze in de gitignore file)
- Add this line in the terminal (export GOOGLE_APPLICATION_CREDENTIALS="/credentials.json" -> example)
Install the client library 4. Om dit te doen heb ik dit stappenplan gevolgd. 5. Maak een bestand aan 'index.js'; 6. Voeg de code toe die in het voorbeeld staat; 7. Terug naar Configure autentication stappenplan; 8. Bovenaan het bestand moet je het propertyID toevoegen