프로그래밍을 할 줄 모르는 사람도 Windsurf를 사용하여 완전한 앱을 작성할 수 있도록 장벽을 낮추는 방법

인터넷에 떠도는 "프로그래밍을 할 줄 모르는 사람이 윈드서핑으로 한 달에 백만 달러를 벌었다"는 뉴스를 믿지 마세요. 프로그래밍이나 영어를 조금이라도 모른다면 완벽한 프로그램을 작성하기란 정말 어렵습니다. 인터넷에는 프로그래밍을 할 줄 알고 윈드서프 사용법을 알려주는 사람들이 넘쳐나고, 프로그래밍을 모르는 사람이 윈드서프를 실생활에서 사용하기는 어렵고, 프로그래밍을 몰라도 윈드서프를 이용해 앱을 만들 수 있다는 뉴스도 많지만 그건 그냥 라쇼몽.... 그렇다면 저는 프로그래밍을 몰라도 해볼 수 있겠구나...

이 백서는 프론트 엔드와 백엔드를 포함한 환율 계산기 애플리케이션 세트를 구현하는 데 이틀 동안 500회 이상의 대화가 필요했습니다. 전체 구현에는 윈드서핑 대화. 이 문서에서는 프로그래밍을 모르는 사람도 실제로 완전한 애플리케이션을 작성할 수 있는 방법에 대해 설명합니다.실수로부터 배우는 것는 완전한 운영 절차를 제공하지 않습니다.

구현된 주요 기능은 다음과 같습니다:

• 전체 프론트엔드 페이지(다중 디바이스 적용)
• 홈환율 값을 얻기 위한 다중 전략(데이터베이스 가져오기, 대체 API 가져오기, 데이터베이스에 최신 환율 업데이트 가져오기)
• 데이터베이스 읽기 및 쓰기(연결된 테이블 쿼리)
• 환율 및 뉴스 데이터를 수집하여 데이터베이스에 쓰는 여러 개의 시간 제한 작업 스크립트(파일 잠금 로직 구현)
• 환율 쿼리 API 캡슐화, 공통 함수 호출 메서드 캡슐화
• 문서 캐싱 메커니즘
• 로컬 텍스트 파일 검색
• 자세한 파일 오류 로깅
• 페이지 의사 정적

데모 주소: https://huilv.aisharenet.com/

대중 과학 구성 요소

누가 윈드서핑을 사용해야 하나요?

• 프로그래머가 아닌 경우, 프로그래머에게 권장되는 경우 커서 .
• 데이터베이스, 테이블, 필드, API, 캐시, 클래스, 프론트엔드, 도메인 이름 등 기본 기술 용어의 의미를 파악합니다.
• 프론트엔드 및 백엔드 기술자, 운영, 제품, 마케팅, 테스트 등 전체 웹사이트 구축 프로세스에 참여...
• '분야'에 대한 기본 개념이 있고 자신의 전문 분야에 대한 지식을 잘 요약하여 서면으로 설명할 수 있습니다.

애플리케이션 작성 외에 윈드서핑을 다른 용도로 사용할 수 있나요?

1. 로컬 다중 파일의 자동화된 읽기 및 에이전트 기능을 기반으로 하는 Windsurf는 탁월한 로컬 텍스트 요약, 일괄 처리 도구로 사용할 수 있습니다.
2. 박쥐 스크립트를 작성하고 자동으로 실행하는 등 다양한 로컬 작업을 처리하는 데 필요한 자동화된 런타임 스크립트를 작성합니다.
3. 프로그래밍 학습을 위한 최고의 멘토로, 프로그래밍 요구 사항을 제시하고 각 단계의 과제와 이를 달성하는 방법을 알려줍니다.
4. 기술자나 테스터를 위한 비표준 자동화 테스트는 코드를 가져온 다음 Windsurf가 기능을 추적하거나 전체 코드를 읽어서 테스트 계획을 작성하고 테스트 케이스를 반자동으로 실행하도록 할 수 있습니다.

윈드서핑 기본 동작은 어떻게 배우나요?

윈드서핑 중국어 튜토리얼, 윈드서핑 설치 및 사용 방법

Windsurf는 vscode의 수정 버전이므로 기본 작동 로직이 비슷하므로 "vscode" 관련 튜토리얼을 검색하세요.

윈드서핑과 부조종사의 가장 큰 차이점은 무엇인가요?

