# Cafe Gyoen: منصّة واحدة لمقهى ماتشا، وعملية Shopify كاملة، مدقّقة 100/100

> منصّة Next.js لمقهى الماتشا في شارع كلوب بسنغافورة: واجهة رئيسية بفتحة مميّزة، وعملية Shopify كاملة لتجارة الماتشا المنزلية، وحجوزات طاولات، وفعاليات ومدوّنة، مبنيّة ليعثر عليها البشر والذكاء الاصطناعي.

Source: https://www.truenorthmarketing.ae/ar/case-studies/cafe-gyoen
Client: Cafe Gyoen
Published: 2026-07-15
Disciplines: تطوير الويب, إعداد Shopify Headless, نظام الضيوف والحسابات, أتمتة دورة الحياة, البيانات المنظّمة وAEO, التجربة والحركة
Publisher: True North Marketing (truenorthmarketing.ae)

## Challenge

مفهوم ماتشا جادّ كان قالب مطعم عام سيسطّحه إلى قائمة وعنوان. كان عليه أن يخدم ثلاثة ضيوف في آنٍ واحد، الزائر العابر وحاجز التذوّق ومشتري العلب المنزلية، وخلفه عملية تجارة حقيقية تعمل فعلاً.

## Approach

نظام ضيف واحد مترابط، لا مواقع مصغّرة منفصلة، وخلفه عملية Shopify كاملة: واجهة رئيسية بفتحة مميّزة، ورسم بيانات منظّمة للبحث وإجابات الذكاء الاصطناعي، وتجارة headless بنظام حسابات ضيوف وحجوزات.

## Outcome

مباشر على cafegyoen.com: 100 في الأداء وSEO وسهولة الوصول وأفضل الممارسات، 3 من 3 في التصفّح الوكيلي، 23 نوع كيان مخطط، وتجارة headless بحسابات ضيوف، وحجوزات. الأرقام التجارية تبقى للعميل.

## What We Did

بناء الموقع وعملية Shopify الكاملة، الواجهة الخلفية والكتالوج والثيم والنطاق؛ واجهة بفتحة؛ تجارة headless بنظام حسابات ضيوف؛ حجوزات؛ Merchant Center وSearch Console وSEO؛ أتمتات بريد دورة الحياة؛ ورسم مخطط مُنمَّط.

## Full article

![منصّة مقهى الماتشا Cafe Gyoen](../images/case-cafegyoen-cover.webp)

Cafe Gyoen هو مقهى الماتشا في سنغافورة على شارع كلوب: ماتشا احتفالية أحادية المنشأ من أوجي وميه وكاغوشيما، تُخفق يدوياً عند الطلب، إلى جانب وجبات تيشوكو اليابانية. انتقل من سيرانغون غاردنز إلى شقة تجارية في شارع كلوب، واحتاج موقعاً يؤدّي ما يؤدّيه الكاونتر، أن يستقبل الزائر العابر، ويأخذ حجز تذوّق، ويبيع علبة تُحمَل إلى المنزل. بنينا منصّة واحدة للثلاثة جميعاً، وهندسناها بحيث يقرأ كلٌّ من جوجل ومساعدات الذكاء الاصطناعي بدقّة ما هو Cafe Gyoen، وأين يقع، وماذا يقدّم.

  
  
  
  
  
  

## مقهى ماتشا كان عليه أن يعمل بجدٍّ كما يعمل الكاونتر

Cafe Gyoen ليس مقهى قهوة يقدّم الماتشا مصادفةً. يضع نفسه كأول مقهى ماتشا مخصّص في سنغافورة: شاي مصنّف بحسب المنشأ، يُخفق عند الطلب على الكاونتر، ويُقدَّم مع أطقم تيشوكو تعامل الغداء كطقس لا كمعاملة. هذه الخصوصية هي العلامة كلها، وهي بالضبط ما يمحوه قالب المطعم الجاهز.

