Использование Django и API Dev.to для отображения сообщений

Будучи разработчиком, вы, возможно, задаетесь вопросом, нужен ли вам блог. Честно говоря, я веду блог уже некоторое время, и могу сказать, что наличие блога на вашем сайте дает огромные преимущества. Допустим, у вас есть сайт, на котором есть портфолио, и вы продаете товары или услуги. Как вы можете привлечь больше трафика на свой сайт, чтобы потенциальные рекрутеры или клиенты могли узнать о ваших товарах или услугах?

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

Однако для того, чтобы иметь блог на своем сайте, вам необходима система управления контентом, которую сокращенно называют CMS. CMS — это программное решение, которое помогает создавать, управлять и изменять контент на сайте без необходимости специальных технических знаний.

Большинство CMS платные, и если вы хотите сэкономить несколько долларов, платная CMS — это последнее, что вам нужно. В этой статье я покажу вам, как добавить блог на ваш сайт, не потратив ни цента. Я буду использовать Django, Dev.to API, PostgreSQL и Arctype SQL Client.

Что такое Dev.to, Django и Postgres?

Dev.to — это платформа для ведения блогов, где разработчики публикуют статьи на темы, которые помогают другим разработчикам решить проблему или узнать что-то новое. Dev.to служит сообществом разработчиков программного обеспечения, которые собираются вместе, чтобы помочь друг другу. Django — это бесплатный веб-фреймворк с открытым исходным кодом на основе Python, который следует архитектурному шаблону «модель-шаблон-представление». Django поощряет быструю разработку и чистый, прагматичный дизайн.

PostgreSQL, также известный как Postgres, — это бесплатная система управления реляционными базами данных с открытым исходным кодом, в которой особое внимание уделяется соответствию стандарту SQL.

Предварительные условия

Прежде всего, чтобы продолжить работу над этим учебником, вам понадобится текстовый редактор, установленный на вашей машине. В данном случае я буду использовать редактор Visual Studio Code, но вы можете использовать редактор кода по своему усмотрению. Также убедитесь, что на вашей машине установлены Python и PostgreSQL.

Настройка проекта

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

Давайте теперь установим Django в наш проект Blog Django. Для установки Django мы будем использовать инструмент упаковки для python под названием Pipenv. Pipenv используется для управления виртуальными окружениями в проектах Django. Вы можете установить Pipenv на свою машину с помощью этого руководства. Теперь выполните приведенную ниже команду, чтобы установить Django в ваш проект:

pipenv install django

Затем создайте виртуальное окружение в проекте, выполнив команду, показанную ниже.

pipenv shell

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

((Blog))

Круглые скобки вокруг Blog означают, что виртуальная среда была активирована.

Теперь давайте создадим новый проект Django под названием Articles, выполнив команду, показанную ниже. Не забудьте про точку (.) в конце.

django-admin startproject Articles .

Теперь выполните команду, показанную ниже, а затем посетите сайт http://127.0.0.1:8000:

python manage.py runserver

Вы должны увидеть страницу приветствия Django, как показано ниже.

Теперь давайте создадим приложение под названием posts в нашем проекте Django. В командной строке выйдите из сервера с помощью control+c. Затем выполните команду, показанную ниже.

python manage.py startapp posts

В окне редактора Visual Studio Code щелкните папку Articles и откройте файл settings.py, как показано ниже.

В файле settings.py прокрутите вниз до раздела INSTALLED_APPS, где вы увидите шесть встроенных приложений Django. Добавьте наше новое приложение posts в самом низу, как показано ниже.

INSTALLED_APPS = [
   'django.contrib.admin',
   'django.contrib.auth',
   'django.contrib.contenttypes',
   'django.contrib.sessions',
   'django.contrib.messages',
   'django.contrib.staticfiles',
   'posts',  # new
]

Настройка Postgres

После установки Postgres на вашу машину, выполните команду ниже, чтобы подтвердить установку.

psql --version

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

sudo -u postgres psql postgres

После того как PostgreSQL откроется в командной строке, выполните приведенную ниже команду, чтобы установить для него пароль.

password postgres

Чтобы выйти из приглашения PostgreSQL, выполните команду, показанную ниже.

q

Чтобы снова открыть приглашение Postgres, выполните показанную ниже команду и введите пароль, заданный для postgres.

psql -U postgres -W

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

CREATE DATABASE posts;

Затем выполните команду, показанную ниже, чтобы проверить, есть ли созданная вами база данных в списке баз данных Postgres.

l

Как видно из приведенного ниже скриншота, база данных post была создана в PostgreSQL.

Интеграция Postgres с Django

Давайте установим пакет psycopg2, который позволит нам использовать созданную нами базу данных Postgres, выполнив команду ниже.

pipenv install psycopg2

Откройте файл settings.py в папке Articles и прокрутите вниз до раздела DATABASES, который выглядит так, как показано ниже.

DATABASES = {
   'default': {
       'ENGINE': 'django.db.backends.sqlite3',
       'NAME': BASE_DIR / 'db.sqlite3',
   }
}

