"AÑO DEL DIÁLOGO Y RECONCILIACIÓN NACIONAL"

INGENIERÍA DE SISTEMAS

VII CICLO

INTEGRANTES

IPANAQUE LIZARBE, MARIA FERNANDA

QUEZADA MOSCOL, MIGUEL

QUISPE TRISTÁN, JHERSON

LIMA

2018
 ÍNDICE

Dedicatoria ........................................................................................................................... 4

Titulo del Proyecto .............................................................................................................. 5

Introducción......................................................................................................................... 6

CAPÍTULO I: PROBLEMA DE INVESTIGACIÓN

1.1 Planteamiento del Problema ........................................................................................... 8

1.2 Formulación del Problema ............................................................................................. 8

1.3 Limitaciones ................................................................................................................... 8

1.4 Antecedentes .................................................................................................................. 9-11

1.5 Objetivos ........................................................................................................................ 11

CAPITULO II: MARCO TEÓRICO

2.1 Bases Teóricas: GWT...................................................................................................... 13-22

2.1.1 Definición ............................................................................................................. 13

2.1.2 Características ...................................................................................................... 13-14

2.1.3 Ventajas................................................................................................................ 15

2.1.4 Desventajas .......................................................................................................... 15

2.1.5 Historia ................................................................................................................. 16

2.1.6 Proceso Instalación............................................................................................... 17

2.1.7 Proceso de Aplicación Web con GWT…………………………………………..18-22

2.2 Bases Teóricas: Aplicación Web.................................................................................... 23-24

2.2.1 Definición………………………………………………………………………...23

2.2.2 Ventajas………………………………………………………………………….23

2.2.3 Desventajas……………………………………………………………………..23-24

2.2.4 Características…………………………………………………………………..24

2
CAPÍTULO III: MARCO METODOLÓGICO

3.1 Hipótesis.......................................................................................................................... 26

3.2 Tipo de Investigación ...................................................................................................... 26

3.3 Método y Diseño de Investigación .................................................................................. 26

3.4 Técnicas de Recolección de Datos .................................................................................. 26

Conclusión............................................................................................................................ 27

Referencias Bibliográficas .................................................................................................. 28

Anexos .................................................................................................................................. 30-39

3
 DEDICATORIA
Este presente trabajo está dedicado a todas las personas que
influenciaron para poder terminarlo, también para aquellos que lo
leerán y a nuestro profesor que gracias a su enseñanza aprendimos
a realizar una investigación.

4
INFLUENCIA DEL FRAMEWORK GWT EN REALIZAR
APLICACIONES WEB

5
 INTRODUCCIÓN

Este presente trabajo está realizado por la importancia que tiene Google Web Toolkit
dentro de la realización de las aplicaciones web debido a esto se ha realizado una
investigación teórica para tener un conocimiento certero y veraz de su aplicación e
instalación.

Google Web Toolkit es muy importante ya que reduce la complejidad de realizar la

tecnología AJAX en una aplicación web y va compilando internamente convirtiendo
nuestra clase Java en código HTML y JavaScript para ser entendible por cualquier
navegador.

El contenido del trabajo consta de tres capítulos:

En el capítulo I se explica sobre la problemática, antecedentes y objetivos del proyecto

en general.

En el capítulo II se explica sobre las definiciones de GWT, sus características

principales, ventajas, desventajas, proceso de instalación y aplicación del GWT.

En el capítulo III se centra en el marco metodológico que incluye las hipótesis, tipo de
investigación, técnicas de recolección de datos y la fuente de información.

6
 CAPÍTULO I
PROBLEMA DE INVESTIGACIÓN

7
1.1. Planteamiento del Problema

La investigación a realizar será sobre el framework GWT para poder hacer

aplicaciones webs y observar en que se diferencia del resto de los framework, ya

que GWT ha sido diseñado para proveer soporte en múltiples navegadores, de tal

manera que el promedio de los desarrolladores no deben preocuparse por como

acondicionar la aplicación a cada navegador.

Se podrá observar las desventajas de otros frameworks que brinda a los usuarios

