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:Latitud­Longitud (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&timestamp=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 (pre­definida) 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 multi­step)

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