Add databases to your app with AI Studio | Vibe Coding Guide

0:00 One of my favorite features of AI Studio is how

0:02 easy it is to add a database with Cloud Firestore.

0:06 Because most apps that you build won't be just static web pages,

0:10 you're going to need to store information.

0:12 Maybe you are collecting RSVPs for an event website,

0:16 or you are building a shared registry or gift wish list,

0:20 or a daily nutrition tracker.

0:22 Whatever it is, most cases, you are going to need a database.

0:26 So let's see how we can do that with AI Studio.

0:28 I'm going to paste in this prompt and select Build.

0:31 So if you're new here this is AI Studio.

0:34 That's a Studio google.com.

0:36 You can type in a prompt.

0:38 So describe in natural language what it is that you want to build.

0:41 And the agent will go and build it for you.

0:43 So here I've typed build a book tracker

0:45 app where you take a picture of the book.

0:47 It stores the name, author, and the date that you took the picture.

0:50 I also want a table that shows all of the books that I've read.

0:53 So everything that we've logged so I can track my progress

0:55 and understand how I'm doing with my reading goals for the year.

1:00 I've also specified that the app have this dark academia style,

1:02 which I think will just look really nice.

1:05 So on the right hand side over here,

1:06 we can see a couple of different design options for how this might look.

1:11 So you don't need to pick one of these.

1:13 But I do think quite a few of them are very lovely.

1:15 So I'm going to go ahead and pick

1:18 this archivist one and we'll collect select this design.

1:21 And that just means that the app will

1:22 be built in that same sort of visual aesthetic.

1:26 And then on the left here,

1:27 you can see that the agent is prompting us to enable a database.

1:30 So I'm going to click Enable Firebase.

1:32 And this is what will allow Gemini app

1:35 to go off and to set up provisioning and authentication

1:38 and everything else integration with our database so that when

1:42 we use this app our information is automatically stored.

1:45 So I'm going to let this build for a minute.

1:48 And we'll come back very shortly when everything is good to go.

1:51 OK looks like our app is ready.

1:53 So I'm going to enter full screen and I'll click authenticate.

1:56 And now we can click Activate lens.

1:59 Let's see.

2:00 And hold up a book and we'll click Commit.

2:03 And hopefully, this should work.

2:05 And the book will show up on the right hand side over here in our registry.

2:09 And there we have it.

2:09 Yeah oh my gosh.

2:10 It kept the picture to that.

2:12 That's great.

2:13 Didn't really need that picture.

2:14 But we have the title small is beautiful.

2:17 We have the author.

2:18 And the date that the book was archived.

2:21 And so I'm going to go back over to the chat here.

2:23 And I'm going to ask the model to show me where the data is stored.

2:29 And when I send that this should return a link

2:33 which will have which will take us to the database,

2:36 and we can see the book that we just logged in that database.

2:39 So let's click on this link.

2:41 And this is going to take us to Firebase.

2:43 And here we have our books.

2:46 And you can see over here, we have Schumacher.

2:48 We have Smalls.

2:49 Beautiful April 22 2026.

2:52 That's when we took the picture.

2:53 So all of our data will get stored right here.

2:56 So the last thing I'm going to do is I want to deploy

2:59 this app so that I can try it out on my phone.

3:01 So we'll go to publish, and the first thing we need to do is set up our API key.

3:07 So I'm going to do that under secrets.

3:09 Now I have a free key.

3:10 And if I want to deploy this app to Google Cloud and have

3:15 it on a public URL that I can share with other people,

3:18 we will need to use a paid API key.

3:21 So I'm going to go ahead and set one of those keys,

3:24 and then we'll head over to publish.

3:26 You'll notice that I have a spend cap set here,

3:29 which this is my monthly spend cap of $5.

3:31 This is just really helpful to make sure

3:33 that if I share this app with my friends, my spending doesn't go out of control.

3:36 It's just going to cap everything at $5, which is a really nice feature to have.

3:41 So we've clicked save.

3:42 Now we're going to click Publish our app.

3:45 And so I'm going to come back in a minute when this is ready to go.

3:48 OK our app is ready.

3:49 So we'll click Open.

3:50 And we can authenticate again.

3:53 And you can see that authenticated as mean an Akita.

3:57 I have this book here, so what I'm going to do is I'm going to copy

4:00 the URL and I'm going to open it on my phone.

4:03 OK, I've got the app on my phone now.

4:06 So we're going to authenticate again.

4:09 And hopefully when I take a picture of a book,

4:11 you will see it pop up on the screen.

4:13 So I'm going to do that right now I'm going to enable the camera.

4:17 I'm taking a picture and it's analyzing.

4:22 This was the book that I just took a picture of and we should see it.

4:26 There we go.

4:26 It just popped up on screen the embodied mind,

4:29 cognitive science and human experience.

4:31 So I was able to do that from my phone.

4:33 So now anytime I finish reading a book,

4:35 I can take a picture with my phone and have it logged into this app here for me,

4:40 so I can refer back and see how my reading goals are going for the year.

4:44 I hope this gives you an idea of how

4:46 easy it is to add a database with AI Studio,

4:48 and opens up all kinds of new possibilities for what you can create.

4:52 So I'm really excited to see what it is that you build.

4:55 And thank you so much for watching.