웹개발플러스-맛집 지도 보러가기 2

05. 맛집 지도 프로젝트 시작!

 

• 문제 분석 - 완성작부터 보기
  

  

• Api 설계하기
  - 맛집 정보 스크랩핑
  - 지도 보여주기
  각 맛집 별 마커, 정보창, 카드 만들고 서로 연결하기
• 프로젝트 준비 - app.py
  

  

• 프로젝트 준비 - index.html
  
  

  

  

  

  
  
  
• 프로젝트 준비 - 배너 이미지 >다운로드

---

06. 맛집 지도 스크래핑하기

• 스크래핑해 올 사이트 살펴보기
  http://matstar.sbs.co.kr/location.html

SBS TV맛집

• 셀레니움으로 스크래핑하기
  

  

  scrapiong.py기본 코드

  

  
  위 처럼 각 식당에 해당하는 카드 선택 코드와, 식당 정보를 출력하는 코드를 넣어준다 그럼 준비 끝!

---

07. 맛집 정보 좌표로 변환하기

• 추가 정보 받기
  - 맛집을 지도 위에 나타내기 위해서는 경위도 좌표가 필요한데,
    다행히 네이버에서 제공하는 API 중에 주소를 좌표로 변환해주는 geocoding API가 있으니 살펴보자!
  - <https://api.ncloud-docs.com/docs/ai-naver-mapsgeocoding-geocode>
  

  

  

  status가 ok인 경우만 위도 경도 값을 잘 받았고 저장을 하면 된다.

  
  - 사용 신청은 전에 지도 API 신청하면서 같이 했기 때문에, 바로 사용할 수 있다.
  - 요청을 보낼 때 Client ID와 Client Secret Key 모두 보내주어야 한다는 점!
  - 네이버 클라우드 플랫폼 콘솔  : https://console.ncloud.com/mc/solution/naverService/application?version=v2
  - Geocoding 연결하기 : 
  headers = {
           "X-NCP-APIGW-API-KEY-ID": "[내 클라이언트 아이디]",
           "X-NCP-APIGW-API-KEY": "[내 클라이언트 시크릿 키]"
  }
  r = requests.get(f"https://naveropenapi.apigw.ntruss.com/map-geocode/v2/geocode?query={address}", headers=headers)
  response = r.json()
  - 주소에 오류가 있어 결과를 하나도 받지 못하는 경우가 있으므로 결과가 있을 때만 값을 출력하도록 설정!!!
  

  

  
  

---

08. 맛집 정보 DB에 저장하기
 - 여러 페이지 스크래핑하기 
  : 버튼을 클릭하여 더 많은 맛집 정보를 받아올 수 있도록 해보자.

 

• 더 보기 버튼의 선택자로 버튼 클릭하기
    + 드라이버가 닫히기 전 페이지 소스를 로드하기 전 요 작업을 해야함!
       왜냐하면 페이지 소스를 가져온 다음 그 안에 있는 페이지 소스에서 맛집 정보를 가져오는 거라 
       페이지 소스를 가져오기 전 많은 정보를 가져와야 하니까!!
  

  

• 더 보기 버튼을 10번 누르기
  

  

• DB에 저장하기
  

  

---

09. 웹사이트 모습 만들기

• 배너, 지도 카드영역 만들고 꾸미기
  

  

  html에 banner 클래스 추가

  

  CSS추가 = 꾸며주기

  
  
  
• 구글 웹폰트 적용하기
  - 구글 웹폰트 링크 :https://fonts.google.com/?subset=korean
  - 마음에 드는 글씨체를 선택한 후, 링크 태그와 CSS 규칙을 복-붙
  - 적용하고 강력 새로 고침하면 된다 *MAC : Cmd + shift+R / Window Ctrl+shift+R
  

  

• DB에서 맛집정보 받아오기
  1 .app.py 설명은 사진 안에!
  

  

  2. index.html

  

  

  get_matzips 함수를 활성화 시킬 수 있게 ready(function)에 집어넣어쥼

• 카드 만들기
  

  

  
  
  

---

크롬 favicon 404 오류 해결,,,

1. favicon 아이콘을 받아둔다.
 :https://www.favicon-generator.org/

2. head 태그 안에 코드를 적어준다

: <link rel="shortcut icon" type="image/x-ico" href="static/favicon.ico">

---

10. 정보 추가하기

•  마커 띄우기
  - markers 라는 리스트 아래에 marker 를 만들어 넣은 뒤, markers 를 한 번에 지도에 표시
  

  ---

  오늘도 여기까지만,, 네이버API연동이 안되서 수업을 이어 할 수가 없어요 어제도 오늘도 새벽까지 내내 해도 안되네요. SLACK에 도움은 요청해봤는데 답이 언제 올지,,,,