API de binbox.io en Javascript

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.

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <h1>API de binbox.io</h1>
  <script type="text/javascript" src="http://binbox.io/api.js"></script>
  <script type="text/javascript">
    //Aquí pondremos el código
  </script>
</body>

</html>

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.

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <h1>API de binbox.io</h1>
  <script type="text/javascript" src="http://binbox.io/api.js"></script>
  <script type="text/javascript">
    //Aquí pondremos el código
    var BB = new Binbox.API("http://tu_usuario.binbox.io/");
  </script>
</body>

</html>

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.

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <h1>API de binbox.io</h1>
  <p id="parrafoResultados">Aquí aparecerán los resultados en caso de que todo vaya bien :)</p>
  <script type="text/javascript" src="http://binbox.io/api.js"></script>
  <script type="text/javascript">
    //Aquí pondremos el código
    var BB = new Binbox.API("http://parzibyte.binbox.io/");
    var parrafoResultados = document.querySelector("#parrafoResultados");
    BB.create({
      title: "Este es el título del enlace",
      url: "https://www.parzibyte.me/blog"
    }, function(resultados) {
      if (resultados.ok) {
        parrafoResultados.innerHTML = "El link acortado es: https://binbox.io/" + resultados.id;
      } else {
        parrafoResultados.innerHTML = "Ups, algo salió mal. El error es: " + resultados.error;
      }
    })
  </script>
</body>

</html>

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

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <h1>API de binbox.io</h1>
  <p id="parrafoResultados">Aquí aparecerán los resultados en caso de que todo vaya bien :)</p>
  <script type="text/javascript" src="http://binbox.io/api.js"></script>
  <script type="text/javascript">
    //Aquí pondremos el código
    var BB = new Binbox.API("http://parzibyte.binbox.io/");
    var parrafoResultados = document.querySelector("#parrafoResultados");
    BB.create({
      title: "Este es el título del paste",
      text: "Hola mundo :)"
    }, function(resultados) {
      if (resultados.ok) {
        parrafoResultados.innerHTML = "Paste creado correctamente. Visítalo en: https://binbox.io/" + resultados.id + "#" + resultados.salt;
      } else {
        parrafoResultados.innerHTML = "Ups, algo salió mal. El error es: " + resultados.error;
      }
    })
  </script>
</body>

</html>

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:

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <h1>API de binbox.io</h1>
  <label for="inputNombreUsuario">Nombre de usuario binbox:
    <br>
    <input id="inputNombreUsuario" type="text" placeholder="">
  </label>
  <br>
  <br>
  <label for="seleccionLink">Link
    <input id="seleccionLink" name="seleccion" type="radio" value="0" checked />
  </label>
  <label for="seleccionPaste">Paste
    <input id="seleccionPaste" name="seleccion" type="radio" value="1" />
  </label>
  <br>
  <br>
  <label for="titulo">Título:
    <br>
    <input id="titulo" type="text">
  </label>
  <br>
  <br>
  <label for="urlOTexto">URL (si es link) o Texto (si es un paste):
    <br>
    <textarea id="urlOTexto" cols="30" rows="10"></textarea>
  </label>
  <br>
  <br>
  <button id="btnAccion">Ok</button>
  <p id="parrafoResultados">Aquí aparecerán los resultados en caso de que todo vaya bien :)</p>
  <script type="text/javascript" src="http://binbox.io/api.js"></script>
  <script type="text/javascript">
    var parrafoResultados = document.querySelector("#parrafoResultados");
    document.querySelector("#btnAccion").addEventListener("click", function() {
      var nombreUsuario = document.querySelector("#inputNombreUsuario").value;
      if (nombreUsuario) {
        var titulo = document.querySelector("#titulo").value;
        var urlOTexto = document.querySelector("#urlOTexto").value;
        if (titulo && urlOTexto) {
          var opcionSeleccionada = document.querySelector("input[type='radio']:checked").value;
          var objeto = {
            title: titulo
          };
          if (opcionSeleccionada == 0) {
            objeto.url = urlOTexto;
          } else {
            objeto.text = urlOTexto;
          }
          var BB = new Binbox.API("http://" + nombreUsuario + ".binbox.io/");
          parrafoResultados.innerHTML = "Cargando...";
          BB.create(objeto, function(resultados) {
            if (resultados.ok) {
              var link = "https://binbox.io/" + resultados.id;
              if (opcionSeleccionada == 1) link += "#" + resultados.salt;
              var ancla = '<a target="_blank" href="' + link + '">' + link + "</a>";
              parrafoResultados.innerHTML = "Correcto. El link es: " + ancla;
            } else {
              parrafoResultados.innerHTML = "Ups, algo salió mal. El error es: " + resultados.error;
            }
          });
        }
      }
    });
  </script>
</body>

</html>

Y eso es todo por hoy.

Estoy aquí para ayudarte 🤝💻

Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

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/