Как сделать доступ в личный кабинет с помощью Flet

В этой статье мы рассмотрим, как использовать Flet для создания панели входа в личный кабинет, где пользователь сможет просматривать данные о своих тратах по счёту. 

Для простоты и полноты объяснения будем считать, что номер банковского счета совпадает с номером мобильного телефона, как в недавно ушедшем с рынка Qiwi.

Flet — это фреймворк для разработки кроссплатформенных приложений на языке Python, который предоставляет удобные инструменты и функциональность для создания панелей управления и интерфейсов.

Flet использует Flutter для создания графического интерфейса приложений. Он предоставляет набор виджетов, которые можно использовать для создания различных элементов пользовательского интерфейса, таких как кнопки, текстовые поля, контейнеры и другое. Виджеты в Flet готовы к использованию, их можно комбинировать и настраивать для создания нужного внешнего вида и функциональности приложения.

В следующих разделах рассмотрим пошаговый процесс создания панели входа в личный кабинет с использованием Flet, начиная с настройки окружения и установки фреймворка и заканчивая созданием контроллеров и шаблонов для отображения данных.

Создание приложения

Покажу пример реализации входа в личный кабинет и получения данных о тратах со счета через SMS-код. Для отправки SMS-кода воспользуемся SMS API от платформы MTC Exolve. Путём взаимодействия с API покажем пример, как без труда отправить одноразовый код на указанный номер телефона.

Проект будет иметь следующую структуру:

fletsms/     /venv     /example_db         __init__.py         dbinfo.py     /mtt         __init__.py         client.py     config.py     main.py     .env

В файле .env хранятся переменные окружения: API-ключ и номер телефона, с которого будут отправляться SMS. 

В файле config.py получим данные из переменных окружения.

from dotenv import dotenv_values  info_env = dotenv_values('.env')  API_KEY = info_env.get('API_KEY') PHONE_SEND = info_env.get('PHONE_SEND')

Модуль генерации одноразового пароля

Перейдём в модуль client.py и создадим функцию для генерации и отправки одноразового кода на телефон пользователя

Импортируем необходимые модули:

import requests import random import string from config import API_KEY, PHONE_SEND

Создадим функцию send_sms, которая будет отправлять SMS-сообщения:

def send_sms(number):     # Генерируем случайную последовательность из 5 латинских букв     code = ''.join(random.choice(string.ascii_letters) for _ in range(5))     # Отправляем SMS сгенерированным кодом     sms_data = {         "number": PHONE_SEND,         "destination": number,         "text": code     }      headers = {'Authorization': f'Bearer {API_KEY}'}      response = requests.post(url="https://api.exolve.ru/messaging/v1/SendSMS",                              json=sms_data,                              headers=headers)      if response.status_code == 200:         return code     else:         return f"Ошибка при отправке SMS: {response.status_code}"

В функции send_sms генерируется случайный код из 5 латинских букв с помощью функции random.choice и string.ascii_letters. Затем создаётся словарь sms_data, содержащий номер отправителя, номер получателя и текст сообщения. Заголовки запроса устанавливаются с помощью ключа авторизации Authorization и значения API_KEY. Далее выполняется POST-запрос к API для отправки SMS-сообщения.

Если сервер ответил статусом 200, то возвращается сгенерированный код. В противном случае возвращается сообщение об ошибке с указанием статус кода.

Приложение Flet

Если ваша OC — Linux Ubuntu 20.04 LTS, рекомендую использовать flet==0.18.0.

Установить его можно командой: pip install flet==0.18.0

Произведем в main.py все необходимые импорты и создадим основной класс приложения:

import time import flet as ft from mtt import client from example_db.dbinfo import bank_list    class App(ft.Page): __instance = None  def __new__(cls, *args, **kwargs):     if cls.__instance is None:         cls.__instance = super(App, cls).__new__(cls)     return cls.__instance  def __init__(self, page):     self.p = page     self.p.on_resize = self.page_resize     self.info_w = self.p.window_width     self.info_h = self.p.window_height  def page_resize(self, e):     App.__new__(App).p.info_w = self.p.window_width     App.__new__(App).p.info_h = self.p.window_height     self.p.update()

Класс App представляет собой экземпляр страницы и корневое представление, которые автоматически создаются при запуске нового сеанса.

При создании этого класса необходимо использовать паттерн Singleton, так как это позволяет создать только один экземпляр класса App и обеспечить доступ к нему из разных частей приложения. Это гарантирует единообразие данных и согласованность состояния объекта App во всём приложении.

Для реализации паттерна проектирования Singleton я использовал механизм метакласса и переопределил метод __new__. Внутри метода __new__ я проверяю, существует ли уже экземпляр класса App. Если экземпляр не существует, то создаю его с помощью метода super().__new__(cls) и сохраняю в переменной __instance. В результате при последующих вызовах конструктора класса App всегда будет возвращаться один и тот же экземпляр.

