This post is the last in the “Making a server logs available online” series.

You can read about uploading the server logs to Firebase in part 2 and how to setup Firebase account in part 1.

Webpage

Now when I had my logs available in the cloud, I just needed to add a web interface to display them to the users. Fortunately, Firebase makes it incredibly busy, the whole “project” only required 136 lines of code.

The template

I started building my app with the following template:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Logger</title>
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="form_sign_in.css">
  </head>
  <body>
    <script></script>
  </body>
</html>

Adding Firebase

First of all, I needed to add the link to the Firebase library

<script src="https://www.gstatic.com/firebasejs/3.3.0/firebase.js"></script>

 

The Firebase initialisation code went inside of the <script> tag of the <body>, like so:

var config = {
  apiKey: "",
  authDomain: "",
  databaseURL: "",
  storageBucket: ""
};
firebase.initializeApp(config);

Adding the Log in page

I’ve used jQuery to help me reduce the amount of code I needed to write, so I had to add the library into the header.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

Here is the HTML code of my “login container”

<div id="login_screen" class="container">
  <div class="form-signin">
    <h2 class="form-signin-heading">Please sign in</h2>
    <div id="login_screen_error" class="error_box" style="display: none"></div>
    <input id="username_field" type="text" class="form-control" placeholder="Email address">
    <input id="password_field" type="password" class="form-control" placeholder="Password">
    <button class="btn btn-lg btn-primary btn-block" id="btn_login">Sign in</button>
  </div>
</div>

And the jQuery logic to handle the user input and displaying the error message if required (the awesome part is that the error message itself is supplied by Firebase).

  $("#btn_login").click(function() {
  $("#login_screen").hide();
  var username = $("#username_field").val();
  var password = $("#password_field").val();
  firebase.auth().signInWithEmailAndPassword(username, password).then(function () {
    $("#main_screen").show();
    getLogs();
  }).catch(function(error) {
    $("#login_screen").show();
    var login_screen_error = $("#login_screen_error");
    login_screen_error.show();
    login_screen_error.text(error.message);
  });
});

Displaying the logs

All I wanted to do is getting the latest 20 logs and displaying them on the page. Firebase couldn’t make it easier for me!

Html portion:

<div id="main_screen" style="display:none;" class="container">
  <div class="panel panel-primary">
  <div class="panel-heading">
  <h3 class="panel-title">Latest application logs</h3>
  </div>
  <div class="panel-body" id="logs_content">
  Loading...
  </div>
  </div>
</div>

JavaScript/jQuery potion:

firebase.database().ref('/logs/' + username).limitToLast(20).on('value', function (snapshot) {
  $("#login_screen").hide();
  var logs_content = $("#logs_content");
  logs_content.empty();
  var result = snapshot.val();
  for (var property in result) {
    if (result.hasOwnProperty(property)) {
      logs_content.append("<div>" + result[property] + "</div>");
    }
  }
});

Making it pretty

I have used bootstrap library to add responsiveness to my webpage:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
%d bloggers like this: