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
330
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
Lambda10周年!Lambdaは何をもたらしたか
smt7174
2
110
B2B SaaSから見た最近のC#/.NETの進化
sansantech
PRO
0
730
テストコード品質を高めるためにMutation Testingライブラリ・Strykerを実戦導入してみた話
ysknsid25
7
2.6k
いざ、BSC討伐の旅
nikinusu
2
780
New Relicを活用したSREの最初のステップ / NRUG OKINAWA VOL.3
isaoshimizu
2
590
データプロダクトの定義からはじめる、データコントラクト駆動なデータ基盤
chanyou0311
2
290
透過型SMTPプロキシによる送信メールの可観測性向上: Update Edition / Improved observability of outgoing emails with transparent smtp proxy: Update edition
linyows
2
210
RubyのWebアプリケーションを50倍速くする方法 / How to Make a Ruby Web Application 50 Times Faster
hogelog
3
940
障害対応指揮の意思決定と情報共有における価値観 / Waroom Meetup #2
arthur1
5
470
サイバーセキュリティと認知バイアス:対策の隙を埋める心理学的アプローチ
shumei_ito
0
380
Terraform CI/CD パイプラインにおける AWS CodeCommit の代替手段
hiyanger
1
240
SREが投資するAIOps ~ペアーズにおけるLLM for Developerへの取り組み~
takumiogawa
1
130
Featured
See All Featured
Building an army of robots
kneath
302
43k
Testing 201, or: Great Expectations
jmmastey
38
7.1k
Why Our Code Smells
bkeepers
PRO
334
57k
Navigating Team Friction
lara
183
14k
Measuring & Analyzing Core Web Vitals
bluesmoon
4
120
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
24k
Automating Front-end Workflow
addyosmani
1366
200k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
GraphQLとの向き合い方2022年版
quramy
43
13k
Done Done
chrislema
181
16k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2.1k
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