Sábado, 05 Marzo 2016 00:00

Empezando con Bower y creando un proyecto HTML5 en netbeans

Escrito por 
Valora este artículo
(0 votos)

Volviendo al  ruedo con los post en este 2016,  crearemos un proyecto "Front end"  en Netbeans 8.0.2,  que utilice  las librerias de Angular y Bootstrap, las cuales descargaremos con la Bower.

 

Que es bower

Bower es una aplicacion que nos permite gestionar los paquetes o librerias que usara nuestros proyectos, siempre y cuando estas sean open source. Antes de existir este tipos de herramientas, si queriamos usar Angular por ej. se las debia descargar  y ubicarlas  en nuestro proyecto directamente, cosa que no esta mal... quizas para proyectos chicos no sea nada complejo manejarlo de esta forma (yo alguna veces lo sigo haciendo asi), pero si estamos en proyectos complejos, en donde necesitamos  muchas librerias  con distintas versiones, o si creamos  una libreria y nesecitamos distribuirla de manera correcta, bower aparece para hacernos la tarea  mas ordenada.

Los que  programan en java pueden hacer una analogia con Maven, entonces  las principales bondades de bower seran

  • Administrar dependencias, osea si mi proyecto usa jquery o angular o los dos,  habra un archivo que declare que  para que mi aplicacion corra nesecita de tales librerias con una determiada version por dependencia.
  • Migrar un proyecto sin dependencias, y luego  mediante la ejecucion de un archivo de configuracion descargarlas a todas automaticamente

Manos a la obra

Antes que nada debemos tener instalado Node JS para poder  instalar bower (no entraremos en detalles de instalacion de Node JS), podemos descargarlo y encontrar la documentacion en  la  web oficial https://nodejs.org/en/.

Una vez instalado Node JS abriremos una consola  e instalamos Bower, a travez de npm

En windows o linux

1
npm install -g bower

Bien ya tenemos intalado bower, ahora veremos  los principales comandos

Antes que nada crearemos  un directorio  que es en donde se alojara nuestro proyecto, y nos ubicamos en la raiz del mismo,  yo lo hare por consola,ustedes pueden hacer lo mismo  o bien utilizar la interfaz grafica del s.o.

En windows o linux

1
mkdir proyectoBower

En la raiz del proyecto nesecitamos de dos archivos, uno necesario  y el otro opcional

bower.json

Este archivo es nesesario,  tendra un contenido en formato JSON, con alas siguiente lienas como minimo

1
2
3
4
5
6
7
{
    "name": "proyectoBower",
    "version": "0.0.1",
    "dependencies": {
       
    }
}

En donde  figura el nombre del proyecto, la version, y las dependencias, en este caso no tiene ninguna

Otra forma de hacerlo atomaticamente es mediante el comando 

1
bower init

Este comando es  un wizard  para crear el bower.json, nos hara varias preguntas, las cuales representan la informacion que contendra el archivo bower.json, yo solo complete

-nombre del proyecto

-autor

Luego a las demas preguntas (debido a los fines del tutorial) le di enter, entonces mi archivo quedo asi

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
  "name": "proyectoBower",
  "authors": [
    "Rafael Ramos <Esta dirección de correo electrónico está siendo protegida contra los robots de spam. Necesita tener JavaScript habilitado para poder verlo.>"
  ],
  "description": "Proyecto fron end",
  "main": "",
  "moduleType": [],
  "license": "MIT",
  "homepage": "",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ]
}

.bowerrc

Este archivo es opcional, en  este caso solo lo utilizaremos para configurar el directorio en donde se descargaran  nuestras librerias,  este archivo al igual que el anterior tendra tambien  un formato JSON

1
2
3
{
  "directory": "js"
}

Por defecto ni no inluimos este archivo con esas lineas, bower creara automaticamente el directorio bower-components y ahi descargara todo. Para redondear tendremos la siguiente estructura

/proyectoBower

             |_ bower.json

             |_ .bowerrc  

Con lo explicado anteriormente es lo basico para empezar a utilizar bower.

Buscando la libreria

En primer lugar buscaremos el framewrok MVC Angular para java script

En windows o linux

1
bower search angular

Nos aparecera los  siguientes resultados

Entra tantas que nos encontro vemos que esta la primera que es la de Angular que es la que nesecitamos, o por ejemplo tambien esta la de angular-bootstrap pero no descargaremos esta. Si ya detectamos cual libreria o framewrok utilizaremos, podemos obtener  informacion sobre ella, lo hacemos mediante el comando

En windows o linux

1
bower info angular

Este comando nos mostrara lo siguiente

