Creating a Web Application for a Jolie Service
14
Creating a web app for a Jolie service Copyright © 2014 The Jolie Team. This work is licensed under the Creative Commons Attribution License (CC BY). To view a copy of this license, visit https://creativecommons.org/licenses/by/4.0 http://www.jolie-lang.org
Transcript of Creating a Web Application for a Jolie Service
Creating a web app for a Jolie service
Copyright © 2014 The Jolie Team.This work is licensed under the Creative Commons Attribution License (CC BY).To view a copy of this license, visit https://creativecommons.org/licenses/by/4.0
http://www.jolie-lang.org
Let's suppose we have a service: the hello service
We have a very simple service which provides one operation called hello
This service returns the string “Hello” and the name of the user received in the request
main {hello( request )( response ) {
response.msg = “Hello “ + request.name}
}
Let's take a look to the interface of the hello service
The hello service, clearly, has its own interface and port declaration
type HelloRequest: void {.name: string
}
type HelloResponse: void {.msg: string
}
interface HelloInterface {RequestResponse:
hello( HelloRequest )( HelloResponse )}
There is one operation called hello, which receives parameter name and returns a string
The hello service must be deployedwith http protocol
The service uses protocol http with format json and it is waiting for requests on port 8000 of our localhost
where it is able to provide responses for the operation declared into the interface HelloInterface.
execution{ concurrent }
inputPort HelloPort {Location: “socket://localhost:8000”Protocol: http { .format = “json” }Interfaces: HelloInterface}
jolie hello_service.olRun it using the jolie command:
First interaction with the browser
And check what happens if you set the following URL in the browser
{msg: "Hello Claudio"
}
jolie hello_service.ol
Run the hello service as it follows:
http://localhost:8000/hello?name=Claudio
The hello service will reply with a JSON message
Preparing a html file for the GUI
Since we would like to create a web GUI which interacts with the hello service, we need to create
a html page as our web app container. Thus create a very simple html page and put it in the
same folder where the hello_service.ol is.
hello_service.ol
Index.html
<html><body>
<div>First Web GUI</div></body>
</html>
Get the html page from the hello service (1)
type HelloRequest: void { .name: string}type HelloResponse: void {
.msg: string}
interface HelloInterface {RequestResponse: hello( HelloRequest )( HelloResponse ), default( undefined )( undefined )}
execution{ concurrent }
inputPort HelloPort {Location: "socket://localhost:8000"Protocol: http {.format → format; .default="default" }Interfaces: HelloInterface}
Now we would like to get the html page form the hello service. In order to do this we need to add the http default operation which is in charge to serve all the file
requests that come from the browser. Moreover, we need to enable dynamic format response for the http protocol. Let's modify the hello service as it follows:
Get a html page from the hello service (2)
include “file.iol” //remember to include file.iol...main { [ default( request )( response ) {
format = "html"; file.filename = request.operation; readFile@File( file )( response )
}] { nullProcess } [ hello( request )( response ) {
format = "json"; Response.msg = "Hello " + request.name
}] { nullProcess }}
Now, let us write the code of the default operation which read the file requested by the browser. The name of the file to be read is
contained in the request field operation.
The format is now dynamically set depending on the operation
Try in the browser:
http://localhost:8000/index.html
Introducing javascript and jQueryNow, we would like to introduce few lines of scripts at the client side in order to model the GUI as we prefer. So, let us prepare a file core.js where we will put our code, and define the properly html head tag for downloading it and
jQuery from the official repository.
hello_service.ol
Index.html
<html> <head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="code.js"></script> </head> <body> <div>First Web GUI</div> </body></html>
code.js
Preparing the ajax call toward the hello service
function jolieCall( operation, request, callback ) { $.ajax({
url: '/' + operation, dataType: 'json', data: JSON.stringify( request ), type: 'POST', contentType: 'application/json', success: function( data ) { callback( data ) }
})}
Now, let us edit code.js for defining the ajax function which will allow us to send messages to the hello_service.ol
Name of the operation
Request message
Callback function to be executed at response time
Finalizing the html page
<html> <head> <script type="text/javascript"
src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="code.js"></script> <script>
function show( data ) { $("#msg").html( data.msg )}
</script> </head> <body> <div>First Web GUI</div> <div>
<button onclick="jolieCall('hello',{name:'Claudio'},show)"> call hello service </button>
<div id='msg'></div> </body></html>
Now we finalize the work introducing a button in the html page which triggers the jolieCall. The response message will be
displayed in the div whose id is “msg”.
The icing on the cake
http://www.jolie-lang.org/favicon.ico
As you noticed, the hello service print out in the console a FileNotFound fault. It is related to the fact that the browser requests for the favicon.ico to put on the left of the URL bar. Thus, why don't we add also it? Download the favicon.ico from the jolie web site and add it to the project.
hello_service.ol
Index.html
code.js
favicon.ico
Improve your projects with Leonardo!
There exists a web server fully developed in Jolie!It is called Leonardo and you can download it from
this URL:
http://sourceforge.net/projects/leonardo/
Copyright © 2014 The Jolie Team.This work is licensed under the Creative Commons Attribution License (CC BY).To view a copy of this license, visit https://creativecommons.org/licenses/by/4.0
http://www.jolie-lang.org
The first language for microservices
