ساخت برنامه Todo با آنگولار و فایربیس

ساخت برنامه Todo با آنگولار و فایربیس

ساخت برنامه های Real-Time یکی از چیزهای هیجان انگیز در وب و موبایل است که باعث شده توسعه دهنده های بیشتری جذب این تکنولوژی‌ها شوند. در این پست می خواهیم یک برنامه Todo درست کنیم کنیم تا تسک‌هایی که باید در آینده انجام دهیم را لیست کنیم. ما در ساخت آن از Angular و Firebase استفاده می کنیم. ما می خواهیم برنامه بصورت Real-Time باشد، به این معنی که بدون رفرش شدن صفحه تغییرات را مشاهده کنیم.

فایربیس چیست؟

فایربیس API است که داده ها را بصورت real-time ذخیره و به آن‌ها دسترسی پیدا می کند،فایربیس همانند آنگولار توسط گوگل توسعه داده می شود. استفاده از Firebase باعث می شود که نگران دیتابیس و کدهای سمت سرور نباشیم، تمام این کارها بصورت خودکار انجام می شود. تنها کاری که ما باید انجام دهیم، گرفتن داده ها از فایربیس و ذخیره کردن آن در فایربیس است و همچنین تمام سایت ها و دستگاه‌های متصل به آن بطور خودکار sync است.

تنها نگرانی ما بخش front-end برنامه ما است.

[button type=”success” size=”lg” link=”https://github.com/patrickava/FireTodo”] [fa type=”github-alt”] سورس برنامه [/button]

[button type=”success” size=”lg” link=”http://source.baboon.ir/ng-firebase”] [fa type=”eye”] پیش نمایش [/button]


 

راه اندازی حساب کاربری فایربیس

ابتدا وارد firebase.com شده و یک حساب کاربر ایجاد کنید. پس از ثبت نام، فایربیس برای شما یک برنامه بطور پیشفرض درست می کند که می توانید برای تست از آن استفاده کنید، همچنین می توانید بجای آن برنامه با نام دلخواه خود را درست کنید.

[alert type=”danger”] برای کار با فایربیس، پراکسی باید روشن باشد! [/alert]

بر روی Manage App کلیک کنید تا به داشبورد برنامه منتقل شویم، از آنجا می توانید برنامه فایربیس خود را مدیریت کنید. همچنین می توانید داده ذخیره کنید یا عملیات احراز هویت کاربر انجام دهید.

هر برنامه فایربیس دارای یک URL منحصر به فرد است که می توانید از آن برای ذخیره و sync کردن داده ها استفاده کنید. مثل لینک زیر:

به داشبورد برنامه مراجعه کنید تا چیزی شبیه به زیر مشاهده کنید:

ساخت برنامه با angular و firebase

از اینجا می توانید دادهای برنامه را به صورت real-time مشاهده و به روزرسانی و اضافه کنید. مهمترین بخش در این تصویر URL است که باید از آن بعدا استفاده کنیم.

 

آماده سازی پروژه

فایل‌ها و پوشه‌های زیر را بصورت زیر ایجاد کنید تا ساختار پروژه شکل گیرد:

index.html تمام HTML های برنامه را نگاه می دارد، app.js کدهای Angular را نگاه می دارد، از این فایل برای متصل شدن به فایربیس استفاده می کنیم. style.css قرار است سی اس اس های دلخواه ما را نگاه دارد.

ما در این مثال برای ظاهر برنامه خود از Material استفاده می کنیم، شما می توانید از Bootstrap نیز استفاده کنید.

اجازه ابتدا وابستگی های ساخت این برنامه را با استفاده از Bower نصب کنیم! دستور زیر را در ریشه داریکتوری خود اجرا کنید تا Angular × AngularFire × Firebase و غیره نصب شود:

ما همچنین mdi را نصب کردیم تا مجموعه از آیکون‌های متنوع را همچون Font Awesome در اختیار ما بگذارد.

یا اینکه بجای مراحل فوق، فایل bower.json را ساخته و json زیر را به آن اضافه کنید تا با اجرا bower install تمام وابستگی‌ها در دایرکتوری bower_components ذخیره شود:


حال بیایید کدهی برنامه شروع کنیم.

HTML

همانطور که مشاهده می کنید در این فایل چیزی برای توضیح دادن وجود ندارد، اگر اولین بار است که با Angular روبرو می شوید پیشنهاد می شود ابتدا موارد ابتدایی آنگولار را درک کرده و بعد سراغ ساخت برنامه بیایید.

style.css

شما می توانید در اینجا ظاهر برنامه خود را بصورت سفارشی تغییر دهید.

 

app.js

همانطور که مشاهده می کنید ما ایتدا ماژول myApp را ایجاد و وابستگی‌های برنامه را به آن تزریق کرده ایم. و همچنین کنترلر mainCtrl را در ادامه تعریف کرده ایم.

حال برنامه ما آماده است که با فایربیس استفاده کند.

اتصال به Firebase

ایجاد اتصال بین Firebase و Angular بسیار آسان است. Firebase برای این کار کتابخانه‌ای به نام AngularFire فراهم می کند. این کتابخانه را قبل نصب کرده ایم!

این تمام چیزی است که برای اتصال به فایربیس نیاز است. توجه داشته باشید که ما todos را به انتهای URL اضافه کرده ایم. به این معنی که می توانیم تمام داده ها را در شی todos در دیتابیس ذخیره کنیم.

$firebaseArray باعث می شود داده های ذخیره شده در فایربیس بصورت JSON از طریق متغیر todos قابل دسترس باشد (به همین سادگی).

AngularFire دارای متدهایی مثل add save remove است که می توانیم به راحتی اقدام به اضافه، آپیدت، حذف کنیم.

حال برنامه را اجرا کنید و چند تا تسک به آن اضافه کنید، همانطور که مشاهده خواهید کرد داده ها با سرعت بالا به Firebase ارسال می شود و با سرعت نیز نشان داده می شود:

آموزش Angular

یکی از چیزهای جالبی که در برنامه Real-Time وجود دارد این استف که اگر برنامه Todo خود را در چندین تب مختلف در مرورگر باز کنید و تغییرات در دادهای فایربیس انجام دهید، این تغییرات به تمام کاربرها نیز منعکس می شود!

 

خلاصه

امروزه برنامه های real-time بسیاری در وب و موبایل قابل مشاهده است. سرویس هایی مثل Firebase  بسیاری از کارهای سخت و تکراری برای شما خودکار انجام می دهند و دیگر لازم نیست نگران امنیت برنامه خود باشید.  توسعه دهندگان Front-End تنها با داشتن اطلاعات کلی در مورد Back-End در فایربیس می تواندد تنها نگران طراحی برنامه خود باشند.

Firebase سرویس فوق العاده ای است که هر هکری باید نگاهی به آن بیندازد و همچنین چیزهای جذاب با آن درست کند.


  • محمد

    ممنون عالی بود
    فقط اینجوری که همه دسترسی دارن به دیتابیس!

    • پاتریک درآواکیانس

      بله! این فقط تسته!
      شما باید از بخش security & rules دسترسی به دیتابیس محدود کنید تا هر کسی نتواند داده های json دستکاری کند 😉

  • فرشید علی اکبری

    سلام
    بسیار عالی بود.ممنون.
    مهندس عظیمی هم در در فیلم های آموزشی خودشون در سایت parsclick.net هم از فایربیس استفاده کرده وهم در استارت کار با اون توضیحاتی رو به برنامه نویسان داده که جا داره از ایشون هم تشکر کنیم.