How to Build a Backend for Elm?

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 menciptakan 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 https //www back4app com/docs/get started/new parse app 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 https //guide elm lang org/install/ pastikan anda telah menginstal elm (0 19 atau lebih tinggi) di mesin anda keterampilan dengan elm dokumentasi resmi elm https //guide elm lang org/ 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 https //package elm lang org/packages/elm/http/latest/ dan, jika perlu, perpustakaan graphql yang disiapkan pastikan anda memiliki semua prasyarat ini sebelum anda mulai memiliki proyek back4app anda yang disiapkan dan lingkungan elm lokal anda siap 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 koneksikan 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 (seringkali 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" 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 https //package elm lang org/packages/elm/http/latest/ 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 } 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 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 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) 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 back4app menawarkan ai agent 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 { "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 parse live queries, anda masih dapat mengaktifkannya di dasbor back4app anda aktifkan query langsung di bawah 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 pada perubahan namun, ini memerlukan konfigurasi yang lebih canggih karena saat ini tidak ada klien elm live query 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 { "title" "private task", "acl" { "user object id" { "read" true, "write" true } } } ini mencegah siapa pun kecuali pengguna tersebut untuk membaca atau memodifikasi objek 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 menerapkan 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 diterapkan 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 menerapkan file main js anda, parse server yang berjalan akan diperbarui dengan kode terbaru anda // 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) curl https //raw\ githubusercontent com/back4app/parse cli/back4app/installer sh | sudo /bin/bash konfigurasi kunci akun anda b4a configure accountkey terapkan kode cloud anda b4a deploy menerapkan melalui dasbor di dasbor 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 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 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) 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) 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 https //www back4app com/docs/platform/sign in with apple 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 part atau melampirkan file yang dikodekan base64 unggahan file melalui rest 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 { "fileupload" { "enableforpublic" true, "enableforanonymoususer" true, "enableforauthenticateduser" true } } langkah 7 – penjadwalan 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 // 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 > pekerjaan latar belakang jadwalkan pekerjaan untuk dijalankan setiap hari atau sesuai keinginan langkah 8 – mengintegrasikan webhook webhook memungkinkan aplikasi back4app anda untuk mengirim permintaan http ke layanan eksternal setiap kali peristiwa tertentu terjadi ini sangat kuat 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 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 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 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 “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 parse dashboard atau kode backend dengan kontrol akses yang dapat dikonfigurasi, anda dapat dengan aman membagikan antarmuka ini kepada 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