이번에는 Firebase Database를 사용하여 플러터(Flutter)를 이용한 주식 시세 애플리케이션을 만들어보겠습니다. Firebase는 실시간 데이터베이스를 제공해주므로, 실시간으로 변동되는 주식 가격을 애플리케이션에 연동할 수 있습니다.
Firebase 설정
Firebase를 사용하기 위해 먼저 Firebase 프로젝트를 생성해야 합니다. Firebase 콘솔에 접속하여 새 프로젝트를 생성하고, 앱을 추가해줍니다. 이때, 프로젝트의 패키지 이름에는 플러터 애플리케이션의 패키지 이름을 입력해야 합니다.
이제 Firebase 프로젝트에 앱이 추가되었으므로, Google Services 파일을 다운로드하여 플러터 프로젝트의 android/app 폴더에 추가해줍니다.
Firebase Database 구성
Firebase Database에는 주식 시세 데이터를 저장할 stocks라는 컬렉션을 생성해야 합니다. 이 컬렉션 안에는 각 주식의 가격과 이름을 저장합니다. 이 예제에서는 다음과 같이 데이터를 구성하겠습니다.
stocks
- stock1
- name: "삼성전자"
- price: 55000
- stock2
- name: "LG화학"
- price: 350000
- stock3
- name: "SK하이닉스"
- price: 85000
플러터 프로젝트 설정
이제 플러터 프로젝트를 생성하고 Firebase와 연동하는 작업을 해보겠습니다.
먼저, pubspec.yaml 파일에 Firebase와 Firestore 라이브러리를 추가합니다.
dependencies:
flutter:
sdk: flutter
firebase_core: ^0.5.0
cloud_firestore: ^0.14.0
이후, 플러터 애플리케이션의 진입점인 main.dart 파일에 Firebase 초기화 코드를 추가합니다.
import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// 앱 구성 요소들을 생성하는 코드 작성
// ...
}
실시간 주식 시세 데이터 가져오기
이제 Firebase Database에서 실시간으로 주식 시세 데이터를 가져와서 화면에 표시해보겠습니다.
import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
class StockPricesPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Stock Prices'),
),
body: StreamBuilder<QuerySnapshot>(
stream: FirebaseFirestore.instance.collection('stocks').snapshots(),
builder: (context, snapshot) {
if (!snapshot.hasData) {
return Center(
child: CircularProgressIndicator(),
);
}
final stocks = snapshot.data.docs;
return ListView.builder(
itemCount: stocks.length,
itemBuilder: (context, index) {
final stock = stocks[index];
final name = stock.data()['name'];
final price = stock.data()['price'];
return ListTile(
title: Text(name),
subtitle: Text('Price: $price'),
);
},
);
},
),
);
}
}
위 코드에서는 StreamBuilder를 사용하여 Firebase Database의 주식 시세 데이터를 실시간으로 가져옵니다. 가져온 데이터를 이용하여 ListView.builder를 사용하여 주식 목록을 표시합니다.
위와 같이 코드를 작성하면 실시간으로 변동되는 주식 시세를 애플리케이션에서 확인할 수 있습니다.
이제 Firebase Database에 데이터를 추가하거나 수정하면 애플리케이션에서도 실시간으로 반영될 것입니다.
마치며
이번에는 Firebase Database를 사용하여 플러터를 이용한 주식 시세 애플리케이션을 만들어보았습니다. Firebase를 이용하면 더욱 다양한 데이터를 애플리케이션에 연동할 수 있으므로, 다양한 서비스 개발에 활용해보시기 바랍니다.
참고 자료