Sobre qué son las CORS o cómo tirarte de los pelos cuando aparecen.

Pongo la mano en el fuego que durante tu vida como programador has tenido que pelearte con las CORS alguna vez, verdad?

Si ya lo has hecho sabrás lo importantes que son y el por culo que dan, pero en cambio, si ni siquiera te suena este término pues… enhorabuena supongo.

Si no lo conoces y te dedicas al desarrollo web es algo que vas a necesitar saber en futuro así que dale.

Eso si, como siempre digo, en mi experiencia como desarrollador lo que mas me ha costado siempre es esto y las expresiones regulares. Esa cosas que se te atasca y no hay manera. Pues eso.

Pero no te preocupes si vas de nuevo porque conociendo los fundamentos de las CORS y a la mínima que hayas resuelto 3 errores de este tipo, te saldrán como churros 😉

 

¿Qué son las CORS?

A ver, para empezar la palabra CORS es una sigla de Cross-Origin Resource Sharing. Esto es, traducido al castellano Intercambio de recursos de Origen Cruzado. 

Pero no nos dice mucho. Vayamos a la wikipedia y a partir de ahí desarrollamos.

Intercambio de recursos de origen cruzado o CORS es un mecanismo que permite que recursos restringidos (como por ejemplo, las tipografías) de una página web puedan ser solicitados desde un dominio diferente por fuera desde el cual el primer recurso fue expuesto.

CORS define una forma en la cual el navegador y el servidor pueden interactuar para determinar si es seguro permitir una petición de origen cruzado.​ Esto permite tener más libertad y funcionalidad que las peticiones de mismo origen, pero es adicionalmente más seguro que simplemente permitir todas las peticiones de origen cruzado.

 

Creo que se entiende bastante bien pero para resumir consiste en que una página “no puede” cargar datos o elementos de otra página diferente.

Y pongo entre comillas “no puede” porque precisamente las CORS definen una política de seguridad que nos permite jugar con los recursos.

Obviamente todo esto tiene que ver con el desarrollo de páginas web y/o aplicaciones web. A la mínima que te pongas a hacer algo para la web vas a utilizar javascript si o si y lo sabes.

julio iglesias y lo sabes

Y en el fondo también tirarás de Ajax. Y si no piensa en todos los frameworks de front como funcionan en su base. Peticiones Ajax una y otra vez.

Pero antes de que apareciera el protocolo de las CORS no se podían cargar datos por Ajax en una página A desde otra página B.

Me explico.

Desde gorkamu.com yo no podía acceder a los recursos de forocoches.com, por ejemplo. Sólo se podía acceder a los recursos que estuvieran alojados bajo un mismo dominio. Es decir:

  • gorkamu.com/css/styles.css
  • gorkamu.com/js/form.js

¿Se entiende no?

Pues eso, que no se podía.

Aunque realmente había formas para “saltarse” esta limitación utilizando JSONP pero no eran genéricas desde luego…

 

¿Cómo funcionan las CORS?

Vale ahora pongámonos técnicos porque vamos a entrar con el tema del preflight y cómo afectan a las CORS.

Cuando una página web intenta conectar con otra para acceder a un recurso, ahí se está produciendo una petición HTTP. Las hay de distintos tipos pero todas ellas llevan cabeceras en su petición.

Aquí te explico un poco mas en detalle qué es y cómo funciona el protocolo HTTP.

Pues justo antes de que se llegue a realizarse la petición tu navegador automáticamente la intercepta para enviar antes el una primero.

Esta pre-petición automática es conocida porque se ejecuta bajo el método OPTIONS y no tiene cuerpo, sólo envía las cabeceras.

Las cabeceras o headers que se envían por parte del navegador le dan información al servidor sobre qué quiere hacer.

Así pues, en función de lo que nos responda el servidor después de esta primera pre-llamada, la petición original podrá continuar o por el contrario se bloqueará y arrojará un error.

prelight de CORS

Fíjate bien porque tal y como ves, este error de CORS también se produce por intentar acceder a un puerto diferente del 80 o 443. Aunque formen parte del mismo dominio.

Imagínate que abres Google Drive y haces una petición cualquiera. Por ejemplo el guardar un documento nuevo.

Si inspeccionas desde las herramientas para desarrolladores de tu navegador podrás ver algo tal que así:

Request headers en CORS

Esto que ves es la pantalla en la que puedes comprobar las peticiones HTTP que se están produciendo para esa página. Aquí puedes ir viendo una por una de qué tipo es y qué datos envía o recibe.

En la parte de Request Headers vemos las cabeceras que se han enviado en el preflight de la petición original. Hay varias de ellas pero quédate con las siguientes:

  • access-control-request-headers: authorization, x-goog-authuser
  • access-control-request-method: POST
  • origin: https://drive.google.com

 

La primera cabecera, access-control-request-headers, es una cabecera que se envía durante el proceso de preflight y le permite saber al servidor qué otras cabeceras HTTP van a usarse cuando se realice la petición. En el ejemplo se utilizan dos: authorization para autenticarse bajo Bearer o oAuth lo mas probable y la segunda x-goog-authuser para autenticarse contra Google.

La cabecera access-control-request-method le indica al servidor que métodos o acciones puede llegar a hacer la petición. En el ejemplo indica que solo va a ejecutar un método POST pero se pueden añadir tantas igual como de verbosa sea la API a la que quiere acceder.

La última cabecera, origin, le dice al servidor desde donde se realiza la petición. Si este host es válido para el servidor permitirá realizar la petición. Si por el contrario no reconoce el valor de la cabecera origin echará para atrás la request.

Ahora bien, si el servidor reconoce y valida estas cabeceras de la petición preflight podrá ejecutarse la petición original, sino no.

¿Pero y qué es lo nos responde el servidor?

Cabeceras CORS de respuesta
Cabeceras CORS de respuesta

 

Aquí las cabeceras de respuesta. Fíjate que devuelve con las mismas que hemos visto pero con alguno de sus valores ampliado. Por ejemplo la cabecera access-control-request-method, que a diferencia de lo que se enviaba en la petición, nos responde que acepta los métodos GET, POST y OPTION.

Esto es, para toda la aplicación los únicos métodos que pueda ejecutar cualquier petición serán esos tres únicamente. En el caso de que fuera una API a lo que se consulta, no sería muy verbosa si la entendemos como una RESTFull API…

 

¿Cómo habilitar las CORS?

Si ya has entendido como funciona esta política y ves el potencial que tiene probablemente quieras empezar a usarla ya.

Antes de nada piensa que si tu perfil es puramente backend estás de enhorabuena ya que la película de habilitar las CORS en tu API va a caer de tu parte si o si.

El gran trabajo lo tienes que hacer tu.

Y por parte de la gente de front tan solo hay que añadir las cabeceras a las peticiones y del resto ya se encarga el navegador (y el programador backend 😂)

Existe una página de referencia para saber cómo habilitar las CORS en diferentes tecnologías. La web en cuestión es esta, ya puedes guardártela bien en los marcadores…

 

Utilizar CORS en Apache

Apache, uno de los servidores mas utilizados en el mundo web. Aquí tienes un ejemplo de cómo usar esta política con este servidor.

Para añadir la autorización CORS a las cabeceras de Apache tan solo añade la siguiente línea dentro de la etiqueta <Directory>, <Location>, <Files> o <VirtualHost> de tu configuración

  Header set Access-Control-Allow-Origin "*"

Esta línea lo que hace es permitir las conexiones desde todos los orígenes. También puedes añadirla en tu .htaccess

Para asegurarte de que se ha aplicado correctamente la configuración puedes comprobarlo tirando la siguiente línea en la consola:

apachectl -t

Una vez que la veas aplicada tan solo te tocará reiniciar el servidor y listo!

sudo service apache2 reload

 

Añadir las CORS en NGINX

Para el que no lo conozca Nginx es otro servidor web bastante utilizado. Aunque también podemos configurarlo para ser utilizado como un Proxy-Inverso o como un balanceador de carga entre otras cosas.

Últimamente en mis desarrollos lo estoy utilizando mas que Apache incluso. Para habilitar las CORS en Nginx tienes a continuación la configuración necesaria.

#
# Wide-open CORS config for nginx
#
location / {
     if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        #
        # Custom headers and headers various browsers *should* be OK with but aren't
        #
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        #
        # Tell client that this pre-flight info is valid for 20 days
        #
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain; charset=utf-8';
        add_header 'Content-Length' 0;
        return 204;
     }
     if ($request_method = 'POST') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
     }
     if ($request_method = 'GET') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
     }
}

 

Habilitar las CORS en PHP

Como bien he dicho mas arriba, Apache es uno de los servidores web mas utilizado y es por supuesto el servidor por excelencia para el lenguaje PHP.

De hecho un stack típico es el de LAMP, MAMP o WAMP que no deja de ser otra cosa que Linux o MacOS o Windows junto con Apache, Mysql y PHP por sus siglas….

