|
| 1 | +## Desarrollo Java en Contenedor: IntelliJ Community Edition |
| 2 | + |
| 3 | +### Pre-requisitos |
| 4 | + |
| 5 | +* [Docker for OSX or Docker for Windows](https://www.docker.com/products/docker) |
| 6 | +* [IntelliJ Community Edition](https://www.jetbrains.com/idea/download/) |
| 7 | +* [Java Development Kit](http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html) |
| 8 | + |
| 9 | + |
| 10 | +### Empezando |
| 11 | + |
| 12 | +En IntelliJ, clonar el repositorio. Clic en `Check out from Version Control` > `Github` |
| 13 | + |
| 14 | + |
| 15 | + |
| 16 | +Si esta es tu primera vez usando Intellij con Github, ingresa tu cuenta de Github. |
| 17 | + |
| 18 | + |
| 19 | +Clonar el repositorio [registration-docker](https://github.com/spara/registration-docker.git). |
| 20 | + |
| 21 | + |
| 22 | +Clic en `Import project from external model`, seleccionar `Maven`. Clic `Next` |
| 23 | + |
| 24 | + |
| 25 | + |
| 26 | +Seleccionar `Search for projects recursively`. Clic `Next` |
| 27 | + |
| 28 | + |
| 29 | + |
| 30 | +Seleccionar el proyecto y clic en `Next` |
| 31 | + |
| 32 | + |
| 33 | + |
| 34 | +Seleccionar el JDK y clic en `Next` |
| 35 | + |
| 36 | + |
| 37 | + |
| 38 | +Clic en `Finish` |
| 39 | + |
| 40 | + |
| 41 | + |
| 42 | +Clic en `Project View` para abrir el proyecto. |
| 43 | + |
| 44 | + |
| 45 | + |
| 46 | +### Construyendo la aplicación |
| 47 | + |
| 48 | +La aplicación es una aplicación Spring MVC básica que recibe datos del usuario de un formulario, escribe los datos en la base de datos, y consulta la base de datos. |
| 49 | + |
| 50 | +La aplicación se construye usando Maven. Para construir la aplicación clic en el icono de la parte inferior izquierda de IntelliJ y seleccionar `Maven Projects`. |
| 51 | + |
| 52 | + |
| 53 | + |
| 54 | +La ventana `Maven Projects` se abrirá al lado derecho. Las tareas de maven `clean` y `install` necesitan ser establecidas para construir la aplicación. |
| 55 | + |
| 56 | +Para establecer la tarea `clean`, clic en `Lifecycle` para visualizar el árbol de tareas. Clic derecho en `clean` y seleccionar `Create 'UserSignup [clean]'...` |
| 57 | + |
| 58 | + |
| 59 | + |
| 60 | +Clic `OK` en la ventana `Create Run/Debug Configuration`. |
| 61 | + |
| 62 | + |
| 63 | + |
| 64 | +De manera similar configurar la tarea `install`. Clic en `install` en el árbol de Lifecycle. Seleccionar `Create 'UserSignup[install]'...` |
| 65 | + |
| 66 | + |
| 67 | + |
| 68 | +Clic `OK` en la ventana `Create Run/Debug Configuration`. |
| 69 | + |
| 70 | + |
| 71 | + |
| 72 | +Para construir la aplicación ejecutar `clean` |
| 73 | + |
| 74 | + |
| 75 | + |
| 76 | +Luego ejecutar `install` |
| 77 | + |
| 78 | + |
| 79 | + |
| 80 | +Cuando la aplicación se construya se visualizará un mensaje de éxito en la ventana de Log. |
| 81 | + |
| 82 | + |
| 83 | + |
| 84 | +### Ejecutando la aplicación |
| 85 | + |
| 86 | +Abrir un terminal e ir al directorio de la aplicación. Iniciar la aplicación con docker-compose |
| 87 | + |
| 88 | +<pre>> docker-compose up </pre> |
| 89 | + |
| 90 | +Docker construirá las imágenes para Apache Tomcat y MySQL e iniciará los contenedores. También, montará el directorio de la aplicación (`./app/target/UserSignup`) como volumen de datos en el host del sistema al directorio webapps Tomcat en el contenedor del servidor web. |
| 91 | + |
| 92 | +Abrir una ventana en el explorador e ir a: |
| 93 | +'localhost:8080'; debes ver la página de inicio de Tomcat |
| 94 | + |
| 95 | + |
| 96 | + |
| 97 | +Cuando la imagen de Tomcat fue construida, los roles de los usuarios fueron configurados. Clic en el botón `Manager App` para visualizar las aplicaciones desplegadas. Cuando se solicite por usuario y contraseña, ingresa `system` y `manager` respectivamente para entrar a la página de Tomcat Web Application Manager. |
| 98 | + |
| 99 | + |
| 100 | + |
| 101 | +Puedes usar la página Manager para `Start`, `Stop`, `Reload` o `Undeploy` aplicaciones web. |
| 102 | + |
| 103 | +Para ir a la aplicación, clic en el link `/UserSignup`. |
| 104 | + |
| 105 | + |
| 106 | + |
| 107 | +### Depurando la aplicación |
| 108 | + |
| 109 | +En la aplicación, clic en `Signup` para crear un nuevo usuario. Completar el formulario de registro y clic en `Submit` |
| 110 | + |
| 111 | + |
| 112 | + |
| 113 | +Clic `Yes` para confirmar. |
| 114 | + |
| 115 | + |
| 116 | + |
| 117 | +Probar el inicio de sesión. |
| 118 | + |
| 119 | + |
| 120 | + |
| 121 | +Oh no! |
| 122 | + |
| 123 | + |
| 124 | + |
| 125 | +#### Configurar Depuración Remota |
| 126 | + |
| 127 | +Tomcat soporta depuración remota usando Java Platform Debugger Architecture (JPDA). Debug Remoto fue habilitado cuando la imagen tomcat (registration-webserver) fue construida. |
| 128 | + |
| 129 | +Para configurar la depuración remota en IntelliJ, clic en `Run` > `Edit Configuration ...` |
| 130 | + |
| 131 | + |
| 132 | + |
| 133 | +Agregar una nueva configuración remota. |
| 134 | + |
| 135 | + |
| 136 | + |
| 137 | +En la ventana `Run\Debug Configurations`, establecer el `Name` de la configuración y en `Settings` establecer el puerto '8000' el puerto de depuración de Tomcat JPDA por defecto. Clic en `OK` para guardar la configuración. |
| 138 | + |
| 139 | + |
| 140 | + |
| 141 | +#### Buscando el Error |
| 142 | + |
| 143 | +Dado que el problema es la contraseña, veamos como la contraseña se establece en la clase User. En la clase User, el setter para la contraseña es mezclado usando [rot13](https://en.wikipedia.org/wiki/ROT13) antes de ser salvado en la base de datos. |
| 144 | + |
| 145 | + |
| 146 | + |
| 147 | +Tratar registrando un nuevo usuario usando el depurador. En el menu clic en `Run` > `Debug...` |
| 148 | + |
| 149 | + |
| 150 | + |
| 151 | +Elegir la configuración de depuración remota de Tomcat. La consola de depuración se motrará en la parte inferior de IntelliJ. |
| 152 | + |
| 153 | + |
| 154 | + |
| 155 | +Establecer un punto de interrupción para la clase User donde el password es establecido. |
| 156 | + |
| 157 | + |
| 158 | + |
| 159 | +Registrar un nuevo usuario con el usuario de 'Moby' y con 'm0by' como contraseña, clic `Submit`, clic `yes` |
| 160 | + |
| 161 | + |
| 162 | + |
| 163 | +IntelliJ mostrará el código en el punto de interrupción y el valor de la contraseña en la ventana variables. Observar que el valor es `m0by` |
| 164 | + |
| 165 | + |
| 166 | + |
| 167 | +Clic en `Resume Program` para permitir ejecutar el código o presionar `F8` para saltar el punto de interrupción. |
| 168 | + |
| 169 | + |
| 170 | + |
| 171 | +A continuación, establecer el punto de interrupción en getPassword en la clase User para ver los valores retornados para la contraseña. También puede cambiar el punto de interrupción para setPassword. |
| 172 | + |
| 173 | + |
| 174 | + |
| 175 | +Tratar de acceder a la aplicación. Ver el valor de la contraseña en la ventana variables de Eclipse, observar que es `z0ol` el cual es `m0by` usando ROT13. |
| 176 | + |
| 177 | + |
| 178 | + |
| 179 | +En esta aplicación MVC el UserController usa el método findByLogin en la clase UserServiceImpl la cual usa el método findByUsername para recuperar la información de la base de datos. A continuación, verifica que la contrasenña del formulario conincide con la contraseña del usuario. Dado que la contraseña del formulario de inicio de sesión no es mezclado usando ROT13, este no coincide con la contraseña del usuario y no puedes acceder a la aplicación. |
| 180 | + |
| 181 | +Para solucionar esto, aplicar ROT13 a la contraseña agregando |
| 182 | + |
| 183 | +``` |
| 184 | +import com.docker.UserSignup.utit.Rot13 |
| 185 | +
|
| 186 | +String passwd = Rot13.rot13(password); |
| 187 | +``` |
| 188 | + |
| 189 | + |
| 190 | +Establecer un punto de interrupción en UserServiceImpl en el método findByLogin. Iniciar sesión otra vez y mirar los valores para el punto de interrupción. La variable 'passwd' es 'z0ol' la cual coincide con la contraseña para el usuario moby. |
| 191 | + |
| 192 | + |
| 193 | + |
| 194 | +Continuar (`F8`) y debes acceder exitosamente. |
| 195 | + |
| 196 | + |
0 commit comments