What is DevChat and what can it help us with?
DevChat is a product of OpenAI, an AI that can conduct programming-related conversations. This means you can use it to solve some programming problems or get advice about programming.
You can provide code snippets and ask questions and it will help as much as possible. This might include identification of code errors and suggestions for fixing them, or explanations of a certain programming pattern or implementation. In addition, it can also implement some advanced functions, such as refactoring code, providing code writing suggestions, etc.
Look, it’s really versatile?, now, we know It is used to improve our programming efficiency and help us provide some programming suggestions. Of course, it also has some advanced functions, such as refactoring code.
So, let’s step into the world of DevChat and have some fun
1. Registration and installation
The first step is to register an account on the official website
Official website address: https://www.devchat.ai/zh
After registration is completed, you will receive an access key in your email address
Then you can use it in your development tools. As a front-end engineer, I will give you an example of vscode:
Download the DevChat plugin
Oh, by the way, please note that DevChat has requirements for the VsCode version.
After the download is successful, click the small gear in the lower left corner – Control Panel and enter the devchat key, then copy the key received in your mailbox and press Enter
Then after a short wait, devChat is initialized. This is the completed interface.
Oh, of course, these steps are officially provided. They are not only versatile, but also very considerate.
2. User experience
Keep it simple
My usual job is to write front-end web pages. The most troublesome thing for me is writing interactive animations. Then I tried to use devChat to help me write an interactive animation.
As mentioned at the beginning of the article, devChat is a programming assistant, and it also has some advanced functions. Is this really the case? Give it a try and let it help me write an animation.
<!DOCTYPE html>
<html>
<head>
<style>
.progress {<!-- -->
width: 50%;
height: 30px;
background-color: #f3f3f3;
border-radius: 6px;
margin: 50px auto;
}
.progress-bar {<!-- -->
height: 100%;
background-color: #66DE93;
width: 0;
border-radius: 6px;
transition: 0.4s linear;
}
.progress-wrap {<!-- -->
text-align: center;
position: relative;
color: black;
margin: 0 auto;
}
</style>
</head>
<body>
<p id="demo"></p>
<div class="progress">
<div class="progress-bar"></div>
</div>
<script>
function animateProgressBar() {<!-- -->
var elem = document.querySelector('.progress-bar');
var width = 1;
var id = setInterval(frame, 10);
function frame() {<!-- -->
if (width >= 100) {<!-- -->
clearInterval(id);
} else {<!-- -->
width + + ;
elem.style.width = width + '%';
elem.innerHTML = width * 1 + '%';
}
}
}
animateProgressBar();
</script>
</body>
</html>
Yes, it’s very simple, but it can indeed save me time. Of course, this progress bar is animated, so I won’t upload it. You can run the above code and take a look.
It’s very considerate. It even tells you how it is implemented. It is really leadership-level care, allowing you to not only CV into the code, but also CV into the knowledge base in your mind.
Do you think this is the end?
Next comes talent
Directly upload the code
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes colorChange {<!-- -->
0% {<!-- -->
background-position: 0 50%;
}
50% {<!-- -->
background-position: 100% 50%;
}
100% {<!-- -->
background-position: 0 50%;
}
}
.progress {<!-- -->
width: 50%;
height: 30px;
background-color: #f3f3f3;
border-radius: 6px;
margin: 50px auto;
overflow: hidden;
}
.progress-bar {<!-- -->
height: 100%;
width: 0;
background-size: 200% 200%;
background-image: linear-gradient(135deg, #23bdb8 25%, #a5db38 50%, #1b5299 100%);
animation: colorChange 2s linear infinite, fill 5s ease-in-out forwards;
}
@keyframes fill {<!-- -->
0% {<!-- -->
width: 0;
}
100% {<!-- -->
width: 100%;
}
}
</style>
</head>
<body>
<div class="progress">
<div class="progress-bar"></div>
</div>
</body>
</html>
This time the progress bar animation is smoother and the style is better than before (I guess the product will praise me again). It is a bit troublesome to upload the animation. You can copy the code and run it yourself to compare. Personally It still feels very good.
3. Talk about your feelings
In the AI era, many developers have already used various AI programming tools, and the evaluations vary widely. But overall, AI programming codes are increasingly appearing in various technology stacks, and its reputation is gradually rising. With the emergence of GPT4, AI programming is reaching a new level, and the Software Engineering 3.0 era is also underway.
So, how to use such a tool? I think the most important thing is to have creative ideas, understand your own needs, or be able to express your needs clearly in language or text, so that the programming assistant can help better and more accurately. you
Of course, I haven’t had an in-depth experience yet, but based on these simple examples, I think DevChat is well-deserved. It’s okay to at least improve my development efficiency. I will also experience more difficult ones in the future. In-depth functions, such as code reconstruction, etc., and subsequent experiences are also shared with everyone.