El «nuevo mundo» de las PWA

Reading Time: 5 minutes

Para empezar… definamos ese «nuevo mundo»

¿Has pensado alguna vez que las Apps de las tiendas de Google y Apple son un paso atrás?. A mi como desarrollador se me pasa siempre por la cabeza, el atraso que es que los usuarios tenga que hacer «algo» para tener todas las novedades. Las PWA podrían ser el futuro.

Una PWA o Progressive Web App, según la wikipedia es:

Progressive web applications (PWAs) are web applications that load like regular web pages or websites but can offer the user functionality such as working offline, push notifications, and device hardware access traditionally available only to native applications. PWAs combine the flexibility of the web with the experience of a native application.

https://en.wikipedia.org/wiki/Progressive_web_applications

Traduciendo y yendo al grano son webs que al entrar te ofrecen al usuario instalación, especialmente en Android pero también en iPhone, Windows y Mac. Además una vez instalada funcionan muy similar a como lo haría una App nativa: funcionamiento offline, notificaciones push, acceso a hardware y más.

Si, con el mismo código generas una App para el 95% de los usuarios y contextos, llama la atención ¿verdad?

Por mi parte, para aprender lo máximo posible sobre PWAs lo he llevado a la práctica publicando un pequeño juego que desarrollé, el típico juego de memoria SIMON, si te interesa puedes probarlo e instalarlo (por supuesto) aquí: http://gratiss.es/juego-simonjr/

¿Y para que quiero una web offline?

Muchos ya conocéis la respuesta, pero otros seguramente no lo sabréis y la respuesta es muy fácil: Evidentemente una web de noticias, por ejemplo, no tiene demasiado sentido tenerla offline (aunque también), pero una herramienta web sería muy útil tenerla siempre a mano con un icono en el escritorio y notificaciones push.

Esa es la respuesta, sirve especialmente para herramientas o juegos, imaginemos por ejemplo una App simple de lista de tareas. Es muy fácil hacer una web app que gestione una lista pero si el usuario no la tiene siempre a mano y sincronizada no es útil (ni contemporánea). Pues esto lo solucionan las PWA.

El desarrollo web está de moda

Muchos se echarán las manos a la cabeza al leer esto, pero yo tengo la absoluta convicción de que el futuro de las apps es híbrido o incluso web 100%, tengo pendiente escribir algo específicamente sobre esto.

Actualmente empresas grandísimas con muchos recursos económicos hacen webs híbridas. Es una web embebida dentro de un código nativo (android e iphone). Evidentemente empresas pequeñas también lo hacen. ¿Cómo no va a ser beneficioso desarrollar una única App (con un único código) y poder publicarlo tanto en android como en iphone? ¡Ah si!, perdón, no es beneficioso para los desarrolladores puros nativos, un abrazo para todos ellos por cierto 🙂

Las PWA son un paso previo. Un gran paso previo. No es necesario subir una app a ninguna tienda, es simplemente eso: una web que se puede instalar. Teóricamente son un primer paso para que posteriormente el usuario, contento con el funcionamiento que le aporta el servicio que le da la PWA, acabe por instalarse la app de la tienda (probablemente híbrida también, de hecho, el mismo código). Pero el funcionamiento es tan parecido o tan potente que probablemente no haya necesidad de instalarse una app con lo que para muchos usuarios conlleva: buscar la app en la tienda, saber la clave de descarga, tener espacio en el móvil, etc, etc.

¡Parece que todo son ventajas! pero… no es oro todo lo que reluce.

¿Por que no triunfan las PWAs de forma masiva?

Evidentemente no todo son ventajas, el principal problema es que son muy muy nuevas y se va asumiendo poco a poco. Chrome (como no podía ser de otra forma) ha sido la primera en incorporarlas sobre todo en Android, al entrar en una PWA desde Android en chrome te ofrece la posibilidad de instalarla. Y digo bien con «instalar» ya que no es solo un acceso directo a una web, sino un espacio para los archivos y recursos necesarios, igual que una Aplicación nativa.

En Windows y Mac también se pueden instalar, pero el navegador no te ofrece la posibilidad nada mas entrar (no tardará mucho en hacerlo), hay que hacerlo a través del menú de tres puntos del navegador, ahí está la posibilidad de instalar.

Así se ve al abrir la PWA instalada en un Mac.

En iOS sorprendentemente también es posible pero usando Safari (tiene sentido que sea en safari porque es algo muy íntimo con el sistema operativo) evidentemente no ofrece la instalación pero pulsando en «compartir» se puede añadir a la pantalla de inicio y queda prácticamente como una app.

Tiene por tanto el handicap de que no es tan fácil instalar como podría ser, algo que contra resta lo fácil que es tenerla instalada y desarrollar una PWA, nada que ver con una App de la store. De todas formas, no creo que tarden mucho en estandarizar todo el sistema.

