Quickstarters
Cara Membangun Backend untuk Elm?

45min
Pendahuluan
Dalam tutorial ini, Anda akan belajar bagaimana membangun backend lengkap untuk aplikasi Elm menggunakan Back4App.
Kami akan membahas integrasi fitur-fitur penting Back4app – seperti manajemen database, Fungsi Cloud Code, API REST dan GraphQL, otentikasi pengguna, dan kueri waktu nyata (Kueri Langsung) – untuk membuat backend yang aman, dapat diskalakan, dan kuat yang berkomunikasi dengan mulus dengan frontend Elm Anda.
Anda juga akan melihat bagaimana pengaturan cepat Back4app dan lingkungan yang intuitif dapat secara drastis mengurangi waktu dan usaha dibandingkan dengan mengonfigurasi server dan database secara manual.
Sepanjang jalan, Anda akan mendapatkan pengalaman langsung dengan fungsionalitas kunci, termasuk fitur keamanan canggih, penjadwalan tugas dengan Pekerjaan Cloud, dan pengaturan webhook untuk integrasi eksternal.
Pada akhir tutorial ini, Anda akan siap untuk meningkatkan pengaturan dasar ini menjadi aplikasi siap produksi atau dengan mudah menggabungkan logika kustom dan API pihak ketiga sesuai kebutuhan.
Prasyarat
Untuk menyelesaikan tutorial ini, Anda akan memerlukan:
Akun Back4App dan proyek Back4app baru
 Memulai dengan Back4app.
Jika Anda tidak memiliki akun, Anda dapat membuat satu secara gratis. Ikuti panduan di atas untuk menyiapkan proyek Anda.
Lingkungan pengembangan Elm dasar
 Anda dapat menyiapkannya dengan menginstal Elm. Pastikan Anda telah menginstal Elm (0.19 atau lebih tinggi) di mesin Anda.
Keterampilan dengan Elm
 Dokumentasi Resmi Elm.
Jika Anda baru mengenal Elm, tinjau dokumen resmi atau tutorial pemula sebelum memulai.
Perpustakaan permintaan HTTP atau pendekatan GraphQL untuk Elm
 Kami akan menggunakan panggilan REST dan GraphQL dari Elm, karena tidak ada SDK Parse Elm resmi. Pastikan Anda memiliki elm/http dan, jika perlu, perpustakaan GraphQL yang disiapkan.
