Quickstarters
Bagaimana Cara Mengembangkan Aplikasi CRUD dengan TypeScript?

35min
Ikhtisar
Dalam panduan ini, Anda akan belajar bagaimana membangun aplikasi CRUD (Buat, Baca, Perbarui, Hapus) menggunakan TypeScript. 
Kami akan menggunakan Back4app sebagai platform backend, membuat manajemen data menjadi sederhana. Panduan ini mencakup pengaturan proyek Back4app, pemodelan data Anda, dan mengintegrasikan fungsionalitas CRUD ke dalam aplikasi TypeScript.
Pertama, Anda akan membuat proyek di Back4app yang disebut Basic-CRUD-App-TypeScript yang menawarkan solusi penyimpanan NoSQL yang fleksibel. 
Anda akan merancang struktur data Anda dengan mendefinisikan kelas dan bidang baik secara manual atau dengan bantuan AI Agent Back4app.
Selanjutnya, Anda akan menggunakan Aplikasi Admin Back4app untuk manajemen backend melalui antarmuka yang ramah pengguna yang menyederhanakan operasi data. 
Akhirnya, Anda akan menghubungkan aplikasi TypeScript Anda dengan Back4app menggunakan Parse JavaScript SDK, memastikan akses dan otentikasi yang aman.
Pada akhir tutorial ini, Anda akan memiliki aplikasi TypeScript yang sepenuhnya operasional yang mampu menangani tugas CRUD dasar, termasuk otentikasi pengguna dan manajemen data.
Apa yang Akan Anda Pelajari
Cara membangun aplikasi CRUD berbasis TypeScript dengan backend NoSQL.
Metode untuk merancang backend yang dapat diskalakan yang terintegrasi dengan frontend TypeScript.
Cara memanfaatkan Admin App Back4app untuk mengelola data Anda dengan mudah.
Strategi untuk penyebaran, termasuk kontainerisasi Docker, untuk meluncurkan aplikasi TypeScript Anda dengan lancar.
﻿
Prasyarat
Sebelum Anda mulai, pastikan Anda memiliki:
Akun Back4app dengan proyek yang dikonfigurasi.
Butuh bantuan? Kunjungi Memulai dengan Back4app.
Lingkungan pengembangan TypeScript.
Gunakan editor seperti Visual Studio Code dan pastikan Anda telah menginstal Node.js.
Pengetahuan dasar tentang TypeScript, pemrograman berorientasi objek, dan RESTful API.
Jika perlu, rujuk ke dokumentasi TypeScript.
﻿
Langkah 1 – Inisialisasi Proyek
Menyiapkan Proyek Back4app Baru
Masuk ke akun Back4app Anda.
Klik tombol “Aplikasi Baru” di dasbor Anda.
Masukkan nama proyek: Basic-CRUD-App-TypeScript dan ikuti langkah-langkah untuk menyelesaikan pembuatan proyek.
Buat Proyek Baru
﻿
Setelah proyek dibuat, itu akan muncul di dasbor Anda, berfungsi sebagai dasar untuk backend Anda.
﻿
Langkah 2 – Membuat Skema Data
Mendefinisikan Struktur Data Anda
Untuk aplikasi ini, Anda akan membuat beberapa koleksi (kelas) di Back4app. Di bawah ini adalah contoh kelas penting dengan bidang yang memfasilitasi operasi CRUD.
1. Koleksi Item
Bidang
Tipe Data
Deskripsi
_id
ObjectId
Pengidentifikasi unik yang dihasilkan secara otomatis.
judul
String
Nama atau judul item.
deskripsi
String
Deskripsi singkat tentang item tersebut.
dibuatPada
Tanggal
Timestamp ketika item dibuat.
diperbaruiPada
Tanggal
Timestamp untuk pembaruan terbaru.
2. Koleksi Pengguna
Bidang
Tipe Data
Deskripsi
_id
ObjectId
Pengidentifikasi unik yang dihasilkan secara otomatis.
nama pengguna
String
Nama unik untuk pengguna.
email
String
Alamat email yang unik.
hashKataSandi
String
Kata sandi yang di-hash dengan aman untuk login.
dibuatPada
Tanggal
Stempel waktu pembuatan akun.
diperbaruiPada
Tanggal
Timestamp untuk pembaruan akun terakhir.
Anda dapat membuat koleksi dan bidang ini secara manual di dasbor Back4app.
Buat Kelas Baru
﻿
Saat menambahkan bidang, pilih tipe data, beri nama bidang, atur nilai default jika perlu, dan tunjukkan apakah itu wajib.
Buat Kolom
﻿
Menggunakan Agen AI Back4app untuk Konfigurasi Skema
Agen AI terintegrasi di Back4app dapat secara otomatis menghasilkan skema data Anda dari deskripsi. Ini menyederhanakan pengaturan dan memastikan model Anda siap untuk operasi CRUD.
Cara Menggunakan Agen AI:
Buka Agen AI:
Masuk ke dasbor Back4app Anda dan temukan Agen AI di pengaturan proyek Anda.
Deskripsikan Skema Anda:
Berikan deskripsi rinci tentang koleksi dan bidang yang Anda perlukan.
Tinjau dan Konfirmasi:
Agen AI akan mengusulkan skema. Tinjau dan konfirmasi untuk menerapkan perubahan.
Contoh Prompt
Text
Create the following collections in my Back4app project:

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

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - passwordHash: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)
Create the following collections in my Back4app project:

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

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - passwordHash: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)
﻿
Metode yang dibantu AI ini menghemat waktu dan menjamin skema yang terstruktur dengan baik.
﻿
Langkah 3 – Menggunakan Aplikasi Admin untuk Operasi CRUD
Ikhtisar Aplikasi Admin
Aplikasi Admin Back4app menyediakan antarmuka tanpa kode yang membuat pengelolaan data backend Anda menjadi sederhana. 
Fitur seret dan lepasnya memungkinkan Anda melakukan operasi CRUD—seperti menambah, membaca, memperbarui, dan menghapus catatan—tanpa kesulitan.
Mengaktifkan Aplikasi Admin
Pergi ke menu “Lainnya” di dasbor Back4app Anda.
Pilih “Aplikasi Admin” dan klik pada “Aktifkan Aplikasi Admin.”
Atur kredensial admin Anda dengan membuat akun admin awal, yang juga akan mendefinisikan peran seperti B4aAdminUser dan kelas sistem.
Aktifkan Aplikasi Admin
﻿
Setelah diaktifkan, masuk ke Aplikasi Admin untuk mengelola data Anda.
Dasbor Aplikasi Admin
﻿
Mengelola Operasi CRUD dengan Aplikasi Admin
Di dalam Aplikasi Admin Anda dapat:
Masukkan Rekaman: Gunakan fungsi “Tambahkan Rekaman” di koleksi mana pun (misalnya, Item) untuk memasukkan data baru.
Tinjau dan Edit: Klik pada sebuah rekaman untuk melihat detail atau mengubah bidang.
Hapus Rekaman: Hapus entri yang tidak lagi diperlukan.
Antarmuka intuitif ini meningkatkan manajemen data dengan menyederhanakan tugas rutin.
﻿
Langkah 4 – Menghubungkan Aplikasi TypeScript Anda ke Back4app
Dengan backend Anda siap, langkah selanjutnya adalah menghubungkan aplikasi TypeScript Anda dengan Back4app.
Opsi A: Menggunakan Parse JavaScript SDK
Instal Parse JavaScript SDK:
Menggunakan npm, jalankan:
Bash
npm install parse
npm install parse
﻿
Inisialisasi Parse di Aplikasi TypeScript Anda:
Buat file konfigurasi (misalnya, parseConfig.ts):
TypeScript
// parseConfig.ts
import Parse from 'parse';
export function initializeParse() {
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';
}
// parseConfig.ts
import Parse from 'parse';
export function initializeParse() {
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';
}
﻿
﻿
Text