В конструкторе класса App я инициализирую атрибуты p, on_resize, info_w и info_h. Атрибут p ссылается на объект страницы, а on_resize используется для отслеживания изменений размера окна приложения. Атрибуты info_w и info_h содержат информацию о ширине и высоте окна соответственно.

Метод page_resize служит для отслеживания события изменения размера окна приложения. Внутри метода я обновляю значения атрибутов info_w и info_h класса App с помощью App.__new__(App).p.info_w = self.p.window_width и App.__new__(App).p.info_h = self.p.window_height. Затем вызывается метод update, который обновляет страницу с учётом нового размера окна.

Далее приступим к созданию страницы входа в личный кабинет. Создадим класс Singup, который представляет собой компонент входа в личный кабинет. Давайте подробнее рассмотрим его реализацию.

class Singup(ft.Container): __instance = None  def __new__(cls, *args, **kwargs):     if cls.__instance is None:         cls.__instance = super(Singup, cls).__new__(cls)     return cls.__instance  def __init__(self):     super().__init__()     self.input_info = ft.TextField(label="phone", width=300, on_change=self.validate)     self.btn_sing = ft.TextButton(text="Singup", width=300, disabled=True, on_click=self.generate_code)     self.border = ft.border.all(5, ft.colors.BLUE)     self.alignment = ft.alignment.center      self.content = ft.Row(controls=[ft.Column([self.input_info, self.btn_sing],                                               alignment=ft.MainAxisAlignment.CENTER,)],                           alignment=ft.MainAxisAlignment.CENTER,                           vertical_alignment=ft.CrossAxisAlignment.CENTER,                           width=App.__new__(App).p.window_width -15,                           height=App.__new__(App).p.window_height -15                           )      App.__new__(App).p.add(self)     App.__new__(App).p.update()  def generate_code(self, e):     response = client.send_sms(self.input_info.value)     if len(response) == 5 and response.isalpha():         self.phone = self.input_info         self.input_info = ft.TextField(label="sms code", width=300, on_change=self.validate)         self.sms_code = response         self.btn_sing = ft.TextButton(text="enter", width=300, disabled=False, on_click=self.check_table)         self.content = ft.Row(controls=[ft.Column([self.input_info, self.btn_sing],                                                   alignment=ft.MainAxisAlignment.CENTER, )],                               alignment=ft.MainAxisAlignment.CENTER,                               vertical_alignment=ft.CrossAxisAlignment.CENTER,                               width=App.__new__(App).p.window_width -15,                               height=App.__new__(App).p.window_height-15)         App.__new__(App).p.add(self)         App.__new__(App).p.update()     else:         self.page.clean()         App.__new__(App).p.add(             ft.Text(f"Произошла ошибка при отправке SMS.\n Попробуйте снова через 10 сек.",                     size=30,                     color=ft.colors.RED))         App.__new__(App).p.update()         time.sleep(10)         self.page.clean()         App.__new__(App).p.add(self)         App.__new__(App).p.update()  def check_table(self, e):     if self.input_info.value == self.sms_code:         self.page.clean()         TableCont.__new__(TableCont).__init__(self.phone.value)     else:         self.page.clean()         App.__new__(App).p.add(ft.Text(f"Неверный код. Попробуйте снова через 10 сек.", size=30, color=ft.colors.RED))         App.__new__(App).p.update()         time.sleep(10)         self.page.clean()         App.__new__(App).p.add(self)         App.__new__(App).p.update()  def validate(self, e):     if all([self.input_info.value]):         self.btn_sing.disabled = False     else:         self.btn_sing.disabled = True     self.btn_sing.update()

Класс Singup наследуется от класса ft.Container, что позволяет поместить в него содержимое. При инициализации класса мы определяем его атрибуты, такие как поле ввода номера телефона self.input_info и кнопку self.btn_sing, которая будет менять своё состояние и генерировать одноразовый пароль для SMS через Exolve.

Метод generate_code отвечает за генерацию кода и отправку SMS. После получения ответа от функции client.send_sms мы проверяем длину полученного кода и его состав. Если код состоит из 5 буквенных символов, то мы сохраняем номер телефона в атрибуте self.phone, меняем поле ввода на поле для ввода кода SMS, сохраняем полученный код в атрибуте self.sms_code и меняем кнопку на кнопку «enter». Затем мы обновляем содержимое класса и графический интерфейс.

Чтобы обновить содержимое страницы, используем магические методы:

App.__new__(App).p.add(self) App.__new__(App).p.update()

