ورود و عضویت
0
سبد خرید شما خالی است
0
سبد خرید شما خالی است

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

13 دیدگاه

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

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

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

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

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

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

ساخت اکانت FireBase

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

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

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

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

برنامه نویسی Flutter

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

فایربیس ios

در این مرحله پوشه 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 گفته می شود.

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

فلاتر Firebase

برای کار با دیتابیس ابتدا باید یک آبجکت از کلاس 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 هم حل میشود.

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

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

13 پاسخ به “ساخت اپلیکیشن چت با فلاتر و فایربیس بخش اول”

  1. alireza K گفت:

    سلام خیلی مفید و عالی بود. منتظر قسمت های بعد هستیم.

  2. محمد یوسف صدیقی گفت:

    سلام
    آیا فایربیس بجز طراحان برای کاربران هم فیلتره ؟
    یعنی اگه در اپی ازش استفاده بشه کسی ک نرم افزار رو استفاده میخواد بکنه هم باید فیلترشکن داشته باشه

  3. علی گفت:

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

  4. Amirasmp گفت:

    سلام، اقای رسولیان من همه اون کارایی که توی فیلم گفتین رو انجام دادم ولی وقتی برنامه رو ران میکنم کل صفحه سفید میشه.
    کدا رو دقیق چک کردم.

    • Hesam گفت:

      سلام داخل قسمت لاگ چه پیغامی مینویسه؟

    • mehrdad.mahdikhani گفت:

      سلام؛ بعد دانلود و کپی کردن فایل google-services.json در مرحله بعدی سایت فایربیس توضیح میده که یسری کد باید داخل فایل های build.gradle (هم در سطح پروژه و هم در سطح app) باید اضافه کنید.

  5. سکینه گفت:

    salam
    chera Terminal barname man error mide va mige dastori be esme keytool ro nemishnase
    ‘keytool’ is not recognized as an internal or external command,
    mamnon misham tozih bedin

    • Hesam گفت:

      keytool جزو Java sdk هست ممکن یا داخل enviroment جاوا رو به درستی ثبت نکردید یا در مسیری که دارید که دستور و فراخوانی میکنی به جاوا دسترسی نداره.

  6. Dude گفت:

    سلام
    من با فایربیس کار میکنم ولی چون تحریم هستیم عملا نمیشه کار کرد باهاش(البته با فیلتر شکن).
    چون یه نرم افزار با فلاتر نوشتم و الان نیاز دارم به یه محیط مثل فایربیس .
    جایگزینی دیگه مثل فایربیس راحت باشه کار باهاش میتونید معرفی کنید.
    ممنون میشم راهنماییم کنید.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Hesam
06 دسامبر 2020
آموزش فارسی فلاتر
آموزش فارسی flutter