Truco para ocultar el Theme de WordPress

¿Os gustaría saber cómo ocultar el theme de wordpress en menos de 5 minutos? Pues ale continúa leyendo…

¿Cuantas veces no habrás visitado una web o un blog que te flipaba el diseño y has sido incapaz de conocer que tema estaba usando? A mi desde luego muchas veces porque hay muchas páginas que tienen un diseño brutal y como es normal nos gustaría copiar ese diseño para adaptarlo 😛

Todo este dolor y sufrimiento acabó cuando descubrí esta web. Con ella, puedes saber que tema y que plugins utiliza una web. A nivel de SEO BlackHat esta “ingeniería inversa” junto con los registros Whois están muy bien porque nos ayudan mucho a conocer mas información sobre una web, pero no hay que olvidar que el Data Leaking es un problema muy importante de la vida digital y que muchas veces ocurre por malas configuraciones.

Pues bien, si entramos en la web y buscamos un sitio que sepamos que tiene instalado un WordPress podremos ver automáticamente los plugins que tiene instalado y el tema que usa. La manera mas fácil de saber si un sitio tiene instalado WordPress es mirar de dónde vienen las imágenes. Me explico, si inspeccionamos una foto de la web y vemos su ruta, desde donde se carga, sabremos que utiliza WordPress si la ruta contiene wp-content en ella.

Ruta de una foto
Ruta de una foto

Esto no siempre va a ser así por que por ejemplo una web que tenga que soportar mucho tráfico podría tener los activos en un CDN o utilizar sistemas de caché avanzados, enmascaramiento de rutas o simplemente haber configurado otro directorio para almacenar las imágenes como veremos mas adelante pero esta es una buena y rápida aproximación para hacer una primera criba de pruebas.

Bueno, pues la web de Alberto Garzon nos dice que utiliza un tema de 59 pavos y que ha instalado W3 Total Cache y WordPress SEO by Yoast, vamos, plugins típicos en WordPress aunque no quiere decir que sean los únicos que tenga instalado, sino los únicos de los que se ha podido rastrear información.

El webmaster de Alberto Garzón no saber ocultar el theme de wordpress.
El webmaster de Alberto Garzón no saber ocultar el theme de wordpress.

Y es que las cosas van de Albertos porque a diferencia del webmaster de Alberto Garzón, el webmaster de Albert Rivera ha sabido ocultar el theme de wordpress que utilizan o al menos en parte ya que al hacer una búsqueda de su web podemos ver lo siguiente:

Tema de Albert Rivera
Tema de Albert Rivera

El tío sólo le ha cambiado el nombre del tema y a quitado el screenshot del tema. Toma ya esa si que es una buena forma para ocultar el theme de wordpress. Ah y utiliza el plugin de Instagram Feed, tal vez lo utilice para su red de bots :P.

Bueno pues bien por el, pero para evitar este tipo de cosas en nuestras webs vamos a aprender a ocultar el theme de wordpress y para ello vamos a tardar menos de 5 minutos y si no que me parta un rayo!

Por cierto, tienes curiosidad por saber que tema utilizo? Pues corre, ve a comprobarlo 😉

Cómo ocultar el tema de wordpress

Pero no te lo voy a dar todo mascadito, piensa un poquito que es muy fácil. ¿Qué es un tema o theme? No es mas que un conjunto de ficheros que dan el aspecto y la estructura a una web, así que a bote pronto, qué fichero podría tener toda esta información que se está fugando?

Si todavía no lo has descubierto será mejor que lo averigües compartiendo el post en las redes, ya sabes, un tweet o un fb y te desvelo el truco para ocultar el theme de wordpress 😛 jejeje

[sociallocker id=”1217″]

Para ocultar el theme de nuestro WordPress tenemos dos formas de hacerlo a las que yo he llamado…

Las dos técnicas legendarias
Las dos técnicas legendarias

El camino del ligero colibrí

Como un pequeñito colibrí que coge el polen sin apenas alterar el entorno, nosotros vamos a modificar la descripción de nuestro tema sin que WordPress llegue casi a enterarse, todo muy clínico.

Entramos en nuestro WordPress y nos dirigimos a la parte de Apariencia. Allí hacemos click en Editor y podremos ver la disposición de todos los ficheros que componen nuestro tema. Pues bien, tenemos que buscar la hoja de estilos que en el 99% de los casos se llamará style.css

Estilos de un tema
Estilos de un tema

Si os fijáis bien al principio del fichero hay un bloque de comentarios con diferente información, pues bien es esa información la que tenemos que cambiar para modificar la descripción de nuestro tema o borrarla para de una manera “definitiva” ocultar el tema de wordpress. Los campos más importantes son:

  • Theme Name: Nombre único y público del tema.
  • Theme URI: Página web de la landing page de venta del tema.
  • Author: Nombre del amigo que todos tenemos que una vez robo un ejemplar del jueves cuando era un crío.
  • Author URI: Página web del amigo del jueves.
  • Description: Descripción sobre tu tema.
  • License: Tipo de licencia escogida para el tema

Con cambiar esta información y borrar caché ya tendremos la información de nuestro tema oculta. Luego la imagen tendremos que ponerla dentro del directorio de tu tema bajo el nombre de screenshot.png.

El sendero del elefante

Esta es la forma más bruta e intrusiva de hacer este truco y consiste en llegar y arrasar con todo como lo hace una manada de elefantes. Una violación fría de un sistema sin guantes de látex ni vaselina.

No, tan sólo nos conectaremos por FTP utilizando Filezilla para ello. xD

Directorio del tema de wordpress
Directorio del tema de wordpress

Cuando os conectéis y esteis en la raíz de vuestro hosting si vais a /www/wp-content/themes/nombreDetuTema/ allí vais a encontrar la hija de estilos del tema, el styles.css.

Pues eso, que podéis descargarlo y editarlo, cambiar lo que os de la gana y volver a subirlo y ale ya habéis conseguido ocultar el theme de wordpress.

[/sociallocker]

Aunque claro, siempre hay otras formas que tal vez deberíamos tomar para ocultar que nuestro sitio lo hemos montado utilizando un WordPress. Nunca esta de más prevenir la fuga de datos y en un par de minutos con “cuatro” configuraciones podemos hacer ya mucho como por ejemplo:

Borrar la categoría en todas tus Urls

Podemos borrar el rastro de la categoría en las urls de nuestro blog, luego acordaos de hacer una re-dirección de la antigua url a la nueva para que no tengáis problemillas con vuestro SEO. Esto lo haremos editando el fichero .htaccess y poniendo la siguiente regla:

RewriteRule ^category/(.+)$ http://tudominio.com/$1 [R=301,L]

Otra técnica que podemos utilizar para ponérselo un poco más difícil a los cotillas es…

Cambiar la carpeta de subida de ficheros

En WordPress por defecto esta carpeta se encuentra en /wp-content/uploads/ y después en función de como tengáis configurado vuestro blog podréis tener tantas carpetas como años publicados y dentro de ellos los meses y ficheros subidos según su fecha de subida.

Bien, pues para cambiar la configuración de la carpeta de subida de ficheros tenemos que editar el wp-config.php y poner el siguiente define:

define('UPLOADS', 'wp-content/loquetedelagana');

Y ya está.

