Quickstarters
How to Build a CRUD App with Ionic?

27min
Introduction
In this guide, you'll create a comprehensive CRUD (Create, Read, Update, Delete) application using Ionic. 
This tutorial demonstrates how to set up an app that manages data efficiently while integrating with Back4app as your backend service. You'll begin by configuring a Back4app project called Basic-CRUD-App-Ionic to serve as your robust data store.
Following that, you'll design a scalable data schema by defining collections and fields—either manually or by utilizing the Back4app AI Agent. This ensures your application’s backend is prepared to handle essential data operations.
Next, you'll take advantage of the intuitive Back4app Admin App, which offers a drag and drop interface for seamless data management, enabling easy execution of CRUD operations.
Finally, you'll integrate your Ionic frontend with Back4app using REST/GraphQL calls , and secure your backend with advanced access controls.
By the conclusion of this tutorial, you'll have built a production-ready Ionic application that not only supports basic CRUD functionality but also incorporates user authentication and robust data management.
Key Takeaways
Understand how to construct a CRUD application that efficiently manages data using a dependable backend service.
Learn how to design a scalable backend schema and integrate it with an Ionic frontend for a superior user experience.
Explore how to manage data through a user-friendly, drag and drop interface provided by the Back4app Admin App.
Gain insights into securing your backend with access control measures.
﻿
Prerequisites
Before you begin, ensure you have:
A Back4app account and an active project.
For guidance, visit Getting Started with Back4app.
An Ionic development environment.
Install the Ionic CLI by following the instructions at Ionic Framework Docs. Make sure you have Node.js (v14 or above) installed.
Familiarity with TypeScript, Angular (or your preferred framework for Ionic), and REST APIs.
Refer to the Ionic documentation for additional insights.
﻿
Step 1 – Project Setup
Establishing a New Back4app Project
Log in to your Back4app account.
Select “New App” from your dashboard.
Assign your project the name: Basic-CRUD-App-Ionic and follow the prompts to complete setup.
Create New Project
﻿
Once your project is created, it will be listed on your Back4app dashboard, serving as the foundation for your backend configuration.
﻿
Step 2 – Designing Your Database Schema
Crafting Your Data Model
For your CRUD application, you'll need to define several collections. Below are examples of collections and corresponding fields to structure your database effectively.
1. Items Collection
This collection holds details about each item.
Field
Data Type
Description
_id
ObjectId
Auto-generated primary key.
title
String
The name or title of the item.
description
String
A brief summary of the item.
created_at
Date
Timestamp when the item was created.
updated_at
Date
Timestamp for the latest update.
2. Users Collection
This collection stores user credentials and related details.
Field
Data Type
Description
_id
ObjectId
Auto-generated primary key.
username
String
Unique username for the user.
email
String
Unique email address.
password_hash
String
Encrypted password for authentication.
created_at
Date
Timestamp when the user was created.
updated_at
Date
Timestamp when the user details were modified.
You can set up these collections directly in the Back4app dashboard by creating a new class for each and adding the appropriate columns.
Create New Class
﻿
Easily configure each field by selecting its data type, assigning a name, and setting default values or requirements.
Create Column
﻿
Employing the Back4app AI Agent for Schema Generation
The Back4app AI Agent simplifies the schema creation process. By describing your data model in a prompt, the agent auto-generates the necessary collections and fields.
How to Use the AI Agent:
Access the AI Agent:
Navigate to the AI Agent via your Back4app dashboard.
Define Your Data Model:
Input a detailed prompt that outlines the required collections and their fields.
Review and Implement:
Evaluate the suggested schema and apply it to your project.
Sample Prompt
Text
Create the following collections for my Back4app project:

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

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

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

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - password_hash: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)
﻿
This approach not only saves time but also ensures consistency and optimal setup for your backend.
﻿
Step 3 – Activating the Admin App & Managing CRUD Operations
Overview of the Admin App
The Back4app Admin App is a no-code tool that enables you to manage your backend data easily through a drag and drop interface. This intuitive tool allows you to execute CRUD operations effortlessly.
Activating the Admin App
Go to the “More” menu on your Back4app dashboard.
Select “Admin App” and click “Enable Admin App.”
Set up your admin credentials by creating your first administrator account. This step also configures roles (e.g., B4aAdminUser) and system collections.
Enable Admin App
﻿
After activation, log in to the Admin App to begin managing your data.
Admin App Dashboard
﻿
Managing CRUD Operations via the Admin App
Within the Admin App, you can:
Add Records: Click the “Add Record” button in a collection (e.g., Items) to insert new entries.
View/Modify Records: Select an entry to inspect or edit its details.
Remove Records: Use the delete function to eliminate unnecessary entries.
This streamlined interface enhances the overall user experience by simplifying data management tasks.
﻿
Step 4 – Integrating Ionic with Back4app
With your backend configured, it's time to connect your Ionic frontend to Back4app.
Using REST or GraphQL
You can execute CRUD operations using REST or GraphQL. For example, to retrieve items using REST:
TypeScript
// Example REST call within an Ionic service
async function fetchItems() {
  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Items', {
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      }
    });
    const data = await response.json();
    console.log('Fetched items:', data.results);
  } catch (error) {
    console.error('Error retrieving items:', error);
  }
}

