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
ElectronでFirebaseを使ってみた(仮)
Search
Masaya Nasu
June 03, 2016
Programming
2
3.4k
ElectronでFirebaseを使ってみた(仮)
ElectronでFirebaseを使ってみました。
Masaya Nasu
June 03, 2016
Tweet
Share
More Decks by Masaya Nasu
See All by Masaya Nasu
What's new in Go 1.23
nasum
0
93
カミナシのフロントエンド開発の効率化の取り組み
nasum
2
290
新参者だけどバーンアウトしかけているチームを立て直す
nasum
21
11k
DjangoではじめるGraphQLとフロントエンド開発の協業
nasum
1
3.4k
Flutterとfirebaseを使ってモバイルアプリに挑戦してみる
nasum
3
3k
grpc-gatewayで作るマイクロサービスの管理画面
nasum
1
7.6k
コストをかけずに機械学習の環境を整える&学習環境(人間の)
nasum
0
1.6k
Elixirの好きなところ
nasum
0
510
Vue.jsを導入する際失敗したこと
nasum
1
4.2k
Other Decks in Programming
See All in Programming
TypeScript LSP の今までとこれから
quramy
1
490
SODA - FACT BOOK
sodainc
1
810
Agent Rules as Domain Parser
yodakeisuke
1
600
2度もゼロから書き直して、やっとブラウザでぬるぬる動くAIに辿り着いた話
tomoino
0
150
#QiitaBash TDDでAIに設計イメージを伝える
ryosukedtomita
2
1.7k
JSAI2025 RecSysChallenge2024 優勝報告
unonao
1
450
List Unfolding - 'unfold' as the Computational Dual of 'fold', and how 'unfold' relates to 'iterate'"
philipschwarz
PRO
0
190
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
130
ASP.NETアプリケーションのモダナイズ インフラ編
tomokusaba
1
190
CSC307 Lecture 17
javiergs
PRO
0
110
型付きアクターモデルがもたらす分散シミュレーションの未来
piyo7
0
750
コード書くの好きな人向けAIコーディング活用tips #orestudy
77web
3
290
Featured
See All Featured
Faster Mobile Websites
deanohume
307
31k
How STYLIGHT went responsive
nonsquared
100
5.6k
The Invisible Side of Design
smashingmag
299
50k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Designing Experiences People Love
moore
142
24k
Code Reviewing Like a Champion
maltzj
524
40k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.9k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Designing for humans not robots
tammielis
253
25k
A designer walks into a library…
pauljervisheath
206
24k
Transcript
ElectronͰFirebaseΛͬͯ ΈΔʢԾʣ Gotanda.js #4 in Retty
ࣗݾհ • Github @nasum • twitter @tomato360
Electron • ݴΘͣͱΕͨGithubͷϑϨʔϜϫʔΫ • ࠷ۙ1.0͕ϦϦʔε͞Ε·ͨ͠ • ͏1.2.1ʹͳͬͯΔɻૣ͕͞ා͍ • ηΩϡϦςΟେมͳΠϝʔδ ElectronΞϓϦͷXSSͰrm
-fr /Λ࣮ߦ͢Δ http://qiita.com/akameco/items/cc6fc949e7c9f0d1a42a
Firebase • Google͕ങऩͨ͠BaaS • ϦΞϧλΠϜʹσʔλΛಉظ͢ΔͷʹڧΈͷ ͋ΔαʔϏε • Google IO Ͱϩάղੳϓογϡ௨ͷػೳ
͕Ճ͞Εͯ
Έ߹Θͤͨಈػ • Electron1ܥʹͳֶͬͨ͠ͼ͢ࠒ߹͍ • EvernoteͷΑ͏ͳͷΛ࡞Γ͔ͨͬͨ • σʔλΛͲ͏ཷΊΔ͔ʹΜͩ • nedb
https://github.com/louischatriot/nedb • electron-json-storage https://github.com/jviotti/electron-json-storage • etc…etc… • Firebaseͷrealtime databaseΛ༻͍Ε͍͚ͦ͏
FirebaseͷWeb൛ͰͰ͖Δ͜ͱ • Authentication • Realtime Database • Storage • Hosting
• Cloud Messaging ElectronͰ͑ͦ͏
ҙɿͣͬͱܯࠂ͕Ͱ·͢
ElectronͰAuth • ElectronͰGoogleTwitterɺFacebookͷೝূ͑ͳ͍ • origin͕file://͔ͩΒઃఆͰ͖ͳ͍ • CordovaͰࣅͨΑ͏ͳ͜ͱͰΜͰ͍Δਓ͕͍ͨ https://groups.google.com/forum/#!topic/firebase-talk/ eUzTjj8mVa4 •
signInWithEmailAndPasswordΛ͑ೝূग़དྷΔ https://firebase.google.com/docs/auth/web/password- auth#before_you_begin
Ϣʔβ࡞ var auth = firebase.auth(); auth.createUserWithEmailAndPassword(email, password).then(function(){ console.log('ok') var uid
= auth.currentUser.uid; console.log(uid) writeUserData(uid, "hoge", email); }).catch(function(error) { // Handle Errors here. var errorCode = error.code; var errorMessage = error.message; // ... });
Ϣʔβೝূ var auth = firebase.auth(); auth.signInWithEmailAndPassword(email, password).then(function(){ console.log('ok') var uid
= auth.currentUser.uid; console.log(uid) }).catch(function(error) { // Handle Errors here. var errorCode = error.code; var errorMessage = error.message; console.log(errorCode); console.log(errorMessage); });
ೝূ݁Ռ
ೝূใLocalStorageʹೖΔ
ೝূ͏·͍ͬͨͧ͘ʂ ʢͰݸਓ༻్ͰೝূΘͳ͍͔Ͷʂʣ
Realtime Database • ίϯιʔϧͰϧʔϧΛܾΊΔඞཁ͕͋Δ • ݁ߏෳࡶͰ׳ΕΔ·Ͱେม • FirebaseͷRulesΛཧղ͢Δ http://qiita.com/laco0416/items/ b068ab0cf19a26f0992d
ࢼ͠ʹ࡞ͬͨϧʔϧ
ϧʔϧςετͰ͖Δ
realtime databaseʹอଘ͢Δ ίʔυ var auth = firebase.auth(); var uid =
auth.currentUser.uid; var obj = { "title": "test", "description": "description" }; //σʔλΛηοτ͢Δ firebase.database().ref('documents/' + uid).push(obj); //σʔλͷҰཡΛऔಘ͢Δ firebase.database().ref('documents/' + uid).once('value').then(function(snapshot) { console.log(snapshot.val()); }); //σʔλͷมߋΛݕ͠දࣔ͢Δ firebase.database().ref('documents/' + uid).on('value', function(snapshot) { console.log(snapshot.val()); });
ಈ͔ͯ͠ΈΔ
realtime database͏·͘ ͍͖ͦ͏ʂ
Ͱ͜͜Ͱ࣌ؒΕ storageͱ͔ࢼ͔ͨͬͨ͠
·ͱΊ • ೝূଞͷαʔϏεͷOAuth͑ͳ͍͚Ͳemail͔ͭͬͨೝূग़ དྷΔ • realtime databaseบ͕͋Δ • ϦΞϧλΠϜͰߋ৽͞ΕΔ͔Βຊνϟοτ͚ͩΑͶ •
࣮ೝূͳ͠Ͱ͑Δ • ܯࠂ͕ग़ଓ͚Δ͔Βݸਓ༻్Ͱ͓͏ʂ • ࠷ऴతʹElectron͋Μ·Γؔͳ͘ͳͬͪΌͬͨ