Acciones como esta te vas a encontrar con muchas mas y por eso si las aplicásemos todos haríamos un mega blog ninja del que nadie sabría que es, solo que esta ahí.

Paranoia a parte, lo interesante del truco de ocultar el theme de wordpress, es lo que está oculto bajo los botones sociales, ahí esta la verdadera chicha así que ya sabéis lo que tenéis que hacer, compartid el artículo en vuestras redes sociales y ya podréis aplicar el truco de ocultar el tema en todos vuestros blogs.

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

 

Por otra parte ya habéis visto el banner, he abierto ese canal a través de Twitter para que me preguntéis lo que os de la gana y así hago un post contestando a todo. Ale, dudas a Twitter 😉

Que os den!

Anuncios

Cómo embeber Youtube en una aplicación Ionic

Que pasa churritas?

Hoy vengo con un post técnico y corto, una chuleta de referencia en el desarrollo de aplicaciones móviles hechas con el framework Ionic. Anteriormente, en otros posts ya he hablado de este framework.

Si todavía no sabes qué es o no has empezado a juguetear con el puedes leerte este post sobre cómo crear una app con Ionic, si ya has hecho algo puedes leer otro post un poco mas técnico sobre cómo consumir un webservice desde AngularJS.

En cualquier caso, en este post vamos a ver cómo embeber un vídeo de youtube en una aplicación móvil hecha con Ionic y lo más importante, que funcione cuando hagamos el build de la app y la distribuyamos en el market.

Cómo embeber youtube en una aplicación Ionic

Hago este post porque en uno de los últimos desarrollos que estoy haciendo tuve que insertar el iframe de Youtube en la aplicación móvil y vale, lo lógico parece insertar el código que nos da el mismo Youtube cuando vemos un vídeo dentro del html de nuestra aplicación Ionic y a correr.

Si hacemos esto obviamente nos funcionará cuando estamos desarrollando y al haer un ionic serve para ver la aplicación en el navegador podremos disfrutar sin ningún tipo de restricción del vídeo de Youtube. Esto es porque al estar en local y con conexión directa a Internet no hay ningún problema en realizar dicha conexión a Youtube pero el problema viene cuando intentamos seguir este mismo paso una vez que ya hemos empaquetado y firmado la aplicación y la ésta ya se encuentra instalada en un dispositivo.

Iframe de Youtube en HTML

Y es que Android tiene unas políticas de seguridad que por defecto bloquea todas las conexiones saliente que realice tu app a no ser que indiques lo contrario.

Pues bien, para poder llevar a cabo esto y dar permisos de conexión a Youtube a nuestra app tenemos que hacer varias cosillas:

  • Instalar el plugin cordova-plugin-whitelist
  • Hacer un filtro trusteer
  • Dar estilos

Instalando el plugin de Whitelist

Según su documentación oficial:

Listas blancas de dominio es un modelo de seguridad que controla el acceso a dominios externos sobre los cuales su aplicación no tiene ningún control. Cordova ofrece una política de seguridad configurable para definir los sitios externos pueden accederse. De forma predeterminada, nuevas aplicaciones están configurados para permitir el acceso a cualquier sitio. Antes de su aplicación a la producción, debe formular una lista blanca y permitir el acceso a la red específica dominios y subdominios.

Ya estes haciendo la aplicación con Apache Cordova o con el framework Ionic, tendrás que indicarle a la app los dominios a los que quieres dar permiso para hacer una conexión saliente, esto se hace definiendo la política de acceso en el fichero config.xml de la siguiente manera:

<access origin="http://youtube.com">

En cualquier caso, para instalar este plugin con ejecutar el siguiente comando será mas que suficiente:

ionic plugin add https://github.com/apache/cordova-plugin-whitelist.git

Bien, el siguiente paso es crear un filtro que haga de Trusteer con los dominios a utilizar.

Hacer un filtro que haga de Trusteer con los dominios a utilizar xD

Este es el código que utilizaremos para hacer el filtro trusteer:

.filter('trustAsResourceUrl', ['$sce', function($sce) {
    return function(val) {
        return $sce.trustAsResourceUrl(val);
    };
}]);

Cómo veis, utilizamos el objeto $sce. Realmente $sce es un servicio que nos provee de un mecanismo para darle a AngularJS los bindings necesarios en un contexto concreto los valores que han de ser marcados como seguros para ese contexto. El contexto en este caso es la aplicación y el valor del binding es Youtube por lo que con esto le estamos diciendo a AngularJS que Youtube es un origen confiable y seguro para nuestra aplicación.

Dándole estilos al reproductor de Youtube

Por último para que el iframe sea totalmente responsive en nuestra aplicación tenemos que darle ciertos estilos porque sino a lo mejor en un dispositivo de 5 pulgadas se ve de puta madre pero cuando pasamos a una table de 10 pulgadas el reproductor se va a la wea. Así que copiad los siguientes estilos:

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Y con esto es todo, si has seguido el tutorial al pie de página ya serás capaz de embeber vídeos de Youtube en tus aplicaciones Ionic/AngularJS pero recuerda que el servicio $sce no solo funciona con Youtube, funciona con cualquier origen que indiques, no es algo exclusivo del gigante de contenidos multimedia.

En un par de días liberaré el código de la aplicación que decía que estaba haciendo y en la que utilizo el servicio $sce y los iframes de Youtube para que podáis echarle un vistazo.

En cualquier caso, si te has liado con el post o tienes cualquier duda puedes utilizar este banner para preguntarme a través de Twitter.

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

Y sin más…

Hala a cascarla!!

Hacer un vhost en un Nginx sobre Vagrant

Qué pasa chumachos? Tenéis ganas de aprender a hacer un vhost sobre servidores Nginx? Si? Pues allá vamos.

Hoy os vengo con otro post técnico. En este artículo veremos cómo hacer un vhost en un servidor Nginx montado sobre un Vagrant. Toma ya menudo jaleo de palabras xD. Si las conoces y no estas con cara de WTF continúa leyendo.

Lo primero que necesitaremos será tener instalado Vagrant. Pero para el que no lo sepa, vamos a ver qué es Vagrant y qué dice su documentación oficial:

Create and configure lightweight, reproducible, and portable development environments.

O dicho de otro modo, con Vagrant montaremos una máquina virtual en la que tendremos instalado un servidor web (Nginx), PHP, Mysql y el resto de software que nos haga falta.

Para instalar Vagrant solo nos tenemos que venir a la página de descargas y seleccionar el paquete que necesitemos para nuestros sistemas operativos. En mi caso elegí el paquete para arquitecturas de 64 bits con Debian. Esto te descarga un .deb con el que instalar Vagrant de forma super sencilla mediante el Gestor de Software de Linux.

Siguiente paso, instalar VirtualBox, pero…

¿qué es VirtualBox?

Pues VirtualBox es el software que vamos a utilizar para montar esa máquina virtual en la que desplegar el entorno de desarrollo. También hay otro software para la creación de máquinas virtuales como por ejemplo Vmware, pero para hacerlo funcionar bien sin problemas con Vagrant usaremos VirtualBox.

Para descargar VirtualBox os tenéis que venir a la página de descargas y buscar el binario que necesitéis o que os pida vuestro ordenador por eso que es muy importante que conozcáis la arquitectura que tengáis.

