Somettamalla uutta kohtaamista -frontend

Somettamalla uutta kohtaamista eli Kohdataan-hanke

Tausta ja tavoitteet

Jokaisella on tarve tulla kuulluksi ja hyväksytyksi, tarve kuulua johonkin. Meillä on tarve jakaa ajatuksiamme ja elämäämme, tarve tuntea olevamme jollekin tärkeä. Se miten hyvin tarpeet toteutuvat, vaikuttaa itsetuntoomme, mielenterveyteemme ja hyvinvointiimme. Ystävät ja sosiaalinen kanssakäyminen vastaavat näihin tarpeisiin. Joka viides suomalainen kokee yksinäisyyttä jossain vaiheessa elämää, ja joka kymmenes on jatkuvasti yksinäinen. Erityistä tukea tarvitsevat suomalaiset kokevat yksinäisyyttä vielä useammin. Siksi on tärkeää luoda uusia mahdollisuuksia vuorovaikutukseen ja sosiaaliseen kanssakäymiseen.

Palvelun kehittäminen käynnistettiin keväällä 2018 Kohdataan-hackathonissa, jossa haastettiin eri alojen osaajia innovoimaan ja ideoimaan tulevaisuuden somepalvelua. Ideoista kehitettiin ja työstettiin yhdessä käyttäjien ja kumppaneiden kanssa konsepti, jonka tekninen toteuttaminen aloitettiin keväällä 2019. Kohdataan-some julkaistiin toukokuussa 2020 ja se on aktiivisessa käytössä.

Palvelussa on otettu huomioon erilaiset tarpeet ja toiveet saavutettavuuden ja helppokäyttöisyyden osalta. Palvelussa voi esimerkiksi viestiä erilaisin keinoin. Tavoitteena on luoda palvelu, jossa on turvallinen ja myönteinen ilmapiiri, jossa ketään ei kiusata, ja jossa ketään ei jätetä yksin. Palvelussa tuetaan kohtaamista ja vuorovaikutusta, jotta kaikilla olisi mahdollisuus tutustua omanhenkisiin ihmisiin, ja myös ylläpitää kaverisuhteitaan. Palvelu on avoin kaikille yli 15-vuotiaille nuorille ja aikuisille.

Kohdataan-palvelu on kehitetty Kehitysvammaliiton ja Mieli ry:n yhteishankkeessa, jossa tavoitteena on yksinäisyyden vähentäminen somen keinoin. Hanketta rahoittaa Sosiaali- ja terveysjärjestöjen avustuskeskus STEA.

Yhteiskehittäminen ja koordinointi

Kohdataan-palvelu on kehitetty yhdessä käyttäjien kanssa ja toteutuksessa kaikilla tasoilla keskeistä on käyttäjälähtöisyys. Myös tekniseen toteutukseen on luotu yhteiskehittämisen malli, jossa palvelua kehitetään yhteistyössä paitsi käyttäjien, myös kaikkien palvelusta kiinnostuneiden ohjelmistokehittäjien ja muiden osaajien kanssa. Avoimuus ja yhdessä tekeminen, samoin uusien toimintatapojen kokeileminen on koko hankkeen ytimessä. Yhteiskehittämisestä saadaan myös tärkeää lisäresurssia palvelun toteutukseen.

Palvelun kehittämiseen voit osallistua olit sitten ohjelmistoalan opiskelija tai rautainen ammattilainen. Osallistumalla voit saada kokemusta ja kehittää omaa osaamistasi, tai antaa osaamisesi ja panoksesi tärkeän palvelun rakentamiseen. Voit osallistua yksin, tai haastaa mukaan kaverisi tai kollegasi ja osallistua porukalla. Jokaisen panos on tärkeä!

Palvelun kehittäminen tapahtuu GitHubissa. Kaikki palveluun liittyvä koodi ja graafinen aineisto on ja tulee olemaan vapaasti saatavilla (MIT-lisenssi). Käyttöliittymäsuunnitelma löytyy Zeplinistä.