Проект настроен на использование SQLite в качестве базы данных. Вам нужно изменить это, чтобы проект мог использовать базу данных Postgres, которую мы создали вместо этого.

Измените движок так, чтобы он использовал адаптер Postgres вместо адаптера sqlite3. Для NAME используйте имя вашей базы данных, где в данном случае это posts. Вам также необходимо добавить учетные данные для входа в базу данных.

USER должен быть postgres, а PASSWORD — пароль, который вы установили для postgres. Раздел DATABASES файла settings.py теперь должен выглядеть так, как показано ниже.

DATABASES = {
   'default': {
       'ENGINE': 'django.db.backends.postgresql',
       'NAME': 'posts',
       'USER': 'postgres',
       'PASSWORD': 'password',
       'HOST': 'localhost',
       'PORT': '',
   }
}

Модели Django

Теперь давайте создадим модель Django, которая определяет поля данных, которые мы хотим хранить в базе данных Postgres. Чтобы создать модель, перейдите к файлу models.py в папке posts, как показано ниже.

Теперь ваш файл models.py должен выглядеть так, как показано ниже.

from django.db import models
import datetime


class Article(models.Model):
   title = models.TextField(blank=True)
   description = models.TextField(blank=True)
   cover_image = models.TextField(blank=True)
   article_body = models.TextField(blank=True)
   published_at = models.DateTimeField(
       default=datetime.date.today, blank=True, null=True)

   def __str__(self):
       return self.title

Давайте создадим и применим миграции к нашей базе данных, выполнив приведенные ниже команды.

python manage.py makemigrations

python manage.py migrate

Теперь давайте зарегистрируем модель, открыв файл admin.py в папке posts. Теперь файл admin.py должен выглядеть так, как показано ниже.

from django.contrib import admin
from django.contrib.auth.admin import UserAdmin

from .models import Article


class ArticleAdmin(admin.ModelAdmin):
   list_display = ('id', 'title')


admin.site.register(Article, ArticleAdmin)

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

python manage.py createsuperuser

Django Views

Теперь посетите документацию Dev.to API, чтобы узнать, как получить ключ API вместе с различными конечными точками API. В левой части веб-страницы выберите раздел Аутентификация, чтобы узнать, как получить ключ API.

Затем под разделом аутентификации выберите раздел Статьи. Прокрутите вниз выпадающее меню до пункта «Опубликованные статьи пользователя». Это конечная точка, которая позволяет клиенту получить список опубликованных статей от имени аутентифицированного пользователя.

В правой части страницы вы можете увидеть образцы запросов, которые вы можете сделать к API Dev.to.

Давайте теперь создадим функцию представления python в файле views.py, которая будет выполнять http-запросы к API Dev.to, как показано ниже.

from django.shortcuts import render
import requests
from .models import Article


def get_articles(request):
   all_articles = {}

   API_KEY = 'Your_API_KEY'

   url = 'https://dev.to/api/articles/me/published'

   headers = {'api-key': API_KEY}

   response = requests.get(url, headers=headers)

   data = response.json()

   for i, item in enumerate(data):
       article_data = Article(
           title=data[i]['title'],
           description=data[i]['description'],
           cover_image=data[i]['cover_image'],
           article_body=data[i]['body_markdown'],
           published_at=data[i]['published_at']
       )

       article_data.save()

       all_articles = Article.objects.all().order_by(
           '-published_at').distinct('published_at')

       return render(request, "blog.html", {"all_articles": all_articles})

Чтобы отобразить тело статьи, нам нужно создать еще одну функцию представления, которая будет запрашивать статью по id.

def blogBody(request, id):
   article = Article.objects.get(id=id)

   return render(request, "blogBody.html", {"article": article})

Теперь ваш файл views.py должен выглядеть так, как показано ниже.

from django.shortcuts import render
import requests
from .models import Article


def get_articles(request):
   all_articles = {}

   API_KEY = 'Your_API_KEY'

   url = 'https://dev.to/api/articles/me/published'

   headers = {'api-key': API_KEY}

   response = requests.get(url, headers=headers)

   data = response.json()

   for i, item in enumerate(data):
       article_data = Article(
           title=data[i]['title'],
           description=data[i]['description'],
           cover_image=data[i]['cover_image'],
           article_body=data[i]['body_markdown'],
           published_at=data[i]['published_at']
       )

       article_data.save()

       all_articles = Article.objects.all().order_by(
           '-published_at').distinct('published_at')

       return render(request, "blog.html", {"all_articles": all_articles})


def blogBody(request, id):
   article = Article.objects.get(id=id)

   return render(request, "blogBody.html", {"article": article})

Django URLs

Теперь нам нужно настроить урлы нашего проекта, создав новый файл urls.py в папке posts. Теперь файл urls.py должен выглядеть так, как показано ниже.

from django.urls import path
from .views import blogBody


urlpatterns = [
   path("blog", blog, name="blog"),
   path("article/<int:id>", blogBody, name="article"),
]

