Let's Build a Website in 10 minutes with GitHub Copilot

AI in Production

Slides: https://docs.google.com/presentation/d/1nIJfvs-YVZt0Ps8JeOSpbi5xknYq-Ykt/edit?usp=drive_link

Demetrios [00:00:05]: Guess what, we've got Bryant coming on. Where you at, Bryant? Bryant's coming on. What do you do, Bryant? What kind of stuff do you work on?

Bryant Son [00:00:15]: I work on GitHub Copilot, as well as any other GitHub product in general.

Demetrios [00:00:21]: There we go. Yeah, Kai is very happy with that. All right, Kai, thanks so much, man. You always brighten up my day. I appreciate it. And we'll let you go to the chat and answer all the questions.

Bryant Son [00:00:34]: Awesome. Cool.

Demetrios [00:00:37]: All right, Bryant, you got a talk coming up. I am going to let you share your screen. I think you got to do that. Here we go.

Bryant Son [00:00:47]: Perfect.

Demetrios [00:00:48]: All right, man, I'll see you in ten minutes.

Bryant Son [00:00:50]: Perfect, sounds good. Okay, so welcome. So let me time myself, just make sure I am on time for the full ten minutes. Welcome everyone. My name is Ryan. I will give a little intro of myself later and hope you can hear me clearly. But the title for this session is let's build a website in ten minutes with the git of copilot. So without further ado, let's get started.

Bryant Son [00:01:12]: Okay, so let me give an intro, a very short intro. What is GitHub Copilot? So in short is AI artificial intelligence particle completion tool that helps developers to write code faster. But it's really like pair programming. If you've ever done pair programming before, it's sitting somebody sitting next to you and watch you to help you as you do type of code in your front of your computer, right? So your assistant sitting right next to you helping you whenever that you need that help. Okay, so what is needed for GitHub Copilot? So you technically need three things. Just three things. First thing is, well, duh, you do need a GitHub account, and that account is better linked with GitHub Copilot license. There are individual license and enterprise.

Bryant Son [00:02:05]: So if you're under enterprise and they have a copilot seat assigned to you, well, lucky you, you got that copilot, you can use it right away. And there are right now for support. IDE stands for interactive development editor. Like your code editor. First thing is visual studio, that's for C sharp and net and visual studio code, which is a primary demo I'm going to give you today. And then any of the jetbrains like Intellij for Java, Pycharm, PhP Storm, they're all supported, right? And then the last thing is Vim or Neo vim. Now, Gitto core Powerchat right now is not technically officially available in the Vim Neo vim, but you can find a community plugin out there. So you might wonder what about if I use xcode for Apple iOS development or maybe eclipse if I use Java, right? So even though there is no official plugin, I know there is a community plugin out there.

Bryant Son [00:03:02]: So you might be to try it out. Okay, cool. So a little about me so I'm senior solution architect GitHub. I've been GitHub for about three years. I've been working on GitHub actions and then working with the customer a lot for that. I work with any kind of product with the GitHub in general, like even security and a lot of other things. But since last year I've been heavily involved with creating and then create material and the resource for GitHub Copilot and definitely did a lot of training for the enterprise customer. So this is my last conference in Austin, Texas.

Bryant Son [00:03:37]: I also did some presentation with the copilot to public before. So without further ado, let's get started. You have know, maybe seven minutes. So hopefully you can see my screen in visual studio code. And this is where we get started. So remember what I said about what kind of things you need to get started with the GitHub copilot? Well, first thing is you do need GitHub account, you log into GitHub account. So there are different ways to log in depending on which id you're using. Those four sport id, you can see that for visual studio code I did a login and then other thing is you do need to install the extension for GitL copilot so it comes out extension again.

Bryant Son [00:04:23]: If you're using different ide, you might be able to find in like a marketplace or something similar. For feature studio code is extension. So you can see that I installed this and then once you have installed it you have to restart and then you have to kind of connect to your GitHub account with that id you're using. And another thing we're going to utilize Gito copilot chat. This is optional, but this can be like helping you kind of check GPT, stay within id, ask questions and definitely help to help with the refactoring code. Create unitas. This is really going to be helpful. So those things are ready.

Bryant Son [00:05:01]: Once you install with Gito copilot you'll see there's cute looking, I don't know, you can see or not. Bottom right corner Git of Copilot icon. This will start showing a loading screen whenever he is suggesting you something. But you can also click King desk will bring up the different options okay, so if you also want to see how the GitHub Copilot is responding in the visual studio code, you can go to terminal and then if you click output window, you can see that how the GitHub Copilot if you choose different option there. Again, if you're using different ide, you will be able to find the similar option in other places. So this is another way to check if you want to troubleshoot if GitHub Copilot is actually talking to the proxy server we have, right? So right now let's try to I create a simple index HTML just to get started because in the other browser you can see that this is empty, right? Hopefully you can see my browser. This will be like showing up as I start creating my web page. Okay, so first thing is that GitL pilot will respond whenever you provide a context.

