Devin AI: як використовувати ШІ для автоматизації розробки та тестування ПЗ

Let's learn how we can start using Devin AI in our software engineering workflows. And I want to get it to the point where Devin is literally my teammate and my co-founder for my current application here Text Snippet. So, I'm going to show you a real development workflow here as me and Devin create a new feature Text Snippet. Does that sound good? Let's do some agentic coding type of video. Welcome back, y'all. Today's video is sponsored by Devin. They said, "Check out Devin AI and how it can actually expedite your development workflow." So, I'm like, "All right, let's do it." What I want to do today is I'm going to go over to textsnippet.com working on. It's an aggregation of tech news across the world, one site. Not only do you get the relevant source, the stories, Blue Sky, X, Reddit, everything. But, one thing that I've been collecting data on, but there is no relevant page for yet is a leaderboards page. So, what I'm going to show you today though is how to take your application, have AI fully understand it from top to bottom, and then do real new PRs that they can integrate into your live production website. Essentially, the future of coding. Let's do it. So, first things first, we need to play around for source code, right? So, I'm going to connect GitHub here. We're going to be brought to our page here, and we're going to identify where Devin can work it. So, I'm going to select the very specific repository of Text Snippet. So, therefore, I'm going to simply select textsnippet.com and hit install. Let's get started. So, what we're going to do first is I'm going to select my specific repository of Text Snippet here. What you can also see is that any type of public-facing repositories you have access to as well. But, I got textsnippet.com here. And what I first want to do is I want it just to understand my application end to end. So, I'm going to say the prompt, "Look at my app here and do a full audit and understand it and report back to me." I like doing this when starting workflows of agents to give it full context. Because as you may already assume, more data it has, the better it's going to perform. So, let me go ahead and let Devin cook real quick. So, here we go. Now that it has a full understanding of my application here, and you can see it's even waiting for my instructions, I can send off our first major test together. So, here's going to be our first prompt here. I'm going to identify our objective, which was the leaderboard page that ranks tech news sources and authors are getting the most coverage over time. I'm also going to identify very specific data that I'm aware of within my application, which is I know this data already exists. I just haven't even made a front end for it yet. I wanted to first obviously collect data. And then, these were the data points within the Postgres table, source entity, author entity, story cluster snapshot. And then, finally, I want to first have it look at this information and understand and make sure we're on the same page. So, I'm going to hit enter here. But, I'm also going to do another workflow here. We're going to run some agents in parallel. I'm going to add a little chat here and maybe like this. So, recently I upgraded the CLI for Text Snippet and MCP. And there's new abilities that aren't actually reflected on our MCP page here or CLI page for extra context and information for the user. So, what I like to do is simply just copy over these links, paste it here, and paste it here. So, it's going to have context and know exactly what I'm talking about. I'm going to enter here. And as you can see right here, we got a toast application or notification that it went ahead and found that information. So, what you'll notice now is that we have two agents working in parallel. Always amazing. And we got our information here. The four tables are work together like this. So, it's actually able to see this. And it confirmed what I said earlier where the data is fully ready. So, I want to build it. But, before we build it, let's go ahead and make sure this is in a new branch. Therefore, when we do our PR requests, merge requests, we we do proper software development. Therefore, we're going to do multi-action here. We'll say, "Okay, let's build this in a new branch. Then, I want you to open it as a PR. And then, I want you to review the PR." I'm going to hit enter. And for you to see what's happening, we can come over to work log and see what's happening here. So, while that's working though, we can come back to our other agent here and see it actively working on updating the front end for the CLI and MCP. One really cool thing as well with Devin is that you can go to a live desktop and it's building it right now in this sandbox environment for our other agent. But, I can come over here to this desktop. And this essentially gives the agent the ability to run this locally and do testing on your behalf. Sandbox environment, application live. And quite literally perfect timing. So, we had those new abilities in the CLI MCP. I hadn't updated the front end page yet here. And what you'll notice is that one, Devin fired off and found the relevant new things, which is cool. And on top of that, we can actually test it in the app. So, I test the app. Look at this. And look at this, y'all. It is opening it up. And when I say sandbox environment, it's like in the cloud. Okay, this is actually cool. Look at that. It literally scrolled and it's checking to make sure that it works and that it has the new information like platforms. That wasn't there before, and I can show you after. But, the AI agent is quite literally looking at your application in a local environment to confirm that the changes not only don't break your application, but are actually being shown correctly. This just gives me goosebumps because it is very weird to see the AI literally navigating through the web UI that it changed and confirming it's good. The reason this is super cool is because the old way of doing this, like basically how we've been doing it for this entire eternity of software development, was you would have to manually scroll through the website, click through, make sure everything's working. Using Devin here though, it went the extra 10 yards here of creating a siloed environment that is safe for your application to run in. It's in its own little sandbox and confirm it for you. And of course, at any time we can always control the desktop. But, this is extremely solid, y'all. Very interesting. Very, very interesting. But, while this is going, you already know the situation. I can come back to my other agent that's working on a whole separate branch. And not only do I get suggestions via this entire workflow, but on top of that, I can test this specific new feature. And I hit test in app. This test in app is one of the coolest things I've seen by Devin here. It's really flawless in the sense of Sometimes you can get into these workflow environments where you do a new feature, but the AI's ability to really check its own code is very limited or boxed in. But, the way that Devin approaches this is that because it knows the initial execution point, e.g., like, what did I need to do, it can effectively know what to specifically look for in that desktop environment. Now, while that is testing the new leaderboard page, I can come back to the MCP and CLI update we did here. I can control this desktop and look at it myself. So, just so you can see clearly what occurred here. If I come down to here to what you can do, one of the new sections I noticed is the platforms. As you can see right there. So, if I come over to the same exact page here in production, I scroll down, I don't have this section yet. And then, obviously, there is more sections to show. But, the point being is that you can actually see a clear indication that not only do we have the beginning process of let's write some code, but now we have the loop closed in the sense of let's actually test the code, right? Cuz anyone any you can just write a bunch of code and then it just all goes kaput. Let's actually make sure the code's good. So, pretty soon here, I'm going to be merging this. But, let's confirm these test and execute. Looking pretty good. As you'll notice is that I could have went away, cooked a steak, and came back, and then I quite literally could have watched the video that I saved here and recorded and have notes about. But, the extra layer here that's really impressive here is how detailed these PR branches can get. So, if I come up here to my repository, and this is why we connect something like GitHub, I can see both branches are currently here and both PRs are here. I can go to update CLI and MCP page with the new abilities. I don't know about you, but me personally, I was never good at writing branches and information about branches. But, what I love about Devin here is it really breaks it all down. So, if you come back too much later, you know exactly what happened. And on top of that, it even goes the extra length here of contextually knowing that it's a robot and there are specific things it wants the human to check, e.g., you. Now, look at this, y'all. If I scroll down here, it starts iterating and testing for me. That was the entire process we saw earlier, confirming that it works in a local environment, e.g., the testing results. Take it one step further here, I can click this hyperlink. And this brings me to the specific session this happened in. This is important. As you can see, we can run a ton of these agents. So, imagine we ran seven agents for seven different branches PRs. Boom, boom, boom, boom, boom. And then, are able to find the exact session with the testing all done in the local environment here or Devin's local environment, Devin's box, Devin's computer. But, based off the test I've seen, this is looking good. I'm going to go ahead and merge this pull request, confirm merge, and then delete. Delete branch. This is the way you approach this kind of engineering. Shoot off flows, build systems, come back, review as human, merge into production, and then push into production. Because in real time we're integrated, it actually identifies it's been merged here as well. Super nice. I can archive. And would you look at that? The other branch we had here for leaderboards, not only does it know to use the specific UI we have, but it's actively testing with dummy data here. It took the extra 20 yards of filling in dummy data so it can reflect it correctly in the UI. This is actually extremely cool. So, while this is going though, I'm going to add one note here. I don't want the leaderboard in the navbar. I just want to put this in the footer under the Text Snippet column. So, I'll simply say that. Okay, put the leaderboard link in just the footer in the Text Snippet column. And then, what you'll notice is I boom, we're back here where it's essentially going over everything again. I can watch the video to see that test passed. There was also this really cool piece of nuance here where it was able to create a specific skill for my web app application, e.g., Devin creates this skill native to specifically my application so that every time it test from here on out, it performs the test faster and better because of the fact that it has more context of how to navigate my specific tech stack rather than starting from zero. But, as you know with agentic coding though, this is very much back and forth. So, let's go ahead and enter here. Have it put it in the footer here. I'm going to check the PR, merge. Let's see this all works in production. Okay, nice. It went ahead and added to the footer. If I come over to the pull request here, very in-depth, very nice. If I scroll down here, which is really, really cool, is these test results. So, not only is it giving me screenshots and uploading it via the GitHub PR of very specific things such as the author tab passing and clicking the author tab. But, on top of that, one thing that I thought was really cool is it went the extra mile here for edge cases. So, what if nothing exists? It has no data yet, right? These are edge cases that are important because without edge cases being handled, then your application could break and fundamentally lose trust of a consumer. This is all looking good. I love it. I'm going to go ahead and merge this pull request, confirm merge, and delete branch. So, congratulations. Now, if you know what you want to build, you can just fire off a bunch of Devins to build it for you. But, let's check out the final results here. All right, we are at techsnip.com, the live website. Let's first check if the footer got updated. Here we go. We needed a word in the footer. And boom, this is actually really cool. So, with Devin, I was able to create this whole new feature on the site that aggregates all the data and sees the top publishers. What's even really cool, which I didn't even request, it actually breaks it down by category as well, such as AI, right? And you can see the top ones there. Alternatively, cybersecurity and all the top publishers there. Also, by duration, 7 days, 30 days, all time. And it even went one step further here to break it down by author in specific topic there as well. Pretty nice. The other one that got the major upgrade here is the CLI and MCP page. If I come down here for MCP, for example, this really broke it down to all the tools and the specific queries we can make specifically with the MCP integration of TechSnip. That just about does it. You just saw me create out two new features in parallel using Devin AI. I'll make sure to leave a link in the description down below that allows you to get access to Devin. But, as you already know these style videos, make sure to leave a like. It's completely free. And I'll see you in the next. The corporate has found his new software engineering friend called Devin that's going to be able to make me a better engineer, a faster engineer, and a overall executioner when it comes to the best code ever type of video.