Witaj, programisto! 🦫

Dziś zbudujesz aplikację — kalkulator z kapibarą! Klikaj kolejne zakładki, żeby przejść przez wszystkie kroki.

1

Co będziemy budować?

Nasza aplikacja będzie umieć dodawać, odejmować, mnożyć i dzielić dwie liczby. A robi to... kapibara z kalkulatorem! 🧮

Użyjemy narzędzia MIT App Inventor — programujemy w nim za pomocą kolorowych bloczków, jak klocki LEGO!

2

Zaloguj się do App Inventora

Otwórz przeglądarkę i wejdź na stronę:

Adres strony

code.appinventor.mit.edu

Zaloguj się swoim kontem Google (tak jak na poprzedniej lekcji).

Wskazówka: Jeśli wyświetla się „revisit code" — kliknij to! Twój projekt jest zapisany.

📂 Krok 1 — Wczytaj projekt startera

Trener wyśle Ci link do pliku. Pobierz go i wgraj do App Inventora.

1

Pobierz plik od trenera

Trener wyśle Ci link do pliku z rozszerzeniem .aia — pobierz go na komputer.

Co to jest .aia? To plik z gotowym wyglądem aplikacji. Masz już piękną kapibarę — musisz tylko dopisać kod! 🦫

2

Wgraj plik do App Inventora

Sposób 1 (najłatwiejszy):

Kliknij Projects → My projects i przeciągnij plik na zielone podświetlone pole.

Sposób 2:

Kliknij Projects → Import project (.aia) from my computer i wybierz pobrany plik.

Uwaga: Po wgraniu zaczekaj chwilę — projekt musi się załadować. Zobaczysz kapibarę na ekranie!

🎨 Krok 2 — Wygląd aplikacji

Ustawimy kolory i obrazek kapibary. Pracujemy w zakładce Designer.

1

Kolor tła

Kliknij Screen1 na liście komponentów (po lewej stronie).

Po prawej znajdź BackgroundColor i kliknij „Custom…". Wpisz kolor:

Kolor tła (ciemnofioletowy)

#2d2940

Możesz wybrać swój kolor! Ważne, żeby tekst i przyciski były czytelne.

2

Obrazek z kapibarą

Z panelu po lewej wybierz User Interface → Image i przeciągnij na ekran.

Ustaw rozmiar 150×150 pikseli:

Właściwości obrazka

Height → 150 pixels

Width → 150 pixels

Picture → kapibara1.jpg (albo inna kapibara!)

W projekcie są 4 różne kapibary! Wybierz tę, która najbardziej Ci się podoba 🦫🦫🦫🦫

⌨️ Krok 3 — Pola do wpisywania liczb

Dodamy dwa pola, w których użytkownik wpisze dwie liczby do działania.

1

Dodaj pierwsze pole (liczba1)

Z panelu wybierz User Interface → TextBox i przeciągnij pod obrazek.

Kliknij na TextBox i zmień jego właściwości:

Właściwości TextBox

Nazwa → liczba1

BackgroundColor → #3d6484

Width → 80 percent

Hint → Podaj pierwszą liczbę

TextAlignment → center (środek)

TextColor → White (biały)

NumbersOnly → ✅ (zaznacz!)

Co to Hint? To szary tekst podpowiedzi, który znika kiedy użytkownik zaczyna pisać.

Ważne! NumbersOnly sprawia, że użytkownik może wpisać TYLKO cyfry — żadnych liter!

2

Dodaj drugie pole (liczba2)

Zrób to samo jeszcze raz — drugi TextBox pod pierwszym. Zmień nazwę na liczba2 i Hint na „Podaj drugą liczbę". Reszta ustawień taka sama!

Teraz masz dwa pola jedno pod drugim 🎉

🔘 Krok 4 — Przyciski działań

Dodamy 4 przyciski: +, −, ×, ÷ ustawione obok siebie w jednym rzędzie.

1

Dodaj pojemnik na przyciski

Wybierz zakładkę Layout → HorizontalArrangement i przeciągnij pod pola tekstowe.

Po co HorizontalArrangement? To niewidoczne pudełko, które ustawia elementy w jednej linii obok siebie!

2

Stwórz przycisk dodawania

Do HorizontalArrangement przeciągnij Button. Ustaw:

Właściwości przycisku

Nazwa → dodawanie

BackgroundColor → #4da5c2

Text → +

TextAlignment → center

TextColor → White

FontBold → ✅

