ساخت یک فرم وب از ابتدا با AngularJS و Firebase

ساخت یک فرم وب از ابتدا با AngularJS و Firebase

در این آموزش، می خواهیم با استفاده از AngularJS و Firebase یک برنامه تحت وب ساده از ابتدا ایجاد کنیم. یک برنامه وبلاگ نویسی ساده خواهد بود، جایی که کاربر می تواند ثبت نام کند، ورود به سیستم کند یا یک پست منتشر کند. این آموزش فرض کرده است که شما با دانش ابتدایی AngularJS آشنا هستید.

 

[fa type=”download”] دانلود 


 

 

معرفی AngularJS

AngularJS یکی از بهترین فریم ورک های MVC جاوا اسکریپت است.  این یک چارچوب ساختاری برای ایجاد برنامه های تحت وب پویا با قابلیت گسترش HTML است. ویژگی هایی مانند اطلاعات اتصال (data binding) و تزریق وابستگی (dependency injection) توسعه را با کمترین کد نویسی آسان می کند. HTML برای اعلان صفحات ایستا عالی است، اما هنگامی که می خواهیم در صفحات پویا استفاده کنیم دچار تزلزل می شود. AngularJS این امکان را که لغات HTML را برای برنامه خود گسترش دهید. در نتیجه محیط توسعه فوق العاده موثر، خواندنی و و سریع به منظور توسعه می شود.

معرفی Firebase

فرض کنید که ساخت برنامه تحت وب بدون نگرانی در رابطه با اینکه پشت برنامه (back-end) چه اتفاقی می افتد، باشد. Firebase این امکان را برای همگان سازی داده ها (data binding) در زمان واقعی (real-time) با برنامه ما فراهم می سازد. تمام چیزی که لازم داریم فراخوانی تعدادی API است. Firebase دارای API های  قوی برای ذخیره سازی و همگان سازی داده در زمان واقعی است. ترکیب قدرت AngularJS اتصال دو طرفه داده ها با نتایج Firebase در هماهنگ سازی کاملا عالی است.

شروع کار با AngularJS

پروژه angular-seed یک boilerplate است که برای ساخت برنامه های وب با استفاده از AngularJS ایجاد شده است. ابتدا این پروژه را یا بطور مستقیم از اینجا دانلود کنید، یا پروژه angular-seed را از مخزن Github کلون کنید.

به پوشه ی پروژه خود رفته و وابستگی ها مورد نیاز زا نصب کنید.

سرور node را اجرا کنید:

از طریق مرورگر خود به آدرس http://localhost:8000/app/index.html رفته و اجرای پیشفرض برنامه را مشاهده کنید. به دایرکتوری app در داخل angular-seed رفته. این جایی است که کدها برنامه در آن ساکن شده اند. در داخل پوشه ی app فایل app.js را پیدا کرده که این فایل هسته ی برنامه می باشد. ما قرار است تمام ماژول های در سطح برنامه و مسیرها (routes) را داخل این فایل تعریف کنیم. به طور پیش فرض، پروژه ی angular-seed دارای دو view است، view1 و view2. پوشه های view1 و view2 را از پوشه ی برنامه پاک کنید. بیایید از ابتدا شروع. فایل app.js را باز کنید و کد های موجود را پاک کنید. در فایل app.js مسیر های برنامه خود را تعریف می کنیم، به عنوان مثال، چطور به درخواست هایی مانند home/ رسیدگی کند. به منظور تعریف مسیر یا routes، به یک ماژول AngularJS به نام ngRoute نیاز داریم. برای استفاده از ngRoute ما ابتدا نیاز داریم که آن را به برنامه خود تزریق یا اضافه کنیم. ما از angular.module برای اضافه کردن ماژول ngRoute به برنامه، همانطور که در زیر نشان داده شده است استفاده می کنیم:

ماژول ngRoute کامپوننتی به نام routeProvider$ دارد که برای پیکربندی routesها مفید است. ما routeProvider را در متد config در angular.module تزریق می کنیم و routes خود را در تابع پاسخ (callback) که در زیر نشان داده شده است تعریف می کنیم:

در ادامه، فایل index.html را باز کنید و اسکریپت هایی که به view1 و view2 ارجاع داده شده است را پاک کنید. تمام چیزهای داخل تگ body در فایل index.html را پاک کنید به جز اسکریپت ها و div که مربوط به ngView می شود:

ngView یک دستور دهنده است که کمک می کند نما های متصل به یک مسیر خاص در داخل طرح اصلی (index.html) نمایش داده شود. بنابراین هر بار که route تغییر می کند، محتوای div بالا هم تغییر می کند. حالا بیایید یک نمای جدید ایجاد کنیم که کاربر بتواند به سیستم وارد شود. در داخل دایرکتوری app یک پوشه ی جدید به نام home ایجاد کنید. در home، دو فایل به نام های home.html و home.js ایجاد کنید. home.html را باز کنید و کدهای HTML زیر را به آن اضافه کنید:

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

در داخل home.js ما یک routes تعریف کرده ایم تا برنامه به نمای home دسترسی داشته باشد. routeProvider متدی به نام when دارد که برای ساخت یک route برای نمای home استفاده خواهیم کرد. وقتی یک route جدید را تعریف می کنیم، ما یک templateUrl تعریف می کنیم که در index.html نشان داده  شود. همراه با آن، ما همچنین می خواهیم controller را برای scope$ تازه ایجاد شده ی نمای home تنظیم کنیم. یک controller، منطقی است که یک نمای خاصی را کنترل می کند. فایل شما باید بصورت زیر باشد:

 

حال فایل app.js را باز کنید و ماژول home، فایل myApp.home  را به برنامه اضافه کنید: همچنین مسیر پیش فرض برنامه برنامه را با استفاده از متد routeProvider.otherwise$ در نمای home تعریف کنید.

 

 

در مرحله بعد، به منظور نمایش در صفحه اصلی، نیاز داریم که home.js را در داخل قالب HTML فایل اصلی برنامه قرار دهیم. index.html را باز کنید و کد زیر را اضافه کنید:

سرور خود را شروع دوباره کنید و به آدرس http://localhost:8000/app/index.html بروید و باید خروجی را به صورت زیر مشاهده کنید:

home

 

شروع کار با Firebase

به منظور شروع، ما نیاز داریم که یک حساب کاربری رایگان در Firebase ایجاد کنیم. وقتی در وب سات ثبت نام کردید صفحه ای مانند زیر مشاهده می کنید:

 

fire

 

توجه داشته باشید که وقتی URL برنامه را درست کردید، بر روی دکمه ی Manage App کلیک کنید. ما با استفاده از این URL فایربیس می توانیم با دیتابیس Firebase تعامل داشته باشیم.

ما با استفاده از Firebase به برنامه خود با استفاده از یک ایمیل و رمز عبور، اعتبار می دهیم. به منظور رسیدن به آن کار، احتیاج داریم که آن را از طریق Firebase فعال کنیم. از طریق Dashboard بر روی تب Login & Auth کلیک کنید. در این صفحه، در زیر تب Email & Password، تیک Enable Email & Password Authentication را فعال کنید:

 

enable-email

 

کاربر جدید را با استفاده از یک Email و Password ایجاد کنید تا عمل وارد شدن کاربر به سیستم را بعد از پیاده سازی امکان پذیر کند:

 

add-email-password

 

پیاده سازی قابلیت ورود به سیستم

به منظور استفاده از Firebase، اسکریپت های زیر را به فایل app/index.html اضافه کنید:

در ادامه، احتیاج داریم که ماژول firebase را به home.js تزریق کنیم. ماژول firebase را به home.js همانطور که در زیر آمده است اضافه کنید:

 

حال آمده این هستیم که با Firebase تعامل داشته باشیم. home.js را باز کنید و در داخل HomeCtrl، تابع جدیدی به نام SignIn برای تأیید هویت کاربر ایجاد کنید. ما با استفاده از scope$ تابع جدیدی درست می کنیم. scope$ یک شی است که به مدل برنامه اشاره می کند، و همچنین به عنوان چسب بین کنترلر (controller) برنامه و نما (view) عمل می کند. از این رو شی scope$ در تابع SignIn تزریق می شود. بطوری که مدل شی view از داخل تابع Sign In قابل دسترسی است.

در ادامه، در داخل HomeCtrl یک نمونه از Firebase با استفاده از URL فایربیس ایجاد کنید:

ماژول firebaseSimpleLogin$ برای اعتبار دادن Firebase با استفاده از شماره شناسه email و password استفاده می شود. برای استفاده از آن، احتیاج داریم که ماژول firebaseSimpleLogin$ را در HomeCtrl تزریق کنیم:

با استفاده از firebaseObj یک firebaseSimpleLogin$ ایجاد کنید، همانطور که در زیر آمده است:

حالا، با استفاده از login$، ما ایمیل و رمز عبور اعتبار سنجی می کنیم. loginObj.$login ایمیل و رمز عبور را به عنوان پارامتر قبول می کند. در احراز هویت موفق، یک پاسخ موفق خواهیم دید و در یک احراز هویت نا موفق یک خطا مشاهده می کنیم.

حال برای اینکه تمام کنترلر ها درست کار کنند، باید controller را به view ضمیمه کنیم. AngularJS یک دستور دهنده به نام ngController برای پیوند controller به view فراهم می کند. home.html را باز کنید و دستور دهنده ی ngController را برای پیوند به HomeCtrl به عنصر body اضافه کنید.

ما نیاز داریم که مقادیر ایمیل و رمز عبور در تابع SignIn قابل دسترسی باشد. AngularJS دستور دهنده ای به نام ngModel فراهم می کند تا مقدارش را به scope$ اتصال دهد تا از طریق تابع SignIn قابل دسترسی باشد. دستور دهنده ی ngModel را به عناصر email و password اضافه کنید:

در آخر، دستور دهنده ی ngClick را به دکمه sign-in برای فراخوانی تابع SignIn اضافه کنید:

تمام تغییرات را ذخیره کنید و سرور را از نو اجرا کنید. به آدرس http://localhost:8000/app/index.html#/home رفته سعی کنید با استفاده از ایمیل developer.avakian@gmail.com و پسورد baboon وارد سیستم شوید. اگر موفق به وارد شدن شدید پیغامی با نوشته ی Authentication successful در کنسول مرورگر خواهید دید.