Opdracht

1. Schrijf de vraag van de opdrachtgever op papier:

• Als gebruiker wil ik al mijn opgeslagen huizen kunnen zien in een lijst en ik kan nog meer lijsten aanmaken. ALs je een lijst opent dan kan je de details zien zoals een afbeelding, prijs, details en de makelaar.

2. Bepaal de Core functionaliteit:

• De core functionaliteit is dat je huizen kunt opslaan in een lijst en dat je het een naam kunt geven (soort van een library).

3. Gebruik verschillende schetstechnieken om grip te krijgen op de opdracht, zodat je weet wat je moet bouwen:

• Ik had eerst een simpele schets gemaakt maar Sanne (de docent) heeft mij als feedback gegeven dat ik mijn schets verder moet uitwerken en alles wat ik wil hebben in stappen moet uittekenen en de bijbehorende codes moet schrijven (breakdown schets)

Analyse

Als eerst heb ik samen met Jesse (ik heb samen met hem dezelfde Opdrachtgever) besproken wat de opdrachtgever van ons vraagt, hoe we dat kunnen realiseren en oppakken. Wat de opdrachtgever wilt kan je lezen bij de Debriefing onder Opdrachtsomschrijving. Ik heb voor de opdracht gekozen waarbij je als gebruiker bij je opgeslagen huizen kunt kijken en nog meer lijsten kunt aanmaken (denk aan een moodboard van Pinterest, of een lijst aanmaken op YouTube als je een video wilt opslaan). Eerst hadden we gesproken over de design. We hebben dan gekeken naar de kleuren, fonts, hierarchie en ook naar het design/code van studenten die ook funda hadden de vorige sprint. Een simpele schets op Figma.

Ontwerp

Wat moet ik toepassen:

• Site map (+url,...)
• Wireframes (+url, +control flow met routes, data, +breakdown
• Wireflow Ik heb een beetje gekeken naar wat andere studenten van Funda in de vorige sprint lmao

Orientatie schets

Als eerst heb ik een beetje georienteert met schetsen en ben uiteindelijk verder gegaan met het 3e schets.

breakdown schets

Ik heb een breakdown gemaakt van de derde schets met mobile first. Ik heb een van de website gewoon en de andere is met de dropdown menu die alleen werkt bij mobile.

Bouwen

Ik heb als een begin de server opgezet, een GET en ROUTE gecreëerd om zodat ik zonder problemen kan werken bij de ejs partials:

const apiUrl = "https://fdnd-agency.directus.app/items/";
const apiHouse = `${apiUrl}f_houses`;
const apiHouseIMG = `${apiUrl}f_houses?fields=*,poster_image.id,poster_image.height,poster_image.width`;
const apiList = `${apiUrl}f_list`;
const apiUsers = `${apiUrl}f_users`;
const apiFeedback = `${apiUrl}f_feedback`;

app.get('/', function(request, response) {
  fetchJson('https://fdnd-agency.directus.app/items/f_houses')
  response.render('index.ejs')
});

app.get('/lijsten', function(request, response) {
  // fetchJson('https://fdnd-agency.directus.app/items/f_list/' + request.params.id + '?fields=*.*.*,houses.f_houses_id,houses.f_houses_id')
  // .then((apiData),
  response.render('lijsten.ejs')
});
// )});