background

Even if you can study what is called AI technology such as DL and ML and implement it by programming, if you try to spread it within the company, a coding barrier will occur and it will not spread easily.

Purpose

Even if you say "Put a Jupyter notebook and use python to remember" in the department, it takes time to learn for people who do not usually handle programming at work, so if you read the data as a Web application and click it, you can move it! I wish I could make a UI that says, so I started studying. I would like to keep the knowledge I gained.

means

This time, create it using VScode + Flask. First, create a simple web page.

Currently, we are developing by incorporating Plotly's library called Dash in order to use interactive graphs. The GIF running on that Dash is attached for your reference. I would like to introduce the journey up to this point one by one (it also has a strong meaning as a memorandum of my own). Dash is also based on Flask, so let's start with the basics of Flask.

environment

This time, we will proceed with the miniconda 4.7.12 installed on Windows 10. It does not use the conda virtual environment. 3.7.3 is installed for python.

procedure

1. Create a project (workspace) folder in any location
  C: \ project \ vscpython \ Flasktest This time it was named Flasktest
1. Load it into VScode as a workspace folder
1. Flask Python environment construction Start terminal (Ctrl + Shift + @)
  Create a virtual environment in the Flasktest folder.
  Use venv. python –m venv <Virtual environment name: here it is flasktest>Created with

Start command palette (Ctrl + Shift + P) → Enter interpreter. The created environment selection. 　　 OK if the workspace name and environment name are displayed in the lower left window 　

Reboot the terminal to activate the virtual environment. 　

The environment switches. 　

Create an a.py file as a trial ⇒ The Linter pylint Install screen appears. When installed, it will check the syntax. 　　

Install the required libraries Install Flask this time (install any missing items) 　

1. Flask Python configuration
  Configure Flask to debug. First, create the Flask app listed on Flask's official website. Create an app.py file and write as follows.

`app.py`


from flask import Flask
app = Flask(__name__)

@app.route("/")
def hello_world():
  return "Hello, World!"

You will be asked for F5 ⇒ debug configuration in VS code, so select Flask and execute

app.py will be executed. If you click the URL of Running on http: // ... and Hello! World! Is displayed in your browser, it is successful.

By the way, the configuration is described in the launch.json file in the .vscode folder.

By changing this code, you can set the py file to operate, host, port, etc. For example, when accessing from another PC in the LAN, add host and port.

`launch.json`


{

    "version": "0.2.0",
    "configurations": [
        {
            "name": "Python: Flask",
            "type": "python",
            "request": "launch",
            "module": "flask",
            "env": {
                "FLASK_APP": "app.py", #Specify the py file to start
                "FLASK_ENV": "development",
                "FLASK_DEBUG": "0"
            },
            "args": [
                "run",
                "--no-debugger",
                "--no-reload",
                "--host=0.0.0.0", #Postscript
                "--port=5000", #Postscript
            ],
            "jinja": true
        }
    ]
}

By describing as above, you can access by entering the IP address or computer name of the PC running Flask into the browser.

Web application created with Python + Flask (using VScode) # 1-Virtual environment construction-