Noa's journal

Sprint 1:

This sprint I learned a lot about how text works in C++. This includes char arrays, Strings in c++ and different ways to manipulate/transform strings into the desired result like taking certain sections out of it.

Another thing I learned is how to use classes in C++ and how they work. This includes things like what header files are, where to define and put certain information and some of the interactions between header and classes.

Sprint 2:

This sprint I learned about various different things. Like the best way to receive nested json data and interactions between the Arduino IDE and header files. This week especially was learning about smaller things like these.

One issue that I was having with a user story, was that I possibly had to put two different GET requests on the same endpoint. There were multiple ways to do this. The one method that I already knew beforehand was to give query parameters on that same endpoint, this way you can just look at what parameters were given and decide what to do from there. However this method was not desirable, no extra data was needed to send as a parameter. So, I had to look and see how you could do it without any query parameters. What I found is that you can add data to the request and then read the newly added data in the javascript file. From here on you can call the desired method. This way you can have multiple of the same requests on the same endpoint.

Sprint 3:

One user story I had this sprint, was about about getting data from two tables from the database. These tables were linked with each other and that link was also used to determine what result was getting display on the front-end of the website. Basically, the point of the user story that I was working on was to show the user which question was currently selected in the database. Then below this question, the amount of answers with a "Yes" vote and a "No" vote would be displayed as a statistic to show the user.

There were two ways that I saw that I could make this work. One was to create an SQL query that would only request the specific selected question and the answers belonging to it. This would make it, so that the current question or answer API would need to be able to handle multiple of the same CRUD operations, in this case the "GET" method.

The other option would be to fetch all data from the question and answer table. In the JavaScript file you could then search between all questions for the specific selected question. From here you can get the id of that question and match it with the question_id field that the answers have. This way you can get all answers that belong to the specific selected question.

Both of these methods work, to make a decision on which method is best to use, I would however need to find out how to get multiple of the same CRUD actions working on the same API endpoint. Which is why I setup a learning story to learn about this.

For what I learned from looking online, I saw that one way to do this is by query parameters. These can be received and echod using the following line:

1

echo $_SERVER['QUERY_STRING'];

From here I experimented with this creating the following function:

1
2
3
4

function handleSingleGet(){
        echo executeQuery(SELECT * FROM Question INNER JOIN Answer ON Question.id=Answer.Question_id WHERE Question.selected = 1);
        echo $_SERVER['QUERY_STRING'];
    }

This result would get all data from the answer and question table that belongs to the specific selected question. Then to make this GET method work on an endpoint that already has a GET method, we call add an if statement to the following switch case:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

header("Access-Control-Allow-Origin: *");
    // Based on the request method, the request will be handled differently.
    switch ($_SERVER['REQUEST_METHOD']) {
        case "GET":
            handleGet();
            break;
        case "POST";
            handlePost();
            break;
        default:
            http_response_code(405);
            echo json_encode(array("success" => false));
    }

This is one way to get multiple of the same CRUD actions working on the same API endpoint.

Week 8:

Research and first implementation

This week I worked on the website. One of the things that I worked on, was creating a pie chart for the answers. This is in order to visualize the answer data for the admin. I have personally never worked with any way to display graphs or charts in the front-end. So this is something that I had to learn.

I ended up choosing the ChartJS JavaScript library in order to help display the chart. After discussing with the team, we decided on using a pie chart instead of something like a doughnut chart, bar chart or anything else. First thing that I did was look at the documentation of the ChartJS library. This is where my first problem started. The documentation was pretty hard to understand and didn't have a lot of examples of how certain features worked. I didn't understand what was written, so I went and looked at different guides for ChartJS. The one that I settled on is the W3Schools guide: https://www.w3schools.com/graphics/plot_chartjs.asp .

The W3Schools page was very useful, not only did it show how to implement various charts and graphs. It provided a sandbox environment for each graph. This lets you play around with different settings, mess around with the data and lets you build functions around the graph. This allowed me to gain a greater understanding of how this library works and the limitations if the library. With this knowledge I was able to implement a pie chart into the website of the project.

Updating chart data, no data and bug fixing

When I finished creating the pie chart using chartJS, I found that I was having a couple of issues. First issue that I was having is that for the graph to load in different data, the page had to be reloaded. This was an issue since most features on our website updated things live without having to refresh anything. So, the pie chart ended up feeling pretty bad to use since you had to refresh the website any time you wanted to check the answer data of a different question.

The second issue that I found was that when a question was selected which had no answer data, ChartJs would only display the labels without any chart. This was the worst of both worlds where on one hand it didn't render the chart, but on the other hand didn't make the labels disappear along with the chart. It would also create a big blank space where the chart usually was. After discussing this with the team, we decided that it gave a rather unpleasant result and that we should change it to something more use friendly.

In order to fix the first issue I googled around, read the documentation, looked at some StackOverflow posts and looked at what a teammate had done to implement their graph. I found multiple ways to get rid of of the page refreshing option, most centering around the .update() function. I decided on the use that would fit best for my chart and the way that I implemented it. By giving a new dataset to the datasets property of the chart and then rerendering the chart with the .update() function of the library. With this the chart gets updated with new data when a different questions get selected without having to reload the website.

The second issue was a lot less straight forward and took me pretty long to solve. When given no data, the chart would disappear instead of showing an empty chart. First I searched for why this happened. I found out that ChartJS by design, does not render a chart or graph when no data is given nor when the data given equals to 0. I looked to see if there were any alternatives built-in to the standard version of ChartJS, however there was no such option available.

Next I went to look for alternative solutions that involved ChartJs. I tested different plugins and other solutions, yet I couldn't get it to work the way that I wanted to. The solution that I decided on was to remove the chart if the selected question didn't have any answer data. Text saying that there is no answer data would be replacing the chart in case this happened. This took quite a while to implement, because not everything about ChartJS was documented on their website. One particular issue I was having was removing the pie chart. The errors that I kept on getting from chartJS were not understandable and caused a lot of confusion. Through trial and error, I was able to fix all bugs and I was actually able to get everything working the way that I wanted to.