Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Flutterとfirebaseを使ってモバイルアプリに挑戦してみる
Search
Masaya Nasu
April 02, 2018
Technology
3
2.9k
Flutterとfirebaseを使ってモバイルアプリに挑戦してみる
Flutterとfirebaseを使ってモバイルアプリを作ろうとしている話。
サンプルコード
https://github.com/nasum/flutter_firebase_playground
Masaya Nasu
April 02, 2018
Tweet
Share
More Decks by Masaya Nasu
See All by Masaya Nasu
What's new in Go 1.23
nasum
0
91
カミナシのフロントエンド開発の効率化の取り組み
nasum
2
290
新参者だけどバーンアウトしかけているチームを立て直す
nasum
21
11k
DjangoではじめるGraphQLとフロントエンド開発の協業
nasum
1
3.4k
grpc-gatewayで作るマイクロサービスの管理画面
nasum
1
7.5k
コストをかけずに機械学習の環境を整える&学習環境(人間の)
nasum
0
1.6k
Elixirの好きなところ
nasum
0
510
ElectronでFirebaseを使ってみた(仮)
nasum
2
3.4k
Vue.jsを導入する際失敗したこと
nasum
1
4.1k
Other Decks in Technology
See All in Technology
Kent Beckの思想と学びの道筋 / 20250517 Ryutaro Yoshiba & Hiromitsu Akiba
shift_evolve
1
400
Slackひと声でブログ校正!Claudeレビュー自動化編
yusukeshimizu
3
120
初参加のハノーバーメッセで感じた世界最大級イベントの熱気とAI活用の未来
hamadakoji
0
210
プラットフォームとしての Datadog / Datadog as Platforms
aoto
PRO
0
230
Type Challengesに新しい問題を追加して Type ChallengesのMaintainerになった話
ysknsid25
3
590
SmartHRの複数のチームにおけるMCPサーバーの活用事例と課題
yukisnow1823
1
530
Things you never dared to ask about LLMs — v2
glaforge
1
350
AWS LambdaでSocket通信サーバーレスアプリケーションのリアルタイム通信 / 20250523 Kumiko Hennmi
shift_evolve
1
210
グループ ポリシー再確認 ③
murachiakira
0
130
主要ライブラリの実例に学ぶ、TypeScriptで実現する型安全な座標定義
tiroljpn
1
210
ITエンジニアを取り巻く環境とキャリアパス / A career path for Japanese IT engineers
takatama
3
1.5k
TypeScriptで実践するクリーンアーキテクチャ ― WebからもCLIからも使えるアプリ設計 / CClean Architecture with Typescript Application
panda_program
11
6.7k
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
Practical Orchestrator
shlominoach
187
11k
Raft: Consensus for Rubyists
vanstee
137
6.9k
Music & Morning Musume
bryan
47
6.5k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
5
600
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
47
2.8k
How to train your dragon (web standard)
notwaldorf
91
6k
Statistics for Hackers
jakevdp
799
220k
Optimizing for Happiness
mojombo
378
70k
Transcript
FlutterͱfirebaseΛ ͬͯϞόΠϧΞϓϦ ʹઓͯ͠ΈΔ Firebase Japan User Group / meetup /
3 ಹਢཧ
ࣗݾհ • ಹਢཧ ීஈRailsͱ͔Ͱ͓ࣄͯ͠·͢ • Twitter : @tomato360 GitHub: @nasum
• Vue.js͕͖
ࢲͱfirebase
ͪΐͬͱલʹগ͠৮ͬͯͨ https://speakerdeck.com/nasum/ electrondefirebasewoshi-tutemita-jia
࠷ֶۙͼͯ͠·͢ श࡞ɿMarkdownEditor https://spellnote.com/
৽͍͠ςʔϚΛࡧத
Flutter
Flutter • Google • ϞόΠϧΞϓϦ։ൃϑϨʔϜϫʔΫ • ΫϩεϓϥοτϑΥʔϜ • Dartʢʂʁ
Flutterͱfirebase͍͍Έ߹Θͤ ʢݸਓͷҙݟ • Flutter • ΫϩεϓϥοτϑΥʔϜ • firebase • αʔόϨε
• ࠷খͷͷΛ࠷Ͱ࡞Εͦ͏ͳΠϝʔδ
༻ײΛ୳ͬͯΈΔ
firebase auth buildscript { repositories { google() jcenter() } dependencies
{ classpath 'com.android.tools.build:gradle:3.0.1' classpath 'com.google.gms:google-services:3.2.0' } } android/build.gradle
firebase auth apply plugin: 'com.google.gms.google-services' android/app/build.gradle
firebase auth import 'package:google_sign_in/google_sign_in.dart'; import 'package:firebase_auth/firebase_auth.dart'; lib/main.dart
firebase auth final FirebaseAuth _auth = FirebaseAuth.instance; final GoogleSignIn _googleSignIn
= new GoogleSignIn(); lib/main.dart
firebase auth void _handleSignIn() async { GoogleSignInAccount googleUser = await
_googleSignIn.signIn(); GoogleSignInAuthentication googleAuth = await googleUser.authentication; FirebaseUser siginUser = await _auth.signInWithGoogle( accessToken: googleAuth.accessToken, idToken: googleAuth.idToken, ); setState(() { user = siginUser; }); } lib/main.dart
firebase auth if (user != null) { displayName = new
Text(user.displayName); email = new Text(user.email); avator = new CircleAvatar(backgroundImage: new NetworkImage(user.photoUrl)); } lib/main.dart
firebase auth
ग़དྷͨը໘
ͪΌΜͱAnalyticsಈ͘
firebase auth • ඞཁͳϥΠϒϥϦ • google_sign_in https://pub.dartlang.org/packages/google_sign_in • firebase_auth https://pub.dartlang.org/packages/firebase_auth
• ίʔυྫ • https://github.com/nasum/flutter_firebase_playground/ commit/66acc51fc6d67258dfb4b0194b3dcac72ff8992a
firebase auth ༻ײ • FirebaseUserͷΠϯελϯεΛ࡞ΕOK • JS൛ͱ༻ײࣅ͍ͯΔ
DartͷϥΠϒϥϦͷϖʔδ
cloud firestore import ‘package:cloud_firestore/cloud_firestore.dart'; QuerySnapshot snapShot = await Firestore.instance.collection(‘memo').getDocuments(); Firestore.instance
.collection('memo') .document() .setData({'text': _inputText}); lib/main.dart
cloud firestore
cloud firestore void _getDocument(List<Widget> list) async { QuerySnapshot snapShot =
await Firestore.instance.collection('memo').getDocuments(); setState(() { snapShot.documents.forEach((DocumentSnapshot ds) { SizedBox box = new SizedBox( width: 300.0, height: 50.0, child: new Card(child: new Text(ds.data['text'])), ); list.add(box); }); }); } lib/main.dart
ग़དྷͨը໘
cloud firestore
cloud firestore
cloud firestore • ඞཁͳϥΠϒϥϦ • cloud_firestore https://pub.dartlang.org/packages/cloud_firestore • ίʔυྫ https://github.com/nasum/
flutter_firebase_playground/commit/ 16960fb4ceafe0f1ed5bc85eb388a722e4739079
cloud firestoreײ • ༻ײJSͷͱࣅ͍ͯΔ • ࠷৽ͷ0.3.2Λ͏ͱίϯύΠϧग़དྷͳ͍ ʢཁௐࠪ • Ή͠ΖFlutterͷঢ়ଶཧͰۤ࿑ͨ͠
·ͱΊ • JSಉ༷ʹDart൛ָʹ͑Δ • FlutterͱDartʹ׳Εͳͯۤ͘࿑ͨ͠ʢ׳Εͷ • ΫϩεϓϥοτϑΥʔϜͱαʔόϨε࠷ڧͳؾ ͕͍ͯ͠Δ • ΞϓϦΛͭ͘Γ͍ͨਓʹ͓קΊ͍ͨ͠Έ߹Θͤ
αϯϓϧίʔυ • https://github.com/nasum/flutter_firebase_playground