Доработать приложение. Добавить вывод на форму информации и количестве участников и описание сообщества
чтобы вывести толстый текст, создавая label указывайте шрифт
self.label1 = Label(text="Описание: ", font="Arial 8 bold")
чтобы вывести многострочный текст, создавая label указывайте длину строки в параметре wraplength:
self.label2 = Label(text=description, wraplength=200, justify="left")
Доработать приложение из прошлого задания, добавить возможность выбирать группу из списка групп
Доработать приложение из посдсказки, добавить возможность сдвигаться не только вперед по списку но и назад, ну и чтобы наша позиция в списке выводилась, как-то так:
Необходимо прочувствовать идею асинхронности и сделать отзывчивый интерфейс с аватарками
Добавить на модальную форму каких-нибудь еще полей помимо имени и картинки, например количество друзей, информация о себе, в общем, на свой вкус =)
Попробуем повозиться с данными из интернета.
В качестве данных для анализа будем использовать данные ВК.
В ВК есть раздел “разработчикам”
в нем имеется так называемся документация которая объясняет сторонним разработчикам какие данные есть в ВК, и как с ними работать
Зачем это может быть кому-то нужно? Ну, как правило, это всякая интеграция ВК с вашим приложением. Например, вы решили написать собственный мессенджер в котором можно будет отправлять сообщения прямо в свой профиль и читать какие-нибудь ответы. Или, например, реализовать синхронизацию изображений/сторисов с интсой. Или вы вдруг решили продавать товары в ВК, и хотите, чтобы данные в вашем сообществе совпадали с данными в магазине или пишите бот который должен эмулировать общение с человеком
В общем кейсов тьма
Мы не будет делать сложные штуки по типу отправки сообщений через ваши личные профили. В первую очередь, потому что работа с этим в рамках общедоступных компьютеров политеха не очень безопасна.
Но просто подтянуть и проанализировать данные – почему бы и нет. Для этого ВК предоставляет доступ через так называемые сервисные ключи, которые не дают сделать каких-нибудь опасных действий.
Но сначала давайте установим библиотечку для удобной работы с веб запросами. Как в прошлый раз открываем консоль из папки с питоном
и вводим туда следующие команды (если вы работает дома то ` –proxy=http://172.27.100.5:4444 ` писать не надо):
pip install --proxy=http://172.27.100.5:4444 requests
И так что за такие запросы и как их делать?
Главная фишка современного веба заключается в том, что весь интернет работает по принципу клиент-сервер. Клиент – это тот, кто отправляет запросы, а сервер этот тот кто отвечает на запросы. Самый распространённый пример запроса это проста ссылка на сайт.
То есть когда вы вводите в браузере, например, https://vk.com/golos_irnitu то браузер понимает, что ему надо найти адрес сервера (как правило IP адрес), который соответствует vk.com. Узнать IP адрес сайта можно на разных сайтах. Например, на https://2ip.ru/whois/:
Но это редко приходится делать вручную.
И так, на этот адрес отправляется запрос в виде текстовой строки /golos_irnitu. Сервер vk умеет реагировать на разные запросы, если сильно не усложнять, то там имеется аналог примерно такого кода:
if url == "/golos_irnitu":
return "html код сообщества Голос ИРНИТУ"
и да, как правило, в качестве ответа приходит просто текст.
То есть он формирует эту строку и отдает клиенту который ее запросил. Клиент – это кстати не человек, это программа которая может отправлять запросы. Самый яркий пример клиента – это бразуер.
Резюмируем схему:
https://hostname/pathhostname определяется физический адрес сервера/pathДумаю идея понятна. Теперь попробуем сделать какой-нибудь запрос прямо из питона.
Открываем наш spyder и пишем код
import requests # подключаем модуль для работы с запросами
# так как в политехе интернет работает через прокси,
# то и запросы надо делать через прокси
proxies = {
"http": "http://172.27.100.5:4444",
"https": "http://172.27.100.5:4444",
}
r = requests.get("https://vk.com/golos_irnitu", proxies=proxies) # запрашиваем страницу сообщества
# если дома пробуете запросы то прокси указывать не надо, делайте запрос так:
# r = requests.get("https://vk.com/golos_irnitu")
print(r.text) # и выводим ответ
запускаем и видим вот такую абракадабру
то есть если о чем то попросить ВК, он вернет нам в ответ html код. Мы кстати всегда можем посмотреть его в браузере если откроем https://vk.com/golos_irnitu и тыкнем так:
увидим примерно похожий текст
конечно здорово, но на самом деле работать с этим не очень удобно. Поэтому мы будем использовать VK Api.
API – это application programming interface или программный интерфейс приложения. Проще говоря это набор юрлов, которые позволяют сторонним разработчикам (то бишь нам) в удобном виде взаимодействовать с чужим приложением/сервером (в нашем случае с ВК)
Кстати если вы хотите работать с какой-нибудь другой группой просто узнайте ее название, оно присутствует в адресной строке:
Первое что нам потребуется для работы с этим самым АПИ, это получить так называемый сервисный ключ.
Отсюда и далее, если вы работаете не на своем компьютере, рекомендую запустить браузер в режиме Инкогнито, чтобы после того как вы войдете под своим ВК пользователем и закроете браузер данные о вашем посещении стерлись из памяти браузера
И так, заходите в раздел разработчикам, попасть в него можно так:
вверху тыкаете
далее тыкаете создать:
пишите имя, выбираете Standalone
открывается окошко, где вам обещают позвонить
тыкаете позвонить, к вам приходит звонок со странного номера
из номер берете последние четыре цифры и загоняете в форму:
поздравляю теперь у вас есть свое вк-приложение
теперь идем в настройки и копируем куда-нибудь вот этот сервисный ключ
именно его мы будем использовать для доступа к данным ВК
желательно его никому не сообщать, но если вдруг то вы всегда можете тыкнуть на кнопочку справа от ключа чтобы изменить его
Я буду использовать такой ключ
203a983a203a983a203a983a58204daa522203a203a983a405dff18fea57bccc1c68d62
Попробуем получить информацию о группе в более удобно для обработки виде. То есть в json.
Для этого мы воспользуемся следующим запросом:
import requests
from pprint import pprint # подключаем улучшенный print, который умеет выводить даже кривой json красиво
proxies = {
"http": "http://172.27.100.5:4444",
"https": "http://172.27.100.5:4444",
}
# делаем запрос, тут пока не понятно, но сейчас объясню
r = requests.get("https://api.vk.com/method/groups.getById?access_token=203a983a203a983a203a983a58204daa522203a203a983a405dff18fea57bccc1c68d62&v=5.130&group_id=golos_irnitu", proxies=proxies)
# выводим полученный ответ красиво
pprint(r.json())
то есть как мы видим нам vk что-то вернул в ответ и там даже есть поле name в словарике со значением “Голос ИРНИТУ”
плюс видим тут есть какие-то ссылки – это адреса аватарок сообщества, можно их открыть в браузере например вот я вам выковырял https://sun9-69.userapi.com/s/v1/ig2/ViVC1SkSwVHnQt3VN4eLhhlgiz07_hInH-NBSGqQntyCKLN6Qgso4_5SRe58XCWg8e0qN9ZJAU7NcHXpqdhZOcx8.jpg?size=100x0&quality=96&crop=272,272,1614,1614&ava=1 можно тыкнуть и увидеть картинку
Давайте теперь разберемся с запросом. Он выглядит страшно и непонятно
https://api.vk.com/method/groups.getById?access_token=203a983a203a983a203a983a58204daa522203a203a983a405dff18fea57bccc1c68d62&v=5.130&group_id=golos_irnitu
Первая часть https://api.vk.com/method/ – это обязательный кусок, по которому вк понимает, что мы хотим от него получить данные
Далее идет groups.getById – это метод, по нему ВК понимает какие именно данные мы хотим от него получить. В нашем случае мы хотим получить информацию о группе по идентификатору.
Полная документация на метод есть тут https://vk.com/dev/groups.getById?params%5Bgroup_ids%5D=apiclub¶ms%5Bfields%5D=description¶ms%5Bv%5D=5.130
Далее идет знак вопроса, с помощью которого принято отделять параметры запроса от непосредственно адреса. То есть https://vk.com/dev/groups.getById – это адрес запроса, а следующие за ним access_token=203a983a203a983a203a983a58204daa522203a203a983a405dff18fea57bccc1c68d62&v=5.130&group_id=golos_irnitu – это параметры
Тут у нас несколько параметров, каждый параметр отделяется от другого знаком амперсанда &. В нашем случае имеем следующие параметры
как можно догадаться так запросы писать не очень удобно, поэтому тот же самый запрос можно записать в следующем виде:
import requests
from pprint import pprint
proxies = {
"http": "http://172.27.100.5:4444",
"https": "http://172.27.100.5:4444",
}
r = requests.get("https://api.vk.com/method/groups.getById", {
"access_token": "203a983a203a983a203a983a58204daa522203a203a983a405dff18fea57bccc1c68d62",
"v": "5.130",
"group_id": "golos_irnitu"
}, proxies=proxies)
pprint(r.json())
так и читабельнее, и проще править
Давайте теперь сделаем интерфейс:
from tkinter import *
class UI():
def __init__(self, gui):
gui.geometry("600x200")
gui = Tk()
UI(gui)
gui.mainloop()
запихаем в него теперь наш запрос:
from tkinter import *
import requests # не забываем подключать библиотечки
from pprint import pprint
class UI():
def __init__(self, gui):
gui.geometry("600x200")
proxies = {
"http": "http://172.27.100.5:4444",
"https": "http://172.27.100.5:4444",
}
# просто делаем запрос
r = requests.get("https://api.vk.com/method/groups.getById", {
"access_token": "203a983a203a983a203a983a58204daa522203a203a983a405dff18fea57bccc1c68d62",
"v": "5.130",
"group_id": "golos_irnitu"
}, proxies=proxies)
pprint(r.json())
gui = Tk()
UI(gui)
gui.mainloop()
добавим теперь поле label в который запихаем имя
class UI():
def __init__(self, gui):
# ЭТО НЕ ТРОГАЕМ
gui.geometry("400x200")
proxies = {
"http": "http://172.27.100.5:4444",
"https": "http://172.27.100.5:4444",
}
r = requests.get("https://api.vk.com/method/groups.getById", {
"access_token": "203a983a203a983a203a983a58204daa522203a203a983a405dff18fea57bccc1c68d62",
"v": "5.130",
"group_id": "golos_irnitu"
}, proxies=proxies)
pprint(r.json())
# конец ЭТО НЕ ТРОГАЕМ
data = r.json() # вытаскиваем запрос в виде словарика
group_name = data['response'][0]['name'] # вытаскиваем имя группы
self.label_name = Label(text=group_name)
self.label_name.place(x=10, y=10)
запускаем, о как получается
давайте теперь картинку выведем, тут немного похитрее
# ...
from PIL import Image, ImageTk # добавляем импорт для работы с картинками
class UI():
def __init__(self, gui):
# ЭТО НЕ ТРОГАЕМ
gui.geometry("400x200")
# ...
self.label_name = Label(text=group_name)
self.label_name.place(x=10, y=10)
# конец ЭТО НЕ ТРОГАЕМ
# вытаскиваем url картинки
avatar_url = data['response'][0]['photo_100']
# создаем лейбл под картинку, с границей
self.lblImage = Label(borderwidth=1, relief="solid")
self.lblImage.place(x=10, y=30, width=150, height=150)
image_data = requests.get(avatar_url, stream=True).raw # стягиваем картинку из интернета
# собираем данные в картинку
image = Image.open(image_data)
image.thumbnail([150, 150], Image.ANTIALIAS) # уменьшаем чтобы влезло в лейбл
# привязываем к лейблу
self.lblImage.image = ImageTk.PhotoImage(image)
self.lblImage.configure(image=self.lblImage.image)
# ...
проверяем:
Давайте теперь посмотрим какие еще данные есть по группе. Если зайти сюда https://vk.com/dev/groups.getById, то увидим тут что можно передать параметр feilds в котором можно указать какие дополнительные данные можно получить в ответ
если проскроллить чуть вниз, то там можно потестировать запросы. Загоню такие данные и тыкну выполнить
чтобы сделать такой запрос из питона, надо добавить поле в параметры, вот так:
class UI():
def __init__(self, gui):
gui.geometry("400x200")
proxies = {
"http": "http://172.27.100.5:4444",
"https": "http://172.27.100.5:4444",
}
r = requests.get("https://api.vk.com/method/groups.getById", {
"access_token": "203a983a203a983a203a983a58204daa522203a203a983a405dff18fea57bccc1c68d62",
"v": "5.130",
"group_id": "golos_irnitu",
"fields": "members_count,description", # добавил fields и передал список дополнительных параметров
}, proxies=proxies)
#...
запускаем и видим, что данные теперь появились в ответе
ну все, теперь можно задание пилить =)
Чтобы запросить данные по обложке, надо добавить cover в список fields. В ответ получим что-то такое:
то есть как видим что обложка сообщества – это целый набор картинок чтобы получить юрл картинки надо построить достаточно длинный путь типа
response -> нулевой -> cover -> images -> нулевой элемент -> url
загнать в переменную, ну а дальше уже просто вывести как обычно в лейбл
Чтобы добавить выпадающий список на форму используется компонента ComboBox, добавляется на форму она примерно так:
# ...
from tkinter import *
from tkinter import ttk # подключаем расширеные компоненты tk
class UI():
def __init__(self, gui):
gui.geometry("200x100")
# создаем выпадающий список, в values передается массив возможных значений
self.comboExample = ttk.Combobox(gui, values=["istu_hightech", "golos_irnitu","club20964327"])
self.comboExample.place(x=10, y=10)
# привязываем реакцию на выбор элемента
self.comboExample.bind("<<ComboboxSelected>>", self.on_combobox_change)
# лейбл еще добавим чтобы в него что-то написать
self.label = Label()
self.label.place(x=10, y=40)
def on_combobox_change(self, event):
value = self.comboExample.get() # вытаскиваем значение выбранного элемента
print(value) # печатаем его в консоль
# пишем комбинацию выбраного значения
self.label['text'] = f"Вы выбрали: {value}"
gui = Tk()
UI(gui)
gui.mainloop()
работает так:
Тут попробуем сделать так называемую пагинацию. Пагинация — это когда вы не выводите пользователю все данные сразу, а делаете это порциями, например, по 10 штук за раз.
Начну с базового приложения:
import requests
from pprint import pprint
from tkinter import *
from tkinter import ttk
from PIL import Image, ImageTk
class UI():
def __init__(self, gui):
gui.geometry("400x430")
gui = Tk()
UI(gui)
gui.mainloop()
Будем снова использовать данные ВК, в этот раз попробуем вытянуть список подписчиков группы.
Для этого имеет метод https://vk.com/dev/groups.getMembers
Проскролим вниз и глянем какие данные нам возвращает этот метод
не очень интересно, то есть получается он возвращает количество участников в поле count и список их идентификаторов.
Но если в fields добавить какие-то дополнительные поля, то увидим уже что-то поинтереснее. Добавлю, например, картинку юзера:
Видно, что тут сразу появляется информация о имени/фамилии ну и нашей картинке в photo_max_orig
Добавим вызов этого метода в init
class UI():
def __init__(self, gui):
gui.geometry("400x430")
proxies = {
"http": "http://172.27.100.5:4444",
"https": "http://172.27.100.5:4444",
}
r = requests.get("https://api.vk.com/method/groups.getMembers", {
"access_token": "203a983a203a983a203a983a58204daa522203a203a983a405dff18fea57bccc1c68d62",
"v": "5.130",
"group_id": "golos_irnitu", // группа
"fields": "photo_max_orig", // добавили поле
"count": 10, // просим вернуть только 10 записей
"offset": 0, // начиная с нулевой
}, proxies=proxies)
data = r.json()
pprint(data)
во, чего-то возвращает:
возможно вы заметили, что все имена возвращаются на английском, что там стали русские имена надо добавить параметр lang, вот так:
class UI():
def __init__(self, gui):
gui.geometry("400x430")
proxies = {
"http": "http://172.27.100.5:4444",
"https": "http://172.27.100.5:4444",
}
r = requests.get("https://api.vk.com/method/groups.getMembers", {
"access_token": "203a983a203a983a203a983a58204daa522203a203a983a405dff18fea57bccc1c68d62",
"v": "5.130",
"group_id": "golos_irnitu",
"fields": "photo_max_orig",
"offset": 0,
"count": 10,
"lang": "ru", # явно указываю язык
}, proxies=proxies)
data = r.json()
pprint(data)
теперь попробуем вывести список студентов на форму:
В этот раз я попробую динамически создавать элементы на форме.
Сначала посмотрим, как я бы мог это делать руками. У меня 10 пользователей приходит в ответ:
class UI():
def __init__(self, gui):
# ...
data = r.json()
pprint(data)
items = data['response']['items'] # вытаскиваю список студентов из ответа от сервера
# вытаскиваю фамилию и имя у первого студента
first_name = items[0]['first_name']
last_name = items[0]['last_name']
# создаю 1-ый лейбл
label = Label(text=f"{r['first_name']} {r['last_name']}")
label.place(x=10, y=10)
# вытаскиваю фамилию и имя у второго студента
first_name = items[1]['first_name']
last_name = items[1]['last_name']
# создаю 2-ой лейбл
label = Label(text=f"{r['first_name']} {r['last_name']}")
label.place(x=10, y=40)
# вытаскиваю фамилию и имя у второго студента
first_name = items[2]['first_name']
last_name = items[2]['last_name']
# создаю 3-ий лейбл
label = Label(text=f"{r['first_name']} {r['last_name']}")
label.place(x=10, y=70)
# и т.д.
по сути мне 10 раз надо написать 10 примерно одинаковых кусков кода. Чтобы этим не заниматься, можно воспользоваться циклом:
class UI():
def __init__(self, gui):
gui.geometry("400x430")
# ...
data = r.json()
pprint(data)
items = data['response']['items'] # вытаскиваю список студентов из ответа от сервера
y = 10 # начинаю с координаты y = 10
for r in items: # прохожу по списку студентов
first_name = r['first_name'] # вытаскиваю имя
last_name = r['last_name'] # фамилию
label = Label(text=f"{first_name} {last_name}") # создаю лейбл
label.place(x=10, y=y) # распололгаю его на форме
y += 30 # увеличиваю значение координаты y на 30, это значение будет использоваться для следующего лейбла
проверяем:
класс! =)
Попробуем теперь добавить кнопку которая выведет нам следующие 10 юзеров
Добавим кнопку:
class UI():
def __init__(self, gui):
gui.geometry("400x360")
# ...
y = 10
for r in items:
first_name = r['first_name']
last_name = r['last_name']
label = Label(text=f"{first_name} {last_name}")
label.place(x=10, y=y)
y += 30
# добавил кнопку
self.button = Button(text=" >> ", command=self.on_button_click)
self.button.place(x=10, y=320)
def on_button_click(self): # добави реакцию на кнопку
print("Кликнули")
проверяем:
теперь надо понять как сделать чтобы что-то началось листать. Для этого взглянем на наш запрос
таким образом, чтобы вывести очередные 10 записей надо что бы при клике на кнопку сделался запрос с увеличенным значением offset.
Скопипастим код из __init__ в on_button_click
получится так:
class UI():
def __init__(self, gui):
# ...
def on_button_click(self):
proxies = {
"http": "http://172.27.100.5:4444",
"https": "http://172.27.100.5:4444",
}
r = requests.get("https://api.vk.com/method/groups.getMembers", {
"access_token": "203a983a203a983a203a983a58204daa522203a203a983a405dff18fea57bccc1c68d62",
"v": "5.130",
"group_id": "golos_irnitu",
"fields": "photo_max_orig",
"offset": 0,
"count": 10,
"lang": "ru",
}, proxies=proxies)
data = r.json()
pprint(data)
items = data['response']['items']
y = 10
for r in items:
first_name = r['first_name']
last_name = r['last_name']
label = Label(text=f"{first_name} {last_name}")
label.place(x=10, y=y)
y += 30
заведем переменную в класс в которой будем хранить текущий сдвиг от начала списка
class UI():
def __init__(self, gui):
gui.geometry("400x360")
self.offset_from_start = 0 # добавил переменную со сдвигом, по началу тут ноль
proxies = {
"http": "http://172.27.100.5:4444",
"https": "http://172.27.100.5:4444",
}
r = requests.get("https://api.vk.com/method/groups.getMembers", {
"access_token": "203a983a203a983a203a983a58204daa522203a203a983a405dff18fea57bccc1c68d62",
"v": "5.130",
"group_id": "golos_irnitu",
"fields": "photo_max_orig",
"offset": self.offset_from_start, # <<< тут использую теперь переменную со сдвигом
"count": 10,
"lang": "ru",
}, proxies=proxies)
# ...
def on_button_click(self):
proxies = {
"http": "http://172.27.100.5:4444",
"https": "http://172.27.100.5:4444",
}
r = requests.get("https://api.vk.com/method/groups.getMembers", {
"access_token": "203a983a203a983a203a983a58204daa522203a203a983a405dff18fea57bccc1c68d62",
"v": "5.130",
"group_id": "golos_irnitu",
"fields": "photo_max_orig",
"offset": self.offset_from_start, # <<< и тут теперь тоже теперь использую переменную со свдигом
"count": 10,
"lang": "ru",
}, proxies=proxies)
# ...
проверим, как работает:
хм, чет ничего не происходит…
А! Ну да! Мы же значение self.offset_from_start не меняем добавим в начало on_button_click пересчет значения:
def on_button_click(self):
self.offset_from_start += 10 # увеличим значение на 10
# ну а дальше ничего не меняем
proxies = {
"http": "http://172.27.100.5:4444",
"https": "http://172.27.100.5:4444",
}
# ...
тестим:
работает! =)
только там иногда записи как будто налазят на предыдущие:
происходит это потому что мы каждый раз создаем новые лейблы, но не удаляем старые.
Чтобы поправить этот баг надо удалять старые лейблы. Но чтобы их можно было удалять надо сохранять ссылки на компоненты в какой-нибудь массив. Делается это так, сначала подкручиваем __init__
def __init__(self, gui):
gui.geometry("400x360")
self.offset_from_start = 0
#...
items = data['response']['items']
self.labels = [] # добавляем список под лейблы
y = 10
for r in items:
first_name = r['first_name']
last_name = r['last_name']
label = Label(text=f"{first_name} {last_name}")
label.place(x=10, y=y)
y += 30
self.labels.append(label) # внутри цикла, после создания очередного лейбла заносим его в список
# ...
затем аналогично подкручиваем on_button_click
def on_button_click(self):
self.offset_from_start += 10
# ...
items = data['response']['items']
# добавляем новый цикл по лейблам
for label in self.labels:
# внутри удаляем каждый лейбл на форме
label.destroy()
# ну а тут по сути копипаста из __init__
# то есть очищаем список
self.labels = []
y = 10
for r in items:
first_name = r['first_name']
last_name = r['last_name']
label = Label(text=f"{first_name} {last_name}")
label.place(x=10, y=y)
y += 30
self.labels.append(label) # и добавляем заполнение
тестим:
ну все красота! =)
Улучшим наш код немного, если на него взглянуть, то различия между __init__ и on_button_click очень небольшие, давайте сделаем новую функцию и вынесем в нее все то что отвечает за стягивание данных и создание лейблов на форме.
Такой прием называется декомпозиций
class UI():
# добавил новую функцию, тут почти весь код из on_button_click
def get_members(self):
proxies = {
"http": "http://172.27.100.5:4444",
"https": "http://172.27.100.5:4444",
}
r = requests.get("https://api.vk.com/method/groups.getMembers", {
"access_token": "203a983a203a983a203a983a58204daa522203a203a983a405dff18fea57bccc1c68d62",
"v": "5.130",
"group_id": "golos_irnitu",
"fields": "photo_max_orig",
"offset": self.offset_from_start,
"count": 10,
"lang": "ru",
}, proxies=proxies)
data = r.json()
pprint(data)
items = data['response']['items']
for label in self.labels:
label.destroy()
self.labels = []
y = 10
for r in items:
first_name = r['first_name']
last_name = r['last_name']
label = Label(text=f"{first_name} {last_name}")
label.place(x=10, y=y)
y += 30
self.labels.append(label)
теперь упростим код __init__:
class UI():
def get_members(self):
# ...
def __init__(self, gui):
gui.geometry("400x360")
self.offset_from_start = 0
self.labels = [] # добавляем пустой список под labels, без этого работать не будет
self.get_members() # тут просто все что было связано со стягивание данных заменяем на вызов нашей новой функции
self.button = Button(text=" >> ", command=self.on_button_click)
self.button.place(x=10, y=320)
def on_button_click(self):
self.offset_from_start += 10
self.get_members() # и тут тоже заменяем весь код на вызов новой функции
тестим:
работает же! =О
Ну все, можно задание теперь пилить =)
Сейчас, когда листаешь страницу происходит небольшое подвисание интерфейса.
Связано это с тем что, при клике на кнопку, на сервер ВК отправляется запрос и ожидается ответ, и хотя это занимает не сильно много времени какие-то сотни миллисекунд, интерфейс в это время становится недоступным.
Чтобы блокировки интерфейса не происходило мы можем воспользоваться так называемым асинхронным подходом к выполнению кода. При таком подходе мы операцию по отправке запроса выносим в отдельный исполняемый поток и блокировка интерфейса пропадает
Делается это так. Сначала надо кусок кода ответственный за запрос вынести в отдельную функцию. Вот так:
class UI():
@staticmethod # обязательно помечаем функцию как staticmethod
def get_request(offset_from_start): # функця с параметром offset_from_start
proxies = {
"http": "http://172.27.100.5:4444",
"https": "http://172.27.100.5:4444",
}
r = requests.get("https://api.vk.com/method/groups.getMembers", {
"access_token": "203a983a203a983a203a983a58204daa522203a203a983a405dff18fea57bccc1c68d62",
"v": "5.130",
"group_id": "golos_irnitu",
"fields": "photo_max_orig",
"offset": self.offset_from_start, # тут вместо self.offset_from_start используем offset_from_start
"count": 10,
"lang": "ru",
}, proxies=proxies)
data = r.json()
pprint(data)
return data # функцию должна вернуть данные которые получит от ВК
def get_members(self):
""" отсюда убираем
r = requests.get("https://api.vk.com/method/groups.getMembers", {
"access_token": "203a983a203a983a203a983a58204daa522203a203a983a405dff18fea57bccc1c68d62",
"v": "5.130",
"group_id": "golos_irnitu",
"fields": "photo_max_orig",
"offset": self.offset_from_start,
"count": 10,
"lang": "ru",
})
data = r.json()
pprint(data)
"""
# дальше все так же
items = data['response']['items']
# ...
теперь код, который ответственен за наполнение формы (т.е. создание лейблов тоже вынесем в отдельную функцию с параметром data
class UI():
@staticmethod
def get_request(offset_from_start):
# ...
return data
# добавил новую функцию с копипастой кода по заполнению лейблов
def fill_labels(self, data):
items = data['response']['items']
for label in self.labels:
label.destroy()
self.labels = []
y = 10
for r in items:
first_name = r['first_name']
last_name = r['last_name']
label = Label(text=f"{first_name} {last_name}")
label.place(x=10, y=y)
y += 30
self.labels.append(label)
self.label_count['text'] = f"{self.offset_from_start} / {data['response']['count']}"
def get_members(self):
""" А ТУТ ВСЕ УБИРАЕМ
items = data['response']['items']
for label in self.labels:
label.destroy()
self.labels = []
y = 10
for r in items:
first_name = r['first_name']
last_name = r['last_name']
label = Label(text=f"{first_name} {last_name}")
label.place(x=10, y=y)
y += 30
self.labels.append(label)
self.label_count['text'] = f"{self.offset_from_start} / {data['response']['count']}"
"""
Теперь самое интересное)
У нас есть функция get_request которая делает запрос, и функция fill_labels которая результат запроса выведет на форму, можем попробовать их связать сначала синхронно:
class UI():
@staticmethod
def get_request(offset_from_start):
# ...
return data
def fill_labels(self, data):
# ...
self.label_count['text'] = f"{self.offset_from_start} / {data['response']['count']}"
def get_members(self):
# связали
data = self.get_request(self.offset_from_start)
self.fill_labels(data)
# ...
оно даже будет работать так же, с небольшими подвисаниями:
а теперь вызовем эти функции асинхронно:
# …
import multiprocessing # добавим пакет для многопоточности
class UI():
@staticmethod
def get_request(offset_from_start):
# ...
def fill_labels(self, data):
# ...
def get_members(self):
# создаем пул потоков
# эта фиговина позволяет управлять потоками
# и вызывать функции асинхронно
pool = multiprocessing.Pool()
# запускаем асинхронное выполнение
pool.apply_async(
self.get_request, # первый параметр -- это функция которая должна выполниться в отдельном потоке
(self.offset_from_start, ), # это параметры которые надо передать функции
callback=self.fill_labels # а это функция которой асинхронная функция передаст выполнение по завершению
)
def __init__(self, gui):
# ...
def on_button_click(self):
# ...
# НУ И ТУТ ОБЯЗАТЕЛЬНО НАДО НАПИСАТЬ ТАКУЮ КОНСТРУКЦИЮ
# без нее асинхронный вызов не сработает
if __name__== '__main__' :
gui = Tk()
UI(gui)
gui.mainloop()
тестим:
ура! теперь ничего не блокируется и можно тыкать даже по несколько раз =)
Раз уж такое дело добавим еще отображение аватарок профилей.
class UI():
@staticmethod
def get_request(offset_from_start):
# ...
def fill_labels(self, data):
# ...
y = 10
for r in items:
first_name = r['first_name']
last_name = r['last_name']
label = Label(text=f"{first_name} {last_name}")
label.place(x=40, y=y) # сдвинем вправ
# y += 30 ЭТО в КОНЕЦ УТАЩИМ
self.labels.append(label)
# ДОБАВЛЯЕМ ОТОБРАЖЕНИЕ КАРТИНОК, по стандарту
# создаем лейбл под картинку, с границей
lblImage = Label(borderwidth=1, relief="solid")
lblImage.place(x=10, y=y, width=20, height=20)
image_data = requests.get(r['photo_max_orig'], stream=True).raw # стягиваем картинку из интернета
# собираем данные в картинку
image = Image.open(image_data)
image.thumbnail([20, 20], Image.ANTIALIAS) # уменьшаем чтобы влезло в лейбл
lblImage.image = ImageTk.PhotoImage(image)
lblImage.configure(image=lblImage.image)
y += 30 # утащили вниз
self.label_count['text'] = f"{self.offset_from_start} / {data['response']['count']}"
как мы видим работает весьма тормознуто
тут как можно догадаться, что тормоза возникают из-за того, что каждая картинка тянется прямо после создания лейбла, а так как выводим мы по 10 пользователей, то на каждого пользователя приходится ждать пока его картинка скачается.
Стало быть, нам надо процедуру стягивания картинки и отображения ее на формы опять разбить на две функции. Первая – тянет данные из интернета и по завершению передает результат второй.
Создаем эти функции:
class UI():
@staticmethod
def get_request(offset_from_start):
# ...
# новая функция для стягивания картинки
# так как ее будем вызывать асинхронно то надо добавлять @staticmethod
# ну и на вход у нее один параметр -- url картинки
@staticmethod
def fetch_image(image_url):
proxies = {
"http": "http://172.27.100.5:4444",
"https": "http://172.27.100.5:4444",
}
image_data = requests.get(image_url, stream=True, proxies=proxies).raw # стягиваем картинку из интернета
# собираем данные в картинку
image = Image.open(image_data)
image.thumbnail([20, 20], Image.ANTIALIAS) # уменьшаем чтобы влезло в лейбл
return image
# еще одна функция в которую будет передаваться результат
# на входе картинка и лейбл в который надо картинку положить
# важно чтобы параметр image, то есть в который должны попасть данные из интернета, был первым
def set_label_image(self, image, lblImage):
lblImage.image = ImageTk.PhotoImage(image)
lblImage.configure(image=lblImage.image)
def fill_labels(self, data):
# ...
y = 10
for r in items:
# ...
lblImage = Label(borderwidth=1, relief="solid")
lblImage.place(x=10, y=y, width=20, height=20)
# вызываем наши две функции последовательно
image = self.fetch_image(r['photo_max_orig'])
self.set_label_image(lblImage, image)
y += 30
self.label_count['text'] = f"{self.offset_from_start} / {data['response']['count']}"
можно проверить, по идее должно работать так же:
теперь сделаем вызов асинхронно
# ...
# добавляем импорт, он нам потребуется чтобы связать функцию fetch_image
# которая возвращает один параметр, с функций set_label_image, которая ожидает два
from functools import partial
class UI():
@staticmethod
def get_request(offset_from_start):
# ...
@staticmethod
def fetch_image(image_url):
# ...
def set_label_image(self, image, lblImage):
# ...
def fill_labels(self, data):
# ...
# создаем пул потоков, он должен быть общий для всех картинок,
# чтобы запросы шли параллельно
pool = multiprocessing.Pool()
y = 10
for r in items:
# ...
# создание лейблов под картинки не трогаем
lblImage = Label(borderwidth=1, relief="solid")
lblImage.place(x=10, y=y, width=20, height=20)
# делаем асинхронный вызов
pool.apply_async(
self.fetch_image, # вызываем стягивание картинки
(r['photo_max_orig'], ), # передаем ссылку на картинку
# ну а тут самое хитрое: partial(self.set_label_image, lblImage=lblImage) позволяет нам
# сделать из функции с двумя аргументами -- функцию с одним аргументов
# а в качестве аргумента автоматом lblImage подставляет тот lblImage
# который мы создали выше, это достаточно сложная концепция, которая называется "Каррирование"
callback=partial(self.set_label_image, lblImage=lblImage)
)
y += 30
self.label_count['text'] = f"{self.offset_from_start} / {data['response']['count']}"
ну что ж, тестируем:
Красота!
И еще один тонкий момент сейчас у нас на каждые запрос создается отдельный пул потоков, это не очень эффективно и может даже замедлять работу программы.
Поэтому сделаем один общий пул и будем его использовать везде
class UI():
@staticmethod
def get_request(offset_from_start):
# ...
@staticmethod
def fetch_image(image_url):
# ...
def set_label_image(self, image, lblImage):
# ...
def fill_labels(self, data):
# ...
# pool = multiprocessing.Pool() этот убрали
y = 10
for r in items:
# ...
self.pool.apply_async( # тут self добавили
self.fetch_image,
(r['photo_max_orig'], ),
callback=partial(self.set_label_image, lblImage=lblImage)
)
y += 30
self.label_count['text'] = f"{self.offset_from_start} / {data['response']['count']}"
def get_members(self):
# pool = multiprocessing.Pool() этот убрали
self.pool.apply_async( # тут self добавили
self.get_request,
(self.offset_from_start, ),
callback=self.fill_labels
def __init__(self, gui):
gui.geometry("400x360")
self.pool = multiprocessing.Pool() # ДОБАВИЛ ОБЩИЙ ПУЛ
# ...
# ...
Как видим интерфейс стал еще отзывчиваее, совсем не подвисает и картинки грузятся параллельно =)
Попробуем создать модальное окно по клику на имя пользователя. Модальное окно которое открывается поверх главного окна приложения и которое нельзя закрыть.
По сути процесс открытия нового окна напоминает создание дополнительной формы.
Добавим сначала событие клика при клике на имя:
class UI():
@staticmethod
def get_request(offset_from_start):
# ...
@staticmethod
def fetch_image(image_url):
# ...
def set_label_image(self, image, lblImage):
#...
def fill_labels(self, data):
# ...
for r in items:
# это не трогаем
first_name = r['first_name']
last_name = r['last_name']
label = Label(text=f"{first_name} {last_name}")
label.place(x=40, y=y)
# конец не троганья
# а тут добавляем реакцию на клик
label.bind("<Button>", self.on_name_click)
# ...
# и функцию добавим
def on_name_click(self, event):
print("clicked")
тестим:
ну вроде работает, хотелось бы только что бы как-то передать информацию о том, на кого кликнули, причем не просто имя, а именно словарик на основании которого мы выводили строку.
Добавим третий параметр в функцию on_name_click, в него собственно и будем передавать данные:
# добавил параметр
def on_name_click(self, event, data):
print("clicked")
И теперь чтобы этот третий параметр заполнялся, снова воспользуемся partial
class UI():
# ...
def fill_labels(self, data):
# ...
for r in items:
# это не трогаем
first_name = r['first_name']
last_name = r['last_name']
label = Label(text=f"{first_name} {last_name}")
label.place(x=40, y=y)
# конец не троганья
# создаем из трех-аргументной функции, двух-аргументную, у которой в data окажется словарик с информацией о юзере
label.bind("<Button>", partial(self.on_name_click, data=r))
# ...
def on_name_click(self, event, data):
print(data) # тут еще сделаем вывод data
проверяем:
отлично! =)
Теперь попробуем показать модальное окно, процесс напоминает создание интерфейса в __init__, только надо выполнять целую кучу специфических операций
def on_name_click(self, event, data):
print(data)
# создаем модальное окно
top = Toplevel(gui)
# устанавливаем ему размеры
top.geometry(300, 100)
# следующие три штуки нужны чтобы перевести фокус на модальное окно
# а также заблокировать главное окно
top.transient(gui)
top.grab_set()
top.focus_set()
top.wait_window()
тестируем:
Ура! Открывается! =)
Теперь попробуем добавить информацию об юзере, в принципе тут все как с обычной формой, только top везде вставляем
def on_name_click(self, event, data):
# ЭТО НЕ ТРОГАЕМ
print(data)
top = Toplevel(gui)
top.geometry("200x300")
# конец ЭТО НЕ ТРОГАЕМ
# создаём лейбл с именем, обратите внимание на первый параметр top
label = Label(top, text=data['first_name'], font="TimesNewRoman 14 bold")
label.place(x=10, y=10)
# создаём лейбл с фамилией, обратите внимание на первый параметр top
label = Label(top, text=data['last_name'], font="TimesNewRoman 12")
label.place(x=10, y=40)
# создаем лейбл под картинку
lblImage = Label(top, borderwidth=1, relief="solid")
lblImage.place(x=10, y=70, width=180, height=180)
# и в принципе картинку можно грузить асинхронно
self.pool.apply_async(
self.fetch_image,
(data['photo_max_orig'], ),
callback=partial(self.set_label_image, lblImage=lblImage)
)
# ЭТО НЕ ТРОГАЕМ
top.transient(gui)
top.grab_set()
top.focus_set()
top.wait_window()
ну в принципе не плохо, можно только картинку побольше сделать.
Вообще, картинка получается маленькой, потому что так срабатывает наш асинхронный метод fetch_image, у него картинка уменьшается всегда до 20px.
Добавим ему еще один параметр, куда можно будет прописать размер картинки:
@staticmethod
def fetch_image(image_url, size=20): # добавил параметр size со значением по умолчанию 20
image_data = requests.get(image_url, stream=True).raw
image = Image.open(image_data)
# тут 20 на size меняем
image.thumbnail([size, size], Image.ANTIALIAS)
return image
и теперь при создании модальной формы, передадим туда 180:
def on_name_click(self, event, data):
print(data)
# ...
lblImage = Label(top, borderwidth=1, relief="solid")
lblImage.place(x=10, y=70, width=180, height=180)
self.pool.apply_async(
self.fetch_image,
(data['photo_max_orig'], 180), # параметры сюда прописываются, пишем 180
callback=partial(self.set_label_image, lblImage=lblImage)
)
# ...
вот другое дело теперь:
