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.
Aunque este artículo no tiene por qué estar obsoleto, hace mucho tiempo que se publicó y las API de Twitter y Youtube probablemente hayan cambiado. No lo hemos revisado hace tiempo así que no podemos asegurar que siga funcionando. Los enlaces a la descarga del código con los ficheros PHP que se mencionan para el acceso a las API ya no están disponibles.
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.
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.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.
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>
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>
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.
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.
Enrique Fernandez Guerra
Desarrollador web Frontend, especializado en Javascript y TypeScript. Trabaja ac...