С мощью Copilot я хотел бросить себе вызов и создать небольшое приложение, используя только Copilot. Для этой задачи я хочу создать простое приложение со случайными котировками, которое также отображает настроения котировок.
Настройка проекта
Я выбираю базовые html, css и jquery(ajax), так как они являются наиболее знакомыми мне инструментами, помогающими мне лучше оценить производительность Copilot.
Установочные файлы, которые нам нужны
- index.html
- jquery.min.js
- стиль.css
- custom.js
HTML, созданный Github Copilot
https://enlivendc.com/wp-content/themes/mis/assets/i/blog/html-generated-by-github-copilot.mp4
Выше html изменен в соответствии с нашим проектом.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> <!-- add bootstrap5 style link--> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha3849aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> </head> <body> <!-- quete generator html design--> <div class="container"> <div class="row"> <div class="col-md-12 mt-3"> <div class="jumbotron"> <h1 class="text-center">Quote Generator</h1> <p class="text-center"> <a href="#" id="generate" class="btn btn-outline-dark p-2f">Generate Quote</a> <!-- hide div for quote and auther --> <!-- loader div --> <div id="quote" class="hide"> <p id="text"></p> <p id="author"></p> </div> </p> </div> </div> </div> </div> </body> </html> <!-- basic jquery cdn--> <script src="jquery.min.js"></script> <script src="custom.js"></script>
CSS, созданный Github Copilot
Приведенный выше CSS изменен в соответствии с нашим проектом.
/* hide div class */ .hide { display: none; } /* quote generator html design css for index.html page*/ .jumbotron { width: 100%; height: 100%; background-color: #f2f2f2; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px #ccc; } /* add custom style for #generate */ #generate { padding: 5px; border-radius: 10px; text-align: center; text-decoration: dashed; border: 1px solid #000; margin: 0 auto; } /* center div.quotesGenerator */ .quotesGenerator { padding: 5px; text-align: center; text-decoration: dashed; margin: 0 auto; } .mt-3, .my-3 { display: table-cell; vertical-align: middle; } .row { display: table !important; width: 100%; height: 950px; }
API котировок, созданный Github Copilot
Вышеприведенный код изменен в соответствии с нашим проектом.
// quote generator api $(document).ready(function () { // above quote generator api using ajax $("#generate").on('click', function () { $.ajax({ url: "https://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=?", type: "GET", dataType: "jsonp", beforeSend: function () { // show first quote by default $("#quote").removeClass("hide"); // set time out for the loading $("#quote").html("<div class='text-center'><div class='spinner-border text-primary' role='status'> <span class='sr-only'>Loading...</span></div></div>"); }, success: function (data) { // remove the previous quote hide class // remove hide class from the quote $("#quote").removeClass("hide"); if (data.quoteAuthor !== "") { var auther = '-'+data.quoteAuthor; } $("#quote").html('<div class="quotesGenerator p-3"><p class="text">' + data.quoteText + '</p>' + "<p class='auther'>" + `${auther}` + "</p></div>"); }, // add success class to the quote }); }); });
Важно иметь четкое представление о том, чего ожидать от Copilot, потому что это всего лишь инструмент, и разработчики не могут полагаться только на первое предложение, которое он дает.
Заключение
Попробовав мое простое приложение для создания котировок, я обнаружил, что Copilot достаточно полезен для создания простого приложения.
У меня не было больших ожиданий, и я изначально думал, что мне нужно будет изменить много кода, чтобы приложение заработало.
Однако второй пилот меня удивил. В некоторых местах он дал мне бессмысленные предложения, но в других местах предложения были настолько хороши, что я не могу поверить, что их сделал второй пилот.