البحث في الموقع

سنتعرف في هذا المقال على مفهوم واجهة برمجية التطبيقات Application Programming Interface، هذا المصطلح السهل المعقد حيث سنحاول فهمه وكيفية بناء مواقع الويب والتطبيقات الحديثة في يومنا هذا بالاعتماد على الواجهات البرمجية ونجيب على سؤال مهم وهو كيف ترتبط الواجهة الأمامية مع الواجهة الخلفية لتطبيق الويب أو الموقع الإلكتروني. هذا المقال هو جزء من سلسلة مقالات حول الواجهة البرمجية API وكيفية الاستفادة منها في بناء تطبيق ويب: مدخل إلى الواجهات البرمجية API الاتصال بواجهة زد البرمجية وفهم عملية الاستيثاق والتصريح أمثلة عملية لاستخدام واجهة برمجة متاجر زد zid API تطوير تطبيق عملي يزيد من احتفاظ العملاء عبر واجهة زد البرمجية مفهوم الواجهة البرمجية للتطبيقات API قبل أن ندخل في أية تفاصيل تقنية عن موضوعنا اليوم، سأحكي لك يومًا في حياة علي. علي هو مبرمج تطبيقات ويب يعمل في إحدى الشركات التقنية العربية، علي يحب تجربة المأكوﻻت المختلفة، بحيث يجرب في كل يوم أكلة جديدة في المطاعم المحيطة وإن سمع بافتتاح مطعم جديد بالقرب من مكان عمله، فإنه ﻻ يتوانى في زيارته وتذوق مختلف اﻷطباق التي يقدمها. ذهب علي ﻷحد المطاعم التي فتحت أبوابها مؤخرا، واختار مكانا هادئًا ونادى النادل يسأله عن اﻷطباق التي يقدمونها من أجل أن يأخذ طلبيته إلى الطباخ لتحضير ما طلبه علي. دوَّن النادل ما يريد علي تناوله من مأكوﻻت وذهب بها إلى الطباخ من أجل تحضيرها، بعد مدة وجيزة، عاد النادل إلى علي وهو يحمل كل ما طلبه وقدمها متمنيا أنه يعجبه اﻷكل، تذوق علي المأكوﻻت وأبدى إعجابه اﻷولي بها، وبدأ في اﻷكل إلى أن أنهى كل ما في الصحون، دفع الحساب، وخرج من المطعم شاكرا النادل على حسن اﻷستقبال. هل تتساءل اﻵن، ما علاقة هذه القصة بالواجهات البرمجية؟ وهل تساءلت يومًا عن طريقة عمل تطبيقات الهواتف الذكية، وكيف تتصل بخوادم الشركات المطورة لها، هل استطعت الوصول إلى إجابات كافية عن ذلك؟ سأبين لك ما العلاقة بين المثال السابق والواجهات البرمجية وكيف أن الواجهات البرمجية ماهي إﻻ تطبيق لمثالنا باختلاف بسيط وهو مكان التطبيق فقط، فمثالنا هو من الواقع الذي نعيشه يوميًا ونراه دائمًا حتى تعودنا عليه حتى أصبحنا ﻻ ندركه، أما الواجهات البرمجية، فقد أصبحت جزءًا ﻻ يتجزأ من حياة مبرمج المواقع وتطبيقات الويب المهنية. كنت قد نوهتك ﻷن تسأل نفسك عن طريقة ربط تطبيقات الهواتف الذكية مع خوادم الشركات. هنالك طريقتين لربط تطبيقات الهواتف الذكية مع خوادم الشركات المطورة، الطريقة اﻷقدم تسمى SOAP وهي اختصار لجملة Simple Object Access Protocol، أما الطريقة اﻷحدث فهي الواجهة البرمجيةللتطبيقات API وهي اختصار لجملة Application Programming Interface، وهي التي سأركز عليها، ولكن باختصار، API هي طريقة لتواصل البرمجيات في ما بينها باستخدام صيغة JavaScript Object Notation والتي تعرف اختصارا بـ JSON. لن أدخل في التفاصيل التاريخية وسأبقى مركزا على الجانب التقني فقط، لهذا أتوقع منك أن تحاول البحث عن تاريخ ابتكار وتطوير تقنية API والتقنية المكملة لها REST والتي هي اختصار لجملة REpresentational State Transfer. مصطلحات وجب معرفتها سنسرد بعض المصطلحات باللغة الإنجليزية والعربية الضروري على كل مطور ويب أن يعرفها: Backend: الواجهة الخلفية، هي المسؤولة عن العمليات المنطقية للنظام، تتعامل مع الملفات أيضا ومع قواعد البيانات. Frontend: الواجهات الأمامية، كل ما يراه المستخدم ويتعامل معه بشكل مباشر، ويتم ربطها مع النظم الخلفية بما يعرف بالواجهة البرمجية للتطبيقات API. API: الواجهة البرمجية للتطبيقات، هي حلقة الوصل ما بين النظم أو الواجهة الخلفية والواجهات الأمامية. Request: الطلب الذي يرسله العميل (قد تكون الواجهة الأمامية) إلى الخادم Server الموجود في الواجهة الخلفية. Header: ترويسة الطلب Request المرسل والذي يحوي بعض البيانات الوصفية التي تصف الطلبية وحالها وأية معلومات إضافية مطلوبة. Body: جسم أو متن الطلب المرسل والذي يحوي غالبًا على البيانات المتبادلة في الطلبية. Response: استجابة أو رد الخادم وهي المعلومات الراجعة من الخادم إلى العميل مقدم الطلب ردًا على طلبه. تحوي المعلومات الراجعة من الخادم إلى العميل على ترويسة Header وأيضا على متن Body. Endpoint: نقطة الوصول، وهي نقطة اتصال الواجهات الأمامية مع موقع محدد في الواجهة الخلفية أي نقطة محددة تتصل عبرها الواجهة الأمامية مع الواجهة الخلفية لغرض محدَّد. HTTP Client Software: عميل خادم HTTP وهو برنامج يساعد على تسريع التعامل مع الواجهات البرمجية بتوفير آلية واضحة في عملية إرسال واستقبال الطلبيات والردود. هل تعرفت على أي من المصطلحات التي ذكرناها قبل قليل؟ لا بأس إن لم تفعل، فسنشرحها لك حتى تكون لديك معرفة مبدئية بموضوع الواجهات البرمجية. لماذا نستخدم الواجهات البرمجية للتطبيقات APIs وما هي فائدتها؟ تُعَد الواجهات البرمجية للتطبيقات طبقة الحماية الأولى First Security Layer للبرمجية الموجودة على خادم الويب، بسبب أنها تفصل ما بين النظم الخلفية والعمليات الجارية على قواعد البيانات عن الواجهات الأمامية سواءً كانت صفحات ويب عادية أو تطبيقات هواتف ذكية. أي أن أي تطبيق ويب أو موقع اليوم يتألف من واجهة خلفية وواجهة أمامية وواجهة برمجية تعد وصلة وصل بينهما. أما الواجهة الخلفية، فتحوي على كامل العمليات والإجراءات والخدمات التي يوفرها التطبيق أو الموقع مثل معالجة صورة أو بيانات أو حتى تقديم خدمة الطقس. أما الواجهة الأمامية فهي الواجهة التي يراها المستخدم والمسؤولة عن عرض البيانات القادمة من الواجهة الخلفية للمستخدم بصورة مناسبة ومتناسقة مع إرسال البيانات من المستخدم إلى الخادم بالشكل الذي يطلبها، فالبيانات المتبادلة تلك تكون بشكلها الخام (تستعمل غالبًا صيغة JSON أو حتى صيغة XML)، أما الواجهة البرمجية للتطبيقات API فهي صلة الوصل كما ذكرنا ووظيفتها استلام البيانات من الواجهة الأمامية وتسلميها للواجهة الخلفية وإرسال البيانات من الواجهة الخلفية إلى الأمامية بطريقة وأسلوب موحد أي هي التي تؤمن عملية التفاهم بين الواجهة الأمامية والخلفية لتأمين التخاطب فيما بينهما. كيف تعمل الواجهات البرمجية للتطبيقات API سأحاول قدر اﻹمكان تبسيط آلية عمل الواجهات البرمجية بمثال عملي من حياتنا اليومية، وليكن مثلا منصة فيسبوك. كما تعلم أنه بإمكانك الدخول إلى حسابك في فيسبوك من أي جهاز تريد، سواءً من هاتفك الذكي أو من جهازك اللوحي أو من جهاز الحاسوب بل بإمكانك الدخول منها مجتمعة وفي نفس الوقت، وهنا يجب أن تطرح سؤاﻻ مهمًا، كيف تتم مزامنة حسابك في كل تلك اﻷجهزة؟ هنا تأتي أهمية الواجهة البرمجية، بحيث أن كل تلك اﻷجهزة متصلة بنظام خلفي واحد وكلها تتصل بالواجهة البرمجية التي تكون حلقة الوصل ما بين كل اﻷجهزة المتصلة و النظام الخلفي. سنأخذ مثاﻻ من حياتنا اليومية وهو موقع فيسبوك، سنقوم بالدخول إلى حسابنا باستخدام الأجهزة التي بحوزتنا، إن لم تكن لديك أجهزة غير جهاز الحاسوب، افتح أكثر من متصفح، ليس نفس المتصفح، مثلا متصفح كروم Google Chrome ومتصفح فايرفوكس Mozilla Firefox، في هذه الحالة يمكنك فتح حسابك 4 مرات باستخدام التصفح الخفي، في متصفح كروم يسمى Incognito Mode أما في متصفح فايرفوكس فيسمى Private Mode. هل قمت بذلك؟ كيف تستطيع إرسال رسائل إلى أصدقائك من أي متصفح وتشاهدها في نفس الوقت من بقية المتصفحات؟ قم بالدخول إلى حسابك على فيسبوك من هاتفك الذكي، من التطبيق الرسمي أو من المتصفح، هل تستطيع أن ترى الرسائل التي قمت بإرسالها على هاتفك أيضا، كيف يحدث ذلك؟ كيف تستطيع الدخول إلى حسابك من أماكن مختلفة في نفس الوقت؟ سأشرح العملية بأكملها بشكل بسيط وبالمقارنة مع مثالنا في بداية المقال وبدون الدخول في التفاصيل الدقيقة في الوقت الحالي. عند دخول علي مطور الويب إلى المطعم، كان عليه أن يختار طاولة محددة برقم حتى يعلم النادل موقعه وأنه يريد تناول الطعام وبالتالي يستطيع تقديم مختلف الخدمات التي يعرضها المطعم. هنا الطاولة وتفاصيلها (من رقم وحجم وغيرهما) تعتبر المكان المتفق عليه من أجل اﻹستفادة من خدمات المطعم، ويمكن القول أنها نقطة الوصول إلى خدمات المطعم Endpoint. في حالة موقع فيسبوك، وعند قيامك فتح التطبيق مثلا، سيتصل تطبيقك بخادم الشركة، في نقطة متفق عليها ومحددة مسبقًا في التطبيق وفيها فقط يستطيع الخادم أن يقدم خدماته للتطبيق. جاء النادل إلى عليٍ والذي يسمى العميل client ليأخذ الطلبات منه، ودون أية ملاحظات أو أي خدمات أخرى، وبعدها ذهب إلى المطبخ ليخبر الطباخ بالطلبات من أجل تحضيرها. هنا نسمي العملية: إرسال طلب Send Request من العميل علي إلى الطباخ في المطعم مقدمة الخدمة. في حالة موقع فيسبوك، أقرب عملية لذلك المثال عملية تسجيل الدخول حيث تُدخل اسم المستخدم الخاص بك مع كلمة المرور، تأخذ الواجهة الأمامية منك هذه المعلومات وترسلها للواجهة الخلفية لموقع فيسبوك لتتحقق منها ومن الطلب الخاص بك، طلب تسجيل الدخول. يستلم الطباخ الطلبية ويتأكد من أنها طلبية صالحة ويمكنك تحضيرها (أي ليست طلبية شراء ملابس مثلًا) ثم يبدأ بتحضيرها وعندما ينتهي منها، يعطيها للنادل الذي يرتبها بدوره في صينية ويأخذها إلى علي ليضعها على طاولته حتى يتسنى له البدء في تذوقها. هذه العملية تسمى: اﻹستجابة Send Response أي استجاب الطباخ لطلبية علي وقدم له ما يريد. وفي حالة موقع فيسبوك، إن كانت المعلومات المقدمة صالحة، سيقوم خادم فيسبوك بالسماح لك بالدخول واستعراض مختلف الصفحات واﻷجزاء الخاصة به والاستفادة من خدمته التي يقدمها. هل اتضحت الصورة العامة اﻵن؟ ببساطة، الواجهة البرمجية تنفذ عمل النادل في المطعم، حيث أن النادل يقوم بأخذ طلبات الزبائن إلى الطباخ وفريقه لتحضيرها وبعد ذلك، يقوم بأخذ تلك استجابة الطباخ لتلك الطلبات إلى أصحابها، أي أن الواجهة البرمجية تأخذ الطلبات من المستخدمين (الواجهة الأمامية) إلى النظام الخلفي لتقوم بعمل محدد ومن ثم تعيد النتائج المتحصل عليها إلى طالبيها أي تعيدها للواجهة الأمامية مرةً أخرى. خاتمة تعرفنا على ماهية الواجهة البرمجية للتطبيقات وأهم المصطلحات فيها وكيف يستفيد منها المطورون في بناء تطبيقات الويب الحديثة واستثمارها في التواصل ما بين الواجهة الأمامية والخلفية لتطبيقات الويب والمواقع الحالية، فالتعامل مع الواجهة البرمجية للتطبيقات ضروري لأي مبرمج متخصص في تطوير الويب، وعليه أن يعي مفهوم الواجهة البرمجة تمامًا إذ أصبح هذا المفهوم هو المفهوم الحديث في التواصل ما بين الواجهة البرمجية الخلفية والأمامية للمواقع وتطبيقات الويب، أضف إلى ذلك أن الكثير من الخدمات والمواقع أصبحت تتيح واجهتها البرمجية (مثل الواجهة البرمجية للمطورين من فيسبوك وتويتر وغيرهما) للاستفادة منها أو حتى هنالك واجهة برمجية مخصصة فقط لتقديم خدمات محددة (مثل واجهة برمجية للحصول على معلومات الطقس) وتقدمها للمطورين للاستفادة من تلك الخدمات في مختلف المشاريع. اقرأ أيضًا المقال التالي: الاتصال بواجهة زد البرمجية وفهم عملية الاستيثاق والتصريح كيفية إنشاء متجر إلكتروني متكامل باستعمال منصة زد الواجهة البرمجية Fetch API في جافاسكريبت

