RUBY
[SJCU]앱개발기초 기말과제_간단한 날씨앱 만들기 본문
앱개발기초
기말과제
간단한 날씨앱 만들기
앱 실행 영상
app.py
from flask import Flask, render_template, request
import requests
app = Flask(__name__)
# WeatherAPI에서 발급받은 API 키
API_KEY = '키를 넣어야해용'
@app.route('/')
def index():
# 선택 가능한 도시 목록 (한글 도시는 사용자가 보게 되는 부분, 영어 도시는 API 호출에 사용됨)
cities = {
'서울': 'Seoul',
'뉴욕': 'New York',
'런던': 'London',
'도쿄': 'Tokyo',
'시드니': 'Sydney'
}
return render_template('index.html', cities=cities)
@app.route('/weather', methods=['POST'])
def get_weather():
# 사용자가 선택한 도시의 한글명과 영문명을 가져옴
city_kor = request.form['city']
city_eng = request.form['city_eng']
# 날씨 데이터를 가져옴
weather_data, error_message = fetch_weather(city_eng)
# 결과 페이지를 렌더링
return render_template('result.html', weather=weather_data, city=city_kor, error=error_message)
def fetch_weather(city):
# WeatherAPI를 사용하여 날씨 데이터를 가져옴
url = f'http://api.weatherapi.com/v1/current.json?key={API_KEY}&q={city}&aqi=no'
response = requests.get(url)
data = response.json()
# API 호출 결과에 오류가 있으면 None과 오류 메시지를 반환
if 'error' in data:
return None, data['error'].get('message', '날씨 데이터를 가져오는 중 오류가 발생했습니다.')
# 날씨 데이터를 추출하여 딕셔너리 형태로 반환
weather = {
'description': data['current']['condition']['text'],
'temperature': data['current']['temp_c'],
'humidity': data['current']['humidity'],
'wind_speed': data['current']['wind_kph']
}
return weather, None
if __name__ == '__main__':
# Flask 애플리케이션을 디버그 모드로 실행
app.run(debug=True)
index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>날씨 앱</title>
<!-- Bootstrap CSS 링크 -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
padding-top: 50px;
}
.container {
max-width: 600px;
}
</style>
</head>
<body>
<div class="container">
<h1 class="text-center mb-4">날씨 앱</h1>
<form action="/weather" method="post">
<div class="form-group">
<label for="city">도시:</label>
<!-- 도시 선택 드롭다운 -->
<select class="form-control" id="city" name="city" onchange="updateCityEng()">
<!-- 서버에서 전달한 도시 목록을 옵션으로 표시 -->
{% for city_kor, city_eng in cities.items() %}
<option value="{{ city_kor }}" data-eng="{{ city_eng }}">{{ city_kor }}</option>
{% endfor %}
</select>
</div>
<!-- 사용자가 선택한 도시의 영문명을 숨겨진 필드에 저장 -->
<input type="hidden" id="city_eng" name="city_eng">
<button type="submit" class="btn btn-primary btn-block">날씨 확인</button>
</form>
</div>
<script>
// 사용자가 도시를 선택할 때마다 영문명을 숨겨진 필드에 저장하는 함수
function updateCityEng() {
var select = document.getElementById('city');
var option = select.options[select.selectedIndex];
document.getElementById('city_eng').value = option.getAttribute('data-eng');
}
// 페이지 로드 시 초기 선택된 도시의 영문명을 설정
document.addEventListener('DOMContentLoaded', updateCityEng);
</script>
<!-- Bootstrap과 jQuery, Popper.js의 JavaScript 링크 -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
result.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>날씨 앱</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
padding-top: 50px;
}
.container {
max-width: 600px;
}
</style>
</head>
<body>
<div class="container">
<h1 class="text-center mb-4">{{ city }}의 날씨</h1>
{% if weather %}
<ul class="list-group">
<li class="list-group-item">상태: {{ weather.description }}</li>
<li class="list-group-item">온도: {{ weather.temperature }}°C</li>
<li class="list-group-item">습도: {{ weather.humidity }}%</li>
<li class="list-group-item">바람 속도: {{ weather.wind_speed }} kph</li>
</ul>
{% else %}
<div class="alert alert-danger" role="alert">
도시를 찾을 수 없습니다! {{ error }}
</div>
{% endif %}
<a href="/" class="btn btn-secondary btn-block mt-4">홈으로 돌아가기</a>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
'SJCU > 앱개발기초' 카테고리의 다른 글
| [SJCU]앱개발기초 기말과제_간단한 todolist앱 만들기 (0) | 2024.06.17 |
|---|
'SJCU/앱개발기초' Related Articles
more
Comments