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?