Android Jetpack Compose API 튜토리얼

소개

여보세요.

이 튜토리얼에서는 Android Jetpack Compose를 사용하여 API에 요청을 보내고 수신된 데이터를 표시하는 방법을 보여줍니다. 😄

API 준비

먼저 데이터를 검색할 간단한 API를 실제로 만들어야 합니다.

이 자습서에서는 "JSON 서버"를 사용합니다.
https://github.com/typicode/json-server

설치는 매우 간단합니다. 터미널을 열고 다음 명령을 실행하기만 하면 됩니다.

npm install -g json-server

다음으로 "data.json"파일을 만들고 몇 가지 정보를 입력해야 합니다. 값을 원하는 값으로 자유롭게 변경하십시오.

{
  "users": [
    {   
      "id": 1,
      "profile": {
        "age": 20, 
        "name": "Ethan",
        "email": "[email protected]"
      }   
    }   
  ]
}

마지막으로 다음 명령을 통해 서버를 시작할 수 있습니다.

json-server --host [Your Network IP] data.json

호스트를 로컬 네트워크로 변경했는지 확인하십시오. 에뮬레이터/실제 장치에서 액세스할 수 있도록 네트워크를 정의해야 합니다.

http://ip:3000/users에 액세스하면 브라우저에 다음 데이터가 인쇄되는 것을 볼 수 있습니다.

프로젝트 생성

다음으로 Android Studio를 열고 이 튜토리얼에 사용할 새 프로젝트를 생성해야 합니다.

만들 프로젝트 유형을 묻는 메시지가 표시되면 "Empty Compose Activity"를 선택합니다.



그런 다음 "ApiExample"과 같은 이름을 지정하고 마침을 클릭합니다.
이것은 프로젝트를 생성한 후 찍은 이미지이므로 저장 위치는 일반적으로 "ApiExample"입니다.

매니페스트 파일 편집

먼저 인터넷 위치가 필요하므로 매니페스트 파일을 편집해야 하므로 "응용 프로그램"섹션 위에 다음을 추가합니다.

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

또한 보안 프로토콜을 사용하지 않을 것이므로 https를 사용하지 않는 경우 애플리케이션에 다음을 추가하십시오.

android:usesCleartextTraffic="true"

생산을 위해 위의 기능을 끄십시오.

종속성 설치

다음으로 이 프로젝트에 사용될 종속 항목을 설치해야 합니다.

"build.gradle"모듈을 열고 다음 구현을 추가합니다.

dependencies {
    implementation 'com.squareup.retrofit2:retrofit:2.9.0'
    implementation 'com.squareup.retrofit2:converter-gson:2.5.0'
}

프로젝트를 동기화하여 종속성을 설치합니다.

사용자 API 생성

다음으로 API 호출을 처리할 파일을 생성하고 새 "api"패키지를 생성한 다음 "UserApi.kt"라는 파일을 생성하고 다음 내용으로 채워야 합니다.

package com.example.apiexample.api  

import com.example.apiexample.ProfileModel  
import com.example.apiexample.UserModel  
import okhttp3.ResponseBody  
import retrofit2.Call  
import retrofit2.Response  
import retrofit2.Retrofit  
import retrofit2.http.Body  
import retrofit2.http.GET  
import retrofit2.http.Headers  
import retrofit2.http.Path  

public interface UserApi {  
    @Headers(  
        "Accept: application/json"  
    )  
    @GET("users/{id}")  
    abstract fun getUserById(@Path("id") id: String): Call<UserModel?>?  
}

나중에 수정될 예정이므로 금액 오류에 대해 걱정하지 마십시오.
이 호출은 사용자 ID를 사용하고 해당 사용자의 프로필을 검색합니다.

MainActivity 편집

다음으로 MainActivity.kt 파일을 편집해야 합니다. 먼저 가져오기를 정의합니다.

package com.example.apiexample  

import android.content.Context  
import android.os.Bundle  
import android.util.Log  
import android.view.View  
import android.widget.Toast  
import androidx.activity.ComponentActivity  
import androidx.activity.compose.setContent  
import androidx.compose.foundation.layout.*  
import androidx.compose.material.*  
import androidx.compose.runtime.Composable  
import androidx.compose.runtime.MutableState  
import androidx.compose.runtime.mutableStateOf  
import androidx.compose.runtime.remember  
import androidx.compose.ui.Alignment  
import androidx.compose.ui.Modifier  
import androidx.compose.ui.graphics.Color  
import androidx.compose.ui.text.TextStyle  
import androidx.compose.ui.text.font.FontFamily  
import androidx.compose.ui.text.input.TextFieldValue  
import androidx.compose.ui.text.style.TextAlign  
import androidx.compose.ui.tooling.preview.Preview  
import androidx.compose.ui.unit.dp  
import androidx.compose.ui.unit.sp  
import com.example.apiexample.api.UserApi  
import com.example.apiexample.ui.theme.ApiExampleTheme  
import com.example.apiexample.ui.theme.Purple700  
import retrofit2.*  
import retrofit2.converter.gson.GsonConverterFactory