윈드서핑의 기본 쓰기 모드는 상사가 기본적인 문제를 제기한 후 적극적으로 해결책을 찾아 작업을 완료하는 직원처럼 능동적이고 개별적으로 작업을 수행합니다. 물론 캐스케이드의 윈드서핑은 코드를 읽고 이해할 수 있는 친구에게도 적합하지만 여기서는 다루지 않습니다.

부조종사는 조용하고 원치 않는 조력자에 가깝기 때문에 명확한 임무를 부여하기 전까지는 침묵을 지키지만, 명확한 요구가 있으면 좋은 일을 해낼 것입니다.

윈드서핑을 사용하려면 유료 버전을 구매해야 하나요?

유료 버전을 구매하려면 최근 업데이트된 무료 버전의 요금제에서는 기본 모델만 사용할 수 있어 효율성이 떨어집니다. 유료 버전을 구매해도 현재 사용량이 제한되어 있습니다.

무료 버전은 기본 모델의 기능이 제한되어 있어 프로그램을 잘 모르는 분들에게는 적합하지 않습니다.

윈드서핑의 두 가지 모드?

Write는 코드 작성/실행을 담당하고, Chat은 대화를 담당하며 중요한 코드를 작성하지 않습니다.

초보자를 위한 윈드서핑 동반자 프로그램 환경

Windsurf를 사용하여 코드를 작성할 때는 Windsurf가 다양한 유형의 연산을 수행할 수 있도록 지원하는 프로그래밍 환경이 있어야 하며, 코드의 구현을 실시간으로 미리 볼 수 있어야 합니다.

초보자이기 때문에 프로그래밍 환경을 구축하는 방법을 모르거나 튜토리얼을 따라 구축하는 것이 매우 어려울 수 있습니다. 환경을 구축할 때 가장 골치 아픈 문제는 Windows 시스템을 사용하여 로컬에서 프로그래밍 환경을 구축하는 대부분의 사람들이 더 많은 예외가 발생할 뿐만 아니라 모든 종류의 종속 리소스를 끝없이 디버깅해야 한다는 것입니다.

더 무서운 것은 윈드서프가 로컬 명령을 실행하는 컴퓨터 작동을 신뢰할 수 없다는 것입니다. 이로 인해 개인 컴퓨터가 예기치 않은 문제에 노출될 수 있습니다.

제가 제시한 해결책은 다음과 같습니다:

서버를 구입하고 Pagoda 패널의 배포를 자동화한 다음 SSH에 연결할 루트 계정과 비밀번호를 기억해 두세요. PHP+MYSQL 콤보를 명시적으로 사용하는 경우 Pagoda 패널에서 미리 생성하세요(Windsurf가 기본 환경을 만들지 않도록 하세요).

위의 기본 환경을 자체적으로 배포할 수 없는 경우 여기에는 자체 Baidu를 사용하는 것이 좋습니다.

윈드서핑을 시작하여 첫 번째 프로젝트 만들기

1. 윈드서핑을 성공적으로 설치했다면 중국어 플러그인을 다운로드할 수 있습니다:코듐 윈드서프는 단일 중국어 확장 플러그인으로 중국어 인터페이스를 설정합니다.

2. 웹 디렉토리를 만들기 위해 파고다 패널에서 PHP + MYSQL 조합을 선택합니다.

3. SSH를 사용하여 원격 서버의 해당 웹 디렉터리에 연결합니다.

원격 서버에 연결하려면: 소프트웨어를 시작하고 Connetc를 선택한 다음 SHH 호스트...를 선택합니다.

4. SSH 계정(보통 루트)과 서버 주소를 입력합니다.

5. 루트 계정에 해당하는 비밀번호를 입력하고 Enter 키를 눌러 확인합니다.

6. 당연히 기본적으로 연결된 '디렉토리'가 올바른 디렉토리가 아니며 이전에 만든 폴더가 여기에 표시되지 않습니다.

7. 폴더 위치를 찾습니다.

여기서 무료 소형 모델은 크레딧 소모를 피하고 카탈로그의 절대 위치를 파악하기 위해 질문을 하기 위해 선택됩니다.

7. 파일 - 프로필 사용 새 창 - 새 프로필을 선택합니다.

만들기를 클릭합니다(기본값에 디렉터리를 추가하는 것도 가능합니다).

8. 폴더 추가를 클릭하고 디렉토리 주소(www/wwwroot/huilv.haoai.us.kg)를 입력한 후 확인 표시를 합니다.

