Introduction, Examples - Firebase
-
Upload
eueung-mulyana -
Category
Technology
-
view
190 -
download
11
Transcript of Introduction, Examples - Firebase
1 / 37
Introduction - Realtime Database
FirebaseEueung Mulyana
https://eueung.github.io/112016/firebaseCodeLabs | Attribution-ShareAlike CC BY-SA
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.
8 / 37
Firebase SetupQuickstart Sample Project for Web
Create ProjectFirebase Client SnippetCheck DB RulesEnable Firebase Auth - Google Sign-InAdjust Authorized Domains
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
<!-- 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
{ "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
<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
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