Quickstarters
Building a CRUD App with Jetpack Compose?

29min
Overview
In this guide, you'll learn how to develop a  CRUD (Create, Read, Update, Delete) application using Jetpack Compose for Android. 
We'll illustrate how to manage data operations effectively by integrating your app with Back4app. 
The project begins by setting up a Back4app instance named Basic-CRUD-App-JetpackCompose, which will serve as a solid backend infrastructure.
We'll outline how to design an optimal database schema by defining specific collections and fields—either manually or by leveraging Back4app's AI-driven tools. This ensures that your app’s data structure is robust enough for seamless CRUD operations.
Next, you will configure the Back4app Admin Console, a user-friendly, drag-and-drop interface that simplifies data management, making it straightforward to perform CRUD actions.
Finally, you'll connect your Jetpack Compose frontend with Back4app, utilizing either the Parse Android SDK (where applicable) or direct REST API calls, while enforcing strong security measures with advanced access controls.
By the end of this tutorial, you'll have an Android application that supports essential CRUD functionality, complete with user authentication and secure data handling.
What You'll Learn
How to construct a CRUD-based application on Android using Jetpack Compose.
Methods to create a scalable backend with Back4app.
Strategies for using the intuitive Back4app Admin Console for data manipulation.
Integration techniques with either the Parse Android SDK or REST APIs.
﻿
Prerequisites
Before proceeding, ensure you have the following ready:
A Back4app account with a newly created project.
If you require assistance, check out Getting Started with Back4app.
An Android development setup with Android Studio.
Make sure you have the latest version of Android Studio installed along with Kotlin.
Familiarity with Kotlin, Jetpack Compose, and RESTful APIs.
For a quick refresher, visit the Jetpack Compose documentation.
﻿
Step 1 – Initiating Your Project
Creating a Back4app Project
Sign in to your Back4app account.
Select the “New App” option from your dashboard.
Name your project: Basic-CRUD-App-JetpackCompose and complete the setup process.
Create New Project
﻿
After setting up, your project will be visible in the Back4app console, laying the groundwork for your backend configuration.
﻿
Step 2 – Crafting Your Database Schema
Outlining Your Data Structure
For this CRUD app, you'll define several collections. Below are sample collections along with the necessary fields and data types, ensuring your backend is well-prepared for handling data.
1. Collection: Items
This collection is used to store details about each entry.
Field
Type
Details
_id
ObjectId
Auto-generated unique identifier.
title
String
Name or title of the item.
description
String
A short overview of the item.
created_at
Date
Timestamp of when the item was added.
updated_at
Date
Timestamp for the last update.
2. Collection: Users
This collection manages user profiles and authentication data.
Field
Type
Description
_id
ObjectId
Auto-generated primary key.
username
String
Unique user identifier.
email
String
User's unique email address.
password_hash
String
Encrypted password for security.
created_at
Date
Account creation timestamp.
updated_at
Date
Last account update timestamp.
You can manually add these collections and fields via the Back4app dashboard by creating new classes and specifying the necessary columns.
Create New Class
﻿
You can set each column by choosing a data type, naming it, assigning default values, and determining if it is mandatory.
Create Column
﻿
Leveraging Back4app's AI for Schema Setup
The Back4app AI tool can automate your database schema creation by interpreting a prompt that outlines your desired collections and fields. This feature significantly accelerates project configuration.
How to Use the AI Tool:
Access the AI Tool:
Log into your Back4app console and navigate to the AI section.
Input Your Schema Description:
Provide a detailed prompt outlining the collections and their corresponding fields.
Review and Apply:
After generation, examine the proposed schema and integrate it into your project.
Sample AI Prompt
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)
﻿
Using this AI method ensures that your database is structured correctly and optimized for your app’s needs.
﻿
Step 3 – Activating the Admin Console & Managing CRUD Functions
Introduction to the Admin Console
The Back4app Admin Console is a versatile, no-code solution that allows you to oversee and manipulate your backend data effortlessly. Its intuitive interface supports drag-and-drop CRUD operations, making data management straightforward.
Activating the Admin Console
Head to the “More” section in your Back4app dashboard.
Select “Admin Console” and then choose “Activate Admin Console.”
Set up your admin credentials by registering your first admin user, which also establishes necessary roles and system collections.
Enable Admin App
﻿
Once activated, log into the Admin Console to manage your collections.
Admin App Dashboard
﻿
Performing CRUD Actions via the Console
Inside the Admin Console, you can:
Add Records: Use the “Add Record” feature within a collection (for instance, Items) to insert new entries.
View/Edit Records: Click on any record to review or modify its fields.
Remove Records: Select the delete option to eliminate obsolete records.
This simplified interface boosts productivity by making backend operations both accessible and efficient.
﻿
Step 4 – Connecting Jetpack Compose with Back4app
Now that your backend is configured, it's time to link your Android app built with Jetpack Compose to Back4app.
Option A: Utilizing the Parse Android SDK
Add the Parse SDK Dependency:
Update your build.gradle file:
Text
implementation 'com.parse:parse-android:latest.version'
implementation 'com.parse:parse-android:latest.version'
﻿
Initialize Parse in Your Application Class:
Create or update your Application class (e.g., 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()
        )
    }
}
﻿
Implement CRUD in a Compose Screen:
For example, create a screen to list items:
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") ?: "No Title")
                    Button(onClick = { /* Trigger edit action */ }) {
                        Text(text = "Edit")
                    }
                }
            }
        }
    }
}
// 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") ?: "No Title")
                    Button(onClick = { /* Trigger edit action */ }) {
                        Text(text = "Edit")
                    }
                }
            }
        }
    }
}
﻿
Option B: Using REST or GraphQL
If you prefer not to use the Parse SDK, you can interact with Back4app directly using RESTful APIs or GraphQL. For instance, to retrieve items via 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()
    }
}
﻿
Integrate these API calls into your Compose components as required.
﻿
Step 5 – Securing Your Backend
Implementing Access Control Lists (ACLs)
Enhance data security by assigning ACLs to your objects. For example, to create a record accessible only by its owner:
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()
    }
}
﻿
Configuring Class-Level Permissions (CLPs)
Within your Back4app console, adjust the CLPs for each collection. This ensures only authorized or authenticated users can access sensitive data.
﻿
Step 6 – Managing User Authentication
Setting Up User Accounts
Back4app utilizes Parse’s built-in User class for managing authentication. In your Jetpack Compose app, handle user sign-up and login using the Parse SDK.
Below is an example of a sign-up screen using 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")
        }
    }
}
﻿
You can implement similar screens for login and session management. Additional features like social sign-in, email verification, and password recovery can be managed via Back4app's console.
﻿
Step 7 – (Not Applicable)
Note: Deployment via Web is not applicable in this mobile app context.
﻿
Step 8 – Final Thoughts and Next Steps
Congratulations! You’ve now developed a complete CRUD application using Jetpack Compose and Back4app. 
You set up a project named Basic-CRUD-App-JetpackCompose, designed an effective database schema for Items and Users, and utilized the Back4app Admin Console for easy data management. 
Moreover, you integrated your Android frontend with Back4app, applying robust security measures along the way.
What’s Next?
Expand Your Compose UI:
Enhance your application with additional features like detailed item views, search capabilities, and live data updates.
Incorporate More Backend Logic:
Consider using Cloud Functions, integrating third-party APIs, or implementing role-based access controls.
Further Learning:
Explore the Back4app documentation and additional Compose tutorials to optimize performance and explore custom integrations.
By following this tutorial, you now have the tools to build a secure, efficient CRUD backend for your Android applications using Jetpack Compose and Back4app. Happy coding!
Field	Type	Details
_id	ObjectId	Auto-generated unique identifier.
title	String	Name or title of the item.
description	String	A short overview of the item.
created_at	Date	Timestamp of when the item was added.
updated_at	Date	Timestamp for the last update.
Field	Type	Description
_id	ObjectId	Auto-generated primary key.
username	String	Unique user identifier.
email	String	User's unique email address.
password_hash	String	Encrypted password for security.
created_at	Date	Account creation timestamp.
updated_at	Date	Last account update timestamp.
Updated 21 Feb 2025
Did this page help you?
How to Build a CRUD App with Ionic?
How to Develop a Basic CRUD Application with SwiftUI?