العميل مكان واحد في شارع كلوب، 87 شارع كلوب في قلب منطقة المطاعم في سنغافورة، بحركة زوّار عابرين، وجمهور متنامٍ من عشّاق الشاي، وخط تجزئة من الماتشا والمخافق اليدوية من البامبو. يصل ثلاثة أشخاص مختلفين إلى الموقع بثلاث مهمّات مختلفة. تسطيحهم في صفحة رئيسية واحدة برقم هاتف كان سيترك معظمهم دون خدمة.

## ثلاثة ضيوف، نظام واحد

بدل بناء مواقع مصغّرة منفصلة، عاملنا كل نيّة ضيف كجزء من رحلة واحدة مترابطة. تغطّي المنصّة المكان وقصّته، والقائمة، والحجوزات، ومتجراً بصفحات منتجات، وصفحة فعاليات وإعلام، ومسار استفسار جملة للموزّعين، ومدوّنة، وصفحتَي تواصل ووصول، والطبقة القانونية تحتها. الزائر لأول مرة يجد المفهوم والقائمة والموقع. المتذوّق يحجز جلسة. الموزّع يسلك مسار الجملة. العميل يشتري ماتشا للمنزل. لا أحد مضطرّ لتبديل اللغة الرقمية للانتقال من واحدة إلى أخرى.

النتيجة موقع يتصرّف كمُضيف: يدرك لماذا جاء الزائر، ويسلّم الخطوة التالية إلى الجزء من النظام القادر على إتمامها.

## واجهة رئيسية تُقدّم مثل الكاونتر

المفهوم حسّي، فكان على الباب الأمامي أن يكون كذلك. بدل صورة جاهزة وعنوان، تفتتح الصفحة الرئيسية على واجهة بفتحة مميّزة: خمس بوّابات دائرية، كلٌّ منها مدخل إلى جزء مختلف من Cafe Gyoen. واحدة تشغّل مشهداً صوتياً محيطاً من المزرعة، وواحدة تفتح فيلماً لمطحنة الطحن، وواحدة تقود إلى المتجر، وواحدة إلى قصّة الحرفة، وواحدة تفتح موقع شارع كلوب في الخرائط. عند التمرير أو اللمس تتمدّد صورة الدائرة إلى الخارج كفتحة تنفتح، فتملأ الشاشة بانسياب ليّن، ثم تستقرّ عائدة.

بُنيت على Framer Motion فوق قاعدة تمرير سلس من Lenis. تتناثر الدوائر وتتلاشى بتأثير مواز خفيف مدفوع بالتمرير مع تحرّك الصفحة، ويظهر العنوان سطراً سطراً بتلاشٍ وضبابية، ولكل حركة مسار مُحترَم بالكامل لتقليل الحركة، بحيث يحصل من يفضّل السكون على نسخة هادئة ثابتة دون فقد أي شيء. على الهاتف تصبح الفكرة نفسها شبكة تتمدّد باللمس مع طبقة ملء الشاشة. إنه نوع الباب الأمامي الذي يخبر الزائر، قبل أن يقرأ كلمة، بأن هذا مكان يهتمّ بالحرفة.

## مبنيّ ليُعثر عليه، من البشر ومن الآلات

الموقع الجميل الذي لا يُعثر عليه لا يبيع شاياً. لذا كانت طبقة قابلية الاكتشاف حيث ذهب جزء كبير من الهندسة، وهي الجزء الذي يجب أن يهمّ المشتري أكثر.

تحمل كل صفحة وصفات تعريفية مقصودة، ورابطاً أساسياً يشير إلى ذاته، وبطاقات مشاركة Open Graph وTwitter من مساعد مركزي واحد، بحيث يظهر الرابط المُشارَك كمعاينة صحيحة بدل أن يصل كرابط عارٍ. تحت ذلك يجلس رسم بيانات منظّمة مكتمل فعلاً: 23 نوع كيان schema.org، مُولَّدة بـ`schema-dts` ومترابطة بالمعرّف في نموذج واحد مقروء آلياً للعمل. `Restaurant` بعنوان وإحداثيات جغرافية وساعات عمل ومطبخ؛ و`Menu` بأقسامه وعناصره؛ وعُقَد `Product` و`Offer` للمتجر؛ و`Event` بمؤدّيه لخبير الشاي الضيف؛ و`FAQPage` و`Store` و`Organization` و`WebSite` ومسارات التنقّل تربطها. حين يبحث أحدهم عن مقهى ماتشا قرب شارع كلوب، أو يسأل مساعداً أين يشرب الماتشا الاحتفالية في سنغافورة، تكون الإجابة مقروءة لا مُخمَّنة.

