UNIVERSIDAD TCNICA DE MANAB

FACULTAD DE CIENCIAS INFORMTICAS

ESCUELA DE INGENIERA DE SISTEMAS
INFORMTICOS

MATERIA
APLICACIONES WEB
(NOVIEMBRE 2016 - MARZO 2017)

TEMA: DESARROLLO DE UNA APLICACIN WEB PARA LA

GESTION DE PRODUCTOS DE LA EMPRESA ARTE KAREN EN LA
CIUDAD DE SOSOTE.
INTEGRANTES
Bravo Hidalgo Crystian Alexander
Bowen Moreno Luis
Vlez Macas Cristian
Piguave Jorge
Snchez Vivanco Jefferson Paul

CURSO
VII A

DOCENTE
ING. KEVIN MERO

ECUADOR-PORTOVIEJO
2017
 Desarrollo de una aplicacin web para la exposicin de productos de la
empresa Arte Karen en la ciudad de Sosote.

Las aplicaciones web son aquellas aplicaciones que los usuarios pueden utilizar
accediendo a un Servidor web a travs de Internet o de una intranet mediante
un navegador. En otras palabras, es una aplicacin (Software) que se codifica
en un lenguaje soportado por los navegadores web en la que se confa la
ejecucin al navegador.

En un principio la Web era sencillamente una coleccin de pginas estticas,

documentos, etc., para su consulta o descarga. El paso inmediatamente posterior
en su evolucin fue la inclusin de un mtodo para elaborar pginas dinmicas
que permitieran que lo mostrado tuviese carcter.

En Ecuador, existen muchsimas aplicaciones web, en el caso del gobierno, sus

principales medios de atencin son sus puntos digitales que existen por cada
rea y sub-rea poltica.

El sistema que se va a realizar es una aplicacin web para publicar los productos
que se realizan en empresa Arte Karen en la ciudad de Sosote. Dicho sistema
se encargar de la recepcin de pedidos de los productos de cualquier parte de
la ciudad, la asignacin del precio y su respectivo envi a la ubicacin del
cliente.

Este sistema se realizar con las tecnologas HTML, CSS, frameworks de

javascript: angularjs, jquery y materialize. Adems PHP y MySQL.

Actualmente la empresa necesita virtualizar sus productos en un catlogo

para tener un mayor alcance de ventar, registrarlas y llevar un orden de ventas.
La gestin de productos en aplicaciones web, es la mejor manera de llevar un
registro de estos, al tener virtualizado todos los datos de los mismos, su
manipulacin y exportabilidad tiene una escalabilidad enorme. En el caso de la
empresa Arte Karen se podrn aprovechar todas las ventajas habladas en su
produccin de artesanas en tagua.
Para el sistema se utiliz HTML para la modelacin de la pgina web. Para su
diseo, se apoy en el framework frontend Materialize, para darle un aspecto
materializado que le d el toque moderno y elegante a la aplicacin web.
Se utiliz dos framework de javascript: JQuery, para la validacin de
formularios, el show de noticias en su vista principal y su show de categoras
de producto en la seccin Sobre Nosotros. AngularJS para la administracin
frontend del catlogo y formularios de administrador. A parte con AngularJS se
estableci la comunicacin con PHP, pues ste, es el que interacta con la base
de datos hecha con MySQL para obtener y guardar los datos necesarios y
requeridos.

La aplicacin web estar compuesto por un sistema de base de datos donde se

almacenarn los datos de los clientes y registro de los pedidos de productos, as
como un entorno grafico diseado mediante los lenguajes de programacin
PHP, JAVASCRIPT y HTML. Toda la comunicacin ser de forma remota y
usando recursos web como formularios y un carrito de compras. Adems el
administrador contar con una cuenta con privilegios completos donde recibir
los pedidos y los detalles del pedido.

La aplicacin web desarrollada cuenta con las siguientes caractersticas:

La aplicacin dispone de 2 usuarios (cliente y administrador)

La aplicacin tiene un carito de compra
La aplicacin enva automticamente al administrador la notificacin del
pedido
La aplicacin tiene opcin de validar datos
La aplicacin dispone de funciones como agregar, editar, eliminar
artculo, cliente, y categoras
 La aplicacin dispone las tecnologas web aplicadas en el desarrollo de
la aplicacin web para la empresa Arte Karen.