다음으로 MainActivity 클래스를 다음과 같이 변경해야 합니다.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ApiExampleTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    MainScreen()
                }
            }
        }
    }
}

아직 너무 복잡하지 않습니다.

다음으로 이전에 생성한 JSON 데이터 파일과 동일한 변수를 사용하여 데이터 클래스를 생성해야 합니다.

data class ProfileModel(
    var age: String,
    var name: String,
    var email: String,
)

data class UserModel(
    var profile: ProfileModel
)

다음으로 MainScreen Composable을 생성해야 합니다. UI에 익숙하지 않은 경우 여기에서 Compose 양식에 대한 제 튜토리얼을 확인하세요.

@Composable
fun MainScreen() {
   Scaffold(
       topBar = {
           TopAppBar(
               backgroundColor = Purple700,
               title = {
                   Text(
                       text = "Simple API Request",
                       modifier = Modifier.fillMaxWidth(),
                       textAlign = TextAlign.Center,
                       color = Color.White
                   )
               }
           )
       },
       content = {
          Column(
              modifier = Modifier.fillMaxWidth(),
              verticalArrangement = Arrangement.Center,
              horizontalAlignment = Alignment.CenterHorizontally
          ) {
              val id = remember {
                  mutableStateOf(TextFieldValue())
              }

              val profile = remember {
                  mutableStateOf(ProfileModel(
                      age = "",
                      name = "",
                      email = ""
                  ))
              }

              Text(
                  text="API Sample",
                  style= TextStyle(
                      fontSize = 40.sp,
                      fontFamily = FontFamily.Cursive
                  )
              )

              Spacer(modifier = Modifier.height(15.dp))

              TextField(
                  label = { Text(text = "User ID")},
                  value = id.value,
                  onValueChange = { id.value = it }
              )

              Spacer(modifier = Modifier.height(15.dp))

              Box(modifier = Modifier.padding(40.dp, 0.dp, 40.dp, 0.dp)) {
                  Button(
                      onClick = {
                          val data = sendRequest(
                              id = id.value.text,
                              profileState = profile
                          )

                          Log.d("Main Activity", profile.toString())
                      }
                  ) {
                      Text(text = "Get Data")
                  }
              }

              Spacer(modifier = Modifier.height(15.dp))

              Text(text = profile.component1().toString(), fontSize = 40.sp)
          }
       }
   )
}

이렇게 하면 제목, 텍스트 입력 및 버튼이 포함된 간단한 양식이 생성됩니다. 마지막으로 실제로 API를 호출하고 데이터를 가져와서 사용자에게 보여줄 함수를 만들어야 합니다. IP 주소를 자신의 IP 주소로 바꾸십시오.

fun sendRequest(
    id: String,
    profileState: MutableState<ProfileModel>
) {
    val retrofit = Retrofit.Builder()
        .baseUrl("http://192.168.0.109:3000")
        .addConverterFactory(GsonConverterFactory.create())
        .build()

    val api = retrofit.create(UserApi::class.java)

    val call: Call<UserModel?>? = api.getUserById(id);

    call!!.enqueue(object: Callback<UserModel?> {
        override fun onResponse(call: Call<UserModel?>, response: Response<UserModel?>) {
            if(response.isSuccessful) {
                Log.d("Main", "success!" + response.body().toString())
                profileState.value = response.body()!!.profile
            }
        }

        override fun onFailure(call: Call<UserModel?>, t: Throwable) {
            Log.e("Main", "Failed mate " + t.message.toString())
        }
    })
}

모두 끝났습니다! 이제 드디어 사용해 볼 수 있습니다!

앱 실행

마지막으로 에뮬레이터/실제 기기에서 샘플 앱을 실행할 수 있습니다. 앱이 실행되면 다음 화면이 표시됩니다.



다음으로 입력 텍스트에 ID를 입력하여 얻고자 하는 사용자의 프로필을 입력합니다. 사용자가 한 명뿐이므로 1을 입력합니다.

완료되면 "데이터 가져오기"버튼을 클릭하면 하단 텍스트가 사용자의 프로필 정보와 함께 표시됩니다.



모두 끝났습니다!

결론

이 자습서에서는 간단한 API를 호출하여 Android Jetpack Compose를 사용하여 정보를 검색하고 표시하는 방법을 보여 주었습니다.

도움이 되었기를 바라며, 실제 API를 사용하거나 UI를 변경하는 등 자유롭게 실험해 보세요. 😎

프로젝트의 전체 소스 코드는 여기에서 찾을 수 있습니다.
https://github.com/ethand91/compose-api-tutorial


내가 일하는 것처럼? 다양한 주제에 대해 포스팅하고 있으니 더 보고 싶으시면 좋아요와 팔로우 부탁드립니다.
또한 저는 커피를 좋아합니다.