Zobrazit zdroj

[[Category:VSE]][[Category:Informatika]][[Category:Programování]][[Category:Flutter]]

Pro trvalé uložení dat i po vypnutí aplikace můžeme data uložit:
* na lokální disk konkrétního zařízení
* do síťového úložiště (databáze, cloudové úložiště)
* můžeme rozdělit aplikaci na frontend a backend, kde data budou uložena v&nbsp;backendu (opět obvykle v&nbsp;databázi).

Následuje několik příkladů možných řešení.

== Lokální export: jsonEncode/jsonDecode ==

=== Vlastnosti ===
* Formát JSON lze zpracovávat i v dalších aplikacích – je vhodný pro výměnu dat mezi aplikacemi a je textový.
* Jednoduše lze uložit seznam objektů. Složitější vnořované struktury objektů je třeba ručně převádět.
* Není vhodné pro větší objem dat – převod na text může zvětšit objem dat.
* Vhodné zejména pro textová data: texty, celá čísla, logické hodnoty. Méně vhodné pro desetinná čísla, obrázky, ... z důvodu nutné konverze na text.
* Formát JSON neukládá datové typy.
* Výsledek je uložen lokálně – převod z mobilní aplikace na desktop apod. je třeba řešit ručně.

=== Postup zápisu ===
# Nalezení umístění souboru:
#* Využij balíček <code>path_provider</code> a metodu <code>getApplicationDocumentsDirectory()</code>.
#* Pro zápis do souboru použij třídu <code>File</code> a metodu <code>writeAsString</code>.
# Převod dat na JSON
#* Využij balíček <code>dart:convert</code>.
#* Pro parsování JSON využij metodu <code>jsonDecode(list)</code> – výsledkem bude textová reprezentace objektu ve formátu JSON.

=== Postup čtení ===
# Nalezení umístění souboru:
#* Využij balíček <code>path_provider</code> a metodu <code>getApplicationDocumentsDirectory()</code>.
#* Pro čtení souboru použij třídu <code>File</code> a metodu <code>readAsString</code>.
# Převod dat na JSON
#* Využij balíček <code>dart:convert</code>.
#* Pro ukládání využij metodu <code>jsonEncode(list)</code> – výsledkem bude textová reprezentace objektu ve formátu JSON.

=== Ukázka použití v aplikaci ===
 import 'dart:io';
 import 'package:flutter/material.dart';
 import 'package:path_provider/path_provider.dart';
 import 'dart:convert';
 
 void main() {
   runApp(const MyApp());
 }
 
 class MyApp extends StatelessWidget {
   const MyApp({super.key});
 
   @override
   Widget build(BuildContext context) {
     return MaterialApp(
       title: 'Úložiště Demo',
       home: HomePage('''storage: FileStorage()'''),
     );
   }
 }
 
 class Zaznam {
   final String jmeno;
   final int pocet;
 
   const Zaznam({ required this.jmeno, required this.pocet, }); 
 
   // Převod do JSON
   '''Map<String, dynamic> toJson() => {'''
     'jmeno': jmeno,
     'pocet': pocet,
   };
 
   // Obnov z JSON
   '''factory Zaznam.fromJson(Map<String, dynamic> json) {'''
     return Zaznam(
       jmeno: (json['jmeno']),
       pocet: json['pocet'] as int,
     );
   }
 }
 
 /// Práce se soubory
 '''class FileStorage {'''
   '''Future<String> get _localPath''' async {
     final directory = await getApplicationDocumentsDirectory();
     return directory.path;
   }
 
   '''Future<File> get _localFile''' async {
     final path = await _localPath;
     return File('$path/data.txt');
   }
 
   '''Future<String> readFile()''' async {
     final file = await _localFile;
     return file.readAsString();
   }
 
   '''Future<void> writeFile(String content)''' async {
     final file = await _localFile;
     await file.writeAsString(content);
   }
 }
 
 /// Stav aplikace včetně zápisu do souboru
 class HomePage extends StatefulWidget {
   final FileStorage storage;
   const HomePage('''{required this.storage}''');
   @override
   State<HomePage> createState() => _HomePageState();
 }
 
 class _HomePageState extends State<HomePage> {
   List<Zaznam> _seznam = [];
 
   @override
   void initState() {
     super.initState();
     '''_loadData();'''   // Načtení dat při startu
   }
 
   '''Future<void> _loadData() async {'''
     try {
       final jsonString = await widget.storage.readFile();
       final List<dynamic> decoded = jsonDecode(jsonString);
       setState(() {
         _seznam = decoded
             .map((item) => Zaznam.fromJson(item as Map<String, dynamic>))
             .toList();
       });
     } catch (e) {
       TODO: Zobraz chybové hlášení vhodným způsobem.
     }
   }
 
   '''Future<void> _saveData() async {'''
     final jsonString = jsonEncode(
       _seznam.map((z) => z.toJson()).toList()
     );
     await widget.storage.writeFile(jsonString);
   }
 
   void _addRecord() {
     setState(() {
       _seznam.add(Zaznam(
         jmeno: 'Josef',
         pocet: 1000,
       ));
     });
     '''_saveData();'''
   } 
 
   @override
   Widget build(BuildContext context) {
     return Scaffold(
       // ... vytvoř GUI
     );
   }
 }

