Creació de web de venda de components informàtics

Texto completo

(1)CREACIÓ DE WEB DE VENDA DE COMPONENTS INFORMÀTICS ESPECIALITAT: ADMINISTRACIÓ DE WEB I DE COMERÇ ELECTRÒNIC AUTOR: SAÜL PÉREZ PUIG CONSULTOR: FRANCISCO JAVIER NOGUERA OTERO TUTOR EXTERN: ENRIQUE MEIRIÑO MORATAL DATA: 19 DE GENER DE 2014.

(2) TFM.CREACIÓ DE WEB DE VENTA DE COMPONENTS INFORMÀTICS. SAÜL PÉREZ PUIG. Drets d'Autor © 2013 Saül Pérez Puig Sota llicència Llicència GFDL. Permís per copiar, distribuir i/o modificar aquest document sota els termes de la llicència de documentació lliure GNU, versió 1.2 o qualsevol altra versió posterior publicada per la Free Software Foundation; amb les seccions invariants sent el text de la coberta frontal i el text de la coberta posterior. Una còpia de la llicència és inclosa en la secció titulada "Llicència de Documentació Lliure GNU". 2/81.

(3) TFM.CREACIÓ DE WEB DE VENTA DE COMPONENTS INFORMÀTICS. SAÜL PÉREZ PUIG. RESUM DEL PROJECTE. La realització d'aquest projecte anomenat “Creació de web de venta de components informàtics” ha consistit en el desenvolupament d'una plataforma web on una empresa amb tenda física puga vendre maquinari i programari en línia..

(4) TFM.CREACIÓ DE WEB DE VENTA DE COMPONENTS INFORMÀTICS. SAÜL PÉREZ PUIG. TAULA DE CONTINGUTS 1. INTRODUCCIÓ..............................................................................................................................7 2. ESTUDI DE VIABILITAT..............................................................................................................8 2.1. INTRODUCCIÓ.......................................................................................................................8 2.2. SITUACIÓ ACTUAL...............................................................................................................8 2.3. VIABILITAT TÈCNICA........................................................................................................10 2.4. VIABILITAT OPERACIONAL.............................................................................................10 2.5. VIABILITAT ECONÒMICA.................................................................................................11 2.6. OBJECTIUS...........................................................................................................................12 3. ANÀLISI DE REQUERIMENTS.................................................................................................13 3.1. INTRODUCCIÓ.....................................................................................................................13 3.2. REQUERIMENTS FUNCIONALS.......................................................................................14 3.2.1. Requeriments funcionals del portal web........................................................................14 3.2.2. Requeriments funcionals d'usuari...................................................................................14 3.2.2.1. Requisits d'usuari no registrat................................................................................15 3.2.2.2. Requisits d'usuari registrat.....................................................................................15 3.2.2.3.Requisits d'usuari administrador.............................................................................16 3.2.3. Diagrames de casos d'ús.................................................................................................16 3.2.3.1. Casos d'ús d'usuari no registrat..............................................................................17 3.2.3.2. Casos d'ús d'usuari registrat...................................................................................19 3.2.3.3.Casos d'ús d'usuari administrador...........................................................................20 3.3. REQUERIMENTS NO FUNCIONALS................................................................................28 3.4. ALTRES REQUERIMENTS..................................................................................................28 4. DISSENY.......................................................................................................................................29 4.1. INTRODUCCIÓ.....................................................................................................................29 4.2. OBJECTIU.............................................................................................................................29 4.3. REQUISITS DE DISSENY....................................................................................................29 4.4. PROGRAMARI DE BASE DE DADES...............................................................................30 4.5. SERVIDOR WEB...................................................................................................................30 4.6. PLATAFORMA PRESTASHOP.............................................................................................31 4.6.1. Requisits de hosting........................................................................................................32 4.6.2. El disseny de la base de dades........................................................................................32 4/81.

(5) TFM.CREACIÓ DE WEB DE VENTA DE COMPONENTS INFORMÀTICS. SAÜL PÉREZ PUIG. 4.7. REQUERIMENTS DE DISSENY..........................................................................................32 4.7.1. El disseny del portal web................................................................................................33 4.7.2.Disseny del tema.............................................................................................................34 4.7.3. Les fonts.........................................................................................................................34 4.7.4. El logo............................................................................................................................35 4.7.5. La icona..........................................................................................................................35 4.7.6. Disseny provisional........................................................................................................35 5. DESENVOLUPAMENT...............................................................................................................36 5.1. OBJECTIU.............................................................................................................................36 5.2. TECNOLOGIES UTILITZADES PER AL DESENVOLUPAMENT...................................36 5.2.1.HTML i XHTML............................................................................................................36 5.2.2. CSS.................................................................................................................................37 5.2.3. Javascript, jQuery i AJAX..............................................................................................37 5.2.4. PHP.................................................................................................................................38 5.2.5.SQL.................................................................................................................................38 5.2.6. MySQL...........................................................................................................................39 5.2.7. phpMyAdmin.................................................................................................................39 5.3. FERRAMENTES...................................................................................................................39 5.3.1. Notepad++......................................................................................................................39 5.3.2. Servidor local portable: XAMPP....................................................................................40 5.3.3. Putty................................................................................................................................40 5.4. DESENVOLUPAMENT EN EL SERVIDOR LOCAL.........................................................41 5.4.1. Instal·lació de Prestashop en servidor local...................................................................41 5.4.2.Instal·lació del tema........................................................................................................48 5.4.3. Personalització del tema als requeriments......................................................................50 5.5. MÒDUL GESTIÓ D'ESTOCS...............................................................................................53 5.5.1.Estructura del mòdul.......................................................................................................53 5.5.2. Fitxer principal PHP.......................................................................................................54 5.5.3. Icones..............................................................................................................................56 5.5.4. Instal·lació del mòdul gestioestocs.................................................................................57 5.5.5. Ús del mòdul gestioestocs..............................................................................................58 5.6. MÒDUL GESTIÓ DE PREUS...............................................................................................58 5.6.1.Estructura del mòdul.......................................................................................................58 5/81.

(6) TFM.CREACIÓ DE WEB DE VENTA DE COMPONENTS INFORMÀTICS. SAÜL PÉREZ PUIG. 5.6.2. Fitxer principal PHP.......................................................................................................59 5.6.3. Icones..............................................................................................................................59 5.6.4. Instal·lació del mòdul gestiopreus..................................................................................59 5.6.5. Ús del mòdul gestiopreus...............................................................................................59 5.7. MÒDUL GESTIO DEL PAGAMENT...................................................................................61 5.7.1. Mòdul de pagament amb compte PayPal.......................................................................61 5.7.2. Mòdul de pagament mitjançant targeta bancària............................................................63 6. IMPLANTACIÓ............................................................................................................................64 6.1. INTRODUCCIÓ.....................................................................................................................64 6.2. OBJECTIUS...........................................................................................................................65 6.3. INSTAL·LACIÓ DE PRESTASHOP EN EL SERVIDOR....................................................65 6.3.1. El servidor dedicat..........................................................................................................65 6.3.2. Procés d'instal·lació de Prestashop.................................................................................65 6.4. INSTAL·LACIÓ DEL TEMA................................................................................................67 6.5. INSTAL·LACIÓ DELS MÒDULS........................................................................................68 6.6.COMPRA DEL NOM DE DOMINI.......................................................................................69 7. MANTENIMENT..........................................................................................................................70 7.1. INTRODUCCIÓ.....................................................................................................................70 7.2. MANTENIMENT DE CORRECCIÓ....................................................................................70 7.3. MANTENIMENT DE MILLORA.........................................................................................71 7.4. PROVES.................................................................................................................................71 7.4.1.Proves de caixa blanca....................................................................................................72 7.4.2. Proves de caixa negra.....................................................................................................73 7.4.3. Nivells de prova..............................................................................................................73 7.4.4. Proves realitzades en l'aplicació.....................................................................................74 8. CONCLUSIONS I RESULTATS...................................................................................................75 8.1. CONCLUSIONS....................................................................................................................75 8.2. OBJECTIUS ACONSEGUITS...............................................................................................76 8.3. OBJECTIUS NO ACONSEGUITS........................................................................................76 8.4. AMPLIACIONS DE TREBALL............................................................................................76 9. REFERÈNCIES BIBLIOGRÀFIQUES........................................................................................77 ANNEXOS.........................................................................................................................................78. 6/81.

