كيفية إعداد بيئة تطوير باستخدام Node JS و Docker - Argon Dashboard

الأرجون لوحة القيادة NodeJS - تيم الإبداعية

يعد Time أحد أهم المقاييس عندما يتعلق الأمر بالأعمال والتكنولوجيا ، ونحن ندرك ذلك تمامًا ونلتزم بإنشاء منتجات فعالة. بفضل شراكتنا مع Creative Tim ، أطلقنا حل "frontend + backend" مشفر بالكامل. إنه يضم عددًا كبيرًا من المكونات التي يمكن أن تساعدك في إنشاء مواقع ويب مذهلة وتقدم بنفسها مزايا لا تعد ولا تحصى: طريقة خفيفة الوزن وسريعة وقابلة للتطوير وعصرية لتنفيذ تطبيقك التالي. ولكن دعونا نرى كيف يعمل.

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

  1. NodeJs
  2. بوابة (اختياري ولكن مفيد)
  3. IDE (رمز Visual Studio)
  4. عامل ميناء
  5. الأرجون لوحة القيادة NodeJS

NodeJS

بادئ ذي بدء ، يجب أن يكون لديك NodeJS مثبتًا على جهازك ، وإذا لم تكن بالفعل ، فقم بتثبيت إصدار يساوي 10.x.x أو أعلى من صفحة التنزيل الرسمية.

لأغراض هذا الدليل ، يمكننا استخدام إصدار LTS الموصى به لمعظم المستخدمين.

قم بتنزيل الإصدار الذي يناسب النظام الأساسي الذي تستخدمه

بعد الانتهاء من التثبيت ، تحقق من إصدار NodeJS عن طريق فتح جهازك المفضل (macOS: افتح Spotlight Search باستخدام CMD + Space ، ثم اكتب "Terminal" دون علامات اقتباس مزدوجة ، ويجب أن يكون لديك بين النتائج / Windows: Windows Key + R ثم اكتب cmd ، ثم اضغط على Enter) ، ثم في موجه الأوامر ، اكتب node -v

حصلت v11.1.0 ياي!

ضع في اعتبارك أن NodeJS يأتي أيضًا مع مدير حزم يسمى NPM ، أحد التطبيقات التي سنستخدمها على الطريق كثيرًا جدًا ... هذا أمر رائع! الآن ، لنقم بتثبيت نظام التحكم في الإصدار (VCS) ، وهو نظام يمكن أن يساعدنا أيضًا في استنساخ المشروعات والعمل بطريقة مريحة ، مباشرةً من المحطة.

شخص سخيف

قم بتنزيل الإصدار الذي يناسب النظام الأساسي الذي تستخدمه

ثم مرة أخرى ، تحقق من الإصدار المثبت باستخدام Terminal مع الأمر التالي: git --version

مرئي ستوديو كود

قبل الحصول على لوحة معلومات Argon بالفعل ، سنقوم أيضًا بتثبيت IDE رائع حتى نتمكن من العمل مباشرة من هناك. سنستخدم Visual Studio Code ، لأنه مجاني ومفتوح المصدر ومدهش.

بعد اكتمال التثبيت ، قم ببدء تشغيل IDE وافتح مجلدًا لاستخدامه في العمل. سنستخدم مجلد سطح المكتب لفهم أسهل.

عامل ميناء

Docker هي أداة تسمح لك بتشغيل تطبيقك في حاوية (أو أكثر) أثناء العمل تحت نفس النواة.

ابدأ بإنشاء حساب مجاني على https://hub.docker.com (مجاني تمامًا ، بدون بطاقة ائتمان أو أي شيء آخر مطلوب بالإضافة إلى عنوان البريد الإلكتروني) ، ثم تابع إلى صفحة التنزيل ، واحصل على الإصدار الذي يناسبك وتثبيته .

الآن وقد أصبح لدينا المتطلبات المسبقة ، يجب أن نحصل على لوحة القيادة إما من موقع Creative-Tim الرسمي أو استنساخ المستودع من GitHub مباشرةً.

2. تكوين المشروع

دعنا نستفيد من كل الأشياء التي قمنا بتثبيتها حتى الآن ونبدأ العمل!
بادئ ذي بدء ، قم بتشغيل Visual Studio Code ، ثم انتقل إلى ملف -> فتح -> سطح المكتب لتحديد مجلد العمل الأولي ، ثم فتح المحطة الطرفية داخل IDE ، حتى نتمكن من البقاء داخلها بأمان وعدم وضع علامة تبويب على العديد من التطبيقات: عرض - > المحطة الطرفية وفي الجزء السفلي من الشاشة ، اكتب mkdir Projects من أجل إنشاء مجلد باسم المشاريع ، ثم الوصول إليه عبر المحطة الطرفية باستخدام الأمر cd Projects.

يجب أن تحصل على شيء مثل هذا

سوف نستخدم Argon Dashboard NodeJS ، تحقق من المعاينة المباشرة هنا

للاستفادة من GIT ، بعد أن أصبحنا في مجلد المشاريع ، اكتب الأمر التالي:

بوابة استنساخ https://github.com/creativetimofficial/argon-dashboard-nodejs.git

سيؤدي ذلك إلى استنساخ (تنزيل) أرشيف Argon Dashboard وفك ضغطه في مجلد باسم argon-dashboard-nodejs والذي سيصبح مجلد المشروع أو يسمى أيضًا Project Root Directory

