37
1 / 37 Introduction - Realtime Database Firebase Eueung Mulyana https://eueung.github.io/112016/firebase CodeLabs | Attribution-ShareAlike CC BY-SA
| Date post: | 06-Jan-2017 |
| Category: |
Technology |
| Upload: | eueung-mulyana |
| View: | 184 times |
| Download: | 11 times |
1 / 37
Introduction - Realtime Database
FirebaseEueung Mulyana
https://eueung.github.io/112016/firebaseCodeLabs | Attribution-ShareAlike CC BY-SA
Firebase Version: 3.6.4Vue.JS 2.1.6 | VueFire 1.3.0 | Vue Material 0.5.2
2 / 37
Outline
Introduction
Quick Start
VueFire
3 / 37
Introduction
4 / 37
5 / 37
The Firebase Realtime Database is a cloud-hosted database. Data is stored as JSON
and synchronized in realtime to everyconnected 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 receiveupdates with the newest data.
Firebase RealtimeDatabase
6 / 37
The Firebase Realtime Database lets you build rich, collaborative applications byallowing secure access to the database directly from client-side code.
Data is persisted locally, and even while o�ine, realtimeevents continue to �re, giving the end user a responsive
experience. When the device regains connection, theRealtime 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, calledFirebase 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 withFirebase 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 NoSQLdatabase and as such has di�erentoptimizations and functionalitycompared to a relational database. TheRealtime Database API is designed toonly allow operations that can beexecuted quickly.
This enables you to build a great realtime experience thatcan serve millions of users without compromising onresponsiveness. Because of this, it is important to thinkabout how users need to access your data and thenstructure it accordingly.
Quick Start
7 / 37
8 / 37
Firebase SetupQuickstart Sample Project for Web
Create ProjectFirebase Client SnippetCheck DB RulesEnable Firebase Auth - Google Sign-InAdjust Authorized Domains
Firebase Console - Create Project9 / 37
Firebase Console - Add Firebase10 / 37
Snippet - Load & Initialize Firebase11 / 37
Database - Default Rules12 / 37
Authentication - Enable Google Sign-In13 / 37
Authentication - Authorized Domains14 / 37
15 / 37
Running QuickstartSample
$ sudo npm install -g firebase-tools
$ git clone https://github.com/firebase/quickstart-js.git$ cd quickstart-js/database
quickstart-js/database$ tree.|-- firebase.json|-- firebase-logo.png|-- index.html|-- main.css|-- pics| |-- enable.png| |-- redcircle.png| |-- snippet.png|-- README.md|-- scripts| |-- main.js|-- silhouette.jpg
quickstart-js/database$ firebase serve -o 0.0.0.0
Starting Firebase development server...
Project Directory: /home/em/fbasedir/quickstart-js/databasePublic Directory: ./
Server listening at: http://0.0.0.0:5000
quickstart-js/database - Splash Page16 / 37
quickstart-js/database - Access Permissions17 / 37
quickstart-js/database - Landing (Signed-In)18 / 37
quickstart-js/database - Sample Posts19 / 37
Firebase DB Console - Data20 / 37
Firebase DB Console - Data21 / 37
<!-- Firebase --> <script src="https://www.gstatic.com/firebasejs/3.6.4/firebase.js"></script> <script> var config = { apiKey: "AIzaSyCyzw3nfQvyr38Yh127RPy_12345_aHefU", authDomain: "fbase-test-54a62.firebaseapp.com", databaseURL: "https://fbase-test-54a62.firebaseio.com", storageBucket: "fbase-test-54a62.appspot.com", messagingSenderId: "989408983123" };
firebase.initializeApp(config); </script>
</head><body><div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-header">
<!-- Splash screen --> <section id="page-splash"> <h3 class="logo">Database Web Quickstart</h3> <div> <button id="sign-in-button" class="mdl-button--raised mdl-button mdl-js-button mdl-js-ripple-effect" </div> </section>
<!-- Header section containing logo and menu --> <header class="header mdl-layout__header mdl-color-text--white mdl-color--light-blue-700">
<div class="mdl-layout__header-row titlebar"> <h3 class="logo">Database Web Quickstart</h3> <button id="sign-out-button" class="mdl-button--raised mdl-button mdl-js-button mdl-js-ripple-effect" </div>
<!-- Navigation Bar --> <div class="tab mdl-layout__header-row mdl-color--light-blue-600"> <div class="mdl-tab"> <div id="menu-recent" class="mdl-layout__tab is-active mdl-button mdl-js-button mdl-js-ripple-effect" <i class="material-icons">new_releases</i> Recent </div> <div id="menu-my-posts" class="mdl-layout__tab mdl-button mdl-js-button mdl-js-ripple-effect" <i class="material-icons">home</i> My posts </div> <div id="menu-my-top-posts" class="mdl-layout__tab mdl-button mdl-js-button mdl-js-ripple-effect"
22 / 37
index.html
padding-left: 50px; background-position-y: -2px;}.mdl-textfield { width: 100%;}
/* Fixes an MDL bug where the header does not scroll on small devices */.mdl-layout__container .mdl-layout--fixed-header .mdl-layout__content { overflow-y: visible; overflow-x: visible; overflow: visible;}/* Overrides MDL colors */.mdl-layout.is-upgraded .mdl-layout__tab.is-active::after,.header .mdl-textfield__label:after { background-color: #FFCA28;}.mdl-snackbar__action { color: #FFCA28;}.mdl-textfield__label:after { background-color: #0288D1;}
.mdl-textfield--floating-label.is-focused .mdl-textfield__label { color: #0288D1;}
/* Header */
.logo { font-family: 'Amaranth', sans-serif;}.logo .material-icons { top: 4px; font-size: 32px; margin-right: -2px; position: relative;}.header .mdl-layout__header-row { max-width: 1024px; width: 100%; height: auto; 23 / 37
main.css
}
/** * Displays the given section element and changes styling of the given button. */function showSection(sectionElement, buttonElement) { recentPostsSection.style.display = 'none'; userPostsSection.style.display = 'none'; topUserPostsSection.style.display = 'none'; addPost.style.display = 'none'; recentMenuButton.classList.remove('is-active'); myPostsMenuButton.classList.remove('is-active'); myTopPostsMenuButton.classList.remove('is-active');
if (sectionElement) { sectionElement.style.display = 'block'; } if (buttonElement) { buttonElement.classList.add('is-active'); }}
// Bindings on load.window.addEventListener('load', function() { // Bind Sign in button. signInButton.addEventListener('click', function() { var provider = new firebase.auth.GoogleAuthProvider(); firebase.auth().signInWithPopup(provider); });
// Bind Sign out button. signOutButton.addEventListener('click', function() { firebase.auth().signOut(); });
// Listen for auth state changes firebase.auth().onAuthStateChanged(onAuthStateChanged);
// Saves message on form submit. messageForm.onsubmit = function(e) { e.preventDefault(); var text = messageInput.value; var title = titleInput.value; if (text && title) {
24 / 37
main.js
{ "post-comments" : { "-K_BCoYQAFT-CWqlrSoi" : { "-K_BCyLLzZZN_uzkv8u3" : { "author" : "Eueung Mulyana", "text" : "test comment", "uid" : "NxxnVoX2OfVAGaGEb52qLeHjQvp1" } } }, "posts" : { "-K_BCoYQAFT-CWqlrSoi" : { "author" : "Eueung Mulyana", "authorPic" : "https://lh3.googleusercontent.com/-l7Tj7JpdXVo/AAAAAAAAAAI/AAAAAAAABx8/EHbAGOhag-A/photo.jpg" "body" : "ini budi. ini wati. wati kakaknya budi.", "starCount" : 0, "title" : "Interstellar Space", "uid" : "NxxnVoX2OfVAGaGEb52qLeHjQvp1" }, "-K_BD4f8RPzb1dmq6FHb" : { "author" : "Eueung Mulyana", "authorPic" : "https://lh3.googleusercontent.com/-l7Tj7JpdXVo/AAAAAAAAAAI/AAAAAAAABx8/EHbAGOhag-A/photo.jpg" "body" : "unyil uncrit usro ndut cuplis\n", "starCount" : 0, "title" : "Another post", "uid" : "NxxnVoX2OfVAGaGEb52qLeHjQvp1" } }, "user-posts" : { "NxxnVoX2OfVAGaGEb52qLeHjQvp1" : { "-K_BCoYQAFT-CWqlrSoi" : { "author" : "Eueung Mulyana", "authorPic" : "https://lh3.googleusercontent.com/-l7Tj7JpdXVo/AAAAAAAAAAI/AAAAAAAABx8/EHbAGOhag-A/photo.jpg" "body" : "ini budi. ini wati. wati kakaknya budi.", "starCount" : 0, "title" : "Interstellar Space", "uid" : "NxxnVoX2OfVAGaGEb52qLeHjQvp1" }, "-K_BD4f8RPzb1dmq6FHb" : { "author" : "Eueung Mulyana", "authorPic" : "https://lh3.googleusercontent.com/-l7Tj7JpdXVo/AAAAAAAAAAI/AAAAAAAABx8/EHbAGOhag-A/photo.jpg"
25 / 37
JSON Export
VueFireFirebase bindings for Vue.js
26 / 37
Prev. Todo App with VueFire27 / 37
Database Console - Data28 / 37
{ "todos" : { "-K_EGcqwpcgGTziRodqc" : { "text" : "todo 1: jambu pak raden" }, "-K_EGwq_WtLXlz8uLdJ2" : { "text" : "todo 2: rujak bu bariyah" }, "-K_EHHe3zbGb0aiXyF4K" : { "text" : "todo 3: kelereng si unyil" } }}
# --------------------------------------
# For Comparison, Previously Equivalent:{ "todos" : [ { "text" : "todo 1: jambu pak raden" }, { "text" : "todo 2: rujak bu bariyah" }, { "text" : "todo 3: kelereng si unyil" } ]}
29 / 37
JSON Export
<script src="https://www.gstatic.com/firebasejs/3.6.4/firebase.js"></script></head>
<body>
<div id="app"> <md-toolbar> <h1 class="md-title">Learning Vue.JS</h1> </md-toolbar>
<div class="main-content"> <md-input-container> <label>Enter Todo</label> <md-input v-model="newTodo"></md-input> </md-input-container> <md-button class="md-raised md-primary" v-on:click="addTodo">Add Todo</md-button>
<ul> <li v-for="todo in todos"> <md-button class="md-icon-button md-warn" v-on:click="removeTodo(todo)"><md-icon>remove_circle_outline {{ todo.text }} </li> </ul>
</div></div>
<script src="//unpkg.com/vue/dist/vue.js"></script><script src="//unpkg.com/vuefire/dist/vuefire.js"></script><script src="//unpkg.com/vue-material@latest"></script>
<script type="text/javascript"> Vue.use(VueMaterial); Vue.use(VueFire);
var config = { apiKey: "AIzaSyC8TM42dWYF123_12345gvMPvYHdtEMWMc", authDomain: "fbase-vue.firebaseapp.com", databaseURL: "https://fbase-vue.firebaseio.com" }; firebase.initializeApp(config); var todosRef = firebase.database().ref('todos');
var App = new Vue({ el: '#app',
30 / 37
Code
Validation32 / 37
Database Console - Data33 / 37
<div id="app"> <md-toolbar> <h1 class="md-title">Learning Vue.JS</h1> </md-toolbar>
<div class="main-content">
<md-input-container>
<label>Username</label> <md-input type="text" v-model="newUser.name" placeholder="Username"></md-input> </md-input-container>
<md-input-container> <label>Email</label> <md-input type="email" v-model="newUser.email" placeholder="[email protected]"></md-input> </md-input-container> <md-button class="md-raised md-primary" v-on:click="addUser">Add User</md-button>
<ul class="errors"> <li v-show="!validation.name">Name cannot be empty.</li> <li v-show="!validation.email">Please provide a valid email address.</li> </ul>
<ul is="transition-group"> <li v-for="user in users" class="user" :key="user['.key']"> <md-button class="md-icon-button md-warn" v-on:click="removeUser(user)"><md-icon>remove_circle_outline <span>{{user.name}} - {{user.email}}</span> </li> </ul>
</div></div>
<script src="//unpkg.com/vue/dist/vue.js"></script><script src="//unpkg.com/vuefire/dist/vuefire.js"></script><script src="//unpkg.com/vue-material@latest"></script>
<script type="text/javascript"> Vue.use(VueMaterial); Vue.use(VueFire);
var emailRE = /̂(([̂<>()[\]\\.,;:\s@\"]+(\.[̂<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
var config = { apiKey: "AIzaSyC8TM42dWYF123_12345gvMPvYHdtEMWMc", authDomain: "fbase-vue.firebaseapp.com",
34 / 37
Code
Refs
35 / 37
Refs1. �rebase/quickstart-js: Firebase Quickstart Samples for Web2. Firebase Web Codelab3. Firebase Realtime Database4. vuejs/vue�re: Firebase bindings for Vue.js5. Firebase + Validation - vue.js
36 / 37
37 / 37
ENDEueung Mulyana
https://eueung.github.io/112016/firebaseCodeLabs | Attribution-ShareAlike CC BY-SA
![Introduction to Firebase [Google I/O Extended Bangkok 2016]](https://static.documents.pub/doc/80x56/58707fc21a28ab57368b613b/introduction-to-firebase-google-io-extended-bangkok-2016.jpg)