※はじめからはこちら

さて、前回はConsumerの大まかな部分をつくりましたので実際の処理をConsumerにいれていき、カンバンが表示できるようにしていきます。

Consumerへの処理の組み込み

Consumerにボード全体のデータを戻すメソッドを実装していきます。

ボードに必要なモデルの追加

今はBoardモデルだけが実装されていますが、ボードを表現するにはPipeLineとCardのモデルが足りないので先に作ります。

application/modules/kanban/models/pipe_line.py

from django.db import models


class PipeLine(models.Model):

    board = models.ForeignKey('kanban.Board', on_delete=models.CASCADE)
    name = models.CharField(max_length=255)
    order = models.IntegerField(default=0)
    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)

    def __str__(self):
        return '{}: {} of {}'.format(self.pk, self.name, self.board)

application/modules/kanban/models/pipe_line.py

from django.db import models


class Card(models.Model):

    pipe_line = models.ForeignKey('kanban.PipeLine', on_delete=models.CASCADE)
    title = models.CharField(max_length=255)
    content = models.TextField(null=True, blank=True)
    order = models.IntegerField(default=0)
    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)

    def __str__(self):
        return '{}: {} of {}'.format(self.pk, self.title, self.pipe_line)

CardもPipeLineも並び替えができるように表示順を管理するためのorderという属性をもたせておきます。さらに、__init__.pyに追記します。

application/modules/kanban/models/__init__.py

@@ -1 +1,3 @@
 from .board import Board
+from .pipe_line import PipeLine
+from .card import Card

では、マイグレーションを行います。

$ docker-compose exec service python manage.py makemigrations kanban
$ docker-compose exec service python manage.py migrate kanban

実行例

$ docker-compose exec service python manage.py makemigrations kanban
WARNING: The DJANGO_ENV variable is not set. Defaulting to a blank string.
Migrations for 'kanban':
  application/modules/kanban/migrations/0002_auto_20180923_0436.py
    - Create model Card
    - Create model PipeLine
    - Add field pipe_line to card
$ docker-compose exec service python manage.py migrate kanban
WARNING: The DJANGO_ENV variable is not set. Defaulting to a blank string.
Operations to perform:
  Apply all migrations: kanban
Running migrations:
  Applying kanban.0002_auto_20180923_0436... OK

これでモデルができました。ダミーデータを作りたいのでDjango Afminに登録もしておきます。

application/modules/kanban/admin.py

@@ -1,7 +1,7 @@
 from django.contrib import admin

-from .models import Board
+from .models import Board, PipeLine, Card

 admin.site.register(Board)
+admin.site.register(PipeLine)
+admin.site.register(Card)

http://localhost:3000/admin/ にアクセスすれば、以下のようにPipeLineとCardがメニューに追加されているはずです。

次の作業のためにダミーデータとしてPipeLineを1つ、Cardを2つ作っておきましょう。

PipeLine追加

Card追加

ボード全体のデータを戻すメソッドの実装

続いてボードの構成情報をJSONで戻すメソッドを実装します。最終的に以下のようなデータを戻すようにします。

最終的なデータ形式

{
    'board_id': 1,
    'name': 'board name',
    'pipe_line_list': [
        {
            'pipe_line_id': 1,
            'name': 'PipeLine Name1',
            'card_list': [
                {
                    'card_id': 1,
                    'title': 'card1 title',
                    'content': 'content of card1',
                },
                {
                    'card_id': 2,
                    'title': 'card2 title',
                    'content': 'content of card2',
                },
            ],
        },
    ],
}

基本的な流れとしては、あるBoardを取得し、そのボードに紐づくPipeLineの一覧を取得し、各PipeLineに紐づくCardの一覧を取得していく形になります。そのため必要なデータを取得するためのメソッドを各モデルに追加していきます。

まずは、ID指定でBoardが取得できるようにするget_by_idメソッドを追加します。

application/modules/kanban/models/board.py

@@ -15,3 +15,10 @@ class Board(models.Model):
     @classmethod
     def get_list_by_owner(cls, owner):
         return list(cls.objects.filter(owner=owner).order_by('updated_at'))
+
+    @classmethod
+    def get_by_id(cls, board_id):
+        try:
+            return cls.objects.get(pk=board_id)
+        except cls.DoesNotExist:
+            return None

続いて、PipeLineに、あるBoardに紐づくものすべてのPipeLineを戻すメソッド(get_list_by_board)を追加します。並び替えに対応するため、order_by('order')も付与しておきます。

application/modules/kanban/models/pipe_line.py

@@ -11,3 +11,7 @@ class PipeLine(models.Model):

     def __str__(self):
         return '{}: {} of {}'.format(self.pk, self.name, self.board)
+
+    @classmethod
+    def get_list_by_board(cls, board):
+        return list(cls.objects.filter(board=board).order_by('order'))

最後はCardに、特定のPipeLineに紐づくCardを一括で戻すメソッドを追加します。同じ様にorder_by('order')も付与します。

application/modules/kanban/models/card.py

@@ -12,3 +12,7 @@ class Card(models.Model):

     def __str__(self):
         return '{}: {} of {}'.format(self.pk, self.title, self.pipe_line)
+
+    @classmethod
+    def get_list_by_pipe_line(cls, pipe_line):
+        return list(cls.objects.filter(pipe_line=pipe_line).order_by('order'))

