Airbnb 앱 개발하기

Side Project - Airbnb
네이버 지도 API를 활용해서 지도 위에 숙소 정보를 보여주는 Airbnb의 간단한 기능을 구현한 프로젝트

 

• GitHub -> https://github.com/hwayeon351/Airbnb

GitHub - hwayeon351/Airbnb

 

---

학습 회고

오늘은 에어비엔비의 대표적인 기능인 지도에 숙소 정보를 띄워주는 기능을 구현하는 새로운 프로젝트를 시작하였다.

---

오늘 공부한 내용

• 네이버 지도 API 활용하기

Airbnb 앱을 실행하면 지도를 띄워 숙소 위치를 마커들로 표시하고자 했다.

따라서 지도를 띄우기 위해서 네이버 지도 API를 사용했다.

Naver Cloud Pratform에 앱을 등록한 뒤에 네이버 지도 SDK를 사용하기 위해서 gradle에 의존성을 추가해야 한다.

 

프로젝트 수준의 gradle에 Maven 저장소를 추가해주고 앱 모듈의 gradle에 네이버 지도 SDK에 대한 의존성을 추가해주었다.

dependencies {
    // 네이버 지도 SDK
    implementation 'com.naver.maps:map-sdk:3.14.0'
}

Sync를 하고 나서 네이버 맵 뷰를 레이아웃에 추가해준 뒤 앱을 실행시켜보니 implementation 때문에 자꾸 오류가 났다.

 

그 이유는 AndroidX로 이전했기 때문에 이전에 지원하였던 라이브러리들을 androidx 네임스페이스 패키지로 대체되면서 기존 프로젝트를 이전해야하기 때문이었다.

안드로이드 공식 문서를 찾아보니 gradle.properties 파일에 두 가지를 추가해줘야 했다.

android.useAndroidX=true
android.enableJetifier=true

useAndroidX에 true값을 설정하는 것은 이전에 지원한 라이브러리 대신 AndroidX 라이브러리를 사용한다는 것이고, enableJetifier에 true값을 설정하는 것은 바이너리를 다시 작성해서 기존 타사 라이브러리를 AnroidX를 사용할 수 있도록 자동으로 이전해주는 것이었다.

 

이 두 가지를 추가한 후에 앱을 재실행해서 정상적으로 네이버 지도가 띄워지는 것을 확인할 수 있었다.

 

https://guide.ncloud-docs.com/docs/naveropenapiv3-maps-android-sdk-v3-start

Android 시작 가이드 - Mobile Dynamic Map (v3)

 

https://developer.android.com/jetpack/androidx/migrate?hl=ko 

AndroidX로 이전  |  Android 개발자  |  Android Developers

 

• 지도 객체 구성요소

하나의 지도는 뷰 요소와 인터페이스 요소로 구성된다.

뷰 요소는 화면에 지도를 나타내는 역할을 한다. MapFragment와 MapView가 뷰 요소에 해당 된다.

MapFragment와 MapView는 개발자가 직접 생성할 수 있다.

 

인터페이스 요소는 지도를 다루는 인터페이스 역할을 한다.

NaverMap 클래스가 인터페이스 역할을 담당하며, 지도와 관련된 기능 대부분은 이 클래스에서 제공된다.

NaverMap 객체는 개발자가 직접 생성할 수 없고, 콜백 메서드를 이용해서만 얻어올 수 있다.

 

• 뷰 요소

지도를 화면에 나타내는 방법은 MapFragment를 사용하는 방법과 레이아웃에 MapView를 추가하는 방법이 있다.

MapFragment를 사용하면 수명주기를 가지고 있어서 따로 수명주기에 대한 처리를 하지 않아도 된다는 장점이 있다.

 

나는 MapView를 추가해서 지도를 화면에 나타냈다.

<com.naver.maps.map.MapView
    android:id="@+id/mapView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginBottom="80dp"/>

 

중요한 점은 MapView를 사용하면 MapView를 띄우는 Activity나 Fragment의 수명주기를 MapView에 적용해줘야 한다.

