GYM 101- NEWBIE EDITION
I think creating my Single Page Application (SPA) was probably the hardest thing I had to make. Mainly because I’m building an application that integrated everything I’ve learned up to this point. Anyway, for my project I decided to hit something close to home, I created a web application that drew inspiration from some of my early on newbie exercises, which helped me during my fitness journey. So much like my journey now I wanted to share what I know by building my own API.
Originally I thought about searching public API’s however, I weighted out the practical-ness and forgo the idea and went on to making my own. Anyway, wrapping my head on what exactly is an API confused me. Is it a data base? Or possibly the server? Much like the explanation I am going to give this is really for me rather than the reader, API is short for Application Programming Interface (API). Now to answer my own questions, no its not a data base or the server , rather it is the code that governs the access point(s) for the server. In other words, it is an access point to an app that can access a database. Since I went ahead with making my own API, I didn’t have to worry about public API key’s to access their data and since I was familiar with the structure I already knew I had over thirty exercise’s
In short with understanding the gist of what is an API, It was only natural to get an understanding of what is JSON? Short for JavaScript Object Notation, which is basically a way of representing data that looks like JavaScript objects. Here’s a snippet of JavaScript Object from my own project.
{"upper":[{"id": 30,"exerciseName": "front plate raise","muscle": "shoulders","equipment": "plates","mechanicsType": "isolation","url": "https://s3.amazonaws.com/prod.skimble/assets/2365061/image_iphone.jpg"}]}
As seen from my example, it’s fairly easy to read. Nested within the upper object, I included six proprieties along with its corresponding value. The value’s were unique for each upper object, however the proprieties remained the same. Granted for this example if I wanted to search or better yet filter a different example I needed to identify the object based on it’s proprieties. We can send an API a request detailing the information we want, in return for data in response to a request made by a client. So to make my life easier I used the filter method.
upperArray.filter(upper => upper.muscle.includes("chest")
As seen above The filter()
method creates a new array with all elements that pass the test implemented by the provided function, on top of filter I needed a method that would refine my search. So I added The includes()
method. Which determines whether an array includes a certain value among its entries, returning true
or false
as appropriate. In this case within the parentheses anything with the value “chest” would be filtered and appear. This is perhaps the easiest way to approach the solution.
On a final note I learned there are multiple ways to approach a solution and like the gym to work on a craft you need to practice, practice and practice. I am sure like my newbie workouts I will look back and see just how much I have grown as a developer.