[48] 230308 Ch. 6 Flask를 활용한 센서 제어: 5. Flask 웹페이지, 6. IP, Port, Process 개념 잡기, 7. cron과 daemon 개념 잡기 [K-디지털 트레이닝 48일]

Notice

Recent Posts

Recent Comments

Links

« 2024/09 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

Tags more

Archives

Today

In Total

관리 메뉴

A Joyful AI Research Journey🌳😊

[48] 230308 Ch. 6 Flask를 활용한 센서 제어: 5. Flask 웹페이지, 6. IP, Port, Process 개념 잡기, 7. cron과 daemon 개념 잡기 [K-디지털 트레이닝 48일] 본문

🌳Bootcamp Revision 2023✨/Python, Flask, SQL

[48] 230308 Ch. 6 Flask를 활용한 센서 제어: 5. Flask 웹페이지, 6. IP, Port, Process 개념 잡기, 7. cron과 daemon 개념 잡기 [K-디지털 트레이닝 48일]

yjyuwisely 2023. 3. 8. 09:11

230308 Wed 48th class

Ch. 6 Flask를 활용한 센서 제어
진도: p. 156 ~ (교재: IoT 사물인터넷을 위한 라즈베리파이 4 정석, 저자: 최주호 , 김재범 , 정동진)
교재 코드 깃허브: https://github.com/codingspecialist/RaspberryPi4-Book-Example
교재 소스 및 PPT: http://jspstudy.co.kr/main/main.jsp
저자 카페: https://cafe.naver.com/metacoding

IoT 사물인터넷을 위한 라즈베리파이 4 정석 | 최주호 - 교보문고

IoT 사물인터넷을 위한 라즈베리파이 4 정석 | 『IoT 사물인터넷을 위한 라즈베리파이 4 정석』은 왕초보도 라즈베리파이를 이용해 다양한 IoT를 직접 개발할 수 있도록 전기전자 기초 원리부터 센

product.kyobobook.co.kr

오늘 배운 것 중 기억할 것을 정리했다.

몰랐던 것

Rendering is a process used in web development that turns website code into the interactive pages users see when they visit a website. The term generally refers to the use of HTML, CSS, and JavaScript codes. The process is completed by a rendering engine, the software used by a web browser to render a web page. Because of its close association with web browsers, rendering engines are commonly referred to as browser engines.

참고: https://www.seobility.net/en/wiki/Rendering

렌더링이란 서버로부터 HTML 파일을 받아 브라우저에 뿌려주는 과정이다. 브라우저는 서버로부터 HTML 문서를 다운 받는다.
참고

Rendering is the process that turns the code you write an application in into something that users can interact with on a web page.

Visual Studio Code에서 Flask 설치 방법 링크들

https://velog.io/@awesome-hong/VScode에서-가상환경-설정-Flask-설치하기

https://flask.palletsprojects.com/en/1.1.x/installation/#python-version

Installation — Flask Documentation (1.1.x)

Warning: This is an old version. The latest stable version is Version 2.0.x. Installation Python Version We recommend using the latest version of Python 3. Flask supports Python 3.5 and newer, Python 2.7, and PyPy. Dependencies These distributions will be

flask.palletsprojects.com

플라스크 튜토리얼
https://realpython.com/flask-blueprint/

Ch. 6 Flask를 활용한 센서 제어

01 _ Flask 세팅하기
01-1 라즈베리 4에서 설치하기
01-2 Flask 설치하기

02 _ Flask 웹서버 구축하기

03 _ Flask 라우팅

04 _ Flask LED 제어하기
04-1 Flask LED 제어 정적 라우팅
04-2 Flask LED 제어 동적 라우팅〈산형괄호〉
04-3 Flask LED 제어 동적 라우팅〈쿼리스트링〉

05 _ Flask 웹페이지
05-1 Flask, HTML, CSS, Javascript를 이용한 웹페이지 만들기
05-2 fetch() 함수 이해하기
05-3 화살표 함수 이해하기