con las aplicaciones web tradicionales, por ejemplo, cuando hay recarga continua de

páginas cada vez que el usuario pulsa sobre un enlace, produciendo tráfico entre el

cliente y servidor, también la poca capacidad multimedia que posee y necesitan

programas externos para su reproducción.

1.2. Formulación del Problema

1.2.1. Problema General

¿Cómo influye el GWT en realizar aplicaciones web?

1.2.2. Problemas Específicos

¿Cómo influye el GWT en la comunicación con los servidores web?

¿Cómo influye el GWT en la creación de interfaz de una aplicación web?

¿Cómo influye el GWT para generar código JavaScript y Html?

1.3. Limitaciones

No existieron limitaciones.

8
1.4. Antecedentes

Martínez, D. (2012). Desarrollo de un Sistema de Gestión de Proyectos mediante el

framework GWT. Valencia, España: etsinf

Resumen:

El proyecto a desarrollar consiste en una aplicación Web cuya finalidad será la de

administrar y controlar los distintos proyectos desarrollados por una organización. Además,

pretende cubrir la necesidad de establecer un seguimiento sobre las tareas desarrolladas por

los distintos técnicos, con lo cual se cumple una doble finalidad: La primera es el control

de las propias tareas en las que se descomponen los distintos módulos de cada proyecto de

la organización y la segunda consiste en un control exhaustivo de las tareas desarrolladas

por los distintos técnicos de la organización y el tiempo empleado en cada una de ellas. Por

tanto, la aplicación puede proporcionar un mecanismo muy útil a la hora de realizar

estimaciones para proyectos futuros, en cuanto a coste, complejidad, duración, etc., así

como la posibilidad de medir el rendimiento y la productividad de los técnicos, que puede

permitir a la organización optimizar futuros proyectos. El proyecto se divide cinco partes

funcionales, las cuales serían:

Gestionar los Proyectos: El sistema deberá gestionar toda la información referente a los

proyectos software desarrollados por una organización. Por lo tanto se contemplarán tareas

de gestión como: alta de proyectos en el sistema, baja de uno o varios de ellos,

modificaciones sobre los datos de cada uno, consultas, etc.

Gestionar los Módulos: El sistema deberá gestionar la información del conjunto de módulos

que constituyen cada uno de los proyectos del sistema. Por tanto debe permitir: añadir

módulos a proyectos, borrar módulos de un proyecto determinado, modificaciones de los

datos de un módulo, consultas, etc.

9
Gestionar las Tareas: El sistema deberá gestionar toda la información relativa a las tareas

que se realizan para construir cada uno de los módulos de los proyectos software. Por tanto

debe incluir actividades como: dar de alta tareas y asociarlas a módulos, especificar el/los

técnico(s) que van a ejecutar cada tarea y cuándo la harán, modificar datos de tareas

existentes, consultas, etc.

Gestionar los Técnicos: El sistema deberá gestionar los técnicos susceptibles de ser

asignados a las tareas de los módulos de los proyectos software, ya sea como responsable o

como desarrollador. Por tanto deberá incluir tareas como: alta de técnicos, baja,

modificaciones, consultas, asignación a tareas de módulos de proyectos, mantenimiento,

etc.

Gestionar las Asignaciones de Técnicos a Tareas: El sistema deberá poder consultar el

conjunto de actividades, desarrolladas por cada técnico asociado a alguno de los proyectos

del sistema, en un periodo de tiempo establecido por el usuario bajo unos criterios

específicos: técnicos de un proyecto dado, técnicos por módulo de un proyecto dado,

técnicos por tarea de un proyecto dado, todos los técnicos del sistema o un técnico en

concreto.

Conclusión:

Una vez terminado el proyecto y cumplido todos los objetivos planteados, me siento capaz

de realizar un portal Web con este framework, desde su configuración, su planificación, su

desarrollo, su testeo y su documentación. He adquirido más conocimientos acerca de un

framework que cada vez está más extendido y es más demandado por la industria hoy en

día, en cuanto a que ofrece la posibilidad de programar de forma más sencilla y facilitando

