Crear aplicaciones en tiempo real (Nivel Intermedio)

office-hours_1x

office-hours_1xHace bastante que no pasaba por aca, y me decidi en publicar algo que le sirva a la gente, quiero dejar mi granito de arena, para que otros también lo hagan, permitiendo que entre todos podamos enseñar y aprender. De esta manera a la hora de investigar o programar, nos resulte más sencillo hacerlo.

Hoy voy a escribir sobre un framework javascript llamado “ember.js”, este nos permite crear aplicaciones en tiempo real, sin necesidad de contratar un webhosting costoso, y hasta lo más increible es que lo podes utilizar en tu pc, sin tener que instalar ningun programa. Con solo un navegador web, y un editor de texto ya lo podes hacer… ¿Excelente, no?

Las ventajas de utilizar este framework, es que corre bastante rápido al ser escrito en javascript, ya que corre del lado del frontend, esto quiere decir se ejecuta en el mismo navegador quien interpreta javascript, como vos a hablar en tu idioma.

En este tutorial mencionaré algunas bibliotecas que podran utilizar en conjunto con esta tecnología web, facilitando el crear una aplicación mucho mas completa.

Como última cosa antes de que empezemos, a mi me costó mucho aprender a utilizarla, ya que los tutoriales que uno encuentra aveces no estan del todo completos, o quizas no explican en detalle ciertas cosas que son fundamentales para entender que estamos haciendo, y que queremos lograr. Quiero destacar que esto es normal, ya que es una tecnología relativamente nueva, y existe documentación oficial, pero no siempre basta con sólo eso a la hora de llevarlo a la practica, no..?

Documentación oficial de ember.js:
http://emberjs.com/guides/

Bibliotecas recomendadas para trabajar con Ember.js
bootstrap.css
Permite desarrollar una aplicación de manera rápida
Crear un estilo rápido a la aplicación sólo con clases
moment.js
Permite formatear una fecha
Convierte una fecha poco legible, a una más entendible
handlebars.js
Permite manejar la aplicación con un sistema de templates
emberdata.js
Permite almacenar y manejar el contenido de la aplicación
parsley.js
Permite validar los campos de un formulario

Nosotros vamos a utilizar por ahora solamente:
jquery.js, handlebars.js, ember.js, ember-data.js
Nota: Recomiendo agregarlas en ese orden, para evitar errores en el navegador

1. Como crear un Store
2. Como crear un Model
3. Como agregar datos a un Model
4. Como imprimir contenido en el template como atributo sin que diga <script>
5. Capturar el primer objeto sin usar forEach
6. Utilizar variables de la View en un Template
7. Utilizar funciones de la View en un template y retornen un valor con property
8. Utilizar propiedades computadas de un Object en un Template
9. Utilizar observes en una View
10. Separar contenido en varias Views y Templates
11. Bindear clases en un template

1. Como crear un Store

// En este se guardaran los datos
// Es como si fuera la Base de Datos, donde se guardan los registros
// Guarda lo cargado en los Model
App.Store = DS.Store.extend({
revision: 12, // este puede cambiar segun la version del ember-data
});

2. Como crear un Model

// En el modelo definis el tipo de las variables a utilizar
// Es como si definieras los campos de una base de datos
App.ClientModel = DS.Model.extend({
name: DS.attr(‘string’),
age: DS.attr(‘number’)
});

4. Como imprimir contenido en el template como atributo sin que diga <script>

# En caso de ser un each
<a href=”{{unbound this.link}}”>this.titulo</a>

5. Capturar el primer objeto sin usar forEach

var productos= this.get(‘productos.firstObject’);
var productoNuevo= App.get(‘productosConsultaController.content.firstObject’);
Nota: Se suele utilizar para accceder a contenido que está dentro de un Object, evitando utilizar un forEach

6. Utilizar variables de la View en un Template

