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