desenvolupament d’una base de dades i d’una...

Desenvolupament d’una base de dades i d’una aplicació web per la gestió d’incidències

Desenvolupament d’unaweb per gestionar

AUTOR: Ramon Adam Torralba DIRECTOR: Francesc Xavier Mallafré

Correu electrónic:

Titulació: Enginyeria Técnica Informàtica de SData de presentació: Jun


Desenvolupament d’una base de dades i d’unaweb per gestionar incidències elèctriques

AUTOR: Ramon Adam Torralba

DIRECTOR: Francesc Xavier Mallafré Port

Correu electrónic: [email protected]

Técnica Informàtica de Sistemes. Juny 2014


1

base de dades i d’una aplicació incidències elèctriques

Porta

[email protected]


2

Resum: L’ objectiu principal d’aquest projecte és el desenvolupament d’una base de dades on

enmagatzemar tota la informació relacionada amb les incidencies elèctriques de baixa

tensió que hem d’atendre a la nostra empresa. Aquesta base de dades estarà programada

amb MySQL i es trobarà allotjada en un servidor web instal.lat exclusivament per

emmagatzemar-la.

Per a la realització del projecte també he hagut de realitzar una aplicació web basada en

formularis on els nostres operaris puguin interactuar amb base de dades, bé sigui

introduïnt nous registres o consultant-ne alguns que ja es trobin enmagatzemats en la base

de dades.


3

1. INDEX

2. DESCRIPCIÓ DE L’ EMPRESA............................................................................. 4

3. UBICACIÓ DEL PROJECTANT DINS DE L’EMPRESA……………………… 7

4. DESCRIPCIÓ DEL TREBALL REALITZAT……………………………….…… 8

4.1 OBJETIUS DEL PROJECTE................................................................. 8

4.2 ESPECIFICACIONS DEL PROJECTE…………….……………..….. 8

4.2.1 REQUISITS DEL SISTEMA………………………….……. 9

4.3 DISSENY………………………………………………………………... 9

4.3.1 ARQUITECTURA BÀSICA DEL SISTEMA……………… 9

4.3.2 DISSENY DEL SERVIDOR................................................... 10

4.3.3 DISSENY DE LA BASE DE DADES..................................... 12

4.3.3.1 DISSENY CONCEPTUAL…………...………… 12

4.3.3.2 DISSENY LÒGIC………………………….. ….... 16

4.3.4 DISSENY DE L’APLICACIÓ WEB………………...……… 24

4.3.5 DISSENY DE LA INTERFÍCIE GRÀFICA……….…..…… 26

4.4 DESENVOLUPAMENT………..……………………………………… 34

4.4.1 DESENVOLUPAMENT DEL SERVIDOR…………………. 34

4.4.2 DESENVOLUPAMENT DE LA BASE DE DADES…….... .. 40

4.4.3 DESENVOLUPAMENT DE LA GUI……………………….. 50

4.4.4 CONSULTES LOCALS………………….……...…………… 55

4.5 RECURSOS UTILITZATS…….……………………………………...... 60

4.5.1 PROGRAMARI…………….……………………….……….. 60

4.5.2 LLENGUATGES………………………….…………………. 65

4.5.3 FRAMEWORKS………………………….…………….…….. 67

4.6 BIBLIOGRAFIA / PAG. WEBS..……………………….………………. 68

5. APORTACIONS DEL PROJECTE ALS CONEIXEMENTS DE L’ALUMNE………………………………………………………………………. 68

6. APORTACIONS DELS ESTUDIS REALITZATS AL PROJECTE……….……. 69

7. CONCLUSIONS…………………………………………………………....……. 69

8. ANNEX 1: MANUAL D’USUARI……………………………………………… 70


4

2. DESCRIPCIÓ DE L’EMPRESA

• Installum, és una empresa fundada l’any 1994. És una empresa dedicada principalment a les instalaciones energètiques.

– Està Agremiada a FERCA i està autoritzatzada per realitzar treballs d’electricitat (especialistes), gas (IG-A), fontanería, climatizació, calefacció (RITE), contraincendis i frigoristes.

• El millor actiu són els seus treballadors als quals realitza una formació continuada fent un gran èmfasi en referència als temes relacionats amb la prevenció de Riscos Laborals.

• Com a conseqüència de les noves necessitats adquirides al 2011, Punt de Servei Installum en el 2011, va realitzar un esforç per millorar tota la seva infraestructura.

• Actualment Installum disposa de:

– Seu de 1000 m2 + 250 m2 de oficines + 210 m2 de patis.

• C/Carbó num 7 nave 6, Pol. Ind. Riu Clar Tarragona 43006

– Nau de 400 m2 + 150 m2 de altell + 250 m2 de patis al mateix polígon

– Oficina de atenció al públic de 150 m2 en Torredembarra.

• C/Tarragona 12, baixos. Torredembarra 43830


• Installum disposa d’un sistema de Gestió Integrat de Qualitat, MediRiscos Laborals certificat

• Certificacions – Certificació ISO 9001:2008 desde l’any 2002– Certificació ISO 14001:2004 desde l’any – Certificació ISO 18001:2007 desde l’any 2013

• Installum disposa de la política de Responsabilitat• Cumpleix amb la normativa de la

seus arxius a l’Agència Espanyola de Protecció de Dade• Està certificada en el Registre d’Empreses Acreditade• Disposa del Registre

Principals Partners

mantenimientrel·lacionats amb nous suministres també a la xarxa de distribució de baixa tensió

Des del 2006, Installum és partner de Cydesa, com contratista per a realitzar instalacions per corregir l’energia reactiva iBaterie


Installum disposa d’un sistema de Gestió Integrat de Qualitat, MediRiscos Laborals certificat per TÜV Rheinland

Certificació ISO 9001:2008 desde l’any 2002 Certificació ISO 14001:2004 desde l’any 2013 Certificació ISO 18001:2007 desde l’any 2013

e la política de Responsabilitat Social normativa de la llei de protección de Dades. Te registrats tots els

Agència Espanyola de Protecció de Dades. certificada en el Registre d’Empreses Acreditades (REA)

isposa del Registre de Proveedors Achilles REPRO.306282

Des de l’any 1996, Installum és partner d’Endesa. Primera Punt de Servei i més tard com a contratista local per a la realització de diferents treballs a la demarcació de Tarragona (traballs regulats d’equips de mesura i sustitució decontadores antics pels nous de telegestió, treballs

mantenimient de la xarxa de distribució elèctrica i treballs rel·lacionats amb nous suministres també a la xarxa de distribució de baixa tensió.

Des del 2006, Installum és partner de Cydesa, com contratista per a realitzar instalacions per corregir l’energia reactiva i armònics mitjançant la instal·lació de les seves Bateries de condensadors.

Des del 2008, Installum és partner de Cirprotec, empresa experta en parallamps i sistemes de protecció de sobretensions.


5

Installum disposa d’un sistema de Gestió Integrat de Qualitat, Medi Ambient i

llei de protección de Dades. Te registrats tots els

Installum és partner d’Endesa. Primer com a Punt de Servei i més tard com a contratista local per a la realització de diferents treballs a la demarcació de Tarragona

sustitució dels , treballs de

xarxa de distribució elèctrica i treballs rel·lacionats amb nous suministres també a la xarxa de distribució de

Des del 2006, Installum és partner de Cydesa, com a contratista per a realitzar instalacions per corregir l’energia

mitjançant la instal·lació de les seves

partner de Cirprotec, empresa experta en parallamps i sistemes de protecció de


6

Al 2012, Installum es converteix en partner de Repsol com empresa instaladora certificada per a treballs de manteniment elèctrics, de fontaneria, de climatització i de sistemes d’extinció d’incendis.

Des de 2013, som partners de DEXMA, com instal.ladors, distribuidors i consultors de software i equips de gestió energètica.

Des de 2013, son partner d’Artesolar com distribuidors i instal.ladors de solucions d’iluminació LED.


7

3. UBICACIÓ DEL PROJECTANT DINS DE L’EMPRESA

La meva tasca principal a l’empresa és la de la gestió integral de totes les incidències

elèctriques que rebem del centre de control d’avaries d’Endesa Distribució Elèctrica de

l’àrea de Tarragona i voltants.

Puntualment i gràcies als estudis que vaig cursar, també m’encarrego de les

tasques de manteniment informàtic que es realitzen a l’empresa, ja sigui com donar

suports als diferents usuaris, realitzar petits cursos específics d’algun programa a diferents

usuaris, sol.lucionar problemes que puguin succeïr als equips informàtics, adquisició i/o

actualització de software/hardware necessaris pel bon funcionament dels equips,

manteniment de la xarxa TCP/IP etc.

Val a dir que per algunes funcions i tasques, Installum disposa d’alguna empresa

externa com per exemple, per la gestió del servidor de correu electrònic, el manteniment

del servidor principal i el de les còpies de seguretat del servidor.


8

4. DESCRIPCIÓ DEL TREBALL RALITZAT

4.1 OBJECTIUS DEL PROJECTE

L’ objectiu principal d’aquest projecte és el desenvolupament d’una base de dades

per emmagatzemar la informació rel·lacionada amb les incidències elèctriques que

atenem a l’empresa.

El control i la manipulació d’aquesta base de dades es farà mitjançant el llenguatge

SQL i per facilitar la gestió dels diferents tipus d’incidències elèctriques de baixa

tensió s’ha realitzat una aplicació web. Aquesta aplicació estarà programada

mitjançant el llenguatge PHP i es trobarà allotjada en un servidor web dedicat

exclusiument per al funcionament d’ aquesta.

4.2 ESPECIFICACIONS DEL PROJECTE

Aquest projecte es pot divir en tres blocs ben diferenciats encara que entre ells hi hagi una relació directa per asolir l’objectiu del projecte. Servidor Adquisició i configuració d’un servidor per a emmagatzemar tota la info de la base de dades i que es pugui utilitzar com a servidor web per mostrar l’aplicació web als usuaris. Ha de ser un servidor econòmic i funcional compatible amb el S.O windows. Base de dades Disseny i implementació d’una base de dades que cumpleixi amb les necessitats de l’empresa Aplicació web Aplicació on es validaràn els usuaris per tal d’introduïr o consultar dades de la base de dades. S’ha d’intentar que sigui una interfície senzilla i clara, ja que s’utilitzarà principalment en dispositius mòbils i ha de tindre un grau d’usabilitat elevat per tal de facilitar l’aprenentatge als usuaris.


9

4.2.1 REQUISITS DEL SISTEMA

El desenvolupament d’aquesta aplicació planteja els següents requisits:

- Al tractar-se d’una aplicació que es basa en el model client-servidor, l’extracció d’ informació del servidor que s’executarà al client no es suficient per al funcionament bàsic del sistema, és necessari una correcta configuració del servidor per aconseguir-ho.

- El servidor ha de ser capaç de gestionar la informació de múltiples clients simultàniament.

- Aquesta informació no pot ser pública i ha de poder ser accessible des de diferents plataformes amb diferents sistemes operatius.

4.3 DISSENY

4.3.1 ARQUITECTURA BÀSICA DEL SISTEMA

Aquest sistema es basa en l’arquitectura de client-servidor. Un servidor web o servidor HTTP no es més que un programa informátic que processa una aplicació, i realitza conexions bé siguin síncrones o asíncrones i unidireccionals o bidireccionals amb el client, generant respostes a les peticions dels clients. Quan el client realitza una petició al servidor per a que li envíi una pàgina web, en aquest cas la de la gestió d’incidències, el servidor executa l’intèrpret de PHP. Aquest processa l’script sol·licitat que generarà el contingut de manera dinàmica obtenint informació de la nostra base de dades. El resultat és enviat per l’intèrpret al servidor i aquest el transmet al client per mitjà del protocol http.

Figura 1. Exemple model Client-Servidor


10

4.3.2 DISSENY DEL SERVIDOR El servidor utilitzat per a la realització d’aquest projecte és el Synology Disk Station 112j. Es tracta d’un servidor NAS (network-area storage) d’un receptacle, senzill i econòmic però que reuneix totes les funcionalitats requerides per al desenvolupament del projecte. Es connecta al router de la xarxa local mitjançant el cable de xarxa RJ45, obtenint així conexió directa a la xarxa local, és a dir, connexió als ordinadors de la xarxa i connexió a internet. És compatible amb Windows, Mac i Linux.

Figura2. Synology DS112j

Les principals funcionalitats d’aquest model són:

Núvol personal les 24h del dia, 7 dies de la setmana.

Compatibilitat amb disc dir de 2,5” i 3,5”

Motor de xifrat de hardware.

Disseny silenciós i fred.

Estalvi energètic amb un consum baix.

Execució de Synology DiskStation Manager (DSM)

Descàrregues P2P (emule, Torrent)

Servidor Web (PHP, SQL)

Servidor FTP

Servidor multimedia (DLNA, UPnP, iTunes o visor de fotografíes).

Servidor per impresores per xarxa.

Creació d’usuaris i grups d’usuaris amb permisos personalitzats.

Integració amb el sistemes operatius (Windows, Linux o Mac OS X).

Copies de seguretat.

Suport per unitats USB o eSATA.

Suport per plugins de tercers.


Les seves especificacions tècniques són les següents:

Figura 3. Especificacions DiskStation 112j

Dades extretes de la pàgina web del fabricant

Especificacions de hardware

CPU

model de CPU

Freqüència de CPU

Motor de xifrat de hardware

Memòria

Memòria del sistema

Emmagatzematge

Receptacle(s) d’unitat

Tipus d’unitat compatible

Capacitat interna máx.

Ports externs

Port USB 2.0

Sistema d’arxius

Unitats internes

Unitats externes

Aparença

Tamany (Alçada X Amplada X Profunditat)

Pes

Altres

Número de LAN (RJ45)

Ventilador del sistema

Compatibilitat inalámbrica (dongle)

Nivell de soroll

Recuperació d’energía

Encesa i parada programada

Font / Adaptador d’ alimentació

Voltatge d’alimentació d’entrada CA

Freqüència d’alimentació

Consum d’energía

Temperatura

Temperatura operativa

Temperatura d’emmagatzematge

Humitat relativa

Altitud operativa màxima

Certificació

Garantía


especificacions tècniques són les següents:

Figura 3. Especificacions DiskStation 112j

de la pàgina web del fabricant http://www.synology.com/es-es/products/spec/DS112j

Marvell Kirkwood

1.0 GHz

128 MB DDR2

1

3.5" SATA(III) / SATA(II) HDD

2.5" SATA(III) / SATA(II) HDD (with optional 2.5" Disk Holder)