Una vez que ya tengáis instalado VirtualBox y Vagrant instalado os podéis clonar esta vagrant-box que ya viene preparada para desarrollar plugins y temas para WordPress. Este es el software que trae la máquina:

  • Ubuntu 14.04 LTS (Trusty Tahr)
  • WordPress Develop
  • WordPress Stable
  • WordPress Trunk
  • WP-CLI (master branch)
  • nginx (mainline version)
  • mysql 5.5.x
  • php-fpm 7.0.x
  • memcached
  • PHP memcache extension
  • PHP xdebug extension
  • PHP imagick extension
  • PHPUnit
  • ack-grep
  • git
  • subversion
  • ngrep
  • dos2unix
  • Composer
  • phpMemcachedAdmin
  • phpMyAdmin (multi-language)
  • Opcache Status
  • Webgrind
  • NodeJs
  • grunt-cli
  • Mailcatcher

Con esta máquina solo te tienes que preocupar de levantarla y liarte a programar. Fin.

Trabajar con Vagrant

Comando para hacer un vhost en una box de Vagrant

Pues venga, vamos a levantar la máquina y configuramos todo, con vagrant up hacemos precisamente eso. Mientras esperas a que se levante la máquina y se inicialice todo puedes irte a preparar un café porque esto tarda un ratito…

Una vez haya acabado nos vamos a conectar a la máquina mediante ssh. Vagrant mola porque tiene un comando para hacerlo, no deja de actuar como un alias asi que guay, Vagrant ssh. Ea, ya está.

Comando para conectarse a una box de Vagrant

Dentro de la máquina podemos navegar por el árbol de directorios y hacer cualquier cosa que hagamos en nuestro ordenador normal. Tenemos que saber que el directorio del servidor web está en /srv/www/ y allí es donde vamos a crear la carpeta para guardar nuestro proyecto. Ejecutamos:

mkdir /srv/www/gorkamu

La configuración para hacer el virtual host de nuestro proyecto “gorkamu” tenemos que ponerla en /etc/nginx/custom-sites/default.conf 

Este es un ejemplo de una configuración típica de un virtual host pensada para desarrollar para WordPress.


##########################################################
# Custom wordpress configuration
#
# These server configurations are to:
# - local.gorkamu.dev
#
################################################################
server {
    listen 80;
    listen 443 ssl;
    server_name local.gorkamu.dev *.local.gorkamu.dev ~^local.gorkamu.d+.d+.d+.d+.xip.io$;
    root /srv/www/gorkamu;
    include /etc/nginx/nginx-wp-common.conf;
}

Hala! Pues ya lo tenemos. Reiniciamos el servidor nginx con cualquiera de los siguientes comandos:

# /etc/init.d/nginx restart
# /etc/init.d/nginx reload
# service nginx restart
# service nginx reload
# nginx -s reload
# /path/to/full/nginx -s reload
# /usr/local/nginx/sbin/nginx -s reload

Si queréis saber cuales son las diferencias de utilizar un servidor Nginx o un Apache echadle un ojo a este link. muy interesante 😉

Hala, que os den!

Configurar TravisCI para que corra nuestros test

Que pasa muchachos?

Hoy vengo con un artículo que me gusta especialmente. Los que me conocen a nivel profesional ya sabrán que me encanta la integración continua, desde que me inicié con Jenkins hasta ahora que para cada proyecto que hago me preparo mi modulo de test y lo engancho con TravisCI. Las maravillas que nos brinda la integración continua nos permite tener siempre una versión depurada de nuestro código y libre de bugs. En el fondo, la integración continua, consiste en hacer un despliegue de control cada vez que vamos a subir a producción y así tenerlo todo bien testeado y probado antes de llevarnos nuestro código a un entorno real.

Como os he dicho, conocí la integración continua con Jenkins. Trabajaba en un proyecto demasiado grande en el que había configuradas varias tareas para el servidor de integración, pero para que os hagáis una idea, cuando hacíamos un pase a producción y mezclábamos la rama de staging contra master, el servidor de Jenkins se encargaba de hacer lo siguiente:

  • Cogía los scripts con la estructura de la base de datos y montaba una.
  • Cogía los scripts con los inserts e iba alimentando a la base de datos.
  • Clonaba el código fuente y minificaba archivos CSS y Javascript.
  • Pasaba un análisis Sonar para evaluar la calidad del código.
  • Hacía un primer pre-compilado temporal de la aplicación.
  • Corría los test unitarios y funcionales.
  • Preparaba la documentación.
  • Compilaba la versión definitiva para el servidor de producción.

Obviamente todo esto lo hacia en varias fases y con distintos servicios enganchados (Jenkins, Maven, Ant, Git, Sonar…), pero toda la potencia de la integración continua reside en la libertad para configurar todas las tareas que te den la gana.

Para este artículo no vamos a hacer una configuración tan complicada, nos dedicaremos a realizar una que, cuando se haga un commit en nuestro repositorio, el servidor de integración continua, de ahora en adelante TravisCI, se encargue de clonar el proyecto y ejecutar los test que tenemos en el directorio de test.

Y para ilustrar el ejemplo, vamos a montar un proyecto con las siguientes tecnologías:

  • Grunt: para el automatizado de tareas, en este caso nos interesan dos, la compresión de ficheros y el lanzamiento de la suite de test que prepararemos.
  • Uglify: para comprimir ficheros, en este caso haremos una versión minificada de nuestra librería.
  • NPM: para la gestión de dependencias.
  • jQuery: para el manejo del DOM.
  • qUnit: para la creación de test unitarios y funcionales.
  • TravisCI: para realizar el proceso de build e integración continua.
  • Github: para almacenar nuestro código fuente.

Comenzando. Instalamos NPM

Cómo he dicho mas arriba, NPM es un gestor de dependencias construido en NodeJs, por lo que necesitamos NodeJs si o si. Si aún no lo tenéis instalado en vuestro equipo lo podéis bajar desde aquí. Cuando ya lo tengáis bajado e instalado en vuestro ordenador, hay que instalar NPM y para ello hay que ejecutar en una terminal lo siguiente:

sudo npm install npm -g

Cuando acabe podéis mirar que se ha instalado correctamente comprobando su versión.

Versión de npm
Versión de npm

Y para inicializar un proyecto con NPM, tan solo tenemos que escribir npm init en una terminal y completar toda la información que nos pide para poder crear correctamente el fichero package.json.

Sobre este fichero nos encargaremos de definir el proyecto. Aquí indicamos el autor, el nombre del proyecto, licencia, repositorio público, versión, dependencias…

Además el fichero package.json será el encargado de decirle a nuestro servidor de integración continua que tareas ha de ejecutar y para ello tenemos que añadir lo siguiente:

    "scripts" : {
        "test": "grunt travis --verbose"
    },

Además, como decía, tenemos que añadir las dependencias que necesitamos en el proyecto, en este caso necesitamos grunt, qunit y uglify y para ello añadimos el bloque de devDependencies:

"devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-qunit": "^0.7.0",
    "grunt-contrib-uglify": "^0.11.0",
} 

A continuación os voy a dejar un packages.json de uno de mis proyectos para que veáis cuales serian sus opciones básicas. Podéis verlo desde mi repositorio de Github.

Definiendo nuestro fichero de tareas

Todas las tareas automatizadas que queramos llevar a cabo las tenemos que definir el fichero gruntfile.js que se situará en la raíz del proyecto pero antes de ello necesitamos instalar qunit y uglify y para ello desde la terminal vamos a hacer uso del gestor de paquetes NPM.

npm install qunit
npm install uglify-js

Al final la terminal nos tiene que escupir algo como lo siguiente:

Terminal después de instalar uglify
Terminal después de instalar uglify

Tal y como hemos indicado en nuestro packages.json, TravisCI necesita de una tarea específica para correr los test, en el packages.json la hemos llamado travis y para ello nuestro es necesario que definamos una tarea travis en nuestro gruntfile.js

module.exports = function(grunt) {
   grunt.initConfig({
    	pkg: grunt.file.readJSON('package.json'),    
    	qunit: {
            files: ['test/*.html']
    	},
    	qunit_junit: {
            options: {
                dest: '_build/test-reports'
            }
        }
   });

   grunt.loadNpmTasks('grunt-contrib-qunit');
   grunt.loadNpmTasks('grunt-qunit-junit');
  	
   grunt.registerTask('default', ['qunit_junit', 'qunit']);
   grunt.registerTask('travis', ['qunit_junit', 'qunit']);
};

Seteando nuestro fichero de TravisCI

Antes de crear nuestro fichero de configuración para TravisCI, es necesario loguearnos en la plataforma y decirle al servidor de integración qué repositorio queremos añadir. El login podemos (y deberíamos) hacerlo con github ya que es allí donde estamos dejando nuestro código.

Según la documentación de TravisCI, se necesita un fichero llamado .travis con todas las especificaciones necesarias para que sepa que hay que hacer.

Fichero de configuración de Travis
Fichero de configuración de TravisCI

Éste es un fichero de configuración mínima. En él estamos indicando que vamos a correr un proyecto construido con NodeJS y que su versión es la 0,10. Para más colmo, podemos controlar la ejecución del script indicando con la directiva before_script que instale en el servidor grunt antes de correr los test. Como he dicho esto es lo más básico que podemos poner en el fichero de configuración, sin embargo, tenemos miles de opciones mas para customizar nuestra build, puedes leerlo aquí.

El fichero de configuración ha de situarse en la raíz del proyecto con el nombre de .travis.yml y no hace falta que hagamos nada mas ya que según la documentación de TravisCI, por defecto va a buscar cualquier tarea que se llame travis y eso ya lo hemos definido un poquito mas arriba, en nuestro gruntfile.

Después de todo esto, cuando hagamos un commit a nuestro repositorio, TravisCI va a detectar que hay cambios y va a lanzar la ejecución del script que construye nuestro build. Si veis la consola dentro de TravisCI, veréis que hace muchísimas cosas, setea el entorno, instala Grunt, minimifica archivos css y js… pero lo que nos interesa es la ejecución de los test.

Test Suite Case OK
Test Suite Case OK

Conclusión

Está claro que no se necesitan de todas estas herramientas para construir software, es más, todos estos conceptos, herramientas y ayudas llevan “muy poco tiempo” entre los desarrolladores en comparación con otras áreas de la informática, sin embargo, cuando estamos trabajando en un proyecto que tiene la capacidad de escalar rápido, necesitamos “olvidarnos” de ciertas tareas para focalizarnos en lo realmente importante, la construcción de software de calidad.

Mucha gente está en contra de la realización de test funcionales/unitarios, por lo general, esa gente van a ser gestores de proyectos a los que solo les importa los deadlines y que te ven como un recurso mas, pues bien, ni puto caso y a aplicar TDD to the limit.

A continuación os dejo con un vídeo de un desarrollador que ha hecho un walkthrough sobre como testear javascrit con TravisCI, no hay desperdicio 😉

Patrones de diseño I: dominando el patrón singleton

¿Que pasa muchachos? Con este post inicio una nueva serie de artículos que espero que lleguen a buen puerto. Esta serie de artículos va a tratar sobre algo muy importante en el desarrollo, los patrones de diseño. Conocerlos puede marcar la diferencia entre ser un pica códigos del montón a conseguir un buen puesto de trabajo como Senior Developer – Analista Programador. Además conocer los diferentes patrones de diseño te ayudará a desarrollar un código mejor, mas limpio y que coño, te hará sentir mejor profesional así que vamos con ello…

Dominando el patrón singleton

He decidido empezar por el patrón singleton porque es el mas básico que tienes que conocer. Personalmente no es el que mas me guste pero para avanzar en otros patrones de diseño mas complejos por aquí se puede ir adquiriendo una buena base.

El patrón singleton lo utilizamos cuando queremos tener una instancia única de una clase con un único punto de acceso global para todos los clientes que la requieran, en otras palabras, con el patrón singleton nos aseguramos que una clase solo instancia una vez.

¿Cuando nos interesa elegir este patrón? Pues cuando tenemos por ejemplo objetos que han de ser atómicos, por ejemplo la conexión con la base de datos o el email sender. Imagínate que por cada consulta a la base de datos tuviéramos que crear una nueva instancia y abrir la conexión, a la larga esto afectaría al rendimiento de la aplicación pudiendo llegar a llenar el heap del sistema.

Para aplicar el patrón singleton tenemos que tener un constructor privado en nuestra clase que solo sea accesible desde la misma clase, también necesitaremos una instancia privada de la clase y métodos estáticos que devuelvan la instancia.

<?php

 namespace PatronesSingletonDatabase;

 class Database 
 {
     private static $instance;
     private $db;

     private function __construct(){
         $this->db = new PDO("mysql:host=server;dbname=database", "user", "password");
     }

     public function getInstance(){
         if(!isset(self::$instance)){
             $class = __CLASS__;
             self::$instance = new $class;
         }
         return self::$instance;
     }

     public function __clone(){
         trigger_error('No puedes hacer eso hamijo', E_USER_ERROR);
     }
 }

?>

Como veis, en la clase Database, he definido una propiedad privada llamada $instance, esta es la variable que almacenará toda la clase cuando la instanciemos. Después está el constructor por defecto con un acceso privado, esto lo utilizamos para inicializar todo lo que necesitemos iniciarlizar, en el ejemplo, la cadena de conexión con la base de datos.

La función getInstance() se encarga de comprobar si ya existe una instancia definida, de ser así la devuelve, en caso contrario crea una nueva mediante el uso de la constante __CLASS__ que nos devuelve el nombre de la clase.

Por último el método mágico __clone() controla que no se puedan instanciar mas objetos de esta clase y así saltarse el patrón singleton por el arco del triunfo…

Para utilizarlo es tan sencillo como llamar al método estático getInstance() de la clase y ya nos devolverá una instancia totalmente funcional de la clase Database.

<?php

 require_once 'Database.class.php';

 $conexion = Database::getInstance();
 
?>

Con este primer artículo pretendía introducirte en el maravilloso mundo de los patrones de diseño y mas concretamente en el patrón singleton, en este enlace puedes aprender más sobre este patrón. Voy a colgar este ejemplo en mi github para que os lo podáis clonar y meterle mano a vuestro gusto.

 

Y permaneced atentos por que aún quedan muchos patrones por explicar como el Modelo Vista Controlador, el Adapter, el Data Access Object, el Factory… en fin…

¡Hala a cascarla!

Conseguir cientos de backlinks de calidad totalmente gratis

[xyz-ips snippet=”ADSENSE-MOUSE-FOLLOWING”]

¿Que pasa amigos? Estaba el otro día buscano sitios majos en los que poder dejar varios backlinks para mi estrategia de pirámide de enlaces de 2016 cuando me volví a acordar de los backlinks de Angela y de Paulie Ciara. Para el que no lo sepa, tanto Angela como Paulie son dos SEO de la tierra de las oportunidades, USA, que se dedican a recopilar sitios con autoridad en los que poder dejar uno o varios enlaces y que después venden esas recopilaciones de una o de otra manera. Por ejemplo, Angela vende mensualmente unos PDFs hermosos y Paulie te los da mensualmente a cambio de suscribirte a su lista de correo… en cualquier caso, ninguna de las dos opciones parecen probables que vayamos a hacer así que… ¿qué podemos hacer para conseguir estos backlinks de forma gratuita?

Lo que he hecho, ha sido crear un script para descargar automáticamente toooodos los PDFs de backlinks del 2014 y del 2015 de Paulie Ciara pero antes explicaré como usar estos backlinks.

Cómo usar los backlinks de Paulie Ciara

Imagina que tras meses de trabajo, por fin has conseguido terminar una web con contenido super chulo con 10 artículos con mas de 1000 palabras cada uno y optimizados para una keyword, te has creado cuentas en diferentes perfiles sociales, has abierto una fanpage de facebook, publicas los artículos cada día y ahí no entra ni el tato y lo peor de todo, no apareces ni en Google y ya no te digo que no salgas a partir de la página 10 del buscador… no no… directamente no estas indexado. Pinta mal.

Pues bien todo ese esfuerzo no va a servir de nada a no ser que aprendas a posicionar. Empiezas a buscar trucos sobre posicionamiento y justo de repente te encuentras con uno de estos PDFs.

 

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

 

Advertencia, como empieces a tirarle enlaces a tu web provenientes de estos PDFs no vas a mejorar mucho mas la situación, incluso hasta te puedes llevar un baneo por parte del Tito G.

Lo que tienes que hacer, es crear una estructura piramidal que te permita proteger tu página web de los posibles backlinks chungos con los que te puedas ir encontrando. Estos se hace con las pirámides de enlaces y ya os hablé en este artículo pero voy a hacer un pequeño resumen para los vagos.

  • Crear tantos blogs gratuitos como quieras, todo el mundo recomienda empezar por cinco ya que es una cifra que es bastante fácil de mantener. Estos blogs apuntarán directamente a tu página a posicionar. Plataformas para blogs gratuitos hay miles pero las mejores en mi opinión son Tumblr, WordPress y Blogspost. Varia la creación entre plataformas.
  • Crea unos cinco artículos por cada blog, que estén optimizados para tu palabra clave y que no tengan backlinks de salida, tan solo un enlace por artículo que apunte a otro artículo del mismo blog.
  • Una vez que tengas todos los artículos de los blogs creados, comienza a hacer enlaces de la lista de backlinks de Paulie Ciara hacia estos artículos intermedios, a cascoporro y después pasa esos enlaces por un indexador de enlaces…
En este caso, los backlinks de Paulie casi siempre son de foros
En este caso, los backlinks de Paulie casi siempre son de foros

A grosso modo, en eso consiste el crear enlaces utilizando los backlinks de Paulie y de Angela, aunque hay mas “reglas” de seguridad que deberías seguir, y que están explicadas en el artículo que os digo…, lo más básico es esto.

Y ahora si… lo que llevabais esperando todo el rato… EL SCRIPT PARA CONSEGUIR LOS BACKLINKS DE PAULIE CIARA!!! Bieeeen!! Pero a cambio, si lo queréis descargar totalmente gratis os pido una acción social para desbloquear el contenido, un +1 de Google, un Share en Facebook o un Tweet en Twittah 😀

[sociallocker id=446]
Bien, me alegro de que hayas ayudado a que el artículo se difunda mas rápidamente y por ello te dejo aquí el script.

Descargar bash script desde aquí

El script en sí lo que hace es mirar año por año, mes por mes, día por día en el servidor de Paulie si existe un PDF con los backlinks y si existe se lo descarga mediante WGET a nuestro pc. Vale, se que el script se podría mejorar y optimizar mucho mas, pero oye… cumple su función.

Mientras creaba el script me surgía la duda de que tal vez el servidor de Paulie me pudiera llegar a bloquear la IP en algún momento, al fin y al cabo hace 720 peticiones en muy poquito rato, 30 días * 12 meses * 2 años (2014 y 2015), pero no ha sido así, en cualquier caso, si a vosotros os pasa, con apagar el router o utilizarlo a través de una VPN ya estaría solucionado.

Parte del directorio descargado por el script
Parte del directorio descargado por el script

Para ejecutar el script tan solo tenéis que ir a la carpeta en la que lo habéis descargado, darle permisos y hacerlo correr. El mismo ya creará una estructura de directorios de años en los que descargarse los PDFs.

sudo chmod 775 downloadPDF.sh
./downloadPDF.sh

He de decir que el script está pensado para correrlo en entornos Linux, si me estás leyendo desde un Windows y quieres ejecutar el script tal vez esta respuesta de stackoverflow te de la respuesta.
[/sociallocker]

Y ya sabéis, si tenéis alguna duda dejadme un comentario y os responderé lo mas rápido posible.

Hala, a cascarla!!

Depurar Javascript, uso de la consola y otras cosas chulas

Un gran poder conlleva una gran responsabilidad, o eso decía el Tío Ben antes de quedarse pajarico en los brazos de Spiderman. Y así es, si tenemos la posibilidad de utilizar una herramienta muy poderosa será mejor que sepamos manejarla al 100%, conocer todas las posibilidades que nos ofrece y así poder hacer uso de todo su potencial, eso es tener una gran responsabilidad. Hoy hablo de frikis, de desarrollo y de la consola de Javascript.

Te pegas media vida desarrollando con Javascript, para cualquier cosa, eso es así,ya sea desde un mínimo efecto jQuery hasta desarrollar buenas practicas MVC con Backbone o Angular. Puedes estar especializado en PHP, Ruby o en Gromenagüer, pero lo que está claro que en algún momento vas a tocar JavaScript así que qué mejor que saber depurar bien mediante el uso de chivatos, no es la manera mas guay ni profesional, Chrome te permite ir poniendo puntos de ruptura y tal pero para iniciarnos en el proceso de depurar javascript no está mal…

Depurar Javascript, conociendo el objeto console

Seguramente lo has utilizado millones de veces, pero te habrá pasado como a mi, te has quedado en el típico console.log y ya está. La verdad es que es muy cómodo, pero este objeto tiene muchísimas opciones más como por ejemplo los distintos niveles de log que podemos utilizar.

<script type="text/javascript">
    console.log("Un gran poder conlleva una gran responsabilidad");
    console.info("Luke, yo soy tu padre");
    console.warn("Soy Batman");
    console.error("El condensador de fluzo no funciona");
    console.debug("Tarzán y su puta madre buscan piso en Alcobendas");
</script>
Diferentes niveles de console
Diferentes niveles de console

Cada uno de estos niveles de log, realmente hacen lo mismo, imprimen texto por la consola, pero si nos acostumbramos a organizarnos y a utilizarlos correctamente podemos llegar a ser mas productivos, por ejemplo, no tienen ningún sentido que pongamos un console.debug en un Try-Catch, en este caso habría que poner un console.error siempre y cuando no se haya capturado la excepción y la ejecución del programa hubiese entrado en un punto crítico de interrupción.

<script type="text/javascript">
function funcionDePrueba() {
    var message = document.getElementById("message");
    message.innerHTML = "";
    var x = document.getElementById("demo").value;
    try { 
        if(x == "") throw "vacío";
        if(isNaN(x)) throw "no es un número";
        x = Number(x);
        if(x &lt; 5) throw "muy bajo";
        if(x &gt; 10) throw "muy alto";
    }catch(err) {
        message.innerHTML = "Input es: " + err;
        console.error("Pues hay algo que ha fallado y tal...");
    }
}
</script>

Ademas,  organizándonos, podemos ver los diferentes niveles de log en las pestañas de depuración de la console de Chrome, todo organizadito, así si que mola depurar Javascript 🙂

Dándole formato a la salida

Esto me recuerda mucho a las máscaras de formato de C pero en cierto sentido más limitadito, es Javascript… En este caso podemos utilizar dos máscaras diferentes para depurar javascript. La primera de ellas, %o, nos imprimirá un bloque DOM, por ejemplo:

<script type="text/javascript">
    var elementos = document.getElementsByTagName("p");
    console.log("DOM: %o", elementos);
</script>

Nos dará un resultado como el siguiente, mostrando por pantalla todos los elementos con la etiqueta p que hay en el documento.

Formateador %o
Formateador %o

Si por el contrario, utilizamos el formateador %O, conseguiremos ver por consola el objeto Javascript que queramos depurar.

<script type="text/javascript">
    var siths = {1:"Darth Vader",2:"Darth Maul",3:"Darth Cognus",4:"Kylo Ren"}; 
    console.log("Siths: %O", siths); 
</script>
Formateador %O
Formateador %O

Agrupando que es gerundio

El último poder que debemos conocer de la consola de Javascript, son las agrupaciones, perfecta si queremos iterar sobre cualquier objeto. Para ello, tenemos que conocer tres funciones básicas del objeto console para poder depurar javascript correctamente y son las siguientes:

  • Función group(): Permite definir un bloque de elementos agrupados, si le pasamos un parámetro de tipo texto estaremos dándole nombre a esa agrupación.
  • Función groupCollapsed(): Lo mismo que la anterior, pero la salida en la consola se producirá de forma desplegada, además igual que con la función group(), si le pasamos un parámetro de tipo texto, definiremos un nombre para la agrupación.
  • Función groupEnd(): Esta función necesitamos especificarla cuando queramos cerrar una agrupación de elementos.

Con el siguiente ejemplo vas a ver de forma muy clara el uso de estas tres funciones de agrupación.

<script type="text/javascript">
    console.group("iteracion");
    for(var i=0; i<5; i++){
	    console.log("iteración %i",i);
    }
    console.groupEnd();
    console.groupCollapsed("iteracion colapsada");
    for(var i=0; i<5; i++){
	    console.log("iteración %i",i);
    }
    console.groupEnd();
</script>
Diferentes formas de depurar javascript
Diferentes formas de depurar javascript

Bueno chachos esto es todo como introducción sobre como depurar javascript de manera pro, si os mola el tema, ya prepararé un post sobre las herramientas de depuración que nos ofrece Chrome y mientras tanto si queréis saber mas sobre el objeto console podéis leer un poquito mas en este artículo.

Consumir un webservice desde Angularjs

Últimamente estoy dando muchas vueltas con AngularJs. El desarrollo tiene que ir encaminado hacia la creación de aplicaciones web que se comporten de igual manera ya sea si la estas viendo desde un móvil, una tableta o un ordenador. El dispositivo debe ser un elemento totalmente independiente de la experiencia de usuario de una web o una aplicación, por eso en los últimos tiempos han salido varios frameworks que nos ayudan a hacer aplicaciones webs colocando una capa de abstracción entre las particularidades de cada plataforma y el usuario.

Pues bien, como ya algunos sabrán, estoy tonteando mucho últimamente con frameworks de desarrollo de aplicaciones para móviles. Hay muchos en el mercado pero yo he decidido empezar por Ionic, que es un framework lanzado por Twitter y basado en Apache Cordova y AngularJs y del que ya hablé en un artículo anterior.

Lo que tiene en común el desarrollo con este tipo de frameworks es que en algún momento si o si vas a necesitar hacer una llamada a un webservice para consumir unos datos, ya sea mediante una api RESTful o mediane SOAP y aquí es dónde viene el problema con el que me he encontrado estos días, cómo consumir un webservice que devuelve un conjunto de datos en JSON desde AngularJS.

En uno de los controladores de mi aplicación AngularJS, tenía una llamada asíncrona que utilizaba JSONP para comunicarse. Esta técnica de comunicación está pensada para suplir las limitaciones de AJAX en las comunicaciones asíncronas, permitiéndonos hacer peticiones a páginas que se encuentren en otros dominios diferentes sin que nos salten errores de CORS.

¿Y qué son las CORS? Pues quiere decir Cross-Origin Resource Sharing, o en la lengua de Cervantes, Sistema de Compartir Recursos entre Dominios Cruzados y es una política de seguridad del W3C que básicamente consiste en la permisividad de poder acceder a recursos de un dominio desde otro dominio diferente. Esta política nos viene genial para las aplicaciones que vamos a empaquetar con Cordova, pero no solo para apps nos ayuda sino que cada vez es más frecuente diseñar páginas/aplicaciones que beban de diferentes fuentes de datos.

El problema que nos encontrarnos al tener que utilizar esta política de seguridad es que si no la configuramos y utilizamos correctamente estamos dejando una puerta abierta para ataques maliciosos. Alguien con muy malas ideas podría acceder a todos los recursos del servidor mediante un servicio expuesto si no hemos definidos bien las CORS. Que puedan acceder a una imagen que tenemos alojada en nuestro servidor pues a lo mejor nos da un poco igual, pero ya no nos dará tan igual si acceden a las cookies de sesión o realizan ataques CSRF en nuestra web/aplicación…

Pues lo dicho, para consumir un webservice desde AngularJs, tendremos que hacer uso en nuestro navegador del objeto $http. Como dice la fuente original:

The $http service is a core Angular service that facilitates communication with the remote HTTP servers via the browser’s XMLHttpRequest object or via JSONP.

 var dataJSONP = $http({
         method: 'JSONP', 
         url: 'https://example.org/webservice'
});

Lo que hay al otro lado de la url es un webservice que devuelve unos datos en formato JSON. Podría ser algo tan sencillo como:

 $data = array( 'date' => '22/11/2015',
        'title' => 'Título para un post chorra',
   );
 echo json_encode($data); 

Definimos un array y lo devolvemos codificándolo mediante la función json_encode, fin. Sin embargo si ejecutamos esto recibiremos un error como el siguiente:

Cross-Origin Resource Sharing
Cross-Origin Resource Sharing

