O ('t') E= n

Cze6c 1
-
lnZynieria prog ramowan ia
proj ektowan ie oprog ramowan a,
i

testowanie i dokumentowanie aplikacji

Kwalifikacja lNF.04
Projektowan ie, prog ramowan ie
i testowanie aplikacji

PodrQcznik do nauki zawodu

technik programista
Angelika Krupa, Weronika Kortas

HelionTf
 rl

Cll
Wstqp
Rozdzial 1. Przygotowanie srodowiska pracy 7
1.1. Narzgdziawykorzystywane w prowadzeniu projektu . 7
1.2. Narzqdzia wykorzystywane w wytwarzaniu oprogramowania t5
1.3. Podsumowanie 30
1.4. Zadania 30

Rozdzi al 2. E Ie me nty p rog ramowan i a na przykladzie

jqzyka JavaScript 31

2.1. JS i co dalel?
- 32
2.2. Skladnia 33
2.3. Podstawy programowania 42
2.4. lnstrukcje warunkowe (conditionals) . . 60
2.5. lnstrukcle sterujqce i pgtle 69
2. 6. Wprowadzen ie do programowan ia obiektowego 80
2.7. Kolekcje arc

2.8. Zadania 88

Rozdzial 3. Projektowanie aplikacji oa

3.1. Dobre praktyki zwiqzane z programowaniem obiektowym 94

3,2. Clean code czyli czysty kod 97
3.3. Dokumentowanie kodu 98
3.4. Algorytmy 100
3.5. Projektowanie klas (UML) 121
3.6. Wzorce projektowe 123
3.7. Podsumowanie IJZ
3.8. Zadania IJZ

Rozdziaf 4. Testowan ie oprogramowania 1aF

4.1. Siedem zasad testowania oprogramowania 135

4.2. Proces testowy wedlug ISTQB . 138
4.3. Poziomy testow 143
4.4. fypy test6w . ..
148

3. '
 Spis tresci

4.5. Dobre praktyki w zglaszaniu blqdow za pomocE narzqdzi .... . 152

4.6.Zadania.... ...156
Rozdzial 5. Tworzenie dokumentacji testowej . . .. . 15e

5,1. Plan test6w .. 159

5.2. Scenariuszetestowe .... . . 165

5.3, Listakontrolna ........172

5.4. Rejestrryzyk ........174
5.5. Raport blqd6w 174

5.6. Raport testow 175

5.7.Zadania..... 179

Rozdziaf 6. Metodologie prowadzenia projektu 181

6.1. Model kaskadowy 182

6.2. Metodykizwinne 186

6.3. Zestawienie metodyk pod kEtem roznic 195

6.4. Zadania . . 196

Rozdzial 7. Od pomyslu po wdrozenie

praktyczne zastosowanie zdobytej wiedzy .
-. 199

7.1 . Etap pierurszy pomyst i zapytanie ofertowe . 200

- .

7.2. -lap drugi oferta . . 203

-
7.3. Harmonogramprac ........207
7.4. Realizacja prac projektowych . 208
7.5. DiagramGantta-charakterystyka, przyklady .......217
7.6. Proponowane rozszerzenia aplikacli . 218
7.7. ?rawa autorskie ..... 221

T.E.Zakonczenie ........224
7.9,Zadania ..225

Bibliogralta 227

Skorowidz.. 229

(=:t-r
]4
Programista, tester czy ar,alityk to zawody cechuj4ce sig dynamicznym postgpem
technologicznym. Wa2ne jest, by caly czas siE rozwija6 i nie sta6 w miejscu. Warto
poznawae nowe metodyki wytlvarzania oprogramowania czy narzgdzia wspieraj4ce
procesy wytw6rcze. W tym podrEczniku znaleil( mozna opis najwa2niejszych etap6w
skladaj4cych sig na proces tworzenia aplikacji. Om6wiono naugdzianiezbgdne nakal-
dylm z nich (rozdzi al l.). Zaprezentowano podstanlz programowania w j gzyku JavaScript
(rozdzial2.). Pruedstawiono zasady dobrego programowania (zasada czystego kodu,
stosowanie algorytm6w, wstgp do wzorc6w projektowych itp. rczdzial3.). Opisano
proces testowania powstai4cego i gotowego programu (rozdzial - 4.). Zaprezentowano
przyklady dokumentacjiwytwaruanej w procesie testowania (rozdzialS.). W rozdziale 6.
om6wiono metodologie prowadzenia projektu programistycznego. Zwiefrczeniem pod-
rgcznika jestrozdzialT.,kt6ry mapokazae czytelnikom krok po kroku etapy tworzenia
aplikacji z uwzglgdnieniem poznanych wczeSniej wiadomoSci.
TreSci zawarte w podrgczniku s4 zgodne z podstaw4 programow4dlazawodutechnik
programista. S4 one powi4zane merytorycznie, strukturalnie i metodycznie z og6lnymi
cel ami ztal c enia okreSlonymi
ks w kwalifik acji IN F. 04. P rof ektowanie, programowanie
i testowanie aplikacii:
a) projektowanie, programowanie i testowanie zaawansowanych aplikacji we-
bouych;
b) projektowanie, programowanie i testowanie aplikacji desktopowych;
c) projektowanie, programowanie i testowanie aplikacji mobilnych.
W szczeg6lnoSci tre6ci prezentowane w niniejszym podrqczniku dotycz4 efektlw ksztal-
cenia wraz kryteriami ich weryfikacii,kt6re zostaly opisane w punktach INF.}4.3. Proiek-
towanie oprogramowania oraz 1NF.04.8. Testowanie i dokumentowanie aplikacii podstav,ry
programowej.
Zgodnie zuwagami przedstawionymi powy2ej niniejszy podrEcznik powinien stanowi6
dla ucznia uzupelnienie i rozszerzenie materialu zawartego w podrgcznikach do nauki
programowaniazaawansowanych aplikacji webowych, desktopowych i mobilnych. Przy
tym dotyczy to zar6wno (pocz4tkowego) etapu projektowania aplikacji, jak i (korico-
!\ych) etap6w iei testowania i dokumentowania.
Przeczytanie (ze zrozumieniem) tego podrEcznika jest bardzo izasochlonne i wymaga
sporego zaangailowania. Mamy jednak nadziejg,2e osi4gnigty cel bgdzie wart wysilku
wlo2onego w lekturg.
Pisz4c podrgcznik, d4hylyilmy do tego, by zawrzet w nim jak najwigcej praktycznych
przyklad6w. Wyszty6my z zaloLeria,2e iladne slowa nie zast4pi4godzin praktyki, dla
kt6rych opanowanie teorii jest zaledwie niezbgdnym wstepem.
Gl6wne 216 dla wiedzy dotycz4cej testowania i wytw arzania oprogramowania to :
1 . Certyfikowany tester. Sylabus poziomu podstawowego ISTQB@. Wersja 2018 V 3.1.
Prawa autorskie wersji polskiej zastrzeilone dla @ Stowarzyszenie JakoSci System6w
Infor maty cznych ( SJ S I ).
2. Slownik termin6w testowych@. Wersja 3.3.1. Prawa autorskie wersji polskiej za-
str zeilo ne dl a O Stowa ruy szenie Jako 5 ci System6w lnfo r matycznych ( SJ SI ) .

3. Certyfikowany Tester. Sylabus rozszerzenia poziomu podstawowego. Tester zwinny.

Wersja 2014.
Skuteczna nauka wymaga czasu. Wytwarzanie oprogramowania, zewzglgduna zespo-
lowy charakter tego procesu, baz$e w du2ej mierze na komunikacji. Z tego wzglgdu,
aby ulatwi6 r6wnoczesn4prucA nad projektem, opiera sig j4 na rvybranych meto-
dykach, w szczeg6lnoSci zwinnych (Agile). M6wi siE, 2e jeden dziefi po6wigcony na
analizg problemu, z kt6rym chcemy sig zmierzye, to dwa tygodnie tworzenia kodu

- dokladnie dwa tygodnie). Dlatego tak du2y nacisk polozono w podrgczniku na

(tak
planowanie i testowanie. Testy oprogramowania, przeprowadzane na r62nych etapach
pracy nad nim, s4 nieodzownym elementem tworzenia aplikacji. To od nich zalezy,
czy klient zlecai1cy nam wykonanie programu zostanie z nami na dluLej i czy zam6wi
u nas kolejne projekty. JeSli ju2 na pocz4tku przytloczy go liczba blgd6w w aplikacji,
szanse na dalsz4wsp6lprac9 bEd4 znikome.

Podczas podr62y po Swiecie vyrztwaruania oprogramowania warto pamigtac o tym,2e

najlepszym nauczycielem s4 wta6nie blgdy jak i te, kt6re ktoS ju2
- zar6wno wlasne,
popelnil przed nami. Warto siE na nich tczyC'inieustannie d42yC do ich eliminowania.
Mimo licznych wyrzeczefl i wielogodzinnej pracy pierwsze projekty mog4 mie6 wiele
niedoskonaloSci. Jak mo2na minimalizowae liczbq blgd6w? Tylko przez praktykE. Im
wigcej projekt6w stworzymy, staraj4c sig stosowa(. zasady dobrego programowania,
tym mniej bigd6w bgd4 zawierat nasze projekty.
Musimy jednak pamigta6, by uczye sig na blgdach, a nie uczyd siE blEd6w! Powielanie
w kolejnych projektach btgdu popelnionego w pierwszym programie, spowodowane
brakiem wiedzy b4d2 niedbalo6ci4, na pewno nie jest dobr4 praktyk4.
Podczas rcalizacji projektu koricowego dobrze jest pracowa6 w zespole. Samodzielna
praca jest oczy'wiScie mo2liwa, ale z rcgrly trwa dfuZei i jest trudniejsza. Jest ponadto
w pewnym sensie nienaturalna, bo obecnie niemal wszystkie firmy programistyczne
opieraj4 sig na zespolach wsp6ipracuj4cych programist6w i tester6w oraz analityk6w
i Scrum Master6w. Zachgcamy do budowania zespol6w nastawionych na wsp6ln4pracg,
kt6rej podstaw4bgdzie dobra komunikacja. To ona jest kluczem do sukcesu w wielu
wymiarach, takzew przypadku tworzenia oprogramowania. Nie2wykle wa2ne jest r6w-
niez to, Zeby kazdy cztonek zespolu znal dokladnie role i mo2liwo6ci pozostalych
na pewno usprawni komunikacjq.
- to
Po tych wsigpnych informacjach czas zacz4e przygodgw 6wiecie programowania. Mamy
nadziejg, 2e niniejszy podrEcznik bEdzie dla Ciebie najlepszym przewodnikiem.
Autorki
 '-:..

od OWI ska'
.L... .
AC
UI
'':-- --- ....-...

racy
Przygotowanie Srodowiska pracy to nie tylko instalacja i konfiguracja niezbgdnych apli-
kacji i narzg dzi, ale r6wnie2 nauka optymalnego ich wykorzystania. Obecnie wszelkiego
rodzaju tutoriale i szkolenia e-learningowe hiemal ,,wylewaj4 sig" z internetu, dlatego
coraz czgiciej wymagana jest znajomoS6 wielu narzgdzi juz na pocz4tku pracy po
to by proces tworzenia oprogramowania byl jak najszybszy i jak najbardziej uydajny
-
(^lu
rV'n.1. N arzq dzia wykorzystywane
--T
w prowadzentu projektu
W dzisiejszych czasach rcalizacia projekt6w jest tak r6znorodna,2e rynek nieustannie
dostarcza nowych rczwiyzafi, technologicznych, kt6re maj4 za zadanie wspomaga6
pro c e sy i zar zqdzanie p ro j ektami. W nini e j sz y m r ozdziale zo st an 4 om6wi o ne nar zEdzia
(zar6wno platne, jak i darmowe), kt6re wspieraj4 zarz4dzanie projektem, zarz4dzanie
testami otaz wytw arzanie oprogramowania.

Rozdzial ma charakter wprowadzajqcy warto miec na uwadze, 2e nizel wymienione

-
narzqdzia caly czas sq rozwilane i wzbogacane o kolejne funkcle

zl I
\
li. i
-*
 Rozdzial 1. I Przygotowanie srodowiska pracy

1,1.1. HP ALM
Jako pierwsze zostanie om6wione narzedzie HP ALM. Jest to aplikacja do wspiera-
nia procesu testowego i zarzqdzania testami. Dostgp do narzgdzia jest przyznawany
na podstawie licencji (1 licencja = 1 u2ytkownik). Umo2liwia ono planowanie oraz
wykonanie test6w manualnych i automatycznych, zaru4dzanie defektami (zglaszanie,
monitorowanie). HP ALM dzieli sig na dwie czE6ci:
o administrucyjn4 @ng. Site Administration);
. uzytkownika (ang. ALM Platform) caty modul przeznaczony dla u2ytkownik6w.
-
W dalszej rozdzialu skupimy sig na czg6ci u2ytkownika, gdyz panel administra-
czgSci
cyjny f est dostgpny jak sama nazwawskazuje
- - dla os6b pelni4cych funkcjg admini-
stratora. W panelu administraryjnym wykonuje sig wszystkie czynnoSci administracyjne,
takie jak tworzenie domen, projekt6w, uZytkownik6w oraz nadawanie uprawnieri.
Po wybraniu adresu docelowego narzgdzia w danej organizacjipojawia sig ekran logo-
wania (rysunek 1.1):

++-
+++++ ApplicalionLifecycleManagemenl
+++++
*-l**
i;cru_Gilv + - )1 .r- srEir 3d
-

rx&lai t,

Rysunek 1.1. Ekran logowania w HP ALM

Jak mo2na zauwaLyQ poza wymaganymi danymi do logowania aplikacja wymusza na

nas wyb6r zlist rozwijanych domeny (ang. Domaire) i projektu U2ytkownik mo2e siE
zalogowaCwyl4cznie do projekt6w, do kt6rych nadano mu dostqp.

/-\; n
I

i .,;o
l'-)
 1.1. Narzedzia wykorzystyuane w prowadzeniu projektu

Po zalogowaniu widoczne sq tylko te funkcje, do kt6rych mamy dostgp.

Panel u2ytkownika moze sig sklada6 z nastEpuj4cych modul6w (widocznoS6 zaleLna

od uprawniefi):
o Dashboard statystyki, raporty;
o -
Management
- zarzydzanie planem wersji;
o izarz4dzanie nimi;
Requirements
- definiowanie wymagari systemowych
o Testing tworzenie zestaw6w test6w w projektach, uruchamianie zaplanowanych
test6w;
-
o Defects tworzenie i Sledzenie status6w defekt6w.
-
Poni2ej przedstawiono podgl4d widoku ekranu po zalogowaniu do aplikacji (rysunek
1.2). Wida6 na nim tzy grupy menu:
1. Menu wyboru modul6w.
2. Menu operacji dostEpnych w wybranym wczeSniej module
3. Menu uZytkownika (wyb6r projektu, ustawienia konta).

tl'! kshMrd *
;iX mapi: liw
& D3shkarduew
't emgemaat a

u, nqeases
LS: Lrkal*s

6 Reqrirws
6 l€stnE ^
@ Txi Reswcas
,l::&:li*-iw,.:r'.'r
&U restLab
@ l*tms
& ekh

2.
- rrr" d,.k .s i.,: d.Bitsbe b k l*t qm @-ioltu

Rysunek 1.2. Widok na menu i moduty w HP ALM

W dalszej czgSci podrozdziatu przedstawione zostan4 moduty Testing i Defects.

 Rozdzial 1. I Przygotowanie Srodowiska pracy

1.1.1.1. Modut Testing

Jest to modul sluil4cy do organizowania procesu testowego. Sktada sig z nastgpuiqcych
element6w (u2ytkownik widzi tylko te, do kt6rych ma nadany dostgp):
Test Resources
- zawiera wszystkie dodatkowe zasoby tr|ywane do test6w manu-
alnych oraz a\tomatycznych, zar6wno funkcjonalnych, jak i wydajnoSciowych.
Business Components modul, kt6ry pozwala zarz4dza6 komponentami bizne-
sowJrmi.
-
a Test Lab tu przenosimy testy, kt6re s4 skonfigurowane i gotowe do uruchomienia.
-
o Test Runs w module widoczne s4 wszystkie uruchomienia test6w wraz z icl-r
wynikami.
-
Test Plan modul pozwalaj4cy na zorganizowanie calego procesu testowania po-
-
przez okre6lenie, jakie testy zostan4 wykonane w celu zweryfikowania poprawnoSci
dzialania systemu.

Weryfikacja egzaminowanie poprawnoSci i dostarczenie obiektywnego dowodu na

-
to, ze produkt procesu wytwarzania oprogramowania speinia zdefiniowane wymagania.
Walidacja
- sprawdzenie poprawnoSci i dostarczenie obiektywnego dowodu na to,
ze produkt procesu wytwarzania oprogramowania zaspokaja potrzeby uzytkownika
i spelnia jego wymagania.

1.1.1.2. Modul Defects

Jest to modul do zarzEdzania blgdami, kt6ry daje mo2liwo56 ich rejestrowania,przypi-
sywania do konkretnych os6b i zmiany status6w zarejestrowanych blgd6w.
Mo2emy zglosit. tutaj wszystkie uwagi do zachowafi (zar6wno funkcjonalnych, jak i nie-
funkc j onalnych) systemu odbiega j 4cych od przyj Etych wymagari.

Wymaganie funkcjonalne dotyczy wyniku zachowania systemu, ktory powinien zo-

stac dostarczony pzez funkcjg systemu.
Wymaganie niefunkcjonalne dotyczy jakosci tworzonego oprogramowania, ale nie
zostalo okreslone przezWmagania funkcjonalne, Odnosi siq m.in, do wydalnoSci do-
stgpnosci, niezawodnosci, skalowalnoSci i przeno6noSci.

I
l

a: 110
l:;
 1.1. Narzqdzia wykorzystywane w prowadzeniu projektu

Poni2ej przedstawiono podgl4d widoku ekranu modulu Defects (rysunek 1.3). Mo2na
na nim zartwaLye fizy gropy menu:
1. Menu wyboru modul6w.
2. Menu g6rne.
3. Widok na wszystkie zghoszenia w ramach projektu, do kt6rego jeste6my zalogowani.

a.l=.L ar:i tl;." ail.ili.! -rr?l!:i:

D6eibr! a Jtii':1.i::.. :::l *f -.:i :-l+::ui-:ri-q L:l ! l,::,

d AT:tsls vl&
& Da$brrduew
d{ &res€d a wewwil&x,r
*i Rdeses
I{lt LibBries ?

dl fleqtremsls
;
a
le.rry 5
-
s les1Re9tur(e: l;
S rxt nan
W Test kb ;
E resrnns !.

:8i.,:ikirarla.i:r':: ri.,,

"2

Rysunek 1.3. Widok narzqdzia w module Defects

Defekty mozemy zglosil zar6wno z pozioml modulu Test Lab, jak i z poziomu
Defects. W menu g6rnym (2) naleLy najpierw wybra6 New Defecf, a nastqpnie
wypelni6 wszystkie wymagane pola w formularzu. Po dodaniu defektu jest on
widoczny na li6cie (3).
HP ALM jest bardzo elastycznym narzgdziem. Mozemy je spersonalizowaC do ka2dego
projektu. Co wa2ne
- mozemy sami definiowa(. raporty czy widoki i udostgpnia6
je
innym osobom.
Jest to jedno z najdrozszych narzgdzi na rynku, lednak jest warte swojej ceny

1.1.2. Jira
Jira jest komercyjnymnarzgdziem nie tylko wykorzystywanym w zaru4dzaniu projek-
tami, ale r6wnieL wspomagaj4cym elektroniczny obieg dokumentacji w firmie.
Tak wygl4da ekran logowania dla Jira cloud (rysunek 1.4):
 Rozdziat 1. I Przygotowaniesrodowiskapracy

W Jirc

$ K*n3'n*u; x pamdcq 6cs*te

XX {661yeuuj: k!s&e Mi{srrtt

a Kentyulu;; A,]pl;

ir€rnrz::z5e' r3,Elallir:rgiltltcE
?.ir:.*;i: !oli.

Rysunek 1.4. Ekran logowania w narzedziu Jira

Warto zaznaczye.,2e ekran logowania do wersji cloud r62ni siq wizualnie od wersji ser-
werowej. Jira dostosowuje sig do projektu. ZaleLnie od metodyki, w jakiej projekt jest
realizowany,narzgdzie daje nam cal4paletgr62norodnych funkcji. Poni2ej (rysunek 1.5)
zaprczerfiowano widok przykladowego zadania w systemie Jira wraz z podzadaniami
(ang. subtasfts). Mozna na nim zauwaLy(,2e:

. zadanie gt6wne wy6wietlane jest z nazw4 projektu;

1
2. widoczne sE wszystkie podzadania powi4zane z zadaniem gl6wnym.
'!{t : i!'r.,,i ::e trr rL;iircl <-1
ffi.

,Rysunek 1.5. Wldok prolektu w systemie Jira

..:12
I

- r-'-
 1.1. Narzqdzia wykorzystywane w prowadzeniu projektu

W momencie gdy wszystkie podzadania wejd4 w status Swiadcz4q o zakoiczonych

pracach (mo2e to by6 Resolved htb Closed), uznaje sig, 2e zadanie gl6wne mohe bye
w drazane do Srodowiska ( docelowego) produkcy j nego.

Srodowisko produkcyjne
- zainstalowane w siedzibie klienta firmy tworzqcej opro-
gramowanie lub w chmurze sprzgt i oprogramowanie, w ktorych modul (lub system)
bqdzie uzywany. W sklad oprogramowania mogq wchodzi6 systemy operacyjne, bazy
danych i inne aplikacje.

Dodatkowym atutem narugdziaJira jest definiowanie ryklu 2ycia (ang. workflow)blgdu.

Cykl 2ycia blqdu to proces, przezklory przechodzi usterka oprogramowania. Rozpo-

czyna sig, gdy blqd zostanie wykryty, akonczy w chwili jego usuniqcia, po wcze6niej-
szym upewnieniu sig, ze nie zostal zduplikowany.

Na rysunku 1.6 przedstawiony jest diagram, kt6ry mozemy dowolnie modyfikowa6.

Kaidy projekt mo2e mied odrgbny workflow.
Rysunek 1.6.
Przykiadowy cykl
zycia btqdu
ffi
(ang. workflow)

@ a

r. &a&agilrs --t

W Panelu uiytkownika (rysunek 1.7) moilemy zmieni( preferencje co do wySwietlania

stron oraz sprawdzi6 historig aktywnoSci.
 Rozdzial 1. I Przygotowanie Srodowiska pracy

'1. .,'. tuafl: .a. ..a ..::,1:...

, g1l!rM8!-la,@

a&re: @

YAllarriai

Rysunek 1.7. Konto uzyikownika

Dodatkowe informacje o narzgdziuJira zostan4podane w rozdziale 4.

1.1.3. Tiello
Trello jest narugdziem bezplatnym, kt6re moLebyt. wykorzystywane zar6wno w pro-
jektach komercyjnych, jak i w celach prl,watnych (np. do planowania podr62y,bud2etu
domowego, remontu).
Poni2ej przedstawiono podgl4d na widok tablicy Trello (rysunek 1.8). Mo2na na nim
zatwaLye tzy grupy menu:
1. Menu operac i dotycz4cych udostgpniania/prywatno
j Sci tablicy
2. Widok kart.
3. Konto u2ytkownikawraz z opcj4powiadomief,.

Rysunek 1.8. Widok na tablicq Trello

Dodatkowe informacie o Trello zostan4zaprczentowane w rozdziale 4.

114
 . 1.2. Narzedzia wykorzystywane w wytwarzaniu oprogramowania

W dalszej czgSci podrgcznika zostanie om6wiony jeszcze Testlink darmowe narzg-

dzie typu open source.
-

1.1.4. Dobor narzedzi do zarzqdzania projektem

Poni2ef przedstawiono kr6tkie zestawienie por6wnawcze narugdzi, kt6re ulatwi Ci do-
pasowanie narugdzi do projektu. Zostaly w nim uwzglgdnione ich kluczowe funkcje,
dzigki kt6rym wspieraj4 prowadzenie projektu.
Tabela 1.1. Zestawienie porownawcze narzqdzi

HP ALM Jira Trello Testlink

Platna licencia ,/ ./
Mo21iwo56 rozszer zania funkcji ./ ./
dzigki platnym dodatkom
Personaiizacja raport6w

Definiowanie cykiu 2ycia blgdu

Wykonywanie przypadk6w testowych

Obsluga test6w automatycznych

. Narzg dzia wykorzystywane

w wytwarzaniu oprogramowania
Jednym z element6w wytwarzania oprogramowania jest tworzenie aplikacji za po-
moc4 wybranego jgzyka programowania. W tym podrgczniku skupiamy sig na jgzykrt
JavaScript. Zacznijmy od opisu element6w, na jakie nalezy zwr6ci( szczeg6ln4 uwagQ
podczas instalac ji oprogramowania.
Narzgdzia pomocne do napisania aplikacji przegl4darkowej to Git i WebStorm.

1.2.1. lnstalacja programow WebStorm i Git

1.2.1.1. Git system kontroli wersji
-
Wyobrulmy sobie wsp6lne pisanie fragment6w kodu przez wielu u2ytkownik6w iprze-
noszenie tych kod6w zakaidymrazem do chmury Jak zapew4it,by zmiany dodawane
przez dowolnego programistg byty widoczne dla pozostalych wsp6lpracownik6w?
Gdy kolega z zespoh pobierze plik, a nastgpnie coS w nim zmieni, w6wczas, by bylo
wiadomo, 2e kod zostal zmieniony, molna doda6 katalog z dat1 i godzin4 zmiany i to
w nim wta6nie przechov,ry.wana bgdzie nowa wersja pliku, podczas gdy oryginalna
pozostanie niezmieniona.

.15
,
 Rozdzial 1. I PrzygotoWanie Srodowiska pracy

Zal62my ponadto, 2e kolega pracuje nad now4 funkcj4. skopiowal wigc caly katalog
oryginalny i nanosi zmiany wewn4trz kopii folderu. Poprawki do bie2qcej funkcji wci42
s4 natomiast rozwijane w oryginalnym folderze (rysunek 1.9).

Warzywniak oryginal Warzywniak z PayPal

10.1O.2019 8:20 10.10.2019 10:20

Warzywniak oryginal Warzywniak z PayPal

10.10.2019 11:20 i0.10.2019 12:03

Warzywniak oryginal
10.'10.2019 15:15
Warzywniak oryginal
+
Warzywniak z PayPal

Rysunek 1.9. Symulacja prowadzenia projektu zapisanego w folderach w chmurze

Pewnego dnia kolega skoriczyl pisanie funkcji, nad kt6r4 pracowal. Trzeba wigc po-
lyczyt dwa r62ne katalogi. Gdyby nie istniaty systemy kontroli wersji, trzeba bytoby
por6wna6 wszystkie pliki i nanosit rgcznie niezbgdne zmiany.Pruy dtilei liczbie plik6w
i zmian byiby to spory problem.
Na szczg6cie problem ten pozwala j4 latwo rozwi4zae wspomniane juL narzgdzia do
kontroli wersji, a w3r6d nich to bodaj najpopularniejsze Git.
-

Git to repozytorium kodu, czyli w uproszczeniu narzqdzie do przenoszenia plikow mig-

dzy komputerem, na ktorym jest tworzony kod, a innym senruerem, na ktorym prze-
chowywana jest kopia. Zapewnia wersjonowanie plikow (dlatego nazywane jest tez
systemem kontroli wersli) czyli przechowywanie w osobnych galgziach (ang. branch),
roZnych wersji kodu pochodzqcych od jednej glownejwersji, nazywanej galqziq gl6w-
nq (ang. master). Kazda galE2 moze byi rozwijana niezaleznie, a potem scalana do
jednolitej wersji.

_!6
 1 .2. Narzqdzia wykorzystywane w wytwarzaniu oprogramowania

Pruyklad1.'l
Zobaczmy ra przykladzie, jak rozwi4zae problemy z ittegraci4.
Od czasu do czasu w lokalnej spoleczno6ci organizowane s4 wyprzedaze garailowe.
Zal62my, 2e rodzina Nowak6w chcialaby sig przyl4czy6 do tej vryprzeda|y i opr62ni6
ju2 pokoje dzieci
dzieci jttL wyrosly
- Antka i Marysi -bo zalegai4 w nich pluszaki i ubrania, zkt6rych
W pokoju Antka odnaleziono m.in. garnitur komunijny, pluszowego koalg oraz o trzy
rczmiary zama*ebtty.
W pokoju Marysi odnaleziono zamalebiurko, za niskie krzeslo obrotowe oraz mn6stwo
szpargai6w zwakacji w Egipcie
Antek zdeqrdowal, 2e oddaje wszystkie rzeczy wstgpnie zakwalifikowane do wystawienia
nawyprzedal.Przeni6sl je do salonu, gdzie byly sktadowane przedmioty do sprzedania.
Marysia nie mogla poilegnaC sig z pami4tkami z Egiptu. ,pddajg biurko i krzeslo, ale
pami4tki zostai4" orzekla.
-
Zal62my, 2e organizacjg vtyprzedaLy przeprowadzamy za pomoc4 Gita. Najpierw musi-
my wybra6 rzeczy nawyprzeda2. Robimy to za pomoc4 polecenia w postaci git add
nazwa_rzeczy.
Wybranie rzeczy (przeniesienie ich do salonu) za pomoc4 Gita wygl4datoby wiEc tak:
git add garnitur
git add pluszak
git add buty
git add biurko
git add k.rzeslo
Gdy wszystkie przedmioty zostaly ju2 wybrane (czyli przeniesione do salonu), podjgta
zostala ostateczna decyzla zaftvierdzaj4ca wyb6r. Realizujemy i4 za pomoc4 polecenia
Sit commit -m 'rzeczy na wyprzedaz' (-m to parametr, kt6ty oztaczako-
mentarz do commita, czyli wprowadzonych zmian). Nie znaczy to jednak,2e rzeczy
zostaly ju2 przeniesione do miejsca, gdziebgd4 sprzedawane, czyli do garahtt s4siada
(to bgdzie naszerepozytorium zdalne- remote) .Wciq2 jeszczeznajil,tj4siE w salonie
(czyli repozytorium lokalnym loca1).
-
Nastipnie tata wyni6st rzeczy do garuilt s4siada. W tym momencie przedmioty zostaty
wigc przeniesione z repozytorium lokalnego do zdalnego. Odpowiednia komenda to
git push.
WyprzedaLe organizowane s4 po to,by rzeczy, kt6re nam juZ nie s4 potrzebne, mogty
zosta1 zakupione przezinrtych. My ie ,,wypychamy" (push), dobrze byloby jednak, by
inni mogli je pobra6 (pu11). Aby to bylo mo2liwe, dla wybranych przedmiot6w nale|y
Rozdzial 1. I Przygotowanie srodowiska pracy

wykona6 polecenie git pu11. Nie bgdziemy jednak przeprowadza6 transakcji w ga-
ruZu. wybrafie przez kupuj4cego rzeczy tlo|ymy wigc zn6w w naszym repozytorium
lokalnym w salonie (rysunek 1.10).
-
trTT
Pok6j Antka
git add

ffiffi

trrr
Pok6j Marysi
git add

ffiffi
Rysunek 1 .1O. llustracla przeplywu zadan (apg. workflow) w Gicie na przykladzie
wyprzeda2y garazowej
Podobnie bEdzie vurygl4dala praca w Gicie z kodem. Dop6ki pliki s4 u nas na dysku,
to s4 lokalne (ang. local); gdy juL przerzucimy je do repozytorium, to opr6cz plik6w
lokalnych mamy teL ich zdalne (atg. remote) kopie

Przyklad 1.2
Wr66my do problemu z kodem 2r6dlov'rymwarzywniaka.Zapomoc4 systemu kontroli
wersji mo2na go rozwi4zad w opisany tutaj spos6b. Na pocz4tku kolega pracuj4ry nad
integracj4 sklepu z systemem platno6ci PayPal m6gl zrobi( kopiq kodu z dnia 10.1,0.2019
i pracowa6 wlasnie na niej. Tak zrobion4 kopig r'azwa{ny galgzi4. Komenda, kt6ra
slu2y do tworzenia nowej galgzi, to git checkout -b paypal (checkout utworzy
lokalnie gal42 o nazwie paypal; rtazwabgdzie zatem odpowiadaC rozwijanej funkcji).
Na koricu practrzeba sca1i6 wszystkie akty-wne galgzie z oryginaTnym kodem 2r6dlowym,
przechowywanym w gl6wnej (ang. master) galgzi. Uzyskuje sig to za pomoc4 komendy
git merge paypal wykonywanej, gdy jesteSmy w galgzi master.
Prace nad projektem rczpoczynamy od utworzenia projektu w dowolnym portalu, kt6ry
obsluguje zarz4dzanie wersjami projektu (np. github.com, bitbucket.org my bgdziemy
-
pracowali w pierwszym z nich). Po zaloLeniu konta w serwisie glfftub.com (czyli serwerze
z kodami 2r6dlovrymi) i utworzeniu projektu o nazwie firstProiectuzyskamy mo2liwoS6

1B
 1 .2. Narzqdzia wykorzystywane w wytwarzaniu oprogramowania

pobrania projektu poprzez bezpo6redni link, kt6ry otrzymaliSmy.Bgdzie on wygl4da6

podobnie do tego: http s ://github.com/nazwauzytkownika/firstProi ect.git.
URL jest dostEpny od ruztt po utworzeniu projektu, dzigki czemu mo2emy go udostgp-
nia6 wsp6lpracownikom.

1.2.1.2. WebStorm IDE

-
W repozytorium zdalnym Gita bqdziemy przechowywaC nasz kod- Kod mo2emy pisa6
w dowolnym programie (moze to by6 nawet notatnik), ale zrobimy to o wiele sprawniej,
jeSli uZyjemy IDE (akronim od ang. Integrated Development Enuironment
- zintegrowa-
ne 6rodowisko programistyczne), przede wszystkim zewzglEdr na oferowane przezei
funkcje, jak uzupelnianie skladni czy kontrola b1gd6w. Mo2emy utyt np. programu
WebStorm, kt6ry moZna pobra6 ze strony producenta (wybieramy plik.exe):
hnps://www.ietbrains.com/webstorm/download/download-thanks.html?platform=windows
Dobrze jest zapoznae sig z przykladov'rym uruchomieniem pierwszego projektu; opis
tego procesu moLna znale2e na stronie producenta:

http s: //www. j etbrains. c om / help /w eb storm /getting- st arte d -w ith-w eb storm.html

Jakie Srodowisko wybrac? Trudno odpowiedziec na to pytanie. Wybor jest w tym przy-
padku (jak i w wielu innych) arbitralny, zale2y glownie od indywidualnych preferencji
uzytkownika Trzeba lednak zdawac sobie sprawg, ze funkclonalnosc Srodowisk progra-
mistycznych jest bardzo podobna (podstawowe funkcle to: kolorowanie kodu, autouzu-
pelnianie poleceh, sygnalizowanie blgdow skladniowych, tryb debugowania kodu). Jezeli
opanujesz jedno prawdopodobnie poradzisz sobie z pozostalymi Zazwyczaj rozniq sig
od siebie wyglqdem, skrotami klawiszowymi i liczbq zintegrowanych narzqdzi
Przyklady prezentowane w tym podrgczniku wykorzystujq wspomniany 1uz WebStorm.
Jest to rozwiqzanie komercyjne, jego autorzy jednak udostgpniajq darmowq licencjq
do celow edukacyjnych lub tez oferujq znizki dla start-upow. Do wyboru tego narzgdzia
sklania m.in jego dobra integraclaz narzqdziem Jira.
Mozna jednak skorzystac z innych srodowisk Wiele z nich jest jak WebStorm ko-
mercyjnych, ich producenci udostqpniajq jednak darmowe wersje z nieco ograniczo-
- -
nq {unkcjonalnoSciq (przy czym dla poczqtkujqcego programisty bgdzie ona zupelnie
wystarczajqca). Tak jest chocby w przypadku lntelliJ IDEA (https:llwww.jetbrains.coml
ldeal). Obok piatnejwersli Ultimate funkcjonuje darmowa, bez ograniczen czasowych,
wersja Community. Niestety ta ostatnia nie obsluguje jqzyka JavaScript, dostqpnego
w wersji platnej jeSli lednak chcesz programowac w innych jgzykach (przede wszyst-
kim w Javie), warto jq wyprobowac. Visual Studio, program Microsoftu obsiugulqcy
m.in. JavaScript, przygotowano w a2lrzech wersjach: komercyjnych Professional i En-
terprise (obie posiadajq bezplatne wersje probne) oraz darmowej Community. Wszyst-
kie mozna pobrac ze strony https. I lvisualstudio.microsoft.com I pl I.

+
19 r
 Rozdziat I l Przygotowanie srodowiska pracy

lstniejq takze srodowiska zupeinie darmowe, jak chocby te dostgpne na licencji open
source (tzn 2e aplikacja jest tworzona przez progtamist6w w ramach otwartego prolek-
tu i kazdy moze pobrac kod oraz zmodyfikowai go na wlasny uzytek, moie Iezdopisai
nowe funkcje i udostgpnic je innym), takie jak visual studio code (najczgsciel uzywany
edytor kodu w przypadku jqzyk6w opartych na Javascripcie, dostqpny pod adresem
https:llgithub.comlmicrosoftlvscode), Netbeans (https.llnetbeans.orglindexgt.html)
czy Eclipse (https.llwww.eclipse.orgf). wartym polecenia srodowiskiem lest takze Atom
(https:llatom.io[.

Podczas instalacji warto zwr6ci6 uwagg naokno dotycz4ce opcji w sekcji Create Associa-
tions (rysunek 1.11) . Mamy do wyboru rozszerzeniaplik6w, kt6re maj4 by6 skojarzone
z programem to znaczy, 2e bgd4 domySlnie otwierane przez WebStorm. Zalecamy
-
wybranie plik6w z rozszerzetiami .is oraz .html.

li$ webstom Setup x,

lrclalalix Qlioss
Configrre your W€bstom in*allation
t

Creile D€skto9 Shortot Updtte pATH val"iable (re5ta.t oe€dsd)

l]:?-bit taundrv I6a+it laxndier . n add laxrdlers dir to &e pATH

UpdAe contexl m€nu

I aaO 'Open fotdr as ProJect'

C{ed.e fusmidlions

[.ir [.css |].trtrnt f].ison

IOownload and install 32-bit Jet&ains RuBUn]e

cilGl

Rysunek 1.11. wyb6r opcji dostqpnych podczas instalacji programu webstorm

Przy pierwszym uruchomieniu pojawi siE okno wyboru stylu programu. Spora grupa
programist6w ze wzglEdtt na minimalizowanie odbicia Swiatla wybiera ciemny styl
Darcula (rysunek 1.t2), ale s4 dostgpne tak2e inne style. Ich uyb6r jest zaleilny od,
indy,widualnych preferencji uZytkownika.
Nie trzeba instalowa6 dodatkowych wtyczek, moilnawiEc pomin46 kolejne kroki i pozo-
stawi6 domySlne ustawienia (w razie potrzeby wtyczki mog4 by6 doinstalowane p6Lniej).

420
i..)
 1 .2. Narzqdzia wykorzysguane w wytwarzaniu oprogramowan a

Rysunek 1.12. Wyb6r stylu dla programu WebStorm

Po zainstalowaniu oprogramowania pojawi sig okno (rysunek 1.13) pozwalaj4cev'rybraQ
czy chcemy rtworzyC nowy projekt (Create'New Project), czy otworzy( i edytowat. juL
istniej4cy (Open). Opcja Get from Version Control pozwala na pobranie kodu z repo-
zytorium zdalnego.

tTt?:l .
rf"
qW&

We bstorm
't ,: .,::'.;:l',:.',,:1.,.': ,:

* ar..l€ New l'.jert

/ 6el irom V€6ioDCor!.91

* aontlnre r {.1 H.1..

Rysunek 1.13. Okno, w ktorym wskazujemy 2rodto kodu

 Rozdzal 1. I PrzygotowanieSrodowiska pracy

1.2.1.3. lntegracja IDE z Gitem

Przy pierwszym uruchomieniu programu WebStorm i wybraniu opcji pobrania kodu
z repozytorium uzyskamy widok podobny do pokazanego na rysunku 1.14:

& 6di!ii!!'.leac6niror X

f3 n"pa{ryrm f?riici.,r.ac! cl .
( , cnHub .q.

t.(_,

:r.:,. a.rral

Rysunek 1 .1 4. Okno dialogowe ze wskazaniem lEcza do repozytorium

OczywiScie istniej4 inne repozytoria projektowe, ale na pocz4tku warto sig skupi6 na
najb ardziei p o pul arnym nar zgdzht.

Je6li do tej pory nie zainstalowali6my Gita, to wySwietlony zostanie link pozwalaj4cy
na doinstalowanie brakuj4rych aplikacji (Download and Install na rysunku 1.14). Po
poprawnym zainstalowaniu pojawi siE okno podobne do tego z rysunku 1.15:

El (*f6m !€6i0n acntrDl x

P nop"*o,yum V.Gi.*.6dr.1, nn

(.1 6hHub URL: :..!:1t:,.:r::tll:l ""1r:.tTllal:.9:11.i'i::..]:::r:i. .......

Ui.doryr ar\Urs*\w€.snIdiseb*cmp.o]ed5!lidF.ojsd

Rysunek 1.15. Okno dialogowe pozwalajqce na pobranie pustego

projektu z repoalorium zdalnego

Adres URL okreSla, w jakiej zdalnej lokalizacji mamy nasz projekt (czyli w polu URL
trzeba wklei6 link do projektu utworzonego ta repozytorium zdhlnym). Dynamicznie
dodal siq r6wnie2 katalog na podstawie wybranego projektu. Po kliknigciu przycisku
Clone w tle bgdzie siq wykon1,.wa6 komenda:

git clone https : / / g L-ih,ab . com/ nazw a-uzytkowni kalfirs tPro j ect . qit
Po otwarciu pustego projektu w WebStorm moLna zobaczy(w lewym dolnym rogu op-
cjg wyboru repozytorium Gita (rysunek 1.16). Mo2emy j4v,rywola1zapomoc4skr6tu
klawiszowego Alt+9.
I
t

22
--17
 1 .2. Narzqdzia wykorzystywane w wytwarzaniu oprogramowania

Rysunek 1 .16. Lewy doiny

rog z opcjq wyboru okna
dialogowego prowadzqcego
do repozytorium Gita
F g elt l: O roDo & Terninal

Kiedy uruchomimy to okno, zobaczymy, ze obecnie nie mamy 2adnych zmian (czyli nic
nie stworzyliSmy l{o changes committed), ale w lewej czgSci okna wida6, ze iesteSmy
-
na lokalnej galgzi master (rysunek 1 .1 7).

ai: ,fl1.!-:,]r-- frr 1ii{t*r!t.

{ .. A ....... r..,t. .. i.,,: .r. r;,: :,.:,.. :t,t: fi ,.. l:t it q , :i 3i.

{1

Rysunek 1.17. Widok okna Git w WebStorm

Teraz dodamy nowy plik, aby zostat umieszczot:ry w repozytorium. W tym celu kliknij
na nazwie projektu pralq/m przyciskiem myszy i wybierz opcje zgodnie z rysunkiem
1.18. Po uzupelnieniu nazwy pliku i u,ybraniu dowolnej wersji HTML pojawi sig okno
dialogowe (rysunek 1.19).

Rysunek 1.18. Widok IA !!. !;i !p, !rag:& ic;. !d:c, Rli tr., r.! Iidi,, !.Lr ..1 .... ... .

dodania nowego pliku

do istnielqcego projektu

nepla.eitrF.ii,'.1-rit.i 1i Tt$dirlpiii'
l.!!t.ril.!.... t{cnt! rlliis
'
!si:dD. t Fa'k'9'lt!nFl'
L Era.f.ffi! F{
!adr. l:?.nr..
'"
r - Ct1! iear*.
l'.. ""
Cprmr,i trt.rr!
5h.t;;r [iFI.r.,

'. rFi. n .rn:r,

llr
1, i.i5,d Ldh P6i
'' i.r.ar.!rnt..
&1ilt !{:{ic., ii

O are. cn 6 ttsrb

it r ...r ': a r.:r

' ( t3.i! 1r{ BiLri I :

JeSli sig zgodzimy, to zobaczymy nasz plik w oknie lokalnych zmian (.Locsl Changes
Commit\. -

23,
 Sozdzial 1. I Przygotowanie Srodowiska pracy

Add tile to cit

Do you want ta acld the {ollowing file to 6it?

I g"l:"r ,

Rysunek 1.19. Okno dialogowe z zapty'"aniem, czy nowo powstaly plik

dodac do repozytorium Gita

JeSli domySlnie siq nie otworzylo, mamy mo2liwoS6 jego wyboru (zakladka Commit
z lewej strony na rysunku 1,.20; ten sam efekt uzyskamy, wciskaj4c skr6t Alt+Fl).
tirstProject t::,firs't.html
P,o,ect _ . ri
Y *{ firstprcrect -l!}ebslorepreieelsfiir5l

,r,: External Libraries

li Scratches and Consoles

rl

Rysunek 1.2O. Wyb6r dostqpnych widokow w WebStorm (zaktadki z lewej strony)

Po wciSnigciu wspomnianej zakladki (lub skr6tu) uzyskamy mo2liwoS6 wyboru widoku
(rysunek 1.21). Pod opci4 z numerem 6 znajdziemy skr6t prowadz4cy do lokalnych
zmian (Local Changes).

g!n.!dil!i.w!:l6{9at.go,.l.,,.tql!nJook!c:l!]ndcs!!!lp
, r.. ','
lklPtordt ;li:t!.tarl
&!s.6jftt rJ r (..f qu,s'cl..
Aclcrnflgtr,dcn.. 6.
6i )
., a I- {lal

& 1. F$jedr@

* 4 Fll.'illcsE

8,w.bBe* i
q.ftrnb**il' I

Rysunek 1.21. Okno dialogowe wyboru dostqpnych widokow

Po wybraniu tej
opcji zobaczymy,2e na liScie lokalnych zmiannazwa dodanego pliku
jest wypisana kolorem zielonym (gdybySmy w oknie pokazanym na rysunku 1.19
wybrali przycisk Cancel, wy6wietlalaby sig na czerwono).

("-)24
'-T::;
 1 .2. Narzqdzia wykorzystywane w wytwarzaniu oprogramowanta

W oknie lokalnych zmiat po ich wybraniu mozemy z menu kontekstowego wybra6

opcjg Commit File, tym samym jawnie okreSlaj4c, 2e te zmiany chcemy przenieS6 do
repozytorium zdalnego (rysunek 1.22).
g E,! r.( !". !..ie& !!d. gr(c' Rln Ice* !a !'nrq, Errr "fi
taarPdst !' ,r...

.6. rrr nt*rd(r . .

,' r,{ *4s

Flysunek 1"22. Widok menu kontekstowego z oznaczonych wyborem Commit File

W oknie dialogowym, kt6re siq teraz uka2e, mozemy jeszcze odznaczy( pliki u,,cze6niej
zaztaczoTle lub tez wybra6 pliki nieoznaczor,e, znajduj4ce sig w katalogu [Jnversioned
Flles. Wymagane jest wprowadzenie opisu zatwierdzanych zmian (Commit Message).

Zmiany zatwierdzane w repozytorium zdalnym nazywane sE czqsto commitem (rysu-

nek 1 23) Taktez bqdq okreSlane w dalszej czgscr tego rozdzialu.
Rysunek 1.23.
Okno dialogowe
Commit

251
 Rozdzial 1. I PrzygotowanieSrodowiskapracy

lm doktadniejsze sq opisy zatwierdzanych zmian, tym latwiel jest p6zniej nimi za-
rzqdzac.

W menu kontekstowym commita (rysunek 1.2\ (po uzupetnieniu wymaganych p61

wybraniu pliku/plik6w otaz trzupelnieniu pola z komentarzem) mamy do wy-
-boruczyli
tylko przeniesienie zmian do tymczasowego katalog:u (Commit).W rzeczywisto6ci
wszystkie pliki s4 ozr,aczone jako do przeniesienia.

Rysunek 1.24. Menu kontekstowe Commit

Kolejnym krokiem jest wyslanie zmian do repozytorium zdalnego. Za pierwszym ra-
zem pojawi sig okno powiadamiaj4ce o tym, 2e nie mamy ustawionych niezbgdnych
informacji wskazuj4cych, kto wykonat zmiany oraz jaki jest adres e-mail u2ytkownika
(rysunek 1.25).

Rysunek 1.25. Okno dialogowe If 6t User lirme ls Nor D.ilned X

do uzupetnienia danych
wymaganych erzy kom un ikacj i ** 1"11*:*9:::ri ,

z repozylorium zdalnym ',t' E"mdil:

A* se. propedi€s slobally

XamIffiin .ar pl

z Commit and Push, to od razu zostaliSmy przekierowani do

JeSli wybraliSmy opcjq
okna dialogowego z proSb4 o podanie informacji niezbgdnych do uwierzytelnienia
w repozytorium zdalnym (rysunek L.26).
Rysunek 1 .26. Okno dialogowe Si roqliroqithur,..om x
z prosbq o dane dostgpowe &Eniero€.rerti,rs
do wskazanego wczesniej r.--"," I

repozytorium zdalnego
Fassword:

fil! Remenber

:' : Us€.redefliials help€t

*.
 1 .2. Narzedzia wykorzysVwane w wytwarzaniu oprogramowania

i operacja zakohczyla sig sukcesem, to w prawym

JeSli poprawnie wpisali6my dane
dolnym rogu programu WebStorm pojawi sig komunikat (rysunek 1.27):

+g Pched mastet to new branch oriqin/m.ste

Rysunek 1.27. Komunikat o poprawnym

wystaniu commita do repozytorium zdalnego

Je6li nie wybraliSmy Commit and Push, to po wybraniu widoku Gir (dostgpnego
r6wnie2 pod skr6tem klawiaturowym Alt+9) i po wskazaniu galEzi master w menu
kontekstou'ym mo2na wybra6 Push i postgpowae zgodnie z wczeSniej opisanymi
krokami (rysunek 1.28).
cr ,--::9:.a1...
,..!r:Ali; iri. All ::,i,. Al: $ a{ }:

H-
K

Rysunek 1.28. Menu kontekstowe w widoku Git

Po poprawnym przej6ciu calego procesu pod wskazanym linkiem projektu pojawi

sig wpis na stronie wybranego przez nas repozytorium zdalnego, wskazuj4cy na to,
2e commit zostal zakoiczony sukcesem (rysunek 1.29).

+ I arnrmil 13 1 brelch S 0 prrl;3e: l) 0 rr er!e: .ql 1 .sfrtrabutsr

6.:r.h: m.ste. ' Ne' pull requ$t , c'€denee,tire rot"oo.,*....:l:!..1,_'_..

W
*.) l;t*!tlonlmil 9r.qt40 3 da!5 aEn

Ooilanie pieru:iegd {lomyqhego plil! hlfit I ir!! r_!r

Rysunek 1.29. Widok na stronie repozytorium zdalnego z pierwszym commitem

Rozdzial 1. I Przygotowaniesrodowiska pracy

1.2.2, Serwer aplikacji

Opr6cz plik6w HTML i CSS wigkszo66 dostgpnych stron internetowych ma r6wnie2
fragmenty pozwalaj4ce na interakcjg z uLytkownikiem, napisane w jEzyku JavaScript.
W celu poprawnego uruchomienia wszystkich plik6w skladaj4cych sig na aplikacjg
nalely je udostgpni6 na serwerze i wskazaC adres URL, pod kt6rym jest dostEpny nasz
program.
Przegl4darka Chrome ma wtyczkE, kt6ra jest wla3nie serwerem..
Aby korzysta(. z tej funkcji, nalezy uyszuka6 i zainstalowaC wtyczkg Web Server for
Chrome (rysunek 1.31).

',28
 1 .2. Narzedzia wykorzys\,r,vane w wMwarzaniu oprogramowanta

Sri...!1t*.,3r.!1. ) Afl k.cl. l yr'.b S*..rda[ri5.

::.lla], Web Server for Chrome

.r..{131':
oa!.1€ a cli.r.t.r! ..,.
***** r31a r::::tdrr I : irira,i,.i.r:1.,tin
I rr:.,. rrir:ln.

PErylEd i Opanie hoc kra*

aco

Rysunek 1.31. Pobranie wtyczki Web Server for Chrome

W celu uruchomienia serwera nale|y Wbrae w sekcii Rozszerzenid wtyczkq Web Seruer
for Chrome; poiawi sig w6wczas okno dialogowe z ustawieniami wtyczki (rysunek 1.32):

-Ix

t]r.*t.,w; d&lo heb,*eE k*is:&*€.

iii:& web server SIARTED

r. rsBoosE actpER...!o .?!rrR salaca

, BE*]li:@

a!..trr l-.J f 9ui,:,Et ij

f] Run tn b?.kE.oxr.1
l___l :r.:ir :::; rJ'

U Accessillle cn ,ocd nehrork

i_..r lllJ,) r,:r r: il,r'riii

l] P.event compuler ftom sieeprng

& Adomati€lly show index.hhl

8887

th, i!3n.4 CI&

Rysunek 1.32. Okno ustawien wtyczki Web Server for Chrome

4].
 Sozdzial 1. I Przygotowanie srodowiska pracy

W opcji Choose folder naleLy wskaza6 folder, gdzie jest zlokalizowana aplikacja (czyli
folder nadrzgdny dla pliku index.html).
Po kliknigciu URL ttjrzymy uruchomion4 aplikacjg.
(-lu
V,t1.3.
r--T-- Podsumowanie
Rozpoczynaj4c prac7 w zespole projektowym, na instalac jg narzgdzi oraz zapoznatie
sig z nimi mamy od kilku godzin do kilku dni, w zaleLnoici od liczby narugdzi i iloSci
czasu, jaki zostal oszacowany przezprzeloZonego. Zapoznaj sig dobrze z opisanymi tu
programami, bo w dalszej czESci ksi42ki wszystkie bgd4 wielokrotnie'u2)-wane. Opr6cz
przedstawionych tutaj wybranych opcji warto przyswoi6 sobie dokumentacjg udostqp-
nion4 dla wy2ej wymienionych aplikacji. Czas po6wiEcony na poznawanie narzEdzi
zwr6ci siE w dw6jnas6b podczas korzystania z nich.
Clx
t.,a
r --T_--
1.4. Zadania
Zadanie 1.1
Jaka jest r62nica pomiEdzy walidacj4 a weryfikacj4?

Zadanie 1.2
Czy GitHub to jedyna platforma do repozyforium zdalnego? JeSli uwalasz, ze rrie,
wymieri inne.

( )30
1

--tr
 Elementy
programowanla
na przyktad;zie
j+z a!avaScript-
Zasadniczymetapem Wtvvarzaria oprograrrrowania jest pisanie kodu aplikacji. W tym
rozdziale om6wimy elementy skladaj4ce sig na ten etap. Poka2emy, jak programowa6
w jgzyku JavaScript, cho6 w gruncie rzeczy moglibySmy wybra6 dowolny inny jqzyk
programowania. Pokr6tce om6wimy podstawowe niezbgdne umiejgtno6ci, tak2e te
niezwi4zane bezpoSrednio z JavaScriptem, jak pisanie kodu HTML czy stosowanie ar-
kuszy C S S. Je Sli umie j g t nie p ot4czy my ze sob q w szystkie p oznan e tu e Ie ment y, b gdziemy
w stanie stworzye prost4 aplikacjg webow4.
Na pocz4tku JavaScript byt prostym jgzykiem skryptowym, maj4cym na celu dodanie
prostych interaktywnych funkcjonalnoSci do stron internetowych. Z czasem odkryto
potggq tego jEzyka i obecnie jest u2ywany w kodzie prawie kaildej strony internetowej.
Efekty, kt6re mo2na uzyska( opieraj4c sig naJavaScripcie, to np. galeriezdjgQpopularne,
cho6 nie zawsze lubiane ,,wyskakuj4ce" okienka modalne czy moLliwoS6 wysylania
wiadomo6ci e-mail zpoziomtt, strony, atakLe niekiedy bardzo rozbudowane gry sieciowe
Za wyboremJavaScriptu (w dalszej czESci tego rozdzialu bgdziemy nazywaC go skr6-
towo JS) przemawia tak2e to, 2e wiele nowych tribliotek/framework6w oparto wlaSnie
na tym jqzyku. Innym atutem moLebye to, 2e pracuj4c nad kodem, rczrtltat naszych
prac mo2emy Sledzi6 w dowolnie wybranej przegl4darce. W tym podrgczniku przyjmie-
my wlaSnie tak4 strategig, to znaczy bgdziemy tLywae prostego kodu JS bezpoSrednio
w przeglidarce.Trzebajednak mie6 Swiadomo56,2e kodJS moLebye wykorzystywany
tak2e w skomplikowanych i bardzo rozbudowanych projektach, np. webserwisach

91,+'j
 Rozdziai 2. I ElemenV;programowania na przykladzie jezyka JavaScript

(na Nodejs, czylirozbttdowanym SrodowiskuJS, umo2liwi aj6cymm.in. asynchronicz-

n4-r62ne w4tki s4 wykonywane r6wnolegle pracg na tych samych zasobach wielu
u2ytkownikom, oparty jest cho6by Netflix). -Istniej4 r6wniez desktopowe aplikacje
oparte wyl4cznie naJS, np. Slack (jeden z popularniejszych komunikator6w u2ywanych
w firmach).
Tg czg56 podrEcznika kierujemy do przysz*ych programist6w. JeSli chcesz dol4czyt. do
tego grona, musisz poznaf pewne zasady pisania program6w (niekt6re z nich s4 sto-
sowane nie tylko wJS).
Nauka programowania jest jak nauka igzyka obcego, np. hiszpariskiego. Na pocz4tku
naleLy przyswoi6 charakterystyczne dla niego slownictwo oraz zasady gramatyczne
Wprzypadkt jgzykaprogramowania tg czg|e nazytvamy skladni1igzyka(ang. syntax).
W jEzykach naturalnych istotna jest takze interpunkcja. To, gdzie postawisz przecinek,
kropkE lub Srednik, ma niekiedy kluczowe znaczenie dla zrozrmienia komunikatu.
Jakzobaczysz, nie inaczej jest w przypadku jgzyk6w programowahia.
r\
;2-1. JS
- i co dalej?
Prawie kaLda strona internetowa sklada sig z trzech skladnik6w: HTML, CSS i JS.

Kod HTML (ang. HyperText Markup Language) zawiera treSc, ktora zostaje wyswiet-
-
lona na stronie. Zbudowany jest on z tagow, ktore mogq posiadac rozne funkcje, np, sE
to naglowki (ang header), cialo strony (ang. body) i stopka (ang. footer)
CSS (ang Cascading Sfz/e Sheefs), czyli kaskadowe arkusze styl6w
- zadaniem
tego narzgdzia jest przypisanie stylow elementom HTML, definiujqcych np wyglqd
czcionki, kolory, wyglqd akapitow, rozmieszczenie elementow na stronie. Stosowanie
CSS pozwala uniknqc powielenia kodu.
Silnik JavaScript (JS) kod JS odpowiadazazachowanie dynamicznych elementow
-
strony, umozliwia tez interaktywnoSc witryn. Kod ten jest interpretowany i wykonywany
przez wbudowany w przeglqdarkq silnik JavaScript lub inny przeznaczony do tego pro-
gram tzw, interpreter.
-
Aby lepiej wyjaSni6 te r62nice, uruchomimy przegl4darkg Chrome i wySwietlimy w niej
strong internetow4. W ka2dej przegl4darce mo2emy dokladnie prze!;ledzie, jak jest
zbudowana strona. Po klikniEciu prawym przyciskiem myszki i wybraniu z menu kon-
tekstowego pozycii Zbadai(lub wciSnigciu skr6tu klawiszowego Ctrl+Shift+I) uirzymy
po prawej stronie przegl4darki nastEpuj4ry widok (rysunek 2.1):

c32
p
 2.2. Skiadnia

TN
;lgov.Pl '
ryf{r
tktualroJd

e&Milf Vdvtv*xr:* bn
-
x dr{i
{kli*{r}
x trb pd*dili
wy**ryah 615

GIs, MZ i MTN
:1. in?rin*rt:riit.

Rysunek 2.1. Konsola przeglqdarki Chrome

W oknie konsoli mo2na tak2e wykonywad dowolny program napisany w jEzyku JS.
Program to zestaw komend, kt6re uruchamiaj4 sig jedna po drugiej tylko wtedy,
gdy wykona siE poprzednia komenda.

Dzigki lekturze tego i kolejnych rczdzial6w tej ksi42ki bgdziesz coraz lepiej rozumie6,
jak uruchamiaj4 sig poszczeg6lne komendy oraz cala aplikacja.

r^v
r\---r
t2.2. Sktadnia
2.2.1. Tagi
Elementem, kt6ry jest nam potrzebny do zrozumienia istoty jgzykaJavaScript (a w grun-
cie rzeczy tak2e HTML), jest tag. To pewien ztacz4cy ci4g znak6w rozpoczynal4cy
sig otwierajEcym nawiasem ostrok4tnym (<). Kaidy tag musi bp ponadto zamknigty.
Slu2y do tego sekwencja znak6w uko6nika i zamykaj4cego nawiasu ostrok4tnego (/>).

Tagi <body></body>, odpowiednio, otwieraj4 i zamykai4tzw. cialo strony interneto-

wej. Tagi (script></scrrpt> w,vdzielaj4 w obrqbie strony skrypt (program) napisany
wJS. Tagi mog4 by6 zagnie2dlone. Jak pokazano na ponizszym rysunku, tagi <head>
</head> oraz <body></body> zawieraj4 sig wewn4trz <hLmL></ html>.
Ponadto, jak wida6 na rysunku 2.2, w tagu head zawarliSmy r6wniez dodatkowe
informacje o tytule strony i iej kodowaniu.

L . dl{roCTYfE lltml}
ll. Externa, Libraries i :.:{html 1a*9""sa"3
,rl Scratche* and Cqnsote$ ,a r{head>
:, {rilfia r*i!r'ac1'''lllF-&":
, <titLelHBtj.on</tit:lr>
', {lhead}
. <bctiY>

r, </borly:
ql
, r: </i1tnl>
*:
TtsreimL l-*esl t *

Flysunek 2.2. Kod domyslnie wygenerowanej strony index.html

l

33',4
()
 Rozdziat 2. I ElemenV programowania na przykladzre iQzyka JavaScript

Nie musisz znac dokladnie wlaSciwoSci wszystkich tag6w. JeSli chcesz sig z nimi zapo-
znac, skorzystaj z ich zestawienia, ktore mozesz znale2c np. pod adresem https.llwww
w3schools. co n ltag s I tag _fitm l. as p.
Twoja znajomosc tagow bgdzie sig poglgbiai zka2dqnapisanq przez Ciebie stronq, lm
wigcej ich napiszesz, tym latwiejsze bqdzie kodowanie kolelnych

2.2.2. Skrypt JS a plik HTML

Teraz do domy6lnie wygenerowanei strony wstawimy nasz kod javascriptowy Na razie
zamie6cimy pusty plik start.is (rysunek 2.3).

Proied * 0 + t:.:, .,:. ,.arl r,:r,, .:r ii..l,:

'r Y
-rBPrqcctFiles*
:. {l[Sf,TlP€ lrl!L]
S6 -/lr{ehstoffiPreiectslb$6k
s *_tdea ., . {lt{l 1.rr1-"1;;':
E &&cas . <11!aC>
r *&is d0Ete ehfirset:"UlF-$">
P& &tsorilm <tltl*r Hrl"i*n<ltitl*?
r *g clen-cods
l', t/L*uo'
&& *nndition*16 *tnol>
1,,,
* 6* desls*-parern .s".&:t sr*. !'J5l5tartl6t*rt,ji"></seri,]t'
tr 11& t0qp
X
& obi€et-prssremminc
]'*&ortl"
I
'"
e 3* $tarl l:,:{(.i!a{q!S

&aray,is
&bools&n.i5
ii& $tari.j$
d&string*i5
& templat€-littral6.is
;* larisbtg-eonst-leti g
* variabies.is
i-. iaar.ilrl

Rysunek 2.3. Skrypt start.js zamieszczony wewnatrz kodu strony index.html

Kody zarowno HTML, jak i CSS, a przede wszystkim skrypt6w JS znale2c mozna
-
w serwisie G itHub, pod adresem https I I g ith u b. com I wero n i kako rtas I book,
:
-

Aplikacje webowe, jak ju2 wspomniano, skla- Project Proi-e,

_rrl
daj4 sig ztrzech element6w Kazdy z nich dla , :r:r: -lwebstormProlects/book
wigkszej przejrzystoi;ci kodu najlepiej jest od- .,4! i, li..idea
ir trti,css
dzielat od pozostatych. W projekcie aplikacii .. ttiii js
bgdziemy mieli zatem trzy pliki (rysunek 2.4). o*

N1

Rysunek 2.4. Struktura aplikacji we-

l bowej w widoku projektu w WebStorm
()34
o
 2.2. Skladnia

w tej chwili skupimysig wyl4czni e na start.js i index.html, pomijaj4c folder css, zawie-
raj4cy kaskadowe arkusze styl6w.
To kod HTML odpowiada za to, co znaiduje siE na stronie. w pliku HTML mozna
umie6ci6 jei tre56, np. nagl6wki, akapity tekstu, listy wypunktowane, obrazki czy
odsylacze do innych stron. JavaScript odpowi edzialny jest zawykonywanie akcji, np.
obliczeri czy zloilonych interakcji z uLytkownikiem. Aby poinstru owae przegl4darkg
internetow4,2e ma wykona6 napisany przez nas kod JavaScript, w pliku HTML trze-
ba zawrzee informacjg o tym, 2e na naszej stronie bgdziemy rLywae skrypt6w, kt6re
znajdui4 sig w pliku start.is. czynimy to, zamykaj4c Scie2kg do pliku w znacznikach
<script)</script>, jak na rysunku 2.3.

Jak juz wspomniano, phk index.html to domySlny nowy plik w formacie HTML. ge-
nerowany za pomocE srodowiska webStorm. zwroc jednak uwagg, ze stanowi on
prostq, ale kompletnq i dzialalEcq aplikacjq Wystarczy kliknqi w prawym gornym
rogu przeglqdarki by od razu zobaczyc rezultat. Mozna lez znale2c plik na dysku
i uruchomic go za pomocq chrome (zgodnie z instrukcjq zamieszczonq w pierwszym
rozdztale).

wspolpraca miqdzy kodem HTML a JavaScriptem nie ogranicza sig jedynie do po-
jnstruowania przeglqdarki internetowej znacznikiem <script> o koniecznosci
wykonania skryptow ze wskazanych plikow z poziomu skryptow JS mozliwe jest
odczytywanie tresci strony internetowel, wplywanie na je1 zawartosc i wyglqd jak
rowniez reagowanie na dzialania uzytkownika i zdarzenia np. kliknigcie przycisku
lub przewinigcie strony do okreslonego miejsca. Aby taka -wspoipraca byla mozliwa,
przeglqdarki internetowe udostqpniajq dla JavaScriptu model obiektowy dokumentu
(DON/, ang. Document Object Model) i modet obiektowy przeglqdarki (BOM, ang.
Browser object Model)
- zespoly klas i interfejsow pozwalalqcych na dostqp do
zawarto6ci strony internetowej i interakcjq zprzeglqdarkq i uzytkownikiem z poziomu
kodu skryptow.
w tym rozdziale poznasz podstawy skladni lgzyka Javascript, jak rowniez jego bar-
dziei zlozone elementy, takie jak obiekty i kolekcje, ktore utatwiq Ci zaznajomienie siq
z tymi interfejsami. Jesli chcesz siq z nimi zapoznac, zajrzyi np. pod adres https.ll
www.w3schools.comlislis htmidom.asp, gdzie znajdziesz obszerne informacje na ten
temat.

35 i-
-----r:-
 Rozdzial 2. I Elementy programowania na przykladzie jqzyka JavaScript

2.2.3. Wyswietlan ie komu n kat6w i

Rozbudujmy teraz r,asz skrypt. Na pocz4tek niech ma w sobie wyl4cznie komunikat

informuj4cy o tym, 2e uLytkownik odwiedzil nasz4 strong. Do wySwietlania takich
komunikat6w slu2y polecenie af ert (rysunek 2.5).

o.oiect o,or€ctr,'es -. C .:r,

! -
!" -,*"or,o-,*io,".,,loooi dlent(' .', t- );
n .oea
:L,,: ,: ,,,,, css
le : l:l:js
li : :::raiqoritm
t , r::: .iean-code
{r . lit: ccnditiorals
'i . a,:, design-pattern
.. t' ii:l loop
,' ,,,,, r0j.",-programming
oE I' llii slad
i;.aray,ls

Ss$lngs.is
*, teeplaie-literals.is
& va.iable-const-let,is
S variable.js
& irdex.html

Rysunek 2,5. lnstrukcja w skrypcie start.js wySwietlajqca powitanie

Niemal kaidy pocz4tkuj4cy programistazaczyna od komunikatu,,Hello world". P6id2-
my tym tropem i my
Teraz czas doda6 nasz alert do ju2 wczeSniej dziaLaj1cej aplikacji (rezultatem ma by6
wykonanie kodu strony i wySwietlenie zapisanego w skrypcie komunikatu).
Aby uzyska6 ten efekt, nalely nasz skrypt podlinkowa6 do strony index.html. Pokazy-
waliSmy to ju2 wczeSniej (na rysunku 2.3);tymrazem nasz skrypt nie jest jednak pusty,
inna jest teL iego lokalizacja (rysunek 2.5).

ffi Prorect & Prci*t Fires -

Ht8
ffi ! W -,4/vebstamProiscls/book <IS0CTYP€ tit{1}
ffi . **.ioea S.8! l*rt..en':
ffi "t mcss <head>
: *: x*it iesta ehnrs€t."UJF-&"t
,4, r M st*arttm <tit1.>fi etlsn</tit1e>
1.*1 t s* etsr-.ldc <l*esd>
T,
*:
t ,1s {onditi.natg I -;^"_-
1

I
t mdesign-*€ttern .P <leript $re = "jsl$tartl$tart,js"r<ls6ript>
ial s ildt*op
.i:<gouy>
i €. a &&obiect-proqnm*ing
|

]El e w*im 1.,$@S

+-" & array'ls
, : *booien.is
,.: t&siad'l$
:. I &sr.iose.is
: I * templatc-litsBls.r$
: I &vpieble-eost-letj6
a: *va,iebl€r.is
: l.t*W@XXttre}*
te,mina: aocat +
*-

Rysunek 2.6. Plik index.html z ,,podpiqtym" skryptem start.js

I

(:T-
.lJo
 2.2. Skladnia

Do dodania skryptu znaiduj4cego sig w katalogt is nale|y uLyc tagu script i doda6 do
niego wlasciwoS6 informu jEc4 o tym, gdzie ten skrypt sig znajduje. Musimy zatem uLyt
skladni (script src : " nazwa kataTogu/nazwa skryptu. j s,,)1/script>;
w naszym przypadku u2yliSmy jei w 8. Iinii domySlnego pliku HfHAf.
Po uruchomieniu pliku uzyskamy nastqpuj4ry efekt (rysunek2.7):

Hsll0 rcdd

---;;;

Rysunek 2.7. Okno wyswietlone po wykonaniu skryptu start.js

Komunikat zostal wySwietlony w oknie alertu, kt6ry jest widoczny dla u2ytkownika
odwiedzaj4cego naszq strong. A co, ieSli chcemy uzyskae informacjq widoczn4 takze
dla nas?
W takim przypadku nale2y doda6 do skryptu wiersz powoduj4cy wyslanie komunikatu
do okna konsoli, u2ywaj4c polecenia pokazanego w drugiej linijce na listingu 2.1:

Listing 2.1
Przekierowanie komunikatu do okna konsoli

1 . ert ("Fiello ruorld', ) ;

af
2 . console.log ("Hello world', ) ; // przekierowanie komuniktttu tlct okna kctnsoli

Naipierw pojawi siq alert w wyskakuj4cym okienku to skutek wykonania instrukcji

aiert z pierwszej linijki (rysunek 2.8). -

Komunikat z bieiqcej strony

H*l,o wor,d

Rysunek 2.8. Okno z komunikatem alertu

w
Nastgpnie, po klikniEciu OK, ten sam komunikat zostanie wy6wietlony w konsoli prze-
gl4darki dzigki drugiej instrukcji skryptu (rysunek 2.9).

G il' elc{r}eirls Consola Sour*ea l{et*n.t 6 ; X

"
ffl & top a & i.nrt lleiauLt*v&l* v
lrello world alnlt' is:2
, I

Rysunek 2.9. Ten sam komunikat wySwieflony w konsoli

e7 i/-.-,
.J/
i

L -r'
--q-
 Rozdzial 2. I Elemenhl programowania na przykladzie jQzyka JavaScript

2.2.4. Warto korzystac z IDE mechanizmy

-
autouzupelniania kodu i sygnalizacji btqdow
Skoro iu2 wiesz, jak uruchomit naszprzykladowl, skrypt, dowiesz siE teraz, jak wygl4da
pisanie poleceri wJavaScripcie: jakich sl6w nale2y uLyt,kiedy i jakie stawia6 punktory
(Sredniki, kropki). Stowem: zapoztasz siE z podstawami skladni. Oczyr,vi6cie w tym
podrgczniku skupimy sig tylko na tych jej elementach, kt6re s4 nam niezbgdne Nie
wszystko bgdzie jasne od razu,wigc zalecamy przeczTtae poszczeg6lne fragmenty kilka-
krotnie, aprzede wszystkim odrazupisa6 je w IDE, np. WebStorm, kt6re mozna pobraC
ze strony jetbrains.com lub z darmou)rch edytor6w, takich jak Atom lub Visual Studio
Code. Warto zapisywae sobie elementy skladni na kartce w celu jej zapamigtania, ale
korzystanie z IDE ma tgzaletE, ze udostgpnia ono mechanizm uzupelniania skladni,
a ponadto poprawia (lub przynajmniej sygnalizuje) wiEkszoS6 btEd6w.

Pruyklad.2."L
Zacznijmy teruz pisae w)'wolanie albrt (rysunek 2.10).

! a1 i r. ,.-l ,l
'".r.

:',
---il

Rysunek 2. 1 O. Mech antzm autouzupetni an ia polecen

Po wpisaniu kilku liter pojawila sig podpowiedZ sugerui4ca petn4 rrazwg funkcji. Jak
sig mozna domySli6, alert przyjmuje i wySwietla dowolny napis. Napis wJavaScrip-
cie mo2na umie6ci6 w cudzyslowie, przy czym trzeba pamigtad, aby poda6 zar6wno
cudzysl6w otwieraj4cy, jak i zamykaj4cy (rysunek 2.11).

, 01ert( " He 11* ,lrrlc| .

Rysunek 2.1 1. Mechanizm poprawiania skladni wskazuje blgdy

we wpisywanych poleceniach
My mozemy jednak tego
Jak wida6, nasze IDE ju2 podpowiada nam, 2e co5 jest nie tak.
nie zauwa|yt i mimo to uruchomi6 nasz skrypt. Pr6ba wykonania kodu skof,czy sig
r,r,6wczas blgdem (rysunek 2.12).

€,el:rar*s Consola $o*rces. Netwo* .)} r :&r L $ i Y,

r.] & *p Y {S {,,... o$tau816?eb v

a Jnlalchi 5votdxurror; lr,ua1id or un*xreated loken 9ta!:t-,-i-5,i,1

Rysunek 2.12. Wyswietlony w konsoli komunikat o blgdzie

Aku mt w tym przypadku zabraklo cudzyslowu zamykaj4cego.

l38
,--xr
 2.2. Sktadnia

Ltczba cudzyslowow w skrypcie musi byi parzysla ka2dy cudzyslow musi mie6
zakorczenie. -

Przyklad2.2
Spr6bujmy teraz uruchomi6 skrypt napisany w taki oto spos6b (rysunek 2.13):

r 0lert( "ucl,l,o u0r1d"..,.

Rysunek 2.13. Mechanizm poprawiania skiadni wskazuje btgdy

we wpisywanych poleceniach (cd.)
Tym razem wpisaliSmy cudzysi6w zamykaj4cy.Jednak, jak r,r,ida6, IDE podkre6lilo miej-
sce za ostatnim wpisanym znakiem wtaSnie cudzyslowem. To sugeruje,2e i tym razem
-
popelniliSmy b14d. Aby sig o tym przekonad, zn6w uruchomimy skrypt i zobaczymy,
co pojawi sig w konsoli (rysunek 2.14).

fi .fi. . []*m*nts consolo ]r*e*.

, N,:t qrork ]] . ., r: *et I'.&,,'..i.,,,W.
If O 1op r (, r.,, ls&u.i?Yl-1,.,,, : .6
;,,,,.,,,,
*r-u"i,,g;itn;;;i;;;, ;i;;;-i'itr". "'$";;-ilii slart. Jsjf
,

Rysunek 2.14. Komunikat o btqdzie inform'uje,

ze na koncu polecenia zabraklo nawiasu zamykaj4cego

Kazdy nawias (czy to kwadratowy, czy p6tokrqgty, czy klamrowy) musi byi domknigty.
Podobnie jak w przypadku cudzystowow, liczba nawiasow musi byc zatem parzysta.
Ponadto nawiasy muszq byc zamykane w kolelno6ci odwrotnel do tej, w ktorel byly
otwierane: { ([
]) ].

Przyklad2.3
Spr6bujmy zapisa6 slowo alert, zaczynaj4c od wielkiej litery (rysunek 2.15).

Alert("*el-11 r*erl,d") ;

Rysunek 2.15. Wielko6c liter w JS ma znaczenie

Uzupelnili6my do pary nawiasy i cudzyslowy, nic nie zostalo podkreSlone na czerwono.
Czy zatem wykonamy kod bez blgdu? Zobaczmy (rysunek 2.16).

3e (_)
 Rozdziai 2. I ElemenV programowania na przyktadzie jezyka JavaScrrpt

-.i\1i1rmrt. .> . .

'i-, lJ rep ' G} L)etault iovels *

{& }Un{aught ,lefrrerc€frrori Alrrt is ort defired slart,js:l
a\ >id,..Ju

Rysunek 2.16. lnterpreter nie rozpoznEe stowa,,Alert" jako nazwy metody

Tym razem wySwietlony zostal komunikat z informacj4,,Alert is not define d" . Oznacza
to, 2e dane slowo nie wystgpuie w5r6d dostgpnych mo2liwych wywolari, w szczeg6lno6ci
nie zostalo rozpoznane jako polecenie af ert.

Wielkosc liter w JS maznaczenie.

Pruyklad2.4
Spr6bujmy teraz wypisa6 ,,Helio world" i w konsoli, i w oknie alertu. Ulyymy polecefl
z rysunku 2.77 (1eSli widzisz w nich blgdy, to dobrze; na razie jednak nie przejmujmy
sig nimi):

Alert ("ile110 yrer'l.ij" ) ;

consote.tos( "4ci Lr r',,:r' rtt'

Rysunek 2.17. Jesli w skrypcie popelnimy dwa btqdy.

Po uruchomieniu tak napisanego skryptu uzyskamy w konsoli komunikat pokazany
na rysunku 2.18.

& t I €lemeit$ Consolo Sourcr$ $le&ro& }} & I ix

&l & 1aP & {':,,.t lreta{]lt,8vets Y
tl U,1(JJgl,t ))/ta{L:.C' i 4.551.q ) o':er br!.rre1J '.r51 start.js:2
)

Rysunek 2.18. ...po jego uruchomieniu zostanie zgloszony jeden z nich

Informuje on nas o tym, ze brakuje nawiasu w drugiej linijce (zgodnie z informacj4
zawart4 na koircu liniiki start.js:2).
-
Poprawmy ten bt4d i od6wiezmy strong (rysunek 2.19).

'. Atent( Hclio,,lorlri");

console.tog("He1 io v;o^id") ;

Rysunek 2.19. Po poprawieniu zgtoszonego btqdu...

()40
,)
 2.2 Skladnia

Tym razem w konsoli otrzymaliSmy kolejn4 informacjg o blgdzie (rysunek 2.20).

{;. *-: fim*r*$ Console $ou(a$ N*tefi* )t 4& 1

'; S top
' G) Derdu,r laets v
* ,Un.ruqhl R€ferena?frror: ,.lert 1s *c1 .iefj.ned start j r:1
et:il;ajt,jr:1 "

Rysunek 2.2O. ...zgloszony zostanie kolejny btqd

Ten bl4d takze widzieliSmy ju2 wcze6niej, wiemy wigc, na czym polega. WpisaliSmy
Alert, a poprawnym poleceniem jest alert.
Po poprawieniu tego blgdu wreszcie pojawi sig okno alertu, a w konsoli otrzymamy
(rysunek 2.21):

-* il Eiemefis Console Sourcos Notwork > ix

O*ls*lt l€?*!s Y

X*llo *arld tta.!. j r,

)

Rysunek 2.21 . Pograwny wynik skryptu wySwietlony w konsoli

Wynika ztegqLeblgdy w konsoli poiawiai4 sig kolejno, zgodnie z wystgpowaniem
w kodzie, a zatem nawet po usunigciu iednego blEdu mo2e pojawi6 sig drugi.
WidzieliSmy ponadto, 2e komendy wykonuj4 sig po kolei. W konsoli napis pojawii sig
dopiero po kliknigciu OK w alercie z przegl4darki.
Co wigcej, mo2nabylo zartwaLy6, ze wJS, inaczej ni2 w wielu innych jgzykach progra-
mowania, Srednik nie koriczy polecenia. Mo2emy go postawiC na koricu instrukcji, ale
nie musimy TolizaleLy od tego, w jaki spos6b latwiej bgdzie zrozumiee,gdziekohczy
sig polecenie JeSli .uqvraflnie wida6,2e jedno polecenie przypada na jedn4 linijkE, to
mo2emy nie stosowa6 Srednika na koricu, jednak nie powinno sigt4czy1 dw6ch podej66
i je6li stosujemy zapis bez Srednik6w, to nale2y go stosowa6 wszgdzie.

2.2.5. Komentarze
W celach edukacyjnych bgdziemy stosowali komentarze, by opisa( co w kt6rym miejscu
kodu siq dzieie Ich stosowanie jest dobr4 praktyk4 programistyczr4. Utatwiaj4 orienta-
cjE w kodzie wlasnym, kiedy wracamy do niego po dltzszej przerwie, jak
- zar6wno
i (tym bardziei) cudzym. OczywiScie nie ma sensu wyjaSnia6 w komentarzach ka2dej
linii kodu, nie powinni!;my te| tego robi6 w przypadku tych fragment6w, kt6rych
przeznaczenie jest dla os6b znaj4cych skladnig jgzyka oczywiste. Trzeba ponadto pa-
migta6, 2e w praktyce kod powinien by6 pisany tak, by komentarze byly zbqdne. Nazuy
zmiennych i metod powinny by6 na tyle jasne, by osoba czytaj4cakod nie potrzebowala
dodatkowych wyj aSnieri.

41 {-;
_ cr_-
 Rozdzial 2. I Elementy.programowania na przykladzie jqzyka JavaScript

Wyr62niamy dwa rodzaje komentarzy:

. komentarze jednolinijkowe,kt6rerozpoczynamy dwomaukoSnikami (/ /);pomig-
dzy tymi znakami nie mo2e wystEpowa6 spacja ani zaden inny znak (listing 2.2);

Listing 2.2
Komentarz jednolinijkowy

// Komentarz j ednolinijkowy

. komentarze zajmtj4ce wiele linii, kt6re umieszczamy pomigdzy znakami / * a*/

(listing 2.3).

Listing 2.3
Komentarz skladaj4cy sig z wielu linii
/" Komentarz

wielolinijkowy

JeSli poprawnie udalo nam sig napisa6 ten element kodu, to jest on y{yszaruoty.
Warto by6 Swiadomym, 2e nic spoSr6d tego, co jest komentarzem, nie ma wptywu na
dzialanieprogramu jest to podczas jego wykonywania pomijane Ztego wzglEdu dzigki
-
komentarzom mo2emy w latwy spos6b ,,wyl4cza(" fragmenty kodu, kt6rych wykony-
wanie chcieliby3my chwilowo zatrzyma( (np.'niedokohczone lub potencjalnie blgdne).
,/---l>
JZF9. Podstawy programowan ia
Aby m6c stworzyC peln4 aplikacjg,trzebanajpierw nauczy1 sig podstaw programowania.
Pewne podstawowe informacje zwi4zane ze skladni4 jgzyka jrLzaprezentowali3my Ten
rczdzial stanowi wprowadzenie w tajniki programowania; zasady tu poznane lyyko-
rzystamy w ostatnim rczdziale.
Nie jest to petne kompendium wiedzy dotycz4cej programowania w jEzyku JavaScript. Jest
to zaledwie niezbgdne minimum, pozwalaj4ce na stworzenie prostej aplikacji webowej.

2.3.1. Zmienne (var)

W tym i kilku innych punktach rozdzialu skupiamy siq na opisaniu deklarowania zmien-
nych i tworzenia obiektow w jqzyku JavaScript. Nalezy tutaj podkreSlii, ze w innych
jgzykach (choc nie we wszystkich) deklarowanie odbywa siq poprzez jawne oznacze-
nie, lakiego typu zmiennq chcemy utworzyc. Jqzyk dynamicznie typowany, taki jak
JavaScript, nie wymusza na programiScie deklaracli typu zmiennej, lecz pozoslawia
interpretacjg zmiennej interpreterowi na podstawie 1ej zawarto6ci,
 2.3. Podstawy programowanra

JavaScript jest ponadto jgzykiem interpretowanym, co ozracza, ze specjalny program

interpreter analizuje napisany kod (czyli kod zrodlowy) i nastqpnie przeklada go
- -
na kod maszynowy, czyli informacle przelwarzane przez komputer.
Niektore jqzyki (jqzyki kompilowane) zamiast interpretera stosujE kompilator, klory rozni
sig od interpretera tym, 2e od razu tlumaczy caly kod programu W przypadku interpre-
tera natomiast program tlumaczony jest na biezqco od momentu jego uruchomienia,
instrukcja po instrukcli
Jqzykami interpretowanymi sq np JavaScript albo Python. Jgzykiem kompilowanym
jest np. C+ +

W przypadku programowania zmienne maj4 za zadanie zbieranie, przechowywa-

nie i przekazywanie dalej (np. do metod) informacji potrzebnych do wykonania
programu.

Pruyklad,2.5
WyobraL sobie aplikacjE bankow4. Wiadomo, 2e musi by6 w niej przechow),wany,
wySwietlany i bardzo czgsto modyfikowany stan konta. Nie bgdzie on zatem war-
toSci4 stal4, a zarazem musi byC zawsze dostgpny W Swiecie programowania do
przechowywania stanu konta (i innych wartoSci mog4cych sig zmienia6) doskonale
nadaje sig zmienna, kt6ra jest dynamicznie modyfikowana w zaleznoici od tego, czy
co6 zostalo wplacone na konto, czy teL wykorzystano Srodki z konta nazaktpy.Przy
kaLdej operacji bankowej zawartoi( zmiennej bgdzie inna. Informacja o modyfika-
cji, podobnie jak bie24cy stan konta, nie musi byt kaLdoruzowo wySwietlana tLyt-
kownikowi; walne,by kaida zmiana byla odzwierciedlana w zawartoSci zmiennej,
dostgpnej w kodzie aplikacji.

lm mniejsza liczba zmiennych, tym czytelniejszy jest nasz kod. Przed utworzeniem ko-
lelnej zmiennel musimy sig zastanowic, czy nie istnieje juz gdzieS jakas inna, ktora
przechowuje potrzebne nam wartoSci.
Trzeba tez pamiqtac o tym, zeby jednoznacznie identyfikowai zmienne, JeSli wyobra-
zimy sobie zmiennq jako adresata listu, a program lako skrzynkq na korespondencjq,
latwo zdac sobie sprawg z tego, ze omylkowe wystanie listu do niewlasciwego adresa-
ta nie byloby najlepszym rozwi4zaniem.

43{)
Rozdzial 2. I Elementy programowania na przykladzie jqzyka JavaScript

Przyklad,2.6
Utw 6r zmy pierwsz4 zmierrr,4. W naszym kodzie bgdzie ona slu2yta do przechowl.wania
komunikatu do wySwietlenia (rysrnek2.22).

:::31
;':::l*
I yar l}lessage;
,.*:i
,arta . console,1og(nessage)
,7, I
I

NI
,t

Rysu nek 2.22. Utvr orzen ie (dekl aracja) zm ien nej

W celu utworzenia zmiennej trzeba poda6 Slowo kluczowe var, kt6re jest skr6tem
od angielskiego vari able, oznaczaj4cego zmienn4. Nastgpnie podajemy nazwg naszej
zmiennej w tym przypadku message.
-

Warto pamiqlac, ze nazwy zmiennych powinny byc takie by jak najlepiej informowaly
o przechowywanych w nich warto6ciach powinny byc znacz4ce. Nazywanie zmien-
-
nych x (moze z wylqtkiem niektorych dzialan matematycznych) czy mojaZmienna
nie jest zatem dobrym pomyslem. Dobrym zwyczalem jest nadawanie zmiennym nazw
w jqzyku angielskim, ale nie jest to wymagane, Warto natomiast spojnie lrzymac siq raz
obranego sposobu nazywania zmiennych,

Warto zauwaZyc, ze zmieniliSmy skrypt, ktory wykonulemy. Wida6 to po lewej stronie

rysunku 2.22 Tym razem jest to variables.js. Musimy wigc wpisac go do kodu strony
index.html (listing 2 4).

Listing 2.4
Zmieriamy w pliku index.html informacjE o skrypcie, kt6ry ma by6 wykonywany

:;++
 2.3. Podstawy programowania

< I DOCTYPE html>

{htm1 lang:"sn";
(head)
{meta charset=t'UTF-8 ">
<titie>Helion</titte>
< /head>
<body>
<scrrpt src:"js/start/variables. ;s"></script>
< /bocy>
</htmI>
obecnie nasza zmienna nie ma Zadnej wartosci. Czy to ozrtacza,Ze kiedy wypiszemy
j4 w konsoli, bgdzie pusta?

Spr6bulmy to zrobi6 (listing 2.5).

Listing 2-5
Pr6ba odwolania sig do zmiennej, kt6rej nie przypisano 2adnel wartosci...

var message;
console.log("zaviarto66 message " + message) ;

Efekt wida6 na rysunku 2.23. lJzyskalismy bl4d undefined, kt6ry w tym przypadku
oznacza, ze do zmiennej nie zostala przypisana Ladna wartoS6.

X g': rl*meit& Console sourreg

l{ S t.lp Y (, ::. '*sfdr*&ytab . :.

"
vari?t:C.5, j s: ?

Rysunek 2.23. ...skutku1e wyswietleniem informacji,

ze nie zdefiniowano zawartosci zmiennej
Teruz ptzypiszmy do naszej zmiennej wartoS6. Robimy to w 3. linii kodu zlistingu 2.6.
Przypisanie wartosci do zmiennej uzyskuje sig za pomoc4 operatora :, kt6ry wpisu-
iemy pomigdzy nazw4 zmiennej a wartosciq, jakq chcemy jej nada6. pamigtaj, Le aby
przypisa6 do zmienne j ci1g znakow, trzeba uj4d go w znaki cudzysiowu.

Listing 2.6
Przypisujemy do zmiennei wartoS6

1 var message,'
2 console.log("zawarto36 message ,, + message);
3 message = "Informac;a o uZytkowniku";
4 consoLe.log("zawarto56 message " + message);

45f':
Ll
Rozdzial 2. I Elementy.programowania na przyktadzie jezyka JavaScript

Po wykonaniu skryptu uzyskamy taki rezultat (rysunek 2.24):

Rysunek 2.24.Ylyswietlona w konsoli zawartosc zmiennej message

Tak oto przypisaliSmy poprawnie wartoS6 do naszej zmiennei.
Od tej pory (o ile nie zmienimy wartoSci zmiennej message) mo2emy m6wi6, ze mes-
s age jest referencj4 (odwolaniem/wskazaniem) do wartoSci,,Informacja o uzytkowniku".

Ul,uAGA
Przy zmianie wartoSci zmiennej nie uzywa siq juz siowa kluczowego var, ktore sluzy
wylqcznie do tworzen ia (deklaracji) zm ien ne1.
GdybySmy je zastosowali utworzylibySmy nowq zmiennq, a WebStorm (lDE) podpo-
wiedziaiby nam, ze taka zmienna juz istnieje (rysunek 2 25)

,helion ,,,, .',,::a. ::.: :.::

..i,3lyl.5 c!5

Rysunek 2.25. Ostrze2enie przed zdublowaniem zmiennej

46
 2. 3. Podstawy programowania

Przypisanie warto6ci do zmiennej w C++ wymagaloby jawnego wskazania (i to wcze6-

niejszego, juLna etapie deklarowania zmiennej), jakiego typu chcemy u2y6. WJS, kt6ry
jest jgzykiem dynamicznie typowanym, nie jest to konieczne.

W przypadku napisu w C++ nalelaloby uzye 1ablicy znak6w typu char, czyli przypi-
sanie do zmiennej messag'e napisu wygl4daloby tak:

char messagell = "Informacja o u2ytkowniku";

Alternatywnie (i proSciej) moznaby uLy( typu string, ale wymagaloby to importo-
wania zewngtrznej biblioteki (o czym jeszcze napiszemy p62niej).

Trzeba byc takze 6wiadomym, ze utworzenie zmiennej o takiej samej nazwie, jakq ma
juz inna zmienna, skutkuje przesloniqciem tej pierwszej. Oznacza to, ze od tej pory
widoczna bqdzie w kodzie tylko ta druga zmienna. Jakakolwiek proba odwoiania
sig do zmiennej poprzez jej nazwg
alert (message) bqdzie skutkowala - np wdzialaniem
celu wySwietlenia za pomocE polecenia
na tej warto6ci, ktora zostaia
-
przypisana do pozniej utworzonej zmiennej,

Nie wszystkie nazwy zmiennych sq dozwolone. Nie mozna np, uzywac do nazywania
zmiennych siow kluczowych jqzyka JavaScript, ktore zestawiono w tabeli 2,-1.
Tabela 2.1. Lista zarezerwowanych stow kluczowych
abstract boolean break byte CASE

catch char cfass cons t continue

Cebugger default de lete do double
else enum extends false
final frnally float for functlon
goto if implements import in
instanceof int i nte r face 1 ong native
new nu 11 package private protected
publr c return short s tat.i c super
switch synchroni zed thi s throw throws
transient true try typeo t var
vord vof at.i 1e with

47:
 Rozdzial 2. I Elementy. programowania na przykladzie Jezyka JavaScript

2,3,2. Zmiana warto6ci zmiennych

Czasem w trakcie dzialania aplikacji chcemy zmieni6 wartoS6 j:u,L raz zdeklarowanej
zmiennej.
W kodzie zaprczentowanym na listingu 2.7 mamy np. zmienn4 sum. Pocz4tkowo przy-
pisaliSmy jej warto66 3. W linijce 2. chcemy jednak zmieni6 wcze6niej zadeklarowan4
wartoS6, dodaj4c do niej 10.

Operatory matematyczne dziatajE w JS tak samo jak w matematyce.

Listing 2.7
Modyfikowanie warto3ci zmiennej sum poprzez dodanie 10 do iei pocz4tkowei wartoSci
i var sum : 3,'
2 sum -= 10;
3 consoie. log (sum) ;

W jgzykach C , lub Java zadeklarowanie zmiennej typu liczbowego i jednoczesne

przypisanie do niej warto6ci wyglqdaloby tak:
int sum : 3;
a powigkszenie tak:
sum +- 3;

Dostqpne w JS operatory matematyczne to: dodawanie (+), odejmowanie (-), mno-

zenie(*) dzielenie (/) i modulo, czyli reszta z dzielenia (?) lch priorytet (kolelnoSc
wykonywania) jest taki sam 1ak w matematyce,

W praktyce konstrukclg typu:

s.n = q-m 10,'

zazWCZq zastgpuje siq nastgpujqcym rownowaznym (a krotszym) zapisem:

sum +: 10;

I
I

::)48
 z.J. rouslawy pr ugrar I ruwar ild

Oczywiscie w taki skrocony sposob mozna zapisac dzialanie z uzyctem dowolnego

operatoramatematycznego(+-, -, *=, /-, Z:).

Przyklad2.T
ZaloLmy, ze utworzona wczeSniej zmienna sum przechowuje kwotq do zaplat,v za za-
kupione produkty Zwigksza sig ona o odpowiedni4 kwotg po ka2dym zakupie. w tym
przykladzie dodajemy do sumy zakup6w leszcze podatek, kt6ry jest naliczany do
kazdego kupionego produktu.

Podatek zadeklarujemy na poziomie 30%. Mo2emy go zapisa6 w kodzie jako ulamek

0,3 linijka 1. na listingu 2.8.2wr6t. jednak uwagq nato,2e czgSci dziesigtne ulamk6w
-
zapisuje siq w programowaniu po kropce, a nie po przecinku.

Listing 2.8
Wyliczenie i wySwietlenie kwoty do zaplaty powigkszonei o podatek
1 rrar tax : 0.3;
. . .t .ax;
3 console.ioE("slma zakupow z podatkrem " + sum);

Ostatecznie sum4 bgdzie zaS dotychczasowa suma zakup5'ar plus podatek, naliczany od
ju2 obliczonej kwoty. Podatek to inaczel suma zakup6w pomnozota ptzez wskazan4
warto66 podatku, czyli surn*tax. Po obliczeniach wypisujemy wartoS6 powigkszon4
o kwotq podatku w konsoli.
Zauwa2,Ze + ma w programowaniu jeszcze jedn4 funkcig. W wierszu 3. nie wykonuiemy
juL Zadnych obliczeh, ale za pomoc4 plusa informuiemy program, ze po komunikacie
ujgtym w cudzyslowy ma wy5wietli6 jeszcze aktualn4 rvartoSe zmiennej sum.

Do wyliczenia podatku uzyliSmy liczby 0,3, czyli tzw.liczby zmiennoprzecinkowel. W JS

zmienne clo przechowywania takich liczb deklaruje siq tak jak pozostale zmienne, czyli
bez okreslania typu.
W przypadku lqzyka C++ typow liczb zmiennoprzecinkowych jest wiqcej. Moze to
generowac problemy podczas wyliczen, gdyz float zaokr4gla dane z 7, B cyfr po prze-
cinku, a double z 15 cylr. JeSli w naszym programie porownalibySmy liczby zmienno-
przecinkowe o takich samych wariosciach, ale roznych typach, nie moglibySmy ocze-
kiwai, ze we wszystkich przypadkach wynik bqdzie taki sam, gdyz w rzeczytrvistosci
liczby nie bylyby takie same.
W kazdym lgzyku, w jakim tworzymy, warto na poczEtku dokladnie zapoznac siq z do-
stqpnymi typami zmiennych.

4ee
----
 Rozdzial 2. I Elementy programowania na przyktadzie jqzyka JavaScript

2.3.3. Definiowanie zmiennych (let i const)

Je3li definiujemy zmienne za pomoc4 slowa kluczowego var, czasem mo2e \ rystApia
problem nadpisania zmienne j w trakcie dzialania programu przez inn4zmienn4. Dlatego
w nowszych wersjach JS u21'wane s4 slowa kluczowe 1et i const.
Om6wmy najistotniejsze r62nice migdzy nimi.
Nazwa const jest skr6tem od slowa constant, oznaczai4cego niezmiennoS6/stalo56;
w praktyce ozuacza to, Le raz zdefiniowanej za pomoc4 const zmiennej nie mo2na
zmienid. Nazl-wamy j4 wtedy stal4.

Pruyklad2.8
DodaliSmy do naszego projektu nowy plik: uariable-const-let.js. W zwi4zkt z tym
w pliku index.html zmieniliSmy skrypt, do kt6rego sig odwolujemy Na rysunku poni2ej
widzimy zawartoie tego skryptu. Utworzyli6my w nim (za pomoc4 slowa kluczowego
const) zmienn1 staf a (dla nazw zmiennych lepiej jest nie:uzryae polskich znak6w)
i przypisaliSmy iej warto66 2 (rysunek 2.26).ZauwaL,2emoznazadeklarowa(zmienn4
iprzypisal do niej warto66 w jednej linijce; dotychczas robili3my to w dw6ch osobnych
poleceniach.

:,,r Prcjecl Fil{s Tests .t .,.:,',:: -r.. :.a -- ;r ,/ari0"-crisi-iei.js rr ta.iables lS :ll,: :

s &* -lWebstormPro;ectslbaok const stala =

?w -tdea
?t
e & irlspeetionProtiles
t#3 Proieet-Oef au't.xr.1
}a &jsl_inters
$modules.xrnl
3 ..^^ --r
ffi vwi.^,rn

$workspae*.xrnl
& &&css
r S*is
e && algoritm
b &clean-code
b & csnditionals
b & des;on-lattern
& !k toOp
b & obiect-prografimiftg
'i, t,,:ii slart
,1i:,, array.ls
.:i:, baolean.ls
,:i:, start.js
,;!i, str-ings.js

,;;:variables.js

Rysunek 2.26,fworzenie stalej za pomocq stowa kluczowego const

a)50
'::
 2.3 Podstawy programowania

Spr6bujmy teraz powiEkszy6 warto66 tak utworzonej (za pomoc4 slowa kluczowego
const) zmienne;'. U|yjemy do tego prezentowanej iuL wczeSniej konstrukcji +: (ry-
stnek2.27).

.;lii variable-const-let.js
':. const $tal6 . 2;
._ q,l
-*^.^ --
)l*r3 ,.1

,l Atternpt 10 assign to canst or readonly variable

' ,: neplace lvith i*f a{}.1 M{lre action$... '{41

con$t $tela: nufiller

;i: islvariable-const-let.js

Rysunek 2.27 . W arloSci zmiennej ututrorzonej

zapomocq stowa const nie da sie zmienic
WebStorm podpowiada rram, 2e nastEpuje pr6ba przypisania wartoSci do zmiennej
typu const, i podkreSla tasz4 zmienn4; mo2emy sig zatem spodziewad, 2e program
zostanie uruchomiony, ale w konsoli zobaczymy bl4d Sprawdlmy to (rysunek 2.28).

e *I ekrn{ints Console $*urees tiete}tk >

., &' *,, i
lX $tsp,:Y&rttet uelSun Ievels I
itp typ€arror: ASSignreit to csxJtent veriab'.e, variables,js:2
'Urceugtt
a1 varl"abler.js:2
:l
Rysunek 2.28. WySwietlenie biqdu polegajqcego na probie zn:riany
wartosci statej

Jak widac zmienna zdeklarowana przez const powoduje, 2e raz przyplsanej do niej
wartosci nie mozna zmieni6. Z tego wzglqdu do takich zmiennych musimy przypisywac
wartoSci juz na etapie ich tworzenia.

Deklarowanie poprzez slowo kluczowe let jest analogiczne do :uLycia var. R62ni-
ca pomigdzy nimi jest widoczna dopiero wtedy, kiedy utworzymy w kodzie kolein4
zmtenn4, kt6ra ma inne zadanie ri| ta zadeklarowana wcze6niej, ale przypadkowo
obie nazwiemy tak samo.

51 r'-)
 Rozdziai 2. I ElemenV programowania na przykladzie jqzyka JavaScript

Pruyklad2.9
oto co siE dzieje, gdy taka zmienna jest zadeklarowana za pomoc1var (listing 2.9):

Listing 2.9
Deklaracia dw6ch zmiennych o takiej samej nazwie za pomoc4 slowa kluczowego var

lv,. s-' 4;
2 let sumlnrtBylet - 10;
3 // inne fragmenty kodu
4 var sum : 10;
5 corsole . loq ( sun) ;
W linii 1. zadeklarowali6my zmienn4sum i przypisaliSmy jej wartoS6 4.P62niej,w wier-
szu 4. (w zwyktych okolicznosciach pewnie byloby to duzo dalej w kodzie, w przypadku
zmiennych deklarowanych tak blisko siebie zapewne zauwalylibysmy, Le nazywal4
sig one tak samo), utworzylismy innq zmienn4, zn6w za pomoc4 stowa kluczowego
var, i przypisali6my jej wartos6 10. co siq stanie, kiedy wykonamy skrypt? w konsoli
otrzymamy taki oto wynik (rysunek 2.29):
-n F;erpnr; Console Srurms Nrtwo:\
: . )>

;Ntoor('.) Oslault ? *
Yr,:,!r
I {.i
variabl€s,js:5

Rysunek 2.29.Zmienna utworzona jako pierwsza zostala przesloniqta przez drugq

Jak wida6, p62niei utworzona zmienna przeslonila te utworzon4 wczeSniej (pisaliSmy
itt| o tym),w zwi4zkt z czymwy6wietlona zostalawartoS6 wlaSnie tej drugiej zmiennei.
Program,,nie widzi" obecnie wartoSci sum z wiersza 1.

warto zwrocii uwagg na to, ze skladnia JS czy pythona nie wymaga konczenia pole-
cefl srednikiem, w innych lqzykach, jak c++ czy Java, srednik ma kluczowe znacze-
nie i lego niezastosowanie spowoduje blqd kompilacji w JS uzywanie srednikow
lest
uznawane za dobrq praktykq, choi nie jest wymagane.

Przyklad2.lO
rnaczej bqdzie w przypadku zmiennej zadeklarowanej za pomoc4 konstrukcji 1et.
PostEpujemy podobnie jak w poprzednim przykladzie. Najpierw tworzymy zmiennq
sumrnitByr,et (listing 2.10) iprzypisujemy jej warto66 10 (linia 2.),po czym dekla-
ruiemy inn4 zmienn4 o tej samej nazwie i przypisujemy jej wartos6 1 (linia 6.).

a-)52
{)
 2.3. Podstawy programowania

Listing 2.10
Deklaracja dw6ch zmiennych o takiej samej nazwie za pomoc4 stowa kluczowego let

SU. ;

2 lel suminitBylet = 10;

3 // inne fragmenty kodu

I ol L:l = 0;
5 console . log ( sum) ;

6 var sumlnitBylet : 1;
7 conscfe . Log ( sumlniiBy].et );

Zobaczmy, jaki bgdzie skutek wySwietlenia tej zmiennej (rysunek 2.30).

.& . *l , . f,ery**ts Console 'Suces &e!eo* >, e 1 * i' X

& . ,foi:_ . ., *'& :,t::, _ D*{rtslt lerr,$ ?

Unceeghl lyrtarfr.or: ldertltier 'lum]nil$ylst' ta5 alrerCy !r,jat-,!:-js:!

been Ceal:aed

Bysunek 2.3O. lnterpreter nie pozwala na utworzenie zmiennej o takiel samej nazwie,
jakq ma zmienna zadeklarowana wczesniej za pomocq stowa kluczowego let

Tym razem skrypt nie wykonal sig poprawnie, ale zwr6cll informacjq o blgdzie, wy-
Swietlaj4c4 ostrze2enie dotycz4ce 7. wiercza kodu, 2e zmienna sumlnitByLet zostala
juz wczeSniej zadeklarowana.

Jesli piszemy skrypiy, ktore zawierajq wiele linijek i nie chcemy sami dbac o to, by przy
deklarowaniu zmiennych nie nastqpowala nieoczekiwana zmiana wartosci, uzywajmy
let. Stosowanie tej konstrukcji pozwala nam uniknqc du2ejliczby btqdow w programie,

2.3.4. String (czyli zmienne typu napisowego)

Mamy w og6lnym poigciu
- - dwa gl6wne rodzaie zmiennych: liczby i napislz Do tej
pory skupialiSmy sig na liczbach.
Teraz skupmy sig na napisach. Reprezentuje je wJS (i w innych jgzykach) typ String.
Napis to zestawienie s16w, znak6w lub cyfr. Czgsto takie zestawienienazywamy ci4giem
znakowym lub laricuchem.
Warto w tym miejscu przypomnie6 sobie przykladkt6ry zamieszczony byl niemal na
pocz4tkt tego rozdzialu (w punkcie 2.2.3). W naszym pierwszym, wygenerowanym
automatyczrrie skrypcie wy6wietlaliSmy komunikat ,,Hello world" (rysunek 2.5). To
wla6nie napis.

trQ
 Rozdzial 2. I Elementy programowania na przykladzie jqzyka JavaScript

Do zdefiniowania zmiennej typu Str j-n q nalely uLye podwbjnego lub pojedynczego
cudzyslowu na pocz4tku i na kofcu slowa.

W tym miejscu przechodzimy do pliku sfrngs./S; oznacza to, ze w index.html nale-

zy zmienic wskazanie na2rodlo skryptu. Zapewne pamiqtasz, jak to zrobic. JeSli nie,
sprawdz we wczesniejszej czgSci rozdzialu.

Przyktad.2.11
Na listingu 2.11 wida6 kilka przyklad6w polecefl deklaruj4cych zmienne typu laicu-
chowego. Jak wida6, mo2na u2ywa( zar6wno cudzyslowu podw6jnego (1inia 1.), jak
i poiedynczego (linia 2.). Gdyby3my jednak w samym taicuchu znakowym chcieli u2y6
apostrofu (linia 3.), musielibySmy poprzedziC go ler,r,1zm uko3nikiem (ang,. backslash, \), by
unikn46 zinterpretowania go jako znaku zamykaiqcego lafrcuch. Nie musimy tego robi6,
ieSIi ci4g r,rldzielamy cudzyslowem podw6jnym (linia 4.). Ostatnie polecenie tworzy napis,
kt6ry np. ze wzglgdu na iego dlugoS6 chcemy podzieli6 na dwa (lub wigcej) wiersze.
- -
Listing 2.11
Zmienne typu String mozemy tworzy(. za pomoc4 cudzysiowu podw6jnego i cudzy-
slowu pojedynczego
I const nameDoubLeQuote : "Marek",'
2 const nameSiagleQucte = 'Nlarek';
3 const senl-erceSingieQuot,e : 'I\'m programmer';
4 const sentenceDoubLeQuote programmer";
5 const mull-iLine : 'Dziei dobry! \
5 niech ten dzlen bedzie sloneczny';

Warto doda6, 2e molna takLe tworzyc napisy zlolone z samych liczb. Na przyklad
zmienna utworzona w tym fragmencie kodu: ciagLiczb - "L23', nie jest liczb4,
lecz laflcuchem znakowym.Ztego wzglgdu nie da sig wykonywa6 na niej obliczeri ma-
tematycznych, a pr6ba dodania dw6ch w ten spos6b utworzonych zmiennych (listing
Z.7Z) przyniesie z pewnoSci4 nieoczekiwane wyniki (rysunek 2.31)!

Listing 2.12
Pot4czenie dw6ch zmienn,vch typu tekstowego

const. numbers - r'123rr'

const anotherNumber : "I23";
consoLe. log (numbers + anotherNumber) ;

''i54
(_)
 2. 3. Podstawy programowania

X *I f,mlas Consola Ss*rssc t'let#o,,{ } ,w

& Y & ,.1?,
,!:r1
L23123 variables. jri3
,

Rysunek. 2.31. Widok wySwietlonych w konsoli potqczonych napisow

Rezultatem jest wypisanie dw6ch sl6w obok siebie Pomimo wpisania czegol, co przy-
pominalo liczby (ale nie bylo liczbami), uZycie cudzyslowu spowodowalo, 2e obie
zmienne zostaly potraktowane jako lafrcuchy znakowe Napis dodany do napisu jest
zaS ir,rryrr. napisem.

Na tym etapie umiesz jtL rozr62niae ci4gi znak6w (napisy) i liczby. Potrafisz definio-
wa6 zmienne, kt6re pozwalaj4 na rLywanie ich w interakcji z rtLytkownikiem lub
programem. To bardzo walne, podczas programowania bgdzies z z tych umiejgtnoSci
korzysta6 wielokrotnie.

W C+ + w celu utworzenia zmiennej typu lafrcuchowego (napisu) nalezy najpierw do-

dac bibliotekq string:
#include <string>
Kiedy to zrobimy, mozemy zadeklarowac zmiennq poleceniem:
std::string m.essage - "wiadomoS6 dla u2ytkownika";
Bardzo wazne jest to, ze nazwq typu zmiennej bgdqcel ciqgiem znakow zapisuje siq
w C+ +, rozpoczynajqc od malej litery; string
W jgzyku Java ten sam typ zmiennej
deklaruje siq uzywajqc zapisu zaczyra)Ecego sig wielkq literq: String.
frzeba byc tego Swiadomym i zachowyr,vai ostroznosc, jesli pracujqc nad jakim6 pro-
jektem, ,przelqczamy siq' migdzy roznymi lqzykami. Niestety bardzo czqsto w takich
przypadkach zdarzajq siq blqdy skladni spowodowane wla6nie przez blqdne nazwy
typ6w zmiennych.

2.3.5. Zmienne typu Iogicznego (boolean)

Innym bardzo istotnym typem zmiennej jest boolean. Zmienna tego typu mo2e
przyjmowa6 tylko dwie warto6ci logiczne: true albo f alse, czyli prawdg albo falsz
(listing 2.13).

Listing 2.13
Deklarowanie zmiennych typu boolean
,Let correct = true;
,Let notccrrect = false;

55 ('-,)
(j,
 Rozdzial 2. I Elementy.programowania na przykladzie jgzyka JavaScript

Interpreter ,,wie", 2e tak zadeklarowane zmienne s4 typu logicznego, bo tworz4c je,

przypisaliSmy do nich wartoSci logiczne: true (prawda) albo faf se (falsz).
Wigcej o wykorzystaniu tego typu zmiennych napiszemy w podrozdziale dotycz4cym
instrukcji warunkowych.

2.3.6, lnterakcja z u2ytkownikiem

Do tej pory tworzyliSmy zmiennebez interakcji zuLytkownikiem. Tymrazem spr6bu-
jemy zaangailowat go w dzialanie aplikacji, pobieraj4c od niego dane Jednym z naj-
prostszych sposob6w na to jest u|ycie metody prompt.
Metoda w kontekScie programowania jest czynnoSci4 do wykonania (dlatego zwykle
nazryana jest za pomoc4 czasownika). Podczas ewiczeit z WF-u od czasu do czasu
stycha6 polecenia: ,)Vykonajcie 15 sklon6w" czy ,,Zr6bcie 30 przysiad6w". Oba te pole-
cenia znakomicie nadawatyby siE fianazwy metod w programowaniu. Wy.wolanie tych
metod mogloby np. wygl4da6 tak: wykona j S k1 ony (t 5 ) ofaz zr obp r zy si ady ( 3 0 ) .
W takim zapisie czgSC przed nawiasem to nazwa (etykieta) metody JeSli jest dobrze
utworzona, informuje o tym, co robi kod metody Liczba w nawiasie za(; to iej parametr,
okreSlaj4cy dane, na jakich metoda ma pracowa6
ile razy maj4byt wykonane wspomniane w etykiecie - wczynno6ci.
tym pruypadku informuje on,

Metod u2l,waliSmy ju| zreszt4wczeSniej. JeSli wr6cisz do naszego pierwszego skryptu,

wy6wietlaj4cego komunikat ,,Hello world" (rysunek 2.5), zobaczysz, ze robil to za po-
moc4 metody af ert zparamettem w postaci'laricucha znakowego "Hef lo worf d".
Wywolanie metody wygl4dato w6wczas tak: alert ("He11o worId" ) .
Wr66my do metody prompt, kt6ra wySwietli uZytkownikowi okno dialogowe (czyli
okno, w kt6rym on mo2e co6 wpisa6, a my mo2emy to przechwyci6 i wykorzysta6).

Przyklad,2.l2
Oto wywolanie metody (listing 2.14).Warto zauwazye,2e zwr6corty przezt|ytkowni-
ka tekst przypisujemy od rant do zmiennej choice, dziEki czemu bgdziemy mogli jE
p62ilej wykorzystaC do odwolania sig do treSci przekazanego komunikatu.

Listing 2.14
Skladnia metody prompt
1et choice: prompt('Co s4dzisz o nauce programowania?');
Wynik wykonania tej instrukcji jest
widoczny na rysunku 2.32. Komuntkat z bie2qcei strony
Cc $Edzisz o nalce prcA,amcwada?
I tak oto nawi4zalilmy pierwszy interak-
tywny kontakt z t|ytkownikiem.

w
,. -........ -.-...'...:

Rysunek 2.32. Okno dialogowe

I
wy6wietlone za pomocE metody prompt
("_)5::6_
()
 2.3. Podstawy programowania

Teraz wypada wySwietli6 w konsoli wszystkie uzyskane informacje (listing 2.15).

Listing 2.15
Za pomoc4 tych polecefl wySwietlamy w konsoli pobrany od uzytkownika tekst
1 const statement : 'Xlauka programo\{ania jest ';
2 lel- choice = prompr-('Cc sacizisz o nl.t-e LrJgranoHfnia?');
3 consoie. lcg (statemenr + ch.ice) ;

Jak wida6, w pierwszej linijce utworzyliSmy stalastatemenr, a w drugiei poprosiliSmy

uzytkownika o wyrazenie opinii na terlat programowania, zal wpisany przez tiego
tekst przypisaliSmy do zmiennej chorce. W ostatnim wierszu widzimy znane ju2 nam
polecenie console . log. NowoSci4 jest to, ze widai za pomoc4 plusa molna
- iak - " da w wyniku 723723,
l4czy( tafrcuchy znakowe. (To wla6nie dlatego " I23', + ,,L23
a nie 246, o czym wspominaliSmy juZ wczeSniej). Efekt wywolania kodu z listingu 2.15
po wpisaniu przez uLytkownika slowa "oK" (czyli podstawiliSmy slowo ',oK" do
zmiennej chorce) pokazano na rysunku 2.33.

{A * flernents Console 8*urc*s lr{etdark ,, 0 : X

It Ci top v (} :. g.lautt tev€is r I
l,lauk€ progranoyanla Jest 0K-'''-'.' variaqlei.js;f
'
Rysunek 2.33. Tekst pobrany od uzytkownika wyswietlony w konsoli
Od tej pory naszE zmienn4 choice molna przekazat bezpoSrednio do laf,cucha wy-
nikowego poprzez wskazanie kompiiatorowi znacznikiem $ poprzedzalqcym wpisanq
w nawiasach klamrowych tazwg zmiennej i ujgcie napisu w odwr6cone apostrofy
('naprs ') zamiast zwyklych ('napis ') to tzw. lafrcuch szablonowy (ang. temTtlate
literal). czyli to, co wpisal uzytkownik,-moLna przekazaC dalej za pomoc4 skladni
${chorce} bezpoSrednio do laiicucha teksto\4,ego. IJpraszcza to wypisanie calego
komunikatu (listing 2. 16).

Listing 2.16
t aiicuch szablonowy uptaszcza lqczenie napis6w ze zmiennymi JS

ccnst choice : prompt('Co sadzisz c nauce programowania?');

const message :'Nauka Drogramowanra jest g{choice}';
console. log (message) ;

57 {,,_)
()
Rozdzial 2. I Elementy programowania na przykladzie jqzyka JavaScript

2.3.7, Tablice
Do tej pory przechowywaliSmy w zmiennych pojedyncze wartoSci. Czy istnieje spos6b
na to, by w jednej zmiennej zawrzeC wiele warto6ci tego samego typu, np. w zmiennej
labels przechowa6 ceny produkt6w zapisane na etykietach sklepowych? CoS takiego
umo2liwiajE tablice Poni2ej zadeklarowali6my zmienn4 tablicow4 f abels (listing 2.17).

Przyklad.2.1.3

Listing 2.17
Deklarowanie i wySwietlanie zmiennej tablicowej
lel labels : 112.0, 8, 41, 9.321;
consofe. fog (fabels) ;

Nowym elementem skladni s4 nawiasy kwadratowe, wewn4trz kt6rych wpisujemy,

rozdzielone przecinkami, warto6ci do przechowywania w zmiennej.
Kiedy uruchomimy nasz skrypt (anay.js
- pamigtaj o zmianie odwolania w pliku
index.html), otrzymamy uynik przedstawiony na rysunkt 2.3 4.

X t] n6rrl€r*$ Console Soures Network > * i y,

f!] S top v O rr....r Defau{tlevels'

b.{4} 112, 8, ,t7, 9.32} !ar1a}1et.jt:z
)

Rysunek 2.34. Wynik wy6wietlenia w konsoli tablicy zadeklarowanej na listingu 2.17

Powy2el wySwietliliSmy calE zawartoS6 tablicy Mozemy jednak wypisa6 jej dowolny
element. W tym celu po nazwie tablicy wpisujemy w nawiasach kwadratowych numer
interesuj4cego nas elementu (jego indeks). Wida6 to na listingu 2.18.

Listing 2.18
WySwietlenie w konsoli elementu tablicy o indeksie 3

consoLe.log('e,erenr- 1-ablicy ' + labels l3l);

I tutaj czeka nas niespodzianka. Ot62 w konsoli otrzymamy taki wynik (rysunek 2.35):

X * I El*rnen'ts Console $*uroe3 &l{rtwor* } &1x

::;S lop 'o rsty&leYql: " &
element tablicy 9.3? variabler,js:2

Rysunek 2.35. Wyswietlony w konsoli element tablicy z indeksem 3

47.W rzeczryistoSci w skladni
By6 mo2e spodziewaliSmy sig ujrzee trzeci element, czyli
1abels [3 ] odwolujemy siE nie do trzeciego elementu, ale do elementu z indeksem
r6wnym 3. Indeksy element6w tablicy numerowane s4 za3 od zera. Aby ujrzee
 2.3. Podstawy programowania

lndeksy elementow tablicy numerowane sq od zeral

w wyniku 47, musielibySmy zatem uzy6 odwolania labels t2l; 1,2 zobaczymy po
wpisaniu labels t0I itd. (rysunek 2.36).

Bysunek 2.36. Odwzorowanie indeksu na element tablicy

Zatem dzigki tym dw6m poleceniom (listing 2.19):

Listing 2.19
Drugi element tablicy i element z indeksem 2 to nie to samo
console.icg("eiement r-abticy pod rndeksem 1 tc " + Iabelslll);
consoLe.Iog("pierwszym eLementem tablicy ;est " + labersL0l);
uzyskamy komunikaty z rysunku 2.37:

}} itt',,,,.tX,

ri1x..-.:&,, r.:t*p,., '*,:..@, ...fi1let

Rysunek 2.37. Pierwszym elementem tablicy jest ten z indeksem 0

Na pocz4tku do66 trudno sig do tego przyzwyczaiQ co iest ptzyczyn4 wielu blqd6w.
GdybySmy bowiem chcieli wySwietli6 ostatni, czwafty element naszej tabliry i :u?yli-
bySmy do tego odwolania f abef s t 4 I (listing 2.20),wyszliby6my poza gfanicQ tablicy
element z indeksem 4 nie zostat bowiem w niej zdefiniowany
-
Listing 2.20
Takie polecenie spowoduje wykroczenie poza zakres tablicy
console.log("ei=ment --ablrcy " ' LabeIs l4l ) ;

Najczgsciej wykorzystywan4 wla6ciwo6ci4 tablicy jest jei dlugoS6 (ang.length).Dzig-

ki niej mo2emy uzyska6 informacjg o tym, ile element6w iest w tablicy Zrobimy to,
wpisuj4c najpierw nazwg tablicy, nastqpnie kropkg, po niei za| nazwg wla6ciwo6ci:
label s . length (listing 2.21).

tro\
tl*
 Rozdzial 2. I ElemenV programowania na przykiadzre jezyka JavaScript

Listing 2.21
Pobieramy informacjg o dlugoSci tablicy

console. log ('d1ugoS6 tablicy/liczba element6w w tabl.icy + labels. fength) ;

Co oczvwiScie zwr6ci 4 (rysunek 2.38).

:A ffi E,efi*r1t:; Console $ourc*s N}etx** )) W,x

W& xep v gr& ;:1, ..,.

dtugedd tatlicylliezba e1e*entdw v tabliey 4 alrqy-j;:2

-

Rysunek 2.38. Tablica labels ma 4 elementy

Dodanie elementu do iu2 istniej4cej tablicy uzyskamy poprzez metodg push wywolan4
bezpoSrednio na tablicy, czylt za pomoc4 polecenia labels . push (34 ) ; .
Poniewa2 push dodale elementy na koicu tablicy, obecnie ostatnim elementem
labels jest 34.

Dekiaracjq tablicy w(az z jednoczesnym przypisaniem do niej warto6ci uzyskamy

w c+ + za pomocE polecenia.
std::string tall.ilca[] = {'relement1", "element 2'r, n3n1.
Warto zwrocic szczeg6lnq uwagq na to, ze w JS przy deklaracji tablicy uzywamy nawia-
s6w kwadratowych, a w C+ + klamrowych.
Bardzo wazne jest tez wskazanie na poczqtku rozmtaru tablicy.
W JS wielkosc tablicy jest dynamiczna, co mozna lalwo zauwazyc poprzez dynamiczne
dodawanie elementow za pomocE metody push.
W przypadku C + + nie uzyskamy rozmiaru tablicy za pomocE znanel nam z JS wla6-
ciwoSci Iength, bo 1ej w tym jgzyku nie ma (wystgpuje natomiast takze w Javie).
W zwiqzku zlym nale2aioby obliczyc roznicg bajtow pomiqdzy pierwszym a ostatnim
elementem tablicy.

/---tl'
l*412.4.
--r -T -
lnstrukcje warunkowe (conditionals)
W Zyciu czgsto stoimy przed wieloma wyborami. To, jak4 podejmiemy decyzjg, jest
tzaleLnione od spelnienia r62norakich warunk6w, czasami prostych (,,Je6li bqdzie
ladna pogoda, p6jdE na spacer, je6li nie, poczytamksi42kg"), innym razem doS6 skom-
plikowanych (,Je6li uda mi siE zda6 egzamin maturalny z wysokim wynikiem, p6jdq na
dobre studia, o kt6rych marzq Dodatkowo, jeSli rodzicom uda sig zaoszczgdzi6 trochg
pieniqdzy, wybiorg lepsz4 uczelniq poza moim miejscem zamieszkania").

( )oo
-- 7--
W programowaniu jest podobnie. Bardzo czqsto dzialanie programu bEdzie uzale2nione
od danych dostarczonych np. pruezuZytkownika. Najprostszymprzykladem jest okno
dialogowe, w kt6rym pytamy, czy chce on subskrybowa6 ofertg wybranego sklepu. Jesli
kliknie Tak, powinni6my umo2liwi6 mu przejscie do formular za slu24cego do wprowa-
dzania danych. JeSli wybierze odpowiedLNie, powinien pozosta6 nabie24cej stronie.
Do obslugiwania takich sytuacji slu24 instrukcje warunkowe

Zanim zaczniesz wykonywac kody z tego podrozdzialu, przeczylaj go doktadnie

w catoScil

Przyklad2.l4
Gdy podczas planowania naszej aplikacji pojawi4 sig siowa jeili lub kiedy, to z,nak,
2epowinni6my uLyt bloku kodu w takiej postaci (listing 2.22):

Listing 2.22
Instrukcja vu,arunkowa if
if (4 > 3) |

console.log("4 lest wigksze od 3',);

I

Rozlo?my go na czgSci pierwsze. Slowo jeilito po angielsku if, dlatego to wlaSnie od

niego (if) zaczytla sig instrukcja warunkowa. Warunek, jaki ma by6 spetniony, poda-
jemy w nawiasach okr4glych. W naszym przykladzie sprawdzamy, czy 4 jest wigksze
od 3; oczywi6cie tak jest, w konsoli pojawi sig zatem stwierdzenie, 2e 4 jest wigksze
od 3. GdybySmy natomiast zamieniliznakwigkszoSci na znak r6wno6ci, nic by sig nie
wykonato. Kod w kiamrach nastgpuj4cy po instrukcji warunkowej wykonuje sig tylko
wtedy, kiedy warunek jest prawdziwy

Zapewne pamiqtasz, ze omawiajqc zmienne typu bootean (logiczne), wspominali-

smy, ze pojawiq sig one przy okazji instrukcji warunkowych. To wlaSnie ten moment.
Zmtenna taka przyjmuje jak powiedzieli6my tylko dwie wartoSci. prawdq (true) albo
fatsz(fa1se) WzaleznoSci odtego,kloraztychwartosci zostaniezwroconawwyniku
sprawdzenia warunku, kod w nawiasach klamrowych zostanie wykonany albo nie,

or [-r
--d-
 Rozdzial 2. I Elementy.programowania na przykladzie jezyka JavaScript

Bardzo wazne jest tutaj prawidiowe uzycie nawiasow klamrowych. Tak jak w przypadku
nawiasow okrqglych musimy pamiqtac, by zamykac kazdy oiwarty nawias. Je6li po
warunku otworzymy nawias klamrowy i nie zamkniemy go na koicu bloku instrukcji do
wykonania, zostanie zwrocony blqd.

2.4,1. Operatory warunkowe

Bardzo czgsto rolE operator6w uLywanych w instrukcjach warunkowych odgrywaj4
operatory matematyczne:
o > wigksze ni2;
o < mniejsze nil1'
. >: wigksze lub r6wne;
. <= mniejsze lub r6wne;
o :: r6wne operator por6wnuje tylko wartoSci;
o ::: r6wne- ten operator por6wnuje warto6ci i zarazem typy.
-

W pierwszej chwili moze dziwic ze porownanie warto6o wykonywane lest za pomocE

dw6ch znakow rowno6ci, a nie jak w matematyce jednego. Aby to zrozumtec,
- -
trzeba pamiglac, ze pojedynczy znak ,,rowna siq" uzywany lest do przypisania wartosci
do zmiennej.

W przypadku operatorow porownania tqczonych (>= oraz <=) trzeba pamigtac,

2e znak rownosci wpisywany lest po znaku mniejszosci lub wigkszoSci.

Przyl<lad,2.l5
Teraz skupmy sig na dw6ch ostatnich operatorach (listing 2.23 przyklad dostgpny
w skrypcie s imple-conditionals.i s).
-

Listing 2.23
R62nica w dzialanirt operator6w == i ===

-)62
(*$-
 2.4 Instrukcje warunkowe (conditionals)

if ('l' == r) {

console.log("wartoSci sa sobie r6wne") ;

if ('lt ==: 7) {

console.log("warto5ci s4 sobie r5wne, aie t_ypy nie;

po lerr'e j sl-ronie ; est String, pc prawe; liczca" ) ;
i

Rezultatem wykonania tego skryptu bgdzie wySwietlenie komunikatu tylko z pierw-

szego warLlnku, bo drugi (zgodnie z opisem) por6wnuje tak2e typy, a Zaden napis nie
jest tym samym co liczba.

Tylko w ramach ciekawostki wspomnieli6my o operatorze =:. W dalszej czQ6ci tej

ksiqzki bgdziemy uzywali wylqcznie -=:
aby miec pewno6c, ze porownujemy warto6ci
tego samego typu w kor'rcu. jak wspomnieli6my " 7 " to nie to samo co 7.
-
Nalezy Iezzauwa2yc, ze w jezykach C+ + czy Java, w ktorych typ zmiennej jest jawnie
okre6lany, nie trzeba porownywac typow, dlatego do porownywania uzywany jest wy-
lqcznie operator ==

2.4.2. Wykorzystanie zmiennych typu boolean

w instrukcjach warunkowych
Przyklad2.16
ZaloLmy,2e chcemy napisa6 kr6tki program, w kt6rym prosimy uZytkownika,by zgadl
dziefr naszych urodzin. JeSli zgadnie, w6wczas wySwietlimy mu w konsoli komunikat
z gratulacjami. W przeciwnym wypadku komunikat bgdzie informowal o tym, 2e pr6ba
byla nieuda na (listing 2.24).

Listing 2.24
Instrukcja if wykorzystuj4ca zmienne typu boolean
1 const dayOfBrr]-hda.l: L4;
2 ccnst guess : prompt("Zgadnil dzieri moich urodzin");
3

4 leL correcr- = f al se;

5

5 if (-guess ==: dayOfBrrthday) i

63
t),
il
 Rozdzial 2. I ElemenV:programowania na przyktadzie jezyka JavaScript

7 corr--ct = true;
8l
9

10 rf (correcL ::: true) i

11 console.Log('Zgadza sie, dzrefl molch urodzin to: ${dayofBrrthday}
L2 document.wril-e ("BRAWOI ") ;

13 ]

14

15 if (correct ::: false) {

16 conscle. log ('Zgaduj dalel ') ;

)-1 documenl.write("OdSwrez strone/ by spr6bowai leszcze raz");

18 )

P rzearralizttlmy nasz kod

Linijka 1. Utworzenie stalej dayofBirthday typu liczbowego i przypisanie do niej
wartosci 14.
Linijka 2. Utworzenie stalej guess, do kt6rej zostanie przypisana wartoSa wpisana
przez v'ytkownika.
Linijka 4. Utworzenie zmiennej correct, do kt6rej na pocz4tek przypiszemy warto66
false (falsz).
Liniika 6. Ustawienie warunku jeSli (/fl wpisana przezu|ytkownika wartoSe (guess)
- i typu zmiennej dayofBrrthday.
jest r6wna pod wzglgdem wartoSci

Znak dodawania (+) w tej linijce to tak zwany jednoargumentowy plus (ang. unary plus),
realizu)Ecy zamianq typow W tym przypadku zmienna taficuchowa guess (trzeba pa-
miqtai, ze kazda warto6i wpisana VZez u)ytkownika jest ciEgiem znakow, czyli napi-
sem) zostaje zamieniona na liczbq, by mozna bylo por6wnac obie wartosci,
Zamiast tego mozna by bylo w tym miejscu uzyc operatora :=, ale warto poznawac
nowe funkcjonalnosci.

Linijka 7. JeSli po sprawdzeniu warunku w liniice 6. zwr6cona zostaie wartoS6 true

(prawda), to w6wczas wla6nie tg warto6a przypiszemy do zmiennej correct.
Linijka i0. Je6li wartoS6 w zmiennei correct jest r6wna true, to w6wczas...
Linijka 11. ...wypisujemy w konsoli wskazany napis z gratulaciami.

ar64
w konsoli inny napis, informuj4cy o nieudanej pr6bie.
Kod jest oczywi3cie dostgpny w przygotowanych materialach; wystarczy odpowiednio
zmieniC w pliku index.html odwolanie do skryptu.

W C++ nazwa typu zmiennej logicznej to boot, a w Java

- boolean,

2,4.3. nstru kcja warun kowa

I

oraz operator logiczny AND

Przyklad 2.17
zal6zmy,2e idziemy do sklepu kupi6 buty wiadomo, Lebuty musz4 mie6 odpowiedni
rozmiar orazich cena musi miesci6 sig w naszym z gory ustalonym bud2ecie.

Jak wygl4datoby ujqcie tego problemu w programowaniu?

Musimy utworzy6 dwie zmienne (a wlaSciwie stale), przechowuj4ce informacje o poszu-
kiwanym rozmiarze buta i o maksymalnej cenie, jak4 mozemy zaplacic (listing 2.25).
JeSli buty, kt6re sobie upatrzylismy, spetniaj4 te dwa warunki (co do rozmiaru i ceny),
to mozemy je kupic

Listing 2.25
Zadeklarowanie stalych
const shoesSize = 39;
const price = 23A;
Zapewnienie interakcji z u2ytkownikiem tak2e nie powinno przysporzyC problem6w
(listing 2.26).

Listing 2.26
Pobieranie danych

const answerSjze = prompl.("Jaki lest dostepny rozmiar buta?,,);

const answerPrrce : prompt ("Ile kosztuja buty?");
Teraz utworzymy zmienn4 przechowu,4ca stan decyduj4cy o tym, czy mozemy kupi6
buty, czy nie. Poniewa 2 mamy tylko dwa mo2liwe stany, na pewno bgdzie to zmienna
typu logicznego (listing 2.27).
RozdZal 2. I Elementy programowania na przyktadzie jQzyka JavaScript

Listing 2.27
Zmienna logiczna canBuy bgdzie przyjmowa6 tylko warto36 prawda/fatsz (true/false)
ie1- cantsuy;
Teraz tworzymy warunek okreSlaj4cy, czy \^r sklepie dostqpne s4 buty w rozmiarze 39;
jeSli tak, to ustawiamy zmienn4 canBuy na true (listing 2.28):

Listing 2.28
Warunek dotycz4cy rozmiaru but6w
if (+answerslze ::: 39) {

uo!rDu y

Znak dodawaniaprzy zmiennej answerSize powoduje rzutowanie napisu na liczbq.

Poniewa2 rozmtar podany przez sprzedawcQ to 3g,przypisaliSmy do zmiennej canBuy

wartoS6 true. Czy jednak sig nie pospieszyliSmy? Przecie| mamy do rozpatrzeniaieszcze
jeden warunek. Musimy sprawdzi6, czy ceflaobuwia mie6ci sig w naszym zaplanowanym
bud2ecie Innymi slowry, buty musz4 kosztowae nie wigcej niL 230 zl.
Zmodyfikujmy zatemnasz kod (listing 2.29). Musimy doda6 drugi warunek, pol4czony
z pierwszym sp6jnikiem i (oraz). W programowaniu zapisywany on iest zazwyczai
lako cc.

Spojniki zapisujemy w JS jako ee .

Listing 2.29
Dodajemy drugi warunek do spelnienia
af (+answer$i 29 ::: 39 l& +answerPri.e <: 23C) {

cantsuy = arue;

doo
a
 2.4. lnstrukcje warunkowe (conditionals)

Po modyfikacji zmienna canBuy przyjmie wartoS6 true tylko wtedy, kiedy zostan4
spelnione oba warunki rozmiar buta r6wny 39 i cena nie wigksza ni2 230 zl. Nie
-
potrzebujemy przecieL but6w za malych ari za du|ych, nie kupimy teZ but6w w odpo-
wiednim rozmiarze, jeSli nie bgdziemy mieli wrystarczai4co du2o pienigdzy

Caly kod dostqpny jest w skrypcie shopptng.ls.

2.4.4. nstrukcja warunkowa

I

oraz operator logiczny oR

Kontynuujmy rrasz przyklad z butami. Mamy iuz dobrany odpowiedni rozmiar buta,
cena te2 jest prawidlowa, czyli nie przekracza naszego bud2etu. Ale czy to oznacza,2e
na pewno je kupimy? Mog4 przeciez po prostu nam sig nie podoba6, np. mog4 mie6
inny kolor niz ten, kt6ry bySmy chcieli.
Przyjmijmy, ze buty, kt6re chcemy kupi6, powinny by6 koloru bialego lub czarnego.

Przyklad 2.18
Standardowo tworzymy stale, do kt6rych przypiszemy wskazane przez r,as wartoSci
(listing 2.30):

Listing 2.30
Deklarowanie statych przechowui4cych informacig o kolorze
consr- preferreciColorWhite :'brale' ;

ccnst preferredColorBlack = 'czarnet ;

Nastgpnie pobieramy odpowiedZ od sprzedawcy (listing 2'31):

Listing 2.31
St ala sellerAnswer p rzechwytu j e odpowie d 2 tdzielon4 pr zez sp r ze daw cg

const sefferAnswer : prompt("Jaki lest dost?pny kolor but5w?");

Oczywi6cie potrzebna nam zmienna do przechowywania wartoSci decyzit kupimy
te buty czy nie (listing 2.32):
-

Listing 2.32
Zmienna przechowuj4ca stan decyzii
let' canBuyi
 Rozdziai 2. I ElemenV programowania na przykladzie jQzyka JavaScript -

Zapis warunku bgdzie podobny do zapisu warunku logicznego AND. Zmieniamy tylko
operator logiczny; zamiast e e odpowiadaj4cego sp6jnikowi I wpisuiemy dwa pipeline'y
czyli I l. Znaki te odpowiadaj4 sp6lnikowi /zD (OR).
-

Spojnik /ub zapisujemy w JS jako I I (listing 2.33).

Listing 2.j3
Instrukcja warunkowa z operatorem OR
if (selferAnswer =:: preferredColorwhite
seLlerAnswe. ==: preferredColorBfack) {

canBuy : true;
]

Wynik takiego warunku bgdzie speiniony (instrukcja zwr6ci true), jeSli w sklepie znaid4
sig buty w kolorze biatym lub czarnym. Ocz).wiScie prawdg uzyskamy tak2e w przypadku,
kiedy jakaS parabgdziebiala, a inna czarna. Zmienna canBuy przyjmie wartoS6 f alse
tylko wtedy, gdy w sklepie nie bgd4 mieli but6w w zadnym z tych kolor6w.
Nastgpnie wy6wietlamy w konsoli odpowiedni4 informacjg,w zale|Lolci od wartoSci
zmiennej canBuy (listing 2.34):

Listing 2.j4
Wy6lvietlenie w konsoli jednego z alternat)-wnych komunikat6w
if (canBuy) {

console.log("Udalo mi siq zdcbyi wymarzony kolcr but6w");

) else {

console. log ( "Szukam but6w dalej ");

UWAGA
Polecenie rf (canBuy) to skrocony zapis af (canBuy ::= true) .

C68
--T
 2.5. Instrukcje sterujqce i pqtle
/l
V12.5. lnstrukcje sterujqce i peile
w Zyciu codziennym bardzo czgsto poslugujemy sig zdaniamizloLonymialbo powta-
rzamy czynnoSci. WlaSnie do obslugi takich przypadk6w w programowaniu potrzebne
nam s4 instrukcje steruj4ce.

2.5.1. lnstrukcja sterujqca if ... else-if

Przeanalizuimy przyklad powi4zany ze szkoly. Swietnie nadaje sig on d.o zaprezento-

- w zaleLno6ci
wania instrukcji steruj4cej od spelnienia jednego z wielu warunk6w
przenosi ona kod do odpowiedniego wiersza, kt6ry jest wykonywany Tak sig dzieje,
kiedy sprawdzamy rvynik uzyskany na sprawdzianie w celu ustalenia oceny

Przyklad2.l9
Podczas sprawdzianu molna uzyska6 maksymalnie 100 punkt6w. Aby dosta6 pi4tkg,
naleLy zdoby( powy2ej 90 punkt6w , czw6rka to wartos6 migdzy 80 a 90, tr6jka miqdzy
70 a 79, a dw6jkg dostajemy wtedy, gdy punkty mieszcz4 sig migdzy 60 a 69. oczy-
wiscie, jesli nie spelnili6my 2adnego ztychwymagai,to wtedy otrzymujemy jedynkg.

JakrczpoczEtten skrypt? Najpierw nalely zapyta( u2ytkownika, ile punkt6w uzyskal

(listing 2.35). Zewzglgdu nato,2e iest to zmienna, kt6ra nie ulega modyfikacji (priecie2
w trakcie obliczania nie zapytamy u2ytkownika ponownie o to, ile uzyskal punkt6w,
prawda?), ttLyjemy cons t.
Listing 2.35
Prosimy u2ytkownika o podanie liczby punkt6w i zapisujemy odpowiedZ w zmiennej
score
const score : prompt(,'I1e punkt6w uzyskano?");
Nastgpnie tworuymy (ale bez inicjowania, czyli przypisania pocz4tkowej wartosci)
zmienn4 do przechowl'wania oceny (grade listing 2.36).
-
Listing 2.36
Zmienna grade do przechowywania oceny
'l ol nz:ia.

Nie bgdziemy inicjowa6 tej zmiennei, gdyLna pocz4tku nie wiemy jeszcze,jak4 oceng
otrzymal nasz u2ytkownik.
Teruz napiszmy podane w opisie warunki uzyskania poszczeg6lnych ocen. Aby tzyt-
kownik dostal pi4tkg, musi mie6 povryilej 90 punkt6w (listing 2.37).
 Rozdzial 2. I Elementy programowanta na przykladzie jqzyka JavaScrlpt

Listing 2.37
Warunek uzyskania pi4tki
rf (score > 90) {

grade : 5,'
,}

Teraz czas na sprawdzenie, czy uzytkownikowi nie rlale|y siE czw6rka (listing 2.38).
Oczywi6cie bgdzie ono urykonywane tylko wtedy, kiedy bgdzie ju2 wiadomo,2e uzyskane
punkty nie pozwalal4 na otrzymanie oceny l:ardzo dobre j. Trxaj z pomoc4 przychodzi
nam instrukcja else if. Podobnie jak eIse, kt6rej ju2 uZywali6my, nie wystgpuje
ona nigdy sama, moze by6 jedynie uzupelnieniem wczeSniejszej instrukcji rf. Je2eli
wanrnek okreSlony w rf nie jest spelniony, else if informuj e,2e nalezy wejS6 do
kolejnego wamnku.

Listing 2.38
Warunek uzyskania czw6rki
if (score > 90) {

grade = 5;
] else if (score >: 80) {

grade : 4;
l

Kolejne warunki s4 analogiczne (listing 2.39):

Listing 2.39
Pozostale warunki

if (score > 90) {

grade = 5;
] else if (score >: 80) {

grade - 4;
] else if (score >= 70) {

grade : 3;
} else if (score >: 60) {

grade = 2;
,} else {

grade : 1;
)

dro
c
 2.5. Instrukcje sterujqce i petle

zauwaZ,2e ci4g instrukcji rf ... else rf koriczy polecenie erse; zawiera ono
kod do wykonania w ostatecznoSci, jeSli 2aden z poprzednich warunk6w nie zostal
spelniony.
Na koicu wypiszmy uzyskan4 oceng w konsoli, wykorzystujac znane juznamiaflcuchy
szablonowe (listing 2.40).

Listing 2.40
Wypisanie oceny
ccnscle.log('Twc_ta ocena to 5{qraCe}') ;

Ten przyklad warto przepisac samodzielnie 3, 4 razy, by utrwalii sekwencjg zapisywa-

nia kolejnych instrukcjielse if.
Pamiqtaj, ze programowanie nie jest umiejgtnosciq ktorej nauczysz siq, wylqcznie czy-
tajqc; potrzebna jest praktyka orazbardzo duzo czasu, alakze wola walki z ewentual-
nymi problemami. Rzeczy, ktorych dzis leszcze nie rozumresz, za2 - 3 tygodnie bgdq
proste, o ile nie przestaniesz cwiczyd.

2.5.2. Pgtla for

Potrafisz ju2 samodzielnie napisac prosta aplikacjE. zajmijmy sig teraz kolejn4, jak2e
waLt4funkcjonalnoSci4
- powtarzaniem
pozwol4r,amznacznie ulepszy6
krok6w kilka razy w tak zwanej pqtli. Pgtle
nasze programy Jest kilka rodzaj6w pqtli. w kolejnych
punktach tego rozdzialu om6wimy je kolejno, zaczynaj4c od pgtli ror.
or rozpoczynamy od slowa kluczowego f or, po kt6rym w nawiasach okr4gtych
Pgtlg f
umieszczamy kole j ne kroki rozdzielone Srednikami :
for (start; warunek-zakoiczenia_pqt7i; krok)
W te, skladti start to punkt, w kt6rym zaczynamy pgtlg. Zazv{yczaj jest nim tzw
zmienna licznikowa (zr,rrykle i), do kt6rej przypisujemy okreSlon4 wartoS6 liczbow4.
warunek_zakoficzenia_pqt)i to informacja o tym, kiedy koiczymy petlg np.
kiedy zmienna licznikowa osi4gnie jak4S okreSlonA w tym miejscu wartoSi. krok-okre-
sla instrukcjg, kt6ra zostanie uruchomion a przy kaLdym wykopaniu pgtli
- zazwyczaj
w tym miejscu nastgpuje zwigkszenie licznika i o zadanEwartos6. Na przyklad pgtla
z listingu 2.41 v'rySwietli w konsoliliczby od 0 do 100 ale tylko co pi4tE (0, 5, 10,
15 itd-), poniewa2 krok zdefiniowali6my w ten spos6b,2e - zmienna licznikowa i jest
po ka2dej iteracji pgtli zwigkszana o 5.

71 {._))
i.).
 Rozdzial 2. I Elementy programowania na przykiadzie jqzyka JavaScript

Listing 2.41
WySwietlenie w pgtli co pi4tej liczby z zakresu od 0 do 100
for (i:0; i<:100; r+=5) i

conscle. iog (i) ;

}

Pruyklad,2.2O
Aby to wyja6ni6 jeszczelepiej, przejdLmy do innego przykladu. Stw6rzmy tablica ulic obie-
gaj4cych budynek,zavtreraj4c4 ulice: Wita Stwosza, Ba2yriskiego, Grunwaldzk4 i Abrahama.

Tworzymy zmienn4 statyczn4 (gdy2 ulice wok6l budynk6w nie ulegn4 zmianie)
listing2.42.
-

Listing 2.42
Utworzenie tablicy ulic i przypisanie jej do stalej streets
const streets - [ttBazynskiego", "Grunwaldzka", "Abrahama", "Wita Stwosza"];
Teraz piszemy kod pqtli (listing 2.43).

Listing 2.4j
Pgtla for wy6wietlaj4ca jedn4 po drugiej ulice. przechow)'wane w statej streets

for (let i:0; i ( streets.fenglh; i +:1) {

consofe. fog (streets Ii] ) ;

)

Najpierw utworzyliSmy zgodnie ze skladni4 pgtli f o r zmienn4licznikow4 i przypi-

- -
saliSmy do niej wartoS6 0; nastEpnie zdecydowaliSmy, 2e skofrczymy wykonywa6 kroki,
gdy zmienna tabgdzie r6wna liczbie element6w tablicy (czyli diugoSci tablicy), a po-
niewa2 zaleLy nam, by wySwietli6 kolejne elementy tablicy, nakazujemy powigkszenie
i
wartoSci o 1 (ten zapis mo2e r6wnie2 wygl4da6 tak: i :
i+1 lub i++). OczywiScie,
i
gdy powiEkszaty w ten spos6b licznik przyjmie warto66 4 (takajest dlugo66 tablicy),
wykonl,-wanie pgtli sig zakoiczy.

2.5.2.1. lterowanie pgtlq for po tablicach dwuwymiarowych

Thblica dwuu,rirmiarowa to coS, co przlpomina dane uporz4dkowane na osiach X i Y Ka2-
dy punkt w strukturze dwuwymiarowej identyfikowany jest za poinoc4 pary dw6ch liczb.

Przyklad2.2l
W programowaniu tablice dwuwyrniarowe mog4 sig przyda6 np. podczas zapisywariarcz-
grywki szachowej. Doskonale nadaj4sig tak2e do zaprogramowania quizu. Kaildy quiz ma
przecieLpytania i odpowiedzi. Mo2emy zatem utvvorzyc tablicg dwuwymiarow4zavneraj4cq
zar6wno pytania, jak i odpowiedzinanie Oto kod tworz4cy tak4 tablicg fiisting 2.44):

c72
o
 2.5. Instrukcje sterujqce i petle

Listing 2.44
Deklaracja tablicy dwuwymiarowel

consl questicnAndAnswer = |

l'Gdziekoiwiekr,'Edwarci Stachura' l,
I
riiysDar /'Jcnasz Kofi,a' l,
| '2ycre' , 'Jan Twardowskir l

1;

TablicA dwuwymiarow4 deklarujemy jak zwyk+4 tablicg (za pomoc4 nawias6w kwa-
dratowych), jednak zamiast rozdzielonych przecinkami pojedynczych wartoSci (liczb,
napis6w itp.) tutaj mamy u,gte w nawiasy kwadratowe i rozdzielone przecinkami pary
warto6ci. W przypadku naszego quizu ka2d4 takE parg tworzy tytul utworu literackiego
i nazwisko iego autora.

Strukturg tak opracowanego (za pomocq tablicy dwuwymiarowey) quizu obrazuje

Iabela2.2.
Tabela 2.2. Odwzorowanie tablicy dwuwymiarowej za pomocq tabeli
01
0 ,,Gdziekolwiek" E. Stachura
1 ,g/yspa" J. Kofta
^;
2 ,,Zycie" J. Twardowski

Mozna tez przedstawic j4za pomocq wykresu (rysunek 2.39)

':':':'::':'
,0
:r2
:,: .

Rysunek 2.39. Wizualizaqa tablicy dwuwymiarowej jako wykresu

rcr)
I

()
Rozdzial 2. I Elementy programowania na przykladzie jqzyka JavaScript

Teraz wykorzystamy zrrar.1 ju2 nam pgtlg for do wySwietlenia zawartoSci tablicy
que s tlonAndAnswer (listing 2.45):

Listing 2.45
Iteracja po dwuwymiarowej tablicy za pomocE pgtli for

for (let i:0; r { questionAndAnswer.leng-Lh; i += 1) {

consoie.log("lytul wielsza " + quesiionAndAnswet li; t0l );
)

Jak wida6, kod pgtli (poza nazw4 tablicy)

w og6le sig nie zmienil. Nieco inaczej nato-
miast bgdzie wygl4dai efekt jego wykonania, bo tym razem r.ty6wietlone zostan4 po
kolei pary powi4zanych wartoSci (rysunek 2.40).

tytut wiersza ilyspa ya&aile5" i_s.J

tytul xiersza iycie ..._.._ ..ygrtabl.e5,
j5j? ..

Rysunek 2.4O. Rezultat wykonania pqtli for

W trakcie nauki programowania najwaZniejsze jest powtarzanie Dlatego warto prze-
czytat. ten punkt rozdziatu jeszcze raz i powt6rzy6 sobie wszystko, co zostalo w nim
om6wione, oczywi6cie uykonuj4c zamieszczone tu kody

2.5.3. Pqtla for ... of

Istnieie odmiana pgtli for, kt6ra jest szczeg6lnie przydatnado przeprowadzaniaoperacji
na obiektach iterowalnych, np. na tablicach (ale tak2e kolekcjach czy laficuchach zrra-
kowych), kiedy trzeba wykona6 jakie6 dzialanie na kaLdymelemencie takiego obiektu.
To pEtla for ... of. Rzecz jasna w takim przypadku mo2na wykorzysta6 tradycyjn4
posta6 pqtli f or, jednak uLycie f or ... of bqdzie lepszym rczwi4zaniem, cho6by dla-
tego, Le nie trzeba bgdzie zastanawia( siq nad ustawianiem warunku wykonania pEtli.

Oto skladnia pqtli for ... of:

for (zmienna of obiekf iterowalny) {

// kod do wykonania
]

W tym zapisie zmienna ozflacza zmienn4,kt6ra przyjmowa6 bgdzie kolejno wartoS6

ka2dego el'ementu obiektu, obiekt_iterowalny natomiast to obiekt, po kt6rym
moZemy iterowa( np. tablica, laricuch znakowy b4dZ kolekcja.

74
 2.5. lnstrukcie steruiace i petle

Przyklad2.22
zal6zmy,2e chcemy sig dowiedzied, jaka jest wartos6 sumy kolejnych liczb od 1 do 10
zapisanych w tablicy

Listing 2.46 pokazuie, jak zaimplementowa6 rozwi4zanie takiego zadania zwykorzy-

staniem pgtli f or.

Listing 2.46
Obliczanie sumy liczb za pomoc4 pgtli for
L i^o 0;
2 let liczby : [1, 2, 3, 4, 5, 6, ,-, 8, 9, LA);
3 for (let i : 0; i < liczby.length; i-+) {
4 suma +: liczbylil;
5i
6 console.log (suna) ,.

Wynik to, oczywi6cie, 55.

zobaczmy teruz, iak wygl4daloby rozwi4zatie tego zadania z wykorzystaniem pgtli
for ... of (listing 2.47).
Listing 2.47
Sumowanie liczb za pomocA pgtli for ... of
: ^...rro= a;
2 let lrczby: i7, 2, 3, 4, 5, 6,1, 8, 9, LA);
3 for (let ficzba of lrczby) {
4 suma += liczba;
5)
5 consoie . log ( suma ) ;

Wynikiem takze tym razem bEdzie 55.

Na czym polega korzy6d z zastosowania takiego rozwi4zania? Je6li por6wnamy liczbg
Iinii kodu w tych konkretnych przypadkach, zauwaZytny, 2e jest dokladnie taka sama.
Por6wnajmy jednak deklaracje pgtli w wierszu 3. w pierwszym przypadku musieli-
-
Smy ustawia6 zmienn4 licznikow4 (i), za iej pomoc4 deklarowa6, 2e kod pgtli ma by6
wykonywany tak dlugo, jak dlugo r bEdzie mniejsza lub r6wna dlugoSci zadeklarowa-
nej tablicy (i < liczby. Length), na koncu powigksza6 r (r++). Stosuj4c pgrlg f or
... of, wskazujemy tylko,2e instrukcje zawarte w ciele pgtli maj4 by6 wykonane dla
ka2dei wartoSci zmiennej Lrczba, a zmienna ta bgdzie przybierae wartosd kolejnych
element6w tablicy liczby (let lrczba of liczby). Mamy zatem konstrukcjg (1et
r : 0; r < lrczby.length; r++) przeciwko (let lrczba of l tczby).Ta
druga jest zlaczrrie prostsza ibardziej intuicyjna, w szczeg6lnoSci dla pocz4tkuj4cego
programistlz
-7E/\
/Lj
()u,-
 Rozdzial 2. I Elementy. programowania na przykladzie jezyka JavaScript

Pqtlg for ... of mozna zastosowac tylko wtedy, kiedy chcemy przeprowadzic operacje
na kazdym elemencie obiektu iterowalnego GdybySmy chcieli w naszym poprzednim
przykladzie zsumowac tylko co drugq (2 4, 6, B, 10) lub co trzeciq (3 6, 9) liczbqztablicy
liczby, pgtla f or ... of w niczym by nam nie pomogia, Doskonale natomiast spraw-
dzilaby siq odpowiednio zaimplementowana pgtla f or Pokazuje to kod z listingu 2 48

Listing 2.48
Sumowanie co drugiego elementu tablicy za pomocE pgtli for
let suma = 0;
let liczby = 1L,2,3,4,5,6,7, B,9,1Al;
for (let t = 1; i < liczby.length; i +: 2) {
suma +- liczbvlil;
)

console. Iog (suma) ;

Tym razem wynik to 30.

Przyklad2.23
Jak wcze6niej wspomniano, pgtli for ... of mozna uLywae na dowolnym obiekcie
iterowalnym, np. na ci4gu znak6w. Zal62my, ze chcielibySmy wySwietli6 u, nowym
wierszu kaLdy znak (wl4cznie ze spacjami) zdania,,Witaj w Swiecie programowania".
Umozliwi nam to kod z listingu2.49.

Listing 2.49
Pgtla for ... of umozliwia wypisanie kolejnych znak6u, dowolnego napisu

let zdanie : "Wrtaj w 6wiecre proeramowania";

for (le-- znak cf zCanre) {

conscle. Icg ( znak) ;

2.5.4, Pgtla while

Kiedy chcemy wykonywa6 jakie5 dzialanie tak dlugo, jak dlugo prawdziwy jest okre6lony
warunek, mozemy u2y6 pgtli while. Jej skladnia to:
while (zarL:rek) {

// kod do wykonanid
I

/o
,,:.:
 2.5. lnstrukcje sterujqce i petle

Przed kazdorazowym wykonaniem polecen zawarlych w ciele pqtli interpreter spraw-

dza, czy warunek jest prawdziwy Jesli nie pomila cialo pgtli i od razu przechodzi
do pierwszej linii kodu poza pqtlq. JeSli tak, wykonuje polecenia, po czym ponownie
sprawdza warunek i jesli wciqz jest on prawdzrwy wykonuje polecenia i tak az do
momentu, kiedy warunek bgdzie falszywy. Wtedy nastqpi wylScie z pgtli. -
Oznacza to, ze kod zawafty w ciele pqtli whrle nie zostanie wykonany w ogole, jesli
warunek poczqtkowy okaze sig faiszywy.

Przyklad.2.24
Zal6zmy, ze chcemy napisa6 program odliczaj4cy w d61 od 10 do 0, na koflcu za6 wy-
swietlid komunikat ,,Koniec odliczania". Mo2emy do tego u2y6 kodu z listingu 2.50.

Listing 2.50
Odliczanie od 10 do 0
Let licz = 10;
whrle (Iicz >: 0) i
console.loq(Lrcz);
ttcz--;
]

console. Log ( "Koniec odl.iczania" );

w wyniku wykonania tego kodu kolejna liczbabgdzie wyswietlana do momentu, gdy

pomniejszana po ka2dej iteracji zmienna ticz stanie sig mniejsza od 0. wtedy wy-
konywanie pgtli zakoirczy sig, a interpreter przejdzie do nastgpnego wiersza (ju|poza
pgtl4), w wyniku czego wy6wietlony zostanie komunikat o zakoflczeniu odliczania.

Konieczne jest zadbanie o to, by w pewnym momencie warunek wykonania pgtli stal
siq falszywy W przeciwnym wypadku utworzymy tzw. pqtlq nieskonczonq ktora bq-
dzie siq wykonywac w nieskoriczonosc, chyba ze zostanie przerwana, np, poprzez
wymuszenie zamkniqcia programu,

Przyklad,2.25
zal6Lmy,2e w programie z listingu 2.50 zapomnielismy wpisa6 polecenie L].cz--,
kt6re pomniejsza w kaildei iteracji zmiennq 1icz, sprawiaj4c, Le po odliczeniu do 0
i kolejnym pomniejszeniu warunek staje sig falszyvnry: Kod wygl4dalby zatem tak, jak
pokazano na listingu 2.51.

UO
1

,,)
Bozdzial 2. I ElemenV programowania na przykladzie jezyka JavaScnpt

Listing 2.51
Pgtla nieskoiczona

iet licz:10;
whrle (Lrcz >: 0) i

console.log(Lrcz);
l

console.lcg ("Koniec odLrczanla") ;

W takim przypadku wamnek nigdy nie zostalby sfalsyfikowany, pqtla wykonywalaby siq
wigc raz za razem) wySwietlaj4c kolejne dziesiEtki, a komunikatu ,,Koniec odliczania"
nie zob aczylibySmy nigdy

W naszym programie odliczajqcym w dol dobrym pomystem byloby op6znienie wy-

Swietlania kolejnych liczb np, o lednq sekundg. Jednak w JS jest to do6c skomplikowa-
ne i nie bqdziemy tutaj o tym pisac. Znacznie prosciej uzyskac ten efekt np, w Pythonie,
po zaimportowaniu biblioteki time i uzyciu pochodzqcej z niej funkcji sleep Nie-
zbgdny kod w tym jgzyku ma takq postac:
import time
Iicz:10
whi le I )az. )>= A:

time.sleep(1)
print ( lrcz )

Licz -: 7
prinl- ( "Koniec odllczania" )

Warto zauwazyc, ze w Pythonie nie stosulemy Srednikow ani nawiasow klamrowych;

poczqtek pgtli wskazuje dwukropek, a ciato pgtli wyznaczane jest wciqciami Ostatnie
polecenie. wySwietlajqce komunikat ,,Koniec odliczania", znajduje sig juz poza pqtlq

2.5.5, Pqtla do ... while

Pgtla do ... whrle rozni siq od whrle tylko tym, 2e najpierw wykonuje polecenia
zawarte w swym ciele, a dopiero potem sprawdza warunek wykonania pgtli i ie6li iest
on prawdziwl,, wykonuje je ponownie, aL do momentu, gdy warunek stanie sig falszy-
rrlr W zwiqzku z tym polecenia zostan4 wykonane przynajmniei raz, niezaleZnie od
wartoSci warunku. Tymczasem kod pgtli whrle nie wykona sig ani razu, jeSli warunek
w niej ustawiony bgdzie falszywy

,78
 2.5 lnstrukcje sterujqce i pqtle

Oto skladnia polecenia do ... while:

doi
// kod do wykortania
l

while ( rarunek)

Pruyklad2.26
Na listingu 2.52 przedstawiono zmodyfikowany program do odliczania. Tym tazem
ma on wyswietla6 w pgtli komunikat ,pdliczam". Dla por6wnania w programie uzyto
zar6wno pgtli do ... whlle, jak i whr1e. w obu przypadkach wamnek pocz4tkowy
jest falszywy w obu pqtlach wpisano tak2e komunikat, kt6ry pomoze w identyfikacji
wykonanego kodu.

Listing 2.52
R6znica migdzl, do ... whiie i while

let ircz : 10;

// pqtla do ... while

do{
conscie.log("Petla io ... while',)
corsole. lcg ( "Odliczam" );
I I ^-

while (1rcz <: 0)

// pgtla while
while (licz <: g.
) {

conscle. Icg ( "PetIa while" )

.cnsole.:og (',Odliczam" );

Ltcz--:
I

Wynik wykonania tego kodu jest nastgpui4cy:

Petla do ... whiLe
Odliczam

7s {)
t,)
 Rozdzial 2. I Elementy programowania na przykladzie jezyka JavaScript

Jak wida6, kod pEtli while nie zostal wykonany, poniewa2 najpierw interpreter spraw-
dzit warunek i po okreSleniu, 2e jest on falszywy, w og6le nie wchodzil do ciala pEtli.
Inaczel bylo w przypadku pqtli do ... whl1e, kt6ra wykonala sig raz, poniewai., jakto
zostalo wczeSniej wyja6nione, w tej pEtli kod wykonywany jest raz,fla samym pocz4tku,
dopiero po tym sprawdzany jest warunek, a kolejne wykonania poleceri uzaleznione
s4 od jego wartoSci.

a.-..|,
V12.6. Wprowadzenie do programowania
T--T I

obiektowego
W programowaniu da sig uyr62ni6 kilka tak zwanych paradygmat6w, czyli sposob6w
organizacji i tworzenia kodu. Do szczeg6lnie czgsto stosowanych nalez4l.
. programowanie proceduralne,
o programowanie strukturalne,
o programowanie funkryjne,
. programowanieobiektowe
Wszystkie te paradygm aty mog4 by6 stosowa ne lqcznie.
Zgodnie z parudygmatem proceduralnym nalezy dzieliC kod na procedury fragmenty
wykonuj4ce SciSle okreSlone operacje
-
Wedlug zalozei programowania strukturalnego kod powinien byd organizowany
w hierarchicznie ulo2one bloki, z jednym punktem wejScia i jednym lub wieloma punk-
tami wyjScia iak jest np. w przypadku bloku instrukcji lf ... ef se if ... else.
-
W programowaniu funkcylnym kladzie siq nacisk na funkcje rozumiane na wz6r
funkcji matematycznych
- ka2da taka funkcja dla danych warto6ci argument6w zwraca
zawsze tg sam4 wartoS6, np.2+2 zawsze bgdzie r6wne 4,bez wzglEdu na jakiekolwiek
warunki wstEpne.
Ogromne mo2liwo6ci daje stosowane dzi6 niemal powszechnie programowanie obiek-
towe, oparte na obiektach bgd4cych abstrakcyjnym odwzorowaniem element6w Swiata
rzeczywistego. KaLdarzeczmoLe by6 opisana jak klasa, bgd4ca swoistym schematem czy
,,przepisem" na przedmiot, kt6ry mabyeutworzony na jej podstawie Klasa to po prostu
byt z wlaSciwoSciami i zachowaniami (dzialaniami), coS, o czym mo2emy powiedzieC,
jak wygl4da oraz jak siq zachowrrje Na podstawie tego schematu molna tworzy6 wiele
konkretnych obiekt,6w, kt6re mog4 62nie siE konkretn4 wtaSciwoSci4, jednak kaLdy
musi posiada6 wszystkie wlaSciwo6ci zawarte w definicji klasy. Samoch6d mo2e np.
mie6 silnik benzynowy albo na olej napEdowy, ale nie mo2e nie miee silnika. Zwierug
w schronisku mo2e by6 psem albo kotem, ale musi by6 jakimS rodzajemzwierugcia.

alB0
0
 2.6. Wprowadzenie do programowania obiektowego

KaLdaklasa moze mie6 ponadto, jak juz wspomniano, zdefiniowane pewne zachowania
lub czynnoSci. Pies szczeka, kot miauczy, papuga lata. O ile trzecie dzialanie nie ma nic
wsp6lnego z pierwszymi dwoma, to szczekanie i miauczenie mog4 by6 opisane iako
r62ne rodzaje (zalezne od konkretnego egzemplarza klasy zwierug) iednej czynnoSci:
wydawania glosu.
Po utworzeniu konkretnego obiektu na podstawie jego definicji moLna odwotywa6 sig
do kaZdei z jego wla6ciwoSci czy dowolnego zachowania wlaSnie poprzez ten obiekt.

W dalszejczgsci tego rozdzialu przedstawimy (w bardzo duLym skr6cie) podstawy

programowania obiektowego.

Przyklad.2.27
Spr6bujmy opisa6 obiektowo telefon kom6rkowy
Najpierw tworzymy pust4 definicjg klasy (listing 2.53).

Listing 2.53
Pocz4tek tworzenia pustej definicii klasy Phone

ciass Phone I

Definiowanie klasy rozpoczylamy od uzycia slowa kluczoweSo class. Nazwq klasy

rozpoczynamy od wielkiej litery Nastgpnie okre(lamy wlaSciwoSci i metody klasy.
Wszystkie te wta6ciwoSci i metody podajemy zamknigte w nawiasach klamrowych.
ZdefiniowaliSmy klasg telefonu bez 2adnych wla6ciwoSci. Dodajmy mu kolor i markq
(listing 2.54).

Listing 2.54
Dodanie wla6ciwo6ci do klasy
class Phone {

brand - "Samsung";
color = 'black';
]

Dodanie wlasnoSci do klasy realizujemy poprzez wpisanie (wewn4trz nawias6w klamro-

wych) nazw wlasnoSci, a potem, po znaku r6r,tno6ci, przypisanych im warto3ci. W na-
szym przypadku utworzyli6my w1asno56 brand i przypisali5my iei domySln4 wartoS6
"samsung" (poniewaz jest to lancuch znakowy, musi by6 zapisany w cudzyslowie.
Gdyby6my chcieli zdefiniowa6 wlasno56 okre5laj4c4 ceng telefonu, nie wpisywaliby6my
cudzyslowu, lecz sam4 liczbg, jak wida6 na listingu 2.55). Druga wtasnoS6, co1or,
informuje o kolorze telefonu.

81
'
i'
d,:*'!:
 Rozdzial 2. I Elementy programowania na przykladzie jqzyka JavaScript

Listing 2.55
Dodanie kolejnych wlasnoSci klasy
class Phone {
brand : ',Samsung";
coior = 'black';
prrce = 723.21;
usbC : f alse,'

w wielu przypadkach naipierw definiuje sig szkielet klasy, nie podaj4c konkretnych
wtaSciwoSci (takich jak samsung czyblack z powylszego listingu). Wla6ciwo6ci te
mog4 zosta6 okreSlone poiniej, podczas tworzenia obiektu. W tym przypadku ustawili-
6my Samsung i black jako warto6ci domySlne. Oczywi6cie podczas tworzenia nowych
obiekt6w wlasnoSci te mog4 by6 modyfikowane.

Je6li chcemy wypisa6 obecn4 warto6d klasy (lub odwola6 siq do niej w dowolny inny
spos6b), najpierw musimy zainicjowa6 zmiennq nowo utworzonym obiektem typu
Phone. zmienn4 obiektow4 inicjujemy, wpisujqc jej nazwg, znak r6wnosci, a po nim
slowo kluczowe new i nazwg klasy, kt6rej instancjg chcemy utworzy6.
W celu uzyskania wlaSciwo6ci obiektu, kt6ry jest przypisany do zmiennej phone, naleLy
wpisa6 nazwg zmiennej, a po niej, oddzielon4 kropk4, nazwg wlasnosci (listing 2.55).

Listing 2.56
Wypisanie wartoSci wlasnoSci obiektu

Iet phcne = new Phone ( );

conscle.lcg("I'larka telefonu t. " + phone.ttranci + ", cena: ,' + phcne.price);

Oto efekt (rysunek 2.41):

va-r&b,lc5-i r r,q

Rysunek 2.41 . Wlasnosci obiektu wypisane w konsoli

Jak itLwspomniano, klasy mog4 mie6 nie tylko wlasnoSci (cechy), ale te|zachowania
czy czynnosci, kt6re wykonuj4. Telefon np. dzwoni lub wysyla SMS. czynnoSci w pro-
gramowaniu r,azryamy metodami. W JS tworzy sig je za pomoc4 slowa kluczowego
function.

:l82
 2.6. Wprowadzenie do programowania obiektowego

Wiele funkcli, by vrykonae jakqS czynno56, musi pobra6 parametr (ieden lub wiele).
Telefon nie wySle np. wiadomoSci, jeSli nie napiszemy jej tre6ci i nie okre6limy odbior-
cy Pobierzmy zatem tre56 SMS-a (zal62my,2e odbiorca iest ju2 zdefiniowany), prosz4c
u2ytkownika o jei podanie
Na pocz4tku skupmy sig na napisaniu metody sendSms (definiujemy i4wewn4trz
definicji obiektu).
Oto przykladowa, pusta funkcja (listing 2.57):

Listing 2.57
Pusta funkcja

funclion ( ) {

Co ,,robi" tak zdefiniowana funkcia? Nic Nie ma ciala (to czES6 wpisywana pomiq-
dzy rrawiasami klamrowymi), kt6re okreSlaloby wykonywane w niej czynnoSci. Nie
ma nawet nazry, dzigki kt6rej mogliby6my j4 wywota6. W tei chwili nie iest zatem
specjalnie przydatna.
Metodg dodajemy do klasy tak samo jak wla6ciwoS6, co pokazano na listingu 2.58.

Listing 2.58
Dodanie do obiektu definicii metody
class Phone {

brand = "Samsung";
colcr = 'black';
price = I23.2L;
usbC = false;
sendsms : function(text) {

OczywiScie ta metoda, cho6 ma juLnazwg (sendSms), takze nie robi nic. Krok po
kroku temu zaradzimy. Teraz dodamy do niej kod, kt6ry przypisze parametr text do
wlasciwoSci sms (listing 2.59).

Listing 2.59
Przekazanie parametm do funkcii

1 class Phone {

2 brand : "Samsung";
3 color : 'black';
 Rozdzial 2. I prog ramowani a na przykl adzie JavaScript

4 price = 123.21;
5 usbc : false;
6 sendSms = function(text) l.

I Lhis. sms = t-oxt:

8I
9j
w linijce 6. dodalismy pomigdzy dwoma okr4glymi nawiasami parametr.
W linijce 7. poinformowaliSmy, 2e do tego obiektu (thr s to wazne slowo kluczowe
-
ozrTacza biel4cy obiekt), czyli do telefonu (phone), do wlasciwosci sms (tak, w tym
samym miejscu utworzylismy wlasciwos6 sms) przypisujemy wpisan4 przez u2ytkow-
nika warto66.
Wywolanie tej funkcii wygl4da tak samo jak odwolanie sig do wlasno6ci: najpierw pi-
szemy nazwE zmiennej obiektowej, kt6ra jest typu naszego obiektu, potem wpisujemy
kropkg, po niej podajemy nazwg funkcji. w nawiasach wpisujemy z kolei prrr-"i,
(tutaj treS6 wiadomoSci listing 2.60).
-
Listing 2.60
W).wotanie funkcji
1et phone = new phone O ;
phcae. sendSms ( "dobr.ego dnra" ) ;
console. log (phone . sms ) ;

To pozwoli uzyska6 (tu wyswietlony w konsoli) komunikat (rysunek 2.42):

:A *: f t*menls Console S**lres !J*tw*rk >t

WiY
X*tap v & l:lir: fsrail,l ,gvrlis v S
dobrego dnia *:q9ile -phg!g,j s: U
i

Rysunek 2.42. Wyswiefl enie treSci wiadomosci

Dodajmy jeszcze informacjq, od kogo jest SMS (listing 2.61).

Listing 2.61
Klasa z uzupelnion4 metod4 sendSms i dodanym atrybutem user

class Phone {

brand : "Samsung',;
coLor = 'black';
price : 123.21;

')84
C
 2.7. Kolekcje

usbC : false;
user = "Marcin";
sendsms : function (text) {
this.sms : this.user + " wyslat sms: " + text;
i

DodaliSmy kolejny atrybut (user) i wykorzystali6my tg informacjg w metodzie sendSms

poprzez odwolanie sig do niej zapomoc4 konstrukcji this. user.

Ten podrozdzial nie lest prosty. Jego zrozumienie wymaga sporego skupienia i doklad-
nego przemy6lenia jego treSci. Najlepiej przeczylac go co najmniej dwa razy,

,/-\-
v 2.7. Kolekcje
Po zglqbieniu tematu tablic oraz programowania obiektowego warto zaznajomi( sig
z kolekcjami. Mo2na powiedzie( kolekcja to,,opakowana" w funkcjonalne metody
2e
tablica. Moze natomiast mie6 wlasne metody, poniewa2 w rzeczywisto6ci jest obiektem.

Wykorzystanie kolekcji ma sens w przypadku duzych zbiorow danych,

Wyr62niamy dwa podstawowe typy kolekcji: zbi6r i listg

2.7.1. Set
Set to zbi6r element6w niepoukladanych. Jest bardzo podobny do tablicy, jednak2e
wszystkie jego elementy s4 unikatowe (nie mog4 siq powt6rzyt), co czgsto bardzo sig
przydaje. Pr6ba dodania do setu elementu, kt6ry jest ju2 w nim zawarq\ nie spowoduje
btgdu. Po prostu nowy element nie zostanie dodany, jeSli mialby zdublowa6 ju2 istniej4cy

Zobaczmy, jak zadeklarowa6 kolekciE typu set (listing 2.62).

Listing 2.62
Deklaracja kolekcji typu Set

Iet clothes : new Set O ;

 Rozdzial 2. I Elementy programowania na przyktadzie jqzyka JavaScript

Zwroc uwagg na koniecznos6 uzycia siowa kluczowego new, Swiadczqcego o tym,

ze zbior jest klas4

Tak dodajemy elementy do zbioru (listing 2.63):

Listing 2.6j
Dodawanie element6w do zbioru
clothes. add ( I sweter' ) ;

cLothes.add(' jeans' );

Teraz czas pokaza6 potggg kolekcji. w celu sprawdzenia , czy dany element wystgpuje
w tablicy, trzeba przeiterowa6 po niej (przej6(. po wszystkich lei elementach). W kolek-
cjach oczywiScie dzieje siq to samo. Niemniej w przypadku tablic musimy sami pisa6
implementacjg iteracji (np. z wykorzystaniem pgtli f or), tym razem zas molemy uLyt
gotowej metody has, kt6ra zwraca wartoS6 true, jeSli szukany element znajduje siE
w kolekcji, f alse w przeciwnym wypadku . Zatem wywolanie zlistingu 2.64:

Listing 2.64
Sprawdzenie, czy zbi6r zawiera okre6lony element

clothes.has (';eans, ) ; // true

zwr6ci warto66 true.

Usuwanie elementu z tablicy r6wnie2 bylo do56 skomplikowane; ruraj zast4piono to
metodq delete, pokazan4na listingu 2.55:

Listing 2.65
Usuwanie elementu zbioru

clorhes. deler,e ( 'sweter' );

Wielko66 kolekcji uzyskamy, stosuj4c wla6ciwo36 s r z e (listin g 2.66).

Listing 2.66
Pobranie informacji o wielko6ci zbioru

clothes .stze; // z

To oczywiscie tylko przyklady metod zwi4zanych z typem Ser. Aby zapozna( sig z in-
nymi, warto zajrzee do oficjalnej dokumentacji tego typu.

a )86
----7:-
 2.7. Kolekcje

2.7.2. List
Innym rodzajem kolekcji, ale tLywanym wtedy, gdy zalezy nam na tym, by elementy
mogty sig powtarza6, jest lista.
Lista to poukladana kolekcja tworzona w ten spos6b, 2e do elementu pocz4tkowego
mo2na siq odnie56, dodaj4c kolejny element.
W przeciwieristwie do zbioru, w jgzykuJavaScript nie ma wbudowanego typu dla tego
rcdzaju kolekcji. Lista jest dostgpna jako czqS6 wielu zewngtrznych bibliotek.

Pruyklad2.28
Dzialanie listy najpro6ciej sobie wyobrazi( na przykladzie poci4gu z wagonami. Na
pocz4tku jest lokomotywa, po niej 4 wagony Gdy chcemy doda6 wagon restauraryjny
pomigdzy wagonami 2. i3.,to naleLy odpi4e wagon 2. od3., nastEpnie dopi46 wagon
restauraryjny do wagonu 2., apotem do 3. Miejsce dopinania nazywane jest wgzlem.
W przypadku gdy chcemy usun46 jakiS wagon, procedura jest analogiczna. MoLemy
przejS( po wszystkich elementach kolekcji z v',rykorzystaniem wiedzy o zale2noSciach
migdzy wagonami (wiemy, kt6ry wagon jest po wagonie 1. i 2e wagon 1. jest doczepiony
do lokomotywy).
Skoro potrzebujemy ai tyht operacji, to do czego jest nam potrzebna lista?

Czgsto chcemy mie6 kontrolg nad tym, gdzie dokladnie wstawiamy nowy element
dodanie go na koflcu tabliry czy zbiorunas nie zadowaTa. WlaSnie w takich przypadkach
-
nieoceniona jest lista, pozwalaj4ca umieszczaC nowe elementy w wybranym mieiscu
kolekcji na podstawie indeks6w element6w.
Podstawowe kolekcje zostaty przez fias om6wione, jednak2e w przypadku bardziei
zloilonych problem6w warto zaznajomie sig z pozostatymi, np. map4 (uap).

2.7,3. Obiekt iterator

Funkcjonalno66 podobn4 do listy wykorzystuje obiekt iterator. Implementacjg ury-
6wietlenia element6w tablicy zaiego pomoc4, bezwykorzystania pEtli f or,pokazano na
listingu 2.67.W pierwszym wierszu utworzyliSmy tablica blocks, po kt6rej iterujemy
zwykorzystaniem iteratora. Obiekt ten moZna wykorzysta6 dopiero wtedy, gdy jawnie
wska2emy, 2e go utworzylilmy, stosuj4c do tego konstrukcjE Symbol . iterator. Ite-
ratot za pomoc4 swojej metody next sprawdza, czy istnieje nastgpny element zbioru.

Listing 2.67
Wykorzystanie obiektu iterator do iterowania po tablicy
consl bfocks : ["Lego',r "Cobi,'];
const iterator : blocks ISymbol. iterator] O;

console . 1og ( iterator. next O ) ; // {ualue: "Lego", done: false}

87 i:
{J
 Rozdzial 2. I Elementy programowania na przykladzie jqzyka JavaScript

consofe . fog ( iterator. next O ) ; // *Cobl', done:

{ualue: falsel
conso.Ie . 1og (iterator. next O ) ; // {ualue: undefined, done: true}

Tak oto zako:i,czyli(;my dlug4 przygodg z poznawaniem podstawowych element6w

programowania. Jest to spora dawka wiedzy, a jej przyswojenie na pewno nie jest la-
twe Niemniej jest to etap, przezkt6ry trzebaprzeiie (najlepiej kilkakrotnie), by m6c
w przyszloSci tworzye dobrze dzialajqce i przydatne aplikacje Po jakims czasie za|,
kiedy nabierze sig wprawy, pisanie program6w stanie sig latwe, intuiryjne i przyjemne
(-)"
T
2.8. Zadania
---1----
W tym podrozdziale znaidziesz zadania do calego rozdzialu. Poprosimy Cig o napisanie
wielu prostych program6w. Wszystkie wiadomo6ci potrzebne do rozwi4zania zadafi.
znajdziesz w treSci tego rozdzialu. JeSli musisz je sobie przypomnie{ przeczytaj odpo-
wiedni4 sekcjg jeszcze ru2.

Zadanie 2.1
Utw6rzwlasn4listg zakup6w zawieraj4c4 ceny produkt6w potrzebnych do ugotowania
obiadu. Niech w koszyku zakupowym zrajd4sig warzy-wa oraz miqso. Po dodaniu kilku
produkt6w oblicz ich ceng uwzglgdniaj4c4 podatek.

Zadanie 2.2
Policz l4czny wzrost czlonk6w Twojej najblilszej rodziny Utw6rz tyle zmiennych, ilu
masz najbliilszy ch, p r zy pisz do zmi ennych wzro st p oszczeg6lnych o s 6b w centym etrach.
Na koniec zsumuj wartoSci przypisane do zmiennych.

Zadanie 2.3
Zdeklaruj zrr;rienn4 piosenka i przypisz do niej tekst zwrotki ulubionej piosenki,
a nastEpnie wy6wietl go za pomoc4 tej zmiennej w konsoli.

Zadanie 2.4
Zdeklaruj kilka zmiennych, pr zypisz do nich tylko po j edyncze wersy piosenki z p oprzed-
niego zadania, a nastEpnieprzy :u|yciu tych zmiennych rvy6wietl w konsoli cal4 piosenkg

Zadanie 2.5
Napisz aplikacjg, w kt6rej pobierzesz od u2ytkownika jego imiq oraz informacjg o jego
ulubionym kolorze. Nastgpnie wySwietl w konsoli komunikat: ,plubiony kolor u2yt-
kownika (...) to (...)".W miejscu wielokropk6w powinny zostae wySwietlone wpro-
wadzone wczeSniej dane.

(-JBB
i:)
 2.8. Zadania

Zadanie 2.6
Napisz aplikacjg, w kt6rej u2ytkownik poda kwotg brutto, a w konsoli zwr6cona zo-
stanie kwota netto.

Zadanie 2.7
Uw6rz tablicE z popularnymi markami obuwia i wypisz rozmiar tej tablicy oraz jej
przedostatni element.

Zadanie 2.8
Utw6rz kolekcjg marek laptop6w zawieraj4c4wigcej niz szel(. marek, po czym wypisz
elementy drugi i czwafiy.

Zadanie 2.9
PoproS u2ytkownika o wpisanie dowolnej liczby parzystei.JeSli wpisze on liczbq niepa-
rzy st4, wy5wietl alefi z komunikatem :,)Mpisan a liczba j est nieparzysta".

Zadanie 2.1O
U2ytkownik proszony jest o wskazanie numeru budynku na ulicy Kolskiej. Z bazy
pocztowej wiemy, 2e na ulicy Kolskiej znajdui4 siq budynki wyl4cznie z numerami
pomigdzy 10 a 15. Aplikacja powinna wySwietli6 alert w przypadku podania numeru
budynku spoza tego zakresu.

Zadanie 2.11
Utw6rz tablicg zawteraj4c4nazry produkt6w. U2ytkownik powinien m6c wpisad numer
i uzyska6 informacjE o produkcie zapisanymw tablicy pod indeksem odpowiadaj4cym
wpisanemu numerowi. Je6li poda numer wykraczaj4cy pozazakres tablicy, to powinien
zostae wySwietlony odpowiedni komunikat.

Zadanie 2.12
Wszyscy znamy kolejno66 planet w Ukiadzie Stonecznym. Napisz aplikacjq, kt6ra po
wpisaniu przez tLytkownika numeru planety r,vySwietli jej nazwg. JeSli u2ytkownik
wpisze liczbg wiEksz4ni? B, powinien uySwietli6 siE alert zinformacj4,2e Uklad Slo-
neczny ma tylko 8 planet.

Zadanie 2.13
W ogrodzie botanicznym jest cennik bilet6w:
o normalny-3zl
o ulgowy 1.,5 zl
-
Napisz aplikacjq, w kt6rej u2ytkownik podale liczbE bilet6w normalnych orazulgor,tych,
po czym uzyskuje informacjg o kwocie do zaplaty.
Rozdzial 2. I ElemenV programowania na przyktadzte jezyka JavaScript

Zadanie 2.14
Zat62my,2e dziehrczpoczyta sig wschodem sloirca o 6, a koflczy zachodem o 21. Napisz
aplikacjq, kt6ra po wpisaniu przez uLytkownika pelnej godziny wySwietli informacig
o porze dnia. Przyjmijmy,2e ranek tnva do 11, godzina 12 to poludnie, od 13 do 18
mamy popoludnie, od 18 do 27 wiecz6r, a migdzy godzinami 27 i 6 noc.

Zadanie 2.15
Stw6rz prost4 aplikacjg pogodow4, kt6ra, w zale2noici od wySwietlonych ponizej wa-
runk6w, bgdzie wy6wietlata odpowiadaj4ce im komunikaty:
. Warrnek: ,,Jest slonecznie i pochmurnie"; komunikat: ,,Idg pobiega6".
o Wamnek: ,,Jest slonecznie i powy2ej 25 stopni"; komunikat: ,,Idg sig opala6".
o Warunek: ,,Pada"; komunikat: ,,Zostajg w domu i czytam ksi4zkg".

Zadanie 2.16
Napisz aplikacjg typu quiz. Opracuj trzy pytania i odpowiedzi na nie. Pytania powinny
wy6wietla6 sig kolejno u2ytkownikowi, a on powinien wprowadza6 odpowiedzi. Na
kofrcu, zaleLnie od liczby trafiefl, powinien otrzyma( informacjg o uzyskanej randze:
o Czarnoksig2nik gdy odpowiedzial na wszystkie pytania;
-
o Mistrz gdy odpowiedzial na dwa pytania;
-
o Adept gdy odpowiedzial na jedno pytanie.
-
Zadanie 2.17
W sklepie zoologicznym sprzedawca potrzebuje programu, kt6ry poda klientowi, ile
karmy nalezy odmierzy6 dla kota na podstawie jego wagi, zgodnie z przelicznikiem
podanym na opakowaniu.

cat(kg) t 2 3 4 5 6

daily amount (g) 20 31 41 50 58 66

Napisz taki kalkulator, kt6ry obliczy potrzebnq ilo66 karmy oraz wySwietli odpowiedni4
informacjE w konsoli.

Zadanie 2.18
Napisz kalkulator do obliczenia, czy z g6ry znane wagi kilku element6w nieprzekraczaj4
wskazane j przez u|ytkownika ladownoSci cigzar6wki.

Zadanie 219
Stw6rz quiz (podobny do tego z zadania 2.76) przy uzyciu tablicy dwuwymiarowej.
Quiz ma zawierae 10 pytafl z odpowiedziami. Po udzieleniu odpowiedzi u2ytkownik
powinien uzyska6 informacjg rankingow4:
 2.8. Zadania

o 0 - 4 poprawnych odpowiedzi Spr6buj ieszcze raz;

o 5 - 8 poprawnych odpowiedzi-- CalkiemnieZle;
o B - 10 poprawnych odpowiedzi Jeste6 mistrzem!
-
Zadanie 2.2O
Utw6rz tablicg zawieraj4c4piq6 wybranych stolic europejskich.ULywaj4c pgtli f or ...

of, wypisz wszystkie stolice zawarte w tablicy

Zadanie 2.21
U2yj pgtli f or do zsumowania co trzeciego elementu tablicy liczby = 17, 2, 3,
4, 5, 6,'7, 8, 9, 10].

W ponizszych zadaniach wykorzystaj zdobytq wiedzq o obiektach.

Zadanie 2.22
Stw6rz aplikacjE, kt6ra pozwoli uzupelni6 dane klienta (znamy ju2 imig i nazwisko)
o wiek i ple6.

Zadanie 2.23
Napisz aplikacjg do obsiugi stoiska warz)'wnego, dziEki kt6rej wlaSciciel podaje infor-
macje o cenach swoich towar6w (zal6Lmy,2e znamy juL nazwE firmy).

Zadanie 2.24
Utw6rz klasg opisuj4c4 windE w bloku. Utw6rz parametry okre6laj4ce, ile os6b mo2e
wejS6 do windy oraz jei wymiary Dodaj metodg do wskazania, na kt6re pigtro winda
ma wjecha6 (u2ytkownik podaje numer pigtra).

Zadanie 2.25
Stw6rz aplikacjg wySwietlaj4c4 informacje na temat Lublina: liczbg mieszkaic6w,
wsp6lrzgdne geograficzne otaz powierzchnig. Wykorzystaj konstrukcjE laricuch6w
szablonowych.
 Rozdziai 2. I ElemenV programor,tanra na przykladzie jqzyka JavaScript

r :OO
"*-tt-
Sama umie;'gtno56 poprawnego napisania kodu podczas tworzenia aplikacji nie jest
Wstarczai4ca. Dzisiaj wymagane jest, by programy byty wydajne, testowalne i proste
w utrzymaniu.
Projektowanie aplikacji to proces, kt6ry na o96l trwa wiele miesiEcy i kt6rego celem jest
uproszczenie pracy wszystkich czlonk6w zespolu. Dobrze zaprojektowana aplikacja to
taka, kt6ra jest latwa w Lttrzymaniu i rozbudowie.

Jedn4zwalniejszych 16l w zespole tworu4qm oprogramowanie odgrywa dzisiaj osoba

UX designera. Odpowiada ona zapopruwg odbioru aplikacji przeztrzytkownika kori-
cowego. Do jej zadahnaLeLy m.in.:
. wskazanie preferencji grupy docelowej;
. dobranie prawidlowej wielkoSci element6w aplikacji zaleLnie od urz4dzenia, na
kt6rym b9d4 wy6wietlane;
o zaproiektowanie makiet, kt6re zaprezentui4 rozmieszczenie element6w na ekra-
nach aplikacji.
UX designer, opieraj4c sig na znajomo6ci profilu docelowego u2ytkownika,przekazuje
nam informacje dotycz4ce tego, jak ma wygl4da6 makieta aplikacji. JeSli nie mamy
w zespole projektanta, mozemy uzyska6 takie dane od klienta. Jednak nawet je6li
wymagania co do wygl4du bgd4 jasno sprecyzowane, moZe to nie wystarczy(.,by za-
dowoli6 u2ytkownika. Przez pierwszych kilka chwil zostanie z nami i bgdzie t|ywal
naszej aplikacji, ale jeSli nie bgdzie ona wydajna (np. strona czy jakiS jej element bgd4
sig ladowa6 za dlugo), do56 szybko straci ni4 zainteresowanie.

Rozwijanie aplikacji od strony wizualnej jest bardzo waLne, ale w tym rozdziale skr6-
towo om6wiony zostanie spos6b wykonania wydajnej i prostej w utrzymaniu aplikacji
w kontekScie programisty.
 Rozdziat 3. I Pr:ojektbwanie aplikacji
/-l
[l3-1. Dobre praktyki zwiqzane
z programowan iem obiektowym
walne jest, by kod byl iaknajbardziej sp6jny. Spelnienie tego urymogu ulatwia uyko-
rzystywanie wspomnianych w poprzednim rozdziale obiekt6w wraz z jego metodami
oraz funkcji.
Dla przypomnienia: funkcje s4 to luzne, wydzielone instrukcje zamknigte w ramach
bloku. Dzigki temu ten sam ci4g instrukcji moLebyt wykonany wielokrotnie,bez
potrzeby powielania (kopiowania) tego samego kodu. Metody, podobnie jak funkcje,
s4 to wydzielone kawalki kodu opakowanego w blok, jednak umieszczone w ramach
danej klasy Pomaga to w powiEzaniu danego zestawu wlaSciwoSci klasy oraz operacji,
jakie taka klasa mo2e wykona6.
Poni2ej zaprezentowane zostanie u|ycie funkcji (przyklady 3.1i3.2) oraz metod (przy-
ktad 3.3).

Przyklad 3.1
Na listingu 3.1 zdefiniowali6my funkcjE maximum, kt6ra przyjmuje jako argument
tablicg liczb i zwraca najwiEkszy spoSr6d jej element6w. Najpierw zadeklarowaliSmy
zmienne tablicowe, na kt6rych bgdzie dziala( metoda. Nastgpnie podaliSmy definicjg
metody. Jej wy,wolanie powinno wyst4pi6 na koricu.

Prezentowane tu kody znale^c mozna w serwisie GitHub pod adresem'. http:llgithub.

co m lwe ro n i kako rtas I book

Listing 3.1
Definicja i wywolanie metody do wyznaczenia najwigkszego elementu tablicy
// de kl aracj a zm ie nny ch ta bl ic owych

const number" = 111. Ll, 13);

const numbersDoubie : 13.0, 7.1 , 5.1) ;

r/ dcfinicja mctody mtxirntrm

function maximum (array) {
let max: arraylO];
f or (]et i : 7; i < array. tength,. r++) t

var arrayE-lement = arraylil;

if (max < arrayElement) {
'ax aIoy:l-metL;

t' 94
l.)
 3.1 Dobre prakVk zwiAzane z programowaniem obiektowym

return nax;
I

// wywolanie metody maximum na tablicy numbers

maximum (numbers) ;

consoLe . Log (maximum (nunbers ) ) ;

Gdy wywotamy maximum bez podania argumentu, w konsoli wy6wietlony zostanie

bt4d. JeSli przekazemy jei jak zrobiono w tym kodzie tablicq liczb calkowitych
- -
(numbers), to wySwietlona zostanie najwigksza z nich, 17. Gdyby przekazanym me-
todzie argumentem byta tablica liczb zmiennoprzecinkowych (numbersDouble),
wySwietlona zostalaby warto66 5,1.
Wynik dzialar.ia metody mozemy przypisae do zmiennej. W takim przl,padku zamiast
poslugiwa6 sig w ostatniej linii (r.,r' metodzie console.loq) wywolaniem metody
maximum (numbers) jest to w gruncie rueczy zdublor.rranie kodu moglibySmy
- -
przekaza( do wySwietlenia sam wynik uywotania. Ostatnie trzy linijki kodu moglyby
wigc wygl4da6 tak jak na listingu 3.2.

Listing 3.2
Wynik wywolania metody mozna przypisa6 do zmiennej
// wywolanie metody mdrim.um na tablicy numbers
const saore : maximum(numbers);
console.log (score) ;

Przyklad.3.2
Przeprowad2my teraz sumowanie maksymalnych element6w pobranych z dw6ch tablic,
przy zalo2eniu,2e jedna tablica sklada sigzliczb catkowitych, a druga ze zmiennoprze-
cinkow-vch (listing 3.3).

Listing 3.3
Sumowanie najwigkszych element6w tablic
iunclion sumofMaxEromArrays(arlay, ar.ray2) {

const maxNunber = maximum(array);

const naxDcuble : naxrmum(array2) ;

return maxNumber + maxDouble;

console . log ( sur-ofMaxEromArrays (numbers, numbersDoul:Ie ) ) ;

Warto zatwa|ye,ze w ciele metody sumofMaxrromArrays nastgpuje wywolanie funk-

cji maximum dla obu tablic, a r,ryniki tych wywolaf zostajE przypisane do zmiennych
(maxNumber i maxDoubf e). Wykorzystuj4c tg wcze6niej utworzon4 metodg i zmienne

q6
 Rozdzial 3. I Projektowanie aplikacji

przechowui4ce wyniki jej wykonan ia, moLnanie duplikowa6 kodu do wyznaczenia

maksymalnego elementu z kaLdej tabliry.
Wynik sumowania od razu zostat wypisany na konsoli. GdybySmy jednak potrzebowali
skorzysta6 z niego w innych miejscach kodu, lepiej byloby przypisae go do zmiennej
i odwotywa6 siE do niego za jej pomoc4.
W przypadku obiekt6w do odniesienia siE do zmiennych obiektowych uZywanych
w metodach wykorzystujemy slowo kluczowe this. Jego u2ycie spowoduje, Le w da-
nym obiekcie tLyta zostanie wlaSciwo66 danego obiektu. Takie odwolanie nazywamy
kontekstem wywolania.

Przyklad 3.3
Utw6rzmy uproszczonA klasE odwzorowuj4c4 pok6j z jego wybranymi wtaSciwoSciami
(dlugoSci4 i szerokoSci{, w6r6d kt6rych wymienione zostan4 tak2e niekt6re znajdn-
j4ce siE w nim elementy (w naszym przykladzie okre6limy, czy w pokoju znajduje siq
biurko). Zdeflniujemy tak2e dla obiektu metodE, kt6ra wySwietli informacje o pokoju
(listing 3.4).

Listing 3.4
Przykladowa implementacja klasy Room
class Room {

- 2AO;
vrtdt-ln
lenqth = 220;
desk = fafse;
space:function O {
return this . width * this . length;
}

display:function O {
console.log('szerokoS6 ${this.width}, d}ugo56 ${this.Length},
powierzchnia ${this.space O }, czy ma biurko ${1-his.desk}') ;
]

const room : new RoomO;

consoLe. log (room. display O ) ;

Poprzez slowo kluczowe this mozemy odwolai siq zar6wno do wia6ciwosci obiektu,
jak i metody w nim utworzonej.

' I

ion
tli
 3.2. Clean code, czylr czysty kod

U2ywanie tak zdefiniowanych metod oraz SwiadomoS6 mo2liwoSci odwolania sig do

zmiennych w klasie otwieraj4 przed nami du2e mo2liwoSci tworzenia wlasnych apli-
kacji. JednakLe zanim do tego przeidziemy, warto zapoznae sig z kolejnymi dobrymi
zasadami tworzenia aplikac j i.

2. Clean code, czylt czysty kod

KaLdy programista ma swoj4 wlasn4 listg ulubionych zasad, kt6rych pilnuje i kt6re
wdrailaw 2ycie.

Gtownq zasadq dla wigkszo6ci jest zasada KISS (akronim od ang. Keep tt Simpte,
Sfupid nie komplikuj, giupcze), mowiqca o tym, w jaki sposob Iworzyc kod, tak zeby
-
nawet osoba postronna byla w stanie zrozumiec go w maksymalnie okreSlonym skonczo-
nym czasie, najlepiej na podstawie samego kodu, bez potrzeby czylaniadokumentacji
i zawartych w komentarzach opis6w, Utatwiajq to dobrze nazwane zmienne i metody,
jak rowniez utrzymywanie porzqdku w kodzie.
Uzupetnieniem KISS jest zasada DRY (akronim od ang Don't Repeat yourself nie
powtarzaj sig) mowiqca o tym, ze kod praktycznie nigdy nie powinien byc powielany -
Dlaczego? w sytuacji, gdy ten sam kod zostanie powielony dziesiqc razy w kilkunastu
plikach po czym okaze siq, 2ezawieraon blgdy, nalezy odnalezc i poprawic wszystkie te
miejsca, w ktorych wystqpil. Sprawia to, ze szybkosc z arzqdzania kodem (jego modyf ikacji
czy poprawiania) jest odwrotnie proporcjonalna do szybkosci z jakq zostalwytworzony.
Jak nalproSciej uzyskac zgodnosc z DRY? Nalwygodniej jest wydzielac logikg progra-
mu (zadania, jakie ma wykonywac) do odpowiednich funkcji, ktore de{iniu)emy raz,
ale mozemy ich uzywac w wielu miejscach. Warto tez dbac o to by nie byly one zbyt
dlugie. Przylmuje siq, ze ledna funkcja to tyle kodu, ile jestesmy w stanie zobaczyc na
polowie ekranu.
W tym miejscu nale2y wspomniec o YAGNI (akronim od ang, You Aren't Gonna Need
/t nie bqdziesz tego potrzebowal), Ta zasada nakazuje, by pisac tylko wymagane ptzez
-
klienta funkcjonalnoSci, co oznacza,2e nie naleiy tworzyc zbqdnego kodu.

Zanim upowszechnila siq filozofia KISS mozna byto spotkac tak nazywane zmienne
(listing 3 5):

Listing 3.5
Przyklad Zle dobranych nazw dla zmiennych
1 let_:3;
I r ^r

' .eL = a;
-
 Rozdziai 3. I Projektowanie aplikac.ii

4 let 6;

5
-=
5 function number ( ) {
7 if ( === _) {
I console.log("Por5wnanie liczb 3 i 4");
9l
I0 [ r ) r

11 console.log("Por6wnanie liczb 5 i 5");

t2 }

13 ]

14 numberO;
O ile porownanre liczb w linijce 7. lest jeszcze doSc proste do zrozumienia, o tyle linijka 10
jest juz bardzo maio czytelna, w gruncie rzeczy nie wiadomo, ktore liczby porownujemy,
trzeba siq skupii, by to poprawnie zinterpretowac, A sytuacja zracznie by siq pogor-
szyla, gdyby zmienne zostaly utworzone nieco dalej od miejsca, w ktorym ich uzywamy,

/l
l;7B.3.
T --r-
Dokumentowanie kodu
Jeden z najpopularniejszych sposob6w dokumentowania kodu w przypadku
jgzyka
JavaScript wi42e sig zurLyciem formatu JSDoc. NarzEdzia do pracy z nim s4 dostgpne
w WebStorm od raztt, wigc nie trzeba niczego instalowa6.

-,98
i

!l
C
 3.3. Dokumentowanie kodu

Przyklad3.4
Utworzono (z zachowaniem zasad czystego kodu, np. z dbalosci4 o odpowiednie na-
zwy) plik sum.js, kt6ry zawiera kod funkcji sumuj4cej dwa elementy. oto podstawowa
implementacja tej metody:
function sum(first, second)
JeSli w wy,wolaniu tej metody:
consol-e . 1og ( sum (2 , 3) )

postawimy kursor przy slowie sum i wci6niemy klawisz F1 (lub skr6t klawiszowy
Ctrl+Q), w tym przypadku odpowiedzialny za uzyskanie informacji z dokumentacji
tej metody, zobaczymy jedynie definicjg funkcji, bez jakiejkolwiek dodatkowej podpo-
wiedzi, jak pokazano na rysunku 3.1.

.. function sra(fi.st illnh*r , secoad :un;ar J ,ii

, .etdrn fi[S-t_ + second

:: e0nsole. lrq (srri( 2,3) )

aunctiLon su0(
firsti Numbea,
second; Nusben): Nu0tler
return sum of two numbea!

Rysunek 3.1. Widok podpowiedzi (w WebStorm) dla funkcji sum

Wiemy na tei podstawie jedynie tyle,2e istnieje metoda sum o parametrach first i sec-
ond. Nie uzyskali6my informacji o tlm, czy tametoda coS zwraca. Czy first i second
to liczby? WlaSciwie nie wiemy, co sig zdarzy, gdy wywolamy metodg.
Kliknijmy tym razelrr. w innym miejscu w1'wolania, po slowie 1og, i ponownie wcis-
nijmy F1 (lub skr6t klawiszov,ry Ctrl+Q). Efekt pokazano na rysunku 3.2.

I ;l:: sum is
-
r' consote.log(sum(2,3))

to*$.1*, 1rg (
message?: any.
., .opti.onalParams: any[]): void
The tersale nethod logO outputs a
message lo the web console.
By Mrziiit aoniribrtrfs ;,, lC ;Y-$A ?.5.,
llr; built-in, dom
:.Jr:(\,'.. .ij{::-
"\ {llro.,
cn Cerelcper.mrziili.at!,.

Rysunek 3.2. Widok podpowiedzi (w WebStorm) dla funkcji log

ee r)
----(r
 Rozdzial 3. I Projektowanie aplikacjt

To jest przykladowa, poprawnie napisana dokumentacia metody, zawierul4ca:

o opis metody,
o informacjq o typie zwracanej wartoSci (w tym przypadku iest to akurat metoda
void, czyli taka, kt6ra nic nie zwraca).
KorzystajEc z wiadomoSci dotycz4cych tag6w z tabeli 3.1, mozna utworzy6 dokumen-
tacjg naszej funkcii (listing 3.5):

Listing 3.6
Tworzenie dokumentacii funkcii sum
/^ ^

'' (,idescription rcturn sum of twrt numbers

'" (@;torttttr
{Nurnber} first
" @)parunt [Nunber] second
" (Qrctu.rns lNurnber]
,,/

po dodaniu tego kodu i wciSnigciu klawisza I1 (lub skr6tu klawiszowego Ctrl+Q)we-

wrqlrzrtywolania funkcii sum tym razemuzyskamy bardziei kompletn4 podpowiedZ
(rysunek 3.3):

Rysunek 3.3. ici.:tLi. (suot, , {).)

Widok podpowiedzi tuncti0n sun(

(w Webstorm) po first: llumber,
secoqd: Nurben): NJrber
dodaniu komentarzY
return sum ol two numbers
Mrorzqcych doku-
i* jslclean-code,/sum.is f
mentacjq

Dokumentacja kodu ma slu2ye innym programistom, by zto^tmieli, co autor mial na

mySli, tworz 4c dan1funkcjg czy klasg. Dobrze udokumentowany kod jest lepiej oceniany
(i rzeczywiscie ma wigks z1waftoll poniewa2 programista, kt6ry bqdzie w przyszlo6ci
nad nim pracowal, bgdzie m6gl szybko odnable interesuj4ce go mieisce), a ptzede
wszystkim usprawnia utrzymanie aplikacii ittL po jei wdro2eniu.
rL
\
- t--r 3.4. Algorytmy
v
SwiadomoS6 tego, 2e wydajnoS6 programu iest oparta na algorytmach, doceniamy do-
piero wtedy, gdy piszemy kt6r45 aplikacjE zrzgd.u. By pisa6 rzeczywiscie wydajny kod,
trzeba zna( chocia2 podstawowe algorytmy-
Podczas proiektowania proces6w moLna siE poslu2y6 iednym zbatdziei znanych spo-
sob6w rozwi4zywania problem6w. NastEpuie w nim kolejno:
1 . Sformulowanie zadania.
2. OkreSlenie wyniku.

,-*r-100
-
 3.4. AtgoMmy

3. Poszukiwanie metody rozwi4zania (czyli wlaSnie algorytmu).

4. Przedstawienie algorytmu za pomoc4 wybranego schematu.
5. Analiza poprawnoSci rozwi4zania.
6. Testowanie rozwi4zania.
W tym podrozdziale zostan4 opisane punkty 4. i 5.

3.4.1. Czym jest algorytm?

wyjasnijmy sobie najpierw, co decyduje o wyborue takiego, a nie innego rozwi4zania.
Na wyb6r metody sortowania decyduj4cy wptyw na og6l ma czas sortowania (im
kr6tszS tym lepiej), a niekiedy liczba utworzonych zmiennych (tdk2e ich powinno by6
mo2liwie malo).
Architekci oprogramowania, wybieraj4c takie czy inne ApI (interfejs, za pomoc4 kt6-
rego aplikacje mog4 ze sob4rczmawiat), deryduj4 sig na rozwi4zanie, kt6re najlepiej
spetnia oczekiwania klienta.

czym jest algorytrn w pracy programisty? Jest to sposob postqpowania pozwalajqcy

na jednoznaczne i 1ak najprostsze rozwiqzanie problemu.

Byl czas, ze na rozmowach kwalifikacyjnych pojawiaio sig zadanie,

,,Proszq o zaprojektowanie procesu majqcego na celu uzyskanie mleka z lodowki".
wzglgdu na podstawie tego wlasnie procesu w kolejnych podrozdzialach zostanq
Z tego
omowione r odzale projektowania.
wrocmy na chwilg do przedstawionej na poczqtku tego podrozdziaiu listy. Mamy juz
wyra2nie nakreslone zadanie do wykonania. wiemy, jaki jest oczekiwany wynik, czas
skupic siq na poszukiwaniu metody rozwiEzania- czyli algorytmu.

3.4.2. Projektowanie algorytmu

Jak zaprojektowa6 algorytm do czegoS, co jest codziennEczynnoSci4? Najlepiej zacz4C
od wymienienia czynnoSci, kt6re s4 wykonywane, a nastgpnie zapisae je w postaci
listy kolejnych krok6w.

101
r*,
 3.4.2.1. Zasada ,dziel i zwyciq2aj"
NajczEsciej wykorzystywan4 metod4 projektowania algorytm6w iest zasada ,dziel
i zwycigLai". Zgodnie z iej nazw4 pierwsz4 rzecz4, iak4 trzeba zrobie, iest podzielenie
problemu na mniejsze, por6wnywalne pod wzglgdem skomplikowania, czE6ci
za ich pomoc4 zostanie najpierw przedstawione rczwi4zanie. Dopiero na koticowym
- to
etapie nastqpuje scalenie tych matych krok6w w jeden, gotowy algorytm.
Dlaczego ta zasada jest najbardziej popularna? Dlatego 2e algorytmy zbudowane z iei
uzyciem czgsto ma j 4 na j mn ieisz4 zlo2oroS6 obliczeniow4.
Zasada ta zostanie wykorzystana w sortowaniu i wyszukiwaniu element6w.

3.4.2.2. Lista krokow

Ten rodzaj opisu proces:u ma za zadanie przedstawienie sekwencji krok6w. Stosowany
jest gl6wnie podczas opisu sytuacji og6lnych i zwykle nie opisuje rr.Znych wariant6w.

W tym przypadkts.nie ma dobrej odpowiedzi na pytanie o to, kiedy lista iest komplet-
na. Dlaczego? Dlatego 2e niemal zawsze, kiedy ktoS inny spojrzy na tg listg, podpowie
krok, kt6ry pomingliSmy.

Przyklad 3.5
Oto przykladowa lista krok6w procesu maj4cego na celu wyci4gniEcie mleka z lod6wki:
1, Rozpocznij proces.
2. Zlokalizttj 1od6wk9.
3. Otw6rz lod6wkE.
4. Wyci4gnij mleko.
5. Zamknii lod6wkE.
6. Postaw mleko na stole.
7. Zakohczproces.
3.4.2.3. Pseudokod
Rozwi4zanie problemu znalezieniamleka (atakLe dowolnego problemu programistycz-
nego) mozna r6wnie2 przedstawi6 zapomoc1konstrukcii poSredniej pomiqdzy jgzykiem
naturalnym a kodem komputerowym. Tak opisan4 strukturg nazryamy pseudokodem.

Przyklad.3.6
Oto przyklad pseudokodu ilustruj4cego rozwi4zanie problemu wyjmowania mleka
z lod6wki.
l-raa i n

znaldzLodowke ()

otworzLodowke ()

-r
r-l 1 02
 3.4. Algorytmy

wyclagnijMleko ( )

zamknij Lodowke ( )

postawMleko ( )

end

Jakwida6, stosuj4c pseudokod, zamieniamy opisywane slownie kroki na rraz.vqy metod;

jeSli s4 potrzebne parametry, na jakich maj4 dziala6 metody, powinniSmy je doda6.

3.4.2.4. Drzewo decyzyjne

NajczqSciej wybieranym graficznym elementem procesu decyzyjnego, stosowanym
ptzy tzw. uczeniu maszynowym oraz w obliczaniu prawdopodobieristwa, jest drzewo
decyzyjne. Jest to odwzorowanie wszystkich krok6w decyzji za pomoc4 schematu
przypominaj4cego drzewo, patrz4c od korzenia (przy czym korzeri wystEpuje w tym
przypadku u g6ry schematu). Kailda gal42 to droga do decyzji,kt6ra, obrazuie liS6.

Przyklad,3.7
Proces zrtalezienia mleka moLnar6wnieL przedstawi6 zapomoc1drzewa deryzyjnego
(rysunek 3.4).

Jak jfi
wspomniano, drzewko jest odwrotnoSci4rzeczywistego drzewa, czyli na samej
g6rze jest korzen, od kt6rego przechodzimy wzdluL galEziprzez kolejne decyzje.

Rysunek 3.4. Drzewo decyzyjne

103r)
Foz.lzial3 r Prolektowane ap kacli

3.4.2.5. Schemat blokowy

Taka list9 czynnoSci dobrze jest teraz zaprezentowac za pomocE schematu blokowego.

DEFII{ICJA
Schemat blokowy to graficzne pzedstawien e sekwencji czynnosc , zazwyczaiuwzg qd-
n ajqce war anty, ktorych wykonanie jest uzalezn one od speln en a ro2norakch warunk6w

Pzyklad 3.8
Oto sekwencja czynnosci koniecznychdo wyci4gni€cia mleka z lod6wki zaprezentowana
za pomocE schematu blokowego (rysunek 3.5).

Rysunek 3.5. Przykiadowy schemat blokowy

104
 3.4. Algorytmy

Na rysunku 3.5 posluzono siQ symbolami ktorych znaczenie wyla6niono w tabeli 3.2
Tabela 3.2. Znaczenie symboli uzytych w schemacie blokowym
Symbol Znaczenie

Blok startu i zakoirczenia algorytmu

t---__-l

O Blok decyzyjny (czyli pytanie, na kt6re odpowiedzi4 jest tak/nie)

Blok operacyjny, okre6laj4cy dzialanie do podjgcia

r-
(np. wySwietlenie informacji)

Blok wejScia
- miejsce, w kt6rym u2ytkownik musi poda6
jak45 informacjg

-------------> Wskazanie kolejnego elementu w sekwencji

Jak wida6, schemat blokowy r62ni siE od listy krok6w, gdyZ jest od niego znacznie czy-
telniejszy dla klienta, kt6ry mo2e mie6 problemy zezrozumietiem algorytmu zapisanego
za pomoc4listy krok6w Dodatkouym plusem takiego zapisu jest to, Le w lary spos6b
moLna zobaczyC caly przeptytv algorytmu i dzigki temu uylapa6 potencjalne blgdy
W projekcie w rczdziale 7. vtykorzystamy schemat blokowy do opisania algorytmu.

3.4.2.6. Zo2ono$c obliczeniowa

Opracowalilmy jfi pierwszy prosty algorytm. Wr66my na chwilE do rozwaLafi na ich
temat.

Jakifiwspomniano, najlepiej, gdy algorytmy s4 rozpisane na drobne kroki to mocno

przy spiesza proces implementacji.
-
Poza tym trzeba oszacowa6 ich zto2onoi6 obliczeniowq. DziEki temu mo2na wykazal
ze np. na niekt6rych smartfonach dany algorytm zadziala szybciej niz na innych, bo
ich procesory maj4 wigksz4moc obliczeniowq, co pozwala im poradzi6 sobie z wiEksz4
liczb4 operacji w tym samym czasie.
Czym jednak jest zlo2onoS6 obliczeniowa?

,oq]i-)
 Rozdzial 3. I Projektowanie aplikacji

Zlo2onoi;c obliczeniowa to wspolny mianownik (czgsc wspolna) dla algorytmow, utwo-

zony w celu definiowania ich wydajno6ci
W trakcie badania ziozono6ci tak naprawdq obliczana jest suma wykonywanych operacji:
f(n) - operacja_1 + operacja 2 + ... + operacja n.

Przyklad 3.9
W celu rozjaSnienia tematu odwolajmy sig do kolejnego przykladt. Wykorzystuj4c
wiedzE z poprzedniego rczdzialu, napiszmy kod zliczai4cy sumg element6w w tablicy.
Nastgpnie spr6bujemy poLiczy{ ile operacji jest wykonywanych podczas liczenia sumy
(listing 3.7).

Listing 3.7
Kod zliczaj4cy sumg element6w tablicy
1 function sumElements (arr) {
2 1et sum : 0;
3 for (1et i:0;1 ( arr.length;1 += 1) {

4 sum +: arrli];
5 )

6 return sum;
'1 \

Znasz juL (zrozdzialt 2.) spos6b tworzenia funkcji, wigc ten kod powinien by6 znajomy.
Niemniej przeanalizttjmy jego kolejne wiersze. Ich zestawienie zawarto w tabeli 3.3.
Dla ka2dej linii podano tak2e liczbq wykony.wanych operacji.
Tabela 3.3. Analiza wierszy kodu funkcji sum

Deklaracja funkcji s umE I emen t s, kt6ra w parameftze przyj- 0

muje tablicg liczb.

Deklaracja zmiennei sum i przypisanie do niej wartoSci pocz4t- 1

kowej pierwsza operacja.
-
Inicjalizacla pqtli, kt6ra przechodzi po elementach tablicy. 0

Dodanie do zmiennej sum warto6ci z tablicy pod indeksem n

i - ta operacia jest urykonl,wana tyle razy, ile jest element6w
w tablicy. Przyiglo sig zapisywa6 nieustalon4 liczbg eiement6w
jako n, dlatego ta instrukcja wykona sig n nzy.

Zwracamy sumg. 1

*ou
 3.4. Algorytmy

A zatem ztoLonole to f(n) = 1 + n + 1 = n + 2.

Najczg6ciej obliczanie zlo2onoSci obliczeniowej wykonuje sig, gdy klient wymaga, by
aplikacja byla mo2liwie jak najbardziej v'rydajna. Wtedy kaildy element i ka2dy krok
mai4znaczenie.

3.4.3. Rekurencja
W celu zrozumieniaistoty algorytm6w najpierw trzeba zrozumieC,czym jest rekurencja.
Od czasu do czasu spotykamy sig ze sformulowaniami typu: ,,Bgdg gral w tg grg tak
dtugo, aL zdobgdg wszystkie trofea". M6wi4cy to ma na mySli, Lebgdzie wykonywal
caly czas tg sam4 czynno66, a2 do spelnienia pewnego warunku.

Rekurencja bezpoSrednia to wywoianie metody w niej samej.

Rekurencja posrednia to wystqpuyqce w iancuchu funkcji wywolywanie f unkcli zaleznych
od siebie (A wywoluje B B wywoluje A itd )

Rekurencja po3rednia jest uykorzystywana w6wczas, gdy zaleLnoS6 pomigdzy dwoma

czynnoSciami jest stala.

Przyklad 3.10
Codziennie wstajesz rano do szkoty. Nastawiasz budzik, kt6rego oprogramowanie za-
wiera funkcjg drzemki. Kiedy drzemka zostaje w,.wolana izakoficzona, wl,woluje alarm
budzenia na kolejny dziefi rzecz jasna, tak2e moZe w),wota6 funkcjg drzemki.
-kt6ry,
Przyklad 3.11
Niekt6re wie2e audio maj4 w sobie zmieniarkg ptyt CD. Mozna w nich zmieni6losowo
plytg i po odtworzeniu z niej losowej piosenki nastgpuje kolejne losowe wybranie ptyty.
Odtwarzanie zostanie zakoficzone, gdy skofrcz4 sig wszystkie piosenki na wszystkich
ptytach.
Rekurencja poSrednia najczgSciej znajd$e zastosowanie w matematyce. W dalszej czE6ci
tego podrozdzialu skupimy sig na rekurencji bezpoSredniej.

Ptzyklad3.l2
Spr6bujemy wyjaSnid rekurencjg bezpoSredniqta dobrze znaflym przykladzie Wzfia-
czania najwigkszego wsp6lnego dzielnika (NWD).

Przypomnijmy, 2e NWD(4, 12) = 4 (najwiEkszy wsp6lny dzielnik liczb 4 i 1.2 to 4),

a NWD(16, 24) = g (najwigkszy wsp6lny dzielnik liczb 1,6 i 24 to 8).
Warto tutaj siggnE6 do algorytmu Euklidesa. Na jego podstawie mozemy zbudowa6
schemat pokazany na rysunku 3.6:

107i-
' i i-'
 Rozdzial 3. I Projektowanie aplikacji

I
I
I
I

I
I
I
I
I
I
I
I
I
I
I

Rysunek 3,6. Schemat blokowy algoMmu Euklidesa dotyczqcego NWD

Jak mo2na zauwaLye, funkcja sprawdza, czy drugi parametr osi4gn4l wartos6 r6wn4
zeru,i jeLeli jej nie osi4gn4l, to oblicza resztgz dzielenia parametr6w i wywoluje sam4
siebie z drugim parametrem i obliczon4 wcze6niej reszt4z dzielenia tak dlugo, aL ob-
liczenia sprowadz4 drugi parametr do zera. Tak wla6nie implementuje sig rekurencjg.

3.4.4. lmplementacje algorytmow sortujqcych

wspomnimy tutaj o dw6ch najczEsciej u2l,wanych algorytmach sortuj4cych. chociaL
w praktyce potrzeba ich samodzielnego pisania wystgpuje bardzo rzadko, to mimo
wszystko znajomofl(tychalgorytm6w jestwymagana, gdyLczgsto s4onezaimplemen-
towane w bibliotekach.

Ci]0B
L)
3.4.4.1. Sortowanie metodq bqbelkowq
Kolejny schemat blokowy, kt6ry zostanie tu zaprezentowany, przedstawia sortowanie
metod4 b4belkow4.

Metoda bqbelkowa to metoda sortowania, ktora iteracyjnie porownuje dwa elementy

i je przestawia o ile pierwszy jest wiqkszy od drugiego

Oto schemat blokowy ilustruj4cy kolejne kroki wykonywane podczas sortowania b4-
belkowego (rysunek 3.7):

Rysunek 3.7.
Przyktadowy schemat
blokowy sortowania
bqbelkowego

tljl>tlj+11

tl
l
swap(tljl, tlj + 1l)
1oe
 Sozdzial 3. I Projektowanie aplikacji

Przyklad 3.13
Wykonajmy na jego podstawie analizg sortowania zadeklarowanei poniZej tablicy
array.
1et array : 12, -5, 3, 1l
Przebieg sortowania przedstawiono w tabeli 3.4. Na ka2dym etapie wyr62nieniem wpi-
sywane s4 te elementy tablicy wyj6ciowej, kt6re zostaty wla6nie przestawione.

Thbela 3.4. Sortowanie tablicy aray za pomocq algoffmu bqbelkowego

Pierwsza iteracja

z-531 2 *5 Prawda -5231

-5231 2 ) Falsz -5237
-5231 3 1 Prawda -5213
Druga iteracja

-5213 -5 2 Faisz -52t3

-5213 2 1. Prawda -5 123
-5123 2 3 Fatsz -5123
Rozwi4zanie to jest mniej uydajne od sortowania quicksort, ale o wiele prostsze w sa-
modzielnej implementacji.

W przypadku sortowania kolekcji zdefiniowanych w wybranym jgzyku programowania

moznazgorywykorzystac metody juz opisane izaimplementowane przez spoieczno6c.
Dla tablicy:
1et numbers - [3, 5, L2,3.3]
w przypadku zastosowania metody numbers . sort 1; uzyskamy tablicg posortowanq
w kolejnosci od najmniejszej do najwigkszej wartoSci
GdybySmy chcieli uzyskac ulozenie elementow w odwrotnej kolejnoSci, nalezaloby jesz-
cze uzyc funkcji reverse ( ) , ktora odwraca porzqdek sortowanych elementow po
jej zastosowaniu nastqpi zalem zamiana elementow: pierwszego z ostatnim itd, -
Trzeba wigc najpierw posortowac tablicg, a nastgpnie odwroci6 kolejnoSi elementow.
fl r^te'- .Sor- (/;
numbers. reverse O ;

,.:#0
 3.4. Algorytmy

Gdyby6my w kolekcji umieScili napisy, sortowanie byloby realizowane w porzqdku al-

fabetycznym
W przypadku jgzyka C+ + sortowanie jest dostgpne po zaimportowaniu biblioteki <a1-
gorithm>. Metoda sort (1 przyjmuje parametry pozwalajqce wskazac pierwszy
i ostatni element tablicy, alakze lo, czy chcemy sortowac rosnEco, czy malejqco:
lnt tabt6l = {43, L,1,2L,3, L2};
int n : sizeof (tab) / sizeof (tab [0] );

sort(tab, tab + n, grealer <int>O);

Metoda s i z eo f (tab ) zwraca wielko6c tablicy, a do uzyskania pierwszego elementu
wykorzystamy wska2nik na tablicq nazwa wskaze na pierwszy element, a tab + n
-
na ostatni. Ostatni parametr to informacja, czy tablica ma byc posortowana malejqco,
jesli tak to parametr jest wymagany, w przeciwnym wypadku nie lest.

3.4.4.2. Szybkie sortowanie (quicksort)

Quicksort (rysunek 3.8) jest obecnie najczg6ciej uLywanymalgorytmem do sortowania
element6w. Jego gl6wn4 zalet4 jest niski stopieri zlolonoSci obliczeniowej.

Quicksort to algorytm oparry na strategii ,dziel i zwycigLai".

Dziel w celu podzielenia tabliry musimy wybra6 element rczdzielaj4cy (pivot). WzglE-
-
dem tego elementu przeniesiemy wszystkie dane znajdul4ce sig w tablicy, tak aby
elementy, kt6re s4 od niego mniejsze lub mu r6wne, znalazly siq po jego lewej stronie,
a wszystkie pozostale wartoSci przeniesiemy na prawo od niego. Procedurg terrazryamy
partycionowaniem. Niewa2ny jest porz4dek element6w, zaleLy nam jedynie naichpozy-
cji wzglgdem elementu rozdzielaj4cego. Z reguly wybiera sig element poloLony skrajnie
w prawo, ale s1teL inne podejScia wyb6r losowy b4d2 strategia ,,Srodkowy ztrzech".
-
Zv'rycigLaj rekurencyj nie (bezpo6rednio ) sortu j emy powstale podtablice.
-
juL
Scal
- nie musimy nic robi6. Wszystkie elementy na lewo od pivotu s4 od niego
mniejsze lub mu r6wne i zostaly posortowane, tak samo jak warto6ci po jego prawej
one z kolei s4 od niego wigksze. -
Ptzyklad3.l4
Posortujmy tablicE o zawartoSci14,7,5, 10, 8, 3, 6]. Na pivot wybieramy wartoS6 6, po
partycjonowaniu tablica przyjmuje strukturE f4, 7, 5, 3, 6, L0,8], a dokladniej mamy
dwie podtablice: [4, 7,5,3,6] oraz [10, 8]. Dla pierwszej podtablicy wybieramy pivot 6
i partycjonujemy: [4, 5, 3, 5], kt6re musimy ju2 posortowaC, oraz [7]. Druga podtablica
podzieli sig na [8] i [10]. Scalamy wszystko i mamy posortowany pierwotny zbi6r 13,4,
5r 6171 8, 10].

111
a'i
{':
l-J
 Rozdzial 3. I ProjerLouranie aplikacji

pivot = partition(t, left, right)

quicksort(t, left, pivot 'l)

-

quicksort(t, pivot + 1, riqht)

Rysunek 3.8. Przykladowy schemat blokowy sortowania quicksort

(-)112
-
v;.:;
 3.4. Algorytmy

3.4.5. Wyszukiwanie bi narne

Jestto rodzaj algorytmu, kt6ry stosowany jest na co dziefl, chocia2 zazwyczal nie wiemy,
Le tak sig nazywa. Przykladem jest chocia2by przeszukiwanie telefonu kom6rkowego
w celu odnalezienia danej aplikacji. W bardzo prosty spos6b przeprowadzane jest
sprawdzanie (w porz4dku alfabetycznym), czy na danej stronie pulpitu zmieScil sig
skr6t do wyszukiwaneiprzeznas aplikacji. Kolejny razwykoruystuje sig tu zasadg,,dziel
izvrycigLaj". W tym przypadku polega to na podzieleniu pulpitu telefonu na strony i na
kaildej z nich jest sprawdz ane, czy skr6t do aplikacji mo2e na niej by6; suma odpowie-
dzi da zwrotn4informacjE o tym, na kt6rej stronie mozebyf wyszukiwana aplikacja.
Na podstawie vtyLej wspomnianego przykladu moZna wnioskowaC, ze zaloileniem
pocz4tkouym jest to, Le dana kolekcja do przeszukania iest posortowana.
Przeanalizowanie schematu blokowego r,lyszukiwania binarnego (rysunek 3.9) podpo-
wiada, 2e mamy mo2liwo66 implementowania rczwi4zania przez rekurencj g.

t[]
left = 0
right=t.length- l

binarysearch(t, left, right, v)

mid - left + (right- left) /2

binarySearch(t, mid + 1, right, v)

binarysearch(t, left, mid - 1, v)

Rysunek 3.9. Wyszukiwanie binarne schemat blokowy

- 1 13 [-)
(\
 Rozdzial 3.

Schemat blokowy odzwierciedla wyszukiwanie binarne, kt6re polega na dzieleniu listy

nap6l do momentu, w kt6rym ograniczy siE i4 do jednej pozycji.wyznaczone zostary
nastgpuj4ce kroki:
1. okreslenie min i max, na pocz4tku oznaczaiqqch caty zakres zbioru.
2. Obliczenie Sredniej z min i max) z zaokr4gleniem w d6l do liczby calkowitej jako
indeksu Srodkowego elementu:
a) jesli element Srodkowy jest poszukiwana wartosci4, moiemy zakofrczye pro-
gram, poniewa? znaleiliSmy indeks szukanego elementu;
b) jezeli element Srodkor,vy jest mniejszy od szukanej wartosci, zmieniamy min
na wartoS6 o jeden wigksz4 od Sredniej;
c) je2eli element Srodkowy jest wigkszy od szukanej warto6ci, do zmiennej max
przypisujemy liczbg o jeden mniejsz4 od Sredniej;
d) wracamy do kroku b.

Przyklad 3.15
Rozwalmy nastgpuj4ry przyklad. chcemy znalelc nasz ulubiony utw6r zespotu Me-
tallica. Mamy w swoich zasobach 107 piosenek zespolu, alebez podzialu na albumy.
Mamy po prostu listq utwor6w posortowan4 alfabetycznie. Zal62m% 2e interesuie nas
ostatni utw6r. Przeszukui4c nasz zbi6r piosenek element po elemencie, czyli stosui4c
wyszukiwanie liniowe, musimy sprawdzi6 kazdy element naszej dyskografii. Bylobyto
doS6 klopotliwe i czasochlonne. Tymczasem wyszukiwanie binarne spiawdzi zaledwie
7 utwor6w przed zwr6ceniem wla6ciwego wyniku.
Jak?
Powiedzmy, 2e chcemy znalei,eutw6r 86. obliczamy 6redni4 wedlug wskazanego wzofir
(left + (right-left) ) /2zdanymi t-eft:O, right:107. Otrzymujemywynik
53 (po zaokr4gleniu w d6l). Nasz utw6r znajduje siE dalej; odrzucamy wszystko po-
ni2ej Sredniej i szukamy Sredniej z nowego przedziaht 54-107. wynosi ona 80. Nasz
utw6r ponownie znajduje siE powy2ej tej wartosci, rozwaLamy wigc kolejny przedzial:
81-107. Nowa Srednia to 94; tym tazem nasz utw6r znaidr\e siq wczeSniel. rot"lrry
nowy przedzial to 81-93. Srednia.z tego przedzialu wynosi g7, jestesmy wigc ju2 6l!
sko. obecny przedzial to B1-86. Srednia to 83. powstaje nastgpny przedzial, a+-se .
Ostatnia Srednia to 85, koricowy przedzial jest jednoelementowy.
Oznacza to,2e znalelliSmy utw6r.
W tym celu sprawdziliSmy 7 pozycji.

Przewagg wyszukiwania binarnego nad innymi algorytmami wyszukiwania widac dobrze

na duzym zbiorze danych.

(')114
Nr--
 3.4. Algory,tmy

3. 4. 6. Wyszu kiwan ie w zaawan sowanyc h stru ktu rac h

W jqzykach programowania mamy dodatkowe struktury, na kt6rych moLna optzet
bardziej zloilone algorytmy. Jedn4ztychstruktur jest kolejka. Elementy kolejki s4 pobie-
rane i obstugiwane w takiej samej kolejno6ci, w jakiej byty do niei dodawane. Wyrala
to akronim FIFO (ang. First In, First Out pierwszy na wej6ciu, pierwszy na wyj6ciu).
-
Przyl<lad,3.16
Najlepsz4 ilustracj4 dla tej struktury jest wlaSnie kolejka do kasy w sklepie. Osoba, kt6ra
sig w niej ustawi najwczeSniej, zostanie obslu2ona jako pierwsza i pierwsza v'ryidzie ze
sklepu. Ostatni klient w kolejce zaplacina samym koricu i opu6ci sklep po wszystkich,
kt6rzy stali w kolejce przed nim.
Specyficzn4 odmian4 kolejki jest kolejka priorytetowa (ang. Priority Queue). Elementy
tej struktury posiadaj4 swoje priorytety i s4 obslugiwane zgodnie z nimi. Dane o nai-
wy Zszympriorytecie zostan1pobrane j ako pierwsze, elementy o niilszych priorytetach
zostat4 obsluzone dopiero, gdy wszystkie warto6ci z vtyLszymi priorytetami zostan4
usunigte z kolejki.
Kolejn4 struktur4 jest stos, kt6ry oparty jest na zasadzie LIFO (ang. Last In, First Out)
pierwszy element, kt6ry dodamy do stosu, zostanie obsfu2ony na samym koflcu, a ostatni
-
zostanie obslu2ony jako pierwszy. Oznaczato,Le-inaczejnizw przypadku kolejek
dane umieszczofie La stosie odczytuiemy w kolejnoSci odwrotnei do ich zapisu.
-

Przyl<lad 3."1.7

Wyobraimy sobie, 2e sprz4tamy po przyjgciu.Zbieramy ze stolu brudne rraczynia,bie-

rzemy do rqki pierwszy talerz, na nim kladziemy kolejny i taki stos talerzy niesiemy do
kuchni. Nie mamy zmywarki, wigc musimy umy6 wszystko sami. Bierzemy talerz z sa-
mej g6ry, myjemy go i odkladamy, po czymbierzemy kolejne, przechodzqc stopniowo
w d6t stosu, a2 wreszcie dotrzemy do talerua znaidni4cego sig naini2ei tego, kt6ry
-
zdjgliSmy ze stolu jako pierwszy. Tak wtaSnie dziala obieg LIFO. Ostatni talerz,kt6ry
zabralismy ze stolu, dolo2yliSmy do stosu brudnych naczyitna samei g6rze,w zwiqzku
zczymzdejmujemy go i myjemy w pierwszej kolejno3ci. Pierwszy, od kt6rego zaczglilmy
stos, znajduje sig na samym dole i umyiemy go jako ostatni.

Najlatwiej zrozlmie1r6LnicEmigdzy tymi dwoma strukturami na podstawie schemat6w

(rysunki 3.10 i 3.11).

EffizapisEffi Odczyt

Kolejka

Rysunek 3.1O. Odwzorowanie kolejnosci dzialan grzy zapisie i odczycie danych -

kolejka
i
I

115 (-l
a
 Rozdziat 3. I Projektowanie aplikacji

"":" 'lEl.""':::
,.:,rr:.6it*aL:.: ll-ll:ui,t'.ffil,riri:t,lll
I

-====
E
ffiffiffi
r = :
,,r,r,r istas -: i :r"S6i l "lir'l'rr rii -
'l r' :i5t95il'ii'r"ri
-
'
Rysunek 3.11. Odwzorowanie kolejnoSci dziatan przy zapisie
i odczycie danych stos
-
Przyklad 3.18
StrukturE stosu om6wimy na podstawie notacji zwanej ONp,
czyli odwrotna notacia polska (ang. RPN polish no-
- reuersearytmetycz-
tation). Jest to jeden ze sposob6w zapisuwyraLefi
nych. Charakteryzuje sig brakiem konieczno6ci stosowania
nawias6w. W klasycznym zapisie operatory stawiamy pomigdzy
argumentami, np.2 . Z. Dlabardziej zloilonych obliczei, np.
2 + 2 . 2, je2eli chcemy okreSli6 irrn4ni2 domySlna (wynikaj4ca
z priorytetu operator6w) kolejnoS6 wykony,wania dzialafi, mu-
simy u2y6 nawias6w, np. (2 + 2) . 2.W przypadku stosowania
ONP nie mamy tego problemu, gdyL operator zapisujemy po
argumentach, na kt6rych zostanie ,uyty, np.2 2 .,2 2 2 . +,
2 2 . 2 +. Do utworzenia algorytmu wykonuj4cego obliczenia
zapomoc4oNP zastosujemy stos. WyraZenie czytamy od lewej
do prawej; je2eli pobran4 wartoSci4 jest liczba, l4duje na stosie.
W przypadku natrafienia na operator pobieramy ze stosu dwie
liczby,wykonujemy obliczenie zgodnie z operatorem, a wynik
odkladamy na stos. W momencie, w kt6rym obsluZymy wszyst-
kie dane wejsciowe, ostateczny wynik bgdzie sig znajdowa6 na
szczycie stosu.

Algorytm ten mo2na zilustrowa6 nastgpuj4cym schematem

blokowym (rysunek 3.12):

Rysunek 3.1 2.
Przyktadowy schemat
)
blokowy algorytmu ONP
()116
---a ---
 3.4. AlgoMmy

lmplementacje stosu i kolejki zale2qod jqzyka programowania. W jgzyku JavaScript do

implementacji obu tych struktur mozemy wykorzystac listg W C+ + mozna natomiast
skorzystac z udostgpnianych w bibliotece standardowej kolekcji wektora (vector) lub
kolejki (queue), jak rowniez kolejki priorytetowej (prrorrty queue).

Przyklad3.l9
Zobaczmy, jak wygl4da wyszukiwanie elementu w kolejce na przykladzie dodawania
nowego elementu do kolejki priorytetowej. Najpierw ttw6rzmy schemat blokowy
takiego dzialania (rysunek 3.13).

Odszukaj pierwszy
element z mniejszym
priorytetem

Dodaj dane
z przodu kolejki

Rysunek 3.1 3. Schemat blokowy dodawania elementu do kolejki priorytetowej

Teraz zaimplementujemy rozwi4zanie (listing 3.8).

Listing 3.8
Implementacj a kolejki priorytetowej
class Element {
constructor (value, priorrty) |

this.value : value;
this.priority : priorrty,'
]

117 i-)
----ar
 Rozdzial 3. I Projektowanie aplikacji

class PriorityQueue {

constructor ( ) {
l:hrs. elements : l] ;

pushonQueue(element) {

let contain = false;

for (let i in this.elements) {
if (this.eLements lil .priorrty > eLement.priorrty) {

this . elements . splice ( l, 0, element) ;

contain : true;
break;

if (lcontarn) {

this. elemenr-s.push (element) ;

dispray ( ) {

for (let i in this.elements) i.

console. Iog (this. elements irl .va1ue) ;

i

let prrorityQueue = new PriorityQueue O ;

priorityQueue.pushonQueue (new Element ("Janek", 3) );

priorityQueue . pushOnQueue (new Element ( "Ma; a" , 1) ) ;
priority'Queue.pushonQueue (new Element ("Kasra", 3) );
priorityQueue.pushOnQueue(new Element ("Ola", 1) ) ;
priorityQueue.pushonQueue (new Element ("Marcrn" , 2) S ;

priorityQueue.display ( );

Zaimplementowali6my koleikg priorytetow4popruez inicjalizacjg klasy Element z wlaS-

ciwo6ciami value (warto66) oraz priority (priorytet). Nastgpnie zaimplementowa-
liSmy metodq pushonQueue, kt6ra slu2y do dodawania element6w do stworzonej
struktury kolejki w postaci listy z obiektami typu Element. Kolejnym krokiem jest ju2
implementa cia rczw i4zania na podstawie schematu blokowego.

()1
---{t-1B
 3.4. Algorytmy

Rozwiqzanie tego problemu jest o wiele prostsze w jgzyku C + + , jednak jego prezentacja
wykracza poza ramy tego podrgcznika.

Jak wida6, samo dodanie elementu oparte jest na przeszukaniu tablicy w celu odnale-
zienia element6w o tym samym priorytecie. Dopiero po ich odnalezieniu mozna doda6
element. Priorytet 1 jest najwyLszy,natomiast 3 jest najnilszy.

3.4.7. Algorytm szyfrujqcy ROT-13

Od czasu do czasu zachodzi potrzeba zaszyfrowania wiadomo ici. Z szyfrowaniem spo-
tykamy siE chociazby w przypadku podpisu elektronicznego, potrzebnego np. podczas
logowania sig do systemu bankowego. Jednym z podstawowych algorytm6w szyfruj4rych
jest ROT-13 (rysunek 3.14).

Zasada jego dzialania opiera sig na zamianie ka2dego kolejnego znaku na symbol
wystgpuj4cy 13 pozycji po nim. Dla klasycznego alfabetu lacifrskiego (26 znak6w)
jest on funkcj4 odwrotn4, co oznacza,2e jestw stanie nie tylko zaszyfrowae,aleteL
odszyfrowa6 wiadomoS6.

decryptedMessage =
'13
messageIi]

Rysunek 3.14. Schematdzialania algoMmu szyfrujqcego ROT-13 dla malych znak6w

11er)
-'r.t""-
Rozdziat 3. I Projektowanie aplikacji

w centralnym punkcie algorytmu z rysunku 3..14 sformulowalismy warunek, w zwiqzku

zklorym messagie Ir ] ma by6 wiqksze ni 110, co w ASCII odpowiada znakowi 'n ,
w kodzie szesnastkowym (message Ir] )'n' ). Jest to spowodowane tym, ze
litera n jest w polowie klasycznego 26-znakowego alfabetu lacihskiego

Na podstawie zaprezentowanego wyzej schematu blokowego moglibySmy utworzyd

funkcjg (listing 3.9):

Listing j.9
Funkcja szyfrui4ca
1 function rot13 (rnessage) {
2 leL decryptedMessage = r"r'
3 for(let i : 0; i < message.length; i +: 1) {

4 Let code : message. charCodeAt (r) ;

5 // zawrricettie otl litery n na poczqtek alfabetu
6 if (code >= 110) {

7 decryptedMessage += String. fromCharCode (code - 13);

8 )else{
9 decryptedl4essage +- String. fromCharCode (code
10 I

11 )

72 re.urn decryptedMessage,.
13 ]

L4

15 le1- message : "helfo";

15 console.log(rot13 (message) );

wszystkie znaki wpisywane za pomocq klawiatury (lub innego urzEdzenia wej6ciowego)

majE swoje odwzorowanie w liczbach. To odwzorowanie nazywamy kodem ASCll. Ponizej
podano kody dla maiej i wielkiej litery a atakze dta malej titery n:
a-97
A-65
n-110

120
 3.5. Projektowanie klas (UML)

W przykiadowej implementacji algorytmu ROT-13 w wierszu 6. utworzono warunek

lf (code >: 110 ) , gdyL trzeba zmapowa(. mal4 literg zr na kod ASCII. Nastgpnie,
skoro wiemS 2e n jest w alfabecie 13. w kolejnoSci, to w celu powrotu na pocz4tek
alfabetu moLna odj4e 13 od kodu 110. Aby przefie na koniec alfabetu, molna doda6
L2 do 1.1.0.

3.4.8. Algorytmy heurystyczne

Temat algorytm6w jest bardzo szeroki i doS6 skomplikowany. Nale2y pamigtat, ze
czasami rozwi4zanie problemu wi42e sig ze zbyt du24, wigksz4 niz akceptowalna zlo2o-
no6ci4 obliczeniow4. Niekiedy wrgcz jego znalezienie wydaje sig niemozliwe. W6wczas
z pomoc4 przychodz4 algorytmy heurystyczne. Tego rodzajt algorytmy z reguty nie
daj4 gwarancji znalezienia optymalnego rozwi4zania, umoZliwiaj4 jednak odkrycie go
w og6le w sytuacjach, kiedy bez ich zastosowania byloby to niemo2liwe.

Pruyklad,3.2O
Podstawowe rozwi4zanie problemu komiwoja2era pochodzi z gnTpy algorytm6w heu-
rystycznych.
Na czym polega problem komiwoja2era?
WyobraZmy sobie sprzedawc1podr6iuj4cego przezr62ne miasta. Codziennie wyrusza
on z miasta, w kt6rym mieszka, i dociera do wszystkich oSrodk6w na swojej drodze,
odwiedzajEcka2dy znich dokladnie jedenraz. Na koniec wraca do domu. Oczywistym
jest, 2e chce, aby jego podr62 byla jak najkr6tsza, i to wla6nie stanowi nasz problem,
kt6ry musimy rczwi4zae . Mozemy zastosowa6 prosty algorytm, kt6ry sprawdzi wszyst-
kie drogi i zwr6ci tg optymaln4. Niestety, rozwi4zanie to obarczone jest wlzkladnicz4
zloilonoici4 obliczeniow4, co ogranicza nas do analizy prostych modeli.
Temat algorytm6w jest zglgbiany od stuleci przez najwigkszych filozof6w i matema-
tyk6w. Efekty ich pracy wida6 chociaLby przy budowie linii warszawskiego metra czy
w skr6ceniu czavt jazdy poci4gu relacji Krak6w - Kolobrzeg. W obu przypadkach pro-
wadzono niejednokrotnie rozwaLania podobne do tych, kt6re umo2liwiaj4 rozwi4zanie
wspomnianego wczeSniej problemu komiwoja2era. Warto te| dobrze rozwaLyf u1rb6r
jqzyka, w kt6rym chcemy zaimplementowa6 algorytm; nie zawsze ten, kt6ry jest nam
najbliLszy i kt6ry najczg6ciej wykorzystujemy, najlepiej sig do tego nadaje.

/-l
["'3.5.
- 1--r- Projektowanie klas (UML)
Do tej pory, gdy byla mowa o tym, 2e trzeba ttworzye klasg <i wskazanych wlaSciwoS-
ciach, u2y.waliSmy jej opisu slownego.
W programowaniu rzadko stosuje sig takie rozwi4zanie. Ten zapis zostalzast4piony przez
UML (Unified Modeling Language). M6wi4c najpro6ciej, zast4piono tekst diagramem.
W tym zapisie stosuje sig pewne stale i powszechnie przyigte zasady.

1211 ;
ai '
 Rozdzial 3. I Projektowanie aplikacji

Przyldad3.2l
Na rysunku 3.L5 zaprezentowano zapis za pomoc4 diagramu UML klasy student.
Ka2dego reprezentanta tej klasy charakteryzuj4 wlaSciwoSci: PESEL, imig (name) i na-
zwisko (surname). Zdefiniowano dlari takLe trzy metody, pozwalajEce na pobranie
numeru PESEL, imienia i tablicy z ocenami.

<<StereoType>>
ClassName

- Attribute: Type - PESEL: String

+ Attribute: Type - name: String
- Operation0: Type - surname: String
+ Operatio n (a rgs): Type + getPesel0: String
+ Operation(args): Type + getName0: String
+ getScores0: array

Rysunek 3.15. Przedstawienie klasy Student za pomocq diagramu UML

Klasa jest przedstawiona za pomoc4 tabelki. W pierwszej czESci (w nagl6wku) umiesz-
czona jest flazwa klasy, w drugiej mamy zmiennei atrybutyiwla5ciwoSci (w kolumnie
po prawej) oruz ich typy (w kolumnie po lewej). W tej drugiej sekcji przedkaLdym
oznaczeniem stosuje siE znaki:
o plus (+) oznacza,2e zmienna lub metoda lest publiczna;
. -
minus (-) oznacza,2e zmienna lub metoda iest prywatna.
-

Zmienna/metoda publiczna to taka, do ktorel mo2na uzyskac dostqp z dowolnego

miejsca kodu, Do zmiennej/metody prywatnej mozna sig odwolac bezposrednio tylko
zwnQlrza klasy. w ktorej zostaia zadeklarowana/zdefiniowana, a takze z klas, ktore z niej
dziedzicz4 (problem dziedziczeniawykracza jednak poza zakres tego podrgcznika).
Z poziomu pozostalych klas mozna siq do nich odwolywa6 za pomocE tzw. metod
dostgpowych (getterow jak getPesel O czy getName O i setterow)
- -

Przyl<Lad,3.22
GdybySmy chcieli zleci6 utworzenie klasy z przykladt 3.9, posluguj4c siq jgzykiem
naturalnym, moglibySmy napisa6:
Utw6rz klasg Student o wla6ciwoSciach name (imig) i surname (nazwisko). Obydwie
wlaSciwoSci powinny by6 typu tekstowego. Identyfikatorem oblekt6w w klasie niech
bgdzie numer PESEL. Utw6rztak2e metodgprryatn4pobieraj4c4 ten numer oraz dwie
metody publiczne, odpowiedzi alne za:
o pobranib imienia studenta,
. zwr6cenie jego ocen.

a'\,122
1

()
 3.6. Wzorce projektowe

Prawda, 2e widaf r62nic7? Kiedy tylko przyzwyczaimy sig do zapisu UML, jego sto-
sowanie bgdzie naturalnym wyborem, poniewa2 jest on prostszy ibardziej czytelny.

'/-l Wzorce projektowe

E+6.
3.6.1 . Czym sE wzorce i do czego sie przydq7?
Podczas tworzenia kodu bardzo czgsto napotykamy trudnoSci, kt6re s4 typowe moZe-
-
my by6 pewni, 2e mierzylo sig z nimi ju2 wielu programist6w przed nami. Na szczg(cie
wskutek tego wypracowano standardowe rozwi4zania takich problem6w, czyli wla6nie
wzorce projektowe.
Wzorzec projektowy ma na celu ulatwi6 pracE poprzez umoZliwienie skorzystania
z goto\,vych szablon6w rozwi4zafi w spodziewanych, standardowych sytuacjach.

Przyklad.3.23
Przenie6my tasze tozwalania o wzorcach projektowych do sfer znanych nam nieco
lepiej. Zwr6emy uwagg na wznoszone dzisiaj budowle. KaLdy budynek jest inny, ale
wigkszoS6 z nich korzysta z tych samych schemat6w i norm dotycz4cych np. ilo6ci
Swiatla w pomieszczeniu czy te2 dopuszczalnego poziomu halasu w mieszkaniu. Bgd4c
w du2ym mie6cie, latwo zauwaLymy,2e kiedy obejdziemy niemal dowolny budynek
stoi4cy przy ruchliwej ulicy, natrafimy na miejsca, gdzie halas jest bardzo mocno od-
czuwalny, podczas gdy inna czE56 budynku bEdzie idealnie wyciszona iprzygotowana
w ten spos6b pod czg56 sypialnian4. Jest to spowodowane tym, Lewsp6lczesne budynki
s4 oparte na dobrze znanych architektom wzorcach projektowych.

W programowaniu teZ m6wi siE o funkcji architekta. Rola takiej osoby sprowadza sig
wlaSnie do projektowania aplikacii na podstawie z g6ry znanychwzorc6w projektowych.
Wzorce stosowane w projektowaniu zostaty bardzo dobrze opisane w ksi42ce Wzorce
proiektowe. Elementy oprogramowania obiektowego wielokrotnego u?ytku autorstvva tzw.
Gangu Czworga.
Ksi42ka tazostalar.rydana ponad dwie dekady temu i do dziS rozwi4zania powszechnych
problem6w programistycznych opafte sa na jednym z 23 zawartych w niej wzorc6w.
Warto o tym pamigta6 i napotykaj4c jak45 trudnoS6, kt6ra wydaje siE nie do przej6cia,
nie pr6bowa6 wymySlad kola na nowo, lecz zairzet do tej klasycznej publikacji w celu
sprawdzenia, czy nie ma ju| gotowego rczwi4zania.
DoS6 dlugo m6wimy ju2 w tym rozdziale o wzorcach projektowych, nie podaj4c ich
definicji. Czas to zatem uczynie. Oto definicia autorstwa czlonk6w Gangu:
Wzorzec to rozwiqzanie problemu w ramach peurytego kontekstu.
Spr6bujmy j4 wyjaSni6 na przykladzie.

123'{ -t
---ri-
 Rozdzial 3. I Projektowanie aplikacji

Przyklad.3.24
Sytuacja: na wakacjach w Wielkiej Brytanii zaistniala potrzeba naladowania telefonu.
Kontekst: wtyczka kontaktowa i ladowarka do telefonu.
Problem: nie moZna wlo2ye ladowarki do kontaktu zewzglgdtt na to,2e na Wyspach
stosowany jest inny uklad bolc6w we wtyczce.
Rozwi4zanie: prze j Sci6wka/adapter.
Adapter zastosowany do rozwi4zania tego problemu przyda sigzreszt4nie tylko w Wiel-
kiej Brytanii, ale takLew Chinach czy USA orazwewszystkich krajach, w kt6rych stosuje
siq inny standard wtyczek. Dlatego wlaSnie moznattznat go zarczwiqzanie wzorcowe.

Aby stosowa6 roznego rodzalu przejsciowki, wcale nie trzeba wyjezdiac poza kontynent.
Trzebapodlqczyc stary monitor z gniazdem VGA (D-SUB) do nowego laptopa ktory ma
juz tylko nowe, cyfrowe wej6cia (HDMI lub DisplayPort) Chcesz podlqczy6 sluchawki
do telefonu, ktory nie ma wejScia typu minilack, a ledynie port micro USB? W obu tych
przypadkach trzeba skorzystai z adaptera.

W programowaniu sytuacla kiedy trzeba dostosowac jeden system informatyczny do

innego, zdarza sig nader czqsto. Dlatego jeden z wzorcow opracowanych przez Gang
Czworga to wla6nie wzorzec adapter.

W ksi42ce GoF (ang. Gang of Four Gang Czworga) kaildy wzorzec projektowy ma:
-
1. Odpowiednio dobran4 nazw1 wzorca (sugeruj4c4, laki charakter bgdzie mialo
rozwi1zanie, rrp. nazwa adapter dla wzorca adaptuiqcego niepasuj4ce do siebie
elementy).
2. Opis problemu kontekst oraz warunek (warunki) tzasadniaj4ce uZycie wzorca.
-
3. Rozwi4zanie element6w, kt6re wchodz4 w sklad rozwi4zaria, zaleLnoilci
- opis
pomigdzy nimi, ich odpowiedzialnoSci oraz interakcji.
4.
- opis ewentualnych problem6w zwi4zanych z zastosowaniem
Konsekwencje
wzorca. NajczgSciej jest to zmniejszenie wydajno6ci w okreSlonych sytuacjach.
Ta sekcja pozwoli nam zdecydowae, czy niepol4dane skutki uiyciawzorca nie s4
wigksze ni2korzy(ci, jakie wzorzec daje.

tc 124
 3.6. Wzorce proiektowe

Trzeba zdawac sobie sprawq z tego, 2ewzorzec projektowy nie jest gotowym, bqdqcym
rozwiEzaniem problemu kodem, ktory mozemy skopiowac i wkleic do swojego projektu
To tak, jakbySmy oczekiwali, ze ubranie, ktore Swietnie prezentuje siq na koledze, bgdzie
rownie doskonale pasowad nam. OczywiScie tak nie jest, nie powielajmy wigc wzorcow,
nie zastanawialqc sig nawet, jak je dostosowai do naszego problemu. Wzorzec jest tym,
o czym mowi jego nazwa-wzorcm rozwiEzania, anie rozwiqzaniem.
lstniejq takze gotowe implementacje wzorc6w. W ich przypadku liczba zmian jakich
bgdziemy musieli dokonac, jest zapewne mniejsza. OczywiScie takich implementacjijest
bardzo duzo. Zanim wykorzystamy ktorq6 z nich, zastan6wmy siq, dlaczego uwazamy
lqzalepszqod innych. Trzebalakze pamigtac ze najlepiej korzystad ze2rodelz jaknay
wiqkszq liczbq komentarzy, Nawet korzystalqc ze 2rodel sprawdzonych i wiarygodnych
nie powinni6my jednak po prostu przekopiowywac kodu bez proby jego zrozumienial

3.6.2. Klasyfi kacja wzorcow

W ksi42ce Gangu Czworga zdefiniowano nastgpuj4ce grupy wzorc6w:
o Strukturalne
- pomagaiqrozwi4zae problemy zwi4zane z zarz4dzaniem struktur4
obiekt6w oraz struktu rumi zloilonymi z tych obiekt6w.
. Behawioralne/ czynno6ciowe/operacyjne
tami i zarz4dzaj4 komunikacj4 migdzy nimi.
- porz4dkr\4 zaleLno lci migdzy obiek-
. Konstrukcyine/kreacyine
- uLatwiai4 tworzenie obiekt6w popruez delegowanie
procesu tworzenia do innych klas.

3.€i.3. lmplementacja wzorca

Skupmy sig teraz na procesie tworzenia wlasnej implementacji wzorca.

Pruyklad3.25
Zat6Lmy,2emamy kod Zr6dtowy do definiowania cen gier komputerowych. Od sprze-
dawcy wiemy, 2e istniej4 dwa rodzaje cen gier komputerowych:
o cena sugerowana dla gier ze Sredniego segmentu (midPrice),
. cena sugerowana dla gier z segmentu wysokobud2etowego (AAAPrice).

Sprzedawca wie,ilebgdzierczwijal sw6j katalog gier, wigc na pewno typy sugerowanych

cen r6wnie2 bgd4 ulega6 zmianie.
Czas na implementacjg problemu wedlug zaakceptowanego przez klienta modelu
w notacji UML. Na razie spr6bujmy przeprowadzit j4bez wykorzystania wzorca pro-
jektowego. Oto diagram klas do utworzenia (rysunek 3.16).

t;25 l. .
 Rozdzial 3. I Projektowanie aplikacji

MidPrice AAAPrice

+ name: String + name: String

+ price: lnteger + price: lnteger
+ brandManager: String + brandManager: String
+ displayO: String + company: array
+ display$: String

Rysunek 3.16. Diagram klas dla sklepu z grami

Oto kod, kt6ry napisaliSmy (listing 3.10):

Listing 3.10
Kod klas dla sklepu z grami

class MrciPrice {
name = 'mid' ;
pr . ' ;
brandManager :'Mactej Nowak';
display = funct:onO i
ret_1trn console. log ('osoba odpowiedzialna za segment g{ thrs .

namef to ${1-his.brandManager} (cena sugerowana to: g{this.price})' );

}

class AAAPrice {
name:'aaa price';
price:250;
brandManager :'Marianna Srebrnar;
company : ['Ua', 'Microsofi-'];
drsplay: functionO {
ret_1trn console.log('csoba odpowredzialna za segment g{this.
name] to g{thrs.brandManager.} (cena sugerowana to: g{thrs.prrce})') ;

Teraz tworzymy funkcjg, kt6ra ma na celu dodanie wszystkich kategorii cenowych

zgodnie z segmentem sprzedazowym (listing 3.11).

Listing 3.11
Kod funkcji do dodawania cen

1 function games O {
2 1et games = ll;

:'ltza
"-r.,
 3.6. Wzorce projektowe

3 games . push (lew MidPrice ( ));

4 games . push (new AAAPrice ( ));

6 for (let i : 0; r < games.length; i++) |

J console. log (games lil . dispfay ( ) ) ;

8]
9l
WyiaSnijmy teraz, co sig dzieje w poszczeg6lnych liniach kodu.
1. Zdeflniowanie metody.

2. Deklaracja pustei tablicy z gtami

3. Dodanie do tablicy nowego obiektu MidPrice.
4. Dodanie do tablicy nowego obiektu AAAPrice.
5. Odstgp.
6. Utworzenie pgtli o kroku jeden, przechodz4cej po elementach tablicy.

Wypisanie na konsoli informacji zawartych n,obydw6ch klasach (MrdPrrce i AAA-

7.
Prrce) za pomoc4 metody display.
WyobraZmy sobie teraz,2e po napisaniu kodu przychodzi kiient i m6wi, ze wprowa-
dzit do swojej kolekcji sprzedazowei gry z najnizszego segmentu i chce dodaC jeszcze
BqsePrice. Dodalemy zatem do naszego modelu UML jeszcze jedn4 klasg (rysunek 3.17).

MidPrice AAAPrice BasePrice

+ name: String + name: String + name: String

+ price: lnteger + price: lnteger + price: lnteger
+ brandManager: String + brandManager: String + brandManager: String
+ displayQ: String + company: array + displayQ: String
+ displayfl: String + getPrice0

Rysunek 3.17. Zmodyfikowany diagram klas

-
Przy tak opracowanym rozwi4zaniu jedna rzecz moLe niepokoi6. Jak iti zostalo wspo-
mniane na samym pocz4tku tego rozdzialu, w podrozdziale 3.2, nie powinniSmy po-
wielai kodu (zasada DRY). Tu zaS mamy calkiem sporo zduplikowanych linijek. Co
zrobit, aby tego unikn46?
Wla6nie w takich momentach na ratunek ptzychodz4 wzorce'projektowe.

Przyklad.3.26
Analizgproblemu rrale|y rozpocz4C od odpowiedzina pytanie, z kt6rego rodzajttwzorca
powinni6my skorzysta6.

127 (')
 Rozdzial 3. I Projektowanie aplikacji

Na podstawie wymienionych w punkcie 3.6.2kr6tkich charakterystyk grup wzorc6w

mo2emy w)'wnioskowal 2e bgdziemy poszukiwa6 rczwi4zania w grupie wzorc6w
kreacyjnych. Dlaczego wla6nie w tej?
Zadajmy sobie nastgpuj4ce pytania:
1. Czy problem dotyczy zaleLnoicimigdzy obiektami (wzorce behawioralne)?
2. -Nie.
Czy problem dotyczy zaleLno(;cimigdzy obiektami llb zarzydzania obiektami (typ
wzorca strukturalnego)? Nie.
-
3- czy problem dotyczy fworzenia nowego obiektu za kaLdym razem (typ wzorca
kreacyjnego)? Tak.
-

Przeglqdajqc opisy poszczegolnych wzorcow z grupy wzorcow kreacyjnych trafiamy

na nastqpujqcy opis: ,,Okresla interfejs do tworzenia obiektow przy czym umozliwia
podklasom wyznaczenie klasy danego obiektu, N/etoda wytworcza umozliwia klasom
przekazanie procesu tworze n a egzem plarzy pod klasom ",
i

Jest to opis wzorca metoda wytworcza (ang. Factory Metho$. Po uwaznym, kilkakrot-
nym przeczytaniu zacytowanego zdania nasuwa siq wniosek, 2e moznawygenerowac
osobnq klasq z metodq decydujqcq na podstawie zadanego parametru, ktory typ
instancji nalezy utworzyc.
lnna nazwa wzorca metoda wytworcza to ,,konstruktor wirtualny" (ang. Viftuat Constructor),

W przypadku zrodel dostgpnych w internecie nalezy kierowac sig zasadq, ze nie wszystko
zloto, co sig swieci. Nie zawsze atrakcyjny i prze)rzysty interfejs idzie w parze zwysokq
jakosciq przekazywanej wiedzy Jeszcze raz podkreslamy,2e warto siggac tylko po
sprawdzone i wiarygodne zrodia informacji.

W praktyce na pocz4tku nale|y ttworzye klasg, kt6ra formalnie bgdzie nazywana fa-
bryka. Zadania tej klasy to:
. wygenerowanie odpowiedniej instancji klasy wedlug wskazanego typu,
o wySwietlenie danych dotycz4cych ceny (to ta czgsf kodu jest zduplikowana).
Utw6rzmy zatem klasE wedlug schematu (rysunek 3.18). Na razi.e jednak nie bgdziemy
pisac implementacji tworzenia instancji klas. Skupmy sig na tym, by dobrze rczpisac
klasE, implementacj4 zajmiemy sig p6zniej (w kodzie brakuj4ce elementy zast4pimy
komentarzem).

(')128
*a
 3.6. Wzorce projektowe

ProgramiSci, kiedy zostawiajq sobie element kodu do napisania w po2nielszym czasie,

stosulE do oznaczenia iakich miejsc zapisanq w komentarzu sekwencjq TODO (jesli
rozdzielimy to siowo po srodkowej samoglosce ,,o", uzyskamy angielskie to do, czyli
,,do zrobienia").

PriceGameTypeFactory

+ createPriceType(type): PriceType
+ display0: String

Rysunek 3.18. Diagram UML klasy PriceGameTypeFactory utworzonej

wedtug wzorca metoda wytworcza
Na listingu 3.72 przedstawiono kod, kt6ry powinni6my napisa6.

Listing 3.12
Definicja klasy PriceGameTypeFactory z pustymi metodami
1 class PriceGameTypeFactory {

3 createcamePrrceType : functron(type) {

4 let prrceType;
5 if (type ::: "baseprice") 1

6 // TODO stworzl,i instancjg BasePrice

1 j else if (type ::: "nidprice") {

8 // TODO stworzy( instancjq MidPrice

9 I eLse if (type ::: "aaaprrce") {

10 // TODO stworzya instancjq AAAPrice

11 l

l2
13 praceType. dispLay : function ( ) {

L4 // TODO metodo wyiwietl.djtlca kctrnunikot

ls }

L6

L] return priceType;
18 ]

19 I

12e | -
q
 Rozdzial 3. I Projektowanie aplikacji

Zostala utworzona klasa zawieraj4ca jedn4 metodg, kt6ra w zaleznoSci od potrzeb

zwr6ci konkretnq instancjg typu ceny.
Linijkg 3. mo2emy skr6ci6 do r6wnoznacznego zapisu:
createGamePriceType ( type )

Linijkg 7. z listingu 3.1,2 nale2y zast4pie utworzeniem instancji klasy easeerice.

Uzyskamy to, wpisuj4c:
prrceType - new BasePrice o
Analogicznie postgpujemy z pozostalymi instancjami do utworzenia.
Kolejnym krokiem jest ,,odchudzenie" ju2 istniej4cych, wcze6niej utworzonych klas
(tych z listingu 3.10). Wyrzucamy z nich metodg drsptay.

Skoro usungliSmy metodg display z klas, toteraztrzeba j4gdziel zaimplementowa6.

WczeSniej stworzyli6my sobie szkielet tej metody (listing 3.12, linijki 74.-76.). Poniewa2
we wszystkich klasach ten kod byl identyczny, wystarczy wklei6 kod odpowiedzialny
za wySwietlanie do liniiki 15.

Co zatem wpisa6 w 15. linijce iistingu 3.12? Metodg, kt6r4 usuwali6my z poszczeg6lnych
klas. Cialo tej metody to:

return console. log ( 'osoba odpcwredzraina za segment g { rhis . name }

to ${this.brandManager} (cena sugercwana to: g{lhrs.price})')

Tylko jedna rzeczwygl4da inaczej ni2 poprzednio: w fabryce nie ma slowa kluczowego
thrs, gdy2 teraz za ka2dym tazem tworzymy now4 instancjg innej klas1,. Tym razem
skorzystamy ze zmiennej, do kt6rej przypisywaliSmy nowo utworzone instancje, czyli
pri ceType (listing 3.13).
Listing j.13
Zmodyfikowany kod klas1, PriceGameTypeFactory (uzupelniono metodg createGame-
PriceType oraz dodano metodq display)

class PricecameTypeFactory {

createcamePriceType = function (type) {

let priceType;
if (type ::: 'rbaseprice") {

priceType = new BasePriqe O;

el-- tI I r 'Opr_ -"r ,

priceType : new MidPr:ice O;

| else if (type ::- "aaapricer') {

priceType : new AAAPrice O ;

]

4t130
-7
 3.6. Wzorce projektowe

prrceType. display : functron O {

return ccnsofe. log ('osoba odpowiedzialna za segment $ { this .

name } to ${this.brandManager} (cena sugerowana to: g{this.pr:ice})'),

]

return priceType;

Teraz zmienimy definicjg funkcji gamesEactory, tak jak pokazano na listingu 3.14.

Listing 3.14
Modyfikacja definicji funkcji gamesFactory
1 funcl_ion gamesEactory ( ) i
2 ieL games : [];
3 1et gameEactory : new PriceGameTypeEactory O ;
4 Let aaaPrice : gameEactory. crea-_ecamepricelype ( 'aaaprrce' ) ;
5

6 games.push (aaaPrice) ;

7 games.push(gameEactory.createGameprrceType('baseprice'));
8 games.push (gameEactoIy. createcamepriceType ('midprice') );
9 games . push (gameEactory. createGamepriceType ( 'baseprrce, ));
10

11 for (let i:0;1 < games.length; i += 1) {

12 console.log(games 1il .dispfavO );

13 l

14 console. fog (aaaPrice.publlshers) ;

15 ]

P rzeanalizujmy wybrane iinie kodu.

3. Tworzymy instancjg klasy er i ceGame Type Facto ry.
4. Wykorzystui4c fabrykg, tworzymy instancjg klasy AAAprlce.
6. Dodajemy instancjg do tablicy.
12. Wykorzystujemy metodg di sp1 ay z klasy pri ceGameType Fa ctory.

)
l

131
(L
t-l
 Sozdztal 3. I Projektowanie aplikacji
('-))
1r"3.7. Podsumowanie
----T----T_---
Tworzenie wydajnej aplikacji o wysokiej jakoSci nie jest proste. Je(;li zapytamy archi-
tekta oprogramowania, ile czasu zajglo mu zdobycie niezbEdnej wiedzy, zazwyczai
odpowie, Le wci42 i4 zdobywa. Dlaczego? Bo 6wiat programowania to 6wiat ci4glego
ksztalcenia siE. Bardzo czgsto sig okazuje, Le rozwi4zania stosowane w jednej firmie nie
sprawdzaj4 siE w innej. Co wigcej, technologia nie stoi w miejscu. Wci42 pojawiaj4 sig
nowe frameworki, biblioteki, a nawet cale jgzyki programowania. Musimy wigc by6
ptzygotowani na nieustanne poszerzanie swoje j wiedzy.
Niemniej zawsze trzeba zaczynae od opanowania podstaw. Bez tego po prostu nie uda
siE ruszy6 z miejsca.

/-l
3.8. Zadania
-
Zadanie 3.1
Stw6rz listg krok6w potrzebnych do wyslania SMS-a.

Zadanie 3.2
Zaprezenttj za pomoc4 schematu blokowego listE krok6w z zadania 3.1.

Zadante 3.3
Zaprezenttj za pomoc4 schematu blokowego listg krok6w potrzebnych do okre6lenia,
czy po dana p r zez tLy tkownika liczb a je st liczb 4 pierw sz4.

Zadanie 3.4
Na podstawie istniej4cego schematu blokowego (rysunek 3.6) napisz funkcjg, kt6ra dla
podanych przezuLytkownika dw6ch liczbvryznaczy ich najwigkszy wsp6lny dzielnik.

Zadanie 3.5
Na podstawie przedstawionego schematu blokowego (rysunek 3.8) napisz funkcjg re-
alizuj4c4 sortowanie b4belkowe.

Zadanie 3.6
Napisz aplikacjE wyszukuj4c4 wskazany element w tablicy.

Zadanie 3.7
Zaprojekttj za pomoc4diagramu UML rozwi4zanie problemt sprzedaLy warzyw w wa-
rzywniaku.

l";132
i.:,
 3.8. Zadania

Zadanie 3.8
Zaprojektui za pomoc4 diagramu UML rozwi4zanie problemu sprzedaLy komputera
skladanego ze wskazanych podzespol6w

Zadanie 3.9
lJtw6rz sw6j schemat blokowy opisui4ry wyci4ganie mleka z lod6wki. Jaka jest zlo2o-
no56 obliczeniowa tego schematu?

Zadanie 3.1O
Zaimplementuj (na podstawie samodzielnie stworzonego schematu blokowego) metodg
sprawdzai4c4, czy wskazana przez tLytkownika liczba jest liczb4 pierwsz4. Jaka jest
zloilonoit obliczeniowa tego algorytmu?

133o
1.-r1
 Rozdzial 3. I Projektowante aplikacjt

| ;134
 oprogr_amowanl
Wsp6tczesny Swiat opiera sig na technologii komputerowej. Nie ma bran2y, kt6ra by
funkc j onow ala bez system6w informatycznych.

Zapewne wiEkszoS6 z nas miala stycznoS6 z oprogramowaniem, kt6re nie dzialalo tak,
jak powinno. Systemy sq tworzone przezludzi, a jak wiadomo, ludzie popelniaj4 blqdy.

Wystgpuj4ce w oprogramowaniu btgdy prowadz4 do awarii systemu. Kailda awaria

oznacza straty, zat6wto f,nansowe, jak i wizerunkowe. Aby zminimalizowa( ryzyko
jej wyst4pienia, nale?y przeprowadzi6 testy v\rytwarzanego oprogramowania. Jest to
szczeg6lnie istotne, je6li programista dba (a powinien!) o to, by u2ytkownicy mieli
zaufanie do oferowanego pruez niego produktu. Je2eli jakoS6 oferowanej uslugi bgdzie
niska, prawdopodobnie u2ytkownik nie dokona ponownego zakupu b4di nie poleci
uslugi znajomym. Dlatego nie wystarczy napisae kod aplikacji, by m6c i4 od raztt
udostgpnia6. Najpierw trzeba sig upewni6,2e jest ona wysokiej jako6ci i nie zawiera
btgd6w. Uzyskamy to, testuj4c oprogramowanie. Ten proces ma kluczowe znaczenie
dla jakoSci produktu.
W kilku kolejnych podrozdzialach zostan4 om6wione podstawy testowania oprogra-
mowania oraz dobre praktyki dotycz4ce zglaszania blgd6w.
t/N
lZW.l. Siedem zasad testowania
-----TT
oprogramowania
Zanimprzejdziemy do szczeg6l6w, musimy poznat. og6lne zasddy dotycz4ce testowania.
Jest ich siedem i s4 one solidnym fundamentem wiedzy zar6wno dla pocz4tkuj4cego,
jak i dla do6wiadczonego testera. Warto, by znal je tak2e programista pomog4 mu
one tworzye aplikacje wysokiej jako6ci. -
Niekt6re z zasad mog4 sig wydawa6 oczywiste,
jednak gdy sig dziala pod presj4 czaslt,latwo o nich zapomnie6. Niezale2nie od cha-
rakteru projektu warto o nich pamigta6 i do nich wraca6.

4^-
rJc
 Rozdzial 4. I Testowanie oprogramowania

1. Testowanie ujawnia usterki

Testowanie zmniejszaprawdopodobieristwo, 2e w oprogramowaniu pozostana nieziden-
tyfikowane defekty. Nale2y jednak pamiEta6, 2eprzeprowa.dzerte test6w nie gwarantuje
niezawodnoSci aplikacji
- nawet gdy Zadne
dow6d na poprawnos6 oprogramowania.
defekty nie zostan4 znalezione, nie jest to
Niemal na pewno bowiem testy nie uwzglgd-
nity wszystkich mo2liwychprzypadk6w Jest to zwi4zane ztym,co glosi kolejna zasada.
2. Testowanie gruntowne jest niemo2liwe
Przetestowanie wszystkich kombinacji danych wejSciowych i warunk6w wstgpnych iest
moZliwe tylko w prostych przypadkach. GdybySmy starali sig przewidzied i sprawdzi6
wszystkie moiliwe przypadki, niepotrzebnie straciliby6my czas ibye moLe nigdy nie
zakoficzyLiby6my testowania. Dlatego zamiast d42yC do przetestowania calego systemu,
powinni6my ukierunkowa6 wysilki na analizgryzyka (czylina okre6lenie prawdopodo-
bieristwa wystEpienia poszczeg6lnych blgd6w), dob6r technik testowania (pod k4tem
najbardziei prawdopodobnych i najuci42liwszych typ6w blEd6w) ipriorytetyzacjg (okre-
6lenie, kt6re blgdy mLtsz4zostac naprawione, a kt6re np. zewzglgdu na niewielkie
ryzyko ich wyst4pienia lub nikl4 uci42liwos6 dla
-
u2ytkownika s4 dopuszczalne).
-
3. Wczesne testowanie oszczgdza czas i pieni4dze
czynnosci testowe powinny rozpoczynaesiq tak wczesnie, jak tylko to moZliwe w przy-
padku danego oprogramowania. Im wczesniej zostanie wykryty bl4d, tym nizszy jest
koszt jego naprawy.

Zwroc uwagg na to, ile kosztuje naprawa blgdu na samym poczqtku projektu (analiza),
a ile juz po lego wdrozeniu (tabela 4.1)
Tabela 4.1. Symulacja kosztu naprawy btqdu na poszczegolnych etapach wy-
tw arzania oprogramowan ia

Etap Koszt naprawy bfgdu

Analiza 0,2 MD*

Programowanie 0,5 MD

Testy modulowe 1 MD

Testy systemowe 3 MD

Po wdro2eniu 10 MD
* MD (pracochlonnoSc) to iloSc ciqgiej nieprzerwanej pracy. jakq powinna
wykonac jedna osoba, by
skoitczyc zadanie. JeSIi zadanie musi wykonywac kilka osdb, to sumuje siq czas ich pracy, by uzyskac
leden wynik, tak lakby zadanie wykonywala jedna osoba. PracochlonnoSi mrerzymy w dniach robo-
czych (ang. man-day).

':136
 4.1. Siedem zasad testowania oprogramowania

Przyklad.4.l
Wyobral sobie, 2e piszesz program dla powa2nej instytucji finansowej, np. du2ego
banku. Po ukoriczeniu pisania kodu nie wystarczyto Ci jtt| czaso na rzetelne przete-
stowanie aplikacji, dlatego zamiast poprosi6 zleceniodawcg o zmiang terminu rcalizacji
zlecenia, decydujesz sig zaryzykowa6 i przesla6 program w obecnej postaci. Niestety
zaraz po wdro2eniu produktu okazuje siq, 2e niepoprawnie wylicza on raty kredyt6w.
Kierownictwo banku jest
- m6wi4c oglgdnie -bardzo zdenerwowane. Kredytobiorry
dzwoni4 z reklamacjami. Spraw4 zainteresowaty siE media. Zeby uniemo2liwi6 zawie-
ranie nowych um6w z blgdami w harmonogramach splat kredytu, zdecydowano sig
zawiesi6 dzialanie systemu ratalnego. To ocz),wiScie oznaczawymierne straty finansowe
dla banku, nie wspominaj4c nawet o utracie wizerunku instytucji. Poniewa2 to Tw6j
kod spowodowal to zamieszanie, musisz go poprawiC, tym razem jednak bgdziesz
dziabe pod ogromn4 presj4
- kierownictwo banku 24da iak najszybszego usuniEcia
usterek, groz4c jednocze6nie odst4pieniem od umovry i ztoLeniem pozwu s4dowego.
Ten przyklad powinien uSwiadomi6 Ci, jak walne jest testowanie produktu przed jego
p r zekazaniem zamaw iaj4c emu.

4. Kumulowanie siq btgd6w

Wigkszo36 blgd6w znalezionychpodczas testowania przed rvypuszczeniem oprogramo-
wania lub powodujarych awarie produkcyjne znajd$e siq w malej liczbie modu16w.
Mo2emy zaobserwowat.tttaj dzialanietzw. zasady Pareto (80120), czyli np.: na dziesig6
testowanych funkcjonalno3ci osiem zwykle dzialaprawidtowo, a dwie nieprawidlowo.
Je2eli jednak firma wprowadzi na rynek wadliwE aplikacjg, to zgodnie z zasad4 Pareto
80% klient6w zattwaLy te usterki i nie poleci produktu znajomym; mo2e to nawet
doprowadzi6 do odst4pienia od zakupu. Dlatego niezwykle waLne jest zlokalizowanie
wadliul,ch modul6w, kt6re mog4 by6 skupiskiem defekt6w aplikacji.
5. Paradoks pestycyd6w
Przy rozwijaj4cej sig aplikacji niezmieniane testy trac4z czasem zdolnoS6 do wykrywania
defekt6w, podobnie jak pestycydy po pewnym czasie nie s4 zdolne do eliminowania
szkodnik6w. Ci4gle powtarzanie tych samych test6w, bez zmieniania ich samych lub
testowanych danych, prowadzi do sytuacji, w kt6rej przestaiEorte w pewnym momencie
wykry.wa6 nowe blgdy. Zeby przezvrycigLy1 paradoks pestycyd6w, przypadki testowe
mllsz1 by6 regularnie przegl4dane i modyfikowane, pod42aj4c za rozwijan4 aplikacj4.

Pruyklad,4.2
Podczas testowania nowej strony internetowej dla firmy rbezpieczeniowej tester wy-
liczal skladki tbezpieczenia OC, posluguj4c siE tylko jednym zestawem danych (tzn.
zakaLdymrazem, gdy przechodzil do kalkulatora skladki, wprowadzai te same dane).
Jego testy nie wykazywaty btgd6w. Dopiero podczas odbioru aplikacji przez klienta
okazalo sig,2e oprogramowanie zawiera takie usterki jak:
. brak walidacji p6l ,,numer telefonu" i ,,adres mailowy" (w zwi4zku z czymmoLna
bylo np. wpisa6 mail bez znakt @ lub numer telefonu skladaj4cy sig z zaledwie
dw6ch cyfr);

rsz [.r
__-;i-_.
 Rozdzial 4. I Testowanie oprogramowania

o liter6wki w nazwach marek aut (przez kt6re czgsd u2ytkownik6w nie znajd,owala
na liScie marek swoich samochod6w);
. mo2liwoSe ubezpieczenia auta z dat4 startu z przeszloSci (co jest niezgodne z obo-
wi4ztti4cym prawem).
Gdyby testy odbywaty sig na zr6ilnicowanych danych, powyLsze blEdy zostatyby r,rry-
kryte na pocz4tkowym etapie test6w.
6. Testowanie zaleLy od kontekstu
W zupelnie inny spos6b bgdzie testowany sklep internetowy ni2 system rezerwacji
bilet6w czy aplikacja do zamawiania taks6wki.
7. Przekonanie o braku btqd6w jest blgdem
w Swietle tego, co m6wi4 zasady1.. iL.,nie naleZy oczekiwa6, 2e jesli oprogramowanie
zostalo gruntownie przetestowane i wyeliminowano znalezione dziEki temu blgdy, na
pewno iest ju2 poprawne i bqdzie :uzyteczrre dla korzystajqcych z niego os6b. Przede
wszystkim wci42 moLe zawieru( usterki, kt6rych nie udalo sig wykry6. Nale2y jednak
tak2e pamigta1, ze nawet znalezienie i usunigcie wszystkich blgd6w na nic siE nie zda,
je2eli system bgdzie nieintuicyjny i trudny w obsludze albo nie bgdzie spelnial potrzeb
oraz o czekiwari u2ytkownika.
Oczywi3cie nie znaczy to, Le
2e bgdzie
- skoro testowanie
ono bezblgdne i :u?yteczne
oprogramowania nie gwarantuje tego,
nie naleLy go przeprowadzae! czas poswig-
-
cony na dobrze przemy6lane i zaplanowane testowanie na pewno nie bgdzie czasem
straconym.

r--L
l<'14.2. Proces testowy wedtug ISTQB
Znasz ju2 og6lne zasady dotycz4ce testowania. Przejdimy zatem do bardziej szczeg6-
lowych regulacji. WigkszoS6 jest ustalanych przez ISTeB.
ISTQB (ang. International software Testing Qualifications Board) jest instytuciqwy-
znaczai4c| podstawowe standardy w dziedzinie testowania na skalg Swiatow4. Ta
organizacja oferuje Scie2kg certyf,kacyjn 4, kt6ra umo2liwia zdobl,wanie certyfi kat6w
potwierdzai4cych uprawnienia dla tester6w, analityk6w i test mened 2er6w.Jest uzna-
wana na calym 6wiecie w bran2y IT.

Zgodnie z definicjq ISTQB testowanie to proces skladajqcy sig z wszystkich czynnosci

cyklu zycia. zatowno statycznych (niezmiennych), jak i dynamicznych (zmieniajqcych
sig w zaleznosci od przekazanych do aplikacli danych) Jest skoncentrowany na pla-
nowaniu, przygotowaniu i ewaluacji oprogramowania oraz powiqzanych produktow
w celu okreslenia, czy spelniajq one wyspecyfikowane wymagania, alakie wykazania,
ze sE one dopasowane do swoich celow i do wykrywania usterek.
Mowiqc prosciej, testowanie oprogramowania to jeden z procesow zapewnienia jako-
sci oprogramowania, kt6ry ma na celu weryfikacjg oraz walidacjq.
 4.2. Proces testowy wedtug ISTQB

Ulo2enie procesu, wedlug kt6rego bgdzie molrLa testowa6 oprogramowanie, jest klu-
czowym elementem ka2dej organizacji. Kaildy proces jest dostosowany do struktury
firmy, jej strategii, zasob6w i metodyki, wedlug kt6rej wytwarzane jest oprogramowanie.
Wedlug ISTQB proces testohy sklada sig z nastqpuj4cych czynno6ci:
1. Planowanie test6w.
2. Monitorowanie test6w itadz6r nad nimi.
3. Analiza test6w.
4. Projektowanie test6w.
5. Implementacja test6w.
6. Wykonywanie test6w.
7. Ukoiczenie test6w.
W praktyce oznacza to, Le tworz4c projekt testowy, naleLy zaplanowae kolejnoS6 prac
i wzi4e pod uwagE wszystkie czynnoSci testowe, kt6re bgd4 realizowane. ISTQB nie
flarzuca organizacjom gotowego procesu, a jedynie pokazuje, na jakie grupy czynno6ci
warto zwt6cie uwagq.

Nie wszystkie etapy bqdq mialy odzwierciedlenie w realnych projektach. Niektore czyn-
no6ci mogq wystgpowa6 r6wnoczeSnie, nachodzic na siebie bEd2 zoslac pominigte.

Przejdimy teraz do przedstawienia poszczeg6lnych proces6w zwi4zanych z testowaniem.

4.2.1. Planowanie testow

Pierwszym etapem jest zaplanowanie wszystkich prac testowych w projekcie. G16w-
nym dokumentem, w kt6rym s4 przechowl,wane te informacje, jest plan test6w. Ten
dokument iest aktualizowany przez caly cykl 2ycia projektu. Ma do niego wgl4d
caly zesp 6l pro j ektowy.
Opracowuj4c plan test6w, trzeba:
o okreSli6 zakres test6w (wskaza6, co bgdzie, a co nie bgdzie testowane);
o ustali6 kryteria rozpoczEcia,zawieszeniaizakoficzenia test6w (wskaza6, co doklad-
nie musi sig sta6, 2eby prace testowe przeszly do kolejnego etapu);
o okreSli6 cel test6w (co chcemy osi4gn46 popruez testowanie);
. wskaza6 zasoby (sktad zespolu projektowego, ale takZe sprzgt, kt6ry jest niezbgdny
do przeprowadzenia test6w);
. wskaza6 Srodowiska, na kt6rych bgdqprzeprowadzone testy;
o ustali6 harmonogram (okreSli6 terminy, w kt6rych bgd4realizowane poszczeg6lne
prace testowe);
1

139 :

,'l -
 Rozdzial 4. I Testowanie oprogramowania

o zdefiniowa1 ryzyka (zidentyfikowae tzw. wAskie gardla, czyli obszary, etapy lub
funkc j onalnoSci, kt6re mog4 zagro zi6 terminowemu zakof czeniu pro j ektu) ;
o wskaza6 spos6b b4d2 narzgdzie, za pomoc4 kt6rego bgd4 rejestrowane i komuni-
kowane z$aszaneblgdy.
To tylko skr6cona lista element6w planu testu. Ze wzglgdu na jego znaczenie oraz
stopieri skomplikowania bgdziemy ieszcze o nim m6wi6 w rozdziale dotycz4cym do-
kumentacji testowej.

4.2,2. Monitorowanie testow i nadzor nad nimi

Istotnym elementem prac jest ci4glenadzorowanie przebiegu test6w. Wszyscy czlonko-
wie zespolu projektowego oraz sponsorzy (czyli osoby, zkt6rychbud2et6w realizowane
s4 projekty) s4 informowani o aktualnym stanie wykonawczym prac w odniesieniu do
zalozonych cel6w.
W praktyce czgsto stosowanA form4 raportowania stanu prac jest wykres liniowy
-
jedna linia wskazuje aktualny stan zrealizowanych test6w, druga pokazuje prognozg
celu (co juZ powinno by6 wykonane) (rysunek 4.1).

Dzied 1 Dzie6 2 Dzieri 3 Dzien 4

Zrealizowane testy Prognoza celu

- -
Rysunek 4.1 . ?rzykladowy wykres przedstawiajqcy status zrealizowanych testow
Wazne, aby forma przekazywania raportu z przebiegu test6w byla zrozumiala dla
wszystkich os6b z zespolu projektowego.

4.2.3. Analiza testow

Jest to grupa czynnoSci, kt6rych wykonanie zabiera najwigcej czasu, a ich wyniki s4
kluczowe dla dalszych etap6w procesu testowego. Zesp6l testowy wykonuje analizg,
dzigki kt6rej okreSla:
o podstawE test6w;
o dane testowe, jakie bgd4 potrzebne do ich wykonania;
o pokrycie, czyli warunki testowe (zesp6l wskazuje, co bgdzie testowane).

:)140
r')
 4.2. Proces testowy wediug ISTQB

Cztonkowie zespolu korzy staj4 gl6umie ze specyfikacji wymagari (ten dokument zostanie
przedstawiony w rczdziale 5.), z dokumentacji technicznej lub zaloLefi biznesowych.

Czgsto juz na etapie analtzy zostajq wychwycone bigdy. Zgodnie z tym, co glosi znana
Ci juz zasada 3. testowania (o wczesnym testowaniu), przeklada siq to na zmniejszenie
kosztow poniesionych w zwiqzku z realizaclq prolektu. Na tym etapie mozna wyelimi-
nowac wszelkiego rodzalu.
. niejednoznacznoSci,
. pominiqcia,
. niespojnosci,
. nieScislo6ci,
. sprzecznoSci,
. nadmiarowe (zbgdne) instrukcje.
Powtdrzmy raz jeszcze. im wczeSniej wykryty blqd, tym nizszy koszt lego naprawy.

4.2.4. Projektowan ie test6w

Gdy znane s4 ju2 wnioski z etapu analizy,moznaprzyst4pi1 do projektowania test6w.
Na tym etapie naleLy przeksztalci6 warunki testowe w przypadki testowe (wysokiego
lub niskiego poziomu).

U DEFINTCJA
Warunek testowy to element lub zdarzenie modulu lub systemu, kt6ry moze byc zwe-
ryfikowany przez leden lub wigcej przypadkow testowych, np. funkcja, transakcja, ce-
cha. atrybut jako6ci lub element struktury. Zatem warunek testowy mozna uznac za
artefakt nadrzqdny w odniesieniu do przypadku testowego.

M6wi4c prostym jgzykiem, warunek testowy okre6la, co powinno zosta( sprawdzone

podczas test6w, a co za tym idzie, tak2e co powinno zostaC pokryte przypadkami
testow1zmi.

Norma ISO 29119 okresla przypadek testowy jako zestaw warunkow wstqpnych, da-
nych wejsciowych akcji (w stosownych przypadkach), oczekiwanych rezultatow iwa-
runkow koncowych, opracowany na podstawie warunkow testowych.

141 (-)
-"1r
 Rozdzial 4. I Testowanie oprogramowania

w praktyce taki przypadek testowy to instrukcja dla uZytkownika, kt5ra m6wi, jakie
kroki nale2y wykona6 i jakie s4 oczekiwane rezultaty wykonanych krok6w.
Szczeg6towa budowa przypadku testowego; zar6wno uysokiego, jak i niskiego poziomu,
bgdzie opisana w rozdziale 5.
Wszelkie testalia, czyli dokumentacja (przypadki testowe, historyiki u2ytkownika itp.)
i skrlpty wltworzone podczas trwania procesu testowego, powinny by6 przechowywane
w natzEdziu, kt6re zapewnia wersjonowanie (historiE edycji dokumentu) i Sledzenie
historii wykonania.
warto korzysta6 z narzgdzi wspomagaj4cych proces testowy, np. Jira czy Testlink
(pierwsze z nichbgdzie omawiane w dalszej czgsci rozdzialu).

4.2.5. mplementacja testow

I

Na etapie implementacji (czyli wdro2enia, wprowadzenia) nastgpuje sprawdzenie,

czy posiada sig wszystko, co pozwoli na skuteczne przeprowadzenie test6w. Nale2y
okresli6, jakie parametry powinno mie6 Srodowisko testowe (np. z jakimi systemami
ma by6 pol4czone, jaka ma bye baza danych, jakie konta u2ytkownik6w powinny by6
utworzone), utworzye skrypty automatyczne (je2eli maj4 zastosowanie), uporz4dkowa6
zestawy test6w, wykonad priorytetyzacjq (zadecydowa6, kt6re zadaniab4dl, czynnosci
bgd4 r,vykonlrwane w pierwszej kolejnoSci) itd.

4.2.6. Wykonan ie testow

Podczas tego etapu wykonane zostai4wszystkie zaplanowane testy, zat6wno tecz11e,
iak i automatyczne (ie2eli projekt zaklada automatyzacjg). Je2eli zostanie wychwycone
niepol4danezachowanie systemu, r,ale|y zglosiC bt4d (wedtugwtycznych opisanych
w planie test6w).
Poptzez wykonanie test6w nalezy tei rontmie( zareiestrowanie prawidlowego wyniku
test6w (np. pozytywny, negat)'wny, zablokowany). wszelka dokumentacja powstala
w trakcie wykonania test6w powinna by6 archiwizowana. W organizacjacho charakterze
finansowym, bankowym czy instytuc jach z sektora publicznego czgsto sa przeprowa-
dzane kontrole (audyty) z przebiegt .vqvtw arzania oprogramowania.

r.412
 4.3. Poziomy testow

4.2,7. Ukohczenie testow

CzynnoSci zamykaj4ce testy maj4 miejsce w momencie osi4gniEcia zamierzonego celu,
jakim mo2e by6 np. zakoficzenie B0o/o przypadk6w testowych z wynikiem pozytry-
nym, przekazanie oprogramowania dla grupy u2ytkownik6w, wydanie produktu do
masowej sprzeda|y.
Nale2y sprawdzi6, czy dane w raportach s4 zgodne ze stanem faktycznym (np. anali-
zuj4c rejestr defekt6w). NastEpnie trzeba opracowa6 koricowy raport z wykonanych
przypadk6w testowych i przekazaC go zespolowi projektowemu.

Je2eli wytworzona aplikacja bqdzie udostgpniona nowej grupie u2ytkownik6w, warto

sporz4dzi( instrukcj g korzystania z aplikacii (tzw. instrukcj g u2ytkownikaI manual).
Walne, aby taki dokument zawieral zrzuty ekran6w wraz z opisem krok6w, kt6re
naleLy r,vykona6.

W praktyce czgsto na etapie ukoflczenia test6w organizowane s4 spotkania, na kt6rych

zesp6l podsumowuje swoje dzialania i WZLacza obszary wymagaj4ce poprav{y przy
okazji dalszych prac.

'f^-v
W4,.3. Poziomy testow
r-----r----
Znasz juL og6lne zasady dotycz4ceprzeprowadzania test6w. W poprzednim podrozdziale
om6wiliSmy zalecane przez ISTQB etapy, z kt6rych skladad siE powinien proces testo-
wania. Na kaZdym z tych etaplw wykonuje siE pewne specyficzne dla niego czynno6ci.
Twotz4 one tzw. poziomy test6w.

Poziomy test6w to okreSlone czynnoSci testowe wykonywane na danym etapie wytwa-

rzan ia oprogramowania.

Na ka2dym poziomie test6w okreSla siq kolejno nastgpuj4ce zagadnienia nazwiimy

je obszarami testowania: -
o przedmiot test6w (to, co jest przedmiotem testowania);
. cel (to, co chcemy osi4gn46);
o podstawE test6w (to, na czymbgdziemy testowa6);
o typowe defekty (nieprawidlowoSci, jakich szukamy na danym poziomie);
o preferowane Srodowisko testowe (warunki, jakie musz4 by6 spelnione, aby uryko-
nane testy byly miarodajne).
WaLne jest, aby ustala6 uy2ej wymienione elementy w takiej wla6nie kolejno6ci
-
trudno bgdziewskaza6 cel test6w, je6li nie jesteSmy Swiadomi, co jest ich przedmiotem.
Opr6cz tego musimy zdawa( sobie sprawgzich specyfiki.

143
-- (j
a)
 Rozdzial 4. I Testowanie oprogramowania

W tym podrozdziale pozr,asz cztery poziomy test6w wraz z charakterystycznymi dla

nich cechami:
3 test/ modutowe (testy jednostkowe),
j test/ integracyjne,
j test/ systemowe,
o testY akceptacyjne.

4.3.1. Testy modutowe

Jak sama nazwawskazuje, testy modulowe nie dotycz4calej aplikacji,lecz skupiaj4 siq
na jej poszczeg6lnych elementach, kt6re moZna przetestowa6 oddzielnie, w oderwaniu
od reszty aplikacji na modulach.
-
Pruyklad4.3
Wyobrut sobie pojedyncze wagonypoci4gu. Zanimzostan4podl4czone do lokomotywy,
musz4 zostae sprawdzone . KaLdy taki wagon to modul. Aby poci4g dotarl na czas do
punktu docelowego, wszystkie wagony muszqbyC sprawne.

ewiczenie 4.1
Spr6buj okreSli6 obszary testowania
- przedmiot, cel, podstawe, typowe defekty i pre-
ferowane Srodowisko testowe dla modul6w, kt6rymi sA wagony poci4gu.

W przypadku testowania oprogramowania na poziomie test6w modulowych wymie-

nione wczeSniej obszary testowania zazwyczaj ksztaltuj4 sig nastgpujqco.
Przedmiot: moduly, jednostki, komponentv aplikacji, moduty baz danych.
Cel: wykrycie defekt6w w module, zablokowanie przedostania sig defekt6w do powi4-
zanych modul6w.

Podstawa: kod, projekt szczeg6lowy, specyfikacja techniczna modulu.

Typowe defekty: niepoprawna logika, martwy kod, niepoprawna funkcjonalnoS6.
Preferowane Srodowisko testowe: programistyczne.

Istnieje kilka wypracowanych po-

dejS6 do testr6w modulowych. Obok
prezentuj emy przykladowe pode j Scie
top-down zastosowane do test6w mo-
dulowych (rysunek 4.2).

Rysunek 4.2.
Podejscie typu top-down
()144
' :^. -- do testow modulowych
 4.3. Poziomy testow

Top-down (od g6ry do dolu)

Moduty znajdujqce sig na najwyzszym poziomie sA testowane jako pierwsze. Moduty
bgd4ce w hierarchii poni2ej sA zastgpowane/symulowate przez zaSlepki. Testowane
moduly s4 uZywane do testowania niilej polo2onych komponent6w. Proces testor y
fest kontynuowany do momentu przetestowania komponent6w znaid$4cych sig na
najnilszym poziomie.

4.3.2. Testy ntegracyj nei

Testy integracyjne s4 ukierunkowane na znajdowanie blgd6w w interfejsach na styku

poszczeg6lnych zintegrowanych element6w gl6wnie usterek dotycz4cych wymiany
danych pomiEdzy nimi.
-

Pruyklad.4.4
Kontynuuj4c naszprzykad z poci4giem, mo2emy zaloLyt, LeprzeprowadziliSmy jui testy
pojedynczych modul6w przebiegty prawidlowo. Czy to
- wagon6w. Wszystkie testy
ozrtacz\2epoci4gmoLe ju|rusza(w drogg? OczywiScie nie. Teraz musimy sprawdziC,
czy wagoty s4 trwale ibezpiecznie ze sob4 pol4czone, w szczeg6lno6ci czy pierwszy
z nich jest poprawnie podl4czony do lokomotywy. W ten spos6b badamy
- ich integracjq.

ewiczenie 4.2
Spr6buj okre3li6 obszary testowania umoZliwiaj4ce sprawdzenie integracji modul6w
poci4gu wagon6w.
-
Przyklad 4.5
Innym dobrym przykladem testowania zintegrowanych element6w jest sprawdzanie
poprawnoSci przeprowa dzenia transakcji finansowych.
Co siE dzieje, kiedy wykonujesz przelew bankowy? Z Twoiego konta odejmowana jest
pewna kwota pienigdzy. Ale to nie wszystko.Prueciez ta suma nie moZe tak po prostu
znikn46. Musi sig pojawi6 na innym koncie tym, na kt6re dokonujesz przelewu. Aby
-
mie6 pewnoS6, 2e transakcja zostala przeprowadzona poprawnie, nie wystarczy wigc
sprawdzi6 stan konta, z kt6rego wykonany zostal przelew. Trzeba te2 siE upewni6, 2e
pieni4dze dotarty na wskazany rachunek docelowJr.

Spr6bujmy okreSliC, jak mogtyby v'rygl4dae obszary testowania w przypadku test6w

integracyinych.
Przedmiot: podsystemy, infrastruktura, interfejsy, interfeisy programowania aplikacji
(ang. Application Pro gramming Interface, API).

Cel: budowanie zatfania do interfejs6w, wykrycie blgd6w wystgpui4cych w poszcze-

g6lnych modulach, szczeg6lnie na ich sfyku.

,oqJ._j
 Rozdzial 4. I Testowanie oprogramowania

Podstawa: projekt oprogramowania, przeptywy pracy (tzn. spos6b przeplywu informacji

p omigdzy r o zmaity mi obie ktami bi o r4cymi rdzial w j e j przetw ar zaniu), pr zy p adki uLy -
cia (czyli interakcje z calym systemem lub jego podsystemem, prowadz4ce do pewnego
konkretnego rezultatu), specyfikacja wymagari.
Typowe defekty: blgdywkomunikacjipomigdzy modulami, niezgodno66 interfejs6w,
niepoprawn e b4d2 brakuj 4ce dane.
Preferowane Srodowisko testowe: niewielka iloS6 zintegrowanych modul6w (im mniej,
tym lepiej).

Niepoprawna integracja modul6w aplikacji jest czEsto przyczyn4blgd6w. wystarczy,

2e dane generowane w jednym module nie docieraj4 do drugiego lub docieraj4 dori
znieksztalcone. Co zrobil by zminimalizowa(ryzyko takich usterek? Pomocne w tym
moze by1 stosowanie podstawowych zasad integracii:
o poszczeg6lne moduly/systemy powinny by6 integrowane tylko raz;
o koleino66 i terminy integracji kolejnych element6w powinny by6 udokumentowane;
o nalezy integrowa6 mo2liwie mal4liczbg modul6w w jednym czasie;
. nie powinno sig integrowa6 wiEcej ni2 dw6ch system6w naraz;
o powinno sig d42ye do minimalizacii naklad6w zwi4zanych z budow4 zaslepek
i sterownik6w.

Zaslepka to szkieletowa albo specjalna implementacja modulu uzywana podczas

produkcji lub testowania innego modulu, ktory tq zaslepkg wywoluje bqdz jest w inny
sposob od niej zale2ny.

Sterownik to program lub narzqdzie testowe uzywane do uruchamiania oprogramowa-

nia w celu wykonania zestawu przypadkow testowych.

4.3.3. Testy systemowe

Testy systemowe skupiaj4 sig na caloSciowym dzialaniu systemu z uwzglgdnieniem
kazdej funkc j onalno Sci.

Przyklad 4.6
zbadalismy juL wagony, upewniliSmy sig takze, Le pol4czenia pomiEdzy nimi s4 po-
prawne, trwale i bezpieczne. To jednak wci4| za wczesnie, by wpusci6 do poci4gu
l

()146
-
'i:)
 4.3. Poziomy testow

pasailer6w. Najpierw powinniSmy przeprowadzi( jazdg pr6bn4, by sprawdzie, jakcaty

poci4g zachowuje siE na torach. Jak reaguje nazakrgty, szczeg6lnie tebardziej ostre? Czy
nie ma ryzykawykolejenia? Jaka jest jego droga hamowania przy r6lnychprgdkoSciach?

ewiczenie 4.3
Jak zdefiniowat obszary testowania pod k4tem sprawdzenia poprawno6ci dzialania
poci4gu jako caloSci?

W przypadku test6w systemowych aplikacji obszary testowania mogtyby wygl4da6

nastqpuj4co.
Przedmiot: aplikacje, systemy operacyjne, system podlegaj4cy testowaniu.
Cel: dzialanie calego systemu, walidacja zgodnoSci zachowafi funkcjonalnych i nie-
funkcjonalnych systemu z projektem i specyfikacj4wymagafi, budowanie zaufania do
jakoSci produktu.

Podstawa: specyfikacja wymagari, przypadki uLycia, historyjki u2ytkownika.

Typowe defekty: niepoprawne lub nieoczekiwane zachowania funkcjonalne lub
niefunkcjonalne systemu, problemy z prawidlowym i kompletnym wykonywaniem
calo6ciowych zadai funkcjonalnych, problemy z prawidlowym dzialaniem systemu
w Srodowisku (Srodowiskachf test6w systemo\&ych, niezgodno(;e dzialania systemu
z opisami zawartymi w instrukcji uzytkownika.

Preferowane Srodowisko testowe: w pelni zintegrowane Srodowisko testowe. Powinno

odzwierciedla6 docelowe Srodowisko produkcyjne (takie, w kt6rym u2ytkowniry bgd4
korzystac z systemu).

4.3.4. Testy akceptacyj ne

Testy akceptacyjne, podobnie jak systemowe, skupiaj4 siq na caloSciowym dzialanlt
systemu z uwzglgdnieniem kaLdej funkcjonalnoSci. Odgrywaj4 one deryduj4c4 rolg
w kwestii wdrozenia rozwi4zania na do-
celowe Srodowisko produkcyjne. Testy
Testy atfa
akceptacyjne zostaly podzielone na dwie
W siedzibie
kategorie: alfa i beta (rysunek 4.3). Czyn-
dostawcy
niki wpty.wajqce na podzial to
o mieisce wykonywania test6w,
. Srodowisko test6w,
o profil dzialalno6ci tester6w.
Testowanie akceptacyjne alfa to symu-
lowane lub rzeczywiste testy produkcyj- Rysunek 4.3.
ne przeprowadzane u producenta bez ? odzi al testow akceptacyj nych

147 ()
I

-.7
 Rozdzial 4. I Testowanie oprogramowania

udzialu r,vytw6rc6w oprogramowania. Testy alfaprzeprowadza sig w Srodowisku jak

naibardziei zbliilonym do Srodowiska docelowego, przed wypuszczeniem produktu na
rynek, w chwili gdy jest on ju| dostatecznie stabilny, zazwyczaj w siedzibie producenta
oprogramowania. Testy te wykonywane sA przez potencjalnych u2ytkownik6w, a nie
przez tvv 6rc6w produktu.
Testowanie akceptacyjne beta to testy produkcyjne przeprowadzane w Srodowisku
niezwi4zanym z tw6rcami oprogramowania. Testy beta wykon)'wane s4 gl6wnie w przy-
padku system6w na dtL4skalg, gdy nie ma jednego konkretnego odbiorcy oprogramo-
wania, aliczba ewentualnych Srodowisk docelowych jest duLa.
Wykonywane jestprzez potencjalnych uzytkownik6w, nie przeztr6rc6w produktu.
Z rcgily po pomy6lnym przeprowadzeniu test6w akceptacyjnych beta dochodzi do
akceptac j i (st4d nazw a) pro duktu i frnalizacji zlecenia.

Poni2ej wymieniamy przykladowe obszary testowania oprogramowania dla test6w

akceptacyjnych.
Przedmiot: aplikacje, systemy operacyjne, system podlegaj4cy testowaniu.
Cel: walidacja i weryfikacja zgodno6ci zachowari funkcjonalnych i niefunkcjonalnych
systemu z projektem i specyfikacj4wymagan, budowanie zatfaniado jakoSci produktu.

Podstawa: specyfikacja wymagari, procesy biznesowe, przypadki :uLycra, historyjki

uZytkownika, wymogi prawne.
Typowe defekty: niepoprawnie zaimplementowane reguly biznesowe, niepoprawne
lub nieoczekiwane zachowania funkcjonalne lub niefunkcjonalne systemu, niezgod-
noS6 dzialania systemu z opisami zawartymiw instrukcji u2ytkownika, niedostateczna
wyda j no56, slab e zab ezpieczenia.

Preferowane Srodowisko testowe: w pelni zintegrowane Srodowisko testowe. Powinno

odzwierciedla6 docelowe Srodowisko produkcyjne.
(-N
v 14.4. Typy testow
W poprzednim podrozdziale om6wili6my poziomy testowania zaleine od tego, czego
dotycz4 testy
- podstawowych modul6w (testy modulowe), ich integracji (testy in-
tegraryine), cato6ci aplikacji czy systemu (testy systemowe) czy wreszcie zachowania
systemu w Srodowisku, w kt6rym bEdzie pracowal na co dzieri.- LL zamawiaj4cego
oprogramowanie klienta, na jego komputerach, w po*4czeniu z jego bazami danych
(testy akceptacyjne). Obecnie zajmiemy sig typami test6w.

(';148
 4 4 Typy testow

Typy test6w -vqvzr,aczane sEprzezgrupg dynamicznych czynno6ci testowych, kt6re mai4

wsp6lny okre6lony cel. Do takich cel6w naleZ4 m.in.:
. przetestowanie danej funkcjonalno6ci;
o przetestowanie wybranych wla6ciwoSci, takich iak tLyteczno66, niezawodno66,
przenaszalnoS(;
o wykonanie test6w architektury systemu;
o weryfikacja naprawionych defekt6w (testy potwierdzajEce);
o poszukiwanie niezamierzonych zmian (testy regresji).

Re-test (powtorzenie testu, test potwierdzajqcy) to poMorne wykonanie testu, kt6rego

pierwotne wykonanie wykazalo awarig (nieprawidlowe dzialanie). Celem re{estu jest
sprawdzenie, czy defekt bqdqcy przyczynEawarii zostal usunigty

Testy regresywne (regresji) to ponowne przetestowanie uprzednio testowanego pro-

gramu po dokonaniu w nim modyfikacji, w celu upewnienia siq, ze w wyniku zmian nie
powstaly nowe blgdy,

W poni2szych punktach przedstawimy typy test6w orazvtyialnimy podstawowe tech-

niki, kt6re na co dzieh s4 stosowane w zespolach testor,vych.

4.4.1. Testy funkcjonalne

Testy funkclonalne polegaj4 na wykonaniu test6w systemu, dzigki kt6rym sprawdzamy
zgodnoS6 wykonanej zmiany z v'rymaganiami.

Wymagania funkcjonalne mog4 by6 udokumentowane w:

o specyfikacji wymagari funkcjonalnych,
o historyjkach u2ytkownika,
o przypadkach u2ycia.
Dopuszczalny jest r6wnie2 tryb nieudokumentowany, ale warto zaznaczye,2e spraw-
dza siE on tylko w zespolach o wysoko rozwinigtej umiejgtnoSci komunikacji. Testy
funkcjonalnenalely wykonywa6 na wszystkich poziomach test6w, zttwzglgdnieniem
podstawy i przedmiotu kaZdego z nich. Testy funkcjonalne mog4 by6 wspierane przez
wyspecjalizowane w tym celu narugdzia, umoZliwiaj4ce automatyzacig test6w
wimy w takim przypadku o testach automatycznych.
- m6-

149
 Rozdzial 4, I Testowanie oprogramowania

Testy autom atyczne pozwalai4 skutecznie przyspieszyecykl testowania i poprawi6 ja-

ko66 dostarczanego oprogramowania. Dzigki objqciu autorrraqrzacj4 test6w regresyjnych
dzialy jakoSci s4 w stanie wykazat. wysokie wyniki przy niewielkim obci42eniu'oiOb
testuj4cych. W praktyce ozrtacza to zwigkszenie stopnia pokrycia testami dzigki roz-
szerzeniu attomatyzacji o te czE6ci aplikacji, kt6re mogty nie by6 doktadnie testowane
w poprzednich wersjach.
Automatyzacja test6w pozwala na:
wykonanie szybkich test6w w celu potwierdzenia, 2e nowo dodana funkcjonalno36
nie wywolala blqd6w w niezmienianej czgsci systemu;
wykonanie test6w po naprawieniu blgdu wystgpuj4cego w czasie pracy aplikacji
w Srodowisku testowym;
. sprawdzenie stabilnoS cii dzialania systemu w trybie 2417 (nieprzerwanego dzialania
24 godziny przez 7 dni w tygodniu).

Dlaczego w obecnych czasach tak wiele fnm dEiy do automatyzacji testow?

Kierujq siq kosztami, jakie ponoszq na testy regresji (im wigcel systemow w firmie, tym
bardziej czasochtonne sE testy regresji).

Testy bialoskrzynkowe i czarnoskrzynkowe

W zapewnianiu jakoSci oprogramowania kluczowe znaczenie ma dobre przygotowa-
nie i zaplanowanie test6w. Niezbgdna jest do tego wiedza o technikacfite;t;wania.
Rozr62nienie poni2szych definicji pomo2e ci odpowiednio dopasowa6 testy do prac
w danym projekcie. rnaczej bgd4 planowane prace do projektu, w kt6rym ,rrrri do
dyspozycji peln4 dokumentacjg projektow4 oraz testera z wiedz4techniczn4, a inaczej
w projekcie bez pelnej dokumentacji oraz z testerami biznesowymi (u2pkownikami
-
aplikacji, bezwiedzy na temat tworzenia program6w komputerowych).

Testy czarnoskrzynkowe (funkcjonalne) to technika projektowania przypadkow testo-

wych, w kt6rej te przypadki sq projektowane bez zaglqdania w wewngtrzne mecha-
nizmy dzialania modutu (bez znajomosci kodu) Mogq byc realizowane przez u2yt-
kownikow aplikacji, ktorzy nie muszE posiadac (i nalczqsciej nie posiadaiq) wiedzy
technicznel. Ludzie ci uzytkujqc aplikacjg na co dzien, mogq byc jednak nieocenionym
2rodlem informacji na temat tego, czy rzeczywiscie dziaia ona niezawodnie, czy
lest
intuicyjna i czy mawszystkie potrzebne im funkcje

a'1150
(,)
 4 4 Typy testow

Testy biaioskrzynkowe (strukturalne, oparte na strukturze) to technika projektowania

przypadkow testowych na podstawie analizy siruktury modulu. Najczq6ciej wykony-
wane przez do6wiadczonych lester6w lub programist6w. Wymagajq wiedzy technicz-
nej- znajomo6ci skladni jqzyka, w ktorym napisano program, umiejetnoSci tworzenia
i analizy kodu, obeznania z dobryrni zasadami programistycznymi itp.

4.4.2. Testy niefunkcjonalne

Testy niefunkcjonalne, jak sama r'azwa sugeruje, maj4zazadanie sprawdzi6 wszystkie
atrybuty niefunkc j on alne, czyli:
o wydajno66 (testy wydajno6ci, obci42eniowe i przeci42ai4ce),
. v|ytecznofie,
o niezawodnoS6,
o efektywnoS6, Testowanie nief unkcjonal ne mozna
. przenaszalno66, przeprowadzac na wszystkich po-
ziomach testow.
o zdolnoSC wprowadzania zmian
w przyszlo6ci.
W tabeli 4.2 znajdtje sig zestawienie cech test6w odpowiadaj 4cych za sprawdzenie
atrybutu wydajno6ci.
Tabela 4.2. Cechy testow wydajnosciowych, przeciqzeniowych i obciqzeniowych
Testy wydajno6ciowe Testy przeci42eniowe Testy obci42eniowe

. Badanie czasu od- . Badanie zachowania . Badanie zachowania apli-

powiedzi krytycz- aplikacji w przypadku kacjt pr zy j ednoczesnym
nych dla biznesu jednoczesnego korzystan ia korzystaniu z niei przez
funkcli systemu z niei przez zbyt wielu dr24, ale dopuszczaln4
. Por6wnywanie uzytkorvnik6w, z urykoruy - (w przeciwieirstwie do
czasu odpowiedzi staniem zbyt wielu danych, test6w przeci42eniowrych)
przejScia jednego przy malej4cych zasobach liczbg u2ytkownik6w, przy
i wielu uzytkowni- systemowych duzej liczbie przeprowadza-
k6w przez aplikacjg r Test. czy system ,,zawie- nych transakcji czy operacji
. Kr)rterium test6w dzie" w oczekiwany spos6b . Utrzymanie takiego stanu
jest sprawdzenie, . Wyszukiwaniedefekt6w przez okreSlony w scena-
czy poszczeg6lne w aplikacji dzialaj4cej riuszu czas
akcje uykonl.wane w trybie awaryjnym . Sprawdzenie, iak wiele
s4 ptzez aplikacjg . Sprawdzanie konsekwencji zapytan (ang. requests) iest
w akceptowalnym utraty danych po awarii w stanie obsluzy6 system
czasie r,lywolane j nadmiernym w okre6lonym przedziale
obci4zeniem czasu

151
c
.)
 Sozdzial 4. I Testowanie oprogramowania
a-}
rV14,5. Dobre praktyki w zglaszaniu btgdow
---T_----

za pomoca narzQdzi
Jednym z cel6w testowania jest znajdowanie defekt6w (btEd6w). Kluczowy iest spos6b
ich zgloszenia.Je2eli mamy do dyspozycji dedykowanenarugdzie, to naszym obowi4z-
kiem jest dbanie o to, aby wszystkie zgloszenia byly rejestrowane. Dzigki pelnemu
rejestrowi btEd6w mozemy mieruye jakoS6 vqvtvraruanego oprogramowania.

Defekt (blqd) jest tez czasem nazywany usterkq i jest jednym z najczqsciej uzywanych
przez testera pojqi w codziennej pracy. Defekt to wada modulu lub systemu, kt6ra
moze spowodowac, ze modul lub system nie wykona zakladanej czynnoSci. Ta wada
najczq6ciejwynika z popelnionelprzez programistg pomylki polegajqcej np na uzyciu
niepoprawnego polecenia lub wyrazenia bqdz niewla6ciwej definicji danych. Ostatecz-
nym skutkiem jest awaria oprogramowania (rysunek 4 4)

Rysunek 4.4. Mechanizm powstawania awarii

Oto obszary, w kt6rych najczqSciel mozemy znale2cblqdy

. skomplikowany kod, rozbudowana funkcjonalno6c (np. wykorzystywana w kilku
systemach);
. nowo wprowadzone zmiany (regresja),
. zmiany, podczas wprowadzania ktorych programista pracowal pod preslq czasu.

Przy rejestrowaniu zgloszeniaka2de narzgdzie wvmaga r62nego zestawu informacji.

W zgloszeniu takim powinny si9 znalele:
o nazwa powinna w kr6tki i zwigzty spos6b, haslowo informowa6 o tym, czego
-
dotyczy b14d;
o unikatony identyfikator (ID) przydzielany przez system;
o -
opis problemu powinien zawierat dokladny zapis (krok po kroku) wykonywanych
-
operacji, kt6re spowodowaly bl4d, oraz opis blgdnego dzialania skonfrontowany
z poprawnym, oczekiwanym zachowanieml
. zalEcznlki zrzut ekranu, arkusz, dokument, Iink itp.;
-
o login b4d2 imig i nazwisko osoby zglaszai4cel;

:152
 4.5. Dobre praktyki w zglaszaniu blqdow za pomocq narzqdzi

o priorytet jak jak

- informuj4cy o tym, wazny bl4d i szybko powinien zostae
jest
naprawiony;
. jaki
waga
blEd;
- informuj 4ca o tym, wp\.w na inne funkcjonalno6ci ma raportowany
o Srodowisko, w kt6rym wykryto bl4d (przegl4darka, rola uzltkownika, link do
Srodowiska testowego).
W dalszej czgScirozdzialuzostaty przedstawionetrzy narzgdzia, kt6re s4 wykorzysty-
wane w komercyjnych projektach . Kaide z nich jest caly czas rozbudo\M,-wane i wzbo-
gacane o kolejne funkcje. Om6wimy ich istotne cechy pod k4tem zglaszania b1gd6w.

Jira
Jira jest obecnie najpopularniejszym narzgdziemwykorzystywanym komercyjnie. Swoj4
popularnoS6 zawdzigcza przede wszystkim elastycznoSci oraz molliwo6ci dostosowania
ekran6w do potrzeb projektu. Producent programu opracowuje i udostgpnia nabie24co
wiele dodatk6w, kt6re moLna w pelni integrowaC z tym narzgdziem.
Na rysunku 4.5 wida6 przyklad zadania do realizacji zaplanowanego za pomoc4 na-
rzEdzia Jira.

Opslis!* 3*se'

:iif wlivrternn* r51y rd.,hsiri ,,4a{c,r-*,

:9.i?llr'"
St@
i!&trliiail:l:ll:il::::tial:iilri::lr:l
!w8!ql@e&fe,rl trq,:l:t..tr

.@W@!@

@ryr'@
M@.*...
{M!.&'.&&*l@
r@t@'&

'.!e.:,de.@ry

,. -. ..

Rysunek 4.5. Widok na zadania w Jira

Najpopularniejsze pola, z jakimi mozesz sig spotka6 wJira podczas zglaszania blgdu, to:
o Proiect r,azwa projektu w Jira czasem sig zdarua,2e mamy kilka do wyboru,
-
jeSIi pracujemy w paru projektach- jednoczeSnie;
o Issue Type typ zgloszenia, np. Bug Imprctvement zgloszenie dotycz4ce
- -
-bl4d, zgloszenie dotycz4ce
nowych zmian w systemie, Documentation tworzenia nowei
dokumentacji w projekcie;
-

rss-{:-*'
L;
 Rozdzial 4. I Testowanie oprogramowania

. Summary tytut zgloszenia;

. -
Priortry priorytet; rczr62niamy nastgpui4ce priorytety zgloszeh:
-
" Blocker - np. aplikacja nie dziata, blokuje sig kluczowy proces i nie ma sposobu
na obejScie problemu;
> Crtfical jest
- np. kluczowy proces nie dziala, ale obej6cie (nieergonomiczne)
problemu ze wsparciem I!
>' Maior
- np. bl4d powodui4cy spowolnienie procesu, a
jednocze6nie bl4d, dla
kt6rego istnieje obejScie;
>> Minor kt6ry nie ma wptywu na dzialanie procesu biznesowego, ale
- np. bt4d,
jego naprawa poprawi ergonomig pracy;
,> Trivial np. malo znacz4cy, latr,uy do naprawienia bl4d, iak zly napis lub lite-
16wka;
-
. Affect/Fix Version ozrTaczenie wersji systemu, w kt6rej znaleziono bl4d, lub tej,
w kt6rej zadanie ma- zostae zrealizowane;
. Assignee
- pole okreSlai4ce osobg, kt6rawma
uzupelnione jest warto6ci4 Automatic
sig zai4e realizaci4zadania (domy6lnie
takim przypadku zadanie automafycznie
-
zostanie przypisane do osoby wskazanej w konfiguracji projektu w Jira; czgsto jest
to Prof ect Owner);
. Enuironmenf
- to pole wskazuje, w kt6rym Srodowisku testowym zaobserwowane
zostalo zdar zenie, kt6rego dotyczy zgloszenie;
o Description pole pozwalai4ce na tmieszczenie w nim pelnego opisu zgloszenia;
c -
Original Estimate
o - umoZliwia okreSlenie czasu na realizacjg zadania;
Attachment daje mo2liwo56 dodania zal4cznik6w do zgloszenia.
-
Bugzilla
Kolejne warte wspomnienia narzgdzieto Bugzilla. Pomimo doS6 prostego interfejsu wci42
chgtnie sig je wykorzystuje w projektach. Jest darmowym i otwartym oprogramowaniem
slu24cym do raportowania blgd6w. Mo2e by6 stosowane do aplikacji komercyjnych.
Poni2ej zamieszczamy zrzut ekranu prezen$4cy przykladowy blqd zgloszony w Bugzilli
(rysunek 4.6). Nie ma potrzeby zaglgbiat. siE w szczeg6ty na nim widoczne. Wigkszo66
p6l wystgpuje r6wnie2 w Jira i zostala juZ om6wiona.
Podczas raportowania blgd6w mamy mo21iwo36 zglaszaniawlasnych sugestii zwi4zanych
z rozwojem oprogramowania (ang. enhancemenf ulepszenia i porady).
-

' )154
I
 4.5. Dobre praktyki w zgtaszaniu bledo@

ffw
W#a;&
:!: r':a Y{ebExlension's page {toes nol iave favicol

, Cdlgrrias
.,.,i:,fi ir.![!1.nj:r::,
1i::': * le{..1
lairtaaBii {ii.r.Jil -
li.i.iii, P.l i:i:.iir: irrti:i
'iar:ai:: fTErar:'
5ir:i:r:.r.i ill !r1 rr.l

' rradrg
:.1ri!: lrii:af{lil!:l .-. t.;rklrg aLEg!
lil.:,11r-.
tlaf:la r:

!!ifir.-i.iii:
i!t;i:riir:t:!

Rysunek 4.6. Widok na szczegoly zadania w Bugzilli

Trello
ostatnie z prezettowanych narugdzi to Trello. Jest ,,najmlodszym" narzgdziem z tej
grupy. Mabardzo szerokie zastosowanie i co najwa2niejsze uZytkowniko-
wi calkowit4 dowolno66. Nie ma zdefiniowanych p6I. Niezbgdne - daje
informacje moZna
wprowadza6 na dodawanych w razie potrzeby kartach. Wystarczy zna( zbi6r dobrych
praktyk, aby narzgdzie w niczym nie odbiegalo od Jira.
Poni2ei zamieszczamyzrzutekranuaplikacjiTrello(rysunek4.7).Poniewa2niewymusza
ona na u2ytkowniku wypelnienia okreSlonych p6l, caly ciglar przekazartia informacji
o blgdzie spoczywa na zglaszaj4cym.

Rysunek 4.7. Widok nazadania w aplikacji Trello

155 r^
3
 Rozdztal 4. I Testowanie oprogramowania
/--\
\ l4.Ci. Zadania
-_-T-l--

Zadanie 4.1
Cz93CI (10 min)

Wyobral sobie, 2e przydzielono CiE do nowego projektu. Twoim zadaniem bgdzie

przetestowanie nowej poczty elektronicznej. Wypisz podstawowe funkcjonalnoSci,
kt6re Twoim zdaniem mtszEzostae sprawdzone.
CzES6II (5 min)

Poinformowano Cig, 2e ze wzglgdu na przedltLaj4cy sig czas wltwarzania oprogra-

mowania, aby nie przekroczye terminu oddania aplikacji klientowi, harmonogram
test6w zostanie znacznie skr6cony. Zmusza Cig to do r,vybrania tylko trzech kluczowych
funkcjonalno6ci, kt6re bgd4 testowane. Wska2 trzy v,ybrane funkcjonalno6ci programu
pocztowego.

Zadanie 4.2
Wymieri siedem zasad testowania i om6w dwie z nich bardziej szczeg6lowo.

Zadanie 4.3
Wymieri grupy czynnoici, z kt6rych sklada sig proces testowy.

Zadanie 4.4
Z czego sklada siq plan test6w?

Zadanie 4.5
Z czego sklada sig przypadek testoufr?

Zadanie 4.6
Wska2 r62nice pomigdzy testami funkcjonalnymi a niefunkcjonalnymi.

zadafle 4./
Jakie s4 podstawowe cele test6w akceptaryjnych?

Zadanie 4.8
Podaj r6Lnic9 pomigdzy testami regresji a re-testem.

Zadani,e 4.9
Jaka jest r62nica pomigdzy testami czarnoskrzynkowymi a bialoskrzynkowymi?

i)156
*"T:-
 4.6. Zadania

Zadanie 4.1O
Czym r62ni4 sig testy przeci42eniowe od test6w obci42eniowych?

Zadanie 4.11
Podaj definicjg defektu.

Zadanie 4.12
Jakie informacje powinno zawierae poprawne zgloszenie btgdu?

()
i

157
c,
 Rozdziat 4. I Testowanie oprogramowania

a--r 158
lai
 Tworzenie:
'dokurnenta CJ
._._...,.., .!

testowej
Dokumentaciawytworzona podczas procesu testowego jest niezbgdna do ewentualnego
odtlvorzenia danego etapu test6w czy przekazaniawiedzy nowym czlonkom zespolu.
Stanowi te2 swego rodzajtt Srodek komunikacji nie zawsze caly zesp6l projektowy
przebywa w jednej siedzibie. Wszelkie ustalenia-i zmiany s4 umieszczane we wskaza-
nych lokalizacjach (takich jak miejsce na dysku firmowym lub dedykowanenarzgdzie,
do kt6rego prowadzi wskazany link). Dokumentacja powinna by6 tworzona wedtug
wzorc6w przyjgtych i obowi4zuj4cych w danej organizacji.

Przyklad 5.1
wyobrui sobie, 2e przystgpujesz do projektu w trakcie jego trwania f ako tester b4dZ
programista. Nikt nie ma czasu wprowadza6 Cig w kahdy aspekt czynnosci, kt6re bg-
dziesz wykonywa6. Twoim podstawor*ym lr6dlemwiedzy bgdzie wszelkiego rodzaju
dokumentacja. To dziqki niej bqdziesz wiedzie(' jak zglasza( blgdy oraz do jakich
narzgdzi bqdziesz potrzebowa6 dostgp6w.
W tym rozdziale poznasz przykladow4 dokumentacjg testow4 , zasady jej tworzenia,
jej budowg oraz naiwalniejsze elementy.

PIan testow
Jak juz zostalo powiedziane w rozdziale 4., plan test6w (ang. test plan) iest tworzony
na etapie planowania procesu testowego (ang. test process).
Ten dokument iest aktywny przez caly czas trwania projektu. Powinien bye kald.orazo-
wo modyfikowany i uzupelniany o nowe informacje. Wszystkie osoby zaanga2owane
w projekt musz4mie6 dostgp do dokumentu.

159 i-_,
(..:j
Rozdzial 5. I Tworzenie dokumentacji testowej

Nie nalezy siq spodziewac,2e ze wzglqdu na pewien staly szkielet plan test6w bqdzie
wyglqdal tak samo w roznych organizacjach czy nawet w roznych projektach w obrq-
bie jednej organizacji. Przeciwnie, zazwyczaj da siq wskazac istotne niejednolitoSci
w konstrukcli planu. Wynika to z odmiennego podej6cia do projekt6w, specyficznych
wymog6w prawnych dla niektorych branz, a nawet ze struktury organizacyjnel firmy

PoniZej zaprezefitowano schemat przykladowego planu test6w, kt6ry moZe by6 wyko-
ruystry any w komercyjnych projektach.
Plan test6w projektu [Nazwa]
I Cel dokumentu
W tym punkcie nale|y opisa6 cel stworzenia dokumentu, a tak2e wskaza6 projekt,
kt6rego dotyczy.
il Przedmiot i zakres
Nale2y wskaza6, co jest celem test6w, oraz wymieni6 elemenry kt6re bgd4 testowane.
W ty- punkcie mo2e siE znaLeil( np. opis informuj4cy o tym, 2e zostan4 sprawdzone
interfejsy i nowe funkcjonalno6ci, procesy biznesowe; moLnatakLe zamieSci6 informa-
cjg o tym, czy przeprcwadzone bqd4 testy regresji (je6li tak, naleLy poda6 ich zakres).
m Terminologia
Zawiera v,rykaz definicji pojgl rtlytych przy tworzeniu dokumentu, np.:

Smoke testy (nazywane rowniez testami dymnymi) podzbior wszystkich zdefiniowa-

-
nych/zaplanowanych przypadkow testowych, ktore pokrywaiq giowne funkcjonalno6ci
moduiu lub systemu. Majq na celu potwierdzenie,ze dztalalqkluczowe funkcjonalnoSci
programu, bez zaglgbiania sig w szczegoly.
Testy eksploracyjne (ang. exploratlon tesfs) testy oprogramowania wykonywane
-
bez wykorzystania przypadkow testowych. Majq jasno zdefiniowany obszar weryfika-
cyjny oraz truvalq okreSlony kwant czasu (np. od jednej do czterech godzin). Sq uzu-
petnieniem testow opartych na scenariuszach, natomiast nie mogq ich zasiqpowac,
Raport o postqpie testow (ang. tesl progress report) dokument zawierajqcy pod-
-
sumowanie aktyrruno6ci testowych i osiqgniqtych wynikow tworzony regularnie, by za-
raportowac postqp prac testowych w stosunku do zalozen, atak2e przedstawiajqcy
ryzyka i alternatywy wymagajqce podjgcia decyzli zarzqdczych,

,160
 5.1. Plan testow

Zwro6 uwagg, ze czgsto osoby biorqce udziat w projekcie nie majq wiedzy z zakresu
wytwarzania oprogramowania, dlatego warto tlumaczyc nawet te pojgcia ktore dla Cie-
bie sq oczywiste.
Zachowal kolelnoSc alfabetycznq dziqki temu osoba czylajqca dokumentacjq szyb-
-
ciel odnajdzie poszukiwany termin

IV Obowi4zki, odpowiedzialno66 i uprawnienia

Zawiera opis 16l wraz z zakresem obowi4zk6w przydzielorrych do os6b, kt6re bior4
tdzial w tworzeniu specyfi kac j i funkc j onaln ej zrrriany informatyczne j.
W ramach poszczeg6lnych etap6w test6w w naszym przykladowym planie do rcalizacii
zadafiprzydzielone zostaly osoby wymienione w tabeli 5.1.
Tabela 5,1 . Przydzial osob do realizacji testow na poszczegolnych etapach
ID Imig i nazwisko Rola/odpowiedzialnoSe/ zakres zadari

1. Anna Anonimowa Project manager zarzqdzanie projektem, kontakt

-
z dostawc4 zewngtrznym oprogramowania

2. Krzysztof Null Analityk biznesowy (.ang. business analyst) anali-

za b1gd6w, przygoto\vanie danych do test6w
-
3. Jan Statystyczny Koordynator test6w (arlg. test coordinator') zatzq-
-
dzaoie testami, informowanie zespolu o niedostgp-
noSci Srodowiska

V Opis postgpowania
1. Informacie wstgpne
a) Dokumenty powi4zane
W tabeli 5.2 naleLy wskaza6 wszystkie dokumenty, kt6re
s4 zwi4zane z projektem
(harmonogram, zestawienie wyma gafl dotycz4cych danych, zestawienie wymagari
dotycz4cych Srodowiska itp.).

Tabela 5.2. Wykaz dokumentow dotyczqcych projektu

Id Dokument Data ostatniej Wersja Autor dokumentu
(symbol, nazwa) modyfikacii dokumentu
1. Specyfikacja wymagan 01.03.2020 v.2 Anna Anonimowa
funkcjonalnych

Z. Plik z danymi do importu 07.03.2020 v.3 Krzysztof Null

3. Harmonogram prac 09.03.2020 v.4 Anna Anonimora,,a

161 n
(_l
 Rozdzial 5. I Tworzenie'dokumentacji testowej

b)
Zalo\enia i ograniczenia
Nale2y wymieni6, jakie typy test6w bgd4 przeprowadzone, np. weryfikacji gotowoSci
kodu, konfiguracji oprogramowania, migracji danych, regresji, akceptacyjne, po wdro-
zeniu na produkcjg (sruoke testy).Trzeba tez opisa6, jak bgd4 realizowane zaleLnoSci
od innych projekt6w.
Nale2y takze wskaza6 na powi4zania z komponentami, kt6re mog4 mie6 wptyw na
testowany projekt, rlp. poprzez wsp6lne Srodowisko testowe.
o Zakres test6w
Nalezy wskaza6 zakres test6w zgodnie z dokumentacj4 projektow4 i zaloileniami pro-
jektu.
o Rodzaie przeprowadzanych test6w (przyktadowe tabela 5.3).
-
Tabela 5.3. Rodzaje przeprowadzanych testow
Rodzaj test6w Planowane Uwagi
(TAKiNIE)

Smoke testy TAK Zespoty operacyjne wyznaczyly

trzy osoby, kt6re przeprowadz4
testy w siedzibie firmy

Testy jednostkowe NIE Testy bgd4 wykonane po stronie

tests)
(ang. unit dostawcy oprogramowania

Testy akceptacyine TAK

(ang. user occeptdnce fesfs, UAI)

Testy funkcjonalne TAK

(ang. functional tests)

Testy integracyjne TAK Nale2y skontaktowae sig z dostaw-

tests)
(.ang. integration c4 oprogramowania i ustali6 datE
test6w

Testy regresywne TAK

(aog. regression tests)

Testy systemor,r,'e TAK

(ang. systern tests)

c) Dokumentacja realizowania test6w

Potwierdzenia wynik6w test6w zostan4 umieszczone w narzgdziu Testlink w postaci
zrzut6w ekran6w ilustruj4cych poszczeg6lne kroki scenariusza uzupelnionych tam,
gdzie to moZliwe, o identyfikator odpowiadaj4cy wykonywanemu testowi (numer za-
m6wienia, identy{ikator klienta itp.). Do kazdego scenariusza zakoirczonego ze statusem
Zoblokowany (ang. blocked) zostanie dol4czony e-mail lub inny dokument uzasadniaj4cy
wykluczenie scenariusza z zakresu test6w.

o162
li'-r
 5.1. PIan testow

d) Potrzeby szkoleniowe
Przykladowowa$ztaly z architektami i kierownikami projekt6w. Dotyczy to wszystkich
projekt6w w ramach Scie2ki wdro2eniowej. Opr6cztego warto przeprowadzi(warsztaty
dla pracownik6w obslugi klienta, na kt6rych to wa$ztatach zaprezerrtujemy im nowe
funkcje aplikacji, nowe ekrany itp.
e)Kryteria rczpoczEcia, zawieszenia i zakoiczenia test6w
Nale2y opisad kryteria rozpoczgcia, zawieszenia i zakoiczenia test6w.

Przyklad.5.2
Kryteria tozpoczgcia test6w: przygotowane Srodowisko testowe, zanonimizow an a baza
danych (dane osobowe s4 przeksztalcone, niemo2liwe do odczytu pierwotnej wartoSci).
Kryteria zawieszenia test6w: niedostqpnoS6 Srodowiska testowego przypadaj4ca na
okres dfu2szy ni2 jeden dziehroboczy, brak osoby do wykonania test6w akceptacyjnych.

Kryteria zakofrczenia test6w: brak blgd6w krytycznych, wykonanie 1O0o/o przypadk6w

testowych.
2. Ryzyka
Nale2y opisa6 potencjalne ryzyka:
a) projektowe niedostgpnoS6 Srodowiska, op6Znienie realizacjitest6w wynika-
- dzialai zaplanowanych w harmonogramie (np.
j4ce z nieterminowej realizacji
niedostarczony ta czas kod aplikacji), zlej jako6ci dane testowe, niedostEp-
no66 wynikaj4ca z urlop6w, zwolnieri itp. os6b kluczowych dla test6w;
- -
b) produktowe zlej jakoSci kod, nieaktualna dokumentacja, luki analityczne,
-
zmieniaj4ce sig wymagania itp.;
c) bezpieczetistwo informacii
- wyciek
do panelu klienta bez podania
danych osobowych, mo2liwo56 wejScia
loginu i hasla, brak autoryzacji dostgpu do
danych wraZliwych.
3. Wymagania dotyczqce danych, Srodowiska inarzgdzi testowJzch
a) wymagania dotycz4ce danych testowych dane klient6w posiadaj4rychprzy-
-
najmniej dwa aktywne produkry dane zanonimizowane itp.;
b) wyrnagania dotycz4ce Srodowiska testowego
- Srodowisko powinno bye zin-
tegrowane z systemem gl6wnym, baza danych musi by6 odSwie2ona na dziefi
02.03.2020, wymagana mo2liwo56 zmiany daty systemowej itp.;
c) wymagania dotycz4ce narzgdzi testowych i Testlink dla
- dostEpno66 Jira
os6b wyznaczonych do test6w, generator danych itp.
4. Harmonogram test6w (tabela 5.4)

1 63 i-r
 Rozdzial 5. I Tworzenie dokumentacji testowej

Tabela 5.4. Harmonogram testow

Nazwa zad,ania Data rozpoczqcia Data zakoncze- Odpowiedzialny
nia
akcepta- 10.03.2020
Testy 20.03.2020 Jan Statystyczny
-
cyjne koordynator test6w

Smoke testy 22.03.2020 22.03.2020 Anna Anonimowa

proiect manager
-
5. Raportowanie i komunikacla
a) Produkty dostarczane w wyniku test6w (testalia) tabela 5.5
-
Tabela 5.5. Produkty testow i osoby za nie odpowiedzialne
Nazwa produktu Osoba odpowiedzialna

Raport z test6wakceptacylnych Koordynator test6w (Jan Statystyczny)

Raport defekt6w (ang. defect report) Koordynator test6w (lan Statystyczny)

b) Plan raportowania i komunikacji

Nale2y opisa6 spos6b raportowania oraz ustalony proces komunikacji, np. ,,Rea-
lizacja test6w bgdzie nabie24co raportowana w narzgdziu Testlink".
cl Zesp6l projektowy (tabela 5.5)
Tabela 5.6. Sklad zespolu projektowego
ID ImiE i nazwisko Rola Spos6b komunikacji

1. Anna Prolect Poczta elektroniczna, telekonferencia MS Teams

Anonimowa --------'o--
manager
Cykliczne spotkania (ka2da Sroda o godzinie
10:00)

2. Krzysztof Null Anaiityk Poczta elektroniczna, telekonferencja MS Teams

biznesowv
' Cykliczne spotkania (ka2da Sroda o godzinie
10:00)

3. Jan Statystyczny Koordynator Poczta elektroniczna, telekonferencia MS Teams

testow
Cykliczne spotkania (kazda Sroda o godzinie
10:00)

4. Woiciech Defekt Programista Poczta elektroniczna, telekonferencja MS Teams

Cykliczne spotkania (ka2da 6roda o godzinie

10:00)

-11q4
r-)
 5.2. Scenariusze testowe

6. Zalqcznlki (tabela 5.7)

Tabela 5.7. ZalEczniki do planu testow
Id Dokument (symbol, nazwa) Odno6nik do Data ostatniej Wersja
rozdziatu planu modyfikacii dokumentu
1. Przypadki testowe zapisane 5.2 02.03.2020 v.2
w pliku .x/s

/l
5.2. Scenariusze testowe
V-- r---
T
W dobie ci4glego monitorowania r.tykony.wanej pracy oraz pomiaru jej jakoSci scena-
riusze testowe s4 pewnego rodzaju dowodem, ze podczas test6w system zachowal sig
w okreSlony spos6b. Tawiedza jest niezbgdna dla wielu grup:
o programist6w,
o tester6w,
. zamawiai4cych rozwi4zania systemowe.
Na pocz4tku wyja6nimy, czym iest scenariusz testouy, a nastgpnie przedstawimy rolnic1
pomigdzy scenariuszem testowym a przypadkiem testowym.

Scenariusz testowy (ang. test scenarro) zbior przypadkow testowych, czyli krokow
-
sluzqcych do sprawdzenia danel funkcjonalnosci systemu.

Zaprezentowany na rysunku 5.1, przyklad obrazr\e budowg scenariusza testowego dla

funkcjonalno6ci znanej kaZdemu z nas.

Logowanie przy u2yciu

blqdnych danych

Logowanie przy u2yciu

poprawnych danych

Rysunek 5.1. Schemat budowy scenariusza testowego

Przyklad 5.3
FunkcjonalnoS6: logowanie do systemu.
W tej funkcjonalno3ci naleLy utworzyt. osobne przypadki dla poprawnego i niepopraw-
nego logowania (tzn. przy :uLycitt poprawnych i blgdnych danych).

165 ,
 Rozdzial 5. I Tworzenie dokumentacji teslowej

Scenariusze testowe mog4bya wykonywane pruez osoby, kt6re nie miaty stycznoSci
zprac4w dziale IT. Podczas test6w akceptaryjnych czgsto o wykonanie pewnych czyn-
no6ci testowych proszone s4 osoby pracuj4ce w dzialach operacyjnych (np. obsluga
klienta, sprzedaL),kt6re nie maj4wiedzy o projekcie ani umiejEtno6ci technicznych. Im
dokladnieiszy scenariusz, tym mniej pytafi od takich os6b. Je2eli testy bgd4 wykonylvane
przez osoby zwewn4trz organizacji, mo2emy sobie pozwoli(. na przypadki wysokiego
poziomu. Zaoszczgdzamy wtedy czasfla szczeg6lowe rozpisl..wanie ka2dego z krok6w.

Przyklad 5.4
w tabeli 5.8 prezentuiemy przypadki niskiego i wysokiego poziomu dla naszego przy-
kladu dotyc z4cego logowania.
Tabela 5.8. Przypadki niskiego iwysokiego poziomu

Tytul Logowanie przy u|ycitt Poprawne logowanie

poprawnych danych
Cel testu Celem testu iest sprawdzenie Weryfikacia mechanizmu
poprawno6ci dzialania logowania
mechanizmu logowania

Warunki Podano prawidlowy login 1. Podany jest prawidlowy login

wstgpne i haslo dla u2ytkownika i haslo dla u2ytkownika
testowego testowego
Aplikacja zostala uruchomiona 2. Aplikacja zostata uruchomiona
i znajdujemy sig na ekranie i znajdujemy sig na ekranie
Iogowania logowania
Kroki do 1. WprowadZ nieprawidlowy login Zalogui siE do systemu (zastosuj
wykonania i prawidlowe haslo, po czym r6zne warianty prawidlowych/
kliknil Zaloguj nieprawidlowych danych)
WprowadZ prawidloltlz login
i nie wprowadzaj hasta; kliknij
Zalognj
J. WprowadZ prawidiowy login
i nieprawidlowe haslo, po czym
kliknli Zaloguj
4. WprowadZ prawidlowy login
i prawidlowe haslo, po czym
kllknii Zaloguj

iJroo
r)
 5.2. Scenariusze testowe

Nazwa Przypadek niskiego poziomu Przypadek wysokiego poziomu

Oczekiwany 1. Poiawia siE komunikat 1. Blgdny login, iogowanie nie

wynik o wprowadzonym powiodlo siE
nieistniej4cym Ioginie,
wyS',tietlana jest takze proSba
2. Logowanie nie powiodlo siq.
WprowadZ haslo
o ponowne wpisanie loginu

2. Pojawia siE komunikat

3. BlEdne harlo, logowanie nie
powiodlo sig
informuj4cy o brakuj4cych
danych; po lego wy6wietleniu 4. Nastgpuje prawidlowe
powinno nast4pi6 przejScie do zalogowanie do aplikacii
pola, w kt6rym wprowadza siq
haslo

3. Pojawia siE komunikat

informuj4cy o podaniu
nieprawidlowego hasla, zostaje
tak2e wy6wietlona pro6ba
o ponowne wpisanie hasta

4. Uzytkownik zostaje zalogowany

do systemu

Srodowisko Pr6by logowania nalezy r,lykona6 w: Pr6by logowania nale|y wykonae

. w Srodowiskach dedykowanych
Srodowisko Web przegl4darki
-
Chrome, Edge, Opera
aplikacji
. Srodowisko mobilne Android,
ios -

Warto zwr6cie uwage nato, ze pruypadki \ ysokiego poziomu s4bardziej og6lne iw prze-
ciwieristwie do przypadk6w niskiego poziomu nie wymieniaj4szczeg6lowo wszystkich
sytuacji, jakie mog4 nast4pi6 podczas pr6by logowania. Jest to spowodowane tym,
2e takie przypadki s4 realizowane przez osoby, kt6re posiadaj4 niezbgdn4 wiedzg i s4
Swiadome czynnoSci, jakie trzeba przeprowadzi{ aby pomySlnie zakoiczye rcsty.

5,2.1 . Tworzenie scenariuszy testowych

w aplikacji Testlink instrukcja uzytkownika
-
W tym punkcie zostanie zaprezentowane krok po kroku, jaktworzye scenariusze w apli-
kacji Testlink. Oczyr,vi6cie zalelnie od u2ywanej wersji apli'kacji ekrany mog4 sig
-
nieznacznie r6zniC od tych, kt6re tu zamieszczono; jednak -
kluczowe pola bgd4 takie
same. Opis bqdzie mie6 charakter instrukcji uZytkownika. W takiej formie czEsto pre-
zentuje sig docelowej grupie u2ytkownik6w now4 funkcjonalnoS6 lub cal4 aplikacjg.

167 ,

i-
Rozdzial 5. I Tworzenie dokumentacji testowej

5.2.1.1. Zaloguj siq do aplikacji

Po uruchomieniu aplikacji
musimy mie6 j4 wcze6niej zainstalowanE) pojawi
Testlink (oczl,wiScie t Testlin k
sig ekran logowania (widoczny na rysunku 5.2).
Aby zalogowa6 siE do niej,nalely poda6login oraz
haslo u2ytkownika utworzone wcze6niej przez ad-
ministratora.

ZarEj€slruj sie Zat:,Optnaal8d{aBi h}sla?

5.2.1.2. Menu gfowne
U2ytkownik po zalogowaniu sig zostanie przenie- Rysunek 5.2.
siony na strong g16wn4 narzgdzia Testlink (rysu- Ekran logowania do aplikacji
nek 5.3). Testlink

Zmied role uiytkowrikdw AlMrypuf,l&:

-i*q X

ZazEdzanie 5towami kluczowymi *f..*pt .V:." irgf dnj

_.- ,

ZaBadzani€ platfoma
TaE4dzas je plaraDri test{iw
ZaEAdzari€ spf z€ten testowlm
ZauEdknie e,?daniam;

DcCaj / $ytuj pElpadki tertsse

Wykonaj testy
Szukaj pzllPadk6*r' t"tto1ll:l] Rapolty i metryk; tstriw
.....
PE/padki testove utw.zone pEez
Staty:tyk og6tne
u2!"tkswnikdw

DcCaj / u!u,i przypadkj z pla*u

tesi{iw
PrrJdziet uykcnywanie testdw
Rysunek 5.3. Menu giowne aplikacji Testlink
Okno sklad a sig z czterech gl6wnych czgsci:
. menu g6rne (1),
o menu lewe (2),
o menu prawe (3),
. panel u2ytkownika (4).
opcje wyswietlane w menu g6rnym (1) uzale2nione s4 od praw przydzielonych zalogo-
wanemu uZytkownikowi, jednak dostgpne niezale2nie od wybranej sekcji i projektu.
sA
Mo2emy tam zobaczyC aktualnie zalogowanego uzytkownika, przyciski IJstdwienia
konto i Wylogul. Poni2ej (z prawej strony) wy6wietlana jest lista z aktualnie wybranym
proiektem testowym (na rysunku jest to Testowy). Po kliknigciu na strzalce
-tst:Projekt
z prawej strony listy rozwinie sig pasek z aktualnymi prolektami.

168
 5.2. Scenariusze testowe

Menu lewe (2) pozwala tworzyeprzypadki, zarz4dzalprojektami, u2ytkownikami,

rolami i wymaganiam,i. Przechow,uje listg plik6w z dokumentacj4.
Menuprawe (3)r,rySwietlaaktualnyplantest6wipozwalana jego zmiang.Ztego pozio-
mu moZesz zaru4dzat projektami test6w, rvybranym planem test6w oraz samymi testami.

5.2.1.3. Specyfikacja testowa Dodaj/edytuj przypadki

testowe
-
Po klikniEciu w tym miejscu moLesz zar6wno tworzyt nowe przypadki, jak i edytowa6
lu2 istniej4ce (rysunek 5.4).

l:Jr; i :J- tJ; p.z'trCkl ::-io'.ri

-).- ,. - .,] i
'- ' : : ir' :7rT : '-1 r: I
':1
,.ll] ., il',

Rysunek 5.4. Dodaj/edytuj przypadki testowe

5.2.1.4. Wybor zestawu testow

Wybierz folder, w kt6rym chcesz utworzy6 nowe przypadki testowe drzewo folder6w
znajdziesz po lewej stronie ekranu (rysunek 5.5).
-

#Testlink rriiilir,lii:iiiiili:iiliilr &S

El -;i F i", e U / [:!:J oE - porelLte,Lo"vliiE"*-*Eo il

qffi,. dPlrJ k!]!!!&d

/E Pr6iektTest!!1],{7)
r - Logow3nle (21
! D Rejesnacla uzytkoMlka (2)
r - l,lerrCy pktnolci (2)
L

Rysunek 5,5. Zestawy testow

16e i: _,'
ai"
1ozdzial 5. I Tworzenie dokumentacji testowej

5.2.1.5. Wybor operacji

W prawej czgSci ekranu wybierz ikong Ustawienia (1). Masz przed sob4 dwa wiersze
mo2liwych do wykonania operacji (rysunek 5.6)
padkach testowych (3). - na zestawach test6w (Z) i na przy-

;E -i
Qperacje na ?estawach I r,t
Operacje na Frzypadka6h ''w + L:1|t)I

Rysunek 5.6. Dostqpne operacje na zestawach i przypadkach testowych

Wybierz operacjg dodawania przypadku testowego (2). Pojawi sig ekran przypadku
testowego (rysunek 5.7).

''itl, -.
r: ,:,nrlr] l z;zr.:cz, tb! p., xali5if;i! ikllalitgg; i.:tpadliu iegtllregs, o{ E:! ltilraElr rur!,

Tytul

ael testu

tllt -r, ri ,4, i!:! i, i..:.

-:t

itete,m
tBiu jst lprarydzeni* papramoicj drjalafia fierhanirma 1ogrwaila. I

r'/arunki fqzatkor'e

i
ekranie :ogowanla

Rysunek 5.7. Tworzenle przypadku testowego

Nastgpnie wypetnij pola:
o Tyttrl przypddku testowego (nazwa musi jasno n skazywa6, co jest przedmiotem testu
dla tego przypadku).
o Cel icsfrz (informacja o tym, co chcesz osi4gn46, wykonuj4c ten przypadek).
o \Varunki poczqtkowe (jakie warunki musz4 by6 spelnione, aby6 m6g1 przyst4pi6 do
testu ).

Kliknii przycisk Utw6rz. Nastgpnie wybierz utw(trz ftrok i wprowad2 treSt przypadku.

170
 5.2. Scenariusze testowe

Zastan6w sig, czy bqdziesz pisac przypadek wysokiego, czy niskiego poziomu, Pamig-
taj, ze osoba, kt6ra ma wykonywad zaprojektowany ptzez Ciebie przypadek, powinna
wiedzie6, co ma robi6, na podstawie opisanych przez Ciebie krokow.

5.2.2. Wykonanie scenariuszy testowych

i nstru kcja uzytkown i ka
-
Zakladaj1c,2e scenariusze testowe zostaly utwotzorre, przeidziemy teraz do uykonywa-
nia test6w. Zanim to jednak nast4pi, osobazarz4dzaj4catestami, kt6ra ma odpowiednie
uprawnienia w narugdziu Testlink, przydzieli Ci konkretne przypadki.

5.2.2.1. Testy przypisane do mnie

W prawym menu wybierz opcjg wskazan4 na rysunku 5.8.

Wli*nnaj testy
Tesiy prz,;pi:arre ir r:lrie
Rapsfty l metry.,ki te5tdw :

Statystykt cgoIne

Rysunek 5. 8. U ruchom ien ie ekran u z list4 przy dzielonych przypad kow

Teraz jesteS na ekranie zlist4przypadk6w testowych do wykonania (rysunek 5.9).

{yTeStl i.k I d
arudzikfaomin]
.fi ..; .^ I e d I ;;: - !l ftoiddra.bqqi:,tr=er -.-

R.:|ii,:rr:.,rLF:i . , F li::,:rrnrjr ',:i Rerlil rc n.riel..g. rl:ir

i wr&nt:01.01 (5lit.6)
:--+[--------:;=;]l o( 1 -orr .D 4.
iS 'S :* I r+: r6srye6 ni4'dme tvlt
.'l s ,

P:iEqrala u:\l[1'.rn Ii .8 g '.&t* l M:tujdreiana.ematuy,v1l

. Reje.ka3jau:rlkcvnka l.' i* .5 t *, &s kjdrilF na nr tdsgru tvtl
:
!id.

li$ & 1$ -' l* J et-r rue h.key lv,l

,
l
rS $,3 : $ 3 s-r,xdared*o'iit!r:

Rysunek 5.9. Dostqpne operacje do przeprowadzenia na przygadkach testowych

Zazraczenie opcji Pokai takie zamknigte wydania (1) spowoduje nlrSwietlenie zestaw6w
test6w dla zamknigtych jttL plan6w test6w.

171 (.:
.------.-'
 Rozdzial 5. I Tworzenie dokumentacji testowej

Na rysunku 5.9 numerem 2 oznaczono Panel zarzqdzania. Sklada siE on z opcji:

o Rozwiy't/zwiit grupy rozwijalzwija zestawy test6w;
o -
o
Pokai kolumny
- powoduje wySwietlenie wszystkich kolumn w tabeli;
Resetui do domySlnego stdnu resetuje do domySlnego stanu;
o -
Odiwiei
o - od6wie2a tabelg;
.
Resetuifiltry
- resetuje filtry zawgLai4ce zakres wySwietlanych danych;
Multisorf sortuje po wielu kolumnach jednocze6nie; aby uLyC tej opcii, zlap
- wybrane
i przeci4gnij nagl6wki na pasek narzgdzi.
Panel przypadku testowego (oznaczony na rysunku 5.9 numerem 3) pozwala zaru4dzae
przypadkiem testohym. Oto dostgpne na nim opcje (kolejno od lewej):
o kliknij, aby ustawiC przypadek testo&y napozytwny (zakoficzony zpozytywnym
vrynikiem);
o kliknij, aby ustawi6 przypadek testowy na negat),wny (taki, w przypadku kt6rego
nie udalo sig uzyska6 pozytywnego efektu);
o kliknij, aby ustawi6 przypadek testowy na zablokowany (taki, kt6rego realizacia
jest w danym momencie z jakiegoS powodu niemo2liwa);
o kliknij, aby wy5wietli6 historig przypadku testowego (zobaczye przebieg zmian
i uwagi dotycz4ce jego wykonania);
o kliknij, aby wejS6 w specyfikacjg przypadku testowego.
Numerem 4 na rysunku 5.9 oznaczono mechanizm umoLliwiaj4ry filtrowanie listy,
pozwalaj4cy na jej sortowanie wedlug kryteri6w:
o Zestaw test6w,
o Przypadektestowy,
o Priorytet (wlaSnie tg opciE wida6 na rysunku),
. Status,
o Przypadek testowy przypisany od wskazanej daty.

a-N
L. r5.3. Lista kontrolna
Lista kontrolna (ang. checklist) to narzqdzie umo2liwiaj4ce kontrolg poprawnoSci i/lub
ocenq stopnia ukoriczenia danego przedsigwzigcia. Lista sklada sig z serii pytari lub
zagadnieh dotycz4cych projektu. Skutecznos6 listy zaleLy od iej zloilonoSci. Im bardziej
szczeg6lowe s4 zagadnienia lub pytania, tym wigksza jest jej skuteczno66.

(,:ttz
-*
-[I
 5.3. Lista kontrolna

W praktyce czgsto odchodzi sig od szczegoiowych list kontrolnych ze wzglgdu na brak

czasu. Niekiedy firma programistyczna realizuje nawet kilkadziesiqt projektow w jed-
nym czasie, a te same osoby sq zaangazowane w kilka z nich. Nie jest to dobra prak-
lyka.Zapamiqla),2e czas po6wiqcony na sporzqdzenie szczeg6lowejlisty uchroniCiq
przed zbqdnymi i czasochlonnymi pracami na po2niejszym etapie projektu

Na rysunku 5.10 zamieszczor'o przyklad listy kontrolnej do mechanizmu rejestracji

konta klienta. Oznaczenia przy poszczeg6lnych polach wskazuj4 na to, ze wszystkie
p r zy p adki zo staly zr e alizow ane.

Lista kontrolna funkcionalnoici

reiestracia konta klienta
Gng. checklisil

M Utworzenie konta
M Walidacia obligatoryinoici p6l w kwestionariuszu
V Zgody marketingowe

d Autoryzacia 5M5

V Autoryzacia e-mail

M Logowani e przy uLyciu btqdnych danych

M Logowani e przy uhyciupoprawnych danych
M Edycia danych klienta

d Odzyskiwanie hasla

M Dodanie karty kredytowei

M Wysytanie wiadomoici
fl Czat z Biurem Obstugi Klienta

M Wysylanie wiadomoici
M Usuwanie konta

Bysunek 5.1O. Przykladowa lista kontrolna

173 f-';
 Rozdzial 5, I Tworzenie dokumentacji testowej
(-r,,
- 5.4. Rejestr ryzyk
Rejestr ryzyk jest dokumentem v{ytwarzanym we wczesnym stadium projektu, zazwy-
czai dostarczaj4 go osoby odpowiedzialne za zarz4dzanie projektem, tzw. kierownicy
projektu.
Rejestr ma gl6wnie na celu zwr6cenie uwagi wszystkich zaangailowanych os6b na
czynniki, kt6re mog4 by(. zagroLeniem dla terminowej realizacji projektu, jak r6wnie2
dla jakoSci wtwarzafiego produktu. Dokument pozwalaprzy+otowac sig na potencjal-
ne ryzyka orazwczeSnie na nie reagowad. Przyklador,uy rejestr pokazano w tabeli 5.9.
Tabela 5.9. Przykladowa budowa rejestru ryzyk

Jakub Nieaktualna 10.03.2020 Produktou'e Du2y Wysoki Spotkanie

Typouy speryfikacja z pomvslodau,cami
wymagair funk- i ustalenie odpo-
cjonaln_vch wiedzialnoici

Anna Realizacja pro- 05.03.2020 Projektou,e Du2y Wy:oki Wl znatzenie ob-

Anonimou,a jektu w sezonie szar6rv, w kt6rych
urloPouym nale2y zapeu'ni6
dostqpnoSi pra-
cownik6w w okre-
Slonirm czasie

T\
Raport btgdow
-K5-5.
W test6w
czasie wiele blEd6wzglaszanych jest niekt6re z nich s4 naprawiane od razt,
- wersjach programu. Raport blEd6w
inne zostaj4 przetoione do rcalizacji w kolejnych
jest narzgdziem o charakterze informacyjnym pomaga ocenid jakoS6 wytwarzanego
-
rozwi4zania i czas napra\\ry przez zesp6l programist6w.
Taki raport powinien zawierut niezbgdne informacje (tabela 5.10), kt6re dadz4zaintere-
sowanym pelny obraz aktualnej sytuacji, bez konieczno6ci logowania sig do narzEdzia
zarz4dzaj4cego btgdami, np. Jira.

Tabela 5.1O. Przyktadowa budowa raportu blqdow

1D-10 B14d Otvarty XXZ Wysoki 222 04.03.2020

przv pnihie
logou,ania

ID-23 Error Do XXZ Wysoki 222 05.03.2020 Adam 13.03.2020

500 prz1, pr6bie w1'ja6nienia Naprau,czy
uruchomienia
aplikacji

lro
--Tr
 5.6. Baport testow

lD defektu Status Aplikacia Priorytet Komponent Data Osoba Planowana

zgloszenia przypisana datanaprawy
ID-2.5 B14d Otwar$. Sredni 111 0-5.03.2020 Woiciech 06.03.2020
rv nazwie pola Defekt
,,NIetoda plat-
lo6ci"

Opcjonalnie mozna doda6 datg spodziewanej naprawy blqd6w, jednak w praktyce

wygl4da to tak, 2e data rcalizacji nie jest stalA, pewn4 wartoSci4. Dlatego podawana
jest zazwycza, tylko' przy defektach krytycznych.

;fta. Raport testow

Poni2ej zaprezentowaro wzorzec przykladowego raportu. Uwzglqdniono pola naiczgS-
cief wystgpuj4ce w takim dokumencie, jednak warto mied na uwadze, 2e w zale2nolci
od projektu, metodyki czy wytwarzanego oprogramowania raport mo2e zawierac inny
zestaw informacji.

I Cel dokumentu
W tym punkcie nale2y opisa6 kr6tko cel raportu kofrcowego z test6w. Przykladowo:
I'liniejszy raport koitcowy test6w akceptacyjnych powstal w celu pctinformowania wszystkich
zaanga2owanych w projekt o statusie wykctnanych proc, a takie ct jakoici wytworzonego
oprog'ramowania.

Dziqki przedstawionym danym osoby decyzyjne mosq wydaC rekomendacje do wdroienid

rozwiqzania w lrodowisku produkcyjnym (docelowym).
il Przedmiot i zakres dokumentu
Ten dokument iest raportem koitcowym dla test6w akceptacyjnych projektu XYZ.

Dokument obejmuje:
o Podsumowanie wykonania scenariuszy testowych (tabela 5.11).

Tabela 5.1 1- Zestawienie wykonanych scenariuszy testowych

Osoba Liczbaprzydzielonychscenariuszy Liczbawykonanychscenariuszy
Tester 1 234 234

Tester 2 98 98

Tester 3 113 113

Tester 4 24 24

Razem 459 469

o Podsumowanie zgloszonych b1gd6w. Opr6cz tabelarycznej prezentacji ich liczby

przyklad stanowi tabela 5.72 warto zamieSci6 takze listg wszystkich btgd6w
-
-
175"i.:(')
-
 Rozdzial 5. I Tworzenie dokumentacji testowej

zawieraj4c4nr ID btgdu wrazz tytutem, dane autora zgloszenia, informacjg o statusie

orazwskazanie osoby, do kt6rej zgloszenie jest przypisane.

Tabela 5.12. Zestawienie zgioszonych blqdow

Liczba zgloszonych 80 115 150 345

b19d6w

Liczba bl9d6w 0 7 t4 21
ze statusem
,Ptwarty"

Liczba bt9d6w 80 100 132 312

ze statusem
,,Zamknigty"
Liczba b19d6w 0 8 12
ze statusem
,,Do wyja6nienia"

o Wyniki test6w (tabela 5.13).

Tabela 5.13. Zestawienie wynikow testow

395 30 44 469

o Zakres test6w.

\V ramdch test6w dld projektu (LIAZWA) zweryfikowano:

(Nalezy poda6 Iistg r,r,,szystkich sprawdzonych funkcjonalnoSci lub tytuty wykonanych
scenariuszy testowych).

III Terminologia
Zawierawykaz skr6t6w i definicje u2ywanych poig6.
IV Obowi4zki, odpowiedzialnoS6 i uprawnienia
Zawiera opis obowi4zkow przypisany'ch do stanowisk, ktore bior4 udzial w tworzeniu
raportu kofrcowego z test6w.

,a-)176
- -r\"
 5.6. Raport testow

V Opis postgpowania
1 . Dokumenty powi4zane z Raportem koltcowynr z test6w
Przykladowo: plan test6w, dokumentacja projektowa, wymagania biznesowe
(tabela 5.14).

ID Dokument

2. Podsumowanie wynik6w test6w

Przykladowo: statystyki realizacii, przedstawione opisowo lub za pomoc4 wykre-
s6w, zgloszone blgdy.

Warto wskaza( funkcjonalnoSci, kt6re byty naibardziej podatne na defekty. Przy-

datn4 informacj4 jest r6wniez Sredni czas realizacji zgloszenia z podzialem na
priorytety.
al Zesp6l realizuj4cy testy
Nale2y wpisa6 wszystkich uczestnik6w testu z podzialem na role albo odnieS6
sig do listy zplarrl test6w.

b) Czynniki blokuj4ce postgp test6w

Nale2y wskazatczynniki blokuj4ce testy, np. niedostEpno66 Srodowiska, brak
zasob6w ludzkich, braki sprzEtu o okre6lonych parametrach.
c) Rekomendacja dotycz4ca wdro2enia
Nale2y wskazat informacje o testach scenariuszy, kt6re zostaty zakohczone
z wynikiem pozytywnym. Przypadki ze statusem Zablokowany nie powoduj4
2adnego ryzyka dla wdro2enia projektu. Wynikiem zakohczonych test6w UAT
(akceptaryj nych) jest p ozyryna rekomendac ia dotycz4ca wdro2enia funk-
c j onalnoSci na Srodowisko produkcyj ne, potwier dzona przez zamawia j 4cego.

3. Szczeg6lowe wyniki test6w

Informacje zawarte w tym punkcie powinny dotyczy( status6w wykonania przy-
padk6w testowych oraz status6w defekt6w. MoLna je zawrzet w tabeli, w kt6rei
podajemy defekty wraz ze statusami. Opr6cz tego zamiepzczamy:
o listg otwartych defekt6w i nierczwi4zanych problem6w;
. ocenE kryteri6w zakoficzenia test6w zaczerpnigt4zplaru test6w; mo2e ona
mie6 formE tabeli (tabela 5.15);

w1':
C,*
 Rozdzial 5. I Tworzenie dokumentacji testowej

Thbela 5. 1 5, Ocen a kryteriow zakonczenia testow

Kryterium
Zakonczenie ze statusem Pozytywny TAK/NIE
700o/o przypadk6w testowych o prioryte-
cie Wysoki

Brak otwartych defekt6w krytycznych TAK/NIE

(priorytet l'Vysoki)

o tyzyka
(nale2y wskaza6 takie ryzyka, jakie byly podane w planie tesr6w tabela 5.16).
-
Tabela 5.16. Opis rodzajow ryzyka, ktore polawity siq w planie testow
ID Opis ryzyka Wykonane dzialania Bie24cy status ryzyka
zapobiegawcze

4. Lista wytworzonych produkt6w ze wskazaniem linku

o Liczba przypadk6w testowych w <tu link do narzgdzia>
j PostQpwykonania przypadk6w testowych w <tu link do narzqdzia>
o Raporty dzienne w <tu link do narzgdzia>
o Reiestr defekt6w w <tu link do narzgdzia>
o Inne (wszelkiego rodzaju rapoffy wygenerowane na potrzeby projektu, np.
raport aktywnoSci dziennej os6b testui4cych).
5. Zal4czniki
Nale2y zal4czye np. plan test6w, harmonogram, realizacje scenariuszy, przykla-
dowy raport.

('i178
l

'."*?:-
 5.7. Zadania
/l'
1'--T 5.7. Zadania
Zadanie 5.1
Wymieri elementy, zkt6rych sklada sig plan test6w.

Zadanie 5.2
Podaj r62nic9 pomigdzy scenariuszem testowym a przypadkiem testowym.

Zadanie 5.3
Jak czEsto powinien bye akttalizowany plan test6w?

Zadanie 5.4
rJtw6rz scenariusze testowe do dowolnie wybranej przez siebie strony internetowej,
nastEpnie przekaL je innej osobie do wykonania. Po wykonanht zadania sprawdZcie
razelm wyniki test6w Upewnij sig, czy Twoje opisy krok6w zostaLy poprawnie zinter-
pretowane.

Zadanie 5.5
Wyobrai sobie, 2e otwierasz sklep internetowy. Stw6rz wlasn4 listg kontrolt4, a na-
stEpnie przeka| j4 do sprawdzenia innej osobie. Zwr6C uwagq, ile czynno6ci zostalo
pominiqtych.

Zadanie 5.6
Wykonaj testy urybran ej przez siebie strony internetowej, a nastEpni e sporz4di raport
blgd6w. Pamigtaj o zachowaniu dobrych praktyk przy tworueniu zgloszenia.

179f"t
---rf-
 Rozdzial 5. I Tworzenie dokumentacji testowej

a'i180
{.)
 ,"Metodol og ei
prowadzen la', t.......-...''-...-.

projektu
Obecnie technologie rczwijaj1sig w bardzo dynamicznym tempie. Wiele projekt6w jest
realizowanych z powodzeniem, lecz niemal tyle samo koirczy sig pora2k4. Dlaczego
tak sig dzieie?
KaLdy z czytelnik6w potrafilby zapewne poda6 kilka powod6w, jednak gl6wne przy-
czyny s4 dwie: czynnik ludzki i pieni4dze. Odpowiednie zaru4dzanie projektem to
odpowiednie zarzEdzanie zespotem. Pieni4dze pomagaj4 w naszych dzialaniach lub
ograniczaj4 je
Dlatego bardzowalrry jest dob6r odpowiedniej metodologii prowadzenia projektu, czyli
zbioru zasad i dobrych praktyk, wedlug kt6rych zesp6l projektowy bgdzie rcalizowal
swoje zadania. Zar6wno dla testera, jak i programisty wiedza o stosowanym modelu,
w kt6rym wytwarzane jest oprogramowanie, jest niezbgdna do wlaSciwego planowania
swojej pracy
W podrEczniku zawarto og6lne wzory metodologii prowadzenia projektu. Jednak warto
wiedzie6, 2e (;wiat IT rzadko przyjmuje i wdraLa ie bez dostosowania ich pod kqtem
konkretnej organizacji. Niemniej najpierw trzebapoznae podstawy, aby opieraj4c sig
na nich, m6c p62niej wyrobi6 sobie wlasne zdanie o ka2dej metodologii.
W niniejszym rozdziale pozrtasz metodologie wykorzystywane najczqSciej w prowadze-
niu projekt6w. Zewzglgdu na obszernoS6 tematu w tym podrgczniku zostaly zamiesz-
czone na j istotnie j sze informacj e oraz przyklady.

181 i
'1-
 Rozdzial 6. I Metodologie prowadzenia projektu
(-t,
lr.-6.1. Model kaskadowy
Model kaskadowy (ang. waterfal/) jest modelem sekwencyjnym, kt6ry sklada sigz eta-
p6w nastgpuj4cych kolejno po sobie Potocznie m6wi sig, 2e to model tradyryjny
czyli przewidywalny, oparty na przejrzystych zasadach. Moie by6 realizowany przez -
wiele zespol6w, kt6re dzialaj4niezaleLnie od siebie, przez co jest nara2ony na blgdy
komunikacyjne.
Sk4d sig wzigLa rtazwa,,kaskadowy"?

Chodzi o sekwencyinoSi kolejnych faz projektu. Etap pierwszy musi zosta6 formalnie
ukoriczony, aby moLnabylo przejsC do rcalizacjikolejnego. Po zakoitczeniu jednej fazy
schodzimy ,,w d6l?' do kolejnej, co doskonale wida6 na rysunku 6.1. To wlaSnie przez
ten schemat model zyskal nazw e,,kaskadowy".

Rysunek 6.1.
Schemat modelu Wymagania
kaskadowego

Projektowanie

lmplementacja

Testowanie

Wdro2enie

spojrz na rysunek i sprawdz, na ktorym etapie odbywa siq implementacja i testowanie

oprogramowania.
Zastanow sig, czy taka kolejnosc realizacji tych etapow lest zagrozeniem dla powodze-
nia projektu.

W modelu kaskadowym kolejnoS6 etap6w jest wa2na. Niedopuszczalne jest realizowanie

kilku etap6w r6wnolegle czy teL pomijanie niekt6rych z nich. Formalne zakoiczenie
kaLdei fazy to przede wszystkim sprawdzenie i upewnienie sig, 2e wszystkie zapla-
nowane prace zostaty wykonane. Je2eli w jednym z etap6w ryst4pity blgdy, kt6rych
naprawa iestzbyt skomplikowana i poci4gazasob4zmiany w wymaganiach, to zawsze
jest mo2liwy powr6t do wcze6niejszych faz. OczryiScie takie cofanie sig niesie za sob4
ryzyko op62nienia rcalizacji projektu czy zwigkszenia koszt6w, ale jest dopuszczalne
iw razie koniecznoSci stosowane.
l

) 182
 6.1. Model kaskadowy

Zamieszczona ponizej tabela 6.1, prezentuj4ca zestawienie etapow z przypisanymi do

nich czynnoSciami, pozwoli lepiej zrozumie6 takie podejScie.
Tabela 6.1. Etapy modelu kaskadowego z zakresem czynno6ci
Etap Zakres czynnosci
Wymagania Zbieranie wymagafr od klienta

Wykonanie ich analizy

Koncentracja na potrzebach klienta
Proiektowanie Projektowanie architektury rozwi4zania na podstawie przedstawionych
wymagair
Implementacja Tworzenie oprogramowania (kodu) w czE6ciach
l,4czenie czE6ci wytworzonego oprogramowania w zintegrowany system
Testowanie Projektowanieiuykonywaniescenariuszytestowych
Zglaszanie blEd6w

Tworzenie raportu test6w i raportu blgd6w

Wdro2enie Wdrozenie rozwi4zania na docelowe Srodowisko

Przyklad 6.L
2e w fazie implementacji wykryto wiele niezgodno6ci zistniej4cym|uL
Wyobrat sobie,
systemem gl6wnym. Zgloszono du2o blgd6w i uwag do dokumentacji. Okazalo sig, 2e
uprawnienia, kt6re mialy zostae zaimplementowane, vtykhrczai1wiele istniej qcychittz
16l w systemie Wszelkie prace wytw6rcze na tym etapie zostaly wstrzymane. Projekt
wr6cil do fazy v'rymagah, czego efektem bylo ich zmodyfikowanie Takie dzialania, kt6re
zmuszaj4 zespoty do wstrzymania prac b4di cofnigcia siE do wczeSniejszych etap6w,
wi424sig z ogromnymi kosztami dla klienta. Czy moilna bylo unikn46 takiej sytuacji?
Oczywi6cie. Nie naleZy bagatelizowa6 tworzenia, zbierania i analizy wymagah- Gdyby
dokumentac ja byla szczeg6low a, a wymagania przemy3lane i uwzglgdnia j 4ce istnie j 4ce
juL rozwi4zania systemowe, to taka sytuacja by sig nie zdarzyla.

Zalety modelu kaskadowego

. zdefiniowane etapy procesu;
. iatwoSi w planowaniu i zarzqdzaniu,
. wyr a2ny podzial odpowiedzialnoSci.

183 r' )
 Rozdzial 6. I Metodologie prowadzenia projektu

Cykl zycia projektu trwa od kontrolowanego startu (zbieranie wymagah) do kontrolo-

wanego zamknigcia (wdrozenie) Wszystkie etapy sq zaplanowane pod kqtem zakresu
wraz z estymacjq pracochlonnoSci.
Szacowanie w modelu tradycylnym odbywa siq przy wykorzystaniu co najmniel jednej
z metod przedstawionych ponizej.
. Metoda delficka (inaczej panel ekspertow) bazule na do6wiadczeniu osob, kt6re
juz zetknqiy sig z podobnym problemem lub majq odpowiedniq wiedzg, przydatnq
do jego rozwiqzania. Zastosowanie metody polega w praktyce na przedstawieniu
problemu ekspertom,
lstnielq dwa mozliwe sposoby postqpowania w obrqbie tej metody Mozemy:
- analizowa6 uzyskane od ekspertow opinie i zadawac im na tej podstawie kolejne,
bardziej szczeg6lowe pytania;
- pozwolii na krytyczne opinie o ich ekspertyzach osobom o podobnej wiedzy i po-
dobnym doswiadczeniu.

Przyklad6.2
MetodE delfick4 stosujemy w gruncie rzeczy na co dziefr, pytaj4c o poradg nauczyciela
lub udaj4c siE do lekarza w celu uzyskania diagnozy na podstawie opisanych objaw6w.
W obu tych przypadkach nie jest wskazane opieranie siE na opinii os6b, kt6re nie s4
ekspertami. Zazwyczaj takLe
- z wyj4tkiem bardziej skomplikowanych sytuacji - nie
ma potrzeby odwolywania sig do zdania wiEkszej liczby specjalist6w.

. Analiza punktow funkcyjnych (FPA, ang. Function Point Analysis) szacuje praco-
chlonnoSc prac nad r6znymi elementami programu, takimi 1ak,

- zewnQtrzne typy wej6cia to metody dokonywania zmian w wewnqtrznych

danych systemu;
-
- zewnqtrzne typy wyj6cia to metody reprezentacji danych przechowywanych
-
przez system (np. wydruki komputerowe);

- Iogiczne wewngtrzne typy plikow

- to pliki uzywane wewngtrznie przez system;
- zewngtrzne typy interfelsow plikow
to metody wymiany danych migdzy innymi
-
systemami informatycznymi (programy umozliwiajqce integraclg z innymi syste-
mami),
* zewnqtrzne typy zapytan to metody odczytu danych z systemu niepowodulqce
-
ich modyfikacji (np. zapylanie w jgzyku SQL).

()184
o
 6.1. Model kaskadowy

Celem analizy jest znalezienie wszystkich elementow analizowanego systemu infor-

matycznego, ktore nalezq do opisanych powyzej kategorii. Nastqpnie kazdemu z nich
przypisule siq stopiefr zlozonosci; moze by6 ona niska, srednia lub wysoka Kolejn4
czynnosciq jest przypisanie kazdemu elementowi liczby punktow odpowiadajqcych
jego kategorii i zlozono6ci od 3 do 15, gdzie 3 oznacza niski wplyw na system, a 15
najwyzszy WartoSci przedstawia ponizsza tabela 6.2
-
Tabela 6.2. Przykladowe zestawienie kategorii dla punktow funkcyjnycn
ZIo2onoSc
Kategoria
Niska Srednia Wysoka
ZewnEtrzne typy welScia 3 4 6
Zewngtrzne typy u1,i6cia 4 5 7
Logiczne wewngtrzne typy plik6lr' 7 l0 15
Zewngtrzne typy interfejs6w plik6w 5 7 10
Zewtgtrzne typy zapytan 3 5 6

Liczba punkt6w funkcyjnych jest wyznaczana na podstawie sumy wag elementow

systemu.

Zazwyczaj model kaskadowy pozwalana wytworzenie oprogramowania zawieraiqcego

pelny zestaw funkcjonalno6ci. Realizacja takiego projektu moLetrwaC miesi4ce, a nawet
lata. Dlatego model ten wybierany jest czgsto przy projektach dlugoterminowych, z jas-
no okreSlonymi wymaganiami, zalelnymi od regulacji prawnych. Nacisk na tworzenie
i przechowywanie dokumentac,i nalezy do gl6wnychprzyczyn wyboru.

6.1.1. Model prototypowy

Model prototypowy jestprzeznaczony dlaprojektu, w kt6r,r..rn klient i zesp6l chc4przygo-
towad prostA, szybk4 implementacjg rozsd4zania lub pewnej funkcjonalnoSci. Ma to na
celu weryfikacjg danego rozwi4zania w praktyce oraz umo2liwia klientowi sprawdzenig
czy zesp6l poprawnie rozumie jego wizjg
Model ten sklada siE z nastqpuj4cych etap6w:

1. Og6lne okreSlenie wymagari.

2. Budowa prototypu.
3. Weryfikacj a prototyp u pr zez kliental niytkownika koricowego.
4. Wyczerpuj4ce okreSlenie wymagari.
5. Realizacja pelnego systemu zgodnie z modelem kaskador,vym.

185r l
:)
 Rozdzial 6. I Metodologie prowadzenia projektu

Gt6wnym celem realizacji prototypu jest szczeg6lowe okre6lenie wymagari, tj. wykrycie
i unikniEcie:
a nieporozumieri pomiEdzy klientem a tw6rcami systemu;
a brakuj4cych funkcji;
o trudnych,wrqczniewykonalnych uslug;
o brak6w w specyfikacji wymagari.

Prototyp nie lest czgsciq przyszlego pelnego systemu. Jest raczej zapowiedziq tego,
co pelny system bgdzie zawierac. W momencie akceptacji prototypu przez klienta
zesp6ldeweloperski przystgpuje do prac nad peinym systemem,

Zalety budowy prototypu to:

o mo2liwoS6 szybkiej demonstracji pracuj4cej wersji systemu;
o mo21iwo66 przeprowadzenia szkoleri dla u2ytkownik6w, zanimzbudowany zostanie
petny system.
/l
V16.2. Metodyki zwinne
Alternaty'wnymrozwi4zaniem dla tych,kt6rzy nie odnajduj4 sig w uporz4dkowanym,
mocno formalnym modelu kaskadowym, s4 wlaSnie metodyki zwinne Wymagaj4 one
jednak du2ej samoorganizacji zespolu i koncentracji wielu kompetencji.
Pocz4tki metodyk zwinnych wi424 sig z ogloszeniem Manifestu Agile w 2001 roku
w Stanach Zjednoczonych. W oSrodku narciarskim zebrala siE grupa siedemnastu os6b,
kt6re reprezentowaly r62ne podejScia i metody budowania system6w informatycznych.
Pomimo tak duZej liczby uczestnik6w spotkania okazato siE, ze s4 oni zgodni co do
podstawowych filar6w, kt6re poslu2yty jako baza Manifestu.

Oto tresc Manifestu Agile.

Wytwarzajqc oprogramowanie i pomagajqc innym w tym zakresie, odkrywa siq lepsze
sposoby wykonywania te1 pracy W wyniku tych do6wiadczen przedklada sig,
. ludzi i interakcje ponad procesy i narzqdzia,
. dzialaj4ce oprogramowanie ponad obszernq dokumentacjg,
. wsp6tpracq z klientem ponad formalne ustalenia,
. reagowanie na zmiany ponad podqzanie za planem.

*uu
 6.2. Metodyki zwinne

Wedlug Manifestu Agile zazwyczaj docenia siE to, co wymieniono po prawej stronie
tego zestawienia, jednak bafiziei powinno sig ceni6 to, co wymieniono po lewej.

Rzadko wspomina sig o dwunastu zasadach Agile, kt6re powstaly na skutek publikacji
Manifestu. To bardzo waLnewskaz6wki dla ka2dego, kto chce wdro2yd metodyki zwinne
w swojej pracy Oto te zasady:
1. Najwy2szy priorytet ma dla nas zadowolenie klienta dzigki wczesnemu i ci4glemu
wdrazaniu warto6ciowego oprogramowania.
2. Bqd1cie gotowi nazmianywymagait nawet nap6inymetapie jego rozwoju. Procesy
zwinne wykorzystui4 zmiany dla zapewnienia klientowi konkurencyjnoSci.
3. Dostarczajcie funkcjonuj4ce oprogramowanie czgsto, w kilkutygodniowych lub
kilkumiesiEcznych odstqpach. Im czg6ciej, tym lepiej.
4, Zespolybiznesowe i deweloperskie musz4 SciSle ze sob4 wsp6tpracowa6 w codziennej
pracy przez caly czas trwania projektu.
5. Tw6rzcie projekty wok6l zmot),wowanych ludzi. Zapewnijcie im potrzebne Srodo-
wisko oraz wsparcie i zaufajcie, ze r,qrkonaj4 powierzone zadanie.
6. Najbardziej efektywnym i wydajnym sposobem przekazywania informacji zespolowi
deweloperskiemu i wewnAtrz niego jest rozmowa twaru4w twarz.
7. oprogramowanie j est podstawow 4 miar1 po stgpu.
D zialaj 4ce
8. Procesy zwinne umo2liwiaj4 zr6wnowa2ony rczw6j. Sponsorzy, deweloperzy oraz
u2ytkowniry powinni by6 w stanie utrzymytvae r6wne tempo pracy
9. Ci4gte skupi6nie na technicznej doskonalo6ci i dobrym projektowaniu zwigksza
zwinnoS6.
1O. Prostota sztuka minimalizowania ilo6ci koniecznej pracy jest kluczowa.
- -
11. Najlepsze rozwi4zania architektoniczne, wymagania i projekty pochodz4 od
samoorgani n\4qch sig zespol6w.
12. W regularnych odstgpach czasu zesp6l analiz:uje mo2liwoSci poprawy swojej
wydajno6ci, a nastgpnie dostraja i dostosowuje swoje dzialania do wyci4gnigtych
wniosk6w.

Zalety Agile:
. elastyczne podejScie do zakresu zmtan i ich akceptacji;
. koncentracja na dostarczanej wartoSci zamiast na zakresie prac;
. stosowanie krotkich iteracji oraz weryfikacji po kazdej z nich,
. wzmacnianie samodzielnoSci i odpowiedzialno6ci zespolu.

187 {_)
---"4-
 Rozdziat 6. I Metodologie prowadzenia projektu .

Szacowanie w metodykach zwinnych odbywa siE za pomoc4 nastgpuj4rych technik:

o Poker planistyczny (ang. Planning Poker)
- zwinna technika opartana konsensusie,
do szacowaniauLy'tvamy kart do gry. Zeby rozpocz4e sesjE planowania pokera, wlaS-
ciciel produktu lub klient czyta historyjkg uZytkownika. Ka2dy estymator (uczestnik
gry) trzyma taliE kart pokera planistycznego o warto6ciach takich jak 0, L, 2, 3,
5, 8, 13, 20, 40 i 100. WartoSci te reprezentuj4 liczbq punkt6w historii (ang. Story
Points), w kt6rych zesp6l ocenia historyjkg Estymatorzy omawiaj4 tg funkcjg, w ra-
ziepotrzeby zadajqc pytania wlaScicielowi produktu. Gdy funkcja zostanie w pelni
om6wiona, kazdy z estymator6w prywatnie wybiera jedn4 kartq, aby przedstawi6
swoje oszacowanie Wszystkie karty s4 nastqpnie okazywane w tym samym czasie.
Je6li wszysry estymatorzy wybior4 te samA wartoS6, staje sig to oszacowaniem. Je6li
nie, estymatorzy omawiaj4 swoje szacunki.
o Triangulacja (ang. Triangulation)
- oszacowanie rozmiaru elementu na podstawie
zestawienia go z dwoma innymi elementami.
o Estimation Board
- przypisl'wanie element6w do kategorii, w kt6rej znajdui4 sig
elementy tej samej wielko6ci.

6.2.1. Scrum
Scrum to metodyka o charakterze iteracyjnym orazpruyrostowym, zaliczana do zwin-
nych metod pracy zgodnych z Manifestem Agile Jest to taki spos6b prowadzenia pro-
jektu, kt6rego celem jest osi4gnigcie zamierzonego reztltatti panowanie nad zmianami.
Idealnie wpasowuje sig w mlode, male organizacje typu start-up (rozpoczylaj4ce swoj4
dzialalnoS6).
Na podstawie rysunku 6.2 om6wione zostanA teraz narzgdzia, pruktyki oraz spos6b
zarz4dzania projektem realizowanym w Scrumie.

Codzienny Scrum
r@
i,#

lii
GT
-
Rysunek 6.2.Zarzqdzanie projektem w Scrumie

.I1BB
'..1:
{)
 6.2. Metodyki zwinne

Codzienny (ang. daily) Scrum

Jak sama nazwa wskazuje, jest to codzienne spotkanie, trwaj4ce maksymalnie do 15
minut, na kt6rym uczestnicy zespolu m6wi4, co udalo im siE zrobie wczorai, co chc4
zrobil dzisiaj i jakie widz4przeszkody Odbl'wa siE ono w trybie stand-up (na stojqco).
Sprint
Scrum dzieli projekt na iteracje (wydania cykliczne) o stalej dtugoSci (w praktyce iteracja
trwa od 2 do 4 tygodni).

DlugoSd iteracji nie ulega zmianie Jezeli przyjgto, ze sprint trwa 4 tygodnie, to ten za-
kres czasu jest ostateczny.
Jezeli zadanie nie moze by6 ukonczone w czasie sprintu, odpowiednie cechy produktu
sq dzielone i zadanie wraca do backlogu produktu, Technika ta nazywa sig ogranicza-
niem czasowym (ang timeboxing)

Przyrost produktu
Wynikiem kaZdego sprintu jest produkt, kt6ry potenc,alnie moLnawdrozye (nazywany
przyrostem).
Reiestr (ang. backlog) produktu
Wla6ciciel produktu zarz4dza spriorytetyzowanq list4 planowanych pozycji do zreali-
zowania (nazywan4backlogiem produktu). Zadania produktu zmieniaj4sig od sprintu
do sprintu (nazywamy to udoskonalaniem backlogu produktu).
Reiestr (ang backlog) sprintu
Na pocz4tku ka2dego sprintu zesp6l scrumowy wybiera z backlogu produktu zbi6r
pozycji o najvryLszym priorytecie (nazwa tego zbioru to backlog sprintu). Poniewa2
to zesp6l scrumowy, a nie wlaSciciel produktu wybiera pozycje do realizacji podczas
sprintu, wyb6r nawi4zuje raczej do zasady pobierania (wedlug kt6rej czlonek zespolu
przydziela sobie zadania sam) ni2 do zasady wpychania pracy (zadaniaprzydzielane s4
odg6rnie i realizowane wedlug nadanego priorytetu).
Definicja ukoficzenia (ang. Definition of Done)
By siE upewnie,2e na koricu sprintu uzyskany zostanie produkt nadaj4cy siE do wdro-
zenia (sprawny ,,kawalek" produktu), zesp6l scrumowy przedyskutowuje i okreSla
odpowiednie kryteria ukoficzenia sprintu. Dyskusja poglgbia zrozumienie przez zesp6l
poszczeg6lnych pozycji z backlogu i wymagari dotycz4cychproduktu.

1Bg i--
 Rozdzial 6. I Metodologie prowadzenia projektu

Raportowanie
Status sprintu jest raportowany i uaktualniany codziennie w czasie spotkali nazywanych
codziennym Scrumem, dzigki czemu zawartoSe i postgp biez1cego sprintu
wyniki test6w - a takLe
s4 dostgpne dla zespolu scrumowego, os6b zarz4dzajqcych i innych
-
zainteresowanych. Na przyklad status sprintu mo2e by6 pokazywany na bialej tablicy
suchoScieralnej.

6.2.1.1. Role w metodyce Scrum

Zgodnie z metodyk4 Scrum im mniej 16l, tym lepiej. tatwiej wtedy o ufizymafli" ,oy-
sokiego poziomu komunikacji, latwiej o szybkie podejmowanie decyzji i reagowanie
na zmiany.
Scrum wyr6znia tzy rcle, kt6re wchodz4 w sklad zespolu scrumowego (ang. Scrum
Team):

1. Scrum Master (nie ma wlaSciwego tlumaczenia w jgzyku polskim)

Dba o odpowiednie stosowanie i implementacjq regul scrumowych. Je2eli wyst4-
pi4 naruszenia regul, to Scrum Master sprawdza, co jest przyczyn4 takich dzialai,
i stara sig je usuwa6 z procesu. Eliminuje wszelkiego rodzajtt przeszkody, zar6wno
te zwi4zane z zasobami, jak i te, kt6re uniemolliwiaj4 zespolowi stosowanie wlaS-
ciwlzch regul i PraktYk.

Scrum Master nie jest liderem zespotu, a trenerem (ang coach) Daje tylko wskazowki
i doradza zespolowi, aby wybralwlaSciwq drogg technologig czy zastosowalwlasciwq
metodq, Nie deleguje pracy, nie planuje projektu, araczel dba o to, aby zespoi spelniat
wszystkie kryteria, by osiqgnq6 okreSlone przez siebie cele

2. Zesp 6l wyttl 6rczy ldeweloperski (ang. D evelopment Te am)

Zesp6lvrrytw6rczy moLeliczyl od 3 do 9 os6b (oczywi6cie jest to tylko sugestia),
kt6re ruzemwytwarzaj4 i testuj4 produkt. Nie ma lidera zespotu, wiqc wszystkie
decyzje podejmowane s4 wsp6lnie Scrum nie dostarczay\rytycznych, jak powinno
byd wykony,wane testowanie w tego typu projekcie.

3. WlaSciciel produktu (ang. Product Oumer)

Wla6ciciel produktu reprezentuje u2ytkownika (przygotowuje historyjki uZytkow-
nik6w) oraz tworzy priorytety w backlogu produktu, zarzqdza nimi i okreSla ich
wartoS6. Kontroluje tez finansow4 stronE projektu (ROI). WlaSciciel produktu nie
iest liderem zespolu.

o (i1e0
 6.2. Metodyki zwinne

Zwrot koszt6w z inwestycji (ROl) podstawowy wskaznik rentownosci, wykorzysty-

-
wany do mierzenia efektywrlosci danego dzialania. Wzor na obliczenie ROI lest prosty,
ROI % :(przychod - koszt inwestycji) / koszt inwestycji 100
Wska2nik ROI daje odpowiedz na pytanie, czy dany projekt przyniesie firmie wymiernq
korzysc w okre6lonym czasie lm wyzszy wska2nik (ROI), tym lepiel.

6.2.1.2. Historyjki uzytkownika

Slabej jakoSci specyfikacja gl6wny pow6d niepowodzenia projektu powsta-
-
wa6 w wyniku brakuzrozumienia przezklientawlasnych potrzeb,braku-moze
globalnej wizji
systemu, nadmiernych lub sprzecznych wlaSciwoSci oraz innych btqd6w w przeptywie
informacji.
W Srodowisku zwinnym historyjki u2ytkownika pisane s4 po to, by uchr.tyci6 wymagania
z perspektywy programist6w, tester6w i przedstawicieli biznesu. W przeciwieristwie do
modelu sekwency j nego, gdzie wsp6lna wizja wlaSciwo6ci j est o si4gana pr zez pr zegl4dy
formalne po utworzeniu wymagari, w zwinnym rozwoju oprogramowaniawizjata jest
osi4gana przez czgste przegl4dy nieformalne podczas pisania wymagari.

Dobrze stworzona historyjka uzytkownika spelnia warunki modelu INVEST, to zna-

czy, ze jesL
. lndependent
. Negotiable
- niezalezna;
negocjowalna;
. Valuable
-
wartosciowa,
. Estimable
-
dajqca sig oszacowac (mozna okreSlic niezbgdny czas izasoby);
-
. Sized Appropriately
. Testable
- odpowiedniej wielko6ci;
testowalna.
-

Historyiki u2ytkownika (ang. User Stories) maj4na celu skupienie sig na realnymuzyt-
kowniku systemu i na zaspokojeniu jego potrzeb. Zmtszaj4 autora do zastanowienia
sig nad tym, jakie rozwi4zaniebgdzie najlepsze dla u2ytkownika.

KaLdahistoryjka powinna zawierat kryteria akceptacji dla wla6ciwo6ci w)rmienionych

w schemacie INVEST Te kryteria powinny by6 definiowane we wsp6lpracy pomiEdzy
przedstawicielami biznesu, programistami i testerami. Daj4 one programistom i testerom
lepszy wgl4d w wizjg wla6ciwoSci, kt6r4 reprezentanci biznesu bgd4 sprawdzaf. Zesp6l
zwinny uwaLa zadanie za tkoiczone, gdy zbi6r kryteri6w akceptacyjnych jest spelniony

';
191 :'
Rozdzial 6. I Metodologie prowadzenia projektu

Koncepcja 3C (autorstwa Rona Jeffriesa) mowi, z jakich czg6ci powinna skiadac sig
historyjka. Sq to:
. Karta (ang. Card) lub fiszka, na ktorej zapisano historyjkq. Stanowiq one fizyczny
odnosnik do wymagania,
. Dyskusja (ang. Conversation) natemat szczegot6w.
. Potwierdzenie (ang Conft rmation) dzigki testom akceptacylnym, kt6re potwierdzajq
implementacjg z punktu widzenia biznesu.

Zalety korzystania z historyjek:

I mniel dokumentacji wigcei spotkad i rozm6w;
-
o naiwazniejszy jest cel uzytkownika, a nie sam system;
o nie rrarzucai4ustalania szczeg6l6w z gory.
Historyjki uzytkownika musz4 obejmowa6 zar6wno wta6ciwoSci funkcjonalne, jak
i niefunkcjonalne (przyklad 6.3).

Przyklad,6.3
WtaSciciel produktu zdefiniowat wymagania dotycz4ce aplikacji sklepu internetowego.
Poni2ej przyklad jednej z historyjek uzytkownika.

U2ytkownik z rol4 ,,Sprzedawca" chce, 2eby po wejSciu w zakladkg ,,Zar::'6wiertia"

stan zam6wiefi o statusie,,Nieoptacone" wySwietlal siq na czerwonym tle (wlaSciwo66
niefunkcjonalna, zwi4zana z wygl4dem pe\\'nego elementu programu, a nie z funkcj4,
jak4 petni).

Uzytkownik niezarejestrowany chce mie6 mozliwoSC zto2enia zam6wienia w sklepie

internetowym (wlaSciwo66 funkcjonaina).

Zalety metodyki Scrum:

. komunikacja ponad dokumentacjq;
. przejrzystosc dzialan (krotkie sprinty z ustalonym zakresem prac),
. szybkie reagowanie na zmiany wymagan.

)192
 6.2. Metodykr zwinne

6.2.2. Kanban

Kanban jest metodykE wywodzqcE sig z Toyota Production System (metody zarzqdzania
produkcjq stosowanej przez wiele firm w Japonii oraz na calym swiecie). Nazwa ,,kan-
ban" w jqzyku japohskim oznacza tablicq informacyjnq. Jej celem jest wizualizacja i op-
tymalizacja przepiywu pracy w lancuchu wartosci dodanej (ang. a value-added chain).
Kanban sktada sig z pigciu zasad:
. Zobrazuj przeptyrru pracy,
. Ogranicz WIP (ang. Work in Progress)
. Zarzqdzaj p rze p'lywe m.
. Ustal wyra2ne zasady.
. Wspolnie ulepszaj.

Prezentowane podej6cie nie przewiduje iteracji (powtarzania), a jedynie ciqg$ proces.

Kanban wykorzystuje trzy narzgdzia, kt6rymi s4:

1 . Tablica kanbanowa (rysunek 5.3). taricuch warto6ci, kt6rym zarz4dzamy,jest wi-

zualizowany na tabliry kanbanowej .KaLda kolumna pokazuje etap procesu zbi6r
- bEd4
powi4zanych czynnoSci, kt6re powinny zosta1 zrealizowane,lub zadania, kt6re
ptzetwarzane, s4 symbolizowane przez kolorowe kartki. Kartki s4 przesuwane od
lewej do prawej strony przezkolejne kolumny tablicy, odpowiadaj4ce nastgpuj4rym
po sobie etapom procesu.

Przyklad.6.4
Zal62my,2e pracujemy nad aplikacj4 sklepu internetowego. Tablica kanbanowa pro-
jektu moglaby wygl4da6 tak jak tapokazana na rysunku 6.3. Jak wida( zesp6l pracuje
obecnie nad modulami odpowiedzialnymi zarejestracjgoraz konto klienta. Zadania ju2
wykonane to opracowanie konfiguracji konta klienta i czESci aplikacji przechowuj4ce;',
aktualizuj4cej i udostgpniaj4cej informacje o liczbie dostgpnych produkt6w. Wci42
pozostalo calkiem sporo do zrobienia.
2. Limit pracy w toku (ang. Work in Progress). Liczba r6wnolegle wykonywanych
zadafi jest SciSle ograniczona. Jest to kontrolowane przez ustalenie maksymalnej
dozwolonej liczby kartek na danym etapie lub globalnie na tabliry Gdy na danym
etapie na tablicy pojawia sig wolne miejsce, pracownik przesuwa kartkg z wczel-
niejszego etapu.
3. Czas realizacii (ang. Lead Time). Metodyki Kanban uLywa sig do optymalizacji
ci4glego przep\'wu zadafiprzezminimalizacjg (Sredniego) czasurealizacji dla calego
laricucha warto6ci. Kanban wykantje pewne podobieristwo do Scruma. W obu
podejSciach wizualizacja aktywnych zadafi (np. na dostgpnej dla wszystkich tab-
licy sucho6cieralnej) zapewnia przejrzystoS( zawartoilci i postgpu zadafl. Zadania

193 :
RozdZal 6. I Metodologie prowadzenia projektu

Rysunek 6.3. Przyktadowa tablica kanbanowa

jeszcze nieprzydzieLone czekajE w zbiorze zadafi, do wykonanial w momencie gdy

zwalnia sig miejsce na kolejnym etapie, s4 one odpowiednio przesuwane na tablicy
kanbanowej.
Zar6wno iteracje, jak i sprinty s4 opcjonalne w Kanbanie
Proces w Kanbanie pozwalana wydawanie produkt6w raczej jeden po drugim niZ jako
czg56 wydania. Ograniczenia czasowe (ang. timeboxing), jako mechanizm synchroni-
znj4cy, staj4 siE tym samym opcjonalne, inaczej ni2 w Scrumie, gdzie synchronizuje sig
wszystkie zadania w ramach sprintu. Zespoly stosuj4ce metodykE Kanban mierz4czas
realizacii (Sredni czas od momentu zgloszenia l4dania pracy do momentu jej zakoir
czenia) i optymalizuj4 swoje procesy, aby skr6ci6 czas wykon)'wania zadaft.

Zalety metodyki Kanban:

. wizualizacla przebiegu prac;
. latwa weryfikacja optymalizacji proces6w.

194
 6.3. Zestawienie metodyk pod kAtem roznic

6.2.3. Scrumban
Scrumban jest hybryd4 lzyskan4zpol4czenia struktury Scrum z metodami Kanbana.
Jest rekomendowan4 metodyk4 dla zespol6w, kt6re chc4przejit od formy pracy wlaS-
ciwej dla Scruma do Kanbana. Obecnie jest to najpopularniejsza metodyka zwinna.
Wiqcej informacji o niej znajdzieszw rozdziale 7.

Jakie elementy Scruma mozna tu odnale26?

. Planowanie
- iteracje w regularnych odstqpach czasu, synchronizowane z
prze-
glqdami i retrospektywamr,
. PrzejrzystoS6 proces musi by6 zrozumialy dla wszystktch zaangazowanych,
. lnspekcja
-
scrumowe artefakty muszq byc czgsto przeglqdane w celu wykrycia
-
niepozqdanych rozbieznoSci.
. Adaptacja w momencie zauwazenia rozbieznoSci proces musi zostac natych-
-
miast skorygowany.

Elementy zaczerpnigte zKanbana wptywaj4 na ulepszenie procesu, dodaj4 do metody

Scrumban wizualizacjg i wiEcej wskaZnik6w warto6ci.

Jakie elementy Kanbana mo2nalu odnale2c?

. Ciqgiy system i przeplyw pracy.
. Nowe wymagania mogq byc dodane zawsze, o ile w kolejce zadah (WlP) istnieje
wolne miejsce.
. Wyra2ne limity liczby elementow w toku w dowolnym momencie,
. Poszczegolne role nie sq jasno okreSlone.
. Krotkie terminy realizacli
- nacisk na analizg i planowanie.
. Korzystanie z buforow proces6w i diagramow przeptywu, aby ujawnii slabosci pro-
cesu i zidentyfikowa6 mozliwosci poprawy

3. Zestawienie metodyk pod kqtem ro2nic

W tabeli 6.3 zestawiono r6znice pomigdzy przedstawionymi metodykami. Wybrano
najistotniejsze czynniki wp\.waj4ce na definiowanie metodyk. Pamiqtaj jednak, 2e
w praktyce stosowanie poszczeg6lnych metod w firmach wygl4da r6Lnie i mo2e odbiega6
od przedstawionego tutaj wzorca.

195 r
 Rozdzral 6. I Metodologie prowadzen a projektu

Tabela 6.3. Zestawienie porownawcze metodyk

Waterfall Scrum Kanban Scrumban
Metodyka zwinna ,/ ,/ ,/
Szczeg6lowa dokumentacja wymagari ,/
Szybko zmieniajqce sig Srodowiska ,/ ,/
testowe
Role kierownicze ./
testowe
Przypadki ,/ ,/
Male zespoly ./ ./
Wdra2anie kilku funkcjonalno5ci ,/
w jednym nydaniu
Dopuszczalna zmiana zakresu zadaf, ,/ ./ ,/
Dopuszczalna zmiana terminu ,/ ,/
wdrozenia
Sprinty ,/ ,/
Ograniczenia co do realizor,r,anej ,/ ,/ ,/
liczby zadah
Wizuahzacja zadai ,/ ,/ ,/

(--r-
v. 16.4. Zadania
Zadanie 6.1
Jakie s4 wady testowania w modelu kaskadowym?

Zadante 6.2
W jakich projektach sprawdzi siE dobrze model kaskadowy?

Zadanie 6.3
Jakie role urystEpuj4 w zespole scrumowym?

Zadanie 6.4
Kto jest liderem zespolu scrumowego?

zaoante ei.5
Wyrniei czq6ci, z jakich powinna siE skladaC historyjka u2ytkownika (wedfug koncepcji 3C).

.)1e6
'*r)
 6.4. Zadania

Zadanie 6.6
Wymiefi wartoSci, o kt6rych m6wi Manifest Agile

Zadanie 6.7
Przygotuj wlasn4listg Kanban w rrarzgdzirt Trello. Zaplanaj w niej wszystkie zadania
zwi4zane ze szkol4nanajbliilsze 30 dni.

Zadanie 6.8
Jakie elementy Kanbana znajdziesz w metodyce Scrumban?

197i-
' a,'*"
 Rozdzial 6. I Metodologie prowadzenia projektu

aleB
(.-)
 'od pomys IU,
_po.wdr ozenre
,zretosowa
zd)bytqfwt;edry
Realizacja projektu od pocz4tku do korica to praca dtuga i wymagaj4cazaangazowania.
Niezale2nie od czasu trwania projektu liczbaprzypisanych do niego pracownik6w mo2e
przekraczae nawet sto os6b! Dlatego wa2ne jest, aby ka2dy czlonek zespolu projektowego
znal swoj4rolE, sw6j zakres obowi4zk6w i odpowiedzialnoSci. Du2y nacisk kladzie sig
na komunikacjg i przestrzeganie dobrych praktyk. Ze wzglgdu na dynamiczne tempo
pracy zaklada sig, 2e czlonkowie zespolu znaj4 podstawowe zasady rcalizacji zadaft
w ramach swoich kompetencji. wprowadzenie nowych czlonk6w do zespolu polega
na kr6tkim zapoznaniu ich ze wsp6tpracownikami i pokazaniu, na kt6rym etapie
projektu jesteSmy. Bardzo waLne jest jak naiszybsze wdro2enie nowych pracownik6w.
W zwiqzktr z tym nie naleLy lekcewa2y6 wcze6niejszego zapozlania sig z teori4 jest
ona niezbgdna do plynnego przejscia do praktyki. -
Celem niniejszego rozdzialujest wyjaSnienie 16l poszczeg6lnych os6b i symulacja przej-
Scia procesu tworzenia oprogramowania, tak by jak najlepiej oddawala rzeczywisty
przypadek.

199
"-- -
.)
(:\-*
 Rozdzial 7. I Od pomySlu po wdrozenie
-
praktyczne zastosowanie zdobytej wiedzy
(-1,
VF,1. Etap pierwszy pomysl i zapytanie
ofertowe
-
Pani Ania, pracrtj4ca w prlnvatnym przedszkolu ,,Skrzat",badaLa za pomoc4 ankiet,
jakich zajg(brak$e w plac6wce (ankietg ul,pelniali rodzice). Ankietowani wskazali na
zaigcia jgzykowe, pojawily sig teZ sugestie, 2e dzieci powinny zdobywaC tak4 umiejqt-
no66 jak orientacja w terenie. Pani Ania pomySlala, 2e Swietnym rozwi4zaniem byloby
wprowadzenie lekcji jqzykowych w formie zajqt interuktywnych.
Wychowawcrymi zglosila dyrekcji przedszkola zapotrzebowanie na zakup ustugi w firmie
informatycznej. Dyrekcja poprosila o sprecyzowanie, co dokladnie takie oprogramo-
wanie mialoby robi6 i na jakich uz4dzeniach dzialae, po czym zadeklarowala,2e na
podstawie uzyskanych informacji vrryi;le zapytania ofertowe do firm. Dodatkowo pomysl
zostalprzedstawiony na zebraniu rady rodzic6w. OczywiScie pojawily sig glosy, 2ebtdhet
molna przeznaczye na inne aktywno6ci, np. na dodatkowe zajgcia z integracji senso-
rycznej,lekcje tarica czy vnyiScia do kina jednak dyrekcja mocno bronila pomyslu.
-
Jak my6lisz, dlaczego?

Otoz raz wydane pieniqdze w przypadku programu komputerowego dajq plac6wce

narzqdzie, z kt6rego mozna bqdzie korzystac przez nalbli2sze lata. Co prawda opro-
gramowanie bgdzie wymagalo aktualizacli czy dodania nowych funkcji jednak koszty
konserwacji i rozwoju nie bgdq 1uz tak duze jak te, ktore pociqga za sobq zbudowanie
aplikacji.

Kilkoro rodzic6w twierdzilo,2e jest to marnotrawienie bud2etu przedszkola, aleprzewa-

Zyty glosy zatym,by zanim pomysl zostanie odrzucony, zebrafpropozycje i kosztorysy
od firm, kt6re deklarowaly,2e podejm4 siE zadania.
Po ostatecznej akceptacji przez dyrekcjq przedszkola pani Ania przygotowalaprezentacjg
opisuj4c4 jej pomyst orazw\rmaganiadotycz4ce aplikacji. Zewzglgduna brakwyksztal-
cenia programistycznego niezawarlaw jej tre6ci szczeg6l6w dotyczqcychtechnologii b4dZ
bud2etu. Prezentacja zostala wyslana do dyrektora przedszk ola.Przeloilony zai; przekazal
uzyskane od wychowawczyni informacje firmom, kt6re mogtyby zrealizowa6 projekt.
Oto tre56 e-maila wyslanego do trzech firm poleconych przez rodzic6w:

,,Kontaktujg siq z Paristwem w imieniu Przedszkola Niepublicznego "Skrzat,,.W zwiqzku

z planowan4 modyfikacj4 zajgt dodatkor,vych chcielibySmy dosta6 od Paristwa ofertg
na opracowanie pomyslt oraz zbudowanie przeznaczonej dla dzieci aplikacji do nauki
(poprzezzalawg) jgzyka obcego. Program musi byC prosty i intuicyjny orazzrealizowany
tak, by dziecko nie musialo prosi6 opiekuna o pomoc. Aplikacja ma wykorzyst)'wa6
slownictwo w jgzykach angielskim i polskim. Zaproponowany spos6b nauki i zaba-
wy musi przybrae posta6 pojedynczych lekcji, kt6re bgd4 wraz z dzieCmi realizowane

, 200
w trakcie zajg(. przedszkolnych. Celem edukaryjnym opr6cz nauki jgzyka ma
-
by6 r6wnie2 orientacja w terenie. Proszg mie6 na uwadze, 2e dzieci nie potrafi4 jeszcze -
dobrze czytae, dlatego walne jest, aby sl6wka byty nie tylko wySwietlane na ekranie,
ale takZe odczytywane przyjaznym, spokojnym glosem".

Dlaczego to nie pani Ania wyslala e-mail do firm, choc pomysl byl 1ej i sama wiedzia-
la najlepiej co chce uzyskac, miala tez zgodq przelozonego na realizacjq projektu?
E-maile od przelozonego wyglqdajq bardziej profesjonalnie, a firmy chqtniej anga2u14
siq w przygotowanie oferty w odpowiedzi na zapytanie ofertowe skierowane pzez pra-
cownika wysokiej rangi

Na tym etapie projektu podstawowym zadaniem jest ustalenie szczeg6l6w takich jak
bud2et, technologie czy rczdysponowanie zadai w zespole.
Sp6jrzmy terazr,a problem z perspektywy pracownik6w firmy, kt6ra otrzymala e-mail
od dyrektora przedszkola.

Jak latwo sig domySli6, uznano, 2e opis z e-mailanie jest wystarczajqcy, aby przygotowaC
nawet wstqpnA \ ryceng. Zesp6l przygotowal wigc listg pytari:
1. Dla jakich ttz4dzeh przeznaczotTa jest aplikacja?
2. Ifu maksymalnie u2ytkownik6w bEdzie z niejkorzysta6 w tym samym czasie?
3. Ile ma trwae jedna lekcja?
4. Jaki jest poziom trudnoSci?
5. Czy aplikacja ma dzialae w trybie offline?
6. Czy u2ytkownicy bgd4 siE logowa6 do platformy?

Czqsto klrenci nie sq Swiadomi, jakzrealizowac to, czego potrzebujq, dlatego w odpowie-
dzi nazapylanie ofertowe poza pytaniami o szczegoly warto zamiescic kilka sposobow
rozwi4zania problemu najlepiej popartych przykladami wczesniej zrealizowanych
projektow -

Wazne jest, bySmy pamiqtali, 2e przy tworzeniu aplikacji z logowaniem powinniSmy

ozw azy c n ast g p u j qc e p od stawowe kwe st e d otyczqce zab ezpi e cze n'.
r i

1. Czy dostqp do stron mozna uzyskai tylko po zalogowaniu? JeSli tak, to czy do
wszystkich, czy tylko niektorych?

2u r.-)
ei_*
 Rozdzial 7. r Od pomyślu po wdrozenie
-
praktyczne zastosowanie zdobytej wiedzy

UWAGA cd.
+ 2, Czy planowany system zabezpieczeń jest na tyle dobry, ze jego zlamanie nie jest pro-
ste? [Warto w tym miejscu dodaó, ze praktycznie nie ma systemow ktore nie moglyby
byc zlamane ,rrzeba stosować lakie zabezpieczenia, by naklad sil i środków do ich
zlamania byl zbyt duzy, zeby się to oplacaio potenclalnym hakerom, Lista nalpopu-
larniejszych atakow jest co roku uaktualniana przezorganizację OWASP (Open Web
Application Security Project)]
3. Czy login i haslo w bazle danych są zapisane w postaci zaszyfrowanej? Jeślitak to
jakich algorytmow szyfrujących uzyto?
4. Czy dostęp do bazy danych mają wszyscy zalogowani uzytkownicy, czy tylko ci, dla
ktorych ustawiono określone role?

Po otrzymaniu odpowiedzi od klienta |lznano, że nie pottzeba żadnych elementów

uwierzytelniających, bo ze wzgIędu na wiek użytkowników i na to, że nie wszyscy
potrafią jeszcze pisać i czytać, system logowania mógłby wręcz przeszkadzać w korzy-
staniu z aplikacji.
Kiedy członkowie zespołu znają jużbardziej szczegółowo wymagania klienta, urucha-
miane są liczne procesy w działach, które pozyskują projekty dla firmy.

UWAGA
Na tym klientowiwstępny, ale
prac kosztorys, często rozp isu;e się zadania na poszczególne
dla poszczegoInych osob w projekcie wyznaczone
dopiero po podpisaniu umowy lub iu przetargu,

Nawet w przypadku aplikacji darmowych kalkulowane są koszty utrzymania serwera.

Potrzeba dużo czasu na przeprowadzenie konsultacji z innymi zainteresowanymi (naj-
lepiej z grupy docelowej użytkowników).
-

Jeśliwybierzesz karierę programisty, często będziesz się spotykac ze sformulowaniem:

, Aplikacje mają dzialać w architekturze klient-serwer", Warto wyjaśnić,co ono znaczy.

202
 7,2- Etap drugi oferta

DEFlNlcJA
klient-serwer (ang clientlsenter) to architektura systemu komputerowego, w szcze-
golnościoprogramowania, umoz|iwiająca podzial zadań. Serwer zapewnia uslugi dla
k|ientow (zazwyczal aplikacjizainstalowanych na komputerach uzytkowników; mogą byc
nimi nawet zwykle przeglądarki internetowe) zgIaszających do serwera ządaniaobslugi
(ang, servlce request), Glowną za|etą architektury k|ient-serwer jest Io, że przez siec
są udostępniane jedynie konkretne odpowiedzi na konkretne pytania a nie cale pliki
czy programy do wykonania lokalnego, jak to się odbywało w dawnych architekturach
serwerowych,

. Etap drugi oferta

-
Po skompletowaniu dokumentów i odpowiedzina niezbędne pytaniazostaŁaprzygo-
towana oferta projektowa. Oferta na realizację projektu na ogół składa się z wyceny
i dokumentów analitycznych, w których zawarty jest dokładny opis, jak mabyć ztea-
lizowana aplikacja pod względem technicznym i merytotycznym. Niezbędna jest też
wizualizacja.

Pruykład,7.1
W tabeli 7.1, przedstawiono przykładową wycenę prac. Wspomniana w rczdziale 4.
liczba MD, określająca pracochłonność,jest nakażdym etapie mnożona przezliczbę
pracowników realizujących zadanie; na tei podstawie Wznacza się kwotę do zapłaty,
Robi się to w ten sposób, że całkowitą liczbę MD (widać ją w ostatnim wierszu tabeli)
mnoży sięprzez wynegocjowaną stawkę za dzień prary. W negocjacjach biznesowych
na wysokim poziomie nie rozdziela się stawki programisty od stawki analityka czy
testera. Zatem końcowa kwota projektu wynosiłaby 307 .wynegocjowana stawka.

Tabela 7.1 . Przykładowa wycena prac

Planowane prace Liczba MD Liczba testerów/ Suma MD zuwzględ,-
pro8ramrstow nieniem liczby teste-
rówlprogramistów
Weryfikacja scenariuszy 3 15

Testy akceptacyjne 6 90

Testy eksploracyine 3 '

6 18

Testy regresji 7 6 42

Zapoznanie stę 6 30
z dokumentac j ą/aplikacj ami

J 9

-}
203
 Rozdział 7, I Od pomyslu po wdrozenie
- praktyczne zastosowanie zdobytej wiedzy

+
Planowane prace Liczba MD Liczba testerów/ Suma MD zuwzględ,-
programistów nieniem liczby teste-
rówlprogramistów
Tworzenie dokumentacji _-) 1 3
(raportn podsumowania)

Testy wydajnościowe 2 2 4

Testy bezpieczeństwa 3 2 6

Prace programistyczne 30 3 90

Liczba MD 76 307

Decydującymi czynnikami, ktore wplyną na wybor ofeńy, są;

. budzet,
. sklad zespolu projektowego (czy są dostępne osoby z odpowiednim doświadcze-
niem),
. wstępny projekt wizualny w postaci makiety

Często na tym etapie zapadalą decyzje o wstrzymaniu projektu najczęstszym po-

-
wodem 1est zbyt maly budzet lub zbyt krotki termin realizacji zlecenia (klient oczekuje
szybkiego zakonczenia prac, nie biorąc pod uwagę czasu poświęconego na analizę
rozwiązania).

Na podstawie złożonych ofert władze przedszkola podjęły decyzję o rłyborze firmy

wykonawczej.
Firma, która wygrała konkurs, jest przedsiębiorstwem z kilkuletnim doświadczeniem
w realizacjiprojektów informłrycznych. W jej portfolio znajduje się m.in. aplikacja do
gry miejskiej opafia na geocachingu (uczestnik takiej gry na podstawie lokalizacji GPS
dowiaduje się np., że w danym miejscu jest ukryty przedmiot).
Wybrany wykonawca zaproponował stworzenie prostej gry polegającej na wyjściu
zlabiryntu dzięki sterowaniu postacią za pomocą słów po angielsku.
Prace nad większością pro|ektów firmy wykony,wano, opierając się na Agile, ze względu
na większe zadowolenie klienta, który na spotkaniach podsumowuiąrych mógł zobaczyć
efekty prac. W taki sposób będzie realizowana także aplikacja dla przedszkola.
Na czele zespołu technicznego stoi tech team leader (osoba o bardzo wysokich kom-
petencjach technicznych oraz miękkich, potrafiąca kierować grupą. Nie należy mylić
tej roli z rclą atchitekta, który ma za zadanie odpowiednio zaprojektować aplikację
pod kątem rozwiązań technicznych) z wieloletnim stażem. W skład zespołu wchodzi
dwóch juniorów (programistów z niewielkim stażem) i jeden mid (mający juz pewne

204
 7,2. Etap drugi ofeńa
-
doŚwiadczenie). Wspiera ich analityk z wieloletnim doświadczeniem. Do dyspozycji
mają również zespół testerów z koorłnatorem testów.
Siedziba firmy znajduje się w innym mieście niż przedszkole.
Zdecydowano, że projektbędzie miał postać labiryntu, z którego będzie można wyjść
za pomocą komend tekstowych w języku angielskim,
Na spotkaniu z dostawcą usług zostaĘ ustalone następujące kwestie, które później
opisano w dokumentacji technicznej i merytorycznej;
1 , Celem współprary jest gotowy produkt aplikacja webowa o nazwie Labirynt,
w której przedszkolaki będą wpisywać -słowa w języku angielskim, wybierając
kierunek poruszania się.
2. Architekt zarekomendował, aby napisać aplikację webową w języku JavaScript,
zwykorzystaniem kodu HTML. Dzięki temu aplikacjabędzie mogła być urucho-
miona na tóżnych platformach.
3. Ustalono skład stałego zespołu projektowego (tabela 7.2). Oczywiściena poszcze-
gólnych etapach projektu będą się pojawiać role spoza poniższego zestawienia.
Odgrywający te role będą wykonywać swoje prace w węższymzakresie czasowym
niż ci,którzy wchodząw skład stałego zespołu.
Tabela 7.2. Zestawienie rol i czynności

Project Manager Podział zadań pomiędzy członków zespołu, organizacja czasu pracy
swojego i podwładnych, zakup produktów i usług niezbędnych do
rcalizacji projektu (np. oprogramowania, licencji, sprzętu), komu-
nikowanie się z klientami i członkami zespołu, kontrola jakości
wykonywanych zadan pro j ektowych, zat ządzanie budżetem pro j ektu,
ocena ryzyka związanego z realizacią pro|ektu.
product owner Przygotowanie wizii produktu, ptzeptow adzanie badań rynkowych
w grupie wiekowej zbliżonej do grupy docelowej, zatządzanie backlo-
giem produktu, porządkowanie elementón, backlogu.

Tester Plzygotowanie danych testowych niezbędnych do przeprowa dzenia

(dwie osoby) testów oprogramowania, przeprowadzanie testów na podstawie
przypadków testowych oraz pfzeprowadzanie testów eksploracyj-
nych, pie}ęgnacja repozytorium testów regresji, zgłaszanie błędów
i retestowanie plzygotowanych poprawek błędów.

Programista Przygotowanie rozwtązania zgodnego z wymaganiami, implementacja

(dwie osoby) testów jednostkowych, debugowanie błędów i ich poprawienie.

Analityk Kompletowanie i analiza wymagań, tworzenie dokumentacji zwią-

zanei z analizą, przegląd i akceptacja przypadków testowych i planu
testów, przegIądi analiza zgłoszeń z testów dotyczących kwestii nie-
objętych analtzą, a mających istotny wpŁyw na wytwarzane opro8ra-
mowanie. Zaprojektowanie systemu zgodnie z wymaganiami.

205
Rozdział 7. I od pomysłu po wdrozenie - praktyczne zastosowanie zdobytej wiedzy

1 . W wyniku ustaleń wspólnie podięto decyzję o rezygnacji z roli koordynatora te-

stów ze względu na niską szczegółowośćaplikacji, jak również ograniczony budżet
przedszkoIa.
2. Wybór narzędzi w7brano narzędzia darmowe, tj. Trello (do rozpisania zadań
-
dla programistów i testerów) oraz Testlink (do tworzeniapr4rpadków testowych).
Dodatkowo Jira pełni funkcję narzędzia do zatządzania projektem korzysta z niej
Project Manager i na podstawie danych tworzy treśćwiadomości kierowanych do
-
zespołu i do klienta. Jeślichodzi o narzędzie do tworzenia oprogramowania, to
firma posiada niezbędne licencje, w związku z czym ich koszt nie zalicza się do
końcowej cerry za przygotowanie programu.
3. Wybór metodyki zdecydowano się na Scrumban. Zrezygnowano z codziennych
-
spotkań (ang. daily),

UWAGA
Liczba rol powolanych w projekcie jest zalezna nie ty|ko od wybranej metodyki, ale tez od
dostępnych zasobow ludzkich, jak rowniez od budzetu klienta (zamawiającego uslugę)

7.2.1 . Przygotowanie tablicy Scrumban

Prace przygotowawcze nie powinny sprawiać problemu nawet osobom zaczynającym
przygodęztąmetodykąTwotząc tablicę (rysunek 7,I), należy przestrzegać kilku zasad:
o Tabela musi zawierać podstawowe kolumny z Backlog rejestr, To Do do zro-
bienia, In Progress praca w toku, Done gotowe.
- -
o - -
Należy ustawić limit zadań; po umieszczeniu listy zadań w kolumnie Backlog lsta-
wiamy limit postępu prac dla tej kolumny. Zespół przesuwa zadania z kolumny
Backlogw prawąstIonę tabeli, ażstanje się ona pusta, co jest dla zespofu informacją,
że trzeba zaplanować kolejne zadania. Dobrą praktyką jest dbanie o to, by liczba
zadafiw kolumnie Backlogbyła dwarazy większaniżliczbaptogramistów w zespole.
. wyszukanie i zdefiniowanie
tzw. wąskich gardeł. Warto Backlog
rejestr
ToDo-
do zrobienia
ln Progress
praca W toku
Done
9otoWe
podzielić kolumnę In Pro-
gress na mniejsze kolumny,
w zależnościod speryfiki pro- Kierunek
jektu, aby w drożyć oddzielne
ffitr
kolejki zadań
Eu@. ffi@,
limity WIP. Takie podejście
p ozw ala zidentyfi kow ać w ą-
skie gardła
- punkty, które
spowalnia j ą ptzepŁyw proce-
su i mogą go nawet całkowi-
cie wstrzymać. Rysunek 7.1.
Przykładowy szablon tablicy Scrumban

206
 7.3, Harmonograrn prac

a Pomiar i kontrola. Dwa najważniejsze wskaźniki to średni czas oczekiwania (czyli

czas od momentu zgłoszenia wymagania przez klienta do momentu uzyskania
w pełni działającej funkcjonalności w środowisku produkcyjnym) oraz średniczas
wytworzenia (czyIi czas, jaki zespół poświęciłna pracę nad danym wymaganiem).

. Harmonogram prac
Ptace zaplanowano w trzech sprintach, każdy z nich ma trwać dwa tygodnie. W zesta-
wieniu (tabela 7.3) widnieje ponadto sprint 0. (jeden Ędzień) jest to czas na robo-
-
cze spotkania, przygotowanie sprzętu, przekazanie wszelkich informacji o projekcie,
zapoznanie się członków zespołu itp.

Tabela 7.3, PrzykIadowy podział sprintow

Cel sprintu: zapozna- Cel sprintu: uzyska- Cei sprintu: do- Cel: oddanie całej
nie się ze stosowanymi nie widoku z obiek- danie ścian w la- aplikacji spełnia-
tozwl,ązaniami i apli- tem oraz sterowanie biryncie i obsługa jąceI wszystkie
kacjami. nim za pomocą ściann początku warunki okreśIone
wpisanego słowa. i końca labiryntu. w wymaganiach.

UX designer: realiza- Programista: realiza- Programista: Programista: reali-

cja makiet zgodnie cja możliwlch kro- reallzacia kroków zaciawymagań oraz
z ustaleniami z klien- ków użytkownika. w iabiryncie. dodanie listy ko-
tem. mend widocznych
Architekt: rozwiąza- Tester: testy Wy-
dla użytkownika,
Plo8lamista, testel, nie problemu prze- bierania kroków.
refaktoryzacja kodu
analityk; wdrożenie chodzenia między
Klient: testowanie (czyli zwiększenie
w projekt konfigu- ścianami.
-
racja środowiska.
bieżąceI wersji jego czytelności oraz
Tester: rozpisanie aplikacji. optymalizacja) na
Architekt: decyduje, przypadków testo- podstawie uwag po
Drugi programi-
z 1aktch technoiogii wych do realizowa- przeglądzie kodu.
sta: przegląd (ang.
będzie korzystał nej funkcji.
review\ kodu. Tester: testy norłych
zespół, uwzględnia|ąc
wymagań + testy
jego umiejętniości.
regresyjne.
Projektu|e caĘ system
rłrysokopoziomowo. Klient: realizacia
testÓW po stronie
klienta.
Tester bezpieczeń-
stwa: testy zabezpte-
czeń aplikacIi.

Tester wydajnościo-
wy: testy wydajno-
ściaplikacji.

207
Rozdział 7, r Od po wdrozenie praktyczne zastosowanie zdobytej wledzy
-

4. Rea|izacja prac projektowych

W niniejszym podrozdziale skupimy się na rolach osób zaangażowanych w projekt
w poszczególnych fazach jego realizacji oraz na wykony.wanych czynnościach,a także
na re jestrow aniu zadań w narzędziach.

7.4.1. Sprint O.
W ramach prac nad tzw. sprintem zerowym niezbędni będą specjaliścispoza stałego
zespołu projektowego. Po zapoznaniu się z koncepcją rozwiązania UX designer przy-
stępuje do realizacji makiet. Makiety mająza zadanie przedstawić w graficznej postaci
propono\^/ane rozwiązanie wraz z kompletną kolorystyką i nazewnictwem.

ClEKAW(,STKA
UX designer to osoba odpowiedzialna za zbadanie potrzeb potenclalnych uzytkownikow
aplikacji, dowiedzenie się, czego wlaściwie oczekują, i doprowadzenie do dostarczenia
produktu o obsludze intuicyjnej, realizowanej naturalnie, wręczbezchwiIizastanowienia.
Zajmuje się więc projektowaniem zorientowanym na czlowieka ijego potrzeby.

UX designer zdecydował, że użytkownik będzie wpisywał kroki w polu tekstowym

(textfield). Poniżej będzie widział listę dostępnych kroków (textarea). Następnie zosta-
nie użyty komponent grafiki (image). Poryższe ustalenia zostaĘ zaprezentowane na
szablonie próbnym makiety (rysunek 7.2).

Realizacja kroku:

Lista dostępnych kroków:

Left
Ri9 ht
Up
Down

Obraz labiryntu

Bysunek 7.2. Szablon probny makiety

20B
 7.4. 1ealizacja prac projektowych

Analityk po dokonaniu analizy wymagań i skonsultowaniu się z architektem IT tvvorzy

Wtyczne, na podstawie których konfigurowane jest środowisko testowe.
Następnym krokiem jest wspomniana jużwyżej (w tabeli 7.3) konfiguracja środowiska,
w której biorąudział programista i tester. Tester sprawdza, czy stworzone środowisko
testowe jest zgodne zwymaganiami, np. czy naurządzeniach mobil4ych jest właściwa
wersja systemu Android, czy zainstalowane przeglądarki są w wymaganej wersji.
Kontrola wykonanych zadań to rola Project Managera, który korzystając z narzędzia
Jira, wykonuje następujące czynności:
1 . Wprowadza wszystkie zadania, które mają być wykonane w ramach reaIizacji
projektu (rysunek 7.3).

łcj.*ł / l.łiy* j b!]l&!18

Back|og

Tylko}łcie.głażedio9t.tr|,zókiu.lizoBón.
" o*

ffifi_.,

§:' Wykoranb s.en.ilsży teliry.b HB5 .

& Pżygotcknie s.enł.nlsry i€§ióry€h Lłg-l 1

§& fua|iża.ja.iqoryimu lok?lieatrb łia.y w l.§lF.ie n8 1 1
§§ Plżygoio"€ni9 l]3ł konir.liej llt z 1'

§' spr#sie gotoMti spEęb mobilĘg !B] l

Rysunek 7.3. Przykładowy widok na backlog projektu

2. Następnie dzieli zadania na etapy, w których mająbyć one realizowane (rysu-

nek 7.4).

Ę
!Ź spróvdz€n]€ stcMś.i splżęi! mobibp ug l 1
§ Pl;ygctowani. lirty kontolnej lł z t
& Rs]]z..,]a o!6dżeria Png ! kdne lp,l 1

3 4lo9, &Z.owaiie :ijr:

" aabli.a sPrint ż ] ;r]'r,żgr. Ptałuj ryinl ,

PrygctowanE s.ena.iusry tesioryh Lge f

] ż!i:]:ż:l. asż..c{.i]. !

- TabltasPriŃ3 ].dll!łij,

Rysunek 7.4. Przyktadowy widok back|ogu z przydzieleniem zadan do sprintow

209
\ozdziaI 7, r Od pomystu po wdrozenie
- praktyczne zastosowanie zdobytej wiedzy

3. Po podziale zadań na etapy przystępuje do przydzielaniaprac konkretnym grupom

lub osobom . Ze względu na to, że budżet jest ograniczony, watto sięgać po na-
rzędzia bezpłatne, takie, które nie zablrzą cyklu życia projektu otaz nie utrudnią
komunikacjiiprzejrzystości. Poniżej widać proponowany podział zadańw narzę-
dziu Trello (rysunek 7.5).

Rea];:g.]i źi§ełĘsr* ]ikaliż..]i y!yj!ć'e " l{'ykgn§iie g.e§;.irgry te§iB*}.*' h

*łśWietlęni€ l'§{, dc§]iępny.h kr§kć§ §Pr3*dZEfr ]€ g8t§dcśd sFżĘl!

fióbi'nąo

lś8lielió §5idre]3 png * k6d?i€ Piry§ateł§sie :aeBer;§lay łe9tł*1{h

*ealiźaE; wld6ku l b']liyriu P€Jqaigłrilie ]

j§ry kg*ireinE]

?eat zaąa ,ł}&żź.ak akJ ćlts

*§adżBn€§B .b'.kt!

Regliztda :l 96Ąrał ]oŁaliz§w§n]a

ć:)^,. u] l]h Ą,n.jA

Rysunek 7.5. Przykladowy widok nazadania w Trello

7.4.2. Sprint 1.
Kolejnym etapem jest sprint pierwszy. Programiści przystępują do tworzenia oprogra-
mowania, a testerzy przygotowują scenariusze testowe
uzyskanych od analityka i Product Ownera_
- na podstawie informacji
Efektem zakończenia sprintu ma być uzyskanie widoku obiektu, który przemieszcza
się w dwu kierunkach: w lewo albo w pfawo po wpisaniu odpowiednio słowa
leftlub right. - -
Podczas prac proglamistycznych pojawił się problem
- mianowicie obiekt ,,przecho-
dziŁ" ptzez ścianylabiryntu. Programiści musieli opracować algorytm, który realizował
to zadanie.
Na tym etapie stwierdzon o, że należy zastosować schemat blokołyy do opisu problemu. Li-
der techniczny projektu zaproponował, by wykorzystać właściwości obrazu (rysunek 7.6).

UWAGA
KoIory w obrazach w postaci cyfrowej reprezentowane są przez liczby określalącestopień
nasycenia trzech (lub czterech w schemacie CN/YK) kolorow skladowych: czerwonego
(red) zielonego (green) i niebieskiego (blue) stąd nazwa RGB. Ko|or czarny reprezen-
-
towany jest w tym schemacie przez wartości zapisywane w nawiasach po ko|ejnych
przecinkach (0, 0, 0) a bialy to (255, 255,255).
-
-

210
 7,4. Realizac.]a prac projektowych

start

obraz, X, y

Tak Tak Tak

X>O&y>0

WyśWietl komUnikat PobierZ

o Wyjściu poza Wycinek obraZu
labirynt

2weryńku.j,'
czy punkt obraZu czy punkt obrazu
je5t koloru je5t koloru
WyJ scla

Tak

WyśWieti komunikat WyśWietl komunikat

o odnalezieniU Wyjścia o odnalezieniu ściany

Kon iec

Rysunek 7.6. Schemat blokowy odnalezienia wyjściaoraz ścianyw Iabiryncie

Programiści wrazzliderem technicznym znaleźliploste i szybkie rozwiązanieproblemu.
Testerzy ptzygotowali zestawy testów. Nazwa każdego znichodpowiada za konkretną
funkcję (rysunek 7.7).
o Left oznacza kierowanie obiektu w lewo.
. Right ozuacza kierowanie obiektu \^/ prawo.
o up oznacza kierowanie obiektu do góry.
. Down oznacza kierowanie obiektu do dołu.
. wprowadź kierunek odpowiada za możliwośćnadania obiektowi dowolnego kie-
runku, wybranego z |isty.

211
F'ozdzial 7, r Od pomlstu po wdrozenie
- praktyczne zastosowanie zdobytej wiedzy

Fr Ji;ićgj ĘpelEjj

§ale! 3ł83 *8riłn§

§§le]a §ł§9 §*i§n§

§*i*]l §*ee §pligl,§

'|1r.li

: lHerńdrewdź§ińdEffid

e ć] Up {1}
F f] Leff {1}
r § Rig'lt (t]
§ §Wp.e*a&kisunek{1}
i §tsWtrif}

Rysunek 7.7. Widok na zestaw testow w narzędziu TestLink

7.4.3. Sprint 2.
Podczas sprintu drugiego prace programistyczne są już mocno zaawansowane, Efekty
tego sprintu to:
o dodanie ściani obsługa ściany w labiryncie,
r implementacja początku i końca Iabiryntu.
Okazało się, że wytworuony w tym sprincie przez młodszych programistów kod (dostęp-
ny jako gałęzie
- branch - v/ systemie kontroli wersji) wrymagał zoptymalizowania,
dlatego \^/ezwano bardziej doświadczonego programistę, który mu się przyjrzał i za-
proponował wprowadzenie poprawek w algorytmach. Programista ten, przeglądając
kod, zwróciŁ także uwagę na kilka innych miejsc, które wymagaĘ poprawienia. Po
wprowadzeniu wszystkich zgłoszonych pr zez niego poprawek aplikacj a zaczęła działać
znacznie szybciej.

Ptzykład7.2
Oto przykładowy przegląd kodu (w nomenklŃurze programistycznej Code Review,
w skrócie CR). Programista napisał funkcję przedstawioną na listingu 7.1.

Listing 7.1
Kod funkcji zwracającej numer planety w Układzie Słonecznym

212
 7.4. Realizacja prac pro;ektowych

function draw (numb) 1

if (numb :: 'Merkury') {

return L;
} eise if (numb -: "ń]enusl ) {

r^ . s );
} eise if (nunb
:: ' Ziemia' ) {

return 3;
}e]se if (lurnb :: 'Mars') {

return 4;
}eise if (numb := 'Jcwrsz ') {

return 5;
I

else if(numb :: 'Sat_urn') {return 6;

}else if (rumb := 'Uran' ) i

return J;
}

else if(numb -: 'Neptun') {

re ,rn 3;
}

Podczas przeglądu tego fragmentu kodu drugi programista zgłosił następuiące uwagi
(to zawsze są uwagi, a nie nakazy; można się do nich odnieśćpoprzez dyskusję, nie ma
obowiązku natychmiastowego poprawiania kodu):
1 . Ogólny opis; trudno powiedzieć, co metoda draw ma robić1; z kontekstu mogę
wnioskować, że zwtaca numer kolejnych planet, licząc od Słońca.
2. Brak \Ą/eryfikacji poprawności wprowadzonych danych (co zrobi pro8ram, ieśli
wprowadzi się liczbę albo ciąg znaków inny niz w kolejnych instrukcjach warun-
kowych?).
3. Dlaczego nie użyto tablicy? Byłoby prościei i szybciej.
4. Brak formatowania (wystarczy domyślne,za pomocą skrótu klawiszowego).

UWAGA
ZasIrzezenie wyrazone w punkcie drugim najprawdopodobniej zostanie sformulowane
w języku technicznym: ,,Brak walidacji wprowadzanych danych".

Jak widać, uwagi są oczywiste. Warto zadbać o to, by kod zawsze był weryfikowany
ptzez drugą osobę, bo pozwoli to znaleźć rzeczy, które nie zostały zauważorre przy
pierwszej implementacji.

213
\ozdzial 7. l Od pomysłu po wdrozenie
-
praktyczne zastosowanie zdobytej wiedzy

Uwagi zgłaszane w procesie Code Review nie mogą być nacechowane negatywnie,
powinny być formułowane spokojnie i bez emocji. Ich celem nie jest wyśmianie czy
pognębienie mniej doświadczonego kolegi,-ale doprowadzenie do udoskonalenia jego
umiejętności technicznych a często także umiejętności przeprowadzającego przeg|ąd.
-
UWAGA

nl esprawdzony kod nie moze

W tym sprincie, na specjalnym, poświęconymtemu spotkaniu, po ruz pierwszy zapre-

zentowano klientowi aplikację. Klient uznał, że;
o Aplikacja spełnia założone wymagania.
r wybranie formuĘ labiryntu jest trafne, bo dzieci lubią szukać wyjścia.
Zgłosił|ednak także pewne zastrzeżenia i propozycje:
o Poprosił, by dzieciom na wysokości ich wzroku wyświetlałasię lista dostępnych
kroków.
o uznał, że dostępnych jest za mało kierunków.
o Zasugerował, że dobrze byłoby ładować kilka labiryntów, w za|eżnościod wieku
przedszkolaka.
Na takich spotkaniach demonstraryjnych jest obecny analityk, który ustalał założenia
z klientem. Po dyskusji pomiędzy analitykiem a klientem uzgodniono, że ostatnie dwa
punkty nie mieszczą się w pierwotnych założeniach,a zatem mogą być realizowane
jako poprawka dodana już po wdrożeniu aplikacji (tzw. fix).

W kolejnym sprincie testerzy przystępuiądo wykonania testów gotowych już funkcji.

Wyniki testów zaznaczale sąw narzędziu Testlink, a raport z ich wykonania udostęp-
niany jest całemu zespołowi. Przykładowe zestawienie wykonanych testów przedstawia
rysunek 7.B.

UWAGA
W przypadku duzych projektów z budzetem pozwalającym na wykonanie automatyzacji
testów, warto miec na uwadze narzędzia, w ktorych można taką automatyzacjęprze-
prowadzic, Niezbędne kompetencje do wykonania testów automatycznych ma tester
automatyzujący lub programista,
Obecnie nalpopu|arniejszym narzędziem do automatyzacli jest Selenium

214
 7 .4, Aeal zac)a prac prolektowych

F'lll€i-ii te5b!r! r ŁśbĘn!

il;n.e5ti] :Tę5t\,-]fugkj{.§aln9

],, ,] łi ] :oi.i ]ł].n

łi-,la;,.r'1;.,-1i11-1 'i.:1:'c.,.,::'-::Je'(€'i:iF9f'P,,r,'iJl.CJJilJ]
tlejl:jjEs:ra:i,f,e:ej|:-;5s_7,;ói.:a-o.,|:

Z$tal,rtertil, §a?r*] lii*rly}r9**!} l &] pa?!ąun}

* ł.i 2 c.a ] : i"),i io],f
, ]:.] ]
,n*.a
r Li.; .] ] 0l1,,;
l l,; ia.i ,]ir],ł
l]r ] I ii-a
ł
1_1

1 :ir,] n,i , a,n .n ]:,a

E;JC.r J_-l 6]./,iś 1 !,, ,,i 5:.] , Jz!5jlial] l€,.t tl,ói. |€r|rrlał ;c_jr,,1z:zegc pa;iollr;, rlyliłl po,1i:izr;:},a]] ż t;|li !łcZ€5|c,|i,,. jg
Z, :;i-l . .:-j:i 7;Ęl,... ., - ,,, Jl\1-J?.._j.], .,

Rn?en! ll'F]rł{&]§dry icr] zói}l!kór.tei

irrdlil ł] i5,t ] i1 i5ł
Ec!afi psłrż|j€ l},niij lr3ieier] ilirrrtelrt l€st.itliplirryl.t ł.Zygrrłó,1 i€§iDli}t,,i ]e_ii l;ażłi]r l, ;o.51.1rle l:eirłili i pil;lcśri
"';tej 'nf:rll,;li] {|!";.Iy;elJ€F I€5ió!rfl§jrżiśż |6c&r:ry]€rlra_ii i ł::łr:jenicri łł;ii_qłrucli,

Rysunek 7.8. ?rzykladowe zestawienie wykonanych testow w narzędziu Testlln<

7.4.4. Sprint 3.
W ramach plac na tym etapie odbywają się pełne testy, zarówno funkc;'onalne, jak
i niefunkcjonalne.

Częśctestow niefunkcjonalnych zostala zaprezentowanaw rozdzia|e 4. Pozostale za-

Iiczające się do tej grupy to,
. Testy uzyteczności testy, podczas ktorych sprawdza się latwośc korzystania
-
z oprogramowania bądz to, jak szybko uzytkownicy uczą się z niego korzystać,
. Testy pie|egnowalności
-
następuje w nich sprawdzenie, czy oprogramowanie latwo
się modyfikuje lub czy laiwo dostosowac je do nowych wĄ/magań,
. Testy niezawodności w ich trakcie określamy niezawodnośc naszego oprogramo-
-
wania, Sprawdzenie oprogramowania odbywa się poprzez wykonanie wymaganych
funkcji w określonych warunkach,
. Testy przenosności proces testowy, dzięki ktoremu określamy, jak latwo oprogra-
-
mowanie moze być przeniesione z jednego środowiska na drugie,

215i,)
Rozdział 7, r Od pomyslu po wdrozenie
- praktyczne zastosowanie zdobytej wiedzy

Wyniki testów funkcjonalnych są rejestrowane w narzędziuTestlink. Każde wykonane

zadaniejest przenoszonena kolejną docelową tablicę w narzędziu Trello (rysunek7.9).

nE.lic.]: ]lgaae! !ck"l;ż!.jj §}jł:a Bś]'ra.j.r]qóryćm! lob]E&Enk sp€xd.enie g§t§sgśri §peęiu

]&yixi*leii! li§ry &siępn * krobu

::;: lą§cioa3}le saenafilsąl i€sio*}.i

łE.i*.F .*dzEni3 prg * kcćzF lE ]96i.*n€ |*y k3niBlnej

§e3ł6.ji Md*].! / la}i}f,* fualiż§€F tr*|na !rłl(! d]a

g§śd:grąó 3bi€kar

Rysunek 7-9. Przykładowy widok zadan w Trello

Prace programisłczne zostały zakończone sukcesem. Błędy krytyczne nie zostaĘ zna-
lezione.
Po zakończeniu prac programistycznych oraz wykonaniu testów przyszedł moment
prezentacji ostatecznej wersji aplikacji klientowi. Najczęściejw takich spotkaniach
lczestnicząjedynie klient i dwie osoby reprezentujące firmę realizującąprojekt.
Na spotkaniu podsumowującym wszystkie sprinty uzgodniono, że udało się zmieścić
w budżecie, co było kluczowe dla klienta, a aplikacja dla dziecka w wieku 3-4lat
pozwoli mu nie tylko poznać podstawy języka angielskiego, ale także zaznalomić się
z kierunkami, co ma ogromne znaczenie na dalszych etapach edukacji.

Zgo dnie ustalono, że wy gląd aplikac j i (d e s i gn) należy dopracować, trzeba też wprowa-
dzić kolejne kierunki (lewy skos, prawy skos).

Najwazniejsza nauka, 1aka plynie zrealizacji tego projektu, jest następuląca: projekt rzad-
ko byriva zrealizowany w stopniu w pelni satysfakcjonulącym wszystkie strony. Najczęście1
przyjęte rozwiązanie jest formą kompromisu, Rzadko kiedy udale nam się zrealizowac
początkowe zalozenia w stu procentach i czasem trzeba pojścna ustępstwa, mając na
uwadze, ze to zadowolenie kiienta jest ostatecznie najwazniejsze,

Wiele projektów można wykorzystyłvać także w późniejszym czasie. Na przykład grę

Labirynt możnapóźniej sprzedać przychodni jako rozwiązanie dla dzieci oczekująrych
w kolejce do lekarza.

216
 7.5. Diagram Gantta charakterysVka, przyklady
-
. Diagram Gantta charakterystyka,
przyklady -
Skuteczna rcalizacja projektów czy też złożonych zadań wymaga jasnej komunikacji
iptzejtzystego podziału prac. Jednym ze sposobów na stworzenie preryzyjnego harmo-
nogramu pracy jest tzw. diagram Gantta, znany już od końca XIX wieku.
Diagram Gantta to nic innego jak graficzne zobrazowanie harmonogramu prac w pro-
jekcie czy zadaniu. Konstrukcja diagramu Gantta to kaskadowe zestawienie zadań,
operacji, czynnościlub procesów z czasemich trwania. Na osi X znajduje sięzazvrrycza1
ośczasu. Jednostki czasu, jakimi się posługujemy, zależą od tego, co obrazujemy
-
mogą to być minuty, godziny, ale też dni, tygodnie, miesiące czy.lata.
Na rysunku 7.1,0 widoczny jest przykładoury diagram Gantta wykonany w Excelu. Oś
pozioma to właśnieośczasu wytażona w dniach (zadania są realizowane od 1. dnia
miesiąca itrwajądo 14. dnia miesiąca), Ośpionowa to kolejne zadania-

harrnonograT o'T
llanlwaY 9 10 11 12 ,3 14

zeb.tssiE sBeE dE BYmtsEiń

*rą.EBtWBn iĘ ł}.rĘtłnieEbęd neE§ dB testós

Wairrtaty §§,j**tare
Frace pa§gaemi5tyEłE

PrżYEBto@nie 5€e§ąriu5ry tE5 tBw ydl

prcEe,]agBraF'5łEee
1iJ?k6nBn ie tst&# aU nk.j9naln}r.h
PF.e §.§E 6miltyEee
wYkaeesie łEstó§ n]e]i!ąkEi§raInxrh

Frale FaoE{§ffi5t!ćE*e
PrE}E§t§ffi eie rme*E tEltów
FEYgótednie instruk.ii użćkawnika
ZebBnle dokurentdji
P.redsłB*ienie klientei efekt&§ pGr

Planc!!Bn! aZe§ redlizącii rBdtsria

''
Rysunek 7-1O, Przykladowy diagram Gantta
Konstrukcja wykresu Gantta nie jest niczym skomplikowanym. Informacje i dane
potrzebne do jego sporządzenia to:
. nazw a czy nno ści l zadania l działani a/op e rac j i ;

. czas rozpoczęcia czynnościlzadanial działanial operucji;

. czas trwania czynnościl zadanial działanialoperac j i.

A oto główne korzyściwynikające ze stosowania wykresu:

o Wizua|izacja pomaga ułożyćsekwencję czynnoścido wykonania dla danej operacji
i dostarcza informacji o tym, ile czasu powinna trwać,

217
Rozdzial 7. r Od pomlslu po wdrozenie praktycZne zastosowanie zdobytej wiedzy
-
o Widok harmonogramu pozwala szybko namierzyćwąskie gardław procesie (jeżeli
ocz},wiściewykres dotyczy czasów trwania procesu).
o zyskuje się bardzo przejrzysty sposób. przekazania planu prac. Jego odczytanie
i zrozumienie nikomu nie powinno przysporzyć trudności.

. Proponowan e rozszerzenia aplikacji

wróćmy do naszej gry Labirynt. Jej najprostszą wersję (można jąpobrać z repozytorium
Pod adresem:- httPs://github.com/weronikakortas/labyrinth) można śmiałorózbudować,
chociażby dodając funkcję zliczania i zapisywania wyników.
Czas, jaki uPĘnął od chwili, gdy zostałpierwszy raz uruchomiony obiekt przesu\^/any
po labiryncie, aż do momentu rłyjścia,można policzyć, wykorzyśtuląc obiekt oate
w JS. Jest w nim m.in. funkcja now () , która wyświetla bieżący czas. Ustawmy więc
czas początkowy na czas pobrany przy użyciu tej właŚnie funkcji. IJzyskamy to za
pomocą polecenia:
Cons'L startTrme : Date. now ( ) ,.

W celu zmierzenia czasu łl,konania zadania obliczamy różnicępomiędzv czasem po-

czątkowym a tym, który zwróci funkcja now () w chwili wyjściaz labiryntu:
Const elapsedTrme : startTime Date. now ( ) ;

UWAGA
czas mierzony za pomocą funkcji now () zwracany jest w milisekundach. Aby zapre-
zentowac go uzytkownikowi, musielibyśmy przekonwertowac go na jakąśformę bardziej
czytelną dla czlowieka.

w c+ + mozemy zaimplementowac rozwiązanie, wykorzystując bibliotekę chrono

#rnclude <iostream>
#rnclude <ćhrono>

namespace Std:

int- main ( )

-+

21B
 7.6. Proponowane rozszerzenia aplikacji

auto start : hiqh resolution cfock: : now ( ) ;

// kod z implementdcjtl od weiicia do labirynru do wyiicia z niego

auto stop : high resolution_clock: : now O ;

auto duration : duration cast(microseconds>(stop - start),

cout << "Czas wyj5cia z labiryntu to "

(( duration.countO << " microseconds" << endl;

reLurn 0;

Skoro policzyliSmy czas prueiscia labiryntu, to teraz dobtze byloby 8o zapisae .

Sposob6w na zrobienie tego jest sporo. Opiszemy tutaj tylko jeden, podstawowy.
Mo2emy fiyttablicy wielowymiarowei, w kt6rej w pierwszei kom6rce przechowywane
bgdzie imig gracza, a w kolejnej znaidzie siq najlepszy uzyskany wynik (listing 7.2):

Listing 7.2
Zapisanie r,vyniku w tablicy wielowymiarowej
Iet scores: I

['Jan', 1.2],
// ...Pozostali grdcze

IrMichaL', 3.4)

W C+ + mozemy wykorzysta6 zapisywanie danych do pliku w formacie CSV czyli takiego

w kt6rym dane sq rozdzielone wskazanym przez nas wyrozniklem.
#include <fstream>
#include (sLring>
Using namespace std;
int main O {
string name : "Jan";
ant sccre - L.2;
fstream pfik("pIik.txt", ios: :ou1-) ;

+
-,
219 r '
I

--'";.
 Rozdzial 7. l Od pomysłu po wdrozenie praktyczne zastosowan ie zdobytej wiedzy
-
UWAGA cd.
+ if(plik.good()) {

plik << name << 'l- n << score;

plik.flush();
plik.close();
}

return(0);
}

W tym przypadku zdecydowaliśmy, że wyrożnlkiem będzie średnik.

Rownie ciekawym rozwiązaniemlest wykorzystanie struktury w C+ +. Struktura to zestaw
wlaściwościróznego typu.
#include {ioslream)
#include <string>
using namespace sŁd;
struct Player // deklnracja struktury
{

// clpis struktury

slrinq name,.

double score /.

i;
int main ( )

// tworzen.ie łlbiekttt struktury i wypełnidnie

P]aver or
t

Jdll ,

7.2
};

Player michal =

"Michał",
3.4
};

i/ wyśw ietlenie cńiektów

-+

220
 7 ,7 , Prawa autorskie

cout << "Ot,o lista gTaczy wTaz z ich wynikami"

+ ll : ll -
-nd-L |^ e dfi. tloil e

<( endl (( "wynrk " << jan.Score

<< endl
<< endl
<< endl << "imię " << mićhal.name
<< endl (( "wyrrik " << michaf.Score;
cin.get();
return (0 ) ,,

Struktura to w pewnym sensie maty obiekt. Dlaczego maly? Bo ma o wiele mniej mozli-
wości i funkcji niz tradycylny obiekt. Jednakze ma pewną istotną zaletę zuzywa mniej
pamięCi W komputerze,
-

N/ozliwości rozbudowania naszej aplikacji jest bardzo duzo.Zczasem zapewne zauwa-

zysz (i będziesz w stanie samodzie|nie opracowac) funkcje, o które warto ją wzbogacic.

prawa autorskie
"a /
Przygotowując się do prary programisty, warto poznać swoie prawa w zakresie pracy
wytwórczej. Jest taki rodzaj prawa, które specjalizuje się w zabezpieczaniu wytworów
naszej pracy to prawo autorskie. Podstawa prawna o prawie autorskim i prawach
-
pokrewnych to Ustawa z dnia 4 lutego 1,994 r., opublikowana w Dzienniku Ustaw nr
90,w pozycii 631.

Prawa autorskie to zespól norm i aktów prawnych malących na celu zabezpieczenie

wytworow ludzkie1 dzialalności przed n ieIegalnym rozpowszechnianiem, kopiowaniem
lub czerpaniem z nich korzyści majątkowych.

Prawa autorskie dzieląsię na:

o Autórskie prawa osobiste powiązania nazwiska autora z jego dztełem.
- prawa do
Prawa te nigdy nie wygasająisąz natury rzeczy niezblłvalne. Nie można się ich
ztzec ani przenieśćna inną osobę.

221
RozdŻd 7. r Od po wdrozenie praktyczne Zastosowanie zdobytej wiedzy
-
o Autorskie prawa maiątkowe prawa zabezpieczające interesy twórców utworów
albo wydawców, którzy nabyli- od autora pra\^/a majątkowe do rozporządzaniatymi
utworami. Prawa te łygasają po 70latąch od śmierciautora lub po 70 latach od
rozpowszechnienia utworu, gdy autof nie jest zrrany.
o pokrewne
Pra\^/a
- prawa do arĘstycznych wykonań, fonogramów i wideogramów,
nadań programów, pierwszych rłydań oraz .vqrldań naukouych i krytycznych,

UWAGA
W jakim celu wprowadzono prawa autorskie?
Prawa autorskie wprowadzono po to, aby chronlć interesy tworcow i wydawcow.
Co nie podlega prawu autorskiemu?
ochronie nie podlegają proste informacje prasowe lub informacje pochodzące od
instytucji;
. informacje o wydatkach,
. prognozy pogody,
. kursy walut,
, programy radiowe i telewizyjne (godzinowe spisy programow zamieszczane w ga-
-^+^^L\ )
LvLóv| | ,

. repertuary kin iteatrow,

' UStaWy i ich prolekty, aIakże dokumenty urzędowe i materialy, znaki i symbole oraz
opub|ikowane opisy patentowe lub ochronne.

Kiedy mówimy o naruszeniu praw autorskich?

Mówimy o tym np. w przypadku likwidacji podpisów zdjęć, udostępnionych np.
w ramach darmowych kolekcji na stronie internetowe j, otaz tzw ryfrowych ,,znaków
wodnYch", np. z logotypem autora. Nawet jeśli wymienione materiaĘ są udostępnione
darmowo, nie zwalnia nas to od respektowania osobistych praw autorskich twórry.
Tak samo jest w przypadku skryptów w progfamowaniu. Można z nich korzystać
w swoich programach, o ile autor Wtaził na to zgodę, jednak likwidacja komentarzy
z jego nazwiskiem lub adresem e-mailowym jest naruszeniem praw autorskich.
Naruszeniem praw autorskich jest też samowolne wprowadzenie utworu muzycznego do
sieci w Postaci pliku MP3 bez zgody osoby uprawnionei. Aby legalnie rozpowszechniać
utwory w internecie, należy zawsze uzyskać zgodę autora, producenta lub innej osoby
uprawnionej do utworu.

Jakie szkody może wyrządzić nanlszenie praw autorskich? Przede wszystkim są to:
. utlata przeztwórców zysków zĘtułu rozpowszechniania utworów;
3 straĘ firm zajmujących się dystrybucją i promocją utworów;
. straty państwa związane z nieodprowadzonymi podatkami.

222
 7 .7 , Prawa autorskie

7.7.1. Licencja
Licencja to nic innego jak umowamiędzy producentem (autorem lub wydawcą) aużyt-
kownikiem dotycząca zasad użytkowania produktu. Wyroby objęte licencją mają in-
strukcję instalacji oraz dają prawo do bezpłatnych porad i serwisu, łącznte z aktuali,
zacjami. Legalnie zakupiony program ma numer licencyjny (ptzekazywany w formie
drukowanei lub elektronicznej) słuzący do identyfikacji. Przed rozpoczęciem korzystania
z oplogramowania może być wymagana rejestracja lub aktywacja produktu.
W tabeli 7.4 zestawiono typy licencji wraz z ich charakterystykami,
Tabela 7.4. Zeslawienie typow Iicencji

Rodza| licenc|i Charakterystyka

Freeware Programy, które mozna wvkorzystl,łvać, a także rozpowszechniaĆ

za darmo. Nie wolno ich jednak sprzedawać ani dokonywać w nich
zmian, rlp. poprzez umieszczanie wewnątlz nich własnej rekla-
my mogą być rozpowszechniane wyłącznie w niezmienionej
-
formie.

Public domain Licencja czyniąca z oplogramowania własnośćogółu. W iej myśl

autor (lub altorzy) oprogramowania zrzeka się praw do upo-
wszechniania oproglamowanj,a na rzecz ogółu użytkowników. Do-
zwolona iest dalsza dystrybucia oplogramowaniabez zgody autora.

Shareware Oprogramowanie udostępniane bezpłatnie do testów. Każdy poten-

cjalny nabywca, przed podjęciem decyzji o zakupie, może gruntow-
nie sprawdzić w działaniu zazwyczal w pełni funkcjonalną wersję.

GNU GPL Zasady licencyjne okreś]oneprzez konsorcilm Free Software Fotłn-

(ang. General datitln. Jeśliktośwprowadza do obiegu oploglamowanie zawierają-
Public License) ce iakąkolwiek częśćpodlegającą licencji GPL, to musi udostępnić
wtaz zkażdą dystrybucją binarną jej postać źrodłową.

Licencja 8rupowa Licencja zezwalająca na użytkowanie oprogramowania w sieci lub

w zestawie komputerów, ffp. w szkole lub w pracowni, określają-
ca maksymalną 1iczbę stanowisk, na których wolno zainstalować
ob|ęte nią oprogramowanie.

Licencja Licencja uprawniająca użytkownika do zainstalowania nabytego

jednostanowiskowa oproglamo\Ą,ania tylko w jednym komputerze, obejmuiąca zakaz
udostępniania takiego opfogramowania w sieci oraz na innych
własnych komputerach,

Licencja na obszar Umowa między producentem oploglamowania a nabywcą upfaw-

niająca tego drugiego do sporządzenia określonej liczby kopii
zakupionego oprogramowania na swój własny uzytek. Takie
rozwtązanie jest często stosowane przez frrmy korz_vstające z sieci
lokalnych LAN.

223
Ąozdział 7. l Od pomyslu po wdrozenie praktyczn e zastosowanie Zdobytej wiedzy

7.7.2. Wfasnosc Intelektualna

omówiliśmy już rodzaje praw autorskich, teraz warto wyjaśnić,czym są elementy
własnoŚci intelektualnej. Otóż są to prawa doĘczące dóbr niemateńalnych. Termin
ten stosowany jest w różnych działach prawa regulująrych zasady korzystania z tzw.
własnościintelektualnej.
Podstawowym celem, ku któremu dąży większośćaktów prawnych dotyczących włas-
nościintelektualnej (z wyiątkiem znaków towarowych), jest ,,promowanie postępu''.
Według tej filozofii dzięki wymianie ograniczonych otazvlyłącznychpraw do prz.drt"-
wiania koncepcji i utworów zatówno społeczeństwo, jak i właścicielpatentu lub praw
autorskich czetpiązyski, co jednocześnie stanowi motywację dlarynalazców i twóńów.
Zakres ochrony poszczególnych praw własnościintelektualnej W Polsce jest różny
w zależnościod charakteru tych praw
o Dobra objęte prawem autorskim są chronione od momentu ich powstania bez
koniecznoŚci ich rejestracji. Na podstawie umów międzynarodowych ochrona ta
obowiązuje w prawie wszystkich krajach świata.
. w przypadku większościprzedmiotów własnościprzemysłowej (rodzaj pra\^/ wy-
łącznYch wYnikających z narodowego, międzynarodowego lub regional.r"go .rrtr-
wodawstwa i prawa te naleŻy rozumieć nie tylko w kontekście przemysłu ale także
,
handlu i rolnictwa lub regionalnego ustawodawstwa) dla uzyskania pełnej ochrony
Prawnej W}magane jest zgłoszenie do Urzędu Patentowego RP oraz wydanie przez
ten organ deqlzji w sprawie udzielenia patentu, praw ochronnych lub ptaw z rc-
jestracji. zakres tej ochrony jest ograniczony do terytorium RĘ a ewentualne jej
rozszerzenie wymaga zgłoszeń w urzędach patentowych krajów, w których prawa
mająbyć objęte taką ochroną.

. zakonczenie
Ten rozdział wieńczy początek Twojej przygody z tworzeniem oprogramow ania. Znasz
juŻ PodstawY Programowania, wiesz, jak testować aplikację. Znasz też zasady organi-
zacji pracy nad projektem. Na pe,\^/no pozwoli ci to lepiej ztozumieć pracę w branży
IT i być może w ptzyszłościsprawnie się w niąwdrożyć.
- -
MamY nadzieję, udało nam się zaszczepićw Tobie ciekawośćdotyczącątechnologii,
Że
podejścia projektowego czy też doboru natzędziwspierających proces,
I Pamiętaj ani analityk, ani tester, ani programista nie powinni stać w miejscu! Są
-
to zaw o dY, które wymaga j ą nieustannego p oszetzania posiadane j,w iedzy izdobl.wania
nowej.

224
 7.9, Zadania

. Zadania
Zadanie 71
Wypisz kolejne uwagi do kodu dotyczącego planet.

Zadanie 7.2
Wypisz cel sprintu 4. oraz zadania dla poszczególnych ról.

Zadanie 7.3
Dobierz drugą osobę do zespołu i podzielcie się rolami: jedno zWas niech będzie klien-
tem, drugie przedstawicielem firmy wTrkonawczej. Na podstawie Ćharakterystyki zamó-
wienia złożonego przez klienta przedstawiciel firmy powinien opracować listę zadań
dla poszczególnych ról w projekcie. Pruyjmijmy, ze klient nalega, by realizacja projektu
trwała krócej, niż wynika to z harmonogramu sporuądzone1o ptzez firmę wykonawczą.

Zadanie 7.4
Na podstawie informac i z rozdziaŁu utw ór z aplikac ę labiryntu.
j j

225
Rozdzial 7 l Od pomyslu po wdrozenie
- praktyczne zastosowanie zdobytej Wiedzy

226
 €ibtio
Certyfikowany tester. Sylabus poziol,ł1ll podstawowe 8o /STQBc'. Wersja 2018
V 3.1. Prawa autorskie wersji polskiej zastrzeżone dla O Stowarzyszenie Jakości
Systemów Informatycznych (SJSI),
Certyfikowany Tester. Syląbus rozszerzenia poziomu podstawowego. Tester zwitttty.
Wersja 2011.

Chrapko M., Scnun. O zwinnym zarzqdzaniu projektami, Helion, Gliwice 2012.

Gamma E., HeIm R., Johnson R, Vlissides J., Wzorce projektowe. Elełnenty programo-
wąnią obiektoweso wielokrotnego użytktt, Helion, Gliwice 2017.
Kaczor K., Scrum i nie tylko. Teoria i prdktyka w metoddch Agl/e, Wydawnictwo
Naukowe PW\ Warszawa ż0l4.
Pytel K,, Osetek S., Systemy opera.cyjne i sieci kornpu.terowe. Część1, WSiP, Warszawa
2010.
Pytei K., Osetek S., Systc,my operocyine i sieci komputerowe. CzęŚĆ 2, WSiP, Warszawa
z0l0,
Słownikterminów testowych ISTQBo. Wersja 3.3.1.Prawa autorskie wersji polskiej
zastrzeżone dla @ Stowarzyszenie JakościSystemów Informatycznych (SJSI).
Tomasiewicz J., Zdprzyjaźnij się z algorytmami, Wydawnictwo Naukowe PW\
Warszawa 2076.

Akty prawne
Ustawa z dnia 4 lutego 1994 r o prawie autorskim i prawach pokrewnych,
Dz.U. 1994 Nr 24 poz. 83.

zrodła internetowe
http s : // a gil em anife st o. o r g / i s o /pl /pr in cipl e s. html
htt p s : // dev do c s. i o /j cłu a s c rip t /
http s : / /hy gge r. io / bl o g/ how - u s e rs - s e e -kd nb an /
http s : / /l e an d cti onpl an.pl /w y kre s - gd n tta /
https://miroslawzelent.pl/informatyka/licenc je-programow-prąwą-ąutorskie/
http s : //pl.w ikip e di a. o rg /

227
B b| ografia

httlls://wearecreativeląbs.com/waterfall-vs-agile-roznice-pomiedzy-tradycyjnym-
d- zw inn ym - prl de j s ci em - do - zdr za d zan i a -p roj ektem /
https://www.srupa-t€nse.pl/blog/ttx-to-nie-ui-roznice-miedzy-user-interface-
a-u.ser-experienCe/

h.ttp s : //w w w. n ex i o.p l /bl o g / s c rumb dn /

http s : // ww w. w 3 s choci s. c om /

22B
 Sko Wl Z
dokumentowanie
A funkcji, 100
adres URL, 22 kodu, 98
algorytm szyfrującv ROT-13, 119 DOM, Document Obiect Model, 35
algorytmy, 100 DRl Don't Repeat Yourself, 97
heuryst},czne, ]21 drzelł.o decyzvjnc, 103
sortujące, 108
analit},k, 20.5
analiza punktów funkcyjnl.ch, 18,ł
F
aplikacje webowe, 3,ł
format
ASCII, 120 HTML,35
atttr luztlpcłnianie kodu. Jb JSDoc, 98
ftnkcje
dokumentacia, 100
B przekazanic paramctru, 83
biblioteka JSDoc, 98 lrl,wołanie, [34
błęd1,, 39, 1.52
BOM, Browser Object Model, 35
Bugzilla, 154
G
generowanie dokumcntacii, ż8

c Clt,76, 22
dodanie pliku, 24
menu kontekstowe,27
chmura, 16
Chrome, 28
konsola przeglądarki, 33 H
clean code, 97
harmono51ram prac,207
C SS. Lar.,adiIlg Stylc Shecr,. 32
crrdzysłów, 39 HP ALM, 8
cykl życia ekran 1ogowania, 8
błędu, i3 menu,9
projektu, 1B,ł moduł,9
czystv kod, 97 Defects, 10
Tcsting,10
panel
D administracyjny, 8
defekt,152 użytkownika, 9
definiorł.arrie klasy, B1 F{Tlv{L, HvperText Malkup Language, 32, 3,ł
cleklaracja zmiennej, 44, 50
diagram !
Gantta, 2l7
klas,726,127 lD[,, Integratcd Development Enl,ironment, 19
dokumentacja testołva, 159 Atom,20
lista kontrolna funkcjonalności, 173 Eclipse, 20
plan testów, 1-59 Intelli] JDE"Ą, 19
rapoIt błędÓ\Ą,, 17,+
Visual Studio, 19
raport testórłl, 1 75 WebStorm, 19
rejestr rvzyk, 174 implementacja wzorca, l 25
\(enaTiu\/e t(slo!Ą,C, l 65

229
skorowidz

instrukcje
sterujące, 69
M
Manifest Agile, 187
warunkorł,e, 60, 63,65, 67
interpreter, 43
metody
iterator,87 definicja, 94
\Ą,ywołanie, 9'1
iterorvanie, 72
metodyka
Kanban, 193
J Scrum, 188
Scrumban, 195
JavaScript,31
autouzupcłnianie kodu, 3tl metodl,ki
instrukcje warunko\Ą,e, 60, 63 Zesta\Ą.ienie,195
komentarze. 41 zwinne, 186
komunikaty; 36 model
okno dialogowe, 56 kaskadowy, 182
operatory warunkorł,e, 62 etapy,183
skrypt\,,34 prototypolt y,, 185
słorł,a kluczor,ve. 47
tab]ice,58 N
lwświetlanie *o*rrrrrPul5rł,, 3 6
zmicnne, 42, 50 narzędzia
język JavaScript, 3 1 do zarządzania projektem, 15
rłr,korzl,rtlrvane rv wvt lr arzani u
Jira, 11, 153
oprogramowania, 15
ekran logowania, 12
narzędzte
kollto uźvtkolt njka, l 4
panel uż)rtko\Ą,nika, 13
Bugzilla, 1 54
Git, 15
HP ALM, B
K Jira,11
Kanban, 193 Testlink,167
czas realizacji, 193 Trcllo, 1,ł, 155
1imit pracy w ttlku, 193 WebStorm, 1.5
tablica kanbanowa, 193, 194 rTawias, 39
kaskadowe arkusze stylórł,, 32 klamrowy, 62
klasa,80, l21
kod HTML, 32
kolejka priorytetowa, Priorit1, Queue, 115
o
kolekcja, 85 obiekt, 82
iterator, B7
List. B7
oferta projektorł,a, 203
Set, 85
operatoI
komentarze,,ł1 11
komunikat, 36
logiczny AND, 65
o błędzie, 38
logiczny OR, 67
koszt naprawy błędu, 136
operatoIv
matematyczne, 48
L warunkowe, 62
licencja, 223
LIFQ Last In, First Out, 115
lista, List,87
P
pętla
kontrolna, checklist, 172
do ... while, 78
kontrolna funkcjonalności, 173
for,71
for ... of,74
while, 76
plan testów, 159

230
 skorowidz

plik indcx.html, 36 Scrum Master, 190

pliki HTML, 34 sprint, 1 89
polecenie właścicielproduktu, 190
alert,47 zar ządzanie pro jektem, 1 88
git pull, 18 zespół wytwórczy, 1-90
prawa autorskie, 221 Scrumban. 19.5
Product Owner, 20_5 przvgotowanie tablic1,, ż06
programista, 20.5 serrł,er aplikacji, 28
programowanie obiektowe, B0, 94 Set. B.5
Project lvlanager, 205 silr-rik JavaScript, 32
projektou,anie słowo kluczowe, 47
algorytmu, 101 boolean.55
ap\r\ai1\,93 Const. 5D
klas. 121 let,50,51, -53
prototyp,186 nelł,, 86
przeglądarka Chrome, 28 string, 53
przepĘrv zadair, workflolł,, 18 var,42,50,52
pscudokod, 102 smoke testy, 160
sortowanie
R bąbelkowe, 109
szrbkie. quicksort. l | |

raport Sprint,208, 212,275

błędót,17,ł stos,116
o postępie testów, 160 sygnalizacja błędów, 38
testów, 175 system kontroli wersji, 15
realizacja prac projektorvych, 208 szyfrowanie, 119
rejestr ryz1,-k, 174
rekurencja, 107
rcpozytorium zdalne, 22, ż§ ś
rola. 190 środorvisko produkcyjne, 13
Analityk, 205
Prodl-rct Owner, 205
Programista, 205 T
Project Manager, 20_5 tablica Scrumban,206
'fcster, 20.5 tablice,58,59
rozszer zcnia aplikacji, 2 1 8 tagi, 33
RP\ rer,,ersc Polish notation, 116 testeq 205
Tcstl'ink, 167
s menu głórł,ne, 168
scenatiusze teStowe, 1 67
scenariusze tcstow,e, 165 specylikacja testo\Ąla, 169
schenrat wybór
blokowy,104,2I7 operacji,170
modelu kaskadowego, 182 Zesta\\,u testów, 169
Scrum, 188 wykonanie scenariuszy testow,vch, 171
codzienny Scrum, l89 testowanie oprogramowania, 135
definicja ukończenia, 1 89 analiza tcstów, 140
historyjki użytkownika, 191 implementacja testów, 142
przyrost produktu, 189 monitorowanie testów, 140
raportowanie, 190 planowanie testów, 139, 141, 159
reiestr poziomy testów, 143
sprintu, 189 scenariusze testowe, 16-5
produktu,189 standardy,138
role,190 ukończenie testów. 143
wykonanie testórv, 142

231
skorowidz

testy wtyczka Web Sener for Chrome, 28

akceptacvj ne, 1 47 $,vbóI
białoskrzynkou,e, 1.50 dostępnych widoków, 2,ł
czarnoskrz\.nkowe, 1 5 0 opcji, 20
eksploracyjne, 1 60 stylu, 21
funkcjonalne, 149 rvłasnościobiektu, tl2
integracyjne, 1,15 w,łasnośćintelektualna, 224
modułowe, 144 w,tyczka Web Server for Chrome, 28, 29
niefunkcjonalne,151 wymagania
przypisane do mnie, 171 funkcjonalne,10
regresywne, 149 nietunkcjonalne, 1 0
systemowe, 146 wyszukiwanie
Trello, 14, 155 binarne, 1 13
tablica,14 \Ą, zaa\,vansowanych strukturach, 1 15
r,vidok zadań, 216 lvyświetlanie
tworzenie, 1.59 komunikatów,36
dokumentacji błędu,.51
funkcji, 100 11,ywołanie funkcji, B4
testow,ej,159 wzorce, 125
przypadku testowego, 170 implementacja, 125
sccnariuszv testowlch, 167
typ
boolean,55,63 Y
String, -53 YAGNI, You Aren't Gonna Need It, 97
typ,Y testÓ\Ą,, 1,+B

z
U zapytanie ofertowe, 200
UML, Unified Modeling Language, 121 zar ządzanie pro j ektem, 1 5
URL 22 zasada
,,dzie\ i zwyciężaj", 102

W DRY, 97
zbiór, 85
waterfall, Pdtrz model kaskadowy, 182 zestawienie ró1, 205
WebStorm, 15, 19 zintegrowane środort isko programistyczne, IDE, 19
generowanie dokumentacji, 28 złożoność
obliczeniowa, 1 05
integracja z Gitem,22 zmienne, 42
menu kontekstowe Commit, 26 tablicowe,58
okno dialogowe Commit, 25 typu logicznego, 55, 63
struktura aplikacji webowej, 34 typu String, 53, 54
widok znacznik $,57
menu kontekstowego, ż5 znak dodawania, 64
okna Git, 23, 27
podpowiedzi, 99

232