[47] 230307 Ch. 6 Flask를 활용한 센서 제어: 1. Flask 세팅하기, 2. Flask 웹서버 구축하기, 3. Flask 라우팅, 4. Flask LED 제어하기 [K-디지털 트레이닝 47일]

230307 Tue 47th 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 정석 | 최주호 - 교보문고

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

---

몰랐던 것

- 클라이언트: 컴퓨터 네트워크에서 클라이언트(client, 문화어: 의뢰기)는 네트워크를 통하여 서버라는 다른 컴퓨터 시스템 상의 원격 서비스에 접속할 수 있는 응용 프로그램이나 서비스를 말한다.

- 모듈(module)이란 프로그램을 구성하는 구성 요소로, 관련된 데이터와 함수를 하나로 묶은 단위를 의미합니다. 보통 하나의 소스 파일에 모든 함수를 작성하지 않고, 함수의 기능별로 따로 모듈을 구성합니다. 이러한 모듈을 합쳐 하나의 파일로 작성하는 방식으로 프로그램을 만들게 됩니다. 위처럼 프로그램 코드를 기능별로 나눠서 독립된 파일에 저장하여 관리하는 방식을 모듈화 프로그래밍이라고 합니다.

- A view function, or view for short, is a Python function that takes a web request and returns a web response. This response can be the HTML contents of a web page, or a redirect, or a 404 error, or an XML document, or an image . . . or anything, really. The view itself contains whatever arbitrary logic is necessary to return that response.

참고: https://docs.djangoproject.com/en/4.1/topics/http/views/

Django views are Python functions that takes http requests and returns http response, like HTML documents.
(route 데코레이터 아래에 있음)

참고: https://www.w3schools.com/django/django_views.php

- 라우팅은 네트워크에서 경로를 선택하는 프로세스입니다. 컴퓨터 네트워크는 노드라고 하는 여러 시스템과 이러한 노드를 연결하는 경로 또는 링크로 구성됩니다. 상호 연결된 네트워크에서 두 노드 간의 통신은 여러 경로를 통해 이루어질 수 있습니다.

Routing is the process of selecting a path for traffic in a network or between or across multiple networks. Broadly, routing is performed in many types of networks, including circuit-switched networks, such as the public switched telephone network (PSTN), and computer networks, such as the Internet.

[원리]
return을 통해 웹브라우저에 값을 준다.
값을 받는 것은 매개 변수로 한다. 
이런 식으로 값을 주고받는다.

---

GPIO.cleanup()

GPIO.cleanup()은 파이썬 프로그램 안에서 초기화했던 핀 설정들을 모두 '청소'(clean up)해주는 기능, 즉 GPIO 라이브러리/모듈이 점유한 리소스를 해제하는 기능을 한다. 

GPIO의 사용이 모두 끝날 때(=프로그램이 종료될 때) GPIO.cleanup() 함수를 호출하도록 하는 것이 좋고, 라즈베리 파이 개발자 측에서도 강력히 권장하는 사항이다.

참고: https://junolefou.tistory.com/5

---

참고: https://programming119.tistory.com/194

참고: https://hoyeonkim795.github.io/posts/rest_api/

물음표 뒤에 오는 것은 쿼리스트링이다. 


Vscode에서 Python Flask개발환경 구축하기
참고: https://krksap.tistory.com/1766

---

요약

1. 라즈베리파이 지니에디터 -> vscode 에디터
2. vscode 에디터 + flask framework를 설정
3. flask + server 구축

---

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 개념 잡기

- 공공데이터 활용하기

---

1 Flask 세팅하기

- 대표적인 웹 프레임워크로 장고(Django)와 플라스크(Flask)를 많이 사용합니다. 둘 중에 플라스크를 이용하는 이유는 다음과 같습니다.

- 장고는 풀스택 프레임워크입니다. 보통 웹 프로그래밍을 할 때 필요로 하는 모든 것들이 종합적으로 갖추어진 프레임워크를 의미하는데, 인증과 권한, ORM, 템플릿 라이브러리, 로그처리, 보안, 관리자 기능 등의 다양한 요소가 기본적으로 제공됩니다.

- 플라스크는 경량 웹 프레임워크입니다.
WSGI코어와 URL 라우팅을 지원하기 위해 werkzeug(벡자이그)와 템플릿 출력을 위해 jinja2 라이브러리를 함께 배포한다.
꼭 필요한 핵심요소를 제외하고는 필요할 때 마다 직접 환경에 맞춰 개발을 하고 라이브러리를 찾아서 추가해야 합니다.

 

용어 설명

- WSGI: The Web Server Gateway Interface is a simple calling convention for web servers to forward requests to web applications or frameworks written in the Python programming language.