(7) TFM.CREACIÓ DE WEB DE VENTA DE COMPONENTS INFORMÀTICS. SAÜL PÉREZ PUIG. 1. INTRODUCCIÓ El primer capítol del treball serà una introducció en què s'exposin els objectius, l'estat de l'art i l'estructura de la memòria del projecte, entre altres aspectes que es considerin rellevants La realització del meu projecte de final de màster consisteix en el desenvolupament d'una plataforma web comercial destinada a una empresa de venda de tintes de impressora Aquesta empresa desitja obrir nous objectius amb la venda de forma en línia de material hardware Tot projecte que es vulgui dur a bon terme comporta la realització de una planificació en el seu desenvolupament que cal constar per escrit i que ens ajudarà en la correcta finalització del mateix. Generalment aquesta planificació es divideix en 5 fases com són: planificació, anàlisi, disseny, construcció i manteniment. Com a objectius que es pretenen aconseguir amb el desenvolupament del següent projecte web podem destacar els següents: •. •. •. • •. Dissenyar una plataforma web per a la venda de components informàtics (tipus webs de tendes informàtiques com PCBOX[1] o PCComponentes[2]) amb els components més actuals en cada moment. Desenvolupar un sistema automatitzat per a la realització d'informes per a la gestió més acurada del catàleg/estoc de productes i per poder planificar l'entrada de nou estoc i/o facilitar la seva sortida. Aconseguir un sistema automatitzat que d'acord amb uns objectius configurables i amb diferents prioritats arribi a recomanar ajustar preus per satisfer-los optimitzant així el marge de beneficis i la gestió del magatzem al llarg de la temporada. Poder realitzar el pagament a través del servei PayPal i a través de targeta de crèdit o dèbit. Documentar tots els processos per a que el client sigui capaç de gestionar tota la plataforma web deforma independent.. En el següent esquema es pot visualitzar els elements diferents que es pretenen desenvolupar:. 7/81.

(8) TFM.CREACIÓ DE WEB DE VENTA DE COMPONENTS INFORMÀTICS. SAÜL PÉREZ PUIG. 2. ESTUDI DE VIABILITAT. 2.1. INTRODUCCIÓ Aquest estudi de viabilitat pretén avaluar la viabilitat del projecte, estudiant i analitzant la seva rendibilitat econòmica així com el pla de desenvolupament. Es farà una anàlisi dels costos del projecte i dels ingressos que es preveu obtenir. Es concretaran els objectius i les estratègies a realitzar, tant a curt com a llarg terme i s'inclouran les activitats a desenvolupar, així com la seva planificació. L'estudi de viabilitat té com a propòsit la comprovació de la viabilitat tècnica. En aquest cas, s'estudiarà la viabilitat d'aquest com a projecte final del màster Per aquest motiu, s'ha de realitzar sobre el projecte i demostrar que ofereix algun benefici. En l'estudi de viabilitat es detallaran els avantatges i inconvenients que ofereix la implementació de un portal web per gestionar el projecte. A continuació, es descriurà la situació a tractar i les característiques del sistema on s'implementarà. Finalment, es podrà comprovar si el projecte és viable. 2.2. SITUACIÓ ACTUAL Actualment l'empresa kyvinfo es dedica principalment a la venta de tintes d'impressora A més, ven alguns components hardware menors com ratolins, memòries USB, teclats, etc. que té exposats en la pròpia botiga i d'altres que pot demanar baix comanda a diversos proveïdors. També ven alguns programaris com antivirus. Aquesta empresa forma part d'una franquícia anomenada "De buena tinta" amb aquest portal web general: http://www.cartuchosdebuenatinta.es/ . La empresa no disposa de web pròpia per a aquest negoci sent pròpietat de la franquícia.. 8/81.

(9) TFM.CREACIÓ DE WEB DE VENTA DE COMPONENTS INFORMÀTICS. SAÜL PÉREZ PUIG. A més, l'empresari disposa d'una web pròpia on ofereix distints serveis webs com servei tècnic, disseny de pàgines webs, instal·lació de xarxes i altres serveis informàtics menors. La major part d'aquest serveis són subcontractats a altres empreses o informàtics Aquesta segona web la trobem en: http://kyvinfo.es/ El client desitja que el portal que es siga una extensió del seu portal personal, és a dir, de la web kyvinfo.es. Per tant, el nou portal desenvolupant haurà de tindre una relació amb la primera, semblança de colors, estructura i política.. El negoci de venta de tintes és un negoci emergent que ofereix grans beneficis a les empreses. És relativament rentable ja que es venen tintes compatibles a preus molt baixos el que atrau a moltes empreses i particulars consumidors de tinta. No obstant, i com sol passar amb els negocis emergents, sorgeixen grans quantitats de empreses que col·lapsen el negoci generant una gran quantitat de competència. La situació actual de l'empresa a la que li desenvoluparé la web és bona, però cada vegada la competència és major i els beneficis menors. Per aquest motiu, l'empresa desitja expandir el negoci a altres mercats, dedicant-se a la venda de maquinari i programari en línia. Per a establir la viabilitat d’un projecte, cal comprovar 3 tipus de viabilitat: • Viabilitat tècnica • Viabilitat operacional • Viabilitat econòmica 9/81.

(10) TFM.CREACIÓ DE WEB DE VENTA DE COMPONENTS INFORMÀTICS. SAÜL PÉREZ PUIG. 2.3. VIABILITAT TÈCNICA La realització del projecte tècnicament és relativament senzilla però laboriosa. S'utilitzarà la plataforma Prestashop la qual ens proporciona una valuosa base d'on partir i realitzar el projecte. Per a aquesta tasca s'utilitzaran ferramentes completament lliures i gratuïtes com són el Prestashop, un editor de text, un servidor web Apache i altres ferramentes auxiliars de forma puntual. Per realitzar el projecte s'han tingut en compte quatre possibles plataformes de programari lliure especialitzades en el comerç electrònic que detallem a continuació: •. •. •. •. OsCommerce: Potent, gran quantitat de suport i desenvolupament lliure. Però antiquat i semi abanAtés, disseny amb taules, molts bugs. I normalment acabes tenint un codi bastant brut i de difícil actualització. Magento: Tal vegada el mes potent, també el més costós, el que més recursos consumeix i amb la corba d'aprenentatge mes alta. Poc suport, i amb prou feines cap en espanyol. Prestashop: Baix consum de recursos (la més ràpida segons Google 98/100), ampli suport, AJAX integrat, programari lliure La última versió suposava un salt tecnològic important al programari, és un programari modular, el nucli que ha estat reescrit segons el patró MVC i el paradigma de la programació orientada a objectes. I aporta noves funcions afegides que li aproximen molt a la potència de Magento. Woocommerce: Plugin de Wordpress per a muntar una petita o mitjana botiga en línia. Fàcil instal·lació, intuïtiu i amb plantilles. Té els inconvenients que està bastant limitada i depèn de una instal·lació de Wordpress. A més, no hi ha molt de suport per a aquest plugin.. Finalment s'ha decidit realitzar el projecte sobre la plataforma Prestashop ja que necessita menys recursos que la resta de solucions i ofereix un bon temps de resposta i una imatge visual molt atractiu. S'explicarà Prestashop amb més detall al punt 2.4 VIABILITAT OPERACIONAL Atès que la dificultat del projecte no és elevada, sinó laboriosa el desenvolupament del mateix ocuparà uns 3 mesos de treball. Serà realitzat per una sola persona que personalitzarà la plataforma de Prestashop a les necessitats del client i desenvoluparà els mòduls requerits per fer les diferents funcionalitats. En aquest cas, ens oferirà avantatges pel que fa a la competència, tant la ja establerta com la futura. El començar desenvolupant per a una versió nova porta problemes com a escassetat de suport, desenvolupaments lliures, mòduls, temes, etc., així com un bon nombre de bugs per solucionar. Però també suposa fer un projecte des de zero, en una tecnologia amb un temps de vida més llarg, que consumeix menys recursos, i evita problemes a curt termini amb upgrades del sistema. A més del nou nucli ja comentat, Prestashop ofereix noves funcions molt interessants com la multi-botiga, que facilita l'expansió horitzontal del negoci i implantació internacional de l'empresa, dedicant un mínim de recursos al desenvolupament i gestió. També inclou algunes noves funcions i millores en l'API, l'ERP, facturació, gestió d'estocs i inventaris, venda creuada i altres millores. No és una versió més, sinó un salt qualitatiu de la plataforma Prestashop. 10/81.

