Quickstarters
Cara Membangun Aplikasi CRUD dengan React Native?

29min
Ikhtisar
Dalam tutorial ini, Anda akan belajar cara membuat aplikasi React Native yang melakukan operasi CRUD (buat, baca, perbarui, hapus) yang penting menggunakan Back4app sebagai backend cloud Anda.
Panduan ini akan memandu Anda melalui pembuatan proyek di Back4app, mengatur model data yang fleksibel, dan mengintegrasikan aplikasi React Native Anda dengan backend menggunakan API RESTful.
Pertama, Anda akan membuat proyek Back4app yang diberi judul Basic-CRUD-App-ReactNative untuk berfungsi sebagai backend Anda. Anda kemudian akan merancang skema data Anda dengan secara manual mendefinisikan kelas dan bidang di dasbor Back4app atau menggunakan AI Agent terintegrasi untuk bantuan.
Setelah mengonfigurasi backend Anda, Anda akan menggunakan Aplikasi Admin Back4app, yang menawarkan antarmuka drag and drop yang ramah pengguna untuk mengelola data Anda, sehingga lebih mudah untuk melakukan operasi CRUD.
Pada akhir panduan ini, Anda akan memiliki aplikasi React Native yang sepenuhnya fungsional yang dapat membuat, membaca, memperbarui, dan menghapus catatan sambil juga mendukung otentikasi pengguna yang aman dan penanganan data.
Manfaat Utama
Membangun Aplikasi Mobile: Pelajari cara mengembangkan aplikasi CRUD React Native dengan backend yang kuat.
Integrasi Backend: Pahami cara merancang dan mengintegrasikan model data yang dapat diskalakan menggunakan Back4app.
Manajemen Data Tanpa Usaha: Gunakan Aplikasi Admin Back4app untuk dengan cepat mengelola data aplikasi Anda.
Operasi Aman: Terapkan autentikasi pengguna yang aman dan langkah-langkah privasi data.
﻿
Prasyarat
Sebelum Anda mulai, pastikan Anda memiliki:
Akun Back4app aktif dengan proyek baru yang disiapkan.
Butuh bantuan? Lihat Memulai dengan Back4app.
Lingkungan pengembangan React Native.
Instal alat seperti Node.js, npm (atau yarn), dan CLI React Native. Expo juga dapat digunakan untuk prototyping cepat.
Keterampilan dalam React, JavaScript, dan REST API.
Konsultasikan dokumentasi React Native jika Anda perlu penyegaran.
﻿
Langkah 1 – Menyiapkan Proyek Back4app Anda
Membuat Proyek Back4app Anda
Masuk ke akun Back4app Anda.
Klik tombol “Aplikasi Baru” di dasbor Anda.
Beri nama proyek Anda: Basic-CRUD-App-ReactNative dan ikuti petunjuk untuk menyelesaikan pengaturan.
Buat Proyek Baru
﻿
Setelah proyek Anda dibuat, itu akan muncul di dasbor Anda, meletakkan dasar untuk konfigurasi backend Anda.
﻿
Langkah 2 – Membuat Model Data Anda
Menyusun Data Anda
Untuk aplikasi CRUD ini, Anda akan mendefinisikan beberapa koleksi dalam proyek Back4app Anda. Di bawah ini adalah contoh koleksi kunci dan bidang yang diperlukan untuk mendukung fungsionalitas inti CRUD.
1. Koleksi: Item
Koleksi ini menyimpan rincian untuk setiap item.
Bidang
Tipe
Deskripsi
_id
ObjectId
Pengidentifikasi unik yang dihasilkan secara otomatis.
judul
String
Nama atau judul item.
deskripsi
String
Penjelasan singkat tentang item tersebut.
dibuatPada
Tanggal
Stempel waktu untuk saat item ditambahkan.
diperbaruiPada
Tanggal
Stempel waktu untuk pembaruan terbaru.
2. Koleksi: Pengguna
Koleksi ini mengelola kredensial pengguna dan informasi otentikasi.
Bidang
Tipe
Deskripsi
_id
ObjectId
Pengidentifikasi unik yang dihasilkan secara otomatis.
nama pengguna
String
Pengidentifikasi unik untuk pengguna.
email
String
Alamat email pengguna (harus unik).
hashKataSandi
String
Kata sandi yang di-hash untuk login yang aman.
dibuatPada
Tanggal
Waktu ketika akun dibuat.
diperbaruiPada
Tanggal
Waktu ketika rincian akun terakhir diperbarui.
Anda dapat mendefinisikan koleksi ini dan bidangnya melalui dasbor Back4app.
Buat Kelas Baru
﻿
Anda dapat menambahkan bidang baru dengan memilih jenis data, memasukkan nama bidang, mengatur nilai default, dan menandai apakah itu diperlukan.
Buat Kolom
﻿
Menggunakan Agen AI Back4app untuk Generasi Skema
Agen AI terintegrasi di Back4app dapat secara otomatis membangun skema data Anda dari deskripsi sederhana. Alat ini membantu memperlancar pengaturan proyek Anda dan memastikan model data Anda mendukung operasi CRUD yang diperlukan.
Cara Menggunakan AI Agent:
Buka AI Agent:
Pergi ke pengaturan proyek Anda di dasbor Back4app dan pilih AI Agent.
Deskripsikan Skema Anda:
Masukkan deskripsi rinci tentang koleksi dan bidang yang Anda butuhkan.
Tinjau dan Konfirmasi:
AI Agent akan menyarankan skema; tinjau dan konfirmasi untuk menerapkan konfigurasi.
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 ini menghemat waktu Anda dan memastikan konsistensi dalam model data Anda.
﻿
Langkah 3 – Menggunakan Aplikasi Admin untuk Manajemen Data
Ikhtisar Aplikasi Admin
Aplikasi Admin Back4app menyediakan antarmuka tanpa kode yang menyederhanakan manajemen data backend. Fungsionalitas drag and drop-nya memungkinkan Anda melakukan operasi CRUD—menambahkan, melihat, memperbarui, dan menghapus catatan—tanpa menulis kueri yang kompleks.
Mengaktifkan Aplikasi Admin
Pergi ke menu “More” di dasbor Back4app Anda.
Klik pada “Admin App” dan kemudian pilih “Enable Admin App.”
Atur Kredensial Admin:
Buat akun admin awal Anda, yang juga mengatur peran sistem seperti B4aAdminUser.
Aktifkan Admin App
﻿
Setelah diaktifkan, masuk ke Admin App untuk mengelola data aplikasi Anda.
Dasbor Admin App
﻿
Mengelola Operasi CRUD melalui Admin App
Di dalam Admin App, Anda dapat:
Masukkan Rekor Baru: Gunakan fungsi “Add Record” di koleksi mana pun (misalnya, Items) untuk memperkenalkan data baru.
Periksa/Ubah Rekor: Pilih sebuah rekor untuk meninjau detail atau memperbarui bidangnya.
Hapus Rekor: Hapus entri yang tidak lagi diperlukan.
Alat yang disederhanakan ini meningkatkan alur kerja Anda dengan membuat pengelolaan data menjadi sederhana.
﻿
Langkah 4 – Mengintegrasikan Aplikasi React Native Anda dengan Back4app
Setelah mengatur backend Anda, saatnya untuk menghubungkan aplikasi React Native Anda ke Back4app.
Menggunakan REST API untuk Integrasi
Meskipun ada Parse SDK yang tersedia untuk JavaScript, dalam lingkungan React Native Anda dapat memilih untuk menggunakan panggilan REST API standar untuk fleksibilitas. Di bawah ini adalah contoh cara melakukan operasi CRUD menggunakan JavaScript fetch API.
Contoh: Mengambil Item
JS
async function fetchItems() {
  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('Fetched items:', data.results);
  } catch (error) {
    console.error('Error fetching items:', error);
  }
}

