Integrando AngularJS y Drupal

Integrando AngularJS y Drupal
Ivá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
Mejorar rendimiento
de la web.
App. híbrida
Crear una estructura
decoupled
¿Con qué trabajamos?
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
¿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/
¿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ú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.
¡Voilá!
Se puede probar comunicación
directamente desde el navegador.
Herramienta recomendada:
Postman
https://chrome.google.
com/webstore/detail/postman/fhbjgbiflinjbd
ggehcddcbncdddomop
Servidor listo,
hora del cliente
- Podemos trabajar
directamente con estructura
HTML5 + CSS3, sin necesidad
de PHP
Estructura básica
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).
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.
Estructura básica
Cada elemento del arreglo es renderizado de forma independiente en base a sus
datos y representado dentro de la plantilla.
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.
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?