[Android] 경기지역화폐 지도 만들기 - 5

 

이번 포스트는 카카오 SDK를 이용하여 카카오 맵을 연결해보도록 하겠습니다.

 

apis.map.kakao.com/android/guide/

먼저 위의 URL에 접속해보도록 합시다.

 

지금 현재 사용하려는 SDK 버전은 1.4.1.0 입니다.

일단 다운을 받읍시다.

압축을 풀어보면 아래와 같은 파일들을 볼수 있습니다.

libDaumMapAndroid.jar파일은 프로젝트 폴더에서 app/libs 폴더 내에 복사 붙여넣기 해줍시다.

나머지 3개의 arm으로 시작하는 폴더들은 app/src/main 내에 jniLibs라는 폴더를 만들고 그 안에 복사 붙여넣기 합니다.

 

SDK만 다운받아서는 카카오맵을 사용할 수는 없습니다.

카카오에 SDK를 사용하겠다고 내 앱을 등록시켜줘야합니다.

 

그러기 위해선 내 앱의 hash key값을 알아야 합니다.

private fun getHashKey() {
    var packageInfo: PackageInfo? = null
    try {
        packageInfo =
                packageManager.getPackageInfo(packageName, PackageManager.GET_SIGNATURES)
    } catch (e: PackageManager.NameNotFoundException) {
        e.printStackTrace()
    }
    if (packageInfo == null) Log.e("KeyHash", "KeyHash:null")
    for (signature in packageInfo!!.signatures) {
        try {
            val md: MessageDigest = MessageDigest.getInstance("SHA")
            md.update(signature.toByteArray())
            Log.d("KeyHash", Base64.encodeToString(md.digest(), Base64.DEFAULT))
        } catch (e: NoSuchAlgorithmException) {
            Log.e("KeyHash", "Unable to get MessageDigest. signature=$signature", e)
        }
    }
}

이제 프로그램 시작할때 위의 함수를 실행시키면 log로 KeyHash을 검색하면 앱의 해시키를 가져올 수 있습니다.

 

 

developers.kakao.com/

Kakao Developers

위의 URL로 접속해봅시다.

 

로그인을 하고 내 어플리케이션을 선택합시다. 그리고 애플리케이션 추가하기를 선택합니다.

 

앱이름과 사업자 명이 나오는데 앱 이름은 간단하게 쉬운 경기지역화폐 지도라고 합시다.

사업자 명은 패키지를 생성할때 만든 이름을 사용하도록 합시다.

 

플랫폼을 선택한 후, Android 플랫폼 등록을 눌러줍시다.

아까전에 얻어온 해시키를 입력해줍시다.

 

그리고 왼쪽 탭에서 요약정보를 선택합시다.

그러면 앱키 리스트가 나옵니다. 네이티브 앱키, REST API키 JavaScript키, Admin 키 중 네이티브 앱 키를 복사해줍시다.

 

이제 프로젝트에서 AndroidManifest.xml로 이동합니다.

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>

권한 추가를 해줍니다.

application의 property단에 아래와 같은 내용을 추가줍니다.

android:usesCleartextTraffic="true"

그리고 application 내에 아래와 같은 앱키를 추가해줍니다.

<meta-data android:name="com.kakao.sdk.AppKey" android:value="네이티브 앱키"/>

그리고 build.gradle 을 엽니다.

depenencies에 아래와 같은 내용을 추가합니다.

compile files('libs/libDaumMapAndroid.jar')

 

그리고 저장을 하면 SDK 사용을 위한 준비가 끝납니다.

 

이제 실제 맵을 띄워봅시다. 방법은 간단합니다.

activity_main.xml으로 가서 RelativeLayout 하나를 아래와 같이 만들어봅시다.

 

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <RelativeLayout
        android:id="@+id/map_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />

</androidx.constraintlayout.widget.ConstraintLayout>

우리가 실제로 띄울 카카오 맵은 위의 id가 map_view인 레이아웃에 띄울 예정입니다.

 

이제 MainActivity.kt로 가봅시다.

package com.antoine.easylocalpaymap

import android.content.pm.PackageInfo
import android.content.pm.PackageManager
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.util.Base64
import android.util.Log
import com.antoine.easylocalpaymap.model.data.LocalPayPlace
import com.antoine.easylocalpaymap.model.service.LocalPlaceRepository
import kotlinx.android.synthetic.main.activity_main.*
import net.daum.mf.map.api.MapView
import org.koin.android.ext.android.inject
import retrofit2.Call
import retrofit2.Callback
import retrofit2.Response
import java.security.MessageDigest
import java.security.NoSuchAlgorithmException

class MainActivity : AppCompatActivity(), Callback<LocalPayPlace> {

    private val model: LocalPlaceRepository by inject()

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

        val mapView = MapView(this)
        map_view.addView(mapView)

//        btnTest.setOnClickListener {
//            model.getOlaceList("1","1","용인시","기흥구 죽전로","").enqueue(this)
//        }
    }


    override fun onFailure(call: Call<LocalPayPlace>, t: Throwable) {
        TODO("Not yet implemented")
    }

    override fun onResponse(call: Call<LocalPayPlace>, response: Response<LocalPayPlace>) {
        TODO("Not yet implemented")
    }
}

 

val mapView = MapView(this)
map_view.addView(mapView)

위의 코드를 적용하면 끝납니다.

 

다만 여기서 중요한건 에뮬레이터를 통해서 카카오맵을 띄우려고 하면 안됩니다.

반드시 실제 안드로이드 폰을 이용해야 맵이 로딩이 됩니다.