(11) TFM.CREACIÓ DE WEB DE VENTA DE COMPONENTS INFORMÀTICS. SAÜL PÉREZ PUIG. 2.5 VIABILITAT ECONÓMICA La viabilitat econòmica ve donada per la tendència actual per fer compres a través d'Internet. Aquesta és una tendència evident per la societat actual per la seva comoditat. A més, és la millor i més ràpida forma d'expandir geogràficament un negoci amb el menor cost possible. Els components d'un estudi de viabilitat en un negoci en línia serien principalment: • • • • • •. Recopilar les tarifes dels proveïdors Estimar les despeses d'enviament Estimar costos estructurals i operatius Preus de venda objectius Establir objectiu de vendes per producte Liquiditat i tresoreria disponible. Amb aquests components podrem saber si el negoci inicialment sembla viable o no. Però no serà fins que ho posem en pràctica quan realment vegem si surten els vendes o no, si venem al preu que hem marcat com a objectiu i si el volum de vendes és l'adequat per cobrir la resta de costos. Al final la clau està en el preu de venda, hem d'establir un % de marge brut sobre la tarifa que ens envia els proveïdors, i cal veure si aquest preu és competitiu al mercat d'internet. Aquest percentatge no ha de ser sempre el mateix dependrà de l'import de l'article i si l'enviament queda inclòs o no. Com marcar el preu per a cadascun dels articles vindrà determinat pel marge de beneficis que desitja l'empresa, pel nombre de vendes d'aquest producte i també per les suggerències del programari desenvolupat amb aquesta finalitat. Encara que no sol ser un component important en el negoci en línia, al principi cal vigilar la liquiditat. Devem disposar de suficient liquiditat per adquirir els productes que anem a tenir en estoc ja que al principi tot el que comprem ho anem a haver de pagar a compte, els proveïdors no ens coneixen ni tenen confiança amb nosaltres per acceptar una altra forma de pagament. Seria important no adquirir molts productes que ens poden deixar sense liquiditat i ens poden augmentar els costos d'emmagatzematge, és millor començar amb un escenari més conservador que minimitzi els riscos, inversió i ens ajudi a anar estudiant la viabilitat. En quant a l'aspecte de viabilitat econòmica d'aquest projecte, cal tindre en compte dos escenaris. El primer d'ells és que atès que es tracta d'un desenvolupament realitzat com a projecte final de màster el cost del mateix serà totalment cero. No obstant, una vegada implantat i lliurat pot ser necessari la realització de ampliacions o tasques de millora les quals serien remunerades. L'altre escenari seria si aquest projecte s'hagués de desenvolupat per un autònom informàtic o per una empresa especialitzada. En el primer dels casos el cost sempre és menor ja que es realitzat per un únic treballador. En el segon dels casos el cost sol ser més elevat però també més professional. En ambdós escenaris, tenint en compte el projecte que s'ha de desenvolupar, el temps emprat i respectant la utilització de programari lliure pot estar en torn a entre uns 500 i 2.000 euros.. 11/81.

(12) TFM.CREACIÓ DE WEB DE VENTA DE COMPONENTS INFORMÀTICS. SAÜL PÉREZ PUIG. 2.6 OBJECTIUS Els objectius de fer un anàlisi inicial del projecte és respondre les següents preguntes: Ho podem / sabem fer? Sí, ja que disposem de les ferramentes necessàries (Prestashop, bloc de notes o notepad++, servidor web Apache, etc) i dels coneixements necessaris adquirits amb aquest Màster, anteriorment i els nous coneixements que adquirirem durant la realització del mateix. Soluciona realment el problema del client? Absolutament, ja que anem a realitzar un projecte específicament per a solucionar les necessitats del client. Per a aquest motiu es realitzaran Anàlisis de Requeriments constants que ens asseguraran que estem realment soluciona el problema del client. Obtenim beneficis? L'obtenció de beneficis és un tema que s'espera d'aquest projecte ja que anem a realitzar una plataforma que cobreix una necessitat cada vegada major que és la de les compres per Internet en una societat cada vegada més informatitzada. Per tant, podem dir que els objectius general que pretén aconseguir l'empresa amb la creació d'aquesta botiga en línia són: • Expansió geogràfica del mercat. Mitjançant la botiga en línia es podrà vendre a tothom sense limitacions de zones com podria ocórrer amb una botiga física. • Augmentar els beneficis generals, és a dir, obtindre una altra via d'entrada de beneficis, a més de la botiga física i del negoci de serveis informàtics • Negoci obert les 24 hores. selecciona tot el text. Una dels grans avantatges de tenir una botiga en línia és poder competir durant tot el dia amb negocis similars al seu. • Reducció de despeses. Amb una botiga en línia les despeses seran mínimes i solament es deurà preocupar de la bona atenció al client i el correcte enviament de les comandes. • Reducció dels estocs No es necessita tenir estoc de grans quantitats. Si es sap triar els distribuïdors d'una forma correcta, no necessitarem comprar estoc per endavant per servir-ho in situ al client sinó que podrem reduir estalvis en la compra d'estoc fins que el client no ens hagi efectuat el pagament. • Reducció de personal, cost i temps de treball. Amb una botiga en línia solament s'haurà de dedicar temps quan hagin realitzat una comanda, és el client el que crea la seva comanda i vostè solament es preocupa de veure el correcte pagament i posterior enviament. • Obtindre una base de dades de clients als quals poder enviar ofertes i promocions específiques al mercat objectiu.. 12/81.

(13) TFM.CREACIÓ DE WEB DE VENTA DE COMPONENTS INFORMÀTICS. SAÜL PÉREZ PUIG. 3. ANÀLISI DE REQUERIMENTS. 3.1. INTRODUCCIÓ Consisteix en identificar què ha de fer el sistema, i no com. Aquesta tasca és necessària pel fet que sempre hi ha 2 parts involucrades en el desenvolupament del projecte: client i desenvolupador. Al desenvolupador, normalment, li costa entendre les necessitats del client. I el client sovint no entén allò que vol fer el desenvolupador. Això provoca un problema de mala comunicació, el qual ha de solucionar-se durant aquesta fase. La persona encarregada de realitzar aquesta fase rep el nom d’analista. Hi ha 2 activitats principals que cal realitzar en l’anàlisi de requeriments: • •. Comprensió del problema Especificació de requeriments. El document desenvolupat en aquest punt és l'open issues. Comprensió del problema El problema consisteix en el desig de ampliar un negoci de venda de tintes i diferents components hardware com a segment complementari a un negoci consistent en la venda de tot tipus de material hardware, i pot ser hardware (un possible requeriment posterior) i una ampliació geogràfica del negoci. Aquest problema s'ha d'abordar amb el desenvolupament d'una plataforma web comercial a partir de la plataforma lliure Prestashop i els diferents mòduls que incorpora. Especificació de requisits He classificat els requeriments en aquesta memòria en 3 tipus com són: • Requisits funcionals • Requisits no funcionals • Altres requeriments El nom del portal web acordat és inicialment: "kyvinfoshop". Aquest nom inclou el nom de l'empresa del client "kyvinfo" i afegeix el concepte "shop" Atés que és tracta d'una botiga en línia.. 13/81.

