Configurando Ambiente de Desarrollo WEB en Eclipse Neón para Desarrolladores

1. Tema:
Introducción del desarrollo de aplicaciones web
Práctica 01
Nombre del Proyecto: CompuShop
Equipo: Developers
“El conocimiento es libre”
Autores
Iván Luis Jiménez 2171999047
Francisco Aguilar Jacobo 2171999010
Velázquez Carrillo Michel 2122033778
Ulises Ramos Cruz 206204476
Eduardo Figueroa Torres 208243002
Profesor
Hugo Pablo Leyva
19 de mayo del 2017
UNIVERSIDAD AUTÓNOMA METROPOLITANA

2. Introducción al Desarrollo de Aplicaciones Web
Objetivo: Configurar el ambiente de desarrollo
Materiales: IDE Eclipse Neón Java EE para Desarrolladores Web (Eclipse Java EE IDE for
Web Developers)
Apache Tomcat versión 7
Java JDK versión 7
Sistema Operativo Windows, en el caso de esta práctica trabajaremos en Windows 8
Y no puede faltar la inteligencia del ingeniero.
Nombre del proyecto: CompuShop
Descripción del proyecto
Nuestra aplicación WEB tendrá como objetivo atender a clientes que quieran comprar un
artículo o componente de cómputo.
La pantalla de inicio será sencilla, simplemente mostrará el nombre de la empresa y una
pequeña descripción de lo que ofrece la página. Incluirá un pequeño login, será un requisito
para realizar la compra, ya que el cliente también podrá ver los productos y no comprar nada.
Y tendrá una opción que lo mandará al contenido de los productos, organizados por categorías.
El cliente podrá elegir la categoría y elegir otro submenú si así lo desea, también podrá
elegirlo por marcas.
Una vez decidido lo que comprará, con un botón aceptara la compra, y se le mostrara un menú
con las opciones de pago del artículo. Tendrá opciones por si quiere cancelar la compra o
agregar nuevos productos a la cuenta. Hecho esto, se mostrará un mensaje con la cuenta total
y forma de pago, y listo.
Al finalizar se mandará al cliente a una página de encuesta para preguntarle a cerca de cómo
le pareció el servicio, y el cliente podrá dar sugerencias o comentarios.
Todas las compras serán registradas en una base de datos. También las sugerencias,
comentarios, y respuestas del cliente.
Esto sería a grandes rasgos nuestro proyecto.

3. Desarrollo
- Ejecutar Eclipse Neón
- Seleccionar el Workspace
- Presionar el icono de Workbench para entrar al ambiente de desarrollo
Definiendo los siguientes valores para el proyecto web a desarrollar:
- Context root:Compu
- Nombre del proyecto web:CompuShop
- Nombre del proyecto empresarial:CompuEAR
Creando la aplicación Web

4. Colocando el Project name: CompuShop y el EAR Project name: CompuEAR
Click en next
Colocar el proyect root: Compu y activar la casilla para generar web.xml
Hasta este momento debemos tener la siguiente estructura en nuestro IDE.

5. Creando un archivo HTML
Click derecho en WebContent -> New -> HTML File colocamos el nombre y click en Finish

6. Configuración de Ambiente de Desarrollo
Establecer Preferencias para:
- Manejo de archivos .java y .class.
- Formateo de código.
- Preferencias del editor de código java.
- Compilador utilizado.
- Manejo de paquetes e importaciones
Click en la pestaña Windows y click en Preferences
Click en el menú General -> Startup and Shutdown -> Workspace y activar la casilla Promt
for workspcace on startup y click en apply.

7. Estableciendo estilo de código.
Click en menú Java -> Code Style -> Formatter y damos click en el botón import y
buscamos el archivo preferenciasFormatoPersonalizado.xml y click en Apply.

8. Ahora en ese mismo menú peso seleccionando Code Style -> Fields -> Edit…
Colocamos guion bajo (_) y click en OK y en la ventana anterior damos click en Apply.
Ahora click en Java -> Code Style -> Code Templates -> Comments -> Types -> Edit…

9. Editar y debe quedar de la siguiente manera el campo Pattern y click en OK:
Ahora cambiarnos a la siguiente opción y click en Edit…
Y dejarlo de la siguiente manera y click en OK:

10. Ahora en la siguiente opción click en Edit…
Y dejarlo de la siguiente manera:
Click en OK y en la ventana anterior click en Apply.
Ahora organizando importaciones: nos desplazamos hasta la siguiente ruta y dejamos los
paquetes de la siguiente manera auxiliándonos de los botones UP y Down , y colocar los
números indicados en las casillas correspondientes y click en Apply.
En la misma sección agregaremos un nuevo paquete dela siguiente manera:
Click en New… y colocamos: mx.uam.azc.developers.compushop y click en OK y Apply

11. Debe de quedar el paquete en primera lista:
Ahora nos dirigimos a las siguientes opciones y modificamos y aplicamos.
Realizamos lo mismo pero en la siguiente opción: editamos y aplicamos.

12. Por último, procederemos a configurar el manejo de directorios de compilación en un proyecto
java.
Nos dirigimos en la siguiente opción y seleccionamos la opción Folders y click en Apply
Regresamos al archivo HTML antes creado y lo editamos con la información, en este caso con
la información de nuestro equipo.

13. Ejecutando el proyecto.
Configurando el servidor de pruebas
Damos click en la pestaña Windows -> Show View -> Servers

14. Click en el link azul que aparece en la parte inferior del IDE.
Seleccionamos Apache -> Tomcat v7.0 Server ya que es más estable con la versión de Java
7 que trabajaremos y click en Next

15. Ahora click en Browse… para buscar el Tomcat 7 y elegir el JRE 7 de Java y click en Next
Seleccionar el proyecto y click en Add > y click en Finish.

16. Y ahora ejecutamos el index.html con el servidor previamente configurado.
Click en Next

17. Y click en Finish
Y podremos ver la página ejecutándose correctamente.
Felicidades!
Bingo!

18. Apagando el servidor de pruebas
Debemos terminar el servidor correctamente para que para la próxima ejecución no nos
mande ningún error.
En la parte inferior nos dirigimos en la pestaña de Console y damos click en el botón rojo.
Y con esto terminamos.