تطورت عملية التسوق في العقود الثلاث الأخيرة نظرًا لظهور ونمو شبكة الإنترنت والتي جعلت من عالمنا مكانًا أصغر يسهل فيه التواصل، إضافة إلى تطور الأساليب اللوجستية والخدمية بدءًا من البنية التحتية وحتى الشحن ونقل البضائع والتحويلات المالية والذي كان له بالغ الأثر في تطوير التجارة التقليدية عمومًا والتجارة الإلكترونية خصوصًا. ساعدت الكثير من العوامل -منها ما أشرنا إليه سريعًا آنفًا- في تغيير أساليب التسوق وبيع المنتجات فكان في المعتاد سابقًا ذهاب الزبون للمتجر لشراء ما يلزمه من بضائع ومنتجات يريدها ولذلك الكثير من المحدوديات والمعوقات فيجب أن يجتمع التاجر والزبون في مكان واحد وأن يتقابلا وجهًا لوجه عدا عن أهمية موقع المتجر الفيزيائي وسمعته في المنطقة وغيرها من العوامل. أما الآن ومع تطور التجارة وتحولها إلى الإلكترونية واحتلالها مركزًا مرموقعًا على شبكة الإنترنت، أصبحت الحكاية معكوسة فالتاجر هو من يأتي إلى الزبون ويعرض عليه منتجاته ليبيعها إليه متوسعًا في الرقعة الجغرافية التي يستهدفها ومقدمًا جميع التسهيلات والمغريات لتشجيع الزبون على الشراء وهنا ظهرت المتاجر الإلكترونية. منصات المتاجر الإلكترونية سابقًا كان يجب لبدء أي تجارة توفر رأس المال وشراء أو استئجار مكان لوضع المنتجات ضمنه والترويج لهذا المكان ومنتجاته واقتصر الأمر على ميسوري الحال أو بعض المغامرين الذين اقترضوا المال من المصارف بشروط صعبة حيث كان احتمال الفشل أكبر من احتمال النجاح. أما اليوم، اختلفت التجارة اختلافًا كبيرًا عما سبق وأصبح بالإمكان فتح متجر إلكتروني بسهولة بدون وجود مكان فيزيائي وهنا تكمن قوة العالم الافتراضي وشبكة الإنترنت في العصر الرقمي الذي تتمتع بمزاياه اليوم. هنالك الكثير من التجار الذين يطلبون بناء متاجرهم الإلكترونية وضبطها وضبط وسائل الدفع فيها أي اختراع العجلة نفسها في كل مرة وكانت تلك مشكلة مشتركة بين التجار وعمل كل ذلك يتطلب فريقًا مختصًا من المبرمجين والمصممين الأمر الذي يتطلب وقتًا وكلفةً كبيرة، فكان الحل البديهي بإنشاء منصات تحوي كل الخدمات والميزات الأساسية لأي متجر (عرض المنتجات والتسويق لها وبيعها) تسهّل على المستخدم ببضعة خطوات إنشاء متجره الخاص وإطلاقه للعموم مع ربطه بكل الخدمات اللازمة الأمر الذي يوفر الوقت والكلفة ولا يتطلب الخبرة التقنية ليصب المستخدم تركيزه على المتجر والتسويق له. أي باختصار، فتح متجر إلكتروني أسهل بكثير من فتح متجر فيزيائي على أرض الواقع ولكن ذلك قد يتطلب منك امتلاك خبرة تقنية وبرمجية كبيرة لبرمجة متجرك الإلكتروني ونشره على شبكة الإنترنت قد لا تمتلكها وهنا جاءت فكرة منصات التجارة الإلكترونية e-commerce platforms. هنالك نوعان من أنواع منصات التجارة الإلكترونية هما: المنصات المقدمة كخدمة، والمنصات المدارة ذاتيًا. منصات التجارة المقدمة كخدمة هذا النوع من المنصات هو الذي يوفر للتاجر أو من يريد إنشاء متجره كل شيء حرفيًا لإطلاق متجره ويوفر عليه عناء ربط متجره بخدمات الدفع والشحن والاستضافة والنطاق مع توفير واجهة ولوحة تحكم كاملة بالمتجر بالإضافة إلى حل أي مشاكل تقنية تواجهه وغيرها الكثير من الخدمات التي تختلف من منصة إلى أخرى. أي تقدم هذه المنصات تسهيلات كبيرة لتصميم متاجر إلكترونية جاهزة وتخصيصها بمجرد الاشتراك فيها فهي توفر لك اتصالًا مباشرًا مع بوابات الدفع وتُساعدك في عملية إنشاء حساب عليها وما تحتاجه من أوراق لذلك، الأمر ذاته بالنسبة لشركات الشحن والتوصيل، ولن تحتاج مع هذه المنصات إلى مبرمج أو استضافة أو مبلغ نقدي إضافي تدفعه هنا وهناك لبناء متجرك الإلكتروني من الصفر وتخديمه، فكل ما عليك فقط امتلاك حساب بنكي وتفكير مميز لتسويق ما تريد تسويقه على هذا المتجر. بناء المتجر عبر هذا النوع من المنصات هو الأكثر راحة للبال ولكنه قد يكون الخيار الأغلى بعض الأحيان فهنالك قاعدة عامة تقول أن راحة البال لا تأتي بالمجان! من مساوئ هذا النوع أنه أقل قابلية للتخصيص فستضطر للالتزام بما توفره المنصة لك فقط من قوالب وإضافات وخدمات فقط وقد تبدو كل المتاجر المنشأة بالاعتماد على منصة ما شبيهة ببعضها بعضًا إلا إن كانت هنالك قوالب متعددة وخيارات واسعة لتخصيص واجهة المستخدم يمكن عبرها إضفاء سمة خاصة على متجرك. في كل الأحوال وباختصار، يمكن عد هذا النوع من المنصات بأنه الشريك التقني الذي يبني لك متجرك الإلكتروني ويتكفل بالجانب التقني والبرمجي للمتجر لتركز أنت على تجارتك الإلكترونية والتسويق للمتجر وزيادة المبيعات. منصات التجارة المدارة ذاتيا (المستضافة) هذا النوع من منصات التجارة الإلكترونية هو الأقل راحة للبال ولكن الأفضل من ناحية التخصيص وتوسيع ميزات وخدمات المتجر، إذ توفر لك المنصات نسخة من المتجر ولوحة تحكمه وتترك لك خيار تثبيتها على استضافة أو خادم وربطها بنطاق وإدارتها إدارةً تقنيةً كاملةً، ونستشف بناءً على ذلك الخبرة التقنية الكبيرة المطلوبة لإدارة هذا النوع من المنصات، وقد تضطر إن لم تملكها إلى توظيف مبرمج متخصص لإدارتها وتخصيصها وبناء متجرك عبرها. إن امتلكت الخبرة، فستوفر خبرتك التقنية والبرمجية عليك الكثير من المال والوقت وينصح عمومًا مع وجود خبرة برمجية التوجه إلى هذا النوع من المنصات واستعماله لبناء المتاجر الإلكترونية. أما إن لم تملك الخبرة، فقد تضطر إلى دفع مبلغ من المال لقاء توظيف مبرمج لتهيئة المتجر وربطه مع خدمات المتجر الأساسية مثل الدفع والشحن وحل أي مشاكل تقنية تواجهك فلن يكون هنالك غالبًا فريق دعم فني من طرف المنصة لتساعدك وتدعمك، الأمر الذي قد تفضل فيه اللجوء إلى النوع الأول من المنصات إن كان متجرك بسيطًا ولا يحتاج إلى الكثير من التخصيص. سهل أيضًا ظهور البرمجيات مفتوحة المصدر والحرة فكرة التحرر من قيود الاحتكار واحتلال سوق منصات التجارة الإلكترونية ورخص أيضًا من أسعار بناء المتاجر الإلكترونية وساهمت في انتشار الفكرة أيما انتشار ونذكر من تلك المنصات ووكومرس WooCommerce وأوبن كارت OpenCart وماجينتو Magento وهنا لن تحتاج بناء الموقع من الصفر فهذه المنصات تهدف لمساعدة أي شخص يرغب في بناء متجره الإلكتروني بالقيام بذلك دون الحاجة لمبرمج ولكن مع ذلك فيجب عليك امتلاك خبرة تقنية بسيطة كما ذكرنا تخولك التعامل معها لوحدك وهذه هي ضريبة الخدمات المجانية على عكس المنصات والخدمات المدفوعة التي تختصر عليك الخبرة والوقت مقابل دفع مبلغ من المال. وبالإضافة إلى أن أغلب منصات هذا النوع مجانية ومفتوحة المصدر، تجد لكل منصة منها مجتمعًا داعمًا كبيرًا يحاول توسيع قدرة عمل المنصة وتوفير الكثير من الحلول والأدوات المساعدة ولا يتوانى عن الإجابة والمساعدة في حل أي مشكلة تعترضك. منصات تجارة إلكترونية عربية سنذكر ما يلي أشهر منصات التجارة الإلكترونية العربية والتي تنحصر كلها في النوع الأول من منصات التجارة الإلكترونية التي ذكرناها آنفًا. زد تأسست منصة زد عام 2017 بهدف مساعدة أصحاب الأعمال في منطقة الخليج العربي على تنمية تجارتهم الإلكترونية بطرق سهلة وسريعة ليتوسع عملهم بشكل أفضل حتى اليوم. خدَمت منصة زد منذ تأسيسها وإلى حين كتابة هذا المقال أكثر من 4000 تاجر تجزئة فعال وذلك من خلال التشبيك مع أكثر من 26 مزود خدمة وشريك لتقديم خدماتهم لهذه المتاجر عبر منصة زد، تعمل هذه المتاجر في أكثر من 16 قطاع مختلف من قطاعات البيع بالتجزئة وبأحجام عمل مختلفة. ساعد ظهور منصة زد العديد من تجار التجزئة على اتخاذ خطوة جريئة نحو العالم الرقمي لإطلاق تجارتهم إلكترونيًا أيضًا وحتى الآن تجاوزت قيمة مبيعات المتاجر على منصة زد 3 مليارات ريال سعودي وهو رقم ضخم ويُعطي فكرة عن أهمية التجارة الإلكترونية وضرورة المسارعة في نقل المتاجر إلى نسختها الإلكترونية في العالم الرقمي. سلة تعتبر منصة سلة -والتي يمثلها تطبيق سلة في المملكة العربية السعودية- إحدى أبرز المنصات التي يعتمد عليها التجار في إنشاء وتصميم متاجر الكترونية جاهزة وهي تملك ثلاث باقات متنوعة للاشتراك فيما بينها بميزات مختلفة، مع إتاحة طرق دفع وشحن وتوصيل سهلة الإعداد ضمن المنصة. يمكن ربط النطاق الخاص بك مع المتجر الإلكتروني على منصة سلة بسرعة وبخيار بسيط ضمن الإعدادات، إلا أنَّ بعض ميزاتها الأخرى المتعلقة بالتسويق والتحسين لمحركات البحث تكون محدودة وحصرية للباقة الأعلى. تذكر منصة سلة عبر موقعها الرسمي أن عدد المتاجر المنشأة عبرها وصل إلى 10 آلاف متجر وصلت مبيعاتها أجمع إلى 3 مليار ريال سعودي لحظة كتابة هذا المقال. متاجر منصة متاجر هي منصة تجارة إلكترونية أخرى مقرها المملكة العربية السعودية ميزتها أنها توفر خيار إنشاء متجر إلكترونية مع تطبيق للهاتف الجوال بنسختيها آندرويد و iOS خاصة بالمتجر وبه شعار المتجر وهويته التجارية. يمكنك إنشاء متجرك خلال دقائق بينما تحتاج إلى 7 أيام عمل لتفعيل تطبيقات الجوال. توفر المنصة خيارات عدة لخدمات الشحن وخدمات الدفع الإلكترونية عبر بوابات الدفع كما أنها توفر ميزة فتح حساب خاص بالمتجر في تلك الخدمات دون الحاجة إلى تكبد عناء فتحها بشكل خاص ثم ربطها بالمتجر. إكسباند كارت تبدو منصة اكسباند كارت ExpandCart الأقدم من بين منصات التجارة الإلكترونية العربية وذلك ظاهر من الإحصائيات التي تعرضها المنصة عبر موقعها إذ أنشئ عبرها أكثر من 20 ألف متجر إلكتروني تجاوزت مبيعات تلك المتاجر 700 مليون دولار. توفر المنصة لوحة تحكم شاملة تحوي على أكثر من 6000 ميزة وخدمة وخاصية لمتجرك الإلكتروني كما أنها تدعم اللغة العربية في الأساس بالإضافة إلى اللغة الإنجليزية وجميع اللغات الأوروبية، فهي لا تستهدف السوق العربية فقط، بل تستهدف السوق العالمي بتلك الخطوة ويمكن لمتجرك الاستفادة من خاصية تعدد اللغات تلك إن كان بحاجة إليها. منصات التجارة الإلكترونية الأجنبية سنذكر الآن أشهر منصات التجارة الإلكترونية الأجنبية والتي تكون بين النوع الأول والثاني بل أغلبها هو من النوع الثاني صراحةً النوع المدار ذاتيًا والقابل للتخصيص. أوبن كارت منصة أوبن كارت opencart هي منصة تجارة إلكترونية حرة ومفتوحة المصدر تنتمي إلى النوع الثاني من أنواع منصات التجارة الإلكترونية التي ذكرناها في الأعلى. المنصة مجانية ولكن بعض الإضافات والتوسيعات التي قد تضيفها إلى متجرك غير مجانية وتحتاج إلى شراء، وتذكر الإحصائيات في موقعها الرسمي أنها شغَّلت ما يزيد عن 342 ألف متجر إلكتروني حول العالم. تحوي المنصة على خدمات ضمنية لتحسين الظهور في محركات البحث SEO كما تتيح آلية سهلة في إدارة المنتجات والعملاء والطلبيات والضرائب وغيرها من الأمور. تضم المنصة سوقًا كبيرًا من الإضافات والقوالب يزيد عددها عن 13 ألف الأمر الذي يساعد في توسيع عمل متجرك ودعم تجارتك وتحسينها بربطه بالكثير من الخدمات الخارجية التي لا توفرها المنصة نفسها بالإضافة إلى تخصيص واجهة المتجر بقالب مميز، وأهم ما نذكر من تلك الإضافات والتوسيعات توفر إضافة اللغة العربية الكاملة للمتجر ولوحة التحكم. توفر المنصة ميزة تعدد المتاجر أي يمكن بلوحة تحكم واحدة إدارة أكثر من متجر كل منها يبدو وكأنه متجر منفصل ومستقل عن الآخر كما أنها توفر خيارات النسخ الاحتياطي والاستعادة في حال حصل أي طارئ أو خلل للمتجر. وفيما يخص خدمات الدفع والشحن، فستحتاج إلى الدخول إلى سوق الإضافات الخاص بتلك الخدمات والبحث عن الخدمة الأنسب لربطها بمتجرك. ماجنتو منصة ماجنتو Magento هي منصة أخرى من منصات التجارة الإلكترونية المفتوحة المصدر المندرجة تحت النوع الثاني، وهي منصة عريقة انطلقت عام 2008 ثم حازت عليها شركة أدوبي عام 2018 لتضيف إليها اسم Adobe Commerce تدريجيًا مع اسم ماجنتو ولا شك أن هذا الاستحواذ من شركة كبيرة مثل أدوبي سيعزز المنصة ويحسنها ويأخذها نحو الازدهار. واجهة ماجنتو سهلة الاستخدام بالإضافة إلى توفير خيار السحب والإفلات لبناء واجهة المتجر بسهولة وسلاسة مع الحرص على تحسين تجربة المستخدم والتفاعل مع المتجر. كما توفر أداة مميزة لعرض الإحصائيات حول المتجر وتحليل أدائه لاتخاذ القرار المناسب فيما يخص المتجر والعملاء والمنتجات. تعد المنصة أيضًا خيارًا جيدًا لمتاجر الجملة B2B ومتاجر البيع بالتجزئة B2C. أما فيما يخص الربط بوسائل الدفع والشحن والتسويق وغيرها من الخدمات، فهي متوفرة ضمن سوق التطبيقات مثل العادة في هذا النوع من المنصات والتي بعضها قد يكون مجانيًا والآخر مدفوعًا. وأما فيما يخص دعم اللغة العربية، فهنالك إضافة واحدة قد لا تكون بالجودة المطلوبة (بحسب ما يبدو من تقييم تلك الإضافة والصور الظاهرة)، لذا ستضر حينها فقط لاستعمال النسخة الأجنبية فقط أو البحث عن قوالب عربية خارجية، هذا وقت كتابة المقال وقد يضاف دعمًا أساسيًا للغة العربية لاحقًا فتأكد من الأمر. ووكومرس ووكومرس هي إضافة تجارة إلكترونية مفتوحة المصدر لمنصة ووردبريس الشهيرة، انطلقت عام 2011 وما لبثت أن حصلت على شهرة كبيرة نظرًا لشهرة منصة ووردبريس المبنية عليها أولًا وبساطة تثبيتها وضبطها وتخصيصها، بالإضافة إلى المجتمع الكبير الذي يقف وراءها ويدعمها ناهيك عن قوة مجتمع ووردبريس. تندرج هذه الإضافة طبعًا ضمن النوع الثاني من أنواع منصات التجارة الإلكترونية. تتوفر نسخة عربية من إضافة ووكومرس يسهل معها إنشاء متاجر عربية، بالإضافة إلى سوق كبير من التطبيقات والخدمات المتنوعة التي توسع من عمل متجرك وتساعد على تحسينه. وفرنا سلسلة مقالات كاملة بعنوان متجر ووكومرس كما يمكنك الاطلاع على قسم ووكومرس في الأكاديمية ففيه مقالات عديدة مفيدة. شوبيفاي شوبيفاي shopify هي منصة تجارة إلكترونية تنتمي إلى النوع الأول من نوعي منصات التجارة الإلكترونية، أي يمكنك بمجرد الاشتراك فيها بناء متجرك الإلكتروني بدقائق معدودة وإطلاقه على الإنترنت كما توفر لك الدعم وكل الحلول التي يحتاج إليها متجرك. انطلقت شركة شوبيفاي من كندا عام 2006 واليوم هي من أشهر الشركات العالمية التي تقدم حلول التجارة الإلكترونية إلى العالم أجمع، فوفقًا لإحصائية موقع Build with، وصل عدد المواقع والمتاجر التي تخدِّمها شوبيفاي إلى 1.869 مليون موقع على الإنترنت لحظة كتابة المقال وهو رقم كبير يدعو إلى النظر في أمرهذه المنصة. توفر المنصة واجهتها بعدة لغات ليست العربية من بينها وهذا يدعو للتأكد من دعم اللغة العربية للمنصة أو البحث عن قوالب تدعم اللغة العربية دعمًا كاملًا. مقارنة بين منصة زد ووكومرس حتى نعرف الفرق الذي أشرنا إليه سابقًا بين منصات التجارة الإلكترونية العربية والأجنبية، وترجيح العربية على الأجنبية منها، كان لزامًا علينا توضيح السبب وبما أن الأشياء بضدها تُعرف، أردنا إجراء موازنة بين أشهر منصة تجارة إلكترونية عربية وأجنبية لنختار منصة زد للأولى وإضافة ووكومرس للثانية فلا يتسع المقام في هذا المقال إلى الموازنة بين منصات التجارة الإلكترونية كلها العربية والأجنبية. سنعرض منصة التجارة الإلكترونية العربية زد بموازنة الميزات والخدمات التي تقدمها مع منصة ووكومرس العالمية للتجارة الإلكترونية. نطاق الاستخدام والمنطقة المستهدفة منصة زد حاليًا تُخدِّم فقط التجار المتواجدين في السعودية ودول الخليج العربي فقط بغض النظر عن جنسية التاجر مع العمل على التوسع مستقبلًا لتخديم جميع الدول العربية. لا تخدم هذه الميزة التجار أو المتاجر المتواجدة خارج دول الخليج وهنا يتفوق ووكومرس على منصة زد من ناحية المساحة الجغرافية التي يغطيها ولكن تتميز منصة زد بنوعية وتوافق الخدمة التي تُقدمها حاليًا لتجار الخليج العربي مقارنة مع ووكومرس. تحيط منصة زد بجميع الصعوبات والعقبات التي يمكن أن يواجهها التاجر في منطقة الخليج العربي وبناءً على ذلك هذه المنصة مبنية لتُساعد هؤلاء التُجار على تجاوز المشاكل المحلية بينما منصة ووكومرس هي منصة عالمية ولا تستطيع تقديم حلول خاصة بكل منطقة جغرافية فالحلول التي تُقدمها هي عامة ومرتبطة بالمتطلبات العامة للتاجر وليست مخصصة لمنطقة ما. الوقت اللازم لبناء متجرك الإلكتروني يستغرق إنشاء حساب على منصة زد عدة دقائق فقط لتحصل على متجر إلكتروني جاهز يحتاج فقط إدخال المعلومات الخاصة بك إضافة إلى تخصيص المتجر من ناحية التصميم والشعار أما بناء متجر على منصة ووكومرس فيتطلب حجز استضافة وتثبيت ووردبريس ثم إضافة ووكومرس وقالب مناسب لما تريد عرضه على متجرك الإلكتروني وهذا يتطلب ساعة على أقل تقدير إن كنت خبيرًا بالتعامل مع منصة ووردبريس وحجزت مسبقًا النطاق Domain والاستضافة أو قد تضطر للاستعانة بمطور ووردبريس لإكمال ما سبق (انظر سلسلة متجر ووكومرس التي شرحنا فيها كيفية إنشاء متجر إلكتروني خطوة بخطوة عبر ووكومرس). بوابات الدفع المدعومة لا شك أن منصات التجارة الإلكترونية العربية تدعم المنطقة العربية، فنجد أن منصة زد موجهة لتجار الخليج العربي لذلك جميع البوابات الموجودة حاليًا وهي Tap وMOYASAR وPayTabs وHyperPay وPayFort تدعم قسمًا كبيرًا من البنوك الموجودة في منطقة الخليج العربي. وعند المقارنة مع ووكومرس فجميع البوابات السابقة تُقدم إضافات لها ضمن مخزن ووردبريس إضافة إلى دعم بوابات عالمية أخرى مثل بايبال وسترايب وهي غير موجودة حتى الآن في منصة زد. لكن توفر شراكة منصة زد مع بعض بوابات الدفع السابقة تكاليف مُخفضة (سواء تكاليف التأسيس أو التكاليف الشهرية) وهي ميزة أخرى تُحسب لمنصة زد. خيارات الشحن والتوصيل المدعومة تُقدم منصة زد حاليًا خدمة جديدة تُدعى زد شب لتسهيل إدارة شركات الشحن حسب مستويات الخدمة والتي تتضمن عقدًا إلكترونيًا واحدًا يضم أكثر من 15 شركة شحن وتحتاج لضغطة زر واحدة لتفعيل الخدمة أو تستطيع استخدام خيارات شحن مستقلة مثل SMSA وFastlo وطرد وسلس وارامكس وأي مكان وهي خيارات مختلفة تُغطي مدن ودول مختلفة ضمن الخليج العربي بتكاليف وأزمنة توصيل مُختلفة. بينما يتوفر في ووكومرس إضافات مجانية لربط الموقع مع شركة الشحن ولكن هذا ليس مُتاح لجميع الشركات وفي بعض الأحيان تكون الإضافة مخصصة للشحن ضمن نطاق جغرافي مُحدد قد لا يُناسب الفئة التي تستهدفها وهنا أيضًا تتفوق منصة زد على ووكومرس من ناحية مراعاتها لهذا الأمر وربط جميع شركات الشحن المتواجدة ضمن منطقة الخليج العربي. كلفة تشغيل المتجر الإلكتروني حقيقة إن التكاليف متقاربة جدًا بين منصة زد ومنصة ووكومرس وترجح كفة الميزان لمنصة زد بفضل ما تقدمه من تخفيضات بشراكتها مع عدد من المنصات المساعدة مثل بوابات الدفع وشركات الشحن والتوصيل والفرق أن منصة زد تستهدف جمهور الخليج العربي بينما ووكومرس تستهدف العالم أجمع. لا ننسى أيضًا أن ووكومرس مجاني ومفتوح المصدر وقد يتطلب بعض الخبرة لإدارة المتجر وضبطه وتطويره الأمر أو حتى حل المشكلات التي تعترضك أو إضافة ميزات وربط خدمات الأمر الذي يدفعك إلى توظيف أحدهم إن لم يكن لديك الخبرة اللازمة وهي كلفة تؤخذ في الحسبان على عكس منصة زد التي توفر لك خدمة دعم فني لحل أي مشاكل تعترضك وتوفير أي حلول تريدها. إمكانية التخصيص نجد أن هذا الخيار تربح فيه المنصات التي تنتمي عمومًا إلى النوع الثاني من أنواع منصات التجارة الإلكترونية أي المنصات المدارة ذاتيًا، ولمَّا كانت ووكومرس تتبع لهذا النوع الثاني، فهي تتفوق على زد التابعة للنوع الأول من ناحية قابلية التخصيص فهنالك مرونة كبيرة في التعامل مع المنصة وتخصيصها وضبطها كما أن المجتمع الذي يقف وراء يساعد على توفير الكثير من الخدمات والخيارات ويقدم الدعم والمساعدة فيما يخص عملية التخصيص، أما على الصعيد الآخر، فإن منصة زد تلزمك باستعمال الخدمات والخيارت التي تتيحها فقط وليس هنالك حرية كبيرة في موضوع التخصيص. أي منصة تضمن لي راحة البال لأركز أكثر على تنمية تجارتي وتطويرها؟ مما رأينا وجدنا أن المنصات العربية تتوفق في بعض النواحي والميزات على المنصات الأجنبية خصوصًا في المنطقة العربية ودعم اللغة العربية، بالإضافة إلى نوعية الخدمة المقدمة للمستخدم العربي والدعم الفني العربي، فنجد أن منصة زد تقدم دعمًا على مدار الساعة وباللغة العربية وهناك فريق عمل متأهب لضمان عمل المنصة بمتاجرها على أكمل وجه بأقل زمن أعطال ممكن، أيضًا تمتلك المنصة فريق تطوير يعمل باستمرار لمواكبة التحديثات التي تطرأ في شركات التوصيل أو التطبيقات المتوفرة على المنصة. أما عند استخدام ووكومرس، فستحتاج إلى آلية تواصل باللغة الأجنبية للتواصل مع الدعم الفني أو المجتمع الداعم إن حصلت أي مشكلة أو طارئ أو قد تضطر إلى توظيف مبرمج لمتابعة الموقع وحل المشاكل أو لمتابعة الاستضافة في حال توقفها، كما أنَّ منصة ووردبريس مفتوحة المصدر والإضافات المجانية الموجودة في مخزن ووردبريس هي نتاج مجهود شخصي لمبرمجين دون أي عائد مادي لذلك لا يوجد ضمان لاستمرارية تحديث هذه الإضافات أو السرعة في عمل تحديث في حال وجود ثغرات أمنية، وهو الأمر الذي لا يًغتفر في أي متجر إلكتروني أو موقع إلكتروني يتضمن تعاملات مالية. ما سبق لا يُقصد به التبخيس بمنصة ووكومرس بل على العكس تمامًا فهي منصة عالمية وتتطور باستمرار وتسيطر على نسبة كبيرة من المتاجر الإلكترونية على شبكة الإنترنت، ولكن منصة زد هي منصة عربية مصنوعة بأيادي عربية تستهدف العرب على عكس ووكومرس، كما أنها تدعم اللغة الإنجليزية الأمر الذي يُساعد على استهداف السياح والموظفين الأجانب ضمن المنطقة لذلك فهي تُعتبر الحل الأفضل للتجارة الإلكترونية والذي يخدم الخليج العربي حاليًا وضمن أهدافها المستقبلية التوسع إلى بقية دول العالم العربي. خاتمة ذكرنا في المقال أبرز منصات التجارة الإلكترونية العالمية والعربية مع مقارنة سريعة فيما بينهم وشرح أسباب تفوق المنصات العربية على العالمية للتاجر العربي كونها تركز على منطقتنا العربية وتقدم حلولًا لمشاكلنا التي نواجهها في الدفع والشحن والتوصيل والإدارة والتسويق ناهيك عن دعم اللغة العربية الأساسي. والآن أصبحت جاهزًا لبدء تجارتك الإلكترونية وفتح متجرك الإلكتروني ودخول العالم الرقمي من أوسع أبوابه. سنكمل في المقال التالي إنشاء متجر إلكتروني على منصة زد من سلسلتنا هذه شرح كيفية إنشاء متجر إلكتروني على إحدى أشهر منصات التجارة الإلكترونية العربية.

تعرفنا في المقال اﻷول على الواجهة البرمجية للتطبيقات API وكيفية استعمالها في تطوير المواقع وتطبيقات الويب على ماهية الواجهات البرمجية وأسس عملها ولماذا نحتاج إليها، وتعلمنا في المقال الثاني، المعنون بـ الاتصال بواجهة برمجة التطبيقات API وفهم عملية الاستيثاق والتصريح كيفية الاتصال بالواجهة البرمجية بصورة صحيحة، وأخذنا مثاﻻ عن ذلك باستخدام الواجهة البرمجية لمنصة زد، وإن كنت تتبعت جميع الخطوات التي ذُكرت في المقالين السابقين، فسنفترض اﻵن أن لديك حساب مطور على منصة زد وأيضا متجر للتجربة عليه أو عد إليهما ثم أكمل بعدهما قراءة هذا المقال. هذا المقال هو جزء من سلسلة مقالات حول الواجهة البرمجية API وكيفية الاستفادة منها في بناء تطبيق ويب: مدخل إلى الواجهات البرمجية API الاتصال بواجهة زد البرمجية وفهم عملية الاستيثاق والتصريح أمثلة عملية لاستخدام واجهة برمجة متاجر زد zid API تطوير تطبيق عملي يزيد من احتفاظ العملاء عبر واجهة زد البرمجية متطلبات مسبقة حتى تستطيع العمل بجميع التجارب، يجب عليك الحصول على كل من مفتاح الوصول Access Token وهو المفتاح المساعد الخاص بحسابك كمطور، وأيضا مفتاح المتجر X-Manager-Token وهو المفتاح المساعد الخاص بالمتجر المنشود الذي ستطبق عليه العملية. يمكنك جلب مفتاح الوصول بعد تفعيل تطبيقك في منصة تطور زد للمطورين أما بخصوص مفتاح المتجر المساعد، فيمكنك جلب واحد من متجر حقيقي منشور أو تجريبي تنشئه بغرض التجربة ولكن يفضل استخدام متجر تجريبي حتى ﻻ يتأثر متجرك الفعلي بأية عمليات تجريبية سنطبقها في هذا المقال (انظر مقال كيفية إنشاء متجر إلكتروني متكامل باستعمال منصة زد). لن أذكر أنك تحتاج لكل من مفتاح الوصول Access Token ومفتاح المتجر X-Manager-Token واللغة في جميع التجارب التي سنجريها على نقاط وصول الواجهة البرمجية ﻷنها مطلوبة في ترويسات الطلبيات كلها دون استثناء. استعراض العملاء توفر واجهة زد البرمجية إمكانية استعراض العملاء عبر إرسال طلب HTTP من النوع GET إلى نقطة الوصول التالية: /managers/store/customers تستعمل نقطة الوصول هذه لاستعراض بيانات عملاء المتجر الذي حددناه بالمفتاح X-Manager-Token المرسل مع الطلبية وتذكر دومًا أننا سنرسل مع الطلبية متفاح المتجر ومفتاح الوصول مع الطلبية حتى لو لم نذكر ذلك صراحةً. المعلومات المطلوبة: page: ويعني كم من صفحة تريد استعراضها per_page: عدد العملاء المراد استعراضهم في الصفحة الواحدة هذه المعلومات نحتاجها في جميع طلباتنا القادمة، وهي تخص ترقيم الصفحات Pagination لترتيب البيانات في واجهة المستخدم بتنسيق مقبول التي نحصل عليها والتي قد تكون بيانات آلاف العملاء. حسب التوثيق، فإنها ترسل مثل استعلام Query، وبالتالي الطلب سيكون كالتالي: سنرسل الطلب بهذا الشكل للواجهة البرمجية لمنصة زد، وننتظر إجابة الخادم Response والتي ستكون كالتالي: نلاحظ أن الرد يحوي على مفتاح Key تحت اسم customers ونوعه مصفوفة، وفي حالتنا هذه، مصفوفة فارغة ﻷن متجرنا التجريبي ﻻ يحوي عملاء مسجلين فيه. إضافة منتج جديد توفر واجهة زد البرمجة إمكانية إضافة منتج جديد إلى المتجر المحدد بالمفتاح المرسل عبر إرسال طلبية إلى نقطة الوصول التالية: /products المعلومات المطلوبة في الترويسة: STORE_ID: وهو الرقم التعريفي الخاص بالمتجر خاصتك، ستحصل على الرقم التعريفي الخاص بالمتجر من نفس الصفحة التي حصلت منها على مفتاح المتجر X-MANGER-TOKEN ROLE: وهو السماحية الخاصة بك، ويمكن أن تأخذ القيمة Manager أي المدير، أو Customer أي عميل، في حالتنا سنحتاج إلى استخدام السماحية Manager. أما جسم الطلب Request Body فيجب أن يحوي المعلومات التالية: cost: وتعني التكلفة ويجب أن تكون سلسلة نصية string quantity: الكمية ويجب أن تكون سلسلة نصية string keywords: الكلمات المفتاحية ويجب أن تكون مصفوفة من السلاسل النصية name: الاسم، ويكون كائن Object يحوي مفتاحين ar و en description: التوصيف ويجب أن يكون كائنًا يحوي مفتاحين ar و en price: السعر ويكون سلسلة نصية sale_price: سعر البيع ويكون سلسلة نصية weight: الوزن، ويكون كائنا يحوي على مفتاحين unit ويعني وحدة القياس، و value وهي القيمة Is_published: و يجب أن يكون بولياني Boolean، وبالتالي إما True أو False، وتعني هل المنتج معروض للشراء أم ﻻ. سنضيف منتجًا جديدًا عن طريق إرسال طلب باستخدام برنامج Insomnia، وسيكون من نوع Post كالتالي: توضح الصورة التالية نموذج عن جسم الطلبية المرسل بصيغة json: إن كانت كل المعلومات المطلوبة صحيحة، فسيُنشأ المنتج الجديد وإرسال معلومات المنتج على النحو التالي: { "id": "37c99a36-4a43-4c96-8566-6158b0263c74", "sku": "Z.111684.16216931837021275", "parent_id": null, "name": { "ar": "منتج تجريبي", "en": "Testing Product" }, "slug": "منتج-تجريبي", "price": 150.0, "sale_price": 130.0, "formatted_price": "150.00 ر.س ", "formatted_sale_price": "130.00 ر.س ", "currency": "SAR", "currency_symbol": "ر.س ", "attributes": [], "categories": [], "display_order": null, "has_options": false, "has_fields": false, "images": [], "is_draft": false, "quantity": 1000, "is_infinite": false, "html_url": "https://zid.store/madjid/products/منتج-تجريبي", "weight": { "value": 0.5, "unit": "kg" }, "keywords": [ "أكاديمية حسوب", "حسوب", "منتج تجريبي" ], "requires_shipping": true, "is_taxable": true, "structure": "standalone", "seo": null, "sold_products_count": null, "cost": 100.0, "is_published": true, "created_at": "2021-05-22T14:19:43.702509Z", "updated_at": "2021-05-22T14:19:43.702542Z", "description": { "ar": "[\"<h1>من الممكن وضع تنسيقات هنا</h1>\"]", "en": "[\"<h1>You can add HMTL here</h1>\"]" }, "variants": [], "custom_user_input_fields": [], "custom_option_fields": [], "options": [], "related_products": [], "next_product": null, "previous_product": null } استعراض المنتجات تتيح الواجهة البرمجية لمنصة زد استعراض جميع المنتجات المعروضة على المتجر، يكفي فقط أن نرسل طلبا من نوع GET إلى نفس نقطة الوصول السابقة: /products وبنفس ترويسة الطلب Headers السابقة، بحيث تُرسل كل من الترويسة STOREID والترويسة ROLE مع إضافة المفتاحين pagesize وpage كالتالي: سترسل الواجهة البرمجية لمنصة زد ردًا Response يحوي جميع المنتجات الموجودة في المتجر في الوقت الحالي سواء كانت معروضة أو مخفية، الرد سيكون مشابهًا للرد التالي: { "count": 1, "next": null, "previous": null, "results": [ { "id": "37c99a36-4a43-4c96-8566-6158b0263c74", "sku": "Z.111684.16216931837021275", "parent_id": null, "name": { "ar": "منتج تجريبي", "en": "Testing Product" }, "slug": "منتج-تجريبي", "price": 150.0, "sale_price": 130.0, "formatted_price": "150.00 ر.س ", "formatted_sale_price": "130.00 ر.س ", "currency": "SAR", "currency_symbol": "ر.س ", "attributes": [], "categories": [], "display_order": null, "has_options": false, "has_fields": false, "images": [], "is_draft": false, "quantity": 1000, "is_infinite": false, "html_url": "https://zid.store/madjid/products/منتج-تجريبي", "weight": { "value": 0.5, "unit": "kg" }, "keywords": [ "أكاديمية حسوب", "حسوب", "منتج تجريبي" ], "requires_shipping": true, "is_taxable": true, "structure": "standalone", "seo": null, "sold_products_count": null, "cost": 100.0, "is_published": true, "created_at": "2021-05-22T14:19:43.702509Z", "updated_at": "2021-05-22T14:19:43.702542Z" } ] } كل المنتجات موجودة داخل المفتاح results وهي مصفوفة كائنات Array Of Objects. استعراض قائمة البلدان المدعومة ﻻستعراض قائمة جميع البلدان التي تدعمها منصة زد، يكفي أن نرسل طلبا من نوع GET إلى نقطة الوصول التالية: /settings/countries كالعادة، يجب أن تحوي ترويسة Header الطلب على المفاتيح المساعدة ولغة الطلب، وستعيد لنا الواجهة البرمجية لمنصة زد، إجابة Response تحوي على مصفوفة كائنات Array Of Objects تحت مفتاح باسم countries بالشكل التالي: استعراض قائمة المدن للحصول على قائمة المدن المدعومة، يجب أن نرسل طلبا من نوع GET إلى نقطة الوصول التالية: /settings/cities/by-country-id/{country_id} بحيث يتم استبدال country_id بالرقم المعرف الخاص بالبلد الذي نريد استعراض المدن الموجودة فيه، فمثلا لو أردنا استعراض المدن الموجودة في المملكة العربية السعودية، سنرسل الطلب كالتالي: /settings/cities/by-country-id/184 لنجرب الآن إرسال الطلبية وسنحصل على نتيجة مشابهة للرد التالي: في حالة كان الرقم التعريفي الخاص بالبلد صحيحًا، سترسل الواجهة البرمجية قائمة المدن على شكل مصفوفة كائنات Array Of Objects تحوي جميع المدن لذلك البلد كما هو واضح في الصورة السابقة. إضافة وسيلة شحن ﻹضافة وسيلة شحن لمتجرك باستخدام الواجهة البرمجية، يكفي أن نرسل طلبًا من النوع POST لنقطة الوصول التالية: /managers/store/delivery-options/add ترويسات الطلب Headers يجب أن تحوي كل من مفتاح الوصول Access Token ومفتاح المتجر X-Manager-Token واللغة Accept-Language مثل العادة. أما بدن الطلب Body فيجب أن يحوي المعلومات التالية: name: اسم وسيلة الشحن المراد إضافتها. cost: تكلفة الشحن وتكون ثابتة. cod_enabled: وتعني الدفع عند اﻹستلام، وتكون إما 0 لتعطيل الخيار أو 1 لتفعيله. cod_fee: تكلفة الدفع عن اﻹستلام إن كانت موجودة. cities: ويجب أن تحتوي على المعرفات الخاصة بالمدن (تُحصّل من خلال الطلب السابق). delivery_estimated_time_ar: وصف للفترة المتوقعة لوصول المشتريات باللغة العربية. delivery_estimated_time_en: وصف للفترة المتوقعة لوصول المشتريات باللغة اﻹنجليزية. سنرسل طلبًا بالشكل التالي: { "name": "Hsoub Delivery", "cost": "50", "cod_enabled": "1", "cod_fee": "20", "cities": [ 1, 71, 76, 38 ], "delivery_estimated_time_ar": "3 أيام", "delivery_estimated_time_en": "3 days" } عند إرسال الطلب، سنتلقى ردًا Response من الواجهة البرمجية يفيد بأن نقطة الوصول هذه قد حصلت على حمايتها، ولم يعد باﻹمكان الوصول إليها من الواجهة البرمجية باستخدام مفتاح الوصول Access Token الخاص بنا وقت كتابة المقال وقد تصبح متاحة لاحقًا أثناء قراءة المقال. هذا مثال جيد عن رسائل الأخطاء المختلفة التي ممكن أن تعيدها الواجهة البرمجية، ويجب أن تحصن تطبيقك جيدًا بمعالجة أي خطأ يحتمل أن تعيده الواجهة البرمجية، إذ يؤخذ بالحسبان عادة رمز الخطأ (في حالتنا هو 403) ويفترض أن تعرف معنى تلك الرموز أثناء الطوير لتعرف كيف تتصرف مع رموز الأخطاء والحالات التي تهمك، وعمومًا هذا الأمر يحتاج إلى مقال منفصل، ننصحك بالاطلاع على مقال مدخل إلى HTTP ومقال رموز الإجابة في HTTP. خاتمة اﻵن، وقد استعرضنا عددًا من نقاط الوصول التي توفرها الواجهة البرمجية لمنصة زد، وتعرفنا على طرق إرسال الطلبات، دعنا نطبق كل ما تعلمنا إلى الآن في تطبيق عملي يستعمل يستفيد من واجهة زد البرمجية وهو بناء تطبيق بسيط لزيادة وﻻء العملاء مع شرح كيفية تحويل هذا التطبيق إلى مشروع تجاري. اقرأ أيضًا المقال التالي: تطوير تطبيق عملي يزيد من احتفاظ العملاء عبر واجهة زد البرمجية كيفية إنشاء متجر إلكتروني متكامل باستعمال منصة زد الواجهة البرمجية Fetch API في جافاسكريبت HTTP - لننطلق: شرح التخاطب بين العميل والخادوم

شرحنا في المقال السابق مدخل إلى الواجهات البرمجية API الفكرة العامة حول الواجهات البرمجية، وكنا قد شبهناها بالنادل في المطعم الذي يأخذ طلبات الزبائن إلى الطباخ والفريق العامل معه من أجل تحضيرها، ومن ثم استلام استجابة الطباخ للطلبية وتوصيلها إلى أصحابها، وهو ما تفعله الواجهات البرمجية بالضبط مع بعض الإختلاف بالنظر إلى طبيعة العمل في مجال التقنية. سنتعرف في هذا المقال أكثر على عملية التواصل التي تنظمها الواجهة البرمجية، ثم سنطبق ذلك عمليًا على واجهة برمجة واخترنا واجهة زد البرمجية للغرض الذي شرحنا في السابق. هذا المقال هو جزء من سلسلة مقالات حول الواجهة البرمجية API وكيفية الاستفادة منها في بناء تطبيق ويب: مدخل إلى الواجهات البرمجية API الاتصال بواجهة زد البرمجية وفهم عملية الاستيثاق والتصريح أمثلة عملية لاستخدام واجهة برمجة متاجر زد zid API تطوير تطبيق عملي يزيد من احتفاظ العملاء عبر واجهة زد البرمجية آلية التواصل وتنظيم عملية الاتصال قبل أن أكمل الحديث عن الواجهة البرمجية، هل سألت نفسك، لماذا ﻻ يذهب الزبائن مباشرةً إلى الطباخ في مقال المطعم السابق ويخبروه بما يريدون تناوله من مختلف الأطباق التي تُقدَّم في المطعم؟ الجواب ببساطة هو أن الطلبيات ستصبح عشوائيةً آنذاك ولن يستطيع الطباخ أن يحضّر أيًا من الطلبات بسبب العشوائية، وقد لا يفهم على الزبون ماذا يريد أي تحصل عشوائية وغموض في الطلب، فكل زبون يطلب طلبيته بصيغة مختلفة عن الآخر قد تكون بلغة أخرى تمامًا. في حالة أخرى، هل يستطيع أي عامل في المطعم أن يكون نادﻻ؟ في هذه الحالة ستكون فوضى أخرى ولكن بدرجة أقل، بحيث هنالك احتمالية كبيرة ﻷن تُحضّر نفس الطلبية أكثر من مرة لنفس الشخص وفي مرات أخرى من الممكن نسيان طلبية زبون آخر، وفي حالة أخرى، لن يكون باﻹمكان معرفة صاحب الطلبية من غيره أو حتى عدم فهم طلبية الزبون. كانت هذه الحالة الخاصة بالمطعم، فلك أن تتخيل كقاميف ستكون في حالة الواجهات البرمجية؟ تقريبا هي نفس الشيء ولكنها بشكل أسوأ بكثير بسبب أن الواجهة البرمجية API تنظِّم الكثير والكثير من الطلبات لعدد كبير جدا من العملاء التي قد تصل إلى أرقام كبيرة وخيالية. حُلت المشكلة في حالة المطعم بتحديد من يستطيع التحدث مع الزبائن وتدريبهم بأخذ الطلبيات إلى الطباخ وفريقه ومن ثم إعادة الاستجابة أو الناتج الذي حُضِّر إلى الزبون نفسه الذي طلبها تحديدًا ولم يسبق أن دخلت مطعمًا ونسي النادل طلبيتي أو جاءني بطلبية أخرى فهل سألت نفسك عن السبب؟ هل رأيته يكتب في ورقة أمامه ويسألك عن اسمك وينظر في الطاولة والموقع برهة ويذهب؟ وهل قلت لنفسك إن تأخر لقد نسيني أو لم يعرفني ثم يعود جالبًا لك طلبيتك التي طلبتها تمامًا دون أي نسيان؟ للنادل آلية يتذكر فيها صاحب كل طلبية وطلبيته بالضبط ولا ينساها مطلقًا والأمر في حالة الواجهة البرمجة مشابه تمامًا. حلت المشكلة السابقة عن طريق ما يسمى المفتاح المساعد Token وهو سلسلة نصية String تخص العميل طالب الخدمة وتميزه تصدرها الواجهة البرمجة غالبًا (سواءً بمقابل مادي أو مجرد التسجيل في منصة مقدم الواجهة البرمجية) بحيث يرسل المفتاح المساعد Token مع كل طلب خدمة إلى الواجهة البرمجية، من ثم تتحقق الواجهة البرمجية من صلاحية المفتاح المساعد، إن كان صالحا، فستُقدَّم الخدمة المطلوبة للعميل، أما إن لم يكن صالحا، فعادةً ما تُرجع رسالة خطأ تفيد بأن المفتاح المساعد غير صالح، أي لا يمكن إلا لأشخاص مخوليين التواصل مع الواجهة البرمجية وإلا لعمت الفوضى وجاء الجميع للاستفادة من الخدمة التي تقدمها الواجهة. التواصل مع واجهة منصة زد البرمجية حتى نفهم أكثر هذه العملية، سنأخذ مثالًا من الحياة العملية، بحيث سنوجه طلبات إلى الواجهة البرمجية لمنصة زد من أجل اﻹستعلام عن بعض الخدمات الخاصة بهم، دعونا نبدأ. قبل أن نبدأ، ستحتاج إلى التالي: حساب مطور على منصة زد برناج إرسال طلبات HTTP مثل Insomnia أو البرنامج الأكثر شهرة Postman (أصبح البرنامج بطيئًا نوعا ما موازنةً ببرنامج Insomnia ولهذا سنستخدم اﻷخير). إنشاء حساب مطور على منصة زد ندخل إلى بوابة المطورين في منصة زد، سنجدها بسيطة وسهلة اﻹستخدام، يكفي فقط أن عنوان بريدك اﻹلكتروني في الخانة المخصصة، كما في الصورة التالية: بعد أن تدخل عنوان بريدك اﻹلكتروني، والضغط على الزر START NOW، سيُعاد توجيهك إلى لوحة تحكم المطورين، أين يمكنك أخذ نظرة عن الواجهة البرمجية لمنصة زد عند الضغط على ZidAPI ﻻكتشاف تفاصيل الواجهة البرمجية لمنصة زد، كما في الصورة الموالية: ستظهر لنا النافذة التالية: وفيها نجد جميع المعلومات اللازمة للاتصال بالواجهة البرمجية لمنصة زد، بحيث ذُكرت جميع نقاط الوصول Endpoints، مع المعلومات التي يجب إرسالها والمعلومات التي ستُحصّل عند كل نقطة وصول. في الجزء Gateway Environments، وعند الضغط على القائمة Production and Sandbox، ستظهر معلومات مهمة، هي نقطة الوصول الرئيسية للواجهة البرمجية، ولكن ما الذي تعنيه Production and Sandbox. ببساطة Production Environment، هي البيئة الإنتاجية للواجهة البرمجية التي عليك استخدامها في مشروعك النهائي المقدم كخدمة للزبائن، بحيث أن كل العمليات التي تحدث فيها، هي عمليات فعلية. أما Sandbox Environment، فهي البيئة التطويرية التجريبية التي تستخدم أثناء عملية التطوير، بحيث أن جميع العمليات التي تتم فيها، هي عمليات تجريبية فقط. في الواجهة البرمجية لمنصة زد، نلاحظ أن اﻹختلاف بين البيئة الإنتاجية والبيئة التطويرية التجريبية طفيف، فهو يمكن فقط في البروتوكول المستخدم HTTP. فهم طلبيات HTTP وأنواعها نريد اﻵن ااتصال بالواجهة البرمجية لمنصة زد، كل المعلومات لدينا ولم يبقى إﻻ عملية اﻹتصال. للقيام بذلك، نحتاج برنامجا ﻹرسال طلبات HTTP، أو ما يسمى باللغة اﻹنجليزية HTTP Client، ولكن ما هو هذا البرنامج، وما هو عمله؟ ببساطة، برنامج HTTP Client، هو وسيط بينك وبين الواجهة البرمجية، بحيث يرسل الطلبات حسب بروتوكول HTTP. هنالك عدة أنواع من الطلبات الخاصة ببروتوكول HTTP، أشهرها GET و POST و PUT و DELETE. كمعلومة جانبية، متصفح اﻹنترنت الذي تعرفه، مثل كروم Google Chrome، وفايرفوكس أو أي متصفح آخر يعتبر HTTP Client، أي لديه القدرة أن يرسل طلبات HTTP للاستزادة في هذه النقطة، سأشرح أنواع طلبيات HTTP وهي: الطلب GET: يستخدم لجلب بيانات من الخادم أو الواجهة البرمجية. الطلب POST: يستخدم ﻹرسال البيانات إلى الخادم أو الواجهة البرمجية. الطلب PUT: يستخدم لتحديث بيانات في الخادم. الطلب DELETE: يستخدم لحذف البيانات على الخادم. استعمال Insomnia لإدارة الطلبيات التجريبية سنستخدم برنامج Insomnia من أجل إرسال الطلبات لواجهة زد البرمجية، يمكنك تنزيل البرنامج من الموقع الرسمي للشركة المطورة. بعد التحميل والتثبيت، ستظهر نافذة البرنامج كما في الصورة: واجهة بسيطة وسهلة اﻹستخدام، أليس كذلك؟ نضغط على الزر New Request ﻹرسال طلب للواجهة البرمجية لمنصة زد: لتسمية الطلب الجديد، يمكنك اختيار أي اسم كان، أو ترك الاسم الافتراضي، ولكن يفضل أن تُسمى الطلبات بأسماء ذات معنى للعمل الذي تنجزه. نوع الطلب، ويمكننا تحديد أي طلب كان حسب حاجتنا وحسب ما تفرضه الواجهة البرمجية. إنشاء وحفظ الطلب الجديد. احفظ الطلب الجديد باسم Get Profiles، لأننا سنتصل بالواجهة البرمجية لمنصة زد من أجل جلب الملفات الشخصية Profiles المتعلقة بحسابنا على منصة زد. التعرف على نقاط الوصول حينما نتصفح صفحة Developer Portal التي وفرتها منصة زد، سنجد توثيقا يخص الواجهة البرمجية لمنصة زد. التوثيق هو شرح لجميع نقاط الوصول Endpoints للواجهة البرمجية، وما هي المعلومات التي عليك إرسالها لكل نقطة وصول والمعلومات التي ستتحصل عليها من نقطة الوصول تلك. تلاحظ أن هناك نقطة وصول تتيح لنا الحصول على الملفات الشخصية Profiles، وهي موجودة على المسار Path: /managers/account/profile تذكر أن علينا إضافة نقطة الوصول الرئيسية للواجهة البرمجية قبل رابط تلك المسارات أو نقاط الوصول الفرعية، وبالتالي يصبح الرابط النهائي الذي علينا توجيه الطلب إليه كالتالي: http://api.zid.dev/app/v1/managers/account/profile ولكن كيف كونا الرابط النهائي لنقطة الوصول هذه؟ اﻷمر بسيط جدا، من التوثيق الخاص بالواجهة البرمجية لمنصة زد، فنجد Servers والتي تحوي الرابط الرئيسي لكل من البيئة الإنتاجية والبيئة التجريبية للواجهة البرمجية. طلب التصريح والاستيثاق من الطلبية بعدها نجد مسار نقطة الوصول Endpoint تمامًا مثل هذا المثال: لكل نقطة وصول معلومات مطلوبة حتى تستطيع الوصول إليها واستخدامها، فمثلا نقطة الوصول الموضح بالصورة تتطلب مُعامِلات Parameters خاصة بها وهي: X-MANAGER-TOKEN: وهو المفتاح المتجر المساعد الذي يخص المتجر اﻹلكتروني المراد تطبيق العملية عليه ولكل متجر في زد مفتاح مساعد خاص به فقط. Accept-Language: وهي اللغة التي تريد أن ترسل لك الواجهة البرمجية الإجابة Response فيها، وتأخذ القيمة ar للغة العربية أو en للغة اﻹنجليزية. الآن، سنرسل الطلب للواجهة البرمجية لمنصة زد، وننتظر الرد: لقد واجهتنا رسالة تفيد بأن علينا إرفاق مفتاح المبرمج المساعد Token مع الطلب حتى يتم التحقق بأننا مخولون للدخول واستعمال نقاط الوصول الخاصة بالواجهة البرمجية، هو نفسه الذي شرحناه آنفًا في بداية المقال فكما ذكرنا أنه يجب أن يكون مصرحًا لك استعمال الواجهة البرمجية وإلا جاء أي أحد واستعملها وستتأكد الواجهة البرمجة من ذلك التصريح وتستوثق منه. تذكر أن العملية مشابهة تمامًا للباب ومفتاحه فلأي مكان باب مثل منزلك عليه باب ولا يخول لأي أحد دخوله إلا من يملك مفتاح الباب، وتخيل أن يكون باب المنزل دون مفتاح أو أن يملك أي أحد مفتاح باب منزلك! العملية هنا نفسها تمامًا. الحصول على مفاتيح التصريح المخولة التوثيق الخاص بالواجهة البرمجية لمنصة زد، يشرح طريقة الحصول على المفتاح المبرمج المساعد أي المفتاح الخاص بك الذي يصرح لك استعمال الواجهة البرمجية، يكفيك أن تتوجه إلى التبويب Subscriptions ومنه أنشئ التطبيق الخاص بك، باستخدام Subscriptions & Key Generation Wizard. سيطلب منك معلومات بسيطة تعريفية بالتطبيق، تابع الصور التالية: عليك الآن أن تنتظر إلى حين الموافقة على التطبيق من طرف فريق منصة زد. بعد أن يوافق فريق منصة زد على تطبيقك، سيصبح لديك حق الاتصال بالواجهة البرمجية لمنصة زد، ولكن بقيت خطوة أخيرة وهي إنشاء مفتاح مساعد Token. هنالك طريقتان: الأولى، عن طريق لوحة التحكم في منصة زد نفسها، بحيث من نفس الصفحة السابقة، نختار التطبيق الذي أنشاناه، ونختار Manage App، وبعدها نختار Sandbox Keys، حتى نستعمل الواجهة البرمجية الخاصة بالتجربة فقط: نضغط على Generate Access Token، لتظهر نافذة منبثقة، تطلب تأكيد توليد المفتاح المساعد Token: بعد الضغط على GENERATE، ستظهر سلسلة نصية متكونة من أحرف وأرقام، علينا نسخها ولصقها في مكان يسهل علينا الرجوع إليه. الطريقة الثانية ﻹنشاء مفتاح مساعد هي أن نتجه إلى التبويب Subscriptions في قسم Zid Developer Portal، ونختار التطبيق الذي أنشأناه سابقًا: نضغط على Sandbox Keys: ثم نضغط بعدها على CURL TO GENERATE ACCESS TOKEN: نختار الرابط الثاني (الطريقة الثانية) ﻹنشاء المفتاح المساعد Access Token ونلضغط على الزر الموجود على الجانب من أجل نسخه، ونفتح برنامج Insomnia: بعدها نختار كما موضح في الصورة: ستظهر نافذة تسألك إن كنت تريد استيراد السطر في نفس النافذة أم نافذة جديدة، اختر ما يناسبك سيُنشَأ طلب جديد من نوع POST مثل الصورة الموالية: اﻵن علينا أن نضيف ترويسة إلى قبل إرسال طلبنا عن طريق الذهاب إلى التبويب Header وإضافته كالتالي: ما الذي يعنيه هذا الجزء من الطلب؟ يعني هذا الجزء ببساطة، إرسال مفتاح فرعي مع الطلب يثبت أن لدينا حسابًا مفعلا في الواجهة البرمجية لمنصة زد حتى يكون بإمكاننا إرسال طلب إنشاء مفتاح مساعد، ولكن من أين أتينا بهته المعلومات؟ هي معلومات موجودة في الرابط الذي نسخناه ولصقناه قبل قليل. إن لم تستوعب الفكرة اﻵن فلا داعي للقلق، سنشرح كل شيء بالتفصيل في المقاﻻت القادمة ويكفي اﻵن أن تضغط على Send، ﻹرسال طلب إنشاء مفتاح مساعد جديد، وسيُرسَل إليك كالتالي: بقيت اﻵن خطوة أخيرة وهي إنشاء متجر تجريبي على منصة زد من أجل التجربة عليه، المنصة تمنحك فترة 14 يوما من أجل اكتشاف خصائص المنصة والتعرف على طريقة التعامل معها (انظر مقال كيفية إنشاء متجر إلكتروني متكامل باستعمال منصة زد لمزيد من التفاصيل حول كيفية إنشاء متجر). بعد أن تنشئ متجرًا على منصة زد، أدخُل إلى حسابك وتوجه إلى صفحة "اﻹعدادات"، ثم اختر "الربط مع الخدمات"، ثم اضغط على زر "قم بإنشاء رمز المصادقة Manager Token": إنشاء أول اتصال مع الواجهة البرمجية اﻵن وبعد أن توافرت لدينا كل المفاتيح والمعلومات المطلوبة للاتصال بالواجهة البرمجية، يمكننا العودة للطلب الذي أنشأناه سابقا واﻹتصال بالواجهة البرمجية لمنصة زد كالتالي: ﻻحظ أننا ضمنا كلًا من مفتاح المبرمج Access Token ومفتاح المتجر Manager Token في ترويسة Header الطلب تحت تسمية Authorization و X-MANAGER-TOKEN على الترتيب، وهو ما يسمح للواجهة البرمجية لمنصة زد من التحقق من قدرتنا على الوصول إلى نقطة الوصول Endpoint هته وهل نمتلك الصلاحية لذلك وتعرف أيضًا أي متجر بالتحديد نريد تطبيق العمليات عليه. إن كنت قد تساءلت لماذا أضفنا كلمة Bearer قبل السلسلة النصية في Authorization، فببساطة هنالك عدة أنواع من المفاتيح المساعدة ولكن أشهرها هي Basic وBearer، اﻹختلاف بينهما هو في نمط التشفير وفك التشفير فقط. خاتمة تعلمنا في هذا المقال كيفية إنشاء أول اتصال مع واجهة برمجية نموذجية -مثل واجهة منصة زد- بتأمين مفاتيح التصريح المطلوبة وكل المعلومات اللازمة لها وأصبح بإمكانك الآن تطبيق ما تعلمته في المقال على أي واجهة برمجية والاتصال بها والاستفادة من الخدمات التي تقدمها على الوجهة التي تريد. سنتعرف في المقال التالي أكثر على واجهة منصة زد والاتصال بمختلف نقاط وصول الواجهة البرمجية والاطلاع على المعلومات التي يمكن أن تزودنا فيها وكيف يمكن الاستفادة منها. اقرأ أيضًا المقال التالي: أمثلة عملية لاستخدام واجهة برمجة متاجر زد zid API التعرف على لوحة تحكم متجر زد الإلكتروني وضبط عمليات المتجر كيفية إنشاء متجر إلكتروني متكامل باستعمال منصة زد الواجهة البرمجية Fetch API في جافاسكريبت