La imagen anterior muestra la ejecucion del comando (sobre windows, en linux es igual), nos muestra los siguientes valores

  1. name : nombre de la libreria/paquete/framework
  2. version: version de la libreria/paquete/framework
  3. license : lecencia de la libreria/paquete/framework
  4. main: nombre del archivo principal
  5. ignore: direcotrios o archivos ignorados
  6. dependencies: dependencias de la cual hace uso la libreria/paquete/framework.
  7. homepage: Pagina oficial

Cabe acotar que esta informacion es extraida de un archivo bower.json.

Debemos analizar la informacion y elegir cual version utilizaremos, procedemos a instalar la  libreria indicando al version de la siguente manera

En windows o linux

1
bower install angular#1.5.0

Nos fijamos que en el comando  esta el nombre de la libreria/paquete/framework separada mediante un luego sigue la version, una opcion muy util al comando seria agregarle --save,  esto nos escribira la dependencia en el archivo bower.json

En windows o linux

1
bower install angular#1.5.0 --save

quedando nuestro bower.json como sigue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{
  "name": "proyectoBower",
  "authors": [
    "Rafael Ramos <Esta dirección de correo electrónico está siendo protegida contra los robots de spam. Necesita tener JavaScript habilitado para poder verlo.>"
  ],
  "description": "Proyecto fron end",
  "main": "",
  "moduleType": [],
  "license": "MIT",
  "homepage": "",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "angular": "1.5.0"
  }
}

Vemos que se nos agrego la dependencia de angular con su correpondiente version, cabe alclarar que podemos modificar directamente este archivo bower.json y luego ejecutar el comando 

1
bower install 

si vemos nuestra estructura del proyecto tendremos lo siguiente

proyectoBower/

             |_ js/

                     |_angular/

             |_ bower.json

             |_ .bowerrc  

y dentro del directorio angular todos nuestros archivos necesarios.

De la misma manera descargaremos bootrap

1
bower search bootstrap

Detectamos la libreria css correcta  y  mostramos su informacion 

A diferencia del framework angular vemos que tiene dependencia de jquery 

Procedemos a instalar la version 3.3.5

1
bower install bootstrap#3.3.5 --save

Ahora nuestro archivo bower.json  se le agrego otra dependencia

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
  "name": "proyectoBower",
  "authors": [
    "Rafael Ramos <Esta dirección de correo electrónico está siendo protegida contra los robots de spam. Necesita tener JavaScript habilitado para poder verlo.>"
  ],
  "description": "Proyecto fron end",
  "main": "",
  "moduleType": [],
  "license": "MIT",
  "homepage": "",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "angular": "1.5.0",
    "bootstrap": "3.3.50"
  }
}

proyectoBower/

             |_ js/

                     |_angular/

                     |_bootstrap/

             |_ bower.scon

             |_ .bowerrc  

Dentro de bootstrap estaran  todos los archivos de bootstrap, dentro de este directorio quizas solo nos haga falta el directorio dist, a los demas archivos demomento para el desarrollo lo podemos eliminar, o bien incorporar  en el atributo ignore dentro del archivo bower.json, para que estos no se descarguen.

Para finalizar desde nuestro ide Netbeans podemos crear una aplicacion HTML5 con codigo existente

Luego elegimos la ubicacion de nuestro proyecto , en este caso el directorio proyectoBower

Le damos en finish y esta sera la estructura

Con esto estamos listos para empezar a codificar haciendo uso de estas librerias, alguno dira pero me conviene descargar la libreria y ponerla directamente al proyecto, pues no estan muy errados, repito que  es mas nesesario cuando encaramos proyectos muy  complejos con mucha librerias, y luego tenemos que distribuirlos. Imaginense que como profesionales del desarrollo deben pasar el codigo a otras personas,  si estas personas conocen bower, una de las primeras cosas que haran sera mirar el bower.json  en el caso de que tengan dudas de las dependencias de las que cuenta el proyecto, sion deberian ver el nombre de los archivos, y sino hasta abrirlos para ver si figura la version por ejemplo,  esto es de mucha ayuda y uds. como profesionales quedan  bien vistos porque entregan codigo con estandares usados por la gran mayoria actualmente.

 

 

Visto 1529 veces Modificado por última vez en Sábado, 05 Marzo 2016 20:08

2 comentarios

  • Enlace al Comentario Rex Jueves, 13 Julio 2017 09:43 publicado por Rex

    What's Taking place i'm new to this, I stumbled upon this I've found It positively helpful
    and it has helped me out loads. I hope to contribute & aid different users like its helped me.
    Good job.

  • Enlace al Comentario coco Lunes, 10 Octubre 2016 00:01 publicado por coco

    Increible!

Deja un comentario

Asegúrate de llenar la información requerida marcada con (*). No está permitido el código HTML. Tu dirección de correo NO será publicada.