Palvelun teknisestä koordinoinnista 2019-2020 on vastannut Perfektio ja muusta hallinnoinnista Kehitysvammaliitto. Jos haluat tietää lisää palvelusta, voit lähettää meille sähköpostia osoitteeseen kohdataan@kohdataan.fi.

Osallistuminen ja GitHub-projekti

Palvelun kehittäminen tapahtuu kahdessa git-repossa:

Taustapalvelut (kohdataan-backend): PostgreSQL-tietokanta, Mattermost-viestipalvelu, Node-taustasovellus ja Nginx-välipalvelin
Käyttöliittymä (kohdataan-frontend): Mattermost Redux ja React Web-sovellus

Kohdataan arkkitehtuuri

Projektin asennus ja kehitysympäristön pystytys (kohdataan-frontend)

Saat frontendin kehitysympäristön pystyyn ajamalla seuraavat komennot:

git clone https://github.com/kohdataan/kohdataan-frontend.git
cd kohdataan-frontend
npm install
npm start

Oleellista on saada yhteys muodostettua yhteys taustapalveluun. Käytössä on seuraavia ympäristömuuttujia, jotka on tallennettu kehitysympäristössä tiedostoon .env.development:

REACT_APP_MATTERMOST_USERNAME = "kohdataanDev"
REACT_APP_MATTERMOST_PASSWORD = "examplePassword"
REACT_APP_MATTERMOST_URL = "http://localhost:9090"
REACT_APP_NODE_BACKEND_URL = "http://localhost:9090/node_api"
REACT_APP_WEBSOCKET_URL = "ws://localhost:9090"

