Harjoitustyö, vaihe 1

Tässä osassa aloitetaan oman harjoitustyön toteutus. Harjoitustyö toteutetaan vaiheittain osissa 9-12, ja viimeistään osan 12 loppuun mennessä harjoitustyö tulee palauttaa ja hyväksyttää tuntiopettajalla etä- tai lähiohjauksessa. Lue huolellisesti harjoitustyön vaatimukset ennen aloittamista.

Osissa 9-12 on annettu ohjeita, joiden tarkoituksena on auttaa sinua etenemään harjoitustyössä. Vastaavasti osat 9-12 sisältävät tehtäviä, joiden tarkoitus on auttaa projektin edistämistä vaiheittain. Kuten aiemminkin, tehtävistä on palautettava vähintään 50 %.

Suosittelemme toteuttamaan harjoitustyön näissä osissa kuvattua vaiheistusta hyödyntäen.

Harjoitustyön aihe

Aloita ensin valitsemalla harjoitustyön aihe ja tutustumalla harjoitustyön vaatimuksiin. Löydät valmiita aiheita harjoitustyön ohjesivulta.

Kun olet valinnut aiheen, ilmoita se alla olevan tehtävän kautta.

Projektin alustaminen

Kun olet valinnut aiheen, voit luoda valmiiksi uuden JavaFX-projektin. Suosittelemme, että käytät kurssin valmista JavaFX-pohjaa, jonka käyttöä on esitelty osassa 7.1.

Vinkkejä:

• Tee aluksi harjoitustyölle oma erillinen tyhjä kansio paikasta, jonka pystyt helposti löytämään tietokoneeltasi.
• Kun luot projektia IDEAssa, valitse projektin poluksi (Location-asetus) juuri tuo äsken tekemäsi kansio. tietokoneelta.
• Aseta projektillesi yksilöllinen tunniste (GroupId). Voit käyttää muotoa fi.jyu.ohj2.nimesi.aihe, jossa nimesi on yliopiston tunnuksesi ja aihe on harjoitustyön aihe.

Kun saat projektin luotua, kokeile ajaa se ja varmista, että saat sovelluksen käynnistettyä.

Git-varaston alustaminen

Kun projekti on luotu, luo saman tien projektikansioon Git-varasto komentoriviltä komennolla git init. Älä kuitenkaan tee vielä heti ensimmäistä commitia, vaan valmistellaan ensin hieman kansion sisältöä.

Git-versiohallintaa käyttäviin projekteihin on tapana sisällyttää .gitignore- ja README.md-tiedostot. .gitignore-tiedoston merkitystä on esitelty hieman osassa 7.3: tähän tiedostoon listattuja tiedostoja ja kansioita ei sisällytetä commiteihin ilman erityistä pakotusta. Esimerkkejä tällaisista ovat esimerkiksi IDEAn luomat out- ja target-kansiot, joissa on käännettyä koodia. Erityisen tärkeää on muistaa lisätä .gitignore-tiedostoon mahdolliset salaisuuksia sisältävät tiedostot, kuten henkilötietoja, salasanoja tai API-avaimia sisältävät tiedostot, jotta ne eivät päädy vahingossa etävarastoon.

Varmista, että projektikansiossasi on .gitignore-tiedosto. Jos käytät kurssin valmista JavaFX-pohjaa, sellainen tiedosto on valmiiksi sisällytetty projektiin.

Huomaa kirjoitusasu: tiedoston nimi on .gitignore, alussa piste ja kaikki pienellä. Vastaavasti README.md-tiedoston nimi on kaikki isoilla kirjaimilla, eikä siinä ole alussa pistettä.

README.md, eli ns. "Lue minut"-tiedosto, on tarkoitettu projektin esittämiseen ja toisaalta kehittämisen kannalta oleellisiin ohjeisiin. Etävarastopalvelut yleensä näyttävät tämän tiedoston heti projektin etusivulla, joten tiedosto on myös hyvä paikka kertoa projektista yleisesti ei-tekniselle peruskäyttäjälle. Voit luoda README.md-tiedoston suoraan IDEAssa klikkaamalla projektiselaimessa projektista hiiren toissijaisella painikkeella, valitsemalla New File ja antamalla tiedoston nimeksi README.md:

README.md-tiedosto on tapana kirjoittaa käyttäen Markdown-merkintäkieltä.

Tässä vaiheessa README-tiedosto voi olla aika alkeellinen. Lisää tiedostoon ainakin projektin nimi ja lyhyt kuvaus parilla virkkeellä. Jos käytät valmista aihetta, voit kopioida projektin aiheen kuvauksen harjoitustyön ohjeesta.

Kun saat README ja .gitignore -tiedostot tehtyä, tee ensimmäinen commit. Luo lopuksi uusi etävarasto ja lataa nykyinen varastosi sinne osan 8.6 ohjeiden perusteella.

Tietomallin toteuttaminen

Ennen kuin menet syvemmin käyttöliittymään, on syytä ensin pohtia sovelluksen tietomallia ja sen toimintaa. Aloita kehitystyö toteuttamalla tietomallin kannalta oleelliset luokat projektiin. Valmiissa aiheessa luokat, niiden attribuutit ja luokkien väliset suhteet on esitetty UML-kaaviona.

Vinkkejä:

• Tee tietomallin attribuutit käyttäen JavaFX Property-tyyppejä valmiiksi. Tämä helpottaa näkymän ja tietomallin kytkemistä yhteen myöhemmin.

• Laita tietomalliin liittyvät luokat valmiiksi model-alipakkaukseen erillään muista luokista.

• Mieti jo hieman, mitä julkisia metodeja luokan on hyvää tarjota muille luokille. Vaikka get- ja set-metodeja tarvitaan tietomallin tallentamiseksi JSON-muotoon, voit jo alustavasti miettiä, mitä metodeja luokka voisi tarjota parantakseen kapselointia. Esimerkiksi Todo-mallisovelluksessa ohjainluokka ei ikinä lisää Tehtava-oliota tehtäväkokoelman tehtavat-listaan itse, vaan tehtävän lisäys on tehtäväkokoelman vastuulla lisaaTehtava-metodin kautta.

  Älä kuitenkaan jää miettimään luokkien toimintaa liian kauan; kaikkia tapauksia ei kannata eikä voi vielä ennustaa. Voit tehdä apumetodeja lisää myöhemmin, kun toteutat ohjainluokkia.

• Suosittelemme vahvasti, että testaat tietomallin luokkien välistä yhteistoimintaa kokeilemalla käyttää niitä main-pääohjelmassa (tai tee aliohjelma jota kutsut mainista). Et tarvitse tähän vielä käyttöliittymää, vaan voit luoda ja käyttää olioita suoraan pääohjelmassa. Varmista, että pystyt tietomallisi avulla tekemään sovelluksen ja harjoitustyön vaatimusten kannalta olennaisimmat toiminnot, kuten tiedon lisäyksen, hakemisen, muokkauksen ja poiston. Debuggerin avulla voit varmistaa, että tietomallin tila on oikea.

  Halutessasi voit jopa kirjoittaa yksikkötestejä, jossa testaat tietomallin perustoiminnallisuuksia. Voit ottaa mallia osan 8.5 ohjeesta, jossa Todo-sovelluksen tietomallin metodeja ja niiden toimivuutta testattiin.

• Tallentamista tai lataamista ei tarvitse vielä tässä vaiheessa miettiä.

Kun sinulla on alustava versio tietomallista toteutettuna Javassa eikä koodi sisällä virheitä, on hyvä hetki tallentaa muutokset Gitiin. Tee muutoksista uusi commit (git add + git commit) ja puske ne etävarastoon talteen (git push).

Käyttöliittymän alustava suunnitelma

Kun sinulla on käsitys sovelluksen tietomallista ja vaatimuksista, on hyvä hetki alkaa pohtia käyttöliittymän alustavaa asettelua ja toimintaa.