¿Que características tiene que tener una web para ser una PWA instalable?

Son solo cuatro puntos a tener en cuenta pero se deben cumplir de manera exhaustiva:

  1. Incluir un manifest.json (imprescindible que incluya un short_name)
  2. Icono png de 192×192 píxeles
  3. Service workers activado
  4. El dominio donde está la PWA debe ser https

Vamos punto por punto:

manifest.json e icono

Es un archivo JSON que describe las características de nuestra PWA. Yo lo he resumido al mínimo. Leerás en otros sitios la cantidad de iconos que puedes poner… si, tantos como te alcance la paciencia, pero realmente solo necesitarás el de 192px cuadrado en PNG, puede llevar transparencia.

Otros valores importantes son el short_name, que es el que se mostrará en el escritorio tras instalar (debajo del icono); Y la start_url que es el punto de inicio de la PWA.

Así tu manifest puede tener esta pinta:

{
 "short_name": "MyApp",
 "name": "This is my cool App",
 "icons": [
    {
    "src": "icon_192x192.png",
    "type": "image/png",
    "sizes": "96x96"
    }
 ],
 "start_url": "index.html"
}

Y hay que enlazarlo en la cabecera del html así:

<link rel="manifest" href="/manifest.json">

Serviceworkers

No lo conozco con detalle pero es una especie de proxy para el manejo de urls dentro de la PWA y también hace de caché de archivos. Así la PWA podrá funcionar sin internet mostrando las imágenes que tenga cacheadas y navegando por las distintas páginas que esté compuesta.

También es un servicio que se queda funcionando en segundo plano y sirve por ejemplo de listener para mostrar notificaciones push.

No pongo el código porque es demasiado largo, si alguien está interesado puedo enviárselo sin problema. Os dejo un enlace donde Google lo explica con pelos y señales y deja código para que utilicéis: https://developers.google.com/web/fundamentals/codelabs/offline/?hl=es

HTTPS

Esto es un requisito pero debería ser obligatorio en todas tus webs puesto que la tendencia actual es hacerlo todo con el protocolo seguro. Servicios como este y muchos otros «obligan» a usar https para que funcionen, de hecho para instalar el service workers es necesario hacerlo por protocolo seguro.

Tengo pendiente otro post a cerca de «securizar» tu dominio pero se resume en instalar un certificado en tu servidor. Se puede adquirir pero hay un servicio gratuito que lo hace todo, es Let’s Encrypt.

Conclusión

Así que como verás no es tan complicado hacer una PWA y tiene multitud de ventajas. Como he dicho antes simplemente son webs que se instalan pero para que sean todo un éxito pasa por que estandaricen la forma de ofrecer la instalación y porque no… tiendas de PWAs que ya hay algunas, por ejemplo esta que he montado yo 🙂 https://gratiss.es

Desarrollo de juegos con Unity

Reading Time: 8 minutes

Vocación

Desarrollar juegos y en general programar es algo que tengo interiorizado desde muy pequeño cuando leía una y otra vez revistas como Micromanía, Hobbi consolas y similares.

¡¡Micromanía 225 pesetas!! recuerdo que eso suponía un esfuerzo en mi economía pero que no me dolía cuando era la fuente más increíble de información en Español sobre el mundo de los juegos. No hablaba mucho sobre programación pero en aquella época era algo bastante «culto» sobre el mundillo.

Después de las lecturas y cargado de ideas uno volvía a la realidad con su Spectrum y a pesar de todo el empeño que se le ponía, basic era… demasiado básico para poder hacer algo decente más allá de un juego de preguntas y respuestas sin gráficos de por medio. Por no hablar de lo difícil que por aquella época resultaba aprender algo, no como ahora con Google y YouTube.

La verdad es que no hice ningún juego o al menos no lo recuerdo, pero siempre me quedó esa espina clavada…. y yo me decía «¡por ideas no es!» pero había un escalón técnico importante.

Empezando

Hace algún tiempo que empecé a hacer mis pinitos en los juegos. Esto coincidió con que fui padre y cuando menos tiempo tenía, pero al final se encuentra hueco.

¿Como empecé? con una de los lenguaje que domino: jQuery, que al final no es más que un «manejador» super ágil del DOM pero de propósito general, para nada pensado específicamente para juegos. Aun así he desarrollado un par de juegos que ya están publicados y varios que me quedaron sin publicar. Ambos publicados son clones pero cada uno con su propia «alma». Están pensados para niños de 2 años en adelante pero sirve para cualquiera que quiera entrenar/calentar su mente. Son juegos tan simples como «buscar parejas» añadiendo varios pros, como poder jugar en Español o Inglés y con algunos niveles algo complejos.

 

