Vibe code a whole website

Key Takeaways

All right, Christian. So far, we've made this default page using Gemini to jazz it up. But we want to make a web app that actually does something. Right >> now, we'll start making that website I showed in the first video, my customers. [music] When you and I recorded this screencast, I hadn't actually built anything yet. All I had was an idea. But with [music] Gemini, a well- definfined vision can take you a long way. So, here was my roughly sketched [music] vision for the web app. >> Right. I recognize the con on board >> and I wanted the ability to move them between columns. I also knew I wanted the app to show more details on a customer when their card [music] is clicked. Something like this. Finally, the keystone functionality we'll eventually add [music] is the ability to create an invoice. Well, what are we waiting for? Let's turn vision into reality. Should we jump back to the Google Cloud Console? >> Yep. I'll go to CloudShell and then click the open editor button. >> Okay. So last time we created everything in the my customers folder using Firebase. Then we used Gemini to create new code in the index.html [music] file, >> right? And here's what that page looks like. >> It's great that Gemini was able to make that, but [music] it doesn't really do anything. It's all form and no function >> exactly. So let's change that. Jumping back to CloudShell, [music] the tilda means that I'm in my home folder. I'll use the change directory command to go to the my customers folder. If I do the ls or [music] list command, I can view its contents. >> Okay, I remember these commands from last time. [music] I have a feeling you're about to do something cool. >> I'll let you be the judge, but yeah, I think it's pretty cool. Because we're in CloudShell, [music] I can just type Gemini and voila, we're running Gemini CLI. >> Okay, visually it's interesting, but what's the difference between using Gemini in the command line and going to the web app, gemini.google.com? Let's ask Gemini. Hi Gemini, please tell me about yourself. What are your capabilities? [music] How are you different from the Gemini web app? It says it's a CLI agent, so it's not just a chatbot. It can read and write files, run shell commands, [music] and interact with our development environment. Very cool. So we don't have to constantly go between CloudShell and the Gemini web app. This agent can do stuff for us directly in our project, [music] almost like our own personal software engineer. Exactly. And the key to getting the most out of it is using effective guidance in our prompt. This is the prompt that I created, which should get us going. >> Wow, that is one heck of a prompt. It is pretty long. We'll dig into it in the self-guided lessons, and by [music] the end of this course, you'll know how to make your own prompt like this. But simply put, I told the Gemini web app what I wanted to build and crucially, who it was for, and it helped me create this prompt. Shall we give it a try? >> Sure. So, we'll copy this whole prompt and paste it into the Gemini field in CloudShell. >> Yep. It's as [music] easy as that. Once I paste it in, and it does its thing for a bit, it asks for permission [music] to edit our index.html file. I'll press one to allow once. >> And it's also asking permission to create new files. >> Yes. And it asks me several more times. I'll continue to say allow once. I could press two for allow always, but I like to keep tabs on what it's doing. When it finishes, we have to do one thing manually before we [music] can test or deploy our web app. >> I guess that's only fair since Gemini just churned out hundreds of lines of code for us. So, it's saying we have to configure Firebase a bit more. >> Yep. So, again, we'll explain this in detail in the lessons and labs, but basically, Gemini created a file that links our application to the Firebase toolkit. We just need to fill in some placeholder code so it actually works. I'll go to firebase.google.com to get the replacement code I need. >> And you're blurring out the API key because they're generally [music] private and shouldn't be broadly shared. >> Yeah, you shouldn't share API keys online. So now that the [music] correct info is present, I'll deploy the application. Okay, so do we type that in the Gemini field? Well, to keep it clean, I'm going to open a new terminal [music] tab again. Whenever that tilda appears alone, we know we're in the home folder. So, I'll change directories to the my [music] customer folder and type Firebase deploy. Moment of truth. Let's click the link. And [music] look at that. We've got a website. All right. Just like your sketch. We've got three columns, an add customer button. So, what are we waiting for? Let's add some customers. Let's save that for the [music] next video because there will be some problems that need fixing. Of course there will be. Stay tuned.