8주차 실습(1)-카카오맵 가져와서 따라하기

1. 구글에 kakaomap api 검색

2. 안드로이드 고르기

* 기본적으로 안드로이드 api를 사용할 때는 rest api보다는 sdk 를 사용하는 게 좋다.

3. 시작하기-시작하기 클릭 후 살펴보기

4. 요구사항 체크

플랫폼 별로 버전도 다르고 지원해주는 기능도 다름

인터넷 권한 추가해주기!

5. 지도 시작하기

6. 앱 등록

6-1. 카카오개발자 사이트 들어가기

6-2. 회원가입 후 시작하기 누르기

6-3. 애플리케이션 추가하기

6-4. 앱 이름/사업자명/카테고리 기입 후 저장하기 클릭하면 kakao developers에 앱 정보 생성됨

6-5. 플랫폼 정보 설정해야 함-안드로이드 플랫폼 등록 클릭

6-6. 패키지명 기입

6-7. 카카오 SDK로 디버그 키 해시 확인

키 해시 얻어야 함(지금은 디버깅 단계라서 개발자 세명이면 세명꺼 다 등록해야 함. 배포 후엔 공통된 하나의 키 해시만 얻어서 그 키 해시가 있으면 모든 사람이 앱을 사용할 수 있음)

구글링 키해시 얻기 검색해보면 여러가지 있는데 카카오도 제공함.

구글링해서 나오는 kakao developers 페이지의 카카오 API 플랫폼에서 제공하는 Kakao SDK for Android(이하 Android SDK) 사용 방법페이지에서

배포할때 쓰는 키는 릴리즈 키.

디버깅할때 기기마다 고유한 키 가지게 되는 디버그 키

구글링해보면 키해시는 다양한 방법으로 얻을 수 있지만 kakaomap을 사용할거고 kakao에서 제공하는 키 해시를 사용해보도록 하겠다.

import com.kakao.sdk.common.util.Utility

var kayHash = Utility.getKeyHash(this)

구글링해보면 위의 코드를 복붙해주면 된다.

아래의 줄을 복붙해보면 Utility가 import가 안된다.

왜냐하면 kakao의 sdk에서 제공하는 함수인데 아직 그래들에서 못 가져왔기 때문이다.

 

6-9. Gradle 설정

키 해시 얻을때 쓴)구글링해서 나오는 kakao developers 페이지의 카카오 API 플랫폼에서 제공하는 Kakao SDK for Android(이하 Android SDK) 사용 방법에서 키 해시의 아래부분에 있는 Gradle 설정 부분에 가서

추가하란거 추가해준다.

코드 보면 gradle이 아닌 maven을 써야한다.

 

allprojects{}라는 태그에 추가하라는데 좀 옛날거다

최신버전 안드로이드스튜디오를 사용하고 있으면 

settings.gradle.kts 파일에 가서 dependencyResolutionManagement{} 안에 maven 구문을 넣어주면 된다.

근데 문법을 groovy 문법이 아니라 kotlin 문법으로 써야한다.

// groovy 버전
maven { url 'https://devrepo.kakao.com/nexus/content/groups/public/'}
// kotlin 버전
maven (url ="https://devrepo.kakao.com/nexus/content/groups/public/")

 

6-10. 모듈 설정

마찬가지로 그래들 문법(kotlin dsl 문법)으로 써줘야 한다.

// build.gradle(Module) 파일
dependencies {
  implementation ("com.kakao.sdk:v2-all:2.18.0") // 전체 모듈 설치, 2.11.0 버전부터 지원
}

Sync Now 누르고

이제 kakao SDK가 나의 android 프로젝트에 합쳐져서 액티비티의 소스코드에서 이 모듈을 사용할 수 있는 상태가 된다.

 

이제 Utility를 import 할수 있게 된다.

keykey라는 이름으로 로그를 찍어서 key Hash를 얻고 그걸 앱 만들때 쓸것이다.

이제 이걸 안드로이드 플랫폼 등록 페이지에 넣어주자

그러면 이렇게 디버깅용으로 사용할 키해시의 값이 앱에 등록된다.

6. 앱 등록 완료!

 

다음단계로 넘어가보자

 

7. 네이티브 앱 키(sdk 사용할것이기 때문. rest api 대신!)

네이티브 앱 키를 어디서 얻냐면

구글링"kakao map api"

->android 클릭->시작하기->"시작하기"->"지도 시작하기"->카카오 개발자 사이트 클릭->시작하기 클릭

아까 앱등록할때 만든 앱이 나올거임

어플 클릭하면