Tässä oletetaan, että kohdataan-backend on paikallisesti käynnissä. Mikäli yhteys muodostuu oikein, voit rekisteröityä ja aloittaa testaamisen. Kehityksen tukena voi hyödyntää Mattermostin omaa käyttöliittymää (avaamalla selaimessa osoitteen http://localhost:9090), ja varmistaa että Kohdataan-käyttöliittymä toimii oletetusti.

Backlog ja kehityksen kulku

Jos haluat osallistua projektin toteutukseen, valitse projektin työlistalta backlog-sarakkeesta kiinnostavan kuuloinen ominaisuus (jota ei ole assignattu jollekin muulle), assignaa se itsellesi ja siirrä se työlistalla "In progress"-sarakkeeseen. Projektin työlista koostuu hankkeen henkilökunnan ja teknisen toteutuskumppanin yhdessä suunnittelemista ominaisuuksista ja projektista löytyneistä bugeista. Kun aloitat ominaisuuden kehittämisen tai bugin korjauksen, tee kehitystyö omassa feature-branchissa, jonka nimeät muotoon /<backend/frontend>/<issuen numero>/<lyhyt kuvaus issuen/issuen otsikko>, esimerksi /backend/2/LoginEndpoints.

Hanketiimi huolehtii, että projektin työlistalla on jatkuvasti runsaasti priorisoitua ja hyvin määriteltyä tekemistä eri tasoisille ja osaamistaustaisille ohjelmistokehittäjille.

Kommunikaatio

Projektiin liittyvä kommunikaatio tapahtuu Kohdataan Development Slackissa. Rekisteröidyttyäsi voit kysyä mitä tahansa projektiin liittyvää, hanketiimi vastailee kysymyksiin ja auttaa mielellään alkuun projektin kanssa!

Slackin lisäksi projektiin liittyvää kommunikaatiota on myös GitHubissa Pull Requestien ja Issueiden osalta. Pidäthän näihin liittyvän keskustelun kommentteina GitHubissa.

Ulkoasu

Projektin ulkoasu ja tyyliohjeet löytyvät osoitteesta https://app.zeplin.io/project/5cb591097f5deba21424eb89/ Palvelun toiminnasta saa kiinni prototyypin avulla: https://invis.io/AYRCBXKH2R4

Tutustuaksesi designiin sinun täytyy rekisteröityä Zeplinin käyttäjäksi. Rekisteröitymisen jälkeen sinulla on pääsy ajantasaiseen näkymäkohtaiseen designiin. Projektin issueista linkataan suoraan yksittäisten näkymien designiin, jotta pääset helposti kiinni tekemiseen ulkoasunkin puolesta. Pyrimme liittämään myös screenshotin niihin issueihin, joihin liittyy suoraan jokin näkymä.

Tämänhetkiset näkymät sekä käytetyt ikonit löytyvät myös kootusti assets-repositoriosta: https://github.com/kohdataan/kohdataan-assets

Lähdekoodin ja hakemistojen tyyliohjeet

Projektissa on käytössä ESLint ja Airbnb JavaScript Style Guide pienin muutoksin.

Noudata containereiden ja componentien hierarkiassa tätä ohjetta.

Projektissa on käytössä SASS, jokaiselle komponentille on oma .scss-tiedostonsa komponentin kansiossa.

HUOMIO macOS-käyttäjät! Kun luot uusia tiedostoja ja hakemistoja projektiin, kiinnitä erityistä huomiota nimeämiseen. Linuxissa käytetään oletuksena isot ja pienet kirjaimet erottelevaa tiedostojärjestelmää (ext4), kun taas macOS ei oletusarvoisesti erottele isoja ja pieniä kirjaimia tiedostojärjestelmässä (HFS+).

Mattermost-redux

Projektissa hyödynnetään Mattermostin backendia chat-toiminnallisuuksien toteuttamisessa. Lisäksi Mattermost-integraatioiden ja sovellusten hyödynnettäväksi on vapaassa käytössä myös reduxiin pohjautuva mattermost-redux, joka tarjoaa valmiina suurimman osan tarvittavista actioneista chattiin liittyvän datan käsittelyä varten. Jos reduxin periaatteet eivät ole jo valmiiksi tuttuja, kannattaa ensin käydä tutustumassa niihin.

Mattermost-redux on lisätty valmiiksi tähän projektiin. Kun toteutat mitä tahansa keskusteluihin ja etenkin keskusteludataan liittyviä toiminnallisuuksia, hyvä lähtökohta on aluksi tarkistaa mattermost-reduxin olemassa olevat actionit, sillä usein kaikki tarvittava löytyy valmiina, eikä tällöin ole syytä luoda omia actioneita näiden lisäksi. Kaikki valmiina olevat actionit löytyvät mattermost-reduxin lähdekoodista. Valitettavasti näitä ei ole dokumentoitu lähdekoodin lisäksi muualle. Joitakin hyödyllisiä vinkkejä voi löytyä myös tutkimalla Mattermost API-kuvausta. Näitä rajapintoja ei tosin suoraan ole syytä hyödyntää, sillä vastaavat toiminnot löytyvät myös suoraan actioneina. Käytännössä ainakin users.js, groups.js, posts.js, websockets.js ja channels.js tiedostoista löytyy tämän projektin kannalta hyödyllisiä actioneita, joita voit suoraan ottaa käyttöön:

import { login } from 'mattermost-redux/actions/users'

Tämän jälkeen actionit voidaan yhdistää komponentin propseihin tuttuun tyyliin, käyttämällä connectia:

const mapDispatchToProps = dispatch =>
  bindActionCreators(
    {
      login,
    },
    dispatch
  )

export default connect(
  null,
  mapDispatchToProps
)(App)

Selaimeen kannattaa lisätä esimerkiksi React Developer Tools, jonka avulla storen tilaa on helpompi pitää silmällä kehitysvaiheessa. Mattermost-reduxissa on actioneiden lisäksi valmiina paljon selectoreja, jotka kannattaa käydä läpi. Niitä kannattaa myös hyödyntää mahdollisuuksien mukaan ennen omien toteuttamista. Selectorit löytyvät mattermost-reduxin kansiosta selectors ja reducerit puolestaan kansiosta reducers. Lisäksi storen hahmottamisessa auttaa initial_state.js.

Keskusteluun liittyvät toiminnallisuudet ovat kuitenkin vain yksi osa KOHDATAAN-palvelua, joten aivan kaikkea ei löydy valmiina mattermost-reduxista. Esimerkiksi käyttäjäprofiiliin ja päivän kysymyksiin liittyvä toiminnallisuus on osittain tai kokonaan mattermostin ulkopuolella, joten näihin liittyvän tilan käsittelyyn on tarkoituksenmukaista luoda omat actionit tarvittaessa.

Saavutettavuus ja sen testaaminen

Yleistä saavutettavuudesta

Tavoiteltu lopputulos on sosiaalisen median alusta, jolla käyttäjä voi tutustua uusiin ihmisiin turvallisesti ja saavutettavasti. Alusta toteutaan Web-sovelluksena, ensisijaisesti mobiililaitteille, mutta sovellusta tulee voida käyttää myös muilla laitteilla. Saavutettavuuden ja helppokäyttöisyyden osalta keskeistä on käyttäjien erilaisten tarpeiden huomioiminen.

Kattava saavutettavuuden testaus ja arviointi ovat siis luonnollisesti osa projektin tavoitteiden saavuttamisessa. Projektissa noudatetaan Web Content Accessibility Guidelines (WCAG) 2.1-saavutettavuusstandardia, ja siksi jokaisen frontendin tekemiseen osallistuvan on hyvä tutustua saavutettavuuden periaatteisiin.

WCAG 2.1 on käytössä myös saavutettavuutta koskevan lainsäädännön pohjana. Yhdenvertaisuuslaki ja syksyllä 2018 voimaan tullut EU:n saavutettavuusdirektiivi velvoittaa kaikkia julkisen sektorin toimijoita tekemään verkkopalveluistaan ja mobiilisovelluksistaan saavutettavia. On hyvä muistaa, että kyse ei ole vain laista tai säädöksistä, vaan aivan arkipäiväisestä saavutettavuudesta ja käytettävyydestä joista hyötyvät kaikki.

Verkkosisällön saavutettavuusohjeet (WCAG 2.1) suomeksi:

On myös hyvä tiedostaa, että WCAG-ohjeistuksella ei pystytä ratkaisemaan kaikkia saavutettavuuden ongelmia. Käyttäjien tuottama tai jakama sisältö ei kuulu lainsäädännön piiriin. Tällaisia sisältöjä ovat esimerkiksi viesteissä olevat tekstit, kuvat, videot tai ääniviestit. Erityisesti kuvien, videoiden ja ääniviestien käyttämiseenkin saavutettavasti keskusteluissa liittyy paljonkin haasteita. Nämä sisällöt eivät välttämättä ole saavutettavia ja se on osittain hyväksyttävä tällä hetkellä. Projektin saavutettavuun ja käytettävyyteen liittyviä kysymyksiä voi esittää myös Kohdataan Development Slackissa.

Yleistä ja ajantasaista tietoa saavutettavuudesta löydät mm. Aluehallintoviraston Saavutettavuusvaatimukset -palvelusta ja Papunetistä:

Automaattinen saavutettavuuden testaus

Kun osallistut projektin kehittämiseen, oleellinen osa on myös kattavien saavutettavuutta mittaavien automaatiotestien tekeminen. Tällä tavoin on helppo tarkistaa isoimmat saavutettavuuden tekniset ongelmat. Projektissa käytetään axe-core-pohjaista saavutettavuustestaukseen tarkoitettua kirjastoa (jest-axe, cypress-axe tms, pitää valita).

Testaamisen lähtökohta on, että saavutettavuus testataan aina, kun joku asia näkymässä muuttuu:

Toiseen näkymään navigointi
Viestit:
- Uuden viestin lähettäminen
- Uuden viestin vastaanottaminen
- jne.

Ennen pull requestin tekoa tarkista aina, että toteuttamasi ominaisuudet eivät ole ristiriidassa saavutettavuuden periaatteiden kanssa!

Automaattisen saavutettavuustestauksen työkalut eivät kuitenkaan ole täydellisiä ja ne ovat vain teknisesti suuntaa antavia. Automaattitesti ei esimerkiksi ota kantaa siihen, onko informaation ja käyttöliittymän toiminta käyttäjälle ymmärrettävä.

Muita työkaluja

Kun osallistut projektin kehittämiseen, oleellista on käyttää aiemmin mainittuja automaattisen saavutettavuustestauksen työkaluja. Olemassa on kuitenkin myös selainlaajennuksia WCAG-standardien mukaiseen testaamiseen. Niiden avulla on myös helppo tarkistaa tekniset saavutettavuuden ongelmat.

Microsoftin selainlaajennus (selaintuki: Chrome, Edge Insider) löytyy täältä
axe-selainlaajennus (selaintuki: Chrome, Firefox, Android) löytyy täältä
WAVE-selainlaajennus (selaintuki: Chrome, Firefox) löytyy täältä
IBM Equal Access Accessibility Checker (selaintuki: Chrome, Firefox) löytyy täältä

Pull Request -käytännöt

Kaikki kehitystyö tulee tehdä issuekohtaisissa brancheissa. Kun kehitystyösi on valmis, tee omasta branchistasi pull request development-branchiin. master-branchi sisältää viimeisimmän julkaisuversion ohjelmistosta.

Pull requestit kohdistuvat yksittäiseen issueen. Viittaa issuen numeroon ja otsikkoon pull requestin otsikossa ja leipätekstissä, jolloin issue siirtyy projektin työlistalla automaattisesti suljetuksi, kun pull request on hyväksytty ja onnistuneesti mergetty. Pull requesteille on valmis pohja, täytä pohjassa määritellyt kohdat huolellisesti. Näin kuvailet yksityiskohtaisesti mitä toteutuksesi tekee ja miten. Tämä nopeuttaa pull requesteja läpikäyvien ja hyväksyvien ihmisten työtä.

Hankkeen tekninen kumppani vastaa pull requestien läpikäynnistä ja hyväksymisestä. Voit olettaa, että pull requestisi on käyty läpi viimeistään seuraavaan arkipäivään kello 17 mennessä.

Bugien raportointi / uusien ominaisuustoiveiden tekeminen

Jos löydät projektista bugeja tee uusi issue projektin issueihin. Käytä bugien raportointiin tarkoitettua "Bug"-pohjaa.

Voit myös tehdä ehdotuksia uusiksi toteutettaviksi ominaisuuksiksi projektiin käyttäen samalta sivulta löytyvää "Feature"-pohjaa. Hankkeen henkilökunta arvioi ominaisuusehdotuksen tarpeellisuuden ja tarkoituksenmukaisuuden isommassa mittakaavassa, päättää otetaanko se projektin työlistalle, priorisoi sen sopivalle tasolle ja tarkentaa ominaisuuden kuvausta tarvittaessa.

Jos huomaat saavutettavuudessa ongelmia, anna meille suoraan palautetta lähettämällä sähköpostia osoitteeseen kohdataan@kohdataan.fi.

Kehitystyötä tukevaa materiaalia

Mattermost API documentation

Contributors

Thanks goes to these wonderful people (emoji key):

_{Mauri Karlin} 🚇	_{Jonne Airaksinen} 🚇 📆 📖	_{Pinja Kuosmanen} 💻 📖 👀 🤔	_Eeva-Jonna 💻	_{Emma Laitinen} 💻	_KaroliinaM 💻	_larenala 💻 🤔 ️️️️♿️ 👀
_Miika 💻	_jheiska 💻	_PyryV 💻	_TerriFin 💻 📖	_tanjarasanen 🤔 ️️️️♿️ 📆 📓	_{Mia Purho} 🤔 📓	_{Tero Avellan} 🤔 🐛 👀 ️️️️♿️ 📖
_osavisaari 🤔 🎨 📆