前回まではVueのフレームワークを使い、フロントエンドのアプリを作成しました。まだモックのデータでしか操作できないので、実際にREST APIを作成したVue側で使えるようにしていきます。

今日は、PythonのウェブフレームワークのDjangoを使ってAPIを作っていきます。Flaskよりもアドミンページがあったりセキュリティの設定が最初から入っているなど開発の面でもスピードアップができる素晴らしいフレームワークです。

YouTubeでもDjangoとDjango REST APIを説明したプレイリストがあるので是非見てください。

作業日2022年12月13日
作業にかけた時間2時間
合計作業時間11時間
作業内容Djangoのプロジェクト作成
virtualenvの設定
requirements.txtに書き出し
DRFのインストール
DBのテーブルの構成
モデル、URL、ビューの設定
PostgreSQLに接続

Djangoのプロジェクト

では早速Djangoのプロジェクトを作成します。Python3がインストールされていることを確認してください。

その前に仮想環境のvirtualenvが入っているか確認します。入っていない場合は下記のコマンドでインストールしましょう。

python --version

pip install virtualenv

仮想環境の説明はこちらの動画を見てください。必ず役に立ちますよ。

では正しいファイルパスにいることを確認して下記のコマンドで仮想環境をアクティベートします。

virtualenv env
#envは環境名なので何でもOK

#linux, Mac
source env/bin/activate

#windows
env\Scripts\activate

これでプロンプトの最初に（env）と表示されればOKです。

Djangoのインストール

ではDjangoとDjango REST Frameworkをインストールします。

他にも必要なパッケージがあればその都度インストールすると思いますが、今のところはなさそうです。

python -m pip install Django

pip install djangorestframework

#パッケージの一覧を表示させます。
pip list

#これがインストールされたはずです。↓
asgiref             3.5.2
Django              4.1.4
djangorestframework 3.14.0
pip                 22.0.4
pytz                2022.6
setuptools          62.1.0
sqlparse            0.4.3
wheel               0.37.1

Djangoはバージョン4.1がリリースされているので最新のものを入れておきましょう。

必要であればgit initでリポを作成しましょう。詳しいGitとGitHubの使い方はこちらの動画を見てください。

では、下記のコマンドでDjangoのプロジェクトをスタートします。

次にmanage.pyのファイルを使ってDjangoのアプリを作成します。

django-admin startproject js_hiroba

cd js_hiroba

#必要に応じて
#git init

python manage.py startapp command

次にを開発用の仮のデータベースをSQLiteで作成します。

その後にテストランしてみましょう。

#python manage.py makemigrations
python manage.py migrate

python manage.py runserver

これでセッションのテーブルができました。

では実際にブラウザにアクセスしてDjangoのデフォルトのページが表示されるか見てみます。

OKですね。では実際にコードに入ります。

アプリの登録

先ほど登録したcommandアプリをDjangoのプロジェクトに教えてあげます。

Settings.pyでcommandアプリとRESTフレームワークのアプリを登録しました。

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework',
    'command',
]

次にプロジェクトフォルダのurls.pyにAPIのエンドポイントとなるURLを登録します。

このrouterファイルは後から作成します。まずはAPIの前にデータが登録できるところまで確認しましょう。

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

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include(router.urls)),
]

モデルの作成

ではデータベースの枠となるmodels.pyを作成していきます。

とりあえずはこんな感じで作成しました。

from django.db import models

class Command(models.Model):
    title = models.CharField(max_length=300, blank=True, null=True)
    keyword = models.CharField(max_length=100, blank=True, null=True)
    command = models.CharField(max_length=300, blank=True, null=True)

    class Meta:
        verbose_name_plural = 'Commands'

    def __str__(self):
        return self.title

Views.pyの作成

Views.pyはモデルともとに何をするのか指示する場所になります。

ここではモデルをシリアル化してAPIを作成するように指示しています。

from .models import Commands
from .serializers import CommandSerializer
from rest_framework import viewsets

class CommandViewSet(viewsets.ReadOnlyModelViewSet):
    queryset = Commands.objects.all()
    serializer_class = CommandSerializer

CommandSerializerのファイルがまだできていないのでそれを作成します。

CommandSerializer

では同じファイルパスにserializers.pyを作成しましょう。

まずはこれだけ設定していきます。

from rest_framework import serializers
from .models import Command

class CommandSerializer(serializers.ModelSerializer):
    class Meta:
        model = Command
        fields = "__all__"

admin.pyの登録

Djangoのアドミンパネルでテーブルが見れるようにモデルを登録します。

from django.contrib import admin
from .models import Command

admin.site.register(Command)

スーパーユーザーの登録

Djangoのスーパーユーザーを作成してアドミンパネルからテーブルが作成できるか見てみましょう。

python manage.py createsuperuser

再度テーブルのマイグレーションを行います。

そしてadmin.pyからモデルを登録します。

from django.contrib import admin
from .models import Command

admin.site.register(Command)

再度テストサーバーを起動するとデータが登録できることが確認できましたね。

routerファイルの作成

今後Djangoアプリが増えた際にすべてのAPIのエンドポイントを一つにまとめるためにrouterファイルを作成してそこに格納します。

from command.views import CommandViewSet
from rest_framework import routers

router = routers.DefaultRouter()
# Command END POINT
router.register('command', CommandViewSet)

ではURLにアクセスしてAPIが見れることを確認しましょう。

素晴らしいです！こんなに簡単にAPIができるなんて最高ですね。ではこの調子で記事検索で使うモデルとAPIを作成していきます。

PostgreSQL

ではデータベースをインストールする前にDjango側にデバッグモードがFlaseの場合はPostgresのデータベースに接続するように設定します。

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

else:
    DATABASES = {
        'default': {
            'ENGINE': 'django.db.backends.postgresql_psycopg2',
            'NAME': 'js_hiroba_db',
            'USER': 'postgres',
            'PASSWORD': postgrespw,
            'HOST': '127.0.0.1',
            'PORT': '5432',
        }
    }

PASSWORDの部分は安全面の為に他のファイルからパスワードをインポートし、.gitignoreにこのファイルを追加してGitHubで公開させないようにしました。

後はデータベースとのやり取りをするためのライブラリPsycopg2をインストールします。

pip install psycopg2-binary

pip freeze > requirements.txt

では次回に早速DjangoをデプロイしてそれからCORESの設定とか必要な部分を調整していきます。

　JSひろば