Posts Tagged: javascript

Crear un chat basico con pubnub

Share on LinkedInShare on FacebookTweet about this on TwitterShare on Google+

Buen tiempo que deje de publicar articulos por un tema de tiempos pero ya que andaba metido en varios proyectos y en uno de ellos que aun lo llevo en marchar me toco realizar un chat y bueno con el ajax esto deje de ser un drama hace mucho tiempo. Pero si lo intentaste hacer en algun proyecto mediano o grande te habras topado con unos problemas por ejemplo: saturar el servidor con muchas peticiones, limite de conexiones a la base de datos si fuera el caso que estes guardando los chat, etc.

este problema se soluciono definitivamente con node.js que evita el problema de saturar el servidor por peticiones ya que siempre mantienen un puente donde escribe y lee y se mantiene abierto para esta conversacion.

pero podras instalarlo en tu servidor? probablemente no ya que no ocupa una caracteristica tecnica en tu proyecto  y usas una infraestructura LAMP  y es aqui donde PUBNUB viene a ayudarnos y solucionarnos la vida nos enfoca en programar y dejar del lado el lado tecnico del servidor.

se que siempre en mis articulos voy directo al codigo pero era necesario un poco de contexto para que entiendan bien para que viene el PUBNUB al mercado y no se milita a solo hacer chat de hecho puede ser usado para infinidades de cosas.

Entonces a programar!

chat-vista

tenemos esta estructura del chat que es muy similar al de facebook el codigo para esta ventana es (se usa bootstrap y jquery):

<div class="conversacion" style="display: block;">
<div class="ventana-cabecera"><i class="fa fa-circle" aria-hidden="true"></i> Luis Miguel Rodriguez Blas</div>
	<div class="ventana-cuerpo">
 
	   <div class="col-xs-12 el"><span>Broder, vao a pichangear!</span></div>
	   <div class="col-xs-12 yo"><span>sale y vale pero a las 10pm de lo contrario no la hago</span></div>
	   <div class="col-xs-12 el"><span>Broder, vao a pichangear!</span></div>
	   <div class="col-xs-12 yo"><span>sale y vale pero a las 10pm de lo contrario no la hago</span></div>
           <div class="col-xs-12 yo"><span>hola</span></div>
       </div>
       <div class="ventana-escribir">
	<form id="frm-chat">
	   <input type="text" class="form-control" name="" placeholder="Escribe tu mensaje...">
	</form> 
       </div>
</div>

y tenemos un input donde el usuario escribira y es desde donde se desencadenara todo el script pero primero realizamos la conexion del pubnub

/*conexion al servidor del pubnub*/
var pubnub = PUBNUB.init({
        publish_key: 'xxxxxxxxxxxx',
        subscribe_key: 'xxxxxxxxxxxxx'
    });

estos datos de publish_key y subscribe_key te los brindara al registrarse y crear un proyecto dentro de la web de pubnub.com
crear-pubnub

el siguiente paso es crear un canal que servira para la conversacion (puedes crear n cantidad de canales)

/*abrimos el canal*/
pubnub.subscribe({
          channel: 'chat-1',
          message: function(m){escribir_chat(m)} 
    });

ya tenemos el canal abiero de este medio y en message le pasamos una funcion que la llamamos escribir_chat() que lleva una variable donde enviaremos lo que nos pasa el usuario al chatear pero para tener mas claro vemos como procede el script desde el momento del enter en el input del chat.

/*aqui creamos el evento que cuando de ENTER en la input se dispare y llame a la funcion publish */
$("#frm-chat input[type='text']" ).keypress(function(e) {
        mensaje=$( "#frm-chat input[type='text']" ).val();
        if(e.which == 13) {
            publish(mensaje);
            return false;
     }
});

la funcion publish enviamos el dato escrito

/*el fin de la funcion es para decir al pubnub a que canal y que mensaje envia */
function publish(mensaje=null,input) {
        pubnub.publish({
            channel: 'chat-1',
            message: {"text":mensaje}
        });
    }

ahora insertamos al canal los datos enviados para que el usuario del otro lado del chat lo vea.

/*mandamos al canal y ejecutamos una funcion que escribira en el html */
pubnub.subscribe({
          channel: 'chat-1',
          message: function(m){escribir_chat(m)} 
 });

la funcion escribir_chat basicamente creara la linea de conversacion en el html del chat y se vera una fluidez de conversacion

function escribir_chat(m)
    {   
        console.log(m)
 
        if (m.text!="")
        { 
            var html='<div class="col-xs-12 yo">';
            html+='    <span>'+m.text+'</span>';
            html+='</div>';
            $(".ventana-cuerpo").append(html);
            $("#frm-chat input[type='text']").val(''); 
            /*esta linea es para que siempre la ventana div se mantenga en el bottom 0*/
            $(".ventana-cuerpo").scrollTop($(".ventana-cuerpo")[0].scrollHeight);
        }
 
    }

ya con esto tendras el chat funcionando y seguro te preguntas pero si solo creamos 1 venta de la conversacion como hacemos para el otro usuario que estara del otro lado?.
ejecuta su chat en 2 tabs del navegador al mismo tiempo y comienza escribir y veras que lo tienes todo.

realizare otro post mejorando este chat que estamos armando, espero que te ayude o te de mejor idea del pubnub y estoy abierto a sugerencias y mejoras de este chat que como menciono esta en una primera version basica.

Share on LinkedInShare on FacebookTweet about this on TwitterShare on Google+
Read more

Crear un autocompletar en jquery

Screenshot_2
Share on LinkedInShare on FacebookTweet about this on TwitterShare on Google+

En ocasión tenemos mucha data que cargar en un select que nos inclinamos por usar un autocompletar y de hecho podemos encontrar varios pero no siempre se amoldan a nuestras necesidades y modificarlos puede llegar a dar dolor de cabeza.

Para los reacios que no quieren ver las ventajas aquí les dejo unas.

  1. Velocidad para mejorar tu SEO
  2. Facilidad de Búsqueda UX
  3. Diseño más atractivo de UI

A continuación voy hacer un ejemplo paso a paso de cómo se crea uno en jquery y php.

aqui el html con lineas comentadas explicando

 
<!DOCTYPE html> 
<html>
    <head>
        <title>atocompletar</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <!--formulario del autocompletar-->
        <form method="post">
            <!--aqui escribimos el nombre de departamento y activa el autocompletar-->
            <input type="text" name="departamentos" id="departamentos" />
            <!--aqui va el codigo del departamento cuando selecciona-->
            <input type="hidden" name="codigo_departamentos" id="codigo_departamentos" />
        </form> 
        <!--agregamos jquery-->
        <script src="js/jquery.js" type="text/javascript"></script>
        <!--agregamos nuestro script de autocompletar-->
        <script src="js/autocompletar.js" type="text/javascript"></script>
    </body>
</html>

un php que debe mandar un json con la data real pero aqui puse un dato en duro pero en javascript hago que envie un dato en get para que sirva para filtrar una consulta sql que eso seria en casos reales.

solo por demo coloco un json en duro.

$data=array(array("codigo"=>"001","provincia"=>"LIMA"),
            array("codigo"=>"002","provincia"=>"AYACUCHO"),
            array("codigo"=>"003","provincia"=>"JUNIN"),
            array("codigo"=>"004","provincia"=>"PUNO"),
            array("codigo"=>"005","provincia"=>"TRUJILLO"),
            array("codigo"=>"006","provincia"=>"IQUITOS"),
            array("codigo"=>"007","provincia"=>"LORETO")
        );
 
echo json_encode($data);

las siguientes lineas son la base de todo y cada linea tiene explicacion

