Hướng dẫn viết 1 app iOS cơ bản với Goong SDK

Trong bài hôm nay, các bạn sẽ được hướng dẫn cách dùng Goong SDK để build một ứng dụng dùng map cơ bản cho iOS. Đến cuối tutorial, các bạn đã có thể hoàn thành một app với các chức năng map view, tìm kiếm với đề xuất kết quả và ghim pin trên bản đồ.

Full source code available at https://github.com/goong-io/Goong-iOS-Example

Bước 1:

  • Tạo Project Xcode và chạy các lệnh sau:
cd YourProject/
pod init

thêm dòng sau vào Podfile:

pod 'GoongSDK'

chạy

pod update

Để dùng được SDK và API, các bạn cần keys/token. Hãy truy cập vào account.goong.io để tạo tài khoản, rồi tạo keys tại https://account.goong.io/keys. Xin lưu ý là cần 1 key cho API và 1 key cho Map Tiles.

  • Mở YourProject.xcworkspace
  • Điền key Map Tiles vào Info.plist tại YOUR_ACCESS_TOKEN như sau:

Bước 2 — Tạo MapView: (https://docs.goong.io/guide/ios)

  • Điền NSLocationWhenInUseUsageDescriptionvào Info.plist
  • Import GoongSDK

Swift: import GoongSDK

Objective C: @import GoongSDK

  • Tạo MapView trong viewDidLoad()
import UIKit
import GoongSDK

class ViewController: UIViewController, MGLMapViewDelegate {

override func viewDidLoad() {
super.viewDidLoad()
let mapView = MGLMapView(frame: view.bounds)
mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
mapView.delegate = self
// View more style at MGLStyle.h
mapView.styleURL = MGLStyle.dayStyleURL
// Optionally set a starting point.
mapView.setCenter(CLLocationCoordinate2DMake(21.028511, 105.804817), zoomLevel: 12, animated: false)
mapView.myLocationEnabled = true

view.addSubview(mapView)
}
}

Chúc mừng! Sau khi build thì bạn đã có một ứng dụng hiển thị MapView đơn giản, có hỗ trợ các tương tác zoom và scroll.

Bước 3 — Tạo SearchBar với Autocomplete

  • thêm dòng sau vào Podfile:
pod 'GoongGeocoder'

sau đó chạy

pod update

Import GoongGeocoder vào ViewController

import GoongGeocoder

Tạo một Search Button:

let searchButton = UIButton(frame: CGRect(x: view.frame.size.width - 100 , y: 50, width: 80, height: 30))  
searchButton.setTitle("Search", for: .normal)
searchButton.backgroundColor = .darkGray
searchButton.setTitleColor(.white, for: .normal)
searchButton.addTarget(self, action: #selector(self.search), for: .touchUpInside)
view.addSubview(searchButton)

Cung cấp API key mà các bạn đã tạo sau accessToken:

@objc func search() {  
let vc = GoongAutocompleteViewController(accessToken: "insert API key here")
let nav = UINavigationController(rootViewController: vc)
vc.delegate = self
self.present(nav, animated: true, completion: nil)
}

Build and Run!

Bước 4 — Ghim Pin trên Map :

Thêm pin icon vào Assets.xcassets.

Download icon

Implement GoongAutocompleteDelegate để xử lý lựa chọn kết quả trong autocomplete:

class ViewController: UIViewController, MGLMapViewDelegate, GoongAutocompleteDelegate {  
.....func viewController(_ viewController: GoongAutocompleteViewController, didAutocompleteWith place: Placemark?) {
guard let place = place else {return}
let marker = MGLMarker()
marker.coordinate = place.location!.coordinate
marker.title = place.name
marker.reuseIdentifier = "markerIdentifier"
marker.icon = UIImage(named: "pin")!
marker.map = self.mapView
// Move map camera to marker coordinate
self.mapView.setCenter(marker.coordinate, animated: true)
}
}

Thêm vài dòng code cho việc xử lý lỗi:

func viewController(_ viewController: GoongAutocompleteViewController, didFailAutocompleteWithError error: Error?) {
print(error)
}

Chúc mừng các bạn đã hoàn thành bài 1 của series blog hướng dẫn sử dụng Goong SDK. Xin cảm ơn và hẹn gặp lại vào các bài hướng dẫn sắp tới 🙂

Goong
Goong Documents
Goong Account