После создания нового содержимого страницы в переменной self.content добавляем его к объекту страницы App.__new__(App).p с помощью метода add. Затем вызывается метод update, который обновляет графический интерфейс страницы с учётом нового содержимого.

Это позволяет нам строить классы и изменять содержимое страницы Flet в методах класса, не перегружая функцию main, как во многих других примерах.

Метод check_table проверяет введённый код SMS. Если код совпадает с сохранённым кодом, то мы очищаем страницу self.page.clean().

И инициализируем новый класс TableCont. В противном случае мы выводим сообщение об ошибке и ждём 10 секунд перед очисткой страницы и обновлением интерфейса.

Так как в функции main у нас нет инициализации класса TableCont, нам необходимо инициализировать его внутри метода check_table командой:

TableCont.__new__(TableCont).__init__(self.phone.value)

Метод validate отслеживает заполнение поля self.input_info и активирует или деактивирует кнопку self.btn_sing, в зависимости от наличия значения в поле.

В результате класс Singup представляет собой компонент входа в личный кабинет, который обеспечивает ввод номера телефона, генерацию и проверку одноразового пароля SMS. Этот класс можно использовать в вашем проекте на Flet для создания удобного и безопасного механизма входа в личный кабинет.

Теперь создадим класс TableCont, который представляет собой компонент для отображения данных о тратах со счёта. Давайте рассмотрим его реализацию и функциональность.

