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.


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.

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.

Relacionado:  Formulario de contacto en PHP y Bootstrap

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.

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í:


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:

Y eso es todo por hoy.

Apoya al sitio

¿Mi artículo te ha resultado útil? haz una donación. También pudes suscribirte a mi boletín semanal en la parte de abajo

Suscribir por correo

Ingresa tu correo y recibirás mis últimas entradas sobre programación, open source, bases de datos y todo lo relacionado con informática

Únete a otros 314 suscriptores


parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

0 Comments

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

A %d blogueros les gusta esto: