Colin's Blog
[flutter] Firebase Database와 플러터를 이용한 날씨 알리미 애플리케이션 만들기

개요

이번 프로젝트에서는 Firebase Database와 플러터(Flutter)를 사용하여 날씨 알리미 애플리케이션을 만들어보겠습니다. Firebase Database를 사용하여 실시간으로 날씨 정보를 저장하고, 플러터를 사용하여 애플리케이션을 개발합니다.

필요 도구

Firebase 설정

  1. Firebase 콘솔에 접속하여 프로젝트를 생성합니다.
  2. 프로젝트 설정에서 Firebase Database를 선택하고, 데이터베이스를 만듭니다.
  3. 데이터베이스 규칙을 설정하고, 액세스 권한을 제어합니다.

Flutter 프로젝트 설정

  1. Flutter SDK를 설치합니다. Flutter 공식 사이트에서 SDK를 다운로드하고 설치합니다.
  2. Flutter 프로젝트를 생성합니다. 명령 프롬프트나 터미널에서 flutter create weather_app을 실행하여 프로젝트를 생성합니다.
  3. 생성된 프로젝트 폴더로 이동하여 pubspec.yaml 파일을 열고, 필요한 Firebase 패키지를 추가합니다. 
    dependencies:
  flutter:
 sdk: flutter
  firebase_core: ^1.6.0
  firebase_database: ^10.0.0

Firebase Database 연결

  1. Flutter 앱에서 Firebase를 사용하기 위해 Firebase SDK를 초기화합니다. main.dart 파일을 열고 다음 코드를 추가합니다. ```dart import ‘package:firebase_core/firebase_core.dart’;

void main() async { WidgetsFlutterBinding.ensureInitialized(); await Firebase.initializeApp(); runApp(MyApp()); }

2. Firebase Database와 통신하기 위해 데이터베이스 인스턴스를 생성합니다. `main.dart` 파일에 다음 코드를 추가합니다.
```dart
import 'package:firebase_database/firebase_database.dart';
final DatabaseReference databaseReference =
    FirebaseDatabase.instance.reference();

날씨 정보 가져오기

  1. OpenWeatherMap API를 사용하여 날씨 정보를 가져옵니다. http 패키지를 사용하여 API 요청을 처리하는 함수를 만들어 봅시다. weather.dart 파일을 생성하고 다음 코드를 작성합니다. 
    import 'package:http/http.dart' as http;
Future<dynamic> fetchWeatherData() async {
  final response = await http.get(Uri.parse('API_URL'));
  if (response.statusCode == 200) {
 // 데이터 처리
 return jsonDecode(response.body);
  } else {
 throw Exception('Failed to load weather data');
  }
}
  2. API 응답을 받은 후 데이터를 파싱하여 Firebase Database에 저장합니다. weather.dart 파일에 다음 코드를 추가합니다. 
    void saveWeatherData(dynamic weatherData) {
  // Firebase Database에 데이터 저장
  DatabaseReference weatherRef = databaseReference.child('weather').push();
  weatherRef.set({
 'temperature': weatherData['main']['temperature'],
 'humidity': weatherData['main']['humidity'],
 'description': weatherData['weather'][0]['description'],
  });
}

날씨 알리미 애플리케이션 개발

  1. 플러터 애플리케이션을 개발하기 위해 필요한 위젯을 import 합니다. main.dart 파일에 다음 코드를 추가합니다. 
    import 'package:flutter/material.dart';
import 'weather.dart';
  2. 앱 화면을 구성하는 위젯을 생성합니다. WeatherApp 위젯을 생성하여 앱의 기본 구조를 설정합니다. 
    class WeatherApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
 return MaterialApp(
   title: 'Weather App',
   theme: ThemeData(
     primarySwatch: Colors.blue,
   ),
   home: HomePage(),
 );
  }
}
  3. 날씨 데이터를 화면에 표시하기 위한 위젯을 생성합니다. HomePage 위젯을 생성하고 Firebase Database에서 데이터를 읽어와 날씨 정보를 표시합니다. ```dart import ‘package:firebase_database/firebase_database.dart’;

class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text(‘Weather App’), ), body: StreamBuilder( stream: databaseReference.child(‘weather’).onValue, builder: (BuildContext context, AsyncSnapshot snapshot) { if (snapshot.hasData) { // 데이터 처리 return Center( child: Text( 'Temperature: ${snapshot.data!.snapshot.value['temperature']}°C\n' 'Humidity: ${snapshot.data!.snapshot.value['humidity']}%\n' 'Description: ${snapshot.data!.snapshot.value['description']}', textAlign: TextAlign.center, ), ); } return CircularProgressIndicator(); }, ), ); } } ```

마무리

이제 Firebase Database와 플러터를 사용하여 날씨 알리미 애플리케이션을 만들었습니다. 데이터베이스에 날씨 정보를 저장하고, 앱에서 데이터를 읽어와 화면에 표시하는 기능을 구현했습니다. 이를 활용하여 자신만의 날씨 앱을 개발해보세요.

참고 자료:

© 2018 Colin. All rights reserved.