Tekst źródłowy strony Kalkulator, część 1

[[Category:Scenariusze MIT App Inventor]] [[Category:Mistrzowie Kodowania]]
== Cele ==
Poznamy podstawowe operacje w programie App Inventor poprzez stworzenie prostego kalkulatora, który będzie dodawał liczbę 5 do podanej przez nas liczby. W ten sposób zaznajomimy się z podstawami programu App Inventor 2 w praktyce, zarówno pod kątem tworzenia interfejsu, jak i konstruowania instrukcji programu. 

== Kalkulator, część 1 ==

=== Rozpoczęcie pracy ===
Wejdźmy na stronę http://appinventor.mit.edu i wybierzmy '''Create,''' by uruchomić App Inventor. Następnie przejdźmy do zakładki '''My Projects (1),''' gdzie znajdziemy wszystkie nasze projekty - wystarczy tylko zalogować się na odpowiednie konto Google. W celu rozpoczęcia pracy nad nowym projektem kliknijmy na '''Start new project (2),''' i wpiszmy w oknie jego nazwę, np. '''Kalkukator_1.'''
[[Plik:kal_1_opt.jpeg|center]]
Nastąpi teraz automatyczne przejście do okna budowy aplikacji.

=== Budowanie kalkulatora - dodawanie komponentów ===
Upewnijmy się, że jesteśmy w trybie '''Design.''' Jeśli tak, chwyćmy teraz element '''Label''' (etykieta) i przeciągnijmy go do obszaru '''Viewer.''' Możemy zauważyć, że po prawej stronie, na liście komponentów pojawił się również element '''Label1.'''
Komponent Label będzie nam potrzebny do wyświetlania tekstu na ekranie.
[[Plik:kal_2_opt.jpeg|center]]
Po dodaniu etykiety w poprzednim kroku, dołóżmy teraz trzy kolejne komponenty. Są nimi: przycisk '''(1),''' kolejna etykieta '''(2)''' i pole tekstowe '''(3).''' Podczas dodawania komponentów zwracajmy uwagę na niebieską linię, pokazującą, w którym miejscu znajdzie się nowy komponent. Po dodaniu wszystkich trzech elementów, ułóżmy je tak, jak zostały rozmieszczone na poniższej ilustracji:
[[Plik:kal_3_opt.jpeg|center]]

# '''Button''' (przycisk). Ten komponent jest wykorzystywany do uruchomienia określonej akcji. W przypadku naszego kalkulatora wciśnięcie przycisku wywoła akcję dodania liczby 5.
# '''Label''' (etykieta). Ten element służy do wyświetlania określonych informacji na ekranie. W naszym kalkulatorze Label1 będzie wyświetlał komunikat o tym, że będziemy dodawać liczbę 5, zaś Label2 posłuży nam do wyświetlenia wyniku dodawania. Zatem Label1 będzie podawał stale tę samą informację, zaś Label2, po każdym naciśnięciu przycisku, wyświetli wynik dodawania.
# '''Text Box''' (pole tekstowe). Ten komponent pozwala użytkownikowi aplikacji wprowadzać dane. W naszej aplikacji za pomocą tego komponentu użytkownik będzie miał możliwość wpisania liczby, którą chce dodać do liczby 5.

Teraz zmieńmy nazwy naszych komponentów, na takie, które będą zgodne z ich przeznaczeniem. Dzięki temu będzie nam łatwiej posługiwać się wszystkimi komponentami w obrębie aplikacji. Przy czterech komponentach być może nie jest to konieczne i zachowanie domyślnych nazw nie sprawiłoby problemu, jednak przy dużych aplikacjach, kiedy wszystkich komponentów jest kilkadziesiąt i więcej, poprawne nazywanie poszczególnych elementów pozwala utrzymać porządek w projekcie. Warto więc wyrabiać w sobie ten nawyk od początku.
[[Plik:kal_4_opt.jpeg|center]]
Nazwy komponentów możemy zmienić poprzez wybranie odpowiedniego elementu w oknie '''Components''' oraz kliknięcie przycisku '''Rename (1).''' Zmieńmy je więc na takie, jakie widoczne są na powyższej ilustracji.

