کافه لومیر
منوی دیجیتال روی میز؛ سفارش، کد رسید و پیگیری وضعیت — بدون اپ و بدون سرور.
- حوزهٔ کارفرما
- کافه و نوشیدنی تخصصی
- نقش ما
- طراحی و توسعه — از بریف تا انتشار
- پلتفرم
- JavaScript (ES Modules) · Vanilla CSS · localStorage
- وضعیت
- زنده روی mehravandedu.ir
کارفرما و خواسته
کافه لومیر یک منوی دیجیتال است که روی میز کافه باز می‌شود: مهمان میز خودش را انتخاب می‌کند، نوشیدنی را با گزینه‌های دلخواه سفارش می‌دهد و یک کد سفارش می‌گیرد؛ باریستا همان سفارش را در فهرست روز می‌بیند و وضعیتش را تغییر می‌دهد. عنوان خودِ صفحه همین کارکرد را می‌گوید: «سفارش مستقیم روی میز با دریافت آنی کد سفارش برای باریستا».
راه‌حلی که ساخته شد
یک صفحه، بدون بک‌اند
HTML، CSS و JavaScript دست‌نویس با ES Modules. نه وردپرس، نه دیتابیس، نه پنل لاگین — چیزی که میزبان استاتیک با هزینهٔ نزدیک به صفر سرو می‌کند.
میزهای نام‌دار
میزها در داده تعریف شده‌اند — سالن دنج، کنار پنجره، وسط سالن، کنار قفسهٔ کتاب، تراس روباز — و مهمان همان‌جا میزش را انتخاب می‌کند؛ انتخاب میز در حافظهٔ همان مرورگر می‌ماند تا برای سفارش بعدی تکرار نشود.
سفارش با گزینه‌های واقعی
برای هر آیتم پنجرهٔ شخصی‌سازی باز می‌شود: نوع شیر، میزان شیرینی، شات اضافه، سبک طعمی دانه یا پایهٔ نوشیدنی، با تعداد و قیمت نهایی که همان لحظه حساب می‌شود.
رسید، کد سفارش و مسیر وضعیت
پس از ثبت، کد سفارش و رسید با نام میز صادر می‌شود و سفارش در نوار زمان دنبال می‌شود: در صف → آماده‌سازی → آماده → تحویل‌شده (با حالت لغو).
دست باریستا در همان صفحه
لایهٔ داده، تغییر وضعیت سفارش‌ها، آمار روز و هم ویرایش قیمت و موجودی هر آیتم را ممکن می‌کند — بدون پنل جدا و بدون کدنویسی.
هم‌گام‌سازی زندهٔ تب‌ها
منو و سفارش‌ها در localStorage می‌مانند و رویدادها (مثل تغییر وضعیت سفارش) با BroadcastChannel بین تب‌های همان مرورگر پخش می‌شوند؛ تب بازِ باریستا سفارش تازه را همان لحظه می‌بیند.
صدا بدون فایل صوتی
افکت‌های صوتی با Web Audio API در همان لحظه ساخته می‌شوند؛ نه یک بایت فایل صوتی دانلود می‌شود، نه کتابخانهٔ صوتی لازم است.
مراحل کار
- بریف با کافه: چیدمان میزها، شکل سفارش دادن و نحوهٔ رسیدن سفارش به باریستا.
- طراحی موبایل‌اول؛ اول صفحهٔ مهمان، بعد نمای پیگیری سفارش.
- جدا کردن داده از رابط: دسته‌ها، آیتم‌ها، گزینه‌های شخصی‌سازی و میزها در یک ماژول مستقل.
- ساخت لایهٔ ذخیره و هم‌گام‌سازی (store) جدا از منطق صفحه (app) تا ویرایش منو، کد رابط را لمس نکند.
- تست روی گوشی‌های واقعی و مرورگرهای موبایل، با چیدمان میزهای خود کافه.
- انتشار روی Vercel و آموزش کارفرما برای تغییر قیمت و موجودی.
با چه چیزی ساخته شد
همان ابزارهایی که روی همین سایت فعال هستند.
- JavaScript (ES Modules)app.js · store.js · data.js · audio.js
- Vanilla CSSپالت و فاصله با متغیرهای CSS
- localStorageماندگاری منو، میز و سفارش‌ها
- BroadcastChannelپخش رویدادها بین تب‌ها
- Web Audio APIافکت صوتی بدون فایل
- Vercelمیزبانی استاتیک
تحویل شد
فقط چیزی که روی سایت خودش قابل دیدن است؛ بدون عدد ساختگی.
- منو زنده است و روی میزهای کافه باز می‌شود؛ مسیر سفارش تا رسیدن به وضعیت «آماده» قابل پیگیری است.
- هزینهٔ نگهداری نزدیک به صفر: فایل استاتیک، بدون دیتابیس، بدون اشتراک سرور.
- ویرایش منو در یک ماژول داده انجام می‌شود و رابط دست‌نخورده می‌ماند.
چند نما از همان سایت
از همین آدرس، در عرض واقعی‌شان گرفته شده‌اند.
پروژهٔ بعدی این‌شکل می‌تواند سایت تو باشد
بریف را در فرم سه‌مرحله‌ای بنویس — نوع پروژه و بودجه و راه تماس. همان چیزی که در این صفحه خواندی در درخواستت ثبت می‌شود تا بدون تکرار شروع کنیم.