06 _ IP, Port, Process 개념잡기
06-1 IP 개념잡기
06-2 Port 개념잡기
06-3 Process 개념잡기

07 _ cron과 daemon 개념잡기
07-1 cron(크론) 개념잡기
07-2 daemon(데몬) 개념잡기

08 _ 공공데이터 활용하기
08-1 공공데이터 신청하기
08-2 공공데이터 분석하기
08-3 파이썬을 활용하여 온습도 확인하기

학습목표

- Flask를 설치하고 웹 서버를 구축할 수 있다.

- Flask를 활용하여 센서를 제어할 수 있다.

- IP, Port, Process, Cron, Daemon에 대해서 이해할 수 있다.

학습내용

- Flask 세팅하기

- Flask 웹 서버 구축하기

- Flask 라우팅

- Flask LED 제어하기

- Flask 웹 페이지

- IP, Port, Process 개념 잡기

- Cron, Daemon 개념 잡기

- 공공데이터 활용하기

5 Flask 웹페이지

http://localhost:5000/led?state=on
http://localhost:5000/led?state=off

<a href="led?state=on">LED ON</a>
<a href="led?state=off">LED OFF</a>

<button onclick = "led_on()">LED ON</button>

5.1 Flask, HTML, CSS, Javascript를 이용한 웹페이지 만들기

기본 폴더 구성

webapps
	- ch06
    		- home
        		- static #이름 바꿔도 됨 
            			- templates

home 폴더: 최상위 root 폴더

static 폴더: flask에서는 해당 폴더를 리소스(자원) 폴더로 사용한다. css, image, media 등의 파일을 저장한다.

templates 폴더: html 파일 폴더이다. templates 폴더를 사용할 때 유의사항은 flask는 기본적으로 view 랜더링을 할 때 html 파일을 호출하는데 html파일은 무조건 templates 폴더에 있는 html 파일을 호출 하게끔 설정이 되어 있다. (이름 유지)

(랜더링: 서버로부터 HTML 파일을 받아 브라우저에 뿌려주는 과정이다.)

01. index.py 다음 코드를 작성하고 home 폴더에 저장한다.
/home/pi/webapps/ch06/home/index.py

from flask import Flask, request
from flask import render_template
import RPi.GPIO as GPIO

app = Flask(__name__)
GPIO.setmode(GPIO.BOARD) #BOARD는 커넥터 pin번호 사용
GPIO.setup(8, GPIO.OUT, initial=GPIO.LOW)

@app.route("/")
def home():
    return render_template("index.html")

@app.route("/led/on")
def led_on():
    try:
        GPIO.output(8, GPIO.HIGH)
        return "ok"
    except expression as identifier:
        return "fail"

@app.route("/led/off")
def led_off():
    try:
        GPIO.output(8, GPIO.LOW)
        return "ok"
    except expression as identifier:
        return "fail"

if __name__ == "__main__":
    app.run(host="0.0.0.0")

02. index.html 다음 코드를 작성하고 home 폴더 아래 templates 폴더에 저장한다.
/home/pi/webapps/ch06/home/templates/index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HOME NETWORK</title>
    #<!--link rel="stylesheet" href="static/style.css">-->
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <div class="container">
        <div class="header">
            <h2>HOME IoT</h2>
        </div>
        <div class="main">
            <div>
                <button onclick="led_on()">LED ON</button>
            </div>
            <div>
                <button onclick="led_off()">LED OFF</button>
            </div>
        </div>
        <div id="result">

        </div>
    </div>
    <script>
        function led_on(){
            fetch("/led/on")
            .then(response=> { console.log(response); return response.text()})
            .then(data=> {
                console.log(data);
                let result = document.querySelector("#result");
                if(data=="ok"){
                    result.innerHTML = "<h1>LED is runinng</h1>";
                }else{
                    result.innerHTML = "<h1>error</h1>";
                }
            });
        }
        function led_off(){
            fetch("/led/off")
            .then(response=> response.text())
            .then(data=> {
                console.log(data);
                let result = document.querySelector("#result");
                if(data=="ok"){  
                    result.innerHTML = "<h1>LED is stopping</h1>";
                }else{
                    result.innerHTML = "<h1>error</h1>";
                }
            });
        }
    </script>
