APIWorld is a simple site that allows users to consume various APIs from other sites. Additionally, developers can customize the site by adding information about other APIs they would like their users to consume.
To connect to another API, follow these steps:
- Create a file under src/data/APIData folder and name it however you want, preferably make it consistent with the other names of files you are going to create in the other sections.
- Export an object with the name data Fill in the following fields in the table below with the relevant information for the API you wish to add:
| Field | Value | Type | Notes |
|---|---|---|---|
| apiName | Name of the API you are connecting to for identification purposes | string | Used as label in the API Chooser section |
| resultsField | Name of the json field that contains the array of actual data after calling an endpoint | string | |
| continueFIeld | [Optional] Name of the json field that follows link to the other "page" of results | string | null | Some APIs do not return all the elements in one response, but they usually point to the next page of results in a link that is sent in a json field |
| endpoints | Array of objects containing information for endpoints you'd like your users to consume in the API | Array | Object structure of the endpoint data is indicated starting from the next row |
| endpoint.name | Label of the endpoint button shown after the user chooses an API | string | |
| endpoint.endpoint | URL of the endpoint to call | string | |
| endpoint.enabled | Indicates if endpoint should be shown when selecting its corresponding API | boolean | |
| endpoint.isRandom | Indicates if the "random" treatment should be used with this endpoint. Check notes. | boolean | undefined | Some API's endpoints don't return the complete data of all its entries, usually when there are many entries in a category. So, if we wanted to get the complete data of all entries, we would need to call the endpoint (with an id) for every single entry. In these cases I recommend setting "isRandom" to true so it only gathers a couple from all the available entries. |
| endpoint.randomField | Only used if "isRandom" is set to true. JSON field that contains the name of the key in the response with the value of the amount of entries in that endpoint | string | undefined | The value of the number will be used as a max range when requesting random entries. |
| endpoint.randomEntries | Only used if "isRandom" is set to true. Number of max amount of specific entries to get. | number | I seriously recommend a max of 10 random entries, to prevent potential rate limiting. |
| endpoint.randomQuery | Only used if "isRandom" is set to true. String that represents what should be added to the url as a query to get all the non-specific data about the entries. | string | By default, many "page" endpoints will return a set amount of entries. By using this field, we can ask the endpoint to return as many entries as we want (usually the max amount set by the number in the value pointed to by the key "randomField". This field is usually named "?limit=", but depends on the API. (This will be improved in the future to require just the name of the query parameter) |
| endpoint.fields | Array of objects containing information that you would like to present to the user after they click on an endpoint. | Array | Object structure of the field data is indicated starting from the next row |
| endpoint.field.name | Label of the column that represents the data in the field | string | |
| endpoint.field.desc | Description of what the field represents. (Used only in the "How to use" section of the app) | string | |
| endpoint.field.sortable | Indicates if this column can be sorted in an ascending/descending way | boolean | |
| endpoint.field.customSort | Object containing two keys: "ascending" and "descending". Both should be functions that handle custom sorting of the data. If "customSort" is null, then default sorting is applied | object | null | Function signature for both "ascending" and "descending" is: Parameters: ElementA, ElementB. Must return a number, just like when calling sort method on arrays. |
| endpoint.field.jsonTag | String of the key that contains the value we desire. This string must be the top level key of the field that contains our value, even if its inside of another array/object. | string | In some cases, our value will be directly accesible from a top level field in the result object. But in other cases it may be nested. Let's say that in our results object, we have a field named "abilities", but "abilities" is an object that contais a key named "name" that has a value of what we actually want. For "jsonTag" we should still use "abilities" as we will handle the nesting with the next field. |
| endpoint.field.containerData | Custom function that allows for retrieval of nested data from a top level field. If wanted data is directly accesible, "containerData" should not be used. | function | undefined | Function signature is: Parameters: item. Must return the actual value we are looking for. The parameter "item" is actually the value that the jsonTag field is pointing at. So, continuing the example in the previous row. If we wanted to access the name field we could do it like this (item) => item.name |
| endpoint.field.blockFilter | Indicates if the category should be able to be filtered by inputting text in the filter section. | boolean | undefined | This is used to prevent filtering of data that is not directly accessed (like data inside an array or object). For now, follow this rule of thumb: If you had to use "containerData" to retrieve a nested value, then you should enable "blockFilter" to prevent errors. (Filtering data inside of arrays/objects will be fixed in a later update) |
- Navigate to the src/data/main.js file and add an entry object to the apiData object with the following keys/values.
| Field | Value | Type | Notes |
|---|---|---|---|
| name | Visual label of the API you are connecting to | string | You can use spaces here |
| internal | Internal string that represents the name of the corresponding data files about this API | string | If you named the files for your API data "NasaEarth.js", then this string must be "NasaEarth". I recommend to name the files WITHOUT spaces, so this field should also NOT use spaces |
| enabled | Indicates if this API should be able to be selected from the API Chooser | boolean | IF this is false it will disappear from the app. Useful as a kill switch. |
Connect with me on LinkedIn and Twitter to maybe chat or suggest new ideas!
Feel free to reach out if you have any questions or would like to work on something together!
Most of the text the user sees while using the app is in spanish, because that is how it was requested by the bootcamp I am in. I will try to translate the text into english soon.
Deployed project can be viewed in the following link:
Below this point is text explaining how this app works when it was requested as an assignment in the DesafioLatam bootcamp.
Pagina para consumir multiples APIs, muy facil de extender.
Un poco complicado de explicar todo en tan solo 5 minutos. Ya que son muchos componentes y funcionalidad, pero intente explicar y mostrar lo que requeria la prueba.