class TableCont(ft.Container): __instance = None  def __new__(cls, *args, **kwargs):     if cls.__instance is None:         cls.__instance = super(TableCont, cls).__new__(cls)     return cls.__instance  def __init__(self, phone):     super().__init__()     self.phone = phone     self.data_info = DataUser(phone).__new__(DataUser)     self.btn_next = ft.TextButton(text="next", width=150, disabled=False, on_click=self.next_go_page)     self.btn_back = ft.TextButton(text="back", width=150, disabled=False, on_click=self.back_go_page)     self.page_number = ft.Text(f"{DataUser(phone).__new__(DataUser).page_number}", size=15)     self.btn_list = ft.Row(controls=[self.btn_back, self.page_number, self.btn_next],                            alignment=ft.MainAxisAlignment.CENTER,                            vertical_alignment=ft.CrossAxisAlignment.CENTER                            )     self.border = ft.border.all(5, ft.colors.RED)     self.content = ft.Row(controls=[ft.Column([self.data_info, self.btn_list],                                               alignment=ft.MainAxisAlignment.CENTER,                                               horizontal_alignment=ft.CrossAxisAlignment.CENTER)],                           alignment=ft.MainAxisAlignment.CENTER,                           vertical_alignment=ft.CrossAxisAlignment.CENTER,                           width=App.__new__(App).p.window_width -20,                           height=App.__new__(App).p.window_height -20                           )      App.__new__(App).p.add(self)     App.__new__(App).p.update()  def next_go_page(self, e):     start_page = DataUser.__new__(DataUser).start_page + 5     end_page = DataUser.__new__(DataUser).end_page + 5     self.data_info = DataUser(self.phone).__new__(DataUser).move_page(self.phone, start_page, end_page, int(end_page // 5))     self.page_number = ft.Text(f"{DataUser.__new__(DataUser).page_number}", size=15)     self.btn_next = ft.TextButton(text="next", width=150, disabled=False, on_click=self.next_go_page)     self.btn_back = ft.TextButton(text="back", width=150, disabled=False, on_click=self.back_go_page)     self.btn_list = ft.Row(controls=[self.btn_back, self.page_number, self.btn_next])     self.content = ft.Row(controls=[ft.Column([self.data_info, self.btn_list],                                               alignment=ft.MainAxisAlignment.CENTER,                                               horizontal_alignment=ft.CrossAxisAlignment.CENTER)],                           alignment=ft.MainAxisAlignment.CENTER,                           vertical_alignment=ft.CrossAxisAlignment.CENTER,                           width=App.__new__(App).p.window_width - 20,                           height=App.__new__(App).p.window_height - 20                           )      App.__new__(App).p.add(self)     App.__new__(App).p.update()  def back_go_page(self, e):     start_page = DataUser.__new__(DataUser).start_page - 5     end_page = DataUser.__new__(DataUser).end_page - 5     page_number = DataUser.__new__(DataUser).page_number if DataUser.__new__(DataUser).page_number <=1 else DataUser.__new__(DataUser).page_number - 1     self.page_number = ft.Text(f"{page_number}", size=15)     self.data_info = DataUser(self.phone).__new__(DataUser).move_page(self.phone, start_page, end_page,int(end_page // 5))     self.btn_next = ft.TextButton(text="next", width=150, disabled=False, on_click=self.next_go_page)     self.btn_back = ft.TextButton(text="back", width=150, disabled=False, on_click=self.back_go_page)     self.btn_list = ft.Row(controls=[self.btn_back, self.page_number, self.btn_next])     self.content = ft.Row(controls=[ft.Column([self.data_info, self.btn_list],                                               alignment=ft.MainAxisAlignment.CENTER,                                               horizontal_alignment=ft.CrossAxisAlignment.CENTER)],                           alignment=ft.MainAxisAlignment.CENTER,                           vertical_alignment=ft.CrossAxisAlignment.CENTER,                           width=App.__new__(App).p.window_width - 20,                           height=App.__new__(App).p.window_height - 20                           )      App.__new__(App).p.add(self)     App.__new__(App).p.update()

Класс TableCont наследуется от класса ft.Container, что предоставляет возможность генерировать и размещать виджеты и данные. При инициализации класса мы определяем его атрибуты, такие как номер телефона self.phone и self.data_info, который представляет собой класс таблицы с данными и номер счёта. Мы также определяем кнопки пагинации и номер страницы, а затем создаём содержимое контейнера.

Методы next_go_page и back_go_page отвечают за переход на следующую или предыдущую страницу с данными. Они обновляют данные, кнопки пагинации, номер страницы и содержимое контейнера, а затем добавляют контейнер к странице и обновляют интерфейс.

Благодаря командам App.__new__(App).p.window_width — 20 и App.__new__(App).p.window_height — 20 мы можем получать размер основного окна приложения и регулировать размер виджетов непосредственно в методах класса.

Перейдём непосредственно к данным. Рассмотрим реализацию класса хранения данных и его функциональность.

В папке /example_db модуля dbinfo.py поместим данные в словарь: 

bank_list = {'79801110001': {'time': ["2024-01-01: 00-00",……..., "2024-02-20: 02-02"], 'sum': ["3721", …..., "121"]}}

Полную версию словаря можно посмотреть здесь.

Создадим класс DataUser в main.py:

class DataUser(ft.DataTable): __instance = None  def __new__(cls, *args, **kwargs):     if cls.__instance is None:         cls.__instance = super(DataUser, cls).__new__(cls)     return cls.__instance def __init__(self, phone, start_page=0, end_page=5, page_number=1):     super().__init__()     self.columns = [ft.DataColumn(ft.Text("Date Time")),             ft.DataColumn(ft.Text("Sum"), numeric=True),         ]     self.start_page = start_page     self.end_page = end_page     self.page_number = page_number     self.border = ft.border.all(5, ft.colors.BLUE)     self.width = App.__new__(App).p.window_width -50     self.height = App.__new__(App).p.window_height -50     self.rows = [ft.DataRow(cells=[ft.DataCell(ft.Text(bank_list[phone]["time"][indx])),                              ft.DataCell(ft.Text(bank_list[phone]["sum"][indx]))]) for indx in range(len(bank_list[phone]["time"]))][self.start_page:self.end_page]  def move_page(self, phone, start_page ,end_page, page_number): if page_number > 1: data_list = [ft.DataRow(cells=[ft.DataCell(ft.Text(bank_list[phone]["time"][indx])),                                    ft.DataCell(ft.Text(bank_list[phone]["sum"][indx]))]) for indx in range(len(bank_list[phone]["time"]))][start_page:end_page]         if data_list:             self.rows = data_list             self.start_page = start_page             self.end_page = end_page             self.page_number = page_number         else:             self.page_number = 1     return self

Класс DataUser представляет собой таблицу с двумя колонками: «Date Time» и «Sum». При инициализации объекта этого класса мы определяем его атрибуты, такие как названия колонок таблицы, диапазон отображаемых страниц, а также ширину и высоту таблицы. Мы заполняем таблицу данными из словаря bank_list, используя номер телефона в качестве ключа, и делаем срез данных для отображения на странице.

Метод move_page отвечает за перемещение по страницам данных. Если страница не первая, он обновляет данные для отображения на основе переданного диапазона страниц и номера страницы. Если список данных пуст, происходит возврат на первую страницу.

Этот класс позволяет эффективно отображать данные о тратах со счёта и обеспечивает удобную навигацию по страницам с данными. Полученную таблицу передаём в контейнер класса TableCont, который уже непосредственно отображается на странице приложения.

На данным этапе реализованы все классы. Можем осуществить запуск приложения в main.py:

def main(page: ft.Page): App(page) sing_page = Singup() if __name__ == "__main__": ft.app(target=main)

Заключение

Этот проект — пример того, как можно использовать flet==0.18.0 для создания личных кабинетов пользователей и административных панелей, чтобы удобно и быстро осуществить реализацию интерфейса. Этот пример может послужить отправной точкой для разработки более сложных кроссплатформенных приложений.