Jetpack Compose와 Retrofit을 활용한 번역기 앱 만들기

Jetpack Compose와 Retrofit을 활용한 번역기 앱 만들기

translate

1. 프로젝트 설정

먼저, Android Studio에서 새로운 프로젝트를 생성합니다. 그리고 build.gradle 파일에 필요한 종속성을 추가합니다.

Gradle

dependencies {
    implementation "androidx.compose.ui:ui:1.0.5"
    implementation "androidx.compose.material:material:1.0.5"
    implementation "androidx.compose.ui:ui-tooling-preview:1.0.5"
    implementation "androidx.lifecycle:lifecycle-runtime-ktx:2.3.1"
    implementation "androidx.activity:activity-compose:1.3.1"
    implementation "com.squareup.retrofit2:retrofit:2.9.0"
    implementation "com.squareup.retrofit2:converter-gson:2.9.0"
    implementation "com.squareup.okhttp3:logging-interceptor:4.9.1"
}

2. AndroidManifest.xml 설정

인터넷 권한을 추가합니다.
XML

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

3. Retrofit 인터페이스 정의

Retrofit 인터페이스를 정의하여 Google Translate API를 호출하는 방법을 설정합니다.

Kotlin

package com.example.translator

import retrofit2.Call
import retrofit2.http.Body
import retrofit2.http.Headers
import retrofit2.http.POST

interface TranslateService {
    @Headers("Content-Type: application/json")
    @POST("language/translate/v2")
    fun translateText(@Body request: TranslateRequest): Call<TranslateResponse>
}

data class TranslateRequest(
    val q: String,
    val target: String
)

data class TranslateResponse(
    val data: Data
)

data class Data(
    val translations: List<Translation>
)

data class Translation(
    val translatedText: String
)

4. Retrofit 인스턴스 생성

Retrofit 인스턴스를 생성하고, API 키를 HTTP 헤더에 포함시키기 위해 인터셉터를 설정합니다.

Kotlin

package com.example.translator

import okhttp3.Interceptor
import okhttp3.OkHttpClient
import retrofit2.Retrofit
import retrofit2.converter.gson.GsonConverterFactory

object RetrofitInstance {
    private const val BASE_URL = "https://translation.googleapis.com/"
    private const val API_KEY = "YOUR_API_KEY"

    private val client = OkHttpClient.Builder()
        .addInterceptor { chain ->
            val original = chain.request()
            val requestBuilder = original.newBuilder()
                .header("Authorization", "Bearer $API_KEY")
            val request = requestBuilder.build()
            chain.proceed(request)
        }
        .build()

    val api: TranslateService by lazy {
        Retrofit.Builder()
            .baseUrl(BASE_URL)
            .client(client)
            .addConverterFactory(GsonConverterFactory.create())
            .build()
            .create(TranslateService::class.java)
    }
}

5. MainActivity.kt 파일 작성

Jetpack Compose를 사용하여 UI를 구성하고, Retrofit을 사용하여 번역 요청을 처리합니다.

Kotlin

package com.example.translator

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import kotlinx.coroutines.Dispatchers
import kotlinx.coroutines.launch
import retrofit2.Call
import retrofit2.Callback
import retrofit2.Response

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            TranslatorApp()
        }
    }
}

@Composable
fun TranslatorApp() {
    var inputText by remember { mutableStateOf("") }
    var translatedText by remember { mutableStateOf("") }
    val coroutineScope = rememberCoroutineScope()

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp)
    ) {
        TextField(
            value = inputText,
            onValueChange = { inputText = it },
            label = { Text("Enter text to translate") },
            modifier = Modifier.fillMaxWidth()
        )
        Spacer(modifier = Modifier.height(16.dp))
        Button(
            onClick = {
                coroutineScope.launch {
                    translateText(inputText) { result ->
                        translatedText = result
                    }
                }
            },
            modifier = Modifier.fillMaxWidth()
        ) {
            Text("Translate")
        }
        Spacer(modifier = Modifier.height(16.dp))
        Text(text = translatedText)
    }
}

fun translateText(text: String, callback: (String) -> Unit) {
    val request = TranslateRequest(q = text, target = "es")

    RetrofitInstance.api.translateText(request).enqueue(object : Callback<TranslateResponse> {
        override fun onResponse(call: Call<TranslateResponse>, response: Response<TranslateResponse>) {
            if (response.isSuccessful) {
                val translatedText = response.body()?.data?.translations?.firstOrNull()?.translatedText ?: "Translation failed"
                callback(translatedText)
            } else {
                callback("Translation failed: ${response.message()}")
            }
        }

        override fun onFailure(call: Call<TranslateResponse>, t: Throwable) {
            callback("Translation failed: ${t.message}")
        }
    })
}

마무리
이 포스트에서는 Retrofit 인터셉터를 사용하여 Google Translate API 키를 안전하게 전달하는 방법과 Jetpack Compose를 사용하여 간단한 번역기 앱을 만드는 방법에 대해 설명드렸습니다. 이 예제를 기반으로 다양한 기능을 추가하여 더 복잡한 번역기 앱을 만들 수 있습니다. 예를 들어, 다양한 언어를 지원하거나 번역 기록을 저장하는 등의 기능을 추가할 수 있습니다.

이 포스트가 도움이 되셨길 바라며, 더 궁금한 점이 있다면 댓글로 남겨주세요! 행복한 코딩 되세요!