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
140
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
3
1.3k
Other Decks in Technology
See All in Technology
「魔法少女まどか☆マギカ Magia Exedra」のIPのキャラクターを描くための3Dルック開発
gree_tech
PRO
0
170
もう外には出ない。より快適なフルリモート環境を目指して
mottyzzz
13
9.5k
ローカルLLMとLINE Botの組み合わせ その2(EVO-X2でgpt-oss-120bを利用) / LINE DC Generative AI Meetup #7
you
PRO
1
150
Kubernetes self-healing of your workload
hwchiu
0
440
AIエージェントによる業務効率化への飽くなき挑戦-AWS上の実開発事例から学んだ効果、現実そしてギャップ-
nasuvitz
0
190
知覚とデザイン
rinchoku
1
460
Bill One 開発エンジニア 紹介資料
sansan33
PRO
4
14k
生成AI時代のPythonセキュリティとガバナンス
abenben
0
120
Behind Postgres 18: The People, the Code, & the Invisible Work | Claire Giordano | PGConfEU 2025
clairegiordano
0
100
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.2k
コンパウンド組織のCRE #cre_meetup
layerx
PRO
1
240
webpack依存からの脱却!快適フロントエンド開発をViteで実現する #vuefes
bengo4com
3
3k
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
RailsConf 2023
tenderlove
30
1.3k
Being A Developer After 40
akosma
91
590k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
A designer walks into a library…
pauljervisheath
209
24k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
The Cult of Friendly URLs
andyhume
79
6.6k
Optimizing for Happiness
mojombo
379
70k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
A Modern Web Designer's Workflow
chriscoyier
697
190k
BBQ
matthewcrist
89
9.8k
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