How to build a Dart and Firebase app in 30 mins

Jana Moudrá
Jana MoudráFrontend Developer, Web and Mobile Designer, Android Developer at Juicymo
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 simple app...
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;
...
});
Streams
// 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" : "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 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");
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 also
build an app like this
Jana Moudra @Janamou +JanaMoudra
1 of 39

Recommended

How AngularDart & Firebase did an App together by
How AngularDart & Firebase did an App togetherHow AngularDart & Firebase did an App together
How AngularDart & Firebase did an App togetherJana Moudrá
1.9K views70 slides
Firebase for the Web by
Firebase for the WebFirebase for the Web
Firebase for the WebJana Moudrá
1.1K views36 slides
Instant and offline apps with Service Worker by
Instant and offline apps with Service WorkerInstant and offline apps with Service Worker
Instant and offline apps with Service WorkerChang W. Doh
856 views82 slides
Front Ends for Back End Developers - Spring I/O 2017 by
Front Ends for Back End Developers - Spring I/O 2017Front Ends for Back End Developers - Spring I/O 2017
Front Ends for Back End Developers - Spring I/O 2017Matt Raible
1.4K views105 slides
Front End Development for Back End Java Developers - NYJavaSIG 2019 by
Front End Development for Back End Java Developers - NYJavaSIG 2019Front End Development for Back End Java Developers - NYJavaSIG 2019
Front End Development for Back End Java Developers - NYJavaSIG 2019Matt Raible
732 views113 slides
Desktop apps with node webkit by
Desktop apps with node webkitDesktop apps with node webkit
Desktop apps with node webkitPaul Jensen
33.3K views99 slides

More Related Content

What's hot

Secure my ng-app by
Secure my ng-appSecure my ng-app
Secure my ng-appM A Hossain Tonu
5.3K views46 slides
Play Framework on Google App Engine - Productivity Stack by
Play Framework on Google App Engine - Productivity StackPlay Framework on Google App Engine - Productivity Stack
Play Framework on Google App Engine - Productivity StackMarcin Stepien
3.9K views35 slides
Tek 2013 - Building Web Apps from a New Angle with AngularJS by
Tek 2013 - Building Web Apps from a New Angle with AngularJSTek 2013 - Building Web Apps from a New Angle with AngularJS
Tek 2013 - Building Web Apps from a New Angle with AngularJSPablo Godel
13.5K views53 slides
Real World Lessons in Progressive Web Application & Service Worker Caching by
Real World Lessons in Progressive Web Application & Service Worker CachingReal World Lessons in Progressive Web Application & Service Worker Caching
Real World Lessons in Progressive Web Application & Service Worker CachingChris Love
2K views63 slides
Service Worker - Reliability bits by
Service Worker - Reliability bitsService Worker - Reliability bits
Service Worker - Reliability bitsjungkees
821 views49 slides
WSGI, Repoze, Deliverence by
WSGI, Repoze, DeliverenceWSGI, Repoze, Deliverence
WSGI, Repoze, DeliverenceQuintagroup
755 views24 slides

What's hot(20)

Play Framework on Google App Engine - Productivity Stack by Marcin Stepien
Play Framework on Google App Engine - Productivity StackPlay Framework on Google App Engine - Productivity Stack
Play Framework on Google App Engine - Productivity Stack
Marcin Stepien3.9K views
Tek 2013 - Building Web Apps from a New Angle with AngularJS by Pablo Godel
Tek 2013 - Building Web Apps from a New Angle with AngularJSTek 2013 - Building Web Apps from a New Angle with AngularJS
Tek 2013 - Building Web Apps from a New Angle with AngularJS
Pablo Godel13.5K views
Real World Lessons in Progressive Web Application & Service Worker Caching by Chris Love
Real World Lessons in Progressive Web Application & Service Worker CachingReal World Lessons in Progressive Web Application & Service Worker Caching
Real World Lessons in Progressive Web Application & Service Worker Caching
Chris Love2K views
Service Worker - Reliability bits by jungkees
Service Worker - Reliability bitsService Worker - Reliability bits
Service Worker - Reliability bits
jungkees821 views
WSGI, Repoze, Deliverence by Quintagroup
WSGI, Repoze, DeliverenceWSGI, Repoze, Deliverence
WSGI, Repoze, Deliverence
Quintagroup755 views
Launch Arguments & NSUserDefaults by Franck Lefebvre by CocoaHeads France
Launch Arguments & NSUserDefaults by Franck LefebvreLaunch Arguments & NSUserDefaults by Franck Lefebvre
Launch Arguments & NSUserDefaults by Franck Lefebvre
CocoaHeads France7.3K views
Drive chrome(headless) with puppeteer by VodqaBLR
Drive chrome(headless) with puppeteerDrive chrome(headless) with puppeteer
Drive chrome(headless) with puppeteer
VodqaBLR1.9K views
Native Desktop App with Node.js Webkit (HTML, CSS & Javascript) by Eddie Lau
Native Desktop App with Node.js Webkit (HTML, CSS & Javascript)Native Desktop App with Node.js Webkit (HTML, CSS & Javascript)
Native Desktop App with Node.js Webkit (HTML, CSS & Javascript)
Eddie Lau18.9K views
Don't Over-React - just use Vue! by Raymond Camden
Don't Over-React - just use Vue!Don't Over-React - just use Vue!
Don't Over-React - just use Vue!
Raymond Camden2.6K views
Firebase Basics - Dialog Demo for Group Tech Staff by Tharaka Devinda
Firebase Basics - Dialog Demo for Group Tech StaffFirebase Basics - Dialog Demo for Group Tech Staff
Firebase Basics - Dialog Demo for Group Tech Staff
Tharaka Devinda184 views
Chrome enchanted 2015 by Chang W. Doh
Chrome enchanted 2015Chrome enchanted 2015
Chrome enchanted 2015
Chang W. Doh2.1K views
Front End Development for Back End Developers - Devoxx UK 2017 by Matt Raible
 Front End Development for Back End Developers - Devoxx UK 2017 Front End Development for Back End Developers - Devoxx UK 2017
