差分

このページの2つのバージョン間の差分を表示します。

--- 00.flutter:04.flutter_webでfirestore [2021/05/26] – [Flutter(web)アプリにFirebaseを追加(FirebaseとFlutterアプリの紐付け)] adash333
+++ 00.flutter:04.flutter_webでfirestore [2021/05/26] (現在) – [Firestoreリンク] adash333
@@ 行 123: / 行 123: @@
 次に、web/index.html を開き、下の方の、
 <code>
-<script src="main.dart.js" type="application/javascript"></script>
+<body>
 </code>
-の『直前』に、以下のようなコードを挿入します。”apiKey: …”　のところは、上記のFirebaseのご自身のapiKeyなどに書き換えてください。
+の『直後』に、以下のようなコードを挿入します。”apiKey: …”　のところは、上記のFirebaseのご自身のapiKeyなどに書き換えてください。
 <code>
-   <script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js"></script>
+   <script src="https://www.gstatic.com/firebasejs/8.6.2/firebase-app.js"></script>
-   <script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-firestore.js"></script>
+   <script src="https://www.gstatic.com/firebasejs/8.6.2/firebase-analytics.js"></script>
+   <script src="https://www.gstatic.com/firebasejs/8.6.2/firebase-firestore.js"></script>
   <script>
@@ 行 151: / 行 152: @@
 （変更前）