</body>
</html>

03. style.css 다음 코드를 작성하고 home 폴더 아래 static 폴더에 저장한다.
/home/pi/webapps/ch06/home/static/style.css

body {
    background-color: antiquewhite;
}

.container {
    width: 700px;
    margin: 0 auto;
    text-align: center;
}

.main {
    display: flex;
}

.main div {
    flex:1;
}

.main div button {
    background-color: rgb(192, 114, 114);
    width:150px;
    height:80px;
    border-radius: 10px;
}

4. 실행방법은 터미널을 열고 해당폴더로 이동하여 다음을 입력한다.

python home.py

VSCode 툴에서 터미널(TERMINAL)을 열고 실행할 수 있다.

1) 라즈베리 파이에서 브라우저를 열어서 확인할 경우
http://localhost:5000/

2) 다른 PC에서 브라우저를 열어서 확인할 경우
http://192.168.0.80:5000/ (예시임)

주소를 확인하는 방법은 라즈베리 파이에서 터미널을 열고 아래 명령어를 입력한다.
(ex. 윈도우의 경우 cmd: 명령 프롬프트, ipconfig를 입력하면 ip주소가 나온다.)

$ ifconfig

와이파이로 연결했다면 wlan() 부분을 확인하면 되고,
랜으로 연결했다면 eth() 부분을 확인한다.
wlan(): 에 있는 inet을 확인한다.
예시) inet 192.168.0.80

윈도우의 예시)

3) 라즈베리 파이와 사용자 PC가 같은 네트워크인 경우 아래와 같다.

라즈베리 -> 공유기 <- 노트북

라즈베리 파이와 사용자 PC가 다른 네트워크인 경우 아래와 같다.

라즈베리 -> 공유기, 노트북 -> 다른 공유기
라즈베리 -> 공유기, 휴대폰 -> (LTE 사용) 기지국

5. 결과화면입니다.
6. [LED ON] 버튼 클릭 결과입니다.

7. [LED OFF] 버튼 클릭

8. 오류를 발생시킨다. index.py을 수정한다.

@app.route("/led/on")
def led_on():
    try:
        GPIO.output(9, GPIO.HIGH)
        return "ok"
    except expression as identifier:
        return "fail"

output GPIO핀 번호를 9번으로 변경했다. LED를 ON하려는 순간 GPIO 9번에 연결된 LED를 찾지 못하므로 try부분에서 오류가 발생하고 except 부분으로 넘어간다.

예외처리를 사용하면 예상하지 못한 서버 오류로 서버가 멈추는 일이 발생하지 않는다.

9. 다시 실행해보면 error를 return하게 된다.

$ python index.py

웹피이지 결과 화면 하단에 error 문자가 나온다.

5.2 fetch() 함수 이해하기

fetch: to go after and bring back, get

자바스크립트 문법이다.
ajax를 이용한 비동기 통신을 할 때 사용하는 라이브러리이다.
(예전에는 ajax 요청 시에 jQuery를 많이 사용했는데 최근에는 자바스크립트가 제공하는 fetch를 많이 사용한다.)

fetch를 통해서 index.py의 led_on() 메서드를 호출하게 되고, 그 결과를 response를 통해서 받는다.
len_on 메서드 호출 시에 실제 led가 on이 된다.
정상적으로 on이 되면 ok를 return하게 된다.
return된 값을 fetch(), then(response) 이 부분에서 then()이 받게 된다.
then()은 fetch가 완료된 후에 호출이 된다.

5.3 화살표 함수 이해하기

6 IP, Port, Process 개념잡기
6.1 IP(internet protocol) 개념잡기

