Sprint4/Sprint4.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <!--
<link rel="stylesheet" type="text/css" href="../css/issStyle1.css">
<script type="text/javascript" src="../css/issStyle.js"></script>
-->
<link rel="stylesheet" href="html/prism.css">
<script src="html/prism.js"></script>
<style type="text/css">
body
{
    margin-left:  10px;
    margin-right: 10px;
};

P
{
    font-family: Tahoma;
    font-size: 10pt;
};

a, a:visited, a:active, a:link, a:hover {
    text-decoration: underline;
    color: #545454;
    background-color: transparent;
	font-size: 93%;
}

a:hover {
    background-color: #cccccc;
}


hr {
    clear: both;
    height: 1px;
    color: #242424;
    background-color: transparent;
}

h1, h2, h3 {
    color: #242424;
    clear: left;
    font: 100% Tahoma, Helvetica, Arial, sans-serif;
    margin-bottom: 0.5em;
    padding-top: 0.5em;
	border-radius: 10px;
	padding: 5px;
}

top {
	width: 100%;
}


#i {
    color: #ff1010;
}
tt{
	font-family: "Arial";
    font-size: 90%;
	color: #006600;
}
em{
	font-family: "Arial";
    font-size: 80%;
	font-weight: bold;
	border-style:solid;
	border-color: #abe876;
    color: #1632cc;
}
bc{
	font-family: "Arial";
	font-size: 90%;
	font-weight: bold;
    color: #990000;
	background-color: #fcf8c7;
}
ks{
	font-family: "Arial";
	font-weight: bold;
    color: #0000CD	;
	font-size: 90%;
}
kc{
	font-family: "Arial";
	font-weight: bold;
    color: #008000	;
	font-size: 90%;
}
pre{
	font-family: "Consolas";
	font-size: 85%;
	background-color: #f5f5f5;
	border: 1.5px solid silver;
	padding: 5px;
}
m{
	font-family: "Helvetica";
	line-height: 100%;
 	font-size: 75%;
}
div.body{
	 
    font-size: 18px;
}
k{
    color: #990000;
	font-weight: bold;
	font-size: 90%;
}
h1 {
    font-size: 150%;
    background-color: #b2c0ff;
	padding: 10px;
}

h2 {
    background-color: #9ed8ff;
    font-size: 130%;
}

h3 {
	background-color: #e6ccff;
    font-size: 100%;
}
h4 {
    background-color: #ccffcc;
    font-size: 100%;
	width: 95%;
	border-radius: 5px;
	padding: 2px;
}
h5 {
    background-color: #d5ffb0;
    font-size: 100%;

}
div.req{
	background-color: #d9ffb3;
    font-size: 18px;
	width: 700px;
    border: 3px solid green;
    padding: 15px;
    margin: 10px;
}
div.remark{
	background-color: #E3F2FD;
    border: 1.5px solid #d5f2ed;
    padding: 15px;
    margin: 10px;
	border-radius: 25px;
}
div.remark-light{
	background-color: #F0FFFF;
    border: 1.5px solid #d5f2ed;
    padding: 15px;
    margin: 10px;
	border-radius: 15px;
}
span.remark{
	background-color: #6b9cff;
    border: 1.5px solid #d5f2ed;
    padding: 1px;
    margin: 5px;
	border-radius: 25px;
	font-size: 120%;
}

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

ol, ul, li {
  margin: 0;
  margin-left: 10px;
  padding: 0;
  padding-bottom: 0px;
}

table, th, td {
	border: 1px solid black;
}

img {
	border: 1.5px solid #d5f2ed

}

a, a:visited, a:active, a:link, a:hover {
    text-decoration: underline;
    color: #545454;
    background-color: transparent;
}

div.wrapdesc{
	width: 90%;
	margin: auto;
}

div.imagedesc{
	width: 85%;
	margin: auto;
}
.blue{
    color: blue;
}
.red{
	color: red;
}
.sep li{
	padding-bottom: 10px;
}
div.sec{
margin-top: 10px;
margin-left: 30px;
margin-right: 30px;
}
.align-center{
	display: block;
	margin-left: auto;
	margin-right: auto;
}
pre.language-java {
      max-width: 800px; /* Adjust the max-width as needed */
      overflow-x: auto;
      display: inline-block; 
	  padding-top: 0em;
	  padding-bottom: 0em;
	  margin-left: 100px;
    }
	
