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 service that allows you to save JSON files on someone else's server, usually for free. JSON stands for JavaScript Object Notation, and and is a filetype that's often used to store and send data over the internet. For our purposes, it is most important that it allows you to send and store 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 different JSONBIN services 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. We will use one HTML file and one JavaScript. In the end we will have code to empty the database, code to add an item to the database and code to load everything from the database into our page.

An example of what we will build and an overview of all the code can be found here:

https://codepen.io/arjensuijker/pen/wvNjjWe?editors=1010

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.

Making it in CodePen.io instead of VS Code will work too. Just make sure to include 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 your_api_key_here" }
    });
  });
  
})

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 your_api_key_here 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. Add 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.

  //execute a function when the text inside the message is changed (press enter send message)
  $('#message').change(function(){
    //make a PATCH ajax request, which adds data to the database
    $.ajax({
      method: "PATCH",
      url: url,
      contentType:"application/json; charset=utf-8",
      dataType: "json",
      // the data we send is the value of the field that is changed, made into a JSON string
      data: JSON.stringify($(this).val()),
      headers: { "authorization": "token your_api_key_here" }
    });
  });

Again, make sure to replace your_api_key_here. If you enter a message into the input field now and press enter, it will be saved into the database.

5. Load messages

The next step is to make it possible to load the messages from the database. Again, we first add a button in the HTML.

<button id="load">load messages</button>

Next, we add the code to make it work. Add it somewhere after the previous message change function, but before the closing tags of the document ready function.

  $('#load').click(function(){
    //make a GET ajax request, which GETs data from the database
    $.ajax({
      method: "GET",
      url: url,
      contentType:"application/json; charset=utf-8",
      dataType: "json",
      headers: { "authorization": "token your_api_key_here" }
    // execute a function when the request is done
    }).done(function(result){
      //empty the message list div
      $('#message-list').html('');
      // for each value in the database, execute a function 
      $.each( result, function( number, value ) {
        //add a paragraph element containing the value to the message list
        $('#message-list').append("<p>"+value+"</p>");
      });
    });
  });

You should now have all the code you need!