construyendo el proyecto. - appmovil.cem.itesm.mx · import corelocation import mapkit class...

6
Proyectos de desarrollo para dispositivos móviles. Usando Mapas iOS proporciona un framework para utilizar mapas dinámicos e interactivos en las apps. iOS utiliza el framework Core Location para determinar la posición del dispositivo y la despliega sobre un mapa. Construyendo el proyecto. Crea un proyecto nuevo (UsandoMapas) y agrega el framework Core Location y MapKit. Construye la siguiente interfaz de usuario para mostrar el mapa y la posición del dispositivo.

Upload: others

Post on 22-Jul-2020

8 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Construyendo el proyecto. - appmovil.cem.itesm.mx · import CoreLocation import MapKit class ViewController: UIViewController, CLLocationManagerDelegate, MKMapViewDelegate { let gps

Proyectosdedesarrolloparadispositivosmóviles.UsandoMapasiOSproporcionaunframeworkparautilizarmapasdinámicoseinteractivosenlasapps.

iOSutilizaelframeworkCoreLocationparadeterminarlaposicióndeldispositivoyladespliegasobreunmapa.

Construyendo el proyecto. Creaunproyectonuevo(UsandoMapas)yagregaelframeworkCoreLocationyMapKit.Construyelasiguienteinterfazdeusuarioparamostrarelmapaylaposicióndeldispositivo.

Page 2: Construyendo el proyecto. - appmovil.cem.itesm.mx · import CoreLocation import MapKit class ViewController: UIViewController, CLLocationManagerDelegate, MKMapViewDelegate { let gps

Implementando la funcionalidad en el controlador ImportaCoreLocationyMapKitenViewController.swifteimplementaelprotocolocorrespondientepararecibirinformaciónyeventosdelgpsyelmapa.import UIKit import CoreLocation import MapKit class ViewController: UIViewController, CLLocationManagerDelegate, MKMapViewDelegate { let gps = CLLocationManager()ParainteractuarconCoreLocation,creamosunobjeto(gps)detipoCLLocationManager,elcualseencargarádellamaraunmétododeldelegadocuandoexistanactualizacionesenlaposiciónyproporcionalainformaciónparaelmapa.Agregaeloutletparaelmapa. // Outlets @IBOutlet weak var mapa: MKMapView! AgregaelmétodoconfigurarMapaparaasignareldelegadoaladministradordeGPSymapa,yterminarlaconfiguración.LlamaaestemétododesdeviewDidLoad. func configurarMapa() { mapa.delegate = self gps.delegate = self gps.desiredAccuracy = kCLLocationAccuracyBest gps.requestWhenInUseAuthorization() }Laappsolicitaelpermisomostrandounaalertayuntextoquedebemoscapturarenelarchivoinfo.plist.AgregaunaentradaaldiccionarioconlallaveNSLocationWhenInUseUsageDescription.

Cuandoelusuarioresponde,seejecutaelsiguientemétododeldelegadodeladministradordeGPS.Dehecho,cuandolaappiniciasellamaestemétodoconstatusNotDetermined.Yposteriormentesellamasiemprequecorreslaaplicaciónconelúltimopermisoasignado. func locationManager(_ manager: CLLocationManager, didChangeAuthorization status: CLAuthorizationStatus) { if status == .authorizedWhenInUse { // Hay permiso, iniciar las actualizaciones gps.startUpdatingLocation() } else if status == .denied { gps.stopUpdatingLocation() print("Puedes habilitar el gps en Ajustes") // Alerta } }

Page 3: Construyendo el proyecto. - appmovil.cem.itesm.mx · import CoreLocation import MapKit class ViewController: UIViewController, CLLocationManagerDelegate, MKMapViewDelegate { let gps

Puedescorrerenestemomentolaapp.

Paraqueveaselpuntoazuldelaposiciónyloscambios,activalapropiedaddelmapa:

Notarásqueelmapasemuestraconunzoominicialnoadecuado,agregaelsiguientecódigoalfinaldelmétodoconfigurarMapa. // Tamaño inicial del mapa let centro = CLLocationCoordinate2DMake(19.5953, -99.2276) let span = MKCoordinateSpan(latitudeDelta: 0.01, longitudeDelta: 0.01) let region = MKCoordinateRegion(centro, span) mapa.region = regionElspanindicaelespacioquedeberáservisibleenelmapa,recibeelsegmentoenlatitudylongitud.Unvalorde1esaproximadamente111kmenelecuadory0kmenlospolos.

Page 4: Construyendo el proyecto. - appmovil.cem.itesm.mx · import CoreLocation import MapKit class ViewController: UIViewController, CLLocationManagerDelegate, MKMapViewDelegate { let gps

Paranotificarquehayactualizaciones,elmapallamaalmétododeldelegadoypasacomoparámetrounobjetodetipoMKUserLocation.Enesteejemplocentramoselmapaenlanuevaposición. func mapView(_ mapView: MKMapView, didUpdate userLocation: MKUserLocation) { // Cambió la posición mapa.setCenter(userLocation.coordinate, animated: true) } Ahoraagregamosunmarcadorenlaplazadeborregos.AgregaelsiguientecódigoalfinaldelmétodoconfigurarMapa. // Marcador en plaza de borregos (19.595402, -99.226725) let centroBorregos = CLLocationCoordinate2DMake(19.595402, -99.226725) let pin = MKPointAnnotation() pin.coordinate = centroBorregos pin.title = "Plaza Borregos" pin.subtitle = "Tec CEM" mapa.addAnnotation(pin) (----->OPCIONAL<------)Siquierespersonalizarlaimagendelpin,puedesagregarelsiguientemétododefinidoeneldelegadoMKMapViewDelegate. // Para configurar el pin func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? { if annotation.title! == "My Location" { return nil // Imagen por default } var pinView:MKAnnotationView! = nil pinView = mapView.dequeueReusableAnnotationView(withIdentifier: "pin") if pinView == nil { pinView = MKAnnotationView(annotation: annotation, reuseIdentifier: "pin") } else { pinView.annotation = annotation } pinView.image = UIImage(named: "carro") pinView.canShowCallout = true return pinView }

Page 5: Construyendo el proyecto. - appmovil.cem.itesm.mx · import CoreLocation import MapKit class ViewController: UIViewController, CLLocationManagerDelegate, MKMapViewDelegate { let gps

Ahora te toca a ti. Agregaunmenúparaqueelusuariopuedaseleccionarvariasopciones.ElmenúpuedeserimplementadoconlaclaseCPMenuViewoalgúnotrocomponente.(https://github.com/phuongvnc/CPMenuView)lasopcionesson:

1. Mostrar/ocultartráfico.2. Mostrarmarcadoresparalosrestaurantescercanosallugaractual.PuedenusarelAPI

deGoogleolaclaseMKLocalSearchRequestdeiOS.Cadamarcadordebetenerelnombredellugaryladistanciaenkms.desdelaposiciónactual.

3. (Opcional)Detectarqueteencuentrasenlaplazadeborregosymostrarunmensajequeindiquehaciadondeestáapuntandoelteléfono(CCI,biblioteca,CEDETEC,Starbucksypecera).Usaelmétodogps.startUpdatingHeading()deladministradordegpsparamonitorearcambiosenladirección.

4. Pantalla'Acercade'conlosdatosdelaappyelautor.Acontinuación,semuestranalgunaspantallasdelaappterminada.

a)Elmapa

b)Elmenú

c)Mostrandoeltráfico

Page 6: Construyendo el proyecto. - appmovil.cem.itesm.mx · import CoreLocation import MapKit class ViewController: UIViewController, CLLocationManagerDelegate, MKMapViewDelegate { let gps

d)Restaurantescercanos

e)Enlaplazadeborregos

Evaluación Concepto. PuntosInterfazdeusuario.Incluyeunmenú. 20Despliegaelmapaylaubicaciónactual. 10Muestra/Ocultaeltráfico. 30Muestra/Ocultarestaurantescercanos. 30Indicaloslugaresseñaladosenlaplazadeborregos. 20PantallaAcercade. 10

Referencias ElAPIdelugaresdeGoogle.https://developers.google.com/places/ios-api/?hl=esEllenguajedeprogramaciónSwift.https://developer.apple.com/library/content/documentation/Swift/Conceptual/Swift_Programming_Language/index.htmlUsandomapaseniOS.https://developer.apple.com/maps/