内容へ移動
サルでもわかるWEBプログラミング
フリーソフトのみでホームページ作成
ユーザ用ツール
ログイン
サイト用ツール
検索
ツール
文書の表示
以前のリビジョン
バックリンク
最近の変更
メディアマネージャー
サイトマップ
ログイン
>
最近の変更
メディアマネージャー
サイトマップ
現在位置:
index.html
»
00.flutter
»
04.flutter_webでfirestore
トレース:
00.flutter:04.flutter_webでfirestore
この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
====== 04.flutter_webでfirestore ====== {{tag>flutter Flutter_for_Web firebase firestore}} ---//2020/01/07 更新// [[00.flutter:index.html|スマホアプリ作成フレームワークFlutter目次]] https://i-doctor.sakura.ne.jp/font/?p=42233 『Flutter×Firebaseで始めるモバイルアプリ開発』をWEBアプリにして写経してみる(3)Firebaseの設定と一覧画面 2020年1月4日 ===== 開発環境 ===== <code> Panasonic CF-QV Windows 10 Pro (1909) git version 2.29.2.windows.2 Chrome flutter_windows_2.2.0-stable VisualStudioCode 1.55.2 VisualStudioCodeのExtensions(拡張機能)『Flutter(dart-code.fultter)』 </code> {{:00.flutter:pasted:20210526-090729.png}} 今回入れるFlutterプラグイン FlutterFire https://firebase.google.com/docs/flutter/setup?hl=ja Flutter アプリに Firebase を追加する https://firebase.flutter.dev/docs/firestore/usage/ Cloud Firestore ===== 流れ ===== https://i-doctor.sakura.ne.jp/font/?p=42522 FlutterのCloud FirestoreパッケージがWEB対応したので使ってみる 2020年4月19日 -新規Flutter(web)アプリの作成 -新規Firebaseプロジェクトの作成 -Flutter(web)アプリにFirebaseを追加(FirebaseとFlutterアプリの紐付け)(pubspec.yaml、web/index.html、lib/main.dart) -Cloud Firestoreにデータ書き込み -Cloud Firestoreからのデータ取得 https://firebase.flutter.dev/docs/firestore/overview/ 2021年5月以降、Flutter2.2以降は、新規Flutterアプリを作成すると、自動的にNull safetyとなります。 ===== 新規Flutter(web)アプリの作成 ===== https://i-doctor.sakura.ne.jp/font/?p=46146 Windows10にFlutter2.2をインストールしてFultterWebを試してみる(2021年5月版) 2021年5月22日 <code> flutter create flutter2_firestore </code> {{:00.flutter:pasted:20210526-080128.png}} <code> cd flutter2_firestore flutter run </code> {{:00.flutter:pasted:20210526-080240.png}} ターミナル画面で q を押すと、Chromeが閉じます。 ===== 新規Firebaseプロジェクトの作成 ===== 下のサイトに従って、 https://console.firebase.google.com/ から、新規Firebaseアプリを作成します。 今回は、kasi という名前のFirebaseプロジェクトを作成しました。 https://www.flutter-study.dev/firebase/cloud-firestore Cloud Firestore概要 →すごく分かりやすいです。 {{:00.flutter:pasted:20210526-085136.png}} {{:00.flutter:pasted:20210526-091411.png}} {{:00.flutter:pasted:20210526-091458.png}} この中の部分をメモ帳などにコピーしておきます。 ここの、 <code> var firebaseConfig = { apiKey: "xxxxxxxxxxxxx", authDomain: "xxxxxxxxxxx", ..... } </code> の部分をコピーしておきます。 ===== Flutter(web)アプリにFirebaseを追加(FirebaseとFlutterアプリの紐付け) ===== Flutterアプリの、pubspec.yaml、web/index.html、lib/main.dart を書き換えます。 参考:https://www.flutter-study.dev/firebase/cloud-firestore-try https://firebase.flutter.dev/docs/firestore/overview/ の、Null safetyで行きます。 pubspec.yaml <code> dependencies: flutter: sdk: flutter firebase_core: "^1.2.0" cloud_firestore: "^2.2.0" </code> (変更前) {{:00.flutter:pasted:20210526-092138.png}} (変更後) {{:00.flutter:pasted:20210526-092634.png}} pubspec.yamlを変更して保存すると、VisualStudioCodeでは、自動的にFlutterアプリにfirebase_core, cloud_firestoreが自動的にインストールされます。 次に、web/index.html を開き、下の方の、 <code> <body> </code> の『直後』に、以下のようなコードを挿入します。”apiKey: …” のところは、上記のFirebaseのご自身のapiKeyなどに書き換えてください。 <code> <script src="https://www.gstatic.com/firebasejs/8.6.2/firebase-app.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> // TODO: Replace the following with your app's Firebase project configuration. // See: https://support.google.com/firebase/answer/7015592 var firebaseConfig = { apiKey: "...", authDomain: "[YOUR_PROJECT].firebaseapp.com", databaseURL: "https://[YOUR_PROJECT].firebaseio.com", projectId: "[YOUR_PROJECT]", storageBucket: "[YOUR_PROJECT].appspot.com", messagingSenderId: "...", appId: "1:...:web:...", measurementId: "G-..." }; // Initialize Firebase firebase.initializeApp(firebaseConfig); </script> </code> 実際には、以下のようになります。 (変更前) {{: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> ではエラーがでて動きませんでした。 ===== Firestoreリンク ===== https://www.flutter-study.dev/firebase/cloud-firestore 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 ===== FutureBuilder ===== https://blog.dalt.me/1652 【Flutter】それ、FutureBuilderだったら綺麗に書けるよ? 2020.6.1 https://bukiyo-papa.com/futurebuilder/ 【Flutter】FutureBuilderの基本とサンプルコード 投稿日2019年11月28日 著者 たかお https://bukiyo-papa.com/futurebuildersample/ 【Flutter】FutureBuilder サンプルコード【入門】 投稿日2019年11月28日 著者 たかお https://corgi-lab.com/programming/flutter/flutter-futurebuilder/ 【Flutter】FutureBuilderで非同期にWidgetを生成する 2020年4月5日 https://qiita.com/edasan/items/f119a40434ec1cd61d21 @edasan が2020年09月02日に作成 FlutterでFirestoreのデータをFutureBuilderを使って非同期で取得する https://www.flutter-study.dev/firebase-app/firestore-stream/ Firestoreでリアルタイム更新 https://qiita.com/glassmonkey/items/02639da648b3ed299140 @glassmonkey が2020年03月14日に更新 Dart(Flutter)における非同期処理入門(Firestoreのデータ取得サンプルつき) ===== 参考リンク ===== https://firebase.flutter.dev/docs/overview 公式サイト {{:00.flutter:pasted:20210523-032858.png}} https://qiita.com/yusuke_vp/items/e446edee3a4156ac9b87 {{:00.flutter:pasted:20210523-032002.png}} https://zenn.dev/kazutxt/books/flutter_practice_introduction/viewer/firebase_firestore Chapter 31 Firebase編3:Firestore kazutxt https://www.flutter-study.dev/firebase/cloud-firestore-try/ Cloud Firestoreを使ってみる https://qiita.com/smiler5617/items/8dcf720f5477a5f4b7d7 @smiler5617 が2021年04月07日に更新 FlutterからCloud Firestoreのデータ取得 & データ書き込み https://dev.to/happyharis/flutter-web-firestore-crud-3p17 Flutter Web: Firestore CRUD happyharis 2020年9月16日 ===== リンク ===== 目次:[[00.flutter:index.html|スマホアプリ作成フレームワークFlutter]] 前:[[00.flutter:03.dart言語|03 Dart言語]]
00.flutter/04.flutter_webでfirestore.txt
· 最終更新: 2021/05/26 by
adash333
ページ用ツール
文書の表示
以前のリビジョン
バックリンク
文書の先頭へ