Si por un casual no tienes acceso a editar la configuración de Apache siempre puedes habilitar las CORS en PHP añadiendo la siguiente cabecera:

 <?php
 header("Access-Control-Allow-Origin: *");

Esta cabecera la tendrás que poner antes de cualquier función que devuelva una respuesta.

 

Usar CORS con Express

El último de los ejemplos es habilitar esta política con Express. Un framework Javascript super utilizado principalmente para el desarrollo de APIs. Todo corriendo bajo Node claro está!

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

 

Con esto llegamos al final del artículo.

Espero que te haya quedado claro. A mi al principio me costó entenderlo y me tiraba de los pelos cada vez que me salía un error de estos al realizar una petición a través de Ajax a un recurso externo…

Pero no te preocupes, al segundo error que te salga de este tipo ya sabrás solucionarlo y sino siempre puedes preguntarme a través de twittah.

[xyz-ips snippet=”FAQS-GORKAMU-TW-YELLOW”]

A pastar!

Cómo spinear un texto y mejorar el SEO con el formato Spintax

Desconozco si en otros sectores existe también esto que te voy a contar a continuación. Me imagino que tal vez en periodismo o en trabajos en los que es primordial generar textos de calidad de una forma rápida existirá.

Pero; en el mundo del SEO existe algo que se llama spinear textos y que no deja de ser un formato enriquecido de texto que nos permite crear muchísimos artículos únicos de forma rapidísima.

Así que coge tu cuaderno de notas, presta mucha atención, abróchate el cinturón porque hoy vas a aprender como spinear un texto y mejorar tu SEO con el formato Spintax 🙂

 

¿Qué es exactamente el formato Spintax?

Esa es una pregunta que un novato del SEO puede hacerse muy frecuentemente. Así que si es tu caso, estoy seguro que este artículo te despejará todas las dudas.

El significado de la palabra Spintax es en inglés Spinning Syntax o en su traducción bastarda al castellano “sintaxis de giro”.

Spintax hace referencia a un formato, o mas bien un sintaxis (una forma de escribir y estructurar un texto) que utilizan lo que se conoce programas spinners.

Y no, no hablo ni de la moda de 2016 ni de aquella propiedad física que nos cuesta entender 😛

como spinear la vida

 

Un programa para spinear artículos es un software que dado un texto de entrada nos genera N textos de salida.

Esto viene genial para crear contenido de una forma rápida y original.

Imagínate una agencia que necesita sacar 10 notas de prensa sobre una noticia y no puede pagar a tantos redactores. Lo que haría sería hacerse con un buen programa spinner y escribir tan solo una única nota de prensa.

Después el programa le generaría esas 10 notas de prensa diferentes que necesita enviar.

Esto para el mundo del posicionamiento nos ayuda muchísimo a crear el contenido para los blogs satélites.

Si no sabes a que me refiero échate un vistazo a este artículo para entender los conceptos del SEO.

Mediante el formato Spintax tu escribes un texto y cuando quieres alternar entre diversos verbos, sustantivos o adjetivos, por ejemplo, lo indicas con un símbolo para que así el programa entienda que quieres generar un texto nuevo en base a ese símbolo.

Pero lo que indiques con ese símbolo no tiene porque hacer referencia únicamente a una estructura sintáctica simple.

Puedes hacerlo con frases o textos completos incluso!

Aunque eso no tiene mucho sentido…

Actualmente el símbolo que se utiliza para spinear textos es el signo de apertura y cierre de las llaves junto al signo de la pleca.

Ejemplo 👉

{hola|buenas tardes|que pasa co}

 

Con ese ejemplo estaríamos generando un texto por cada saludo separado por cada pleca.

Este es el formato Spintax que mas se conoce pero no es el único ya que desafortunadamente no existe un estándar respecto a esto.

Existen varios formatos Spintax dependiendo de qué software se utilice.

 

Formato Jet

Éste es el formato Spintax mas utilizado y es el que he utilizado en el ejemplo de arriba. Típicamente se dio a conocer gracias al programa The Best Spinner.

Este formato utiliza las llaves {} para delimitar las palabras o frases sobre las que quiere “girar” mediante la barra vertical |.

{tonto|maricón} el último

Un paso mas avanzado de éste formato es el Jet en 3d y consiste en introducir símbolos spinners dentro de otros símbolos spinner.

{eh {tu|amigo}!|que pasa {co|gandul}!}

 

Formato Virgulilla

Este sea seguramente el segundo formato Spintax mas usado. Consiste en utilizar el signo de la virgulilla (~) para el primer nivel y la barra vertical para el segundo.

Lo utiliza la página de ArticleRanks cuando se sube algún artículo

{tonto~maricón} el último
{eh {tu|amigo}!~2que pasa {co|gandul}!}

 

Formato BBCode

Por último un formato Spintax que bebe directamente del BBCode es éste. Aquí en lugar de utilizar el signo de las llaves para delimitar las palabras, utilizamos los corchetes.

Lo suelen utilizar sitios como Free Traffic System en sus procesos internos.

[spin]tonto|maricón[spin] el último

 

 

Si has llegado hasta aquí después de esta chapa, (ni con tus ojos, me espero al blue ray…) ya podrás pasar a saber cómo spinear textos.

 

Spintax anidado o en 3 dimensiones

Ya lo he ido enseñando durante los ejemplos de los diferentes formatos Spintax pero el formato anidado hace referencia a dos o más niveles de anidado.

Algo así como Inception 😂

Digamos que tengo la siguiente oración en formato spintax:

Los directorios de artículos son {un {componente | componente | aspecto} importante de SEO | útil para {obtener | ganar} backlinks}.

Como ves, las palabras en color rojo sería un primer nivel de spintax y el color azul el segundo nivel.

Este formato viene genial para darle mas profundidad al texto y que no parezca tan “robótico” aunque por desgracia no todos los programas de spinear admiten esta forma de escribir.

 

Omitir partes del texto spineado

Una de las funcionalidades que implementa algunos de los programas para spinear arriba citados es que nos dan la posibilidad de omitir ciertos elementos que delimitemos entre los signos de spinear de cualquier formato.

O mas bien hacer algunos elementos opcionales.

Esto lo conseguimos colocando la barra vertical delante de la parte que queremos omitir.

Ejemplo 👉

Jordi ENP es el mejor {|youtubee|actor} del mundo

Fíjate que no hay ninguna palabra antes delante de youtuber.

Esto nos generará algo así como:

  • Jordi ENP es el mejor youtuber del mundo.
  • Jordi ENP es el mejor actor del mundo.
  • Jordi ENP es el mejor del mundo.

 

Cómo spinear un texto

Digamos que ya tienes un texto del que quieras generar varias copias y te conoces los diferentes formatos Spintax, es el momento de ponerlos en marcha.

Imagina que tu texto tiene una frase como la siguiente:

“Escribir artículos es muy divertido.”

Cogiendo esta frase y pasándola por el programa para spinear, podríamos formatearla del siguiente modo:

“{Escribir | Crear} {artículos | historias} es una {mucha diversión | experiencia gratificante}.”

Como ves cada una de las palabras o frases contenida entre las llaves se sustituye aleatoriamente en el artículo de salida.

Decir también que no solo con palabras o frases funciona. Por si no se te había pasado por la cabeza, este formato también funciona con enlaces 😛

<a title=”{como hacer slime|como crear una caja sopresa}” href=”http://{comocrear.es/slime/|comocrear.es/caja-sorpresa/}” target=”_blank”>{como hacer slime|como crear una caja sopresa}</a>

 

Ejemplos de la primera frase spineada serían 👉

  • Escribir historias es muy divertido.
  • Crear artículos es una experiencia gratificante.
  • Crear historias es una experiencia gratificante.

Y así sucesivamente para todas las combinaciones posibles…

Puedes “girar” artículos a nivel de palabra, frase, oración o párrafo o una combinación de todos estos.

Si te mueves en el mercado castellanohablante un par de buenos servicios para spinear tus artículos son Spinea.me y ESPinner.net pero estos dos son de pago.

Si quieres alternativas gratuitas puedes utilizar hasta cierta forma la herramienta de Daniel Piñero y que nos permite generar un texto algo básico a partir de otro de entrada.

Algo sencillo pero funciona.

Con esta herramienta ni siquiera te tienes que preocupar en adaptar tu texto al formato Spintax. Tan solo se pone el texto original y el software automáticamente te genera otro nuevo.

Si andas corto de presupuesto cumple con su cometido para los blogs satélites.

 

Conclusión

Juntando cada una de las partes que has visto durante este artículo podrías preguntarte cuál es la mejor estrategia al spinear textos.

Según mi opinión es que depende para qué vas a necesitar esos textos generados. Pero supongamos que estás haciendo SEO y lo vas a utilizar para una red de blogs 2.0 o para enviarlos a directorios de artículos.