ينبغي أن تبدو محطة الخاص بك الآن مثل هذا ، النجاح الكبير

ثم استخدم المحطة الطرفية داخل Visual Studio Code وتصفح في المجلد الذي ظهر للتو داخل Projects ، cd argon-dashboard-nodejs
بمجرد الوصول إلى دليل لوحة معلومات الأرجون ، فقد حان الوقت لتثبيت التبعيات المطلوبة اللازمة لتشغيل لوحة المعلومات. لذلك سنستخدم NPM: npm install

قد يبدو أن بعض التبعيات عفا عليها الزمن و / أو يلقي بضعة تحذيرات ، لا شيء يخشاه!

حتى الان جيدة جدا! الآن ، نظرًا لأن Argon Dashboard مُحسَّنة للعمل على حاويات Docker ، يجب علينا بدء Docker. ما لم تكن قد حددت بعض التفضيلات الإضافية ، فيجب أن تكون قيد التشغيل بالفعل. نظرًا لأنه يستخدم المحاكاة الافتراضية لإنشاء الحاويات ، فسيحتفظ Docker افتراضيًا ببعض التخزين. بشكل افتراضي ، يعد Argon Dashboard تطبيقًا بسيطًا للغاية ، لذا لا يحتاج إلى مساحة كبيرة لذلك أود أن أنصح بتغيير القيمة الافتراضية ، في حال كنت تواجه صعوبة في التخزين المتاح:

عامل الميناء -> تفضيلات -> القرص

إذا كان لديك بالفعل بعض الحاويات التي تم إنشاؤها ، فكن على دراية بأنه سيتم إزالتها عند تطبيق التغييرات!

هذه تجربة رائعة حتى الآن!

الآن دعنا نعود إلى Visual Studio Code وفي المحطة الطرفية التي كان من المفترض أن تكون قد فتحتها بالفعل (في دليل argon-dashboard-nodejs) واكتب docker-compose up -d

استنادًا إلى ملف docker-compose.yml الموجود في جذر المشروع ، سيقوم Docker بسحب صور PostgreSQL و Haproxy و REDIS من Docker-hub

بعد تنزيل جميع الصور ، يجب أن تبدأ الحاويات تلقائيًا. يمكن التحقق من ذلك بسهولة باستخدام أمر docker ps -a الذي يسرد جميع الحاويات التي تم إنشاؤها:

الآن وبعد أن أصبحت الحاويات جاهزة للعمل ، فإن الأمر التالي هو تشغيل عمليات ترحيل قاعدة البيانات ، من أجل إنشاء جميع الجداول والأعمدة المطلوبة.

من أجل القيام بذلك ، في المحطة سنستخدم NPM لتشغيل الأمر التالي: npm run knex migrate: latest

يمكننا أيضًا تشغيل البرنامج النصي الأساسي ، الذي سيخلق مستخدمًا محددًا مسبقًا (موجود في db -> seed -> create-deafult-user.js) وإضافته إلى قاعدة البيانات: npm run knex seed: run

3. تشغيل التطبيق

يجب تكوين كل شيء بشكل صحيح الآن ، نحتاج فقط إلى بدء التطبيق واستكشافه باستخدام npm run dev الذي سيبدأ عملية pm2 التي تدير التطبيق ، مع فتح علامة تبويب / نافذة متصفح جديدة مع لوحة القيادة:

كل شيء يتم! يمكنك الآن البدء في العبث بالأشياء الموجودة والإبداع! تسجيل الدخول مع المستخدم الافتراضي admin@argon.com / سر والمتعة!

توثيق

  1. العقدة
  2. عامل ميناء
  3. PM2
  4. الآلية الوقائية الوطنية
  5. شخص سخيف
  6. Knex
  7. الأرجون لوحة القيادة

نصائح وخدع

تأكد من أنك في الدليل الصحيح! في بعض الأحيان قد تجد نفسك تحاول تشغيل أوامر معينة خارج نطاق دليل العمل! أحد الأمثلة الجيدة هو أوامر عامل ميناء:

docker ps -a هو أمر docker عالمي يمكن تشغيله خارج دليل العمل ، وسيدرج كل الحاويات.

do-doer-compose up -d هو أمر يقوم بإنشاء (إعادة) إنشاء الحاويات وإيصالها وإرفاقها بها في حالة تشغيل خدمة ما إذا كان الأمر يعمل من دليل يحتوي على ملف docker-compose.yml ، في حالتنا هو العمل دليل الأرجون - لوحة القيادة - nodejs

تم إنشاء البرنامج التعليمي بالاعتماد على جهاز macOS ، ولكن من المؤكد أنه يجب أن يعمل على أجهزة Windows أيضًا. إذا فاتني شيء ، اسمحوا لي أن أعرف!

شكرا للقراءة!

إذا كان لديك ملاحظات أو اقتراحات ، يمكنك أن تجد لي هنا:
* الموقع الرسمي: https://udevoffice.com/
* مدونتنا: https://medium.com/udevoffice
* البريد الإلكتروني: hello@udevoffice.com
* LinkedIn: https://www.linkedin.com/company/udevoffice/
* Facebook: https://www.facebook.com/udevoffice
* تويتر: https://twitter.com/udevoffice

Stanciu Florin Alexandru - QA Specialist @ Under Development Office