sqlite veritabanına verilerin kaydedilmesi ve flask frameworkunda bu verilerin mathplotlib ile grafiklerinin çizim örneği

öncelikle proje klasörümü ve kullanacağımız virtualenv yi oluşturulalım

fcicek@ferhatcicek:~$ mkdir system_usage

fcicek@ferhatcicek:~$ mkdir system_usage
fcicek@ferhatcicek:~$ cd system_usage/
fcicek@ferhatcicek:~/system_usage$ python -m venv env

projemizde sistem verilerini saklamak iin sqlite veritabanını kullancağız. kullanacağımız system_usage veritababı oluşturalım

fcicek@ferhatcicek:~/system_usage$ sqlite3 system_usage.db
sqlite> .quit

veritabanı dosyamızı oluşturduktan sonra sıra tablomuzu oluşturmaya geldi. bunu sql ortamında yapabiliriz ancak bu örnekte python ile oluşturacağız..

fcicek@ferhatcicek:~/system_usage$ nano sqlite_db_create.py

aynı isimli tablo varsa sileceğiz ve veri tabanımızla aynı isimli bir tablo oluşturacağız. örneğimizi basit tutmak adına anlık cpu ve hafıza verilerini tablomuzda tutacağımız için tablomuzda bu veriler için gerekli alanları oluşturacağız…

import sqlite3 as lite
import sys
con = lite.connect('system_usage.db')
with con: 
    cur = con.cursor() 
    cur.execute("DROP TABLE IF EXISTS system_usage")
    cur.execute("CREATE TABLE system_usage(timestamp DATETIME, cpu NUMERIC, mem NUMERIC)")

kodumuz yazık şimdi virtualenv i aktif ederek kodumu çalıştıralım…

fcicek@ferhatcicek:~/system_usage$ source env/bin/activate
(env) fcicek@ferhatcicek:~/system_usage$ python sqlite_db_create.py 

python kodumuz sonucu kontrol etmek istersek. clidan veritabanına bakıp tablonun durumunu inceleyebiliriz.

(env) fcicek@ferhatcicek:~/system_usage$ sqlite3 system_usage.db 
SQLite version 3.31.1 2020-01-27 19:55:54
Enter ".help" for usage hints.
sqlite> .table
system_usage
sqlite> .quit

örneğimizde cpu ve hafıza verilerini saklayacağız. bunun için pythonde psutil paketini kullanacağız. psutil paketini yükleyelim

(env) fcicek@ferhatcicek:~/system_usage$ pip install psutil

psutil paketini daha önce kullanmamış olabilirsiniz.. programımızda kullanacağımız verileri içerecek basit bir uygulama yapalım.

import psutil

print('MEM  % used:', psutil.virtual_memory()[2])
print('CPU % used:', psutil.cpu_percent(2))

programi çalıştıralım.

(env) fcicek@ferhatcicek:~/system_usage$ python psutil_system.py 
MEM  % used: 86.5
CPU % used: 2.0

anlık olarak cpu ve hazfıza kullanım bilgileriniz artık alabiliyoruz. bu bilgilerini şimdi de veritabanımıza ekleyelim.

bunun için program tarafımızdan sonlandırılana kadar 60 saniyede bir cpu ve hazfıza kullanım değerini okuyarak sqlite veritabanına ekleyecek basit bir kod yazalım.

(env) fcicek@ferhatcicek:~/system_usage$ nano data_logger.py     

import time
import sqlite3
import psutil

dbname='system_usage.db'

ornekleme_zamani = 60

def sistem_bilgisi_oku():
    mem = psutil.virtual_memory()[2]
    cpu = psutil.cpu_percent(1)
    if mem is not None and cpu is not None:
        return cpu,mem

def veritabani_ekle (cpu, mem):
    conn=sqlite3.connect(dbname)
    curs=conn.cursor()
    curs.execute("INSERT INTO system_usage values(datetime('now'), (?), (?))", (cpu, mem))
    conn.commit()
    conn.close()

def main():
    while True:
        cpu, mem = sistem_bilgisi_oku()
        veritabani_ekle (cpu, mem)
        time.sleep(ornekleme_zamani)

