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!!

Anuncios

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!

Framework vs Flat Code

¿Utilizar un framework para tus proyectos o hacer la de Juan Palomo? ¿Eres un Chuck Norris de la programación por empezar desde cero, o un mariquita por tirar de frameworks? Este post va dirigido a todos aquellos que como yo, pensaban que eran “peores” programadores por tener que recurrir a utilizar un framework para sus proyectos. Sigue leyendo y date cuenta que no, que no eres un mariquita ni “peor” desarrollador.

¿Qué es un framework?

Un framework es una herramienta que por lo general te hará la vida mucho mas fácil a la hora de empezar un proyecto nuevo pero que en ocasiones te puede dar muchísimos dolores de cabeza, sobretodo cuando estas empezando y aun no tienes ni idea de como funcionan todos sus entresijos. La definición formal de framework la he sacado del blog de Kabytes.

Un framework o infraestructura digital, es una estructura conceptual y tecnológica de soporte definido, normalmente con artefactos o módulos de software concretos, con base a la cual otro proyecto de software puede ser más fácilmente organizado y desarrollado.

Así pues hay frameworks para casi todos los lenguajes (existe algún framework para bash? xD) pero de todos ellos lo que pretenden aportar es una capa de abstracción que nos libere de programar ciertas tareas que se alejan de lo que es la lógica de negocio de nuestra aplicación. ¿Para que programar un método de envío de emails si con un framework ya existe? Por ejemplo…

 

Venga, convénceme

Lo sé, estoy enamorado de Symfony2 y parece que estoy haciendo una campaña de evangelización, pero al fin y al cabo, la última decisión es tuya. Lo que si que esta claro y hay que decir es que utilizar un framework no hace que ya seas un Master of the Universe del lenguaje “original”, cuando conoces el lenguaje “base”, llevas años programando con el y das el salto a un framework, ahí, si si, ahí es cuando eres un Chuck Norris. Ahora bien, ventajas de un framework (tomaremos como ejemplo Symfony2…)

  • POO, toma ya.
  • MVC, boom.
  • ORM, ultraboooom.
  • Sistema de caché.
  • Ficheros de configuración.
  • Generación del CRUD automática.
  • Muchísima documentación.
  • Sistema de enrutamiento.
  • Integración con el framework correspondiente de test unitarios y funcionales.

Y la lista podría seguir…

 

Pero, ¿programar desde cero no tiene ninguna ventaja?

Hombre, pues si, las tiene todas ya que como he dicho más arriba, te da un conocimiento del lenguaje brutal a parte de tener control sobre todo tu código (este es otro de los argumentos típicos para no utilizar un framework). Todo depende del proyecto y es que hay que pensar con lógica, los frameworks cargan una estructura de librerías que a diferencia del “Flat code” no. Ahí te estas asegurando de cargar lo único que vas a utilizar, por eso hay que tenerlo en cuenta en función del proyecto.

 

Conclusiones

En varios proyectos que estoy llevando tiro de framework sobre todo porque trabajo mucho mas rapido y por que los requerimientos lo exigen, pero mi consejo es que te empapes bien del lenguaje porque solo así sabrás solucionar mucho más rápido los errores que te van a dar los frameworks. Si queréis leer el artículo del que se basa este no dudéis en pasaros por el blog de Kabytes ya que ahí amplía mucho mas la info.

Si te ha sido útil este post no dudes en comentar y en darle a los botoncicos sociales ya que eso hará que el blog siga creciendo 😀

 

¡Hasta que volvamos a olernos!