بعد أن غطينا معظم ما يتعلق بالواجهات البرمجية وكيفية عملها، مرورًا بالتعرف على الواجهة البرمجية لمنصة زد، سنعمل على بناء تطبيق يتصل بالواجهة البرمجية لمنصة زد ويوسع من عمل المتاجر المبنية بتلك المنصة بإضافة ميزة لها وهي زيادة المبيعات بزيادة الاحتفاظ العملاء وكسب ولائهم. هذا المقال هو جزء من سلسلة مقالات حول الواجهة البرمجية API وكيفية الاستفادة منها في بناء تطبيق ويب: مدخل إلى الواجهات البرمجية API الاتصال بواجهة زد البرمجية وفهم عملية الاستيثاق والتصريح أمثلة عملية لاستخدام واجهة برمجة متاجر زد zid API تطوير تطبيق عملي يزيد من احتفاظ العملاء عبر واجهة زد البرمجية فكرة التطبيق فكرة التطبيق سهلة وبسيطة، بحيث سنستخدم نقطة الوصول الخاصة بسلات الشراء المتروكة لاستعراض العملاء الذين تركوا سلة ما دون إتمام عملية الشراء لمتجر ما ومن ثم سنولد عبر نقطة وصول القسائم قسيمة تخفيض Coupons ونرسلها عبر البريد اﻹلكتروني للعملاء لحضهم على استعمال قسيمة التخفيض وإتمام عملية الشراء. يُحدد المتجر بالمفتاح X-Manager-Token الذي سيزودنا به صاحب المتجر الذي يريد الاستفادة من هذا التطبيق وسنستعمل مفتاح متجر تجريبي أثناء عملية التطوير. سيكون بإمكانك استغلال هذا التطبيق وبناء منصة متكاملة لزيادة عملاء متاجر زد الإلكترونية، وبالتالي زيادة المداخيل السلبية Passive Income لأصحاب المتاجر، الأمر الذي يحقق الفائدة والنفع لهم. المتطلبات المسبقة لبناء التطبيق سنبني التطبيق باستخدام تقنية NodeJS كنظام خلفي Backend، مع واجهة مستخدم بسيطة تكفينا فقط ﻻستخدام سهل وسلس للتطبيق، وسنبني التطبيق باستخدام محرك القوالب Template Engine المعروف باسم Pug. يُفترض أن لديك معرفةً مسبقةً ولو قليلةً بالبرمجة باستخدام NodeJS وإطار العمل ExpressJS لهذا لن نتطرق إلى شرحهما. يمكنك استخدام مدير الحزم Package Manager الذي تفضله سواءً NPM أو YARN، سأستخدم YARN في هذا المشروع. تهيئة المشروع لبداية مشروع جديد، يكفي أن تفتح سطر أوامر وتكتب الأمر التالي: yarn init سيسألك مدير الحزم عن معلومات التطبيق الذي تريد إنشاؤه، يكفي أن تجيب بالقبول عن كل الأسئلة دون تعديل. بعدها، سينشئ مدير الحزم ملفًا باسم package.json بهذا المحتوى: { "name": "zid", "version": "1.0.0", "main": "index.js", "license": "MIT" } الآن سنثبت عددًا من الإضافات اللازمة لعمل التطبيق بصورة طبيعية، وسنبدأ بتثبيت إطار العمل ExpressJS عن طريق تنفيذ الأمر التالي في سطر الأوامر: yarn add express بعد انتهاء مدير الحزم من تثبيت ExpressJS، سنثبت مكتبة Nodemon والتي تمكننا من تشغيل خادم دائم للتطبيق بحيث يعيد Nodemon تشغل الخادم آليًا في كل مرة نعدل على شفرة التطبيق. مكتبة Nodemon تستخدم فقط في مرحلة التطوير وليس في البيئة الإنتاجية، لهذا يجب علينا تثبيتها على هذا الأساس، ويكون ذلك باستخدام هذا الأمر: yarn add nodemon --dev الآن، الملف package.json سيظهر كالتالي: { "name": "zid", "version": "1.0.0", "main": "index.js", "license": "MIT", "dependencies": { "express": "^4.17.1" }, "devDependencies": { "nodemon": "^2.0.7" } } الآن أنشئ ملفًا باسم nodemon.json، وهو ملف خاص بإعدادات Nodemon ويجب أن يحتوي على الشفرة التالية: { "ext": "js", "exec": "node index.js" } السطر اﻷول، يعني أن على Nodemon أن يتتبع التغيرات الحاصلة على أي ملف بامتداد js. والسطر الثاني يمثل الأمر المراد تنفيذه عند حصول أي تغيير على أي ملف بالامتداد المحدد. إنشاء أول نقطة وصول من الواجهة الخلفية الآن، دعنا ننشئ أولى نقاط الوصول Endpoint الخاصة بنا. أولًا، نعدّل على ملف package.json ونضيف له سكريبت كالتالي "scripts": { "start": "nodemon" } سيكون الملف النهائي كالتالي: { "name": "zid", "version": "1.0.0", "main": "index.js", "license": "MIT", "dependencies": { "express": "^4.17.1" }, "devDependencies": { "nodemon": "^2.0.7" }, "scripts": { "start": "nodemon" } } الآن كل شيء جاهز. ننشئ ملف جديد باسم index.js يحتوي على الشفرة التالية: import express from "express"; var app = express(); app.use(express.json()); app.use(express.urlencoded({ extended: false })); const port = process.env.PORT || 3000; app.listen(port, () => { console.log(`Server started on ${port}`); }); سنشرح هذه الشفرة المصدرية لأنها أساس كل ما سيأتي لاحقًا. السطرين الأول والثاني: import express from "express"; var app = express(); استدعينا إطار العمل express، بعدها أنشأنا نسخة منه Instance منه باسم app، ومنها سيعمل التطبيق ككل. السطرين الثالث والرابع تخص إطار Express إذ أخبرنا ببساطة Express بأن كل الطلبات Requests ستكون على شكل JSON. السطر الخامس: const port = process.env.PORT || 3000; أنشأنا ثابتًا يحدد رقم المنفذ Port الذي سيعمل عليه الخادم الخاص بنا. بحيث إن كان معرفا كمتغير نظام أو سيؤخذ المنفذ 3000. السطر السادس هو إنشاء الخادم الخاص بالتطبيق والذي سيعمل على المنفذ Port الذي حددناه سابقًا: app.listen(port, () => { console.log(`Server started on ${port}`); }); الآن أضف الشفرة المصدرية التالية مباشرةً بعد السطر الرابع: app.get("/", (req, res) => { res.send(‘Hello Hsoub’); }); سيكون شكل الملف كالتالي: import express from "express"; var app = express(); app.use(express.json()); app.use(express.urlencoded({ extended: false })); app.get("/", (req, res) => { res.send(`Hello Hsoub`); }); const port = process.env.PORT || 3000; app.listen(port, () => { console.log(`Server started on ${port}`); }); سنثبت بعض المكتبات التي سنستخدمها في بناء التطبيق الخاص بنا. نفِّذ الأمر التالي في سطر الأوامر في مجلد المشروع: yarn add axios pug ثبتنا المكتبتين التاليتين: Axios: هو مكتبة مهمتها القيام بإرسال طلبيات HTTP. Pug: مكتبة تخص قوالب لبناء واجهات المستخدم Frontend Templating Engine. هنالك عدة مكتبات تخص بناء واجهات المستخدم، وقع اﻹختيار على مكتبة Pug بسبب أن الشيفرة البرمجية الخاصة بها بسيطة وسهلة القراءة، باﻹضافة إلى أنها متوافقة بامتياز مع إطار العمل ExpressJS. الآن نفّذ الأمر: yarn start ستظهر لك رسالة خطأ تفيد بأنه ﻻ يمكنك استيراد إطار العمل express داخل المشروع عبر import، ويكفي لحل هذه المشكلة فقط أن تضيف السطر التالي إلى الملف package.json: "type": "module", في حالة واجهت رسالة خطأ مثل الرسالة التالية: Error: listen EADDRINUSE: address already in use :::3000 تأكد من إيقاف التطبيقات الأخرى التي تستخدم المنفذ 3000 أو غير المنفذ الخاص بالتطبيق ليكون مثلا 3001: افتح المتصفح، وادخل العنوان التالي: http://localhost:3000 يفترض أن تحصل على الرسالة التالية: تهانينا، أتممت تهئية التطبيق وإنشاء أولى نقاط الوصول Endpoint الخاصة بالواجهة الخلفية فيه باستخدام NodeJS وExpressJS. بناء تطبيق الاحتفاظ بمستخدمي متاجر زد الآن وقد شرحنا باختصار شديد طريقة بناء واجهة خلفية برمجية بسيطة باستخدام تقنية NodeJS وإطار عمل ExpressJS، سننتقل إلى بناء تطبيق بسيط لزيادة ولاء العملاء. قبل أن نبدأ، عليك أن تحاول الاستزادة قدر الإمكان في ما يتعلق بالبرمجة باستخدام NodeJS، وطريقة بناء الواجهات البرمجية، لأن هدفنا هنا هو التطبيق، لهذا لن تجدني أشرح باستفاضة الأمور البسيطة. جلب سلات الشراء المتروكة أنشئ ملفًا جديدًا باسم zid.js يحوي على الشفرة المصدرية التالية: // axios استيراد مكتبة import axios from "axios"; // إنشاء متغير يحمل رابط الواجهة البرمجية const ZidAPI = "https://api.zid.dev/app/v1"; const AbandonedCarts = async () => { const headers = { "X-MANAGER-TOKEN": process.env.MANAGER_TOKEN, Authorization: "Bearer " + process.env.auth, }; try { const getAbandondCarts = await axios.get( `${ZidAPI}/managers/store/abandoned-carts`, { headers: headers, params: { page: 1, page_size: 10, duration: 4 }, } ); if (getAbandondCarts) { return getAbandondCarts.data; } } catch (error) { return error; } }; export default AbandonedCarts; والآن، لنشرح الشيفرة باختصار شديد. بدايةً، استدعينا المكتبة axios من أجل إرسال بطلبات للواجهة البرمجية الخاصة بمنصة زد، ثم أنشأنا ثابتًا باسم ZidAPI ويحوي أساس نقطة الوصول الخاصة بالواجهة البرمجية لمنصة زد. أنشأنا دالة Function غير متزامنة باسم AbandonedCarts ومهمتها هي جلب سلات الشراء المتروكة على متجرنا. أنشأنا داخل تلك الدالة ثابتًا باسم headers، وهو كائن يحتوي على قيمتين مفتاح المتجرX-MANAGER-TOKEN و مفتاح الواجهة البرمجية Authorization. إن لم تعرف من أين حصلنا على هذين المتغيرين فارجع إلى المقالات السابقة. قد أجدك تتساءل ما معنى process.env؟ هي طريقة لحماية مفاتيح الوصول، وذلك عن طريق إضافة المفتاح كمتغير بيئة Environment Variable. فمثلا، في تطبيقنا هذا، حمينا مفتاح الوصول الخاص بالمتجر باسم X-MANAGER-TOKEN. تُنفّذ هذه العملية على نحو فتح سطر الأوامر وإدخال الأمر التالي: export X-MANAGER-TOKEN=value استبدل value بقيمة مفتاح المتجر بدون إضافة مسافة بعد علامة = ونفس الشيء بالنسبة للمتغير Authorization. سنشرح في عجالة طريقة تثبيت WSL2 على نظام التشغيل ويندوز، ومن ثم طريقة إنشاء متغيرات النظام. بداية تأكد من تحديث نظام التشغيل عندك إلى آخر نسخة ممكنة حتى تستطيع الاستفادة من خاصية تثبيت نظام لينكس كنظام ثانوي داخل ويندوز. افتح PowerShell كمستخدم مدير، ونفذ الأمر التالي: dism.exe /online /enable-feature/featurename:Microsoft-Windows-Subsystem-Linux /all /norestart بعد انتهاء تنفيذ الأمر، نحتاج الآن إلى تفعيل خاصية الأنظمة الوهمية Virtual Machine الخاصة بنظام التشغيل ويندوز وذلك عن طريق تنفيذ الأمر التالي في نفس نافذة PowerShell السابقة: dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart بعد انتهاء تنفيذ الأمر، أعد تشغيل جهازك حتى يتسنى للنظام تفعيل جميع الخصائص المطلوبة. علينا الآن تحديث نواة نظام التشغيل لينكس، وذلك بتنزيل آخر تحديث متوفر، بعد انتهاء التنزيل، افتح الملف واتبع الخطوات لتثبيته كأي برنامج آخر. إفتح نافذة PowerShell، ونفذ الأمر التالي: wsl --set-default-version 2 افتح متجر تطبيقات ويندوز وابحث عن Ubuntu وثبِّته مثل أي تطبيق آخر، وبعد الانتهاء أعد تشغيل جهازك. بإمكانك الآن تنفيذ أوامر لينكس داخل نظام ويندوز دون مشاكل. لمزيد من التفاصيل، ارجع إلى مقال تطبيق Hyper-V في ويندوز 10. على أي حال، هنالك طريقة أخرى ﻹضافة متغيرات النظام عن طريق مكتبة dotenv، وتكون كالتالي: في سطر اﻷوامر أدخل الأمر التالي: yarn add dotenv أنشئ ملفًا باسم env. داخل المجلد الرئيسي للتطبيق، وضع بداخله قيمتي مفتاح المتجر ومفتاح الواجهة البرمجية، النتيجة ستكون كالتالي: MANAGER_TOKEN=value auth=value لا تنسى تبديل القيمة value ووضع المفتاح المناسب الخاص بك مكانها. في بداية الملف index.js نضيف الشيفرة البرمجية التالية: import dotenv from "dotenv"; بقي علينا اﻵن أن نضيف شيفرة تخبر إطار Express أننا سنستخدم مكتبة dotenv لجلب متغيرات البيئة من الملف ‎.env عوض استخدام المتغيرات المخزنة فعلا في نظام التشغيل. في ملف index.js وقبل السطر التالي: var app = express(); نضيف ما يلي: dotenv.config(); بإمكانك اﻵن إضافة متغيرات النظام مباشرةً للملف env. دون إضافتها بصورة مباشرة إلى نظام التشغيل. بعد الانتهاء من ضبط متغيرات البيئة، أنشأنا كتلة برمجية باستخدام Try-Catch لتجريب الإتصال بالواجهة البرمجية لمنصة زد. أنشأنا متغيرًا باسم getAbandondCarts وأسندنا إليه القيمة الراجعة من إرسال الطلب إلى الواجهة البرمجية لمنصة زد. بحيث أرسلنا طلب Request من نوع GET، يحمل المعلومات المطلوبة في توثيق الواجهة البرمجية، وهي ترويسة الطلب headers وأيضا استعلامًا Query فيه عدد الصفحات وأيضا عدد العناصر في الصفحة. بعدها تحققنا إن استقبلنا إجابة خادم الواجهة البرمجية لمنصة زد، وفي حالة وجود الإجابة، فإننا نرجع المحتوى خاصتها؛ أما في حالة وجود خطأ، فسننتقل إلى الجزء catch والذي سيرجع قيمة الخطأ مثل رسالة. في آخر الملف، صدرنا الدالة لنستخدمها في مواضع أخرى. الآن ننتقل إلى الملف index.js ونستدعي الملف zid.js بالطريقة التالية: import AbandonedCarts from "./zid.js"; ثم نضيف نقطة وصول جديدة بنفس الطريقة السابقة: app.get("/carts", async (req, res) => { const response = await AbandonedCarts(); const renderedData = response["abandoned-carts"]; res.send(renderedData); }); دعنا نفهم الشيفرة السابقة: أنشأنا نقطة وصول جديدة بحيث تستقبل طلبات من نوع GET أنشأنا ثابتًا جديدًا باسم response بحيث يستقبل إجابة الخادم من الدالة التي أنشأناها سابقًا باسم AbandonedCarts أنشأنا ثابتًا جديدًا باسم renderedData يحمل قيمة فرعية من الثابت response أعدنا محتوى الثابت renderedData لنجرب الآن نقطة الوصول الجديدة، افتح برنامج Insomnia، وأنشئ طلبًا جديدًا من نوع GET لنقطة الوصول التالية: http://localhost:3000/carts وأرسل الطلب، إن لم توجد سلات شراء متروكة، فإن الواجهة البرمجية لمنصة زد، ستعيد لنا مصفوفة فارغة، أما إن وجدت سلات شراء متروكة، ستحصل على مصفوفة مشابهة لهذه: [ { "id": "6718344e-8e2c-4667-b2cd-1178632de6e9", "store_id": "a739c51c-8103-4648-873b-cc3a8ea2dc8a", "session_id": "xQH4imSzunyafhd2QkD2llkjz8qjEKvW", "cart_id": "904142370", "order_id": 7231078, "phase": "completed", "customer_id": 5835, "customer_name": "man", "customer_email": "m.a***at@zid.sa", "customer_mobile": "966550*****", "city_id": 1, "products_count": 1, "reminders_count": 0, "cart_total": 138, "cart_total_string": "138.00 SAR", "created_at": "2021-05-20 08:59:54", "updated_at": "2021-05-20 10:59:35" }, { "id": "33e932a1-0a9f-4468-a8de-c09540f9aa56", "store_id": "a739c51c-8103-4648-873b-cc3a8ea2dc8a", "session_id": "b6fRKKmcwVtLssqQNgvPSEaY2FvzAG7B", "cart_id": "914265844", "order_id": null, "phase": "shipping_address", "customer_id": 3450024, "customer_name": "Mohammad", "customer_email": "asha.k@fast.com", "customer_mobile": "966506766***", "city_id": 1, "products_count": 2, "reminders_count": 0, "cart_total": 504.85, "cart_total_string": "504.85 SAR", "created_at": "2021-05-19 09:09:45", "updated_at": "2021-05-19 12:23:16" } ] أصبحنا الآن قادرين على تتبع كل السلات المتروكة وحالتها والتفاصيل الخاصة بها وفعل أي شيء متاح معها عبر هذه التفاصيل مع كل سلة وهنا مربط الفرس. سننتقل الآن إلى إنشاء واجهة استخدام بسيطة باستخدام محرك القوالب Pug. بناء شريط التنقل وواجهة السلات المتروكة سنبني واجهات التطبيق عبر محركة القوالب Pug وسنبدأ بواجهة السلات المتروكة، ولكن دعنا أول أن نفهم ما هو محرك القوالب. محرك القوالب Template Engine هو نظام قوالب يسمح لنا بإنشاء واجهات الإستخدام على الخادم ومن ثم إخراجها Render للعميل. يمكنك الإطلاع على التوثيق الخاص بمحرك القوالب Pug من الموقع الرسمي الخاص به. أنشئ مجلدًا جديدًا باسم views داخل المجلد الرئيسي للمشروع، وأنشئ ملفًا جديدًا باسم page.pug، ضع بداخله الشيفرة البرمجية التالية: doctype html block head meta(charset='UTF-8') meta(http-equiv='X-UA-Compatible' content='IE=edge') meta(name='viewport' content='width=device-width, initial-scale=1.0') link(href='https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css' rel='stylesheet') body .w-full.max-w-8xl.min-w-0.mx-auto.px-6 .flex.mt-12.bg-white.rounded-md.shadow .w-64.bg-blue-100.rounded-l-md.border-r.border-dashed.border-blue-200 .flex.justify-center.items-center.h-32.text-blue-700.text-center.font-semibold.text-3xl.italic | Loyalty Program .mt-8.border-t.border-blue-200 a.block.py-3.px-6.text-blue-700.font-semibold.border-b.border-blue-200(href='/') | Home a.block.py-3.px-6.text-blue-700.font-semibold.border-b.border-blue-200(href='/carts') | Abandoned Carts a.block.py-3.px-6.text-blue-700.font-semibold.border-b.border-blue-200(href='/coupon') | Coupons a.block.py-3.px-6.text-blue-700.font-semibold.border-b.border-blue-200(href='/loyalty') | Loyalty block content .flex-grow .flex.flex-col.mx-2.mt-1 .px-3.py-4.flex.justify-center لن نشرح صيغة كتابة قوالب pug لأنها بسيطة جدًا، وتحفيزك أيضًا للإطلاع على التوثيق الرسمي الخاص بـ Pug. يتيح محرك القوالب Pug إنشاء كتل برمجية blocks وإعادة استخدامها لاحقا في أي مكان تحتاجه، كمثال على ذلك، هو ما فعلناه في الملف السابق page.pug، بحيث أنشأنا كتلة برمجية سنستخدمها في بقية الصفحات. في الشيفرة البرمجية السابقة التي تخص الملف page.pug، ﻻحظ أننا أنشأنا كتلة block باسم head وأضفنا إليها ما يتعلق بالبيانات الوصفية Metadata، مع إرفاق ملف خاص بإطار TailwindCSS، باستخدام شبكات الوصول CDN. بعدها أضفنا جسم الصفحة تحت ترويسة body، تحتوي على قائمة جانبية. وتحتها أضفنا كتلة جديدة تحت اسم content وهي ما سيحمل مختلف محتوى الصفحات الخاصة بالتطبيق. سنريكم صورةً عن الناتج النهائي المتوقع الحصول عليه: ننتقل اﻵن ﻹنشاء صفحة لعرض قائمة سلات الشراء المتروكة، باستخدام نقطة الوصول التي أنشأناها سابقًا، بحيث سنسترجع مصفوفة الكائنات التي تحصلنا عليها من الواجهة البرمجية والتي تخص متجر العميل، ونستخرج المعلومات التي نحتاجها باستخدام حلقة تكرارية بسيطة. أنشئ ملفًا جديدًا داخل المجلد views باسم abandoned.pug وضع بداخله الشيفرة التالية: extends page.pug block append head title Abandoned Carts block content table.w-full.text-md.bg-white.shadow-md.rounded.mb-6.max-w-6xl.min-w-0.mx-auto.px-6 thead tr.border-b th.text-left.p-1.px-4 Customer Name th.text-left.p-1.px-4 Customer Email th.text-left.p-1.px-4 Customer Mobile th.text-left.p-1.px-4 Products In Cart th.text-left.p-1.px-4 Cart Total(SAR) th.text-left.p-1.px-4 Phase tbody each element in renderedData tr.border-b.bg-gray-100(class='hover:bg-orange-100') td.p-3.px-5=element.customer_name td.p-3.px-5=element.customer_email td.p-3.px-5=element.customer_mobile td.p-3.px-5=element.products_count td.p-3.px-5=element.cart_total td.p-3.px-5=element.phase سأشرح هذا الكود باستفاضة. في السطر اﻷول، عملنًا تمديدًا للقالب اﻷب الذي أنشأناه سابقا، بحيث أن القالب الجديد (القالب ابن) سيأخذ كل محتوى القالب السابق ويضيف عليه ما نريد: extends page.pug أما في السطرين التاليين، طلبنا من محرك القوالب Pug أن يعدل الكتلة block المسمى head في القالب الأب بما تحت هذا السطر، وهنا أعدنا تسمية عنوان الصفحة بـ Abandoned Carts: block append head title Abandoned Carts بعدها أنشأنا جدولًا Table وقسمناه إلى 6 أعمدة تحمل عناوين المعلومات التي نريد عرضها. each element in renderedData في هذا السطر، أنشأنا حلقة تكرارية تستخرج المعلومات المطلوبة من مصفوفة الكائنات Array of Objects التي تحصلنا عليها سابقا، إذ وضعنا المعلومات المطلوبة في سطور حسب نوعيتها. بقيت لنا خطوة واحدة الآن، وهي ربط الصفحة التي أنشأناها مع نقطة الوصول التي سبق و اضفناها. توجه إلى الملف index.js وعدِّل نقطة الوصول السابقة لتكون كالتالي: app.get("/carts", async (req, res) => { const response = await AbandonedCarts(); const renderedData = response["abandoned-carts"]; res.render("abandoned", { renderedData }); }); لاحظ أننا غيرنا السطر الأخير واستبدلنا التابع send بتابع جديد هو render، والذي يأخذ معاملين، المعامل الأول هو القالب، والمعامل الثاني هي البيانات التي ستُعرَض في القالب. يجب التأكد من أن اسم القالب المرسل كمعامل للتابع render هو بنفس الاسم الذي يحمله القالب المعني. يجب التأكد أيضًا أن عنوان المعامل الثاني والمرسل كبيانات للعرض، هي بنفس الأسم الموجود في القالب الذي أُنشئ لهذا الشأن. شغِّل الآن الخادم الخاص بنا عن طريق تنفيذ الأمر: yarn start لم يعمل معك! بل وظهرت الكثير من رسائل الخطأ، صحيح؟ عد إلى ملف index.js وأضف الأسطر التالية مباشرة قبل أول نقطة وصول Endpoint أنشأناها: app.set("views", path.join(__dirname, "views")); app.set("view engine", "pug"); app.use(express.static(path.join(__dirname, "public"))); ما الذي تعنيه تلك الأسطر؟ ببساطة، طلبنا من إطار ExpressJS أن يستخدم Pug كنظام قوالب، وأيضًا أن يتعرف على مسار ملفات القوالب التي أنشأناها والموجودة داخل المجلد views. أما بالنسبة للسطر الأخير، فهي أننا أخبرنا ExpressJS بأن المجلد النهائي للقوالب بعد أن تحدث عملية التصدير/الاستخراج rendering أن يضع الملفات الناتجة في المجلد public. قبل أن تعيد تشغيل الخادم، استورد المكتبة path في بداية الملف، تمامًا بعد استيراد express مع إنشاء ثابت جديد باسم dirname__ والذي سيحوي التابع resolve الخاص بالمكتبة path وبالتالي سيكون الملف index.js كالتالي: import express from "express"; import path from "path"; import AbandonedCarts from "./zid.js"; const __dirname = path.resolve(); var app = express(); app.use(express.json()); app.use(express.urlencoded({ extended: false })); app.set("views", path.join(__dirname, "views")); app.set("view engine", "pug"); app.use(express.static(path.join(__dirname, "public"))); app.get("/carts", async (req, res) => { const response = await AbandonedCarts(); const renderedData = response["abandoned-carts"]; res.render("abandoned", { renderedData }); }); const port = process.env.PORT || 3000; app.listen(port, () => { console.log(`Server started on ${port}`); }); الآن، شغل الخادم الخاص بالتطبيق، وافتح المتصفح وادخل العنوان التالي: http://localhost:3000/carts ستظهر لنا النافذة التالي (اُخفيت معلومات العملاء حفاظا على الخصوصية): تهانينا، لقد أكملت أول صفحات تطبيق. إنشاء قسائم التخفيض Coupons ننتقل الآن إلى بناء صفحة إنشاء قسيمة تخفيض باستخدام الواجهة البرمجية لمنصة زد، يرجى مراجعة التوثيق الخاص بها من أجل معرفة المعلومات المطلوبة. أنشئ ملفًا جديدًا داخل المجلد views باسم coupon.pug وضع الشيفرة البرمجية التالية: extends page.pug block append head title Coupon block content form#form(action='/add-coupon' method='POST').place-items-center.max-w-max.m-4.p-2.bg-white.rounded.shadow-xl p.text-gray-800.font-medium Adding new coupon code div label.block.text-sm.text-gray-00(for='name') Choose a name for the coupon input.w-full.px-5.py-1.text-gray-700.bg-gray-200.rounded(name='name' type='text' required='' placeholder='Coupon Name') .mt-2 label.block.text-sm.text-gray-600(for='code') Coupon Code input.w-full.px-5.py-4.text-gray-700.bg-gray-200.rounded(name='code' type='text' required='' placeholder='Hsoub10') .mt-2 label.block.text-sm.text-gray-600(for='discount_type') Discount Type input.w-full.px-2.py-2.text-gray-700.bg-gray-200.rounded(name='discount_type' type='text' required='' placeholder='p for percentage and f for fixed') .mt-2 label.text-sm.block.text-gray-600(for='discount') Discount input.w-full.px-2.py-2.text-gray-700.bg-gray-200.rounded(name='discount' type='text' required='' placeholder='discount') .inline-block.mt-2.pr-1(class='w-1/2') label.block.text-sm.text-gray-600(for='free_shipping') Free Shipping input.w-full.px-2.py-2.text-gray-700.bg-gray-200.rounded(name='free_shipping' type='text' required='' placeholder='1 to enable, 0 to disable') .inline-block.mt-2.-mx-1.pl-1(class='w-1/2') label.block.text-sm.text-gray-600(for='free_cod') Free Cash on Delivery input.w-full.px-2.py-2.text-gray-700.bg-gray-200.rounded(name='free_cod' type='text' required='' placeholder='1 to enable, 0 to disable') div label.block.text-sm.text-gray-600(for='total') Total to apply coupon input.w-full.px-2.py-2.text-gray-700.bg-gray-200.rounded(name='total' type='text' required='' placeholder='Total to apply coupon') .inline-block.mt-2.pr-1(class='w-1/2') label.block.text-sm.text-gray-600(for='date_start') Starting Date input.w-full.px-2.py-2.text-gray-700.bg-gray-200.rounded(name='date_start' type='text' required='' placeholder='2021-06-01') .inline-block.mt-2.-mx-1.pl-1(class='w-1/2') label.block.text-sm.text-gray-600(for='date_end') Ending Date input.w-full.px-2.py-2.text-gray-700.bg-gray-200.rounded(name='date_end' type='text' required='' placeholder='2021-12-31') .mt-2 label.block.text-sm.text-gray-600(for='uses_total') Total Using input.w-full.px-2.py-2.text-gray-700.bg-gray-200.rounded(name='uses_total' type='text' required='' placeholder='1000') .mt-2 label.block.text-sm.text-gray-600(for='uses_customer') Total Using Per Customer input.w-full.px-2.py-2.text-gray-700.bg-gray-200.rounded(name='uses_customer' type='text' required='' placeholder='5') .mt-2 label.block.text-sm.text-gray-600(for='apply_to') Apply for all Products? input.w-full.px-2.py-2.text-gray-700.bg-gray-200.rounded(name='apply_to' type='text' required='' placeholder='all or apply_to_array[]') .mt-2 label.block.text-sm.text-gray-600(for='status') Active? input.w-full.px-2.py-2.text-gray-700.bg-gray-200.rounded(name='status' type='text' required='' placeholder='1 to enable, 0 to disable') .mt-4 button.px-4.py-1.text-white.font-light.tracking-wider.bg-gray-900.rounded(type='submit') Add في بداية الملف، استوردنا الشيفرة الموجودة في الملف page.pug والتي تحوي القائمة الجانبية واستيراد إطار TailwindCSS. بعدها أنشأنا نموذج Form لإرسال البيانات إلى نقطة الوصول التي سنبنيها الآن. أنشئ ملفًا جديدًا باسم addCoupon.js ونفّذ ما فعلناه في الملف zid.js ألا وهو استيراد مكتبة Axios من أجل إرسال طلبات إلى الواجهة البرمجية لمنصة زد ولكن هذه المرة بطريقة POST، وهذا حسب التوثيق الخاص بالمنصة: import axios from "axios"; const ZidAPI = "https://api.zid.dev/app/v1"; الآن سنحتاج إلى إنشاء دالة function ونسند إليها مهمة إرسال الطلب إلى الواجهة البرمجية لمنصة زد بالشكل التالي: const AddCoupon = async (couponInfo) => { const headers = { "X-MANAGER-TOKEN": process.env.MANAGER_TOKEN, Authorization: "Bearer " + process.env.auth, }; أنشأنا الدالة تحت اسم addCoupon والتي تأخذ معاملًا واحدًا ويجب أن يكون كائنًا. حددنا ترويسة الطلب الذي سنرسله داخل الثابت headers. الخطوة الثانية هي أن ننشئ ثابتًا constant يحوي جميع المعلومات المطلوبة من طرف الواجهة البرمجية لمنصة زد، الثابت يكون كائنا من أجل أن يحمل جميع المعلومات. const data = { name: couponInfo.name, code: couponInfo.code, discount_type: couponInfo.discount_type, discount: couponInfo.discount, free_shipping: couponInfo.free_shipping, free_cod: couponInfo.free_cod, total: couponInfo.total, date_start: couponInfo.date_start, date_end: couponInfo.date_end, uses_total: couponInfo.uses_total, uses_customer: couponInfo.uses_customer, apply_to: couponInfo.apply_to, status: couponInfo.status, }; الآن ننشئ كتلة Try - Catch لإرسال الطلب للواجهة البرمجية بحيث أنشأنا ثابتًا باسم addCoupon يحوي الطلب المرسل إلى الواجهة البرمجية عن طريق مكتبة Axios كالتالي: try { const addCoupon = await axios.post( `${ZidAPI}/managers/store/coupons/add`, data, { headers: headers, } ); if (addCoupon) { return addCoupon.data; } } catch (error) { return error; } تحققنا من عدم وجود أي خطأ وفي حالة وجود إجابة من الخادم نرجع محتوى الإجابة عن طريق السطر: return addCoupon.data; أما في حالة وجود خطأ، فسيكون الانتقال مباشرةً إلى الجزء catch وهنا سيُسترجع محتوى الخطأ عن طريق السطر: return error; في أخر الملف، نصدِّر الدالة حتى نستطيع استخدامها في أماكن أخرى باستخدام السطر: }; export default AddCoupon; اﻵن نضيف نقطة وصول جديدة Endpoint إلى الملف index.js بنفس الطريقة التي أضفنا بها نقاط الوصول السابقة. استدع في أعلى الملف الملف addCoupon كالتالي: import AddCoupon from ‘./addCoupon.js’ لتكون بداية الملف تمامًا كالتالي: import express from "express"; import dotenv from "dotenv"; import path from "path"; import AbandonedCarts from "./zid.js"; import AddCoupon from "./addCoupon.js"; بعدها سنضيف نقطة الوصول بالشكل التالي: app.post("/add-coupon", async (req, res) => { const data = req.body; const dataToSend = Object.assign({}, data); const response = await AddCoupon(dataToSend); if (response) { res.redirect("/"); } else { res.redirect("/error"); } }); أعتقد أنك قد ﻻحظت أن نقطة الوصول هذه مختلفة بعض الشيء عن سابقاتها، ﻻ تقلق، سأشرح كل شيء بالتفصيل. في السطر اﻷول، أنشأنا نقطة الوصول الجديدة والتي تستعمل POST ﻹرسال البيانات، الرابط سيكون: /add-coupon ﻻحظت أننا أضفنا كلمة مفتاحية جديدة هي async وهي ببساطة تعني أن هنالك عملية ستأخذ وقتا غير معروف لهذا قبل الانتهاء من جميع العمليات المطلوبة، يجب إنهاء العمليات التي تأخذ وقتا، من الأفضل أن تتعرف أكثر على تقنية async/await خصوصا في NodeJS. في السطر الثاني، أنشأنا ثابتا جديدا باسم data والذي يحوي جسم الطلب المرسل Request إلى نقطة الوصول، في هذه النقطة ﻻ يزال جسم الطلب خاما، ويجب أن يُعدَّل ليكون كائنًا Object؛ أما في السطر الثالث، فقد عدّلنا أو تنقية الثابت data باستخدام التابع assign المدمج افتراضيًا في لغة Javascript، أُسنِدت النتيجة إلى الثابت dataToSend. بينما في السطر الرابع، أنشأنا ثابتًا جديدًا باسم response وأسندنا نتيجة الدالة AddCoupon إليه. لاحظ أننا استخدمنا كلمة مفتاحية جديدة هي await قبل الدالة AddCoupon، وهنا طلبنا أن ينتظر NodeJS العملية حتى انتهائها قبل القيام بتنفيذ السطر الموالي. كخطوة أخيرة، وضعنا شرطًا للتحقق إن كنا قد تحصلنا على إجابة من الخادم Response أم ﻻ. في حالة الحصول على إجابة، سيُنفَّذ السطر: res.redirect("/"); وهنا، سيُعاد توجيه المستخدم إلى الصفحة الرئيسية. أما في حالة عدم الحصول على إجابة، فسيُنفَّذ السطر: res.redirect("/error"); ويعني أنه سيُعاد توجيه المستخدم إلى صفحة الخطأ وهي في هذه الحالة نقطة وصول ستُنشأ لاحقًا لعرض رسائل الخطأ. اﻵن، بقيت لنا خطوة أخيرة، وهي إنشاء صفحة يستطيع المتصفح الوصول إليها. ببساطة، ننشئ نقطة وصول جديدة باسم coupon والتي تكون من نوع GET، تعرض فقط القالب coupon الذي سبق وأنشأناه. نقطة الوصول ستكون كالتالي: app.get("/coupon", async (req, res) => { res.render("coupon"); }); شغل خادم التطبيق باستخدام الأمر: yarn start توجه إلى الرابط التالي: http://localhost:3000/coupon إن ظهرت لديك رسالة خطأ مشابهة لهذه الرسالة: Error:/zid-local/views/coupon.pug:5:1 Only named blocks and mixins can appear at the top level of an extending template at makeError (/zid-local/node_modules/pug-error/index.js:34:13) تأكد من إزاحة indentation السطور في الصفحة، ويفضل استعمال إضافة pug (jade) formatter والتي تساعدك في تنسيق الشفرات البرمجية الخاصة بمحرك القوالب Pug. بعد تثبيت اﻹضافة، اضغط على Alt+Shift+F لتنسيق الشيفرة البرمجية وحل المشكلة. سيظهر نموذج إنشاء قسيمة التخفيض التي أنشأناها سابقًا باستخدام الملف coupon.pug: أدخل المعلومات الخاصة بقسيمة التخفيض واضغط على إضافة Add من أجل إرسال المعلومات إلى نقطة الوصول التي اضفناها سابقًا add-Coupon ومنها تُعالَج البيانات وتُرسَل إلى الواجهة البرمجية لمنصة زد. في حالة إنشاء قسيمة التخفيض، فسيوجَّه المستخدِم إلى الصفحة الرئيسية التي نحن بصدد إنشائها، أما في حالة وجود خطأ ما، أو عدم القدرة على إرسال الطلب بطريقة صحيحة، سيُعاد توجيه المستخدم إلى صفحة الخطأ التي أنشأناها سابقًا. إنشاء صفحة الأخطاء اﻵن، أنشئ ملفًا جديدًا داخل المجلد views باسم error.pug وضع بداخله الشيفرة البرمجية التالية: doctype html block head meta(charset='UTF-8') meta(http-equiv='X-UA-Compatible' content='IE=edge') meta(name='viewport' content='width=device-width, initial-scale=1.0') link(href='https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css' rel='stylesheet') body block content style. .gradient { background-image: linear-gradient(135deg, #684ca0 35%, #1c4ca0 100%); } .gradient.text-white.min-h-screen.flex.items-center .container.mx-auto.p-4.flex.flex-wrap.items-center .w-full.text-center.p-4(class='md:w-7/12 md:text-left') .text-6xl.font-medium 404 .text-xl.font-medium.mb-4(class='md:text-3xl') | Oops. This page has gone missing. .text-lg.mb-8 | You may have mistyped the address or the page may have moved. a.border.border-white.rounded.p-4(href='/') Go Home في الملف index.js، أنشئ نقطة وصول جديدة كالتالي: app.get("/error", (req, res) => { res.render("error"); }); اﻷمر بسيط ونقطة الوصول هذه تعرض القالب error.pug الذي أنشأناه قبل قليل، حول أي أخطاء تظهر معك إلى الرابط ‎/error من أجل عرض هذه الصفحة. إنشاء الصفحة الرئيسية للتطبيق لننشئ الصفحة الرئيسية للتطبيق، أنشئ ملفًا جديدًا داخل المجلد views باسم index.pug، ثم ضع الشيفرة التالية بداخله: extends page.pug block append head title Welcome block content .flex.mx-auto.items-center.justify-center.shadow-lg.mt-65.mx-8.mb-4.max-w-lg form.w-full.max-w-xl.bg-white.rounded-lg.px-4.pt-2 .flex.flex-wrap.-mx-3.mb-6 h2.px-4.pt-3.pb-2.text-gray-800.text-lg أضف مفتاح المتجر الخاص بك .w-full.px-3.mb-2.mt-2(class='md:w-full') textarea.bg-gray-100.rounded.border.border-gray-400.leading-normal.resize-none.w-full.h-20.py-2.px-3.font-medium.placeholder-gray-700(class='focus:outline-none focus:bg-white' name='body' placeholder='Paste your store X-MANAGER-TOKEN HERE' required='') .w-full.flex.items-start.px-3(class='md:w-full md:w-full') .-mr-1 input.bg-white.text-gray-700.font-medium.py-1.px-4.border.border-gray-400.rounded-lg.tracking-wide.mr-1(type='submit' class='hover:bg-gray-100' value='Add') الآن، علينا أن ننشئ نقطة الوصول الخاصة بالصفحة الرئيسية، في ملف index.js ننشئ نقطة الوصول كما تعودنا، تستخدم طريقة GET لاستقبال البيانات من الخادم: app.get("/", async (req, res) => { res.render("index"); }); نقطة الوصول هذه بسيطة، بحيث أن رابطها هو الرابط الرئيسي للخادم، وتعرض فقط القالب الخاص بالصفحة الرئيسية، والنتيجة ستكون كالتالي: أضفنا حقلًا لإدخال مفتاح مفتاح الوصول الخاص بالمتجر X-MANAGER-TOKEN ليُستخدم مستقبلًا، وسنشرح سبب إضافة هذا الحقل -الواضح- عند الانتهاء من بناء المنصة. بناء خدمة إرسال رسائل بريد إلكتروني بعد أن استرجعنا واستعراض سلات الشراء المتروكة، وأنشأنا قسيمة تخفيض، علينا الآن إرسال بريد إلكتروني يحمل قسيمة التخفيض التي أنشأناها لأصحاب سلات الشراء المتروكة، من أجل تحفيزهم على إنهاء طلباتهم وبالتالي زيادة مبيعات المتجر الخاص بنا. لإرسال رسائل البريد الإلكتروني بطريقة بسيطة، سنستخدم SendGrid والذي يوفر خدمة إرسال مجاني لرسائل البريد الإلكتروني جيدًا للاستخدام البسيط (أو أي خدمة أخرى تختارها). أنشئ حسابًا على منصة SendGrid وفعل حسابك. بعدها، افتح نافذة سطر أوامر في نفس مجلد التطبيق ونفذ الأمر التالي: yarn add @sendgrid/mail سيثبّت هذا الأمر المكتبة الخاصة بمنصة SendGrid. أنشئ ملفا جديدا باسم mail.js وأضف الشيفرة البرمجية التالية: import sgMail from "@sendgrid/mail"; sgMail.setApiKey(process.env.SENDGRID_API_KEY); const sendMail = async (mailData) => { const msg = { to: mailData.to, // SendGrid أضف البريد اﻹلكتروني الذي سجلت به في منصة from: "info@email.com", subject: mailData.subject, text: mailData.text, html: mailData.html, }; const sendingMail = await sgMail.send(msg); if (sendingMail) { return "Mail has been sent"; } else { console.log("SENDING MAIL ERROR ===> ", sendingMail); return "There was a problem in sending the mail"; } }; export default sendMail; بداية، استوردنا مكتبة منصة SendGrid التي ثبتناها قبل قليل، بعدها أضفنا المفتاح المساعد الخاص بحسابنا على المنصة، والذي تحصل عليه من لوحة التحكم الخاصة بحسابك. أنشأنا دالة باسم sendMail والتي تأخذ معاملًا واحدًا يجب أن يكون كائنًا Object والذي سيحوي المعلومات المطلوبة لإرسال البريد الإلكتروني. أنشأنا ثابتًا جديدًا باسم msg والذي يحوي كل من الحقول التالي: Subject: يمثل عنوان البريد الإلكتروني الذي نريد إرساله From: وهو عنوان البريد الإلكتروني الذي سنرسل منه الرسائل، وهو نفس عنوان البريد الإلكتروني الذي أضفتَه إلى حسابك على منصة SendGrid `Subject: عنوان رسالة البريد الإلكتروني التي سنرسلها. Text: نص رسالة البريد الإلكتروني التي سترسله، يجب أن يكون نصا فقط Html: نفس نص رسالة البريد الإلكتروني، ولكن بإمكانك أن تضيف تنسيقات HTML. أنشأنا ثابتًا باسم sendingMail يحوي القيمة الراجعة من التابع send الخاص بمكتبة SendGrid والتي سترسل رسالة البريد اﻹلكتروني إن كانت جميع المدخلات صحيحة. أنشأنا شرطًا بعدها يتحقق إن كانت هنالك إجابة من الواجهة البرمجية لمنصة SendGrid، إن كانت هنالك إجابة ستُرجَع رسالة تفيد بأنه قد تمت عملية اﻹرسال بنجاح. في حالة عدم وجود إجابة من الواجهة البرمجية أو أرجعَت خطأ، نعرض الخطأ عن السطر الموجود بداخل الجزء الثاني من كتلة الشرط، وبعدها نرجع رسالة تفيد بأن هنالك مشكلة عند إرسال البريد اﻹلكتروني: console.log("SENDING MAIL ERROR ===> ", sendingMail); return "There was a problem in sending the mail"; في النهاية، صدّرنا الدالة من أجل نستخدمها في مختلف أجزاء التطبيق. اﻵن سنضيف نقطة وصول جديدة لمشروعنا، في الملف index.js أضف الشيفرة البرمجية التالية: app.post("/mail", async (req, res) => { const data = req.body; const dataToSend = Object.assign({}, data); const send = await sendMail(dataToSend); if (send) { res.send("mail has been sent"); } else { res.send("there was an error"); } }); متأكد أنك قد تعودت على صيغة إضافة نقاط الوصول إلى المشروع، نقطة الوصول هذه مشابهة جدا لنقطة الوصول السابقة التي أضفناها سابقًا. تركيب أجزاء التطبيق مع بعضها انتهينا إلى الآن من بناء الخصائص اﻷساسية للتطبيق، بقي لنا أن نجمع هذه الخصائص كلها من أجل الوصول إلى هدفنا، وهو إرسال بريد إلكتروني لجميع أصحاب سلات الشراء المتروكة حتى نحفزهم على إكمال عملية الشراء بإرسال قسيمة تخفيض إليهم عن طريق البريد اﻹلكتروني. أنشئ ملفًا جديدًا داخل المجلد views باسم loyalty.pug وضع بداخله الشيفرة البرمجية التالية: extends page.pug block append head title Loyalty block content .wrapper.px-2.w-full p.text3xl.items-center.justify-center Send a coupon code to all abandoned carts form.max-w-sm.bg-gray-100.px-3.py-5.rounded.shadow-lg.my-10.m-auto(action='/loyalty' method='POST') .flex.flex-col.space-y-3 .flex.items-center.bg-white.border.border-gray-100.rounded.px-2 input.w-full.py-2.px-1.placeholder-indigo-400.outline-none.placeholder-opacity-50(type='text' placeholder='Enter Coupon Code' autocomplete='off') button.text-white.bg-indigo-500.px-4.py-2.rounded(type='submit') | Send Coupon الصفحة بسيطة، فيها نافذة فقط ﻹضافة قسيمة التخفيض أنشئ ملفًا جديدًا باسم loyalty.js يحمل الشفرة البرمجية التالية: import AbandonedCarts from "./zid.js"; import sendMail from "./mail.js"; const Loyalty = async (couponCode) => { const getAbandondCarts = await AbandonedCarts(); if (getAbandondCarts) { const response = getAbandondCarts["abandoned-carts"]; if (response) { const getEmails = []; for (let i = 0; i < response.length; i++) { getEmails.push(response[i].customer_email); } const mailData = { to: getEmails, // استخدم عنوان البريد اﻹلكتروني الذي سجلت به from: "info@geekcademy.com", subject: "Special Offer for you", text: "يرجى استخدام قسيمة التخفيض التالية " + couponCode + " من أجل إنهاء طلبك", html: "يرجى استخدام قسيمة التخفيض التالية " + couponCode + " من أجل إنهاء طلبك", }; return await sendMail(mailData); } else { return "There was an error getting abandoned carts"; } } else { return "There is a server error"; } }; export default Loyalty; بداية استوردنا كل من دالة جلب سلات الشراء المتروكة AbandonedCarts ودالة إرسال رسائل البريد اﻹلكتروني. بعدها أنشأنا دالةً جديدةً تحت اسم Loyalty والتي ستدمج الدالتين السابقتين بحيث ستجلب سلات الشراء المتروكة أوﻻ، ومن ثم التحقق من وجود المعلومات المطلوبة: const getEmails = []; هنا أنشأنا ثابتًا جديدًا يمثل مصفوفة فارغة، ستوضع عناوين البريد المستخرجة من المعلومات التي حُصِّلت عليها من سلات الشراء المتروكة لعملاء المتجر، بعدها أنشأنا حلقة تكرارية، بحيث تمسح جميع المعلومات المتحصل عليها من الثابت response بعد التحقق من أنه يحوي المعلومات المطلوبة وهي مصفوفة كائنات. مع كل دورة للحلقة التكرارية، يُستخرَج البريد الإلكتروني للعميل الذي ترك سلته دون شراء وإضافته إلى الثابت getEmails ثم أنشأنا بعدها ثابتًا جديدًا تحت اسم mailData والذي سيحوي المعلومات المطلوبة في الدالة sendMail من أجل إرسال رسائل البريد اﻹلكتروني، بعدها أسندت قيمة الثابت mailData إلى الدالة sendMail من أجل إرسال رسالة إلى جميع أصحاب سلات الشراء المتروكة على عناوين بريدهم الإلكتروني المسجل. علينا اﻵن أن نضيف هذا الخاصية إلى ملف index.js، مثل أي نقطة نهاية أضفناها سابقا. نقطة الوصول اﻷولى، خاصة بعرض الصفحة التي أنشأناها للتو: app.get("/loyalty", async (req, res) => { res.render("loyalty"); }); تعرض نقطة الوصول هذه القالب الموجود داخل المجلد views المسمى باسم loyalty.pug. نقطة الوصول الثانية، وهي التي ستحوي على الدالة التي أضفناها قبل قليل بالشكل التالي: app.post("/loyalty", async (req, res) => { const response = await Loyalty(); res.send(response); }); يمكنك اﻵن التوجه إلى الرابط وجرب التطبيق: http://localhost:3000/loyalty اﻵن يمكنك إدخال قسيمة التخفيض في المكان المخصص وإرسالها إلى جميع أصحاب سلات الشراء المتروكة. عند اﻹنتهاء من جميع الخطوات التي ذُكرت في هذا المقال، ستكون الشيفرة البرمجية في الملف index.js كالتالي: import express from "express"; import path from "path"; import AbandonedCarts from "./zid.js"; import AddCoupon from "./addCoupon.js"; import sendMail from "./mail.js"; import Loyalty from "./loyality.js"; const __dirname = path.resolve(); var app = express(); app.use(express.json()); app.use(express.urlencoded({ extended: false })); app.set("views", path.join(__dirname, "views")); app.set("view engine", "pug"); app.use(express.static(path.join(__dirname, "public"))); app.get("/carts", async (req, res) => { const response = await AbandonedCarts(); const renderedData = response["abandoned-carts"]; res.render("abandoned", { renderedData }); }); app.get("/", async (req, res) => { res.render("index"); }); app.get("/loyalty", async (req, res) => { res.render("loyalty"); }); app.get("/coupon", async (req, res) => { res.render("coupon"); }); app.get("/error", (req, res) => { res.render("error"); }); app.post("/loyalty", async (req, res) => { const response = await Loyalty(); res.send(response); }); app.post("/add-coupon", async (req, res) => { const data = req.body; const dataToSend = Object.assign({}, data); const response = await AddCoupon(dataToSend); if (response) { res.redirect("/"); } else { res.redirect("/error"); } }); app.post("/mail", async (req, res) => { const data = req.body; const dataToSend = Object.assign({}, data); const send = await sendMail(dataToSend); if (send) { res.send("mail has been sent"); } else { res.send("there was an error"); } }); const port = process.env.PORT || 3000; app.listen(port, () => { console.log(`Server started on ${port}`); }); أخيرًا، تجد شيفرة التطبيق كاملةً على GitHub بالمستودع zid-retention-app. خاتمة لقد استغللنا في البداية الواجهة البرمجية لمنصة زد وما تقدمه من نقاط وصول وبناء فكرة تطبيق منها يمكن أن يستفيد منه أصحاب المتاجر الذين يعتمدون على منصة زد، إذ يمكنك توفير التطبيق لهم بمقابل لكي يستفيدوا هم أيضًا منه وبذلك يستفيد الجميع. لا يقتصر الأمر على فكرة السلات المتروكة وزيادة الولاء وإنما يمكن بناء عشرات التطبيقات المفيدة لأصحاب المتاجر التي توسع من عمل متاجرهم وكان هذا مجرد مثال، وهو في الحقيقة ما يمكنك عمله مع معظم منصات التجارة اﻹلكترونية مثل منصة سلة وشوبيفاي Shopify، يكفي فقط أن تقرأ التوثيق الخاص بالواجهات البرمجية لتلك المنصات وبناء أفكار مفيدة منها. لكي يكون التطبيق تجاريًا، عليك إضافة نظام لتسجيل الاعضاء ونظام اشتراكات وأيضا نظام تسجيل الدخول والخروج مع إمكانية إضافة المعلومات الشخصية لصاحب المتجر الراغب في التسجيل، وهنا سنستخدم الصفحة الرئيسية التي أضفناها إلى التطبيق index.pug، بحيث سيكون بإمكان العميل المسجل إضافة مفتاح المتجر الخاص به سواءً على منصة زد، أو إضافة المعلومات المطلوبة للربط مع التطبيق في حالة استخدامه لمنصة أخرى مثل Shopify. يمكنك أيضًا إضافة خصائص جديدة لتطبيق كما أشرنا مثل إرسال رسالة نصية للعملاء أصحاب سلات الشراء المتروكة بالتزامن مع إرسال بريد إلكتروني. يمكنك استخدام منصات إرسال الرسائل النصية المتوفرة في بلدك إن وجدت أو استخدام حلول مثل Twilio أو MessageBird. وطبعًا يمكنك توسيع الخدمات التي تقدمها إلى خدمات أخرى يطلبها أصحاب المتاجر كما أشرنا وهنا نترك الأمر لك ولإبداعك. تهانينا، لقد أتممت بناء تطبيق مفيد بإمكانك استعماله بطريقة تجارية إن أحببت وﻹطلاق شركتك الناشئة العاملة في هذا المجال، ولم ﻻ توسعها لتشمل منصات أكثر غير منصة زد فقط! نرجو لك كل التوفيق في رحلتك القادمة. اقرأ أيضًا مدخل إلى الواجهات البرمجية API أمثلة عملية لاستخدام واجهة برمجة متاجر زد zid API التعرف على لوحة تحكم متجر زد الإلكتروني وضبط عمليات المتجر كيفية إنشاء متجر إلكتروني متكامل باستعمال منصة زد

