Sensores de los dispositivos - ua · • 1) Incluir framework MapKit.framework al proyecto. • 2)...
Transcript of Sensores de los dispositivos - ua · • 1) Incluir framework MapKit.framework al proyecto. • 2)...
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
© 2012-13 Depto. Ciencia de la Computación e IA
Sensores de los dispositivos
Sesión 4: Mapas en iOS
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Sensores © 2012-13 Depto. Ciencia de la Computación e IA Mapas
Índice de contenidos• Introducción• Componente Map View• Implementación
• Anotaciones• Capas• Servicios de geocodificación• Navegación paso a paso
2
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Sensores © 2012-13 Depto. Ciencia de la Computación e IA Mapas
Introducción• Objetivos: • Incorporar nuevas funcionalidades a la app• Mejorar la experiencia de usuario
• iOS 5 y anterior -> Mapas de Google (servicios de Google)• iOS 6 y posterior -> Mapas de Apple (servicios de Apple y
TomTom)• Disponible framework completo: MapKit.framework
3
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Sensores © 2012-13 Depto. Ciencia de la Computación e IA Mapas
Características principales• Implementación 100% nativa.• Principales funcionalidades:• Geolocalización integrada.• Anotaciones.• Capas.• Diferentes tipos de mapas (clásico, satélite, híbrido).• Búsqueda de puntos de interés (iOS 6.1+)
4
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Sensores © 2012-13 Depto. Ciencia de la Computación e IA Mapas
Nativo vs servicio externo
5
Apple Maps Google Maps
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Sensores © 2012-13 Depto. Ciencia de la Computación e IA Mapas
Nativo vs servicio externo• Decisión del desarrollador: analizar ventajas e inconvenientes
según requerimientos.
• Servicios externos• Gratuitos: Google Maps (limitaciones), Open Street Maps• Pago: Map Box
• Opción interesante: combinar el uso de nativo con servicios externos.• Imágenes (tiles) de Apple Maps (nativo)• Datos de Google (servicio externo, servicios web)• Funcionalidades extra (servicio externo).
6
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Sensores © 2012-13 Depto. Ciencia de la Computación e IA Mapas
Nativo• API muy sencilla de usar y bien documentada.• Fallos (a veces muy grandes) en los datos de los mapas.• Componente propio• Incorporación sencilla a un proyecto XCode.
7
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Sensores © 2012-13 Depto. Ciencia de la Computación e IA Mapas
Servicio externo• Dependencia de otro proveedor de mapas puede ser
problemático en un futuro (se puede dejar de dar soporte...).• Probablemente pocos fallos en datos.• Implementación propia• ¿Uso de un componente web, WebView?
• Funcionalidades extra• Google Maps: Street View• Map Box: personalización muy avanzada
8
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Sensores © 2012-13 Depto. Ciencia de la Computación e IA Mapas
Índice de contenidos• Introducción• Componente Map View• Implementación
• Anotaciones• Capas• Servicios de geocodificación• Navegación paso a paso
9
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Sensores © 2012-13 Depto. Ciencia de la Computación e IA Mapas
Map View: Características• Opción nativa: incluido en el sistema iOS• Framework propio: MapKit.framework• Buena documentación• Fácil de incorporar a una aplicación• Personalización sencilla.
• Incluido en Interface Builder.• Funcionalidades en la API:• Incorporar anotaciones• Incorporar capas al mapa.• Geolocalización incluida (posición actual).• Otras...
• Esquema de uso: protocolo-delegado.
10
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Sensores © 2012-13 Depto. Ciencia de la Computación e IA Mapas
Map View: Implementación (1)• 1) Incluir framework MapKit.framework al proyecto.• 2) Añadimos un componente Map View a un View Controller.• Por Interface builder (drag&drop)• Por código:
• 3) Añadimos la directiva import al principio del fichero:
• 4) La controladora implementa los métodos del protocolo MKMapViewDelegate:
11
MKMapView *mapa = [[MKMapView alloc] init];
#import <MapKit/MapKit.h>
@interface ViewController : UIViewController <MKMapViewDelegate>
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Sensores © 2012-13 Depto. Ciencia de la Computación e IA Mapas
Map View: Implementación (2)• Personalizaciones más comunes:• Mostrar posición actual (uso de GPS):
• Cambiar el tipo de mapa:
• Zoom en región dada por coordenadas y distancia:
12
self.mapView.showsUserLocation = YES;
self.mapView.mapType = MKMapTypeStandard;
MKCoordinateRegion region = MKCoordinateRegionMakeWithDistance(coordenadas, 1000, 1000); [self.mapView setRegion:region];
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Sensores © 2012-13 Depto. Ciencia de la Computación e IA Mapas
Índice de contenidos• Introducción• Componente Map View• Implementación
• Anotaciones• Capas• Servicios de geocodificación• Navegación paso a paso
13
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Sensores © 2012-13 Depto. Ciencia de la Computación e IA Mapas
Anotaciones• Objetivo: Mostrar puntos destacados en el mapa.• Número ilimitado de anotaciones• A más anotaciones -> más carga.
• No mostrar anotaciones innecesarias.• Mostrar sólo las indispensables
• Idea: agrupar anotaciones en una sóla según el zoom del mapa.• Uso de librerias externas.
• Funcionalidades de la anotación:• Navegación a otra vista.• Mostrar información en detalle sobre el punto.• Mostrar posición actual.
• Personalizar las anotaciones -> mejora la experiencia de usuario.
14
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Sensores © 2012-13 Depto. Ciencia de la Computación e IA Mapas
Anotaciones• Clases: • MKAnnotation: Implementa los métodos necesarios para la
implementación de las anotaciones.
• MKAnnotationView: Vista de la anotación. Incluye imagen.
15
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Sensores © 2012-13 Depto. Ciencia de la Computación e IA Mapas
Anotaciones: Implementación• 1) Crear clase propia que implemente el protocolo MKAnnotation
• 2) Implementamos los métodos requeridos por el protocolo.
• 3) Creamos una anotación según unas coordenadas.
• 4) Añadimos la anotación al mapa:
16
CustomAnnotation *customAnnotation = [[CustomAnnotation alloc] initWithCoordinate:coordenadas];
[self.mapView addAnnotation:customAnnotation];
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Sensores © 2012-13 Depto. Ciencia de la Computación e IA Mapas
Anotaciones• Anotación por defecto (pin) en mapa:
17
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Sensores © 2012-13 Depto. Ciencia de la Computación e IA Mapas
Anotaciones: Personalización• Método del protocolo MKMapViewDelegate:
18
- (MKAnnotationView *)mapView:(MKMapView *)mapView viewForAnnotation:(id <MKAnnotation>)annotation
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Sensores © 2012-13 Depto. Ciencia de la Computación e IA Mapas
Índice de contenidos• Introducción• Componente Map View• Implementación
• Anotaciones• Capas• Servicios de geocodificación• Navegación paso a paso
19
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Sensores © 2012-13 Depto. Ciencia de la Computación e IA Mapas
Capas• Objetivo: destacar una región determinada del mapa.
20
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Sensores © 2012-13 Depto. Ciencia de la Computación e IA Mapas
Capas• Clases: • MKOverlay: Implementa los métodos necesarios para la
implementación de las capas.• MKOverlayView: Vista de la capa. Incluye la imagen que se
mostrará sobre el mapa.
• Definir una clase que implemente el protocolo MKOverlay
• Definir una clase que herede de MKOverlayView• Implementar el método drawMapRect:zoomScale:inContext
21
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Sensores © 2012-13 Depto. Ciencia de la Computación e IA Mapas
Capas• Uso:• 1) Definir un objeto MKOverlay.• 2) Añadir el objeto MKOverlay al mapa:
• 3) Implementar el método mapView:viewForOverlay: del protocolo MKMapViewDelegate que devolverá un objeto de la clase MKOverlayView.
• (*) La clase MapOverlay implementa el protocolo MKOverlay.
22
MapOverlay * mapOverlay = [[MapOverlay alloc] init];
[self.mapView addOverlay:mapOverlay];
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Sensores © 2012-13 Depto. Ciencia de la Computación e IA Mapas
Índice de contenidos• Introducción• Componente Map View• Implementación
• Anotaciones• Capas• Servicios de geocodificación• Navegación paso a paso
23
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Sensores © 2012-13 Depto. Ciencia de la Computación e IA Mapas
Servicios de geocodificación• Servicios web nativos e incluidos en el SDK de iOS.• Funcionalidades:• Obtener datos sobre direcciones postales a partir de unas
coordenadas determinadas. -> Geocodificación inversa.• Obtener posiciones (coordenadas) a partir de una dirección postal
determinada. -> Geocodificación común.
• Usos:• Búsqueda de sitios en un mapa a partir de una dirección concreta.• Mostrar la situación (calle, localidad...) actual en el mapa.• etc...
24
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Sensores © 2012-13 Depto. Ciencia de la Computación e IA Mapas
Servicios de geocodificación• Framework: CoreLocation.framework• Clase: CLGeocoder
• Ejemplo geocodificación común:
25
NSString *address = @"Avda. General Marvá, 20, Alicante"; CLGeocoder *geocoder = [[CLGeocoder alloc] init];[geocoder geocodeAddressString:address completionHandler:^(NSArray *placemarks, NSError *error) { if ([placemarks count] > 0) { CLPlacemark *placemark = [placemarks objectAtIndex:0]; NSLog(@"Lugar encontrado: %@", [placemark description]); }}];
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Sensores © 2012-13 Depto. Ciencia de la Computación e IA Mapas
Servicios de geocodificación• Ejemplo geocodificación inversa:
26
CLLocationCoordinate2D coordinates = CLLocationCoordinate2DMake(38.362404, -‐0.411748);
CLLocation *location = [[CLLocation alloc] initWithLatitude:coordinates.latitude longitude:coordinates.longitude];
CLGeocoder *geocoder = [[CLGeocoder alloc] init];[geocoder reverseGeocodeLocation: location completionHandler:^(NSArray *placemarks, NSError *error){ if(!error){ for(CLPlacemark *placemark in placemarks){ NSLog(@"%@",[placemark description]); } } }];
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Sensores © 2012-13 Depto. Ciencia de la Computación e IA Mapas
Índice de contenidos• Introducción• Componente Map View• Implementación
• Anotaciones• Capas• Servicios de geocodificación• Navegación paso a paso
27
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Sensores © 2012-13 Depto. Ciencia de la Computación e IA Mapas
Navegación paso a paso• Funcionalidad similar a la de un GPS
común (TomTom, Navigon...).
• Disponible a partir de iOS 6.
• Navegación por voz.
• API disponible muy sencilla de usar.
28
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Sensores © 2012-13 Depto. Ciencia de la Computación e IA Mapas
Navegación paso a paso• Ejemplo de uso:
29
MKMapItem *mapItem1 = [[MKMapItem alloc] initWithPlacemark:placemark]; NSArray *mapItems = @[mapItem1]; // Puntos de navegación NSDictionary *options = @{ MKLaunchOptionsDirectionsModeKey: MKLaunchOptionsDirectionsModeDriving,
MKLaunchOptionsMapTypeKey:[NSNumber numberWithInteger:MKMapTypeSatellite],
MKLaunchOptionsShowsTrafficKey:YES}; // Lanzamos la aplicación de mapas[MKMapItem openMapsWithItems:mapItems launchOptions:options];
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Sensores © 2012-13 Depto. Ciencia de la Computación e IA Mapas
¿Preguntas?
30