Scenariusz projektu

Kolejnym twoim zadaniem będzie zaprojektowanie automatu sprzedającego bilety, np. komunikacji miejskiej. Zwykle takie automaty umożliwiają wybór rodzaju biletu, liczbę kupowanych biletów, formę zapłaty (kartą płatniczą lub gotówką), a w przypadku płacenia gotówką wydają resztę. Podczas kupna biletu automat przeprowadza kupującego przez kolejne kroki, od wyboru biletów po płatność.

Ćwiczenie 1

Odwiedź stronę internetową przedsiębiorstwa komunikacji miejskiej twojego miasta lub (jeśli mieszkasz w mniejszej miejscowości) najbliższego większego miasta z taką komunikacją. Zapoznaj się z obowiązującym systemem biletowym. Wybierz co najmniej dwa rodzaje biletów, które wykorzystasz w swojej aplikacji. Jeśli są na stronie zdjęcia – wzorce biletów, pobierz je.

Na poniższych obrazkach znajdziesz wzorce kilku przykładowych biletów komunikacji miejskiej w Warszawie pobrane ze strony http://www.ztm.waw.pl według stanu na wiosnę 2015 roku.

RuvERJynM4Icn1

Fotografia przedstawiająca bilet 20-minutowy — Źródło: ZTM Warszawa, tylko do użytku edukacyjnego na epodreczniki.pl.

R12l1CPKW92Mg1

Fotografia przedstawiająca bilet 75-minutowy — Źródło: ZTM Warszawa, tylko do użytku edukacyjnego na epodreczniki.pl.

RCQJNyYaLeBx41

Fotografia przedstawiająca bilet 90-minutowy — Źródło: ZTM Warszawa, tylko do użytku edukacyjnego na epodreczniki.pl.

R1OP5LBoFXGXC1

Fotografia przedstawiająca bilet 20-minutowy ulgowy — Źródło: ZTM Warszawa, tylko do użytku edukacyjnego na epodreczniki.pl.

RgwVoZLYgzmlt1

Fotografia przedstawiająca bilet 75-minutowy ulgowy — Źródło: ZTM Warszawa, tylko do użytku edukacyjnego na epodreczniki.pl.

Rt0iTktK0lZ0f1

Fotografia przedstawiająca bilet 90-minutowy ulgowy — Źródło: ZTM Warszawa, tylko do użytku edukacyjnego na epodreczniki.pl.

Ćwiczenie 2

Zaplanuj, jakie działania będą wykonywane na kolejnych ekranach automatu (np. wybór rodzaju biletu – spośród przykładowych biletów można wybierać ze względu na strefę lub pomiędzy biletami normalnymi i ulgowymi, wybór liczby kupowanych biletów, itd.). Załóż, że płatność będzie dokonywana tylko gotówką i automat będzie wydawał resztę.

Ćwiczenie 3

Zaprojektuj wygląd kolejnych ekranów automatu. Zastanów się, które elementy będą duszkami, a które tylko rysunkami kolejnych teł.

Elementy, w które będzie można kliknąć i będą powodowały określony wybór, powinny być duszkami. Pozostałe elementy graficzne mogą być narysowane jako tło kolejnych ekranów automatu biletowego.
Poniżej przykładowy wygląd kolejnych ekranów, zaprojektowany zgodnie z odpowiedzią do zadania 2. Najlepiej, jak zaprojektujesz własne ekrany zgodnie z twoją propozycją rozwiązania zadania 2.
Ekran 1: Wybór pomiędzy biletem ulgowym i normalnym. Przyciski Ulgowy i Normalny będą duszkami.

R113b1irIu5Vw1

Ilustracja przedstawiająca ekran: Jaki bilet chcesz kupić? — Źródło: Janusz Wierzbicki, Maciej Borowiecki, licencja: CC BY 3.0.

Ekran 2: Wybór rodzaju biletu spośród ulgowych lub normalnych (zgodnie z wcześniejszym wyborem). Przykładowy ekran po wyborze biletu ulgowego. Obrazki biletów będą duszkami.

R1POujryqvYQJ1

Ilustracja przedstawiająca ekran: Wybierz rodzaj biletu — Źródło: ZTM Warszawa, tylko do użytku edukacyjnego na epodreczniki.pl.

