0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

DjangoとDocker練習OA19o1o0 ユーザーホームを作ろう!

Last updated at Posted at 2022-05-14

サンプルを見る

📖 この記事のゴール

目標

ゲーム対局サーバーと、ユーザーの間には サインアップを経て承諾した内容があるはずだ。
ユーザーは時に その契約内容を変えたいし、 また 退会したい

詳細

マイページ なるページを用意し、そこから 契約内容の変更や 退会が行えると 話しが早いだろう

免責: この記事では 工事中のページを用意するだけで、契約内容の変更などの機能までは持たない

情報

この記事は Lesson 1. から順に全部やってこないと ソースが足りず実行できないので注意されたい

What is This is
Lesson 1. 📖 DjangoとDockerでゲーム対局サーバーを作ろう!

この記事のアーキテクチャ:

What is This is
OS Windows10
Container Docker
Database Postgresql, (Redis)
Program Language Python 3
Web framework Django
Auth allauth
Frontend Vuetify
Data format JSON
Others (Socket), Web socket
Editor Visual Studio Code (以下 VSCode と表記)

参考にした元記事は 📖DjangoでCRUD だ。
わたしの記事は単に やってみた ぐらいの位置づけだ

ディレクトリ構成を抜粋すると 以下のようになっている

    ├── 📂 src1                            # あなたのDjangoサーバー開発用ディレクトリー。任意の名前
    │   ├── 📂 apps1
    │   │   ├── 📂 accounts_vol1o0    # アプリケーション
    │   │   ├── 📂 portal_v1                # アプリケーション
    │   │   ├── 📂 practice_vol1o0              # アプリケーション
    │   │   │   ├── 📂 migrations
    │   │   │   └── 📂 models
    │   │   │       └── 📂 room
    │   │   │           └── 📄 ver1o0.py
    │   │   ├── 📂 tic_tac_toe_vol1o0           # アプリケーション
    │   │   └── 📂 tic_tac_toe_vol2o0           # アプリケーション
    │   │       ├── 📂 migrations
    │   │       │   └── 📄 __init__.py
    │   │       ├── 📂 static
    │   │       │   └── 📂 tic_tac_toe_vol2o0
    │   │       │       ├── 📂 gui
    │   │       │       └── 📂 think
    │   │       ├── 📂 templates
    │   │       │   └── 📂 tic_tac_toe_vol2o0
    │   │       │       ├── 📂 gui
    │   │       │       └── 📂 think
    │   │       ├── 📂 views
    │   │       │   ├── 📂 gui
    │   │       │   └── 📂 think
    │   │       ├── 📄 __init__.py
    │   │       ├── 📄 admin.py
    │   │       ├── 📄 apps.py
    │   │       └── 📄 tests.py
    │   ├── 📂 data
    │   ├── 📂 project1                  # プロジェクト
    │   │   ├── 📄 __init__.py
    │   │   ├── 📄 asgi.py
    │   │   ├── 📄 settings_secrets_example.txt
    │   │   ├── 📄 settings.py
    │   │   ├── 📄 urls_accounts_vol1o0.py
    │   │   ├── 📄 urls_practice.py
    │   │   ├── 📄 urls_tic_tac_toe_v1.py
    │   │   ├── 📄 urls_tic_tac_toe_v2.py
    │   │   ├── 📄 urls.py
    │   │   ├── 📄 ws_urls_tic_tac_toe_v1.py
    │   │   └── 📄 wsgi.py
    │   ├── 📂 project2                  # プロジェクト
    │   ├── 🐳 docker-compose-project2.yml
    │   ├── 🐳 docker-compose.yml
    │   ├── 🐳 Dockerfile
    │   ├── 📄 manage.py
    │   └── 📄 requirements.txt
    ├── 📂 src1_meta
    │   ├── 📂 data
    │   │   └── 📄 urls.csv
    │   └── 📂 scripts
    │       └── 📂 auto_generators
    │           └── 📄 urls.py
    ├── 📂 src2_local                      # Djangoとは関係ないもの
    │    ├── 📂 sockapp1
    │    └── 📂 websockapp1
    └── 📄 .gitignore

手順

Step OA19o1o0g1o0 Dockerコンテナの起動

👇 (していなければ) Docker コンテナを起動しておいてほしい

# docker-compose.yml ファイルを置いてあるディレクトリーへ移動してほしい
cd src1

# Docker コンテナ起動
docker-compose up

Step OA19o1o0g2o0 画面作成 - my/ver1o0.html ファイル

👇 以下のファイルを新規作成してほしい

    └── 📂 src1
        └── 📂 apps1
            └── 📂 practice_vol1o0                  # アプリケーション
                └── 📂 templates
                    └── 📂 practice_vol1o0          # アプリケーションと同名
                        └── 📂 my
