본문 바로가기
개발&코딩/AI

ChatGPT에게 쇼핑몰 웹사이트 제작을 자동화 시켜보자

by 우동이 2023. 2. 11.
300x250

작업환경

  • Visual Studio Code 1.74.3
  • Python 3.11.1
  • Criminal IP Beta - API Key 필요

 

ChatGPT

 


 

>>  ChatGPT - 쇼핑몰 목적 웹사이트 제작 의뢰

Python-Flask

 

질의문 

I'd like to make a website for flask-based shopping malls, so please write the code.

 

응답 

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route("/")
def home():
    return render_template("home.html")

@app.route("/products")
def products():
    products_list = [
        {"name": "Product 1", "price": 10.99},
        {"name": "Product 2", "price": 15.99},
        {"name": "Product 3", "price": 20.99}
    ]
    return render_template("products.html", products=products_list)

@app.route("/product/<string:product_name>")
def product(product_name):
    products_list = [
        {"name": "Product 1", "price": 10.99, "description": "This is product 1"},
        {"name": "Product 2", "price": 15.99, "description": "This is product 2"},
        {"name": "Product 3", "price": 20.99, "description": "This is product 3"}
    ]
    selected_product = None
    for product in products_list:
        if product["name"] == product_name:
            selected_product = product
            break
    return render_template("product.html", product=selected_product)

if __name__ == "__main__":
    app.run(debug=True)

 

결과

프로젝트 구성

 

제공받은 코드는 Flask를 기반으로 /, /product 두 개의 URL을 생성하며

/product/<product_name> 상품이름을 /product의 템플릿으로 전달합니다.

 

물론 템플릿에 포함될 product.html, home.html, product.html은 포함되지 않은 코드입니다.

그래서 이러한 코드들까지 부탁해 봤습니다.

 


>>  ChatGPT - Flask Templates 폴더에 들어갈 html 파일 코드 의뢰

Python-Flask

 

질의

Please write the code for home.html among the codes I mentioned earlier.

 

응답

<html>
<head>
  <title>Flask Shopping Mall</title>
</head>
<body>
  <h1>Welcome to Flask Shopping Mall</h1>
  <p>Explore our products: <a href="{{ url_for('products') }}">Products</a></p>
</body>
</html>

 

제공받은 코드는 home.html 에 사용될 html 코드입니다.

products 페이지를 하이퍼링크로 담고 있습니다.

 

flask

 

이후 웹사이트 제작 시 코드 구성시에는 자신이 직접 원하는 구성과 디자인으로 맞춰서 코딩하되

막히는 부분은 ChatGPT에 질의응답해 가며 채워나가면 더듬더듬 Html책을 보면서 코딩할 때보다

훨씬 빠르게 코딩할 수 있습니다. 아래 사이트 사진은 ChatGPT에서 제공받은 코드를 활용해 대충

짜낸 쇼핑몰 목적의 웹사이트입니다.

 

 

ChatGPT 사용예시 화면

 

 

 


다른 글

openai API 사용법예제

 

Iptables 방화벽구축

 

 

 

300x250

댓글