Integrando AngularJS y Drupal. Iván G. Campaña

Transcripción

1 Integrando AngularJS y Drupal Iván G. Campaña

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 Mejorar rendimiento de la web. App. híbrida Crear una estructura decoupled

7 Con qué trabajamos?

8 Componentes en Drupal Views Services Services Views org/project/services_views CORS Image URL Formatter

9 Qué vamos a utilizar? Componentes de maquetación e interacción: Material Design Lite Angular Material AngularJS 1.4

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 com/webstore/detail/postman/fhbjgbiflinjbd ggehcddcbncdddomop

22 Servidor listo, hora del cliente - Podemos trabajar directamente con estructura HTML5 + CSS3, sin necesidad de PHP

23 Estructura básica

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?