Pastikan Anda memiliki semua prasyarat ini sebelum Anda mulai. Menyiapkan proyek Back4app Anda dan lingkungan Elm lokal Anda akan membantu Anda mengikuti dengan lebih mudah.
Langkah 1 – Menyiapkan Proyek Back4app
Buat Proyek Baru
Langkah pertama dalam membangun backend Elm Anda di Back4app adalah membuat proyek baru. Jika Anda belum membuatnya, ikuti langkah-langkah ini:
Masuk ke akun Back4app Anda.
Klik tombol “Aplikasi Baru” di dasbor Back4app Anda.
Beri nama aplikasi Anda (misalnya, “Elm-Backend-Tutorial”).
﻿
Setelah proyek dibuat, Anda akan melihatnya terdaftar di dasbor Back4app Anda. Proyek ini akan menjadi dasar untuk semua konfigurasi backend yang dibahas dalam tutorial ini.
Hubungkan dengan Back4app dari Elm
Back4app bergantung pada Parse Platform untuk mengelola data Anda, menyediakan fitur waktu nyata, menangani otentikasi pengguna, dan lainnya. Karena tidak ada SDK Parse Elm resmi, kami akan menggunakan REST atau GraphQL panggilan dari aplikasi Elm kami untuk berkomunikasi dengan backend Back4app.
Ambil Kunci Parse Anda:
Di dasbor Back4app Anda, navigasikan ke bagian “Pengaturan Aplikasi” atau “Keamanan & Kunci” aplikasi Anda untuk menemukan ID Aplikasi, Kunci API REST, dan Endpoint GraphQL. Anda juga akan menemukan URL Server Parse (sering kali https://parseapi.back4app.com).
﻿
Dari Elm, Anda dapat menyimpan kredensial ini dalam file konfigurasi atau modul. Misalnya:
src/Config.elm
module Config exposing (applicationId, restApiKey, serverUrl, graphQLEndpoint)

applicationId : String
applicationId =
    "YOUR_APPLICATION_ID"

restApiKey : String
restApiKey =
    "YOUR_REST_API_KEY"

serverUrl : String
serverUrl =
    "https://parseapi.back4app.com"

graphQLEndpoint : String
graphQLEndpoint =
    "https://parseapi.back4app.com/graphql"
module Config exposing (applicationId, restApiKey, serverUrl, graphQLEndpoint)

applicationId : String
applicationId =
    "YOUR_APPLICATION_ID"

restApiKey : String
restApiKey =
    "YOUR_REST_API_KEY"

serverUrl : String
serverUrl =
    "https://parseapi.back4app.com"

graphQLEndpoint : String
graphQLEndpoint =
    "https://parseapi.back4app.com/graphql"
﻿
Anda akan menggunakan nilai-nilai ini setiap kali Anda melakukan permintaan HTTP ke Back4app dari Elm. Dengan menyelesaikan langkah ini, Anda telah menetapkan cara untuk menghubungkan front end Elm Anda dengan backend Back4app secara aman.
Langkah 2 – Menyiapkan Database
Menyimpan dan Mengquery Data
Dengan proyek Back4app Anda yang sudah disiapkan, Anda sekarang dapat mulai menyimpan dan mengambil data melalui REST atau GraphQL dari Elm. Untuk contoh sederhana, kami akan menunjukkan cara membuat dan mengambil sebuah Todo item.
Menggunakan REST dari Elm
Kami akan menggunakan elm/http untuk membuat permintaan REST. Berikut adalah contoh sederhana untuk membuat sebuah item Todo:
src/TodoApi.elm
module TodoApi exposing (createTodo, fetchTodos)

import Config exposing (applicationId, restApiKey, serverUrl)
import Http
import Json.Decode as Decode
import Json.Encode as Encode

-- A simplified representation of a Todo
type alias Todo =
    { objectId : String
    , title : String
    , isCompleted : Bool
    }

-- Encoder for creating a Todo
createTodoEncoder : String -> Bool -> Encode.Value
createTodoEncoder title isCompleted =
    Encode.object
        [ ( "title", Encode.string title )
        , ( "isCompleted", Encode.bool isCompleted )
        ]

-- Decoder for Todo
todoDecoder : Decode.Decoder Todo
todoDecoder =
    Decode.map3 Todo
        (Decode.field "objectId" Decode.string)
        (Decode.field "title" Decode.string)
        (Decode.field "isCompleted" Decode.bool)

createTodo : String -> Bool -> Http.Request Todo
createTodo title isCompleted =
    Http.request
        { method = "POST"
        , headers =
            [ Http.header "X-Parse-Application-Id" applicationId
            , Http.header "X-Parse-REST-API-Key" restApiKey
            , Http.header "Content-Type" "application/json"
            ]
        , url = serverUrl ++ "/classes/Todo"
        , body = Http.jsonBody (createTodoEncoder title isCompleted)
        , expect = Http.expectJson todoDecoder
        , timeout = Nothing
        , tracker = Nothing
        }

fetchTodos : Http.Request (List Todo)
fetchTodos =
    Http.request
        { method = "GET"
        , headers =
            [ Http.header "X-Parse-Application-Id" applicationId
            , Http.header "X-Parse-REST-API-Key" restApiKey
            ]
        , url = serverUrl ++ "/classes/Todo"
        , body = Http.emptyBody
        , expect =
            Http.expectJson
                (Decode.field "results" (Decode.list todoDecoder))
        , timeout = Nothing
        , tracker = Nothing
        }
module TodoApi exposing (createTodo, fetchTodos)

import Config exposing (applicationId, restApiKey, serverUrl)
import Http
import Json.Decode as Decode
import Json.Encode as Encode

-- A simplified representation of a Todo
type alias Todo =
    { objectId : String
    , title : String
    , isCompleted : Bool
    }

-- Encoder for creating a Todo
createTodoEncoder : String -> Bool -> Encode.Value
createTodoEncoder title isCompleted =
    Encode.object
        [ ( "title", Encode.string title )
        , ( "isCompleted", Encode.bool isCompleted )
        ]

-- Decoder for Todo
todoDecoder : Decode.Decoder Todo
todoDecoder =
    Decode.map3 Todo
        (Decode.field "objectId" Decode.string)
        (Decode.field "title" Decode.string)
        (Decode.field "isCompleted" Decode.bool)

createTodo : String -> Bool -> Http.Request Todo
createTodo title isCompleted =
    Http.request
        { method = "POST"
        , headers =
            [ Http.header "X-Parse-Application-Id" applicationId
            , Http.header "X-Parse-REST-API-Key" restApiKey
            , Http.header "Content-Type" "application/json"
            ]
        , url = serverUrl ++ "/classes/Todo"
        , body = Http.jsonBody (createTodoEncoder title isCompleted)
        , expect = Http.expectJson todoDecoder
        , timeout = Nothing
        , tracker = Nothing
        }

fetchTodos : Http.Request (List Todo)
fetchTodos =
    Http.request
        { method = "GET"
        , headers =
            [ Http.header "X-Parse-Application-Id" applicationId
            , Http.header "X-Parse-REST-API-Key" restApiKey
            ]
        , url = serverUrl ++ "/classes/Todo"
        , body = Http.emptyBody
        , expect =
            Http.expectJson
                (Decode.field "results" (Decode.list todoDecoder))
        , timeout = Nothing
        , tracker = Nothing
        }
﻿
Anda kemudian dapat memanggil createTodo atau fetchTodos dalam fungsi pembaruan Elm Anda, menangani Http respons, dan mengintegrasikan data ke dalam Model aplikasi Anda.
Menggunakan REST Secara Langsung (Contoh dalam cURL)
Jika Anda lebih suka menguji atau ingin melakukan panggilan cepat di luar Elm, Anda dapat menggunakan cURL:
Curl
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
﻿
Menggunakan GraphQL
Back4app juga menyediakan antarmuka GraphQL. Di bawah ini adalah contoh mutasi GraphQL untuk membuat Todo:
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
    }
  }
}
﻿
Di Elm, Anda dapat menggunakan pustaka GraphQL atau secara manual menyusun permintaan HTTP Anda untuk mengirimkan mutasi dan kueri ini, sangat mirip dengan cara kita menggunakan elm/http di atas.
Desain Skema dan Tipe Data
Secara default, Parse memungkinkan pembuatan skema secara langsung, tetapi Anda juga dapat mendefinisikan kelas dan tipe data Anda di dasbor Back4app untuk kontrol yang lebih.
Navigasikan ke bagian “Database” di dasbor Back4app Anda.
Buat kelas baru (misalnya, “Todo”) dan tambahkan kolom yang relevan, seperti judul (String) dan isCompleted (Boolean).
Buat Kelas Baru
﻿
Back4app juga mendukung berbagai tipe data: String, Number, Boolean, Object, Date, File, Pointer, Array, Relation, GeoPoint, dan Polygon. Anda dapat memilih tipe yang sesuai untuk setiap field atau membiarkan Parse secara otomatis membuat kolom ini saat Anda pertama kali menyimpan objek dari aplikasi Elm Anda menggunakan pendekatan REST atau GraphQL.
Buat Kolom
﻿
Back4app menawarkan Agen AI yang dapat membantu Anda merancang model data Anda:
Buka AI Agent dari Dasbor Aplikasi Anda atau di menu.
Jelaskan model data Anda dalam bahasa sederhana (misalnya, “Tolong, buat aplikasi ToDo baru di back4app dengan skema kelas yang lengkap.”).
Biarkan AI Agent membuat Skema untuk Anda.
﻿
Menggunakan AI Agent dapat menghemat waktu Anda saat mengatur arsitektur data Anda dan memastikan konsistensi di seluruh aplikasi Anda.
Data Relasional
Jika Anda memiliki data relasional – katakanlah, sebuah Kategori objek yang menunjuk ke beberapa Todo item – Anda dapat menggunakan Pointers atau Relations di Parse. Dari Elm, Anda dapat mengelola hubungan ini dengan menyertakan bidang pointer atau relasi dalam panggilan REST atau GraphQL Anda.
Sebagai contoh, untuk menambahkan pointer melalui REST:
JSON
{
  "title": "Task with Category",
  "category": {
    "__type": "Pointer",
    "className": "Category",
    "objectId": "YOUR_CATEGORY_OBJECT_ID"
  }
}
{
  "title": "Task with Category",
  "category": {
    "__type": "Pointer",
    "className": "Category",
    "objectId": "YOUR_CATEGORY_OBJECT_ID"
  }
}
﻿
Saat Anda melakukan query, Anda juga dapat menyertakan data pointer dengan menggunakan parameter ?include=category dalam REST atau menggunakan include dalam query GraphQL.
Query Langsung
Untuk pembaruan waktu nyata, Back4app menyediakan Query Langsung. Meskipun tidak ada paket Elm bawaan untuk Query Langsung Parse, Anda masih dapat mengaktifkannya di dasbor Back4app Anda:
Aktifkan Query Langsung di Pengaturan Server aplikasi Anda.
Gunakan endpoint WebSocket untuk Query Langsung di klien khusus.
Jika Anda ingin mengintegrasikan Query Langsung dengan Elm, Anda dapat memanfaatkan elm-websocket (atau pendekatan kustom lainnya) untuk berlangganan perubahan. Namun, ini memerlukan konfigurasi yang lebih canggih karena saat ini tidak ada klien Query Langsung Elm resmi.
Langkah 3 – Menerapkan Keamanan dengan ACL dan CLP
Mekanisme Keamanan Back4app
Back4app menganggap serius keamanan dengan menyediakan Access Control Lists (ACLs) dan Class-Level Permissions (CLPs). Fitur-fitur ini memungkinkan Anda membatasi siapa yang dapat membaca atau menulis data berdasarkan objek atau kelas, memastikan hanya pengguna yang berwenang yang dapat memodifikasi data Anda.
﻿
Access Control Lists (ACLs)
Sebuah ACL diterapkan pada objek individu untuk menentukan pengguna, peran, atau publik mana yang dapat melakukan operasi baca/tulis. Anda dapat mengonfigurasi ACL dari Elm dengan menyertakan _ACL properti dalam JSON Anda saat membuat atau memperbarui objek melalui REST atau GraphQL.
Sebagai contoh, untuk membuat Todo pribadi, Anda dapat mengatur:
JSON
{
  "title": "Private Task",
  "ACL": {
    "USER_OBJECT_ID": {
      "read": true,
      "write": true
    }
  }
}
{
  "title": "Private Task",
  "ACL": {
    "USER_OBJECT_ID": {
      "read": true,
      "write": true
    }
  }
}
﻿
Ini mencegah siapa pun kecuali pengguna tersebut untuk membaca atau memodifikasi objek.
Edit ACL
﻿
Class-Level Permissions (CLPs)
CLPs mengatur izin default seluruh kelas, seperti apakah kelas tersebut dapat dibaca atau ditulis secara publik, atau jika hanya peran tertentu yang dapat mengaksesnya.
Pergi ke Dasbor Back4app Anda, pilih aplikasi Anda, dan buka bagian Database.
Pilih sebuah kelas (misalnya, “Todo”).
Buka izin tingkat kelas tab.
Konfigurasikan default Anda, seperti “Memerlukan Autentikasi” untuk baca atau tulis, atau “Tidak Ada Akses” untuk publik.
﻿
Izin ini menetapkan dasar, sementara ACLs menyempurnakan izin untuk objek individu. Model keamanan yang kuat biasanya menggabungkan baik CLPs (pembatasan luas) dan ACLs (pembatasan per objek yang lebih halus). Untuk informasi lebih lanjut, kunjungi Pedoman Keamanan Aplikasi.﻿
Langkah 4 – Menulis dan Mengdeploy Fungsi Cloud
Cloud Code adalah fitur dari lingkungan Parse Server yang memungkinkan Anda menjalankan kode JavaScript kustom di sisi server – tanpa perlu mengelola server atau infrastruktur. Dengan menulis Cloud Code, Anda dapat memperluas backend Back4app Anda dengan logika bisnis tambahan, validasi, pemicu, dan integrasi yang berjalan dengan aman dan efisien di Parse Server.
Cara Kerjanya
Ketika Anda menulis Cloud Code, Anda biasanya menempatkan fungsi JavaScript, pemicu, dan modul NPM yang diperlukan dalam sebuah main.js (atau app.js) file. File ini kemudian dideploy ke proyek Back4app Anda, yang dieksekusi dalam lingkungan Parse Server.
Semua Cloud Code untuk aplikasi Back4app Anda berjalan di dalam Parse Server yang dikelola oleh Back4app, jadi Anda tidak perlu khawatir tentang pemeliharaan server, penskalaan, atau penyediaan. Setiap kali Anda memperbarui dan mendepoy file main.js Anda, Parse Server yang berjalan akan diperbarui dengan kode terbaru Anda.
JS
// main.js

