Sign in to continue learning
Build with Andrew
Beginner
1 hour
Topics
AI Coding
Now that you've built a basic birthday card app, let's see how you can add additional features to it so it can do additional things or be more fun. If you showed your app to anyone else, maybe they'll have ideas for things to add too. And I also want to show you what to do if there's something wrong with whatever the AI had built for you, such as if it doesn't work the way you're expecting. As before, the primary way we will tell AI what features to add is by prompting. To understand why it's important to be specific in the way you prompt, let me make an analogy to ordering food. If you go to a food truck and say, give me a sandwich, who knows what type of sandwich they will give you if that's all you say. But if you say something more specific, like I would like a vegetarian sandwich, then that narrows down the range of what you may get back. Or if you say, I'd like a vegetarian sandwich with hummus and cheese and multigrain bread, then that specific instruction really means what you get back becomes much more predictable. Or if you say, I'd like such and such vegetarian sandwich and add a drink and make it to go, please, then it becomes much more predictable what the food truck will give you back. At a food truck, by being specific with what you ask for, you're more likely to get what you want. And so too it is with prompting AI. By writing more specific prompts, you're more likely to get exactly what you want. Ooh, this is exactly what I wanted. As you gain skills in getting AI to write for you, you get better at being more specific with the instructions you give the AI, and this will give you better results. I previously built an app using a prompt like this, either on one go or by going back and forth a few times. What I'd like to do now is add a few new features and modify some existing ones. For example, instead of having three input fields like we have so far, name, age, and hobby, maybe you want to gather five pieces of information, so the five input fields that users can input so you can create more personalized messages. Or maybe you want a I'm Feeling Lucky button that automatically fills out all the fields for you so you don't have to type everything in each time you use the app. Or you can also update the look and feel, say change the title or add a button that copies the message to your clipboard so you can easily email it to friends or even redesign the entire color scheme to better match your style. After having built a basic app, you can then make the app yours by deciding what features you want to add. So you might continue the chat conversation by telling the AI to make it have five clearly labeled inputs, name, age, hobby, an adjective, and a plural noun, and it'll update the app to look like this. And notice that I'm writing very specific instructions here. I'm not just saying make it have five fields, I'm telling it what are the five fields I want it to have. Or if I add an I'm Feeling Lucky button, again, I try to be specific in telling it what I want the I'm Feeling Lucky button to do. I want it to automatically fill in the blanks with random words, and I want the predefined word choices to be funny. And here, I'm actually adding two features at the same time. I might update the titles and subtitles and also add a button to copy across the clipboard. So this is actually two of the bullets from the previous slide that I'm adding at the same time. And I actually like the color blue, so let's make the color theme blue. Feel free to try out these prompts yourself, or even better, pick a different color theme, or tell it to implement any other idea that you have. If you like pink, like my daughter does, or green, like my son does, tell it to use a pink or green color theme instead, or make some other changes depending on what you feel like doing. And if you ever change your mind, you can do that too. So after I've made the color theme blue, if I decide that I don't want it blue after all, I actually want it to be purple, you can write a prompt like that, and the AI will obediently change it to purple. Now, a lot of the time, AI is pretty good at giving you exactly what you ask it to do. But sometimes there's a chance to generate an HTML page that doesn't work. In software, we call this a bug, when there's something that doesn't quite work the way it's supposed to. Here's actually a broken version of an app that AI generated for me earlier, where I've typed in all of these fields, but if I click Generate Card, nothing happens. So that's kind of weird. Here I'm clicking my mouse, but it's not actually generating a card. It turns out I'm feeling lucky it works, but again, Generate Card doesn't generate any cards for me. If that happens, what I'd encourage you to do is to clearly tell the AI what happens. So here I've typed, nothing happens when I click on the Generate Card button. Can you fix it for me? And if you do that, the AI is usually pretty good at finding at least basic bugs and fixing whatever is wrong. When you do this, sometimes the AI will write some technical explanations of what went wrong. So here it says, JavaScript was attached to the button. Click event, boy, that's a lot of technical terminology. I would say for now, just don't worry about what the AI is saying here. You don't need to understand these technical details. If you're really curious, you can actually ask the AI, what do these terms mean? But you don't have to do that. Let the AI do its thinking, say what it wants about the technology, and then focus on downloading the new HTML file to see if that works. I hope you will start with the basic birthday card app and either try building the features I suggested earlier in this video, or some features that maybe your friends have suggested or your own ideas. And in fact, if you're not sure what else to do, you can also ask the AI for ideas. So if you ask it, how can I make this birthday card app cool? It may give a few suggestions and then you could pick one or more and use the AI's idea to make your app more cool. I actually use AI as a brainstorming tool a lot when I'm building software, and you should do the same too if you don't already have ideas that you're excited about. Please go to the next item in this website and have fun adding features or play with the color theme or implement whatever you feel like. When you come back, we'll use the skills you've already learned to build a second app, a ping pong game.
