Cara Membangun Backend dengan VS Code?

vs code 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 platform blog menggunakan https //www back4app com/mcp melalui vs code dan menyebarkannya di kontainer back4app poin penting pelajari cara membangun backend di back4app menggunakan vs code dan server mcp 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 anda dapat melihat blog langsung yang dibangun dalam tutorial ini menggunakan https //blogger 6rhmkal0 b4a run/ prasyarat untuk mengikuti tutorial ini, anda perlu memiliki hal hal berikut akun back4app anda dapat https //www back4app com/signup jika anda belum memilikinya vs code terinstal di sistem anda pemahaman dasar tentang konsep pengembangan backend ikhtisar proyek sebuah blog dalam tutorial ini, anda akan membangun blog sederhana yang memungkinkan anda untuk membuat, mengedit, melihat, dan menghapus posting blog ini juga mendukung komentar dan melacak jumlah orang yang telah melihat posting blog anda selain tabel user yang disediakan secara default di back4app untuk otentikasi, blog anda akan memiliki tiga tabel tambahan posts, comments, dan views ketika seorang pengguna di blog anda membuat akun, back4app membuat catatan baru di tabel user dan mengeluarkan token sesi yang aman yang dapat anda gunakan kembali pada permintaan berikutnya hanya pengguna yang terautentikasi yang dapat menerbitkan posting ketika sebuah posting blog diterbitkan, baik pengguna yang terautentikasi maupun yang tidak terautentikasi dapat membaca posting tersebut; namun, hanya pengguna yang terautentikasi yang dapat mengomentari setiap kali sebuah posting blog diambil dari database back4app, jumlah tampilan akan bertambah; untuk mencegah kemungkinan penyalahgunaan fitur ini untuk meningkatkan tampilan, anda akan menerapkan beberapa pengaman di sekitarnya sekarang anda memiliki gambaran kasar tentang apa yang akan anda bangun, di bagian berikutnya, anda akan menghubungkan vscode ke server mcp back4app menghubungkan vscode ke server mcp back4app navigasikan ke situs web back4app dan klik tombol new app di bagian kiri atas halaman di layar “bangun backend”, beri nama aplikasi anda dan klik tombol create di halaman ringkasan aplikasi anda, klik tombol mcp setup di modal “pilih ide anda”, klik vs code dan ikuti instruksi yang ditampilkan di layar untuk menghubungkan vscode ke server mcp back4app secara otomatis jika anda mengikuti opsi instalasi otomatis, anda harus memulai ulang vs code di mesin anda sebelum melanjutkan sebagai alternatif, anda dapat menghubungkan server mcp back4app secara manual (yang memberi anda lebih banyak kontrol atas konfigurasi) dengan beralih modal ke bagian manual setelah mengikuti langkah langkah yang dijelaskan di modal untuk menghubungkan server mcp back4app ke vscode, anda dapat mengonfirmasi koneksi dengan mengklik bilah pencarian di jendela vscode anda dan mencari “>mcp list servers”, jalankan perintah tersebut, dan anda seharusnya melihat daftar server mcp yang tersedia dan statusnya saat ini (berjalan/stop) sekarang setelah anda menghubungkan server back4app mcp ke vscode, di bagian berikutnya, anda akan menulis prompt yang akan membangun seluruh aplikasi anda membangun backend blog anda untuk membuat backend anda menggunakan vscode dan github copilot, pertama tama, anda perlu mengaktifkan mode agen di github copilot untuk mengaktifkan mode agen, buka obrolan github copilot dengan menekan “ control + command + i” di macos, untuk windows, tekan “ctrl + i” di halaman obrolan, klik dropdown dengan label “tanya” dan pilih mode “agen” selanjutnya, berikan github copilot prompt di bawah ini atau yang serupa untuk membuat kelas yang diperlukan untuk aplikasi anda buat backend bernama “blogger” mulailah dengan menambahkan kelas post dengan bidang berikut judul dan isi sebagai string yang diperlukan, satu slug unik, file heroimage opsional yang disimpan di bucket back4app, pointer penulis ke kelas user bawaan, penghitung untuk commentcount, dan viewcount (semua dimulai dari 0), string status yang dibatasi pada draft atau diterbitkan, dan tanggal publishedat yang diatur secara otomatis ketika draft pertama kali diterbitkan selanjutnya, buat kelas comment yang menyimpan string konten, pointer penulis, dan pointer pos tambahkan kelas view yang mencatat setiap tampilan halaman dengan pointer pengguna opsional dan pointer pos yang diperlukan prompt di atas membuat backend back4app baru bernama “blogger” dan mengisinya dengan kelas post, comment, dan view beserta properti yang diperlukan ketika anda mengeksekusi prompt ini dengan copilot, ia akan mencatat langkah langkah yang diikutinya di jendela obrolan anda dan meminta izin anda pada setiap langkah yang memodifikasi data anda untuk hasil terbaik, eksekusi prompt ini dengan model premium seperti 03 mini atau claude sonnet 4 setelah copilot membuat kelas yang diperlukan, anda sekarang memiliki cara terstruktur untuk menyimpan data blog anda di bagian berikutnya, anda akan menerapkan otentikasi untuk aplikasi anda menerapkan otentikasi persyaratan otentikasi untuk aplikasi anda sederhana, anda perlu pengguna untuk mendaftar dan masuk agar dapat membuat posting blog dan mengomentari posting blog namun, mereka dapat membaca posting blog di aplikasi anda tanpa harus terautentikasi anda dapat menerapkan persyaratan otentikasi untuk aplikasi anda menggunakan prompt di bawah ini tambahkan otentikasi pengguna ke blogger dengan memperluas kelas pengguna bawaan setiap akun harus menyediakan `username`, `password` yang panjangnya setidaknya delapan karakter, dan alamat `email` sebelum setiap penyimpanan, cloud code mengubah email menjadi huruf kecil, kemudian memeriksa bahwa tidak ada akun lain yang sudah menggunakannya; jika alamat tersebut sudah digunakan, penyimpanan ditolak pemicu yang sama juga menegakkan aturan panjang kata sandi ekspos empat fungsi cloud ke frontend \ signup menerima username, email, dan password ini membuat 	pengguna mengembalikan catatan baru, dan menyertakan token sesi sehingga pemanggil langsung terautentikasi \ login mengambil baik username atau email ditambah password dan, pada 	sukses, mengembalikan objek pengguna dan token \ logout membatalkan token sesi saat ini prompt di atas menambahkan otentikasi pengguna ke aplikasi anda logika otentikasi memungkinkan pengguna anda untuk membuat akun menggunakan email, username, dan password setelah mendaftar, pengguna secara otomatis masuk, dan ketika pengguna keluar, sesi mereka saat ini dibatalkan setelah copilot menerapkan logika otentikasi anda, pengguna anda akan memiliki cara yang aman untuk mendaftar dan masuk di bagian berikutnya, anda akan menerapkan logika yang diperlukan untuk membuat posting dan komentar membuat posting dan komentar untuk menerapkan fitur membuat posting dan komentar, anda harus membuat dua fungsi cloud dan hook pendukung yang memungkinkan pengguna yang terautentikasi menerbitkan posting dan menambahkan komentar dalam satu alur yang terintegrasi mulailah dengan membuat hook pendukung dengan memberi copilot prompt di bawah ini atau yang serupa perluas aplikasi blogger dengan menambahkan hook post beforesave yang mengubah setiap judul posting baru menjadi slug yang ramah url (huruf kecil, spasi diganti dengan tanda hubung, dan simbol dihapus) kemudian memeriksa kelas post untuk memastikan slug tersebut unik ketika posting sedang dibuat, hook juga mengatur `status` ke `"published"` dan mencatat tanggal saat ini di `publishedat` lampirkan hook comment aftersave yang, segera setelah komentar disimpan, meningkatkan `commentcount` posting induk sehingga total tetap akurat tanpa kueri tambahan prompt di atas mengimplementasikan pemeriksaan/tindakan yang dilakukan sebelum sebuah pos atau komentar dibuat untuk pos, slug unik dihasilkan menggunakan judulnya kemudian status diubah menjadi diterbitkan, dan tanggal saat ini diatur sebagai tanggal publikasi untuk komentar, pos yang terhubung hanya memperbarui jumlah komentarnya sekarang, buat fungsi cloud yang terkait dengan hook beforesave di atas menggunakan prompt di bawah ini atau yang serupa ekspos dua fungsi cloud untuk frontend yang pertama, createpost, menerima `title`, `body`, dan `heroimage` opsional, mengharuskan pemanggil untuk masuk, menetapkan pemanggil sebagai `author`, melampirkan gambar jika disediakan, menyimpan pos, dan mengembalikan objek yang disimpan yang kedua, addcomment , memerlukan otentikasi, mengambil `postid` dan `content`, mengonfirmasi bahwa pos tersebut ada, membuat komentar yang terhubung dengan pos dan pemanggil, menyimpannya, dan mengembalikan komentar baru untuk mencegah penyalahgunaan, batasi setiap pengguna yang terautentikasi hingga lima panggilan ke createpost dan lima belas panggilan ke addcomment per menit prompt di atas mengekspos dua fungsi kode cloud yang memungkinkan pengguna anda untuk membuat pos dan komentar ini juga melindungi aplikasi anda dari penyalahgunaan dengan membatasi hingga 5 pembuatan pos dan 15 komentar per menit logika utama yang terkait dengan pembuatan pos dan komentar telah diimplementasikan dalam hook beforesave yang dibuat dalam prompt sebelumnya; yang ini hanya mengekspos api untuk dikonsumsi frontend setelah copilot mengimplementasikan logika di atas, pengguna anda akan memiliki cara untuk membuat dan mengomentari pos di bagian berikutnya, anda akan mengimplementasikan logika yang diperlukan untuk memperbarui komentar dan pos tersebut, dan juga logika yang diperlukan untuk menghitung tampilan pada setiap pos blog memperbarui pos, komentar, dan tampilan untuk mengimplementasikan fungsionalitas yang memungkinkan pengguna untuk mengedit pos mereka, merevisi komentar mereka sendiri, dan mendaftarkan tampilan halaman, anda memerlukan dua fungsi cloud updatepost, updatecomment, dan aftertrigger anda dapat mengimplementasikan fungsi cloud updatepost menggunakan prompt di bawah ini atau yang serupa implementasikan fungsi cloud, updatepost, yang mengharuskan pemanggil untuk masuk dan memverifikasi bahwa penulis pos cocok dengan request user terima objectid pos bersama dengan judul baru, body, atau heroimage pengganti abaikan atau tolak setiap upaya untuk menyediakan field status; setelah pos diterbitkan, statusnya tidak dapat diubah melalui rute ini setelah memuat pos dan mengonfirmasi kepemilikan, terapkan pembaruan yang diizinkan dan simpan jika judul berubah, bergantung pada hook post beforesave yang ada untuk membangun slug unik kembalikan pos yang diperbarui kepada pemanggil prompt di atas membuat fungsi yang memperbarui pos ini memastikan bahwa pembaruan hanya dapat dilakukan oleh pengguna yang membuat pos dan menghasilkan kembali slug jika judul diubah anda dapat mengimplementasikan fungsi cloud updatecomment menggunakan prompt di bawah ini atau yang serupa implementasikan fungsi cloud, updatecomment, yang memerlukan autentikasi, terima objectid komentar dan konten yang direvisi, kemudian ambil komentar dan konfirmasi bahwa pemanggil adalah penulisnya terapkan konten baru dan simpan; hook comment aftersave secara otomatis membiarkan commentcount tidak berubah karena komentar sudah ada kembalikan komentar yang diedit prompt di atas membuat fungsi yang memperbarui komentar sebuah pos pembaruan hanya dapat dilakukan oleh pencipta komentar anda dapat mengimplementasikan fungsi cloud recordview menggunakan prompt di bawah ini atau yang serupa tambahkan trigger afterfind pada kelas post sehingga setiap kali backend mengembalikan satu pos berdasarkan `objectid`, secara otomatis mencatat tampilan halaman jika kueri adalah feed atau pencarian yang mengembalikan beberapa pos, trigger keluar tanpa melakukan apa apa di dalam trigger, ambil pos dari `request results\[0]`, buat objek view baru, atur pointer `post` ke pos tersebut, dan, ketika tersedia, atur pointer `viewer` ke `request user`, simpan tampilan, panggil `post increment("viewcount")`, simpan pos, dan kembalikan `request results` untuk menyelesaikan kueri asli prompt di atas membuat trigger afterfind pada kelas post setiap kali backend mengembalikan satu pos (diambil berdasarkan objectid nya), trigger secara otomatis membuat catatan view baru yang menunjuk ke pos tersebut (dan pengguna saat ini, jika masuk) dan meningkatkan viewcount pos jika kueri mengembalikan beberapa pos, trigger tidak melakukan apa apa dengan ini, sebagian besar fungsionalitas blog anda sudah lengkap selanjutnya, anda akan mengimplementasikan fungsionalitas yang memungkinkan pengguna anda menghapus pos mereka menghapus pos untuk menghapus pos, seorang pengguna haruslah orang yang membuatnya setelah pos dihapus, semua konten terkaitnya (tampilan, komentar) dihapus bersamanya anda dapat mengimplementasikan fungsionalitas untuk menghapus pos menggunakan prompt di bawah ini atau yang serupa buat fungsi cloud deletepost sehingga penulis dapat menghapus karya mereka sendiri pemanggil harus masuk dan harus melewatkan objectid pos mulailah dengan mengambil pos dan mengonfirmasi bahwa penulisnya sama dengan request user; jika tidak, tolak permintaan tersebut setelah kepemilikan diverifikasi, hapus catatan pos, kemudian hapus semua komentar dan tampilan terkait yang pointer posnya cocok dengan pos yang dihapus akhirnya, kembalikan pesan sukses singkat bersama dengan jumlah catatan yang dihapus prompt di atas mengimplementasikan logika yang diperlukan untuk menghapus pos dengan tambahan ini, backend anda sekarang mencakup siklus hidup konten penuh, memungkinkan penulis untuk menerbitkan, merevisi, dan menghapus, memungkinkan pembaca untuk berdiskusi, dan menjaga statistik tampilan yang akurat untuk setiap pos di bagian berikutnya, anda akan menghasilkan ui untuk aplikasi anda menghasilkan frontend anda anda dapat memanfaatkan konteks yang dimiliki copilot 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 menggunakan prompt di bawah ini hasilkan frontend minimal yang sesuai dengan skema dan menerapkan semua fungsionalitas aplikasi blog di akun back4app saya dan hubungkan frontend ke backend menggunakan sdk parse javascript dengan menggunakan prompt di atas atau yang serupa, copilot akan menghasilkan frontend yang sesuai dengan skema backend anda dan menghubungkannya ke backend anda jalankan aplikasi menggunakan instruksi yang diberikan oleh copilot dan lakukan penyesuaian yang anda inginkan sekarang proyek anda sudah lengkap, di bagian berikutnya, 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 hasilkan file docker untuk ui aplikasi blog saya atau anda bisa menggunakan dockerfile yang disediakan di bawah ini \# mulai dari gambar nginx alpine resmi yang ringan from nginx\ alpine \# hapus konten default run rm rf /usr/share/nginx/html/ \# salin situs statis anda (html, css, aset) ke dalam kontainer copy /usr/share/nginx/html/ \# ekspos port 80 expose 80 \# mulai nginx di latar depan cmd \["nginx", " g", "daemon off;"] setelah menambahkan dockerfile dan mendorongnya ke github, navigasikan ke dasbor aplikasi back4app anda, klik dasbor dropdown, dan pilih platform penyebaran web opsi 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 deploy mengklik tombol tersebut memulai proses penyebaran, dan setelah selesai, anda akan mendapatkan url langsung ke aplikasi anda dapat melihat blog langsung yang dibangun dalam tutorial ini menggunakan https //blogger 6rhmkal0 b4a run/ kesimpulan dalam artikel ini, anda membangun platform blogging lengkap menggunakan server back4app mcp dan github copilot, 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 integrasi media sosial, notifikasi email otomatis untuk komentar baru, fungsionalitas pencarian lanjutan, atau analitik tentang keterlibatan pos dan perilaku pembaca semua peningkatan ini cocok secara alami ke dalam alur kerja back4app yang sama merancang dan mendefinisikan kelas baru atau cloud functions dengan github copilot, mengamankannya dengan hooks beforesave, dan meluncurkan pembaruan melalui back4app containers pendekatan ini memungkinkan anda menambahkan fitur baru ke blog anda tanpa mengganggu pengguna