[APPLAUSE]
JANA MOUDRA: Hi.
I'm so much excited to be here and to talk about Dart.
I'm Jana Moudra, and today I would
love to show you how we can build an app using a Dart
and Firebase.
So before I start, I will show you
or I will tell you who am I. I'm from Prague in Czech Republic.
I have there a company called Juicymo, where we
do mobile and app development.
And I'm also a Google Developer expert for Dart
because I love to talk about Dart.
And last but not least, I'm a teacher
at a university because I love to teach and to teach
developers.
So today I would love to show you
how we can build a great and cool applications using
Dart and Firebase and how it can be
so much productive with them.
So let's start with me and Dart, Why I do love Dart so much.
Dart makes me so much productive and happy developer.
Because I often say that when I'm writing Dart applications,
I just sit and write a code which works.
That's awesome.
And also, I know what's happening there.
I can't explain my happiness with this
because, yeah, it works.
And I know why it works and how it works,
and I can build a great application with Dart.
But great application need a backend.
And backend, there might seem to be a lot of regs
in implementing backends.
Because, well, you have to have a developer who
will implement that backend.
And there has to be a lot of stuff to do.
So, for example, you have to have a database.
So you have to set up a database, select a database,
and do a lot of stuff around a database.
Then you, for example, want to have a file upload,
and you want to have some users in your application.
So you have to implement a login, registration, sign out.
And also, users forget their password.
So you have to also implement forget password function.
Then you would love to have an anonymous user, [INAUDIBLE],
or you have to have some hosting for your application.
And it's quite a lot of work if you have a simple application.
a lot of work to do.
Well, and this girl doesn't really
love implementing backends because they are not
very much enjoyable to her because there is no design
and colors at the backend.
And worse, she would love to have a backend
without implementing backend.
What we can do with this?
Because this girl doesn't love implementing backends,
she doesn't want to hire a developer for that.
So what can we do?
Say hello to a service called Firebase.
With Firebase, you can have a lot of nice services, features.
You can have a realtime debase, authentication, cloud storage,
hosting, and more.
And they are so easy to implement.
And you can then focus on much more important stuff.
And I have great news for you.
Because here, we are at Dart summit.
We want to hear about Dart.
So you can use Firebase with Dart
by using Firebase3 free package.
I implement it.
The Firebase3 package is a package
which is around JS interop.
You heard about how to implement JS interop today.
So I'm using the new JS interop, still like at the bottom layer.
And there is also a wrapper around the JS interop
to provide you developers a nicer and better developer API
and experience.
So what about the experience?
What's the better experience with this wrapper?
Well, types.
I have to say I love types, and I love using them.
So with this Firebase3 package, you can use types.
And you can benefit from it.
Like, for example, when you're using code completion,
it's better for documentation and so on.
Futures.
I love futures, especially a single weight.
So lot of methods in this Firebase3 package.
Write your own future, and you can use it.
Streams.
We don't want to implement some callbacks.
Like, streams are much more nicer for this.
We can listen on streams.
We can filter them.
And then we can like-- we can then do some functionality when
something even happens.
Methods.
You might have heard today that there is some [? Hello ?]
[? interop. ?] So don't worry about this because with this
Firebase3 package, you don't have to care about and any
[? Hello ?] [? interop ?].
You just pause there as parameter functions,
which are normal Dart functions without any [? Hello ?]
[? interop. ?]
So that's all cool stuff, but Jana, show us something,
show us some demo.
So let's go.
So I have a simple valve application, which is kind of
[INAUDIBLE].
Here you can see that I can just somehow sign in.
And I'm just having here some notes.
So let's do first the sign in.
I have signed with Google.
So I will sign in.
There's some time-- because I have the full screen.
And yes, now I'm signed in with Google.
So this is a moment of Firebase authentication.
And I'm now signed in.
Now again, see that lots of notes
have-- I'm able to create a new note,
or also I am able to delete a note.
So let's start with creating a new note.
So let's create a new note.
Dart summit is awesome.
And let's add the note.
And this [INAUDIBLE] Firebase.
They're in Firebase, and you can see that the note appeared
immediately.
OK, like posting new notes, so let's put there some image.
So I'll put there on image.
I have prepared my image of my earrings
and-- to our Dart earrings.
And I have to write there note text, so Dart earrings.
And let's post them there.
And they appeared immediately again.
So I can refresh.
And you can see all of the notes I did there.
So I'll show you another thing.
Because all the clients which are connected to this web
page are able to post their data when they
load with their Google login.
And then if they post some note, the note
appears in all clients.
So I will do this with my mobile phone.
So let's do that.
So I'll write here-- note, summit, and let's take picture.
So I'll do a picture of the screen.
And then I'll post it.
And note not posted yet.
So now I'm loading the image.
And now I'll post it.
And you can see it appeared immediately.
[APPLAUSE]
This application is simple, but it's full
implement in Dart and Firebase using this library.
So let's get back to my presentation.
So how you can build an app like this?
Let's take a look.
So first thing, what do you need to do know
is to find a Firebase3 package.
It's [INAUDIBLE].
So you can put it in your [INAUDIBLE] file.
Then you can do the [INAUDIBLE].
You will get it.
And you can use it.
So then you have to import it.
And because as I already said, the package
is like of wraparound interop.
You have to also include-- or you can't-- you have
to remember to include the original JavaScript SDK
of Firebase to your HTML file because it's a wraparound
interop.
So this is the import.
And then what we can use?
We can use all services like real time database,
authentication, cloud storage, and hosting.
So let's take a look at realtime database.
Realtime database is cloud-hosted database
which uses JSON distorted data.
So let's take a look how we can structure our data.
Data are JSON, so you can see here our notes.
So there is one note.
The note has some key and some attribute.
And then let's take look how can we load
the data to our application.
This is a code from my app.
And so we are listening to some childAdded even.
So we put there on our databaseRef,
we put onChildAdded stream, and then
we start listen to that stream.
And if there aren't new data added to our application,
new Note is added.
Then we get to the listen part.
We get the snapshot of the data.
Then we can get a value from them, which is a Map.
And we can, for example, create the new note and show it.
So that was simple.
Then we want to save the data.
Because when we want to log data,
we have to also save data, because we
need to have some data.
Saving is really simple.
You have your databaseRef.
Ref.
So you call push.
And with the push, you put there some nice Dart
object so it can be a list, or here you
can see a map, which has been pushed to the server,
to the Firebase server.
And we are using a [INAUDIBLE] because we
are having their futures.
So that was pretty simple.
We can do more stuff.
We can do also update, or we can do update in transactions.
And we can also do delete on the data.
And it's only with calling some methods, which
are available because of the Firebase.
And this took us about 15 minutes of implementation.
So let's take a look at more on authentication.
Authentication, because we want to have
some users in our application.
So we want to be able to log in, log out, register, or so on.
And our application used a Google login.
So we have there a Google provider.
So how to do this?
Let's create new GoogleAuthProvider,
and then call the methods called signInWithPopup
with that provider on our auth object.
And you are done.
And That's all.
You can also have other providers.
There is for Twitter GitHub, Facebook.
You can implement your own.
Or you can implement an email provider
if you want to have the standard email login, logout and so on.
Sometimes you want to get your current user
in the application.
This is really simple.
Just call out currentUser.
And it will get the current user in your application,
which is logged in.
And you can get the image about the user.
Or you can get a name, email address, and so on.
And also, I mentioned a email provider.
If you want to implement for example, the registration,
there is a method called createUserWithEmalAndPassword,
which you will call in your auth object.
And then the user is registered.
You will get the user, and you can who displayed a profile
or whatever.
So authentication is also really simple.
You are just calling some method which does the stuff for you
on Firebase.
So let's say that this took us five minutes.
Now let's take a look at cloud storage.
Because sometimes we want to be able to upload some files
to our server, which we have in our application
because we had their image upload.
So let's take a look how to do this.
So first you need to get the file.
So somehow you get the file.
And then you need to call on your storage reference.
You need to call the put method.
But you need to also put there a path to that file.
So you are calling child with a file name.
And then you call the method put,
which will upload a file to the cloud storage.
And because we want to use futures,
we will call future to use as a single way and so on.
And then when we have the image uploaded,
we can get the download URL from the snapshot.
So again, cloud storage, implementation
of this file upload was really easy-- 10 minutes.
You can do more.
And you can find everything in the documentation,
and it's really easy to implement.
So I show you how you could implement
application which uses Dart and Firebase very fast.
Dart provides you nice types, better productivity,
and nice API.
And Firebase provides you great services which you can use,
and you don't have to implement them.
And you can focus on much more important stuff.
Dart and Firebase are so cool and great partners together.
Maybe you want to ask where you can get this.
So the library is already on the pub,
so you can search there for Firebase3.
You will find it there.
It's also on GitHub, so you can download it easily.
And finally, I wanted to say you can also build an app like this
using Dart and Firebase.
Thank you.
[APPLAUSE]