3. **Implement CRUD Functions in TypeScript:**  
For example, create a service for managing items:

```typescript
// itemsService.ts
import Parse from 'parse';

export async function fetchItems(): Promise<Parse.Object[]> {
const query = new Parse.Query('Items');
try {
 return await query.find();
} catch (error) {
 console.error('Error fetching items:', error);
 return [];
}
}

export async function addItem(title: string, description: string): Promise<void> {
const item = new Parse.Object('Items');
item.set('title', title);
item.set('description', description);
try {
 await item.save();
 console.log('Item added successfully.');
} catch (error) {
 console.error('Error adding item:', error);
}
}

export async function updateItem(objectId: string, newTitle: string, newDescription: string): Promise<void> {
const query = new Parse.Query('Items');
try {
 const item = await query.get(objectId);
 item.set('title', newTitle);
 item.set('description', newDescription);
 await item.save();
 console.log('Item updated successfully.');
} catch (error) {
 console.error('Error updating item:', error);
}
}

export async function removeItem(objectId: string): Promise<void> {
const query = new Parse.Query('Items');
try {
 const item = await query.get(objectId);
 await item.destroy();
 console.log('Item removed successfully.');
} catch (error) {
 console.error('Error removing item:', error);
}
}

3. **Implement CRUD Functions in TypeScript:**  
For example, create a service for managing items:

```typescript
// itemsService.ts
import Parse from 'parse';

