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 3049 veces Modificado por última vez en Sábado, 05 Marzo 2016 20:08

32 comentarios

  • Enlace al Comentario Kai Miércoles, 14 Febrero 2018 04:18 publicado por Kai

    astrology signs april 28 august 4 astrological sign sidereal astrology sign meaning
    my future life astrology astrology desk calendars turquoise stone vedic astrology why is astrology wrong astrological aspect symbols and meanings astrology zodiac signs pisces when i will have baby according to astrology astrology zone daily horoscope
    taurus astrology and health cancer horoscope astrology room love astrology and finding
    love glyphs astrology signs empty 4th house astrology what are
    houses in vedic astrology group venus astrology
    free astrological question answer show astrology free astrology on phone call may 1
    astrology scorpio male astrology july 5 birthday astrology profile celtic knot astrology signs align astrology dating app astrology 365 the 8th house astrology meaning astrology for may 26 astrological
    predictions for roger federer kuja in astrology chinese astrology tiger years astrology ical astrological signs
    for may 14 nadi astrology fake vedic astrology
    ascendant sign gemini libra dark side astrology astrological profile aquarius astrology sign taurus january 28 astrology scorpio january astrology zone july 30 astrology sign what
    is the 7th house in astrology houses astrology vedic seven rays astrology raja yoga astrology predictions love astrology today
    aries when will i have another baby astrology online vedic astrology predictions free future
    career astrology find soulmate through astrology

  • Enlace al Comentario India Miércoles, 14 Febrero 2018 04:05 publicado por India

    conocer gente para amistad mujeres solteras colombia buscando pareja chico busca chico en zaragoza contacto chicas huelva busco
    chico para quedar chica busca chica serie temporada contactos con mujeres
    en santiago para conocer gente de todo el mundo www busco mujeres
    solteras webs para conocer gente espana contactos pontevedra mujeres que puedo hacer para
    conocer mas gente contactos mujeres valladolid contactos
    mujeres albacete milanuncios contacto mujeres sevilla busco una
    chica como tu para bailar chico busca chico en ibiza chicas q buscan amigos en lima
    chico busca chico masajista en barcelona chica busca chico cartagena chico busca chico en ecija
    contactos de mujeres en barcelona anuncios mujeres buscan hombres chica busca
    chico zaragoza contactos mujeres terrassa conocer gente joven asturias mujeres
    solteras en espana contactos con mujeres en badajoz contactos chicas santander chat conocer gente nueva mujeres buscan chico joven pagina para conocer amigos de todo el mundo
    conocer gente online webs para conocer amigos buscar chicas soltera sexo anuncio contactos mujeres
    vigo contactos con mujeres en vigo anuncios de sexo
    en leon busco chica interna huesca como conocer gente gay
    madres adolescentes solteras facebook chica busca chico las palmas buscar amigos sin pagar chica busca
    chico bilbao mujer busca chico para casarse conocer gente en bcn los mejores sitios para hacer amigos gratis contactos de mujeres en salamanca conocer gente en marbella encuentros sexuales en sevilla

  • Enlace al Comentario Merri Miércoles, 14 Febrero 2018 03:06 publicado por Merri

    sexe niort porno ixxx sex gratuite bite sex video porno laly alexis texas sex porno grandma porno sodomie
    douloureuse video porno xxx gratuit sexe patron film porno femme black porno
    anul sexe isere tele sexe sexe gratuit webcam hds sexe porno petit
    sein porno cunnilingus cunnilingus sexe sex blog princesse porno william lebris porno porno ivoirien danse
    porno actrice porno morte amster porno sexe toys pour homme sex video teen sexe
    de femme nue histoire sexe menu gay sex porn cosplay sexe safer sex
    porno alcool cocu porno porno romania sein sexe chinoise sex sex entre hommes amster porno
    blog porno amateur sexe ama happy sex mature sex tapes porno degueulasse sexe etrange
    video sexe gynecologue gourmande de sexe video katsumi porno domination porno porno ejaculation feminine

  • Enlace al Comentario Ludie Miércoles, 14 Febrero 2018 02:48 publicado por Ludie

    plan cul lamballe plan cul bretagne comment
    gerer un plan cul plan cul saint avold plan cul par tel plan cul allonnes
    plan cul fresnes plan cul saint gaudens plan cul saint saulve
    plan cul femme agee plan cul saint etienne
    du rouvray plan cul caen plan cul chamalieres plan cul noisy le sec plan cul asiatique
    site gratuit plan cul plan cul mennecy site plan cul fiable plan cul rennes gros
    plan de cul plan cul sur calais plan cul shemale plan cul fr plan cul montigny le bretonneux application rencontre plan cul plan cul albert
    plan cul mainvilliers plan cul thiers plan cul sevres plan cul avec couple plan cul
    direct plan cul pau plan cul epernay plan cul francheville c est quoi un plan cul plan cul rognac plan cul 35 plan cul loir et cher plan cul aisne baise plan cul plan cul montlouis sur loire plan cul 55 plan cul bondy plan cul occitanie plan cul gay rouen plan cul
    sur tours recherche femme pour plan cul plan cul
    vanves plan cul gueret plan cul gay paris plan cul gay nice

  • Enlace al Comentario Clay Miércoles, 14 Febrero 2018 00:52 publicado por Clay

    contacto con chicas en madrid app para conocer gente de corea del sur contacto chica valencia chica busca chica para amistad contactos torrevieja mujeres
    lugares para conocer mujeres bogota segunda mano
    contacto con mujeres paginas web para hacer amigos gratis contactos de hombres buscando mujeres fotos de mujeres solteras en costa rica busco chico en sevilla contactos chicas en leon chico
    busca chico mataro contactos chica busca chico contactos con chicas en huelva cita con mujeres solteras
    chica busca sexo sin compromiso chica busca apoyo economico
    trujillo chat encuentros sexuales conocer gente para salir en alicante anuncios sexo pamplona mujeres solteras barcelona espana segunda mano contacto con mujeres app
    conocer gente cordoba chica busca chico lleida lugares para conocer gente en valencia contactos
    mujeres irun conocer mujeres solteras en buenos aires contactos ourense
    mujeres conocer gente en madrid mayores de 50 contactos mujeres granollers
    busco chico activo madre de dios milanuncios busco chica conocer
    mujeres solteras en santiago contacto con mujeres de
    madrid una chica busco yo que me de su amor buscar
    chica para follar chica busca chico santo domingo distrito nacional como conocer mujeres gratis mujeres solteras buscando
    hombres milanuncios contactos mujeres algeciras paginas
    para buscar chicas solteras busco chica para follar conocer gente en internet gratis contactos con mujeres en jaen mujeres para despedida de soltero chicas de contacto en las palmas chica busca empleo urgente anuncios de chicas chico busca chico en alicante chicas busca chicos

  • Enlace al Comentario Oma Miércoles, 14 Febrero 2018 00:50 publicado por Oma

    is astrology is meaningful mc astrology pisces cancer career astrology for today gemini horoscope today california astrology saturn significance astrology astrology neptune in capricorn asc node astrology earth astrological
    symbol how many astrological signs are there now astrology solar eclipse
    conjunct ascendant what is mercury retrograde in astrology
    astrology zone taurus august kerala astrologer in dubai july 23 astrological sign what does the fifth house
    in astrology mean retrograde jupiter in 7th house astrology august 5 birthday astrology april 26 sign astrology buy astrology report online the astrologer babylon ny astrology signs symbols
    and meanings how to predict death in astrology astrological animals family feud wedding day
    astrology horoscope astrology soul mate asteroids astrology solar eclipse conjunct ascendant astrology zone february pisces
    twin flame astrology signs pet astrology cats
    premium astrology scams july 8 birthday astrology
    astrology cancer physical features compatibility astrology
    birth date muslim astrologer baba born may 26 astrology
    astrology reading for today cancer astronomy professor job
    salary scorpio decan darkstar astrology name astrology sign property house in astrology jupiter
    in cancer vedic astrology fortune house 7 astrology chinese element
    astrology cancer astrology love life roman reigns astrology eenadu
    daily astrology astrological sign calendar dates andromeda galaxy astrology
    asteroid hermes astrology lesbian astrology cancer jupiter
    in 12th house in vedic astrology

  • Enlace al Comentario Mable Miércoles, 14 Febrero 2018 00:44 publicado por Mable

    tarot ligne votre avenir tarot divinatoire tarot passeur tarots
    tzigane signification carte tarot voyance tarot en live tirage tarot le
    plus fiable tarot savoir si je suis enceinte tirage du tarot jouer tarot en ligne tirage gratuit tarot belline tarot vs oracle tarot divinatoire celibataire tirage tarot gratuit
    reponse par oui ou non tirage tarot gratuit en ligne fiable voyance
    tarots gratuits tirage du tarot amour tarot gratuit jeu tirage tarot cartomancie gratuit tarot travail 7 jours tarot amour ange gardien tarot le pendu meilleur tarot gratuit amour aleister
    crowley tarot interpretation tarot egyptien thot tirage du tarot
    du travail gratuit tirage gratuit du tarot persan tarot signification carte amoureux tirage tarot voyance amour mon tarot amour gratuit tarots gratuits
    oui non tarot immediat tarot en croix amour tarot croix celtique
    tarot gratuit gitan voyance gratuite tarot
    amour tirage tarot carte a jouer lecture tarot en croix tirage tarot gratuit pour
    la journee le meilleur tarot en ligne tarot amour reponse oui non tarot fiable avis tirage tarot oracle gratuit tarot facile avenir tarot prenom secret du tarot voyance tarot en ligne gratuit tarot en ligne
    gratuit oui non tirage du tarot du jour gratuit tirage carte tarot egyptien tarot gratuit immediat
    travail

  • Enlace al Comentario Felicitas Miércoles, 14 Febrero 2018 00:39 publicado por Felicitas

    sexe rencontre sexe baveux sexe erection dora l exploratrice porno porno lesbienne gode ceinture porno
    enorme cul bizarre sex film porno gratis xamster porno doigt
    dans le cul porno extrait video sex gratuit
    pipe sexe video sex latex videos gratuites de sexe porno hollande kelly sex sexe sexe elodie porno guadeloupe sex porno ethiopie porno position 69
    le bon sexe photo porno femme porno shemale
    femme de sexe photo porno gopro porno sexe esclave dialogue porno triolisme porno porno
    pov hd video sex toy camera sexe jade porno sex egypt sarah wayne
    callies sex sexe au moyen age webtv sex petite femme porno porno cougar gratuit mariage sexe
    histoire gay porno web cam sexe live katsuni sex video sexe hard gratuit porono sex porno partouzes legal porno images
    de porno marion le pen porno tatouage femme sexe

  • Enlace al Comentario Aline Martes, 13 Febrero 2018 22:28 publicado por Aline

    tarot en ligne divinatoire tirage tarot carte ordinaire gratuit tarot amour 7 jours tarot d'amour
    du jour tirage tarot ange tarot domino gratuit tarot latin divination avenir amoureux tarot gratuit jouer au
    tarot en ligne l'empereur en tarot tirage tarot sante tarot voyante gratuit tarot divinatoite tarot voir tarot 7 jours carte tarot amour gratuit tarot gratuit amour oui non voyance tarots gratuits voyance tirage
    tarot gratuit astrologie tarot par prenom tarot voyance gratuite tirage tarot gratuit et immediat persan tarot feminin divinatoire
    tirer le tarot gratuitement jeu tarot gratuit hors ligne tirage tarot en croix signification meilleur tarot en ligne voyance gratuite tarots tirage du tarot gratuit et serieux tarot tirage gratuit oui non le grand tarot persan tirage tarot en ligne
    amour tirage tarot gratuit immediat ligne tarot gratuit immediat amour tirage du tarot croix celtique tirage gratuit tarot 12 mois amour tarot gratuit
    fiable signification carte tarot la justice hermite
    tarot amour tarot imperatrice et diable tarot zen osho avis tirage tarot persan amoureux gratuit tirage tarots belline gratuit ton avenir par le tarot divinatoire tirage carte tarot sante tarot jeu en ligne tirage tarot carte
    unique tarot osho zen gratuit tarot astrologique en ligne carte tarot divinatoire bonne carte au tarot

  • Enlace al Comentario Corrine Martes, 13 Febrero 2018 22:00 publicado por Corrine

    blog tarot le bateleur tarot gratuit tarot une carte
    gratuit tarot signe astro tirage tarot medium immediat carte tarot signification le pendu tarot gratuit divinatoire avenir tirage tarot gratuite en ligne oracle et tarot tarot en live avis tirage gratuit du tarot tarot gratuit jeu tarot roue astrologique signification interpretation grand tarot belline mat tarot tirage tarot gratuit
    immediatement tonavenir selon le tarot divinatoire tarot
    amour gratuit immediat fiable signification carte tarot persan le tirage du
    tarot gratuit tarot ange amour tirage tarot ge gratuit tarot divinatoire oracle belline tarot numerologie gratuite
    veritable tirage tarot gratuit tirage du tarot amour tarot votre
    avenir tarot du prenom tirage tarots amour gratuit ligne arcane
    tarot 6 tirage tarot gratuit et immediat en ligne
    tarot divinatoire sante gratuit tarot cartomancie amour tirage tarot ge gratuit tirage tarot gratuit pour la sante tarot divinatoire gratuit pour travail tarot gratuit jour tirage tarot gratuit argent tirer tarot gratuit feminin arcane tarot tarot journalier tarots egyptiens tarot roue astrologique signification jeu gratuit
    tarot en ligne divine tarot gratuit tirage tarots divinatoire
    gratuit nouveaux tarot egyptien gratuit tarots gratuits oracle belline
    mon tarot gratuit du jour cours tarot tirage du tarot egyptien

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.