Introducción

Recientemente hice una entrada sobre la api de binbox.io en Python y dije que escribiría un poco sobre cómo consumirla pero ahora con Javascript nativo, el cual se puede ejecutar en el navegador.

Incluyendo scripts

Esto es muy, muy simple. Creamos un documento HTML nuevo e incluimos el script de binbox.io al final. Dicho script se puede encontrar en esta ruta. Esto proporcionará un objeto global el cual contiene una clase que podemos instanciar.

See the gist on github.
Con ese código ya podemos comenzar a trabajar.

Nota: si cargamos estos scripts desde un servidor con https habrá errores, pues no podemos cargar http desde https. Esto es debido a que el script de binbox carga dentro de sí mismo a jQuery, pero desde http. Entonces aunque carguemos el script (de Binbox) con https, éste cargará a otro (jQuery) sin http provocando un error.

En resumen, no uses estos ejemplos en un servidor con https.

Instanciando con nuestro nombre de usuario

Ya hemos incluido el script, ahora es momento de usar las clases que nos brinda. Para poder acortar y crear pastes necesitamos instanciar la clase API del objeto Binbox. Como parámetro, el método constructor requiere una url completa de nuestro usuario para la api.

La url es algo así: http://tu_usuario.binbox.io/

En donde obviamente tenemos que cambiar tu_usuario por el nombre de usuario real.

See the gist on github.

Acortando un link

Para acortar un enlace o link podemos, una vez instanciada la clase, llamar al método create. Dicho método tiene que ser llamado con dos argumentos.

El primero, un objeto con dos propiedades: title y url, lo que sería el título y el enlace, respectivamente.

El segundo, una función que será llamada una vez que el enlace sea acortado; es decir, una función callback.

Si no entiendes mucho sobre las funciones anónimas o los callbacks, aquí te dejo una breve introducción a ello.

Sabiendo eso, hagamos un ejemplo en donde se acorte un link y el resultado se ponga en un párrafo.

See the gist on github.

Puedes probar el ejemplo aquí: Abrir plnkr

Creando un paste

Crear un paste es igual de sencillo que crear un link. En este caso sólo cambia la propiedad “url” por “text”. Así:

See the gist on github.
Los resultados aquí: Click para abrir la vista en plnkr.co

Interfaz gráfica

Una vez visto esto, se me ocurrió hacer una pequeña aplicación que permite crear pastes y links acortados. Simple, pero funciona. Como lo expliqué arriba, hay un error con binbox y https. Así que no puedo embeber, pero sí puedo poner el link: ver demostración.

Algunas capturas

Código

Aquí el código:

See the gist on github.

Y eso es todo por hoy.