بناء موقع إلكتروني للتجارة الإلكترونية يعتمد على React و GraphQL باستخدام Pickbazar

هناك الكثير من قوالب التسوق المتاحة في العديد من الأسواق. لكن اختيار الشخص المناسب أمر صعب للغاية. اليوم سنتحدث عن قالب التسوق أو التجارة الإلكترونية المسمى "PickBazar" الذي طورته RedQ Inc. وهو نموذج جديد تم نشره في سوق Envato.

ما هي React ولماذا نستخدمها؟

React هي مكتبة JavaScript قائمة على المكونات لإنشاء واجهات المستخدم ويتم تقديمها بواسطة Facebook. يسمح لنا بإنشاء مكونات مغلفة تدير حالتها ثم تكوينها لإنشاء واجهات مستخدم معقدة. ReactJS هي واحدة من مكتبة واجهة المستخدم المستخدمة على نطاق واسع والتي تساعد في إنشاء تطبيقات ويب جميلة تتطلب الحد الأدنى من الجهد والتشفير.

ما هي GraphQL ولماذا ننفذها؟

تم تطوير GraphQL في عام 2012 ، داخليًا بواسطة Facebook قبل طرحها للجمهور في عام 2015. GraphQL هي لغة استعلام ومعالجة للبيانات مفتوحة المصدر لواجهات برمجة التطبيقات ، ووقت تشغيل للوفاء بالاستعلامات بالبيانات الموجودة. تدعم GraphQL القراءة والكتابة والاشتراك في التغييرات على البيانات (تحديثات الوقت الفعلي - الأكثر شيوعًا التي يتم تنفيذها باستخدام WebHooks). خوادم GraphQL متاحة بعدة لغات. يسمح للعملاء بتحديد بنية البيانات المطلوبة ، ويتم إرجاع نفس بنية البيانات من الخادم ، وهذا هو السبب في منع إرجاع كميات كبيرة جدًا من البيانات.

من المستفيد من نموذج PickBazar؟

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

مجالات الفوائد

خضروات

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

مقابل

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

توصيل طلبات الطعام

يعتبر توصيل الطعام عملاً مربحًا إذا كان بإمكانك الحفاظ عليه من خلال التواجد الجريء عبر الإنترنت ؛ PickBazar هنا لمساعدتك في هذا الجانب. لدى PickBazar نظام ممتاز لإدارة التسليم وإدارة تتبع الطلبات. حتى تتمكن من إدارة أعمال توصيل الطعام الخاصة بك من البداية باستخدام نموذج PickBazar.

مكتبة لبيع الكتب

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

بعض ميزات التعميم

نظام إدارة الخروج هو ميزة من PickBazar لأي نوع من المتاجر عبر الإنترنت. باستخدام هذه الميزة ، يمكن للعملاء ومالكي المتاجر على حد سواء الحفاظ على اتصال عمل. أعني عنوان التسليم والدفع وتتبع الطلبات ، كل هذا ممكن عبر نظام إدارة الخروج.

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

اصنع موقع التجارة الإلكترونية الخاص بك باستخدام نموذج React PickBazar

أسرع قالب للتجارة الإلكترونية تم إنشاؤه باستخدام React و NextJS و TypeScript و GraphQL و Type-GraphQL و Styled-Components. إنه سهل الاستخدام ، وقد استخدم المطورون GraphQL و type-GraphQL ، ويمكنك إنشاء مخططك بسهولة شديدة. تُعد GraphQL Playground وثائقها الخاصة ، وسيحب فريق الواجهة الأمامية استخدامها. سيكون إنشاء متجر على الإنترنت أسهل من أي وقت مضى.

إذا قمت بتنفيذ هذا النموذج ، فيمكنك زيادة مبيعاتك بالتأكيد. من أجل التشغيل السلس والتعامل مع حجم كبير من بيانات البيع وتتبع الأوامر ، سيكون "PickBazar" هو الخيار الأكثر أهمية.

مشاهدة العرض التوضيحي

لماذا استخدم نموذج التسوق React PickBazar؟

تم تطويره باستخدام تقنية Bleeding Edge للمشروع القابل للتطوير بدرجة كبيرة.

واجهة المتجر

• يتم استخدام JS التالية و React Apollo و GraphQL.
• تتم كتابة جميع المكونات في TypeScript.
• Monorepo مدعوم بتكوين Lerna.
• دعم SSR لبناء تطبيقات قابلة للتطوير بدرجة كبيرة.

متجر لوحة القيادة

• يتم استخدام إنشاء تطبيق React (CRA) و React Apollo و GraphQL.
• تتم كتابة المكونات في TypeScript و Base Web React UI Framework.
• يمكنك إنشاء منتجات بسهولة في الواجهة الخلفية.
• نموذج خطافات React للتعامل مع النموذج.

قم بإنشاء تطبيق التجارة الإلكترونية التالي مع Pickbazar.

أنشئ تجربة تجارية رائعة باستخدام إطار عمل Next.js العالمي الذي يقدمه الخادم. إنه سهل الاستخدام للغاية ، استخدمت شركة RedQ Inc. GraphQL و Type-GraphQL.

تكامل دفع سهل مع Stripe!

Stripe هو أفضل منصة برمجية لإدارة الأعمال التجارية عبر الإنترنت. يبني Stripe أقوى الأدوات وأكثرها مرونة للتجارة عبر الإنترنت. تدمج شركة RedQ Inc. Stripe مع نموذج PickBazar الخاص بها.

ميزات نموذج React PickBazar

تقنية حافة النزيف

تُستخدم JS التالية و React Apollo و GraphQL لبناء مشروع تجارة إلكترونية فائق السرعة.

رد فعل أبولو

يتيح لك React Apollo جلب البيانات من خادم GraphQL الخاص بك واستخدامها في بناء واجهات مستخدم معقدة ومتفاعلة.

أداء سريع

محسّن لحجم بنية أصغر وتجميع أسرع وعشرات من التحسينات الأخرى.

مكونات مدمجة

تتم كتابة المكونات في TypeScript و Base Web React UI Framework. المكونات سهلة الفهم.

جاهز للنشر

جعلت شركة المطورين RedQ Inc. عملية النشر نظيفة وبسيطة. يمكنك نشر القالب باستخدام Now.sh.

دعم مؤلف النخبة

يمكن لشركة RedQ أن تضمن لك دعم Elite Author المناسب والاستجابة الأسرع لمنتجاتها.

الشروع في العمل والتثبيت

لبدء استخدام النموذج ، يجب عليك اتباع الإجراء أدناه. أولاً ، انتقل إلى PickBazar

الدليل. ثم قم بتشغيل الأمر التالي للبدء بجزء محدد.

// على خيوط دليل pickbazar

مسؤل

لبدء جزء لوحة تحكم المسؤول ببيانات API المقابلة ، قم بتشغيل الأوامر أدناه.

// بالنسبة إلى وضع dev ، يتم تشغيله أسفل الأمر yarn dev: admin

// لوضع الإنتاج ، قم بتشغيل أدناه بناء خيوط الأمر: admin

محل

مفتاح API stripe con gure في /packages/shop/next.config.js. في قسم env ، اضبط STRIPE_PUBLIC_KEY على مفتاح شريطك العام.

لبدء جزء المتجر بواجهة برمجة التطبيقات المقابلة ، قم بتشغيل الأوامر أدناه.

// لوضع dev ، قم بتشغيل الأمر أدناه yarn yarn dev: shop

// لوضع الإنتاج ، قم بتشغيل أدناه بناء خيوط الأمر: shop

إذا كنت ترغب في اختبار مدير بناء الإنتاج أو التسوق في البيئة المحلية ، فقم بتشغيل الأوامر التالية.

مسؤل

// build admin لبناء غزل الإنتاج: admin

// قم بتشغيل واجهة برمجة تطبيقات المتجر التي تحتاجها لاختبار الغزل المحلي dev: API-admin

// بدء المشرف في إنتاج الغزل يخدم: المشرف

محل

// بناء متجر لإنتاج بناء الغزل: متجر

// قم بتشغيل واجهة برمجة تطبيقات المتجر التي تحتاجها لاختبار الغزل المحلي dev: api-shop

// بدء متجر في إنتاج الغزل يخدم: المتجر

هيكل المجلد والتخصيص

/ packs / admin: في هذا الجزء ، كل الترميز والوظائف المتعلقة بلوحة تحكم المسؤول.

/ حزم / متجر: جميع وظائف الترميز والوظائف المتعلقة بالمتجر.

/ packs / api: رمز متعلق بواجهة برمجة التطبيقات لكل من قسم المشرف والمتجر.

رموز API المتعلقة بالمسؤول موجودة في مجلد المسؤول.

رموز المتجر ذات الصلة موجودة في مجلد المتجر.

التكوين والنشر

الآن

إذا كنت ترغب في استضافة القالب في now.sh ، فاتبع الأمر أدناه.

API

• انتقل إلى الحزم / API
• الآن قم بتشغيل الأمر أدناه

حاليا

مسؤل

• بعد نشر API ، ستحصل على عنوان URL لنقطة نهاية API. ضع عنوان URL هذا في الحزم / admin / .env

REACT_APP_API_URL = {put_your_api_url_here} / admin / graphql ؛

• انتقل إلى الحزم / المسؤول
• الآن قم بتشغيل الأمر أدناه

حاليا

محل

• بعد نشر API ، ستحصل على عنوان URL لنقطة نهاية API. ضع عنوان URL هذا في ملف

  الحزم / المتجر / next.config.js

البيئة: {STRIPE_PUBLIC_KEY: "put_your_stripe_public_key"،

API_URL: '{put_your_api_url_here.} / shop / graphql'،}،

• انتقل إلى الطرود / المتجر

• الآن قم بتشغيل الأمر أدناه

حاليا

استنتاج

الآن وصلنا إلى نقطة نهاية هذا المقال. نأمل أن يكون لديك فكرة عن نموذج التسوق للتجارة الإلكترونية في PickBazar الذي يتفاعل مع GraphQL. بدون أي تردد ، يمكنك استخدام قالب التسوق هذا لمتجر التجارة الإلكترونية الخاص بك. شكرا جزيلا لقراءة هذا المقال لك. إذا أعجبك هذا المقال حقًا ، فالرجاء ترك تعليق في قسم التعليقات أو منحنا تقييمًا جيدًا. هذا هو كل شيء لهذا اليوم. أتمنى لك يوما سعيدا!

شراء نموذج

قراءة المزيد: 10 Best React Redux Admin Dashboard 2020