Mis consejos son los siguientes:

  • Cuida muy mucho los sustantivos, los verbos y los adjetivos: Pon elementos que tengan una relación semántica próxima o de lo contrario generarás textos que no los entiende ni peter
  • Presta atención a cada texto generado: Llega incluso a realizar copias “manuales” de una en una en lugar de que el software te genere 10 o 20 de golpe.
  • Separa elementos y enriquece el texto: no delimites elementos realmente grandes, mas bien todo lo contrario. Si puedes spinear a nivel de palabra y cuanto mas rico sea tu vocabulario mejor serán los textos.
  • Repásalo todo: ten un poquito de amor propio y repasa todo lo generado. Todavía las máquinas no crean textos tan diversos como las personas, pero se acercan.

 

Si sigues estas normas básicas al spinear un texto te aseguras que aumenten considerablemente las posibilidades de que Google se enamore de él.

Que en el fondo es para lo que utilizamos eso jejeje.

 

[xyz-ips snippet=”FAQS-GORKAMU-TW-YELLOW”]

 

A fregar!

Cómo sobrescribir una función de Woocommerce

En este artículo nos vamos a meter un poco en harina y vamos a programar un poquito y para ello vamos a aprender a sobrescribir Woocommerce.

Para el que no lo sepa, Woocommerce es un plugin para WordPress realmente inmenso y bien trabajado que nos permite crear una tienda electrónica en nuestra página web.

Con este plugin podemos gestionar los productos, las variaciones de esos productos, sus precios junto con su stock e incluso configurar productos digitales o incluso montar tiendas multidivisa.

Aunque como te podrás imaginar, esta vaga descripción se queda muy corta de las posibilidades que nos ofrece este sistema de comercio electrónico.

Woocommerce viene con muchísimas funcionalidades y además existen múltiples plugins y add-ons que nos permiten ampliar la funcionalidad básica del sistema.

Pero en este artículo no vamos a ver cómo instalarlo y configurarlo, no.

Hoy aprenderemos a sobrescribir Woocomerce, ampliar o modificar las funcionalidades que vienen por defecto o incluso los estilos que nos ofrece.

 

Sobrescribiendo estilos

Recientemente en el trabajo he tenido que sobrescribir una función de Woocommerce para añadir una clase a un elemento.

Obviamente lo podría haber hecho por jQuery pero ni es la forma correcta ni habría tenido contenido para sacarme este post de la manga 😛

Si todavía hay algún despistado que no sabe que significa la sobrescritura en la programación, siempre puedes darte una vuelta por este artículo en el que se ahonda sobre los conceptos de la programación orientada a objetos.

Pero básicamente consiste en redefinir el comportamiento de una función.

Ahora bien, el “problema” que tenía en el trabajo es que tenía que añadir una clase css personalizada a una de las templates de Woocommerce, concretamente a la template de las variaciones de un producto.

 

sobrescribir Woocommerce

 

Esta cajita gris de la imagen superior en la que aparece el precio y la disponibilidad de una variación se corresponde con la template que se pinta cuando aparecen variaciones.

Lo fácil y lo incorrecto hubiera sido buscar esa template dentro del core de Woocommerce y añadir ahí la clase que necesitaba, pero cuando se actualice el plugin de Woocommerce ese cambio lo iba a perder así que la solución pasaba por otro lado.

Y ese otro lado era sobrescribir la función de Woocommerce que pinta la variación.

Después de pasar un rato buscando en los ficheros del plugin por fin encontré la función que realizaba dicha tarea.

Dicha función se encuentra en wp-content/plugins/woocommerce/includes/wc-template-functions.php

Con esto ya localizado tan solo hay que copiar el código de la función que nos interesa y copiarlo dentro del archivo functions.php de nuestro child-theme y modificar lo que necesitemos modificar.

En mi caso solo he tenido que añadir la clase woo_single_variation tal y como puedes ver en el código siguiente:

Con este cambio ahora todas las variaciones contendrán la clase que me interesa. Cooool… 😀

 

Extendiendo la clase variación

Este ejemplo es para programadores que sean un poco mas pros pero el fondo de la cuestión es el mismo.

Coger lo que nos da WordPress y Woocommerce por defecto y añadirle nuevas funcionalidades.

El problema que tenía en esta ocasión es que necesitaba sacar todas las variaciones de un producto tengan o no tengan stock.

Según la documentación de Woocommerce la única función que se aproximaba a esto es get_available_variations() de la clase WC_Product_Variable.

Esta clase representa a una variación y tiene diferentes métodos para interactuar con ella.

Para mi disgusto, el método get_available_variations() sólo te devuelve las variaciones de un producto que tienen stock pero yo necesitaba todas, las que tienen stock y las que no…

¿Que hice?

Fácil, crear una clase propia que extendiera de la clase variación original y añadir un método para devolver todas las variaciones disponibles sin discriminar.

Te lo repito, si andas un poco perdido con tactos tecnicismos como sobrescritura, extensión y demás, date una vuelta por el curso de programación orientada a objetos, me lo agradecerás 😉

Esa es la clase que he extendido con el método que necesitaba y para hacer uso de ella:

Y con esto un bizcocho…

 

A pastar!

Truco para tener GSA SER Ilimitado

A poco que estes algo puesto en el mundo del SEO y mas concretamente del Black Hat SEO seguro que ya conoces al programa GSA SER. Al que no lo conozca decirle que este programa es la bomba.

Imagínate tener en las manos un ejercito de Oompa Loompas que te construyen todo el SEO de tu página web de forma automática. Y cuando digo todo es todo.

GSA SER es capaz de spinear textos, crear cuentas de correo, generar blogs satélite y publicar los textos spineados, buscar y dejar enlaces en comentarios….

En fin, este herramienta es como tener una navaja suiza hipervitaminado en las manos.

Como te podrás imaginar, un programa así con todas estas funcionalidades no es barato, es más cuesta un cojón si lo quieres a tope con todo pero si sabes manejarlo bien y haces buen SEO recuperas lo invertido echando leches.

Pero si por otra casualidad tienes una copia de GSA SER pirata y quieres hacerla ilimitada puedes seguir el siguiente trucos.

No me hago responsable de que pueda seguir funcionando o no ni de nada 🤷‍♂️

 

Dame ya la droja en vena

Antes de empezar tienes que saber que con este truco vas a conseguir practicar de forma ilimitada en GSA y Captcha Breaker.

Pero, como todo tiene puntos malos, este truco te obligará a estar reiniciando el Captcha cada 500 intentos, lo sé…

  • Descárgate RunAsDate: este programa te permite ejecutar un programa como si estuvieras en una fecha indicada. Nos va a venir muy bien para engañar a GSA SER y mantener la licencia de pruebas durante todo el tiempo que queramos. Puedes descargarlo desde aquí.
  • Lo siguiente es buscar el lugar de los ejecutables GSA_CapBreak.exe y Search_Engine_Ranker.exe. Lo lógico es que estén en el directorio de instalación pero si no te acuerdas de donde estaba puedes buscarlo escribiendo %APPDATA% en el cmd y buscando el directorio de GSA SER.
  • Busca la fecha de instalación de estos dos ejecutables haciendo click derecho > propiedades.
  • Con esta fecha introdúcela en el programa RunAsDate. Así no estaremos asegurando que GSA SER corre en la fecha válida de la licencia.

RunAsDate

 

Una vez que hayáis hecho esto al iniciar de nuevo el programa se ejecutará de forma normal y ya tendréis vuestra copia de GSA SER Ilimitado.

GSA SER Ilimitado

 

A pastar!

Cómo descargar una página web mediante técnicas black

Mucho tiempo llevaba ya sin escribir; y es que entre el trabajo y los diferentes proyectos que tengo apenas saco tiempo para nada, aunque siempre hay un buen tema sobre el que crear un artículo y en este caso os voy a enseñar a descargar una página web completa de manera muy fácil y a tiro de click!

La utilidad que luego le des a lo que te voy a contar ya depende de ti pero lo mas normal es descargar una página web para leerla offline cuando no tengas conexión a Internet aunque tendrás que ser consciente que los artículos y los contenido no se actualizarán. Si estás cómo con eso adelante!

Lo que me ha motivado para crear este artículo es el hecho de poder tener todos los contenidos de una página web que requiere autorización sin disponer dichos accesos.

Me explico: imagina que tienes acceso temporal a un foro de manualidades y hay tantos artículos interesantes que quieres tener acceso de por vida a esos contenidos una vez que te quiten esa autorización temporal, pues eso es lo que he hecho y es lo que vengo a contar.

Por supuesto vamos a utilizar una técnica un tanto black de dudosa legalidad pero que en el mundo del desarrollo y administración de sistemas es bien conocida desde hace muchísimos años.

Abre bien tus ojos porque este artículo requiere de un poquito de análisis e investigación pero cualquiera puede hacerlo así que vamo’ a darle!

 

Descargar una página web con las herramientas del navegador

