> Manuales > Taller de Javascript

Descripción y procedimiento para realizar una aplicación web que sirve para consultar comentarios de Youtube y tuits de Twitter de manera asíncrona.

 
En este artículo vamos a mostrar mediante HTML5, algo de PHP, CSS3 y jQuery (Javascript) cómo, una vez hemos recogido datos de búsqueda de Twitter y también datos de un vídeo en Youtube, podemos mostrarlos de una forma cómoda al lector y refrescando la página cada cierto tiempo para poder actualizar el contenido de los mensajes constantemente.

Está pensado principalmente para seguir los comentarios de un directo por Youtube que use un hashtag de Twitter para hacer preguntas y comentarios. Algo como lo que hacemos en DesarrolloWeb.com con el programa de #jQueryIO.  

 

Aspectos a tener en cuenta antes de empezar

Hemos de advertir que en este artículo no vamos a explicar como funcionan las API de Twitter y Youtube. En el ejemplo descargable sí tendremos acceso a unos archivos .php que realizan esa acción. Mirad los artículos mencionados previamente para encontrar la información sobre esos asuntos.

Por otro lado, creo conveniente aclarar que en el ejemplo que vamos a desarrollar, pasaremos el código del video y el hashtag como parámetros en nuestra URL, pero se podría modificar para que el usuario entre los datos mediante un formulario labs.disgram.com/proyectos/comentarios

Nota: Para poder comprender bien este artículo es interesante que el lector tenga conocimientos básicos de los lenguajes que vamos a utilizar como ya he mencionado anteriormente, por otro lado es imprescindible haber leído y comprendido los dos artículos que se citan al inicio.
 

Preparando el archivo principal

La idea de esta pequeña aplicación es obtener una lectura clara y en directo, tanto de los comentarios de un vídeo de Youtube, como de un hashtag de Twitter, con lo cual procedemos a dividir la pantalla en dos partes, para poder ver claramente los comentarios de cada cosa.

Ahora podemos comenzar viendo el código de los archivos index.php y estilos.css del ejemplo descargable.

HTML (index.php)

<body>
<section>
<article id="youtube" ></article>
<article id="twitter" >   </article>
</section>
</body>
CSS (estilos.css)
section{
   width: 100%;
   height: 100%;
}
article{
   width: 50%;
   height: auto;
   float: left;
}

Para comenzar nuestra programación, recogeré mediante PHP los parámetros que hemos pasado por GET y los guardaré en variables globales de Javascript.

Nota: Este primer proceso se puede hacer directamente por Javascript o mediante un formulario, pero es un paso previo y sencillo que cada uno en su aplicación podrá hacer de mil maneras diferentes.

HTML + PHP + Javascript (index.php)

<head>
   <script type="text/javascript">
      var id_youtube = "<?=$_GET['y']?>";
      var id_twitter = "<?=$_GET['t']?>";
   </script>
</head>

Nuestro código en el archivo index.php debería ser el siguiente en este momento:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>Comentarios</title>
<script type="text/javascript">
      var id_youtube = "<?=$_GET['y']?>";
      var id_twitter = "<?=$_GET['t']?>";
   </script>
   <script src="http://code.jquery.com/jquery-latest.min.js"></script>
   <script src="js/funciones.js"></script>
   <link href="estilos.css" rel="stylesheet" type="text/css" />
</head>
<body>
   <section>
      <article id="youtube" >
      </article>
      <article id="twitter" >
      </article>
   </section>
</body>
</html>

Nota: En este ejemplo entenderemos por ID de youtube el código de un enlace como este http://www.youtube.com/watch?v=GQtFthY5quY sería GQtFthY5quY y por hashtag, por ejemplo #jQueryIO sería jQueryIO, ya que más adelante añadiremos el "#" nosotros como "%23", que es su equivalente.
 

Creando la función principal de jQuery

Seguidamente, ahora que ya tenemos el archivo index.php completo, en el cual hemos enlazado un archivo funciones.js

<head>
<script src="js/funciones.js"></script>
</head>

Lo que haremos es empezar a escribir en este archivo javascript con la función principal.

Cuando el documento este preparado, llamaremos dos veces a la función CargaTiempo(tipo,div,url);

función en donde iremos escribiendo los diferentes comentarios en la capa deseada.

$(document).ready(function(){
   CargaTiempo("youtube","#youtube","extrae_youtube.php?video="+video);
   CargaTiempo("tweet","#twitter","extrae_twitter.php?hash="+hash);
});

Por otro lado, vamos a preparar dos arrays en donde iremos guardando los diferentes comentarios que recibimos. De esta manera miraremos si ya los habíamos cargado antes, y en caso de no haberlos cargado antes, los mostramos.

var msj_twt = [];
var msj_ytb = [];
 

Cargando dinámicamente los nuevos resultados y evitando escribir los repetidos

En esta parte vamos a tener dos funciones Javascript, donde utilizaremos también jQuery. Éstas son la mencionada CargaTiempo(tipo,div,url); y la función TrabajaArray(info_ar,msj,div). La primera llama internamente a la segunda para realizar el proceso completo. CargaTiempo() ya hemos explicado qué debe hacer y TrabajaArray() recibirá un array con comentarios y se encargará de hacer el trabajo interno de gestionar los arrays.

CargaTiempo(tipo,div,url)

