¿De dónde venimos?

Consultora especializada en tecnologías open source.

En activo desde 2003.

Áreas - Sistemas y VoIP

• Telefonía IP: Asterisk

  • Contamos con cerca de 100.000 extensiones desplegadas.

• Especialistas en sistemas Linux

  • Seguridad en Redes
  • Alta Disponibilidad
  • Firewalls
  • Sistemas de Correo

Áreas - Desarrollo web

PHP

• Zend Framework
• Wordpress
• ...

Javascript

• angularJs
• ionic framework
• ...

Áreas - Desarrollo Móviles

• iOS (Objective C / Swift)
• Android

• Windows Phone

• Cocos2D

• Aplicaciones Híbridas:

  • Cordova + ionic Framework

El equipo

¿Qué os vamos a presentar?

wp-ion

• Esqueleto de aplicación híbrida para llevar los contenidos desde cualquier wordpress a una aplicación híbrida.
• Desarrollo en fase MUY beta

Ingredientes (I)

Ganas/Necesidad de hacerlo

¿Por qué mi wordpress va a estar en una aplicación móvil?

Ingredientes (II)

Un Wordpress con contenido

Alguien a quien le interesen tus contenidos

Ingredientes (III)

NodeJS

Node.js es un entorno de programación en la capa del servidor (pero no limitándose a ello) basado en el lenguaje de programación ECMAScript, asíncrono, con I/O de datos en una arquitectura orientada a eventos y basado en el motor V8 de Google.

Fuente

Algunas cifras (de 2014)

• Un total de 21,44 millones de españoles accedieron a Internet en movilidad.
• Por primera vez en España hay más usuarios de Internet (76,2%) que de ordenador (73,3%).
• El 77,1% de los internautas accedieron a Internet mediante el teléfono móvil.

Fuente (ine.es)

y la cosa solo empeora mejora.

• Los usuarios de teléfonos móviles serán 9.300 millones en 2019.
• De los cuales 5.600 millones serán smartphones.

Fuente (Mobility Report de Ericsson @elmundo)

¿Qué podemos hacer?

¿Qué podemos hacer?

• webs responsive
• web app
• aplicaciones móviles
  • híbridas
  • nativas

Web adaptable

(AKA Web responsive)

Técnica para desarrollo de frontend web (CSS).

El objetivo del diseño responsive es adaptar la apariencia de una página web al dispositivo que se esté utilizando para visualizarlo.

El contenido se consume desde el navegador de tu dispositivo.

Web Apps

Una web App es una aplicación web (o página web), diseñada exclusivamente para un dispositivo móvil.

Generalmente, al acceder a una web desde un terminal móvil, se realizaría una redirección hacia la web app

El contenido se consume desde el navegador del dispositivo.

Aplicaciones Móviles

Aplicación descargada e instalada directamente en el dispositivo móvil.

(casi) Siempre se instala desde las tiendas de la plataforma: Apple Store, Google Play, etc.

Acceso completo al dispositivo.

Tipos de Aplicaciones móviles:

• Nativas
• Híbridas

Nativas

Aplicaciones Móviles

Las aplicaciones nativas son aplicaciones compiladas y escritas especificamente para cada plataforma.

Es la aplicación más óptima que puede ejecutar un terminal.

• Android: Java (Android Studio)
• iOS: ObjectiveC / Swift (x-code)
• Windows Phone: C# (Visual Studio)

Híbridas (I)

Aplicaciones Móviles

• Es una aplicación que ejecuta en un contenedor web una webapp concreta.

• El contenedor web (el webview), expone la capa física del móvil directamente a la webapp.

• El core (la webapp), es completamente reutilizable entre distintas plataformas.

Híbridas (II) - (webview)

Aplicaciones Móviles

• Apache Cordova: Plataforma que permite construir aplicaciones nativas utilizando tecnologías web (HTML5 + CSS + Javascript).

• Disponible para las siguientes plataformas: iOS, Android, Blackberry, Windows Phone...

(Apache License)

Híbridas (III) - (webview)

Aplicaciones Móviles

• Cordova Plugins: Piezas de software que exponen funcionalidad del dispositivo, en la webapp.

• Actualmente hay listados 965 plugins en el [http://plugins.cordova.io/](repositorio oficial)

• Funcionalidades típicas: GPS, cámara, capa de red, notificaciones PUSH, bluetooth...

Híbridas (III) - (webapp)

Aplicaciones Móviles

• Ionic Framework: Framework de desarrollo basado en HTML5, con el propósito de generar aplicaciones móviles híbridas.
• Tiene especial preocupación por conseguir rendimiento optimizado (Aceleración por hardware, mínima manipulación DOM, etc.)

(Licencia MIT)

Resumen (I)

Resumen (II)

Sí, adaptarse

Y como ya hemos comentado, un primer paso es nuestra web debe ser Responsive

y sí, adaptarse a Google

Queremos que nuestros contenidos estén correctamente indexados en Google.

• Por lo que …

Google said

El 26 de febrero Google anunciaba a través de su Blog Oficial de Webmaster que las webs que no estén preparadas para móviles, el 21 de abril perderían posicionamiento con respecto a otras webs optimizadas.

(sólo en las búsquedas realizadas desde dispositivos móviles)

Pero al grano

Hoy hemos venido aquí a hablar de WordPress.

WordPress está por todas partes (I)

Una gran cantidad de información en Internet está alojada en WordPress.

WordPress está por todas partes (II)

Y una gran cantidad de webs corporativas son posibles gracias a WordPress.

Algunas cifras sobre WordPress

• El 23% de Internet utiliza WordPress.
• más de 74.6 millones de sitios están hechos con WordPress
• Tiene el 53.8% del mercado de CMS

https://es.wordpress.com/

¡Internet es wordpress!

La ventaja

Tenemos el 23% de información en Internet que está:

ESTRUCTURADA

(Podemos consumirla de manera automatizada)

Y nos interesa

Información estructurada (I)

• POSTS
• PAGES

Información estructurada (II)

• CATEGORIES
• TAGS

Información estructurada (III)

• AUTORES
• FECHAS

Queremos consumir esa información

En cuanto a sistemas distribuidos, nos quedamos con REST

* SOAP, XML-RPC... están pasados de moda ;)

