Slajd 1/55
Środowisko App Inventor - wprowadzenie
Cel slajdu: otwarcie drugiej prezentacji cyklu; przedstawienie tematu i planu.

Strona tytułowa

Tytuł: Środowisko App Inventor (AI2) - tworzenie aplikacji mobilnych (Android, a od 2021 r. także iOS) bez pisania kodu.

Środowisko MIT App Inventor (AI2) MIT AI2 Gdy Przycisk1.Klik Ustaw Tekst Architektura bezkodowa (No-Code) • Tworzenie aplikacji na system Android oraz iOS • Programowanie wizualne w chmurze MIT Dwa zintegrowane środowiska • Okno Designer – kompozycja interfejsu graficznego • Okno Blocks – programowanie logiki algorytmicznej Szybkie wdrażanie i testowanie • Podgląd na żywo przez MIT AI2 Companion • Kompilacja do niezależnego pakietu .apk
Slajd 2/55
Spis treści prezentacji 2
Plan wykładu – Moduły tematyczne 01 Wprowadzenie i logowanie Serwis AI2, wymagania, konto Google 02 Okno Designer (Interfejs) Palette, Viewer, Components, Properties 03 Zarządzanie i budowa APK Projekty .aia, instalacja, AI Companion 04 Okno Blocks (Logika) Układanie klocków, kolory, plecak 05 Zmienne, warunki i pętle Get/Set, logika if, iteracje, procedury 06 Dane, zegar i dobre praktyki Baza TinyDB, Notifier, ekrany Screen Łącznie 55 slajdów: od konfiguracji konta do gotowej aplikacji
Slajd 3/55
Cele uczenia się prezentacji 2

Co student będzie umiał po tej części

  • W1: zalogować się do serwisu AI2 i utworzyć nowy projekt.
  • W2: budować interfejs aplikacji w oknie Designer (komponenty, właściwości).
  • W3: programować aplikację blokami w oknie Blocks.
  • W4: podłączyć telefon lub emulator i testować aplikację w czasie rzeczywistym.
  • W5: eksportować i importować projekty oraz budować pliki .apk.
  • K1: samodzielnie tworzyć prostą aplikację i wyjaśnić jej działanie.
Po tej prezentacji student potrafi samodzielnie zbudować pierwsze aplikacje w App Inventor.
Efekty kształcenia – Cele modułu Kluczowe kompetencje W1: Konfiguracja i start projektu Logowanie w serwisie MIT AI2 i inicjalizacja aplikacji W2: Projektowanie interfejsu użytkownika Praca w oknie Designer: Palette, Viewer, Properties W3: Implementacja logiki blokowej Programowanie procedur, zdarzeń, warunków i pętli W4: Diagnostyka i uruchamianie na żywo Testowanie na smartfonie (AI Companion) oraz w aiStarter W5: Wdrażanie i budowa pakietów .apk Eksport archiwum .aia i kompilacja paczki instalacyjnej
Slajd 4/55
Co to jest App Inventor

Definicja i rys historyczny

MIT App Inventor (w skrócie AI2) to serwis i oprogramowanie do tworzenia aplikacji mobilnych (pierwotnie na system Android, a od 2021 r. także dla urządzeń Apple) bez pisania ani jednej linii kodu - przez układanie graficznych bloków.
  • Stworzony przez Google, obecnie rozwijany przez uczelnię MIT.
  • Następca idei środowisk jak Scratch - nauka przez budowanie.
  • Służy zarówno do tworzenia prawdziwych aplikacji, jak i nauki programowania.
  • Wszystkie projekty są przechowywane w chmurze MIT.
  • Jedynym wymogiem jest posiadanie konta Google (Gmail).
Analogia za pam1.pdf: w AI2 nie piszemy kodu z palca - układamy gotowe bloki, które działają jak gotowe fragmenty kodu.
Geneza i ewolucja platformy MIT AI2 2010 Google Labs Powstanie projektu 2012 MIT CSAIL Przejęcie przez uczelnię 2021+ Wsparcie iOS Ekosystem wieloplatformowy Filozofia Scratch • Nauka przez praktyczne działanie • Brak błędów składniowych (Syntax-free) • Wizualna reprezentacja struktur danych Prof. Hal Abelson (MIT) Infrastruktura chmurowa • Projekty zapisywane na serwerach MIT • Autoryzacja przez konto Google (Gmail) • Dostęp z dowolnej przeglądarki WWW ai2.appinventor.mit.edu
Slajd 5/55
Trzy elementy App Inventor

Serwis, emulator, aplikacja Companion (za pam3.pdf)

  • Serwis WWW (ai2.appinventor.mit.edu) - w nim tworzymy aplikacje; narzędzia i projekty działają w chmurze.
  • Emulator smartfona z Androidem - wirtualny telefon uruchamiany na komputerze (przez program aiStarter).
  • Aplikacja MIT AI2 Companion - instalujemy ją na smartfonie i łączymy z serwisem, aby testować aplikacje w czasie rzeczywistym.
Dzięki chmurze MIT możemy pracować z dowolnego komputera i miejsca - wystarczy przeglądarka i konto Google.
Trzy filary architektury App Inventor 1. Serwis WWW (Chmura) ai2.appinventor.mit.edu Okna Designer i Blocks 2. MIT AI2 Companion • Aplikacja na smartfonie • Połączenie przez Wi-Fi • Test na fizycznym sprzęcie 3. Emulator aiStarter • Wirtualny telefon na PC • Konsola lokalna USB/aiStarter • Testy bez telefonu
Slajd 6/55
Do czego przydaje się App Inventor

Rola dydaktyczna i praktyczna

  • Doskonałe narzędzie do nauki programowania - łagodne wprowadzenie w logikę programów.
  • Można budować prawdziwe aplikacje mobilne - na Androida (projekty, gry, narzędzia), a od 2021 r. także dla iOS.
  • Nauczanie pojęć: zmienne, warunki, pętle, procedury, zdarzenia.
  • Rozwój myślenia algorytmicznego bez bariery składni języka.
  • Świetny start przed nauką języków takich jak Kotlin czy Python.
Zastosowania dydaktyczne i praktyczne Wymiar dydaktyczny Myślenie komputacyjne: • Zrozumienie zmiennych i zakresów • Sterowanie zdarzeniami (Events) • Pętle, warunki i operatory logiczne Brak frustracji składniowej: • Brak średników i literówek w kodzie • Klocki pasują tylko poprawnie Most do języków: Kotlin / Java / Python Zastosowania inżynierskie Prototypowanie aplikacji (MVP): • Szybka walidacja pomysłów biznesowych • Integracja z czujnikami smartfona • Obsługa baz danych TinyDB i chmury Gotowe instalatory .apk: • Pełnoprawna dystrybucja mobilna • Narzędzia pomiarowe, quizy, gry 2D Prawdziwe oprogramowanie użytkowe
Slajd 7/55
Wymagania techniczne

Co jest potrzebne do pracy w AI2

  • Komputer z przeglądarką internetową (Chrome, Firefox, Edge).
  • Konto Google (Gmail) - służy do logowania.
  • Stabilne połączenie internetowe (praca w chmurze).
  • Opcjonalnie: smartfon z Androidem i aplikacją AI2 Companion lub emulator.
  • Brak instalacji dodatkowego oprogramowania w podstawowej wersji.
Uwaga z pam3.pdf: aplikacje i projekty przechowywane są w chmurze MIT, więc do ich zapisania nie jest potrzebny własny dysk.
Wymagania techniczne stanowiska pracy 1 Komputer i przeglądarka Chrome, Firefox, Safari lub Edge • Brak konieczności instalacji IDE • Wsparcie dla Windows, macOS, Linux 2 Konto Google (Gmail) Logowanie SSO do chmury MIT • Bezpieczne przechowywanie projektów • Dostęp do biblioteki prac z każdego PC 3 Sieć internetowa Stabilne połączenie Wi-Fi • Wspólna sieć PC i telefonu • Komunikacja w protokole WebRTC / HTTP 4 Urządzenie testowe Smartfon lub aiStarter • Aplikacja MIT AI2 Companion • Alternatywnie: kabel USB lub emulator
Slajd 8/55
Logowanie do serwisu AI2

Wejście i pierwsze kroki

  1. Otwieramy adres ai2.appinventor.mit.edu w przeglądarce.
  2. Naciskamy przycisk Zaloguj się (Sign in).
  3. Wybieramy konto Google - serwis prosi o zgodę na dostęp do danych konta.
  4. Akceptujemy politykę prywatności i regulamin MIT.
  5. Po zalogowaniu otwiera się panel roboczy AI2 (My Projects).
Logowanie przez konto Google jest jedynym sposobem dostępu do serwisu - nie tworzymy osobnego hasła.
Procedura logowania do serwisu MIT AI2 https://ai2.appinventor.mit.edu 1. Wejście na stronę • Wpisanie adresu • Kliknięcie przycisku: Sign in with Google 2. Wybór konta • Logowanie Gmail • Weryfikacja danych • Akceptacja polityki Zgoda na regulamin MIT 3. Panel roboczy • Ekran My Projects • Lista projektów • Start nowego projektu Start new project
Slajd 9/55
Pierwsze projekty w AI2

Tworzenie nowego projektu

  1. W menu Projects wybieramy Start new project.
  2. Podajemy nazwę projektu (bez polskich znaków i spacji).
  3. System tworzy ekran Screen1 - minimalny i obowiązkowy element aplikacji.
  4. Nazwa projektu widoczna u góry okna roboczego.
  5. Od tego momentu możemy projektować interfejs w oknie Designer.
Z pam4.pdf: podstawowym elementem składowym każdej aplikacji jest ekran (screen); na nim umieszczamy wszystkie inne komponenty.
Tworzenie nowego projektu w AI2 Nowy projekt: Start New Project Nazwa projektu (Project name): PierwszaAplikacja • Brak spacji (zamiast spacji: CamelCase lub podkreślnik) • Brak polskich znaków (ą, ę, ś, ć, ż, ź, ł, ó, ń) • Automatyczne utworzenie głównego ekranu Screen1 OK Cancel
Slajd 10/55
Przydatne linki i źródła pomocy

Gdzie szukać pomocy (za pam3.pdf)

  • ai2.appinventor.mit.edu - główny serwis i aplikacja.
  • appinventor.org - kursy i materiały pomocnicze.
  • Dokumentacja MIT App Inventor - opisy komponentów i bloków.
  • Fora użytkowników i społeczność (np. MIT App Inventor Community).
  • W samym serwisie: wbudowane opisy bloków (pomoc po kliknięciu).
Oficjalne źródła wiedzy i wsparcia ai2.appinventor.mit.edu Środowisko produkcyjne • Edytor Designer i Blocks • Archiwizacja projektów w chmurze appinventor.mit.edu Dokumentacja i podręczniki • Szczegółowy opis komponentów • Przykłady algorytmów i samouczki appinventor.org Kursy wideo i książki • Kurs prof. Davida Wolbera • Szablony aplikacji akademickich community.appinventor.mit.edu Społeczność i fora pomocy • Rozwiązywanie nietypowych błędów • Wsparcie deweloperów z całego świata
Slajd 11/55
Okno Designer - projektowanie wyglądu

Rola okna Designer (za pam3.pdf)

Designer (projektant) - okno, w którym projektujemy interfejs użytkownika, czyli wygląd aplikacji.
  • Po lewej: panel Palette z komponentami podzielonymi na sekcje tematyczne.
  • W środku: Viewer - podgląd ekranu aplikacji.
  • Po prawej u góry: obszar komponentów (drzewo Components).
  • Po prawej u dołu: właściwości wybranego komponentu (Properties).
  • Komponenty przeciągamy myszą z palety na ekran.
Właściwości to cechy charakterystyczne komponentu: opis, kolor, czcionka; przycisk ma właściwość Text (opis), a obrazek - właściwość kontrolującą wyświetlane zdjęcie.
Cztery panele robocze okna Designer Palette User Interface • Button • Label • TextBox Layout Media Sensors Viewer Screen1 Przycisk1 Etykieta1 Components ▼ Screen1 Przycisk1 Etykieta1 Rename Delete Properties BackgroundColor FontSize: 14 Text: Kliknij mnie Visible: True
Slajd 12/55
Okno Blocks - programowanie działania

Rola okna Blocks (za pam3.pdf)

Blocks (bloki kodu) - okno, w którym projektujemy działanie (programowanie) aplikacji.
  • Po lewej: lista bloków (Built-in oraz bloki komponentów).
  • W środku: pole robocze, gdzie łączymy bloki w całość.
  • Bloki wykonują operacje: matematyczne, tekstowe, logiczne, warunki, pętle itd.
  • Bloki można przyrównać do gotowych, nieraz rozbudowanych fragmentów kodu.
  • Tworzymy program komputerowy bez pisania ani jednej linii kodu.
Krótko: Designer buduje interfejs, Blocks programuje zachowanie aplikacji.
Okno Blocks – Przestrzeń logiki blokowej Blocks Palette Built-in (Wbudowane) ■ Control (Sterowanie) ■ Logic (Logika) ■ Math (Matematyka) ■ Text (Napisy) ■ Variables (Zmienne) ■ Procedures (Funkcje) Komponenty Screen1 • Przycisk1 • Etykieta1 when Przycisk1 .Click do set Etykieta1 .Text to "Witaj w AI2!" + -
Slajd 13/55
Przełączanie między Designer a Blocks

Jak poruszamy się po środowisku

  • Przełączniki w prawym górnym rogu okna: Designer oraz Blocks.
  • Zmiany w Designer mogą wymagać odświeżenia aplikacji na telefonie/emulatorze.
  • Ciekawostka z pam3.pdf: jeśli po zmianach nic nie widać na ekranie, zmień jeden z parametrów, np. Screen - widok się odświeży.
  • Do okna Blocks wchodzimy, gdy chcemy zaprogramować zachowanie aplikacji.
  • Zaleca się, aby w trakcie pracy używać obu widoków na przemian.
Przełączanie trybów Designer i Blocks Designer Blocks Tryb wizualny (UI) • Układ kontenerów i przycisków • Konfiguracja kolorów, czcionek, tła • Wgrywanie grafik i multimediów Tryb logiczny (Algorytmy) • Oprogramowanie reakcji na kliknięcie • Obsługa zmiennych i bazy danych • Sterowanie przepływem (if, pętle) Wskazówka odświeżania widoku (za pam3.pdf): Jeśli po zmianach podgląd nie reaguje, modyfikacja dowolnej cechy ekranu (np. Title) wymusza synchronizację.
Slajd 14/55
Palette - sekcje komponentów

Gdzie szukać komponentów

Panel Palette w oknie Designer podzielony jest na sekcje tematyczne:

  • User Interface: Button, Label, TextBox, Image, CheckBox, Notifier, ListPicker...
  • Layout: HorizontalArrangement, VerticalArrangement, TableArrangement.
  • Media: Camera, Sound, Player, SoundRecorder, TextToSpeech, ImagePicker...
  • Drawing and Animation: Canvas, Ball, ImageSprite.
  • Sensors: AccelerometerSensor, Clock, LocationSensor, OrientationSensor.
  • Social: PhoneCall, Texting, Sharing.
  • Storage: TinyDB, TinyWebDB, CloudDB, File.
  • Connectivity: Web, WebViewer, ActivityStarter, BluetoothClient.
Sekcje palety komponentów (Palette) User Interface • Button (Przycisk) • Label (Etykieta) • TextBox (Pole tekstu) • Notifier, Image Layout (Układ) • HorizontalArrangement • VerticalArrangement • TableArrangement • Scrollable layouts Media (Multimedia) • Camera (Aparat) • Sound & Player • TextToSpeech • SoundRecorder Drawing & Animation • Canvas (Płótno graficzne) • Ball (Kula fizyczna) • ImageSprite (Duszek) • Detekcja kolizji 2D Sensors & Storage • Clock (Zegar/Timer) • Accelerometer (Wstrząsy) • LocationSensor (GPS) • TinyDB (Trwała pamięć)
Slajd 15/55
Viewer i Components - podgląd i drzewo

Dwa panele w środku okna Designer

  • Viewer - podgląd ekranu aplikacji na dużym planie; przeciągamy tu komponenty.
  • Components - drzewo (hierarchia) wszystkich komponentów aplikacji, widoczne i ukryte.
  • Kliknięcie komponentu na liście zaznacza go, a niżej widoczne są jego właściwości.
  • Komponenty można usuwać, kopiować i przemieszczać między kontenerami.
  • Hierarchię logiczną widzimy właśnie w oknie Components (z pam4.pdf).
