راه اندازی Firebase برای پروژه بعدی: ساخت چت روم به صورت Real Time

راه اندازی Firebase برای پروژه بعدی: ساخت چت روم به صورت Real Time

امروز در این آموزش ما یاد خواهیم گرفت که چگونه یک نرم افزار چت روم با استفاده از API های Firebase درست کنیم. این برنامه به شما ین امکان را می دهد که با استفاده از بلوک هایی که برای توسعه دادن برنامه وجود دارد، نرم افزارهای real-time پیشرفته را به پروژه خود اضافه کنید.

 

نمایش [fa type=”eye”]  دانلود [fa type=”download”]


 

firebase-site

 

شروع

به منظور استفاده از Firebase ابتدا باید وارد سایت فایربیس شده و یک حساب کاربری رایگان مخصوص توسعه دهندگان ایجاد کنید. وقتی عملیات ثبت نام را انجام دادید، Firebase شما را به محیط کاربری (dashboard) خود انتقال می دهد جایی که به تمام موقعیت های داده  (data locations) خود و دیگر امکانات مرتب دیگر دسترسی دارید. با این حال، در حال حاضر شما باید محل داده فایربیس را تحت عنوان MY FIRST APP انتخاب کنید. شما می توانید به راحتی نام دلخواه یا یکی دیگر را ایجاد کنید.

وقتی، مکان داده Firebase را ایجاد کردید، باید یک نام هاست منحصر به فرد را اختصاص دهیم. این نام منحصر به فرد بسیار مهم می باشد، چون مکانی می باشد که داده های ما از آنجا خوانده و نوشته می شوند. ما بحث درباره نام هاست را در ادامه آموزش خواهیم دید، ولی برای حالا:

 

بیایید شروع به ساخت کنیم

گزینه اول در دستور کار: یک فایل HTML را ایجاد کرده و به منبع های jQuery, Bootstrap ارجاع دهید، در این آموزش فرض شده است شما آشنایی مختصری با فریم ورک Bootstrap دارید. شاید کاملا روشن نباشد که در پروژه چرا به jQuery و Bootstrap نیاز داریم. ما از این ابزارها برای توسعه سریع نرم افزار استفاده می کنیم. هردوی از این کتابخانه ها به من اجازه می دهند که سریع کارها را انجام دهم و به کدنویسی زیاد لازم نباشد. با این حال، من در این مقاله جزئیات زیادی از jQuery و Bootstrap پوشش نمی دهم. توجه کنید برای آشنایی بیشتر با فریم ورک Bootstrap می توانید آموزش مقدماتی راه اندازی Twitter Bootstrap را مشاهده کنید. یا به مستندات این ابزارها مراجعه کنید.

 

HTML

اچ تی ام ال های زیر را برای پیاده سازی برنامه، وارد فایل html خود کنید:

توجه کنید که جاواسکریپت ها و سی اس اس های لازم را از سایت های jQuery، Boostrap، Firebase دانلود کنید.

ساختار برنامه من در این آموزش به صورت زیر می باشد، ولی شما می توانید هر جور که مایلید فایل ها را مرتب کنید:

البته روش سریعتری نیز وجود دارد، که به جای دانلود کردن دستی فایل های مورد نیاز، آنها را با استفاده از CDNها به فایل html ارجاع دهیم که به صورت زیر است:

اگر از روش دوم برای دانلود خودکار فایل ها استفاده کردید، باید حتما به اینترنت متصل باشید تا هر وقت که فایل index.html بارگذاری می شود از اینترنت دانلود شود. من از روش اول در این مقاله استفاده کرده ام که به صورت جداگانه فایل ها را از سایت مخصوص به خود دانلود کرده ام.

حال که فایل html خود را ایجاد و فایل های مورد نیاز را به آن ارجاع دادیم، حالا اجازه دهید بقیه کار را انجام دهیم.

اول باید تعیین کنیم چه قابلیت های ضروری این برنامه نیاز خواهد داشت. به نظر می رسد بیشتر سیستم های چت روم ها در دو چیز مشترک هستند: یک قسمت برای ارسال پیغام ها به سرور، و یک قسمت برای پیغام ها در آن نمایش داده می شوند. در این مورد، سرور ما همان موقعیت داده ها در Firebase است.

