Using AI to Understand API End Points
some more tips from my own experience using AI to do some coding.
One of the more common things I do in my tutoring sessions is to teach how to consume API endpoints. I feel like this is where every developer must begin their front end coding journey. Besides, at the end of the day, as a developer,
- you are either building APIs to be consumed by an app
- you are consuming an API whilst building your app.
Every other activity of your developer app is adjacent to these two main activities.
To get started, you want to have an API that you want help from AI to consume in your app. Suppose for the sake of simplicity and to keep things beginner friendly, we are building the good old fashion HTML + CSS + JAVASCRIPT = VANILLA JS web project.
Also, we need a nice, free and reliable API service that will be around, probably, forever. I highly recommend NASA and it’s collection of always working, always free, API endpoints.
Available here: https://api.nasa.gov/
So, yes, I usually just ask the AI what it wants.
Okay, let's build a vanilla JS applicationFirst let me share with you the details of the API endpointwhat details do you needand the AI would say, something like this.
To properly integrate an API endpoint into your vanilla JavaScript application, it would be helpful to have the following details:
Endpoint URL: The full URL that you'll be sending requests to.
HTTP Method: Whether you'll be using GET, POST, PUT, DELETE, etc.
Headers: Any required headers, such as Content-Type or Authorization.
Request Parameters: Any query parameters or path variables needed in the URL.
Body Data: If the endpoint requires a request body (typically with POST or PUT), the format and structure of this data.
Response Structure: An example of what the API response looks like, so we can handle it accordingly in the application.
With these details, I can guide you on how to make requests to the API using vanilla JavaScript.Neat, isn’t it?
So, I go ahead and provide the details one after another.
Here is the GET EndPoint
https://api.nasa.gov/neo/rest/v1/feed?start_date=2015-09-07&end_date=2015-09-08&api_key=APIKEYand I keep giving more information.
Yes, here is the sample response
{
"links": {
"next": "http://api.nasa.gov/neo/rest/v1/feed?start_date=2015-09-08&end_date=2015-09-09&detailed=false&api_key=d7Qmzz1hVt9AdbNgKGKahCQcfP5rdm40uAK67XR1",
"previous": "http://api.nasa.gov/neo/rest/v1/feed?start_date=2015-09-06&end_date=2015-09-07&detailed=false&api_key=d7Qmzz1hVt9AdbNgKGKahCQcfP5rdm40uAK67XR1",
"self": "http://api.nasa.gov/neo/rest/v1/feed?start_date=2015-09-07&end_date=2015-09-08&detailed=false&api_key=d7Qmzz1hVt9AdbNgKGKahCQcfP5rdm40uAK67XR1"
},
"element_count": 27,
"near_earth_objects": {
"2015-09-08": [
{
"links": {
"self": "http://api.nasa.gov/neo/rest/v1/neo/2465633?api_key=d7Qmzz1hVt9AdbNgKGKahCQcfP5rdm40uAK67XR1"
},
"id": "2465633",
"neo_reference_id": "2465633",
"name": "465633 (2009 JR5)",
"nasa_jpl_url": "https://ssd.jpl.nasa.gov/tools/sbdb_lookup.html#/?sstr=2465633",
"absolute_magnitude_h": 20.44,
"estimated_diameter": {
"kilometers": {
"estimated_diameter_min": 0.2170475943,
"estimated_diameter_max": 0.4853331752
},
"meters": {
"estimated_diameter_min": 217.0475943071,
"estimated_diameter_max": 485.3331752235
},
"miles": {
"estimated_diameter_min": 0.1348670807,
"estimated_diameter_max": 0.3015719604
},
"feet": {
"estimated_diameter_min": 712.0984293066,
"estimated_diameter_max": 1592.3004946003
}
},
"is_potentially_hazardous_asteroid": true,
"close_approach_data": [
{
"close_approach_date": "2015-09-08",
"close_approach_date_full": "2015-Sep-08 20:28",
"epoch_date_close_approach": 1441744080000,
"relative_velocity": {
"kilometers_per_second": "18.1279360862",
"kilometers_per_hour": "65260.5699103704",
"miles_per_hour": "40550.3802312521"
},
"miss_distance": {
"astronomical": "0.3027469457",
"lunar": "117.7685618773",
"kilometers": "45290298.225725659",
"miles": "28142086.3515817342"
},
"orbiting_body": "Earth"
}
],
"is_sentry_object": false
},
{
"links": {
"self": "http://api.nasa.gov/neo/rest/v1/neo/3426410?api_key=d7Qmzz1hVt9AdbNgKGKahCQcfP5rdm40uAK67XR1"
},
"id": "3426410",
"neo_reference_id": "3426410",
"name": "(2008 QV11)",
"nasa_jpl_url": "https://ssd.jpl.nasa.gov/tools/sbdb_lookup.html#/?sstr=3426410",
"absolute_magnitude_h": 21.34,
"estimated_diameter": {
"kilometers": {
"estimated_diameter_min": 0.1434019235,
"estimated_diameter_max": 0.320656449
},
"meters": {
"estimated_diameter_min": 143.4019234645,
"estimated_diameter_max": 320.6564489709
},
"miles": {
"estimated_diameter_min": 0.0891057966,
"estimated_diameter_max": 0.1992466184
},
"feet": {
"estimated_diameter_min": 470.4787665793,
"estimated_diameter_max": 1052.0225040417
}
},
"is_potentially_hazardous_asteroid": false,
"close_approach_data": [
{
"close_approach_date": "2015-09-08",
"close_approach_date_full": "2015-Sep-08 14:31",
"epoch_date_close_approach": 1441722660000,
"relative_velocity": {
"kilometers_per_second": "19.7498128142",
"kilometers_per_hour": "71099.3261312856",
"miles_per_hour": "44178.3562841869"
},
"miss_distance": {
"astronomical": "0.2591250701",
"lunar": "100.7996522689",
"kilometers": "38764558.550560687",
"miles": "24087179.7459520006"
},
"orbiting_body": "Earth"
}
],
"is_sentry_object": false
}
]
}
}Now, here, I run into some issues. The original response, is pretty huge.
You try to put this in AI, you are likely to crash it. The chat box might refuse to take such a large piece of information. So, I had to sit down and scuttle it down to be smaller, but, still maintain the integrity of the response.
Right then, next, I keep going. (the AI keeps giving me the JS code, which is good)
Yes, I need a HTML and CSS file that can consume this javascript codeAnd, finally, I get the working project. I have gone ahead and put that on my codepen account. You can find it here.
It actually works. Of course, here are some caveats.
- Obviously, it’s bare bones. For example, the dates are hard coded. You would probably want to add a date picker or some kind of input to change the dates
- There is no loading animation and such while data is getting loaded.
- The whole page looks very grey and simple.
Now, all these issues can be solved, by simply conversing and asking AI to keep making improvements.
That’s a blog post for another day though. For now, I am enjoying being able to use AI to help me build these simple projects that have become extremely useful in my coding classes.
I work as a coding tutor. You can hire me on Upwork, Fiverr and Codementor. You can also book a session on calendly, and visit my website. Also, video tutorials on my YouTube Channel.
