Incluir publicidad en una aplicación Ionic

Así es majos, este post es para enseñaros a empezar a monetiza tu nueva aplicación. Si has leído artículos viejos míos quizá ya sabrás a hacer una app con Ionic, habrás aprendido a meter un vídeo de Youtube en tu aplicación y tal vez hayas visto mis casos de éxito como este o este. Pues el siguiente paso es darse de alta en una red de anuncios, incluir publicidad en una aplicación y empezar a ganar pasta bitches.

Haciendo negocios con Admob

Lo primero que tenemos que hacer de todo es registrarnos en Admob. Admob es una empresa de “Mobile Advertising” por lo que si queremos ganar dinerico tenemos que enseñar anuncios en nuestra aplicación y esta empresa tiene muchos anuncios para enseñar, ah y es de Google jeje.

Nos venimos a esta url y realizamos el proceso de inscripción. Una vez que hayas terminado verás el panel de control en el que gestionarás tus bloques de anuncios y campañas.

Panel de control de Admob con el que podremos incluir publicidad en una aplicación
Panel de control de Admob con el que podremos incluir publicidad en una aplicación

Para poder incluir publicidad en una aplicación tendremos que conseguir un Ad unit ID, que es el código que identifica nuestra aplicación contra el sistema de anuncios. Para ello hay que hacer click en el botón:

Botón para añadir una nueva aplicación
Botón para añadir una nueva aplicación

Si tu aplicación no esta publicada ya en las tiendas oficiales te tocará hacerlo manualmente. Para ello hay que rellenar un formulario en el que se nos pide el nombre de la aplicación y la plataforma objetivo.

Registrando mi nueva app
Registrando mi nueva app

Una vez pases por las diferentes opciones para configurar el bloque de anuncios y ver la configuración opcional de analítica llega la parte de la implementación en el código de tu aplicación. Pero antes no te olvides de apuntar el código ca-pub, es el que se utilizará en la aplicación y aparece durante el proceso de creación del bloque de anuncios. Tiene una pinta tal que así:

Código con el que ganaremos dinerico
Código con el que ganaremos dinerico

Configuración necesaria para incluir publicidad en una aplicación

Si quieres incluir publicidad en una aplicación vas a tener que ensuciarte, meterte en código así que voy a ir picadito.

  • Abres la terminal (o consola) y te vas a la raíz de tu proyecto.
  • Te instalas el plugin cordova-plugin-admob escribiendo el siguiente comando y dejas que termine el proceso
cordova plugin add com.rjfun.cordova.plugin.admob
  • Si te quedas mas tranquilo puedes revisar los plugins instalados con el siguiente comando.
cordova plugin list
  • Añade el siguiente código a la función .run en el fichero app.js que lo encontrarás dentro del directorio www. También tienes una versión separada del script.
.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {  
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
    if (window.device && typeof AdMob !== "undefined") {
          var admob_key = ca_app_pub_code = "AQUI_TU_CODIGO_CA_PUB";

          AdMob.createBanner( {
            adId: admob_key,
            position: AdMob.AD_POSITION.BOTTOM_CENTER,
            isTesting: false,
            adSize: 'SMART_BANNER',
            success: function(){
            },
            error: function(){
              console.log('failed to create banner');
            }
          });
      }
  });
})

Obviamente tienes que cambiar el valor de la variable admob_key, donde pone “AQUI_TU_CODIGO_CA_PUB” tienes que sustituirlo por tu código, el que has generado un poco mas arriba al registrar la aplicación en Admob.

Y eso es todo chicos. bueno, no del todo. Mientras estes haciendo pruebas en tu entorno puedes activar la variable isTesting, es un booleano así que sus valores son true o false. Esto sirve para enseñar un anuncio de prueba antes de ser enviado a las tiendas oficiales. No te olvides de dejarlo como false cuando compiles y vuelvas a enviar la app o sino no verás gallinicas 😛

Si tenéis alguna duda sobre cómo incluir publicidad en una aplicación o sobre cualquier otra cosa podéis dejarla en los comentarios o usar el banner de Twitter para preguntarme directamente. Venga gandules que es gratis.

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

 

Hala a mamarla!

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!