Todos los navegadores web tienen una opción para descargarse una página web de una manera ultra sencilla. Tan solo tienes que visitar el sitio web que te interese y con el botón derecho del ratón hacer click y ver la siguiente opción del menú contextual:

Descargando FinoFilipino muajaja
Descargando FinoFilipino muajaja

 

Ese botón Guardar como… te permite descargar la página web que estás viendo en ese momento. Por supuesto que cuando hagas click sobre ahí se te desplegará una modal para elegir la ruta de guardado y poder darle un nombre al archivo.

 

Descargar una página web
Descargar una página web

 

Como ves, en Formato, se especifica que se trata de una Página web completa, pero ya te digo yo que no porque ¿qué pasa con la página número dos? ¿O con las categorías?

No se descargan.

Esto está muy bien si lo que quieres es bajarte solo la portada de una página web pero el objetivo de este artículo es descargar completamente todos los contenidos de una página. Sus categorías relacionadas, sus artículos, las diferentes páginas y los vídeos en caso de que estén alojadas en el mismo servidor.

Y eso se consigue con una mezcla de conocimientos técnicos mínimos, paciencia y mala leche 😛

Descargar una página web como lo haría un juanker

Aquí viene la chicha del artículo. Con este método vas a aprender a descargar una página web como lo haría un auténtico juanker, evadiendo la seguridad, saltándote la autenticación y tirando comandos desde una consola.

menudo juanker estás hecho

 

Para esta técnica vamos a necesitar una utilidad que se llama Wget.

Esta utilidad se trata de un programa libre y gratis que nos permite descargar contenido desde servidores web ya sean HTTP, HTTPS, FTP y FTPS junto a los protocolos mas usados de Internet.

En su concepción es un programa de consola para entornos UNIX escrito en C, esto significa que debes usarlo en Linux o Mac. Todos los programadores macho de verdad utilizamos estos sistemas. Si trabajas con Windows permíteme que me guarde mi opinión sobre ti pero no te preocupes porque existen versiones de Wget para Windows también.

Aquí para descargar

Si vas por linux puedes teclear esto en la consola:

sudo apt-get install wget

Esperáis a que termine la instalación y ea!

Hasta aquí ya hemos terminado la parte de los preparativos, ahora vamos a descargar una página web en modo recursivo. Esto es, descargará todo según su árbol de directorios.

 

Entendiendo el comando wget

Al principio del artículo hemos dicho que haremos esto en un sitio en el que tenemos un acceso temporal nada más.

El comando con el que vamos a descargar una página web de manera recursiva bajo autenticación es el siguiente:

wget -r --load-cookies cookies.txt --keep-session-cookies --save-cookies cookies.txt --post-data='email=EMAIL&amp;password=PASSWD' WEB

Voy a explicar qué es lo que hacen cada uno de sus argumentos y os cuento cómo conseguir cada cosa:

  • -r: Este argumento indica que queremos descargar una página web recursivamente respetando su árbol de directorios.
  • –load-cookies cookies.txt: Argumento con el que cargamos el fichero dónde hemos guardado las cookies de la página web a descargar.
  • –keep-session-cookies: Con este argumento le estamos diciendo que incluya las cookies de sesión al generar el fichero de cookies.
  • –save-cookies cookies.txt: Este argumento hace referencia al fichero de cookies que se va a generar.
  • –post-data=’email=EMAIL&password=PASSWD’: Datos que se envían en una petición POST al autenticarse contra el recurso.

 

Ejemplo práctico de descargar una página web con wget

Lo primero que hay que hacer es ir al escritorio y crear una carpeta para alojar la página web. Para ello:

cd --/Desktop &amp;&amp; mkdir web &amp;&amp; cd web/

Una vez hayamos creado la carpeta, abrimos el navegador y vamos a la página de login del sitio del que queremos descargar pero no le des al botón todavía, no tengas prisas que tenemos que hacer un par de cosas…

Inspector de elementos de chrome

 

Esto que estás viendo es el inspector de elementos de Chrome. Desde aquí podemos ir navegando por la estructura de la página web, ir jugando con los valores y otras muchas cosas mas.

Lo que nos interesa es encontrar los elementos input que formen parte del formulario y conseguir el valor de su atributo name.

¿Se entiende no?

En la foto superior recalco uno de los datos que necesitamos.

Para el ejemplo los valores son email y password.

Pues esos valores son los que hay que poner en el siguiente atributo del comando wget:

--post-data='email=EMAIL&amp;password=PASSWD'

Sustituid el EMAIL y PASSWD del ejemplo por vuestros datos.

Hasta aquí la primera parte ya la tenemos hecha. Ahora tenemos que conseguir sacar la cookie de sesión una vez que nos logueamos.

Lo podemos hacer también con las herramientas para desarrolladores de los distintos navegadores.

Si nos dirigimos a la pestaña de Application y de ahí a Cookies, veremos todas y cada una de las cookies que utiliza la página web pero la que nos interesa es la de sesión.

Capturando la cookie de sesión

 

Para el ejemplo esta cookie se llamaba PHPSESSID.

La gran mayoría de páginas web, blogs y foros utilizan esta misma cookie así que si tienes suerte y te la encuentras ya habrás terminado tu trabajo pero si no aparece tendrás que investigar un poco por tu cuenta.

¿Tampoco está mal no?

Por último, pillamos el nombre de la cookie y su valor y lo pegamos en un fichero nuevo llamado cookies.txt

PHPSESSID=8903423asdhi34284h23bksdf098...

Y ya está, podemos lanzar el comando y esperar a que se termine la descarga de la página web 🙂

 

Alternativas para Windows

Como no todo iba a ser tan malo, para Windows también hay programas gratis que nos permiten descargar una página web de una forma mas visual.

Algunos van a necesitar mas configuración que otros pero lo básico de poner una url y los datos de formulario lo permiten todos.

WebCopy

WebcopyEste programa como es obvio nos permite descargar una página web para poder consumirla de forma offline. Escanea todo el árbol de directorios de la web y se descarga todos los recursos, fotos, vídeos, estilos css y ficheros js…

Como punto negativo, el programa no cuenta con un inspector de DOM ni de javascript por lo que llegar a depurar ahí es casi una misión imposible.

Pero si te gusta el minimalismo este programa es idóneo porque no le puedes pedir mucho más…

Puedes descargarlo desde aquí.

Web2book

web2bookEste programa de escritorio también nos permite descargar una página web pero lo mas guay de este es que podemos convertirlas a PDF. Podemos configurarlo para que lea de un feed RSS y nos genere un PDF que con un poquito de programación básica y configuración, hacer que nos llegase todas las mañanas al email. O publicar tweets… no sé, muchas opciones.

Puedes descargártelo desde aquí y juguetear un poco.

Website Downloader

Website downloaderSi pasas de instalarte nada, cosa que yo haría, siempre puedes utilizar esta web que cumple con la función. Es igual que con el resto. Se descarga las imágenes, los css y los js y el resto de recursos necesarios. Se los prometen muy rápidos en velocidad de descarga según su página pero a decir verdad yo no he notado esa carga rápida…

Entra desde aquí si tal…

 

 

En principio estas son las diferentes formas que se me ocurren para descargar una página web sin liarnos la manta en la cabeza y programar cosas grandes como un scrapper por ejemplo…

Si se os ocurre algún método más que nos sirva para descargar paginas web déjalo en los comentarios.

A pastar!

Hackear Amazon para dar por culo en Twitter

Si si, como lo has leído. En este post te enseño cómo hackear Amazon para dar por culo en Twitter y sin necesidad de ser feminazi o una persona altamente susceptible a la ofensa.

Trolleos a parte, he de decir que he visto este método en un blog inglés y que de momento no he tenido oportunidad de probar aunque os lo voy a explicar paso a paso y dejaré todos los scripts disponibles para llevar a cabo el cometido.

Todo esto viene a raíz de otro artículo que se publicó en Cloudstitch en el que explicaban cómo utilizar los Amazon Dash Buttons para trackear información sobre tu bebe. Si eres un padre tecnólogo y friki puedes leerlo desde aquí.

Pero en este caso vamos a utilizar los Amazon Dash Buttons para dar por culo en Twitter.

A lo mejor no estás a la última con los desarrollos de Amazon y no sabes qué son estos Dash Buttons. Pues bien, estos botones de Amazon son un dispositivo físico que te permite hacer compras predeterminadas tan solo apretándolos.

Olvídate de acceder a la web, buscar el producto, añadirlo al carrito e introducir todos los datos para completar el proceso de comprar. Qué coñazo!

La idea que hay detrás de estos botones es que cuando lo aprietes se proceda automáticamente a la compra sin la necesidad de hacer nada mas. A continuación os dejo el vídeo promocional para que os hagáis una idea de que trata.

Actualmente en España los puedes adquirir por cinco pavos y si bien su uso está pensado para suplir deficiencias en productos de menaje y de hogar nosotros. Por ejemplo si cada dos por tres se te acaban los repuestos para tu máquina de afeitar siempre puedes hacer uso de este botón aunque nosotros los vamos a utilizar para dar por culo en Twitter.

Pero… ¿cómo? Te preguntarás….

Pues la idea es “hackear” estos botones para que cada vez que los pulsemos publiquemos un tweet en la red social de la ofensa generalizada.  Así que vamos a ello!

Hackear Amazon Dash Button para joder en Twitter

Según el artículo original, el del bebe, se necesita de un ordenador encendido las 24 horas del día.

En el ordenador tendremos un script escrito en python que haga de sniffer para trackear todo lo que haces con el botón. Siempre puedes utilizar una Raspberry para disminuir el consumo eléctrico pero al fin y al cabo necesita estar conectada permanentemente.

Tanto si se utiliza un ordenador como una Raspberry, si este está apagado no se va a registrar nada. Obvio ¿no?

Pero aquí hay un “truquito” que podemos hacer para mantener levantado el sniffer de python sin tener que tener un ordenador conectado constantemente. Se trata de hacer correr el script directamente en el router.

Además esto nos viene de perlas para el objetivo del artículo que no es otro mas que conseguir enviar un tweet al pulsar el Amazon Dash Button.

Tengo el router Linksys modelo E2000 con la última versión del firmware Tomato. El firmware DD-WRT  también nos serviría para el propósito.

Configuración del Amazon Dash Button

Una vez tengas la aplicación descargara en tu móvil y tengas ya el botón a mano tendrás que configurarlo como en las siguientes pantallas:

1- Ir al menu "Your account" de la aplicación de Amazon
1- Ir al menu “Your account” de la aplicación de Amazon
2- Dirigirse al menu "Administracion de Dispositivos"
2- Dirigirse al menu “Administracion de Dispositivos”
3- Sigue las instrucciones
3- Sigue las instrucciones

 

 

 

 

 

 

 

 

 

 

4- Sigue las instrucciones
4- Sigue las instrucciones
5- Busca tu red Wifi
5- Busca tu red Wifi
6- Pantalla principal de la aplicación de Amazon
6- Pantalla principal de la aplicación de Amazon

 

 

 

 

 

 

 

 

 

 

7- Fin de la configuración
7- Fin de la configuración
8- Dirígete al menu de notificaciones
8- Dirígete al menu de notificaciones
9- Desactiva las notificaciones del móvil
9- Desactiva las notificaciones del móvil

 

 

 

 

 

 

 

 

 

 

Encontrando la dirección Mac

Paso importantísimo, es necesario que conozcamos cual es la dirección Mac del Amazon Dash Button. El artículo del original del bebe sugiere utilizar un script de python para hacer esto pero soy un poco vago y no conozco mucho este lenguaje. Lo mas fácil es loguearse en el router, ir a la sección de Dispositivos, apretar el Amazon Dash Button y refrescar la página hasta que aparezca el nuevo dispositivo.

Configuración del router
Configuración del router

El poder de los scripts

Tal y como se comenta en el artículo original, el Amazon Dash Button solo se enciende durante unos segundos. Mientras lo pulsamos. Así que vamos a necesitar un script que esté sondeando los dispositivos conectados cada pocos segundos para ver si hay algo con la dirección MAC específica del chisme.

Una vez que encuentre la MAC, esperaremos 60 segundos y volveremos a sondear la red de nuevo.

Lo primero de todo necesitaremos una conexión SSH al router. Antes de intentar conectarte asegúrate que tienes SSH activado en las opciones del router no?

Si no de poco te va a servir….

Una vez que hayas entrado necesitarás crear el script bash. También lo puedes crear en tu máquina y subirlo mediante SFTP.

A continuación te dejo el script. Lo único que se necesita es introducir la dirección MAC del Amazon Dash Button en la línea 4.

Vamos a hacer una prueba. Lanza el script, espera unos segundos y aprieta el botón de Amazon.

Próximos pasos

Ya ha funcionado. Genial!

El script ya detecta cuando apretamos el botón de Amazon.

Lo siguiente que vamos a hacer es que publique un tweet cada que apretamos el botón y aquí es cuando la matan. Por desgracia los firmwares de los routers no suelen tener cURL instalado, de todo lo contrario sería pan comido.

Pero lo que si que podemos hacer es utilizar wget para crear el tweet aunque tendremos que configurarlo.

Fíjate en la línea 32 del shell script. Debido a que no existe una manera de autenticarse contra el servidor utilizando wget, vamos a usar el flag -U (de User-Agent) y parámetros GET para pasar el secret-key de twitter aunque posiblemente existan otras maneras mejor de hacer esto.

A parte del secret-key también le pasamos por GET los parámetros TYPE y MESSAGE.

El parámetro TYPE es para futuras mejoras del script y el parámetro MESSAGE indica el mensaje a twittear.

echo `wget -U "**MY-SECRET-USER-AGENT**" -O /dev/tty "http://example.com/test.php?SECRET=KEY&TYPE=TWITTER&MSG=I%20JUST%20PRESSED%20MY%20AMAZON%20DASH%20BUTTON"`

Lo único que queda es escribir un middleware que se encargue de hacer la llamada a Twitter. Esto lo he escrito en PHP.

Publicando un tweet desde Amazon Dash Button
Publicando un tweet desde Amazon Dash Button

 

Y esto es todo gente. Como habéis podido ver ha funcionado correctamente. Y si, se que el título del port es bastante sensacionalista pero es que esto tiene muchísimas aplicaciones.

Imagínate que pasas el usuario de twitter de un famosete y cada vez que aprietas el botón le citas, le puedes volver loco!

Una mejora sería tener un fichero csv con diferentes mensajes ya preconfigurados y que eligiera uno al azar cada vez que pulsas el botón. En fin, que a partir de aquí ya puedes hacer lo que quieras.

Aclaro que por falta de tiempo no he podido probar este hack y lo que he hecho es adaptar al blog el artículo original, si quieres leerlo aquí tienes el link en inglés.

Si tienes dudas no dudes en dejármelas en la sección de comentarios o en Twitter a través del siguiente banner.

[xyz-ips snippet=”FAQS-GORKAMU-TW-YELLOW”]

Hasta la vista chumachos!

Chequear y saber la posición en Google de tu web automáticamente

Hoy en día lo mas importante si tienes una página web es saber la posición en Google que ocupa tu sitio.

Cómo está rankeando y saber mediante el monitoreo constante si tu estrategia SEO está funcionando o no…

Casi todos al principio de empezar a montar paginas web comprobamos el posicionamiento a mano, es decir, abríamos una ventana en modo incognito, hacíamos la búsqueda y a contar.

¿Si o no?

Pues ya no. En este artículo te quiero enseñar otra forma de comprobar esto sin apenas tardar ná.

Hoy vengo a hablar de mi proyecto.

Serpaso SERP Rank Checker o cómo saber la posición en Google

Esta es una herramienta que programé para saber precisamente eso, cual es el puesto que ocupamos en Google para una determinada búsqueda.

Mientras sigo vendiéndotela, puedes echarle un vistazo aquí y aprendiendo a instalarla.

Se trata de una herramienta de consola en la que a través de diversos argumentos controlas la búsqueda en Google.

Está construida con Node así que si tienes algún contenedor docker con esta tecnología instalarla no te costará nada.

Así que vamos con los distintos modos de ejecución que tiene este programa.

 

Modo interactivo con el usuario

Este modo de ejecución irá preguntándote a través de la consola en todo momento los datos necesarios para funcionar.

Serpaso modo interactivo

Los argumentos que necesita para hacerlo funcionar son los siguientes:

  • Término de búsqueda o keyword
  • Página objetivo a buscar
  • La localización desde donde quieres hacer la búsqueda. Por defecto es internacional (google.com)
$ serpaso
>
    ? Enter keyword: how to check spam folder
    ? Enter target: howtocheck.com
    ? Enter locale [int] en_EN

Modo basado en argumentos

Este otro modo de ejecución se basa en el paso de argumentos al programa. Está pensado para poder ser programado mediante cronjobs si se quiere.

Aquí los argumentos son los mismos que en el modo interactivo pero especificados de la siguiente forma:

$ serpaso --keywords "how to check spam folder" --target howtocheck.com --locale en_EN

Serpaso argumentos

Con este modo ejecutará la búsqueda en Google obteniendo los mismo resultados que con el modo interactivo, pero si se quiere existe una función para poder exportar los datos a csv y el añadiendo ese flag a la ejecución:

$ serpaso --keywords "how to check spam folder" --target howtocheck.com --locale en_EN --csv

saber la posición en google

 

Modo basado en fichero de configuración

Esta ya es la guinda de la tarta. El programa te permite definir un fichero de configuración en el que estableces todos los parámetros necesarios para la búsqueda.

El fichero de configuración se encuentra en la siguiente ruta:

conf/config.js

Y tiene la siguiente forma:

