Devecoop en el Festival Latinoamericano de Instalación de Software Libre – FLISoL

FLISoL es el evento más importante de Software Libre en Latinoamérica. Desde hace 12 años se realiza en diferentes ciudades de todo el continente.

Este año Devecoop participó en las sedes Ciudad de Buenos Aires (organizado por CaFeLUG) y Lanús (organizado por Lanux).

Sede CABA

En CABA hubo 3 tracks simultáneos con 35 charlas para todos los gustos y niveles:

Los que recién arrancaban tenían para elegir temas como Introducción a GNU/Linux, Introducción a la línea de comandos, charlas de ofimática en GNU/Linux entre otras.

También hubo charlas sobre cooperativismo, seguridad informática, administración de sistemas, programación, redes, electrónica, reciclaje de hardware, criptografía, voto electrónico y Software Libre en general.

El cuarto track fue el de las instalaciones propiamente dichas, donde cada persona podía traer su computadora y una persona lo o la ayudaba con el proceso de instalación de alguna versión de GNU/Linux

 

Asimismo participaron numerosas comunidades con stands, entre las cuales estaban:

Sysarmy, Devecoop, LinuxChix Argentina, Mozilla Argentina, Chicas Poderosas, Wikipedia, SolAr, GNUTN, Partido Pirata Argentina, Ekospace de Ekoparty, KDE-ar

 
Salón de stands e instalaciónes
Salón de stands e instalaciónes
Salón de stands e instalaciónes
Salón de stands e instalaciónes
 

Sede Lanús

En Lanús Devecoop  participó con dos charlas: Introducción al Software Libre y proyectos sencillos con Raspberry Pi.

Charla 'Conociendo el mundo del software libre'
Charla 'Conociendo el mundo del software libre' por Juan M. Schillaci
 

También hubo charlas de cloud computing y desarrollo con plataformas de hardware abiertas, y un taller de Arduino, donde se repartieron placas de desarrollo y cada participante pudo experimentar y tener su primer contacto con la electrónica.

 

Los números en todo el país:

  • Sedes : 39
  • Asistentes: 3925
  • Disertantes: 258
  • Instalaciones: 387

Desde Devecoop queremos agradecer a organizadores y organizadoras de las diferentes sedes, a todas las comunidades y asistentes por su compromiso en la difusión del Software Libre.

Pingüino hecho por socios de la cooperativa que luego se sorteó en el evento
Pingüino hecho por socios de la cooperativa que luego se sorteó en el evento
 

Para más información sobre el evento http://www.flisol.info/FLISOL2016/Argentina

Devecoop se prepara para FLISOL 2016 – 12º Festival Latinoamericano de Instalación de Software Libre el 23 de Abril

En Devecoop nos preparamos con todo para participar del 12º FLISOL: Festival Latinoamericano de Instalación de Software Libre el 23 de Abril.

Este evento es una gran oportunidad para acercarse al mundo del software libre, o explorarlo aún más, siempre hay más para conocer!

Vamos a estar en FLISOL de Capital Federal, en el Centro Cultural General San Martín, ubicado en Sarmiento 1551, organizado por CaFeLUG. También en FLISOL Lanús vamos a estar en  la Universidad Nacional de Lanús en 29 de Septiembre y Malabia - Remedios de Escalada, organizado por Lanux LUG.

En FLISOL Lanús Juan Manuel Schillaci de Devecoop dará dos charlas. Una sobre cómo el software libre cambio el mundo en el que vivimos y otra en la que propone “con una raspberry, Python y un poco de hacking podemos divertirnos, aprender y hacer proyectos sencillos e interesantes”.

Muchos de nosotros hemos asistido a otras ediciones del FLISOL, como curiosos, dando charlas o instalando... y es un gusto esta vez participar con un stand de nuestra empresa cooperativa, Devecoop, en el FLISOL de Capital Federal. Vamos a estar charlando con todos y tenemos regalos!!! Lápices, remeras, stickers, y hasta un Tux artesanal de origami hecho con habilidad, dedicación y espíritu libre por nuestros socios! :)

81d4ad5e-708d-4a07-9ded-4d9dfaa722b7 (1) 86d69377-4031-4c4f-affd-66fed461b7d4 Te esperamos!!!      

