Quickstarters
Cara Membuat Aplikasi CRUD dengan Elm?

34min
Ikhtisar
Dalam panduan ini, Anda akan belajar bagaimana membangun aplikasi CRUD (buat, baca, perbarui, hapus) yang lengkap menggunakan Elm.
Kami akan menggunakan Back4app sebagai layanan backend kami untuk mengelola data dengan mudah. Panduan ini menjelaskan cara mengonfigurasi proyek Back4app, merancang skema data yang fleksibel, dan mengintegrasikan operasi CRUD ke dalam aplikasi Elm menggunakan panggilan REST API.
Pertama, Anda akan mengatur proyek Back4app, yang di sini dinamakan Basic-CRUD-App-Elm, yang menyediakan database non-relasional yang kuat. Anda akan merancang model data Anda—baik secara manual atau menggunakan AI Agent cerdas dari Back4app.
Selanjutnya, Anda akan mengelola backend Anda dengan Aplikasi Admin Back4app, yang menawarkan antarmuka drag-and-drop yang intuitif untuk manipulasi data.
Akhirnya, Anda akan menghubungkan aplikasi Elm Anda ke Back4app dengan membuat permintaan API RESTful sambil memastikan operasi data yang aman.
Pada akhir tutorial ini, Anda akan memiliki aplikasi Elm yang siap produksi yang mendukung fungsionalitas CRUD inti dan otentikasi pengguna yang aman.
Wawasan Penting
Pelajari cara membangun aplikasi CRUD Elm yang dipasangkan dengan backend non-relasional.
Pahami cara menyusun backend yang dapat diskalakan dan menghubungkannya dengan front-end Elm.
Gunakan Aplikasi Admin Back4app untuk tindakan buat, baca, perbarui, dan hapus yang mulus.
Jelajahi opsi penyebaran, termasuk Docker, untuk meluncurkan aplikasi Elm Anda dengan mudah.
﻿
Prasyarat
Sebelum Anda mulai, pastikan Anda memiliki:
Akun Back4app dengan proyek yang sudah disiapkan.
Butuh bantuan? Kunjungi Memulai dengan Back4app.
Lingkungan pengembangan Elm.
Instal Elm dan gunakan editor favorit Anda.
Keterampilan dasar Elm, pemrograman fungsional, dan permintaan HTTP.
Periksa Panduan Elm jika diperlukan.
﻿
Langkah 1 – Menginisialisasi Proyek Anda
Membuat Proyek Back4app Baru
Masuk ke akun Back4app Anda.
Klik tombol “Aplikasi Baru” dari dasbor Anda.
Beri nama proyek Anda: Basic-CRUD-App-Elm dan ikuti instruksi untuk menyelesaikan pengaturan.
Buat Proyek Baru
﻿
Setelah proyek Anda siap, itu akan muncul di dasbor Anda, menyiapkan panggung untuk konfigurasi backend Anda.
﻿
Langkah 2 – Membuat Skema Data
Menyiapkan Struktur Data Anda
Untuk aplikasi CRUD ini, Anda akan membuat beberapa koleksi (atau kelas) di Back4app. Di bawah ini adalah contoh koleksi utama dan bidangnya untuk mendukung operasi CRUD.
1. Koleksi Item
Koleksi ini menyimpan rincian tentang setiap entri.
Bidang
Tipe
Rincian
_id
ObjectId
Pengidentifikasi unik yang dihasilkan secara otomatis.
judul
String
Nama barang.
deskripsi
String
Deskripsi singkat tentang item tersebut.
dibuatPada
Tanggal
Timestamp menandai pembuatan.
diperbaruiPada
Tanggal
Stempel waktu menandai pembaruan terakhir.
2. Koleksi Pengguna
Koleksi ini menangani otentikasi pengguna dan kredensial.
Bidang
Tipe
Rincian
_id
ObjectId
Pengidentifikasi unik yang dihasilkan secara otomatis.
nama pengguna
String
Nama pengguna yang unik untuk pengguna.
email
String
Alamat email yang unik.
hashKataSandi
String
Kata sandi terenkripsi untuk keamanan.
dibuatPada
Tanggal
Stempel waktu untuk saat akun dibuat.
diperbaruiPada
Tanggal
Stempel waktu untuk pembaruan akun terakhir.
Anda dapat menambahkan koleksi dan bidang ini secara manual melalui dasbor Back4app.
Buat Kelas Baru
﻿
Anda dapat menambahkan bidang dengan memilih jenis yang sesuai, memberi nama bidang, dan menentukan apakah itu wajib.
Buat Kolom
﻿
Menggunakan Agen AI Back4app untuk Konfigurasi Skema
Agen AI Back4app menyederhanakan pembuatan skema data Anda berdasarkan deskripsi Anda. Proses otomatis ini memastikan skema Anda disiapkan untuk semua tindakan CRUD yang diperlukan.
Untuk menggunakan Agen AI:
Akses Agen AI:
Masuk ke dasbor Back4app Anda dan temukan Agen AI di pengaturan proyek Anda.
Detail Skema Data Anda:
Jelaskan koleksi dan bidang yang Anda butuhkan.
Tinjau dan Konfirmasi:
Periksa skema yang diusulkan dan setujui untuk mengonfigurasi backend Anda.
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)
﻿
Pendekatan cerdas ini menghemat waktu dan memastikan skema data yang kuat dan konsisten.
﻿
Langkah 3 – Mengaktifkan Antarmuka Admin & Menangani Operasi CRUD
Pengantar Antarmuka Admin
Aplikasi Admin Back4app memberikan Anda antarmuka tanpa kode untuk mengelola data backend Anda. Desainnya yang ramah pengguna memungkinkan Anda melakukan tindakan CRUD seperti menambah, melihat, mengedit, dan menghapus catatan.
Mengaktifkan Aplikasi Admin
Pergi ke menu “Lainnya” di dasbor Back4app Anda.
Pilih “Aplikasi Admin” dan klik “Aktifkan Aplikasi Admin.”
Buat akun admin Anda, yang juga akan mengatur peran seperti B4aAdminUser dan koleksi sistem.
Aktifkan Aplikasi Admin
﻿
Setelah diaktifkan, masuk ke Aplikasi Admin untuk mengelola data Anda.
Dasbor Aplikasi Admin
﻿
Melakukan Tindakan CRUD di Aplikasi Admin
Di dalam Aplikasi Admin, Anda dapat:
Masukkan Rekaman: Pilih “Tambahkan Rekaman” dalam koleksi (misalnya, Item) untuk membuat entri baru.
Periksa/Edit Rekaman: Klik pada rekaman mana pun untuk melihat detail atau mengubah data.
Hapus Rekaman: Hapus entri yang tidak lagi diperlukan.
Antarmuka yang mudah digunakan ini menyederhanakan manajemen data.
﻿
Langkah 4 – Menghubungkan Aplikasi Elm Anda ke Back4app
Dengan backend Anda yang sudah dikonfigurasi, saatnya untuk menghubungkan aplikasi Elm Anda ke Back4app.
Menggunakan Panggilan REST API di Elm
Karena Elm tidak mendukung SDK Parse yang khusus, kita akan menggunakan kemampuan HTTP bawaan untuk berinteraksi dengan endpoint REST Back4app.
Contoh: Mengambil Data dari Koleksi Item
Di bawah ini adalah contoh modul Elm yang menggunakan paket Http untuk mengambil daftar item:
Text
module Items exposing (Item, fetchItems, itemDecoder)

