ساخت اپلیکیشن چت با فلاتر و فایربیس بخش 1

یکی از ابزارهای محبوبی که اکثر برنامه نویسان در پروژه های خود از آن استفاده میکنند فایربیس FireBase است که توسط شرکت گوگل ارائه شده است.

از فایربیس میتونید به عنوان یک سرور بک اند یا به عنوان بخشی از بک اند خودتون استفاده کنید که امکانات دیتابیس, گزارش گیری, ذخیره فایل, احراز هویت و… باعث شده تا بخش زیادی از برنامه نویسی از روی دوش شما برداشته شود.

در این آموزش قصد داریم تا در چند قسمت نحوه استفاده از FireBase در فریمورک فلاتر را آموزش دهیم که این کار را با یک پروژه در قالب اپلیکیشن پیام رسان انجام میدهیم.

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

مواردی که در این مجموعه آموزشی بررسی میکنیم شامل:

• ثبت نام و لاگین کردن در فایربیس
• استفاده از Cloud FireStore
• آپلود فایل در فایربیس

ساخت اکانت FireBase

برای استفاده بدون مشکل از فایربیس پیشنهاد میکنم از سرویس شکن استفاده کنید که به سایت های تحریم کننده ایران بدون هیچ مشکلی دسترسی خواهید داشت.

برای شروع کار نیاز به اکانت گوگل دارید.

ابتدا وارد آدرس firebase.google.com شوید و پروژه جدیدی تعریفی کنید. نیاز دارید تا برای پروژه یک اسم انتخاب کنید.

برای تنظیمات بخش iOS روی آیکون آن کلیک کنید تا وارد صفحه جدید شوید.

در مرحله بعدی bundle id پروژه را وارد کنید تا فایل مخصوص اپلیکیشن خودتون و دانلود کنید.

در این مرحله پوشه iOS را حتما در برنامه xcode باز کنید و روی پوشه Runner راست کلیک کنید سپس گزینه Add files to Runnner…. را انتخاب کنید و فایل GoogleService-Info.plist را اضافه کنید.

پکیج های FireBase

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

 firebase_auth: ^0.18.3
  firebase_database: ^4.3.0
  firebase_core: ^0.5.2
  cloud_firestore: ^0.14.3+1

احراز هویت در FireBase

بعد از اینکه وارد بخش مدیریتی اپلیکیشن در فایربیس شدید از منوی سمت چپ گزینه authentication را انتخاب کنید و در قسمت Sign in method ثبت نام از طریق Email/Password را فعال کنید.

حالا وارد پروژه فلاتر شوید تا آبجکت های مورد نیاز را ایجاد کنیم.

  var email_controller = TextEditingController();
  var name_controller = TextEditingController();
  var password_controller = TextEditingController();

  final FirebaseAuth _auth = FirebaseAuth.instance;

برای کار با بخش احراز هویت یک آبجکت از کلاس FirebaseAuth میسازیم.

کنترلر های تعریف شده هم برای گرفتن اطلاعات از Textfield ها می باشد.

برای ثبت نام از متد زیر استفاده میکنیم.

void registeruser(var mail,var pass) async {
  final User user = (await _auth.createUserWithEmailAndPassword(
          email: mail, password: pass))
      .user;

  if (user == null) {
    print("sign up failed!!");
  } else {
    print("user created..");
    

  }
}

در این متد با استفاده از دستور createUserWithEmailAndPassword از ایمیل و رمز عبور برای سخت کاربر جدید استفاده میکنیم. میتونید از اکانت گوگل یا شماره موبایل هم برای ساخت اکانت استفاده کنید.

در ادامه نتیجه این متد را داخل یک آبجکت از کلاس User ذخیره میکنیم و با یک جمله شرطی بررسی میکنیم که آیا کاربر با موفقیت ثبت نام شده است یا خیر.

برای لاگین کردن کاربر در اپلیکیشن هم باز به همین شکل تقریبا عمل میکنیم.

فقط از متد signInWithEmailAndPassword استفاده کردیم.

void loginuser(var mail,var pass) async {
  final User user =
      (await _auth.signInWithEmailAndPassword(email: mail, password: pass))
          .user;

  if (user == null) {
    print("sign in failed!!");
  } else {
    print("user login..");
    

  }
}

ذخیره اطلاعات در Cloud FireStore

دیتابیس FireBase که جدید Cloud FireStore نام دارد یک دیتابیس No sql است و خبری از مفاهیم جدول و ستون وجود ندارد.

این دیتابیس یک ویژگی مهم برای ما دارد و اون هم بی درنگ یا Realtime بودن آن است.

در عوض به جای جدول از مفهومی به اسم Collection استفاده میکنیم و قصد داریم کالکشن به نام users ایجاد کنیم تا در آن نام, ایمیل و ایدی کاربران را ذخیره کنیم.

برای ساخت دیتابیس وارد بخش Cloud FireStore شوید و روی گزینه start collection کلیک کنید تا اولین کالکشن دیتابیس را بسازید.

نام این مجموعه را users گذاشتیم و بعد از آن از ما میخواهد که یک رکورد اطلاعات اضافه کنیم به این دیتابیس که البته در اینجا به رکورد Document گفته می شود.

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

برای کار با دیتابیس ابتدا باید یک آبجکت از کلاس CollectionReference بسازید.

  CollectionReference users = FirebaseFirestore.instance.collection('users');

چون کالکشنی که قرار هست با آن کار کنیم users نام دارد به همین در کد بالا به این شکل آبجکت را تعریف کردیم.

برای اضافه کردن اطلاعات به دیتابیس از متد زیر استفاده میکنیم.

  void addser(var mail,var name)async{

    return users.add({
      "name":name,
      "email": mail,
	  "userid": _auth.currentUser.uid
    }).then((value) {
      print("User added");
     
    }).catchError((onError){
      print("error: ${onError}");
    });
  }

این متد را داخل متد ثبت نام کاربر بعد از چک کردن ثبت نام شدن کاربر صدا میزنیم.

اگر اطلاعات با موفقیت ذخیره نشود قسمت catchError اجرا می شود.

برای اینکه از فایربیس داخل فلاتر بدون مشکل کار کنید باید کتابخانه را داخل متد runApp مقداردهی کنید.

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

برای طراحی صفحات اپلیکیشن تا به این جای کار نیاز به صفحات ثبت نام, لاگین و لیست کاربران داریم که کاربر بعد از ثبت نام یا لاگین کردن وارد بخش لیست کاربران شود.

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

اما زمانی که کاربر ثبت نام کرد یا لاگین نیاز داریم که از داخل این ویجت ها مقدار state صفحه اصلی که نمایش دهنده یکی از آیتم های لیست است را تغییر دهیم.

برای تغییر state از خارج ویجت بدون کمک ابزارهای مدیریت state مثل بلاک میتونیم از روش تعریف یک نوعی اینترفیس استفاده کنیم.

برای مثال داخل ویجت sign up در انتهای صفحه دو متد تعریف میکنیم ولی پیاده سازی آنها را در ویجت main انجام میدهیم.

typedef Logincallback = void Function();
typedef onSuccessful = void Function();

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

class LoginPage extends StatefulWidget {


  final Logincallback logincallback;
  final onSuccessful onsuccess;


  LoginPage({this.logincallback, this.onsuccess});

  @override
  _LoginPageState createState() => _LoginPageState();
}

زمانی که کاربر با موفقیت لاگین کرد یا درخواست انتقال به صفحه ثبت نام را داشت کافیست این متد صدا زده شود.

widget.logincallback();

در صفحه main هم کافیست دو متد از نوع void تعریف کنیم که مقدار state را تغییر دهد و این دو متد را به constructor ویجت ها پاس دهیم.

 void onSingupSuccess(){
    setState(() {
      current_page=2;
    });
  }

  void onLogin(){
    setState(() {
      current_page=0;
    });
  }

    page_list.add(LoginPage(onsuccess:onSingupSuccess,logincallback:onLogin));

بدین ترتیب مشکل تغییر صفحه و آپدیت شدن state هم حل میشود.

برای درک بهتر لطفا ویدوهای آموزشی را مشاهده کنید.

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