La aplicación de las Peliculas Kinkis

Las peliculas kinkis asentaron precedentes en el mundo del cine y no solo en el séptimo arte. Reflejan una sociedad marginal y real de los años 70 y 80. Directores como Jose Antonio de la Loma o Eloy de la Iglesia supieron plasmar fielmente la vida de barrios periféricos de las grandes ciudades y sus desgracias.

Problemas derivados del éxodo rural que sufrió España en la década de los 60 y cuyas grandes ciudades no estaban preparadas para acoger a toda esa población. Esto hizo que se construyeran barrios rápidos, bloques del Ivima, con falta de infraestructuras y servicios básicos. Muchos de estos barrios eran asentamientos chabolistas, en los que el olvido y la marginalidad propició que se crearan micro poblaciones totalmente aisladas del resto de la ciudad. San Blas, Canillejas, la UVA de Vallecas o el barrio de la Mina, por citar algunos, eran el caldo de cultivo perfecto para todo lo que vendría después.

La crisis económica que sufría el país en aquella época, la falta de trabajo, la entrada de drogas duras y la ausencia de futuro hizo que junto con el alto nivel de paro que sufríamos apareciera un fenómeno del que mucho se ha hablado, se ha escrito y se ha documentado. La delincuencia juvenil.

Chavales de estos barrios y a los que nadie daba trabajo se echaban a las calles a robar para poder sobrevivir. Todos tenemos en la retina personajes como El Vaquilla, El Jaro o El Pirri y que muchas veces no dejaban de ser personajes ficticios pero que sus actores vivían las mismas vidas que se narraban en las películas kinkis.

Sin duda una época oscura marcada por el final del franquismo y la apertura de la democracia que dejó atrás tantas y tantas historias de ruina y marginalidad.

Ante este panorama, bien es sabido que soy un amante del cine kinki, he querido realizar mi pequeño homenaje a este género cinematográfico haciendo una aplicación de peliculas kinkis en las que repaso la filmografía de los directores citados anteriormente.

Imágenes promocionales de la aplicación de películas kinkis
Imágenes promocionales de la aplicación de películas kinkis

La aplicación en cuestión te presenta las diferentes películas y sus fichas con información sobre directores, guionistas, reparto y otra información valiosa para los amantes del séptimo arte.

En cada una de las fichas podrás disfrutar del trailer de películas míticas como Perros Callejeros, Navajeros, Colegas o La estanquera de Vallecas incluso en algunas podrás ver la película completa, tendrás que encontrar cual 😛

La aplicación estaba disponible en Google Play para dispositivos Android hasta que el señor G me la retiró del mercado por incumplir las políticas de copyright y derechos de autor y no resolver en problema durante mucho tiempo. Aún así, voy a dejar el enlace al repositorio de Github con todo el código fuente por si de casualidad eres un poco curioso y quieres saber cómo la he hecho.

Si tienes ganas de verla funcionar en tu dispositivo tendrás que compilarla, pero no te preocupes que en esta guía se explica muy bien como hacerlo.

Y como diría el Pirri… Venga! A ver si te buscas una musiquilla guapa no colega?

¿Cuánto queda hasta Pilares?

Si señor, esa es la pregunta clave que debería estar haciéndose todo maño. ¿Cuánto queda hasta Pilares?

Para el que no lo sepa, los Pilares o las Fiestas del Pilar es la fiesta por excelencia de Zaragoza. Una fiesta tradicional de mi tierra que básicamente consiste en hacer una ofrenda floral a la Virgen del Pilar. La fiesta se desarrolla entre los días 8 de Octubre y el día de la Hispanidad, aunque días previos ya existen fiestas no oficiales y es posible salir a volcar fresquitos esos días previos.

Si preguntas a diferentes personas, unos te dirán que lo mejor de los Pilares es la ofrenda del día 12, otros te dirán que el pregón pero lo que yo y muchos jóvenes mas esperamos ansiosamente son las noches de Interpeñas, Espacio Z y la Carpa del Ternasco.

Inflarte a comer carne con denominación de origen en la Carpa del Ternasco mientras te bebes una buena Ambar fresquita al ritmo de Los Gandules para después irte hasta el recinto ferial Valdespartera a pillarte el moco con los calimotxos y el garrafón y acabar la noche comiéndote un calamar bravo es ya un rito típico que se repite todos los años.

Por eso, la aplicación de “¿Cuánto queda hasta Pilares?” es tu mejor opción para saber cuántos días quedan hasta que comiencen las fiestas. No necesitas nada más que un teléfono Android y descargar la aplicación desde la market.

Ale, todos a descargar 😉

Zona developers

Como es ya tradicional cada vez que hago un desarrollo, os voy a dejar a continuación el enlace al repositorio para que podáis descargar el código fuente de la aplicación y le echéis un vistazo.

La aplicación de “¿Cuánto queda hasta Pilares?” esta hecha con Ionic Framework, al igual que las otras apps que he hecho, Test de la Amistad, Nivel de Alerta Antiterrorista y Peliculas Kinkis pero a diferencia de las otras, en esta he utilizado un par de cosas nuevas de Angular.

