Quickstarters
Cara Membangun Backend untuk Xamarin?

30min
Pendahuluan
Dalam tutorial ini, Anda akan belajar bagaimana membangun backend untuk Xamarin aplikasi mobile Anda menggunakan fitur-fitur kuat dari Back4App. 
Kami akan mengandalkan REST API, GraphQL, dan opsi API web lainnya alih-alih menggunakan SDK khusus. Pendekatan ini menjaga klien mobile Anda tetap ringan dan fleksibel, memungkinkan Anda untuk terhubung ke data Anda melalui panggilan HTTP sederhana.
Kami akan membahas pembuatan model database, menerapkan keamanan, menangani otentikasi, dan melakukan operasi file. 
Dengan mengikuti langkah-langkah ini, Anda akan melihat bagaimana membangun backend untuk xamarin dengan cepat dan aman. 
Anda juga akan menjelajahi penjadwalan tugas otomatis dan mengintegrasikan webhooks untuk memperluas fungsionalitas aplikasi Xamarin Anda, sehingga Anda dapat fokus pada pengkodean UI Anda alih-alih mengatur konfigurasi server.
Setelah Anda menyelesaikan panduan ini, Anda akan memiliki template yang dapat digunakan kembali untuk membangun aplikasi seluler yang bergantung pada Back4App untuk backend mereka. 
Anda juga akan memahami cara menerapkan Daftar Kontrol Akses (ACL), menulis Kode Cloud (jika diperlukan), dan menggabungkan alur kerja lanjutan seperti Kueri Langsung atau Pekerjaan Cloud dalam solusi akhir Anda.
Prasyarat
Untuk mendapatkan hasil maksimal dari tutorial ini, pastikan Anda memiliki:
Akun Back4App
Daftar gratis di sini.﻿
Proyek Back4App baru
Memulai dengan Back4app﻿
Lingkungan pengembangan Xamarin (Visual Studio atau Visual Studio untuk Mac)
Dokumen Instalasi Xamarin﻿
Pengetahuan dasar tentang C# dan Xamarin (termasuk cara membuat permintaan API web dari sebuah kelas publik dalam C#).
Dengan prasyarat ini siap, Anda akan siap untuk mengikuti dan menghubungkan proyek Xamarin Anda ke Back4App.
Langkah 1 – Membuat Proyek Baru di Back4App dan Menghubungkan
Buat proyek Back4App di dasbor Back4App Anda. Ini adalah dasar untuk backend Anda.
Beri nama proyek Anda (misalnya, “Xamarin-Backend-Tutorial”).
Temukan Kunci Aplikasi Anda dengan pergi ke bagian “Keamanan & Kunci” aplikasi. Anda akan melihat kunci REST, GraphQL, atau kunci lain yang mungkin Anda gunakan saat membuat permintaan dari klien seluler Anda.
Konfigurasikan proyek Xamarin Anda untuk membuat permintaan HTTP. Alih-alih menggunakan Parse SDK, Anda akan menggunakan HttpClient, atau pustaka jaringan lain yang Anda pilih, untuk memanggil REST atau GraphQL aplikasi Back4App Anda.
Misalnya, Anda dapat menyimpan ID Aplikasi dan Kunci API REST Anda di tempat yang aman atau di file konstanta:
C#
public class Back4AppConstants
{
    public const string AppId = "YOUR_APPLICATION_ID";
    public const string RestApiKey = "YOUR_REST_API_KEY";
    public const string ServerUrl = "https://parseapi.back4app.com";
}
public class Back4AppConstants
{
    public const string AppId = "YOUR_APPLICATION_ID";
    public const string RestApiKey = "YOUR_REST_API_KEY";
    public const string ServerUrl = "https://parseapi.back4app.com";
}
﻿
Saat memanggil web api, selalu sertakan kredensial ini dalam header permintaan Anda. Ini memastikan permintaan Anda diarahkan ke aplikasi yang benar dengan otorisasi yang diperlukan.
Langkah 2 – Menyiapkan Database
1. Membuat Model Data
Gunakan dasbor Back4App untuk mendefinisikan kelas Anda atau biarkan mereka dibuat secara dinamis pada permintaan pertama. Misalnya, jika Anda ingin kelas Todo , Anda dapat membuatnya di bagian Database atau secara langsung melalui panggilan REST API :
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
﻿
2. Membuat Model Data Menggunakan AI Agent
Back4App menyediakan AI Agent yang dapat menghasilkan struktur kelas lengkap:
Buka AI Agent di proyek Back4App Anda.
Deskripsikan model Anda (misalnya, “Silakan buat kelas baru bernama ‘Todo’ dengan field title dan isCompleted.”).
Konfirmasi untuk menghasilkan skema secara otomatis.
﻿
3. Membaca dan Menulis Data (REST)
Di dalam Xamarin proyek Anda, Anda dapat menulis sebuah public class (misalnya, RestClient) yang menangani semua permintaan ke Back4App:
C#
using System.Net.Http;
using System.Text;
using Newtonsoft.Json;

