การใช้ Firebase Storage ใน Flutter

การใช้ Firebase Storage ใน Flutter

ในบทเรียนก่อนหน้า เราได้เรียนรู้เกี่ยวกับการใช้ Firebase Firestore สำหรับการจัดเก็บข้อมูลโครงสร้างแบบ NoSQL ในบทนี้ เราจะมาดูอีกหนึ่งบริการที่สำคัญของ Firebase นั่นคือ Firebase Storage ซึ่งใช้สำหรับจัดเก็บไฟล์ต่างๆ เช่น รูปภาพ วิดีโอ หรือไฟล์อื่นๆ ที่จำเป็นสำหรับแอปพลิเคชัน Flutter ของเรา Firebase Storage มีข้อดีคือมีความสามารถในการปรับขนาดได้สูง, มีความปลอดภัย และสามารถเข้าถึงไฟล์ได้อย่างรวดเร็ว

Firebase Storage เป็นบริการพื้นที่เก็บข้อมูลบนคลาวด์ที่มีความยืดหยุ่นและใช้งานง่าย เหมาะสำหรับแอปพลิเคชันที่ต้องการจัดเก็บและเรียกใช้ไฟล์ขนาดใหญ่จากผู้ใช้จำนวนมาก

ทำไมต้องใช้ Firebase Storage?

• Scalability: สามารถรองรับผู้ใช้งานจำนวนมากและปริมาณข้อมูลที่เพิ่มขึ้นได้โดยอัตโนมัติ
• Security: มีระบบรักษาความปลอดภัยที่แข็งแกร่ง โดยใช้ Security Rules เพื่อควบคุมการเข้าถึงไฟล์
• Performance: มี Content Delivery Network (CDN) ในตัว ทำให้การดาวน์โหลดไฟล์เป็นไปอย่างรวดเร็ว
• Integration: ทำงานร่วมกับ Firebase Authentication ได้อย่างราบรื่น ทำให้สามารถควบคุมการเข้าถึงไฟล์ตามสิทธิ์ของผู้ใช้

เริ่มต้นใช้งาน Firebase Storage

ก่อนที่จะเริ่มต้นใช้งาน Firebase Storage ในแอป Flutter ของเรา เราต้องทำการตั้งค่า Firebase Project ให้เรียบร้อยเสียก่อน ซึ่งรวมถึงการเปิดใช้งาน Firebase Storage ใน Firebase Console และเพิ่ม dependency ที่จำเป็นในไฟล์ pubspec.yaml ของโปรเจกต์

1. เพิ่ม Dependency:

dependencies:
  firebase_core: ^2.0.0  # ตรวจสอบเวอร์ชันล่าสุด
  firebase_storage: ^11.0.0 # ตรวจสอบเวอร์ชันล่าสุด

หลังจากเพิ่ม dependency แล้ว อย่าลืมรันคำสั่ง flutter pub get เพื่อดาวน์โหลดและติดตั้ง package ที่จำเป็น

2. Initializing Firebase:

ตรวจสอบให้แน่ใจว่าคุณได้ทำการ Initializing Firebase ในแอปของคุณแล้ว โดยปกติจะทำใน main() function:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Firebase Storage Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Firebase Storage Demo')),
      body: Center(
        child: Text('Firebase Storage Example'),
      ),
    );
  }
}

การอัปโหลดไฟล์ (Upload)

การอัปโหลดไฟล์ไปยัง Firebase Storage เป็นเรื่องง่าย โดยเราสามารถใช้ FirebaseStorage instance และ method putFile() หรือ putData() ขึ้นอยู่กับว่าเราต้องการอัปโหลดไฟล์จาก local storage หรือจาก memory (byte array)

ตัวอย่างการอัปโหลดไฟล์จาก local storage:

import 'dart:io';
import 'package:firebase_storage/firebase_storage.dart' as firebase_storage;
import 'package:path/path.dart' as path;

Future<void> uploadFile(File file) async {
  final firebase_storage.FirebaseStorage storage = firebase_storage.FirebaseStorage.instance;

  String fileName = path.basename(file.path);
  firebase_storage.Reference ref = storage.ref().child('uploads/$fileName'); // สร้าง path สำหรับไฟล์

  try {
    await ref.putFile(file);
    print('File uploaded successfully!');
  } catch (e) {
    print('Error uploading file: $e');
  }
}

ในโค้ดข้างต้น เราทำการสร้าง Reference ซึ่งเป็น path ที่เราต้องการจัดเก็บไฟล์ใน Firebase Storage จากนั้นใช้ putFile() เพื่ออัปโหลดไฟล์ไปยัง path ที่กำหนด

ข้อควรจำ: ต้องมี File object ที่ถูกต้องก่อนทำการ Upload

การดาวน์โหลดไฟล์ (Download)

การดาวน์โหลดไฟล์จาก Firebase Storage ก็สามารถทำได้ง่ายเช่นกัน โดยเราสามารถใช้ getDownloadURL() เพื่อรับ URL ของไฟล์ และใช้ URL นั้นในการแสดงรูปภาพหรือดาวน์โหลดไฟล์

