Es mas que bien sabido que el lenguaje omnipresente sobre el que esta hecha la web es sin duda Javascript, El 99.999% de los sitios, les aseguro que lo usan de alguna forma, frameworks, galerías, menús y un gran etcétera le deben su existirm aunque desde que recuerdo haberlo usado por primera vez al dia de hoy ha tenido pocos cambios sus aplicaciones por otro lado se han multiplicado exponencialmente al punto que hoy día es posible usarlo en el lado servidor y entonces así poder crear una aplicación usando nada mas que javascript.

Es aquí donde entra Nodejs que con sus propias palabras se describe de la siguiente forma

Node.js is a server-side JavaScript environment that uses an asynchronous event-driven model. This allows Node.js to get excellent performance based on the architectures of many Internet applications.

Si me han leido con anterioridad sabran que me gusta probar tecnologias nuevas en “proyectos” que sean de alguna forma de utilidad o al menos un enfoque practico y no solo hacer el “Hello World”.

Jobs Digger 

Siendo así, me propuse hacer algo con Nodejs, el API de Twitter y el API de Google Maps, la idea fue usar minar el stream de twitter en busca de hashtags, localizar los tweets geograficamente y mostrarlos en un mapa de Google Maps  en tiempo real usando Socket.io, ademas de almacenar los tweets, usando mongoDB, para futuras búsquedas internas.

De esa forma nacio Jobs Digger el cual ya esta en linea y pueden ver como funciona recuerden que esto fue hecho usando solamente javascript en el servidor como en el cliente.

El sitio esta hospedado en heroku y la base de datos en MongoHQ ambos usando los planes gratuitos, así que puedes hacer tus experimentos y ponerlos en linea sin que te cueste un centavo.

En futuros posts me gustaria adentrarme mas en estos temas y escribir algo obviamente de Nodejs, Jade que es un sistema de plantillas y Stylus de forma mas concreta.

Ya saben que cualquier comentario es bienvenido.

 

En este ejemplo, ya no muy básico, les mostrare como obtener los últimos tweets de un usuario y mostrarlos en Flex 4 (Gumbo) para ello haremos uso de PHP como gateway, con PHP obtendremos los tweets por medio del API de Twitter y los desplegaremos en forma de XML para poder leerlos en Flex.

Este ejemplo esta hecho con Flash Builder 4 Beta 2 y necesita el FlashPlayer 10 para poder visualizarlo correctamente

Ejemplo

[SWF]http://tmeister.net/flex/gumbo/last-tweet/tweets.swf,600,350[/SWF]

Lo primero que necesitamos es crear el script en PHP para poder conectarnos al API de Twitter, obtener los tweets y desplegarlos en XML.

PHP

[php] <?php
/**
* get_user_tweets()
*
* @param mixed $username
* @param integer $count
* @return array $out
*/
function get_user_tweets($username, $count = 10)
{
/**
* URL para obtener los tweets en formato JSON
* Utilizaremos curl para hacer la conexion al API de Twitter
* */
$url = ‘http://twitter.com/statuses/user_timeline/’.$username.’.json?count=’.$count;
$curl = curl_init();

/**
* Iniciamos CURL pasando que URL vamos a cargar
* */
curl_setopt($curl, CURLOPT_URL, $url);
/**
* Indicamos que querremos el output de regreso
* */
curl_setopt ($curl, CURLOPT_RETURNTRANSFER, 1);
/**
* Ponemos un TimeOut al script
*/
curl_setopt ($curl, CURLOPT_CONNECTTIMEOUT, 10);

/**
* Ejecutamos CURL
*/
$json = curl_exec($curl);

/**
* Cerramos la conexion
*/
curl_close($curl);

/**
* Tomanos el resultado (JSON) y lo parseamos en PHP
*/
$tweets = json_decode($json);
$out;

/**
* Por ultimo por cada tweet tomanos el contenido y lo metemos en un Array
*/
foreach($tweets as $tweet)
{
$out[] = $tweet->text;
}

return $out;
}