import Http
import Json.Decode as Decode exposing (Decoder)

type alias Item =
    { id : String
    , title : String
    , description : String
    }

itemDecoder : Decoder Item
itemDecoder =
    Decode.map3 Item
        (Decode.field "objectId" Decode.string)
        (Decode.field "title" Decode.string)
        (Decode.field "description" Decode.string)

fetchItems : Cmd msg
fetchItems =
    Http.get
        { url = "https://parseapi.back4app.com/classes/Items"
        , expect = Http.expectJson handleResponse (Decode.field "results" (Decode.list itemDecoder))
        }

handleResponse : Result Http.Error (List Item) -> msg
handleResponse result =
    -- Map the HTTP result to your application's message type.
    Debug.todo "Handle the response appropriately"
module Items exposing (Item, fetchItems, itemDecoder)

import Http
import Json.Decode as Decode exposing (Decoder)

type alias Item =
    { id : String
    , title : String
    , description : String
    }

itemDecoder : Decoder Item
itemDecoder =
    Decode.map3 Item
        (Decode.field "objectId" Decode.string)
        (Decode.field "title" Decode.string)
        (Decode.field "description" Decode.string)

fetchItems : Cmd msg
fetchItems =
    Http.get
        { url = "https://parseapi.back4app.com/classes/Items"
        , expect = Http.expectJson handleResponse (Decode.field "results" (Decode.list itemDecoder))
        }

handleResponse : Result Http.Error (List Item) -> msg
handleResponse result =
    -- Map the HTTP result to your application's message type.
    Debug.todo "Handle the response appropriately"
﻿
Contoh: Membuat Item Baru
Anda juga dapat mengimplementasikan permintaan POST di Elm untuk menambahkan catatan baru:
Text
createItem : String -> String -> Cmd msg
createItem title description =
    let
        body =
            Http.jsonBody <|
                Encode.object
                    [ ( "title", Encode.string title )
                    , ( "description", Encode.string description )
                    ]
    in
    Http.post
        { url = "https://parseapi.back4app.com/classes/Items"
        , body = body
        , expect = Http.expectJson handlePostResponse Decode.value
        }

