프로젝트/LOL 전적 검색 App
-
롤 전적 검색 사이트 만들기(4)프로젝트/LOL 전적 검색 App 2020. 5. 6. 17:11
배포 ngrok 완성된 웹 페이지를 배포하는 방법은 여러 가지가 있습니다. 가장 빠른 배포 방법은 ngrok를 사용하는 방법입니다. ngrok는 Flask에서 라이브러리로 지원하며 테스트 환경에서. py 코드를 실행시키면 배포가 완료됩니다. ngrok로 실행시 터미널에 띄워지는 주소로 접속할 수 있습니다. 하지만 24시간 서버를 열어놓기 위해서는 터미널을 계속 열어두어야 하고 주소가 매번 바뀐다는 단점이 있습니다. Heroku heroku는 배포를 하기 위해 몇가지 조건이 필요합니다. 설치된 라이브러리가 들어있는 requirements.txt 파일이 필요하고 Procfile에서 서버의 구동 방식과 시작할 파이썬 파일을 지정해줘야 합니다. 처음 배포할 때 자잘한 오류로 인해 배포하는데 오래 걸렸지만 익숙해..
-
롤 전적 검색 사이트 만들기(3)프로젝트/LOL 전적 검색 App 2020. 2. 14. 21:11
데이터베이스 사용 전적 검색 사이트의 회원가입, 로그인, 게시판, 유저 매칭, 전적 검색 여러 기능들을 구현하기 위해 데이터베이스를 사용했고 mongoDB를 사용했습니다. Flask를 사용했기 때문에 PHP구문 없이 데이터베이스를 활용할 수 있었습니다. 회원가입 페이지 상단의 회원가입 버튼을 누르면 아래와 같이 회원가입 모달이 페이지에 띄워집니다. 회원가입 모달에 이메일, 비밀번호를 입력하고 회원가입 버튼을 누르면 'POST' 형태로 Flask에 전달됩니다. @app.route('/register_modal', methods=['POST', 'GET']) def register(): if request.method == 'POST': myuser = mongo.db.user_Info existing_us..
-
롤 전적 검색 사이트 만들기(2)프로젝트/LOL 전적 검색 App 2020. 2. 14. 21:11
2) 웹페이지 구현 및 시각화 Python-Flask를 사용했으며 부트스트랩으로 시각화 했습니다. 코드가 길어 생략합니다. (코드는 https://github.com/Yeowoolee/LOL-API-Statistics 에서 확인 가능합니다.) 이번 글에서는 페이지의 구성에 대해서만 간략히 설명합니다. 메인화면 header 모든 페이지의 상단에 존재해야 하기 때문에 base.html의 에 코드를 작성 했습니다. jinja2 문법으로 사용자가 로그인에 성공하면 버튼이 바뀌도록 했습니다. 메인화면 body 메인화면에는 위와 같이 소환사 정보 검색창, 라인 별 챔피언 추천, 추천 영상이 노출 되도록 했습니다. 소환사 정보 검색창을 통해 리그오브레전드 게임 아이디를 넣고 검색하면 해당 아이디의 게임 정보가 표시된..
-
롤 전적 검색 사이트 만들기(1)프로젝트/LOL 전적 검색 App 2020. 2. 14. 21:10
목표 이미 많은 유저들이 OP.GG와 같은 전적 검색 사이트를 이용하지만 상위 티어의 통계만을 이용해 분석된 데이터만 보여줍니다. 따라서 하위 티어에 있는 유저에게는 큰 도움이 되지 않습니다. 또 유저 매칭 시 보이는 정보가 부족하고 라이너 별 팁 정보를 확인하기 어렵습니다. 때문에 이러한 문제점을 해결해서 전적 검색 사이트를 만드는 것을 목표로 했습니다. 수행 내용 및 방법 1) 정적 정보 불러오기 리그오브레전드에서 제공하는 API 파싱을 통해, 최근 경기 20개의 데이터를 JSON 형태로 가져옵니다. 2) 웹페이지 구현 및 시각화 Python-Flask를 기반으로 웹 개발 (HTML, CSS, JavaScript를 사용하여 웹 페이지를 구현) 부트스트랩 사용 3) 데이터베이스 사용 웹 페이지 사용자의..
-
롤 전적 검색 사이트 만들기(0)프로젝트/LOL 전적 검색 App 2020. 2. 14. 21:10
Python-Flask 설치 파이썬에서는 웹 페이지 제작을 위해 디장고, 플라스크를 많이 사용하는데 소규모 프로젝트이기 때문에 플라스크를 사용했습니다. Flask위에서 웹 페이지가 동작하기 때문에 번거롭게 XAMPP를 사용하거나 PHP문을 사용할 필요가 없다는 장점이 있습니다. pip install Flask를 명령 프롬프트 창에 입력해서 Flask를 설치 할 수 있습니다. 웹 페이지 만들기 부트스트랩을 사용했습니다. Python-Flask에서 지원하는 jinja2문을 사용해 html문을 작성했습니다. 디자인과 반응형 웹 페이지를 생각해 부트스트랩을 사용해서 만들었습니다. nav부분과 footer 부분은 다른 페이지로 넘어가더라도 바뀌지 않는 부분이라서 base.html로 만들어 줬습니다. (jinja2..