//cuando tecle en el input se ejecutara
    $("#departamentos").on("keyup",function(){
        //la referencia al input lo metemos en una variable
        var $this=$(this);
        //eliminamos el div si existiera
        $("#autocompletar").remove();  
        //solo si es mayor a 3 envia un ajax
        if ($("#departamentos").val().length >=3)
        {
            //para hacer bonito el efecto agregamos un gif de load en la parte derecha del input 
            //sera un background
            $this.css({"background":"url('chrome-extension://hlngmmdolgbdnnimbmblfhhndibdipaf/images/loader.gif') top right no-repeat"})
           //capturamos el valor de ingreso en el campo
            var departamentos=$this.val();
            //hacemos un ajax en get y enviamos un variable get que es el dato que ingreso en el input
            $.get("data.php",{"departamentos":departamentos},function(data){
                //ahora crearemos un div para mostrar los resultados pero queremos que sea debajo del input 
                //y para eso debemos obtener la posicion del elemento para eso position de jquery
                posicion=$this.position(); 
                //guardamos el top , left y width 
                //
                //el top actual + el alto de la cajita para posicionarlo debajo de la cajita me refiero al input
                //adicionalmente 10 px mas para que no sea tan pegado
                var top=parseInt(posicion.top)+parseInt($this.height())+10; 
                //el left del la cajita
                var left=posicion.left;
                //el ancho de la cajita + 100 px
                var width=parseInt($this.width())+100
                //debemos crear el div pero consultamos si existe para no volver a crearlo
                if (!$("#autocompletar").length)
                {
                    //en caso no exista lo creamos dando las medidas
                    $("body").append("<div id='autocompletar' style='overflow:auto;top:"+top+"px;left:"+left+"px;width:"+width+"px; height:100px;position:absolute; border:1px solid #ebebeb'></div>")
                }
                var html='';
                //ahora creamos el contenido que va dentro del div sera un ul con la respuesta
                html +='<ul id="lista">';
                data=$.parseJSON(data);
                //un recorrido a la respuesta que nos envio el ajax que en este caso se llama data
                $.each(data, function(i, item) {
                        //creamos un li por cada vuelta y con atributos en el li que 
                        //nos serviran para que cuando seleccione guardarlos de alguna forma
                        html +='<li data-codigo="'+item.codigo+'"  data-provincia="'+item.provincia+'"><a href="javascript:;">'+item.provincia+'</a></li>';
                });
                html +='</ul>';
                //cancelamos el efecto del load del gif
                $this.css({"background":""})
                //limpiamos todo lo que pueda tener el div contenedor y agregamos toda nuestra ul que tiene
                //la data obtenida como respuesta del ajax
                $("#autocompletar").empty().append(html)
            });
        }
    })

ahora la funcion que se ejecuta al selecciona un item de la respuesta.

//funcion que se ejecuta cuando hace click en una opcion de la respuesta al escribir
    $(document).on("click","li",function(){
        //aqui tenemos los atributos que creamos en el li
        //jalamos el codigo y el texto del nombre de la provincia
        codigo=$(this).attr("data-codigo");
        provincia=$(this).attr("data-provincia");
        //asignamos los valores
        $("#codigo_departamentos").val(codigo)
        $("#departamentos").val(provincia)
        //y finalmente eliminamos el elementos del autocompletar
        $("#autocompletar").remove();
    })

puede ver en funcionamiento el script

autocompletar jquery demo
y descargarlo aqui
autocompletar jquery

Share on LinkedInShare on FacebookTweet about this on TwitterShare on Google+
Read more

Como Empezar con GruntJs

Share on LinkedInShare on FacebookTweet about this on TwitterShare on Google+

Ya desde un año atrás escuche sobre GruntJs pero realmente no me interese mucho pero comencé a ver muchos artículos y bueno me puse a jugar con GruntJs.

Ahora me siento una mejor persona , mas pro, mas bella, mas productiva , etc.

