node.ucp

node.ucp

هذا هو لوحة تحكم javaScript متماثلة كاملة المكتوبة فوق NodeJs و React. الغرض من لوحة التحكم هذه هو أن تكون بمثابة مثال أو رمز غلاية للآخرين لأنها مُعدة بالكامل ومرنة للغاية. لقد كتبت الرمز ليكون قابلاً للتكيف بسهولة مع حالات الاستخدام وأنواع وقواعد البيانات المختلفة.

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

يستخدم الكود وظائف سهم ES6 ووعدها بشكل كبير ، لذلك تعرف على هذه المفاهيم إذا لم تكن بالفعل!

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

العرض التوضيحي

معلومات تسجيل الدخول:

اسم المستخدم: جوناس

كلمة المرور: اختبار

انقر هنا للحصول على العرض التوضيحي.

انقر هنا للحصول على الصور داخل الحالة لا يعمل العرض التوضيحي.

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

• Nodejs v6.11.3 أو أحدث
• الإصدار MySQL 5.6.5 أو لاحقًا إذا كنت ترغب في استخدام نموذج قاعدة بيانات العينة.
• إذا كنت تستخدم Linux ، فأنت بحاجة إلى تثبيت Node-GYP. تثبيته باستخدام الأمر التالي:

sudo npm install -g node-gyp

• إذا كنت تستخدم Windows ، فأنت بحاجة إلى تثبيت Windows Build Tools أيضًا لتجميع وبناء بعض العوامل. تثبيته باستخدام الأمر التالي:

npm install --global --production windows-build-tools

التثبيت

1. انتقل إلى مجلد فارغ حيث تريد وضع رمز المصدر.
2. استنساخ المستودع باستخدام الأمر التالي:

git clone https://github.com/zeus2198/node.ucp 

أو

قم بتنزيل المستودع يدويًا من Clone or Download ​​التنزيل الموجود في الجزء العلوي الأيمن من المستودع واستخراج المحتوى في مجلد فارغ. 3. تأكد من وجودك في الجذر للمشروع واكتب الأمر التالي لتثبيت الحزم التي يحتاجها التطبيق:

npm install

قد يستغرق تثبيت الحزم بعض الوقت. 5. استيراد قاعدة بيانات العينة ( ./sample-database.sql ) في خادم MySQL الخاص بك. 4. فتح ./config/config.json

بدء التطبيق

وضع المطور:

لبدء التطبيق في وضع المطور استخدم الأمر التالي:

npm run start-dev

في وضع المطور ، تحدث الأشياء التالية:

• يقوم التطبيق تلقائيًا بإعادة تشغيل كلما كان هناك تغيير في أي ملف داخل مجلد ./src .
• يتم تجميع الجزء المشترك لخادم العميل من التطبيق تلقائيًا في بدء التطبيق.
• يستخدم التطبيق global.css بدلاً من global.min.css الذي لا يتم تخزينه مؤقتًا بشكل افتراضي. لاحظ أنه إذا قررت استخدام nginx لتقديم ملف ثابت (كما هو موضح لاحقًا) ، فقد يقوم بتخزين ملفات .css اعتمادًا على تكوين NGINX.
• يتم إجراء عملية تخزين ذاكرة التخزين المؤقت التلقائي لملف الحزمة في إعادة تشغيل التطبيق. يتم اكتشاف هذا الخداع ذاكرة التخزين المؤقت من قبل عامل الخدمة ( ./public/js/sw.js ) ثم يتم استبدال ملف الحزمة في ذاكرة التخزين المؤقت لدينا!

وضع الإنتاج:

قبل بدء التطبيق في وضع الإنتاج ، تحتاج إلى تجميع جزء مشترك لخادم العميل من التطبيق أسفل ملف واحد بحيث يمكن تقديمه إلى العميل ، للقيام بذلك باستخدام الأمر التالي:

npm run make

