※ 졸업작품 아이디어는 공개되지 않습니다(+아이디어 관련 기능 공개 x).

기능, 구현 코드만 공개됩니다. 또한 팀 프로젝트였기 때문에 제가 직접 개발했던 부분만 공개합니다.

 

 

이번에는 Django와 MariaDB를 연결해 데이터를 주고 받고 웹 화면에 출력하는 기능까지 구현해보겠습니다.

 

 

MariaDB를 설치하는 방법은 구글에 많이 나와있으니 따로 설명하지 않겠습니다.

 

 

먼저, DB 테이블을 만들어야 하는데, 아래 형식처럼 만들어주시면 됩니다. MySQL 코드 역시 구글에 많으므로 생략합니다.

 

 

 

그럼 이제 image 속성에 들어있는 경로대로 이미지를 넣어줘야합니다.

 

 

제 앱 이름이 imtest입니다. 즉, 앱 이름 폴더 안에 위의 사진처럼 폴더와 사진을 넣어주시면 됩니다.

 

 

또한 Django와 MariaDB를 연결하기 위해서 config/settings.py에 아래 코드를 작성합니다.

 

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME' : 'DB명',
        'USER' : 'root',
        'PASSWORD' : 'mkmk', #MariaDB 로그인 시 비밀번호
        'HOST' : '', #디폴트는 로컬호스트
        'PORT' : '3307', #기본은 3306인데 저는 다른 DBMS가 3306을 쓰고 있어서 3307로 했습니다.
    }
}

 

 

그 다음은 Django에서 DB 접근을 위해 앱 폴더에 있는 models.py에 DB 구조를 알려줘야 합니다.

 

 

파이참 터미널에서

python manage.py inspectdb

 

라고 쳐주게 되면 DjangoDB를 탐지하여 코드가 주르륵 나오게 됩니다.

 

 

예를 들어 test라는 테이블 명으로 만들었다면 class Test(models.Model): 로 시작하는 코드가 터미널에 출력됩니다. 

 

 

이 코드를 그대로 복사해 model.py에 붙여넣으면 끝입니다.

 

저는 title과 image를 character속성으로 지정했기 때문에 CharField라고 출력되는 것을 확인할 수 있습니다.

 

id 속성은 테이블 생성 시 MariaDB에서 자동으로 붙이도록 설정했기 때문에 Django에서는 따로 출력되지 않았습니다.

 

 

 

models.py에 새로운 코드가 입력되었으니 Django에게 알려야합니다. (갱신과 같은 의미)

 

터미널에 아래 코드를 순서대로 입력하면 됩니다.

 

python manage.py makemigrations # DB 갱신
python manage.py migrate # DB 갱신

 

 

이제 views.py도 약간 수정을 해야 합니다. 그냥 전체 코드를 통으로 올리겠습니다.

from django.shortcuts import render
from .googlespeech import Gspeech
from .realtimeapicall import RGspeech
import time
from django.http import HttpResponse
from django.views.decorators.csrf import csrf_exempt
from django.template import loader
# Create your views here.
from .models import WordCard #추가

def home(request): #접속 시 첫 화면
    return render(request, 'button.html')


@csrf_exempt
def apic(request): #api 호출 함수
    gsp = RGspeech()
    while True:
            # 음성 인식 될때까지 대기 한다.
        stt = gsp.getText()
        if stt is None:
            break
        print(stt)
        pretitle.append(stt)
        time.sleep(0.01)
        data = models.py의 class명(테이블명).objects.get(title = stt) # 조건에 맞는 1개의 행만 가져옴
        src = data.image
        break

    #stt값으로 ajax(디비조회) -> 값 가져와서 -> 뿌려주기

    return HttpResponse(src)

 

Django에서는 objects를 이용하면 DB 값을 쉽게 가져올 수 있습니다.

 

마지막 부분 코드를 보면 가져온 이미지 경로를 src에 넣고 src를 반환하고 있습니다. 기억해두세요.

 

 

 

마지막으로 button.html만 살짝 고치면 끝입니다.

<!DOCTYPE html>


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello world!</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript">
    var csrftoken = jQuery("[name=csrfmiddlewaretoken]").val();
function csrfSafeMethod(method) {
    // these HTTP methods do not require CSRF protection
    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
    beforeSend: function (xhr, settings) {
        if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
        }
    }
});


function apic(){
    $.ajax({
    url : "{% url 'apic' %}",
    type : "post",
    }).done(function (data) {
       stt.src = data;
    });

}

</script>


</head>

<body>
<a href="/apic" class="button">api 호출 시작 </a>
<br>

<a href="javascript:void(0);" onclick="apic();">페이지 이동 없이 api 호출</a>
<br>

<img id = "stt" src=''>
<br>


</body>
</html>

 

img 태그를 보시면 views.py에서 받은 src를 전달받습니다. src는 이미지 경로 값이고, img태그는 경로값으로 image를 찾아 출력시키는 태그입니다. 

 

 

그럼 이제 "페이지 이동 없이 api 호출"을 클릭한 후 발음이 제대로 인식되었다면 DB에 지정해둔 사과 이미지가 웹 화면에 뜨게 됩니다!

 

 

+ Google Speech API에서 약간의 문제점

테스트를 하던 중 한국어에 100% 특화된 API가 아니다보니 잘못 인식되는 경우가 가끔 있습니다. API나 사람의 발음, 인식이 힘든 받침 단어 등의 문제라서 저희 입장에서 고칠 수 있는 문제 같지는 않지만 완벽하지는 않다는 것을 말씀드립니다.

 

 

 

 

이것으로 기본적인 기능에 관한 포스팅은 끝입니다. 

 

다음 포스팅에서는 기본적인 기능을 응용한 부가적 기능에 대한 내용을 포스팅할 예정입니다.

 

 

'졸업작품(4학년)' 카테고리의 다른 글

Django-Google Speech API 연결  (0) 2021.01.11
졸업작품 소개  (0) 2021.01.11