Quickstarters
Bagaimana Membangun Backend untuk Ionic?

35min
Pendahuluan
Dalam tutorial ini, Anda akan belajar bagaimana membangun backend lengkap untuk aplikasi Ionic menggunakan Back4App. 
Kami akan membahas manajemen database, Fungsi Cloud Code, API REST dan GraphQL, otentikasi pengguna, penanganan file, dan banyak lagi. 
Tujuan kami adalah untuk menunjukkan kepada Anda cara membangun backend untuk Ionic yang aman, dapat diskalakan, dan mudah untuk dipelihara.
Kami akan menggunakan lingkungan intuitif Back4App untuk menyederhanakan pengaturan sisi server, menghindarkan Anda dari konfigurasi manual server atau database. 
Anda akan belajar alat-alat penting seperti penjadwalan tugas dengan Cloud Jobs, menerapkan aturan keamanan yang lebih canggih, dan mengintegrasikan webhook dengan layanan lain. 
Pada akhir tutorial, Anda akan siap untuk mengembangkan backend dasar ini menjadi sistem siap produksi untuk aplikasi Ionic Anda.
Prasyarat
Akun Back4App dan proyek Back4App baru
Memulai dengan Back4App.
Jika Anda tidak memiliki akun, buat satu secara gratis dan ikuti panduan di atas untuk mengatur proyek Anda.
Lingkungan pengembangan Ionic dasar
Pastikan Anda telah menginstal Ionic CLI dan dapat membuat serta menjalankan aplikasi Ionic.
Node.js (versi 14 atau lebih tinggi) terinstal
Unduh Node.js untuk mengelola ketergantungan dan membangun proyek Anda.
Pemahaman tentang JavaScript/TypeScript dan konsep Ionic
Dokumentasi Resmi Ionic.
Pemahaman yang baik tentang struktur, komponen, dan hook siklus hidup Ionic akan sangat membantu.
Langkah 1 – Membuat Proyek Baru di Back4App dan Menghubungkan
Masuk ke akun Back4App Anda.
Buat aplikasi baru menggunakan tombol “Aplikasi Baru” di dasbor Back4App Anda.
Beri nama aplikasi Anda (misalnya, “Ionic-Backend-Tutorial”).
﻿
Proyek Back4App ini adalah dasar untuk backend Anda. Berbeda dengan menggunakan SDK Parse sisi klien, tutorial ini akan menunjukkan cara melakukan panggilan melalui REST dan GraphQL dari aplikasi Ionic Anda.
Mengambil Kredensial Anda
Di dasbor Back4App, pergi ke App Settings atau Security & Keys.
Catat Application ID, REST API Key, dan GraphQL Endpoint. Anda akan memerlukan ini untuk mengirim permintaan dari aplikasi Ionic Anda.
Langkah 2 – Menyiapkan Database
Memiliki database yang terstruktur dengan baik adalah tulang punggung setiap aplikasi. Dasbor Back4App memudahkan untuk merancang model data dan menangani hubungan.
1. Membuat Model Data
Pergi ke bagian Database di dasbor Back4App Anda.
Buat kelas baru (misalnya, “Todo”) dan tambahkan kolom (misalnya, title sebagai String, isCompleted sebagai Boolean).
Buat Kelas Baru
﻿
2. Membuat Model Data Menggunakan Agen AI
Buka AI Agent dari dasbor Back4App Anda.
Deskripsikan skema yang Anda inginkan, seperti “Buat kelas Todo dengan bidang untuk judul (String) dan isCompleted (Boolean).”
AI Agent akan menghasilkan skema secara otomatis.
﻿
3. Membaca dan Menulis Data menggunakan REST API
Dari kode Ionic Anda, Anda dapat mengeksekusi permintaan HTTP. Misalnya, untuk membuat sebuah Todo:
Bash
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APPLICATION_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"title": "Buy groceries", "isCompleted": false}' \
  https://parseapi.back4app.com/classes/Todo
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APPLICATION_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"title": "Buy groceries", "isCompleted": false}' \
  https://parseapi.back4app.com/classes/Todo
﻿
Untuk mengambil semua Todos:
Bash
curl -X GET \
  -H "X-Parse-Application-Id: YOUR_APPLICATION_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  https://parseapi.back4app.com/classes/Todo
curl -X GET \
  -H "X-Parse-Application-Id: YOUR_APPLICATION_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  https://parseapi.back4app.com/classes/Todo