10
 enormemente la tarea de debug, al ser código java, aprovechando las ventajas que trabajar

en este entorno ofrece. Además, al evitarse el uso de javascript escrito de forma manual, los

típicos errores difíciles de encontrar y los problemas dependientes del navegador

desaparecen. Esto me ha sido útil tanto personalmente como profesionalmente, ya que el

día a día en mi trabajo me exige tener claros los conceptos de esta tecnología, sirviéndome

el presente proyecto para asentarlos tanto de forma teórica como práctica. He podido

apreciar que utilizando GWT, en concreto la aproximación de Activities y Places aquí

implementada ofrece la posibilidad de utilizar el patrón de diseño Modelo-Vista-

Presentador, lo que implica una gran ventaja a la hora de codificar y separar en tareas la

implementación de los proyectos que utilicen este patrón.

1.5. Objetivos

1.6.1 Objetivo General

Determinar cómo influye e en realizar aplicaciones web

1.6.2 Objetivos Específicos

Determinar cómo influye GWT en la comunicación con los servidores web

Determinar cómo influye GWT en la creación de interfaz de una aplicación

web.

Determinar cómo influye GWT para generar código JavaScript y Html.

11
 CAPÍTULO II
MARCO TEÓRICO

12
2.1. Bases Teóricas de la Variable Independiente: GWT

2.1.1 Definición

 Google Web Toolkit (GWT) es un framework de desarrollo en Java de código abierto,

que te permite escapar de la “matriz” de tecnologías usadas actualmente para escribir
aplicaciones AJAX, las cuales son difíciles de manejar y propensas a errores.

 GWT o Google Web Toolkit es un framework creado por Google que permite ocultar la
complejidad de varios aspectos de la tecnología AJAX. Es compatible con varios
navegadores, lo cual es notorio ya que cada navegador suele necesitar código específico
para lograr un front-end correcto en una aplicación web. El concepto de Google Web
Toolkit es bastante sencillo, básicamente lo que se debe hacer es crear el código
en Java usando cualquier IDE de Java y el compilador lo traducirá
a HTML y JavaScript.

 GWT es un compilador, preprocesador, linker y optimizador completo (no sólo

compresión y ofuscación), también se le conoce como generador de JavaScript:
convierte código java a JavaScript.

2.1.2 Características

 Usa Java como lenguaje base para el desarrollo de la aplicación Web, si bien, luego, el
compilador de GWT traduce a JavaScript el código del lado cliente y a Java bytecode el
del lado servidor (al estilo Servlet de Java). Es muy importante esta característica, ya
que el programador acostumbrado a programar en Java tarda poco tiempo en adquirir
los conocimientos necesarios para desarrollar aplicaciones con GWT.

 Dispone de componentes gráficos dinámicos y reutilizables (Widgets). Los

programadores pueden usar estas clases prediseñadas para implementar componentes
y/o comportamientos que, de otra manera, tendrían que crear, tales como botones,
cuadros de texto, arrastrar y soltar o menús en árbol.

13
 Permite una comunicación sencilla con el servidor web. GWT admite un conjunto
indefinido de protocolos de transferencia de información, como JSON y XML. Para
ello, se usa el mecanismo de llamada a procedimiento remoto (del inglés RPC: Remote
Procedure Call) de GWT que permite el establecimiento de comunicaciones Java de una
forma sencilla y eficaz

 Al igual que ocurre con el mecanismo de invocación de métodos remotos (del inglés
RMI: Remote Method Invocation) tradicional de Java, únicamente hay que crear una
interfaz que especifique los métodos remotos que se quieran ejecutar. Después GWT se
encarga de hacer todo por nosotros.

 Acepta el depurado del código Java. Mediante un depurador (debugger) incluido en

GWT.

 Habilita el control de diferentes características del navegador por parte del desarrollador
para mostrar la aplicación con determinadas características o aspectos.

 Se puede mezclar código escrito en JavaScript dentro del código Java creado para
GWT. Para ello, se puede utilizar la Interfaz Nativa JavaScript (JSNI son las siglas en
inglés).

 Tiene soporte para las API´s de Google (inicialmente, soporte para Google Gears, ya
abandonado por Google).

 Los errores comunes en JavaScript son controlados en tiempo de compilación, como la

