Firebase - Introduction & Examples

Introduction to Firebase Realtime Database
Simple Web Example with Vue.js with Firebase Persistent Data

https://eueung.github.io/112016/firebase

Transcript

1. 1 / 37 Introduction - Realtime Database Firebase Eueung Mulyana https://eueung.github.io/112016/firebase CodeLabs | Attribution-ShareAlike CC BY-SA
2. Firebase Version: 3.6.4 Vue.JS 2.1.6 | VueFire 1.3.0 | Vue Material 0.5.2 2 / 37
3. Outline Introduction Quick Start VueFire 3 / 37
4. Introduction 4 / 37
5. 5 / 37 The Firebase Realtime Database is a cloud- hosted database. Data is stored as JSON and synchronized in realtime to every connected client. When you build cross-platform apps with Firebase iOS, Android, and JavaScript SDKs, all of your clients share one Realtime Database instance and automatically receive updates with the newest data. Firebase Realtime Database
6. 6 / 37 The Firebase Realtime Database lets you build rich, collaborative applications by allowing secure access to the database directly from client-side code. Data is persisted locally, and even while o ine, realtime events continue to re, giving the end user a responsive experience. When the device regains connection, the Realtime Database synchronizes the local data changes with the remote updates that occurred while the client was o ine, merging any con icts automatically. The Realtime Database provides a exible, expression-based rules language, called Firebase Realtime Database Security Rules, to de ne how your data should be structured and when data can be read from or written to. When integrated with Firebase Authentication, developers can de ne who has access to what data, and how they can access it. Ref: Firebase Realtime Database The Realtime Database is a NoSQL database and as such has di erent optimizations and functionality compared to a relational database. The Realtime Database API is designed to only allow operations that can be executed quickly. This enables you to build a great realtime experience that can serve millions of users without compromising on responsiveness. Because of this, it is important to think about how users need to access your data and then structure it accordingly.
7. Quick Start 7 / 37
8. 8 / 37 Firebase Setup Quickstart Sample Project for Web Create Project Firebase Client Snippet Check DB Rules Enable Firebase Auth - Google Sign-In Adjust Authorized Domains
9. Firebase Console - Create Project 9 / 37
10. Firebase Console - Add Firebase 10 / 37
11. Snippet - Load & Initialize Firebase 11 / 37
12. Database - Default Rules 12 / 37
13. Authentication - Enable Google Sign-In 13 / 37
14. Authentication - Authorized Domains 14 / 37
15. 15 / 37 Running Quickstart Sample $ s u d o n p m i n s t a l l - g f i r e b a s e - t o o l s $ g i t c l o n e h t t p s : / / g i t h u b . c o m / f i r e b a s e / q u i c k s t a r t - j s . g i t $ c d q u i c k s t a r t - j s / d a t a b a s e q u i c k s t a r t - j s / d a t a b a s e $ t r e e . | - - f i r e b a s e . j s o n | - - f i r e b a s e - l o g o . p n g | - - i n d e x . h t m l | - - m a i n . c s s | - - p i c s | | - - e n a b l e . p n g | | - - r e d c i r c l e . p n g | | - - s n i p p e t . p n g | - - R E A D M E . m d | - - s c r i p t s | | - - m a i n . j s | - - s i l h o u e t t e . j p g q u i c k s t a r t - j s / d a t a b a s e $ f i r e b a s e s e r v e - o 0 . 0 . 0 . 0 S t a r t i n g F i r e b a s e d e v e l o p m e n t s e r v e r . . . P r o j e c t D i r e c t o r y : / h o m e / e m / f b a s e d i r / q u i c k s t a r t - j s / d a t a b a s e P u b l i c D i r e c t o r y : . / S e r v e r l i s t e n i n g a t : h t t p : / / 0 . 0 . 0 . 0 : 5 0 0 0
16. quickstart-js/database - Splash Page 16 / 37
17. quickstart-js/database - Access Permissions 17 / 37
18. quickstart-js/database - Landing (Signed-In) 18 / 37
19. quickstart-js/database - Sample Posts 19 / 37
20. Firebase DB Console - Data 20 / 37
21. Firebase DB Console - Data 21 / 37
22. < ! - - F i r e b a s e - - > < s c r i p t s r c = " h t t p s : / / w w w . g s t a t i c . c o m / f i r e b a s e j s / 3 . 6 . 4 / f i r e b a s e . j s " > < / s c r i p t > < s c r i p t > v a r c o n f i g = { a p i K e y : " A I z a S y C y z w 3 n f Q v y r 3 8 Y h 1 2 7 R P y _ 1 2 3 4 5 _ a H e f U " , a u t h D o m a i n : " f b a s e - t e s t - 5 4 a 6 2 . f i r e b a s e a p p . c o m " , d a t a b a s e U R L : " h t t p s : / / f b a s e - t e s t - 5 4 a 6 2 . f i r e b a s e i o . c o m " , s t o r a g e B u c k e t : " f b a s e - t e s t - 5 4 a 6 2 . a p p s p o t . c o m " , m e s s a g i n g S e n d e r I d : " 9 8 9 4 0 8 9 8 3 1 2 3 " } ; f i r e b a s e . i n i t i a l i z e A p p ( c o n f i g ) ; < / s c r i p t > < / h e a d > < b o d y > < d i v c l a s s = " d e m o - l a y o u t m d l - l a y o u t m d l - j s - l a y o u t m d l - l a y o u t - - f i x e d - h e a d e r " > < ! - - S p l a s h s c r e e n - - > < s e c t i o n i d = " p a g e - s p l a s h " > < h 3 c l a s s = " l o g o " > D a t a b a s e W e b Q u i c k s t a r t < / h 3 > < d i v > < b u t t o n i d = " s i g n - i n - b u t t o n " c l a s s = " m d l - b u t t o n - - r a i s e d m d l - b u t t o n m d l - j s - b u t t o n m d l - j s - r i p p l e - e f f e c t " < / d i v > < / s e c t i o n > < ! - - H e a d e r s e c t i o n c o n t a i n i n g l o g o a n d m e n u - - > < h e a d e r c l a s s = " h e a d e r m d l - l a y o u t _ _ h e a d e r m d l - c o l o r - t e x t - - w h i t e m d l - c o l o r - - l i g h t - b l u e - 7 0 0 " > < d i v c l a s s = " m d l - l a y o u t _ _ h e a d e r - r o w t i t l e b a r " > < h 3 c l a s s = " l o g o " > D a t a b a s e W e b Q u i c k s t a r t < / h 3 > < b u t t o n i d = " s i g n - o u t - b u t t o n " c l a s s = " m d l - b u t t o n - - r a i s e d m d l - b u t t o n m d l - j s - b u t t o n m d l - j s - r i p p l e - e f f e c t " < / d i v > < ! - - N a v i g a t i o n B a r - - > < d i v c l a s s = " t a b m d l - l a y o u t _ _ h e a d e r - r o w m d l - c o l o r - - l i g h t - b l u e - 6 0 0 " > < d i v c l a s s = " m d l - t a b " > < d i v i d = " m e n u - r e c e n t " c l a s s = " m d l - l a y o u t _ _ t a b i s - a c t i v e m d l - b u t t o n m d l - j s - b u t t o n m d l - j s - r i p p l e - e f f e c t " < i c l a s s = " m a t e r i a l - i c o n s " > n e w _ r e l e a s e s < / i > R e c e n t < / d i v > < d i v i d = " m e n u - m y - p o s t s " c l a s s = " m d l - l a y o u t _ _ t a b m d l - b u t t o n m d l - j s - b u t t o n m d l - j s - r i p p l e - e f f e c t " < i c l a s s = " m a t e r i a l - i c o n s " > h o m e < / i > M y p o s t s < / d i v > < d i v i d = " m e n u - m y - t o p - p o s t s " c l a s s = " m d l - l a y o u t _ _ t a b m d l - b u t t o n m d l - j s - b u t t o n m d l - j s - r i p p l e - e f f e c t " 22 / 37 index.html
23. p a d d i n g - l e f t : 5 0 p x ; b a c k g r o u n d - p o s i t i o n - y : - 2 p x ; } . m d l - t e x t f i e l d { w i d t h : 1 0 0 % ; } / * F i x e s a n M D L b u g w h e r e t h e h e a d e r d o e s n o t s c r o l l o n s m a l l d e v i c e s * / . m d l - l a y o u t _ _ c o n t a i n e r . m d l - l a y o u t - - f i x e d - h e a d e r . m d l - l a y o u t _ _ c o n t e n t { o v e r f l o w - y : v i s i b l e ; o v e r f l o w - x : v i s i b l e ; o v e r f l o w : v i s i b l e ; } / * O v e r r i d e s M D L c o l o r s * / . m d l - l a y o u t . i s - u p g r a d e d . m d l - l a y o u t _ _ t a b . i s - a c t i v e : : a f t e r , . h e a d e r . m d l - t e x t f i e l d _ _ l a b e l : a f t e r { b a c k g r o u n d - c o l o r : # F F C A 2 8 ; } . m d l - s n a c k b a r _ _ a c t i o n { c o l o r : # F F C A 2 8 ; } . m d l - t e x t f i e l d _ _ l a b e l : a f t e r { b a c k g r o u n d - c o l o r : # 0 2 8 8 D 1 ; } . m d l - t e x t f i e l d - - f l o a t i n g - l a b e l . i s - f o c u s e d . m d l - t e x t f i e l d _ _ l a b e l { c o l o r : # 0 2 8 8 D 1 ; } / * H e a d e r * / . l o g o { f o n t - f a m i l y : ' A m a r a n t h ' , s a n s - s e r i f ; } . l o g o . m a t e r i a l - i c o n s { t o p : 4 p x ; f o n t - s i z e : 3 2 p x ; m a r g i n - r i g h t : - 2 p x ; p o s i t i o n : r e l a t i v e ; } . h e a d e r . m d l - l a y o u t _ _ h e a d e r - r o w { m a x - w i d t h : 1 0 2 4 p x ; w i d t h : 1 0 0 % ; h e i g h t : a u t o ; 23 / 37 main.css
24. } / * * * D i s p l a y s t h e g i v e n s e c t i o n e l e m e n t a n d c h a n g e s s t y l i n g o f t h e g i v e n b u t t o n . * / f u n c t i o n s h o w S e c t i o n ( s e c t i o n E l e m e n t , b u t t o n E l e m e n t ) { r e c e n t P o s t s S e c t i o n . s t y l e . d i s p l a y = ' n o n e ' ; u s e r P o s t s S e c t i o n . s t y l e . d i s p l a y = ' n o n e ' ; t o p U s e r P o s t s S e c t i o n . s t y l e . d i s p l a y = ' n o n e ' ; a d d P o s t . s t y l e . d i s p l a y = ' n o n e ' ; r e c e n t M e n u B u t t o n . c l a s s L i s t . r e m o v e ( ' i s - a c t i v e ' ) ; m y P o s t s M e n u B u t t o n . c l a s s L i s t . r e m o v e ( ' i s - a c t i v e ' ) ; m y T o p P o s t s M e n u B u t t o n . c l a s s L i s t . r e m o v e ( ' i s - a c t i v e ' ) ; i f ( s e c t i o n E l e m e n t ) { s e c t i o n E l e m e n t . s t y l e . d i s p l a y = ' b l o c k ' ; } i f ( b u t t o n E l e m e n t ) { b u t t o n E l e m e n t . c l a s s L i s t . a d d ( ' i s - a c t i v e ' ) ; } } / / B i n d i n g s o n l o a d . w i n d o w . a d d E v e n t L i s t e n e r ( ' l o a d ' , f u n c t i o n ( ) { / / B i n d S i g n i n b u t t o n . s i g n I n B u t t o n . a d d E v e n t L i s t e n e r ( ' c l i c k ' , f u n c t i o n ( ) { v a r p r o v i d e r = n e w f i r e b a s e . a u t h . G o o g l e A u t h P r o v i d e r ( ) ; f i r e b a s e . a u t h ( ) . s i g n I n W i t h P o p u p ( p r o v i d e r ) ; } ) ; / / B i n d S i g n o u t b u t t o n . s i g n O u t B u t t o n . a d d E v e n t L i s t e n e r ( ' c l i c k ' , f u n c t i o n ( ) { f i r e b a s e . a u t h ( ) . s i g n O u t ( ) ; } ) ; / / L i s t e n f o r a u t h s t a t e c h a n g e s f i r e b a s e . a u t h ( ) . o n A u t h S t a t e C h a n g e d ( o n A u t h S t a t e C h a n g e d ) ; / / S a v e s m e s s a g e o n f o r m s u b m i t . m e s s a g e F o r m . o n s u b m i t = f u n c t i o n ( e ) { e . p r e v e n t D e f a u l t ( ) ; v a r t e x t = m e s s a g e I n p u t . v a l u e ; v a r t i t l e = t i t l e I n p u t . v a l u e ; i f ( t e x t & & t i t l e ) { 24 / 37 main.js
25. { " p o s t - c o m m e n t s " : { " - K _ B C o Y Q A F T - C W q l r S o i " : { " - K _ B C y L L z Z Z N _ u z k v 8 u 3 " : { " a u t h o r " : " E u e u n g M u l y a n a " , " t e x t " : " t e s t c o m m e n t " , " u i d " : " N x x n V o X 2 O f V A G a G E b 5 2 q L e H j Q v p 1 " } } } , " p o s t s " : { " - K _ B C o Y Q A F T - C W q l r S o i " : { " a u t h o r " : " E u e u n g M u l y a n a " , " a u t h o r P i c " : " h t t p s : / / l h 3 . g o o g l e u s e r c o n t e n t . c o m / - l 7 T j 7 J p d X V o / A A A A A A A A A A I / A A A A A A A A B x 8 / E H b A G O h a g - A / p h o t o . j p g " " b o d y " : " i n i b u d i . i n i w a t i . w a t i k a k a k n y a b u d i . " , " s t a r C o u n t " : 0 , " t i t l e " : " I n t e r s t e l l a r S p a c e " , " u i d " : " N x x n V o X 2 O f V A G a G E b 5 2 q L e H j Q v p 1 " } , " - K _ B D 4 f 8 R P z b 1 d m q 6 F H b " : { " a u t h o r " : " E u e u n g M u l y a n a " , " a u t h o r P i c " : " h t t p s : / / l h 3 . g o o g l e u s e r c o n t e n t . c o m / - l 7 T j 7 J p d X V o / A A A A A A A A A A I / A A A A A A A A B x 8 / E H b A G O h a g - A / p h o t o . j p g " " b o d y " : " u n y i l u n c r i t u s r o n d u t c u p l i s \ n " , " s t a r C o u n t " : 0 , " t i t l e " : " A n o t h e r p o s t " , " u i d " : " N x x n V o X 2 O f V A G a G E b 5 2 q L e H j Q v p 1 " } } , " u s e r - p o s t s " : { " N x x n V o X 2 O f V A G a G E b 5 2 q L e H j Q v p 1 " : { " - K _ B C o Y Q A F T - C W q l r S o i " : { " a u t h o r " : " E u e u n g M u l y a n a " , " a u t h o r P i c " : " h t t p s : / / l h 3 . g o o g l e u s e r c o n t e n t . c o m / - l 7 T j 7 J p d X V o / A A A A A A A A A A I / A A A A A A A A B x 8 / E H b A G O h a g - A / p h o t o . j p g " " b o d y " : " i n i b u d i . i n i w a t i . w a t i k a k a k n y a b u d i . " , " s t a r C o u n t " : 0 , " t i t l e " : " I n t e r s t e l l a r S p a c e " , " u i d " : " N x x n V o X 2 O f V A G a G E b 5 2 q L e H j Q v p 1 " } , " - K _ B D 4 f 8 R P z b 1 d m q 6 F H b " : { " a u t h o r " : " E u e u n g M u l y a n a " , " a u t h o r P i c " : " h t t p s : / / l h 3 . g o o g l e u s e r c o n t e n t . c o m / - l 7 T j 7 J p d X V o / A A A A A A A A A A I / A A A A A A A A B x 8 / E H b A G O h a g - A / p h o t o . j p g " 25 / 37 JSON Export
26. VueFire Firebase bindings for Vue.js 26 / 37
27. Prev. Todo App with VueFire 27 / 37
28. Database Console - Data 28 / 37
29. { " t o d o s " : { " - K _ E G c q w p c g G T z i R o d q c " : { " t e x t " : " t o d o 1 : j a m b u p a k r a d e n " } , " - K _ E G w q _ W t L X l z 8 u L d J 2 " : { " t e x t " : " t o d o 2 : r u j a k b u b a r i y a h " } , " - K _ E H H e 3 z b G b 0 a i X y F 4 K " : { " t e x t " : " t o d o 3 : k e l e r e n g s i u n y i l " } } } # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - # F o r C o m p a r i s o n , P r e v i o u s l y E q u i v a l e n t : { " t o d o s " : [ { " t e x t " : " t o d o 1 : j a m b u p a k r a d e n " } , { " t e x t " : " t o d o 2 : r u j a k b u b a r i y a h " } , { " t e x t " : " t o d o 3 : k e l e r e n g s i u n y i l " } ] } 29 / 37 JSON Export
30. < s c r i p t s r c = " h t t p s : / / w w w . g s t a t i c . c o m / f i r e b a s e j s / 3 . 6 . 4 / f i r e b a s e . j s " > < / s c r i p t > < / h e a d > < b o d y > < d i v i d = " a p p " > < m d - t o o l b a r > < h 1 c l a s s = " m d - t i t l e " > L e a r n i n g V u e . J S < / h 1 > < / m d - t o o l b a r > < d i v c l a s s = " m a i n - c o n t e n t " > < m d - i n p u t - c o n t a i n e r > < l a b e l > E n t e r T o d o < / l a b e l > < m d - i n p u t v - m o d e l = " n e w T o d o " > < / m d - i n p u t > < / m d - i n p u t - c o n t a i n e r > < m d - b u t t o n c l a s s = " m d - r a i s e d m d - p r i m a r y " v - o n : c l i c k = " a d d T o d o " > A d d T o d o < / m d - b u t t o n > < u l > < l i v - f o r = " t o d o i n t o d o s " > < m d - b u t t o n c l a s s = " m d - i c o n - b u t t o n m d - w a r n " v - o n : c l i c k = " r e m o v e T o d o ( t o d o ) " > < m d - i c o n > r e m o v e _ c i r c l e _ o u t l i n e { { t o d o . t e x t } } < / l i > < / u l > < / d i v > < / d i v > < s c r i p t s r c = " / / u n p k g . c o m / v u e / d i s t / v u e . j s " > < / s c r i p t > < s c r i p t s r c = " / / u n p k g . c o m / v u e f i r e / d i s t / v u e f i r e . j s " > < / s c r i p t > < s c r i p t s r c = " / / u n p k g . c o m / v u e - m a t e r i a l @ l a t e s t " > < / s c r i p t > < s c r i p t t y p e = " t e x t / j a v a s c r i p t " > V u e . u s e ( V u e M a t e r i a l ) ; V u e . u s e ( V u e F i r e ) ; v a r c o n f i g = { a p i K e y : " A I z a S y C 8 T M 4 2 d W Y F 1 2 3 _ 1 2 3 4 5 g v M P v Y H d t E M W M c " , a u t h D o m a i n : " f b a s e - v u e . f i r e b a s e a p p . c o m " , d a t a b a s e U R L : " h t t p s : / / f b a s e - v u e . f i r e b a s e i o . c o m " } ; f i r e b a s e . i n i t i a l i z e A p p ( c o n f i g ) ; v a r t o d o s R e f = f i r e b a s e . d a t a b a s e ( ) . r e f ( ' t o d o s ' ) ; v a r A p p = n e w V u e ( { e l : ' # a p p ' , 30 / 37 Code
31. Firebase + Validation - vue.js 31 / 37
32. Validation 32 / 37
33. Database Console - Data 33 / 37
34. < d i v i d = " a p p " > < m d - t o o l b a r > < h 1 c l a s s = " m d - t i t l e " > L e a r n i n g V u e . J S < / h 1 > < / m d - t o o l b a r > < d i v c l a s s = " m a i n - c o n t e n t " > < m d - i n p u t - c o n t a i n e r > < l a b e l > U s e r n a m e < / l a b e l > < m d - i n p u t t y p e = " t e x t " v - m o d e l = " n e w U s e r . n a m e " p l a c e h o l d e r = " U s e r n a m e " > < / m d - i n p u t > < / m d - i n p u t - c o n t a i n e r > < m d - i n p u t - c o n t a i n e r > < l a b e l > E m a i l < / l a b e l > < m d - i n p u t t y p e = " e m a i l " v - m o d e l = " n e w U s e r . e m a i l " p l a c e h o l d e r = " e m a i l @ e m a i l . c o m " > < / m d - i n p u t > < / m d - i n p u t - c o n t a i n e r > < m d - b u t t o n c l a s s = " m d - r a i s e d m d - p r i m a r y " v - o n : c l i c k = " a d d U s e r " > A d d U s e r < / m d - b u t t o n > < u l c l a s s = " e r r o r s " > < l i v - s h o w = " ! v a l i d a t i o n . n a m e " > N a m e c a n n o t b e e m p t y . < / l i > < l i v - s h o w = " ! v a l i d a t i o n . e m a i l " > P l e a s e p r o v i d e a v a l i d e m a i l a d d r e s s . < / l i > < / u l > < u l i s = " t r a n s i t i o n - g r o u p " > < l i v - f o r = " u s e r i n u s e r s " c l a s s = " u s e r " : k e y = " u s e r [ ' . k e y ' ] " > < m d - b u t t o n c l a s s = " m d - i c o n - b u t t o n m d - w a r n " v - o n : c l i c k = " r e m o v e U s e r ( u s e r ) " > < m d - i c o n > r e m o v e _ c i r c l e _ o u t l i n e < s p a n > { { u s e r . n a m e } } - { { u s e r . e m a i l } } < / s p a n > < / l i > < / u l > < / d i v > < / d i v > < s c r i p t s r c = " / / u n p k g . c o m / v u e / d i s t / v u e . j s " > < / s c r i p t > < s c r i p t s r c = " / / u n p k g . c o m / v u e f i r e / d i s t / v u e f i r e . j s " > < / s c r i p t > < s c r i p t s r c = " / / u n p k g . c o m / v u e - m a t e r i a l @ l a t e s t " > < / s c r i p t > < s c r i p t t y p e = " t e x t / j a v a s c r i p t " > V u e . u s e ( V u e M a t e r i a l ) ; V u e . u s e ( V u e F i r e ) ; v a r e m a i l R E = / ^ ( ( [ ^ < > ( ) [ \ ] \ \ . , ; : \ s @ \ " ] + ( \ . [ ^ < > ( ) [ \ ] \ \ . , ; : \ s @ \ " ] + ) * ) | ( \ " . + \ " ) ) @ ( ( \ [ [ 0 - 9 ] { 1 , 3 } \ . [ 0 - 9 ] { 1 , 3 } \ . [ 0 - 9 ] { 1 , 3 } \ . [ 0 - 9 ] { 1 , 3 } \ ] ) | ( ( [ a - z A - v a r c o n f i g = { a p i K e y : " A I z a S y C 8 T M 4 2 d W Y F 1 2 3 _ 1 2 3 4 5 g v M P v Y H d t E M W M c " , a u t h D o m a i n : " f b a s e - v u e . f i r e b a s e a p p . c o m " , 34 / 37 Code
35. Refs 35 / 37
36. Refs 1. rebase/quickstart-js: Firebase Quickstart Samples for Web 2. Firebase Web Codelab 3. Firebase Realtime Database 4. vuejs/vue re: Firebase bindings for Vue.js 5. Firebase + Validation - vue.js 36 / 37
37. 37 / 37 END Eueung Mulyana https://eueung.github.io/112016/firebase CodeLabs | Attribution-ShareAlike CC BY-SA