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.6k
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
170
成長ステージ別のスタートアップ集結!「事業の魅力とチームの本音」
takec24
0
130
Developing FLAPTALK by Firebase
takec24
1
410
NuxtCompositionAPIとFirebaseの話
takec24
1
510
コロナ禍でもリモート案件を途切れさせない! 案件の獲得方法とリモート案件の進め方。
takec24
0
380
フロントエンドエンジニアのためのFirebaseサーバーレス開発徹底解説
takec24
0
1.2k
スタートアップで働くというエンジニアキャリア
takec24
1
1.2k
人生を変えた炎上ブロジェクト
takec24
0
1.5k
好きなことを選び続けたら代表取締役CTOになりました。
takec24
2
1.3k
Other Decks in Technology
See All in Technology
いまさら聞けない ABテスト入門
skmr2348
1
180
Findy Team+のSOC2取得までの道のり
rvirus0817
0
290
多野優介
tanoyusuke
1
170
Goに育てられ開発者向けセキュリティ事業を立ち上げた僕が今向き合う、AI × セキュリティの最前線 / Go Conference 2025
flatt_security
0
320
OCI Network Firewall 概要
oracle4engineer
PRO
1
7.7k
職種別ミートアップで社内から盛り上げる アウトプット文化の醸成と関係強化/ #DevRelKaigi
nishiuma
2
120
ACA でMAGI システムを社内で展開しようとした話
mappie_kochi
0
160
GA technologiesでのAI-Readyの取り組み@DataOps Night
yuto16
0
260
#普通の文系サラリーマンチャレンジ 自分でアプリ開発と電子工作を続けたら人生が変わった
tatsuya1970
0
910
動画データのポテンシャルを引き出す! Databricks と AI活用への奮闘記(現在進行形)
databricksjapan
0
130
非エンジニアのあなたもできる&もうやってる!コンテキストエンジニアリング
findy_eventslides
3
880
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
9k
Featured
See All Featured
Navigating Team Friction
lara
189
15k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
4 Signs Your Business is Dying
shpigford
185
22k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
54
3k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
The Cost Of JavaScript in 2023
addyosmani
53
9k
Context Engineering - Making Every Token Count
addyosmani
4
160
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
Site-Speed That Sticks
csswizardry
11
870
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
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