Skip to content Skip to sidebar Skip to footer
Home / E-commerce / Vendure

Panduan Komprehensif Menggunakan Vendure untuk Membangun Proyek E-commerce

Post a Comment
Panduan Komprehensif Menggunakan Vendure untuk Membangun Proyek E-commerce
Panduan Komprehensif Menggunakan Vendure untuk Membangun Proyek E-commerce

Panduan Komprehensif Menggunakan Vendure untuk Membangun Proyek E-commerce

Pendahuluan ke Vendure

Dalam ranah e-commerce, memilih platform yang tepat sangat penting untuk kesuksesan toko online. Vendure, platform e-commerce headless open-source, telah muncul sebagai solusi tangguh yang dibangun dengan teknologi modern seperti Node.js, GraphQL, NestJS, dan TypeScript. Dengan fokus yang kuat pada produktivitas pengembang dan kemudahan kustomisasi, Vendure menawarkan solusi fleksibel dan skalabel untuk bisnis dari berbagai ukuran. Panduan ini akan mengeksplorasi fitur-fitur, proses setup, panduan pengembangan, dan praktik terbaik dalam menggunakan Vendure untuk membangun proyek e-commerce Anda.

Pengantar Vendure

Vendure adalah platform e-commerce headless modern yang dirancang untuk dapat dikustomisasi dan ramah pengembang. Vendure memanfaatkan kekuatan Node.js untuk eksekusi server-side, GraphQL untuk querying data yang efisien, NestJS untuk arsitektur aplikasi yang terstruktur dan skalabel, serta TypeScript untuk kode yang kuat dan aman. Kombinasi teknologi ini memastikan bahwa Vendure tidak hanya berkinerja baik tetapi juga mudah diperluas dan dikustomisasi untuk memenuhi kebutuhan bisnis tertentu.

Fitur Utama Vendure

  1. Arsitektur Headless: Vendure memisahkan backend dari frontend, memungkinkan pengembang untuk membangun frontend khusus menggunakan teknologi apa pun.
  2. API GraphQL: Menyediakan API fleksibel dan kuat untuk querying dan memutasi data.
  3. Sistem Plugin: Memudahkan untuk memperluas fungsionalitas Vendure dengan plugin kustom.
  4. TypeScript: Menjamin keamanan tipe dan mengurangi kesalahan runtime.
  5. Framework NestJS: Menawarkan arsitektur modular yang memudahkan pengelolaan aplikasi yang kompleks.
  6. Ramah Pengembang: Fokus pada membuat proses pengembangan menjadi lancar dan efisien.

Memulai dengan Vendure

Instalasi

Untuk memulai dengan Vendure, Anda perlu memiliki Node.js dan npm (atau Yarn) terinstal di mesin Anda. Setelah persyaratan ini terpenuhi, Anda dapat menginstal Vendure menggunakan npm:

bash
npm install -g @vendure/cli

Setelah menginstal CLI, Anda dapat membuat proyek Vendure baru dengan perintah berikut:

bash
vendure new my-vendure-project
cd my-vendure-project
npm install

Menyiapkan Server

Vendure memerlukan database SQL untuk beroperasi. Vendure secara resmi mendukung MySQL, PostgreSQL, dan SQLite. Untuk tujuan pengembangan, menggunakan SQLite adalah opsi paling sederhana. Namun, jika Anda lebih suka menggunakan MySQL atau PostgreSQL, Anda dapat mengatur database menggunakan Docker.

Konfigurasi Database

Vendure menggunakan TypeORM untuk interaksi database. Anda perlu mengonfigurasi pengaturan koneksi database di file vendure-config.ts yang terletak di root proyek Anda.

Berikut adalah contoh konfigurasi untuk SQLite:

typescript
import { VendureConfig } from '@vendure/core';

export const config: VendureConfig = {
  dbConnectionOptions: {
    type: 'sqlite',
    synchronize: true,
    logging: false,
    database: 'vendure.sqlite',
  },
  // Pengaturan konfigurasi lainnya
};