Przykład: na ekranie mamy Screen1; pod nim np. VerticalArrangement1, w nim Button1 i Label1 - w drzewie widać te zależności.
Relacja paneli Viewer oraz Components Viewer (Ekran telefonu) Screen1 VerticalArrangement1 Przycisk1 Etykieta1 Components (Hierarchia) ▼ Screen1 (Główny) └ ▼ VerticalArrangement1 ├ Przycisk1 └ Etykieta1 Rename Delete • Zmiana nazwy ułatwia pracę
Slajd 16/55
Properties - właściwości komponentów

Jak zmieniamy cechy komponentu

  • Po kliknięciu komponentu w liście Components, panel Properties pokazuje wszystkie jego cechy.
  • Przykład dla przycisku: Text (opis), BackgroundColor, FontSize, Width, Height, Visible...
  • Dla ekranu Screen1: tytuł (Title), kolor tła, orientacja (AlignHorizontal, AlignVertical).
  • Zmiana właściwości od razu zmienia wygląd aplikacji w Viewerze.
  • Właściwości to parametry komponentu - przez nie sterujemy wyglądem.
Właściwość (properties) - parametr komponentu wpływający na jego wygląd lub działanie.
Panel właściwości komponentu (Properties) Wybrany komponent Obiekt: Przycisk1 Typ: Button (Interfejs) Zatwierdź dane Zmiany właściwości są natychmiast widoczne Properties: Przycisk1 BackgroundColor: FontSize: 16.0 pt Width (Szerokość): Fill parent Height (Wysokość): Automatic Text (Etykieta): Zatwierdź dane Visible (Widoczność): True (Prawda)
Slajd 17/55
Zarządzanie projektami - menu Projects

Obsługa plików i projektów (za pam3.pdf)

Projekty domyślnie przechowywane są w chmurze MIT. Menu Projects udostępnia:

  • My Projects - lista naszych projektów przechowywana na MIT.
  • Delete project - kasowanie projektu.
  • Save project - zapisanie w chmurze aktualnie otwartego projektu.
  • Save project as - zapisanie projektu pod nową nazwą (duplikacja, np. do testów).
  • Export selected project to my computer - eksport projektu do komputera.
  • Import project from my computer - import projektu z komputera i zapis w chmurze.
Zarządzanie projektami – Menu Projects Projects ▾ Connect Build Settings Help My Projects (Lista projektów) Start new project... Save project (Zapisz) Save project as... (Kopia zapasowa) Checkpoint (Punkt kontrolny) Export selected project (.aia) Import project (.aia) from my computer Delete project (Usuń) Kluczowe funkcje: • Ciągła archiwizacja w chmurze • Brak utraty danych po awarii PC • Save as – bezpieczne testy • Plik .aia zawiera cały kod i media Zalecenie: eksport .aia po zajęciach!
Slajd 18/55
Eksport i import projektu (.aia)

Praca z plikami projektu

  • Projekt zapisujemy do pliku z rozszerzeniem .aia (App Inventor Archive).
  • Plik .aia zawiera kod blokowy oraz zasoby (obrazy, dźwięki).
  • Eksport pozwala archiwizować projekt lub przekazać go innej osobie.
  • Import pozwala wczytać projekt z komputera do chmury i kontynuować pracę.
  • Plik .aia różni się od pliku .apk - to nie jest gotowa aplikacja, a projekt.
Nie myl projektu (.aia) z aplikacją (.apk). Projekt służy do dalszej pracy, aplikacja do instalacji na telefonie.
Obieg archiwum projektu w formacie .aia Chmura MIT AI2 • Baza projektów online • Edycja w przeglądarce ai2.appinventor.mit.edu Eksport .aia Import .aia Plik: projekt.aia (Archiwum ZIP) Zawartość archiwum: • Pliki .scm (układ ekranów Designer) • Pliki .bky (bloki i logika Blocks) • Katalog /assets (obrazy, dźwięki) Standard wymiany prac laboratoryjnych: • Plik .aia służy do oddawania zadań i oceny przez prowadzącego • Pozwala odtworzyć projekt 1:1 na innym koncie Google bez utraty powiązań
Slajd 19/55
Zasoby i pliki multimedialne (Media)

Wgrywanie obrazów i dźwięków

  • W oknie Designer, sekcja Media, wgrywamy pliki: obrazy, dźwięki, nagrania.
  • Wgrane pliki są dostępne dla komponentów (np. Image, Sound, Player).
  • Nazwy plików powinny być bez polskich znaków i spacji.
  • Duże pliki warto trzymać poza aplikacją (karta SD, adres URL).
  • Projekt AI2 ma limit rozmiaru (aktualnie ok. 30 MB w serwisie ai2.appinventor.mit.edu) - uwaga na rozmiar zasobów.
Przykład: plik dzwiek1.mp3 wgrany do Media może być odtwarzany przez komponent Sound metodą Play.
Zarządzanie zasobami multimedialnymi (Media) Panel Media (Designer) Upload File... (Wgraj plik) Pliki w projekcie: 🖼 ikona_start.png (12 KB) 🖼 tlo_planszy.jpg (140 KB) 🎵 klik.mp3 (25 KB) 🎵 wygrana.wav (80 KB) [Delete] [Preview] Zasady nazewnictwa i limitów 1. Znaki w nazwach plików: • Tylko litery a-z, cyfry 0-9 i podkreślnik _ • Bezwzględny zakaz spacji i polskich znaków 2. Optymalizacja rozmiaru: • Cały projekt nie może przekroczyć ok. 30 MB • Kompresja grafik (JPEG / WebP / PNG) 3. Wykorzystanie w komponentach: • Obraz -> Image1.Picture = tlo.jpg • Dźwięk -> Sound1.Source = klik.mp3
Slajd 20/55
Zapis, duplikacja i wersje projektu

Dobre praktyki pracy z projektem

  • Zapisuj projekt często (Save project).
  • Przed ryzykownymi zmianami zrób kopię (Save project as) - zachowasz działającą wersję.
  • Stosuj czytelne nazwy projektów, np. kalkulator_v1, quiz_v2.
  • Opisuj zmiany - pomaga to wrócić do starszej wersji.
  • Eksportuj projekt (.aia) jako kopię zapasową na komputer.
Programy żyją własnym życiem - ciągle je rozwijamy i poprawiamy, dlatego wersjonowanie jest nieodzowne (por. pam2.pdf).
Strategia kontroli wersji i zapisu projektu kalkulator_v1 Wersja bazowa: dodawanie i UI kalkulator_v2_test Save project as: nowe operacje kalkulator_v2_final Przetestowana, gotowa do kompilacji Dobre nawyki inżynierskie • Częsty zapis (Save project): Zapisuj stan po każdej udanej zmianie • Tworzenie kopii (Save project as): Zrób kopię PRZED ryzykowną przebudową bloków • Systematyczne nazewnictwo: Stosuj sufiksy _v1, _v2, _test zamiast przypadkowych • Kopia na dysk (.aia): Kopia lokalna uniezależnia od łączności z chmurą
Slajd 21/55
Budowanie aplikacji - menu Build

Od projektu do pliku .apk (za pam3.pdf)

  • Menu Build służy do wygenerowania aplikacji instalacyjnej.
  • Android App (.apk) - buduje plik aplikacji do pobrania na komputer.
  • Wygenerowany plik można skopiować na telefon i zainstalować.
  • Instalacja wymaga włączenia opcji zezwalającej na instalację z nieznanych źródeł.
  • Dla Google Play buduje się pakiet Android App Bundle (.aab) i wysyła do konsoli wydawcy.
  • Dla sklepu Apple App Store można natomiast zbudować i przesłać plik .ipa (wersja iOS) - wymaga to konta w programie Apple Developer.
Kompilacja i generowanie pliku instalacyjnego .apk Projects Connect Build ▾ Settings 1. Kompilator MIT • Budowa kodu Java/DEX • Pakowanie zasobów • Podpis cyfrowy certyfikatem 2A. Kod QR Zeskanuj telefonem 2B. Plik .apk • Pobranie na dysk PC • Instalacja przez USB • Dystrybucja pliku Ważny krok podczas instalacji na telefonie Android: Należy zezwolić w ustawieniach systemu na: "Instalacja aplikacji z nieznanych źródeł" (sideloading).
Slajd 22/55
Podłączanie smartfona - AI Companion

