Bagaimana Membangun Backend Menggunakan Claude?
17 mnt
pengembangan backend tradisional sering kali memerlukan pengkodean yang luas, manajemen infrastruktur, dan sumber daya pengembangan yang signifikan namun, memanfaatkan platform backend as a service modern dapat secara dramatis menyederhanakan proses ini back4app menyederhanakan proses ini dengan menyediakan seperangkat alat komprehensif yang dirancang untuk mempercepat alur kerja anda salah satu alat ini adalah protokol konteks model (mcp) back4app , yang memungkinkan anda membangun seluruh backend dari llm seperti claude hanya dengan menggunakan bahasa alami dalam tutorial ini, anda akan belajar bagaimana membangun backend dan antarmuka pengguna (ui) untuk pelacak pengeluaran pribadi menggunakan server mcp back4app melalui claude dan menyebarkannya di kontainer back4app poin penting anda dapat melihat pelacak pengeluaran pribadi langsung yang dibangun dalam tutorial ini menggunakan tautan ini temukan cara untuk membuat backend di back4app dalam hitungan menit menggunakan prompt claude dan server mcp lihat cloud code hooks beraksi saat mereka mengamankan penulisan hanya untuk pemilik dan menjaga ringkasan bulanan tetap akurat tanpa infrastruktur tambahan pelajari cara membuat frontend responsif yang terhubung ke api parse anda melalui sdk javascript, semuanya dihasilkan oleh claude jelajahi penyebaran satu klik dengan kontainer back4app, mendorong repositori github anda ke produksi tanpa overhead operasional prasyarat untuk mengikuti tutorial ini, anda perlu memiliki hal hal berikut akun back4app anda dapat mendaftar secara gratis jika anda belum memilikinya claude desktop terinstal di sistem anda pemahaman dasar tentang konsep pengembangan backend gambaran proyek pelacak pengeluaran pribadi anda akan membangun backend pelacakan pengeluaran yang dapat diquery dan diperbarui oleh claude secara real time pelacak pengeluaran anda dapat mencatat pengeluaran anda yang terorganisir berdasarkan kategori, dan menyediakan ringkasan bulanan dan tahunan dari kebiasaan belanja anda proyek ini memiliki 4 model data pengguna tabel ini menyimpan kredensial akun dan batas pengeluaran bulanan keseluruhan untuk setiap orang bidang bidangnya mencakup email, kata sandi, anggaran bulanan, dan cap waktu pengeluaran tabel ini menyimpan setiap pembelian di sini tanggal, jumlah, kategori, dan deskripsi kategori tabel ini menyimpan label yang ditentukan pengguna untuk mengelompokkan pengeluaran bidang bidangnya mencakup id, user id, nama, dan cap waktu ringkasan bulanan tabel ini menyimpan total yang telah diakumulasi sebelumnya untuk pemeriksaan dasbor dan anggaran yang cepat bidang bidangnya mencakup user id , bulan , total dibelanjakan , dan cap waktu setiap kali anda mencatat pengeluaran, sebuah beforesave pemicu cloud code menemukan (atau membuat) ringkasan bulanan bulan itu dan menambah totalnya serta mengurangi jumlah dari anggaran bulanan anda berikut adalah diagram hubungan entitas untuk membantu anda memvisualisasikan skema sekarang anda memiliki gambaran kasar tentang apa yang akan anda bangun, di bagian berikutnya anda akan mengatur server back4app mcp dengan claude desktop dan mulai menulis prompt yang akan membuat aplikasi yang dijelaskan di bagian ini menghubungkan back4app dan claude desktop untuk menghubungkan server back4app mcp ke claude desktop, pertama anda memerlukan kunci akun back4app untuk mengambilnya, masuk ke akun back4app anda dan di dasbor pengguna anda, klik dropdown di navbar dan pilih kunci akun di halaman account keys , beri nama kunci akun anda, salin kunci yang dihasilkan, dan simpan dengan aman selanjutnya, anda perlu memodifikasi file konfigurasi desktop claude untuk menyertakan server mcp back4app secara default, file konfigurasi desktop claude tidak ada di sistem anda anda dapat membuat file konfigurasi dengan menavigasi ke pengaturan desktop claude di sistem anda, memilih developer opsi, dan mengklik tombol edit config , atau anda dapat mengikuti panduan ini ini akan membuat file konfigurasi di (jika anda belum memilikinya) macos /library/application support/claude/claude desktop config json windows %appdata%\\\claude\\\claude desktop config json …dan akan menampilkan file di sistem file anda buka file konfigurasi dengan editor teks pilihan anda dan tambahkan konfigurasi di bawah ini { "mcpservers" { "back4app" { "command" "npx", "args" \[ " y", "@back4app/mcp server back4app\@latest", " account key", "\<account key>" ] } } } ganti \<account key> dengan kunci akun anda, simpan file dan restart desktop claude jika anda mengikuti tutorial ini di mesin windows, ubah nilai kunci perintah menjadi npx cmd dengan konfigurasi ini, anda siap untuk mulai membangun backend back4app anda dengan server mcp back4app dan desktop claude membuat backend dengan claude desktop untuk membuat backend dari proyek yang dijelaskan sebelumnya, anda harus membuat aplikasi baru di back4app dan di aplikasi tersebut, buat tabel database yang sesuai anda dapat mencapai ini menggunakan claude desktop dan sebuah prompt prompt anda harus menginstruksikan claude untuk membuat aplikasi baru bernama “personal expense tracker,” mendefinisikan empat kelas mongodb ( user, category, expense, dan monthlysummary) dengan bidang yang diperlukan, hubungan pointer, nilai default, dan kontrol akses, serta menyematkan cloud code hooks yang memperbarui ringkasan bulanan setiap kali pengeluaran berubah, memblokir penulisan yang tidak sah, dan mencegah nama kategori duplikat untuk seorang pengguna contoh prompt yang mencapai ini disediakan di bawah create a new back4app app named “personal expense tracker” class \\\\ user email string, required, unique passwordhash string, required monthlybudget number, required, default 0 (smallest currency unit) add a unique index on email class category user pointer<\\\\ user>, required (owner) name string, required acl public read, owner write add a compound unique index on {user, name} class expense user pointer<\\\\ user>, required category pointer\<category>, optional amount number, required currency string (length 3), required, default “usd” spentat date, required note string, optional isdeleted boolean, required, default false acl public read, owner write add indexes on {user, spentat} and {user, isdeleted} class monthlysummary user pointer<\\\\ user>, required month date, required (store the first day of the month) totalspent number, required acl public read, owner write add a unique index on {user, month} cloud code 1\ aftersave on expense if isdeleted is false, upsert the matching monthlysummary row (month = first day of spentat) and increment totalspent by amount if an expense is soft deleted (isdeleted toggled to true), decrement totalspent accordingly 2\ beforesave on expense reject writes when the authenticated user is not equal to user 3\ beforesave on category enforce the per user unique {user, name} combination create all classes, fields, indexes, clps, and cloud code hooks exactly as specified ketika anda mengirim prompt, anda akan menerima serangkaian pop up dari claude yang meminta izin untuk melakukan tugas tertentu, seperti membuat aplikasi pop up tersebut memberikan kesempatan untuk meninjau dan mengotorisasi setiap tindakan yang berpotensi tidak dapat dibatalkan, seperti membuat aplikasi baru atau menambahkan kelas, memastikan bahwa tidak ada yang diterapkan, ditagih, atau diekspos tanpa persetujuan eksplisit anda mereka bertindak sebagai pengaman terhadap perubahan yang tidak disengaja, memastikan anda tetap mengendalikan sumber daya back4app anda selanjutnya, implementasikan otentikasi pengguna di aplikasi anda dengan memberikan claude serangkaian perintah yang menginstruksikannya untuk menambahkan fungsi cloud berbasis token untuk pendaftaran dan masuk, menghapus akses publik ke kelas user, menjaga pembacaan publik tetapi penulisan hanya untuk pemilik pada kategori, pengeluaran, dan ringkasan bulanan, dan membuat penjaga beforesave yang menolak setiap penulisan ketika permintaan tidak terautentikasi daftar contoh perintah untuk setiap fungsionalitas tercantum di bawah daftar update the back4app application “personal expense tracker” to include a cloud code function called signupuser inputs email, password, monthlybudget (optional, default 0) if a user with the same email already exists, throw an error otherwise create the user record with those values and return the session token perintah ini membuat kode cloud untuk pendaftaran masuk update the back4app application “personal expense tracker” to include a cloud code function called loginuser inputs email, password call parse user login with those credentials and return the session token on success perintah ini membuat login yang sesuai untuk kode cloud izin tingkat kelas update class level permissions for the personal expense tracker \ keep public read but owner only write on category, expense, and monthlysummary perintah ini memastikan bahwa hanya pemilik kategori, pengeluaran, dan ringkasan bulanan yang dapat memodifikasinya menjalankan perintah perintah ini menyimpulkan semua logika backend anda di bagian berikutnya, anda akan menghasilkan frontend untuk backend anda menghasilkan frontend karena claude telah membuat backend back4app anda, ia mengingat bagaimana skema dan respons terlihat dengan memanfaatkan konteks itu, anda dapat memintanya untuk membuat ui yang sesuai dengan skema aplikasi yang dibuat contoh prompt disediakan di bawah ini generate a minimal frontend that matches the schema and implements all the functionality of the personal expense tracker on my back4app account and connect the frontend to the backend using the javascript parse sdk anda harus mendapatkan ui lengkap salin kode yang disediakan ke dalam ide seperti vs code dan dorong kode ke github di bagian berikutnya, anda akan menerapkan frontend anda di kontainer back4app menerapkan aplikasi anda di kontainer back4app kontainer back4app memungkinkan anda untuk menerapkan aplikasi anda dengan mudah menggunakan dockerfile dan repositori github untuk menerapkan aplikasi anda di kontainer back4app, anda perlu terlebih dahulu menyertakan dockerfile di repositori anda anda dapat meminta claude untuk menghasilkan satu menggunakan prompt di bawah ini generate a docker file for the ui of my personal expense tracker atau anda bisa menggunakan dockerfile yang disediakan di bawah ini \# start from the official lightweight nginx alpine image from nginx\ alpine \# remove default content run rm rf /usr/share/nginx/html/ \# copy your static site (html, css, assets) into the container copy /src /usr/share/nginx/html/ \# expose port 80 expose 80 \# start nginx in the foreground cmd \["nginx", " g", "daemon off;"] setelah menambahkan dockerfile dan mendorongnya ke github, navigasikan ke dasbor aplikasi back4app anda, klik dasbor dropdown, dan pilih opsi platform penyebaran web di halaman penyebaran, klik tombol “terapkan aplikasi web” dan berikan back4app akses ke repositori yang ingin anda terapkan pilih aplikasi yang ingin anda terapkan, isi detail penyebaran, dan klik tombol terapkan mengklik tombol memulai proses penyebaran, dan setelah selesai, anda akan mendapatkan url langsung ke aplikasi anda dapat melihat pelacak pengeluaran pribadi langsung yang dibangun dalam tutorial ini menggunakan tautan ini kesimpulan dalam artikel ini, anda membangun aplikasi yang melacak pengeluaran anda menggunakan server back4app mcp dan claude, kemudian anda menyebarkannya menggunakan kontainer back4app ini menunjukkan rangkaian lengkap alat back4app yang memungkinkan anda membangun aplikasi dari ide hingga peluncuran dengan overhead minimal sebagai langkah selanjutnya, anda dapat memperluas proyek dengan fitur seperti template pengeluaran berulang, impor csv, atau notifikasi push untuk pemborosan anggaran semua peningkatan ini cocok secara alami ke dalam alur kerja back4app yang sama mendefinisikan kelas baru atau fungsi cloud dengan claude, mengamankannya dengan hook beforesave, dan meluncurkan pembaruan melalui kontainer back4app pendekatan ini memungkinkan anda meningkatkan aplikasi anda tanpa mengganggu pengguna atau mengubah penyedia hosting