Configuración de entorno de proyecto para el desarrollo de aplicaciones web [UI/UX]

Configuración de entorno de proyecto para el desarrollo de aplicaciones web con una buena experiencia de usuario

Keywords: Node.js, NPM, Bower, Gulp, Yeoman

Para la creación del presente proyecto, necesitaremos Node.js, si aun no lo tienes, puedes descargarlo desde: https://nodejs.org/en/download/

Descargas e instalas Node.js. A continuación, abre tu ventana de comandos. (Si usas Windows, presionas las teclas windows + R y typeas cmd o inicio node command prompt.) En el siguiente paso instalaremos las herramientas que nos permitirán generar la estructura de nuestro proyecto, correr tareas automáticas y gestionar nuestros paquetes.

Te creas un folder en la unidad de tu disco duro que desees. Ingresas al folder y estando adentro ejecutas los siguientes comandos paso a paso:

npm install  --global yo gulp-cli bower

Luego, instalamos el generador de aplicaciones web:

npm install -global generator-webapp

Ahora, ya se puede crear la aplicación con el comando:

yo webapp

Aquí, te pedirá elegir opciones:

Seleccionar las siguientes opciones:
1. which additional features would you like to include?
Elije Sass
2. would you like to include JQuery?
Elije Y (de Yes)
3. choose your style of DSL
Elije BDD porque es orientado al usuario final.

Chequeas tu directorio, si en tu directorio creado, no ves la carpeta bower_components, debes ejecutar el siguiente comando:

bower install

Finalmente, ejecuta el siguiente comando para que corra el servidor de desarrollo

gulp serve

Se te deberá abrir un sitio web base con el siguiente aspecto:

ESTRUCTURA INICIAL DEL PROYECTO.
bower.json: librerias del cliente
package.json: librerias del servidor.
gulpfile.js: donde se registran las tareas automáticas del proyecto incluyendo la recarga automática, mimificacion de archivos, concatenación, entre otros.
carpeta app: se encuentran los archivos del proyecto, incluyendo carpetas para fuentes, imágenes, scripts y estilos.
carpeta scripts: tenemos el main.js archivo de código de script principal.
carpeta styles: tenemos el main.scss, el archivo de  estilo principal.
carpeta bower_components: donde se descargan las librerías del cliente.
carpeta node_module: donde se descargan las librerías del servidor.
carpeta test, se incluyen pruebas automáticas para nuestro proyecto.

INSTALACION FRAMEWORK RESPONSIVE
Para este ejemplo, instalaremos el framework materialize css, puedes utilizar el de tu preferencia. Para ello, ejecutar el comando siguiente dentro del directorio anteriormente creado.

bower install materialize --save

VERIFICACIÓN FRAMEWORK RESPONSIVE

Para verificar que haya sido instalado correctamente el framework, editaremos el archivo index.html que se encuentra dentro del folder app. Agregaremos el siguiente código:

Ahora, tu sitio web tendrá el siguiente aspecto: (recuerda tener levantado tu servidor con el comando gulp serve)