وفوق ذلك تجلس طبقة قابلية قراءة للذكاء الاصطناعي لا تملكها معظم مواقع المطاعم أصلاً: ملف `llms.txt` رئيسي إضافةً إلى `llms.txt` مركّز بجانب كل صفحة وكل منتج، مع اختبار آلي يُفشل البناء إن شُحنت أي صفحة دون واحد. تُكمِلها خلاصة منتجات Google Merchant Center وخلاصة RSS. ولم نكتفِ بجعل الموقع جاهزاً تقنياً للفهرسة، بل وصلناه: Google Search Console وGoogle Merchant Center كلاهما مُعدّ ومُحقَّق، فتُقدَّم الصفحات وكتالوج المنتجات إلى جوجل فعلياً بدل انتظار أن يُكتشفا. هذا هو الفرق بين أمل أن يُعثَر عليك وأن تكون مهندَساً لذلك.

## تجارة وتذوّقات تكتمل فعلاً

اثنتان من نوايا الضيف الثلاث تنتهيان بمعاملة، فكان على كلتيهما أن تكونا حقيقيّتين لا نموذج تواصل. ولم نبنِ الواجهة فقط، بل أقمنا عملية التجارة كلها خلفها.

جانب Shopify كان لنا من طرف إلى طرف: الواجهة الخلفية للمتجر وإعداداته، وكتالوج المنتجات مبنيّاً ومعروضاً، وثيم headless، والنطاق موصولاً بحيث تعيش الواجهة والدفع تحت علامة واحدة. وعلى تلك الواجهة الخلفية، المتجر الذي يراه الضيف واجهة Shopify بلا رأس، صفحات منتجات حقيقية لخط الماتشا ولمخافق البامبو اليدوية KAZUHO وSHIN، وسلّة، ونظام حسابات ضيوف، ودفع على تدفّق Shopify المُستضاف المتوافق مع PCI.

نظام الحسابات هندسة، لا زرّ Shopify افتراضي. كتبناه برمجياً على واجهة Shopify Customer Account GraphQL: يسجّل الضيوف الدخول عبر تدفّق OAuth كامل مع PKCE، وتُتحقَّق رموز هويتهم تشفيرياً قبل عرض أي بيانات حساب، ويستعيد كل ضيف عائد سجلّ طلباته الحقيقي. يتذكّر المتجر عملاءه بدل معاملة كل زيارة كأنها زيارة غريب أول. وكل ذلك مُوصَّل بالعناية التي تُبقي المتجر جديراً بالثقة، خطّافات ويب موقّعة تحدّث بيانات المنتج عند التغيير، ومهل زمنية وإعادات محاولة على كل نداء متجر، وكوكي سلّة آمنة http-only.

المتجر لا يربح إلا حين تكتمل عملية بيع، ومعظم الزيارات الأولى لا تكتمل. لذا بنينا طبقة دورة الحياة التي تحوّل ما يكاد يضيع إلى إيراد: رسائل سلة متروكة تلقائية تعيد المشتري المتردّد إلى علبته، وتدفّقات شكر وإعادة تفاعل بعد الشراء تحوّل الطلب الأول إلى عادة، والأتمتات التسويقية حولها. تعمل هذه من تلقاء نفسها، تسترجع الإيراد وتكرّره دون أن يرفع أحد إصبعاً عند الكاونتر.

