جدول المحتويات:

كيفية إنشاء موقع على Raspberry Pi باستخدام Node.js و Express و MongoDB الجزء 1: 6 خطوات
كيفية إنشاء موقع على Raspberry Pi باستخدام Node.js و Express و MongoDB الجزء 1: 6 خطوات

فيديو: كيفية إنشاء موقع على Raspberry Pi باستخدام Node.js و Express و MongoDB الجزء 1: 6 خطوات

فيديو: كيفية إنشاء موقع على Raspberry Pi باستخدام Node.js و Express و MongoDB الجزء 1: 6 خطوات
فيديو: Practical Course For Docker : دورة تطبيقية لتعلم دوكر - part 7 building from Dockerfile (node app) 2024, يوليو
Anonim
كيفية إنشاء موقع ويب على Raspberry Pi باستخدام Node.js و Express و MongoDB … الجزء الأول
كيفية إنشاء موقع ويب على Raspberry Pi باستخدام Node.js و Express و MongoDB … الجزء الأول

مرحبًا بك في الجزء 1 من البرنامج التعليمي لتطبيق الويب node.js الخاص بي. سيتناول الجزء الأول البرامج الضرورية المستخدمة لتطوير تطبيق node.js ، وكيفية استخدام إعادة توجيه المنفذ ، وكيفية إنشاء تطبيق باستخدام Express ، وكيفية تشغيل التطبيق الخاص بك. سيتناول الجزء الثاني من هذا البرنامج التعليمي كل التعليمات البرمجية وهيكل تطبيق الويب الكامل الخاص بي. إذا كنت مستعدًا لذلك قم بزيارته هنا.

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

هذه جولة حول كيفية استخدام Node.js و Express و Mongodb. لإنشاء صفحة ويب.

رمز كل هذا هنا.

تسمى صفحة الويب الخاصة بي الإنترنت. يرجى زيارة إذا كنت تريد نظرة أكثر تفاعلية على موقع شخصي.

لقد بدأت هذه الصفحة للحصول على حضور شخصي على الإنترنت من خلال المشاريع التي قمت بها ، مع روابط لمشاريع التعليمات الخاصة بي لمزيد من التفاصيل.

هذا الموقع مستضاف في منزلي على pi zero W.

الخطوة 1: الأشياء التي تحتاجها

أشياء تحتاجها
أشياء تحتاجها

1 مرة. لا أستطيع أن أؤكد أن تطوير موقع ، وفهم الأعمال الداخلية حقًا ، هي عملية طويلة الأمد. لديّ درجة علمية في الهندسة الكهربائية مع تركيز في الإلكترونيات الدقيقة ، وحب للترميز ، وما زال هذا الأمر يستغرق شهورًا لإنجازه.

سيكون هذا البرنامج التعليمي لبنة بناء جيدة ، ولكن يرجى قراءة المزيد من الوثائق على الإنترنت لفهم كل قطعة.

2. Raspberry Pi - أي نموذج سيفي بالغرض. أيضا أي كمبيوتر يعمل بنظام لينكس سيفعل ذلك. في الواقع ، أي كمبيوتر سيفعل ذلك ، فأنا أخوض في مزيد من التفاصيل حول كيفية تشغيله على pi.

3. اتصال الإنترنت - إذا كنت تخطط لاستضافة هذا في العالم. يلزم وجود جهاز توجيه أو محول شبكة لتكوين إعادة توجيه المنفذ.

4. البرامج - ستعمل أي منصة تشفير ، Sublime ، Webstorm ، Notepadd ++ ، Visual Studios ، أو أي شيء آخر. لقد استخدمت بشكل رئيسي Webstorm أو Sublime.

الخطوة 2: إعادة توجيه المنفذ على Raspberry Pi الخاص بك

ميناء الشحن على Raspberry Pi الخاص بك
ميناء الشحن على Raspberry Pi الخاص بك
ميناء الشحن على Raspberry Pi الخاص بك
ميناء الشحن على Raspberry Pi الخاص بك

لذا ، سأفترض أنه لديك بالفعل إعداد raspberry pi. إن لم يكن تحقق من هذا البرنامج التعليمي السهل هنا.

