This document discusses how to build a Dart and Firebase app in 30 minutes. It outlines the key Firebase services that can be used including the realtime database, authentication, cloud storage, and hosting. It provides code examples for common tasks like loading and saving data to the realtime database, signing users in with authentication providers, and uploading files to cloud storage. The document recommends using the firebase3 package to easily integrate these Firebase services and build full-featured apps with Dart and Firebase quickly.

1. How to build
a Dart and Firebase app
in 30 mins
Jana Moudra @Janamou +JanaMoudra

2. Hi!
Co-Founder at
GDE for
Teacher

3. + =

4. Makes me productive
I just sit and write the code
I know what’s happening
Me and ?

5. Makes me productive
I just sit and write the code
I know what’s happening
I can build great apps!
Me and ?

6. Great apps
need a backend!

7. Needed
Lots of implementation
Eh, backend?
Database File Upload User accounts
Anonymous user OAuth Hosting ...

8. Needed
Lots of implementation
Eh, backend?
Database File Upload User accounts
Anonymous user OAuth Hosting ...
For a simple app...

9. OMG,
backend!

10. ... backend
without
implementing
BACKEND ...
???

11. What
can we do?

12. Hello Firebase!

13. Firebase
Realtime database
Authentication
Cloud storage
Hosting
...

14. +
firebase3 package
JS interop
Wrapper

15. Types

16. // Removes data at location
try {
await childRef.remove();
} catch (e) {
print("Error while deleting item, $e");
}
Futures

17. // When auth state changes
auth()
.onAuthStateChanged
.where((e) => e.user != null)
.listen((e) {
User u = e.user;
...
});
Streams

18. // Updates data in a transaction
await childRef.transaction((value) =>
newValue
);
Methods

19. // Updates data in a transaction
await childRef.transaction((value) =>
newValue
);
Methods
No allowInterop()

20. DEMO

21. HOW to build
an app like this?

22. import 'package:firebase3/firebase.dart';
Import Firebase3!

23. Realtime database
Authentication
Cloud storage
Hosting
+

24. Realtime database?

25. {
"notes" : {
"-KUsbAq6445-ynO4lg6Z" : {
"img_url" : "https://firebasestorage.googlea...",
"text" : "Is awesome!",
"title" : "Dart"
},
...
}
}
Structure your data

26. databaseRef.onChildAdded.listen((e) {
DataSnapshot data = e.snapshot;
Map val = data.val();
Note note = new Note(val[jsonTagText]);
_showNote(note);
});
Load your data

27. try {
await databaseRef
.push({"text": "Hi"})
.future;
} catch (e) {
...
}
Save your data

28. Realtime database
in 15 minutes

29. Authentication?

30. var provider = new GoogleAuthProvider();
try {
await auth().signInWithPopup(provider);
} catch (e) {
...
}
Google provider

31. auth().currentUser
Current user

32. // Registers user with e-mail and password
await auth()
.createUserWithEmailAndPassword(
"jana.moudra@gmail.com",
"pass");
E-mail provider

33. Authentication
in 5 minutes

34. Cloud storage

35. File file = ...;
try {
UploadTaskSnapshot snapshot = await storageRef
.child(file.name)
.put(file)
.future;
_showUploadImage(snapshot.downloadURL);
} catch (e) {
...
}
Image upload

36. Cloud storage
in 10 minutes

37. +

38. pub.dartlang.org/packages/firebase3
github.com/Janamou/firebase3-dart
Where can I get it?

39. You can also
build an app like this
Jana Moudra @Janamou +JanaMoudra