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

How to build a Dart and Firebase app in 30 mins

Embed Size (px)

Citation preview

Page 1: How to build a Dart and Firebase app in 30 mins

How to builda Dart and Firebase app

in 30 mins

Jana Moudra @Janamou +JanaMoudra

Page 2: How to build a Dart and Firebase app in 30 mins

Hi!

Co-Founder at

GDE for

Teacher

Page 3: How to build a Dart and Firebase app in 30 mins

+ =

Page 4: How to build a Dart and Firebase app in 30 mins

Makes me productive

I just sit and write the code

I know what’s happening

Me and ?

Page 5: How to build a Dart and Firebase app in 30 mins

Makes me productive

I just sit and write the code

I know what’s happening

I can build great apps!

Me and ?

Page 6: How to build a Dart and Firebase app in 30 mins

Great apps need a backend!

Page 7: How to build a Dart and Firebase app in 30 mins

Needed

Lots of implementation

Eh, backend?

Database File Upload User accounts

Anonymous user OAuth Hosting ...

Page 8: How to build a Dart and Firebase app in 30 mins

Needed

Lots of implementation

Eh, backend?

Database File Upload User accounts

Anonymous user OAuth Hosting ...

For a simple app...

Page 9: How to build a Dart and Firebase app in 30 mins

OMG, backend!

Page 10: How to build a Dart and Firebase app in 30 mins

... backendwithout

implementing BACKEND ...

???

Page 11: How to build a Dart and Firebase app in 30 mins

Whatcan we do?

Page 12: How to build a Dart and Firebase app in 30 mins

Hello Firebase!

Page 13: How to build a Dart and Firebase app in 30 mins

Firebase

Realtime database

Authentication

Cloud storage

Hosting

...

Page 14: How to build a Dart and Firebase app in 30 mins

+

firebase3 package

JS interop

Wrapper

Page 15: How to build a Dart and Firebase app in 30 mins

Types

Page 16: How to build a Dart and Firebase app in 30 mins

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

Futures

Page 17: How to build a Dart and Firebase app in 30 mins

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

Streams

Page 18: How to build a Dart and Firebase app in 30 mins

// Updates data in a transactionawait childRef.transaction((value) => newValue);

Methods

Page 19: How to build a Dart and Firebase app in 30 mins

// Updates data in a transactionawait childRef.transaction((value) => newValue);

Methods

No allowInterop()

Page 20: How to build a Dart and Firebase app in 30 mins

DEMO

Page 21: How to build a Dart and Firebase app in 30 mins

HOW to buildan app like this?

Page 22: How to build a Dart and Firebase app in 30 mins

import 'package:firebase3/firebase.dart';

Import Firebase3!

Page 23: How to build a Dart and Firebase app in 30 mins

Realtime database

Authentication

Cloud storage

Hosting

+

Page 24: How to build a Dart and Firebase app in 30 mins

Realtime database?

Page 25: How to build a Dart and Firebase app in 30 mins

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

Structure your data

Page 26: How to build a Dart and Firebase app in 30 mins

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

Load your data

Page 27: How to build a Dart and Firebase app in 30 mins

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

Save your data

Page 28: How to build a Dart and Firebase app in 30 mins

Realtime databasein 15 minutes

Page 29: How to build a Dart and Firebase app in 30 mins

Authentication?

Page 30: How to build a Dart and Firebase app in 30 mins

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

Google provider

Page 31: How to build a Dart and Firebase app in 30 mins

auth().currentUser

Current user

Page 32: How to build a Dart and Firebase app in 30 mins

// Registers user with e-mail and passwordawait auth() .createUserWithEmailAndPassword( "[email protected]", "pass");

E-mail provider

Page 33: How to build a Dart and Firebase app in 30 mins

Authentication in 5 minutes

Page 34: How to build a Dart and Firebase app in 30 mins

Cloud storage

Page 35: How to build a Dart and Firebase app in 30 mins

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

Image upload

Page 36: How to build a Dart and Firebase app in 30 mins

Cloud storage in 10 minutes

Page 37: How to build a Dart and Firebase app in 30 mins

+

Page 38: How to build a Dart and Firebase app in 30 mins

pub.dartlang.org/packages/firebase3

github.com/Janamou/firebase3-dart

Where can I get it?

Page 39: How to build a Dart and Firebase app in 30 mins

You can alsobuild an app like this

Jana Moudra @Janamou +JanaMoudra