👉                          └── 📄 ver1o0.html
{# OA19o1o0g2o0 #}
<!-- -->
{% load static %} {# 👈あとで static "URL" を使うので load static します #}
<!DOCTYPE html>
<!-- See also: https://qiita.com/zaburo/items/ab7f0eeeaec0e60d6b92 -->
<html lang="ja">
    <head>
        <meta charset="utf-8" />
        <link rel="shortcut icon" type="image/png" href="{% static 'favicon.ico' %}" />
        <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet" />
        <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet" />
        <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>マイ ページ</title>
    </head>
    <body>
        <div id="app">
            <v-app>
                <v-main>
                    <v-container>
                        <v-row class="my-2">
                            <h3>マイ ページ</h3>
                        </v-row>
                        <v-row class="my-2">
                            <v-btn :href="createLobbyPath()">ロビー(待合室)へ移動する</v-btn>
                        </v-row>
                        <v-row class="my-2">
                            <v-btn :href="createTicTacToePath()">〇×ゲーム</v-btn>
                        </v-row>
                        {% if user.is_authenticated %}
                        <v-row class="my-2">
                            <v-btn :href="createLogoutPath()">ログアウト</v-btn>
                        </v-row>
                        {% else %}
                        <v-row class="my-2">
                            <v-btn :href="createLoginPath()">ログイン/会員登録</v-btn>
                        </v-row>
                        {% endif %}
                    </v-container>
                </v-main>
            </v-app>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
        <script>
            let vue1 = new Vue({
                el: "#app",
                vuetify: new Vuetify(),
                data: {
                    // "vu_" は 「vue1.dataのメンバー」 の目印
                    vu_lobbyPath: "{{ dj_lobbyPath }}",
                    vu_ticTacToePath: "{{ dj_ticTacToePath }}",
                    vu_loginPath: "{{ dj_loginPath }}",
                    vu_logoutPath: "{{ dj_logoutPath }}",
                },
                methods: {
                    createLobbyPath() {
                        let url = `${location.protocol}//${location.host}${this.vu_lobbyPath}`;
                        //          --------------------  --------------]--------------------
                        //          1                     2              3
                        // 1. protocol
                        // 2. host
                        // 3. path
                        console.log(`game url=[${url}]`);
                        return url;
                    },
                    createTicTacToePath() {
                        let url = `${location.protocol}//${location.host}${this.vu_ticTacToePath}`;
                        console.log(`game url=[${url}]`);
                        return url;
                    },
                    createLoginPath() {
                        let url = `${location.protocol}//${location.host}${this.vu_loginPath}`;
                        console.log(`login url=[${url}]`);
                        return url;
                    },
                    createLogoutPath() {
                        let url = `${location.protocol}//${location.host}${this.vu_logoutPath}`;
                        console.log(`logout url=[${url}]`);
                        return url;
                    },
                },
            });
        </script>
    </body>
</html>

Step OA19o1o0g3o0 ビュー編集 - my/ver1o0 フォルダー

👇 以下の既存ファイルを編集してほしい

    └── 📂 src1
        └── 📂 apps1
            └── 📂 practice_vol1o0                  # アプリケーション
                ├── 📂 templates
                │   └── 📂 practice_vol1o0          # アプリケーションと同名
                │       └── 📂 my
                │           └── 📄 ver1o0.html
                └── 📂 views
                    └── 📂 my
                        └── 📂 ver1o0
👉                          └── 📄 __init__.py
# BOF OA19o1o0g3o0

class MyV():
    """OA19o1o0g3o0 マイ ページ ビュー"""

    # マイ ページ
    _path_of_my_page = "practice_vol1o0/my/ver1o0.html"
    #                   ------------------------------
    #                   1
    # 1. `src1/apps1/practice_vol1o0/templates/practice_vol1o0/my/ver1o0.html` を取得
    #                                          ------------------------------

    @staticmethod
    def render_my(request):
        """OA19o1o0g3o0 描画 - マイ ページ"""

        # 以下のファイルはあとで作ります
        from .v_my import render_my
        #    -----        ---------
        #    1            2
        # 1. `src1/apps1/practice_vol1o0/views/my/ver1o0/v_my.py`
        #                                                ----
        # 2. `1.` に含まれる関数

        return render_my(request, MyV._path_of_my_page)

# EOF OA19o1o0g3o0

Step OA19o1o0g4o0 ビュー作成 - v_my ファイル

👇 以下のファイルを新規作成してほしい

    └── 📂 src1
        └── 📂 apps1
            └── 📂 practice_vol1o0                  # アプリケーション
                ├── 📂 templates
                │   └── 📂 practice_vol1o0
                │       └── 📂 my
                │           └── 📄 ver1o0.html
                └── 📂 views
                    └── 📂 my
                        └── 📂 ver1o0
                            ├── 📄 __init__.py
👉                          └── 📄 v_my.py
# BOF OA19o1o0g4o0

from django.shortcuts import render


def render_my(request, my_page_tp):
    """OA19o1o0g4o0 描画 - マイ ページ

    Parameters
    ----------
    my_page_tp : str
        Template path
    """

    context = {
        # "dj_" は 「Djangoがレンダーに埋め込む変数」 の目印
        'dj_user': request.user,

        'dj_lobbyPath': '/practice/vol1.0/lobby/ver1.0/',
        #                ------------------------------
        #                1
        # 1. http://example.com/practice/vol1.0/lobby/ver1.0/
        #                      ------------------------------

        'dj_ticTacToePath': '/tic-tac-toe/vol2.0/match-application/ver1.0/',
        #                    ---------------------------------------------
        #                    1
        # 1. http://example.com/tic-tac-toe/vol2.0/match-application/ver1.0/
        #                      ---------------------------------------------

        'dj_loginPath': '/accounts/vol1.0/login/',
        #                -----------------------
        #                1
        # 1. http://example.com/accounts/vol1.0/login/
        #                      -----------------------

        'dj_logoutPath': '/accounts/vol1.0/logout/',
        #                 ------------------------
        #                 1
        # 1. http://example.com/accounts/vol1.0/logout/
        #                      ------------------------
    }

    return render(request, my_page_tp, context)

# EOF OA19o1o0g4o0

Step OA19o1o0g5o0

Merged to OA19o1o0g5o1o0

Step OA19o1o0g5o1o0 ルート編集 - urls.csv ファイル

👇 以下の既存ファイルの末尾に追記してほしい

    ├── 📂 src1
    │   └── 📂 apps1
    │       └── 📂 practice_vol1o0                  # アプリケーション
    │           ├── 📂 templates
    │           │   └── 📂 practice_vol1o0
    │           │       └── 📂 my
    │           │           └── 📄 ver1o0.html
    │           └── 📂 views
    │               └── 📂 my
    │                   └── 📂 ver1o0
    │                       ├── 📄 __init__.py
    │                       └── 📄 v_my.py
    └── 📂 src1_meta
        └── 📂 data
👉          └── 📄 urls.csv
...略... file,path,name,comment,module,class,alias,method
...略...


../src1/project1/urls_practice_vol1o0_autogen.py,practice/vol1.0/my/ver1.0/,practice_vol1o0_my,"OA19o1o0g5o1o0 練習1.0巻 マイページ1.0版",apps1.practice_vol1o0.views.my.ver1o0,MyV,,render_my

Step OA11o4o0g6o2o0 ルート編集 - コマンド打鍵

👇 以下のコマンドを打鍵してほしい

cd ../src1_meta
python -m scripts.auto_generators.urls
cd ../src1
docker-compose restart
  • ディレクトリーは、がんばって移動してほしい
  • スクリプトについて See also: O3o2o_1o0g2o0
  • 設定ファイルを変更したら、サーバーの再起動が必要

Step OA19o1o0g6o0 Web画面へアクセス

📖 http://localhost:8000/practice/vol1.0/my/ver1.0/

Step OA19o1o0g7o0 ランチャーのリンク用データ追加 - finished-lessons.csv ファイル

👇 以下の既存ファイルの最終行に追記してほしい

    └── 📂 src1
        ├── 📂 apps1
        │   ├── 📂 portal_v1                        # アプリケーション
        │   │   └── 📂 data
        │   │       └── 📄 finished-lessons.csv
        │   └── 📂 practice_vol1o0                      # アプリケーション
        │       ├── 📂 templates
        │       │   └── 📂 practice_vol1o0
        │       │       └── 📂 my
        │       │           └── 📄 ver1o0.html
        │       └── 📂 views
        │           └── 📂 my
        │               └── 📂 ver1o0
        │                   ├── 📄 __init__.py
        │                   └── 📄 v_my.py
        └── 📂 project1                          # プロジェクト
👉          └── 📄 urls_practice.py

👇 冗長なスペース,冗長なダブルクォーテーション,末尾のカンマ は止めてほしい

/practice/vol1.0/my/ver1.0/,OA19o1o0g7o0 練習1.0巻 マイページ1.0版

👇 ランチャーにリンクが追加されていることを確認してほしい

📖 http://localhost:8000/

次の記事

📖 Djangoでロビー(待合室)を作ろう!

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?