Django 최종 팀 프로젝트
프론트엔드 구현
음성 인식 오류 해결
- 기존 코드의 경우 크롬에서는 안내 음성도 나오지 않고 마이크 입력도 받지 않음
- 윈도우를 쓰는 팀원들은 다 마소 엣지에서 마이크 입력을 잘 받는 것에 반해 맥을 쓰는 나는 사파리와 엣지 모두 마이크 입력을 받지 않음
- 맥의 문제인가 싶어 맥을 쓰는 튜터님 두 분을 찾아가 테스트를 부탁드림: 내 맥의 문제
- 내가 해보았던 것: 사파리 설정에 들어가 마이크 입력 허용함, 시스템 설정에서 마이크 입력되는지 확인, 맥 내장 마이크로 전환해 시도, 사파리 종료 후 재시작, 맥 재시동, 사파리에서 우리 서버 외의 사이트에서 마이크 입력 확인, ...
- 로컬호스트 접속 시에 사파리에서 마이크 입력을 '묻기'로 전환해놓고 접속해 보았지만 마이크 입력을 묻지 않음
- 해결(튜터님 도움): 마이크 입력을 묻는 코드를 추가해 무조건 사이트에 대한 마이크 입력에 대한 권한을 묻도록 수정 → 사파리에서 마이크 허용에 대해 묻는 팝업이 뜨지만 여전히 입력은 안됨
- 대신 크롬에서 음성 안내, 마이크 입력 인식 모두 작동
window.addEventListener('load', function () {
console.log(">>>>>>>>>>>>> 실행");
const welcomeMessage = "반갑습니다. 원하시는 메뉴를 추천해 드리겠습니다. 필요한 것이 있다면 말씀해주세요.";
requestPermissions().then(() => {
speak(welcomeMessage, startSpeechRecognition);
}).catch(error => {
console.error('권한 요청 실패:', error);
});
});
function requestPermissions() {
return new Promise((resolve, reject) => {
navigator.mediaDevices.getUserMedia({ audio: true, video: false })
.then(stream => {
console.log('마이크 사용 권한이 허용되었습니다.');
resolve();
})
.catch(error => {
console.error('마이크 사용 권한을 얻지 못했습니다:', error);
reject(error);
});
});
}음성 인식 재시작 구현
- elder_menu로 넘어온 이후에 제시된 메뉴가 모두 마음에 들지 않을 경우 다시 주문 로직을 실행할 수 있는 버튼 생성
- 안내 멘트를 재생하는 speak() 함수가 작동하지 않음: elder_start.html에서 정상 작동하는 코드를 텍스트만 바꾸어 사용
- csrf_token이 null 로 받아져 다음 단계로 넘어가지 않는 문제: elder_start.html 의 form 태그를 이용해 csrf_token 값을 넘겨주어 해결
결제하기 후 주문 정보 저장 및 주문 번호 출력 구현
- elder_menu 에서 장바구니에 담고 결제하기를 눌렀을 때 넘어가지 않는 에러: 총 금액이 받아와지지 않아 발생한 문제
- totalPrice를 id로 받아와 변수로 선언해주고 ajax로 json으로 변환하여 db에 전송 → 저장 후 주문 번호 로직에 따라 출력해줌
- 총 금액 계산 로직: 장바구니에 담긴 총 금액을 더해주는 addItem() 함수를 거쳐 totalPrice 값을 도출 → totalPrice 값을 id 로 지정 → id로 불러와 상수 선언해줌 → 상수를 가져다가 ajax에 넘겨줌 → JSON.stringify()로 json으로 전환한 후 저장
// 장바구니 안의 아이템 총합 구하는 함수
function addItem(name, price) {
// Logic to add the item to the cart
let cartItems = document.getElementById('cartItems');
let totalPrice = document.getElementById('totalPrice');
let currentTotal = parseInt(totalPrice.textContent.replace('총 가격: ₩', ''), 10) || 0;
cartItems.innerHTML += `<div class="cart-item">${name} - ₩${price}</div>`;
currentTotal += price;
totalPrice.textContent = `총 가격: ₩${currentTotal}`;
}
// 결제하기 버튼을 눌렀을 때
document.getElementById('submitOrderBtn').addEventListener('click', function () {
const selectedItemsArray = Object.entries(selectedItems).map(([name, item]) => {
return {name: name, count: item.count};
});
// Retrieve the total price directly from the DOM //수정된 부분
let totalPriceElement = document.getElementById('totalPrice');
let currentTotal = parseInt(totalPriceElement.textContent.replace('총 가격: ₩', ''), 10) || 0;
// 요청 데이터를 JSON 문자열로 변환하여 전송
$.ajax({
url: '/orders/get_menus/',
cache: false,
dataType: 'json',
type: 'POST',
contentType: 'application/json',
data: JSON.stringify({items: selectedItemsArray, total_price: currentTotal}),
beforeSend: function (xhr) {
const csrfToken = getCsrfToken();
if (csrfToken) {
xhr.setRequestHeader('X-CSRFToken', csrfToken);
} else {
console.error('CSRF 토큰이 설정되지 않았습니다.');
return false;
}
},
success: function (data) {
console.log('주문이 성공적으로 처리되었습니다.');
window.location.href = '/orders/order_complete/' + data.order_number + '/';
},
error: function (error) {
console.error('주문 처리 중 오류가 발생했습니다:', error);
}
});
});AI 답변에 관한 프롬프트 수정 아이디어
- 현재 AI로 메뉴에 대한 해시태그를 뽑아낸 후 그 해시태그를 통해 데이터에서 필터를 걸어주어 관련 메뉴를 조회함
- 이 방법의 문제: 해시태그를 하나만 뽑아내야 정상 작동함. 두 개 이상의 해시태그를 뽑아내려면 에러가 발생함
- 따라서 AI를 이용해 해시태그를 뽑아내는 것이 아니라, 관련 메뉴를 탐색해 1,2,3순위를 알려달라고 프롬프트를 구성해 메뉴명만 가져올 수 있도록 구성해볼 것
발전 중...