Untuk MySQL atau PostgreSQL, Anda perlu memperbarui dbConnectionOptions sesuai dengan database yang digunakan:

typescript
import { VendureConfig } from '@vendure/core';

export const config: VendureConfig = {
  dbConnectionOptions: {
    type: 'mysql', // atau 'postgres'
    host: 'localhost',
    port: 3306, // atau 5432 untuk PostgreSQL
    username: 'your-username',
    password: 'your-password',
    database: 'vendure',
    synchronize: true,
    logging: false,
  },
  // Pengaturan konfigurasi lainnya
};

Mengisi Data Mock

Vendure menyediakan skrip untuk mengisi database Anda dengan data mock untuk tujuan pengujian dan pengembangan:

bash
npm run populate --DB=sqlite

Jika Anda menggunakan MySQL atau PostgreSQL, ganti sqlite dengan jenis database yang sesuai.

Menjalankan Server Pengembangan

Setelah database dikonfigurasi dan diisi dengan data, Anda dapat memulai server Vendure:

bash
npm run start

Perintah ini akan memulai server dan membuatnya dapat diakses di http://localhost:3000. Anda dapat mengakses antarmuka admin di http://localhost:3000/admin, dan API GraphQL tersedia di http://localhost:3000/shop-api.

Arsitektur Vendure

Vendure dirancang sebagai monorepo, yang berarti semua paket yang diperlukan untuk platform ini terdapat dalam satu repository. Struktur ini memudahkan pengelolaan dependensi dan memastikan semua bagian sistem kompatibel.

Struktur Monorepo

Monorepo Vendure dikelola dengan Lerna, alat yang mengoptimalkan workflow seputar pengelolaan repository multi-paket. Berikut adalah gambaran struktur direktori:

graphql
vendure/
├── docs/           # Sumber dokumentasi
├── e2e-common/     # Konfigurasi bersama untuk pengujian e2e paket
├── packages/       # Sumber untuk server Vendure, admin-ui & paket plugin
├── scripts/
    ├── changelog/  # Skrip untuk menghasilkan changelog berdasarkan sejarah git
    ├── codegen/    # Skrip untuk menghasilkan kode TypeScript dari API GraphQL
    ├── docs/       # Skrip untuk menghasilkan dokumentasi markdown dari sumber

Ikhtisar Paket

Fungsi inti Vendure dibagi menjadi beberapa paket, masing-masing bertanggung jawab atas aspek berbeda dari platform. Berikut adalah beberapa paket utama:

  • @vendure/core: Paket inti yang berisi logika aplikasi utama, API GraphQL, dan interaksi database.
  • @vendure/admin-ui: Antarmuka admin yang dibangun dengan Angular, menyediakan antarmuka pengguna yang ramah untuk mengelola platform e-commerce.
  • @vendure/create: Paket untuk membuat proyek Vendure baru.
  • @vendure/testing: Utilitas dan pengaturan untuk menjalankan pengujian di Vendure.

Alur Kerja Pengembangan

Mengembangkan dengan Vendure melibatkan membangun proyek, membuat perubahan pada kode, menguji perubahan tersebut, dan memastikan semuanya berfungsi sebagaimana mestinya. Bagian ini menguraikan langkah-langkah penting dalam alur kerja pengembangan.

Membangun Proyek

Sebelum membuat perubahan, Anda perlu membangun proyek untuk mengompilasi kode TypeScript, membangun admin UI, dan menyiapkan aset lainnya. Jalankan perintah berikut dari direktori root:

bash
npm run build

Perintah ini akan membangun semua paket dan mungkin memakan waktu beberapa menit untuk diselesaikan.

Menguji Perubahan Secara Lokal

Untuk menguji perubahan secara lokal, Anda perlu mengatur server pengembangan dan mungkin membuat perubahan pada paket tertentu. Berikut cara Anda dapat menguji perubahan pada paket payments-plugin:

Buka dua jendela terminal:
Terminal 1: Untuk mengawasi dan mengompilasi perubahan pada paket payments-plugin.
Terminal 2: Untuk menjalankan server pengembangan.

