지자체별 행사 / 축제 정보 및 날씨 제공 서비스

순서

• About the Project
• Getting Started
  • Prerequisites
  • Installation
• 프로젝트 구조 / 동작 방식
• Usage
• Roadmap
• Contribution
• License
• Contact

---

---

---

About the Project

기존에 축제나 행사를 검색하기 위해서는 행사가 언제 어디서 열리는지 파악하고, 그 날짜에 맞춰서 날씨를 또 검색해 보아야 하는 번거로움이 있었다. 이러한 일련의 번거로운 과정들을 한 데 묶어 몇 번의 클릭으로 사용자가 원하는 행사 및 축제 정보를 디스플레이 함으로써 사용자의 편의 증대라는 효과를 가져올 수 있을 것으로 예상된다.

본 서비스는 지자체에서 개최하는 행사 정보와 날씨 데이터를 API를 통하여 받아온 후 그를 조합하여 사용자에게 친숙한 인터페이스(svelte 활용)를 통해 지역 / 행사별로 날씨 정보를 한눈에 볼 수 있는 서비스를 제공한다.

Built With

• WEB
  • Node.js
  • Svelte
  • Express
• Database
  • MongoDB
• API Handler
  
  • MongoDB
  • Node.js
  • RequestJs

Getting Started

Prerequisites

1. Docker를 사용하는 경우 (권장)

   • 도커 공식 홈페이지에 접속하여 docker 및 docker-compose 설치

2. Docker를 사용하지 않는 경우

   • Node.js 공식 홈페이지에 접속하여 Node.js 설치
   • MongoDB 공식 홈페이지에 접속하여 MongoDB 설치
   • Mongoexport 사용을 위한 tool에 접속하여 mongoexport 추가 기능 설치
   • Program files/mongodb/bin 경로 안에 설치된 파일들 추가하여 확장 기능을 위한 설치 완료

Installation

• Free API Key를 기상청 API, 관광공사 API, 카카오 지도 API 공식 사이트에서 받아온다

• Windows의 경우 설치하고자 하는 폴더에 들어가서 우클릭한 후 git bash 를 클릭하여 터미널 창을 연다

• MacOs의 경우 터미널창을 연 후 Command Line Interface를 통하여 설치하고자 하는 폴더로 이동한다

• git clone 명령으로 프로젝트 폴더 clone

  git clone http://khuhub.khu.ac.kr/2018102190/TFT.git
  

• apiHandler 부분의 server.js 파일에 발급받은 API를 입력해서 사용을 위한 준비를 완료한다

프로젝트 구조 / 동작 방식

1. Service 1 - Web
   1. Frontend
      1. Svelte를 사용하여 관광지 정보 / 날씨 정보를 한눈에 볼 수 있게 알려주는 유저 인터페이스로 사용
      2. 카카오 지도 API를 호출하여 지도 위에 핀 및 마커 설정
   2. Backend Server
      1. MongoDB Atlas와 서버를 연동하여 Database와 Node.js 연결
      2. DB에서 json 형태의 데이터를 불러 온 후 Frontend에서 유저에 의한 요청 발생 시 Frontend로 전송
2. Service 2 - DB
   1. API로부터 받아온 정보를 관리하고 MongoDB Atlas를 활용하여 Server에 제공
3. Service 3 - API Handler
   1. 관광공사 API를 호출하여 Database에 Write함
   2. 기상청 API를 호출하여 날씨 및 기상 관련 정보 가져옴

Usage

1. Docker를 사용하는 경우

   1. docker-compose.yml file이 있는 폴더에서 terminal을 연다
   2. docker-compose up -d 명령을 실행한다
   3. 서버를 종료할 때에는 docker-compose down 명령을 실행한다

2. Docker를 사용하지 않는 경우

   1. MongoDB가 정상적으로 작동되는지 확인한다
   2. TFT_API, TFT_WEB 각 폴더에서 npm install 명령을 실행한다
   3. 각 폴더에서 npm start 명령을 실행한다

Service Overview

Select District

Show Festival List

Show total example

Roadmap

• [v] Express 활용 서버 기본 베이스 구축 및 Dockerfile, README first commit 진행
• [v] Frontend 개발을 위한 template와 ApiHandler 개발을 위한 template 추가
• [v] 관광공사 API를 활용하여 DB에 축제 정보 저장하는 기능 추가
• [v] ApiHandler에서 원하지 않는 정보 걸러내는 기능 추가
• [v] 서버 개설 시 DB와 server connect하는 기능 추가
• [v] 기상청 API를 활용하여 DB에 기상 정보 저장하는 기능 추가
• [v] 카카오 지도 API를 활용하여 svelte와 연동, 인터페이스 구축
• [v] MongoDB Atlas에서 JSON 형식으로 정보 받아오는 기능 추가
• [v] Express와 svelte 연동
• [v] Frontend에 도, 시, 군, 구 등 구획 설정 및 축제 선택 기능 추가
• [v] 로고 제작 및 이미지 추가
• [v] Frontend와 Backend Merge 실행
• [v] ApiHandler 간소화 (불필요한 파일 제거)
• [v] ApiHandler와 server.js merge 실행
• [v] Docker 활용하여 서비스 실행 구축
• [v] Amazon AWS에 프로젝트 업로드 및 실행 예시 이미지 업로드

Contribution

프로젝트에 대한 어떠한 참여나 추가 개발도 환영합니다.

만약 프로젝트 발전을 위한 더 좋은 방법이 있으시다면 저희의 프로젝트를 fork하신 후 pull request를 부탁드립니다.

1. 프로젝트 fork 해오기 (git clone http://khuhub.khu.ac.kr/2018102190/TFT.git)

2. 새로운 기능을 위한 branch 생성 (git checkout -b feature/newFeature)

3. 바뀐 파일들 commit하기 (git commit -m 'Add some newFeature' )

4. Fork된 Branch에 바뀐 파일들 push하기 (git push origin feature/newFeature)

5. Pull Request 보내기

License

• Node.js License Page

• svelte License Page

• request js License Page

• express js License Page

• MongoDB License Page

Contact

2018102198 서준혁 junhyuk0801@khu.ac.kr

2018102194 배형석 qogudtjr7@khu.ac.kr

2018102190 박정민 jungmin59@khu.ac.kr

프로젝트 주소 : http://khuhub.khu.ac.kr/2018102190/TFT.git