kacperfl
commented
3 months ago Afgelopen periode:
Het oude invoerveld zonder functionaliteit is vervangen door een functionele versie. De zoekbalk heb ik toen als een apart project gemaakt om het verwerkingsproces voor mijzelf gemakkelijker te maken. Uiteindelijk bleek dit echter niet de beste aanpak te zijn, omdat ik dan de styling naar het hoofdproject moest overbrengen, wat weer tijd kostte. De zoekbalk is stap voor stap gemaakt: eerst het ontwerp en de styling zoals in Figma stond, en daarna kon ik de functionaliteit implementeren.
De zoekfunctie maakte toen gebruik van een API-placeholder met dummygegevens. Het was handig om de volledige zoekfunctionaliteit te ontwikkelen. Ik gebruikte een API met namen van mensen, waaruit ik ook meteen een soort filterfunctie maakte. Dus als je "kac" typte, kreeg je al resultaten met namen die met "kac" begonnen, bijvoorbeeld "Kacper". Ik hergebruikte deze functie ook voor de huidige zoekfunctie. Na veel testen kon ik de API-placeholder vervangen door een juiste API met de juiste resultaten. Ik heb ervoor gekozen om de API van GeoNames te gebruiken, omdat het een enorme database is van alle landen, steden, enzovoort. Het nadeel van de GeoNames API is dat er redelijk veel documentatie voor is, wat het moeilijker maakt om er meteen mee aan de slag te gaan.
De API zelf: ik maakte gebruik van PPL en PCLI, wat de codenamen zijn voor steden en landen (PPL = stad en PCLI = land). De rest van de code voor de functie is om de resultaten te verdelen in twee andere bestanden, namelijk: SearchResult.jsx en SearchResultsList.jsx. Zoals de namen al zeggen, is SearchResult.jsx bedoeld voor de resultaten die worden getoond op basis van de invoer van de gebruiker, en SearchResultsList.jsx is de lijst met die resultaten die in een lijst of een menu worden getoond.
Uiteindelijk is het ontwerp van de balk veranderd: nu bevinden alle filteropties zich binnen de zoekbalk, namelijk: land, stad, check-in, check-out en accommodatie.
Voor de komende periode:
Binnen de Domits-app heb ik gebruikgemaakt van de Google API, wat ervoor zorgde dat eigenlijk alles al voor jou werd gedaan: het filteren en de tabellen met resultaten. Het is dus veel gemakkelijker en ook sneller.
Het doel is om de huidige API (GeoNames) te vervangen door de API van Google, die toch wel iets beter werkt dan mijn code.
Enkele voordelen van de Google API (Places API):
De resultaten worden sneller getoond met minder vertraging. De filterfunctie is geavanceerder dan de huidige, waardoor je 99,95% van de tijd de juiste resultaten krijgt. Het kost veel minder tijd om Google te implementeren dan zelf vanaf nul te maken, zoals het nu is.
Enkele nadelen van de Google API (Places API): Voor zover ik weet, kun je de stijl van de lijsttabel niet aanpassen. Momenteel ziet de tabel van Google er een beetje ouderwets uit. Onder de resultaten wordt altijd een advertentie van Google weergegeven, namelijk: "Powered by Google". Al met al zijn er meer voordelen met de API van Google. Ik ga van API's wisselen zodra ik klaar ben met de structuur van de app. De duur daarvan kan variëren, maar ik verwacht dat het maximaal drie dagen duurt, aangezien een groot deel van de code moet worden verwijderd en opnieuw moet worden geschreven.
Main issue
Website search, filters & discoverability