Jsonbin database

If you want users to save and share information on a website that you build, you are going to have to use some kind of database. Tis kind of technology is the backbone of social media, Wordpress websites and basically any website that lets it's users interact with each other.

Making this happen can be pretty hard. Usually you need to rent some kind of server, and also learn to code a server-side language. However, there is an alternative: Use a JSON 'database' on someone else's server.

What is a JSONbin?

A JSONbin is basically a website that allows you to save JSON files on their server. JSON stands for JavaScript Object Notation, and and is a filetype that's often used to send data over the internet. For our purposes, it is most important that it allows you to send arrays, which are lists of texts, numbers or other info. We can just send our info to a JSONbin, and there it will be saved so that another user can retrieve it. For example, you can create a public message board this way, where everyone can send a new message and view the messages that other people have sent.

There's many JSONBIN projects out there, but at the moment of writing there is only one that allows you to add information without replacing the whole database. It can be found on jsonbin.org.

Using JSONbin.org to create a message board

As an example project, we'll create a very basic message board. People can post messages and see all messages from others.

1. Create an account

To use jsonbin.org, you need a Github account, you can do that by clicking the 'sign in' link here https://jsonbin.org/.

Once you are logged in, the page on https://jsonbin.org/ should show your account data, including an API key. This API key is the key that allows you to change your database. In the example that we are building, we are using the API key directly in our code. This is very insecure, because anybody can find this key in your code and change or remove the database. However, doing it the secure way is to hard for this first project.

2. Set up your files

We will work in Visual Studio Code. It works really well for this project, because it has a convenient live server. Instructions for setting up VS code can be found here: VS Code.

In VS Code, you need to setup a basic HTML file that incudes Jquery and a JavaScript file. The process to do this is described here: JQuery.

3. Create an empty database

By default, your JSONbin is already filled with some stuff that we don't need. Therefore we will first write a script that replaces the current database with an empty array. We will use an array because that's basically a list of things/values, which is perfect to hold our list of messages. To do this, we first need a button in our HTML, we can add that in the body like this:

<button id="empty">empty database</button>

Next, we'll add the JavaScript code that makes it work in our script.js file:

//the url to access your database. replace username with your username
var url = "https://jsonbin.org/username";

//wait until the document is ready
$( document ).ready(function() {
  //execute a function when the button with the id empty is clicked
  $('#empty').click(function(){
    //make a POST ajax request, which sends data to the database
    $.ajax({
      method: "POST",
      url: url,
      contentType:"application/json; charset=utf-8",
      dataType: "json",
      // the data we send is just []. This is an empty array
      data: "[]",
      headers: { "authorization": "token apikey" }
    });
  });
  
})

Please carefully read the comments to know what the code does. You need to replace username on line 2 with your own username (as found on https://jsonbin.org/ after logging in). You also need to replace apikey on line 14 with your API key (the huge string of numbers and letters also found on the jsonbin page).

When you click the button now, it should create the database, ready for you to fill! You can check this by being logged in on jsonbin.org and visiting https://jsonbin.org/username (replace username with your username) in your browser. It should only show [].

4. Enter messages

We will add an input field to the same page that allows you to send a message to the database. We'll start by adding the input field to the html file.

<input id="message">

Next, we'll add the JavaScript code that selects the input field, takes its input and sends it to the database. The code needs to be added inside the document ready function underneath the button click function.