Simple GUI-based way to create websites from API calls?
July 16, 2023 2:35 PM Subscribe
I want to take some user input, query a set of APIs and display information related to the input in a simple pretty way, without learning Node or whatever.
If I wanted to create a website that could take user input (say a song title), poll a set of APIs (say spotify, genius, wikipedia, openstreetmap) and then display a static page containing a spotify widget, lyrics, an artist bio and a map of where the artist is from, would there be a simple GUI-ish way to do this?
Note: I am not looking to do this thing specifically (nor am I looking to create an actual product), but I have a few fun ideas of ways to mash up data and have no idea where to start in terms of a simple back-end/front-end combo to make this happen rapidly.
I've enjoyed researching natural language programming but haven't found anything in that realm that is usable for me. I've sort of figured out how to use Postman but not sure thats a front-to-back solution.
Please assume I'm generally knowledgeable about coding and web tools but not fluent in what seems to be the current stack a lot of folks use (specific flavors of javascript, node, etc)
If I wanted to create a website that could take user input (say a song title), poll a set of APIs (say spotify, genius, wikipedia, openstreetmap) and then display a static page containing a spotify widget, lyrics, an artist bio and a map of where the artist is from, would there be a simple GUI-ish way to do this?
Note: I am not looking to do this thing specifically (nor am I looking to create an actual product), but I have a few fun ideas of ways to mash up data and have no idea where to start in terms of a simple back-end/front-end combo to make this happen rapidly.
I've enjoyed researching natural language programming but haven't found anything in that realm that is usable for me. I've sort of figured out how to use Postman but not sure thats a front-to-back solution.
Please assume I'm generally knowledgeable about coding and web tools but not fluent in what seems to be the current stack a lot of folks use (specific flavors of javascript, node, etc)
I’m not too familiar with the space, but you might want to go looking for “low-code” tools. These are basically app builders that have a big library of ready-built components, with the ability to add a little scripting of your own (usually in js).
Retool is the one that I’ve actually used, and it was pretty easy to get going. But it’s been a while and I know there are a bunch of other tools in the space.
The downside is that these tools are generally all commercial with relatively low-capacity free tiers. So you might keep budget in mind while looking at these.
posted by learning from frequent failure at 2:55 PM on July 16, 2023
Retool is the one that I’ve actually used, and it was pretty easy to get going. But it’s been a while and I know there are a bunch of other tools in the space.
The downside is that these tools are generally all commercial with relatively low-capacity free tiers. So you might keep budget in mind while looking at these.
posted by learning from frequent failure at 2:55 PM on July 16, 2023
The only things hugo/jekyll/etc do is act as a scaffold for generating static websites, they're good for blogs and informational websites, they don't help with dynamism at all.
If you are fluent in a backend like Django or Rails I would probably just do something with that, and then bodge together the front end with old-fashioned Javascript widgets like JQuery+DataTables. This can work just fine, especially for exploration.
If you want to avoid touching the frontend as much as possible, Plotly Dash could work, if you're fine writing the logic in Python. Dash hooks Python on the back end up with Javascript widgets on the front-end, so you don't have to actually write Javascript at all.
Retool or Airtable both seem like promising commercial no- or nearly-no-code options, though I haven't tried either of them.
posted by BungaDunga at 3:02 PM on July 16, 2023
If you are fluent in a backend like Django or Rails I would probably just do something with that, and then bodge together the front end with old-fashioned Javascript widgets like JQuery+DataTables. This can work just fine, especially for exploration.
If you want to avoid touching the frontend as much as possible, Plotly Dash could work, if you're fine writing the logic in Python. Dash hooks Python on the back end up with Javascript widgets on the front-end, so you don't have to actually write Javascript at all.
Retool or Airtable both seem like promising commercial no- or nearly-no-code options, though I haven't tried either of them.
posted by BungaDunga at 3:02 PM on July 16, 2023
A few years ago there was a front page post here about Glitch, "where anybody can build the app of their dreams."
Glitch is still around and appears to be active. It belongs to a product category called "website builders".
Reviewing their page, it seems you still might have to write some Javascript, but maybe not too much. Maybe you can just copy their examples.
(I have never used Glitch, or any other similar product.)
posted by JonJacky at 3:31 PM on July 16, 2023 [2 favorites]
Glitch is still around and appears to be active. It belongs to a product category called "website builders".
Reviewing their page, it seems you still might have to write some Javascript, but maybe not too much. Maybe you can just copy their examples.
(I have never used Glitch, or any other similar product.)
posted by JonJacky at 3:31 PM on July 16, 2023 [2 favorites]
You could do the simplest version of this pretty easily using “plain-old” Javascript and HTML.
posted by mekily at 4:56 PM on July 16, 2023 [3 favorites]
posted by mekily at 4:56 PM on July 16, 2023 [3 favorites]
I was thinking Airtable? The free tier should let you know if it's for you.
posted by kschang at 6:14 PM on July 16, 2023 [1 favorite]
posted by kschang at 6:14 PM on July 16, 2023 [1 favorite]
Postman is generally regarded as a "testing tool" for people working on APIs or frontends. It can work as a query tool, but it's more for groups of people working in a single application and needs to share API specs and whatnot.
posted by kschang at 6:16 PM on July 16, 2023
posted by kschang at 6:16 PM on July 16, 2023
To expand on my previous answer -- here is 30 lines of HTML & Javascript that does the bare-bones version of what you're asking -- takes input from the user, queries a free API, and displays the result. You can run it on your machine by copying the code below into an `index.html` file on your computer and navigating to it in your browser.
The
—————————————————————
posted by mekily at 10:18 AM on July 17, 2023
The
displayResponse()
and sendRequest()
functions can be modified as needed for the specific APIs you want to query.—————————————————————
<html>
<head>
<script>
async function displayResponse(response) {
const json = await response.json();
const fromCurrency = json.base;
const toCurrency = Object.keys(json.rates)[0];
const rate = json.rates[toCurrency];
const displayHtml = `1 ${fromCurrency} = <b>${rate}</b> ${toCurrency}`;
document.getElementById("display-response").innerHTML=displayHtml;
}
function sendRequest() {
const fromCurrency = document.getElementById(from-currency).value.toUpperCase();
const toCurrency = document.getElementById(to-currency).value.toUpperCase();
fetch(`https://api.exchangerate.host/latest?base=${fromCurrency}&symbols=${toCurrency}`)
.then((response) => displayResponse(response));
}
</script>
</head>
<body>
<h3>Get exchange rates</h3>
<p>From currency:</p>
<input type="text" id="from-currency" value="USD">
<p>To currency:</p>
<input type="text" id="to-currency" value="EUR">
<p/>
<button onclick="sendRequest(); return false;">Get exchange rate</button>
<p id="display-response"></p>
</body>
</html>
posted by mekily at 10:18 AM on July 17, 2023
Obviously it depends on the type of data, but the simple answer is "No", at least for something as complex as what you are describing. You are going to have to handle multiple API calls, handle multiple forms of data for each of your fields you will have to sanitize, and multiple errors when your program can't figure out the data for an artist or when one of your input sites is unavailable.
The way to do something like that would be to build multiple back-end webcrawlers that grab the data you want, sanitize the data in a database, and then display it based on your API call.
Honestly once you get all that data and you get it in a usable format, then displaying on a basic webapage is by far the easiest part.
posted by The_Vegetables at 11:47 AM on July 17, 2023 [1 favorite]
The way to do something like that would be to build multiple back-end webcrawlers that grab the data you want, sanitize the data in a database, and then display it based on your API call.
Honestly once you get all that data and you get it in a usable format, then displaying on a basic webapage is by far the easiest part.
posted by The_Vegetables at 11:47 AM on July 17, 2023 [1 favorite]
JupyterLab notebooks run python and can query web API's then process with a bunch of Big Data tooling.
posted by k3ninho at 5:57 AM on July 19, 2023
posted by k3ninho at 5:57 AM on July 19, 2023
Response by poster: Thanks for all the feedback. To follow-up: I found PipeDream which seems manageable on the back-end to er... pipe data across APIs, which gives me enough to play with for now.
posted by softlord at 1:27 PM on August 4, 2023
posted by softlord at 1:27 PM on August 4, 2023
This thread is closed to new comments.
posted by softlord at 2:48 PM on July 16, 2023