Bryant Son [00:06:08]: That context can be file name or any kind of keyword you're typing within your file. So I'm going to type HTML, assuming I do know some HTML, and it will start suggesting as soon as you provided some context, right? So I will take that it is. And of course it's optional whether you want to take it or not, right? And then if you do want to override it, you can just type as it is. And then the way to accept that suggestion, the shortcut is hitting the tap button, right? And I'm going to give it something like simple website for AI in production demo, right? And this is also part of the context if you do want to provide it. And I'm going to just give it some suggestion based on what I type. And here we go. And I'm just hitting the tap button. And that's all the things I'm doing.

Bryant Son [00:07:04]: And then I will just do the body completed. Now I wonder. Okay, so that's pretty good. And if you checked what I've created so far, you see this right now, right? And that's good enough. What if I wanted something more interesting, right? I'm just pretty simple, but I done it in just less than a minute. What if I want to do something more interesting? So another thing you can try is you can provide a comment, again, any kind of keyword or that can be a context. I would do something like because I know it's very famous for per ball season. I guess I don't really watch a football.

Bryant Son [00:07:40]: So funny story. I graduated from UT Austin, so I never watched a single football game. But I know the football is really popular. I'm going to create a table like representing different ball team, right? Okay, and then this is a comment in HTML, but you can use any other comment and they can become the context and you can see that the GitHub copy is thinking and it did generate some suggestion there. Okay, so you can accept that suggestion as it is by hitting the tab button. But I will show you another trick. So there are different ways to generate the result. And then one way is if you're using Mac is a control and return button, or if you're using the windows, I think it's command and return button.

Bryant Son [00:08:32]: If you hit that it will bring up that like a syntax suggestion. So just while you see a load and you can hear, you can kind of browse through the solution that you would like to accept. So I'm going to just go with the second one, right? And you will fill out. Okay, cool. So now if I go back to the website and reload it, it looks like this, okay, so right now it looks pretty good, but it's not too super pretty. So I want to add a bootstrap. So this is where I want to maybe using the gitical pilot chat, I'm going to bring up the pilot chat. Can you make that table prettier using bootstrap? Okay, so it does give us some just suggestion and I can take that it is.

Bryant Son [00:09:24]: And then there are different ways to edit, I can insert it or I can create new file. But let's say also I will give you another option which is that I can highlight it and this is only possible if git of copilot chain enabled. I can go to copilot and I'm going to start in line chat refactor the code to use bootstraps style table. Okay, and then this is like a diffuse, you can decide to accept or disregard. I accept that. And of course I do need the bootstrap, right, which is I can go there, import bootstrap and then that. And if I go back here, cool. And just like that, in just a few minutes I was able to do it.

Bryant Son [00:10:21]: And of course you can then decide to do the Javascript. I know we are able 30 seconds. How are you doing on time? Do you know like a 32nd 1 minute is enough? Because I know very close to time, right. You're all good man, you can see that I was able. Okay, cool. So just one more trick, like if I was to edit Javascript and I can do like functions to give a random generation of a football winner just to give a demonstrate, right? And you think like that. And if I want to add this functionality there and then alert the winner. Okay, so then if I do here, come back here and I create a button and it will recognize the context.

Bryant Son [00:11:10]: So if I go back here and I think do need to render winner, I think alert. Well there's no matter, but I think we're almost at the time. But just in just a few minutes, less than five minutes, I was able to create a website. And then this can be ways to like if you want to go further, how can I deploy this as a node JS project? And then you get the idea, right. This will be like your check GPT kind of sort of things, but more like focused on the programming itself. And this will be helping you get started with creating website in migrating to the node JS project. And there it is. Cool.

Demetrios [00:11:55]: So good.

Bryant Son [00:11:56]: Yeah, so here's my link to connect with me. I live there. I don't know if it's record or not. Hopefully so, yeah, but pretty much that's it.

Demetrios [00:12:06]: Awesome, man. Bryant, this is great and I look forward to playing around with it more. I wonder, man, I really used to make jokes about how I wish Chat GPT had yaml fluency. And it seems like now you all did that.

Bryant Son [00:12:29]: Yeah, you can work with the Yaml file, Markdown file. They just need to trick few things, right. And then there is an option where you can add like go there and you just need to make sure that it's enabled for markdown and stuff, right. And esport all type of program.

Demetrios [00:12:47]: Killer, killer stuff. Well, we're going to keep moving. Dude. I've got Cheng coming up. Thanks Bryant. And.