Как создать фотоканал с помощью Django

1656684849 kak sozdat fotokanal s pomoshhyu django

от Ogundipe Samuel

Сегодня мы создадим фреймворк для фотолент в реальном времени с помощью Django и Pusher. Это как мини-Instagram, но без комментариев и функции фильтра.

0*aTITCCoNi8aLM4_G

Для изучения этого учебника необходимо базовое понимание Django и jQuery.

Настройки Django

Сначала вам нужно установить библиотеку Django (если у нас ее нет).

Чтобы установить Django, запускаем:

После установки Django пора создать наш проект. Откройте терминал и создайте новый проект с помощью такой команды:

В вышеприведенной команде мы создали новый проект под названием photofeed. Следующим шагом станет создание программы в нашем новом проекте. Для этого запустим следующие команды:

Когда мы завершим настройки новой программы, Django нужно знать о нашей новой программе. Для этого мы зайдем в наш feed\settings.py и добавьте программу для сообщений в наши установленные программы, как показано ниже:

Выполнив вышеуказанное, пора запустить программу и проверить, все ли прошло хорошо. В нашей терминальной оболочке мы запускаем:

Если мы перейдем к браузеру http://localhost:8000мы должны увидеть следующее:

0*Bh4MhbFyoq9kt2XQ

Настройте приложение на Pusher

На этом этапе Django готов и сконфигурирован. Далее нам нужно настроить Pusher, а также получить учётные данные нашей программы. Если вы этого не сделали, зарегистрируйтесь в бесплатном аккаунте Pusher и создайте новую программу, а затем скопируйте свой секрет, ключ программы и идентификатор программы.

0*lYy3cb9EF5I8Pz1E

Следующим шагом является установка необходимых библиотек:

В вышеприведенной команде bash мы установили один пакет, Pusher. – Pusher: это официальная библиотека Pusher для Python. Мы будем использовать эту библиотеку для запуска и отправки сообщений в Pusher HTTP API.

Создание нашей программы

Во-первых, давайте создадим класс модели, которая будет генерировать нашу структуру базы данных. Давайте откроемся feed\models.py и заменить следующим:

В вышеприведенном блоке кода мы определили модель под названием Feed. Таблица Feed будет состоять из следующих полей:

  • Поле для хранения фото
  • Поле для хранения фотографии В вышеприведенном коде, объявляя поле нашего документа, мы включили upload_to атрибут, который мы установили static/documents
    Обратите внимание, что этот путь относится к пути DJANGO MEDIA ROOTкоторую мы сейчас установим.

В этой статье мы будем устанавливать MEDIA_ROOT к статической папке в нашем feed приложение, поэтому его можно обслуживать как статический файл. Для этого перейдем к нашему photofeed/settings.py и добавьте приведенный ниже код в наш файл сразу после STATIC_URL Декларация.

Выполнение миграций

Нам нужно выполнить миграции и запустить их, чтобы можно было создать таблицу нашей базы данных. Чтобы сделать это, давайте запустим следующее в нашем терминале:

Создание наших взглядов

Наши взгляды касаются файла/файлов, которые сохраняют логику программы, которую часто называют Controller. Давайте откроем наш views.py в нашем feed папку и замените следующим образом:

В приведенном выше коде мы определили три основных функции:

  • индекс
  • pusher_authentication_
  • push_feed

В index Мы получаем все доступные фотографии в базе данных. Затем фотографии отображаются в окне просмотра. Это позволяет новому пользователю видеть все доступные предыдущие каналы.

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

В push_feed мы проверяем, это запрос POST, а затем пытаемся проверить нашу форму перед сохранением ее в базе данных. (Форма, используемая в этом методе, называется DocumentForm еще не доступен. Мы создадим его в ближайшее время.) После проверки формы мы обратимся к библиотеке Pusher для взаимодействия в реальном времени.

Создание класса Form

Форма Django принимает введенные пользователем данные, проверяет их и превращает в объекты Python. У них также есть несколько удобных способов визуализации. Давайте создадим файл под названием forms.py в нашем feed папку и добавьте в нее следующее содержимое:

В вышеприведенном блоке кода мы импортировали нашу модель Feed и использовали ее для создания формы. Теперь эта форма будет проверять и загружать изображения в нужную папку.

Заполнение URL-адреса.py

Давайте откроем наш photofeed\urls.py файл и замените следующим:

Что изменилось в этом файле? Мы добавили в файл 3 новых маршрута. Мы определили точку входа и назначили ее нашему index функция. Мы также определили URL-адрес push_feed и назначили его нашему push_feed функция. Это будет отвечать за отправку обновлений Pusher в режиме реального времени. Наконец, pusher_authentication конечная точка обрабатывает аутентификацию нашего приватного канала.

Создание файлов HTML

Теперь нам нужно создать файл index.html, на который мы ссылались в качестве шаблона для нашей функции индекса. Давайте создадим новую папку в нашем feed папка называется templates. Далее мы создаем файл под названием index.html в нашем templates и замените ее кодом ниже:

Обратите внимание, что в этот фрагмент HTML мы включили некоторые необходимые библиотеки, например:

  • Загрузочный CSS
  • Библиотека JavaScript jQuery
  • Библиотека Pusher JavaScript

Привязки Pusher и фрагмент jQuery

Это! Теперь, когда загружается фотография, она также транслируется, и мы можем слушать с помощью нашего канала, чтобы обновлять ленту в режиме реального времени. Ниже приведен пример фрагмента jQuery, который используется для обработки загрузки файлов, а также обновлений Pusher в реальном времени.

Ниже представлено изображение того, что мы создали:

0*JzA7njPCUC9-ozFM

Вывод

В этой статье мы рассмотрели, как создать ленту фотографий в реальном времени с помощью Django и Pusher, а также передать токены CSRF в запросе AJAX с помощью Django.

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

Мы могли бы создать нашу программу как можно лучше, оговорки или комментарии, сообщите нам об этом в комментариях. Помните, что делиться – это учиться.

Эта публикация была первоначально опубликована в блоге Pusher здесь

Добавить комментарий

Ваш адрес email не будет опубликован.