Building a CRUD App with Jetpack Compose?

28min
개요
이 가이드에서는 Jetpack Compose를 사용하여 Android에서 CRUD(생성, 읽기, 업데이트, 삭제) 애플리케이션을 개발하는 방법을 배웁니다.
Back4app과 통합하여 데이터 작업을 효과적으로 관리하는 방법을 설명합니다.
프로젝트는 Basic-CRUD-App-JetpackCompose라는 이름의 Back4app 인스턴스를 설정하는 것으로 시작되며, 이는 견고한 백엔드 인프라로 사용됩니다.
특정 컬렉션과 필드를 정의하여 최적의 데이터베이스 스키마를 설계하는 방법을 설명합니다. 이는 수동으로 하거나 Back4app의 AI 기반 도구를 활용하여 수행할 수 있습니다. 이를 통해 애플리케이션의 데이터 구조가 원활한 CRUD 작업을 수행할 수 있을 만큼 견고해집니다.
다음으로, 데이터 관리를 간소화하고 CRUD 작업을 쉽게 수행할 수 있도록 하는 사용자 친화적인 드래그 앤 드롭 인터페이스인 Back4app 관리 콘솔을 구성합니다.
마지막으로, Jetpack Compose 프론트엔드를 Back4app과 연결하며, 해당되는 경우 Parse Android SDK 또는 직접 REST API 호출을 사용하고, 고급 액세스 제어로 강력한 보안 조치를 시행합니다.
이 튜토리얼이 끝나면 사용자 인증 및 안전한 데이터 처리가 포함된 필수 CRUD 기능을 지원하는 Android 애플리케이션을 갖게 됩니다.
배울 내용
Jetpack Compose를 사용하여 Android에서 CRUD 기반 애플리케이션을 구축하는 방법.
Back4app으로 확장 가능한 백엔드를 만드는 방법.
데이터 조작을 위한 직관적인 Back4app 관리 콘솔 사용 전략.
Parse Android SDK 또는 REST API와의 통합 기술.
﻿
전제 조건
진행하기 전에 다음을 준비했는지 확인하세요:
새로 생성된 프로젝트가 있는 Back4app 계정입니다.
도움이 필요하면 Back4app 시작하기를 확인하세요.
Android Studio가 포함된 Android 개발 환경입니다.
최신 버전의 Android Studio와 Kotlin이 설치되어 있는지 확인하세요.
Kotlin, Jetpack Compose 및 RESTful API에 대한 이해입니다.
빠른 복습을 원하시면 Jetpack Compose 문서를 방문하세요.
﻿
1단계 – 프로젝트 시작하기
Back4app 프로젝트 만들기
Back4app 계정에 로그인하세요.
대시보드에서 “새 앱” 옵션을 선택하세요.
프로젝트 이름을 지정하세요: Basic-CRUD-App-JetpackCompose로 설정 과정을 완료하세요.
새 프로젝트 만들기
﻿
설정이 완료되면, Back4app 콘솔에서 프로젝트가 보이게 되어 백엔드 구성의 기초를 마련하게 됩니다.
﻿
2단계 – 데이터베이스 스키마 만들기
데이터 구조 개요
이 CRUD 앱에서는 여러 컬렉션을 정의합니다. 아래는 필요한 필드와 데이터 유형과 함께 샘플 컬렉션이 나와 있으며, 백엔드가 데이터를 처리할 준비가 잘 되어 있는지 확인합니다.
1. 컬렉션: 항목
이 컬렉션은 각 항목에 대한 세부 정보를 저장하는 데 사용됩니다.
필드
유형
세부사항
_id
객체 ID
자동 생성된 고유 식별자.
제목
문자열
항목의 이름 또는 제목.
설명
문자열
항목에 대한 간단한 개요.
생성일
날짜
항목이 추가된 시간의 타임스탬프.
업데이트됨
날짜
마지막 업데이트의 타임스탬프.
2. 수집: 사용자
이 컬렉션은 사용자 프로필 및 인증 데이터를 관리합니다.
필드
유형
설명
_id
객체 ID
자동 생성된 기본 키.
사용자 이름
문자열
고유 사용자 식별자.
이메일
문자열
사용자의 고유 이메일 주소.
비밀번호_해시
문자열
보안을 위한 암호화된 비밀번호.
생성일
날짜
계정 생성 타임스탬프.
업데이트됨
날짜
마지막 계정 업데이트 타임스탬프.
Back4app 대시보드를 통해 새로운 클래스를 생성하고 필요한 열을 지정하여 이러한 컬렉션과 필드를 수동으로 추가할 수 있습니다.
새 클래스 만들기
﻿
각 열을 데이터 유형을 선택하고, 이름을 지정하고, 기본값을 할당하며, 필수인지 여부를 결정하여 설정할 수 있습니다.
열 만들기
﻿
Back4app의 AI를 활용한 스키마 설정
Back4app AI 도구는 원하는 컬렉션과 필드를 설명하는 프롬프트를 해석하여 데이터베이스 스키마 생성을 자동화할 수 있습니다. 이 기능은 프로젝트 구성을 크게 가속화합니다.
AI 도구 사용 방법:
AI 도구에 접근하기:
Back4app 콘솔에 로그인하고 AI 섹션으로 이동합니다.
스키마 설명 입력하기:
컬렉션과 해당 필드를 설명하는 자세한 프롬프트를 제공합니다.
검토 및 적용하기:
생성 후 제안된 스키마를 검토하고 프로젝트에 통합합니다.
샘플 AI 프롬프트
Text
Create the following collections in my Back4app project:

Collection: Items
- Fields:
  - _id: ObjectId (auto-generated)
  - title: String
  - description: String
  - created_at: Date (auto-assigned)
  - updated_at: Date (auto-updated)

Collection: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - password_hash: String
  - created_at: Date (auto-assigned)
  - updated_at: Date (auto-updated)
Create the following collections in my Back4app project:

Collection: Items
- Fields:
  - _id: ObjectId (auto-generated)
  - title: String
  - description: String
  - created_at: Date (auto-assigned)
  - updated_at: Date (auto-updated)

Collection: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - password_hash: String
  - created_at: Date (auto-assigned)
  - updated_at: Date (auto-updated)
﻿
이 AI 방법을 사용하면 데이터베이스가 올바르게 구조화되고 앱의 요구에 최적화됩니다.
﻿
3단계 – 관리자 콘솔 활성화 및 CRUD 기능 관리
관리자 콘솔 소개
Back4app 관리자 콘솔은 백엔드 데이터를 쉽게 감독하고 조작할 수 있는 다목적 무코드 솔루션입니다. 직관적인 인터페이스는 드래그 앤 드롭 CRUD 작업을 지원하여 데이터 관리를 간단하게 만듭니다.
관리 콘솔 활성화
“더보기” 섹션으로 이동 당신의 Back4app 대시보드에서.
“관리 콘솔” 선택 그리고 “관리 콘솔 활성화.”
관리자 자격 증명 설정 첫 번째 관리자 사용자를 등록하여 필요한 역할과 시스템 컬렉션을 설정합니다.
관리 앱 활성화
﻿
활성화된 후, 관리 콘솔에 로그인하여 컬렉션을 관리하세요.
관리 앱 대시보드
﻿
콘솔을 통한 CRUD 작업 수행
관리 콘솔 내에서 다음을 수행할 수 있습니다:
레코드 추가: 컬렉션 내에서 “레코드 추가” 기능을 사용하여 새 항목을 삽입합니다.
레코드 보기/편집: 어떤 레코드를 클릭하여 필드를 검토하거나 수정합니다.
레코드 제거: 삭제 옵션을 선택하여 오래된 레코드를 제거합니다.
이 간소화된 인터페이스는 백엔드 작업을 접근 가능하고 효율적으로 만들어 생산성을 높입니다.
﻿
4단계 – Jetpack Compose와 Back4app 연결
이제 백엔드가 구성되었으므로 Jetpack Compose로 구축된 Android 앱을 Back4app에 연결할 시간입니다.
옵션 A: Parse Android SDK 활용하기
Parse SDK 의존성 추가:
당신의 build.gradle 파일을 업데이트하세요:
Text
implementation 'com.parse:parse-android:latest.version'
implementation 'com.parse:parse-android:latest.version'
﻿
애플리케이션 클래스에서 Parse 초기화:
애플리케이션 클래스를 생성하거나 업데이트하세요 (예: MyApplication.kt):
Kotlin
// MyApplication.kt
package com.example.basiccrud