يقوم باي بتشغيل Jessie lite ، وكلها محطة. الفائدة من ذلك هي أنه ليس لدي الكثير من العمليات التي تعمل في الخلفية والتي قد تجعل خادمي يعمل بشكل أبطأ مع حركة مرور عالية. دعني أوضح الآن أن هذا البرنامج التعليمي مخصص للمواقع ذات حركة المرور المنخفضة. أي موقع به حركة مرور عالية سيكون بطيئًا على pi وقد يتسبب في تعطل الخادم الخاص بك.

ميناء الشحن

مع إعداد pi ، سيتعين عليك تمكين إعادة توجيه المنفذ على جهاز التوجيه أو المحول. للقيام بذلك ، ابحث عن إعدادات إعادة توجيه المنفذ في جهاز التوجيه الخاص بك. يختلف كل جهاز توجيه ، فأنا أعرض واجهة المستخدم الرسومية Linksys Velop هنا.

تم تكوين موقعي على المنفذ 3000 ، ويمكن تغيير ذلك في الكود المصدري في app.js أو ملف www.

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

اتبع الصور لإعداد إعادة توجيه المنفذ.

خدمة DNS

ستحتاج إلى خدمة تربط عنوان IP الخاص بك باسم عنوان الويب. ستتمكن من كتابة عنوان IP العام الخاص بجهاز التوجيه متبوعًا برقم المنفذ للوصول إلى موقعك. هذا ، مع ذلك ، صعب خاصة إذا تغير عنوان IP العالمي الخاص بك. ما تفعله خدمة DNS هو تتبع هذه التغييرات وتحديثها بحيث يتم ربط اسم الويب الخاص بك و IP. اخترت استخدام خدمة مجانية من خلال no-ip. اهلا وسهلا بك لدفع ثمن أي شيء تريده. هذه مجرد طريقة مجانية أعرفها.

www.noip.com/

الخطوة 3: تثبيت البرنامج المطلوب على Pi

تثبيت البرنامج المطلوب على Pi
تثبيت البرنامج المطلوب على Pi
تثبيت البرنامج المطلوب على Pi
تثبيت البرنامج المطلوب على Pi
تثبيت البرنامج المطلوب على Pi
تثبيت البرنامج المطلوب على Pi
تثبيت البرنامج المطلوب على Pi
تثبيت البرنامج المطلوب على Pi

إذا قمت بتنزيل كود GitHub الخاص بي ، فلن تحتاج إلى القيام بأي شيء باستثناء تشغيل أمر بدء npm بسيط لتشغيل الموقع. ومع ذلك ، نظرًا لأن هذا برنامج تعليمي متعمق ، فسوف أشرح كيفية تثبيت جميع البرامج والحزم المطلوبة.

أثناء وجودك على كمبيوتر pi أو linux (ستكون هناك أوامر مختلفة لاستخدام windows) ، قم بتشغيل الأوامر التالية.

لقد فصلت هذه الخطوات كخطوات فردية لتسهيل متابعتها.

1. قم بتثبيت node.js و npm

Node.js هو في الأساس نص جافا الذي يقوم بإنشاء الخادم. NPM هو مدير حزم العقدة ويتعامل مع جميع الأدوات المتوسطة المطلوبة مع node.js.

قم بتشغيل الأوامر التالية على جهاز لينكس أو ماك للتثبيت.

curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash sudo apt-get install -y nodejs

للتنزيل على windows ، ما عليك سوى استخدام ملف exe الموجود هنا.

هذا الرابط مخصص لمساعدة Linux إن لم يكن على raspberry pi.

2. تثبيت MongoDB

MongoDB هو مجرد قاعدة بيانات. أنا استخدم هذا لجزء تسجيل الدخول وعداد حركة المرور من صفحة الويب الخاصة بي.

قم بتشغيل الأوامر التالية على جهاز لينكس أو ماك للتثبيت.

sudo apt-key adv --keyserver hkp: //keyserver.ubuntu.com: 80 --recv 0C49F3730359A14518585931BC711F9BA15703C6

صدى "deb https://repo.mongodb.org/apt/debian jessie / mongodb-org / 3.4 main" | sudo tee /etc/apt/sources.list.d/mongodb-org-3.4.list

sudo apt-get update

sudo apt-get install -y mongodb-org

