مكتبة مكونات واجهة المستخدم لـ Elasticsearch وOpenSearch وSolr وMongoDB: متاحة لـ React وVue
اقرأ كيفية إنشاء واجهة مستخدم للبحث في التجارة الإلكترونية
أ) مع React، أو ب) مع Vue
تحقق من Searchbox إذا كنت تقوم بإنشاء واجهات مستخدم بحث لأطر عمل JS أخرى، أو React Native أو Flutter.
تحقق من سوق ReactiveSearch على reactiveapps.io.
قوالب مصمم الويب للرسم.
قوالب مصمم iOS وAndroid للرسم.
ReactiveSearch هي مكتبة مكونات واجهة المستخدم لـ React وVue، وهي مصممة للعمل مع سحابة ReactiveSearch. يحتوي على أكثر من 20 مكونًا لواجهة المستخدم تتكون من القوائم والنطاقات وواجهات مستخدم البحث وشاشات عرض النتائج وإجابة الذكاء الاصطناعي والمخططات وطريقة لجلب مكون واجهة المستخدم الحالي إلى المكتبة.
يمكن استخدام مكون واجهة المستخدم للتصفية أو البحث في الفهرس. على سبيل المثال:
SingleList مرشح المطابقة التامة استنادًا إلى العنصر المحدد.RangeSlider استعلام نطاق رقمي بناءً على القيم المحددة من واجهة المستخدم.SearchBox بتطبيق الاقتراحات واستعلام البحث بناءً على مصطلح البحث الذي كتبه المستخدم. يمكن استخدام مكونات واجهة المستخدم معًا (تسمح خاصية react بتكوين ذلك على مستوى كل مكون) وعرض النتائج المطابقة عبر مكون واجهة مستخدم لعرض النتائج.
يدعم ReactiveSearch مكونات العرض المضمنة التالية لعرض النتائج (المعروفة أيضًا باسم النتائج):
react بإنشاء واجهات مستخدم معقدة حيث يمكن تحديث عدد من مكونات واجهة المستخدم بشكل تفاعلي بناءً على تفاعل المستخدم.className`` and innerClass`.ThemeProvider .عند بدء تشغيل ReactiveSearch v4 (الإصدار الرئيسي الحالي)، ترسل المكتبة غرض البحث فقط، والمواصفات الخاصة بذلك موجودة هنا - مرجع ReactiveSearch API. استنادًا إلى اختيار محرك البحث الذي قمت بتكوينه في سحابة ReactiveSearch، يتم بعد ذلك إنشاء استعلام البحث DSL بواسطة سحابة ReactiveSearch. يعد هذا الأسلوب أكثر أمانًا كما يسمح بنقل منطق أعمال البحث من جانب الخادم.
إذا كنت تستخدم ReactiveSearch v3 (آخر إصدار رئيسي)، فإن استخدام ReactiveSearch API عبر DSL لاستعلام ElasticSearch يعد ميزة اختيارية. تحتاج إلى تعيين الخاصية enableAppbase على أنها true في مكون ReactiveBase الخاص بك. يفترض هذا أنك تستخدم appbase.io للواجهة الخلفية لديك.
نوصي بمراجعة تطبيق KitchenSink هذا الذي يوضح استخدام ReactiveSearch API لجميع مكونات ReactiveSearch.
⬆ العودة إلى الأعلى
جرب قصص الملعب ذات المكونات الحية في الملعب. ابحث عن قسم المقابض في جزء الملعب من القصص لتعديل كل دعامة ورؤية التأثيرات.
مجموعة من العروض التوضيحية المباشرة المستوحاة من تطبيقات العالم الحقيقي، والتي تم إنشاؤها باستخدام ReactiveSearch.
يمكنك التحقق منها جميعًا في قسم الأمثلة بالموقع.
⬆ العودة إلى الأعلى
نشارك هنا كيفية مقارنة ReactiveSearch بالمشاريع الأخرى التي لها أهداف مماثلة.
| # | البحث التفاعلي | SearchKit | البحث الفوري |
|---|---|---|---|
| الخلفية | Elasticsearch، OpenSearch، Solr، MongoDB، OpenAI | أي فهرس Elasticsearch مستضاف على أي مجموعة Elasticsearch. | تم تصميمه خصيصًا لـ Algolia، وهو محرك بحث خاص. |
| تطوير | تم تطويرها وصيانتها بنشاط. | استجابات المشكلات النشطة، وبعض التطوير والصيانة. | تم تطويرها وصيانتها بنشاط. |
| تجربة الإعداد | تطبيقات المبتدئين، البرنامج التعليمي التفاعلي المباشر، دليل البدء، ساحة لعب المكونات، كل مكون لديه عرض توضيحي مباشر للعمل مع codesandbox. | البرنامج التعليمي للبدء، لا توجد عروض توضيحية مباشرة للمكونات، ومواصفات مرجعية متفرقة للعديد من المكونات. | تطبيقات المبتدئين ودليل البدء وملعب المكونات. |
| دعم التصميم | مكونات على غرار ونطاقها. لا يلزم استيراد CSS خارجي. السمات الغنية مدعومة كدعائم React. | الأنماط المستندة إلى CSS مع BEM، غير مخصصة للمكونات. السمات مدعومة بـ SCSS. | تتطلب الأنماط المستندة إلى CSS استيراد النمط الخارجي. Theming مدعومة بالتلاعب بـ CSS. |
| أنواع المكونات | القوائم، النطاقات، البحث، التواريخ، الخرائط، عرض النتائج. يمكن استخدام مكونات واجهة المستخدم الخاصة بك. | القوائم، النطاقات، البحث*، النتيجة*. لا يمكن استخدام مكونات واجهة المستخدم الخاصة بك. (مكون واحد فقط للبحث والنتيجة، مما يؤدي إلى كتابة المزيد من التعليمات البرمجية للتخصيص) | القوائم، النطاق، البحث، النتيجة. يمكن استخدام مكونات واجهة المستخدم الخاصة بك. |
| منصات التوزيع المدعومة | React وVue للويب وReact Native للجوال. | رد فعل للويب. | React، Vue، Angular، Vanilla JS للويب، React Native للجوال ولكن الأخير لا يحتوي على مكونات واجهة المستخدم. |
نحن نرحب بالمساهمات في هذا القسم. إذا كنت تقوم ببناء مشروع أو تعرف مشروعًا آخر في نفس المساحة، فأخبرنا وسنقوم بتحديث المقارنات.
⬆ العودة إلى الأعلى
يعد تثبيت ReactiveSearch مجرد أمر واحد.
npm install @ appbaseio / reactivesearchيمكنك الاطلاع على دليل البدء السريع باستخدام React هنا.
npm install @ appbaseio / reactivesearch - vueيمكنك الاطلاع على دليل البدء السريع باستخدام Vue هنا.
المستندات الرسمية لمكتبة React موجودة على docs.reactivesearch.io/docs/reactivesearch/react.
وتنقسم المكونات إلى أربعة أقسام:
تتوفر المستندات الخاصة بإصدار Vue للمكتبة على docs.reactivesearch.io/docs/reactivesearch/vue.
⬆ العودة إلى الأعلى
يرجى مراجعة دليل المساهمة.
بوابة واجهة برمجة تطبيقات ReactiveSearch لـ ElasticSearch وOpenSearch وSolr وMongoDB وOpenAI (الأمان الجاهز وميزات حدود المعدل وتحليلات السجلات وسجلات الطلبات).
Searchbox مكتبات واجهة مستخدم لمربع بحث خفيفة الوزن وتركز على الأداء للاستعلام عن النتائج وعرضها باستخدام ReactiveSearch Cloud.
dejavu Elasticsearch / عارض ومحرر بيانات OpenSearch
appbase-js عندما تحتاج إلى فهرسة البيانات بالإضافة إلى مكونات واجهة المستخدم
⬆ العودة إلى الأعلى