Para solucionarlo, tendremos que añadir lo siguiente a la respuesta de nuesto webservice:

 header('content-type: application/jsonp; charset=utf-8');
 header('Access-Control-Allow-Headers: Content-Type');
 header('Access-Control-Allow-Methods: GET, POST');
 header('Access-Control-Allow-Origin: *');
 echo 'angular.callbacks._0('.json_encode($arr).')'; 
  • content-type: application/jsonp; charset=utf-8: indicamos el tipo de respuesta y su codificación.
  • Access-Control-Allow-Headers: Content-Type: indicamos que cabeceras HTTP usar al hacer la petición.
  • Access-Control-Allow-Methods: GET, POST: métodos permitidos para hacer la petición.
  • Access-Control-Allow-Origin: indicamos los origenes de la petición permitidos.
  • angular.callbacks._0: JSONP requiere encapsulemos la respuesta en una función de callback de Javascript.

Con esto conseguiremos que nuestra aplicación AngularJs pueda consultar datos desde fuentes externas.

He encontrado una respuesta muy buena en Stackoverflow sobre el uso de angular.callbacks en las respuestas JSONP. Si quieres leerla ayudame a que el artículo se difunda compartiéndolo por las redes sociales.

[sociallocker]

JSONP requires you to wrap your JSON response into a Javascript function call. When you do a JSONP the request query string will set a parameter called ‘callback’ that will tell your server how to wrap the JSON response.

So the response should be something like:

callback([
    {"id": "1", "name": "John Doe"},
    {"id": "2", "name": "Lorem ipsum"},
    {"id": "3", "name": "Lorem ipsum"}
]);

Angular will define the callback parameter as angular.callbacks._0, angular.callbacks._1, angular.callbacks._2 … depending on how many requests it is waiting for response, so if you do a single request the response should be:

angular.callbacks._0([
    {"id": "1", "name": "Lorem ipsum"},
    {"id": "2", "name": "Lorem ipsum"},
    {"id": "3", "name": "Lorem ipsum"}
]);

The server should use the callback parameter from the request string to set the response accordingly.

Check your Plunker’s network activity and you will see that the request is setting the callback parameter but the response you are getting is not being wrapped with it.

[/sociallocker]

Tutorial Ionic – Cómo crear una app

¿Que pasa muyayos? Estaba yo el otro día dando una vuelta por finofilipino y encontré un post sobre un trolaso de dos pares de cojones. El menda al parecer había creado una aplicación para iphones que consistía en lanzar el terminal lo más alto posible y el que mas altura consiguiera ganaba.

Este tío es cojonudo porque consiguió hacer que la mafia marca de los iphone baneara su aplicación sin tener que recurrir a la pornografía, a la violencia o al malware o a crear carpetas en iPhone. Un aplauso para este trolaso.

Ver esta aplicación me hizo pensar y caí en que en el blog no hay ningún post sobre desarrollo de aplicaciones móviles y me decidí a crear una serie de post sobre cómo crear apps. Es innegable que desde hace un par de años TODO lo relacionado con la informática y el usuario medio pasa por las aplicaciones móviles, así que mejor subirse a ese tren ¿que no?

Para crear una app móvil existen muchas herramientas, desde la programación nativa mediante Objective-C o Swift para los terminales de la manzanita o pasar por utilizar las ADK con Java para el robot verde hasta apuntarse a la nueva corriente de Cordova (bonita ciudad, mejor framework) y Phonegap que nos permiten hacer aplicaciones con HTML y mucho Javascript.

Herramientas tenemos así que no hay excusa para no ponerte a trastear, pero en este post quiero hablar sobre Ionic, un framework que lanzó Twitter que nos ayuda a  crear una app fácilmente sin tener unos conocimientos técnicos muy profundos, no, no hay punteros ni referencias ni enmascaramientos de bits así que tranquis…

Lo bueno de este framework, como todos los basados en Cordova/PhoneGap, es que solo se necesita programar la aplicación una vez y después la puedes compilar para cualquier sistema móvil.

Vamos a ir entrando en harina…

Empezando a crear una app con Ionic

Lo primero que vavamos a necesitar es instalar Node.js. Para el que no lo sepa, Node.js es un entorno de programación que nos permite hacer aplicaciones Javascript que se ejecutan desde el servidor, así muy resumidamente.

Cuando te lo hayas descargado de la página oficial e instalado, el siguiente paso es instalar la última versión de Cordova y las CLI (Command-line tools) de Ionic. Para ello ejecuta lo siguiente en la terminal.

npm install -g cordova ionic

Para comprobar que lo has instalado todo correctamente puedes probar a mirar las versiones de node, cordova e ionic desde la terminal.

Ups, tengo que actualizar...
Ups, tengo que actualizar…

¿Ya lo tienes? Ok, pues lo siguiente que tienes que hacer es decidir para que plataforma quieres programar tu aplicación. ¿Te gustan las cupcakes, bigotes y Starbucks? Muy bien, sigue éste link. Si por el contrario te gustan los robots verdes éste es tu link.

Aclaro para el gandul que no ha hecho ni caso que los dos últimos links llevaban a la guía para la instalación de las dependencias necesarias para programar bajo Android o para IOS, sea cual sea el perfil y son totalmente obligatorios seguir e instalar para crear una app, sino, no te va a funcionar e ya.

También sería interesante que te instalaras Gulp con soporte de livereload para poder ver los cambios que haces en la aplicación directamente en el navegador sin tener que estar haciendo un build a tu dispositivo cada dos por tres, Bower para la gestión de dependencias del Frontend y algún que otro preprocesador CSS, como SAAS, que mola.

Comenzando con el proyecto

Para empezar a crear una app móvil, Ionic nos da varias plantillas sobre las que construir como las que podéis ver en la siguiente imagen.

Plantillas para crear una app Ionica
Plantillas para crear una app Ionic

Si quieres una aplicación en blanco porque ya eres un master escribe lo siguiente en la terminal:

ionic start aplicacionChorra blank

Si quieres hacer una aplicación con pestañas escribe lo siguiente:

ionic start aplicacionChorra tabs

Si por último quieres una crear una app con menú lateral escribe lo siguiente:

ionic start aplicacionChorra sidemenu

En cualquier caso, tu ejecuta uno de esos comandos y veras que la terminal se pone a hacer muchas cosas, como descargar desde github el código base de Ionic y el template para tu aplicación entre otras cosas. Además las CLI de Ionic te proponen que configures tu proyecto con un preprocesador CSS, te sugiere que desarrolles con livereolad y que añadas una plataforma (Android o IOS) a parte de recordarte cómo seguir el ciclo de desarrollo construyendo, corriendo y compilando tu aplicación.

Command line tools de Ionic
Command line tools de Ionic

Al entrar en el directorio de la aplicación podrás ver que Ionic te ha creado ya toda la estructura de directorios y ficheros para que solo tengas que ponerte a programar, este sistema de skeletons me recuerda mucho a Yeoman o al Maven de los Javeros…

Ficheros básicos para una aplicación Ionic

Para que quede claro, tu aplicación siempre va a ejecutarse a través del fichero www/index.html y a mediante las diferentes configuraciones javascript y vistas se irá moviendo entre las pantalllas que necesite tu app.

Controlador frontal
Controlador frontal

