[개인프로젝트] 좀 더 나은 특수어 번역기

 

http://leehjhjhj.pythonanywhere.com

 

프로젝트라고 하기엔 너무 부끄럽지만 토이프로젝트도 프로젝트이니..

사실 블로그 글을 적어가면서 했어야 됐는데 개발에 몰두하느라 적는 것을 잊었다.

만드는 건 재밌고 배포하는 건 고통이었으나 정말 많은 것을 배웠다. 가장 큰 것은 google은 모든 것을 알고있다는 점?

 

처음에 만들고 많은 개선점들이 있었다.

우선 처음 번역기는 번역하는 공간과 보여주는 공간이 따로 있었다. 그러나 이것을 create 함수로 따로 설정하고

home이라는 함수도 만들어주어서 form을 그대로 보여주게 하였다.

from django.shortcuts import render, redirect, get_object_or_404
from .forms import Transform
from .models import Translate
from google.cloud import translate_v2 as translate
import os
import sys
import urllib.request
import json

os.environ['GOOGLE_APPLICATION_CREDENTIALS'] = ***

def create(request):
    if request.method == 'POST':
        form = Transform(request.POST)
        translator = translate.Client()
        if form.is_valid():
            post = form.save(commit=False)
            if post.from_lg == 'ko':
                client_id = ""
                client_secret = ""
                post.body = post.original
                encText = urllib.parse.quote(post.body)
                data = "source=ko&target=en&text=" + encText
                url = "https://openapi.naver.com/v1/papago/n2mt"
                request = urllib.request.Request(url)
                request.add_header("X-Naver-Client-Id",client_id)
                request.add_header("X-Naver-Client-Secret",client_secret)
                response = urllib.request.urlopen(request, data=data.encode("utf-8"))
                rescode = response.getcode()

                if(rescode==200):
                    response_body = response.read()
                    decode = json.loads(response_body.decode('utf-8'))
                    post.body = decode['message']['result']['translatedText']
                    
                post.body = translator.translate(post.body, target_language=post.to_lg)
                post.body = post.body["translatedText"]
                form.save()
            else:
                post.body = post.original
                post.body = translator.translate(post.body, target_language='en')
                post.body = post.body["translatedText"]

                client_id = "****"
                client_secret = "****"
                encText = urllib.parse.quote(post.body)
                data = "source=en&target=ko&text=" + encText
                url = "https://openapi.naver.com/v1/papago/n2mt"
                request = urllib.request.Request(url)
                request.add_header("X-Naver-Client-Id",client_id)
                request.add_header("X-Naver-Client-Secret",client_secret)
                response = urllib.request.urlopen(request, data=data.encode("utf-8"))
                rescode = response.getcode()

                if(rescode==200):
                    response_body = response.read()
                    decode = json.loads(response_body.decode('utf-8'))
                    post.body = decode['message']['result']['translatedText']
                form.save()
            return redirect('blog:show', id = post.id)

def home(request):
    form = Transform()
    forms = {'form': form}
    return render(request, 'home.html', forms)

def show(request, id):
    if request.method == 'GET':
        post = get_object_or_404(Translate, id=id)
        form = Transform(instance=post)
    else:
        return redirect('blog:create')
    return render(request, 'home.html', {'post': post, 'form': form})

이게 views.py인데 이번에 멋사에서 배운 장고 블로그 기술을 많이 썼다. 우선 구글 번역 api와 papago api를 불러와야 했는데 처음 해보는 것이니 당연히 이것도 쉽지 않았다. papago는 설치하지 않아도 되는 정말 아주 편리한 api였으나 구글 api는 api key도 발급받아야 되고 pip install도 해야하는 아주 번거로운 친구였다.

 

그렇게 create와 home을 분리하고, show라는 함수를 만들어서 create와 연결되어 get이면 id를 받고, post면 다시 create를 연결해준다. instance=post를 만들어서 블로그 글의 update처럼 방금 번역한 것이 그대로 폼에 남아있게 설정하였다. 이것을 가능하게 해준 것이 {'post': post, 'form': form}이다. 두 개를 넘겨줘서 show 페이지에선 form도 유지하고, 넘겨받은 Post 또한 보여주고, 유지할 수 있다.

 

여기서 모델폼과 forms.py를 변경해야했다. 이전에 변형된 post.body를 그대로 보여줬기 때문에 

요런 형태로 한국어에서 터키어로 번역했음에도 불구하고 결과물인 post.body와 원래 입력한 body의 내용이 같아져서

저렇게 보기 안좋게 바뀌었다. 그래서

from django.db import models

class Translate(models.Model):
    body = models.CharField('',max_length=500)
    original = models.CharField('',max_length=500, null=True)
    from_lg = models.CharField('',max_length=10, default='')
    to_lg = models.CharField('',max_length=10)

