[swift] Mapbox를 이용한 실시간 위치 기반 교통 카드 충전 서비스 개발 방법

29 Nov 2023

swift

Mapbox는 실시간 위치 기반 서비스를 제공하는 맵 및 위치 API 플랫폼입니다. 이를 활용하여 교통 카드 충전 서비스를 개발할 수 있습니다. 이번 블로그에서는 실시간 위치 정보를 기반으로 사용자의 교통 카드를 충전하는 서비스를 구축하는 방법에 대해 알아보겠습니다.

1. Mapbox 계정 생성 및 토큰 발급

Mapbox를 사용하기 위해 먼저 Mapbox 계정을 생성해야 합니다. 계정 생성 후, 개인 액세스 토큰을 발급받아야 합니다. 토큰은 API 호출 시 인증에 사용됩니다.

2. Swift 프로젝트 설정

Xcode를 사용하여 새로운 Swift 프로젝트를 생성합니다. 필요한 의존성을 관리하기 위해 CocoaPods를 사용할 것을 추천합니다. CocoaPods를 사용하여 Mapbox SDK를 프로젝트에 추가합니다. Podfile에 다음과 같이 Mapbox를 추가합니다.

platform :ios, '11.0'

target 'YourProject' do
  use_frameworks!
  pod 'Mapbox-iOS-SDK'
end

터미널에서 pod install 명령어를 실행하여 의존성을 설치합니다.

3. Mapbox 지도 표시

다음으로, Mapbox 지도를 프로젝트에 표시해야 합니다. 먼저, ViewController에 MGLMapView 인스턴스를 추가합니다.

import Mapbox

class ViewController: UIViewController {
  
  var mapView: MGLMapView!
  
  override func viewDidLoad() {
    super.viewDidLoad()
    
    mapView = MGLMapView(frame: view.bounds)
    mapView.styleURL = MGLStyle.streetsStyleURL
    view.addSubview(mapView)
  }
  
}

viewDidLoad() 메소드에서 MGLMapView 인스턴스를 생성하고, 지도 스타일을 설정한 후 뷰에 추가합니다.

4. 사용자 현재 위치 표시

사용자의 현재 위치를 표시하기 위해 CoreLocation 프레임워크를 사용합니다. 위치 업데이트를 받고 사용자 위치를 맵에 표시하는 코드를 추가합니다.

import CoreLocation

class ViewController: UIViewController, CLLocationManagerDelegate {
  
  var mapView: MGLMapView!
  var locationManager: CLLocationManager!
  
  override func viewDidLoad() {
    super.viewDidLoad()
    
    mapView = MGLMapView(frame: view.bounds)
    mapView.styleURL = MGLStyle.streetsStyleURL
    view.addSubview(mapView)
    
    locationManager = CLLocationManager()
    locationManager.delegate = self
    locationManager.requestAlwaysAuthorization()
  }
  
  // 위치 업데이트 처리
  func locationManager(_ manager: CLLocationManager, didUpdateLocations locations: [CLLocation]) {
    guard let location = locations.last else { return }
    
    mapView.setCenter(location.coordinate, zoomLevel: 13, animated: true)
    
    // 사용자 위치 표시
    let userMarker = MGLPointAnnotation()
    userMarker.coordinate = location.coordinate
    mapView.addAnnotation(userMarker)
  }
  
  // 위치 권한 설정
  func locationManager(_ manager: CLLocationManager, didChangeAuthorization status: CLAuthorizationStatus) {
    if status == .authorizedAlways || status == .authorizedWhenInUse {
      locationManager.startUpdatingLocation()
    }
  }
  
  func locationManager(_ manager: CLLocationManager, didFailWithError error: Error) {
    print("Location Error: \(error.localizedDescription)")
  }
  
}

위 코드에서 CLLocationManager를 사용하여 위치 정보 업데이트를 처리하고, Mapbox 지도에 사용자의 위치를 마커로 표시합니다.

5. 서버와 통신하여 카드 충전

마지막으로, 서버와 통신하여 교통 카드 충전을 처리하는 기능을 구현합니다. 사용자가 특정 위치에서 교통 카드를 충전하고자 할 때, 해당 위치의 정보와 사용자 정보를 서버에 전송하고 서버에서 카드 충전을 수행합니다.

서버와의 통신은 웹 서비스 API를 사용하거나, 소켓 통신 등 다양한 방법으로 구현할 수 있습니다. 해당 코드는 서버와의 통신에 대한 예제이므로, 실제 서버 구현과 동작은 서버 플랫폼에 따라 다를 수 있습니다.

import Alamofire

func chargeCard(at location: CLLocationCoordinate2D, for user: User) {
  let parameters: Parameters = [
    "latitude": location.latitude,
    "longitude": location.longitude,
    "user_id": user.id
  ]
  
  Alamofire.request("https://your-server.com/charge", method: .post, parameters: parameters)
    .responseJSON { response in
      if let json = response.result.value {
        let result = json["result"] as? String ?? "Unknown"
        print("Card charge result: \(result)")
      } else {
        print("Card charge failed")
      }
    }
}

위 코드는 Alamofire를 사용하여 서버 API에 POST 요청을 보내는 예제입니다. 사용자 정보와 사용자가 선택한 위치 정보를 파라미터로 전달하고, 서버로부터 응답을 받아 처리합니다.

이제 해당 기능을 사용자 인터페이스에 적용하고, 필요한 기능을 추가하여 완전한 교통 카드 충전 서비스를 개발할 수 있습니다.

결론

Mapbox를 이용하여 실시간 위치 기반 교통 카드 충전 서비스를 개발하는 방법에 대해 알아보았습니다. Mapbox를 활용하면 사용자 위치 정보를 기반으로 다양한 지도 기반 서비스를 구축할 수 있습니다. 개발에 앞서 Mapbox의 문서와 예제를 참고하시면 더욱 도움이 될 것입니다.

참고 문서: Mapbox iOS SDK Documentation

참고 예제: Mapbox iOS SDK Examples