discrepancia de tipos de datos, simplificando mucho el desarrollo de funciones de
JavaScript complejas.

 Se puede encontrar un amplio conjunto de bibliotecas desarrolladas por Google y

terceros que mejoran las funcionalidades de GWT.

14
2.1.3 Ventajas

 Similar a una aplicación desktop, alto dinamismo de las pantallas.

 No necesita conocimientos de JavaScript.
 Desarrollo ágil.
 Permite avanzar desde un prototipo.
 Multiplataforma, multinavegador.
 Reduce el ancho de banda una vez cargada la aplicación en la cache.
 Reduce la carga en el servidor(los datos que se cargaban en la sesión del servidor
ahora pasan al cliente).
 Permite la misma seguridad de otros frameworks.

2.1.4 Desventajas

 Las aplicaciones desarrolladas con GWT no son indexables por los buscadores de
Internet debido a que sus contenidos se cargan dinámicamente en el navegador.
Existen soluciones que generan la información necesaria que necesitan los buscadores,
pero son difíciles de usar y requieren bastante dedicación por parte del programador.

 Las aplicaciones GWT pueden no funcionar en un navegador muy antiguo. Este tipo
de aplicaciones basan su funcionalidad en descargar en el lado cliente (navegador) un
fichero JavaScript. Si el navegador es muy antiguo, la aplicación GWT no arrancará.

 Las aplicaciones GWT no suelen funcionar en los teléfonos móviles (salvo Android)
debido a las limitaciones del motor JavaScript de los navegadores de los móviles, si
bien muchas veces es posible instalar otros navegadores que sí cargan bien las
aplicaciones. En el caso de móviles de tipo Android (de Google), sí suelen cargar sin
problemas las aplicaciones.

 GWT no evita los problemas de seguridad. Como ocurre en cualquier plataforma de

desarrollo, existen debilidades en el desarrollo que puede aprovechar un hacker para
atacar nuestra aplicación Web. No obstante, las últimas versiones de 8 GWT ya
incluyen muchas mejoras que evitan este tipo de errores y mejoran la seguridad.

15
2.1.5 Historia

El entorno GWT fue creado a finales de 2006 por Google, y anunciado en la conferencia
JavaOne de 2006. Versiones disponibles:

 GWT 1.0 - 17 de mayo de 2006

 GWT 1.1 - 11 de agosto de 2006
 GWT 1.2 - 16 de noviembre de 2006
 GWT 1.3 - 5 de febrero de 2007
 GWT 1.4 - 28 de agosto de 2007
 GWT 1.5 - 27 de agosto de 2008
 GWT 1.6 - 7 de abril de 2009
 GWT 1.7 - 13 de julio de 2009
 GWT 2.0 - 8 de diciembre de 2009
 GWT 2.0.1 - 8 de diciembre de 2009
 GWT 2.0.2 - 2 de febrero de 2010
 GWT 2.0.3 - 12 de febrero de 2010
 GWT 2.0.4 - 2 de julio de 2010
 GWT 2.1.0 - 19 de octubre de 2010
 GWT 2.1.1 - 16 de diciembre de 2010
 GWT 2.2.0 - 11 de febrero de 2011
 GWT 2.3.0 - 3 de mayo de 2011
 GWT 2.4.0 - 8 de septiembre de 2011
 GWT 2.5.0 - 27 de junio de 2012
 GWT 2.5.1 - 15 de enero de 2013
 GWT 2.6.0 - 30 de enero de 2014
 GWT 2.6.1 - 10 de mayo de 2014
 GWT 2.7.0 - 20 de noviembre de 2014
 GWT 2.8.0 - 20 de octubre de 2016
 GWT 2.8.1 - 24 de abril de 2017
 GWT 2.8.2 - 19 de octubre de 2017 actual

