دروس النيزك: بناء تطبيقات الويب في الوقت الحقيقي باستخدام Meteor

نشرت: 2022-03-11

Meteor هو إطار عمل JavaScript كامل المكدس لتطبيقات الويب والجوال. لقد كان موجودًا منذ عام 2011 ، واكتسب سمعة قوية بين مطوري Meteor لكونه حلاً مثاليًا وسهل الاستخدام للنماذج الأولية السريعة. ومع ذلك ، أدرك المطورون مؤخرًا أن Meteor لم يعد مخصصًا للنماذج الأولية فقط: إنه جاهز للاستخدام في التطوير التجاري. مع ترسانة الحزم التي يوفرها ، الأساس الصلب mongoDB / node.js الذي يعتمد عليه ، ومرونة التشفير التي يوفرها ؛ يجعل Meteor من السهل إنشاء تطبيقات ويب قوية وآمنة في الوقت الفعلي ، والتعامل مع كل شيء من تطبيق المتصفح إلى الخادم أو قاعدة البيانات.

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

لماذا نستخدم Meteor؟ الإجابة المختصرة هي ، "لأن النيزك ممتع". يجعل تطوير تطبيقات الويب أمرًا بسيطًا. إنه سهل التعلم ، ويتيح لك التركيز على وظائف التطبيق أكثر من التركيز على أساسيات مزامنة البيانات وعرض الصفحات.

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

على الرغم من أنه إطار عمل جديد نسبيًا ، إلا أن الكثير من الشركات الناشئة تقوم بالفعل ببناء تطبيقات Meteor ، بما في ذلك خدمات واسعة النطاق نسبيًا مثل Respondly و Telescope.

تركيب النيزك والسقالات

تثبيت Meteor على أنظمة * nix هو سطر واحد:

 curl https://install.meteor.com/ | sh

على الرغم من عدم وجود دعم رسمي حتى الآن ، إلا أن المعاينة الخاصة بهم لنظام التشغيل Windows تأتي بشكل جيد. تشير الشائعات إلى أن دعم Windows سيشحن بـ 1.1 ، من المقرر إصداره في أبريل أو مايو من عام 2015. كما قد تتوقع من إطار عمل ذكي مثل Meteor ، يتطلب تمهيد أحد التطبيقات استدعاء سطر أوامر واحد:

 meteor create book-list

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

 meteor

افتح http://localhost:3000 في متصفح الويب الخاص بك ، وسترى ما يلي:

يمكنك أيضًا التحقق من "الإصدار 0" من تطبيقنا على MeteorPad ، وهو موقع يشبه JSFiddle for Meteor: Book List: Default App

يخزن Meteor عروضه في ملفات HTML. إذا فتحنا "book-list.html" ، فسنرى:

 <head> <title>book-list</title> </head> <body> <h1>Welcome to Meteor!</h1> {{> hello}} </body> <template name="hello"> <button>Click Me</button> <p>You've pressed the button {{counter}} times.</p> </template>

يستخدم Meteor محرك "Blaze" ، وهو محرك قوالب ، لتقديم الاستجابات من ملفات HTML هذه. يجب أن تكون الأقواس المزدوجة مألوفة لأي شخص استخدم Handlebars.js (أو محركات قوالب أخرى مماثلة) ، وهي تؤدي وظيفة مماثلة هنا. يفحص Blaze التعبيرات الموجودة داخل كل زوج من الأقواس المزدوجة ويستبدل كل منها بالقيمة التي تنتجها هذه التعبيرات.

يحتوي هذا المثال البسيط على تعبيرين مزدوجين فقط:

