Zaawansowane

Kącik zaawansowanych: rzeczy, które można zbudować wokół PianoKitty. Do zwykłego ćwiczenia niepotrzebne.

Rewards API — własne obrazki-nagrody

W trybie gry aplikacja może pokazywać mały obrazek-nagrodę po poprawnych akordach. Oprócz wbudowanych zdjęć kotów możesz podpiąć własny endpoint HTTP — dowolny URL zwracający JSON wskazujący obrazek. Rysunki dziecka, zdjęcia rodzinne, memy — co tylko motywuje.

1. Kontrakt

Aplikacja wysyła zwykłe żądanie GET na Twój URL i oczekuje takiego JSON-a:

{ "success": 1, "src": "https://twoj.host/rewards/kot-042.jpg" }
  • success musi być liczbą 1 — string "1" zostanie odrzucony.
  • src — bezwzględny URL obrazka (jpg/png/gif/webp…).
  • Zwracaj inny src przy każdym wywołaniu — losowanie to zadanie endpointu.

Wszystko inne — status inny niż 200, zepsuty JSON, success ≠ 1, pusty src albo odpowiedź dłuższa niż 2 sekundy — jest po cichu pomijane: ćwiczenie leci dalej, tylko bez obrazka. Żaden błąd się nie pojawia.

2. Wymagania

  • HTTPS. Aplikacja działa po HTTPS, więc przeglądarka odrzuci endpoint po zwykłym HTTP (mixed content).
  • CORS. Żądanie idzie z Twojej przeglądarki, cross-origin. Endpoint musi zwracać nagłówek Access-Control-Allow-Origin: * (albo origin aplikacji).
  • Sam URL obrazka nie potrzebuje CORS — ładowany jest zwykłym tagiem <img>.

3. Minimalne implementacje

PHP — wrzuć katalog obrazków obok tego skryptu:

<?php
header('Content-Type: application/json');
header('Access-Control-Allow-Origin: *');
$images = glob(__DIR__ . '/rewards/*.{jpg,png,gif,webp}', GLOB_BRACE);
echo json_encode([
    'success' => 1,
    'src' => 'https://twoj.host/rewards/' . basename($images[array_rand($images)])
]);

Cloudflare Worker — bez własnego serwera, darmowy plan wystarczy:

const IMAGES = [
  'https://twoj.host/img/1.jpg',
  'https://twoj.host/img/2.jpg',
  'https://twoj.host/img/3.jpg'
];
export default {
  fetch() {
    const src = IMAGES[Math.floor(Math.random() * IMAGES.length)];
    return new Response(JSON.stringify({ success: 1, src }), {
      headers: {
        'content-type': 'application/json',
        'access-control-allow-origin': '*'
      }
    });
  }
};

Sprawdź z terminala, zanim podepniesz do aplikacji:

$ curl -s https://twoj.host/reward
{"success":1,"src":"https://twoj.host/rewards/kot-042.jpg"}

4. Użycie w aplikacji

  1. Otwórz Ustawienia → Nagrody.
  2. Ustaw Obrazki-nagrody na Własne API i wklej URL endpointu.
  3. Nagrody pojawiają się w trybie gry po poprawnych akordach. Żeby obrazek wyskakiwał tylko co N-ty poprawny akord, włącz opcję etapów i ustaw interwał — endpoint będzie wtedy wywoływany tylko przy etapach.

Rozwiązywanie problemów

  • Brak obrazka i brak błędu — tak właśnie ma działać cicha obsługa błędów. Otwórz DevTools → Network i obserwuj żądanie do endpointu po poprawnym akordzie.
  • Błąd CORS w konsoli → brakuje nagłówka Access-Control-Allow-Origin.
  • Działa w curl, nie działa w aplikacji → sprawdź HTTPS, CORS i czy success jest liczbą, nie stringiem.
  • Obrazki czasem się nie pojawiają → endpoint odpowiada dłużej niż 2-sekundowy limit.
Wróć do Pomocy