(14) TFM.CREACIÓ DE WEB DE VENTA DE COMPONENTS INFORMÀTICS. SAÜL PÉREZ PUIG. 3.2. REQUERIMENTS FUNCIONALS 3.2.1. Requeriments funcionals del portal web Els requeriments funcionals fan referència al comportament de l'aplicació, amb totes aquelles funcionalitats que la integren. Aquests requeriments funcionals estan representats en els diagrames d'ús per a cada tipus d'usuari present en el projecte. A més, es presenten els diagrames de seqüència de cadascun d'aquests requisits funcionals. Un primer anàlisi de requeriments ha donat els següents requisits expressats per l'empresari (el nostre client). Aquestos requisits inicials són els següents: •. •. • •. • •. •. El primer requisit és el desenvolupament d'una plataforma web d'estil modern i dinàmic que atregui l'atenció dels clients. Aquesta web es destinarà a la venda de components informàtics (tipus webs de tendes informàtiques com PCBOX o PCComponentes) amb els components hardware més actuals en cada moment. El empresari requereix un sistema d'entrada i desconnexió de clients registrats per a les operacions de compra d'articles a partir dels requeriments de l'empresari i dels habituals en aquest tipus de webs. Així com el web pertanyent al client registrat on dispose de tota la informació personal i comercial. Desenvolupar un sistema personalitzat del pagament del client mitjançant PayPal i targeta de crèdit/dèbit. L'empresari demana la generació d'informes per a la gestió més acurada del catàleg / estoc de productes i per poder planificar l'entrada de nou estoc i / o facilitar la seva sortida. Es pretén que la gestió dels clients es puga realitzar de manera personalitzada d'acord amb les seves necessitats i prioritats de gestió de clients. El client desitja que d'acord amb uns objectius configurables i amb diferents prioritats arribi a recomanar ajustar preus per satisfer-los optimitzant així el marge de beneficis i la gestió del magatzem al llarg de la temporada. Un sistema de suport i resolució de problemes mitjançant el correu electrònic.. 3.2.2. Requeriments funcionals d'usuari El portal web, al igual que la majoria de tendes en línia disposa de diferents nivells d'usuari. Concretament s'han establert 3 tipus diferents (usuari no registrat, usuari registrat i administrador), cadascun amb requisits funcionals específics. Així mateix, existirà un nivell de privilegis: el primer nivell format per l'usuari no registrat, un segon nivell en el que estarà l'usuari registrat i finalment el tercer nivell format per l'administrador de l'aplicació. Els usuaris de cada nivell tindran assignades les seves funcionalitats però a més heretaran les dels nivells inferiors. D'aquesta manera, els usuaris del tercer nivell podran accedir a les seves funcionalitats i a més a les funcionalitats dels perfils del segon i primer nivell de privilegis. En el quadre següent es mostra la relació entre nivells.. 14/81.

(15) TFM.CREACIÓ DE WEB DE VENTA DE COMPONENTS INFORMÀTICS. SAÜL PÉREZ PUIG. 3.2.2.1. Requisits d'usuari no registrat L'usuari no registrat o visitant ocasional, disposarà dels següents requisits funcionals: •. • • •. Accés al contingut públic: Els usuaris no registrador podran entrar al portal WEB per accedir a consultar informació referent a l'empresa, posar-se en contacte amb el servei d'atenció al client via correu electrònic, etc Consultar Catàleg de productes: L'aplicació WEB ha de permetre a els usuaris no registrats accedir al catàleg de productes que ofereix l'empresa. Consultar promocions: El portal WEB permetrà a els usuaris no registrats accedir a consultat les promocions i ofertes que existisquen en cada moment establertes per l'empresa. Registrar-se: Els usuaris no registrats podran registrar-se en la WEB, mitjançant el mòdul corresponent. Per a això hauran d'emplenar un formulari amb les dades necessàries i acceptar els termes legals sobre difusió i gestió de dades.. 3.2.2.2. Requisits d'usuari registrat L'usuari registrat tindrà les mateixes funcionalitats que l'usuari no registrat i, a més, disposarà dels següents requisits funcionals: •. •. •. Autenticar-se: Tots aquells usuaris que hagin realitzat el seu registre en la base de dades del portal, hauran de fer una autenticació (o log-in), per poder accedir al contingut protegit, i a les funcionalitats especifiques al perfil d'usuari assignat al seu registre. Realització de compres: Aquells usuaris que hagin estat correctament registrats i que es troben en aquest moment autenticats, podran realitzar compres a través del portal. Aquestes compres s'aniran afegint a la cistella de la compra i l'usuari podrà passar per caixa en qualsevol moment. Realització dels pagaments: Els usuaris autentificats que tinguen la cistella amb algun producte de la tenda, poden concloure la compra mitjançant el pagament dels productes. Aquest pagament es deurà poder realitzar amb targeta bancaria o PayPal.. 3.2.2.3. Requisits d'usuari administrador 15/81.

(16) TFM.CREACIÓ DE WEB DE VENTA DE COMPONENTS INFORMÀTICS. SAÜL PÉREZ PUIG. L'usuari administrador heretarà les funcionalitats disponibles per als nivells inferiors d'usuari de l'aplicació, i a més disposarà dels següents requisits funcionals: • •. •. •. •. •. •. •. Gestió general del portal de Prestashop: L'administrador tindrà accés i control total sobre totes les funcionalitats i paràmetres que proporciona Prestashop. Gestió del transport: Segons els tipus de transport que es tinga contractat per fer les entregues dels productes venuts, es podran gestionar mitjançant un mòdul per a poder configurar tot el relacionat en aquest àmbit. Gestió del tema del portal: Mitjançant el mòdul destinat a tal funció l'administrador podrà canviar el tema del portal i maquetar-ho al seu gust mitjançant l'edició dels paràmetres CSS, logos, icones i altres. Pujar arxius/imatges al servidor: L'administrador ha de poder pujar arxius i imatges al servidor. La inclusió d'imatges es deurà fer a través del mòdul corresponent on s'obtindrà l'enllaç corresponent per després poder utilitzar-se. La pujada d'arxius de mòduls (en format zip o tar) haurà de fer-se en el mòdul corresponent. Gestionar BBDD: L'administrador de l'aplicació tindrà lliure accés a la base de dades. Això li permetrà gestionar possibles incidències que ocorrin durant el funcionament del portal (donar de baixa usuaris, eliminar continguts, etc.) Gestió de promocions: En qualsevol moment i a criteri de l'empresari, es podran crear promocions i ofertes dels productes que per promoció, marketing o altres necessitats així es desitge. Classificació d'usuaris: L'usuari administrador serà l'encarregat de determinar a quin perfil d'usuari pertany cada usuari. Per defecte, els usuaris seran afegits al la base de dades com a usuaris registrats. Gestió de perfils: A cada perfil d'usuari, com ja s'ha explicat, li corresponen unes determinades funcionalitats. L'administrador, en el cas que sigui necessari, podrà canviar aquestes associacions o afegir noves, de manera que se li puguin afegir funcionalitats a cada perfil d'usuari.. 3.2.3. Diagrames de casos d'ús Per a poder entendre millor les especificacions dels requeriments dels diferents tipus d'usuaris utilitzarem els casos d'ús següents que representen als 3 actors existents en aquest escenari: Usuari no registrat, registrat i administrador.. 3.2.3.1. Casos d'ús d'usuari no registrat. 16/81.

(17) TFM.CREACIÓ DE WEB DE VENTA DE COMPONENTS INFORMÀTICS. SAÜL PÉREZ PUIG. CAS D'ÚS: Accés al contingut públic Descripció. Actors. Aquest escenari és produeix quan Tots un usuari accedeix al contingut públic del portal. Precondició Accedir al portal mitjançant un navegador web.. Flux principal: 1. L'usuari accedeix al portal mitjançant un navegador web. Postcondició: 1. El portal s'ha de mostrar correctament. CAS D'ÚS: Consultar catàleg de productes Descripció. Actors. Aquest escenari és produeix quan Tots un usuari accedeix al contingut públic del portal i consulta el seu catàleg.. Precondició Accedir al portal mitjançant un navegador web.. Flux principal:. 1. 2.. L'usuari accedeix al portal mitjançant un navegador web. L'usuari accedeix a les diferents seccions i productes del portal.. Postcondició: 1. El portal s'ha de mostrar correctament. 2. El portal ha de mostrar correctament els productes existents amb la informació i preus actuals.. 17/81.

