Cómo crear aplicaciones web progresivas con Angular/Ionic 1.x e WordPress

El término aplicación web progresiva se refiere a un grupo de tecnologías, como trabajadores de servicios push y notificaciones, que pueden aportar actuaciones nativas y experiencia del usuario para aplicaciones web. La fecha límite fue inventada en 2015 por el diseñador Frances Berriman y el ingeniero de Google Chrome Alex Russell. Algunas de las características de PWA son:
Progresivo: funciona para cada usuario, independientemente de la elección del navegador, porque están construidos con una mejora progresiva como principio básico.
Responsivo: se ajusta a cualquier factor de forma: escritorio, móvil, tableta o formularios para aparecer.
Independiente de la conectividad: los trabajadores de servicios permiten el trabajo fuera de línea o en redes de baja calidad.
Como una sensación de aplicación como una aplicación para el usuario, con interacciones y navegación en el estilo de la aplicación.
Fresco: siempre actualizado debido al proceso de actualización del trabajador de servicio.
Claro: servido por HTTPS para evitar el snoping y garantizar que el contenido no haya sido modificado.
Descubribles: son identificables como “aplicaciones” debido a los manifiestos W3C [6] y al registro de trabajadores de servicio, lo que permite que los motores de búsqueda los encuentren.
Religinación: facilita el reempleo a través de funciones como notificaciones push.
Instalable: permite a los usuarios “mantener” las aplicaciones que consideran las más útiles en su pantalla de inicio, sin el dolor de cabeza de una tienda de aplicaciones.
Conectable-fácilmente compartido a través de una URL y no requiere una instalación compleja.
No hace mucho, tener una solicitud en una tienda de aplicaciones se consideraba el Santo Grial. Hasta ahora, muchas empresas aún siguen la ruta de publicación en el almacén de aplicaciones, sin embargo, según estudios recientes, solo el 26.4% de los usuarios que visitan una página en una tienda de aplicaciones hoy instalarán una aplicación. El otro 73.6% se pierde para el desarrollador y ni siquiera prueban la aplicación. De los que lo instalan, un promedio del 80 por ciento se pierde en los próximos 90 días. Como resultado, las mismas personas que declararon que los muertos Internet hace años gritan “las aplicaciones mueren” y “¡Espera! ¡Internet no está muerto al final! En la reciente conferencia de Google I/O 2017, ha habido muchas discusiones que mostraron cómo la web móvil moderna se redefine a través de PWA como Twitter Lite, Forbes o Wego. Requisitos preliminares PWA Todos los que trabajan en el desarrollo web saben que los marcos de JavaScript han evolucionado mucho en los últimos años. Los PWA son, en esencia, aplicaciones de JavaScript con algunas funciones adicionales, como manifiestos y trabajadores de servicios para el modo fuera de línea y notificaciones push.
Los marcos de JavaScript favoritos para el desarrollo móvil de PWA son actualmente Angularjs y Reactjs.Ambos tienen sus ventajas.Los AngularJ se pueden combinar con Ionic, que ofrece un conjunto de componentes listos para usar.React es muy intuitivo y fácil de trabajar y se beneficia de la existencia de Create-React-App, un proyecto estándar que contiene todo lo que necesita, de las actividades de desarrollo.En Create-React-App, la “compilación de producción es una aplicación web progresiva completamente funcional”.Independientemente de la elección del marco, ES6 es una necesidad, que aporta funciones fuertes, como clases, flechas, bloqueo, promesas y más.Aunque ES6 no es completamente aceptado por todos los navegadores, el transpilo como Babel está disponible, por lo que no tenemos que preocuparnos por la compatibilidad del navegador.
Cada PWA necesita una API para tomar contenido del servidor. NodeJS se ha vuelto extremadamente popular como plataforma para implementar API personalizadas, pero también podemos usar un CMS como un retroceso. WordPress actualmente alimenta el 27% de toda la web. A finales de 2015, Matt Mullenweg alentó a todos los desarrolladores de WordPress a “aprender JavaScript, profundo”. El cambio en la pila tecnológica aún no se ha convertido en la corriente principal, y la mayoría de los desarrolladores de WordPress todavía se basan en PHP para construir temas receptivos. Desde que comencé como desarrollador de PHP, entiendo su atractivo y progreso en los últimos años. PHP está estructurado y fácil de aprender, especialmente en comparación con JavaScript, donde las cosas pueden salirse de control con bastante rapidez. Sin embargo, no es posible negar que JavaScript es ahora la solución básica para crear experiencias maravillosas en la web. Las partes interesadas de WordPress ya saben que el cambio sigue, por lo que REST API se ha incluido en el núcleo a partir de la versión 4.5. Aunque más del 50% de los sitios de WordPress usan la última versión de CMS, el 30% de las instalaciones de WordPress están bloqueadas con la versión 4.4 o menor. Este número solo puede disminuir en el futuro y ciertamente podemos decir que el resto está disponible para la mayoría de los sitios de WordPress. También debo mencionar que la API REST WordPress está bellamente documentada y está disponible por defecto de manera relativa al sitio web. A continuación, le mostraré cómo construir un PWA básico con AngularJS e Ionic 1.x, por encima de la API REST WordPress.
Configuración ambiental
Revisaré la configuración de un sitio web simple de WordPress para exponer la API REST. Incluso si aún no sabe cómo hacerlo, hay innumerables buenos tutoriales que le mostrarán cómo lograr esto. En cambio, me centraré en configurar la aplicación Angular JS / Ionic 1.x. Después de desarrollar muchas aplicaciones en este cuadro, creamos una Boilerplate, que incluye: documentación sobre cómo configurar el entorno y estructurar la aplicación.
Tareas para la compilación, producción y aplicación de la aplicación.