Para el que no lo sepa, el framework de Ionic utiliza por debajo AngularJS y Apache Cordova.

Directivas en Angular

.directive('countdown', [
  'Util', '$interval', function(Util, $interval) {
    return {
      restrict: 'A',
      scope: {
        date: '@'
      },
      link: function(scope, element) {
        var future;
        future = new Date(scope.date);
        $interval(function() {
          var diff;
          diff = Math.floor((future.getTime() - new Date().getTime()) / 1000);
          return element.text(Util.dhms(diff));
        }, 1000);
      }
    };
  }
])

Este es un pedazo de código fuente de la aplicación y se corresponde con una directiva en AngularJS.

Una directiva es un pedazo de código con el que podemos extender nuestro código HTML, estas directivas pueden ser desde un pequeño cacho de código hasta una funcionalidad completa como la anterior. Existen varios tipos de directivas nativas de Angular como ng-app, ng-controller, ng-model, ng-click… aunque ya entraré en detalle en ellas en otra entrada.

Como veis, a esta directiva a la que he llamado countdown le estamos pasando el servicio Util y el objeto $interval. Después en la vista la utilizo tal que así:

<span countdown='' date='{{date}}' class="date"></span>

La otra funcionalidad que he utilizado para este desarrollo y que no había utilizado en otras apps son los servicios.

Servicios en Angular

Algo parecido a los servicios que definimos en Symfony, los servicios de Angular son unos objetos que se rigen por el patrón Singleton y que se inyectan a través del contenedor de Dependencias. La misión de estos servicios es escribir la lógica de negocio que después podremos reutilizar en cualquier otra parte de la aplicación sin tener que depender de la vista.

.service('Util', [
  function() {
    return {
      dhms: function(t) {
        var days, hours, minutes, seconds;
        days = Math.floor(t / 86400);
        t -= days * 86400;
        hours = Math.floor(t / 3600) % 24;
        t -= hours * 3600;
        minutes = Math.floor(t / 60) % 60;
        t -= minutes * 60;
        seconds = t % 60;
        return [days + 'días', hours + 'horas', minutes + 'minutos', seconds + 'segundos'].join(' ');
      }
    };
  }
]);

Este servicio al que he llamado Util y que después se lo paso como argumento a la directiva anterior hace una cosa tan tonta como calcular el tiempo que queda hasta una fecha futura. Se podría decir que es el núcleo de la aplicación “¿Cuánto queda hasta Pilares?”

Obviamente los servicios, las directivas y el propio framework de Angular dan para una entrada completa o varias cosa que no es objeto de este post pero en el que si que quería hacer una pequeña introducción para que se entienda el código fuente completo.

Os dejo el enlace al repo de github y si tenéis cualquier duda podéis hacerlo en los comentarios o través del banner de Twitter de a continuación.

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

Hala, a mamarla!

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!

Nivel de Alerta Antiterrorista App

La pasada noche del Viernes 13/11/2015 se produjo en París uno de los atentados terroristas más sangrientos de toda sus historia. Varios individuos atacaron con fusiles de asalto y explosivos varios restaurantes además de entrar en una sala de conciertos llena de gente y dispando a diestro y siniestro. Aquí te dejo la noticia por si acabas de despertar del coma y no te has enterado de nada.

La cosa es que debido a esto me he decidido a crear una aplicación informativa para Android que muestra el nivel de alerta antiterrorista (NAA) existente en Éspaña en tiempo real junto con las implicaciones que ello conlleva.

La aplicación te muestra los diferentes niveles de alerta antiterrorista fijados por el Ministerio de Interior además de ser totalmente gratuita, sin publicidad y como he dicho anteriormente informativa.

La app está certificada bajo la IARC con un nivel de PEGI 3, esto indica que es apta para todos los públicos, en ella no te vas a encontrar pornografía, violencia ni imágenes obscenas, tan solo información.

Está montada con el framework de Ionic y varios webservices, aunque ya habrá tiempo de hacer un making off explicando como he hecho algo tan sencillito y con qué problemas me he encontrado al desarrollarla ya os puedo decir que tengo varias ideas para implementar en la aplicación como la mejora de los webservices y la integración de notificaciones push para cuando cambie el nivel de alerta antiterrorista, pero todo se andará…

Por lo pronto si la queréis descargar ya se encuentra en la Android Market y a través del enlace del final de la página la podréis conseguir. Pronto subiré el código fuente completo a mi repositorio de Github para que le echéis un vistazo y trasteéis con ella.

También voy a empezar a subir algunos posts sobre desarrollo de aplicaciones móviles con Ionic, todavía estoy escribiéndolos pero creo que pueden gustar.

Descarga la aplicación de Nivel de Alerta Antiterrorista para Android

Ala a cascala!

Cómo instalar Android Studio en Linux

¡Hey!
¿Cómo están? Aquí estoy yo otra vez con un artículo sencillito y de utilidad. El programa del que voy a hablar hoy ya tiene unos meses de antigüedad pero no había tenido necesidad de utilizarlo hasta ahora.
Por temas relacionados con un proyecto, me ha tocado instalar Android Studio en Linux, mas concretamente en Elementary OS, la distro que yo utilizo y como bien sabéis esta basada en Ubuntu. Es algo bastante sencillito pero no esta de más que lo repasemos y lo dejemos en el limbo del Internet como una guía rápida.

