Les débutants essaient de créer une application Web de combat en ligne Othello avec Django + React + Bootstrap (1)

introduction

Objet de cette page

Le but est de partager la procédure de création d'une application Web pour Django + React + Bootstrap et de faire un mémorandum personnel. En ce qui concerne le contenu, ce sera une forme dans laquelle les débutants noteront tranquillement la lutte jusqu'à la mise en œuvre d'Othello de bataille interpersonnelle avec l'application Web avec Django + React + Bootstrap par essais et erreurs. Je ne peux pas expliquer en détail, donc je pense que c'est comme passer par les étapes de la construction de l'environnement, de la création du projet, de la création de l'interface utilisateur et de la mise en œuvre d'Othello.

Cible de cette page

environnement

article version Supplément
OS Windows 10
Python 3.6.10
Anaconda 4.8.3 Il gère l'environnement Python.
Django 3.0.3 C'est un framework Web de Python.
numpy 1.18.1 C'est une bibliothèque de calcul numérique de Python. Je vais le mettre parce que c'est pratique.
npm 6.14.4 Il est utilisé pour installer des packages tels que React.
react 16.9.34 C'est le corps principal de React.
react-dom 16.9.34 Il relie Html et React.
react-bootstrap 1.0.1 Réagissez la version d'implémentation de Bootstrap qui rend la conception bonne
webpack 4.43.0 Il convertit le fichier jsx de React en js.

table des matières

1er environnement construction et création de projet

--Construisez un environnement Django avec Anaconda. --Créez un projet Django. --Créez un environnement React avec Node.js. --Utilisez React sur le projet Django.

** Note: Cette fois, nous ne définirons que Django et React, donc l'implémentation d'Othello ne sortira pas. ** **

Programme pour la deuxième fois et les suivantes

--Créez l'apparence et le comportement d'Othello avec React et Bootstrap.

Sujet principal

1. Créez un environnement Django avec Anaconda

On suppose qu'Anaconda est installé. Puisque l'explication sur l'installation d'Anaconda est omise, veuillez vous référer à d'autres pages. Après avoir créé un environnement appelé web avec la commande suivante, installez les nécessaires.

conda create --name web python=3.6.10
conda activate web
conda install django==3.0.3
conda install numpy==1.18.1

2. Créez un projet Django.

2-1. Création du corps du projet

Tout d'abord, créez un projet Django avec la commande suivante. Le projet sera créé directement sous le répertoire où cette commande est exécutée. webgame est le nom du projet. Tout va bien.

conda activate web
django-admin startproject webgame

Je pense que la structure du projet ressemble à ceci.

webgame --+-- webgame  --+-- __init__.py
          |              +-- settings.py    #Il s'agit d'un fichier de configuration Django. Affichez l'emplacement de Html et définissez la base de données.
          |              +-- urls.py        #Paramètres de routage d'URL.
          |              +-- wsgi.py
          +-- manage.py                     #Il gère Django. Démarrez et migrez la base de données.

Immédiatement, tapez la commande suivante pour le démarrer.

cd webgame
python manage.py runserver

Après avoir entré la commande, accédez à http://127.0.0.1:8000 et si une page comme l'image ci-dessous s'affiche, elle réussit. image.png

2-2. Ajouter une page (application)

Ensuite, je vais créer une page d'index. En tant que flux,

  1. Créez une application domestique.
  2. Créez un fichier Html.
  3. Modifiez le fichier de configuration pour rendre le fichier Html accessible.
  4. Créez une vue avec l'application d'accueil.
  5. Définissez l'URL.

Je vais le faire comme ça.

2-2-1 Créez une application domestique.

Vous pouvez créer une application domestique avec la commande suivante.

python manage.py startapp home

À ce stade, la structure du projet doit ressembler à ceci.

