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
Firebaseで 楽しく Webアプリ開発
Search
TakeshiNishi
July 20, 2019
Technology
0
2.4k
Firebaseで 楽しく Webアプリ開発
FUKUOKA Engineers Day 2019 ~Summer~コミュニティスポンサーFukuoka.Firebaseの紹介スライドです。
TakeshiNishi
July 20, 2019
Tweet
Share
More Decks by TakeshiNishi
See All by TakeshiNishi
LT駆動開発 - 話題のChatGPTで何か作る
takec24
0
150
成長ステージ別のスタートアップ集結!「事業の魅力とチームの本音」
takec24
0
80
Developing FLAPTALK by Firebase
takec24
1
340
NuxtCompositionAPIとFirebaseの話
takec24
1
490
コロナ禍でもリモート案件を途切れさせない! 案件の獲得方法とリモート案件の進め方。
takec24
0
310
フロントエンドエンジニアのためのFirebaseサーバーレス開発徹底解説
takec24
0
1.1k
スタートアップで働くというエンジニアキャリア
takec24
1
1.1k
人生を変えた炎上ブロジェクト
takec24
0
1.4k
好きなことを選び続けたら代表取締役CTOになりました。
takec24
2
1.2k
Other Decks in Technology
See All in Technology
飲食店データの分析事例とそれを支えるデータ基盤
kimujun
0
180
AWS Lambdaと歩んだ“サーバーレス”と今後 #lambda_10years
yoshidashingo
1
180
Zennのパフォーマンスモニタリングでやっていること
ryosukeigarashi
0
160
インフラとバックエンドとフロントエンドをくまなく調べて遅いアプリを早くした件
tubone24
1
430
OS 標準のデザインシステムを超えて - より柔軟な Flutter テーマ管理 | FlutterKaigi 2024
ronnnnn
1
280
AWS Media Services 最新サービスアップデート 2024
eijikominami
0
200
The Role of Developer Relations in AI Product Success.
giftojabu1
0
140
Why App Signing Matters for Your Android Apps - Android Bangkok Conference 2024
akexorcist
0
130
OCI Security サービス 概要
oracle4engineer
PRO
0
6.5k
[CV勉強会@関東 ECCV2024 読み会] オンラインマッピング x トラッキング MapTracker: Tracking with Strided Memory Fusion for Consistent Vector HD Mapping (Chen+, ECCV24)
abemii
0
230
Amazon CloudWatch Network Monitor のススメ
yuki_ink
1
210
生成AIが変えるデータ分析の全体像
ishikawa_satoru
0
170
Featured
See All Featured
Producing Creativity
orderedlist
PRO
341
39k
Designing Experiences People Love
moore
138
23k
Imperfection Machines: The Place of Print at Facebook
scottboms
265
13k
Bash Introduction
62gerente
608
210k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
Happy Clients
brianwarren
98
6.7k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Adopting Sorbet at Scale
ufuk
73
9.1k
Speed Design
sergeychernyshev
25
620
Intergalactic Javascript Robots from Outer Space
tanoku
269
27k
Transcript
'JSFCBTFͰ ָ͘͠ 8FCΞϓϦ։ൃ #edayfuk #fukuokafirebase
࢙ גࣜձࣾEJ⒎FBTZ औక$50 !@UBLFTIJ@ 'JSFCBTF 7VF 3VCZ ($1 ϒϩοΫνΣʔϯ EPDLFS
/VYU Թઘ ϥϯχϯά Ωϟϯϓ ম
8IBUJT'JSFCBTF #edayfuk #fukuokafirebase Google͕ఏڙ͢ΔBaaS(Backend as a Service) 2011ʹFirebase, Inc.ʹΑͬͯ։ൃ 2014ʹGoogleʹങऩ
όοΫΤϯυ ϑϩϯτΤϯυ #edayfuk #fukuokafirebase 8IBUJT'JSFCBTF
#edayfuk #fukuokafirebase 8IBUJT'JSFCBTF
#edayfuk #fukuokafirebase 8IBUJT'JSFCBTF
#edayfuk #fukuokafirebase 8IBUJT'JSFCBTF
8IBUJT'JSFCBTF
None
"CPVU'VLVPLB'JSFCBTF #edayfuk #fukuokafirebase ԬͰFirebaseΛΓ্͍͛ͨʂ FirebaseͬͯΈ͍ͨɺҰॹʹษڧ͍ͨ͠ͱ͍͏ؾ࣋ͪΛେࣄʹʂ
Staff of Fukuoka.Firebase... #edayfuk #fukuokafirebase #fukuokafirebase
LTձ͘͘ձΛ։࠵ #edayfuk #fukuokafirebase
LTձ͘͘ձΛ։࠵ #edayfuk #fukuokafirebase
#edayfuk #fukuokafirebase
Advance questionnaire
'JSFCBTFͬͯԿʁ 'JSFCBTF৮ͬͯΈͨʙʂ 'JSFCBTFͬͯര։ൃͯ͠Έͨʙʂʂ ۀͰ'JSFCBTFͬͯΈΑ͏͔ͳʙʂʂʂ The purpose of Fukuoka.Firebase...
Fukuoka.Firebase http://ur0.link/J3V6 Firebase Japan User Group http://ur0.link/Rfym Communication Fukuoka.Firebase... #edayfuk
#fukuokafirebase
'JSFCBTFͰ 8FCΞϓϦ։ൃ ͬͯΈΑ͏ʂ #edayfuk #fukuokafirebase
'JSFCBTFͰ8FCΞϓϦ։ൃ wϦΞϧλΠϜνϟοτΞϓϦ wϝʔϧύεϫʔυೝূ wϓϩϑΟʔϧը૾Ξοϓϩʔυ #edayfuk #fukuokafirebase
·ͣ'JSFCBTFͷ༻ҙ #edayfuk #fukuokafirebase
#edayfuk #fukuokafirebase ϑϩϯτΤϯυ/VYUKTΛར༻
#edayfuk #fukuokafirebase $ yarn add firebase vuexfire --save pSFCBTFɺWVFYpSFΛΠϯετʔϧ /VYUKTͱ'JSFCBTFͷ࿈ܞ
FB_API_KEY=AIzaSyCLfAUɾɾɾ FB_AUTH_DOMAIN=wacha-ɾɾɾ.firebaseapp.com FB_DATABASE_URL=https://wacha-ɾɾɾ.firebaseio.com FB_PROJECTID=wacha-ɾɾɾ FB_STORAGE_BUCKET=wacha-ɾɾɾ.appspot.com FB_MESSAGING_SENDER_ID=3985ɾɾɾ औಘͨ͠BQJLFZͳͲΛFOWʹهࡌ
ᶃϢʔβʔೝূ"VUIFOUJDBUJPO Firebase Authentication ʹϢʔβʔೝূͷΈ͕ఏڙ /VYUKTͱ'JSFCBTFͷ࿈ܞ #edayfuk #fukuokafirebase
ᶃϢʔβʔೝূ"VUIFOUJDBUJPO firebase .auth() .createUserWithEmailAndPassword(email, password) firebase .auth() .signInWithEmailAndPassword(email, password)
ΞΧϯτొ ϩάΠϯ firebase.auth().currentUser ϩάΠϯதΞΧϯτऔಘ /VYUKTͱ'JSFCBTFͷ࿈ܞ #edayfuk #fukuokafirebase
ᶄϦΞϧλΠϜσʔλϕʔε$MPVE'JSFTUPSF Vuex VuexFire Firestore /VYUKTͱ'JSFCBTFͷ࿈ܞ #edayfuk #fukuokafirebase
ᶄϦΞϧλΠϜσʔλϕʔε ͭͷσʔλϕʔε͕ఏڙ͞Ε͍ͯΔ 3FBMUJNF%BUBCBTF $MPVE'JSFTUPSF ʻ ΫΤϦͷॊೈੑ ιʔτͷॊೈੑ બ /VYUKTͱ'JSFCBTFͷ࿈ܞ #edayfuk
#fukuokafirebase
ᶄϦΞϧλΠϜσʔλϕʔε$MPVE'JSFTUPSF const messagesRef = db.collection(‘messages’) await messagesRef.add({ pairUid: data.pairUid, uid:
data.uid, text: data.text, time: Date.now() }) σʔλొ /VYUKTͱ'JSFCBTFͷ࿈ܞ #edayfuk #fukuokafirebase
ᶄϦΞϧλΠϜσʔλϕʔε$MPVE'JSFTUPSF σʔλొొ͞ΕͨσʔλΛ֬ೝ /VYUKTͱ'JSFCBTFͷ࿈ܞ #edayfuk #fukuokafirebase
ᶄϦΞϧλΠϜσʔλϕʔε$MPVE'JSFTUPSF const messagesRef = db.collection(‘messages’) export const state = ()
=> ({ messages: [], }) await bindFirebaseRef( 'messages', messagesRef .where('pairUid', '==', pairUid) .orderBy('time', 'desc') ) σʔλݕࡧ /VYUKTͱ'JSFCBTFͷ࿈ܞ #edayfuk #fukuokafirebase
ᶄϦΞϧλΠϜσʔλϕʔε$MPVE'JSFTUPSF const messagesRef = db.collection(‘messages’) await messagesRef .doc(id) .update({ text:
data.text }) σʔλߋ৽ /VYUKTͱ'JSFCBTFͷ࿈ܞ #edayfuk #fukuokafirebase
ᶅετϨʔδ$MPVE4UPSBHF const storage = firebase.storage() const storageRef = storage.ref() const
avatarRef = storageRef .child('avatar/' + data.name) await avatarRef.put(data.file) ετϨʔδʹϑΝΠϧΛอଘ /VYUKTͱ'JSFCBTFͷ࿈ܞ #edayfuk #fukuokafirebase
ᶅετϨʔδ$MPVE4UPSBHF ετϨʔδʹϑΝΠϧΛอଘϑΝΠϧΛ֬ೝ /VYUKTͱ'JSFCBTFͷ࿈ܞ #edayfuk #fukuokafirebase
ᶅετϨʔδ$MPVE4UPSBHF const storage = firebase.storage() const storageRef = storage.ref() const
avatarUrl = await storageRef .child('avatar/' + user.avatar) .getDownloadURL() ετϨʔδͷϑΝΠϧΛμϯϩʔυ /VYUKTͱ'JSFCBTFͷ࿈ܞ #edayfuk #fukuokafirebase
ᶆϗεςΟϯά)PTUJOH pSFCBTFUPPMTΛΠϯετʔϧ $ yarn global add firebase-tools $ firebase
init pSFCBTFϓϩδΣΫτͷॳظԽ /VYUKTͱ'JSFCBTFͷ࿈ܞ #edayfuk #fukuokafirebase
ᶆϗεςΟϯά)PTUJOH )PTUJOHΛબ /VYUKTͱ'JSFCBTFͷ࿈ܞ #edayfuk #fukuokafirebase
ᶆϗεςΟϯά)PTUJOH ࡞ͨ͠ϓϩδΣΫτΛબ YYYYYYY YYYYYYY YYYYYYYYYYYYYYY YYYYYYY YYYYYYYYYYYYYYY YYYYYYY /VYUKTͱ'JSFCBTFͷ࿈ܞ
#edayfuk #fukuokafirebase
ᶆϗεςΟϯά)PTUJOH σϓϩΠ $ firebase deploy /VYUKTͱ'JSFCBTFͷ࿈ܞ #edayfuk #fukuokafirebase
ᶆϗεςΟϯά)PTUJOH 'JSFCBTFͷϗεςΟϯάʹ ɹσϓϩΠ͞ΕΔ /VYUKTͱ'JSFCBTFͷ࿈ܞ #edayfuk #fukuokafirebase
wϑϩϯτΤϯυͷ։ൃͷΈͰɺϢʔβʔೝূɺϦΞϧ λΠϜσʔλϕʔεɺετϨʔδͷϑΝΠϧอଘͳ ͲΞϓϦʹඞཁͳػೳʂ w؆୯ͳνϟοτΞϓϦ50%0ΞϓϦϨϕϧͰ͋Ε ेͳػೳɻ wΦϑϥΠϯͰ։ൃͰ͖ͳ͍ɻ։ൃڥͲ͏͢Δ͔ʁ w͍Ͳ͜Ζ৻ॏʹݕ౼ʂҰ෦ʹར༻ͳͲ͋Γɻ 'JSFCBTF࣮ࡍͲ͏ͳͷʁ #edayfuk #fukuokafirebase
wΫΤϦ͕ශऑ ✴03ݕࡧෆՄɻΞϓϦͰΫΤϦ݁ՌΛ݁߹ɻ ✴ൣғൺֱϑΟϧλ ͕͋Δ߹ɺ࠷ॳͷฒ ସ͑ಉ͡ϑΟʔϧυͰߦ͏ɻ citiesRef .where("population", ">",
100000) .orderBy("population") 'JSFCBTF࣮ࡍͲ͏ͳͷʁ #edayfuk #fukuokafirebase
✴લํҰகݕࡧՄೳɻ෦ҰகɺޙํҰகෆՄɻ ref.collection('user') .orderBy('name') .startAt('') .endAt(''+'\uf8ff') 'JSFCBTF࣮ࡍͲ͏ͳͷʁ #edayfuk #fukuokafirebase
wσʔλͷઃܭ͕େࣄ ඇਖ਼نԽ wϚΠάϨʔγϣϯେม ઌ΄ͲͷΞϓϦͷྫ ɾ"͞ΜͷҰཡදࣔ༻σʔλ ɾ#͞ΜͷҰཡදࣔ༻σʔλ JOEFYFE1BJS\ \VJE" UBSHFU#
QBJS*E^ \VJE# UBSHFU" QBJS*E^ \VJE" UBSHFU$ QBJS*E^ \VJE$ UBSHFU" QBJS*E^ \VJE# UBSHFU$ QBJS*E^ ɾɾɾ 'JSFCBTF࣮ࡍͲ͏ͳͷʁ #edayfuk #fukuokafirebase
w'JSFCBTFͷઃఆΛؒҧ͑ͯ࣌ؒͰສԁҎ্ٻ ͞Εͨྫɾɾɾ 'JSFCBTF࣮ࡍͲ͏ͳͷʁ #edayfuk #fukuokafirebase
#edayfuk #fukuokafirebase FirebaseͬͯΈ͍ͨํɺ͢Ͱʹ͍ͬͯΔํɺ ͥͻ͝ࢀՃ͍ͩ͘͞ʂ ձΛఏڙͯ͘͠ΕΔํɺ ͥͻ͝ڠྗ͓ئ͍͠·͢ʂ #fukuokafirebase