Quickstarters
How to Develop a Basic CRUD Mobile App with NativeScript?

28min
Overview
In this guide, you'll create a full-featured CRUD (create, read, update, delete) mobile application using NativeScript. 
This tutorial walks you through setting up your project, configuring a robust backend on Back4app, and integrating a NativeScript frontend to manage and update data seamlessly.
We begin by establishing a new Back4app project called Basic-CRUD-App-NS, which serves as the backbone for your data operations. You’ll then define a flexible database schema by setting up collections and fields, either manually or by leveraging the Back4app AI Agent.
Following this, you'll utilize the Back4app Admin App—a no-code interface designed for effortless data manipulation—to perform CRUD tasks efficiently. 
Lastly, you will integrate your NativeScript mobile app with Back4app using REST APIs, ensuring your backend is secure with advanced access controls.
By the end of this tutorial, you'll have a production-ready mobile application that not only performs essential CRUD operations but also incorporates user authentication and secure data handling.
Main Insights
Master the art of building CRUD mobile apps that manage data efficiently using a reliable backend.
Learn how to design a scalable database and seamlessly integrate it with a NativeScript frontend.
Discover how to use a drag-and-drop admin interface (the Back4app Admin App) to simplify data management.
Understand best practices for securing your backend with ACLs and Class-Level Permissions.
﻿
Prerequisites
﻿
A Back4app account with a new project set up.
If you need assistance, check out Getting Started with Back4app.
A NativeScript development environment.
Install the NativeScript CLI and set up your environment by following the NativeScript documentation.
Basic knowledge of JavaScript/TypeScript, NativeScript, and RESTful APIs.
Familiarize yourself with the NativeScript guides if necessary.
Before starting, ensure you have:
﻿
Step 1 – Project Initialization
Establishing a New Back4app Project
Log into your Back4app dashboard.
Select the “New App” option.
Name your project: Basic-CRUD-App-NS and follow the instructions to create it.
Create New Project
﻿
Once your project is set up, it will be listed in your dashboard, ready for backend configuration and management.
﻿
Step 2 – Designing the Database Schema
Crafting Your Data Model
For this CRUD mobile app, you'll create key collections. Below are sample collections along with the essential fields and data types to set up your schema, enabling the fundamental operations to create, read, update, and delete data.
1. Items Collection
This collection holds details for each item.
Field
Data Type
Description
_id
ObjectId
Auto-generated primary identifier.
title
String
Name or title of the item.
description
String
Short summary of the item.
created_at
Date
Timestamp when the item was created.
updated_at
Date
Timestamp when the item was last modified.
2. Users Collection
This collection stores user credentials and details.
Field
Data Type
Description
_id
ObjectId
Auto-generated primary identifier.
username
String
Unique username of the user.
email
String
Unique email address.
password_hash
String
Securely hashed password.
created_at
Date
Account creation timestamp.
updated_at
Date
Last update timestamp for the user profile.
You can create these collections manually in the Back4app dashboard by adding a new class for each collection and defining the respective columns.
Create New Class
﻿
Define each field by selecting a data type, naming it, and specifying default values or requirements.
Create Column
﻿
﻿
Utilizing the Back4app AI Agent for Schema Setup
The Back4app AI Agent is an efficient tool within your dashboard that can auto-generate your database schema based on a prompt describing your desired collections and fields. This feature streamlines the process and ensures consistency.
How to Leverage the AI Agent:
Launch the AI Agent:
Access it from the Back4app dashboard or project settings.
Detail Your Data Model:
Input a prompt outlining the collections and fields you require.
Review and Confirm:
Examine the generated schema suggestions and apply them to your project.
Sample Prompt
Text
Create these 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 these 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 process saves time and ensures your schema is both consistent and optimized.
﻿
Step 3 – Activating the Admin App & Performing CRUD Operations
Introducing the Admin App
The Back4app Admin App offers a no-code interface to manage your backend data easily. Its drag-and-drop design enables quick and effective CRUD operations.
How to Enable the Admin App
Go to the “More” menu in your Back4app dashboard.
Select “Admin App” and then click “Enable Admin App.”
Set up your admin credentials by creating the first admin user, which also establishes roles (e.g., B4aAdminUser) and system collections.
Enable Admin App
﻿
Once enabled, log into the Admin App to begin managing your collections.
Admin App Dashboard
﻿
Executing CRUD Operations with the Admin App
Within the Admin App, you can:
Create Records: Use the “Add Record” option within any collection (for example, Items) to insert new entries.
Read/Modify Records: Click on any record to view its details or edit its information.
Remove Records: Select the delete option to eliminate records that are no longer needed.
This intuitive tool enhances user experience by simplifying data management tasks.
﻿
Step 4 – Connecting NativeScript with Back4app
After setting up your backend and managing data via the Admin App, the next step is to link your NativeScript mobile app to Back4app.
Using REST APIs for Integration
Since the SDK integration may not be optimal for NativeScript in this scenario, you can utilize REST APIs to perform CRUD operations.
Example: Fetching Data with REST
Below is an example of how to retrieve items from your Back4app database using a REST call in a NativeScript service file.
TypeScript
// app/services/item-service.ts
import { Http } from '@nativescript/core';