요렇게 원래 출발 언어로 적힌 body를 보존하기 위해 model에 original을 추가하고 null=True로 하여서 기존의 데이터에 지장이 안가게 했다. 그리고 CharField 앞에 '', 를 붙여서 폼 앞에 모델 요소들의 이름이 나오지 않게 하였다.

from django import forms
from .models import Translate

class Transform(forms.ModelForm):
    class Meta:
        model = Translate
        fields = ['original', 'from_lg', 'to_lg']
        widgets = {
            'original': forms.Textarea(
                attrs={
                    'class': 'form-control',
                    'placeholder': '번역하고 싶은 문장'
                }),
            'from_lg': forms.TextInput(
                attrs={
                    'class': 'form-control form-control-lg',
                    'placeholder': '출발언어'
                }),
            'to_lg': forms.TextInput(
                attrs={
                    'class': 'form-control form-control-lg',
                    'placeholder': '도착언어'
                })
                }

이건 폼인데 저 attrs를 지정해서 bootstrap으로 폼을 꾸밀 수 있게 해주었다. 'placeholder'라는 것도 알게되었다.

 

html와 css는 부트스트랩을 더 잘 활용할 수 있게되었고

<button type="button" class="btn btn-primary btn-lg" onclick="copyT()">복사하기</button>
<script>
  function copyT() {
      var obj = document.getElementById("copyTxt");
      var range = document.createRange();
      range.selectNode(obj.childNodes[0]);
      var sel = window.getSelection();
      sel.removeAllRanges();
      sel.addRange(range); 
      document.execCommand("copy"); 
      sel.removeRange(range); 
  }
</script>

 

이렇게 자바스크립트도 html에 넣어서 활용이 가능하다는 것을 알게되었다.

Bootswatch: Minty

요기는 부트스트랩을 더 예쁘게 꾸민 폼인데 민트는 싫어하지만 예뻐서 민트로 골랐다.

 

정말 나를 힘들게 했던 것은 배포하기. 처음에 heroku로 하다가 수 많은 오류와.. 장고까지 날라가는 초유의 사태를 맞고.. 진짜 별 짓을 다하다가 결국에는 gg를 쳤다. 배포를 포기하려던 찰나에 빠르게 배포할 수 있어보이는 pythonanywhere로 배포를 시도했다. 그래도 heroku덕에 git과 친해졌다. init으로 초기화하고 add .로 추가할거 추가하고.. remote origin으로 저장소에 연결하고 push한다! 이런 느낌?

-- 원격 저장소 연결
C:\Users\kong\gitworks\restapi>git remote add origin https://github.com/someone/newsomething.git
-- main 브랜치 생성
C:\Users\kong\gitworks\restapi>git branch -M main
-- main 브랜치로 origin에 push
C:\Users\kong\gitworks\restapi>git push -u origin main

유용했던 git명령어는 remote 취소하기

git remote remove <repository name>

요거이다. 그럼에도 불구하고.. 정말 삽질에 삽질을 거듭하고 pythonanywhere로 갔다.

 

[Python / Django] pythonanywhere 배포하기(웹 호스팅)

 

여기서 하라는데로 하면 배포는 되는데 문제는 내 구글 api였다. 요놈때문에 고생좀 했다. 가상환경에 깔아야되는데 깔고나니깐 인증서가 없다고해서 다시 pythonanywhere에 인증서 넣고 가상환경에 pip3 install 해줬다.

 

요건 국가 코드인데 더 많은 코드가 있어서 따로 올릴 예정이다.

국가	코드
아랍어	ar
아제르바이잔어	az
크로아티아/체코어	hr/cs
덴마크어/핀란드어/스웨덴어	da/fi/sv
네덜란드어	nl
히브리어	he / iw
힌디어	hi
몽골어	hmn
말레이시아/인도네시아어	/id
이탈리아어	it
페르시아어	fa
태국어	th
터키어	tr
베트남어	vi

 

느낌점과 추가할 사항들

처음 한 토이프로젝트이고, 배포까지 처음 해보아서 엄청 신기하고.. 뿌듯했다. 그리고 그냥 단순히 블로그가 아니라 이렇게 기능이 들어가 있고, 내가 불편했던 것을 아이디어로 기획한 프로젝트여서 의미가 깊다. 또한 내 전공과 당장 내 친구들에게도 유용할 수 있는 프로젝트라 정말 몰입도 있게 만들었던 것 같다. 정말 정신 나가있었음 ㅋㅎ

 

추가할 사항들은 사실 엄청 많은데 출발 언어와 도착언어 클릭 하나로 바꾸기, 언어를 코드로 안치게하기 등등...?

그리고 이게 서버도 무료버전, api들도 무료 버전이라 용량과 하루에 10000자라는 제한이 있어서 이게 트래픽 수가 증가하면 유료로 전환해야 한다는 점이 문제점이다. 또한 pythonanywhere이 무료버전이라 도메인도 안이쁘다 ㅠ_ㅠ. 다른 곳에 배포를 해보는 연습도 해보아야겠다.