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>
Recent Comments