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

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 simple app...

OMG, backend!

... backendwithout

implementing BACKEND ...

???

Whatcan we do?

Hello Firebase!

Firebase

Realtime database

Authentication

Cloud storage

Hosting

...

+

firebase3 package

JS interop

Wrapper

Types

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

Futures

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

Streams

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

Methods

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

Methods

No allowInterop()

DEMO

HOW to buildan 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" : "Dart" }, ... }}

Structure your data

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

Load your data

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

Save your data

Realtime databasein 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 passwordawait auth() .createUserWithEmailAndPassword( "jana.moudra@gmail.com", "pass");

E-mail provider

Authentication in 5 minutes

Cloud storage

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

Image upload

Cloud storage in 10 minutes

+

pub.dartlang.org/packages/firebase3

github.com/Janamou/firebase3-dart

Where can I get it?

You can alsobuild an app like this

Jana Moudra @Janamou +JanaMoudra