6. Anexos
Aquí explicamos cómo instalar las herramientas utilizadas en este documento en equipos con Windows 7.
6.1. Instalación de STS (Spring Tool Suite)
Instalaremos SpringSource Tool Suite [http://www.springsource.com/developer/sts], un entorno Eclipse que viene equipado de serie con numerosos complementos relacionados con el marco Spring y con una configuración de Maven preinstalada.
![]() |
- Ve al sitio web de SpringSource Tool Suite (STS) [1] para descargar la versión actual de STS [2A] [2B].
![]() |
![]() |
- El archivo descargado es un instalador que crea la estructura de directorios [3A] [3B]. En [4], ejecutamos el archivo ejecutable,
- en [5], la ventana del espacio de trabajo del IDE tras cerrar la ventana de bienvenida. En [6], se muestra la ventana de servidores de aplicaciones,
![]() |
- en [7], la ventana de servidores. Hay un servidor registrado. Se trata de un servidor VMware compatible con Tomcat.
El uso de STS dentro de la aplicación se explica en la sección 1.3.2.
6.2. Instalación de [ WampServer]
[WampServer] es un paquete de software para desarrollar en PHP/MySQL/Apache en un equipo con Windows. Lo utilizaremos únicamente para el SGBD MySQL.
![]() |
- En la página web de [WampServer] [1], elija la versión adecuada [2],
- El ejecutable descargado es un instalador. Se le solicitarán varios datos durante la instalación. Estos no tienen que ver con MySQL, por lo que puede ignorarlos. Al final de la instalación aparecerá la ventana [3]. Inicie [WampServer],
![]() |
- en [4], el icono de [WampServer] aparece en la barra de tareas, en la parte inferior derecha de la pantalla [4],
- al hacer clic en él, aparece el menú [5]. Este te permite gestionar el servidor Apache y el SGBD MySQL. Para gestionar este último, utiliza la opción [PhpMyAdmin],
- que abre la ventana que se muestra a continuación,

Proporcionaremos algunos detalles sobre el uso de [PhpMyAdmin]. En la sección 1.3.1, mostramos cómo utilizarlo para crear la base de datos de la aplicación.
6.3. Instalación de [WebStorm]
[WebStorm] (WS) es el IDE de JetBrains para desarrollar aplicaciones HTML/CSS/JS. Me parece perfecto para desarrollar aplicaciones Angular. La página de descarga es [http://www.jetbrains.com/webstorm/download/]. Es un IDE de pago, pero hay disponible una versión de prueba de 30 días para descargar. Existen versiones asequibles para particulares y estudiantes.
Su uso dentro de la aplicación se describe en la sección 1.3.3. Para instalar bibliotecas JS dentro de una aplicación, WS utiliza una herramienta llamada [bower]. Esta herramienta es un módulo de [node.js], una colección de bibliotecas JS. Además, las bibliotecas JS se obtienen de un repositorio Git, lo que requiere un cliente Git en el equipo que realiza la descarga.
6.3.1. Instalación de [node.js]
El sitio de descarga de [node.js] es [http://nodejs.org/]. Descarga el instalador y ejecútalo. Eso es todo lo que tienes que hacer por ahora.
6.3.2. Instalación de la herramienta [bower]
La herramienta [bower], que te permite descargar bibliotecas de JavaScript, se puede instalar de varias formas. La instalaremos desde la línea de comandos:
C:\Users\Serge Tahé>npm install -g bower
C:\Users\Serge Tahé\AppData\Roaming\npm\bower -> C:\Users\Serge Tahé\AppData\Roaming\npm\node_modules\bower\bin\bower
bower@1.3.7 C:\Users\Serge Tahé\AppData\Roaming\npm\node_modules\bower
├── stringify-object@0.2.1
├── is-root@0.1.0
├── junk@0.3.0
...
├── insight@0.3.1 (object-assign@0.1.2, async@0.2.10, lodash.debounce@2.4.1, req
uest@2.27.0, configstore@0.2.3, inquirer@0.4.1)
├── mout@0.9.1
└── inquirer@0.5.1 (readline2@0.1.0, mute-stream@0.0.4, through@2.3.4, async@0.8
.0, lodash@2.4.1, cli-color@0.3.2)
- línea 1: el comando [node.js] que instala el módulo [bower]. Para que el comando funcione, el ejecutable [npm] debe estar en la ruta PATH del equipo (véase el párrafo siguiente);
6.3.3. Instalación de [Git]
Git es un sistema de control de versiones de software. Existe una versión para Windows llamada [msysgit] disponible en la URL [http://msysgit.github.io/]. No utilizaremos [msysgit] para gestionar las versiones de nuestra aplicación, sino simplemente para descargar bibliotecas JS que se encuentran en sitios como [https://github.com], que requieren un protocolo de acceso especial proporcionado por el cliente [msysgit]
El asistente de instalación ofrece varios pasos, entre los que se incluyen los siguientes:
![]() | ![]() |
Para los demás pasos de la instalación, puede aceptar los valores predeterminados proporcionados.
Una vez instalado Git, comprueba que el ejecutable se encuentra en la ruta PATH de tu equipo: [Panel de control / Sistema y seguridad / Sistema / Configuración avanzada del sistema]:
![]() | ![]() |
La variable PATH tiene este aspecto:
D:\Programs\devjava\java\jdk1.7.0\bin;D:\Programs\ActivePerl\Perl64\site\bin;D:\Programs\ActivePerl\Perl64\bin;D:\Programs\sgbd\OracleXE\app\oracle\product\11.2.0\client;D:\Programs\sgbd\OracleXE\app\oracle\product\11.2.0\client\bin;D:\Programs\sgbd\OracleXE\app\oracle\product\11.2.0\server\bin;...;D:\Programs\javascript\node.js\;D:\Programs\utilitaires\Git\cmd
Comprueba que:
- la ruta a la carpeta de instalación de [node.js] está presente (en este caso, D:\Programas\javascript\node.js);
- la ruta al ejecutable del cliente Git está presente (en este caso, D:\Archivos de programa\Utilidades\Git\cmd);
6.3.4. Configuración de [WebStorm]
Ahora comprobemos la configuración de [WebStorm]
![]() | ![]() |
![]() |
Arriba, selecciona la opción [1]. La lista de módulos [node.js] ya instalados aparece en [2]. Esta lista solo debería contener la línea [3] correspondiente al módulo [bower] si has seguido el proceso de instalación anterior.
6.4. Instalación de un emulador de Android
Los emuladores que se incluyen con el SDK de Android son lentos, lo que desalienta su uso. La empresa [Genymotion] ofrece un emulador mucho más potente. Está disponible en la URL [https://cloud.genymotion.com/page/launchpad/download/]
(febrero de 2014).
Tendrás que registrarte para obtener una versión para uso personal. Descarga el producto [Genymotion] con la máquina virtual VirtualBox;

instálalo y, a continuación, inicia [Genymotion]. A continuación, descarga una imagen para una tableta o un teléfono:
![]() |
- en [1], añade un dispositivo virtual;
- en [2], elige uno o varios dispositivos para instalar. Puedes filtrar la lista mostrada especificando la versión de Android deseada [3] y el modelo del dispositivo [4];
![]() |
- Una vez completada la descarga, verás [5] una lista de los dispositivos virtuales disponibles para probar tus aplicaciones de Android;
6.5. Instalación del complemento [Advanced Rest Client] para Chrome
En este documento utilizamos el navegador Chrome de Google (http://www.google.fr/intl/fr/chrome/browser/). Le añadiremos la extensión [ Advanced Rest Client]. A continuación te explicamos cómo hacerlo:
- Ve a la [Google Web Store] (https://chrome.google.com/webstore) utilizando el navegador Chrome;
- busca la aplicación [Advanced Rest Client]:
![]() |
- La aplicación estará entonces disponible para su descarga:
![]() |
- Para descargarla, tendrás que crear una cuenta de Google. A continuación, la [Google Web Store] te pedirá que confirmes [1]:
![]() |
- en [2], la extensión añadida está disponible en la opción [Aplicaciones] [3]. Esta opción aparece en cada nueva pestaña que abras (CTRL-T) en el navegador.

