FontSize → 32

Height → 80 pixels

Width → 80 pixels

Shape → default

3

Skopiuj przycisk 3 razy

Kliknij przycisk dodawanie na liście, naciśnij Ctrl+C i Ctrl+V trzy razy.

Zmień nazwy i teksty nowych przycisków:

Cztery przyciski w rzędzie

dodawanie tekst: +

odejmowanie tekst: −

mnozenie tekst: *

dzielenie tekst: /

4

Dodaj pole na wynik

Pod przyciskami przeciągnij Label. Zmień nazwę na wynik. Ustaw:

Właściwości Label

Nazwa → wynik

FontSize → 32

TextColor → White

Text → (zostaw puste!)

🎉 Wygląd gotowy! Teraz czas na bloczki kodu.

🧮 Krok 5 — Bloczki kodu

Przechodzimy do zakładki Blocks. Tutaj programujemy, co aplikacja robi po kliknięciu przycisku.

1

Bloczek dla przycisku DODAWANIE (+)

Kliknij na dodawanie w panelu po lewej. Wybierz bloczek:

Bloczek wyzwalający — gdy kliknie przycisk

when dodawanie.Click → to się dzieje po kliknięciu +

Do środka wstaw bloczek set wynik.Text to z kategorii wynik:

Ustaw tekst wyniku na sumę obu liczb

when dodawanie.Click

set wynik.Text to + liczba1.Text liczba2.Text

Jak to działa? Kiedy klikasz +, aplikacja bierze tekst z pola liczba1, dodaje go do tekstu z liczba2 i wpisuje wynik do etykiety wynik.

2

Bloczki dla ODEJMOWANIA i MNOŻENIA

Zrób to samo dla przycisków odejmowanie i mnozenie — schemat jest identyczny, tylko zmień znak!

Odejmowanie (−)

when odejmowanie.Click

set wynik.Text to − liczba1.Text liczba2.Text

Mnożenie (×)

when mnozenie.Click

set wynik.Text to × liczba1.Text liczba2.Text

3

Bloczek dla DZIELENIA — uwaga na zero!

Dzielenie jest wyjątkowe — nie można dzielić przez zero! Musimy to sprawdzić.

🚫 Co by się stało bez sprawdzenia? Aplikacja pokazałaby błąd i wyłączyła się. Dlatego najpierw sprawdzamy, czy liczba2 to nie 0!

Bloczek dzielenia z zabezpieczeniem

when dzielenie.Click

if liczba2.Text = 0

then: set wynik.Text to "Nie można dzielić przez zero!"

else: set wynik.Text to ÷ liczba1.Text liczba2.Text

Przetłumaczmy na polski: JEŚLI druga liczba wynosi 0 — WTEDY pokaż komunikat błędu. W PRZECIWNYM RAZIE — podziel normalnie.

4

Przetestuj aplikację!

Kliknij Connect → AI Companion i zeskanuj kod QR telefonem — albo użyj emulatora.

Wpisz dwie liczby, kliknij przycisk działania — powinien pojawić się wynik! 🎉

Coś nie działa? Sprawdź czy bloczki są dobrze połączone — czy nie ma żółtych trójkątów z wykrzyknikiem. Trener pomoże!

🎉

Brawo! Twój kalkulator działa!

Zbudowałeś prawdziwą aplikację mobilną! To jest programowanie!

✅ Lista rzeczy do sprawdzenia

Zaznaczaj każdą rzecz, gdy jest gotowa:

Projekt wczytany do App Inventora

Kolor tła ustawiony

Obrazek kapibary widoczny na ekranie

Dwa pola textbox z podpowiedziami (liczba1, liczba2)

Cztery przyciski: +, −, *, /

Bloczki dodawania i odejmowania działają

Mnożenie działa

Dzielenie działa i pokazuje błąd przy dzieleniu przez 0

🌟 Zadania dodatkowe (dla śmiałków!)

Jeśli skończyłeś wcześniej — spróbuj tych wyzwań:

🛡️ Zabezpieczenie przed pustymi polami

Dodaj bloczek if, który sprawdza, czy oba pola nie są puste zanim wykona działanie. Jeśli są puste — pokaż komunikat „Wpisz obie liczby!"

🗣️ Mówiąca kapibara!

Dodaj z kategorii Media element TextToSpeech. Zaprogramuj, żeby kapibara mówiła wynik działania głosem!

Matematyczna kapibara

Brawo! Twój kalkulator działa!