-
Notifications
You must be signed in to change notification settings - Fork 3
Tutorial 04 Simple WebAPI Example
Now that we have the VMCP endpoint ready for use we can start working on the HTML application.
We are going to start with a very basic HTML page with two buttons and a label. (We are also going to use bootstrap to make it look pretty - yeyy!)
Create a new folder named static next to the server.py file created in the previous tutorial. Then copy the following boilerplate code and paste it on a new file named index.html inside the static folder:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CernVM WebAPI Demo</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
body {
font-family: Verdana, Tahoma, sans-serif;
font-size: 14px;
}
</style>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//cernvm.cern.ch/releases/webapi/js/cvmwebapi-latest.js"></script>
<script type="text/javascript">
$(function() {
// Website is initialized. Continue here:
});
</script>
</head>
<body>
<div class="container">
<h1>Simple Example</h1>
<p>
<strong>Session state:</strong> <span id="lbl-status">Not started</span></p>
<p>
<button id="btn-start" class="btn btn-success">Start</button>
<button id="btn-stop" class="btn btn-danger">Stop</button>
</p>
</div>
</body>
</html>Then change the hello function from the server.py in order to serve the index file we just created:
@app.route("/")
def hello():
return app.send_static_file('index.html')(Re-)start your server and visit http://test.local:5000/. You are now ready to start coding the website!
Before we can use the CernVM WebAPI extension we need to initialize the library. This can be achieved using the CVM.startCVMWebAPI. The first parameter to that function is a function reference which will be fired when the extension is initialized.
Place this
// Website is initialized. Continue here:
// Initialize CernVM WebAPI & Callback when ready
CVM.startCVMWebAPI(function(api) {
$("#lbl-status").text("CernVM WebAPI Ready");
});Refresh your browser. If you don't have CernVM WebAPI installed, you will be prompted to do so. After the installation sequence, any open windows will go away and the session state should now be 'CernVM WebAPI Ready'.
We now have an interface to CernVM WebAPI!
We just reached the juciy part that we have been waiting for so long! You can now instruct the CernVM WebAPI to contact the VMCP endpoint we just created in order to grant us access to a Virtual Machine in the user's computer.
To do so, we are using the api.requestSession() function. The api is the CernVM WebAPI instance we obtained from the previous step.
Let's open a new session:
// Website is initialized. Continue here:
// Initialize CernVM WebAPI & Callback when ready
CVM.startCVMWebAPI(function(api) {
$("#lbl-status").text("CernVM WebAPI Ready");
// Request a session through our VMC endpoint
api.requestSession('http://test.local:5000/vmcp', function(session) {
$("#lbl-status").text("Session open");
});
});Refresh your browser. The first time you refresh the website you will be prompted for allowing the creation of a new VM. Upon accepting the request the session state should now be 'CernVM WebAPI Ready'.
The session can change state either after a user interaction or because of an external cause. You can listen for such state changes by listening for the stateChanged event.
Let's add a listener for the stateChanged event:
// Website is initialized. Continue here:
// Initialize CernVM WebAPI & Callback when ready
CVM.startCVMWebAPI(function(api) {
$("#lbl-status").text("CernVM WebAPI Ready");
// Request a session through our VMC endpoint
api.requestSession('http://test.local:5000/vmcp', function(session) {
$("#lbl-status").text("Session open");
// Obtained from the Appendix
var STATE_NAMES = ['Not yet created', '', 'Powered off', 'Saved', 'Paused', 'Running'];
// Listen for state changed events
session.addEventListener('stateChanged', function(newState) {
$("#lbl-status").text(STATE_NAMES[newState]);
});
});
});This time, when you refresh the website, the session state should be Not yet created. That's because the session is open and available, but there is no physical Virtual Machine created yet.
In this final step we are going to implement the Start and Stop button clicks, making a fully functional first aplication!
The only thing you have to do is to wait for a click event from the button and then call the .start() or .stop() function on the session:
// Website is initialized. Continue here:
// Initialize CernVM WebAPI & Callback when ready
CVM.startCVMWebAPI(function(api) {
$("#lbl-status").text("CernVM WebAPI Ready");
// Request a session through our VMC endpoint
api.requestSession('http://test.local:5000/vmcp', function(session) {
$("#lbl-status").text("Session open");
// Obtained from the Appendix
var STATE_NAMES = ['Not yet created', '', 'Powered off', 'Saved', 'Paused', 'Running'];
// Listen for state changed events
session.addEventListener('stateChanged', function(newState) {
$("#lbl-status").text(STATE_NAMES[newState]);
});
// Register button clicks
$("#btn-start").click(function() {
session.start();
});
$("#btn-stop").click(function() {
session.stop();
});
});
});As a simple excercise, try to add three extra buttons for handling the following cases:
- A Pause button that calls the
.pause()function - A Hibernate button that calls the
.hibernate()function - A Close button that calls the
.close()function
The latter will completely remove the virtual machine from the user's computer.