$ cat conf/config.js
> module.exports = {
      kws: ['how to check spam folder'],
      target: 'howtocheck.com',
      locale: 'en_EN',
      proxy: 'http://83.175.238.170:53281',
      proxyList: ['http://83.175.238.170:53281', 'http://83.175.238.170:53281', 'http://83.175.238.170:53281'],
      delay: 200,
      retry: 3
  };

Como ves este programa te da ciertos opciones de configuración de esta forma que de las otras no te da. Las opciones son:

  • kws: Array con tus keywords
  • target: Página a buscar
  • locale: Región geográfica del buscador en el que buscar
  • proxy: Hacer la búsqueda a través de un proxy
  • proxyList: Array con proxies. Hacer la búsqueda a través de uno de estos proxies. Para cada conexión se establece con proxies que rotan
  • delay: Tiempo de espera en milisegundos entre conexiones
  • retry: Número de intentos de reconexión cuando la conexión falla.

 

Conclusión

Es un programa totalmente alpha, lo hice a mi antojo para mis necesidades pero si queréis meterle mano acepto pull request de buen agrado.

[sociallocker id=1291]

$ git clone git@gitlab.com:gorkamu/serpaso.git

O puedes descargártelo desde aquí directamente.

[/sociallocker]

Hala ya me diréis opiniones.

[xyz-ips snippet=”FAQS-GORKAMU-TW-YELLOW”]

 

Cómo instalar Git e iniciarse en los mundos del versionado

Si en tu día a día te dedicas a desarrollar software seguro que conoces Git, espero por tu bien, si no te suena de nada bueno… no te preocupes porque te voy a explicar qué es y cómo puedes instalar Git en tu máquina.

En el desarrollo a nivel serio tenemos que asegurarnos de alguna forma que el código que estamos produciendo esté guardado en algún servidor para que si un día nuestro ordenador muere podamos volver a acceder a el fácilmente.

Vamos, un servidor de backups diría alguno….

Si, pero con mas cosas.

Estos servidores son llamados como servidores de control de versiones y permiten llevar un control exacto sobre los cambios en los ficheros que ahí se guardan.

Da igual el tipo de archivo que subas ahí (algunos no se aconsejan) que podrás ver el histórico de… si se ha añadido algo nuevo… se ha borrado algún fichero… otro compañero ha modificado parte de un documento… etc…

¿Se entiende no?

Pues este tipo de servidores se configuran con cierto software. En el mercado existen muchas opciones pero el que ya se ha convertido casi en un estándar es Git y hoy vamos a aprender a usarlo.

 

¿Qué es Git?

Aunque ya te lo he explicado antes hablando de los servidores VCS…

Según la Wikipedia:

Git (pronunciado “guit”​) es un software de control de versiones diseñado por Linus Torvalds, pensando en la eficiencia y la confiabilidad del mantenimiento de versiones de aplicaciones cuando éstas tienen un gran número de archivos de código fuente. Su propósito es llevar registro de los cambios en archivos de computadora y coordinar el trabajo que varias personas realizan sobre archivos compartidos.

 

Primer paso: Instalar Git

Lo primero que tienes que sabes es que Git es un programa puramente de consola, de terminal, de línea de comandos… como quieras llamarlo pero de esa ventanita negra con solo letras.

terminal de comandos

Así que, si estas empezando a programar ves quitándote el miedo ella porque la vas a tener que utilizar si o si.

Voy a decir también que existen programas de escritorio que añaden una capa gráfica, visual y por encima de Git que tal vez a los mas novatos les funcione.

Pero es mejor trabajar cuanto antes desde la línea de comandos.

Así que….

 

Cómo instalar Git en Linux

Si tu ya tienes alguna distribución basada en Linux instalada en tu máquina mi enhorabuena. Ya has hecho un gran paso para perderle el miedo a la terminal de comandos.

Imagino que si estas leyendo esta parte es por que tienes un Ubuntu así que voy a poner el ejemplo de instalar Git en Linux sobre esta distribución pero si tienes otra por ejemplo que este basada en Debian, por ejemplo Mint, no te costará tampoco mucho esfuerzo.

Tenemos que abrir la terminal de comandos. Desde el mismo Dash buscando por terminal o desde el Escritorio y pulsando Control, Alt, T (ctrl + alt + t) podremos abrir la consola y empezar a jugar a ser juanquers.

 

Soy programador

 

Una vez que tengamos la consola abierta tenemos que escribir lo siguiente:

sudo apt-get update

Este comando lo que hace es actualizar el repositorio de paquetes disponibles. Es decir, las referencias que le dicen dónde esta el software que queremos instalar.

Cuando se haya actualizado ya podemos instalar Git en Linux escribiendo lo siguiente:

sudo apt-get install git

Déjalo que se vaya instalado solo y cuando acabes ya podremos empezar a usar Git como un loco.

Puedes comprobar que se ha instalado correctamente Git comprobando la versión.

Si ejecutas la siguiente línea:

git version

Te debería salir lo siguiente:

Comando Git version
Comando Git version

Cómo instalar Git en Mac OS X

Es muy posible que ya lo tengas instalado. Algunas versiones de OS X ya viene con Git instalado por defecto, junto a otras herramientas.

Pero en caso de que no lo tengas instalado al ser un sistema operativo basado en UNIX, su proceso de instalación es igual de sencillo que cuando se instala en Linux.

O incluso mas!

Entra en esta dirección https://git-scm.com/download/mac y comenzará a descargarse el paquete instalador.

Cuando lo tengas abierto lo demás es ya Siguiente > Siguiente > Siguiente.

instalar git en mac

Una vez que se termine de instalar podemos comprobar que todo el proceso ha ido bien escribiendo:

git version

Pero también podemos instalar git de otra forma y es desde la terminal…

Instalar Git en Mac desde la terminal de comandos

Puedes hacerlo desde Homebrew, si no tienes esto ya instalado en tu Mac ya estás tardando porque simplifica enormemente el proceso de instalación de software.

Para instalar Homebrew que después nos ayudará a instalar Git abre la terminal y escribe lo siguiente:

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" brew doctor

Esta línea comenzará el proceso de instalación y te preguntará además que si deseas instalar las herramientas de desarrollo de línea de comandos de Apple. Instálalo todo y ejecuta la siguiente línea:

brew install git

Ya está, ya lo habrás instalado. A disfrutar!

 

Cómo instalar Git en Windows

¿Quién dice la Wikipedia que ha creado Git?

Linus Torvals, el padre de Linux. Por lo cual podemos deducir que este programa no chutará bien en Windows. Ya sea por limitación y/o arquitectura de Windows contra Linux.

Pero aun así podemos instalar Git en Windows fácilmente. Desde la propia página web de GIT nos ofrecen una herramienta con la que podemos emular comandos pensados para sistemas Unix en nuestro flamante y no-espiador Windows 10.

Git Bash se llama.

Entra en la web https://git-scm.com/download/win y automáticamente empezará descargar del ejecutable que te va a instalar Git y Git Bash, la capa de abstracción entre los dos sistemas.

Cuando lo tengas descargado, ejecútalo y lo siguiente ya es hacer click como un loco en Siguiente, Siguiente, Siguiente.

Poca configuración lleva…

instalar git en windows
Instalar git en windows

 

Elegir el directorio donde se va a instalar GIT

Addons de Git en Windows

Mas configuración

Mas configuración git

200 años mas tarde

Instalando Git en Windows

terminal de git bash

Bravo 👏👏

 

Clientes de escritorio para Git

Para que no tengas que aprender a manejar Git (no recomendado) desde la consola he recopilado un par de clientes de escritorio que a pesar de ser un buen apoyo en cuestiones de logging también nos permite hacer lo mismo que se hace desde la terminal.

Hay clientes de escritorio tanto para Windows, para Mac OS X como para Linux, pero los mejores son los siguientes:

Sourcetree

Sourcetree logoEste bicho es compatible para ordenadores tanto con Windows como con Mac.

Tiene una interfaz muy clara y muy limpia lo que lo hace ideal para los que están empezando con el control de versiones aunque también es realmente útil para la gente que ya domina Git.

Puedes usarlo tanto para Git como para Mercurial (otro tipo de software de control de versiones) y entre sus ventajas tenemos:

  • Soporte para ficheros grandes
  • Integración con Git-flow
  • Soporte para submódulos en la administración de proyectos
  • Búsqueda en el local stage de commits

sourcetree atlassian

Por estas y otras razones junto a que es un programa totalmente gratuito lo recomiendo como una de las mejores opciones para Windows. Pero no para Mac, que tiene cosas mejores.

Puedes descargar Sourcetree desde aquí.

Github Desktop

Github Desktop logoAunque personalmente no lo he probado ya entrar en la web hace que te den ganas de bajártelo.

Tanto la web como el programa tiene un diseño realmente cuidado sabiendo diferenciar lo que es muy bien la parte del git log y su histórico de la parte de revisión de código.

Es otro de los programas que también van a funcionar tanto en Windows como en Mac.

