المحتوى عن 'node.js'.



مزيد من الخيارات

  • ابحث بالكلمات المفتاحية

    أضف وسومًا وافصل بينها بفواصل ","
  • ابحث باسم الكاتب

نوع المُحتوى


التصنيفات

  • التخطيط وسير العمل
  • التمويل
  • فريق العمل
  • دراسة حالات
  • نصائح وإرشادات
  • التعامل مع العملاء
  • التعهيد الخارجي
  • مقالات عامة
  • التجارة الإلكترونية

التصنيفات

  • PHP
    • Laravel
    • ووردبريس
  • جافاسكريبت
    • Node.js
    • jQuery
    • AngularJS
    • Cordova
  • HTML5
  • CSS
    • Sass
    • إطار عمل Bootstrap
  • SQL
  • سي شارب #C
    • منصة Xamarin
  • بايثون
    • Flask
    • Django
  • لغة روبي
    • إطار العمل Ruby on Rails
  • لغة Go
  • لغة جافا
  • لغة Kotlin
  • برمجة أندرويد
  • لغة Swift
  • لغة R
  • سير العمل
    • Git
  • صناعة الألعاب
    • Unity3D
  • مقالات عامّة

التصنيفات

  • تجربة المستخدم
  • الرسوميات
    • إنكسكيب
    • أدوبي إليستريتور
    • كوريل درو
  • التصميم الجرافيكي
    • أدوبي فوتوشوب
    • أدوبي إن ديزاين
    • جيمب
  • التصميم ثلاثي الأبعاد
    • 3Ds Max
    • Blender
  • مقالات عامّة

التصنيفات

  • خواديم
    • الويب HTTP
    • قواعد البيانات
    • البريد الإلكتروني
    • DNS
    • Samba
  • الحوسبة السّحابية
    • Docker
  • إدارة الإعدادات والنّشر
    • Chef
    • Puppet
    • Ansible
  • لينكس
  • FreeBSD
  • حماية
    • الجدران النارية
    • VPN
    • SSH
  • مقالات عامة

التصنيفات

  • التسويق بالأداء
    • أدوات تحليل الزوار
  • تهيئة محركات البحث SEO
  • الشبكات الاجتماعية
  • التسويق بالبريد الالكتروني
  • التسويق الضمني
  • استسراع النمو
  • المبيعات

التصنيفات

  • إدارة مالية
  • الإنتاجية
  • تجارب
  • مشاريع جانبية
  • التعامل مع العملاء
  • الحفاظ على الصحة
  • التسويق الذاتي
  • مقالات عامة

التصنيفات

  • الإنتاجية وسير العمل
    • مايكروسوفت أوفيس
    • ليبر أوفيس
    • جوجل درايف
    • شيربوينت
    • Evernote
    • Trello
  • تطبيقات الويب
    • ووردبريس
    • ماجنتو
  • أندرويد
  • iOS
  • macOS
  • ويندوز

التصنيفات

  • شهادات سيسكو
    • CCNA
  • شهادات مايكروسوفت
  • شهادات Amazon Web Services
  • شهادات ريدهات
    • RHCSA
  • شهادات CompTIA
  • مقالات عامة

أسئلة وأجوبة

  • الأقسام
    • أسئلة ريادة الأعمال
    • أسئلة العمل الحر
    • أسئلة التسويق والمبيعات
    • أسئلة البرمجة
    • أسئلة التصميم
    • أسئلة DevOps
    • أسئلة البرامج والتطبيقات
    • أسئلة الشهادات المتخصصة

التصنيفات

  • ريادة الأعمال
  • العمل الحر
  • التسويق والمبيعات
  • البرمجة
  • التصميم
  • DevOps