9. 새 창에서 열기를 선택합니다(비밀번호를 다시 입력하라는 메시지가 표시됩니다).

10을 올바른 디렉토리에 넣으면 정식으로 프로젝트 코드를 작성할 수 있습니다!

(코드가 작성된 디렉터리로, 기본적으로 디렉터리는 비어 있거나 삭제할 필요가 없는 쓸모없는 구성 파일만 표시되어야 합니다).

공식적인 신청서 작성 준비

질문하기

질문 프로세스에 다른 큰 모델 대화 도구를 사용하는 것도 괜찮지만, 여러 차례의 대화에 Windsurf를 사용하면 더 유용한 이력을 요약할 수 있습니다.

실시간 환율 정보를 얻는 방법 1.

2. 환율 조회 웹사이트를 디자인하는 방법에 대해 도와주세요.

3. PHP+MYSQL에 따른 웹사이트 아키텍처 설계

...

문서 정리

1. .md 파일로 정리된 데이터베이스 계정 비밀번호

2. 사용 가능한 환율 쿼리 API의 질문과 .md 문서로 수집된 KEY 및 인터페이스 설명 문서

3. 질문에서 얻은 사이트의 프론트 엔드 아키텍처는 .md 문서로 정리되어 있습니다 (백엔드 아키텍처는 전혀 설계 할 수없고 명확하게 생각할 수 없으므로 문서를 작성하지 않았습니다).

이러한 문서는 Windsurf의 컨텍스트를 작성하는 데 사용하거나 코드 작성에 도움을 주기 위해 문서를 Windsurf의 컨텍스트로 지정하는 데 사용할 수 있습니다.

최소 기능 구현 로직 확인

테스트 1: API 액세스를 사용하여 데이터베이스에 입금된 환율 인터페이스의 전체 통화 이름을 가져옵니다.

테스트 2: API 액세스를 사용하여 데이터베이스에서 통화 이름을 가져오고, 해당 통화의 환율을 요청하여 데이터베이스에 저장합니다.
테스트 3: ...

최소한의 기능 테스트 케이스를 생성하고 한 번 실행하는 간단한 테스트이며, 최종 유효성 검사 성공 기준은 검증된 데이터로 데이터베이스에 쿼리하는 것이라고 안내하는 문구입니다.

테스트 후 핵심 기능 요약 요구 사항: 각 최소 기능의 성공적인 테스트를 통해 얻은 핵심 실행 코드를 요약합니다(각 코드의 의미를 잘 이해하지 못함).

테스트가 성공적으로 끝나면 생성된 모든 코드와 데이터베이스를 지우도록 요청받습니다. 이 작업은 대화를 통해 수행할 수 있으며, 원격 서버 작업 명령을 실행할 수 있는 Windsurf의 기능은 초보자에게 중요한 기능입니다.

설명:

실제로 코드를 몰라서 모든 인터페이스와 디자인된 기능이 믿기지 않았고, 너무 많은 코드를 생성하면 프로젝트가 제대로 진행되지 않았기 때문에 시각적으로 검증하기 위해 완전한 프론트엔드 및 백엔드 코드 세트를 작성하고 싶지 않을 정도로 최소한의 기능을 각각 실행하기 위해 많은 테스트를 수행했습니다.

동시에 최소한의 기능에 대한 실행 로직(API에서 요청하는 메서드)과 데이터베이스 테이블을 구성하고 보완하여 문서로 정리했습니다.

공식적인 신청서 준비

Windsurf가 정확하게 구현할 수 있도록 미리 명확한 지침을 준비하여 제공했음에도 불구하고 처음부터 전체 프론트엔드 또는 프론트엔드 홈페이지를 만들어 달라고 요청하지는 않았습니다.

테이크아웃 1: 코드 빌드를 시작하는 함수 지점이 중요합니다.

핵심 기능(환율 쿼리 API)을 위한 시각적 프런트엔드 인터페이스를 작성하고, 이 인터페이스의 필드는 데이터베이스와 일치해야 하며, 시각적 프런트엔드 페이지라도 가능한 한 세부적인 필드가 있어야 합니다.방문자에게는 제공되지 않습니다.먼저 만들어 보세요.

페이지에 정상적으로 액세스할 수 있다면 코드에 사용된 방법이 올바르고 데이터베이스의 데이터도 올바르다는 의미이며, 이후 실제 페이지를 참조할 때 참조로 사용할 수 있습니다. 이 페이지의 구성이 완료된 후 전체 애플리케이션을 삭제할 수 있습니다.