A parte de integrar todas las funciones que integra cualquier otro cliente de escritorio de git, un punto a favor que le he visto es que en cada commit se integra el resultado de los tests de Integración Continua.

programa github desktop

Puedes descargarlo desde aquí y es gratis también.

Si quieres ver como han construido este programa puedes hacerlo desde su repositorio de Github.

GitKraken

gitkraken logo

La corona entre el hypeo maquetero.

Pese a ser un programa multiplataforma y encontrarse tanto en Linux como en Mac como en Windows, no se por qué pero una gran cantidad de usuarios de Mac sólo utilizan este programa…

La verdad es que este software si que te entra por la vista muy fácilmente ya que su diseña está cuidadísimo en extremo.

Tiene una versión gratuita para usos no comerciales y otra de pago para empresas. La verdad es que se entiende tanta emoción alrededor de este programa simplemente por los partners que tiene detrás .

Hay compañías como Lego, Tesla, Google o Amazon que están usando sus soluciones así que es una buena garantía de uso.

gitkraken

Podeis descargarlo desde aquí.

 

Conclusiones

Con todo lo que hemos visto ya tendríamos suficiente para poder instalar git en cualquier sistema operativo y comenzar a usarlo con nuestros proyectos.

Otra cosa ya es cuando entremos en el uso de sistemas distribuidos de git como cuando alojamos nuestros proyectos en Github o Bitbucket, pero para comenzar a tirar comandos de git con esto ya tienes de sobra.

Durante el artículo he dejado claro que soy un usuario pro-terminal siempre. He tenido, tengo y tendré clientes de escritorio de git toda mi vida, pero ahí se quedan cogiendo polvo porque no los uso.

Haz el esfuerzo y aprende a utilizar git desde la consola.

Sus ventajas son muchísimas.

Pero si aun así no te sientes seguro o prefieres hacerlo con una interfaz gráfica tira hacia GitKraken, es el mas bonito de todos.

Al fin y al cabo con todos puedes hacer lo mismo.

GitKraken es fantasía pura.

magic

Utilizando contenedores Docker con Nodejs

Seguimos con los artículos dedicados al desarrollo de aplicaciones haciendo uso de javascript del lado del servidor. En este post vamos a ver cómo podemos aprovecharnos de la tecnología de contenedores Docker con NodeJs.

En un artículo anterior ya hice una comparativa entre Docker y Vagrant pero para el que venga de nuevas y antes de entrar en materia tenemos que conocer qué es Docker.

Según la Wikipedia:

Docker es un proyecto de código abierto que automatiza el despliegue de aplicaciones dentro de contenedores de software, proporcionando una capa adicional de abstracción y automatización de Virtualización a nivel de sistema operativo en Linux.

¿Eing?.. ¿Se te ha quedado cara de bobo tras leer eso? No te preocupes que voy a tratar de explicarte qué es Docker desde otra aproximación.

Imagina que puedes construir toda una aplicación funcional, con sus librerías, assets y dependencias de manera aislada.

Esta aplicación siempre te va a funcionar en cualquier ordenador en el que esté alojada. Ningún conflicto mas entre versiones ni librerías perdidas.

Olvídate de eso.

Tu metes tu aplicación en una cajita y te aseguras que dejes donde dejes esa cajita siempre va a funcionar.

Pues algo así es Docker y así es cómo nos ayuda.

Nos permite aislar los componentes de la aplicación del resto del sistema operativo asegurándonos que siempre va a funcionar.

Obviamente el uso de Docker está muy ligado tanto a entornos de desarrollo como a despliegues de aplicaciones, pero ahora que ya tienes una idea aproximada de qué son estos contenedores vamos a ver cómo podemos usar Docker con Nodejs.

Aprender a usar Docker con NodeJs

La finalidad de este ejemplo va a ser enseñarte como conseguir que tu aplicación NodeJs corra dentro de un contenedor Docker. Nos vamos a centrar bajo la óptica del entorno de desarrollo no en la de despliegue en producción así que si usas este ejemplo para hacer una subida a producción y peta luego no quiero represalias 😛

Podríamos utilizar el ejemplo que hemos venido desarrollando en artículos anteriores sobre cómo construir una aplicación NodeJs pero como el fin último de este articulo es aprender a configurar Docker con NodeJs vamos a crearnos una aplicación pequeñita desde cero.

Docker nos va a permitir empaquetar toda nuestra aplicación junto con sus librerías y dependencias en una unidad estandarizada y atómica, esto es lo que se conoce como contenedor docker.

Otro concepto importante del universo docker que hay que conocer son las imágenes y esto es el software que se va a cargar dentro del contenedor previamente creado.

Creando una aplicación NodeJs

Lo primero de todo, créate en tu workspace un directorio para la aplicación. Al mío yo le he llamado directorio_para_aplicación_nodejs_guay_con_docker. ¿Bastante intuitivo no creéis?

Bien, en este directorio residirán todos los ficheros de tu aplicación pero el primer fichero necesario para empezar es el package.json el cual sirve de descripción de tu aplicación y de todas sus dependencias.

Bien, una vez hecho esto vamos a crear el fichero que definirá la aplicación web haciendo uso del framework Express. Esto es, el fichero server.js.

A continuación vamos a ver cómo podemos crear esta aplicación tan tonta dentro de un contenedor de Docker usando para ello la imagen oficial aunque antes de eso es necesario que creemos la imagen Docker de la aplicación.

Creando el fichero Dockerfile

En el mismo directorio en el que hemos puesto los dos ficheros anteriores, vamos ahora a crear uno nuevo que se llame Dockerfile.

Este fichero contendrá las instrucciones necesarias para que Docker sepa cómo ha de construir la imagen que albergará la aplicación NodeJs.

Este fichero se ve tal que así:

Pero vamos a ir paso a paso:

  • La primera línea indica que tipo de imagen queremos construir. En este caso estamos haciendo uso de la versión de largo soporte (LTS) de argon para NodeJs. Puedes ver otras imágenes desde Docker Hub.
  • Las siguientes líneas le dicen a Docker que tiene que crear un directorio bajo /usr/src/app (hablando siempre desde dentro del contenedor) y establece este path como su directorio de trabajo
  • Después se le dice a Docker que copie el fichero de definición de la aplicación NodeJs (package.json) al directorio de trabajo creado en previamente y que ejecute las dependencias que tiene la aplicación. Al usar node:argon (primera línea) ya tenemos disponible NPM y NodeJs.
  • Ten presente que en lugar de copiar todo el directorio de trabajo tan solo estamos copiando el fichero package.json dentro del contenedor. Esto nos permite aprovecharnos de las diferentes capas cacheadas de Docker. Si quieres profundizar un poquito mas y saber que carajos son estas capas cacheadas échale un vistazo a este artículo.
  • La siguiente línea o instrucción le dice a Docker que copie todo el directorio de fuera del contenedor al directorio de dentro del contenedor. Es decir, en este ejemplo solo copiará el fichero server.js pero si tu aplicación tuviera mas cosas las copiaría todas pa’ dentro.
  • También tenemos que exponer un puerto a través del cual se comunicará el mundo exterior con nuestro contenedor. Es típico poner siempre el puerto 8080 aunque puedes elegir el que mas te guste siempre y cuando no esté dentro de los Well-Know Ports.
  • Por último pero no menos importante, hay que definir el comando a ejecutar a través de la terminal para nuestra aplicación. En el ejemplo usamos el inicio típico y básico de una aplicación NodeJs el cual ejecutará el fichero server.js.

Poh’ ya está. Con esto ya tenemos definido el fichero que dará vida a nuestra imagen Docker.

Construyendo nuestra imagen

Para ello vamos a ir al directorio en el que tenemos el fichero Dockerfile y ejecutaremos en una terminal el siguiente comando para que Docker construya la imagen Docker con Nodejs.

docker build -t node-web-app .

El parámetro -t del comando anterior te permite darle un nombre a la imagen por lo que es mas fácil después encontrar la imagen al hacer uso de docker images. A nuestra imagen la hemos llamado node-web-app, también muy original… xD

Al listar las imágenes disponibles con docker images tendríamos que ver lo siguiente:

$ docker images

# Example
REPOSITORY                      TAG        ID              CREATED
node                            argon      539c0211cd76    3 weeks ago
node-web-app                    latest     d64d3505b0d2    1 minute ago

Corriendo nuestra imagen Docker

Aquí hay varias opciones de configuración al correr una imagen que puedes consultar en la documentación oficial de Docker pero para no liarnos mas ejecuta el siguiente comando:

$ docker run -p 49160:8080 -d node-web-app

La opción -d le indica a Docker que tiene que ser ejecutado en modo detached, esto es, que corra el contenedor en segundo plano. Por otro lado, la opción -p lo que permite es redirigir todas las consultas desde un puerto público hasta el puerto privado del contenedor que hemos definido en el fichero Dockerfile.

En este caso estamos mapeando el puerto 49160 con el puerto 8080.

