How to Develop a Basic CRUD Mobile App with NativeScript?

27min
개요
이 가이드에서는 NativeScript를 사용하여 완전한 기능을 갖춘 CRUD(생성, 읽기, 업데이트, 삭제) 모바일 애플리케이션을 생성합니다.
이 튜토리얼은 프로젝트 설정, Back4app에서 강력한 백엔드 구성, 데이터 관리를 위한 NativeScript 프론트엔드 통합을 안내합니다.
Basic-CRUD-App-NS"라는 새로운 Back4app 프로젝트를 설정하여 데이터 작업의 기반을 마련합니다. 그런 다음 수집 및 필드를 설정하여 유연한 데이터베이스 스키마를 정의합니다. 이는 수동으로 하거나 Back4app AI 에이전트를 활용하여 수행할 수 있습니다.
그 후, CRUD 작업을 효율적으로 수행하기 위해 데이터 조작을 위한 코드 없는 인터페이스인 Back4app Admin App을 활용합니다.
마지막으로, REST API를 사용하여 NativeScript 모바일 앱을 Back4app과 통합하여 백엔드의 보안을 고급 액세스 제어로 보장합니다.
이 튜토리얼이 끝나면 필수 CRUD 작업을 수행할 뿐만 아니라 사용자 인증 및 안전한 데이터 처리를 통합한 생산 준비가 완료된 모바일 애플리케이션을 갖게 됩니다.
주요 통찰
신뢰할 수 있는 백엔드를 사용하여 데이터를 효율적으로 관리하는 CRUD 모바일 앱 구축 기술을 마스터하세요.
확장 가능한 데이터베이스를 설계하고 NativeScript 프론트엔드와 원활하게 통합하는 방법을 배우세요.
데이터 관리를 단순화하기 위해 드래그 앤 드롭 관리 인터페이스(Back4app Admin App)를 사용하는 방법을 알아보세요.
ACL 및 클래스 수준 권한으로 백엔드를 보호하기 위한 모범 사례를 이해하세요.
﻿
전제 조건
﻿
새 프로젝트가 설정된 Back4app 계정입니다.
도움이 필요하면 Back4app 시작하기를 확인하세요.
NativeScript 개발 환경입니다.
NativeScript CLI를 설치하고 NativeScript 문서를 따라 환경을 설정하세요.
JavaScript/TypeScript, NativeScript 및 RESTful API에 대한 기본 지식입니다.
필요하다면 NativeScript 가이드를 숙지하세요.
시작하기 전에 다음을 확인하세요:
﻿
1단계 – 프로젝트 초기화
새 Back4app 프로젝트 설정하기
Back4app 대시보드에 로그인하세요.
“새 앱” 옵션을 선택하세요.
프로젝트 이름을 지정하세요: Basic-CRUD-App-NS로 설정하고 지침에 따라 생성하세요.
새 프로젝트 만들기
﻿
프로젝트가 설정되면 대시보드에 나열되어 백엔드 구성 및 관리가 준비됩니다.
﻿
2단계 – 데이터베이스 스키마 설계
데이터 모델 만들기
이 CRUD 모바일 앱을 위해, 주요 컬렉션을 생성할 것입니다. 아래는 스키마를 설정하기 위한 필수 필드와 데이터 유형이 포함된 샘플 컬렉션입니다. 이를 통해 데이터를 생성, 읽기, 업데이트 및 삭제하는 기본 작업을 수행할 수 있습니다.
1. 아이템 컬렉션
이 컬렉션은 각 항목에 대한 세부 정보를 포함하고 있습니다.
필드
데이터 유형
설명
_id
객체 ID
자동 생성된 기본 식별자.
제목
문자열
항목의 이름 또는 제목.
설명
문자열
항목에 대한 간단한 요약.
생성일
날짜
항목이 생성된 타임스탬프.
업데이트됨
날짜
항목이 마지막으로 수정된 타임스탬프.
2. 사용자 수집
이 컬렉션은 사용자 자격 증명 및 세부 정보를 저장합니다.
필드
데이터 유형
설명
_id
객체 ID
자동 생성된 기본 식별자.
사용자 이름
문자열
사용자의 고유 사용자 이름.
이메일
문자열
고유한 이메일 주소.
비밀번호_해시
문자열
안전하게 해시된 비밀번호.
생성일
날짜
계정 생성 타임스탬프.
업데이트됨
날짜
사용자 프로필의 마지막 업데이트 타임스탬프.
이러한 컬렉션은 Back4app 대시보드에서 각 컬렉션에 대한 새 클래스를 추가하고 해당 열을 정의하여 수동으로 생성할 수 있습니다.
새 클래스 만들기
﻿
각 필드를 데이터 유형을 선택하고 이름을 지정하며 기본값 또는 요구 사항을 지정하여 정의합니다.
열 생성
﻿
﻿
Back4app AI 에이전트를 활용한 스키마 설정
Back4app AI 에이전트는 원하는 컬렉션과 필드를 설명하는 프롬프트를 기반으로 데이터베이스 스키마를 자동 생성할 수 있는 대시보드 내의 효율적인 도구입니다. 이 기능은 프로세스를 간소화하고 일관성을 보장합니다.
AI 에이전트를 활용하는 방법:
AI 에이전트 시작하기:
Back4app 대시보드 또는 프로젝트 설정에서 접근합니다.
데이터 모델 세부사항 입력:
필요한 컬렉션과 필드를 설명하는 프롬프트를 입력합니다.
검토 및 확인:
생성된 스키마 제안을 검토하고 프로젝트에 적용합니다.
샘플 프롬프트
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)
﻿
이 프로세스는 시간을 절약하고 스키마가 일관되며 최적화되도록 보장합니다.
﻿
3단계 – 관리자 앱 활성화 및 CRUD 작업 수행
관리자 앱 소개
Back4app 관리자 앱은 백엔드 데이터를 쉽게 관리할 수 있는 코드 없는 인터페이스를 제공합니다. 드래그 앤 드롭 디자인을 통해 빠르고 효과적인 CRUD 작업을 수행할 수 있습니다.
관리자 앱 활성화 방법
“더보기” 메뉴로 이동 Back4app 대시보드에서.
“관리자 앱” 선택 후 “관리자 앱 활성화.”
관리자 자격 증명 설정 첫 번째 관리자 사용자를 생성하여 역할(예: B4aAdminUser) 및 시스템 컬렉션을 설정합니다.
관리자 앱 활성화
﻿
활성화되면 관리자 앱에 로그인하여 컬렉션을 관리하기 시작합니다.
관리자 앱 대시보드
﻿
관리자 앱으로 CRUD 작업 수행
관리자 앱 내에서 다음을 수행할 수 있습니다:
레코드 생성: 새 항목을 삽입하기 위해 모든 컬렉션(예: 항목) 내에서 “레코드 추가” 옵션을 사용합니다.
레코드 읽기/수정: 세부 정보를 보거나 정보를 편집하려면 레코드를 클릭합니다.
레코드 제거: 더 이상 필요하지 않은 레코드를 삭제 옵션을 선택하여 제거합니다.
이 직관적인 도구는 데이터 관리 작업을 단순화하여 사용자 경험을 향상시킵니다.
﻿
4단계 – NativeScript와 Back4app 연결하기
백엔드를 설정하고 관리 앱을 통해 데이터를 관리한 후, 다음 단계는 NativeScript 모바일 앱을 Back4app에 연결하는 것입니다.
통합을 위한 REST API 사용하기
이 시나리오에서 SDK 통합이 NativeScript에 최적이 아닐 수 있으므로, CRUD 작업을 수행하기 위해 REST API를 활용할 수 있습니다.
예: REST를 사용한 데이터 가져오기
아래는 NativeScript 서비스 파일에서 REST 호출을 사용하여 Back4app 데이터베이스에서 항목을 검색하는 방법의 예입니다.
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;
  }
}
﻿
NativeScript 구성 요소 내에서 유사한 REST API 호출을 통합하여 생성, 업데이트 및 삭제 작업을 처리하세요.
﻿
5단계 – 백엔드 보안
액세스 제어 목록(ACL) 구현
각 객체에 대해 ACL을 설정하여 데이터를 보호하세요. 예를 들어, 개인 항목을 만들기 위해 다음과 같은 접근 방식을 사용하세요:
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;
  }
}
﻿
클래스 수준 권한(CLP) 구성
Back4app 대시보드 내에서 각 컬렉션의 CLP를 조정하여 기본 액세스 권한을 정의하세요. 이는 권한이 있는 사용자만 민감한 데이터에 접근하거나 수정할 수 있도록 보장하는 데 도움이 됩니다.
﻿
6단계 – 사용자 인증
계정 관리 설정
Back4app은 Parse의 사용자 클래스를 사용하여 인증을 관리합니다. NativeScript 앱에서 아래와 같이 등록 및 로그인 프로세스를 구현하세요.
예: 사용자 등록
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;
  }
}
﻿
로그인 및 사용자 세션 관리를 위해 유사한 방법을 사용할 수 있습니다. 소셜 로그인, 이메일 확인 및 비밀번호 재설정과 같은 추가 기능은 Back4app 대시보드를 통해 구성할 수 있습니다.
﻿
7단계 – 결론 및 향후 방향
잘 하셨습니다! 이제 NativeScript와 Back4app을 사용하여 완전한 기본 CRUD 모바일 애플리케이션을 만들었습니다.
귀하의 프로젝트, Basic-CRUD-App-NS,는 아이템 및 사용자에 대한 컬렉션이 잘 정의된 백엔드를 포함하며, 관리 앱을 통해 원활하게 관리됩니다.
또한 NativeScript 프론트엔드를 REST API를 통해 Back4app과 통합하고 강력한 ACL 및 CLP로 데이터를 보호했습니다.
다음 단계:
모바일 앱 향상:
상세 보기, 검색 기능 및 푸시 알림과 같은 기능을 추가하세요.
기능 확장:
Cloud Functions 또는 타사 API 서비스와 같은 고급 백엔드 기능을 통합하세요.
추가 학습:
기술을 다듬기 위해 Back4app 문서 및 추가 NativeScript 리소스를 탐색하세요.
코딩을 즐기시고 향후 모바일 앱 프로젝트에 행운이 있기를 바랍니다!
필드	데이터 유형	설명
_id	객체 ID	자동 생성된 기본 식별자.
제목	문자열	항목의 이름 또는 제목.
설명	문자열	항목에 대한 간단한 요약.
생성일	날짜	항목이 생성된 타임스탬프.
업데이트됨	날짜	항목이 마지막으로 수정된 타임스탬프.
필드	데이터 유형	설명
_id	객체 ID	자동 생성된 기본 식별자.
사용자 이름	문자열	사용자의 고유 사용자 이름.
이메일	문자열	고유한 이메일 주소.
비밀번호_해시	문자열	안전하게 해시된 비밀번호.
생성일	날짜	계정 생성 타임스탬프.
업데이트됨	날짜	사용자 프로필의 마지막 업데이트 타임스탬프.
업데이트됨 05 Mar 2025
이 페이지가 도움이 되었습니까?
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