- Werkzeug is a collection of libraries that can be used to create a WSGI (Web Server Gateway Interface) compatible web application in Python. A WSGI (Web Server Gateway Interface) server is necessary for Python web applications since a web server cannot communicate directly with Python.

- Routing is the process of selecting a path for traffic in a network or between or across multiple networks. Broadly, routing is performed in many types of networks, including circuit-switched networks, such as the public switched telephone network (PSTN), and computer networks, such as the Internet.

- 템플릿 엔진(Template Engine)이란
템플릿 양식과 특정 데이터 모델에 따른 입력 자료를 합성하여 결과 문서를 출력하는 소프트웨어(또는 소프트웨어 컴포넌트)를 말한다.

그 중 웹 템플릿 엔진(web template engine)이란 웹 문서가 출력되는 템플릿 엔진을 말한다.
참고: https://gmlwjd9405.github.io/2018/12/21/template-engine.html

- Jinja is a web template engine for the Python programming language.

---

1.1 라즈베리 4에서 설치하기

VSCode(Visual Studio Code) 설치하기

1. VSCode를 설치합니다.

$ sudo apt install code

2. 메뉴창에서 개발 - Code - OSS를 클릭하면 실행됩니다.

3. 실행이 완료된다.

4. 메뉴에서 File - Open Folder를 통해서 webapps 폴더를 기본 폴더로 설정한다. 

---

1.2 Flask 설치하기

1. VSCode에서 터미널 열기

 

2. 테스트를 위해 파이썬 버전을 확인한다.

$ python -V

3. Flask 설치 

https://flask.palletsprojects.com/en/2.2.x/

~ 표시는 폴더 위치를 말한다. 

4. 터미널에서 python 스크립트를 실행한다.

$ python

5. flask가 잘 설치되었는지 확인하기 위해 flask를 import 한다.

>>> from flask import Flask

아무런 메시지가 없다면 정상적으로 설치가 된 것이다.

6. Python extension을 설치한다.
설치 알림창이 뜨지 않으면 왼쪽에 있는 도구 창 가장 아래에 있는 extension을 클릭한 뒤 검색창에서 python을 검색하여 설치한다.

---

2 Flask 웹서버 구축하기

폴더 구성과 파일 구성을 다음과 같이 한다.

webapps
		- ch06
        		- helloworld
                			- app_start.py

1. 코드를 작성하고 저장한다.
[1] app_start.py

from flask import Flask
app = Flask(__name__) #파일명 저장
@app.route("/") # 이론적으로 들어감, 직접 타이핑한 주소에 / 생략 가능
#@app.route("/abc") 
#@app.route("/main") # ex) http://news.naver.com/main

def helloworld(): #웹브라우저에서 내부적으로 호출한다. 
	return "Hello World"

if __name__ = "__main__": #main 문자열 저장
	app.run(host="0.0.0.0")

위의 "__main__"은 아래 자바의 main()과 같다.

class A{}
class B{}
class C{
			public static void main(){
					B b = new B();
					A a = new A();
       }
}

2. 실행방법은 터미널을 열고 아래를 입력한다.

$ cd /home/pi/webapps/ch06/helloworld
$ python app_start.py

3. 웹브라우저를 열고 다음 주소를 입력한다.

http://localhost:5000

4. 아래부터 코드 리뷰이다.

1) from flask에서 flask는 폴더를 의미한다.

from flask import Flask

from flask: flask 폴더 또는 flask 모듈이 될 수 있다. 여기서 flask 모듈이란 flask.py 파일을 의미한다.
작성한 from flask는 폴더명이다.

2) import Flask에서 Flask는 클래스명이다.

from flask import Flask

import Flask에서 Flask는 클래스명, 함수명, 변수명이 될 수도 있다. 이름이 대문자로 시작하는 것은 클래스이다.
라이브러리 path가 적용된 기본 폴더에서 flask라는 폴더를 찾고, 그 안에 있는 Flask클래스를 import하라는 뜻이다.
import를 통해서 함수만 호출할 수 있다.

from 모듈명 import 함수명

3) app은 Flask 객체를 가진다.

app = Flask(__name__)

flask 객체를 생성한다. flask 객체는 웹 브라우저로 오는 모든 요청과 템플릿과의 연계와 같은 웹 애플리케이션 전반에 대해서 영향을 미치는 메인 객체이다. 
Flask 클래스는 생성자 인자를 하나 받게 되는데 바로 __name__이다. 
__name__ : 내 파일명, 즉 모듈명을 의미한다. 
우리가 만든 파일명이 app_start.py이므로 __name__은 app_start.py이다.
결국 Flask 객체가 생성될 때 app_start.py 파일명을 이용해서 객체를 생성한다. 