public class RestClient
{
    private readonly HttpClient _client;

    public RestClient()
    {
        _client = new HttpClient();
        _client.DefaultRequestHeaders.Add("X-Parse-Application-Id", Back4AppConstants.AppId);
        _client.DefaultRequestHeaders.Add("X-Parse-REST-API-Key", Back4AppConstants.RestApiKey);
    }

    public async Task CreateTodoAsync(string title, bool isCompleted)
    {
        var newTodo = new { title = title, isCompleted = isCompleted };
        var content = new StringContent(JsonConvert.SerializeObject(newTodo), Encoding.UTF8, "application/json");
        var response = await _client.PostAsync($"{Back4AppConstants.ServerUrl}/classes/Todo", content);
        // Handle the response
    }

    public async Task<List<Todo>> GetTodosAsync()
    {
        var response = await _client.GetAsync($"{Back4AppConstants.ServerUrl}/classes/Todo");
        var jsonString = await response.Content.ReadAsStringAsync();
        // Parse JSON into a C# model (Todo)
        // Return the result
        // ...
        return new List<Todo>(); // Placeholder
    }
}

public class Todo
{
    public string objectId { get; set; }
    public string title { get; set; }
    public bool isCompleted { get; set; }
}
using System.Net.Http;
using System.Text;
using Newtonsoft.Json;

public class RestClient
{
    private readonly HttpClient _client;

    public RestClient()
    {
        _client = new HttpClient();
        _client.DefaultRequestHeaders.Add("X-Parse-Application-Id", Back4AppConstants.AppId);
        _client.DefaultRequestHeaders.Add("X-Parse-REST-API-Key", Back4AppConstants.RestApiKey);
    }

    public async Task CreateTodoAsync(string title, bool isCompleted)
    {
        var newTodo = new { title = title, isCompleted = isCompleted };
        var content = new StringContent(JsonConvert.SerializeObject(newTodo), Encoding.UTF8, "application/json");
        var response = await _client.PostAsync($"{Back4AppConstants.ServerUrl}/classes/Todo", content);
        // Handle the response
    }

    public async Task<List<Todo>> GetTodosAsync()
    {
        var response = await _client.GetAsync($"{Back4AppConstants.ServerUrl}/classes/Todo");
        var jsonString = await response.Content.ReadAsStringAsync();
        // Parse JSON into a C# model (Todo)
        // Return the result
        // ...
        return new List<Todo>(); // Placeholder
    }
}

public class Todo
{
    public string objectId { get; set; }
    public string title { get; set; }
    public bool isCompleted { get; set; }
}
﻿
4. Membaca dan Menulis Data (GraphQL)
Untuk kueri GraphQL, Anda dapat mengirim permintaan ke endpoint GraphQL Back4App:
Bash
curl -X POST \
  -H "Content-Type: application/json" \
  -H "X-Parse-Application-Id: YOUR_APPLICATION_ID" \
  -H "X-Parse-Master-Key: YOUR_MASTER_KEY" \
  --data '{"query":"mutation { createTodo(input:{fields:{title:\"Wash the car\" isCompleted:false}}){ todo{ objectId title }}}"}' \
  https://parseapi.back4app.com/graphql
curl -X POST \
  -H "Content-Type: application/json" \
  -H "X-Parse-Application-Id: YOUR_APPLICATION_ID" \
  -H "X-Parse-Master-Key: YOUR_MASTER_KEY" \
  --data '{"query":"mutation { createTodo(input:{fields:{title:\"Wash the car\" isCompleted:false}}){ todo{ objectId title }}}"}' \
  https://parseapi.back4app.com/graphql