=== Tip ===
* Pro větší objemy dat či komplexnější data lze pro export do formátu JSON využít balíček <code>json_serializable</code>.

=== Zdroje ===
* [https://hatchjs.com/list-to-json-flutter/ HatchJS.com > How to Convert a List to JSON in Flutter]
* [https://docs.flutter.dev/data-and-backend/serialization/json Flutter Docs > JSON and serialization]
* [https://docs.flutter.dev/cookbook/persistence/reading-writing-files Flutter Docs > Read and write files]



== Lokální databáze: Hive ==

* Data ukládá binárně, ale stále na lokální zařízení.

=== Zdroje ===
* [https://medium.com/@ChanakaDev/hive-vs-shared-preferences-10353068a8a6 Medium.com: ChanakaDev > Hive vs. Shared Preferences]



== Google Firestore ==

* Cloud Firestore je cloudová NoSQL databáze od Google, která je součástí platformy Google Firebase. 

=== Vlastnosti Cloud Firestore ===

; Výhody a nevýhody
* Firebase je dobře integrovaná do frameworku Flutter (Flutter také vyvíjí Google)
* Data se ukládají do cloudu – data může sdílet mobilní i webová aplikace
* Synchronizace dat v reálném čase
* Pro přístup k&nbsp;datům je potřeba připojení k&nbsp;internetu
* Pro malé projekty stačí varianta zdarma (pro větší bude třeba platit)

; Struktura dat ve Firestore
* Data se neukládají do entit jako u ER databází – spíše jako několik seznamů objektů.

Pojmy
* Dokument (Document) ... konkrétní záznam (jako jeden řádek v databázi) – například údaje o jednom uživateli.
* Pole (Field) ... konkrétní hodnota (atribut) – například jméno uživatele
* Kolekce (Collection) ... odpovídá entitě v ER databázích – je to vlastně seznam dokumentů
* Databáze (Database) ... skupina souvisejících kolekcí
* Projekt (Project) ... jeden projekt obvykle odpovídá jednomu softwarovému produktu. Může zahrnovat různé podoby jedné aplikace:
** IOS
** Android
** webová aplikace
** Unity
** Flutter multiplatformní aplikace

Příklad:
 users (kolekce)
    └── user1 (dokument)
          ├── name: "Jan"
          ├── age: 18
          └── email: "jan@email.cz"

=== Nastavení projektu pro Firebase===

; Založení projektu na webu Firebase
#Jdi na: [https://console.firebase.google.com Console.firebase.google.com]
#Klikni na Vytvořit projekt a zadej název projektu
#Po vytvoření přidej aplikaci (Android / iOS / Web)

; Instalace FlutterFire CLI
# Nainstaluj Firebase CLI podle [https://firebase.google.com/docs/cli návodu z&nbsp; Firebase.google.com > CLI]
#* Bude nejspíš vyžadovate heslo správce počítače.
# Přihlaš se: <code>firebase login</code>
#* Musíš rozhodnout, jestli budeš využívat Google Gemini v rámci Firebase a jestli může Google využívat statistická data.
#* Zvolíš účet Google, pod kterým budeš pracovat
#* Ověř funkčnost pomocí: <code>firebase projects:list</code> – mělo by vypsat seznam založených projektů
# Založ projekt ve Flutteru jako obvykle
# Ve složce projektu spusť aktivaci FlutterFire CLI:
#: <code>dart pub global activate flutterfire_cli</code>
#: <code>flutterfire configure --project='''nazev-projektu'''</code>
#: Do projektu tím přibude konfigurační soubor: <code>lib/firebase_options.dart</code>

<!-- Podle ChatGPT – ale neodpovídá návodu na Firebase:
Ve Flutter projektu spusť:

 flutter pub add firebase_core
 flutter pub add cloud_firestore
-->

; Inicializuj Firebase v main.dart:
 import 'package:firebase_core/firebase_core.dart';
 import 'firebase_options.dart';
 
 // ...
 
 await Firebase.initializeApp(
     options: DefaultFirebaseOptions.currentPlatform,
 );
<!-- Původní podle ChatGPT
 import 'package:firebase_core/firebase_core.dart';
 import 'package:flutter/material.dart';
 
 void main() async {
   WidgetsFlutterBinding.ensureInitialized();
   await Firebase.initializeApp();
   runApp(MyApp());
 }
-->

; Další plug-iny importuj dle potřeby viz dále

=== Import Firestore ===

Import:

 import 'package:cloud_firestore/cloud_firestore.dart';

Vytvoření instance pro přístup k databázi:

 final FirebaseFirestore db = FirebaseFirestore.instance;

=== Přidání nového dokumentu ===
 await db.collection('users').add({
   'name': 'Jan',
   'age': 18,
   'email': 'jan@email.cz',
 });

Tím se:
# vytvoří kolekce users (pokud neexistuje)
# přidá nový dokument s automatickým ID

; Uložení dokumentu s vlastním ID
 await db.collection('users').doc('student1').set({
   'name': 'Petra',
   'age': 17,
 });

=== Čtení dat z Firestore jednorázově===

 var snapshot = await db.collection('users').get();
 
 for (var doc in snapshot.docs) {
   print(doc.data());
 }

=== Čtení v reálném čase ===

Firestore umožňuje poslouchat změny. Data se pak automaticky aktualizují, pokud proběhne změna v databázi (například z jiného zařízení připojeného ke stejnému projektu):

 StreamBuilder(
   stream: db.collection('users').snapshots(),
   builder: (context, snapshot) {
     if (!snapshot.hasData) {
       return CircularProgressIndicator();
     }
 
     var docs = snapshot.data!.docs;
 
     return ListView(
       children: docs.map((doc) {
         return ListTile(
           title: Text(doc['name']),
         );
       }).toList(),
     );
   },
 );

=== Aktualizace dat===
 await db.collection('users').doc('student1').update({
   'age': 18,
 });

=== Smazání dat===

; Smazání dokumentu
 await db.collection('users').doc('student1').delete();

=== Bezpečnostní pravidla (Rules) ===

Ve Firebase konzoli nastav pravidla přístupu.

Například pouze pro přihlášené uživatele:

 rules_version = '2';
 service cloud.firestore {
   match /databases/{database}/documents {
     match /{document=**} {
       allow read, write: if request.auth != null;
     }
   }
 }

=== Zdroje ===
* Základ sekce o Firebase byl vytvořen pomocí služby [https://www.chatgpt.com ChatGPT].
* [https://console.firebase.google.com/ Console.firebase.google.com > Postup nastavení projektu]
* [https://www.youtube.com/playlist?list=PLl-K7zZEsYLluG5MCVEzXAQ7ACZBCuZgZ YouTube.com > Get to know Cloud Firebase] (seriál videí)
* [https://cloud.google.com/firestore/pricing Google Cloud > Firestore Pricing]

== Vlastní backend: ServerPod ==

* Framework, který umožňuje vytvořit projekt Flutteru se dvěma částmi: backendem a frontendem.
* Backend je následně možné spustit na svém serveru.
* Frontend běží na desktopu.