Pierwszy projekt – aplikacja z liczbą

Nowy projekt z VS Code lub Cursor

1. File → New Project (lub skrót z rozszerzenia Garmin).
2. Wybierz szablon Watch App (aplikacja, którą użytkownik uruchamia z menu zegarka – idealna na Counter).
3. Podaj nazwę projektu, np. CounterApp, i folder docelowy.
4. Rozszerzenie utworzy strukturę katalogów i podstawowe pliki.

Struktura projektu

Typowy projekt Watch App zawiera m.in.:

• manifest.xml – metadane aplikacji (nazwa, wersja, typ watch-app, kompatybilne urządzenia).
• source/ – kod Monkey C (np. CounterAppView.mc – główny widok).
• resources/ – ikony, layouty, stringi.
• bin/ – skompilowane pliki (generowane przy budowaniu).

Widok – wyświetlanie liczby

W pliku *View.mc definiujesz widok aplikacji. Na początek narysujemy na środku ekranu liczbę 0 (później zamienimy ją na działający licznik):

using Toybox.Graphics;
using Toybox.WatchUi;

class CounterAppView extends WatchUi.View {
    function initialize() {
        View.initialize();
    }

    function onUpdate(dc) {
        dc.setColor(Graphics.COLOR_WHITE, Graphics.COLOR_BLACK);
        dc.clear();
        dc.drawText(dc.getWidth() / 2, dc.getHeight() / 2,
                    Graphics.FONT_LARGE, "0",
                    Graphics.TEXT_ALIGN_CENTER | Graphics.VERTICAL_ALIGN_CENTER);
    }
}

Czym jest kontekst rysowania (dc)? To obiekt, który system (Connect IQ) przekazuje do onUpdate, gdy ekran ma się odświeżyć. Działa jak „płótno” lub zestaw narzędzi do rysowania: przez dc wykonujesz wszystkie operacje graficzne – czyszczenie ekranu, rysowanie tekstu, kształtów, kolorów itd. Nie tworzysz dc samodzielnie; system go tworzy i po zakończeniu onUpdate wyświetla to, co narysowałeś, na fizycznym ekranie zegarka.

• onUpdate(dc) – wywoływane przy odświeżaniu ekranu; dc to właśnie ten kontekst rysowania.
• dc.clear() – czyści ekran (np. przed narysowaniem nowej treści).
• dc.drawText(...) – rysuje tekst w podanym miejscu (tu: liczbę „0” na środku ekranu).

Uruchomienie na emulatorze

1. Zapisz plik.
2. Uruchom emulator (jeśli nie jest włączony).
3. W edytorze (VS Code lub Cursor) wybierz Run / Run Without Debugging lub skrót do uruchomienia projektu.

Na emulatorze powinna pojawić się aplikacja z liczbą 0 na środku ekranu. W kolejnej lekcji zobaczysz strukturę manifestu i więcej możliwości rysowania; potem dodamy reagowanie na dotyk i zamienimy stałe „0” na prawdziwy licznik.