Bagaimana cara membangun dan menggunakan aplikasi Nuxt?
Nuxt.js adalah kerangka kerja sumber terbuka yang dibuat di atas Vue.js, Nitro, dan Vite, yang memungkinkan Anda mengembangkan aplikasi web.
Terinspirasi oleh Next.js (kerangka kerja React untuk Server Side Rendering), Nuxt.js memungkinkan para pengembang untuk membuat aplikasi web yang cepat dengan menerapkan mode rendering yang berbeda.
Dirilis pada tahun 2016, Nuxt.js telah mendapatkan penerimaan yang luas di antara para pengembang karena filosofi yang ramah-pengembang dan fitur-fiturnya yang kaya.
Contents
- 1 Keuntungan dari Nuxt.js
- 2 Keterbatasan Nuxt.js
- 3 Membangun dan Menerapkan Aplikasi Nuxt.js di Back4app
- 4 Membuat Backend untuk Aplikasi Nuxt.js Anda
- 5 Membuat Kode Cloud
- 6 Membangun Ujung Depan Aplikasi Anda
- 7 Menghubungkan Bagian Depan dan Bagian Belakang Aplikasi Anda
- 8 Menerapkan Aplikasi Web yang Dibangun Sepenuhnya
- 9 Kesimpulan
Keuntungan dari Nuxt.js
Nuxt.js menawarkan beberapa keunggulan yang membuatnya menjadi pilihan menarik untuk pengembangan Vue.js:
Rendering Universal
Nuxt.js mengontrol bagaimana aplikasi web Anda ditampilkan di sisi pengguna. Dimulai dengan merender halaman awal di server, membuatnya sangat cepat dimuat, terutama untuk orang-orang dengan koneksi internet yang lebih lambat.
Hal ini membantu mesin pencari merayapi situs web Anda dengan lebih cepat, sehingga menghasilkan SEO yang lebih baik.
Nuxt.js kemudian dengan lancar beralih ke rendering sisi klien (SPA) untuk menavigasi antar halaman dalam aplikasi Anda. Hal ini membuat semuanya tetap cepat dan responsif, seperti yang Anda harapkan dari situs web modern.
Performa yang Dioptimalkan Melalui Hidrasi dan Pemisahan Kode
Nuxt 3 memungkinkan hidrasi selektif, yang berarti bahwa segmen-segmen state aplikasi dihidrasi di sisi klien untuk pemuatan halaman pertama yang lebih cepat dan pengalaman pengguna yang lebih baik, yang sangat berguna untuk aplikasi dengan state tree yang sangat besar dan banyak bagian.
Sama halnya dengan Next.js, Nuxt membagi berkas secara otomatis menjadi bundel yang lebih kecil tergantung pada rutenya.
Dengan cara ini, browser hanya memerlukan kode yang terkait dengan tampilan saat ini dari server, sehingga secara signifikan mengurangi waktu muat halaman pengguna.
Ini berarti lebih sedikit sumber daya bandwidth yang digunakan dan pengalaman pengguna yang lebih baik.
Perutean bawaan
Nuxt.js, secara default, menangani rute melalui perutean berbasis file, menyederhanakan navigasi dan manajemen rute di dalam aplikasi Anda.
Anda juga dapat memilih untuk mengonfigurasi rute Anda secara dinamis untuk skenario perutean yang lebih kompleks.
Rute API
Nuxt.js memungkinkan Anda melewatkan pengaturan server terpisah untuk tugas-tugas sederhana! Nuxt.js memiliki pintasan bawaan yang disebut rute API.
Rute API dapat menangani pengambilan data selama rendering sisi server, mendukung RESTful dan GraphQL API. Hal ini membuat aplikasi Anda terasa cepat dan membantu mesin pencari memahami konten aplikasi Anda dengan lebih baik.
Keterbatasan Nuxt.js
Meskipun Nuxt.js menawarkan pengalaman pengembangan yang kuat, berikut ini beberapa batasan yang perlu dipertimbangkan:
Kurva Pembelajaran
Nuxt.js memperkenalkan konsep yang berbeda dari pengembangan Vue.js tradisional. Menjadi baru dalam menggunakan Nuxt.js membutuhkan waktu untuk beradaptasi dengan arsitektur dan fitur-fitur spesifiknya.
Nuxt juga menawarkan ekosistem alat, pustaka, dan plugin yang sangat luas. Membiasakan diri Anda dengan opsi-opsi ini dapat menambah kurva pembelajaran awal.
Ekosistem Terbatas
Tidak seperti framework besar lainnya seperti React dan Angular, Nuxt masih relatif muda. Sebagai hasilnya, ekosistem library dan plugin pihak ketiga masih terus berkembang.
Anda perlu membuat solusi khusus untuk memenuhi persyaratan tertentu dalam situasi tertentu.
Kompleksitas dalam Rendering Sisi Server
Meskipun server-side rendering (SSR) adalah fitur yang kuat di Nuxt.js, fitur ini dapat membuat pengembangan aplikasi menjadi lebih kompleks. Dibandingkan dengan metode rendering yang lebih mudah, SSR memiliki kurva pembelajaran yang lebih curam.
Selain itu, menerapkan SSR secara efektif membutuhkan perencanaan dan pengelolaan yang cermat dalam hal pengambilan data dan status aplikasi.
Hal ini dapat menyebabkan potensi kesalahan atau ketidakkonsistenan antara konten yang awalnya dirender di server dan versi interaktif akhir yang dirender di klien.
Membangun dan Menerapkan Aplikasi Nuxt.js di Back4app
Kami akan membangun aplikasi manajemen kontak untuk memahami lebih baik bagaimana membangun dan menggunakan aplikasi Nuxt dengan Back4App.
Aplikasi ini memungkinkan pengguna untuk membuat, melihat, dan menghapus informasi kontak mereka, menjaga buku kontak jaringan mereka tetap teratur dan mudah diakses.
Untuk backend proyek ini, kita akan menggunakan database PostgreSQL bawaan Back4app untuk menyimpan informasi kontak seperti nama, email, nomor telepon, dan perusahaan.
Proses ini akan menjadi lebih mudah dengan bantuan Agen AI Back4App.
Untuk bagian depan proyek, kita akan menggunakan Nuxt.js untuk membuat UI aplikasi. Kemudian, kita akan menghubungkan front end dan back end menggunakan Parse SDK sebelum menggunakan front end Nuxt dengan Back4App Containers.
Mari kita mulai.
Membuat Backend untuk Aplikasi Nuxt.js Anda
Langkah pertama untuk membuat aplikasi Nuxt adalah menyiapkan backend.
Untuk mulai membuat back end untuk aplikasi Kontak Anda, buka situs web Back4App, masuk, dan buat aplikasi baru dengan mengeklik “Buat Aplikasi Baru.”
Pilih opsi “Backend as a Service“, yang akan Anda lihat setelah membuat aplikasi baru, seperti yang ditunjukkan pada gambar di bawah ini.
Beri nama aplikasi Anda dan pilih opsi PostgreSQL, yang akan kita gunakan untuk database.
Setelah mengklik tombol “BUAT“, Back4app akan membutuhkan sedikit waktu untuk mengatur aplikasi Anda, termasuk database.
Setelah semuanya siap, Anda akan secara otomatis diarahkan ke aplikasi Anda, seperti yang ditunjukkan pada gambar di bawah ini.
Untuk menyusun desain basis data PostgreSQL yang akan Anda gunakan untuk aplikasi, navigasikan ke Agen AI Back4app dan ketik perintah berikut.
Create database tables in my Back4app app; do you need me to provide any information?
Untuk menyiapkan basis data Anda, Agen AI akan membuat daftar hal-hal yang dibutuhkannya. Daftar ini akan mencakup detail seperti kunci unik untuk aplikasi Anda dan bagaimana data Anda terstruktur (skema).
Setelah memberikan kunci aplikasi Anda kepada Agen AI, berikan skema basis data Anda kepada Agen AI. Skema ini harus serupa dengan yang ada di bawah ini untuk aplikasi kontak yang sedang kita buat:
1. Contact Class:
Class Name: Contact
Fields:
objectId (String, Automatically generated by Back4App).
name (String, Required)
email (String, Required)
phone (String, Required)
address (String, Required)
company (String, Optional)
Setelah memberikan informasi di atas kepada agen, Anda dapat mengonfirmasi dengan menavigasi basis data untuk melihat apakah kelas kontak dan bidang terkait telah dibuat.
Selanjutnya, minta agen AI untuk mengisi basis data Anda dengan data uji menggunakan perintah di bawah ini.
Populate my contact database with some test data with around 10 test contacts with variations in their information.
Sekarang, Anda memiliki data uji untuk digunakan.
Membuat Kode Cloud
Fitur Cloud Code Back4App memungkinkan Anda untuk menjalankan kode JavaScript kustom langsung di server Back4App.
Fitur ini membantu Anda mengurangi beban pemrosesan pada aplikasi seluler atau situs web Anda. Fitur ini juga membantu melindungi data dan aplikasi Anda dari kerentanan keamanan karena kode cloud dijalankan di server Back4App yang aman.
Sekarang Anda memiliki basis data uji coba yang terisi dengan kontak, saatnya untuk mengimplementasikan fitur-fitur untuk sistem manajemen kontak Anda.
Pada bagian ini, Anda akan mempelajari cara membuat kode cloud untuk mengimplementasikan fitur-fitur tertentu untuk aplikasi Anda, seperti:
- Melihat Semua Kontak
- Membuat Kontak Baru
- Menghapus Kontak
Anda akan mengimplementasikan fitur-fitur ini dengan Agen AI Back4App. Mari kita mulai.
Untuk mengambil semua buku dari perpustakaan, berikan agen AI Back4App perintah berikut untuk menghasilkan kode cloud yang diperlukan.
Develop a cloud code function named "getContacts" to retrieve all contacts
from the database. The function should return an array containing objects
representing a contact instance with its associated keys and values.
Selanjutnya, Anda juga akan menugaskan Agen AI Back4App untuk membuat kontak baru dengan memberikan perintah berikut:
Generate a cloud code function named “createContact” that takes in the necessary arguments to create a new contact in the Contact class.
Terakhir, Anda juga akan memberikan Agen AI Back4App dengan perintah berikut untuk membuat fungsi untuk menghapus kontak dari database.
Create a cloud code function "deleteContact" that deletes a contact from the Contact class based on the provided "objectId." If the deletion is successful, return a message indicating success. If there's an error, return an error message.
Untuk memeriksa apakah Agen telah menghasilkan fungsi cloud Anda dengan benar, tinjau file main.js yang terletak di bagian akhir jalur navigasi ini.
Dasbor Back4app → Kode Cloud → Fungsi & Hosting Web → cloud → main.js.
Anda akan melihat tiga fungsi yang Anda definisikan di file main.js yang sama untuk memastikan fungsi cloud Anda dibuat dengan benar.
Membangun Ujung Depan Aplikasi Anda
Kita akan membuat front-end untuk berinteraksi dengan semua fungsi kode cloud yang kita buat. Kita akan membuat front-end dengan Nuxt.js.
Untuk memulai pengembangan front end, jalankan kode berikut ini secara serial di terminal direktori pilihan Anda:
npx nuxi init b4a_nuxt_app
cd b4a_nuxt_app
npm installBaris kode ini akan menginisialisasi aplikasi Nuxt dengan b4a_nuxt_app sebagai namanya, dan kemudian semua paket dan dependensi yang diperlukan akan diinstal agar aplikasi Anda berfungsi dengan benar.
Setelah menjalankan perintah di atas di terminal Anda, Anda menginstal beberapa paket npm untuk membantu menata aplikasi Anda. Jalankan perintah npm berikut ini secara serial di terminal Anda untuk menginstal paket-paket ini:
npm install sass
npm install -D tailwindcss postcss autoprefixer
Baris kode di atas akan menginstal SASS, sebuah preprocessor CSS, dan TailwindCSS, sebuah kerangka kerja CSS utilitas. Anda akan menggunakan paket-paket ini untuk menata aplikasi Anda dengan cepat.
Selanjutnya, Anda akan mengonfigurasi TailwindCSS di aplikasi Anda dengan menjalankan perintah berikut:
npx tailwindcss init
Kode di atas membuat file tailwind.config.js di direktori root aplikasi Nuxt Anda.
File tailwind.config.js ini adalah titik konfigurasi utama untuk integrasi Tailwind CSS Anda dalam Nuxt.js. File ini memungkinkan Anda untuk menyesuaikan berbagai aspek Tailwind CSS agar sesuai dengan kebutuhan proyek Anda.
Buka aplikasi Anda di editor teks pilihan Anda (VSCode, Eclipse, Sublime Text). Arahkan ke file tailwind.config.js dan strukturkan agar terlihat seperti blok kode di bawah ini:
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./components/**/*.{js,vue,ts}",
"./layouts/**/*.vue",
"./pages/**/*.vue",
"./plugins/**/*.{js,ts}",
"./app.vue",
"./error.vue",
],
theme: {
extend: {},
},
plugins: [],
};
Larik konten pada blok kode di atas menampung jalur file yang akan dipantau oleh Tailwind CSS untuk menghasilkan kelas utilitasnya.
Selanjutnya, buat folder aset di direktori root aplikasi Anda. Di dalam folder tersebut, buat berkas main.scss untuk menambahkan gaya ke aplikasi Anda. Rekatkan kode di bawah ini ke dalam berkas main.scss:
/* main.scss */
@import url("<https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap>");
@import url("<https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap>");
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
background-color: #f2f2f2;
}
.montserrat {
font-family: "Montserrat", sans-serif;
}
.roboto {
font-family: "Roboto", sans-serif;
}
Blok kode di atas mengimpor dua Font Google yang berbeda, mengintegrasikan Tailwind CSS untuk elemen gaya, menetapkan warna latar belakang abu-abu muda untuk aplikasi web Anda, dan mendefinisikan kelas khusus untuk menerapkan font yang diimpor secara efisien.
File main.scss ini menyediakan dasar yang kuat untuk membangun gaya visual aplikasi web Anda.
Dalam berkas nuxt.config.ts Anda, yang menyimpan konfigurasi untuk aplikasi Nuxt, tempelkan kode berikut di bawah ini:
// nuxt.config.ts
export default defineNuxtConfig({
devtools: { enabled: true },
postcss: {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
},
css: ["~/assets/main.scss"],
ssr: false,
});
Dalam berkas konfigurasi Nuxt Anda, Anda mendefinisikan berkas main.scss sebagai satu-satunya berkas CSS yang akan digunakan oleh aplikasi Nuxt Anda. Anda juga menonaktifkan Server Side Rendering untuk aplikasi Nuxt Anda.
Karena Nuxt menangani perutean secara otomatis melalui sistem perutean berbasis berkas dan kita telah selesai mengonfigurasi aplikasinya, kita bisa menuju ke pembuatan halaman web yang berbeda.
Untuk membangun antarmuka pengguna untuk aplikasi ini, kita akan membuat tiga halaman di dalam folder pages di root proyek. Halaman-halaman ini akan menjadi:
index.vue: Ini adalah halaman beranda, memperkenalkan tujuan aplikasi.contactForm.vue: Halaman ini memungkinkan pengguna untuk membuat dan menyimpan kontak baru ke database.contactsList.vue: Halaman ini berisi daftar semua kontak yang tersimpan dalam database.
Sekarang, di file index.vue Anda, tempelkan kode berikut:
// index.vue
<template>
<div class="welcome montserrat flex flex-col gap-8 items-center mt-10">
<h1 class="text-4xl">Welcome to {{ appName }}!</h1>
<p class="text-[#888888] font-md text-md w-1/2">
This application helps you manage your contacts. You can view existing
contacts, add new ones, and keep your contact information organized.
</p>
<NuxtLink to="/contactForm">
<button
class="px-4 py-2 hover:bg-[#333333] hover:text-white rounded-lg font-medium"
>
Add Contact
</button>
</NuxtLink>
</div>
</template>
<script setup>
const appName = "Contact Book";
</script>
<style scoped>
.welcome {
text-align: center;
padding: 2rem;
}
</style>
Blok kode ini membuat halaman selamat datang untuk aplikasi manajemen kontak Anda.
Ini menampilkan judul, deskripsi tujuan aplikasi, dan tombol untuk menavigasi ke halaman formulir kontak. Blok kode juga mendefinisikan kelas-kelas TailWind untuk menata aplikasi.
Selain itu, di file contactForm.vue Anda, tempelkan kode berikut:
<template>
<div>
<p class="montserrat text-2xl font-medium text-center">
Fill the form below to create a contact
</p>
<form
@submit.prevent="createContact"
class="flex flex-col gap-8 items-center mt-10"
>
<input
v-model="contact.name"
type="text"
placeholder="Name"
required
class="w-1/2 p-3 hover:shadow-lg outline-none montserrat"
/>
<input
v-model="contact.email"
type="email"
placeholder="Email"
required
class="w-1/2 p-3 hover:shadow-lg outline-none montserrat"
/>
<input
v-model="contact.phone"
type="tel"
placeholder="Phone"
required
class="w-1/2 p-3 hover:shadow-lg outline-none montserrat"
/>
<input
v-model="contact.address"
type="text"
placeholder="Address"
required
class="w-1/2 p-3 hover:shadow-lg outline-none montserrat"
/>
<input
v-model="contact.company"
type="text"
placeholder="Company"
class="w-1/2 p-3 hover:shadow-lg outline-none montserrat"
/>
<div>
<button
class="px-4 py-2 hover:bg-[#333333] hover:text-white rounded-lg font-medium"
type="submit"
>
Submit
</button>
</div>
<p v-if="message" :class="{ error: isError }">{{ message }}</p>
</form>
</div>
</template>
<script setup>
import { ref } from "vue";
const contact = ref({
name: "",
email: "",
phone: "",
address: "",
company: "",
});
const message = ref("");
const isError = ref(false);
</script>
<style>
.error {
color: red;
}
</style>
Blok kode di atas mendefinisikan struktur untuk formulir yang dapat digunakan pengguna aplikasi untuk membuat dan menyimpan kontak. Berikut ini adalah poin-poin pentingnya:
Elemen formulir menangkap detail kontak (nama, email, telepon, alamat, perusahaan) menggunakan berbagai bidang masukan.
Setiap bidang input dihubungkan ke properti di objek kontak(v-model) dan menggunakan jenis input yang sesuai untuk validasi.
Tombol submit akan memicu fungsi createContact, yang akan kita implementasikan di bagian selanjutnya. Area pesan juga akan menampilkan umpan balik (sukses atau gagal) berdasarkan variabel pesan dan isError.
Blok kode menggunakan ref Vue untuk membuat 3 variabel reaktif:
kontak: Menyimpan informasi kontak yang dimasukkan.pesan: Menampung pesan umpan balik untuk pengguna.isError: Mengindikasikan apakah pesan tersebut merupakan kesalahan.
Aturan gaya sederhana mendefinisikan tampilan pesan kesalahan menggunakan kelas .error di blok kode.
Selain itu, di file contactsList.vue Anda, tempelkan kode berikut:
<template>
<div class="px-8">
<p class="montserrat text-3xl font-medium mb-10">Your Contacts</p>
<div class="grid grid-cols-3 gap-5 items-center justify-center">
<div
v-for="contact in contacts"
:key="contact.objectId"
class="contact montserrat bg-[#FFFFFF] hover:shadow-lg mb-4 rounded-lg
flex flex-col gap-3 p-3 w-11/12 items-center"
>
<p class="text-lg">Name: {{ contact.name }}</p>
<p class="text-lg">Email: {{ contact.email }}</p>
<p class="text-lg">Phone: {{ contact.phone }}</p>
<p class="text-lg">Address: {{ contact.address }}</p>
<p class="text-lg">Company: {{ contact.company }}</p>
<div class="mt-5">
<button
@click="deleteContact(contact.objectId)"
class="px-4 py-2 hover:bg-[#333333] hover:text-white rounded-lg font-medium"
>
Delete
</button>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from "vue";
const contacts = ref([]);
</script>
Blok kode di atas menampilkan daftar kontak dalam aplikasi Anda. Berikut adalah poin-poin pentingnya:
Blok kode membuat bagian berjudul “Kontak Anda” dan menggunakan tata letak kisi-kisi responsif (3 kolom) untuk menampilkan kontak.
Fungsi ini mengulang larik kontak menggunakan v-for dan menyajikan informasi setiap kontak (nama, email, telepon, alamat, perusahaan).
Setiap entri kontak memiliki tombol “Hapus” yang akan memicu fungsi deleteContact, yang akan kita implementasikan nanti.
Blok kode menggunakan larik reaktif(kontak) untuk menyimpan daftar kontak. Hal ini memastikan UI diperbarui secara dinamis saat data berubah. Larik kontak akan menyimpan data yang Anda ambil dari basis data Back4app
Rekatkan kode di bawah ini di file app.vue Anda di direktori root untuk menyertakan rute ke semua halaman ini.
<template>
<div>
<NuxtLayout>
<header class="flex justify-between p-8 roboto font-light">
<NuxtLink to="/">
<p class="text-2xl">Contact Book</p>
</NuxtLink>
<nav class="flex gap-5 text-md">
<NuxtLink to="/contactsList" class="hover:text-[#888888]"
>Contacts</NuxtLink
>
<NuxtLink to="/contactForm" class="hover:text-[#888888]"
>Add Contact</NuxtLink
>
</nav>
</header>
<main>
<NuxtPage />
</main>
</NuxtLayout>
</div>
</template>
Blok kode mendefinisikan tata letak keseluruhan aplikasi Nuxt dengan komponen komponen.
Blok kode menampilkan menu navigasi horizontal dengan tautan ke contactsList.vue dan halaman contactForm.vue.
Blok kode juga menyertakan komponen komponen kunci dalam Nuxt.js yang secara dinamis merender konten halaman saat ini.
Hal ini memastikan bahwa aplikasi Anda menampilkan konten yang sesuai berdasarkan navigasi pengguna di dalam aplikasi.
Menghubungkan Bagian Depan dan Bagian Belakang Aplikasi Anda
Untuk menghubungkan aplikasi kontak Nuxt Anda ke database Back4app dan instance backend, Anda perlu menginstal Parse SDK.
Parse SDK menjembatani aplikasi front-end (antarmuka pengguna) dan backend Back4App Anda, memungkinkan Anda untuk berinteraksi dengan database Back4App dan fungsi cloud.
Untuk menginstal Parse SDK, jalankan perintah berikut ini di terminal direktori root Anda:
npm install parseSetelah instalasi, Anda perlu menginisialisasi Parse dengan mendapatkan informasi berikut:
- ID Aplikasi
- Kunci JavaScript
- URL Server Back4app
Anda bisa mendapatkan informasi ini dengan membuka Keamanan & Kunci di dasbor aplikasi Back4app Anda. Simpan ID Aplikasi dan Kunci JavaScript Anda dengan aman di aplikasi Anda.
Sekarang, ubah file app.vue Anda untuk menginisialisasi Parse di aplikasi Anda:
<template>
<!-- Previous Content -->
</template>
<script setup>
import Parse from 'parse';
// Initialize Parse SDK
Parse.initialize('YOUR_APP_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = '<https://parseapi.back4app.com>';
</script>
Selain itu, modifikasi file contactForm.vue dan contactsList.vue Anda untuk menghubungkan fungsi kode cloud Anda ke ujung depan aplikasi Anda.
Di halaman contactForm.vue Anda, tempelkan kode berikut:
<template>
<!-- Previous Content -->
</template>
<script setup>
import { ref } from 'vue';
import Parse from 'parse';
const contact = ref({
name: '',
email: '',
phone: '',
address: '',
company: '',
});
const message = ref('');
const isError = ref(false);
const createContact = async () => {
try {
await Parse.Cloud.run('createContact', { ...contact.value });
message.value = 'Contact created successfully!';
isError.value = false;
contact.value = { name: '', email: '', phone: '', address: '', company: '' };
} catch (error) {
message.value = `Error: ${error.message}`;
isError.value = true;
}
};
</script>
<style>
.error {
color: red;
}
</style>
Blok kode di atas menghubungkan fungsi kode cloud Anda untuk logika di balik pembuatan kontak baru ke aplikasi Nuxt Anda.
Ini berinteraksi dengan backend untuk menyimpan informasi kontak dan memberikan umpan balik kepada pengguna berdasarkan keberhasilan atau kegagalan operasi.
Blok kode mencoba (dengan blok try-catch) untuk menjalankan fungsi bernama createContact di server Back4App menggunakan Parse SDK(menunggu Parse.Cloud.run('createContact', {... contact.value})). Ini akan mengirimkan informasi kontak(contact.value) ke server Back4App untuk disimpan.
Setelah penyimpanan berhasil, pesan “Kontak berhasil dibuat!” akan muncul, dan formulir akan dikosongkan, mengatur ulang objek kontak dan mengizinkan entri baru.
Namun, jika terjadi kesalahan, pesan kesalahan yang informatif akan ditampilkan, termasuk rincian dari server dengan template literal(${error.message}).
Rekatkan kode berikut di file contactsList.vue Anda:
<template>
<!-- Previous Content -->
</template>
<script setup>
import { ref, onMounted } from "vue";
import Parse from "parse";
const contacts = ref([]);
const fetchContacts = async () => {
try {
contacts.value = await Parse.Cloud.run("getContacts");
} catch (error) {
console.error("Failed to fetch contacts", error);
}
};
const deleteContact = async (objectId) => {
try {
await Parse.Cloud.run("deleteContact", { objectId });
contacts.value = contacts.value.filter(
(contact) => contact.objectId !== objectId,
);
} catch (error) {
console.error("Failed to delete contact", error);
}
};
onMounted(fetchContacts);
</script>
Kode di atas mengelola pengambilan dan penghapusan kontak untuk aplikasi Anda. Kode ini berinteraksi dengan Backend Back4App untuk menangani penyimpanan dan pengambilan data.
Blok kode mendefinisikan dua fungsi penting:
fetchContacts: Fungsi asinkron ini mengambil daftar kontak dari backend. Fungsi ini menggunakanParse.Cloud.run('getContacts'), memanggil fungsi kode cloud “getContacts” pada server Back4App Anda. Kontak yang diambil disimpan dalam larik reaktif bernamakontak.
hapusKontak: Fungsi asinkron ini menangani penghapusan kontak tertentu. Fungsi ini membutuhkanobjectIdsebagai argumen, sebuah pengenal unik untuk kontak dalam database backend. Fungsi ini menggunakanParse.Cloud.run('deleteContact', { objectId })untuk memanggil fungsi kode cloud bernama “deleteContact,” yang meneruskanobjectIdyang akan dihapus. Jika berhasil, kode akan menyaring larikkontaklokal untuk menghapus kontak yang dihapus.
Setelah Anda selesai menghubungkan bagian depan dan belakang aplikasi, Anda dapat melihat pratinjau aplikasi dengan menjalankan perintah npm di bawah ini.
npm run devAnda akan melihat server Nuxt Nitro sedang dimuat. Setelah dimuat, aplikasi akan tersedia di URL http://localhost:3000/. Anda akan melihat layar yang mirip dengan gambar di bawah ini ketika menavigasi ke URL tersebut.
Menavigasi ke Halaman Kontak, Anda akan melihat serangkaian kontak. Kontak-kontak ini adalah data tiruan yang dibuat oleh Agen AI Back4app untuk Anda selama pembuatan backend Back4app.
Dengan mengeklik tautan Tambah Kontak, Anda akan melihat formulir untuk memasukkan detail kontak baru. Sebagai contoh:
Anda harus melihat kolom-kolom tersebut dengan jelas dengan mengklik tombol “Kirim”. Menavigasi ke halaman Kontak, Anda akan melihat kontak yang baru dibuat.
Menerapkan Aplikasi Web yang Dibangun Sepenuhnya
Di bawah ini adalah langkah-langkah untuk menerapkan aplikasi Nuxt. Setelah Anda selesai membangun dan menguji aplikasi, Anda kemudian dapat menggunakan aplikasi Nuxt menggunakan kontainer Back4app untuk membuat aplikasi Anda menjadi publik.
Untuk mempercepat proses penyebaran, minta Agen AI Back4app dengan instruksi berikut:
Give me simplified steps to deploy my Nuxt application with Back4app containers
Anda akan melihat langkah-langkah yang serupa dengan yang diuraikan di bawah ini.
Containerize Your Application (Create a Dockerfile)
Build and Push Docker Image
Configure Deployment
Deploy Your ContainerUntuk mendokumentasi aplikasi Anda, buat berkas Dockerfile dan berkas .dockerignore di direktori root, lalu tempelkan skrip berikut ini di bawah.
Di dalam Dockerfile:
FROM node:18
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
RUN npm run build
CMD [ "npm", "run", "start" ]
Juga, dalam file .dockerignore:
node_modules
.nuxt
Dockerfile berisi instruksi untuk membangun citra Docker. Dockerfile mencakup langkah-langkah instalasi untuk ketergantungan aplikasi yang diperlukan.
File .dockerignore adalah file teks sederhana yang berisi daftar pola untuk menginstruksikan Docker tentang file dan folder apa yang akan dikecualikan saat membangun citra.
Sekarang, untuk membangun citra docker aplikasi Anda, jalankan perintah docker berikut ini di terminal Anda:
docker build -t b4a_contacts_app .
Pastikan Anda mendorong aplikasi Anda ke akun GitHub Anda sebelum mencoba menerapkan aplikasi di Back4app. Setelah Anda mendorong aplikasi, integrasikan akun GitHub Anda dengan Back4app.
Anda dapat melakukan ini dengan aplikasi Github Back4app. Setelah mengintegrasikan GitHub Anda dengan Back4app, Anda sekarang dapat menggunakan aplikasi Anda.
Navigasikan ke halaman Kontainer dari dasbor Back4app Anda.
Kemudian, klik tombol “Buat Aplikasi Baru” pada layar. Anda kemudian akan memilih repositori yang ingin Anda terapkan, memberinya nama b4a_contacts_app, dan membuat aplikasi. Perlu waktu untuk menyelesaikan penerapan.
Setelah penerapan, aplikasi live Anda akan tersedia di URL ini, https://b4acontactsapp1-5990olnw.b4a.run/.
Kesimpulan
Pada artikel ini, Anda telah mempelajari cara membuat dan menggunakan aplikasi Nuxt.js dengan database PostgreSQL, semuanya dalam ekosistem Back4app.
Anda juga telah mempelajari kelebihan dan kekurangan dalam membangun aplikasi web dengan Nuxt.js.
Mulai dari membangun fungsi cloud-code dan mendesain database dengan AI Agent Back4App hingga memahami backend Back4App yang low-code dan antarmuka yang mudah digunakan.
Anda juga menggunakan aplikasi Nuxt dengan Back4App Containers dan menjadi terbiasa dengan berbagai alat yang disediakan Back4App untuk merampingkan pengembangan aplikasi.
Dengan kombinasi alat bantu ini, Anda sudah siap untuk membangun dan menerapkan aplikasi web dengan cepat.
Anda dapat mempelajari lebih lanjut tentang cara kerja Agen AI untuk membiasakan diri dalam merampingkan pengembangan aplikasi Anda.