export default fetchItems;
async function fetchItems() {
  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('Fetched items:', data.results);
  } catch (error) {
    console.error('Error fetching items:', error);
  }
}

export default fetchItems;
﻿
Contoh: Membuat Item Baru
JS
async function createItem(title, description) {
  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Items', {
      method: 'POST',
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ title, description })
    });
    const data = await response.json();
    console.log('Item created:', data);
  } catch (error) {
    console.error('Error creating item:', error);
  }
}

export { createItem };
async function createItem(title, description) {
  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Items', {
      method: 'POST',
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ title, description })
    });
    const data = await response.json();
    console.log('Item created:', data);
  } catch (error) {
    console.error('Error creating item:', error);
  }
}

export { createItem };
﻿
Anda juga dapat menerapkan fungsi untuk memperbarui dan menghapus item menggunakan metode HTTP yang sesuai (PUT/POST untuk pembaruan dan DELETE untuk penghapusan).
Integrasikan fungsi-fungsi ini ke dalam komponen React Native Anda sesuai kebutuhan untuk menyelesaikan operasi CRUD Anda.
﻿
Langkah 5 – Meningkatkan Keamanan Backend
Mengonfigurasi Daftar Kontrol Akses (ACL)
Lindungi catatan Anda dengan mengatur ACL. Misalnya, untuk memastikan bahwa suatu item hanya dapat diakses oleh pemiliknya:
JS
async function createPrivateItem(title, description, ownerId) {
  try {
    const acl = {
      "*": { "read": false, "write": false },
      [ownerId]: { "read": true, "write": true }
    };

    const response = await fetch('https://parseapi.back4app.com/classes/Items', {
      method: 'POST',
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ title, description, ACL: acl })
    });
    const data = await response.json();
    console.log('Private item created:', data);
  } catch (error) {
    console.error('Error creating private item:', error);
  }
}