2.5" SATA(III) / SATA(II) SSD (with optional 2.5" Disk Holder)

5 TB (unitat de disc dur de 5 TB X 1) (la capacitat pot variar segons el tipus de RAID)

2

EXT4

EXT4

EXT3

FAT

NTFS

HFS+ (Solo lectura, con un tamaño de volumen máx. de 2 TB)

166 mm X 71 mm X 224 mm

0.72 kg

Gigabit X 1

60 mm X 60 mm X 1 pcs

17.1 dB(A)

48W

De 100V a 240V CA

50/60 HZ, Monofásico

12.1W (Acceso) 4.4W (Hibernación de unidad de disco duro)

De 5°C a 35°C (de 40°F a 95°F)

De -10°C a 70°C (de 15°F a 155°F)

De 5% a 95% HR

6500 peus

FCC Class B

CE Class B

BSMI Class B

2 anys


11

es/products/spec/DS112j

capacitat pot variar segons el tipus de RAID)


12

4.3.3 DISSENY DE LA BASE DE DADES

4.3.3.1 DISSENY CONCEPTUAL: MODEL ENTITAT-RELACIÓ

Per a la realització del disseny de la base de dades, com és lògic, s’ha de començar

per la recopil.lació de les dades amb les quals s’haurà de treballar. Per això s’han

d’avaluar les dades i els procesos que intervenen al sistema i obtenir-ne la seva

especificació.

El fet que la base de dades estigui directament relacionada amb la feina que realitzo a

l’empresa m’ha ajudat força a l’hora de realitzar el disseny conceptual de la base de dades

degut al coneixement de la temàtica, del contexte de les dades i del fluxe d’aquestes.

Encara així, han fet falta diverses versions abans d’arribar al disseny definitiu.

Passos seguits per la realització del disseny conceptual:

1 Determinar les entitats, és a dir, quelcom sobre el que el sistema ha de guardar informació i que sigui diferenciable de la resta.

2 Especificar els seus atributs, cadascuna de les propietats / característiques que descriuen una entitat.

3 Establir les claus primàries, que no són res mes que els atributs o conjunt d’atributs tals que els seus valors identifiquen a la entitat de manera única

4 Establir les relacions entre les entitats.

Un cop realitzats aquest passos he realitzat el model entitat-relació o el diagrama Chen

(en referència al seu autor), el qual es mostra a continuació:


DIAGRAMA ENTITAT- R Els diagrames Entitat-Relació són un estàndard actual dades en el disseny de bases deveuen afavorides per una notació diagramàtica molt comprensiva. És una eina que s’utilitza per reflexar els requisits del món realha de ser sistemàtica i rigorosa si es vol obtenirpartir d’aquest diagrama que esen el sistema gestor de bases de dades REPRESENTACIÓ DEL DIAGRAMA Per tal de facilitar la comprensió del diagrama, nomès es mostren les entitats i les seves relacions.

Nota: El atributs de les entitats es


RELACIÓ

Relació són un estàndard actual a l’hora de la modelització de el disseny de bases de dades degut a la seva simplicitat i llegibilitat, les quals es

veuen afavorides per una notació diagramàtica molt comprensiva. És una eina que els requisits del món real en un model conceptual.

ha de ser sistemàtica i rigorosa si es vol obtenir un sistema vàlid i eficientque es desenvoluparà tota la implementació de

de bases de dades.

REPRESENTACIÓ DEL DIAGRAMA

Per tal de facilitar la comprensió del diagrama, nomès es mostren les entitats i les seves

Figura 4. Esquema Entitat-Relació

El atributs de les entitats es mostren al següent apartat.


13

a l’hora de la modelització de degut a la seva simplicitat i llegibilitat, les quals es

veuen afavorides per una notació diagramàtica molt comprensiva. És una eina que . La seva confecció

ficient, ja que serà a entació de la bases de dades

Per tal de facilitar la comprensió del diagrama, nomès es mostren les entitats i les seves


14

RESPECTE AL MODEL ER

A continuació es mostra la llista de totes les entitats que apareixen a l’esquema anterior.

Les entitats (representades en majúscula) contenen els seus respectius atributs

(representats entre parèntesis i separats per comes). Els atributs que estàn subratllats són

els que formen part d’una clau primària.

LLISTA D’ENTITATS

• INCIDENCIA (idincidencia, n_incidencia, fecha_asig, hora_asig,

fecha_fin,hora_fin, direccion, localidad, trafo, cuadro, salida, finalizada)

• INC_RECHAZADA (idincidencia, motivo)

• TIPO_CAUSA (idtipocausa, tipo_causa)

• CAUSA (idcausa, nombre_causa)

• TIPO_ELEMENTO (idtipoelemento, tipo_elemento)

• ELEMENTO (idelemento, nombre_elemento)

• OPERARIO (idoperario, nombre, apellido1, apellido2, direccion, localidad,

telefono, dni, loguin, password, operario)

• MATERIAL (idmaterial, codigo, nombre)

• CENTRO_TRANSFORMADOR (idtrafo, codigo_trafo)

• CUADRO (idcuadro, codigo_cuadro)

• SALIDA (idsalida, codigo_salida)

• TECNICO_ENDESA (idtecnico, nombre, apellido, codigo, email, telf)

• AYUDANTE (idayudante, nombre, apellido, email, telf)

• CLIENTE (idcliente, nombre, apellido1, apellido2, telf)


15

La connectivitat d’una interrelació es representa afegint una etiqueta amb

un 1 (si es tracta d’una única connectivitat) o amb una N (si poden haver-hi varies),

segons calgui, a cadascuna de les línies que uneix la interrelació amb les entitats que hi

participen.

L’opcionalitat es representa superposant un cercle a la línia de connexió corresponent, i

l’obligatorietat , superposant un petit guió perpendicular a la línia de connexió de què es

tracti.

Al diagrama anterior s’ha fet servir una extensió del model entitat-relació bàsic, fent

servir una construcció més avançada com és el cas de l’especialització.

L’especialització permet reflectir l’existència d’una entitat general, anomenada entitat

superclasse, que es pot especialitzar en diferents entitats subclasse. En l’exemple anterior

l’entitat superclasse és la que correspon a INCIDENCIA i la entitat subclasse per tant, és

INC_RECHAZADA

Figura 5. Especialització

L’entitat superclasse permet representar les característiques comunes de l’entitat des d’un

punt de vista general. Les entitats subclasse, en canvi, permeten representar les

característiques pròpies de les especialitzacions de l’entitat superclasse.

Les instàncies de les subclasses han de ser, al mateix temps, instàncies de la superclasse

respectiva.


16

Restriccions

Sobre l’especialització anterior cal puntualitzar que s’apliquen dues restriccions, que

s’expliquen a continuació:

• Restricció Disjunta. Una mateixa entitat instància no pot aparèixer en dues entitats

subclasse diferents. Es representa en el diagrama afegint una etiqueta amb

la lletra D.

• Restricció Parcial. No totes les instàncies de l’entitat superclasse han de pertànyer

necessàriament a alguna de les seves entitats subclasse. Es denota amb l’etiqueta P.

4.3.3.2 DISSENY LÒGIC: MODEL RELACIONAL

Partint com a base del disseny conceptual expressat mitjançant el model ER, el

transformem en una estructura de dades del model relacional.

Els elements bàsics del model ER són les entitats i les interrelacions:

- Les entitats quan es tradueixen al model relacional originen relacions.

- Les interrelacions, en canvi, quan es transformen, poden donar lloc a claus

forànes d’alguna relació ja obtinguda o bé a una nova relació.

En el cas de les interrelacions, és necesari fixar-se en el seu grau i la seva conectivitat per

poder decidir quina és la transformació adequada:

- Les interrelacions binàries 1:1 y 1:N donen lloc a claus forànes.

- Les interrelacions binàries M:N i totes les n-aries es tradueixen en noves

relacions.


17

TRANSFORMACIÓ D’ENTITATS

• INCIDENCIA (idincidencia, n_incidencia, fecha_asig, hora_asig,

fecha_fin,hora_fin, direccion, localidad, trafo, cuadro, salida, finalizada)

• INC_RECHAZADA (idincidencia, motivo)

• TIPO_CAUSA (idtipocausa, tipo_causa)

• CAUSA (idcausa, nombre_causa)

• TIPO_ELEMENTO (idtipoelemento, tipo_elemento)

• ELEMENTO (idelemento, nombre_elemento)

• OPERARIO (idoperario, nombre, apellido1, apellido2, direccion, localidad,

telefono, dni, loguin, password, operario)

• MATERIAL (idmaterial, codigo, nombre)

• CENTRO_TRANSFORMADOR (idtrafo, codigo_trafo)

• CUADRO (idcuadro, codigo_cuadro)

• SALIDA (idsalida, codigo_salida)

• TECNICO_ENDESA (idtecnico, nombre, apellido, codigo, email, telf)

• AYUDANTE (idayudante, nombre, apellido, email, telf)

• CLIENTE (idcliente, nombre, apellido1, apellido2, telf)

TRANSFORMACIÓ D’INTERRELACIONS

INTERRELACIONS BINÀRIES AMB CONECTIVITAT 1:1 En aquest diagrama no apareix cap interrelació binària 1:1

INTERRELACIONS BINÀRIES AMB CONECTIVITAT 1:N Per transformar aquestes interrelacions és necessari afegir a l’entitat del costat N una clau

forànea que faci referència a l’altre relació

La interrelació ‘genera’ de la figura es transforma en: CLIENTE (idcliente, nombre, apellido1, apellido2, telf)

INCIDENCIA (idincidencia, n_incidencia, fecha_asig, hora_asig,

fecha_fin,hora_fin, direccion, localidad, trafo, cuadro, salida,

finalizada, idcliente)

On {idcliente} referencia CLIENTE Fig 6. Interrelació 1:N


18

Aquesta sol.lució ens permet saber per a cada client, quines incidències ha generat i

també ens permet consultar, per a cada incidencia, qui és el client de l’ha generat, és a dir,

queda reflexada exactament el significat de la interrelació “genera”

Degut a que una incidència està assignada a un únic client, l’atribut idcliente té un valor

únic per a cada valor de la clau primària {idincidencia}. Si s’hagués posat la clau forànea

{ idincidencia} en la relació CLIENTE, la solució hauria estat incorrecta, degut a que

idincidencia hagués pres diversos valors, un per cadasquna de les incidències que poden

estar asignades a un client.

Seguint el mateix patró, s’han transformat la resta de relacions.

L’interrelació gestiona queda de la següent manera: CENTRO_TRANSFORMADOR (idtrafo, codigo_trafo, idtecnico)

TECNICO_ENDESA (idtecnico, nombre, apellido, código, email, telf)

On { idtecnico } referencia TECNICO_ENDESA

L’interrelació coopera

TECNICO_ENDESA (idtecnico, nombre, apellido, código, email, telf)

AYUDANTE (idayudante, nombre, apellido, email, telf, idtecnico)

On { idtecnico } referencia TECNICO_ENDESA

La interrelació pertenece es transforma de la següent manera TIPO_ELEMENTO (idtipoelemento, tipo_elemento)

ELEMENTO (idelemento, nombre_elemento,

idtipoelemento)

On {idtipoelemento} referencia TIPO_ELEMENTO

Fig 7. Interrelació 1:N

Fig 8. Interrelació 1:N

Figura 9. Interrelació 1:N


19

L’especialització també es transforma de la mateixa manera que les anteriors transformacions. INCIDENCIA (idincidencia, n_incidencia, fecha_asig, hora_asig, fecha_fin,hora_fin,

direccion, localidad, trafo, cuadro, salida, finalizada)

INC_RECHAZADA (idincidencia, motivo)

On { idincidencia } referencia INCIDENCIA

INTERRELACIONS BINÀRIES AMB CONECTIVITAT M:N Una interrelació M:N es transforma en una relació. La seva clau primària

estarà formada pels atributs de les claus primàries de les dues entitats interrelacionades.

Els atributs de la interrelació seràn els atributs de la nova relació.

La interrelació trabaja, dona lloc doncs, a la relació TRABAJA

OPERARIO (idoperario, nombre, apellido1, apellido2, direccion,

localidad, telefono, dni, loguin, password, operario)


fecha_fin, hora_fin, direccion, localidad, trafo, cuadro,

salida, finalizada)

TRABAJA (idoperario, idincidencia, fecha_ini, fecha_fin)

On { idoperario } referencia OPERARIO

On {idincidencia}refefencia INCIDENCIA

La interrelació requiere es transforma en la relació REQUIERE :


fecha_fin, hora_fin, direccion, localidad, trafo, cuadro,

salida, finalizada)

MATERIAL (idmaterial, codigo, nombre)

REQUIERE (idincidencia, idmaterial, cantidad)

On {idincidencia} referencia INCIDENCIA

On {idmaterial} referencia MATERIAL

Fig 10. Interrelació M:N

Fig 11. Interrelació M:N


20

Com es pot veure, la relació requiere conté l’atribut cantidad. Aquest atribut forma part de la relació degut a que ens permetrà conèixer per a cada incidència, quina cantitat s’ha utilitzat de cada material, i per cada material, quina cantitat s’ha utilitzat en aquella incidència.

La interrelació afecta es transforma en la relació AFECTA :