﻿
Anda dapat mengintegrasikan panggilan ini menggunakan fetch, Axios, atau pustaka klien HTTP lainnya dalam file layanan atau komponen aplikasi Ionic Anda.
4. Membaca dan Menulis Data menggunakan GraphQL API
Demikian pula, Anda dapat mengirim mutasi dan kueri GraphQL dari aplikasi Ionic Anda. Misalnya, untuk membuat Todo baru:
GraphQL
mutation {
  createTodo(input: {
    fields: {
      title: "Clean the house"
      isCompleted: false
    }
  }) {
    todo {
      objectId
      title
      isCompleted
    }
  }
}
mutation {
  createTodo(input: {
    fields: {
      title: "Clean the house"
      isCompleted: false
    }
  }) {
    todo {
      objectId
      title
      isCompleted
    }
  }
}
﻿
Contoh panggilan REST atau GraphQL dapat ditempatkan dalam file penyedia/layanan dalam struktur Ionic Anda, kemudian dipanggil dari halaman Anda.
5. Bekerja dengan Kueri Langsung (Opsional)
Kueri Langsung memberikan pembaruan waktu nyata pada data aplikasi Anda, meskipun mereka memerlukan SDK Parse atau pendekatan langganan khusus. Jika Anda memerlukan data waktu nyata, Anda dapat mengaktifkan Kueri Langsung dari pengaturan server Back4App Anda. Anda biasanya akan menggunakan koneksi WebSocket untuk memantau perubahan dalam kelas Anda. Namun, untuk panggilan berbasis HTTP standar, Anda dapat secara berkala mengkueri titik akhir REST atau GraphQL.
Langkah 3 – Menerapkan Keamanan dengan ACL dan CLP
Ikhtisar Singkat
ACL (Daftar Kontrol Akses) memungkinkan Anda mengatur izin baca/tulis pada objek individu. CLP (Izin Tingkat Kelas) memungkinkan Anda mengelola akses yang lebih luas di tingkat kelas. Fitur-fitur ini sangat penting untuk melindungi data pribadi dan memastikan hanya pengguna yang berwenang yang dapat memodifikasi informasi.
Mengatur Izin Tingkat Kelas
Di dasbor Back4App Anda, pergi ke Database > Izin Tingkat Kelas.
Konfigurasikan default kelas Anda (misalnya, hanya pengguna yang terautentikasi yang dapat membuat Todo baru).
Mengonfigurasi ACL
Saat membuat atau memperbarui catatan, Anda dapat mengirimkan ACL melalui REST:
Bash
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "title": "Private Task",
    "ACL": {
      "USER_OBJECT_ID_HERE": {
        "read": true,
        "write": true
      }
    }
  }' \
  https://parseapi.back4app.com/classes/Todo
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "title": "Private Task",
    "ACL": {
      "USER_OBJECT_ID_HERE": {
        "read": true,
        "write": true
      }
    }
  }' \
  https://parseapi.back4app.com/classes/Todo
﻿
Untuk informasi lebih lanjut, lihat Pedoman Keamanan Aplikasi.
Langkah 4 – Menulis Fungsi Cloud Code
Mengapa Cloud Code
Cloud Code memungkinkan Anda untuk menjalankan JavaScript sisi server untuk tugas seperti validasi data, pemicu, atau integrasi. Anda dapat membuat endpoint kustom untuk memusatkan logika, yang sangat berguna jika Anda ingin menjaga kode tetap terpisah dari klien.
Contoh Fungsi dan Pemicu
Di main.js Anda di sisi server (Back4App), Anda dapat menulis:
JS
// main.js
Parse.Cloud.define('validateTodo', (request) => {
  const { title } = request.params;
  if (!title) {
    throw 'A title is required.';
  }
  return `Title "${title}" looks good.`;
});

Parse.Cloud.beforeSave('Todo', (request) => {
  const todo = request.object;
  if (!todo.get('title')) {
    throw 'Todos must have a title.';
  }
});
// main.js
Parse.Cloud.define('validateTodo', (request) => {
  const { title } = request.params;
  if (!title) {
    throw 'A title is required.';
  }
  return `Title "${title}" looks good.`;
});

Parse.Cloud.beforeSave('Todo', (request) => {
  const todo = request.object;
  if (!todo.get('title')) {
    throw 'Todos must have a title.';
  }
});
﻿
Terapkan ini melalui Back4App CLI atau di bagian Cloud Code dari dasbor.
Memanggil Cloud Code dari Ionic
Anda dapat mengirim permintaan POST:
Bash
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"title": "Check this out"}' \
  https://parseapi.back4app.com/functions/validateTodo
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"title": "Check this out"}' \
  https://parseapi.back4app.com/functions/validateTodo
﻿
JS
// main.js
Parse.Cloud.define('validateTodo', (request) => {
  const { title } = request.params;
  if (!title) {
    throw 'A title is required.';
  }
  return `Title "${title}" looks good.`;
});

Parse.Cloud.beforeSave('Todo', (request) => {
  const todo = request.object;
  if (!todo.get('title')) {
    throw 'Todos must have a title.';
  }
});
// main.js
Parse.Cloud.define('validateTodo', (request) => {
  const { title } = request.params;
  if (!title) {
    throw 'A title is required.';
  }
  return `Title "${title}" looks good.`;
});

Parse.Cloud.beforeSave('Todo', (request) => {
  const todo = request.object;
  if (!todo.get('title')) {
    throw 'Todos must have a title.';
  }
});
﻿
Terapkan ini melalui Back4App CLI atau di bagian Cloud Code dari dasbor.
Anda akan mendapatkan respons JSON yang berisi data yang dikembalikan atau pesan kesalahan.
Modul NPM
Anda dapat menginstal paket seperti axios di lingkungan Cloud Code Anda untuk mengintegrasikan layanan pihak ketiga. Sertakan mereka dalam main.js:
JS
const axios = require('axios');
Parse.Cloud.define('fetchData', async (request) => {
  const url = request.params.url;
  const response = await axios.get(url);
  return response.data;
});
const axios = require('axios');
Parse.Cloud.define('fetchData', async (request) => {
  const url = request.params.url;
  const response = await axios.get(url);
  return response.data;
});
﻿
Terapkan dan panggil dengan cara yang sama seperti Anda akan melakukan fungsi Cloud Code lainnya.
Langkah 5 – Mengonfigurasi Autentikasi
Mengaktifkan Autentikasi Pengguna
Pendaftaran dan login pengguna dapat dilakukan dengan panggilan REST ke kelas User. Misalnya, untuk mendaftar:
Bash
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "username": "jon",
    "password": "somePassword",
    "email": "[email protected]"
  }' \
  https://parseapi.back4app.com/users
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "username": "jon",
    "password": "somePassword",
    "email": "jon@example.com"
  }' \
  https://parseapi.back4app.com/users
﻿
Login
Bash
curl -X GET \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  --data-urlencode 'username=jon' \
  --data-urlencode 'password=somePassword' \
  https://parseapi.back4app.com/login
curl -X GET \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  --data-urlencode 'username=jon' \
  --data-urlencode 'password=somePassword' \
  https://parseapi.back4app.com/login
﻿
Jika berhasil, Anda akan menerima sessionToken. Simpan dengan aman dan sertakan dalam header permintaan di masa mendatang untuk operasi yang terautentikasi.
Login Sosial
Anda dapat mengonfigurasi login sosial (seperti Google atau Facebook) dengan mengatur alur OAuth melalui Back4App atau dengan menggunakan penyedia eksternal. Lihat Dokumentasi Login Sosial untuk langkah-langkah yang lebih rinci.
Langkah 6 – Menangani Penyimpanan File
Mengatur Penyimpanan File
Back4App menawarkan penyimpanan file yang aman. Anda dapat melampirkan file ke objek atau menyimpannya secara independen. Misalnya:
Bash
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -H "Content-Type: image/png" \
  --data-binary "@path/to/your/image.png" \
  https://parseapi.back4app.com/files/myImage.png
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -H "Content-Type: image/png" \
  --data-binary "@path/to/your/image.png" \
  https://parseapi.back4app.com/files/myImage.png
﻿
Respon akan mencakup URL file yang dapat Anda simpan dalam sebuah kelas:
Bash
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "imageFile": {
      "__type": "File",
      "name": "myImage.png",
      "url": "RESPONSE_URL_HERE"
    }
  }' \
  https://parseapi.back4app.com/classes/Photo
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "imageFile": {
      "__type": "File",
      "name": "myImage.png",
      "url": "RESPONSE_URL_HERE"
    }
  }' \
  https://parseapi.back4app.com/classes/Photo
