Successfully reported this slideshow.
Your SlideShare is downloading. ×

WordCamp Santander 2016 - Aplicaciones web con AngularJS y la REST API de WordPress

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad

Check these out next

1 of 94 Ad

WordCamp Santander 2016 - Aplicaciones web con AngularJS y la REST API de WordPress

Download to read offline

Diapositivas de la ponencia para la WordCamp Santander 2016 en el Palacio de la Magdalena.

Aplicación demo: https://www.angularseries.com
Github: https://github.com/marcelotena/wcsantander16-demo
Twitter: https://twitter.com/MarceloTena

Diapositivas de la ponencia para la WordCamp Santander 2016 en el Palacio de la Magdalena.

Aplicación demo: https://www.angularseries.com
Github: https://github.com/marcelotena/wcsantander16-demo
Twitter: https://twitter.com/MarceloTena

Advertisement
Advertisement

More Related Content

Viewers also liked (14)

Similar to WordCamp Santander 2016 - Aplicaciones web con AngularJS y la REST API de WordPress (20)

Advertisement

Recently uploaded (20)

WordCamp Santander 2016 - Aplicaciones web con AngularJS y la REST API de WordPress

  1. 1. Aplicaciones web con AngularJS y la WP REST API @marcelotena #WCSantander
  2. 2. #1
 La aplicación
  3. 3. https://github.com/marcelotena/wcsantander16-demo https://www.angularseries.com/
  4. 4. https://github.com/marcelotena/wcsantander16-demo https://www.angularseries.com/
  5. 5. https://github.com/marcelotena/wcsantander16-demo https://www.angularseries.com/ Aplicación de página única
  6. 6. https://github.com/marcelotena/wcsantander16-demo https://www.angularseries.com/ Aplicación de página única Enfoque por componentes
  7. 7. https://github.com/marcelotena/wcsantander16-demo https://www.angularseries.com/ Aplicación de página única Enfoque por componentes Tema para WordPress
  8. 8. 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
  9. 9. #2
 WordPress, plugins y la REST API
  10. 10. Primeros pasos https://codex.wordpress.org/Theme_Development
  11. 11. Primeros pasos 1. Servidor local con Apache, MySQL y PHP: Ejemplos: MAMP, WAMP, LAMP… https://codex.wordpress.org/Theme_Development
  12. 12. 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
  13. 13. 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
  14. 14. 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
  15. 15. Plugins 1. WordPress REST API (Version 2) https://es.wordpress.org/plugins/rest-api/
  16. 16. Plugins 2. ACF to WP REST API https://es.wordpress.org/plugins/acf-to-wp-rest-api/
  17. 17. Custom Post Types
  18. 18. Custom Post Types
  19. 19. Custom Post Types
  20. 20. Custom Post Types Ejemplo:
 https://www.angularseries.com/wp-json/v2/series
  21. 21. Custom Post Types Ejemplo:
 https://www.angularseries.com/wp-json/v2/series Consultas a la REST API
  22. 22. Custom Post Types Ejemplo:
 https://www.angularseries.com/wp-json/v2/series Consultas a la REST API 1. Ruta base: <tu-dominio>/wp-json/wp/v2/
  23. 23. Custom Post Types Ejemplo:
 https://www.angularseries.com/wp-json/v2/series Consultas a la REST API 1. Ruta base: <tu-dominio>/wp-json/wp/v2/ 2. Posts: <tu-dominio>/wp-json/wp/v2/posts
  24. 24. Custom Post Types Ejemplo:
 https://www.angularseries.com/wp-json/v2/series Consultas a la REST API 1. 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
  25. 25. Custom Post Types Ejemplo:
 https://www.angularseries.com/wp-json/v2/series Consultas a la REST API 1. 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
  26. 26. Custom Post Types Ejemplo:
 https://www.angularseries.com/wp-json/v2/series Consultas a la REST API 1. 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
  27. 27. Postman https://www.getpostman.com/
  28. 28. #3
 Entorno front-end: 
 NPM y Gulp
  29. 29. Gestor de dependencias 1. NPM (incluido en NodeJS)
  30. 30. Automatización con Gulp
  31. 31. Automatización con Gulp 1. Hojas de estilo: SASS
  32. 32. Automatización con Gulp 1. Hojas de estilo: SASS 2. Prefijos de compatibilidad
  33. 33. Automatización con Gulp 1. Hojas de estilo: SASS 3. JavaScript: Dependencias y app 2. Prefijos de compatibilidad
  34. 34. Automatización con Gulp 1. Hojas de estilo: SASS 3. JavaScript: Dependencias y app 4. BrowserSync 2. Prefijos de compatibilidad
  35. 35. Automatización con Gulp gulp-autoprefixer gulp-concat gulp-sass gulp-sourcemaps gulp-uglify browser-sync 1. Hojas de estilo: SASS 3. JavaScript: Dependencias y app 4. BrowserSync 2. Prefijos de compatibilidad
  36. 36. #4
 AngularJS
  37. 37. #4
 AngularJS
  38. 38. versión < 9
  39. 39. versión < 9
  40. 40. versión < 9
  41. 41. Estructura de la aplicación
  42. 42. Estructura de la aplicación
  43. 43. Estructura de la aplicación
  44. 44. Módulo principal y enlace de la aplicación (bootstrapping)
  45. 45. Módulo principal y enlace de la aplicación (bootstrapping) 1. app.js
  46. 46. Módulo principal y enlace de la aplicación (bootstrapping) 1. app.js 2. header.php
  47. 47. Módulos secundarios
  48. 48. Módulos secundarios 1. components/home/home.js
  49. 49. Módulos secundarios 1. components/home/home.js 2. components/about/about.js
  50. 50. Servicios: Acceso a los datos 1. services/series.service.js
  51. 51. Servicios: Acceso a los datos 1. services/series.service.js
  52. 52. Servicios: Acceso a los datos 1. services/series.service.js
  53. 53. Servicios: Acceso a los datos 1. services/series.service.js
  54. 54. Servicios: Acceso a los datos 1. services/series.service.js
  55. 55. Servicios: Acceso a los datos 1. services/series.service.js
  56. 56. Servicios: Personalizar la respuesta
  57. 57. Servicios: Personalizar la respuesta
  58. 58. Servicios: Personalizar la respuesta
  59. 59. Servicios: Personalizar la respuesta
  60. 60. Servicios: Personalizar la respuesta
  61. 61. Servicios: Personalizar la respuesta
  62. 62. Vistas según la URL: UI-Router
  63. 63. Vistas según la URL: UI-Router 1. index.php
  64. 64. Vistas según la URL: UI-Router 1. index.php
  65. 65. Vistas según la URL: UI-Router
  66. 66. Vistas según la URL: UI-Router 1. home.component.js
  67. 67. Vistas según la URL: UI-Router 1. home.component.js
  68. 68. Vistas según la URL: UI-Router 1. home.component.js
  69. 69. Vistas según la URL: UI-Router 1. home.component.js
  70. 70. Vistas según la URL: UI-Router 1. home.component.js
  71. 71. https://github.com/marcelotena/wcsantander16-demo https://www.angularseries.com/ Estructura de la vista “Home”
  72. 72. https://github.com/marcelotena/wcsantander16-demo https://www.angularseries.com/ Estructura de la vista “Home” home (/)
  73. 73. https://github.com/marcelotena/wcsantander16-demo https://www.angularseries.com/ Estructura de la vista “Home” list-item home (/)
  74. 74. https://github.com/marcelotena/wcsantander16-demo https://www.angularseries.com/ Estructura de la vista “Home” list-item home (/) thumbnail
  75. 75. https://github.com/marcelotena/wcsantander16-demo https://www.angularseries.com/ Estructura de la vista “Home” list-item home (/) thumbnail actors
  76. 76. https://github.com/marcelotena/wcsantander16-demo https://www.angularseries.com/ Estructura de la vista “Home” list-item home (/) thumbnail actors rating
  77. 77. Componentes
  78. 78. Componentes 1. home.component.html (template)
  79. 79. Componentes 1. home.component.html (template)
  80. 80. Componentes
  81. 81. Componentes 1. home/list-item/list-item.component.html
  82. 82. Componentes 1. home/list-item/list-item.component.html
  83. 83. Componentes 1. home/list-item/list-item.component.html
  84. 84. Componentes 1. home/list-item/list-item.component.html
  85. 85. Componentes 1. home/list-item/list-item.component.html
  86. 86. Componentes
  87. 87. Componentes 1. home/list-item/actors/actors.component.js
  88. 88. Componentes 1. home/list-item/actors/actors.component.js
  89. 89. Componentes 1. home/list-item/actors/actors.component.js
  90. 90. Componentes 1. home/list-item/actors/actors.component.js
  91. 91. Componentes 1. home/list-item/actors/actors.component.js
  92. 92. ¿Preguntas? @marcelotena #WCSantander

×