<div class="page">
<div class="cover text-center">
<img class="mx-auto" src=/itb/images/logo_mislata.png alt="logo">
# Estats: Caixer automàtic
<div class="text-end fit-content ms-auto my-3 mt-auto pt-3">
<p><strong>Autor:</strong> Joan Puigcerver Ibáñez</p>
<p><strong>Correu electrònic:</strong> j.puigcerveribanez@edu.gva.es</p>
<p><strong>Curs:</strong> 2024/2025</p>
</div>
<div>
<p class="fw-bold mb-0">Llicència: BY-NC-SA</p>
<p class="d-none d-md-block">(Reconeixement - No Comercial - Compartir Igual)</p>
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.ca" target="_blank">
<img class="mx-auto" src="/itb/images/license.png" alt="Licence"/>
</a>
</div><!--license-->
</div><!--cover-->
</div><!--page-->
{:toc}
## Descripció de l'exemple
Aquest exemple modela els estats en els quals es pot trobar un caixer automàtic.
## Diagrama
<div class="mxgraph" style="max-width:100%;border:1px solid transparent;" data-mxgraph="{"highlight":"#0000ff","nav":true,"resize":true,"toolbar":"zoom layers tags lightbox","edit":"_blank","xml":"<mxfile host=\"app.diagrams.net\" modified=\"2024-04-22T09:46:18.797Z\" agent=\"Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36\" etag=\"048Vx4bTJ4ZO5uxlu6Yj\" version=\"24.2.7\" type=\"google\">\n <diagram name=\"Page-1\" id=\"2YBvvXClWsGukQMizWep\">\n <mxGraphModel dx=\"2074\" dy=\"1114\" grid=\"1\" gridSize=\"10\" guides=\"1\" tooltips=\"1\" connect=\"1\" arrows=\"1\" fold=\"1\" page=\"1\" pageScale=\"1\" pageWidth=\"850\" pageHeight=\"1100\" math=\"0\" shadow=\"0\">\n <root>\n <mxCell id=\"0\" />\n <mxCell id=\"1\" parent=\"0\" />\n <mxCell id=\"Wbr10UhurKWa1ZI_zyCr-31\" style=\"edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;\" parent=\"1\" source=\"Wbr10UhurKWa1ZI_zyCr-1\" target=\"rUmXZGd3vIKuDlGXPuo1-1\" edge=\"1\">\n <mxGeometry relative=\"1\" as=\"geometry\">\n <mxPoint x=\"200\" y=\"160\" as=\"targetPoint\" />\n </mxGeometry>\n </mxCell>\n <mxCell id=\"Wbr10UhurKWa1ZI_zyCr-1\" value=\"\" style=\"ellipse;html=1;shape=startState;fillColor=#000000;strokeColor=#ff0000;\" parent=\"1\" vertex=\"1\">\n <mxGeometry x=\"185\" y=\"90\" width=\"30\" height=\"30\" as=\"geometry\" />\n </mxCell>\n <mxCell id=\"Wbr10UhurKWa1ZI_zyCr-30\" style=\"edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;\" parent=\"1\" source=\"rUmXZGd3vIKuDlGXPuo1-2\" target=\"rUmXZGd3vIKuDlGXPuo1-4\" edge=\"1\">\n <mxGeometry relative=\"1\" as=\"geometry\">\n <mxPoint x=\"200\" y=\"200\" as=\"sourcePoint\" />\n <mxPoint x=\"200\" y=\"410\" as=\"targetPoint\" />\n </mxGeometry>\n </mxCell>\n <mxCell id=\"Wbr10UhurKWa1ZI_zyCr-18\" value=\"Targeta invàlida\" style=\"edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;\" parent=\"1\" source=\"rUmXZGd3vIKuDlGXPuo1-4\" target=\"rUmXZGd3vIKuDlGXPuo1-21\" edge=\"1\">\n <mxGeometry x=\"-0.7403\" y=\"15\" relative=\"1\" as=\"geometry\">\n <mxPoint x=\"260\" y=\"430\" as=\"sourcePoint\" />\n <mxPoint x=\"470\" y=\"655\" as=\"targetPoint\" />\n <mxPoint as=\"offset\" />\n </mxGeometry>\n </mxCell>\n <mxCell id=\"Wbr10UhurKWa1ZI_zyCr-21\" value=\"Targeta vàlida\" style=\"edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;\" parent=\"1\" source=\"rUmXZGd3vIKuDlGXPuo1-5\" target=\"rUmXZGd3vIKuDlGXPuo1-8\" edge=\"1\">\n <mxGeometry x=\"-0.4286\" y=\"40\" relative=\"1\" as=\"geometry\">\n <mxPoint x=\"200\" y=\"450\" as=\"sourcePoint\" />\n <mxPoint x=\"200\" y=\"570\" as=\"targetPoint\" />\n <mxPoint as=\"offset\" />\n </mxGeometry>\n </mxCell>\n <mxCell id=\"Wbr10UhurKWa1ZI_zyCr-22\" value=\"PIN invàlid\" style=\"edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.25;entryY=0;entryDx=0;entryDy=0;\" parent=\"1\" source=\"rUmXZGd3vIKuDlGXPuo1-8\" target=\"rUmXZGd3vIKuDlGXPuo1-21\" edge=\"1\">\n <mxGeometry x=\"-0.6596\" y=\"15\" relative=\"1\" as=\"geometry\">\n <mxPoint x=\"260\" y=\"590\" as=\"sourcePoint\" />\n <mxPoint x=\"440\" y=\"655\" as=\"targetPoint\" />\n <mxPoint as=\"offset\" />\n </mxGeometry>\n </mxCell>\n <mxCell id=\"Wbr10UhurKWa1ZI_zyCr-24\" value=\"PIN vàlid\" style=\"edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;\" parent=\"1\" source=\"rUmXZGd3vIKuDlGXPuo1-8\" target=\"rUmXZGd3vIKuDlGXPuo1-10\" edge=\"1\">\n <mxGeometry x=\"-0.5\" y=\"40\" relative=\"1\" as=\"geometry\">\n <mxPoint x=\"200\" y=\"610\" as=\"sourcePoint\" />\n <mxPoint x=\"200\" y=\"700\" as=\"targetPoint\" />\n <mxPoint as=\"offset\" />\n </mxGeometry>\n </mxCell>\n <mxCell id=\"Wbr10UhurKWa1ZI_zyCr-25\" value=\"Operació&lt;br&gt;cancelada\" style=\"edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;\" parent=\"1\" source=\"rUmXZGd3vIKuDlGXPuo1-10\" target=\"rUmXZGd3vIKuDlGXPuo1-21\" edge=\"1\">\n <mxGeometry x=\"-0.4\" y=\"-25\" relative=\"1\" as=\"geometry\">\n <mxPoint x=\"260\" y=\"720\" as=\"sourcePoint\" />\n <mxPoint x=\"380\" y=\"675\" as=\"targetPoint\" />\n <mxPoint as=\"offset\" />\n </mxGeometry>\n </mxCell>\n <mxCell id=\"Wbr10UhurKWa1ZI_zyCr-27\" value=\"Operació&lt;br&gt;seleccionada\" style=\"edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;\" parent=\"1\" source=\"rUmXZGd3vIKuDlGXPuo1-10\" target=\"rUmXZGd3vIKuDlGXPuo1-13\" edge=\"1\">\n <mxGeometry x=\"-0.4286\" y=\"40\" relative=\"1\" as=\"geometry\">\n <mxPoint x=\"200\" y=\"740\" as=\"sourcePoint\" />\n <mxPoint x=\"200\" y=\"780\" as=\"targetPoint\" />\n <Array as=\"points\" />\n <mxPoint as=\"offset\" />\n </mxGeometry>\n </mxCell>\n <mxCell id=\"Wbr10UhurKWa1ZI_zyCr-28\" value=\"Una altra operació\" style=\"edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;\" parent=\"1\" source=\"rUmXZGd3vIKuDlGXPuo1-16\" target=\"rUmXZGd3vIKuDlGXPuo1-10\" edge=\"1\">\n <mxGeometry x=\"-0.7333\" y=\"-20\" relative=\"1\" as=\"geometry\">\n <mxPoint x=\"70\" y=\"950\" as=\"sourcePoint\" />\n <mxPoint x=\"60\" y=\"710\" as=\"targetPoint\" />\n <Array as=\"points\">\n <mxPoint x=\"70\" y=\"950\" />\n <mxPoint x=\"70\" y=\"675\" />\n </Array>\n <mxPoint x=\"-20\" y=\"20\" as=\"offset\" />\n </mxGeometry>\n </mxCell>\n <mxCell id=\"Wbr10UhurKWa1ZI_zyCr-29\" value=\"Finalitzar operació\" style=\"edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;\" parent=\"1\" source=\"rUmXZGd3vIKuDlGXPuo1-16\" target=\"rUmXZGd3vIKuDlGXPuo1-21\" edge=\"1\">\n <mxGeometry x=\"-0.7108\" y=\"20\" relative=\"1\" as=\"geometry\">\n <mxPoint x=\"260\" y=\"800\" as=\"sourcePoint\" />\n <mxPoint x=\"440\" y=\"695\" as=\"targetPoint\" />\n <mxPoint as=\"offset\" />\n </mxGeometry>\n </mxCell>\n <mxCell id=\"rUmXZGd3vIKuDlGXPuo1-1\" value=\"En espera (Idle)\" style=\"swimlane;fontStyle=1;align=center;verticalAlign=middle;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=0;resizeLast=1;container=0;fontColor=#000000;collapsible=0;rounded=1;arcSize=30;strokeColor=#ff0000;fillColor=#ffffc0;swimlaneFillColor=#ffffc0;dropTarget=0;\" parent=\"1\" vertex=\"1\">\n <mxGeometry x=\"120\" y=\"160\" width=\"160\" height=\"60\" as=\"geometry\" />\n </mxCell>\n <mxCell id=\"rUmXZGd3vIKuDlGXPuo1-2\" value=\"&lt;b&gt;do/ &lt;/b&gt;Mostrar informació\" style=\"text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;spacingLeft=4;spacingRight=4;whiteSpace=wrap;overflow=hidden;rotatable=0;fontColor=#000000;\" parent=\"rUmXZGd3vIKuDlGXPuo1-1\" vertex=\"1\">\n <mxGeometry y=\"30\" width=\"160\" height=\"30\" as=\"geometry\" />\n </mxCell>\n <mxCell id=\"rUmXZGd3vIKuDlGXPuo1-4\" value=\"Llegint targeta\" style=\"swimlane;fontStyle=1;align=center;verticalAlign=middle;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=0;resizeLast=1;container=0;fontColor=#000000;collapsible=0;rounded=1;arcSize=30;strokeColor=#ff0000;fillColor=#ffffc0;swimlaneFillColor=#ffffc0;dropTarget=0;\" parent=\"1\" vertex=\"1\">\n <mxGeometry x=\"120\" y=\"270\" width=\"160\" height=\"130\" as=\"geometry\" />\n </mxCell>\n <mxCell id=\"rUmXZGd3vIKuDlGXPuo1-5\" value=\"&lt;b&gt;entry/ &lt;/b&gt;Realitzar petició de comprovació al servidor&lt;br&gt;&lt;b&gt;do/ &lt;/b&gt;Mostrar &quot;Comprovant targeta...&quot;&lt;br&gt;&lt;b&gt;exit/ &lt;/b&gt;Mostrar resultat comprovació\" style=\"text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;spacingLeft=4;spacingRight=4;whiteSpace=wrap;overflow=hidden;rotatable=0;fontColor=#000000;\" parent=\"rUmXZGd3vIKuDlGXPuo1-4\" vertex=\"1\">\n <mxGeometry y=\"30\" width=\"160\" height=\"100\" as=\"geometry\" />\n </mxCell>\n <mxCell id=\"rUmXZGd3vIKuDlGXPuo1-8\" value=\"Comprovant PIN\" style=\"swimlane;fontStyle=1;align=center;verticalAlign=middle;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=0;resizeLast=1;container=0;fontColor=#000000;collapsible=0;rounded=1;arcSize=30;strokeColor=#ff0000;fillColor=#ffffc0;swimlaneFillColor=#ffffc0;dropTarget=0;\" parent=\"1\" vertex=\"1\">\n <mxGeometry x=\"120\" y=\"470\" width=\"160\" height=\"130\" as=\"geometry\" />\n </mxCell>\n <mxCell id=\"rUmXZGd3vIKuDlGXPuo1-9\" value=\"&lt;b&gt;entry/ &lt;/b&gt;Realitzar petició de comprovació al servidor&lt;br&gt;&lt;b&gt;do/ &lt;/b&gt;Mostrar &quot;Comprovant PIN...&quot;&lt;br&gt;&lt;b&gt;exit/ &lt;/b&gt;Mostrar resultat comprovació\" style=\"text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;spacingLeft=4;spacingRight=4;whiteSpace=wrap;overflow=hidden;rotatable=0;fontColor=#000000;\" parent=\"rUmXZGd3vIKuDlGXPuo1-8\" vertex=\"1\">\n <mxGeometry y=\"30\" width=\"160\" height=\"100\" as=\"geometry\" />\n </mxCell>\n <mxCell id=\"rUmXZGd3vIKuDlGXPuo1-10\" value=\"Triant operació\" style=\"swimlane;fontStyle=1;align=center;verticalAlign=middle;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=0;resizeLast=1;container=0;fontColor=#000000;collapsible=0;rounded=1;arcSize=30;strokeColor=#ff0000;fillColor=#ffffc0;swimlaneFillColor=#ffffc0;dropTarget=0;\" parent=\"1\" vertex=\"1\">\n <mxGeometry x=\"120\" y=\"640\" width=\"160\" height=\"70\" as=\"geometry\" />\n </mxCell>\n <mxCell id=\"rUmXZGd3vIKuDlGXPuo1-11\" value=\"&lt;b&gt;do/ &lt;/b&gt;Mostrar operacions disponibles\" style=\"text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;spacingLeft=4;spacingRight=4;whiteSpace=wrap;overflow=hidden;rotatable=0;fontColor=#000000;\" parent=\"rUmXZGd3vIKuDlGXPuo1-10\" vertex=\"1\">\n <mxGeometry y=\"30\" width=\"160\" height=\"40\" as=\"geometry\" />\n </mxCell>\n <mxCell id=\"rUmXZGd3vIKuDlGXPuo1-12\" value=\"&lt;b&gt;entry/ &lt;/b&gt;Realitzar petició de comprovació al servidor&lt;br&gt;&lt;b&gt;do/ &lt;/b&gt;Mostrar &quot;Comprovant PIN...&quot;&lt;br&gt;&lt;b&gt;exit/ &lt;/b&gt;Mostrar resultat comprovació\" style=\"text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;spacingLeft=4;spacingRight=4;whiteSpace=wrap;overflow=hidden;rotatable=0;fontColor=#000000;\" parent=\"rUmXZGd3vIKuDlGXPuo1-10\" vertex=\"1\">\n <mxGeometry y=\"70\" width=\"160\" as=\"geometry\" />\n </mxCell>\n <mxCell id=\"rUmXZGd3vIKuDlGXPuo1-13\" value=\"Realitzant operació\" style=\"swimlane;fontStyle=1;align=center;verticalAlign=middle;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=0;resizeLast=1;container=0;fontColor=#000000;collapsible=0;rounded=1;arcSize=30;strokeColor=#ff0000;fillColor=#ffffc0;swimlaneFillColor=#ffffc0;dropTarget=0;\" parent=\"1\" vertex=\"1\">\n <mxGeometry x=\"120\" y=\"770\" width=\"160\" height=\"100\" as=\"geometry\" />\n </mxCell>\n <mxCell id=\"rUmXZGd3vIKuDlGXPuo1-14\" value=\"&lt;b&gt;do/ &lt;/b&gt;Realitzar operació i mostrar missatge &quot;Realitzant operació&quot;\" style=\"text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;spacingLeft=4;spacingRight=4;whiteSpace=wrap;overflow=hidden;rotatable=0;fontColor=#000000;\" parent=\"rUmXZGd3vIKuDlGXPuo1-13\" vertex=\"1\">\n <mxGeometry y=\"30\" width=\"160\" height=\"70\" as=\"geometry\" />\n </mxCell>\n <mxCell id=\"rUmXZGd3vIKuDlGXPuo1-16\" value=\"Operació finalitzada\" style=\"swimlane;fontStyle=1;align=center;verticalAlign=middle;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=0;resizeLast=1;container=0;fontColor=#000000;collapsible=0;rounded=1;arcSize=30;strokeColor=#ff0000;fillColor=#ffffc0;swimlaneFillColor=#ffffc0;dropTarget=0;\" parent=\"1\" vertex=\"1\">\n <mxGeometry x=\"120\" y=\"900\" width=\"160\" height=\"100\" as=\"geometry\" />\n </mxCell>\n <mxCell id=\"rUmXZGd3vIKuDlGXPuo1-17\" value=\"&lt;b&gt;do/ &lt;/b&gt;Mostrar missatge finalitzar o realitzar una altra operació\" style=\"text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;spacingLeft=4;spacingRight=4;whiteSpace=wrap;overflow=hidden;rotatable=0;fontColor=#000000;\" parent=\"rUmXZGd3vIKuDlGXPuo1-16\" vertex=\"1\">\n <mxGeometry y=\"30\" width=\"160\" height=\"70\" as=\"geometry\" />\n </mxCell>\n <mxCell id=\"rUmXZGd3vIKuDlGXPuo1-19\" style=\"edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;\" parent=\"1\" source=\"rUmXZGd3vIKuDlGXPuo1-14\" target=\"rUmXZGd3vIKuDlGXPuo1-16\" edge=\"1\">\n <mxGeometry relative=\"1\" as=\"geometry\" />\n </mxCell>\n <mxCell id=\"rUmXZGd3vIKuDlGXPuo1-25\" style=\"edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.75;exitY=0;exitDx=0;exitDy=0;\" parent=\"1\" source=\"rUmXZGd3vIKuDlGXPuo1-21\" target=\"rUmXZGd3vIKuDlGXPuo1-1\" edge=\"1\">\n <mxGeometry relative=\"1\" as=\"geometry\">\n <Array as=\"points\">\n <mxPoint x=\"520\" y=\"190\" />\n </Array>\n </mxGeometry>\n </mxCell>\n <mxCell id=\"rUmXZGd3vIKuDlGXPuo1-21\" value=\"Expulsant targeta\" style=\"swimlane;fontStyle=1;align=center;verticalAlign=middle;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=0;resizeLast=1;container=0;fontColor=#000000;collapsible=0;rounded=1;arcSize=30;strokeColor=#ff0000;fillColor=#ffffc0;swimlaneFillColor=#ffffc0;dropTarget=0;\" parent=\"1\" vertex=\"1\">\n <mxGeometry x=\"400\" y=\"625\" width=\"160\" height=\"100\" as=\"geometry\" />\n </mxCell>\n <mxCell id=\"rUmXZGd3vIKuDlGXPuo1-22\" value=\"&lt;b&gt;entry/ &lt;/b&gt;Expulsar targeta&lt;br&gt;&lt;b&gt;do/ &lt;/b&gt;Mostrar missatge &quot;Agafe la targeta&quot;\" style=\"text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;spacingLeft=4;spacingRight=4;whiteSpace=wrap;overflow=hidden;rotatable=0;fontColor=#000000;\" parent=\"rUmXZGd3vIKuDlGXPuo1-21\" vertex=\"1\">\n <mxGeometry y=\"30\" width=\"160\" height=\"70\" as=\"geometry\" />\n </mxCell>\n </root>\n </mxGraphModel>\n </diagram>\n</mxfile>\n\n"}"></div><script type="text/javascript" src="https://viewer.diagrams.net/js/viewer-static.min.js"></script>
<figcaption>Figura 1: Diagrama d'estats d'un caixer automàtic</figcaption>
Aquest diagrama comença a partir d'un estat inicial, que és l'estat __En espera__.
En aquest estat, el caixer automàtic mostra informació general (`do`) fins que s'introduisca una targeta.
Quan s'introdueix una targeta, es passa al següent estat: __Llegint targeta__, el qual realitza les següents accions:
- `entry`: Just quan entra en aquest estat, es realitza una petició al servidor per realitzar una comprovació.
- `do`: En aquest estat, el caixer automàtic espera la resposta de la petició i mostra el missatge "Comprovant targeta...".
- `exit`: Quan s'haja comprovat la targeta, abans de canviar d'estat, es mostra un missatge amb el resultat de la comprovació.
En cas que la targeta siga vàlida, es passa al estat __Comprovant PIN__. En cas negatiu, a l'estat __Expulsant targeta__.
L'estat __Comprovant PIN__ té una estructura molt pareguda a l'estat __Comprovant tageta__. En cas que el PIN
siga vàlid, passa a l'estat __Triant operació__.
En l'estat __Triant operació__, es mostren per pantalla les operacions disponibles i s'espera que l'usuari seleccione
una operació o la cancel·le. En cas de cancel·lar, s'expulsarà la targeta.
Si es tria una operació, es passa a l'estat __Realitzant operació__, que realitzarà l'operació triada i mostrarà un missatge.
Una vegada finalitzada l'operació, canviem d'estat a __Operació finalitzada__, que permetrà a l'usuari triar si dessitja
realitzar una nova operació o finalitzar. Si decideix realitzar una nova operació, tornarà a l'estat __Triant operació__.
Si dessitja finalitzar, expulsarà la targeta.
Per últim, es pot arribar l'estat __Expulsant targeta__ per diferents camins. Independentment del camí
pel qual s'arribe a aquest estat, el caixer automàtic realitzarà les següents accions:
- `entry`: Expulsarà la targeta del caixer.
- `do`: Mostrarà un missatge a l'usuari perquè retire la targeta.