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/

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

https://www.angularseries.com/

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

https://www.angularseries.com/

Aplicación de página única

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

https://www.angularseries.com/

Aplicación de página única

Enfoque por componentes

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

https://www.angularseries.com/

Aplicación de página única

Enfoque por componentes

Tema para WordPress

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

https://www.angularseries.com/

Aplicación de página única

Enfoque por componentes

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…

https://codex.wordpress.org/Theme_Development

Primeros pasos

1. Servidor local con Apache, MySQL y PHP:

Ejemplos: MAMP, WAMP, LAMP…

2. Instalación de WordPress

https://codex.wordpress.org/Theme_Development

Primeros pasos

1. Servidor local con Apache, MySQL y PHP:

Ejemplos: MAMP, WAMP, LAMP…

2. Instalación de WordPress

3. Creación de repositorio en Github

https://codex.wordpress.org/Theme_Development

Primeros pasos

1. Servidor local con Apache, MySQL y PHP:

Ejemplos: MAMP, WAMP, LAMP…

2. Instalación de WordPress

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

3. Creación de repositorio en Github

https://codex.wordpress.org/Theme_Development

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

Custom Post Types

Custom Post Types

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

Custom Post Types

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

Consultas a la REST API

Custom Post Types

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

Consultas a la REST API1. Ruta base:

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

Custom Post Types

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

Consultas a la REST API1. Ruta base:

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

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

Custom Post Types

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

Consultas a la REST API1. Ruta base:

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

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

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

Custom Post Types

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

Consultas a la REST API1. Ruta base:

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

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

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

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

Custom Post Types

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

Consultas a la REST API1. Ruta base:

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

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

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

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

Automatización con Gulp

1. Hojas de estilo: SASS

Automatización con Gulp

1. Hojas de estilo: SASS

2. Prefijos de compatibilidad

Automatización con Gulp

1. Hojas de estilo: SASS

3. JavaScript: Dependencias y app

2. Prefijos de compatibilidad

Automatización con Gulp

1. Hojas de estilo: SASS

3. JavaScript: Dependencias y app

4. BrowserSync

2. Prefijos de compatibilidad

Automatización con Gulp

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

1. Hojas de estilo: SASS

3. JavaScript: Dependencias y app

4. BrowserSync

2. Prefijos de compatibilidad

#4AngularJS

#4AngularJS

versión < 9

versión < 9

versión < 9

Estructura de la aplicación

Estructura de la aplicación

Estructura de la aplicación

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

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

1. app.js

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

1. app.js

2. header.php

Módulos secundarios

Módulos secundarios

1. components/home/home.js

Módulos secundarios

1. components/home/home.js

2. components/about/about.js

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

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

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

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

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

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

Servicios: Personalizar la respuesta

Servicios: Personalizar la respuesta

Servicios: Personalizar la respuesta

Servicios: Personalizar la respuesta

Servicios: Personalizar la respuesta

Servicios: Personalizar la respuesta

Vistas según la URL: UI-Router

Vistas según la URL: UI-Router

1. index.php

Vistas según la URL: UI-Router

1. index.php

Vistas según la URL: UI-Router

Vistas según la URL: UI-Router

1. home.component.js

Vistas según la URL: UI-Router

1. home.component.js

Vistas según la URL: UI-Router

1. home.component.js

Vistas según la URL: UI-Router

1. home.component.js

Vistas según la URL: UI-Router

1. home.component.js

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

Estructura de la vista “Home”

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

Estructura de la vista “Home”

home(/)

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

Estructura de la vista “Home”

list-item

home(/)

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

Estructura de la vista “Home”

list-item

home(/)

thumbnail

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

Estructura de la vista “Home”

list-item

home(/)

thumbnail

actors

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

Estructura de la vista “Home”

list-item

home(/)

thumbnail

actors

rating

Componentes

Componentes

1. home.component.html (template)

Componentes

1. home.component.html (template)

Componentes

Componentes

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

Componentes

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

Componentes

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

Componentes

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

Componentes

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

Componentes

Componentes

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

Componentes

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

Componentes

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

Componentes

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

Componentes

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

¿Preguntas?

@marcelotena

#WCSantander