// Import an npm module (e.g., axios)
const axios = require('axios');

Parse.Cloud.define('fetchExternalData', async (request) => {
  const url = request.params.url;
  if (!url) {
    throw new Error('URL parameter is required');
  }
  const response = await axios.get(url);
  return response.data;
});
// main.js

// Import an npm module (e.g., axios)
const axios = require('axios');

Parse.Cloud.define('fetchExternalData', async (request) => {
  const url = request.params.url;
  if (!url) {
    throw new Error('URL parameter is required');
  }
  const response = await axios.get(url);
  return response.data;
});
﻿
Anda dapat memanggil fungsi Cloud Code ini dari Elm dengan membuat permintaan REST ke:
https://parseapi.back4app.com/functions/fetchExternalData
Kasus Penggunaan Umum
Logika Bisnis: Mengagregasi data, memproses pembayaran, dll.
Validasi Data: Memastikan bidang tertentu memenuhi kriteria sebelum disimpan.
Pemicu: Menjalankan kode sebelum atau setelah tindakan simpan/perbarui/hapus.
Integrasi: Menghubungkan dengan API atau layanan eksternal.
Penegakan Keamanan: Memeriksa peran atau izin pengguna sebelum melakukan operasi kritis.
Terapkan Fungsi Anda
Menerapkan melalui Back4app CLI:
Instal CLI (contoh Linux/MacOS):
Bash
curl https://raw.githubusercontent.com/back4app/parse-cli/back4app/installer.sh | sudo /bin/bash
curl https://raw.githubusercontent.com/back4app/parse-cli/back4app/installer.sh | sudo /bin/bash
﻿
Konfigurasi kunci akun Anda:
Bash
b4a configure accountkey
b4a configure accountkey
﻿
Terapkan kode cloud Anda:
Bash
b4a deploy
b4a deploy
﻿
Menerapkan melalui Dashboard:
Di dashboard aplikasi Anda, pergi ke Cloud Code > Functions.
Salin/tempel fungsi ke dalam main.js editor.
Klik Terapkan.
﻿
Memanggil Fungsi Anda
Dari Elm, Anda dapat memanggil Fungsi Cloud dengan membuat permintaan POST:
Text
import Config exposing (applicationId, restApiKey, serverUrl)
import Http
import Json.Decode as Decode
import Json.Encode as Encode