Se puede observar en el listado anterior que se han publicado muchas versiones de GWT en un
mismo año. Esto se debe a que Google ha implementado nuevas funcionalidades 4 en este
entorno de desarrollo. Además, los navegadores disponibles en el mercado van evolucionando y
es necesario actualizar el motor de GWT. La buena noticia es que el código de una versión
anterior se puede volver a recompilar con la nueva versión sin necesidad de modificar el código
anterior.

16
2.1.6 Proceso de Instalación del Plugin GWT eclipse

1. Para poder instalar el Plugin GWT V3 necesitamos instalar un eclipse de las

últimas versiones como el neon u oxigen para que sean compatibles y no haya
problemas.

2. Entramos a la página web de eclipse http://www.eclipse.org/download/ y

descargamos eclipse neon 3.

3. Descomprimimos la carpeta y lo ponemos en disco local “C”, la carpeta se

llamara “eclipse”.

4. Abrimos la carpeta eclipse y lo ejecutamos.

5. Aparecerá una ventana donde especificaremos la carpeta que contendrá nuestros

proyectos.

6. Ya abierto eclipse nos dirigimos a Help > eclipse Marketplace y esperamos que
cargue.

7. Aparecerá una ventana llamada Marketplace y en el buscador del pondremos

GWT, apareciendo el Plugin GWT de Eclipse V3 y le daremos instalar.

8. Seleccionamos todas las casillas del Plugin GWT que contiene los SDK y le
damos confirmar

9. Aceptamos los términos y ponemos finalizar.

10. Veremos que aparecerá una nueva opción para hacer aplicaciones con GWT.

17
2.1.7 Proceso de Aplicación con GWT

1. Realizar la aplicación haciendo clic en la opción GWT > New GWT Application
Project

2. Aparecerá una ventana donde se escribirá el nombre del proyecto y el nombre

del paquete y finalizar.

3. Abrirá la estructura del proyecto y dentro de SRC > com.proyectogwt.client

>aparecerá una clase llamada ProyectoGWT.java en donde se realizara la
aplicación web.

18
4. Dentro de la clase ProyectoGWT.java hay una implementación con una
superclase EntryPoint.

5. Crearemos el método de punto de entrada llamado OnModuleLoad (), dentro del

método estarán los botones, cajas de texto y un texto.

6. Podemos agregar nombres de estilo a widgets.

7. Agrega el nombre fiel y sendButton al rootPanel.

19
8. Enfoca el cursor en el campo del nombre.

9. Crear el cuadro de dialogo emergente.

10. Establecer la identificación de un widget accediendo a su elemento.

11. Agregamos un controlador para cerrar el dialogo

20
12. Creamos un controlador para el sendButton y el nameField.

13. Agregamos un controlador para enviar el nombre del servicio.

21
14. Ejecutamos el proyecto para que nos muestre el link de la aplicación.

22
2.2. Base Teórica de la Variable Dependiente: Aplicación Web
2.2.1 Definición

 Las aplicaciones web reciben este nombre porque se ejecutan en la internet. Es

decir que los datos o los archivos en los que trabajas son procesados y
almacenados dentro de la web estas aplicaciones, por lo general, no necesitan ser
instaladas en un computador.
 Las aplicaciones web están relacionado con el almacenamiento en la nube. Toda
la información se guarda de forma permanente en grandes servidores de internet
y nos envían a nuestros dispositivos o equipos los datos que requerimos en ese
momento quedando una copia temporal dentro de nuestro equipo.

2.2.2 ventajas

 Ahorra tiempo. Se puede realizar tareas sencillas sin necesidad de descargar ni

instalar ningún programa
 No hay problemas de compatibilidad. Basta tener un navegador actualizado para
poder utilizarlas
 No ocupan espacio en nuestros discos duro
 Actualizaciones inmediatas como el software lo gestiona el propio desarrollador
cuando nos conectamos estamos usando siempre la última versión que haya
lanzado
 Consumo de recursos bajos dado que toda o gran parte de la aplicaciones no se
encuentra en nuestro ordenador, muchas de las tareas que realiza e software no
consumen recursos nuestros porque se realizan desde otro ordenador.
 Los virus no dañan los datos porque estos están guardados en el servidor de la
aplicación

