Integrando AngularJS y DrupalIván G. Campaña N.@icampana
¿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.
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.
Alternativas a AngularJS● Backbone.js● Ember.js● Knockout● Agility.js● KendoUI
¿Para qué voy a mezclar Drupal con Angular?
Razones para utilizar AngularJS
App. híbrida
Mejorar rendimiento de la web.
Crear una estructura decoupled
¿Con qué trabajamos?
Componentes en DrupalViews
Serviceshttps://www.drupal.org/project/services
Services Views https://www.drupal.org/project/services_views
CORShttps://www.drupal.org/project/cors
Image URL Formatterhttps://www.drupal.org/project/image_url_formatter
¿Qué vamos a utilizar?Componentes de maquetación e interacción:
● Material Design Litehttp://www.getmdl.io/
● Angular Materialhttps://material.angularjs.org/
● AngularJS 1.4http://angularjs.org/
¿Qué vamos a utilizar?
¡Manos a la obra!
Herramientas que simplifican el
trabajo- YeoMan- Bower- Grunt- Less- Sass- Ionic- Cordova
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
Crear una vista de datos● Creamos inicialmente una
vista regular, tal y como estamos acostumbrados.
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
Problemas comunes- Tipos de campos con formateadores no soportados
- Permisos al momento de conectarse con el servicio
- Resultados en caché para usuarios anónimos
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
Seleccionar qué se va a hacer público
Primeras pruebas- Tratemos de consumir el servicio, en este caso la ruta es:
- /api/listar-noticias
- Resultado obtenido desde local:
Seleccionar qué se va a hacer públicoEl módulo CORS habilita el crossdomain access.
Seleccionar específicamente qué rutas pueden ser accedidas y bajo qué parámetros.
Caso de prueba únicamente.
¡Voilá!Se puede probar comunicación directamente desde el navegador.
Herramienta recomendada:Postmanhttps://chrome.google.com/webstore/detail/postman/fhbjgbiflinjbdggehcddcbncdddomop
Servidor listo, hora del cliente
- Podemos trabajar directamente con estructura HTML5 + CSS3, sin necesidad de PHP
Estructura básica
Estructura básicaControlador 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).
Estructura básicaDirectivas 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.
Estructura básicaCada elemento del arreglo es renderizado de forma independiente en base a sus datos y representado dentro de la plantilla.
Agregando funcionalidad para el clientePodemos 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.
Proyecto javascript con backend Drupal
Y si lo quiero hacer app móvil?
Integraciones que incluye por defecto- Login
- Cambio de contraseña
- Recuperación de contraseña
- Registro de usuario
- Listado y consumo de nodos
¿Preguntas?