cloudFunction : String -> Encode.Value -> Http.Request Decode.Value
cloudFunction functionName body =
    Http.request
        { method = "POST"
        , headers =
            [ Http.header "X-Parse-Application-Id" applicationId
            , Http.header "X-Parse-REST-API-Key" restApiKey
            , Http.header "Content-Type" "application/json"
            ]
        , url = serverUrl ++ "/functions/" ++ functionName
        , body = Http.jsonBody body
        , expect = Http.expectJson Decode.value
        , timeout = Nothing
        , tracker = Nothing
        }

calculateTextLength : String -> Http.Request Decode.Value
calculateTextLength text =
    let
        requestBody =
            Encode.object
                [ ( "text", Encode.string text ) ]
    in
    cloudFunction "calculateTextLength" requestBody
import Config exposing (applicationId, restApiKey, serverUrl)
import Http
import Json.Decode as Decode
import Json.Encode as Encode

cloudFunction : String -> Encode.Value -> Http.Request Decode.Value
cloudFunction functionName body =
    Http.request
        { method = "POST"
        , headers =
            [ Http.header "X-Parse-Application-Id" applicationId
            , Http.header "X-Parse-REST-API-Key" restApiKey
            , Http.header "Content-Type" "application/json"
            ]
        , url = serverUrl ++ "/functions/" ++ functionName
        , body = Http.jsonBody body
        , expect = Http.expectJson Decode.value
        , timeout = Nothing
        , tracker = Nothing
        }

