This document discusses Firebase and building realtime apps. It provides examples of how Firebase can be used to build collaborative apps like chat, games, and documents. Firebase allows storing and syncing data in realtime with no backend code required. It also supports user authentication, offline capabilities, and data validation rules. Code samples are given for including the Firebase library, writing and reading data, and authentication using GitHub logins. The document encourages building an app with Firebase and provides resources for learning more.

1. @bretmcg @googlecloud
Victor Akinwande
Developer Group Organizer
Mobile Developer, n4Labs
Ilorin, NG
@aknvictor
About Victor
DevFest 2015
Firebase

2. Store and sync your data
INSTANTLY

3. Build Realtime Apps
(what is that?)

4. Realtime is
Data best served fresh

5. Realtime is
Where your bus is

6. Realtime is
Collaborative Drawing
tinyurl.com/FireDraw

7. Realtime is
Game state
goo.gl/4LccZY

8. Realtime is
Collaborative Documents
firepad.io

9. Realtime is
Designing your office
tinyurl.com/OfficeMover

10. Other examples:
● Chat
● Tweet wall
● Open Data sets

11. Firebase makes it easy

12. No backend code

13. REALLY easy.
Write Data
Firebase ref = new Firebase("https://.....firebaseio.com/");
ref.setValue("Hello, Video Hackers!");
Read Data
ref.on("value", function (snapshot) {
var data = snapshot.val();
console.log(data);
});

14. Focus on your app

15. Works with

16. And More
● Authentication (Facebook, Google. GitHub, etc)
● Offline support
● REST URLs
● Learn more today!

17. Let’s build a thing

18. @saturnism
firebase.com/signup

19. @saturnism
Firebase!

20. @saturnism
Click here to Forge

21. @saturnism
Git
git clone https://github.com/bretmcg/firebase-chat-lab.git
No Git? Download the ZIP File
https://github.com/bretmcg/firebase-chat-lab/tree/master

22. @saturnism
<!-- 1. Include Firebase JS Client -->
<script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js">
</script>
Step 1 - Include Firebase Client Library

23. @saturnism
// 2. Create a Firebase reference.
var myDataRef =
new Firebase('https://blinding-heat-8328.firebaseio.com/');
Step 2 - Create a Firebase Reference

24. @saturnism
// 3. Push a message when "Send" is clicked.
myDataRef.set({
name: "Bret",
text: "Hello, world!"
});
Step 3 - Save the Data

25. @saturnism
// 3. Push a message when "Send" is clicked.
myDataRef.set({
name: textboxName,
text: textboxMessage
});
Step 3 - Save the Data

26. @saturnism
// 3. Push a message when "Send" is clicked.
myDataRef.push({
name: textboxName,
text: textboxMessage
});
Step 3 - Save the Data

27. @saturnism
// 4. Listen to the child_added event, and display the message.
myDataRef.on("child_added", function (snapshot) {
var firebaseValue = snapshot.val();
displayChatMessage(firebaseValue.name, firebaseValue.text);
});
Step 4 - Listen to new data

28. Hooray!

29. @saturnism
Let’s add Validation!

30. @saturnism
{
"rules": {
".read": true,
".write": true,
"$message": {
".validate": "newData.hasChildren(['name', 'text'])"
}
}
}
Step 9 - Add Validation Rule

31. @saturnism
{
"rules": {
".read": true,
".write": true,
"$message": {
".validate": "newData.hasChildren(['name', 'text']) && newData.
child(text).val().length > 0"
}
}
}
Step 9 - Add Validation Rule

32. @saturnism
myDataRef.on("child_removed", function (snapshot) {
var key = snapshot.key();
$('#' + key).remove();
});
Step 10 - Listen to data removal

33. @saturnism
Click here!

34. @saturnism
Step 5 - Install Firebase Tools

35. @saturnism
Step 6 - Initialize Firebase Project
$ firebase login

36. @saturnism
Step 7 - Initialize Firebase Project
$ firebase init

37. @saturnism
Step 8 - Deploy!
$ firebase deploy

38. @bretmcg
Open Data Sets

39. @bretmcg
● NoSQL, JSON database
● RESTful
● Push data in milliseconds
● Secure
The Firebase Real-Time Database-as-a-Service

40. Authentication & Offline

41. @saturnism
User Authentication

42. @saturnism
Example: GitHub User Authentication
Create a new GitHub App
https://github.com/settings/applications
1
Configure OAuth 2.0 Callback
https://auth.firebase.com/v2/<YOUR-FIREBASE>/auth/github/callback
2
Display GitHub Login Pop-Up3
var ref = new Firebase("https://<YOUR-FIREBASE>.firebaseio.com/");
ref.authWithOAuthPopup("github", function(error, authData) { ... });

43. @saturnism
{
"rules": {
"users": {
"$uid": {
".read": "auth != null && auth.uid == $uid"
}
}
}
}
Example - Only owner can read the data

44. @saturnism
Offline Capabilities

45. @saturnism
var amOnline = new Firebase('https://<YOUR-FIREBASE>.firebaseio.com/.info/connected');
var presenceRef = new Firebase('https://<YOUR-FIREBASE>.firebaseio.com/presence/'
+ userid);
amOnline.on('value', function(value) {
if (value.val() === true) {
// Connected (or reconnected)!
presenceRef.onDisconnect().remove();
presenceRef.set(true);
}
});
Example
Detecting Presence (Offline/Online)

46. @bretmcg
Thanks!
Questions?
Victor Akinwade
@aknvictor