Testowanie w czasie rzeczywistym (za pam3.pdf)

  1. Instalujemy na smartfonie aplikację MIT AI2 Companion.
  2. Uruchamiamy ją i łączymy z panelem AI2.
  3. W panelu AI2 wybieramy menu Connect/AI Companion.
  4. Pojawia się kod do przepisania lub kod QR do zeskanowania.
  5. Po sparowaniu wszystkie zmiany w projekcie są natychmiast widoczne na telefonie.
Połączenie działa przez sieć Wi-Fi - telefon i komputer powinny być w tej samej sieci.
Parowanie urządzenia przez MIT AI2 Companion Komputer: Connect -> AI Companion Kod parowania: XYZABC Przepisz kod lub zeskanuj aparatami Wi-Fi Aplikacja MIT AI2 Companion Wprowadź 6-znakowy kod: XYZABC Connect with code Scan QR code ● Połączenie aktywne: live reload Warunek bezwzględny: Komputer i smartfon muszą pracować w tej samej podsieci Wi-Fi!
Slajd 23/55
Emulator Androida - aiStarter

Testowanie bez telefonu (za pam3.pdf)

  • Emulator to wirtualny telefon z Androidem działający na komputerze.
  • Wymaga pobrania i zainstalowania programu aiStarter.
  • Po uruchomieniu pojawia się okno konsoli - nie zamykamy go, tylko minimalizujemy.
  • W panelu AI2 wybieramy Connect/Emulator, aby połączyć się z emulatorem.
  • Emulator bywa wolny i nie obsługuje wszystkich czujników (np. GPS, akcelerometr).
Uwaga z pam3.pdf: syntezator mowy w emulatorze działa słabo i tylko po angielsku; najlepszy test to prawdziwy smartfon.
Emulator lokalny Androida – Program aiStarter aiStarter console aiStarter daemon 2.3 Listening on 127.0.0.1:8004 AVD starting: 5554:nexus Companion service active Nie zamykaj! Zminimalizuj. localhost Wirtualny smartfon Android AI2 Companion LIVE Home Menu Back Testowanie bez fizycznego telefonu: instalacja aiStarter umożliwia pełną emulację sprzętu.
Slajd 24/55
Typowe problemy z połączeniem

Jak sobie radzić (za pam3.pdf)

  • Brak połączenia: sprawdź połączenie z siecią Wi-Fi i czy telefon jest w tej samej sieci co komputer.
  • Zawieszenie emulatora: wybierz Connect/Reset Connection i połącz ponownie.
  • Gdy to nie pomaga: zamknij konsolę emulatora i uruchom aiStarter od nowa.
  • Aplikacja nie startuje w emulatorze: kliknij dwukrotnie ikonę Companion na ekranie.
  • Zmiany nie widać: zmień w Designer jeden parametr (np. Screen) - widok się odświeży.
Diagnostyka problemów z łącznością Problem 1: Brak sieci Objaw: Błąd łączenia z kodem Rozwiązanie: • Sprawdź Wi-Fi • Czy PC i telefon są w TEJ SAMEJ sieci? • Wyłącz VPN / AP isolate Problem 2: Zawieszenie Objaw: Brak reakcji na bloki Rozwiązanie: • Wybierz menu: Connect -> Reset • Zrestartuj Companion • Odśwież stronę F5 Problem 3: aiStarter Objaw: Emulator nie wstaje Rozwiązanie: • Zamknij konsolę • Uruchom od nowa • Kliknij Companion w oknie emulatora Procedura awaryjna: Reset Connection -> Hard Reset -> Reconnect Dostępna w górnym menu Connect panelu roboczego App Inventor
Slajd 25/55
Programowanie blokowe - idea

Bloki zamiast kodu

W AI2 bloki pełnią funkcję kodu. Zamiast pisać wiele linii kodu, przeciągamy bloki wykonujące operacje: warunki, pętle, obsługę komponentów i inne.
  • Bloki mają specjalne kształty - pasują do siebie tylko w jedyny sposób.
  • Gdy zbliżamy bloki do siebie, pojawia się podpowiedź, co pasuje.
  • Możliwość pomyłki przy budowie aplikacji jest więc minimalna (z pam4.pdf).
  • Każdy blok to zestaw instrukcji, jakie wykona aplikacja.
  • To programowanie wizualne - składanie bloków w logiczną całość.