Front End Development for Back End Developers - Devoxx UK 2017
Matt Raible549 views
Building the Front End with AngularJS by John Ennew
Building the Front End with AngularJSBuilding the Front End with AngularJS
Building the Front End with AngularJS
John Ennew783 views
GlobalLogic Test Automation Online TechTalk “Playwright — A New Hope” by GlobalLogic Ukraine
GlobalLogic Test Automation Online TechTalk “Playwright — A New Hope”GlobalLogic Test Automation Online TechTalk “Playwright — A New Hope”
GlobalLogic Test Automation Online TechTalk “Playwright — A New Hope”
How We Build NG-MY Websites: Performance, SEO, CI, CD by Seven Peaks Speaks
How We Build NG-MY Websites: Performance, SEO, CI, CDHow We Build NG-MY Websites: Performance, SEO, CI, CD
How We Build NG-MY Websites: Performance, SEO, CI, CD
greach 2014 marco vermeulen bdd using cucumber jvm and groovy by Jessie Evangelista
greach 2014 marco vermeulen bdd using cucumber jvm and groovygreach 2014 marco vermeulen bdd using cucumber jvm and groovy
greach 2014 marco vermeulen bdd using cucumber jvm and groovy
Jessie Evangelista1.2K views
Let Grunt do the work, focus on the fun! by Dirk Ginader
Let Grunt do the work, focus on the fun!Let Grunt do the work, focus on the fun!
Let Grunt do the work, focus on the fun!
Dirk Ginader5.8K views
Bring Your Web App to the Next Level. Wprowadzenie do Progressive Web App by The Software House
Bring Your Web App to the Next Level. Wprowadzenie do Progressive Web AppBring Your Web App to the Next Level. Wprowadzenie do Progressive Web App
Bring Your Web App to the Next Level. Wprowadzenie do Progressive Web App
The Software House436 views

Similar to How to build a Dart and Firebase app in 30 mins

Firestore MENA digital days : GDG Abu dhabi by
Firestore MENA digital days : GDG Abu dhabiFirestore MENA digital days : GDG Abu dhabi
Firestore MENA digital days : GDG Abu dhabiShashank Kakroo
98 views38 slides
Get started with building native mobile apps interacting with SharePoint by
Get started with building native mobile apps interacting with SharePointGet started with building native mobile apps interacting with SharePoint
Get started with building native mobile apps interacting with SharePointYaroslav Pentsarskyy [MVP]
1.9K views54 slides
Intro to Firebase Realtime Database and Authentication by
Intro to Firebase Realtime Database and AuthenticationIntro to Firebase Realtime Database and Authentication
Intro to Firebase Realtime Database and Authenticationkristinferrier
330 views19 slides
Firebase overview by
Firebase overviewFirebase overview
Firebase overviewMaksym Davydov
263 views53 slides
Building with Firebase by
Building with FirebaseBuilding with Firebase
Building with FirebaseMike Fowler
109 views45 slides
Advanced Web Development by
Advanced Web DevelopmentAdvanced Web Development
Advanced Web DevelopmentRobert J. Stein
11.8K views128 slides

