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.2k
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
130
成長ステージ別のスタートアップ集結!「事業の魅力とチームの本音」
takec24
0
67
Developing FLAPTALK by Firebase
takec24
1
320
NuxtCompositionAPIとFirebaseの話
takec24
1
480
コロナ禍でもリモート案件を途切れさせない! 案件の獲得方法とリモート案件の進め方。
takec24
0
240
フロントエンドエンジニアのためのFirebaseサーバーレス開発徹底解説
takec24
0
980
スタートアップで働くというエンジニアキャリア
takec24
1
970
人生を変えた炎上ブロジェクト
takec24
0
1.2k
好きなことを選び続けたら代表取締役CTOになりました。
takec24
2
1.1k
Other Decks in Technology
See All in Technology
GrafanaMeetup_AmazonManagedGrafanaのアクセス制御機能とマルチテナント環境下でのアクセス制御について
daitak
0
330
GraphQL 成熟度モデルの紹介と、プロダクトに当てはめた事例 / GraphQL maturity model
mh4gf
7
1.4k
JAWS-UG Bedrock Claude Night
yamahiro
3
640
DMM.com アルファ室採用案内資料
hsugita
1
180
今日からできる!簡単 .NET 高速化 Tips -2024 edition-
xin9le
6
2.7k
ルーターでプレゼンする
puhitaku
1
2.5k
VS CodeでAWSを操作しよう
smt7174
9
1.8k
競技としてのKaggle、役に立つKaggle
yu4u
6
2.1k
Google Cloud Next '24でブログを10本書いた方法と勉強会を沸かせた方法
yasumuusan
0
310
Azureの基本的な権限管理の勉強会
yhana
1
1.4k
ゼロから始めるVue.jsコミュニティ貢献 / first-vuejs-community-contribution-link-and-motivation
lmi
1
140
自己改善からチームを動かす! 「セルフエンジニアリングマネージャー」のすゝめ
shoota
6
880
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
125
8.5k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
Fantastic passwords and where to find them - at NoRuKo
philnash
38
2.5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
275
13k
What's new in Ruby 2.0
geeforr
337
31k
Infographics Made Easy
chrislema
238
18k
A Philosophy of Restraint
colly
197
16k
What's in a price? How to price your products and services
michaelherold
238
11k
How STYLIGHT went responsive
nonsquared
92
4.8k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
126
32k
Rebuilding a faster, lazier Slack
samanthasiow
74
8.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