La idea de este articulo es llevarlos por el buen camino de los Front End PRO y que lo bueno de GruntJs no va a introducir a utilizar muchas cosas nuevas si una vez entras veras que ahí muchas utilidades que nos ayudan a trabajar y aumentar nuestra productividad.

Que es GruntJs?
Basicamente es un automatizador de tareas y si buscas mas información de que es tienes mucha información sobre GruntJs.

Por qué Aprender GruntJs?
Porque que ayudara optimizar tus tiempos, desarrollos, mas ordenados,

Como Instalar GruntJs?
Debemos tener instalado el node.js para tener el manejador de dependencias y modulos de node.js.

Cuando tenga lo tengan instalado para confirmar si todo va bien nos vamos a nuestro CMD de Windows y nos debe mandar esto.

Ahora para la instalación es recomendable que vuelvan abrir el CMD pero como administrador

Ahora no importa en que carpeta estemos posicionados desde el DOS y ejecutamos la siguiente linea

Npm install  -g grunt-cli

Ejecutamos con –g para que sea global y con eso ya tenemos listo para trabajar con GruntJs nos dirigimos a nuestra carpeta donde esta nuestro nuevo proyecto.

Casi listos para comenzar pero necesitamos 2 archivos pero ahora solo necesitamos solo el package.json que sirve para agregar la configuración de las dependencias. Entonces creamos un archivo con el nombre package.json e ingresamos el siguiente contenido.

{
 
  "name": "mi proyecto",
 
  "version": "0.1.0",
 
  "description": "",
 
  "devDependencies": { }
 
}

Descargamos los archivos necesario para trabajar con grunt en nuestra carpeta del proyecto quiero decir que debemos estar posicionados desde el DOS en la carpeta del proyecto y ejecutamos la siguiente línea.

Npm install grunt --save-dev

— save nos permite insertar todas las dependencias instaladas al package.json pues ahora si vemos nuestro archivo package.json se habrá agregado una línea.

{
 
  "name": "mi proyecto",
 
  "version": "0.1.0",
 
  "description": "",
 
  "devDependencies": { 
        "grunt": "^0.4.5",
  }
 
}

Ahora también esto se pudo hacer de otra manera donde primero creamos al crear el package.json y agregamos todas las dependencias como nos lo dejo al instalar. Nos dirigimos a DOS y ejecutamos solo

npm install

Y leería el archivo package.json y verificaría si el paquete existe en el proyecto de lo contrario lo va a descargar.

Si todo nos fue bien se nos debio crear una carpeta “node_modules” y dentro una carpeta grunt. Nos falta el ultimo paso de crear el archivo.

module.exports = function (grunt)
 
{
 
    grunt.registerTask('default',function(){
 
         grunt.log.writeln('GRUNJS CORRIENDO!');
 
    });
 
}

Nos dirigimos al DOS e ingresamos.

grunt

ya tenemos nuestro GrunJs corriendo pero en este artículo solo tenemos corriendo y no estamos haciendo ninguna tarea y eso serán los próximos artículos.

Less con GrunJs grunt-contrib-less
Jade con GrunJs grunt-contrib-jade
Actualizacion automáticos con GrunJs grunt-contrib-watch

Share on LinkedInShare on FacebookTweet about this on TwitterShare on Google+
Read more

Ejemplo de LocalStorage HTML5

Share on LinkedInShare on FacebookTweet about this on TwitterShare on Google+

LocalStorage es una nueva implementacion del HTML5  que nos permite tener variables en javascript que perduran aun asi actualicemos el navegador.  Entonces estamos almacenando datos en el lado del cliente que lo podemos usar cuando queramos aun asi el ordenador se apague esta variable estará ahí por que se guarda en alguna parte del disco duro.

Trabajar con esta característica del html5 no es nada complejo se mas si estas acostumbrado a usar array en javascript te sera muy facil y con esto nos olvidamos las cookies que a comparado de localstorage son tediosos y siempre estan pegadas a la peticiones http   por ende viajan con su peso con la web. Pero su punto en contra que si alguien tiene acceso al browser del cliente podria obtener estas variables de localstorage.