webgame --+-- home     --+-- __init__.py
          |              +-- admin.py
          |              +-- apps.py
          |              +-- models.py      #Il s'agit d'un fichier qui définit les tables de la base de données.
          |              +-- test.py
          |              +-- views.py       #C'est le fichier qui crée le comportement de la vue.
          +-- webgame  --+-- __init__.py
          |              +-- settings.py    #Il s'agit d'un fichier de configuration Django. Affichez l'emplacement de Html et définissez la base de données.
          |              +-- urls.py        #Paramètres de routage d'URL.
          |              +-- wsgi.py
          +-- manage.py                     #Il gère Django. Démarrez et migrez la base de données.

2-2-2. Créer un fichier Html

Créez un répertoire comme indiqué ci-dessous et créez ʻindex.html`.

webgame --+-- resources ---- templates ---- home ---- index.html
          +-- home      ----réduction
          +-- webgame   ----réduction
          +-- manage.py  

Le contenu doit être le suivant.

webgame/resources/templates/home/index.html


<h1>Hello, Django!!</h1>

2-2-3. Modifiez le fichier de paramètres afin de pouvoir accéder au fichier Html.

Modifiez settings.py comme suit.

webgame/webgame/settings.py (extrait partiel)


//Près de la ligne 34
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'home',                                                             #ajouter à
]

//Près de la ligne 55
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [
            os.path.join(BASE_DIR, "resources", "templates")            #ajouter à
        ],
        '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',
            ],
        },
    },
]

2-2-4 Créez une vue avec l'application d'accueil.

Modifiez views.py de l'application homes comme suit. Vous pouvez maintenant lire le home / index.html créé précédemment et le transmettre en tant que réponse Http.

webgame/home/views.py


from django.shortcuts import render
from django.http import HttpResponse
from django.template import loader

def index(request):
    template = loader.get_template('home/index.html')
    context = {}
    return HttpResponse(template.render(context, request))

2-2-5. Définissez l'URL.

Tout d'abord, créez un nouveau ʻurls.py` dans l'application d'accueil.

webgame --+-- resources ---- templates ---- home ---- index.html
          +-- home      -+--réduction
          |              +-- urls.py                              #ajouter
          +-- webgame   ----réduction
          +-- manage.py  