Tee omaan projektiin uusi kansio suunnitelma. IDEAssa tämä tapahtuu klikkaamalla projektiselaimessa projektin nimestä hiiren toissijaisella painikkeella ja valitse New Directory. Tee uuteen kansioon tiedosto nimeltä kayttoliittyma.md. Kirjoita tiedostoon ylös alustavia tietoja sovelluksen käyttöliittymän tarvittavista näkymistä.

# Käyttöliittymän suunnitelma

## Näkymä 1

![Näkymän karkea ulkoasu kuvana (wireframe.cc, DrawIO, Paint tai paperilla piirretty)](nakyma1.jpg)

**Olennaiset toiminnot**

- Mitä käyttäjä näkee käyttöliittymässä
- Miten tähän näkymään pääsee 
  (sovelluksen avaus, painikkeen klikkaus, jne.)
- Mitä käyttäjä voi tehdä käyttöliittymässä: 
  mitä voi klikata, mitä jokainen painike tekee

**Olennaiset komponentit**

- Mitä JavaFX-komponentteja saatat tarvita käyttöliittymän toteuttamiseen
- Tämä on pääosin paikka, johon voit kirjata linkkejä JavaFX-luokkiin 
  ja kirjastoihin, jotta niitä on helpompaa löytää käyttösuunnitelmaa tehtäessä
- Tämä osa ei ole pakollinen, vaan tarkoitettu helpottamaan dokumentaation hakemista myöhemmin

## Näkymä 2

![Näkymän karkea ulkoasu kuvana (wireframe.cc, DrawIO, Paint tai paperilla piirretty)](nakyma2.jpg)

**Olennaiset toiminnot**

- Mitä käyttäjä näkee käyttöliittymässä
- Miten tähän näkymään pääsee 
  (sovelluksen avaus, painikkeen klikkaus, jne.)
- Mitä käyttäjä voi tehdä käyttöliittymässä: 
  mitä voi klikata, mitä jokainen painike tekee

**Olennaiset komponentit**

- Mitä JavaFX-komponentteja saatat tarvita käyttöliittymän toteuttamiseen
- Tämä on pääosin paikka, johon voit kirjata linkkejä JavaFX-luokkiin 
  ja kirjastoihin, jotta niitä on helpompaa löytää käyttösuunnitelmaa tehtäessä
- Tämä osa ei ole pakollinen, vaan tarkoitettu helpottamaan dokumentaation hakemista myöhemmin

Piirrä alustavat kuvat jokaisesta näkymästä. Tässä vaiheessa käyttöliittymän tarkan ulkoasun ei tarvitse olla mietitty loppuun, vaan tarkoitus on keskittyä siihen mitä käyttäjä näkee ja mitä hän voi tehdä. Voit piirtää näkymät käyttäen esimerkiksi verkossa olevia kaaviosovelluksia, kuten wireframe.cc, DrawIO tai Figma, tai mitä tahansa muuta piirtosovellusta. Voit myös piirtää paperille ja ottaa kuvan / skannata sen.

Käyttöliittymä tarkempaa ulkoasua tehdään osassa 10.

Toki voit halutessasi tehdä näkymät heti valmiiksi SceneBuilderilla. Siinä tapauksessa ota näkymistä kuvakaappaus. Älä kuitenkaan käytä liikaa aikaa näkymien tekemiseen tässä vaiheessa; suunnitelman tarkoituksena on saada karkea idea käyttöliittymän näkymistä.

Tallenna kuvat suunnitelma-kansioon ja mainitse ne kayttoliittyma.md-tiedostossa. Löydät ohjeita kuvien upottamiseen Markdown-tiedostoihin verkosta.

Ota suunnitelmassa kantaa, mitä näkymässä näytetään ja millä eri tavoin käyttäjä voi vuorovaikuttaa käyttöliittymän kanssa. Näin voit varmistaa jo tässä vaiheessa, että muistat ottaa huomioon kaikki vaaditut tietomallin lisäys-, luku-, muokkaus- ja poistotoiminnot.

Kun käyttöliittymän näkymien suunnitelma on valmis, tee muutoksista commit ja puske muutokset etävarastoon.