تجري التذوّقات والطاولات عبر تضمين الحجز الرسمي TableAgent للمكان، مع روابط مباشرة صامدة كبديل إن حُجب التضمين يوماً، لأن تضميناً أميناً على مزوّد مدعوم أوثق من طبقة مخصّصة تتظاهر بامتلاك التوافر.

يُقدَّم كل ذلك بشكل ثابت مع إعادة توليد كل ساعة على Vercel، فتكون الصفحات سريعة وحديثة دائماً، ويُشحن برؤوس أمان أساسية، منع الاستنشاق، ورفض التأطير، وسياسة إحالة صارمة، وسياسة أذونات محكمة، وعزل أصل متقاطع لنافذة الدفع المنبثقة.

## المنظومة التقنية، ولماذا يستحقّ كل جزء مكانه

الهندسة الجيّدة ليست كومة أدوات رائجة؛ بل الأداة الصحيحة في كل طبقة، مختارة لسبب يشعر به العميل. هذا ما يشغّل Cafe Gyoen، ولماذا.

| الطبقة | ما استخدمناه | لماذا هو هنا |
| --- | --- | --- |
| إطار العمل | Next.js 16 وReact 19 | معروض من الخادم افتراضياً للسرعة وSEO |
| التنسيق | Tailwind CSS v4 | نظام تصميم واحد في الشيفرة، مضبوط على العلامة |
| الحركة | Framer Motion وLenis | الواجهة بالفتحة والتمرير السلس، آمنة لتقليل الحركة |
| التجارة | Shopify headless | Shopify يملك المدفوعات والدفع؛ ونحن نملك التجربة |
| المحتوى | Velite، MDX مُنمَّط | المدوّنة لا يمكن أن تُشحن مشوّهة أو تكسر البناء |
| البيانات المنظّمة | schema-dts | رسم الكيانات الـ23 مُتحقَّق نوعياً، لا ينحرف |
| النشر | Vercel | صفحات ثابتة، إعادة توليد كل ساعة على الحافة |

لا شيء من هذا مُنشئ صفحات أو كومة إضافات. وهذا بالضبط سبب تسجيل الموقع حيث يسجّل وقراءته النظيفة لمحرّكات البحث ومساعدات الذكاء الاصطناعي. كل خيار حديث ومقصود وموجود لأن الطبقة فوقه أو تحته احتاجته، لا لأنه رائج.

## ما يقوله التدقيق، وما لا يقوله

بتدقيق على الموقع المباشر في يوليو 2026، يعيد PageSpeed Insights لسطح المكتب 100 في الأداء و100 في SEO و100 في سهولة الوصول و100 في أفضل الممارسات، مع 3 من 3 نظيفة في التصفّح الوكيلي. رسم البيانات المنظّمة والخلاصات الآلية لكل صفحة قابلة للتحقّق في مصدر الصفحة اليوم.

صفحة رئيسية بهذا القدر من الحركة، واجهة بفتحة فيها صوت وفيديو وتأثير مواز بالتمرير وكشف بخمس بوّابات، عادةً ما تُثقل ميزانية الأداء. هذه تحافظ على 100 كاملة، لأن الحركة مهندَسة خارج مسار العرض الحرج. تسجيل 100 على صفحة ثابتة سهل؛ أما تحقيقه تحت هذا القدر من الحركة فهو الجزء الصعب.

ننشر النتيجة التقنية لأننا قِسناها. لا ننشر عدد الزوّار أو الإيرادات أو الحجوزات، لأنها ملك العميل ليشاركها ولم تُعتمد لهذه الصفحة. توثّق هذه الدراسة منصّة مُطلقة ومباشرة وأداءها المدقّق، لا ادّعاءً تجارياً لا نستطيع الوقوف خلفه. وهذا الخطّ هو المقصود: العمل يتكلّم، ولا يحتاج أن يستعير أرقاماً لم يكسبها.

تريد منصّة تجعل مكانك يُكتشف ويُحجز ويُشترى منه؟ [خدماتنا](/ar/services) أو [ابدأ مشروعاً](/ar/contact).