IP는 internet protocol의 약자입니다. 송신 호스트와 수신 호스트가 데이터를 서로 주고 받는데 필요한 프로토콜(규약)을 의미합니다. 데이터는 패킷으로 분할되어 전송되고 받은 쪽에서는 분할된 패킷을 조립하게 됩니다.

- 패킷 스위칭 방식은 Data를 패킷으로 나누어 전송하기 때문에 동시 전송이 가능합니다.

6.2 Port 개념잡기

Port는 컴퓨터 간 상호 통신을 위해 프로토콜에서 이용하는 가상의 연결 단을 의미합니다.

- 수신 호스트가 4개의 컴퓨터와 서로 다른 통신을 한다는 의미는 최소 4개 이상의 Port로 통신을 하고 있다는 의미입니다.

6.3 Process 개념잡기

- 프로그램은 보조 기억장치(하드디스크, SSD)에 존재하며 실행되기를 기다리는 명령어(코드)와 정적인 데이터의 묶음입니다. 이 프로그램의 명령어와 정적 데이터가 메모리에 적재되면 생명이 있는 프로세스가 됩니다. 즉 프로세스란 실행 중인 프로그램입니다.

01. /home/pi/webapps/ch06/process/process.py 파일을 생성합니다.

https://github.com/codingspecialist/RaspberryPi4-Book-Example/blob/master/ch06/process/process.py

from flask import Flask, request
import RPi.GPIO as GPIO

app = Flask(__name__)

LED = 8
GPIO.setmode(GPIO.BOARD) #BOARD는 커넥터 pin번호 사용
GPIO.setup(LED, GPIO.OUT, initial=GPIO.LOW)

@app.route("/led/<state>")
def led(state):
    if(state == "on"):
        GPIO.output(LED, GPIO.HIGH)
        return "LED ON"
    elif(state == "off"):
        GPIO.output(LED, GPIO.LOW)
        return "LED OFF"
    else:
        return "error"
    

if __name__ == "__main__":
    app.run(host="0.0.0.0")

02. 실행해봅니다.

03. 실행을 하게 되면 프로세스가 되었다는 뜻입니다.

04. 새로운 터미널을 열고 포그라운드 프로세스 확인합니다. -f (자세히 보기 옵션)

$ ps -f

05. 백그라운드 프로세스를 확인해봅니다. -e: 백그라운드 프로세스를 확인하는 옵션이다.

06. | grep을 이용하여 process.py 프로세스만 확인한다.

$ ps -ef | grep process.py

07. netstat 명령어로 프로세스를 확인해봅니다.

프로세스를 종료하는 방법은 아래와 같습니다.

sudo kill [PID]

PID가 2172번이기 때문에 아래와 같이 종료합니다.

The persistent identifier (PID) uniquely identifies a persistent object in any content server.

7 cron과 daemon 개념잡기
7.1 cron(크론) 개념잡기 (자동화)

- cron은 주기적인 실행이 필요할 때 사용합니다. 예를 들어 매일 아침 7시가 되면 led를 작동시키고 싶다면 cron을 사용하면 됩니다.

$ crontab -1
no crontab for pi

The cron command-line utility is a job scheduler on Unix-like operating systems. Users who set up and maintain software environments use cron to schedule jobs, also known as cron jobs, to run periodically at fixed times, dates, or intervals.

webapps
	- ch06
    		- cron
        		- led.py

# -*- encoding: utf-8 -*-

import RPi.GPIO as GPIO
import time

GPIO.cleanup() #한글

LED = 8
GPIO.setmode(GPIO.BOARD)
GPIO.setup(LED, GPIO.OUT, initial=GPIO.LOW)

try:
    num = 0
    while(True):
        time.sleep(1)
        GPIO.output(LED, GPIO.HIGH)
        time.sleep(1)
        GPIO.output(LED, GPIO.LOW)
        num = num + 1
        if(num == 5):
            GPIO.cleanup()
            break
