Android + 토이프로젝트) ImageSearching App

개요

• 카카오 이미지 검색 API를 이용하여 원하는 이미지를 찾고 그 이미지를 저장할 수 있는 어플
• 필수과제이므로 최대한 배우지 않은 기술들은 제외하고자 한다.

조건

MainActivity

• 하단에 두개의 버튼 생성
• 두 버튼은 각각 SearchingFragment와 MyArchiveFragment를 띄우는 기능

SearchingFragment와

• 검색어를 통해 최대 80개의 이미지 검색
• 이미지, 날짜, 제목으로 RecyclerView Item 정의
• 선택 시 좋아요 표시와 함께 내 보관함으로 이동

MyArchiveFragment를

• 좋아요한 이미지를 보여줌
• 선택 시 좋아요 취소

설계

구조

• 두개의 프래그먼트를 이용한 간단한 프로젝트이므로 SAA 채택
• View: MainActivity, SearchingFragment, MyArchiveFragment
• Model: RetrofitController, SharedPreferenceUtils

UI 배치

1. MainActivity: Fragment들을 띄우는 버튼 두개와 FragmentContainerView를 가짐.
2. SearchingFragment: 맨 위 검색창과 그 아래 이미지를 띄우는 RecyclerView(GridLayout)를 가짐.
3. MyArchiveFragment: 좋아요한 이미지를 띄우는 RecyclerView(GridLayout)

역할

1. RetrofitController: 카카오 API와 통신하고 데이터를 가져와 제공한다.
2. SharedPreferenceUtils: 검색어 및 좋아요한 이미지 저장 등에 이용하여 로컬에 정보를 저장한다.

구현

MainActivity

1. Layout 작성: Button 추가 및 FragmentContainerView 추가
2. Fragment 생성
3. view binding 적용 후 버튼 로직 추가

		binding.searchingTabBtn.setOnClickListener {
            if(fragmentIndex == 0) return@setOnClickListener
            fragmentIndex = 0
            supportFragmentManager.beginTransaction()
                .replace(R.id.main_fragment_container, SearchingFragment()).commitNow()
        }
        binding.archiveTabBtn.setOnClickListener {
            if(fragmentIndex == 1) return@setOnClickListener
            fragmentIndex = 1
            supportFragmentManager.beginTransaction()
                .replace(R.id.main_fragment_container, MyArchiveFragment()).commitNow()
        }

SearchingFragment, MyArchiveFragment

1. layout 작성: 검색창 및 RecyclerView
2. RecyclerView 정의

• kakao API의 결과 중 이미지가 url의 형태로 오는 것을 확인하였다.
• 나중에 glide 이용하기

여기까지 view layer 작업을 마쳤다.

---

RetrofitController

class RetrofitController {
    private val client = RetrofitClient.getInstance().create(RetrofitService::class.java)

    suspend fun getImages(query: String): List<ImageData>
        = client.getImages(query).documents.map {
            ImageData(
                imageUrl = it.image_url,
                from = it.display_sitename,
                time = it.datetime
            )
        }
}

RetrofitClient

object RetrofitClient {
    private var instance: Retrofit? = null
    private val gson = GsonBuilder().setLenient().create()

    private const val BASE_URL = "https://dapi.kakao.com/v2/"
    private const val CONNECT_TIMEOUT_SEC = 20000L

    private const val KAKAO_APP_KEY = BuildConfig.KAKAO_API_KEY
    private const val KAKAO_REST_API_KEY = BuildConfig.KAKAO_REST_KEY

    fun getInstance() : Retrofit {
        if(instance == null) {
            instance = Retrofit.Builder()
                .baseUrl(BASE_URL)
                .client(getOkhttpClient())
                .addConverterFactory(GsonConverterFactory.create())
                .build()
        }

        return instance!!
    }

    private fun getOkhttpClient()
        = OkHttpClient()
            .newBuilder()
        .addInterceptor { chain ->
            val originalRequest = chain.request()
            val requestBuilder = originalRequest.newBuilder()
                .header("Authorization", "KakaoAK $KAKAO_REST_API_KEY")
            val request = requestBuilder.build()

            chain.proceed(request)
        }.build()
}

Glide 추가

RecyclerView Adapter View Holder에 추가

fun bind(item: ImageData) {
    Glide.with(binding.root)
        .load(item.imageUrl)
        .into(binding.image)
    with(binding) {
        fromText.text = item.from
        timeText.text = item.time
    }
}

---

기능 정리 및 세부기능 추가

1. 좋아요 표시 및 좋아요한 이미지 내 보관함에서 보여주기
2. SharedPreference를 이용하여 좋아요한 이미지 및 마지막 검색어 저장