/**
* Con la informacion obtenida del API construimos un XML y lo mostramos
*/
$out = ‘<?xml version="1.0" encoding="utf8"?>’;
$out .= "<tweets>";
$tweets = get_user_tweets(‘tmeister’, 10);
foreach($tweets as $tweet)
{
$out .= "<tweet>$tweet</tweet>";
}
$out .= "</tweets>";
header ("content-type: text/xml");
echo $out;
?>

[/php]

El resultado del script lo puedes ver en http://tmeister.net/flex/gumbo/last-tweet/last.php

MXML

Una vez que tenemos el XML solo falta mostrar su contenido en Flex.

[xml] <?xml version="1.0" encoding="utf-8"?>
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo"
width="100%"
height="100%"
creationComplete="{service.send()}"
viewSourceURL="http://tmeister.net/flex/gumbo/last-tweet/srcview/index.html"
>

<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;

[Bindable] private var _tweets:ArrayCollection;

protected function service_resultHandler(event:ResultEvent):void
{

_tweets = new ArrayCollection();

for each( var tweet:String in event.result.tweet )
{
_tweets.addItem(tweet);
}
}

protected function service_faultHandler(event:FaultEvent):void
{
Alert.show(event.fault.faultString, "Error");
}

]]>
</fx:Script>

<fx:Declarations>
<s:HTTPService
id="service"
result="service_resultHandler(event)"
fault="service_faultHandler(event)"
url="http://tmeister.net/flex/gumbo/last-tweet/last.php"
showBusyCursor="true"
resultFormat="e4x"
>
</s:HTTPService>
</fx:Declarations>

<mx:VBox verticalCenter="0" horizontalCenter="0">
<mx:Repeater id="rep" dataProvider="{_tweets}">
<s:Label text="{rep.currentItem}" />
<mx:HRule width="100%" />
</mx:Repeater>
</mx:VBox>

</s:Application>

[/xml]

Con esto ya podemos mostrar los últimos tweets de un timeline sin necesidad de usar librerias ni de PHP o de ActionScript.

 

Sin duda alguna Twitter se ha es un gran fenómeno por donde lo queramos ver, han nacido cientos de servicios alrededor de el,  lo único que creo que le hace falta es un juego; para quitarnos más el tiempo :P , es un juego.

Al estar limitados a 140 caracteres y sobre todo por el modelo de interacción existente, uno a uno, es un poco difícil crear algo.  Sin embargo se me ocurrió tomar la idea de aquel añejo juego de IRC que algunos amaban y otros odiaban, un Trivia Bot.

La  idea es simple, para aquellos que no conocieron un Trivia Bot, se lanza una pregunta y los participantes escriben la respuesta. Así de simple. Un ejemplo seria.

bot-tweet : Cual es el mejor servicio de microbloging?

Y los que quiera jugar tienen que responderle al bot.

user: @bot-tweet twitter

Así de simple.

El desarrollo del juego está en proceso, estoy trabajando en el en mis tiempos libres y puedo decir que ya esta adelantado.

Mi idea es que las preguntas nos sean las comunes, si no hacerlas un poco geeks del tipo.

Cuál es la resolución del iPhone?

¿Quien ha desarrollado jQuery?

Etc etc.

Bueno, para crear una base de datos decente para un juego y que no se esté repitiendo la misma pregunta cada 3 horas, Pido su ayuda:

Ingresar el mayor número de preguntas que crean sean interesantes. Obviamente estoy reuniendo las mías, pero +2 Cabezas piensan mejor que una. XD

Si desean ayudar y escribir sus preguntas pueden hacerlo directamente en http://tweetrivia.com/bot/add_form , obviamente las preguntas y respuesta en español.

El nombre del proyecto es Tweetrivia

 

Les agradezco de antemano y i tienen algún comentario al respecto del proyecto es bienvenido, así que a comentar ;)

Por cierto si me quieren seguir en Twitter mi usuario es @Tmeister

Saludos y nos estamos leyendo..

 

Enlace : Tweetrivia
Agregar Preguntas : http://tweetrivia.com/bot/add_form

Follow me through my day

Send requests or questions about my products, find out on what I'm working and stay tune with my updates or just say hello ;)

Unknown Twitter error.

@Tmeister

active