-
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 boilerplace 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-2.0.8.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. Session state should now be 'CernVM WebAPI Ready'.