fetchItems();
// Example REST call within an Ionic service
async function fetchItems() {
  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Items', {
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      }
    });
    const data = await response.json();
    console.log('Fetched items:', data.results);
  } catch (error) {
    console.error('Error retrieving items:', error);
  }
}

fetchItems();
﻿
Integrate these API calls into your Ionic components based on your application's needs.
﻿
Step 5 – Securing Your Backend
Setting Up Access Control Lists (ACLs)
Enhance your data security by applying ACLs to objects. For instance, to create a private item:
TypeScript
async function createPrivateItem(itemData: any, ownerUser: any) {
  const Items = Parse.Object.extend('Items');
  const item = new Items();
  item.set('title', itemData.title);
  item.set('description', itemData.description);

  // Configure ACL so that only the owner can access
  const acl = new Parse.ACL(ownerUser);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);
  item.setACL(acl);

  try {
    const savedItem = await item.save();
    console.log('Private item created:', savedItem);
  } catch (error) {
    console.error('Error saving item:', error);
  }
}
async function createPrivateItem(itemData: any, ownerUser: any) {
  const Items = Parse.Object.extend('Items');
  const item = new Items();
  item.set('title', itemData.title);
  item.set('description', itemData.description);

  // Configure ACL so that only the owner can access
  const acl = new Parse.ACL(ownerUser);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);
  item.setACL(acl);

  try {
    const savedItem = await item.save();
    console.log('Private item created:', savedItem);
  } catch (error) {
    console.error('Error saving item:', error);
  }
}
﻿
Configuring Class-Level Permissions (CLPs)
Within the Back4app dashboard, set up CLPs for each collection to define default access rules. This configuration restricts access to sensitive data to authenticated or authorized users only.
﻿
Step 6 – User Authentication
Managing User Accounts
Back4app uses Parse’s User class to manage authentication. In your Ionic application, implement user registration and login as follows:
TypeScript
// src/app/auth/auth.page.ts
import { Component } from '@angular/core';
import Parse from '../parseConfig';

@Component({
  selector: 'app-auth',
  templateUrl: './auth.page.html',
  styleUrls: ['./auth.page.scss'],
})
export class AuthPage {
  username: string = '';
  password: string = '';
  email: string = '';

  async signUp() {
    const user = new Parse.User();
    user.set('username', this.username);
    user.set('password', this.password);
    user.set('email', this.email);

    try {
      await user.signUp();
      alert('User registered successfully!');
    } catch (error: any) {
      alert('Registration error: ' + error.message);
    }
  }
}
// src/app/auth/auth.page.ts
import { Component } from '@angular/core';
import Parse from '../parseConfig';

@Component({
  selector: 'app-auth',
  templateUrl: './auth.page.html',
  styleUrls: ['./auth.page.scss'],
})
export class AuthPage {
  username: string = '';
  password: string = '';
  email: string = '';

  async signUp() {
    const user = new Parse.User();
    user.set('username', this.username);
    user.set('password', this.password);
    user.set('email', this.email);

    try {
      await user.signUp();
      alert('User registered successfully!');
    } catch (error: any) {
      alert('Registration error: ' + error.message);
    }
  }
}
﻿
A similar pattern can be followed for implementing login and session management. Additional features like social logins, email verification, and password recovery can also be configured via the Back4app dashboard.
﻿
Step 7 – Conclusion and Future Directions
Congratulations! You have successfully developed a basic CRUD application using Ionic integrated with Back4app. In this tutorial, you:
Configured a project named Basic-CRUD-App-Ionic on Back4app.
Designed detailed database collections for Items and Users.
Managed your data using the efficient Back4app Admin App.
Connected your Ionic frontend with the backend using REST/GraphQL APIs.
Secured your backend with robust ACLs and CLPs.
Implemented user authentication to manage user accounts.
Next Steps:
Expand Your Frontend:
Enrich your Ionic application with additional views, navigation, and real-time updates.
Integrate Advanced Features:
Consider incorporating cloud functions, third-party API integrations, or enhanced role-based access controls.
Consult Further Resources:
Explore the Back4app documentation and Ionic resources for advanced optimization and customization techniques.
By following this tutorial, you now possess the skills to build and secure a dynamic, production-ready CRUD application using Ionic and Back4app. Enjoy coding and further experimentation!
Field	Data Type	Description
_id	ObjectId	Auto-generated primary key.
title	String	The name or title of the item.
description	String	A brief summary of the item.
created_at	Date	Timestamp when the item was created.
updated_at	Date	Timestamp for the latest update.
Field	Data Type	Description
_id	ObjectId	Auto-generated primary key.
username	String	Unique username for the user.
email	String	Unique email address.
password_hash	String	Encrypted password for authentication.
created_at	Date	Timestamp when the user was created.
updated_at	Date	Timestamp when the user details were modified.
Updated 21 Feb 2025
Did this page help you?
How to Create a Basic CRUD App with Preact?
Building a CRUD App with Jetpack Compose?