calculateTextLength : String -> Http.Request Decode.Value
calculateTextLength text =
    let
        requestBody =
            Encode.object
                [ ( "text", Encode.string text ) ]
    in
    cloudFunction "calculateTextLength" requestBody
﻿
Anda juga dapat memanggil Cloud Functions melalui GraphQL:
GraphQL
mutation {
  calculateTextLength(input: {
    text: "Hello GraphQL"
  }) {
    result
  }
}
mutation {
  calculateTextLength(input: {
    text: "Hello GraphQL"
  }) {
    result
  }
}
﻿
Langkah 5 – Mengonfigurasi Autentikasi Pengguna
Autentikasi Pengguna di Back4app
Back4app memanfaatkan Parse User kelas sebagai dasar untuk autentikasi. Secara default, Parse menangani hashing kata sandi, token sesi, dan penyimpanan yang aman. Anda dapat membuat dan masuk pengguna melalui REST atau GraphQL dari aplikasi Elm Anda.
Mengatur Autentikasi Pengguna
Mendaftar Pengguna Baru (REST)
Text
signUpUser : String -> String -> String -> Http.Request Decode.Value
signUpUser username password email =
    Http.request
        { method = "POST"
        , headers =
            [ Http.header "X-Parse-Application-Id" applicationId
            , Http.header "X-Parse-REST-API-Key" restApiKey
            , Http.header "Content-Type" "application/json"
            ]
        , url = serverUrl ++ "/users"
        , body =
            Http.jsonBody
                (Encode.object
                    [ ( "username", Encode.string username )
                    , ( "password", Encode.string password )
                    , ( "email", Encode.string email )
                    ]
                )
        , expect = Http.expectJson Decode.value
        , timeout = Nothing
        , tracker = Nothing
        }