﻿
Demikian pula, dari Xamarin, Anda dapat POST body JSON dengan string GraphQL Anda ke https://parseapi.back4app.com/graphql.
5. Bekerja dengan Live Queries (Opsional)
Meskipun Anda menggunakan panggilan API web daripada Parse SDK, Anda masih dapat mengaktifkan Live Queries jika Anda menginginkan pembaruan data secara real-time. Anda akan menggunakan koneksi khusus (WebSockets) untuk berlangganan perubahan kelas. Aktifkan Live Queries dari Pengaturan Server aplikasi Anda di Back4App, kemudian gunakan pustaka klien yang kompatibel di Xamarin, jika tersedia. Sebagai alternatif, Anda dapat membangun solusi WebSocket Anda sendiri atau mengandalkan polling jika dukungan real-time bersifat opsional untuk aplikasi Anda.
Langkah 3 – Menerapkan Keamanan dengan ACL dan CLP
1. Ikhtisar ACL dan CLP
Keamanan Back4App mencakup Izin Tingkat Kelas (CLP) dan Daftar Kontrol Akses (ACL). CLP mendefinisikan pengguna atau peran mana yang dapat membaca/menulis ke seluruh kelas. ACL menambahkan keamanan per-objek. Gabungkan keduanya untuk memastikan hanya pengguna yang berwenang yang dapat memanipulasi data Anda.
2. Mengatur Izin Tingkat Kelas
Buka database di Back4App.
Pilih kelas Anda (seperti Todo).
Pergi ke Izin Tingkat Kelas untuk mengatur aturan baca/tulis. Anda mungkin hanya mengizinkan pengguna yang terautentikasi untuk membaca atau menulis. Ini memastikan bahwa klien seluler Anda harus masuk sebelum membaca data.
Langkah 4 – Menulis Fungsi Kode Cloud
1. Mengapa Kode Cloud
Kode Cloud memungkinkan Anda menjalankan logika sisi server yang kustom. Anda dapat membuat aturan bisnis, validasi, atau pemicu yang dijalankan saat data berubah. Ini mengurangi risiko manipulasi karena logika dijalankan di luar klien seluler.
2. Contoh Fungsi dan Pemicu
Di bawah ini adalah contoh sederhana dari Fungsi Cloud di file main.js :
JS
Parse.Cloud.define('helloXamarin', async (request) => {
  return 'Hello from Xamarin Cloud Code!';
});

Parse.Cloud.beforeSave('Todo', (request) => {
  const todo = request.object;
  if (!todo.get('title')) {
    throw 'Title is required';
  }
});
Parse.Cloud.define('helloXamarin', async (request) => {
  return 'Hello from Xamarin Cloud Code!';
});

Parse.Cloud.beforeSave('Todo', (request) => {
  const todo = request.object;
  if (!todo.get('title')) {
    throw 'Title is required';
  }
});
﻿
3. Penyebaran
Untuk menyebarkan, Anda dapat menggunakan Back4App CLI atau bagian Kode Cloud di dasbor Anda. Setelah disebarkan, Anda dapat memanggil fungsi Anda dari Xamarin 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 '{}' \
  https://parseapi.back4app.com/functions/helloXamarin
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 '{}' \
  https://parseapi.back4app.com/functions/helloXamarin
﻿
4. Modul NPM
Jika Anda memerlukan pustaka tambahan, instal melalui npm di folder proyek Cloud Code Anda. Setelah itu, require mereka di main.js. Pendekatan ini berguna untuk memanggil API pihak ketiga dari sisi server.
Langkah 5 – Mengonfigurasi Autentikasi
1. Aktifkan Autentikasi Pengguna
Di Back4App, kelas _User mengelola kredensial pengguna. Di bawah Pengaturan Aplikasi, Anda dapat mengaktifkan autentikasi pengguna, verifikasi email, dan pengaturan reset kata sandi.
2. Pendaftaran / Masuk Pengguna (REST)
Dari proyek Xamarin Anda, Anda dapat menulis metode C# untuk menangani pendaftaran dan masuk:
C#
public async Task SignUpUserAsync(string username, string password, string email)
{
    var user = new 
    { 
        username = username, 
        password = password,
        email = email 
    };

    var content = new StringContent(JsonConvert.SerializeObject(user), Encoding.UTF8, "application/json");
    var response = await _client.PostAsync($"{Back4AppConstants.ServerUrl}/users", content);
    // Parse response
}