A esta función le pasamos un tipo (Youtube o Tweet) un "div" donde escribiremos los comentarios (#youtube o #twitter) y una URL para acceder a los comentarios (nuestros archivos PHP).

Utilizando la función "get" de jQuery llamaremos al archivo que extrae los comentarios mediante PHP, ya sean los de Twitter o los de Youtube. Lo que recibiremos en ambos casos es una cadena con todos los comentarios encontrados, estructurados de la siguiente manera:

$#<div><h3>autor</h3><span>comentario</span><br><br></div>

Nota: fíjate en el archivo con el ejemplo para descarga, en el ZIP que adjuntamos en el artículo, donde podrás ver cómo se estructuran los comentarios que se encuentran al consultar los API de Twitter o Youtube.

De manera que nosotros tendremos algo así:

$#<div><h3>autor</h3><span>comentario</span><br><br></div>$#<div><h3>autor</h3><span>comentario</span><br><br></div>$#<div><h3>autor</h3><span>comentario</span><br><br></div>$#<div><h3>autor</h3><span>comentario</span><br><br></div>$#<div><h3>autor</h3><span>comentario</span><br><br></div>$#<div><h3>autor</h3><span>comentario</span><br><br></div>

Si nos fijamos, podemos ver que cada comentario esta separado por $#, símbolos que he escogido yo (podría usarse cualquier otro separador). Aprovechando este separador, haremos un Split(); en Javascript para obtener un array. Recuerda que la función de array split() recibe una cadena y un separador y te crea un array de esas cadenas que se acotan entre separador y separador. En mi ejemplo:

var info_array = info.split("$#");

Con lo cual ahora tenemos algo así:

Info_array[0] = " "
Info_array[1] = "<div><h3>autor1</h3><span>comentario1</span><br><br></div>"
Info_array[2] = "<div><h3>autor2</h3><span>comentario2</span><br><br></div>"
Info_array[3] = "<div><h3>autor3</h3><span>comentario3</span><br><br></div>"
Info_array[4] = "<div><h3>autor4</h3><span>comentario4</span><br><br></div>"
etc...

Ahora lo que haremos es llamar a la función TrabajaArray(info_ar,msj,div); según sea de Twitter o Youtube.

if(tipo == "tweet") { msj_twt = TrabajaArray(info_array,msj_twt,div); }
if(tipo == "youtube") { msj_ytb = TrabajaArray(info_array,msj_ytb,div); }

Finalmente, volveremos a llamar a esta función de manera recursiva, cada 'x' tiempo.

Nota: Una función recursiva es aquella que se llama a sí misma.

setTimeout("CargaTiempo('"+tipo+"','"+div+"','"+url+"')",500);

Si lo hemos hecho todo bien, deberíamos tener una función parecida a esta:

//funcion que recarga la informacion cada x tiempo
function CargaTiempo(tipo,div,url){
   //recojo todo lo del array
   $.get(url, function(info){
      //convierto la cadena en array
      var info_array = info.split("$#");
      //si el mensaje no se encuentra en el array de mensajes
      if(tipo == "tweet") { msj_twt = TrabajaArray(info_array,msj_twt,div); }
      if(tipo == "youtube") { msj_ytb = TrabajaArray(info_array,msj_ytb,div); }
   });
   setTimeout("CargaTiempo('"+tipo+"','"+div+"','"+url+"')",5);
}

TrabajaArray(info_ar,msj,div)

A esta función le pasamos el array de comentarios que obtenemos en la función anterior, el array global donde ponemos todos los comentarios (msj_twt o msj_ytb) y el DIV donde escribiremos (en este caso simplemente la variable 'div', ya que en la función anterior ya hemos pasado el ID del DIV)

Hacemos un bucle que recorra todo el array desde el último comentario hasta el primero, de manera que el último de todos los comentarios saldrá arriba el primero (si queremos hacer el efecto contrario, hacemos el bucle al revés).

for (x=info_ar.length;x>=0;x--){
}

Dentro de este for irá un "if" que mirará si el parámetro que le pasamos del array (recordad que estamos en un "for" donde en el interior trabajaremos solo con uno de los parámetros del array, de manera que al salir del "for" habremos trabajado con todos). Este "if" tendrá la función inArray de jQuery, que mirará si lo que le hemos pasado ya está en el array global, ya que si ya está no lo queremos mostrar.

if($.inArray(info_ar[x],msj) < 0){
}

Si entro al "if" hago un push (añadir al array) en la variable msj, que es la que retornaremos al final de la función mediante "return msj"; de este modo, añadimos este nuevo comentario al array global.

Ahora solo falta añadir el comentario al div

var texto = $(div).html();
if(info_ar[x] != undefined) $(div).html(info_ar[x]+texto);

Deberías tener una función parecida a esta:

//funcion que pone la informacion en una array
function TrabajaArray(info_ar,msj,div){
   for (x=info_ar.length;x>=0;x--){
      if($.inArray(info_ar[x],msj) < 0){
         //lo pongo en el array principal
         msj.push(info_ar[x]);
         //cargo el texto en el div
         var texto = $(div).html();
         if(info_ar[x] != undefined) $(div).html(info_ar[x]+texto);
      }
   }
   return msj;
}

Os dejo aquí todo el ejemplo descargable y recomiendo que lo miréis a fondo mientras leéis el artículo, ya que estamos haciendo varias cosas importantes a la vez.

Descargar archivo enlace al archivo de ejemplo subido

Enrique Fernandez Guerra

Desarrollador web Frontend, especializado en Javascript y TypeScript. Trabaja ac...

Manual