Bagaimana Membangun Backend Menggunakan Cursor?

proyek web dan mobile modern sering terhenti pada rintangan pertama mengubah ide menjadi backend yang siap produksi membangun model data secara manual, menulis logika crud boilerplate, menerapkan infrastruktur, dan kemudian menjaga frontend tetap sinkron dapat menghabiskan waktu berharga insinyur selama berhari hari atau berminggu minggu tutorial ini menunjukkan bagaimana platform backend back4app, protokol model context platform (mcp), dan ide yang dibantu ai dari cursor bersama sama menghilangkan gesekan tersebut dengan berjalan melalui pembuatan aplikasi manajemen acara yang sederhana, anda akan melihat bagaimana alat alat ini memungkinkan anda untuk membuat, menerapkan, dan mengintegrasikan backend yang sepenuhnya fungsional dan frontend yang sesuai poin penting temukan cara untuk membuat backend yang siap produksi di back4app dalam hitungan menit menggunakan agen ai dari cursor dan protokol mcp dapatkan wawasan tentang penegakan kontrol akses berbasis peran yang bersih dengan bantuan validateuserrole yang dapat digunakan kembali yang dengan rapi memisahkan alur kerja penyelenggara dan peserta pelajari cara menghasilkan dan menghubungkan frontend next js yang responsif yang secara otomatis mengkonsumsi rest api back4app anda jelajahi kontainerisasi dan penerapan satu klik dengan kontainer back4app untuk menerapkan aplikasi manajer acara full stack anda dari github dalam waktu yang sangat cepat ikhtisar proyek dalam tutorial ini, anda akan membangun sebuah aplikasi manajer acara yang memungkinkan pengguna untuk membuat acara, mendaftar untuk acara yang mereka minati, melihat acara yang akan datang atau yang telah didaftarkan, dan membatalkan pendaftaran mereka jika diperlukan anda akan membangun backend aplikasi ini menggunakan alat mcp dari back4app alat mcp memungkinkan model bahasa besar (llm) https //en wikipedia org/wiki/large language model seperti sonet claude 4 dan agen/alat ai seperti cursor untuk berinteraksi dengan mulus dengan backend back4app anda dengan mcp, asisten kode ai anda dapat membuat aplikasi, mengelola basis data (operasi crud, kueri), menerapkan kode cloud, menangani otentikasi pengguna, dan banyak lagi pada proyek back4app anda untuk tutorial ini, anda akan menggunakan cursor , editor kode bertenaga ai yang mengintegrasikan model bahasa besar untuk membantu anda menulis, refactor, dan memahami kode dalam lingkungan pengembangan anda dengan cursor dan mcp, anda dapat memicu tindakan backend menggunakan bahasa alami, membuat proses pengembangan lebih cepat dan lebih intuitif pengaturan proyek sekarang anda memiliki pemahaman yang lebih baik tentang apa yang akan anda capai dalam tutorial ini, silakan lanjutkan dan atur persyaratan proyek anda untuk membangun backend dengan cursor dan mcp prasyarat untuk menyelesaikan tutorial ini, anda akan memerlukan hal hal berikut akun back4app anda dapat mendaftar secara gratis https //www back4app com/signup jika anda belum memiliki satu cursor https //www cursor com/ terinstal di mesin pengembangan anda pemahaman dasar tentang konsep pengembangan backend node js v22 atau lebih tinggi langkah 1 buat proyek back4app langkah pertama adalah masuk ke akun back4app anda dan membuat proyek baru bernama “eventmanager ” langkah 2 buat kunci akun anda perlu menghasilkan kunci akun back4app untuk mengatur mcp di dalam cursor dan memberikan akses server mcp ke akun back4app anda pergi ke pengaturan kunci akun anda ketika berada di sana, beri nama kunci akun anda dan hasilkan satu dengan mengklik tombol + anda sekarang seharusnya melihat kunci akun yang dihasilkan bersama dengan tanggal kedaluwarsanya langkah 3 konfigurasi mcp di dalam cursor tonton video ini untuk belajar bagaimana menghubungkan cursor dan back4app buka aplikasi cursor dan navigasikan ke pengaturan > pengaturan cursor > mcp, di mana anda akan menemukan halaman untuk mengonfigurasi server mcp di cursor ai klik pada tombol “ tambahkan server mcp global baru ” untuk membuat file mcp json anda akan menulis konfigurasi anda untuk mcp di dalam file ini untuk mengonfigurasi server mcp back4app di cursor, tempel konfigurasi berikut di dalam mcp json { "mcpservers" { "back4app" { "command" "npx", "args" \[ " y", "@back4app/mcp server back4app\@latest", " account key", "\<account key>" ] } } } sekarang ganti \<account key> dengan kunci akun back4app yang telah anda simpan yang anda buat di langkah 3 jika anda mengikuti tutorial ini di mesin windows, ubah nilai kunci command menjadi npx cmd dengan konfigurasi ini, anda siap untuk mulai membangun backend back4app anda dengan back4app mcp dan cursor bangun backend dengan cursor dan back4app manajer acara anda akan memiliki fitur fitur berikut; pengguna dapat membuat acara baru pengguna dapat mendaftar untuk sebuah acara menampilkan daftar acara yang didaftarkan pengguna menampilkan daftar acara mendatang pengguna pengguna dapat membatalkan pendaftaran acara untuk memenuhi fitur fitur ini, berikut adalah contoh skema basis data buka cursor chat dengan mengaktifkan panel ai, dan lanjutkan untuk memilih mode agen untuk melakukan perubahan pada aplikasi anda selain itu, pilih llm yang diinginkan seperti model baru claude 4 sonnet di dalam kotak obrolan, tulis prompt untuk menghasilkan skema yang dirancang contoh prompt untuk mencapai ini adalah design a back4app backend database for my "event manager" application \ the app allow users to create events or register for created events as an organizer or attendee \ an organizer can then create events for attendees to view, register for and see their registered events \ an attendee can cancel events they previously registered for create the following classes to support these features; user name(string), role (organizer or attendee), email(string) event title(string), location(string), date(date), eventimage(file) and organizer(pointer = user) registration event(pointer = event), attendee(pointer = user), registered(boolean) ensure you create all specified pointer relationships anda perlu menyetujui permintaan untuk menggunakan alat mcp setelah disetujui, permintaan akan dieksekusi anda harus mendapatkan respons bahwa database telah berhasil dibuat anda dapat mengonfirmasi keberhasilan dengan memeriksa dasbor aplikasi anda untuk kelas yang baru dibuat sekarang setelah anda membuat backend anda dan menambahkan tabel database aplikasi anda, anda akan menerapkan logika aplikasi menerapkan fitur pengguna dengan mcp dalam deskripsi aplikasi anda, aplikasi ini harus memungkinkan jenis pengguna yang berbeda untuk melakukan tugas yang berbeda, seperti membuat acara dan mendaftar untuknya di sini anda akan mendefinisikan fungsi yang dibangun untuk menangani fitur fitur ini menerapkan kontrol akses fungsi utilitas utama untuk aplikasi ini akan disebut validateuserrole fungsi ini bertanggung jawab untuk memvalidasi fitur mana yang tersedia untuk peran pengguna mana anda dapat membuat fungsi ini dengan prompt berikut \ create a utility function inside a new `utils js` file that validates if a function is being called by a user with the required role \ if a user does not have the required role then the function will not continue and throw an error silakan konfirmasi utils js telah dibuat dengan validateuserrole buat fitur pengguna untuk menerapkan fitur buat pengguna , nama pengguna , kata sandi , email, dan peran harus disertakan siapa pun dapat memanggil fungsi tersebut terapkan logika pembuatan pengguna menggunakan prompt di bawah ini \ create an asynchronous cloud code function named `createuser` inside the backend's `main js` \ this function creates a user with the following string parameters username, role, email, and password \ the function should validate all input to ensure they conform to expected types and formats before saving \ check if a role was provided, if not, throw an error with a message indicating that a role is required if present, compare the inputed role against the list of valid roles; \["organizer", "attendee"] if inputed role is not valid, throw an error message "select a valid role" if the role is valid, allow the save to proceed as normal \ ensure the user being created/saved does not already exist 'user' by searching through the saved usernames anda harus menerima respons yang menunjukkan bahwa fungsi telah berhasil dibuat anda sekarang dapat membuat pengguna baru untuk event manager fitur buat acara peran organizer dapat membuat acara baru untuk melakukan ini, fungsi akan membuat objek acara baru dan memvalidasi bahwa pengguna dengan peran organizer yang memanggil fungsi tersebut anda akan menggunakan fungsi utilitas yang telah dibuat sebelumnya untuk mencapai validasi ini terapkan logika ini menggunakan prompt di bawah ini create an asynchronous cloud function that allows users to create a new event in the app use the utility function in `utils js` to ensure this can only be called by a user with the organizer role \ this function will take in the following parameters title(string), location(string), date(date), image(file), organizer(pointer) \ the event organizer attribute will have a pointer value to the user that calls the function \ perform proper error handling if the wrong user calls this function or if wrong parameter types are passed fungsi akan dibuat di dalam file main js anda dapat melakukan pengujian sederhana di dalam cursor menggunakan data dummy dan memanggil api rest back4app yang diekspos daftar untuk fitur acara untuk seorang pengguna mendaftar untuk sebuah acara, mereka harus memiliki peran peserta semua pengguna dengan peran ini memiliki akses ke 3 fitur yang pertama adalah mendaftar untuk acara yang dibuat fungsi ini membuat objek pendaftaran baru dan mengatur nilai boolean pendaftaran menjadi true untuk pengguna masukkan prompt berikut atau yang serupa untuk mencapai logika ini generate an asynchronous cloud code function called `registerforevent` use the validate role utility function to ensure only users with the attendee role can sucessfully call this \ `registerforevent` will accept 2 paramaters from a request body; `useid` and `eventid` \ the function should validate all paramaters are of the required type and formats expected in the registration class \ the function will register a user to an event by creating a new object in the registration class this object will set "registered" to a boolean type value of true \ upon successfully registering for event, the function should throw an operation sucessfull message selanjutnya, anda perlu fungsi untuk menanyakan semua acara di mana pengguna terdaftar kami akan menyebut fungsi ini listupcomingevents buat fungsi ini dengan prompt seperti ini create a simple async cloud code function called `listupcomingevents` \ this function will query for all upcoming events a user(attendee) has registered for \ it must only show events with future dates \ perform appropriate error handling if no upcoming registered events are found konfirmasi bahwa fungsi telah berhasil dibuat di dalam main js dan modifikasi kode baik secara manual atau menggunakan prompt kursor jika diperlukan perhatikan dalam prompt ini, parameter fungsi tidak ditentukan untuk agen ai cursor ini menunjukkan bagaimana agen menggunakan mcp untuk menyimpulkan parameter yang diperlukan oleh sebuah fungsi dengan memeriksa skema basis data namun, selalu merupakan praktik yang baik untuk memberikan konteks sebanyak mungkin dalam prompt anda fitur pembatalan pendaftaran fitur terakhir untuk memenuhi persyaratan aplikasi adalah fitur pembatalan pendaftaran untuk mengimplementasikan ini, fungsi akan mengambil eventid dan userid dari pendaftaran acara yang dipilih dan memperbarui nilai boolean nya tambahkan logika di atas ke aplikasi backend anda menggunakan prompt yang mirip dengan ini create an asynchronous cloud code function called `canceleventregistration` that cancels an event for a user(attendee) when called \ this function is responsible for canceling an event the user is registered for and setting the boolean value of `registration resgistered` in the object to false \ when a users event is sucessfully canceled, delete that registration object from the class and throw a success response \ implement error handling to catch and log any issues during the process, returning a relevant error message in case of failure anda dapat meninjau semua kode yang dibuat oleh cursor dan mcp dan memodifikasinya jika perlu di dasbor aplikasi → kode cloud , seperti yang ditunjukkan pada gambar di bawah dengan fitur fitur ini, anda sekarang telah memenuhi semua persyaratan untuk backend dari aplikasi manajer acara bangun frontend untuk backend anda dengan mcp menggunakan cursor sekarang backend anda telah berhasil dibangun dan dikerahkan anda akan membuat ui frontend untuk aplikasi anda ui ini akan menggunakan backend back4app anda dengan menggunakan endpoint rest api back4app untuk melakukan ini, mcp akan mengambil metadata skema backend anda, dan cursor akan menggunakan metadata ini untuk membangun ui aplikasi anda dengan spesifikasi prompt berikut build a responsive frontend app in next js that connects and consumes my "event management" backend app this frontend should have the following pages; \ a signup/signin page with a form for new and old users \ a homepage showing all events created in the backend \ if the signed in user has the attendee role the homepage should also show all upcoming registered events for the user \ a register for event page \ be sure to initialize parse properly with event manager `application id` and `javascript key` handle dynamic routing for both user roles and make the ui intuitive prompt ini bertujuan untuk membangun frontend next js dalam satu langkah anda selalu dapat meminta perubahan lebih lanjut jika anda tidak puas dengan generasi cursor pastikan parse telah diinisialisasi dengan benar dengan application id dan javascript key jika cursor gagal menangani ini variabel variabel ini memungkinkan anda untuk melakukan permintaan ke aplikasi backend gambar di atas menunjukkan aplikasi next js yang dihasilkan dengan satu perintah menggunakan cursor dan mcp back4app terapkan aplikasi anda akhirnya, anda akan menerapkan aplikasi full stack anda menggunakan fitur hosting web back4apps untuk menerapkan aplikasi next js anda, buat sebuah dockerfile di direktori root proyek anda dan tempelkan kode berikut di dalamnya \# stage 1 build the next js app from node 20 alpine as builder workdir /app copy package json package lock json / run npm install copy \# build with default or placeholder env vars arg next public parse application id arg next public parse javascript key arg next public parse server url run npm run build \# stage 2 run the next js app from node 20 alpine workdir /app copy from=builder /app / expose 3000 cmd \["npm", "start"] dockerfile ini melakukan hal berikut mulai dari runtime node js 14 resmi mengatur direktori kerja ke /app menyalin package json dan package lock json ke dalam gambar docker dan menginstal dependensi menyalin kode aplikasi yang tersisa ke dalam gambar docker membangun aplikasi next js mengekspos port 3000 untuk aplikasi mendefinisikan perintah untuk memulai aplikasi anda juga memerlukan sebuah dockerignore file buat satu di direktori root proyek anda dan tambahkan perintah ini \# node modules (reinstalled in docker) node modules \# next js build output next out \# logs npm debug log yarn debug log yarn error log pnpm debug log \# env files (optional — only if you handle secrets another way) env env local env development env production env test \# os / ide / editor junk ds store thumbs db vscode idea \# git git gitignore sekarang, jalankan perintah berikut di terminal anda untuk membangun dan menguji gambar docker docker build t event manager frontend docker run p 3000 3000 event manager frontend anda akan menemukan gambar docker yang telah anda bangun di http //localhost 3000 jika anda telah memverifikasi bahwa aplikasi anda berjalan seperti yang diinginkan, saatnya untuk mendorong kode anda ke repositori github dan menyebarkannya melalui back4app buka aplikasi event manager anda di dasbor back4app dan navigasikan ke penyebaran web setelah itu, lanjutkan untuk memberikan otorisasi kepada back4app untuk melihat repositori akun anda dan pilih repositori tempat anda mendorong aplikasi frontend yang ingin anda sebarkan tetapkan nama untuk proyek anda (mis event manager) dan klik tombol “sebarkan” yang ditunjukkan dalam gambar di atas untuk menyebarkan aplikasi anda jika berhasil, anda akan melihat pesan sukses penyebaran yang siap anda dapat mengakses aplikasi yang telah anda sebarkan di web dengan menavigasi ke tautan yang disediakan oleh back4app di layar penyebaran di bawah selamat, anda telah berhasil menyebarkan aplikasi anda di back4app anda dapat mengunjungi proyek event manager yang dibangun dalam tutorial ini di sini https //eventmanager3 3jqdnkfk b4a run/ kesimpulan dalam artikel ini, anda merancang dan menyebarkan aplikasi manajemen acara backend yang memungkinkan pengguna untuk mengelola acara sebagai penyelenggara atau peserta anda juga membangun frontend untuk aplikasi anda dengan next js, menggunakan cursor untuk mempercepat pengembangan menggabungkan lingkungan pengembang yang ditingkatkan ai dari cursor dengan mcp back4app menciptakan alur kerja pengembangan yang kuat yang secara drastis mengurangi waktu pengembangan dan memudahkan untuk membangun backend back4app anda selamat coding!