export async function fetchItems(): Promise<Parse.Object[]> {
const query = new Parse.Query('Items');
try {
 return await query.find();
} catch (error) {
 console.error('Error fetching items:', error);
 return [];
}
}

export async function addItem(title: string, description: string): Promise<void> {
const item = new Parse.Object('Items');
item.set('title', title);
item.set('description', description);
try {
 await item.save();
 console.log('Item added successfully.');
} catch (error) {
 console.error('Error adding item:', error);
}
}

export async function updateItem(objectId: string, newTitle: string, newDescription: string): Promise<void> {
const query = new Parse.Query('Items');
try {
 const item = await query.get(objectId);
 item.set('title', newTitle);
 item.set('description', newDescription);
 await item.save();
 console.log('Item updated successfully.');
} catch (error) {
 console.error('Error updating item:', error);
}
}

export async function removeItem(objectId: string): Promise<void> {
const query = new Parse.Query('Items');
try {
 const item = await query.get(objectId);
 await item.destroy();
 console.log('Item removed successfully.');
} catch (error) {
 console.error('Error removing item:', error);
}
}
﻿
Opsi B: Menggunakan REST atau GraphQL
Jika Anda lebih suka tidak menggunakan Parse SDK, Anda dapat melakukan operasi CRUD melalui REST. Sebagai contoh, untuk mengambil item menggunakan REST:
TypeScript
import fetch from 'node-fetch';

export async function getItemsViaREST() {
  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Items', {
      method: 'GET',
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      }
    });
    const data = await response.json();
    console.log('Data retrieved:', data);
  } catch (error) {
    console.error('Error retrieving items:', error);
  }
}
import fetch from 'node-fetch';

export async function getItemsViaREST() {
  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Items', {
      method: 'GET',
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      }
    });
    const data = await response.json();
    console.log('Data retrieved:', data);
  } catch (error) {
    console.error('Error retrieving items:', error);
  }
}
﻿
Integrasikan panggilan API ini sesuai kebutuhan dalam modul TypeScript Anda.
﻿
Langkah 5 – Memastikan Keamanan Backend
Mengatur Daftar Kontrol Akses (ACL)
Amankan data Anda dengan menerapkan ACL pada objek Anda. Misalnya, untuk membuat item yang hanya dapat diakses oleh pemiliknya:
TypeScript
import Parse from 'parse';

export async function createSecureItem(title: string, description: string, owner: Parse.User) {
  const item = new Parse.Object('Items');
  item.set('title', title);
  item.set('description', description);

  const acl = new Parse.ACL();
  acl.setReadAccess(owner, true);
  acl.setWriteAccess(owner, true);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);
  item.setACL(acl);

  try {
    await item.save();
    console.log('Secure item created successfully.');
  } catch (error) {
    console.error('Error creating secure item:', error);
  }
}
import Parse from 'parse';

export async function createSecureItem(title: string, description: string, owner: Parse.User) {
  const item = new Parse.Object('Items');
  item.set('title', title);
  item.set('description', description);

  const acl = new Parse.ACL();
  acl.setReadAccess(owner, true);
  acl.setWriteAccess(owner, true);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);
  item.setACL(acl);

  try {
    await item.save();
    console.log('Secure item created successfully.');
  } catch (error) {
    console.error('Error creating secure item:', error);
  }
}
﻿
Mengelola Izin Tingkat Kelas (CLP)
Sesuaikan CLP melalui dasbor Back4app untuk memberlakukan pembatasan akses sehingga hanya pengguna yang terautentikasi yang dapat berinteraksi dengan koleksi tertentu.
﻿
Langkah 6 – Menerapkan Autentikasi Pengguna
Mengelola Akun Pengguna
Back4app memanfaatkan kelas Pengguna bawaan Parse untuk menangani autentikasi. Dalam aplikasi TypeScript Anda, terapkan pendaftaran dan login pengguna sebagai berikut:
TypeScript
import Parse from 'parse';

export async function registerUser(username: string, password: string, email: string): Promise<void> {
  const user = new Parse.User();
  user.set('username', username);
  user.set('password', password);
  user.set('email', email);

  try {
    await user.signUp();
    console.log('User registered successfully!');
  } catch (error) {
    console.error('Registration error:', error);
  }
}