(18) TFM.CREACIÓ DE WEB DE VENTA DE COMPONENTS INFORMÀTICS. SAÜL PÉREZ PUIG. CAS D'ÚS: Consultar promocions Descripció. Actors. Aquest escenari és produeix quan Tots un usuari accedeix al contingut públic del portal. Precondició Accedir al portal mitjançant un navegador web.. Flux principal:. 1. 2.. L'usuari accedeix al portal mitjançant un navegador web. L'usuari accedeix a la secció de promocions del portal existents actualment.. Postcondició: 1. El portal s'ha de mostrar correctament. 2. El portal ha de mostrar les diferents promocions que existeixen en el portal. Si ha fet clic sobre una promoció en concret es mostrarà aquesta. CAS D'ÚS: Registrar-se Descripció. Actors. Aquest escenari és produeix quan Usuari no registrat un usuari accedeix al mòdul de registre del portal.. Precondició Accedir al portal mitjançant un navegador web. No ser usuari registrat.. Flux principal:. 1. 2. 3. 4.. L'usuari accedeix al portal mitjançant un navegador web. L'usuari accedeix a la secció de registre de nous usuaris. L'usuari introdueix les dades de registre. Aquestes dades queden registrades en la base de dades.. Postcondició: 1. El portal s'ha de mostrar correctament. 2. El portal ha de mostrar el formulari de registre. 3. Les dades introduïdes seran validades per comprovar que són correctes. Aquesta validació serà tant des del costat del client com del servidor. 4. La informació de registre està guardada en la base de dades.. 3.2.3.2. Casos d'ús d'usuari registrat. 18/81.

(19) TFM.CREACIÓ DE WEB DE VENTA DE COMPONENTS INFORMÀTICS. SAÜL PÉREZ PUIG. CAS D'ÚS: Autenticar-se Descripció. Actors. Permet a l'usuari canviar el seu Usuari registrat nivell d'usuari no registrat a usuari autenticat i totes les funcionalitats que açò li atorga.. Precondició Haver-se registrat prèviament en el portal.. Flux principal: 1. L'usuari accedeix al portal web 2. L'usuari accedeix al mòdul d'autenticació d'usuaris. 3. L'usuari s'autentica correctament. Postcondició: 1. Es mostra correctament la web a l'usuari. 2. El portal mostrar el formulari d'autenticació. 3. L'usuari adquireix els privilegis d'un usuari registrat. CAS D'ÚS: Realització de compres Descripció. Actors. Precondició. Permet a l'usuari autenticat afegir Usuari registrat i autenticat Haver-se autenticat en el portal. productes en la cistella per al seu prèviament en el sistema posterior procés de compra Flux principal: 1. L'usuari entra en la descripció detallada d'un producte. 2. L'usuari realitza addiccions de productes a la seva cistella de la compra. Postcondició: 1. Es mostra el producte seleccionat de forma detallada i amb l'opció de compra del mateix. 2. L'usuari afegeix el producte dins de la seva cistella de productes a comprar.. 19/81.

(20) TFM.CREACIÓ DE WEB DE VENTA DE COMPONENTS INFORMÀTICS. SAÜL PÉREZ PUIG. CAS D'ÚS: Procés de pagament Descripció. Actors. Precondició. Permet a l'usuari realitzar el Usuari registrat i autenticat Haver-se autenticat en el portal. pagament d'aquells productes que prèviament en el sistema Haver afegit articles en la cistella desitja comprar. de la compra. Flux principal: 1. L'usuari accedeix al mòdul de finalització de compra. 2. L'usuari confirma el seu desig de comprar 3. Apareix el TPV virtual per a la introducció de les dades per part de l'usuari. 4. Es finalitza la compra mitjançant la confirmació del portal que tot ha estat correcte. Postcondició: 1. Es mostra correctament el mòdul de cistella de la compra amb tots els productes afegits per l'usuari 2. Es mostra la següent pàgina que permet el procés de pagament. 3. Es realitzen les connexions amb el TPV virtual per a la comprovació de les dades introduïdes per l'usuari. 4. Es realitza tot el procés corresponent al de la compra dels articles, així com al cobrament de l'import corresponent mitjançant el TPV virtual i la comunicació del procés a l'usuari mitjançant el portal i un correu electrònic. 3.2.3.3. Casos d'ús d'usuari administrador. CAS D'ÚS: Gestió general del portal de Prestashop. 20/81.

(21) TFM.CREACIÓ DE WEB DE VENTA DE COMPONENTS INFORMÀTICS. Descripció. Actors. SAÜL PÉREZ PUIG. Precondició. Utilització del portal d'un usuari Usuari registrat prèviament en el Ser administrador del portal i que s'ha autenticat prèviament com sistema com administrador. haver-se autenticat com a tal. a usuari administrador. Flux principal: 1. L'usuari s'autentifica com administrador. 2. L'administrador disposa del menú de gestió general amb totes les funcionalitats que incorpora. Postcondició: 1. Es mostra correctament la web d'administrador de l'usuari. 2. L'administrador por accedir a gestionar totes les funcionalitats que li proporciona Prestashop.. CAS D'ÚS: Gestió del tema del portal Descripció. Actors. Precondició. Modificació del portal web Usuari registrat prèviament en el Ser administrador del portal i mitjançant temes preestablerts i sistema com administrador. haver-se autenticat com a tal. personalització dels mateixos. Flux principal: 1.l'administrador accedeix al mòdul de gestió de Prestashop: Preferencias -> Tema. 2. Canvia el tema general del portal 3. Afegeix els logos de capçalera, correus electrònics i factures. 4. Afegeix una nova icona 5. Personalitza la resta de paràmetres visuals del portal. Postcondició: 1. Es mostra correctament la web d'administració a l'usuari. 2. El tema general del portal es mostra amb les característiques del nou tema. 3. El portal utilitza els nous logos establerts. 4. La nova icona es mostra en el navegador. 5. Els paràmetres modificats es mostren correctament ara en el portal.. 21/81.

(22) TFM.CREACIÓ DE WEB DE VENTA DE COMPONENTS INFORMÀTICS. SAÜL PÉREZ PUIG. CAS D'ÚS: Pujar arxius/imatges al servidor Descripció. Actors. Precondició. Afegir imatges al servidor que Usuari registrat prèviament en el Ser administrador del portal i podran ser utilitzades amb sistema com administrador. haver-se autenticat com a tal. distintes finalitats dins de la botiga en línia (imatges de fons, per a events especials, etc.). Així com qualsevol mòdul o fitxer d'actualització o que es vulgui disposar en el portal. Flux principal: A) Si es tracta d'imatges: 1. L'usuari accedeix al apartat: Catálogo -> Adjuntos. 2. Es procedeix a inserir una nova imatge prement el botó: "Añadir nuevo". 3. S'omplin les dades per a adjuntar el nou fitxer 4. Actualització dels fitxers ja existents. 5. Eliminació dels fitxers existents. B) Si es tracta d'arxius: 1. L'usuari accedeix al apartat: Módulos -> Módulos. 2. Es procedeix a pujar una nou mòdul prement el botó: "Añadir nuevo módulo". 3. S'omplin les dades per a adjuntar el nou mòdul 4. Instal·lació d'un mòdul pujat al servidor. 5. Actualització dels mòduls ja existents. 6. Eliminació dels mòduls existents.. 22/81.