تحدثنا في المقال السابق عن أنواع منصات التجارة الإلكترونية والخيارت المطروحة لبناء متجر إلكترونية وسنشرح في هذا المقال كيفية بناء متجر الكتروني جاهز للإطلاق بسهولة وسرعة عبر منصة زد. توفر منصة زد وهي إحدى المنصات العربية التي توفر لأصحاب المتاجر خدمة إنشاء متاجر إلكترونية جاهزة، حيث تُمكنك من إطلاق متجرك في دقائق معدودة وهي ميزة رائعة جدًا خصوصًا في ظل انتعاش سوق المتاجر الإلكترونية والتي تدفع الجميع إلى فتح متاجرهم الإلكترونية على شبكة الإنترنت حتى أنه في بعض الحالات بدأ التجار الاعتماد على المتاجر الإلكترونية على أنها فروع رئيسية وجعل المتاجر الفيزيائية الموجودة على أرض الواقع مجرد مستودعات لتخزين البضائع والمنتجات. التسجيل في منصة زد سوف أخطو معك في هذا المقال خطوة بخطوة كيفية إنشاء متجر إلكتروني على منصة زد والآن عليك التوجه إلى منصة زد والضغط على خيار "ابدأ تجربتك المجانية". والآن عليك إدخال بياناتك كما هو مُبين في الصورة التالية ثم الضغط على خيار "سجل الآن". سوف تُحوَل إلى لوحة التحكم الخاصة بمتجرك ولكن قبل إكمال إعدادات متجرك عليك تأكيد بريدك الإلكتروني. توجه الآن لصندوق الوارد لبريدك الإلكتروني وابحث عن رسالة التفعيل من منصة زد ثم اضغط على خيار التفعيل. ملاحظة: عليك الضغط على خيار "إعادة إرسال التأكيد" في حال لم تصلك رسالة التفعيل ضمن صندوق الوارد أو في السبام لبريدك الإلكتروني الذي سجلت به. سوف يُعاد توجيهك للوحة التحكم الخاصة بمتجرك على منصة زد والخطوة الأولى سوف تكون بضبط إعدادات المتجر لذلك اضغط على خيار "الذهاب للإعدادات". ضبط المتجر الإلكتروني والمعلومات المتعلقة به يتضمن ضبط المتجر أغلب التفضيلات والتفاصيل الخاصة مثل هوية المتجر ومعلومات التواصل واللغة والعملة الخاصة بالمتجر. والآن أنت في قسم "معلومات النشاط التجاري" من إعدادات المتجر. لاحظ أن المعلومات الموجودة في قسم "عن المتجر" مأخوذة من المعلومات التي قدمتها عند تسجيلك في المنصة لذلك عليك تعديل "اسم المتجر" والذي يأخذ اسمك افتراضيًا. يجب اختيار معلومات قسم "تفاصيل النشاط" بعناية والبداية مع تحديد "مجال النشاط التجاري" والتصنيف الفرعي له إن وجد والصورة التالية تُوضح قسم من النشاطات التي تستطيع الاختيار منها. أما بالنسبة للتصنيف فهو غير موجود دائمًا ويعتمد على خيارك الخاص بالنشاط التجاري، في حالتي اخترت "إلكترونيات" لتكون التصنيفات الخاصة بهذا الخيار كما هو مُبين في الصورة. الآن أدخل رقم السجل التجاري مع رفع صورة عنه واختر حالة النشاط التجاري، بالإجابة عن الأسئلة التالية: هل هو حديث أم قديم؟ وهل لنشاطك هذا فروع؟ وفي حال وُجدت فكم عددها؟ هل نشاطك التجاري تابع لمؤسسة أم فرد؟ في حال كان يتبع لمؤسسة عليك إدخال اسمها وعدد الموظفين ضمنها.. إلخ وعند تحديد مكان العمل عليك اختيار المقر الرئيسي للمؤسسة أو مقرك الشخصي في حال كان نشاطك التجاري يتبع لشخص ثم الضغط على "حفظ" لحفظ ما قُمت بإدخاله في الأقسام السابقة. انتقل الآن قسم "إعدادات المتجر" بالضغط عليها كما هو موضح في الصورة. تستطيع ضمن هذا القسم تخصيص البريد الإلكتروني وهوية المتجر وإضافة عملات لمتجرك وحسابات منصات التواصل الإجتماعي. ولن أشرح خطوات رفع الصور ضمن قسم "هوية المتجر" لبساطته وهو ما تتميز به منصة زد ويجعلها جذابة لجميع التجار بغض النظر عن خبرتهم التقنية. الأمر نفسه ينطبق على قسم "حسابات التواصل الإجتماعي" وقسم "تحسينات محركات البحث". ترسل رسائل بريد إلكتروني تؤكد عمليات الشراء التي يقوم بها العميل على المتجر الإلكتروني لذلك من المُهم اختيار عنوان بريد إلكتروني مرتبط بنطاق الموقع ليتم إرسال هذه الرسائل منه. ولتحديد البريد الإلكتروني اضغط على خيار "تفعيل" الموجود أولًا ضمن قسم "تخصيص عنوان البريد الإلكتروني". أدخل الآن عنوان البريد الإلكتروني الذي تريد أن يظهر على أنه المُرسل للإشعارات من متجرك الإلكتروني. سوف تظهر الآن عبارة "بانتظار التفعيل" كما هو موضح في الصورة ولإتمام التفعيل عليك التوجه لصندوق الوارد الخاص بالبريد الإلكتروني السابق. سوف تصل رسالة للبريد الإلكتروني السابق تتضمن رابط يجب الضغط عليه لتفعيل هذا البريد الإلكتروني كمُرسل للإشعارات ضمن متجرك. سوف يتم توجيهك لصفحة مشابهة للتالية بعد الضغط على رابط التفعيل. والآن عليك العودة إلى صفحة "إعدادات المتجر" وأعد تحميل الصفحة. يجب أن يظهر خيار "إلغاء التفعيل" وهو دليل على تفعيل البريد الإلكتروني السابق على أنه مُرسل الإشعارات. توجه الآن لقسم "العملات ودول الشحن" لإضافة عملة جديدة للمتجر واضغط على خيار "تفعيل المزيد من العملات". ملاحظة: تُتاح خيارات القيمة المُضافة فقط عند اختيار الريال السعودي كعملة أساسية للموقع كما يتم تفعيل الشحن إلى دولة ما عند اختيار عملتها. سوف تظهر قائمة بالعملات وأعلام الدول. اختر العملات التي تريد إضافتها ثم اضغط على "تفعيل العملات". سوف تظهر العملات المُضافة أسفل العملة الأساسية مع إمكانية اختيار أحدها كعملة أساسية. ملاحظة: عند تغيير العملة الأساسية يجب تغيير أسعار المنتجات التي تم إدخالها باستخدام العملة الأساسية السابقة. وهكذا انتهيت من إعدادات المتجر. توجه الآن إلى الصفحة الرئيسية باستخدام القائمة الجانبية ثم ابدأ الخطوة الثانية بإضافة منتج. إضافة منتجات للمتجر الإلكتروني لإضافة منتج عليك اختيار اسمه وسعره وصور مناسبة له إضافة إلى تصنيفه وخيارات مشتقة منه إن وجد. الآن أدخل اسم المنتج باللغتين العربية والإنجليزية وسعره، إضافةً لسعر التخفيض إن وجد، ثم أدخل وزنه والكمية المتوفرة لديك من المنتج (هذا مهم كي لا يتم طلب عدد أكبر مما تملك وبالتالي تخيب أمل العميل بالحصول على المنتج من متجرك). ويُمكنك إضافة كلفة المنتج الحقيقية والتي لن تظهر للعميل ولكن تُستخدم لاحتساب الربح المُحقق عبر المتجر. هل تريد نشر المنتج الآن على المتجر وهل هو منتج قابل للشحن أم لا؟ هذه الخيارات يتم تحديدها باستخدام المفتاحين المتواجدين أسفل سعر المنتج. تستطيع إضافة المنتج دون تحديد تصنيفه ولكن لتنظيم المتجر فإن عملية التصنيف مُحبزة. وستظهر التصنيفات المتوفرة عند الضغط على مربع التصنيف وفي حال عدم وجود أي تصنيف بعد يُمكنك الضغط على خيار "أضف تصنيف جديد". الآن عليك إدخال اسم التصنيف ثم الضغط على "حفظ" كما تستطيع رفع صورة خاصة به وصورة لخلفية الصفحة التي تظهر فيها منتجات هذا التصنيف. يُساعد وجود الوصف ضمن التصنيف محركات البحث على التعرف بصورة أوضح على متجرك الإلكتروني ومحتوياته. سوف يظهر التصنيف المُضاف الآن ضمن خانة التصنيفات لتتمكن من اختياره لمنتجاتك. تستطيع إضافة وصف للمنتج باللغتين العربية والإنجليزية أما بالنسبة للكلمات الدلالية فبعد كتابة الكلمة ادخل فاصلة ليتم التعرف على الكلمة من قبل الموقع وإدخالها. ويمكن إضافة 10 صور كحد أقصى لكل منتج كما تستطيع إضافة وصف لكل صورة وهذا أمر يُساعد في عملية تحسين محركات البحث SEO. وسوف أتكلم عن قسم "تحسينات محركات البحث" قبل قسم "خيارات المنتج" الذي يحتاج القليل من التفصيل. وهنا يجب عليك إدخال عنوان صفحة المنتج ووصفها وتعديل رابط صفحة المنتج بما يتناسب مع محركات البحث. إضافة منتجات متعددة المواصفات نقصد بمنتج بخيارات متعددة المنتج الذي يتوافر بأكثر من نموذج من ناحية الحجم أو اللون أو المواصفات وغيرهم، وهنا يجب عليك التوجه إلى قسم "خيارات المنتج" وذلك لعرض المنتج بأنواع مختلفة من ناحية اللون أو الحجم أو الذاكرة أو حتى نوع مادة التصنيع لكن قبل ذلك ألق نظرة على الصورة التالية والتي تُبين مظهر المنتج دون إضافة خيارات. الآن، عد إلى قسم "خيارات المنتج" تبويب "قائمة منسدلة" واضغط على "إضافة خيار جديد". أدخل اسم الخيار باللغة العربية وتستطيع إضافته باللغة الإنجليزية أيضًأ ثم اضغط على "إضافة". بعد إضافة الخيار يجب إضافة قيم لهذا الخيار لذلك اضغط على "القيمة". الآن، أدخل القيم التي تريد وفي مثالي سوف أضيف خيارين للذاكرة هما 256 جيجابايت و512 جيجابايت. سوف أكرر الخطوات السابقة لإضافة خيار اللون وأسود وأحمر كقيمتين لهذا الخيار لتصبح الخيارات الموجودة كما هو مُبين في الصورة. وسوف أختار جميع القيم وأضغط على خيار "توليد مجموعة خيارات". سوف يتولد أربع خيارات مختلفة ولمعرفة عدد الخيارات المُمكنة عليك تحصيل ناتج جداء عدد قيم الخيار الأول بعدد قيم الخيار الثاني (وجداء الناتج بعدد قيم الخيار الثالث إن وجد) فنحصل على 2×2= 4 خيارات. أستطيع التحكم بكمية المنتج لكل خيار وسعره وسعر التخفيض واستخدام صور خاصة به أيضًا مختلفة عن صور المنتج الأساسي والعدد الأقصى لصور كل خيار هو 10 صور. والآن عليك الضغط على "حفظ" لحفظ الإضافات السابقة على المنتج وبذلك تظهر صفحة المنتج على الشكل التالي. لاحظ وجود قائمتين منسدلتين واحدة لكل خيار. أريد إضافة ميزات يستطيع العميل طلبها عند شراء المنتج مثل كفالة لمدة معينة أو شاحن إضافي. لتحقيق ذلك توجه إلى تبويب "خيارات متعددة" وأضف الميزات مع تكلفتها مثل المثال الموجود في الصورة التالية. سوف تظهر هذه الميزات كخيارات يُمكن للعميل تفعيلها عند شراء المنتج كما هو مُبين في الصورة التالية. ماذا لو أراد العميل طلب هدية مع كتابة عبارة معينة عليها، كيف لك تحقيق ذلك؟ توجه إلى التبويب الأخير "حقل كتابي" وأضف اسم الحقل والكلفة فمثلا أنا أضفت "كتابة إهداء" بكلفة إضافية. أصبحت صفحة المنتج تبدو مليئة بالخيارات. انظر إلى الصورة التالية. لا تنس الضغط على خيار "حفظ" بعد أي تغيير تقوم به على صفحة المنتج كي يظهر هذا التغيير للعميل. ضبط مخزون المنتجات الآن عد للصفحة الرئيسية بعد الانتهاء من إضافة أول منتج لتجد ثلاث خطوات متبقية لإكمالها وهي "مواقع المخزون" و"الدفع" و"الشحن والتوصيل". اضغط على خيار "تحديد المواقع". يجب عليك تحديد موقع المخزون حيث توجد منتجاتك. يُستخدم عنوان المخزون من قبل شركات الشحن لاستلام الطلبات وإيصالها لعملائك، أو كي يستلم العميل الطلب مباشرة من هذا الموقع. لإضافة عنوان موقع اضغط على "إضافة". يجب عليك تحديد اسم الموقع والدولة والمدينة التي يتواجد فيها ثم تحديد خيار استلام الطلبات من هذا العنوان وتحديد خيار الدفع عند الاستلام إن أردت. تستطيع اختيار الموقع بدقة من خلال خرائط جوجل الظاهرة في الصورة وبعد الانتهاء من إدخال بيانات الموقع عليك بالضغط على "حفظ" لتتم الإضافة. سوف يُعاد توجيهك إلى صفحة إضافة موقع المخزون في حال أردت إضافة مواقع أخرى أو تعديل مواقع أدخلتها سابقًا. الشحن والتوصيل بعد الانتهاء من ضبط إعدادات الدفع توجه للصفحة الرئيسية لضبط الخطوة الأخيرة وهي "الشحن والتوصيل". تستطيع اختيار الشركة التي تناسب عملك التجاري والمنطقة الجغرافية التي تستهدفها حيث جميع المعلومات مُفصلة من كلفة وأوقات توصيل. وتحتاج لامتلاك حساب على موقع شركة الشحن (ليس الجميع) كي تستطيع ربطه مع متجرك على منصة زد. لاحظ الخيار الموجود في أعلى القائمة وهو "زد شب" المُقدم من قبل منصة زد والذي يزيح عنك عبء متابعة شركات التوصيل وتفاصيل أنت بغنى عنها أثناء إطلاقك لمتجرك لتصب كامل تركيزك على إنجاح هذا المتجر. للاطلاع على طريقة تفعيل هذه الخدمة اطلع على فيديو تفعيل خدمة زد شب. اتخذ قرارك واضغط على "تفعيل" لشركة التوصيل التي تريد التعاون معها لإيصال منتجاتك لعملائك. وأنا سوف أختار شركة التوصيل Fastlo لتفعيلها. اختر الفرع الذي تريد التوصيل منه ووافق على شروط الخدمة بعد قراءتها. بعد التفعيل سوف يظهر خياران بجانب شركة التوصيل وهما "إلغاء التفعيل" و"تخصيص". اضغط الآن على "تخصيص" لتظهر لك النافذة المُبينة في الصورة التالية. تستطيع إضافة الوقت المتوقع لوصول المنتج باللغتين العربية والإنجليزية وتحديد المدن التي تشملها عملية الشحن. يُمكنك تحديد تسعيرة الشحن من أحد خيارين هما "تسعيرة ثابتة" لا تتغير مهما كان وزن المنتج أو حجمه و"حسب الوزن" والتي يُحدد فيها كلفة ثابتة لأول X كيلو جرام مع احتساب قيمة معينة عن كل زيادة (تستطيع تحديد قيمة الزيادة). اضغط على "حفظ" عند الانتهاء من ضبط الإعدادات السابقة. ملاحظة: عند محاولة تفعيل أحد شركات الشحن والتوصيل قد تُصادف التنبيه التالي في حال لم تُحدد موقع مخزونك. والآن عد للصفحة الرئيسية لتُلاحظ اختفاء الخطوات الخمس بعد إكمال إعدادها ليُصبح متجرك على منصة زد الآن جاهزًا لاستقبال العملاء وخدمتهم. ضبط خيارات الدفع توجه الآن للصفحة الرئيسية من خلال القائمة الجانبية واضغط على "خيارات الدفع". تظهر هذه الخطوة على أنها مُكتلمة بسبب تفعيل خيار "الدفع عند الاستلام" في موقع المخزون الذي أضفته في الخطوة السابقة ولكن حتى الآن لا يوجد أي بوابة دفع مرتبطة بمتجري. سوف تظهر لك صفحة بوابات الدفع الشريكة لمنصة زد. تختلف كل بوابة عن الأخرى بالتكاليف الشهرية وتكلفة التأسيس والبنوك التي تدعمها والبيانات المطلوبة لتفعيل حساب لك على أحد هذه المنصات. لاحظ في الصورة السابقة وجود بوابة تاب في قسم خاص وبقية البوابات مع بعضها في قسم آخر والسبب أن بوابة تاب تدعم جميع البنوك في الخليج العربي وعند استخدامها لمتجرك على منصة زد سوف يتواصل معك موظف من فريق عمل تاب لمساعدتك على تقديم جميع الملفات والمعلومات المطلوبة لحصولك على حساب فعال لديهم وتبدأ باستقبال دفعات إلكترونية ضمن متجرك. كما يوجد شرح مُفصل لمُختلف الحالات المُمكنة لمتجرك عند الضغط على مزيد من التفاصيل لبوابة تاب. ملاحظة: يوجد فرق إن كان متجرك يتبع لمؤسسة أو لفرد لذلك عليك الانتباه لما تختاره في إعدادات المتجر. أما بالنسبة لبقية البوابات فيمكنك الاطلاع على التفاصيل الخاصة بها بنفس الطريقة إذ تعرض منصة زد معلومات هذه البوابات على شكل جدول يُسهل عملية المقارنة والاختيار. ولتفعيل أي من هذه البوابات عليك باتباع التعليمات في آخر سطرين من الجدول. وقد لا تتمكن من استخدام أي من البوابات السابقة في حال لم تحقق الشروط المطلوبة ولكن هذه ليست مشكلة فما زال بإمكانك استخدام حسابك البنكي لاستقبال الدفعات الإلكترونية. لإضافة حسابك البنكي توجه لأسفل صفحة طرق الدفع واضغط على "إضافة حساب جديد". والآن عليك إدخال معلومات حسابك البنكي والضغط على "حفظ". خاتمة تعلمت بقراءتك لهذا المقال كيفية إنشاء متجر إلكتروني بسهولة عبر منصة زد للتجارة الإلكترونية، وكيفية ضبط إعدادات المتجر البسيطة والمتعلقة بمعلومات المتجر من اسم وهوية ومنصات تواصل اجتماعي إضافةً إلى تعلمك لطريقة إضافة منتجات لمتجرك الإلكتروني وضبط المخزون والدفع والشحن والتوصيل بما تتضمنه هذه العمليات من خيارات كثيرة. سنتعرف في المقال التالي أكثر على لوحة تحكم متجر زد الإلكتروني لنتعلم كيفية إدارة متجرنا وضبط خياراته قبل إطلاقه إلى العموم وبدء نشاطاتنا التجارية على الإنترنت. اقرأ أيضًا المقال التالي: التعرف على لوحة تحكم متجر زد الإلكتروني وضبط عمليات المتجر المقال السابق: تعرف على منصة زد العربية للتجارة الإلكترونية وميزاتها