2.2.3 Desventajas

 Habitualmente ofrecen menos funcionalidades que las aplicaciones de escritorio.

Se debe a que las funcionalidades que se puede realizar desde un navegador son
más limitadas que las que se pueden realizar desde el sistema operativo. Pero
cada vez los navegadores están más preparados para mejorar en este aspecto

23
 La disponibilidad depende de un tercero, el proveedor de la conexión a internet o
el que provee el enlace entre el servidor de la aplicación y el cliente. asi que la
disponibilidad del Servicio está supeditada al proveedor.

2.2.4 Característica

2.2.4.1 Compatibilidad multiplataforma

 Una misma versión de la aplicación puede correr sin problemas en

múltiples plataformas como Windows , Linux , Mac , etc.

2.2.4.2 Actualizaciones

 Las aplicaciones web siempre se mantienen actualizadas y no requieren

que el usuario deba descargar actualizaciones y realizar tareas de
instalación.
 Acceso inmediato y desde cualquier lugar
 Las aplicaciones basadas en tecnologías web no necesitan ser
descargadas, instaladas y configuradas. Además pueden ser accedidas
desde cualquier computadora conectada a la red desde donde se accede
a la aplicación.

2.2.4.3 Menos requerimientos de hardware

Este tipo de aplicación no consume o consume muy poco espacio en disco y

también es mínimo el consumo de memoria ras en comparación con los
programas instalados localmente

24
 CAPÍTULO III

MARCO METODOLÓGICO

25
3.1. Hipótesis

3.1.1. Hipótesis Principal

GWT si influye en la comunicación con los servidores web.

3.1.2. Hipótesis Secundarias

GWT si influye en la comunicación con los servidores web.

GWT si influye en la creación de interfaz de una aplicación web.

GWT si influye para generar código Java Script y Html.

3.2 Tipo de Investigación

Por el tipo de investigación, el presente estudio reúne las condiciones metodológicas de una
investigación descriptiva porque describimos los hechos como se observan, Permitiéndonos
acumular una gran cantidad de conocimientos sobre el mismo tema.

3.3 Método y diseño de Investigación

Los principales métodos que se utilizaron en la investigación fueron: Análisis, Síntesis,

deductivo, inductivo, descriptivo entre otros.

3.4 Técnicas e Instrumentos de recolección de Datos

3.4.1 Técnica

 Análisis documental
 Observación no experimental

3.4.2 Fuente de Información

Dada por la página oficial de Google Web Toolkit: http://www.gwtproject.org/

26
 CONCLUSIONES

 GWT es una gran ventaja para los desarrolladores Java, ya que permite la
implementación en javascript pudiendo desarrollar todo el código con un único
lenguaje Java.

 En GWT el código utilizado por javascript y html autogenera su propio

compilador.

 El código generado automáticamente es compatible con otros navegadores ya

que el compilador de GWT se encarga de definir cada lenguaje de acuerdo a
cada navegador.

27
 REFERENCIAS BIBLIOGRAFICAS

 Martínez, D. (2012). Desarrollo de un Sistema de Gestión de Proyectos mediante el

framework GWT. Valencia, España: etsinf.

 Clodoaldo, R. (2014). Google Web Toolkit. España: Ministerio, cultura y deporte.

 Guido, R. (2009). Google Web Toolkit. Enero 9,2009, de SlideShare

Sitio web: https://es.slideshare.net/Guido_De_Benedetti/Google-Web-Toolkit-904220

 Carrasco, M. (2010). Razones para Usar GWT. Julio 6, 2010, de Paradigma

Sitio web: https://www.paradigmadigital.com/dev/un-punado-de-razones-para-usar-

gwt-en-lugar-de-jquery/

 Debelopment Blog. (2011). Ejemplo básico con GWT. Mayo 21, 2011, de hop2croft

Sitio web: https://hop2croft.wordpress.com/2011/05/21/ejemplo-basico-con-gwt/

28
 ANEXOS

29
 INSTALACIÓN DEL PLUGIN GWT ECLIPSE V3

30
31
32
33
34
35
36
 Proceso de Aplicación con GWT

37
38
39