برنوسكال: موقع ولوحة تحكم لصانع آلات هيدروليكية في مصر، بالعربية أولاً.

المشكلة

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

ما بنيناه

موقع يجيب عن الأسئلة الهندسية قبل أول مكالمة، ولوحة تحكم تحفظ كل طلب: بالعربية أولاً، وبإنجليزية كاملة مثلها.

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

كيف بنيناه

كتبنا الخطة قبل أي سطر كود: كل صفحة، ومعادلات الحاسبات، والنصوص باللغتين، والبيانات، ومن يحق له فعل ماذا. وأعدنا رسم الهوية من شعار برنوسكال المسجّل. ثم بنينا الموقع ولوحة التحكم وواجهة البرمجة من الصفر، في ثلاثة أجزاء. الموقع ولوحة التحكم مبنيان بـ Next.js، وصفحات الموقع ثابتة، فتفتح بسرعة ويسهل على محركات البحث ومساعدات الذكاء الاصطناعي قراءتها. وواجهة البرمجة مبنية بـ NestJS على PostgreSQL، مع عامل في الخلفية على Redis للبريد والوسائط والنشر. والأسطوانة مرسومة حية بـ three.js، ولا تُحمَّل إلا حين يبدأ الزائر التمرير، وكل سطر في معادلات الحاسبات مغطى بالاختبارات.

النتيجة

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

دورنا

خططنا له وبنيناه: الموقع ولوحة التحكم وواجهة البرمجة، على هوية أعدنا رسمها من شعار برنوسكال المسجّل.