AI로 WebView 플러그인 만들기¶
몇 단계만 거치면 AI를 사용하여 WebView 플러그인을 위한 웹 서비스를 쉽게 만들 수 있습니다. 프로그래밍 지식이나 기술이 필요하지 않습니다.
플러그인 아이디어 브레인스토밍 ¶
이미 만들고 싶은 웹 서비스 유형을 알고 있다면 이 섹션을 건너뛰고 다음으로 이동하세요.
또는 선호하는 AI에게 아이디어를 브레인스토밍하도록 요청할 수 있습니다.
프롬프트
cTrader 내에서 WebView 플러그인으로 표시될 웹 앱을 만들고 싶습니다.
내 트레이딩 경험을 향상시킬 유용한 아이디어를 제안해 주세요.
답변
- 스마트 트레이드 어시스턴트
- 트레이드 계산기
- 사용자 정의 심볼 대시보드
- 심볼 노트 및 협업 도구
- 리스크 관리 대시보드
- 뉴스 영향 추적기
- 세션 히트맵 도구
- 트레이드 코파일럿 (AI 노트 및 피드백)
웹사이트 코드 생성 ¶
cTrader의 WebView 플러그인은 JavaScript, HTML, CSS 및 (필요한 경우) WebView API 메서드의 표준 스택을 사용하는 외부 호스팅 웹사이트가 필요합니다.
더 정확한 응답을 위해 AI에 다음 입력 데이터를 제공하세요:
경고
생성한 모든 WebView 플러그인은 cTrader 스토어, App Store 및 Google Play의 규칙을 준수해야 합니다. 가장 중요한 것은, 웹 서비스에 인증 또는 결제 양식이 포함되어서는 안 된다는 점입니다.
편의를 위해 WebView 플러그인 문서 및 cTrader 스토어 규칙을 다운로드할 수 있으며, AI가 참조할 파일로 업로드할 수 있습니다.
프롬프트
cTrader에서 WebView 플러그인으로 사용할 트레이드 계산기 웹 앱을 만들고 싶습니다.
웹사이트는 JavaScript, HTML, CSS 및 WebView 플러그인용 API 메서드만 사용하여 구축해야 합니다.
추가 라이브러리는 필요하지 않습니다.
웹사이트는 cTrader 스토어, Apple의 App Store 및 Google Play Store의 규칙을 준수해야 합니다.
웹사이트에는 인증 또는 결제 양식이 포함되어서는 안 됩니다.
추가 설정 없이 웹사이트를 구축하는 데 필요한 모든 것을 포함하는 단일 코드 조각을 제공하세요.
답변
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Trade Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f4f4f4;
color: #333;
}
h1 {
text-align: center;
}
.container {
max-width: 400px;
margin: auto;
padding: 20px;
background: white;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
label, input, select {
display: block;
width: 100%;
margin-bottom: 15px;
}
input, select {
padding: 8px;
font-size: 1em;
}
button {
padding: 10px;
background-color: #007acc;
color: white;
border: none;
font-size: 1em;
cursor: pointer;
width: 100%;
}
button:hover {
background-color: #005fa3;
}
.result {
margin-top: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<h1>Trade Calculator</h1>
<label for="symbol">Symbol (e.g., EURUSD)</label>
<input type="text" id="symbol" value="EURUSD"/>
<label for="volume">Volume (Lots)</label>
<input type="number" id="volume" value="1" min="0.01" step="0.01"/>
<label for="price">Price</label>
<input type="number" id="price" value="1.1000" step="0.0001"/>
<label for="leverage">Leverage</label>
<input type="number" id="leverage" value="100" step="1"/>
<button onclick="calculate()">Calculate</button>
<div class="result" id="result">Margin: --</div>
</div>
<script>
function calculate() {
const volume = parseFloat(document.getElementById("volume").value);
const price = parseFloat(document.getElementById("price").value);
const leverage = parseFloat(document.getElementById("leverage").value);
// Standard 100,000 units per lot
const notional = 100000 * volume;
const marginRequired = (notional / leverage) * price;
document.getElementById("result").innerText =
`Margin Required: ${marginRequired.toFixed(2)} (base currency units)`;
}
// WebView Plugin API Example
window.addEventListener("message", (event) => {
const message = event.data;
if (message.type === "symbolUpdate") {
document.getElementById("symbol").value = message.symbol;
}
});
// Send initial readiness signal
window.parent.postMessage({ type: "ready" }, "*");
</script>
</body>
</html>
웹 서비스 배포 ¶
생성된 코드를 HTML 파일에 붙여넣고 컴퓨터에 (로컬로) 저장하세요.
웹 서비스를 배포하려면 HTML 파일을 보안 서버에 호스팅해야 합니다. 도메인 이름을 획득하고, 호스팅 제공자에 등록한 후 cPanel/hPanel 또는 FTP를 통해 HTML 파일을 업로드해야 합니다.
다음과 같은 프롬프트를 사용하여 AI에게 도움을 요청할 수 있습니다:
프롬프트
도메인 이름을 얻고 호스팅 제공업체와 함께 설정하는 과정을 안내해 주세요.
웹 앱 테스트 ¶
브라우저에서 새로운 웹사이트를 엽니다. 사이트의 기능을 테스트하여 제대로 작동하는지 확인하세요.
실제 웹사이트의 모습에 따라 AI 도구로 돌아가 세부 조정을 요청할 수 있습니다. 예를 들어, 다음과 같이 웹사이트 코드를 편집하도록 AI에게 요청할 수 있습니다:
- 제대로 작동하지 않는 기능 수정
- 색상 테마 변경
- 특정 기능 추가
- 특정 기능 제거
- 그 외 더 많은 것들
조정을 마친 후 파일로 돌아가 편집된 코드를 붙여넣고 변경 사항을 배포하세요.
웹 앱이 준비되고 URL을 알게 되면 cTrader에서 WebView 플러그인을 빌드할 수 있습니다.