// En el achivo de la view
App.productoConsultaView = Em.View.extend({
templateName: ‘productoConsulta’,
importadoArtesanal: false, // defino la variable como false

didInsertElement: function(){
object = App.get(‘productoConsultaController.content.firstObject’);

if(object.importado|| object.artesana)
this.set(‘importadoArtesanal’, true); // seteo la variable

}
});
// En el archivo del template
{{#if view.importadoArtesanal}}
Los elementos existen
{{/if}}

7. Utilizar funciones de la View en un template y retornen un valor con property

// En el caso de no hacerlo asi, hay que definir una variable al inicio de la view, y luego en el didInsertElement setearlo. (Me parece mas organizado hacerlo de esta manera, aunque la otra también es viable)

// En el View
puedeVerProducto: function(){
return (App.get(‘clienteController.content.permisos’) != ” || App.get(‘clienteController.content.parte’).length > 0);
}.property(‘App.clienteController’),

// En el template
{{# if view.puedeVerProducto}}
Un parte aqui
{{else}}
No puedes visualizar el producto
{{/if}}

8. Utilizar propiedades computadas de un Object en un Template

// En el archivo del Modelo
App.Cliente = Em.Object.extend({
id: null,
nombre: ”,
apellido: ”,
observaciones: ”,

observacionesLabel: function () {
return this.get(‘observaciones’).replace(/n/g, “<br/>”;
}.property(‘observaciones’),
});

// En el archivo del Controller
var clientes = [];
// Creo un object del tipo ember
this.get(‘content’).forEach(function (cliente) {
clientes .addObject(App.Cliente.create(cliente));
});
this.set(‘content’, clientes );

// En el archivo de la ClienteView
App.ClienteView = Em.View.extend({
tagName: ‘div’,
templateName: ‘cliente’,
});

App.ClientesView = Ember.CollectionView.extend({
classNames : [],
tagName: ‘tbody’,
itemViewClass: App.ClienteView,
});

// En el archivo del template
{{view App.ClientesView contentBinding=”App.clienteConsultaController.content”}}

// En el template Invitados de la View InvitadosView
<li>{{view.content.observacionesLabel}}</li>

9. Utilizar observes en una View
1) Agrego al final de la function como parametros los valores que se van a observar. (En este caso observamos cuando los campos del content cambian) (Se puede agregar varios campos a observar, mientras mas campos mas recursividad)
2) Dentro del function se llama a los campos que queremos
3) Podemos obtener o setear los valores de los campos
4) Podemos modificar otros campos en base a los campos observados con condicionales
Nota: Estos campos se definen en el modelo a la hora de crear los objectos de ember
Ejemplo:

App.actualizarClienteView = Ember.View.extend({
templateName: ‘cliente-actualizar’,
tipoDeCliente: function(){
if(this.get(‘content.productos’).length > 15) // Obtengo el valor siempre que cambie
{
this.set(‘content.clientePremium’, true);
}
else
{
this.set(‘content.clientePremium’, false);
}

}.observes(‘content.productos’) // Agrego los campos que quiero observar
});

10. Utilizar observes en un campo con array de objects

// En la View
App.ProductosView = Ember.View.extend({
productos: [],
didInsertElement: function () {
this.set(‘productos’, []);
},
checkProductos: function(){
if(this.get(‘productos’).length > 0)
{
this.set(‘faltanAgregarProductos’, false);
}
else
{
this.set(‘faltanAgregarProductos’, true);
}
}.observes(‘productos.@each‘),
});

Nota: Sino se coloca .@each en un campo contenga un array de objects, el observers no podrá observar los cambios del campo (cuando se agrega o borra elementos del mismo)

10. Separar contenido en varias Views y Templates
1) Chequeo con un condicional si tiene contenido
2) Hago un each por cada objeto, que tendra la view asignada, y el template que la view tenga asignado
3) A la vista le paso el atributo contentBinding con el contenido del each, y luego reutilizarlo en el otro template

// 1° View
App.clienteConsultaView = Em.View.extend({
templateName: ‘clienteConsulta’,
});
// 1° template
<script type=”text/x-handlebars” data-template-name=”clienteConsulta”>
{{# if App.clienteConsultaController.content}}
{{#each App.clienteConsultaController.content}}
{{view App.clienteProductosView contentBinding=”this”}}
{{/each}}
{{/if}}
</script>
// 2° View
App.clienteProductosView = Em.View.extend({
templateName: ‘cliente-productos’,
});
// 2° Template
<script type=”text/x-handlebars” data-template-name=”cliente-productos”>
{{#each this.productos}}
{{view App.productosDeOrigenView contentBinding=”this”}}
{{/each}}
</script>// 3° View
App.productosDeOrigenView = Em.View.extend({
templateName: ‘productos-de-origen’,
falsificado: false,
didInsertElement: function(){
if(this.get(‘content’).falsificado == 1)
this.set(‘falsificado’, true);
}
});
// 3° Template
<script type=”text/x-handlebars” data-template-name=”productos-de-origen”>
{{#if view.falsificado}}
<b> {{ this.cliente.producto}} </b>
{{else}}
<i> {{ this.cliente.producto}} </i>
{{/if}}
</script>

11. Bindear clases en un template
En el archivo de la View

App.ProductosView = Ember.View.extend({
producto: null,
productoFaltaSeleccionar: false,

guardar: function (){
if(this.get(‘producto’) == null)
{
this.set(‘productoFaltaSeleccionar’, true);
}
else
{
this.set(‘productoFaltaSeleccionar’, false);
}

}
});

En el archivo del template
<div {{bindAttr}} >
<span>Titulo</span>
</div>

Nota 1: Campo > (if) si se cumple uso esta clase > (else) sino se cumple uso esta clase
Nota 2: Si el valor del campo pasado es ‘true’ usa la primera clase, sino utiliza la tercera

Todo el contenido lo redacte yo, desde hace ya bastante tiempo. La idea es compartir mi conocimiento con los demás.
Pido que si lo colocan lo mismo en otro sitio, den la fuente de donde lo sacaron, osea mi post xD.

Autor: @neverkas

Comments: no replies

Join in: leave your comment