Normas de codación y linters.
Pruebas unitarias y de extremo a extremo.
Al principio puede parecer sin importancia, pero tener un entorno de trabajo estructurado nos permitió escribir un código consistente y que se puede mantener.
Nuestro BoilerPlata también incluye tareas de Gulp para el seguimiento, los revestimientos, la transpilación, la generación de documentación con NGDOC, Test (Unidad y End-End) y Producción. El proyecto supone que NodeJS, NPM, Bower, Gulp e IonICcli se instalan a nivel mundial. Puede encontrar la documentación completa sobre cómo configurar el entorno aquí, solo tiene que seguir los pasos para comenzar. Estructurando la aplicación utilicé una estructura plegable por función, según lo recomendado por la guía de estilo de John Papa. Sin embargo, agregamos nuestro propio giro usando ES6.
Todos los archivos de aplicación están en la carpeta SRC que contiene:
Aplicación: una carpeta con archivos .js (controladores, módulos), plantillas HTML y archivos SCSS para cada módulo.
Activos: una carpeta para elementos estáticos, como imágenes, archivos JSON y el estilo global (archivos SCSS).
index.html: el punto de partida de la aplicación
Todos los archivos SRC se compilan, se transpilan y copian a una carpeta ejecutando el “Gulp” predeterminado. El comando “Bower Install” agregará la biblioteca Ionic a la misma carpeta. La aplicación se cargará automáticamente en el navegador predeterminado cuando use “Serva Ionic”. También agregué un archivo de configuración global (SRC/App/Config.json), desde donde la API de puntos finales puede modificarse y las formas de otros activos ( como el logotipo, el icono de la aplicación, etc.) se puede agregar. Las propiedades de configuración se adjuntan al objeto de la ventana desde un archivo src/app/main.js que se enrolla en: const fetchconfig = () => {
const $ initinjector = angular.injector ([‘ng’]);
Const $ http = $ initinjector.get (‘$ http’);
Const $ window = $ initinjector.get (‘$ window’);
return $ http.get (`$ {$ Window .__ Appicles_Bootstrap_data __. config_path}`);
};
…
fetchconfig ()
.Hen (Inicializar la configuración)
. Entonces (Boostostapapplication)
.Catch (ErrorHandler); Recuperar los datos de la API REST Lo primero que agregué en la aplicación fue un servicio de comunicación con la API. Como mencioné en la sección anterior, mapeo las formas de la API en un archivo de configuración global. En aras de la simplicidad, hemos incluido solo los puntos finales para hacerse cargo de las categorías y publicaciones aquí, pero, por supuesto, puede agregar fácilmente otros puntos finales para páginas, comentarios, medios de comunicación, etc.
{
“Exportar”: {
“Categorías”: {
“Find”: “//pwathemes.com/demo-api/wp-json/wp/v2/categories”,
“Findone”: “//pwathmes.com/demo-api/wp-json/wp/v2/categories”
},
“Publicaciones”: {
“Find”: “//pwathemes.com/demo-api/wp-json/wp/v2/posts”,
“Findon”: “//pwathmes.com/demo-api/wp-json/wp/v2/posts”
}
}
} Con esta configuración, podemos generar los métodos para conectarse a la API de backend en nuestro servicio: “Use estrictamente”; Angular. Module (‘AppTicles.api).
Appiclespi. $ Inject = [‘$ log’, ‘$ http’, ‘configuración’];
/**
* Servicio @ngdoc
* @name Appicles.api.apapticlespi
*
* @Decripction crea una API programática que incluye los puntos de exportación finales proporcionados por
* Servicio de configuración.
*/
La función appdiclespi ($ log, $ http, configuración) {
lima api = {};
Lime exportApiendpoints = Configuration.Export;
Object.Keys (ExportApiendPoints) .ForEach (función (punto final) {
VAR Methods = ExportApiendPoints [Endpoint];
Object.Keys (métodos) .forEach (función (método) {
API [CamelCase ([Method, End Point])] = function () {
Lime Params = argumento.length> 0 && angular.isdefined (argumentos [0])? argumentos [0]: {};
params._jsonp = ‘json_callback’;
URL de lima = métodos [método];
If (params && params.id) {
Url = url + ‘/’ + string (params.id);
Eliminar params.id;
}
Devuelve $ http.jsonp (url, {
Método: ‘Get’,
Parámetros: parámetros
});
};
});
});
API de regreso;
} Dado que la API REST utiliza el mismo punto final para leer artículos únicos y múltiples, transmitimos un parámetro “ID” que se acusará a la URL de la API. Además, tenga en cuenta que la API REST utiliza un parámetro “_JSONP” en lugar de la “devolución de llamada” habitual.
Después de agregar este servicio, todo lo que tenemos que hacer es inyectarlo en un controlador y analizar el resultado. Comenzamos creando un módulo de categorías que cargará nuestro controlador y plantilla: Angular.module (‘AppTicles.Categories’, [
“Ui.rouuter”,
‘Appicles.api’, ‘Appicles.Configuration’
] .Config ([‘$ stateProvider’, ‘$ urlrouterprofider’, ($ stateProfider, $ urlroufider) => {
$ StateProvider
.State (‘categorías’, {
URL: “/categorías”,
Controlador: “Categoritroller como categoría”,
TemplateUrl: “App/Category/Category.template.html”
});
$ urlrouterprofider.otherwise (‘/categoría’);
}]); En el controlador, utilizamos el servicio API para leer las publicaciones de las publicaciones:
Categorías de clases {
Builder ($ log, AppictionPi) {
Const popetateCategories = (resultado) => {
this.categorii = resultado;
};
Appiclesapi.FindCategories ({hide_empty: 1})

. Entonces (PopulateCategories)
.Catch ($ log.error);
}
}
Categorías.
Angular.module (‘Apticles.Categories’)
.Controller (‘Categoría -teller’, categorías); En la plantilla, repitemos los datos y mostramos los nombres de las categorías:

Copyright statement: Unless otherwise noted, this article is Collected from the Internet, please keep the source of the article when reprinting.