Halo para seniman yang budiman! Selamat datang kembali di blog saya. Pada kesempatan kali ini, saya akan membagikan tutorial tentang cara membuat fitur authentication dasar, yaitu register, login, dan logout menggunakan Svelte dan TypeScript. Untuk menyimpan data, kita akan menggunakan PostgreSQL, dan saya juga akan menjelaskan cara melakukan migration dan seeding pada database. Agar tampilan aplikasi lebih menarik, kita akan menggunakan TailwindCSS.
Tanpa berlama-lama lagi, mari kita mulai dengan membuat proyeknya terlebih dahulu!
Membuat Proyek SvelteKit #
SvelteKit adalah framework modern yang memungkinkan Anda membangun aplikasi web yang cepat dan efisien. Pada panduan ini, kita akan membahas langkah-langkah untuk memulai proyek SvelteKit dari nol, beserta struktur dasar yang ada di dalamnya.
Langkah 1: Membuat Proyek Baru #
Cara paling mudah untuk memulai proyek SvelteKit adalah dengan menggunakan perintah npx. Berikut ini langkah-langkah untuk membuat proyek SvelteKit:
npx sv create my-app
cd my-app
npm install
npm run dev
- npx sv create my-app: Perintah ini akan membuat proyek baru di direktori
my-app. Anda akan diberikan opsi untuk menambahkan beberapa alat bantu dasar, seperti TypeScript. - cd my-app: Masuk ke direktori proyek yang baru dibuat.
- npm install: Menginstal semua dependensi yang dibutuhkan.
- npm run dev: Menjalankan server pengembangan di
localhost:5173.
Setelah langkah-langkah di atas selesai, aplikasi Anda akan siap untuk dijalankan dan dapat diakses melalui browser. Pada kunjungan pertama, halaman akan dirender di server, kemudian aplikasi sisi klien akan mengambil alih untuk interaksi lebih lanjut.
Struktur Proyek SvelteKit #
Proyek SvelteKit yang umum memiliki struktur direktori sebagai berikut:
my-project/
├ src/
│ ├ lib/
│ │ ├ server/
│ │ └ [your server-only lib files]
│ ├ params/
│ ├ routes/
│ ├ app.html
│ ├ error.html
│ ├ hooks.client.js
│ ├ hooks.server.js
│ └ service-worker.js
├ static/
│ └ [your static assets]
├ tests/
├ package.json
├ svelte.config.js
├ tsconfig.json
└ vite.config.js
Mari kita bahas direktori dan file penting satu per satu.
1. src/
#
Direktori src/ merupakan inti dari proyek SvelteKit Anda. Beberapa subdirektori penting di dalamnya adalah:
- lib/: Menyimpan komponen dan utilitas yang dapat diimpor melalui
$lib. Jika Anda memiliki kode yang hanya berjalan di server, letakkan di dalamlib/server. - params/: Berisi parameter matcher kustom yang digunakan untuk mencocokkan parameter dinamis di dalam rute.
- routes/: Setiap halaman di aplikasi Anda adalah file yang terletak di dalam direktori
routes. Anda dapat menempatkan komponen spesifik halaman di sini. - app.html: Template halaman dasar yang berisi elemen HTML dengan placeholder untuk konten dinamis seperti
<svelte:head>, halaman yang dirender di server, dan sebagainya. - error.html: Halaman fallback yang ditampilkan jika terjadi kesalahan.
- hooks.client.js dan hooks.server.js: Berisi hook untuk klien dan server, yang digunakan untuk memodifikasi perilaku global aplikasi Anda.
- service-worker.js: Berisi logika pekerja layanan (service worker) jika Anda menggunakan fitur ini.
2. static/
#
Direktori ini berisi file statis seperti favicon, gambar, atau berkas lain yang ingin Anda sajikan langsung tanpa pemrosesan lebih lanjut.
3. tests/
#
Jika Anda menambahkan alat pengujian seperti Playwright atau Vitest saat membuat proyek, pengujian unit dan end-to-end Anda akan ditempatkan di sini.
4. package.json
#
File ini mencantumkan dependensi proyek Anda, termasuk SvelteKit, Vite, dan paket lainnya yang digunakan. Ketika Anda membuat proyek dengan npx sv create, file ini juga akan disiapkan dengan konfigurasi penting seperti "type": "module" untuk mendukung modul ES.
5. svelte.config.js
#
File ini berisi konfigurasi untuk Svelte dan SvelteKit. Anda dapat menyesuaikan perilaku framework melalui file ini.
6. vite.config.js
#
Karena SvelteKit dibangun di atas Vite, file ini berfungsi sebagai tempat konfigurasi untuk Vite, termasuk integrasi dengan plugin SvelteKit.
Menambahkan TypeScript #
Jika Anda memilih untuk menggunakan TypeScript, file konfigurasi seperti tsconfig.json akan ditambahkan ke proyek Anda. SvelteKit juga menghasilkan tsconfig.json internal di dalam .svelte-kit/tsconfig.json, yang menggabungkan konfigurasi Anda.
Keterangan Paket yang Digunakan #
Berikut adalah paket-paket yang digunakan dalam proyek ini, beserta penjelasan dan cara instalasinya:
-
@types/bcrypt: Paket ini menyediakan definisi tipe untuk bcrypt, yang diperlukan saat menggunakan TypeScript agar mendukung pemeriksaan tipe. Instalasi dilakukan dengan perintah berikut:
npm install @types/bcrypt --save-dev -
tailwindcss: Framework CSS berbasis utilitas yang mempercepat pembuatan desain responsif dan modern. Instal dengan perintah:
npm install tailwindcss --save-dev -
typescript: Bahasa pemrograman yang menambahkan tipe statis pada JavaScript, membantu mencegah banyak kesalahan kode saat pengembangan. Instal TypeScript dengan:
npm install typescript --save-dev
Dependencies untuk Authentication dan Database: #
-
bcrypt: Digunakan untuk mengenkripsi password pengguna sebelum menyimpannya di database. Ini adalah salah satu komponen penting untuk keamanan. Instal bcrypt dengan:
npm install bcrypt -
knex: SQL query builder yang mempermudah interaksi dengan berbagai jenis database, termasuk PostgreSQL. Digunakan untuk menangani migrasi dan seeding. Instal knex dengan:
npm install knex -
pg: Driver PostgreSQL untuk Node.js yang memungkinkan aplikasi berkomunikasi dengan database PostgreSQL. Instal dengan:
npm install pg -
postgres: Client PostgreSQL modern yang membantu dalam manajemen koneksi dan kueri. Anda dapat memasangnya dengan:
npm install postgres
Untuk menginstal semua paket yang digunakan dalam proyek ini sekaligus, Anda dapat menjalankan perintah berikut:
npm install @types/bcrypt tailwindcss typescript bcrypt knex pg postgres --save-dev
Perintah di atas akan menginstal semua devDependencies dan dependencies yang dibutuhkan untuk proyek ini.
Kesimpulan #
Setelah semua paket terpasang, Anda memiliki pondasi yang kuat untuk membangun sistem authentication dasar menggunakan Svelte dan TypeScript, dengan PostgreSQL sebagai basis data dan Knex untuk menangani migrasi dan seeding. TailwindCSS memastikan tampilan aplikasi Anda tetap modern dan responsif.
Selamat mencoba, dan semoga proyek ini dapat terus berkembang sesuai kebutuhan Anda!