تمّ العثور على 5 نتائج

  1. التخزين الكائني Object storage هي وسيلة شائعة لتخزين ومعالجة الأصول الثابتة مثل الصوت والصور والنصوص وملفات PDF، وأنواع أخرى من البيانات غير المُهيكلة. مقدمو الخدمات السحابية يعرضون خدمات التخزين الكائني بالإضافة إلى التخزين المحلي أو التخزين الكُتلي Block storage، والذي يُستخدم لتخزين ملفات التطبيقات الديناميكية وقواعد البيانات. يمكنك مطالعة المقال مقارنة بين خدمات التخزين الكائني والتخزين الكتلي لمعرفة حالات الاستخدام والاختلافات بين المقاربتين. Spaces هي خدمة تخزين كائني تقدمها DigitalOcean. فبالإضافة إلى إمكانية تسجيل الدخول ورفع وإدارة وحذف الملفات المخزنة بواسطة لوحة التحكم، يمكنك أيضًا الوصول إلى مساحة تخزين DigitalOcean عبر سطر الأوامر وعبر الواجهة البرمجية Spaces API. في هذا الدرس، سوف نُنشئ تطبيق Node.js يسمح للمستخدمين برفع الملفات إلى مساحة التخزين في DigitalOcean عن طريق ملء استمارة في الواجهة الأمامية من الموقع. المتطلبات الأساسية لمتابعة هذا الدرس، سوف تحتاج: مساحة تخزين في DigitalOcean، إضافة إلى مفتاح وصول access keyومفتاح وصول سرّي لحسابك. يمكنك مطالعة الدليل How To Create a DigitalOcean Space and API Keyلإعداد حساب على DigitalOcean، وإنشاء مساحة التخزين خاصتك وإنشاء مفتاح API ورمز سري. تحتاج كذلك إلى تثبيت Node.js و npmعلى جهازك. يمكنك الذهاب إلى الموقع الرسمي لـ Node.js لتثبيت الإصدار المناسب لنظام التشغيل الخاص بك. يجب أن يكون لديك الآن حساب DigitalOcean ومساحة تخزين مع مفتاح الوصول access key إضافة إلى Node.js وnpm مُثبتين على جهازك. إضافة مفاتيح الوصول إلى ملف الاعتماد Credentials File مساحات التخزين في DigitalOcean متوافقة مع الواجهة البرمجية API لـ Amazon Simple Storage Service (S3) ، سنستخدم الخدمة SDK AWS الخاصة بجافاسكريبت في Node.js لربط الاتصال بمساحة التخزين التي أنشأناها. الخطوة الأولى هي إنشاء ملف الاعتماد credentials file، لوضع مفتاح الوصول access key ومفتاح الوصول السري secret access keyالذي حصلت عليه عند إنشاء مساحة التخزين الخاصة بك في DigitalOcean. سيتم وضع الملف في aws/credentials./~ على الماك و اللينكس، أو في C:\Users\USERNAME\.aws\credentials على ويندوز. افتح مُوجه الأوامر command prompt، تأكد من أنك في مجلد المستخدمين Users directory الخاص بك، وأنك تملك صلاحيات استخدام sudo، ثم قم بإنشاء مجلد .aws مع تضمينه ملف الاعتماد. sudo mkdir .aws && touch .aws/credentials افتح الملف، وألصق الكود البرمجي التالي داخله، مع استبدال your_access_key و your_secret_key بمفاتيحك الخاصة. credentials [default] aws_access_key_id=your_access_key aws_secret_access_key=your_secret_key الآن سوف تتم المصادقة على دخولك إلى مساحة التخزين Spaces عبر SDK AWS، ويمكننا الآن الانتقال إلى إنشاء التطبيق. تثبيت ارتباطات Node.js للبدء، قم بإنشاء مجلد لوضع تطبيق Node.js فيه ثم اذهب إليه. في هذا المثال التوضيحي، سوف نقوم بإنشاء مشروعنا في spaces-node-app في المجلد sites. mkdir sites/spaces-node-app && cd sites/spaces-node-app قم بإنشاء ملف جديد package.json لأجل مشروعك. وألصق داخله الكود أدناه. package.json { "name": "spaces-node-app", "version": "1.0.0", "main": "server.js", "scripts": { "start": "node server.js" }, "license": "MIT" } الملف package.json سيتضمّن الاسم، رقم الإصدار وترخيص استعمال التطبيق. أما الحقلscripts فسيسمح لنا بتشغيل خادم Node.js بكتابة npm start بدلًا من node server.js. سوف نقوم بتثبيت كل ارتباطاتنا dependencies بالتعليمة npm install، تليها أسماء الارتباطات الأربع في مشروعنا. npm install aws-sdk express multer multer-s3 بعد تشغيل هذا الأمر، سيتم تحديث الملف package.json. هذه الارتباطات ستساعدنا على ربط الاتصال بالواجهة البرمجية لمساحة التخزين فيDigitalOcean ، وإنشاء خادم الويب، والتعامل مع رفع الملفات. ● aws-sdk - ستسمح لنا AWS SDK لجافاسكريبت بالوصول إلى S3 من خلال الواجهة البرمجية لجافاسكريبت (JavaScript API). ● express - Express هي بيئة تطوير للشبكة تسمح لنا بإعداد الخادم بسرعة وكفاءة. ● multer - Multer هو برنامج وسيط لمعالجة رفع الملفات. ● multer-s3 - Multer S3 يمدد رفع الملفات لـ S3 object storage، والتي هي في حالتنا، مساحة تخزين DigitalOcean. الآن وبعد أن أعددنا مكان وارتباطات مشروعنا، يمكن إعداد الخادم والمنظر الأمامي front-end views. إنشاء الواجهة الأمامية للتطبيق أولًا، سننشئ عدة ملفات لأجل المناظر العامّة public views لتطبيقنا. وهي التي سيراها المستخدم على الواجهة الأمامية. قم بإنشاء مجلد اسمهpublic يتضمن index.html, success.html و error.html. حيث ستحتوي كل هذه الملفات الثّلاث على هيكل HTML أدناه، لكن مع محتويات مختلفة في body. قم بكتابة الكود البرمجي التالي في كل ملف. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DigitalOcean Spaces Tutorial</title> <link rel="stylesheet" href="./style.css"> </head> <body> <!-- contents will go here --> </body> </html> أكتب رسالة خطأ في body داخل error.html. error.html ... <h1>Something went wrong!</h1> <p>File was not uploaded successfully.</p> ... أكتب رسالة نجاح فيbody داخل success.html. success.html ... <h1>Success!</h1> <p>File uploaded successfully.</p> ... في index.html، سنقوم بإنشاء استمارة HTML بـ multipart/form-data. وستتكون من مُدخل input بسيط وزر الإرسال submit. index.html ... <h1>DigitalOcean Spaces Tutorial</h1> <p>Please select a file and submit the form to upload an asset to your Dig-italOcean Space.</p> <form method="post" enctype="multipart/form-data" action="/upload"> <label for="file">Upload a file</label> <input type="file" name="upload"> <input type="submit" class="button"> </form> ... وأخيرا، سنقوم بإنشاء ملف style.css وإضافة تنسيقات CSS لجعل التطبيق سهل القراءة. style.css html { font-family: sans-serif; line-height: 1.5; color: #333; } body { margin: 0 auto; max-width: 500px; } label, input { display: block; margin: 5px 0; } بهذه الملفات الثلاث، لدينا الآن استمارة لرفع الملفات والتي ستشكل ملامح الصفحة الرئيسية لتطبيقنا الصغير هذا، كما لدينا أيضًا صفحة للنجاح والخطأ لأجل المستخدم. إعداد Express Server Environment لقد أنشأنا كل الملفات الخاصة بالواجهة الأمامية لتطبيقنا، لكننا حاليا لم نقم بعدُ بإعداد أي خادم أو أي طريقة لعرضها. سنقوم بإعداد خادمNode بواسطة Express web framework. في المجلد الجذري للمشروع، قم بإنشاء ملف server.js. وفي الجزء العلوي، قم برفع أربعة ارتباطات بواسطة الدالة ()require. كما سنُوجه تطبيقنا عبر عيّنة app من express. server.js // Load dependencies const aws = require('aws-sdk'); const express = require('express'); const multer = require('multer'); const multerS3 = require('multer-s3'); const app = express(); الواجهة الأمامية موجودة في المجلدpublic ، لذلك ضع الإعدادات تحت الارتباطات مباشرة. server.js ... // Views in public directory app.use(express.static('public')); سوف نوجّه index.html, success.html و error.html نسبة إلى جذر الخادم root of the server. server.js ... // Main, error and success views app.get('/', function (request, response) { response.sendFile(__dirname + '/public/index.html'); }); app.get("/success", function (request, response) { response.sendFile(__dirname + '/public/success.html'); }); app.get("/error", function (request, response) { response.sendFile(__dirname + '/public/error.html'); }); وأخيرا، سوف نخبر الخادمَ أيّ منفذport يجب أن يُصغي إليه. في هذا المثال، سنستخدم 3001, ولكن يمكنك تعيين أي منفذ متاح. server.js ... app.listen(3001, function () { console.log('Server listening on port 3001.'); }); احفظ server.js وشغّل الخادم. يمكنك القيام بذلك عن طريق تشغيل node server.js، أو بـ npm start، الاختصار الذي وضعناه في package.json. npm start Output > node server.js Server listening on port 3001. تصفّح http://localhost:3001، وسوف ترى استمارة الرفع، لأننا جعلنا index.html جذرَ الخادم. يمكنك أيضًا تصفّح http://localhost:3001/success و http://localhost:3001/error للتحقق من أن تلك الصفحات تُوجّه بشكل صحيح. رفع ملف إلى مساحة التخزين بواسطة Multer الآن بعد أن أعددنا بيئة الخادم بشكل صحيح، الخطوة الأخيرة هي دمج الاستمارة مع Multer وMulter S3 لأجل رفع الملف إلى مساحة التخزين. يمكنك استخدام ()new aws.S3 لربط الاتصال بـعميل أمازون( S3 (Amazon S3 client. ولاستخدامه مع Spaces DigitalOcean، سنحتاج إلى تحديد نقطة مرجعيةendpoint جديدة للتأكد من أنه يرفع الملفات إلى المكان الصحيح. في وقت كتابة هذا الدرس، nyc3 هي المنطقة الوحيدة المتاحة لـمساحة التخزين Spaces. في الملف server.js، انتقل مرة أخرى إلى أعلى وقم بإلصاق الأكواد التالية مباشرة تحت التصريح بالثوابت. server.js ... const app = express(); // Set S3 endpoint to DigitalOcean Spaces const spacesEndpoint = new aws.Endpoint('nyc3.digitaloceanspaces.com'); const s3 = new aws.S3({ endpoint: spacesEndpoint }); باستخدام المثال الموجود في وثائق multer-S3، سوف نقوم بإنشاء دالة upload، وإحالة اسم مساحة التخزين خاصتك إلى الخاصية bucket. قم بإعطاء القيمة acl للخاصية public-read لضمان أن يكون الملف في متناول الجميع. لكن إن تركت تلك الخاصية فارغة فستأخذ القيمية الافتراضية private، مما يجعل الملفات غير مُتاحة على شبكة الإنترنت. server.js ... // Change bucket property to your Space name const upload = multer({ storage: multerS3({ s3: s3, bucket: 'your-space-here', acl: 'public-read', key: function (request, file, cb) { console.log(file); cb(null, file.originalname); } }) }).array('upload', 1); بعد اكتمال الدالة upload، الخطوة الأخيرة هي وَصل استمارة الرفع بالكود البرمجي لإرسال الملف وتوجيه المستخدم وفقا لذلك. انتقل إلى أسفل الملف server.js، وألصق هذا الكود مباشرة فوق الوظيفة ()app.listen في نهاية الملف. server.js ... app.post('/upload', function (request, response, next) { upload(request, response, function (error) { if (error) { console.log(error); return response.redirect("/error"); } console.log('File uploaded successfully.'); response.redirect("/success"); }); }); عندما ينقر المستخدم على submit سيتم إرسال استعلامPOST إلى upload/, سيكون Node في حالة إصغاء/انتظار لـ POST. وسيستدعي الدالة()upload. وفي حال العثور على خطأ، فستُعيد العبارة الشرطية توجيه المستخدم إلى الصفحة error/. أما إذا مرّت الأمور بشكل جيد، فستتم إعادة توجيه المستخدم إلى الصفحة success/، وسيتم رفع الملف إلى مساحة التخزين خاصتك. هذا هو الكود الكامل لـ server.js. server.js // Load dependencies const aws = require('aws-sdk'); const express = require('express'); const multer = require('multer'); const multerS3 = require('multer-s3'); const app = express(); // Set S3 endpoint to DigitalOcean Spaces const spacesEndpoint = new aws.Endpoint('nyc3.digitaloceanspaces.com'); const s3 = new aws.S3({ endpoint: spacesEndpoint }); // Change bucket property to your Space name const upload = multer({ storage: multerS3({ s3: s3, bucket: 'your-space-here', acl: 'public-read', key: function (request, file, cb) { console.log(file); cb(null, file.originalname); } }) }).array('upload', 1); // Views in public directory app.use(express.static('public')); // Main, error and success views app.get('/', function (request, response) { response.sendFile(__dirname + '/public/index.html'); }); app.get("/success", function (request, response) { response.sendFile(__dirname + '/public/success.html'); }); app.get("/error", function (request, response) { response.sendFile(__dirname + '/public/error.html'); }); app.post('/upload', function (request, response, next) { upload(request, response, function (error) { if (error) { console.log(error); return response.redirect("/error"); } console.log('File uploaded successfully.'); response.redirect("/success"); }); }); app.listen(3001, function () { console.log('Server listening on port 3001.'); }); أوقف خادم Node عبر الضغط على CONTROL + C في موجه الأوامر، وأعد تشغيله لضمان تطبيق التغييرات الجديدة. npm start انتقل إلى جذر المشروع، اختر ملفَا، وقم بتفعيل الاستمارة. إذا تم تعيين كل شيء بشكل صحيح، سيتم توجيهك إلى صفحة النجاح success page، وسوف يكون الملف متاحًا للعموم في مساحة التخزين خاصتك في DigitalOcean. بافتراض أن الملف الذي قمت برفعه هو test.txt، فإن عنوان الملف سيكون: https://your-space-here.nyc3.digitaloceanspaces.com/test.txt من الأسباب الشائعة لفشل العمليات هي الاعتمادات credentials الخاطئة، وضع ملفات الاعتماد في أماكن غير صحيحة أو استخدام اسم bucket غير صحيح. الخلاصة تهانينا، لقد أنشأت تطبيق Node.js وExpress لرفع الأصول الثابتة للتخزين الكائني object storage. يمكن أن تقوم ببعض التعديلات والتجارب على التطبيق من هنا. لا بد من أخذ احتياطات إضافية مثل المصادقة authentication لضمان سير جيد لهذا النوع من التطبيقات، وتبقى هذه نقطة انطلاق جيدة لجعل تطبيق الويب خاصتك يعمل بسلاسة معDigitalOcean Spaces . ترجمة -وبتصرّف- للمقال How To Upload a File to Object Storage with Node لصاحبته Tania Rascia
  2. مقدمة Node.js هي منصة لجافا سكريبت للبرمجة متعددة الأغراض والتي تسمح للمستخدمين ببناء تطبيقات الشبكة بسرعة. من خلال استخدام جافا سكريبت على كل من الواجهة الأمامية والخلفية، سيكون التطوير أكثر اتساقا وسيُصمم داخل النظام نفسه. في هذا الدليل، ستتعلم كيفية تثبيت Node.js على خادم Debian 8. يحتوي Debian 8 على إصدار لـ Node.js في مجلداته الافتراضية، ولكن ذلك الإصدار قديم في الأغلب، سنقوم باستكشاف طريقتين لتثبيت أحدث إصدارات Node.js على نظامك. المتطلبات الأساسية لمتابعة هذا الدرس، ستحتاج إلى خادم Debian 8 مع مستخدم غير كامل الصلاحيات non-root user ويملك امتيازات sudo. كيفية التثبيت باستخدام PPA أسرع وأسهل وسيلة للحصول على أحدث إصدار من Node.js على خادمك هي بإضافة PPA (personal package archive) الخاص بـ NodeSource. سوف يشتمل على عدد أكبر من تحديثات Node.js مقارنة بمستودعات Debian الرسمية. كما أنه يتيح لك الاختيار بين Node.js v4.x (النسخة القديمة المدعومة على المدى الطويل, مدعومة حتى أبريل 2017)، v6.x (نسخة أحدث من LTS، والتي ستُدعم حتى أبريل 2018)، و Node.js v7.x (النسخة الحالية قيد التطوير). أولا، قم بتثبيت PPA للحصول على محتوياته. تأكد من أنك في المجلد الرئيسي home directory، استخدم curl لاستخراج النص البرمجي لتثبيت الإصدار المفضل لديك، مع استبدال 6.x برقم الإصدار الصحيح: cd ~ curl -sL https://deb.nodesource.com/setup_6.x -o nodesource_setup.sh يمكنك فحص محتويات هذا النص البرمجي بواسطة nano (أو محرر النصوص المفضل لديك): nano nodesource_setup.sh وقم بتشغيل البرنامج النصي عقِب الأمر sudo: sudo bash nodesource_setup.sh سيتم إضافة PPA إلى إعداداتك وسوف يتم تحديث حزمتك المحلية المُخزنة تلقائيًا. بعد تشغيل برنامج التنصيب من nodesource، يمكنك تثبيت حزمة Node.js بنفس الطريقة التي اتبعتها أعلاه: sudo apt-get install nodejs الحزمة nodejs تحتوي رُقامة nodejs (nodejs binary ) إضافة إلى npm، لذلك لا تحتاج إلى تثبيت npm بشكل منفصل. ولكن لكي تعمل بعض حُزم npm (مثل تلك التي تتطلب ترجمة التعليمات البرمجية من المصدر)، فستحتاج إلى تثبيت الحزمة build-essential: sudo apt-get install build-essential كيفية التثبيت بواسطة nvm بدل تثبيت Node.js بواسطة apt، يمكنك استعمال أداة خاصة تسمّى nvm (Node.js version manager). فباستخدام nvm، يمكنك تثبيت عدة إصدارات متكاملة من Node.js ما سيسمح لك بضبط بيئة العمل بشكل أسهل. كما ستعطيك إمكانية الوصول إلى أحدث إصدارات Node.js، ولكن ستسمح لك أيضا باستهداف الإصدارات السابقة التي قد يعتمد عليها تطبيقك. بدايةً سوف نحتاج إلى الحصول على حزم البرمجيات من مستودعات Debian والتي ستسمح لنا ببناء الحُزم المصدرية source packages. التعليمة nvm ستستخدم تلك الأدوات لبناء المكونات الضرورية: sudo apt-get update sudo apt-get install build-essential libssl-dev حالما يتم تثبيت الحُزم الضرورية، يمكنك حذف سكريبت التثبيتnvm من صفحة المشروع علىGitHub , رقم الإصدار قد يكون مختلفًا، ولكن بشكل عام، يمكنك تحميله بـ curl: curl -sL https://raw.githubusercontent.com/creationix/nvm/v0.32.0/install.sh -o install_nvm.sh طالع سكريبت التثبيت بواسطة nano: nano install_nvm.sh قم بتشغيل النص البرمجي بواسطة bash: bash install_nvm.sh النص البرمجي سيقوم بتثبيت البرنامج في مجلد في ~/.nvm. كما سيقوم بإضافة الأسطر اللازمة للملف ~/.profile لجعل التعليمة nvm متاحًا. لكسب إمكانية الوصول إلى التعليمةnvm وكذلك وظائفها، ستحتاج إلى تسجيل الخروج ثم تسجيل الدخول مرة أخرى، أو يمكنك إضافة المصدر ~/.profile حتى يتم اعتبار التغييرات في الجلسةsession الحالية: source ~/.profile الآن وبعد تثبيت nvm، يمكنك تثبيت أحد إصدارات Node.js بشكل منفصل. لمعرفة إصدارات Node.js المتوفرة للتثبيت، قم بكتابة: nvm ls-remote Output ... v6.8.0 v6.8.1 v6.9.0 (LTS: Boron) v6.9.1 (LTS: Boron) v6.9.2 (Latest LTS: Boron) v7.0.0 v7.1.0 v7.2.0 كما ترون، فأحدث إصدار في وقت كتابة هذه السطور هو v7.2.0، ولكن v6.9.2 هو آخر الإصدارات المدعومة على المدى الطويل. يمكنك تثبيته بكتابة: nvm install 6.9.2 سوف ترى المخرجات التالية: Computing checksum with sha256sum Checksums matched! Now using node v6.9.2 (npm v3.10.9) Creating default alias: default -> 6.9.2 (-> v6.9.2) عادة، سيتحولnvm إلى استخدام الإصدار المثبت حديثًا. لكن يمكنك أن تخبرnvm صراحة باستخدام النسخة التي حمّلناها للتو عن طريق كتابة: nvm use 6.9.2 يمكنك مشاهدة النسخة المستخدمة حاليا عن طريق كتابة في واجهة الأوامر: node -v Output v6.9.2 إن كان لديك عدة إصدارات من Node.js، يمكنك معرفة أيّ منها تم تثبيته بكتابة: nvm ls إذا كنت ترغب في جعل أحد هذه الإصدارات نسختك الافتراضية، يمكنك كتابة: nvm alias default 6.9.2 هذا الإصدار سيتم اختياره تلقائيًا عند فتح جلسة عمل جديدة على المِطراف terminal. يمكنك أيضًا الإحالة إليه باستخدام الاسم default هكذا: nvm use default كل نسخة من Node.js ستُتابع حُزمها الخاصة بها، وسيكونnpm متاحًا لإدارتها. يمكنك وضع حُزم تثبيت npm في المجلد ./node_modules الخاص بمشروعNode.js باستخدام الصيغة الطبيعية normal format. على سبيل المثال، بالنسبة للوحدة express: npm install express إذا كنت ترغب بتثبيته بشكل كلّي (جعْله متاحا للمشاريع الأخرى التي تستخدم نفس إصدار Node.js)، يمكنك إضافة العلم –g كما يلي: npm install -g express هذا سيثبّت الحزمة في: ~/.nvm/node_version/lib/node_modules/package_name التثبيت الكلي سيتيح لك تشغيل التعليمات من سطر الأوامر، ولكن سيكون عليك ربط الحزمة من مجالك المحلي local sphere للوصول إليه من داخل برنامج ما: npm link express يمكنك معرفة المزيد حول الخيارات المتاحة لك مع nvm بكتابة: nvm help خلاصة كما رأيت، هناك عدة طرق لتثبيت وتشغيل Node.js على خادم Debian 8. ظروفك ستملي عليك أيّ الطرق المذكورة أعلاه ستكون أفضل لك. وفي حين أن النسخة المحزومة packaged في مستودع Ubuntu هي الأسهل، إلّا أن طريقةnvm أكثر مرونة بالتأكيد. ترجمة -وبتصرّف- للمقال How To Install Node.js on Debian 8 لصاحبه Brian Hogan
  3. مقدمة Node.js هو بيئة عمل مفتوحة المصدر لجافا سكريبت تعمل وقت التشغيل لبناء تطبيقات الخادم والشبكات بسهولة. تعمل المنصة على لينكس, OS X, FreeBSD وويندوز. يمكن تشغيل تطبيقات Node.js من سطر الأوامر، ولكن سنركز على تشغيلها كخدمة، بحيث سيتم إعادة تشغيلها تلقائيًا في حال حدوث فشل أو في حال إعادة تشغيل الحاسوب، كما يمكن استخدامها بأمان في بيئة الإنتاج. في هذا الدرس، سوف نغطّي موضوع إنشاء بيئة عمل Node.js جاهزة للإنتاج على خادم Debian 8. هذا الخادم سيشغّل تطبيقًا لـ Node.js سيكون مُدارًا بواسطة PM2، ويوفر للمستخدمين وصولًا آمنًا إلى التطبيق عبر Nginx reverse proxy. المتطلبات الأساسية يفترض هذا الدليل أن لديك خادم Debian 8، بصلاحيات مستخدم غير جذري non-root user ومع امتيازات sudo. ونفترض كذلك أن لديك اسم نطاق يشير إلى عنوان IP العام للخادم. دعونا نبدأ بتثبيت بيئة العمل Node.js على خادمك. تثبيت Node.js سوف نقوم بتثبيت أحدث إصدارات Node.js المدعومة على المدى الطويل، وذلك باستخدام أرشيف الحزمة NodeSource. أولًا، تحتاج إلى تثبيت NodeSource PPA لأجل الوصول إلى محتوياته. تأكد من أنك في المجلد الأساسي home directory، وقم باستخدامcurl للحصول على برنامج التثبيت النصي من مستودعات 6.X Node.js: cd ~ curl -sL https://deb.nodesource.com/setup_6.x -o nodesource_setup.sh يمكنك فحص محتويات هذا النص البرمجي بواسطةnano (أو محرر النصوص المفضل لديك): nano nodesource_setup.sh وقم بتشغيل النص البرمجي عقب sudo: sudo bash nodesource_setup.sh سيتم إضافة PPA إلى إعداداتك وسوف يتم تحديث حزمتك المحلية المُخزنة تلقائيًا. بعد تشغيل برنامج التنصيب من nodesource، يمكنك تثبيت حزمة Node.js بنفس الطريقة التي اتبعتها أعلاه: sudo apt-get install nodejs الحزمة nodejs تحتوي رُقامة nodejs (nodejs binary ) إضافة إلى npm، لذلك لا تحتاج إلى تثبيت npm بشكل منفصل. ولكن لكي تعمل بعض حُزم npm (مثل تلك التي تتطلب ترجمة التعليمات البرمجية من المصدر)، فستحتاج إلى تثبيت الحزمة build-essential: sudo apt-get install build-essential لقد تم تثبيت بيئة العمل Node.js، وصارت جاهزة لتشغيل تطبيقاتنا! لذلك دعونا الآن نكتب تطبيقًا بـ Node.js إنشاء تطبيق Node.js سنكتب تطبيق Hello World والذي سيُرجع ببساطة الجملة “Hello World” لكل طلبات HTTP. هذا تطبيق تعليمي بسيط من شأنه أن يساعدك على التعامل مع Node.js، يمكنك بعد ذلك استبداله بتطبيقاتك الخاصة. فقط تذكر أن تعدّل تطبيقك لكي يُصغي إلى منافذ وعناوين IP المناسبة. الشيفرة البرمجية لـ Hello World أولًا، قم بإنشاء وفتح تطبيق Node.js لأجل التحرير. في هذا الدرس، سوف نستخدم nano لتحرير تطبيق تعليمي يُسمّى hello.js: cd ~ nano hello.js أدرج التعليمات البرمجية التالي في الملف. يمكنك استبدال المنفذ 8080، في كلا الموقعين (تأكد من استخدام منفذ غير أساسي non-admin، أي 1024 أو أكبر): hello.js #!/usr/bin/env nodejs var http = require('http'); http.createServer(function (req, res) { res.writeHead(200, {'Content-Type': 'text/plain'}); res.end('Hello World\n'); }).listen(8080, 'localhost'); console.log('Server running at http://localhost:8080/'); الآن احفظ واخرج. هذا التطبيق سيُصغي إلى العنوان المحدد(localhost) والمنفذ (8080)، ويُرجع “Hello World” مع كود النجاح (HTTP success) يساوي200 . وبما أننا نُصغي على localhost، فإن العملاء البعيدين remote clients لن يكونوا قادرين على ربط الاتصال بتطبيقنا. اختبار التطبيق لتتمكن من اختبار التطبيق، اجعل hello.js ملفًّا تنفيذيًا: chmod +x ./hello.js وقم بتشغيله هكذا: ./hello.js Output Server running at http://localhost:8080/ لاختبار التطبيق، قم بفتح جلسة على المطراف terminal على الخادم الخاص بك، ثم اربط االاتصال بـlocalhost بواسطة curl: curl http://localhost:8080 إن رأيت المخرجات التالية، فهذا يعني أن التطبيق يعمل بشكل صحيح ويُصغي للعنوان والمنفذ الصحيحين: Output Hello World إن لم ترى المخرجات المناسبة، تأكد من أن تطبيق Node.js قيد التشغيل، وأنه يٌصغي للعنوان والمنفذ الصحيح. بمجرد أن تتيقن بأنه يعمل، أوقف التطبيق (إذا لم تكن قد فعلت من قبل) عن طريق الضغط على Ctrl + C. تثبيت PM2 سنقوم الآن بتثبيتPM2 ، والذي هو مدير العمليات process manager لتطبيقات Node.js. يوفر PM2 وسيلة سهلة لإدارة وإخفاء daemonize التطبيقات (أي تشغيلها كخدمة في الخلفية.( سوف نستخدم npm، وهي حزمة لإدارة وحدات Nodeالتي تُثبّت مع Node.js، لتثبيت PM2 على الخادم استخدم هذا الأمر: sudo npm install -g pm2 الخيار -g يقول لـnpm أنّ عليه تثبيت الوحدة بشكل كلي globally، بحيث تكون متاحة على نطاق النظام كله. إدارة التطبيق عبر PM2 PM2 بسيط وسهل الاستخدام. سوف نغطي فيما يلي بعض استخداماته الأساسية. بدء التطبيق أول شيء سنفعله هو استخدام التعليمة pm2 start لبدء تشغيل التطبيق hello.js في الخلفية: pm2 start hello.js هذا يضيف أيضًا تطبيقك إلى لائحة عمليات PM2، والتي تُحدَّث في كل مرة تبدأ تشغيل التطبيق: Output [PM2] Spawning PM2 daemon [PM2] PM2 Successfully daemonized [PM2] Starting hello.js in fork_mode (1 instance) [PM2] Done. ┌──────────┬────┬──────┬──────┬────────┬─────────┬────────┬─────────────┬──────────┐ │ App name │ id │ mode │ pid │ status │ restart │ uptime │ memory │ watching │ ├──────────┼────┼──────┼──────┼────────┼─────────┼────────┼─────────────┼──────────┤ │ hello │ 0 │ fork │ 3524 │ online │ 0 │ 0s │ 21.566 MB │ disabled │ └──────────┴────┴──────┴──────┴────────┴─────────┴────────┴─────────────┴──────────┘ Use `pm2 show <id|name>` to get more details about an app كما ترى، يُعيّن PM2 تلقائيا اسم التطبيق (بناءً على اسم الملف دون الامتداد .js). ورقم تعريفPM2 . كما يحفظ PM2 معلومات أخرى، من قبيل معرّف العمليةPID ، وحالته الراهنة، واستخدام الذاكرة. سيتم إعادة تشغيل التطبيقات التي تعمل تحت PM2 تلقائيا إذا تعطل التطبيق أو أُوقف، لكي نجعل التطبيق يشتغل تلقائيًا عند بدء أو إعادة التشغيل ينبغي اتخاذ خطوة إضافية. ولحسن الحظ، يوفّرPM2 وسيلةً سهلةً للقيام بذلك، وهي التعليمة الفرعية startup. تقوم التعليمة الفرعية startup بإنشاء وإعداد برنامج نصي لإطلاق PM2 والعمليات المُدارة من قبله عند بدء تشغيل الخادم. يجب عليك أيضًا تحديد المنصة الذي تعمل عليها، والتي هي Ubuntu، في حالتنا: pm2 startup system السطر الأخير من المخرجات سوف يتضمّن تعليمة عليك تشغيلها بامتيازات المستخدم الجذري superuser. Output [PM2] You have to run this command as root. Execute the following command: sudo env PATH=$PATH:/usr/bin /usr/local/lib/node_modules/pm2/bin/pm2 startup systemd -u sammy --hp /home/Sammy قم بتشغيل التعليمة التي تم إنشاؤها (مماثلة للمخرجات الملوّنة أعلاه، ولكن استخدم اسم المستخدم الخاص بك بدلًا من sammy) لجعل PM2 يبدأ مع بداية التشغيل (استخدم التعليمة من المخرجات التي لديك): sudo env PATH=$PATH:/usr/bin /usr/local/lib/node_modules/pm2/bin/pm2 startup systemd -u sammy --hp /home/sammy هذا سوف يُنشئ systemd unit والتي ستُشغّل PM2 للمستخدم خاصتك عند بدء التشغيل. عينة pm2 هذه ستشغّل بدورهاhello.js . يمكنك التحقق من حالة الوحدة systemd بواسطة systemctl: systemctl status pm2 لمزيد من التفاصيل عن systemd، طالع مقال أساسيات Systemd: العمل مع الخدمات، الوحدات Units، واليوميات Journal استخدامات أخرى لـ PM2 (اختياري) يوفرPM2 العديد من التعليمات الفرعية التي تسمح لك بإدارة أو البحث عن معلومات حول تطبيقاتك. لاحظ أن تشغيل PM2 دون أي معاملات arguments سيؤدي إلى عرض صفحة مساعدة تتضمن أمثلة على الاستخدام والتي تغطي استخدامات PM2 بتفاصيل أكثر مما هو موجود في هذا الدرس. يمكنك إيقاف التطبيق بهذه التعليمة (حدّد App name أو id الخاص بـPM2 ): pm2 stop app_name_or_id يمكنك إعادة تشغيل التطبيق بهذه التعليمة (حدّد App name أو id الخاص بـPM2 ): pm2 restart app_name_or_id ويمكن أيضًا مطالعة قائمة من التطبيقات المُدارة حاليًا من قبل PM2 بالتعليمة الفرعيةlist . pm2 list يمكنك الحصول على مزيد من المعلومات حول تطبيق معين باستخدام التعليمة الفرعية info (حدّد App name أو id الخاص بـPM2 ): pm2 info example يمكن الوصول إلى مراقب عمليات PM2 بالتعليمة الفرعية monit. سيتم عرض حالة التطبيق ووحدة المعالجة المركزية CPU واستخدام الذاكرة: pm2 monit الآن وبعد أن قمنا بتشغيل Node.js وإدارته بواسطة PM2، دعونا نبدأ إعداد الوكيل العكسيreverse proxy . إعداد Nginx ليكون الوكيل العكسي للخادم Reverse Proxy Server الآن وبعد أن بدأ تطبيقك يشتغل ويُصغي إلى المضيف المحلي localhost، تحتاج إلى إعداد وسيلة ليتمكن المستخدمون من الوصول إليه. سوف نقوم بإنشاء خادم Nginx كوكيل عكسي لهذا الغرض. في هذا الدرس ستتعلم كيفية إعداد خادم Nginx من الصفر. إن سبق وقمت بإعداد خادم Nginx، فيمكنك الاكتفاء بنسخ location في server block من اختيارك (تأكد من أن المحل location لا يتداخل مع المحتوى الموجود على الخادم). أولًا، قم بتثبيت Nginx باستخدام apt-get: sudo apt-get install nginx الآن افتح ملف الإعدادات الافتراضي لـ server block لأجل تحريره: sudo nano /etc/nginx/sites-available/default احذف كل ما هو موجود في الملف وقم بإدراج الإعدادات التالية. تأكد من استبدال اسم النطاق خاصتك في الموجّه server_name. بالإضافة إلى ذلك، قم بتغيير المنفذ (8080) إن كان تطبيقك مُعدًّا للإصغاء إلى منفذ آخر: /etc/nginx/sites-available/default server { listen 80; server_name example.com; location / { proxy_pass http://localhost:8080; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection 'upgrade'; proxy_set_header Host $host; proxy_cache_bypass $http_upgrade; } } هذا سيقوم بإعداد الخادم بحيث يرد على الطلبات requests على مستوى الجذر root. إن افترضنا مثلًا أن خادمنا مُتوفر فيexample.com ، فإن الدخول إلى http://example.com/ عبر متصفح الإنترنت سيبعث الطلب إلى hello.js الذي يُصغي إلى المنفذ 8080 في المضيف المحلي. يمكنك إضافة كتل محل location blocks إضافية لنفس كتلة الخادم server block لإتاحة إمكانية الوصول إلى التطبيقات الأخرى على نفس الخادم. على سبيل المثال، إن كنت تُشغّل تطبيقًا آخرًا لـ Node.js على المنفذ 8081، يمكنك إضافة كتلة المحل location block التالية للسماح بالوصول إليها عبر http://example.com/app2 : Nginx Configuration — Additional Locations location /app2 { proxy_pass http://localhost:8081; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection 'upgrade'; proxy_set_header Host $host; proxy_cache_bypass $http_upgrade; } بمجرد الانتهاء من إضافة كتل المحل لتطبيقاتك، قم بالحفظ واخرج. تأكد من أنك لم ترتكب أي أخطاء نحوية syntax errors أثناء الكتابة: sudo nginx –t بعد ذلك، قم بإعادة تشغيل Nginx: sudo systemctl restart nginx بعد ذلك، قم بترخيص المرور لـ Nginx عبر جدار حماية، إن كان متاحًا. إذا كنت تستخدم ufw ، يمكنك استخدام التعليمة التالية: sudo ufw allow 'Nginx Full' يمكنك بواسطةufw التحقق من الحالة باستخدام التعليمة التالية: sudo ufw status إذا كنت تستخدم IPTables بدلًا من ذلك، يمكنك ترخيص المرور لـ Nginx باستخدام التعليمة التالية: sudo iptables -I INPUT -p tcp -m tcp --dport 80 -j ACCEPT يمكنك دائمًا التحقق من حالة IPTables باستخدام التعليمة التالية: sudo iptables –S على افتراض أن تطبيق Node.js الخاص بك قيد التشغيل، وأن إعدادات Nginx وتطبيقاتك صحيحة، فسيكون بإمكانك الآن الوصول إلى تطبيقك عبر وكيل عكسي لـ Nginx. جرّب ذلك بنفسك عن طريق الدخول إلى عنوان الخادم الخاص بك (الـ IP أو اسم النطاق) الخلاصة تهانينا! لقد نجحت في جعل تطبيق Node.js الخاص بك يعمل في خلفية وكيل عكسي لـ Nginx على خادم Debian 8. إعدادات الوكيل العكسي هاته مرنة بما فيه الكفاية لتمكين المستخدمين من الوصول إلى التطبيقات الأخرى أو محتويات صفحات الأنترنت الثابتة التي تريد مشاركتها. حظًا سعيدًا في عملك على Node.js. ترجمة -وبتصرّف- للمقال How To Set Up a Node.js Application for Production on Debian 8 لصاحبته Lisa Tagliaferri
  4. سنتعرّف في هذا الدّرس على أداة nw (سابقًا node-webkit) المُخصّصة لتطوير تطبيقات سطح المكتب العابرة للمنصات؛ باستخدام مُتصفّح كروميوم [Chromium [1 و node.js. حيث أصبح بالإمكان استخدام تقنيات الوِب الحديثة لتطوير برمجيات قادرة على الاستفادة من موارد النظام؛ كالتحكّّم بالملفات، استعمال قواعد البيانات وغيرها من الأمور. في هذا الدّرس سنتعلّم كيفية كتابة تطبيق لسطح المكتب باستخدام nw لتشغيل ملفّات الفيديو. لنبدأ. تثبيت node.jsإذ كنت تَستخدم نظام التشغيل Windows أو Mac OS عندها استعمل معالج التثبيت الرسمي، أما في حال عملك على نظام لينكس فقم بتثبيتها من خلال مدير الحزم. تثبيت nwبعد تركيب node.js من خلال مدير حزم node.js نحتاج إلى تركيب nw، للقيام بذلك نفّذ ما يلي من خلال الطرفية: npm install nw -g أهلا بالعالمأنشئ مُجلدًا مُخصصًا لمشروعنا الأول باسم helloworld ثم أنشئ بداخله ملفّين: package.jsonإن سبق لك التطوير باستخدام node.js فستعرف بالتأكيد أن هذا هو الملف الخاص بمعلومات و خصائص التطبيق أو الحزمة، يمكنك إنشاءه بسهولة من خلال سطر الأوامر: npm init سنضيف إلى الملفّ بعض خصائص nw (حجم النافذة و الرابط للملف الرّئيسيّ) ليصبح شكل الملف بالكامل هكذا: { “name”: “helloworld”, “version”: “1.0.0”, “description”: “”, “main”: “index.html”, “window”: { “width”: 600, “height”: 400 }, “scripts”: { “test”: “echo \”Error: no test specified\” && exit 1” }, “author”: “hsoubAcademy”, “license”: “MIT” } index.htmlهو ملف nw الرئّيسيّ الذي قمنا بتحديده من ملف الحزمة (package.json)، سنُنشئ مُستند بسيط لطباعة أهلًا بالعالم. تشغيل التطبيقمن خلال سطر الأوامر انتقل إلى ملف المشروع وشغّل nw: cd helloworld nw يجب أن تظهر لك نافذة بحجم 600X400px وبداخلها نص "أهلًا بالعالم". سياق شفرة javascript يوجد بـ nw سياقان لشِفرة javascript: سياق المُتصفّح وسياق node.js، عند استدعائك لملف javascript أو تشغيلك لشيفرة من خلال مستند html فإن هذه الشفرة تُمرر إلى المتصفح ليقرأها، أما عند تشغيلك لملفّ javascript من خلال خاصية node-main في ملفّ الحزمة (package.json) أو استدعائه من خلال الدّالّة require فإنه يُمرر إلى سياق node.js، حيث يوجد بعض الاختلافات الطفيفة بين هذين السياقين في الكتابة: 1. سياق المتصفح في هذا السياق تعمل الشيفرة بالأسلوب الذي تعمل به في المتصفح، المُتغيّر العام هو window مثلًا، هذه الشيفرة ستعمل بشكل صحيح فقط في سياق المُتصفح: myVar = “test”; // تعريف مُتغير بشكل عام alert(window.myVar); // إخراج نافذة بالمتغير ولتمرير المُتغيرات بشكل عام إلى سياق node.js يجب تعريفها كتابع للمُتغير window.global مثال ليعمل مثال: // ملف window.js // هذا الملف يجب أن يعمل من سياق المُتصفح window.global.myVar = “test”; // تعريف مُتغيّر بشكل عام إلى سياق المُتصفح require(“node.js”); // استدعاء ملف node.js بداخل سياق node.js // ملف node.js // هذا الملف يجب أن يعمل من سياق node.js window.alert(myVar); // عرض المُتغير الّذي تم تعريفه بشكل عام من سياق المُتصفح2. سياق node.js في هذه السياق تعمل الشيفرة بأسلوب عملها باستخدام node.js، المُتغير العام هو global مثال: myVar = “test”; // تعريف مُتغير بشكل عام window.alert(global.myVar); // إخراج نافذة بالمتغير العام الّذي قمنا بتعريفه يُمكن استخدام سياق المتصفح والتمرير إليه من خلال المُتغير window. استدعاء الحزم التي كتبت للمتصفح بداخل سياق node.jsعند استدعاء حزم تمت كتابتها للمُتصفح بداخل سياق node.js عن طريق الدّالّة require فقد لا تعمل، حيث تحدثنا سابقًا أن المتغيّر العام في سياق node.js هو global و ليس window مما يسبب مشكلة إن تم استدعاء أحد توابع window، عمومًا فالمثال لن يعمل في سياق node.js: var div = document.createElement(“div”); لجعل هذه الشيفرة تعمل يجب تعريف مُتغير document بشكل عام في سياق node.js: global.document = window.document; بشكل مبدئي سيجعل هذين السطرين أغلب الحزم تعمل: global.document = window.document; global.navigator = window.navigator; إن كنت تبحث عن حل تلقائي لنقل جميع المُتغيرات إلى سياق node.js (قد لا يُنصح بهذا الحل بسبب حذف المُتغيرات المتطابقة في الاسم): var Var; for(Var in window) if(Var != “require”) global[Var] = window[Var]; ملاحظة: لم ننقل مُتغير require لأن التابع window.require يستخدم global.require في استدعاء الحزم. لاحظ أيضًا أنه لا يمكن استدعاء حزمة nw.gui الخاصة بواجهة المستخدم من خلال سياق node.js عن طريق الدّالّة require فكما ذكرنا؛ التابع window.require يختلف عن global.require. هذا هو النص المصدري للتابع: window.require = function (name) { if (name == ‘nw.gui’) return nwDispatcher.requireNwGui(); return global.require(name); } وكما تلاحظ إن كان اسم الحزمة node.js فإنه يستخدم هذه الدّالّة لاستدعائها: nwDispatcher.requireNwGui(); إذًا لاستدعائها من خلال سياق node.js استخدم الدّالّة السابقة أو استخدم window.require. إنشاء تطبيق لتشغيل الفيديوملفات المشروعهذه قائمة لملفات المشروع: ملف الحزمة (package.json)حجم النافذة الافتراضي هو 800x600px، الملفّ الرّئيسيّ هو index.html، مبدئيًا سيكون الملف بهذا الشكل: { “name”: “nw-video-player”, “version”: “1.0.0”, “description”: “تطبيق بسيط لتشغيل الفيديو”, “main”: “index.html”, “window”: { “width”: 800, “height”: 600 }, “scripts”: { “test”: “echo \”Error: no test specified\” && exit 1” }, “author”: “hsoubAcademy”, “license”: “MIT”, “dependencies”: { “videojs”: “^4.12.15” } } الملف الرئيسي index.htmlسنكتب مستند بسيط يحتوي على زر وعنصر، نضيف المشغّل ضمنه من خلال شيفرة javascript: <!doctype html> <html> <head> <meta charset="utf-8"> <title>تطبيق بسيط لتشغيل الفيديو</title> <!-- ملف شفرة js الرّئيسية للتطبيق --> <script src="src/app.js"></script> </head> <body> <button id="play">فتح</button> <div id="player"></div> </body> </html> نافذة فتح الملفاتلا يوجد طريقة مباشرة لفتح الملفات باستخدام نافذة النظام، لكن يُمكننا استخدام مدخل input من نوع file لفتح الملفّات: لكن كخلاف المتصفح للمستخدم يُتاح لنا بعض الأشياء عند التطوير بـ nw كجلب المسار الكامل الحقيقي للملفّ، ويتاح لنا فتحه من خلال javascript: document.querySelector(“input”).click(); من خلال هذا سنكتب دالّة بسيطة لفتح ملفّات الفيديو وإرجاع مسار الملف مع إضافة بروتوكول file لاستخدامه من خلال المُتصفح، الدّالّة: // فتح ملف var openFile = function openFile (callback) { var input = window.document.createElement(“input”); input.setAttribute(“type”, “file”); input.setAttribute(“accept”, “.mp4, .ogg, .ogv, .webm”); input.addEventListener(“change”, function () { // عند إختيار ملف callback(“file://”+this.value); }); input.click() // فتح مُختار الملفات } تجربة استخدام: openFile(alert);مشغل الفيديوسنستخدم video.js لتسهيل تصميم المشغّل من خلال سطر الأوامر، اتجه إلى مجلّد المشروع ثم قم بتنصيب video.js من مدير الحزم الخاص بـnode.js: npm install videojs –save كما تحدثنا في بداية الدرس عن استدعاء الحزم في سياق node.js سنحتاج إلى كتابة هذين السطرين: global.document = window.document; global.navigator = window.navigator; من ثم سيمكننا استدعائها بشكل عادي: var videojs = require(“videojs”); من خلال هذا والدّالّة السابقة لفتح الملفات سنكتب دالّة لإنشاء مشغل فيديو من خلال مسار ملف الفيديو من ثم إضافته إلى عنصر المشغّل في المستند الذي كتبناه من قبل: var playVideo = function playVideo (src) { var videojs = require("videojs"), ext = /[^.]+$/.exec(src)[0], // صيغة الملفّ video = document.createElement("video"), // عنصر الفديو source = document.createElement("source"), // عنصر المصدر للفديو player = document.querySelector("#player"); // عنصر المشغل في وثيقة html ext = (ext == "ogv") ? "ogg" : ext; // ملفات ogg قد تملك صيغة ogv source.type = "video/"+ext.toLowerCase(); // نوع mime للفديو source.src = src; // مسار الفديو video.controls = true; // عناصر التحكّم video.autoplay = true; // تشغيل تلقائي video.classList.add("video-js", "vjs-default-skin"); // الclass الخاصة بvideojs video.appendChild(source); // إضافة عنصر المصدر إلى الفديو player.innerHTML = ""; // إزالة جميع العناصر السّابقة player.appendChild(video); // إضافة الفديو إلى وثيقة html videojs(video) // إستخدام video.js }مشكلة nw مع الصيغ مُغلقة المصدر: بشكل افتراضي سيمكنك تشغيل ملفات ogg و webm فقط لكن بسبب مشكلة مع التراخيص، لا تتضمن nw مشغّل لصيغة mp4 و الصوت mp3 اطلع على طريقة تضمين الملفّات المُشغلة. الآن تبقى فتح الملفّ عند الضغط على الزر: window.addEventListener(“load”, function () { window.document.querySelector(“button#play”).addEventListener(“click”, function () { openFile(playVideo) }); }); ليصبح كامل ملف app.js: "use strict"; global.document = window.document; global.navigator = window.navigator; var nwGui = require("nw.gui"), Window = nwGui.Window.get(); (function(window, nwGui, Window){ var maximized; // فتح ملف var openFile = function openFile (callback) { var input = document.createElement("input"); input.setAttribute("type", "file"); input.setAttribute("accept", ".mp4, .ogg, .ogv, .webm"); input.addEventListener("change", function () { // عند إختيار ملف callback("file://"+this.value); }); input.click() // فتح مُختار الملفات } // تشغيل فديو var playVideo = function playVideo (src) { var videojs = require("videojs"), ext = /[^.]+$/.exec(src)[0], // صيغة الملفّ video = document.createElement("video"), // عنصر الفديو source = document.createElement("source"), // عنصر المصدر للفديو player = document.querySelector("#player"); // عنصر المشغل في وثيقة html ext = (ext == "ogv") ? "ogg" : ext; // ملفات ogg قد تملك صيغة ogv source.type = "video/"+ext.toLowerCase(); // نوع mime للفديو source.src = src; // مسار الفديو video.controls = true; // عناصر التحكّم video.autoplay = true; // تشغيل تلقائي video.classList.add("video-js", "vjs-default-skin"); // الclass الخاصة بvideojs video.appendChild(source); // إضافة عنصر المصدر إلى الفديو player.innerHTML = ""; // إزالة جميع العناصر السّابقة player.appendChild(video); // إضافة الفديو إلى وثيقة html videojs(video) // إستخدام video.js } window.addEventListener("load", function () { // زر فتح فديو window.document.querySelector("button#play").addEventListener("click", function () { openFile(playVideo) }); }); }) (window, nwGui, Window);تصميم التطبيقبداخل مُستند html أضف مسار ملفّ css الافتراضي لـvideo.js الموجود داخل مجلد node_modules: ثم سنلغي شريط الأدوات الخاص بـnw بداخل ملف الحزمة (package.json) وبداخل العنصر window أضف ما يلي: “toolbar”: false من ثم سننشئ ملف تصميم src/style.css: html, body{ width: 100%; height: 100%; background: #ccc; direction: rtl; margin: 0 } /* زر التشغيل */ #play{ height: 25px; background: white; padding: 2px 20px; box-sizing: border-box; border: 1px #ccc solid } #play:hover{ box-shadow: inset 0 0 1px #333 } /* المُشغل */ #player{ background: black; width: 100%; height: calc(100% - 25px) } #player > .video-js{ width: 100% !important; height: 100% !important } إضافته من خلال مُستند html: كان من الأفضل استخدام قائمة النظام لعرض زر تشغيل الفيديو لكن nw لا تدعم الاتجاه من اليمين إلى اليسار بشكل كامل إلى الآن، لذا سنضيف السطر التالي إلى ملف الحزمة كي تظهر من اليمين إلى اليسار: “chromium-args”: “–lang=ar” بدلًا من ذلك سنقوم بإنشاء إطار مُخصص للنافذة لتبدو بشكلٍ أفضل في مختلف الأنظمة. تخصيص إطار النافذةبداخل ملف الحزمة (package.json) وبداخل عنصر window سنلغي الإطار الافتراضي: “frame”: false من ثم بداخل مستند html سنضيف أزرار النافذة في أول عنصر جسم الصفحة (body). سنضيف و نحذف بعض الخصائص من ملف src/style.css ليصبح شكل النافذة شبيه بنافذة نظام OS X: html, body{ width: 100%; height: 100%; background: #ccc; direction: rtl; margin: 0 } /* زر التشغيل */ #play{ -webkit-app-region: no-drag; height: 25px; background: white; padding: 2px 20px; box-sizing: border-box; border: 1px #ccc solid; position: absolute; right: 5px; top: 2px } #play:hover{ box-shadow: inset 0 0 1px #333 } /* المُشغل */ #player{ background: black; width: 100%; height: calc(100% - 25px) } #player > .video-js{ width: 100% !important; height: 100% !important } /* النافذة */ body{ box-sizing: border-box; border: #DDDDDC 5px solid } .window-toolbar{ -webkit-app-region: drag; background: -webkit-linear-gradient(#DDDDDC, #C2C2C2); height: 25px; direction: ltr; padding: 2px 5px; box-sizing: border-box } .window-toolbar > label.title{ position: absolute; left: 50%; transform: translate(-50%, 0) } .window-toolbar-button{ -webkit-app-region: no-drag; width: 12px; height: 12px; border-radius: 100%; display: inline-block; cursor: pointer; margin-right: 2px } .window-toolbar-button.close{ background: #FD4E4E } .window-toolbar-button.maximize{ background: #96D16F } .window-toolbar-button.minimize{ background: #F3BB55 } مُلاحظة: الخاصية webkit-app-region- المسؤولة عن جعل العنصر قابل للسحب والإفلات أيضًا يُمكن التحكّم بموقع النافذة من هذا العنصر لهذا استخدمناه في شريط أدوات النافذة لكن هذا العنصر لن يكون قابل للضغط أو المرور عليه لذلك يجب تعطيلها لعناصر التحكّم بداخله. لنكتب بعض الشيفرات بداخل ملفّ src/app.js لإضافة الحياة لشريط الأدوات. توفّر nw بعض التوابع للتحكم بالنافذة ما سنحتاجه للعمل: require(“nw.gui”).Window.get().close(); // إغلاق النافذة الحالية فقط require(“nw.gui”).App.quit(); // إغلاق التطبيق بجميع النوافذ require(“nw.gui”).Window.get().minimize(); // تصغير النافذة إلى شريط التطبيقات require(“nw.gui”).Window.get().maximize(); // ملء الشاشة بالنافذة require(“nw.gui”).Window.get().unmaximize(); // إرجاع النافذة أولًا زر الإغلاق: var nwGui = require(“nw.gui”); // زر إغلاق التطبيق window.document.querySelector(“.close”).addEventListener(“click”, function () { nwGui.App.quit(); }); ثانيًا زر إخفاء النافذة إلى شريط التطبيقات: var nwGui = require("nw.gui"), Window = nwGui.Window.get(); // زر تصغير النافذة إلى شريط التطبيقات window.document.querySelector(".minimize").addEventListener("click", function() { Window.minimize() });زر ملء النافذة لكن أولًا سنضيف مراقب للحدثين maximize و unmaximize لمعرفة هل النافذة بكامل الحجم أو لا، حيث لا توفّر nw أيّة API لمعرفة ذلك: var nwGui = require(“nw.gui”), Window = nwGui.Window.get(), maximized = false; // مراقب للحدث maximize Window.on("maximize", function(){ maximized = true; }); // مراقب للحدث unmaximize Window.on("unmaximize", function(){ maximized = false; });من خلال هذا وعند الضغط على زر الملئ إما أن تذهب النافذة لكامل الحجم أو تعود لحجمها الطبيعي: window.document.querySelector(“.maximize”).addEventListener(“click”, function () { maximized ? Window.unmaximize() : Window.maximize() }); يجب أن يكون كامل ملف src/app.js بهذا الشكل: "use strict"; global.document = window.document; global.navigator = window.navigator; var nwGui = require("nw.gui"), Window = nwGui.Window.get(); (function(window, nwGui, Window){ var maximized; // فتح ملف var openFile = function openFile (callback) { var input = document.createElement("input"); input.setAttribute("type", "file"); input.setAttribute("accept", ".mp4, .ogg, .ogv, .webm"); input.addEventListener("change", function () { // عند إختيار ملف callback("file://"+this.value); }); input.click() // فتح مُختار الملفات } // تشغيل فديو var playVideo = function playVideo (src) { var videojs = require("videojs"), ext = /[^.]+$/.exec(src)[0], // صيغة الملفّ video = document.createElement("video"), // عنصر الفديو source = document.createElement("source"), // عنصر المصدر للفديو player = document.querySelector("#player"); // عنصر المشغل في وثيقة html ext = (ext == "ogv") ? "ogg" : ext; // ملفات ogg قد تملك صيغة ogv source.type = "video/"+ext.toLowerCase(); // نوع mime للفديو source.src = src; // مسار الفديو video.controls = true; // عناصر التحكّم video.autoplay = true; // تشغيل تلقائي video.classList.add("video-js", "vjs-default-skin"); // الclass الخاصة بvideojs video.appendChild(source); // إضافة عنصر المصدر إلى الفديو player.innerHTML = ""; // إزالة جميع العناصر السّابقة player.appendChild(video); // إضافة الفديو إلى وثيقة html videojs(video) // إستخدام video.js } window.addEventListener("load", function () { // زر فتح فديو window.document.querySelector("button#play").addEventListener("click", function () { openFile(playVideo) }); // زر إغلاق التطبيق window.document.querySelector(".close").addEventListener("click", function () { nwGui.App.quit() }); // مراقب للحدث maximize Window.on("maximize", function(){ maximized = true; }); // مراقب للحدث unmaximize Window.on("unmaximize", function(){ maximized = false; }); // زر تصغير النافذة إلى شريط التطبيقات window.document.querySelector(".minimize").addEventListener("click", function() { Window.minimize() }); // زر الملء window.document.querySelector(".maximize").addEventListener("click", function () { maximized ? Window.unmaximize() : Window.maximize() }); }); }) (window, nwGui, Window);صورة للشكل النهائي: إن لم يظهر التطبيق بنفس الشكل فإليك ملفات التطبيق النهائية. بناء الملف التنفيذيلو أردنا إتباع الأسلوب التقليدي فنحن نحتاج إلى أنظمة التشغيل الثلاثة لبناء التطبيق في كل واحد منها على حدى، بدلًا من ذلك سنستخدم nwbuild لبناء التطبيق من خلال نظام تشغيل واحد إلى جميع أنظمة التشغيل. من مدير حزم npm قم بتركيب nwbuild : npm install nwbuild -g أنظمة التشغيل المتوفرة لـnwbuild: win32 # Windows 32bit win64 # Windows 64bit win # Windows 64bit مع 32bit osx32 # Mac OS 32bit osx64 # Mac OS 64bit osx # Mac OS 64bit مع 32bit linux32 # Linux 32bit linux64 # Linux 64bit linux # Linux 64bit مع 32bit ليعمل على أنظمة التشغيل الثلاث سنبنيه لـlinux ، osx64 و win32، اتّجه إلى مجلد التطبيق ونفّذ: nwbuild -p linux,osx64,win32 ./سيعمل أولًا على تحميل ملفات البناء لأنظمة التشغيل من ثم بناء الملفات التنفيذية، ستلاحظ أن متوسط الحجم 50 ميغابايت للملفّ الواحد بسبب تضمين المتصفحات والملفات التشغيلية. التاليسيكون من الرائع تعلم react لبناء تطبيقات سطح مكتب رائعة باستخدام nw مع react. مصادرnw windownw Appnw javascript contextsnw buildهوامش1 - كروميوم (Chromium) هو متصفح ويب مفتوح المصدر، يأخذ متصفح Google كروم الكود المصدري منه. المتصفحان يشتركان في أغلبية الشِفرة البرمجية والميزات، وإن كانت هناك بعض الاختلافات الطفيفة في ملامح كلا منهما وفي تراخيص الأستخدام أيضا. المصدر: ويكيبيديا.
  5. لم تعد الكثير من التطبيقات التي تعمل على الأجهزة المحمولة، مع تقدم تقنيات مثل التخزين المحلّي Local storage على المتصفحات، تحتاج إلى الاستخدام الكثيف لقواعد البيانات؛ مع بقاء الحاجة للاتصال بخادوم بعيد يخزّن ويحدّث بيانات ضرورية مثل معلومات المستخدم، نتائج مسابقة أو غيرها من البيانات التي لا يمكن تخزينها على العميل. تأتي منصات خدمات النهاية الخلفية للأجهزة المحمولة Mobile Backend as a Service لحل هذا الإشكال: تخزين بيانات على الخادوم لتوفيرها للأجهزة العميلة بأقل تكلفة. Parse التي تمتلكها فيس بوك هي إحدى هذه المنصات. أعلنت فيس بوك في شهر يناير 2016 عن إغلاق المنصة مع فتح مصدر النهاية الخلفية ونشرها باسم Parse server ليستمر تطويرها ويمكن تثبيتها في أي بيئة تشغّل Node.js و MongoDB دون الاعتماد على منصة الشركة؛ على أن تتوقف المنصة التابعة للشركة في شهر يناير 2017. يقدّم هذا الدليل تفاصيل تثبيت Parse server على خادوم أوبنتو 14.04؛ ويتوجّه ليكون مدخلا لتهجير التطبيقات من Parse أو لاستخدام النهاية الخلفية التي يوفرها في تطبيقات جديدة. المتطلبات سنفترض أن لديك خادوم أوبنتو 14.04 وحساب مستخدم بصلاحيات إدارية، غير المستخدم الجذر root. تمكن مراجعة درس الإعداد الابتدائي لخادوم أوبنتو 14.04 لإعدادات نظام التشغيل. يتطلّب الدرس كذلك تثبيت MongoDB. تأكد من إعداد المتطلبات ثم عد لهذا الدليل واتّبع الخطوات التالية. الخطوة الأولى: تثبيت Node.js وأدوات التطوير ابدأ بالانتقال إلى مجلد المستخدم الشخصي: cd ~ سنستخدم مستودع Apt الذي توفره NodeSource عن طريق سكربت تثبيت النسخة المستقرة الأخيرة من Node.js (الإصدار 5.5.0 أثناء كتابة هذا الدليل). نزّل السكربت بالأمر التالي: curl -sL https://deb.nodesource.com/setup_5.x -o nodesource_setup.sh يمكنك، إن أردت، رؤية محتوى السكربت باستخدام nanoأو أي محرّر نصوص آخر: nano ./nodesource_setup.sh نفذ السكربت بصلاحيات إدارية مع استخدام خيار E- لإخبار sudo بالحفاظ على متغيرات النظام Environment variables الخاصّة بالمستخدم: sudo -E bash ./nodesource_setup.sh تُضاف مستودعات NodeSource إلى النظام بعد انتهاء السكربت، ويمكننا بالتالي استخدام apt-get لتثبيت حزمة nodejs. سنثبت حزمة التعريف build-essential التي تتيح مجموعة من أدوات التطوير التي يمكن أن تكون مفيدة لنا في ما بعد، إضافة إلى نظام التحكّم في النسخ Git لنستخدمه في تنزيل المشروعات من GitHub: sudo apt-get install -y nodejs build-essential git الخطوة الثانية: تثبيت تطبيق Parse Server تجريبي صُمّم Parse Server للعمل بالتزامن مع Express، وهو إطار عمل Node.js شائع الاستخدام لتطبيقات الويب، يسمح بتركيب عناصر البرمجيات الوسيطة Middleware المستجيبة لتعريف واجهة تطبيقات برمجية API على مسار محدَّد. يحوي مستودع parse-server-example على GitHub مثالا لتطبيق يتبع هذا النمط في تصميم البرامج. انسخ المستودع باستخدام git على النحو التالي: git clone https://github.com/ParsePlatform/parse-server-example.git ادخل إلى مجلد parse-server-example الذي نسخته للتو: cd ~/parse-server-example ثم استخدم npm لتثبيت الاعتماديات بما فيها parse-server في المجلد الحالي: npm install سيعثُر npm على جميع الوحدات Modules المطلوبة لـ parse-server ثم يخزّنها على المسار parse-server-example/node_modules/~. الخطوة الثالثة: اختبار التطبيق التجريبي استخدم أمر npm لبدء تشغيل الخدمة. يُنفَّذ الأمر المعرَّف في خاصية start من ملف package.json؛ أي في هذه الحالة node index.js: npm start مخرجات الأمر: > parse-server-example@1.0.0 start /home/sammy/parse-server-example > node index.js DATABASE_URI not specified, falling back to localhost. parse-server-example running on port 1337. يمكن إنهاء تشغيل التطبيق في أي وقت بالضغط على الزرين Ctrl وC. يمرّر تطبيق Express المعرَّف في index.js طلبات HTTP إلى وحدة parse-server التي تتواصل مع قاعدة بيانات MongoDB وتطلُب تنفيذ الدوال المعرَّفة في الملف parse-server-example/cloud/main.js/~. نقطة النهاية Endpoint المبدئية لواجهة تطبيقات Parse Server في هذا المثال هي: http://your_server_IP/parse يمكن استخدام أمر curl في سطر أوامر آخر، أثناء عمل التطبيق، لتجربة نقطة النهاية. تأكد أولا من تسجيل دخولك إلى الخادوم إذ أن هذه الأوامر تستدعي المضيف المحلّي localhost بدلا من عنوان IP آخر. أنشئ تسجيلة Record بإرسال طلب POST مع ترويسة X-Parse-Application-Id لتحديد التطبيق، إضافة لبيانات أخرى بصيغة JSON: curl -X POST \ -H "X-Parse-Application-Id: myAppId" \ -H "Content-Type: application/json" \ -d '{"score":1337,"playerName":"Sammy","cheatMode":false}' \ http://localhost:1337/parse/classes/GameScore مخرجات الأمر: {"objectId":"fu7t4oWLuW","createdAt":"2016-02-02T18:43:00.659Z"} تُخزَّن البيانات المرسَلة في قاعدة بيانات MongoDB ويمكن إيجادها بإرسال طلب GET باستخدام curl مرة أخرى: curl -H "X-Parse-Application-Id: myAppId" http://localhost:1337/parse/classes/GameScore مخرجات الأمر: {"results":[{"objectId":"GWuEydYCcd","score":1337,"playerName":"Sammy","cheatMode":false,"updatedAt":"2016-02-02T04:04:29.497Z","createdAt":"2016-02-02T04:04:29.497Z"}]} استدع الدالة hello المعرَّفة في الملف parse-server-example/cloud/main.js/~ باستخدام واجهة التطبيقات البرمجية: curl -X POST \ -H "X-Parse-Application-Id: myAppId" \ -H "Content-Type: application/json" \ -d '{}' \ http://localhost:1337/parse/functions/hello مخرجات الأمر: {"result":"Hi"} الخطوة الرابعة: إعدادات التطبيق التجريبي اضغط على Ctrl وC في نافذة سطر الأوامر الأولى لإيقاف تطبيق Parse Server. يمكن إعداد التطبيق باستخدام ستة متغيرات نظام يبينها الجدول التالي. المتغير الوصف DATABASE_URI مسار الاتصال بقاعدة بيانات MongoDB، مثلاmongodb://localhost:27017/dev CLOUD_CODE_MAIN مسار إلى ملف يحوي الشفرة المصدرية لدوال Cloud Code الخاصّة بـParse APP_ID سلسلة محارف لتعريف التطبيق، مثلا myAppId. MASTER_KEY مفتاح سري رئيس يمكّن من تجاوز جميع آليات الأمان في التطبيق. PARSE_MOUNT المسار الذي توجد عليه واجهة تطبيقات Parse Server PORT المنفذ الذي ينصت عليه التطبيق، مثلا 1337 ننفذ أمر export قبل تشغيل التطبيق لإعداد متغيرات النظام، مثلا: export APP_ID=fooApp يمكننا إنشاء نسخة أسهل من التطبيق لأخذ صورة عن آلية العمل. أنشئ ملف سكربت جديدا: nano my_app.js ثم ألصق الشفرة التالية مع تغيير القيم بما يناسب: var express = require('express'); var ParseServer = require('parse-server').ParseServer; // إعداد واجهة التطبيقات البرمجية var api = new ParseServer({ databaseURI: 'mongodb://localhost:27017/dev', cloud: __dirname + '/cloud/main.js', appId: 'myOtherAppId', masterKey: 'myMasterKey' }); var app = express(); // ضبط مسار التطبيق app.use('/myparseapp', api); // الإنصات للاتصالات القادمة على المنفذ 9999 var port = 9999; app.listen(port, function() { console.log('parse-server-example running on port ' + port + '.'); }); احفظ الملف ثم نفذ الأمر التالي بعد إغلاقه: node my_app.js مخرجات الأمر: parse-server-example running on port 9999. يمكنك في أي وقت إيقاف التطبيق بالضغط على Ctrl وC. يعمل my_app.js بنفس الطريقة التي يعمل بها index.js تقريبا، مع فرق أنه ينصت على المنفذ 9999 مع تركيب Parse Server على المسار myparseapp/ بحيث يصبح مسار نقطة النهاية كما يلي: http://yourserverIP:9999/myparseapp يمكن تجربتها بـاستخدام curl على النحو التالي: curl -H "X-Parse-Application-Id: myOtherAppId" http://localhost:9999/myparseapp/classes/GameScore خاتمة قدّمنا في هذا الدرس أساسيات تشغيل تطبيق Node.js مثل Parse Server على أوبنتو. يتطلّب تهجير تطبيق من Parse حذرا أكبر وربما تعديلات على الشفرة البرمجية ويجب أن يُستعدّ له جيدا من ناحية تهيئة البنية التحتية. ترجمة -وبتصرّف- للمقال How To Run Parse Server on Ubuntu 14.04 لصاحبه Brennen Bearnes.