public async Task LogInUserAsync(string username, string password)
{
    var loginEndpoint = $"{Back4AppConstants.ServerUrl}/login?username={username}&password={password}";
    var response = await _client.GetAsync(loginEndpoint);
    // Parse response
}
public async Task SignUpUserAsync(string username, string password, string email)
{
    var user = new 
    { 
        username = username, 
        password = password,
        email = email 
    };

    var content = new StringContent(JsonConvert.SerializeObject(user), Encoding.UTF8, "application/json");
    var response = await _client.PostAsync($"{Back4AppConstants.ServerUrl}/users", content);
    // Parse response
}

public async Task LogInUserAsync(string username, string password)
{
    var loginEndpoint = $"{Back4AppConstants.ServerUrl}/login?username={username}&password={password}";
    var response = await _client.GetAsync(loginEndpoint);
    // Parse response
}
﻿
Anda kemudian dapat menyimpan token sesi di sisi klien untuk permintaan di masa mendatang.
3. Masuk Sosial
Untuk mengintegrasikan masuk sosial (misalnya, Google, Facebook), konsultasikan dengan dokumentasi Masuk Sosial Back4App. Setiap penyedia memiliki alur OAuth-nya sendiri, yang dapat Anda tangani dari klien seluler. Kemudian, kirimkan token yang dikembalikan ke Back4App.
Langkah 6 – Menangani Penyimpanan File
1. Menyiapkan Penyimpanan File
File dapat diunggah dengan mengirimkan permintaan POST dengan data file di dalam body. Misalnya, untuk menyimpan gambar dari aplikasi Xamarin Anda, baca gambar ke dalam array byte, lalu kirim:
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 "@local-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 "@local-image.png" \
  https://parseapi.back4app.com/files/myImage.png