Le contenu de ʻurls.py` doit être comme suit.

webgame/home/urls.py


from django.urls import path
from . import views

app_name = "home"

urlpatterns = [
    path('', views.index, name='index'),
]

De plus, modifiez webgame / urls.py comme suit pour lire ceci correctement.

webgame/webgame/urls.py


from django.contrib import admin
from django.urls import include, path           #ajouter inclure

urlpatterns = [
    path('', include('home.urls')),             # home.Configurer pour lire les URL
    path('admin/', admin.site.urls),
]

Si vous effectuez ce paramètre et accédez à http://127.0.0.1:8000, vous devriez voir la page suivante. Vous pouvez maintenant placer votre fichier Html préféré sur n'importe quelle URL de votre site Web. image.png

3. Créez un environnement React avec Node.js.

Tout d'abord, installez Node.js depuis https://nodejs.org/ja/. Les explications détaillées sont laissées aux autres pages.

Pour placer le fichier React, ajoutez le dossier et le fichier comme suit.

webgame --+-- resources -+-- react     -+-- src ---- home ---- index.jsx #fichier source
          |              |              +-- package.json                 #Spécifiez les éléments à installer.
          |              |              +-- webpack.config.js            #Fichier de configuration lors de la conversion de jsx en js
          |              |              +-- .babelrc                     #la magie
          |              +-- templates ----réduction
          +-- home      ----réduction
          +-- webgame   ----réduction
          +-- manage.py  

Tout d'abord, éditez package.json comme suit.

webgame/resources/react/package.json


{
  "name": "webgame",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.4.3",
    "@babel/preset-env": "^7.4.3",
    "@babel/preset-react": "^7.0.0",
    "@babel/register": "^7.4.0",
    "babel-loader": "^8.0.5",
    "html-webpack-plugin": "^3.2.0",
    "react-bootstrap": "^1.0.1",               # React-Bootstrap (Liés à la conception)
    "superagent": "^5.0.2",                    # superagent      (Communication Ajax)
    "webpack": "^4.30.0",                      # WebPack         (Créer un fichier js)
    "webpack-cli": "^3.3.1",
    "webpack-dev-server": "^3.2.1"
  },
  "dependencies": {
    "react": "^16.13.1",                       # React           (Corps de réaction)
    "react-dom": "^16.13.1"                    # ReactDOM        (Connectez jsx avec Html)
  }
}

Ensuite, modifiez .babelrc comme suit.

webgame/resources/react/.babelrc


{
    "presets": [
      "@babel/preset-env", "@babel/preset-react"
    ]
}

Ensuite, installez-le avec la commande suivante.

cd resources
cd react
npm install

Si tout se passe bien, un dossier appelé node_modules sera créé et diverses bibliothèques seront installées. La structure des dossiers à ce moment est comme ça.

webgame --+-- resources -+-- react     -+-- node_modules ----réduction#Cela sera ajouté
          |              |              +-- src          ----réduction
          |              |              +--réduction
          |              +-- templates ----réduction
          +-- home      ----réduction
          +-- webgame   ----réduction
          +-- manage.py  

Ceci termine les paramètres React.

4. Utilisez React sur le projet Django.

Ici, nous allons définir et publier selon le flux suivant.

  1. Créez un fichier jsx
  2. Convertissez le fichier jsx en js
  3. Lisez le fichier js à partir du fichier Html
  4. Configurer pour lire les fichiers js
  5. Commencez!

4-1. Créer un fichier jsx

Commencez par créer un fichier jsx en utilisant React. Modifiez src / home / index.jsx comme suit.

webgame/resources/react/src/home/index.jsx


//Importez ce dont vous avez besoin.
import React from 'react'
import ReactDOM from 'react-dom'

//Créez un composant React.
class Home extends React.Component {
    constructor() {
        super();
    }

    //Implémentez la pièce à rendre.
    render() {
        return (
            <h1> Hello, React!! </h1>
        );
    }
}

//Associez-vous à Html. ici,`home`Il est configuré pour associer la balise à l'id avec le composant Home.
ReactDOM.render(
    <Home />,
    document.getElementById('home')
);

4-2. Convertir le fichier jsx en js

Commencez par créer un emplacement de stockage pour le fichier js. Veuillez organiser comme suit.

webgame --+-- resources -+-- static    ---- js       #Créer un répertoire vide
          |              +-- react     ----réduction
          |              +-- templates ----réduction
          +-- home      ----réduction
          +-- webgame   ----réduction
          +-- manage.py  

Ensuite, éditez webpack.config.js comme suit.

js:webgame/resources/react/webpack.config.js


require('@babel/register');
const path = require('path');

module.exports = {
    //Définition du nom et de l'emplacement du fichier jsx à charger
    entry: {
        home_index:     path.resolve(__dirname, "src/home/index.jsx"),
    },
    //Définition de l'emplacement et du nom du fichier js de sortie
    output: {
        path: path.resolve(__dirname, "../static/js/") ,
        filename: "[name].js",
    },
    module: {
        rules: [
            {
                test: /\.jsx$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            }
        ]
    },
    resolve: {
        extensions: [".js","jsx"],
    }
}

Après l'édition, allez dans webgame / resources / react comme indiqué ci-dessous et exécutez webpack. Ce processus est effectué à chaque fois que le fichier jsx est modifié.

cd resources
cd react
node_modules\\.bin\\webpack

Si webgame / resources / static / js / home_index.js est créé avec ceci, il réussit.

4-3. Lire le fichier js à partir du fichier Html

Cette fois, éditez le fichier home / index.html comme suit pour charger le fichier js.

webgame/resources/templates/home/index.html


<!-- Django3.Lecture de fichier statique à 0-->
{% load static %}

<h1>Hello, Django!!</h1>

<!--Placez le tag avec l'identifiant à la maison-->
<div id="home"></div>

<!-- home_index.lire js-->
<script src="{% static 'js/home_index.js' %}"></script>

4-4. Configurer pour lire les fichiers js

Enfin, configurez Django pour pouvoir lire les fichiers statiques (js ou css). Modifiez la fin de settings.py comme suit.

webgame/webgame/settings.py


#Près de la ligne 133
STATIC_URL = '/static/'

#Partie supplémentaire d'ici
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'resources/static'),
]

4-5. Commencez!

Revenons à la hiérarchie où se trouve manage.py et démarrons le serveur comme d'habitude.

python manage.py runserver

Si vous accédez à http://127.0.0.1:8000 et que Hello, React !! s'affiche, vous avez réussi. image.png

en conclusion

Merci pour la lecture. Ce serait très utile si vous pouviez me dire tout ce qui est difficile à comprendre, quelque chose qui ne fonctionne pas ou quelque chose qui ne va pas.

La prochaine fois, j'aimerais utiliser Bootstrap pour créer l'apparence d'Othello, alors continuez à me soutenir.

Recommended Posts

Les débutants essaient de créer une application Web de combat en ligne Othello avec Django + React + Bootstrap (1)
Créons une application Web de conversion A vers B avec Flask! De zéro ...
(Python) Essayez de développer une application Web en utilisant Django
J'ai essayé de créer une application OCR avec PySimpleGUI
[Mémo d'apprentissage] Comment créer une application avec Django ~ Jusqu'à ce que Hello World soit affiché ~
[Mémo d'apprentissage] Comment créer une application avec Django ~ De l'environnement virtuel au push vers github ~
Créer une application Web avec Django
(Pour les débutants) Essayez de créer une API Web simple avec Django
Essayez de créer un type de service Web avec un langage de balisage 3D
Explication facile à comprendre de l'application Web Python (Django) même pour les débutants (5) [Introduction au fonctionnement de la base de données avec le shell Django]
Créer une application Web avec Django
[TCP / IP] Après avoir étudié, essayez de créer un client HTTP avec Python
Comment créer une application à partir du cloud à l'aide du framework Web Django
Je souhaite créer une application Web en utilisant React et Python flask
Essayez de générer une image avec aliénation
[Pour les débutants] Essayez le web scraping avec Python
J'ai fait une application WEB avec Django
WEB grattage avec python et essayez de créer un nuage de mots à partir des critiques
Essayez de créer une application Web avec Vue.js et Django (édition Mac) - (1) Construction d'environnement, création d'application
Essayez de créer votre propre AWS-SDK avec bash
Les débutants en IA essaient de faire des étudiants professionnels Bot
Essayez de créer un code de "décryptage" en Python
Essayez de créer un groupe de dièdre avec Python
Essayez de rendre le client FTP le plus rapide avec Pythonista
[Cloud 9] Essayez de créer un environnement avec django 1.11 de Python 3.4 sans même comprendre 1 mm
Procédure de création d'une application avec Django avec Pycharm ~ Préparation ~
python débutant essaie d'ajouter une authentification de base à l'administrateur de Django
Faisons un outil de veille de commande avec python
Essayez de créer une API RESTful avec MVC à l'aide de Flask 1.0.2
Application Web réalisée avec Python3.4 + Django (Construction de l'environnement Part.1)
Comment créer un serveur HTTPS avec Go / Gin
Les débutants en apprentissage automatique essaient de créer un arbre de décision
Authentification unique à l'application Django avec AWS SSO
Faire une application utilisant tkinter un fichier exécutable avec cx_freeze
[Python] J'ai essayé de faire une application qui calcule le salaire en fonction des heures de travail avec tkinter