لاحظ أن الأمر أعلاه سيؤدي أيضًا إلى تحديد محتوى الملف ./public/css/global.css ./public/css/global.min.css .

بعد الانتهاء من التجميع ، استخدم الأمر التالي لبدء التطبيق:

npm start

في وضع الإنتاج ، تحدث الأشياء التالية:

• يستخدم التطبيق global.min.css وليس global.css وهو مورد مخزّن.
• سيظل خرق Cache for packdle يتم إجراؤه ولكن فقط بالنسبة لملف الحزمة الذي تم إنشاؤه باستخدام الأمر npm run make .
• يتم تمكين وضع إنتاج Express (API الخاص بنا على الويب المستخدم في التطبيق).

العمل الفني

يمكنك العثور على ملفات Photoshop للعمل الفني المستخدم في هذا المشروع من هنا

ملحوظات

• يحتوي دليل ./src/shared/ على الرمز الشائع في جزء العميل والخادم ، لذا تأكد من أنك لا تعرض أي معلومات حساسة في هذا القسم.
• يستخدم التطبيق عمال الخدمة الذين يعملون فقط على مجالات LocalHost و HTTPS الممكّنة ، لذا تأكد من أنك تستخدم بروتوكول HTTPS مع مجالك.
• لا يتم تقديم الطرق المحمية على جانب الخادم.
• لمسح ذاكرة التخزين المؤقت ، افتح ./public/js/sw.js وقم بتحرير سلسلة الإصدار. ثم أغلق كل علامة تبويب التطبيق المفتوحة في المتصفح وفتح التطبيق مرة أخرى. استخدم هذا لمسح global.min.css من ذاكرة التخزين المؤقت عند تحرير ملف global.css .
• الحصول على شهادة SSL المجانية واستخدام NGINX لعكس الوكيل المجال لتطبيقك.

باستخدام قواعد البيانات المختلفة

يحتوي ملف ./src/db/db.api.abstract.js ثم طلب هذا الملف في طبقة API لقاعدة البيانات المخصصة وتجاوز الأساليب التجريدية. انظر ./src/db/mysql.api.js للحصول على مثال التنفيذ. لاحظ أن كل طريقة يجب أن تعيد الوعد.

بعد الانتهاء من كتابة واجهة برمجة التطبيقات الخاصة بك ، توجه إلى ./config/config.json وتحرير خيار databaseAPI لمطابقة اسم الملف الذي يحتوي على طبقة API DB. يجب وضع الملف في ./src/db/ دليل.

تقديم الملفات الثابتة باستخدام nginx

أوصي باستخدام NGINX لخدمة الملفات الثابتة بدلاً من nodejs. للقيام بذلك ، يمكنك إضافة كتلة الموقع التالية إلى تكوين كتلة Sever:

 location /public {
	alias  /path/to/your/app/public;
}

إذا قررت الذهاب مع NGINX لتقديم الملفات الثابتة ، فقد ترغب في تحويل ضغط GZIP لتطبيقك إلى NGINX أيضًا. إذا قمت بذلك ، وهو ما يجب عليك ، ثم تعطيل الضغط على جانب التطبيق من خلال التعليق على السطرين التاليين من ملف ./node.ucp.js :

 //./node.ucp.js
// comment out the following lines if you use nginx for gzip compression
import compression from 'compression' ;

app . use ( compression ( ) ) ;

استخدام مدير العملية للتأكد من تشغيل التطبيق إلى الأبد في وضع الإنتاج

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

npm install pm2 -g

الآن قبل استخدام PM2 لبدء تطبيقك في وضع الإنتاج ، تأكد من أن التطبيق يبدأ فعليًا ويقوم بتشغيل تطبيقك في البداية في البداية وإعادة تشغيل الحلقة.

لقد قمت بالفعل بإنشاء ملف تكوين لـ PM2 لبدء التطبيق ، لبدء التطبيق في وضع الإنتاج بنوع PM2:

pm2 start node.ucp.pm2.json