С мощью Copilot я хотел бросить себе вызов и создать небольшое приложение, используя только Copilot. Для этой задачи я хочу создать простое приложение со случайными котировками, которое также отображает настроения котировок.

Настройка проекта

Я выбираю базовые html, css и jquery(ajax), так как они являются наиболее знакомыми мне инструментами, помогающими мне лучше оценить производительность Copilot.

Установочные файлы, которые нам нужны

  1. index.html
  2. jquery.min.js
  3. стиль.css
  4. 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 достаточно полезен для создания простого приложения.

У меня не было больших ожиданий, и я изначально думал, что мне нужно будет изменить много кода, чтобы приложение заработало.

Однако второй пилот меня удивил. В некоторых местах он дал мне бессмысленные предложения, но в других местах предложения были настолько хороши, что я не могу поверить, что их сделал второй пилот.