La metodologa en cascada, tambin llamado modelo en cascada (denominado

as por la posicin de las fases en el desarrollo de esta, que parecen caer en
cascada por gravedad hacia las siguientes fases), es el enfoque metodolgico
que ordena rigurosamente las etapas del proceso para el desarrollo de software,
de tal forma que el inicio de cada etapa debe esperar a la finalizacin de la etapa
anterior.1 Al final de cada etapa, el modelo est diseado para llevar a cabo una
revisin final, que se encarga de determinar si el proyecto est listo para avanzar
a la siguiente fase. Este modelo fue el primero en originarse y es la base de
todos los dems modelos de ciclo de vida. [1]
Se utiliz la metodologa en cascada, de la cual para este proyecto en la fase de
requerimientos, se habl con el dueo de la empresa que expres la necesidad
de hacer una pgina web, que tenga opcin a pedidos de productos y su
visualizacin. En la fase de planeacin se utiliz la plataforma de desarrollo
Sublime Text y la base de datos con Mysql. En la fase de diseo se model los
requerimientos y se construy la arquitectura de la aplicacin web, tratando de
modelar lo mejor posible las funcionalidades que tendr la pgina web extrada
de la fase de requerimiento.
---- Grafico
En la fase de codificacin se utiliz diversas tecnologas clases auxiliares que
ayudaran a las clases funcionales, se implement un conjunto de requisitos
funcionales necesarios y se comprob los errores que podra tener la pgina
web para darle calidad al software. En la fase de despliegue se le entreg la
aplicacin web al dueo del comercio Arte Karen para que compruebe si lo que
se hizo era lo que realmente quera segn manifest el dueo el sistema cumpli
sus expectativas.

Una vez finalizado el proyecto, se puede concluir que:

1. Las aplicaciones web en el comercio es de vitual importancia en un
mundo tan globalizado, de esta manera se mantiene un registro ordenado
y estructurado y tiene un alcance de clientes mayor.
2. La aplicacin web para la gestin de productos permiti al negocio de
artesanas llevar un mejor control de las ventas realizadas y que ms
clientes tuvieran la oportunidad de conocer sus productos y as tener un
mayor alcance de ventas.
3. Los frameworks de javascript son importantes para poder realizar
aplicaciones web de manera ms gil y rda como es el caso de
AngularJS, como por ejemplo sus peticiones http por Ajax, que permiten
realizar una conexin dinmica e idnea con el mdulo de administracin
de PHP.
 BIBLIOGRAFA
1. Wikipediaorg. (2017). Wikipediaorg. Retrieved 15 Febrero, 2017, from
https://es.wikipedia.org/wiki/Desarrollo_en_cascada

2. Google. (s.f.). Angular. Obtenido de https://angularjs.org/

3. hipertexto.info. (s.f.). Obtenido de www.hipertexto.info/documentos/html.htm
4. json.org. (s.f.). Obtenido de www.json.org/json-es.html
5. mozilla.org. (s.f.). Obtenido de https://developer.mozilla.org MDN Tecnologa
Web para desarrolladores
6. php.net. (s.f.). Obtenido de http://php.net/manual/es/intro-whatis.php
7. w3schools.com. (s.f.). Obtenido de www.w3schools.com/html/
 ANEXOS

ANEXO 1: INTERFACES DE LA APLICACIN WEB

Interfaz Principal

Interfaz Ctalogo.
Interfaz login
ANEXO 2: CODIFICACION

$scope.login=function()
{
var user = $scope.user;
var pass = $scope.pass;
$http.post('php/login.php', [{"user":user, "pass":pass}])
.success(function(data)
{
if(data == 1)
{
$scope.state=true;
$localStorage.res = 1;
}
else
{
$scope.errorLogin=true;
$scope.user="";
$scope.pass="";
}
});
};
Funcin de login con AngularJS
$scope.mostrarCatalogo=function()
{
$http.get("php/getProductos.php")
.success(function(data)
{
$scope.productos=data;
$scope.nproducto ={"codigo":parseInt($scope.productos
[$scope.productos.length-1].codigo) + 1, "nombre": "", "pmenor":"", "mpayor":
"", "img": ""};
});
$http.get("php/getCategorias.php")
.success(function(data)
{
$scope.categorias=data;
});
};
Funcin de obtencin de catlogo con AngularJS
$scope.buy=function()
{
$scope.saveCounter=0;
if ($scope.info.nombres!= "" && $scope.info.email!="" &&
$scope.info.telefono!="")
{
$scope.carrito.push($scope.info);
$http.post('php/buy.php', $scope.carrito)
.success(function(data)
{
$scope.saveCounter=1;
$scope.carrito=[];
$scope.info={"nombres":"", "telefono":"", "email":""};
 })
.error(function(data)
{
$scope.saveCounter=-1;
});
}
}
Funcin para comprar productos.