이런 키들이 뜨는데 거기서 네이티브 키 복사해오기

SDK 사용과 REST API 사용이 다른데, 우리는 SDK 사용할 것이므로 네이티브 앱(안드로이드 자체의 SDK를 의미) 키를 쓸 것이다.

 

하란대로 manifest 파일에 키를 추가해준다.

// manifest 파일
<application
    ... 
    <meta-data
        android:name="com.kakao.vectormap.APP_KEY"
        android:value="${APP_KEY}"/>   // 네이티브 앱 키 넣기
</application>

 

그 아래에 키 해시 추가하라 되어있는데 그건 아까 했으므로 이제 프로젝트에서 개발을 진행할 준비가 끝났다.

다음 단계로 넘어가자.

 

8. 프로젝트 설정

8-1. 의존성 추가

아까는 카카오 전체에 대한 의존성을 추가하는 구문을 settings.gradle 파일에 추가했었다.

이번에는 카카오맵을 개발하기 위한 카카오맵에 대한 의존성을 추가한다.

repositories {
    maven (url ="https://devrepo.kakao.com/nexus/repository/kakaomap-releases/")
} // gradle 문법으로 바꿔주기

마찬가지로 build.gradle 에도 위 사진처럼 추가해준다.

 

이후에도 하란대로 해준다.
8-2. mapView 선언

mapView라는 View를 xml에 선언해준다.

8-3. 지도 시작 및 KakaoMap 객체 가져오기

이것도 하란대로 코드 긁어서 해준다.

 

대신 레이아웃가져올때 뷰바인딩으로 가져오도록 한다.

그래들파일에

bulidFeatures {

    viewBinding = true

}

선언해주고 

 

MainActivity에서 onCreate 밖에

lateinit private var binding : ActivityMainBinding

해주고

 

onCreate 안에

super.onCreate(savedInstanceState) 밑에

binding = ActivityMainBinding.inflate(layoutinflater) 적어주고

그 밑에 setContentView(binding.root)로 수정해준다.

 

그러면 findViewById 구문은 필요없어지고 

binding.mapView.start(object : MapLifeCycleCallback() {
            override fun onMapDestroy() {
                // 지도 API 가 정상적으로 종료될 때 호출됨 
            }

            override fun onMapError(error: java.lang.Exception) {
                // 인증 실패 및 지도 사용 중 에러가 발생할 때 호출됨
            }
        }, object : KakaoMapReadyCallback() {
            override fun onMapReady(kakaoMap: KakaoMap) {
                // 인증 후 API 가 정상적으로 실행될 때 호출됨
            }
        })

위와 같이 binding.mapView로 뷰를 불러올수 있게 된다.

 

빌드해보면 에뮬레이터는 안되고 기기를 연결해서 미러링으로 해야한다.

 

9. 지도 시작위치 바꾸기

메뉴에서 api guide-Camera 들어가보면 현재 카메라 값 가져오기, 카메라 변경해서 지도 움직이기 등 관련 설정이 나오므로 camera로 가보자.

오른쪽 사진은 camera 관련 속성이다.

 

우선 카메라 값을 가져와서 카메라를 변경하는 코드를 작성해보자.

9-1. 카메라 가져오기

(오른쪽 사진)카메라를 변경하려 했더니 cameraUpdate 값이 먼저 필요하대서 현재의 카메라 값이 필요한 것이다.

 

시작위치가 어떻든 일단 카메라를 변경하고 시작해보자

// * 코틀린 코드 아님

// 1. 새로운 위치로 이동
CameraUpdateFactory.newCenterPosition(LatLng.from(37.402005, 127.108621));

// 애니메이션 적용 여부
CameraUpdate cameraUpdate = CameraUpdateFactory.newCenterPosition(LatLng.from(37.402005, 127.108621));

// 1. 애니메이션 효과 없이 바로 지도 이동 
kakaoMap.moveCamera(cameraUpdate);

우선 위도/경도 정보가 필요하므로 구글링해서 찾아주자

그걸 바로 '// 애니메이션 적용 여부' 아래의 코드에 넣어주면 사실 '// 1. 새로운 위치로 이동' 아래의 코드는 필요가 없어지므로 지워주자

그러면 CameraUpdateFactory가 위도경도로부터 새로운 CenterPosition을 받아오고 우리는 그걸 val cameraUpdate에 저장한다.

그리고 애니메이션 효과 없이 지도를 이동해서 어플리케이션을 켤 때 마치 거기서부터 시작한 것 처럼 할 수 있다.

 

다음 글에서는 검색으로 지도 위치를 옮기는 실습을 해보겠다.