Devecoop busca socios!!!

¿Soñaste con trabajar sin competir, cooperando por el bien común, junto a verdaderos compañeros organizados democráticamente? ¿Soñaste con tener voz y voto en una empresa propia y colectiva? ¿Sos freelance y buscás más seguridad y crecimiento, sin perder la independencia? ¿Tu futuro está en una empresa tradicional o corporación, pero buscás algo más?

En Devecoop somos una Cooperativa de Trabajo, cada uno de nosotros es un socio/a, dueño/a de la empresa. Cooperamos para construir este sueño, compartiendo las ganas, el esfuerzo, éxitos y aprendizajes, el futuro, todo. Somos miembros fundadores de FACTTIC, la federación que nuclea a la mayoría de las cooperativas de tecnología del país.

Si sólo querés conocernos, tenemos las puertas abiertas para contarte esta ambiciosa experiencia que es el cooperativismo.

Si crees estar listo para el desafío, estamos buscando a alguien con al menos:

  • 3 años de experiencia en desarrollo de software web.

  • Nivel de idioma inglés Intermedio a Avanzado (escrito u oral).

  • Proactividad, predisposición a nuevos desafíos… de verdad, no es sólo una frase :)

  • Habilidad para integrarse y trabajar en un equipo.

  • Ganas de tener algo propio y contribuir a que crezca.

  • Residencia en CABA o alrededores.

Si te identificas con algo de lo siguiente, mejor aún:

  • Experiencia con Python, Django, o querés aprender.

  • Experiencia con frameworks Javascript (Node, Angular, Backbone).

  • Experiencia como DevOps, deployment, administración de ambientes.

  • Experiencia como PM, liderando equipos de desarrollo, o con metodologías ágiles.

  • Experiencia en análisis de requerimientos, interacción con clientes, presupuestos.

Antes que nada es importante que te motive sumarte a una cooperativa, donde las decisiones sobre el futuro de la empresa son tomadas por cada uno de los socios en asamblea, con todos los desafíos, beneficios y responsabilidades que esto significa.

Podés enviarnos tu CV actualizado a socios@devecoop.com, o pasarle esta propuesta a tus conocidos.

¡¡Te esperamos!!

Conociendo Loopback – Parte 2.

Imagen-Devecoop-Loopback

Hola!, en esta edición vamos a agregar otro modelo vía código, ver las relaciones y jugar un poco con los datasources.

En la edición anterior habíamos creado un modelo todo con el wizard.

Ahora vamos a definir otro modelo llamado category, pero esta vez manualmente, para hacerlo tenemos diferentes formas, hoy vamos a mostrar dos:

  1. vía código.
  2. definiendo el schema en json.

1 - Definiendo nuestro modelo manualmente vía código

Como vimos en el post anterior los modelos se extienden por lo general de un modelo base (PersistedModel), por ello tenemos que hacer lo siguiente:

  1. Crear un nuevo archivo dentro de la carpeta boot (server/boot), para que se inicialice cuando arranque la aplicación, por ejemplo create-category.js. Podemos copiar alguna estructura de los otros archivos de esta carpeta.

