Working with APIs: A brief

Every serious non-offline app works with an API of some sort. For a brief explanation, check (link here) on this platform.

Learning to interact with an API and manipulate the received data in whatever form is going to be substantial part in the working journey of any frontend developer. This is true whether the API being used is built in house by the backend developers or used as a separate service.

For our location app, we used OpenWeather's API, a pretty popular (and basic) API to interact with. As always, the documentation of these are always key and any semi-decent API will have a legible and understandable API doc.

For the beginner, it could seem intimidating working with APIs on their own. So here, I have a few scribblings I thought to share to assist one through that hurdle.

Note: For clarification, APIs referenced here are generally referring to web APIs (with the REST specification) which are a different sort than the Transform API in React Native for example. There are other forms like the SOAP APIs and GraphQL APIs(which are increasingly becoming common with React apps in the community.)

1. Understanding JSON:

Most APIs one comes across conform to what's called REST(Representational State Transfer). What is important to note here is that they take and receive data in JSON (JavaScript Object Notation) format. Here is an example of data received from the OpenWeather API for instance:

There are decent formatters of JSON data available. Two that I recommend are first, the Firefox browser which is easily reachable. Another that I have come to appreciate is *show CodeIsTheEnd's tool.

Another tool, Postman helps to code out API requests which is gret for testing and just general API interaction. It is free and can be downloaded from the link below*.

1. Understanding fetch()... { and async/await }:

In React Native, data requests over these APIs can be pulled using the promise-based fetch() method. Here is the React Native docs giving a description here*:

So the syntax is basically:

• Pass the URL endpoint;
• Parse(read) the response and extract the JSON.
• UI code should display the received data.

Async/await is a JavaScript method that was introduced in the later ES versions that helps better with error-handling for instance, with syntax like try/catch. This video linked below* by Fun Fun Function explains the concept pretty well.

1. Troubleshooting;

With these REST APIs, troubleshooting on the part of the frontend developer simply involves the use of proper syntax. The package axios has great functionality for this beyond what fetch() can provide. Another thing, which I have mentioned before, is to simply read the documentation again (and again, haha).

Here is an API list* on GitHub with a large number of public APIs. Use any of this to practice and render some data from it on your mobile device. Doing this consistently enough should give one a good amount of confidence needed in working with APIs.

I hope this helped even a bit, and makes you feel a bit better when it comes to APIs. Understand that, while APIs can be far more complex than these, the underlying principles of operation generally remain the same. Alright then...

Cheers.