Intro to Firebase (creating a web-based chat app using Firebase and JavaScript) with Firebase overview slides and example code.

1. @bretmcg @googlecloud
Bret McGowen
Developer Advocate
Google Cloud Platform
New York, NY
@bretmcg
About Bret
Firebase
Workshop

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. Wait, what?

14. NO BACKEND CODE!

15. 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);
});

16. Focus on your app

17. Works with

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

19. Let’s build a thing

20. @saturnism
firebase.com/signup

21. @saturnism
Firebase!

22. @saturnism
Click here to Forge

23. @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

24. @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

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

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

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

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

29. @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

30. Hooray!

31. @saturnism
Let’s add Validation!

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

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

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

35. @saturnism
Click here!

36. @saturnism
Step 5 - Install Firebase Tools

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

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

39. @bretmcg
Thanks!
Bret McGowen
@bretmcg
cloud.google.com