=== Budowanie kalkulatora - konfiguracja komponentów ===
Teraz przejdźmy do konfiguracji niektórych komponentów, by działały zgodnie z naszymi pierwotnymi założeniami. Zacznijmy od komponentu o nazwie '''Początek_tekstu.'''
[[Plik:kal_5_opt.jpeg|center]]
Zaznaczmy nasz komponent i w oknie '''Properties,''' w polu '''Text''' wpiszmy '''5 dodać.''' Ten tekst będzie wyświetlany w aplikacji
w miejscu naszej etykiety. W ten sam sposób zmieńmy również tekst widoczny na naszym przycisku. Kliknijmy więc na przycisk '''Dodaj''' i w polu '''Text''' wpiszmy '''Dodaj (2),''' aby na przycisku w aplikacji znalazł się ten właśnie tekst.
[[Plik:kal_6_opt.jpeg|center]]
Kolejny krok to zmiana właściwości komponentu '''Liczba.''' Zaznaczmy go i w oknie '''Properties''' zatwierdźmy pozycję '''Numbers Only.''' Oznacza to, że użytkownik w tym polu będzie mógł wprowadzić tylko wartość liczbową, bez liter i innych znaków. 
[[Plik:kal_7_opt.jpeg|center]]
Ostatnią czynnością, jaką należy wykonać, jest zmiana tekstu dla
etykiety '''Wyniki.''' Zaznaczmy ją i w polu '''Text''' wpiszmy '''Tu pojawi się wynik.''' Po zakończeniu wszystkich powyższych kroków, w obszarze
Viewer dostrzeżemy, że we wszystkich komponentach w aplikacji zmieniły się wyświetlane teksty.
[[Plik:kal_8_opt.jpeg|center]]

=== Budowanie kalkulatora - programowanie aplikacji ===
Po tym, jak zakończyliśmy projektowanie interfejsu aplikacji, możemy zająć się stworzeniem odpowiedniego programu. Przejdźmy zatem do trybu '''Blocks''' i spójrzmy, w jaki sposób zbudować program widoczny na poniższej ilustracji:
[[Plik:kal_9_opt.jpeg|center]]
Naszą instrukcję można opisać w następujący sposób:

<span style="color: Orange"> Kiedy przycisk Dodaj zostanie wciśnięty, to </span> <span style="color: Green"> w polu Wynik pojawi się tekst,</span><span style="color: Blue"> który jest sumą liczby 5 oraz liczby podanej przez użytkownika w polu Liczba.</span> 

Przejdźmy więc do wykonania instrukcji:
# W menu bloków po lewej stronie, w grupie Screen1, odszukajmy komponent '''Dodaj.''' Kliknijmy na niego, by otworzyć menu z właściwymi dla tego komponentu poleceniami. Wybierzmy '''When [Dodaj].Click''' i przeciągnijmy ten element w prawo do obszaru '''Viewer.'''
# Teraz w menu bloków po lewej stronie kliknijmy na '''Wyniki.''' W otwartym menu poleceń wybierzmy '''set [Wynik].Text''' i przeciągnijmy go do obszaru '''Viewer,''' łącząc z poleceniem 1 tak, jak na powyższej ilustracji.
# Teraz kliknijmy na kategorię '''Math''' w grupie '''Built-in''' po lewej stronie. Do naszego programu dołączmy polecenie '''Dodawanie [ ] + [ ] (6).'''
# Nadal będąc w kategorii '''Math,''' do pierwszego składnika dodawania dodajmy element liczbowy '''(7)''' i wpiszmy w nim wartość '''5.''' Warto zauważyć, że w puste pola wewnątrz bloczków możemy wstawiać kolejne bloczki lub wpisywać tylko pojedyncze wartości tekstowe lub liczbowe.
# W tym momencie przejdźmy ponownie do grupy '''Screen1''' i tam wybierzmy komponent '''Liczba.''' W otwartym menu poleceń wybierzmy blok '''[Liczba].[Text]''' i wstawmy go jako drugi składnik dodawania.
[[Plik:kal_10_opt.jpeg|center]]

=== Podsumowanie ===
Po kliknięciu przycisku Dodaj (czyli polecenie '''when [Dodaj].Click''') w miejscu komponentu Wynik zostanie wyświetlona suma dodawania liczby 5 oraz wartości, którą wpisaliśmy w pole Liczba. Zatem naciśnięcie przycisku Dodaj wywoła polecenie '''set[Wynik].[Text] = 5 + [Liczba].[Text].'''
[[Plik:kal_11_opt.jpeg|center]]
Na ekranie smartfona powinniśmy teraz widzieć to, co na ilustracji po prawej stronie. Na tym przykładzie do liczby 5 została dodana liczba 23, co dało sumę 28.<br />
'''Aplikacja gotowa.'''