これでモデルの部分は用意できたので、サービスメソッドを実装します。

application/modules/kanban/service.py

@@ -1,4 +1,4 @@
-from .models import Board
+from .models import Board, Card, PipeLine


 def get_board_list_by_owner(owner):
@@ -16,3 +16,36 @@ def add_board(owner, board_name):
         name=board_name
     )
     return board
+
+
+def get_board_data_by_board_id(board_id):
+    """
+    borad and pipeline and card.
+    :param int board_id:
+    :return:
+    :rtype: dict
+    """
+    # ボード取得
+    board = Board.get_by_id(board_id)
+    board_data = {
+        'board_id': board.id,
+        'name': board.name,
+        'pipe_line_list': []
+    }
+    # ボードに紐づく各パイプライン取得
+    for pipe_line in PipeLine.get_list_by_board(board):
+        pipe_line_data = {
+            'pipe_line_id': pipe_line.id,
+            'name': pipe_line.name,
+            'card_list': []
+        }
+        # パイプラインに紐づくカードを取得
+        for card in Card.get_list_by_pipe_line(pipe_line):
+            pipe_line_data['card_list'].append({
+                'card_id': card.id,
+                'title': card.title,
+                'content': card.content,
+            })
+        board_data['pipe_line_list'].append(pipe_line_data)
+
+    return board_data

簡単に動作確認をしておきます。Djangoではmanage.py shellで実装したメソッドなどが試せるので以下の様にget_board_data_by_board_idを実行してみます。

動作確認

$ docker-compose exec service ./manage.py shell  # docker内でmanage.py shellを起動
>>> from pprint import pprint
>>> from modules.kanban.service import get_board_data_by_board_id
>>> pprint(get_board_data_by_board_id(1))
{'board_id': 1,
 'name': 'MyBoard1',
 'pipe_line_list': [{'card_list': [{'card_id': 1,
                                    'content': 'content of Card1',
                                    'title': 'Card1'},
                                   {'card_id': 2,
                                    'content': 'content of card2',
                                    'title': 'Card2'}],
                     'name': 'MyList1',
                     'pipe_line_id': 1}]}

データの中身などは少し違うかもしれませんが、大体このような形式になっていれば大丈夫です。

Consumerへの組み込み

WebSocektでConsumerに接続した際にボードデータを初期値として戻すように組み込んでいきましょう。

application/views/ws/kanban_consumer.py

@@ -1,5 +1,7 @@
 from channels.generic.websocket import JsonWebsocketConsumer

+from modules.kanban import service as kanban_sv
+

 class KanbanConsumer(JsonWebsocketConsumer):

@@ -9,14 +11,25 @@ class KanbanConsumer(JsonWebsocketConsumer):
         self.consumer_id = id(self)
         # 後で使う
         self.user = None
+        self.board_id = None

     def connect(self):
         # 認証チェック
         if not self.scope['user'].is_authenticated:
             self.close()
             return

         self.user = self.scope['user']
+        self.board_id = self.scope['url_route']['kwargs']['board_id']
         # 接続を受け入れる
         self.accept()
+        # 初期データをクライアントに返送
+        self.send_board_data()
+
+    def send_board_data(self):
+        board_data = kanban_sv.get_board_data_by_board_id(self.board_id)
+        self.send_json({
+            'boardData': board_data
+        })
+        print(board_data)
+

self.scope['url_route']['kwargs']['board_id']はURLのマッピングルールで'ws/boards/<int:board_id>'のboad_idにマッチした情報を取得するためのものです。この箇所でURLに含まれているBoardのIDを取得しています。

さらに、先程作ったget_board_data_by_board_idを利用して取得したボードの構成情報をクライアントに戻すsend_board_dataメソッドを定義し、connect内で呼び出すようにしています。

動作チェック

前回作成したwstest.pyを少し書き換えて使います。

wstest.py

from wsrequests import WsRequests

wsr = WsRequests()

# login django
wsr.get('http://localhost:3000/accounts/login/')
wsr.post(
    'http://localhost:3000/accounts/login/',
    data={
        'username': 'test',  # Djangoのユーザ名とパスワード
        'password': 'test',
        'csrfmiddlewaretoken': wsr.cookies['csrftoken'],
        'next': '/',
    }
)
wsr.connect('ws://localhost:3000/ws/boards/1')
+ wsr.receive_message()
wsr.disconnect()

接続時に返送されるメッセージを受け取るコードに書き換えました。実行して以下の2行目のようにボードの構成データが戻れば成功です。

$ python wstest.py
2018-09-23 21:16:53,874 - DEBUG - MainThread - connect websocket [ws://localhost:3000/ws/boards/1]
2018-09-23 21:16:53,904 - DEBUG - MainThread - receive message [{"boardData": {"board_id": 1, "name": "MyBoard1", "pipe_line_list": [{"pipe_line_id": 1, "name": "MyList1", "card_list": [{"card_id": 1, "title": "Card1", "content": "content of Card1"}, {"card_id": 2, "title": "Card2", "content": "content of card2"}]}]}}]
2018-09-23 21:16:53,905 - DEBUG - MainThread - disconnect websocket [ws://localhost:3000/ws/boards/1]

次回