للتنزيل على windows ، ما عليك سوى استخدام ملف exe الموجود هنا.

هذا الرابط مخصص لمساعدة Linux إن لم يكن على raspberry pi.

3. تثبيت Grunt

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

بالنسبة لنظام التشغيل windows أو mac أو linux ، استخدم الأمر التالي.

npm تثبيت -g grunt-cli

4. تثبيت Express

Express هي طريقة سهلة لاستخدام إطار عمل node js. سنقوم بتثبيت مولد سريع. يؤدي هذا إلى إنشاء إطار عمل سهل الاستخدام لتطبيق الويب.

بالنسبة لنظام التشغيل windows أو mac أو linux ، استخدم الأمر التالي.

npm تثبيت المولد السريع -g

الخطوة 4: إنشاء تطبيق Express Node.js

أنشئ تطبيق Express Node.js
أنشئ تطبيق Express Node.js
أنشئ تطبيق Express Node.js
أنشئ تطبيق Express Node.js

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

قم بتشغيل الأوامر التالية على جهاز Linux أو mac لتغيير الدليل.

sudo cd / home / pi / myapp

للنوافذ:

cd C: / Users / pi / Desktop / myapp

استخدم المولد السريع لإنشاء إطار عمل node js المطلوب.

التعبير عن اسم myapp

سيؤدي هذا إلى إنشاء مشروع node.js صريح ، يمكنك تحرير ميزاته خلال هذه الخطوة من خلال البحث عن أوامر مختلفة كما هو موضح أدناه باستخدام الأمر -h. أو يمكنك تعديل النموذج الذي تم إنشاؤه يدويًا ، مثلما فعلت. سأناقش هذا بمزيد من التفصيل في الجزء 2. يمكنك إضافة متغيرات أخرى إلى هذا الرمز لتغيير الإعدادات في تطبيقك مثل استخدام html ، ومقاود ، و jade ، وغيرها. لهذا قم بتشغيل الأمر:

صريح-ح

استمر في إعداد تطبيق الويب node.js الخاص بك عن طريق تشغيل الأوامر التالية:

اسم القرص المضغوط

تثبيت npm

يقوم هذا بتثبيت جميع الحزم المطلوبة التي سيحتاجها تطبيق الويب node.js الخاص بك إلى التشغيل والمزيد من الحزم المتاحة للاستخدام.

في هذا المثال ، سيكون مسار الملف للتطبيق:

/ home / pi / myapp / nameofmyapp

هذا لأن المولد السريع ينشئ ملفًا بناءً على السلسلة التي تضعها بعده. إذا كنت بالفعل في الدليل المطلوب ، فما عليك سوى استخدام Express.

الخطوة 5: قم بتشغيل تطبيق الويب الخاص بك

قم بتشغيل تطبيق الويب الخاص بك
قم بتشغيل تطبيق الويب الخاص بك
قم بتشغيل تطبيق الويب الخاص بك
قم بتشغيل تطبيق الويب الخاص بك

لتشغيل تطبيق الويب node.js الخاص بك ، قم بتشغيل الأمر:

بدء npm

لجعله أكثر كفاءة أثناء الترميز بحيث يتم تحديث تطبيقنا تلقائيًا بعد إجراء التغييرات ، سنقوم بتثبيت nodemon.

npm install -g nodemon

هنا حيث تخبرك معظم البرامج التعليمية أن تستمتع بالبناء وتتركك لتكتشف العمل الشاق في الساق. في الخطوات التالية سوف أطلعك على كيفية إنشاء طلبي.

الخطوة 6: الائتمان

ليست خطوة حقًا ولكني أريد سرد مصادري وإلهامي لهذا البرنامج التعليمي.

تمت كتابة Github ReadMe هذا بواسطة صديق جيد أثناء العمل في مشروع التصميم الخاص بنا وقد قدم الكثير من الإلهام لكيفية إنشاء موقعي.

github.com/SDP-DT04/Web-Application/blob/m …

كان هذا البرنامج التعليمي أداة مفيدة في عملية إنشاء تطبيق ويب.

kroltech.com/2013/12/29/boilerplate-web-app…

لمزيد من المعلومات حول موقع node.js ، قم بزيارة الجزء الثاني الخاص بي.

موصى به: