() translation by (you can also view the original English article)
في البرنامج التعليمي اليوم نحن سوف نحميك وبالتشغيل مع قاعدة ببناء تطبيق بسيط لغرفة محادثة بالاستفادة من قاعدة جافا سكريبت API. هذا التطبيق سوف يوفر لك اللبنات الأساسية لتطوير لتطبيقات الوقت الحقيقي الأكثر تقدما على المشاريع الخاصة بك.
الشروع في العمل
من أجل الحصول على قاعدة وتشغيلها، عليك انشاء نشاء حساب مطور مجاناً بزيارة موقعهم على الإنترنت، والتسجيل. وبمجرد تسجيلك بنجاح، سيتم توجيهك بواسطة Firebase إلى لوحة معلومات الحساب الخاص بك حيث سيكون لديك حق الوصول إلى كافة المواقع قاعدة البيانات وغيرها من الميزات الأنيقة. مع ذلك الآن يجب عليك تحديد موقع قاعدة البيانات المعنونة،تطبيقي الأول" لا تتردد لإعادة تسمية هذا التطبيق أو إنشاء واحد جديد.
عندما تم إنشاء الموقع لقاعدة البيانات ، تم تعيين الاسم الفريد من نوعه للمضيف. اسم المضيف هذا الفريد مهم جداً؛ لأنه هو هذا الموقع حيث سيتم قراءة البيانات الخاصة بك وكتابتها أيضا.سوف نناقش اسم المضيف بمزيد من التعمق، في وقت لاحق في البرنامج التعليمي ولكن الآن:
لنبدأ البناء
البند الأول من جدول الأعمال: إنشاء ملف HTML جديد يشير لقاعدة العميل jQuery و Bootstrap CDNs. من الواضح تماما أننا بحاجة إلى ان نرجع قادةCDN . الآن، قد لا يكون واضح لماذا نحن نرجع إلى jQuery و Bootstrap. أنا باستخدام jQuery و Bootstrap لغرض التطوير السريع للتطبيق. كلا هاتان المكتبتان يسمحوا لي أن افعل الأشياء بشكل سريع جداً، وانها لا تتطلب الكثير من ناحية الترميز اليدوي. ومع ذلك، أنا لن اغطي سواء jQuery أو Bootstrap بأي قدر كبير من التفصيل؛ اذا لا تتردد في التعرف على المزيد حول هذه المكتبات لجافا سكريبت على الجهاز الخاص بك.
ال HTML
العلامات التي تطبق ما هو موضح على النحو التالي:
1 |
<!DOCTYPE html>
|
2 |
<html>
|
3 |
<head>
|
4 |
<meta charset="utf-8"> |
5 |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
6 |
<title>Firebase Chat Application</title> |
7 |
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> |
8 |
</head>
|
9 |
<body>
|
10 |
|
11 |
<script src="https://cdn.firebase.com/js/client/1.0.6/firebase.js"></script> |
12 |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> |
13 |
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> |
14 |
</body>
|
15 |
</html>
|
الآن لدينا ملف HTML تم إنشاؤه وأنه يتم الرجوع إلى CDNs الصحيحة، دعونا نبدأ العمل ببقية التطبيق الخاص بنا.
أولاً، نحن بحاجة لتحديد ما هي الوظيفة الأساسية سيحتاج هذا التطبيق. يبدو أن معظم التطبيقات نمط غرفة محادثة اثنين من أوجه التشابه: مربع رسالة لإرسال رسائل إلى ملقم وقسم الذي يحصل على تعبئة مع رسائل من ملقم. وفي حالتنا، سيكون هذا الخادم لدينا موقع قاعدة البيانات.
دعونا نقم بتنفيذ صندوق الرسالة لإرسال الرسائل إلى خادم قبل اليد. وهذا سيتطلب منا انشاء واجهة بسيطة تتضمن حقل إدخال وزر إرسال ملفوفة داخل علامات form. وبما أننا نرجع ورقة نمط Bootstrap، لدينا الراحة من استخدام بعض أنماط bootstrap المعرفة مسبقاً لإنشاء الواجهة. وكما ذكرت من قبل، هذا مريح للغاية ويسمح لنا بكتابة تعليمات برمجية أقل باليد.
لذلك دعونا أولاً نضع div مع حاوية سمة الفئة مباشرة بعد افتتاح body علامة داخل ملف HTML. هذه هي ميزة bootstrap توفر قيود العرض والحشو لمحتوى الصفحة. داخل العلامات الحاوية، يسمح بإضافة عنوان ملفوف داخل علامات H1 ، حتى أنه يمكن أن نعطي التطبيق اسماً وصفياً. سيكون العنوان بي، "تطبيق الدردشة القاعدة ". لا تتردد في استخدام الإبداع الخاصة بك عند كتابة العنوان الخاص بك.
العلامات التي تطبق ما وصفت أعلاه، يبدو مثل هذا:
1 |
<div class="container"> |
2 |
<h1>Firebase Chat Application</h1> |
3 |
</div>
|
وباﻹضافة إلى ذلك، نحتاج أيضا إلى إضافة div مع سمات الفئة:اللوحة اللوحة الافتراضية. هو مكون Bootstrap الذي يوفر مربع بسيط يحتوي على أربعة DIVs داخلية: عنوان-اللوحة وعنوان لوحة وجسم اللوحة وتذييل للوحة بشكل افتراضي. ونحن لن نقوم باستخدام عنوان لوحة واسم لوحة ولكن سوف نستخدم جسم اللوحة وتذييل اللوحة. سيتم استخدام لوحة DIV كالحاوية الرئيسية لعميل غرفة المحادثة.
العلامات التي تطبق ما وصفت أعلاه، على النحو التالي:
1 |
<div class="container"> |
2 |
<h1>Firebase Chat Application</h1> |
3 |
|
4 |
<div class="panel panel-default"> |
5 |
<div class="panel-body"></div> |
6 |
<div class="panel-footer"></div> |
7 |
</div>
|
8 |
</div>
|
في هذه اللحظة،نحن لن نعمل مع جسم اللوحة. ومع ذلك، سوف نحتاج إلى استخدام هذا القسم في وقت لاحق في البرنامج التعليمي لنشر الرسائل من موقع البيانات لدينا.
والآن ونحن سوف نركز على تذييل اللوحة div سوف يحتوي على حقل إدخال وزر تقديم ال وزر إعادة تعيين. سوف نعطي حقل الإدخال معرف سمة للتعليقات وزر الإرسال معرف سمة للإرسال بي تي ان. كل من سمات المعرف هذه مهمة جداً وستكون ضرورية جدا في وقت لاحق في البرنامج التعليمي. لا تتردد في تغييرمعرفات السمة لعناصر النموذج.
العلامات التي تطبق ما وصفت أعلاه، على النحو التالي:
1 |
<div class="container"> |
2 |
<h1>Firebase Chat Application</h1> |
3 |
|
4 |
<div class="panel panel-default"> |
5 |
<div class="panel-body"></div> |
6 |
<div class="panel-footer"> |
7 |
|
8 |
<form role="form"> |
9 |
<div class="form-group"> |
10 |
<label for="comments">Please enter your comments here</label> |
11 |
<input class="form-control" id="comments" name="comments"> |
12 |
</div>
|
13 |
|
14 |
<button type="submit" id="submit-btn" name="submit-btn" |
15 |
class="btn btn-primary">Send Comments</button> |
16 |
|
17 |
<button type="reset" class="btn btn-default">Clear Comments</button> |
18 |
</form>
|
19 |
|
20 |
</div>
|
21 |
</div>
|
22 |
</div>
|
الآن دعنا نقم بتنفيذ جافا سكريبت التي سوف تسمح لنا بإرسال الرسالة إلى موقع بيانات القاعدة .
جافا سكريبت
أولاً نحن بحاجة إلى إضافة مجموعة من علامات البرنامج النصي مباشرة فوق علامة جسم الإغلاق، داخل ملف HTML. داخل علامات البرنامج النصي، نحن بحاجة إلى إنشاء مرجع إلى قاعدة بيانات الموقع لدينا. دون هذا المرجع، نحن لا يمكننا كتابة البيانات إلى موقع البيانات لدينا. يمكنك ذلك عن طريق تهيئة منشئ قاعدة وتمرير موقع البيانات كمتغير. تذكر،تم إنشاء موقع قاعدة البيانات عندما قمت بإعداد قاعدة (اسم المضيف الفريد من نوعه-).
التعليمات البرمجية التي تقوم بتنفيذ ما وصفت أعلاه، كما يلي:
1 |
var fireBaseRef = new Firebase("YOUR FIREBASE DATA URL"); |
بعد تهيئة هدف مرجع القاعدة، نحن بحاجة إلى ربط ماسك حدث نقرة فوق محدد زر الإرسال. موقع هذا المحدد داخل تذييل اللوحة. أيضا، نحن بحاجة إلى ضمان أن استدعاء ماسك الحدث يحتوي على بيان كاذب للعودة يمثل السطر الأخير من التعليمات البرمجية. وهذا ضمان أن الإجراء الافتراضي لإرسال النموذج، لا يحدث ويمنع الحدث من ابراز شجرة ال DOM . ومع ذلك، في بعض الحالات قد تريد الحدث الفقاعي ان تحدث.
كلا قصاصات سكريبت أدناه تنفذ ما تم وصفه أعلاه:
1 |
$("#submit-btn").bind("click", function() { |
2 |
|
3 |
return false; |
4 |
});
|
1 |
$("#submit-btn").bind("click", function(event) { |
2 |
|
3 |
event.preventDefault(); |
4 |
event.stopPropagation(); |
5 |
});
|
التالي،سوف نحدد متغير يشير لمحدد التعليق ومتغير آخر لإزالة المسافات البيضاء من بداية ونهاية قيمة هذا التعليق.
التعليمات البرمجية التي تقوم بتنفيذ ما وصفت أعلاه، كما يلي:
1 |
$("#submit-btn").bind("click", function() { |
2 |
var comment = $("#comments"); |
3 |
var comment_value = $.trim(comment.val()); |
4 |
|
5 |
return false; |
6 |
});
|
الآن نحن بحاجة إلى تحديد الطريقة اللازمة لكتابة التعليقات فعلياً إلى موقع البيانات لدينا.
كتابة البيانات إلى القاعدة
وتوفرقاعدة API العديد من طرق الكتابة للبيانات إلى موقع بيانات. ومع ذلك، في البرنامج التعليمي اليوم نحن ذاهبون إلى التركيز على استخدام أساليب set() و push(). دعنا نستعرض بإيجاز ما كل هذه أساليب تسمح لنا القيام به.
- اسلوب
set()سيكتب البيانات إلى موقع البيانات، فضلا عن الكتابة فوق أي بيانات مخزنة حاليا في موقع البيانات. - الأسلوب
push()سيكتب البيانات إلى موقع البيانات تلقائياً مولدا موقع طفل جديد باسم فريد. وبالإضافة إلى ذلك، سوف يكون مسبوق هذا الاسم فريداً بطابع زمني. هذا سوف يسمح لجميع مواقع الأطفال لتكون مرتبة حسب التسلسل الزمني.
وبعد استعراض أساليب set() و push() على السواء؛أعتقد أنه من الواضح تماما أننا بحاجة إلى الاستفادة من الأسلوب push() في التطبيق الخاص بنا. خلاف ذلك، نحن سنكتب فوق التعليق الأخير بشكل مستمر في موقع البيانات لدينا والذي سيكون بلا متعة.
للقيام بهذا، دعونا ننتقل للخلف إلى جافا سكريبت التي قمنا بإضافتها سابقا إلى صفحتنا. نحن الآن بحاجة لدفع قيمة التعليق إلى موقع البيانات لدينا. الآن ضع في اعتبارك أن هناك أساليب دفع مختلفة التي تسمح لنا بدفع البيانات في أشكال مختلفة، مثل هدف أو مصفوفة، سلسلة، عدد، ومنطق، أو فارغة (null). سوف نستخدم فقط هدف لديه زوج ذا قيمة مفتاحية لتعليق وقيمة تعليق. اضافة إلى ذلك، فإننا سنعلق رد اتصال اختياري للإطلاق بعد الانتهاء من أساليب الدفع.رد الاتصال سيعود بخطأ على الفشل، والنجاح، وقيمة فارغة.
التعليمات البرمجية التي تقوم بتنفيذ ما وصفت أعلاه، كما يلي:
1 |
$("#submit-btn").bind("click", function() { |
2 |
var comment = $("#comments"); |
3 |
var commentValue = $.trim(comment.val()); |
4 |
|
5 |
fireBaseRef.push({comment: commentValue}, function(error) { |
6 |
if (error !== null) { |
7 |
alert('Unable to push comments to Firebase!'); |
8 |
}
|
9 |
});
|
10 |
|
11 |
return false; |
12 |
});
|
الآن دعنا نقم بإضافة شيء للتأكد من أن مستخدمي غرفة المحادثة لم يكونوا قادرين على كتابة رسائل فارغة إلى موقع البيانات لدينا. يمكن تحقيق ذلك بسهولة عن طريق إضافة جملة if else بسيطة التي تتحقق من طول قيمة التعليق.
التعليمات البرمجية التي تقوم بتنفيذ ما وصفت أعلاه، كما يلي:
1 |
$("#submit-btn").bind("click", function() { |
2 |
var comment = $("#comments"); |
3 |
var commentValue = $.trim(comment.val()); |
4 |
|
5 |
if (commentValue.length === 0) { |
6 |
alert('Comments are required to continue!'); |
7 |
} else { |
8 |
_fireBaseRef.push({comment: commentValue}, function(error) { |
9 |
if (error !== null) { |
10 |
alert('Unable to push comments to Firebase!'); |
11 |
}
|
12 |
});
|
13 |
|
14 |
comment.val(""); |
15 |
}
|
16 |
|
17 |
return false; |
18 |
});
|
عظيم، ونحن لقد أكملنا بنجاح الجزء من تظبيقنا الذي يسمح للمستخدمين بكتابة البيانات إلى موقع البيانات لدينا. ولكن،نحن مازلنا نفتقر إلى الوظيفة التي توفر للمستخدمين تجربة دردشة في الوقت الحقيقي. سوف يتطلب هذا النوع من الخبرة القدرة على قراءة البيانات من مواقع الطفل، داخل موقع البيانات.
قراءة البيانات من القاعدة
وكما ذكرنا سابقا، معظم تطبيقات نمط غرف المحادثة تقرأ البيانات من ملقم وثم تقم بتعبئة قسم من الواجهة. وسوف نحتاج إلى القيام بنفس الشيء في طلبنا، بالاستفادة من Firebase API.
وتوفر API للقاعدة عدة أساليب لقراءة البيانات من موقع بيانات. في الدرس التعليمي لليوم ، نحن ذاهبون إلى التركيز على استخدام أسلوب on().
الأسلوب on() يحتوي على العديد من الحجج التي تستحق النظر فيها، ولكن نحن سنغطي الجدالين الأولين: eventType ورد الاتصال. دعونا نقم باستعراض كلاهما.
تحديد eventType
وسيطة "eventType" لديها العديد من الخيارات. دعونا ننظر في كل منها أن لنكون قادرين على تحديد التي سوف تلبي احتياجاتنا.
-
"قيمة"--سوف يتم تشغيلها مرة واحدة، وتقرأ جميع التعليقات، وفي كل مرة أي تغيير للتعليقات فإنه سوف يفعل مرة أخرى، فضلا عن قراءة جميع التعليقات. - سيتم تشغيل
"child_added"--مرة واحدة لكل تعليق، فضلا عن كل مرة تعليق جديد يضاف. - سيتم تشغيل
"child_removed"-أي وقت تتم إزالة تعليق. - سيتم تشغيل
"child_changed"-أي وقت يتم تغيير تعليق. - سيتم تشغيل
"child_moved"-أي وقت يتم تغيير ترتيب التعليق.
بعد النظر من خلال الخيارات المذكورة أعلاه، يبدو من الواضح تماما أنه ينبغي علينا استخدام "child_added" كما "eventType"لدينا. سيتم تشغيل هذا النوع المنتظم مرة واحدة لكل تعليق في موقع البيانات لدينا، فضلا عن كل مرة تعليق جديد يضاف. وبالإضافة إلى ذلك، عند إضافة تعليق جديد فإنه لن يعود بالمجموعة الكاملة من التعليقات لهذا الموقع، ولكن فقط آخر طفل أضيف. وهذا بالضبط ما نريد! ليس هناك حاجة لإرجاع المجموعة الكاملة من التعليقات، عند إضافة تعليق جديد.
تحليل رد الاتصال
يوفر"رد الاتصال" للأسلوب on()عنصر تشيرله Firebase إلى أنه "لقطة بيانات" التي لديها عدة وظائف للاعضاء، يتم التركيز اليوم على name() و val ().
ويوفر لنا دالة العضو name() الاسم الفريد "لقطة البيانات". إذا كنت تتذكر في وقت سابق، استخدمنا الدالة push() لكتابة تعليق جديد إلى موقع البيانات لدينا. عندما سُمي push()، ولّدت موقع طفل جديد باستخدام اسم فريد، وهذا هو الاسم الذي سوف نعاد اليه عبر دالة الأعضاء مرة أخرى name() .
دالة العضو val () توفر لنا ممثلية هدف جافا سكريبت ل لقطة البيانات" ومع هذه اللقطة، سوف نكون قادرين على استرداد تعليق من موقع البيانات لدينا. ومع ذلك، نحن بحاجة إلى تراجع للحظة.
في وقت سابق من هذا البرنامج التعليمي قمنا بتنفيذ جافا سكريبت اللازمة للارتقاء بالتعليقات إلى موقع Firebase وقمنا بذلك عن طريق دفع هدف مع زوج قيمة مفتاحي. وفي هذه الحالة، كان المفتاح "التعليق" وكانت القيمة الإدخال الذي قام المستخدم بإدخاله. ولذلك، إذا كنا نريد استخراج تعليق من "لقطة البيانات"خاصتنا نحن بحاجة إلى التعرف على نوع البيانات الصحيح. في هذه الحالة أننا نتعامل مع هدف ما، حيث يمكنك استخدام التدوين المنقط أو تدوين القوس للوصول إلى الخاصية المحددة.
كلا قصاصات سكريبت أدناه، تنفذ ما تم وصفه أعلاه:
1 |
fireBaseRef.on('child_added', function(snapshot) { |
2 |
var uniqName = snapshot.name(); |
3 |
var comment = snapshot.val().comment; |
4 |
});
|
1 |
fireBaseRef.on('child_added', function(snapshot) { |
2 |
var uniqName = snapshot.name(); |
3 |
var comment = snapshot.val()["comment"]; |
4 |
});
|
تقديم التعليقات
التالي دعونا نقم بإنشاء طريقة بسيطة، نظيفة لعرض كل تعليق. هذا يمكن أن يتحقق بسهولة بالالتفاف لكل تعليق داخل div وتسمية كل تعليق باسمه الفريد من نوعه. عادة ما تكون التعليقات المسماة باسم المستخدم الذي كتب ذلك التعليق،في حالتنا، هذا هوعميل مجهول لغرفة المحادثة.
التعليمات البرمجية التي تقوم بتنفيذ ما وصفت أعلاه، كما يلي:
1 |
var commentsContainer = $('#comments-container'); |
2 |
|
3 |
$('<div/>', {class: 'comment-container'}) |
4 |
.html('<span class="label label-info">Comment ' + uniqName + '</span>' + comment); |
التالي يجب أن نلحق كل تعليق بحاوية التعليق والحصول على الوضع العمودي الحالي لشريط تمريرحاوية التعليق وانتقل إلى ذلك الموقع الأخير. وهذا سيضمن أن كل مرة تعليق يدفع إلى Firebase، كافة المستخدمين الذين يستخدمون تطبيق المحادثة سوف ينظروا لاخر تعليق أدلى. يجب أن يتم كل هذا في رد الاتصال.
يجب أن يبدو مثل هذا:
1 |
var commentsContainer = $('#comments-container'); |
2 |
|
3 |
$('<div/>', {class: 'comment-container'}) |
4 |
.html('<span class="label label-info">Comment ' + uniqName + '</span>' + comment) |
5 |
.appendTo(commentsContainer); |
6 |
|
7 |
commentsContainer.scrollTop(commentsContainer.prop('scrollHeight')); |
الآن لنطبق بعض أنماط CSS البسيطة إلى DIVs الملتفة حول كل كتلة تعليق. وهذا سيجعل المظهر قليلاً أكثر جاذبية وودي للمستخدم . وينبغي إضافة هذه الأنماط داخل علامات النمط ، يقع في الجزء الرئيسي من HTML.
التعليمات البرمجية التي تقوم بتنفيذ ما وصفت أعلاه، كما يلي:
1 |
.container { |
2 |
max-width: 700px; |
3 |
}
|
4 |
|
5 |
#comments-container { |
6 |
border: 1px solid #d0d0d0; |
7 |
height: 400px; |
8 |
overflow-y: scroll; |
9 |
}
|
10 |
|
11 |
.comment-container { |
12 |
padding: 10px; |
13 |
margin:6px; |
14 |
background: #f5f5f5; |
15 |
font-size: 13px; |
16 |
-moz-border-radius: 5px; |
17 |
-webkit-border-radius: 5px; |
18 |
border-radius: 5px; |
19 |
}
|
20 |
|
21 |
.comment-container .label { |
22 |
margin-right: 20px; |
23 |
}
|
24 |
|
25 |
.comment-container:last-of-type { |
26 |
border-bottom: none; |
27 |
}
|
تشغيل التطبيق
الآن حان الوقت لتشغيل التطبيق الخاص بنا. دعونا نبدأ بفتح مثيلين من المتصفح المفضل لنا،مستعرض حديث، ووضعهم جنبا إلى جنب على سطح المكتب. التالي،نحن سوف نستعرض إلى موقع الملف للملف الذي خلقنا، على كلا المتصفحين. اختبره بكتابة تعليقات قليلة واستمتع بمشاهدة سحر Firebase.
أنه أمر لا يصدق أن فقط بضعة أسطر من التعليمات البرمجية يمكنها أن تنتج مثل هذا التطبيق القوي. لا تتردد في تحرير هذا المقتطف بأي طريقة لتحقيق نتائجك المرجوة.
تحقق من العرض على الإنترنت لتراه يعمل. يوجد أدناه المصدرالكامل للتعليمات البرمجية للتطبيق الكامل لغرفة المحادثة:
1 |
<!DOCTYPE html>
|
2 |
<html>
|
3 |
<head>
|
4 |
<meta charset="utf-8"> |
5 |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
6 |
<title>Firebase Chat Application</title> |
7 |
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> |
8 |
|
9 |
<style>
|
10 |
.container { |
11 |
max-width: 700px; |
12 |
}
|
13 |
|
14 |
#comments-container { |
15 |
border: 1px solid #d0d0d0; |
16 |
height: 400px; |
17 |
overflow-y: scroll; |
18 |
}
|
19 |
|
20 |
.comment-container { |
21 |
padding: 10px; |
22 |
margin:6px; |
23 |
background: #f5f5f5; |
24 |
font-size: 13px; |
25 |
-moz-border-radius: 5px; |
26 |
-webkit-border-radius: 5px; |
27 |
border-radius: 5px; |
28 |
}
|
29 |
|
30 |
.comment-container .label { |
31 |
margin-right: 20px; |
32 |
}
|
33 |
|
34 |
.comment-container:last-of-type { |
35 |
border-bottom: none; |
36 |
}
|
37 |
</style>
|
38 |
</head>
|
39 |
<body>
|
40 |
|
41 |
<div class="container"> |
42 |
|
43 |
<h1>Firebase Chat Application</h1> |
44 |
|
45 |
<div class="panel panel-default"> |
46 |
|
47 |
<div class="panel-body"> |
48 |
<div id="comments-container"></div> |
49 |
</div>
|
50 |
|
51 |
<div class="panel-footer"> |
52 |
|
53 |
<form role="form"> |
54 |
<div class="form-group"> |
55 |
<label for="comments">Please enter your comments here</label> |
56 |
<input class="form-control" id="comments" name="comments"> |
57 |
</div>
|
58 |
|
59 |
<button type="submit" id="submit-btn" name="submit-btn" |
60 |
class="btn btn-success">Send Comments</button> |
61 |
|
62 |
<button type="reset" class="btn btn-danger">Clear Comments</button> |
63 |
</form>
|
64 |
|
65 |
</div>
|
66 |
</div>
|
67 |
</div>
|
68 |
|
69 |
<script src="http://cdn.firebase.com/js/client/1.0.6/firebase.js"></script> |
70 |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> |
71 |
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> |
72 |
<script>
|
73 |
|
74 |
var fireBaseRef = new Firebase("YOUR FIREBASE DATA URL"); |
75 |
|
76 |
$("#submit-btn").bind("click", function() { |
77 |
var comment = $("#comments"); |
78 |
var commentValue = $.trim(comment.val()); |
79 |
|
80 |
if (commentValue.length === 0) { |
81 |
alert('Comments are required to continue!'); |
82 |
} else { |
83 |
fireBaseRef.push({comment: commentValue}, function(error) { |
84 |
if (error !== null) { |
85 |
alert('Unable to push comments to Firebase!'); |
86 |
}
|
87 |
});
|
88 |
|
89 |
comment.val(""); |
90 |
}
|
91 |
|
92 |
return false; |
93 |
});
|
94 |
|
95 |
fireBaseRef.on('child_added', function(snapshot) { |
96 |
var uniqName = snapshot.name(); |
97 |
var comment = snapshot.val().comment; |
98 |
var commentsContainer = $('#comments-container'); |
99 |
|
100 |
$('<div/>', {class: 'comment-container'}) |
101 |
.html('<span class="label label-default">Comment ' |
102 |
+ uniqName + '</span>' + comment).appendTo(commentsContainer); |
103 |
|
104 |
commentsContainer.scrollTop(commentsContainer.prop('scrollHeight')); |
105 |
});
|
106 |
|
107 |
</script>
|
108 |
</body>
|
109 |
</html>
|
في موجز
في الدرس التعليمي لليوم، عملنا على طول الطريق خلال عملية تنفيذ تطبيق غرفة محادثة بسيطة بالاستفادة من جافا سكريبت API للقاعدة. عند القيام بذلك، كنا قادرين على تجربة سلطة القاعدة والحصول على تقدير لراحتها . وفيما يلي بعض العناصر الرئيسية التي نضربها اليوم:
- الرجوع إلى موقع قاعدة بيانات بواسطة تهيئة منشئ قاعدة.
- كتابة بيانات إلى قاعدة باستخدام أسلوب
الدفع. - قراءة البيانات من القاعدة باستخدام الأسلوب
onمع نوع الحدث"child_added".
أأمل أن هذا البرنامج التعليمي منحك نقطة البداية التي تحتاج إلى أن تأخذ الأمور ابعد مع قاعدة. إذا كان لديك أي أسئلة أو تعليقات، لا تتردد في تركهم أدناه. شكرا مرة أخرى على وقتك وحفاظك على استكشاف إمكانيات لا نهاية من Firebase API.
الموارد
