Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Flutterとfirebaseを使ってモバイルアプリに挑戦してみる
Masaya Nasu
April 02, 2018
Technology
3
2.3k
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
カミナシのフロントエンド開発の効率化の取り組み
nasum
2
150
新参者だけどバーンアウトしかけているチームを立て直す
nasum
21
9.3k
DjangoではじめるGraphQLとフロントエンド開発の協業
nasum
1
2.2k
grpc-gatewayで作るマイクロサービスの管理画面
nasum
1
6.6k
コストをかけずに機械学習の環境を整える&学習環境(人間の)
nasum
0
1.1k
Elixirの好きなところ
nasum
0
280
ElectronでFirebaseを使ってみた(仮)
nasum
2
2.6k
Vue.jsを導入する際失敗したこと
nasum
1
3.8k
はじめてWebサービスを作った話
nasum
0
220
Other Decks in Technology
See All in Technology
ぼくらが選んだ次のMySQL 8.0 / MySQL80 Which We Choose
line_developers
PRO
7
3k
EC/CRMの自社サービス開発をマネジメントするようになって1年でやってきたこととこれから / devio2022-takano-sho-road-to-good-development-team-management
masaru_b_cl
0
430
#awsbasics [LT] サーバレスECにおける Step Functions の使い方
miu_crescent
0
850
eBPFで実現するコンテナランタイムセキュリティ / Container Runtime Security with eBPF
tobachi
PRO
5
1.8k
やってみたLT会 Fleet Managerのススメ
yukiiiiikuma
PRO
0
410
CloudWatchアラームによるサービス継続のための監視入門 / Introduction to Monitoring for Service Continuity with CloudWatch Alarms
inomasosan
1
430
私のAWS愛を聞け!ここが好きだよAmazon FSx for NetApp ONTAP
non97
0
790
品質特性のすすめ
honamin09
0
180
プロダクトマネージャーの役割と育成、評価
middleokada
16
11k
バッファープールが大きいMySQL v5.7でDROP DATABASEが詰まった原因と対策 / Causes and Remedies for DROP DATABASE Stuck in MySQL v5.7 with Large Buffer Pool
line_developers
PRO
4
820
VS Code Meetup #21 - もう一度知りたい基礎編 - ファイル操作、コーディングの基本編
74th
0
200
ログラスを支える技術的投資の仕組み / loglass-technical-investment
urmot
9
1.9k
Featured
See All Featured
Designing on Purpose - Digital PM Summit 2013
jponch
106
5.7k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
151
13k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
223
49k
Put a Button on it: Removing Barriers to Going Fast.
kastner
56
2.3k
The Illustrated Children's Guide to Kubernetes
chrisshort
18
40k
Designing for Performance
lara
597
64k
Building Better People: How to give real-time feedback that sticks.
wjessup
344
17k
Web Components: a chance to create the future
zenorocha
303
40k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
316
19k
Unsuck your backbone
ammeep
659
55k
Git: the NoSQL Database
bkeepers
PRO
415
59k
What's new in Ruby 2.0
geeforr
335
30k
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