Ekran 3: Wybór liczby biletów. Przykładowy ekran po wyborze biletu ulgowego 20 minutowego. Przycisk Kupuję oraz przyciski strzałek do zmiany liczby biletów powinny być duszkami. W obrazek biletu nie można już klikać, więc może to być element tła – np. przystemplowany wizerunek duszka. Ponieważ będzie można zmieniać liczbę kupowanych biletów, wygodnie będzie, żeby ich liczba była duszkiem.

RweIP52ooTkUp1

Ilustracja przedstawiająca ekran: Wybierz liczbę biletów — Źródło: ZTM Warszawa, tylko do użytku edukacyjnego na epodreczniki.pl.

Ekran 4: Obliczenie kwoty do zapłaty oraz oczekiwanie na zapłatę. Przykładowy ekran po wybraniu 3 biletów ulgowych 20 minutowych.

RNPAMnrv1AJol1

Ilustracja przedstawiająca ekran z duszkiem i oknem do wpisania kwoty — Źródło: Janusz Wierzbicki, Maciej Borowiecki, licencja: CC BY 3.0.

Ekran 5: Ewentualne wydanie reszty. Przykładowy ekran po wprowadzeniu kwoty 6 zł (przy zakupie 3 biletów ulgowych 20 minutowych). Zostanie wydane 90 gr reszty, np. moneta 50 gr i dwie monety 20 gr. Obrazy monet wygodnie będzie przedstawić jako duszki, można je znaleźć na stronie Narodowego Banku Polskiego http://www.nbp.pl.

R1EGJsbpLVfoj1

Ilustracja przedstawiająca ekran z duszkami Monety — Źródło: NBP, tylko do użytku edukacyjnego na epodreczniki.pl.

W przykładowej aplikacji można maksymalnie wybrać 9 biletów, reszta wydawana jest zawsze monetami. Jej działanie można obejrzeć na poniższym filmie.

R8STKF4QFoH1B1

Źródło: NBP, ZTM Warszawa, Janusz Wierzbicki, Maciej Borowiecki, tylko do użytku edukacyjnego na epodreczniki.pl.

Dalszych kilka podrozdziałów opisuje kolejne kroki tworzenia i oprogramowania interfejsu przykładowej aplikacji według przedstawionego powyżej scenariusza. Pamiętaj, że tworzysz aplikację podobną, ale według własnego scenariusza, więc twoje skrypty sterujące duszkami i ekranami automatu będą prawdopodobnie różnić się od przykładowych.
Zwróć szczególną uwagę na kilka ostatnich podrozdziałów, w których duszka – kotka (lub inną postać zaproponowaną przez ciebie) czeka ważne zadanie. Oblicza należność do zapłaty oraz kwotę reszty. W tym celu musi wyznaczyć liczbę monet poszczególnych nominałów jako resztę, którą należy wydać. Algorytm wyznaczenia reszty w twojej aplikacji będzie prawdopodobnie analogiczny jak w przykładowej.

iwePopYOpl_d5e409

Przygotowujemy tła i duszki

Ćwiczenie 4

Przygotuj wszystkie potrzebne duszki oraz tła do twojego projektu. Część duszków znajdziesz w galerii Scratcha, inne pobierz z internetu (pamiętaj o przestrzeganiu praw autorskich) lub zaprojektuj samodzielnie w edytorze graficznym. Pamiętaj, że duszek może mieć kilka kostiumów, które mogą być wykorzystywane nie tylko do animacji.

W przykładowej aplikacji występują następujące duszki:

Przyciski. Łącznie są trzy duszki‑przyciski Ulgowy, Normalny i Kupuję. Zostały zaprojektowane w edytorze graficznym.
Bilety. Łącznie jest sześć biletów. Ponieważ równocześnie są wyświetlane maksymalnie trzy bilety (same ulgowe lub same normalne), reprezentowane są przez trzy duszki, a każdy z nich posiada dwa kostiumy (normalny i ulgowy). Wzorce biletów zostały pobrane ze strony http://www.ztm.waw.pl.
Strzałki do wyboru liczby kupowanych biletów. Dwa duszki z galerii Scratcha.
Cyfry podające liczbę kupowanych biletów. Duszek z dziewięcioma kostiumami z galerii Scratcha kolejno reprezentującymi cyfry od 1 do 9.
Standardowy duszek kotek podający kwotę do zapłaty i oczekujący na zapłatę.
Monety. Jeden duszek z kolejnymi kostiumami reprezentującymi monety 5 zł, 2 zł, 1zł, 50 gr, 20 gr, 10 gr. Wzorce monet zostały pobrane ze strony http://www.nbp.pl.