handlePostResponse : Result Http.Error Decode.Value -> msg
handlePostResponse result =
    Debug.todo "Process the POST response"
createItem : String -> String -> Cmd msg
createItem title description =
    let
        body =
            Http.jsonBody <|
                Encode.object
                    [ ( "title", Encode.string title )
                    , ( "description", Encode.string description )
                    ]
    in
    Http.post
        { url = "https://parseapi.back4app.com/classes/Items"
        , body = body
        , expect = Http.expectJson handlePostResponse Decode.value
        }

handlePostResponse : Result Http.Error Decode.Value -> msg
handlePostResponse result =
    Debug.todo "Process the POST response"
﻿
Ulangi pola serupa untuk operasi pembaruan dan penghapusan menggunakan metode PUT dan DELETE.
﻿
Langkah 5 – Melindungi Backend Anda
Mengonfigurasi Kontrol Akses (ACL)
Lindungi data Anda dengan mengatur ACL pada objek Anda. Misalnya, untuk membatasi item kepada penciptanya, Anda bisa menggunakan:
Text
-- In Elm, you can add ACL details to your JSON payload.
createPrivateItem : String -> String -> String -> Cmd msg
createPrivateItem title description ownerId =
    let
        acl =
            Encode.object
                [ ( ownerId, Encode.object [ ("read", Encode.bool True), ("write", Encode.bool True) ] )
                , ( "*", Encode.object [ ("read", Encode.bool False), ("write", Encode.bool False) ] )
                ]

        body =
            Http.jsonBody <|
                Encode.object
                    [ ( "title", Encode.string title )
                    , ( "description", Encode.string description )
                    , ( "ACL", acl )
                    ]
    in
    Http.post
        { url = "https://parseapi.back4app.com/classes/Items"
        , body = body
        , expect = Http.expectJson handlePostResponse Decode.value
        }
-- In Elm, you can add ACL details to your JSON payload.
createPrivateItem : String -> String -> String -> Cmd msg
createPrivateItem title description ownerId =
    let
        acl =
            Encode.object
                [ ( ownerId, Encode.object [ ("read", Encode.bool True), ("write", Encode.bool True) ] )
                , ( "*", Encode.object [ ("read", Encode.bool False), ("write", Encode.bool False) ] )
                ]

        body =
            Http.jsonBody <|
                Encode.object
                    [ ( "title", Encode.string title )
                    , ( "description", Encode.string description )
                    , ( "ACL", acl )
                    ]
    in
    Http.post
        { url = "https://parseapi.back4app.com/classes/Items"
        , body = body
        , expect = Http.expectJson handlePostResponse Decode.value
        }
﻿
Mengatur Izin Tingkat Kelas (CLP)
Tentukan CLP di dasbor Back4app sehingga hanya pengguna yang terautentikasi yang dapat mengakses koleksi tertentu.
﻿
Langkah 6 – Menerapkan Autentikasi Pengguna
Mengelola Akun Pengguna
Back4app memanfaatkan koleksi Pengguna bawaan untuk menangani autentikasi. Di aplikasi Elm Anda, Anda akan mengelola pendaftaran dan login melalui panggilan REST API.
Contoh: Permintaan Pendaftaran Pengguna
Text
signUpUser : String -> String -> String -> Cmd msg
signUpUser username password email =
    let
        body =
            Http.jsonBody <|
                Encode.object
                    [ ( "username", Encode.string username )
                    , ( "password", Encode.string password )
                    , ( "email", Encode.string email )
                    ]
    in
    Http.post
        { url = "https://parseapi.back4app.com/users"
        , body = body
        , expect = Http.expectJson handleAuthResponse Decode.value
        }

handleAuthResponse : Result Http.Error Decode.Value -> msg
handleAuthResponse result =
    Debug.todo "Process the authentication response"
signUpUser : String -> String -> String -> Cmd msg
signUpUser username password email =
    let
        body =
            Http.jsonBody <|
                Encode.object
                    [ ( "username", Encode.string username )
                    , ( "password", Encode.string password )
                    , ( "email", Encode.string email )
                    ]
    in
    Http.post
        { url = "https://parseapi.back4app.com/users"
        , body = body
        , expect = Http.expectJson handleAuthResponse Decode.value
        }

handleAuthResponse : Result Http.Error Decode.Value -> msg
handleAuthResponse result =
    Debug.todo "Process the authentication response"