Una vez hayas ejecutado el comando anterior ya tendrás tu contenedor Docker con NodeJs corriendo satisfactoriamente y podrás acceder a tu aplicación a través de http://localhost:49160

Si hacemos una petición curl a la url anterior obtendremos lo siguiente:

$ curl -i localhost:49160

HTTP/1.1 200 OK
X-Powered-By: Express
Content-Type: text/html; charset=utf-8
Content-Length: 12
Date: Sun, 02 Jun 2013 03:53:22 GMT
Connection: keep-alive

Que pasa gandul!

Como veis ya tenemos nuestra aplicación corriendo. Ha sido facilísimo configurar Docker con NodeJs pero por si acaso alguno tiene dudas o se ha liado en algún punto y me quiere preguntar algo hacedlo por favor en la sección de comentarios o en twitter a través del siguiente banner.

[xyz-ips snippet=”FAQS-GORKAMU-TW-YELLOW”]

Hasta la vista chumachos!

Cómo hacer una API REST con Node.js

En artículos anteriores hemos visto cómo hacer la primera configuración de las herramientas que vamos a instalar así como a organizar nuestro proyecto utilizando el patrón Modelo-Vista-Controlador. Pues bien, hoy toca entrar en materia y vamos a comenzar a hacer una API REST con Node.js.

Un primer paso necesario para seguir estudiando Node.js y una buena base para que después podamos crear una aplicación SPA, o consultar la API desde un proyecto Symfony o para hacer que nuestra aplicación móvil pueda explotar esos datos oooo yo que sé…. las posibilidades son infinitas así que empecemos!

Cómo hacer una API REST con Node.js

A lo mejor a mas de uno esto de hacer una API REST con Node le suena a chino así que lo mejor que podemos hacer es ver primeramente qué es eso de una API REST.

¿Qué es una API REST?

Pues es lo que se conoce como una interfaz de comunicación entre clientes que utilicen el protocolo HTTP. Para que se entienda, es el canal por el cual tu móvil le dice a los servidores de Clash Royale que has abierto un cofre y te ha tocado el mago eléctrico o por ejemplo es el canal que utiliza Instragram para subir las fotos que haces con tu smartphone a sus servidores.

¿Se entiende el concepto?

Hoy en día podemos encontrar usos de APIs en casi toda cosa tecnológica que nos imaginemos pero el concepto de API no es nuevo ya que hace años existía otro tipo de APIs que parecía ser el rey del desarrollo. Hablo de SOAP y su intercambio de datos mediante XML. Hasta que debido a su facilidad llegaron las API REST y el intercambio mediante JSON.

Principalmente con una API REST vamos a echar mano de lo que se conoce como verbos HTTP. En concreto 4 y cada uno de estos verbos los utilizaremos para una acción u operación diferente con los datos que queremos manipular.

Así pues:

  • Cuando queramos subir una imagen nueva a Instragram utilizaremos el método POST del protocolo HTTP.
  • Cuando queramos saber cuántos seguidores tenemos en Twitter utilizaremos el método GET del protocolo HTTP.
  • Cuando queramos eliminar nuestro último estado de Facebook utilizaremos el método DELETE del protocolo HTTP.
  • Cuando queramos actualizar la foto de perfil de Snapchat utilizaremos el método PUT del protocolo HTTP.
  • Cuando queramos ver la lista de seguidores de VK utilizaremos el método GET del protocolo HTTP.

Hasta aquí esto es lo mínimo que podemos hacer con una API REST pero si quieres saber mas te recomiendo que le eches un vistazo a este artículo en el que se explica muy bien toda esta película, que nosotros nos vamos a poner a hacer ya una API REST con Node.js 😀

Cuatro verbos para dominarlos a todos

¿Os acordáis de la aplicación sobre álbumes musicales que empezamos a crear en los artículos anteriores? Si no te acuerdas o todavía no los has visto retrocede un poquito en el tiempo desde este enlace y desde este y cuando los hayas terminado vuelve aquí para seguir con la API REST con Node.js

Pero para el que si que se acuerde mediante el patrón MVC llegamos a organizar los ficheros de nuestro proyecto de una forma lógica y funcional ¿no?

También te acordarás de que hicimos un pequeño controlador para probar ¿no? De hecho llegamos a definir los métodos mínimos que tiene que tener nuestra API pero la gran mayoría de estos métodos lo único que hacia era recibir los datos de la request y devolverlos en la response. No había lógica de negocio alguna.

Pues ha llegado el momento de darle cuerpo a esos métodos 🙂

Método GET, consultar datos en una API REST con Node.js

Este es el primer verbo que vamos a ver de nuestra API REST con Node.js y es que tiene dos aplicaciones. Por un lado podemos utilizarlo para que nos devuelva un listado de elementos y por otro lado si le pasamos un identificador (lo mas normal debido a su unicidad) obtendremos los datos de un solo registro.

Aclaro que no es necesario pasar un id, podemos pasarle cualquier parámetro aunque en los métodos tipo getBy lo mas normal es pasarle el identificador.

Fijaos, aquí tenemos el ejemplo de estos dos métodos GET de la API y que nos devolverán ya sea un elemento o varios elementos. Pero hay varias cosas importantes que explicar:

  1. Hay que incluir el modelo, eso se hace en la primera línea del código anterior mediante un require.
  2. Mediante la sentencia req.params.id de la linea 4 estamos accediendo al valor que le pasamos a la ruta como parámetro.
  3. En la línea 6 encontramos el método findById() que es definido por el ORM de Mongoose y que nos provee de una capa de abstracción para explotar datos. Este método acepta el identificador que ha de buscar y una función de callback.
  4. Línea 20 encadenamos el método find() y el método de ordenación sort(). Si al método find() no le pasamos ningún argumento tan solo un objeto vacío por defecto nos sacará todos los registros de ese modelo de nuestra base de datos. Por otro lado, el método sort() espera un argumento por el cual ordenar el listado.

Estos dos métodos de nuestra API matchearán con las siguientes rutas (recuerda, has de tenerlas definidas)

Método POST, guardar datos en una API REST con Node.js

Bien, el siguiente método que vamos a construir es el que se encarga de guardar datos y va a ir por POST.

  • Si antes accedíamos a los argumentos pasados por GET en la ruta mediante la sentencia req.params.id, ahora para obtener los valores pasados por el método POST tenemos que hacer uso de la sentencia req.body (línea 3)
  • Seteamos los valores de la instancia del modelo con lo que nos ha traído la petición POST de la línea 5 a la línea 8.
  • Hacemos uso del método definido por Mongoose save() para guardar estos datos. Este método acepta una función de callback que recibirá el error en caso de producirse o el objeto ya almacenado.
  • Lo demás es hacer unas comprobaciones mínimas para asegurar la integridad de los datos y a correr 🙂

Método PUT, actualizar datos en una API REST con Node.js

Este es el método de nuestra API que se va a encargar de actualizar datos.

  • Va a recibir los datos a actualizar mediante POST (línea 2)
  • Va a recibir el identificador del objeto a actualizar mediante GET, a través de la URL (línea 3)
  • El método findByIdAndUpdate() nos es provisto por el ORM Mongoose y acepta el identificador del objeto a actualizar, los datos a actualizar y una función de callback con el error (si es que hay alguno) y el objeto ya actualizado.

He de aclarar que gracias al middleware body-parser y que ya aprendimos a instalar en los artículos anteriores, todo lo que nos llegue por POST es transformado en objeto automáticamente, así podemos manipular los parámetros de una forma bien sencilla.

La URL definida para este método ha de ser de la siguiente forma:

Método DELETE, borrar datos en una API REST con Node.js

El último método del CRUD de nuestra API REST con Node.js es el método que se va a encargar de borrar y que funciona a través del método DELETE del protocolo HTTP.

  • Este método aceptará un único argumento que se pasa por la URL (el identificador del objeto) y que recogemos mediante la sentencia req.params.id (línea 2)
  • Gracias al ORM Mongoose podemos hacer uso del método findById() para encontrar el objeto que coincida con el identificador pasado por parámetro (línea 4).
  • Gracias al método remove() podemos eliminar el objeto solicitado (línea 9)

Con esto ya tenemos los 5 métodos necesarios para que el CRUD de nuestra API REST con Node.js funcione pero claro, necesitamos un modelo de datos para que transforme los datos que recibimos en objetos que podamos manejar mas facilmente.

Ademas que realmente el modelo es necesario para que corran los códigos anteriores…. 😛

Ea ahí tenéis el modelo de datos. Ese fichero ha de situarse en el directorio de models según la definición del patrón Modelo-Vista-Controlador y que aprendimos en el artículo anterior.

Vale Gorka, ya hemos aprendido a construir una API REST con Node.js perfecto, pero ahora… ¿cómo la probamos?

Pueeees para probar la API vamos a hacer uso de una extensión muy buena que se llama Postman y que podemos descargar desde aquí si utilizas Chrome.

He grabado un vídeo para que veáis cómo se usa.