اجازه دهید قسمتی را که مخصوص ارسال پیام می باشد را ایجاد کنیم. برای این کار باید یک رابط کاربری ساده ایجاد کنیم که شامل یک فیلد input و یک دکمه ارسال (submit) می باشد که درون تگ form قرار می گیرد. از آنجایی که قبلا فایل های سی اس اس Bootstrap را وارد کرده ایم، می توانیم به راحتی با استفاده از css های از پیش تعریف شده Bootstrap رابط کاربری برنامه را ایجاد کنیم. همان طور که می دانیم این کار باعث می شود کد کمتری بنویسیم.

بنابراین در وهله اول تگ div با کلاس container را درست بعد از باز شدن تگ body در فایل index.html قرار می دهیم. این یکی از امکانات bootstrap است که عرض (width) و (padding) به محتوا صفحه ما می دهد. داخل تگ container می توانید با تگ H1 نام برنامه را مشخص کنید. عنوان من Firebase Chat Application خواهد بود. می توانید هر نامی که می خواهید وارد کنید.

تگی که در بالا توضیح دادم به صورت زیر است:

علاوه بر این، ما نیاز به اضافه کردن تگ div با کلاس panel و panel-default داریم. یک panel کامپوننتی از bootstrap است که چهار قسمت از div ها را شامل می شود:

  1. panel-heading
  2. panel-title
  3. panel-body
  4. panel-footer

نا در این برنامه از فقط از قسمت های panel-body و panel-footer استفاده خواهیم کرد. از div های panel برای قسمت اصلی سیستم چت روم استفاده می شود. که به صورت زیر است:

در حال حاضر، با panel-body استفاده نمی کنیم. به هر حال در ادامه آموزش برای نمایش داده ها از Firebase مورد استفاده قرار می گیرد.

در حال حاضر بر روی panel-footer تمرکز می کنیم. پنل footer شامل فیلد ورودی و دکمه ارسال است و همچنین دکمه (reset). به فیلد های ورودی مشخصه id با نام comments و به دکمه ارسال (submit) مشخصه id با نام submit-btn می دهیم. هردوی این id ها خیلی مهم هستند و در ادامه به آنها نیاز پیدا می کنیم. هر نامی که مب خواهید می توانید به id ها اختصاص دهید، که به صورت زیر است:

حال جاواسکرپت هایی را که قرار است پیغام ما را به Firebase ارسال کند را پیاده سازی می کنیم.

 

JavaScript

ابتدا نیاز به اضافه کردن تگ script در فایل index.html داریم که از ابتدا آن را با نام custom.js ایجاد کرده ایم. درون فایل custom.js ما نیاز به ایجاد ارجاعی (reference) به موقعیت داده های Firebase داریم. بدون این رجوع، ما نمی توانیم داده های خود را در مکان داده وارد کنیم.  این کار را به مقدار دهی اولیه، سازنده فایربیس (constructor) و انتقال موقعیت داده ما به صورت پارامتر انجام می گیرد. به یاد داشته باشید که، موقعیت دادها هنگام تنظیمات از سایت Firebase صورت می گیرد. (نام هاست منحصر به فرد).

خط زیر را در فایل custom.js وارد کنید که به صورت زیر است:

یعد از مقدار دهی اولیه شیء ارجاع داده شده به Firebase، ما نیاز به یک اتصال رویداد کلیک به دکمه ارسال داریم، که در قسمت panel-footer می باشد. همچنین باید اطمینان حاصل کنیم که کنترل رویداد شامل دستور return false در آخر می باشد. این دستور مطمئن می شود که عمل پیشفرض ارسال فرم، رخ می دهد و جلوگیری می کند از رویداد bubbling در DOM. با این حال، در برخی اوقات، می خواهید که رویداد bubbling رخ دهد.

هردوی این قطعه اسکریپت های در زیر آمده است:

 

ادامـــه، متغیری را برای ارجاع به مشخصه های comments و متغیری دیگر برای پاک کردن فضاهای خالی در شروع و پایــان مقدار پیغام تعریف می کنیم، که به صورت زیر است:

 

حال متدی را باید تعیید کنیم که در واقع این پیغام های ما را مکان داده ما ذخیره کند.

 

نوشتن داده در Firebase

