How to build a Dart and Firebase app in 30 mins (Dart Developer Summit 2016)

How to build a Dart and Firebase app in 30 mins (Dart Developer Summit 2016)

hi I'm so much excited to be here and to talk about dart Anna mudra and today I would love to show you how you can build an app using a dart and firebase so before I start I will show you or I will tell you who I am I I'm from brac in Czech Republic I have there a company called jury SEMA where we do mobile and web development and I'm also Google developer expert for Dart yes I love to talk about Dart and last but not least I will teach her at the University because I love to teach and to teach developers so today I would love to show you how you can build a great and cool applications using dart and firebase and how can be so much more 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 am writing their applications I just sit and write the code which works that's awesome and also I know what's happening there I can't explain my happiness vplace because yeah it works and I know white works and hard works and I can build a great application with dart but great applications need a backhand and back-end there might seem to be a lot of break any movement in backends because well you have to have a developer who implemented back-end 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 an ester base select database and do a lot of stuff around the 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 log in registration sign sign out and also like like users forget their password so you have to also implement forget password function then you would love to have enemies user influence have allowed out or you have to have some hosting for your application and it's quite a lot of work if you have a simple application 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 back-end without implementing back-end what we can do with this because this girl doesn't love him poetic 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 real time database authentication cloud storage who's hosting and more and they are so easy to implement and you can then focus on much more important stuff and I have a great new for you because here we are at dart summit we want to her about Dart so you can use firebase with dart by using firebase free package I implemented the firebase free package is a package which is around J's Interop you heard about how to implement your Center up today so I'm using the new J's Interop just like the bottom layer and it there is also a wrapper around the J's Interop to provide you developers a nicer and better developer API and experience so what about the experience what is the better experience with this wrapper well types I have to say I love types and I love using them so with this firebase free package you can use types and you can benefit from it but like for example any recent code completion it's better for documentation and so on futures I love futures especially a Seng awaits so lots of methods in the firebase free package return 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 on we can then do some functionality when some even Hatton's methods you might heard today that there is like some hello intro so don't worry about this because this far bass free package you don't have to care about any other syrup you just pass that as a parameter functions which are normal dot functions without any other interval so but that's all cool stuff but Jana show us something show us some demo so let's go so I have a simple like valve application which is kind of no support here you can see that I can just somehow sign in and I'm just like having here some notes so let's do first just sign in I have signed with Google so I will sign in there there's some time over because I have the full screen and yes now I'm signed in with Google so this is the moment of firebase investigation and I'm now sign it now we can see that the lots of nodes have unable to be like crazy you note or also I am able to delete a note so let's start with creating you note so like let's create a new node art summit is awesome and let's edge note and this is similar with firebase there in firebase and you can see a denote appeared immediately okay like first thing you know so let's put there some image so I'll put there an image I have your prepared my image of my earrings and to our dart earrings and I have to write their notes tag so dart earrings and let's put them there and they appeared immediately again so I can refresh and you can see all the notes are there so I'll show you another thing because unlike all the clients which are connected to this webpage are able to post their data and a load with their Google login and then if they post some note the note appears in all clients so I'll do this with my mobile phone so let's do that so I'll free right here know it like submit and let's take picture start I'll do a picture of the screen and then I'll post it and note not post it yet so now I'm loading the image and now I'll post it at and you can see it appeared immediately this application is simple by its fully implemented in dart and firebase using this library so let's get back to my presentation so how you can build the net like this let's take a look so first thing what you need to do is to find a firebase free package it settle upon the pop so you can put it in your pop so chiamo file then you can do the pub get 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 a wrapper around interrup you have to also include or you can't or you have to remember to include the original JavaScript SDK of firebase to your HTML file because it's it's a wrapper around interrup so this is the import and then what we can use we can use all services that like real time database authentication cloud storage and hosting so let's take a look at real time database real time database is closed or closed cloud hosted that bass Ritchie's Jason to store the data so let's take a look how we can like structure our data that are Jason so you can see here and notes so there is one note I do know it has some key and like some attribute and then let's take a look how can we load the data to our application this is a code from my app and so we are like listening to some child and it's even so we put there like on our database ref ref we put our child edit stream and then we start listen to that stream and if there are like new data editor application new note is edit then we get to 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 a new note and show it so that was like 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 like you have your just a bass riff so you call push and with the push you put there like some nice dark objects so it can be laced or here you can see a map which is then pushed ur server to the firebase server and we are using a simple s anyway 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 transactions we can also do delete on the data and it's all about calling some methods which are available which which are available because of the firebase and this took us about 15 minutes of implementation so let's take a look more on out education our education 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 Google login so we have their Google provider so how to do this let's create a new Google out provider and then called the method called sign-in with pop-up the provider on our Alfe object and you are done that's all you can also have other providers there's for Twitter github Facebook you can implement your own or you can implement an email provider if you want to have like the standard email login logout and so on sometimes you want to like get your current user in the application this is like really simple just call out current user and it will get the current user in your application which is logged in and you can get them image about the user you can get a name email address and so on and also I mentioned the email provider if you want to implement like for example the registration there is a method called create user if email and password which you will call on your out object and then like the user is registered you will get the user and you can like display the profile or whatever so our dedication 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 that's now take it take a 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 have 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 like you need to call on your start reference you need to call the put method but you need to also put there like a path to that file so we are calling child with the file name then you call them at put which will upload a file to the cloud storage and because we are we want to use futures we will call future just a single way and so on and then when we have damaged upload it we can get the download Earl from the snapshot so again cloud storage implementation of this file upload was really easy ten minutes you can do more and you can find everything in documentation and really easy to implement so I'll show you how you could implement the application which uses dart and firebase like very fast dart provides you nice types better productivity a 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 you want to ask where you can get this so the libraries already on the pop so you can search there for firebase free you'll find it there it's also github so you can download easily and finally I want to say you can also build an app like this using dart and firebase thank you

6 thoughts on “How to build a Dart and Firebase app in 30 mins (Dart Developer Summit 2016)

  1. Firebase is the way Google wants their money back for giving us Dart.
    Thats Why they don care anout giving "traditional SQL Servers" drivers like Maria DB,SQL SErver and so on.

Leave a Reply