week 1
Wat gemaakt moet worden
Een login systeem
Deze week was de start van het bouwen aan een werkend loginsysteem dat je naar de productpagina leidt binnen de app. Vervolgens moet de productpagina gemaakt worden met functionaliteiten als een zoekbalk en filter via een json bestand.
Ik moet alvast nadenken voor een functionaliteit, die ik dan later moet maken met python in Django. Ik heb via zijn scherm mee kunnen kijken hoe hij de database heeft kunnen opzetten. Hij heeft daarmee gebruikgemaakt van SQLite. Voor nu vind hij dat het belangrijker was dat er aan de functionaliteit gebouwd werd. Daarnaast heb ik een klein deel kunnen stijlen, door middel van de aangegeven kleuren die hij had voorgesteld.
Yannick heeft mij een deel van Mollie laten zien toen ik mijn interesse liet zien in het bouwen van webshops via een Stripe-betaalsysteem, en hoe hij een zakelijk account gebruikt.
Verder moet ik ervoor zorgen dat de logingegevens in de localstorage opgeslagen worden, waarbij je inlogt. Verder waren er functionaliteiten om te filteren op categorieën en een searchbalk om specifieke producten op te zoeken. En de productendetailpagina, waar alle informatie over de producten wordt weergegeven. Maar daar wordt later aan gewerkt. Ik had best wat moeite met de routing, maar heb dat uiteindelijk voor een deel kunnen oplossen door de routes op te slaan in een apart bestand, waar ik heb kunnen beschrijven waar de knoppen naartoe leiden, zoals naar de e-mailregistratie, wachtwoordregistratie en een loginregistratie als je al een account hebt, hoewel de echte functionaliteit daar nog niet in zit om met de knoppen verder te gaan.
Week 2
Ditmaal ben ik verder gegaan met de routing van het register/loginsysteem. Het is gelukt om met localstorage de gegevens op te slaan die ik via de commandprompt kan uitlezen. Verder heb ik de ingrediëntenlijst aangemaakt en heb ik verder gewerkt aan de navigatie om de knoppen werkend te maken. Momenteel gaat dat wel ietsjes stroef met de verbindingen. Ook ben ik verder gegaan met de ingrediëntenpagina, die ik samen met de receptenpagina heb kunnen linken aan de navigatie. Op dit moment is het gelukt om de data uit te lezen en op de pagina te zetten. Voor de zekerheid heb ik als eerste een melding van gemaakt of het de juiste elementen pakt, zoals als ik op het fried plantain-recept klik dat ik een melding krijg: je klikt nu op dit recept. Van daaruit werk ik naar een gedetailleerde receptenpagina voor dat specifieke recept.
Deze keer had ik gewerkt aan de receptenpagina en ingredientenpagina. Ik had daar wel wat moeite mee had. Ook had ik daar routes voor aangemaakt via de app om je daarnaartoe te verwijzen. Ik heb daarvoor een bestand had met ingrediënten, waarvoor ik kaartjes had aangemaakt. Dat was geen goede beslissing gezien we nog niet zo ver zijn, dus is dat bestand verwijderd en ben ik verder gaan werken aan het loginsysteem dat ditmaal een stukje ingewikkelder werd, waarbij ik voor moest zorgen als je niet ingelogd bent geen toegang had tot de hoofdpagina en naar het registratie/loginformulier werd gestuurd, en als je ingelogd bent dat je in de main pagina zit. Ook moest ik rekening houden mijn cache/cookies te kunnen verwijderen, gezien na het opnieuw opstarten van de app ik direct werd ingelogd met de gegevens die opgeslagen werden met de localstorage wat ervoor zorgde dat ik niet meer hoef in te loggen, maar gezien ik het nog altijd wil testen als het later verbeterd moet worden heb ik ervoor gezorgd dat de opgeslagen inloggegevens direct worden gewist als je het refresht. Bij het inlogsysteem kan je nu wel naar de receptenpagina, maar nog niet via de sign up. Hiermee heb ik geleerd hoe ik met booleans kan werken met de true en false, en vandaaruit ook statements kan plaatsen wat er gebeurd als er wel of niet is ingelogd. ook heb ik wat meer geleerd over de routing binnen React-Native om zo met de knoppen te beslissen waar je naartoe geleid moet worden met return statements, en variabelen declareert die je in andere bestanden toepast, om zo een stukje werkend te maken over de zoekbalk, maar heb nog geen specifieke knoppen die kunnen filteren.
Bij de recepten- en ingrediëntenpagina heb ik ervoor kunnen zorgen dat je op de telefoon gemakkelijk kan navigeren tussen de receptenpagina en de ingrediëntenpagina door middel van het installeren van react-navigation in de IngredientsStack.js. In het begin was dat vrij moeilijk, waardoor ik eerst een testscript heb gemaakt buiten het project waaraan ik werk. de reden voor react-navigation komt, aangezien je daarmee makkelijker routes kan defineren met stack die je direct leidt naar de component die je hebt gedefinieerd. Zoals hieronder heb ik een tab.screen dat kortweg een knopje in de navigatieContainer en Tab.navigator (navigatiebalk), waarmee ik de IngredientsStack aanroep van de IngredientsStack.js, waar ik alle componenten heb geïmporteerd van de ingredientenpagina. In de ingrediëntenpagina heb ik de data geïmporteerd, waar alle info van de kaartjes zitten van de data.js.
