최신 AI 프로그래밍 도구를 사용해야 하는 이유

저는 진지한 소프트웨어 개발을 비유로 Wordle을 사용해 왔습니다.

이 글에서는 좋은 모델을 만든 TDD 솔루션과 인공지능을 이용해 생성된 자동화 코드를 결합해 보겠습니다.

TL;DR: Use the best available tools wisely

분할 정복

더 디비전

소프트웨어 개발에 관한 여러 기사를 썼습니다.

나는 진지한 소프트웨어를 대표하는 Worlde에 대해 이야기할 것입니다.

첫 번째에서는 TDD와 PHP를 사용하여 백엔드 Wordle을 만들었습니다.

25분 안에 TDD를 사용하여 Wordle 게임을 개발하는 방법

Maxi Contieri ・ 1월 16일 ・ 11분 읽기

다음으로 자동 코드 생성을 사용하여 Wordle을 완전히 개발하는 방법에 대한 비디오를 보았습니다.

Codex AI로 단계별 Wordle 생성

Maxi Contieri ・ 9월 6일 ・ 9분 읽기

#javascript #webdev #beginners #programming

Wordle은 또 다른 Kata이므로 Javascript를 사용하여 TDD로 계속 연습합니다.

Javascript에서 TDD로 Wordle을 만드는 방법

Maxi Contieri ・ 9월 13일 ・ 16분 읽기

#javascript #programming #tutorial #tdd

이제 훌륭한 도메인 모델과 놀라운 기계 학습 사용자 인터페이스를 갖춘 놀라운 Wordle이 있습니다.

그것들을 결합합시다.

정복

두 개의 저장소가 있습니다.

1 - TDD로 만든 Javascript Wordle이 있는 것

%[ https://replit.com/@mcsee/Wordle-TDD ]

%[ https://github.com/mcsee/wordle/tree/main/How%20to%20Create%20a%20Wordle%20with%20TDD%20in%20Javascript ]

2 - 기계 생성 코드가 있는 코드

%[ https://github.com/mcsee/wordle/tree/main/Open%20AI%20Codex%20from%20DotCSV ]

결함이 있는 재생 가능한 버전(라이브)

%[ https://mcsee.github.io/wordle/DotCSV/index.html ]

함께 작동하게 만들기

변경 사항을 기본 파일에 주입해야 합니다.

스크립팅된 UI 버전은 모듈식이 아님을 기억하십시오.

UI를 구축하기 전에 유효한 게임을 설정합니다.

 const response = await fetch("dictionary.txt");
 const dictionary = await response.text();
 const words = dictionary.split(/\r?\n/).map((string) => new Word(string));

 var randomIndex = Math.floor(Math.random() * words.length);
 var winnerWord = words[randomIndex];

 var game = new Game(words, winnerWord);   

// Before we setup our UI.
// We want to create our valid working Game

최종 사용자에게 상태/오류를 표시하는 텍스트 필드를 만듭니다.

// Step 14 bis
/* add an input text field under the table */

var status = document.createElement('input');
status.setAttribute('type','text');
status.setAttribute('placeholder','');
status.id = 'status';
status.readOnly = true;
document.body.appendChild(status);
status.style.margin = '10px';
status.style.width = '300px';

반드시 필요한 것은 아니지만 UI를 최대한 단순하게 유지하는 데 도움이 됩니다.

// Step 17
/* create variable named 'rowindex' starting at 0 */

var rowIndex = game.wordsAttempted().length;

rowIndex 변수는 더 이상 전역 변수가 아닙니다. 우리는 그것을 게임에서 시도한 시도와 연결하여 계산합니다.

우리는 상태를 Game 개체로 구체화하고 있습니다.

그리고 이것은 모든 마법이 일어나는 때입니다.

알고리즘 및 오류 정리 문자 수 계산을 보다 강력한 것으로 대체합니다.

// Step 24

/* when clicking validate button we add an attempt */

document.getElementById('validate').addEventListener('click', function(event) {
  var cells = document.querySelectorAll('td');
  var currentLetters = '';
  for (var i = 0; i < cells.length; i++) {
    if (i >= rowIndex * 5 && i < (rowIndex + 1) * 5) {
        currentLetters += cells[i].innerHTML ;
    }
  }  
  var status = document.getElementById('status');
  status.value = '';
  try { 
    var attempt = new Word(currentLetters);
    game.addAttempt(attempt);  
  }
  catch (error) { 
    status.value = error.message; 
    return;
  }  

  var correctMatches = attempt.matchesPositionWith(winnerWord); 
  var incorrectMatches = attempt.matchesIncorrectPositionWith(winnerWord); 

  for (var i = rowIndex * 5; i < (rowIndex + 1) * 5; i++) { 
    if (correctMatches.includes(i-(rowIndex * 5)+1)) { 
        cells[i].style.backgroundColor = '#aedb95'; 
    }
    if (incorrectMatches.includes(i-(rowIndex * 5)+1)) { 
        cells[i].style.backgroundColor = '#edc953'; 
    }
  }
  if (game.hasWon()){
     status.value = 'Congratulations. You won!';
  }
  if (game.hasLost()){
     status.value = 'Sorry. You have lost! Correct word was ' + winnerWord.word();
  }
  document.getElementById('input').value = '';
  rowIndex = game.wordsAttempted().length;
});

설명을 위해 동일한 이벤트에 매우 긴 함수로 넣었습니다.

모델은 이제 다음 예외를 발생시키고 최종 사용자에게 보여줄 수 있습니다.

이 방법은 향후 문서에서 많은 리팩토링이 필요합니다.

마지막으로 게임을 재설정합니다.

이것은 첫 번째 버전에서 수정된 많은 실수 중 하나였습니다.

// Step 27

/* when pressing remove, chose randomly the secret word from the words collection */ 

document.getElementById('remove').addEventListener('click', function(event) {
  var randomIndex = Math.floor(Math.random() * words.length);
  winnerWord = words[randomIndex];
  game = new Game(words, winnerWord);   
});

스크립트 시작 부분이 있습니다.

최종 버전here으로 플레이할 수 있습니다.

소스 코드는 here입니다.

그리고 작동하는 repl.ithere

면책 조항

최종 코드는 리팩토링 기회와 여러 .

우아하고 최종적인 솔루션이 아니라 개념 증명입니다.

학점

이미지 크레디트: AI에게 Centaur를 그리도록 요청하는 재미있는 Twitter 스레드









진짜 가짜 유령


@alt_products_ai






달이는 켄타우로스가 뭔지 모른다


오후 12:14 - 2022년 9월 19일