except KeyboardInterrupt:
    GPIO.cleanup()

7.2 daemon(데몬) 개념잡기

- cron이 주기를 가지고 실행되는 것이라면 daemon은 계속 실행되는 것입니다. LED를 라즈베리 파이를 재부팅했을 때 부터 종료 시까지 자동으로 실행함과 동시에 계속적인 동작을 원한다면 daemon으로 등록합니다.

webapps
	- ch06
    		- daemon
        		- led2.py

# 해당 파일을 다른 곳에서 실행할 때 python 실행 파일을 사용하여 실행하라
#! /usr/bin/env python #꼭 첨부한다. 파이썬 버전이 3.4라면 뒤에 python3.4라고 적는다.
import RPi.GPIO as GPIO
import time

GPIO.cleanup()

LED = 8
GPIO.setmode(GPIO.BOARD)
GPIO.setup(LED, GPIO.OUT, initial=GPIO.LOW)

try:
    num = 0
    while(True):
        time.sleep(1)
        GPIO.output(LED, GPIO.HIGH)
        time.sleep(1)
        GPIO.output(LED, GPIO.LOW)
        num = num + 1
        if(num == 5):
            GPIO.cleanup()
            break
except KeyboardInterrupt:
    GPIO.cleanup()

fi
 -> 이 부분에 실행할 구문을 넣으면 된다. 마지막엔 &을 붙인다.
exit 0

728x90

저작자표시 비영리 동일조건

'🌳Bootcamp Revision 2023✨ > Python, Flask, SQL' 카테고리의 다른 글

[49] 230309 SQL Ch. 1 데이터베이스와 SQL: 1강 데이터베이스, 2강 다양한 데이터 베이스 [K-디지털 트레이닝 49일] (0)	2023.03.09
[49] 230309 Ch. 6 Flask를 활용한 센서 제어: 8. 공공데이터 활용하기 [K-디지털 트레이닝 49일] (0)	2023.03.09
[47] 230307 Ch. 6 Flask를 활용한 센서 제어: 1. Flask 세팅하기, 2. Flask 웹서버 구축하기, 3. Flask 라우팅, 4. Flask LED 제어하기 [K-디지털 트레이닝 47일] (0)	2023.03.07
[42] 230227 Ch. 3 라즈베리 파이를 위한 파이썬 기초 배우기: 5. 파이썬 클래스와 모듈 [K-디지털 트레이닝 42일] (0)	2023.02.27

'🌳Bootcamp Revision 2023✨/Python, Flask, SQL' Related Articles

Comments

A Joyful AI Research Journey🌳😊

[48] 230308 Ch. 6 Flask를 활용한 센서 제어: 5. Flask 웹페이지, 6. IP, Port, Process 개념 잡기, 7. cron과 daemon 개념 잡기 [K-디지털 트레이닝 48일] 본문

[48] 230308 Ch. 6 Flask를 활용한 센서 제어: 5. Flask 웹페이지, 6. IP, Port, Process 개념 잡기, 7. cron과 daemon 개념 잡기 [K-디지털 트레이닝 48일]

Ch. 6 Flask를 활용한 센서 제어

5 Flask 웹페이지

5.1 Flask, HTML, CSS, Javascript를 이용한 웹페이지 만들기

5.2 fetch() 함수 이해하기

5.3 화살표 함수 이해하기

6 IP, Port, Process 개념잡기6.1 IP(internet protocol) 개념잡기

6.2 Port 개념잡기

6.3 Process 개념잡기

7 cron과 daemon 개념잡기7.1 cron(크론) 개념잡기 (자동화)

7.2 daemon(데몬) 개념잡기

'🌳Bootcamp Revision 2023✨ > Python, Flask, SQL' 카테고리의 다른 글

티스토리툴바

6 IP, Port, Process 개념잡기
6.1 IP(internet protocol) 개념잡기

7 cron과 daemon 개념잡기
7.1 cron(크론) 개념잡기 (자동화)