API Explorer

Go to the profile of Ernesto Molina Carrón
Ernesto Molina Carrón

Hi there! this is a story about a new app, API Explorer, built on top of Flutter and Firebase.

Overview

API Explorer’s target is to provide a tool somewhere between low and high level to view the data in an API.

Think about a data API that provides a few URLs to get a sample of raw data that interests you:

Eg: https://www.theaudiodb.com, “TheAudioDB is a community run database of Music Artwork, Metadata, Charts, Events, Music Videos and File Hashes, with free access via our front-end Website or back-end JSON API”.
TheAudioDB provides several ‘URLs’ to retrieve info about an artist (https://www.theaudiodb.com/api/v1/json/1/search.php?s=the%20beatles), albums by an artist (https://www.theaudiodb.com/api/v1/json/1/searchalbum.php?s=the%20beatles)

Well, API Explorer allows anyone to go from raw data to beautiful data, from {LEFT} to {RIGHT}:

From raw data to beautiful data

The same idea is applicable to more APIs of diverse type of information:

APIs everywhere

Can you see the pattern? All the samples follow the same design!

Wait: but what if data doesn’t follow this structure?
Well, the template is flexible, did you notice that Mars’ screenshot doesn’t have a description? what about the tags? 
Also, there are a few templates more, each one suitable for a different use case, and it’s even possible to link several templates to one data API.

Templates

Enter the template model

Right now API Explorers provides 4 basic templates for the listing and 4 templates for the detail window. Every template is just a starting point, they all contain several customizable features.

  • detail window: suitable for… pretty much everything. Contains a hero section, a header section with poster, title, stats and chips, description, key/value listing, images widget, related widget…
  • compare: suitable for item compare screens
  • hero: large, background image, with a few texts
  • match: suitable for competitions, like a football league.
Template model

Listing model

There are also, several models to list the items in the data API:

  • list
  • image grid (without name)
  • image grid with name
  • match
Listing model

What’s next

In future releases I plan to allow everyone to add new data APIs. You will also be able to test your own APIs. I also want to add new templates for new use cases. Time will tell.

Note: API Explorer is not affiliated with, or in any way associated with any of the APIs described here