Debugging your first application on Replit
1. Debugging your first application on Replit
So in our last lesson, we built our first app on Replit, our guided meditation app. That being said, we hit one small snag, that was that our text was behind the countdown timer. In this lesson, we'll talk about how to debug that application and get it to exactly where we want it to be. So I'll say ‘The guided meditation prompts are appearing behind the countdown text. I like the guided ring, but I'd like the prompt text to be below the meditation timer and ready to begin text.' So for this prompt, I was being extremely specific about what the issue is and where we need to move that text, what we need to change. So now agent's gonna say, can see the issue is going to make that adjustment. And the point I really want to make here is that we have to be extremely specific. The change we want to make. We have to specify relative positioning and relative changes we want to make and really guide AI to the solution we'd like to come through. So now I'm gonna click play and see if we fixed our issue. Now what you'll notice is that we actually didn't, and that's okay. And it's good because this is a tricky bug and you're going to bump into things like this when you're building with any AI tool. So what we'll do is we'll say ‘The exhale text is still behind the countdown timer’, and I'm gonna take a screenshot just to show AI exactly what's going on. I'll paste that in and we'll send this prompt. So what we're doing now is we're trying a different approach to solving our problem. First we tried just giving a basic text explanation, but now we're giving an image along with another description of the problem. So agent's gonna say ‘Hey, now I can see that the exhale text from the breathing guide is appearing behind the countdown timer. The instructions are still being rendered inside the timer circle overlapping with the countdown.’ And so this visual instruction is another way of approaching a solution to our problem, which we're gonna talk about more in our lesson on context engineering. And so now that agent's done with our work, we can see the text is located below the timer and we're getting exactly the behavior we'd like. So this is a brief introduction to prompting AI and just how tricky it can be to sometimes get the outputs that we're looking for. That's not a reason to give up. It's not a reason to quit, and sometimes it means we have to be clever with the solutions that we pursue. So what we just built followed a collaborative approach where you control the crucial decisions about how your app looks and how it functions. We reduced the time to an MVP in the product delivery lifecycle, and the contents and quality of our prompts, as well as our follow-up prompts were key to getting the outputs that we wanted. And that has been your first application on Replit.2. Let's practice!
Create Your Free Account
or
By continuing, you accept our Terms of Use, our Privacy Policy and that your data is stored in the USA.