الأول ، "{{> hello}}" ، يخبر Blaze بتضمين نموذج يسمى "hello". يتم تحديد هذا القالب في الجزء السفلي من الملف ، في قسم <اسم القالب = ”hello”>.
الثانية ، "{{counter}}" ، أكثر تعقيدًا بعض الشيء. لمعرفة مصدر هذه القيمة "العداد" نحتاج إلى فتح "book-list.js":

 if (Meteor.isClient) { // counter starts at 0 Session.setDefault('counter', 0); Template.hello.helpers({ counter: function () { return Session.get('counter'); } }); Template.hello.events({ 'click button': function () { // increment the counter when button is clicked Session.set('counter', Session.get('counter') + 1); } }); } if (Meteor.isServer) { Meteor.startup(function () { // code to run on server at startup }); }

بعض الأشياء تتطلب الشرح هنا. أولاً ، التقسيم إلى "if (Meteor.isClient)" و "if (Meteor.isServer)". تذكر أن النيزك هو إطار عمل مكدس كامل ، لذلك يتم تشغيل الكود الذي تكتبه على كل من الخادم والعميل. تسمح لنا هذه الشروط بالحد من ذلك: يتم تشغيل الكتلة الأولى على العميل فقط ، بينما تعمل الكتلة الثانية على الخادم فقط.

ثانيًا ، هناك استدعاء "Session.setDefault" - يؤدي هذا إلى تهيئة متغير جلسة يسمى "عداد" في المتصفح. تعمل متغيرات الجلسة قليلاً مثل الكرات الأرضية في Meteor (للخير والشر). ومع ذلك ، لا يظهر متغير الجلسة هذا مباشرة في “{{counter}}”. بدلاً من ذلك ، فإن تعبير "العداد" هذا هو "المساعد" ، وهو التعبير المحدد في قسم "Template.hello.helpers". هذا المساعد ببساطة يأخذ قيمة متغير الجلسة ويعيدها.

لاحظ أن المساعد "تفاعلي". هذا يعني أنه في أي وقت يتغير متغير الجلسة ، يقوم Meteor تلقائيًا بإعادة تشغيل هذه الوظيفة المساعدة التي تشير إليه ، ويقوم Blaze تلقائيًا بتحديث المتصفح بالمحتوى الجديد.

يراقب رمز العميل أيضًا الأحداث ، عبر "Template.hello.events". نحدد الحدث حسب نوع الحدث والمحدد (في هذه الحالة ، "انقر فوق الزر") ، ثم نخبر Meteor بما يجب أن يفعله هذا الحدث. في هذه الحالة ، يتم زيادة متغير الجلسة ، والذي يعيد تشغيل وظيفة المساعد ويعيد بدوره عرض المحتوى.

عرض البيانات الثابتة

كل هذا جيد وجيد ، لكنه ليس تطبيق Meteor الذي نريده في هذا البرنامج التعليمي.

لنبدأ في تعديل هذا التطبيق - سنعرض قائمة ثابتة من الكتب المشفرة. في الوقت الحالي ، سنخبئ قائمة الكتب في متغير جلسة. في كود "isClient" ، سنستخدم "Template.hello.rendered" لتعيين متغير الجلسة بمجرد تقديم قالب bookList:

 Template.hello.rendered = function() { Session.setDefault('books', [ {title: "To Kill a Mockingbird", author: "Harper Lee"}, {title: "1984", author: "George Orwell"}, {title: "The Lord of the Rings", author: "JRR Tolkien"}, {title: "The Catcher in the Rye", author: "JD Salinger"}, {title: "The Great Gatsby", author: "F. Scott Fitzgerald"} ]); };

بعد ذلك ، نعيد متغير الجلسة هذا بمساعد جديد في نموذج "hello":

 Template.hello.helpers({ books: function () { return Session.get('books'); } });

وعرضه على الشاشة عبر الاستيفاء المتغير في نموذج "hello":

 <template name="hello"> <h3>Here are your books:</h3> {{ books }} </template>

يمكنك التحقق من هذا الرمز أثناء العمل على Meteorpad: Book-List: Show Session Variable

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

حتى الآن ، هذا ما حصلنا عليه:

عفوًا ، نحن نعرض البيانات بشكل خاطئ. تحصل Blaze على نقاط للدقة هنا (لماذا نعم ، إنها مجموعة من الكائنات) ، لكن علينا أن نكون أكثر ذكاءً إذا أردنا عرض قائمة الكتب لدينا بطريقة مفيدة. لحسن الحظ ، يجعل Blaze من السهل جدًا التعامل مع مصفوفات البيانات باستخدام التوجيه "#each":

 <h3>Here are your books:</h3> <UL> {{#each books}} <LI><i>{{title}}</i> by {{author}}</LI> {{/each}} </UL>

في Blaze ، يعمل "#each" إلى حد ما مثل توجيه Angular "ng-تكرار" - فهو يتكرر عبر بنية المصفوفة ، ويضبط السياق الحالي على الكائن الحالي في المصفوفة ، ويعرض HTML بشكل متكرر داخل "{{# كل كل شيء" ...}} ". هذا ما تبدو عليه قائمة الكتب لدينا الآن:

على MeteorPad: إظهار متغير الجلسة بشكل صحيح

بعض عمليات التنظيف

قبل المضي قدمًا ، دعنا ننظف الكود الخاص بنا قليلاً.

يتيح Meteor مهلة هائلة في كيفية تنظيم قاعدة البيانات الخاصة بك. كما سترى ، لا يوجد سوى عدد قليل من القواعد الصارمة: أينما وضعت HTML و JavaScript ، ستجد Meteor ذلك. هذه المرونة رائعة ، لكنها تعني أنه من واجبك تنظيم الكود الخاص بك بطريقة منطقية ، لذا فأنت لست عالقًا في الحفاظ على فوضى عملاقة غير منظمة.

أولاً ، دعنا نعيد تسمية نموذج "hello" هذا إلى شيء ذي معنى ، مثل "bookList" ، واستبدل نموذج HTML المعياري بهذا:

 <head> <title>book-list</title> </head> <body> {{> bookList}} </body> <template name="bookList"> <h3>Here are some books:</h3> <UL> {{#each books}} <LI><i>{{title}}</i> by {{author}}</LI> {{/each}} </UL> </template>

ثانيًا ، دعونا نقسم أجزاء "العميل" و "الخادم" إلى ملفات منفصلة. في دليل التطبيق الخاص بنا ، سنقوم بإعداد دليل فرعي "عميل" ودليل فرعي "خادم" - سيعرف Meteor تلقائيًا تشغيل ملفات "/ client /" على العميل ، وتشغيل ملفات "/ server /" على الخادم. إنها طريقة جيدة لوضع كود القالب في ملف JavaScript مسمى على اسم القالب ، لذلك دعونا نضع كود العميل الخاص بنا في “client / bookList.js”. يمكننا وضع رمز بدء تشغيل الخادم الفارغ حاليًا في "server / startup.js". أخيرًا ، دعنا نخرج "

لاحظ أنه حتى بعد كل هذا التبديل ، سيظل Meteor يعثر تلقائيًا على جميع ملفات HTML و JavaScript الخاصة بنا. طالما أن الملف موجود في مكان ما في “/ client /” ، فإن Meteor سيعرف كيفية تشغيله على العميل. طالما أن الملف موجود في مكان ما في “/ server /” ، فإن النيزك سيعرف لتشغيله على الخادم. مرة أخرى ، الأمر متروك للمطور للحفاظ على تنظيم الأشياء.

لذا يجب أن يبدو الكود الخاص بنا الآن كما يلي:

book-list.html:

 <head> <title>book-list</title> </head> <body> {{> bookList}} </body>

العميل / bookList.html:

 <template name="bookList"> <h3>Here are some books:</h3> <UL> {{#each books}} <LI><i>{{title}}</i> by {{author}}</LI> {{/each}} </UL> </template>

العميل / bookList.js:

 Template.bookList.rendered = function() { Session.setDefault('books', [ {title: "To Kill a Mockingbird", author: "Harper Lee"}, {title: "1984", author: "George Orwell"}, {title: "The Lord of the Rings", author: "JRR Tolkien"}, {title: "The Catcher in the Rye", author: "JD Salinger"}, {title: "The Great Gatsby", author: "F. Scott Fitzgerald"} ]); }; Template.bookList.helpers({ books: function () { return Session.get('books'); } });

الخادم / startup.js:

 Meteor.startup(function () { // code to run on server at startup }); ~~~ Check it out on MeteorPad: [Initial Code Cleanup](http://meteorpad.com/pad/MwvMcsBAzfbWwEXp3/Book-List:%20Initial%20Code%20Cleanup) Verify that everything's running correctly by checking the browser window and then we're good to move on to the next step. ## Using the Database in Meteor The Meteor server runs on top of a MongoDB database. In this section of our tutorial, we will move the static list of books out of the session variable and into that database. First, delete the Template.bookList.rendered code, so that we're no longer putting stuff into that session variable. Next, we should add that list of books to the database as fixture data when the server initializes. As you'd expect for MongoDB, Meteor stores data in "collections". So, we'll create a new collection for our books. To keep things simple we will name it "books". It turns out that both the client and the server will want to know about this collection, so we'll put this code in a new subfolder: "/lib/". Meteor knows automatically that files in "/lib/" run on the client and the server. We'll create a file called "lib/collections/books.js", and give it just one line of code: ~~~ js Books = new Meteor.Collection("books");

في نافذة المتصفح المشار إليها على العنوان http: // localhost: 3000 ، انتقل إلى وحدة تحكم المطور وتحقق من قيمة "الكتب". يجب أن تكون الآن مجموعة مونجو! جرب تشغيل "Books.find (). fetch ()" ، وستحصل على مصفوفة فارغة - وهذا أمر منطقي ، لأننا لم نقم بإضافة أي كتب إليها بعد. يمكننا محاولة إضافة عناصر إليه في وحدة التحكم:

 Books.insert({title: "To Kill a Mockingbird", author: "Harper Lee"})

إن إضافة أشياء في وحدة التحكم أمر شاق إلى حد ما. بدلاً من ذلك ، سنقوم بإعداد الأشياء بحيث عند بدء تشغيل الخادم ، نقوم تلقائيًا بإدراج بيانات التثبيت في قاعدة البيانات. لنعد إلى "server / startup.js" ونضيف هذا:

 Meteor.startup(function () { if (!Books.findOne()) { Books.insert({title: "To Kill a Mockingbird", author: "Harper Lee"}); Books.insert({title: "1984", author: "George Orwell"}); Books.insert({title: "The Lord of the Rings", author: "JRR Tolkien"}); Books.insert({title: "The Catcher in the Rye", author: "JD Salinger"}); Books.insert({title: "The Great Gatsby", author: "F. Scott Fitzgerald"}); } });

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

 meteor reset

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

الآن سنبدأ الخادم مرة أخرى:

 meteor

عند بدء التشغيل ، سيقوم Meteor بتشغيل روتين بدء التشغيل ، ويرى أن قاعدة البيانات فارغة ، ويضيف بيانات المباراة. في هذه المرحلة ، إذا ذهبنا إلى وحدة التحكم وكتبنا "Books.find (). fetch ()" ، نحصل على الكتب الخمسة التي كانت لدينا من قبل.

كل ما تبقى لهذه الخطوة هو عرض الكتب على الشاشة. لحسن الحظ ، هذا أمر بسيط مثل استبدال "return Session.get (" books ") ؛" بالمساعد التالي في "كتب":

 return Books.find();

وقد عدنا إلى العمل! يعرض التطبيق الآن البيانات من مؤشر قاعدة البيانات ، بدلاً من متغير الجلسة.

تحقق من ذلك على MeteorPad: الانتقال إلى قاعدة البيانات

مخاوف أمنية

سأقدم هذا بالقول: "لا تفعل هذا".

ماذا تعتقد أنه سيحدث إذا قام شخص ما بتشغيل هذا التطبيق في متصفحه ، وذهب إلى وحدة التحكم ، وكتب في "Books.remove ({})"؟

الجواب: سوف يقضون على المجموعة.

لذا ، فهذه مشكلة أمنية كبيرة جدًا - يتمتع مستخدمونا بوصول كبير جدًا إلى قاعدة البيانات الخاصة بنا. يمكن لأي عميل الوصول إلى قاعدة البيانات بأكملها. ليس ذلك فحسب ، يمكن لأي عميل إجراء أي تغيير على قاعدة البيانات بأكملها ، بما في ذلك مسح البيانات ".remove ({})".

هذا ليس جيدًا ، لذلك دعونا نصلحه.

يستخدم Meteor ما يسمى "الحزم" لإضافة وظائف. ما هي الوحدات النمطية لـ Node.js ، والأحجار الكريمة لـ Ruby ، تعتبر الحزم ميزات مجمعة لوظائف Meteor. هناك حزم لجميع أنواع الأشياء. لتصفح ما هو متاح ، تحقق من جو.

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

دعونا نزيل هؤلاء. يمكننا القيام بذلك عن طريق تشغيل ما يلي من دليل التطبيق:

 meteor remove autopublish insecure

عند الانتهاء من ذلك ، سترى بيانات قائمة الكتب تختفي من الشاشة (حيث لم يعد بإمكانك الوصول إليها) ، وإذا حاولت إجراء مكالمة "Books.insert" ، فستتلقى الخطأ: "فشل الإدراج : تم الرفض". على MeteorPad: المبالغة الأمنية

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

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

انشر واشترك

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

دعنا نتعامل مع المشكلة الأولى هنا. يوفر Meteor وصولاً آمنًا إلى قاعدة بيانات من خلال جعل الخادم "ينشر" مجموعة فرعية من قاعدة البيانات ، وجعل العميل "يشترك" في هذا المنشور.

أولاً ، لننشئ "/server/publications.js":

 Meteor.publish('books', function() { return Books.find({}); });

وسننشئ "/client/subscriptions.js":

 Meteor.subscribe('books');

تحقق من ذلك على MeteorPad: انشر واشترك

يقوم الخادم "بنشر" مؤشر يمكنه الوصول إلى جميع البيانات ، و "يشترك" العميل به على الطرف الآخر. يستخدم العميل هذا الاشتراك لملء نسخة متطابقة من قاعدة البيانات بكل بيانات المؤشر. عندما نصل إلى "Books.find (). fetch ()" ، نرى كل الأشياء الخمسة ، ونراها معروضة على الشاشة كما كان من قبل.

الفرق الآن هو أنه من السهل حقًا تحديد ما يمكن للعملاء الوصول إليه. حاول تبديل المنشور "find ()" إلى مجموعة فرعية من البيانات:

 Meteor.publish('books', function() { return Books.find({}, {limit:3}); });

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

إضافة كتب جديدة

لقد رأينا كيفية منح العملاء حق الوصول للقراءة إلى قاعدة البيانات بطريقة محدودة وآمنة. الآن ، دعنا نلقي نظرة على المشكلة الثانية: كيف نسمح للمستخدمين بتغيير قاعدة البيانات دون السماح لهم بفعل أي شيء يريدونه؟ أدى التخلص من الحزمة غير الآمنة إلى جعلها غير متاحة للعملاء على الإطلاق - دعنا نحاول السماح بإضافة الكتب مرة أخرى. في النيزك ، نقوم بذلك عن طريق إضافة "طريقة" إلى الخادم. دعنا نضيف طريقة ، طريقة تضيف كتابًا جديدًا ، إلى "/lib/collections/books.js":

 Meteor.methods({ addBook: function(bookData) { var bookID = Books.insert(bookData); return bookID; } });

كما ترى ، يأخذ هذا "bookData" - في هذه الحالة ، هذا كائن مع حقلي "العنوان" و "المؤلف" - ويضيفه إلى قاعدة البيانات. بمجرد إعادة تحميل العميل ، يمكننا استدعاء هذه الطريقة من العميل. يمكنك الذهاب إلى وحدة التحكم وإدخال شيء مثل هذا:

 Meteor.call('addBook', {title: "A Tale of Two Cities", author: "Charles Dickens"})

والمعزوفة! تحصل على كتاب آخر في قائمة الكتب. يعد استخدام وحدة التحكم أمرًا صعبًا بشكل لا يطاق ، لذلك دعونا نمضي قدمًا ونضيف نموذجًا بسيطًا إلى نهاية نموذج "bookList" والذي سيتيح لنا إضافة كتب جديدة:

 <form class="add-book"> Title:<br> <input type="text" name="title"> <br> Author:<br> <input type="text" name="author"> <input type="submit" value="Add Book"> </form>

ويمكننا ربط ذلك بجافا سكريبت باستخدام حالة حدث ، كما فعلنا في تطبيق الاختبار الأصلي:

 Template.bookList.events({ "submit .add-book": function(event) { event.preventDefault(); // this prevents built-in form submission Meteor.call('addBook', {title: event.target.title.value, author: event.target.author.value}) } });

يمكنك أن ترى هذا في العمل على MeteorPad: الطرق

عندما كان لدينا حالة من عدم الأمان والنشر التلقائي ، يمكن للعملاء الوصول إلى قاعدة البيانات بالكامل وتعديلها. الآن مع عدم الأمان والنشر التلقائي ، ولكن مع المنشورات والاشتراكات والأساليب ، يمكن للعملاء الوصول إلى قاعدة البيانات والتفاعل معها بطريقة محكومة.

في ملاحظة جانبية: يمكنك أيضًا معالجة مشكلات الأمان في Meteor باستخدام "قواعد السماح والرفض". يمكنك معرفة المزيد عن هذه وبعض الأسباب التي أفضلها للنهج أعلاه بدلاً من ذلك على موقع Discovermeteor.com.

مصادقة المستخدم

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

انتقل إلى دليل التطبيقات وقم بتثبيت حزمتين:

 meteor add accounts-ui accounts-password

هناك. لقد أضفت للتو نظام تسجيل دخول إلى التطبيق. الآن نحتاج فقط إلى إضافة واجهة مستخدم تسجيل الدخول إلى book-list.html. ضع هذا السطر الفردي في الجزء العلوي من الجسم:

 {{> loginButtons}}

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

لاحظ أنه إذا قمت بالنقر فوق ارتباط تسجيل الدخول ، فسيطلب منك عنوان بريد إلكتروني وكلمة مرور. يمكننا تبديل ذلك إلى نظام تسجيل دخول بسيط لاسم المستخدم / كلمة المرور عن طريق إنشاء "/client/config.js" مع ما يلي فيه:

 Accounts.ui.config({ passwordSignupFields: "USERNAME_ONLY" });

في هذه المرحلة ، يمكنك كتابة "Meteor.userId ()" في وحدة التحكم ، وستعود "فارغة". يمكنك محاولة النقر فوق الارتباط لإنشاء حساب. استدعاء "Meteor.userId ()" يجب الآن إرجاع سلسلة معرف. يمتلك الخادم حق الوصول إلى نفس هذه المعلومات (مثل "this.userId") ، لذلك من التافه جعل طريقة "إضافة كتب" تجبر المستخدم على تسجيل الدخول وتضمين حقل معرف المستخدم:

 Meteor.methods({ addBook: function(bookData) { if (this.userId) { bookData.userID = this.userId; var bookID = Books.insert(bookData); return bookID; } } });

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

 Meteor.publish('books', function() { return Books.find({userID: this.userId}); });

الآن ، لا يجد المنشور سوى كتبًا من هذا المستخدم المعين. يمكننا حتى الوصول إلى معرف المستخدم من تعبيرات Blaze كـ “{{currentUser}}” ؛ ويمكننا استخدام هذا الأمر ، مع التوجيه "{{#if}}" (الذي يفعل بالضبط ما تعتقد أنه يفعله) ، لعرض البيانات فقط عند تسجيل دخول المستخدم:

 <template name="bookList"> {{#if currentUser}} <h3>Here are your books:</h3> <UL> {{#each books}} <LI><i>{{title}}</i> by {{author}}</LI> {{/each}} </UL> <form class="add-book"> Title:<br> <input type="text" name="title"> <br> Author:<br> <input type="text" name="author"> <input type="submit" value="Add Book"> </form> {{else}} <h3>Please log in to see your books</h3> {{/if}} </template>

تحقق من النتيجة النهائية على MeteorPad: المستخدمون

تعيين

الآن يمكننا نشر تطبيق Meteor هذا على الإنترنت. نقوم بذلك عن طريق الانتقال إلى دليل التطبيق على Terminal وتنفيذ:

 meteor deploy <your app's name>.meteor.com

تأكد من استبدال "<اسم تطبيقك>" باسم قصير حقيقي لنسخة التطبيق. سيطالبك تشغيل هذا الأمر بإعداد حساب مع Meteor ، وبعد ذلك سيضع تطبيقك الجديد على خوادم اختبار Meteor حتى تتمكن من تجربته على الإنترنت.

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

ومع ذلك ، فإن موقع meteor.com غير مخصص للاستخدام التجاري. ولكن عندما تذهب إلى الإنتاج ، هناك شركات تعمل على النظام الأساسي كخدمة مثل Modulus و Digital Ocean التي تجعل نشر تطبيقات Meteor أمرًا سهلاً. إذا كنت ترغب في نشر تطبيق نيزك على الخادم الخاص بك ، فإن "meteor up" تجعل هذه العملية مباشرة أيضًا.

الخطوات التالية

تهانينا! في سعيك لتعلم Meteor ، قمت الآن بإنشاء ونشر تطبيق ويب بسيط جدًا في الوقت الفعلي على Meteor. من الواضح أن هذه مجرد خطوة أولى صغيرة في عالم كامل من الميزات والوظائف. إذا كنت تحب ما رأيته حتى الآن ، فإنني أوصي بشدة بتطبيقك First Meteor بواسطة David Turnbull ، والذي يرشد القراء من خلال إنشاء تطبيق أكثر تعقيدًا ، مع مزيد من المعلومات حول ميزات النيزك على طول الطريق. إنه متاح ككتاب Kindle بسعر زهيد وكملف PDF مجاني على موقع ويب Turnbull.

ستحتاج أيضًا إلى استكشاف الحزم المتوفرة لـ Meteor. تسع مرات من أصل عشرة ، الإجابة على "كيف أفعل <x> في Meteor؟" هو "هناك حزمة لذلك". "كيف أضيف التوجيه إلى طلبي؟" أنت تستخدم جهاز التوجيه الحديد. "كيف يمكنني تقديم RESTful API؟" أنت تستخدم RESTivus. "كيف يمكنني تضمين اختبار الوحدة؟" أنت تستخدم السرعة. "كيف أضيف عمليات التحقق من صحة المخطط؟" أنت تستخدم Collection2. يمكنك بسهولة أن تضيع في Atmosphere.js بالاطلاع على جميع الحزم المتاحة.

لماذا لا تستخدم Meteor؟

كما ترون من هذا البرنامج التعليمي ، فإن Meteor بسيط وممتع لكتابة التطبيقات عليه ، لكنني سأكون مقصراً إذا لم أذكر العيوب.

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

يمكن أن يكون التحجيم غير معروف إلى حد ما مع Meteor. هناك الكثير من مواقع Meteor التي تصل إلى أعداد معقولة من المستخدمين ، ولكن هناك القليل من المواقع الكبيرة جدًا - لا يوجد شيء بأمر من Facebook أو LinkedIn ، مع عشرات أو مئات الملايين من المستخدمين.

ومع ذلك ، بالنسبة لمعظم التطبيقات ، يعد Meteor خيارًا مثاليًا ، لأنه يمثل فرصة لتقليل وقت التطوير والمشاركة في بدء شيء رائع.