Los scripts que están dentro de esta carpeta “boot” son los archivos que se ejecutaran en orden cuando la aplicación comienza y luego de que se ejecute el bootstrapper (https://github.com/strongloop/loopback-boot). Los ejemplos más comunes son configuraciones, creaciones de modelos, y de data de ejemplo para desarrollo, entre otros

Forma 1 - con herencia.

Agregando estas lineas creamos el model:

  var Model = server.loopback.Model;
  var Category = Model.extend('categories');

Se puede ver aquí el código

Forma 2 - con configuraciones.

Pero también lo podemos hacer así:

  var config = {
      dataSource: 'db',
      public: true
    };
    server.model('Category', config);

Se puede ver aquí el código. Aquí se pueden ver las configuraciones que se pueden aplicar.

Forma 3.

O con el metodo createModel:

var Category = server.loopback.createModel('Category');

Se puede ver aquí el código.

Esta es la forma recomendada para crear un modelo manualmente. Para conocer más sobre este método podemos consultar los apidocs.

También les dejo esta respuesta de Raymond Feng, co-founder de Loopback, para que vean lo que dice alguien que sabe mucho del tema sobre estas formas.

Ahora que tenemos nuestro modelo creado, cuando se inicie el server vamos a poder utilizar nuestro modelo creando un archivo al que llamaremos category.js en common/models dejándolo de la siguiente manera:

module.exports = function(Category) {
  
};

Más adelante vamos a ver que otras cosas podemos hacer acá, por ahora dejémoslo vacío y veamos la otra forma.

2 - Definiendo nuestro modelo manualmente vía schema

Ahora vamos a crear nuestro modelo definiéndolo en un json, en principio tendrá un solo campo nombre.

Creamos category.json dentro de la carpeta common/models

  {
    "name": "category",
    "plural": "categories",
    "base": "PersistedModel",
    "idInjection": true,
    "options": {
      "validateUpsert": true
    },
    "properties": {
      "name": {
        "type": "string",
        "required": true
      }
    },
    "validations": [],
    "relations": {},
    "acls": [],
    "methods": []
  }

Luego necesitamos crear el category.js al igual que hicimos anteriormente.

Y para terminar de crearlo necesitamos agregarlo en el model-config.json:

  "category": {
      "dataSource": "db",
      "public": true
    }

Lo que acabamos de hacer lo pueden ver aquí.

Validaciones

Se acuerdan que les dije que más adelante íbamos a ver que podemos hacer en el category.js ?, bueno este archivo se utiliza para darle comportamiento, agregar métodos remotos, hooks, logica, validaciones y demás.

Por ahora vamos a ver que fácil es validar en LoopBack. Como nuestro modelo tiene un nombre solamente queremos que ese nombre no se repita y sea unico para ello solamente agregamos lo siguiente en el category.js:

  module.exports = function(Category) {
    Category.validatesUniquenessOf('name', {message: 'el nombre debe ser unico'});
  };

El código se puede ver aquí.

Verán que si ya tenemos agregado por ejemplo “Casa” y queremos agregar “Casa” nos mostrara lo siguiente en el explorer:

Imagen-Duplicate

Como no quiero ahondar mucho en este tema les dejo un buen articulo donde se encuentran todos los métodos de validación que vienen con el framework.

Relaciones

Bueno hasta acá vimos casi lo mismo que el post anterior, ahora es donde vienen las cosas nuevas e interesantes.

Lo que queremos lograr con este nuevo modelo es poder cargar listas de cosas pero a su vez también poder categorizarlas para poder agruparlas, hacer búsquedas, etc. Por lo que diremos que un todo puede tener cero, uno o más categorías, el modelo todo tiene una relación con el modelo categoría.

Con loopback tenemos la posibilidad de definir las relaciones en el json, en este caso vamos a utilizar hasAndBelongsToMany ya que un ítem todo puede tener muchas categorías y una categoría puede estar en muchos todo ítems.

Para agregar esta relación lo que debemos hacer es ir al todo.json y agregar lo siguiente:

  "relations": {
    "categories": {
      "type": "hasAndBelongsToMany",
      "model": "category"
    }
  }

Aquí se pueden ver todas las posibilidades de relaciones que tenemos entre los modelos.

Veamos un ejemplo:

Primero agreguemos algunas categorías y algunos ítems de todo. Eso es hacer lo mismo que hicimos en la edición anterior así que no voy a mostrarlo, en mi caso creé lo siguiente:

  • 3 categorias: Casa, Animales, Auto

Imagen-GET-Categories

  • 2 ítems: Limpiar el baño, Comprar comida

Imagen-GET-Todo

Ahora como hago para agregarle una categoria al item ?, bueno de la siguiente manera:

  • Haciéndole un PUT al endpoint que cumple esa función /todos/{id}/categories/rel/{fk}. PUT es un metodo HTTP que modifica el objeto en cuestión, acá les dejo los diferentes verbos que se usan y son utilizados para los servicios REST.

Vamos a agregar la categoría “Casa” (fk: id 1 de categoria) a el ítem “Limpiar el baño” (id: id 1 de todo), por lo que esto quedará así:

Imagen-PUT-Categories-TODO

Y nos devolverá esto:

Imagen-PUT-Categories-TODO-Response

Para verificar que se haya agregado la categoría correctamente podemos hacerle un GET a /todos/{id}/categories

Imagen-GET-Categories-TODO

Y como vemos nos devolvió “Casa”

Imagen-GET-Categories-TODO-Response

Filtros

Otra buena característica de Loopback es que tiene varias formas de consultar nuestra data, para esta entrega solo vamos a ver en acción uno de los filtros más comunes, el where filter:

Como siempre para probar vamos al explorer y juguemos con las categorías que creamos antes: “Casa”, “Animales” y “Auto”.

Entonces ahora si queremos buscar el ítem con el nombre “Casa”, hacemos lo siguiente en el GET de categories:

Imagen-GET-Categories-TODO-Filter

Nos aparece los que matchean exactamente con Casa, pero también podemos buscar todos los que comiencen con “A” por ejemplo:

{"where" : {"name":{"like":"A"}}}

y nos da como resultados los ítems que contienen a “Animales” y “Auto”.

Imagen-GET-Categories-Filter-Like-Response

La misma forma se puede utilizar para todos los modelos, ¿cómo haríamos si queremos obtener la lista de todas las tareas que nos faltan realizar?

Sobre los filtros vamos a ver más en la próxima entrega cuando tengamos integrado el cliente.

Persistencia

Vos me dirás “che todo bien con esto, pero cuando bajo el server pierdo todo lo que cargué”. Bueno la solución a eso es persistir los datos, Loopback viene con la posibilidad de poder conectarse a las bases de datos más utilizadas. Nosotros vamos a ver un par de ejemplos, mostrando la facilidad para conectar bases noSQL, con MongoDB, y bases relacionales, con MySQL.

Persistencia con MongoDB

Vamos a arrancar con la base que más utilizo, MongoDB. Y la conexión la vamos a hacer a través de la CLI.

Antes que todo si no tenemos mongo instalado necesitamos instalarlo con una versión 2.6 o superior, en la página de mongo están los archivos.

Luego ya podemos instalar el conector de mongo, lo hacemos mediante npm:

  $ npm install loopback-connector-mongodb --save

Una vez instalado vamos a poder agregar nuestro nuevo datasource:

  $ slc loopback:datasource

Y nos aparecerá el wizard que ya conocemos:

? Enter the data-source name: todoMongo
? Select the connector for todoMongo: 
  PostgreSQL (supported by StrongLoop) 
  Oracle (supported by StrongLoop) 
  Microsoft SQL (supported by StrongLoop) 
❯ MongoDB (supported by StrongLoop) 
  SOAP webservices (supported by StrongLoop) 
  REST services (supported by StrongLoop) 
  Neo4j (provided by community) 
(Move up and down to reveal more choices)

y listo ahora vamos a ver que es lo que hicimos, aunque es bastante descriptivo:

  • ? Enter the data-source name: Nombre del data source, acá pueden elegir lo que les parezca, en nuestro caso elegimos todoMongo
  • ? Select the connector for todoMongo: Acá elegimos el conector, en este caso mongoDB, que como ven esta siendo mantenido directamente por strongloop, allí hay muchos más para elegir, hasta la comunidad mantiene algunos !

Si vamos al datasources.json vamos a ver que nos encontramos con que nuestro nuevo datasource se agrego:

{
  "db": {
    "name": "db",
    "connector": "memory"
  },
  "todoMongo": {
    "name": "todoMongo",
    "connector": "mongodb"
  }
}

Ya tenemos todo lo que necesitamos pero antes de empezar a probar necesitamos hacer 2 cosas:

  1. Configurar la conexión:
  "todoMongo": {
    "name": "todoMongo",
    "connector": "mongodb",
    "host": "127.0.0.1", 
    "database": "todoDB", 
    "username": "", 
    "password": "", 
    "port": 27017 
  }

  1. Decirle a los modelos que queramos que se usen como datasource el que acabamos de crear, esto se hace cambiando el campo dataSource de los modelos que queramos del model-config.js, por ejemplo:
  "todo": {
    "dataSource": "todoMongo",
    "public": true
  },
  "category": {
    "dataSource": "todoMongo",
    "public": true
  }

Aquí esta lo que hicimos.

Volvamos al explorer, agreguemos un par de categorías y como ven nada cambio, seguimos de la misma forma que antes. Ahora si apagamos el server, lo volvemos a levantar y hacemos un GET a las categorías vamos a obtener las que agregamos antes de apagar el server.

Persistencia con MySQL

Lo bueno de esto es que es lo mismo, por lo que no voy a ser muy detallado: En principio debemos tener MySQL 5.0 o superior, en la página lo pueden descargar.

Luego son los mismos pasos que hicimos antes, instalar el conector, configurar los modelos y la conexión y empezar a jugar !

Igualmente áca dejo la documentación del connector.

Bueno esto fue todo, espero que les haya gustado, a mi como siempre me gustó poder hacerlo, para la próxima entrega vamos a ver como integrar el cliente con todo lo que estuvimos haciendo, espero poder traerla con menos tiempo de diferencia.

Conociendo loopback – Parte 1.

Imagen-Devecoop-Loopback

Buenas!, este articulo es el primero de una serie de varios sobre este framework llamado Loopback.

Loopback como dice su pagina es un framework javascript basado en express, por lo que si conocen express será fácil de entender y usar el conocimiento que ya tienen.

LoopBack is an open source Node.js framework built on top of Express optimized for building APIs for mobile, web, and other devices. Connect to multiple data sources, write business logic in Node.js, glue on top of your existing services and data, connect using JS, iOS & Android SDKs

En el último proyecto donde estuve optamos por usar este poderoso framework, que tiene varias cosas muy interesantes, entre ellas:

  • Easy-to-use CLI wizard.
  • Built-in API Explorer.
  • Diversas características para la creación, relaciones y permisos de los modelos.
  • Es isomorfico, compartiendo entre el cliente y el server la misma API.

Que mejor forma de ver el potencial que usándolo…

Paso 1 - Instalación:

Primero verifica que tengas Node y NPM instalados, si falta instalarlo tenes este muy buen post de Ale Fácil, con un paquete npm corriendo la siguiente:

$ npm install -g strongloop

(si dice strongloop, strongloop es la empresa que desarrolla loopback, aunque ahora la adquirió IBM)

Ahora que ya lo tenemos instalado vamos a poner manos a la obra !

Lo primero que tenemos que hacer es crear un proyecto, como soy alguien que se olvida de las cosas (y lamentablemente tengo muchas cosas que hacer) se me ocurrió algo fácil y productivo: un TODO.

Cómo hacemos esto ?, con nuestro Easy-to-use CLI wizard:

$ slc loopback

Y por lo general este CLI wizard nos va guiando haciéndonos preguntas, en este caso las siguientes (si, es un yeoman generator!):

[?] Enter a directory name where to create the project: todo-app
[?] What's the name of your application? todo-app

Aquí podemos ver lo que acabamos de hacer.

Paso 2 - Crear nuestro modelo

Nuestro siguiente paso es crear nuestro model todo, el cual va a tener un campo text de tipo string y un campo booleano para saber si esta completado o no.

$ cd todo-app
$ slc loopback:model
? Enter the model name: todo
? Select the data-source to attach todo to: db (memory)
? Select model's base class: PersistedModel
? Expose todo via the REST API? Yes
? Custom plural form (used to build REST URL): todos
Let's add some todo properties now.

Que son todas esas selecciones que hicimos:

  • Select the data-source to attach todo to: db (memory): En esta entrega elegimos que nuestro datasource sea memory y se guarde en ella, eso quiere decir que al cerrar nuestra app, se perderá todo lo que guardemos. Mas adelante veremos como podemos ir cambiando de datasources.
  • Select model’s base class: PersistedModel: PersistedModel es el modelo base de todos los modelos que vienen con Loopback, excepto Email y además nos provee de base las operaciones CRUD y nos expone los REST endpoints.
  • Expose todo via the REST API? Yes: Nos da la posibilidad de usar el API Explorer.

Hasta acá tenemos creado el modelo, y como nos dice la consola vamos a agregar las propiedades que mencionamos anteriormente:

Enter an empty property name when done.
? Property name: text
   invoke   loopback:property
? Property type: string
? Required? Yes
Let's add another todo property.
Enter an empty property name when done.
? Property name: completed
   invoke   loopback:property
? Property type: boolean
? Required? Yes

Cuando no queremos agregar más propiedades le damos ctrl+c

Fíjense que se crearon dos archivos, todo.js y todo.json. El todo.json es el esqueleto del modelo donde se definen propiedades, campos, relaciones, permisos, etc. Y el todo.js es donde vamos a crear los métodos remotos de este modelo, hooks, etc. Cabe agregar que esta forma es común a todos los modelos.

Así quedo nuestro todo.json:

{
  "name": "todo",
  "plural": "todos",
  "base": "PersistedModel",
  "idInjection": true,
  "options": {
    "validateUpsert": true
  },
  "properties": {
    "text": {
      "type": "string",
      "required": true
    },
    "completed": {
      "type": "boolean",
      "required": true
    }
  },
  "validations": [],
  "relations": {},
  "acls": [],
  "methods": []
}

Y asi nuestro todo.js:

module.exports = function(Todo) {

};

Además en el model-config.json se agrego el datasource del nuevo modelo.

Aquí podemos ver lo que acabamos de hacer.

Bueno y ahora ?, lo corremos!:

$ node .
Browse your REST API at http://0.0.0.0:3000/explorer
Web server listening at: http://0.0.0.0:3000/

Si vamos a http://0.0.0.0:3000/explorer o http://localhost:3000/explorer vamos a ver dos modelos, todos y Users (se acuerdan del model-config.json que los modelos tenían una propiedad public ?).

Bueno ahora es la parte donde ustedes se ponen a jugar (yo solo voy a mostrar un par de ejemplos sencillos), loopback ya creo toda la API por nosotros, donde tenemos tenemos las operaciones más comunes: POST, GET, PUT, find, exists, etc.

Agregar un nuevo ítem:

Primero abrimos el acordeón en POST /todos (nos llevara a http://localhost:3000/explorer/#!/todos/create).

Una vez abierto tenemos un par de cosas interesantes, en principio esta separado en tres grupos para que sea mejor la visualización de cada paso: Response Class, Parameters, Response Messages.

La Response Class la podemos visualizar de dos maneras, Model: que nos mostrara como estan definidas sus propiedades (de que tipo son, si son requeridas o no, etc) y Model Schema: que nos muestra un json con los valores por defectos.

En Parameters en el textarea value agregamos el ítem que queremos (podemos agregarlo directamente o haciendo click sobre la el model schema de la columna Data Type nos setea el esqueleto para que lo completemos).

En ambos grupos podemos setear el content type.

Y por ultimo, pero no menos importante, tenemos el Response Messages, donde nos muestra de donde vino el request y algunos datos de la respuesta como el body, el code y los headers.

Imagen-Making-POST

En este ejemplo agregamos un ítem, limpiar la cocina :( y una vez que hacemos click en “Try it out!” nos muestra la respuesta:

Imagen-POST-RESPONSE

Para ver todos los items que agregamos podemos hacer el mismo procedimiento pero ahora con GET, aquí podemos usar los filtros, pero queda para otra ocasión mostrar el uso de estos.

Imagen-GET

Esto fue una primera mirada de lo que nos ofrece Loopback, sin haber agregado una linea de código por nosotros mismos tenemos una API REST de un modelo que definimos.

En la próxima parte vamos a ver como integrar el cliente y conectarnos a alguna base de datos.

Como crear una app Backbone + RequireJs + Compass desde cero con Yeoman

Esta guía mostrará como crear una aplicación Backbone + RequireJs + Compass totalmente desde cero.

En el camino, cubriremos como instalar Node, NPM, RVM, Ruby, Compass y Yeoman (yo, Grunt, Bower).

También cubriremos algunos de los errores comunes, y como resolverlos.

Esta guía es para máquinas con sistema operativo basado en GNU/Linux, y fué testeado en Ubuntu 12.04 64 bits.

1. Node.js y NPM

Primero instalamos Node.js y Node Package Manager (NPM).

Es importante NO usar SUDO al instalarlos. Usar sudo probablemente te traiga algunos conflictos de permisos complicados.

Instalar Node y NPM puede traer dificultades dependiendo de la configuración de tu máquina (firewall, usuarios, etc.) He encontrado que este Gist tiene la solución correcta para la mayoría de los casos. Aquí, vamos a usar la primera.

Instalamos Node (se hace referencia al archivo ~/.bashrc, tu shell puede usar otro):

echo 'export PATH=$HOME/local/bin:$PATH' >> ~/.bashrc
. ~/.bashrc
mkdir ~/local
mkdir ~/node-latest-install
cd ~/node-latest-install
curl http://nodejs.org/dist/node-latest.tar.gz | tar xz --strip-components=1
./configure --prefix=~/local
make install

Luego instalamos NPM:

curl https://www.npmjs.org/install.sh | sh

Para verificar:

node -v
npm -v

Node debería ser v0.10.26 o mayor, NPM 1.4.3 o mayor.

2. Compass

Con Node y NPM listos, ahora necesitamos instalar Compass.

"Compass is an open-source CSS authoring framework which uses the Sass stylesheet language to make writing stylesheets powerful and easy."

Para instalar Compass, primero necesitamos Ruby.

Si ya tienes Ruby instalado, verifica que tengas la última versión con

ruby -v

Y actualiza las gemas con

gem update --system

Si no lo tienes, vamos a instalarlo (al escribir esto la última versión es 2.1.1).

Hay diferentes manera de instalar Ruby, en este caso elegimos hacerlo a través de Ruby Version Manager (RVM).

"RVM is a command-line tool which allows you to easily install, manage, and work with multiple ruby environments from interpreters to sets of gems."

curl -L https://get.rvm.io | bash -s stable
source ~/.rvm/scripts/rvm
rvm install 2.1.1
gem install compass

Verificamos:

ruby -v
compass -v

Por las dudas, abre una nueva consola y prueba ruby -v de nuevo.

Si en la nueva consola no tienes el comando ruby, tienes que habilitar la opción "Run command as a login shell" en la configuración de tu consola. El porqué de esto está muy bien explicado en este artículo.

3. Yeoman

Para crear nuestra aplicación, vamos a usar el generador Backbone generator de Yeoman. Va a realizar casi todo el trabajo pesado por nosotros.

Yeoman es una gran herramienta creada por Addy Osmani (el mismo del recomendable libro Backbone Fundamentals) y otros, que nos ayudará a crear y trabajar con nuestra aplicación.

Viene con tres herramientas: yo, para crear nuevas aplicaciones ("scaffolding"), Grunt, to buildear, correr, testear y ejecutar todas las tareas de nuestro flujo de trabajo, y Bower, un manejador de paquetes.

Instalaremos Yeoman (usamos el flag -g para indicarle a NPM que debe ser instalado globalmente):

Atención: no usamos SUDO cuando instalamos con npm!

npm install -g yo

Si ves el siguiente mensaje en la consola:

[Yeoman Doctor] Uh oh, I found potential errors on your machine

[Error] NPM root value is not in your NODE_PATH
  [info]
    NODE_PATH = /usr/lib/nodejs:/usr/lib/node_modules:/usr/share/javascript
    NPM root  = ~/local/lib/node_modules

  [Fix] Append the NPM root value to your NODE_PATH variable
    Add this line to your .bashrc
      export NODE_PATH=$NODE_PATH:~/local/lib/node_modules
    Or run this command
      echo "export NODE_PATH=$NODE_PATH:~/local/lib/node_modules" > ~/.bashrc && source ~/.bashrc

Sigue las instrucciones debajo de [Fix], para agregar el directorio raiz de NPM al NODE_PATH (ojalá todas las herramientas nos dieran soluciones así!)

echo "export NODE_PATH=$NODE_PATH:~/local/lib/node_modules" > ~/.bashrc && source ~/.bashrc

Para crear nuestra app Backbone, necesitamos el Backbone generator de Yeoman que sabe cómo hacerlo. Vamos a instalarlo:

npm install -g generator-backbone

Para verificar la instalación:

yo -h

Debajo del mensaje "Please choose a generator below." deberías ver un item "Backbone". Si no, prueba lo siguiente y vuelve a instalar el generador:

echo "export NODE_PATH=$NODE_PATH:~/local/lib/node_modules" >> ~/.bashrc && source ~/.bashrc

Creando la aplicación

Casi estamos listos. Crea un directorio para la nueva aplicación, y usa el generador dentro de ella:

mkdir <nombre-de-la-app>
cd <nombre-de-la-app>
yo backbone

Durante la creación, elige las opciones "⬢ Bootstrap for Sass" y "⬢ Use RequireJs".

El próximo paso es instalar las dependencias:

npm install
bower install

Corriendo la aplicación

La app está creada. Para probarla, corremos la tarea "serve" de Grunt:

grunt serve

Nuestro navegador default se debería abrir apuntando a http://localhost:9000/, y veremos la app creada.

En la consola, podemos ver las diferentes tareas que Grunt corrió para nosotros (estas tareas están definidas en el Gruntfile.js, en el directorio de nuestra app). Podemos ver una tarea "connect:livereload" ejecutada, y se sigue ejecutando la tarea "watch". Esto significa que gracias a LiveReload, podemos editar por ejemplo index.html o cualquier archivo javascript dentro de nuestra app, guardarlo, y el navegador se actualizará automaticamente! Ahorra mucho tiempo.

Listo, ya podemos empezar a trabajar en nuestra app Backbone!

El generador no solo creó la estructura por nosotros, también podemos continuar usándolo para crear las partes básicas de toda app Backbone (models, views, etc.), como el router:

yo backbone:router ''

Happy coding!

Documentando los directorios con Tree

Me tocó la tarea de documentar la jerarquía de directorios de los servicios que tenemos funcionando. Se me ocurrió utilizar el comando 'tree' para generar la estructura en txt y así poder ponerla en la wiki agregándole una descripción de cada directorio a mano.

El comando tree te genera el arbol de directorios de un directorio indicado. Lo puede mostrar por pantalla, guardar a un archivo de texto o incluso puede generar html.

Ejemplo:

/usr
├── bin
├── games
├── include
├── lib
├── lib32
├── local
├── sbin
├── share
└── src
9 directories

Para instalarlo con apt:

$ sudo apt-get install tree

Para copiar la salida a un archivo txt se puede usar la opción -n (para desactivar los colores que son carácteres especiales) y -o para especificar el archivo.

$ tree -d -L 1 -n -o fhs.txt /

Se puede generar html con la opción -H

$ tree -H -d -L 1 -n -o fhs.html /

También se puede especificar un patrón de archivos incluir con la opcion -P e incluso especificarle varios directorios de búsqueda. No olvidarse de encomillar el patrón -P para que no lo expanda bash.

$ tree -P '*.list' sources.list.d/ /etc/apt/

Evitando la registración en La Nación y Clarin

Ahora resulta que a La Nación se le dio por pedir registración para leer algunos artículos. No voy a entrar en la discusión de si es conveniente o no, acá van instrucciones rápidas para esconder la registración y seguir leyendo el artículo en cuestión. La idea es acceder a la consola de Javascript (no se preocupen si no saben lo que es) y ejecutar un par de comandos para esconder el diálogo que pide registración y evita scrollear el artículo.

Google Chrome

Abrir el menú principal (el botón con tres líneas horizontales), ir a Más herramientas > Consola de Javascript. Pegar el siguiente comando en el renglón donde el cursor parpadea y apretar enter: $('#iframe-registracion').hide(); $('body').removeClass('modal-open'); Screen Shot 2015-03-25 at 10.53.59  

Firefox

Abrir el menú principal (igual a Chrome, es el botón con tres líneas horizontales), ir a Desarrollador > Consola Web. Pegar el mismo comando y presionar enter: $('#iframe-registracion').hide(); $('body').removeClass('modal-open'); Listo, con ese simple comando debería haber desaparecido el diálogo que pide registración. Si no fue así, publicá tu experiencia en comentarios e intentaré ayudarte.  

Update: para Clarin el comando a ejecutar en la consola de Javascript es el siguiente:

$('#colorbox').hide(); $('#cboxOverlay').hide();