(23) TFM.CREACIÓ DE WEB DE VENTA DE COMPONENTS INFORMÀTICS. SAÜL PÉREZ PUIG. A) Postcondició cas d'ús pujar imatges: 1. Es mostra correctament la pàgina de inserció d'arxius a l'usuari. 2. Es mostra el formulari on s'especificaran les dades i el fitxer a pujar. 3. El fitxer es pujat al servidor del portal puguen sent utilitzat per l'administrador. 4. Els fitxers actualitzats es modificaran en el sistema. 5. Els fitxers eliminats seran esborrats del servidor i del portal web. B) Postcondició cas d'ús pujar mòduls: 1. Es mostra correctament la pàgina de inserció de mòduls a l'usuari. 2. Es mostra el formulari on s'especificaran les dades i el fitxer a pujar. 3. El fitxer es pujat al servidor del portal i es mostrarà en la llista de mòduls disponibles. 4. El mòdul quedarà instal·lat en el sistema. 5. Els mòduls actualitzats es modificaran en el sistema. 6. Els mòduls eliminats seran esborrats del servidor i del portal web.. CAS D'ÚS: Gestionar la BBDD Descripció. Actors. Consulta, modificació i eliminació Disposar del nom d'usuari d'informació existent en la base de contrasenya de l'administrador. dades. Flux principal: 1. L'usuari accedeix a la següent UR: "servidor":8080/phpmyadmin 2. Introduir nom d'usuari i contrasenya en el formulari. 3. Seleccionar la bases de dades de Prestashop. 4. Realitzar consultes, modificacions i eliminació de dades.. 23/81. Precondició i Ser administrador del portal..

(24) TFM.CREACIÓ DE WEB DE VENTA DE COMPONENTS INFORMÀTICS. SAÜL PÉREZ PUIG. Postcondició: 1. Es mostra correctament el formulari de phpmyadmin per a la gestió de dades. 2. El sistema comprova que les dades siguen correctes i mostra la pàgina de gestió de BBDD de phpmyadmin. 3. Es mostraran les taules que conformen les taules de la base de dades de Prestashop. 4. Es mostraran, actualitzaran i eliminaran les dades corresponents.. CAS D'ÚS: Gestió del transport Descripció. Actors. Precondició. Establiment de les condicions del Usuari registrat prèviament en el Ser administrador del portal i transport així com les empreses sistema com administrador. haver-se autenticat com a tal. transportistes. Flux principal: a) GESTIÓ DELS TRANSPORTISTES: 1. L'usuari accedeix al mòdul de gestió dels transportistes: Transporte -> Transportistes. 2. S'insereix un nou mitjà de transport de productes a través del botó: "Añadir Nuevo" 3. S'afegeixen les dades del transportista amb les seves característiques. 4. Es modifica un transportista ja existent. 5. S'esborra un transportista existent. B) GESTIÓ DEL TRANSPORT 1. L'usuari accedeix al mòdul de gestió del transport: Transportes -> Transporte. 2. S'introdueixen les noves condicions del transport de productes.. 24/81.

(25) TFM.CREACIÓ DE WEB DE VENTA DE COMPONENTS INFORMÀTICS. SAÜL PÉREZ PUIG. Postcondició: a) GESTIÓ DELS TRANSPORTISTES: 1. Es mostra correctament la pàgina de Gestió dels transportistes. 2. Es mostra el formulari per a poder inserir un nou transportista. 3. El nou mitjà de transport queda inserit en la base de dades del sistema. 4. Les dades actualitzades queden modificades en el sistema. 5. El transportista esborrat ja no forma part de la tenda. B) GESTIÓ DEL TRANSPORT 1. Es mostra correctament la pàgina de gestió del transport. 2. Es queden gravades en el sistema les dades introduïdes. CAS D'ÚS: Gestió del catàleg Descripció. Actors. Precondició. Inserció i gestió dels productes que Usuari registrat prèviament en el Ser administrador del portal i conformaran part del catàleg de la sistema com administrador. haver-se autenticat com a tal. botiga en línia. Flux principal: 1. L'administrador accedeix al mòdul de gestió de productes: Catálogo -> Productos 2. Insereix un nou producte al catàleg de la botiga amb tota la informació necessària 3. Modifica els productes existents per a la seua actualització o eliminació 4. Elimina un producte del catàleg. Postcondició: 1. Es mostra correctament la web de gestió de productes a l'usuari. 2. El nou producte afegit s'agrega a la base de dades i forma part del catàleg de productes de la botiga en línia. 3. El producte actualitzat mostra les noves modificacions. 4. El producte es eliminat de la base de dades i del portal.. 25/81.

(26) TFM.CREACIÓ DE WEB DE VENTA DE COMPONENTS INFORMÀTICS. SAÜL PÉREZ PUIG. CAS D'ÚS: Gestió de comandes Descripció. Actors. Precondició. Utilització del portal d'un usuari Usuari registrat prèviament en el Ser administrador del portal i que s'ha autenticat prèviament en sistema com administrador. haver-se autenticat com a tal. el sistema com a usuari administrador. Flux principal: 1. L'administrador accedeix al mòdul de gestió de les comandes: Pedidos -> Pedidos. 2. Afegeix una nova comanda mitjançant el botó: "Añadir nuevo" 3. Ompli les dades del formulari per a crear una comanda. 4. Modifica les comandes existents actualment ja siga pels usuaris o per l'administrador i amb qualsevol estat. 5. Esborra qualsevol comanda. Postcondició: 1. Es mostra correctament la pàgina web de gestions de comandes. 2. Es mostra a l'usuari el formulari que permet a l'administrador crear una comanda. 3. S'insereix la comanda en la base de dades del sistema. 4. S'actualitza la comanda amb les dades modificades. 5. S'esborra la comanda del sistema, la qual no es procedirà a servir.. 26/81.

(27) TFM.CREACIÓ DE WEB DE VENTA DE COMPONENTS INFORMÀTICS. SAÜL PÉREZ PUIG. CAS D'ÚS: Gestió de promocions Descripció. Actors. Precondició. Creació d'ofertes i promocions de Usuari registrat prèviament en el Ser administrador del portal i productes. sistema com administrador. haver-se autenticat com a tal. Flux principal: 1. L'administrador accedeix al mòdul de regles de preus: Reglas de precios -> Reglas del catálogo 2. Prem el botó de "Añadir nuevo" 3. Ompli les dades del producte que estarà en promoció amb el preu i el període de vigència. 4. Actualitza un producte en promoció. 5. Esborra un producte en promoció. Postcondició: 1. Es mostra correctament de gestió de promocions a l'usuari. 2. Es mostra la web per a poder afegir un nou producte en promoció. 3. Es guarda el producte amb la informació introduïda en la base de dades i es mostra en la web quan comence la vigència. 4. La web mostra les noves dades actualitzades del producte. 5. El producte esborrat deixa d'aparèixer en promoció.. CAS D'ÚS: Gestió d'usuaris Descripció. Actors. Precondició. Gestió dels clients per a poder Usuari registrat prèviament en el Ser administrador del portal i consultar, actualitzar o eliminar sistema com administrador. haver-se autenticat com a tal. informació o clients. Veure informació de comandes i d'altres. Flux principal: 1. L'administrador accedeix al mòdul de gestió de clients: Clientes -> Clientes. 2. Prem el botó de "Añadir nuevo" 3. Ompli les dades del nou client a afegir. 4. Actualitzar dades de clients existents. 5. Esborra clients existents en el portal. Postcondició: 1. Es mostra correctament el mòdul de gestió de clients. 2. Apareix el formulari per a la inserció de nous clients. 3. Es crea un nou client que serà afegit a la base de dades del sistema. 4. Es guardaran les noves dades en la base de dades. 5. Els usuaris esborrats ja no formaran part del portal web i no podran autenticar-se en el sistema.. 27/81.