import android.app.Application
import com.parse.Parse

class MyApplication : Application() {
    override fun onCreate() {
        super.onCreate()
        Parse.initialize(
            Parse.Configuration.Builder(this)
                .applicationId("YOUR_APPLICATION_ID")
                .clientKey("YOUR_CLIENT_KEY")
                .server("https://parseapi.back4app.com")
                .build()
        )
    }
}
// MyApplication.kt
package com.example.basiccrud

import android.app.Application
import com.parse.Parse

class MyApplication : Application() {
    override fun onCreate() {
        super.onCreate()
        Parse.initialize(
            Parse.Configuration.Builder(this)
                .applicationId("YOUR_APPLICATION_ID")
                .clientKey("YOUR_CLIENT_KEY")
                .server("https://parseapi.back4app.com")
                .build()
        )
    }
}
﻿
Compose 화면에서 CRUD 구현:
예를 들어, 항목을 나열하는 화면을 만드세요:
Kotlin
// ItemsScreen.kt
package com.example.basiccrud

import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.parse.ParseObject
import com.parse.ParseQuery
import kotlinx.coroutines.Dispatchers
import kotlinx.coroutines.withContext

@Composable
fun ItemsScreen() {
    var items by remember { mutableStateOf(listOf<ParseObject>()) }

    LaunchedEffect(Unit) {
        withContext(Dispatchers.IO) {
            val query = ParseQuery.getQuery<ParseObject>("Items")
            try {
                val result = query.find()
                items = result
            } catch (e: Exception) {
                e.printStackTrace()
            }
        }
    }

    Column(modifier = Modifier.padding(16.dp)) {
        Text(text = "Items", modifier = Modifier.padding(bottom = 8.dp))
        LazyColumn {
            items(items) { item ->
                Row(
                    modifier = Modifier.fillMaxWidth().padding(8.dp),
                    horizontalArrangement = Arrangement.SpaceBetween
                ) {
                    Text(text = item.getString("title") ?: "제목 없음")
                    Button(onClick = { /* 편집 작업 트리거 */ }) {
                        Text(text = "편집")
                    }
                }
            }
        }
    }
}
// ItemsScreen.kt
package com.example.basiccrud

import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.parse.ParseObject
import com.parse.ParseQuery
import kotlinx.coroutines.Dispatchers
import kotlinx.coroutines.withContext

