تطبيق التجارة الإلكترونية مفتوح المكدس الكامل المصدر المصنوع من MongoDB و Express و React Native و Nodejs
- التكوين والإعداد
- الميزات الرئيسية
- التقنيات المستخدمة
- الواجهة الأمامية (الهاتف المحمول)
- الخلفية
- قاعدة البيانات
- ؟ النماذج
- ؟ مشروع الفيديو
- مؤلف
- رخصة
التكوين والإعداد
من أجل تشغيل هذا المشروع محليًا ، ببساطة شوكة واستنساخ المستودع أو التنزيل على أنه zip و unsip على جهازك.
- افتح المشروع في محرر الرمز المفضل لديك.
- انتقل إلى Terminal -> محطة جديدة (إذا كنت تستخدم VS Code)
- تحتاج أولاً إلى تشغيل خادم NGROK. لا ينبغي إيقاف هذا الخادم لعمل المشروع
- ثم افتح محطة مختلفة. تقسيم المحطة الخاصة بك إلى نصفين (قم بتشغيل الخادم في محطة واحدة وعميل في الآخر)
Ngrok هو برنامج يسمح لنا بفتح تطبيقاتنا التي نديرها على جهاز الكمبيوتر المحلي على جهاز الكمبيوتر الخاص بنا ، عبر السحابة ، تحت المجال الفرعي xxx.ngrok.io. إعداد ngrok.
1- لفضح الخادم باستخدام NGROK ؛
- ثم انسخ عنوان URL NGROK على الخادم الذي يجري تشغيله
- عميل الأقراص المضغوطة واللصق ngrok_url في .env تحت ./client
- الآن يتم ضمان الاتصال مع العميل
NGROK_URL = "http://_______.ngrok.io"
2- في محطة مختلفة ؛
في النصف الأول من المحطة
$ cd Client
$ npm install (to install client-side dependencies)
$ expo r -c
في النصف الثاني من المحطة
- خادم الأقراص المضغوطة وضبط متغيرات البيئة في config.env تحت ./config/env
- قم بإنشاء عنوان URL لاتصال MongoDB الخاص بك ، والذي ستستخدمه كـ Mongo_uri
- توفير بيانات الاعتماد التالية
# --- Config.env ---
NODE_ENV = development
PORT =5000
MONGO_URI =
JWT_SECRET_KEY =
# --- Terminal ---
$ npm install (to install server-side dependencies)
$ npm start (to start the server)
الميزات الرئيسية
- ✔ تسجيل المستخدم وتسجيل الدخول
- ✔ المصادقة باستخدام الرموز JWT
- ✔ المفضل ، التعليق وإضافة منتجات إلى عربة
- ✔ حدد المنتجات وفقًا لمعلومات اللون والحجم وأضفها إلى العربة
- ✔ إظهار أحدث المنتجات التي بحثت عنها وتوصيات المنتج المماثلة
- ✔ صفحة فئات المنتجات وعرض الفئات الفرعية
- ✔ ابحث عن المنتجات بالاسم والعلامة التجارية والفئة
- ✔ زيادة أو تقليل أو حذف كمية كل عنصر في العربة
- ✔ تلقي الطلبات عن طريق اختيار عنوان التسليم والبطاقة المصرفية
- ✔ صفحة التفاصيل توضح جميع الطلبات الموضوعة وأحدث حالة المنتجات (وقت الشحن ، تاريخ التسليم) لكل طلب
- ✔ البريد الإلكتروني وكلمة المرور تغيير الصفحات
- ✔ تم إيلاء الاهتمام لمعالجة الأخطاء
- نسيت صفحة كلمة المرور وكلمة المرور إعادة تعيين
- إضافة صور إلى التعليقات
- تسجيل الدخول بحساب Google
- إنشاء صفحة مخصصة لكل علامة تجارية
- إضافة نظام الدفع (شريط)
- تتم معالجة الطلبات في بعض الأحيان ببطء وتتسبب في مشاكل عند إطلاقها في نفس الوقت (هل يمكن أن تكون بنية الخدمات المجهرية هي الحل؟)
التقنيات المستخدمة
تم إنشاء هذا المشروع باستخدام التقنيات التالية.
الواجهة الأمامية (الهاتف المحمول)
- React JS - JavaScript Library التي يتم استخدامها لبناء واجهات المستخدم خصيصًا للتطبيقات ذات الصفحة الواحدة
- ردود الفعل - لإدارة وتركيز حالة التطبيق
- React Native - إطار تطوير تطبيقات الهاتف المحمول عبر المنصات
- React Mavigation V6 - التوجيه والتنقل للمعرض وتفاعل التطبيقات الأصلية
- Axios - لإجراء مكالمات API
- React-Native-Bouncy-Checkbox
7.2.1 - React-Native-Element-Textinput
2.2.0 - React-Native-Gesture-Bottom-Sheet
1.1.0 - React-Native-Indicators
0.17.0 - React-Modal
13.0.1 - React-Popup-Menu
0.16.1 - React-Progress
5.0.0 - تصنيفات React-Itive
8.1.0 - React-Native-Safe-Area-Context
4.4.1 - رد الفعل-البسطرة-dialogs
1.5.0 - React-Step-Step-Indicator
1.0.3 - رد الفعل--ميساج
2.1.6 - React-Textarea-Autosize
2.1.6
الخلفية
- العقدة JS - بيئة وقت التشغيل للمساعدة في بناء تطبيقات خادم سريعة باستخدام JS
- Express JS -الخادم للتعامل مع طلبات HTTP وتوجيهها
- Mongoose - للنمذجة ورسم خرائط بيانات MongoDB إلى JavaScript
- Express-Async-Confler-برامج وسيطة بسيطة للتعامل مع الاستثناءات داخل طرق Async Express ونقلها إلى معالجات الأخطاء السريعة الخاصة بك
- jsonwebtoken - للمصادقة
- bcryptjs - لتشفير البيانات
- DOTENV - وحدة التبعية صفر التي تقوم بتحميل متغيرات البيئة
- Multer - Node.js الوسيطة لتحميل الملفات
- CORS - يوفر توصيل/صريح من البرامج الوسيطة
- uuid - لمولد هوية عشوائي
قاعدة البيانات
- MongoDB - يوفر خدمة سحابية مجانية لتخزين مجموعات MongoDB.
النماذج
مؤلف
جيثب: @muhammet-yildiz
LinkedIn: @muhammet-yildiz
البريد الإلكتروني: [email protected]
إذا كنت تحب المشروع ، فلا تنسى إعطاء النجوم
رخصة
Copyright 2023 Muhammet Yıldız
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
https://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
مشروع الفيديو
Hizlisepet.mp4
