Confidently Incorrect - Data-Viz and API's

#beginners #programming #codenewbie #codereview

Confidently Incorrect since 1987

API's and what they are for...

So here we begin to use a more commonly encountered language, the hot mess that is JavaScript! As well as our first interactions with API's and using the resulting data how we wish.

(For the record, I really quite enjoy JavaScript, especially TypeScript now I have adapted to strongly typing everything.)

So I would like to start by saying that the strict definition of an API still remains a bit...imprecise, for me. Given my background in Hospitality, my understanding of it is that the front-end of the software is equated to the Menu in a restaurant, offering a variety of choices to the customer/client, and the back-end of the software is the kitchen/Back of House, who have access to the raw materials and process the data into digestible and desired dishes, the services proposed by the Menu/front-end. The API then for me are the waiters and waitresses who transmit the demands from the front-end to the back-end, where the back-end prepares the demanded services, which are then delivered to the clients having been prepared by the back-end.

If anyone can explain API's and the role they play better, please do leave a comment below, I would **love **to hear other people's definitions!

Data Visualisation and using API's

Moving on to the project itself, we were simply asked to use an API and represent the information we recuperated visually. All rather simple, with an ocean of possibility in front of us. Our group settled upon the idea of creating something that would be useful to us in the future when the time came for the search for job offers.

As such, we were decided to use the Pôle emploi to get information regarding the Developer job posts available in the many regions of France. From the number available, to what are the most common languages advertised for, common frameworks, amount of experience and similar pertinent information, and then to display the information as pie graphs (delightfully called Camembert by the French!).

Several main problems for us to overcome as a team, the first being our relative inexperience setting up Git and how to use branches (which we did use towards the end of the project, but that can be a discussion in the later projects...), but once we had our repository set up, and a Trello board for creating job tickets we were underway.

How to make API calls correctly
How to visualise our data
How to make it not ugly

So we were lucky when choosing our API to use in as much as a government linked organisation, it is remarkably well documented, so once we had signed up for our auth-token, we had no real issues, beyond a bit of experimentation, getting the data we wanted back. We originally used Postman to test our API calls, but eventually found that there was a built-in test for our API calls on the site. But Postman is a great tool and I will be using again in the future, of that I have no doubt.

The next obstacle we had to overcome was how we were going to be visualising our data. We had already decided pie graphs were the simplest method for displaying the information, so the users can see at a glance, and after a bit of searching we found Chart.js which seemed simple enough for us to use...and eventually it was!
One issue we had was integrating it into our site, and eventually we had to use the CDN method, due to our inexperience with Node, but it worked!

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.7.0"></script>

Our final battle was with CSS, with a few issues with the colours on the graphs changing, seemingly unrelated to our styling, but we kept it simple, and navigating our first pull request, but with no conflicts it feels like, in hindsight, it barely counts, merging the graph functionality into the various separate JavaScript files, we were left with a handsome little site, our Choose your career project was finished.

Next week, we will be going over the Navigator Extension project, but this project was great fun and challenging us in ways we hadn't been challenged before. Until next time!