Bangun Toko E-niaga dengan Headless Commerce dan CMS

Bangun Toko E-niaga dengan Headless Commerce dan CMS

“Pelajari tentang manfaat menggabungkan perdagangan tanpa kepala dan CMS, dan bagaimana Anda dapat melakukannya dengan Medusa dan Contentful”

Teknologi tanpa kepala menjadi tren yang semakin populer dari hari ke hari. Dua contoh teknologi tanpa kepala adalah perdagangan tanpa kepala dan CMS tanpa kepala. Medusa dan Contentful adalah dua platform yang masing-masing menyediakan tumpukan tanpa kepala ini.

Medusa adalah perdagangan tanpa kepala sumber terbuka yang memberi Anda kemampuan untuk membuat toko Anda dalam hitungan menit dan menyesuaikan toko Anda berdasarkan kebutuhan Anda.

Contentful adalah platform CMS tanpa kepala yang memungkinkan Anda mengelola konten dengan mudah dari antarmuka pengguna yang ramah, lalu menghubungkan ruang CMS ke aplikasi mana pun.

Untuk usaha kecil, beroperasi hanya dengan platform perdagangan seperti Medusa saja sudah lebih dari cukup karena menyediakan fitur manajemen produk seperti deskripsi atau gambar produk. Namun, dalam beberapa kasus, menggabungkan Medusa dengan CMS tanpa kepala dapat memberikan hasil yang jauh lebih hebat.

Dalam artikel ini, Anda akan mempelajari beberapa manfaat menggabungkan platform. Anda juga akan mempelajari cara mengintegrasikan Medusa dan Contentful meskipun Medusa juga dapat digunakan dengan Strapi atau CMS lainnya.

Platform perdagangan tanpa kepala pada dasarnya adalah platform yang menangani alur kerja dasar eCommerce; menangani alur pesanan, menyimpan detail produk (misalnya harga, varian, deskripsi), dan memelihara informasi pelanggan dan pesanan. Bagi sebagian besar platform perdagangan, ini akan berfungsi sebagai lapisan backend dasar yang terhubung ke lapisan frontend presentasi (etalase) dan terintegrasi dengan solusi luar untuk pembayaran, pengiriman, analitik, dll…

Sedangkan CMS tanpa kepala adalah sistem pengelolaan konten backend di mana bank konten — yang menampung konten tersebut — tidak terikat pada lapisan presentasi mana pun (frontend). Data (konten) tersedia melalui API. Ini berarti Anda dapat menyajikan data ini dalam berbagai bentuk yang Anda inginkan — web, seluler, dll. Pemisahan ini adalah bagian dari inti Jamstack.

Manfaat Menggunakan Medusa dengan Contentful

Memperluas Pengayaan Produk

CMS tanpa kepala memberi Anda kemampuan untuk memiliki representasi produk yang lebih detail daripada yang disediakan oleh platform perdagangan monolitik. Jika Anda memerlukan lebih dari sekadar informasi produk dasar (misalnya, beberapa gambar produk dan deskripsi produk lanjutan), maka informasi tersebut dapat dengan mudah ditambahkan dengan CMS tanpa kepala.

Dengan memanfaatkan sifatnya sebagai sistem manajemen konten, Anda bisa mendapatkan informasi sedetail yang Anda inginkan tentang produk Anda. Jika ada sesuatu yang tidak ada secara asli, Anda cukup menambahkannya ke model konten produk Anda dan mengelola semuanya dari satu tempat terpusat.

Melayani Pelanggan Secara Global dengan Satu Backend

Di dunia saat ini, kemungkinan besar Anda akan melayani pelanggan dari berbagai lokasi. Untuk melakukan hal tersebut secara efektif, Anda memerlukan cara untuk menerjemahkan daftar produk Anda secara konsisten ke dalam beberapa bahasa, serta menangani mata uang lokal.

Jika Anda mencoba melakukan ini dengan sebagian besar solusi monolitik seperti Shopify dan WooCommerce, Anda harus menyiapkan toko berbeda untuk setiap pasar yang ingin Anda layani. Dengan CMS tanpa kepala, terdapat opsi bagus untuk dukungan multibahasa dan dengan platform perdagangan tanpa kepala seperti Medusa, Anda dapat dengan mudah mengatur opsi mata uang lokal (bersama dengan opsi pengiriman dan pembayaran lokal) untuk setiap wilayah, semuanya dalam satu backend.

Kelola Pengaturan di Seluruh Saluran

Multisaluran adalah ekspektasi standar bagi banyak operator e-niaga saat ini, namun sering kali membosankan untuk beroperasi di berbagai saluran dari perspektif konten. Pendekatan yang paling umum adalah dengan memiliki beberapa ruang kerja di setiap saluran — situs web Anda, aplikasi Anda, dll. Masing-masing platform ini memerlukan jenis perlakuan khusus untuk memastikan platform tersebut beroperasi sebagaimana mestinya — berbagai jalur yang berfungsi di bawah toko Anda.