Łącznie więc w przykładowym projekcie jest 11 duszków. Poniżej możesz pobrać duszki (przyciski, bilety, monety) z przykładowej aplikacji.

RebnwcmGNb6No1

Źródło: NBP, ZTM Warszawa, Janusz Wierzbicki, Maciej Borowiecki, tylko do użytku edukacyjnego na epodreczniki.pl.

R1WtRY7NJ5iR81

Ilustracja przedstawiająca duszki w projekcie: Automat biletowy — Duszki w projekcie automat biletowy

R1UfF239qaBv71

Ilustracja przedstawiająca kostiumy duszka biletu 20min — Kostiumy duszka biletu 20min

Rl2J9tk7KgN9F1

Ilustracja przedstawiająca kostiumy duszka: Cyfry — Kostiumy duszka Cyfry

RJ2vgkrf6gCDA1

Ilustracja przedstawiająca kostiumy duszka: Monety — Kostiumy duszka Monety

Tła sceny są bardzo proste. Trzy tła z napisami „Jaki bilet chcesz kupić?”, „Wybierz rodzaj biletu:”, „Wybierz liczbę biletów:” oraz czwarte puste tło, na którym duszek pobiera opłatę oraz wydaje resztę.

RQ77xVKqnobcp1

Ilustracja przedstawiająca trzy tła sceny — Źródło: Janusz Wierzbicki, Maciej Borowiecki, licencja: CC BY 3.0.

Zapewne w swojej aplikacji zaprojektujesz ciekawsze tła.

Ćwiczenie 5

Załaduj do projektu Scratcha przygotowane duszki oraz tła. Ustaw, że domyślnie duszki są niewidoczne. Dla każdego z nich przygotuj także skrypt, uruchamiany po kliknięciu zielonej flagi, ukrywający duszka. Nawet jak domyślnie wszystkie duszki są ukryte, to niektóre mogą być widoczne po poprzednim wykonaniu aplikacji (reszta w postaci monet, niektóre duszki po przerwaniu działania aplikacji przyciskiem stop).

iwePopYOpl_d5e512

Wybieramy rodzaj biletu

Pierwszy ekran przykładowej aplikacji dokonuje tylko wyboru pomiędzy biletem ulgowym i normalnym. Na scenie widoczne są dwa duszki – przyciski Ulgowy i Normalny. Po kliknięciu w jeden z tych przycisków następuje przejście do następnego ekranu – wyboru rodzaju biletu spośród ulgowych lub normalnych. Powinien w związku z tym zostać nadany komunikat informujący pozostałe duszki o wyborze biletu ulgowego lub normalnego, aby mogły być podjęte następne działania. Jeśli jeszcze nie umiesz korzystać z komunikatów kliknij tutajiwePopYOpl_d1111e271tutaj.

Ćwiczenie 6

Po uruchomieniu aplikacji zieloną flagą powinien być widoczny pierwszy ekran automatu biletowego. Przygotuj odpowiedni skrypt dla sceny wybierający pierwsze tło i czyszczący scenę.

Ćwiczenie 7

Zaplanuj i utwórz skrypty dla przycisku Ulgowy. Ten duszek jest widoczny tylko na pierwszym ekranie, więc może mieć stałą pozycję na scenie. Pamiętaj, że ma zostać ukryty nie tylko po kliknięciu w niego, ale także przy wyborze przycisku Normalny.

Ćwiczenie 8

Utwórz skrypty dla przycisku Normalny. Będą one analogiczne, jak dla poprzedniego przycisku. Możesz je skopiować przeciągając skrypty i upuszczając na drugim duszki. Pamiętaj o nadaniu innego komunikatu, np. normalny.

Na kolejnym ekranie (po otrzymaniu komunikatu normalny lub ulgowy) jest wyświetlana grupa trzech biletów do wyboru. Każdy z nich ma dwa kostiumy, wybór kostiumu zależy od odebranego komunikatu (normalny lub ulgowy). Wybrany bilet zmienia swoją pozycję na następnym ekranie, więc należy programowo ustawiać jego pozycję. Wygodnie będzie także zapamiętać wybór biletu w zmiennej. Niech wartości od 1 do 3 określają bilety normalne, a wartości od 4 do 6 odpowiadające im bilety ulgowe.

Ćwiczenie 9

Utwórz zmienną do pamiętania wybranego biletu, dostępną dla wszystkich duszków. Nazwij ją np. rodzaj.

Ćwiczenie 10