+{{:00.flutter:pasted:20210526-094123.png}}
+（変更後）
+{{:00.flutter:pasted:20210526-094622.png}}
-（変更後）
+===== Cloud Firestoreにデータ書き込み =====
+以下の本を、Webアプリにしてみてやってみたいと思います。
+<html>
+<a href="https://www.amazon.co.jp/Flutter%C3%97Firebase%E3%81%A7%E5%A7%8B%E3%82%81%E3%82%8B%E3%83%A2%E3%83%90%E3%82%A4%E3%83%AB%E3%82%A2%E3%83%97%E3%83%AA%E9%96%8B%E7%99%BA-%E6%8A%80%E8%A1%93%E3%81%AE%E6%B3%89%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA%EF%BC%88NextPublishing%EF%BC%89-%E4%B8%8B%E7%95%91-%E7%BF%94-ebook/dp/B07LBPRHQD?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=3E3GLWLKUTVY0&dchild=1&keywords=flutter+%E6%9C%AC&qid=1621684419&sprefix=flutter%2Caps%2C299&sr=8-4&linkCode=li2&tag=twosquirrel-22&linkId=61f68c992d76df46ab27b5c4010c840a&language=ja_JP&ref_=as_li_ss_il" target="_blank"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=B07LBPRHQD&Format=_SL160_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=twosquirrel-22&language=ja_JP" ></a><img src="https://ir-jp.amazon-adsystem.com/e/ir?t=twosquirrel-22&language=ja_JP&l=li2&o=9&a=B07LBPRHQD" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
+</html>
+{{:00.flutter:pasted:20210526-095021.png}}
+まずは、開発モードの状態で、以下のように入力します。
+{{:00.flutter:pasted:20210526-102700.png}}
+{{:00.flutter:pasted:20210526-102937.png}}
+===== Cloud Firestoreからのデータ取得 =====
+参考：https://firebase.flutter.dev/docs/firestore/usage
+flutter run して、Flutterアプリを起動します。
+{{:00.flutter:pasted:20210526-104902.png}}
+lib/main.dart　を以下のように変更します。
+<code>
+import 'package:flutter/material.dart';
+// Import the firebase_core and cloud_firestore plugin
+import 'package:firebase_core/firebase_core.dart';
+import 'package:cloud_firestore/cloud_firestore.dart';
+Future<void> main() async {
+  // Fireabse初期化
+  await Firebase.initializeApp();
+  runApp(MyApp());
+}
+class MyApp extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      title: 'かしかりメモ',
+      theme: ThemeData(
+        primarySwatch: Colors.blue,
+      ),
+      home: MyFirestorePage(),
+    );
+  }
+}
+class MyFirestorePage extends StatefulWidget {
+  @override
+  _MyFirestorePageState createState() => _MyFirestorePageState();
+}
+class _MyFirestorePageState extends State<MyFirestorePage> {
+  // 作成したドキュメント一覧
+  List<DocumentSnapshot> documentList = [];
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(title: const Text("かしかりメモ")),
+      body: Center(
+        child: Column(
+          children: <Widget>[
+            ElevatedButton(
+              child: Text('コレクション＋ドキュメント作成'),
+              onPressed: () async {
+                // ドキュメント作成
+                await FirebaseFirestore.instance
+                    .collection('users') // コレクションID
+                    .doc('id_abc') // ドキュメントID
+                    .set({'name': '鈴木', 'age': 40}); // データ
+              },
+            ),
+            ElevatedButton(
+              child: Text('コレクション＋ドキュメント作成2'),
+              onPressed: () async {
+                // ドキュメント作成
+                await FirebaseFirestore.instance
+                    .collection('users') // コレクションID
+                    .doc('id_def') // ドキュメントID
+                    .set({'name': '佐藤', 'age': 55}); // データ
+              },
+            ),
+            ElevatedButton(
+              child: Text('サブコレクション＋ドキュメント作成'),
+              onPressed: () async {
+                // サブコレクション内にドキュメント作成
+                await FirebaseFirestore.instance
+                    .collection('users') // コレクションID
+                    .doc('id_abc') // ドキュメントID << usersコレクション内のドキュメント
+                    .collection('orders') // サブコレクションID
+                    .doc('id_123') // ドキュメントID << サブコレクション内のドキュメント
+                    .set({'price': 600, 'date': '9/13'}); // データ
+              },
+            ),
+            ElevatedButton(
+              child: Text('ドキュメント一覧取得'),
+              onPressed: () async {
+                // コレクション内のドキュメント一覧を取得
+                final snapshot =
+                    await FirebaseFirestore.instance.collection('users').get();
+                // 取得したドキュメント一覧をUIに反映
+                setState(() {
+                  documentList = snapshot.docs;
+                });
+              },
+            ),
+            // コレクション内のドキュメント一覧を表示
+            Column(
+              children: documentList.map((document) {
+                return ListTile(
+                  title: Text('${document['name']}さん'),
+                  subtitle: Text('${document['age']}歳'),
+                );
+              }).toList(),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+</code>
+Ctrl+Sで保存して、ターミナル画面で r を押して、更新します。
+さらに、上から順番にボタンをクリックしていくと、以下のようになります。
+{{:00.flutter:pasted:20210526-114149.png}}
+{{:00.flutter:pasted:20210526-114243.png}}
+なお、82行目が、
+<code>
+documentList = snapshot.docs;
+</code>
+で動いて、
+<code>
+documentList = snapshot.documents;
+</code>
+ではエラーがでて動きませんでした。
@@ 行 162: / 行 307: @@
 Cloud Firestore概要
 →すごく分かりやすいです。お勧め。
+https://qiita.com/Riscait/items/4be06794468d9c13f11e
+@Riscait
+が2020年11月03日に更新
+FlutterFireがアップデートしたからMigration Guideに沿って修正した記録
+→過去の記事のコードを写経して動かなかったときなど、非常に参考になります。
+https://blog.codemagic.io/integrate-firebase-cloud-firestore-with-flutter-perform-crud/
+CRUD operations using Firebase Cloud Firestore and Flutter
+Apr 14, 2021
@@ 行 192: / 行 350: @@
 Firestoreでリアルタイム更新
+https://qiita.com/glassmonkey/items/02639da648b3ed299140
+@glassmonkey
+が2020年03月14日に更新
+Dart(Flutter)における非同期処理入門(Firestoreのデータ取得サンプルつき）