Menggunakan platform perdagangan tanpa kepala memungkinkan Anda melayani beberapa saluran dari backend yang sama alih-alih beroperasi dalam sistem tertutup untuk masing-masing saluran. Jika digabungkan dengan CMS tanpa kepala, Anda dapat mengontrol semua konten di seluruh saluran dari satu tempat (sistem CMS) sambil menyesuaikan harga, mengunggah produk baru, dan meninjau pesanan, semuanya di backend perdagangan.

Sinkronisasi Dua Arah yang Mudah

Dalam bisnis e-niaga menengah hingga besar, semua orang mungkin tidak bekerja dalam sistem yang sama (Misalnya, pemasaran akan bekerja dengan CMS sedangkan tim e-niaga sebagian besar akan bekerja dengan backend perdagangan). Komplikasi yang sering ditemui di sini adalah pembaruan di satu sistem mungkin tidak meluas ke sistem lain sehingga mengakibatkan ketidakcocokan data atau konten yang ditampilkan di frontend.

Untuk meminimalkan risiko ini, Medusa selalu menggunakan sinkronisasi dua arah dengan platform CMS yang terintegrasi dengannya. Dengan cara ini, kesalahpahaman dapat dihindari dan tim yang berbeda selalu dapat mengandalkan sumber kebenaran yang sama bahkan ketika bekerja di berbagai sistem.

Menyiapkan Medusa dengan Contentful

Sebagai contoh cara menggunakan Medusa dengan CMS tanpa kepala, Anda akan melalui penyiapan Medusa dengan Contentful sebagai CMS. Anda juga dapat memilih untuk bekerja dengan CMS tanpa kepala seperti Strapi yang dapat Anda ikuti panduan ini.

Instal Dependensi

Anda harus menginstal beberapa hal terlebih dahulu sebelum toko Anda aktif dan berjalan.

Pertama, instal CLI Medusa:

npm install -g @medusajs/medusa-cli

atau menggunakan Benang:

yarn global add @medusajs/medusa-cli

Medusa juga membutuhkan Redis untuk mengelola dan menjalankan acara serta pengendali langganannya. Hal ini secara khusus diperlukan untuk mengelola sinkronisasi dua arah antara Medusa dan Contentful. Jika Anda belum menginstal Redis, ikuti panduan ini untuk menginstalnya.

Inisialisasi Medusa

Gunakan perintah berikut untuk menginstal Server Medusa:

medusa new medusa-contentful-store https://github.com/medusajs/medusa-starter-contentful

Perintah di atas akan membuat folder bernama medusa-contentful-store. Dalam folder ini terdapat file konfigurasi untuk penyimpanan Medusa Anda dan diatur untuk terhubung ke Contentful.

Ciptakan Ruang yang Penuh Konten

Selanjutnya, Anda akan menyiapkan Contentful Space dan menghubungkannya ke toko Anda.

Buka “Contentful” dan masuk atau buat akun.

Sesuatu yang Perlu Diperhatikan

Saat Anda pertama kali membuat akun Contentful, ruang "Kosong" baru dibuat. Jika demikian, pilih “Kosong” dan lanjutkan ke bagian Dapatkan Kunci Akses.

Jika “Blank” belum dibuat lanjutkan dengan langkah dibawah ini

CATATAN: Anda dapat mengganti nama ruang nanti

Klik nama organisasi Anda dan pilih untuk menambahkan spasi

Pilih Komunitasdan Hanya Aplikasi Web lalu klik lanjutkan

Beri nama ruangan Anda dan pilih ruang kosong, lalu buka rumah ruangan Anda

Dapatkan Kunci Akses

Untuk menghubungkan Contentful ke Medusa, Anda memerlukan Kunci API dari Contentful.

Dengan beranda Contentful Anda dimuat, Pilih Pengaturan di bilah atas, lalu kunci API

Dari sini Anda akan mendapatkan:

- Id Ruang: Untuk mengetahui ruang mana yang harus dihubungkan
- Token Manajemen Konten: Untuk memungkinkan Medusa mengelola data Konten Anda.

CATATAN: Simpan kunci ini ke file teks, Anda akan membutuhkannya segera

ID Ruang

Anda bisa mendapatkan SpaceId dari bilah alamat atau dengan memilih Tambahkan Kunci API

Salin id dari dialog yang muncul dan letakkan di suatu tempat, Anda akan membutuhkannya sebentar lagi.

Kunci Manajemen Konten

Beralih ke tab Ctoken manajemen konten dan pilih Buat Token Pribadi.

Salin token itu dan simpan di suatu tempat untuk digunakan nanti.

CATATAN: Pastikan token Anda sudah disalin, Anda tidak akan dapat melihatnya lagi

Tambahkan Kunci ke Server Medusa Anda

Kembali ke direktori medusa-contentful-store Anda. Buka file .env dan tambahkan kunci terkait Contentful yang kita simpan tadi

CONTENTFUL_SPACE_ID=
CONTENTFUL_ACCESS_TOKEN=
CONTENTFUL_ENV=master

