A simple, painless, and free NoSQL backend for your application to store, pull, push, and generally manage all necessary data.
NOTE: To jump straight into the tutorial, click here.
Too many developers try to complicate the infrastructure that powers their ideas for an app. Furthermore, it too often places unnecessary dents in their wallets.
As we know, the majority of data communicated via API comes bundled in the traditional JavaScript Object Notation format, or “JSON”.
If a developer requires a database and may or may not require relational schemas, the time necessary for setup as well as the prices fluctuate. Due to the fact that it is now far more affordable and efficient to manage data in the cloud for both independents and enterprises in general, let’s just compare those.
Comparing NoSQL backends
Two of the most popular NoSQL cloud-based backend frameworks include Firebase Cloud Firestore and Firebase Realtime Database.
Though the first was primarily designed for mobile applications, it runs and scales flexibly across the web as well as servers. However, instead of simply storing the data as JSON, it bundles the data into a collection of documents that behave similarly. This is advantageous when attempting to organize more complex and hierarchical data at large scales, but not so when your data is simplistic.
The advantage then of the Realtime Database is the fact that all data is stored as pure JSON and synchronized in real-time across all connected clients irrespective of which device is requesting.
At a glance, both of these options offer powerful, modern solutions built by one of the most reputable and trusted brands in technology (Google). However, the downsides can easily be observed in the setup and pricing.
For example, both require the installation and setup of SDKs. Though not difficult if one knows what they’re doing, they still represent additional steps needed to establish a basic connection with the backend.
Next is the pricing. As both Cloud Firestore and Realtime Database encompass the Google Firebase platform, the cost is based on the dichotomy of the Spark Plan and Blaze Plan.
How to use JSONBin
What if there was a way to simplify the setup and pricing of a backend such that you can make a call with a few lines of code and protect the data with nothing more than a private API key?
Enter JSONBin.
As proudly stated on their homepage, JSONBin offers a “simple and robust” storage solution with RESTful APIs that can integrate into any application in mere seconds.
A developer’s backend gets stored as JSON in what are called “bins”, which are nothing more than records accessible at any time.
In addition to the traditional Create, Read, Update, and Delete (CRUD) operations, there are other APIs available as well, including the ability to set versions of the bins as the data progresses over time.
To try it out, make an account for your backend by navigating to https://JSONBin.io/login. Feel free to sign up using your Github, Google, Facebook, or Twitter.
Once you view the dashboard on a new account, you’ll notice there are no bins. In the bottom right-hand corner of the screen, click the Create New button.
Copy/paste the below JSON to use as a sample inside:
{
"name": "John",
"age": 30,
"car": null
}
And hit Create. Navigate back to the dashboard now, and you’ll see your bin happily sitting there.
Let’s take a brief look at one of the most basic implementations one could make with nothing but an HTML and JS file.
Open your favorite IDE or text editor, and create two files. Name them:
test.html
test.js
Appropriately.
Next, create a simple button in your HTML file that will call the JS function test() as well as a link in the header tag to the JS file that we will set.
<head>
<title>Test</title>
<script src="test.js"></script>
</head>
<h1>Test</h1>
<button onclick="test()">Call JSONBin</button>Inside of your JS file, write a function, test(), that will call the fetch API using the GET request to your backend hosted inside of JSONBin. Ensure that the URL suffix matches the address of your bin.
Within the headers section of the fetch call, ensure you enter your API key to access the JSON under ‘X-Master-Key’. This information is accessible on the dashboard and can be easily copied/pasted.
function test() {
fetch("https://api.jsonbin.io/v3/b/61be5d02b8fdb92a527b5c7e", {
method: 'GET',
headers: {
'content-type': 'application/json',
'X-Master-Key': '$2b$10$82ib4RVYVwksCeltdFqUBO7ANzB4WE3hvmVOgpbIimC51LFkQevQi'
}
}).then(resp => resp.text())
.then(text => {
text = JSON.parse(text);
console.log(text.record);
}).catch(err => console.log(err));
}Host your HTML. Click the button Call JSONBin. In the console window, you’ll see that the GET call was successful.