export async function loginUser(username: string, password: string): Promise<void> {
  try {
    const user = await Parse.User.logIn(username, password);
    console.log('User logged in:', user.get('username'));
  } catch (error) {
    console.error('Login failed:', error);
  }
}
import Parse from 'parse';

export async function registerUser(username: string, password: string, email: string): Promise<void> {
  const user = new Parse.User();
  user.set('username', username);
  user.set('password', password);
  user.set('email', email);

  try {
    await user.signUp();
    console.log('User registered successfully!');
  } catch (error) {
    console.error('Registration error:', error);
  }
}

export async function loginUser(username: string, password: string): Promise<void> {
  try {
    const user = await Parse.User.logIn(username, password);
    console.log('User logged in:', user.get('username'));
  } catch (error) {
    console.error('Login failed:', error);
  }
}
﻿
TypeScript
import Parse from 'parse';

export async function registerUser(username: string, password: string, email: string): Promise<void> {
  const user = new Parse.User();
  user.set('username', username);
  user.set('password', password);
  user.set('email', email);

  try {
    await user.signUp();
    console.log('User registered successfully!');
  } catch (error) {
    console.error('Registration error:', error);
  }
}

export async function loginUser(username: string, password: string): Promise<void> {
  try {
    const user = await Parse.User.logIn(username, password);
    console.log('User logged in:', user.get('username'));
  } catch (error) {
    console.error('Login failed:', error);
  }
}
import Parse from 'parse';

export async function registerUser(username: string, password: string, email: string): Promise<void> {
  const user = new Parse.User();
  user.set('username', username);
  user.set('password', password);
  user.set('email', email);

  try {
    await user.signUp();
    console.log('User registered successfully!');
  } catch (error) {
    console.error('Registration error:', error);
  }
}

export async function loginUser(username: string, password: string): Promise<void> {
  try {
    const user = await Parse.User.logIn(username, password);
    console.log('User logged in:', user.get('username'));
  } catch (error) {
    console.error('Login failed:', error);
  }
}
﻿
TypeScript
import Parse from 'parse';

export async function registerUser(username: string, password: string, email: string): Promise<void> {
  const user = new Parse.User();
  user.set('username', username);
  user.set('password', password);
  user.set('email', email);

  try {
    await user.signUp();
    console.log('User registered successfully!');
  } catch (error) {
    console.error('Registration error:', error);
  }
}

export async function loginUser(username: string, password: string): Promise<void> {
  try {
    const user = await Parse.User.logIn(username, password);
    console.log('User logged in:', user.get('username'));
  } catch (error) {
    console.error('Login failed:', error);
  }
}
import Parse from 'parse';

export async function registerUser(username: string, password: string, email: string): Promise<void> {
  const user = new Parse.User();
  user.set('username', username);
  user.set('password', password);
  user.set('email', email);

  try {
    await user.signUp();
    console.log('User registered successfully!');
  } catch (error) {
    console.error('Registration error:', error);
  }
}

export async function loginUser(username: string, password: string): Promise<void> {
  try {
    const user = await Parse.User.logIn(username, password);
    console.log('User logged in:', user.get('username'));
  } catch (error) {
    console.error('Login failed:', error);
  }
}
﻿
Pendekatan ini dapat diperluas untuk manajemen sesi, pengaturan ulang kata sandi, dan fitur otentikasi lainnya.
﻿
Langkah 7 – Menerapkan Aplikasi TypeScript Anda
Back4app menyederhanakan proses penerapan. Anda dapat menerapkan aplikasi TypeScript Anda menggunakan metode seperti kontainerisasi Docker.
7.1 Membangun Aplikasi TypeScript Anda
Kompilasi dan Bundel:
Gunakan alat bangun Anda (seperti Webpack atau tsc) untuk mengompilasi dan membundel aplikasi Anda.
Sebagai contoh, untuk mengompilasi dengan tsc:
Bash
tsc
tsc
﻿
Konfirmasi Output:
Pastikan file yang dihasilkan mencakup semua aset dan modul yang diperlukan.
﻿
7.2 Mengorganisir Struktur Proyek Anda
Proyek TypeScript yang khas mungkin terlihat seperti ini:
Text
Basic-CRUD-App-TypeScript/
|-- src/
|   |-- index.ts
|   |-- parseConfig.ts
|   |-- services/
|       |-- itemsService.ts
|       |-- authService.ts
|-- package.json
|-- tsconfig.json
|-- README.md
Basic-CRUD-App-TypeScript/
|-- src/
|   |-- index.ts
|   |-- parseConfig.ts
|   |-- services/
|       |-- itemsService.ts
|       |-- authService.ts
|-- package.json
|-- tsconfig.json
|-- README.md
﻿
Contoh: parseConfig.ts
TypeScript
// parseConfig.ts
import Parse from 'parse';