google Chrome nos da un debug para poder estas variables y poder tener control de ellas entonces desde la aplicacion web podemos crear.

Por ejemplo vamos a ponernos en un caso practico que tenemos un slider que va del 100% del ancho de la web en todos los contenidos y en monitores pequeños a primera vista en su navegador solo saldra el slider y tendria que scrolear para ver el contenido. Podemos plantear una solución con localstorage que el slider tenga un boton que diga ocultar y hasta ahi lo pueden hacer hasta sin necesidad del localstorage pero si les digo que quiero que cuando visite otra pagina del sitio web tambien quiero que se respete el estado que le di al slider? osea el slider tendria estado (abierto y cerrado).
Al desarrollo.

el css donde al slider lo colocamos en el top 100% y un boton que estara dentro del slider para hacer el cambio de estado

 
   #slider{
                width: 100%;
                height: 300px;
                position: absolute;
                top:0px;
                left:0px;
                background:red;
                display: block;
            }
            #boton{
                position: absolute;
                top:300px;
                height: 40px;
                width: 40px;
                left:0px;
                background: yellow;
                z-index: 2; 
                cursor:pointer;
            }

el html y agregar la libreria jquery (no es necesario usar jquery para trabajar con localstorage)

&lt; header id="slider" &gt;
            &lt; div id="boton"&gt;subir&lt; /div &gt;
&lt; /header &gt;
&lt; script src="https://code.jquery.com/jquery-git2.min.js"&gt;

entonces esta es la base pero si recargamos la pagina siempre estara por defecto abierto y no esta tomando en cuenta el ultimo estado en que lo dejamos.

$("#boton").on("click",function(){
                 /*si esta en top 0 es que esta abierto el slider y debemos ocultarlo con -300 
                   si no es 0 es que esta en -300 entonces quiere decir que esta oculta para mostrar debemos 
                   darle 0
                 */
                 if ($("#slider").css("top")=="0px")
                 {
                     $("#slider").css({"top":-300}) 
                 }
                 else
                 {
                     $("#slider").css({"top":0}) 
                 }
            })

Aqui aplicamos localstorage localStorage[“estado”] y le damos un estado dependiendo a lo que hace el usuario.

$("#boton").on("click",function(){ 
                 if ($("#slider").css("top")=="0px")
                 {
                     $("#slider").css({"top":-300}) 
                     localStorage["estado"]="cerrado"
                 }
                 else
                 {
                     $("#slider").css({"top":0}) 
                     localStorage["estado"]="abierto"
                 }
            })

y con este codigo ya tenemos este resultado

y vemos que ya nos cargo una variable localstorage y si lo cerramos cambiamos el valor automaticamente.

pero hasta ahora solo seteamos el valor del localstorage aun no lo estamos usando entonces agregamos las siguientes lineas de codigo.

$(document).ready(function(){
                /*si el valor no es undefined significa que la variable ya fue seteada con un valor*/ 
                if (localStorage["estado"]!=undefined)
                {
                    /*condicionamos el valor del estado para dar uns instruccion si cerrar o abrir*/
                    switch(localStorage["estado"])
                    {
                        case 'cerrado':
                            $("#slider").css({"top":-300}) 
                            break;
                        case 'abierto':
                            $("#slider").css({"top":0}) 
                            break;    
 
                    }
                }
 
            })

pues con esto ya tenemos funcional nuestro script igual les dejo el script aqui corriendo.
demo en linea
archivos fuentes

Share on LinkedInShare on FacebookTweet about this on TwitterShare on Google+
Read more

AJAX Cross-Domain: JSONP con PHP

Share on LinkedInShare on FacebookTweet about this on TwitterShare on Google+

