Flet چیست؟ یک فریم‌ورک ساده اما قدرتمند!

همه‌ی ما به یک اپلیکیشن To-Do نیاز داریم که کارهایمان را مرتب کند، ولی چطور می‌شود یکی برای خودمان بسازیم؟ نگران نباشید، حتی اگر تازه با برنامه‌نویسی آشنا شده‌اید، با Python و فریم‌ورک جذاب Flet، می‌توانید در کمتر از ۳۰ دقیقه یک اپلیکیشن کاربردی بسازید.

Flet ابزاری است که بدون نیاز به دانش HTML، CSS یا JavaScript، امکان ساخت اپلیکیشن‌های چندپلتفرمی (دسکتاپ، وب و موبایل) را فراهم می‌کند. اگر می‌خواهید دست به کار شوید و مهارتتان را به چالش بکشید، این آموزش برای شماست.

در این مقاله از سایت کداکسپلور، قدم‌به‌قدم همراه شما هستیم تا یک اپلیکیشن To-Do ساده، اما حرفه‌ای بسازید و حتی آن را با دیگران به اشتراک بگذارید.

آنچه در این مقاله می‌خوانید:

• چرا Flet؟ مزایای استفاده از این فریم‌ورک
• آماده‌سازی محیط توسعه و اولین اپلیکیشن ساده
• اضافه کردن وظایف با طراحی زیبا
• قابلیت ویرایش، حذف و فیلتر وظایف
• نهایی‌سازی و اشتراک‌گذاری اپلیکیشن

چرا Flet؟

Flet به شما این امکان را می‌دهد که بدون نیاز به یادگیری زبان‌های اضافی، تنها با Python اپلیکیشن‌های مدرن و جذاب بسازید. رابط کاربری این فریم‌ورک ریسپانسیو و ساده است، و شما می‌توانید با چند خط کد، به نتایج حرفه‌ای دست پیدا کنید.

شروع به کار با Flet

برای شروع، ابتدا باید Python 3.8 یا بالاتر را روی سیستم خود نصب کنید و پکیج Flet را به کمک دستور زیر اضافه کنید:

pip install flet

حالا می‌توانید اولین اپلیکیشن ساده خود را ایجاد کنید:

import flet as ft
def main(page: ft.Page):
    page.add(ft.Text(value="سلام دنیا!"))
ft.app(main)

وقتی کد را اجرا کنید، یک پنجره با متن “سلام دنیا!” ظاهر می‌شود. ساده و جذاب، درست است؟

طراحی اپلیکیشن To-Do

حالا وقت آن رسیده که اپلیکیشن To-Do را بسازیم. ابتدا یک ورودی (TextField) برای ثبت وظایف و یک دکمه برای اضافه کردن وظایف جدید ایجاد می‌کنیم:

import flet as ft
def main(page: ft.Page):
    def add_clicked(e):
        page.add(ft.Checkbox(label=new_task.value))
        new_task.value = ""
        page.update()
    new_task = ft.TextField(hint_text="چه کاری باید انجام شود؟")
    page.add(new_task, ft.FloatingActionButton(icon=ft.icons.ADD, on_click=add_clicked))
ft.app(main)

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

زیباتر کردن طراحی

با اضافه کردن قابلیت چیدمان (Row و Column)، اپلیکیشن خود را حرفه‌ای‌تر جلوه دهید:

def main(page: ft.Page):
    def add_clicked(e):
        tasks_view.controls.append(ft.Checkbox(label=new_task.value))
        new_task.value = ""
        page.update()
    new_task = ft.TextField(hint_text="چه کاری باید انجام شود؟", expand=True)
    tasks_view = ft.Column()
    page.add(
        ft.Column(
            width=600,
            controls=[
                ft.Row(
                    controls=[
                        new_task,
                        ft.FloatingActionButton(icon=ft.icons.ADD, on_click=add_clicked),
                    ]
                ),
                tasks_view,
            ],
        )
    )
ft.app(main)

