Coding

Firebase | Vue.js + Vuetify + Firebase FULL PROJECT

  • 00:00:01 over the last videos we add our loads of
  • 00:00:04 functional he's already to this
  • 00:00:05 application and it's really taking shape
  • 00:00:08 now there's one thing missing we created
  • 00:00:11 at the beginning but we never used it
  • 00:00:13 then to sign up and sign-in pages now to
  • 00:00:16 continue with this project we definitely
  • 00:00:19 need users and for that we definitely
  • 00:00:21 need firebase so time to dive into
  • 00:00:24 firebase now for that I'll visit
  • 00:00:27 firebase google.com this is simply where
  • 00:00:30 you can well create a new fire rates
  • 00:00:32 project and for that you'll need a
  • 00:00:34 Google account so make sure to create
  • 00:00:36 one if you want to follow along actively
  • 00:00:38 and build your own project now I already
  • 00:00:41 do have one year so I can now go to my
  • 00:00:43 console to the firebase console where I
  • 00:00:46 can manage all my firebase projects now
  • 00:00:49 I only have one project here but I'm not
  • 00:00:51 going to use that one instead I'll
  • 00:00:53 create a new project here add project
  • 00:00:55 now you can give it any name here and
  • 00:00:57 we'll free to choose what you want I'll
  • 00:01:00 simply name it
  • 00:01:01 YouTube dad Meetup and then you can
  • 00:01:05 choose a region and here I simply choose
  • 00:01:07 Germany because that's where I live that
  • 00:01:09 the region you would choose here does
  • 00:01:11 not decide and you can read it here it
  • 00:01:13 does not determine where your data will
  • 00:01:16 be stored right so that is a different
  • 00:01:18 thing so this is Regis um the region
  • 00:01:22 where you or your company sits well with
  • 00:01:25 that set up you can click create project
  • 00:01:27 to create this new firebase project
  • 00:01:30 which I want to use it'll take a couple
  • 00:01:32 of seconds once it's finished it'll take
  • 00:01:34 you to the firebase console which is
  • 00:01:36 where you can manage the project now
  • 00:01:38 this is no firebase course but I will
  • 00:01:42 quickly walk you through the features
  • 00:01:45 you see here before we then start
  • 00:01:47 implementing authentication firebase in
  • 00:01:49 general is a platform which offers you
  • 00:01:52 loads of features you typically need in
  • 00:01:54 back-end for mobile apps or single page
  • 00:01:57 applications as we're building one year
  • 00:01:59 so a single page web applications that
  • 00:02:01 would be the features it offers you are
  • 00:02:04 a database actually a real-time database
  • 00:02:06 using WebSockets so that if you update
  • 00:02:09 the database from let's say one users
  • 00:02:11 device you also see that update on our
  • 00:02:14 you
  • 00:02:15 devices at least if that's an update
  • 00:02:17 interesting to these devices and that is
  • 00:02:20 very convenient obviously so you got a
  • 00:02:21 database without you needing to
  • 00:02:23 configure anything on the server and
  • 00:02:25 that's generally the purpose of firebase
  • 00:02:27 you get a back-end which is very easy to
  • 00:02:29 use where you can focus on your core
  • 00:02:31 business logic and where you don't have
  • 00:02:33 to write all the code you typically have
  • 00:02:35 to write when setting up your own server
  • 00:02:37 side you don't have to configure your
  • 00:02:39 database you don't have to write the
  • 00:02:40 code for accessing it you don't have to
  • 00:02:42 care about security here
  • 00:02:44 that's all managed for you of course at
  • 00:02:47 the price of giving up some freedom
  • 00:02:49 regarding configuration you can't
  • 00:02:52 configure everything here it is
  • 00:02:53 configured and created for you but you
  • 00:02:56 got a lot of features to work with and
  • 00:02:57 that's why services like firebase are a
  • 00:03:00 nice choice as a back-end for projects
  • 00:03:02 if you want to focus on the front-end
  • 00:03:05 now another nice thing is that you don't
  • 00:03:07 have to worry about server capacity here
  • 00:03:09 it just runs and if you check out the
  • 00:03:12 pricing the features we're going to use
  • 00:03:14 here are available for free as you can
  • 00:03:16 see here at the bottom but if you click
  • 00:03:18 on upgrade easy there are a couple of
  • 00:03:22 models available now we're in the spark
  • 00:03:24 model and the spark plan that's the free
  • 00:03:26 one and you can see the full plan
  • 00:03:29 details to see the quote as you actually
  • 00:03:31 have they are sufficient for our project
  • 00:03:34 here for a production project you
  • 00:03:36 probably don't want to use that because
  • 00:03:38 for example you can only have 100
  • 00:03:40 connections to your database at a time
  • 00:03:42 and that might quickly be exceeded so in
  • 00:03:44 such cases you might either juice the
  • 00:03:46 plain plan which cost $25 per month
  • 00:03:49 where you have way more capacities or
  • 00:03:52 the blaze plan where you only pay what
  • 00:03:56 you need so if you got no traffic at all
  • 00:03:58 you're paying very little to nothing but
  • 00:04:00 it scales up infinitely that is again
  • 00:04:03 that nice thing which was also true for
  • 00:04:05 AWS lambda and so on but you only pay
  • 00:04:08 for what you need at least in a place
  • 00:04:10 plan here and that is an hour advantage
  • 00:04:13 of firebase you not only don't have to
  • 00:04:16 write any server-side code you also
  • 00:04:17 don't have to manage your servers and
  • 00:04:19 now our advantage so whichever features
  • 00:04:22 decides database do we have we got off
  • 00:04:24 education it's very easy to add user
  • 00:04:27 authentication
  • 00:04:27 pure f:v that through a social provider
  • 00:04:30 like Facebook or Google or your own
  • 00:04:33 authentication here with passwords and
  • 00:04:35 email you get storage for storing files
  • 00:04:38 and we will use that for storing the
  • 00:04:40 images users upload in this application
  • 00:04:43 hosting to host your application will
  • 00:04:46 also use that in the end to ship our
  • 00:04:48 application once we're done cloud
  • 00:04:50 functions allows you to run any code
  • 00:04:52 whenever a certain event triggers like
  • 00:04:55 for example when the file was uploaded
  • 00:04:57 this is great for example for creating
  • 00:04:59 thumbnails of images which were uploaded
  • 00:05:02 automatically and that's not something
  • 00:05:04 I'm going to cover in this series but
  • 00:05:06 likely something I'll cover in a future
  • 00:05:08 standalone video and then you get a
  • 00:05:10 couple of other services for testing
  • 00:05:12 your application on different mobile
  • 00:05:14 devices getting crash reporting on
  • 00:05:17 mobile devices testing your performance
  • 00:05:20 in general using analytics to see how
  • 00:05:22 users interact with your application
  • 00:05:24 sending push notifications especially
  • 00:05:27 interesting for mobile apps of course or
  • 00:05:29 progressive web apps and yeah couple of
  • 00:05:32 other stuff we will focus on
  • 00:05:35 authentication the database and storage
  • 00:05:37 and hosting in this series which are the
  • 00:05:41 core features from a business logic
  • 00:05:43 perspective I'd say and what's that
  • 00:05:46 enough talking about firebase let's set
  • 00:05:48 up authentication now I will do this in
  • 00:05:50 the next video