الصفحة الرئيسية>موارد بناء الموقع>بيانات الموقع
تنزيل

تطبيق الدردشة

إنه تطبيق ويب للدردشة العادي مثل أي تطبيق آخر. استجابة تماما ، أول mobile aproach. بناء مع مكدس mern. تستضيف مع NetLify.



لقطة شاشة تطبيق الدردشة

ابدأ

يمكنك رؤية هذا المشروع على الهواء مباشرة هنا.


بناء مع

كانت هذه هي التقنيات الرئيسية المستخدمة في هذا المشروع.

  • قاعدة بيانات مستندات MongoDB - NOSQL
  • ExpressJS - NodeJS Framework لتطبيقات الويب والهاتف المحمول
  • React - مكتبة JavaScript لبناء واجهات المستخدم
  • Redux - حاوية حالة يمكن التنبؤ بها لتطبيقات JS
  • Nodejs - محرك وقت تشغيل JavaScript مبني على محرك JavaScript من Chrome في Chrome A الذي يعمل على تشغيل JavaScript خارج متصفح الويب

بعض التقنيات الأخرى هي ،

  • ساس - لغة البرمجة النصية المسبقة لـ CSS
  • React-Bootstrap-الإطار الأمامي الأكثر شعبية لمكونات واجهة المستخدم
  • Bootstrap - الإطار الأمامي الأكثر شعبية
  • Pusher - تشغيل التجارب في الوقت الفعلي للجوال والويب
  • JWT - JSON WEB Tokens هي طريقة مفتوحة ومؤسسة RFC 7519 لتمثيل المطالبات بشكل آمن بين طرفين
  • Mongoose-Mongoose يوفر حلًا مستقيمًا قائمًا على المخطط لنمذجة بيانات التطبيق الخاصة بك
  • Multer - حزمة لملفات Handeling من بيانات النموذج
  • PUG - قالب قالب لتقديم جانب الخادم.

الإعداد المحلي

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

هيكل المجلد للمشروع

المتطلبات الأساسية

تثبيت العقدة ، NPM و GIT.


إعداد الخادم 

 git clone https://github.com/ramankarki/chat-app-api.git

cd chat-app-api

npm install nodemon -g

npm install

قم بإنشاء ملف config.env في الجذر وأضف بعض متغيرات ENV. 

 NODE_ENV=development
DB_STRING=your mongodb database string

// I have used sendgrid to send emails,
// create a sendgrid account and after your setup is done add your credentials here

SENDGRID_USERNAME=your sendgrid username
SENDGRID_PW=your sendgrid password
EMAIL_FROM=email from which you are sending mails.

JWT_SECRET=any random string you want (preferred min 32 strings)
JWT_EXPIRES_IN=expiry date for your jwt tokens
JWT_COOKIE_EXPIRES_IN=expiry date for your cookies

// I have used pusher to make this app real time
// create a pusher account and after your setup is done add your credentials here

PUSHER_APP_ID=your pusher app id
PUSHER_KEY=your pusher app key
PUSHER_SECRET_KEY=your pusher secret key
PUSHER_CLUSTER=your pusher app cluster

أنت الآن قد انتهيت ويمكنك بدء خادم التطوير الخاص بك 

 npm run dev

إعداد العميل 


git clone https://github.com/ramankarki/chat-app-client.git

cd chat-app-client

npm install

قم بإنشاء ملف .env في الجذر وأضف متغير ENV ، لأنني استخدمت Sass. 

 SASS_PATH=node_modules:src/*

قم بإنشاء مجلد Config Inside /SRC وإنشاء ملف dev.js داخل مجلد التكوين لإضافة بعض المفاتيح السرية. 

 module.exports = {
  PUSHER_KEY: "YOUR PUSHER KEY FOR CLIENT SIDE",
  PUSHER_CLUSTER: "YOUR PUSHER CLUTER",
};

أنت الآن قد انتهيت من جانب العميل أيضًا ويمكنك بدء خادم تطوير React الخاص بك 

 npm run dev

الآن يجب أن تفتح الصفحة الرئيسية لتطبيق الدردشة هذا على متصفحك الافتراضي

الصفحة الرئيسية لتطبيق الدردشة
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل