Free Back-End API & Database for Front-End Developers

by Corey Snyder

This article is for anyone who can relate to the following scenario.

You are a designer or front-end developer. You have a project you're working on that has some dynamic content. You'd prefer that content was delivered via an API or pulled from a database. You have little interest or ability in writing back-end services or creating databases.

If you face this problem, then this article is for you! I have a portfolio page that I am working on. Currently it's a bunch of hard-coded HTML & content. That content is tedious to update and requires creating a large block of HTML for each item added. Here's what I'm going to do..

  1. Implement firebase.com - Its a free service which allows me to serve my content via a JavaScript API.
  2. Implement AngularJS. I'm mostly using this as a templating engine but I'll also use it for interactions a little later

Sign up for our free backend!

Ok. So first thing I need to do is sign up over at firebase.com. I'm using the Hacker Plan which features the following:

50 Max Connections, 5 GB Database Transfer, 100 MB Database Storage. 1 GB Hosting Storage and 100 GB Hosting Transfer.

Upon signing up it drops you on a page with an example app "MY FIRST APP". We're going to click the button to it's left "Create New App" and then click "Manage App". From here we can use the tree structure to define our data.

If you don't want to add it manually via the GUI, you can also add your data via an API call passing a block of JSON. Let's do that now.

Updating your database via the API.

I had already converted my blog to JSON so I didn't have to manually enter it via the firebase site. If you need help writing constructing your JSON check this JSON Viewer.

For you to interact with you firebase API yo're going to need to grab your Firebase (Data) URL. You can find that by clicking back to the homepage and you'll see it on your app's card like below. Copy that!

Ok now go into your IDE and create an HTML page. Open up a script tag and paste in the following line replacing the URL with your data URL you copied above.

   
var myFirebaseRef = new Firebase("http://.firebaseIO.com");

This gives us a reference to our data api. Now let's use this reference to write to our database.


myFirebaseRef.set([
  {
    id: "ZombieHoliday",
    title: "Zombie Holiday",
          description: "A game I designed and developed using HTML5 & JavaScript. I later ported it to iOS and Windows8.",
          mainImage: '../ZombieHoliday.jpeg',
          date: '12/01/2012',
          tags: ['js', 'html', 'gameDesign', "ios"],
          modal: true
        },{
          .....
        },{
          .....
        }
]);

As you can see from the code we're calling our the set method on our firebase reference to save a block of JSON to the server. If I flip back over to firebase and refresh my app page here's what my data looks like:

As you can see I have 14 portfolio entries. Each having a title, date, description, an array of tags, an array of images, and a couple other fields.

Sweet! We've successfully written to our database via the firebase API! Next up let's read that data back out and dispaly it on the page.

Reading our data

Ok, so we now have our data stored in a database and an API to access it. Let's read some of that data out. Back in your HTML file add the following:


myFirebaseRef.on("value", function(snapshot) {
    var myItems = snapshot.val();
    console.log("snapshot items", myItems);
});

If you refresh the page and check out the console you're going to see your items being output there.

Displaying your data

At this point you'll need to use some javascript, and likely a templating engine, to get that data displayed on the page. I'll show you how I did it using AngularJS. After I get back my data I set $scope.items to the items we get back. I'm not going to go into how to write an angular app but if you need help with that check out AngularJS.


myFirebaseRef.on("value", function(snapshot) {
        $scope.items = snapshot.val();
});

Then for my HTML I have:


<ul class="grid effect-4 portfolio" id="grid">

   <li ng-repeat="item in items | filter:search:strict" class="toAnimate">
      <a href="#Details-\{{item.id}}" ng-class="{fancybox: item.modal}">
            <img ng-if="item.mainImage" src="\{{item.mainImage}}"
                 alt="\{{item.title}}"/>

            <iframe ng-if="item.youtubeVideoUrl" 
            width="317" 
            height="479" 
            ng-src="\{{item.youtubeVideoUrl}}" 
            frameborder="0" 
            allowfullscreen></iframe>

            <div class="description">
              <h4>\{{item.title}}</h4>
              <p ng-if="item.description">\{{item.description}}</p>
            </div>

            <span class="tags">
              <span class="tag \{{tag}}" ng-repeat="tag in item.tags">\{{getTagDesc(tag)}}</span>
            </span>
          </a>
   </li>
<ul>

Make it look sexy!

The next step is to style your list. So far here's what my portfolio looks like.