ตัวอย่างการดาวน์โหลด URL ของไฟล์:

Future<String?> getFileDownloadURL(String filePath) async {
  final firebase_storage.FirebaseStorage storage = firebase_storage.FirebaseStorage.instance;
  firebase_storage.Reference ref = storage.ref().child(filePath);

  try {
    String downloadURL = await ref.getDownloadURL();
    return downloadURL;
  } catch (e) {
    print('Error getting download URL: $e');
    return null;
  }
}

ตัวอย่างการแสดงรูปภาพจาก URL ที่ดาวน์โหลดมา:

import 'package:flutter/material.dart';

class ImageFromStorage extends StatefulWidget {
  final String imagePath;

  ImageFromStorage({required this.imagePath});

  @override
  _ImageFromStorageState createState() => _ImageFromStorageState();
}

class _ImageFromStorageState extends State<ImageFromStorage> {
  String? imageUrl;

  @override
  void initState() {
    super.initState();
    loadImage();
  }

  Future<void> loadImage() async {
    imageUrl = await getFileDownloadURL(widget.imagePath);
    setState(() {}); // Rebuild widget after getting the URL
  }

  @override
  Widget build(BuildContext context) {
    return imageUrl == null
        ? CircularProgressIndicator()
        : Image.network(imageUrl!);
  }
}

ในโค้ดข้างต้น เราสร้าง Widget ImageFromStorage ที่รับ imagePath เป็น parameter และใช้ getFileDownloadURL() เพื่อดาวน์โหลด URL ของรูปภาพ จากนั้นใช้ Image.network() เพื่อแสดงรูปภาพ

การลบไฟล์ (Delete)

การลบไฟล์ออกจาก Firebase Storage สามารถทำได้โดยใช้ delete() method บน Reference ของไฟล์

ตัวอย่างการลบไฟล์:

Future<void> deleteFile(String filePath) async {
  final firebase_storage.FirebaseStorage storage = firebase_storage.FirebaseStorage.instance;
  firebase_storage.Reference ref = storage.ref().child(filePath);

  try {
    await ref.delete();
    print('File deleted successfully!');
  } catch (e) {
    print('Error deleting file: $e');
  }
}

Security Rules

Security Rules เป็นส่วนสำคัญในการควบคุมการเข้าถึงไฟล์ใน Firebase Storage โดยเราสามารถกำหนด rules ที่อนุญาตหรือปฏิเสธการเข้าถึงไฟล์ตามเงื่อนไขต่างๆ เช่น สิทธิ์ของผู้ใช้, ประเภทของไฟล์ หรือ metadata ของไฟล์

ตัวอย่าง Security Rules:

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /uploads/{userId}/{fileName} {
      allow read: if request.auth != null; // อนุญาตให้ผู้ใช้ที่ login แล้วอ่านไฟล์
      allow write: if request.auth != null && request.auth.uid == userId; // อนุญาตให้ผู้ใช้ที่ login แล้วและมี userId ตรงกับ path เขียนไฟล์
    }
    match /{allPaths=**} {
      allow read, write: if false; // ปฏิเสธการอ่านและเขียนไฟล์อื่นๆ ทั้งหมด
    }
  }
}

ใน rules ข้างต้น เราอนุญาตให้ผู้ใช้ที่ login แล้วอ่านไฟล์ในโฟลเดอร์ uploads และอนุญาตให้ผู้ใช้ที่ login แล้วและมี userId ตรงกับชื่อโฟลเดอร์ สามารถเขียนไฟล์ได้ Security Rules มีความสำคัญอย่างยิ่งต่อความปลอดภัยของข้อมูลใน Firebase Storage ดังนั้นควรศึกษาและกำหนด rules ให้เหมาะสมกับความต้องการของแอปพลิเคชัน

ข้อควรจำ: Security Rules ต้องถูกทดสอบและปรับปรุงอย่างสม่ำเสมอเพื่อป้องกันช่องโหว่ด้านความปลอดภัย

สรุป

ในบทนี้ เราได้เรียนรู้เกี่ยวกับการใช้ Firebase Storage ใน Flutter ซึ่งรวมถึงการอัปโหลด, ดาวน์โหลด, ลบไฟล์ และการกำหนด Security Rules เพื่อควบคุมการเข้าถึงไฟล์ Firebase Storage เป็นเครื่องมือที่มีประสิทธิภาพสำหรับการจัดเก็บไฟล์ต่างๆ ในแอปพลิเคชัน Flutter ของเรา และช่วยให้เราสามารถสร้างแอปพลิเคชันที่มีความสามารถในการจัดการไฟล์ที่ซับซ้อนได้อย่างง่ายดาย

ในบทเรียนถัดไป เราจะมาเรียนรู้เกี่ยวกับการใช้ Google Maps API ใน Flutter เพื่อเพิ่มความสามารถในการแสดงแผนที่และตำแหน่งที่ตั้งในแอปพลิเคชันของเรา