(28) TFM.CREACIÓ DE WEB DE VENTA DE COMPONENTS INFORMÀTICS. SAÜL PÉREZ PUIG. 3.3. REQUERIMENTS NO FUNCIONALS Els requeriments no funcionals tenen a veure amb característiques que d'una o una altra forma puguin limitar el sistema. Aquests requeriments es basen en restriccions imposades pel client o be sorgides per successos previstos o imprevistos i que afecten al disseny final. Normalment són quantificables. Alguns exemples són, el rendiment (en temps i espai), interfícies d'usuari, fiabilitat, manteniment, seguretat, portabilitat, estàndards,etc. • • • • • •. Compliment de la LOPD per el que es refereix als fitxers de dades i drets dels clients. Compliment de la LSSI pel que es refereix al sistema de cobrament. Control de totes les entrades dels usuaris. La seguretat de les dades: el servei haurà de tenir restriccions d'accés físic. L'aplicació haurà de seguir els estàndards web per al posicionament en els cercadors. El portal web haurà de seguir tècniques SEO per al posicionament. 3.4. ALTRES REQUERIMENTS Dins d'aquest apartat quedaran registrades tots aquells requeriments de l'empresa que no poden englobar-se en els apartats anteriors i que són matisos o puntualitzacions menors en el desenvolupament o en el funcionament del projecte. •. Totes les imatges utilitzades per al portal seran en format jpg o png i no deuran superar els 300kb. • La informació dels clients guardada en les bases de dades hauran d'estar en minúscula a excepció de la primera lletra dels noms propis, llocs geogràfics. • Intentar crear un sistema àgil i de fàcil utilització tant per al client com per a l'administrador del portal. • Tant la pàgina web com el sistema d'administració hauran d'estar en el llenguatge castellà. • S'utilitzarà un gestor de continguts per a aconseguir un resultat final més professional. • S'utilitzarà per al seu desenvolupament programari lliure. • Es desenvoluparan o reutilitzaran mòduls gratuïts, mai comprats. • El portal podrà executar-se en qualsevol navegador amb qualsevol sistema operatiu. 28/81.

(29) TFM.CREACIÓ DE WEB DE VENTA DE COMPONENTS INFORMÀTICS. SAÜL PÉREZ PUIG. 4. DISSENY. 4.1 INTRODUCCIÓ En aquest capítol s'analitzarà la solució proposada als requeriments del projecte. Per tant, totes les decisions que s'han pres, i que estan presents en aquest capítol, condicionen la resolució final del projecte, i inclusivament, les possibles ampliacions o millores d'aquest. En primer lloc s'analitzen els entorns de desenvolupament que s'empraran en implementació dels requisits funcionals del projecte, descrivint els motius pels quals s'han seleccionat. A continuació es descriu la configuració de la plataforma on es donarà servei a l'aplicació. En el següent apartat s'enumeren i descriuen les diferents capes de l'aplicació (entorn d'usuari, motor de l'aplicació i capa de dades). En aquest mateix capítol es descriu l'estructura de la base de dades de l'aplicació, amb una descripció de les taules que la componen i de les relacions entre les aquestes. A continuació s'explicarà l'arquitectura de l'aplicació, descrivint-se la relació entre les diferents capes de l'aplicació En aquest capítol també s'inclou una descripció del disseny de les diferents interfases d'usuari de l'aplicació. Per últim es descriu l'estructura d'arxius i la política de backups a implementar en el projecte. 4.2. OBJECTIU Dissenyar una plataforma web per a la venda de components informàtics (tipus webs de tendes informàtiques com PCBOX o PCComponentes) amb els components més actuals en cada moment. 4.3. REQUISITS DE DISSENY Per a la implementació de l'aplicació WEB s'utilitzaran diversos entorns de desenvolupament, en funció de les necessitats que implica el projecte. Aquests entorns poden ser aplicats de forma simultània i per tant han de ser compatibles entre ells. En primer lloc disposarem del llenguatge HTML, basat en l'ús d'etiquetes. Aquest llenguatge ens permetrà mostrar informació a l'usuari de manera senzilla i de una forma atractiva. A més permet la interactivitat de l'usuari mitjançant formularis amb els quals obtenir informació. D'altra banda, el seu ús és senzill i permet al desenvolupador explotar totes les seves possibilitats amb una corba d'aprenentatge senzilla.. 29/81.

(30) TFM.CREACIÓ DE WEB DE VENTA DE COMPONENTS INFORMÀTICS. SAÜL PÉREZ PUIG. A tot això, cal afegir que la seva utilització és, a dia d'avui, la més estesa, i per tant la compatibilitat del llenguatge amb els diferents navegadors webs que s'utilitzaran per a l'accés a l'aplicació és total. Com a complement al llenguatge HTML utilitzarem l'entorn de desenvolupament CSS. Crearem un tema mitjançant fulles d'estil que definiran diverses etiquetes, que puguin ser utilitzades per la plataforma, i que ens definiran el disseny del portal. Aquest entorn ens permet crear un disseny per a l'aplicació web que compleixi els requisits d'accessibilitat imposats en el projecte. A més permet al desenvolupador crear un codi clar i estructurat, de manera que el projecte pugui ser modificat o millorat de forma senzilla, simplement modificant l'arxiu CSS del tema .D'altra banda, el seu ús ens permet crear fulles d'estil diferents per modificar el disseny del portal en el futur. Un altre entorn de desenvolupament triat per a la implementació d'aquest projecte és el llenguatge Javascript. Aquest ens permetrà crear funcions que es requereixin en el projecte. El seu ús, dins de el desenvolupament de aquest projecte, es basarà principalment en la comprovació de dades introduïdes per l'usuari, o funcions de validació. Atés que uns dels requisits especificats és que en la base de dades tota la informació introduïda faça ús de la primera lletra en majúscules per als noms propis. Finalment utilitzarem el llenguatge de programació PHP. Aquest entorn ens permetrà gestionar la part dinàmica de l'aplicació, és a dir, serà en enllaç entre la capa de dades i l'entorn d'usuari. La interacció amb la BBDD es realitzarà mitjançant funcionalitats específiques incloses en les llibreries de PHP, la qual cosa facilita aquesta interacció. A més el seu ús és senzill i requereix un temps d'aprenentatge curt per part del desenvolupador. D'altra banda, es tracta de programari lliure, la qual cosa redueix el cost global del projecte, sense necessitat de comprometre funcionalitats. cal destacar que en ser multi plataforma ens permet adaptar-nos al sistema operatiu que existesca en el servidor on funcionarà la web. 4.4. PROGRAMARI DE BASE DE DADES El sistema de gestió de base de dades triat per al desenvolupament del projecte és MySQL. MySQL és un sistema de gestió de base de dades relacional, multi fil i multiusuari, entre altres característiques. Aquest sistema ens permet emmagatzemar i realitzar consultes complexes de les dades de manera eficient i diversos usuaris al mateix temps. MySQL AB, que és des de gener de 2008 una subsidiària de Sun Microsystems i aquesta al seu torn de Oracle Corporation des d'abril de2009, desenvolupa MySQL com a programari lliure en un esquema de llicenciament dual, la qual cosa redueix considerablement les despeses del desenvolupament i implantació del projecte. 4.5. SERVIDOR WEB Una vegada analitzats els entorns de desenvolupament que s'utilitzaran en el projecte, hem de concretar la configuració de la plataforma on es donarà servei a l'aplicació.. 30/81.

(31) TFM.CREACIÓ DE WEB DE VENTA DE COMPONENTS INFORMÀTICS. SAÜL PÉREZ PUIG. En primer lloc, l'aplicació WEB haurà d'estar allotjada en un servidor HTTP Apatxe, d'accés remot a través d'Internet. Aquest haurà de funcionar en un sistema operatiu basat en Linux, com per exemple Centos Server. L'elecció d'aquest sistema operatiu és deguda pel seu entorn lleuger, robustesa i constants actualitzacions del mateix. A més el servidor haurà de donar suport al llenguatge PHP i haurà de tenir configurades i activades les funcions per a connexions a BBDD de MYSQL i les funcions especifiques per a l'accés. 4.6. PLATAFORMA PRESTASHOP. Prestashop és un programari de comerç electrònic GRATUÏT i de codi obert. Amb més de 125.000 tendes virtuals, els comerciants que utilitzen Prestashop sempre es beneficien de les últimes tecnologies. Prestashop conté més de 310 funcionalitats i està creixent contínuament. Totes les funcions són 100% gratis i es poden instal·lar i desinstal·lar amb un sol clic. Prestashop s'acomoda a moltes necessitats. Per a qualsevol suggeriment, ens podem posar en contacte amb un membre de l'equip. Prestashop està compromès a proporcionar la millor experiència de compra en línia per als comerciants i els consumidors. Quant a les característiques tècniques, segons Prestashop, està desenvolupat exclusivament amb php5 (entorn de programació orientat a objectes), això fa que sigui molt lleugera i ràpida d'executar. Aquest tipus de programació li atorga una excel·lent aparença quant al seu aspecte visual. La part del seu panell de control -la no visible per al públic en general-, ens ofereix totes les opcions necessàries per administrar les característiques més habituals d'aquest programari. La part d'administració de la botiga virtual, ofereix pràcticament totes les necessitats per molt complexes que siguin per administrar el nostre lloc virtual i a més molt fàcil d'utilitzar, això ha aconseguit que Prestashop hagi desbancat a tots els seus competidors quant a instal·lacions de tendes virtuals. 31/81.