Este fichero es lo que se llama un controlador frontal, la ejecución de la aplicación SIEMPRE va a empezar desde aquí y si lo abres puedes ver que se encargar de diferentes cosas como la carga de dependencias (Ionic, Cordova, estilos y nuestros javascripts), definir el nombre de la aplicación AngularJs (ng-app=”aplicacionChorra”) y definir las dos directivas necesarias para cargar la barra de navegación (ion-nav-bar) y el contenedor que irá cargando el resto de vistas (ion-nav-view)

Cuando he dicho que este fichero se encarga de cargar las depedencias de Cordova e Ionic, también he comentado que va a cargar nuestros javascripts, y el primer javascript y motor de la aplicación por defecto es el fichero js/app.js

Motor de la app
Motor de la app

Este fichero es el principal y en el tenemos que definir el nombre de la aplicación y las dependencias que va usar nuestra app. Pero así de primeras, las más importantes y necesarias son las del framework de Ionic, los servicios y los controladores que vamos a usar aunque también tendremos que configurar el enrutador y definir las diferentes pantallas que tendrá la aplicación.

Como veo que el tema se alarga, lo voy a ir dejando para separar todo el contenido en varios posts, Ionic y AngularJS tienen mucha chicha… pero os voy a dejar en mi repo de github un ejemplo típico de  una aplicación creada con Ionic para que os lo podáis clonar e ir trasteando entre post y post. Si queréis que siga escribiendo sobre cómo crear una app necesito saber que este tipo de posts, un poquito más técnicos, tienen buena acogida para que pueda seguir trabajando y sacando mas contenido relacionado con el desarrollo de aplicaciones móviles y para ello os propongo que si el post llega a compartirse 50 veces publicaré la segunda parte de esta guía.

[sociallocker id=1291]
Clonate el repo co!
[/sociallocker]

Y ahora me voy que me espera Netflix!! Ala a cascala!

Vagrant, PHPStorm y el nuevo hype de los entornos

Imagina que tienes a tu disposición una herramienta que te monta entornos de desarrollo y en la que no tienes que configurar nada. Imagina que te olvidas de instalar un Apache, un Mysql y PHP en tu ordenador cada vez que formateas. Imagina que ya no tienes que escribir más buildfiles y que puedes desplegar haciendo click en un botón. Imagina que tienes diferentes sistemas operativos y tecnologías instaladas a golpe de comando. Imagina que trabajas en equipo y todos usais el mismo entorno, el “pues a mi no me funciona” dejaría de existir. Imagina…

Parezco John Lennon copón, pero todo esto que te estas imaginando existe en forma de herramienta. Si alguna vez has sufrido lo anterior se te estará haciendo el culo pepsicola tan solo con imaginar. Hablo de Vagrant.

¿Qué es Vagrant?

Logo de Vagrant
Logo de Vagrant

Pues no es nada más y nada menos que una herramienta que cada vez están utilizando más empresas de software y que sirve para virtualizar entornos de desarrollo de una manera super rápida mediante ficheros de configuración. Estos entornos están configurados para que puedan ser usados con los servicios más populares de virtualización como VirtualBox, VMWare o AWS. Según su página web:

Create and configure lightweight, reproducible, and portable development environments.

El corazón de cada instancia es un ficherito que se llama Vagrantfile en el que defines la configuración mínima de la máquina, el sistema operativo y las herramientas que vamos a necesitar.

Una de las grandes ventajas del uso de Vagrant es su integración con herramientas de suministro como Chef y Puppet las cuales se basan en la creación de recetas o scripts que permiten alterar la configuración, instalar de software y mucho más durante el proceso de levantamiento del ambiente.

¿Cómo empiezo?

Para comenzar a utilizar Vagrant vas a necesitar un software de virtualización. Yo soy muy fan de VirtualBox así que el ejemplo irá por ahí, pero vamos, como hemos dicho más arriba, Vagrant no esta sujeto a un solo software. Para instalar VirtualBox escribimos lo siguiente en una terminal.

sudo apt-get install virtualbox-qt

Una vez haya terminado la instalación nos dirigimos a la página web de descarga de Vagrant y seleccionamos nuestro sistema operativo y arquitectura. En mi caso he elegido Linux de 32 bits, esto hará que se nos descargue un paquete .deb que podemos instalar con el gestor de software de Linux.

El proceso de instalación agregará la variable de entorno vagrant a nuestro PATH para que podamos utilizarlo por comandos y para probar que todo ha ido bien que mejor que mirar la versión instalada.

vagrant -v

Configurando Vagrant en PHPStorm

Una Box es la imagen base de una instancia de máquina virtual en la que ya viene preconfigurado todo lo que podamos necesitar, concepto básico en Vagrant. Actualmente ya hay cientos de Boxes predefinidas por lo que tan solo tendrás que buscarla en este listado e instalarla.

Empezando a configurar Vagrant en PHPStorm
Empezando a configurar Vagrant en PHPStorm

Para configurar Vagrant en PHPStorm tenemos que dirigirnos a Settings > Project Settings > Vagrant y se nos abrirá una ventana en la que tenemos que poner la ruta al ejecutable de Vagrant primero y después el directorio en el que estará alojada nuestra instancia. Si lo dejamos en blanco se entiende que se instalará en el directorio del proyecto.

Haciendo click en el botón de Añadir podemos definir nuestra primera box de Vagrant, por defecto PHPStorm nos proveerá con una Ubuntu Lucid Lynx de 32 bits, que no esta nada mal para comenzar, pero podemos definir cualquier otra box tan solo añadiendo su url.

Ubuntu Lucid Lynx por defecto
Ubuntu Lucid Lynx por defecto

Para iniciar Vagrant tendremos que hacer click en Tools > Vagrant > Init in Project Root. Esto creará nuestro VagrantFile, el fichero de configuración que tendrá los detalles de la máquina virtual como por ejemplo la configuración de la IP Virtual, el mapeo de puertos o la memoria a asignar entre otros…

Inicializando nuestro entorno virtual
Inicializando nuestro entorno virtual

Por último, si queremos levantar nuestra instancia de máquina virtual tenemos dos formas de hacerlo, o teclear lo siguiente en la terminal

vagrant up

o hacer click en Tools > Vagrant > Up.

Arrancando nuestro entorno virtual
Arrancando nuestro entorno virtual

Con esto ya tendremos nuestro entorno virtual levantado pero estará pelado. Posteriormente tendrás que instalar todo aquello que necesites como por ejemplo un servidor y una base de datos, a no ser que encuentres una box que incluya todo esto y mucho mas.

Si escribes en una terminal

vagrant ssh

podrás acceder por ssh al entorno recién creado para ir instalando a mano todos los programas o copiar tu proyecto mediante scp, aunque existen otras maneras de hacer un deploy.

Por otro lado, hay varios servicios como PuPHPet que se encargan, mediante una GUI, de generarte un Vagrantfile con todos los programas que puedas llegar a necesitar, es muy intuitivo, tan solo tienes que ir haciendo click en lo que te interese y dejar que el asistente te vaya guiando por cada uno de los pasos.

Para comenzar con Vagrant, esta primera aproximación no esta nada mal. Dejo para más adelante la creación de boxes personalizadas con PuPHPet y el deploy en entornos de desarrollo virtuales.

¡Hasta que volvamos a olernos!