Hace una semana estuve hablando de las ventajas que proporcionaba la creación de Mashups. Para el que no lo recuerde, un mashup consiste en una aplicación web que utiliza recursos de mas de una fuente para crear un servicio completo.
También comentaba que la mayoría de Mashups actuales utilizaban el API de Google Maps. Pues bien, en este post voy a detallaros cuales son los pasos básicos para crear vuestro propio mashup, poniendo como ejemplo un Mashup que hice hace tiempo en mi web, utilizando el API de Google Maps y la idea de situar a los restaurantes cercanos a mi centro de trabajo. Si queréis ver el resultado completo (que es lo que obtendréis al final del curso), podéis verlo en la dirección http://www.mardito.com/mapas .
Para empezar, voy a explicaros un poco que es lo que vamos a necesitar:
- Conocer el API de Google Maps. No os preocupéis, os explicaré cuales son las funciones más importantes.
- Conocimientos de Bases de Datos. Nuestra aplicación web se nutrirá de una base de datos que crearemos en MySQL, el gestor de base de datos gratuito más utilizado (que no el más potente, pero esto ya es tema de un post futuro ;-) ).
- Conocimientos de PHP. Es el lenguaje que he utilizado por ser muy sencillo desarrollar aplicaciones utilizándolo. Podríais utilizar cualquier otro lenguaje web con acceso a base de datos como asp, jsp...
- Conocimientos de HTML, CSS y algo de diseño gráfico si queréis darle una apariencia chula a vuestra aplicación.
- Un servidor que os permita alojar tanto la Base de Datos como los ficheros de la aplicación (en nuestro caso MySQL y PHP).
- Ganas de programar (no os asustéis, no es mucho) y sobretodo de aprender ;-) .
Empecemos la faena, el primer es ver un poco la arquitectura de nuestra aplicación, para ello no hay nada mejor que un gráfico explicativo:
Podemos ver 3 "mundos" o entornos principales:
- Nuestra Aplicación Web, que se ejecuta en nuestro servidor y que realiza consultas contra los servidores de Google.
- El API de Google Maps, que se ejecuta en los servidores de Google y que nos devuelve la información que le pedimos.
- El navegador de usuario, que accede a nuestra aplicación web desde nuestra página.
Paso 1: Definición de la aplicación
El primer paso es tener claro qué queremos hacer. ¿Qué queremos situar en el mapa? Esto, a priori puede parecer innecesario definirlo, ya que siempre vamos a situar cosas en los mapas, pero no es así, debemos tenerlo muy claro desde el principio porque los datos que queramos mostrar hay que guardarlos previamente en la base de datos.
Por ello, antes de comenzar, definiremos si queremos mostrar sobre el mapa bares, gimnasios, restaurantes, colegios o lo que queramos. Esto es importante porque en función de lo que queramos mostrar sobre el mapa, también querremos mostrar alguna información relacionada con el elemento marcado. Por ejemplo, si mostramos restaurantes, querremos mostrar el precio del menú, el tipo de cocina (española, argentina, mejicana, comida rápida...), el teléfono y alguna valoración, por ejemplo.
Una vez tengamos estos datos claros, pasamos al paso 2, la creación de la Base de Datos.
Paso 2: La Base de Datos
Una vez tenemos bien claro que es lo que queremos mostrar en nuestros mapas, simplemente tenemos que mapear los elementos a la Base de datos. Voy a describir los elementos que he mapeado en el ejemplo (tu puedes cambiar los que creas necesario menos los que marco como obligatorios).
Los campos utilizados son:
- restaurante_ID. Identificador único del restaurante, es un código interno de la aplicación. Es de tipo Autoincrement para que siempre tenga un valor diferente. Obligatorio.
- restaurante_long. Guardaremos la coordenada de longitud del restaurante necesaria para posicionarlo con Google Maps. Obligatorio.
- restaurante_lat. Guardaremos la coordenada de latitud del restaurante necesaria para posicionarlo con Google Maps. Obligatorio.
- restaurante _nombre. El nombre del restaurante. Opcional.
- restaurante_coment. Comentarios al restaurante. Opcional.
- restaurante_marcado. Tipo de marcador que utilizaremos sobre Google Maps. Podemos usar varios tipos de marcadores para posicionar los elementos, así que usaremos un color distinto para cada tipo de restaurante. Se podría obtener en cada consulta a través del campo restaurante_cocina, pero lo incluimos como campo aparte por si decidimos más adelante usar un marcador único por restaurante con su logo (por ejemplo). Opcional.
- restaurante_cocina. El tipo de cocina del restaurante (asiática, española, mejicana, argentina...). Opcional.
- restaurante_direcc. La dirección física del restaurante. Opcional.
- restaurante_url. La web del restaurante (si tiene). Opcional.
- restaurante_precio. El precio del menú diario. Opcional.
- restaurante_ip. La IP desde la que se añadió el restaurante. Opcional.
- restaurante_mes. El mes en el que se añadió el restaurante. Opcional.
- restaurante_dia. El día en el que se añadió el restaurante. Opcional.
- restaurante_anyo. El año en el que se añadió el restaurante. Opcional.
- restaurante_hora. La hora en el que se añadió el restaurante. Opcional.
- restaurante_valoracion. La valoración (en numero del 0 al 10) del restaurante. Opcional.
NOTA: Los campos restaurante_mes, restaurante_dia, restaurante_anyo y restaurante_hora podrían haberse agrupado en un único campo de tipo TIMESTAMP pero se ha separado para hacer más comprensible el modelo y trabajar más facilmente con las fechas en la parte de PHP. Aquí tienes el código SQL necesario:
Con esto ya tendremos la base de datos creada. En la próxima parte del curso veremos como crear los PHPs necesarios para acceder a la base de datos y al API de Google Maps para mostrar los mapas. Pero eso ya será la semana que viene, ¡ hasta entonces no dejes de visitarnos !