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