• Tetapkan Id Ruangke CONTENTFUL_SPACE_ID
• Setel Token Pengelolaan Konten ke CONTENTFUL_ACCESS_TOKEN
• Setel masterke CONTENTFUL_ENV

Bermigrasi dan Benih dengan Puas

Anda sekarang dapat memigrasikan dan menyemai toko Anda. Buka jendela terminal dalam direktori **medusa-contentful-store** dan jalankan perintah ini:

npm run migrate:contentful

atau menggunakan Benang:

yarn migrate:contentful

Setelah perintah selesai dijalankan, kembali ke Contentful, pilih Model konten dan Anda akan melihat bahwa ruang tersebut diperbarui dengan tipe konten dari Medusa.

Selanjutnya, sematkan ruang Contentful dengan beberapa data menggunakan perintah ini:

npm run seed:contentful```

or

yarn seed:contentful

Jika Anda kembali ke Contentful setelah menjalankan perintah, perintah tersebut akan diperbarui dengan data baru.

Terakhir, jalankan perintah ini untuk menambahkan beberapa produk ke toko Anda:

npm run seed
npm run start

or

yarn seed
yarn start

Jika Anda pergi ke Contentful dan memilih Konten, Anda akan melihat sesuatu seperti ini:

Klik tarik-turun “Jenis konten” dan pilih Produk. Anda akan melihat produk di toko Medusa Anda:

Sinkronisasi dua arah

Di bagian ini, Anda akan melihat bagaimana Medusa dan Contentful disinkronkan. Anda akan melihat bagaimana memperbarui informasi produk di Medusa akan memperbarui informasi produk di Contentful, dan sebaliknya.

Sinkronkan Data dari Medusa ke Contentful

Anda dapat menggunakan Tukang Pos untuk mengirim permintaan ke API Medusa dan memodifikasi produk. Anda dapat memeriksa terlebih dahulu apakah Anda memiliki produk yang sama dengan yang ada di Contentful dengan mengirimkan GETpermintaan ke toko Medusa Anda di http://localhost:9000/store/products

Langkah selanjutnya adalah memperbarui produk. Di Medusa, Anda hanya dapat memperbarui produk jika Anda login sebagai admin. Jadi, Anda harus masuk sebagai admin menggunakan titik akhir otentikasi /admin/auth terlebih dahulu.

Secara default, Medusa menyemai database Anda dengan admin yang memiliki kredensial berikut:

email: [email protected]

kata sandi: super rahasia

Kirim permintaan POST ke localhost:9000/admin/auth, meneruskan data JSON isi dengan format berikut:

{
 “email”: “[email protected]”,
 “password”: “supersecret”
}

Jika kredensial Anda benar, Anda akan masuk dan memiliki kemampuan untuk mengedit produk.

Untuk mengedit produk, Anda perlu mengirimkan POST permintaan ke /admin/products/:id , dimana :id adalah ID produk. Anda dapat mengambil ID produk dari permintaan sebelumnya /store/products.

Misalnya, untuk memperbarui produk “Medusa Waterbottle” saya akan mengirimkan permintaan POST ke /store/products/prod_01FW12QVRS9PVRJSHB3ZCSRF0J. Harap dicatat bahwa ID ini mungkin berbeda untuk Anda, jadi salin ID produk dari toko Anda.

Di isi permintaan, kirim objek JSON dengan data yang ingin Anda ubah. Misalnya untuk mengganti judul:

{
 “title”: “COOL Medusa Waterbottle”
}

Setelah Anda mengirim permintaan, kembali ke Contentful. Anda akan melihat bahwa produknya juga telah berubah di sana.

Sinkronkan Data dari Contentful ke Medusa

Langkah ini mengharuskan server Medusa Anda dihosting di server publik dan Anda menyiapkan webhook di Contentful.

Dengan asumsi server Medusa Anda dihosting, buka Contentful untuk menyiapkan Webhook.

Pilih Setelan dari bilah navigasi, lalu Webhook

Lalu, pilih Tambahkan Webhook. Beri nama webhook Anda, lalu pastikan URL-nya adalah URL toko Anda ditambah /hooks/contentful. Misalnya, https://example.com/hooks/contentful. Lalu, klik Simpan

Setelah koneksi Webhook dibuat, konten Anda harus disinkronkan dari Contentful ke Medusa setiap kali Anda mengedit data di Contentful.

Kesimpulan

Jika toko perlu beroperasi dalam berbagai bahasa atau diperlukan deskripsi produk yang lebih canggih, maka pengaturan dengan Medusa dan CMS tanpa kepala dapat menambah banyak nilai dengan memungkinkan:

• Lebih banyak pengayaan produk
• Terjemahan toko web yang mudah tanpa mengoperasikan banyak toko
• Manajemen lintas saluran yang lebih baik
• Sinkronisasi dua arah untuk menghindari konflik data

Jika Anda memiliki masalah atau pertanyaan terkait Medusa atau tutorial ini, silakan menghubungi tim Medusa melalui Discord.