¿Qué es Android Studio?

Android Studio es el IDE especializado para desarrollos de Android que presentó Google en su conferencia I/O 2013. ¿Y qué se puede hacer con este IDE? Bueno, como su nombre sugiere, programar aplicaciones para Android. Android Studio esta basado en InterlliJ IDEA de JetBrains. Los que me conocéis sabéis que siento predilección por todos los IDEs desarrollados por JetBrains, ya sea para java o php. Mucha gente opina que Eclipse es el mejor IDE en el mercado pero eso es porque no han probado un IDEA, ya que estos programas de desarrollo están a años luz de Eclipse.

Con Android Studio se pueden ver en directo los cambios que estamos haciendo en el diseño de la aplicación y además viene con diferentes resoluciones para que podamos testear como queda la aplicación en cada dispositivo, vamos un responsinator para Android, ¡genial!

Instalar Android Studio en Linux

Lo primero que tendremos que hacer será descargarnos el IDE y el JDK para poder desarrollar. El programa lo podemos descargar desde la página oficial de Developers de Android.

Para el JDK tiraremos de consola y vamos a instalar la versión la versión libre de Java.

sudo apt-get install openjdk-7-jdk openjdk-7-jre

Para estar seguros que se ha instalado bien podemos comprobarlo con el siguiente comando.

java -version

Cuando hayamos terminado este proceso, nos tocará descomprimir el archivo que nos hemos descargado, en este caso un .tar. Esto lo tenemos que hacer bajo el directorio /opt así que de nuevas tiraremos de consola.

sudo tar xzvf android-studio-bundle-130.737825-linux.tgz -C /opt

Por último y no es que sea indispensable sino más bien recomendado, vamos a crear un lanzados para Android Studio. Con esto conseguimos poder anclar el programa en el dock de Elementary o que aparezca en el Unity Dash de Ubuntu. Esto es muy fácil, tan solo se trata de copiar y pegar lo que aparece a continuación.

Abrimos la consola y tecleamos lo siguiente.

sudo gedit /usr/share/applications/android-studio.desktop

Cuando se nos abra el programa escribimos las siguientes líneas:

[Desktop Entry]
Version=1.0
Type=Application
Name=Android Studio
Icon=/opt/android-studio/bin/idea.png
Exec=&quot;/opt/android-studio/bin/studio.sh&quot; %f
Comment=Develop with pleasure!
Categories=Development;IDE;
Terminal=false
StartupWMClass=android-studio

Si no quieres tirar tanto de código ni estar escribiendo, hay una segunda opción y es crear el lanzador directamente desde el mismo programa. Esta opción la tenemos en la ventana principal, la que te da las opciones para crear un proyecto, pues en Configure > Create Desktop Entry.

Con esta opción se estará creando lo mismo que hemos hecho más arriba de manera manual.

 Configurar Android Studio

La primera configuración obligatoria pasa por establecer las variables de entorno y creando la ya tan famosa JAVA_HOME. Esto lo hacemos editando el fichero /etc/environment y añadiendo la siguiente línea.

JAVA_HOME=/usr/lib/jvm/java-1.7.0-openjdk-i386

Como vamos a desplegar nuestros desarrollos sobre Android, parece lógico que necesitemos el kit de desarrollo para Android. Es bastante frecuente que cuando te dispones a descargar el SDK de Android, también conocido como ADT (Android Development Toolkit) te lo ofrezcan con un Eclipse ya configurado para desarrollar, pero como en este ejemplo utilizamos el propio IDE de Android tan solo bajaremos el kit de desarrollo, para ello lo descargamos desde aquí y lo descomprimimos en la carpeta que queramos.

Tenemos que volver a repetir el proceso de establecer las variables de entorno, pero en este caso necesitamos añadir los directorios tools y platform_tools a la variable $PATH. Esto lo volvemos a hacer desde el fichero /etc/environment/

Vale, ya estamos casi. Algunas utilidades del SDK nos van a correr bajo 32 bits. Si nuestro sistema operativo es de 64 bits vamos a necesitar instalar la siguiente librería.

sudo apt-get install ia32-libs

La última instalación que necesitaremos será ANT. No me quiero explayar mucho en esto, pero tan solo diré que ANT, es el phing para Java.

sudo apt-get install ant
Indicando a Android Studio dónde esta el ADT
Indicando a Android Studio dónde esta el ADT

Por útlimo le tenemos que decir a Android Studio donde se encuentra el kit de desarrollo para Android. Esto lo hacemos abriendo sus opciones de configuración desde la pantalla inicial, Configure > Project Defaults > Project Structure y en la primera caja de texto introducimos la ruta de donde hemos dejado el ADT de Android.

Y eso es todo, ya tenemos la instalación y configuración básica de Android Studio en nuestro sistema operativo. Esta claro que aún se puede poner muchas más cosas pero para comenzar no esta nada mal.

¡Hasta que volvamos a olernos!