(32) TFM.CREACIÓ DE WEB DE VENTA DE COMPONENTS INFORMÀTICS. SAÜL PÉREZ PUIG. 4.6.1. Requisits de hosting Per poder instal·lar la nostra botiga en línia, requerim d'un allotjament o hosting (espai virtual per instal·lar els fitxers de l'aplicació). Hi ha infinitat de proveïdors d'aquests serveis, a l'hora de contractar un d'ells, és important tenir en compte a més del preu, la transferència de dades que ens ofereix, així com la quantitat en GB que ens proporciona el nostre nou allotjament. Però tan important com això, és que no devem perdre de vista els requisits que deu tenir el nostre hosting i que devem sol·licitar al nostre proveïdor perquè tot funcioni adequadament. D'altra banda, els requisits mínims del nostre hosting perquè tot funcioni adequadament es podrien resumir en els següents punts: • • • • • • •. Una capacitat d'emmagatzematge el més àmplia possible. Transferència de dades mensual il·limitada. Suport per a diferents formats de bases de dades. Servidor virtual dedicat, Linux, Unix, o Windows. Apatxe web server, Nginx o Microsoft IIS. PHP 5.1 o superior. MySQL 5.0 o superior. (Consultar web Prestashop).. La majoria dels servidors dedicats que es comercialitzen en l'actualitat inclouen de base aquestes característiques. És convenient tenir en compte aquestes consideracions perquè tot funcioni a la perfecció i, així, evitar futurs problemes amb el portal. 4.6.2. El disseny de la base de dades La plataforma Prestashop durant la seva instal·lació, i després d'haver especificat l'adreça del servidor de base de dades, usuari i contrasenya, ens crearà l'estructura base de la base de dades del portal. Podem veure la llista de taules creades en l'annex 1.A. La base de dades utilitzada per Prestashop es una base de dades que utilitza el model relacional. Podem veure la relació de totes aquestes taules amb el següent esquema amb alta resolució en l'annex 1.B. 4.7. REQUERIMENTS DE DISSENY L'empresa per a la que desenvoluparé el portal web, disposa d'una web per a donar a conèixer la resta de serveis que proporciona. No té un disseny fixe preestablert però el disseny que desitjat ha de ser acord amb aquesta web : http://www.kyvinfo.es. 32/81.

(33) TFM.CREACIÓ DE WEB DE VENTA DE COMPONENTS INFORMÀTICS. SAÜL PÉREZ PUIG. A partir d'aquest requeriment hauré de desenvolupar: – – –. El tema: colors, estructura de la web, estil, fonts etc. Logo: a partir del logo de www.kyvinfo.es Icona de la web. 4.7.1. El disseny del portal web L'entorn d'usuari és on se'ns mostra la informació i fins i tot se li sol·licita informació a l'usuari. Aquesta entorn és el que presenta Prestashop als usuaris no registrats i registrats amb les diferències esmentades en punts anteriors. Principalment definirem quatre elements: un gestor d'autenticació (conegut normalment com log-in), un menú lateral, el contingut i un cos de pàgina. Com a complement definirem una capçalera i un peu de pàgina. A més definirem l'estil de capçaleres, enllaços, tipus i grandàries de lletres i altres elements que necessitem. Una vegada definits tots aquests elements podrem aplicar-los al disseny del portal. En primer lloc situarem el cos de la pàgina. Aquest, estarà centrat en relació a l'àrea del navegador i situat sobre el fons. A aquest cos de pàgina li sobreposarem els altres tres elements principals del disseny (gestor d'autenticació, menú, panells laterals i contingut), a més de la capçalera i el peu de pàgina.. 33/81.

(34) TFM.CREACIÓ DE WEB DE VENTA DE COMPONENTS INFORMÀTICS. SAÜL PÉREZ PUIG. Veiem aquestos punts més desenvolupats a continuació: • •. •. •. •. •. •. La capçalera estarà situada en la part superior del cos de la pàgina ocupant tot el seu ample. En aquesta capçalera es pretén mostrar un logotip de l'empresa. El gestor d'autenticació/registre estarà situat en la part superior dreta del cos de la pàgina, ocupant una quarta part aproximadament de l'ample d'aquest. Aquest gestor d'autenticació servirà per a que els usuaris no registrats es pugen registrar i perquè els usuaris registrats de l'aplicació puguin accedir a les funcionalitats específiques del seu perfil d'usuari. El menú general: Aquest menú serà un element estàtic en tot el portal, on mostrarem l'accés a les pàgines en les quals es mostra informació de totes les que componen el portal. El panell lateral de l'aplicació estarà situat a l'esquerra, just sota el gestor d'autenticació, i ocuparà el mateix ample que aquest. Estarà compost per dues parts: una part dinàmica en la qual es mostraran les funcionalitats especifiques a cada perfil d'usuari. El panell de promocions i altres informacions: en aquest panell col·locarem les possibles promocions vigents, informació de contacte, de l'empresa propietària (kyvinfo.es) i qualsevol altra informació d'interès i de màrqueting que l'empresari desitge. El contingut estarà situat al centre dels dos elements anteriors, ocupant la resta de l'ample de la pàgina. En aquest mostrarem la informació i continguts que vam crear necessaris així com els elements d'interacció entre l'usuari i la base de dades. El peu de pàgina en la part inferior del cos. En aquest mostrarem aquella informació addicional que vam crear convenient, com per exemple enllaços a les pàgines oficials dels entorns de desenvolupament utilitzats en el projecte.. La estructura resultant del nostre portal web hauria de ser com es mostra en el esquema que conforma l'Annex 2. 4.7.2. Disseny del tema Prestashop ens ofereix l'oportunitat d'utilitzar temes prefabricats i de personalitzar-los després al nostre gust. A partir d'aquesta utilitzat he instal·lat un tema prefabricat anomenat: "techmarket" el qual es un tema dedicat a la venta de tecnologia. Per a la seua personalització s'ha d'editar el fitxer "global.css" ubicat en la carpeta: .\prestashop\themes\techmarket\css. En l'apartat destinat al desenvolupament comentaré la implementació d'aquest tema per al portal. 4.7.3 Les fonts. – – – –. El tipus de font utilitzats són: Logo: Agency FB Bold Condensed Menú: Arial, 14 px. Apartats del portal: Arial, 12px. Contingut: Arial, 11px. 34/81.

(35) TFM.CREACIÓ DE WEB DE VENTA DE COMPONENTS INFORMÀTICS. SAÜL PÉREZ PUIG. 4.7.4. El logo El logo del portal haurà de crear-se a partir del logo d'aquesta web. El nom provisional del projecte és kyvinfoshop. El logo dissenyat (és provisional però pot ser el definitiu) utilitzant el Gimp és el següent:. 4.7.5. La icona La icona provisional que apareixerà en els navegadors és la bola del món morada retallada i transformada a format ico amb el servei en línia que ens ofereix: http://www.genfavicon.com/es/ El resultat és el següent:. 4.7.6. Disseny provisional L'aparença provisional de la web després d'afegir el logo, la icona, adaptar el tipus i grandària de font i de ajustar els colors, és la següent:. 35/81.