INCIDENCIA (idincidencia, n_incidencia, fecha_asig, hora_asig, fecha_fin, hora_fin,


TIPO_ELEMENTO (idtipoelemento, tipo_elemento)

AFECTA (idincidencia, idtipoelemento)


On {idtipoelemento} referencia TIPO_ELEMENTO

Per últim, la interrelació contiene es transforma en la relació CONTIENE :



ELEMENTO (idelemento, nombre_elemento)

CONTIENE (idincidencia, idelemento)


On {idelemento} referencia ELEMENTO

Figura 12. Interrelació M:N

Figura 13. Interrelació M:N


21

INTERRELACIONS n-ÀRIES

INTERRELACIONS BINÀRIES AMB CONECTIVITAT 1:1:1

Quan la conectivitat de la interrelació és 1:1:1, la relació que s’obté de la transformació té com a clau primària els atributs que formen la clau primària de dues entitats qualsevols de les tres interrelacionades. Per tant, la interrelació implica es transforma en la relació IMPLICA de la següent manera:



TIPO_CAUSA (idtipocausa, tipo_causa)

CAUSA (idcausa, nombre_causa)

IMPLICA (idincidencia, idtipocausa, idcausa) On {idincidencia} referencia INCIDENCIA

On {idtipocausa} referencia TIPO_CAUSA

On {idcausa} referencia CAUSA

INTERRELACIONS BINÀRIES AMB CONECTIVITAT N:1:1:1 Quan la conectivitat de la interrelació és N:1:1:1, la relació que s’obté de la transformació té com a clau primària els atributs que formen la clau primària de l’entitat etiquetada amb N i dos dels tres atributs que formen part de les claus primàries connectades amb 1.

Figura 14. Interrelació 1:1:1

Figura 15. Interrelació N:1:1:1


22



CENTRO_TRANSFORMADOR (idtrafo, codigo_trafo)

CUADRO (idcuadro, codigo_cuadro)

SALIDA (idsalida, codigo_salida)

ABASTECE (idincidencia, idtrafo, idcuadro, idsalida)


On {idtrafo} referencia On {idtrafo} referencia CENTRO_TRANSFORMADOR

On {idcuadro} referencia CUADRO

On {idsalida} referencia SALIDA

Un cop finalitzades les relacions, ja es por procedir a la implementació del diagrama d’entitat relació extès. Es realitza amb l’ajuda de l’eina MySQL Workbench

ESQUEMA ERE (entidad relació extès)

Figura 16. Esquema Entitat-Relació Extès executat a Mysql Workbench


23

Taules de la BD La taula principal sobre la que interactua tot el sistema és la taula Incidencia. incidencia: és la taula encarregada d’emmagatzemar totes les dades referents a una incidència. Aquestes dades en concret són el número d’incidència, les dates i hores tant d’assignació com de finalització de la incidència, l’adreça i localitat de la incidència, la causa que l’ha provocat, les dades del trafo, el quadre i la sortida¸i si està finalitzada. incidencia_rechazada: aquesta taula conté els mateixos atributs que la taula incidència (ja que es tracta d’una especialització de la mateixa) però a banda conté el motiu pel qual es rebutjada. tipo_causa: taula que conté els tipus de causes per les quals es poden produir incidències. causa: taula que conté els noms de les causes concretes per les quals s’ha produït una incidència i l’identificacidor del tipus de causa a la qual pertany. afecta: aquí guardarem quin tipus d’elements averiats hi han en cada incidència. contiene: aquesta taula serveix per quins elements avariats hi han en una incidència. tipo_elemento: en aquesta taula s’emmagatzemen els tipus d’element elèctrics que es poden espatllar. elemento: en aquesta taula s’emmagatzemen els elements concrets avariats i l’identificacidor del tipus d’element al qual pertanyen. material: en aquesta taula es guarden els codis i els noms dels diferents materials que es poden utilitzar per reparar una incidència. centro_transformador: aquí es guarden els codis dels transformadors de la nostra àrea d’actuació i el tècnic del qual depèn. cuadro: aquesta taula conte els codis dels quadres d’un transformador salida: en aquesta taula es guarden els codis de les sortides d’un transformador cliente: aquesta taula conté la informació del client que ha generat la incidència i amb el qual s’ha de contactar per realitzar la reparació. Els camps d’aquesta taula són nom i cognoms del client, el telèfon, l’adreça i la població. tecnico_endesa: taula on s’emmagatzemen les dades corresponents al nom, cognom, codi, email i telèfon dels tècnics d’endesa els quals gestionen els centres tranformadors. ayudante: taula semblant a l’anterior però en aquest cas s’emmagatzemen les dades corresponents al nom, cognom, email i telèfon dels ajudants dels tècnics d’endesa. cooperacion: taula per relacionar cada tècnic amb el seu ajundant.


24

operario: aquesta taula emmagatzema la informació corresponent al nom, cognoms, adreça, localitat i telèfon dels treballadors homologats per la empresa per realitzar les reparacions d’incidències. trabaja: la taula trabaja serveix per relacionar els operaris i les incidències que han atès

4.3.4 DISSENY DE L’APLICACIÓ WEB Una aplicació web és qualsevol aplicació a la que els usuaris accedeixen a través d’internet o d’una intranet. Aquestes aplicacións són executades en l’entorn del navegador web (com un applet de Java) o codificades amb un llenguatge que el navegador suporta (com Javascript combinat amb html) confiant l’execució. Les principals avantatges de les aplicacions web són la facilitat de mantindre-les i actualitzar-les sense la necessitat d’instal·lar cap software al client, per tant no ocupen espai al disc dur del client, poden haver-hi milers de clients però nomès cal un servidor on allotjar l’aplicació, són independents dels sistemes operatius i poden ser executades en diverses plataformes i des de qualsevol indret del món, això sí, amb accès a internet. El disseny de la l’aplicació s’ha realitzat seguint el patró MVC (Model Vista Controlador). Aquest patró d’arquitectura de software s’encarrega de separar la lògica de negoci de la intefície d’usuari i és el més utilitzat a l’hora de plantejar pàgines web degut a que facilita la seva funcionalitat, el mantenimet d’aquestes i l’escalabilitat del sistema d’una manera senzilla. En aquesta aplicació s’han realitzat tres nivells d’abstracció tal com marquen les pautes del MVC. Model: representa la lògica de negoci. Actua d’intermediari entre la base de dades i el controlador. Vista: en aquest nivell es mostra a l’usuari la informació de manera gràfica Controlador: actua d’intermediari entre la vista i el model. Aquí es controlen les interaccions dels usuaris. El controlador sol.licita dades al model i les entrega a la vista per a que aquesta les mostri de manera llegible als usuaris.


25

El funcionament bàsic de patró MVC pot resumir-se en els següents passos:

1. L’usuari realitza una petició a través de l’aplicació web

2. El controlador captura l’event. 3. Un cop capturat el controlador realitza una crida al model corresponent, efectuant

si s’escau, les modificacions pertinents sobre aquest. 4. El model serà l’encarregat d’interactuar amb la base de dades, bé sigui de manera

directa o a través d’un servei web i aquesta retona la informació al controlador. 5. El controlador rep la informació i envía a la vista. 6. La vista processa aquesta informació creant una capa per la lògica (que

s’encarrega de processar les dades) i una capa per al disseny de la interfície gràfica. La lògica de la vista, un cop processades les dades, les adapta en funció del disseny de la GUI (layout) i les entregarà a l’usuari de manera que sigui ‘humanament llegible’.

Figura 17. Patró MVC


4.3.5 DISSENY DE

Respecte al següent disseny s’ha de comentar que està principalment sobre dispositius mòbils, està dissenyada sota el propòsit RWD (el que significa que s’adapta a l’entorn de laPer tant, s’ha intentat fer un disseny senzill i clar, amb el mínim d’elementsno carregar massa l’aplicació i facilita En aquest apartat nomès s’expicaràn els elements del disseny més rellevants. Per veure totes les pantalles de la interfície gràfica es pot consultar el manual de l’aplicació Introduïnt la url corresponentAquí l’usuari entrarà el nom d’usuari i la contrasenya que se li entregarà juntament amb el manual de l’aplicació. En tot el procès de validació d’una incidènciala pantalla es mostra el logo de la empresa. Aquest logo està inclòs en un fitxer de capçalera.php, per tant si el vol modificar psubstituïr en aquest cas la foto per l’arxiu que es vulgui mostrar

Un cop validades les dades, accedim al menú principal d’incidènciesmenú està compost per botonsmenús. S’ha utilitzat la claseincidència rebutjada, la clasependent de ser finalitzada i per últim la clasetancar la sessió.


DISSENY DE LA INTERFÍCIE GRÀFICA D’USUARI

Respecte al següent disseny s’ha de comentar que està ideat per a ser utilitzat alment sobre dispositius mòbils, bé siguin tablets o telèfons mòbils.

propòsit RWD (responsive web design) o disseny web adaptableadapta a l’entorn de la pantalla amb la que l’usuari obre l’aplicació,

Per tant, s’ha intentat fer un disseny senzill i clar, amb el mínim d’elementsno carregar massa l’aplicació i facilitar així la utilització d’aquesta en pantalles petites.

En aquest apartat nomès s’expicaràn els elements del disseny més rellevants. Per veure totes les pantalles de la interfície gràfica es pot consultar el manual de l’aplicació

corresponent al navegador web accedim al menú de loguinAquí l’usuari entrarà el nom d’usuari i la contrasenya que se li entregarà juntament amb el

. En tot el procès de validació d’una incidència, a la part superior de el logo de la empresa. Aquest logo està inclòs en un fitxer de

si el vol modificar per qualsevol altre element nomès caldrà substituïr en aquest cas la foto per l’arxiu que es vulgui mostrar.

Figura 18. Pantalla de loguin

Un cop validades les dades, accedim al menú principal d’incidències (figura 19)

per botons de diferents estils CSS per facilitar visualment els diferents S’ha utilitzat la clase class="btn btn-primary" per introduïr una nova incidència o una

incidència rebutjada, la clase class="btn btn-info" per obrir alguna incidència que resta pendent de ser finalitzada i per últim la clase class="btn btn-danger" pel botó corresponent a

Figura 19. Menú principal


26

D’USUARI

per a ser utilitzat uin tablets o telèfons mòbils. L’aplicació

o disseny web adaptable, que l’usuari obre l’aplicació,

Per tant, s’ha intentat fer un disseny senzill i clar, amb el mínim d’elements possibles per així la utilització d’aquesta en pantalles petites.

En aquest apartat nomès s’expicaràn els elements del disseny més rellevants. Per veure totes les pantalles de la interfície gràfica es pot consultar el manual de l’aplicació Annex 1

accedim al menú de loguin (figura 18). Aquí l’usuari entrarà el nom d’usuari i la contrasenya que se li entregarà juntament amb el

a la part superior de el logo de la empresa. Aquest logo està inclòs en un fitxer de

nomès caldrà

(figura 19). Aquest per facilitar visualment els diferents

per introduïr una nova incidència o una ncidència que resta pel botó corresponent a


27

Si cliquem sobre el botó [Nueva Avería General] s’ens obrirà la següent pantalla: Sota de la capçalera podem veure un Breadcrumb (molla de pà) o fil d’Ariadna. És un sistema d’ajuda a la navegació. Aquesta ajuda apareix en totes les finestres de l’aplicació i ens indica en quina pàgina ens trobem. També ens permet tornar al menú d’incidències clicant sobre l’enllaç que conté (Incidencias).

Si estem omplint les dades d’una incidència, el fil d’aridana ens mostra, a part del vincle per tornar al menú d’incidències i la finestra a la que s’està accedint, el número de la incidència sobre la que s’està treballant.

Omplint els camps corresponents i clicant al botó [Enviar] és genera una nova incidència a la base de dades. L’aplicació validarà alguns camps concrets i ens avisarà si no s’han omplert o s’han omplert erròniament. El camps de Nº d’incidència no pot estar buit ni omplert amb espais en blanc. El camp dirección també ha d’estar omplert i el telèfon tampoc pot estar buit ni contindre caràcters no numèrics. Si no es cumpleixen aquest requisits l’aplicació no ens deixarà enviar la incidència. Clicant sobre el botó [Volver] tornem al menú anterior.

Figura 20. Pantalla per introduïr una nova incidència

Figura 21. Exemple Breadcrumb o fil d’Ariadna

Figura 22. Exemple Breadcrumb o fil d’Ariadna quan s’introdueix una incidència

Figura 23.Error de validació d’una incidència sense número


28

Si s’ha generat una incidència nova s’ens obrirà la següent pàgina (veure figura24). En vermell es mostren les diferents parts que composen la vista:

Des del següent menú (veure figura 25), podem navegar per les diferent pàgines a les quals s’haurà d’introduïr informació relacionada amb la nova incidència generada. Per navegar per aquestes pàgines s’utilitzen els tabs que hi ha a part superior. A la pantalla també es mostra en tot moment quin tab tenim desplegat i sobre quina incidència estem treballant.

Figura 25. Exemple de tabs de navegació

S’ha decidit escriure nomès la inicial a cada tab per a que s’hi s’executa l’aplicació des d’un movil, els tabs quedin ben distribuits i no ocupin molt d’espai. Els tabs són els següents: E - Datos Eléctricos

A - Elementos Averiados

C - Causas

M - Material

O - Operarios

F - Fotografías

X- Cerrar/Finalizar

Figura 24. Parts d’una vista.

Figura 26. Vista executada des d’un telèfon


29

Al tab E-Datos Electricos s’han d’introduïr la informació corresponent a la xarxa elèctrica que subministra tensió a la instal.lació afectada i el tècnic el qual gestiona la xarxa. Un cop introduïts aquests camps, podem clicar sobre el botó [Guardar] i s’actualitzaràn aquest camps a la base de dades sobre la incidència oberta, la qual també es pot visualitzar al peu de pàgina. El footer o peu de pàgina mostrarà la següent informació: A banda de la incidència també es pot visualitzar el nom, cognom i dni de l’operari que està validant la incidència. Per als exemples s’utilitza informació fictícia però la real s’extreu del loguin i de la taula d’operaris de la base de dades. Aquesta informació és extensible a totes les vistes. A continuació es mostra la pàgina que correspon al tab A-Averiados (figures 28 i 29). En aquesta pàgina s’han d’introduïr els tipus d’elements avariats que hi ha a la incidència i els elements concrets que estàn avariats. Això es fa desplegant els dos selectors de la pantalla. Els selectors estàn vinculats, és a dir, que el segon mostrarà la informació corresponent a la selecció que es faci al primer selector. Per tant, s’ha d’escollir una opció del primer selector per a poder veure les opcions del segon selector. Es pot modificar l’element Fent clic al botó [Guardar] s’inserten aquest elements a la incidència oberta.

Figura 27. Exemple de footer

Figura 28. Vista de la pantalla ‘Elementos Averiados’

Figura 29. Vista de la pantalla ‘Elementos Averiados’ amb selector desplegat


30

Quan es guarda algun element, aquest es mostra en una llista a continuació dels selectors. Si s’ha introduït un element erroni nomès cal polsar sobre el botó Borrar.

Figura 30. Vista de la pantalla ‘Elementos Averiados’ amb un element seleccionat Clicant a la següent pestanya del tab accedim a la pàgina de causes. El disseny és exàctament el mateix que el d’elements avariats però per a no fer-ho tant repetitiu, les captures de pantalla no es mostraràn. (Es poden consultar al manual de l’annex 1) En aquesta pestanya el que es selecciona són un tipus de causa com per exemple atmosfèriques i les causa relacionada amb el tipus, per exemple vent. La següent pestanya del tab correspon a la vista del materials. Aquí és seleccionen els materials i la quantitat de cada material utilitzats per a realitzar la reparació de la incidència. A mesura que s’afegeixen materials es van mostrant en una llista a la part inferior. Es pot esborrar una entrada de material polsant sobre el botó Borrar

Figura 31. Vista de la pantalla ‘Materiales’ amb alguns materials sel·leccionats


31

Ara toca el torn de la selecció del operaris. Desplegant la pestanya ‘O’ accedim al selector d’operaris (figura 32). Aquí s’ha de seleccionar el nom de l’operari que ha realitzat la reparació de la incidència i les hores d’intervenció que ha estat. Si n’hi ha més d’un, s’ha de seleccionar el primer i clicar sobre el botó [Guardar] per seguidament afegir un altre. Al igual que a les pestanyes anterior es van afegint els operaris amb les hores d’intervenció en una llista. La diferència és que nomès podrà esborrar les hores introduïdes a la llista l’usuari que les ha introduït. Aquesta restricció s’aplica per evitar que un operari esborri les hores d’un altre operari degut a que tots els operaris tenen accès a les incidències obertes i que estàn pendents de finalitzar. La següent pestanya correspon a la secció Fotografies. L’objectiu d’aquesta finestra es poder adjuntar fotografies a la incidència. Si cliquem al botó [Seleccionar archivo] podem escollir entre seleccionar una fotografia guardada al carret del dispositiu mòbil o fer-ne una nova obrint l’aplicació de càmera fotogràfica del dispositiu. Si s’utilitza l’aplicació des d’un ordinador sense càmera nomès es podrà escollir l’opció de carregar una fotografia guardada a l’ordinador. Les fotos que es vagin guardant s’aniràn visualitzant en una taula a la part inferior de la finestra. Es pot esborrar qualsevol fotografia mitjançant el botó [Borrar]. Les fotos adjuntades a la incidència es guarden en una carpeta del servidor.

Figura 32. Vista de la pantalla ‘Operarios’

Figura 33. Vista de la pantalla ‘Fotografias” amb una foto carregada


32

L’última pestanya correspon al tancament. Aquí nomès s’ha de seleccionar la data i l’hora de finalització de la incidència i si es vol fical algún comentari hi ha un camp de text per a fer-ho. Clicant al botó [Finalizar Incidencia] es finalitza totalment. Si estaba en la llista d’incidències obertes s’esborra de la llista. Clicant al vincle enviar correu se m’envia un correu amb la informació principal de la incidència. Tornant al menú principal i clicant sobre el botó [Abrir Averia] s’ens obre una pàgina on es mostra un llistat amb totes les incidències que es troben obertes i que no han estat finalitzades. Clicant sobre el número d’una incidència de la llista o a sobre el botó [Abrir] accedim a la mateixa i podem actualitzar la informació que vulguem. Si finalitzem la incidència aquesta s’esborra de la llista.

Figura 35. Vista de la pantalla ‘Abrir Avería’

Figura 34. Vista de la pantalla ‘Cerrar Incidencia’


33

L’últim menú accessible d’incidències és el que correspon a les incidències rebutjades.

Figura 36. Vista de la pantalla ‘Avería Rechazada’ Aquí s’ha d’introduïr el número d’incidència que es vol rebutjar, la data en la qual s’ha rebut la incidència i el motiu pel qual es rebutja la incidència. El motiu es pot seleccionar obrint un selector on hi figuren els principals motius de rebuig o també especificant-ho al camp de text observaciones. El selector d’operari està deshabilitat però mostra l’operari que s’ha validat a l’aplicació. Això es degut a que en una incidència rebutjada nomès l’atendrà un operari i serà el que la introdueixi a la base de dades. Pel que fa als selector de dates i hores, en un principi s’utilitzava una funció anomenada datapicker() que el que feia era mostrar un calendari però per facilitat i comoditat d’utilització s’han canviat per selectors de tipus rodeta, marcant per defecte la data i l’hora actuals. Primer Disseny Disseny actual

Figura 37. Calendari Datapicker Figura 38. Vista nous selectors de data i hora


34

4.4 DESENVOLUPAMENT

4.4.1 DESENVOLUPAMENT DEL SERVIDOR

El primer de tot és instal.lar un disc dur a la carcassa del servidor. Els disc durs de sobretaula estàn dissenyats per un rendiment i per una fiabilitat òptimes dins d’un

ordinador personal d’escriptori. Encara que seria una alternativa assequible, aquests discs tenen una elevat risc de pèrdues de dades i d’errors dins un d’un sistema NAS (Network Attached Storage o sistema d’emmagatzematge en xarxa) el qual funciona contínuament. Dins d’aquests errors es poden produïr problemes de: - Compatibilitat : els disc durs de sobretaula no sempre estàn testejats per ser compatibles amb NAS i poden presentar algún problema d’integració.

- Fiabilitat : la majoría de disc durs de sobretaula no estàn dissenyats per altes

temperatures de funcionament o per entorns operatius 24x7, sent per tant menys fiables.

- Control de recuperació d’errors: els discs de sobretaula no estàn dissenyats per entorns RAID i tenen controls que preveuen que el controlador RAID, ofereixi suport en el cas de que es produeixi un error, abandonant el RAID passat un periode de temps. Reconstruïr un RAID requereix d’un temps i pot tindre un impacte significatiu en temps d’activitat i productivitat.

- Soroll i vibracions: els disc de sobretaula estàn típicament dissenyats per aplicacions de disc únic i no estàn optimitzats per a sistemes multidisc, tenint nivells més elevats de vibracions i sorolls. Quan aquests discs s’afegeixen a un sistema NAS, la vibració addicional por reduïr la duració dels discs i la seva fiabilitat.

Es per intentar preveure aquests problemes el que fa que em decanti per utilitzar un disc dur dissenyat exclusivament per a un sistema NAS. El disc escollit és un Western Digital Red i és específic per a utilitzacions en sistemes NAS domèstics o de petita oficina. Segons informació del fabricant aquest disc ha estat testejat satisfactòriament en entorns operatius de 24 hores x 7 díes i té una garantía de 3 anys. Permet crear un núvol personal sense cuotes mensuals i es pot emmagatzemar còpies de seguretat de contingut multimèdia, arxius o sistemes i accedir a ells de manera segura a través de la xarxa desde qualsevol ordinador.

Figura 39. Instal·lació NAS

Figura 40. Disc Dur


35

ESPECIFICACIONS DEL DISC DUR model WD40EFRX

Figura 41. Especificacions del disc WD40EFRX. Informació extreta i traduïdade http://support.wd.com

Especificacions Model WD40EFRX Conexions SATA a 6 Gb/s Capacitat formateig 2 TB Format 3,5 pulgadas Format avançat (AF) SíConforme con RoHS Sí

RendimientVelocitat de transferència de dades (máx.) Velocitat de conexió Velocitat de transferència interna

6 Gb/s150 MB/s

Caché (MB) 64Velocitat de rotació (RPM) IntelliPower

Fiabilitat/integritat de dadesCicles de càrrega/descàrrega 600.000Errors de lectura no recuperables per bits llegits <1 en 1014

MTBF (hores) 1.000.000Garantía limitada (anys) 3

Administració d'energia12 V CC ± 10% (A, pic) 1,755 V CC ± 10% (A, pic) -Requisits de consum energètic mig (W) Lectura/escriptura 4,5 Inactiu 3,3 En espera/hibernació 0,4

Especificacions ambientalsTemperatura (°C)9 Operativa De 0 a 70 No operativa De -40 a 70Impacte (Gs) En funcionamient (2 ms, lectura/escriptura) 30 En funcionamient (2 ms, lectura) 65 Sense funcionar (2 ms) 250Acústica (dBA)10 Inactiu 25 Búsqueda (mitja) 28

Dimensions físiquesAlçada (pulg./mm) 1,028/26,1Longitud (pulg./mm) 5,787/147 Amplada (pulg./mm, ± 0,01 pulg.) 4/101,6 Pes (lb/kg, ± 10%) 1,50/0,68


36

Un cop instal·lat el hardware del NAS Synology, l’hem de conectar al router i a la xarxa elèctrica i es pot començar a configurar el servidor.

1. El primer que hem de fer és encendre el NAS i instal·lar l’aplicació Synology Assistant que s’inclou al CD. Executem l’aplicació i ens detecta la unitat instal·lada.

2. Accedim a la secció de descàrregues de la pàgina www.synology.com i es descarrega la última versió del sistema operatiu: A la data d’avui és la DSM 5.0-4482

3. A través del Synology Assistant volquem l’arxiu amb extensió .pat descarregat al DiskStation per a continuació realitzar la instal·lació del sistema operatiu.

4. Si la instal·lació s’ha efectuat correctament, a través del Synology Assistant podem accedir al disktation amb el botó conectar. S’ens obrirà una finestra del navegador web que tinguem configurat per defecte.

5. El primer cop que accedim al servidor s’obrirà un assistent per configurar el compte de l’administrador (admin) i el password.

Figura 42. Detecció DiscStation


37

6. Configurem els paràmetres bàsics del servidor:

a. Paràmetres generals Panel de control -> Red -> General

Figura 43. Configuració DNS

b. Asignem una ip fixa

i. Panel de control -> Red -> Interfaz de red -> Lan

c. Configurem el DDNS (Dynamic DNS) per poder accedir des de l’exterior de la xarxa local. Això es realitza des del

Panel de control -> acceso externo -> agregar

Figura 44. Configuració ip

Figura 45. Configuració DDNS


38

d. Creem una carpeta compartida

e. Habilitem els següents serveis necessaris:

Activem els checks del Servidor web:

Panel de control -> Servicios Web

I creem un host virtual que no mostrare per seguretat

f. Per últim accedim al panell de control del router i habilitem el servei DMZ

(DeMilitarized Zone) per redireccionar el tràfic provinent d’internet al nostre servidor

Figura 47. Configuració Router

Figura 46. Configuració serveis web


39

4.4.2 DESENVOLUPAMENT DE LA BASE DE DADES

Per al desenvolupament de la base de dades m’he ajudat d’una eina anomenada MySQL

Workbench. El primer de tot ha estat traspassar el disseny relacional del paper a

l’ordinador. He creat les taules equivalents a les entitats, amb les seves claus primàries,

els atributs corresponents i les relacions amb les altres entitats.

El motor triat a l’hora de la creació de la base de dades ha estat InnoDB. El principal

avantatge respecte a altres sistemes proporcionats per MySQL és que proporciona

transaccions que compleixen amb ACID (Atomicitat, Consistència, Aïllament (Isolation) i

Definitivitat) i també suporta claus foranes (integritat referencial declarativa).

Les principals característiques d’InnoDB són:

• InnoDB es recupera d'una caiguda del sistema reemplaçant els seus fitxers de

log.

• InnoDB utilitza una aproximació amb un cost fix en temps i ofereix un millor

rendiment i una millor disponibilitat i seguretat a mesura que la base de dades

creix.

• InnoDB emmagatzema les files físicament ordenades per la clau. Els beneficis

de velocitats són clars quan s'utilitza la clau primària. Per altra banda inserir

registres en un ordre diferent al de la clau primària triga força més temps.

• InnoDB requereix més espai de disc i més memòria RAM que uns altres

motors.

Figura 48. Disseny de la base de dades amb MySQL WORKBENCH


40

Un cop fixat del model amb les taules, atributs, relacions… i mitjançant l’ opció

d’ingenieria directa, s’obté un script amb les sentencies de creació de la base de dades, les

taules que hi formen part, les relacions entre entitats ètc…

L’script generat a partir del model ER és el següent:

SET @OLD_UNIQUE_CHECKS=@@UNIQUE_CHECKS, UNIQUE_CHECKS=0; SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0; SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='TRADITIONAL,ALLOW_INVALID_DATES' ; -- ----------------------------------------------------- -- Schema bdray -- ----------------------------------------------------- CREATE SCHEMA IF NOT EXISTS `prueba` DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci ; USE `bdray`; -- ----------------------------------------------------- -- Table `bdray`.`TIPO_CAUSA` -- ----------------------------------------------------- CREATE TABLE IF NOT EXISTS ̀bdray`.`TIPO_CAUSA` ( ìdtipocausa` INT NOT NULL, `tipo_causa` VARCHAR(45) NOT NULL, PRIMARY KEY (ìdtipocausa`)) ENGINE = InnoDB; -- ----------------------------------------------------- -- Table `bdray`.`CLIENTE` -- ----------------------------------------------------- CREATE TABLE IF NOT EXISTS ̀bdray`.`CLIENTE` ( ìdcliente` INT NOT NULL AUTO_INCREMENT, `nombre` VARCHAR(45) NOT NULL, àpellido1cl` VARCHAR(45) NOT NULL, àpellido2cl` VARCHAR(45) NOT NULL, `telf` INT NOT NULL, PRIMARY KEY (ìdcliente`)) ENGINE = InnoDB; -- ----------------------------------------------------- -- Table `bdray`.ÌNCIDENCIA` -- ----------------------------------------------------- CREATE TABLE IF NOT EXISTS ̀bdray`.ÌNCIDENCIA` ( ìdincidencia` INT NOT NULL AUTO_INCREMENT, `numero_incidencia` INT NOT NULL, `fecha_asig` DATE NOT NULL, `fecha_cierre` DATE NOT NULL, `direccion` VARCHAR(45) NOT NULL,


41

`localidad` VARCHAR(45) NOT NULL, ìdtipocausa` INT NOT NULL, ìdcliente` INT NOT NULL, PRIMARY KEY (ìdincidencia`), INDEX `fk_idcausa_idx` (ìdtipocausa` ASC), INDEX `fk_idcliente_idx` (ìdcliente` ASC), CONSTRAINT `fk_idtipocausa` FOREIGN KEY (ìdtipocausa`) REFERENCES `bdray`.`TIPO_CAUSA` (ìdtipocausa`) ON DELETE CASCADE ON UPDATE CASCADE, CONSTRAINT `fk_idcliente` FOREIGN KEY (ìdcliente`) REFERENCES `bdray`.`CLIENTE` (ìdcliente`) ON DELETE CASCADE ON UPDATE CASCADE) ENGINE = InnoDB; -- ----------------------------------------------------- -- Table `bdray`.ÒPERARIO` -- ----------------------------------------------------- CREATE TABLE IF NOT EXISTS ̀bdray`.ÒPERARIO` ( ìdoperario` INT NOT NULL AUTO_INCREMENT, `nombre_operario` VARCHAR(45) NOT NULL, àpellido1 ` VARCHAR(45) NOT NULL, àpellido2 ` VARCHAR(45) NOT NULL, `direccion` VARCHAR(45) NOT NULL, `localidad` VARCHAR(45) NOT NULL, `telefono` INT NOT NULL, PRIMARY KEY (ìdoperario`)) ENGINE = InnoDB; -- ----------------------------------------------------- -- Table `bdray`.`TIPO_ELEMENTO` -- ----------------------------------------------------- CREATE TABLE IF NOT EXISTS ̀bdray`.`TIPO_ELEMENTO` ( ìdtipoelemento` INT NOT NULL AUTO_INCREMENT, `tipo_elemento` VARCHAR(45) NOT NULL, PRIMARY KEY (ìdtipoelemento`)) ENGINE = InnoDB; -- ----------------------------------------------------- -- Table `bdray`.`MATERIAL` -- ----------------------------------------------------- CREATE TABLE IF NOT EXISTS ̀bdray`.`MATERIAL` ( ìdmaterial` INT NOT NULL AUTO_INCREMENT, `codigo_material` INT NOT NULL, `nombre` VARCHAR(45) NOT NULL, PRIMARY KEY (ìdmaterial`)) ENGINE = InnoDB; -- -----------------------------------------------------


42

-- Table `bdray`.`TECNICO_ENDESA` -- ----------------------------------------------------- CREATE TABLE IF NOT EXISTS ̀bdray`.`TECNICO_ENDESA` ( ìdtecnico_endesa` INT NOT NULL AUTO_INCREMENT, `nombre_tecnico` VARCHAR(45) NULL, àpellidotec` VARCHAR(45) NULL, `codigo` VARCHAR(45) NULL, èmail` VARCHAR(45) NULL, `telf` INT NULL, PRIMARY KEY (ìdtecnico_endesa`)) ENGINE = InnoDB; ----------------------------------------------------- -- Table `bdray`.`CENTRO_TRANSFORMADOR` -- ----------------------------------------------------- CREATE TABLE IF NOT EXISTS ̀bdray`.`CENTRO_TRANSFORMADOR` ( ìdtrafo` INT NOT NULL AUTO_INCREMENT, `codigo_trafo` VARCHAR(10) NOT NULL, ìdtecnico` INT NOT NULL, PRIMARY KEY (ìdtrafo`), INDEX `fk_idtecnico_idx` (ìdtecnico` ASC), CONSTRAINT `fk_idtecnico` FOREIGN KEY (ìdtecnico`) REFERENCES `bdray`.`TECNICO_ENDESA` (ìdtecnico_endesa`) ON DELETE CASCADE ON UPDATE CASCADE) ENGINE = InnoDB; -- ----------------------------------------------------- -- Table `bdray`.ÀYUDANTE` -- ----------------------------------------------------- CREATE TABLE IF NOT EXISTS ̀bdray`.ÀYUDANTE` ( ìdayudante` INT NOT NULL AUTO_INCREMENT, `nombre_ayudante` VARCHAR(45) NOT NULL, àpellidoay` VARCHAR(45) NOT NULL, èmail` VARCHAR(45) NOT NULL, `telf` INT NOT NULL, ìdtecnico` INT NOT NULL, PRIMARY KEY (ìdayudante`), INDEX `fk:_idtecnico_idx` (ìdtecnico` ASC), CONSTRAINT `fk_idtecnico2` FOREIGN KEY (ìdtecnico`) REFERENCES `bdray`.`TECNICO_ENDESA` (ìdtecnico_endesa`) ON DELETE CASCADE ON UPDATE CASCADE) ENGINE = InnoDB; -- -----------------------------------------------------


43

-- Table `bdray`.`trabaja` -- ----------------------------------------------------- CREATE TABLE IF NOT EXISTS ̀bdray`.`trabaja` ( ìdoperario` INT NOT NULL, ìdincidencia` INT NOT NULL, `fecha_ini` DATETIME NULL, `fecha_fin` DATETIME NULL, PRIMARY KEY (ìdoperario`, ìdincidencia`), INDEX `fk_idincidencia_idx` (ìdincidencia` ASC), CONSTRAINT `fk_operario` FOREIGN KEY (ìdoperario`) REFERENCES `bdray`.ÒPERARIO` (ìdoperario`) ON DELETE CASCADE ON UPDATE CASCADE, CONSTRAINT `fk_incidencia2` FOREIGN KEY (ìdincidencia`) REFERENCES `bdray`.ÌNCIDENCIA` (ìdincidencia`) ON DELETE CASCADE ON UPDATE CASCADE) ENGINE = InnoDB; -- ----------------------------------------------------- -- Table `bdray`.ìncidencia_rechazada` -- ----------------------------------------------------- CREATE TABLE IF NOT EXISTS ̀bdray`.ìncidencia_rechazada` ( ìdincidencia` INT NOT NULL, `motivo` VARCHAR(45) NULL, PRIMARY KEY (ìdincidencia`), CONSTRAINT `fk_incidencia3` FOREIGN KEY (ìdincidencia`) REFERENCES `bdray`.ÌNCIDENCIA` (ìdincidencia`) ON DELETE CASCADE ON UPDATE CASCADE) ENGINE = InnoDB; -- ----------------------------------------------------- -- Table `bdray`.`CUADRO` -- ----------------------------------------------------- CREATE TABLE IF NOT EXISTS ̀bdray`.`CUADRO` ( ìdcuadro` INT NOT NULL AUTO_INCREMENT, `codigocuadro` INT NOT NULL, PRIMARY KEY (ìdcuadro`)) ENGINE = InnoDB; -- -----------------------------------------------------


44

-- Table `bdray`.`CAUSA` -- ----------------------------------------------------- CREATE TABLE IF NOT EXISTS ̀bdray`.`CAUSA` ( ìdcausa` INT NOT NULL, `nombre_causa` VARCHAR(45) NOT NULL, ìdtipocausa` INT NOT NULL, PRIMARY KEY (ìdcausa`), INDEX `fk_idtipocausa2_idx` (ìdtipocausa` ASC), CONSTRAINT `fk_idtipocausa2` FOREIGN KEY (ìdtipocausa`) REFERENCES `bdray`.`TIPO_CAUSA` (ìdtipocausa`) ON DELETE CASCADE ON UPDATE CASCADE) ENGINE = InnoDB; -- ----------------------------------------------------- -- Table `bdray`.ÈLEMENTO` -- ----------------------------------------------------- CREATE TABLE IF NOT EXISTS ̀bdray`.ÈLEMENTO` ( ìdelemento` INT NOT NULL AUTO_INCREMENT, `nombre_elemento` VARCHAR(45) NOT NULL, ìdtipoelemento` INT NOT NULL, PRIMARY KEY (ìdelemento`), INDEX `fk_idtipoelemento2_idx` (ìdtipoelemento` ASC), CONSTRAINT `fk_idtipoelemento2` FOREIGN KEY (ìdtipoelemento`) REFERENCES `bdray`.`TIPO_ELEMENTO` (ìdtipoelemento`) ON DELETE CASCADE ON UPDATE CASCADE) ENGINE = InnoDB; -- ----------------------------------------------------- -- Table `bdray`.`SALIDA` -- ----------------------------------------------------- CREATE TABLE IF NOT EXISTS ̀bdray`.`SALIDA` ( ìdsalida` INT NOT NULL AUTO_INCREMENT, `codigo_salida` INT NOT NULL, PRIMARY KEY (ìdsalida`)) ENGINE = InnoDB; -- ----------------------------------------------------- -- Table `bdray`.àbastece` -- ----------------------------------------------------- CREATE TABLE IF NOT EXISTS ̀bdray`.àbastece` ( ìdincidencia` INT NOT NULL AUTO_INCREMENT, ìdtrafo` INT NOT NULL, ìdcuadro` INT NOT NULL, ìdsalida` INT NOT NULL, PRIMARY KEY (ìdincidencia`, ìdtrafo`, ìdcuadro`), INDEX `fk_idcuadro_idx` (ìdcuadro` ASC), INDEX `fk_idtrafo1_idx` (ìdtrafo` ASC),


45

INDEX `fk_idsalida_idx` (ìdsalida` ASC), CONSTRAINT `fk_idtrafo1` FOREIGN KEY (ìdtrafo`) REFERENCES `bdray`.`CENTRO_TRANSFORMADOR` (ìdtrafo`) ON DELETE CASCADE ON UPDATE CASCADE, CONSTRAINT `fk_idincidencia` FOREIGN KEY (ìdincidencia`) REFERENCES `bdray`.ÌNCIDENCIA` (ìdincidencia`) ON DELETE CASCADE ON UPDATE CASCADE, CONSTRAINT `fk_idcuadro` FOREIGN KEY (ìdcuadro`) REFERENCES `bdray`.`CUADRO` (ìdcuadro`) ON DELETE CASCADE ON UPDATE CASCADE, CONSTRAINT `fk_idsalida` FOREIGN KEY (ìdsalida`) REFERENCES `bdray`.`SALIDA` (ìdsalida`) ON DELETE NO ACTION ON UPDATE NO ACTION) ENGINE = InnoDB; -- ----------------------------------------------------- -- Table `bdray`.`REQUIERE` -- ----------------------------------------------------- CREATE TABLE IF NOT EXISTS ̀bdray`.`REQUIERE` ( ìdincidencia` INT NOT NULL, ìdmaterial` INT NOT NULL, `cantidad` INT NOT NULL, PRIMARY KEY (ìdincidencia`, ìdmaterial`), INDEX `fk_idincidencia_idx` (ìdincidencia` ASC), INDEX `fk_mat_idx` (ìdmaterial` ASC), CONSTRAINT `fk_incidencia20` FOREIGN KEY (ìdincidencia`) REFERENCES `bdray`.ÌNCIDENCIA` (ìdincidencia`) ON DELETE CASCADE ON UPDATE CASCADE, CONSTRAINT `fk_mat` FOREIGN KEY (ìdmaterial`) REFERENCES `bdray`.`MATERIAL` (ìdmaterial`) ON DELETE CASCADE ON UPDATE CASCADE) ENGINE = InnoDB; -- ----------------------------------------------------- -- Table `bdray`.ÀFECTA` -- ----------------------------------------------------- CREATE TABLE IF NOT EXISTS ̀bdray`.ÀFECTA` ( ìdincidencia` INT NOT NULL, ìdtipoelemento` INT NOT NULL, PRIMARY KEY (ìdincidencia`, ìdtipoelemento`),


46

INDEX `fk_afecta_tipoelemento_idx` (ìdtipoelemento` ASC), CONSTRAINT `fk_afecta_incidencia` FOREIGN KEY (ìdincidencia`) REFERENCES `bdray`.ÌNCIDENCIA` (ìdincidencia`) ON DELETE CASCADE ON UPDATE CASCADE, CONSTRAINT `fk_afecta_tipoelemento` FOREIGN KEY (ìdtipoelemento`) REFERENCES `bdray`.`TIPO_ELEMENTO` (ìdtipoelemento`) ON DELETE CASCADE ON UPDATE CASCADE) ENGINE = InnoDB; -- ----------------------------------------------------- -- Table `bdray`.`CONTIENE` -- ----------------------------------------------------- CREATE TABLE IF NOT EXISTS ̀bdray`.`CONTIENE` ( ìdincidencia` INT NOT NULL, ìdelemento` INT NOT NULL, PRIMARY KEY (ìdincidencia`, ìdelemento`), INDEX `fk_contiene_elem_idx` (ìdelemento` ASC), CONSTRAINT `fk_contiene_inc` FOREIGN KEY (ìdincidencia`) REFERENCES `bdray`.ÌNCIDENCIA` (ìdincidencia`) ON DELETE CASCADE ON UPDATE CASCADE, CONSTRAINT `fk_contiene_elem` FOREIGN KEY (ìdelemento`) REFERENCES `bdray`.ÈLEMENTO` (ìdelemento`) ON DELETE CASCADE ON UPDATE CASCADE) ENGINE = InnoDB; SET SQL_MODE=@OLD_SQL_MODE; SET FOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS; SET UNIQUE_CHECKS=@OLD_UNIQUE_CHECKS;


47

Ja nomès queda executar l’script a la mateixa aplicació i s’ens general la base de dades automàticament.

Si tot funciona correctament sortiràn tots els checks en verd i es crearà la base de dades, del contrari, apareixerà un check vermell indicant un tipus d’error (per exemple si hem posat el nom d’alguna clau forànea repetit) i no deixarà crear la base de dades. Si volem gestionar la nostra base de dades (inserir taules, registres, etc) amb aquest gestor de base de dades, s’ha de crear una conexió Cliquem sobre el signe ‘+’ a MySQL connection

Figura 49. Execució script per crear la base de dades

Figura 50. MySQL connections


48

S’obrirà la finestra on hem d’omplir els següents camps per fer la connexió:

Connection Name: Camp per donar-li un nom concret a la connexió Hostname: Aquí s’ha de ficar el nom del servidor o la seva Ip Port: 3306 Port per bases de dades MySQL Username: Usuari amb el que ens volem conectar al servidor, ha d’estar configurat abans al servidor per a poder utilitzar-se Password: El password de l’usuari Default Schema: Camp per si volem utilitzar un esquema per defecte, si ho deixem en blanc i en tenim varis després es pot triar un.

Figura 51. Configuració connexió al servidor


49

4.4.3 DESENVOLUPAMENT DE L’APLICACIÓ WEB

L’aplicació web realitzada està estructurada en diferents carpetes. S’ha estructurat seguint el model vista controlador, tal i com s’ha decidit a la part de disseny de l’aplicació.

A la figura de l’esquerra es pot observar l’arbre de directoris del projecte. Les carpetes home, homes i public són carpetes allotjades al servidor que no s’utiliten en aquest projecte. Dins de la carpeta web s’han guardat tots els arxius relacionats amb el projecte i està configurada per a que mostri el seu contingut quan s’accedeix a la url de l’aplicació a través d’un navegador web. A la carpeta controladores s’emmagatzemen les clases creades i els arxius que contenen les funcions que realitzen alguna crida al servidor A la carpeta imatges es troben guardades totes les imatges que es mostren en les vistes i una carpeta uploads on es guardaràn les fotografies que es carreguin amb l’aplicació i que estaràn associades a les incidències.

A continuació, a la carpeta requires es troben tots els arxius necessaris per definir l’estil de aplicació, les funcions javascript, les funcions jquery etc. I per últim, a la carpeta vistas es mostren tots els arxius que formen part de les vistes de l’aplicació

Per garantir el compromís de confidencialitat de la divulgació de dades de l’empresa nomès s’explicaràn els principals arxius php de l’aplicació, mostrant nomès un mínim del codi de la programació.

Figura 52. Arbre de directoris


50

Principals arxius de l’aplicació Incidencia.class.php Aquesta classe s’encarrega de l’obtenció i manegament de totes les dades relacionades amb una incidència, conté els mètodes per afegir o esborrar elements a la base de dades o per llegir-ne d’altres introduïts

Figura 53. Incidencia.class.php

conexionBD.php Aquest arxiu conté la classe conexiónBD. Conté els mètodes rel·lacionats amb les connexions a la base de dades.

Figura 54. ConexionBD.php


51

acciones.php Aquest arxiu rep les variables que s’envien dels formularis i en funció de les que rep, les envia als mètodes corresponents de la clase incidencia.php. També conté la funció mail() per a que s’envii un un correu electrònic quan es finalitzi una incidència.

Requires Cabecera.php En aquest arxiu s’emmagatzema la capçalera de l’aplicació, actualment es troba el logotip de l’empresa. És un arxiu útil perquè permet canviar el logo a totes les vistes des d’aquest arxiu nomès canviant la imatge que logo001.png per la que vulguem

Figura 55. Capçalera.php

Footer_averia.php Aquest arxiu ens mostra al peu de la vista per la qual estiguem navegant el número d’incidencia amb la qual estem treballant, la data d’asignació, i el nom cognom i dni de l’operari que està validant les dades.

Figura 56. Footer o peu de pàgina


52

Functions.js Aquest arxiu conté interfícies d’usuari com la del calendari

Include.php En aquest arxiu es troben tots els requires necessaris per al funcionament de l’aplicació. Exemple de require

Vistes La majoría de les vistes que formen part d’aquesta aplicació estàn formades pels mateixos components i segueixen més o menys la mateixa estructura. Comencen amb la definició següent, per tal de que estiguin diponibles els arxius necessaris per al funcionament

Continuen amb la declaració del tipus de document, per informar al navegador de quina especificació de HTML utilitzem i afegim les etiquetes meta dins de la capçalera per primer, asegurar la compatibilitat dels caràcters del nostre alfabet, segon, per a que si s’utilitza explorador internet explorer és mostri en la versió de màxim nivell de compatibilitat i per últim per a que es mostri en l’escala correcte si s’accedeix a l’aplicació del d’un mòbil per exemple.

Figura 57. Funció calendari a Functions.js


53

Figura 58. Declaració tipus de document

A continuació és declaren els recursos vinculats per exemple un full d’estil de jquery

Funcionament de les vistes Dins del principalment hi ha un formulari i depenent de la vista en la que ens trobem apareixen selectors, taules, quadres de text, inputs etc. Cada selector està omplert amb la informació del camp de la taula corresponent de la base de dades i els quadres de text s’ompliràn amb la informació que s’introdueixi per teclat. Aquesta informació s’emmagatzemarà a la base de dades a les taules corresponents. Per altra banda també s’han inclòs botons per facilitat la navegació de l’usuari per la pàgina. Quan el botó [Enviar] es clicat per un usuari, el mètode onClick crida a la funció validarForm() i retorna true o false en funció del resultat de la verificació d’alguns camps com per exemple que el camp adreça del següent formulari no sigui nul ni s’ompli amb espais en blanc.

Figura 59. Vincle de full d’estil JQueryUi

Figura 60. Nova incidència. En remarcat es mostra un camp que es validarà


54

La funció que realitza aquesta verificació es mostra a continuació:

Aquesta funció recull el valor del camp adreça del formulari identificat amb el nom dirección i realitza una comparació, en aquest cas, compara si el valor és ‘0’ o ‘ ‘. Segons el resultat fa el submit() o no. Si realitza el submit() s’envia el formulari (juntament amb una variable oculta a l’usuari) a l’arxiu acciones.php per al seu tractament. En funció del valor d’aquesta variable i del formulari enviat s’executaràn les funcions correponents per afegir una incidència per exemple o obrir-ne una que no estigui finalitzada etc. I per últim, abans del final del cos (</body>), s’ha col.locat la càrrega dels scripts necessaris per l’execució de cada. Aquesta decissió és per reduïr el temps de càrrega de la pàgina fent que no es quedi en stanby mentre s’acaba de carregar el javascript Exemple script <script src="../requires/js/bootstrap.min.js"></script>

Figura 61. Funció validació pel camp adreça


55

4.4.4 DESENVOLUPAMENT DE LES CONSULTES LOCALS

Per a realitzar consultes de les incidències finalitzades he realitzat un petit formuali amb Microsoft Acces 2013.

En aquest formulari es mostra tota la informació relacionada amb les incidències. Per a fer-ho primer es selecciona la carpeta MSOffice on s'ha instal·lat l'Access i s’executa l’aplicació. Quan arrenca tenim dues opcions:

• Crear una base de dades nova

• Seleccionar una que ja existeix

Per seleccionar la base de dades d’incidències primer

s’ha de vincular la base de dades al programa mitjançant

el conector ODBC (Open Data Base Conectivity) i

assignant-li la ip local, el nom d’usuari i la contrasenya

d’accès al servidor.

Un cop vinculada la base de dades, es mostraràn les taules on es guarda el seu disseny, les

consultes realitzades que permeten seleccionar informació de la base de dades, els

formularis per dissenyar la manera d'entrar registres, consultar-los i modificar-los i els

informes per poder imprimir les taules o les consultes.

Figura 62. Configuració connector

Figura 63. Exemple base de dades vinculada. (Dades client fictícies)


56

Per dissenyar un formulari, es tracta de crear les consultes necessàries per accedir a les dades que volem visualitzar als camps del formulari i seleccionar els camps de les taules que vulguem.

Un cop creades les consultes realitzem el disseny del formulari insertant els camps que vulguem previament asignats a l’origen del registre. Es tracta d’anar “dibuixant” el disseny del formulari.

Figura 64. Exemple consulta material

Figura 65. Realitzant formulari

Figura 66. Vista de disseny del formulari


57

Aquest formulari està dividit en dues seccions, la part principal i la part secundària. La part principal és on hi hauràn les dades invariables de la incidència com el número d’incidència, les dades del client, l’adreça, el telèfon, les dades elèctriques, la causa que l’ha provocat i les dates d’assignació i finalització.

La secció secudària està formada per un conjunt de pestanyes per visualitzar la resta d’informació.

Elements avariats:

Materials

Figura 67. Parts del formulari

Figura 68. Detall de la pestanya Elementos desplegada

Figura 69. Detall de la pestanya Materiales desplegada


58

Operaris:

Fotos:

Amb el següent botó del menú de navegació del formuali podem consultar qualsevol incidència pel camp que vulguem. És a dir, podem buscar incidències per data, per adreça, per operaris etc…

Figura 70. Detall de la pestanya Operarios desplegada

Figura 71. Detall de la pestanya Fotos desplegada


59

4.5 RECURSOS UTILITZATS

4.5.1 PROGRAMES UTILITZATS

MySQL Workbench

MySQL Workbench és un programari desenvolupat per MySQL AB i més

tard adquirit per l’empresa Sun Microsystems. MySQL Workbench

proporciona una eina gràfica per realitzar el disseny i la documentació de bases de dades.

És l’aplicació successora de DBDesigner4 i està pensada per a ser utilitzada com a

sistema gestor de bases de dades MySQL.

Les seves principals funcionalitats són:

• Desenvolupament de SQL: Permet crear i administrar conexions a servidors de base

de dades. A més, permet configurar els paràmetres de conexió. MySQL Workbench

proporciona la capacitat d’executar consultes SQL en les conexios de la base de

dades.

• Modelatge de dades: Permet crear models d’un esquema d’una base de dades gràfica i

editar els aspectes de la mateixa utilitzant un editor complet. L’editor facilita la creació

i edició de taules, columnes, índexs, insercions, privilegis etc...

• Administració del servidor: Permet crear i administrar les instancies del servidor.

MySQL Workbench és un software gratuït disponible a:

http://dev.mysql.com/downloads/tools/workbench/


Filezilla

El FileZilla és

començar sent un projecte de classe d'informàtica

Kosse i dos companys de classe.

programa actúa de client FTP

FreeBSD i MacOS X.

• L'administrador de llocs

FTP cadascun associat amb les seves dades de connexió, incloent el nombre de

port a usar i si es tracta d'una sessió anònima o amb identificació. En aquest últim

cas es guarda el nom d'usuari i opcionalment la contrasen

• Registre de missatges

de consola les ordres enviades per Filezilla i les respostes del servidor remot.

• La vista de fitxers i directoris

una interfície gràfica

les carpetes i veure i alterar els seus continguts tant a la màquina local com a la

remota. Els usuaris poden arrossegar i deixar anar fitxers i directoris entre

els ordinadors local i remot.

• La cua de transferències

real l'estat de cada transferència activa o en cua.

FileZilla és un software gratuït disponible a:

http://filezilla.es/


és un programari lliure i de codi obert, amb llicència GPL.

començar sent un projecte de classe d'informàtica al gener

Kosse i dos companys de classe. Permet l'ús d'FTP, SFTP i FTP sobre SSL. Aquest

client FTP i es pot utilitzar en plataformes com Windows

administrador de llocs, a dalt de tot, permet a l'usuari crear una llista de llocs



cas es guarda el nom d'usuari i opcionalment la contrasenya.

missatges: es mostra a la part superior de la finestra. Mostra en forma

de consola les ordres enviades per Filezilla i les respostes del servidor remot.

vista de fitxers i directoris, situada sota el registre de missatges, proporciona

interfície gràfica semblant a un navegador de fitxers que permet navegar per


Els usuaris poden arrossegar i deixar anar fitxers i directoris entre

local i remot.

cua de transferències, situada a la part de baix de la finestra, mostra en temps

real l'estat de cada transferència activa o en cua.

és un software gratuït disponible a:


60

programari lliure i de codi obert, amb llicència GPL. Va

gener de 2001 de Tim

Permet l'ús d'FTP, SFTP i FTP sobre SSL. Aquest

Windows, Linux,

a l'usuari crear una llista de llocs



. Mostra en forma

de consola les ordres enviades per Filezilla i les respostes del servidor remot..

, situada sota el registre de missatges, proporciona

semblant a un navegador de fitxers que permet navegar per


Els usuaris poden arrossegar i deixar anar fitxers i directoris entre

, situada a la part de baix de la finestra, mostra en temps


DIA

Dia es una aplicació informàtica per la creació de diagrames desenvolupada

com a part del projecte GNOME. Eatà concebuda de

diferents paquets de formes p

Dia està dissenyat com a substitut de l’aplicació comercial

aquesta aplicació es poden dibuixar deferents tipus de diagrames. Actualment estàn

inclosos diagrames d’entitat

elèctrics etc. El format per llegir i guardar els gràfics realitzats és XML i

sortida en formats EPS, SVG i PNG.

Jo l’he utilitzat per crear diagrames d’entitat

dades.

Dia és un software gratuït disponible a:

http://dia-installer.de/download/


aplicació informàtica per la creació de diagrames desenvolupada

com a part del projecte GNOME. Eatà concebuda de forma modular,

s per a diferents necessitats.

Dia està dissenyat com a substitut de l’aplicació comercial Visio de Miscrosoft.


inclosos diagrames d’entitat-relació, diagrames UML, de fluxe, de xarxes, d

El format per llegir i guardar els gràfics realitzats és XML i

sortida en formats EPS, SVG i PNG.

Jo l’he utilitzat per crear diagrames d’entitat-relació a l’hora de dissenyar la base de

software gratuït disponible a:

installer.de/download/index.html


61

aplicació informàtica per la creació de diagrames desenvolupada

forma modular, amb

Miscrosoft. Amb


rxes, de circuits

El format per llegir i guardar els gràfics realitzats és XML i es pot produir la

relació a l’hora de dissenyar la base de


62

CODELOBSTER PHP Edition

CodeLobster PHP Edition és un editor de codi destinat principalment a la

creació i edició d’arxius de llocs web. És un editor potent i de fàcil utilització. Pot editar

arxius PHP, HTML, CSS, JavaScript amb comptabilitat amb els motors de plantilles CMS

Drupal, Joomla CMS, Smarty, la biblioteca de JQuery, el marc CodeIgniter i la

plataforma de blogs de WordPress.

Algunes de les característiques a destacar d’aquest editor són les següents:

• Cada llenguatge es pot resaltar de manera diferent, es pot resaltar l’àrea escrita en

HTML d’un color, Javascript d’un altre, etc.

• Disposa d’una potent compleció automàtica de cadenes i codis HTML, PHP, CSS,

Javascript, HTML5 i CSS3

• Disposa també d’un inspector HTML/CSS semblant al Firebug de Firefox.

• Teclejant ‘F1’ ens mostra un menu contextual on ens descriu la descripció

d’etiquetes, atributs o funcions existents.


63

• Una altra característica a destacar és que ens permet executar scripts PHP

incrementalment observant els valors de cada variable a cada linia gràcies al PHP

Debugger que porta incorporat.

• Amb el manegador de SQL, permet manipular totes les accions necesaries amb

una base de datos, afegint/editant una estructura o un registre en taules, exportar

dades, executar consultes SQL.

• L’explorador d’arxius és compatible amb FTP i SFTP, per treballar amb un

servidor remot i realizar els canvis que calguin als arx

Codelobster és un software gratuït disponible a: http://www.codelobster.com/

Microsoft Acces 2013 Microsoft Access és un programa de gestió de bases de dades

relacionals desenvolupat per Microsoft que forma part del paquet de

Microsoft Office. S’ha decidit utilitzar aquest programa per realitzar els

formularis de sortida i les consultes locals degut pel seva facilitat d’utilització per usuaris

amb poca experiència amb la informàtica i per la seva extensa distribució en petites

empreses.

Per treballar en una base de dades cal, en primer lloc, carregar el programa i, després

definir la base de dades o utilitzar-ne una de construïda anteriorment.


4.5.2 LLENGUATGES UTILITZATS

PHP Inicialment conegut com

llenguatge

sota la llicencia de PHP License

PHP va ser creat originalment per

implementació principal es produïda

per PHP al no haver-hi cap especificació consensuada per cap organisme

d’estandarització.

De manera general, PHP s'executa al costat del servidor

al llenguatge html. L’intèrpret php del servidor pren

genera pàgines web com a sortida. Es pot executar a la major part de servidors web i en

qualsevol sistema operatiu i plataformes sense cap cost.

PHP es troba instal.lat en més de 20 millones de llocs web y en més d’un milió de

servidors

HTML ( HTML

web. Aquest llenguatge s’utilitza per a descriure l’estructura i el

contingut d’un document web

L’organisme que estardaritza aquest llenguatge el el W3C

Consortium)

La filosofia del llenguatge HTML està basada en el desenvolupament de la referenciació.

Per afegir algun element extern com per exemple

s’inclou directament al codi sino que es fa una referencia

enmagatzemat l’element, fent que la pàgina web nomès contingui text

navegador web el qui s’encarregui d’unir els diferents elements per poder visualitzar la

pàgina web. Al estar estandaritzat, html es pot exec

actualitzat.


LLENGUATGES UTILITZATS

PHP (Hypertext Pre-processor) cialment conegut com Personal Home Page Tools

llenguatge interpretat d’alt nivell de codi lliure, que es distribueix

License i s’utilitza per a generar pàgines web de forma dinàmica.

PHP va ser creat originalment per Rasmus Lerdof l’any 1995, encara que en l’actualitat la

implementació principal es produïda The PHP Group i serveix com l’estàndar

i cap especificació consensuada per cap organisme

'executa al costat del servidor, podent incorporar

. L’intèrpret php del servidor pren el codi de PHP com a entrada

pàgines web com a sortida. Es pot executar a la major part de servidors web i en

qualsevol sistema operatiu i plataformes sense cap cost.


HTML ( HyperText Markup Language)

HTML és el llenguatge estàndard creat per l'edició de documents

Aquest llenguatge s’utilitza per a descriure l’estructura i el

contingut d’un document web (text, imatges…).

L’organisme que estardaritza aquest llenguatge el el W3C (World Wide Web


Per afegir algun element extern com per exemple una foto, un video, un script…

s’inclou directament al codi sino que es fa una referencia a la ubicació on es troba

enmagatzemat l’element, fent que la pàgina web nomès contingui text, i fent que sigui el


pàgina web. Al estar estandaritzat, html es pot executar amb qualsevol navegador web


64

Personal Home Page Tools, és un

que es distribueix

de forma dinàmica.

, encara que en l’actualitat la

i serveix com l’estàndar de facto

i cap especificació consensuada per cap organisme

, podent incorporar-se directament

el codi de PHP com a entrada i

pàgines web com a sortida. Es pot executar a la major part de servidors web i en


ndard creat per l'edició de documents

Aquest llenguatge s’utilitza per a descriure l’estructura i el

Wide Web


una foto, un video, un script…aquest no

a la ubicació on es troba

, i fent que sigui el


utar amb qualsevol navegador web


65

CSS (Cascading Style Sheets) CSS o fulles d’estil en cascada, és un llenguatge formal utilitzat per a

definir la presentació d’un document estructurat escrit en HTML o XML.

El W3C (World Wide Web Consortium) és l’encarregat de formular l’especificació dels

fulls d’estil que servirà d’estàndard per als usuaris o navegadors.

La idea que es troba darrera del desenvolupament de CSS és separar l’estructura d’un

document HTML de la seva presentació. Per a fer-ho possible, el full d'estil

s’emmagatzema en un arxiu diferent a l'arxiu on s'emmagatzema el codi HTML de la

pàgina web amb el que s’obté un control centralitzat de la presentació dels documents.

Separant l’estructura de la presentació, s’agilitza l’actualització d’aquests estils,

s’augmenta l’accessibilitat donat que permetem als usuaris definir el seu propi full d’estil

local, es pot disposar de diferents fulles d’estil segons el dispositiu al que es mostri o a

l’elecció de l’usuari i fa que el document resultant sigui molt més llegible i entenedor ja

que les etiquetes que conformen el arxiu html no tenen paràmetres que defineixen

aspectes de presentació, totes aquestes etiquetes es trobaran al fitxer .CSS.

SQL (Structured Query Language) SQL o Llenguatge d'interrogació estructurat és un llenguatge estàndard de

comunicació amb bases de dades relacionals. SQL permet treballar amb la majoria de

bases de dades relacionals i es pot pot utilitzar dins d'altres llenguatges de programació

com ara HTML. La principal característica d'aquest llenguatge és la seva simplicitat, ja

que amb pocs coneixements es poden fer consultes bàsiques sobre una base de dades,

encara que no per això deixa de ser un llenguatge complet, tant relacionalment com

computacionalment.

El llenguatge SQL es pot dividir en tres conjunts d'instruccions o sentències segons la

seva funció:

- Les sentències de definició (DDL Data Definition Language) permeten crear,

modificar i esborrar estructures de dades.

- Les sentències de manipulació (DML Data Manipulation Language) permeten

llegir, inserir, modificar i esborrar registres.

- Les sentències de control (DCL Data Control Language) permeten finalitzar o

rebutjar transaccions i autoritzar o revocar els permisos dels usuaris.


4.5.3 FRAME WORK

Bootstrap

Bootstrap é

desenvolupar interfícies

s’adapten al tamany de la pantalla del dispositiu amb el qual es visualitzen

de manera nativa, és a dir, s’adapten automàticament a la pantalla d’un ordinador, d’una

tablet o d’un dispositiu mòbil sense que l’usuari hagi de fer res al respecte. Això

s’anomena disseny adaptatiu i em va perfecte per a la usabilitat que li donarem a

l’aplicació web.

Els dissenys creats amb Bootstaps són simples, clars i intuïtius, donant agilitat a l’hora de

carregar-se i d’adaptar-se als diferents dispositius.

El framework porta incorporats alguns elements predefinits fàcils de configurar com

poden ser botons, menus desplegables, formularis etc.

afegir-hi dinamisme.

Jquery JQuery és una biblioteca de Javascript que ens permet realitzar feines feixugues d’una manera senzilla, com pot ser el fet de d’ocultar/mostrar elements com poden ser calendaris, afegir efectes o funcionalitats sobre

algun element en concret, validar formularis jQuery és compatible amb la majoria d’exploradors web del mercat com poden ser Internet Explorer, Firefox, Opera, Safari, Chrome…


WORK S UTILITZATS

Bootstrap

és un framework creat per Twitter que ens permet

desenvolupar interfícies web amb CSS y Javascript. Aquestes inferfícies


és a dir, s’adapten automàticament a la pantalla d’un ordinador, d’una



ls dissenys creats amb Bootstaps són simples, clars i intuïtius, donant agilitat a l’hora de

se als diferents dispositius.


esplegables, formularis etc. i es pot integrar amb jQuery per

és una biblioteca de Javascript que ens permet realitzar feines feixugues d’una manera senzilla, com pot ser el fet de d’ocultar/mostrar elements com poden ser calendaris, afegir efectes o funcionalitats sobre

algun element en concret, validar formularis etc.

jQuery és compatible amb la majoria d’exploradors web del mercat com poden ser Internet Explorer, Firefox, Opera, Safari, Chrome…


66

ens permet

Aquestes inferfícies


és a dir, s’adapten automàticament a la pantalla d’un ordinador, d’una



ls dissenys creats amb Bootstaps són simples, clars i intuïtius, donant agilitat a l’hora de


i es pot integrar amb jQuery per

és una biblioteca de Javascript que ens permet realitzar feines feixugues d’una manera senzilla, com pot ser el fet de d’ocultar/mostrar elements com poden ser calendaris, afegir efectes o funcionalitats sobre

jQuery és compatible amb la majoria d’exploradors web del mercat com poden ser


67

4.7 PAG. WEBS CONSULTADES Algunes de les pàgines web que han estat consultades per l’aprenentatge de les eines o llenguatges necessaris per al desenvolupament d’aquest projecte

- http://ocw.uoc.edu/computer-science-technology-and-multimedia/bases-

de-datos/bases-de-datos/P06_M2109_02150.pdf

- http://es.wikipedia.org/

- http://dev.mysql.com/

- http://coba.dc.fi.udc.es/~bd/bd2/MySQLWB/tutorialWB.html#Q50

- http://eugeniabahit.blogspot.com.es/

- http://idesweb.es/proyecto/proyecto-prac10-php-mysql-acceso-base-de-

datos

- http://www.synology.com/es-es/products/overview/DS112j

- http://www.mysql.com/products/workbench/

5. APORTACIONS DEL PROJECTE ALS CONEIXEMENTS DE L’ALUMNE Han estat molts els coneixement que he anat adquirint durant la realització d’aquest projecte, des de lleguatges de programació de pàgines web com html i php dels qual nomès en coneixia el nom i per a que s’utilitzaven fins a llibreries de codi lliure actuals que hi han disponibles a internet que interactuen amb aquest llenguatges i de les quals desconeixia totalment la seva existència.

Realitzar aquest projecte també m’ha permès posar en pràctica de manera professional els coneixements relacionats amb les bases de dades obtinguts a la carrera i de les eines actuals que hi ha disponibles per la gestió d’aquestes com MySQLworkbench i phpMyAdmin.

Aquesta experiència també m’ha permès aprendre a plantejar tot el projecte desde zero a partir d’unes necessitats concretes, començant per l’aquisició del hardware (en aquest cas un servidor), realitzant la configuració/administració d’aquest, entendre la manera de fer les coses per tal de que el servidor mostri els formularis creats a través de la xarxa, entendre la manera de com recollir les dades dels usuaris i emmagatzemar-les a la base de dades que s’ha desenvolupat al servidor o de com realitzar algun informe d’aquestes dades.

Entenc que hi ha detalls que són millorables però estic força satisfet amb el resultat obtingut tenint en compte que és el primer que realitzo.

Els coneixements apresos m’han animat a plantejar la realització d’algun altre projecte semblant a l’empresa.


68

6. APORTACIONS DELS ESTUDIS REALITZATS AL PROJECTE Les assignatures cursades que m’han aportat més coneixements per realitzar aquest projecte, com és lògic, són Introducció a les Bases de Dades i Bases de Dades. Degut a que el mòdul principal d’aquest projecte és la realització d’una base de dades. M’han facilitat molt a l’hora de definir l’estructura de la base de dades, de conèixer el seu funcionament i desenvolupar-la. Per altra banda, destacaria el fet d’haver realitzat les assignatures de Programació I i Programació II ha sigut vital a l’hora d’aprendre nous llenguatges de programació, un cop sabent com funciona un llenguatge, fa que l’aprenentatge d’altres llenguatges sigui molt més fluit.

Considero que el fet de no haver cursat assignatures com projectes informàtics o enginyeria del software ha dificultar una mica a l’hora de realizar aquest projecte ja que vaig trigar en adornar-me que estava intentant construïr la casa per la teulada en el sentit d’haver començat realitzant els formularis php abans de tenir realitzada la base de dades i després te n’adones que s’han de modificar moltes coses als formularis per a que puguin interactuar sense problemes amb la base de dades.

7. CONCLUSIONS

La realització d’aquest projecte m’ha suposat un gran repte personal alhora d’enriquidor,

ja que degut a la meva feina, tenia força oblidat el món de la informàtica que no fos a

nivell d’usuari. Feia un bon grapat d’anys que no feia res ni de programació, ni res

rel.lacionat amb bases de dades per tant, m’he hagut d’esforçar per una banda a recordar

les coses que vaig aprendre durant l’etapa universitària per la creació i gestió de la base

de dades i per una altra banda familiaritzar-me amb uns quants temes nous per a mi com

el llenguatge html, php, css, etc. amb els quals mai havia treballat abans.

ANNEX 1:

14

Manual d e usuario Aplicación web para la gestión de incidencias eléctricas BT Ramon Adam Nota: Este manual es una versión formativa. Para cumplir con la ley de protección de datos, en este manual no se mostrarán los menús o pantallas que contengan información personal o de carácter privado.

PROCEDIMIENTO GENERAL

PG-04

Rev. 1

PROCEDIMIENTO PARA LA GESTIÓN DE INCIDENCIAS ELÉCTRICAS

Página 2 de 15

ELABORADO REVISADO APROBADO RESPONSABLE SGI RESPONSABLE SGI DIRECCIÓN

Firma:

Firma:

Firma:

Fecha: Fecha: Fecha:

ÍNDICE

1. OBJETO

2. ALCANCE

3. RESPONSABILIDADES

4. EJECUCIÓN

HISTORIAL DE REVISIONES

FECHA Revisión MOTIVO DEL CAMBIO


PG-04

Rev. 1


Página 3 de 15

1. Objeto El objeto de este procedimiento es describir la metodología para gestión de incidencias eléctricas mediante la nueva aplicación web Gestión de incidencias.

2. Alcance Afecta a los trabajos derivados del contrato de mantenimiento de redes de baja tensión de Endesa Distribución Eléctrica en su apartado de resolución de averías eléctricas en redes BT

3. Responsabilidades El administrador de la aplicación será el responsable de facilitar las claves de acceso a la aplicación y de supervisar el funcionamiento de la aplicación, corrigiéndola o modificándola según sea conveniente. Endesa Distribución Eléctrica será la encargada de enviar los datos necesarios para generar una nueva incidencia al responsable técnico de resolución de averías de Installum. El responsable técnico de resolución de averías de Installum derivará esos datos al operario homologado correspondiente. Los operarios homologados para la realización trabajos en tensión, en el apartado de resolución de averías eléctricas son los responsables de verificar los datos de la nueva incidencia, reparar la incidencia y de informar a través de la aplicación para gestionar las incidencias al responsable técnico.

4. Ejecución El acceso a la aplicación se realizará mediante el empleo de un navegador web, por tanto se requiere de conexión a internet para su uso. A la aplicación se puede acceder con distintos navegadores. Los navegadores compatibles con esta aplicación son Internet Explorer, Mozilla Firefox, Google Chrome, Safari y Opera. El navegador web puede ser usado desde un ordenador o desde un dispositivo móvil como una tablet o un teléfono siempre y cuando se cumplan los requisitos anteriores. Para acceder a la aplicación se debe introducir la dirección web siguiente: http://direccionaplicacion.apl


PG-04

Rev. 1


Página 4 de 15

Una vez que hayamos accedido a la aplicación nos aparecerá la siguiente pantalla: Pantalla de loguin

Figura 1

En esta pantalla se deben introducir los datos que el administrador del sistema facilitará a todos los usuarios de la aplicación de manera individual. Las contraseñas se cambiarán cada 3 meses y se facilitará una nueva contraseña. Una vez se escribe el nombre de usuario y la contraseña, se puede acceder a la aplicación mediante el botón Enviar. El sistema validará la información y si es correcta accederá al menú principal de la aplicación. Menú principal

Figura 2 En el menú principal se muestran cuatro botones con el nombre de la funcionalidad escrita en su interior. A continuación se procede a explicar dichas funcionalidades.


PG-04

Rev. 1


Página 5 de 15

Botones correspondientes a la Figura 2

1. Botón Nueva Avería General Pulsando sobre él se inicia el proceso para introducir toda la información sobre una nueva incidencia.

2. Botón Avería Rechazada Pulsando sobre él se inicia el proceso para informar sobre una incidencia rechazada (incidencia a la que no se le realiza ninguna intervención).

3. Botón Abrir Avería General

Pulsando sobre él se inicia el proceso para recuperar una incidencia abierta, es decir que no está finalizada.

4. Botón volver Pulsando sobre él se accede al menú principal.

1. Botón Nueva Avería General

Si se pulsa este botón nos lleva a la siguiente pantalla: Se trata de rellenar los campos con la información que se refleja junto cada cuadro de texto. En la pantalla de ejemplo se han rellenado con la información que procede en cada uno de ellos. La incidencia es el número de avería correspondiente, por tanto no se puede escribir texto. Es obligatorio rellenarlo para poder pasar a los siguientes menús. Los campos de dirección y localidad también son obligatorios para continuar.

Pantalla Nueva Incidencia

Figura 3


PG-04

Rev. 1


Página 6 de 15

Para rellenar el campo fecha bastará con pulsar sobre el selector y se abrirá un calendario de tipo rueda de forma automática. En él simplemente habrá que desplazarse y pulsar sobre el día que nos interese informar y se cerrará automáticamente. Si el día elegido no es el correcto bastará con pulsar de nuevo sobre el campo fecha. La fecha se mostrará en el campo con el formato año/mes/día. Una vez introducidos los campos correspondientes se puede pulsar el botón [Enviar] para generar la incidencia en el sistema o el botón [Volver], para descartar los campos introducidos y acceder al menú principal. Si se ha dejado algún campo de los ‘obligatorios’ sin rellenar y pulsamos sobre el botón [Enviar], el sistema nos mostrará un aviso similar al de la figura 5 diciendo que campo falta rellenar. Simplemente hay que pulsar Ok (o Aceptar dependiendo del navegador) y rellenar el campo correspondiente. Seguidamente se puede volver a pulsar el botón Enviar.

Pantalla Nueva Incidencia

Figura 4

Mensaje de advertencia

Figura 5

Tras pulsar el botón Enviar la aplicación nos mostrará la pantalla correspondiente a la figura 8:


PG-04

Rev. 1


Página 7 de 15

A partir de este punto, en la parte superior de la pantalla, la aplicación nos mostrará el enlace Incidencias, el cual nos llevará al menú principal si se pulsa sobre él, el número de la incidencia sobre la que estamos trabajando y el nombre del campo del menú sobre el que estamos trabajando

Detalle del barra de información

Figura 6

Debajo de esto, se muestra un menú horizontal distintas pestañas. Cada pestaña corresponde a un tipo de información. En ellas se representan sólo las iniciales para facilitar la adaptación de la aplicación en las pantallas de terminales móviles. Las iniciales corresponden a los siguientes nombres:

Menú horizontal Datos Eléctricos

Figura 7

En la pestaña E se muestran los campos correspondientes a los datos eléctricos de la incidencia. Se deberá rellenar el código del transformador, el cuadro y la salida. Dependiendo del transformador escogido se mostrará automáticamente el nombre técnico que gestiona el transformador. Una vez rellenados los campos se deben asociar a la incidencia pulsando el botón Guardar.

Una vez guardados los datos podemos pulsar sobre las otras pestañas del menú (figura 7). En cualquier momento se puede acceder a cualquiera de ellas y rellenar los campos que uno quiera aunque se recomienda seguir un orden sistemático y recorrer las pestañas de izquierda a derecha.

Pantalla Datos Eléctricos

Figura 8


PG-04

Rev. 1


Página 8 de 15

Elementos Averiados

Figura 9

Pulsando sobre la pestaña A de la figura 9 accedemos a la pantalla de elementos Averiados. En esta pantalla se muestran dos selectores desplegables (ver figura 10). Simplemente pulsando en cada uno de ellos, se abre una ventana donde se muestran las opciones disponibles de cada uno de ellos. Escogemos primero el selector ‘Tipo elemento’ y seleccionamos la opción que nos interese haciendo click sobre ella y automáticamente se cerrará. Al abrir el selector ‘Elemento Averiado’ se nos mostrarán los elementos relacionados con la opción que se haya seleccionado en el primer selector. Este selector permanecerá bloqueado si no se escoge una opción del primer selector. Si nos confundimos de opción, repetimos el proceso clicando de nuevo sobre el selector. Una vez tengamos las opciones seleccionadas clicamos en el botón Guardar, para asociar estos elementos a la incidencia.

Pantalla elementos Averiados

Figura 10

Pantalla elementos Averiados

Figura 11


PG-04

Rev. 1


Página 9 de 15

Causas

Figura 12

Pulsando sobre la pestaña C de la figura 12 accedemos a la pantalla de Causas. Del mismo modo que en la pestaña anterior en esta pantalla también se muestran dos selectores desplegables (ver figura 13). El funcionamiento es exactamente el mismo que el de la pantalla anterior. Se clica en cada uno de ellos, se abre una ventana donde se muestran las opciones disponibles, se escoge la opción deseada y se cerrará el selector. Hay que seleccionar un tipo de causa en el primer selector para que se puedan mostrar las causas en el segundo selector. Una vez tengamos las opciones seleccionadas clicamos en el botón Guardar, para asociar el tipo de causa y la causa a la incidencia.

Pantalla Causas

Figura 13

Pantalla Causas

Figura 14


PG-04

Rev. 1


Página 10 de 15

Materiales

Figura 15

Pulsando sobre la pestaña M de la figura 15 accedemos a la pantalla de Materiales. El funcionamiento de todas las pestañas es muy similar. Clicamos encima del selector para abrir el menú desplegable que contiene los materiales y seleccionamos el material que nos interesa. Automáticamente se cerrará el menú con el nombre del material que hayamos seleccionado. Seguidamente escribimos la cantidad de material que se haya utilizado y se pulsa sobre el botón Guardar.

El material escogido junto con la cantidad introducida se mostrará automáticamente en una tabla que aparece en la parte inferior de la pantalla (ver figura 16). Si por error hemos guardado un material o una cantidad errónea, se puede eliminar pulsando sobre el botón Borrar que aparece junto a cada material introducido.

Pantalla Materiales

Figura 16

Una vez finalizada la selección del material se puede proceder a seleccionar los operarios que han intervenido en la incidencia.


PG-04

Rev. 1


Página 11 de 15

Operarios

Figura 17

Pantalla Operarios

Pulsando sobre la pestaña O de la figura 17 se accede a la pantalla de Operarios. En esta pantalla se debe seleccionar el nombre o nombres de los operarios que han intervenido en la reparación de la avería y las horas de inicio y fin de la intervención de cada operario. Si han intervenido varios operarios, cuando se acaben de introducir los datos del primer operario, se pulsa el botón [Guardar] y se introducen el nombre y las horas de intervención del segundo operario y así sucesivamente. A medida que se vayan introduciendo operarios y horas de intervención, éstas se mostrarán en una lista en la parte inferior de la pantalla. Importante: Al tratarse de un espacio compartido donde tienen acceso todos los operarios mientras la incidencia no esté finalizada, para evitar errores, un operario puede introducir horas de otros operarios pero solamente podrá borrarlas de la lista si las horas pertenecen al operario que se ha validado en la aplicación. Es decir, cada operario puede borrarse sus horas (validándose en la aplicación) pero no la de sus compañeros.

Figura 18


PG-04

Rev. 1


Página 12 de 15

Fotos

Figura 19

Pulsando sobre la pestaña F de la figura 19 se accede a la pantalla de Fotos. Esta pantalla se utilizará para adjuntar fotos a la incidencia. Si se pulsa sobre el botón [Seleccionar archivo] (ver figura 20) se podrá escoger entre seleccionar una fotografía que esté guardada en la carpeta de imágenes de nuestro teléfono o realizar una nueva captura. Si se accede a la aplicación desde un dispositivo sin cámara, solamente se podrán escoger fotografías que estén almacenadas en él. A medida que se vayan guardando fotos, éstas se podrán visualizar en una lista en la parte inferior de la pantalla junto con el número de fotos subidas. Si se ha subido una foto que no corresponde, se puede eliminar pulsando el botón [Borrar] (ver figura 1).

Pantalla foto

Figura 20


PG-04

Rev. 1


Página 13 de 15

Pantalla foto

Figura 21

X- Cierre

Figura 22

Pulsando sobre la pestaña X de la figura 22 se accede a la pantalla de Cierre. En esta pantalla se seleccionará la fecha y la hora cuando se finaliza una incidencia mediante los selectores y se escribirá alguna observación en el campo de texto si conviene. Por defecto estarán seleccionadas la fecha y hora actuales

Pantalla cierre

Figura 23


PG-04

Rev. 1


Página 14 de 15

Pantalla Averías Rechazadas

Pulsando el segundo botón [Avería Rechazada] del menú principal (ver figura2) se accede a la pantalla de las incidencias rechazadas. Para introducir una nueva incidencia hay que rellenar los campos número de incidencia, el campo operario vendrá por defecto y será el usuario que se valide en la aplicación, seleccionar la fecha y la hora de asignación, elegir un motivo de la lista mediante el menú desplegable y escribir alguna observación si conviene. Para finalizar hay que pulsar el botón [Guardar]

Figura 24


PG-04

Rev. 1


Página 15 de 15

Pantalla Abrir Avería

Pulsando el segundo botón [Abrir avería] del menú principal (ver figura2) se accede a una pantalla donde se muestra un listado con todas las incidencias que están pendientes de finalizar (ver figura 25). Si se quiere acceder a alguna de ellas para introducir datos nuevos hay que pulsar el botón [Abrir] que está situado junto en la misma línea que el numero de incidencia y la fecha en la que se generó. Cuando se finalice una incidencia, ésta desaparecerá del listado de incidencias abiertas.

Figura 25

desenvolupament d’una base de dades i d’una...

Documents