www.investic.net
INTEGRACIÓN DELAYAR CON DRUPAL
Mael Talebhttp://twitter.com/mael_
Drupal como gestor de contenido geoposicionado
DrupalCamp Barcelona27-02-2010
www.investic.net
ÍNDICE
Layar (entorno de configuración, aplicación)
PorPOIse (server)
Drupal (Gestor de contenido)
Android, iPhone* (Plataformas de ejecución)
www.investic.net
www.investic.net
Integración de Layar con Drupal 5
www.investic.net
Elementos que entran en funcionamiento
Cliente Layar (aplicación cliente)
Servicios Layar (elementos que aporta layar)
Drupal (gestor de puntos de interés)
PorPOIse (procesado de puntos de interés)
www.investic.net
LAYAR
Integración de Layar con Drupal 7
www.investic.net
Descripción
Desarrolladores holandeses SPRXmobile
Layar es un navegador de realidad aumentada
Superposición de contenido a la realidad que muestra la cámara
Soporta arquitectura (1D, 2D, 3D)
Aplicación para : Android, iPhone*
Navegador (Geoposición de POI's), definidos como capas
Actualmente dispone de más de 373 Layers (capas) publicadas
Integración de Layar con Drupal 8
www.investic.net
Layar
Integración de Layar con Drupal 9
www.investic.net
¿Como funciona Layar ?
LAYAR: su funcionamiento se basa en usar la información que proporciona el GPS, la cámara y la brújula del móvil para identificar su entorno y mostrar información acerca del mismo en pantalla en tiempo real.
Superponiendo, puntos, imágenes u objetos sobre la imagen que vemos.
Y también genera otros tipos de vista (mapa, lista, imagen)
Integración de Layar con Drupal 10
www.investic.net
Funcionamiento básico
El cliente Layar realiza la conexión con el Servidor Layar
Envía la latitud y la longitud del cliente
El Servidor de Layar presenta al cliente las distintas capas disponibles
En modo desarrollador puedes cargar tus capas todavía no publicadas
Tras seleccionar una capa accedemos al servicio web gestionado por nuestro drupal
PorPOIse se encarga de gestionar la información de drupal y relacionarla con entorno Layar
Integración de Layar con Drupal 11
www.investic.net
LAYAR:REQUEST
En la URL (mediante POST)
Datos Request:LatitudLongitud (localización del cliente)
Nombre de la capa
Filtros (opcionales)
Identificador y clave (caso de desarrolladores)
http://www.midominio.com/server/?countryCode=ES&lon=1.97822570801×tamp=1267085372929&userId=6f85d06929d160a7c8a3cc1ab4b54b87db99f74b&developerId=1111&developerHash=7e152170a2ee7711309be5696eece35a0a0c9b10&radius=500&lat=43.3221805166&layerName=gmk&phoneId=6f85d06929d160a7c8a3cc1ab4b54b87db99f74b&accuracy=100
Integración de Layar con Drupal 12
www.investic.net
API: REQUEST
Integración de Layar con Drupal 13
www.investic.net
Integración de Layar con Drupal 14
www.investic.net
LAYAR: RESPONSE
Es proporcionada por el servidor PorPOIse, en nuestro caso
Formato JSON, para el paso de información
Información filtrada según lo definido en la interfaz aportada por la infraestructura de Layar
El cliente visualiza los POI's y la información definida en la capa de Layar
Integración de Layar con Drupal 15
www.investic.net
RESPONSE (JSON)
Integración de Layar con Drupal 16
www.investic.net
API: RESPONSE
Integración de Layar con Drupal 17
www.investic.net
Cómo crear un capa (layer)
Integración de Layar con Drupal 18
www.investic.net
Zona desarrolladores en Layar
Integración de Layar con Drupal 19
www.investic.net
Listado de capas en desarrollo
Integración de Layar con Drupal 20
www.investic.net
Distintos filtros aplicables a cada capa (layer)
Integración de Layar con Drupal 21
www.investic.net
Entorno de prueba de capas (Layers)
Integración de Layar con Drupal 22
www.investic.netInformación de los POIs, presentada por el entorno de test
www.midominio.com/
Integración de Layar con Drupal 23
www.investic.net
Radio de búsqueda 2 km
Integración de Layar con Drupal 24
www.investic.net
Filtrando por radio de búsqueda 300 m
Integración de Layar con Drupal 25
www.investic.net
JSON generado por PorPOIse
Integración de Layar con Drupal 26
www.investic.net
Características del navegador (cliente Layar)
Sección del momento, populares y locales
Función de búsqueda
Añadir la capa a los favoritos
Mapa y vista de lista
Ver la imagen cámara, reforzada con malla 3D
Precisión de la información
"Take Me There" acción (predefinida) de localización en el mapa
etc....
Integración de Layar con Drupal 27
www.investic.net
Interfaz layar
Integración de Layar con Drupal 28
www.investic.net
Características del dispositivo móvil
PlataformaAndroid
Iphone* (mínimo v3.1) y terminal 3Gs
Instalar aplicación LayarAppStore en caso de iPhone
Market de Android (versión oficial)
Para Android esta disponible en la página de Layar una versión para desarrolladores
Cliente (móvil)Conexión de datos
GPS (y cobertura).
Cámara
Acelerometro
Integración de Layar con Drupal 29
www.investic.net
Aplicación LAYAR
Distintos modos de visualización:
Cámara (imagen real)
Mapa (Google maps)
Listado de puntos
Radar de ubicación de puntos
Distancia al punto
Información adicional
Integración de Layar con Drupal 30
www.investic.net
Interfaz Layar
Integración de Layar con Drupal 31
www.investic.net
Publicación de capas (Layer)
www.investic.net
PorPOIse
Integración de Layar con Drupal 33
www.investic.net
Introducción
Autor: Jens de Smit (licencia BSD).
Servidor de puntos de interés (POI's) para clientes Layar
Los datos son devueltos en JSON
Calcula distancia entre puntos
Versión actual 0.7a
Estructurado mediante el patrón de diseño “Factory” en PHP (instanciar objetos en tiempo de ejecución)
PorPOIse es un servidor para la gestión completa de puntos de interés desarrollado en php.
Integración de Layar con Drupal 34
www.investic.net
Flujo de datos
ENTRADA:XML (en nuestro caso)
Fichero tab
SQL Datos almacenados en BBDD
SALIDA:Datos formateados en JSON (requeridos por cliente Layar)
Paginados de 10 en 10
Integración de Layar con Drupal 35
www.investic.net
Actualmente el proyecto soporta:
Objetos en:1D puntos
2D imágenes
3D modelos(objetos).
Personalizar varias acciones
Crear filtros personalizados
Autenticación de los clientes Layar
El proyecto también tiene implementado un frontend donde visualizar y crear POI manualmente (fase de desarrollo).Aquí es donde a nosotros, Drupal nos ha resultado más potente.
Integración de Layar con Drupal 36
www.investic.net
Para qué usamos PorPOIse?
Transforma los datos generados por Drupal (XML) en formato JSON interpretado por Layar
Calcula la distancia entre los puntos y el terminal (teléfono)
Genera respuesta al cliente con los puntos solicitados formateados en JSON
www.investic.net
DRUPAL
Integración de Layar con Drupal 38
www.investic.net
+ módulo (Layar)
Integración de Layar con Drupal 39
www.investic.net
+ los comercios de GMK
Integración de Layar con Drupal 40
www.investic.net
Requisitos de nuestro drupal
Módulos:
GMap (campo ubicación)
Ctools (formulario multistep)
layar (módulo en desarrollo)
La última versión de PorPOIse (disponible en http://code.google.com/p/porpoise/ )
Integración de Layar con Drupal 41
www.investic.net
http://www.gipuzkoamarket.com
Desarrollo que está llevando a cabo Investic para la Cámara de Gipuzkoa , enfocado al marketing online.
Integración de Layar con Drupal 42
www.investic.net
GipuzkoaMarket + layar (módulo en desarrollo)
Integración de Layar con Drupal 43
www.investic.net
XML generados
Integración de Layar con Drupal 44
www.investic.net
Recopilación de POI para crear fichero XML
Integración de Layar con Drupal 45
www.investic.net
Datos de identificación para layar
Integración de Layar con Drupal 46
www.investic.net
Eliminar ficheros XML almacenados
Integración de Layar con Drupal 47
www.investic.net
Algunos comercios geoposicionados de GMK
Integración de Layar con Drupal 48
www.investic.net
Y con la combinación de estos elementos obtenemos....
Integración de Layar con Drupal 49
www.investic.net
Capturas de la aplicación Layar
Integración de Layar con Drupal 50
www.investic.net
Videos, funcionamiento de Layar
http://blip.tv/file/3283456
http://blip.tv/file/3283401
Integración de Layar con Drupal 51
www.investic.net
Enlaces de interés
http://code.google.com/p/porpoise/
http://www.gipuzkoamarket.com/
http://layar.com/
http://drupal.org/
http://www.android.com/
Integración de Layar con Drupal 52
www.investic.net
¿Preguntas?
Integración de Layar con Drupal 53
www.investic.net