그래서 다음 두 페이지가 나옵니다:

예시 주소: https://huilv.aisharenet.com/currencies/

예시 주소: https://huilv.aisharenet.com/AED/

팁 2: 질문을 할 때 '인용' 문서 방식을 잘 활용하기

인사이트 1에 따르면 처음부터 완전한 프로젝트를 구축하지 않고 Windsurf 이니셔티브가 너무 강하므로 "페이지 목록 표시, 표시 필드만 표시: XX\XX\XX"라는 메시지를 추가할 것을 제안하는 질문입니다.

제공@함수는 매우 유용하며 폴더, 파일, 클래스를 빠르게 참조할 수 있습니다.

테이크아웃 3: 좋은 질문하기

이전 단계에서 생성된 페이지이며 몇 가지 질문이 있습니다.

질문 1: 콘텐츠를 더 추가할 수 있는지 알려주세요.

질문 2: 코드 효율성 문제에 대해 알려주세요.

질문 3: 실현 방법에 대해 알려주세요.

질문 4: "이것은 캡처된 환율 목록입니다"라는 요구 사항에 따른 최적화 제안이 있는지 알려주세요.

요점 4: 코드를 효율적으로 관리하고 스팸 코드 생성을 줄이는 좋은 방법

팁 2의 지침을 참조하여 이 페이지의 코드를 별도로 저장할 수 있도록 별도의 하위 디렉터리를 만들 수 있도록 도와주세요라는 문장을 추가합니다.

새로 만든 하위 디렉터리에서 개별적으로 기능을 테스트하고 구현한 다음, 마지막으로 필요에 따라 이 코드를 다른 파일에 참조하는 것을 고려하세요.

테이크아웃 5: 스타일, 메서드, 클래스, 인터페이스 등 적은 수의 기능을 디자인할 때는 재사용 가능성이 높은 기능을 추상화하세요.

재사용 가능한 파일 코드를 너무 많이 추출하지 않도록 주의하세요. 재사용 가능한 파일 코드가 지나치게 부풀려져 있으면 이후 프로젝트 개발 시 Windsurf의 메모리에 혼란을 줄 가능성이 높습니다. 각 재사용 가능한 파일의 명시적인 기능을 기억하고 Windsurf가 이를 참조하도록 유도하지 않는 한, 실제로는 실용적이지 않습니다.

이 프로젝트에서 재사용된 코드: 환율 조회를 위한 API, 데이터 연결 파일, 캐싱 규칙, 헤더 탐색 파일. 두 번째 페이지를 만들 때 추상화했기 때문에 첫 번째 페이지를 만들 때는 이 프로젝트가 어떤 기능을 수행해야 하는지 크게 고민하지 않았습니다.

테이크아웃 6: 관련 메모리를 불러온 다음 작업을 수행하세요(그리고 Windsurf가 서버 작업을 수행하도록 하세요).

인사이트 2를 참조하면 방법에는 공통점이 있습니다. 이는 복잡한 기능을 구현하고 기존 코드를 재사용하는 주요 수단입니다.

"최소한의 기능"이라는 반복되는 주제를 기억하시나요? 복잡한 기능의 페이지를 만들 때 저는 최소한의 기능이 이미 작동하는 코드에서 코드를 불러와서 복잡한 기능의 페이지를 구현하는 데 사용하는 경우가 많습니다.

이 복잡한 페이지는 청크로 구현하는 경향이 있는데, 먼저 최소한의 함수 A를 도입하고 한 번 디버깅한 다음 최소한의 함수 B를 도입하고 한 번 디버깅하는 식으로 ... 결국 블록을 쌓아 올리는 것처럼 매우 복잡한 페이지를 만들 수 있습니다.

이번에는 직접 데이터베이스를 조작하지 않고도 정확한 테이블과 필드 이름을 추측하고 페이지를 구축할 수 있었습니다. 이는 이전에 생성된 컨텍스트 기록에 데이터베이스 필드 정보가 여전히 남아 있기 때문일 수 있습니다.

데이터베이스 쿼리를 한 번만 수행하여 최근 메모리로 유지되도록 하여 보다 정확한 후속 작업을 수행할 수 있도록 해 보겠습니다:

이미 만든 환율 타이머 업데이트 스크립트인 ExchangeRateService.php를 수정하겠습니다. 이 시점에서 관련 기억을 미리 떠올려야 합니다:

코드를 읽어보니 ExchangeRateService.php가 정기적으로 환율을 업데이트할 책임이 없다는 것이 밝혀졌습니다.

이 파일은 정기적으로 환율을 업데이트하는 파일이 아니며 실제 업데이트 스크립트 파일은 update_exchange_rates.php라는 것을 알기 위해 수정하기 전에 코드를 읽어보는 것이 좋습니다.

결국 문맥 기억을 더 정확하게 하기 위해 새로운 질문을 하게 되었습니다. "update_exchange_rates.php는 환율을 정기적으로 가져오는 스크립트인데, ExchangeRateService.php 파일이 여전히 유용할까요?"라는 질문입니다.

더 정확한 '기억'은 최근에 대화에서 반복된 기억입니다.

테이크아웃 7: 이전에 만든 문서에 각 구현의 가장 작은 분기 기능을 문서화하세요.

기능이 완전히 구현되면 문서에 문서화해야 합니다. 윈드서프가 대화를 통해 설명 문서에 있는 내용을 업데이트하도록 하세요.

작업 진행 상황을 정확하게 기록하기 위해 기능 개발 체크리스트를 작성하는 것이 좋습니다:

기록 할 정보가 너무 많아서 문서 설명에 혼합되어있는 것은 분명히 불합리하며,이 시점에서 문서의 중요한 설명을 별도로 기록하여 대화 상자에 입력 할 수있는 한 참조에 초점을 맞출 수 있습니다.@문서를 다시 불러오기만 하면 됩니다.

테이크아웃 8: 각 핵심 기능에 대한 '테스트' 모드 만들기

일부 함수는 실행 후 코드를 파괴하거나 공식 데이터베이스 데이터를 파괴하거나 오류 메시지를 확인할 수 없거나 단일 실행 시간이 너무 길어 코드에 "테스트"모드를 도입해야 다양한 문제를 쉽게 디버깅 할 수 있습니다. 예를 들어, 시간 제한 업데이트 스크립트를 실행하는 데 시간이 오래 걸리므로 테스트 모드를 추가했습니다.

시각적으로 볼 수 있는 한 코드가 올바르게 작동하도록 설계되었다고 믿지만, 시각적으로 직접 확인할 수 없는 일부 기능에는 '테스트 패턴'이 필요한 '실제 구현 결과'를 Windsurf가 적극적으로 명시해야 하는 경우가 있습니다.

테이크아웃 9: 더 많은 폴백 사용

저장된 코드가 만족스럽지 않으면 Ctrl+Z를 눌러 돌아가서 대화를 다시 생성하세요. 이전 대화의 메모리가 유지되므로 단순한 '다시 그리기'가 아니며, 다시 생성할 때 더 정확합니다.

테이크아웃 10: 여러 차례의 대화에서 기대에 부응하는 기능을 얻을 수 없다면 포기하세요.

여기서 함수는 "최소 함수"를 의미하며, 최소 함수의 디렉토리와 디렉토리의 파일을 삭제하고 새 대화 창을 열고 저장된 메모리를 삭제 한 다음 이전 코드를 잊어 버리라는 명령으로 XXX 함수를 다시 작성하기 시작합니다.

테이크아웃 11: 자주 사용되는 대화 단어

추가, 삭제, 변경, 제안, 최적화, 설명, 참조, 무시, 의존, 참조, 실행 로직 완료, 테스트, 병합 (이 단어들을 이해할 수 없다면, 프로그래밍 컨텍스트에서 각각의 XXX 단어가 무엇을 의미하는지 ChatGPT에 물어보세요).

테이크아웃 12: 환경 종속성이 단순한 성숙한 프로그래밍 언어를 사용하세요.

더 큰 모델에서는 비즈니스 유형에 대한 관련 지식과 이해도가 떨어질까 봐 더 현대적인 프론트엔드 프레임워크와 데이터베이스를 선택하지 않았을 것입니다.

"오래된" 프로그래밍 언어인 PHP는 모든 종류의 비즈니스를 위한 성숙한 솔루션이 많아야 하며, 빅 모델을 위한 교육 지식이 되어야 합니다.

사실 Pythonye는 좋지만 단점은 너무 많은 "라이브러리"에 의존하므로 프로젝트 반복에 의존하는 환경이 점차적으로 제어 할 수 없으며 흰색의 절차를 완전히 인식하지 못하는 데 적합하지 않다는 것입니다.