بدأنا في المقال الأول ببناء متجر إلكتروني وتعلمنا كيفية إضافة المنتجات إليه ثم تعرفنا بالتفصيل على لوحة التحكم للمتجر لإدارته وضبط خياراته، والآن بقي موضوعان مهمان يجب الاعتناء بهما قبل إطلاق المتجر الإلكتروني وبعده وهما: مظهر المتجر والتسويق الإلكتروني له. فمظهر المتجر ومعدل انتشاره ووصوله للعملاء لا يقل أهمية عن الميزات والمواصفات والمنتجات التي يمتلكها متجر، وبفضلهما يمكن للعميل العثور على المتجر الإلكتروني وإبداع الإعجاب به ثم الشراء منه والتنقل ضمنه بسلاسة لذلك عليك الاهتمام بهما جيدًا. تخصيص واجهة المستخدم يتضمن هذا القسم تبويبان فقط هما "تخصيص" و"صفحات إضافية"، الأول يسمح باختيار قالب للمتجر وتصميم الصفحة الرئيسية واختيار ألوان أزرار الموقع وأيقونات مواقع التواصل الاجتماعي أما الثاني فيسمح بإضافات صفحات إضافة وإعداد صفحة الأسئلة المتكررة وسياسة الاستبدال والاسترجاع. تخصيص خيارات هذا التبويب بسيطة وسهلة الاستخدام كتغيير لون الأزرار والخطوط ضمنها أو تفعيل ظهور الصفحة الرئيسية أو اختيار القالب theme الفعال. اضغط على "تفعيل الثيم" لتفعيل القالب أو الثيم المطلوب وكما تلاحظ يوجد فقط قالبان هما الثيم الافتراضي والأنيق، تستطيع استعراض الثيم قبل تفعيله كما من الممكن إضافة كود CSS لتغيير تصميم القالب والخطوط والألوان المستخدمة. ولإضافة كود CSS اضغط على Custom CSS وسوف تظهر لك نافذة منبثقة تستطيع لصق الكود فيها. اضغط على العينة sample في أعلى النافذة لتنزيل ملف CSS يتضمن الأصناف المستخدمة للتحكم بعناصر القالب باستخدام كود CSS. بعد الانتهاء من إضافة الكود يجب الضغط على "حفظ". تستطيع أيضًا تخصيص الصفحة الرئيسية من الخيار الموجود في أسفل الصفحة. اضغط عليه لتظهر لك صفحة جديدة تمامًا. ملاحظة: حتى الآن فإن تصميم الصفحة الرئيسية لا يظهر على الموقع لأن مفتاح تفعيل ظهورها ما زال على وضع التعطيل لذلك بعد الانتهاء من التخصيص عليك تفعيله. وعلى اليمين من الصورة السابقة يظهر شريط يتضمن العناصر التي تستطيع إظهارها أو إخفاء ظهورها ضمن الصفحة الرئيسية وذلك من خلال الضغط على أيقونة العين بجانب كل عنصر. ويوجد أيضًا قسم لتعديل رأس الصفحة وأسفل الصفحة وبقية وبقية أقسام الصفحة الرئيسية في المتجر وذلك بمجرد الضغط عليها. فمثلًا عن الضغط على رأس الصفحة، نجد خيارات لتخصيص شريط التنبيهات وشعار المتجر وإتاحة ترتيب القائمة الرئيسية وقائمة المنتجات وتخصيصها. يمكنك تخصيص بقية الأقسام مثل تغيير وصف المتجر وإظهار أيقونات وسائل التواصل الاجتماعي الخاص فيه وأيضًا ألوان النص والخلفية بالإضافة إلى توفير خيار إضافة نص مخصص مع صورة: فيما يخص المنتجات، يمكنك أيضًا إضافة عروض مخصصة في الواجهة الرئيسية من قسم «عروضنا» مثل إضافة عروض فصل ما أو عروض بمناسبة محددة كما يمكنك عرض قسم خاص بالمنتجات التي عليها تخفيض من خيار المنتجات المخفضة وأيضًا يوفر لك خيار المنتجات المختارة وسيلة لعرض منتجات محددة تختارها لعرضها في الصفحة الرئيسية. لا تنسى تخصيص تذييل صفحات موقعك (أسفل الصفحات) من خيار «أسفل الصفحة» وضع فيه نبذة تعريفية عن متجرك ورابط سريعة تهم عملاءك مثل روابط لصفحات الأسئلة الشائعة وسياسة الخصوصية وسياسة الإعادة والاستبدال (سنتحدث بالتفصيل عن الصفحات الإضافية وكيفية إنشائها في القسم التالي) بالإضافة إلى روابط لحسابات متجرك على وسائل التواصل الاجتماعي المختلفة. عمومًا وبالطريقة نفسها، يمكنك تخصيص كل الأقسام وحتى إضافة أقسام جديدة وتخصيصها بالدخول عليها (الخيارات المتوفرة) والنظر في خيارات التخصيص المتاحة فيها. كماإضافة إلى ما سبق، يسمح الشريط الموجود في الأعلى بمعاينة تصميم الصفحة مباشرة باستخدام قياس 3 شاشات واحدة منها للجوال وبما أن المتجر الإلكتروني متوفر بلغتين فإن الخيار الثاني في الشريط يسمح بالتنقل بين اللغتين لهذه الصفحة. ولن يُحفظ أي تغيير ما لم تضغط على "حفظ" لذلك تذكر عمل ذلك بين الفينة والأخرى كي لا يضيع تعبك. اطلع على دليل مركز المساعدة لمزيد من المعلومات المُفصلة حول عملية تصميم الصفحة الرئيسية. صفحات إضافية يجب تفعيل الصفحات الإضافية قبل البدء بتخصيصها. لاحظ وجود أسئلة متكررة وسياسة الاستبدال والاسترجاع وصفحة مخصصة. وسوف أتطرق أولًا للأسئلة المتكررة سهلة الإضافة فعليك أولًا الضغط على خيار "إضافة سؤال جديد". أدخل السؤال وجوابه ثم اضغط على "حفظ". تستطيع إضافة المزيد من الأسئلة بنفس الطريقة السابقة. أما بالنسبة للصفحتين الباقيتين فهما كأي صفحة أخرى تحتاج إلى عنوان ومضمون المحتوى. التسويق للمتجر الإلكتروني كما يُشير العنوان فهذا القسم بتبويباته المُختلفة موجود ليُساعدك على النهوض بمتجرك على منصة زد وتحسين تجربة العميل وجذب المزيد من العملاء من خلال محركات البحث وحث العملاء السابقين على العودة لمتجرك وشراء منتجات جديدة وكل ذلك بالاعتماد على الميزات التي توفرها منصة زد. السلات المتروكة يساعد هذا التبويب على متابعة زوار المتجر وسلات الشراء الخاصة بهم (من قام بالشراء ومن لم يقم بالشراء) كما تستطيع تحديد الفترة الزمنية التي تريد عرضها باستخدام الخيار الموجود في أعلى الصفحة. يوجد أيضًا عداد للسلات المتروكة وآخر للسلات التي تحولت إلى طلبات شراء (أي نجحت في تحويلها إلى عملية شراء). يُمكنك أيضًا ترتيب نتائج العرض من خلال المُدخلات الموضحة في خيار "تصفية السلات". وتتيح منصة زد تصدير معلومات السلات المتروكة في حال احتجت استشارة شخص مُختص في مجال التسويق للحصول على بعض النصائح لتخفيض عدد هذه السلات باعتبار أن ازدياد عددها دليل على مشكلة يواجهها متجرك. اختر إحدى السلات المتروكة واضغط عليها ليتم توجيهك لصفحة تتضمن معلومات العميل والمنتجات الموجودة في سلته كما تُقدم لك مجموعة خيارات للتواصل مع العميل وحثه على إتمام عملية الشراء. يُمكنك التواصل معه عبر اتصال هاتفي أو البريد الإلكتروني أو عبر واتساب. قسائم التخفيض تُساعد قسائم التخفيض في جذب العملاء لمتجرك وخصوصًا في فترة الأعياد أو انتهاء موسم ما خاص بالمنتج كما أنها طريقة فعالة أثناء الترويج لمتجرك فترة افتتاحه. اضغط على "إضافة قسيمة" أو "إنشاء قسيمة جديدة" لأعرفك على خطوات إنشاء قسيمة تخفيض في متجرك على منصة زد. يجب الآن ملء بيانات القسيمة وتخصيصها حسب طلبك، الحقل الأول وهو حقل اسم يُستخدم من قبلك للدلالة على وظيفة القسيمة ولا يظهر للعميل أبدًا. الرمز هو ما يستخدمه العميل للحصول على تخفيض عند شراء المنتجات وهو مكون من أحرف وأرقام بدون فراغات. يوجد نوعان للخصم إما خصم مبلغ من المجموع أو خصم نسبة من المجموع وأي كان خيارك سواء مبلغ أو نسبة فتحديد هذه القيمة يتم في حقل قيمة الخصم والذي يجب أن يتضمن أرقامًا فقط بدون أي إشارات فمثلًا القيمة التي استخدمتها هي 10 وبما أن نوع الخصم هو نسبة فهي تمثل خصم بنسبة 10 بالمئة من قيمة السلة أما لو كنت قد اخترت خصم مبلغ فهذا يعني أن 10 ريال سعودي (العملة الأساسية التي اخترتها لمتجري) سيتم خصمها من القيمة النهائية للسلة. يوجد خيارات إضافية يُمكن تضمينها في القسيمة مثل الشحن المجاني وإعفاء العميل من رسوم الدفع عند الاستلام. يسمح حقل الحد الأدنى للطلب بتفعيل القسيمة عند شراء العميل بمبلغ أعلى من القيمة في هذا الحقل وفي حال بقيت فارغة فهذا يعني أن القسيمة سوف تُطبق على جميع السلات بغض النظر عن قيمتها. بينما حقول التاريخ لتحديد المدة الزمنية التي تعمل فيها القسيمة. ويحدد حقل حدود الاستخدام عدد المرات التي يُمكن فيها استخدام هذه القسيمة ضمن متجرك وعدم وضع قيمة يعني إمكانية استخدامها عددًا غير محدود من المرات بينما حقل حدد الاستخدام لمرة واحدة لعميل واحد فيُحدد عدد المرات التي يُمكن فيها لنفس العميل استخدام هذه القسيمة وعادة تُستخدم القيمة 1 أما إبقاء الحقل فارغًا يعني يستطيع العميل استخدام هذه القسيمة قدر ما يشاء. بقي عليك تحديد المنتجات التي تريد تطبيق هذه القسيمة عليها ثم الضغط على حفظ وإرسال رمز القسيمة لعملائك ليتمكنوا من الاستفادة منها. . يجب الآن ملء بيانات القسيمة وتخصيصها حسب طلبك، الحقل الأول (1) وهو حقل الاسم يُستخدم من قبلك للدلالة على وظيفة القسيمة ولا يظهر للعميل أبدًا. الرمز (2) هو ما يستخدمه العميل للحصول على تخفيض عند شراء المنتجات وهو مكون من أحرف وأرقام بدون فراغات. يوجد نوعان للخصم (3) إما خصم مبلغ من المجموع أو خصم نسبة من المجموع وأي كان خيارك سواء مبلغ أو نسبة فتحديد هذه القيمة يتم في حقل قيمة الخصم (4) والذي يجب أن يتضمن أرقامًا فقط بدون أي إشارات فمثلًا القيمة التي استخدمتها هي 10 وبما أن نوع الخصم هو نسبة فهي تمثل خصم بنسبة 10 بالمئة من قيمة السلة أما لو كنت قد اخترت خصم مبلغ فهذا يعني أن 10 ريال سعودي (العملة الأساسية التي اخترتها لمتجري) سيتم خصمها من القيمة النهائية للسلة. يوجد خيارات إضافية (5) يُمكن تضمينها في القسيمة مثل الشحن المجاني وإعفاء العميل من رسوم الدفع عند الاستلام. يسمح حقل الحد الأدنى للطلب بتفعيل القسيمة عند شراء العميل بمبلغ أعلى من القيمة في هذا الحقل وفي حال بقيت فارغة فهذا يعني أن القسيمة سوف تُطبق على جميع السلات بغض النظر عن قيمتها. بينما حقول التاريخ (6) لتحديد المدة الزمنية التي تعمل فيها القسيمة. ويحدد حقل حدود الاستخدام (7) عدد المرات التي يُمكن فيها استخدام هذه القسيمة ضمن متجرك وعدم وضع قيمة يعني إمكانية استخدامها عددًا غير محدود من المرات بينما حقل حدد الاستخدام لمرة واحدة لعميل واحد (8) فيُحدد عدد المرات التي يُمكن فيها لنفس العميل استخدام هذه القسيمة وعادة تُستخدم القيمة 1 أما إبقاء الحقل فارغًا يعني يستطيع العميل استخدام هذه القسيمة قدر ما يشاء. بقي عليك تحديد المنتجات (9) التي تريد تطبيق هذه القسيمة عليها ثم الضغط على حفظ (10) وإرسال رمز القسيمة لعملائك ليتمكنوا من الاستفادة منها. الخصومات التلقائية هي خصومات تتم على عمليات الشراء ضمن متجرك دون الحاجة لاستخدام قسيمة تخفيض وتشمل هذه الخصومات في منصة زد ثلاث جوانب وهي الشحن والتوصيل المجاني وخصم على الدفع الإلكتروني والخصم لعملاء تطبيق الجوال. اضغط على "تفعيل" لضبط خيارات الشحن والتوصيل المجاني. يجب عليك تحديد السعر الأدنى الذي يُحتسب عنده الشحن مجاني إضافة إلى اختيار الدولة والمدن المدعومة بهذا العرض أما بالنسبة للسعر فيمكنك تجاهله وتطبيق العرض بالاعتماد على السعر الأدنى فقط. بعد الانتهاء مما سبق اضغط على "حفظ" وهكذا تكون انتهيت من ضبط إعدادات الشحن والتوصيل المجاني. ملاحظة: عند اختيار المدن ذات الشحن والتوصيل المجاني في أول دولة تستطيع اختيار دولة ثانية وتحديد المدن ضمنها والتي تريد تطبيق نفس العرض عليها. سوف تظهر رسالة مشابهة للصورة التالية عند شراء العميل منتجات من متجرك الإلكتروني تُشجعه على شراء المزيد لتوفير رسوم الشحن. اضغط على "تفعيل" لضبط خيارات خصم على الدفع الإلكتروني. حدد النسبة المئوية للخصم وتاريخ بداية هذا العرض ونهايته والدول والمدن التي تُقدم نفس العرض ضمنها. سوف تظهر رسالة مشابهة لمحتوى الصورة التالية للعملاء عند اختيار طريقة الدفع لتشجيعهم على الدفع عبر البطاقة الإئتمانية. ملاحظة: تستطيع اختيار مدن مختلفة في دول مختلفة كما في حالة الشحن والتوصيل المجاني. بقي الخيار الأخير وهو تفعيل الخصم لعملاء تطبيق الجوال ويتوجب عليك الاشتراك بخدمة التطبيق لتفعيل هذه الميزة. طريقة ضبط الخصم لعملاء تطبيق الجوال مماثلة تمامًا لآلية ضبط الخصم على الدفع الإلكتروني. تحسينات محركات البحث الخيارات بسيطة ضمن هذا التبويب وتتضمن إدخال عنوان الصفحة الرئيسية لمتجرك ووصف خاص بها وبلغة واحدة فقط كما يوفر هذا التبويب وصول لرابط خريطة المتجر الخاص بك على منصة زد. خاتمة تعرضت في المقال الأول أنواع منصات التجارة الإلكترونية وأشهرها على الصعيد العربي والأجنبي مع عرض مقارنة بين منصة زد وإضافة وكومرس، ثم انتقلت في المقال الثاني إلى شرح خطوات عملية لإنشاء متجر إلكتروني على منصة زد وهذا ما أكمله المقال الثالث بشرح كامل تفاصيل لوحة تحكم زد ليشرح أخيرًا هذا المقال خيارات التسويق وتخصيص صفحات المتجر. والآن بعد هذه السلسلة المبسطة للغاية لا تتردد في بدء عملك وإطلاق متجرك الإلكتروني أو البدء في تجارتك الإلكترونية على الإنترنت.

