Successfully reported this slideshow.

How to build a Dart and Firebase app in 30 mins

2

Share

Loading in …3
×
1 of 39
1 of 39

How to build a Dart and Firebase app in 30 mins

2

Share

Download to read offline

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.

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.

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

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

×