Zmiany
/* Cele: */
===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.
'''<ol><li>Rozpoczęcie pracy</li>'''
Wejdźmy na stronę [http://appinventor.mit.edu 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.
Nastąpi teraz automatyczne przejście do okna budowy aplikacji.
'''<li>Budowanie kalkulatora - dodawanie komponentów</li>'''
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.
za pomocą tego komponentu użytkownik będzie miał możliwość wpisania liczby, którą chce dodać do liczby 5.</li></ol>
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:s1-4.png]]
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.
'''<li>Budowanie kalkulatora - konfiguracja komponentów</li>'''
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:s1-5.png]]
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:s1-6.png]]
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:s1-7.png]]
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:s1-8.png]]
'''<li>Budowanie kalkulatora - programowanie aplikacji</li>'''
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:s1-9.png]]
Naszą instrukcję można opisać w następujący sposób:
Kiedy przycisk Dodaj zostanie wciśnięty, to w polu Wynik pojawi się tekst, który jest sumą liczby 5 oraz liczby podanej przez użytkownika w polu Liczba.
Przejdźmy więc do wykonania instrukcji:
<ol><li>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'''.</li>
<li>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.</li>
<li>Teraz kliknijmy na kategorię '''Math''' w grupie '''Built-in''' po lewej stronie. Do naszego programu dołączmy polecenie '''Dodawanie
[ ] + [ ]''' (6).</li>
<li>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.</li>
<li>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.</li></ol>
[[Plik:s1-10.png]]
'''<li>Podsumowanie</li>'''
[[Plik:s1-11.png|right]]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]'''. 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.
'''Aplikacja gotowa'''
