Instant App Development with Firebase Templates

Key Takeaways

We'll see how to create [music] an app using templates. Although I won't be creating a full-fledged app here, because that would take a lot of time, I'll walk you [music] through the steps so you know how to do it. So, I'm back again at the main page of Firebase Studio, the home page, the dashboard, and you can see that I have an app that I have already developed. It's showing under my workspace, [music] which is my daily planner guide. You can create more new workspaces from here, so you can create up to three like this, okay? [music] If you want to delete one, you can select the three dots here, choose delete, [music] type delete here, and it will delete it for you. Right now, [music] I'm not doing that. If you want to share this with someone, someone who wants to work on the same project at the same time, you can share the link with them, and they can also work alongside you on the same project. Just like you [music] are. There are also cloud features now. So, [music] that was how to create an app using prompts. Now, I'm going to show you how you can create an app using templates. These are the options here, right? [music] You can see them. Okay, I'll select something with no .js, so click on that and name your my project. Okay, TypeScript [music] is fine. Use Tailwind. Okay, create. So, it will set up a workspace and initialize the environment. Basically, what this template part does is create a basic environment setup for you. It will generate all the basic files needed [music] for a React project. You can see, it gives you all the files here. But since I haven't actually created any project, meaning [music] there isn't any idea that's been turned into a project yet, it will just provide you with the React environment. You can go ahead and start coding here now. Again, as I mentioned, at any point in Google Studio, if you don't want to code, you have the Gemini support option. Just click on this, type in whatever you want to be done, and you can go ahead and create the project. So, you can see this option here. Just ask whatever you want to do, like XYZ. Or if you want to create a React app with certain features, [music] just write it out in simple English statements here as a prompt, and then proceed. Now, I also mentioned earlier that you can choose the Gemini model you want. [music] So, you can see the option here for built-in Gemini models. So, this applies whether you create a project using prompts, which I discussed earlier, or by using a template, either way is fine. In both cases, you'll find this option under the Gemini tab right here. So, built-in Gemini models, [music] just click. As you can see, there are so many options. There's 2.5 flash preview, 2.5 pro, 2.0 flash, 2.0 pro, and many [music] more. So, if you want to select, let's say I want to choose 2.5 flash preview, I would [music] select this option. After that, you need to create or obtain a Gemini API key. So, click here, [music] get a Gemini API key. It will take you to the website. And here it is, get [music] API key. So, click on this plus sign to create an API key. And then you have to select the project for which you want [music] the key. So, okay, my first project. So, it will generate the API key. It's right here. You just have to copy it from here, go to Firebase Studio, and paste it over here. Save it, and you're done. Close the settings. Okay, and now you're ready to use the Gemini model you selected. So, yes, as you can see now, if I select Gemini 2.5 flash review, it's not asking for any key or anything. It's selected, [music] and now you can go ahead and do whatever you want. So, you can see, this is a basic web UI that it has created. Even though I didn't ask it [music] to create any app, this is the basic one it made. Moving forward, I can type. So, you can see, terminal support is also available here. This is the terminal option, like problems, output, and [music] terminal. So, for those of you who have used VS Code, the UI is somewhat similar, right? There too, you'll have these on the left-hand side. And then there's a corridor. >> [music] >> The editor is here, and the terminal is at the bottom, along with output and problems. It's a similar UI, I feel. [music] So, the terminal option is also available. You can go ahead and interact with it. Okay, I'll go back to the Firebase Studio. Now, these are two workspaces [music] that have been created. If I don't want this, then I'll go to the delete option and delete it. Make sure that if you have more than three projects running at the same time, more than three workspaces, [music] you need to delete one of them so you can stay on the spark plan and not get charged for the blaze plan. Okay, so it's also important here that I talk to you about the rollback feature and the preview feature, which are important parts of Firebase Studio. [music] So, let's suppose for a moment that I want to implement a significant and comprehensive change within this particular application, [music] where my primary objective is for the app to efficiently and intelligently take all of the various tasks and activities as its primary input, [music] and then subsequently arrange and organize them in a logical and structured manner. According to according to the [music] order. It should be in a take a day life. [music] of a person. So, yeah, this is the change I want. I'll click on this go option, and let's see if it changes. Okay, so it says it has made the changes. Let's see. So, breakfast option, [music] 20 minutes. I'll add this. Next is, again, new massage. 30 minutes. Just before breakfast. Okay, now create daily schedule. Okay, it gives me some error. Now, we could try to fix this error, but I want to show you the rollback feature right now. So, you see there's an error. You tried to do something smart by incorporating it, but it's not working as you wanted. >> [music] >> So, what you can do is slide up and see the previous version. So, you can see here, it shows the current version, right? [music] Current. Green tick. Go ahead. Go before I could say. And then there's a restore option. So, you can click on this restore button, and it will roll back to that version. It has named some version by itself. Okay, so it has gone back to my daily planner guide and everything. So, now it's fine. So, this is the rollback feature. Now, coming to the preview feature, you can see this is the option here. These three options. So, you can see this one, share preview [music] link. So, this is the QR code that will be there. You can scan it using your phone. So, if I scan it, you can see on the screen how it looks on my phone. And you can run the app and test it there as well. >> [music] >> So, there's a preview option available. So, that's everything for the hands-on part that I wanted to cover, with all the features of Firebase Studio explained thoroughly. Now, as I discussed a basic mini project with all of you, building a front end and building a back end is also easy. And you can do it just by writing prompts. So, I'll show you one quick example. So, I'll go back to the dashboard, and I'm going to write this again here. So, I want to create a contact book. Now, for this image attachment, let's say I want to attach an image showing how my UI should look. So, yes, I created a very simple UI for a contact book. So, I'm creating a simple contact book with a user-friendly interface, >> [music] >> where the user can add new contacts, name, phone number, email address, and so on. [music] It includes lead contacts and everything. Store all contact data in Firebase with real-time updates. I'm removing this for now. I'll show you that later. So, include user authentication, so that each user can only access their own contacts, meaning I'll write here through a login page. And make absolutely certain to provide a readily accessible and clearly defined default login username and a corresponding secure password for initial access, which is admin. And please refer to the attached image for a more detailed visual representation. The UI design. All right, now prototype with AI. So, by [music] default, this will create a database for me, but if I want to use Firebase, or if I have any specific requirements for the database, [music] I should get the prompt again, and it will make the changes for me. So, this is how you can build a very simple [music] or even a complex application with easy steps. Okay, I'll go ahead and prototype this out. All right, so here you can see that it has created a project. It has also given me an option for admin with a default username and password. Okay, so I'll enter those and log in. Let's see. Okay, it says login successful. All right, but it's showing me some error. You can also ask the code editor to fix it. Okay, so it has fixed [music] the error and now we're on the next page after logging in. So, you can add a new contact. Let's say the name is Pragya and the phone number is something. [music] I don't think there's any authentication check on this. And then pragya@gmail.com. Suppose that's a Gmail ID and then add the contact. [music] So yes, you can see it's been added here. You can edit the contact. You can delete it as well. Now, that was the front end part. If you want to add a back end to it, you can create the database right here. For this app, this system will reliably store and securely maintain all of my valuable contacts, ensuring their complete preservation even if I decide to log out of the application. Furthermore, upon successfully logging back into the system, it should promptly and accurately display every single one of my previously saved and carefully organized contacts. Next, [music] because right now, if you see, if I log out and then log in again, Okay, so it's already showing the contacts. So, what I'll do is I'll ask it to create the database for this app, which will store all the contacts. It will store all the contacts and provide me with [music] an option to search. You can search for the desired contact by their full name, which will accurately retrieve the appropriate contact information from the comprehensive database. This is a feature I want to add to the app, which requires a database. So, let's see if it makes the changes. So, it has made the changes. [music] So, you can see it has given me a search option here, which is search by [music] name. We'll add two more and see what happens. Okay, so I added two contacts here. Now, if I search, you can see it's searching for me and giving me the correct result. Okay, so this has been added successfully and a database has been created. You can see it has created a database >> [music] >> and the database is Firebase itself on the cloud. Firebase is a no SQL based database supported by the Firebase toolkit. In the Firebase toolkit, it already exists and its support is also extended to Firebase Studio. So, this no SQL database is created, all the data is stored and it also helps you with retrieval. Now, you can publish this or deploy your code by clicking on publish. So, it will create a Firebase project and it will generate a URL. The next step is you have to link the Google Cloud billing account. You can link this Cloud billing account. There's no problem with that. You won't be charged unless you exceed the usage limits of a Spark plan. So, for this project that I developed, the cost will go up since I'm not planning to deploy it on a larger scale anywhere. So yes, I'll be linking the Google Cloud billing account here. You can link this and then the last step will be setting up the environment. It will give you a URL and once you click it, you'll be directed to the website where this app will be running. I'm not going to do this linking of the Cloud billing account and all that. Please try linking your account and in the next step, set up the environment and your app will be ready. If you enjoyed this video, you can enroll in Great Learning Academy for free. Choose from hundreds of courses across multiple domains and earn a certificate of completion along the way. And if you want to take it a step further, you can try Great Learning Academy Pro Plus with a free trial. It provides access to additional premium courses with more advanced content from distinguished faculty along with features like guided projects, a resume builder, and mock interviews to make your learning journey even richer. [music] Link is in the description.