Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. PHP

Construyendo tu Startup con PHP: Geolocalización y Google Places

by
Read Time:21 minsLanguages:
This post is part of a series called Building Your Startup With PHP.
Building Your Startup With PHP: Feature Requirements and Database Design
Building Your Startup With PHP: Localization With I18n

Spanish (Español) translation by David Castrillón (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Esta es la tercera parte de la serie Construyendo tu Startup con PHP en Tuts+. En esta serie, te estoy guiando a través del lanzamiento de una startup desde el concepto a la realidad, utilizando mi aplicación Meeting Planner como un ejemplo de la vida real. A cada paso en el camino, liberaremos el código de Meeting Planner como ejemplos de código abierto con los que se puede aprender.

En esta parte, vamos a construir algo de la infraestructura subyacente para el concepto de Lugares donde la gente puede programar sus reuniones. Cubriremos los fundamentos del trabajo con Lugares, construyéndolo en nuestro esquema de base de datos, integrando geolocalización de HTML5 y las APIs de Google Maps y Google Places. La idea es utilizar estas características para elegir el lugar para tus reuniones rápido y fácil. No podemos cubri todos los ajustes en este tutorial, pero cubriremos más que eso en un próximo tutorial.

Todo el código para el Meeting Planner está escrito en el framework de Yii2 para PHP y aprovecha Bootstrap y JavaScript. Si deseas aprender más sobre Yii2, revisa nuestra serie paralela Programando con Yii2 en Tuts +.

Simplemente un recordatorio, participo en las cadenas de comentarios más abajo. Me interesa sobre todo si tienes diferentes enfoques o ideas adicionales, o deseas sugerir temas para futuros tutoriales. Las peticiones de características para el Meeting Planner también son bienvenidas.

Construyendo la Funcionalidad para los Lugares

Antes de que los usuarios pueden programar reuniones, necesitamos ser capaces de encontrar y sugerir sus lugares favoritos. Inicialmente, para simplificar, construiremos la funcionalidad de búsqueda y creación de lugares por separado de la función de agendamiento.

Hay tres maneras de que los usuarios añadan lugares:

  1. Usando la geolocalización de HTML5, pueden ver su ubicación actual a través de WiFi y agregarla como un lugar.
  2. Usando la API de lugares de Google, pueden buscar un lugar en la base de datos de los lugares usando el autocompletar. Eventualmente, cuando sabemos su ubicación actual, podemos restringir los resultados a lugares cercanos.
  3. Entrada manual. Los usuarios pueden introducir una dirección y una descripción de su propio lugar, como una oficina o el hogar.

Extendiendo el Esquema del Lugar

Este es el esquema para los lugares que desarrollamos en la segunda parte:

Ten en cuenta que no hay ningún geolocalización asociada con un lugar en esta tabla. Eso es porque el motor MySQL InnoDB no soporta índices espaciales. Así que he creado una tabla secundaria utilizando la tabla MyISAM para las coordenadas de geolocalización de los lugares. Es la tabla Place_GPS:

Como estoy en modo de prototipado rápido, voy a ampliar el esquema mediante las migraciones de Yii y finalmente también podría hacer ajustes.

Para extender el esquema, vamos a crear una nueva migración en Yii:

Y dar el siguiente código:

Esto añadirá columnas para slug, sitio web, dirección completa, alrededores y notas. El slug es una dirección URL amigable que Yii puede generar de forma automática por nosotros, para la visualización de la página del lugar. El resto de campos se actualizarán a veces por los usuarios y otras veces desde la API de Google Places.

Para ejecutar la migración, introducimos lo siguiente:

Deberías ver lo siguiente:

Actualizando el código CRUD

Si visitas la página de Places, ej. http://localhost:8888/mp/index.php/place/create verás el formulario generado automáticamente por defecto por Yii2 con todos nuestros campos del esquema:

Create Place The Default Yii2 FormCreate Place The Default Yii2 FormCreate Place The Default Yii2 Form

Para este tutorial, volví a ejecutar el generador de código de Yii, Gii, siguiendo los pasos de la parte dos para crear el código para el nuevo esquema de la base de datos. Instruí a Gii para que sobreescriba el código CRUD de antes.

Nota: Puede ser más fácil para ti reemplazar código de muestra de la parte dos con el código de muestra de esta parte. Ve el enlace de Github en la parte superior derecha.

También tendrás que actualizar las librerías con composer para integrar el soporte de las librerías 2amigOS Yii2 Google Maps y Places Aquí hay una parte de nuestro archivo composer.json:

A continuación, ejecuta la actualización de composer para descargar los archivos:

Tres Formas Diferentes para Agregar Lugares (Places)

Realmente vamos a construir tres controladores diferentes de acciones y formularios para cada uno de los tipos de lugares. Recuerda que también hay que integrar el modelo relacionado, PlaceGPS, para almacenar las coordenadas GPS por cada lugar sin importar cómo el usuario lo agregue.

Agregando Lugares a la Barra de Navegación

Para añadir un enlace de lugares a la barra de navegación, edita /views/layouts/main.php. Este es el diseño de página predeterminado con el que Yii envuelve todos nuestros archivos de vista. Incluye el encabezado, la barra de navegación de Bootstrap y el pie de página.

A continuación en $menuItems, agrego una entrada de arreglos para el menú del Lugar:

La Vista de Inicio de Place (Lugar)

La vista de inicio del Lugar se verá así después de que agreguemos botones para las tres formas de añadir lugares:

Meeting Planner Place Index PageMeeting Planner Place Index PageMeeting Planner Place Index Page

En /views/place/index.php, podemos añadir los tres botones de Añadir Lugar (Add Place):

Y podemos personalizar las columnas que aparecen en la vista, incluyendo la construcción de una columna personalizada de un método para Place (Lugar) que muestra el nombre descriptivo para el tipo de lugar (Place Type):

Este es un subconjunto de los métodos de Tipo de Lugar en /models/Place.php:

Ten en cuenta que todavía no hemos abordado el estado de inicio de sesión o del usuario propietario de los lugares. Revisaremos esto en el próximo tutorial. Debido a la complejidad y al alcance de esta etapa, dejaremos un puñado de productos por terminar para un tutorial posterior.

Agregando Lugares con Geolocalización HTML5

Un escenario en qlue se pueden agregar lugares, es crear un lugar para tu hogar u oficina. En lugar de requerir que los usuarios escriban esta información a mano, a menudo podemos generar esto automáticamente con geolocalización en HTML5.

La Geolocalización de HTML5 utiliza tu dirección de Wi-Fi para determinar puntos GPS que establecen tu ubicación actual. No funciona con conexiones de móvil / celulares y no es infalible.

El usuario probablemente tendrá que autorizar a su navegador para activar la geolocalización y que ésta funcione. Busca un popup debajo de la barra de direcciones como se muestra a continuación:

Chrome Browser Asking Permission for GeolocationChrome Browser Asking Permission for GeolocationChrome Browser Asking Permission for Geolocation

Estoy utilizando el script de geoposición de estebanav para soportar la geolocalización HTML5 con el soporte más amplio posible en el navegador.

Agregando la Acción del Controlador de Lugar para la Geolocalización

En frontend/controllers/PlaceController.php, vamos a crear un nuevo método para la acción Create_geo:

Debido a que aún no se ha enviado el formulario, Yii renderizará la vista create_geo para mostrar el formulario.

En frontend/views/place/create_geo.php, incluimos _formGeolocate.php:

Echemos un vistazo a la primera parte de _formGeolocate. Tenemos que incluir el JavaScript para Geoposition.js así como nuestro propio código personalizado de la geolocalización para integrar la geoposición con el formulario. La forma en que Yii hace esto es con Assets Bundles. Tu defines un Asset Bundle para diferentes páginas y esto te permite optimizar cuál JS y CSS se cargará en las diferentes áreas de tu aplicación. Vamos a crear LocateAsset primero:

En frontend/assets/LocateAsset.php, definiremos el JavaScript que tenemos que incluir:

LocateAsset precarga el API de Google Maps, la biblioteca geoPosition y nuestro código personalizado Locate.js el cual se muestra a continuación:

Básicamente, la geolocalización se inicia cuando el usuario acciona beginSearch. El código de Geoposición llama a la función success cuando regresa la ubicación del usuario. Personalizamos la función éxito para mostrar un mapa en la ubicación y que llene nuestros campos ocultos del formulario con la latitud y la longitud devueltas. Cuando el usuario publica el formulario, las coordenadas de la ubicación estarán disponibles para nuestra aplicación Web.

Aquí está el código Success() que rellena los campos del formulario con las coordenadas de ubicación:

El resto de _formGeolocate.php se divide en dos mitades iguales. En el lado izquierdo, proporcionamos los campos del formulario para que el usuario ingrese los datos de geolocalización y los campos ocultos que necesitamos para soportar el JavaScript. A la derecha, dejamos espacio para un botón que active la geolocalización y para que muestre el mapa. La función success() llena la etiqueta <article> con el mapa.

Así es como el formulario luce inicialmente:

Meeting Planner Create Place by Geolocation FormMeeting Planner Create Place by Geolocation FormMeeting Planner Create Place by Geolocation Form

Haz clic en el botón Buscar Ubicación (Lookup Location) para iniciar la geolocalización. Otra vez, busca una solicitud de permisos en la barra de navegación del navegador.

Una vez que tu ubicación es encontrada, mostraremos tu ubicación en el mapa:

Meeting Planner Create Place by Geolocation After MappingMeeting Planner Create Place by Geolocation After MappingMeeting Planner Create Place by Geolocation After Mapping

Nota: he marcado el retraso de la geolocalización a cinco segundos, pero a veces tendrás que recargar la página para obtener la respuesta correcta después de la concesión del permiso. Algunas ubicaciones de WiFi son menos determinantes que otras.

Echemos un vistazo al código de enviar del Controlador de Reuniones:

Por ahora, sólo estamos poniendo un marcador de posición para created_by user y dejamos el manejador de errores para más adelante (lo siento puristas, ese no es el enfoque de este tutorial por el momento).

Cuando se publica el formulario y un lugar es creado, agarraremos el punto de geolocalización del formulario (los campos ocultos por el script Locate.js) y agregaremos una fila a la tabla relacionada a Place, PlaceGPS.

Como mencioné en la segunda parte, separamos los datos de la geolocalización en una tabla diferente debido a que MySQL InnoDB no soporta índices espaciales. Esto también mejorará el rendimiento de las consultas para encontrar los lugares de encuentro más cercanos entre dos usuarios.

Este es el método addGeometryByPoint en el modelo de Place.php:

Esto es a lo que la página de índice del sitio debe parecerse después de que el registro se guarda:

Meeting Planner Place Index Page with New PlacesMeeting Planner Place Index Page with New PlacesMeeting Planner Place Index Page with New Places

Si quisieras ver otra aplicación de geolocalización HTML5 para Yii 1.x, échale un vistazo a Cómo usar Zillow Mapas de Barrio y Geolocalización de HTML5.

Mostrando Lugares en Google Maps

Si haces clic en el icono de comando de vista asociado con nuestro nuevo lugar en la vista del índice anterior, verás esto:

Meeting Planner View A Place With Google MapsMeeting Planner View A Place With Google MapsMeeting Planner View A Place With Google Maps

Hemos personalizado la página generada por Gii y hemos añadido código para dibujar el mapa de Google con la extensión para Mapas de Google de Yii2.

Aquí está la acción de View en PlaceController.php:

Este es el método getLocation en el modelo de Place.php. Obtiene las coordenadas de ubicación de la tabla de PlaceGPS:

Aquí hay una parte del archivo de vista que representa la página. La izquierda consiste en un widget estándar de Yii2 DetailView por ahora. La derecha genera el código que dibuja el mapa:

Adición de la API de Google Places

La función de autocompletar de Google Places es una manera increíblemente rápida y sencilla para que los usuarios añadan sus lugares de reunión. Estoy utilizando la extensión Yii2 Google Places hecha por 2amigOS.

Meeting Planner The Google Place Autocomplete ServiceMeeting Planner The Google Place Autocomplete ServiceMeeting Planner The Google Place Autocomplete Service

En PlaceController.php, añadiremos una acción de Create_place_google:

El archivo /frontend/views/place/create_place_google.php mostrará el formulario e inicializará el JavaScript necesario para el autocompletado:

El desarrollador Petra Barus creó una Extensión de Google Places para Yii1.x Para este tutorial, codifiqué a mano el soporte básico para Yii2. Sin embargo, Barus fue lo suficientemente generoso como para liberar una extensión de Yii2 pocos días después. Todavía no he integrado su código. Aquí está su última extensión de autocompletar Google Places para Yii2.

Aquí está el paquete de MapAsset que estoy creando para el JavaScript asociado que será necesario:

Aquí está el código de formulario _formPlaceGoogle.php:

Hay un campo searchbox que aceptará el autocompletado de la entrada del usuario. También hay una gran variedad de campos ocultos que nuestro JavaScript cargará con los resultados del servicio de Google Places.

Aquí está el create_place.js que logra toda la "magia":

El método setupListeners() enlaza nuestro campo searchbox al servicio de autocompletar de Google Places. Cuando ocurre un evento place_changed, se llama populateResult() para llenar los campos ocultos del formulario con los datos de Google y cargar el mapa que se muestra en la mitad derecha del formulario.

Meeting Planner Add From Google Place Autocomplete After LoadMapMeeting Planner Add From Google Place Autocomplete After LoadMapMeeting Planner Add From Google Place Autocomplete After LoadMap

Puedes utilizar al depurador del navegador para inspeccionar los campos ocultos después de que han sido llenados con los datos del formulario mediante JavaScript. Estos datos se publicarán al ser enviado el formulario por lo que podremos agregarlos a la base de datos Place.

Meeting Planner Hidden Fields from Google Places AutocompleteMeeting Planner Hidden Fields from Google Places AutocompleteMeeting Planner Hidden Fields from Google Places Autocomplete

Aquí está el elemento restante de guardar la acción del PlaceController Create_place_google:

Es bastante similar a la acción de Create_geo. Tenemos un modelo del método Place.php independiente para simplificar la recogida de los datos de ubicación. Aquí está addGeometry():

Ajustando los Filtros de los Límites Geográficos para Autocompletar la Búsqueda

El servicio de Autocompletar de Places también te permite configurar un rectángulo como delimitador geográfico para filtrar dentro de él tu búsqueda. Cuando el usuario comienza a escribir, la opción autocompletar solamente usará los lugares dentro de diez millas de ellos. Puesto que no hemos configurado la ubicación del usuario actual como una variable de sesión, no estoy implementando el rectángulo delimitador en el momento. Pero podemos hacerlo más tarde. Este es un ejemplo de setupBounds():

Agregando Manualmente los Lugares

La tercera forma con la que los usuarios pueden añadir lugares, es ingresar los datos manualmente y la información de la dirección. Cuando envían el formulario, trataremos de buscar la dirección y obener los datos de geolocalización, pero está bien si no los logramos encontrar. La opción manual le permite a los usuarios agregar lugares como su casa o una oficina que no quisieran asociar con los datos de los mapas de Google.

Así es como se ve el formulario:

Meeting Planner Manually Add PlaceMeeting Planner Manually Add PlaceMeeting Planner Manually Add Place

Así es como se ve el código del envío de PlaceController.php. Estamos utilizando el cliente de geocodificación de mapas de 2Amigos para ver la ubicación desde full_address. Obviamente hay un montón de mejoras que se pueden hacer para alentar al usuario a que escriba la dirección completa o tal vez que les permita conectar una ubicación de Google Places en una fecha posterior.

¿Qué sigue?

El alcance de este tutorial demostró se bastante grande. Quería mostrarte diversos componentes implicados en la geolocalización y el uso de mapas sin saltarme muchos elementos del proceso de codificación. Así que, obviamente, hay un montón de atajos en el momento. En el siguiente tutorial, vamos a seguir perfeccionando Places dentro del sistema en general, enfocándonos en los permisos de usuario, acceso a controles, añadiendo soporte para los lugares favoritos del usuario y otros refinamientos.

No dudes en enviar tus preguntas y comentarios a continuación. Me interesa sobre todo si tienes diferentes enfoques o ideas adicionales o si deseas sugerir temas para futuros tutoriales. También puedes encontrarme en Twitter @reifman o envíame un correo electrónico directamente. Sigue mi página de instructor en Tuts + para ver los futuros artículos de esta serie.

Enlaces relacionados

Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.