This blog was originally published on school blog website this is a republish and translation of the original content
The past two weeks I have been busy working on Jollycons and on a new project for Johan.
Customizing the search function
Currently, a user can only search by the name of an icon. This only works if the user knows the exact name of an icon. To make it easier for the user, we want to be able to search by set name and by self-set keywords as well.
For the search function we are currently creating a JSON file, this file contains all icons and icon sets. We create this file in advance so that we do not have to request all data from the server. This makes the search function work much faster than if we would do this on the client* (user's browser).
Creating an icon set
To create the set of data, I created a node script. This is a javascript file which we run in the terminal. This script creates a JSON file with all the data of one icon set.
First let's define the options for the script, these are the values we pass along when we run the script.
I have created three options for the script. The option dry is for testing the script, when this option is included the end result will be displayed in console instead of being saved to a file.
The second option is set, here we give the name of the icon set. We then use this to find all icons in the icon set. The last option is tags, here we can provide tags that we want to assign to each icon.
Defining the icons
To find all the icons, we use the names of the images, as they follow a fixed structure. Let's write the function that looped over all the files in a folder* (executing a function for each file in a folder).
Here we execute the convertNameToJsonObject function for each file that meets the criteria. This function creates an object* (a group of data) for each icon. We still need to write this function so let's get started right away.
We pass the filename to this function, before we can use it we need to take out the unnecessary data. We remove the text icon-(the name of the set)- and .png from the name so that only the name of the icon remains.
We then create an object with the data of the icon, for the tags we run the generateTags function. In this function we create an array with all the tags. Now let's write this function.
Here we go over the tags passed to the script by the user. We run the replaceCharacters function for each tag. This function replaces all hyphens* (a - ) and replaces them for a space, then returns both variants. This allows a user to search for a search term with a hyphen* (a -) and without one.
Tags per icon
Now we just need to add to this function the code that retrieves the tags from a Google sheet file. To do this, we download the Google sheet file and save it as an Excel file.
We then use a JavaScript package* (code written by someone else) to turn the Excel file into a JSON object.
Now let's write a function that we use to retrieve the tags for one icon from the JSON object.
Here we first filter through all icons to see if our icon is in the Excel file. If the icon is not in the Excel file we return an empty string. If the icon is in the Excel file we return the icon's tags.
Now that we have created all the parts of the function, we can put them together and test the function.
Great it looks like the script is working, let's open the audio.json file and see if the result is correct.
Great everything looks good, the only problem we have now is that if we modify the tags manually typing in the terminal is quite inconvenient. So let's make another script that runs this script for all the sets we define in there.
The creation of all sets
Since our script already works, we only need to write the code that executes our already existing script for each set. First, let's create an array with the data of all the sets. Each set has two values the name and tags of the set.
Now let's write a function that executes the script for each set, for this we go over each item and use the spawn command in node. With this we execute a command in the terminal.
With this function we create the data for each icon set, all we have to do now is write the code that informs the user if something went wrong in executing the script.
We first create a function that listens for error, when the script encounters an error this function shows the error. Next, we create a function that listens for the script to close. If the script ended with a code other than zero, something probably went wrong somewhere. Therefore, here we show the user that something may have gone wrong.
Great everything seems to work now, from all these separate data files we then create one icons.json file and use it for the search function.
If we now open the browser we can also search on the tags, you can now try this out for yourself on https://jollycons.com.
Mistakes and solutions
In creating the node scripts I ran into quite a few problems, mainly related to how we wanted to do it.
The first problem was how to define the tags of one icon. My first idea was to create a JSON file per icon set and then add the tags for one icon. This is only duplicate work and then if the script is run again everything is gone.
The final solution I chose is to extract the tags from the Excel file since we already typed them there. The reason we download the Google sheet locally and not retrieve it with javascript is that these files live on the server. And thus can be downloaded by people, to put it lightly it would be less than optimal if an outsider could access our google sheet.
The next problem I ran into is that the Excel file also contains the icons that have not yet been published. So these should absolutely not end up in the search function either.
I solved this problem by retrieving the icon names from the file names. As a result, icons that we have not yet released will never end up in the search function.
What did I learn
I have spent the past two weeks working on putting the finishing touches on Jollycons so that it is ready for release.
In doing so, I have been working on the following points from my PAP.
Core task 2
Core task 2 - Learning more frameworks like Gatsby
We use gatsby at Jollycons, this has brought back working with frameworks. Furthermore, for creating the node scripts, I also used libraries such as XLSX.
personal development
Personal development learning objective - Improve communication with my colleagues
This has come back over the past few weeks as I consulted a lot with my colleagues about the functionality and approach of the search function when creating the script. Furthermore, I also communicated about exactly how the search function matched* (when does the search term match what the user is looking for) with the user's search term.
Learning objective in personal development - giving feedback to teammates
Although this came back a lot in the past two weeks when fixing bugs and pull requests, I didn't work on this much when creating the search function.
Learning objective in personal development - Better substantiate my choices
I worked on this by justifying why this was my approach for each part of creating the search function. From explaining why we download the sheet locally and not from google sheet. To why I make the script work in the terminal.
learning objectives on-the-job trainer
Practice trainer's learning objective - Structured workflow for each task you complete
This came back because when I created these scripts, I figured out in advance, step by step, how I was going to tackle it and what I needed for it to complete this task successfully.
Practitioner's Learning Objective - To be able to proudly share your work with colleagues and the outside world.
I am very proud of how I went about creating the data structure for search. So I can share this with great pride with the outside world.
What will I do in the coming weeks
For the next two weeks I will be working on the project Johan, here we will be using React-native and React-native-web.