 So welcome. It's my first time like presenting on a user group because they keep on telling me not to sell anything. So today we're not selling anything. We're just going to be talking about the cool technology. And I was very passionate. I was very passionate about it because once I once we once we discover and once I played around with it, it actually made me feel good about being a techie again. As you know, I haven't been doing any development work for around seven, eight years. But after seeing this, it's actually very exciting. With me, here's Matias. He's our intern. It's his last weekend trend micro. Oops, no mess. It's his last weekend trend micro. So he's going to NS after this. So if you need a very good developer, this guy is available in two years. Right. Yeah. Cool. All right. Let's get started. All right. Can we get a show of hands? Who writes code here? Who's a developer, writes cloud formation, anything? All right. We're not going to give, by the way, we have, we have like wireless chargers with us. If you answer the right question, but not for this one. I think we don't have that much wireless chargers. So, okay, this one, next question for you guys, right? How do you figure out what to write? So, for example, you have a, you have a, you're building an application and you need to know, you need to know, I need to, I need to do a regex function. How do you actually research on how, or how do you build that function? Where do you get your ideas? Google. Google. What? What? GitHub search? What else? Oh, that's my favorite, Stack Overflow. Right. I mean, how many times have we like, when we have a problem, right? And you go to Stack Overflow and then you copy and paste something there and then when it breaks, you don't know how to fix, right? So, this typically, you know, our lives, right? Next thing is, and there's a next version on this, right? So, somebody said Google, somebody did, somebody's searching GitHub and somebody's doing Stack Overflow. What's next? Have you heard, guys? Have you heard about coding companions? Right? Anyone knows coding companions? Have you heard of it? Right? It's not like, it's not like your friend who sits beside you, right? But there's this knowledge called coding companions. So, there are two coding companions that is very popular right now. First one is Amazon Code Whisper. We're supposed to preview today, but they didn't give me access in time. So, we're going to be talking about the alternative, which is called the GitHub Co-Pilot, right? But just to give you some background, right? Co-Pilot is running under technology called GPT-3. And what does GPT-3 mean? What is GPT-3, Matias? It's basically a natural language processor. Right? So, what else GPT-3 is being used on? So, if you look at Instagram, there's a lot of, there's a lot of apps in Instagram saying, I'm going to write copy for you. So, that's one of the use case, right? And next one is Designer. So, you know, you want to design, I saw this in a YouTube video where they just type in, I want you to copy, I want you to copy stripe.com. And it will design a UI using Figma, right? And will give you a mock-up of a copy of stripe.com. And for most of us here, right? Next one. For most of us here, here, we kind of need this. Resume creator, right? So, if you want to find a job, you can actually use this to write your own resume. It's very cool. There's some questions about folks, right? What are the differences between Co-Pilot and Co-Visper? So, in some, there's a medium blog post that talks about the differences between two of them. So, there's this function that they created, like get price of Bitcoin, right? So, the first one on top is written by Co-Pilot. The one at the bottom is written by Co-Visper, right? So, pretty cool. It's pretty much the same, but they have their own way of writing things. And I reckon that they're doing this because they're different because they're getting data from two different sources. Obviously, GitHub has more, you know, it's more stuff because everybody's posting stuff in GitHub. Whether as for Co-Visper, I'm not sure where they're getting their machine learning data from. Do you know, Kai? Okay, I don't know. All right. So, what does, what does, what does Co-assistant does or Co-Pilot does, right? What does it do? It helps you write helper functions. So, you know, that time where you have to write a function that says get, you know, get stock price or get convert regex or get a color, convert this to that, you know, that time where you have to do that. And you're going to go to stock overflow. What is the function in Python to convert x to y? So, that's a very good use case for this, right? It reduce writing repetitive tasks, right? So, for example, I was playing around, create a login class. Boom, it will create a login class for you. It helps you learn new stuff, right? I don't know how to do this now. I know how to do this just by asking the Co-Pilot. Figuring out complex calculation, right? Like, write regex. Very, very easy. Like, for example, how do I know if a color, okay, there's even a YouTube video I watch, right? How do I know if a color is bright or dark? So, when you're doing a UI theme, right, based on the color, it will tell you if it's dark or light. It's just very impressive. But, okay, what it does not do, right? System design. So, you know, for example, how you structure your code, how you structure functions, how you structure classes, what are the directory structure, how many files do, where do I put the folders in? It still does not do that, does not do yet software design, data flow. And the last part is it does not guarantee code security because it's just like, I don't know if it's like Stack Overflow, but it reads stuff from GitHub, right? Or it reads stuff from a repository. It's only as good as the models or the data that it creates, right? And something that is very explosive, right? If you go to Stack Overflow and ask how Co-Pilot works, I think that's a big issue, right? Meaning, you're asking one guy to ask how to use the helper how to use, right? Yeah, I would just ask one or another. Now, there's a controversy. There's a lot of controversy around this because some of the developers who submit GPL code in GitHub, they're not being attributed by the code that was used. Imagine, right? I asked Co-Pilot to create a function for me. That function was patterned after a function that you guys created and you put in GitHub. You won't be attributed to it. So that is something that you have to be concerned about, right? And then in YouTube, right, you can always see, and where do you see it, right? In YouTube, you see a lot of these people making a website in eight minutes. Actually, why don't we do it now? Like Matthias is here. He's going to show you how to build a website in eight minutes. So I'm going to pass the engineers to the edge. All right, cool. I think the reason why people don't like it is because GPL code is supposed to be remain open source. Yeah, correct. So people are using open source code and making a website. Correct. It's not what Scott asked me. All right. So hi, guys. I'm Matthias. So I won't be making things, you know, 100% from scratch, but I'm just going to show you how, you know, co-pilot can help you, you know, write some of the boring stuff so that you don't need to regurgitate it or try to find our stack overflow if you forget. So I have this really simple express server set up. So did it? Oh, sorry. Let me just duplicate the screen. All right, we good now. Do you guys see it? All right, cool. Yeah, so I have this pretty basic express server and I'll be showing you how, you know, this can help write APIs on the express server as well as a very basic front end on React. So as you can see here, we already have, you know, a very simple express server set up with a connection to MongoDB. And now I kind of want to create, you know, the Mongoose model because I'm going to be making a to-do list, right? A to-do list or a task list. And I want to create the model to store the task and I wanted to have a field that has a text. So it's the task that you're submitting and a checkbox that says whether it's completed or not. So with GitHub co-pilot, you can just write a comment, right? And if you press enter, it'll come out and as you can see there's this line of quotes I can just press tab. And if I keep pressing enter and tab, you can see it just automatically comes out with a code for you. So this is pretty, pretty, pretty cool because you don't need to spend all that time writing. And yeah, as you can see, all I did was press enter and tab and, you know, we created a Mongoose model. So we already have that and now we kind of need an endpoint to send all our data to, right? So let's create an endpoint that creates a task in this database. All right. So this is going to be a post endpoint. So as you can see, it comes out with that. And if we keep going enter and tab, it says it's going to create a new task. All right. And that is basically the function. So you just kind of want to keep pressing enter and tab to see if it ends. And sometimes these code companions have a slight issue where, you know, it doesn't finish off with a semicolon or it doesn't finish off with your brackets. And sometimes it just puts some gibberish or it puts in, you know, like variables that don't really exist or variables that you don't declare. So, you know, it's always important that, you know, even though it auto-generates the code for you, it will be, you know, still like watching out and still reading through the code. So it's not something that can completely replace a developer. It's not something that can substitute for, you know, you not knowing how to code. It just kind of helps you a little bit. So, yeah. So you can see how easy it is to just make the post endpoint. So let's do two more. All right. So I'm going to make one more endpoint that retrieves all tasks. So that will be a get request. So, yeah, it will just retrieve all the tasks. All right. And then it will send that. Yeah. So we have that endpoint now. All right. And now we'll create the final endpoint that allows us to update the tasks. So this will update the task whenever we, you know, click the little box that says this task is done later when we make our front end. All right. Sorry. Not like that really matters, I think. But, yeah. And, yeah. Yeah. So as you can see, Co-pilot just helped us create, you know, a model in MongoDB. So using Mongoose. And it also helped us create our endpoints that, you know, our front end is going to call, right, for this API. So we can go ahead and save that. Okay. And now what we are going to do is we are going to take a look at our front end, which we'll be running on React. All right. So first of all, there's like literally nothing here. So everything that I'm going to write right now is going to be auto-generated by Co-pilot. So, of course, there's still all of the comments that I left there. So that's kind of like the structure that I'm going to have for this, the kind of flow chart that I thought about when looking at how I wanted to, you know, create this front end over here. So first, right, we want to make a function that sends a post request to the tasks endpoint with data from, you know, the form over here. So let's create that right now. So it creates a function called handleSubmit. All right. Cool. So that, so PreventDefault just prevents the page from refreshing on submission. And we can change that if we want to. All right. So I also imported X here. So what it's going to attempt to do now is there's some code that will send the post data through Xios to the API URL over here, which I set to, you know, my local host. So if I keep going, we have just made the function that will submit all the tasks to the endpoint. All right. So now that we've done that, we can, you know, start, you know, creating our front end, right? So now we kind of want to create a form that takes in a task and then submits it to the server using that function. So I made a comment there and I can just go here and it will start generating this form for me in JSX. So as you can see, it creates the header. It even creates the form. So as you can see, it even, you know, links the form to the handle submit function that I created or actually GitHub co-pilot created earlier. So if we keep going, all right. All right. So that should be our form. So that's our form, right? So on a very basic level, what we have now is we have a function that sends a post request to the tasks endpoint with data from the form. And yeah, we have a form that submits it to the function. So what we can do now is hopefully this works. All right. I saw I tested this, guys. So we can launch both the, there's a missing bracket at line 97 on the server. So another problem that these coding companions have is that sometimes they don't fill in the brackets and the semicolons for you. So give me a second while I try to catch this one. Okay. Below. Is it here? Oh, yep. My bad. All right. All right. So now we can try to launch the server again. All right. So the front end is running. All right. The front end is running and we see we are connected to the database. So let's try this out. If we refresh. Uh-oh. Okay. So we failed to compile. Let's check out our logs here. Line 72. So here is another error. So yeah, we need to be pretty careful about these things. And let's try that yet again. All right. So hopefully it compiles properly this time. So after this, just to prevent any of the errors, I'll go into the project that I already pre-compiled. But it's pretty much the same steps that I used. So let's give you a second to load here. We know it might not work. So we have a cooking show app just in case. If the food is rotten, we just got to take one out from the oven. So something is messing up here. So don't worry. I already have a running one from GitHub Copilot already. So trust me on this. I wrote none of the code. I'm just letting GitHub Copilot kind of take the wheel. But I think definitely this is a pretty good example of how GitHub Copilot or just coding companions in general can't really take over a developer's job. Because things like this can still happen. So it's really more of something that can help you write and understand functions a bit better, especially when you can't visualize or you can't with something off the top of your head. It definitely helps. You can't with a code snippet. But definitely not like a full project. And I think if I stayed here to talk to you about the full project, going through it will take a bit more time. It makes a good developer great, but it doesn't make a not-so-good developer good. That's the only thing I can say. So actually I can shift over to the set of... What? Okay. So are you doing the other stuff? No, I'll just show the stuff like the... You can make a regex function to validate text. So actually this to-do list, right? You can say I want to get the groceries. So I'll submit it and that sends it to the database. And it can even generate the list. So if I hit the checkbox and I refresh, it does update the database as well. So it's a really, really powerful tool. I really wish the code on the fly did work, but I don't know if you're running out of time. What's also really cool is that... We mentioned earlier how when the auto-generate code is not always safe, and I have this pretty cool extension here from Trend Micro Open Source Security. That basically just shows you... Here I have un-sanitized HTTP input, and what's pretty cool is that it just pulls up the exact line that was generated by GitHub co-pilot or the coding companion. So here I asked to create an endpoint that updates the completed status of a task by its ID. And when you auto-complete this, you aren't going to be looking through every single line of code and you aren't going to be rigorously testing it. So what this kind of does is that it goes in and it points directly at the line of code that has a problem. And it will tell you that maybe you might want to consider sanitizing this line of code to prevent any injections or cross-site scripting. So that's kind of it on our developer side. Since we're in the AWS event, and then Kai was talking to me about this a while ago, how does it help write infrastructure? Matias just showed you that it can help you do some code stuff, but there's these two things that I really super excited about. So CloudFormation templates. So you can actually use this as well to write CloudFormation templates. Easy AWS, boom. Then it will automatically properties. There you go. So yep, you can even help you write CloudFormation. I like, what about S3? I want to create, what about CLI? Bash. Let's close this. What about Bash? I want to do AWS. Oh, okay, there you go. There you go. I just typed AWS. I can create shell scripts. And for the people who use Kubernetes here, actually I can just type, as long as I put API version v1, it will say create pod with engine x. And there you go. There you go. Yeah. So it's thinking now what kind of spec it will use, but there you go. So basically we traversed five languages, or four languages with this tool. But I think for the spec it didn't think too much. But yeah, it can do a lot of stuff for you. So yeah, that's it for us. Thank you for having us here. See you at the drinks later.