Google AI Studio + Firebase: Connect Your App to a Real Database

Have you ever built an app in Google AI Studio, added a registration and login screen, and then wondered, “Wait, where is this user’s data actually being stored?” The app might look like it’s working perfectly, but without a real back-end and database, your user information isn’t magically going somewhere. So, in today’s video, I’m going to show you exactly how to connect your Google AI Studio app to a real cloud database using Firebase Firestore, completely free to get started. We’ll connect the app to Firebase so that when a user registers or signs in, their information can be properly handled and stored in the cloud instead of just having a demo app that looks like it works.

And the best part is, you don’t need to build a back-end server from scratch. We’ll use Firebase, Google’s platform for building modern applications. Firebase gives developers services like authentication, Firestore database, cloud storage, analytics, and push notifications, all designed to work together with your application. For this project, Firebase will become the back-end behind our AI Studio app.

So, if you’ve been building apps with Google AI Studio…

So, if you’ve been building apps with Google AI Studio, and you want to take them from a simple demo to something connected to a real database, this is exactly what we’re going to do. First, open your Google AI Studio project. Once the project is open, go to the code section. This is where we’ll start making the changes needed to connect our application to the Firebase back-end.

Also, there is a tutorial on the channel on how I built this application using Google AI Studio and Google Stitch. If you haven’t watched that tutorial yet, I recommend checking it out. Scroll down and find build.gradle.kts. Double-click it to open the file.

Find the application ID and copy it

Find the application ID and copy it. For example, mine is com. sastudio.smartnotesai.app. Now, open a new browser tab.

In the search bar, type Firebase and press enter. Open the first result, which should be the official Firebase website. Firebase is Google’s cloud platform for building applications with services such as authentication, databases, cloud storage, analytics, and other backend tools. For our application, we’ll use Firebase to handle user authentication and Firestore to store our application data.

Click go to console

Click go to console. If you already have a Google account, sign in. If you don’t, create one and continue. Once you’re inside the Firebase console, click get started to create a Firebase project.

Give your project a name. For this project, I’ll enter AI Creator. Click continue. For this project, I’ll disable Google Analytics by unchecking enable Google Analytics for this project.

Then click continue

Then click continue. Firebase will now create the project. This may take a few moments, so wait until the project is ready. When it’s finished, click continue.

Now, below your project name, click add app. Select Android. In the Android package name field, paste the application ID we copied from Google AI Studio. For the application nickname, I’ll enter AI Creator.

Then click register app

Then click register app. Firebase will now register our Android application. Once that’s complete, click download google- services.json. This file contains important Firebase configuration information that allows our Android application to communicate with the Firebase project we just created.

After downloading it, go back to the Google AI Studio tab. Tell AI Studio that you’ve registered the application with Firebase and that you want to connect it to this Firebase project. I’ll also tell it that the google-services.json file I’m providing is the real Firebase configuration file and that it should replace the placeholder configuration in the project. Now, open your downloads folder and drag the google-services.json file into the AI Studio prompt box to attach it.

Then, click send

Then, click send. AI Studio will analyze the Firebase configuration file and use the information inside it to configure the Android project. This is much easier than manually searching through multiple project files and trying to configure every Firebase dependency yourself. Go back to the Firebase tab and click next.

Firebase will show you some additional setup instructions and code. For this project, AI Studio will handle the necessary configuration automatically, so we don’t need to manually copy every piece of Firebase configuration code. Click next and then continue to the Firebase console. Now, click your project name and open the settings using the gear icon.

Go to authentication

Go to authentication. Click get started. Under the native providers, select email/password, enable it, and click save. Now, go back to the Firebase console.

Under database and storage, open Firestore. Click create database. Select standard edition and click next. Leave the remaining settings at their default values and click next.

Select production mode and click create

Select production mode and click create. Firebase will now create the Firestore database for our application. Once the database is ready, go to the rules section. Now, I’ll go back to Google AI Studio and ask it to generate the correct Firestore security rules for my application.

I’ll tell AI Studio, “I have created my Firestore database. Give me the security rules for my application.” Then, I’ll send the request. AI Studio will analyze the application’s database requirements and generate security rules designed for the way our app stores and retrieves data. This is important because Firestore security rules control who can read and write data in the database.

We don’t want to simply make the database completely public

We don’t want to simply make the database completely public. Scroll down, and as you can see, here are the generated rules. I’ll copy them. Go back to the Firebase rules tab.

Before pasting the new rules, I’ll remove the existing rules so we can replace them with the configuration generated specifically for this application. Paste the new rules and click publish. Now our application is connected to Firebase Firestore. This means that when a user registers, the application can send the required information to the Firebase backend instead of keeping everything locally on the phone.

Let’s test the configuration

Let’s test the configuration. I’ll register a new user. I’ll fill in the registration form and click register. As you can see, the registration was successful and the dashboard is now open.

Now let’s verify the database. I’ll go back to Firebase. As you can see, the new user has been added to the database. This confirms that our Firebase authentication and Firestore integration are working correctly.

And that’s it

And that’s it. Your Google AI Studio app is now connected to a real Firebase Firestore database. Now when users register and interact with your application, their data can be properly handled and stored in the cloud instead of having an app that only works as a demo. If this video helped you, make sure to like the video, subscribe to All PC Geek, and turn on the notification bell so you don’t miss more tutorials on Android development, Google AI Studio, Stitch, AI coding, Firebase, and building real-world applications. Thanks so much for watching and I’ll see you in the next video.

Now let’s verify the database

Now let’s verify the database. I’ll go back to Firebase. As you can see, the new user has been added to the database. This confirms that our Firebase authentication and Firestore integration are working correctly.

And that’s it. Your Google AI Studio app is now connected to a real Firebase Firestore database. Now when users register and interact with your application, their data can be properly handled and stored in the cloud instead of having an app that only works as a demo. If this video helped you, make sure to like the video, subscribe to All PC Geek, and turn on the notification bell so you don’t miss more tutorials on Android development, Google AI Studio, Stitch, AI coding, Firebase, and building real-world applications. Thanks so much for watching and I’ll see you in the next video.