| Time | Text |
|---|
| 0:00 | This is the complete guide to building |
| 0:02 | and launching real web applications |
| 0:04 | using Google AI Studio and Firebase. |
| 0:06 | Whether you've never used AI Studio |
| 0:08 | before or you already have a project and |
| 0:11 | you're not sure what to do next, this |
| 0:12 | video is for you. Maybe you're building |
| 0:14 | a website, a web application, or a SaaS |
| 0:17 | idea you've been thinking about. |
| 0:19 | Whatever it is, I've got you covered. |
| 0:20 | And if any of this sounds complicated, |
| 0:23 | don't worry. I've taken my time building |
| 0:24 | this tutorial to make sure it's as easy |
| 0:27 | to follow as possible, even if you've |
| 0:29 | never done anything like this before. |
| 0:30 | So, here's the road map for this video. |
| 0:33 | We'll start by building the app in |
| 0:34 | Google AI Studio. AI Studio is a free |
| 0:37 | tool where you describe the app you want |
| 0:38 | to build and it generates a working |
| 0:40 | project for you. No coding needed. |
| 0:42 | During the build, we'll enable Firebase, |
| 0:44 | which is what gives your app a real |
| 0:46 | working back end. It manages things like |
| 0:48 | user accounts, a database, and file |
| 0:50 | storage. And it's also free to get |
| 0:52 | started with. From there, we'll make |
| 0:54 | sure everything is configured properly, |
| 0:55 | test the app, fix anything that isn't |
| 0:57 | working, and even set up an admin |
| 0:59 | dashboard so you can see all of your |
| 1:01 | users and data in one organized place. |
| 1:04 | Then, we'll deploy it live on a real |
| 1:05 | domain using hosting. [music] That's the |
| 1:07 | one part of the setup that isn't free, |
| 1:09 | but I'll walk you through a really easy |
| 1:10 | and affordable setup for this later on. |
| 1:12 | Now, one of the hardest parts of putting |
| 1:14 | this video together was figuring out |
| 1:16 | what app to actually build as the demo. |
| 1:18 | Because this video isn't about building |
| 1:20 | a one specific thing. It's a video |
| 1:22 | that's meant to teach you how to build |
| 1:23 | your own web application with a working |
| 1:25 | back end. So, the app I chose to build |
| 1:27 | in front of you had to be the right one. |
| 1:30 | It had to be simple enough to follow |
| 1:31 | along with, but complex enough to teach |
| 1:33 | you everything you need to know. And |
| 1:35 | after a lot of thought, here's what I |
| 1:36 | came up with. This is a web app called |
| 1:38 | Client Vault. It's a simple file portal |
| 1:40 | that a freelancer or designer would use |
| 1:43 | to let their clients log in and upload |
| 1:44 | files like videos, documents, or images. |
| 1:47 | And I chose this specific project for a |
| 1:49 | reason. Let me show you what it can do. |
| 1:51 | In this app, a user can create an |
| 1:52 | account with their email and password, |
| 1:54 | sign in and sign out. So, every user |
| 1:56 | gets their own private space inside the |
| 1:58 | app. If they sign out and come back |
| 2:00 | later, all of their data is still right |
| 2:02 | there. Nothing ever disappears. They can |
| 2:04 | upload files, and those files are stored |
| 2:06 | securely in the cloud. They can view |
| 2:08 | them, download them, delete them, and |
| 2:10 | only they have access to their own |
| 2:12 | stuff. And all of this works together. |
| 2:14 | » [music] |
| 2:14 | » Every button, every page, every feature |
| 2:16 | is talking to the back end behind the |
| 2:18 | scenes to make it all function. Now, |
| 2:20 | this isn't just a design or a static |
| 2:22 | website. This is a real web application. |
| 2:24 | And everything I just showed you comes |
| 2:26 | down to four things: user |
| 2:27 | authentication, a database, file |
| 2:30 | storage, and connecting it all to the |
| 2:31 | UI. Those are the four pillars of |
| 2:33 | building any real web application, and |
| 2:35 | they're exactly what I'm going to teach |
| 2:37 | you in this video. We'll set each of |
| 2:39 | these pillars up one by one, so that by |
| 2:41 | the end, you have a fully working web |
| 2:43 | application. And these pillars are |
| 2:44 | really important to understand because |
| 2:46 | they apply to everything you build, not |
| 2:48 | just this one project. That's why I |
| 2:50 | chose to build Client Vault as the demo |
| 2:52 | for this tutorial. It's a simple app, |
| 2:54 | but it relies on all four of these |
| 2:55 | pillars to function, and it's really the |
| 2:57 | perfect project to learn the core |
| 2:58 | concepts behind building any real web |
| 3:00 | app. So, whether you follow along with |
| 3:02 | my build or use it as a guide for your |
| 3:04 | own project, you'll be able to take what |
| 3:06 | you learn here in this video and apply |
| 3:08 | it to anything you create next in AI |
| 3:10 | Studio. |
| 3:12 | All right, let's go ahead and get |
| 3:13 | started with building the web app. |
| 3:14 | First, head over to Google AI Studio. If |
| 3:17 | you've never used it before, just go to |
| 3:19 | the link I'll leave in the description |
| 3:20 | and sign up with your Google account. |
| 3:22 | It's completely free. So, I'll go to the |
| 3:24 | top right here and click on get started. |
| 3:28 | I'll select my Google account right here |
| 3:32 | and enter my password. |
| 3:36 | And then once you're signed in, you'll |
| 3:37 | see the main dashboard right here. All |
| 3:39 | right, so before I type in my prompt, |
| 3:41 | let me show you how I like to format it. |
| 3:42 | Because the way you structure your |
| 3:43 | prompt makes a huge difference in the |
| 3:45 | quality of what AI Studio gives you back |
| 3:47 | on the first try. And this format works |
| 3:49 | for any project, not just the one I'm |
| 3:51 | building. I break every prompt down into |
| 3:53 | four parts. The first part is what it |
| 3:56 | is. |
| 3:56 | » This is where you give your app a name |
| 3:58 | and describe what it does in a sentence |
| 3:59 | or two. You're giving AI Studio the big |
| 4:01 | picture so it understands the overall |
| 4:03 | purpose of what you're building. The |
| 4:05 | second part is what it needs. This is |
| 4:07 | where you list out the specific pages |
| 4:08 | and features your app should have. |
| 4:10 | Things like a login page, a dashboard, |
| 4:13 | specific buttons, whatever your app |
| 4:15 | requires. The more detail you put here, |
| 4:17 | the better your result is going to be. |
| 4:19 | The third part is how it looks. This is |
| 4:21 | where you describe the design, the |
| 4:22 | colors, the layout, the overall feel. |
| 4:24 | You don't need to be a designer for |
| 4:26 | this. Just describe it in plain terms. |
| 4:28 | AI Studio will take that and turn it |
| 4:30 | into something that actually looks |
| 4:31 | really good. And the fourth part is |
| 4:33 | back-end features. This is where you |
| 4:34 | tell AI Studio what your app needs to |
| 4:37 | function behind the scenes. If you |
| 4:38 | remember the four pillars we talked |
| 4:40 | about in the intro, this is where they |
| 4:41 | come in. But if you're just starting out |
| 4:43 | and you're not totally sure what your |
| 4:45 | app needs on the back end, that's okay, |
| 4:46 | [music] too. If you've done a good job |
| 4:48 | describing your app and its features in |
| 4:50 | the earlier parts of the prompt, you can |
| 4:52 | just ask AI Studio to set up a back-end |
| 4:54 | for you and figure out what your app |
| 4:56 | needs to function. But whenever you can, |
| 4:57 | being specific about what you need will |
| 4:59 | always give you a better result. And by |
| 5:01 | including this section in your prompt |
| 5:03 | from the start, AI Studio will set up |
| 5:05 | Firebase for you automatically. This is |
| 5:07 | the step that turns your project from |
| 5:09 | something that just looks good into a |
| 5:11 | real working web application. All right, |
| 5:13 | so to recap what we just covered here |
| 5:14 | before we jump back into AI Studio, |
| 5:16 | here's the formula for writing any |
| 5:18 | prompt. First, describe what your |
| 5:19 | project is, what it needs, how it looks, |
| 5:22 | and the back-end features that it should |
| 5:24 | have. |
| 5:24 | » Structure your prompt just like this for |
| 5:27 | any project you make in AI Studio, and |
| 5:29 | it's going to handle the rest for you. |
| 5:31 | And I want to quickly mention here that |
| 5:32 | if any of this feels overwhelming, I've |
| 5:34 | actually gone ahead and created a full |
| 5:36 | Google AI Studio Firebase guide that's |
| 5:38 | linked in the video description. So |
| 5:40 | right now, I'd recommend going down to |
| 5:41 | the description and opening up that |
| 5:43 | guide in a new tab. All right, so now |
| 5:45 | let's switch back over to AI Studio, and |
| 5:47 | I'll put in my prompt right here. |
| 5:49 | Then I'll scroll up to the top, and |
| 5:51 | let's start here at the beginning. I |
| 5:53 | have the what it is part here. I'm |
| 5:55 | telling AI Studio that I want to build a |
| 5:56 | web app called Client Vault. It's a |
| 5:58 | client file portal where freelancers and |
| 6:00 | designers can let their clients securely |
| 6:02 | upload and manage files. So here I'm |
| 6:04 | giving AI Studio the big picture in just |
| 6:06 | two sentences. And below this, I have |
| 6:09 | what my project needs. I'm listing out |
| 6:11 | all of the essential features. And at |
| 6:12 | the bottom here, I also include this |
| 6:14 | line. This says to include any other |
| 6:16 | features or functionality needed to make |
| 6:18 | this app work properly that aren't |
| 6:20 | listed here. I like to include this line |
| 6:22 | because there's always going to be small |
| 6:24 | things that you might not think to list, |
| 6:26 | but AI Studio will know that they're |
| 6:27 | needed. So you give it the essentials |
| 6:29 | and let it fill in the gaps. And then |
| 6:31 | below this, I describe how my app should |
| 6:33 | look. Here I'm just giving some general |
| 6:35 | guidance regarding the design of the |
| 6:37 | project. It doesn't have to be anything |
| 6:38 | super complicated. And then at the |
| 6:40 | bottom here, we have a big one. This is |
| 6:42 | where we list out the back-end features |
| 6:44 | that we want. Here I'm telling AI Studio |
| 6:46 | that I need user authentication, a |
| 6:48 | database, file storage, and security |
| 6:51 | rules. These are the four pillars we |
| 6:53 | talked about in the intro. And by |
| 6:54 | putting them right here in the prompt, |
| 6:56 | AI Studio knows to set all of this up |
| 6:58 | for me automatically. So with our prompt |
| 7:00 | ready to go, I'm going to go to the |
| 7:01 | bottom right here and click on build. |
| 7:07 | Now here on the right-hand side is going |
| 7:09 | to be your preview panel. And then on |
| 7:10 | the left side here, you'll get a live |
| 7:12 | look at what's happening regarding the |
| 7:13 | build of your project. You also may be |
| 7:15 | asked questions regarding your project |
| 7:17 | here on the left or on the right. So I'm |
| 7:19 | going to wait for a moment here and see |
| 7:21 | what happens next. |
| 7:24 | So right here we're being asked a |
| 7:25 | question about how we want the design of |
| 7:27 | our project to look. We have a few |
| 7:29 | different options here. I can click on |
| 7:31 | the arrows to look through each of them. |
| 7:33 | And I think I'll go for this one right |
| 7:34 | here. So I'll click on select this |
| 7:36 | design. |
| 7:37 | And I'll wait for a few moments and see |
| 7:39 | if AI Studio needs me for anything else. |
| 7:43 | Okay, so now at some point during this |
| 7:44 | process, you'll see this pop up here |
| 7:46 | that says enable Firebase. This is AI |
| 7:48 | Studio recognizing that your app needs a |
| 7:50 | real back end, and it's asking for your |
| 7:52 | permission to set it up. Go ahead and |
| 7:54 | click on enable Firebase. |
| 7:58 | This is going to create your Firebase |
| 7:59 | project, set up your database, configure |
| 8:01 | authentication, and connect everything |
| 8:03 | to your app. All of that happens |
| 8:05 | automatically just by clicking this one |
| 8:07 | button. Now, let's wait for a few more |
| 8:08 | moments here and see what happens next. |
| 8:12 | And once everything is done, AI Studio |
| 8:14 | will now give you the initial build of |
| 8:16 | both your front end and your back end. |
| 8:18 | And now, you might be tempted here to |
| 8:20 | jump in and start testing your app and |
| 8:22 | looking around at the design and all of |
| 8:23 | the pages, but I'd recommend holding off |
| 8:25 | on that for now. The first thing we want |
| 8:27 | to do here is jump into the back end and |
| 8:30 | verify [music] that everything is set up |
| 8:31 | and connected properly. AI Studio set up |
| 8:34 | a front end and a back end for us, but |
| 8:36 | we want to make sure everything on the |
| 8:37 | back end side is configured the right |
| 8:39 | way before we start making any changes |
| 8:41 | to the front end. That way, once the |
| 8:43 | back end is established, all of the |
| 8:45 | changes you make going forward will be |
| 8:47 | on the final version of your app, and |
| 8:49 | nothing is going to get overwritten or |
| 8:51 | broken. So, we'll take care of that |
| 8:52 | first. Now, to access your back end, you |
| 8:55 | need to go to the Firebase console, |
| 8:57 | which is on a separate website. So, let |
| 8:59 | me show you how to get there and how to |
| 9:00 | navigate it so you can start making the |
| 9:02 | changes that we need. |
| 9:03 | To access our Firebase console, go to |
| 9:06 | the top and open up a new tab. |
| 9:09 | And then, you'll go to |
| 9:10 | console.firebase.google.com. |
| 9:14 | I'll leave this link in the description |
| 9:15 | as well. So, I'll go to this link here. |
| 9:19 | And then, on the right side, you'll see |
| 9:21 | your project right here. Go ahead and |
| 9:23 | click into it. |
| 9:27 | Close out of this. |
| 9:29 | And here is your Firebase console. This |
| 9:31 | is where you can see and manage |
| 9:33 | everything that's happening behind the |
| 9:34 | scenes of your app. Stuff like your user |
| 9:36 | accounts, database, file storage, |
| 9:39 | security rules, all of that lives right |
| 9:41 | here. Anytime you need to check on |
| 9:42 | something or make a change to your back |
| 9:44 | end, this is where you'll go. Now, the |
| 9:46 | first thing that we need to do here is |
| 9:48 | check authentication. Let's go over to |
| 9:50 | the left side right here and hover over |
| 9:52 | security. Click into authentication. |
| 9:57 | From here, go to the top and click on |
| 9:59 | sign-in method. |
| 10:02 | What you'll see here is a list of |
| 10:03 | sign-in providers. AI Studio |
| 10:05 | automatically enabled Google sign-in for |
| 10:07 | us, which is great. But, if you want |
| 10:09 | your users to be able to sign up with an |
| 10:10 | email and password, which most apps |
| 10:12 | need, we have to turn that on ourselves. |
| 10:14 | So, over here on the right side, click |
| 10:16 | on add new provider. |
| 10:19 | And here, click on email and password. |
| 10:23 | And we'll enable this right here. |
| 10:26 | And click save. |
| 10:29 | And now, with that change made, our |
| 10:31 | users will be able to sign up on our web |
| 10:32 | app using their email and password. The |
| 10:35 | second thing that we'll set up here is |
| 10:36 | file storage. On the left side menu, |
| 10:38 | look for databases and storage, then |
| 10:41 | click into storage here. |
| 10:45 | When you open this for the first time, |
| 10:47 | Firebase is going to ask you to upgrade |
| 10:49 | to the Blaze plan. Don't worry, because |
| 10:51 | this is completely normal. Firebase |
| 10:53 | storage requires a billing account to be |
| 10:54 | on file before you can use it. But, |
| 10:56 | here's the important thing to |
| 10:57 | understand. You're not signing up for a |
| 10:59 | paid subscription. Firebase's Blaze plan |
| 11:02 | is pay-as-you-go, which means you only |
| 11:04 | get charged for what you actually use |
| 11:06 | beyond the free tier. And the free tier |
| 11:08 | is actually really generous. You get 5 |
| 11:10 | gigs of storage, 1 gig per day of |
| 11:12 | downloads, and 50,000 read operations |
| 11:15 | per day. For context, you would have to |
| 11:17 | be running [music] a pretty active app |
| 11:18 | to even come close to those numbers. For |
| 11:21 | learning, building, and testing, you're |
| 11:23 | most likely not going to pay a cent. So, |
| 11:25 | let's click on upgrade project. |
| 11:29 | Then, scroll down and click on create a |
| 11:31 | cloud billing account. |
| 11:35 | Click on agree and continue. |
| 11:41 | And then here you'll need to fill out |
| 11:42 | your contact information and payment |
| 11:44 | method. |
| 11:46 | And once you're done with that, click on |
| 11:48 | start free. |
| 11:52 | Now, depending on your payment method, |
| 11:54 | you might see a pop-up here asking for a |
| 11:56 | one-time $10 prepayment. This is just |
| 11:58 | Google verifying your payment method and |
| 12:00 | it's not a charge for Firebase. Once |
| 12:02 | it's credited to your account, you'll |
| 12:04 | also get free trial credits. And if you |
| 12:06 | ever close your billing account, the $10 |
| 12:08 | is refundable. So, I'll click on okay |
| 12:10 | right here. |
| 12:14 | Now, here Firebase will give you an |
| 12:15 | option to set a billing budget. I'd |
| 12:17 | recommend setting this to something low. |
| 12:19 | Something like $5 will work. |
| 12:22 | That way if your usage ever gets close |
| 12:24 | to that amount, Firebase is going to |
| 12:26 | send you an email so there's no |
| 12:27 | surprises. You can think of this as a |
| 12:29 | safety net. Let's go down and click on |
| 12:31 | continue. |
| 12:33 | And we'll scroll down right here and |
| 12:35 | click on link cloud billing account. |
| 12:39 | And here I'll scroll down and click on |
| 12:41 | done. |
| 12:43 | Then once everything is set up, it's |
| 12:45 | going to ask you to set up a default |
| 12:46 | bucket. A bucket is just where Firebase |
| 12:48 | stores all of your uploaded files. Think |
| 12:50 | of it as a folder in the cloud that |
| 12:52 | holds everything your users upload to |
| 12:54 | your app. We're going to choose the no |
| 12:56 | cost location option and go down and |
| 12:58 | click on continue. |
| 13:01 | And then here we want to make sure that |
| 13:02 | we start in production mode and then |
| 13:04 | click on create. |
| 13:08 | Okay, so now we just set up our storage |
| 13:10 | bucket. This is where all of the files |
| 13:12 | that your users upload are going to be |
| 13:14 | stored. And if you click on the rules |
| 13:16 | tab here at the top, |
| 13:18 | this is where the security rules for |
| 13:20 | your file storage live. We'll come back |
| 13:22 | here a little bit later on in the video |
| 13:24 | and update these once we have a few more |
| 13:25 | things set up. So, to recap everything |
| 13:28 | that we just did before we move on, we |
| 13:30 | successfully set up our storage bucket, |
| 13:32 | and earlier we enabled email and |
| 13:33 | password authentication. There are some |
| 13:35 | other things in the Firebase console |
| 13:37 | that we need to come back to a little |
| 13:38 | bit later on in the video, but for now, |
| 13:40 | these are the two things that we had to |
| 13:42 | get done here before we can test our |
| 13:44 | app. Now, let's go ahead and head back |
| 13:45 | over to AI Studio and let it know what |
| 13:47 | we just configured here in the Firebase |
| 13:49 | console. That way you can make sure |
| 13:51 | everything in our app is properly |
| 13:52 | connected to the changes that we just |
| 13:54 | made. So, I'll go ahead and head back |
| 13:55 | over to AI Studio here. |
| 13:58 | And I'll go ahead and enter this prompt. |
| 14:01 | It says, "Here's what I've configured in |
| 14:02 | the Firebase console. The first thing is |
| 14:04 | that I enabled email and password |
| 14:06 | authentication as a sign-in provider, |
| 14:08 | and second, I set up a Firebase storage |
| 14:10 | with a default bucket in production |
| 14:12 | mode." At the bottom here, I say, |
| 14:14 | "Please make sure the app's file upload |
| 14:16 | feature is fully connected to Firebase |
| 14:17 | storage, and that the email password |
| 14:19 | authentication flow is working correctly |
| 14:21 | for both sign-up and sign-in." So, here |
| 14:23 | what we're doing is giving AI Studio the |
| 14:25 | context of exactly what's changed within |
| 14:28 | Firebase on the back end. And I would |
| 14:30 | highly recommend doing this anytime you |
| 14:32 | change anything within the back end of |
| 14:34 | your app using Firebase. You just want |
| 14:35 | to give AI Studio the context of what's |
| 14:37 | changed. That way it's able to work |
| 14:39 | through the code for you and make sure |
| 14:41 | everything is working properly. So, |
| 14:43 | let's go ahead and send this prompt |
| 14:44 | here. |
| 14:46 | And let's wait for a few moments and |
| 14:47 | make sure everything is updated |
| 14:49 | properly. |
| 14:51 | Awesome. Now, as you can see right here, |
| 14:53 | it appears that everything is good to |
| 14:54 | go. |
| 14:55 | All right. So, the next step is for us |
| 14:57 | to jump in and start testing out our web |
| 14:59 | app. But first, here's where we are so |
| 15:01 | far. We now have a front end built. AI |
| 15:03 | Studio built it all for us. That's our |
| 15:05 | app's interface, the pages, the buttons, |
| 15:08 | the layout, everything the user sees and |
| 15:10 | interacts with. That's done. |
| 15:11 | » We also have a database set up for our |
| 15:14 | back end. That was created for us |
| 15:15 | automatically when we clicked enable |
| 15:17 | Firebase during the build. The database |
| 15:19 | is what stores all of your app's data, |
| 15:21 | user information, file details, and |
| 15:24 | anything else your app needs to |
| 15:25 | remember. We have email and password |
| 15:27 | authentication enabled, so users can |
| 15:29 | create accounts, log in, and log out, |
| 15:31 | and we have storage configured, which is |
| 15:33 | where all of the actual files that users |
| 15:35 | upload are going to live. And because we |
| 15:38 | have that database in place, all of |
| 15:39 | this, every account that gets created, |
| 15:41 | every file that gets uploaded, every |
| 15:43 | piece of data your app collects, all of |
| 15:45 | that is going to be stored and exist |
| 15:47 | permanently. Now, in the intro, I |
| 15:49 | mentioned the four pillars of setting up |
| 15:51 | a real back end for any web app. Here's |
| 15:53 | where we currently are. The first |
| 15:55 | [music] three pillars, which are user |
| 15:56 | authentication, a database, and file |
| 15:58 | storage, are now set up. We've now |
| 16:01 | arrived at the last pillar, which is |
| 16:02 | connecting everything to the UI. And |
| 16:04 | this one is a little different from the |
| 16:06 | first three, because it's not something |
| 16:08 | that you just toggle on and it works. It |
| 16:10 | changes depending on what you're |
| 16:11 | building. Every app is different, and |
| 16:14 | the things that need to be connected and |
| 16:15 | the problems you might run into will |
| 16:17 | vary depending on your project. But, |
| 16:19 | here's the general idea for how this |
| 16:21 | works with any project. We need to go |
| 16:23 | into the app, test every feature, and |
| 16:26 | take note of anything that isn't working |
| 16:28 | the way it should. In your case, maybe |
| 16:29 | sign in doesn't work. You can note that |
| 16:31 | [music] down. Maybe a button isn't doing |
| 16:33 | what it's supposed to do. You can add |
| 16:35 | that to your list. Maybe files aren't |
| 16:37 | uploading or data isn't saving. |
| 16:39 | » Whatever it is, just make a note of it |
| 16:40 | as you go. Then, once you've gone |
| 16:42 | through and tested everything, you go |
| 16:44 | back to AI Studio and work through your |
| 16:45 | list one issue at a time. You just |
| 16:48 | describe the problem, let AI Studio fix |
| 16:50 | it, test it again, and then move on to |
| 16:52 | the next one. And you want to keep it to |
| 16:53 | one issue per prompt, so that way each |
| 16:56 | fix is clean and doesn't accidentally |
| 16:58 | break something else. Now, if you run |
| 17:00 | into something that is completely |
| 17:01 | blocking you, like you can't even sign |
| 17:03 | in to your app, you'll want to go ahead |
| 17:05 | and fix that as a prompt right away, so |
| 17:07 | you can get past it and keep testing the |
| 17:08 | rest of your app. You're going to watch |
| 17:10 | me go through this process for my app. |
| 17:12 | And the specific problems I run into are |
| 17:15 | are going to be different from what you |
| 17:16 | run into, depending on what you're |
| 17:18 | building. But, the overall approach is |
| 17:20 | exactly the same. You test things, you |
| 17:22 | note down what's not working, and you |
| 17:24 | work through it using prompts with AI |
| 17:26 | Studio. That's the process, and it's |
| 17:27 | honestly super easy. All right. So, now |
| 17:30 | let's go ahead and begin testing our |
| 17:31 | app. To begin testing our web app, let's |
| 17:33 | go ahead and maximize the preview panel. |
| 17:36 | Click on this button right here. |
| 17:39 | And this is what my app's login screen |
| 17:41 | looks like. Obviously, yours is going to |
| 17:42 | look slightly different. In my case, I |
| 17:44 | don't have an account yet, so I'll click |
| 17:45 | on create free account. |
| 17:48 | Now, before you enter anything here, the |
| 17:50 | first account you create on your app is |
| 17:52 | going to become your admin account later |
| 17:54 | on in this video. So, make sure you use |
| 17:56 | the email and password that you actually |
| 17:58 | want to use long-term as the owner of |
| 18:00 | this app. We'll be using this first |
| 18:02 | account as a regular test account for |
| 18:04 | now, but later on we'll give this |
| 18:06 | account admin privileges so you can see |
| 18:08 | all of your users and all of their data |
| 18:09 | in one place. So, just keep that in mind |
| 18:11 | when you're choosing your email and |
| 18:13 | password here. |
| 18:15 | I've gone ahead and filled out my |
| 18:16 | personal information here, so I'll go |
| 18:18 | down and click on get started. |
| 18:23 | All right. Now, we're inside of our app. |
| 18:24 | So, your dashboard is probably going to |
| 18:26 | look different from mine, depending on |
| 18:28 | what you built. You'll probably have |
| 18:29 | different tabs, different features, and |
| 18:31 | overall a different layout, and that's |
| 18:33 | totally fine. The important thing is |
| 18:34 | that you're logged in and you can see |
| 18:36 | your app's main screen. This right here |
| 18:38 | is what your users are going to see |
| 18:39 | every time they use your app. Now, we |
| 18:41 | want to test every core feature to make |
| 18:43 | sure it's actually working. For my app, |
| 18:45 | that means testing file uploads, |
| 18:47 | downloads, and deletes. For yours, it |
| 18:49 | might be something different depending |
| 18:51 | on what your app does, but the process |
| 18:53 | is the same. Go through each feature one |
| 18:55 | by one and make sure it does what it's |
| 18:57 | supposed to do. So, I'll test mine. I'll |
| 18:59 | start by uploading a file here. I'll |
| 19:01 | click on browse locally. |
| 19:04 | And I'll try uploading this file right |
| 19:09 | I'll scroll down. And right here, you |
| 19:10 | can see it appears that nothing actually |
| 19:12 | uploaded. So, here's how we're going to |
| 19:14 | troubleshoot something like this. I'll |
| 19:15 | go to the top right and close out of |
| 19:16 | this. |
| 19:18 | And we'll go back over to the left side |
| 19:20 | here. If you find that there's anything |
| 19:21 | not working within your app, you'll want |
| 19:23 | to work with AI studio to give it |
| 19:25 | feedback and have it make those fixes |
| 19:26 | for you. So, right here I'm going to |
| 19:28 | say, |
| 19:29 | "It appears file uploads aren't working. |
| 19:33 | Troubleshoot |
| 19:34 | this problem and fix it." Then I'll go |
| 19:37 | ahead and send this. |
| 19:39 | And now we'll let AI studio troubleshoot |
| 19:41 | this problem and fix it for us. So, I'm |
| 19:43 | going to wait here for a few moments and |
| 19:45 | wait for those fixes to be done. |
| 19:48 | All right, so here's what AI studio came |
| 19:49 | back with. It says that the application |
| 19:51 | is now fully connected to both Firebase |
| 19:53 | storage and Firestore, which is going to |
| 19:55 | allow users to actually upload their |
| 19:56 | files. In some cases, you may see this |
| 19:58 | pop up right here, where it says that |
| 20:00 | there were errors running the code. If |
| 20:01 | this pops up, just click on fix. |
| 20:05 | And now we'll wait here for a few more |
| 20:06 | moments to let those fixes take place. |
| 20:10 | All right, now as you can see right |
| 20:11 | here, it says that the fixes have been |
| 20:12 | completed. So, let's go ahead and try |
| 20:14 | uploading our files once again. I'll |
| 20:16 | maximize the window here. |
| 20:18 | And as you can see right here, we have |
| 20:19 | one file. So, if I scroll down, it looks |
| 20:21 | like it actually did get uploaded, but |
| 20:23 | it just wasn't appearing. So, that's |
| 20:24 | kind of the whole idea here after you |
| 20:26 | create your first version of your web |
| 20:28 | app. You create it, test everything out, |
| 20:30 | note down anything that's wrong, and |
| 20:32 | then go through and make those changes |
| 20:33 | one by one. So, just to make sure |
| 20:35 | everything is working properly, I'll |
| 20:37 | click on browse locally again. |
| 20:40 | I'll try uploading the file again here. |
| 20:44 | And I'll scroll down. |
| 20:46 | And there it is. I'll also click on the |
| 20:48 | download button to make sure that's |
| 20:49 | working. |
| 20:52 | And that's working great right here. |
| 20:53 | I'll close out of this. |
| 20:55 | And let's also try deleting the file. |
| 20:57 | I'll click on the trash can icon. |
| 21:00 | Click on permanently delete. |
| 21:03 | Awesome. So, that means that everything |
| 21:05 | is working properly with our database |
| 21:07 | for file uploads. Now, let's test one |
| 21:09 | more important thing. In the bottom left |
| 21:11 | here, I'm going to click on sign out. |
| 21:14 | And then I'm going to log back into my |
| 21:15 | account. |
| 21:17 | Sign back in. |
| 21:20 | So, we just signed out and signed back |
| 21:22 | in, and all of our data is still right |
| 21:24 | here. That means our database is working |
| 21:26 | and storing data so that it persists for |
| 21:28 | your users. Authentication is working |
| 21:30 | because we were able to create an |
| 21:31 | account, sign out, and sign back in |
| 21:33 | without any issues. And file uploads are |
| 21:35 | now working, too. They weren't before, |
| 21:37 | and that's exactly what the connecting |
| 21:39 | everything to the UI step is all about. |
| 21:41 | We had to go in, test things, and find |
| 21:43 | what wasn't working, and then use AI |
| 21:44 | Studio to fix it. So, now that |
| 21:46 | everything on my app is functioning |
| 21:48 | properly, and the front end and back end |
| 21:50 | are communicating the way they should, |
| 21:51 | that means all four pillars are |
| 21:53 | established. My app now has a real |
| 21:56 | working back end. |
| 21:57 | » Now, let's jump into the next step, |
| 21:59 | which is setting up your admin account. |
| 22:00 | Okay, so right now every user who logs |
| 22:02 | into your app sees their own data and |
| 22:04 | their own files. That's exactly how it |
| 22:06 | should work for your users. But as the |
| 22:08 | person who built and runs the app, |
| 22:10 | you're going to want a way to see |
| 22:11 | everything. You want to see all of your |
| 22:13 | users, all of their data, and all of |
| 22:15 | their activity in one place. And that's |
| 22:17 | what an admin dashboard is for. This |
| 22:19 | applies to any app you build. If you're |
| 22:21 | running a SaaS tool, you'd want to see |
| 22:22 | all of your customers. If you're running |
| 22:24 | a course platform, you'd want to see all |
| 22:25 | of your students. For my app, I want to |
| 22:27 | be able to log in and see all of my |
| 22:29 | clients and everything they've uploaded |
| 22:31 | from one screen. To set this up, we need |
| 22:33 | to do two things. First, we need to tell |
| 22:35 | AI Studio which account is the admin. |
| 22:37 | And second, we'll need it to build a |
| 22:38 | separate view that only the admin sees. |
| 22:41 | To find your admin account's user ID, we |
| 22:43 | have to go back to the Firebase console. |
| 22:45 | So, I'll open that here at the top. |
| 22:48 | Then click into authentication. |
| 22:52 | And then make sure you're in the users |
| 22:54 | tab. Here you'll see the account that |
| 22:56 | you created earlier. And then you'll see |
| 22:57 | the user ID right here. Click on the |
| 22:59 | copy button. |
| 23:02 | And then switch back over to AI Studio. |
| 23:06 | I'll minimize the preview panel here. |
| 23:09 | And then here we'll send another prompt |
| 23:11 | to AI Studio. I have a prompt that you |
| 23:13 | can copy and paste for this that's in |
| 23:14 | the guide linked in the description. So, |
| 23:16 | I'm going to copy that over from the |
| 23:17 | guide. |
| 23:18 | And then I'll paste that in right here. |
| 23:21 | I'll scroll to the top here. And right |
| 23:23 | here I already have my admin user ID |
| 23:25 | pasted in. But you'll want to replace |
| 23:27 | this with a user ID that you copied from |
| 23:29 | Firebase a moment ago. And I also want |
| 23:31 | to mention here that this prompt for |
| 23:32 | adding an admin dashboard to your app is |
| 23:35 | just a starting point. Absolutely feel |
| 23:37 | free to adjust this prompt. You can |
| 23:39 | easily just remove or add different |
| 23:41 | things to it depending on what you want |
| 23:43 | in your admin dashboard. So, with this |
| 23:44 | prompt ready to go, I'm going to go |
| 23:46 | ahead and send it. |
| 23:48 | And then we'll wait here for a few more |
| 23:49 | moments and let AI Studio do its thing. |
| 23:54 | All right, awesome. And now the next |
| 23:55 | thing that we need to do is head back |
| 23:57 | over to the Firebase console and make |
| 23:59 | sure that the security rules were |
| 24:00 | updated. Let's go back over to the |
| 24:02 | Firebase console. |
| 24:05 | And then go down to databases and |
| 24:07 | storage and find Firestore. We'll click |
| 24:10 | in right here. |
| 24:13 | And then click into security. |
| 24:17 | And then if I scroll down right here, |
| 24:20 | you'll see this block right here |
| 24:22 | that says function is admin. And then on |
| 24:24 | the next line it has my user ID right |
| 24:27 | here. This is the line that tells |
| 24:28 | Firebase which account has admin access. |
| 24:31 | If your user ID is in there, then you're |
| 24:33 | good to go. Now, in most cases AI Studio |
| 24:35 | updates these rules automatically when |
| 24:37 | you send the admin prompt. But if for |
| 24:39 | some reason you don't see your user ID |
| 24:41 | in the rules or your admin dashboard |
| 24:43 | isn't showing all the users, just go |
| 24:45 | back to AI Studio and tell it to make |
| 24:47 | sure that the Firestore security rules |
| 24:49 | were updated. So, for example here, I'll |
| 24:51 | switch back over to AI Studio. |
| 24:54 | And then I'll send this prompt. |
| 24:56 | Make sure the Firebase security rules |
| 25:01 | are fully updated. |
| 25:03 | Ensure my user ID |
| 25:06 | is present, and that I have access to |
| 25:11 | all data. So, in my case, my security |
| 25:13 | rules are already updated, but I'll send |
| 25:15 | this prompt anyways. |
| 25:20 | Awesome. So, now after setting that |
| 25:21 | prompt, your security rules should be |
| 25:23 | good to go. If you want to double-check, |
| 25:25 | you can always go back into Firestore |
| 25:26 | and look at the security tab, but AI |
| 25:28 | Studio should be able to handle |
| 25:29 | everything for you here. Now, the next |
| 25:31 | thing we need to do is take care of the |
| 25:33 | storage rules. These are separate from |
| 25:35 | the database security rules, and in my |
| 25:36 | experience, they don't always sync up |
| 25:38 | automatically the same way. This is |
| 25:40 | important because the storage rules are |
| 25:42 | what control who can actually view and |
| 25:44 | access the files that users upload. So, |
| 25:46 | if your admin account doesn't have |
| 25:47 | access in the storage rules, you won't |
| 25:49 | be able to see other users' files from |
| 25:51 | the admin dashboard once the app is |
| 25:53 | deployed. So, we'll update the storage |
| 25:55 | rules manually just to make sure |
| 25:56 | everything works properly. |
| 25:58 | So, let's go back over to our Firebase |
| 26:00 | console, |
| 26:02 | click into storage, |
| 26:06 | then click into rules, |
| 26:09 | then we'll highlight everything right |
| 26:11 | here, |
| 26:12 | and delete this. |
| 26:14 | And then once again, if you check the |
| 26:16 | guide linked in the description, I have |
| 26:18 | copy and paste storage rules that you |
| 26:19 | can replace right here. So, I'm going to |
| 26:21 | copy that over from the guide, |
| 26:23 | then I'll paste it in right here, |
| 26:26 | and then make sure here at the very end, |
| 26:29 | you update your user ID right here. So, |
| 26:31 | just highlight this, |
| 26:34 | and replace it with your actual user ID. |
| 26:36 | Once you have that in, click on publish, |
| 26:40 | then we'll switch back to AI Studio, |
| 26:44 | and before continuing, wait 1 to 2 |
| 26:46 | minutes for everything to sync up. |
| 26:48 | Awesome. And now with that done, we know |
| 26:49 | that the storage rules are set up |
| 26:51 | correctly, and everything will work |
| 26:53 | properly when we deploy. Next, let's |
| 26:54 | take a look at what our admin panel |
| 26:56 | actually looks like. I'll start by going |
| 26:57 | to the top here and refreshing this |
| 26:59 | page. |
| 27:02 | And then I'll maximize the preview |
| 27:03 | panel. |
| 27:05 | And now this is what our admin control |
| 27:06 | panel looks like. I can see my total |
| 27:08 | users, the amount of files I have, and |
| 27:11 | then the server status. And right here |
| 27:12 | I'm able to see my user account. Now for |
| 27:14 | my admin control panel, I want to make |
| 27:16 | sure that it's actually tracking new |
| 27:18 | users as well. And then I'm able to read |
| 27:20 | and download their files. So I'm going |
| 27:21 | to click on sign out in the bottom left. |
| 27:25 | And I'm going to create another account. |
| 27:27 | Fill out this info right here. |
| 27:30 | Then I'll sign up right here. |
| 27:33 | And now I'm going to upload that test |
| 27:34 | file again. |
| 27:37 | Double click on it here. |
| 27:40 | Then here at the bottom I can see it was |
| 27:42 | uploaded. So now I'm going to sign out |
| 27:43 | of this account and log back into my |
| 27:45 | admin account. |
| 27:50 | Sign back in here. |
| 27:53 | And here as you can see, I now have two |
| 27:55 | users. And I can also see that they |
| 27:57 | uploaded one file. So if I click on |
| 27:59 | manage data, |
| 28:01 | and I'm able to see that test file that |
| 28:03 | we uploaded to this account. And this is |
| 28:05 | the power of having an admin console. I |
| 28:07 | can see all of my users, their emails, |
| 28:09 | when they signed up, and how many files |
| 28:11 | each one has uploaded. No matter how |
| 28:13 | many users sign up for your app, you'll |
| 28:15 | always have a clear overview of |
| 28:16 | everything that's happening within your |
| 28:18 | admin control panel. And also, every one |
| 28:20 | of your users' experiences stays |
| 28:22 | completely private. They're only able to |
| 28:23 | see their own data. And now this means |
| 28:25 | that our app is fully built and working. |
| 28:28 | We've got user accounts, a database, |
| 28:30 | file storage, security rules, and an |
| 28:32 | admin dashboard. Now we need to get this |
| 28:35 | thing live on the internet. So now let's |
| 28:37 | save it to GitHub and deploy it. So I'm |
| 28:39 | going to minimize this here. |
| 28:42 | Then click on settings here in the top |
| 28:43 | right. |
| 28:45 | Click on this arrow. |
| 28:48 | And click GitHub. |
| 28:51 | Click on sign in to GitHub to continue. |
| 28:55 | And if you have an existing GitHub |
| 28:56 | account, you can log in right here. But |
| 28:58 | if you don't have an account yet, you |
| 29:00 | can sign up down here. In my case, I'll |
| 29:02 | click on continue with Google. |
| 29:05 | I'll log in with my account right here. |
| 29:10 | Here you're able to choose your |
| 29:11 | username. |
| 29:13 | You can choose your country or region. |
| 29:18 | And then scroll down and click on create |
| 29:23 | Then here just scroll down. |
| 29:25 | And click install and authorize. |
| 29:31 | And now here we'll need to create a |
| 29:32 | repository. A repository is just a place |
| 29:34 | on GitHub where your website or web app |
| 29:37 | is going to be stored. We'll use this |
| 29:38 | later to actually deploy it onto the |
| 29:40 | internet. So here I'll just say |
| 29:42 | client vault web app. And then for the |
| 29:45 | description, I'll just put tutorial web |
| 29:49 | app. And for the visibility, I'd |
| 29:50 | recommend just keeping this as private. |
| 29:52 | Go down and click on create GitHub |
| 29:54 | repository. |
| 29:59 | Then you'll scroll down to the bottom |
| 30:01 | and click stage and commit all changes. |
| 30:06 | All right, and now we've saved our web |
| 30:08 | app to GitHub. That means that we're |
| 30:10 | ready to deploy. |
| 30:11 | All right, so our project is saved to |
| 30:13 | GitHub. That's great, [music] but how do |
| 30:14 | we actually get it on the internet where |
| 30:16 | people can visit it? Well, we need |
| 30:18 | hosting. And if you're not familiar with |
| 30:19 | hosting, it's basically renting space on |
| 30:21 | a server that stays online 24/7, so your |
| 30:24 | app is always accessible whenever |
| 30:26 | someone visits it. This is the one part |
| 30:28 | of the setup that isn't free, but it's |
| 30:30 | necessary because without it, your app |
| 30:32 | doesn't have a home on the internet. |
| 30:33 | There are many different hosting options |
| 30:35 | out there, but the easiest way I found |
| 30:37 | for AI studio projects specifically is |
| 30:39 | Hostinger. Hostinger connects directly |
| 30:41 | to GitHub, so every time you push a |
| 30:43 | change to your project, it automatically |
| 30:45 | redeploys your app. [music] You don't |
| 30:46 | have to worry about manually updating |
| 30:48 | anything. Hostinger also supports the |
| 30:50 | technology that AI Studio projects run |
| 30:52 | on right out of the box, [music] so |
| 30:53 | there's no extra configuration needed on |
| 30:55 | your end. You'll also get a free domain |
| 30:57 | name for the first year, so your app |
| 30:59 | gets a real professional URL instead of |
| 31:01 | just some random string of characters. |
| 31:03 | And the pricing is really affordable for |
| 31:05 | what you're getting. So the next step |
| 31:07 | here is to sign up for Hostinger. To get |
| 31:09 | an exclusive discount, go to this link |
| 31:11 | on screen right here, or click the first |
| 31:13 | link in the video description. That link |
| 31:15 | will take you to the correct setup page, |
| 31:17 | and make sure you're getting the lowest |
| 31:18 | pricing possible. |
| 31:20 | All right, so now I'm going to go ahead |
| 31:21 | and go to that link at the top of the |
| 31:23 | video description. |
| 31:26 | And once you go to that link, you'll be |
| 31:27 | brought to this page right here. Click |
| 31:29 | on start now. |
| 31:32 | And then down here, we'll be looking for |
| 31:34 | the business plan. The reason why we |
| 31:36 | need this plan specifically is because |
| 31:38 | if I scroll down here, you'll see it |
| 31:39 | includes five managed Node.js web apps, |
| 31:42 | and this is the feature that we'll need. |
| 31:44 | So let's scroll up here, and click on |
| 31:46 | choose plan. |
| 31:50 | Then here, start by choosing your |
| 31:52 | billing period. By default, this will be |
| 31:54 | set to 48 months. However, you can |
| 31:56 | switch this to 24 months, 12 month, and |
| 31:59 | 1 month plans as well. For this video, |
| 32:01 | I'll go with the 12 month option. |
| 32:05 | As you can see here, we still get plenty |
| 32:06 | of savings, and also a free domain for |
| 32:08 | the first year. Down here, you can |
| 32:10 | choose to type in your domain name, but |
| 32:12 | I'll do this a little bit later. And |
| 32:13 | then on the right side right here, you |
| 32:14 | can review your order. And don't forget |
| 32:16 | that you can get this additional |
| 32:17 | discount by using the first link in the |
| 32:19 | video description. Once you're ready, go |
| 32:21 | down and click on continue. |
| 32:24 | And then on this page right here, you |
| 32:26 | need to sign up for a Hostinger account. |
| 32:28 | So enter your email address, |
| 32:30 | and create a password. |
| 32:32 | And then click register. |
| 32:36 | And now on this page right here, go |
| 32:38 | ahead and enter your billing address and |
| 32:39 | your payment information, go through the |
| 32:41 | checkout process, and I'll meet you at |
| 32:43 | the next step. |
| 32:47 | All right, and once you get to this page |
| 32:48 | right here, you'll be brought into |
| 32:50 | Hostinger's onboarding. And depending on |
| 32:51 | whenever you're watching this video, |
| 32:53 | this onboarding process may look |
| 32:54 | slightly different. But even if it is |
| 32:56 | slightly different, the overall steps |
| 32:57 | should be the same. So, just follow |
| 32:59 | along the best you can. For this first |
| 33:00 | question here, I'm going to say that I'm |
| 33:02 | creating this website for myself. |
| 33:05 | I'm looking to create a new site. |
| 33:09 | In the bottom right here, I'm going to |
| 33:10 | click on skip personalization. |
| 33:14 | And then when you get to this page right |
| 33:15 | here, you'll see three options. You'll |
| 33:17 | want to scroll down right here, and you |
| 33:19 | want to look for the option that says a |
| 33:20 | Node.js web app. This is going to allow |
| 33:22 | us to deploy via GitHub. So, click on |
| 33:26 | And then click next. |
| 33:29 | And then right here, you can claim at |
| 33:30 | your free domain name for the first |
| 33:32 | year. So, right here I'm going to type |
| 33:34 | clientvaulttutorial.com. |
| 33:38 | And as you can see, this domain is free |
| 33:40 | for the first year. So, I'll go ahead |
| 33:41 | and claim this. |
| 33:43 | And click on next. |
| 33:48 | And then right here, you'll have to |
| 33:49 | verify your domain name owner details. |
| 33:52 | This is who your domain is going to be |
| 33:53 | registered to. So, confirm all of the |
| 33:55 | information is correct right here. |
| 33:57 | And then after you've filled everything |
| 33:59 | out, click on register. |
| 34:03 | And here you may get a text message sent |
| 34:05 | to your phone number. |
| 34:07 | Go ahead and enter your code right here. |
| 34:11 | And click verify. |
| 34:16 | Awesome. Now your domain is ready to go. |
| 34:18 | Once you get to this screen here, click |
| 34:19 | on connect with GitHub. |
| 34:23 | And then on this screen here, you can |
| 34:24 | choose whether you want to give |
| 34:25 | Hostinger access to all of your |
| 34:27 | repositories or only select |
| 34:29 | repositories. In my case, I'll just go |
| 34:31 | with all. I'm going to scroll down and |
| 34:33 | click install and authorize. |
| 34:38 | And then right here, you should see that |
| 34:39 | repository that we created in Google AI |
| 34:41 | Studio a few moments ago. I'll click on |
| 34:44 | my repository right here |
| 34:46 | and click on continue. |
| 34:51 | And then here, the first thing you want |
| 34:52 | to do is change the framework preset. Go |
| 34:54 | ahead and click on this |
| 34:56 | and then scroll all the way to the |
| 34:57 | bottom. You're looking for this option |
| 34:59 | right here called Vite. Click on this |
| 35:02 | and then scroll down this page. |
| 35:04 | Look for environment variables. Next to |
| 35:06 | this, click add. |
| 35:09 | We're going to add in some environment |
| 35:10 | variables here using an API key. If your |
| 35:13 | Google AI Studio project uses any AI |
| 35:15 | features, things like a chatbot, image |
| 35:17 | generation, or any kind of AI-powered |
| 35:19 | tool, those features won't work after |
| 35:21 | deployment unless we add an API key. So, |
| 35:24 | let's take care of that now. Let's |
| 35:25 | switch back over to Google AI Studio. |
| 35:29 | And I'll close out of this. |
| 35:31 | Click on back to start. |
| 35:34 | Click into dashboard. |
| 35:38 | And here you'll land in API keys. On the |
| 35:40 | right side, click on create API key. |
| 35:44 | Click on create key. |
| 35:48 | And then click copy key. |
| 35:51 | And switch back over to Hostinger. |
| 35:54 | And then for the first name here, let's |
| 35:56 | type |
| 35:57 | Gemini {underscore} |
| 36:00 | API {underscore} key. |
| 36:03 | And then paste in the key right here. |
| 36:06 | Click on add more. |
| 36:08 | Then for the next name, we'll name this |
| 36:10 | Google {underscore} API |
| 36:14 | {underscore} |
| 36:15 | key. Then paste in the same key again. |
| 36:18 | And then one more time, click on add |
| 36:20 | more. |
| 36:21 | And we'll name this Vite |
| 36:24 | {underscore} Gemini |
| 36:27 | API |
| 36:29 | underscore |
| 36:30 | key. |
| 36:31 | And then paste in that same key again. |
| 36:34 | With that done, click on finish. |
| 36:37 | And then click deploy. |
| 36:42 | Perfect. Now your web app is going to be |
| 36:44 | deployed. I'll wait here for a few |
| 36:45 | moments and wait for everything to |
| 36:46 | finish up. |
| 36:49 | Okay, and as you can see here, the |
| 36:50 | deployment has completed and our app is |
| 36:52 | available right here on our custom |
| 36:54 | domain. So everything is already |
| 36:56 | connected and good to go. So I'm going |
| 36:58 | to go to my web app right here by |
| 36:59 | clicking on this link. |
| 37:02 | And there we go. Now all the stuff that |
| 37:03 | we did earlier when we signed up for our |
| 37:05 | admin account and uploaded files, all |
| 37:07 | that information should still be here. |
| 37:09 | So I'm going to go ahead and log in to |
| 37:11 | my admin account |
| 37:13 | and click sign in. |
| 37:16 | Awesome. As you can see here, everything |
| 37:18 | is the exact same as it was back in AI |
| 37:20 | Studio. That's because the preview was |
| 37:22 | connected to the same Firebase backend |
| 37:24 | the entire time. And this is great |
| 37:26 | because it means that your database and |
| 37:27 | your backend were working properly the |
| 37:29 | whole time. Now if something isn't |
| 37:31 | working the way you expect or if you |
| 37:33 | want to make any changes to your app in |
| 37:34 | the future, here's how you do it. First, |
| 37:37 | go back over to Google AI Studio |
| 37:40 | and close out of this. |
| 37:43 | Click on dashboard. |
| 37:46 | Click on apps. |
| 37:48 | Then click into the app that you just |
| 37:50 | deployed right here. |
| 37:53 | And then here you'll just make your |
| 37:54 | changes or tell AI Studio what needs to |
| 37:56 | be fixed and then just save it to |
| 37:58 | GitHub. Hostinger is connected to your |
| 38:00 | GitHub so it'll automatically pick up |
| 38:02 | the update and redeploy your app. You |
| 38:03 | don't have to touch anything on the |
| 38:05 | Hostinger side. You make the change at |
| 38:07 | AI Studio, push it to GitHub, and it |
| 38:09 | shows up on your live site. So for |
| 38:10 | example here, I could make a small |
| 38:12 | change. I'll say, "Make the red color in |
| 38:16 | the admin panel green instead." So we'll |
| 38:19 | just do a small design change like that |
| 38:21 | right here. I'll go ahead and send this |
| 38:23 | change. |
| 38:25 | And then we're going to let AI Studio |
| 38:26 | work for a minute to change out the |
| 38:27 | colors. |
| 38:30 | And now here in the preview mode, you |
| 38:31 | can see that it's now green. To push |
| 38:33 | this update to our actual live |
| 38:35 | deployment, go to the top right and |
| 38:37 | click on the settings. |
| 38:39 | Click on the arrow. |
| 38:42 | Then click on GitHub. |
| 38:46 | Then we'll scroll down to the bottom. |
| 38:48 | Click on stage and commit all changes. |
| 38:53 | And then your changes will be uploaded |
| 38:54 | to GitHub. And then after that, switch |
| 38:56 | back over to your web app. |
| 38:59 | And then refresh the page. |
| 39:03 | And then as you can see right here, |
| 39:05 | Hostinger automatically redeployed your |
| 39:07 | app with those updated changes. And one |
| 39:09 | small detail you'll notice here at the |
| 39:10 | top is the actual site name. This right |
| 39:13 | here is the default name. Every Google |
| 39:15 | AI Studio web app gets this name. To fix |
| 39:17 | that and update your site title, you |
| 39:19 | would do the exact same thing. You'd |
| 39:20 | switch back over to AI Studio and |
| 39:22 | request the change. And then you would |
| 39:24 | commit that change to GitHub. You'll use |
| 39:26 | the workflow I just showed you to make |
| 39:27 | any changes or troubleshoot. Now, before |
| 39:30 | we finish up here, let's switch back |
| 39:31 | over to Hostinger. |
| 39:33 | Then let's close out of this. |
| 39:37 | And then here you'll find your HPanel. |
| 39:39 | This is where you can manage your |
| 39:40 | deployment and your hosting. Right here |
| 39:42 | you may have some items on your to-do |
| 39:43 | list. And if you click on this here in |
| 39:45 | the top left, |
| 39:47 | and then click on websites, |
| 39:51 | click on Node.js, |
| 39:55 | you should see your web app listed right |
| 39:56 | here. Underneath it, click on dashboard. |
| 40:02 | And then right here, you'll be able to |
| 40:04 | see all of the information regarding |
| 40:05 | your deployment. You can access your |
| 40:07 | settings right here. You'll see your |
| 40:08 | current deployment and then some other |
| 40:10 | miscellaneous information down here. You |
| 40:12 | may see some information regarding your |
| 40:14 | domain right here. Make sure after this |
| 40:16 | video, you check the email that your |
| 40:17 | domain was registered to and you'll find |
| 40:20 | an email from Hostinger that has a link. |
| 40:22 | You just click on that and it verifies |
| 40:23 | your domain. And if you ever need help |
| 40:25 | with finding something in your Hostinger |
| 40:26 | dashboard, go to the top right and click |
| 40:29 | on ask AI. |
| 40:31 | This is going to open up the Cody AI. |
| 40:33 | You can ask it any question and it's |
| 40:35 | super helpful. And if it can't figure |
| 40:36 | something out for you, it's going to |
| 40:38 | connect you to a live agent. And from my |
| 40:39 | experience, it's been super helpful. And |
| 40:41 | also, let me give you a quick tour of |
| 40:43 | the Firebase console. So, I'm going to |
| 40:45 | switch back over to Firebase. |
| 40:48 | So, at the top here, you have your |
| 40:49 | project overview. I'll click into it. |
| 40:53 | This gives you a snapshot of your |
| 40:55 | project, including what plan you're on |
| 40:57 | and how many apps you have. Down here, |
| 40:58 | you can see a quick look at your current |
| 41:01 | reads and writes. So, if you ever need |
| 41:03 | to check how your app is performing, |
| 41:04 | this is the first place to look. |
| 41:05 | Underneath that, on the left, you have |
| 41:07 | your settings. This is where you'll find |
| 41:08 | things like your billing information, |
| 41:10 | integrations, service accounts, and user |
| 41:12 | permissions. You probably won't need to |
| 41:14 | touch this often, but if you ever need |
| 41:16 | to manage anything on the account level, |
| 41:18 | it's all right here. Underneath this, |
| 41:20 | you have what's new. Firebase shows you |
| 41:22 | new features and updates. Below that, |
| 41:24 | you'll have your project shortcuts. |
| 41:25 | These are the tools that we've used |
| 41:27 | throughout this video. In our case, we |
| 41:28 | visited Firestore, authentication, and |
| 41:31 | storage. So, those are showing up here. |
| 41:33 | You'll visit these three tabs the most |
| 41:34 | often. And then all the way at the |
| 41:36 | bottom, you have your product |
| 41:37 | categories. This includes databases and |
| 41:39 | storage, security, AI services, hosting |
| 41:42 | and serverless, devops and engagement, |
| 41:44 | and analytics. The ones here at the |
| 41:46 | bottom are more advanced and you'll only |
| 41:48 | really visit the databases and storage |
| 41:50 | and security tabs. You just built and |
| 41:52 | launched a real web application from |
| 41:54 | scratch, all using Google AI Studio, |
| 41:57 | Firebase, and Hostinger. And if you |
| 41:59 | haven't signed up for your hosting plan |
| 42:00 | yet, go to this link on screen right |
| 42:02 | here or click the first link in the |
| 42:04 | video description. Using that link will |
| 42:05 | make sure you get the lowest pricing |
| 42:07 | available. If this video helped you out, |
| 42:09 | make sure to hit like and subscribe for |
| 42:11 | more tutorials just like this. I'll see |
| 42:13 | you in the next video. |