تضمن المقال السابق خطوات إنشاء متجر إلكتروني على منصة زد ومع شرح كل المعلومات الأساسية المتعلقة به، والآن سوف أقوم في جولة ضمن لوحة تحكم متجرك الإلكتروني الجديد لتتمكن من استخدام جميع ميزاتها ومعرفة ما يجب عليك استخدامه من ميزات وخدمات تُساعدك على تطوير تجارتك الإلكترونية وتحقيق نجاحها. تتألف لوحة التحكم ضمن منصة زد من عناصر عديدة سوف أقوم بالمرور على أهم ما يلزم متجرك الإلكتروني ليصبح جاهزًا للإطلاق للعلن، ولنبدأ مع الرئيسية. الرئيسية تتضمن هذه الصفحة معلومات عامة عن المتجر مثل المبيعات والطلبات والزيارات ومعدل التحويل خلال الشهر الحالي إضافة إلى الطلبات الجديدة والمنتجات الأكثر مبيعًا والمنتجات التي قاربت على النفاذ ضمن المخزون. التقارير تُقدم هذه الصفحة معلومات واسعة عن متجرك الإلكتروني يُمكنك الاستفادة منها لزيادة مبيعاتك أو معرفة الخلل في حال كانت المبيعات ضعيفة. المعلومات متنوعة ضمن هذه الصفحة حيث يوجد تقارير عن الطلبات الجديدة والجاري توصيلها إضافة إلى قيمة المبيعات ومجموع الطلبات. تستطيع معرفة مصادر الزيارات لمتجرك أيضًا وآخر المنتجات التي تم بيعها. الطلبات يسمح لك هذا القسم بإدارة الطلبات أو إنشاء طلبات جديدة للعميل والتحكم برسائل حالات الطلبات التي تصل للعميل. جميع الطلبات اضغط على السهم الموجودة ضمن عمود "إجراءات" لعرض معلومات أكثر عن الطلب. لعرض تفاصيل الطلب كاملة عليك الضغط على خيار "عرض تفاصيل الطلب". تستطيع تغيير حالة الطلب من صفحة تفاصيل الطلب السابقة أو مباشرة من صفحة "جميع الطلبات" والحالات الـ 6 الممكنة للطلب مع تفاصيلها هي: جديد: وتعني بأن طلبات جديدة وصلت للمتجر. جاري التجهيز: وهي مرحلة تجهيز الطلب للعميل وإعداده. انتبه إلى أنه لا تصل رسالة نصية للعميل في حال تم تحويل الطلب إلى جاري التجهيز. جاهز: بعد تجهيز طلب العميل ينقل الطلب لمرحلة الجاهز وترسل رسالة نصية أو عبر البريد الإلكتروني بأن طلب العميل جاهز وسيصل قريبًا، وتصل أيضًا رسالة لشركات الشحن المربوطة بنظام زد بأن الطلب جاهز للإستلام من موقع المخزون، أي هذه الحالة هي الحالة التي تنقل الطلب من نظام زد إلى نظام شركة الشحن. جاري التوصيل: تم استلام الطلب من قبل شركة الشحن وسوف يتم توصيله للعميل، وشركة الشحن هي من تقوم تغيير حالة الطلب إلى جاري التوصيل. مكتمل: تم توصيل الطلب إلى العميل، وأيضًا شركة الشحن هي من تقوم بتغيير حالة الطلب إلى مكتمل. ملغي: في حال لم يتم استلام المنتج من قبل العميل ستقوم شركة الشحن بتحويل حالة الطلب إلى ملغي، وأيضًا يمكنك إلغاء الطلب مباشرة من داخل لوحة التحكم. تستطيع تعديل الطلب حيث تشمل عملية التعديل تعديل عنوان العميل، وإضافة منتجات أو حذف منتجات، وتغيير طريقة الشحن، وتغيير طريقة الدفع، وإضافة كوبون خصم. ملاحظة هامة: يُسمح لك بتعديل الطلب 3 مرات فقط. تستطيع أيضًا عرض تفاصيل الفاتورة من خلال الضغط على "عرض الفاتورة" وإن أردت يُمكنك طباعتها لإرفاقها مع المنتج قبل شحنه. بعد استلام شركة الشحن والتوصيل المنتج سوف تتحول حالة الطلب إلى جاري التوصيل وعندها تستطيع تتبع الشحنة من خلال عرض تفاصيلها والضغط على "تتبع الطلب" ضمن قسم "طريقة التوصيل". عد إلى صفحة "جميع الطلبات". تستطيع من هنا تغيير حالة الطلب لمجموعة طلبات دفعة واحدة من خلال تحديد الطلبات ثم استخدام خيار "تغيير حالة الطلب" الموجود فوق الطلبات. ويمكن عرض الفواتير وطباعتها لمجموعة طلبات بنفس الطريقة السابقة ولكن بالضغط على "عرض الفاتورة"، أيضًا تستطيع تصدير الطلبات المحددة إلى ملف Excel من خلال الضغط على "تصدير". ملاحظة: لن تتفعل الخيارات السابقة ما لم تُحدد طلبات لتنفيذ الأوامر السابقة عليها. استثنيت في الفقرة السابقة الكلام عن "طباعة بوليصة الشحن" وذلك لأنك لا تستطيع طباعة بوليصة لطلب إلا إن كان الشحن يتم عن طريق شركة وليس استلام من المخزون والأمر الثاني يجب أن تكون حالة الطلب جاهز كي تستطيع طباعة بوليصة الشحن الخاصة به. اختر الطلبات ذات حالة الطلب جاهز ثم اضغط على "طباعة بوليصة الشحن". سوف تظهر لك نافذة منبثقة صغيرة تتضمن الطلبات التي تمتلك بوليصات شحن، اضغط على "طباعة" لتوليد ملف PDF لبوليصة الشحن. تستطيع تصدير جميع الطلبات لبريدك الإلكتروني من خلال الضغط على "تصدير الكل". إنشاء طلب لعميل هذا القسم مهم جدًا للتعامل مع العملاء الذين يجدون صعوبة في التعامل مع المتجر من ناحية الشراء وإتمام الطلب أو لإرسال منتج جديد لعميل فُقد طلبه أثناء الشحن مع شركة الشحن أو غيرها من الحالات. أيضًا بعض المتاجر تُرسل هدايا لعملائها في مناسبات خاصة مثل الأعياد أو عند شرائهم عدد معين من المنتجات للحفاظ على علاقة جيدة مع العميل. ملاحظة: إنشاء الطلب يتم فقط للعملاء الموجودين ضمن السعودية ودول الخليج العربي. للبدء عليك ملء بيانات صفحة "المنتجات ومعلومات العميل" واختيار العملة التي يتم احتساب التكاليف فيها ثم اختيار العميل من خلال البحث عنه إن كان عميلًا سابقًا لديك. الخطوة التالية تتمثل باختيار المنتجات أو مجموعة المنتجات التي تريد تضمينها بالطلب وذلك بالضغط على "استعراض" حيث تظهر نافذة منبثقة تستطيع من خلالها البحث عن المنتجات وإضافتها للطلب. وهكذا يُصبح خيار "التالي" مفعلُا للانتقال للخطوة التالية. ملاحظة: لإنشاء طلب لعميل غير موجود عليك الضغط على خيار "إضافة عميل جديد" لتظهر لك نافذة منبثقة تطلب منك إدخال معلومات هذا العميل. يجب الآن اختيار عنوان العميل لإرسال الطلب إليه وبعدها تستطيع الانتقال للخطوة التالية بالضغط على "التالي". ملاحظة: تستطيع إضافة عنوان جديد في حال كانت عناوين التوصيل الموجودة قديمة أو في حال كان العميل غير مسجل بالمتجر وبالتالي ليس له أي عنوان. اضغط على خيار "إضافة عنوان جديد". ملاحظة: تستطيع اختيار شخص آخر لاستلام الشحنة بدلًا من عميلك وفي هذه الحالة عليك تفعيل خيار "شخص آخر سوف يستلم الشحنة" وإدخال معلوماته. تستطيع أيضًا إرسال إشعارات ورسائل الطلب للشخص المُستلم من خلال تفعيل الخيار الموجود في أسفل الصورة. يجب اختيار طريقة الشحن هل هي عن طريق شركة شحن أم استلام من الموقع وفي حال وُجد أكثر من خيار لشركة الشحن يجب اختيار أحدها. ملاحظات: سوف تظهر شركات الشحن التي تدعم العنوان المُرسل له فقط. يظهر خيار الدفع عند التوصيل فقط في حال كان العنوان المُرسل إليه مدعومًا بهذه الخاصية. يختلف معلومات المُستلم عن معلومات العميل في حال اخترت تسليم الشحنة لشخص مُختلف في الخطوة السابقة. عليك اختيار طريقة الدفع من أحد طرق الدفع التي أضفتها لمتجرك وفي حالتي لم أضف سوى خيار "الدفع عن الاستلام". بعد التأكد من جميع المعلومات اضغط على "التالي". الآن عليك مراجعة جميع المعلومات والتأكد من صحتها والضغط على "تأكيد الطلب" ليُضاف الطلب وتتم معالجته مثل أي طلب جديد وارد لمتجرك على منصة زد. ملاحظة: سوف تصل رسالة للعميل برقم الطلب بمجرد تأكيد الطلب. المسودات هي الطلبات التي أنشأتها في القسم السابق ولكن لم تُكملها. تستطيع من هنا إكمال أي طلب من خلال الضغط على رقم المسودة أو حذفه أو التعديل عليه. رسائل حالات الطلبات تستطيع في هذا القسم شحن رصيدك بالرسائل واختيار حالات الطلب التي يتم عندها إشعار العميل برسالة نصية من المتجر، أيضًا تستطيع تخصيص الرسائل المُرسلة للحالات إن لم تُناسبك الرسائل الافتراضية. تستطيع تخصيص اسم المُرسل ولكن تحتاج لامتلاك سجل تجاري ودفع رسوم لتتمكن من ذلك. اضغط على "عرض الأسعار" للاطلاع على الرسوم. يوجد أربع حالات للطلب يتم إرسال إشعارات فيها وهي جديد وجاهز ومكتمل وملغي. تستطيع اختيارها جميعًا أو تحديد الحالات المهمة لك وللاطلاع على محتوى الرسائل تستطيع الضغط على أيقونة العين بجانب اسم الحالة. لتخصيص رسالة حالة طلب معين عليك تفعيل خيار التخصيص واختيار حالة الطلب (جاهز أو مكتمل أو ملغي) وملء المربع بجانبها بالنص الذي تريد ولتسهيل عملية تصميم الرسالة اضغط على إشارة الاستفهام بجانب خيار "تخصيص" للاطلاع على الرموز المُتاحة. ملاحظة: تُرسل الرسائل عبر البريد الإلكتروني للعميل في حال عدم وجود رصيد رسائل وذلك فقط في حال سجل العميل ضمن متجرك من خلال البريد الإلكتروني. اضغط على "حفظ" عند الانتهاء من ضبط الإعدادات السابقة. المنتجات تستطيع في هذا القسم إضافة المنتجات وتعديلها وحذفها مع إضافة تصنيفات خاصة بها لتسهيل فرزها وعرضها ضمن المتجر. جميع المنتجات هنا تُعرض المنتجات التي أضفتها لمتجرك وتظهر معلومات كل منتج بجانبه وتستطيع حذف أو تعديل المنتج باستخدام الخيارات الموجودة لكل منتج على حدى. تستطيع حذف مجموعة منتجات معًا وذلك من خلال تحديدها والضغط على خيار "حذف المنتجات". يُمكنك أيضًا تصدير المنتجات جميعها وذلك باستخدام الخيار "تصدير جميع المنتجات" الذي سوف يُرسل لك رابط بملف يتضمن جميع المنتجات إلى بريدك الإلكتروني. وكما تستطيع تصدير معلومات المنتجات فإنك تستطيع استيرادها من ملف خارجي أيضًا وذلك بالضغط على "استيراد المنتجات" واختيار الملف الذي يتضمن معلومات المنتجات. شرحت في المقال السابق خطوة إضافة منتج. تصنيف المنتجات كنت أضفت تصنيفًا جديدًا في المقال السابق أثناء إضافة المنتج لذلك سوف يتضمن هذا القسم التصنيف الذي أضفته مسبقًا وهو "هواتف ذكية". وأستطيع تعديل معلومات هذا التصنيف من صورة ووصف باللغتين العربية والإنجليزية إضافة لبيانات تحسينات محركات البحث. يُوفر المتجر خيارات لحذف التصنيف أو إخفائه. اضغط على "المنتجات" لعرض المنتجات التابعة للتصنيف ويوجد خيار لإضافة منتجات موجودة للتصنيف مباشرة من هذه النافذة. ويمكن إضافة تصنيف باستخدام الخيار الموجود في أعلى الصفحة بنفس الطريقة التي أضفت بها التصنيف عند إضافة المنتج في مقال كيفية إنشاء متجر إلكتروني على منصة زد. العملاء تتضمن هذه الصفحة جميع العملاء المُسجلين في المتجر حيث تستطيع تصدير بياناتهم من خلال الضغط على خيار "تصدير جميع العملاء" ليُرسل لك ملف إلى بريدك الإلكتروني يتضمن معلومات جميع العملاء ضمن متجرك. حذف حساب عميل أمر بسيط ويتم بالضغط على أيقونة سلة المهملات بجانب اسم العميل أو من خلال تحديد العميل والضغط على "حذف العملاء" وهذا الخيار يُستخدم عند حذف مجموعة عملاء. لإضافة عميل يدويًا يجب عليك الضغط على "إضافة عميل جديد" وملء بيانات العميل وانتبه إلى أن الاسم ورقم الجوال هي بيانات لا يُمكن إنشاء حساب للعميل بدونها. بقي ميزة أخيرة في هذا القسم لشرحها وهي استيراد العملاء باستخدام ملف Excel وللبدء بذلك اضغط على "استيراد العملاء" لتظهر لك النافذة التالية. هذه الميزة مُفيدة جدًا في حال كان لديك متجر فيزيائي وتحتفظ قائمة بعملائك وعناوين بريدهم الإلكتروني، عندها تستطيع إضافتهم إلى متجرك على منصة زد دون جهد يُذكر. اضغط على "تنزيل" للحصول على ملف Excel يحوي عينة عليك اتباعها عند ملء الملف ثم عليك رفعه مرة ثانية عند الضغط على "رفع". إن اخترت "تحديث بيانات العملاء الحاليين" سوف تُستبدل بيانات العملاء الحاليين بالبيانات الموجودة ضمن الملف. اضغط الآن على "استيراد" لتتم العملية بنجاح. ملاحظة: قد يحصل خطأ عند استيراد معلومات العملاء. اضغط على "استعراض التقرير" لمعرفة أسباب الخطأ وتفاديها في عملية الاستيراد الجديدة. سوق التطبيقات توفر منصة زد لمتجرك الإلكتروني عددًا كبيرًا من التطبيقات المُفيدة والتي تساعد على تطوير متجرك من ناحية التفاعل مع العملاء وتُخفف عنك مصاعب إدارة المخزون والمدفوعات وحتى إيجاد المنتجات المناسبة لعرضها على متجرك. جميع التطبيقات تعرض هذه الصفحة جميع التطبيقات الموجودة حاليًا ضمن منصة زد والتي تستطيع تفعيلها والاستفادة من خدماتها ولكن فقط في حال اشتركت بأحد باقات منصة زد (غالبة التطبيقات تحتاج ذلك). في أعلى الصفحة يوجد خيارات لمساعدتك على مراجعة التطبيقات حسب عملها فهنالك تطبيقات تختص بخدمة العملاء وأخرى بالشحن والتخزين مثلًا. سوف تظهر صفحة خاصة بالتطبيق تشرح ميزات التطبيق وملاحظات خاصة بعمله إضافة لوجود مقطع فيديو في أسفل الصفحة يوضح مزايا هذا التطبيق وكيف يمكن لمتجرك على منصة زد من الاستفادة منه. اضغط على "تفعيل" للاطلاع على معلومات أي تطبيق ومعرفة خطوات تفعيله وآلية استخدامه. تستطيع زيارة مركز المساعدة التابع لمنصة زد لمعلومات تفصيلية أكثر حول كيفية تفعيل هذه التطبيقات وربطها مع متجرك. إدارة التطبيقات تظهر هنا التطبيقات التي فعلتها وتعمل الآن على متجرك، وعند الضغط على "إعدادات التطبيق" سوف يُعاد توجيهك إلى صفحة التطبيق لتعديل ضبطه عند الحاجة. منظومة زد والأدوات الأساسية تتضمن المنظومة الأدوات الرئيسية التي يقوم عليها متجرك من شحن وتخزين ودفع وتصميم وتسويق وتغليف وغيرها. شرحت أثناء إعداد المتجر في مقالتنا السابقة تبويبي "الدفع" و"الشحن والتوصيل" ولذلك لن أتطرق لهما هنا وما بقي من السهل الاطلاع عليه كخدمات وأدوات أساسية مساعدة لك كتاجر تسعى للنجاح وهي تخزين المنتجات وإدارة الطلبات وخدمات التصوير والتصميم والتسويق والمطبوعات الدعائية والتغليف والعمل المشترك وغيرهم. فريق العمل تستطيع هنا إضافة حسابات لفريق العمل الخاص بمتجرك الإلكتروني ويجب الانتباه إلى أن عدد أعضاء الفريق المسموح بهم يختلف بحسب الباقة فهو 3 لباقة الأعمال متضمنًا الحساب الرئيسي و9 لباقة النمو متضمنًا الحساب الرئيسي أيضًا. اضغط على "عضو جديد" أولًا. أدخل الآن اسم العضو وبريده الإلكتروني وصفة عضو فريق العمل (حقول مطلوبة) حيث توجد قائمة طويلة بالصفات ثم اضغط على "حفظ". سوف يُرسل بريد الكتروني لحساب العضو تتضمن رقمًا سريًا ليتمكن من تسجيل الدخول ضمن متجرك الإلكتروني ويستطيع بعدها تغيير كلمة المرور. إسناد الصلاحيات للعضو يتم حسب الصفة التي أسندتها له فمثلًا إن كان مسؤولًا عن التسويق فيجب إعطاؤه صلاحيات التسويق والعملاء على الأقل. اضغط على "حفظ" لإتمام عملية إسناد الصلاحيات لهذا العضو. الإعدادات تتضمن الإعدادات قسم كبير من الجوانب التي شُرحت في هذا المقال والمقال السابق لذا الخيارات المُحاطة بمربعات خضراء هي خيارات شُرحت سابقًا. اضغط على "إدارة الاشتراك". هنا تظهر الباقة المُشترك بها وميزاتها كما تستطيع الاشتراك بباقة وخدمات مختلفة. عد لصفحة الإعدادات واضغط على "خصائص المتجر". تتضمن هذه الصفحة بعض الميزات التي تستطيع تفعيلها أو تعطيلها ووظيفة كل منها موضحة كما وردت في الصورة التالية. لتفعيل التقييمات وإدارتها عد إلى صفحة الإعدادات واضغط على "إدارة التقييمات" ثم اضغط على "تفعيل تقييم المنتجات" ليتمكن عملاء الموقع من إضافة تقييمهم للمنتج ضمن متجرك الإلكتروني. لمزيد من المعلومات عن موضوع التقييمات تستطيع الاطلاع على الفيديو. اسم المتجر عنصر أساسي في عملية التسويق له وبالنسبة للمتاجر الإلكترونية فهنا يأتي دور النطاق لذلك لا يكفي استخدام نطاق فرعي تابع لمنصة زد بل يجب عليك ربطه بنطاق خاص بك مرتبط باسم المتجر. وتستطيع ربط المتجر بالنطاق إن كنت تمتلك النطاق أو إن كنت لا تمتلكه ولكنه متوفر (غير مملوك من قبل أحد) حيث تقوم منصة زد بشرائه لك. لإدارة متطلبات النطاق اضغط على "نطاق مخصص" في صفحة الإعدادات واقرأ المطلوب. ولا يكفي أن تصل إشعارات المتجر لبريدك الإلكتروني فقط لذلك تستطيع الاستعانة بفريقك لمتابعتها معك أيضًا ولضبط هذا الأمر اضغط على "إشعارات الفريق" وأضف البريد الإلكتروني لعضو الفريق مع تحديد الحالات التي تريد أن يتم إشعار أعضاء الفريق بها ثم اضغط "حفظ". يجب على متجرك الالتزام بالقوانين الناظمة لعمل المتاجر الإلكترونية في الدول التي يبيع لمواطنيها لذلك فإن "الصفحات القانونية" هي قسم مهم من صفحة الإعدادات ويجب ملء محتويات الصفحات هذه بعناية ودقة. لتعديل محتوى أي من الخيارات التالية عليك الضغط عليها وتعديلها وثم حفظها. وذات المبدأ ينطبق على "سياسة الاستبدال والاسترجاع" فوجود هذه السياسة ضمن أي متجر يزيد من ثقة العميل للتعامل معه والشراء منه. كما يجب إنشاء رمز مصادقة لربط منصة زد مع أنظمة مختلفة تسهل عليك إدارة متجرك ولإنشائه عليك الضغط على "الربط مع الخدمات" ثم على خيار "قم بإنشاء رمز المصادقة Manager Token". سوف يظهر الرمز كما في الصورة التالية. بقي عليك ضبط "إعدادات الضريبة" ليصبح متجرك الإلكتروني جاهزًا من الناحية القانونية والمالية وبالضغط على هذا الخيار سوف تُحول إلى صفحة جديدة تستطيع من خلالها تفعيل الضريبة والإجابة عن بعض الأسئلة المرتبطة بأسعار المنتجات. بعد ذلك عليك إضافة دولة وحفظ ما سبق من خطوات. عند إضافة الدولة سوف تظهر لك النافذة المنبثقة التالية. اختر الدولة وأدخل الرقم الضريبي ونسبة الضريبة مع صورة عن شهادة ضريبة القيمة المُضافة واضغط على حفظ. عليك بتكرار ما سبق لكل دولة بشكل منفرد. خاتمة أكملت في هذا المقال شرح أهم أقسام لوحة التحكم التي توفرها منصة زد لإنشاء متجر إلكتروني، وسوف أتحدث في المقال القادم عن الخيارات التي توفرها المنصة للتسويق للمتجر بالإضافة إلى شرح كيفية بناء "خيارات الواجهة" المرتبطة وتنسيقها بطريقة عرض المنتجات وهو بأهمية الأقسام السابقة لكونه عامل رئيسي في جذب العملاء وارتياحهم لتصفح المتجر والشراء منه. اقرأ أيضًا المقال التالي: تخصيص متجرك الإلكتروني المبني باستعمال منصة زد والتسويق له المقال السابق: كيفية إنشاء متجر إلكتروني متكامل باستعمال منصة زد