﻿
2. Contoh Unggah dengan C#
C#
public async Task<string> UploadFileAsync(byte[] fileData, string fileName)
{
    var fileContent = new ByteArrayContent(fileData);
    fileContent.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue("image/png");

    var response = await _client.PostAsync($"{Back4AppConstants.ServerUrl}/files/{fileName}", fileContent);
    var jsonResponse = await response.Content.ReadAsStringAsync();
    // Parse the response to get file URL
    return "File URL from response";
}
public async Task<string> UploadFileAsync(byte[] fileData, string fileName)
{
    var fileContent = new ByteArrayContent(fileData);
    fileContent.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue("image/png");

    var response = await _client.PostAsync($"{Back4AppConstants.ServerUrl}/files/{fileName}", fileContent);
    var jsonResponse = await response.Content.ReadAsStringAsync();
    // Parse the response to get file URL
    return "File URL from response";
}
﻿
3. Pertimbangan Keamanan
Untuk mengamankan unggahan file, pergi ke Pengaturan Server Anda di Back4App dan sesuaikan Izin File. Misalnya, Anda hanya dapat mengizinkan pengguna yang terautentikasi untuk mengunggah.
Langkah 7 – Verifikasi Email dan Reset Kata Sandi
1. Ikhtisar
Verifikasi email memastikan bahwa pengguna memiliki email yang mereka daftarkan. Tautan reset kata sandi memungkinkan mereka untuk mendapatkan kembali akses jika mereka lupa kata sandi mereka.
2. Konfigurasi Dasbor Back4App
Aktifkan verifikasi email di bawah Pengaturan Email.
Edit template reset kata sandi dan atur alamat “Dari”.
Anda juga dapat menyesuaikan konten email agar sesuai dengan merek Anda.
3. Implementasi
Setelah diaktifkan, jika seorang pengguna mendaftar dengan email, mereka akan mendapatkan tautan verifikasi. Panggilan reset kata sandi dilakukan ke API dasar yang sama dengan email pengguna untuk memicu email reset.
Langkah 8 – Penjadwalan Tugas dengan Pekerjaan Cloud
1. Apa yang Dilakukan Pekerjaan Cloud
Pekerjaan Cloud memungkinkan Anda untuk menjadwalkan tugas rutin, seperti membersihkan data lama atau mengirim email ringkasan harian, semuanya dari platform Back4App.
2. Contoh
JS
Parse.Cloud.job('cleanupOldTodos', async (request) => {
  const Todo = Parse.Object.extend('Todo');
  const query = new Parse.Query(Todo);
  const now = new Date();
  const THIRTY_DAYS_AGO = new Date(now - 30 * 24 * 60 * 60 * 1000);
  query.lessThan('createdAt', THIRTY_DAYS_AGO);
  const oldTodos = await query.find({ useMasterKey: true });
  await Parse.Object.destroyAll(oldTodos, { useMasterKey: true });
  return `Deleted ${oldTodos.length} old items.`;
});
Parse.Cloud.job('cleanupOldTodos', async (request) => {
  const Todo = Parse.Object.extend('Todo');
  const query = new Parse.Query(Todo);
  const now = new Date();
  const THIRTY_DAYS_AGO = new Date(now - 30 * 24 * 60 * 60 * 1000);
  query.lessThan('createdAt', THIRTY_DAYS_AGO);
  const oldTodos = await query.find({ useMasterKey: true });
  await Parse.Object.destroyAll(oldTodos, { useMasterKey: true });
  return `Deleted ${oldTodos.length} old items.`;
});
﻿
Terapkan Kode Cloud, lalu jadwalkan pekerjaan di bawah Pengaturan Aplikasi > Pengaturan Server > Pekerjaan Latar Belakang.
Langkah 9 – Mengintegrasikan Webhook
Tentukan webhook di Back4App dengan menavigasi ke Lainnya > WebHooks dan klik “Tambahkan Webhook.”
Berikan endpoint, seperti https://your-service.com/webhook-endpoint.
Pilih pemicu, seperti “Objek baru di kelas Todo.”
﻿
Webhook dapat memberi tahu layanan pihak ketiga, sehingga aplikasi Xamarin Anda dapat tetap ringan sementara sistem eksternal menangani logika atau notifikasi tambahan.
Langkah 10 – Menjelajahi Panel Admin Back4App
Aplikasi Admin Back4App adalah cara yang ramah pengguna untuk menangani operasi CRUD tanpa menulis kueri. Aktifkan di Dasbor Aplikasi > Lainnya > Aplikasi Admin. Buat pengguna admin, pilih subdomain, dan masuk.
﻿
Aplikasi Admin ini ideal untuk anggota tim non-teknis yang perlu mengelola data tetapi tidak seharusnya memiliki akses langsung ke database.
Kesimpulan
Anda baru saja melihat bagaimana membangun backend untuk xamarin menggunakan Back4App API. Anda membuat kelas yang aman, menambahkan CLP dan ACL, menangani otentikasi, dan menjelajahi unggahan file, penjadwalan tugas, dan integrasi dengan layanan eksternal. Pendekatan ini memastikan bahwa aplikasi mobile Anda tetap cepat dan fleksibel sambil memanfaatkan kekuatan database yang dihosting dan lingkungan cloud.
Langkah Selanjutnya
Kembangkan aplikasi Xamarin Anda untuk menangani logika yang lebih kompleks, caching, atau peran dan izin yang lebih maju.
Selami fitur-fitur canggih, seperti notifikasi push, atau integrasikan data waktu nyata dengan Live Queries jika Anda memerlukan pembaruan kolaboratif.
Kunjungi dokumentasi resmi Back4App untuk panduan lebih dalam tentang keamanan, kinerja, dan debugging.
Buat solusi dunia nyata dengan mencampurkan API pihak ketiga (gerbang pembayaran, analitik, media sosial) dengan backend Back4App Anda. Kombinasi ini dapat meningkatkan fungsionalitas klien mobile Anda dan menjaga kode Anda terorganisir.
﻿
Diperbarui 24 Jan 2025
Apakah halaman ini membantu Anda?
SEBELUMNYA
Bagaimana Membangun Backend untuk PHP?
BERIKUTNYA
Cara Membangun Backend untuk React Native?