El de animales llega casi a los 300 usuarios activos… algo que me enorgullece. La segunda hoy en día no tiene muchos usuarios, seguramente los animales tienen más «tirón» que los colores. Los juegos son gratis y para colmo no tienen publicidad.

Técnicamente no están mal aunque estén desarrollados únicamente con jQuery. Vistosos para los niños y además, se de buena tinta por amigos y por mis propios niños que gusta y entretiene.

Encaminarme a algo más profesional

Y cuando digo profesional no me refiero a vivir de ello, me refiero a usar una plataforma (llámese framework) destinado a hacer video juegos para «matar dos pájaros de un tiro», conocer una plataforma que me permita hacer casi de todo en el futuro y aprender algo nuevo (lenguaje o lo que sea).

Lo primero que se me ocurrió fue buscar frameworks basados en javascript y la verdad que hay muchísimos, tantos que uno acaba un poco perdido porque al final cada framework está especializado en una cosa concreta con lo cual es difícil decidirse.

Por algún motivo empecé por 3D, y es impresionante lo bien que los navegadores modernos mueven gráficos 3D con físicas complejas, librerías como three.js que usando el canvas pintan directamente usando la GPU, lo que les da mucha agilidad.

Aquí os dejo  la página de ejemplos de la propia three:

https://threejs.org/examples/#webgl_animation_cloth

Esta librería tiene sus propias físicas pero se queda corta en cuanto a componentes destinados a desarrollar un juego por ejemplo, es por ello que existen otras librerías como ammo, bullet, cannon, todas basadas en three.js pero centradas en la física y en los controles, todas son impresionantes.

Después de esta investigación, testeo y jugueteo con estas librerías me di cuenta de que quizás para empezar el 3D parecía un poco pretencioso por no hablar de que requiere muchísimo más trabajo hacer cualquier pequeño juego. Decidí que debía volver al 2D.

Profesional y en 2D

Vuelta a la carga de la investigación… cuando buscas estas keywords en google: framework, game, 2d. Uno se sorprende de la cantidad que hay… al final es difícil probarlas todas y empecé a leer reviews de gente que si lo había hecho y me decidí a probar pixi, un framework impresionante con mil ejemplos que mucha gente habla bien de el además con una comunidad muy amplia.

http://www.pixijs.com/

Estuve haciendo bastantes pruebas y me resultó muy fácil empezar a hacer las primeras cosas, un juego de burbujas… muy simple.

Según avanza uno se va dando cuenta de que faltan algunas cosas, o requieren de un trabajo extra. Haciendo memoria la falta más importante es un sistema de escenas, me explico. Casi todos los juegos tienen un menú principal, al pulsar en una de las opciones va al juego por ejemplo. Pues el menú sería una escena y el juego sería otra escena. En pixi hay que hacerlo manualmente ocultando y descubriendo objetos, sin embargo suena simple pero a la hora de hacerlo  no resulta cómodo tener que estar parando animaciones, sonidos, etc etc… Cae uno en la cuenta que al final pixi es un «renderizador» de gráficos, pensé que debía haber otra cosa.

http://phaser.io/

Las escenas también son «fases» del juego y así encontré Phaser otra librería basada en Pixi. Es una capa por encima de Pixi (ya que este al fin y al cabo solo «pinta» gráficos en pantalla) que añade principalmente el control de escenas (y otras muchas más cosas que no llegué a controlar).

¡Ahora si! me dije cuando podía hacer distintos scripts para cada sección de juego. LLegué a avanzar bastante y a tener una primerísima versión del juego de burbujas:

Llegado a este punto pensé que sería buena idea pasar el desarrollo al equipo de beta testing, es decir, mis hijos. Para ello lo mejor sería embutir el juego en una app android. Justo cuando pensé en esto tenía la mosca detrás de la oreja de que podría encontrarme con algunos problemas por que no sabía como se iba a comportar la librería dentro de una app. Pues efectivamente al compilar e instalar me di cuenta del grandísimo problema de phaser, al menos problema para mis intenciones:

Todo funcionaba a excepción de los sprites y esto tras investigar se debe a su sistema de cacheo de assets, deben ser urls para no chocar con ciertas políticas de seguridad de los navegadores, incluso cuando lo estamos ejecutando en local en una app. Al estar metido en un webview no encuentra las urls locales (y el sistema de cache no sabe enrutarlo)

Por más que investigué la única solución parecía ser usar algún framework de javascript para móviles, tipo phonegap. Parece ser que al instalarlo conjuntamente pueden servir a phaser las urls como un servidor local.

Pero eso si que no me gusta, «demasiadas capas» pienso yo, y demasiadas dependencias: javascript, navegador, pixi, phaser, phonegap, android e ios y finalmente play store y appstore. Dejé pasar un tiempo tras la frustración y decidí buscar algo totalmente distinto.