حالا اپلیکیشن شما زیباتر شده و تجربه بهتری ارائه می‌دهد.

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

قبل از اضافه کردن قابلیت‌های پیشرفته به اپلیکیشن To-Do، باید ساختار برنامه را بهینه‌تر کنیم. به جای اضافه کردن تمامی قابلیت‌ها به صورت مستقیم در متد main، بهتر است از یک کلاس برای مدیریت وضعیت و عملکرد اپلیکیشن استفاده کنیم. این روش نه تنها کد را خواناتر می‌کند، بلکه امکان گسترش آسان‌تر اپلیکیشن را نیز فراهم می‌سازد.

در این بخش، کلاس TodoApp را معرفی می‌کنیم که به عنوان کنترل اصلی اپلیکیشن عمل می‌کند. این کلاس وظیفه مدیریت تمامی عناصر رابط کاربری و رویدادهای مرتبط با آن را بر عهده دارد.

کد پایه با استفاده از کلاس

در ادامه یک نمونه اولیه از کلاس TodoApp ارائه شده است که می‌توانید از آن برای ساختاردهی اپلیکیشن خود استفاده کنید:

import flet as ft
class TodoApp(ft.Column):
    def __init__(self):
        super().__init__()
        # فیلد ورودی برای افزودن وظایف جدید
        self.new_task = ft.TextField(hint_text="چه کاری باید انجام شود؟", expand=True)
        # لیست وظایف
        self.tasks = []  # وظایف ذخیره شده
        self.tasks_view = ft.Column()  # بخش نمایش وظایف
        # کنترل رابط کاربری
        self.controls = [
            ft.Row(
                controls=[
                    self.new_task,
                    ft.FloatingActionButton(
                        icon=ft.icons.ADD, on_click=self.add_task
                    ),
                ]
            ),
            self.tasks_view,
        ]
    def add_task(self, e):
        # متد برای اضافه کردن یک وظیفه جدید
        if self.new_task.value.strip() == "":
            return
        self.tasks.append(self.new_task.value)
        self.tasks_view.controls.append(ft.Checkbox(label=self.new_task.value))
        self.new_task.value = ""
        self.update()
def main(page: ft.Page):
    page.title = "To-Do App"
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER
    page.update()
    # create application instance
    todo = TodoApp()
    # add application's root control to the page
    page.add(todo)
ft.app(main)

چرا از کلاس استفاده کنیم؟

1. مدیریت بهتر: با کپسوله کردن داده‌ها و عملکردها در یک کلاس، می‌توانید به راحتی اجزای مختلف را مدیریت کنید.
2. قابلیت گسترش: افزودن قابلیت‌های جدید مانند فیلتر کردن وظایف یا حذف آن‌ها با این ساختار ساده‌تر خواهد بود.
3. خوانایی بیشتر: کدهای شما مرتب‌تر و خواناتر می‌شوند.

افزودن قابلیت‌های پیشرفته

با استفاده از کلاس TodoApp، اکنون آماده‌ایم تا قابلیت‌های پیشرفته‌تری مانند فیلتر وظایف با استفاده از Tabs را به اپلیکیشن خود اضافه کنیم. این قابلیت به کاربران اجازه می‌دهد که به راحتی وظایف خود را بر اساس وضعیت (همه، فعال، تکمیل‌شده) دسته‌بندی کنند.

• ویرایش وظایف: دکمه‌ای برای ویرایش نام وظایف.
• حذف وظایف: دکمه‌ای برای حذف وظایف تکمیل‌شده.
• فیلتر وظایف: نمایش وظایف بر اساس وضعیت (همه، فعال یا تکمیل‌شده).

برای مثال، قابلیت فیلتر وظایف با استفاده از Tabs:

import flet as ft
class Task(ft.Column):
    def __init__(self, task_name, on_delete):
        super().__init__()
        self.task_name = task_name
        self.on_delete = on_delete
        # اجزای وظیفه
        self.display_task = ft.Checkbox(value=False, label=self.task_name)
        self.edit_name = ft.TextField(expand=1)
        self.display_view = ft.Row(
            alignment=ft.MainAxisAlignment.SPACE_BETWEEN,
            vertical_alignment=ft.CrossAxisAlignment.CENTER,
            controls=[
                self.display_task,
                ft.Row(
                    spacing=0,
                    controls=[
                        ft.IconButton(
                            icon=ft.icons.CREATE_OUTLINED,
                            tooltip="ویرایش وظیفه",
                            on_click=self.edit_clicked,
                        ),
                        ft.IconButton(
                            ft.icons.DELETE_OUTLINE,
                            tooltip="حذف وظیفه",
                            on_click=self.delete_clicked,
                        ),
                    ],
                ),
            ],
        )
        self.edit_view = ft.Row(
            visible=False,
            alignment=ft.MainAxisAlignment.SPACE_BETWEEN,
            vertical_alignment=ft.CrossAxisAlignment.CENTER,
            controls=[
                self.edit_name,
                ft.IconButton(
                    icon=ft.icons.DONE_OUTLINE_OUTLINED,
                    icon_color=ft.colors.GREEN,
                    tooltip="ذخیره وظیفه",
                    on_click=self.save_clicked,
                ),
            ],
        )
        self.controls = [self.display_view, self.edit_view]
    def edit_clicked(self, e):
        self.edit_name.value = self.display_task.label
        self.display_view.visible = False
        self.edit_view.visible = True
        self.update()
    def save_clicked(self, e):
        self.display_task.label = self.edit_name.value
        self.display_view.visible = True
        self.edit_view.visible = False
        self.update()
    def delete_clicked(self, e):
        self.on_delete(self)
class TodoApp(ft.Column):
    def __init__(self):
        super().__init__()
        self.new_task = ft.TextField(hint_text="چه کاری باید انجام شود؟", expand=True)
        self.tasks_view = ft.Column()
        self.controls = [
            ft.Row(
                controls=[
                    self.new_task,
                    ft.FloatingActionButton(
                        icon=ft.icons.ADD, on_click=self.add_clicked
                    ),
                ]
            ),
            self.tasks_view,
        ]
    def add_clicked(self, e):
        if not self.new_task.value.strip():
            return
        task = Task(self.new_task.value, self.task_delete)
        self.tasks_view.controls.append(task)
        self.new_task.value = ""
        self.update()
    def task_delete(self, task):
        self.tasks_view.controls.remove(task)
        self.update()
def main(page: ft.Page):
    page.title = "اپلیکیشن وظایف"
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER
    page.add(TodoApp())
ft.app(main)

نهایی‌سازی و اشتراک‌گذاری

حالا که اپلیکیشن شما آماده است، می‌توانید آن را با دوستان و همکارانتان به اشتراک بگذارید. با ابزارهای Flet، به راحتی می‌توانید اپلیکیشن را به وب، دسکتاپ یا حتی موبایل منتقل کنید.

همچنین بخوانید: نصب Stable diffusion

برای خروجی‌های مختلف کافی است فقط در ترمینال گزینه‌های مناسب را استفاده کنید. به عنوان مثال:

خروجی وب: از دستور --web استفاده کنید تا اپلیکیشن شما به صورت یک وب‌اپلیکیشن در مرورگر اجرا شود.

flet run main.py --web

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

flet run main.py --android

خروجی دسکتاپ: برای اجرای اپلیکیشن روی ویندوز، مک یا لینوکس، کافی است کد خود را با استفاده از دستور زیر اجرا کنید:

flet run main.py

نتیجه‌گیری

همان‌طور که دیدید، ساخت یک اپلیکیشن To-Do با Python و Flet نه‌تنها ساده، بلکه لذت‌بخش است. حالا نوبت شماست که این اپلیکیشن را سفارشی کنید و قابلیت‌های جذاب‌تری به آن بیفزایید. به نظر شما، چه امکانات دیگری می‌توان به این اپ اضافه کرد؟ نظرتان را در بخش کامنت‌ها با ما در میان بگذارید!