Este documento describe cómo crear aplicaciones móviles híbridas usando WordPress e Ionic. Explica que Ionic es un framework para desarrollo de aplicaciones híbridas y progresivas que usa Angular y componentes para facilitar el desarrollo multiplataforma. También cubre conceptos como el uso de TypeScript, la adaptación al dispositivo, el desarrollo basado en componentes y la integración con Apache Cordova para acceder a funciones nativas.

1. Como crear una app
móvil con
WordPress + Ionic
by Antonio Torres

2. 2
WHOAMI

3. Desktop VS Móvil

5. 5

6. 6
Progresive Web App (PWA)

7. ● Progresiva: funciona para todos los usuarios, sin importar la elección de
navegador, porque está construida con mejora progresiva como principio
central.
● Adaptable: se adapta a cualquier factor de formulario, sea escritorio, móvil,
tablet o lo que venga en el futuro.
● Independiente de la conectividad: mejorada con service workers para trabajar
sin conexión o con redes de mala calidad.
● Estilo app: al usuario le parece una app con interacciones y navegación estilo
app, porque está construida con modelo de shell de app.
● Fresca: siempre actualizada gracias al proceso de actualización de service
worker.
● Segura: emitida vía HTTPS para evitar intromisiones y para garantizar que el
contenido no se haya manipulado.
● Descubrible: se puede identificar como "app" gracias al manifiesto W3C y al
alcance de registro de service worker, lo que permite que los motores de
búsqueda la encuentren.
● Posibilidad de volver a interactuar: facilita la posibilidad de volver a
interactuar a través de funciones como notificaciones push.
● Instalable: les permite a los usuarios "conservar" las apps que les resultan
más útiles en su pantalla principal sin la molestia de una tienda de app.
● Vinculable : se puede compartir fácilmente via URL, no requiere instalación
compleja.
7

8. 8

9. ¿Que es Ionic?
Ionic es un framework para el desarrollo de aplicaciones híbridas y progresivas,
inicialmente pensado para móviles y tablets, aunque ahora también capaz de
implementar aplicaciones web e incluso dentro de poco aplicaciones de
escritorio multiplataforma. Su característica fundamental es que usa por debajo
Angular 2 y una cantidad de componentes enorme, que facilita mucho el
desarrollo de las aplicaciones.

10. 10

11. 11

13. Integración con Angular
Ionic está desarrollado sobre el framework Javascript Angular. Esto quiere decir
que para el desarrollo con Ionic podemos apoyarnos en todas las ventajas de
desarrollo con Angular, lo que nos permitirá contar con una excelente estructura
de proyecto, el trabajo con buenas prácticas, uso de patrones de diseño de
software variados y una buena gama de componentes y directivas.

14. Desarrollo basado en componentes
En Ionic, heredado del desarrollo con Angular, trabajamos en base a componentes. Esto quiere decir
que nuestras aplicaciones serán compuestas por un árbol de componentes que se utilizan los unos a
los otros para la conclusión de los objetivos globales de la aplicación.
Todos los frameworks modernos usan esta arquitectura, que se ha demostrado que es la que ofrece un
mejor código, más fácilmente escalable y mantenible.
Los componentes están pensados para, de manera modular y encapsulada, resolver pequeños
problemas. Por ejemplo puede haber componentes para implementar un sencillo botón, componentes
para hacer un sistema de navegación por tabs, para selectores de fechas, etc.

15. TypeScript
Otra cosa que viene dada por el desarrollo de Angular es el uso del lenguaje
TypeScript, que no es más que un "superset" de Javascript. Dicho de otra forma,
TypeScript es Javascript pero con añadidos pensados para mejorar el trabajo
por parte de los desarrolladores, haciéndonos más productivos.
La mayor aportación de TypeScript al lenguaje Javascript es la posibilidad de
definición de tipos para las variables, pero en general aporta mucho más y
además nos permite usar todas las mejoras de ES6 y algunas de ES7 en las
aplicaciones.

16. Look & feel adaptado al dispositivo
Los componentes de Ionic ya vienen adaptados al dispositivo de manera estética. Quiere decir que,
cuando se compila una aplicación para iOS el componente se visualizará de manera diferente que
cuando se compila para Android. En Android usará Material Design mientras que en iOS usará las guías
de diseño definidas por Apple.
Esto es una ventaja en sí, porque las personas disfrutarán de aplicaciones con una experiencia de
usuario cercana a la que están acostumbrados en su teléfono y nos evita a los desarrolladores la
necesidad de trabajar más para conseguir este efecto. Sin embargo, como autores de las apps con
Ionic también somos capaces de alterar el diseño de las aplicaciones, proporcionando una experiencia
de usuario específica y original para nuestra propia aplicación.

17. Look & feel adaptado al dispositivo

18. Desarrollo y compilado de aplicaciones
Con Ionic desarrollamos aplicaciones con las tecnologías web. Durante toda la etapa de desarrollo
usaremos el navegador para visualizar las aplicaciones, lo que permite un flujo de trabajo muy
productivo, ya que no se tiene que compilar. Aunque lo cierto es que, por la necesidad de transpilar el
código de TypeScript a Javascript compatible con el navegador, no será tan rápido de visualizar los
cambios como simplemente refrescar la página del navegador.
Una vez que la app está construida se tiene que realizar el proceso de compilación, en el que se
producen los ejecutables específicos para cada dispositivo. Ese proceso sí es un poco más pesado
para el procesador, pero se hace solo cuando tenemos que lanzar una nueva versión que se subirá a
las tiendas de aplicaciones.

20. Apache Cordova
Ionic se basa también en Apache Cordova para la implementación de las aplicaciones. Hay partes,
como el acceso a los componentes nativos del dispositivo, en las que se usan plugins que nos
proporciona Apache Cordova. Actualmente también Ionic es proveedor de algunos plugins para trabajo
con la parte nativa del teléfono.
Aquí como nativo nos referimos a elementos como la cámara, acelerómetro, teclado virtual, etc. Todos
esos elementos se pueden usar desde las aplicaciones de Ionic, con los correspondientes plugins
nativos, que forman una especie de puente entre el desarrollo con Javascript y el teléfono.

22. hostingyvps atowersg