¿Plataforma profesional de desarrollo de video juegos? Unity

Un día recordé que mis colegas de Radical Graphics me comentaron hace tiempo que usaban Unity para desarrollar sus juegos. También uno tiene el logo en el subconsciente cuando empieza algún que otro juego. Es fácil encontrar ejemplos de juegos hecho con unity, pero lo más importante es: que sea potente con una comunidad amplia. Versátil, para poder hacer distintos tipos de desarrollo y si es grátis (al menos para comenzar) pues mejor que mejor.

Lo que más me sorprendió desde el primer momento es la cantidad de plugins y assets gratis que hay para comenzar, la propia plataforma ofrece mini juegos gratis de ejemplo para aprender de ellos.

Algo que no me gustó al principio es que parece estar muy destinado a la parte visual, pero esto es por mi carácter background… pronto me di cuenta que ¿»que es un juego si no es visual»? y no está nada mal este apartado, muy fácil de manejar.

En cuanto a la programación, en versiones anteriores se podía desarrollar con javascript, pero por algún motivo lo quitaron y ahora solo se puede desarrollar con C# (C Sharp), así que era otra ventaja más, aprender un nuevo lenguaje.

Curiosidad para el que no lo sepa C# viene de C «doblemente sumado». Empezó con el lenguaje C allá por 1969, posteriormente con la programación orientada a objetos y un poco más de alto nivel salió C++ que es como C=C+1 es decir sumarle uno, este vio la luz en 1979. Y ya por 1999 salió en escena C#, la almohadilla es como cuatro sumas puestas en un cuadrado, y sería como C++++, es decir C+2. La diferencia de este con el resto es brutal, siendo un leguaje de super alto nivel, muy fácil de aprender.

Actualmente tengo casi lista la primera versión de mi juego «simplón» de explotar burbujas. Se me ha ocurrido que voy a ir haciendo juegos adaptado a la edad de mis niños, ahora tienen 3 años así que lo de explotar cosas tocando en la pantalla les chifla, cuando sepan apuntar, lanzar, etc etc, habré aprendido a hacerlo.

¿Cómo es programar en Unity? a muy grandes rasgos, tienes una escena que puede ser 2D o 3D y una cámara, es esta escena puedes crear objetos llamados game objects, y a estos se les asignan unos componentes configurables que dependiendo de estos se comportarán de una forma u otra. Por ejemplo podemos poner un game object en una posición concreta de pantalla, asignarle un componente sprite renderer y configurarlo con una imagen de una pelota. Con esto se verá un pelota en pantalla inmóvil. Si le asignamos un componente rigid body tendrá un cuerpo y le afectarán las físicas, como por ejemplo la gravedad. Si le asignamos un componente collider, podrá detectar que se choca con otros colliders. Le podemos asignar un componente script y asignarle un archivo C#, este inicialmente (aunque no obligatoriamente) tiene dos métodos básicos que son Start() y Update(). En el gameobject Start se llamará la primera vez que el objeto está en escena y podremos retocar parámetros de los componentes del propio objeto o también de los demás de la escena. Update se llamará una vez cada frame. Y así se hace todo.

Como con todo… en youtube hay mil videos para aprender, un canal que me gusta especialmente es este: https://www.youtube.com/user/Brackeys

Tiene un potente sistema de partículas, un animador, sistema de esqueleto… y más que me quedará por descubrir. Algo también muy interesante es una tienda de objetos ya predefinidos que pueden subir los mismos usuarios, hay objetos y paquetes tanto de pago como gratuitos. Como es evidente los más famosos son los gratuitos y hay más de pago que gratis. De cualquier forma podemos importar cualquier imagen (sprite) que obtengamos de internet o que diseñemos nosotros. También objetos 3d. Unity tiene una especial conexión con modeladores 3D como por ejemplo Malla o el tan de moda blender. Pudiendo tener un objeto importado, hacer correcciones en blender y ver el resultado en unity ya integrado en la escena.

Blender que por cierto es una maravilla 100% gratuita y completísima: https://www.blender.org/

Cuando tenga terminado mi juego de Burbujas con Unity lo añadiré a este artículo.

Ya está listo hace un tiempo, aquí puedes instalarlo en un móvil Android: http://bit.ly/2EXzDH9

Tiene esta pinta:

Conclusión

Si quieres iniciarte en el mundo de desarrollo de video juegos… no es fácil, pero es mucho menos difícil de lo que cabría imaginar, sobre todo si sabes programar. Pero incluso si no sabes programar Unity no es mala opción puesto que tiene una grandísima parte visual que solo hay que saber tocar parámetros y en cuanto a la parte de programación, C Sharp es facilísimo de aprender.

¡Anímate!