﻿
Pertimbangan Keamanan
Anda dapat mengaktifkan aturan keamanan file di Pengaturan Server Back4App untuk memerlukan autentikasi atau membatasi unggahan file ke peran tertentu.
Langkah 7 – Verifikasi Email dan Reset Kata Sandi
Mengapa Verifikasi Itu Penting
Verifikasi email memastikan keabsahan email pengguna. Reset kata sandi menyediakan cara yang aman untuk memulihkan kredensial yang hilang. Ini membantu menjaga kepercayaan dan pengelolaan pengguna yang tepat dalam aplikasi Ionic Anda.
Konfigurasi Dasbor Back4App
Pergi ke Pengaturan Aplikasi > Pengaturan Email.
Aktifkan Verifikasi Email.
Sesuaikan template email verifikasi dan reset kata sandi.
Langkah 8 – Menjadwalkan Tugas dengan Pekerjaan Cloud
Apa yang Dilakukan Pekerjaan Cloud
Pekerjaan Cloud memungkinkan Anda untuk menjadwalkan tugas berulang seperti pembersihan data atau mengirim email ringkasan. Anda menuliskannya di main.js:
JS
Parse.Cloud.job('cleanupOldTodos', async (request) => {
  const query = new Parse.Query('Todo');
  const now = new Date();
  const THIRTY_DAYS = 30 * 24 * 60 * 60 * 1000;
  const cutoff = new Date(now - THIRTY_DAYS);

  query.lessThan('createdAt', cutoff);
  const oldTodos = await query.find({ useMasterKey: true });
  await Parse.Object.destroyAll(oldTodos, { useMasterKey: true });
  return `Deleted ${oldTodos.length} old Todos.`;
});
Parse.Cloud.job('cleanupOldTodos', async (request) => {
  const query = new Parse.Query('Todo');
  const now = new Date();
  const THIRTY_DAYS = 30 * 24 * 60 * 60 * 1000;
  const cutoff = new Date(now - THIRTY_DAYS);

  query.lessThan('createdAt', cutoff);
  const oldTodos = await query.find({ useMasterKey: true });
  await Parse.Object.destroyAll(oldTodos, { useMasterKey: true });
  return `Deleted ${oldTodos.length} old Todos.`;
});
﻿
Setelah penyebaran:
Pergi ke Pengaturan Aplikasi > Pengaturan Server > Pekerjaan Latar Belakang.
Jadwalkan cleanupOldTodos untuk dijalankan setiap hari.
Menjadwalkan Pekerjaan Cloud
﻿
Langkah 9 – Mengintegrasikan Webhooks
Webhooks memungkinkan Anda mengirim data ke layanan eksternal ketika peristiwa tertentu terjadi dalam proyek Back4App Anda. Jika aplikasi Ionic Anda perlu memicu tindakan di Stripe atau Slack setelah membuat catatan baru, Anda dapat menggunakan webhooks untuk mengotomatiskan itu.
Pergi ke Lebih > WebHooks di dasbor Back4App Anda.
Tambahkan Webhook baru dan atur endpoint-nya (misalnya, https://your-service.com/webhook-endpoint).
Pilih peristiwa (misalnya, “Setelah Simpan” di Todo kelas).
Menambahkan Webhook
﻿
Anda juga dapat memulai permintaan keluar dari pemicu Cloud Code di main.js menggunakan pustaka HTTP standar.
Langkah 10 – Menjelajahi Panel Admin Back4App
The Back4App Admin App adalah antarmuka yang lebih sederhana untuk pemangku kepentingan non-teknis. Ini menyediakan cara yang mudah untuk melakukan operasi CRUD pada kelas Anda tanpa harus masuk ke Parse Dashboard utama.
Mengaktifkan Admin App
Di dashboard, pergi ke More > Admin App.
Klik Enable Admin App dan buat pengguna admin.
Pilih subdomain untuk mengakses antarmuka admin Anda.
Aktifkan Admin App
﻿
﻿
Panel ini membantu Anda mengelola data tanpa menulis kueri, menjadikannya ideal untuk klien atau anggota tim yang lebih suka antarmuka grafis.
Kesimpulan
Dengan menyelesaikan panduan ini tentang cara membangun backend untuk Ionic, Anda telah:
Membuat backend yang aman di Back4App dengan model data dan hubungan yang kuat.
Mengintegrasikan dengan REST dan GraphQL APIs untuk membaca dan menulis data dari aplikasi Ionic Anda.
Menerapkan keamanan dengan ACL dan CLP.
Menyebarkan Cloud Code untuk logika dan pemicu kustom.
Mengonfigurasi otentikasi pengguna dan penyimpanan file.
Menyiapkan Cloud Jobs untuk penjadwalan tugas.
Memanfaatkan webhook untuk integrasi eksternal.
Menjelajahi Panel Admin untuk menyederhanakan administrasi data.
Dengan fondasi ini, aplikasi Ionic Anda dapat berkembang menjadi platform siap produksi. Tambahkan lebih banyak logika, sambungkan API pihak ketiga, atau sesuaikan aturan keamanan untuk mencocokkan kasus penggunaan Anda.
Langkah Selanjutnya
Tingkatkan build produksi Anda dengan menerapkan caching, akses berbasis peran, dan pemantauan kinerja.
Integrasikan fitur canggih seperti Live Queries waktu nyata atau otentikasi multi-faktor.
Konsultasikan dokumen resmi Back4App untuk eksplorasi mendalam tentang analitik, log, dan penyetelan kinerja.
Jelajahi tutorial lain yang menunjukkan aplikasi chat, integrasi IoT, atau fitur berbasis lokasi yang digabungkan dengan layanan backend Back4App yang kuat.
﻿
Diperbarui 24 Jan 2025
Apakah halaman ini membantu Anda?
SEBELUMNYA
Cara Membangun Backend untuk Symfony?
BERIKUTNYA
Cara Membangun Backend untuk Dart?