¿Qué es REST?

• REST es un estilo de arquitectura para diseñar una API.

• Son un conjunto de recomendaciones que tienen como objetivo hacer que la API sea lo más usable posible.

• (Diseñar una API no difiere de diseñar una Interfaz de Usuario; debería ser coherente y fácil de usar).

Ventajas REST

(o por qué defender una implementación REST frente a soluciones RPC tradicionales)

• La arquitectua se simplifica (rendimiento)
• Peticiones se simplifican (velocidad)
• Interoperabilidad real entre distintas plataformas
• Curva de aprendizaje inexistente
• Resultados visualmente interpretables
• Fácil escalabilidad de evolución de sus componentes

WP-API

Plugin que convierte wordpress en una API de publicación y administración de contenidos muy fácil de usar.

Enlace de descarga

WP-API - ¿qué podemos hacer?

Permite CREAR, MODIFICAR, ELIMINAR y CONSULTAR:

• Entradas
• Páginas
• Usuarios
• Multimedia
• Taxonomías
• Tipos de contenido personalizado

WP-API - Futuro

Existen planes de incluir wp-api en el core de Wordpress.

WP REST API

Instalación plugin

Enlace

WP REST API

Instalación plugin

Habemus API REST

    GET /wp-json/posts
    HTTP/1.1 200 OK

WP REST API

Configuración del entorno

Modificar nuestro .htaccess

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Methods "POST, OPTIONS"
Header set Access-Control-Allow-Credentials "true"
Header set Access-Control-Allow-Headers "Authorization, Origin, Content-Type, X-CSRF-Token"

No dejar esta configuración en producción

yeoman

Yeoman es un generador de esqueletos para nuevos proyectos.

• prescripción de buenas prácticas
• preconfiguración de herramientas para mantener la productividad

yeoman

Instalación

Requisitos previos: npm, git

Yeoman se instala por linea de comandos con npm.

$ npm install -g yo

yeoman

Generadores

Yeoman necesita de generadores para poder funcionar.

Así pues existen generadores para:

• Generar una aplicación angularJs (generator-angular)
• Generar un tema de wordpress (generator-wp-theme)
• ...

(1697 en yeoman.io/generators)

Cualquiera puede publicar un generador en npm.

ionic cli

• Plataforma para comenzar, construir, probar y desplegar aplicaciones con Ionic Framework.

Ionic se instala por linea de comando con npm.

$ npm install -g ionic

Ejemplos

ionic cli

Comenzar un proyecto en blanco:

    $ ionic start myapp blank

Simular un proyecto en modo debug:

    $ ionic serve --lab

cordova

• necesitamos instalar la suite cordova de cara a instalar nuestra app en dispositivos móviles.

Cordova instala toda su suite desed línea de comando con npm.

$ npm install -g cordova

Todo listo!

Recapitulemos:

1. Tenemos un wordpress RESTIZADO con WP REST API.
2. Tenemos nodejs y npm instalado en nuestra máquina.
3. Tenemos yeoman.
4. Tenemos cordova.
5. Tenemos ionic-cli preparado.

El último paso es instalar generator-wpion

generator-wpion

Instalación

• Hemos creado y liberado un generador para yeoman
  • basado en ionic blank template
  • Está publicado en nuestro repositorio de github
  • Todavía no está publicaod en npm [beta ;)]

Instalamos el generador para yeoman:

    $ npm install -g irontec/generator-wpion

generator-wpion

Ejecución

Dentro de la carpeta donde queramos generar el proyecto, ejecutamos:

yo wpion

generator-wpion

Ejecución

Contestamos a las preguntas:

generator-wpion

Simulación

Ionic-cli nos permite emular el comportamiento de iOS y Android en nuestro navegador:

     ionic serve --lab

generator-wpion

Simulación

Futuro

pasado mañana

• Versiones beta más estables
• Ya tenemos varias mejoras en mente

Refactorización

Mover todo el código a componentes reutilizables

Bower

Plugins (I) - Usuarios

Integración con el registro de usuarios

Hacer login y registros desde WP-ION

Plugins (II) - UUIDs

Registrar UUIDs de usuarios

Almacenar los UUIDs de los dispositivos de los usuarios para...

Plugins (III) - PUSH

Notificaciones PUSH automáticamente desde WordPress

Queremos enviar notificaciones al usuario mediante notificaciones push.

Plugins (IV) - Newsletter & PUSH

Integración del plugin de notificaciones PUSH con plugins habituales de newsletter.

¿ALGUNA SUGERENCIA?