Similar to How to build a Dart and Firebase app in 30 mins(20)

Firestore MENA digital days : GDG Abu dhabi by Shashank Kakroo
Firestore MENA digital days : GDG Abu dhabiFirestore MENA digital days : GDG Abu dhabi
Firestore MENA digital days : GDG Abu dhabi
Shashank Kakroo98 views
Intro to Firebase Realtime Database and Authentication by kristinferrier
Intro to Firebase Realtime Database and AuthenticationIntro to Firebase Realtime Database and Authentication
Intro to Firebase Realtime Database and Authentication
kristinferrier330 views
Building with Firebase by Mike Fowler
Building with FirebaseBuilding with Firebase
Building with Firebase
Mike Fowler109 views
Sebastian Schmidt, Rachel Myers - How To Go Serverless And Not Violate The GD... by Codemotion
Sebastian Schmidt, Rachel Myers - How To Go Serverless And Not Violate The GD...Sebastian Schmidt, Rachel Myers - How To Go Serverless And Not Violate The GD...
Sebastian Schmidt, Rachel Myers - How To Go Serverless And Not Violate The GD...
Codemotion474 views
Lecture 11 Firebase overview by Maksym Davydov
Lecture 11 Firebase overviewLecture 11 Firebase overview
Lecture 11 Firebase overview
Maksym Davydov477 views
Firebase & SwiftUI Workshop by Peter Friese
Firebase & SwiftUI WorkshopFirebase & SwiftUI Workshop
Firebase & SwiftUI Workshop
Peter Friese158 views
Introduction to Firebase [Google I/O Extended Bangkok 2016] by Sittiphol Phanvilai
Introduction to Firebase [Google I/O Extended Bangkok 2016]Introduction to Firebase [Google I/O Extended Bangkok 2016]
Introduction to Firebase [Google I/O Extended Bangkok 2016]
Sittiphol Phanvilai10.7K views
Developing advanced universal apps using html & js by Senthamil Selvan
Developing advanced universal apps using html & jsDeveloping advanced universal apps using html & js
Developing advanced universal apps using html & js
Senthamil Selvan724 views
Intro to Firebase || Event by DSC UNIDEB by Muhammad Raza
Intro to Firebase || Event by DSC UNIDEBIntro to Firebase || Event by DSC UNIDEB
Intro to Firebase || Event by DSC UNIDEB
Muhammad Raza81 views
HTML5 for Rich User Experience by Mahbubur Rahman
HTML5 for Rich User ExperienceHTML5 for Rich User Experience
HTML5 for Rich User Experience
Mahbubur Rahman2.9K views
Taking Web Apps Offline by Pedro Morais
Taking Web Apps OfflineTaking Web Apps Offline
Taking Web Apps Offline
Pedro Morais3.6K views
PyCon India 2010 Building Scalable apps using appengine by Pranav Prakash
PyCon India 2010 Building Scalable apps using appenginePyCon India 2010 Building Scalable apps using appengine
PyCon India 2010 Building Scalable apps using appengine
Pranav Prakash621 views
IndexedDB and Push Notifications in Progressive Web Apps by Adégòkè Obasá
IndexedDB and Push Notifications in Progressive Web AppsIndexedDB and Push Notifications in Progressive Web Apps
IndexedDB and Push Notifications in Progressive Web Apps
Adégòkè Obasá1.5K views

More from Jana Moudrá

Progressive Web Apps by
Progressive Web AppsProgressive Web Apps
Progressive Web AppsJana Moudrá
871 views42 slides
Let's Play Dart by
Let's Play DartLet's Play Dart
Let's Play DartJana Moudrá
5.8K views45 slides
How to bake an app in Dart and Polymer by
How to bake an app in Dart and PolymerHow to bake an app in Dart and Polymer
How to bake an app in Dart and PolymerJana Moudrá
2.2K views56 slides
Dart, Darrt, Darrrt by
Dart, Darrt, DarrrtDart, Darrt, Darrrt
Dart, Darrt, DarrrtJana Moudrá
3.4K views51 slides
Dart by
DartDart
DartJana Moudrá
1.6K views18 slides
Android UI Testing with uiautomator by
Android UI Testing with uiautomatorAndroid UI Testing with uiautomator
Android UI Testing with uiautomatorJana Moudrá
4.2K views26 slides

More from Jana Moudrá(9)

