콘텐츠로 이동

MyApp으로 나만의 로봇앱 만들기

MyApp은 PhysiCar를 제어하는 나만의 웹 앱입니다. 5000 포트로 실행하면 앱의 MYAPP 탭(/myapp/)에 나타납니다.

1. 최소 앱

워크스페이스(~/physicar_ws)에 myapp/을 만들고 아래 파일들을 넣습니다 — Agent에게 만들어 달라고 해도 됩니다(HTML·CSS·JS는 파이썬 문자열이 아니라 템플릿·static 파일에 둡니다):

# myapp/app.py  (최초 1회: pip install flask requests)
import requests
from flask import Flask, Response, render_template

app = Flask(__name__)
ROBOT = "http://localhost:8000"   # 로봇의 로컬 Web API

@app.route("/")
def home(): return render_template("myapp.html")

@app.route("/forward")
def forward(): requests.post(f"{ROBOT}/speed", json={"value": 0.5}); return {"ok": True}

@app.route("/stop")
def stop(): requests.post(f"{ROBOT}/speed", json={"value": 0.0}); return {"ok": True}

@app.route("/photo")
def photo(): return Response(requests.get(f"{ROBOT}/camera").content, mimetype="image/jpeg")

if __name__ == "__main__":
    app.run(host="0.0.0.0", port=5000)

<!-- myapp/templates/myapp.html -->
<link rel="stylesheet" href="./static/style.css">
<button id="forward">전진</button> <button id="stop">정지</button>
<p><img src="./photo"></p>
<script src="./static/app.js"></script>

// myapp/static/app.js   (Flask가 myapp/static/ 을 ./static/ 으로 서빙)
document.getElementById("forward").onclick = () => fetch("./forward", { method: "POST" });
document.getElementById("stop").onclick = () => fetch("./stop", { method: "POST" });

상대 경로를 쓰세요

nginx는 앱을 /myapp/ 아래에서 서빙하며 접두사를 뗍니다 — 링크·fetch()를 /...가 아니라 ./...로 쓰세요.

2. Web API로 제어

로봇의 로컬 Web API(8000 포트)가 모든 걸 움직입니다:

requests.post(f"{ROBOT}/speed", json={"value": 0.5})      # m/s
requests.post(f"{ROBOT}/steering", json={"value": 0.2})   # rad (좌 +)
jpeg  = requests.get(f"{ROBOT}/camera").content           # JPEG 바이트
state = requests.get(f"{ROBOT}/states").json()            # 속도·배터리 등

3. 부팅 시 자동 시작

시작 스크립트 /opt/physicar/userdata/startup.sh가 부팅 시 ~/physicar_ws를 작업 디렉토리로 실행됩니다. 처음엔 비어 있으니 실행 명령을 넣으세요:

exec python3 ~/physicar_ws/myapp/app.py

패널의 System 탭에서 스크립트(Edit)와 출력(Log)을 엽니다. 고친 내용은 다음 부팅부터 적용됩니다 — 바로 적용하려면 Agent 에게 재시작을 부탁하세요. 앱이 5000 포트에 응답하기 전까지 MYAPP 탭에는 로봇 얼굴이 뜹니다 — 속도·회전·라이다에 잡힌 것·터치에 반응하는 페이지 — 앱이 뜨면 자동으로 그 앱으로 넘어갑니다.

점검: 5000 포트, 상대 경로, 실행 명령은 시작 스크립트에.

🛠 미션: Follow-me 또는 문 앞 인사 로봇을 만들어보세요. 같은 앱이 실물 로봇에서도 그대로 돌아갑니다.

더 알아보기

로봇 엔드포인트 → Web API. AI 요청 → Chat API 규격.

AI