Bagaimana cara membangun backend Astro.js?

Astro.js adalah generator situs statis (SSG) dan kerangka kerja frontend untuk membangun aplikasi web yang cepat dan modern.

Ini memungkinkan Anda untuk membuat situs web yang cepat dan ringan dengan pra-rendering file HTML, CSS, dan JavaScript statis pada waktu pembuatan.

Tidak seperti SSG tradisional, Astro.js juga memungkinkan Anda untuk menghidrasi halaman statis Anda dengan JavaScript pada saat runtime, memberikan Anda fleksibilitas untuk membuat situs web yang dinamis dan interaktif.

Artikel ini memberikan tutorial lengkap tentang cara membuat aplikasi Astro.js menggunakan Back4app sebagai Backend as a Service (BaaS).

Tutorial ini akan memberikan gambaran umum tentang Astro.js, kelebihan dan keterbatasannya, dan panduan langkah demi langkah tentang cara membuat dan meng-host aplikasi Astro.js.

Keuntungan dari Astro.js

Astro.js didukung oleh beberapa fitur utama yang menjadikannya pilihan tepat untuk membangun situs web modern, termasuk:

Arsitektur Pulau

Arsitektur pulau adalah pola arsitektur web yang melibatkan pemecahan halaman web menjadi beberapa pulau fungsionalitas yang dienkapsulasi dan independen.

Setiap pulau dapat diwakili oleh satu komponen, sekelompok komponen, atau bahkan seluruh halaman.

Astro.js mengekstrak antarmuka pengguna (UI) Anda menjadi komponen-komponen yang lebih kecil dan terisolasi yang dikenal sebagai “Astro Islands”. Anda dapat menggunakan pulau-pulau ini di halaman mana pun, dengan demikian, mengganti JavaScript yang tidak digunakan dengan HTML yang ringan.

Arsitektur pulau memiliki beberapa keunggulan, termasuk peningkatan kinerja, peningkatan fleksibilitas, dan pengembangan yang disederhanakan.

JavaScript minimal

Astro mengambil pendekatan “lebih sedikit JavaScript”. Ia hanya mengirimkan JavaScript ke klien ketika diperlukan untuk interaktivitas. Hal ini membantu mengurangi ukuran berkas JavaScript dan meningkatkan waktu muat.

JavaScript minimal di Astro.js menawarkan beberapa manfaat nyata, termasuk peningkatan kinerja situs web, SEO yang lebih baik, konsumsi sumber daya yang lebih sedikit, keamanan yang lebih baik, dan pengalaman pengguna yang lebih responsif.

Pendekatan ini selaras untuk menghadirkan aplikasi web yang efisien dan berkinerja tinggi, menjadikan Astro.js pilihan yang menarik untuk pengembangan web modern.

Integrasi dengan kerangka kerja populer

Anda dapat menggunakan Astro.js dengan berbagai kerangka kerja JavaScript populer, termasuk React, Svelte, Vue, dan Lit.

Hal ini memungkinkan Anda untuk memilih alat yang Anda sukai, menggunakan kembali komponen dan pengetahuan yang sudah ada, memanfaatkan ekosistem yang sudah mapan, dan mempertahankan proses pengembangan yang lancar.

Fleksibilitas dan kompatibilitas ini membuat Astro.js menjadi pilihan yang menarik untuk berbagai proyek.

Pemuatan yang Dioptimalkan

Pemuatan yang dioptimalkan adalah keunggulan utama Astro.js. Ini secara fundamental mengubah cara halaman web dirancang dan dikirimkan, dengan fokus pada peningkatan pengalaman pengguna dan kinerja situs web.

Astro mengoptimalkan pemuatan dan rendering untuk berbagai perangkat, termasuk perangkat berdaya rendah seperti smartphone. Hal ini bertujuan untuk memberikan pengalaman yang lancar, apa pun perangkat atau kondisi jaringan pengguna.

Keterbatasan Astro.js

Astro.js memiliki beberapa keterbatasan yang harus Anda ketahui. Berikut adalah beberapa di antaranya:

Kompatibilitas Ekosistem

Astro.js dirancang untuk bekerja dengan kerangka kerja frontend yang populer seperti React, Svelte, dan Vue.js. Namun, ekosistemnya kurang matang dibandingkan dengan framework seperti React atau Vue, sehingga Anda mungkin menemukan lebih sedikit library dan komponen pihak ketiga yang secara eksplisit dibuat untuk Astro.

Persyaratan Keakraban Kerangka Kerja

Astro.js memungkinkan penggunaan berbagai kerangka kerja frontend, yang mengharuskan keakraban dengan setiap kerangka kerja yang dipilih.

Pengetahuan yang luas ini bisa sangat membingungkan bagi para pengembang yang berspesialisasi dalam satu framework atau baru dalam pengembangan web.

Mengerjakan proyek yang membutuhkan banyak kerangka kerja akan melibatkan pemeliharaan konsistensi di berbagai kerangka kerja.

Hal ini bisa menjadi sangat menantang karena kerangka kerja yang berbeda memiliki konvensi dan praktik terbaiknya masing-masing, dan menyelaraskannya dalam satu proyek berpotensi menyebabkan struktur kode yang terfragmentasi.

Pembelajaran Pengoptimalan

Pembelajaran optimasi mengacu pada pemahaman dan penerapan strategi khusus untuk memaksimalkan kinerja aplikasi web yang dibangun dengan framework.

Meskipun Astro.js dirancang untuk efisiensi dan kecepatan, namun untuk memanfaatkan kemampuannya secara maksimal, Anda perlu memahami secara mendalam teknik pengoptimalan dan menerapkannya dalam proses pengembangan. Hal ini bisa jadi rumit dan membutuhkan pengetahuan tingkat lanjut.

Membangun Aplikasi Jurnal

Dengan mengikuti tutorial ini, Anda akan membuat aplikasi jurnal dasar menggunakan framework Astro.js bersama dengan React.js.

Aplikasi jurnal akan menyediakan fungsionalitas CRUD (buat, baca, perbarui, hapus) dan menggunakan Back4app untuk penyimpanan dan pengambilan data.

Anda dapat membuat proyek Astro.js dengan menjalankan perintah ini di terminal Anda:

npm create astro@latest

Perintah di atas akan menghasilkan proyek Astro.js dasar dan memandu Anda dalam mengonfigurasi aplikasi, termasuk aspek-aspek seperti penggunaan TypeScript dan tingkat keketatannya.

Untuk menambahkan React.js ke dalam proyek Astro.js Anda, jalankan perintah ini di terminal Anda:

npx astro add react

Sekarang, proyek Anda sudah siap. Anda dapat mulai mengembangkan aplikasi dengan IDE favorit Anda. Pertama, Anda menentukan gaya global dan tata letak aplikasi.

Untuk mendefinisikan gaya global Anda, buat folder styles di dalam direktori src. Di dalam folder styles, buat berkas bernama global.css dan tentukan gaya global Anda di sana.

Sepertinya begitu:

Dengan gaya global yang sudah ada, sekarang saatnya menentukan tata letak Anda. Anda akan menemukan file Layout.astro di dalam folder layout di direktori src.

Ganti kode yang ada di file Layout.astro dengan blok kode berikut:

Blok kode di atas mewakili komponen tata letak. Komponen ini mengimpor gaya global, mengatur metadata, dan menyediakan placeholder untuk konten dinamis menggunakan elemen slot.

Konten utama komponen adalah judul h1 dengan gaya tertentu yang ditentukan dalam tag gaya.

Untuk menerapkan tata letak dan gaya global pada halaman Anda, impor komponen tata letak ke dalam file halaman dan sertakan bagian HTML dalam komponen tata letak.

Untuk menerapkan tata letak pada halaman beranda Anda, ikuti langkah yang sama pada berkas index.astro yang terletak di direktori src/pages.

Sepertinya begitu:

Blok kode ini mendefinisikan beranda aplikasi Anda. Blok kode ini mendefinisikan menu navigasi dengan tautan ke halaman “/journal” dan menerapkan gaya tertentu untuk memusatkan dan memberi jarak pada elemen navigasi.

Untuk membuat halaman jurnal, buatlah sebuah berkas bernama journal.astro di dalam direktori src/pages dan sertakan blok kode berikut ini ke dalam berkas tersebut.

Blok kode di atas mewakili halaman jurnal untuk aplikasi Anda. Blok kode ini mengimpor komponen tata letak dan membungkus bagian HTML untuk memberikan struktur halaman yang konsisten.

Kode ini juga mendefinisikan formulir untuk mencatat entri jurnal, dilengkapi dengan kolom input untuk judul dan isi jurnal, serta tombol “Log”. Gaya CSS yang didefinisikan dalam tag gaya mengontrol tampilan formulir dan elemen-elemennya.

Untuk meluncurkan aplikasi Anda di browser web, jalankan server pengembangan aplikasi. Arahkan ke direktori proyek di terminal Anda dan jalankan perintah berikut untuk memulai server pengembangan.

npm run dev

Perintah di atas akan memberi Anda tautan http://localhost:4321/. Navigasikan ke tautan ini pada browser web Anda untuk melihat aplikasi Anda.

Halaman beranda akan terlihat seperti ini:

Untuk melihat halaman jurnal, klik tautan navigasi “Catat pengalaman Anda.”

Mengintegrasikan Back4app Dengan Aplikasi Anda

Back4App adalah platform layanan backend berbasis cloud yang dirancang untuk merampingkan pengembangan, pengelolaan aplikasi, dan akan menggunakan Back4app sebagai backend Astro.js.

Memanfaatkan kerangka kerja Parse Server sumber terbuka, framework ini menyediakan seperangkat alat yang tangguh yang memungkinkan para pengembang untuk fokus pada pengembangan front-end sekaligus menyederhanakan kompleksitas back-end.

Pada intinya, Back4App menawarkan fungsi-fungsi yang sangat penting untuk pengembangan aplikasi modern, seperti penyimpanan data, otentikasi pengguna, dan basis data real-time.

Hal ini membuatnya berharga untuk menciptakan pengalaman pengguna yang interaktif dan dinamis. Platform ini mendukung berbagai bahasa pemrograman dan kerangka kerja, yang memenuhi beragam kebutuhan pengembangan.

Membuat akun Back4app

Untuk mengintegrasikan fitur-fitur yang ditawarkan Back4app dalam aplikasi Anda, Anda harus memiliki akun Back4app. Anda dapat membuatnya dengan mengikuti langkah-langkah sederhana berikut ini:

1. Kunjungi situs web Back4app.
2. Klik tombol “Daftar“.
3. Isi formulir pendaftaran dan kirimkan.

Memperkenalkan Plugin ChatGPT Back4app

Back4app baru-baru ini memperkenalkan plugin ChatGPT untuk membantu para pengembang dan penggemar non-teknis membuat dan berinteraksi dengan aplikasi Back4app.

Dengan menggunakan plugin Back4app ChatGPT, Anda dapat mengubah percakapan Anda menjadi aplikasi nyata. Ini berarti Anda tidak perlu pengalaman dengan platform Back4app sebelum berinteraksi.

Untuk mengakses plugin ChatGPT, Anda harus berlangganan ChatGPT Plus. Setelah berlangganan, klik tombol “GPT-4” untuk membuka menu pop-up. Pilih opsi “Plugin” untuk melanjutkan.

Daftar plugin yang tersedia akan muncul di layar Anda. Cari dan pilih plugin Back4app (Ketik “Back4app” di bilah pencarian).

Buat Aplikasi Back4app Dengan Plugin

Membuat aplikasi Back4app menggunakan plugin Back4app di ChatGPT adalah tugas yang sederhana. Beri tahu ChatGPT tentang jenis aplikasi yang ingin Anda buat, dan plugin ini akan menangani sisanya.

Sebagai contoh:

Seperti yang terlihat pada gambar di atas, plugin Back4app ChatGPT membuat aplikasi Back4app bernama “Aplikasi Jurnal.”

Untuk memverifikasi bahwa plugin Back4app ChatGPT telah berhasil membuat aplikasi, buka situs web Back4app, masuk ke akun Anda, dan periksa aplikasi Anda. Anda akan menemukan aplikasi bernama “aplikasi jurnal” yang terdaftar di antara aplikasi Anda.

Dengan menggunakan plugin, buatlah kelas jurnal di aplikasi jurnal.

Seperti yang terlihat pada gambar di atas, plugin Back4app ChatGPT membuat kelas jurnal dan menambahkan judul, konten, dan kolom tanggal.

Menambahkan Data ke Aplikasi Back4app

Dengan menggunakan plugin Back4app ChatGPT, Anda juga dapat menambahkan data khusus ke aplikasi. Sebagai contoh, Anda dapat menambahkan teks khusus ke bidang judul dan konten.

Setelah menambahkan teks, navigasikan ke dasbor aplikasi, klik kelas jurnal, dan konfirmasikan bahwa teks telah ditambahkan.

Menghubungkan ke Back4app

Untuk menghubungkan aplikasi jurnal Anda ke aplikasi Back4app, Anda perlu menginstal Parse JavaScript SDK di aplikasi Anda.

Untuk melakukannya, jalankan perintah berikut di terminal Anda:

npm install parse 

Setelah menginstal Parse JavaScript SDK, Anda memerlukan ID Aplikasi dan kredensial Javascript KEY.

Anda dapat menemukan kredensial ini di bagian Keamanan & Kunci di dasbor aplikasi Back4app Anda. Simpan ID Aplikasi dan Javascript KEY dengan aman di aplikasi Anda.

Menambahkan Data ke Back4app Dari Aplikasi

Sebelumnya dalam artikel ini, Anda telah mempelajari cara menambahkan data ke Back4app menggunakan plugin Back4app ChatGPT. Untuk melakukan hal ini menggunakan aplikasi aplikasi jurnal Anda, Anda akan menggunakan Parse Javascript SDK.

Dalam file journal.astro, tambahkan blok kode di bawah ini:

Blok kode ini mewakili skrip JavaScript yang terintegrasi dengan Parse untuk membuat dan menyimpan entri jurnal. Ini mengimpor versi kecil dari Parse dari parse/dist/parse.min.js dan memanggil metode inisialisasi.

Metode ini mengambil kredensial Application_ID dan Javascript_KEY sebagai argumen. Setelah memanggil metode inisialisasi pada Parse, setel properti serverURL pada Parse ke https://parseapi.back4app.com/.

Kode ini memilih elemen input, textarea, dan tombol dari DOM dan menetapkannya ke variabel judul, isi, dan tombol.

Kolom input mengambil judul entri jurnal, dan kolom textarea mengambil isi entri jurnal.

Fungsi addJournal berisi logika yang diperlukan untuk menambahkan data ke basis data Back4app Anda. Fungsi ini membuat contoh baru dari objek Jurnal, mengatur judul dan properti kontennya ke nilai elemen input dan textarea, dan menyimpannya ke Back4app.

Dengan metode addEventListener, kode menambahkan pendengar peristiwa ke tombol, memastikan bahwa mengklik tombol tersebut akan memicu fungsi addJournal.

Mengambil Data dari Back4app

Untuk mengambil data dari Back4app untuk ditampilkan di aplikasi Anda, Anda akan menggunakan komponen React. Buat file Journal.tsx di dalam direktori src/components. Di dalam file tersebut, impor dan inisialisasi library Parse.

Sepertinya begitu:

Kemudian, tentukan elemen JSX dari komponen tersebut:

Selanjutnya, buatlah sebuah journal state dan tentukan fungsi yang berisi logika untuk mengambil data dari Back4app.

Sepertinya begitu:

Dengan metode Parse.Query, fungsi fetchJournal menggunakan Parse SDK untuk membuat kueri yang mengambil data dari kelas Journal.