En ciertos proyectos es necesario poder obtener datos de otro servidor por AJAX pero el inconveniente de siempre que los navegadores por seguridad no lo permiten solo permiten los que estén en el mismo servidor. JSONP  también conocido como JSON con Padding es una tecnica que permite obtener datos de servidores externos.

En que consiste esta técnica?
el json convertirlo en una funcion
como ya saben siempre soy mas practico que teorico.

/*aqui temenos un json no tiene nada de ciencia*/
({"respuesta":"Validacion Correcta","validacion":"ok"})

con la tecnica JSONP

/*aqui temenos un json no tiene nada de ciencia*/
CualQuierNombre({"respuesta":"Validacion Correcta","validacion":"ok"})

Listo!

Jquery ya nos da una funcion que simplifica las llamadas a ajax que nos devuelve un JSON

Bueno les pongo un ejemplo practico, tenemos en el dominio1.com un login y en dominio2.com tenemos la base de datos entonces desde el dominio2.com vamos a enviar un la data.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script><script type="text/javascript" src="script.js"></script>
<!--formulario de donde obtenemos los datos-->
<form>< input id="username" type="text" /> < input id="pass" type="text" /> < input id="enviar" type="button" value="inicia sesion" /></form>

script.js

$(document).ready(function(e) { 
 /*capturamos los datos al cliekar el boton enviar*/
 $("#enviar").on("click",function(){
	 /*declaramos las variables del fromulario y la url que llamaremos*/
	 var username=$("#username").val();
	 var pass=$("#pass").val();
	 var url = "http://luisrodriguez.pe/demos/scripts/jsonp/login.php?jsoncallback=?"; 
	 //hacermos el llamado a la url externa y enviamos 2 ger usuario y password que luego en el php login los 
         //capturamos para hacer la comprobacion si los datos enviados existen en la base de datos, pero en este
         // ejemplo solo estaran en duro
	 $.getJSON(url,{usuario:username ,password:pass}).done(function(data) { 
     console.log(data.respuesta + ' '+ data.validacion);
  }).fail(function( jqxhr, textStatus, error ) {
  var err = textStatus + ', ' + error;
  console.log( "Request Failed: " + err);
});	 
 
 })
 
})

login.php

//capturamos los datos enviamos
$user=addslashes(trim($_GET["usuario"]));
$pass=addslashes(trim($_GET["password"]));
//comprobamos los datos enviados son los sigueintes esta en duro
//pero claro que podrian hacerlo con base de datos
if ($user=="root" and $pass=="pass")
{
//si todo es correcto
//puedes cargar sessiones para manejar el tema de seguridad
$resultados["respuesta"] = "Validacion Correcta";
$resultados["validacion"] = "ok";
}
else
{
//si esta errado 
$resultados["respuesta"] = "Usuario y password incorrectos";
$resultados["validacion"] = "error";
}
//aqui va el truco debes mostrar el valor de la variable que envias desde el getJSON jsoncallback
echo $_GET['jsoncallback'] . "(" . json_encode($resultados)." ) ";

entonces ya esta listo!!

PERO!!!!
si no tuviéramos acceso al archivo json para modificarlo directamente?, bueno tambien ahi solucion para llamar un json de un servidor que no tenemos accesos y tambien es facil la solucion.

/*jalamos el contenido del archivo externo*/
 $file = file_get_contents ("http://dominio.com/archivo.json", "r");
 echo $_GET['jsoncallback']." (".utf8_decode($file).")";

por ahora lo que hace el script es mostrarte en console una mensaje si los datos estan correctos o no  pero puedes redireccionar la pagina de entorno privado o mandar un error en la pantalla . como indique arriba puedes cargar sesiones y hacer las validaciones en la área privada.

el ejemplo a descargar esta solo para que lo coloques en un servidor web y correrlo ya que el login.php lo tengo en mi servidor.
like para descarga 🙂
[to_like id=”239″] Descarga
[/to_like]

Share on LinkedInShare on FacebookTweet about this on TwitterShare on Google+
Read more