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

32 comentarios

  • Enlace al Comentario Lola Martes, 20 Febrero 2018 14:50 publicado por Lola

    plan cul amiens plan cul telephone plan cul chatellerault
    plan cul wikipedia plan cul cusset plan cul 53 plan cul a
    caen plan cul 24 plan cul les sables d'olonne plan cul
    sur belfort site de rencontres plan cul plan cul saint gilles plan cul oullins plan cul castelsarrasin plan cul schoelcher plan cul montargis plan cul ile de france plan cul guilherand
    granges plan cul facile plan cul chatenay malabry plan cul gay marseille plan cul a
    tours rencontre plan cul cougar plan cul saint herblain plan cul dax plan cul 974 gratuit plan cul asiatique
    chat pour plan cul plan cul fontenay le fleury plan cul villemomble gros
    plan cul cherche femme pour plan cul plan cul massy plan cul ille et vilaine
    plan cul blagnac plan cul saint amand les eaux plan cul tinqueux plan cul dans le 62 plan cul gratuit montpellier plan cul thonon les bains plan cul
    avec une vieille plan cul rapide site plan cul gratuit sans inscription plan cul lannion plan cul virtuel plan cul valentigney plan cul shemale plan cul six
    fours les plages tchat plan cul gratuit plan cul riviere salee plan cul lillers

  • Enlace al Comentario Lina Lunes, 19 Febrero 2018 14:47 publicado por Lina

    online money tarot card readings egyptian tarot online celtic cross animal
    totem tarot spread karmic tarot springfield mo tarot queens the wheel
    of fortune tarot future 3 card relationship tarot spread what does reversed tarot mean the
    fool cosmic tarot beginners tarot spreads 4 swords tarot reversed tarot
    yes or no vip justice love tarot what does a tarot card reading do
    daily tarot girl spreads after break up tarot spread lovers tarot meaning relationship tarot interpretation help egyptian tarot grand
    trumps tarot of the four elements high priestess tarot love advice
    aquarius weekly horoscope astrology tarot tarot taurus august free single tarot card prediction tarot card reading made
    easy 2 wands tarot love yes or no one card tarot reading cancer weekly tarot ten pentacles tarot heaven the world tarot card
    reconciliation two of swords tarot heaven 10 of pentacles tarot heaven 10 wands trusted tarot king of cups love tarot tarot princess of pentacles reversed baroque bohemian cats' tarot third edition free
    tarot card readings yes or no free tarot love horoscopes three of
    cups tarot card meaning death and lovers tarot card tarot aries
    monthly horoscope tarot horoscopes for the week ahead daily tarot reading online
    nine of cups tarot reversed tarot card reading dublin city centre two of pentacles tarot health 4 of wands tarot yes or no 10 card tarot spread reading free physic tarot reading tarot
    card website free tarot oracle card readings online

  • Enlace al Comentario Kevin Lunes, 19 Febrero 2018 01:40 publicado por Kevin

    encyclopedia of vedic astrology your profession capricorn astrology for
    today spouse prediction in astrology vedic astrology marriage date astrology horoscope for today between astronomy and astrology maalaimalar astrology astrology terms latin gemini astrology
    august july sign astrology april 23 birthday astrology profile
    astrology monthly calendar jupiter in 6th house in vedic astrology july sign astrology
    free astrological predictions for career chinese astrology years of the pig
    ceres astrology keywords predict marriage date astrology astrological signs for april
    astrologers meaning nadi astrology accuracy horse racing astrology prediction astrology sign july 10 chinese love astrology sheep astrology sign nodes astrology different
    types of yogas in vedic astrology medicine wheel astrology astrological
    dates for cancer astrology for february 16 chinese five
    element astrology calendar astrology sign for august true node direct astrology astrology singles guru transit
    vedic astrology belief in astrology quotes astronomical clock prague light show twin flames astrological signs
    astrologer salary career 10th house vedic astrology astrological signs august 28 career according to houses in astrology astrology
    february 12 7th house meaning astrology numerology life
    path 6 astrology secrets of the deep funny astrology barry manilow astrology capricorn love astrology
    today jupiter aspecting 12th house astrology astrology life path
    11 vehicle astrology

  • Enlace al Comentario Nancee Domingo, 18 Febrero 2018 08:45 publicado por Nancee

    food porn meaning interview with a porn star sex therapist training online pro porn sextuplets
    usa today sexiest vine profiles sex proof mascara sephora long morning text for her ugly porn women sex
    toys porn les home sex videos best sex jokes short hindi how to fix low sex drive with pcos free celebrity sex porn hb gay group sex sex change operation male to female youtube sexiest marvel actress
    alexandra daddario sex natural male sex drive supplements what does oral sex mean to a man sex statues in world sex panther by odeon ingredients jennifer aniston sex scene early morning text meme love porn increase sex drive
    without drugs kendall jenner sex tape safe sex statistics canada homeless porn video sex iran sex during prison visitation bathroom sexuality victoria lynn porn free black anal porn free porn xvideos museum of
    sex new york ny united states side effects of anal sex porn japan clown fish sexes
    full sexually peach porn vegas sex stories reddit free porn videos hd
    justin bieber having gay sex sports nutrition experiments latina teen sex adult porn free fine
    for sex in car in california gay men having sex

  • Enlace al Comentario Stepanie Miércoles, 14 Febrero 2018 11:03 publicado por Stepanie

    sore during sex when pregnant nasty sex instagram quotes
    quiet porn candid porn no sex in the champagne room mexican teen porn cheerleader sex
    does oral sex causes cancer khloe kardashian sex homemade public sex gay bondage porn lesbians sex sex podcasts sex mood tablets
    name for female quotes about sexuality peacock bird
    sexuality revenge porn kinky sex tips beulah mcgillicutty porn places to
    have sex near me sex positions when pregnant first trimester
    candid porn big ass anal porn xvideos free porn usa today sexuality sex tape
    sex scene how often do couples have sex sex words to your
    love sex questions to ask a guy your dating mr zogs sex wax air
    freshener teen phone sex cash porn normal male sex frequency perfectgirls porn sex chats claim a second trader good porn tumblr straight
    sex food increase sex drive female swag sex pill side effects sex emoji text app sex pants
    sex frequency age 70 pov sex sex big tits orgy porn slim thick porn big tit blonde porn huge dick
    porn sex ideas to try on him famous toon porn best sex pills at cvs

  • Enlace al Comentario Aaron Miércoles, 14 Febrero 2018 09:45 publicado por Aaron

    jugar juegos de tarot virtual tirada tarot gratis flash tarot
    telefonico de confianza tarotista gratis por chat tarot de
    hoy geminis gratis tarot amor gratis tirada arquitecto de suenos tarot tirada de cartas de tarot tarot gratis del amor que acierte tirada tarot gratis para parejas juegos de tarot virtual
    tarot gratis futuro y salud tarot gratis sobre mi futuro tarot gratis para hoy sagitario tirada e interpretacion tarot gratis que significa la carta del
    tarot el diablo tarot amor gratis 80 tiradas tarot acuario mayo 2017 tarot sobre el amor tarot gratis para el amor 2017 tarot por telefono en chile
    tarot barato 0 41 tarot del trabajo 2017 astro tarot gratis carta del dia tarot tarot capricornio tarot pareja amor gratis tarot horoscopo semanal tirada tarot gratis trabajo
    y dinero tarot cartas de poker gratis mejor pagina tarot
    gratis tarot del si y no del amor tarot del amor gratis preguntas concretas
    tarot malaga plaza tarot cancer abril 2017 tirada tarot parejas
    tarot barato por visa tarot del trabajo 2017 carta tarot muerte tarot del sol y la luna gratis
    tirada del tarot de los suenos gratis la carta del amor con tarot gitano buenas
    tarotistas barcelona la carta del amor con tarot gitano tarot tauro 2017 junio aprender tarot facil tarot sagitario 2017 abril cartas del tarot gratis de
    embarazo lectura del tarot gratis 10 cartas tirada de tarot gratis del si o no tarot gratis 2017 si o no

  • Enlace al Comentario Vance Miércoles, 14 Febrero 2018 07:47 publicado por Vance

    free tarot card reading for future prediction tarot lady
    townsville tarot reading while pregnant free lovers tarot reading glo 3 card tarot free tarot card readings online gemini love
    horoscope today tarot the new tarot for the aquarian age meaning of wands in tarot
    ask the tarot a love question tarot master guide gypsy
    tarot spread best tarot reading sites world tarot love dove
    two lovers tarot spread tarot card meanings king of swords reversed text tour the egyptian origins of the tarot
    free online tarot reading one card three card reading tarot tarot reading
    question answer 12 tarot card spread tarot questions relationship 9 of wands tarot
    heaven tarot card reversed does mean free tarot numerology free
    professional tarot card reading judgement tarot love reversed tarot card meanings star reversed
    free tarot horseshoe spread tarot six of wands reversed dream tarot card reading the
    crone tarot card meaning tarot knight of cups love princess of swords oak tarot what does the high priestess
    mean in a tarot reading tarot card reading hermit
    reversed fool in tarot the popess tarot card meaning tarot divination meanings
    free daily love tarot card reading nine of cups tarot love qabalah tarot king of swords tarot iii tarot 7 wands tarot
    celtic cross tarot card spread the magician tarot heaven ace of cups tarot
    love meaning real virtual tarot answers tarot future love love oracle tarot

  • Enlace al Comentario Hubert Miércoles, 14 Febrero 2018 07:06 publicado por Hubert

    valerie karsenti sex porno jeune lust porno porno enorme fesse porno vids sexe en foret porno petit sexe photo sexe feminin piercing sexe homme sex irani porno jeune noir
    sex anale face sitting porno sexe de tortue porno carton sexe 69 sexe amateur voyeur porno dehors jordan sex amateur sexe gratuit sandra bullock sex
    site sexe amateur papy sexe live sex webcam sexe facile sex blak italie sexe photo porno gratuit sexe gay mature sex video amateur casting porno gay video porno incest video gratuit
    porno site porno amateurs salon du sexe indan sex film porno gratuit video porno porno seins naturels
    femdom porno video sexe extreme film porno katsuni chaine porno gratuit porno gang band camera sex pinay sex video
    suedoise sex porno papi porno exib cartoons porno histoires de
    sex sire porno

  • Enlace al Comentario Candace Miércoles, 14 Febrero 2018 06:43 publicado por Candace

    plan cul haute vienne plan cul courbevoie plan cul montmorency comment trouver un plan cul ou trouver plan cul
    plan cul pessac comment se faire un plan cul plan cul 45 plan cul
    sucy en brie plan cul la garde plan cul chat gratuit plan cul territoire de belfort plan cul rennes plan cul
    pontarlier lyon plan cul plan cul au tel tel plan cul
    trouver plan cul plan cul bezons le bon plan cul plan cul vichy plan cul argenteuil plan cul clichy sous bois plan cul
    gays plan cul niort plan cul creutzwald plan cul sur
    rouen site plan cul totalement gratuit comment proposer un plan cul plan cul mandelieu la
    napoule tchat gratuit plan cul plan cul hem
    plan cul talant plan cul creil un plan cul pour ce soir plan cam cul plan cul saint
    maur des fosses video plan cul amateur plan cul a 4 plan cul 56 plan cul muret
    plan cul sur limoges plan cul finistere plan cul a meaux plan cul maurepas plan cul petite ile plan cul reel plan cul filme plan cul hyeres trouver un plan cul facilement plan cul dammarie les
    lys

  • Enlace al Comentario Rosa Miércoles, 14 Febrero 2018 05:57 publicado por Rosa

    farrah abraham sex tape funny sex quotes with photos
    peanuts porn sex wax tee shirts sex magick spells sunny leon porn self sexting
    anel porn sex cruises australia sex time average in india 1920
    porn is oral sex a sin in marriage catholic huge dick
    porn fluffer porn roger rabbit porn sex sleep meditation freaky nasty sex memes instagram
    sex robot stocks subway surfers porn sex emoji meanings funny poems about sexuality deep
    sexual questions to ask a girl female sex drive vs male brazil sexploitation ashley tisdale
    sex mark davis porn sex jokes quotes images in hindi new sex
    ideas for my husband hd sex video office sex stories sex dailymotion sex funny quotes in tamil sex apps that
    actually work sex text symbols iphone how to do sex in islam wikihow no porn free ebony shemale porn reality show hot in india how to make sex christian sex before
    marriage teen first time porn best porn sites for women oral sex
    tips youtube husband wife hot jokes in urdu
    redtube gay porn how many genders are there now things to say to your girlfriend during
    sex best sex quotes for husband thug gay porn funny sex jokes
    pick up lines sex names starting with a

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.