signUpUser : String -> String -> String -> Http.Request Decode.Value
signUpUser username password email =
    Http.request
        { method = "POST"
        , headers =
            [ Http.header "X-Parse-Application-Id" applicationId
            , Http.header "X-Parse-REST-API-Key" restApiKey
            , Http.header "Content-Type" "application/json"
            ]
        , url = serverUrl ++ "/users"
        , body =
            Http.jsonBody
                (Encode.object
                    [ ( "username", Encode.string username )
                    , ( "password", Encode.string password )
                    , ( "email", Encode.string email )
                    ]
                )
        , expect = Http.expectJson Decode.value
        , timeout = Nothing
        , tracker = Nothing
        }
﻿
Masuk (REST)
Text
logInUser : String -> String -> Http.Request Decode.Value
logInUser username password =
    Http.request
        { method = "GET"
        , headers =
            [ Http.header "X-Parse-Application-Id" applicationId
            , Http.header "X-Parse-REST-API-Key" restApiKey
            ]
        , url =
            serverUrl
                ++ "/login?username="
                ++ username
                ++ "&password="
                ++ password
        , body = Http.emptyBody
        , expect = Http.expectJson Decode.value
        , timeout = Nothing
        , tracker = Nothing
        }
logInUser : String -> String -> Http.Request Decode.Value
logInUser username password =
    Http.request
        { method = "GET"
        , headers =
            [ Http.header "X-Parse-Application-Id" applicationId
            , Http.header "X-Parse-REST-API-Key" restApiKey
            ]
        , url =
            serverUrl
                ++ "/login?username="
                ++ username
                ++ "&password="
                ++ password
        , body = Http.emptyBody
        , expect = Http.expectJson Decode.value
        , timeout = Nothing
        , tracker = Nothing
        }
﻿
Integrasi Login Sosial
Back4app dan Parse dapat terintegrasi dengan penyedia OAuth populer seperti Google, Facebook, atau Apple. Biasanya, Anda akan mengonfigurasi penyedia ini di dasbor Back4app dan kemudian melakukan permintaan yang diperlukan dari Elm. Lihat Dokumentasi Login Sosial untuk langkah-langkah pengaturan yang lebih rinci.
Verifikasi Email dan Reset Kata Sandi
Navigasikan ke Pengaturan Email di dasbor Back4app Anda.
Aktifkan verifikasi email untuk memastikan pengguna baru memverifikasi kepemilikan alamat email mereka.
Konfigurasikan alamat Dari, template email, dan domain kustom Anda jika diinginkan.
Langkah 6 – Menangani Penyimpanan File
Mengunggah dan Mengambil File
Parse menyertakan kelas Parse.File untuk menangani unggahan file, yang disimpan dengan aman oleh Back4app. Karena kita menggunakan REST dari Elm, kita dapat melakukan unggahan file multi-bagian atau melampirkan file yang dikodekan base64.
Unggahan File melalui REST
Text
uploadFile : String -> String -> Http.Request Decode.Value
uploadFile fileName base64Content =
    Http.request
        { method = "POST"
        , headers =
            [ Http.header "X-Parse-Application-Id" applicationId
            , Http.header "X-Parse-REST-API-Key" restApiKey
            , Http.header "Content-Type" "text/plain"
            ]
        , url = serverUrl ++ "/files/" ++ fileName
        , body = Http.stringBody "text/plain" base64Content
        , expect = Http.expectJson Decode.value
        , timeout = Nothing
        , tracker = Nothing
        }