@Composable
fun ItemsScreen() {
    var items by remember { mutableStateOf(listOf<ParseObject>()) }

    LaunchedEffect(Unit) {
        withContext(Dispatchers.IO) {
            val query = ParseQuery.getQuery<ParseObject>("Items")
            try {
                val result = query.find()
                items = result
            } catch (e: Exception) {
                e.printStackTrace()
            }
        }
    }

    Column(modifier = Modifier.padding(16.dp)) {
        Text(text = "Items", modifier = Modifier.padding(bottom = 8.dp))
        LazyColumn {
            items(items) { item ->
                Row(
                    modifier = Modifier.fillMaxWidth().padding(8.dp),
                    horizontalArrangement = Arrangement.SpaceBetween
                ) {
                    Text(text = item.getString("title") ?: "제목 없음")
                    Button(onClick = { /* 편집 작업 트리거 */ }) {
                        Text(text = "편집")
                    }
                }
            }
        }
    }
}
﻿
옵션 B: REST 또는 GraphQL 사용하기
Parse SDK를 사용하지 않으려면 RESTful API 또는 GraphQL을 사용하여 Back4app과 직접 상호작용할 수 있습니다. 예를 들어, REST를 통해 항목을 검색하려면:
Kotlin
suspend fun fetchItems() {
    try {
        val response = khttp.get(
            url = "https://parseapi.back4app.com/classes/Items",
            headers = mapOf(
                "X-Parse-Application-Id" to "YOUR_APPLICATION_ID",
                "X-Parse-REST-API-Key" to "YOUR_REST_API_KEY"
            )
        )
        // Process JSON response accordingly
    } catch (e: Exception) {
        e.printStackTrace()
    }
}
suspend fun fetchItems() {
    try {
        val response = khttp.get(
            url = "https://parseapi.back4app.com/classes/Items",
            headers = mapOf(
                "X-Parse-Application-Id" to "YOUR_APPLICATION_ID",
                "X-Parse-REST-API-Key" to "YOUR_REST_API_KEY"
            )
        )
        // Process JSON response accordingly
    } catch (e: Exception) {
        e.printStackTrace()
    }
}
﻿
필요에 따라 이러한 API 호출을 Compose 구성 요소에 통합하십시오.
﻿
5단계 – 백엔드 보안
액세스 제어 목록(ACL) 구현
ACL을 객체에 할당하여 데이터 보안을 강화하십시오. 예를 들어, 소유자만 접근할 수 있는 레코드를 생성하려면:
Kotlin
suspend fun createSecureItem(itemData: Map<String, String>, ownerUser: ParseObject) {
    val item = ParseObject("Items")
    item.put("title", itemData["title"])
    item.put("description", itemData["description"])

    // Define ACL so that only the owner has read/write privileges
    val acl = ParseACL(ownerUser)
    acl.publicReadAccess = false
    acl.publicWriteAccess = false
    item.acl = acl

    try {
        item.save()
        println("Secure item saved successfully")
    } catch (e: Exception) {
        e.printStackTrace()
    }
}
suspend fun createSecureItem(itemData: Map<String, String>, ownerUser: ParseObject) {
    val item = ParseObject("Items")
    item.put("title", itemData["title"])
    item.put("description", itemData["description"])

    // Define ACL so that only the owner has read/write privileges
    val acl = ParseACL(ownerUser)
    acl.publicReadAccess = false
    acl.publicWriteAccess = false
    item.acl = acl

    try {
        item.save()
        println("Secure item saved successfully")
    } catch (e: Exception) {
        e.printStackTrace()
    }
}
﻿
클래스 수준 권한 설정 (CLPs)
Back4app 콘솔 내에서 각 컬렉션의 CLPs를 조정하세요. 이를 통해 권한이 부여된 사용자만 민감한 데이터에 접근할 수 있습니다.
﻿
6단계 – 사용자 인증 관리
사용자 계정 설정
Back4app은 인증 관리를 위해 Parse의 내장 사용자 클래스를 활용합니다. Jetpack Compose 앱에서 Parse SDK를 사용하여 사용자 가입 및 로그인을 처리하세요.
아래는 Compose를 사용한 가입 화면의 예입니다:
Kotlin
// SignUpScreen.kt
package com.example.basiccrud

import androidx.compose.foundation.layout.*
import androidx.compose.material.Button
import androidx.compose.material.OutlinedTextField
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.parse.ParseUser