Последним шагом будет обновление файла Articles/urls.py — файл должен выглядеть следующим образом.

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
   path('admin/', admin.site.urls),
   path("", include("posts.urls"))
]

Шаблоны Django

Создайте каталог templates, затем создайте два HTML файла blog.html и blogBody.html следующим образом.

mkdir templates

touch templates/blog.html

touch templates/blogBody.html

Теперь давайте обновим файл Articles/settings.py, чтобы указать Django расположение нашей новой директории шаблонов. Это однострочное изменение параметра ‘DIRS’ в разделе Templates, как показано ниже.

TEMPLATES = [
   {
       'BACKEND': 'django.template.backends.django.DjangoTemplates',
       'DIRS': [os.path.join(BASE_DIR, 'templates')], #new
       'APP_DIRS': True,
       'OPTIONS': {
           'context_processors': [
               'django.template.context_processors.debug',
               'django.template.context_processors.request',
               'django.contrib.auth.context_processors.auth',
               'django.contrib.messages.context_processors.messages',
           ],
       },
   },
]

Не забудьте указать import os в верхней части файла settings.py, иначе вы получите ошибку, что os не определен. Теперь ваш файл templates/blog.html должен выглядеть так, как показано ниже.

{% for article in all_articles %}
<img src="{{article.cover_image}}" alt="">
<h4>{{article.title}}</h4>
<p>{{article.description}}</p>
<a href="{% url 'article' article.id %}">Read More...</a>
{% endfor %}

Перейдите по адресу 127.0.01:800/blog и вы увидите статьи из Dev To, как показано ниже.

Тело статьи

Когда мы делаем вызов API, тело статьи извлекается в виде article markdown. Разметка принимается от API в виде строки. Это означает, что он будет выглядеть как необработанный контент, который вы вводите на DEV To, а не как версия для предварительного просмотра/публикации (т.е. со всем синтаксисом разметки, например, ## для заголовков). Чтобы отобразить его на вашем сайте так, как он выглядит на DEV To, вам нужно будет добавить дополнительный шаг для преобразования строки markdown в HTML. Существует множество библиотек для парсинга markdown, которые могут сделать это за вас, но в этом проекте мы будем использовать библиотеку для парсинга markdown для Django под названием Markdown.

Чтобы использовать Markdown, нам нужно установить ее в наш проект с помощью команды ниже:

pipenv install markdown

Давайте создадим пользовательский фильтр шаблонов, который использует Markdown. Создайте каталог templatetags в нашем приложении posts, а затем файл markdown_extras.py, как показано ниже.

mkdir posts/templatetags

touch posts/templatetags/markdown_extras.py

Сам файл будет импортировать пакет markdown и использовать расширение «огороженный блок кода».

# posts/templatetags/markdown_extras.py
from django import template
from django.template.defaultfilters import stringfilter

import markdown as md

register = template.Library()


@register.filter()
@stringfilter
def markdown(value):
   return md.markdown(value, extensions=['markdown.extensions.fenced_code'])

Теперь давайте загрузим пользовательский фильтр в наш шаблон, чтобы содержимое, написанное в формате Markdown, выводилось в формате HTML. Теперь наш файл blogBody.html должен выглядеть следующим образом:

{% load markdown_extras %}

<h4>{{article.title}}</h4>
<img src="{{article.cover_image}}" alt="">
<span>{{article.published_at }}</span>
<p>{{article.article_body | markdown | safe}}</p>

Перейдите по адресу 127.0.01:800/blog и нажмите кнопку read more внизу. Вы должны быть перенаправлены в тело статьи, как показано ниже.

Запрос данных Postgres с помощью Arctype SQL Client

Для просмотра или взаимодействия с данными блога, хранящимися в PostgreSQL, вы можете использовать SQL-клиент и инструмент управления базами данных, например Arctype. Чтобы воспользоваться Arctype, перейдите на домашнюю страницу Arctype и загрузите приложение Arctype на свой компьютер. В настоящее время Arctype поддерживает Linux, Windows и MacOS:

После установки приложения откройте его, и вам будет предложено создать учетную запись, как показано ниже.

После создания учетной записи вам будет предложено выбрать базу данных. В данном случае выберите Postgres.

Следующим шагом будет добавление учетных данных Postgres для подключения Arctype к вашей базе данных Postgres. Используйте учетные данные, которые вы создали при создании базы данных в приглашении Postgres.

После успешного подключения к базе данных вы сможете получить доступ к таблицам базы данных posts в Postgres, как показано ниже.

Если вы хотите узнать, как создавать и выполнять запросы в Arctype, ознакомьтесь с этим руководством.

Заключение

В этой статье вы узнали, как создать блог на своем сайте без необходимости использовать платную систему управления контентом или создавать ее с нуля. Я провел вас через шаги по успешному отображению постов Dev.to в вашем блоге с помощью Django и Dev.to API. Весь код, представленный в этом блоге, доступен на GitHub, если вам понравилась эта статья, обязательно заходите на блог Arctype, чтобы узнать больше, и до следующего раза.