pre{
overflow: auto;
}

.flex-container {
    display: flex;
}

.flex-child {
	width: 50%;
	flex:1;
}  

.flex-child.left {
    margin-right: 20px;
	overflow: hidden;
	 flex-shrink: 0;
}

.flex-child.right {
	padding-top: 20px;
	 flex-shrink: 1;
}

.small{
font-size:65%;
}

.inline{
display: inline-block;
padding: 0px;
}
</style>
    
<head>
   
<title>Sprint4 Giri Matteo</title>

</head>
    
<body>
<div id="top">
<h1>TEMA FINALE SPRINT4<font size="5"></font> </h1>
</div>

<span class="blue"></span> 
<span class="red"><b></b></span> 

<div class="body"> 
<h2>Introduzione</h2>
Nello <a href="../Sprint3/Sprint3.html"><span class="red">SPRINT3</span></a> abbiamo affrontato i requisiti della <span class="blue"><b>ServiceAccessGUI</b></span>, andando a realizzare
un applicazione web che interagisce con il <span class="blue">ColdStorageService</span> seguendo il modello qui sotto:

<blockquote>
<a class="reference internal image-reference" href="../Sprint3/immagini/InterazioniComplete.png"><img alt="../Sprint3/immagini/InterazioniComplete.png" class="align-center" src="../Sprint3/immagini/InterazioniComplete.png" style="width: 50%;" /></a>
</blockquote>

L'architettura dell'applicazione è diventata:

<blockquote>
<a class="reference internal image-reference" href="../Sprint3/immagini/ArchitetturaLogicaSprint3.png"><img alt="../Sprint3/immagini/ArchitetturaLogicaSprint3.png" class="align-center" src="../Sprint3/immagini/ArchitetturaLogicaSprint3.png" style="width: 40%;" /></a>
</blockquote>


In questo sprint andrò ad affrontare il problema della realizzazione della <span class="blue"><b>ServiceStatusGUI</b></span>.
<h2>Requisiti</h2>
Nello <span class="red">SPRINT4</span> ci concentriamo solo sui seguenti requisiti:
<div class="sec remark">
a <span class="blue">ServiceStatusGUI</span> that allows a <span class="blue">Service-manager</span> (an human being) to
supervises the state of the service.
</div>
In questa fase ci interessano solo le seguenti user story:
<div class="sec remark">
<i>
<p>A <span class="blue">Service-manager</span> migtht use the <span class="blue">ServiceStatusGUI</span> to see:</p>
<ul class="simple">
<li><p>the <strong>current state</strong> of the <span class="blue">transport trolley</span> and it <strong>position</strong> in the room;</p></li>
<li><p>the <strong>current weigth</strong> of the material stored in the <span class="blue">ColdRoom</span>;</p></li>
<li><p>the <strong>number of store-requests rejected</strong> since the start of the service.</p></li>
</ul>
</i>
</div>

<h2>Analisi del problema</h2>
<h3>ServiceStatusGUI come Applicazione Web</h3>
<div class="sec remark-light">
Si è deciso di realizzare la <span class="blue">ServiceStatusGUI</span> come <b>applicazione web</b> dotata di interfaccia grafica e che scambia messaggi con il <span class="blue">ColdStorageService</Span> per ottenere
informazioni sullo stato del servizio. </br></br>
In quanto ad analisi del problema non c'è molto da aggiungere, dato che la costruzione di questo componente è equivalente alla realizzazione della <span class="blue">ServiceAccessGUI</span>.
Viene quindi realizzata utilizzando come base il progetto <span class="red">ServiceFacade24</span>.</br>
L'unico problema è che al momento i plugin qak non permettono la creazione di facade multiple per un unico servizio, non ho quindi potuto "agganciare" l'applicazione web della serviceaccessgui
al modello qak del coldstorageservice. Per risolvere questo problema, ho utilizzato l'applicazione web come se fosse "stand-alone", andandola ad attivare manualmente.
</div>
<div class="sec remark-light">
L'unica altra differenza sostanziale con l'applicazione della serviceaccessgui è la modifica del componente <a href="#facadebuilder"><span class="blue">FacadeBuilder</span></a> per permettergli di istanziare
due oggetti della classe <span class="blue">CoaPObserver</span>, in quanto ho la necessità di osservare tutti e due gli attori del servizio.
</div>
<div class="sec remark-light">
Aprendo un browser sulla porta 8089 dell'indirizzo del servizio si viene presentati alla seguente interfaccia:
<blockquote>
<a class="reference internal image-reference" href="immagini/gui.JPG"><img alt="immagini/gui.JPG" class="align-center" src="immagini/gui.JPG" style="width: 55%;" /></a>
</blockquote>
tramite la quale è possibile visualizzare il carico corrente della <b>ColdRoom</b>, lo stato e la posizione del <b>trolley</b>, e il numero di <b>depositRequests</b> rifiutate.
</div>

