[flutter] Firebase Firestore와 플러터를 이용한 날씨 애플리케이션 만들기

개요

이번 블로그 포스트에서는 Firebase Firestore와 Flutter를 사용하여 날씨 애플리케이션을 만드는 방법에 대해 알아보겠습니다. Firebase Firestore는 실시간 데이터베이스로 애플리케이션에서 필요한 데이터를 저장하고 동기화할 수 있도록 도와주는 서비스입니다. Flutter는 Google에서 개발한 오픈 소스 모바일 애플리케이션 개발 프레임워크로, 동일한 코드로 iOS와 Android 플랫폼에서 실행할 수 있는 애플리케이션을 만들 수 있습니다.

필요한 패키지 설치

먼저, Flutter 프로젝트에서 Firebase Firestore를 사용하기 위해 다음 패키지를 설치해야 합니다.

dependencies:
  flutter:
    sdk: flutter
  cloud_firestore: ^2.5.4

위의 코드를 pubspec.yaml 파일에 추가하고, 패키지를 적용하기 위해 터미널에서 flutter packages get 명령어를 실행해주세요.

Firebase Firestore 설정

Firebase Firestore를 사용하려면 먼저 Firebase 프로젝트를 만들고, Firestore 데이터베이스를 활성화해야 합니다.

  1. Firebase 콘솔(https://console.firebase.google.com/)에 접속하여 프로젝트를 생성합니다.
  2. 생성한 프로젝트에서 Firestore 데이터베이스를 활성화합니다.
  3. Firestore 데이터베이스에서 “시작하기” 버튼을 클릭하여 데이터베이스를 생성합니다.

플러터 애플리케이션 개발

이제 플러터 애플리케이션을 개발하기 위해 아래와 같은 단계를 따릅니다.

  1. Flutter 프로젝트 생성: flutter create weather_app

  2. lib 폴더에 main.dart 파일을 생성하고, 다음 코드를 작성합니다:

import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final FirebaseFirestore firestore = FirebaseFirestore.instance;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Weather App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Weather App'),
        ),
        body: StreamBuilder<QuerySnapshot>(
          stream: firestore.collection('weather').snapshots(),
          builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
            if (snapshot.hasError) {
              return Center(child: Text('Error: ${snapshot.error}'));
            }

            if (snapshot.connectionState == ConnectionState.waiting) {
              return Center(child: CircularProgressIndicator());
            }

            return ListView(
              children: snapshot.data!.docs.map((DocumentSnapshot doc) {
                dynamic weatherData = doc.data();
                return ListTile(
                  title: Text(weatherData['city']),
                  subtitle: Text(weatherData['temperature']),
                );
              }).toList(),
            );
          },
        ),
      ),
    );
  }
}

위의 코드는 Firestore의 ‘weather’ 컬렉션에서 날씨 데이터를 가져와 리스트로 표시하는 기본 애플리케이션입니다.

  1. Flutter 애플리케이션 실행:
    cd weather_app
    flutter run
    

애플리케이션이 실행되고 Firebase Firestore에서 가져온 날씨 데이터가 표시되는 것을 확인할 수 있습니다.

마무리

이번 블로그 포스트에서는 Firebase Firestore와 Flutter를 사용하여 날씨 애플리케이션을 만드는 방법에 대해 알아보았습니다. Firebase Firestore를 사용하면 쉽고 간편하게 실시간 데이터베이스를 구축할 수 있으며, Flutter를 통해 다른 플랫폼에서도 동작하는 애플리케이션을 만들 수 있습니다.

더 많은 정보를 원하시면 Firebase Firestore 문서(https://firebase.flutter.dev/docs/firestore/usage)와 Flutter 문서(https://flutter.dev/docs)를 참고해주세요.