Tarkvaratehnoloogia praktikumide etapid
Siintoodud etappide sisu töö reaalse töö käigus veidi muutub, kuid on üldjoontes järgmine:
Sisukord
- 1 1. päev: ülesande valik, soovitud tulemuse kirjeldus, keskkonna ülesseadmine, katse-html lehe tegemine
- 2 2. päev: andmete töötlemine ja baasi panek, esmase html lehe tegemine serveris
- 3 3. päev: veebilehe kasutajaliidese tegemine ja seostamine andmebaasiga
- 4 4. päev: kujunduse parandamine, testimine, arenduse jätk
- 5 5. päev: edasiarenduse planeerimine, vigade ja puuduste parandamine, ettekanne
1. päev: ülesande valik, soovitud tulemuse kirjeldus, keskkonna ülesseadmine, katse-html lehe tegemine
Päeva eesmärk on (a) valida andmestik ja otsustada, mida meie rakendus sellega teeks, (b) töövahendite installeerimine ja katsetamine. Neid asju võiks teha sellises järjekorras:
- Installeeri endale sobiv tekstiredaktor (rikkalikumast minimaalsemani: vs code, atom, notepad++, scite),
- Soovitavalt installeeri ka Python (kohe algul ei ole meil seda vaja):
- failid võta selle lehe allosast,
- siin päris OK installeerimise õpetus) ja siin ametlik õpetus
- väga detailne õpetus pythoni programmide käivitamiseks: kui cmd aknast python ei käivitu, siis uuri selle õpetuse teist poolt: pathi seadmine.
- alternatiivne Pythoni installi ja käivitamise õpetus installi ja käivitamise õpetus microsoftilt.
- Kui python installeeritud, siis soovitavalt ka Flask: see eeldab ja kasutab pythonit. Vaata installiks ja kasutamiseks ka . Jällegi, kohe algul ei ole seda vaja.
- Otsi andmestik, uuri, kas see on sulle kättesaadav/töödeldav.
- Otsusta, kuidas seda avalikkusele ilusamini kuvada ja millised filtrid/valikud lasta kasutajatel teha.
- Kirjuta oma kavadest väike memo markdowni kasutades.
- Installeeri endale putty ja winscp või analoogilised vajalikud vahendid serverisse sisselogimiseks ja failide kopeerimiseks.
- Alusta oma rakenduse veebilehe tegemist esmaste html-pisikatsetustega omaenda arvutis.
- Logi katseks dijkstra serverisse ja püüa sinna mõni fail veebiserveri alla kopeerida.
- Tee soovitavalt konto digitaloceani serverisse ja githubi koodihoidlasse, lae viimasesse sinna faile. Digitaloceani kontoga on tööd (mis on soovitav :) lihtsam alternatiiv on kasutada ainult dijkstra serverit.
Kui Pythonit ja Flaski ei õnnestu enda arvutisse installeerida, siis on kaks järgmist varianti:
- Püüdke endale installeerida juba Pythonit sisaldav thonny: see võib õnnestuda paremini.
- Võite üldse loobuda Pythoni installeerimisest oma arvutisse: sellega saab töötada ka üle võrgu otse dijkstra või digitaloceani serveris, kuigi see on veidi ebamugavam.
Päeva lõpuks teeb iga grupp paariminutise ettekande, kus on öeldud (a) grupiliikmete nimed, (b) mis andmekogu ja ülesanne valiti, (b) mis töövahendid käima saadi ja kuhu õnnestus sisse logida/andmeid kopeerida, (c) kuhu aeg peamiselt kulus ja mis olid ootamatused. (d) mis on plaan järgmiseks korraks.
2. päev: andmete töötlemine ja baasi panek, esmase html lehe tegemine serveris
Päeva eesmärk on (a) katsetada tehnoloogiaid: python ja flask, sqlite (b) teha oma andmebaas ja laadida andmed oma andmebaasi (c) teha katseid päringutega andmebaasist (d) ideaalis realiseerida juba mingi mõttekas osa süsteemist. Päeva lõpuks teeb iga grupp ühe-kahe minutise ettekande, kus on öeldud (a) grupiliikmete nimed, (b) mis käima saadi (c) kuhu aeg peamiselt kulus ja mis olid ootamatused. (d) mis on plaan järgmiseks korraks. Lisaks, palun liituge Slack jututoaga: jututoa link .
See, mis sa päeva lõpuks (ja kuidas) realiseerid, sõltub sellest, mis tehnoloogiad sa käima saad (kas saad flaski ja pythoni ja sqlite käima, kas oled juba saanud sisse logida ja tegutseda jne). Kui sa mingite tehnoloogiatega hätta jääd, vali alternatiivne lahendus, millega asjad välja tulevad.
Kui andmete saamine andmebaasi osutub keeruliseks (sest näiteks sa ei saanud Pythonit ja Flaski ja sqlite oma arvutisse, serverisse ei õnnestu või on keeruline sisse logida vms) siis on OK teha alternatiivselt lihtsamaid ülesandeid ilma andmebaasita:
- Andmete sqlite sisestamise asemel võid panna andmed otse veebilehele või csv faili, nii et neid serveris eraldi ei töödeldagi ja kuvamist ja valikuid teeb javascript otse veebilehel. Loe ja kasuta õpetust ja näitekoodi
- Html lehe digitalocean serverisse panemise asemel kas paned nad tehnikaülikooli dijkstra serverisse või jätkad html lehe arendamist oma arvutis failidena, mida brauser siis kuvab.
Andmebaasiga rakenduse tegemise ja reaalse käivitamise jaoks on mitu varianti:
- Arendad ja testid oma arvutis, pärast paned oma serverisse või dijkstrasse (siis peab sinu arvutis ja/või sinu serveris olema installeeritud Python ja Flask ja pead saama pythoni programme käsurealt käivitada)
- Arendad ja testid otse oma serveris (sinna tuleb installeerida Python (versioon 3) ja Flask)
- Arendad ja testid otse dijkstras (sinna ei tule midagi installeerida, sinu programm käib otse veebiserveri all).
Kuidas arendada ja testida otse dijkstras:
- Logi putty programmiga dijkstrasse ja mine oma kataloogi /home/kasutajanimi, kui sa kohe juba sinna ei satu
- Failide kopeerimiseks kasuta winscp programmi.
- Saad faile ka otse dijkstras redigeerida winscp sisse-ehitatud redaktori abil: seda saad omakorda konfida, muutes sisse-ehitatud redaktori asemel kasutatavaks hoopis oma mingi redaktori, loe [[siit, kuidas). VS Code sisse on ehitatud ka spetsiaalne eemalt-serverist-redigeerimise funktsionaalsus.
Kõigis järgmistes näidetes on käsureal linuxis (aga mitte windowsis!):
- enne programmi käivitamist ütle käsurealt samas kataloogis algul korra chmod a+rx programminimi (näiteks, chmod a+rx makedb.py)
- oma programmi käivitamiseks vaja tema nime ette kirjutada ./ (näiteks, makedb.py asemel kirjuta ./makedb.py)
Esimese asjana on sul vaja andmebaas teha ja oma andmed sinna sisse saada. Selleks alusta näiteprogrammidest:
- makedb.py teeb lihtsalt tühja baasi nimega data.db: makedb.py
- import.py impordib andmed csv-st baasifaili data.db, anna sellele csv fail käsurealt niimoodi ette: import.py data.csv
- csv faili näitena võid kasutada data.csv
- check.py trükib kontrolliks andmebaasi data.db sisu välja: check.py
Teise asjana on sul vaja panna käima veebiteenuse programm, millelt saad brauseriga andmeid küsida. Siin on mitu varianti:
- Oma arvutis Flaski abil kasuta servewithflask.py ja selle kaivitamiseks linuxis runserver
- Dijkstras tee kataloog /home/minukasutaja/public_html/cgi-bin: selleks mine (cd /home/minukasutaja/public_html) ja ütle mkdir cgi-bin
- Kopeeri programm serve.py dijkstras kataloogi /home/minukasutaja/public_html/cgi-bin ja ütle seal chmod a+rx serve.py
- Kopeeri andmebaas data.db samasse kataloogi /home/minukasutaja/public_html/cgi-bin ja ütle seal chmod a+rw data.db
- Ava katseks url http://dijkstra.cs.ttu.ee/~tammet/cgi-bin/serve.py kus tammet asemel pane oma kasutajanimi
Kolmanda asjana on sul vaja veebileht õigesse kohta kopeerida:
- Oma arvutis Flaski abil tee oma programmide kataloogi alamkataloog static, muuda index.html sees url dijkstra asemel oma arvuti urliks (koodis on ta olemas, aga välja kommenteeritud) ja kopeeri index.html sinna, siis ava url http://localhost:5000/static/index.html
- Dijkstras muuda index.html sees url-s tammet oma kasutajanimeks ja siis kopeeri fail kataloogi /home/minukasutaja/public_html ja ava ta kui http://dijkstra.cs.ttu.ee/~tammet/ kus tammet asemel pane oma kasutajanimi
3. päev: veebilehe kasutajaliidese tegemine ja seostamine andmebaasiga
Siit alates on kolm tegevussuunda kursuse lõpuni:
- Brauserist Flaskiga pythoni programmilt andmete küsimine.
- Andmete arusaadav kuvamine.
- Kasutajaliidese parandamine.
Kui sinu rakendus veel ei käi serveris (dijkstras või digitaloceanis), siis esimene ülesanne on ta seal reaalselt käima saada, nii et saad oma brauserist rakenduse kuvatavat veebilehte näha. Pane tähele, et nagu eelmise päeva kirjelduses öeldud, on dijkstras soovitav alustada serve.py näitest ja digitaloceanis hoopis servewithflask.py näitest:
- dijkstras annab veebilehti välja seal juba installeeritud apache veebiserver, kes käivitab sinu serve.py programmi
- digitaloceanis annab veebilehti välja sinu servewithflask.py programm otse, ilma apache veebiserverita (kuigi, ka seal saad soovi korral ise installeerida apache veebiserveri, mis nõuab aga ekstra pingutusi).
Kui sa päeva lõpuks rakendust käima ei saagi, siis on alternatiiv minna lihtsama vastupanu teed ja teha rakendus ainult brauseripõhine, ilma serveri osata (selliselt su rakendus keerulisemaid asju teha ja suuri andmekoguseid töödelda ei saa), selleks kasuta seda õpetust ja näitekoodi
Alles siis, kui sinu rakendus juba rahuldavalt käib, on järgmine ülesanne teda täiustada. Konkreetselt, mida peaks täiustama, sõltub sinu andmehulgast ja ülesande valikust ja senisest edukusest. Mõtle see ise läbi ja alusta lihtsamast. Esimesed ideed, mida teha:
- Muuda kujundust ilusamaks. Seda saad teha puhtalt html-i ja css-i täiustades, programme pole vaja muuta.
- Lisa filter otsinguks. Selleks tee veebilehele input tagi abil sisendikast ja lisa nupp, mis lisab javascriptis päringule filtri. Seda saad teha html-i ja javascripti programmi muutes, serveris muutusi ei ole vaja.
- Realiseeri sorteerimine mõne tulba järgi. Selleks tee tulp klikitavaks ja klikkimise tulemusena lisa javascriptis päringule sorteeringuparameeter. Selleks on sul lisaks htmli ja javascripti muutmisele lisada päringule sorteerimisparameetrid (väljanimi ja suund) ja muuta serverirakendust, konkreetselt eriti just seda rida tuleb edasi arendada, pannes sinna id ja asc asemele päringus antavad väärtused: sql = sql + " order by id asc"
- Kui mõnda tulpa oleks mõttekas summeerida või keskmisi arvutada, siis arvuta lisaks summa/keskmine ja kuva see lehele sobivasse kohta välja. Selle jaoks on sul vaja serveripoolset rakendust keerukamalt täiendada, et ta arvutaks sql päringu abil lisaks summa/keskmise ja annaks selle koos loeteluga sinu javascriptile välja, kes siis saab sealt mõlemad osad kätte ja kuvab neid veebilehel.
Keerukuselt järgmine on seniste ridade muutmine ja uute lisamine. Siin on sul vaja ka serveripoolset rakendust suuremas mahus edasi ehitada.
Serverirakenduse täiustamiseks on hea mõte uurida sqlite tutorialit pythoni jaoks ja võibolla lisaks ka w3schools SQL tutorialit
4. päev: kujunduse parandamine, testimine, arenduse jätk
Abiks, kui sul on raskusi pythoni programmi serveris käimasaamisega:
- Veendu, et ta oleks õiges kataloogis /home/minukasutaja/public_html/cgi-bin ja et sa avad õige urli a la http://dijkstra.cs.ttu.ee/~tammet/cgi-bin/serve.py
- Veendu, et programmi nimes on urlis väike-suurtähed on samad, mis faili ja et seal ei ole täpitähti ja tühikuid.
- Veendu, et programmile on serveris öeldud chmod a+x programminimi (ehk, winscp-st vaadates on faili omadustel x-tähed peal (executable))
- Veendu, et programmi tekstis oleks kasutatud Unixi realõppe ehk ainult line feed sümbolit, mitte Windowsi stiilis carriage return ja line feed sümboleid. Igas tekstiredaktoris on nende seadmine veidi erinev.
- Veendu, et programm läheb serveris käsurealt käima, mitte ei anna kohe viga a la ei saa käivitada, syntax error vms.
5. päev: edasiarenduse planeerimine, vigade ja puuduste parandamine, ettekanne
Päeva põhieesmärk on edasiarenduse planeerimine: mida saaks/tasuks süsteemi juurde teha, kes ja kui palju neid täiendusi kasutaks, mis oleks tehnoloogiline/arhitektuuriline plaan edasiarenduse jaoks, mis on ajalise ja rahalised hinnangud, milline oleks projektiplaani kondikava. Kui leiad, et sinu süsteemi ei oleks üheski stsenaariumis mõtet edasi ehitada, vali arenduse planeerimiseks mõne teise veidi sarnast liiki hüpoteetilise süsteemi ehitamine. Edasiarenduse kontekstiks oleks siis selle tellimine, mitte teiepoolne tegelik ehitamine.
Plaan tuleb kirja panna ja ettekandes esitada/selgitada.
Ülejäänud aeg kasuta oma rakenduse täiustamisele: tee need asjad korda, mis jäid puudulikuks.
Kursuse lõpus teevad kõik grupid veidi pikema presentatsiooni, ca 15 minutit:
- kui kaugele te oma rakendusega jõudsite, sh reaalne demo,
- mis oli algses plaanis, aga mis tingimata päris lõpp-rakendusse veel ei jõudnud,
- ettekanne oma edasiarenduse plaanist ja selle lühike arutelu.