Como usar la API de Twiter (parte 1)

Si tienes una cuenta de twiter y quieres realizarte una aplicación personalizada que utilice toda la información que hay en twiter (número de seguidores, amigos, tweets, etc), la gente de Twiter nos facilita una serie de llamadas rest que podemos utilizar para interactuar con ellos. Más información aquí.

En primer lugar decir que a día de hoy la versión de la API de twitter es la 1.1 (la 1.0 ya está deprecada). Esta versión 1.1 requiere usar autentificación OAUTH, de otra forma no podremos poner a funcionar la aplicación.

Por lo tanto para poder utilizar la api se deben seguir estos pasos:
1/ Crear una cuenta de desarrollador: esto se hace en https://dev.twitter.com/

2/ Una vez creada la cuenta de desarrollador ya podrás crear una nueva aplicación en la zona de «Mis Aplicaciones«.

3/ Tras crear la aplicación lo siguiente es crear los Tokens de acceso. (API keys y Access Tokens)

4/ Llegados a este punto ya podriamos utilizar la api. Existen ya un gran número de librerias que nos facilitaran el uso del api twiter para no tener que implementarlo de cero. Además, hay librerías para casi cualquier lenguaje posible. (Ver aquí)

XDK intel

Gracias a XDK intel podemos desarrollar aplicaciones en HTML 5 para luego generar aplicaciones para distintas plataformas:
Aplicaciones móviles: iOS, Android (nativo, Cordova, Crosswalk), Windows 8 Store, Windows Phone 8, Tizen, y Nook.
Aplicaciones web: Web, Chrome App, Fracebook App.

El XDK permite emular apps en dispositivos virtuales en distintos dispositivos (iPhone, Microsoft Surface, Google Nexus, …). Además, ofrece la capacidad de que los desarrolladores puedan almacenar su código en la nube de manera gratuita.

Video donde se puede ver la configuración de XDK y Demo de aplicativo


Making Native Mobile Apps with HTML5 Using the appMobi XDK


Write once and deploy to multiple platforms with HTML5 and Intel® XDK

Obtener los parametros de las urls con javascript

Ejemplo 1:

function getURLvar(var_name){
  var re = new RegExp(var_name + "(?:=([^&]*))?", "i");
  var pm = re.exec(decodeURIComponent(location.search));
  if(pm === null) return undefined;
  return pm[1] || "";
}

//Ejemplo de uso:
//Suponiendo que la URL es http://www.unsitio.com/pagina.html?s=5
alert(getURLvar('s')); //Muestra 5

* La función devolverá undefined si no existe la variable, y cadena vacía en caso de que exista pero no contenga ningún valor

Ejemplo 2:

(function (){
  window.$GET = [];
  if(locaction.search){
    var params = decodeURIComponent(location.search)
                              .match(/[a-z_]\w*(?:=[^&]*)?/gi);
    if(params){
      var pm, i = 0;
      for(; i < params.length; i++){
        pm = params[i].split('=');
        $GET[pm[0]] = pm[1] || '';
      }
    }
  }
})();

//Ejemplo de uso:
//Suponiendo que la URL es http://www.unsitio.com/pagina.html?s=5
alert( $GET['s'] );  //Muestra 5

Fuente

Consumir un Web Service con Ajax

Cómo ejemplo utilizaré un servicio soap que tengo creado con NUSOAP. http://genparte.disastercode.com.es/ws/servicioWsdl.php?wsdl

Se hace una petición al método getCalendarFestive del ws. A este método se le debe pasar un parámetro de entrada strName.

Tras hacer la petición, si todo va bien se ejecutará el evento success donde rellenamos un array con la información obtenida.

var soapMessage =
	'< soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">'+
		'< soap:Body>'+
			'< getCalendarFestive xmlns="http://genparte.disastercode.com.es">'+
				'< strName>.....< /strName>'+
			'< /getCalendarFestive>'+
		'< /soap:Body>'+
	'< /soap:Envelope>';

$.ajax({
	url: 'http://genparte.disastercode.com.es/ws/servicioWsdl.php?wsdl', 
	type: "POST",
	dataType: "xml", 
	contentType: "text/xml",
	data: soapMessage, 
	success: function(data, status, req, xml, xmlHttpRequest, responseXML) {
		$(req.responseXML).find('return').each(function(){
		
			if( $(this).find('type')){
				var total = $(this).find("type").length;
				var days = new Array();
				for(i= 0; i < total; i++)  {
					var strType = $(this).find("type")[i].childNodes[0].nodeValue;
					var strDate = $(this).find("date")[i].childNodes[0].nodeValue;
					days[i] = strDate;
				}
			}
		});
	}, 
	error: function processError(data, status, req) {
		console.log(data);
		console.log(status);
		console.log(req);
	}
});

Generador de partes de trabajo

Aplicación web que te genera los partes de horas mensuales en formato *.xls

DEMO: http://genparte.disastercode.com.es

GitHub: https://github.com/roberto-pf/GenParte

Tecnologías empleadas:
– Plugin Fullcalendar de Jquery para implementar el calendario.http://arshaw.com/fullcalendar/

– Nusoap, como servidor web para los días festivos.http://sourceforge.net/projects/nusoap/

– PHPExcel, como librería para generar la hoja de excel.http://phpexcel.codeplex.com/