Zastanów się, jakie czynności należy przewidzieć dla duszka – biletu. Staraj się tak je zaplanować, aby były uniwersalne niezależnie od rodzaju biletu.

Ćwiczenie 11

Przygotuj skrypty zgodnie z rozwiązaniem poprzedniego zadania.

Ćwiczenie 12

Skopiuj skrypty dla pozostałych biletów i dokonaj niezbędnych poprawek: przypisania odpowiedniej wartości zmiennej rodzaj, położenia na scenie oraz wyboru kostiumu.

iwePopYOpl_d1111e271

iwePopYOpl_d5e684

Wybieramy liczbę biletów

Na kolejnym ekranie (po otrzymaniu komunikatu wybrano bilet) określamy liczbę biletów. Na scenie dostępne są duszki – strzałki do zmiany liczby kupowanych biletów, duszek reprezentujący wybraną liczbę biletów oraz przycisk Kupuję.

Ćwiczenie 13

Zaplanuj działania dla duszków - strzałek.

Ćwiczenie 14

Przygotuj skrypty dla obu strzałek zgodnie z rozwiązaniem poprzedniego zadania.

Ćwiczenie 15

Zaplanuj działania dla duszka reprezentującego liczbę kupowanych biletów.

Ćwiczenie 16

Przygotuj skrypty dla duszka reprezentującego liczbę biletów zgodnie z rozwiązaniem poprzedniego zadania.

Ćwiczenie 17

Zaplanuj działania i przygotuj skrypty dla przycisku Kupuję.

iwePopYOpl_d5e797

Projektujemy struktury danych

Ponieważ automat biletowy ma nie tylko umożliwić wybranie rodzaju biletu, ich liczby, ale także obliczyć wartość kupowanych biletów oraz wydać resztę, potrzebne będą informacje dotyczące cen poszczególnych biletów, nominałów monet, liczby wydawanych poszczególnych monet. Ponieważ w przykładowej aplikacji występuje 6 różnych biletów, mamy także 6 nominałów monet, niewygodne będzie pamiętanie tych informacji w pojedynczych zmiennych liczbowych. Lepiej utworzyć i zapamiętać te informacje na listach. Więcej informacji dotyczących list znajdziesz tutajiwePopYOpl_d1111e397tutaj.
Ceny biletów lepiej jest pamiętać jako liczby naturalne, a więc wyrażone w groszach. Wynika to z faktu, że liczby całkowite są w komputerze pamiętane dokładnie, a liczby rzeczywiste w przybliżeniu. Łatwiej będzie prowadzić obliczenia. Analogicznie, nominały monet zapamiętamy w tych samych jednostkach, czyli w groszach (np. 1 zł jako 100 groszy). Więcej o reprezentacji liczb całkowitych i rzeczywistych dowiesz się tutajiwePopYOpl_d1111e427tutaj.

Ćwiczenie 18

Utwórz listy do pamiętania cen poszczególnych biletów, nominałów monet oraz liczby wydawanych monet o poszczególnych nominałach.

Listę cen biletów zaplanuj tak, aby najpierw były bilety jednego rodzaju, np. normalne, a potem odpowiadające im ulgowe.
Listę z nominałami monet przygotuj uporządkowaną malejąco od największego do najmniejszego nominału.
Lista z liczbami monet do wydania jako reszta powinna być wypełniona wartościami 0 (nie wiemy jeszcze, czy i jaką resztę trzeba będzie wydać).

Utwórz bloki inicjalizujące listy. Pamiętaj, że możesz mieć inną liczbę biletów i ich rodzajów, zgodnie z twoim projektem.
Zastanów się, na jakie zdarzenie oraz dla jakiego obiektu (którego duszka lub sceny) wywołać bloki. Jeśli chcesz sobie przypomnieć informacje o tworzeniu własnych bloków, kliknij tutajiwePopYOpl_d1111e449tutaj.

iwePopYOpl_d1111e397

iwePopYOpl_d1111e427

iwePopYOpl_d1111e449

iwePopYOpl_d5e989

Duszek oblicza należność i prosi o zapłatę

Na kolejnym ekranie (po otrzymaniu komunikatu kupuję) należy pokazać duszka, który nas rozliczy. Powinien on najpierw obliczyć wartość kupowanych biletów, następnie poprosić o zapłatę. Wygodnie zapamiętać obliczoną wartość w zmiennej, w tym celu utwórz zmienną np. o nazwie kwota do zapłaty.

Ćwiczenie 19

