Integrando AngularJS y drupal
5 recomendaciones5,132 vistas
Este documento describe cómo integrar AngularJS con Drupal para crear aplicaciones híbridas. Explica conceptos básicos de AngularJS como directivas, controladores y servicios, y proporciona razones para usar AngularJS como mejorar el rendimiento y crear una estructura desacoplada. A continuación, detalla los pasos para exponer datos de Drupal a través de servicios y crear un punto final de servicio, y proporciona una estructura básica para una aplicación AngularJS que consume un servicio Drupal.
Integrando AngularJS y drupal
- 1. Integrando AngularJS y Drupal Iván G. Campaña N. @icampana
- 2. ¿Qué es AngularJS? Framework Javascript MVC de código abierto desarrollado por Google Utiliza HTML5, CSS3 + Javascript del lado del cliente. Permite crear aplicaciones enriquecidas que pueden funcionar en el navegador o como apps híbridas.
- 3. Conceptos básicos ● Se basa en MVC, pero no restringe a ese esquema. ● Elementos importantes: ○ Directivas ○ Controladores ○ Servicios (Factories) ○ Scopes ($scope, $rootScope) ● El procesamiento, filtrado y manipulación de datos sucede del lado del cliente.
- 4. Alternativas a AngularJS ● Backbone.js ● Ember.js ● Knockout ● Agility.js ● KendoUI
- 5. ¿Para qué voy a mezclar Drupal con Angular?
- 6. Razones para utilizar AngularJS App. híbrida Mejorar rendimiento de la web. Crear una estructura decoupled
- 8. Componentes en Drupal Views Services https://www.drupal.org/project/services Services Views https://www.drupal. org/project/services_views CORS https://www.drupal.org/project/cors Image URL Formatter https://www.drupal.org/project/image_url_formatter
- 9. ¿Qué vamos a utilizar? Componentes de maquetación e interacción: ● Material Design Lite http://www.getmdl.io/ ● Angular Material https://material.angularjs.org/ ● AngularJS 1.4 http://angularjs.org/
- 10. ¿Qué vamos a utilizar?
- 11. ¡Manos a la obra!
- 12. Herramientas que simplifican el trabajo - YeoMan - Bower - Grunt - Less - Sass - Ionic - Cordova
- 13. Primeros pasos ● Habilitar los módulos necesarios para exponer los datos a través de servicios (con sus dependencias): ○ Views ○ Services ○ Services Views ○ CORS ● drush pm-enable -y cors views services services_views rest_server
- 14. Crear una vista de datos ● Creamos inicialmente una vista regular, tal y como estamos acostumbrados.
- 15. Crear una vista de datos ● Services permite exponer datos a través de módulos personalizados ● Services Views permite exponer esos datos como un servicio (Similar - no igual - a D8). ● El display de services utiliza en general los mismos formateadores
- 16. Problemas comunes - Tipos de campos con formateadores no soportados - Permisos al momento de conectarse con el servicio - Resultados en caché para usuarios anónimos
- 17. Crear un service endpoint ● Nombre de máquina no necesariamente es el expuesto a los servicios ● El Server (protocolo) debe ser habilitado antes de crear el endpoint ● Asegurar la ruta que utilizaremos para acceder
- 18. Seleccionar qué se va a hacer público
- 19. Primeras pruebas - Tratemos de consumir el servicio, en este caso la ruta es: - /api/listar-noticias - Resultado obtenido desde local:
- 20. Seleccionar qué se va a hacer público El módulo CORS habilita el crossdomain access. Seleccionar específicamente qué rutas pueden ser accedidas y bajo qué parámetros. Caso de prueba únicamente.
- 21. ¡Voilá! Se puede probar comunicación directamente desde el navegador. Herramienta recomendada: Postman https://chrome.google. com/webstore/detail/postman/fhbjgbiflinjbd ggehcddcbncdddomop
- 22. Servidor listo, hora del cliente - Podemos trabajar directamente con estructura HTML5 + CSS3, sin necesidad de PHP
- 24. Estructura básica Controlador básico, pueden existir varios dentro de la misma aplicación encargándose de funcionalidades diferentes. El controlador inicializa variables y controla el “flujo” de la aplicación. Es recomendable establecer constantes que se puedan definir como parámetros para trabajar en diferentes ambientes (desarrollo, producción).
- 25. Estructura básica Directivas de Angular que permiten hacer “binding” con el modelo de datos. Una vez actualizado el modelo en el controlador, el template activa su funcionalidad asociada. Las directivas de AngularMaterial se encargan de la presentación. Podemos crear nuestras propias directivas.
- 26. Estructura básica Cada elemento del arreglo es renderizado de forma independiente en base a sus datos y representado dentro de la plantilla.
- 27. Agregando funcionalidad para el cliente Podemos buscar, filtrar y manipular los datos que devolvió el servidor sin necesidad de reconección Una variable determina la visibilidad de los elementos del arreglo.
- 28. Proyecto javascript con backend Drupal
- 29. Y si lo quiero hacer app móvil?
- 30. Integraciones que incluye por defecto - Login - Cambio de contraseña - Recuperación de contraseña - Registro de usuario - Listado y consumo de nodos
- 31. ¿Preguntas?