미소를뿌리는감자의 코딩
[항해99 웹개발종합반] 팀플; 발표 본문
이번에 웹개발종합반 얼리버드 1차로
팀플을 했었다.
팀원분들끼리 마지막에는 만든 것으로 발표도 진행해보자고
이야기도 했었다.
그래서 어떤 것을 만들었는지 적어보려고 한다.
우전 free API를 찾아 돌아다니다가
한 2년 전에 괜찮은 사이트를 발견하고 친구한테 공유해줬던 것이 생각나서
친구 톡방을 다시 방문해서 링크를 얻어냈다.
무료 API를 찾느라 웹서핑 하는 게 보통이 아니다..ㅎ
대부분 인증..? 같은걸 필요로 해서...
https://mixedanalytics.com/blog/list-actually-free-open-no-auth-needed-apis/
Big List of Free and Open Public APIs (No Auth Needed) [2023]
An API (Application Programming Interface) allows you to send and receive data from a remote server, like querying a database. This is helpful when you’re building an app or pulling metrics for…
mixedanalytics.com
이 링크이다!
여기서 나는 6번의 Dogs를 사용했다.
해당 API를 이용해서, 링크를 클릭했을 때, 랜덤으로 강아지 사진을 보여주는 사이트를 만들었다.
여기서 또 pythonanywhere로 배포를 하려고 했지만,
계정 한 개당 하나만 배포가 가능해서, 이전 프로젝트를 지우고 이번 것을 넣었다.
배포하는 과정을 상세히 남겨놔야겠다고 생각이 들었기 때문에
적어보도록 할 것이다.
pythonanywhere 사이트로 이동해서,
web으로 이동해서 add a new web app을 한다.
framework를 이용하는 framework를 ..
버전은 이용하는 버전을... 골라준다!
(최신 버전 만을 지원하는 것 같기도 하다)
vs로 이동해서, 설치되어 있는 라이브러리 리스트를 만들어준다.
터미널에서 아래를 적는다.
pip freeeze > requirements.txt
폴더로 이동해서, 만들어 놓은 것을 압축한다.
code에서 source code -> go to directory를 한다.
upload a file을 하고 압축 파일을 업로드 한다.
open bash console here을 하고,
터미널 창이 열린다.
ls를 통해 있는 파일을 확인하고,
unzip Project.zip을 한다.
이제 가상환경을 만들어줘야 한다.
python -m venv venv
source venv/bin/activate
pip install -r requirements.txtvenv 가상환경을 만들어주고, 활성화, 그리고 library들을 다운받아준다.
Web으로 다시 이동해서,
virtualenv: 를
enter path to a virtualenv, if desired를 클릭해서,
보라색 박스 뒤에 /venv/를 추가해서
넣어준다.
즉,
/home/HyunyoungKim/mysite/venv/
를 enter path to virtualenv, if desired 에 넣어준다.
app.py의 내용을 flask_app.py에 복붙해준다.
초록색 버튼-> reload를 한다.
이제 og 태그를 설정해줄 것이다.
og 태그는 이런식으로 설정한다.
설정하는 방법은 pythonanywhere에서 source 코드에 들어가고
templates 들어가서 html파일의
<head> 위에다가 아래를 붙여 넣어주면 된다.
<meta property="og:title" content="내 사이트의 제목" />
<meta property="og:description" content="보고 있는 페이지의 내용 요약" />
<meta property="og:image" content="이미지URL" />각자 content에 맞는 내용을 넣어준다.
잊지말고 저장 및 reload를 해준다.!
(내용 바뀌었으면 꼭 reload)
디버그와 캐시 초기화를 하기 위해서는,
https://developers.kakao.com/tool/debugger/sharing
카카오계정
accounts.kakao.com
으로 들어가서, 캐시 초기화와 디버그를 해주면 된다.
어쩌다 보니까,
강의 요약..한 글이 되었는데,
만든 것을 이어서 하자면...
결과는 다음과 같다.
이런식으로 강아지 사진이 random하게 나온다.
구현 과정에서 조금 애를 먹었던 부분은
이 부분이다.
내가 가져온 API가 beautifulsoup을 필요로 하지 않는 것이었다.
해당 API에서 개발자 도구를 확인해서 어떤 형식인지 확인하도록 하자~!
json의 경우, beautifulsoup을 필요로 하지 않는다.
html형식을 지원하는 것이 beautifulsoup이다.
1) json 의 경우,
from flask import Flask, render_template
from bs4 import BeautifulSoup
import requests
import json
app = Flask(__name__)
url = "https://dog.ceo/api/breeds/image/random"
@app.route('/')
def index():
data = requests.get(url)
dict_p = json.loads(data.content)
return render_template('index.html', data=dict_p['message'])
if __name__ == '__main__':
app.run()요론식으로 API를 다루고,
2) html의 경우,
from flask import Flask, render_template
from bs4 import BeautifulSoup
import requests
app = Flask(__name__)
url = "https://www.melon.com/chart/index.htm"
headers = {
'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'}
data = requests.get(url, headers=headers)
soup = BeautifulSoup(data.text, 'html.parser')
@app.route('/')
def index():
# 멜론 크롤링
trs = soup.select('table >tbody > tr')
return render_template('index.html', data=trs)
if __name__ == '__main__':
app.run()이런식으로 다루는 것이 다르다.
html 형식의 경우 BeautifulSoup을 이용하는 것이 좋다.
그 이외에, html 파일에 {{data}} 를 이용해서
정보들을 잘 넣어주면 완성이다 ㅎㅎ
https://hyunyoungkim.pythonanywhere.com/
당신의 운명의 강아지는
지금 알아보세요!
hyunyoungkim.pythonanywhere.com
당신의 강아지를 알아보세요~!!
'강의수강 > [웹개발종합반]' 카테고리의 다른 글
| [항해99 웹개발종합반] 5주차 (0) | 2024.01.12 |
|---|---|
| [항해99 웹개발종합반] 4주차 (1) | 2024.01.11 |
| [항해99 웹개발종합반] 3주차 (1) | 2024.01.10 |
| [항해99 웹개발종합반] 2주차 (0) | 2024.01.09 |
| [항해99 웹개발종합반] 1주차 (1) | 2024.01.09 |