const APPLICATION_ID = 'YOUR_APPLICATION_ID';
const REST_API_KEY = 'YOUR_REST_API_KEY';

export async function fetchItems() {
  try {
    const response = await Http.request({
      url: 'https://parseapi.back4app.com/classes/Items',
      method: 'GET',
      headers: {
        'X-Parse-Application-Id': APPLICATION_ID,
        'X-Parse-REST-API-Key': REST_API_KEY
      }
    });
    const data = response.content.toJSON();
    return data.results;
  } catch (error) {
    console.error('Error fetching items:', error);
    throw error;
  }
}
// app/services/item-service.ts
import { Http } from '@nativescript/core';

const APPLICATION_ID = 'YOUR_APPLICATION_ID';
const REST_API_KEY = 'YOUR_REST_API_KEY';

export async function fetchItems() {
  try {
    const response = await Http.request({
      url: 'https://parseapi.back4app.com/classes/Items',
      method: 'GET',
      headers: {
        'X-Parse-Application-Id': APPLICATION_ID,
        'X-Parse-REST-API-Key': REST_API_KEY
      }
    });
    const data = response.content.toJSON();
    return data.results;
  } catch (error) {
    console.error('Error fetching items:', error);
    throw error;
  }
}
﻿
Integrate similar REST API calls within your NativeScript components to handle create, update, and delete operations.
﻿
Step 5 – Securing Your Backend
Implementing Access Control Lists (ACLs)
Protect your data by setting ACLs for each object. For example, to create a private item, use the following approach:
TypeScript
// app/services/item-service.ts
import { Http } from '@nativescript/core';

const APPLICATION_ID = 'YOUR_APPLICATION_ID';
const REST_API_KEY = 'YOUR_REST_API_KEY';

export async function createPrivateItem(itemData: { title: string; description: string }, ownerId: string) {
  const payload = {
    title: itemData.title,
    description: itemData.description,
    ACL: {
      [ownerId]: { read: true, write: true },
      "*": { read: false, write: false }
    }
  };

  try {
    const response = await Http.request({
      url: 'https://parseapi.back4app.com/classes/Items',
      method: 'POST',
      headers: {
        'X-Parse-Application-Id': APPLICATION_ID,
        'X-Parse-REST-API-Key': REST_API_KEY,
        'Content-Type': 'application/json'
      },
      content: JSON.stringify(payload)
    });
    return response.content.toJSON();
  } catch (error) {
    console.error('Error creating item:', error);
    throw error;
  }
}
// app/services/item-service.ts
import { Http } from '@nativescript/core';

const APPLICATION_ID = 'YOUR_APPLICATION_ID';
const REST_API_KEY = 'YOUR_REST_API_KEY';

