Bagaimana Membangun Backend dengan Windsurf?

ide windsurf memungkinkan anda untuk mengintegrasikan alat eksternal yang memiliki server mcp aktif ke dalamnya melalui protokol mcp ini memungkinkan anda untuk menjalankan tugas dan membaca data dari sumber sumber tersebut tanpa meninggalkan ide anda menggunakan prompt dalam tutorial ini, anda akan belajar bagaimana membangun backend dan antarmuka pengguna (ui) untuk penjadwal janji menggunakan server mcp back4app melalui ide windsurf dan menyebarkannya di kontainer back4app poin penting anda dapat melihat pelacak pengeluaran pribadi langsung yang dibangun dalam tutorial ini menggunakan tautan ini pelajari cara membangun backend di back4app menggunakan windsurf dan server mcp back4app jelajahi bagaimana hubungan dimodelkan antara kelas di back4app jelajahi bagaimana otentikasi dan otorisasi berbasis peran diimplementasikan oleh back4app menggunakan kelas bawaan mereka sebarkan aplikasi anda dalam beberapa klik menggunakan kontainer back4app prasyarat untuk mengikuti tutorial ini, anda perlu memiliki hal hal berikut akun back4app anda bisa daftar gratis jika anda belum memiliki windsurf ide terinstal di sistem anda pemahaman dasar tentang konsep pengembangan backend gambaran proyek penjadwal janji temu dalam tutorial ini, anda akan membangun penjadwal janji temu yang mendukung dua peran penyedia yang mendaftarkan layanan yang mereka tawarkan dan klien yang memesan layanan tersebut penyedia mendefinisikan setiap layanan dengan nama, durasi, dan harga klien kemudian menjelajahi layanan yang tersedia, memilih tanggal dan waktu, dan mengonfirmasi pemesanan setelah dipesan, janji temu muncul di dasbor penyedia dan klien, dengan status yang dapat anda perbarui atau batalkan sesuai kebutuhan proyek ini akan memiliki 4 kelas user , role , appointment , dan service kelas user dan role adalah bagian dari kelas bawaan back4app dan akan digunakan untuk otentikasi dan kontrol akses kelas service akan mendefinisikan rincian setiap penawaran, namanya, durasi, dan harga, sehingga penyedia dapat mencantumkan apa yang mereka tawarkan dan klien dapat menjelajahi penawaran kelas appointment akan menghubungkan klien dan penyedia ke layanan yang dipilih pada bidang starttime dan endtime tertentu, melacak statusnya (“pending”, “confirmed”, “canceled”), dan menggunakan acl tingkat objek sehingga hanya klien yang melakukan pemesanan dan penyedianya yang dapat membaca atau memodifikasi setiap janji 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 windsurf dan mulai menulis prompt yang akan membuat aplikasi yang dijelaskan di bagian ini menghubungkan back4app dan windsurf tonton video di bawah ini untuk tutorial tentang cara menghubungkan windsurf ke back4app untuk menghubungkan server back4app mcp ke windsurf, pertama tama 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 kunci akun , beri nama kunci akun anda, salin kunci yang dihasilkan, dan simpan dengan aman selanjutnya, buka windsurf dan klik ikon palu di asisten cascade ini akan membuka dropdown dengan tombol konfigurasi, klik tombol tersebut tombol konfigurasi membawa anda ke halaman kelola plugin klik tombol “lihat konfigurasi mentah” dan tempel objek konfigurasi di bawah ini ke dalam file { "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 segarkan windsurf jika anda mengikuti tutorial ini di mesin windows, ubah nilai kunci perintah menjadi npx cmd membuat backend dengan windsurf untuk membuat backend dari penjadwal janji dengan windsurf, pertama tama anda harus memberi asisten cascade sebuah prompt yang memberitahunya untuk membuat aplikasi baru dengan nama yang anda tentukan, bersama dengan tabel database yang diperlukan anda dapat mencapai ini untuk penjadwal janji menggunakan prompt di bawah ini create a new backend named “appointment scheduler” by defining two new classes and a server side hook first, add a service class with fields for name (string), durationminutes (number) and price (number) then add an appointment class that includes pointers named client and provider (both to the built in user class), a pointer named service to the service class, starttime and endtime (date), and a status field constrained to “pending,” “confirmed,” or “canceled ” finally, write a beforesave cloud code trigger on appointment that queries for any existing appointment with the same provider whose time window overlaps the incoming starttime/endtime and rejects the save if it finds a conflict prompt di atas memberi tahu windsurf untuk membuat backend “penjadwal janji” dengan membuat dua model data baru service dan appointment, dengan hubungan dan field yang sesuai ini juga menerapkan hook beforesave sisi server pada appointment yang mencegah pemesanan yang tumpang tindih untuk provider yang sama windsurf mencatat semua permintaan yang dibuatnya saat mencoba menyelesaikan tugas, dan segera setelah selesai dieksekusi, ia akan memberikan ringkasan tugas tersebut sekarang setelah kelas aplikasi dan basis data telah dibuat, selanjutnya, anda dapat menerapkan otentikasi untuk backend anda menerapkan otentikasi & otorisasi di backend untuk aplikasi ini, anda perlu memastikan bahwa pengguna dapat masuk dengan aman dan hanya melakukan hal hal yang seharusnya mereka lakukan sebagai contoh, hanya pengguna yang mendaftar sebagai penyedia yang seharusnya dapat mencantumkan layanan, dan hanya penyedia yang mencantumkan layanan yang seharusnya dapat memperbarui layanan tersebut anda dapat mencapai ini untuk penjadwal janji menggunakan prompt di bawah ini update the “appointment scheduler” backend to enable user authentication and role based access control configure the built in user class to require email/password sign‐up and login ensure the built in role model includes “provider” and “client” roles, and assign each user to one of these roles on registration or via a cloud function then set class level permissions so that only authenticated users may read and write appointment objects, but only providers can create, update, or delete service entries finally, on each appointment object, apply an acl in a beforesave hook that grants read/write permission only to the booking client and the designated provider, and verify in the hook that request user has the appropriate role before allowing the operation prompt di atas menginstruksikan windsurf untuk mengaktifkan pendaftaran dan login email/kata sandi, mendefinisikan dan menetapkan peran “penyedia” dan “klien”, menegakkan izin tingkat kelas sehingga hanya penyedia yang mengelola layanan sementara pengguna yang terautentikasi menangani janji, dan menerapkan acl objek serta hook beforesave pada janji untuk memberikan akses hanya kepada klien pemesanan dan penyedia serta memverifikasi peran mereka sekarang setelah anda memiliki otentikasi dan otorisasi berbasis peran yang diatur, anda dapat menerapkan endpoint crud yang diperlukan agar aplikasi berfungsi mengimplementasikan fungsionalitas crud untuk layanan dan janji temu aplikasi anda perlu memungkinkan pengguna yang terautentikasi untuk membuat layanan (penyedia) dan memesan janji temu pada layanan yang sudah dibuat (klien) pengguna juga perlu dapat mengedit, menghapus, dan melihat layanan serta janji temu anda dapat mencapai ini untuk penjadwal janji temu menggunakan prompt di bawah ini add cloud code functions to our “appointment scheduler” backend that expose the necessary crud endpoints for the service class, implement createservice, listservices, updateservice, and deleteservice functions that check request user’s role and allow only providers to run them for the appointment class, implement createappointment, listappointments, updateappointmentstatus, and deleteappointment functions that ensure the caller is authenticated and only operates on records where they are the client or the provider in each function, use request user to enforce authentication, verify the user’s role (client or provider), apply the appropriate acl checks, and return the created, fetched, updated, or deleted record in the response prompt ini menginstruksikan windsurf untuk menghasilkan endpoint cloud code untuk kelas layanan dan janji temu, mengimplementasikan operasi buat, baca, perbarui, dan hapus sambil menegakkan autentikasi dan cek berbasis peran sehingga hanya penyedia yang dapat mengelola layanan dan hanya klien pemesan atau penyedia yang ditugaskan yang dapat mengelola janji temu mereka menghasilkan frontend anda anda dapat memanfaatkan konteks yang dimiliki windsurf dari membuat backend anda di back4app untuk memintanya membuat frontend yang sesuai dengan skema dan persyaratan untuk aplikasi anda anda dapat mencapai ini untuk penjadwal janji temu menggunakan prompt di bawah ini generate a minimal frontend that matches the schema and implements all the functionality of the appointment scheduler on my back4app account and connect the frontend to the backend using the javascript parse sdk use vite and react menggunakan prompt di atas atau yang serupa, windsurf akan menghasilkan frontend yang sesuai dengan skema backend anda dan menghubungkannya ke backend anda file proyek disimpan di bawah /\<user>/cascadeprojects/\<app name> cd ke dalam aplikasi dan jalankan menggunakan instruksi yang diberikan di readme, dan lakukan penyesuaian yang anda inginkan sekarang, proyek anda sudah lengkap di bagian selanjutnya, anda akan menyebarkannya di kontainer back4app menyebarkan aplikasi anda di kontainer back4app kontainer back4app memungkinkan anda untuk menyebarkan aplikasi anda dengan mudah menggunakan dockerfile dan repositori github untuk menyebarkan 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 appointment scheduler atau anda bisa menggunakan dockerfile yang disediakan di bawah ini from node 18 alpine as builder workdir /app \# install pnpm run npm install g pnpm \# copy only package files first for better caching copy package json pnpm lock yaml / \# install dependencies (including dev for build) run pnpm install frozen lockfile strict peer dependencies=false \# copy the rest of the app copy \# build the next js app with standalone output run pnpm build \# production image from node 18 alpine as runner workdir /app \# copy standalone output and required files copy from=builder /app/ next/standalone / copy from=builder /app/ next/static / next/static copy from=builder /app/public /public \# optionally copy env or other config files \# copy env local env local expose 3000 \# limit node js memory usage for low resource environments env node options=" max old space size=192" cmd \["node", "server js"] setelah menambahkan dockerfile dan mendorongnya ke github, navigasikan ke dasbor aplikasi back4app anda, klik dropdown dasbor dan pilih opsi platform penyebaran web di halaman penyebaran, klik tombol “deploy a web app” dan berikan back4app akses ke repositori yang ingin anda sebarkan pilih aplikasi yang ingin anda sebarkan, isi detail penyebaran, dan klik tombol sebarkan 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 penjadwal janji menggunakan server back4app mcp dan windsurf, kemudian menyebarkannya dengan back4app containers ini menunjukkan rangkaian lengkap alat back4app yang memungkinkan anda bergerak dari ideasi ke peluncuran dengan overhead minimal sebagai langkah selanjutnya, anda dapat memperluas proyek dengan fitur seperti sinkronisasi kalender, pengingat email otomatis, atau analitik tentang tren pemesanan semua peningkatan ini cocok secara alami ke dalam alur kerja back4app yang sama merancang dan mendefinisikan kelas baru atau cloud functions dengan windsurf mengamankannya dengan hooks beforesave dan meluncurkan pembaruan melalui back4app containers pendekatan ini memungkinkan anda menambahkan fitur baru ke aplikasi anda tanpa mengganggu pengguna