Zasada konstrukcji blokowej – Geometria puzzli Kod tekstowy (Ryzyko błędów) btn.setOnClickListener( new View.OnClickListener() { lbl.setText("OK") // Brak ; }); // Syntax Error! • Błędy składni (literówki, nawiasy) Bloki AI2 (Gwarancja spójności) when Przycisk1.Click do set Etykieta1.Text to "OK" • Wypustki i wpusty pasują do siebie • Zero błędów kompilacji składniowej Kluczowa cecha App Inventor (za pam4.pdf): Możliwość pomyłki jest zminimalizowana – klocki można złożyć tylko wtedy, gdy pasują typy danych.
Slajd 26/55
Rodzaje bloków - Built-in

Bloki ogólne (za pam4.pdf)

  • Control - warunki, pętle, zdarzenia systemowe (np. zamknięcie aplikacji).
  • Logic - operacje logiczne: and, or, not, porównania.
  • Math - operacje i funkcje matematyczne.
  • Text - obsługa tekstów (łączenie, dzielenie, zamiana).
  • Lists - obsługa list (dodawanie, usuwanie, wybieranie).
  • Dictionaries - słowniki (pary klucz-wartość), dostępne w nowszych wersjach.
  • Colors - kolory.
  • Variables - obsługa zmiennych globalnych i lokalnych.
  • Procedures - obsługa procedur.
Paleta bloków wbudowanych (Built-in) Control (Sterowanie) • if then / if then else • for each number from • while test do • open another screen Logic (Logika) • true / false • and / or • not (negacja) • = oraz ≠ Math (Matematyka) • Liczby (np. 0, 100) • Działania: +, -, *, /, ^ • random integer (losuj) • sqrt, sin, cos, round Text (Tekst) • "ciąg tekstowy" • join (łączenie tekstów) • length (długość tekstu) • segment, upcase Lists (Listy) • make a list • add items to list • select list item • length of list Variables (Zmienne) • initialize global name to • initialize local in • get (pobierz) • set to (ustaw)
Slajd 27/55
Bloki komponentów

Bloki związane z komponentami (za pam4.pdf)

  • Każdy komponent ma inny zestaw bloków, związany z jego właściwościami i metodami.
  • Przycisk (Button) reaguje na naciśnięcie, można zmienić jego opis, położenie itp.
  • Obraz (Image) ma właściwości pozwalające wczytać obraz, obrócić go itp.
  • Bloki pojawiają się po kliknięciu komponentu na liście po lewej stronie okna Blocks.
  • Dostępne są trzy grupy: zdarzenia (events), metody (methods), właściwości (get/set).
Przykład: komponent Notifier udostępnia zdarzenia (brązowe) i metody (fioletowe), m.in. ShowAlert.
Bloki dedykowane komponentom aplikacji when Przycisk1 .Click do 1. Blok zdarzenia (Event) Uruchamiany automatycznie przy dotknięciu przycisku przez użytkownika call Dzwiek1 .Play 2. Blok metody (Method / Action) Wywołuje konkretną akcję sprzętową (np. odtworzenie dźwięku, alert) set Etykieta1 .Text to Etykieta1 .FontSize 3. Właściwości (Properties) • Setter (ciemnozielony): zapis nowej cechy komponentu • Getter (jasnozielony): odczyt aktualnego stanu
Slajd 28/55
Kolory bloków - jak je rozpoznawać

Kodowanie kolorem (za pam4.pdf)

  • Złotobrązowe (żółtozłote) - bloki zdarzeń (ang. events), np. when Button1.Click.
  • Fioletowe - bloki metod (ang. methods), np. call Notifier.ShowAlert.
  • Zielone - bloki właściwości komponentów: getter (odczyt) - jaśniejszy, setter (zapis) - ciemniejszy.
  • Pomarańczowe - bloki zmiennych (np. set global ... to ...).
  • Niebieskie - operacje matematyczne (Math).
Kolor bloku od razu podpowiada, do czego blok służy - to duże ułatwienie dla początkujących.
System kodowania barwnego w oknie Blocks Kolor bloku Kategoria logiczna Przykład zastosowania Złocisto-brązowy Zdarzenia (Events) when Button1.Click Fioletowy Metody (Methods) call Notifier.ShowAlert Ciemnozielony Settery (Zapis cechy) set Label1.Text to Jasnozielony Gettery (Odczyt cechy) Label1.Text Pomarańczowy Zmienne (Variables) set global punkty to Błękitny / Różowy Matematyka / Napisy 100 + 5 / "Wynik: "
Slajd 29/55
Przeciąganie i łączenie bloków

Praktyka pracy w oknie Blocks

  • Bloki przeciągamy z lewej listy na pole robocze.
  • Bloki układamy jeden w drugim - jak klocki.
  • Pusty obszar okna służy do odkładania nieużywanych bloków.
  • Przy zbliżaniu bloków pojawia się żółta podpowiedź, gdzie można je wpiąć.
  • Kliknięcie pustego obszaru, wpisanie liczby (np. 23) i naciśnięcie Enter tworzą blok z tą liczbą (z pam4.pdf).
Mechanizm przyciągania i łączenia klocków 1. Przeciągnięcie when Click • Chwyć blok z listy • Upuść na pole 2. Zbliżenie bloków Żółty wskaźnik snapu • Sygnalizacja pasowania • Magnetyczne dociąganie 3. Zatrzaśnięcie • Dźwięk kliknięcia • Gotowa instrukcja Nieużywane klocki można bezpiecznie odłożyć w wolnej przestrzeni pola roboczego.
Slajd 30/55
Menu kontekstowe bloku

Prawy przycisk myszy na bloku (za pam3.pdf i pam4.pdf)

  • Duplicate - duplikowanie bloku (także Ctrl+C, Ctrl+V).
  • Add Comment - dodanie komentarza do bloku.
  • Collapse block / Expand block - zwijanie i rozwijanie bloku.
  • Disable block / Enable block - wyłączenie lub włączenie bloku.
  • Delete block - usunięcie bloku (szybciej klawiszem Del).
  • Add to backpack - zachowanie bloku do późniejszego użycia.
  • Help - pomoc i opis parametrów bloku; niektóre bloki mają Do it (wykonanie kroku).
Opcje menu kontekstowego bloku (Prawy przycisk) set Etykieta1.Text to R Kliknięcie Prawym Przyciskiem Myszy (PPM) Menu kontekstowe Duplicate (Duplikuj) Tworzy natychmiastową kopię bloku Add Comment (Dodaj komentarz) Dołącza dymek z dokumentacją Collapse Block (Zwiń blok) Kompaktuje blok do pojedynczej linii Disable Block (Wyłącz) Tymczasowo deaktywuje działanie bloku Delete Block (Usuń blok) Kasuje blok (można cofnąć Ctrl+Z)
Slajd 31/55
Komentarze w blokach

Dokumentowanie kodu (za pam3.pdf i pam4.pdf)

  • Kliknięcie bloku prawym przyciskiem myszy i wybranie opcji Add Comment dodaje komentarz.
  • W lewym górnym rogu bloku pojawia się niebieska ikona ze znakiem zapytania.
  • Kliknięcie ikony otwiera okienko do wpisania treści komentarza.
  • Komentarze są dla programistów - nie mają wpływu na działanie programu.
  • Warto komentować złożone procedury i ważne fragmenty logiki.
Po kilku dniach koncepcja wylatuje z głowy - komentarz pozwala odtworzyć sens fragmentu programu (por. pam1.pdf).
Dokumentowanie algorytmów – Komentarze ? when Button1.Click do Komentarz techniczny: Zwiększa licznik punktów po kliknięciu i aktualizuje etykietę na ekranie. Właściwości komentarzy Dla kogo? • Dla programisty i zespołu Wpływ na działanie? • Zero wpływu na prędkość • Brak wpływu na plik .apk Dobre nawyki: • Komentuj złożone pętle • Wyjaśniaj nietypowe wzory
Slajd 32/55
Kopiowanie i duplikowanie bloków

Szybkie powielanie kodu (za pam3.pdf)

  • Kliknięcie bloku prawym przyciskiem myszy i wybranie opcji Duplicate tworzy kopię bloku.
  • Skrót Ctrl+C i Ctrl+V działa identycznie.
  • Duplikowanie przydaje się przy testach i powtarzalnych konstrukcjach.
  • Można duplikować całe grupy bloków (zaznaczając je).
  • Kopiowanie oszczędza czas przy budowie podobnych procedur.
Przykład: mając gotowy blok wyświetlający komunikat, zduplikuj go i zmień treść dla innego przycisku.
Kopiowanie i powielanie bloków (Duplicate) set Punkty to Punkty + 1 Oryginalna gałąź kodu Ctrl+C / Ctrl+V lub Duplicate set Punkty to Punkty + 1 Duplikat 1:1 z parametrami Zastosowania duplikacji w pracy inżynierskiej: • Szybkie tworzenie obsługi wielu przycisków o podobnym zachowaniu (np. klawiatura kalkulatora) • Powielanie całych struktur warunkowych if-else bez ponownego przeciągania z palety Wskazówka: Po sklonowaniu wystarczy rozwinąć menu i zmienić nazwę komponentu!
Slajd 33/55
Wyłączanie bloków

Blok tymczasowo nieaktywny (za pam3.pdf)

  • Funkcja Disable block wyłącza blok bez usuwania go z ekranu.
  • Wyłączony blok nie działa - tak jakby go nie było.
  • System sygnalizuje to szarym kolorem bloku.
  • Funkcja Enable block przywraca działanie.
  • Przydatne przy testowaniu różnych wariantów logiki.
Tymczasowa deaktywacja kodu (Disable Block) Stan aktywny (Enabled) set Dzwiek1.Source to "klik.mp3" ● Wykonywany w programie Disable Stan wyłączony (Disabled) set Dzwiek1.Source to "klik.mp3" ○ Pomijany przez procesor Korzyści podczas debugowania: • Możliwość sprawdzenia czy dany blok powoduje błąd bez jego usuwania • Oszczędność czasu: nie trzeba od nowa konfigurować parametrów po usunięciu • Przywrócenie: PPM -> Enable block natychmiast przywraca działanie
Slajd 34/55
Zwijanie bloków i plecak

Porządek na polu roboczym (za pam3.pdf)

  • Collapse block zwija blok do jednej linii - nadal działa, ale zajmuje mniej miejsca.
  • Można zwijać fragmenty większych bloków (np. całe pętle).
  • Backpack (plecak) - schowek na bloki do ponownego użycia w innych projektach.
  • Kliknięcie bloku prawym przyciskiem myszy i wybranie opcji Add to backpack zapisuje blok w plecaku.
  • Plecak pozwala przenosić sprawdzone konstrukcje między projektami.
Zwijanie i plecak to narzędzia porządku - w dużych aplikacjach ich znaczenie rośnie.
Ergonomia pracy: Zwijanie bloków i Plecak (Backpack) 1. Zwijanie bloków (Collapse) Rozwinięty blok (zajmuje dużo miejsca): ▼ when Button1.Click do set X to 1 ... 20 instrukcji ... Po zwinięciu (Collapse block): ▶ when Button1.Click do ... • Kod działa identycznie w tle 2. Schowek: Plecak (Backpack) Uniwersalny schowek projektowy: • Przeciągnij blok do plecaka, by go zapisać • Dostępny na każdym ekranie (Screen1, Screen2) • Działa nawet między RÓŻNYMI projektami! Najlepszy sposób na kopiowanie modułów
Slajd 35/55
Zmienne - pojęcie

Czym jest zmienna (za pam1.pdf i pam4.pdf)

Zmienna to pojemnik na dane, które mogą się zmieniać w trakcie działania programu. Ma swoją nazwę i wartość.
  • Nazwa zmiennej powinna być opisowa, np. wynik, imię, punkty.
  • Zmienna może przechowywać liczbę, tekst, listę, wartość logiczną.
  • Wartość zmiennej odczytujemy (get) i ustawiamy (set).
  • Zmienne są podstawą pamięci programu - bez nich program nie pamiętałby niczego.
  • W AI2 tworzymy zmienne blokiem initialize global (zmienna globalna).
Istota i typy danych zmiennych w programowaniu Metafora komórki pamięci (Zmienna) punktyGracza 150 Zmienna = unikalna nazwa + przechowywana wartość Typy danych w App Inventor 1. Liczby (Number): 42, -5, 3.14 2. Napisy (Text): "Jan Kowalski" 3. Logiczne (Boolean): true / false 4. Listy (List): [jabłko, banan, wiśnia] Bez zmiennych program nie ma pamięci operacyjnej. Zmienne przechowują stan gry, wpisany tekst, wyniki obliczeń i flagi logiki.
Slajd 36/55
Zmienne globalne i lokalne

Dwa rodzaje zmiennych w AI2 (za pam3.pdf i pam4.pdf)

  • Zmienna globalna (initialize global name to) - dostępna w całej aplikacji, we wszystkich zdarzeniach.
  • Zmienna lokalna (initialize local name to) - dostępna tylko w obrębie danej procedury lub bloku.
  • Zmienne globalne tworzymy raz, a używamy w wielu miejscach.
  • Zmienne lokalne pomagają utrzymać porządek i unikać konfliktów nazw.
  • W bloku zmiennej lokalnej trzeba podać zakres (np. w procedurze).
Przykład z pam4.pdf: zmienna score trzymająca liczbę punktów w grze powinna być globalna, bo odczytujemy ją w wielu zdarzeniach.
Zasięg zmiennych: Zmienne globalne vs lokalne Zmienna globalna (Global) initialize global wynik to 0 Zasięg (Scope): • Dostępna w CAŁYM pliku ekranu • Można ją czytać w każdym zdarzeniu • Pamięta wartość przez cały czas pracy Kiedy stosować? • Stan gry, konto użytkownika, koszyk Zmienna lokalna (Local) initialize local temp to 10 in Zasięg (Scope): • Dostępna TYLKO wewnątrz swojego bloku • Niewidoczna dla innych zdarzeń • Usuwana z pamięci po wykonaniu bloku Kiedy stosować? • Obliczenia pomocnicze, indeksy pętli
Slajd 37/55
Get i Set - odczyt i zapis wartości

Jak posługujemy się zmiennymi (za pam3.pdf)

  • get (jasnozielony) - pobiera (czyta) aktualną wartość zmiennej lub właściwości.
  • set (pomarańczowy/zielony) - ustawia (zapisuje) nową wartość.
  • Blok set zawsze zawiera dwa elementy: nazwę zmiennej i nową wartość.
  • Wartość do bloku set wpisujemy z klawiatury lub wstawiamy w postaci innego bloku (np. działania matematycznego).
  • Blok ustawiania wartości (setter) umieszczamy najczęściej wewnątrz zdarzenia lub procedury.
Odczyt (get) nie zmienia stanu programu; zapis (set) tak - to kluczowa różnica.
Mechanizm operacji na zmiennych: get oraz set 1. Operacja zapisu: set (Setter) set global wynik to 100 Wpisuje nową wartość do pamięci RAM Zastępuje dotychczasową zawartość zmiennej nową daną. 2. Operacja odczytu: get (Getter) get global wynik Pobiera aktualną wartość ze zmiennej Nie modyfikuje pamięci – podaje wartość do obliczeń, etykiet lub warunków.
Slajd 38/55
Przykład użycia zmiennej - licznik

Zwiększanie licznika kliknięć

  • Tworzymy zmienną globalną licznik z wartością początkową 0.
  • W zdarzeniu when Button1.Click ustawiamy: set licznik na get licznik + 1.
  • W tej samej akcji ustawiamy tekst etykiety na wartość licznika.
  • Po każdym kliknięciu licznik rośnie o jeden.
  • To klasyczny wzorzec akumulacji - podstawa punktacji w grach.
Studium przypadku: Budowa licznika kliknięć initialize global licznik to 0 when Button1.Click do set global licznik to licznik + 1 set Label1.Text to get licznik Podgląd działania Kliknij mnie! Wartość licznika: 5
Slajd 39/55
Warunki - jeśli (if)

Podejmowanie decyzji w programie (za pam1.pdf i pam4.pdf)

Instrukcja warunkowa pozwala wykonać fragment programu tylko wtedy, gdy spełniony jest określony warunek.
  • Blok if ... then wykonuje akcję, gdy warunek jest prawdziwy (true).
  • Blok if ... then ... else wykonuje jedną akcję, gdy warunek prawdziwy, a inną, gdy fałszywy.
  • Warunki budujemy operatorami logicznymi: =, nie równa się, >, <, and, or, not.
  • Bloki warunków są żółte i mają wycięcie na warunek oraz wcięcie na akcję.
  • Warunki można zagnieżdżać - if w if.
Instrukcje warunkowe – Podejmowanie decyzji if punkty >= 100 then set Etykieta.Text to "Wygrana!" else set Etykieta.Text to "Graj dalej" ⚙ Zębatka (Mutator) pozwala dodać else if oraz else Schemat decyzyjny punkty >= 100? TAK Wygrana! NIE Graj dalej
Slajd 40/55
Pętle - powtarzanie czynności

Iteracja w AI2 (za pam1.pdf i pam4.pdf)

Pętla pozwala powtórzyć fragment programu wiele razy bez wielokrotnego kopiowania tych samych bloków.
  • for each from ... to ... - powtarza akcję określoną liczbę razy.
  • while ... do - powtarza, dopóki warunek jest prawdziwy.
  • for each item in list - przechodzi przez elementy listy.
  • Pętle wymagają licznika (zmiennej sterującej).
  • Uwaga na pętle nieskończone - pętla musi się kiedyś zakończyć.
Przykład: pętla for each from 1 to 10 wypisuje liczby od 1 do 10.
Struktury iteracyjne – Pętle for oraz while 1. for each number Licznik kroków: from: 1 to: 10 by: 1 Zastosowanie: Powtórzenie N razy (np. generowanie 10 pól) 2. for each item Iteracja po liście: item in list: [A, B, C] Pobiera kolejno każdy element z kolekcji Zastosowanie: Przetwarzanie rekordów, sumowanie listy cen 3. while test do Pętla warunkowa: Dopóki warunek = true Uwaga na pętle nieskończone! Zastosowanie: Czekanie na zdarzenie, algorytmy przeszukiwania Pętle automatyzują powtarzalne operacje i redukują rozmiar kodu aplikacji.
Slajd 41/55
Procedury - własne bloki

Grupowanie i wielokrotne użycie kodu (za pam1.pdf i pam4.pdf)

Procedura to wydzielony fragment programu, który wykonuje określone zadanie i może być wywoływany w wielu miejscach.
  • W AI2 tworzymy dwie części: define (definicja) i call (wywołanie).
  • Procedura dzieli większy program na mniejsze, czytelne bloki.
  • Procedura może przyjmować argumenty (parametry wejściowe).
  • Procedura może zwracać wynik (return) - tzw. funkcja.
  • Zaleta: raz napisany kod wykorzystujemy wielokrotnie, co skraca program i ułatwia jego poprawę.
Programujemy dzieląc problem: duże zadanie rozbijamy na mniejsze procedury.
Procedury – Modularyzacja i wielokrotne użycie 1. Definicja (to nazwa do) to wyczyscEkran do set TextBox1.Text to "" set Label1.Text to "0" 2. Wywołania (call) W zdarzeniu Reset: call wyczyscEkran W zdarzeniu Start: call wyczyscEkran Zasada inżynierska DRY (Don't Repeat Yourself): Zamiast powielać kod – twórz procedury!
Slajd 42/55
Zdarzenia - serce aplikacji

Reakcja na działania użytkownika (za pam4.pdf)

Zdarzenie (event) to sytuacja, na którą aplikacja reaguje: naciśnięcie przycisku, dotknięcie ekranu, upływ czasu, ruch telefonem.
  • Każdy blok zdarzenia ma nagłówek when (kiedy) i wcięcie na akcję.
  • Przykłady: when Button1.Click, when Screen1.Initialize, when Clock1.Timer.
  • Program mobilny jest sterowany zdarzeniami - czeka, aż coś się stanie.
  • Bez zdarzeń aplikacja nie reagowałaby na użytkownika.
  • Kilka zdarzeń może działać niezależnie od siebie.
Architektura sterowana zdarzeniami (Event-Driven) Pętla zdarzeń Event Loop Dotyk ekranu: when Button1.Click Upływ czasu: when Clock1.Timer Akcelerometr: when Shaking Inicjalizacja: when Screen1.Init Aplikacja mobilna nie działa liniowo: stale nasłuchuje zdarzeń i na nie reaguje.
Slajd 43/55
Metody - akcje komponentów

Wywoływanie działań (za pam4.pdf)

Metoda (method) to czynność, którą potrafi wykonać komponent; wywołujemy ją blokiem z napisem call.
  • Przykład: call Notifier.ShowAlert - pokazuje komunikat.
  • Przykład: call TextToSpeech.Speak - wypowiada tekst.
  • Przykład: call Sound.Play - odtwarza dźwięk.
  • Metody wywołujemy wewnątrz zdarzeń lub procedur.
  • Metody mogą mieć argumenty (dane wejściowe).
Metody – Wywoływanie akcji komponentów (call) call TextToSpeech1 .Speak Syntezator mowy: Wypowiada wpisany tekst przez głośnik smartfona call Sound1 .Vibrate 500 ms Silnik wibracyjny: Uruchamia haptyczną wibrację urządzenia (np. przy błędzie) call Notifier1 .ShowAlert "Zapisano!" Komunikat systemowy (Toast): Wyświetla krótką informację nakładaną na ekran Metody reprezentują czasowniki w kodzie – zlecają wykonanie akcji fizycznemu urządzeniu.
Slajd 44/55
Właściwości - odczyt i zmiana

Sterowanie wyglądem z poziomu bloków (za pam4.pdf)

  • Każdy komponent ma właściwości, które można odczytać (get) i ustawić (set).
  • Przykład: set Button1.Text na "Kliknij mnie".
  • Przykład: set Label1.BackgroundColor na kolor czerwony.
  • Przykład: set Image1.Picture na wgrany obraz.
  • Zmiana właściwości w blokach działa w trakcie działania aplikacji.
Różnica: właściwości można ustawić też w Designerze (na stałe), ale blokami zmieniamy je dynamicznie.
Dynamiczna zmiana właściwości w trakcie działania Klocki zmiany właściwości Gdy użytkownik włącza tryb nocny: set Screen1.BackgroundColor to Black set Etykieta1.TextColor to White set Przycisk1.FontSize to 18 Każda właściwość z Designera może być zmieniona z poziomu kodu! Ekran telefonu: Tryb Nocny Aplikacja AI2 Zatwierdź Dynamiczna zmiana kolorów
Slajd 45/55
Pierwszy program - Hello World

Konstrukcja pierwszego programu krok po kroku

  1. W Designerze dodajemy przycisk Button1 i etykietę Label1.
  2. Ustawiamy Button1.Text na "Powitanie", a Label1.Text na pusty tekst.
  3. Przechodzimy do Blocks.
  4. Dodajemy blok when Button1.Click.
  5. Do akcji wstawiamy set Label1.Text na "Witaj w App Inventor!".
  6. Testujemy za pomocą AI Companion lub emulatora.
To najprostszy możliwy program - fundament wszystkich dalszych konstrukcji.
Pierwsza aplikacja: Witaj Świecie (Hello World) Krok 1: Designer Dodaj komponenty: • Button1 (Przycisk) Text = "Powitanie" • Label1 (Etykieta) Text = "" (pusty) Układ gotowy w Viewer Krok 2: Okno Blocks when Button1.Click do set Label1.Text to "Witaj w świecie AI2!" Połączenie zdarzenia z akcją zmiany napisu Krok 3: Smartfon Powitanie Kliknięcie! Witaj w świecie AI2! Klasyczny program Hello World realizowany jest w App Inventorze bez ani jednej linijki kodu tekstowego.
Slajd 46/55
Zegar i Timer - zdarzenia czasowe

Komponent Clock (za pam4.pdf)

  • Komponent Clock mierzy czas i generuje zdarzenia cykliczne.
  • Zdarzenie when Clock1.Timer wykonuje się co określoną liczbę milisekund.
  • Ustawiamy TimerInterval (np. 1000 ms = 1 sekunda).
  • Clock ma metody zwracające czas (Now, Year, Month, DayOfMonth, Hour, Minute, Second).
  • Zdarzenia czasowe są niezbędne w grach, animacjach i zegarach.
Przykład: co sekundę zwiększamy licznik i aktualizujemy etykietę - prosty stoper.
Komponent Clock – Obsługa zdarzeń czasowych Właściwości komponentu Clock TimerInterval (Interwał): 1000 ms (= 1 sekunda) TimerEnabled (Stan timera): True (Zegar stale odlicza czas) TimerAlwaysFires: Działa także w tle urządzenia Komponent niewidoczny (Non-visible) Zdarzenie cykliczne: when Timer when Clock1.Timer do set sekundy to sekundy + 1 set LabelCzas.Text to sekundy Zastosowania Clock: • Stoper i odliczanie (Countdown) • Pętla gry 2D (Game Loop 60 FPS) • Formatowanie daty: FormatDateTime
Slajd 47/55
Notifier - komunikaty dla użytkownika

Powiadomienia i pytania (za pam4.pdf)

  • Komponent Notifier służy do wyświetlania komunikatów.
  • Metoda ShowAlert pokazuje krótką, tymczasową informację (bez przycisków).
  • Metoda ShowMessageDialog pokazuje okno z informacją i jednym przyciskiem.
  • Metoda ShowChooseDialog pozwala zadać pytanie z przyciskami wyboru (np. Tak/Nie).
  • Notifier ma zdarzenia reagujące na wybór użytkownika.
  • Przydatny do potwierdzeń, ostrzeżeń i prostych dialogów.
Komponent Notifier – Dialogi i powiadomienia 1. ShowAlert (Toast) Zapisano stan gry! • Krótki komunikat • Znika sam po 2 sek. • Brak przycisków 2. ShowMessageDialog Informacja Zadanie wykonane. OK • Okno modalne • Wymaga potwierdzenia • 1 przycisk zatwierdzenia 3. ShowChooseDialog Czy zakończyć grę? TAK NIE • Pytanie decyzyjne • when AfterChoosing • Zwraca wybór usera Notifier umożliwia dialog z użytkownikiem bez tworzenia dedykowanych dodatkowych ekranów.
Slajd 48/55
Listy i TinyDB - dane trwałe

Przechowywanie danych (za pam4.pdf)

  • Listy (Lists) przechowują wiele wartości w jednej strukturze.
  • Operacje na listach: dodaj (add), usuń, wybierz element, długość listy.
  • TinyDB zapisuje dane trwale w pamięci telefonu - przetrwają zamknięcie aplikacji.
  • TinyDB.StoreValue zapisuje, TinyDB.GetValue odczytuje.
  • Typowe zastosowania: wyniki, ustawienia, postęp użytkownika.
Bez TinyDB dane znikają po zamknięciu aplikacji - to najważniejszy sposób trwałego zapisu.
Przechowywanie danych: Listy w RAM oraz baza TinyDB 1. Listy (Pamięć RAM) Lista: [1: "Kowalski", 2: "Nowak", 3: "Wiśniewski"] • add items to list, select item, remove item Cecha pamięci RAM: • Dane znikają po zamknięciu aplikacji! • Szybki dostęp w trakcie działania Store Get 2. Baza TinyDB (Pamięć Flash) Tag (Klucz): "NajlepszyWynik" ValueToStore: 999 Cecha TinyDB: • Trwały zapis w pamięci telefonu • Dane zostają po wyłączeniu smartfona! TinyDB przechowuje dane w modelu klucz-wartość (Tag - Value), zapewniając trwałość ustawień i rekordów.
Slajd 49/55
Wiele ekranów - Screen

Budowa aplikacji wieloekranowej (za pam4.pdf)

  • Aplikacja może mieć kilka ekranów (Screen1, Screen2, ...).
  • Nowy ekran dodajemy w oknie Designer: Add Screen.
  • Przechodzimy między ekranami metodą open another screen (z nazwą ekranu).
  • Do poprzedniego ekranu wracamy metodą close screen.
  • Każdy ekran ma własny zestaw komponentów i bloków.
Przykład: ekran główny z menu prowadzi do ekranu gry i ekranu wyników.
Aplikacje wieloekranowe – Przełączanie Screenów Screen1 (Ekran główny) Menu Główne Graj w grę Zawsze startuje jako pierwszy open another screen close screen ScreenGra (Ekran rozgrywki) Plansza gry Powrót do menu Ważne: Zawsze zamykaj ekrany metodą close screen, aby nie przepełnić pamięci RAM telefonu!
Slajd 50/55
Typowe błędy początkujących

Na co uważać w App Inventor

  • Używanie polskich znaków i spacji w nazwach projektów, komponentów, plików.
  • Brak połączenia telefonu i komputera w tej samej sieci Wi-Fi.
  • Zapominanie o zapisie projektu (Save project).
  • Mylenie projektu (.aia) z aplikacją (.apk).
  • Pętle nieskończone i źle skonstruowane warunki.
  • Przekroczenie limitu rozmiaru projektu (ok. 30 MB w serwisie ai2.appinventor.mit.edu).
Większość problemów wynika z drobiazgów - czytaj komunikaty i testuj po każdej zmianie.
Typowe błędy i pułapki początkujących 1. Spacje i polskie znaki • Błąd w nazwach projektów i plików • Powoduje awarię kompilacji APK Zamiast: "Mój Quiz" -> "MojQuiz" 2. Różne podsieci Wi-Fi • Telefon na LTE, komputer na kablu • AI Companion nie nawiąże sesji Rozwiązanie: to samo Wi-Fi lub USB 3. Mylenie .aia z .apk • Próba instalacji .aia na telefonie • .aia to projekt, .apk to instalator Do instalacji zawsze używaj Build! 4. Brak zapisu wersji • Ryzykowna przebudowa bez kopii • Brak możliwości powrotu do działającej Stosuj: Save project as przed zmianami Unikanie tych 4 błędów eliminuje 95% problemów na laboratoriach!
Slajd 51/55
Ograniczenia App Inventor

Czego nie zrobimy w AI2 (za pam4.pdf)

  • Limit rozmiaru projektu: ok. 30 MB w serwisie ai2.appinventor.mit.edu.
  • Brak dostępu do wszystkich funkcji systemu i wszystkich czujników.
  • Ograniczone możliwości grafiki 3D i zaawansowanych animacji.
  • Wydajność niższa niż aplikacji pisanych w Kotlin czy Javie.
  • Brak pełnej kontroli nad wyglądem interfejsu.
AI2 to doskonały start i narzędzie dydaktyczne, ale duże, profesjonalne projekty wymagają klasycznego programowania.
Ograniczenia środowiska MIT App Inventor Limit rozmiaru projektu • Maksymalnie ok. 30 MB na serwerze • Ograniczenie na duże pliki wideo/audio Zalecenie: kompresja mediów Wydajność obliczeniowa • Interpretowane środowisko blokowe • Brak wsparcia dla zaawansowanej grafiki 3D Nie nadaje się do gier AAA Ograniczone API sprzętowe • Dostęp tylko do popularnych sensorów • Brak bezpośredniego dostępu do NDK/C++ Możliwość rozszerzeń przez Extensions (.aix) Kolejny krok inżynierski • Do projektów komercyjnych: • Android Studio + Kotlin / Java AI2 stanowi idealny fundament myślenia
Slajd 52/55
Dobre praktyki pracy w AI2

Jak pracować efektywnie

  • Nadawaj opisowe nazwy komponentom i zmiennym (btnStart, wynik, punkty).
  • Komentuj złożone fragmenty bloków.
  • Buduj aplikację małymi krokami i testuj po każdej zmianie.
  • Utrzymuj porządek na polu roboczym (zwijanie, grupowanie).
  • Rób kopie zapasowe projektu (.aia).
  • Dziel logikę na procedury.
Kodeks dobrych praktyk deweloperskich w AI2 1. Konwencja nazewnictwa Źle: Button1, Label5, TextBox2 Dobrze: btnStart, lblWynik, txtImie Prefiksy ułatwiają programowanie w Blocks 2. Komentowanie i porządek • Dodawaj komentarze do wzorów • Zwijaj sprawdzone bloki (Collapse) • Używaj opcji: Clean up Blocks 3. Metoda małych kroków • Buduj aplikację etapami • Testuj w Companion po każdej zmianie Łatwiej wykryć błąd w 1 nowym klocku 4. Wersjonowanie i kopie • Zapisuj wersje: app_v1, app_v2 • Pobieraj plik .aia na dysk Zabezpieczenie przed utratą efektów pracy
Slajd 53/55
Podsumowanie prezentacji 2

Co zapamiętać

  • App Inventor to środowisko do tworzenia aplikacji Android bez pisania kodu.
  • Składa się z serwisu WWW, emulatora i aplikacji AI Companion.
  • Designer buduje interfejs, Blocks programuje działanie.
  • Bloki rozróżniamy po kolorach i kształtach; łączymy je w logiczną całość.
  • Podstawowe pojęcia: zmienne, warunki, pętle, procedury, zdarzenia, metody.
  • Aplikację testujemy na telefonie lub emulatorze, a na koniec generujemy instalacyjny plik .apk.
Mamy pełny obraz narzędzia - w prezentacji 3 przejdziemy do konkretnych, działających przykładów.
Synteza wiedzy modułu App Inventor 1 Ekosystem chmurowy ai2.appinventor.mit.edu • Dostęp przez przeglądarkę WWW • Współpraca: Companion + aiStarter • Autoryzacja przez konto Google 2 Designer & Blocks Podział na UI i Logikę • Designer: Palette, Viewer, Properties • Blocks: sterowanie zdarzeniami • Kompozycja wizualna bez kodu 3 Algorytmy blokowe Kluczowe konstrukcje • Zmienne globalne i lokalne • Warunki if-else, pętle for/while • Procedury wielokrotnego użycia 4 Wdrażanie i dane Formaty .aia oraz .apk • Archiwizacja projektu (.aia) • Kompilacja aplikacji Android (.apk) • Trwałość danych w TinyDB
Slajd 54/55
Pytania kontrolne i zadania

Sprawdź się

  1. Wymień trzy elementy App Inventor i opisz ich rolę.
  2. Do czego służy okno Designer, a do czego okno Blocks?
  3. Jaka jest różnica między plikiem .aia a .apk?
  4. Wyjaśnij różnicę między get a set oraz między zmienną globalną a lokalną.
  5. Podaj przykład zdarzenia i wywoływanej przez nie metody.
  6. Zadanie: zbuduj aplikację z przyciskiem i etykietą, która po kliknięciu wyświetla powitanie.
Pytania kontrolne – Sprawdzenie wiedzy 1 Jaka jest fundamentalna różnica między plikiem .aia a plikiem .apk? Odp: .aia to kod źródłowy z klockami do edycji; .apk to gotowy instalator na telefon. 2 Do czego służą 4 panele okna Designer? Odp: Palette (przybornik), Viewer (ekran), Components (drzewo), Properties (cechy). 3 Czym różni się zmienna globalna od zmiennej lokalnej? Odp: Globalna działa w całym programie; lokalna tylko wewnątrz danego bloku/procedury. 4 W jaki sposób klocki zapobiegają błędom składniowym (Syntax Errors)? Odp: Kształty złączy mechanicznie pozwalają spinać tylko pasujące typy i instrukcje.
Slajd 55/55
Zakończenie prezentacji 2

Dziękuję za uwagę

  • Poznaliśmy środowisko App Inventor i jego możliwości.
  • Wiemy, jak projektować interfejs i programować blokami.
  • Umiemy testować i budować aplikacje.
  • W prezentacji 3 przejdziemy do konkretnych przykładów aplikacji.

Literatura i materiały: serwis ai2.appinventor.mit.edu; appinventor.org.

Zakończenie modułu – Podsumowanie i zapowiedź ★ Prezentacja 2 ukończona! Opanowano obsługę środowiska, projektowanie UI oraz logikę blokową. Gratulacje! Zapowiedź kolejnej części Prezentacja 3: Przykłady • Praktyczne aplikacje krok po kroku • Gra zliczająca kliknięcia (Mole Mash) • Odtwarzacz dźwięków i syntezator • Przelicznik walut i kalkulator Źródła wiedzy: ai2.appinventor.mit.edu Materiały: appinventor.org