__name__ 내장 변수이면서 전역 변수이다.
이 변수에는 해당 파이썬 파일의 이름(여기서는app_start)이 저장된다.
이때 파이썬이 해석을 할 때 app_start.py를 시작점으로 하기 위해
app_start.py파일을 실행하는 경우 __name__변수에 __main__(문자열)이라는 값을 할당한다.

결론: if __name__ == "__main__"은 시작점을 의미한다. 

4) app.route("/")는 라우팅을 위한 뷰 함수(밑의 def 함수)를 등록하는 코드이다. 
참고: https://hleecaster.com/flask-introduction

@app.route("/")

"/"이므로 http://localhost:5000/으로 요청하게 되면 해당 route가 호출된다.
클라이언트가 URI로 ("/") 요청을 하게 되면 해당 route 데코레이터 아래에 있는 뷰 함수가 자동으로 호출된다.
ex) ("/") 이렇게 되어있으니 http://localhost:5000/으로 요청하게 되면 해당 route가 호출된다. 

@app.route("/helloworld")

위와 같다면 호출 방법은 http://localhost:5000/helloworld가 된다.

5) "Hello World"는 함수가 종료될 때 요청한쪽으로 응답되는 String 값이다.

def helloworld():
	return "Hello World"

route 데코레이터를 통해서 뷰 함수가 호출
* 클라이언트가 주소요청을 하게 되면 뷰 함수가 호출되는 데 이때 뷰 함수에는 필수적으로 return문이 있어야 한다.

6) app.run()이 호출되면 웹서버가 동작한다.

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

__name__: 두 가지 이름을 가진다.

1. 내 모듈명: app_start.py (파일 이름)

2. app_start.py 파일을 직접 터미널에서 실행하면 __main__이라는 이름을 가진다.
만약 다른 파일에서 app_start.py 파일을 import해서 사용하게 되면 __name__이 __main__이라는 이름이 될 수 없다.
__name__이 __main__이 되려면 import가 아닌 해당 파일을 직접 실행시킬 때만 가능하다. 
위 문장이 필요한 이유는 app_start.py 파일을 직접 실행시켰을 때만 "서버를 작동시켜"라는 뜻이다.

app.run()은 서버를 시작하라는 명령어고, 인자 0,0,0,0(ip 주소)은 어떤 ip에서 요청이 들어와도 응답을 해주겠다는 의미이다.

현재 파일이 app_start.py import flask
__name__ ==> "_main_"

현재 파일이 app_end.py import app_start
__name__ ==> "파일명"(app_end)

참고: https://www.freecodecamp.org/korean/news/untitled-2/

---

3 Flask 라우팅 p. 180

URI 디스패치: Flask에서 URL을 처리하는 것

URI 디스패치의 역할 

1) 사용자가 입력한 URI를 지켜보다가 URI를 분석하여 올바른 길로 안내해준다.

2) 뷰 데코레이션을 통해서 뷰 함수를 생성하여 올바른 길로 안내해준다.

 

URI는 특정 리소스를 식별하는 통합 자원 식별자(Uniform Resource Identifier)를 의미한다. 웹 기술에서 사용하는 논리적 또는 물리적 리소스를 식별하는 고유한 문자열 시퀀스다.

참고: https://www.charlezz.com/?p=44767

---

[2] app_start.py

from flask import Flask

app = Flask(__name__)

@app.route("/")
def helloworld():
	return "Hello World"

@app.route("/led/on")
def led_on():
	return "LED ON"
    
@app.route("/led/off")
def led_off():
	return "LEF OFF"
    
if __name__ == "__main__":
	app.run(host="0.0.0.0")

return을 통해 웹브라우저에 값을 준다.
값을 받는 것은 매개 변수로 한다. 
이런 식으로 값을 주고받는다. 

2. 웹브라우저를 열어서 실행시킨다.
웹브라우저에 localhost:5000/led/on 입력 시 웹브라우저에 LED ON 메시지 출력
웹브라우저에 localhost:5000/led/off 입력 시 웹브라우저에 LED OFF메시지 출력

---

4 Flask LED 제어하기
4.1 Flask LED 제어 정적 라우팅 p. 181 

[3] app_start.py 

from flask import Flask
import RPi.GPIO as GPIO

app = Flask(__name__)

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

@app.route("/")
def helloworld():
	return "Hello World"

@app.route("/led/on")
def led_on():
	GPIO.output(LED, GPIO.HIGH)
    return "LED ON"
    
@app.route("/led/off")
def led_off():
	GPIO.output(LED, GPIO.LOW)
    return "LED OFF"
    
@app.route("/gpio/cleanup")
def gpio_cleanup():
	GPIO.cleanup()
    return "GPIO CLEANUP"
    
if __name__ == "__main__":
	app.run(host="0.0.0.0")

참고
저항은 200옴 이상만 된다면 OK!!

 

