Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
How to build
a Dart and Firebase app
in 30 mins
Jana Moudra @Janamou +JanaMoudra
Hi!
Co-Founder at
GDE for
Teacher
+ =
Makes me productive
I just sit and write the code
I know what’s happening
Me and ?
Makes me productive
I just sit and write the code
I know what’s happening
I can build great apps!
Me and ?
Great apps
need a backend!
Needed
Lots of implementation
Eh, backend?
Database File Upload User accounts
Anonymous user OAuth Hosting ...
Needed
Lots of implementation
Eh, backend?
Database File Upload User accounts
Anonymous user OAuth Hosting ...
For a simpl...
OMG,
backend!
... backend
without
implementing
BACKEND ...
???
What
can we do?
Hello Firebase!
Firebase
Realtime database
Authentication
Cloud storage
Hosting
...
+
firebase3 package
JS interop
Wrapper
Types
// Removes data at location
try {
await childRef.remove();
} catch (e) {
print("Error while deleting item, $e");
}
Futures
// When auth state changes
auth()
.onAuthStateChanged
.where((e) => e.user != null)
.listen((e) {
User u = e.user;
...
});...
// Updates data in a transaction
await childRef.transaction((value) =>
newValue
);
Methods
// Updates data in a transaction
await childRef.transaction((value) =>
newValue
);
Methods
No allowInterop()
DEMO
HOW to build
an app like this?
import 'package:firebase3/firebase.dart';
Import Firebase3!
Realtime database
Authentication
Cloud storage
Hosting
+
Realtime database?
{
"notes" : {
"-KUsbAq6445-ynO4lg6Z" : {
"img_url" : "https://firebasestorage.googlea...",
"text" : "Is awesome!",
"title"...
databaseRef.onChildAdded.listen((e) {
DataSnapshot data = e.snapshot;
Map val = data.val();
Note note = new Note(val[jsonT...
try {
await databaseRef
.push({"text": "Hi"})
.future;
} catch (e) {
...
}
Save your data
Realtime database
in 15 minutes
Authentication?
var provider = new GoogleAuthProvider();
try {
await auth().signInWithPopup(provider);
} catch (e) {
...
}
Google provider
auth().currentUser
Current user
// Registers user with e-mail and password
await auth()
.createUserWithEmailAndPassword(
"jana.moudra@gmail.com",
"pass");...
Authentication
in 5 minutes
Cloud storage
File file = ...;
try {
UploadTaskSnapshot snapshot = await storageRef
.child(file.name)
.put(file)
.future;
_showUploadIma...
Cloud storage
in 10 minutes
+
pub.dartlang.org/packages/firebase3
github.com/Janamou/firebase3-dart
Where can I get it?
You can also
build an app like this
Jana Moudra @Janamou +JanaMoudra
Upcoming SlideShare
Loading in …5
×

How to build a Dart and Firebase app in 30 mins

1,312 views

Published on

Jana Moudra shows how to use Dart and Firebase to build an application in a couple of minutes. The demo application is available on Github: https://github.com/Janamou/firebase-demo.

Published in: Technology
  • Be the first to comment

How to build a Dart and Firebase app in 30 mins

  1. 1. How to build a Dart and Firebase app in 30 mins Jana Moudra @Janamou +JanaMoudra
  2. 2. Hi! Co-Founder at GDE for Teacher
  3. 3. + =
  4. 4. Makes me productive I just sit and write the code I know what’s happening Me and ?
  5. 5. Makes me productive I just sit and write the code I know what’s happening I can build great apps! Me and ?
  6. 6. Great apps need a backend!
  7. 7. Needed Lots of implementation Eh, backend? Database File Upload User accounts Anonymous user OAuth Hosting ...
  8. 8. Needed Lots of implementation Eh, backend? Database File Upload User accounts Anonymous user OAuth Hosting ... For a simple app...
  9. 9. OMG, backend!
  10. 10. ... backend without implementing BACKEND ... ???
  11. 11. What can we do?
  12. 12. Hello Firebase!
  13. 13. Firebase Realtime database Authentication Cloud storage Hosting ...
  14. 14. + firebase3 package JS interop Wrapper
  15. 15. Types
  16. 16. // Removes data at location try { await childRef.remove(); } catch (e) { print("Error while deleting item, $e"); } Futures
  17. 17. // When auth state changes auth() .onAuthStateChanged .where((e) => e.user != null) .listen((e) { User u = e.user; ... }); Streams
  18. 18. // Updates data in a transaction await childRef.transaction((value) => newValue ); Methods
  19. 19. // Updates data in a transaction await childRef.transaction((value) => newValue ); Methods No allowInterop()
  20. 20. DEMO
  21. 21. HOW to build an app like this?
  22. 22. import 'package:firebase3/firebase.dart'; Import Firebase3!
  23. 23. Realtime database Authentication Cloud storage Hosting +
  24. 24. Realtime database?
  25. 25. { "notes" : { "-KUsbAq6445-ynO4lg6Z" : { "img_url" : "https://firebasestorage.googlea...", "text" : "Is awesome!", "title" : "Dart" }, ... } } Structure your data
  26. 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. 27. try { await databaseRef .push({"text": "Hi"}) .future; } catch (e) { ... } Save your data
  28. 28. Realtime database in 15 minutes
  29. 29. Authentication?
  30. 30. var provider = new GoogleAuthProvider(); try { await auth().signInWithPopup(provider); } catch (e) { ... } Google provider
  31. 31. auth().currentUser Current user
  32. 32. // Registers user with e-mail and password await auth() .createUserWithEmailAndPassword( "jana.moudra@gmail.com", "pass"); E-mail provider
  33. 33. Authentication in 5 minutes
  34. 34. Cloud storage
  35. 35. File file = ...; try { UploadTaskSnapshot snapshot = await storageRef .child(file.name) .put(file) .future; _showUploadImage(snapshot.downloadURL); } catch (e) { ... } Image upload
  36. 36. Cloud storage in 10 minutes
  37. 37. +
  38. 38. pub.dartlang.org/packages/firebase3 github.com/Janamou/firebase3-dart Where can I get it?
  39. 39. You can also build an app like this Jana Moudra @Janamou +JanaMoudra

×