main()

artık verilerimizi bir veri tabanında turuyoruz. şimdi bunu web üzerinden bağlantı yapacak kullanıcılar için görselleştirelim. bunun için flask frameworkunu kullancağız. virtualenv altına flask ve ilişkili paketleri yükleyelim.

(env) fcicek@ferhatcicek:~/system_usage$ pip install flask

kullanıcı browser kullanarak sayfamıza bağlandığında, veritabanındaki en son cpu ve hafıza kullanım verisini sorgulayarak bu veriyi ekrana yazdıralım.

(env) fcicek@ferhatcicek:~/system_usage$ nano son_olcum.py

from flask import Flask, render_template, request
app = Flask(__name__)
import sqlite3

def getData():
	conn=sqlite3.connect('system_usage.db')
	curs=conn.cursor()
	for row in curs.execute("SELECT * FROM system_usage ORDER BY timestamp DESC LIMIT 1"):
		time = str(row[0])
		cpu = row[1]
		mem = row[2]
        print(str(cpu))
        print((str(mem))
	conn.close()
	return time, cpu, mem

@app.route("/")
def index():	
	time, cpu, mem = getData()
	templateData = {
		'time': time,
		'cpu': cpu,
		'mem': mem
	}
	return render_template('son_olcum.html', **templateData)
    
if __name__ == "__main__":
   app.run(host='0.0.0.0', port=5000, debug=True)

flask frameworkun tema yapısını kullanacağımız için templates dizinini oluşturup içinde gerekli dosyaları oluşturmamız gerekmektedir. python dosyamızda ilişkilendirilen tema dosyası son_olcum.html veiçerisinde kullanılacak verinin templateData olarak belirtildi.

(env) fcicek@ferhatcicek:~/system_usage$ mkdir templates
(env) fcicek@ferhatcicek:~/system_usage$ cd templates
(env) fcicek@ferhatcicek:~/system_usage/templates$ nano son_olcum.html

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">    
<title>System Durum</title>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</head>

<body>

<div class="container-fluid">
    <div class="jumbotron">
        <p class="lead">Son veri okuma  :  {{ time }}   <a href="/"class="button">Güncelle</a></p>     
        <hr class="my-4">
        <p class="lead">CPU Kullanım Oranı  % : {{ cpu }}</p>    
        <p class="lead">Memory Kullanım Oranı  % : {{ mem }} </p>   
        <hr class="my-4">
    </div>        
</div>

</body>
</html>

şimdi kodumuzu test edelim.

(env) fcicek@ferhatcicek:~/system_usage$ nano son_olcum.py

tarayıcımız ile http://sunucuip:5000 adresine bağlandığımız aşagıdaline benzer bir ekran ile karşılaşmamız gerekecek…

kodumuz biraz daha geliştirmenin zamanı geldi. cpu ve hafıza verilerini veritabanımızda tuttugumuz için bu veriyi bir grafik olarka ekrana yansıtabiliriz. bu işlem sırasında mathplotlib paketinde faydalanacağımız için öncelikle kurulumunu yapalım.

(env) fcicek@ferhatcicek:~/system_usage$ pip install matplotlib

şimdi kodumuza yapacağımız ilave , belirtilen örnekleme sayısınca veri tabanından veri çekip bunu grafiği oluşturup son kullanıcıya ileteceğiz. cpu ve hafiza grafiklerini çizdirmek için app.route metodundan faydalanacağız.

from flask.globals import session
from matplotlib.backends.backend_agg import FigureCanvasAgg as FigureCanvas
from matplotlib.figure import Figure
import io

from flask import Flask, render_template, send_file, make_response, request
app = Flask(__name__)

import sqlite3

def sonKayit():
        conn=sqlite3.connect('system_usage.db')
        curs=conn.cursor()
        for row in curs.execute("SELECT * FROM system_usage ORDER BY timestamp DESC LIMIT 1"):
                time = str(row[0])
                cpu = row[1]
                mem = row[2]
        conn.close()
        return time, cpu, mem

def sonKayitDizi (orneklemeSayisi):
        conn=sqlite3.connect('system_usage.db')
        curs=conn.cursor()
        curs.execute("SELECT * FROM system_usage ORDER BY timestamp DESC LIMIT "+str(orneklemeSayisi))
        data = curs.fetchall()
        tarihDizi = []
        cpuDizi = []
        hafizaDizi = []
        for row in reversed(data):
                tarihDizi.append(row[0])
                cpuDizi.append(row[1])
                hafizaDizi.append(row[2])
        conn.close()
        return tarihDizi, cpuDizi, hafizaDizi
    
def maksimumKayit():
        conn=sqlite3.connect('system_usage.db')
        curs=conn.cursor()
        for row in curs.execute("select COUNT(cpu) from  system_usage"):
                maksimumKayitDizi=row[0]    
        conn.close()
        return maksimumKayitDizi


global orneklemeSayisi
orneklemeSayisi = maksimumKayit()
if (orneklemeSayisi > 101):
    orneklemeSayisi = 100

@app.route("/")
def index():
        time, cpu, mem = sonKayit()
        templateData = {'time':time,'cpu':cpu,'mem':mem,'orneklemeSayisi':orneklemeSayisi}
        return render_template('index.html', **templateData)
    
@app.route('/', methods=['POST'])
def post_form():
        global orneklemeSayisi
        orneklemeSayisi = int (request.form['orneklemeSayisi'])
        numMaxSamples = maksimumKayit()
        if (orneklemeSayisi > numMaxSamples):
                orneklemeSayisi = (numMaxSamples-1)
        time, cpu, mem = sonKayit()
        templateData = {'time':time,'cpu':cpu,'mem':mem,'orneklemeSayisi':orneklemeSayisi}
        return render_template('index.html', **templateData)
    
@app.route('/plot/cpu')
def cpu_cizim():
        times, cpuDizi, hafizaDizi = sonKayitDizi(orneklemeSayisi)
        ys = cpuDizi
        fig = Figure()
        axis = fig.add_subplot(1, 1, 1)
        axis.set_title("CPU [%]")
        axis.set_xlabel("Örnekleme")
        axis.grid(True)
        xs = range(orneklemeSayisi)
        axis.plot(xs, ys)
        canvas = FigureCanvas(fig)
        output = io.BytesIO()
        canvas.print_png(output)
        response = make_response(output.getvalue())
        response.mimetype = 'image/png'
        return response
    
@app.route('/plot/mem')
def hafiza_cizim():
        times, cpuDizi, hafizaDizi = sonKayitDizi(orneklemeSayisi)
        ys = hafizaDizi
        fig = Figure()
        axis = fig.add_subplot(1, 1, 1)
        axis.set_title("MEM [%]")
        axis.set_xlabel("Örnekleme")
        axis.grid(True)
        xs = range(orneklemeSayisi)
        axis.plot(xs, ys)
        canvas = FigureCanvas(fig)
        output = io.BytesIO()
        canvas.print_png(output)
        response = make_response(output.getvalue())
        response.mimetype = 'image/png'
        return response

    
if __name__ == "__main__":
   app.run(host='0.0.0.0', port=5000, debug=True)

<!-- index.html -->
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>System Durum</title>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</head>

<body>

<div class="container-fluid" align=center>
    <div class="jumbotron">
        <p class="lead"><a href="/"class="button">Güncelle</a></p>                                
        <hr class="my-4">
        <p class="lead">Son veri okuma  :  {{ time }}   </p>
        <hr class="my-4">
        <p class="lead">CPU Kullanım Oranı  % :<b> {{ cpu }} </b></p>
        <p class="lead">Memory Kullanım Oranı  %<b> : {{ mem }} </b></p>
        <hr class="my-4">
    </div>
</div>
<div class="container-fluid" align=center>

        <form method="POST">
                <input name="numSamples" value= {{orneklemeSayisi}}>
                <input type="submit">
                </form></p>
        <hr>
        <img src="/plot/cpu"  width="80%" height=400>
        <img src="/plot/mem"  width="80%" height=400>

</div>
</body>
</html>

kodumuzu aşagıdaki şekilde günceller ve çalıştırırsak aşagıdaki gibi ekran görüntüsüne sahip olacağız