06 웹브라우저를 열어서 localhost:5000/gpio/cleanup으로 접속한다. (주소창에 적는다.)
결과: GPIO CLEANUP

참고: https://kibua20.tistory.com/95

결과: 

Running on http://0.0.0.0:5000/ (Press CTRL+C to quit)

Protocol 프로토콜: http://0.0.0.0
Port 포트번호: 5000

참고: https://code.visualstudio.com/docs/python/tutorial-flask

---

http://localhost:5000/led/off             <변수명>: 산호 괄호

                                        //변수명(state) = 값(off) (문자열이어도 off로 표시한다. " " 안 쓴다.) 
http://localhost:5000/led/?state=off               : 쿼리스트링

4.2 Flask LED 제어 동적 라우팅 〈산형 괄호〉

- 동적으로 변경되는 URL의 뷰 함수를 사용하기 위해서는 산형 괄호 <>을 이용해서 변수를 전달해야 한다.
해당 변수가 클라이언트로 부터 URL로 전달되면 함수의 매개변수로 받아줘야 사용이 가능합니다.

app_start.py

from flask import Flask
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("/")
def helloworld():
	return "Hello World"

@app.route("/led/<state>")
def led(state):
	if state == "on":
    	GPIO.output(LED, GPIO.HIGH)
    else:
    	GPIO.output(LED, GPIO.LOW)
   	return "LED" +state
    
@app.route("/gpio/cleanup")
def gpio_cleanup():
	GPIO.cleanup()
    return "GPIO CLEANUP"

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

---

4.3 Flask LED 제어 동적 라우팅 〈쿼리 스트링〉?state=on

                                        //변수명(state) = 값(off) (문자열이어도 off로 표시한다. " " 안 쓴다.) 
http://localhost:5000/led/?state=off               : 쿼리스트링

동적으로 변경되는 URL함수는 쿼리 스트링 방식으로도 호출 가능하다. 쿼리 스트링이란
http://localhost:5000/led?state=on
처럼 주소 호출이 올 때 ? 뒤에 오는 것을 말한다.
? 뒤에 오는 것들은 HTTP요청에서 GET방식으로 요청 가능하다.
전달되는 데이터를 request 클래스의 args 객체를 사용하여 받을 수 있다. 

- 다음과 같이 flask 모듈에서 request를 import해야 request를 사용할 수 있다. 

from flask import Flask, request

app_start.py

from f1
from flask import Flask
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("/")
def helloworld():
	return "Hello World"

@app.route("/led")
def led():
	state = request.args.get("state") #on에서 변수이름이 "state"인 것을 가져온다. 
	if state == "on":
    	GPIO.output(LED, GPIO.HIGH)
    else:
    	GPIO.output(LED, GPIO.LOW)
   	return "LED"+state
    
@app.route("/gpio/cleanup")
def gpio_cleanup():
	GPIO.cleanup()
    return "GPIO CLEANUP"

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

2. 웹브라우저를 열어서 localhost:5000/led?state=on으로 접속한다. (=주소창에 적는다.)
결과(웹페이지에 뜬다.): LED on

3. 웹브라우저를 열어서 localhost:5000/led?state=off로 접속한다.
결과: LED off

4. 결과:웹브라우저를 열어서 localhost:5000/led로 접속한다. (?가 없으므로) 
결과: Internal Server Error 웹페이지가 뜬다. 

서버 에러가 발생한다. 
이유는 뷰 함수에서는 쿼리스트링을 받기 위한 코드가 준비되어 있지만 주소 요청 시 쿼리스트링을 전달하지 않았기 때문이다.
이럴 경우, 물론 쿼리스트링을 정상적으로 보내게 되면 오류가 나지 않겠지만 미래 대비하면 좋다. 

5. app_start.py 파일을 수정한다.

@app.route("/led")
def led():
	state = request.args.get("state") #on에서 변수이름이 "state"인 것을 가져온다. 
	if state == "on":
    	GPIO.output(LED, GPIO.HIGH)
    else:
    	GPIO.output(LED, GPIO.LOW)
    elif state == "error":
    	return "쿼리스트링 state가 전달되지 않았습니다."
    else:
    	return "잘못된 쿼리스트링이 전달되었습니다."
   	return "LED"+state

6. 다양하게 주소를 입력하여 테스트한다.

localhost5000/led #state == "error"
#결과: 쿼리스트링 state가 전달되지 않았습니다.

localhost5000/led?see=on #state == "error" 
#결과: 쿼리스트링 state가 전달되지 않았습니다.

localhost5000/led?state= #뒤에 비었음
#결과: 잘못된 쿼리스트링이 전달되었습니다.

localhost5000/led?state=hello #on, off만 설정했음
#결과: 잘못된 쿼리스트링이 전달되었습니다.

---