export async function createPrivateItem(itemData: { title: string; description: string }, ownerId: string) {
  const payload = {
    title: itemData.title,
    description: itemData.description,
    ACL: {
      [ownerId]: { read: true, write: true },
      "*": { read: false, write: false }
    }
  };

  try {
    const response = await Http.request({
      url: 'https://parseapi.back4app.com/classes/Items',
      method: 'POST',
      headers: {
        'X-Parse-Application-Id': APPLICATION_ID,
        'X-Parse-REST-API-Key': REST_API_KEY,
        'Content-Type': 'application/json'
      },
      content: JSON.stringify(payload)
    });
    return response.content.toJSON();
  } catch (error) {
    console.error('Error creating item:', error);
    throw error;
  }
}
﻿
Configuring Class-Level Permissions (CLPs)
Within the Back4app dashboard, adjust the CLPs for each collection to define default access rights. This helps ensure that only authorized users can access or modify sensitive data.
﻿
Step 6 – User Authentication
Setting Up Account Management
Back4app utilizes Parse’s User class to manage authentication. In your NativeScript app, implement registration and login processes as demonstrated below.
Example: User Registration
TypeScript
// app/services/auth-service.ts
import { Http } from '@nativescript/core';

const APPLICATION_ID = 'YOUR_APPLICATION_ID';
const REST_API_KEY = 'YOUR_REST_API_KEY';

export async function signUp(username: string, password: string, email: string) {
  const payload = {
    username,
    password,
    email
  };

  try {
    const response = await Http.request({
      url: 'https://parseapi.back4app.com/users',
      method: 'POST',
      headers: {
        'X-Parse-Application-Id': APPLICATION_ID,
        'X-Parse-REST-API-Key': REST_API_KEY,
        'Content-Type': 'application/json'
      },
      content: JSON.stringify(payload)
    });
    return response.content.toJSON();
  } catch (error) {
    console.error('Sign-up error:', error);
    throw error;
  }
}
// app/services/auth-service.ts
import { Http } from '@nativescript/core';

const APPLICATION_ID = 'YOUR_APPLICATION_ID';
const REST_API_KEY = 'YOUR_REST_API_KEY';

export async function signUp(username: string, password: string, email: string) {
  const payload = {
    username,
    password,
    email
  };

  try {
    const response = await Http.request({
      url: 'https://parseapi.back4app.com/users',
      method: 'POST',
      headers: {
        'X-Parse-Application-Id': APPLICATION_ID,
        'X-Parse-REST-API-Key': REST_API_KEY,
        'Content-Type': 'application/json'
      },
      content: JSON.stringify(payload)
    });
    return response.content.toJSON();
  } catch (error) {
    console.error('Sign-up error:', error);
    throw error;
  }
}
﻿
A similar method can be used for logging in and managing user sessions. Additional functionalities like social logins, email confirmations, and password resets can be configured through the Back4app dashboard.
﻿
Step 7 – Conclusion and Future Directions
Well done! You have now created a complete basic CRUD mobile application using NativeScript and Back4app. 
Your project, Basic-CRUD-App-NS, includes a well-defined backend with collections for Items and Users, managed seamlessly via the Admin App. 
You have also integrated your NativeScript frontend with Back4app through REST APIs and secured your data with robust ACLs and CLPs.
Next Steps:
Enhance Your Mobile App:
Add features such as detailed views, search functionality, and push notifications.
Expand Functionality:
Integrate advanced backend features like Cloud Functions or third-party API services.
Further Learning:
Explore the Back4app documentation and additional NativeScript resources to refine your skills.
Happy coding and best of luck with your future mobile app projects!
Field	Data Type	Description
_id	ObjectId	Auto-generated primary identifier.
title	String	Name or title of the item.
description	String	Short summary of the item.
created_at	Date	Timestamp when the item was created.
updated_at	Date	Timestamp when the item was last modified.
Field	Data Type	Description
_id	ObjectId	Auto-generated primary identifier.
username	String	Unique username of the user.
email	String	Unique email address.
password_hash	String	Securely hashed password.
created_at	Date	Account creation timestamp.
updated_at	Date	Last update timestamp for the user profile.
Updated 21 Feb 2025
Did this page help you?
How to Build a CRUD App with Backbone.js? A Step-by-Step Tutorial
How to Build a CRUD App with SvelteKit? A Comprehensive Tutorial