API های Firebase روش های مختلفی را برای نوشتن داد در مکان داد ارائه می دهد. با این حال، در آموزش امروز ما از ()set و ()push استفاده خواهیم کرد. بیایید هر یک از این متدها را بررسی کینم تا ببینیم برای ما چه کار می کنند.

  • ()set این روش، داده های ما را در مکان داده قرار می دهد، و همچنین هر داده ای که نیاز به تغییر باشد را دوباره نویسی (overwrite) می کند.
  • ()push  این روش، داده های ما را در یک زیر مکان (child location)  به طور خودکار با یک نام منحصر به فرد قرار می دهد.  علاوه بر این، نام منحصر به فرد همراه با زمان (time-stamp) می باشد. این کار به ما اجازه می دهد تمام زیر مکان ها را به صورت زمان بندی شده باشد.

بعد از این که متد های ()set و ()push را بررسی کردیم، من فکر می کنم کاملا مشهود است که به قدرت ()push در برنامه نیازمندیم. در غیر این صورت آخرین پیغام ما را در مکان داده ها دوباره نویسی می کند، و این اصلا خوب نیست.

برای این کار، به فایل custom.js که قبلا اسکریپت های ما در آن قرار داده ایم برگردید. حالا ما باید داده ها را در مکان داده ذخیره کنیم (data location). به خاطر داشته باشید که روش های مختلفی از متد push وجود دارید که به ما اجازه می دهد با فرمت های مختلف مانند، یک شی، آرایه، رشته، اعداد، بولی یا null داده ها را ذخیره کنیم. ما از شی (object) استفاده خواهیم کرد که دارای یک جفت کلید (key) با نام های (comment) و مقدار پیغام. علاوه بر این، یک ضمیته تماس اختیاری بعد از تمام کردن متد push به Firebase اضافه می کنیم. تماس یا همان (callback) یک شی در صورت عدم موفقیت بر می گرداند (return)، و و در صورت موفقیت مقدار صفر بر می گرداند. که باید به صورت زیر باشد:

حالا اسکریپت های زیر را به فایل custom.js اضافه کنید، برای اطمینان حاصل کردن از این که کاربر در محیط چت روم نمی تواند پیغام خالی به مکان داده های ما ارسال کند. این کار را می توان به راحتی با یک دستور if else ساده برای بررسی کردن طول مقدار استفاده کرد، که به صورت زیر است:

عالیـــست، ما حالا بخشی از برنامه را تکمیل کردیم که به کاربران این اجازه را می داد که نوشته های خود را در هاست ما ذخیره کنند. ولــی، هنوز به کاربر تجربه کار با چت روم real-time را آماده نکرده ایم. این نوع از تجربه لازم به توانایی خواند داده ها از مکان داده است.

 

خواندن اطلاعات از Firebase

همانطور که پیشتر اشاره شد، بیشتر چت روم ها داده ها را از سرور می خوانند و بعد داده ها را در رابط کاربری نشان می دهد. ما همین کار را با API های Firebase انجام می دهیم.

Firebase چند تا API برای خواندن داده از روی سرور پیشنهاد می کند. در این آموزش ما از متد ()on استفاده می کنیم.

متد ()on چند آرگومان با ارزش دارد، اما ما فقط از آرگومان eventType و callback استفاده خواهیم کرد. اجازه دهید هر دوی این آرگرمان ها را بررسی کنیم.

 

 انتخاب یک eventType

آرگومان eventType چندین گزینه دارد. بیایید نگاهی به هر کدام از آنها بیندازیم تا بدانیم برای ما چه کاری انجام می دهند.

  • value یک بار باعث می شود تمام نظرات را بخواند، و هر بار نظری تغییر می کند، دوباره باعث می شود که تمام نظرات را بخواند.
  • child_added موقعی که یک نظر پاک می شود اجرا می شود.
  • child_changed موقعی که یک نظر تغییر کند.
  • child_moved هر بار که نظری تغییر می کند.

بعد از این که گزینه های بالا را مشاهده کردیم، مشخص است که می توانیم از گزینه ی child_added برای eventType استفاده کنیم. باعث می شود یک نظر جدید اضافه شود. علاوه بر این، وقتی یک نظر جدید اضافه می شود، تمام مجموعه نظرات را به مکان داده ی ما برگشت نمی دهد، فقط آخرین child را اضافه می کند. این دقیقا همان چیزی است که می خواهیم! لازم نیست که کل نظرات را برگشت دهیم وقتی یک نظر جدید اضافه می شود.

 

تجزیه و تحلیل callback

callback برای متد ()on باعث می شود یک آیتم از مشخصات داده (snapshot of data) را فراهم کنید، که چندین متد برای این کار وجود دارد، و ما فقط از ()name و ()val استفاده می کنیم.

تابع ()name برای ما یک نام منحصر به فرد از داده را برای ما فراهم می کند. اگر شما قبلا به یاد داشته باشید، ما از تابع ()push برای نوشتن نظر جدید در مکان داده استفاده می کردیم. وقتی ()push فراخوانی می شود، یک زیر مکان (child location) با نام منحصر به فرد ایجاد می کند، این همان نامی است که از طریق تابع ()name برگشت داده می شود.

تابع ()val یک شی جاواسکرپت از مشخصات داده را بر می گرداند، ما می توانیم با این تابع نظرات را از مکان داده بازیابی کنیم. با این حال، ما احتیاج داریم کمی به عقب بر گردیم.

پیش از آن در این آموزش ما جاواسکریپت که نظرات ما را درون Firebase انتقال می داد را پیاده سازی کردیم، و این کار را با وارد کردن یک شی با مقدار کلید انجام دادیم. در این موضوع کلید comment خواهد بود و مقدار ورودی که کاربر در فیلد وارد می کند. بنابراین، اگر ما می خواهیم پیغامی را از دیتابیس خود استخراج کنیم، می بایست اول نوع داده را مشخص کنیم. در این مورد ما با یک شی تبادل می کنیم، بنابراین هم می توانید از نماد ‘.’ نقطه و هم از نماد براکت برای دسترسی به یک مشخصه خاص استفاده کنید، که در زیر هر دوی آنها آمده است:

 

 

نمایش نظرات

در ادامه اجازه دهید یک راه ساده برای نمایش نظرات ارائه دهیم. این کار را به سادگی با گذاشتن هر نظر داخل یک div و برچسب زدن هر div با نام منحصر به فرد صورت می گیرد. معمولا نظرات با نام کاربرها نام گذاری می شوند، در مورد این آموزش، این یک سرویس گیرنده چت روم ناشناس است. این کد به صورت زیر است:

در ادامه باید هر نظر را داخل container اضافه شود و با یک اسکرول عمودی نظرات را مشاهده کرد. این باعث می شود که هر بار نظری جدید در Firebase اضافه می شود، تمام کاربران آخرین نظرات را مشاهده کنند. تمام اینها باید درون callback صورت می گیرد، که به صورت زیر است:

 

حالــا مقداری CSS به برنامه اضافه می کنیم. این کار باعث می شود برنامه کمی جذاب و کاربر پستند دیده شود. CSS های زیر را درون فایل style.css که در ابتدا کار ایجاد کردیم اضافه کنید:

 

اجرا برنامه

حال به قسمت هیجان انگیز کار می رسیم، اجرای برنامه. فایل index.html را با یکی مرورگرهای مدرن خود باز کنید و چند پیغام را درون فیلد وارد کنید تا جادو را مشاهده کنید!

باورنکردنی است که با چند خط کد می توانیم چنین برنامه قدرتمندی ایجاد کرد. مطمئنم با کمی آزمایش و خطا می توانید برنامه هایی بسیار جالب تر، حتی بهتر از من را درست کنید.

در آخر فایل custom.js شما شبیه به زیر باشد:

demo-firebase

فقط توجه داشته باشید در جایی که YOUR FIREBASE DATA URL نوشته شده است، باید آدرس url برنامه ای که در حساب کاربری Firebase ایجاد کرده اید را وارد کنید.

firebase-url

 پایان

امیدوارم که این آموزش نقطه شروعی در شما ایجاد کرده باشد. اگر سوالی دارید می توانید در قسمت نظرات مطرح کنید. تشکر دوباره از زمانی که برای این مقاله صرف کردید.

 

 این آموزش از مستندات Firebase و jQuery و Bootstrap الهام گرفته شده است.