Bienvenido al blog de Parzibyte. Vas a encontrar tutoriales y tips de programación, bases de datos, redes, electrónica e informática general. Ejemplos de código, aplicaciones gratuitas y open source
En este post te mostraré a registrar un nuevo sitio en Google para poder usar reCAPTCHA. Es decir, veremos cómo registrar tu dominio y obtener las claves que se necesitan.
También veremos cómo agregar el dominio de localhost para hacer pruebas locales.
Postman es una aplicación de escritorio (en mis tiempos era una extensión para navegadores, pero las cosas cambian) que permite probar nuestras APIs y aplicaciones web.
Con Postman se pueden enviar peticiones HTTP con distintos métodos: POST, PUT, GET, DELETE, etcétera.
También se pueden enviar formularios o datos codificados como JSON.
Así que con Postman podemos probar todas nuestras aplicaciones web sin tener que programar el lado del cliente; personalmente lo uso para probar el back-end antes de comenzar con el front-end.
En este post veremos cómo descargar, instalar y usar Postman.
Curl es una gran herramienta para hacer peticiones y enviar datos usando HTTP. Desconozco todas sus funciones pero puedo asegurar que sirve perfectamente para probar las APIs que creamos en cualquier lenguaje de programación con el paradigma REST.
Es por eso que hoy veremos cómo usar CURL para probar nuestras API’s y hacer otras peticiones que nos ayudarán a depurar nuestros programas de la web. A lo largo de este tutorial te mostraré, entre otras cosas, lo siguiente:
Nota: curl está disponible para Windows y me parece que viene preinstalado en Linux.
El almacenamiento de datos en el navegador usando JavaScript, además de las cookies, ya es una cosa que salió hace mucho tiempo. Sin embargo, muchas personas todavía no conocen sobre el tema o saben poco sobre el mismo.
Es por eso que en este post voy a explicar cómo trabajar con la API de localStorage en JavaScript para almacenar datos en el navegador del usuario, pero lo más importante es que estos datos van a persistir aunque el navegador se cierre o se actualice.
En este tutorial vamos a ver cómo hacer una petición HTTP de tipo GET con Java. Es decir, obtener la respuesta HTTP (ya sea HTML, JSON, texto, etcétera) que se obtiene al visitar una URL.
No vamos a usar ninguna librería externa ni paquetes de terceros, solamente URL, HttpUrlConnection y algunos búferes.
Esto será simple pero a partir de esto podremos hacer peticiones más grandes.
El buscador DuckDuckGo, aparte de todas las ventajas que tiene en comparación con Google y otros buscadores, proporciona una API que si bien no sirve para buscar como en el buscador, funciona para obtener respuestas inmediatas y buscar definiciones.
Hoy veremos cómo consumir esta API basada en JSON utilizando JavaScript del lado del servidor: Node.JS. Un ejemplo de lo que la API devuelve es lo siguiente (al buscar JavaScript):
Ejemplo de respuesta de API JSON de DuckDuckGo
Consumir esta API no es nada difícil, pues es una simple petición GET y parseo de JSON.
Creo que ya todos sabemos qué cosa es la wikipedia, y si no, pues aquí dice lo que es. En fin, Wikipedia tiene una API que podemos consumir desde cualquier lenguaje de programación que hable HTTP.
Hay muchas opciones para consumirla, muchos parámetros y cosas de esas, pero vengo a exponer una forma que seguramente muchos estaremos buscando.
Hace algún tiempo dejé los “estudios” que estaba realizando en freecodecamp.org. Recuerdo que me frustré porque no pude terminar la app que mostraba el clima en la ubicación del usuario. Eso fue porque quería que quedara perfecta.
El tiempo pasó y lo olvidé, pero apenas lo retomé. Y aunque no quedó perfecta, quedó.
Por eso hoy vengo a explicar cómo la hice y qué cosas utiliza. No es un tutorial, porque me llevaría mucho tiempo explicar el funcionamiento de cada cosa. Será como un repaso.
Si quieres ver el resultado final, aquí lo dejo. Puedes analizar el código fuente a tu gusto 🙂
No pude incrustarlo, aquí dejo el link: Ver resultado final
Por cierto, no te mostrará nada si es que no le das permiso de obtener tu ubicación o si no puede obtenerla.
Para obtener la ubicación del usuario utilicé navigator.geolocation.getCurrentPosition. Esto toma 3 parámetros, que son, en orden:
El fragmento de código es este:
Con eso ya lo tenía. Ahora, cuando VueJS me informara que la aplicación había sido montada, llamaba a esa función.
Para obtener el clima utilicé la API que freecodecamp proporciona. Creo que no es muy precisa pero igual funciona. Dicha API devuelve en formato JSON el clima, la temperatura, el lugar y una imagen. Uno sólo le manda la latitud y longitud obtenidas en el paso anterior.
Para hacer la petición, utilicé fetch, que ya viene incluida en las nuevas versiones de Javascript. El código queda así:
Lo de this.cargandoClima es para mostrar la animación de “cargando” en el botón de la esquina inferior derecha.
El icono cambia dependiendo del clima. Si llueve, muestra un icono de lluvia. Si está despejado, también. Pero aparte de eso, muestra una luna o un sol. Para estimar la hora, utilicé esto:
Según yo, sería de día si la hora actual (del 0 al 23) está entre 7 y 19. Es decir, desde las 7 de la mañana hasta las 7 de la noche.
Y para los iconos, como ya dije, utilicé la librería Weather icons. Dicha librería provee iconos con un sol y una luna; es decir, para el día y la noche. Entonces haciendo uso de lo que me devolvía el clima, hice un switch para componer el icono. Este es el código que utilicé:
Para terminar, hice que se pudiera cambiar entre grados F y C. Aquí el código:
No programé la conversión de F a C, porque la API da la temperatura en Celsius. Así que sólo tenía que convertir a Fahrenheit, y si el usuario quería Celsius, no hacía nada, mostraba los originales.
Al final de todo, quedó bien. Y no fue mucho trabajo terminarla.
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.
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.
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.
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.
Puedes probar el ejemplo aquí: Abrir plnkr
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
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.
Aquí el código:
Y eso es todo por hoy.
WordPress tiene una API que podemos consumir para gestionar completamente un blog. Todas las peticiones se hacen a un mismo archivo PHP. Pero hoy no hablaremos de PHP, sino de Python y una librería que nos va a facilitar el trabajo.
Me gustaría recalcar que esta api sirve tanto para sitios que están en wordpress.com (por ejemplo, algo como misitio.wordpress.com) y para sitios que no están en wordpress.com pero usan wordpress, por ejemplo, este sitio que, aunque está alojado en un servidor distinto, utiliza wordpress.
Para comprobar si nuestro sitio puede ser manejado con la api, vamos a comprobar si existe un archivo llamado xmlrpc.php.
Para ello iremos a la dirección de nuestro sitio y adjuntaremos /xmlrpc.php
En este caso probaré con un blog gratuito que he creado en wordpress.com, pero esto aplica para cualquier sitio que tenga wordpress instalado.
En mi caso, la ruta normal es parzibyte.wordpress.com pero la del archivo es parzibyte.wordpress.com/xmlrpc.php
Navegando, tenemos que encontrar algo así:
Si es que sale así, entonces podemos comenzar a trabajar. El mensaje que sale indica que sólo se aceptan peticiones POST, y en este caso estamos haciendo una de tipo GET. Muy bien, ahora podemos proseguir.
Los requisitos no son muchos, ni son engorrosos. Además, si antes hemos programado con Python esto será pan comido.
Tip: Puedes seguir este tutorial fácil para ver cómo instalar dichos requisitos 😉
Una vez que ya tenemos PIP instalado, en una terminal vamos a escribir:
pip install python-wordpress-xmlrpc
Esperaremos a que se descargue y listo
Puedes consultar la documentación oficial si quieres ver alternativas.
Es hora de crear nuestro hola mundo. Para ello, abriremos nuestro editor de código favorito, crearemos un archivo nuevo y escribiremos lo siguiente:
Guardamos, y en la terminal escribimos python nombre_del_archivo.py
Obviamente vamos a remplazar los datos que aparecen ahí por los verdaderos. Si ponemos el usuario o la contraseña equivocada, aparecerá algo así:
En cambio, si todo va bien, algo así se verá. En este caso puede que nos parezca redundante, pero no es así, ya que el nombre de usuario ha sido obtenido directamente de wordpress
Listando postsUna vez que ya nos pudimos autenticar, es hora de trabajar como se debe. Comenzaremos leyendo los posts que tenemos en nuestro sitio. Para ello, veamos el siguiente código:
En él, simplemente obtenemos las entradas llamando al método GetPosts(). Se supone que si nos autenticamos correctamente, debe mostrar las entradas que tenemos. Por el momento sólo muestra las primeras 10 entradas y el título de ellas.
Cabe mencionar que muestra tanto las que son borradores y las que están publicadas.
Al ejecutar el script se debe ver algo así:
Y si voy al verdadero sitio, veré esto:
Por lo que se comprueba que los datos de la API son reales.
Hasta ahora sólo mostramos el título (que es lo que se imprime por defecto al imprimir el objeto), pero ciertamente las entradas tienen otras propiedades como id, estado, contenido, etcétera. Así que ahora vamos a imprimir 10 posts (al igual que hace un momento) pero también imprimiremos las propiedades más importantes.
Como sólo tengo 1 post, sólo se imprimirá uno. Pero el punto es demostrar las propiedades
El código es el siguiente:
Lo ejecutamos y debe aparecer algo así:
En este caso es la primera entrada y la única que existe. Tiene un id, contenido, título, y estado. Por cierto, no sólo existen esas propiedades. Podemos usar todas las que se muestran en esta lista de la documentación oficial.
Crear o insertar una nueva entrada o post es igual de sencillo que todo lo que hemos hecho hasta ahora. Vamos a crear uno que diga Hola mundo. Por cierto, todos los posts que publiquemos desde la api serán marcados como borradores (por lo que no serán publicados) pero tenemos un pequeño truco detallado más abajo para publicarlos instantáneamente.
Muy bien, para insertar podemos usar lo siguiente:
Y al ejecutarlo, vemos esto:
Si vamos al sitio de wordpress, vemos lo siguiente:
Maravilloso, tiene el título que nosotros pusimos en el script. Y si la abrimos para ver detalles, podemos ver en la url que el id efectivamente es el 17. Y que sí podemos incluir contenido HTML:
La única desventaja es que fue publicada como borrador. Ahora veremos cómo convertir instantáneamente ese borrador en una entrada pública.
Como dijimos, cuando publicamos con la api, la entrada se queda como borrador. Pues bien, como nos devuelve el id de la entrada podemos obtenerla para editarla, cambiar su estado y guardar cambios. Así:
La entrada fue publicada correctamente:
Incluso se puede visitar aquí
Al publicar un post también podemos agregar categorías y etiquetas. Simplemente establecemos la propiedad “term_names” de la nueva entrada. Para las etiquetas usamos post_tag y para las categorías category. Cada clave necesita un arreglo.
El código queda así:
Voy a ejecutar el script:
Podemos ver la entrada aquí, y si observamos bien, veremos que tomó las etiquetas y categorías que le pusimos:
Así es como podemos seguir jugando con toda la api.
Para terminar este CRUD, falta mostrar cómo eliminar. Para ello necesitamos el id. En este caso eliminaré la entrada que dice “Primera entrada del blog”. Listaré todos los posts y veré cuál id tiene:
Es el id 4, con ello puedo llamar a DeletePost y pasarle ese id como argumento. Como medida de seguridad, haré que el sistema pregunte si realmente quiero realizar esa acción y que muestre los detalles del post a eliminar usando el método GetPost.
Así que el código queda así:
Al correrlo y confirmar sale esto:
Si visito la página, veré que el post se ha movido a la papelera. No sé si exista un método para eliminarlo permanentemente, pero con moverlo a la papelera basta. Ya que luego podemos vaciarla en una sola operación.
Me tomé el tiempo de crear un script interactivo que junta todos estos métodos y permite editar, eliminar, insertar y listar lo básico.
Si no queremos ingresar nuestros datos cada que corramos el script, podemos remplazar los campos que dicen “usuario por defecto” y los otros dos (los de contraseña y sitio).
Si estamos en un sistema que no es Windows, ponemos el comando que usamos para limpiar la pantalla en lugar de “cls”.
Y bien, aquí el código:
Algunas capturas:
Con este script de python podemos llevar a cabo cualquier operación que podemos hacer a mano. Si buscamos la manera, podremos optimizar esto y hacer que nos ahorre tiempo en nuestra vida cotidiana. Por ejemplo, podemos establecer estilos predeterminados con html, publicarlas de una base de datos, etcétera.
Se puede hacer todo lo que sea imaginable.