<h3>Cambiamenti al ColdStorageService</h3>
<div class="sec remark-light">
Nel contesto del <b>ColdStorageService</b> l'unica modifica da dover effettuare è quella di rendere la posizione del <span class="blue">TransportTrolley</span> disponibile verso
l'esterno. Per fare questo ho semplicemente aggiunto un <b>updateResource</b> alla fine di ogni movimento del trolley, per inviare la posizione corrente a chi sta osservando.
</div>


<h3>Architettura logica</h3>
<div class="sec remark-light">
L'architettura logica del <span class="blue">ColdStorageService</span> ricavata nello <span class="red">SPRINT4</span> è rimasta invariata rispetto allo sprint3:

<blockquote>
<a class="reference internal image-reference" href="../sprint3/immagini/ArchitetturaLogicaSprint3.png"><img alt="../sprint3/immagini/ArchitetturaLogicaSprint3.png" class="align-center" src="../sprint3/immagini/ArchitetturaLogicaSprint3.png" style="width: 40%;" /></a>
</blockquote>

Mentre l'interazione completa della <span class="blue">ServiceStatusGUI</span> con il servizio è mostrata qui sotto:
<blockquote>
<a class="reference internal image-reference" href="immagini/InterazioniComplete.png"><img alt="immagini/InterazioniComplete.png" class="align-center" src="immagini/InterazioniComplete.png" style="width: 60%;" /></a>
</blockquote>

</div>
<h2>Progettazione - ServiceStatusGUI</h2>
In questa sezione sono riportati i dettagli di realizzazione più importanti della <span class="blue">ServiceStatusGUI</span> come applicazione web.
<h3 id="applguicore">ApplicationGUICore</h3>
<div class="sec remark-light">
<div class="flex-container">
	  <div class="flex-child left">
		<pre>
		<code>
//Chiamato da CoapObserver
public void handleMsgFromActor(String msg, String requestId) {
	//CommUtils.outcyan("AGC | hanldeMsgFromActor " + msg + " requestId=" + requestId) ;
	if (Objects.equals(getSender(msg), "transporttrolley")){ //handle messages from transport trolley
		updateMsg(msg);
	}
	if (Objects.equals(getPayload(msg).get(0), "currentlyStored")) { //handle the currentlyStored message
		updateMsg(msg);
	}
	if (Objects.equals(getPayload(msg).get(0), "refusingRequest")){ //handle the refusingRequest message
		refusedRequests +=1;
		updateMsg("fridgeservice(refusingRequest," + refusedRequests +")");
	}
}
		</code>
		</pre>
	  </div>
	  
	  <div class="flex-child right">
		<ul class="sep">
		<li>Nella funzione <b>habdleMsgFromActor</b> si vanno a gestire i vari messaggi che arrivano dall'osservatore sulla connessione CoaP. Gli unici messaggi che vengono
		fatti passare alla updateMsg sono quelli del trasporttrolley e il messaggio <b>currentlystored</b> del fridgeservice. Per quanto riguarda invece il messaggio <b>refusingRequest</b>
		del fridgeservice, si incrementa la variabile <b>refusedRequests</b> e si manda il messaggio alla updateMsg con il valore della variabile aggiunto (in modo che quando arriva al
		client tramite connessione WS può sapere quante richieste sono state rifiutate).</li>
		</ul>
	  </div>
	</div>	
</div>
<h3 id="guimainjs">guimain.js</h3>
<div class="sec remark-light">
<div class="flex-container">
	  <div class="flex-child left">
		<pre>
		<code>
function showMsg(message) {
  console.log("received: " + message)
  switch (getSender(message)) {
      case "fridgeservice" :
        if (getPayload(message)[0] == "refusingRequest")
            refusedText.innerText =  getPayload(message)[1];
        else
            capacityText.innerText =  getPayload(message)[1];
          break;
        case "transporttrolley" :
                if (getPayload(message)[0] == "position")
                    positionText.innerText =  "[" + getPayload(message)[1] + "," + getPayload(message)[2] + "]";
                else
                    stateText.innerText =  getPayload(message)[0];
                  break;
      default :
          console.log("Not handled message");
    }
}
		</code>
		</pre>
	  </div>
	  
	  <div class="flex-child right">
		<ul class="sep">
		<li><b>showMsg</b> è la callback chiamata quando arriva un messaggio sulla connessione WS. In base al messaggio arrivato si scrive qualcosa nella textarea dell'html.</li>
		</ul>
	  </div>
	</div>	
</div>

<h3 id="facadebuilder">FacadeBuilder</h3>
<div class="sec remark-light">
<div class="flex-container">
	  <div class="flex-child left">
		<pre>
		<code>
public void create(){

	.
	.
	.

      if( config != null ) {
		String qakSysHost    = ApplSystemInfo.qakSysHost;
		String ctxportStr    = ApplSystemInfo.ctxportStr;
		String qakSysCtx     = ApplSystemInfo.qakSysCtx;
		String applActorName = ApplSystemInfo.applActorName;

		CoapObserver obs = new CoapObserver(guiCore, applActorName);
		CoapConnection coapConn = new CoapConnection(qakSysHost + ":" + ctxportStr,
				qakSysCtx + "/" + applActorName);
		CommUtils.outblue("FacadeBuilder | Stabilita coapConn : " + coapConn);

		coapConn.observeResource(obs);

		//for fridgeservice
		CoapObserver obs2 = new CoapObserver(guiCore, "fridgeservice");
		CoapConnection coapConn2 = new CoapConnection(qakSysHost + ":" + ctxportStr,
				qakSysCtx + "/" + "fridgeservice");
		CommUtils.outblue("FacadeBuilder | Stabilita coapConn : " + coapConn2);

		coapConn2.observeResource(obs2);
	//}
		</code>
		</pre>
	  </div>
	  
	  <div class="flex-child right">
		<ul class="sep">
		<li>In <b>create()</b> si vanno a creare due CoapConnection al posto di una, per osservare tutti e due i componenti del servizio.</li>
		</ul>
	  </div>
	</div>	
</div>

<h2>Piani di testing</h2>

Al fine di testare il corretto funzionamento del sistema, sono stati introdotti i seguenti <b>piani di testing</b>:
<div class="sec remark-light">
<ul class="sep">
<li><span class="remark">TestStatusWorking</span>: Si fa partire una richiesta e si eseguono le normali operazioni relative all'accettazione della richiesta e del biglietto, o il rifiuto di
una richiesta. Nel mentre ciò accade si controlla nella <span class="blue">ServiceStatusGUI</span> che tutti i valori riportati siano corretti.</li>
</div>

</div>
</body>
</html>
 
<!-- USEFUL
<table style="width:100%" border="1">
<tr>
<td style="width:50%">
</td>
<td></td>
</tr>
</table>
-->
	      	
<br/><br/> 	
</div>  

<div style="background-color:rgba(86, 56, 253, 0.9); width:60%;text-align:left;color:white">
By Matteo Giri email: matteo.giri@studio.unibo.it
<br>
Link GitHub Repo: https://github.com/s1090263/iss2023/
<img src="../Sprint0/immagini/fotoGiriMatteo.jpg" alt="foto" width="20%" height="20%">
</div> 
</body>
</html>