Zapisz w postaci listy kroków działania dla duszka rozliczającego kupowane bilety. Jeśli wystąpi konieczność wydania reszty nadaj komunikat wydaj resztę.
Wskazówka:
Cena wybranego biletu jest pamiętana w elemencie o numerze rodzaj listy ceny biletów, a liczba kupowanych biletów to numer kostiumu duszka Cyfry. Pamiętaj, że kwoty są pamiętane w groszach oraz kupujący może podać dokładną kwotę, mniejszą lub większą.

Ćwiczenie 20

Utwórz skrypt uruchamiany po otrzymaniu komunikatu kupuję według algorytmu z rozwiązania poprzedniego zadania.
Wskazówka:
Do wyświetlenia napisu złożonego z tekstu i wartości zmiennej użyj polecenia połącziwePopYOpl_d1111e498połącz.

iwePopYOpl_d1111e498

iwePopYOpl_d5e1072

Duszek oblicza resztę

Kwota do wydania reszty to różnica pomiędzy kwotą wprowadzoną przez kupującego a kwotą do zapłaty.
Możesz założyć, że twój automat ma nieograniczoną liczbę monet każdego nominału.

Ćwiczenie 21

Zastanów się i spróbuj podać algorytm wyliczenia liczby monet poszczególnych nominałów, jakie ma wydać automat, jako resztę z wprowadzonej przez kupującego kwoty. Przedyskutuj swoje propozycje z kolegami i koleżankami, spróbujcie podać więcej niż jedną propozycję rozwiązania.

Ćwiczenie 22

Zapisz w postaci listy kroków algorytm wydawania reszty minimalizujący liczbę wydawanych monet. Taką strategię postępowania, w której w najbliższym kroku bierzemy to co uważamy za najlepsze (w tym wypadku monetę o największym nominale mniejszym od kwoty, która pozostała do wydania) nazywamy metodą zachłannąiwePopYOpl_d1111e536metodą zachłanną.

Ćwiczenie 23

Utwórz nowy blok dla duszka wydającego resztę zgodnie z algorytmem z poprzedniego zadania. Parametrem bloku będzie kwota reszty do wydania wyrażona w groszach. Nie musisz zerować listy reszta, zostało już to zrobione podczas tworzenia listy (po kliknięciu w zieloną flagę).
Wskazówka:
Pamiętaj, że w bloku Scratcha nie można zmieniać wartości parametru, więc musisz utworzyć pomocniczą zmienną. Do obliczenia części całkowitej liczby możesz wykorzystać funkcję podłogaiwePopYOpl_d1111e549podłoga.

Ćwiczenie 24

Zmodyfikuj skrypt dla duszka wydającego resztę, uruchamiany po otrzymaniu komunikatu kupuję. Przed nadaniem komunikatu wydaj resztę wstaw wywołanie bloku Oblicz_resztę. Pamiętaj, żeby podać jako parametr wartość reszty do wydania wyrażoną jako liczba całkowita w groszach.
Wskazówka:
Do zaokrąglenia wartości liczby rzeczywistej możesz wykorzystać bloczek zaokrąglijiwePopYOpl_d1111e568zaokrąglij.

iwePopYOpl_d1111e536

iwePopYOpl_d1111e549

iwePopYOpl_d1111e568

iwePopYOpl_d5e1235

Duszek wydaje resztę

Ostatnim elementem oprogramowania automatu będzie wydanie reszty zgodnie z wyznaczoną liczbą monet o poszczególnych nominałach. Odpowiedzialny za to będzie duszek Monety, po otrzymaniu komunikatu wydaj resztę. Zwróć uwagę, że duszek jest jeden (ma sześć kostiumów, poszczególne nominały monet), a na scenie należy wyświetlić kilka monet, często także o takich samych nominałach. Umożliwia to mechanizm klonowania duszków. Więcej o klonowaniu duszków dowiesz się tutajiwePopYOpl_d1111e593tutaj.

Ćwiczenie 25

Zapisz w postaci listy kroków algorytm generowania (klonowania) duszków monet zgodnie z ustawieniami na liście reszta.

Ćwiczenie 26

Przygotuj skrypty dla duszka Monety:

Uruchamiany po otrzymaniu komunikatu wydaj resztę zgodnie z algorytmem z poprzedniego zadania.
Uruchamiany w wyniku wystąpienia zdarzenia Kiedy zaczynam jako kloniwePopYOpl_d1111e593Kiedy zaczynam jako klon (duszek powinien pokazać się na scenie w losowym miejscu i wydać dźwięk wypadającej monety).