How to start with Firebase on the Web?

1. Firebase
For the Web
Jana Moudrá @Janamou +JanaMoudra

2. Co-Founder at
Organizer at GDG Prague
Google Developer Expert for
About me
Jana Moudrá @Janamou +JanaMoudra

3. #firebasehackprague
FIREBASE?

4. #firebasehackprague

5. #firebasehackprague

6. #firebasehackprague

7. #firebasehackprague
LET’S START

8. 1. Login to Firebase console
2. Create a new project
3. Copy the code to your project
4. Use Firebase
#firebasehackprague
Firebase How To

9. $ npm install -g firebase-tools
$ firebase login
$ firebase serve
firebase.google.com/docs/cli/
Firebase Tools

10. #firebasehackprague
Firebase For the Web

11. You may include every
component independently
#firebasehackprague
Firebase For the Web

12. <script src="firebase.js"></script>
or
<script src="firebase-app.js"></script>
<script src="firebase-auth.js"></script>
<script src="firebase-database.js"></script>
<script src="firebase-storage.js"></script>
#firebasehackprague
Firebase For the Web

13. var firebase = require('firebase/app');
require('firebase/auth');
require('firebase/database');
require('firebase/storage);
npmjs.com/package/firebase
Firebase For the Web

14. E-mail/Password
Providers
Google, Facebook, Twitter, Github
Anonymous
Custom auth system integration
Needs to be enabled in Firebase console
#firebasehackprague
Auth

15. firebase.auth().onAuthStateChanged(function(user) {
if (user) {
// Get data from user
} else {
// User is signed out
}
});
#firebasehackprague
Auth

16. // User can be null
var user = firebase.auth().currentUser;
#firebasehackprague
Auth

17. // Create a new account
firebase.auth()
.createUserWithEmailAndPassword(email, password);
// Login
firebase.auth()
.signInWithEmailAndPassword(email, password);
#firebasehackprague
Auth

18. // Can be Google, Facebook, Twitter or Github
var provider =
new firebase.auth.GoogleAuthProvider();
firebase.auth().signInWithPopup(provider);
firebase.google.com/docs/auth/web/manage-users
Auth

19. Cloud hosted storage
Data is stored as JSON
Realtime synchronization
Automatic updates
Offline support
#firebasehackprague
Database

20. Asynchronous listening to events:
value
child_added
child_changed
child_removed
child_moved
#firebasehackprague
Database - Retrieve

21. firebase.database().ref('users')
.on('value', function(snapshot) {
doSomethingWithData(snapshot.val());
});
#firebasehackprague
Database - Retrieve

22. firebase.database().ref('users')
.once('value', function(snapshot) {
doSomethingWithData(snapshot.val());
});
#firebasehackprague
Database - Retrieve

23. // Orders by child
firebase.database().ref('users')
.orderByChild('age');
// Limits to first 5
firebase.database().ref('users')
.limitToFirst(5);
#firebasehackprague
Database - Sort, Filter

24. #firebasehackprague
Database - Save
Methods:
set()
push()
update()
transaction()

25. firebase.database().ref('messages')
.push({text: 'Ahoj'});
firebase.google.com/docs/database/web/start
Database - Save

26. firebase.google.com/docs/database/security/
Rules
Read and write access to db/storage
How data are structured
What indexes exist
From Firebase console

27. firebase.google.com/docs/storage/web/start
Storage
Backed by Google Cloud Storage
Files stored in Firebase storage bucket

28. For Chrome and Chrome
apps/extensions
firebase.google.com/docs/cloud-messaging/chrome/client
Cloud Messaging

29. #firebasehackprague
Hosting
Static hosting for web apps
firebaseapp.com subdomain
Firebase CLI needed
$ firebase init
$ firebase deploy

30. #firebasehackprague
MORE INFO?

31. firebase.google.com/docs/reference/

32. codelabs.developers.google.com/codelabs/firebase-web/index.html

33. firebase.google.com/docs/samples/

34. firebase.google.com/docs/libraries/

35. #firebasehackprague
HAPPY CODING!

36. Firebase
For the Web
Jana Moudrá @Janamou +JanaMoudra