트러블 슈팅을 위해 엄청난 고생을 했습니다.
- 이번 주 과제
- 얼굴인식으로 나오는 결과 값을 받아오는 방법 조사 (numpy array) (진행중) → gpt-4o 얼굴인식 기능으로 변경하여 적용 예정
- 메뉴 user CRUD 생성 (진행중) → USER, MENU, HASHTAG 모델의 데이터 베이스 생성 및 수정 삭제 가능 → 키오스크에 결제 메뉴 데이터 전송 가능 (전송된 데이터 데이터베이스에 추가하는 기능 必)
- 음성인식 Django에 반영 (진행중) → 키오스크 데이터 베이스가 작성이 되면 얼굴인식기능과 함께 동작할 수 있도록 조정 필요
- 키오스크 간단한 템플릿 만들기 (완료) → 메뉴 음성인식 설정을 수정해야 할 필요가 있음
- 장바구니 기능을 조사하기 (완료) → javascript를 이용하여 template과 views.py와 데이터를 주고 받을 수 있도록 설정
- 키오스크 전체적인 흐름도 작성 (진행중) → 기본적인 키오스크의 흐름도 작성 했으나 추가 되는 기능에 맞추어 흐름도를 수정 할 필요 有
문제점 : 템플릿(키오스크 주문화면 → 결제완료후 주문번호 출력화면)이동시 데이터 전송 및 화면이동 오류 발생
- 결제하기 버튼은 눌러도 동작하지 않는 문제 발생
- 원인 : AJAX요청에서 서버로부터 예상치 못한 응답을 받았거나 요청을 보내는 데 문제가 발생했을 때 발생
- 오류 코드
주문 처리 중 오류가 발생했습니다:
{readyState: 4, getResponseHeader: ƒ, getAllResponseHeaders: ƒ, setRequestHeader: ƒ, overrideMimeType: ƒ, …}
error @ menu/:168
c @ jquery.min.js:2
fireWith @ jquery.min.js:2
l @ jquery.min.js:2
(익명) @ jquery.min.js:2
load(비동기)
send @ jquery.min.js:2
ajax @ jquery.min.js:2
(익명) @ menu/:152- 해결 방안 : 기존의 데이터 전송 방법 교체
- 기존 : html (AJAX) 데이터 → views.py( submit_order )데이터 저장 후 주문번호 전송
→ views.py( order_complete ) 입력받은 주문번호에 맞추어 탬플릿 전송 → html (주문번호 출력) - 수정 안 : html (AJAX) 데이터 → views.py( submit_order )데이터 저장 후 주문번호 전송 → html (AJAX) 주문번호를 받아서 /orders/order_complete/' + data.order_number + '/ 입력 → views.py( order_complete ) 입력받은 주문번호에 맞추어 탬플릿 전송 → html (주문번호 출력)
- 기존 : html (AJAX) 데이터 → views.py( submit_order )데이터 저장 후 주문번호 전송
키오스크에서 주문이 완료가 되면 주문영수증 출력(실제로 나오지는 않음)되면서 화면에 해당 주문 번호를 표기 하여 표기해줌
- 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>주문 완료</title>
<!-- 부트스트랩 CSS 추가 -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #00A3E0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
color: white;
text-align: center;
}
.order-confirmation {
background-color: #ffffff;
border-radius: 20px;
padding: 3rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
color: #000;
max-width: 500px;
}
.order-confirmation h2 {
color: #FFD700;
}
.order-number {
font-size: 4rem;
font-weight: bold;
margin-bottom: 0;
}
.receipt-box {
padding: 1.5rem;
background-color: #ffffff;
border: 2px solid #000;
border-radius: 10px;
display: inline-block;
margin-bottom: 1rem;
min-width: 3rem; /* 최소 너비 설정 */
text-align: center; /* 텍스트를 가운데 정렬 */
line-height: 3rem; /* 텍스트 세로 중앙 정렬을 위해 박스 높이와 동일하게 설정 */
}
.thank-you {
font-size: 1.2rem;
color: #343a40;
}
</style>
</head>
<body>
<div class="order-confirmation">
<h2>결제가 완료되었습니다.</h2>
<p>영수증 하단 주문번호를 확인해 주세요</p>
<div class="receipt-box">
<div class="order-number">{{ order_number }}</div>
</div>
<p class="thank-you">이용해 주셔서 감사합니다.</p>
</div>
</body>
</html>'코딩 교육 TIL' 카테고리의 다른 글
| 2024-05-23 AI 코딩 TI (0) | 2024.05.23 |
|---|---|
| 2024-05-22 AI 코딩 TIL (0) | 2024.05.22 |
| 2024-05-17 AI 코딩 TIL (0) | 2024.05.17 |
| 2024-05-16 AI 코딩 TIL (0) | 2024.05.16 |
| 2024-05-14 AI 코딩 TIL (0) | 2024.05.14 |
