WEBVTT Kind: captions Language: en 00:00:00.000 --> 00:00:02.150 align:start position:0% This<00:00:00.440> is<00:00:00.600> the<00:00:00.680> complete<00:00:01.120> guide<00:00:01.600> to<00:00:01.720> building 00:00:02.150 --> 00:00:02.160 align:start position:0% This is the complete guide to building 00:00:02.160 --> 00:00:04.230 align:start position:0% This is the complete guide to building and<00:00:02.400> launching<00:00:02.920> real<00:00:03.200> web<00:00:03.400> applications 00:00:04.230 --> 00:00:04.240 align:start position:0% and launching real web applications 00:00:04.240 --> 00:00:06.870 align:start position:0% and launching real web applications using<00:00:04.520> Google<00:00:04.800> AI<00:00:05.000> Studio<00:00:05.720> and<00:00:05.840> Firebase. 00:00:06.870 --> 00:00:06.880 align:start position:0% using Google AI Studio and Firebase. 00:00:06.880 --> 00:00:08.790 align:start position:0% using Google AI Studio and Firebase. Whether<00:00:07.200> you've<00:00:07.480> never<00:00:07.800> used<00:00:08.200> AI<00:00:08.400> Studio 00:00:08.790 --> 00:00:08.800 align:start position:0% Whether you've never used AI Studio 00:00:08.800 --> 00:00:11.070 align:start position:0% Whether you've never used AI Studio before<00:00:09.480> or<00:00:09.640> you<00:00:09.800> already<00:00:10.120> have<00:00:10.280> a<00:00:10.320> project<00:00:10.960> and 00:00:11.070 --> 00:00:11.080 align:start position:0% before or you already have a project and 00:00:11.080 --> 00:00:12.870 align:start position:0% before or you already have a project and you're<00:00:11.200> not<00:00:11.440> sure<00:00:11.600> what<00:00:11.760> to<00:00:11.840> do<00:00:12.000> next,<00:00:12.640> this 00:00:12.870 --> 00:00:12.880 align:start position:0% you're not sure what to do next, this 00:00:12.880 --> 00:00:14.830 align:start position:0% you're not sure what to do next, this video<00:00:13.320> is<00:00:13.520> for<00:00:13.680> you.<00:00:14.120> Maybe<00:00:14.400> you're<00:00:14.520> building 00:00:14.830 --> 00:00:14.840 align:start position:0% video is for you. Maybe you're building 00:00:14.840 --> 00:00:17.590 align:start position:0% video is for you. Maybe you're building a<00:00:14.880> website,<00:00:15.640> a<00:00:15.720> web<00:00:15.960> application,<00:00:16.760> or<00:00:17.080> a<00:00:17.160> SaaS 00:00:17.590 --> 00:00:17.600 align:start position:0% a website, a web application, or a SaaS 00:00:17.600 --> 00:00:19.110 align:start position:0% a website, a web application, or a SaaS idea<00:00:18.000> you've<00:00:18.120> been<00:00:18.240> thinking<00:00:18.480> about. 00:00:19.110 --> 00:00:19.120 align:start position:0% idea you've been thinking about. 00:00:19.120 --> 00:00:20.950 align:start position:0% idea you've been thinking about. Whatever<00:00:19.480> it<00:00:19.600> is,<00:00:19.960> I've<00:00:20.120> got<00:00:20.280> you<00:00:20.400> covered. 00:00:20.950 --> 00:00:20.960 align:start position:0% Whatever it is, I've got you covered. 00:00:20.960 --> 00:00:22.990 align:start position:0% Whatever it is, I've got you covered. And<00:00:21.200> if<00:00:21.360> any<00:00:21.520> of<00:00:21.640> this<00:00:21.840> sounds<00:00:22.120> complicated, 00:00:22.990 --> 00:00:23.000 align:start position:0% And if any of this sounds complicated, 00:00:23.000 --> 00:00:24.950 align:start position:0% And if any of this sounds complicated, don't<00:00:23.240> worry.<00:00:23.800> I've<00:00:23.960> taken<00:00:24.240> my<00:00:24.360> time<00:00:24.680> building 00:00:24.950 --> 00:00:24.960 align:start position:0% don't worry. I've taken my time building 00:00:24.960 --> 00:00:27.110 align:start position:0% don't worry. I've taken my time building this<00:00:25.120> tutorial<00:00:25.880> to<00:00:26.000> make<00:00:26.160> sure<00:00:26.520> it's<00:00:26.680> as<00:00:26.880> easy 00:00:27.110 --> 00:00:27.120 align:start position:0% this tutorial to make sure it's as easy 00:00:27.120 --> 00:00:28.990 align:start position:0% this tutorial to make sure it's as easy to<00:00:27.240> follow<00:00:27.520> as<00:00:27.680> possible,<00:00:28.440> even<00:00:28.760> if<00:00:28.880> you've 00:00:28.990 --> 00:00:29.000 align:start position:0% to follow as possible, even if you've 00:00:29.000 --> 00:00:30.950 align:start position:0% to follow as possible, even if you've never<00:00:29.240> done<00:00:29.480> anything<00:00:29.840> like<00:00:30.040> this<00:00:30.240> before. 00:00:30.950 --> 00:00:30.960 align:start position:0% never done anything like this before. 00:00:30.960 --> 00:00:33.030 align:start position:0% never done anything like this before. So,<00:00:31.160> here's<00:00:31.400> the<00:00:31.520> road<00:00:31.760> map<00:00:32.000> for<00:00:32.119> this<00:00:32.320> video. 00:00:33.030 --> 00:00:33.040 align:start position:0% So, here's the road map for this video. 00:00:33.040 --> 00:00:34.670 align:start position:0% So, here's the road map for this video. We'll<00:00:33.200> start<00:00:33.480> by<00:00:33.600> building<00:00:34.000> the<00:00:34.200> app<00:00:34.560> in 00:00:34.670 --> 00:00:34.680 align:start position:0% We'll start by building the app in 00:00:34.680 --> 00:00:37.150 align:start position:0% We'll start by building the app in Google<00:00:34.960> AI<00:00:35.160> Studio.<00:00:36.000> AI<00:00:36.240> Studio<00:00:36.720> is<00:00:36.880> a<00:00:36.920> free 00:00:37.150 --> 00:00:37.160 align:start position:0% Google AI Studio. AI Studio is a free 00:00:37.160 --> 00:00:38.710 align:start position:0% Google AI Studio. AI Studio is a free tool<00:00:37.560> where<00:00:37.680> you<00:00:37.800> describe<00:00:38.160> the<00:00:38.280> app<00:00:38.480> you<00:00:38.600> want 00:00:38.710 --> 00:00:38.720 align:start position:0% tool where you describe the app you want 00:00:38.720 --> 00:00:40.510 align:start position:0% tool where you describe the app you want to<00:00:38.800> build<00:00:39.360> and<00:00:39.440> it<00:00:39.560> generates<00:00:40.040> a<00:00:40.120> working 00:00:40.510 --> 00:00:40.520 align:start position:0% to build and it generates a working 00:00:40.520 --> 00:00:42.750 align:start position:0% to build and it generates a working project<00:00:40.960> for<00:00:41.160> you.<00:00:41.600> No<00:00:41.840> coding<00:00:42.160> needed. 00:00:42.750 --> 00:00:42.760 align:start position:0% project for you. No coding needed. 00:00:42.760 --> 00:00:44.870 align:start position:0% project for you. No coding needed. During<00:00:43.000> the<00:00:43.120> build,<00:00:43.560> we'll<00:00:43.720> enable<00:00:44.080> Firebase, 00:00:44.870 --> 00:00:44.880 align:start position:0% During the build, we'll enable Firebase, 00:00:44.880 --> 00:00:46.470 align:start position:0% During the build, we'll enable Firebase, which<00:00:45.040> is<00:00:45.120> what<00:00:45.280> gives<00:00:45.520> your<00:00:45.720> app<00:00:46.040> a<00:00:46.160> real 00:00:46.470 --> 00:00:46.480 align:start position:0% which is what gives your app a real 00:00:46.480 --> 00:00:48.550 align:start position:0% which is what gives your app a real working<00:00:46.840> back<00:00:47.160> end.<00:00:47.640> It<00:00:47.720> manages<00:00:48.080> things<00:00:48.400> like 00:00:48.550 --> 00:00:48.560 align:start position:0% working back end. It manages things like 00:00:48.560 --> 00:00:50.630 align:start position:0% working back end. It manages things like user<00:00:48.800> accounts,<00:00:49.480> a<00:00:49.520> database,<00:00:50.200> and<00:00:50.360> file 00:00:50.630 --> 00:00:50.640 align:start position:0% user accounts, a database, and file 00:00:50.640 --> 00:00:52.430 align:start position:0% user accounts, a database, and file storage.<00:00:51.280> And<00:00:51.400> it's<00:00:51.520> also<00:00:51.840> free<00:00:52.200> to<00:00:52.320> get 00:00:52.430 --> 00:00:52.440 align:start position:0% storage. And it's also free to get 00:00:52.440 --> 00:00:54.030 align:start position:0% storage. And it's also free to get started<00:00:52.760> with.<00:00:53.280> From<00:00:53.480> there,<00:00:53.720> we'll<00:00:53.840> make 00:00:54.030 --> 00:00:54.040 align:start position:0% started with. From there, we'll make 00:00:54.040 --> 00:00:55.950 align:start position:0% started with. From there, we'll make sure<00:00:54.280> everything<00:00:54.640> is<00:00:54.760> configured<00:00:55.200> properly, 00:00:55.950 --> 00:00:55.960 align:start position:0% sure everything is configured properly, 00:00:55.960 --> 00:00:57.830 align:start position:0% sure everything is configured properly, test<00:00:56.240> the<00:00:56.400> app,<00:00:56.880> fix<00:00:57.160> anything<00:00:57.480> that<00:00:57.600> isn't 00:00:57.830 --> 00:00:57.840 align:start position:0% test the app, fix anything that isn't 00:00:57.840 --> 00:00:59.630 align:start position:0% test the app, fix anything that isn't working,<00:00:58.480> and<00:00:58.680> even<00:00:58.920> set<00:00:59.080> up<00:00:59.200> an<00:00:59.320> admin 00:00:59.630 --> 00:00:59.640 align:start position:0% working, and even set up an admin 00:00:59.640 --> 00:01:01.470 align:start position:0% working, and even set up an admin dashboard<00:01:00.440> so<00:01:00.560> you<00:01:00.680> can<00:01:00.800> see<00:01:01.080> all<00:01:01.200> of<00:01:01.320> your 00:01:01.470 --> 00:01:01.480 align:start position:0% dashboard so you can see all of your 00:01:01.480 --> 00:01:04.070 align:start position:0% dashboard so you can see all of your users<00:01:01.840> and<00:01:02.000> data<00:01:02.520> in<00:01:02.720> one<00:01:02.960> organized<00:01:03.440> place. 00:01:04.070 --> 00:01:04.080 align:start position:0% users and data in one organized place. 00:01:04.080 --> 00:01:05.550 align:start position:0% users and data in one organized place. Then,<00:01:04.239> we'll<00:01:04.320> deploy<00:01:04.640> it<00:01:04.760> live<00:01:05.120> on<00:01:05.280> a<00:01:05.320> real 00:01:05.550 --> 00:01:05.560 align:start position:0% Then, we'll deploy it live on a real 00:01:05.560 --> 00:01:07.430 align:start position:0% Then, we'll deploy it live on a real domain<00:01:06.160> using<00:01:06.440> hosting.<00:01:06.810> [music]<00:01:07.120> That's<00:01:07.360> the 00:01:07.430 --> 00:01:07.440 align:start position:0% domain using hosting. [music] That's the 00:01:07.440 --> 00:01:09.150 align:start position:0% domain using hosting. [music] That's the one<00:01:07.640> part<00:01:07.800> of<00:01:07.880> the<00:01:07.960> setup<00:01:08.280> that<00:01:08.440> isn't<00:01:08.680> free, 00:01:09.150 --> 00:01:09.160 align:start position:0% one part of the setup that isn't free, 00:01:09.160 --> 00:01:10.950 align:start position:0% one part of the setup that isn't free, but<00:01:09.360> I'll<00:01:09.480> walk<00:01:09.720> you<00:01:09.840> through<00:01:10.120> a<00:01:10.240> really<00:01:10.640> easy 00:01:10.950 --> 00:01:10.960 align:start position:0% but I'll walk you through a really easy 00:01:10.960 --> 00:01:12.950 align:start position:0% but I'll walk you through a really easy and<00:01:11.080> affordable<00:01:11.520> setup<00:01:11.800> for<00:01:11.920> this<00:01:12.200> later<00:01:12.480> on. 00:01:12.950 --> 00:01:12.960 align:start position:0% and affordable setup for this later on. 00:01:12.960 --> 00:01:14.630 align:start position:0% and affordable setup for this later on. Now,<00:01:13.200> one<00:01:13.360> of<00:01:13.440> the<00:01:13.520> hardest<00:01:13.920> parts<00:01:14.240> of<00:01:14.360> putting 00:01:14.630 --> 00:01:14.640 align:start position:0% Now, one of the hardest parts of putting 00:01:14.640 --> 00:01:16.590 align:start position:0% Now, one of the hardest parts of putting this<00:01:14.800> video<00:01:15.080> together<00:01:15.760> was<00:01:15.960> figuring<00:01:16.360> out 00:01:16.590 --> 00:01:16.600 align:start position:0% this video together was figuring out 00:01:16.600 --> 00:01:18.910 align:start position:0% this video together was figuring out what<00:01:16.840> app<00:01:17.080> to<00:01:17.200> actually<00:01:17.600> build<00:01:18.040> as<00:01:18.200> the<00:01:18.320> demo. 00:01:18.910 --> 00:01:18.920 align:start position:0% what app to actually build as the demo. 00:01:18.920 --> 00:01:20.510 align:start position:0% what app to actually build as the demo. Because<00:01:19.160> this<00:01:19.280> video<00:01:19.640> isn't<00:01:19.880> about<00:01:20.160> building 00:01:20.510 --> 00:01:20.520 align:start position:0% Because this video isn't about building 00:01:20.520 --> 00:01:22.350 align:start position:0% Because this video isn't about building a<00:01:20.560> one<00:01:20.800> specific<00:01:21.280> thing.<00:01:21.920> It's<00:01:22.080> a<00:01:22.120> video 00:01:22.350 --> 00:01:22.360 align:start position:0% a one specific thing. It's a video 00:01:22.360 --> 00:01:23.670 align:start position:0% a one specific thing. It's a video that's<00:01:22.520> meant<00:01:22.680> to<00:01:22.760> teach<00:01:23.080> you<00:01:23.240> how<00:01:23.360> to<00:01:23.480> build 00:01:23.670 --> 00:01:23.680 align:start position:0% that's meant to teach you how to build 00:01:23.680 --> 00:01:25.630 align:start position:0% that's meant to teach you how to build your<00:01:23.880> own<00:01:24.040> web<00:01:24.240> application<00:01:25.120> with<00:01:25.280> a<00:01:25.320> working 00:01:25.630 --> 00:01:25.640 align:start position:0% your own web application with a working 00:01:25.640 --> 00:01:27.790 align:start position:0% your own web application with a working back<00:01:25.920> end.<00:01:26.360> So,<00:01:26.600> the<00:01:26.840> app<00:01:27.120> I<00:01:27.200> chose<00:01:27.520> to<00:01:27.600> build 00:01:27.790 --> 00:01:27.800 align:start position:0% back end. So, the app I chose to build 00:01:27.800 --> 00:01:30.070 align:start position:0% back end. So, the app I chose to build in<00:01:27.880> front<00:01:28.080> of<00:01:28.200> you<00:01:28.520> had<00:01:28.840> to<00:01:28.920> be<00:01:29.040> the<00:01:29.200> right<00:01:29.440> one. 00:01:30.070 --> 00:01:30.080 align:start position:0% in front of you had to be the right one. 00:01:30.080 --> 00:01:31.350 align:start position:0% in front of you had to be the right one. It<00:01:30.200> had<00:01:30.280> to<00:01:30.360> be<00:01:30.440> simple<00:01:30.760> enough<00:01:30.960> to<00:01:31.080> follow 00:01:31.350 --> 00:01:31.360 align:start position:0% It had to be simple enough to follow 00:01:31.360 --> 00:01:33.390 align:start position:0% It had to be simple enough to follow along<00:01:31.640> with,<00:01:32.200> but<00:01:32.360> complex<00:01:32.840> enough<00:01:33.040> to<00:01:33.160> teach 00:01:33.390 --> 00:01:33.400 align:start position:0% along with, but complex enough to teach 00:01:33.400 --> 00:01:35.110 align:start position:0% along with, but complex enough to teach you<00:01:33.560> everything<00:01:34.040> you<00:01:34.080> need<00:01:34.280> to<00:01:34.400> know.<00:01:35.000> And 00:01:35.110 --> 00:01:35.120 align:start position:0% you everything you need to know. And 00:01:35.120 --> 00:01:36.670 align:start position:0% you everything you need to know. And after<00:01:35.320> a<00:01:35.400> lot<00:01:35.560> of<00:01:35.640> thought,<00:01:36.200> here's<00:01:36.480> what<00:01:36.600> I 00:01:36.670 --> 00:01:36.680 align:start position:0% after a lot of thought, here's what I 00:01:36.680 --> 00:01:38.630 align:start position:0% after a lot of thought, here's what I came<00:01:36.880> up<00:01:37.040> with.<00:01:37.560> This<00:01:37.720> is<00:01:37.840> a<00:01:37.880> web<00:01:38.120> app<00:01:38.360> called 00:01:38.630 --> 00:01:38.640 align:start position:0% came up with. This is a web app called 00:01:38.640 --> 00:01:40.790 align:start position:0% came up with. This is a web app called Client<00:01:39.000> Vault.<00:01:39.480> It's<00:01:39.640> a<00:01:39.720> simple<00:01:40.080> file<00:01:40.400> portal 00:01:40.790 --> 00:01:40.800 align:start position:0% Client Vault. It's a simple file portal 00:01:40.800 --> 00:01:43.030 align:start position:0% Client Vault. It's a simple file portal that<00:01:40.960> a<00:01:41.000> freelancer<00:01:41.760> or<00:01:41.960> designer<00:01:42.400> would<00:01:42.600> use 00:01:43.030 --> 00:01:43.040 align:start position:0% that a freelancer or designer would use 00:01:43.040 --> 00:01:44.950 align:start position:0% that a freelancer or designer would use to<00:01:43.160> let<00:01:43.320> their<00:01:43.440> clients<00:01:43.840> log<00:01:44.080> in<00:01:44.560> and<00:01:44.680> upload 00:01:44.950 --> 00:01:44.960 align:start position:0% to let their clients log in and upload 00:01:44.960 --> 00:01:47.750 align:start position:0% to let their clients log in and upload files<00:01:45.440> like<00:01:45.640> videos,<00:01:46.240> documents,<00:01:46.840> or<00:01:47.040> images. 00:01:47.750 --> 00:01:47.760 align:start position:0% files like videos, documents, or images. 00:01:47.760 --> 00:01:49.430 align:start position:0% files like videos, documents, or images. And<00:01:47.840> I<00:01:47.920> chose<00:01:48.200> this<00:01:48.400> specific<00:01:48.800> project<00:01:49.240> for<00:01:49.360> a 00:01:49.430 --> 00:01:49.440 align:start position:0% And I chose this specific project for a 00:01:49.440 --> 00:01:51.350 align:start position:0% And I chose this specific project for a reason.<00:01:50.080> Let<00:01:50.200> me<00:01:50.280> show<00:01:50.440> you<00:01:50.560> what<00:01:50.680> it<00:01:50.760> can<00:01:50.880> do. 00:01:51.350 --> 00:01:51.360 align:start position:0% reason. Let me show you what it can do. 00:01:51.360 --> 00:01:52.870 align:start position:0% reason. Let me show you what it can do. In<00:01:51.440> this<00:01:51.640> app,<00:01:52.000> a<00:01:52.080> user<00:01:52.440> can<00:01:52.560> create<00:01:52.800> an 00:01:52.870 --> 00:01:52.880 align:start position:0% In this app, a user can create an 00:01:52.880 --> 00:01:54.830 align:start position:0% In this app, a user can create an account<00:01:53.320> with<00:01:53.440> their<00:01:53.640> email<00:01:53.960> and<00:01:54.080> password, 00:01:54.830 --> 00:01:54.840 align:start position:0% account with their email and password, 00:01:54.840 --> 00:01:56.750 align:start position:0% account with their email and password, sign<00:01:55.080> in<00:01:55.200> and<00:01:55.320> sign<00:01:55.560> out.<00:01:56.000> So,<00:01:56.240> every<00:01:56.480> user 00:01:56.750 --> 00:01:56.760 align:start position:0% sign in and sign out. So, every user 00:01:56.760 --> 00:01:58.790 align:start position:0% sign in and sign out. So, every user gets<00:01:56.960> their<00:01:57.240> own<00:01:57.400> private<00:01:57.720> space<00:01:58.240> inside<00:01:58.640> the 00:01:58.790 --> 00:01:58.800 align:start position:0% gets their own private space inside the 00:01:58.800 --> 00:02:00.390 align:start position:0% gets their own private space inside the app.<00:01:59.200> If<00:01:59.320> they<00:01:59.480> sign<00:01:59.720> out<00:01:59.920> and<00:02:00.040> come<00:02:00.200> back 00:02:00.390 --> 00:02:00.400 align:start position:0% app. If they sign out and come back 00:02:00.400 --> 00:02:02.230 align:start position:0% app. If they sign out and come back later,<00:02:00.960> all<00:02:01.120> of<00:02:01.200> their<00:02:01.320> data<00:02:01.640> is<00:02:01.800> still<00:02:02.040> right 00:02:02.230 --> 00:02:02.240 align:start position:0% later, all of their data is still right 00:02:02.240 --> 00:02:04.310 align:start position:0% later, all of their data is still right there.<00:02:02.720> Nothing<00:02:03.080> ever<00:02:03.240> disappears.<00:02:04.080> They<00:02:04.200> can 00:02:04.310 --> 00:02:04.320 align:start position:0% there. Nothing ever disappears. They can 00:02:04.320 --> 00:02:06.510 align:start position:0% there. Nothing ever disappears. They can upload<00:02:04.640> files,<00:02:05.280> and<00:02:05.400> those<00:02:05.560> files<00:02:06.040> are<00:02:06.160> stored 00:02:06.510 --> 00:02:06.520 align:start position:0% upload files, and those files are stored 00:02:06.520 --> 00:02:08.350 align:start position:0% upload files, and those files are stored securely<00:02:07.040> in<00:02:07.120> the<00:02:07.200> cloud.<00:02:07.880> They<00:02:08.000> can<00:02:08.119> view 00:02:08.350 --> 00:02:08.360 align:start position:0% securely in the cloud. They can view 00:02:08.360 --> 00:02:10.389 align:start position:0% securely in the cloud. They can view them,<00:02:08.800> download<00:02:09.200> them,<00:02:09.399> delete<00:02:09.720> them,<00:02:10.200> and 00:02:10.389 --> 00:02:10.399 align:start position:0% them, download them, delete them, and 00:02:10.399 --> 00:02:12.030 align:start position:0% them, download them, delete them, and only<00:02:10.720> they<00:02:10.920> have<00:02:11.160> access<00:02:11.560> to<00:02:11.680> their<00:02:11.880> own 00:02:12.030 --> 00:02:12.040 align:start position:0% only they have access to their own 00:02:12.040 --> 00:02:14.266 align:start position:0% only they have access to their own stuff.<00:02:12.680> And<00:02:12.840> all<00:02:13.000> of<00:02:13.080> this<00:02:13.280> works<00:02:13.600> together. 00:02:14.266 --> 00:02:14.276 align:start position:0% stuff. And all of this works together. 00:02:14.276 --> 00:02:14.350 align:start position:0% stuff. And all of this works together. >> [music] 00:02:14.350 --> 00:02:14.360 align:start position:0% >> [music] 00:02:14.360 --> 00:02:16.790 align:start position:0% >> [music] >> Every<00:02:14.600> button,<00:02:15.080> every<00:02:15.320> page,<00:02:15.880> every<00:02:16.120> feature 00:02:16.790 --> 00:02:16.800 align:start position:0% >> Every button, every page, every feature 00:02:16.800 --> 00:02:18.190 align:start position:0% >> Every button, every page, every feature is<00:02:17.000> talking<00:02:17.280> to<00:02:17.400> the<00:02:17.480> back<00:02:17.760> end<00:02:17.880> behind<00:02:18.120> the 00:02:18.190 --> 00:02:18.200 align:start position:0% is talking to the back end behind the 00:02:18.200 --> 00:02:20.190 align:start position:0% is talking to the back end behind the scenes<00:02:18.800> to<00:02:18.920> make<00:02:19.080> it<00:02:19.160> all<00:02:19.280> function.<00:02:20.000> Now, 00:02:20.190 --> 00:02:20.200 align:start position:0% scenes to make it all function. Now, 00:02:20.200 --> 00:02:22.150 align:start position:0% scenes to make it all function. Now, this<00:02:20.440> isn't<00:02:20.680> just<00:02:20.920> a<00:02:20.959> design<00:02:21.520> or<00:02:21.720> a<00:02:21.800> static 00:02:22.150 --> 00:02:22.160 align:start position:0% this isn't just a design or a static 00:02:22.160 --> 00:02:24.670 align:start position:0% this isn't just a design or a static website.<00:02:22.880> This<00:02:23.040> is<00:02:23.160> a<00:02:23.280> real<00:02:23.560> web<00:02:23.760> application. 00:02:24.670 --> 00:02:24.680 align:start position:0% website. This is a real web application. 00:02:24.680 --> 00:02:26.230 align:start position:0% website. This is a real web application. And<00:02:24.800> everything<00:02:25.160> I<00:02:25.240> just<00:02:25.440> showed<00:02:25.680> you<00:02:26.000> comes 00:02:26.230 --> 00:02:26.240 align:start position:0% And everything I just showed you comes 00:02:26.240 --> 00:02:27.830 align:start position:0% And everything I just showed you comes down<00:02:26.400> to<00:02:26.520> four<00:02:26.800> things:<00:02:27.560> user 00:02:27.830 --> 00:02:27.840 align:start position:0% down to four things: user 00:02:27.840 --> 00:02:30.030 align:start position:0% down to four things: user authentication,<00:02:28.800> a<00:02:28.880> database,<00:02:29.800> file 00:02:30.030 --> 00:02:30.040 align:start position:0% authentication, a database, file 00:02:30.040 --> 00:02:31.670 align:start position:0% authentication, a database, file storage,<00:02:30.800> and<00:02:30.920> connecting<00:02:31.240> it<00:02:31.360> all<00:02:31.480> to<00:02:31.560> the 00:02:31.670 --> 00:02:31.680 align:start position:0% storage, and connecting it all to the 00:02:31.680 --> 00:02:33.710 align:start position:0% storage, and connecting it all to the UI.<00:02:32.400> Those<00:02:32.600> are<00:02:32.680> the<00:02:32.800> four<00:02:33.080> pillars<00:02:33.560> of 00:02:33.710 --> 00:02:33.720 align:start position:0% UI. Those are the four pillars of 00:02:33.720 --> 00:02:35.790 align:start position:0% UI. Those are the four pillars of building<00:02:34.120> any<00:02:34.360> real<00:02:34.640> web<00:02:34.840> application,<00:02:35.680> and 00:02:35.790 --> 00:02:35.800 align:start position:0% building any real web application, and 00:02:35.800 --> 00:02:36.990 align:start position:0% building any real web application, and they're<00:02:35.920> exactly<00:02:36.360> what<00:02:36.480> I'm<00:02:36.520> going<00:02:36.640> to<00:02:36.720> teach 00:02:36.990 --> 00:02:37.000 align:start position:0% they're exactly what I'm going to teach 00:02:37.000 --> 00:02:39.070 align:start position:0% they're exactly what I'm going to teach you<00:02:37.280> in<00:02:37.440> this<00:02:37.600> video.<00:02:38.320> We'll<00:02:38.520> set<00:02:38.880> each<00:02:39.000> of 00:02:39.070 --> 00:02:39.080 align:start position:0% you in this video. We'll set each of 00:02:39.080 --> 00:02:41.110 align:start position:0% you in this video. We'll set each of these<00:02:39.240> pillars<00:02:39.600> up<00:02:39.920> one<00:02:40.120> by<00:02:40.280> one,<00:02:40.760> so<00:02:40.880> that<00:02:41.040> by 00:02:41.110 --> 00:02:41.120 align:start position:0% these pillars up one by one, so that by 00:02:41.120 --> 00:02:43.070 align:start position:0% these pillars up one by one, so that by the<00:02:41.320> end,<00:02:41.720> you<00:02:41.840> have<00:02:42.040> a<00:02:42.160> fully<00:02:42.520> working<00:02:42.880> web 00:02:43.070 --> 00:02:43.080 align:start position:0% the end, you have a fully working web 00:02:43.080 --> 00:02:44.790 align:start position:0% the end, you have a fully working web application.<00:02:43.920> And<00:02:44.000> these<00:02:44.160> pillars<00:02:44.640> are 00:02:44.790 --> 00:02:44.800 align:start position:0% application. And these pillars are 00:02:44.800 --> 00:02:46.630 align:start position:0% application. And these pillars are really<00:02:45.040> important<00:02:45.440> to<00:02:45.520> understand<00:02:46.400> because 00:02:46.630 --> 00:02:46.640 align:start position:0% really important to understand because 00:02:46.640 --> 00:02:48.550 align:start position:0% really important to understand because they<00:02:46.760> apply<00:02:47.080> to<00:02:47.320> everything<00:02:47.760> you<00:02:47.840> build,<00:02:48.280> not 00:02:48.550 --> 00:02:48.560 align:start position:0% they apply to everything you build, not 00:02:48.560 --> 00:02:50.390 align:start position:0% they apply to everything you build, not just<00:02:48.800> this<00:02:49.000> one<00:02:49.240> project.<00:02:49.959> That's<00:02:50.200> why<00:02:50.320> I 00:02:50.390 --> 00:02:50.400 align:start position:0% just this one project. That's why I 00:02:50.400 --> 00:02:52.270 align:start position:0% just this one project. That's why I chose<00:02:50.760> to<00:02:50.840> build<00:02:51.080> Client<00:02:51.440> Vault<00:02:51.760> as<00:02:51.880> the<00:02:52.000> demo 00:02:52.270 --> 00:02:52.280 align:start position:0% chose to build Client Vault as the demo 00:02:52.280 --> 00:02:54.390 align:start position:0% chose to build Client Vault as the demo for<00:02:52.400> this<00:02:52.560> tutorial.<00:02:53.440> It's<00:02:53.600> a<00:02:53.640> simple<00:02:54.040> app, 00:02:54.390 --> 00:02:54.400 align:start position:0% for this tutorial. It's a simple app, 00:02:54.400 --> 00:02:55.790 align:start position:0% for this tutorial. It's a simple app, but<00:02:54.520> it<00:02:54.600> relies<00:02:55.040> on<00:02:55.160> all<00:02:55.360> four<00:02:55.600> of<00:02:55.680> these 00:02:55.790 --> 00:02:55.800 align:start position:0% but it relies on all four of these 00:02:55.800 --> 00:02:57.350 align:start position:0% but it relies on all four of these pillars<00:02:56.080> to<00:02:56.200> function,<00:02:56.840> and<00:02:56.920> it's<00:02:57.040> really<00:02:57.240> the 00:02:57.350 --> 00:02:57.360 align:start position:0% pillars to function, and it's really the 00:02:57.360 --> 00:02:58.830 align:start position:0% pillars to function, and it's really the perfect<00:02:57.680> project<00:02:58.160> to<00:02:58.280> learn<00:02:58.480> the<00:02:58.600> core 00:02:58.830 --> 00:02:58.840 align:start position:0% perfect project to learn the core 00:02:58.840 --> 00:03:00.910 align:start position:0% perfect project to learn the core concepts<00:02:59.680> behind<00:03:00.000> building<00:03:00.320> any<00:03:00.519> real<00:03:00.720> web 00:03:00.910 --> 00:03:00.920 align:start position:0% concepts behind building any real web 00:03:00.920 --> 00:03:02.870 align:start position:0% concepts behind building any real web app.<00:03:01.400> So,<00:03:01.560> whether<00:03:01.800> you<00:03:01.959> follow<00:03:02.239> along<00:03:02.680> with 00:03:02.870 --> 00:03:02.880 align:start position:0% app. So, whether you follow along with 00:03:02.880 --> 00:03:04.949 align:start position:0% app. So, whether you follow along with my<00:03:03.120> build<00:03:03.680> or<00:03:03.920> use<00:03:04.120> it<00:03:04.239> as<00:03:04.360> a<00:03:04.400> guide<00:03:04.720> for<00:03:04.840> your 00:03:04.949 --> 00:03:04.959 align:start position:0% my build or use it as a guide for your 00:03:04.959 --> 00:03:06.750 align:start position:0% my build or use it as a guide for your own<00:03:05.120> project,<00:03:05.959> you'll<00:03:06.080> be<00:03:06.160> able<00:03:06.320> to<00:03:06.400> take<00:03:06.640> what 00:03:06.750 --> 00:03:06.760 align:start position:0% own project, you'll be able to take what 00:03:06.760 --> 00:03:08.670 align:start position:0% own project, you'll be able to take what you<00:03:06.880> learn<00:03:07.120> here<00:03:07.400> in<00:03:07.480> this<00:03:07.600> video<00:03:08.239> and<00:03:08.360> apply 00:03:08.670 --> 00:03:08.680 align:start position:0% you learn here in this video and apply 00:03:08.680 --> 00:03:10.710 align:start position:0% you learn here in this video and apply it<00:03:08.840> to<00:03:09.080> anything<00:03:09.480> you<00:03:09.600> create<00:03:09.959> next<00:03:10.400> in<00:03:10.560> AI 00:03:10.710 --> 00:03:10.720 align:start position:0% it to anything you create next in AI 00:03:10.720 --> 00:03:12.350 align:start position:0% it to anything you create next in AI Studio. 00:03:12.350 --> 00:03:12.360 align:start position:0% Studio. 00:03:12.360 --> 00:03:13.190 align:start position:0% Studio. All<00:03:12.440> right,<00:03:12.640> let's<00:03:12.760> go<00:03:12.840> ahead<00:03:13.000> and<00:03:13.080> get 00:03:13.190 --> 00:03:13.200 align:start position:0% All right, let's go ahead and get 00:03:13.200 --> 00:03:14.910 align:start position:0% All right, let's go ahead and get started<00:03:13.560> with<00:03:13.720> building<00:03:14.160> the<00:03:14.280> web<00:03:14.480> app. 00:03:14.910 --> 00:03:14.920 align:start position:0% started with building the web app. 00:03:14.920 --> 00:03:17.390 align:start position:0% started with building the web app. First,<00:03:15.360> head<00:03:15.560> over<00:03:15.800> to<00:03:15.959> Google<00:03:16.280> AI<00:03:16.480> Studio.<00:03:17.239> If 00:03:17.390 --> 00:03:17.400 align:start position:0% First, head over to Google AI Studio. If 00:03:17.400 --> 00:03:19.030 align:start position:0% First, head over to Google AI Studio. If you've<00:03:17.519> never<00:03:17.760> used<00:03:17.959> it<00:03:18.040> before,<00:03:18.600> just<00:03:18.840> go<00:03:18.959> to 00:03:19.030 --> 00:03:19.040 align:start position:0% you've never used it before, just go to 00:03:19.040 --> 00:03:20.670 align:start position:0% you've never used it before, just go to the<00:03:19.160> link<00:03:19.480> I'll<00:03:19.600> leave<00:03:19.760> in<00:03:19.840> the<00:03:19.920> description 00:03:20.670 --> 00:03:20.680 align:start position:0% the link I'll leave in the description 00:03:20.680 --> 00:03:22.229 align:start position:0% the link I'll leave in the description and<00:03:20.880> sign<00:03:21.080> up<00:03:21.200> with<00:03:21.280> your<00:03:21.400> Google<00:03:21.640> account. 00:03:22.229 --> 00:03:22.239 align:start position:0% and sign up with your Google account. 00:03:22.239 --> 00:03:24.030 align:start position:0% and sign up with your Google account. It's<00:03:22.440> completely<00:03:22.880> free.<00:03:23.480> So,<00:03:23.680> I'll<00:03:23.760> go<00:03:23.880> to<00:03:23.920> the 00:03:24.030 --> 00:03:24.040 align:start position:0% It's completely free. So, I'll go to the 00:03:24.040 --> 00:03:28.550 align:start position:0% It's completely free. So, I'll go to the top<00:03:24.320> right<00:03:24.560> here<00:03:25.160> and<00:03:25.480> click<00:03:25.720> on<00:03:26.080> get<00:03:26.280> started. 00:03:28.550 --> 00:03:28.560 align:start position:0% top right here and click on get started. 00:03:28.560 --> 00:03:32.430 align:start position:0% top right here and click on get started. I'll<00:03:28.680> select<00:03:29.040> my<00:03:29.160> Google<00:03:29.440> account<00:03:29.720> right<00:03:29.880> here 00:03:32.430 --> 00:03:32.440 align:start position:0% 00:03:32.440 --> 00:03:36.110 align:start position:0% and<00:03:32.560> enter<00:03:32.800> my<00:03:32.920> password. 00:03:36.110 --> 00:03:36.120 align:start position:0% 00:03:36.120 --> 00:03:37.430 align:start position:0% And<00:03:36.200> then<00:03:36.320> once<00:03:36.519> you're<00:03:36.640> signed<00:03:36.920> in,<00:03:37.239> you'll 00:03:37.430 --> 00:03:37.440 align:start position:0% And then once you're signed in, you'll 00:03:37.440 --> 00:03:39.390 align:start position:0% And then once you're signed in, you'll see<00:03:37.640> the<00:03:37.760> main<00:03:38.000> dashboard<00:03:38.480> right<00:03:38.640> here.<00:03:39.320> All 00:03:39.390 --> 00:03:39.400 align:start position:0% see the main dashboard right here. All 00:03:39.400 --> 00:03:41.110 align:start position:0% see the main dashboard right here. All right,<00:03:39.600> so<00:03:39.680> before<00:03:39.959> I<00:03:40.000> type<00:03:40.280> in<00:03:40.400> my<00:03:40.560> prompt, 00:03:41.110 --> 00:03:41.120 align:start position:0% right, so before I type in my prompt, 00:03:41.120 --> 00:03:42.750 align:start position:0% right, so before I type in my prompt, let<00:03:41.239> me<00:03:41.360> show<00:03:41.560> you<00:03:41.680> how<00:03:41.800> I<00:03:41.880> like<00:03:42.040> to<00:03:42.120> format<00:03:42.560> it. 00:03:42.750 --> 00:03:42.760 align:start position:0% let me show you how I like to format it. 00:03:42.760 --> 00:03:43.910 align:start position:0% let me show you how I like to format it. Because<00:03:43.040> the<00:03:43.160> way<00:03:43.280> you<00:03:43.400> structure<00:03:43.760> your 00:03:43.910 --> 00:03:43.920 align:start position:0% Because the way you structure your 00:03:43.920 --> 00:03:45.670 align:start position:0% Because the way you structure your prompt<00:03:44.440> makes<00:03:44.640> a<00:03:44.720> huge<00:03:45.040> difference<00:03:45.480> in<00:03:45.600> the 00:03:45.670 --> 00:03:45.680 align:start position:0% prompt makes a huge difference in the 00:03:45.680 --> 00:03:47.830 align:start position:0% prompt makes a huge difference in the quality<00:03:46.239> of<00:03:46.440> what<00:03:46.680> AI<00:03:46.840> Studio<00:03:47.239> gives<00:03:47.440> you<00:03:47.560> back 00:03:47.830 --> 00:03:47.840 align:start position:0% quality of what AI Studio gives you back 00:03:47.840 --> 00:03:49.750 align:start position:0% quality of what AI Studio gives you back on<00:03:47.920> the<00:03:48.000> first<00:03:48.280> try.<00:03:48.840> And<00:03:48.959> this<00:03:49.080> format<00:03:49.519> works 00:03:49.750 --> 00:03:49.760 align:start position:0% on the first try. And this format works 00:03:49.760 --> 00:03:51.710 align:start position:0% on the first try. And this format works for<00:03:49.920> any<00:03:50.120> project,<00:03:50.840> not<00:03:51.040> just<00:03:51.239> the<00:03:51.320> one<00:03:51.560> I'm 00:03:51.710 --> 00:03:51.720 align:start position:0% for any project, not just the one I'm 00:03:51.720 --> 00:03:53.910 align:start position:0% for any project, not just the one I'm building.<00:03:52.320> I<00:03:52.440> break<00:03:52.720> every<00:03:52.960> prompt<00:03:53.440> down<00:03:53.680> into 00:03:53.910 --> 00:03:53.920 align:start position:0% building. I break every prompt down into 00:03:53.920 --> 00:03:55.990 align:start position:0% building. I break every prompt down into four<00:03:54.160> parts.<00:03:54.840> The<00:03:54.960> first<00:03:55.240> part<00:03:55.560> is<00:03:55.720> what<00:03:55.880> it 00:03:55.990 --> 00:03:56.000 align:start position:0% four parts. The first part is what it 00:03:56.000 --> 00:03:56.447 align:start position:0% four parts. The first part is what it is. 00:03:56.447 --> 00:03:56.457 align:start position:0% is. 00:03:56.457 --> 00:03:56.550 align:start position:0% is. >> [music] 00:03:56.550 --> 00:03:56.560 align:start position:0% >> [music] 00:03:56.560 --> 00:03:58.030 align:start position:0% >> [music] >> This<00:03:56.720> is<00:03:56.800> where<00:03:56.920> you<00:03:57.000> give<00:03:57.160> your<00:03:57.320> app<00:03:57.520> a<00:03:57.560> name 00:03:58.030 --> 00:03:58.040 align:start position:0% >> This is where you give your app a name 00:03:58.040 --> 00:03:59.670 align:start position:0% >> This is where you give your app a name and<00:03:58.120> describe<00:03:58.520> what<00:03:58.640> it<00:03:58.760> does<00:03:59.160> in<00:03:59.280> a<00:03:59.320> sentence 00:03:59.670 --> 00:03:59.680 align:start position:0% and describe what it does in a sentence 00:03:59.680 --> 00:04:01.670 align:start position:0% and describe what it does in a sentence or<00:03:59.800> two.<00:04:00.320> You're<00:04:00.440> giving<00:04:00.760> AI<00:04:00.960> Studio<00:04:01.360> the<00:04:01.480> big 00:04:01.670 --> 00:04:01.680 align:start position:0% or two. You're giving AI Studio the big 00:04:01.680 --> 00:04:03.670 align:start position:0% or two. You're giving AI Studio the big picture<00:04:02.200> so<00:04:02.320> it<00:04:02.440> understands<00:04:03.040> the<00:04:03.240> overall 00:04:03.670 --> 00:04:03.680 align:start position:0% picture so it understands the overall 00:04:03.680 --> 00:04:05.350 align:start position:0% picture so it understands the overall purpose<00:04:04.120> of<00:04:04.280> what<00:04:04.400> you're<00:04:04.520> building.<00:04:05.240> The 00:04:05.350 --> 00:04:05.360 align:start position:0% purpose of what you're building. The 00:04:05.360 --> 00:04:07.310 align:start position:0% purpose of what you're building. The second<00:04:05.720> part<00:04:06.040> is<00:04:06.200> what<00:04:06.360> it<00:04:06.440> needs.<00:04:07.080> This<00:04:07.240> is 00:04:07.310 --> 00:04:07.320 align:start position:0% second part is what it needs. This is 00:04:07.320 --> 00:04:08.910 align:start position:0% second part is what it needs. This is where<00:04:07.440> you<00:04:07.560> list<00:04:07.800> out<00:04:07.959> the<00:04:08.040> specific<00:04:08.560> pages 00:04:08.910 --> 00:04:08.920 align:start position:0% where you list out the specific pages 00:04:08.920 --> 00:04:10.790 align:start position:0% where you list out the specific pages and<00:04:09.040> features<00:04:09.600> your<00:04:09.840> app<00:04:10.080> should<00:04:10.240> have. 00:04:10.790 --> 00:04:10.800 align:start position:0% and features your app should have. 00:04:10.800 --> 00:04:13.070 align:start position:0% and features your app should have. Things<00:04:11.040> like<00:04:11.160> a<00:04:11.240> login<00:04:11.640> page,<00:04:12.120> a<00:04:12.200> dashboard, 00:04:13.070 --> 00:04:13.080 align:start position:0% Things like a login page, a dashboard, 00:04:13.080 --> 00:04:15.070 align:start position:0% Things like a login page, a dashboard, specific<00:04:13.520> buttons,<00:04:14.200> whatever<00:04:14.560> your<00:04:14.880> app 00:04:15.070 --> 00:04:15.080 align:start position:0% specific buttons, whatever your app 00:04:15.080 --> 00:04:17.430 align:start position:0% specific buttons, whatever your app requires.<00:04:16.000> The<00:04:16.079> more<00:04:16.280> detail<00:04:16.680> you<00:04:16.799> put<00:04:17.040> here, 00:04:17.430 --> 00:04:17.440 align:start position:0% requires. The more detail you put here, 00:04:17.440 --> 00:04:19.229 align:start position:0% requires. The more detail you put here, the<00:04:17.519> better<00:04:17.760> your<00:04:17.880> result<00:04:18.239> is<00:04:18.320> going<00:04:18.519> to<00:04:18.600> be. 00:04:19.229 --> 00:04:19.239 align:start position:0% the better your result is going to be. 00:04:19.239 --> 00:04:21.190 align:start position:0% the better your result is going to be. The<00:04:19.320> third<00:04:19.600> part<00:04:19.920> is<00:04:20.040> how<00:04:20.200> it<00:04:20.320> looks.<00:04:20.920> This<00:04:21.079> is 00:04:21.190 --> 00:04:21.200 align:start position:0% The third part is how it looks. This is 00:04:21.200 --> 00:04:22.670 align:start position:0% The third part is how it looks. This is where<00:04:21.320> you<00:04:21.440> describe<00:04:21.840> the<00:04:21.920> design,<00:04:22.560> the 00:04:22.670 --> 00:04:22.680 align:start position:0% where you describe the design, the 00:04:22.680 --> 00:04:24.830 align:start position:0% where you describe the design, the colors,<00:04:23.200> the<00:04:23.320> layout,<00:04:23.840> the<00:04:24.000> overall<00:04:24.360> feel. 00:04:24.830 --> 00:04:24.840 align:start position:0% colors, the layout, the overall feel. 00:04:24.840 --> 00:04:26.150 align:start position:0% colors, the layout, the overall feel. You<00:04:24.960> don't<00:04:25.200> need<00:04:25.360> to<00:04:25.440> be<00:04:25.560> a<00:04:25.600> designer<00:04:26.040> for 00:04:26.150 --> 00:04:26.160 align:start position:0% You don't need to be a designer for 00:04:26.160 --> 00:04:28.470 align:start position:0% You don't need to be a designer for this.<00:04:26.720> Just<00:04:26.919> describe<00:04:27.320> it<00:04:27.440> in<00:04:27.520> plain<00:04:27.800> terms. 00:04:28.470 --> 00:04:28.480 align:start position:0% this. Just describe it in plain terms. 00:04:28.480 --> 00:04:30.110 align:start position:0% this. Just describe it in plain terms. AI<00:04:28.680> Studio<00:04:29.120> will<00:04:29.240> take<00:04:29.480> that<00:04:29.760> and<00:04:29.880> turn<00:04:30.040> it 00:04:30.110 --> 00:04:30.120 align:start position:0% AI Studio will take that and turn it 00:04:30.120 --> 00:04:31.350 align:start position:0% AI Studio will take that and turn it into<00:04:30.320> something<00:04:30.640> that<00:04:30.800> actually<00:04:31.120> looks 00:04:31.350 --> 00:04:31.360 align:start position:0% into something that actually looks 00:04:31.360 --> 00:04:33.230 align:start position:0% into something that actually looks really<00:04:31.600> good.<00:04:32.160> And<00:04:32.280> the<00:04:32.360> fourth<00:04:32.680> part<00:04:33.040> is 00:04:33.230 --> 00:04:33.240 align:start position:0% really good. And the fourth part is 00:04:33.240 --> 00:04:34.950 align:start position:0% really good. And the fourth part is back-end<00:04:33.720> features.<00:04:34.480> This<00:04:34.640> is<00:04:34.760> where<00:04:34.880> you 00:04:34.950 --> 00:04:34.960 align:start position:0% back-end features. This is where you 00:04:34.960 --> 00:04:37.070 align:start position:0% back-end features. This is where you tell<00:04:35.320> AI<00:04:35.520> Studio<00:04:36.160> what<00:04:36.360> your<00:04:36.520> app<00:04:36.720> needs<00:04:36.960> to 00:04:37.070 --> 00:04:37.080 align:start position:0% tell AI Studio what your app needs to 00:04:37.080 --> 00:04:38.750 align:start position:0% tell AI Studio what your app needs to function<00:04:37.480> behind<00:04:37.800> the<00:04:37.880> scenes.<00:04:38.520> If<00:04:38.640> you 00:04:38.750 --> 00:04:38.760 align:start position:0% function behind the scenes. If you 00:04:38.760 --> 00:04:40.390 align:start position:0% function behind the scenes. If you remember<00:04:39.240> the<00:04:39.400> four<00:04:39.640> pillars<00:04:40.080> we<00:04:40.160> talked 00:04:40.390 --> 00:04:40.400 align:start position:0% remember the four pillars we talked 00:04:40.400 --> 00:04:41.909 align:start position:0% remember the four pillars we talked about<00:04:40.600> in<00:04:40.640> the<00:04:40.760> intro,<00:04:41.400> this<00:04:41.560> is<00:04:41.680> where<00:04:41.800> they 00:04:41.909 --> 00:04:41.919 align:start position:0% about in the intro, this is where they 00:04:41.919 --> 00:04:43.670 align:start position:0% about in the intro, this is where they come<00:04:42.120> in.<00:04:42.480> But<00:04:42.640> if<00:04:42.760> you're<00:04:42.880> just<00:04:43.040> starting<00:04:43.400> out 00:04:43.670 --> 00:04:43.680 align:start position:0% come in. But if you're just starting out 00:04:43.680 --> 00:04:45.190 align:start position:0% come in. But if you're just starting out and<00:04:43.760> you're<00:04:43.880> not<00:04:44.080> totally<00:04:44.400> sure<00:04:44.840> what<00:04:45.000> your 00:04:45.190 --> 00:04:45.200 align:start position:0% and you're not totally sure what your 00:04:45.200 --> 00:04:46.883 align:start position:0% and you're not totally sure what your app<00:04:45.400> needs<00:04:45.680> on<00:04:45.800> the<00:04:45.880> back<00:04:46.200> end,<00:04:46.600> that's<00:04:46.840> okay, 00:04:46.883 --> 00:04:46.893 align:start position:0% app needs on the back end, that's okay, 00:04:46.893 --> 00:04:48.670 align:start position:0% app needs on the back end, that's okay, [music]<00:04:47.080> too.<00:04:47.600> If<00:04:47.760> you've<00:04:47.880> done<00:04:48.040> a<00:04:48.120> good<00:04:48.360> job 00:04:48.670 --> 00:04:48.680 align:start position:0% [music] too. If you've done a good job 00:04:48.680 --> 00:04:50.550 align:start position:0% [music] too. If you've done a good job describing<00:04:49.160> your<00:04:49.360> app<00:04:49.600> and<00:04:49.720> its<00:04:50.000> features<00:04:50.480> in 00:04:50.550 --> 00:04:50.560 align:start position:0% describing your app and its features in 00:04:50.560 --> 00:04:52.270 align:start position:0% describing your app and its features in the<00:04:50.720> earlier<00:04:51.040> parts<00:04:51.280> of<00:04:51.360> the<00:04:51.440> prompt,<00:04:52.080> you<00:04:52.160> can 00:04:52.270 --> 00:04:52.280 align:start position:0% the earlier parts of the prompt, you can 00:04:52.280 --> 00:04:54.430 align:start position:0% the earlier parts of the prompt, you can just<00:04:52.520> ask<00:04:52.840> AI<00:04:53.000> Studio<00:04:53.560> to<00:04:53.680> set<00:04:53.840> up<00:04:53.960> a<00:04:54.000> back-end 00:04:54.430 --> 00:04:54.440 align:start position:0% just ask AI Studio to set up a back-end 00:04:54.440 --> 00:04:56.030 align:start position:0% just ask AI Studio to set up a back-end for<00:04:54.680> you<00:04:55.120> and<00:04:55.240> figure<00:04:55.480> out<00:04:55.600> what<00:04:55.720> your<00:04:55.880> app 00:04:56.030 --> 00:04:56.040 align:start position:0% for you and figure out what your app 00:04:56.040 --> 00:04:57.950 align:start position:0% for you and figure out what your app needs<00:04:56.280> to<00:04:56.400> function.<00:04:56.919> But<00:04:57.120> whenever<00:04:57.400> you<00:04:57.520> can, 00:04:57.950 --> 00:04:57.960 align:start position:0% needs to function. But whenever you can, 00:04:57.960 --> 00:04:59.830 align:start position:0% needs to function. But whenever you can, being<00:04:58.200> specific<00:04:58.640> about<00:04:58.880> what<00:04:59.040> you<00:04:59.160> need<00:04:59.600> will 00:04:59.830 --> 00:04:59.840 align:start position:0% being specific about what you need will 00:04:59.840 --> 00:05:01.670 align:start position:0% being specific about what you need will always<00:05:00.120> give<00:05:00.320> you<00:05:00.400> a<00:05:00.440> better<00:05:00.680> result.<00:05:01.320> And<00:05:01.560> by 00:05:01.670 --> 00:05:01.680 align:start position:0% always give you a better result. And by 00:05:01.680 --> 00:05:03.350 align:start position:0% always give you a better result. And by including<00:05:02.120> this<00:05:02.320> section<00:05:02.720> in<00:05:02.840> your<00:05:02.960> prompt 00:05:03.350 --> 00:05:03.360 align:start position:0% including this section in your prompt 00:05:03.360 --> 00:05:05.190 align:start position:0% including this section in your prompt from<00:05:03.480> the<00:05:03.560> start,<00:05:04.240> AI<00:05:04.440> Studio<00:05:04.800> will<00:05:04.919> set<00:05:05.080> up 00:05:05.190 --> 00:05:05.200 align:start position:0% from the start, AI Studio will set up 00:05:05.200 --> 00:05:07.350 align:start position:0% from the start, AI Studio will set up Firebase<00:05:05.680> for<00:05:05.919> you<00:05:06.160> automatically.<00:05:07.120> This<00:05:07.280> is 00:05:07.350 --> 00:05:07.360 align:start position:0% Firebase for you automatically. This is 00:05:07.360 --> 00:05:08.990 align:start position:0% Firebase for you automatically. This is the<00:05:07.480> step<00:05:07.800> that<00:05:08.000> turns<00:05:08.280> your<00:05:08.440> project<00:05:08.840> from 00:05:08.990 --> 00:05:09.000 align:start position:0% the step that turns your project from 00:05:09.000 --> 00:05:11.070 align:start position:0% the step that turns your project from something<00:05:09.440> that<00:05:09.640> just<00:05:09.880> looks<00:05:10.120> good<00:05:10.680> into<00:05:11.000> a 00:05:11.070 --> 00:05:11.080 align:start position:0% something that just looks good into a 00:05:11.080 --> 00:05:13.110 align:start position:0% something that just looks good into a real<00:05:11.480> working<00:05:11.840> web<00:05:12.040> application.<00:05:12.880> All<00:05:12.960> right, 00:05:13.110 --> 00:05:13.120 align:start position:0% real working web application. All right, 00:05:13.120 --> 00:05:14.550 align:start position:0% real working web application. All right, so<00:05:13.200> to<00:05:13.280> recap<00:05:13.600> what<00:05:13.720> we<00:05:13.800> just<00:05:14.000> covered<00:05:14.320> here 00:05:14.550 --> 00:05:14.560 align:start position:0% so to recap what we just covered here 00:05:14.560 --> 00:05:16.590 align:start position:0% so to recap what we just covered here before<00:05:14.800> we<00:05:14.919> jump<00:05:15.200> back<00:05:15.440> into<00:05:15.680> AI<00:05:15.840> Studio, 00:05:16.590 --> 00:05:16.600 align:start position:0% before we jump back into AI Studio, 00:05:16.600 --> 00:05:18.030 align:start position:0% before we jump back into AI Studio, here's<00:05:16.840> the<00:05:16.960> formula<00:05:17.360> for<00:05:17.520> writing<00:05:17.840> any 00:05:18.030 --> 00:05:18.040 align:start position:0% here's the formula for writing any 00:05:18.040 --> 00:05:19.590 align:start position:0% here's the formula for writing any prompt.<00:05:18.640> First,<00:05:18.919> describe<00:05:19.360> what<00:05:19.520> your 00:05:19.590 --> 00:05:19.600 align:start position:0% prompt. First, describe what your 00:05:19.600 --> 00:05:22.830 align:start position:0% prompt. First, describe what your project<00:05:20.440> is,<00:05:20.760> what<00:05:20.880> it<00:05:21.000> needs,<00:05:21.800> how<00:05:21.960> it<00:05:22.080> looks, 00:05:22.830 --> 00:05:22.840 align:start position:0% project is, what it needs, how it looks, 00:05:22.840 --> 00:05:24.350 align:start position:0% project is, what it needs, how it looks, and<00:05:23.000> the<00:05:23.080> back-end<00:05:23.520> features<00:05:24.000> that<00:05:24.120> it<00:05:24.200> should 00:05:24.350 --> 00:05:24.360 align:start position:0% and the back-end features that it should 00:05:24.360 --> 00:05:24.873 align:start position:0% and the back-end features that it should have. 00:05:24.873 --> 00:05:24.883 align:start position:0% have. 00:05:24.883 --> 00:05:24.950 align:start position:0% have. >> [music] 00:05:24.950 --> 00:05:24.960 align:start position:0% >> [music] 00:05:24.960 --> 00:05:27.110 align:start position:0% >> [music] >> Structure<00:05:25.320> your<00:05:25.440> prompt<00:05:25.919> just<00:05:26.200> like<00:05:26.400> this<00:05:26.800> for 00:05:27.110 --> 00:05:27.120 align:start position:0% >> Structure your prompt just like this for 00:05:27.120 --> 00:05:29.390 align:start position:0% >> Structure your prompt just like this for any<00:05:27.320> project<00:05:27.840> you<00:05:27.960> make<00:05:28.240> in<00:05:28.360> AI<00:05:28.560> Studio,<00:05:29.240> and 00:05:29.390 --> 00:05:29.400 align:start position:0% any project you make in AI Studio, and 00:05:29.400 --> 00:05:30.990 align:start position:0% any project you make in AI Studio, and it's<00:05:29.560> going<00:05:29.680> to<00:05:29.760> handle<00:05:29.960> the<00:05:30.040> rest<00:05:30.320> for<00:05:30.520> you. 00:05:30.990 --> 00:05:31.000 align:start position:0% it's going to handle the rest for you. 00:05:31.000 --> 00:05:32.550 align:start position:0% it's going to handle the rest for you. And<00:05:31.160> I<00:05:31.240> want<00:05:31.360> to<00:05:31.440> quickly<00:05:31.720> mention<00:05:32.040> here<00:05:32.360> that 00:05:32.550 --> 00:05:32.560 align:start position:0% And I want to quickly mention here that 00:05:32.560 --> 00:05:34.550 align:start position:0% And I want to quickly mention here that if<00:05:32.720> any<00:05:32.960> of<00:05:33.040> this<00:05:33.240> feels<00:05:33.600> overwhelming,<00:05:34.400> I've 00:05:34.550 --> 00:05:34.560 align:start position:0% if any of this feels overwhelming, I've 00:05:34.560 --> 00:05:36.550 align:start position:0% if any of this feels overwhelming, I've actually<00:05:34.880> gone<00:05:35.080> ahead<00:05:35.320> and<00:05:35.440> created<00:05:35.960> a<00:05:36.120> full 00:05:36.550 --> 00:05:36.560 align:start position:0% actually gone ahead and created a full 00:05:36.560 --> 00:05:38.750 align:start position:0% actually gone ahead and created a full Google<00:05:36.880> AI<00:05:37.080> Studio<00:05:37.480> Firebase<00:05:38.000> guide<00:05:38.560> that's 00:05:38.750 --> 00:05:38.760 align:start position:0% Google AI Studio Firebase guide that's 00:05:38.760 --> 00:05:40.390 align:start position:0% Google AI Studio Firebase guide that's linked<00:05:39.080> in<00:05:39.160> the<00:05:39.240> video<00:05:39.480> description.<00:05:40.200> So 00:05:40.390 --> 00:05:40.400 align:start position:0% linked in the video description. So 00:05:40.400 --> 00:05:41.950 align:start position:0% linked in the video description. So right<00:05:40.600> now,<00:05:40.840> I'd<00:05:40.960> recommend<00:05:41.400> going<00:05:41.640> down<00:05:41.880> to 00:05:41.950 --> 00:05:41.960 align:start position:0% right now, I'd recommend going down to 00:05:41.960 --> 00:05:43.510 align:start position:0% right now, I'd recommend going down to the<00:05:42.040> description<00:05:42.760> and<00:05:42.919> opening<00:05:43.240> up<00:05:43.360> that 00:05:43.510 --> 00:05:43.520 align:start position:0% the description and opening up that 00:05:43.520 --> 00:05:45.590 align:start position:0% the description and opening up that guide<00:05:43.880> in<00:05:43.960> a<00:05:44.000> new<00:05:44.160> tab.<00:05:45.120> All<00:05:45.160> right,<00:05:45.360> so<00:05:45.480> now 00:05:45.590 --> 00:05:45.600 align:start position:0% guide in a new tab. All right, so now 00:05:45.600 --> 00:05:47.590 align:start position:0% guide in a new tab. All right, so now let's<00:05:45.760> switch<00:05:45.960> back<00:05:46.200> over<00:05:46.440> to<00:05:46.560> AI<00:05:46.840> Studio,<00:05:47.480> and 00:05:47.590 --> 00:05:47.600 align:start position:0% let's switch back over to AI Studio, and 00:05:47.600 --> 00:05:49.710 align:start position:0% let's switch back over to AI Studio, and I'll<00:05:47.720> put<00:05:47.840> in<00:05:47.960> my<00:05:48.080> prompt<00:05:48.440> right<00:05:48.640> here. 00:05:49.710 --> 00:05:49.720 align:start position:0% I'll put in my prompt right here. 00:05:49.720 --> 00:05:51.630 align:start position:0% I'll put in my prompt right here. Then<00:05:49.920> I'll<00:05:50.000> scroll<00:05:50.240> up<00:05:50.320> to<00:05:50.400> the<00:05:50.480> top,<00:05:51.280> and 00:05:51.630 --> 00:05:51.640 align:start position:0% Then I'll scroll up to the top, and 00:05:51.640 --> 00:05:53.190 align:start position:0% Then I'll scroll up to the top, and let's<00:05:51.800> start<00:05:52.000> here<00:05:52.280> at<00:05:52.400> the<00:05:52.520> beginning.<00:05:53.080> I 00:05:53.190 --> 00:05:53.200 align:start position:0% let's start here at the beginning. I 00:05:53.200 --> 00:05:55.310 align:start position:0% let's start here at the beginning. I have<00:05:53.520> the<00:05:53.800> what<00:05:54.080> it<00:05:54.200> is<00:05:54.400> part<00:05:54.680> here.<00:05:55.200> I'm 00:05:55.310 --> 00:05:55.320 align:start position:0% have the what it is part here. I'm 00:05:55.320 --> 00:05:56.870 align:start position:0% have the what it is part here. I'm telling<00:05:55.600> AI<00:05:55.760> Studio<00:05:56.240> that<00:05:56.400> I<00:05:56.440> want<00:05:56.600> to<00:05:56.640> build<00:05:56.800> a 00:05:56.870 --> 00:05:56.880 align:start position:0% telling AI Studio that I want to build a 00:05:56.880 --> 00:05:58.910 align:start position:0% telling AI Studio that I want to build a web<00:05:57.080> app<00:05:57.320> called<00:05:57.640> Client<00:05:58.000> Vault.<00:05:58.520> It's<00:05:58.800> a 00:05:58.910 --> 00:05:58.920 align:start position:0% web app called Client Vault. It's a 00:05:58.920 --> 00:06:00.710 align:start position:0% web app called Client Vault. It's a client<00:05:59.280> file<00:05:59.520> portal<00:05:59.960> where<00:06:00.120> freelancers<00:06:00.640> and 00:06:00.710 --> 00:06:00.720 align:start position:0% client file portal where freelancers and 00:06:00.720 --> 00:06:02.750 align:start position:0% client file portal where freelancers and designers<00:06:01.240> can<00:06:01.400> let<00:06:01.520> their<00:06:01.680> clients<00:06:02.240> securely 00:06:02.750 --> 00:06:02.760 align:start position:0% designers can let their clients securely 00:06:02.760 --> 00:06:04.590 align:start position:0% designers can let their clients securely upload<00:06:03.160> and<00:06:03.280> manage<00:06:03.520> files.<00:06:04.200> So<00:06:04.360> here<00:06:04.480> I'm 00:06:04.590 --> 00:06:04.600 align:start position:0% upload and manage files. So here I'm 00:06:04.600 --> 00:06:06.750 align:start position:0% upload and manage files. So here I'm giving<00:06:04.880> AI<00:06:05.080> Studio<00:06:05.520> the<00:06:05.680> big<00:06:05.880> picture<00:06:06.360> in<00:06:06.520> just 00:06:06.750 --> 00:06:06.760 align:start position:0% giving AI Studio the big picture in just 00:06:06.760 --> 00:06:08.990 align:start position:0% giving AI Studio the big picture in just two<00:06:06.880> sentences.<00:06:07.720> And<00:06:07.840> below<00:06:08.080> this,<00:06:08.440> I<00:06:08.560> have 00:06:08.990 --> 00:06:09.000 align:start position:0% two sentences. And below this, I have 00:06:09.000 --> 00:06:11.110 align:start position:0% two sentences. And below this, I have what<00:06:09.240> my<00:06:09.400> project<00:06:09.840> needs.<00:06:10.440> I'm<00:06:10.600> listing<00:06:10.920> out 00:06:11.110 --> 00:06:11.120 align:start position:0% what my project needs. I'm listing out 00:06:11.120 --> 00:06:12.870 align:start position:0% what my project needs. I'm listing out all<00:06:11.280> of<00:06:11.360> the<00:06:11.480> essential<00:06:11.920> features.<00:06:12.680> And<00:06:12.800> at 00:06:12.870 --> 00:06:12.880 align:start position:0% all of the essential features. And at 00:06:12.880 --> 00:06:14.670 align:start position:0% all of the essential features. And at the<00:06:12.960> bottom<00:06:13.280> here,<00:06:13.560> I<00:06:13.680> also<00:06:14.000> include<00:06:14.440> this 00:06:14.670 --> 00:06:14.680 align:start position:0% the bottom here, I also include this 00:06:14.680 --> 00:06:16.950 align:start position:0% the bottom here, I also include this line.<00:06:15.200> This<00:06:15.360> says<00:06:15.560> to<00:06:15.680> include<00:06:16.640> any<00:06:16.760> other 00:06:16.950 --> 00:06:16.960 align:start position:0% line. This says to include any other 00:06:16.960 --> 00:06:18.830 align:start position:0% line. This says to include any other features<00:06:17.320> or<00:06:17.480> functionality<00:06:18.120> needed<00:06:18.600> to<00:06:18.680> make 00:06:18.830 --> 00:06:18.840 align:start position:0% features or functionality needed to make 00:06:18.840 --> 00:06:20.590 align:start position:0% features or functionality needed to make this<00:06:19.040> app<00:06:19.280> work<00:06:19.520> properly<00:06:20.240> that<00:06:20.400> aren't 00:06:20.590 --> 00:06:20.600 align:start position:0% this app work properly that aren't 00:06:20.600 --> 00:06:22.630 align:start position:0% this app work properly that aren't listed<00:06:20.919> here.<00:06:21.360> I<00:06:21.440> like<00:06:21.640> to<00:06:21.760> include<00:06:22.120> this<00:06:22.280> line 00:06:22.630 --> 00:06:22.640 align:start position:0% listed here. I like to include this line 00:06:22.640 --> 00:06:24.190 align:start position:0% listed here. I like to include this line because<00:06:22.960> there's<00:06:23.200> always<00:06:23.480> going<00:06:23.600> to<00:06:23.680> be<00:06:23.800> small 00:06:24.190 --> 00:06:24.200 align:start position:0% because there's always going to be small 00:06:24.200 --> 00:06:26.030 align:start position:0% because there's always going to be small things<00:06:24.520> that<00:06:24.680> you<00:06:24.760> might<00:06:25.000> not<00:06:25.200> think<00:06:25.400> to<00:06:25.520> list, 00:06:26.030 --> 00:06:26.040 align:start position:0% things that you might not think to list, 00:06:26.040 --> 00:06:27.510 align:start position:0% things that you might not think to list, but<00:06:26.240> AI<00:06:26.440> Studio<00:06:26.880> will<00:06:27.040> know<00:06:27.240> that<00:06:27.360> they're 00:06:27.510 --> 00:06:27.520 align:start position:0% but AI Studio will know that they're 00:06:27.520 --> 00:06:29.510 align:start position:0% but AI Studio will know that they're needed.<00:06:28.040> So<00:06:28.280> you<00:06:28.480> give<00:06:28.640> it<00:06:28.720> the<00:06:28.840> essentials 00:06:29.510 --> 00:06:29.520 align:start position:0% needed. So you give it the essentials 00:06:29.520 --> 00:06:31.190 align:start position:0% needed. So you give it the essentials and<00:06:29.640> let<00:06:29.760> it<00:06:29.840> fill<00:06:30.000> in<00:06:30.120> the<00:06:30.200> gaps.<00:06:30.960> And<00:06:31.080> then 00:06:31.190 --> 00:06:31.200 align:start position:0% and let it fill in the gaps. And then 00:06:31.200 --> 00:06:33.230 align:start position:0% and let it fill in the gaps. And then below<00:06:31.480> this,<00:06:31.800> I<00:06:31.880> describe<00:06:32.440> how<00:06:32.600> my<00:06:32.800> app<00:06:33.040> should 00:06:33.230 --> 00:06:33.240 align:start position:0% below this, I describe how my app should 00:06:33.240 --> 00:06:35.230 align:start position:0% below this, I describe how my app should look.<00:06:33.800> Here<00:06:34.040> I'm<00:06:34.120> just<00:06:34.280> giving<00:06:34.640> some<00:06:34.880> general 00:06:35.230 --> 00:06:35.240 align:start position:0% look. Here I'm just giving some general 00:06:35.240 --> 00:06:37.190 align:start position:0% look. Here I'm just giving some general guidance<00:06:35.760> regarding<00:06:36.240> the<00:06:36.400> design<00:06:36.960> of<00:06:37.080> the 00:06:37.190 --> 00:06:37.200 align:start position:0% guidance regarding the design of the 00:06:37.200 --> 00:06:38.870 align:start position:0% guidance regarding the design of the project.<00:06:37.880> It<00:06:37.960> doesn't<00:06:38.120> have<00:06:38.240> to<00:06:38.320> be<00:06:38.480> anything 00:06:38.870 --> 00:06:38.880 align:start position:0% project. It doesn't have to be anything 00:06:38.880 --> 00:06:40.630 align:start position:0% project. It doesn't have to be anything super<00:06:39.240> complicated.<00:06:40.160> And<00:06:40.280> then<00:06:40.440> at<00:06:40.560> the 00:06:40.630 --> 00:06:40.640 align:start position:0% super complicated. And then at the 00:06:40.640 --> 00:06:42.870 align:start position:0% super complicated. And then at the bottom<00:06:40.960> here,<00:06:41.320> we<00:06:41.520> have<00:06:41.880> a<00:06:42.000> big<00:06:42.280> one.<00:06:42.640> This<00:06:42.800> is 00:06:42.870 --> 00:06:42.880 align:start position:0% bottom here, we have a big one. This is 00:06:42.880 --> 00:06:44.750 align:start position:0% bottom here, we have a big one. This is where<00:06:42.960> we<00:06:43.080> list<00:06:43.360> out<00:06:43.560> the<00:06:43.760> back-end<00:06:44.280> features 00:06:44.750 --> 00:06:44.760 align:start position:0% where we list out the back-end features 00:06:44.760 --> 00:06:46.750 align:start position:0% where we list out the back-end features that<00:06:44.880> we<00:06:44.960> want.<00:06:45.440> Here<00:06:45.720> I'm<00:06:45.840> telling<00:06:46.120> AI<00:06:46.280> Studio 00:06:46.750 --> 00:06:46.760 align:start position:0% that we want. Here I'm telling AI Studio 00:06:46.760 --> 00:06:48.790 align:start position:0% that we want. Here I'm telling AI Studio that<00:06:47.040> I<00:06:47.120> need<00:06:47.480> user<00:06:47.760> authentication,<00:06:48.720> a 00:06:48.790 --> 00:06:48.800 align:start position:0% that I need user authentication, a 00:06:48.800 --> 00:06:51.230 align:start position:0% that I need user authentication, a database,<00:06:49.680> file<00:06:50.040> storage,<00:06:50.640> and<00:06:50.800> security 00:06:51.230 --> 00:06:51.240 align:start position:0% database, file storage, and security 00:06:51.240 --> 00:06:53.030 align:start position:0% database, file storage, and security rules.<00:06:51.800> These<00:06:52.040> are<00:06:52.120> the<00:06:52.240> four<00:06:52.520> pillars<00:06:52.919> we 00:06:53.030 --> 00:06:53.040 align:start position:0% rules. These are the four pillars we 00:06:53.040 --> 00:06:54.590 align:start position:0% rules. These are the four pillars we talked<00:06:53.280> about<00:06:53.560> in<00:06:53.640> the<00:06:53.760> intro.<00:06:54.360> And<00:06:54.480> by 00:06:54.590 --> 00:06:54.600 align:start position:0% talked about in the intro. And by 00:06:54.600 --> 00:06:56.310 align:start position:0% talked about in the intro. And by putting<00:06:54.880> them<00:06:55.040> right<00:06:55.240> here<00:06:55.480> in<00:06:55.560> the<00:06:55.680> prompt, 00:06:56.310 --> 00:06:56.320 align:start position:0% putting them right here in the prompt, 00:06:56.320 --> 00:06:58.190 align:start position:0% putting them right here in the prompt, AI<00:06:56.520> Studio<00:06:56.960> knows<00:06:57.320> to<00:06:57.440> set<00:06:57.720> all<00:06:57.840> of<00:06:57.919> this<00:06:58.080> up 00:06:58.190 --> 00:06:58.200 align:start position:0% AI Studio knows to set all of this up 00:06:58.200 --> 00:07:00.230 align:start position:0% AI Studio knows to set all of this up for<00:06:58.320> me<00:06:58.480> automatically.<00:06:59.360> So<00:06:59.520> with<00:06:59.680> our<00:06:59.800> prompt 00:07:00.230 --> 00:07:00.240 align:start position:0% for me automatically. So with our prompt 00:07:00.240 --> 00:07:01.550 align:start position:0% for me automatically. So with our prompt ready<00:07:00.400> to<00:07:00.520> go,<00:07:01.040> I'm<00:07:01.120> going<00:07:01.240> to<00:07:01.320> go<00:07:01.400> to<00:07:01.480> the 00:07:01.550 --> 00:07:01.560 align:start position:0% ready to go, I'm going to go to the 00:07:01.560 --> 00:07:07.430 align:start position:0% ready to go, I'm going to go to the bottom<00:07:01.919> right<00:07:02.120> here<00:07:02.560> and<00:07:02.720> click<00:07:02.919> on<00:07:03.120> build. 00:07:07.430 --> 00:07:07.440 align:start position:0% 00:07:07.440 --> 00:07:09.150 align:start position:0% Now<00:07:07.680> here<00:07:07.919> on<00:07:08.040> the<00:07:08.120> right-hand<00:07:08.560> side<00:07:08.919> is<00:07:09.040> going 00:07:09.150 --> 00:07:09.160 align:start position:0% Now here on the right-hand side is going 00:07:09.160 --> 00:07:10.909 align:start position:0% Now here on the right-hand side is going to<00:07:09.240> be<00:07:09.400> your<00:07:09.600> preview<00:07:10.000> panel.<00:07:10.560> And<00:07:10.680> then<00:07:10.800> on 00:07:10.909 --> 00:07:10.919 align:start position:0% to be your preview panel. And then on 00:07:10.919 --> 00:07:12.230 align:start position:0% to be your preview panel. And then on the<00:07:11.000> left<00:07:11.200> side<00:07:11.440> here,<00:07:11.680> you'll<00:07:11.800> get<00:07:11.919> a<00:07:11.960> live 00:07:12.230 --> 00:07:12.240 align:start position:0% the left side here, you'll get a live 00:07:12.240 --> 00:07:13.670 align:start position:0% the left side here, you'll get a live look<00:07:12.440> at<00:07:12.520> what's<00:07:12.720> happening<00:07:13.200> regarding<00:07:13.600> the 00:07:13.670 --> 00:07:13.680 align:start position:0% look at what's happening regarding the 00:07:13.680 --> 00:07:15.710 align:start position:0% look at what's happening regarding the build<00:07:13.960> of<00:07:14.040> your<00:07:14.160> project.<00:07:14.840> You<00:07:15.000> also<00:07:15.320> may<00:07:15.520> be 00:07:15.710 --> 00:07:15.720 align:start position:0% build of your project. You also may be 00:07:15.720 --> 00:07:17.590 align:start position:0% build of your project. You also may be asked<00:07:16.080> questions<00:07:16.640> regarding<00:07:17.000> your<00:07:17.120> project 00:07:17.590 --> 00:07:17.600 align:start position:0% asked questions regarding your project 00:07:17.600 --> 00:07:19.830 align:start position:0% asked questions regarding your project here<00:07:17.800> on<00:07:17.919> the<00:07:18.000> left<00:07:18.560> or<00:07:18.840> on<00:07:18.960> the<00:07:19.040> right.<00:07:19.560> So<00:07:19.760> I'm 00:07:19.830 --> 00:07:19.840 align:start position:0% here on the left or on the right. So I'm 00:07:19.840 --> 00:07:21.310 align:start position:0% here on the left or on the right. So I'm going<00:07:19.960> to<00:07:20.040> wait<00:07:20.200> for<00:07:20.320> a<00:07:20.400> moment<00:07:20.720> here<00:07:21.040> and<00:07:21.200> see 00:07:21.310 --> 00:07:21.320 align:start position:0% going to wait for a moment here and see 00:07:21.320 --> 00:07:24.550 align:start position:0% going to wait for a moment here and see what<00:07:21.440> happens<00:07:21.760> next. 00:07:24.550 --> 00:07:24.560 align:start position:0% 00:07:24.560 --> 00:07:25.950 align:start position:0% So<00:07:24.880> right<00:07:25.080> here<00:07:25.320> we're<00:07:25.440> being<00:07:25.680> asked<00:07:25.919> a 00:07:25.950 --> 00:07:25.960 align:start position:0% So right here we're being asked a 00:07:25.960 --> 00:07:27.830 align:start position:0% So right here we're being asked a question<00:07:26.440> about<00:07:26.680> how<00:07:26.800> we<00:07:26.919> want<00:07:27.200> the<00:07:27.280> design<00:07:27.720> of 00:07:27.830 --> 00:07:27.840 align:start position:0% question about how we want the design of 00:07:27.840 --> 00:07:29.590 align:start position:0% question about how we want the design of our<00:07:27.919> project<00:07:28.400> to<00:07:28.480> look.<00:07:28.960> We<00:07:29.080> have<00:07:29.240> a<00:07:29.320> few 00:07:29.590 --> 00:07:29.600 align:start position:0% our project to look. We have a few 00:07:29.600 --> 00:07:31.070 align:start position:0% our project to look. We have a few different<00:07:29.840> options<00:07:30.200> here.<00:07:30.600> I<00:07:30.680> can<00:07:30.800> click<00:07:30.960> on 00:07:31.070 --> 00:07:31.080 align:start position:0% different options here. I can click on 00:07:31.080 --> 00:07:33.270 align:start position:0% different options here. I can click on the<00:07:31.160> arrows<00:07:31.600> to<00:07:31.680> look<00:07:31.880> through<00:07:32.120> each<00:07:32.240> of<00:07:32.320> them. 00:07:33.270 --> 00:07:33.280 align:start position:0% the arrows to look through each of them. 00:07:33.280 --> 00:07:34.510 align:start position:0% the arrows to look through each of them. And<00:07:33.520> I<00:07:33.560> think<00:07:33.720> I'll<00:07:33.800> go<00:07:33.919> for<00:07:34.040> this<00:07:34.200> one<00:07:34.360> right 00:07:34.510 --> 00:07:34.520 align:start position:0% And I think I'll go for this one right 00:07:34.520 --> 00:07:36.110 align:start position:0% And I think I'll go for this one right here.<00:07:35.040> So<00:07:35.160> I'll<00:07:35.200> click<00:07:35.440> on<00:07:35.560> select<00:07:35.960> this 00:07:36.110 --> 00:07:36.120 align:start position:0% here. So I'll click on select this 00:07:36.120 --> 00:07:37.870 align:start position:0% here. So I'll click on select this design. 00:07:37.870 --> 00:07:37.880 align:start position:0% design. 00:07:37.880 --> 00:07:39.550 align:start position:0% design. And<00:07:38.080> I'll<00:07:38.160> wait<00:07:38.320> for<00:07:38.440> a<00:07:38.480> few<00:07:38.680> moments<00:07:39.120> and<00:07:39.280> see 00:07:39.550 --> 00:07:39.560 align:start position:0% And I'll wait for a few moments and see 00:07:39.560 --> 00:07:43.030 align:start position:0% And I'll wait for a few moments and see if<00:07:39.720> AI<00:07:39.960> Studio<00:07:40.400> needs<00:07:40.680> me<00:07:40.800> for<00:07:40.919> anything<00:07:41.240> else. 00:07:43.030 --> 00:07:43.040 align:start position:0% if AI Studio needs me for anything else. 00:07:43.040 --> 00:07:44.470 align:start position:0% if AI Studio needs me for anything else. Okay,<00:07:43.360> so<00:07:43.480> now<00:07:43.640> at<00:07:43.720> some<00:07:43.920> point<00:07:44.160> during<00:07:44.320> this 00:07:44.470 --> 00:07:44.480 align:start position:0% Okay, so now at some point during this 00:07:44.480 --> 00:07:46.350 align:start position:0% Okay, so now at some point during this process,<00:07:45.160> you'll<00:07:45.320> see<00:07:45.480> this<00:07:45.640> pop<00:07:45.920> up<00:07:46.080> here 00:07:46.350 --> 00:07:46.360 align:start position:0% process, you'll see this pop up here 00:07:46.360 --> 00:07:48.590 align:start position:0% process, you'll see this pop up here that<00:07:46.560> says<00:07:46.760> enable<00:07:47.200> Firebase.<00:07:48.080> This<00:07:48.240> is<00:07:48.400> AI 00:07:48.590 --> 00:07:48.600 align:start position:0% that says enable Firebase. This is AI 00:07:48.600 --> 00:07:50.470 align:start position:0% that says enable Firebase. This is AI Studio<00:07:49.000> recognizing<00:07:49.600> that<00:07:49.720> your<00:07:49.920> app<00:07:50.160> needs<00:07:50.400> a 00:07:50.470 --> 00:07:50.480 align:start position:0% Studio recognizing that your app needs a 00:07:50.480 --> 00:07:52.350 align:start position:0% Studio recognizing that your app needs a real<00:07:50.680> back<00:07:51.000> end,<00:07:51.480> and<00:07:51.560> it's<00:07:51.720> asking<00:07:52.080> for<00:07:52.200> your 00:07:52.350 --> 00:07:52.360 align:start position:0% real back end, and it's asking for your 00:07:52.360 --> 00:07:54.270 align:start position:0% real back end, and it's asking for your permission<00:07:52.800> to<00:07:52.920> set<00:07:53.080> it<00:07:53.200> up.<00:07:53.920> Go<00:07:54.000> ahead<00:07:54.160> and 00:07:54.270 --> 00:07:54.280 align:start position:0% permission to set it up. Go ahead and 00:07:54.280 --> 00:07:58.030 align:start position:0% permission to set it up. Go ahead and click<00:07:54.520> on<00:07:54.760> enable<00:07:55.200> Firebase. 00:07:58.030 --> 00:07:58.040 align:start position:0% 00:07:58.040 --> 00:07:59.550 align:start position:0% This<00:07:58.160> is<00:07:58.280> going<00:07:58.520> to<00:07:58.640> create<00:07:58.960> your<00:07:59.080> Firebase 00:07:59.550 --> 00:07:59.560 align:start position:0% This is going to create your Firebase 00:07:59.560 --> 00:08:01.790 align:start position:0% This is going to create your Firebase project,<00:08:00.240> set<00:08:00.440> up<00:08:00.520> your<00:08:00.640> database,<00:08:01.400> configure 00:08:01.790 --> 00:08:01.800 align:start position:0% project, set up your database, configure 00:08:01.800 --> 00:08:03.710 align:start position:0% project, set up your database, configure authentication,<00:08:02.720> and<00:08:02.840> connect<00:08:03.160> everything 00:08:03.710 --> 00:08:03.720 align:start position:0% authentication, and connect everything 00:08:03.720 --> 00:08:05.270 align:start position:0% authentication, and connect everything to<00:08:03.840> your<00:08:04.040> app.<00:08:04.520> All<00:08:04.720> of<00:08:04.760> that<00:08:04.920> happens 00:08:05.270 --> 00:08:05.280 align:start position:0% to your app. All of that happens 00:08:05.280 --> 00:08:07.150 align:start position:0% to your app. All of that happens automatically<00:08:06.080> just<00:08:06.280> by<00:08:06.400> clicking<00:08:06.720> this<00:08:06.920> one 00:08:07.150 --> 00:08:07.160 align:start position:0% automatically just by clicking this one 00:08:07.160 --> 00:08:08.750 align:start position:0% automatically just by clicking this one button.<00:08:07.760> Now,<00:08:07.880> let's<00:08:08.040> wait<00:08:08.240> for<00:08:08.360> a<00:08:08.440> few<00:08:08.600> more 00:08:08.750 --> 00:08:08.760 align:start position:0% button. Now, let's wait for a few more 00:08:08.760 --> 00:08:12.110 align:start position:0% button. Now, let's wait for a few more moments<00:08:09.120> here<00:08:09.400> and<00:08:09.560> see<00:08:09.720> what<00:08:09.840> happens<00:08:10.200> next. 00:08:12.110 --> 00:08:12.120 align:start position:0% moments here and see what happens next. 00:08:12.120 --> 00:08:14.390 align:start position:0% moments here and see what happens next. And<00:08:12.320> once<00:08:12.560> everything<00:08:12.919> is<00:08:13.080> done,<00:08:13.600> AI<00:08:13.840> Studio 00:08:14.390 --> 00:08:14.400 align:start position:0% And once everything is done, AI Studio 00:08:14.400 --> 00:08:16.390 align:start position:0% And once everything is done, AI Studio will<00:08:14.560> now<00:08:14.760> give<00:08:15.000> you<00:08:15.240> the<00:08:15.360> initial<00:08:15.720> build<00:08:16.240> of 00:08:16.390 --> 00:08:16.400 align:start position:0% will now give you the initial build of 00:08:16.400 --> 00:08:18.470 align:start position:0% will now give you the initial build of both<00:08:16.600> your<00:08:16.760> front<00:08:17.040> end<00:08:17.440> and<00:08:17.560> your<00:08:17.680> back<00:08:18.000> end. 00:08:18.470 --> 00:08:18.480 align:start position:0% both your front end and your back end. 00:08:18.480 --> 00:08:20.150 align:start position:0% both your front end and your back end. And<00:08:18.600> now,<00:08:18.720> you<00:08:18.840> might<00:08:19.000> be<00:08:19.120> tempted<00:08:19.520> here<00:08:19.880> to 00:08:20.150 --> 00:08:20.160 align:start position:0% And now, you might be tempted here to 00:08:20.160 --> 00:08:22.230 align:start position:0% And now, you might be tempted here to jump<00:08:20.520> in<00:08:20.760> and<00:08:20.880> start<00:08:21.080> testing<00:08:21.440> your<00:08:21.640> app<00:08:22.040> and 00:08:22.230 --> 00:08:22.240 align:start position:0% jump in and start testing your app and 00:08:22.240 --> 00:08:23.909 align:start position:0% jump in and start testing your app and looking<00:08:22.480> around<00:08:22.800> at<00:08:22.919> the<00:08:23.000> design<00:08:23.560> and<00:08:23.680> all<00:08:23.840> of 00:08:23.909 --> 00:08:23.919 align:start position:0% looking around at the design and all of 00:08:23.919 --> 00:08:25.950 align:start position:0% looking around at the design and all of the<00:08:24.000> pages,<00:08:24.760> but<00:08:25.000> I'd<00:08:25.120> recommend<00:08:25.480> holding<00:08:25.800> off 00:08:25.950 --> 00:08:25.960 align:start position:0% the pages, but I'd recommend holding off 00:08:25.960 --> 00:08:27.590 align:start position:0% the pages, but I'd recommend holding off on<00:08:26.080> that<00:08:26.240> for<00:08:26.360> now.<00:08:26.800> The<00:08:26.919> first<00:08:27.200> thing<00:08:27.360> we<00:08:27.440> want 00:08:27.590 --> 00:08:27.600 align:start position:0% on that for now. The first thing we want 00:08:27.600 --> 00:08:30.030 align:start position:0% on that for now. The first thing we want to<00:08:27.680> do<00:08:27.880> here<00:08:28.280> is<00:08:28.520> jump<00:08:28.800> into<00:08:29.000> the<00:08:29.120> back<00:08:29.480> end<00:08:29.919> and 00:08:30.030 --> 00:08:30.040 align:start position:0% to do here is jump into the back end and 00:08:30.040 --> 00:08:31.670 align:start position:0% to do here is jump into the back end and verify<00:08:30.250> [music]<00:08:30.560> that<00:08:30.800> everything<00:08:31.160> is<00:08:31.320> set<00:08:31.480> up 00:08:31.670 --> 00:08:31.680 align:start position:0% verify [music] that everything is set up 00:08:31.680 --> 00:08:33.990 align:start position:0% verify [music] that everything is set up and<00:08:31.800> connected<00:08:32.200> properly.<00:08:32.880> AI<00:08:33.120> Studio<00:08:33.560> set<00:08:33.800> up 00:08:33.990 --> 00:08:34.000 align:start position:0% and connected properly. AI Studio set up 00:08:34.000 --> 00:08:36.310 align:start position:0% and connected properly. AI Studio set up a<00:08:34.080> front<00:08:34.479> end<00:08:34.800> and<00:08:35.000> a<00:08:35.080> back<00:08:35.440> end<00:08:35.560> for<00:08:35.800> us,<00:08:36.159> but 00:08:36.310 --> 00:08:36.320 align:start position:0% a front end and a back end for us, but 00:08:36.320 --> 00:08:37.709 align:start position:0% a front end and a back end for us, but we<00:08:36.440> want<00:08:36.560> to<00:08:36.640> make<00:08:36.760> sure<00:08:37.080> everything<00:08:37.520> on<00:08:37.640> the 00:08:37.709 --> 00:08:37.719 align:start position:0% we want to make sure everything on the 00:08:37.719 --> 00:08:39.670 align:start position:0% we want to make sure everything on the back<00:08:38.080> end<00:08:38.240> side<00:08:38.680> is<00:08:38.800> configured<00:08:39.240> the<00:08:39.360> right 00:08:39.670 --> 00:08:39.680 align:start position:0% back end side is configured the right 00:08:39.680 --> 00:08:41.709 align:start position:0% back end side is configured the right way<00:08:40.120> before<00:08:40.360> we<00:08:40.440> start<00:08:40.680> making<00:08:40.960> any<00:08:41.200> changes 00:08:41.709 --> 00:08:41.719 align:start position:0% way before we start making any changes 00:08:41.719 --> 00:08:43.469 align:start position:0% way before we start making any changes to<00:08:41.800> the<00:08:41.919> front<00:08:42.240> end.<00:08:42.760> That<00:08:42.880> way,<00:08:43.120> once<00:08:43.400> the 00:08:43.469 --> 00:08:43.479 align:start position:0% to the front end. That way, once the 00:08:43.479 --> 00:08:45.350 align:start position:0% to the front end. That way, once the back<00:08:43.840> end<00:08:44.039> is<00:08:44.160> established,<00:08:45.040> all<00:08:45.200> of<00:08:45.280> the 00:08:45.350 --> 00:08:45.360 align:start position:0% back end is established, all of the 00:08:45.360 --> 00:08:47.350 align:start position:0% back end is established, all of the changes<00:08:45.760> you<00:08:45.880> make<00:08:46.080> going<00:08:46.360> forward<00:08:47.000> will<00:08:47.120> be 00:08:47.350 --> 00:08:47.360 align:start position:0% changes you make going forward will be 00:08:47.360 --> 00:08:49.310 align:start position:0% changes you make going forward will be on<00:08:47.480> the<00:08:47.600> final<00:08:48.080> version<00:08:48.480> of<00:08:48.600> your<00:08:48.760> app,<00:08:49.200> and 00:08:49.310 --> 00:08:49.320 align:start position:0% on the final version of your app, and 00:08:49.320 --> 00:08:51.150 align:start position:0% on the final version of your app, and nothing<00:08:49.680> is<00:08:49.800> going<00:08:50.040> to<00:08:50.120> get<00:08:50.280> overwritten<00:08:51.000> or 00:08:51.150 --> 00:08:51.160 align:start position:0% nothing is going to get overwritten or 00:08:51.160 --> 00:08:52.829 align:start position:0% nothing is going to get overwritten or broken.<00:08:51.760> So,<00:08:51.960> we'll<00:08:52.120> take<00:08:52.320> care<00:08:52.520> of<00:08:52.600> that 00:08:52.829 --> 00:08:52.839 align:start position:0% broken. So, we'll take care of that 00:08:52.839 --> 00:08:55.270 align:start position:0% broken. So, we'll take care of that first.<00:08:53.480> Now,<00:08:53.640> to<00:08:53.839> access<00:08:54.280> your<00:08:54.440> back<00:08:54.760> end,<00:08:55.200> you 00:08:55.270 --> 00:08:55.280 align:start position:0% first. Now, to access your back end, you 00:08:55.280 --> 00:08:57.230 align:start position:0% first. Now, to access your back end, you need<00:08:55.480> to<00:08:55.600> go<00:08:55.800> to<00:08:55.920> the<00:08:56.000> Firebase<00:08:56.560> console, 00:08:57.230 --> 00:08:57.240 align:start position:0% need to go to the Firebase console, 00:08:57.240 --> 00:08:58.990 align:start position:0% need to go to the Firebase console, which<00:08:57.400> is<00:08:57.520> on<00:08:57.680> a<00:08:57.720> separate<00:08:58.200> website.<00:08:58.800> So,<00:08:58.920> let 00:08:58.990 --> 00:08:59.000 align:start position:0% which is on a separate website. So, let 00:08:59.000 --> 00:09:00.470 align:start position:0% which is on a separate website. So, let me<00:08:59.120> show<00:08:59.240> you<00:08:59.360> how<00:08:59.440> to<00:08:59.560> get<00:08:59.760> there<00:09:00.200> and<00:09:00.320> how<00:09:00.400> to 00:09:00.470 --> 00:09:00.480 align:start position:0% me show you how to get there and how to 00:09:00.480 --> 00:09:02.110 align:start position:0% me show you how to get there and how to navigate<00:09:01.000> it<00:09:01.240> so<00:09:01.360> you<00:09:01.440> can<00:09:01.560> start<00:09:01.800> making<00:09:02.040> the 00:09:02.110 --> 00:09:02.120 align:start position:0% navigate it so you can start making the 00:09:02.120 --> 00:09:03.750 align:start position:0% navigate it so you can start making the changes<00:09:02.640> that<00:09:02.760> we<00:09:02.880> need. 00:09:03.750 --> 00:09:03.760 align:start position:0% changes that we need. 00:09:03.760 --> 00:09:06.150 align:start position:0% changes that we need. To<00:09:03.960> access<00:09:04.520> our<00:09:04.720> Firebase<00:09:05.200> console,<00:09:05.960> go<00:09:06.080> to 00:09:06.150 --> 00:09:06.160 align:start position:0% To access our Firebase console, go to 00:09:06.160 --> 00:09:09.430 align:start position:0% To access our Firebase console, go to the<00:09:06.280> top<00:09:06.720> and<00:09:06.880> open<00:09:07.120> up<00:09:07.240> a<00:09:07.280> new<00:09:07.480> tab. 00:09:09.430 --> 00:09:09.440 align:start position:0% the top and open up a new tab. 00:09:09.440 --> 00:09:10.670 align:start position:0% the top and open up a new tab. And<00:09:09.520> then,<00:09:09.680> you'll<00:09:09.800> go<00:09:10.040> to 00:09:10.670 --> 00:09:10.680 align:start position:0% And then, you'll go to 00:09:10.680 --> 00:09:14.190 align:start position:0% And then, you'll go to console.firebase.google.com. 00:09:14.190 --> 00:09:14.200 align:start position:0% 00:09:14.200 --> 00:09:15.590 align:start position:0% I'll<00:09:14.360> leave<00:09:14.520> this<00:09:14.720> link<00:09:15.000> in<00:09:15.080> the<00:09:15.120> description 00:09:15.590 --> 00:09:15.600 align:start position:0% I'll leave this link in the description 00:09:15.600 --> 00:09:19.910 align:start position:0% I'll leave this link in the description as<00:09:15.720> well.<00:09:16.280> So,<00:09:16.440> I'll<00:09:16.520> go<00:09:16.640> to<00:09:16.680> this<00:09:16.839> link<00:09:17.080> here. 00:09:19.910 --> 00:09:19.920 align:start position:0% 00:09:19.920 --> 00:09:21.630 align:start position:0% And<00:09:20.040> then,<00:09:20.240> on<00:09:20.360> the<00:09:20.440> right<00:09:20.720> side,<00:09:21.280> you'll<00:09:21.440> see 00:09:21.630 --> 00:09:21.640 align:start position:0% And then, on the right side, you'll see 00:09:21.640 --> 00:09:23.510 align:start position:0% And then, on the right side, you'll see your<00:09:21.800> project<00:09:22.320> right<00:09:22.520> here.<00:09:23.200> Go<00:09:23.320> ahead<00:09:23.440> and 00:09:23.510 --> 00:09:23.520 align:start position:0% your project right here. Go ahead and 00:09:23.520 --> 00:09:27.270 align:start position:0% your project right here. Go ahead and click<00:09:23.720> into<00:09:23.960> it. 00:09:27.270 --> 00:09:27.280 align:start position:0% 00:09:27.280 --> 00:09:29.550 align:start position:0% Close<00:09:27.640> out<00:09:27.760> of<00:09:27.800> this. 00:09:29.550 --> 00:09:29.560 align:start position:0% Close out of this. 00:09:29.560 --> 00:09:31.670 align:start position:0% Close out of this. And<00:09:29.800> here<00:09:30.120> is<00:09:30.280> your<00:09:30.440> Firebase<00:09:30.880> console.<00:09:31.560> This 00:09:31.670 --> 00:09:31.680 align:start position:0% And here is your Firebase console. This 00:09:31.680 --> 00:09:33.070 align:start position:0% And here is your Firebase console. This is<00:09:31.800> where<00:09:31.920> you<00:09:32.000> can<00:09:32.160> see<00:09:32.520> and<00:09:32.720> manage 00:09:33.070 --> 00:09:33.080 align:start position:0% is where you can see and manage 00:09:33.080 --> 00:09:34.510 align:start position:0% is where you can see and manage everything<00:09:33.480> that's<00:09:33.640> happening<00:09:34.120> behind<00:09:34.440> the 00:09:34.510 --> 00:09:34.520 align:start position:0% everything that's happening behind the 00:09:34.520 --> 00:09:36.590 align:start position:0% everything that's happening behind the scenes<00:09:35.000> of<00:09:35.120> your<00:09:35.280> app.<00:09:35.720> Stuff<00:09:36.040> like<00:09:36.200> your<00:09:36.360> user 00:09:36.590 --> 00:09:36.600 align:start position:0% scenes of your app. Stuff like your user 00:09:36.600 --> 00:09:38.990 align:start position:0% scenes of your app. Stuff like your user accounts,<00:09:37.280> database,<00:09:38.040> file<00:09:38.320> storage, 00:09:38.990 --> 00:09:39.000 align:start position:0% accounts, database, file storage, 00:09:39.000 --> 00:09:41.110 align:start position:0% accounts, database, file storage, security<00:09:39.440> rules,<00:09:40.040> all<00:09:40.240> of<00:09:40.360> that<00:09:40.600> lives<00:09:40.920> right 00:09:41.110 --> 00:09:41.120 align:start position:0% security rules, all of that lives right 00:09:41.120 --> 00:09:42.870 align:start position:0% security rules, all of that lives right here.<00:09:41.640> Anytime<00:09:42.200> you<00:09:42.280> need<00:09:42.440> to<00:09:42.520> check<00:09:42.760> on 00:09:42.870 --> 00:09:42.880 align:start position:0% here. Anytime you need to check on 00:09:42.880 --> 00:09:44.910 align:start position:0% here. Anytime you need to check on something<00:09:43.440> or<00:09:43.600> make<00:09:43.800> a<00:09:43.840> change<00:09:44.360> to<00:09:44.480> your<00:09:44.600> back 00:09:44.910 --> 00:09:44.920 align:start position:0% something or make a change to your back 00:09:44.920 --> 00:09:46.670 align:start position:0% something or make a change to your back end,<00:09:45.400> this<00:09:45.560> is<00:09:45.680> where<00:09:45.800> you'll<00:09:45.960> go.<00:09:46.440> Now,<00:09:46.560> the 00:09:46.670 --> 00:09:46.680 align:start position:0% end, this is where you'll go. Now, the 00:09:46.680 --> 00:09:48.270 align:start position:0% end, this is where you'll go. Now, the first<00:09:46.960> thing<00:09:47.080> that<00:09:47.200> we<00:09:47.240> need<00:09:47.400> to<00:09:47.520> do<00:09:47.680> here<00:09:48.120> is 00:09:48.270 --> 00:09:48.280 align:start position:0% first thing that we need to do here is 00:09:48.280 --> 00:09:50.270 align:start position:0% first thing that we need to do here is check<00:09:48.640> authentication.<00:09:49.520> Let's<00:09:49.720> go<00:09:50.000> over<00:09:50.200> to 00:09:50.270 --> 00:09:50.280 align:start position:0% check authentication. Let's go over to 00:09:50.280 --> 00:09:52.510 align:start position:0% check authentication. Let's go over to the<00:09:50.360> left<00:09:50.600> side<00:09:50.840> right<00:09:51.000> here<00:09:51.720> and<00:09:51.920> hover<00:09:52.240> over 00:09:52.510 --> 00:09:52.520 align:start position:0% the left side right here and hover over 00:09:52.520 --> 00:09:57.470 align:start position:0% the left side right here and hover over security.<00:09:53.480> Click<00:09:53.680> into<00:09:54.000> authentication. 00:09:57.470 --> 00:09:57.480 align:start position:0% 00:09:57.480 --> 00:09:59.470 align:start position:0% From<00:09:57.680> here,<00:09:57.960> go<00:09:58.080> to<00:09:58.160> the<00:09:58.280> top<00:09:58.760> and<00:09:58.920> click<00:09:59.160> on 00:09:59.470 --> 00:09:59.480 align:start position:0% From here, go to the top and click on 00:09:59.480 --> 00:10:02.230 align:start position:0% From here, go to the top and click on sign-in<00:09:59.920> method. 00:10:02.230 --> 00:10:02.240 align:start position:0% sign-in method. 00:10:02.240 --> 00:10:03.870 align:start position:0% sign-in method. What<00:10:02.400> you'll<00:10:02.520> see<00:10:02.760> here<00:10:03.160> is<00:10:03.320> a<00:10:03.360> list<00:10:03.760> of 00:10:03.870 --> 00:10:03.880 align:start position:0% What you'll see here is a list of 00:10:03.880 --> 00:10:05.830 align:start position:0% What you'll see here is a list of sign-in<00:10:04.240> providers.<00:10:05.040> AI<00:10:05.240> Studio 00:10:05.830 --> 00:10:05.840 align:start position:0% sign-in providers. AI Studio 00:10:05.840 --> 00:10:07.590 align:start position:0% sign-in providers. AI Studio automatically<00:10:06.400> enabled<00:10:06.760> Google<00:10:07.040> sign-in<00:10:07.360> for 00:10:07.590 --> 00:10:07.600 align:start position:0% automatically enabled Google sign-in for 00:10:07.600 --> 00:10:09.110 align:start position:0% automatically enabled Google sign-in for us,<00:10:07.840> which<00:10:08.000> is<00:10:08.120> great.<00:10:08.640> But,<00:10:08.760> if<00:10:08.840> you<00:10:08.920> want 00:10:09.110 --> 00:10:09.120 align:start position:0% us, which is great. But, if you want 00:10:09.120 --> 00:10:10.750 align:start position:0% us, which is great. But, if you want your<00:10:09.280> users<00:10:09.680> to<00:10:09.760> be<00:10:09.840> able<00:10:10.000> to<00:10:10.080> sign<00:10:10.360> up<00:10:10.480> with<00:10:10.600> an 00:10:10.750 --> 00:10:10.760 align:start position:0% your users to be able to sign up with an 00:10:10.760 --> 00:10:12.790 align:start position:0% your users to be able to sign up with an email<00:10:11.120> and<00:10:11.240> password,<00:10:11.960> which<00:10:12.240> most<00:10:12.560> apps 00:10:12.790 --> 00:10:12.800 align:start position:0% email and password, which most apps 00:10:12.800 --> 00:10:14.870 align:start position:0% email and password, which most apps need,<00:10:13.320> we<00:10:13.400> have<00:10:13.520> to<00:10:13.640> turn<00:10:13.840> that<00:10:14.000> on<00:10:14.120> ourselves. 00:10:14.870 --> 00:10:14.880 align:start position:0% need, we have to turn that on ourselves. 00:10:14.880 --> 00:10:16.510 align:start position:0% need, we have to turn that on ourselves. So,<00:10:15.040> over<00:10:15.240> here<00:10:15.400> on<00:10:15.480> the<00:10:15.560> right<00:10:15.800> side,<00:10:16.280> click 00:10:16.510 --> 00:10:16.520 align:start position:0% So, over here on the right side, click 00:10:16.520 --> 00:10:19.590 align:start position:0% So, over here on the right side, click on<00:10:16.880> add<00:10:17.160> new<00:10:17.320> provider. 00:10:19.590 --> 00:10:19.600 align:start position:0% on add new provider. 00:10:19.600 --> 00:10:23.910 align:start position:0% on add new provider. And<00:10:19.880> here,<00:10:20.280> click<00:10:20.600> on<00:10:21.000> email<00:10:21.480> and<00:10:21.600> password. 00:10:23.910 --> 00:10:23.920 align:start position:0% And here, click on email and password. 00:10:23.920 --> 00:10:26.630 align:start position:0% And here, click on email and password. And<00:10:24.120> we'll<00:10:24.240> enable<00:10:24.600> this<00:10:24.840> right<00:10:25.040> here. 00:10:26.630 --> 00:10:26.640 align:start position:0% And we'll enable this right here. 00:10:26.640 --> 00:10:29.710 align:start position:0% And we'll enable this right here. And<00:10:26.960> click<00:10:27.240> save. 00:10:29.710 --> 00:10:29.720 align:start position:0% And click save. 00:10:29.720 --> 00:10:31.190 align:start position:0% And click save. And<00:10:29.800> now,<00:10:29.920> with<00:10:30.040> that<00:10:30.240> change<00:10:30.600> made,<00:10:31.040> our 00:10:31.190 --> 00:10:31.200 align:start position:0% And now, with that change made, our 00:10:31.200 --> 00:10:32.910 align:start position:0% And now, with that change made, our users<00:10:31.600> will<00:10:31.680> be<00:10:31.760> able<00:10:31.920> to<00:10:32.000> sign<00:10:32.240> up<00:10:32.520> on<00:10:32.640> our<00:10:32.760> web 00:10:32.910 --> 00:10:32.920 align:start position:0% users will be able to sign up on our web 00:10:32.920 --> 00:10:34.990 align:start position:0% users will be able to sign up on our web app<00:10:33.160> using<00:10:33.520> their<00:10:33.720> email<00:10:34.080> and<00:10:34.200> password.<00:10:34.920> The 00:10:34.990 --> 00:10:35.000 align:start position:0% app using their email and password. The 00:10:35.000 --> 00:10:36.670 align:start position:0% app using their email and password. The second<00:10:35.360> thing<00:10:35.560> that<00:10:35.680> we'll<00:10:35.800> set<00:10:35.960> up<00:10:36.120> here<00:10:36.440> is 00:10:36.670 --> 00:10:36.680 align:start position:0% second thing that we'll set up here is 00:10:36.680 --> 00:10:38.870 align:start position:0% second thing that we'll set up here is file<00:10:37.000> storage.<00:10:37.720> On<00:10:37.840> the<00:10:37.920> left<00:10:38.120> side<00:10:38.360> menu, 00:10:38.870 --> 00:10:38.880 align:start position:0% file storage. On the left side menu, 00:10:38.880 --> 00:10:41.510 align:start position:0% file storage. On the left side menu, look<00:10:39.120> for<00:10:39.400> databases<00:10:40.160> and<00:10:40.360> storage,<00:10:41.320> then 00:10:41.510 --> 00:10:41.520 align:start position:0% look for databases and storage, then 00:10:41.520 --> 00:10:45.590 align:start position:0% look for databases and storage, then click<00:10:41.760> into<00:10:42.080> storage<00:10:42.560> here. 00:10:45.590 --> 00:10:45.600 align:start position:0% 00:10:45.600 --> 00:10:47.350 align:start position:0% When<00:10:45.760> you<00:10:45.880> open<00:10:46.120> this<00:10:46.320> for<00:10:46.400> the<00:10:46.520> first<00:10:46.880> time, 00:10:47.350 --> 00:10:47.360 align:start position:0% When you open this for the first time, 00:10:47.360 --> 00:10:49.510 align:start position:0% When you open this for the first time, Firebase<00:10:47.960> is<00:10:48.080> going<00:10:48.280> to<00:10:48.400> ask<00:10:48.720> you<00:10:48.880> to<00:10:49.040> upgrade 00:10:49.510 --> 00:10:49.520 align:start position:0% Firebase is going to ask you to upgrade 00:10:49.520 --> 00:10:51.350 align:start position:0% Firebase is going to ask you to upgrade to<00:10:49.600> the<00:10:49.720> Blaze<00:10:50.080> plan.<00:10:50.640> Don't<00:10:50.839> worry,<00:10:51.080> because 00:10:51.350 --> 00:10:51.360 align:start position:0% to the Blaze plan. Don't worry, because 00:10:51.360 --> 00:10:52.990 align:start position:0% to the Blaze plan. Don't worry, because this<00:10:51.480> is<00:10:51.600> completely<00:10:52.040> normal.<00:10:52.560> Firebase 00:10:52.990 --> 00:10:53.000 align:start position:0% this is completely normal. Firebase 00:10:53.000 --> 00:10:54.790 align:start position:0% this is completely normal. Firebase storage<00:10:53.440> requires<00:10:53.880> a<00:10:53.920> billing<00:10:54.200> account<00:10:54.600> to<00:10:54.680> be 00:10:54.790 --> 00:10:54.800 align:start position:0% storage requires a billing account to be 00:10:54.800 --> 00:10:56.590 align:start position:0% storage requires a billing account to be on<00:10:54.960> file<00:10:55.320> before<00:10:55.640> you<00:10:55.720> can<00:10:55.880> use<00:10:56.080> it.<00:10:56.440> But, 00:10:56.590 --> 00:10:56.600 align:start position:0% on file before you can use it. But, 00:10:56.600 --> 00:10:57.630 align:start position:0% on file before you can use it. But, here's<00:10:56.800> the<00:10:56.880> important<00:10:57.320> thing<00:10:57.520> to 00:10:57.630 --> 00:10:57.640 align:start position:0% here's the important thing to 00:10:57.640 --> 00:10:59.790 align:start position:0% here's the important thing to understand.<00:10:58.520> You're<00:10:58.680> not<00:10:58.960> signing<00:10:59.280> up<00:10:59.440> for<00:10:59.680> a 00:10:59.790 --> 00:10:59.800 align:start position:0% understand. You're not signing up for a 00:10:59.800 --> 00:11:02.630 align:start position:0% understand. You're not signing up for a paid<00:11:00.200> subscription.<00:11:01.120> Firebase's<00:11:01.839> Blaze<00:11:02.240> plan 00:11:02.630 --> 00:11:02.640 align:start position:0% paid subscription. Firebase's Blaze plan 00:11:02.640 --> 00:11:04.750 align:start position:0% paid subscription. Firebase's Blaze plan is<00:11:02.880> pay-as-you-go,<00:11:03.880> which<00:11:04.080> means<00:11:04.360> you<00:11:04.520> only 00:11:04.750 --> 00:11:04.760 align:start position:0% is pay-as-you-go, which means you only 00:11:04.760 --> 00:11:06.670 align:start position:0% is pay-as-you-go, which means you only get<00:11:04.960> charged<00:11:05.480> for<00:11:05.600> what<00:11:05.720> you<00:11:05.839> actually<00:11:06.360> use 00:11:06.670 --> 00:11:06.680 align:start position:0% get charged for what you actually use 00:11:06.680 --> 00:11:08.430 align:start position:0% get charged for what you actually use beyond<00:11:07.000> the<00:11:07.080> free<00:11:07.360> tier.<00:11:07.880> And<00:11:08.000> the<00:11:08.040> free<00:11:08.240> tier 00:11:08.430 --> 00:11:08.440 align:start position:0% beyond the free tier. And the free tier 00:11:08.440 --> 00:11:10.590 align:start position:0% beyond the free tier. And the free tier is<00:11:08.600> actually<00:11:08.960> really<00:11:09.240> generous.<00:11:10.000> You<00:11:10.120> get<00:11:10.320> 5 00:11:10.590 --> 00:11:10.600 align:start position:0% is actually really generous. You get 5 00:11:10.600 --> 00:11:12.550 align:start position:0% is actually really generous. You get 5 gigs<00:11:10.839> of<00:11:10.920> storage,<00:11:11.600> 1<00:11:11.880> gig<00:11:12.120> per<00:11:12.240> day<00:11:12.440> of 00:11:12.550 --> 00:11:12.560 align:start position:0% gigs of storage, 1 gig per day of 00:11:12.560 --> 00:11:15.270 align:start position:0% gigs of storage, 1 gig per day of downloads,<00:11:13.360> and<00:11:13.520> 50,000<00:11:14.400> read<00:11:14.640> operations 00:11:15.270 --> 00:11:15.280 align:start position:0% downloads, and 50,000 read operations 00:11:15.280 --> 00:11:16.990 align:start position:0% downloads, and 50,000 read operations per<00:11:15.440> day.<00:11:15.920> For<00:11:16.040> context,<00:11:16.640> you<00:11:16.720> would<00:11:16.800> have<00:11:16.920> to 00:11:16.990 --> 00:11:17.000 align:start position:0% per day. For context, you would have to 00:11:17.000 --> 00:11:18.829 align:start position:0% per day. For context, you would have to be<00:11:17.120> running<00:11:17.277> [music]<00:11:17.560> a<00:11:17.680> pretty<00:11:18.080> active<00:11:18.520> app 00:11:18.829 --> 00:11:18.839 align:start position:0% be running [music] a pretty active app 00:11:18.839 --> 00:11:20.990 align:start position:0% be running [music] a pretty active app to<00:11:19.040> even<00:11:19.280> come<00:11:19.520> close<00:11:19.839> to<00:11:19.920> those<00:11:20.120> numbers.<00:11:20.800> For 00:11:20.990 --> 00:11:21.000 align:start position:0% to even come close to those numbers. For 00:11:21.000 --> 00:11:23.070 align:start position:0% to even come close to those numbers. For learning,<00:11:21.640> building,<00:11:22.080> and<00:11:22.240> testing,<00:11:22.920> you're 00:11:23.070 --> 00:11:23.080 align:start position:0% learning, building, and testing, you're 00:11:23.080 --> 00:11:25.590 align:start position:0% learning, building, and testing, you're most<00:11:23.360> likely<00:11:23.720> not<00:11:23.920> going<00:11:24.160> to<00:11:24.240> pay<00:11:24.480> a<00:11:24.560> cent.<00:11:25.440> So, 00:11:25.590 --> 00:11:25.600 align:start position:0% most likely not going to pay a cent. So, 00:11:25.600 --> 00:11:29.390 align:start position:0% most likely not going to pay a cent. So, let's<00:11:25.800> click<00:11:26.000> on<00:11:26.240> upgrade<00:11:26.720> project. 00:11:29.390 --> 00:11:29.400 align:start position:0% let's click on upgrade project. 00:11:29.400 --> 00:11:31.750 align:start position:0% let's click on upgrade project. Then,<00:11:29.600> scroll<00:11:29.960> down<00:11:30.480> and<00:11:30.640> click<00:11:30.880> on<00:11:31.200> create<00:11:31.680> a 00:11:31.750 --> 00:11:31.760 align:start position:0% Then, scroll down and click on create a 00:11:31.760 --> 00:11:35.910 align:start position:0% Then, scroll down and click on create a cloud<00:11:32.120> billing<00:11:32.360> account. 00:11:35.910 --> 00:11:35.920 align:start position:0% 00:11:35.920 --> 00:11:41.470 align:start position:0% Click<00:11:36.160> on<00:11:36.440> agree<00:11:36.880> and<00:11:37.000> continue. 00:11:41.470 --> 00:11:41.480 align:start position:0% 00:11:41.480 --> 00:11:42.790 align:start position:0% And<00:11:41.560> then<00:11:41.680> here<00:11:42.000> you'll<00:11:42.080> need<00:11:42.200> to<00:11:42.280> fill<00:11:42.520> out 00:11:42.790 --> 00:11:42.800 align:start position:0% And then here you'll need to fill out 00:11:42.800 --> 00:11:44.910 align:start position:0% And then here you'll need to fill out your<00:11:43.040> contact<00:11:43.560> information<00:11:44.360> and<00:11:44.600> payment 00:11:44.910 --> 00:11:44.920 align:start position:0% your contact information and payment 00:11:44.920 --> 00:11:46.550 align:start position:0% your contact information and payment method. 00:11:46.550 --> 00:11:46.560 align:start position:0% method. 00:11:46.560 --> 00:11:48.350 align:start position:0% method. And<00:11:46.680> once<00:11:46.840> you're<00:11:46.960> done<00:11:47.120> with<00:11:47.280> that,<00:11:47.640> click<00:11:47.960> on 00:11:48.350 --> 00:11:48.360 align:start position:0% And once you're done with that, click on 00:11:48.360 --> 00:11:52.430 align:start position:0% And once you're done with that, click on start<00:11:48.760> free. 00:11:52.430 --> 00:11:52.440 align:start position:0% 00:11:52.440 --> 00:11:53.990 align:start position:0% Now,<00:11:52.600> depending<00:11:53.040> on<00:11:53.120> your<00:11:53.240> payment<00:11:53.560> method, 00:11:53.990 --> 00:11:54.000 align:start position:0% Now, depending on your payment method, 00:11:54.000 --> 00:11:56.110 align:start position:0% Now, depending on your payment method, you<00:11:54.120> might<00:11:54.360> see<00:11:54.520> a<00:11:54.600> pop-up<00:11:55.040> here<00:11:55.440> asking<00:11:55.840> for<00:11:56.040> a 00:11:56.110 --> 00:11:56.120 align:start position:0% you might see a pop-up here asking for a 00:11:56.120 --> 00:11:58.670 align:start position:0% you might see a pop-up here asking for a one-time<00:11:56.720> $10<00:11:57.240> prepayment.<00:11:58.040> This<00:11:58.200> is<00:11:58.360> just 00:11:58.670 --> 00:11:58.680 align:start position:0% one-time $10 prepayment. This is just 00:11:58.680 --> 00:12:00.630 align:start position:0% one-time $10 prepayment. This is just Google<00:11:59.040> verifying<00:11:59.600> your<00:11:59.720> payment<00:12:00.040> method<00:12:00.560> and 00:12:00.630 --> 00:12:00.640 align:start position:0% Google verifying your payment method and 00:12:00.640 --> 00:12:02.830 align:start position:0% Google verifying your payment method and it's<00:12:00.800> not<00:12:01.040> a<00:12:01.080> charge<00:12:01.560> for<00:12:01.720> Firebase.<00:12:02.600> Once 00:12:02.830 --> 00:12:02.840 align:start position:0% it's not a charge for Firebase. Once 00:12:02.840 --> 00:12:04.390 align:start position:0% it's not a charge for Firebase. Once it's<00:12:03.000> credited<00:12:03.400> to<00:12:03.480> your<00:12:03.640> account,<00:12:04.240> you'll 00:12:04.390 --> 00:12:04.400 align:start position:0% it's credited to your account, you'll 00:12:04.400 --> 00:12:06.390 align:start position:0% it's credited to your account, you'll also<00:12:04.720> get<00:12:04.920> free<00:12:05.160> trial<00:12:05.480> credits.<00:12:06.120> And<00:12:06.240> if<00:12:06.360> you 00:12:06.390 --> 00:12:06.400 align:start position:0% also get free trial credits. And if you 00:12:06.400 --> 00:12:08.550 align:start position:0% also get free trial credits. And if you ever<00:12:06.600> close<00:12:06.920> your<00:12:07.040> billing<00:12:07.280> account,<00:12:07.720> the<00:12:07.840> $10 00:12:08.550 --> 00:12:08.560 align:start position:0% ever close your billing account, the $10 00:12:08.560 --> 00:12:10.590 align:start position:0% ever close your billing account, the $10 is<00:12:08.760> refundable.<00:12:09.600> So,<00:12:09.840> I'll<00:12:09.960> click<00:12:10.160> on<00:12:10.280> okay 00:12:10.590 --> 00:12:10.600 align:start position:0% is refundable. So, I'll click on okay 00:12:10.600 --> 00:12:14.270 align:start position:0% is refundable. So, I'll click on okay right<00:12:10.800> here. 00:12:14.270 --> 00:12:14.280 align:start position:0% 00:12:14.280 --> 00:12:15.710 align:start position:0% Now,<00:12:14.400> here<00:12:14.720> Firebase<00:12:15.240> will<00:12:15.360> give<00:12:15.520> you<00:12:15.600> an 00:12:15.710 --> 00:12:15.720 align:start position:0% Now, here Firebase will give you an 00:12:15.720 --> 00:12:17.790 align:start position:0% Now, here Firebase will give you an option<00:12:16.040> to<00:12:16.200> set<00:12:16.480> a<00:12:16.560> billing<00:12:16.960> budget.<00:12:17.640> I'd 00:12:17.790 --> 00:12:17.800 align:start position:0% option to set a billing budget. I'd 00:12:17.800 --> 00:12:19.790 align:start position:0% option to set a billing budget. I'd recommend<00:12:18.160> setting<00:12:18.400> this<00:12:18.560> to<00:12:18.680> something<00:12:19.160> low. 00:12:19.790 --> 00:12:19.800 align:start position:0% recommend setting this to something low. 00:12:19.800 --> 00:12:22.390 align:start position:0% recommend setting this to something low. Something<00:12:20.120> like<00:12:20.280> $5<00:12:20.920> will<00:12:21.040> work. 00:12:22.390 --> 00:12:22.400 align:start position:0% Something like $5 will work. 00:12:22.400 --> 00:12:24.190 align:start position:0% Something like $5 will work. That<00:12:22.560> way<00:12:22.680> if<00:12:22.800> your<00:12:22.920> usage<00:12:23.400> ever<00:12:23.640> gets<00:12:23.880> close 00:12:24.190 --> 00:12:24.200 align:start position:0% That way if your usage ever gets close 00:12:24.200 --> 00:12:25.990 align:start position:0% That way if your usage ever gets close to<00:12:24.320> that<00:12:24.480> amount,<00:12:25.000> Firebase<00:12:25.560> is<00:12:25.680> going<00:12:25.920> to 00:12:25.990 --> 00:12:26.000 align:start position:0% to that amount, Firebase is going to 00:12:26.000 --> 00:12:27.350 align:start position:0% to that amount, Firebase is going to send<00:12:26.240> you<00:12:26.320> an<00:12:26.440> email<00:12:26.880> so<00:12:27.000> there's<00:12:27.200> no 00:12:27.350 --> 00:12:27.360 align:start position:0% send you an email so there's no 00:12:27.360 --> 00:12:29.350 align:start position:0% send you an email so there's no surprises.<00:12:28.240> You<00:12:28.320> can<00:12:28.480> think<00:12:28.640> of<00:12:28.760> this<00:12:29.000> as<00:12:29.240> a 00:12:29.350 --> 00:12:29.360 align:start position:0% surprises. You can think of this as a 00:12:29.360 --> 00:12:31.230 align:start position:0% surprises. You can think of this as a safety<00:12:29.800> net.<00:12:30.240> Let's<00:12:30.400> go<00:12:30.560> down<00:12:30.800> and<00:12:30.880> click<00:12:31.080> on 00:12:31.230 --> 00:12:31.240 align:start position:0% safety net. Let's go down and click on 00:12:31.240 --> 00:12:33.310 align:start position:0% safety net. Let's go down and click on continue. 00:12:33.310 --> 00:12:33.320 align:start position:0% continue. 00:12:33.320 --> 00:12:35.270 align:start position:0% continue. And<00:12:33.440> we'll<00:12:33.560> scroll<00:12:33.880> down<00:12:34.080> right<00:12:34.240> here<00:12:35.000> and 00:12:35.270 --> 00:12:35.280 align:start position:0% And we'll scroll down right here and 00:12:35.280 --> 00:12:39.430 align:start position:0% And we'll scroll down right here and click<00:12:35.560> on<00:12:35.920> link<00:12:36.320> cloud<00:12:36.640> billing<00:12:36.880> account. 00:12:39.430 --> 00:12:39.440 align:start position:0% click on link cloud billing account. 00:12:39.440 --> 00:12:41.790 align:start position:0% click on link cloud billing account. And<00:12:39.600> here<00:12:39.880> I'll<00:12:40.000> scroll<00:12:40.320> down<00:12:41.000> and<00:12:41.320> click<00:12:41.560> on 00:12:41.790 --> 00:12:41.800 align:start position:0% And here I'll scroll down and click on 00:12:41.800 --> 00:12:43.790 align:start position:0% And here I'll scroll down and click on done. 00:12:43.790 --> 00:12:43.800 align:start position:0% done. 00:12:43.800 --> 00:12:45.150 align:start position:0% done. Then<00:12:43.960> once<00:12:44.160> everything<00:12:44.520> is<00:12:44.640> set<00:12:44.800> up,<00:12:45.040> it's 00:12:45.150 --> 00:12:45.160 align:start position:0% Then once everything is set up, it's 00:12:45.160 --> 00:12:46.790 align:start position:0% Then once everything is set up, it's going<00:12:45.280> to<00:12:45.360> ask<00:12:45.640> you<00:12:45.680> to<00:12:45.800> set<00:12:46.000> up<00:12:46.200> a<00:12:46.280> default 00:12:46.790 --> 00:12:46.800 align:start position:0% going to ask you to set up a default 00:12:46.800 --> 00:12:48.910 align:start position:0% going to ask you to set up a default bucket.<00:12:47.400> A<00:12:47.480> bucket<00:12:47.880> is<00:12:48.000> just<00:12:48.240> where<00:12:48.400> Firebase 00:12:48.910 --> 00:12:48.920 align:start position:0% bucket. A bucket is just where Firebase 00:12:48.920 --> 00:12:50.950 align:start position:0% bucket. A bucket is just where Firebase stores<00:12:49.360> all<00:12:49.520> of<00:12:49.600> your<00:12:49.760> uploaded<00:12:50.120> files.<00:12:50.760> Think 00:12:50.950 --> 00:12:50.960 align:start position:0% stores all of your uploaded files. Think 00:12:50.960 --> 00:12:52.670 align:start position:0% stores all of your uploaded files. Think of<00:12:51.040> it<00:12:51.160> as<00:12:51.280> a<00:12:51.360> folder<00:12:51.839> in<00:12:51.960> the<00:12:52.080> cloud<00:12:52.520> that 00:12:52.670 --> 00:12:52.680 align:start position:0% of it as a folder in the cloud that 00:12:52.680 --> 00:12:54.350 align:start position:0% of it as a folder in the cloud that holds<00:12:53.000> everything<00:12:53.400> your<00:12:53.560> users<00:12:53.920> upload<00:12:54.280> to 00:12:54.350 --> 00:12:54.360 align:start position:0% holds everything your users upload to 00:12:54.360 --> 00:12:56.070 align:start position:0% holds everything your users upload to your<00:12:54.520> app.<00:12:54.960> We're<00:12:55.040> going<00:12:55.160> to<00:12:55.240> choose<00:12:55.600> the<00:12:55.800> no 00:12:56.070 --> 00:12:56.080 align:start position:0% your app. We're going to choose the no 00:12:56.080 --> 00:12:58.590 align:start position:0% your app. We're going to choose the no cost<00:12:56.520> location<00:12:57.040> option<00:12:57.839> and<00:12:57.960> go<00:12:58.120> down<00:12:58.480> and 00:12:58.590 --> 00:12:58.600 align:start position:0% cost location option and go down and 00:12:58.600 --> 00:13:01.350 align:start position:0% cost location option and go down and click<00:12:58.839> on<00:12:59.040> continue. 00:13:01.350 --> 00:13:01.360 align:start position:0% click on continue. 00:13:01.360 --> 00:13:02.630 align:start position:0% click on continue. And<00:13:01.480> then<00:13:01.600> here<00:13:01.839> we<00:13:01.920> want<00:13:02.040> to<00:13:02.120> make<00:13:02.280> sure<00:13:02.480> that 00:13:02.630 --> 00:13:02.640 align:start position:0% And then here we want to make sure that 00:13:02.640 --> 00:13:04.550 align:start position:0% And then here we want to make sure that we<00:13:02.760> start<00:13:03.120> in<00:13:03.240> production<00:13:03.680> mode<00:13:04.280> and<00:13:04.360> then 00:13:04.550 --> 00:13:04.560 align:start position:0% we start in production mode and then 00:13:04.560 --> 00:13:08.750 align:start position:0% we start in production mode and then click<00:13:04.800> on<00:13:05.000> create. 00:13:08.750 --> 00:13:08.760 align:start position:0% 00:13:08.760 --> 00:13:10.630 align:start position:0% Okay,<00:13:09.000> so<00:13:09.200> now<00:13:09.400> we<00:13:09.520> just<00:13:09.760> set<00:13:09.920> up<00:13:10.080> our<00:13:10.240> storage 00:13:10.630 --> 00:13:10.640 align:start position:0% Okay, so now we just set up our storage 00:13:10.640 --> 00:13:12.550 align:start position:0% Okay, so now we just set up our storage bucket.<00:13:11.200> This<00:13:11.360> is<00:13:11.480> where<00:13:11.720> all<00:13:11.880> of<00:13:11.960> the<00:13:12.080> files 00:13:12.550 --> 00:13:12.560 align:start position:0% bucket. This is where all of the files 00:13:12.560 --> 00:13:14.270 align:start position:0% bucket. This is where all of the files that<00:13:12.680> your<00:13:12.839> users<00:13:13.240> upload<00:13:13.800> are<00:13:13.880> going<00:13:14.080> to<00:13:14.160> be 00:13:14.270 --> 00:13:14.280 align:start position:0% that your users upload are going to be 00:13:14.280 --> 00:13:16.150 align:start position:0% that your users upload are going to be stored.<00:13:15.080> And<00:13:15.200> if<00:13:15.280> you<00:13:15.360> click<00:13:15.600> on<00:13:15.680> the<00:13:15.800> rules 00:13:16.150 --> 00:13:16.160 align:start position:0% stored. And if you click on the rules 00:13:16.160 --> 00:13:18.829 align:start position:0% stored. And if you click on the rules tab<00:13:16.400> here<00:13:16.560> at<00:13:16.640> the<00:13:16.720> top, 00:13:18.829 --> 00:13:18.839 align:start position:0% tab here at the top, 00:13:18.839 --> 00:13:20.430 align:start position:0% tab here at the top, this<00:13:19.000> is<00:13:19.160> where<00:13:19.360> the<00:13:19.520> security<00:13:20.000> rules<00:13:20.360> for 00:13:20.430 --> 00:13:20.440 align:start position:0% this is where the security rules for 00:13:20.440 --> 00:13:22.390 align:start position:0% this is where the security rules for your<00:13:20.600> file<00:13:20.880> storage<00:13:21.240> live.<00:13:21.800> We'll<00:13:21.960> come<00:13:22.120> back 00:13:22.390 --> 00:13:22.400 align:start position:0% your file storage live. We'll come back 00:13:22.400 --> 00:13:24.190 align:start position:0% your file storage live. We'll come back here<00:13:22.680> a<00:13:22.720> little<00:13:22.920> bit<00:13:23.080> later<00:13:23.320> on<00:13:23.440> in<00:13:23.480> the<00:13:23.560> video 00:13:24.190 --> 00:13:24.200 align:start position:0% here a little bit later on in the video 00:13:24.200 --> 00:13:25.910 align:start position:0% here a little bit later on in the video and<00:13:24.360> update<00:13:24.720> these<00:13:25.080> once<00:13:25.280> we<00:13:25.360> have<00:13:25.480> a<00:13:25.520> few<00:13:25.720> more 00:13:25.910 --> 00:13:25.920 align:start position:0% and update these once we have a few more 00:13:25.920 --> 00:13:28.070 align:start position:0% and update these once we have a few more things<00:13:26.200> set<00:13:26.400> up.<00:13:26.880> So,<00:13:27.120> to<00:13:27.240> recap<00:13:27.680> everything 00:13:28.070 --> 00:13:28.080 align:start position:0% things set up. So, to recap everything 00:13:28.080 --> 00:13:30.110 align:start position:0% things set up. So, to recap everything that<00:13:28.200> we<00:13:28.320> just<00:13:28.680> did<00:13:28.880> before<00:13:29.160> we<00:13:29.240> move<00:13:29.520> on,<00:13:30.000> we 00:13:30.110 --> 00:13:30.120 align:start position:0% that we just did before we move on, we 00:13:30.120 --> 00:13:32.030 align:start position:0% that we just did before we move on, we successfully<00:13:30.680> set<00:13:30.840> up<00:13:30.960> our<00:13:31.080> storage<00:13:31.440> bucket, 00:13:32.030 --> 00:13:32.040 align:start position:0% successfully set up our storage bucket, 00:13:32.040 --> 00:13:33.790 align:start position:0% successfully set up our storage bucket, and<00:13:32.280> earlier<00:13:32.720> we<00:13:32.880> enabled<00:13:33.320> email<00:13:33.680> and 00:13:33.790 --> 00:13:33.800 align:start position:0% and earlier we enabled email and 00:13:33.800 --> 00:13:35.630 align:start position:0% and earlier we enabled email and password<00:13:34.320> authentication.<00:13:35.120> There<00:13:35.320> are<00:13:35.440> some 00:13:35.630 --> 00:13:35.640 align:start position:0% password authentication. There are some 00:13:35.640 --> 00:13:37.390 align:start position:0% password authentication. There are some other<00:13:35.880> things<00:13:36.240> in<00:13:36.320> the<00:13:36.400> Firebase<00:13:36.840> console 00:13:37.390 --> 00:13:37.400 align:start position:0% other things in the Firebase console 00:13:37.400 --> 00:13:38.830 align:start position:0% other things in the Firebase console that<00:13:37.560> we<00:13:37.640> need<00:13:37.760> to<00:13:37.840> come<00:13:38.040> back<00:13:38.280> to<00:13:38.560> a<00:13:38.640> little 00:13:38.830 --> 00:13:38.840 align:start position:0% that we need to come back to a little 00:13:38.840 --> 00:13:40.630 align:start position:0% that we need to come back to a little bit<00:13:39.000> later<00:13:39.240> on<00:13:39.360> in<00:13:39.400> the<00:13:39.480> video,<00:13:40.040> but<00:13:40.200> for<00:13:40.320> now, 00:13:40.630 --> 00:13:40.640 align:start position:0% bit later on in the video, but for now, 00:13:40.640 --> 00:13:42.270 align:start position:0% bit later on in the video, but for now, these<00:13:40.880> are<00:13:40.920> the<00:13:41.080> two<00:13:41.360> things<00:13:41.720> that<00:13:41.840> we<00:13:41.960> had<00:13:42.200> to 00:13:42.270 --> 00:13:42.280 align:start position:0% these are the two things that we had to 00:13:42.280 --> 00:13:44.070 align:start position:0% these are the two things that we had to get<00:13:42.480> done<00:13:42.720> here<00:13:43.160> before<00:13:43.400> we<00:13:43.520> can<00:13:43.640> test<00:13:43.920> our 00:13:44.070 --> 00:13:44.080 align:start position:0% get done here before we can test our 00:13:44.080 --> 00:13:45.710 align:start position:0% get done here before we can test our app.<00:13:44.680> Now,<00:13:44.840> let's<00:13:45.000> go<00:13:45.120> ahead<00:13:45.280> and<00:13:45.360> head<00:13:45.480> back 00:13:45.710 --> 00:13:45.720 align:start position:0% app. Now, let's go ahead and head back 00:13:45.720 --> 00:13:47.750 align:start position:0% app. Now, let's go ahead and head back over<00:13:46.000> to<00:13:46.120> AI<00:13:46.360> Studio<00:13:47.120> and<00:13:47.240> let<00:13:47.360> it<00:13:47.480> know<00:13:47.640> what 00:13:47.750 --> 00:13:47.760 align:start position:0% over to AI Studio and let it know what 00:13:47.760 --> 00:13:49.470 align:start position:0% over to AI Studio and let it know what we<00:13:47.880> just<00:13:48.120> configured<00:13:48.640> here<00:13:48.880> in<00:13:48.960> the<00:13:49.040> Firebase 00:13:49.470 --> 00:13:49.480 align:start position:0% we just configured here in the Firebase 00:13:49.480 --> 00:13:51.110 align:start position:0% we just configured here in the Firebase console.<00:13:50.200> That<00:13:50.400> way<00:13:50.520> you<00:13:50.600> can<00:13:50.720> make<00:13:50.880> sure 00:13:51.110 --> 00:13:51.120 align:start position:0% console. That way you can make sure 00:13:51.120 --> 00:13:52.790 align:start position:0% console. That way you can make sure everything<00:13:51.560> in<00:13:51.680> our<00:13:51.840> app<00:13:52.160> is<00:13:52.360> properly 00:13:52.790 --> 00:13:52.800 align:start position:0% everything in our app is properly 00:13:52.800 --> 00:13:54.310 align:start position:0% everything in our app is properly connected<00:13:53.240> to<00:13:53.320> the<00:13:53.400> changes<00:13:53.840> that<00:13:53.960> we<00:13:54.040> just 00:13:54.310 --> 00:13:54.320 align:start position:0% connected to the changes that we just 00:13:54.320 --> 00:13:55.870 align:start position:0% connected to the changes that we just made.<00:13:54.960> So,<00:13:55.120> I'll<00:13:55.240> go<00:13:55.320> ahead<00:13:55.480> and<00:13:55.560> head<00:13:55.680> back 00:13:55.870 --> 00:13:55.880 align:start position:0% made. So, I'll go ahead and head back 00:13:55.880 --> 00:13:58.510 align:start position:0% made. So, I'll go ahead and head back over<00:13:56.120> to<00:13:56.240> AI<00:13:56.440> Studio<00:13:56.760> here. 00:13:58.510 --> 00:13:58.520 align:start position:0% over to AI Studio here. 00:13:58.520 --> 00:14:01.110 align:start position:0% over to AI Studio here. And<00:13:58.720> I'll<00:13:58.800> go<00:13:58.880> ahead<00:13:59.080> and<00:13:59.160> enter<00:13:59.480> this<00:13:59.680> prompt. 00:14:01.110 --> 00:14:01.120 align:start position:0% And I'll go ahead and enter this prompt. 00:14:01.120 --> 00:14:02.830 align:start position:0% And I'll go ahead and enter this prompt. It<00:14:01.280> says,<00:14:01.680> "Here's<00:14:02.000> what<00:14:02.120> I've<00:14:02.240> configured<00:14:02.760> in 00:14:02.830 --> 00:14:02.840 align:start position:0% It says, "Here's what I've configured in 00:14:02.840 --> 00:14:04.950 align:start position:0% It says, "Here's what I've configured in the<00:14:02.960> Firebase<00:14:03.400> console.<00:14:04.200> The<00:14:04.280> first<00:14:04.560> thing<00:14:04.800> is 00:14:04.950 --> 00:14:04.960 align:start position:0% the Firebase console. The first thing is 00:14:04.960 --> 00:14:06.630 align:start position:0% the Firebase console. The first thing is that<00:14:05.240> I<00:14:05.320> enabled<00:14:05.800> email<00:14:06.120> and<00:14:06.240> password 00:14:06.630 --> 00:14:06.640 align:start position:0% that I enabled email and password 00:14:06.640 --> 00:14:08.750 align:start position:0% that I enabled email and password authentication<00:14:07.320> as<00:14:07.480> a<00:14:07.520> sign-in<00:14:07.880> provider, 00:14:08.750 --> 00:14:08.760 align:start position:0% authentication as a sign-in provider, 00:14:08.760 --> 00:14:10.830 align:start position:0% authentication as a sign-in provider, and<00:14:08.880> second,<00:14:09.280> I<00:14:09.400> set<00:14:09.560> up<00:14:09.760> a<00:14:09.840> Firebase<00:14:10.360> storage 00:14:10.830 --> 00:14:10.840 align:start position:0% and second, I set up a Firebase storage 00:14:10.840 --> 00:14:12.270 align:start position:0% and second, I set up a Firebase storage with<00:14:10.960> a<00:14:11.040> default<00:14:11.440> bucket<00:14:11.800> in<00:14:11.880> production 00:14:12.270 --> 00:14:12.280 align:start position:0% with a default bucket in production 00:14:12.280 --> 00:14:14.430 align:start position:0% with a default bucket in production mode."<00:14:12.880> At<00:14:13.000> the<00:14:13.080> bottom<00:14:13.360> here,<00:14:13.640> I<00:14:13.760> say, 00:14:14.430 --> 00:14:14.440 align:start position:0% mode." At the bottom here, I say, 00:14:14.440 --> 00:14:16.070 align:start position:0% mode." At the bottom here, I say, "Please<00:14:14.720> make<00:14:14.880> sure<00:14:15.040> the<00:14:15.200> app's<00:14:15.520> file<00:14:15.800> upload 00:14:16.070 --> 00:14:16.080 align:start position:0% "Please make sure the app's file upload 00:14:16.080 --> 00:14:17.710 align:start position:0% "Please make sure the app's file upload feature<00:14:16.400> is<00:14:16.600> fully<00:14:16.800> connected<00:14:17.200> to<00:14:17.240> Firebase 00:14:17.710 --> 00:14:17.720 align:start position:0% feature is fully connected to Firebase 00:14:17.720 --> 00:14:19.750 align:start position:0% feature is fully connected to Firebase storage,<00:14:18.440> and<00:14:18.680> that<00:14:18.840> the<00:14:18.960> email<00:14:19.280> password 00:14:19.750 --> 00:14:19.760 align:start position:0% storage, and that the email password 00:14:19.760 --> 00:14:21.670 align:start position:0% storage, and that the email password authentication<00:14:20.360> flow<00:14:20.760> is<00:14:20.920> working<00:14:21.200> correctly 00:14:21.670 --> 00:14:21.680 align:start position:0% authentication flow is working correctly 00:14:21.680 --> 00:14:23.670 align:start position:0% authentication flow is working correctly for<00:14:21.800> both<00:14:22.040> sign-up<00:14:22.480> and<00:14:22.640> sign-in."<00:14:23.240> So,<00:14:23.440> here 00:14:23.670 --> 00:14:23.680 align:start position:0% for both sign-up and sign-in." So, here 00:14:23.680 --> 00:14:25.630 align:start position:0% for both sign-up and sign-in." So, here what<00:14:23.800> we're<00:14:23.960> doing<00:14:24.440> is<00:14:24.600> giving<00:14:24.920> AI<00:14:25.160> Studio<00:14:25.520> the 00:14:25.630 --> 00:14:25.640 align:start position:0% what we're doing is giving AI Studio the 00:14:25.640 --> 00:14:28.150 align:start position:0% what we're doing is giving AI Studio the context<00:14:26.320> of<00:14:26.440> exactly<00:14:27.000> what's<00:14:27.320> changed<00:14:27.880> within 00:14:28.150 --> 00:14:28.160 align:start position:0% context of exactly what's changed within 00:14:28.160 --> 00:14:30.150 align:start position:0% context of exactly what's changed within Firebase<00:14:28.840> on<00:14:29.000> the<00:14:29.080> back<00:14:29.400> end.<00:14:29.880> And<00:14:29.960> I<00:14:30.000> would 00:14:30.150 --> 00:14:30.160 align:start position:0% Firebase on the back end. And I would 00:14:30.160 --> 00:14:32.030 align:start position:0% Firebase on the back end. And I would highly<00:14:30.400> recommend<00:14:30.839> doing<00:14:31.080> this<00:14:31.320> anytime<00:14:31.920> you 00:14:32.030 --> 00:14:32.040 align:start position:0% highly recommend doing this anytime you 00:14:32.040 --> 00:14:33.990 align:start position:0% highly recommend doing this anytime you change<00:14:32.400> anything<00:14:32.920> within<00:14:33.160> the<00:14:33.280> back<00:14:33.640> end<00:14:33.880> of 00:14:33.990 --> 00:14:34.000 align:start position:0% change anything within the back end of 00:14:34.000 --> 00:14:35.910 align:start position:0% change anything within the back end of your<00:14:34.160> app<00:14:34.480> using<00:14:34.760> Firebase.<00:14:35.560> You<00:14:35.680> just<00:14:35.800> want 00:14:35.910 --> 00:14:35.920 align:start position:0% your app using Firebase. You just want 00:14:35.920 --> 00:14:37.950 align:start position:0% your app using Firebase. You just want to<00:14:36.000> give<00:14:36.280> AI<00:14:36.480> Studio<00:14:36.839> the<00:14:36.960> context<00:14:37.600> of<00:14:37.720> what's 00:14:37.950 --> 00:14:37.960 align:start position:0% to give AI Studio the context of what's 00:14:37.960 --> 00:14:39.550 align:start position:0% to give AI Studio the context of what's changed.<00:14:38.600> That<00:14:38.760> way<00:14:38.880> it's<00:14:39.040> able<00:14:39.240> to<00:14:39.360> work 00:14:39.550 --> 00:14:39.560 align:start position:0% changed. That way it's able to work 00:14:39.560 --> 00:14:41.230 align:start position:0% changed. That way it's able to work through<00:14:39.720> the<00:14:39.839> code<00:14:40.160> for<00:14:40.440> you<00:14:40.800> and<00:14:40.880> make<00:14:41.040> sure 00:14:41.230 --> 00:14:41.240 align:start position:0% through the code for you and make sure 00:14:41.240 --> 00:14:43.150 align:start position:0% through the code for you and make sure everything<00:14:41.600> is<00:14:41.720> working<00:14:42.040> properly.<00:14:43.040> So, 00:14:43.150 --> 00:14:43.160 align:start position:0% everything is working properly. So, 00:14:43.160 --> 00:14:44.230 align:start position:0% everything is working properly. So, let's<00:14:43.320> go<00:14:43.400> ahead<00:14:43.560> and<00:14:43.640> send<00:14:43.800> this<00:14:43.920> prompt 00:14:44.230 --> 00:14:44.240 align:start position:0% let's go ahead and send this prompt 00:14:44.240 --> 00:14:46.550 align:start position:0% let's go ahead and send this prompt here. 00:14:46.550 --> 00:14:46.560 align:start position:0% 00:14:46.560 --> 00:14:47.790 align:start position:0% And<00:14:46.680> let's<00:14:46.839> wait<00:14:47.000> for<00:14:47.120> a<00:14:47.160> few<00:14:47.360> moments<00:14:47.680> and 00:14:47.790 --> 00:14:47.800 align:start position:0% And let's wait for a few moments and 00:14:47.800 --> 00:14:48.990 align:start position:0% And let's wait for a few moments and make<00:14:47.920> sure<00:14:48.120> everything<00:14:48.520> is<00:14:48.640> updated 00:14:48.990 --> 00:14:49.000 align:start position:0% make sure everything is updated 00:14:49.000 --> 00:14:51.630 align:start position:0% make sure everything is updated properly. 00:14:51.630 --> 00:14:51.640 align:start position:0% 00:14:51.640 --> 00:14:53.270 align:start position:0% Awesome.<00:14:52.040> Now,<00:14:52.200> as<00:14:52.280> you<00:14:52.360> can<00:14:52.480> see<00:14:52.640> right<00:14:52.839> here, 00:14:53.270 --> 00:14:53.280 align:start position:0% Awesome. Now, as you can see right here, 00:14:53.280 --> 00:14:54.910 align:start position:0% Awesome. Now, as you can see right here, it<00:14:53.360> appears<00:14:53.760> that<00:14:53.920> everything<00:14:54.440> is<00:14:54.640> good<00:14:54.839> to 00:14:54.910 --> 00:14:54.920 align:start position:0% it appears that everything is good to 00:14:54.920 --> 00:14:55.710 align:start position:0% it appears that everything is good to go. 00:14:55.710 --> 00:14:55.720 align:start position:0% go. 00:14:55.720 --> 00:14:57.070 align:start position:0% go. All<00:14:55.839> right.<00:14:56.040> So,<00:14:56.120> the<00:14:56.200> next<00:14:56.440> step<00:14:56.680> is<00:14:56.839> for<00:14:56.960> us 00:14:57.070 --> 00:14:57.080 align:start position:0% All right. So, the next step is for us 00:14:57.080 --> 00:14:59.110 align:start position:0% All right. So, the next step is for us to<00:14:57.200> jump<00:14:57.560> in<00:14:57.760> and<00:14:57.920> start<00:14:58.200> testing<00:14:58.600> out<00:14:58.760> our<00:14:58.880> web 00:14:59.110 --> 00:14:59.120 align:start position:0% to jump in and start testing out our web 00:14:59.120 --> 00:15:01.070 align:start position:0% to jump in and start testing out our web app.<00:14:59.560> But<00:14:59.760> first,<00:15:00.200> here's<00:15:00.480> where<00:15:00.600> we<00:15:00.760> are<00:15:00.880> so 00:15:01.070 --> 00:15:01.080 align:start position:0% app. But first, here's where we are so 00:15:01.080 --> 00:15:03.430 align:start position:0% app. But first, here's where we are so far.<00:15:01.680> We<00:15:01.839> now<00:15:02.080> have<00:15:02.200> a<00:15:02.280> front<00:15:02.600> end<00:15:02.720> built.<00:15:03.240> AI 00:15:03.430 --> 00:15:03.440 align:start position:0% far. We now have a front end built. AI 00:15:03.440 --> 00:15:05.630 align:start position:0% far. We now have a front end built. AI Studio<00:15:03.880> built<00:15:04.120> it<00:15:04.240> all<00:15:04.360> for<00:15:04.600> us.<00:15:05.040> That's<00:15:05.440> our 00:15:05.630 --> 00:15:05.640 align:start position:0% Studio built it all for us. That's our 00:15:05.640 --> 00:15:08.190 align:start position:0% Studio built it all for us. That's our app's<00:15:05.920> interface,<00:15:06.680> the<00:15:06.800> pages,<00:15:07.440> the<00:15:07.560> buttons, 00:15:08.190 --> 00:15:08.200 align:start position:0% app's interface, the pages, the buttons, 00:15:08.200 --> 00:15:10.310 align:start position:0% app's interface, the pages, the buttons, the<00:15:08.320> layout,<00:15:09.080> everything<00:15:09.440> the<00:15:09.520> user<00:15:09.800> sees<00:15:10.200> and 00:15:10.310 --> 00:15:10.320 align:start position:0% the layout, everything the user sees and 00:15:10.320 --> 00:15:11.760 align:start position:0% the layout, everything the user sees and interacts<00:15:10.720> with.<00:15:11.200> That's<00:15:11.440> done. 00:15:11.760 --> 00:15:11.770 align:start position:0% interacts with. That's done. 00:15:11.770 --> 00:15:11.950 align:start position:0% interacts with. That's done. >> [music] 00:15:11.950 --> 00:15:11.960 align:start position:0% >> [music] 00:15:11.960 --> 00:15:14.070 align:start position:0% >> [music] >> We<00:15:12.160> also<00:15:12.440> have<00:15:12.800> a<00:15:12.880> database<00:15:13.480> set<00:15:13.680> up<00:15:13.800> for<00:15:13.960> our 00:15:14.070 --> 00:15:14.080 align:start position:0% >> We also have a database set up for our 00:15:14.080 --> 00:15:15.870 align:start position:0% >> We also have a database set up for our back<00:15:14.360> end.<00:15:14.800> That<00:15:15.040> was<00:15:15.160> created<00:15:15.560> for<00:15:15.720> us 00:15:15.870 --> 00:15:15.880 align:start position:0% back end. That was created for us 00:15:15.880 --> 00:15:17.750 align:start position:0% back end. That was created for us automatically<00:15:16.720> when<00:15:16.880> we<00:15:17.000> clicked<00:15:17.400> enable 00:15:17.750 --> 00:15:17.760 align:start position:0% automatically when we clicked enable 00:15:17.760 --> 00:15:19.910 align:start position:0% automatically when we clicked enable Firebase<00:15:18.400> during<00:15:18.680> the<00:15:18.760> build.<00:15:19.360> The<00:15:19.440> database 00:15:19.910 --> 00:15:19.920 align:start position:0% Firebase during the build. The database 00:15:19.920 --> 00:15:21.950 align:start position:0% Firebase during the build. The database is<00:15:20.080> what<00:15:20.240> stores<00:15:20.640> all<00:15:20.760> of<00:15:20.839> your<00:15:21.040> app's<00:15:21.280> data, 00:15:21.950 --> 00:15:21.960 align:start position:0% is what stores all of your app's data, 00:15:21.960 --> 00:15:24.270 align:start position:0% is what stores all of your app's data, user<00:15:22.240> information,<00:15:23.040> file<00:15:23.360> details,<00:15:24.120> and 00:15:24.270 --> 00:15:24.280 align:start position:0% user information, file details, and 00:15:24.280 --> 00:15:25.550 align:start position:0% user information, file details, and anything<00:15:24.600> else<00:15:24.840> your<00:15:25.000> app<00:15:25.200> needs<00:15:25.480> to 00:15:25.550 --> 00:15:25.560 align:start position:0% anything else your app needs to 00:15:25.560 --> 00:15:27.630 align:start position:0% anything else your app needs to remember.<00:15:26.280> We<00:15:26.400> have<00:15:26.640> email<00:15:27.000> and<00:15:27.160> password 00:15:27.630 --> 00:15:27.640 align:start position:0% remember. We have email and password 00:15:27.640 --> 00:15:29.470 align:start position:0% remember. We have email and password authentication<00:15:28.200> enabled,<00:15:28.800> so<00:15:28.960> users<00:15:29.320> can 00:15:29.470 --> 00:15:29.480 align:start position:0% authentication enabled, so users can 00:15:29.480 --> 00:15:31.870 align:start position:0% authentication enabled, so users can create<00:15:29.720> accounts,<00:15:30.360> log<00:15:30.680> in,<00:15:30.920> and<00:15:31.080> log<00:15:31.360> out, 00:15:31.870 --> 00:15:31.880 align:start position:0% create accounts, log in, and log out, 00:15:31.880 --> 00:15:33.790 align:start position:0% create accounts, log in, and log out, and<00:15:32.160> we<00:15:32.280> have<00:15:32.480> storage<00:15:32.840> configured,<00:15:33.520> which<00:15:33.680> is 00:15:33.790 --> 00:15:33.800 align:start position:0% and we have storage configured, which is 00:15:33.800 --> 00:15:35.830 align:start position:0% and we have storage configured, which is where<00:15:34.040> all<00:15:34.240> of<00:15:34.320> the<00:15:34.440> actual<00:15:34.800> files<00:15:35.320> that<00:15:35.480> users 00:15:35.830 --> 00:15:35.840 align:start position:0% where all of the actual files that users 00:15:35.840 --> 00:15:37.990 align:start position:0% where all of the actual files that users upload<00:15:36.280> are<00:15:36.400> going<00:15:36.640> to<00:15:36.760> live.<00:15:37.360> And<00:15:37.480> because<00:15:37.840> we 00:15:37.990 --> 00:15:38.000 align:start position:0% upload are going to live. And because we 00:15:38.000 --> 00:15:39.910 align:start position:0% upload are going to live. And because we have<00:15:38.240> that<00:15:38.400> database<00:15:38.880> in<00:15:39.040> place,<00:15:39.680> all<00:15:39.840> of 00:15:39.910 --> 00:15:39.920 align:start position:0% have that database in place, all of 00:15:39.920 --> 00:15:41.910 align:start position:0% have that database in place, all of this,<00:15:40.400> every<00:15:40.640> account<00:15:40.960> that<00:15:41.040> gets<00:15:41.200> created, 00:15:41.910 --> 00:15:41.920 align:start position:0% this, every account that gets created, 00:15:41.920 --> 00:15:43.750 align:start position:0% this, every account that gets created, every<00:15:42.160> file<00:15:42.440> that<00:15:42.560> gets<00:15:42.720> uploaded,<00:15:43.480> every 00:15:43.750 --> 00:15:43.760 align:start position:0% every file that gets uploaded, every 00:15:43.760 --> 00:15:45.830 align:start position:0% every file that gets uploaded, every piece<00:15:44.120> of<00:15:44.240> data<00:15:44.480> your<00:15:44.640> app<00:15:44.800> collects,<00:15:45.600> all<00:15:45.760> of 00:15:45.830 --> 00:15:45.840 align:start position:0% piece of data your app collects, all of 00:15:45.840 --> 00:15:47.510 align:start position:0% piece of data your app collects, all of that<00:15:46.040> is<00:15:46.120> going<00:15:46.320> to<00:15:46.360> be<00:15:46.480> stored<00:15:46.960> and<00:15:47.080> exist 00:15:47.510 --> 00:15:47.520 align:start position:0% that is going to be stored and exist 00:15:47.520 --> 00:15:49.430 align:start position:0% that is going to be stored and exist permanently.<00:15:48.480> Now,<00:15:48.640> in<00:15:48.720> the<00:15:48.840> intro,<00:15:49.360> I 00:15:49.430 --> 00:15:49.440 align:start position:0% permanently. Now, in the intro, I 00:15:49.440 --> 00:15:51.310 align:start position:0% permanently. Now, in the intro, I mentioned<00:15:49.960> the<00:15:50.040> four<00:15:50.280> pillars<00:15:50.760> of<00:15:50.880> setting<00:15:51.160> up 00:15:51.310 --> 00:15:51.320 align:start position:0% mentioned the four pillars of setting up 00:15:51.320 --> 00:15:53.590 align:start position:0% mentioned the four pillars of setting up a<00:15:51.400> real<00:15:51.640> back<00:15:51.960> end<00:15:52.160> for<00:15:52.360> any<00:15:52.560> web<00:15:52.800> app.<00:15:53.320> Here's 00:15:53.590 --> 00:15:53.600 align:start position:0% a real back end for any web app. Here's 00:15:53.600 --> 00:15:54.990 align:start position:0% a real back end for any web app. Here's where<00:15:53.680> we<00:15:53.800> currently<00:15:54.200> are.<00:15:54.800> The<00:15:54.920> first 00:15:54.990 --> 00:15:55.000 align:start position:0% where we currently are. The first 00:15:55.000 --> 00:15:56.830 align:start position:0% where we currently are. The first [music]<00:15:55.280> three<00:15:55.480> pillars,<00:15:56.120> which<00:15:56.320> are<00:15:56.520> user 00:15:56.830 --> 00:15:56.840 align:start position:0% [music] three pillars, which are user 00:15:56.840 --> 00:15:58.950 align:start position:0% [music] three pillars, which are user authentication,<00:15:57.760> a<00:15:57.840> database,<00:15:58.600> and<00:15:58.760> file 00:15:58.950 --> 00:15:58.960 align:start position:0% authentication, a database, and file 00:15:58.960 --> 00:16:01.150 align:start position:0% authentication, a database, and file storage,<00:15:59.680> are<00:15:59.800> now<00:16:00.040> set<00:16:00.240> up.<00:16:00.760> We've<00:16:00.960> now 00:16:01.150 --> 00:16:01.160 align:start position:0% storage, are now set up. We've now 00:16:01.160 --> 00:16:02.870 align:start position:0% storage, are now set up. We've now arrived<00:16:01.600> at<00:16:01.680> the<00:16:01.760> last<00:16:02.080> pillar,<00:16:02.600> which<00:16:02.760> is 00:16:02.870 --> 00:16:02.880 align:start position:0% arrived at the last pillar, which is 00:16:02.880 --> 00:16:04.870 align:start position:0% arrived at the last pillar, which is connecting<00:16:03.320> everything<00:16:03.800> to<00:16:03.920> the<00:16:04.040> UI.<00:16:04.760> And 00:16:04.870 --> 00:16:04.880 align:start position:0% connecting everything to the UI. And 00:16:04.880 --> 00:16:06.190 align:start position:0% connecting everything to the UI. And this<00:16:05.080> one<00:16:05.320> is<00:16:05.440> a<00:16:05.480> little<00:16:05.680> different<00:16:06.000> from<00:16:06.120> the 00:16:06.190 --> 00:16:06.200 align:start position:0% this one is a little different from the 00:16:06.200 --> 00:16:07.990 align:start position:0% this one is a little different from the first<00:16:06.520> three,<00:16:07.040> because<00:16:07.280> it's<00:16:07.400> not<00:16:07.600> something 00:16:07.990 --> 00:16:08.000 align:start position:0% first three, because it's not something 00:16:08.000 --> 00:16:10.230 align:start position:0% first three, because it's not something that<00:16:08.080> you<00:16:08.160> just<00:16:08.400> toggle<00:16:08.800> on<00:16:09.120> and<00:16:09.240> it<00:16:09.360> works.<00:16:10.080> It 00:16:10.230 --> 00:16:10.240 align:start position:0% that you just toggle on and it works. It 00:16:10.240 --> 00:16:11.750 align:start position:0% that you just toggle on and it works. It changes<00:16:10.760> depending<00:16:11.280> on<00:16:11.440> what<00:16:11.600> you're 00:16:11.750 --> 00:16:11.760 align:start position:0% changes depending on what you're 00:16:11.760 --> 00:16:14.070 align:start position:0% changes depending on what you're building.<00:16:12.520> Every<00:16:12.920> app<00:16:13.200> is<00:16:13.360> different,<00:16:14.000> and 00:16:14.070 --> 00:16:14.080 align:start position:0% building. Every app is different, and 00:16:14.080 --> 00:16:15.590 align:start position:0% building. Every app is different, and the<00:16:14.200> things<00:16:14.480> that<00:16:14.560> need<00:16:14.680> to<00:16:14.760> be<00:16:14.880> connected<00:16:15.480> and 00:16:15.590 --> 00:16:15.600 align:start position:0% the things that need to be connected and 00:16:15.600 --> 00:16:17.350 align:start position:0% the things that need to be connected and the<00:16:15.680> problems<00:16:16.080> you<00:16:16.160> might<00:16:16.360> run<00:16:16.520> into<00:16:17.160> will 00:16:17.350 --> 00:16:17.360 align:start position:0% the problems you might run into will 00:16:17.360 --> 00:16:19.670 align:start position:0% the problems you might run into will vary<00:16:17.720> depending<00:16:18.200> on<00:16:18.360> your<00:16:18.600> project.<00:16:19.560> But, 00:16:19.670 --> 00:16:19.680 align:start position:0% vary depending on your project. But, 00:16:19.680 --> 00:16:21.670 align:start position:0% vary depending on your project. But, here's<00:16:20.000> the<00:16:20.120> general<00:16:20.640> idea<00:16:21.120> for<00:16:21.320> how<00:16:21.440> this 00:16:21.670 --> 00:16:21.680 align:start position:0% here's the general idea for how this 00:16:21.680 --> 00:16:23.950 align:start position:0% here's the general idea for how this works<00:16:22.120> with<00:16:22.360> any<00:16:22.560> project.<00:16:23.400> We<00:16:23.520> need<00:16:23.680> to<00:16:23.800> go 00:16:23.950 --> 00:16:23.960 align:start position:0% works with any project. We need to go 00:16:23.960 --> 00:16:26.430 align:start position:0% works with any project. We need to go into<00:16:24.160> the<00:16:24.280> app,<00:16:24.920> test<00:16:25.280> every<00:16:25.560> feature,<00:16:26.320> and 00:16:26.430 --> 00:16:26.440 align:start position:0% into the app, test every feature, and 00:16:26.440 --> 00:16:28.230 align:start position:0% into the app, test every feature, and take<00:16:26.640> note<00:16:26.960> of<00:16:27.120> anything<00:16:27.480> that<00:16:27.680> isn't<00:16:27.960> working 00:16:28.230 --> 00:16:28.240 align:start position:0% take note of anything that isn't working 00:16:28.240 --> 00:16:29.950 align:start position:0% take note of anything that isn't working the<00:16:28.320> way<00:16:28.440> it<00:16:28.560> should.<00:16:29.080> In<00:16:29.200> your<00:16:29.320> case,<00:16:29.680> maybe 00:16:29.950 --> 00:16:29.960 align:start position:0% the way it should. In your case, maybe 00:16:29.960 --> 00:16:31.671 align:start position:0% the way it should. In your case, maybe sign<00:16:30.320> in<00:16:30.440> doesn't<00:16:30.720> work.<00:16:31.200> You<00:16:31.320> can<00:16:31.440> note<00:16:31.600> that 00:16:31.671 --> 00:16:31.681 align:start position:0% sign in doesn't work. You can note that 00:16:31.681 --> 00:16:33.590 align:start position:0% sign in doesn't work. You can note that [music]<00:16:31.800> down.<00:16:32.320> Maybe<00:16:32.640> a<00:16:32.760> button<00:16:33.120> isn't<00:16:33.400> doing 00:16:33.590 --> 00:16:33.600 align:start position:0% [music] down. Maybe a button isn't doing 00:16:33.600 --> 00:16:35.070 align:start position:0% [music] down. Maybe a button isn't doing what<00:16:33.720> it's<00:16:33.800> supposed<00:16:34.160> to<00:16:34.240> do.<00:16:34.680> You<00:16:34.760> can<00:16:34.920> add 00:16:35.070 --> 00:16:35.080 align:start position:0% what it's supposed to do. You can add 00:16:35.080 --> 00:16:37.070 align:start position:0% what it's supposed to do. You can add that<00:16:35.240> to<00:16:35.320> your<00:16:35.440> list.<00:16:36.240> Maybe<00:16:36.520> files<00:16:36.880> aren't 00:16:37.070 --> 00:16:37.080 align:start position:0% that to your list. Maybe files aren't 00:16:37.080 --> 00:16:38.876 align:start position:0% that to your list. Maybe files aren't uploading<00:16:37.640> or<00:16:37.839> data<00:16:38.120> isn't<00:16:38.400> saving. 00:16:38.876 --> 00:16:38.886 align:start position:0% uploading or data isn't saving. 00:16:38.886 --> 00:16:39.030 align:start position:0% uploading or data isn't saving. >> [music] 00:16:39.030 --> 00:16:39.040 align:start position:0% >> [music] 00:16:39.040 --> 00:16:40.630 align:start position:0% >> [music] >> Whatever<00:16:39.360> it<00:16:39.480> is,<00:16:39.800> just<00:16:40.000> make<00:16:40.160> a<00:16:40.200> note<00:16:40.440> of<00:16:40.520> it 00:16:40.630 --> 00:16:40.640 align:start position:0% >> Whatever it is, just make a note of it 00:16:40.640 --> 00:16:42.070 align:start position:0% >> Whatever it is, just make a note of it as<00:16:40.760> you<00:16:40.880> go.<00:16:41.320> Then,<00:16:41.520> once<00:16:41.680> you've<00:16:41.839> gone 00:16:42.070 --> 00:16:42.080 align:start position:0% as you go. Then, once you've gone 00:16:42.080 --> 00:16:44.030 align:start position:0% as you go. Then, once you've gone through<00:16:42.400> and<00:16:42.560> tested<00:16:42.960> everything,<00:16:43.760> you<00:16:43.880> go 00:16:44.030 --> 00:16:44.040 align:start position:0% through and tested everything, you go 00:16:44.040 --> 00:16:45.910 align:start position:0% through and tested everything, you go back<00:16:44.280> to<00:16:44.400> AI<00:16:44.600> Studio<00:16:45.280> and<00:16:45.440> work<00:16:45.640> through<00:16:45.760> your 00:16:45.910 --> 00:16:45.920 align:start position:0% back to AI Studio and work through your 00:16:45.920 --> 00:16:47.990 align:start position:0% back to AI Studio and work through your list<00:16:46.360> one<00:16:46.600> issue<00:16:46.960> at<00:16:47.080> a<00:16:47.120> time.<00:16:47.760> You<00:16:47.839> just 00:16:47.990 --> 00:16:48.000 align:start position:0% list one issue at a time. You just 00:16:48.000 --> 00:16:50.070 align:start position:0% list one issue at a time. You just describe<00:16:48.320> the<00:16:48.400> problem,<00:16:49.120> let<00:16:49.320> AI<00:16:49.480> Studio<00:16:49.839> fix 00:16:50.070 --> 00:16:50.080 align:start position:0% describe the problem, let AI Studio fix 00:16:50.080 --> 00:16:52.070 align:start position:0% describe the problem, let AI Studio fix it,<00:16:50.640> test<00:16:50.839> it<00:16:50.920> again,<00:16:51.480> and<00:16:51.600> then<00:16:51.680> move<00:16:51.880> on<00:16:52.000> to 00:16:52.070 --> 00:16:52.080 align:start position:0% it, test it again, and then move on to 00:16:52.080 --> 00:16:53.910 align:start position:0% it, test it again, and then move on to the<00:16:52.160> next<00:16:52.400> one.<00:16:52.920> And<00:16:53.080> you<00:16:53.160> want<00:16:53.280> to<00:16:53.360> keep<00:16:53.600> it<00:16:53.720> to 00:16:53.910 --> 00:16:53.920 align:start position:0% the next one. And you want to keep it to 00:16:53.920 --> 00:16:56.310 align:start position:0% the next one. And you want to keep it to one<00:16:54.200> issue<00:16:54.600> per<00:16:54.839> prompt,<00:16:55.320> so<00:16:55.480> that<00:16:55.680> way<00:16:56.000> each 00:16:56.310 --> 00:16:56.320 align:start position:0% one issue per prompt, so that way each 00:16:56.320 --> 00:16:58.190 align:start position:0% one issue per prompt, so that way each fix<00:16:56.560> is<00:16:56.760> clean<00:16:57.280> and<00:16:57.400> doesn't<00:16:57.680> accidentally 00:16:58.190 --> 00:16:58.200 align:start position:0% fix is clean and doesn't accidentally 00:16:58.200 --> 00:17:00.030 align:start position:0% fix is clean and doesn't accidentally break<00:16:58.480> something<00:16:58.839> else.<00:16:59.520> Now,<00:16:59.680> if<00:16:59.800> you<00:16:59.920> run 00:17:00.030 --> 00:17:00.040 align:start position:0% break something else. Now, if you run 00:17:00.040 --> 00:17:01.390 align:start position:0% break something else. Now, if you run into<00:17:00.200> something<00:17:00.600> that<00:17:00.760> is<00:17:00.880> completely 00:17:01.390 --> 00:17:01.400 align:start position:0% into something that is completely 00:17:01.400 --> 00:17:03.310 align:start position:0% into something that is completely blocking<00:17:01.839> you,<00:17:02.200> like<00:17:02.400> you<00:17:02.560> can't<00:17:02.839> even<00:17:03.080> sign 00:17:03.310 --> 00:17:03.320 align:start position:0% blocking you, like you can't even sign 00:17:03.320 --> 00:17:05.110 align:start position:0% blocking you, like you can't even sign in<00:17:03.440> to<00:17:03.560> your<00:17:03.720> app,<00:17:04.280> you'll<00:17:04.439> want<00:17:04.560> to<00:17:04.640> go<00:17:04.800> ahead 00:17:05.110 --> 00:17:05.120 align:start position:0% in to your app, you'll want to go ahead 00:17:05.120 --> 00:17:07.189 align:start position:0% in to your app, you'll want to go ahead and<00:17:05.280> fix<00:17:05.520> that<00:17:05.760> as<00:17:05.880> a<00:17:05.959> prompt<00:17:06.400> right<00:17:06.520> away,<00:17:07.079> so 00:17:07.189 --> 00:17:07.199 align:start position:0% and fix that as a prompt right away, so 00:17:07.199 --> 00:17:08.870 align:start position:0% and fix that as a prompt right away, so you<00:17:07.280> can<00:17:07.400> get<00:17:07.560> past<00:17:07.920> it<00:17:08.120> and<00:17:08.240> keep<00:17:08.439> testing<00:17:08.800> the 00:17:08.870 --> 00:17:08.880 align:start position:0% you can get past it and keep testing the 00:17:08.880 --> 00:17:10.550 align:start position:0% you can get past it and keep testing the rest<00:17:09.079> of<00:17:09.160> your<00:17:09.319> app.<00:17:09.920> You're<00:17:10.040> going<00:17:10.160> to<00:17:10.240> watch 00:17:10.550 --> 00:17:10.560 align:start position:0% rest of your app. You're going to watch 00:17:10.560 --> 00:17:12.829 align:start position:0% rest of your app. You're going to watch me<00:17:10.720> go<00:17:10.880> through<00:17:11.040> this<00:17:11.199> process<00:17:11.800> for<00:17:12.040> my<00:17:12.280> app. 00:17:12.829 --> 00:17:12.839 align:start position:0% me go through this process for my app. 00:17:12.839 --> 00:17:14.990 align:start position:0% me go through this process for my app. And<00:17:12.959> the<00:17:13.040> specific<00:17:13.520> problems<00:17:13.959> I<00:17:14.079> run<00:17:14.240> into<00:17:14.839> are 00:17:14.990 --> 00:17:15.000 align:start position:0% And the specific problems I run into are 00:17:15.000 --> 00:17:16.870 align:start position:0% And the specific problems I run into are are<00:17:15.480> going<00:17:15.720> to<00:17:15.760> be<00:17:15.880> different<00:17:16.400> from<00:17:16.560> what<00:17:16.720> you 00:17:16.870 --> 00:17:16.880 align:start position:0% are going to be different from what you 00:17:16.880 --> 00:17:18.350 align:start position:0% are going to be different from what you run<00:17:17.040> into,<00:17:17.600> depending<00:17:18.000> on<00:17:18.079> what<00:17:18.240> you're 00:17:18.350 --> 00:17:18.360 align:start position:0% run into, depending on what you're 00:17:18.360 --> 00:17:20.350 align:start position:0% run into, depending on what you're building.<00:17:19.000> But,<00:17:19.160> the<00:17:19.360> overall<00:17:19.720> approach<00:17:20.199> is 00:17:20.350 --> 00:17:20.360 align:start position:0% building. But, the overall approach is 00:17:20.360 --> 00:17:22.630 align:start position:0% building. But, the overall approach is exactly<00:17:20.839> the<00:17:20.959> same.<00:17:21.480> You<00:17:21.600> test<00:17:21.959> things,<00:17:22.520> you 00:17:22.630 --> 00:17:22.640 align:start position:0% exactly the same. You test things, you 00:17:22.640 --> 00:17:24.390 align:start position:0% exactly the same. You test things, you note<00:17:22.839> down<00:17:23.120> what's<00:17:23.280> not<00:17:23.480> working,<00:17:24.160> and<00:17:24.280> you 00:17:24.390 --> 00:17:24.400 align:start position:0% note down what's not working, and you 00:17:24.400 --> 00:17:25.990 align:start position:0% note down what's not working, and you work<00:17:24.600> through<00:17:24.800> it<00:17:24.920> using<00:17:25.199> prompts<00:17:25.600> with<00:17:25.800> AI 00:17:25.990 --> 00:17:26.000 align:start position:0% work through it using prompts with AI 00:17:26.000 --> 00:17:27.910 align:start position:0% work through it using prompts with AI Studio.<00:17:26.760> That's<00:17:27.000> the<00:17:27.079> process,<00:17:27.720> and<00:17:27.800> it's 00:17:27.910 --> 00:17:27.920 align:start position:0% Studio. That's the process, and it's 00:17:27.920 --> 00:17:30.070 align:start position:0% Studio. That's the process, and it's honestly<00:17:28.400> super<00:17:28.760> easy.<00:17:29.480> All<00:17:29.560> right.<00:17:29.800> So,<00:17:29.920> now 00:17:30.070 --> 00:17:30.080 align:start position:0% honestly super easy. All right. So, now 00:17:30.080 --> 00:17:31.510 align:start position:0% honestly super easy. All right. So, now let's<00:17:30.240> go<00:17:30.320> ahead<00:17:30.520> and<00:17:30.600> begin<00:17:30.880> testing<00:17:31.320> our 00:17:31.510 --> 00:17:31.520 align:start position:0% let's go ahead and begin testing our 00:17:31.520 --> 00:17:33.670 align:start position:0% let's go ahead and begin testing our app.<00:17:32.000> To<00:17:32.080> begin<00:17:32.400> testing<00:17:32.840> our<00:17:33.000> web<00:17:33.200> app,<00:17:33.480> let's 00:17:33.670 --> 00:17:33.680 align:start position:0% app. To begin testing our web app, let's 00:17:33.680 --> 00:17:35.990 align:start position:0% app. To begin testing our web app, let's go<00:17:33.800> ahead<00:17:34.080> and<00:17:34.240> maximize<00:17:34.880> the<00:17:35.000> preview<00:17:35.320> panel. 00:17:35.990 --> 00:17:36.000 align:start position:0% go ahead and maximize the preview panel. 00:17:36.000 --> 00:17:39.230 align:start position:0% go ahead and maximize the preview panel. Click<00:17:36.240> on<00:17:36.400> this<00:17:36.600> button<00:17:36.880> right<00:17:37.040> here. 00:17:39.230 --> 00:17:39.240 align:start position:0% Click on this button right here. 00:17:39.240 --> 00:17:41.110 align:start position:0% Click on this button right here. And<00:17:39.440> this<00:17:39.560> is<00:17:39.680> what<00:17:39.840> my<00:17:40.040> app's<00:17:40.440> login<00:17:40.840> screen 00:17:41.110 --> 00:17:41.120 align:start position:0% And this is what my app's login screen 00:17:41.120 --> 00:17:42.830 align:start position:0% And this is what my app's login screen looks<00:17:41.280> like.<00:17:41.680> Obviously,<00:17:42.200> yours<00:17:42.560> is<00:17:42.640> going<00:17:42.760> to 00:17:42.830 --> 00:17:42.840 align:start position:0% looks like. Obviously, yours is going to 00:17:42.840 --> 00:17:44.390 align:start position:0% looks like. Obviously, yours is going to look<00:17:43.000> slightly<00:17:43.280> different.<00:17:43.840> In<00:17:43.920> my<00:17:44.040> case,<00:17:44.320> I 00:17:44.390 --> 00:17:44.400 align:start position:0% look slightly different. In my case, I 00:17:44.400 --> 00:17:45.950 align:start position:0% look slightly different. In my case, I don't<00:17:44.640> have<00:17:44.760> an<00:17:44.840> account<00:17:45.120> yet,<00:17:45.400> so<00:17:45.600> I'll<00:17:45.720> click 00:17:45.950 --> 00:17:45.960 align:start position:0% don't have an account yet, so I'll click 00:17:45.960 --> 00:17:48.550 align:start position:0% don't have an account yet, so I'll click on<00:17:46.200> create<00:17:46.640> free<00:17:46.800> account. 00:17:48.550 --> 00:17:48.560 align:start position:0% on create free account. 00:17:48.560 --> 00:17:50.550 align:start position:0% on create free account. Now,<00:17:48.680> before<00:17:48.960> you<00:17:49.080> enter<00:17:49.400> anything<00:17:49.800> here,<00:17:50.440> the 00:17:50.550 --> 00:17:50.560 align:start position:0% Now, before you enter anything here, the 00:17:50.560 --> 00:17:52.710 align:start position:0% Now, before you enter anything here, the first<00:17:50.880> account<00:17:51.240> you<00:17:51.360> create<00:17:51.760> on<00:17:51.880> your<00:17:52.080> app<00:17:52.600> is 00:17:52.710 --> 00:17:52.720 align:start position:0% first account you create on your app is 00:17:52.720 --> 00:17:54.630 align:start position:0% first account you create on your app is going<00:17:52.880> to<00:17:52.960> become<00:17:53.320> your<00:17:53.560> admin<00:17:53.840> account<00:17:54.320> later 00:17:54.630 --> 00:17:54.640 align:start position:0% going to become your admin account later 00:17:54.640 --> 00:17:56.630 align:start position:0% going to become your admin account later on<00:17:54.800> in<00:17:54.920> this<00:17:55.080> video.<00:17:55.680> So,<00:17:55.800> make<00:17:56.040> sure<00:17:56.240> you<00:17:56.400> use 00:17:56.630 --> 00:17:56.640 align:start position:0% on in this video. So, make sure you use 00:17:56.640 --> 00:17:58.670 align:start position:0% on in this video. So, make sure you use the<00:17:56.760> email<00:17:57.080> and<00:17:57.200> password<00:17:58.000> that<00:17:58.120> you<00:17:58.280> actually 00:17:58.670 --> 00:17:58.680 align:start position:0% the email and password that you actually 00:17:58.680 --> 00:18:00.750 align:start position:0% the email and password that you actually want<00:17:58.840> to<00:17:58.960> use<00:17:59.200> long-term<00:18:00.000> as<00:18:00.160> the<00:18:00.360> owner<00:18:00.640> of 00:18:00.750 --> 00:18:00.760 align:start position:0% want to use long-term as the owner of 00:18:00.760 --> 00:18:02.630 align:start position:0% want to use long-term as the owner of this<00:18:00.960> app.<00:18:01.520> We'll<00:18:01.640> be<00:18:01.800> using<00:18:02.120> this<00:18:02.360> first 00:18:02.630 --> 00:18:02.640 align:start position:0% this app. We'll be using this first 00:18:02.640 --> 00:18:04.270 align:start position:0% this app. We'll be using this first account<00:18:03.080> as<00:18:03.200> a<00:18:03.240> regular<00:18:03.600> test<00:18:03.840> account<00:18:04.160> for 00:18:04.270 --> 00:18:04.280 align:start position:0% account as a regular test account for 00:18:04.280 --> 00:18:05.990 align:start position:0% account as a regular test account for now,<00:18:04.760> but<00:18:04.920> later<00:18:05.240> on<00:18:05.480> we'll<00:18:05.640> give<00:18:05.840> this 00:18:05.990 --> 00:18:06.000 align:start position:0% now, but later on we'll give this 00:18:06.000 --> 00:18:08.070 align:start position:0% now, but later on we'll give this account<00:18:06.480> admin<00:18:06.720> privileges<00:18:07.360> so<00:18:07.520> you<00:18:07.640> can<00:18:07.800> see 00:18:08.070 --> 00:18:08.080 align:start position:0% account admin privileges so you can see 00:18:08.080 --> 00:18:09.790 align:start position:0% account admin privileges so you can see all<00:18:08.200> of<00:18:08.320> your<00:18:08.480> users<00:18:08.920> and<00:18:09.040> all<00:18:09.160> of<00:18:09.240> their<00:18:09.400> data 00:18:09.790 --> 00:18:09.800 align:start position:0% all of your users and all of their data 00:18:09.800 --> 00:18:11.950 align:start position:0% all of your users and all of their data in<00:18:09.960> one<00:18:10.160> place.<00:18:10.800> So,<00:18:10.960> just<00:18:11.120> keep<00:18:11.320> that<00:18:11.480> in<00:18:11.600> mind 00:18:11.950 --> 00:18:11.960 align:start position:0% in one place. So, just keep that in mind 00:18:11.960 --> 00:18:13.470 align:start position:0% in one place. So, just keep that in mind when<00:18:12.080> you're<00:18:12.240> choosing<00:18:12.760> your<00:18:13.000> email<00:18:13.360> and 00:18:13.470 --> 00:18:13.480 align:start position:0% when you're choosing your email and 00:18:13.480 --> 00:18:15.710 align:start position:0% when you're choosing your email and password<00:18:13.920> here. 00:18:15.710 --> 00:18:15.720 align:start position:0% password here. 00:18:15.720 --> 00:18:16.950 align:start position:0% password here. I've<00:18:15.880> gone<00:18:16.080> ahead<00:18:16.320> and<00:18:16.440> filled<00:18:16.680> out<00:18:16.840> my 00:18:16.950 --> 00:18:16.960 align:start position:0% I've gone ahead and filled out my 00:18:16.960 --> 00:18:18.870 align:start position:0% I've gone ahead and filled out my personal<00:18:17.360> information<00:18:17.840> here,<00:18:18.360> so<00:18:18.600> I'll<00:18:18.720> go 00:18:18.870 --> 00:18:18.880 align:start position:0% personal information here, so I'll go 00:18:18.880 --> 00:18:23.110 align:start position:0% personal information here, so I'll go down<00:18:19.200> and<00:18:19.320> click<00:18:19.560> on<00:18:19.880> get<00:18:20.120> started. 00:18:23.110 --> 00:18:23.120 align:start position:0% 00:18:23.120 --> 00:18:24.870 align:start position:0% All<00:18:23.200> right.<00:18:23.400> Now,<00:18:23.520> we're<00:18:23.680> inside<00:18:24.160> of<00:18:24.240> our<00:18:24.400> app. 00:18:24.870 --> 00:18:24.880 align:start position:0% All right. Now, we're inside of our app. 00:18:24.880 --> 00:18:26.630 align:start position:0% All right. Now, we're inside of our app. So,<00:18:25.080> your<00:18:25.240> dashboard<00:18:25.800> is<00:18:25.960> probably<00:18:26.400> going<00:18:26.560> to 00:18:26.630 --> 00:18:26.640 align:start position:0% So, your dashboard is probably going to 00:18:26.640 --> 00:18:28.150 align:start position:0% So, your dashboard is probably going to look<00:18:26.760> different<00:18:27.120> from<00:18:27.240> mine,<00:18:27.720> depending<00:18:28.080> on 00:18:28.150 --> 00:18:28.160 align:start position:0% look different from mine, depending on 00:18:28.160 --> 00:18:29.630 align:start position:0% look different from mine, depending on what<00:18:28.280> you<00:18:28.400> built.<00:18:28.880> You'll<00:18:29.000> probably<00:18:29.440> have 00:18:29.630 --> 00:18:29.640 align:start position:0% what you built. You'll probably have 00:18:29.640 --> 00:18:31.470 align:start position:0% what you built. You'll probably have different<00:18:29.960> tabs,<00:18:30.440> different<00:18:30.720> features,<00:18:31.320> and 00:18:31.470 --> 00:18:31.480 align:start position:0% different tabs, different features, and 00:18:31.480 --> 00:18:33.110 align:start position:0% different tabs, different features, and overall<00:18:32.000> a<00:18:32.040> different<00:18:32.400> layout,<00:18:32.880> and<00:18:32.960> that's 00:18:33.110 --> 00:18:33.120 align:start position:0% overall a different layout, and that's 00:18:33.120 --> 00:18:34.870 align:start position:0% overall a different layout, and that's totally<00:18:33.440> fine.<00:18:33.960> The<00:18:34.080> important<00:18:34.480> thing<00:18:34.760> is 00:18:34.870 --> 00:18:34.880 align:start position:0% totally fine. The important thing is 00:18:34.880 --> 00:18:36.150 align:start position:0% totally fine. The important thing is that<00:18:34.960> you're<00:18:35.120> logged<00:18:35.480> in<00:18:35.720> and<00:18:35.840> you<00:18:35.880> can<00:18:36.040> see 00:18:36.150 --> 00:18:36.160 align:start position:0% that you're logged in and you can see 00:18:36.160 --> 00:18:38.230 align:start position:0% that you're logged in and you can see your<00:18:36.360> app's<00:18:36.640> main<00:18:36.920> screen.<00:18:37.560> This<00:18:37.800> right<00:18:38.000> here 00:18:38.230 --> 00:18:38.240 align:start position:0% your app's main screen. This right here 00:18:38.240 --> 00:18:39.750 align:start position:0% your app's main screen. This right here is<00:18:38.360> what<00:18:38.480> your<00:18:38.600> users<00:18:38.920> are<00:18:39.000> going<00:18:39.200> to<00:18:39.320> see 00:18:39.750 --> 00:18:39.760 align:start position:0% is what your users are going to see 00:18:39.760 --> 00:18:41.550 align:start position:0% is what your users are going to see every<00:18:40.040> time<00:18:40.280> they<00:18:40.400> use<00:18:40.560> your<00:18:40.720> app.<00:18:41.240> Now,<00:18:41.440> we 00:18:41.550 --> 00:18:41.560 align:start position:0% every time they use your app. Now, we 00:18:41.560 --> 00:18:43.550 align:start position:0% every time they use your app. Now, we want<00:18:41.680> to<00:18:41.760> test<00:18:42.120> every<00:18:42.440> core<00:18:42.720> feature<00:18:43.240> to<00:18:43.360> make 00:18:43.550 --> 00:18:43.560 align:start position:0% want to test every core feature to make 00:18:43.560 --> 00:18:45.750 align:start position:0% want to test every core feature to make sure<00:18:43.840> it's<00:18:44.040> actually<00:18:44.440> working.<00:18:45.120> For<00:18:45.240> my<00:18:45.440> app, 00:18:45.750 --> 00:18:45.760 align:start position:0% sure it's actually working. For my app, 00:18:45.760 --> 00:18:47.510 align:start position:0% sure it's actually working. For my app, that<00:18:45.920> means<00:18:46.200> testing<00:18:46.600> file<00:18:46.880> uploads, 00:18:47.510 --> 00:18:47.520 align:start position:0% that means testing file uploads, 00:18:47.520 --> 00:18:49.590 align:start position:0% that means testing file uploads, downloads,<00:18:48.120> and<00:18:48.280> deletes.<00:18:48.960> For<00:18:49.080> yours,<00:18:49.520> it 00:18:49.590 --> 00:18:49.600 align:start position:0% downloads, and deletes. For yours, it 00:18:49.600 --> 00:18:51.070 align:start position:0% downloads, and deletes. For yours, it might<00:18:49.760> be<00:18:49.880> something<00:18:50.200> different<00:18:50.640> depending 00:18:51.070 --> 00:18:51.080 align:start position:0% might be something different depending 00:18:51.080 --> 00:18:53.150 align:start position:0% might be something different depending on<00:18:51.200> what<00:18:51.360> your<00:18:51.520> app<00:18:51.760> does,<00:18:52.320> but<00:18:52.480> the<00:18:52.560> process 00:18:53.150 --> 00:18:53.160 align:start position:0% on what your app does, but the process 00:18:53.160 --> 00:18:55.510 align:start position:0% on what your app does, but the process is<00:18:53.320> the<00:18:53.440> same.<00:18:53.920> Go<00:18:54.120> through<00:18:54.600> each<00:18:54.880> feature<00:18:55.280> one 00:18:55.510 --> 00:18:55.520 align:start position:0% is the same. Go through each feature one 00:18:55.520 --> 00:18:57.110 align:start position:0% is the same. Go through each feature one by<00:18:55.720> one<00:18:56.080> and<00:18:56.200> make<00:18:56.400> sure<00:18:56.560> it<00:18:56.680> does<00:18:56.920> what<00:18:57.040> it's 00:18:57.110 --> 00:18:57.120 align:start position:0% by one and make sure it does what it's 00:18:57.120 --> 00:18:59.270 align:start position:0% by one and make sure it does what it's supposed<00:18:57.520> to<00:18:57.600> do.<00:18:58.040> So,<00:18:58.200> I'll<00:18:58.360> test<00:18:58.640> mine.<00:18:59.160> I'll 00:18:59.270 --> 00:18:59.280 align:start position:0% supposed to do. So, I'll test mine. I'll 00:18:59.280 --> 00:19:01.110 align:start position:0% supposed to do. So, I'll test mine. I'll start<00:18:59.480> by<00:18:59.600> uploading<00:18:59.960> a<00:19:00.000> file<00:19:00.320> here.<00:19:01.000> I'll 00:19:01.110 --> 00:19:01.120 align:start position:0% start by uploading a file here. I'll 00:19:01.120 --> 00:19:04.270 align:start position:0% start by uploading a file here. I'll click<00:19:01.360> on<00:19:01.560> browse<00:19:01.840> locally. 00:19:04.270 --> 00:19:04.280 align:start position:0% click on browse locally. 00:19:04.280 --> 00:19:05.670 align:start position:0% click on browse locally. And<00:19:04.400> I'll<00:19:04.480> try<00:19:04.680> uploading<00:19:05.080> this<00:19:05.240> file<00:19:05.520> right 00:19:05.670 --> 00:19:05.680 align:start position:0% And I'll try uploading this file right 00:19:05.680 --> 00:19:09.230 align:start position:0% And I'll try uploading this file right here. 00:19:09.230 --> 00:19:09.240 align:start position:0% 00:19:09.240 --> 00:19:10.870 align:start position:0% I'll<00:19:09.320> scroll<00:19:09.600> down.<00:19:10.480> And<00:19:10.560> right<00:19:10.680> here,<00:19:10.800> you 00:19:10.870 --> 00:19:10.880 align:start position:0% I'll scroll down. And right here, you 00:19:10.880 --> 00:19:12.550 align:start position:0% I'll scroll down. And right here, you can<00:19:11.000> see<00:19:11.160> it<00:19:11.280> appears<00:19:11.720> that<00:19:11.840> nothing<00:19:12.200> actually 00:19:12.550 --> 00:19:12.560 align:start position:0% can see it appears that nothing actually 00:19:12.560 --> 00:19:13.990 align:start position:0% can see it appears that nothing actually uploaded.<00:19:13.240> So,<00:19:13.360> here's<00:19:13.640> how<00:19:13.720> we're<00:19:13.840> going<00:19:13.960> to 00:19:13.990 --> 00:19:14.000 align:start position:0% uploaded. So, here's how we're going to 00:19:14.000 --> 00:19:15.670 align:start position:0% uploaded. So, here's how we're going to troubleshoot<00:19:14.480> something<00:19:14.760> like<00:19:14.920> this.<00:19:15.600> I'll 00:19:15.670 --> 00:19:15.680 align:start position:0% troubleshoot something like this. I'll 00:19:15.680 --> 00:19:16.910 align:start position:0% troubleshoot something like this. I'll go<00:19:15.760> to<00:19:15.840> the<00:19:15.920> top<00:19:16.200> right<00:19:16.400> and<00:19:16.520> close<00:19:16.760> out<00:19:16.880> of 00:19:16.910 --> 00:19:16.920 align:start position:0% go to the top right and close out of 00:19:16.920 --> 00:19:18.790 align:start position:0% go to the top right and close out of this. 00:19:18.790 --> 00:19:18.800 align:start position:0% this. 00:19:18.800 --> 00:19:20.190 align:start position:0% this. And<00:19:18.960> we'll<00:19:19.080> go<00:19:19.200> back<00:19:19.480> over<00:19:19.640> to<00:19:19.720> the<00:19:19.800> left<00:19:20.000> side 00:19:20.190 --> 00:19:20.200 align:start position:0% And we'll go back over to the left side 00:19:20.200 --> 00:19:21.910 align:start position:0% And we'll go back over to the left side here.<00:19:20.720> If<00:19:20.840> you<00:19:20.960> find<00:19:21.280> that<00:19:21.360> there's<00:19:21.520> anything 00:19:21.910 --> 00:19:21.920 align:start position:0% here. If you find that there's anything 00:19:21.920 --> 00:19:23.510 align:start position:0% here. If you find that there's anything not<00:19:22.120> working<00:19:22.440> within<00:19:22.640> your<00:19:22.800> app,<00:19:23.280> you'll<00:19:23.400> want 00:19:23.510 --> 00:19:23.520 align:start position:0% not working within your app, you'll want 00:19:23.520 --> 00:19:24.990 align:start position:0% not working within your app, you'll want to<00:19:23.600> work<00:19:23.760> with<00:19:23.960> AI<00:19:24.160> studio<00:19:24.640> to<00:19:24.760> give<00:19:24.880> it 00:19:24.990 --> 00:19:25.000 align:start position:0% to work with AI studio to give it 00:19:25.000 --> 00:19:26.750 align:start position:0% to work with AI studio to give it feedback<00:19:25.720> and<00:19:25.800> have<00:19:25.920> it<00:19:26.000> make<00:19:26.160> those<00:19:26.360> fixes 00:19:26.750 --> 00:19:26.760 align:start position:0% feedback and have it make those fixes 00:19:26.760 --> 00:19:28.030 align:start position:0% feedback and have it make those fixes for<00:19:26.960> you.<00:19:27.280> So,<00:19:27.440> right<00:19:27.600> here<00:19:27.760> I'm<00:19:27.840> going<00:19:27.960> to 00:19:28.030 --> 00:19:28.040 align:start position:0% for you. So, right here I'm going to 00:19:28.040 --> 00:19:29.190 align:start position:0% for you. So, right here I'm going to say, 00:19:29.190 --> 00:19:29.200 align:start position:0% say, 00:19:29.200 --> 00:19:33.350 align:start position:0% say, "It<00:19:29.480> appears<00:19:30.360> file<00:19:30.880> uploads<00:19:31.600> aren't<00:19:32.120> working. 00:19:33.350 --> 00:19:33.360 align:start position:0% "It appears file uploads aren't working. 00:19:33.360 --> 00:19:34.910 align:start position:0% "It appears file uploads aren't working. Troubleshoot 00:19:34.910 --> 00:19:34.920 align:start position:0% Troubleshoot 00:19:34.920 --> 00:19:37.870 align:start position:0% Troubleshoot this<00:19:35.240> problem<00:19:36.200> and<00:19:36.520> fix<00:19:36.760> it."<00:19:37.480> Then<00:19:37.680> I'll<00:19:37.800> go 00:19:37.870 --> 00:19:37.880 align:start position:0% this problem and fix it." Then I'll go 00:19:37.880 --> 00:19:39.870 align:start position:0% this problem and fix it." Then I'll go ahead<00:19:38.000> and<00:19:38.120> send<00:19:38.320> this. 00:19:39.870 --> 00:19:39.880 align:start position:0% ahead and send this. 00:19:39.880 --> 00:19:41.670 align:start position:0% ahead and send this. And<00:19:40.000> now<00:19:40.200> we'll<00:19:40.320> let<00:19:40.520> AI<00:19:40.720> studio<00:19:41.200> troubleshoot 00:19:41.670 --> 00:19:41.680 align:start position:0% And now we'll let AI studio troubleshoot 00:19:41.680 --> 00:19:43.630 align:start position:0% And now we'll let AI studio troubleshoot this<00:19:41.840> problem<00:19:42.280> and<00:19:42.440> fix<00:19:42.640> it<00:19:42.760> for<00:19:43.000> us.<00:19:43.440> So,<00:19:43.560> I'm 00:19:43.630 --> 00:19:43.640 align:start position:0% this problem and fix it for us. So, I'm 00:19:43.640 --> 00:19:45.070 align:start position:0% this problem and fix it for us. So, I'm going<00:19:43.760> to<00:19:43.800> wait<00:19:43.960> here<00:19:44.160> for<00:19:44.320> a<00:19:44.360> few<00:19:44.560> moments<00:19:44.960> and 00:19:45.070 --> 00:19:45.080 align:start position:0% going to wait here for a few moments and 00:19:45.080 --> 00:19:48.310 align:start position:0% going to wait here for a few moments and wait<00:19:45.200> for<00:19:45.320> those<00:19:45.480> fixes<00:19:45.880> to<00:19:45.960> be<00:19:46.080> done. 00:19:48.310 --> 00:19:48.320 align:start position:0% wait for those fixes to be done. 00:19:48.320 --> 00:19:49.870 align:start position:0% wait for those fixes to be done. All<00:19:48.400> right,<00:19:48.560> so<00:19:48.680> here's<00:19:49.000> what<00:19:49.200> AI<00:19:49.360> studio<00:19:49.720> came 00:19:49.870 --> 00:19:49.880 align:start position:0% All right, so here's what AI studio came 00:19:49.880 --> 00:19:51.790 align:start position:0% All right, so here's what AI studio came back<00:19:50.160> with.<00:19:50.680> It<00:19:50.800> says<00:19:50.920> that<00:19:51.040> the<00:19:51.160> application 00:19:51.790 --> 00:19:51.800 align:start position:0% back with. It says that the application 00:19:51.800 --> 00:19:53.550 align:start position:0% back with. It says that the application is<00:19:51.880> now<00:19:52.040> fully<00:19:52.360> connected<00:19:52.840> to<00:19:52.880> both<00:19:53.120> Firebase 00:19:53.550 --> 00:19:53.560 align:start position:0% is now fully connected to both Firebase 00:19:53.560 --> 00:19:55.350 align:start position:0% is now fully connected to both Firebase storage<00:19:54.000> and<00:19:54.120> Firestore,<00:19:54.880> which<00:19:55.000> is<00:19:55.080> going<00:19:55.240> to 00:19:55.350 --> 00:19:55.360 align:start position:0% storage and Firestore, which is going to 00:19:55.360 --> 00:19:56.790 align:start position:0% storage and Firestore, which is going to allow<00:19:55.600> users<00:19:56.000> to<00:19:56.120> actually<00:19:56.440> upload<00:19:56.680> their 00:19:56.790 --> 00:19:56.800 align:start position:0% allow users to actually upload their 00:19:56.800 --> 00:19:58.670 align:start position:0% allow users to actually upload their files.<00:19:57.480> In<00:19:57.600> some<00:19:57.720> cases,<00:19:58.040> you<00:19:58.160> may<00:19:58.320> see<00:19:58.480> this 00:19:58.670 --> 00:19:58.680 align:start position:0% files. In some cases, you may see this 00:19:58.680 --> 00:20:00.150 align:start position:0% files. In some cases, you may see this pop<00:19:58.880> up<00:19:59.040> right<00:19:59.200> here,<00:19:59.640> where<00:19:59.760> it<00:19:59.840> says<00:20:00.040> that 00:20:00.150 --> 00:20:00.160 align:start position:0% pop up right here, where it says that 00:20:00.160 --> 00:20:01.670 align:start position:0% pop up right here, where it says that there<00:20:00.240> were<00:20:00.400> errors<00:20:00.760> running<00:20:00.960> the<00:20:01.040> code.<00:20:01.600> If 00:20:01.670 --> 00:20:01.680 align:start position:0% there were errors running the code. If 00:20:01.680 --> 00:20:05.230 align:start position:0% there were errors running the code. If this<00:20:01.840> pops<00:20:02.160> up,<00:20:02.360> just<00:20:02.560> click<00:20:02.720> on<00:20:02.920> fix. 00:20:05.230 --> 00:20:05.240 align:start position:0% this pops up, just click on fix. 00:20:05.240 --> 00:20:06.510 align:start position:0% this pops up, just click on fix. And<00:20:05.360> now<00:20:05.480> we'll<00:20:05.600> wait<00:20:05.800> here<00:20:06.000> for<00:20:06.120> a<00:20:06.200> few<00:20:06.360> more 00:20:06.510 --> 00:20:06.520 align:start position:0% And now we'll wait here for a few more 00:20:06.520 --> 00:20:10.030 align:start position:0% And now we'll wait here for a few more moments<00:20:06.880> to<00:20:06.960> let<00:20:07.080> those<00:20:07.240> fixes<00:20:07.600> take<00:20:07.800> place. 00:20:10.030 --> 00:20:10.040 align:start position:0% moments to let those fixes take place. 00:20:10.040 --> 00:20:11.070 align:start position:0% moments to let those fixes take place. All<00:20:10.160> right,<00:20:10.320> now<00:20:10.440> as<00:20:10.560> you<00:20:10.600> can<00:20:10.760> see<00:20:10.880> right 00:20:11.070 --> 00:20:11.080 align:start position:0% All right, now as you can see right 00:20:11.080 --> 00:20:12.950 align:start position:0% All right, now as you can see right here,<00:20:11.440> it<00:20:11.600> says<00:20:11.840> that<00:20:11.960> the<00:20:12.120> fixes<00:20:12.600> have<00:20:12.800> been 00:20:12.950 --> 00:20:12.960 align:start position:0% here, it says that the fixes have been 00:20:12.960 --> 00:20:14.350 align:start position:0% here, it says that the fixes have been completed.<00:20:13.680> So,<00:20:13.800> let's<00:20:13.920> go<00:20:14.000> ahead<00:20:14.120> and<00:20:14.200> try 00:20:14.350 --> 00:20:14.360 align:start position:0% completed. So, let's go ahead and try 00:20:14.360 --> 00:20:16.110 align:start position:0% completed. So, let's go ahead and try uploading<00:20:14.720> our<00:20:14.800> files<00:20:15.160> once<00:20:15.360> again.<00:20:15.960> I'll 00:20:16.110 --> 00:20:16.120 align:start position:0% uploading our files once again. I'll 00:20:16.120 --> 00:20:18.710 align:start position:0% uploading our files once again. I'll maximize<00:20:16.680> the<00:20:16.760> window<00:20:17.080> here. 00:20:18.710 --> 00:20:18.720 align:start position:0% maximize the window here. 00:20:18.720 --> 00:20:19.710 align:start position:0% maximize the window here. And<00:20:18.840> as<00:20:18.920> you<00:20:18.960> can<00:20:19.080> see<00:20:19.160> right<00:20:19.280> here,<00:20:19.400> we<00:20:19.520> have 00:20:19.710 --> 00:20:19.720 align:start position:0% And as you can see right here, we have 00:20:19.720 --> 00:20:21.950 align:start position:0% And as you can see right here, we have one<00:20:20.000> file.<00:20:20.680> So,<00:20:20.800> if<00:20:20.880> I<00:20:20.960> scroll<00:20:21.280> down,<00:20:21.760> it<00:20:21.800> looks 00:20:21.950 --> 00:20:21.960 align:start position:0% one file. So, if I scroll down, it looks 00:20:21.960 --> 00:20:23.430 align:start position:0% one file. So, if I scroll down, it looks like<00:20:22.040> it<00:20:22.160> actually<00:20:22.440> did<00:20:22.680> get<00:20:22.840> uploaded,<00:20:23.320> but 00:20:23.430 --> 00:20:23.440 align:start position:0% like it actually did get uploaded, but 00:20:23.440 --> 00:20:24.750 align:start position:0% like it actually did get uploaded, but it<00:20:23.480> just<00:20:23.640> wasn't<00:20:23.880> appearing.<00:20:24.520> So,<00:20:24.640> that's 00:20:24.750 --> 00:20:24.760 align:start position:0% it just wasn't appearing. So, that's 00:20:24.760 --> 00:20:26.390 align:start position:0% it just wasn't appearing. So, that's kind<00:20:24.920> of<00:20:25.000> the<00:20:25.040> whole<00:20:25.240> idea<00:20:25.600> here<00:20:26.000> after<00:20:26.240> you 00:20:26.390 --> 00:20:26.400 align:start position:0% kind of the whole idea here after you 00:20:26.400 --> 00:20:28.470 align:start position:0% kind of the whole idea here after you create<00:20:26.880> your<00:20:27.040> first<00:20:27.400> version<00:20:27.920> of<00:20:28.120> your<00:20:28.280> web 00:20:28.470 --> 00:20:28.480 align:start position:0% create your first version of your web 00:20:28.480 --> 00:20:30.830 align:start position:0% create your first version of your web app.<00:20:28.920> You<00:20:29.040> create<00:20:29.520> it,<00:20:29.760> test<00:20:30.040> everything<00:20:30.400> out, 00:20:30.830 --> 00:20:30.840 align:start position:0% app. You create it, test everything out, 00:20:30.840 --> 00:20:32.350 align:start position:0% app. You create it, test everything out, note<00:20:31.000> down<00:20:31.240> anything<00:20:31.520> that's<00:20:31.760> wrong,<00:20:32.240> and 00:20:32.350 --> 00:20:32.360 align:start position:0% note down anything that's wrong, and 00:20:32.360 --> 00:20:33.790 align:start position:0% note down anything that's wrong, and then<00:20:32.480> go<00:20:32.640> through<00:20:32.840> and<00:20:32.920> make<00:20:33.080> those<00:20:33.280> changes 00:20:33.790 --> 00:20:33.800 align:start position:0% then go through and make those changes 00:20:33.800 --> 00:20:35.470 align:start position:0% then go through and make those changes one<00:20:33.960> by<00:20:34.120> one.<00:20:34.760> So,<00:20:34.880> just<00:20:35.160> to<00:20:35.200> make<00:20:35.360> sure 00:20:35.470 --> 00:20:35.480 align:start position:0% one by one. So, just to make sure 00:20:35.480 --> 00:20:37.150 align:start position:0% one by one. So, just to make sure everything<00:20:35.840> is<00:20:36.080> working<00:20:36.360> properly,<00:20:37.040> I'll 00:20:37.150 --> 00:20:37.160 align:start position:0% everything is working properly, I'll 00:20:37.160 --> 00:20:40.390 align:start position:0% everything is working properly, I'll click<00:20:37.440> on<00:20:37.680> browse<00:20:38.000> locally<00:20:38.400> again. 00:20:40.390 --> 00:20:40.400 align:start position:0% click on browse locally again. 00:20:40.400 --> 00:20:44.750 align:start position:0% click on browse locally again. I'll<00:20:40.520> try<00:20:40.720> uploading<00:20:41.080> the<00:20:41.160> file<00:20:41.440> again<00:20:41.680> here. 00:20:44.750 --> 00:20:44.760 align:start position:0% 00:20:44.760 --> 00:20:46.190 align:start position:0% And<00:20:44.880> I'll<00:20:45.000> scroll<00:20:45.280> down. 00:20:46.190 --> 00:20:46.200 align:start position:0% And I'll scroll down. 00:20:46.200 --> 00:20:48.070 align:start position:0% And I'll scroll down. And<00:20:46.400> there<00:20:46.520> it<00:20:46.640> is.<00:20:47.240> I'll<00:20:47.400> also<00:20:47.680> click<00:20:47.920> on<00:20:48.000> the 00:20:48.070 --> 00:20:48.080 align:start position:0% And there it is. I'll also click on the 00:20:48.080 --> 00:20:49.230 align:start position:0% And there it is. I'll also click on the download<00:20:48.480> button<00:20:48.680> to<00:20:48.760> make<00:20:48.920> sure<00:20:49.040> that's 00:20:49.230 --> 00:20:49.240 align:start position:0% download button to make sure that's 00:20:49.240 --> 00:20:51.990 align:start position:0% download button to make sure that's working. 00:20:51.990 --> 00:20:52.000 align:start position:0% 00:20:52.000 --> 00:20:53.630 align:start position:0% And<00:20:52.160> that's<00:20:52.320> working<00:20:52.600> great<00:20:52.840> right<00:20:52.960> here. 00:20:53.630 --> 00:20:53.640 align:start position:0% And that's working great right here. 00:20:53.640 --> 00:20:55.670 align:start position:0% And that's working great right here. I'll<00:20:53.760> close<00:20:54.040> out<00:20:54.120> of<00:20:54.200> this. 00:20:55.670 --> 00:20:55.680 align:start position:0% I'll close out of this. 00:20:55.680 --> 00:20:57.790 align:start position:0% I'll close out of this. And<00:20:55.880> let's<00:20:56.040> also<00:20:56.320> try<00:20:56.560> deleting<00:20:56.960> the<00:20:57.040> file. 00:20:57.790 --> 00:20:57.800 align:start position:0% And let's also try deleting the file. 00:20:57.800 --> 00:21:00.710 align:start position:0% And let's also try deleting the file. I'll<00:20:57.920> click<00:20:58.120> on<00:20:58.200> the<00:20:58.280> trash<00:20:58.560> can<00:20:58.720> icon. 00:21:00.710 --> 00:21:00.720 align:start position:0% I'll click on the trash can icon. 00:21:00.720 --> 00:21:03.830 align:start position:0% I'll click on the trash can icon. Click<00:21:00.960> on<00:21:01.080> permanently<00:21:01.520> delete. 00:21:03.830 --> 00:21:03.840 align:start position:0% Click on permanently delete. 00:21:03.840 --> 00:21:05.230 align:start position:0% Click on permanently delete. Awesome.<00:21:04.200> So,<00:21:04.280> that<00:21:04.440> means<00:21:04.640> that<00:21:04.840> everything 00:21:05.230 --> 00:21:05.240 align:start position:0% Awesome. So, that means that everything 00:21:05.240 --> 00:21:06.990 align:start position:0% Awesome. So, that means that everything is<00:21:05.360> working<00:21:05.640> properly<00:21:06.160> with<00:21:06.320> our<00:21:06.440> database 00:21:06.990 --> 00:21:07.000 align:start position:0% is working properly with our database 00:21:07.000 --> 00:21:09.110 align:start position:0% is working properly with our database for<00:21:07.160> file<00:21:07.480> uploads.<00:21:08.200> Now,<00:21:08.400> let's<00:21:08.600> test<00:21:08.880> one 00:21:09.110 --> 00:21:09.120 align:start position:0% for file uploads. Now, let's test one 00:21:09.120 --> 00:21:11.230 align:start position:0% for file uploads. Now, let's test one more<00:21:09.440> important<00:21:09.920> thing.<00:21:10.520> In<00:21:10.600> the<00:21:10.680> bottom<00:21:10.960> left 00:21:11.230 --> 00:21:11.240 align:start position:0% more important thing. In the bottom left 00:21:11.240 --> 00:21:14.390 align:start position:0% more important thing. In the bottom left here,<00:21:11.560> I'm<00:21:11.640> going<00:21:11.760> to<00:21:11.840> click<00:21:12.040> on<00:21:12.200> sign<00:21:12.560> out. 00:21:14.390 --> 00:21:14.400 align:start position:0% here, I'm going to click on sign out. 00:21:14.400 --> 00:21:15.790 align:start position:0% here, I'm going to click on sign out. And<00:21:14.520> then<00:21:14.640> I'm<00:21:14.720> going<00:21:14.840> to<00:21:14.920> log<00:21:15.200> back<00:21:15.480> into<00:21:15.680> my 00:21:15.790 --> 00:21:15.800 align:start position:0% And then I'm going to log back into my 00:21:15.800 --> 00:21:17.150 align:start position:0% And then I'm going to log back into my account. 00:21:17.150 --> 00:21:17.160 align:start position:0% account. 00:21:17.160 --> 00:21:20.310 align:start position:0% account. Sign<00:21:17.440> back<00:21:17.680> in. 00:21:20.310 --> 00:21:20.320 align:start position:0% 00:21:20.320 --> 00:21:22.110 align:start position:0% So,<00:21:20.480> we<00:21:20.600> just<00:21:20.840> signed<00:21:21.160> out<00:21:21.520> and<00:21:21.600> signed<00:21:21.880> back 00:21:22.110 --> 00:21:22.120 align:start position:0% So, we just signed out and signed back 00:21:22.120 --> 00:21:24.110 align:start position:0% So, we just signed out and signed back in,<00:21:22.560> and<00:21:22.720> all<00:21:22.880> of<00:21:22.960> our<00:21:23.080> data<00:21:23.400> is<00:21:23.560> still<00:21:23.920> right 00:21:24.110 --> 00:21:24.120 align:start position:0% in, and all of our data is still right 00:21:24.120 --> 00:21:26.430 align:start position:0% in, and all of our data is still right here.<00:21:24.640> That<00:21:24.840> means<00:21:25.200> our<00:21:25.320> database<00:21:25.760> is<00:21:25.960> working 00:21:26.430 --> 00:21:26.440 align:start position:0% here. That means our database is working 00:21:26.440 --> 00:21:28.550 align:start position:0% here. That means our database is working and<00:21:26.600> storing<00:21:26.960> data<00:21:27.480> so<00:21:27.600> that<00:21:27.720> it<00:21:27.800> persists<00:21:28.360> for 00:21:28.550 --> 00:21:28.560 align:start position:0% and storing data so that it persists for 00:21:28.560 --> 00:21:30.630 align:start position:0% and storing data so that it persists for your<00:21:28.720> users.<00:21:29.480> Authentication<00:21:30.080> is<00:21:30.200> working 00:21:30.630 --> 00:21:30.640 align:start position:0% your users. Authentication is working 00:21:30.640 --> 00:21:31.670 align:start position:0% your users. Authentication is working because<00:21:30.960> we<00:21:31.040> were<00:21:31.160> able<00:21:31.320> to<00:21:31.400> create<00:21:31.640> an 00:21:31.670 --> 00:21:31.680 align:start position:0% because we were able to create an 00:21:31.680 --> 00:21:33.750 align:start position:0% because we were able to create an account,<00:21:32.280> sign<00:21:32.600> out,<00:21:33.040> and<00:21:33.160> sign<00:21:33.400> back<00:21:33.640> in 00:21:33.750 --> 00:21:33.760 align:start position:0% account, sign out, and sign back in 00:21:33.760 --> 00:21:35.870 align:start position:0% account, sign out, and sign back in without<00:21:34.040> any<00:21:34.200> issues.<00:21:34.800> And<00:21:34.920> file<00:21:35.240> uploads<00:21:35.760> are 00:21:35.870 --> 00:21:35.880 align:start position:0% without any issues. And file uploads are 00:21:35.880 --> 00:21:37.910 align:start position:0% without any issues. And file uploads are now<00:21:36.080> working,<00:21:36.400> too.<00:21:36.920> They<00:21:37.080> weren't<00:21:37.280> before, 00:21:37.910 --> 00:21:37.920 align:start position:0% now working, too. They weren't before, 00:21:37.920 --> 00:21:39.270 align:start position:0% now working, too. They weren't before, and<00:21:38.040> that's<00:21:38.200> exactly<00:21:38.640> what<00:21:38.760> the<00:21:38.880> connecting 00:21:39.270 --> 00:21:39.280 align:start position:0% and that's exactly what the connecting 00:21:39.280 --> 00:21:41.350 align:start position:0% and that's exactly what the connecting everything<00:21:39.720> to<00:21:39.840> the<00:21:39.920> UI<00:21:40.280> step<00:21:40.600> is<00:21:40.720> all<00:21:40.840> about. 00:21:41.350 --> 00:21:41.360 align:start position:0% everything to the UI step is all about. 00:21:41.360 --> 00:21:43.310 align:start position:0% everything to the UI step is all about. We<00:21:41.440> had<00:21:41.560> to<00:21:41.640> go<00:21:41.880> in,<00:21:42.280> test<00:21:42.600> things,<00:21:42.960> and<00:21:43.080> find 00:21:43.310 --> 00:21:43.320 align:start position:0% We had to go in, test things, and find 00:21:43.320 --> 00:21:44.910 align:start position:0% We had to go in, test things, and find what<00:21:43.440> wasn't<00:21:43.680> working,<00:21:44.200> and<00:21:44.280> then<00:21:44.440> use<00:21:44.720> AI 00:21:44.910 --> 00:21:44.920 align:start position:0% what wasn't working, and then use AI 00:21:44.920 --> 00:21:46.590 align:start position:0% what wasn't working, and then use AI Studio<00:21:45.280> to<00:21:45.400> fix<00:21:45.640> it.<00:21:45.960> So,<00:21:46.200> now<00:21:46.400> that 00:21:46.590 --> 00:21:46.600 align:start position:0% Studio to fix it. So, now that 00:21:46.600 --> 00:21:48.150 align:start position:0% Studio to fix it. So, now that everything<00:21:47.040> on<00:21:47.160> my<00:21:47.320> app<00:21:47.560> is<00:21:47.720> functioning 00:21:48.150 --> 00:21:48.160 align:start position:0% everything on my app is functioning 00:21:48.160 --> 00:21:50.270 align:start position:0% everything on my app is functioning properly,<00:21:49.000> and<00:21:49.080> the<00:21:49.160> front<00:21:49.440> end<00:21:49.680> and<00:21:49.800> back<00:21:50.120> end 00:21:50.270 --> 00:21:50.280 align:start position:0% properly, and the front end and back end 00:21:50.280 --> 00:21:51.830 align:start position:0% properly, and the front end and back end are<00:21:50.400> communicating<00:21:51.000> the<00:21:51.080> way<00:21:51.200> they<00:21:51.360> should, 00:21:51.830 --> 00:21:51.840 align:start position:0% are communicating the way they should, 00:21:51.840 --> 00:21:53.790 align:start position:0% are communicating the way they should, that<00:21:52.040> means<00:21:52.520> all<00:21:52.840> four<00:21:53.160> pillars<00:21:53.640> are 00:21:53.790 --> 00:21:53.800 align:start position:0% that means all four pillars are 00:21:53.800 --> 00:21:56.150 align:start position:0% that means all four pillars are established.<00:21:54.560> My<00:21:54.760> app<00:21:55.080> now<00:21:55.240> has<00:21:55.520> a<00:21:55.640> real 00:21:56.150 --> 00:21:56.160 align:start position:0% established. My app now has a real 00:21:56.160 --> 00:21:57.210 align:start position:0% established. My app now has a real working<00:21:56.520> back<00:21:56.840> end. 00:21:57.210 --> 00:21:57.220 align:start position:0% working back end. 00:21:57.220 --> 00:21:57.430 align:start position:0% working back end. >> [music] 00:21:57.430 --> 00:21:57.440 align:start position:0% >> [music] 00:21:57.440 --> 00:21:59.110 align:start position:0% >> [music] >> Now,<00:21:57.640> let's<00:21:57.880> jump<00:21:58.080> into<00:21:58.280> the<00:21:58.360> next<00:21:58.640> step, 00:21:59.110 --> 00:21:59.120 align:start position:0% >> Now, let's jump into the next step, 00:21:59.120 --> 00:22:00.790 align:start position:0% >> Now, let's jump into the next step, which<00:21:59.280> is<00:21:59.400> setting<00:21:59.640> up<00:21:59.800> your<00:21:59.960> admin<00:22:00.240> account. 00:22:00.790 --> 00:22:00.800 align:start position:0% which is setting up your admin account. 00:22:00.800 --> 00:22:02.750 align:start position:0% which is setting up your admin account. Okay,<00:22:01.080> so<00:22:01.320> right<00:22:01.520> now<00:22:01.760> every<00:22:02.040> user<00:22:02.320> who<00:22:02.480> logs 00:22:02.750 --> 00:22:02.760 align:start position:0% Okay, so right now every user who logs 00:22:02.760 --> 00:22:04.750 align:start position:0% Okay, so right now every user who logs into<00:22:02.960> your<00:22:03.160> app<00:22:03.560> sees<00:22:03.840> their<00:22:04.040> own<00:22:04.240> data<00:22:04.600> and 00:22:04.750 --> 00:22:04.760 align:start position:0% into your app sees their own data and 00:22:04.760 --> 00:22:06.590 align:start position:0% into your app sees their own data and their<00:22:04.920> own<00:22:05.120> files.<00:22:05.640> That's<00:22:05.880> exactly<00:22:06.400> how<00:22:06.520> it 00:22:06.590 --> 00:22:06.600 align:start position:0% their own files. That's exactly how it 00:22:06.600 --> 00:22:08.310 align:start position:0% their own files. That's exactly how it should<00:22:06.760> work<00:22:07.000> for<00:22:07.120> your<00:22:07.280> users.<00:22:07.880> But<00:22:08.080> as<00:22:08.200> the 00:22:08.310 --> 00:22:08.320 align:start position:0% should work for your users. But as the 00:22:08.320 --> 00:22:10.390 align:start position:0% should work for your users. But as the person<00:22:08.680> who<00:22:08.840> built<00:22:09.240> and<00:22:09.400> runs<00:22:09.720> the<00:22:09.880> app, 00:22:10.390 --> 00:22:10.400 align:start position:0% person who built and runs the app, 00:22:10.400 --> 00:22:11.670 align:start position:0% person who built and runs the app, you're<00:22:10.520> going<00:22:10.720> to<00:22:10.840> want<00:22:11.080> a<00:22:11.120> way<00:22:11.320> to<00:22:11.440> see 00:22:11.670 --> 00:22:11.680 align:start position:0% you're going to want a way to see 00:22:11.680 --> 00:22:13.430 align:start position:0% you're going to want a way to see everything.<00:22:12.520> You<00:22:12.640> want<00:22:12.760> to<00:22:12.840> see<00:22:13.040> all<00:22:13.200> of<00:22:13.280> your 00:22:13.430 --> 00:22:13.440 align:start position:0% everything. You want to see all of your 00:22:13.440 --> 00:22:15.310 align:start position:0% everything. You want to see all of your users,<00:22:14.040> all<00:22:14.200> of<00:22:14.280> their<00:22:14.400> data,<00:22:15.000> and<00:22:15.120> all<00:22:15.240> of 00:22:15.310 --> 00:22:15.320 align:start position:0% users, all of their data, and all of 00:22:15.320 --> 00:22:17.430 align:start position:0% users, all of their data, and all of their<00:22:15.440> activity<00:22:16.040> in<00:22:16.240> one<00:22:16.480> place.<00:22:17.160> And<00:22:17.240> that's 00:22:17.430 --> 00:22:17.440 align:start position:0% their activity in one place. And that's 00:22:17.440 --> 00:22:19.390 align:start position:0% their activity in one place. And that's what<00:22:17.640> an<00:22:17.800> admin<00:22:18.160> dashboard<00:22:18.680> is<00:22:18.800> for.<00:22:19.240> This 00:22:19.390 --> 00:22:19.400 align:start position:0% what an admin dashboard is for. This 00:22:19.400 --> 00:22:21.230 align:start position:0% what an admin dashboard is for. This applies<00:22:19.760> to<00:22:19.920> any<00:22:20.160> app<00:22:20.400> you<00:22:20.520> build.<00:22:21.000> If<00:22:21.120> you're 00:22:21.230 --> 00:22:21.240 align:start position:0% applies to any app you build. If you're 00:22:21.240 --> 00:22:22.750 align:start position:0% applies to any app you build. If you're running<00:22:21.480> a<00:22:21.520> SaaS<00:22:21.880> tool,<00:22:22.280> you'd<00:22:22.400> want<00:22:22.560> to<00:22:22.600> see 00:22:22.750 --> 00:22:22.760 align:start position:0% running a SaaS tool, you'd want to see 00:22:22.760 --> 00:22:24.190 align:start position:0% running a SaaS tool, you'd want to see all<00:22:22.880> of<00:22:22.960> your<00:22:23.080> customers.<00:22:23.760> If<00:22:23.880> you're<00:22:24.000> running 00:22:24.190 --> 00:22:24.200 align:start position:0% all of your customers. If you're running 00:22:24.200 --> 00:22:25.950 align:start position:0% all of your customers. If you're running a<00:22:24.280> course<00:22:24.600> platform,<00:22:25.320> you'd<00:22:25.480> want<00:22:25.600> to<00:22:25.680> see<00:22:25.840> all 00:22:25.950 --> 00:22:25.960 align:start position:0% a course platform, you'd want to see all 00:22:25.960 --> 00:22:27.830 align:start position:0% a course platform, you'd want to see all of<00:22:26.040> your<00:22:26.160> students.<00:22:26.880> For<00:22:27.040> my<00:22:27.280> app,<00:22:27.600> I<00:22:27.640> want<00:22:27.800> to 00:22:27.830 --> 00:22:27.840 align:start position:0% of your students. For my app, I want to 00:22:27.840 --> 00:22:29.510 align:start position:0% of your students. For my app, I want to be<00:22:27.920> able<00:22:28.080> to<00:22:28.200> log<00:22:28.480> in<00:22:28.720> and<00:22:28.920> see<00:22:29.120> all<00:22:29.280> of<00:22:29.360> my 00:22:29.510 --> 00:22:29.520 align:start position:0% be able to log in and see all of my 00:22:29.520 --> 00:22:31.230 align:start position:0% be able to log in and see all of my clients<00:22:30.080> and<00:22:30.280> everything<00:22:30.600> they've<00:22:30.800> uploaded 00:22:31.230 --> 00:22:31.240 align:start position:0% clients and everything they've uploaded 00:22:31.240 --> 00:22:33.070 align:start position:0% clients and everything they've uploaded from<00:22:31.400> one<00:22:31.640> screen.<00:22:32.280> To<00:22:32.360> set<00:22:32.520> this<00:22:32.680> up,<00:22:32.840> we<00:22:32.920> need 00:22:33.070 --> 00:22:33.080 align:start position:0% from one screen. To set this up, we need 00:22:33.080 --> 00:22:35.070 align:start position:0% from one screen. To set this up, we need to<00:22:33.160> do<00:22:33.320> two<00:22:33.520> things.<00:22:34.200> First,<00:22:34.560> we<00:22:34.640> need<00:22:34.760> to<00:22:34.840> tell 00:22:35.070 --> 00:22:35.080 align:start position:0% to do two things. First, we need to tell 00:22:35.080 --> 00:22:37.270 align:start position:0% to do two things. First, we need to tell AI<00:22:35.280> Studio<00:22:35.840> which<00:22:36.080> account<00:22:36.440> is<00:22:36.520> the<00:22:36.680> admin. 00:22:37.270 --> 00:22:37.280 align:start position:0% AI Studio which account is the admin. 00:22:37.280 --> 00:22:38.790 align:start position:0% AI Studio which account is the admin. And<00:22:37.440> second,<00:22:37.960> we'll<00:22:38.040> need<00:22:38.200> it<00:22:38.320> to<00:22:38.400> build<00:22:38.720> a 00:22:38.790 --> 00:22:38.800 align:start position:0% And second, we'll need it to build a 00:22:38.800 --> 00:22:41.230 align:start position:0% And second, we'll need it to build a separate<00:22:39.240> view<00:22:39.560> that<00:22:39.840> only<00:22:40.080> the<00:22:40.240> admin<00:22:40.600> sees. 00:22:41.230 --> 00:22:41.240 align:start position:0% separate view that only the admin sees. 00:22:41.240 --> 00:22:43.390 align:start position:0% separate view that only the admin sees. To<00:22:41.400> find<00:22:41.680> your<00:22:41.840> admin<00:22:42.080> account's<00:22:42.440> user<00:22:42.760> ID,<00:22:43.320> we 00:22:43.390 --> 00:22:43.400 align:start position:0% To find your admin account's user ID, we 00:22:43.400 --> 00:22:45.830 align:start position:0% To find your admin account's user ID, we have<00:22:43.520> to<00:22:43.600> go<00:22:43.720> back<00:22:43.920> to<00:22:44.000> the<00:22:44.080> Firebase<00:22:44.520> console. 00:22:45.830 --> 00:22:45.840 align:start position:0% have to go back to the Firebase console. 00:22:45.840 --> 00:22:48.950 align:start position:0% have to go back to the Firebase console. So,<00:22:46.080> I'll<00:22:46.280> open<00:22:46.520> that<00:22:46.680> here<00:22:46.800> at<00:22:46.880> the<00:22:47.000> top. 00:22:48.950 --> 00:22:48.960 align:start position:0% So, I'll open that here at the top. 00:22:48.960 --> 00:22:52.790 align:start position:0% So, I'll open that here at the top. Then<00:22:49.120> click<00:22:49.360> into<00:22:49.760> authentication. 00:22:52.790 --> 00:22:52.800 align:start position:0% 00:22:52.800 --> 00:22:54.350 align:start position:0% And<00:22:52.840> then<00:22:52.960> make<00:22:53.160> sure<00:22:53.440> you're<00:22:53.600> in<00:22:53.760> the<00:22:53.920> users 00:22:54.350 --> 00:22:54.360 align:start position:0% And then make sure you're in the users 00:22:54.360 --> 00:22:56.030 align:start position:0% And then make sure you're in the users tab.<00:22:55.040> Here<00:22:55.240> you'll<00:22:55.360> see<00:22:55.480> the<00:22:55.600> account<00:22:55.920> that 00:22:56.030 --> 00:22:56.040 align:start position:0% tab. Here you'll see the account that 00:22:56.040 --> 00:22:57.670 align:start position:0% tab. Here you'll see the account that you<00:22:56.120> created<00:22:56.480> earlier.<00:22:57.200> And<00:22:57.280> then<00:22:57.400> you'll<00:22:57.520> see 00:22:57.670 --> 00:22:57.680 align:start position:0% you created earlier. And then you'll see 00:22:57.680 --> 00:22:59.870 align:start position:0% you created earlier. And then you'll see the<00:22:57.880> user<00:22:58.240> ID<00:22:58.560> right<00:22:58.760> here.<00:22:59.440> Click<00:22:59.680> on<00:22:59.760> the 00:22:59.870 --> 00:22:59.880 align:start position:0% the user ID right here. Click on the 00:22:59.880 --> 00:23:02.390 align:start position:0% the user ID right here. Click on the copy<00:23:00.160> button. 00:23:02.390 --> 00:23:02.400 align:start position:0% copy button. 00:23:02.400 --> 00:23:06.350 align:start position:0% copy button. And<00:23:02.440> then<00:23:02.600> switch<00:23:02.960> back<00:23:03.200> over<00:23:03.480> to<00:23:03.640> AI<00:23:03.840> Studio. 00:23:06.350 --> 00:23:06.360 align:start position:0% And then switch back over to AI Studio. 00:23:06.360 --> 00:23:09.550 align:start position:0% And then switch back over to AI Studio. I'll<00:23:06.480> minimize<00:23:06.960> the<00:23:07.040> preview<00:23:07.360> panel<00:23:07.640> here. 00:23:09.550 --> 00:23:09.560 align:start position:0% I'll minimize the preview panel here. 00:23:09.560 --> 00:23:11.070 align:start position:0% I'll minimize the preview panel here. And<00:23:09.600> then<00:23:09.720> here<00:23:10.000> we'll<00:23:10.120> send<00:23:10.320> another<00:23:10.600> prompt 00:23:11.070 --> 00:23:11.080 align:start position:0% And then here we'll send another prompt 00:23:11.080 --> 00:23:13.030 align:start position:0% And then here we'll send another prompt to<00:23:11.200> AI<00:23:11.400> Studio.<00:23:12.080> I<00:23:12.200> have<00:23:12.360> a<00:23:12.440> prompt<00:23:12.800> that<00:23:12.960> you 00:23:13.030 --> 00:23:13.040 align:start position:0% to AI Studio. I have a prompt that you 00:23:13.040 --> 00:23:14.710 align:start position:0% to AI Studio. I have a prompt that you can<00:23:13.160> copy<00:23:13.480> and<00:23:13.600> paste<00:23:13.880> for<00:23:14.000> this<00:23:14.360> that's<00:23:14.600> in 00:23:14.710 --> 00:23:14.720 align:start position:0% can copy and paste for this that's in 00:23:14.720 --> 00:23:16.430 align:start position:0% can copy and paste for this that's in the<00:23:14.840> guide<00:23:15.200> linked<00:23:15.480> in<00:23:15.560> the<00:23:15.640> description.<00:23:16.360> So, 00:23:16.430 --> 00:23:16.440 align:start position:0% the guide linked in the description. So, 00:23:16.440 --> 00:23:17.710 align:start position:0% the guide linked in the description. So, I'm<00:23:16.520> going<00:23:16.640> to<00:23:16.680> copy<00:23:17.000> that<00:23:17.160> over<00:23:17.440> from<00:23:17.600> the 00:23:17.710 --> 00:23:17.720 align:start position:0% I'm going to copy that over from the 00:23:17.720 --> 00:23:18.750 align:start position:0% I'm going to copy that over from the guide. 00:23:18.750 --> 00:23:18.760 align:start position:0% guide. 00:23:18.760 --> 00:23:21.310 align:start position:0% guide. And<00:23:18.800> then<00:23:18.920> I'll<00:23:19.000> paste<00:23:19.320> that<00:23:19.520> in<00:23:19.840> right<00:23:20.040> here. 00:23:21.310 --> 00:23:21.320 align:start position:0% And then I'll paste that in right here. 00:23:21.320 --> 00:23:22.990 align:start position:0% And then I'll paste that in right here. I'll<00:23:21.400> scroll<00:23:21.680> to<00:23:21.760> the<00:23:21.880> top<00:23:22.160> here.<00:23:22.720> And<00:23:22.840> right 00:23:22.990 --> 00:23:23.000 align:start position:0% I'll scroll to the top here. And right 00:23:23.000 --> 00:23:25.270 align:start position:0% I'll scroll to the top here. And right here<00:23:23.280> I<00:23:23.400> already<00:23:23.680> have<00:23:23.960> my<00:23:24.200> admin<00:23:24.520> user<00:23:24.840> ID 00:23:25.270 --> 00:23:25.280 align:start position:0% here I already have my admin user ID 00:23:25.280 --> 00:23:26.990 align:start position:0% here I already have my admin user ID pasted<00:23:25.720> in.<00:23:26.080> But<00:23:26.240> you'll<00:23:26.360> want<00:23:26.480> to<00:23:26.560> replace 00:23:26.990 --> 00:23:27.000 align:start position:0% pasted in. But you'll want to replace 00:23:27.000 --> 00:23:29.150 align:start position:0% pasted in. But you'll want to replace this<00:23:27.400> with<00:23:27.600> a<00:23:27.640> user<00:23:28.000> ID<00:23:28.240> that<00:23:28.400> you<00:23:28.520> copied<00:23:29.000> from 00:23:29.150 --> 00:23:29.160 align:start position:0% this with a user ID that you copied from 00:23:29.160 --> 00:23:31.110 align:start position:0% this with a user ID that you copied from Firebase<00:23:29.760> a<00:23:29.840> moment<00:23:30.080> ago.<00:23:30.560> And<00:23:30.680> I<00:23:30.760> also<00:23:31.000> want 00:23:31.110 --> 00:23:31.120 align:start position:0% Firebase a moment ago. And I also want 00:23:31.120 --> 00:23:32.790 align:start position:0% Firebase a moment ago. And I also want to<00:23:31.160> mention<00:23:31.440> here<00:23:31.720> that<00:23:31.920> this<00:23:32.200> prompt<00:23:32.600> for 00:23:32.790 --> 00:23:32.800 align:start position:0% to mention here that this prompt for 00:23:32.800 --> 00:23:35.070 align:start position:0% to mention here that this prompt for adding<00:23:33.120> an<00:23:33.280> admin<00:23:33.600> dashboard<00:23:34.160> to<00:23:34.240> your<00:23:34.440> app<00:23:34.920> is 00:23:35.070 --> 00:23:35.080 align:start position:0% adding an admin dashboard to your app is 00:23:35.080 --> 00:23:37.110 align:start position:0% adding an admin dashboard to your app is just<00:23:35.320> a<00:23:35.360> starting<00:23:35.760> point.<00:23:36.320> Absolutely<00:23:36.880> feel 00:23:37.110 --> 00:23:37.120 align:start position:0% just a starting point. Absolutely feel 00:23:37.120 --> 00:23:39.070 align:start position:0% just a starting point. Absolutely feel free<00:23:37.400> to<00:23:37.600> adjust<00:23:37.960> this<00:23:38.120> prompt.<00:23:38.840> You<00:23:38.920> can 00:23:39.070 --> 00:23:39.080 align:start position:0% free to adjust this prompt. You can 00:23:39.080 --> 00:23:41.390 align:start position:0% free to adjust this prompt. You can easily<00:23:39.480> just<00:23:39.920> remove<00:23:40.560> or<00:23:40.840> add<00:23:41.080> different 00:23:41.390 --> 00:23:41.400 align:start position:0% easily just remove or add different 00:23:41.400 --> 00:23:43.070 align:start position:0% easily just remove or add different things<00:23:41.720> to<00:23:41.880> it<00:23:42.080> depending<00:23:42.400> on<00:23:42.520> what<00:23:42.680> you<00:23:42.840> want 00:23:43.070 --> 00:23:43.080 align:start position:0% things to it depending on what you want 00:23:43.080 --> 00:23:44.790 align:start position:0% things to it depending on what you want in<00:23:43.200> your<00:23:43.360> admin<00:23:43.640> dashboard.<00:23:44.360> So,<00:23:44.520> with<00:23:44.600> this 00:23:44.790 --> 00:23:44.800 align:start position:0% in your admin dashboard. So, with this 00:23:44.800 --> 00:23:46.030 align:start position:0% in your admin dashboard. So, with this prompt<00:23:45.080> ready<00:23:45.240> to<00:23:45.360> go,<00:23:45.760> I'm<00:23:45.800> going<00:23:45.920> to<00:23:46.000> go 00:23:46.030 --> 00:23:46.040 align:start position:0% prompt ready to go, I'm going to go 00:23:46.040 --> 00:23:48.510 align:start position:0% prompt ready to go, I'm going to go ahead<00:23:46.160> and<00:23:46.240> send<00:23:46.480> it. 00:23:48.510 --> 00:23:48.520 align:start position:0% ahead and send it. 00:23:48.520 --> 00:23:49.670 align:start position:0% ahead and send it. And<00:23:48.560> then<00:23:48.680> we'll<00:23:48.800> wait<00:23:48.960> here<00:23:49.160> for<00:23:49.280> a<00:23:49.360> few<00:23:49.520> more 00:23:49.670 --> 00:23:49.680 align:start position:0% And then we'll wait here for a few more 00:23:49.680 --> 00:23:54.150 align:start position:0% And then we'll wait here for a few more moments<00:23:50.240> and<00:23:50.360> let<00:23:50.560> AI<00:23:50.720> Studio<00:23:51.080> do<00:23:51.200> its<00:23:51.360> thing. 00:23:54.150 --> 00:23:54.160 align:start position:0% 00:23:54.160 --> 00:23:55.390 align:start position:0% All<00:23:54.240> right,<00:23:54.480> awesome.<00:23:54.880> And<00:23:54.960> now<00:23:55.080> the<00:23:55.160> next 00:23:55.390 --> 00:23:55.400 align:start position:0% All right, awesome. And now the next 00:23:55.400 --> 00:23:57.110 align:start position:0% All right, awesome. And now the next thing<00:23:55.560> that<00:23:55.680> we<00:23:55.760> need<00:23:55.960> to<00:23:56.080> do<00:23:56.560> is<00:23:56.720> head<00:23:56.880> back 00:23:57.110 --> 00:23:57.120 align:start position:0% thing that we need to do is head back 00:23:57.120 --> 00:23:58.990 align:start position:0% thing that we need to do is head back over<00:23:57.320> to<00:23:57.440> the<00:23:57.520> Firebase<00:23:58.000> console<00:23:58.680> and<00:23:58.800> make 00:23:58.990 --> 00:23:59.000 align:start position:0% over to the Firebase console and make 00:23:59.000 --> 00:24:00.590 align:start position:0% over to the Firebase console and make sure<00:23:59.360> that<00:23:59.480> the<00:23:59.560> security<00:24:00.080> rules<00:24:00.440> were 00:24:00.590 --> 00:24:00.600 align:start position:0% sure that the security rules were 00:24:00.600 --> 00:24:02.230 align:start position:0% sure that the security rules were updated.<00:24:01.240> Let's<00:24:01.440> go<00:24:01.560> back<00:24:01.800> over<00:24:02.000> to<00:24:02.120> the 00:24:02.230 --> 00:24:02.240 align:start position:0% updated. Let's go back over to the 00:24:02.240 --> 00:24:05.550 align:start position:0% updated. Let's go back over to the Firebase<00:24:02.680> console. 00:24:05.550 --> 00:24:05.560 align:start position:0% 00:24:05.560 --> 00:24:07.830 align:start position:0% And<00:24:05.600> then<00:24:05.800> go<00:24:05.960> down<00:24:06.480> to<00:24:06.800> databases<00:24:07.600> and 00:24:07.830 --> 00:24:07.840 align:start position:0% And then go down to databases and 00:24:07.840 --> 00:24:10.870 align:start position:0% And then go down to databases and storage<00:24:08.680> and<00:24:08.920> find<00:24:09.400> Firestore.<00:24:10.560> We'll<00:24:10.640> click 00:24:10.870 --> 00:24:10.880 align:start position:0% storage and find Firestore. We'll click 00:24:10.880 --> 00:24:13.910 align:start position:0% storage and find Firestore. We'll click in<00:24:10.960> right<00:24:11.120> here. 00:24:13.910 --> 00:24:13.920 align:start position:0% 00:24:13.920 --> 00:24:17.790 align:start position:0% And<00:24:14.080> then<00:24:14.240> click<00:24:14.480> into<00:24:14.840> security. 00:24:17.790 --> 00:24:17.800 align:start position:0% 00:24:17.800 --> 00:24:20.230 align:start position:0% And<00:24:17.880> then<00:24:18.040> if<00:24:18.200> I<00:24:18.280> scroll<00:24:18.800> down<00:24:19.160> right<00:24:19.440> here, 00:24:20.230 --> 00:24:20.240 align:start position:0% And then if I scroll down right here, 00:24:20.240 --> 00:24:22.110 align:start position:0% And then if I scroll down right here, you'll<00:24:20.400> see<00:24:20.560> this<00:24:20.760> block<00:24:21.120> right<00:24:21.280> here 00:24:22.110 --> 00:24:22.120 align:start position:0% you'll see this block right here 00:24:22.120 --> 00:24:24.830 align:start position:0% you'll see this block right here that<00:24:22.280> says<00:24:22.600> function<00:24:23.240> is<00:24:23.560> admin.<00:24:24.360> And<00:24:24.480> then<00:24:24.720> on 00:24:24.830 --> 00:24:24.840 align:start position:0% that says function is admin. And then on 00:24:24.840 --> 00:24:27.110 align:start position:0% that says function is admin. And then on the<00:24:24.920> next<00:24:25.240> line<00:24:25.560> it<00:24:25.720> has<00:24:26.000> my<00:24:26.160> user<00:24:26.560> ID<00:24:26.880> right 00:24:27.110 --> 00:24:27.120 align:start position:0% the next line it has my user ID right 00:24:27.120 --> 00:24:28.710 align:start position:0% the next line it has my user ID right here.<00:24:27.640> This<00:24:27.840> is<00:24:27.960> the<00:24:28.080> line<00:24:28.360> that<00:24:28.480> tells 00:24:28.710 --> 00:24:28.720 align:start position:0% here. This is the line that tells 00:24:28.720 --> 00:24:31.150 align:start position:0% here. This is the line that tells Firebase<00:24:29.360> which<00:24:29.600> account<00:24:29.960> has<00:24:30.160> admin<00:24:30.520> access. 00:24:31.150 --> 00:24:31.160 align:start position:0% Firebase which account has admin access. 00:24:31.160 --> 00:24:33.110 align:start position:0% Firebase which account has admin access. If<00:24:31.400> your<00:24:31.640> user<00:24:31.960> ID<00:24:32.240> is<00:24:32.400> in<00:24:32.520> there,<00:24:32.840> then<00:24:33.000> you're 00:24:33.110 --> 00:24:33.120 align:start position:0% If your user ID is in there, then you're 00:24:33.120 --> 00:24:35.310 align:start position:0% If your user ID is in there, then you're good<00:24:33.280> to<00:24:33.400> go.<00:24:33.800> Now,<00:24:33.920> in<00:24:34.000> most<00:24:34.240> cases<00:24:34.640> AI<00:24:34.880> Studio 00:24:35.310 --> 00:24:35.320 align:start position:0% good to go. Now, in most cases AI Studio 00:24:35.320 --> 00:24:37.270 align:start position:0% good to go. Now, in most cases AI Studio updates<00:24:35.720> these<00:24:35.960> rules<00:24:36.280> automatically<00:24:37.120> when 00:24:37.270 --> 00:24:37.280 align:start position:0% updates these rules automatically when 00:24:37.280 --> 00:24:39.070 align:start position:0% updates these rules automatically when you<00:24:37.360> send<00:24:37.600> the<00:24:37.760> admin<00:24:38.080> prompt.<00:24:38.600> But<00:24:38.840> if<00:24:38.960> for 00:24:39.070 --> 00:24:39.080 align:start position:0% you send the admin prompt. But if for 00:24:39.080 --> 00:24:41.150 align:start position:0% you send the admin prompt. But if for some<00:24:39.320> reason<00:24:39.800> you<00:24:39.960> don't<00:24:40.240> see<00:24:40.360> your<00:24:40.520> user<00:24:40.840> ID 00:24:41.150 --> 00:24:41.160 align:start position:0% some reason you don't see your user ID 00:24:41.160 --> 00:24:43.270 align:start position:0% some reason you don't see your user ID in<00:24:41.280> the<00:24:41.400> rules<00:24:42.040> or<00:24:42.280> your<00:24:42.440> admin<00:24:42.720> dashboard 00:24:43.270 --> 00:24:43.280 align:start position:0% in the rules or your admin dashboard 00:24:43.280 --> 00:24:45.190 align:start position:0% in the rules or your admin dashboard isn't<00:24:43.560> showing<00:24:43.840> all<00:24:43.960> the<00:24:44.080> users,<00:24:44.880> just<00:24:45.080> go 00:24:45.190 --> 00:24:45.200 align:start position:0% isn't showing all the users, just go 00:24:45.200 --> 00:24:47.110 align:start position:0% isn't showing all the users, just go back<00:24:45.400> to<00:24:45.520> AI<00:24:45.720> Studio<00:24:46.440> and<00:24:46.560> tell<00:24:46.720> it<00:24:46.800> to<00:24:46.920> make 00:24:47.110 --> 00:24:47.120 align:start position:0% back to AI Studio and tell it to make 00:24:47.120 --> 00:24:49.110 align:start position:0% back to AI Studio and tell it to make sure<00:24:47.400> that<00:24:47.560> the<00:24:47.720> Firestore<00:24:48.280> security<00:24:48.760> rules 00:24:49.110 --> 00:24:49.120 align:start position:0% sure that the Firestore security rules 00:24:49.120 --> 00:24:51.110 align:start position:0% sure that the Firestore security rules were<00:24:49.240> updated.<00:24:50.000> So,<00:24:50.160> for<00:24:50.280> example<00:24:50.680> here,<00:24:51.000> I'll 00:24:51.110 --> 00:24:51.120 align:start position:0% were updated. So, for example here, I'll 00:24:51.120 --> 00:24:54.350 align:start position:0% were updated. So, for example here, I'll switch<00:24:51.400> back<00:24:51.640> over<00:24:51.920> to<00:24:52.040> AI<00:24:52.240> Studio. 00:24:54.350 --> 00:24:54.360 align:start position:0% switch back over to AI Studio. 00:24:54.360 --> 00:24:56.590 align:start position:0% switch back over to AI Studio. And<00:24:54.440> then<00:24:54.600> I'll<00:24:54.760> send<00:24:55.040> this<00:24:55.200> prompt. 00:24:56.590 --> 00:24:56.600 align:start position:0% And then I'll send this prompt. 00:24:56.600 --> 00:25:01.190 align:start position:0% And then I'll send this prompt. Make<00:24:57.040> sure<00:24:57.720> the<00:24:58.160> Firebase<00:24:59.040> security<00:25:00.480> rules 00:25:01.190 --> 00:25:01.200 align:start position:0% Make sure the Firebase security rules 00:25:01.200 --> 00:25:03.870 align:start position:0% Make sure the Firebase security rules are<00:25:01.640> fully<00:25:02.440> updated. 00:25:03.870 --> 00:25:03.880 align:start position:0% are fully updated. 00:25:03.880 --> 00:25:06.830 align:start position:0% are fully updated. Ensure<00:25:04.600> my<00:25:05.040> user<00:25:05.640> ID 00:25:06.830 --> 00:25:06.840 align:start position:0% Ensure my user ID 00:25:06.840 --> 00:25:11.350 align:start position:0% Ensure my user ID is<00:25:07.080> present,<00:25:08.040> and<00:25:08.360> that<00:25:08.840> I<00:25:09.080> have<00:25:10.040> access<00:25:10.920> to 00:25:11.350 --> 00:25:11.360 align:start position:0% is present, and that I have access to 00:25:11.360 --> 00:25:13.790 align:start position:0% is present, and that I have access to all<00:25:12.000> data.<00:25:12.600> So,<00:25:12.720> in<00:25:12.800> my<00:25:12.920> case,<00:25:13.200> my<00:25:13.320> security 00:25:13.790 --> 00:25:13.800 align:start position:0% all data. So, in my case, my security 00:25:13.800 --> 00:25:15.870 align:start position:0% all data. So, in my case, my security rules<00:25:14.160> are<00:25:14.400> already<00:25:14.720> updated,<00:25:15.360> but<00:25:15.560> I'll<00:25:15.680> send 00:25:15.870 --> 00:25:15.880 align:start position:0% rules are already updated, but I'll send 00:25:15.880 --> 00:25:20.070 align:start position:0% rules are already updated, but I'll send this<00:25:16.000> prompt<00:25:16.360> anyways. 00:25:20.070 --> 00:25:20.080 align:start position:0% 00:25:20.080 --> 00:25:21.270 align:start position:0% Awesome.<00:25:20.400> So,<00:25:20.520> now<00:25:20.680> after<00:25:20.880> setting<00:25:21.120> that 00:25:21.270 --> 00:25:21.280 align:start position:0% Awesome. So, now after setting that 00:25:21.280 --> 00:25:23.070 align:start position:0% Awesome. So, now after setting that prompt,<00:25:21.680> your<00:25:21.880> security<00:25:22.320> rules<00:25:22.760> should<00:25:22.960> be 00:25:23.070 --> 00:25:23.080 align:start position:0% prompt, your security rules should be 00:25:23.080 --> 00:25:24.990 align:start position:0% prompt, your security rules should be good<00:25:23.280> to<00:25:23.360> go.<00:25:23.800> If<00:25:23.960> you<00:25:24.040> want<00:25:24.200> to<00:25:24.280> double-check, 00:25:24.990 --> 00:25:25.000 align:start position:0% good to go. If you want to double-check, 00:25:25.000 --> 00:25:26.870 align:start position:0% good to go. If you want to double-check, you<00:25:25.080> can<00:25:25.240> always<00:25:25.520> go<00:25:25.680> back<00:25:25.920> into<00:25:26.120> Firestore 00:25:26.870 --> 00:25:26.880 align:start position:0% you can always go back into Firestore 00:25:26.880 --> 00:25:28.710 align:start position:0% you can always go back into Firestore and<00:25:27.000> look<00:25:27.200> at<00:25:27.320> the<00:25:27.400> security<00:25:27.760> tab,<00:25:28.320> but<00:25:28.560> AI 00:25:28.710 --> 00:25:28.720 align:start position:0% and look at the security tab, but AI 00:25:28.720 --> 00:25:29.950 align:start position:0% and look at the security tab, but AI Studio<00:25:29.160> should<00:25:29.360> be<00:25:29.440> able<00:25:29.600> to<00:25:29.680> handle 00:25:29.950 --> 00:25:29.960 align:start position:0% Studio should be able to handle 00:25:29.960 --> 00:25:31.590 align:start position:0% Studio should be able to handle everything<00:25:30.320> for<00:25:30.520> you<00:25:30.640> here.<00:25:31.160> Now,<00:25:31.280> the<00:25:31.400> next 00:25:31.590 --> 00:25:31.600 align:start position:0% everything for you here. Now, the next 00:25:31.600 --> 00:25:33.230 align:start position:0% everything for you here. Now, the next thing<00:25:31.720> we<00:25:31.800> need<00:25:31.920> to<00:25:32.040> do<00:25:32.320> is<00:25:32.480> take<00:25:32.680> care<00:25:33.000> of<00:25:33.160> the 00:25:33.230 --> 00:25:33.240 align:start position:0% thing we need to do is take care of the 00:25:33.240 --> 00:25:35.110 align:start position:0% thing we need to do is take care of the storage<00:25:33.680> rules.<00:25:34.120> These<00:25:34.360> are<00:25:34.520> separate<00:25:35.000> from 00:25:35.110 --> 00:25:35.120 align:start position:0% storage rules. These are separate from 00:25:35.120 --> 00:25:36.750 align:start position:0% storage rules. These are separate from the<00:25:35.200> database<00:25:35.560> security<00:25:35.960> rules,<00:25:36.480> and<00:25:36.600> in<00:25:36.640> my 00:25:36.750 --> 00:25:36.760 align:start position:0% the database security rules, and in my 00:25:36.760 --> 00:25:38.630 align:start position:0% the database security rules, and in my experience,<00:25:37.520> they<00:25:37.640> don't<00:25:37.920> always<00:25:38.240> sync<00:25:38.480> up 00:25:38.630 --> 00:25:38.640 align:start position:0% experience, they don't always sync up 00:25:38.640 --> 00:25:40.390 align:start position:0% experience, they don't always sync up automatically<00:25:39.240> the<00:25:39.360> same<00:25:39.680> way.<00:25:40.120> This<00:25:40.280> is 00:25:40.390 --> 00:25:40.400 align:start position:0% automatically the same way. This is 00:25:40.400 --> 00:25:42.230 align:start position:0% automatically the same way. This is important<00:25:40.880> because<00:25:41.160> the<00:25:41.320> storage<00:25:41.720> rules<00:25:42.080> are 00:25:42.230 --> 00:25:42.240 align:start position:0% important because the storage rules are 00:25:42.240 --> 00:25:44.110 align:start position:0% important because the storage rules are what<00:25:42.400> control<00:25:42.880> who<00:25:43.040> can<00:25:43.200> actually<00:25:43.640> view<00:25:44.000> and 00:25:44.110 --> 00:25:44.120 align:start position:0% what control who can actually view and 00:25:44.120 --> 00:25:46.510 align:start position:0% what control who can actually view and access<00:25:44.560> the<00:25:44.680> files<00:25:45.200> that<00:25:45.360> users<00:25:45.680> upload.<00:25:46.360> So, 00:25:46.510 --> 00:25:46.520 align:start position:0% access the files that users upload. So, 00:25:46.520 --> 00:25:47.830 align:start position:0% access the files that users upload. So, if<00:25:46.600> your<00:25:46.720> admin<00:25:47.000> account<00:25:47.320> doesn't<00:25:47.640> have 00:25:47.830 --> 00:25:47.840 align:start position:0% if your admin account doesn't have 00:25:47.840 --> 00:25:49.750 align:start position:0% if your admin account doesn't have access<00:25:48.320> in<00:25:48.480> the<00:25:48.560> storage<00:25:48.920> rules,<00:25:49.560> you<00:25:49.600> won't 00:25:49.750 --> 00:25:49.760 align:start position:0% access in the storage rules, you won't 00:25:49.760 --> 00:25:51.550 align:start position:0% access in the storage rules, you won't be<00:25:49.840> able<00:25:49.960> to<00:25:50.080> see<00:25:50.320> other<00:25:50.560> users'<00:25:50.920> files<00:25:51.400> from 00:25:51.550 --> 00:25:51.560 align:start position:0% be able to see other users' files from 00:25:51.560 --> 00:25:53.350 align:start position:0% be able to see other users' files from the<00:25:51.640> admin<00:25:51.960> dashboard<00:25:52.680> once<00:25:52.920> the<00:25:53.040> app<00:25:53.240> is 00:25:53.350 --> 00:25:53.360 align:start position:0% the admin dashboard once the app is 00:25:53.360 --> 00:25:55.310 align:start position:0% the admin dashboard once the app is deployed.<00:25:54.040> So,<00:25:54.200> we'll<00:25:54.400> update<00:25:54.800> the<00:25:54.880> storage 00:25:55.310 --> 00:25:55.320 align:start position:0% deployed. So, we'll update the storage 00:25:55.320 --> 00:25:56.790 align:start position:0% deployed. So, we'll update the storage rules<00:25:55.600> manually<00:25:56.200> just<00:25:56.360> to<00:25:56.440> make<00:25:56.600> sure 00:25:56.790 --> 00:25:56.800 align:start position:0% rules manually just to make sure 00:25:56.800 --> 00:25:58.670 align:start position:0% rules manually just to make sure everything<00:25:57.200> works<00:25:57.440> properly. 00:25:58.670 --> 00:25:58.680 align:start position:0% everything works properly. 00:25:58.680 --> 00:26:00.310 align:start position:0% everything works properly. So,<00:25:58.840> let's<00:25:59.040> go<00:25:59.160> back<00:25:59.400> over<00:25:59.600> to<00:25:59.720> our<00:25:59.840> Firebase 00:26:00.310 --> 00:26:00.320 align:start position:0% So, let's go back over to our Firebase 00:26:00.320 --> 00:26:02.230 align:start position:0% So, let's go back over to our Firebase console, 00:26:02.230 --> 00:26:02.240 align:start position:0% console, 00:26:02.240 --> 00:26:06.270 align:start position:0% console, click<00:26:02.480> into<00:26:02.720> storage, 00:26:06.270 --> 00:26:06.280 align:start position:0% 00:26:06.280 --> 00:26:09.710 align:start position:0% then<00:26:06.440> click<00:26:06.640> into<00:26:06.880> rules, 00:26:09.710 --> 00:26:09.720 align:start position:0% 00:26:09.720 --> 00:26:11.230 align:start position:0% then<00:26:09.880> we'll<00:26:10.040> highlight<00:26:10.520> everything<00:26:11.040> right 00:26:11.230 --> 00:26:11.240 align:start position:0% then we'll highlight everything right 00:26:11.240 --> 00:26:12.510 align:start position:0% then we'll highlight everything right here, 00:26:12.510 --> 00:26:12.520 align:start position:0% here, 00:26:12.520 --> 00:26:14.790 align:start position:0% here, and<00:26:12.640> delete<00:26:12.960> this. 00:26:14.790 --> 00:26:14.800 align:start position:0% and delete this. 00:26:14.800 --> 00:26:16.070 align:start position:0% and delete this. And<00:26:14.880> then<00:26:15.040> once<00:26:15.200> again,<00:26:15.520> if<00:26:15.640> you<00:26:15.720> check<00:26:15.960> the 00:26:16.070 --> 00:26:16.080 align:start position:0% And then once again, if you check the 00:26:16.080 --> 00:26:18.190 align:start position:0% And then once again, if you check the guide<00:26:16.600> linked<00:26:16.840> in<00:26:16.920> the<00:26:17.000> description,<00:26:17.720> I<00:26:17.840> have 00:26:18.190 --> 00:26:18.200 align:start position:0% guide linked in the description, I have 00:26:18.200 --> 00:26:19.870 align:start position:0% guide linked in the description, I have copy<00:26:18.560> and<00:26:18.720> paste<00:26:18.960> storage<00:26:19.320> rules<00:26:19.720> that<00:26:19.840> you 00:26:19.870 --> 00:26:19.880 align:start position:0% copy and paste storage rules that you 00:26:19.880 --> 00:26:21.590 align:start position:0% copy and paste storage rules that you can<00:26:20.040> replace<00:26:20.440> right<00:26:20.640> here.<00:26:21.200> So,<00:26:21.360> I'm<00:26:21.400> going<00:26:21.520> to 00:26:21.590 --> 00:26:21.600 align:start position:0% can replace right here. So, I'm going to 00:26:21.600 --> 00:26:23.790 align:start position:0% can replace right here. So, I'm going to copy<00:26:21.880> that<00:26:22.120> over<00:26:22.320> from<00:26:22.520> the<00:26:22.600> guide, 00:26:23.790 --> 00:26:23.800 align:start position:0% copy that over from the guide, 00:26:23.800 --> 00:26:26.750 align:start position:0% copy that over from the guide, then<00:26:23.920> I'll<00:26:24.040> paste<00:26:24.360> it<00:26:24.480> in<00:26:24.600> right<00:26:24.800> here, 00:26:26.750 --> 00:26:26.760 align:start position:0% then I'll paste it in right here, 00:26:26.760 --> 00:26:29.070 align:start position:0% then I'll paste it in right here, and<00:26:26.800> then<00:26:26.960> make<00:26:27.200> sure<00:26:27.520> here<00:26:28.000> at<00:26:28.120> the<00:26:28.240> very<00:26:28.560> end, 00:26:29.070 --> 00:26:29.080 align:start position:0% and then make sure here at the very end, 00:26:29.080 --> 00:26:31.950 align:start position:0% and then make sure here at the very end, you<00:26:29.320> update<00:26:29.880> your<00:26:30.120> user<00:26:30.480> ID<00:26:30.960> right<00:26:31.240> here.<00:26:31.840> So, 00:26:31.950 --> 00:26:31.960 align:start position:0% you update your user ID right here. So, 00:26:31.960 --> 00:26:34.110 align:start position:0% you update your user ID right here. So, just<00:26:32.160> highlight<00:26:32.560> this, 00:26:34.110 --> 00:26:34.120 align:start position:0% just highlight this, 00:26:34.120 --> 00:26:36.670 align:start position:0% just highlight this, and<00:26:34.200> replace<00:26:34.600> it<00:26:34.680> with<00:26:34.800> your<00:26:35.000> actual<00:26:35.360> user<00:26:35.640> ID. 00:26:36.670 --> 00:26:36.680 align:start position:0% and replace it with your actual user ID. 00:26:36.680 --> 00:26:40.790 align:start position:0% and replace it with your actual user ID. Once<00:26:36.840> you<00:26:36.960> have<00:26:37.120> that<00:26:37.320> in,<00:26:37.640> click<00:26:37.880> on<00:26:38.000> publish, 00:26:40.790 --> 00:26:40.800 align:start position:0% 00:26:40.800 --> 00:26:44.350 align:start position:0% then<00:26:40.920> we'll<00:26:41.080> switch<00:26:41.320> back<00:26:41.520> to<00:26:41.640> AI<00:26:41.840> Studio, 00:26:44.350 --> 00:26:44.360 align:start position:0% then we'll switch back to AI Studio, 00:26:44.360 --> 00:26:46.310 align:start position:0% then we'll switch back to AI Studio, and<00:26:44.480> before<00:26:44.720> continuing,<00:26:45.520> wait<00:26:45.840> 1<00:26:46.040> to<00:26:46.160> 2 00:26:46.310 --> 00:26:46.320 align:start position:0% and before continuing, wait 1 to 2 00:26:46.320 --> 00:26:48.270 align:start position:0% and before continuing, wait 1 to 2 minutes<00:26:46.680> for<00:26:46.800> everything<00:26:47.160> to<00:26:47.280> sync<00:26:47.520> up. 00:26:48.270 --> 00:26:48.280 align:start position:0% minutes for everything to sync up. 00:26:48.280 --> 00:26:49.910 align:start position:0% minutes for everything to sync up. Awesome.<00:26:48.560> And<00:26:48.640> now<00:26:48.760> with<00:26:48.880> that<00:26:49.120> done,<00:26:49.520> we<00:26:49.680> know 00:26:49.910 --> 00:26:49.920 align:start position:0% Awesome. And now with that done, we know 00:26:49.920 --> 00:26:51.390 align:start position:0% Awesome. And now with that done, we know that<00:26:50.080> the<00:26:50.200> storage<00:26:50.600> rules<00:26:50.960> are<00:26:51.080> set<00:26:51.280> up 00:26:51.390 --> 00:26:51.400 align:start position:0% that the storage rules are set up 00:26:51.400 --> 00:26:53.030 align:start position:0% that the storage rules are set up correctly,<00:26:52.120> and<00:26:52.320> everything<00:26:52.760> will<00:26:52.880> work 00:26:53.030 --> 00:26:53.040 align:start position:0% correctly, and everything will work 00:26:53.040 --> 00:26:54.870 align:start position:0% correctly, and everything will work properly<00:26:53.560> when<00:26:53.680> we<00:26:53.800> deploy.<00:26:54.480> Next,<00:26:54.760> let's 00:26:54.870 --> 00:26:54.880 align:start position:0% properly when we deploy. Next, let's 00:26:54.880 --> 00:26:56.150 align:start position:0% properly when we deploy. Next, let's take<00:26:55.040> a<00:26:55.080> look<00:26:55.280> at<00:26:55.360> what<00:26:55.480> our<00:26:55.600> admin<00:26:55.880> panel 00:26:56.150 --> 00:26:56.160 align:start position:0% take a look at what our admin panel 00:26:56.160 --> 00:26:57.830 align:start position:0% take a look at what our admin panel actually<00:26:56.480> looks<00:26:56.720> like.<00:26:57.120> I'll<00:26:57.280> start<00:26:57.480> by<00:26:57.600> going 00:26:57.830 --> 00:26:57.840 align:start position:0% actually looks like. I'll start by going 00:26:57.840 --> 00:26:59.390 align:start position:0% actually looks like. I'll start by going to<00:26:57.920> the<00:26:58.040> top<00:26:58.320> here<00:26:58.640> and<00:26:58.760> refreshing<00:26:59.280> this 00:26:59.390 --> 00:26:59.400 align:start position:0% to the top here and refreshing this 00:26:59.400 --> 00:27:02.230 align:start position:0% to the top here and refreshing this page. 00:27:02.230 --> 00:27:02.240 align:start position:0% 00:27:02.240 --> 00:27:03.670 align:start position:0% And<00:27:02.320> then<00:27:02.480> I'll<00:27:02.600> maximize<00:27:03.280> the<00:27:03.360> preview 00:27:03.670 --> 00:27:03.680 align:start position:0% And then I'll maximize the preview 00:27:03.680 --> 00:27:05.230 align:start position:0% And then I'll maximize the preview panel. 00:27:05.230 --> 00:27:05.240 align:start position:0% panel. 00:27:05.240 --> 00:27:06.670 align:start position:0% panel. And<00:27:05.360> now<00:27:05.520> this<00:27:05.680> is<00:27:05.800> what<00:27:05.920> our<00:27:06.040> admin<00:27:06.360> control 00:27:06.670 --> 00:27:06.680 align:start position:0% And now this is what our admin control 00:27:06.680 --> 00:27:08.590 align:start position:0% And now this is what our admin control panel<00:27:06.960> looks<00:27:07.160> like.<00:27:07.760> I<00:27:07.840> can<00:27:08.000> see<00:27:08.160> my<00:27:08.320> total 00:27:08.590 --> 00:27:08.600 align:start position:0% panel looks like. I can see my total 00:27:08.600 --> 00:27:11.030 align:start position:0% panel looks like. I can see my total users,<00:27:09.360> the<00:27:09.480> amount<00:27:09.720> of<00:27:09.840> files<00:27:10.200> I<00:27:10.280> have,<00:27:10.920> and 00:27:11.030 --> 00:27:11.040 align:start position:0% users, the amount of files I have, and 00:27:11.040 --> 00:27:12.790 align:start position:0% users, the amount of files I have, and then<00:27:11.160> the<00:27:11.280> server<00:27:11.600> status.<00:27:12.440> And<00:27:12.520> right<00:27:12.680> here 00:27:12.790 --> 00:27:12.800 align:start position:0% then the server status. And right here 00:27:12.800 --> 00:27:14.670 align:start position:0% then the server status. And right here I'm<00:27:12.920> able<00:27:13.040> to<00:27:13.160> see<00:27:13.320> my<00:27:13.520> user<00:27:13.800> account.<00:27:14.440> Now<00:27:14.560> for 00:27:14.670 --> 00:27:14.680 align:start position:0% I'm able to see my user account. Now for 00:27:14.680 --> 00:27:16.390 align:start position:0% I'm able to see my user account. Now for my<00:27:14.840> admin<00:27:15.120> control<00:27:15.480> panel,<00:27:16.000> I<00:27:16.080> want<00:27:16.200> to<00:27:16.280> make 00:27:16.390 --> 00:27:16.400 align:start position:0% my admin control panel, I want to make 00:27:16.400 --> 00:27:18.030 align:start position:0% my admin control panel, I want to make sure<00:27:16.600> that<00:27:16.720> it's<00:27:16.920> actually<00:27:17.280> tracking<00:27:17.840> new 00:27:18.030 --> 00:27:18.040 align:start position:0% sure that it's actually tracking new 00:27:18.040 --> 00:27:20.270 align:start position:0% sure that it's actually tracking new users<00:27:18.480> as<00:27:18.680> well.<00:27:19.120> And<00:27:19.200> then<00:27:19.320> I'm<00:27:19.440> able<00:27:19.680> to<00:27:19.960> read 00:27:20.270 --> 00:27:20.280 align:start position:0% users as well. And then I'm able to read 00:27:20.280 --> 00:27:21.870 align:start position:0% users as well. And then I'm able to read and<00:27:20.440> download<00:27:20.800> their<00:27:20.920> files.<00:27:21.560> So<00:27:21.680> I'm<00:27:21.760> going 00:27:21.870 --> 00:27:21.880 align:start position:0% and download their files. So I'm going 00:27:21.880 --> 00:27:24.990 align:start position:0% and download their files. So I'm going to<00:27:21.920> click<00:27:22.120> on<00:27:22.280> sign<00:27:22.640> out<00:27:22.800> in<00:27:22.880> the<00:27:22.960> bottom<00:27:23.240> left. 00:27:24.990 --> 00:27:25.000 align:start position:0% to click on sign out in the bottom left. 00:27:25.000 --> 00:27:27.710 align:start position:0% to click on sign out in the bottom left. And<00:27:25.080> I'm<00:27:25.160> going<00:27:25.280> to<00:27:25.360> create<00:27:25.680> another<00:27:25.960> account. 00:27:27.710 --> 00:27:27.720 align:start position:0% And I'm going to create another account. 00:27:27.720 --> 00:27:30.230 align:start position:0% And I'm going to create another account. Fill<00:27:27.880> out<00:27:27.960> this<00:27:28.120> info<00:27:28.400> right<00:27:28.560> here. 00:27:30.230 --> 00:27:30.240 align:start position:0% Fill out this info right here. 00:27:30.240 --> 00:27:33.670 align:start position:0% Fill out this info right here. Then<00:27:30.440> I'll<00:27:30.640> sign<00:27:30.880> up<00:27:31.040> right<00:27:31.160> here. 00:27:33.670 --> 00:27:33.680 align:start position:0% 00:27:33.680 --> 00:27:34.790 align:start position:0% And<00:27:33.720> now<00:27:33.800> I'm<00:27:33.880> going<00:27:34.000> to<00:27:34.040> upload<00:27:34.360> that<00:27:34.520> test 00:27:34.790 --> 00:27:34.800 align:start position:0% And now I'm going to upload that test 00:27:34.800 --> 00:27:36.990 align:start position:0% And now I'm going to upload that test file<00:27:35.120> again. 00:27:36.990 --> 00:27:37.000 align:start position:0% file again. 00:27:37.000 --> 00:27:40.870 align:start position:0% file again. Double<00:27:37.200> click<00:27:37.400> on<00:27:37.520> it<00:27:37.600> here. 00:27:40.870 --> 00:27:40.880 align:start position:0% 00:27:40.880 --> 00:27:42.350 align:start position:0% Then<00:27:41.000> here<00:27:41.120> at<00:27:41.160> the<00:27:41.280> bottom<00:27:41.680> I<00:27:41.720> can<00:27:41.880> see<00:27:42.120> it<00:27:42.200> was 00:27:42.350 --> 00:27:42.360 align:start position:0% Then here at the bottom I can see it was 00:27:42.360 --> 00:27:43.910 align:start position:0% Then here at the bottom I can see it was uploaded.<00:27:43.080> So<00:27:43.200> now<00:27:43.360> I'm<00:27:43.400> going<00:27:43.520> to<00:27:43.600> sign<00:27:43.840> out 00:27:43.910 --> 00:27:43.920 align:start position:0% uploaded. So now I'm going to sign out 00:27:43.920 --> 00:27:45.590 align:start position:0% uploaded. So now I'm going to sign out of<00:27:44.000> this<00:27:44.160> account<00:27:44.640> and<00:27:44.760> log<00:27:45.000> back<00:27:45.240> into<00:27:45.440> my 00:27:45.590 --> 00:27:45.600 align:start position:0% of this account and log back into my 00:27:45.600 --> 00:27:50.150 align:start position:0% of this account and log back into my admin<00:27:45.920> account. 00:27:50.150 --> 00:27:50.160 align:start position:0% 00:27:50.160 --> 00:27:53.590 align:start position:0% Sign<00:27:50.440> back<00:27:50.680> in<00:27:50.800> here. 00:27:53.590 --> 00:27:53.600 align:start position:0% 00:27:53.600 --> 00:27:55.390 align:start position:0% And<00:27:53.680> here<00:27:53.880> as<00:27:54.000> you<00:27:54.080> can<00:27:54.200> see,<00:27:54.600> I<00:27:54.680> now<00:27:54.920> have<00:27:55.160> two 00:27:55.390 --> 00:27:55.400 align:start position:0% And here as you can see, I now have two 00:27:55.400 --> 00:27:57.350 align:start position:0% And here as you can see, I now have two users.<00:27:56.120> And<00:27:56.360> I<00:27:56.400> can<00:27:56.560> also<00:27:56.880> see<00:27:57.120> that<00:27:57.240> they 00:27:57.350 --> 00:27:57.360 align:start position:0% users. And I can also see that they 00:27:57.360 --> 00:27:59.230 align:start position:0% users. And I can also see that they uploaded<00:27:57.840> one<00:27:58.040> file.<00:27:58.560> So<00:27:58.680> if<00:27:58.760> I<00:27:58.840> click<00:27:59.080> on 00:27:59.230 --> 00:27:59.240 align:start position:0% uploaded one file. So if I click on 00:27:59.240 --> 00:28:01.750 align:start position:0% uploaded one file. So if I click on manage<00:27:59.560> data, 00:28:01.750 --> 00:28:01.760 align:start position:0% manage data, 00:28:01.760 --> 00:28:03.190 align:start position:0% manage data, and<00:28:01.840> I'm<00:28:01.920> able<00:28:02.080> to<00:28:02.160> see<00:28:02.320> that<00:28:02.560> test<00:28:02.840> file<00:28:03.120> that 00:28:03.190 --> 00:28:03.200 align:start position:0% and I'm able to see that test file that 00:28:03.200 --> 00:28:05.070 align:start position:0% and I'm able to see that test file that we<00:28:03.360> uploaded<00:28:03.760> to<00:28:03.840> this<00:28:04.000> account.<00:28:04.720> And<00:28:04.880> this<00:28:05.000> is 00:28:05.070 --> 00:28:05.080 align:start position:0% we uploaded to this account. And this is 00:28:05.080 --> 00:28:07.310 align:start position:0% we uploaded to this account. And this is the<00:28:05.200> power<00:28:05.680> of<00:28:05.840> having<00:28:06.120> an<00:28:06.240> admin<00:28:06.560> console.<00:28:07.240> I 00:28:07.310 --> 00:28:07.320 align:start position:0% the power of having an admin console. I 00:28:07.320 --> 00:28:09.550 align:start position:0% the power of having an admin console. I can<00:28:07.480> see<00:28:07.640> all<00:28:07.800> of<00:28:07.920> my<00:28:08.080> users,<00:28:08.720> their<00:28:08.920> emails, 00:28:09.550 --> 00:28:09.560 align:start position:0% can see all of my users, their emails, 00:28:09.560 --> 00:28:11.430 align:start position:0% can see all of my users, their emails, when<00:28:09.760> they<00:28:09.840> signed<00:28:10.200> up,<00:28:10.600> and<00:28:10.720> how<00:28:10.800> many<00:28:11.000> files 00:28:11.430 --> 00:28:11.440 align:start position:0% when they signed up, and how many files 00:28:11.440 --> 00:28:13.110 align:start position:0% when they signed up, and how many files each<00:28:11.640> one<00:28:11.760> has<00:28:11.920> uploaded.<00:28:12.600> No<00:28:12.720> matter<00:28:13.000> how 00:28:13.110 --> 00:28:13.120 align:start position:0% each one has uploaded. No matter how 00:28:13.120 --> 00:28:14.990 align:start position:0% each one has uploaded. No matter how many<00:28:13.400> users<00:28:13.760> sign<00:28:13.920> up<00:28:14.040> for<00:28:14.160> your<00:28:14.320> app,<00:28:14.840> you'll 00:28:14.990 --> 00:28:15.000 align:start position:0% many users sign up for your app, you'll 00:28:15.000 --> 00:28:16.630 align:start position:0% many users sign up for your app, you'll always<00:28:15.280> have<00:28:15.440> a<00:28:15.520> clear<00:28:15.960> overview<00:28:16.480> of 00:28:16.630 --> 00:28:16.640 align:start position:0% always have a clear overview of 00:28:16.640 --> 00:28:18.150 align:start position:0% always have a clear overview of everything<00:28:16.960> that's<00:28:17.160> happening<00:28:17.720> within<00:28:18.000> your 00:28:18.150 --> 00:28:18.160 align:start position:0% everything that's happening within your 00:28:18.160 --> 00:28:20.470 align:start position:0% everything that's happening within your admin<00:28:18.480> control<00:28:18.800> panel.<00:28:19.320> And<00:28:19.480> also,<00:28:20.040> every<00:28:20.320> one 00:28:20.470 --> 00:28:20.480 align:start position:0% admin control panel. And also, every one 00:28:20.480 --> 00:28:22.070 align:start position:0% admin control panel. And also, every one of<00:28:20.560> your<00:28:20.680> users'<00:28:20.960> experiences<00:28:21.760> stays 00:28:22.070 --> 00:28:22.080 align:start position:0% of your users' experiences stays 00:28:22.080 --> 00:28:23.870 align:start position:0% of your users' experiences stays completely<00:28:22.520> private.<00:28:23.160> They're<00:28:23.360> only<00:28:23.600> able<00:28:23.760> to 00:28:23.870 --> 00:28:23.880 align:start position:0% completely private. They're only able to 00:28:23.880 --> 00:28:25.910 align:start position:0% completely private. They're only able to see<00:28:24.160> their<00:28:24.440> own<00:28:24.600> data.<00:28:25.200> And<00:28:25.320> now<00:28:25.480> this<00:28:25.680> means 00:28:25.910 --> 00:28:25.920 align:start position:0% see their own data. And now this means 00:28:25.920 --> 00:28:28.030 align:start position:0% see their own data. And now this means that<00:28:26.040> our<00:28:26.200> app<00:28:26.480> is<00:28:26.720> fully<00:28:27.080> built<00:28:27.320> and<00:28:27.440> working. 00:28:28.030 --> 00:28:28.040 align:start position:0% that our app is fully built and working. 00:28:28.040 --> 00:28:30.270 align:start position:0% that our app is fully built and working. We've<00:28:28.200> got<00:28:28.400> user<00:28:28.680> accounts,<00:28:29.360> a<00:28:29.440> database, 00:28:30.270 --> 00:28:30.280 align:start position:0% We've got user accounts, a database, 00:28:30.280 --> 00:28:32.790 align:start position:0% We've got user accounts, a database, file<00:28:30.560> storage,<00:28:31.280> security<00:28:31.760> rules,<00:28:32.480> and<00:28:32.680> an 00:28:32.790 --> 00:28:32.800 align:start position:0% file storage, security rules, and an 00:28:32.800 --> 00:28:34.990 align:start position:0% file storage, security rules, and an admin<00:28:33.080> dashboard.<00:28:34.160> Now<00:28:34.360> we<00:28:34.480> need<00:28:34.600> to<00:28:34.680> get<00:28:34.800> this 00:28:34.990 --> 00:28:35.000 align:start position:0% admin dashboard. Now we need to get this 00:28:35.000 --> 00:28:37.150 align:start position:0% admin dashboard. Now we need to get this thing<00:28:35.200> live<00:28:35.520> on<00:28:35.640> the<00:28:35.760> internet.<00:28:36.440> So<00:28:36.600> now<00:28:36.920> let's 00:28:37.150 --> 00:28:37.160 align:start position:0% thing live on the internet. So now let's 00:28:37.160 --> 00:28:39.350 align:start position:0% thing live on the internet. So now let's save<00:28:37.360> it<00:28:37.480> to<00:28:37.600> GitHub<00:28:38.080> and<00:28:38.240> deploy<00:28:38.600> it.<00:28:39.120> So<00:28:39.320> I'm 00:28:39.350 --> 00:28:39.360 align:start position:0% save it to GitHub and deploy it. So I'm 00:28:39.360 --> 00:28:42.230 align:start position:0% save it to GitHub and deploy it. So I'm going<00:28:39.480> to<00:28:39.560> minimize<00:28:40.040> this<00:28:40.240> here. 00:28:42.230 --> 00:28:42.240 align:start position:0% going to minimize this here. 00:28:42.240 --> 00:28:43.750 align:start position:0% going to minimize this here. Then<00:28:42.400> click<00:28:42.600> on<00:28:42.800> settings<00:28:43.200> here<00:28:43.320> in<00:28:43.400> the<00:28:43.480> top 00:28:43.750 --> 00:28:43.760 align:start position:0% Then click on settings here in the top 00:28:43.760 --> 00:28:45.670 align:start position:0% Then click on settings here in the top right. 00:28:45.670 --> 00:28:45.680 align:start position:0% right. 00:28:45.680 --> 00:28:48.430 align:start position:0% right. Click<00:28:45.920> on<00:28:46.000> this<00:28:46.200> arrow. 00:28:48.430 --> 00:28:48.440 align:start position:0% Click on this arrow. 00:28:48.440 --> 00:28:51.190 align:start position:0% Click on this arrow. And<00:28:48.680> click<00:28:48.960> GitHub. 00:28:51.190 --> 00:28:51.200 align:start position:0% And click GitHub. 00:28:51.200 --> 00:28:55.230 align:start position:0% And click GitHub. Click<00:28:51.440> on<00:28:51.720> sign<00:28:52.000> in<00:28:52.120> to<00:28:52.200> GitHub<00:28:52.520> to<00:28:52.640> continue. 00:28:55.230 --> 00:28:55.240 align:start position:0% 00:28:55.240 --> 00:28:56.590 align:start position:0% And<00:28:55.400> if<00:28:55.480> you<00:28:55.560> have<00:28:55.680> an<00:28:55.760> existing<00:28:56.320> GitHub 00:28:56.590 --> 00:28:56.600 align:start position:0% And if you have an existing GitHub 00:28:56.600 --> 00:28:58.750 align:start position:0% And if you have an existing GitHub account,<00:28:57.160> you<00:28:57.200> can<00:28:57.360> log<00:28:57.640> in<00:28:57.760> right<00:28:57.960> here.<00:28:58.600> But 00:28:58.750 --> 00:28:58.760 align:start position:0% account, you can log in right here. But 00:28:58.760 --> 00:29:00.030 align:start position:0% account, you can log in right here. But if<00:28:58.840> you<00:28:58.920> don't<00:28:59.080> have<00:28:59.200> an<00:28:59.280> account<00:28:59.600> yet,<00:29:00.000> you 00:29:00.030 --> 00:29:00.040 align:start position:0% if you don't have an account yet, you 00:29:00.040 --> 00:29:02.030 align:start position:0% if you don't have an account yet, you can<00:29:00.200> sign<00:29:00.440> up<00:29:00.560> down<00:29:00.800> here.<00:29:01.320> In<00:29:01.440> my<00:29:01.560> case,<00:29:01.920> I'll 00:29:02.030 --> 00:29:02.040 align:start position:0% can sign up down here. In my case, I'll 00:29:02.040 --> 00:29:05.590 align:start position:0% can sign up down here. In my case, I'll click<00:29:02.280> on<00:29:02.600> continue<00:29:03.080> with<00:29:03.240> Google. 00:29:05.590 --> 00:29:05.600 align:start position:0% click on continue with Google. 00:29:05.600 --> 00:29:10.310 align:start position:0% click on continue with Google. I'll<00:29:05.760> log<00:29:06.000> in<00:29:06.120> with<00:29:06.240> my<00:29:06.360> account<00:29:06.680> right<00:29:06.840> here. 00:29:10.310 --> 00:29:10.320 align:start position:0% 00:29:10.320 --> 00:29:11.470 align:start position:0% Here<00:29:10.520> you're<00:29:10.680> able<00:29:10.880> to<00:29:11.000> choose<00:29:11.320> your 00:29:11.470 --> 00:29:11.480 align:start position:0% Here you're able to choose your 00:29:11.480 --> 00:29:13.310 align:start position:0% Here you're able to choose your username. 00:29:13.310 --> 00:29:13.320 align:start position:0% username. 00:29:13.320 --> 00:29:18.110 align:start position:0% username. You<00:29:13.400> can<00:29:13.520> choose<00:29:13.800> your<00:29:13.920> country<00:29:14.360> or<00:29:14.560> region. 00:29:18.110 --> 00:29:18.120 align:start position:0% 00:29:18.120 --> 00:29:20.190 align:start position:0% And<00:29:18.200> then<00:29:18.400> scroll<00:29:18.680> down<00:29:19.200> and<00:29:19.360> click<00:29:19.600> on<00:29:19.840> create 00:29:20.190 --> 00:29:20.200 align:start position:0% And then scroll down and click on create 00:29:20.200 --> 00:29:23.670 align:start position:0% And then scroll down and click on create account. 00:29:23.670 --> 00:29:23.680 align:start position:0% 00:29:23.680 --> 00:29:25.510 align:start position:0% Then<00:29:23.800> here<00:29:23.960> just<00:29:24.160> scroll<00:29:24.440> down. 00:29:25.510 --> 00:29:25.520 align:start position:0% Then here just scroll down. 00:29:25.520 --> 00:29:30.990 align:start position:0% Then here just scroll down. And<00:29:25.760> click<00:29:26.200> install<00:29:26.760> and<00:29:26.880> authorize. 00:29:30.990 --> 00:29:31.000 align:start position:0% 00:29:31.000 --> 00:29:32.190 align:start position:0% And<00:29:31.080> now<00:29:31.200> here<00:29:31.440> we'll<00:29:31.520> need<00:29:31.640> to<00:29:31.760> create<00:29:32.120> a 00:29:32.190 --> 00:29:32.200 align:start position:0% And now here we'll need to create a 00:29:32.200 --> 00:29:34.870 align:start position:0% And now here we'll need to create a repository.<00:29:33.200> A<00:29:33.280> repository<00:29:34.040> is<00:29:34.200> just<00:29:34.400> a<00:29:34.440> place 00:29:34.870 --> 00:29:34.880 align:start position:0% repository. A repository is just a place 00:29:34.880 --> 00:29:37.190 align:start position:0% repository. A repository is just a place on<00:29:35.040> GitHub<00:29:35.680> where<00:29:35.840> your<00:29:36.000> website<00:29:36.600> or<00:29:36.760> web<00:29:36.960> app 00:29:37.190 --> 00:29:37.200 align:start position:0% on GitHub where your website or web app 00:29:37.200 --> 00:29:38.670 align:start position:0% on GitHub where your website or web app is<00:29:37.320> going<00:29:37.440> to<00:29:37.480> be<00:29:37.600> stored.<00:29:38.200> We'll<00:29:38.320> use<00:29:38.520> this 00:29:38.670 --> 00:29:38.680 align:start position:0% is going to be stored. We'll use this 00:29:38.680 --> 00:29:40.310 align:start position:0% is going to be stored. We'll use this later<00:29:39.000> to<00:29:39.120> actually<00:29:39.480> deploy<00:29:39.840> it<00:29:40.000> onto<00:29:40.240> the 00:29:40.310 --> 00:29:40.320 align:start position:0% later to actually deploy it onto the 00:29:40.320 --> 00:29:42.470 align:start position:0% later to actually deploy it onto the internet.<00:29:40.880> So<00:29:41.000> here<00:29:41.160> I'll<00:29:41.240> just<00:29:41.440> say 00:29:42.470 --> 00:29:42.480 align:start position:0% internet. So here I'll just say 00:29:42.480 --> 00:29:45.910 align:start position:0% internet. So here I'll just say client<00:29:43.360> vault<00:29:44.360> web<00:29:44.680> app.<00:29:45.480> And<00:29:45.600> then<00:29:45.720> for<00:29:45.840> the 00:29:45.910 --> 00:29:45.920 align:start position:0% client vault web app. And then for the 00:29:45.920 --> 00:29:49.070 align:start position:0% client vault web app. And then for the description,<00:29:46.400> I'll<00:29:46.480> just<00:29:46.680> put<00:29:47.440> tutorial<00:29:48.760> web 00:29:49.070 --> 00:29:49.080 align:start position:0% description, I'll just put tutorial web 00:29:49.080 --> 00:29:50.910 align:start position:0% description, I'll just put tutorial web app.<00:29:49.720> And<00:29:49.840> for<00:29:49.960> the<00:29:50.040> visibility,<00:29:50.800> I'd 00:29:50.910 --> 00:29:50.920 align:start position:0% app. And for the visibility, I'd 00:29:50.920 --> 00:29:52.710 align:start position:0% app. And for the visibility, I'd recommend<00:29:51.240> just<00:29:51.360> keeping<00:29:51.640> this<00:29:51.840> as<00:29:52.000> private. 00:29:52.710 --> 00:29:52.720 align:start position:0% recommend just keeping this as private. 00:29:52.720 --> 00:29:54.510 align:start position:0% recommend just keeping this as private. Go<00:29:52.880> down<00:29:53.240> and<00:29:53.360> click<00:29:53.600> on<00:29:53.800> create<00:29:54.200> GitHub 00:29:54.510 --> 00:29:54.520 align:start position:0% Go down and click on create GitHub 00:29:54.520 --> 00:29:59.510 align:start position:0% Go down and click on create GitHub repository. 00:29:59.510 --> 00:29:59.520 align:start position:0% 00:29:59.520 --> 00:30:01.390 align:start position:0% Then<00:29:59.640> you'll<00:29:59.800> scroll<00:30:00.120> down<00:30:00.360> to<00:30:00.440> the<00:30:00.520> bottom 00:30:01.390 --> 00:30:01.400 align:start position:0% Then you'll scroll down to the bottom 00:30:01.400 --> 00:30:06.910 align:start position:0% Then you'll scroll down to the bottom and<00:30:01.640> click<00:30:02.080> stage<00:30:02.600> and<00:30:02.720> commit<00:30:03.000> all<00:30:03.120> changes. 00:30:06.910 --> 00:30:06.920 align:start position:0% 00:30:06.920 --> 00:30:08.270 align:start position:0% All<00:30:07.000> right,<00:30:07.160> and<00:30:07.240> now<00:30:07.360> we've<00:30:07.520> saved<00:30:07.920> our<00:30:08.080> web 00:30:08.270 --> 00:30:08.280 align:start position:0% All right, and now we've saved our web 00:30:08.280 --> 00:30:10.110 align:start position:0% All right, and now we've saved our web app<00:30:08.560> to<00:30:08.760> GitHub.<00:30:09.400> That<00:30:09.600> means<00:30:09.880> that<00:30:10.000> we're 00:30:10.110 --> 00:30:10.120 align:start position:0% app to GitHub. That means that we're 00:30:10.120 --> 00:30:11.630 align:start position:0% app to GitHub. That means that we're ready<00:30:10.360> to<00:30:10.480> deploy. 00:30:11.630 --> 00:30:11.640 align:start position:0% ready to deploy. 00:30:11.640 --> 00:30:13.190 align:start position:0% ready to deploy. All<00:30:11.720> right,<00:30:11.960> so<00:30:12.080> our<00:30:12.200> project<00:30:12.680> is<00:30:12.800> saved<00:30:13.120> to 00:30:13.190 --> 00:30:13.200 align:start position:0% All right, so our project is saved to 00:30:13.200 --> 00:30:14.830 align:start position:0% All right, so our project is saved to GitHub.<00:30:13.840> That's<00:30:14.080> great,<00:30:14.370> [music]<00:30:14.520> but<00:30:14.680> how<00:30:14.760> do 00:30:14.830 --> 00:30:14.840 align:start position:0% GitHub. That's great, [music] but how do 00:30:14.840 --> 00:30:16.550 align:start position:0% GitHub. That's great, [music] but how do we<00:30:15.000> actually<00:30:15.440> get<00:30:15.600> it<00:30:15.760> on<00:30:15.880> the<00:30:16.000> internet<00:30:16.440> where 00:30:16.550 --> 00:30:16.560 align:start position:0% we actually get it on the internet where 00:30:16.560 --> 00:30:18.390 align:start position:0% we actually get it on the internet where people<00:30:16.800> can<00:30:16.960> visit<00:30:17.240> it?<00:30:17.680> Well,<00:30:18.040> we<00:30:18.160> need 00:30:18.390 --> 00:30:18.400 align:start position:0% people can visit it? Well, we need 00:30:18.400 --> 00:30:19.950 align:start position:0% people can visit it? Well, we need hosting.<00:30:19.040> And<00:30:19.120> if<00:30:19.200> you're<00:30:19.280> not<00:30:19.440> familiar<00:30:19.840> with 00:30:19.950 --> 00:30:19.960 align:start position:0% hosting. And if you're not familiar with 00:30:19.960 --> 00:30:21.910 align:start position:0% hosting. And if you're not familiar with hosting,<00:30:20.560> it's<00:30:20.720> basically<00:30:21.200> renting<00:30:21.520> space<00:30:21.800> on 00:30:21.910 --> 00:30:21.920 align:start position:0% hosting, it's basically renting space on 00:30:21.920 --> 00:30:24.470 align:start position:0% hosting, it's basically renting space on a<00:30:21.960> server<00:30:22.480> that<00:30:22.600> stays<00:30:22.880> online<00:30:23.120> 24/7,<00:30:24.200> so<00:30:24.280> your 00:30:24.470 --> 00:30:24.480 align:start position:0% a server that stays online 24/7, so your 00:30:24.480 --> 00:30:26.150 align:start position:0% a server that stays online 24/7, so your app<00:30:24.680> is<00:30:24.880> always<00:30:25.120> accessible<00:30:25.880> whenever 00:30:26.150 --> 00:30:26.160 align:start position:0% app is always accessible whenever 00:30:26.160 --> 00:30:28.070 align:start position:0% app is always accessible whenever someone<00:30:26.440> visits<00:30:26.800> it.<00:30:27.120> This<00:30:27.280> is<00:30:27.400> the<00:30:27.520> one<00:30:27.760> part 00:30:28.070 --> 00:30:28.080 align:start position:0% someone visits it. This is the one part 00:30:28.080 --> 00:30:30.150 align:start position:0% someone visits it. This is the one part of<00:30:28.160> the<00:30:28.280> setup<00:30:28.800> that<00:30:28.960> isn't<00:30:29.240> free,<00:30:29.800> but<00:30:30.000> it's 00:30:30.150 --> 00:30:30.160 align:start position:0% of the setup that isn't free, but it's 00:30:30.160 --> 00:30:32.150 align:start position:0% of the setup that isn't free, but it's necessary<00:30:30.920> because<00:30:31.160> without<00:30:31.480> it,<00:30:31.720> your<00:30:31.920> app 00:30:32.150 --> 00:30:32.160 align:start position:0% necessary because without it, your app 00:30:32.160 --> 00:30:33.790 align:start position:0% necessary because without it, your app doesn't<00:30:32.440> have<00:30:32.560> a<00:30:32.640> home<00:30:33.000> on<00:30:33.120> the<00:30:33.200> internet. 00:30:33.790 --> 00:30:33.800 align:start position:0% doesn't have a home on the internet. 00:30:33.800 --> 00:30:35.350 align:start position:0% doesn't have a home on the internet. There<00:30:34.000> are<00:30:34.160> many<00:30:34.400> different<00:30:34.720> hosting<00:30:35.040> options 00:30:35.350 --> 00:30:35.360 align:start position:0% There are many different hosting options 00:30:35.360 --> 00:30:37.390 align:start position:0% There are many different hosting options out<00:30:35.520> there,<00:30:36.000> but<00:30:36.120> the<00:30:36.240> easiest<00:30:36.680> way<00:30:36.880> I<00:30:37.000> found 00:30:37.390 --> 00:30:37.400 align:start position:0% out there, but the easiest way I found 00:30:37.400 --> 00:30:39.670 align:start position:0% out there, but the easiest way I found for<00:30:37.600> AI<00:30:37.800> studio<00:30:38.160> projects<00:30:38.600> specifically<00:30:39.520> is 00:30:39.670 --> 00:30:39.680 align:start position:0% for AI studio projects specifically is 00:30:39.680 --> 00:30:41.710 align:start position:0% for AI studio projects specifically is Hostinger.<00:30:40.440> Hostinger<00:30:40.920> connects<00:30:41.240> directly 00:30:41.710 --> 00:30:41.720 align:start position:0% Hostinger. Hostinger connects directly 00:30:41.720 --> 00:30:43.470 align:start position:0% Hostinger. Hostinger connects directly to<00:30:41.840> GitHub,<00:30:42.400> so<00:30:42.560> every<00:30:43.040> time<00:30:43.200> you<00:30:43.280> push<00:30:43.440> a 00:30:43.470 --> 00:30:43.480 align:start position:0% to GitHub, so every time you push a 00:30:43.480 --> 00:30:45.510 align:start position:0% to GitHub, so every time you push a change<00:30:43.880> to<00:30:43.960> your<00:30:44.080> project,<00:30:44.760> it<00:30:44.960> automatically 00:30:45.510 --> 00:30:45.520 align:start position:0% change to your project, it automatically 00:30:45.520 --> 00:30:46.910 align:start position:0% change to your project, it automatically redeploys<00:30:46.040> your<00:30:46.200> app.<00:30:46.466> [music]<00:30:46.680> You<00:30:46.760> don't 00:30:46.910 --> 00:30:46.920 align:start position:0% redeploys your app. [music] You don't 00:30:46.920 --> 00:30:48.550 align:start position:0% redeploys your app. [music] You don't have<00:30:47.040> to<00:30:47.120> worry<00:30:47.360> about<00:30:47.600> manually<00:30:48.000> updating 00:30:48.550 --> 00:30:48.560 align:start position:0% have to worry about manually updating 00:30:48.560 --> 00:30:50.510 align:start position:0% have to worry about manually updating anything.<00:30:49.240> Hostinger<00:30:49.720> also<00:30:50.000> supports<00:30:50.440> the 00:30:50.510 --> 00:30:50.520 align:start position:0% anything. Hostinger also supports the 00:30:50.520 --> 00:30:52.670 align:start position:0% anything. Hostinger also supports the technology<00:30:51.280> that<00:30:51.520> AI<00:30:51.680> Studio<00:30:52.040> projects<00:30:52.480> run 00:30:52.670 --> 00:30:52.680 align:start position:0% technology that AI Studio projects run 00:30:52.680 --> 00:30:53.910 align:start position:0% technology that AI Studio projects run on<00:30:52.840> right<00:30:53.040> out<00:30:53.120> of<00:30:53.200> the<00:30:53.280> box,<00:30:53.671> [music]<00:30:53.800> so 00:30:53.910 --> 00:30:53.920 align:start position:0% on right out of the box, [music] so 00:30:53.920 --> 00:30:55.710 align:start position:0% on right out of the box, [music] so there's<00:30:54.120> no<00:30:54.280> extra<00:30:54.560> configuration<00:30:55.280> needed<00:30:55.560> on 00:30:55.710 --> 00:30:55.720 align:start position:0% there's no extra configuration needed on 00:30:55.720 --> 00:30:57.870 align:start position:0% there's no extra configuration needed on your<00:30:55.920> end.<00:30:56.440> You'll<00:30:56.640> also<00:30:56.920> get<00:30:57.200> a<00:30:57.240> free<00:30:57.480> domain 00:30:57.870 --> 00:30:57.880 align:start position:0% your end. You'll also get a free domain 00:30:57.880 --> 00:30:59.550 align:start position:0% your end. You'll also get a free domain name<00:30:58.120> for<00:30:58.240> the<00:30:58.320> first<00:30:58.640> year,<00:30:59.040> so<00:30:59.160> your<00:30:59.360> app 00:30:59.550 --> 00:30:59.560 align:start position:0% name for the first year, so your app 00:30:59.560 --> 00:31:01.790 align:start position:0% name for the first year, so your app gets<00:30:59.800> a<00:30:59.880> real<00:31:00.160> professional<00:31:00.720> URL<00:31:01.440> instead<00:31:01.720> of 00:31:01.790 --> 00:31:01.800 align:start position:0% gets a real professional URL instead of 00:31:01.800 --> 00:31:03.910 align:start position:0% gets a real professional URL instead of just<00:31:02.000> some<00:31:02.200> random<00:31:02.640> string<00:31:02.920> of<00:31:03.000> characters. 00:31:03.910 --> 00:31:03.920 align:start position:0% just some random string of characters. 00:31:03.920 --> 00:31:05.950 align:start position:0% just some random string of characters. And<00:31:04.200> the<00:31:04.280> pricing<00:31:04.760> is<00:31:04.920> really<00:31:05.240> affordable<00:31:05.800> for 00:31:05.950 --> 00:31:05.960 align:start position:0% And the pricing is really affordable for 00:31:05.960 --> 00:31:07.710 align:start position:0% And the pricing is really affordable for what<00:31:06.120> you're<00:31:06.240> getting.<00:31:06.920> So<00:31:07.080> the<00:31:07.200> next<00:31:07.480> step 00:31:07.710 --> 00:31:07.720 align:start position:0% what you're getting. So the next step 00:31:07.720 --> 00:31:09.790 align:start position:0% what you're getting. So the next step here<00:31:08.040> is<00:31:08.200> to<00:31:08.320> sign<00:31:08.520> up<00:31:08.640> for<00:31:08.760> Hostinger.<00:31:09.600> To<00:31:09.680> get 00:31:09.790 --> 00:31:09.800 align:start position:0% here is to sign up for Hostinger. To get 00:31:09.800 --> 00:31:11.670 align:start position:0% here is to sign up for Hostinger. To get an<00:31:09.880> exclusive<00:31:10.840> discount,<00:31:11.000> go<00:31:11.120> to<00:31:11.200> this<00:31:11.400> link 00:31:11.670 --> 00:31:11.680 align:start position:0% an exclusive discount, go to this link 00:31:11.680 --> 00:31:13.750 align:start position:0% an exclusive discount, go to this link on<00:31:11.840> screen<00:31:12.160> right<00:31:12.320> here,<00:31:12.920> or<00:31:13.080> click<00:31:13.360> the<00:31:13.440> first 00:31:13.750 --> 00:31:13.760 align:start position:0% on screen right here, or click the first 00:31:13.760 --> 00:31:15.630 align:start position:0% on screen right here, or click the first link<00:31:14.040> in<00:31:14.120> the<00:31:14.200> video<00:31:14.400> description.<00:31:15.280> That<00:31:15.440> link 00:31:15.630 --> 00:31:15.640 align:start position:0% link in the video description. That link 00:31:15.640 --> 00:31:17.190 align:start position:0% link in the video description. That link will<00:31:15.760> take<00:31:15.920> you<00:31:15.960> to<00:31:16.040> the<00:31:16.120> correct<00:31:16.360> setup<00:31:16.600> page, 00:31:17.190 --> 00:31:17.200 align:start position:0% will take you to the correct setup page, 00:31:17.200 --> 00:31:18.550 align:start position:0% will take you to the correct setup page, and<00:31:17.360> make<00:31:17.480> sure<00:31:17.760> you're<00:31:17.920> getting<00:31:18.120> the<00:31:18.200> lowest 00:31:18.550 --> 00:31:18.560 align:start position:0% and make sure you're getting the lowest 00:31:18.560 --> 00:31:20.670 align:start position:0% and make sure you're getting the lowest pricing<00:31:18.920> possible. 00:31:20.670 --> 00:31:20.680 align:start position:0% pricing possible. 00:31:20.680 --> 00:31:21.870 align:start position:0% pricing possible. All<00:31:20.800> right,<00:31:21.000> so<00:31:21.120> now<00:31:21.400> I'm<00:31:21.480> going<00:31:21.600> to<00:31:21.640> go<00:31:21.720> ahead 00:31:21.870 --> 00:31:21.880 align:start position:0% All right, so now I'm going to go ahead 00:31:21.880 --> 00:31:23.230 align:start position:0% All right, so now I'm going to go ahead and<00:31:21.960> go<00:31:22.040> to<00:31:22.120> that<00:31:22.320> link<00:31:22.640> at<00:31:22.760> the<00:31:22.840> top<00:31:23.120> of<00:31:23.160> the 00:31:23.230 --> 00:31:23.240 align:start position:0% and go to that link at the top of the 00:31:23.240 --> 00:31:25.990 align:start position:0% and go to that link at the top of the video<00:31:23.520> description. 00:31:25.990 --> 00:31:26.000 align:start position:0% video description. 00:31:26.000 --> 00:31:27.350 align:start position:0% video description. And<00:31:26.240> once<00:31:26.400> you<00:31:26.480> go<00:31:26.560> to<00:31:26.600> that<00:31:26.800> link,<00:31:27.160> you'll<00:31:27.280> be 00:31:27.350 --> 00:31:27.360 align:start position:0% And once you go to that link, you'll be 00:31:27.360 --> 00:31:29.150 align:start position:0% And once you go to that link, you'll be brought<00:31:27.520> to<00:31:27.600> this<00:31:27.760> page<00:31:28.080> right<00:31:28.240> here.<00:31:28.920> Click 00:31:29.150 --> 00:31:29.160 align:start position:0% brought to this page right here. Click 00:31:29.160 --> 00:31:32.150 align:start position:0% brought to this page right here. Click on<00:31:29.520> start<00:31:29.880> now. 00:31:32.150 --> 00:31:32.160 align:start position:0% on start now. 00:31:32.160 --> 00:31:34.110 align:start position:0% on start now. And<00:31:32.320> then<00:31:32.480> down<00:31:32.720> here,<00:31:33.160> we'll<00:31:33.280> be<00:31:33.400> looking<00:31:33.760> for 00:31:34.110 --> 00:31:34.120 align:start position:0% And then down here, we'll be looking for 00:31:34.120 --> 00:31:36.110 align:start position:0% And then down here, we'll be looking for the<00:31:34.400> business<00:31:34.840> plan.<00:31:35.520> The<00:31:35.640> reason<00:31:35.920> why<00:31:36.000> we 00:31:36.110 --> 00:31:36.120 align:start position:0% the business plan. The reason why we 00:31:36.120 --> 00:31:38.150 align:start position:0% the business plan. The reason why we need<00:31:36.320> this<00:31:36.560> plan<00:31:36.880> specifically<00:31:37.640> is<00:31:37.760> because 00:31:38.150 --> 00:31:38.160 align:start position:0% need this plan specifically is because 00:31:38.160 --> 00:31:39.750 align:start position:0% need this plan specifically is because if<00:31:38.320> I<00:31:38.360> scroll<00:31:38.680> down<00:31:38.880> here,<00:31:39.360> you'll<00:31:39.520> see<00:31:39.640> it 00:31:39.750 --> 00:31:39.760 align:start position:0% if I scroll down here, you'll see it 00:31:39.760 --> 00:31:42.750 align:start position:0% if I scroll down here, you'll see it includes<00:31:40.440> five<00:31:40.880> managed<00:31:41.440> Node.js<00:31:42.040> web<00:31:42.280> apps, 00:31:42.750 --> 00:31:42.760 align:start position:0% includes five managed Node.js web apps, 00:31:42.760 --> 00:31:44.510 align:start position:0% includes five managed Node.js web apps, and<00:31:42.920> this<00:31:43.080> is<00:31:43.160> the<00:31:43.240> feature<00:31:43.600> that<00:31:43.800> we'll<00:31:43.920> need. 00:31:44.510 --> 00:31:44.520 align:start position:0% and this is the feature that we'll need. 00:31:44.520 --> 00:31:46.790 align:start position:0% and this is the feature that we'll need. So<00:31:44.640> let's<00:31:44.880> scroll<00:31:45.160> up<00:31:45.280> here,<00:31:45.960> and<00:31:46.200> click<00:31:46.480> on 00:31:46.790 --> 00:31:46.800 align:start position:0% So let's scroll up here, and click on 00:31:46.800 --> 00:31:50.550 align:start position:0% So let's scroll up here, and click on choose<00:31:47.160> plan. 00:31:50.550 --> 00:31:50.560 align:start position:0% 00:31:50.560 --> 00:31:52.190 align:start position:0% Then<00:31:50.720> here,<00:31:51.000> start<00:31:51.280> by<00:31:51.400> choosing<00:31:52.000> your 00:31:52.190 --> 00:31:52.200 align:start position:0% Then here, start by choosing your 00:31:52.200 --> 00:31:54.070 align:start position:0% Then here, start by choosing your billing<00:31:52.520> period.<00:31:53.200> By<00:31:53.320> default,<00:31:53.760> this<00:31:53.880> will<00:31:53.960> be 00:31:54.070 --> 00:31:54.080 align:start position:0% billing period. By default, this will be 00:31:54.080 --> 00:31:56.190 align:start position:0% billing period. By default, this will be set<00:31:54.320> to<00:31:54.400> 48<00:31:54.880> months.<00:31:55.520> However,<00:31:55.920> you<00:31:56.040> can 00:31:56.190 --> 00:31:56.200 align:start position:0% set to 48 months. However, you can 00:31:56.200 --> 00:31:59.390 align:start position:0% set to 48 months. However, you can switch<00:31:56.520> this<00:31:57.000> to<00:31:57.280> 24<00:31:57.800> months,<00:31:58.480> 12<00:31:58.760> month,<00:31:59.160> and 00:31:59.390 --> 00:31:59.400 align:start position:0% switch this to 24 months, 12 month, and 00:31:59.400 --> 00:32:01.670 align:start position:0% switch this to 24 months, 12 month, and 1<00:31:59.520> month<00:31:59.760> plans<00:32:00.200> as<00:32:00.360> well.<00:32:00.880> For<00:32:01.000> this<00:32:01.160> video, 00:32:01.670 --> 00:32:01.680 align:start position:0% 1 month plans as well. For this video, 00:32:01.680 --> 00:32:05.270 align:start position:0% 1 month plans as well. For this video, I'll<00:32:01.800> go<00:32:01.880> with<00:32:02.000> the<00:32:02.080> 12<00:32:02.320> month<00:32:02.520> option. 00:32:05.270 --> 00:32:05.280 align:start position:0% 00:32:05.280 --> 00:32:06.710 align:start position:0% As<00:32:05.480> you<00:32:05.520> can<00:32:05.640> see<00:32:05.800> here,<00:32:06.040> we<00:32:06.120> still<00:32:06.360> get<00:32:06.480> plenty 00:32:06.710 --> 00:32:06.720 align:start position:0% As you can see here, we still get plenty 00:32:06.720 --> 00:32:08.630 align:start position:0% As you can see here, we still get plenty of<00:32:06.800> savings,<00:32:07.400> and<00:32:07.520> also<00:32:07.880> a<00:32:07.960> free<00:32:08.240> domain<00:32:08.560> for 00:32:08.630 --> 00:32:08.640 align:start position:0% of savings, and also a free domain for 00:32:08.640 --> 00:32:10.230 align:start position:0% of savings, and also a free domain for the<00:32:08.720> first<00:32:09.000> year.<00:32:09.600> Down<00:32:09.800> here,<00:32:10.040> you<00:32:10.080> can 00:32:10.230 --> 00:32:10.240 align:start position:0% the first year. Down here, you can 00:32:10.240 --> 00:32:12.110 align:start position:0% the first year. Down here, you can choose<00:32:10.480> to<00:32:10.560> type<00:32:10.800> in<00:32:10.960> your<00:32:11.160> domain<00:32:11.480> name,<00:32:11.960> but 00:32:12.110 --> 00:32:12.120 align:start position:0% choose to type in your domain name, but 00:32:12.120 --> 00:32:13.470 align:start position:0% choose to type in your domain name, but I'll<00:32:12.240> do<00:32:12.360> this<00:32:12.480> a<00:32:12.520> little<00:32:12.680> bit<00:32:12.800> later.<00:32:13.360> And 00:32:13.470 --> 00:32:13.480 align:start position:0% I'll do this a little bit later. And 00:32:13.480 --> 00:32:14.750 align:start position:0% I'll do this a little bit later. And then<00:32:13.600> on<00:32:13.680> the<00:32:13.760> right<00:32:13.960> side<00:32:14.240> right<00:32:14.400> here,<00:32:14.680> you 00:32:14.750 --> 00:32:14.760 align:start position:0% then on the right side right here, you 00:32:14.760 --> 00:32:16.550 align:start position:0% then on the right side right here, you can<00:32:14.920> review<00:32:15.360> your<00:32:15.560> order.<00:32:16.080> And<00:32:16.160> don't<00:32:16.320> forget 00:32:16.550 --> 00:32:16.560 align:start position:0% can review your order. And don't forget 00:32:16.560 --> 00:32:17.550 align:start position:0% can review your order. And don't forget that<00:32:16.680> you<00:32:16.760> can<00:32:16.880> get<00:32:17.080> this<00:32:17.200> additional 00:32:17.550 --> 00:32:17.560 align:start position:0% that you can get this additional 00:32:17.560 --> 00:32:19.390 align:start position:0% that you can get this additional discount<00:32:18.120> by<00:32:18.240> using<00:32:18.560> the<00:32:18.640> first<00:32:19.000> link<00:32:19.240> in<00:32:19.320> the 00:32:19.390 --> 00:32:19.400 align:start position:0% discount by using the first link in the 00:32:19.400 --> 00:32:21.430 align:start position:0% discount by using the first link in the video<00:32:19.640> description.<00:32:20.440> Once<00:32:20.640> you're<00:32:20.760> ready,<00:32:21.280> go 00:32:21.430 --> 00:32:21.440 align:start position:0% video description. Once you're ready, go 00:32:21.440 --> 00:32:24.750 align:start position:0% video description. Once you're ready, go down<00:32:22.000> and<00:32:22.120> click<00:32:22.320> on<00:32:22.440> continue. 00:32:24.750 --> 00:32:24.760 align:start position:0% down and click on continue. 00:32:24.760 --> 00:32:26.190 align:start position:0% down and click on continue. And<00:32:24.880> then<00:32:25.040> on<00:32:25.120> this<00:32:25.280> page<00:32:25.520> right<00:32:25.720> here,<00:32:26.080> you 00:32:26.190 --> 00:32:26.200 align:start position:0% And then on this page right here, you 00:32:26.200 --> 00:32:28.070 align:start position:0% And then on this page right here, you need<00:32:26.320> to<00:32:26.400> sign<00:32:26.560> up<00:32:26.680> for<00:32:26.840> a<00:32:26.920> Hostinger<00:32:27.440> account. 00:32:28.070 --> 00:32:28.080 align:start position:0% need to sign up for a Hostinger account. 00:32:28.080 --> 00:32:30.190 align:start position:0% need to sign up for a Hostinger account. So<00:32:28.240> enter<00:32:28.680> your<00:32:28.840> email<00:32:29.080> address, 00:32:30.190 --> 00:32:30.200 align:start position:0% So enter your email address, 00:32:30.200 --> 00:32:32.310 align:start position:0% So enter your email address, and<00:32:30.440> create<00:32:30.720> a<00:32:30.760> password. 00:32:32.310 --> 00:32:32.320 align:start position:0% and create a password. 00:32:32.320 --> 00:32:36.630 align:start position:0% and create a password. And<00:32:32.440> then<00:32:32.600> click<00:32:32.840> register. 00:32:36.630 --> 00:32:36.640 align:start position:0% 00:32:36.640 --> 00:32:38.150 align:start position:0% And<00:32:36.720> now<00:32:36.920> on<00:32:37.040> this<00:32:37.200> page<00:32:37.440> right<00:32:37.600> here,<00:32:38.040> go 00:32:38.150 --> 00:32:38.160 align:start position:0% And now on this page right here, go 00:32:38.160 --> 00:32:39.910 align:start position:0% And now on this page right here, go ahead<00:32:38.320> and<00:32:38.440> enter<00:32:38.760> your<00:32:38.960> billing<00:32:39.280> address<00:32:39.760> and 00:32:39.910 --> 00:32:39.920 align:start position:0% ahead and enter your billing address and 00:32:39.920 --> 00:32:41.550 align:start position:0% ahead and enter your billing address and your<00:32:40.000> payment<00:32:40.280> information,<00:32:41.200> go<00:32:41.320> through<00:32:41.440> the 00:32:41.550 --> 00:32:41.560 align:start position:0% your payment information, go through the 00:32:41.560 --> 00:32:43.070 align:start position:0% your payment information, go through the checkout<00:32:41.880> process,<00:32:42.560> and<00:32:42.680> I'll<00:32:42.760> meet<00:32:42.920> you<00:32:43.000> at 00:32:43.070 --> 00:32:43.080 align:start position:0% checkout process, and I'll meet you at 00:32:43.080 --> 00:32:47.750 align:start position:0% checkout process, and I'll meet you at the<00:32:43.160> next<00:32:43.360> step. 00:32:47.750 --> 00:32:47.760 align:start position:0% 00:32:47.760 --> 00:32:48.790 align:start position:0% All<00:32:47.840> right,<00:32:48.000> and<00:32:48.080> once<00:32:48.200> you<00:32:48.240> get<00:32:48.320> to<00:32:48.400> this<00:32:48.560> page 00:32:48.790 --> 00:32:48.800 align:start position:0% All right, and once you get to this page 00:32:48.800 --> 00:32:50.070 align:start position:0% All right, and once you get to this page right<00:32:49.000> here,<00:32:49.440> you'll<00:32:49.560> be<00:32:49.680> brought<00:32:49.920> into 00:32:50.070 --> 00:32:50.080 align:start position:0% right here, you'll be brought into 00:32:50.080 --> 00:32:51.910 align:start position:0% right here, you'll be brought into Hostinger's<00:32:50.640> onboarding.<00:32:51.320> And<00:32:51.440> depending<00:32:51.800> on 00:32:51.910 --> 00:32:51.920 align:start position:0% Hostinger's onboarding. And depending on 00:32:51.920 --> 00:32:53.310 align:start position:0% Hostinger's onboarding. And depending on whenever<00:32:52.160> you're<00:32:52.280> watching<00:32:52.600> this<00:32:52.760> video, 00:32:53.310 --> 00:32:53.320 align:start position:0% whenever you're watching this video, 00:32:53.320 --> 00:32:54.790 align:start position:0% whenever you're watching this video, this<00:32:53.520> onboarding<00:32:53.920> process<00:32:54.440> may<00:32:54.600> look 00:32:54.790 --> 00:32:54.800 align:start position:0% this onboarding process may look 00:32:54.800 --> 00:32:56.310 align:start position:0% this onboarding process may look slightly<00:32:55.120> different.<00:32:55.680> But<00:32:55.840> even<00:32:56.000> if<00:32:56.120> it<00:32:56.200> is 00:32:56.310 --> 00:32:56.320 align:start position:0% slightly different. But even if it is 00:32:56.320 --> 00:32:57.910 align:start position:0% slightly different. But even if it is slightly<00:32:56.600> different,<00:32:57.000> the<00:32:57.160> overall<00:32:57.440> steps 00:32:57.910 --> 00:32:57.920 align:start position:0% slightly different, the overall steps 00:32:57.920 --> 00:32:59.230 align:start position:0% slightly different, the overall steps should<00:32:58.120> be<00:32:58.240> the<00:32:58.320> same.<00:32:58.760> So,<00:32:58.880> just<00:32:59.040> follow 00:32:59.230 --> 00:32:59.240 align:start position:0% should be the same. So, just follow 00:32:59.240 --> 00:33:00.830 align:start position:0% should be the same. So, just follow along<00:32:59.520> the<00:32:59.600> best<00:32:59.840> you<00:32:59.880> can.<00:33:00.360> For<00:33:00.440> this<00:33:00.600> first 00:33:00.830 --> 00:33:00.840 align:start position:0% along the best you can. For this first 00:33:00.840 --> 00:33:02.350 align:start position:0% along the best you can. For this first question<00:33:01.200> here,<00:33:01.480> I'm<00:33:01.560> going<00:33:01.680> to<00:33:01.720> say<00:33:02.000> that<00:33:02.240> I'm 00:33:02.350 --> 00:33:02.360 align:start position:0% question here, I'm going to say that I'm 00:33:02.360 --> 00:33:05.910 align:start position:0% question here, I'm going to say that I'm creating<00:33:02.720> this<00:33:02.840> website<00:33:03.320> for<00:33:03.560> myself. 00:33:05.910 --> 00:33:05.920 align:start position:0% creating this website for myself. 00:33:05.920 --> 00:33:09.630 align:start position:0% creating this website for myself. I'm<00:33:06.080> looking<00:33:06.360> to<00:33:06.520> create<00:33:06.840> a<00:33:06.880> new<00:33:07.040> site. 00:33:09.630 --> 00:33:09.640 align:start position:0% 00:33:09.640 --> 00:33:10.830 align:start position:0% In<00:33:09.720> the<00:33:09.800> bottom<00:33:10.080> right<00:33:10.240> here,<00:33:10.600> I'm<00:33:10.680> going<00:33:10.800> to 00:33:10.830 --> 00:33:10.840 align:start position:0% In the bottom right here, I'm going to 00:33:10.840 --> 00:33:14.110 align:start position:0% In the bottom right here, I'm going to click<00:33:11.080> on<00:33:11.400> skip<00:33:11.720> personalization. 00:33:14.110 --> 00:33:14.120 align:start position:0% click on skip personalization. 00:33:14.120 --> 00:33:15.310 align:start position:0% click on skip personalization. And<00:33:14.240> then<00:33:14.360> when<00:33:14.440> you<00:33:14.520> get<00:33:14.600> to<00:33:14.680> this<00:33:14.840> page<00:33:15.120> right 00:33:15.310 --> 00:33:15.320 align:start position:0% And then when you get to this page right 00:33:15.320 --> 00:33:17.150 align:start position:0% And then when you get to this page right here,<00:33:15.520> you'll<00:33:15.680> see<00:33:15.880> three<00:33:16.240> options.<00:33:17.040> You'll 00:33:17.150 --> 00:33:17.160 align:start position:0% here, you'll see three options. You'll 00:33:17.160 --> 00:33:19.070 align:start position:0% here, you'll see three options. You'll want<00:33:17.280> to<00:33:17.360> scroll<00:33:17.760> down<00:33:18.080> right<00:33:18.280> here,<00:33:18.880> and<00:33:19.000> you 00:33:19.070 --> 00:33:19.080 align:start position:0% want to scroll down right here, and you 00:33:19.080 --> 00:33:20.350 align:start position:0% want to scroll down right here, and you want<00:33:19.200> to<00:33:19.240> look<00:33:19.360> for<00:33:19.480> the<00:33:19.560> option<00:33:19.920> that<00:33:20.040> says<00:33:20.280> a 00:33:20.350 --> 00:33:20.360 align:start position:0% want to look for the option that says a 00:33:20.360 --> 00:33:22.390 align:start position:0% want to look for the option that says a Node.js<00:33:21.000> web<00:33:21.240> app.<00:33:21.680> This<00:33:21.800> is<00:33:21.880> going<00:33:22.080> to<00:33:22.160> allow 00:33:22.390 --> 00:33:22.400 align:start position:0% Node.js web app. This is going to allow 00:33:22.400 --> 00:33:24.510 align:start position:0% Node.js web app. This is going to allow us<00:33:22.520> to<00:33:22.600> deploy<00:33:23.080> via<00:33:23.320> GitHub.<00:33:24.080> So,<00:33:24.200> click<00:33:24.400> on 00:33:24.510 --> 00:33:24.520 align:start position:0% us to deploy via GitHub. So, click on 00:33:24.520 --> 00:33:26.390 align:start position:0% us to deploy via GitHub. So, click on this. 00:33:26.390 --> 00:33:26.400 align:start position:0% this. 00:33:26.400 --> 00:33:29.230 align:start position:0% this. And<00:33:26.480> then<00:33:26.600> click<00:33:26.840> next. 00:33:29.230 --> 00:33:29.240 align:start position:0% And then click next. 00:33:29.240 --> 00:33:30.670 align:start position:0% And then click next. And<00:33:29.320> then<00:33:29.480> right<00:33:29.680> here,<00:33:29.920> you<00:33:30.040> can<00:33:30.200> claim<00:33:30.600> at 00:33:30.670 --> 00:33:30.680 align:start position:0% And then right here, you can claim at 00:33:30.680 --> 00:33:32.390 align:start position:0% And then right here, you can claim at your<00:33:30.920> free<00:33:31.160> domain<00:33:31.560> name<00:33:31.840> for<00:33:31.960> the<00:33:32.080> first 00:33:32.390 --> 00:33:32.400 align:start position:0% your free domain name for the first 00:33:32.400 --> 00:33:34.470 align:start position:0% your free domain name for the first year.<00:33:32.880> So,<00:33:33.000> right<00:33:33.120> here<00:33:33.240> I'm<00:33:33.320> going<00:33:33.440> to<00:33:33.520> type 00:33:34.470 --> 00:33:34.480 align:start position:0% year. So, right here I'm going to type 00:33:34.480 --> 00:33:38.830 align:start position:0% year. So, right here I'm going to type clientvaulttutorial.com. 00:33:38.830 --> 00:33:38.840 align:start position:0% 00:33:38.840 --> 00:33:40.350 align:start position:0% And<00:33:38.880> as<00:33:39.000> you<00:33:39.080> can<00:33:39.200> see,<00:33:39.400> this<00:33:39.560> domain<00:33:39.960> is<00:33:40.160> free 00:33:40.350 --> 00:33:40.360 align:start position:0% And as you can see, this domain is free 00:33:40.360 --> 00:33:41.950 align:start position:0% And as you can see, this domain is free for<00:33:40.480> the<00:33:40.560> first<00:33:40.840> year.<00:33:41.320> So,<00:33:41.560> I'll<00:33:41.680> go<00:33:41.760> ahead 00:33:41.950 --> 00:33:41.960 align:start position:0% for the first year. So, I'll go ahead 00:33:41.960 --> 00:33:43.710 align:start position:0% for the first year. So, I'll go ahead and<00:33:42.080> claim<00:33:42.400> this. 00:33:43.710 --> 00:33:43.720 align:start position:0% and claim this. 00:33:43.720 --> 00:33:48.390 align:start position:0% and claim this. And<00:33:44.080> click<00:33:44.320> on<00:33:44.560> next. 00:33:48.390 --> 00:33:48.400 align:start position:0% 00:33:48.400 --> 00:33:49.230 align:start position:0% And<00:33:48.480> then<00:33:48.600> right<00:33:48.760> here,<00:33:48.920> you'll<00:33:49.040> have<00:33:49.160> to 00:33:49.230 --> 00:33:49.240 align:start position:0% And then right here, you'll have to 00:33:49.240 --> 00:33:51.990 align:start position:0% And then right here, you'll have to verify<00:33:49.960> your<00:33:50.200> domain<00:33:50.680> name<00:33:51.040> owner<00:33:51.280> details. 00:33:51.990 --> 00:33:52.000 align:start position:0% verify your domain name owner details. 00:33:52.000 --> 00:33:53.270 align:start position:0% verify your domain name owner details. This<00:33:52.160> is<00:33:52.280> who<00:33:52.440> your<00:33:52.600> domain<00:33:52.960> is<00:33:53.040> going<00:33:53.160> to<00:33:53.200> be 00:33:53.270 --> 00:33:53.280 align:start position:0% This is who your domain is going to be 00:33:53.280 --> 00:33:55.150 align:start position:0% This is who your domain is going to be registered<00:33:53.760> to.<00:33:54.200> So,<00:33:54.360> confirm<00:33:54.840> all<00:33:55.000> of<00:33:55.080> the 00:33:55.150 --> 00:33:55.160 align:start position:0% registered to. So, confirm all of the 00:33:55.160 --> 00:33:57.710 align:start position:0% registered to. So, confirm all of the information<00:33:55.680> is<00:33:55.760> correct<00:33:56.080> right<00:33:56.240> here. 00:33:57.710 --> 00:33:57.720 align:start position:0% information is correct right here. 00:33:57.720 --> 00:33:59.150 align:start position:0% information is correct right here. And<00:33:57.840> then<00:33:57.960> after<00:33:58.320> you've<00:33:58.520> filled<00:33:58.800> everything 00:33:59.150 --> 00:33:59.160 align:start position:0% And then after you've filled everything 00:33:59.160 --> 00:34:03.670 align:start position:0% And then after you've filled everything out,<00:33:59.560> click<00:33:59.800> on<00:33:59.960> register. 00:34:03.670 --> 00:34:03.680 align:start position:0% 00:34:03.680 --> 00:34:05.830 align:start position:0% And<00:34:03.800> here<00:34:04.000> you<00:34:04.120> may<00:34:04.360> get<00:34:04.680> a<00:34:04.760> text<00:34:05.120> message<00:34:05.600> sent 00:34:05.830 --> 00:34:05.840 align:start position:0% And here you may get a text message sent 00:34:05.840 --> 00:34:07.230 align:start position:0% And here you may get a text message sent to<00:34:05.920> your<00:34:06.080> phone<00:34:06.240> number. 00:34:07.230 --> 00:34:07.240 align:start position:0% to your phone number. 00:34:07.240 --> 00:34:11.310 align:start position:0% to your phone number. Go<00:34:07.360> ahead<00:34:07.560> and<00:34:07.680> enter<00:34:07.920> your<00:34:08.080> code<00:34:08.360> right<00:34:08.520> here. 00:34:11.310 --> 00:34:11.320 align:start position:0% 00:34:11.320 --> 00:34:16.430 align:start position:0% And<00:34:11.600> click<00:34:11.840> verify. 00:34:16.430 --> 00:34:16.440 align:start position:0% 00:34:16.440 --> 00:34:18.230 align:start position:0% Awesome.<00:34:16.800> Now<00:34:16.919> your<00:34:17.040> domain<00:34:17.360> is<00:34:17.480> ready<00:34:17.679> to<00:34:17.800> go. 00:34:18.230 --> 00:34:18.240 align:start position:0% Awesome. Now your domain is ready to go. 00:34:18.240 --> 00:34:19.790 align:start position:0% Awesome. Now your domain is ready to go. Once<00:34:18.399> you<00:34:18.480> get<00:34:18.560> to<00:34:18.639> this<00:34:18.760> screen<00:34:19.080> here,<00:34:19.520> click 00:34:19.790 --> 00:34:19.800 align:start position:0% Once you get to this screen here, click 00:34:19.800 --> 00:34:23.310 align:start position:0% Once you get to this screen here, click on<00:34:20.120> connect<00:34:20.480> with<00:34:20.639> GitHub. 00:34:23.310 --> 00:34:23.320 align:start position:0% 00:34:23.320 --> 00:34:24.750 align:start position:0% And<00:34:23.480> then<00:34:23.639> on<00:34:23.760> this<00:34:23.879> screen<00:34:24.159> here,<00:34:24.520> you<00:34:24.639> can 00:34:24.750 --> 00:34:24.760 align:start position:0% And then on this screen here, you can 00:34:24.760 --> 00:34:25.750 align:start position:0% And then on this screen here, you can choose<00:34:25.080> whether<00:34:25.280> you<00:34:25.399> want<00:34:25.520> to<00:34:25.560> give 00:34:25.750 --> 00:34:25.760 align:start position:0% choose whether you want to give 00:34:25.760 --> 00:34:27.310 align:start position:0% choose whether you want to give Hostinger<00:34:26.200> access<00:34:26.720> to<00:34:26.960> all<00:34:27.120> of<00:34:27.200> your 00:34:27.310 --> 00:34:27.320 align:start position:0% Hostinger access to all of your 00:34:27.320 --> 00:34:29.350 align:start position:0% Hostinger access to all of your repositories<00:34:28.440> or<00:34:28.760> only<00:34:29.000> select 00:34:29.350 --> 00:34:29.360 align:start position:0% repositories or only select 00:34:29.360 --> 00:34:31.270 align:start position:0% repositories or only select repositories.<00:34:30.399> In<00:34:30.480> my<00:34:30.600> case,<00:34:30.919> I'll<00:34:31.000> just<00:34:31.200> go 00:34:31.270 --> 00:34:31.280 align:start position:0% repositories. In my case, I'll just go 00:34:31.280 --> 00:34:33.389 align:start position:0% repositories. In my case, I'll just go with<00:34:31.440> all.<00:34:31.919> I'm<00:34:32.000> going<00:34:32.120> to<00:34:32.200> scroll<00:34:32.480> down<00:34:33.159> and 00:34:33.389 --> 00:34:33.399 align:start position:0% with all. I'm going to scroll down and 00:34:33.399 --> 00:34:38.470 align:start position:0% with all. I'm going to scroll down and click<00:34:33.679> install<00:34:34.159> and<00:34:34.280> authorize. 00:34:38.470 --> 00:34:38.480 align:start position:0% 00:34:38.480 --> 00:34:39.869 align:start position:0% And<00:34:38.560> then<00:34:38.720> right<00:34:38.919> here,<00:34:39.159> you<00:34:39.320> should<00:34:39.560> see<00:34:39.720> that 00:34:39.869 --> 00:34:39.879 align:start position:0% And then right here, you should see that 00:34:39.879 --> 00:34:41.869 align:start position:0% And then right here, you should see that repository<00:34:40.560> that<00:34:40.679> we<00:34:40.800> created<00:34:41.280> in<00:34:41.399> Google<00:34:41.679> AI 00:34:41.869 --> 00:34:41.879 align:start position:0% repository that we created in Google AI 00:34:41.879 --> 00:34:44.070 align:start position:0% repository that we created in Google AI Studio<00:34:42.440> a<00:34:42.520> few<00:34:42.720> moments<00:34:43.040> ago.<00:34:43.639> I'll<00:34:43.760> click<00:34:43.960> on 00:34:44.070 --> 00:34:44.080 align:start position:0% Studio a few moments ago. I'll click on 00:34:44.080 --> 00:34:46.590 align:start position:0% Studio a few moments ago. I'll click on my<00:34:44.200> repository<00:34:44.800> right<00:34:45.000> here 00:34:46.590 --> 00:34:46.600 align:start position:0% my repository right here 00:34:46.600 --> 00:34:51.389 align:start position:0% my repository right here and<00:34:46.840> click<00:34:47.080> on<00:34:47.240> continue. 00:34:51.389 --> 00:34:51.399 align:start position:0% 00:34:51.399 --> 00:34:52.470 align:start position:0% And<00:34:51.480> then<00:34:51.600> here,<00:34:51.760> the<00:34:51.879> first<00:34:52.120> thing<00:34:52.240> you<00:34:52.320> want 00:34:52.470 --> 00:34:52.480 align:start position:0% And then here, the first thing you want 00:34:52.480 --> 00:34:54.830 align:start position:0% And then here, the first thing you want to<00:34:52.560> do<00:34:52.760> is<00:34:52.960> change<00:34:53.399> the<00:34:53.520> framework<00:34:54.040> preset.<00:34:54.760> Go 00:34:54.830 --> 00:34:54.840 align:start position:0% to do is change the framework preset. Go 00:34:54.840 --> 00:34:56.669 align:start position:0% to do is change the framework preset. Go ahead<00:34:54.960> and<00:34:55.040> click<00:34:55.200> on<00:34:55.320> this 00:34:56.669 --> 00:34:56.679 align:start position:0% ahead and click on this 00:34:56.679 --> 00:34:57.870 align:start position:0% ahead and click on this and<00:34:56.760> then<00:34:56.879> scroll<00:34:57.360> all<00:34:57.480> the<00:34:57.560> way<00:34:57.680> to<00:34:57.800> the 00:34:57.870 --> 00:34:57.880 align:start position:0% and then scroll all the way to the 00:34:57.880 --> 00:34:59.430 align:start position:0% and then scroll all the way to the bottom.<00:34:58.440> You're<00:34:58.560> looking<00:34:58.800> for<00:34:58.920> this<00:34:59.080> option 00:34:59.430 --> 00:34:59.440 align:start position:0% bottom. You're looking for this option 00:34:59.440 --> 00:35:02.830 align:start position:0% bottom. You're looking for this option right<00:34:59.640> here<00:35:00.000> called<00:35:00.200> Vite.<00:35:00.760> Click<00:35:01.000> on<00:35:01.120> this 00:35:02.830 --> 00:35:02.840 align:start position:0% right here called Vite. Click on this 00:35:02.840 --> 00:35:04.670 align:start position:0% right here called Vite. Click on this and<00:35:02.920> then<00:35:03.080> scroll<00:35:03.360> down<00:35:03.560> this<00:35:03.720> page. 00:35:04.670 --> 00:35:04.680 align:start position:0% and then scroll down this page. 00:35:04.680 --> 00:35:06.870 align:start position:0% and then scroll down this page. Look<00:35:04.840> for<00:35:05.120> environment<00:35:05.640> variables.<00:35:06.520> Next<00:35:06.800> to 00:35:06.870 --> 00:35:06.880 align:start position:0% Look for environment variables. Next to 00:35:06.880 --> 00:35:09.270 align:start position:0% Look for environment variables. Next to this,<00:35:07.160> click<00:35:07.480> add. 00:35:09.270 --> 00:35:09.280 align:start position:0% this, click add. 00:35:09.280 --> 00:35:10.510 align:start position:0% this, click add. We're<00:35:09.320> going<00:35:09.440> to<00:35:09.520> add<00:35:09.760> in<00:35:09.880> some<00:35:10.080> environment 00:35:10.510 --> 00:35:10.520 align:start position:0% We're going to add in some environment 00:35:10.520 --> 00:35:13.030 align:start position:0% We're going to add in some environment variables<00:35:11.000> here<00:35:11.360> using<00:35:11.680> an<00:35:11.800> API<00:35:12.240> key.<00:35:12.760> If<00:35:12.920> your 00:35:13.030 --> 00:35:13.040 align:start position:0% variables here using an API key. If your 00:35:13.040 --> 00:35:15.310 align:start position:0% variables here using an API key. If your Google<00:35:13.360> AI<00:35:13.560> Studio<00:35:13.960> project<00:35:14.560> uses<00:35:14.840> any<00:35:15.080> AI 00:35:15.310 --> 00:35:15.320 align:start position:0% Google AI Studio project uses any AI 00:35:15.320 --> 00:35:17.390 align:start position:0% Google AI Studio project uses any AI features,<00:35:16.080> things<00:35:16.280> like<00:35:16.400> a<00:35:16.440> chatbot,<00:35:17.160> image 00:35:17.390 --> 00:35:17.400 align:start position:0% features, things like a chatbot, image 00:35:17.400 --> 00:35:19.550 align:start position:0% features, things like a chatbot, image generation,<00:35:18.280> or<00:35:18.520> any<00:35:18.680> kind<00:35:18.880> of<00:35:19.000> AI-powered 00:35:19.550 --> 00:35:19.560 align:start position:0% generation, or any kind of AI-powered 00:35:19.560 --> 00:35:21.510 align:start position:0% generation, or any kind of AI-powered tool,<00:35:20.080> those<00:35:20.320> features<00:35:20.800> won't<00:35:21.080> work<00:35:21.320> after 00:35:21.510 --> 00:35:21.520 align:start position:0% tool, those features won't work after 00:35:21.520 --> 00:35:24.030 align:start position:0% tool, those features won't work after deployment<00:35:22.120> unless<00:35:22.400> we<00:35:22.560> add<00:35:22.840> an<00:35:23.000> API<00:35:23.440> key.<00:35:23.880> So, 00:35:24.030 --> 00:35:24.040 align:start position:0% deployment unless we add an API key. So, 00:35:24.040 --> 00:35:25.510 align:start position:0% deployment unless we add an API key. So, let's<00:35:24.240> take<00:35:24.400> care<00:35:24.560> of<00:35:24.640> that<00:35:24.800> now.<00:35:25.360> Let's 00:35:25.510 --> 00:35:25.520 align:start position:0% let's take care of that now. Let's 00:35:25.520 --> 00:35:29.030 align:start position:0% let's take care of that now. Let's switch<00:35:25.720> back<00:35:25.960> over<00:35:26.240> to<00:35:26.400> Google<00:35:26.680> AI<00:35:26.840> Studio. 00:35:29.030 --> 00:35:29.040 align:start position:0% switch back over to Google AI Studio. 00:35:29.040 --> 00:35:31.270 align:start position:0% switch back over to Google AI Studio. And<00:35:29.160> I'll<00:35:29.240> close<00:35:29.560> out<00:35:29.680> of<00:35:29.760> this. 00:35:31.270 --> 00:35:31.280 align:start position:0% And I'll close out of this. 00:35:31.280 --> 00:35:34.510 align:start position:0% And I'll close out of this. Click<00:35:31.520> on<00:35:31.800> back<00:35:32.080> to<00:35:32.200> start. 00:35:34.510 --> 00:35:34.520 align:start position:0% Click on back to start. 00:35:34.520 --> 00:35:38.270 align:start position:0% Click on back to start. Click<00:35:34.800> into<00:35:35.040> dashboard. 00:35:38.270 --> 00:35:38.280 align:start position:0% 00:35:38.280 --> 00:35:40.470 align:start position:0% And<00:35:38.400> here<00:35:38.600> you'll<00:35:38.720> land<00:35:39.080> in<00:35:39.200> API<00:35:39.640> keys.<00:35:40.280> On<00:35:40.400> the 00:35:40.470 --> 00:35:40.480 align:start position:0% And here you'll land in API keys. On the 00:35:40.480 --> 00:35:44.070 align:start position:0% And here you'll land in API keys. On the right<00:35:40.720> side,<00:35:41.120> click<00:35:41.360> on<00:35:41.600> create<00:35:41.960> API<00:35:42.320> key. 00:35:44.070 --> 00:35:44.080 align:start position:0% right side, click on create API key. 00:35:44.080 --> 00:35:48.470 align:start position:0% right side, click on create API key. Click<00:35:44.320> on<00:35:44.520> create<00:35:44.840> key. 00:35:48.470 --> 00:35:48.480 align:start position:0% 00:35:48.480 --> 00:35:51.750 align:start position:0% And<00:35:48.600> then<00:35:48.720> click<00:35:49.160> copy<00:35:49.560> key. 00:35:51.750 --> 00:35:51.760 align:start position:0% And then click copy key. 00:35:51.760 --> 00:35:54.910 align:start position:0% And then click copy key. And<00:35:51.920> switch<00:35:52.240> back<00:35:52.480> over<00:35:52.720> to<00:35:52.840> Hostinger. 00:35:54.910 --> 00:35:54.920 align:start position:0% And switch back over to Hostinger. 00:35:54.920 --> 00:35:56.710 align:start position:0% And switch back over to Hostinger. And<00:35:55.040> then<00:35:55.160> for<00:35:55.280> the<00:35:55.400> first<00:35:55.800> name<00:35:56.040> here,<00:35:56.480> let's 00:35:56.710 --> 00:35:56.720 align:start position:0% And then for the first name here, let's 00:35:56.720 --> 00:35:57.750 align:start position:0% And then for the first name here, let's type 00:35:57.750 --> 00:35:57.760 align:start position:0% type 00:35:57.760 --> 00:35:59.990 align:start position:0% type Gemini<00:35:58.800> {underscore} 00:35:59.990 --> 00:36:00.000 align:start position:0% Gemini {underscore} 00:36:00.000 --> 00:36:03.310 align:start position:0% Gemini {underscore} API<00:36:01.160> {underscore}<00:36:02.360> key. 00:36:03.310 --> 00:36:03.320 align:start position:0% API {underscore} key. 00:36:03.320 --> 00:36:06.030 align:start position:0% API {underscore} key. And<00:36:03.360> then<00:36:03.480> paste<00:36:03.840> in<00:36:03.920> the<00:36:04.000> key<00:36:04.200> right<00:36:04.360> here. 00:36:06.030 --> 00:36:06.040 align:start position:0% And then paste in the key right here. 00:36:06.040 --> 00:36:08.470 align:start position:0% And then paste in the key right here. Click<00:36:06.320> on<00:36:06.560> add<00:36:06.800> more. 00:36:08.470 --> 00:36:08.480 align:start position:0% Click on add more. 00:36:08.480 --> 00:36:10.790 align:start position:0% Click on add more. Then<00:36:08.600> for<00:36:08.720> the<00:36:08.800> next<00:36:09.080> name,<00:36:09.400> we'll<00:36:09.520> name<00:36:09.720> this 00:36:10.790 --> 00:36:10.800 align:start position:0% Then for the next name, we'll name this 00:36:10.800 --> 00:36:14.030 align:start position:0% Then for the next name, we'll name this Google<00:36:11.760> {underscore}<00:36:12.880> API 00:36:14.030 --> 00:36:14.040 align:start position:0% Google {underscore} API 00:36:14.040 --> 00:36:15.390 align:start position:0% Google {underscore} API {underscore} 00:36:15.390 --> 00:36:15.400 align:start position:0% {underscore} 00:36:15.400 --> 00:36:18.550 align:start position:0% {underscore} key.<00:36:16.200> Then<00:36:16.320> paste<00:36:16.600> in<00:36:16.680> the<00:36:16.800> same<00:36:17.080> key<00:36:17.280> again. 00:36:18.550 --> 00:36:18.560 align:start position:0% key. Then paste in the same key again. 00:36:18.560 --> 00:36:20.270 align:start position:0% key. Then paste in the same key again. And<00:36:18.680> then<00:36:18.800> one<00:36:18.960> more<00:36:19.120> time,<00:36:19.560> click<00:36:19.800> on<00:36:20.040> add 00:36:20.270 --> 00:36:20.280 align:start position:0% And then one more time, click on add 00:36:20.280 --> 00:36:21.750 align:start position:0% And then one more time, click on add more. 00:36:21.750 --> 00:36:21.760 align:start position:0% more. 00:36:21.760 --> 00:36:24.430 align:start position:0% more. And<00:36:21.920> we'll<00:36:22.000> name<00:36:22.200> this<00:36:23.200> Vite 00:36:24.430 --> 00:36:24.440 align:start position:0% And we'll name this Vite 00:36:24.440 --> 00:36:26.630 align:start position:0% And we'll name this Vite {underscore}<00:36:25.560> Gemini 00:36:26.630 --> 00:36:26.640 align:start position:0% {underscore} Gemini 00:36:26.640 --> 00:36:27.950 align:start position:0% {underscore} Gemini {underscore} 00:36:27.950 --> 00:36:27.960 align:start position:0% {underscore} 00:36:27.960 --> 00:36:29.150 align:start position:0% {underscore} API 00:36:29.150 --> 00:36:29.160 align:start position:0% API 00:36:29.160 --> 00:36:30.390 align:start position:0% API underscore 00:36:30.390 --> 00:36:30.400 align:start position:0% underscore 00:36:30.400 --> 00:36:31.390 align:start position:0% underscore key. 00:36:31.390 --> 00:36:31.400 align:start position:0% key. 00:36:31.400 --> 00:36:34.390 align:start position:0% key. And<00:36:31.440> then<00:36:31.560> paste<00:36:31.880> in<00:36:31.960> that<00:36:32.160> same<00:36:32.400> key<00:36:32.600> again. 00:36:34.390 --> 00:36:34.400 align:start position:0% And then paste in that same key again. 00:36:34.400 --> 00:36:37.910 align:start position:0% And then paste in that same key again. With<00:36:34.520> that<00:36:34.760> done,<00:36:35.080> click<00:36:35.360> on<00:36:35.480> finish. 00:36:37.910 --> 00:36:37.920 align:start position:0% With that done, click on finish. 00:36:37.920 --> 00:36:42.350 align:start position:0% With that done, click on finish. And<00:36:38.000> then<00:36:38.160> click<00:36:38.400> deploy. 00:36:42.350 --> 00:36:42.360 align:start position:0% 00:36:42.360 --> 00:36:43.990 align:start position:0% Perfect.<00:36:42.840> Now<00:36:43.000> your<00:36:43.120> web<00:36:43.320> app<00:36:43.480> is<00:36:43.600> going<00:36:43.840> to<00:36:43.920> be 00:36:43.990 --> 00:36:44.000 align:start position:0% Perfect. Now your web app is going to be 00:36:44.000 --> 00:36:45.430 align:start position:0% Perfect. Now your web app is going to be deployed.<00:36:44.640> I'll<00:36:44.760> wait<00:36:44.920> here<00:36:45.080> for<00:36:45.200> a<00:36:45.240> few 00:36:45.430 --> 00:36:45.440 align:start position:0% deployed. I'll wait here for a few 00:36:45.440 --> 00:36:46.590 align:start position:0% deployed. I'll wait here for a few moments<00:36:45.800> and<00:36:45.920> wait<00:36:46.080> for<00:36:46.200> everything<00:36:46.520> to 00:36:46.590 --> 00:36:46.600 align:start position:0% moments and wait for everything to 00:36:46.600 --> 00:36:49.390 align:start position:0% moments and wait for everything to finish<00:36:46.880> up. 00:36:49.390 --> 00:36:49.400 align:start position:0% 00:36:49.400 --> 00:36:50.830 align:start position:0% Okay,<00:36:49.680> and<00:36:49.800> as<00:36:49.880> you<00:36:49.960> can<00:36:50.080> see<00:36:50.320> here,<00:36:50.680> the 00:36:50.830 --> 00:36:50.840 align:start position:0% Okay, and as you can see here, the 00:36:50.840 --> 00:36:52.950 align:start position:0% Okay, and as you can see here, the deployment<00:36:51.440> has<00:36:51.600> completed<00:36:52.240> and<00:36:52.360> our<00:36:52.520> app<00:36:52.800> is 00:36:52.950 --> 00:36:52.960 align:start position:0% deployment has completed and our app is 00:36:52.960 --> 00:36:54.790 align:start position:0% deployment has completed and our app is available<00:36:53.480> right<00:36:53.720> here<00:36:54.080> on<00:36:54.240> our<00:36:54.360> custom 00:36:54.790 --> 00:36:54.800 align:start position:0% available right here on our custom 00:36:54.800 --> 00:36:56.430 align:start position:0% available right here on our custom domain.<00:36:55.480> So<00:36:55.640> everything<00:36:56.040> is<00:36:56.160> already 00:36:56.430 --> 00:36:56.440 align:start position:0% domain. So everything is already 00:36:56.440 --> 00:36:58.230 align:start position:0% domain. So everything is already connected<00:36:57.040> and<00:36:57.200> good<00:36:57.360> to<00:36:57.480> go.<00:36:57.840> So<00:36:58.040> I'm<00:36:58.120> going 00:36:58.230 --> 00:36:58.240 align:start position:0% connected and good to go. So I'm going 00:36:58.240 --> 00:36:59.630 align:start position:0% connected and good to go. So I'm going to<00:36:58.280> go<00:36:58.400> to<00:36:58.480> my<00:36:58.600> web<00:36:58.840> app<00:36:59.040> right<00:36:59.240> here<00:36:59.520> by 00:36:59.630 --> 00:36:59.640 align:start position:0% to go to my web app right here by 00:36:59.640 --> 00:37:02.030 align:start position:0% to go to my web app right here by clicking<00:36:59.920> on<00:37:00.040> this<00:37:00.200> link. 00:37:02.030 --> 00:37:02.040 align:start position:0% clicking on this link. 00:37:02.040 --> 00:37:03.910 align:start position:0% clicking on this link. And<00:37:02.280> there<00:37:02.360> we<00:37:02.480> go.<00:37:03.000> Now<00:37:03.200> all<00:37:03.360> the<00:37:03.480> stuff<00:37:03.800> that 00:37:03.910 --> 00:37:03.920 align:start position:0% And there we go. Now all the stuff that 00:37:03.920 --> 00:37:05.390 align:start position:0% And there we go. Now all the stuff that we<00:37:04.000> did<00:37:04.200> earlier<00:37:04.640> when<00:37:04.800> we<00:37:04.880> signed<00:37:05.080> up<00:37:05.160> for<00:37:05.280> our 00:37:05.390 --> 00:37:05.400 align:start position:0% we did earlier when we signed up for our 00:37:05.400 --> 00:37:07.550 align:start position:0% we did earlier when we signed up for our admin<00:37:05.680> account<00:37:06.320> and<00:37:06.480> uploaded<00:37:06.800> files,<00:37:07.400> all 00:37:07.550 --> 00:37:07.560 align:start position:0% admin account and uploaded files, all 00:37:07.560 --> 00:37:09.590 align:start position:0% admin account and uploaded files, all that<00:37:07.760> information<00:37:08.520> should<00:37:08.760> still<00:37:09.040> be<00:37:09.200> here. 00:37:09.590 --> 00:37:09.600 align:start position:0% that information should still be here. 00:37:09.600 --> 00:37:11.070 align:start position:0% that information should still be here. So<00:37:09.760> I'm<00:37:09.840> going<00:37:09.960> to<00:37:10.000> go<00:37:10.080> ahead<00:37:10.360> and<00:37:10.520> log<00:37:10.800> in<00:37:10.960> to 00:37:11.070 --> 00:37:11.080 align:start position:0% So I'm going to go ahead and log in to 00:37:11.080 --> 00:37:13.150 align:start position:0% So I'm going to go ahead and log in to my<00:37:11.200> admin<00:37:11.480> account 00:37:13.150 --> 00:37:13.160 align:start position:0% my admin account 00:37:13.160 --> 00:37:16.790 align:start position:0% my admin account and<00:37:13.480> click<00:37:13.840> sign<00:37:14.120> in. 00:37:16.790 --> 00:37:16.800 align:start position:0% 00:37:16.800 --> 00:37:18.590 align:start position:0% Awesome.<00:37:17.240> As<00:37:17.360> you<00:37:17.400> can<00:37:17.520> see<00:37:17.720> here,<00:37:18.080> everything 00:37:18.590 --> 00:37:18.600 align:start position:0% Awesome. As you can see here, everything 00:37:18.600 --> 00:37:20.870 align:start position:0% Awesome. As you can see here, everything is<00:37:18.760> the<00:37:18.880> exact<00:37:19.320> same<00:37:19.680> as<00:37:19.800> it<00:37:19.920> was<00:37:20.200> back<00:37:20.480> in<00:37:20.680> AI 00:37:20.870 --> 00:37:20.880 align:start position:0% is the exact same as it was back in AI 00:37:20.880 --> 00:37:22.830 align:start position:0% is the exact same as it was back in AI Studio.<00:37:21.560> That's<00:37:21.760> because<00:37:22.080> the<00:37:22.200> preview<00:37:22.680> was 00:37:22.830 --> 00:37:22.840 align:start position:0% Studio. That's because the preview was 00:37:22.840 --> 00:37:24.710 align:start position:0% Studio. That's because the preview was connected<00:37:23.200> to<00:37:23.280> the<00:37:23.360> same<00:37:23.640> Firebase<00:37:24.160> backend 00:37:24.710 --> 00:37:24.720 align:start position:0% connected to the same Firebase backend 00:37:24.720 --> 00:37:26.390 align:start position:0% connected to the same Firebase backend the<00:37:24.840> entire<00:37:25.320> time.<00:37:25.840> And<00:37:25.920> this<00:37:26.040> is<00:37:26.160> great 00:37:26.390 --> 00:37:26.400 align:start position:0% the entire time. And this is great 00:37:26.400 --> 00:37:27.870 align:start position:0% the entire time. And this is great because<00:37:26.640> it<00:37:26.720> means<00:37:27.000> that<00:37:27.120> your<00:37:27.240> database<00:37:27.760> and 00:37:27.870 --> 00:37:27.880 align:start position:0% because it means that your database and 00:37:27.880 --> 00:37:29.750 align:start position:0% because it means that your database and your<00:37:28.000> backend<00:37:28.600> were<00:37:28.720> working<00:37:29.000> properly<00:37:29.640> the 00:37:29.750 --> 00:37:29.760 align:start position:0% your backend were working properly the 00:37:29.760 --> 00:37:31.630 align:start position:0% your backend were working properly the whole<00:37:30.040> time.<00:37:30.560> Now<00:37:30.760> if<00:37:30.920> something<00:37:31.320> isn't 00:37:31.630 --> 00:37:31.640 align:start position:0% whole time. Now if something isn't 00:37:31.640 --> 00:37:33.310 align:start position:0% whole time. Now if something isn't working<00:37:31.960> the<00:37:32.040> way<00:37:32.160> you<00:37:32.280> expect<00:37:33.000> or<00:37:33.120> if<00:37:33.240> you 00:37:33.310 --> 00:37:33.320 align:start position:0% working the way you expect or if you 00:37:33.320 --> 00:37:34.830 align:start position:0% working the way you expect or if you want<00:37:33.440> to<00:37:33.480> make<00:37:33.680> any<00:37:33.880> changes<00:37:34.280> to<00:37:34.400> your<00:37:34.520> app<00:37:34.760> in 00:37:34.830 --> 00:37:34.840 align:start position:0% want to make any changes to your app in 00:37:34.840 --> 00:37:37.030 align:start position:0% want to make any changes to your app in the<00:37:34.920> future,<00:37:35.600> here's<00:37:35.840> how<00:37:35.960> you<00:37:36.080> do<00:37:36.200> it.<00:37:36.640> First, 00:37:37.030 --> 00:37:37.040 align:start position:0% the future, here's how you do it. First, 00:37:37.040 --> 00:37:40.550 align:start position:0% the future, here's how you do it. First, go<00:37:37.160> back<00:37:37.400> over<00:37:37.680> to<00:37:37.840> Google<00:37:38.120> AI<00:37:38.320> Studio 00:37:40.550 --> 00:37:40.560 align:start position:0% go back over to Google AI Studio 00:37:40.560 --> 00:37:43.150 align:start position:0% go back over to Google AI Studio and<00:37:40.800> close<00:37:41.120> out<00:37:41.240> of<00:37:41.320> this. 00:37:43.150 --> 00:37:43.160 align:start position:0% and close out of this. 00:37:43.160 --> 00:37:46.190 align:start position:0% and close out of this. Click<00:37:43.360> on<00:37:43.480> dashboard. 00:37:46.190 --> 00:37:46.200 align:start position:0% 00:37:46.200 --> 00:37:48.830 align:start position:0% Click<00:37:46.400> on<00:37:46.600> apps. 00:37:48.830 --> 00:37:48.840 align:start position:0% Click on apps. 00:37:48.840 --> 00:37:50.110 align:start position:0% Click on apps. Then<00:37:49.000> click<00:37:49.160> into<00:37:49.320> the<00:37:49.480> app<00:37:49.720> that<00:37:49.840> you<00:37:49.920> just 00:37:50.110 --> 00:37:50.120 align:start position:0% Then click into the app that you just 00:37:50.120 --> 00:37:53.550 align:start position:0% Then click into the app that you just deployed<00:37:50.520> right<00:37:50.680> here. 00:37:53.550 --> 00:37:53.560 align:start position:0% 00:37:53.560 --> 00:37:54.670 align:start position:0% And<00:37:53.640> then<00:37:53.800> here<00:37:54.040> you'll<00:37:54.160> just<00:37:54.360> make<00:37:54.560> your 00:37:54.670 --> 00:37:54.680 align:start position:0% And then here you'll just make your 00:37:54.680 --> 00:37:56.750 align:start position:0% And then here you'll just make your changes<00:37:55.320> or<00:37:55.520> tell<00:37:55.800> AI<00:37:55.960> Studio<00:37:56.400> what<00:37:56.520> needs<00:37:56.720> to 00:37:56.750 --> 00:37:56.760 align:start position:0% changes or tell AI Studio what needs to 00:37:56.760 --> 00:37:58.270 align:start position:0% changes or tell AI Studio what needs to be<00:37:56.880> fixed<00:37:57.520> and<00:37:57.600> then<00:37:57.720> just<00:37:57.880> save<00:37:58.080> it<00:37:58.200> to 00:37:58.270 --> 00:37:58.280 align:start position:0% be fixed and then just save it to 00:37:58.280 --> 00:38:00.190 align:start position:0% be fixed and then just save it to GitHub.<00:37:59.000> Hostinger<00:37:59.480> is<00:37:59.600> connected<00:38:00.000> to<00:38:00.040> your 00:38:00.190 --> 00:38:00.200 align:start position:0% GitHub. Hostinger is connected to your 00:38:00.200 --> 00:38:02.030 align:start position:0% GitHub. Hostinger is connected to your GitHub<00:38:00.840> so<00:38:01.040> it'll<00:38:01.240> automatically<00:38:01.720> pick<00:38:01.920> up 00:38:02.030 --> 00:38:02.040 align:start position:0% GitHub so it'll automatically pick up 00:38:02.040 --> 00:38:03.950 align:start position:0% GitHub so it'll automatically pick up the<00:38:02.160> update<00:38:02.640> and<00:38:02.760> redeploy<00:38:03.160> your<00:38:03.320> app.<00:38:03.880> You 00:38:03.950 --> 00:38:03.960 align:start position:0% the update and redeploy your app. You 00:38:03.960 --> 00:38:05.190 align:start position:0% the update and redeploy your app. You don't<00:38:04.080> have<00:38:04.200> to<00:38:04.280> touch<00:38:04.560> anything<00:38:05.000> on<00:38:05.120> the 00:38:05.190 --> 00:38:05.200 align:start position:0% don't have to touch anything on the 00:38:05.200 --> 00:38:07.110 align:start position:0% don't have to touch anything on the Hostinger<00:38:05.680> side.<00:38:06.240> You<00:38:06.360> make<00:38:06.520> the<00:38:06.640> change<00:38:07.000> at 00:38:07.110 --> 00:38:07.120 align:start position:0% Hostinger side. You make the change at 00:38:07.120 --> 00:38:09.190 align:start position:0% Hostinger side. You make the change at AI<00:38:07.320> Studio,<00:38:08.000> push<00:38:08.200> it<00:38:08.320> to<00:38:08.400> GitHub,<00:38:08.960> and<00:38:09.080> it 00:38:09.190 --> 00:38:09.200 align:start position:0% AI Studio, push it to GitHub, and it 00:38:09.200 --> 00:38:10.910 align:start position:0% AI Studio, push it to GitHub, and it shows<00:38:09.440> up<00:38:09.600> on<00:38:09.720> your<00:38:09.840> live<00:38:10.120> site.<00:38:10.640> So<00:38:10.800> for 00:38:10.910 --> 00:38:10.920 align:start position:0% shows up on your live site. So for 00:38:10.920 --> 00:38:12.510 align:start position:0% shows up on your live site. So for example<00:38:11.320> here,<00:38:11.600> I<00:38:11.680> could<00:38:11.840> make<00:38:12.080> a<00:38:12.160> small 00:38:12.510 --> 00:38:12.520 align:start position:0% example here, I could make a small 00:38:12.520 --> 00:38:16.350 align:start position:0% example here, I could make a small change.<00:38:13.120> I'll<00:38:13.280> say,<00:38:14.000> "Make<00:38:14.600> the<00:38:15.080> red<00:38:15.480> color<00:38:16.120> in 00:38:16.350 --> 00:38:16.360 align:start position:0% change. I'll say, "Make the red color in 00:38:16.360 --> 00:38:19.790 align:start position:0% change. I'll say, "Make the red color in the<00:38:16.600> admin<00:38:17.160> panel<00:38:18.200> green<00:38:18.840> instead."<00:38:19.520> So<00:38:19.680> we'll 00:38:19.790 --> 00:38:19.800 align:start position:0% the admin panel green instead." So we'll 00:38:19.800 --> 00:38:21.830 align:start position:0% the admin panel green instead." So we'll just<00:38:19.960> do<00:38:20.120> a<00:38:20.160> small<00:38:20.600> design<00:38:21.040> change<00:38:21.400> like<00:38:21.600> that 00:38:21.830 --> 00:38:21.840 align:start position:0% just do a small design change like that 00:38:21.840 --> 00:38:23.150 align:start position:0% just do a small design change like that right<00:38:22.000> here.<00:38:22.440> I'll<00:38:22.560> go<00:38:22.640> ahead<00:38:22.760> and<00:38:22.840> send<00:38:23.040> this 00:38:23.150 --> 00:38:23.160 align:start position:0% right here. I'll go ahead and send this 00:38:23.160 --> 00:38:25.430 align:start position:0% right here. I'll go ahead and send this change. 00:38:25.430 --> 00:38:25.440 align:start position:0% change. 00:38:25.440 --> 00:38:26.630 align:start position:0% change. And<00:38:25.520> then<00:38:25.600> we're<00:38:25.680> going<00:38:25.800> to<00:38:25.840> let<00:38:26.040> AI<00:38:26.200> Studio 00:38:26.630 --> 00:38:26.640 align:start position:0% And then we're going to let AI Studio 00:38:26.640 --> 00:38:27.950 align:start position:0% And then we're going to let AI Studio work<00:38:26.880> for<00:38:27.000> a<00:38:27.040> minute<00:38:27.320> to<00:38:27.400> change<00:38:27.760> out<00:38:27.880> the 00:38:27.950 --> 00:38:27.960 align:start position:0% work for a minute to change out the 00:38:27.960 --> 00:38:30.390 align:start position:0% work for a minute to change out the colors. 00:38:30.390 --> 00:38:30.400 align:start position:0% colors. 00:38:30.400 --> 00:38:31.910 align:start position:0% colors. And<00:38:30.520> now<00:38:30.680> here<00:38:30.960> in<00:38:31.040> the<00:38:31.120> preview<00:38:31.480> mode,<00:38:31.800> you 00:38:31.910 --> 00:38:31.920 align:start position:0% And now here in the preview mode, you 00:38:31.920 --> 00:38:33.590 align:start position:0% And now here in the preview mode, you can<00:38:32.080> see<00:38:32.200> that<00:38:32.320> it's<00:38:32.480> now<00:38:32.680> green.<00:38:33.200> To<00:38:33.360> push 00:38:33.590 --> 00:38:33.600 align:start position:0% can see that it's now green. To push 00:38:33.600 --> 00:38:35.350 align:start position:0% can see that it's now green. To push this<00:38:33.800> update<00:38:34.320> to<00:38:34.440> our<00:38:34.600> actual<00:38:35.040> live 00:38:35.350 --> 00:38:35.360 align:start position:0% this update to our actual live 00:38:35.360 --> 00:38:37.070 align:start position:0% this update to our actual live deployment,<00:38:36.080> go<00:38:36.160> to<00:38:36.240> the<00:38:36.360> top<00:38:36.680> right<00:38:37.000> and 00:38:37.070 --> 00:38:37.080 align:start position:0% deployment, go to the top right and 00:38:37.080 --> 00:38:39.830 align:start position:0% deployment, go to the top right and click<00:38:37.280> on<00:38:37.400> the<00:38:37.480> settings. 00:38:39.830 --> 00:38:39.840 align:start position:0% click on the settings. 00:38:39.840 --> 00:38:42.350 align:start position:0% click on the settings. Click<00:38:40.080> on<00:38:40.160> the<00:38:40.280> arrow. 00:38:42.350 --> 00:38:42.360 align:start position:0% Click on the arrow. 00:38:42.360 --> 00:38:46.190 align:start position:0% Click on the arrow. Then<00:38:42.520> click<00:38:42.720> on<00:38:42.840> GitHub. 00:38:46.190 --> 00:38:46.200 align:start position:0% 00:38:46.200 --> 00:38:48.590 align:start position:0% Then<00:38:46.360> we'll<00:38:46.480> scroll<00:38:46.800> down<00:38:47.000> to<00:38:47.040> the<00:38:47.160> bottom. 00:38:48.590 --> 00:38:48.600 align:start position:0% Then we'll scroll down to the bottom. 00:38:48.600 --> 00:38:53.230 align:start position:0% Then we'll scroll down to the bottom. Click<00:38:48.840> on<00:38:49.120> stage<00:38:49.480> and<00:38:49.560> commit<00:38:49.840> all<00:38:50.000> changes. 00:38:53.230 --> 00:38:53.240 align:start position:0% 00:38:53.240 --> 00:38:54.510 align:start position:0% And<00:38:53.320> then<00:38:53.440> your<00:38:53.560> changes<00:38:53.840> will<00:38:53.920> be<00:38:54.080> uploaded 00:38:54.510 --> 00:38:54.520 align:start position:0% And then your changes will be uploaded 00:38:54.520 --> 00:38:56.310 align:start position:0% And then your changes will be uploaded to<00:38:54.600> GitHub.<00:38:55.360> And<00:38:55.440> then<00:38:55.560> after<00:38:55.800> that,<00:38:56.040> switch 00:38:56.310 --> 00:38:56.320 align:start position:0% to GitHub. And then after that, switch 00:38:56.320 --> 00:38:59.230 align:start position:0% to GitHub. And then after that, switch back<00:38:56.560> over<00:38:56.800> to<00:38:56.920> your<00:38:57.040> web<00:38:57.240> app. 00:38:59.230 --> 00:38:59.240 align:start position:0% back over to your web app. 00:38:59.240 --> 00:39:03.830 align:start position:0% back over to your web app. And<00:38:59.360> then<00:38:59.520> refresh<00:39:00.000> the<00:39:00.080> page. 00:39:03.830 --> 00:39:03.840 align:start position:0% 00:39:03.840 --> 00:39:05.150 align:start position:0% And<00:39:03.960> then<00:39:04.080> as<00:39:04.200> you<00:39:04.280> can<00:39:04.400> see<00:39:04.600> right<00:39:04.800> here, 00:39:05.150 --> 00:39:05.160 align:start position:0% And then as you can see right here, 00:39:05.160 --> 00:39:06.990 align:start position:0% And then as you can see right here, Hostinger<00:39:05.720> automatically<00:39:06.280> redeployed<00:39:06.840> your 00:39:06.990 --> 00:39:07.000 align:start position:0% Hostinger automatically redeployed your 00:39:07.000 --> 00:39:09.150 align:start position:0% Hostinger automatically redeployed your app<00:39:07.320> with<00:39:07.440> those<00:39:07.640> updated<00:39:08.080> changes.<00:39:08.760> And<00:39:08.920> one 00:39:09.150 --> 00:39:09.160 align:start position:0% app with those updated changes. And one 00:39:09.160 --> 00:39:10.710 align:start position:0% app with those updated changes. And one small<00:39:09.440> detail<00:39:09.920> you'll<00:39:10.040> notice<00:39:10.360> here<00:39:10.520> at<00:39:10.600> the 00:39:10.710 --> 00:39:10.720 align:start position:0% small detail you'll notice here at the 00:39:10.720 --> 00:39:13.230 align:start position:0% small detail you'll notice here at the top<00:39:11.160> is<00:39:11.400> the<00:39:11.640> actual<00:39:12.000> site<00:39:12.360> name.<00:39:12.880> This<00:39:13.080> right 00:39:13.230 --> 00:39:13.240 align:start position:0% top is the actual site name. This right 00:39:13.240 --> 00:39:15.230 align:start position:0% top is the actual site name. This right here<00:39:13.480> is<00:39:13.640> the<00:39:13.840> default<00:39:14.280> name.<00:39:14.680> Every<00:39:14.960> Google 00:39:15.230 --> 00:39:15.240 align:start position:0% here is the default name. Every Google 00:39:15.240 --> 00:39:17.430 align:start position:0% here is the default name. Every Google AI<00:39:15.400> Studio<00:39:15.760> web<00:39:16.000> app<00:39:16.240> gets<00:39:16.440> this<00:39:16.640> name.<00:39:17.080> To<00:39:17.200> fix 00:39:17.430 --> 00:39:17.440 align:start position:0% AI Studio web app gets this name. To fix 00:39:17.440 --> 00:39:19.190 align:start position:0% AI Studio web app gets this name. To fix that<00:39:17.720> and<00:39:17.880> update<00:39:18.200> your<00:39:18.360> site<00:39:18.640> title,<00:39:19.080> you 00:39:19.190 --> 00:39:19.200 align:start position:0% that and update your site title, you 00:39:19.200 --> 00:39:20.670 align:start position:0% that and update your site title, you would<00:39:19.280> do<00:39:19.360> the<00:39:19.480> exact<00:39:19.840> same<00:39:20.080> thing.<00:39:20.480> You'd 00:39:20.670 --> 00:39:20.680 align:start position:0% would do the exact same thing. You'd 00:39:20.680 --> 00:39:22.470 align:start position:0% would do the exact same thing. You'd switch<00:39:20.920> back<00:39:21.160> over<00:39:21.360> to<00:39:21.480> AI<00:39:21.680> Studio<00:39:22.360> and 00:39:22.470 --> 00:39:22.480 align:start position:0% switch back over to AI Studio and 00:39:22.480 --> 00:39:24.030 align:start position:0% switch back over to AI Studio and request<00:39:22.840> the<00:39:22.960> change.<00:39:23.680> And<00:39:23.760> then<00:39:23.880> you<00:39:23.920> would 00:39:24.030 --> 00:39:24.040 align:start position:0% request the change. And then you would 00:39:24.040 --> 00:39:26.110 align:start position:0% request the change. And then you would commit<00:39:24.320> that<00:39:24.520> change<00:39:24.920> to<00:39:25.000> GitHub.<00:39:25.720> You'll<00:39:25.920> use 00:39:26.110 --> 00:39:26.120 align:start position:0% commit that change to GitHub. You'll use 00:39:26.120 --> 00:39:27.950 align:start position:0% commit that change to GitHub. You'll use the<00:39:26.240> workflow<00:39:26.760> I<00:39:26.880> just<00:39:27.120> showed<00:39:27.360> you<00:39:27.640> to<00:39:27.760> make 00:39:27.950 --> 00:39:27.960 align:start position:0% the workflow I just showed you to make 00:39:27.960 --> 00:39:30.030 align:start position:0% the workflow I just showed you to make any<00:39:28.120> changes<00:39:28.720> or<00:39:28.880> troubleshoot.<00:39:29.640> Now,<00:39:29.800> before 00:39:30.030 --> 00:39:30.040 align:start position:0% any changes or troubleshoot. Now, before 00:39:30.040 --> 00:39:31.590 align:start position:0% any changes or troubleshoot. Now, before we<00:39:30.160> finish<00:39:30.480> up<00:39:30.640> here,<00:39:31.040> let's<00:39:31.200> switch<00:39:31.400> back 00:39:31.590 --> 00:39:31.600 align:start position:0% we finish up here, let's switch back 00:39:31.600 --> 00:39:33.830 align:start position:0% we finish up here, let's switch back over<00:39:31.760> to<00:39:31.840> Hostinger. 00:39:33.830 --> 00:39:33.840 align:start position:0% over to Hostinger. 00:39:33.840 --> 00:39:37.310 align:start position:0% over to Hostinger. Then<00:39:34.000> let's<00:39:34.200> close<00:39:34.560> out<00:39:34.680> of<00:39:34.760> this. 00:39:37.310 --> 00:39:37.320 align:start position:0% 00:39:37.320 --> 00:39:39.310 align:start position:0% And<00:39:37.400> then<00:39:37.520> here<00:39:37.840> you'll<00:39:38.000> find<00:39:38.360> your<00:39:38.520> HPanel. 00:39:39.310 --> 00:39:39.320 align:start position:0% And then here you'll find your HPanel. 00:39:39.320 --> 00:39:40.590 align:start position:0% And then here you'll find your HPanel. This<00:39:39.440> is<00:39:39.560> where<00:39:39.680> you<00:39:39.760> can<00:39:39.920> manage<00:39:40.360> your 00:39:40.590 --> 00:39:40.600 align:start position:0% This is where you can manage your 00:39:40.600 --> 00:39:42.470 align:start position:0% This is where you can manage your deployment<00:39:41.240> and<00:39:41.360> your<00:39:41.480> hosting.<00:39:42.120> Right<00:39:42.280> here 00:39:42.470 --> 00:39:42.480 align:start position:0% deployment and your hosting. Right here 00:39:42.480 --> 00:39:43.950 align:start position:0% deployment and your hosting. Right here you<00:39:42.600> may<00:39:42.760> have<00:39:42.920> some<00:39:43.120> items<00:39:43.440> on<00:39:43.560> your<00:39:43.720> to-do 00:39:43.950 --> 00:39:43.960 align:start position:0% you may have some items on your to-do 00:39:43.960 --> 00:39:45.550 align:start position:0% you may have some items on your to-do list.<00:39:44.560> And<00:39:44.640> if<00:39:44.720> you<00:39:44.800> click<00:39:45.040> on<00:39:45.160> this<00:39:45.360> here<00:39:45.480> in 00:39:45.550 --> 00:39:45.560 align:start position:0% list. And if you click on this here in 00:39:45.560 --> 00:39:47.470 align:start position:0% list. And if you click on this here in the<00:39:45.640> top<00:39:45.880> left, 00:39:47.470 --> 00:39:47.480 align:start position:0% the top left, 00:39:47.480 --> 00:39:51.190 align:start position:0% the top left, and<00:39:47.640> then<00:39:47.800> click<00:39:48.000> on<00:39:48.120> websites, 00:39:51.190 --> 00:39:51.200 align:start position:0% 00:39:51.200 --> 00:39:54.990 align:start position:0% click<00:39:51.440> on<00:39:51.720> Node.js, 00:39:54.990 --> 00:39:55.000 align:start position:0% 00:39:55.000 --> 00:39:56.510 align:start position:0% you<00:39:55.120> should<00:39:55.360> see<00:39:55.480> your<00:39:55.640> web<00:39:55.840> app<00:39:55.960> listed<00:39:56.320> right 00:39:56.510 --> 00:39:56.520 align:start position:0% you should see your web app listed right 00:39:56.520 --> 00:40:02.790 align:start position:0% you should see your web app listed right here.<00:39:57.160> Underneath<00:39:57.560> it,<00:39:57.680> click<00:39:57.880> on<00:39:58.040> dashboard. 00:40:02.790 --> 00:40:02.800 align:start position:0% 00:40:02.800 --> 00:40:04.110 align:start position:0% And<00:40:02.920> then<00:40:03.040> right<00:40:03.280> here,<00:40:03.600> you'll<00:40:03.760> be<00:40:03.880> able<00:40:04.000> to 00:40:04.110 --> 00:40:04.120 align:start position:0% And then right here, you'll be able to 00:40:04.120 --> 00:40:05.750 align:start position:0% And then right here, you'll be able to see<00:40:04.400> all<00:40:04.560> of<00:40:04.640> the<00:40:04.760> information<00:40:05.280> regarding 00:40:05.750 --> 00:40:05.760 align:start position:0% see all of the information regarding 00:40:05.760 --> 00:40:07.310 align:start position:0% see all of the information regarding your<00:40:05.880> deployment.<00:40:06.560> You<00:40:06.680> can<00:40:06.800> access<00:40:07.200> your 00:40:07.310 --> 00:40:07.320 align:start position:0% your deployment. You can access your 00:40:07.320 --> 00:40:08.870 align:start position:0% your deployment. You can access your settings<00:40:07.680> right<00:40:07.840> here.<00:40:08.440> You'll<00:40:08.600> see<00:40:08.720> your 00:40:08.870 --> 00:40:08.880 align:start position:0% settings right here. You'll see your 00:40:08.880 --> 00:40:10.750 align:start position:0% settings right here. You'll see your current<00:40:09.160> deployment<00:40:10.080> and<00:40:10.240> then<00:40:10.360> some<00:40:10.560> other 00:40:10.750 --> 00:40:10.760 align:start position:0% current deployment and then some other 00:40:10.760 --> 00:40:12.710 align:start position:0% current deployment and then some other miscellaneous<00:40:11.280> information<00:40:11.920> down<00:40:12.120> here.<00:40:12.600> You 00:40:12.710 --> 00:40:12.720 align:start position:0% miscellaneous information down here. You 00:40:12.720 --> 00:40:14.150 align:start position:0% miscellaneous information down here. You may<00:40:12.880> see<00:40:13.000> some<00:40:13.120> information<00:40:13.680> regarding<00:40:14.040> your 00:40:14.150 --> 00:40:14.160 align:start position:0% may see some information regarding your 00:40:14.160 --> 00:40:16.070 align:start position:0% may see some information regarding your domain<00:40:14.600> right<00:40:14.760> here.<00:40:15.240> Make<00:40:15.440> sure<00:40:15.680> after<00:40:15.880> this 00:40:16.070 --> 00:40:16.080 align:start position:0% domain right here. Make sure after this 00:40:16.080 --> 00:40:17.950 align:start position:0% domain right here. Make sure after this video,<00:40:16.640> you<00:40:16.800> check<00:40:17.080> the<00:40:17.320> email<00:40:17.720> that<00:40:17.840> your 00:40:17.950 --> 00:40:17.960 align:start position:0% video, you check the email that your 00:40:17.960 --> 00:40:20.030 align:start position:0% video, you check the email that your domain<00:40:18.440> was<00:40:18.680> registered<00:40:19.120> to<00:40:19.560> and<00:40:19.680> you'll<00:40:19.800> find 00:40:20.030 --> 00:40:20.040 align:start position:0% domain was registered to and you'll find 00:40:20.040 --> 00:40:21.990 align:start position:0% domain was registered to and you'll find an<00:40:20.160> email<00:40:20.480> from<00:40:20.600> Hostinger<00:40:21.120> that<00:40:21.240> has<00:40:21.400> a<00:40:21.480> link. 00:40:21.990 --> 00:40:22.000 align:start position:0% an email from Hostinger that has a link. 00:40:22.000 --> 00:40:23.550 align:start position:0% an email from Hostinger that has a link. You<00:40:22.080> just<00:40:22.240> click<00:40:22.440> on<00:40:22.560> that<00:40:22.840> and<00:40:22.920> it<00:40:23.040> verifies 00:40:23.550 --> 00:40:23.560 align:start position:0% You just click on that and it verifies 00:40:23.560 --> 00:40:25.150 align:start position:0% You just click on that and it verifies your<00:40:23.680> domain.<00:40:24.400> And<00:40:24.520> if<00:40:24.600> you<00:40:24.680> ever<00:40:24.840> need<00:40:25.000> help 00:40:25.150 --> 00:40:25.160 align:start position:0% your domain. And if you ever need help 00:40:25.160 --> 00:40:26.710 align:start position:0% your domain. And if you ever need help with<00:40:25.320> finding<00:40:25.680> something<00:40:26.080> in<00:40:26.200> your<00:40:26.320> Hostinger 00:40:26.710 --> 00:40:26.720 align:start position:0% with finding something in your Hostinger 00:40:26.720 --> 00:40:29.430 align:start position:0% with finding something in your Hostinger dashboard,<00:40:27.480> go<00:40:27.600> to<00:40:27.680> the<00:40:27.800> top<00:40:28.080> right<00:40:29.000> and<00:40:29.240> click 00:40:29.430 --> 00:40:29.440 align:start position:0% dashboard, go to the top right and click 00:40:29.440 --> 00:40:31.670 align:start position:0% dashboard, go to the top right and click on<00:40:29.640> ask<00:40:29.960> AI. 00:40:31.670 --> 00:40:31.680 align:start position:0% on ask AI. 00:40:31.680 --> 00:40:33.590 align:start position:0% on ask AI. This<00:40:31.800> is<00:40:31.880> going<00:40:32.040> to<00:40:32.120> open<00:40:32.360> up<00:40:32.520> the<00:40:32.720> Cody<00:40:33.120> AI. 00:40:33.590 --> 00:40:33.600 align:start position:0% This is going to open up the Cody AI. 00:40:33.600 --> 00:40:35.230 align:start position:0% This is going to open up the Cody AI. You<00:40:33.680> can<00:40:33.840> ask<00:40:34.080> it<00:40:34.200> any<00:40:34.400> question<00:40:35.000> and<00:40:35.120> it's 00:40:35.230 --> 00:40:35.240 align:start position:0% You can ask it any question and it's 00:40:35.240 --> 00:40:36.870 align:start position:0% You can ask it any question and it's super<00:40:35.480> helpful.<00:40:36.080> And<00:40:36.200> if<00:40:36.280> it<00:40:36.400> can't<00:40:36.640> figure 00:40:36.870 --> 00:40:36.880 align:start position:0% super helpful. And if it can't figure 00:40:36.880 --> 00:40:38.110 align:start position:0% super helpful. And if it can't figure something<00:40:37.200> out<00:40:37.320> for<00:40:37.560> you,<00:40:37.800> it's<00:40:37.920> going<00:40:38.040> to 00:40:38.110 --> 00:40:38.120 align:start position:0% something out for you, it's going to 00:40:38.120 --> 00:40:39.750 align:start position:0% something out for you, it's going to connect<00:40:38.360> you<00:40:38.440> to<00:40:38.560> a<00:40:38.600> live<00:40:38.880> agent.<00:40:39.400> And<00:40:39.520> from<00:40:39.640> my 00:40:39.750 --> 00:40:39.760 align:start position:0% connect you to a live agent. And from my 00:40:39.760 --> 00:40:41.630 align:start position:0% connect you to a live agent. And from my experience,<00:40:40.280> it's<00:40:40.400> been<00:40:40.560> super<00:40:40.880> helpful.<00:40:41.520> And 00:40:41.630 --> 00:40:41.640 align:start position:0% experience, it's been super helpful. And 00:40:41.640 --> 00:40:43.390 align:start position:0% experience, it's been super helpful. And also,<00:40:41.920> let<00:40:42.040> me<00:40:42.120> give<00:40:42.240> you<00:40:42.360> a<00:40:42.440> quick<00:40:42.800> tour<00:40:43.240> of 00:40:43.390 --> 00:40:43.400 align:start position:0% also, let me give you a quick tour of 00:40:43.400 --> 00:40:45.550 align:start position:0% also, let me give you a quick tour of the<00:40:43.480> Firebase<00:40:44.080> console.<00:40:45.200> So,<00:40:45.320> I'm<00:40:45.360> going<00:40:45.480> to 00:40:45.550 --> 00:40:45.560 align:start position:0% the Firebase console. So, I'm going to 00:40:45.560 --> 00:40:48.070 align:start position:0% the Firebase console. So, I'm going to switch<00:40:45.680> back<00:40:45.840> over<00:40:46.000> to<00:40:46.080> Firebase. 00:40:48.070 --> 00:40:48.080 align:start position:0% switch back over to Firebase. 00:40:48.080 --> 00:40:49.870 align:start position:0% switch back over to Firebase. So,<00:40:48.320> at<00:40:48.440> the<00:40:48.520> top<00:40:48.800> here,<00:40:49.120> you<00:40:49.280> have<00:40:49.600> your 00:40:49.870 --> 00:40:49.880 align:start position:0% So, at the top here, you have your 00:40:49.880 --> 00:40:53.630 align:start position:0% So, at the top here, you have your project<00:40:50.360> overview.<00:40:51.160> I'll<00:40:51.240> click<00:40:51.440> into<00:40:51.680> it. 00:40:53.630 --> 00:40:53.640 align:start position:0% project overview. I'll click into it. 00:40:53.640 --> 00:40:55.190 align:start position:0% project overview. I'll click into it. This<00:40:53.800> gives<00:40:54.000> you<00:40:54.200> a<00:40:54.320> snapshot<00:40:55.000> of<00:40:55.080> your 00:40:55.190 --> 00:40:55.200 align:start position:0% This gives you a snapshot of your 00:40:55.200 --> 00:40:57.310 align:start position:0% This gives you a snapshot of your project,<00:40:56.040> including<00:40:56.520> what<00:40:56.640> plan<00:40:56.880> you're<00:40:57.080> on 00:40:57.310 --> 00:40:57.320 align:start position:0% project, including what plan you're on 00:40:57.320 --> 00:40:58.950 align:start position:0% project, including what plan you're on and<00:40:57.440> how<00:40:57.560> many<00:40:57.760> apps<00:40:58.040> you<00:40:58.120> have.<00:40:58.600> Down<00:40:58.800> here, 00:40:58.950 --> 00:40:58.960 align:start position:0% and how many apps you have. Down here, 00:40:58.960 --> 00:41:01.230 align:start position:0% and how many apps you have. Down here, you<00:40:59.040> can<00:40:59.200> see<00:40:59.560> a<00:40:59.720> quick<00:41:00.080> look<00:41:00.400> at<00:41:00.560> your<00:41:00.840> current 00:41:01.230 --> 00:41:01.240 align:start position:0% you can see a quick look at your current 00:41:01.240 --> 00:41:03.070 align:start position:0% you can see a quick look at your current reads<00:41:01.640> and<00:41:01.760> writes.<00:41:02.480> So,<00:41:02.640> if<00:41:02.760> you<00:41:02.800> ever<00:41:02.960> need 00:41:03.070 --> 00:41:03.080 align:start position:0% reads and writes. So, if you ever need 00:41:03.080 --> 00:41:04.670 align:start position:0% reads and writes. So, if you ever need to<00:41:03.160> check<00:41:03.440> how<00:41:03.520> your<00:41:03.720> app<00:41:03.880> is<00:41:04.000> performing, 00:41:04.670 --> 00:41:04.680 align:start position:0% to check how your app is performing, 00:41:04.680 --> 00:41:05.950 align:start position:0% to check how your app is performing, this<00:41:04.800> is<00:41:04.880> the<00:41:04.960> first<00:41:05.200> place<00:41:05.400> to<00:41:05.520> look. 00:41:05.950 --> 00:41:05.960 align:start position:0% this is the first place to look. 00:41:05.960 --> 00:41:07.310 align:start position:0% this is the first place to look. Underneath<00:41:06.360> that,<00:41:06.640> on<00:41:06.720> the<00:41:06.800> left,<00:41:07.080> you<00:41:07.160> have 00:41:07.310 --> 00:41:07.320 align:start position:0% Underneath that, on the left, you have 00:41:07.320 --> 00:41:08.950 align:start position:0% Underneath that, on the left, you have your<00:41:07.440> settings.<00:41:08.200> This<00:41:08.320> is<00:41:08.400> where<00:41:08.520> you'll<00:41:08.640> find 00:41:08.950 --> 00:41:08.960 align:start position:0% your settings. This is where you'll find 00:41:08.960 --> 00:41:10.630 align:start position:0% your settings. This is where you'll find things<00:41:09.240> like<00:41:09.360> your<00:41:09.480> billing<00:41:09.760> information, 00:41:10.630 --> 00:41:10.640 align:start position:0% things like your billing information, 00:41:10.640 --> 00:41:12.870 align:start position:0% things like your billing information, integrations,<00:41:11.600> service<00:41:11.920> accounts,<00:41:12.480> and<00:41:12.640> user 00:41:12.870 --> 00:41:12.880 align:start position:0% integrations, service accounts, and user 00:41:12.880 --> 00:41:14.830 align:start position:0% integrations, service accounts, and user permissions.<00:41:13.800> You<00:41:13.960> probably<00:41:14.400> won't<00:41:14.640> need<00:41:14.760> to 00:41:14.830 --> 00:41:14.840 align:start position:0% permissions. You probably won't need to 00:41:14.840 --> 00:41:16.390 align:start position:0% permissions. You probably won't need to touch<00:41:15.080> this<00:41:15.280> often,<00:41:15.880> but<00:41:16.000> if<00:41:16.080> you<00:41:16.160> ever<00:41:16.280> need 00:41:16.390 --> 00:41:16.400 align:start position:0% touch this often, but if you ever need 00:41:16.400 --> 00:41:18.350 align:start position:0% touch this often, but if you ever need to<00:41:16.480> manage<00:41:16.840> anything<00:41:17.320> on<00:41:17.480> the<00:41:17.560> account<00:41:17.920> level, 00:41:18.350 --> 00:41:18.360 align:start position:0% to manage anything on the account level, 00:41:18.360 --> 00:41:20.110 align:start position:0% to manage anything on the account level, it's<00:41:18.520> all<00:41:18.680> right<00:41:18.840> here.<00:41:19.480> Underneath<00:41:19.840> this, 00:41:20.110 --> 00:41:20.120 align:start position:0% it's all right here. Underneath this, 00:41:20.120 --> 00:41:22.190 align:start position:0% it's all right here. Underneath this, you<00:41:20.240> have<00:41:20.520> what's<00:41:20.800> new.<00:41:21.400> Firebase<00:41:21.840> shows<00:41:22.080> you 00:41:22.190 --> 00:41:22.200 align:start position:0% you have what's new. Firebase shows you 00:41:22.200 --> 00:41:24.230 align:start position:0% you have what's new. Firebase shows you new<00:41:22.360> features<00:41:22.920> and<00:41:23.040> updates.<00:41:23.760> Below<00:41:23.960> that, 00:41:24.230 --> 00:41:24.240 align:start position:0% new features and updates. Below that, 00:41:24.240 --> 00:41:25.750 align:start position:0% new features and updates. Below that, you'll<00:41:24.360> have<00:41:24.480> your<00:41:24.600> project<00:41:25.000> shortcuts. 00:41:25.750 --> 00:41:25.760 align:start position:0% you'll have your project shortcuts. 00:41:25.760 --> 00:41:26.990 align:start position:0% you'll have your project shortcuts. These<00:41:25.960> are<00:41:26.040> the<00:41:26.160> tools<00:41:26.440> that<00:41:26.560> we've<00:41:26.760> used 00:41:26.990 --> 00:41:27.000 align:start position:0% These are the tools that we've used 00:41:27.000 --> 00:41:28.510 align:start position:0% These are the tools that we've used throughout<00:41:27.240> this<00:41:27.360> video.<00:41:27.960> In<00:41:28.080> our<00:41:28.200> case,<00:41:28.440> we 00:41:28.510 --> 00:41:28.520 align:start position:0% throughout this video. In our case, we 00:41:28.520 --> 00:41:31.110 align:start position:0% throughout this video. In our case, we visited<00:41:28.840> Firestore,<00:41:29.800> authentication,<00:41:30.960> and 00:41:31.110 --> 00:41:31.120 align:start position:0% visited Firestore, authentication, and 00:41:31.120 --> 00:41:32.990 align:start position:0% visited Firestore, authentication, and storage.<00:41:31.840> So,<00:41:32.000> those<00:41:32.160> are<00:41:32.240> showing<00:41:32.520> up<00:41:32.640> here. 00:41:32.990 --> 00:41:33.000 align:start position:0% storage. So, those are showing up here. 00:41:33.000 --> 00:41:34.670 align:start position:0% storage. So, those are showing up here. You'll<00:41:33.160> visit<00:41:33.480> these<00:41:33.680> three<00:41:33.920> tabs<00:41:34.320> the<00:41:34.440> most 00:41:34.670 --> 00:41:34.680 align:start position:0% You'll visit these three tabs the most 00:41:34.680 --> 00:41:36.030 align:start position:0% You'll visit these three tabs the most often.<00:41:35.360> And<00:41:35.480> then<00:41:35.600> all<00:41:35.720> the<00:41:35.800> way<00:41:35.880> at<00:41:35.960> the 00:41:36.030 --> 00:41:36.040 align:start position:0% often. And then all the way at the 00:41:36.040 --> 00:41:37.190 align:start position:0% often. And then all the way at the bottom,<00:41:36.560> you<00:41:36.680> have<00:41:36.760> your<00:41:36.880> product 00:41:37.190 --> 00:41:37.200 align:start position:0% bottom, you have your product 00:41:37.200 --> 00:41:39.270 align:start position:0% bottom, you have your product categories.<00:41:38.080> This<00:41:38.240> includes<00:41:38.600> databases<00:41:39.160> and 00:41:39.270 --> 00:41:39.280 align:start position:0% categories. This includes databases and 00:41:39.280 --> 00:41:42.390 align:start position:0% categories. This includes databases and storage,<00:41:40.040> security,<00:41:40.960> AI<00:41:41.160> services,<00:41:42.040> hosting 00:41:42.390 --> 00:41:42.400 align:start position:0% storage, security, AI services, hosting 00:41:42.400 --> 00:41:44.630 align:start position:0% storage, security, AI services, hosting and<00:41:42.520> serverless,<00:41:43.360> devops<00:41:43.800> and<00:41:43.880> engagement, 00:41:44.630 --> 00:41:44.640 align:start position:0% and serverless, devops and engagement, 00:41:44.640 --> 00:41:46.230 align:start position:0% and serverless, devops and engagement, and<00:41:44.800> analytics.<00:41:45.560> The<00:41:45.680> ones<00:41:45.920> here<00:41:46.040> at<00:41:46.120> the 00:41:46.230 --> 00:41:46.240 align:start position:0% and analytics. The ones here at the 00:41:46.240 --> 00:41:48.630 align:start position:0% and analytics. The ones here at the bottom<00:41:46.720> are<00:41:46.840> more<00:41:47.040> advanced<00:41:48.000> and<00:41:48.160> you'll<00:41:48.360> only 00:41:48.630 --> 00:41:48.640 align:start position:0% bottom are more advanced and you'll only 00:41:48.640 --> 00:41:50.710 align:start position:0% bottom are more advanced and you'll only really<00:41:48.880> visit<00:41:49.240> the<00:41:49.400> databases<00:41:50.000> and<00:41:50.120> storage 00:41:50.710 --> 00:41:50.720 align:start position:0% really visit the databases and storage 00:41:50.720 --> 00:41:52.710 align:start position:0% really visit the databases and storage and<00:41:50.880> security<00:41:51.360> tabs.<00:41:52.080> You<00:41:52.200> just<00:41:52.400> built<00:41:52.600> and 00:41:52.710 --> 00:41:52.720 align:start position:0% and security tabs. You just built and 00:41:52.720 --> 00:41:54.630 align:start position:0% and security tabs. You just built and launched<00:41:53.240> a<00:41:53.400> real<00:41:53.760> web<00:41:53.920> application<00:41:54.480> from 00:41:54.630 --> 00:41:54.640 align:start position:0% launched a real web application from 00:41:54.640 --> 00:41:57.070 align:start position:0% launched a real web application from scratch,<00:41:55.360> all<00:41:55.600> using<00:41:55.880> Google<00:41:56.160> AI<00:41:56.320> Studio, 00:41:57.070 --> 00:41:57.080 align:start position:0% scratch, all using Google AI Studio, 00:41:57.080 --> 00:41:59.070 align:start position:0% scratch, all using Google AI Studio, Firebase,<00:41:57.920> and<00:41:58.080> Hostinger.<00:41:58.760> And<00:41:58.880> if<00:41:59.000> you 00:41:59.070 --> 00:41:59.080 align:start position:0% Firebase, and Hostinger. And if you 00:41:59.080 --> 00:42:00.510 align:start position:0% Firebase, and Hostinger. And if you haven't<00:41:59.320> signed<00:41:59.560> up<00:41:59.680> for<00:41:59.760> your<00:41:59.880> hosting<00:42:00.240> plan 00:42:00.510 --> 00:42:00.520 align:start position:0% haven't signed up for your hosting plan 00:42:00.520 --> 00:42:02.390 align:start position:0% haven't signed up for your hosting plan yet,<00:42:01.040> go<00:42:01.160> to<00:42:01.240> this<00:42:01.480> link<00:42:01.720> on<00:42:01.920> screen<00:42:02.200> right 00:42:02.390 --> 00:42:02.400 align:start position:0% yet, go to this link on screen right 00:42:02.400 --> 00:42:04.150 align:start position:0% yet, go to this link on screen right here<00:42:03.000> or<00:42:03.160> click<00:42:03.400> the<00:42:03.480> first<00:42:03.760> link<00:42:04.000> in<00:42:04.080> the 00:42:04.150 --> 00:42:04.160 align:start position:0% here or click the first link in the 00:42:04.160 --> 00:42:05.870 align:start position:0% here or click the first link in the video<00:42:04.360> description.<00:42:05.200> Using<00:42:05.440> that<00:42:05.600> link<00:42:05.800> will 00:42:05.870 --> 00:42:05.880 align:start position:0% video description. Using that link will 00:42:05.880 --> 00:42:07.510 align:start position:0% video description. Using that link will make<00:42:06.040> sure<00:42:06.400> you<00:42:06.520> get<00:42:06.680> the<00:42:06.800> lowest<00:42:07.160> pricing 00:42:07.510 --> 00:42:07.520 align:start position:0% make sure you get the lowest pricing 00:42:07.520 --> 00:42:09.630 align:start position:0% make sure you get the lowest pricing available.<00:42:08.200> If<00:42:08.360> this<00:42:08.560> video<00:42:08.840> helped<00:42:09.080> you<00:42:09.200> out, 00:42:09.630 --> 00:42:09.640 align:start position:0% available. If this video helped you out, 00:42:09.640 --> 00:42:11.270 align:start position:0% available. If this video helped you out, make<00:42:09.760> sure<00:42:09.880> to<00:42:09.960> hit<00:42:10.080> like<00:42:10.560> and<00:42:10.680> subscribe<00:42:11.160> for 00:42:11.270 --> 00:42:11.280 align:start position:0% make sure to hit like and subscribe for 00:42:11.280 --> 00:42:13.470 align:start position:0% make sure to hit like and subscribe for more<00:42:11.440> tutorials<00:42:12.160> just<00:42:12.400> like<00:42:12.600> this.<00:42:13.200> I'll<00:42:13.320> see 00:42:13.470 --> 00:42:13.480 align:start position:0% more tutorials just like this. I'll see 00:42:13.480 --> 00:42:16.280 align:start position:0% more tutorials just like this. I'll see you<00:42:13.560> in<00:42:13.600> the<00:42:13.680> next<00:42:13.880> video.