@Composable
fun SignUpScreen() {
    var username by remember { mutableStateOf("") }
    var email by remember { mutableStateOf("") }
    var password by remember { mutableStateOf("") }

    Column(modifier = Modifier.padding(16.dp)) {
        OutlinedTextField(
            value = username,
            onValueChange = { username = it },
            label = { Text("Username") },
            modifier = Modifier.fillMaxWidth()
        )
        Spacer(modifier = Modifier.height(8.dp))
        OutlinedTextField(
            value = email,
            onValueChange = { email = it },
            label = { Text("Email") },
            modifier = Modifier.fillMaxWidth()
        )
        Spacer(modifier = Modifier.height(8.dp))
        OutlinedTextField(
            value = password,
            onValueChange = { password = it },
            label = { Text("Password") },
            modifier = Modifier.fillMaxWidth()
        )
        Spacer(modifier = Modifier.height(16.dp))
        Button(onClick = {
            val user = ParseUser()
            user.username = username
            user.email = email
            user.setPassword(password)

            user.signUpInBackground { e ->
                if (e == null) {
                    println("User registered successfully!")
                } else {
                    println("Registration error: ${'$'}{e.message}")
                }
            }
        }) {
            Text(text = "Sign Up")
        }
    }
}
// SignUpScreen.kt
package com.example.basiccrud

import androidx.compose.foundation.layout.*
import androidx.compose.material.Button
import androidx.compose.material.OutlinedTextField
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.parse.ParseUser

@Composable
fun SignUpScreen() {
    var username by remember { mutableStateOf("") }
    var email by remember { mutableStateOf("") }
    var password by remember { mutableStateOf("") }

    Column(modifier = Modifier.padding(16.dp)) {
        OutlinedTextField(
            value = username,
            onValueChange = { username = it },
            label = { Text("Username") },
            modifier = Modifier.fillMaxWidth()
        )
        Spacer(modifier = Modifier.height(8.dp))
        OutlinedTextField(
            value = email,
            onValueChange = { email = it },
            label = { Text("Email") },
            modifier = Modifier.fillMaxWidth()
        )
        Spacer(modifier = Modifier.height(8.dp))
        OutlinedTextField(
            value = password,
            onValueChange = { password = it },
            label = { Text("Password") },
            modifier = Modifier.fillMaxWidth()
        )
        Spacer(modifier = Modifier.height(16.dp))
        Button(onClick = {
            val user = ParseUser()
            user.username = username
            user.email = email
            user.setPassword(password)

            user.signUpInBackground { e ->
                if (e == null) {
                    println("User registered successfully!")
                } else {
                    println("Registration error: ${'$'}{e.message}")
                }
            }
        }) {
            Text(text = "Sign Up")
        }
    }
}
﻿
로그인 및 세션 관리를 위한 유사한 화면을 구현할 수 있습니다. 소셜 로그인, 이메일 인증 및 비밀번호 복구와 같은 추가 기능은 Back4app의 콘솔을 통해 관리할 수 있습니다.
﻿
7단계 – (해당 없음)
참고: 이 모바일 앱 맥락에서는 웹을 통한 배포가 적용되지 않습니다.
﻿
8단계 – 최종 생각 및 다음 단계
축하합니다! 이제 Jetpack Compose와 Back4app을 사용하여 완전한 CRUD 애플리케이션을 개발했습니다. 
"},{
필드	유형	세부사항
_id	객체 ID	자동 생성된 고유 식별자.
제목	문자열	항목의 이름 또는 제목.
설명	문자열	항목에 대한 간단한 개요.
생성일	날짜	항목이 추가된 시간의 타임스탬프.
업데이트됨	날짜	마지막 업데이트의 타임스탬프.
필드	유형	설명
_id	객체 ID	자동 생성된 기본 키.
사용자 이름	문자열	고유 사용자 식별자.
이메일	문자열	사용자의 고유 이메일 주소.
비밀번호_해시	문자열	보안을 위한 암호화된 비밀번호.
생성일	날짜	계정 생성 타임스탬프.
업데이트됨	날짜	마지막 계정 업데이트 타임스탬프.
업데이트됨 05 Mar 2025
이 페이지가 도움이 되었습니까?
How to Build a CRUD App with Ionic?
How to Develop a Basic CRUD Application with SwiftUI?