มีหน้าร้าน E-Commerce เป็นของตัวเองง่ายๆ ด้วย Medusa.js

สวัสดีครับ บทความนี้มาแชร์ขั้นตอนการมีหน้าร้าน E-Commerce ของตัวเอง ในเวลาเพียงไม่ถึง 10 นาทีด้วยการใช้ Medusa.js (จริงๆ เพียงแค่ 2-3 นาทีด้วยซ้ำ)

Building blocks for digital commerce

Thousands of developers use Medusa’s open-source, NodeJS, e-commerce modules to build rich, reliable, and performant commerce applications without reinventing core commerce logic.

Medusa

ต้องบอกก่อนว่า ขั้นตอนที่กล่าวมาเป็นเพียงแค่การใช้พวก Starter Kit เท่านั้นนะครับ เป็น Template สำเร็จรูป มี seed product มาให้ เพื่อให้เห็นขั้นตอนการทำงานของ Medusa.js ว่าทำงานยังไง

📣 สำหรับใครที่สนใจระบบ E-Commerce ด้วย Medusa.js ไม่ว่าจะเป็น Developers, Business หรือเจ้าของร้าน สามารถติดต่อสอบถามเพิ่มเติมได้ครับ

Medusa.js คืออะไร?

Medusa เป็นเครื่องมือ Open Source สำหรับทำ E-Commerce ครับ โดยมีเครื่องมือพื้นฐานที่จำเป็นสำหรับ E-Commerce ให้เราสามารถปรับแต่ง ได้ตามที่เราต้องการ เช่น Orders, Inventory, Cart การ Checkout, และก็พวก Customers ต่างๆ ตัว Stack หลักๆ ของ Medusa.js จะเป็น Node.js + Express

เราสามารถเอา Medusa ไปทำอะไรได้บ้าง?

• ทำ Ecommerce เว็บเป็นหน้าร้านซื้อ ขาย
• ทำ Marketplace - ให้คนขาย มีหน้าร้านตัวเองได้
• ทำ POS ได้ รวมถึงพวก Subscriptions ต่างๆ

Create Medusa App

Install Medusa with create-medusa-app | Medusa

Learn how to create a composable commerce platform using Medusa. This quickstart guide will help you set up your Medusa backend and the admin dashboard.

Medusa

เราจะเริ่มต้นแบบง่ายๆ ด้วยการใช้ create-medusa-app กันครับ โดยสิ่งที่ create-medusa-app ทำคือ install และ setup backend โดยใช้พวก configuration ให้เราสามารถรันบน localhost เพื่อทดสอบระบบได้ โดย

1. สร้างเว็บ Storefront หน้าเว็บสำหรับซื้อขายสินค้า (Frontend)
2. สร้างหน้า Admin Console สำหรับ admin หรือเจ้าของเว็บ เข้าไปบริหารจัดการ products, orders ต่างๆ (Backend)

สิ่งที่ต้องมีคือ

• Git
• Node.js v16 ขึ้นไป
• PostgresQL

หากใครยังไม่มี postgres บนเครื่องแนะนำทำการติดตั้งก่อน เพราะต้องใช้ในขั้นตอน setup

หากใครไม่อยากติดตั้ง Postgresl บนเครื่อง local สามารถสร้าง Postgres db ด้วย Railway ได้ครับ

Railway

Railway is an infrastructure platform where you can provision infrastructure, develop with that infrastructure locally, and then deploy to the cloud.

Railway

เริ่มต้นสร้างโปรเจ็คด้วยคำสั่ง

pnpm dlx create-medusa-app@latest

ตัวระบบจะถามพวกชื่อโปรเจ็ค email ของ admin ที่เราจะใช้ ต้องการ setup storefront ไปด้วยหรือไม่? รวมถึง postgres username และ password ของเรา

? What's the name of your project? my-medusa-store
? Enter an email for your admin dashboard user admin@medusa-test.com
? Would you like to create the Next.js storefront? You can also create it later Yes
? Enter your Postgres username xxxx
? Enter your Postgres password [hidden]
🚀 Starting project setup, this may take a few minutes.

เพียงแค่นี้ เราก็มีหน้าร้าน และ backend หลังบ้านเราแล้วครับ

Setup ร้านค้า

โดยเมื่อตัว medusa ทำการ setup เสร็จ ก็จะได้หน้าเว็บ http://localhost:7001 - เพื่อให้เราทำการ setup ร้านค้าของเรา

จากนั้น ก็ทำตาม Guide ครับ คือเพิ่ม Product และก็ลองไปที่หน้า Storefront ที่เป็น http://localhost:8000 จากนั้นลองทำการเลือกสินค้าซักชิ้น และกด checkout

ขั้นตอนนี้จะเป็นการจ่ายเงินแบบ test เท่านั้น เมื่อเราจ่ายเงินเสร็จ ก็จะเห็น Order ในระบบ ที่ส่วน admin ครับ

จะเห็นได้ว่า เราได้ตัว feature พื้นฐานสำหรับ E-Commerce มาแล้ว ทีเหลือ ก็คือการปรับแต่ง config ต่างๆ และก็การดู แก้ไข

เวลา develop เราก็แค่เข้าไปที่โฟลเดอร์ backend หรือ storefront ของเรา แล้ว start dev server ด้วยคำสั่ง:

npm run dev

สุดท้าย ก็ลองไปเล่นตัวระบบ และลอง config ปรับแต่ง และอ่านรายละเอียดเพิ่มเติมกันดูนะครับ มีอะไรให้เล่นอีกเยอะเลย

Medusa Documentation | Medusa

Medusa is an open source composable commerce platform. Learn about its features and how to use it.

Medusa

สำหรับใครที่สนใจระบบ E-Commerce ด้วยการใช้ Medusa.js สามารถติดต่อ สอบถาม เข้ามาพูดคุยกันได้ครับ ทั้ง Developers ที่ติดปัญหา technical หรือไม่ว่าจะเป็นเจ้าของร้านค้าเอง ที่อยากมีหน้าร้าน มีระบบสินค้า ครับ

Happy Coding ❤️