export { createPrivateItem };
async function createPrivateItem(title, description, ownerId) {
  try {
    const acl = {
      "*": { "read": false, "write": false },
      [ownerId]: { "read": true, "write": true }
    };

    const response = await fetch('https://parseapi.back4app.com/classes/Items', {
      method: 'POST',
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ title, description, ACL: acl })
    });
    const data = await response.json();
    console.log('Private item created:', data);
  } catch (error) {
    console.error('Error creating private item:', error);
  }
}

export { createPrivateItem };
﻿
Mengatur Izin Tingkat Kelas (CLP)
Sesuaikan izin default untuk koleksi Anda melalui dasbor Back4app. Ini memastikan bahwa hanya pengguna yang terautentikasi yang dapat berinteraksi dengan jenis data tertentu.
﻿
Langkah 6 – Menerapkan Autentikasi Pengguna
Mengonfigurasi Manajemen Pengguna
Back4app memanfaatkan koleksi Pengguna bawaan untuk menangani autentikasi. Di aplikasi React Native Anda, Anda dapat mengelola pendaftaran dan login pengguna menggunakan panggilan REST API.
Contoh: Pendaftaran Pengguna
JS
async function signUp(username, password, email) {
  try {
    const response = await fetch('https://parseapi.back4app.com/users', {
      method: 'POST',
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ username, password, email })
    });
    const data = await response.json();
    console.log('User registered successfully:', data);
  } catch (error) {
    console.error('Error during sign up:', error);
  }
}

export { signUp };
async function signUp(username, password, email) {
  try {
    const response = await fetch('https://parseapi.back4app.com/users', {
      method: 'POST',
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ username, password, email })
    });
    const data = await response.json();
    console.log('User registered successfully:', data);
  } catch (error) {
    console.error('Error during sign up:', error);
  }
}

export { signUp };
﻿
Contoh: Login Pengguna
JS
async function logIn(username, password) {
  try {
    const response = await fetch(`https://parseapi.back4app.com/login?username=${username}&password=${password}`, {
      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('Logged in user:', data);
  } catch (error) {
    console.error('Login failed:', error);
  }
}

export { logIn };
async function logIn(username, password) {
  try {
    const response = await fetch(`https://parseapi.back4app.com/login?username=${username}&password=${password}`, {
      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('Logged in user:', data);
  } catch (error) {
    console.error('Login failed:', error);
  }
}

export { logIn };
﻿
Pendekatan ini dapat diperluas untuk mencakup pengaturan ulang kata sandi, manajemen sesi, dan fitur otentikasi tambahan.
﻿
Kesimpulan dan Langkah Selanjutnya
Kerja bagus! Anda telah berhasil membangun aplikasi CRUD React Native yang terintegrasi dengan Back4app. 
Dalam panduan ini, Anda mengatur proyek bernama Basic-CRUD-App-ReactNative, merancang skema data Anda untuk Item dan Pengguna, dan mengelola backend Anda dengan Aplikasi Admin Back4app. 
Selain itu, Anda menghubungkan aplikasi Anda melalui REST API dan menerapkan langkah-langkah keamanan penting serta otentikasi pengguna.
Apa Selanjutnya?
Kembangkan Aplikasi Anda:
Tambahkan lebih banyak fitur seperti penyaringan lanjutan, tampilan item yang lebih detail, atau pembaruan data secara real-time.
Tingkatkan Kemampuan Backend:
Jelajahi fungsi cloud, integrasi pihak ketiga, atau sesuaikan kebijakan kontrol akses Anda.
Terus Belajar:
Lihat dokumentasi Back4app dan tutorial tambahan untuk lebih menyempurnakan keterampilan Anda.
Selamat coding dan semoga sukses dengan proyek React Native Anda!
Bidang	Tipe	Deskripsi
_id	ObjectId	Pengidentifikasi unik yang dihasilkan secara otomatis.
judul	String	Nama atau judul item.
deskripsi	String	Penjelasan singkat tentang item tersebut.
dibuatPada	Tanggal	Stempel waktu untuk saat item ditambahkan.
diperbaruiPada	Tanggal	Stempel waktu untuk pembaruan terbaru.
Bidang	Tipe	Deskripsi
_id	ObjectId	Pengidentifikasi unik yang dihasilkan secara otomatis.
nama pengguna	String	Pengidentifikasi unik untuk pengguna.
email	String	Alamat email pengguna (harus unik).
hashKataSandi	String	Kata sandi yang di-hash untuk login yang aman.
dibuatPada	Tanggal	Waktu ketika akun dibuat.
diperbaruiPada	Tanggal	Waktu ketika rincian akun terakhir diperbarui.
Diperbarui 20 Feb 2025
Apakah halaman ini membantu Anda?
SEBELUMNYA
Cara Membangun Aplikasi CRUD dengan Flutter?
BERIKUTNYA
Cara Membuat Aplikasi CRUD untuk iOS dengan Objective-C?