Metode find pada objek kueri mengembalikan sebuah larik yang berisi hasil kueri, dan fungsi setJournal memperbarui status jurnal dengan data yang diambil.

Kode ini menggunakan hook useEffect untuk menjalankan efek samping di dalam komponen. Kode ini memanggil fetchJournal untuk mengambil data ketika komponen dipasang. Sekarang, di dalam komponen, tampilkan konten status jurnal.

Sepertinya begitu:

Blok kode di atas membuat daftar entri jurnal sebagai kumpulan elemen div, masing-masing dengan konten spesifik dan tombol “Hapus” khusus.

Sistem ini menampilkan judul dan isi dari setiap entri jurnal dalam tag h3 dan p serta memiliki tombol “Hapus” untuk memungkinkan pengguna menghapus entri dengan mudah.

Untuk menata elemen JSX yang didefinisikan dalam komponen jurnal Anda, tambahkan gaya berikut ini ke file global.css Anda:

Sekarang, tampilkan komponen jurnal pada halaman beranda Anda. Untuk melakukannya, ganti kode yang ada di file index.astro dengan blok kode di bawah ini:

Blok kode ini mengimpor komponen jurnal dan merendernya. Arahan client:load memastikan bahwa komponen jurnal dimuat dengan segera pada saat halaman dimuat, sehingga memberikan pengalaman pengguna yang lancar dan responsif.

Menghapus Data Dari Back4app

Untuk memastikan bahwa tombol hapus aplikasi Anda di samping setiap entri berfungsi, Anda perlu mendefinisikan fungsi yang menghapus entri pilihan. Dengan menggunakan peristiwa klik, Anda akan mengikat fungsi ini ke tombol hapus.

Sepertinya begitu:

Fungsi deleteJournal membuat instance baru dari objek Journal menggunakan metode Parse.Object.extend. Setelah membuat objek, fungsi ini menetapkan properti id objek ke parameter id yang diteruskan ke fungsi.

Selanjutnya, fungsi ini memanggil metode penghancuran asinkron dari objek “Jurnal” untuk menghapus entri jurnal dengan ID yang diberikan dari Back4app.

Dengan metode filter, fungsi ini menyaring entri jurnal dengan id yang ditentukan dari status jurnal, membuat larik baru yang mengecualikan entri yang dihapus.

Terakhir, dengan metode setJournal, fungsi ini memperbarui status jurnal dengan array baru ini.

Sekarang ikatkan fungsi deleteJournal ke tombol "Hapus" menggunakan penangan peristiwa klik. Hal ini akan menyebabkan elemen JSX Anda dalam file Journal.tsx terlihat seperti ini:

Menguji Aplikasi

Setelah Anda selesai membuat aplikasi, Anda harus mengujinya. Untuk melakukannya, buka terminal Anda, jalankan server pengembangan, dan lihat aplikasi di browser web Anda.

Aplikasi akan terlihat seperti ini:

Klik pada “Catat pengalaman Anda” untuk mengunjungi halaman jurnal aplikasi dan mengisi kolom input.

Setelah mengisi kolom input, klik log untuk menambahkan data ke database Back4app Anda. Kembali ke halaman beranda Anda.

Sekarang, untuk menguji apakah Anda dapat menghapus entri, klik tombol hapus pada entri “Catatan Hari Pertama Saya”. Halaman beranda Anda sekarang akan terlihat seperti gambar di bawah ini.

Kesimpulan

Pada artikel ini, Anda telah mempelajari framework Astro.js, mempelajari kelebihan dan kekurangannya. Anda telah mempelajari cara membuat aplikasi Astro yang terintegrasi dengan library React.

Astro.js adalah pilihan yang sangat baik untuk membangun berbagai macam situs web, mulai dari laman landas sederhana hingga aplikasi web yang kompleks. Astro.js sangat cocok untuk situs web yang harus cepat, ringan, dan dapat diskalakan.

Untuk mengetahui lebih lanjut, silakan baca tutorial Cara membuat backend untuk Astro.js.