ایجاد یک فرم لاگین ساده در فلاتر با الگوی BLoC – از صفر تا صد

فلاتر یک SDK است که امکان ساخت اپلیکیشن‌هایی برای چند پلتفرم شامل پلتفرم‌های موبایل را از کدبیس منفرد فراهم ساخته است. اگر تجربه کدنویسی با این فریمورک را داشته باشید، می‌دانید که امکان ساخت کل اپلیکیشن با استفاده از یک فایل منفرد در فلاتر وجود دارد، گرچه روش ایده‌آلی محسوب نمی‌شود. در این مقاله با روش ایجاد یک فرم لاگین ساده در فلاتر با بهره‌گیری از الگوی BLoC آشنا می‌شویم.

زیبایی یک پروژه در معماری اپلیکیشن نهفته است. هنگامی که پروژه را به بخش‌های منطقی تقسیم‌بندی می‌کنیم که هریک به اندازه بقیه مهم هستند، نه‌تنها به ارتقای قابلیت نگهداری پروژه کمک می‌کنیم، بلکه به درک بهتر پروژه نیز کمک کرده‌ایم.

از میان الگوهای معماری موجود برای فلاتر می‌توان از الگوهای Vanilla ،Scoped Model و BLoC به عنوان سه مورد از رایج‌ترین گزینه‌ها استفاده کرد. استفاده از الگوی BLoC توصیه می‌شود زیرا واکنشی است، منطق تجاری، مدیریت حالت و منطق UI را جدا می‌کند و از سوی جامعه توسعه‌دهندگان گوگل نیز پیشنهاد شده است.

در این راهنما تلاش می‌کنیم به توسعه‌دهندگان موبایل که تاکنون از فلاتر استفاده نکرده‌اند کمک کنیم تا این فریمورک را بهتر درک کنند. بنابراین در ادامه یک اپلیکیشن ساده فلاتر با استفاده از الگوی BLoC ایجاد می‌کنیم. پیش‌فرض ما بر این است که شما با مبانی توسعه با استفاده از اندروید استودیو آشنا هستید.

شروع

کار خود را با ایجاد یک پروژه جدید فلاتر با استفاده از اندروید استودیو و تعیین نام login_demo برای آن آغاز می‌کنیم.

در ادامه همه کدهای تولیدشده خودکار را از فایل main.dart پاک کرده و تک خط زیر و گزاره import را وارد کنید:

import ‘package:flutter/material.dart’;

void main() => runApp(App());

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

زمانی که ساختار پوشه پایان یافت، یک فایل به نام app.dart درون src folder ایجاد می‌کنیم و کد زیر را درون آن قرار می‌دهیم:

تا به اینجا صرفاً یک ویجت ریشه اپلیکیشن ایجاد کرده‌ایم. اینک می‌توانیم آن را اجرا کرده و یک صفحه سیاه با متن Login Demo app به رنگ قرمز ببینیم. پیش از نوشتن کد بیشتر، کمی در مورد کاری که می‌خواهیم انجام دهیم و چگونگی آن توضیح می‌دهیم.

ما یک اپلیکیشن ساده فلاتر ایجاد می‌کنیم که از الگوی BLoC پیروی می‌کند و شامل دو صفحه به نام‌های صفحه ورود (Login) و صفحه اصلی (Home) است. صفحه ورود باید به کاربر امکان وارد کردن اطلاعات احراز هویت معتبر (ایمیل و رمز عبور) را بدهد و با شبیه‌سازی شبکه کاربر وارد شود. هر بار که یک نشست باز می‌شود کاربر را به صفحه اصلی هدایت می‌کنیم.

زمانی که از الگوی BLoC استفاده می‌کنیم، هر صفحه یک فایل BLoC مرتبط خواهد داشت. در ادامه یک فایل BLoC برای صفحه اپلیکیشن که در بخش قبلی ایجاد کردیم می‌سازیم. به منوی New->Dart File بروید و نام فایل جدید را authorization_BLoC.dart بگذارید. آن را درون پکیج BLoCs نگه دارید. کد زیر را درون این فایل قرار دهید:

این BLoC درون اپلیکیشن برای حفظ نشست (Session) اپلیکیشن مورد استفاده قرار می‌گیرد.

این BLoC شامل 3 تابع است که هر یک به صورتی نامگذاری شده که مقصود آن را توضیح می‌دهد:

1. openSession(String Token) – این تابع مسئول باز کردن نشست کاربر در زمان وارد شدن وی است.
2. closeSession – این تابع مسئول بستن نشست کاربر در مواردی است که کاربرمی خواهد از اپلیکیشن خارج شود.
3. restoreSession – این تابع مسئول بازیابی نشست کاربر در مواردی است که اپلیکیشن از حالت خاتمه یافته باز می‌شود.

اکنون به پیکربندی BLoC در فایل app.dart می‌پردازیم و تابع createContent()‎ را با کد زیر به‌روزرسانی می‌کنیم:

خط ;()authBLoC.restoreSession را در ابتدای متد build(BuildContext context) در ویجت اضافه کنید. اکنون متد نهایی به صورت زیر درمی‌آید:

با اعمال این تغییرات، مقداری پیشرفت به دست آمده است، هر بار که نشست کاربر به‌روزرسانی می‌شود، UI نیز بر اساس آن به‌روزرسانی خواهد شد. فعلاً خطاها را نادیده بگیرید. سپس دو کلاس برای شبیه‌سازی عملیات شبکه برای ورود کاربر ایجاد می‌کنیم. یک فایل dart درون پکیج resources ایجاد کرده و نام آن را repository.dart می‌گذاریم. کد زیر را در این فایل قرار دهید:

فایل دیگری برای مدیریت همه عملیات احراز هویت شبکه ایجاد کنید. آن را درون همان پکیج حفظ کنید و نام آن را auth_provider.dart گذارده و کد زیر را در آن بنویسید:

در این زمان صرفاً یک توکن نشست را بدون هیچ عملیاتی بازگشت می‌دهیم و سپس پاسخ را به مدت 1 ثانیه به تأخیر می‌اندازیم. اینک فایل Login BLoC را درون پکیج BLoCs با نام login_BLoC.dart ایجاد کرده و کد زیر را در آن می‌نویسیم:

در این کد سه متغیر rxdart به نام‌های emailController ،_passwordController ،_loadingData_ ایجاد کرده‌ایم. دو متغیر نخست مسئول مدیریت اعتبارسنجی فیلدهای ایمیل و رمز عبور هستند و متغیر آخر برای به‌روزرسانی UI جهت نمایش بارگذاری داده‌ها مورد استفاده قرار می‌گیرد.

ایجاد صفحه ورود

اکنون فایل login screen class را درون ui package با نام login_screen.dart ایجاد می‌کنیم. سپس کد زیر را در آن وارد می‌نماییم:

تا به اینجا از 4 ویجت پایه زیر استفاده کرده‌ایم:

1. emailField – این ویجت ورودی ایمیل را می‌گیرد، آن را به یک BLoC به نام changeEmail وصل می‌کند تا ورودی کاربر را اعتبارسنجی کند و UI را بر همین مبنا به‌روزرسانی می‌کند.
2. passwordField - مشابه emailField است، اما ورودی رمز عبور می‌گیرد و آن را اعتبارسنجی می‌کند.
3. loadingIndicator – برای نمایش بارگذاری UI در زمان‌های انتظار برای فراخوانی API مورد استفاده قرار می‌گیرد.
4. submitButton – این ویجت برای دکمه‌ای استفاده می‌شود که به کاربر امکان ورود با استفاده از اطلاعات احراز هویت را می‌دهد. این دکمه زمانی که ایمیل و رمز عبور اعتبارسنجی شدند فعال می‌شود. به همین جهت از سوی BLoCk به نام submitValid نیز کنترل می‌شود.

اکنون زمانی که کاربر با موفقیت وارد شود، او را به صفحه اصلی اپلیکیشن هدایت می‌کنیم. چنان که پیش‌تر اشاره کردیم، هر صفحه دو فایل دارد که یکی فایل منطق تجاری (BLoC File) و دیگری فایل اینترفیس کاربری (UI File) است.

ایجاد صفحه اصلی

اینک دو فایل جدید برای صفحه اصلی به نام‌های home_BLoC.dart و home_screen.dart ایجاد می‌کنیم.

این صفحه اصلی شامل تنها یک دکمه است که به کاربر امکان خروج از اپلیکیشن می‌دهد. اینک اپلیکیشن را اجرا می‌کنیم تا ببینیم چه اتفاقی رخ می‌دهد. شما اینک به عنوان کاربر باید یک صفحه ساده ورود با فیلدهای ایمیل و رمز عبور ببینید. در این زمان در صورتی که همه ورودی‌های معتبر را ارائه کنید و روی گزینه ادامه بزنید، به صفحه اصلی اپلیکیشن هدایت می‌شوید. بهترین بخش داستان را برای انتها نگه داشته‌ایم. اگر اپلیکیشن را ببندید و دوباره وارد شوید، به صفحه اصلی هدایت خواهید شد. اگر در این حالت خارج شوید، به صفحه ورود هدایت می‌شوید.

امیدواریم با مطالعه این راهنما، ایده‌ای در مورد الگوی BLoC و چگونگی آن به دست آورده باشید و به شما کمک کرده باشد که کد خود را سازماندهی کرده و بین منطق تجاری و UI تمایز قائل شوید.

اگر این نوشته برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌های برنامه‌نویسی اندروید
• مجموعه آموزش‌های برنامه‌نویسی جاوا
• مجموعه آموزش‌های برنامه‌‌نویسی
• ساخت بازی پازل با فلاتر — از صفر تا صد ساده
• طراحی و کدنویسی فرم در فلاتر — راهنمای کاربردی
• قابلیت چند زبانی در فلاتر — به زبان ساده

==