wordcamp santander 2016 - aplicaciones web con angularjs y la rest api de wordpress

Aplicaciones web con AngularJS y la WP REST API

@marcelotena

#WCSantander

#1La aplicación

https://github.com/marcelotena/wcsantander16-demo

https://www.angularseries.com/





Aplicación de página única






Enfoque por componentes







Tema para WordPress







Tema para WordPress

Datos desde dos APIs



#2WordPress, plugins y la REST API

Primeros pasos

https://codex.wordpress.org/Theme_Development


Primeros pasos

1. Servidor local con Apache, MySQL y PHP:

Ejemplos: MAMP, WAMP, LAMP…



Primeros pasos



2. Instalación de WordPress



Primeros pasos




3. Creación de repositorio en Github



Primeros pasos




4. Base para nuestro tema: - style.css - index.php - functions.php

3. Creación de repositorio en Github



Plugins1. WordPress REST API (Version 2)

https://es.wordpress.org/plugins/rest-api/

Plugins2. ACF to WP REST API

https://es.wordpress.org/plugins/acf-to-wp-rest-api/

Custom Post Types

Custom Post Types

Ejemplo:https://www.angularseries.com/wp-json/v2/series

Custom Post Types


Consultas a la REST API

Custom Post Types


Consultas a la REST API1. Ruta base:

<tu-dominio>/wp-json/wp/v2/

Custom Post Types




2. Posts:<tu-dominio>/wp-json/wp/v2/posts

Custom Post Types





3. Single-post con id=1:<tu-dominio>/wp-json/wp/v2/posts/1

Custom Post Types






4. Filtros:<tu-dominio>/wp-json/wp/v2/posts?page=2

Custom Post Types






4. Filtros:<tu-dominio>/wp-json/wp/v2/posts?page=2

5. Filtros encadenados:(…)/wp/v2/posts?categories=2,3,6&before=2016-10-31T23:59:59

Postman

https://www.getpostman.com/

#3Entorno front-end: NPM y Gulp

Gestor de dependencias

1. NPM (incluido en NodeJS)

Automatización con Gulp


1. Hojas de estilo: SASS



2. Prefijos de compatibilidad



3. JavaScript: Dependencias y app





4. BrowserSync



gulp-autoprefixergulp-concatgulp-sassgulp-sourcemapsgulp-uglifybrowser-sync



4. BrowserSync


#4AngularJS

versión < 9

Estructura de la aplicación

Módulo principal y enlace de la aplicación (bootstrapping)


1. app.js


1. app.js

2. header.php

Módulos secundarios


1. components/home/home.js


1. components/home/home.js

2. components/about/about.js

Servicios: Acceso a los datos 1. services/series.service.js

Servicios: Personalizar la respuesta

Vistas según la URL: UI-Router


1. index.php


1. home.component.js

https://github.com/marcelotena/wcsantander16-demohttps://www.angularseries.com/

Estructura de la vista “Home”





home(/)





list-item

home(/)





list-item

home(/)

thumbnail





list-item

home(/)

thumbnail

actors





list-item

home(/)

thumbnail

actors

rating



Componentes

Componentes

1. home.component.html (template)

Componentes

Componentes

1. home/list-item/list-item.component.html

Componentes

Componentes

1. home/list-item/actors/actors.component.js

¿Preguntas?

@marcelotena

#WCSantander

wordcamp santander 2016 - aplicaciones web con angularjs y la rest api de wordpress

Presentations & Public Speaking