bash
# Terminal 1
cd packages/payments-plugin
npm run watch

Jika Anda mengembangkan perubahan untuk paket inti, Anda juga perlu mengawasi paket common:

bash
# Terminal 1
# Root proyek
npm run watch:core-common

Mulai server pengembangan setelah perubahan dikompilasi:

bash
# Terminal 2
cd packages/dev-server
DB=sqlite npm run start

Server pengembangan sekarang akan menyertakan perubahan lokal Anda dari paket yang dimodifikasi.

Pengujian di Vendure

Pengujian adalah bagian penting dari proses pengembangan, memastikan bahwa kode Anda berfungsi sebagaimana mestinya dan tidak menyebabkan regresi. Vendure menyediakan dukungan komprehensif untuk pengujian unit dan end-to-end (e2e).

Pengujian Unit

Pengujian unit ditempatkan bersamaan dengan file yang diuji dan memiliki akhiran .spec.ts. Anda dapat menjalankan semua pengujian unit dengan perintah berikut:

bash
npm run test

Untuk menjalankan pengujian untuk paket tertentu, navigasikan ke direktori paket dan jalankan perintah yang sama.

Pengujian End-to-End

Pengujian end-to-end mensimulasikan interaksi pengguna nyata dengan sistem dan ditempatkan di direktori /e2e/ dari setiap paket yang menyertakannya. Jalankan semua pengujian e2e dengan perintah berikut:

bash
npm run e2e

Untuk menjalankan pengujian untuk paket tertentu, navigasikan ke direktori paket dan jalankan perintah yang sama.

Saat men-debug pengujian e2e, Anda dapat mengatur variabel lingkungan untuk meningkatkan waktu habis Jest:

bash
E2E_DEBUG=true npm run e2e

Ini memungkinkan Anda melangkah melalui pengujian tanpa mereka gagal karena waktu habis.

Proses Deployment dan Rilis

Vendure menggunakan mode tetap Lerna untuk versioning dan merilis paket. Pendekatan ini menyederhanakan proses pengembangan dan memastikan kompatibilitas di semua paket.

Proses Rilis

Jalankan skrip publish:

bash
npm run publish-release

Skrip ini menjalankan lerna publish, yang akan meminta Anda memilih versi berikutnya. Kemudian membangun semua paket dan menghasilkan entri changelog.

Dorong perubahan ke Git:

bash
git push origin master --follow-tags

Vendure menghindari bergantung pada Lerna untuk mendorong rilis karena hook pra-push yang lama, yang dapat membatalkan OTP npm dan menyebabkan kegagalan publish.

Komunitas dan Dukungan

Vendure memiliki komunitas aktif dan menawarkan beberapa saluran untuk dukungan dan kolaborasi:

  • Discord: Bergabunglah dengan server Discord Vendure untuk terhubung dengan pengembang lain dan mendapatkan jawaban atas pertanyaan Anda.
  • GitHub: Laporkan masalah, kontribusi ke basis kode, dan ikuti perkembangan di repository GitHub Vendure.
  • Dokumentasi: Dokumentasi komprehensif tersedia di situs web Vendure, termasuk panduan, referensi API, dan tutorial.

Kesimpulan

Vendure adalah platform e-commerce headless yang kuat dan fleksibel yang memanfaatkan teknologi modern untuk menyediakan solusi tangguh untuk membangun aplikasi e-commerce kustom. Fokusnya pada produktivitas pengembang, kemudahan kustomisasi, dan arsitektur modular membuatnya menjadi pilihan yang sangat baik bagi bisnis yang ingin menciptakan toko online yang unik dan skalabel. Dengan mengikuti panduan dan praktik terbaik yang diuraikan dalam panduan ini, Anda dapat memanfaatkan potensi penuh Vendure dan memberikan pengalaman e-commerce yang luar biasa.

Post a Comment for "Panduan Komprehensif Menggunakan Vendure untuk Membangun Proyek E-commerce"