– Diseño formularios:
Formly -> http://thrivingkings.com/read/Formly-The-form-glamorizer-for-jQuery
NiceForms -> http://www.emblematiq.com/lab/niceforms/

Async.js

Async es un módulo que proporciona funciones de gran alcance para trabajar con JavaScript asíncrono. Aunque originalmente fue diseñado solamente para su uso con Node.js, también puede ser utilizado directamente en el navegador.

Async proporciona alrededor de 20 funciones que incluyen los sospechosos habituales (map, reduce, filter, each…), así como algunos patrones comunes de control de flujo asíncrono (parallel, series, waterfall…).

Todas estas funciones se supone que siguen la convención Node.js de proporcionar una devolución de llamada como el último argumento de la función asíncrona.

GitHub Async

Encapsulación en JS sin usar «this»

Este sería un ejemplo donde se crea una clase en js sin necesidad de usar el objeto this ni prototype.

function ejemplo(){
	var obj = {};	//Variables y métodos públicos
	
	var n = 1;	//variables privadas

	function prueba(){}	//funcion privada

	obj.bar = function(){}	//método público

	return obj;
}

Javascript para micro-controladores

Tessel: también conocido como Technical.io, es un proyecto de Hardware Open-Source que consiste en un micro-controlador, del estilo a Arduino, pero programable con JavaScript, demostrando una vez más la versatilidad de este lenguaje de programación ya presente en todas las partes del desarrollo web.

Tessel corre directamente Javascript sin la necesidad de un servidor, así que podremos usar nuestras propias librerías o librerías externas como (node.js) para nuestros proyectos, justo como si estuviésemos desarrollando una Web, también promete actualizaciones de firmware tan sencillo como “tessel push“.

Además de la placa y la MicroSD, se han desarrollado diferentes módulos para añadirle más funcionalidad como son el acelerómetro, un chip RFID, audio, bluetooth, un servo-motor, relés, y sensores de temperatura y humedad. Se programa directamente desde un USB.
Ver en: http://tessel.io/

Espruino: Se trata de un clon de Arduino que puede programarse con JavaScript. Las aplicaciones no necesitan ser compiladas y se pueden ejecutar, haciendo cambios sobre la marcha.
Ver en: http://www.espruino.com/

Más Info

Sencha Touch

Se trata de un framework para HTML5 que está pensado para desarrollar aplicaciones web para dispositivos móviles. Además, consigue efectos que aparentan ser los nativos tanto de dispositivos iOS como Android.

Sencha Touch nos permite aprovechar la potencia y flexibilidad de HTML5, CSS3 y JavaScript. Para ello hace uso de los nuevos elementos disponibles en la nueva especificación del estándar para utilizar video, audio, guardar datos offline. También consta de una librería con múltiples widgets de usuario y control para los eventos táctiles de los dispositivos. Además de los métodos estándares de eventos como touchstart y touchend, el framework añade una extensa lista de eventos útiles como tap, double tap o rotate entre muchos otros.

Enlaces de interes:
Sencha Touch
Documentación
Ejemplos
Tutoriales
Integración de Sencha Touch con PhoneGap

Lector RSS realizado con AJAX

Función javascript que realiza petición ajax a una página php que será la que recupere el contenido del RSS:

function showRSS(str){
   if (str.length==0) {
      document.getElementById("rssOutput").innerHTML="";
      return;
  }
  if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
  } else {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

  xmlhttp.onreadystatechange=function() {
      if (xmlhttp.readyState==4 && xmlhttp.status==200) {
         document.getElementById("rssOutput").innerHTML=xmlhttp.responseText;
      }
  }
  xmlhttp.open("GET","getrss.php?q="+str,true);
  xmlhttp.send();
}

Contenido de la página php,

//get the q parameter from URL
$q=$_GET["q"];

//find out which feed was selected
if($q=="Google"){
  $xml=("http://news.google.com/news?ned=us&topic=h&output=rss");
} elseif($q=="MSNBC") {
  $xml=("http://rss.msnbc.msn.com/id/3032091/device/rss/rss.xml");
}

$xmlDoc = new DOMDocument();
$xmlDoc->load($xml);

$channel=$xmlDoc->getElementsByTagName('channel')->item(0);
$channel_title = $channel->getElementsByTagName('title')
->item(0)->childNodes->item(0)->nodeValue;
$channel_link = $channel->getElementsByTagName('link')
->item(0)->childNodes->item(0)->nodeValue;
$channel_desc = $channel->getElementsByTagName('description')
->item(0)->childNodes->item(0)->nodeValue;

echo("< p>< a href='" . $channel_link
  . "'>" . $channel_title . " < /a>");
echo($channel_desc . "< /p>");

$x=$xmlDoc->getElementsByTagName('item');
for ($i=0; $i<=2; $i++) {
  $item_title=$x->item($i)->getElementsByTagName('title')
  ->item(0)->childNodes->item(0)->nodeValue;
  $item_link=$x->item($i)->getElementsByTagName('link')
  ->item(0)->childNodes->item(0)->nodeValue;
  $item_desc=$x->item($i)->getElementsByTagName('description')
  ->item(0)->childNodes->item(0)->nodeValue;

  echo ("< p>< a href='" . $item_link
  . "'>" . $item_title . "< /a>");
  echo ($item_desc . "< /p>");
}

FUENTE con el ejemplo