Transcription
Hello everyone. My name is Kostya. And in this video, we will look at such a web-coding extension called Row Cд. We will also see what it is, read some info about it, install it, and try it out in practice. So, what do we have? We have an extension that has certain roles under the hood, which are: architect, code, ask, bug, test, which we can assign to a neural network. And we can connect our own neural networks, which we most likely will do. In general, it has an architect role, which designs the project itself independently. And there is code, which is, accordingly, the most popular one, that writes code, refactors, optimizes. You can also ask, there is such a role, where we can simply ask something about the project, for example, to inquire what we can improve, maybe it will suggest some options itself, or simply ask, uh, what, for example, this function does or what this file is for, and so on. We also have a debug role, meaning it fixes errors, we can throw errors at it, say "this doesn't work, fix it." Well, and testing, it simply tests. What else interests us here? We have two modes. This is rowcode, as an extension, which this video is about, and also rowcд cloud, meaning a cloud editor. In general, you can create anything or do anything in the cloud, but that doesn't interest us in this case, because, well, I don't use that, by and large. I prefer to have more control over what's happening in my project, so I only use extensions. Here we have various things, this is not needed. In general, look, more than a million people already use rowcд. This is no joke. That is, if 1 million use it, I think it's a quite popular extension for web coding. And in general, Vipeкод, of course, is gaining momentum. Here we have frequently asked questions. You can translate and read them. If you are interested, I will move on to the prices. What about the prices? The extension itself is completely free. It is installed from the extensions store in Visual Studio Code. And we can use it completely for free. Neural networks, of course, we will have to connect our own, because they are not built-in. Well, and accordingly, this cloud solution. I will not talk about it. If you are interested, you can read the documentation and understand everything you need yourself. And here is the documentation itself. If you want to learn more about row-code than I will tell you in this video, but what I will tell you in this video will be enough for you to use it, develop something for yourself, and so on. In general, look, here's the thing. I will leave all the links, if anything. In order to use this web-coding extension, to create our projects, we need a code editor for this, because it is just a rowcode extension, I remind you. And, accordingly, you will need to download a code editor. This is what it looks like. This is Visual Studio Cд. I will leave the links if you don't have it. I already have Visual Studio Cд installed. I just go into it, and there's nothing here. I take a pre-created folder and just drag it. My project opens like this. It's just an empty folder, nothing else in it. So, now we need to install rowcode. We go to extensions. Here we type rowcode. It searches for it. Here it is, the very first one. We click install. Okay, it's installed. If it didn't open automatically for some reason, it usually opens automatically, then you need to do this. You need to press, either Alt Shift P, or Ctrl Shift P. And here you need to type Row Cд. For example, View Togle Row Cд. It opened here for me. In theory, it should open automatically for you. So, here it is, our rowcode. It's already in Russian for me, yours might be in English. To use it successfully, we need to add some neural networks to it. We have this settings icon here. We go in here. I already have code selected here. You can add whatever you want. Here are available, for example, Z, for example, you can write your GLM API key here and use it. I have it here already. You might have it too. Kven is free, you can install it. How to install it? And in general, I have a video about Kven on my channel, if you are interested. I will choose Kven. It will suit me for this video just to test. Let's also go through the settings, what's here. Well, accordingly, providers are what neural networks are available here in general, which you can install here. That is, we have some pre-existing providers, for example, Rowcд Ro Amazon, Antropic, well, that is, Cl. And there are quite a lot of them. For example, the same DeepsК, GI, grok. Well, I think you understood. N. What do we have here? We also have various modes here. This is what we discussed earlier, that is, architect, code, you can ask, debug, that is, fix errors, and orchestrator. Orchestrator, by the way, is a very interesting thing. I will talk about it a little later, show how it works. Also, in addition to these standard modes that we have, you can create, firstly, your own. And here you can look more about, well, about all this. You can create your own. There are also marketplaces for these very, uh, roles. That is, there is, for example, input, uh, according to the documentation, that some role reads. M, in general, roles can be different. For example, user story creator and so on. That is, devops, by the way, is cool. You can use it. Okay, I'll go back. Next. Auto-approval is enabled. Auto-approval is for not having to type manually. I usually, I usually allow everything. Okay, next. Command listening. This is not interesting to us. Computer access. There are checkpoints here, notifications, you can enable, uh, configure the context you need, and so on. This is not particularly necessary, in fact, at the initial stages when you are just starting web coding. But in general, you can choose the language here. But all this is available. Another interesting thing here is MCP servers. That is, you click here, we have various MCP servers here. That is, MCPs are needed to improve certain development elements. Or, for example, you can connect Superbase so that it immediately has access to your database and understands what is in it. There are also MCPs that improve design and so on. So, let's get started with the development itself. Let's try to write something. For example, I suggest creating some simple landing page and just trying to see how this whole thing works. So, I suggest making some small project and seeing how it all works. Let's, uh, write to the architect, or rather, the orchestrator: "Create, мм, a showcase, a showcase of products using HTML, CSS, and JS for demonstration. Use layout and simple effects. Find product images on the internet." and send. Let's see what happens here. The architect mode has been activated, meaning it will now design our project. It switched, I see, to code. It needs some commands. So, it started writing some code, apparently, for the main page. Yes, this is the magic, in general, that happens. It writes code. As soon as it finishes, we can see what's happening here. So, it created the main page. So, some CSS, meaning styles, was suddenly created, and it's already writing JavaScript. So, we can do this next. Just reduce the editor window and drag the index HTML and see what it has already done. As you can see, it's doing something. That is, it made this kind of showcase. There are no pictures yet, because, as I understand it, it hasn't added them yet. Yes, it hasn't added them yet. Oh, it also opened, as I understand it, itself. Oh, it also opened the browser and is looking at what's happening in it. That is, it opened, looked at what's there, what's not. This is very cool. So, it wants to edit something else. It's looking, in general, in the browser, as if a programmer would normally do, would glance at the browser, see what's happening there, and add something. In my opinion, this is, of course, cool. Okay, I'll wait until it finishes the entire task, and then I'll show the final result. Ah, it's already done. So, well, I see there are no pictures, but everything else, in principle, is there. Uh-huh. And the tabs don't work. But everything else is there. Let's write that the pictures don't work, the tabs don't work. Only all this needs to be written, of course, in debug. And now it will fix all these errors for us. In general, it completed the task, uh, fixed everything, replaced the pictures, as you can see. In general, there's even some functionality here. In general, it all looks like this. There are small effects. Interestingly, it opened the browser every time and checked if everything was working or not. Also, I don't advise you to rely on the result we got here, because we used one of the simplest neural networks. This is Kvenkoder. Therefore, the result turned out like this. And, accordingly, we wrote a very simple prompt, just to have a showcase with some products. But it did it. The neural network was free, the extension was also free, so it turned out quite usable. I recommend testing it on some larger projects, see how it behaves, try other neural networks, how they will behave in row-code. Someday I will do a comparative analysis, when I run the same task on, say, three editors at once and see the result, what we get in the end. Write comments, subscribe to the Telegram channel. That's all for today. See you soon. y