그래야 Activity나 Fragment의 라이프 사이클에 맞게 MapView도 컨트롤 할 수 있고 지도가 정상적으로 동작할 수 있다.

class MainActivity : AppCompatActivity(), OnMapReadyCallback {

    private val mapView: MapView by lazy {
        findViewById(R.id.mapView)
    }
    
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        mapView.onCreate(savedInstanceState)
    }
    
        override fun onStart() {
        super.onStart()
        mapView.onStart()
    }

    override fun onResume() {
        super.onResume()
        mapView.onResume()
    }

    override fun onPause() {
        super.onPause()
        mapView.onPause()
    }

    override fun onSaveInstanceState(outState: Bundle) {
        super.onSaveInstanceState(outState)
        mapView.onSaveInstanceState(outState)
    }

    override fun onStop() {
        super.onStop()
        mapView.onStop()
    }

    override fun onDestroy() {
        super.onDestroy()
        mapView.onDestroy()
    }

    override fun onLowMemory() {
        super.onLowMemory()
        mapView.onLowMemory()
    }
}

 

• Naver Map 객체 가져오기

인터페이스 역할을 하는 NaverMap 객체를 받아오려면 MapFragments나 MapView의 getMapAsync() 메서드로 OnMapReadyCallback을 등록해서 비동기로 받아 올 수 있다.

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    mapView.onCreate(savedInstanceState)
    mapView.getMapAsync(this)
}

이후 NaverMap 객체가 준비되면 onMapReady() 콜백 메서드가 호출된다.

onMapReady가 호출될 때 NaverMap 객체 인터페이스를 활용해서 지도의 Zoom과 카메라 이동, 위치 추적 모드를 on/off하는 버튼을 설정할 수 있다.

이때, 네이버 지도 SDK는 기본적으로 사용자의 위치 권한을 요구하지 않기 때문에 런타임 권한 요청 코드를 작성해줘야 한다.

또한, 네이버 지도 SDK에 위치를 제공하는 인터페이스인 LocationSource 구현체를 지정해야 한다.

LocationSource의 메서드는 지도 객체가 호출하기 때문에 개발자가 직접 호출 할 수 없다.

override fun onMapReady(map: NaverMap) {
    naverMap = map

    naverMap.maxZoom = 18.0
    naverMap.minZoom = 10.0

    val cameraUpdate = CameraUpdate.scrollTo(LatLng(37.497894,127.027587))
    naverMap.moveCamera(cameraUpdate)

    val uiSetting = naverMap.uiSettings
    uiSetting.isLocationButtonEnabled = false

    currentLocationButton.map = naverMap

    locationSource = FusedLocationSource(this@MainActivity, LOCATION_PERMISSION_REQUEST_CODE)
    naverMap.locationSource = locationSource

    getHouseListFromAPI()
}

나는 FusedLocationSource를 사용하였다.

FusedLocationSource는 Google에서 지원하는 LocationSource이다.

FusedLocationSource는 객체를 생성할 때 런타임 권한 처리를 위해 액티비티나 프래그먼트 객체를 전달하고 권한 요청 코드를 지정해줘야 한다.

이후, 권한 요청에 대한 결과를 받아오는 onRequestPermissionsRequest()의 결과 파라미터를 생성한 FusedLocationSource 객체에 전달해줘야 한다.

override fun onRequestPermissionsResult(
    requestCode: Int,
    permissions: Array<out String>,
    grantResults: IntArray
) {
    super.onRequestPermissionsResult(requestCode, permissions, grantResults)

    if (requestCode != LOCATION_PERMISSION_REQUEST_CODE) return

    if (locationSource.onRequestPermissionsResult(requestCode, permissions, grantResults)) {
        if (!locationSource.isActivated) {
            naverMap.locationTrackingMode = LocationTrackingMode.None
        }
        return
    }
}

 

 

https://navermaps.github.io/android-map-sdk/guide-ko/2-1.html

지도 객체 · 네이버 지도 안드로이드 SDK

https://navermaps.github.io/android-map-sdk/guide-ko/4-2.html

위치 · 네이버 지도 안드로이드 SDK