﻿
Ikuti pendekatan serupa untuk login dan manajemen sesi.
﻿
Langkah 7 – Menerapkan Aplikasi Elm Anda
Back4app mendukung penerapan yang mulus. Anda dapat menerapkan aplikasi Elm Anda menggunakan berbagai metode termasuk Docker.
7.1 Membangun Aplikasi Elm Anda
Kompilasi Kode Elm Anda:
Jalankan kompilator Elm untuk menghasilkan JavaScript:
Bash
elm make src/Main.elm --output=dist/main.js
elm make src/Main.elm --output=dist/main.js
﻿
Siapkan Aset Anda:
Pastikan file JavaScript dan HTML yang dihasilkan siap untuk penerapan.
﻿
7.2 Mengorganisir Struktur Proyek Anda
Tata letak proyek Elm yang khas mungkin terlihat seperti:
Text
Basic-CRUD-App-Elm/
|-- src/
|   |-- Main.elm
|   |-- Api.elm
|-- dist/
|   |-- index.html
|   |-- main.js
|-- elm.json
|-- package.json
|-- Dockerfile
Basic-CRUD-App-Elm/
|-- src/
|   |-- Main.elm
|   |-- Api.elm
|-- dist/
|   |-- index.html
|   |-- main.js
|-- elm.json
|-- package.json
|-- Dockerfile
﻿
7.3 Menggunakan Docker untuk Aplikasi Elm Anda
Jika mengemas, tambahkan sebuah Dockerfile:
Dockerfile
# Use a lightweight Node image for serving static files
FROM node:16-alpine

# Set the working directory
WORKDIR /app

# Copy compiled files
COPY dist/ /app/dist/

# Expose the desired port
EXPOSE 8080

# Serve the static files using a simple server
CMD ["npx", "http-server", "dist", "-p", "8080"]
# Use a lightweight Node image for serving static files
FROM node:16-alpine

# Set the working directory
WORKDIR /app

# Copy compiled files
COPY dist/ /app/dist/

# Expose the desired port
EXPOSE 8080

# Serve the static files using a simple server
CMD ["npx", "http-server", "dist", "-p", "8080"]
﻿
7.4 Penyebaran dengan Web Deployment Back4app
Tautkan Repositori Anda:
Hosting proyek Elm Anda di GitHub.
Konfigurasi Pengaturan Penyebaran:
Di dasbor Back4app, pilih fitur Web Deployment, sambungkan repositori Anda (misalnya, Basic-CRUD-App-Elm), dan pilih cabang yang diinginkan.
Atur Perintah Build:
Tentukan perintah build (misalnya, elm make src/Main.elm --output=dist/main.js) dan lokasi artefak.
Sebarkan Aplikasi Anda:
Tekan Deploy dan pantau log sampai aplikasi Anda aktif.
﻿
Langkah 8 – Pemikiran Akhir dan Arah Masa Depan
Selamat! Anda telah membangun aplikasi CRUD berbasis Elm yang terintegrasi dengan Back4app. 
Anda mengatur proyek bernama Basic-CRUD-App-Elm, merancang koleksi untuk Item dan Pengguna, dan mengelola data melalui Aplikasi Admin Back4app. 
Selain itu, Anda menghubungkan aplikasi Elm Anda menggunakan panggilan REST API dan menerapkan langkah-langkah keamanan.
Peningkatan Masa Depan:
Perluas Fitur:
Integrasikan kemampuan pencarian lanjutan, tampilan terperinci, atau pembaruan waktu nyata.
Tingkatkan Fungsi Backend:
Eksperimen dengan fungsi cloud, integrasi pihak ketiga, atau akses berbasis peran.
Perdalam Pengetahuan Anda:
Kunjungi dokumentasi Back4app dan sumber daya lainnya untuk menyempurnakan aplikasi Anda.
Selamat coding dan nikmati membangun dengan Elm dan Back4app!
Bidang	Tipe	Rincian
_id	ObjectId	Pengidentifikasi unik yang dihasilkan secara otomatis.
judul	String	Nama barang.
deskripsi	String	Deskripsi singkat tentang item tersebut.
dibuatPada	Tanggal	Timestamp menandai pembuatan.
diperbaruiPada	Tanggal	Stempel waktu menandai pembaruan terakhir.
Bidang	Tipe	Rincian
_id	ObjectId	Pengidentifikasi unik yang dihasilkan secara otomatis.
nama pengguna	String	Nama pengguna yang unik untuk pengguna.
email	String	Alamat email yang unik.
hashKataSandi	String	Kata sandi terenkripsi untuk keamanan.
dibuatPada	Tanggal	Stempel waktu untuk saat akun dibuat.
diperbaruiPada	Tanggal	Stempel waktu untuk pembaruan akun terakhir.
Diperbarui 17 Feb 2025
Apakah halaman ini membantu Anda?
SEBELUMNYA
Bagaimana Cara Mengembangkan Aplikasi CRUD dengan TypeScript?
BERIKUTNYA
Cara Mengembangkan Aplikasi CRUD dengan Vue.js?