export function initializeParse() {
  Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
  Parse.serverURL = 'https://parseapi.back4app.com';
}
// parseConfig.ts
import Parse from 'parse';

export function initializeParse() {
  Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
  Parse.serverURL = 'https://parseapi.back4app.com';
}
﻿
7.3 Menggunakan Docker untuk Aplikasi TypeScript Anda
Jika Anda memilih kontainerisasi, tambahkan sebuah Dockerfile ke root proyek Anda:
Dockerfile
# Use an official Node.js runtime as a parent image
FROM node:18-alpine

# Set the working directory
WORKDIR /usr/src/app

# Copy package files and install dependencies
COPY package*.json ./
RUN npm install

# Bundle app source code
COPY . .

# Build the TypeScript app
RUN npm run build

# Expose port (adjust as needed)
EXPOSE 3000

# Start the app
CMD [ "node", "dist/index.js" ]
# Use an official Node.js runtime as a parent image
FROM node:18-alpine

# Set the working directory
WORKDIR /usr/src/app

# Copy package files and install dependencies
COPY package*.json ./
RUN npm install

# Bundle app source code
COPY . .

# Build the TypeScript app
RUN npm run build

# Expose port (adjust as needed)
EXPOSE 3000

# Start the app
CMD [ "node", "dist/index.js" ]
﻿
7.4 Penyebaran melalui Back4app Web Deployment
Tautkan Repositori GitHub Anda:
Pastikan proyek TypeScript Anda dihosting di GitHub.
Atur Pengaturan Penyebaran:
Di dasbor Back4app, gunakan opsi Web Deployment untuk menghubungkan repositori Anda (misalnya, Basic-CRUD-App-TypeScript) dan pilih cabang yang sesuai.
Tentukan Perintah Build dan Output:
Tentukan perintah build (seperti npm run build) dan tunjukkan direktori output.
Terapkan Aplikasi Anda:
Klik Terapkan dan ikuti log sampai aplikasi Anda aktif.
﻿
Langkah 8 – Pemikiran Akhir dan Peningkatan Masa Depan
Selamat! Anda telah berhasil membuat aplikasi CRUD berbasis TypeScript yang terintegrasi dengan Back4app. 
Anda telah menyiapkan proyek bernama Basic-CRUD-App-TypeScript, merancang koleksi untuk Item dan Pengguna, dan mengelola data Anda menggunakan Aplikasi Admin Back4app. 
Selain itu, Anda menghubungkan aplikasi TypeScript Anda melalui Parse JavaScript SDK (atau REST/GraphQL) dan menerapkan langkah-langkah keamanan yang kuat.
Apa Selanjutnya?
Kembangkan Aplikasi Anda:
Integrasikan fitur tambahan seperti penyaringan lanjutan, tampilan item yang lebih detail, atau pembaruan data secara real-time.
Tingkatkan Kemampuan Backend:
Jelajahi fungsi cloud, integrasikan API pihak ketiga, atau terapkan izin berbasis peran.
Pembelajaran Lebih Lanjut:
Kunjungi dokumentasi Back4app dan lihat panduan tambahan untuk mengoptimalkan aplikasi Anda.
Selamat coding dan nikmati membangun aplikasi CRUD TypeScript Anda!
Bidang	Tipe Data	Deskripsi
_id	ObjectId	Pengidentifikasi unik yang dihasilkan secara otomatis.
judul	String	Nama atau judul item.
deskripsi	String	Deskripsi singkat tentang item tersebut.
dibuatPada	Tanggal	Timestamp ketika item dibuat.
diperbaruiPada	Tanggal	Timestamp untuk pembaruan terbaru.
Bidang	Tipe Data	Deskripsi
_id	ObjectId	Pengidentifikasi unik yang dihasilkan secara otomatis.
nama pengguna	String	Nama unik untuk pengguna.
email	String	Alamat email yang unik.
hashKataSandi	String	Kata sandi yang di-hash dengan aman untuk login.
dibuatPada	Tanggal	Stempel waktu pembuatan akun.
diperbaruiPada	Tanggal	Timestamp untuk pembaruan akun terakhir.
Diperbarui 19 Feb 2025
Apakah halaman ini membantu Anda?
SEBELUMNYA
Bagaimana Cara Membangun Aplikasi CRUD dengan Node.js?
BERIKUTNYA
Cara Membuat Aplikasi CRUD dengan Elm?