uploadFile : String -> String -> Http.Request Decode.Value
uploadFile fileName base64Content =
    Http.request
        { method = "POST"
        , headers =
            [ Http.header "X-Parse-Application-Id" applicationId
            , Http.header "X-Parse-REST-API-Key" restApiKey
            , Http.header "Content-Type" "text/plain"
            ]
        , url = serverUrl ++ "/files/" ++ fileName
        , body = Http.stringBody "text/plain" base64Content
        , expect = Http.expectJson Decode.value
        , timeout = Nothing
        , tracker = Nothing
        }
﻿
Setelah diunggah, Anda akan menerima URL file dalam respons. Anda dapat menyimpan URL tersebut di field kelas Parse atau menampilkannya di aplikasi Elm Anda sesuai kebutuhan.
Keamanan File
Parse Server menyediakan konfigurasi untuk mengelola keamanan unggahan file. Misalnya:
JSON
{
  "fileUpload": {
    "enableForPublic": true,
    "enableForAnonymousUser": true,
    "enableForAuthenticatedUser": true
  }
}
{
  "fileUpload": {
    "enableForPublic": true,
    "enableForAnonymousUser": true,
    "enableForAuthenticatedUser": true
  }
}
﻿
Langkah 7 – Menjadwalkan Tugas dengan Cloud Jobs
Cloud Jobs
Cloud Jobs di Back4app memungkinkan Anda untuk menjadwalkan dan menjalankan tugas rutin di backend Anda, seperti membersihkan data lama atau mengirim email berkala. Misalnya, sebuah tugas untuk menghapus todos yang lebih tua dari 30 hari mungkin terlihat seperti:
JS
// main.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 = 30 * 24 * 60 * 60 * 1000;
  const cutoff = new Date(now - THIRTY_DAYS);
  query.lessThan('createdAt', cutoff);

  try {
    const oldTodos = await query.find({ useMasterKey: true });
    await Parse.Object.destroyAll(oldTodos, { useMasterKey: true });
    return `Deleted ${oldTodos.length} old Todos.`;
  } catch (err) {
    throw new Error('Error during cleanup:' + err.message);
  }
});
// main.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 = 30 * 24 * 60 * 60 * 1000;
  const cutoff = new Date(now - THIRTY_DAYS);
  query.lessThan('createdAt', cutoff);

  try {
    const oldTodos = await query.find({ useMasterKey: true });
    await Parse.Object.destroyAll(oldTodos, { useMasterKey: true });
    return `Deleted ${oldTodos.length} old Todos.`;
  } catch (err) {
    throw new Error('Error during cleanup:' + err.message);
  }
});
﻿
Terapkan Cloud Code Anda dengan pekerjaan baru (melalui CLI atau dasbor).
Pergi ke Dasbor Back4app > Pengaturan Aplikasi > Pengaturan Server > Tugas Latar Belakang.
Jadwalkan pekerjaan untuk dijalankan setiap hari atau sesuai keinginan.
Jadwal Pekerjaan Cloud
﻿
Langkah 8 – Mengintegrasikan Webhook
Webhook memungkinkan aplikasi Back4app Anda untuk mengirim permintaan HTTP ke layanan eksternal setiap kali peristiwa tertentu terjadi. Ini sangat berguna untuk mengintegrasikan dengan sistem pihak ketiga seperti gerbang pembayaran (misalnya, Stripe), alat pemasaran email, atau platform analitik.
Navigasikan ke konfigurasi Webhook di dasbor Back4app Anda > Lainnya > WebHooks dan kemudian klik pada Tambahkan Webhook.
Siapkan endpoint (misalnya, https://your-external-service.com/webhook-endpoint).
Konfigurasi pemicu untuk menentukan peristiwa mana di kelas Back4app Anda atau fungsi Cloud Code yang akan memicu webhook.
Menambahkan Webhook
﻿
Sebagai contoh, jika Anda ingin memberi tahu saluran Slack setiap kali Todo baru dibuat:
Buat Aplikasi Slack yang menerima webhook masuk.
Salin URL webhook Slack.
Di dasbor Back4app Anda, atur endpoint ke URL Slack tersebut untuk peristiwa “Rekaman baru di kelas Todo.”
Tambahkan header HTTP atau payload kustom jika diperlukan.
Webhook Sebelum Disimpan
﻿
Langkah 9 – Menjelajahi Panel Admin Back4app
The Back4app Admin App adalah antarmuka manajemen berbasis web yang dirancang untuk pengguna non-teknis untuk melakukan operasi CRUD dan menangani tugas data rutin tanpa menulis kode. Ini menyediakan model-centric, user-friendly antarmuka yang menyederhanakan administrasi basis data, manajemen data kustom, dan operasi tingkat perusahaan.
Mengaktifkan Admin App
Aktifkan dengan pergi ke App Dashboard > More > Admin App dan mengklik tombol “Enable Admin App.”
Aktifkan Admin App
﻿
Buat Pengguna Admin Pertama (username/password), yang secara otomatis menghasilkan peran baru (B4aAdminUser) dan kelas (B4aSetting, B4aMenuItem, dan B4aCustomField) dalam skema aplikasi Anda.
﻿
Pilih Subdomain untuk mengakses antarmuka admin dan selesaikan pengaturannya.
﻿
Masuk menggunakan kredensial admin yang Anda buat untuk mengakses dasbor Admin App baru Anda.
﻿
Setelah diaktifkan, Aplikasi Admin Back4app memudahkan untuk melihat, mengedit, atau menghapus catatan dari database Anda – tanpa memerlukan penggunaan langsung dari Dasbor Parse atau kode backend. Dengan kontrol akses yang dapat dikonfigurasi, Anda dapat dengan aman membagikan antarmuka ini dengan anggota tim atau klien yang membutuhkan cara yang jelas dan mudah untuk mengelola data.
Kesimpulan
Dengan mengikuti tutorial komprehensif ini, Anda telah:
Membuat backend yang aman untuk aplikasi Elm di Back4app.
Mengonfigurasi database dengan skema kelas, tipe data, dan hubungan.
Mengintegrasikan kueri waktu nyata (Kueri Langsung) untuk pembaruan data segera.
Menerapkan langkah-langkah keamanan menggunakan ACL dan CLP untuk melindungi dan mengelola akses data.
Mengimplementasikan Cloud Code fungsi untuk menjalankan logika bisnis kustom di sisi server.
Mengatur otentikasi pengguna dengan dukungan untuk verifikasi email dan pengaturan ulang kata sandi.
Mengelola unggahan file dan pengambilan, dengan kontrol keamanan file opsional.
Menjadwalkan Pekerjaan Cloud untuk tugas latar belakang otomatis.
Menggunakan Webhooks untuk mengintegrasikan dengan layanan eksternal.
Menjelajahi Panel Admin Back4app untuk manajemen data.
Dengan frontend Elm yang solid dan backend Back4app yang kuat, Anda sekarang siap untuk mengembangkan aplikasi yang kaya fitur, skalabel, dan aman. Teruslah menjelajahi fungsionalitas yang lebih canggih, integrasikan logika bisnis Anda, dan manfaatkan kekuatan Back4app untuk menghemat waktu Anda dalam administrasi server dan database. Selamat coding!
Langkah Selanjutnya
Bangun aplikasi Elm yang siap produksi dengan memperluas backend ini untuk menangani model data yang lebih kompleks, strategi caching, dan optimisasi kinerja.
Integrasikan fitur-fitur canggih seperti alur autentikasi khusus, kontrol akses berbasis peran, atau API eksternal (seperti gerbang pembayaran).
Periksa dokumentasi resmi Back4app untuk penjelasan lebih dalam tentang keamanan canggih, penyetelan kinerja, dan analisis log.
Jelajahi tutorial lainnya tentang aplikasi chat waktu nyata, dasbor IoT, atau layanan berbasis lokasi. Anda dapat menggabungkan teknik yang dipelajari di sini dengan API pihak ketiga untuk membuat aplikasi kompleks di dunia nyata.
﻿
Diperbarui 24 Jan 2025
Apakah halaman ini membantu Anda?
SEBELUMNYA
Cara Membangun Backend untuk VueJS?
BERIKUTNYA
Cara Membangun Backend untuk NodeJS?