Progressive Web Apps by Jana Moudrá
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
Jana Moudrá871 views
How to bake an app in Dart and Polymer by Jana Moudrá
How to bake an app in Dart and PolymerHow to bake an app in Dart and Polymer
How to bake an app in Dart and Polymer
Jana Moudrá2.2K views
Dart, Darrt, Darrrt by Jana Moudrá
Dart, Darrt, DarrrtDart, Darrt, Darrrt
Dart, Darrt, Darrrt
Jana Moudrá3.4K views
Android UI Testing with uiautomator by Jana Moudrá
Android UI Testing with uiautomatorAndroid UI Testing with uiautomator
Android UI Testing with uiautomator
Jana Moudrá4.2K views
Bezpečnost platformy Android by Jana Moudrá
Bezpečnost platformy AndroidBezpečnost platformy Android
Bezpečnost platformy Android
Jana Moudrá628 views
Introduction to the Dart language by Jana Moudrá
Introduction to the Dart languageIntroduction to the Dart language
Introduction to the Dart language
Jana Moudrá3.9K views
Introduction to the Dart - Dart Flight School Liberec Hackathon by Jana Moudrá
Introduction to the Dart - Dart Flight School Liberec Hackathon Introduction to the Dart - Dart Flight School Liberec Hackathon
Introduction to the Dart - Dart Flight School Liberec Hackathon
Jana Moudrá1.3K views

Recently uploaded

Vertical User Stories by
Vertical User StoriesVertical User Stories
Vertical User StoriesMoisés Armani Ramírez
14 views16 slides
Voice Logger - Telephony Integration Solution at Aegis by
Voice Logger - Telephony Integration Solution at AegisVoice Logger - Telephony Integration Solution at Aegis
Voice Logger - Telephony Integration Solution at AegisNirmal Sharma
39 views1 slide
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLive by
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLiveAutomating a World-Class Technology Conference; Behind the Scenes of CiscoLive
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLiveNetwork Automation Forum
34 views35 slides
Mini-Track: AI and ML in Network Operations Applications by
Mini-Track: AI and ML in Network Operations ApplicationsMini-Track: AI and ML in Network Operations Applications
Mini-Track: AI and ML in Network Operations ApplicationsNetwork Automation Forum
10 views24 slides
HTTP headers that make your website go faster - devs.gent November 2023 by
HTTP headers that make your website go faster - devs.gent November 2023HTTP headers that make your website go faster - devs.gent November 2023
HTTP headers that make your website go faster - devs.gent November 2023Thijs Feryn
22 views151 slides
ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ... by
ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ...ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ...
ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ...Jasper Oosterveld
19 views49 slides

Recently uploaded(20)

Voice Logger - Telephony Integration Solution at Aegis by Nirmal Sharma
Voice Logger - Telephony Integration Solution at AegisVoice Logger - Telephony Integration Solution at Aegis
Voice Logger - Telephony Integration Solution at Aegis
Nirmal Sharma39 views
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLive by Network Automation Forum
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLiveAutomating a World-Class Technology Conference; Behind the Scenes of CiscoLive
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLive
HTTP headers that make your website go faster - devs.gent November 2023 by Thijs Feryn
HTTP headers that make your website go faster - devs.gent November 2023HTTP headers that make your website go faster - devs.gent November 2023
HTTP headers that make your website go faster - devs.gent November 2023
Thijs Feryn22 views
ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ... by Jasper Oosterveld
ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ...ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ...
ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ...
Igniting Next Level Productivity with AI-Infused Data Integration Workflows by Safe Software
Igniting Next Level Productivity with AI-Infused Data Integration Workflows Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Safe Software280 views
GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N... by James Anderson
GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...
GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...
James Anderson92 views
【USB韌體設計課程】精選講義節錄-USB的列舉過程_艾鍗學院 by IttrainingIttraining
【USB韌體設計課程】精選講義節錄-USB的列舉過程_艾鍗學院【USB韌體設計課程】精選講義節錄-USB的列舉過程_艾鍗學院
【USB韌體設計課程】精選講義節錄-USB的列舉過程_艾鍗學院
PharoJS - Zürich Smalltalk Group Meetup November 2023 by Noury Bouraqadi
PharoJS - Zürich Smalltalk Group Meetup November 2023PharoJS - Zürich Smalltalk Group Meetup November 2023
PharoJS - Zürich Smalltalk Group Meetup November 2023
Noury Bouraqadi132 views
TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f... by TrustArc
TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f...TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f...
TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f...
TrustArc11 views
STKI Israeli Market Study 2023 corrected forecast 2023_24 v3.pdf by Dr. Jimmy Schwarzkopf
STKI Israeli Market Study 2023   corrected forecast 2023_24 v3.pdfSTKI Israeli Market Study 2023   corrected forecast 2023_24 v3.pdf
STKI Israeli Market Study 2023 corrected forecast 2023_24 v3.pdf

How to build a Dart and Firebase app in 30 mins