ساخت اپلیکیشن چت با فلاتر و فایربیس بخش ۱
یکی از ابزارهای محبوبی که اکثر برنامه نویسان در پروژه های خود از آن استفاده میکنند فایربیس 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 هم حل میشود.
برای درک بهتر لطفا ویدوهای آموزشی را مشاهده کنید.
استفاده از مطالب آموزشی فقط با ذکر منبع مجاز است.
دانلود قسمت های اول و دوم
برای مشاهده لینک دانلود لطفا وارد حساب کاربری خود شوید!
وارد شویدپسورد فایل : گزارش خرابی لینک
مطالب زیر را حتما مطالعه کنید
آموزش پیاده سازی لینت Lint در برنامه نویسی فلاتر
آموزش الگوی تزریق وابستگی در فلاتر Dependency Injection
کتاب های آموزش برنامه نویسی فلاتر + دانلود PDF
آموزش نصب فلاتر و رفع خطاهای رایج ساخت پروژه + ویدیو
آموزش استفاده از نقشه در فلاتر
آموزش ساخت Navigation Drawer در فلاتر
13 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
سلام خیلی مفید و عالی بود. منتظر قسمت های بعد هستیم.
سلام
آیا فایربیس بجز طراحان برای کاربران هم فیلتره ؟
یعنی اگه در اپی ازش استفاده بشه کسی ک نرم افزار رو استفاده میخواد بکنه هم باید فیلترشکن داشته باشه
سلام
بله بعضی سرویس های فایربیس به دلیل تحریم باید کاربر تغییر IP بده
سلام . ممنون از مطالب مفیدتون .
پیشنهاد میکنم ساخت اپلیکیشن چت در فلاتر با سوکت هم رو هم کامل توضیح بدید چون فایربیس تحریم هست .
ممنون از شما
سلام
در صورت فرصت حتما.
سلام، اقای رسولیان من همه اون کارایی که توی فیلم گفتین رو انجام دادم ولی وقتی برنامه رو ران میکنم کل صفحه سفید میشه.
کدا رو دقیق چک کردم.
سلام داخل قسمت لاگ چه پیغامی مینویسه؟
سلام؛ بعد دانلود و کپی کردن فایل google-services.json در مرحله بعدی سایت فایربیس توضیح میده که یسری کد باید داخل فایل های build.gradle (هم در سطح پروژه و هم در سطح app) باید اضافه کنید.
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
keytool جزو Java sdk هست ممکن یا داخل enviroment جاوا رو به درستی ثبت نکردید یا در مسیری که دارید که دستور و فراخوانی میکنی به جاوا دسترسی نداره.
سلام
من با فایربیس کار میکنم ولی چون تحریم هستیم عملا نمیشه کار کرد باهاش(البته با فیلتر شکن).
چون یه نرم افزار با فلاتر نوشتم و الان نیاز دارم به یه محیط مثل فایربیس .
جایگزینی دیگه مثل فایربیس راحت باشه کار باهاش میتونید معرفی کنید.
ممنون میشم راهنماییم کنید.
منم همین مشکل رو دارم. جایگزینی پیدا کردین ؟
سلام میتونید از Appwriter استفاده کنید.