ZANIN блог
Контакты
Крути вниз
Фильтр по:
Категории
//Post title

Разработка сайта на Django - урок 07 - создание виджета Instagram

25 Дек 2020Категория : Django

Разработка сайта на Django - урок 07 - создание виджета Instagram

В этой статье продолжим создавать блог на Django. В моем шаблоне для блога есть такой блок:

Создание виджета инстаграм на сайт

Вывести фото из Instagram намного актуальнее, чем из Flickr.

Реализация будет следующей: фото должны быть уже получены заранее, через API Instagram, чтобы не обращаться за фотками по API каждый раз при загрузке страницы. Фото, которые хотим разместить на сайте, будем добавлять через админку ссылками на посты.

Перед регистрацией приложения в кабинете разработчика, лучше реализовать необходимый функционал в Django заранее. Дело в том, что вам сначала дадут временный токен для работы с API, действует он час, и поэтому, пока вы реализуете функционал, чтобы посмотреть его работу, вам придется получать новый токен. Да и потом нормальный токен действует 60 дней, поэтому лучше добавить функционал в админку Django, чтобы можно было обновлять токен быстрее.

Функционал виджета будет следующий

Функционал я уже подготовил, поэтому буду объяснять под скриншотами.

Создание виджета инстаграм на сайт

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

python manage.py startapp inst_widget

Подключаем созданное приложение к проекту

Создание виджета инстаграм на сайт

Дальше нам понадобятся следующие библиотеки: Pillow, easy-thumbnails и requests. Так как мы используем виртуальное окружение pipenv, то устанавливать эти библиотеки надо следующими командами:

pipenv install requests

pipenv install Pillow

pipenv install easy-thumbnails

Создание виджета инстаграм на сайт

Создание виджета инстаграм на сайт

Создание виджета инстаграм на сайт

Теперь в файле models.py в приложении inst_widget создаем модель виджета

Создание виджета инстаграм на сайт

Переходим в файл admin.py приложения inst_widget и добавляем модель в админку

Создание виджета инстаграм на сайт

То, что перечеркнуто, пока не используем. Смотрим, что получили в админке.

Создание виджета инстаграм на сайт

Эта модель имеет имя и хранит токен, который будет использоваться для запросов к API Instagram. Теперь к этой модели необходимо привязать две модели. Одна модель будет отвечать за сохранение ссылок на посты, а вторая модель сохранять изображения из этих постов. По факту эти модели будут связаны через ForeignKey (то есть через внешний ключ).

Создание виджета инстаграм на сайт

Данная модель модель будет хранить ссылки на посты.

Создание виджета инстаграм на сайт

Эта модель будет хранить изображения.

Обе эти модели основаны на полиморфных связях. То, что необходимо импортировать в models.py для этого

from django.contrib.contenttypes.models import ContentType

from django.contrib.contenttypes.fields import GenericForeignKey

Про полиморфные связи лучше почитать отдельно и попробовать их реализовать самостоятельно. А сейчас добавим в файл admin.py строки, которые у меня были зачеркнуты. Не забываем перед этим всем произвести команды makemigrations и migrate.

В файле admin.py добавлен StackedInline это класс встроенного редактора, который используется для добавления или редактирования записей первичной модели и при этом выводит набор форм вторичной модели. То есть, вторичная модель ListLink будет выводиться в админке при редактировании первичной модели InstagramWidget.

Создание виджета инстаграм на сайт

Вместо StackedInline можете попробовать использовать TabularInline и посмотреть результат.

В админке получаем следующее:

Создание виджета инстаграм на сайт

Создание виджета инстаграм на сайт

Таким образом получаем привязанные модели ссылок и изображений к нашему виджету, и они удобно выводятся списком.

Теперь, при сохранении модели InstagramWidget и добавленных ссылок в модель ListLink должно произойти следующее. Делается запрос по каждой ссылке, которая добавлена в модель. По ссылке скачивается изображение и сохраняется в папку. Так при каждом сохранении изображении мы сохраняем путь до изображения в модель MediaFromInsta. В тип поля ImageField сохраняется просто ссылка до изображения, например, если параметр установлен такой upload_to='instagram', то ссылка на изображение будет instagram/name_image.png.

Этот функционал я не стал выносить отдельно, пока опишу его в файле models.py в приложении inst_widget. Для этого у Django есть сигналы. Сигналы Django предоставляют возможность перехватить процесс фреймворка или приложения и выполнить на основании этого процесса свои процессы.

Для нашего функционала импортируем в файл model.py нашего приложения inst_widget следующее:

Создание виджета инстаграм на сайт

Сигнал post_save срабатывает после сохранения модели. Декоратор receiver используется вместо метода connect().

Вот код, который необходимо добавить в models.py

Создание виджета инстаграм на сайт

После сохранения модели InstagramWidget начинает работать функция get_media_from_posts. Получаем объект модели widget = InstagramWidget.objects.get(name_widget=instance), которая была сохранена. Потом получаем posts_links = widget.link_post.all() все объекты ссылок на посты. Далее запускаем цикл по ссылкам, чтобы получить img = requests.get(link.link) изображение по ссылке. Получаем имя изображения filename = link.link.split("/")[-1]. Создаем путь dir_media = settings.MEDIA_ROOT + '\\instagram\\' до папки сохранения изображения (я работаю на windows, поэтому у меня путь такой). Открываем файл для записи img_file = open(dir_media + filename, 'wb'). Записываем в файл img_file.write(img.content) контент полученный по ссылке. Дальше создаем путь до изображения, чтобы сохранить в модель fileimage = 'instagram/' + filename. И сохраняем изображение в модель MediaFromInsta.objects.update_or_create(image=fileimage, images_id=widget.id). update_or_create - метод обновляет или создает новую запись, если совпадений в базе не нашлось.

В итоге получаем при сохранении виджета:

Создание виджета инстаграм на сайт

Текущий функционал не дописан, так как при обращении к API Instagram будет прилетать JSON, из которого еще нужно вытащить URL изображения. Это допишем чуть ниже, сначала получим токен.

Регистрируем свое приложение в аккаунте разработчика Facebook:

Переходим в аккаунт разработчика Facebook.

Создание виджета инстаграм на сайт

Выбираем тип приложения:

Создание виджета инстаграм на сайт

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

Создание виджета инстаграм на сайт

Выбираем API Instagram Basic Display

Создание виджета инстаграм на сайт

Тут появляется возможность настроек, но нам сюда пока не нужно:

Создание виджета инстаграм на сайт

Нам нужно сюда

Создание виджета инстаграм на сайт

Тут нам понадобятся потом ID app и Secret app (в русском переводе документация, хоть и неплохая, но потом надо не запутаться, куда какой ID вставлять, тем более токен в переводе называют "маркер доступа", и не очень понятно работать с примерами кода). Далее опускаемся вниз.

Создание виджета инстаграм на сайт

Необходимо добавить платформу

Создание виджета инстаграм на сайт

Создание виджета инстаграм на сайт

Создание виджета инстаграм на сайт

Создание виджета инстаграм на сайт

  • 687

Готовы заказать проект?

© ZANIN 2019 / All rights reserved.
Контакты
Close