API Explorer

Ernesto Molina Carrón

Follow

Oct 29, 2018 · 3 min read

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

• Demo https://play.google.com/store/apps/details?id=apiexplorer.com.app
• Source https://github.com/rotoxl/flutter_magic

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}:

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

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.

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.

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

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