Miten sovelluksia käytännössä tehdään?
Tässä blogisarjassa käydään läpi vaihe vaiheelta sovelluksen suunnittelu, toteutus ja julkaisu, tervetuloa lukemaan!
Tämä on osa 3, osan 1 löydät täältä.
Moi! Minä olen Aija, olen Simplifiedilla päädevaajana. On maaliskuu 2024. Sain viime kuussa tehtäväksi tehdä sovelluksen, joka toimii lisäpalveluna nykyisille asiakkaillemme. Tämä oli myös loistava tilaisuus kertoa käytännössä, miten me tehdään sovelluksia. Tämä on osa 3, uudet osat julkaistaan täällä blogissa, sekä uutiskirjeessä (johon voit liittyä tekstin lopussa).
Tervetuloa seuraamaan sovellusprojektia!
Ensimmäisessä osassa käytiin läpi ideointivaihetta, tarkempi suunnitelma sovellusprojektille, tehtiin projektiin rajauksia ja kirjattiin ylös tärkeimmät asiat, joita sovelluksen täytyy tehdä ollakseen hyödyllinen.
Nämä päätökset vaikuttavat siihen, mikä Low-code /No-code alusta on projektille paras. Toisessa osassa kävimme läpi valitun alustan ja syitä valintaan:
Tähän projektiin valittiin alusta nimeltä Flutterflow. Se on Googlen entisten insinöörien kehittämä Low-code sovelluskehitysalusta, joka on suunniteltu ensisijaisesti mobiilisovelluksille.
Flutterin ja Flutterflown etu on se, että samalla koodipohjalla saadaan sovellus, joka toimii web-sovelluksena, työpöytäsovelluksena, sekä natiivina mobiilisovelluksena sekä Android- että iOS-käyttöjärjestelmissä. Tämän ansiosta ei tarvitse tehdä erikseen web- ja mobiiliversiota, vaan yksi lähdekoodi (ja sovellus) riittää.
Tässä tekstissä päästään taas lähemmäs konkretiaa ja aloitetaan sovelluksen suunnittelu. Tänään puhutaan siitä, mistä sovellus muodostuu, erityisesti kun puhutaan Low-codesta. Perinteinen koodi koostuu samoista elementestä, mutta termit ja yksityiskohdat ovat erilaisia. Tämä teksti on blogisarjan teknisin osio, mutta pidetään tämä silti kevyenä ja käytännönläheisenä.
Tavoitteena tässä osiossa on se, että jo perusteet ymmärtämällä pystyt itsekin miettimään, millainen oma sovelluksesi tulisi olemaan ja pystyt jälleen viemään omaa ideaasi lähemmäs toteutettavaa sovellusta. Mitä enemmän ymmärrät kehityksen eri vaiheista ja termeistä, sitä vähemmän sovellusprojekti tuntuu epämääräiseltä ja pelottavalta.
Tietokanta, jossa sovelluksen dataa säilytetään ja muokataan.
User Interface, eli UI, eli käyttöliittymä, joka on käyttäjälle näkyvä osio (kuten tämä nettisivu ja blogiteksti, jota nyt luet).
Logiikka, jonka avulla sovellus tekee eri toiminnallisuudet. Ilman logiikkaa sovellusta voi vain katsoa, mutta sillä ei voi tehdä mitään.
Tässä tekstissä käydään läpi tietokanta, loput osat käsitellään seuraavissa teksteissä.
Huomiona, usein sovelluskehitykseen ja sovelluksiin liittyvät myös esimerkiksi integraatiot, eli se, että sovellus yhdistetään muihin sovelluksiin. Tässä tekstissä keskitytään kuitenkin vain edellä mainittuihin osa-alueisiin, koska ne ovat sellaiset, joita ilman mikään sovellus ei toimi.
Integraatiot ovat siis tärkeitä ymmärtää, sillä ne laajentavat sovelluksen toiminnallisuuksia käytännössä rajattomasti, mutta koska tässä projektissa meillä on vain yksi sovellus, jonka ei tarvitse keskustella muiden sovellusten kanssa, tässä blogisarjassa ei puhuta integraatioista enempää.
Tietokanta on kuin erittäin voimakas Excel-tiedosto, jossa sovelluksen data sijaitsee. Kun sovellukseen tallennetaan esimerkiksi uusia käyttäjiä, tekstiä, kuvia, videoita tai muuta tietoa, tiedot lisätään tietokantaan, jonka kautta ne näytetään käyttäjälle sovelluksessa.
Flutterflow:n tietokanta on nimeltään Google Firestore, joka on osa Googlen Firebase-tuotetta. Muitakin tietokantoja voidaan käyttää, mutta ei ole oikeastaan syytä, sillä Firestore on erittäin tehokas ja skaalautuva tietokanta, joka toimii saumattomasti Flutterflow-sovelluksessa.
Kuvassa näet, miltä tämän sovelluksen testidata näyttää Firestoressa. Vasemmalla on navigaatio, josta pääsee kaikkiin tarvittaviin asetuksiin, kuten autentikointiin, suojausasetuksiin, Firestoren käyttäjärooleihin ja niin edelleen.
Keskellä sivua taas on näkymä tietokannasta, jossa nähdään, miltä yksi perehdytyssovelluksen yksittäisistä kysymyksistä näyttää.
Tietokantaan tallennetaan esimerkiksi kysymyksen nimi, vastausvaihtoehdot, sekä oikea vastaus.
Datatyyppi on määritelmä siitä, millaista tietoa sovelluksen tietokantaan voidaan tallentaa ja käsitellä. Näitä voi olla esimerkiksi teksti, kuva, numero jne.
Flutterflown kohdalla tarvittavat kentät ja niiden datatyypit voidaan määrittää suoraan Flutterflowssa ja ne päivittyvät yhdellä klikkauksella Firestoren tietokantaan. Kätevää!
Tässä esimerkkejä datasta, jota tähän sovellukseen tallennetaan:
LessonName: Sovelluksessa on kursseja, joiden sisällä on tunteja. Tämä tieto on yksinkertaisesti kyseisen tunnin nimi, joka tallennetaan tekstinä, jolloin tarvittava datatyyppi on "String".
LessonVideo: Tämän sovelluksen pääperiaate on se, että käyttäjä katsoo videon ja vastaa siihen liittyvään kyselyyn. Jotta tämä on mahdollista, jokaisella tunnilla täytyy tietysti olla video. Videotiedoston datatyyppi on Flutterflown termeillä "Video Path".
CourseREF: Jokainen tunti liittyy tiettyyn kurssiin. Vasemmalla näet "courses" collectionin, jossa ovat kaikki tiedot, joita sovelluksen eri kursseista täytetään. REF-nimi viittaa siihen, että tämä tieto haetaan "courses" collectionista.
Alasvetovalikossa näet, minkälaisia datatyypejä Flutterflowssa voidaan valita. On esimerkiksi numeroita (integer), kirjaimia ja numeroita (string), Boolean (kuten Yes/No tai True/False), Image, Video tai Audio path kuville, videoille sekä äänelle, ja paljon muuta.
Käyttäjälle nämä tiedot näkyvät luonnollisesti sovelluksessa näin, kuten olet itsekin tottunut sovellusten dataa lukemaan. Ylhäällä nähdään esimerkiksi tekstin [LessonName]. []-merkit viittaavat siihen, että teksti on dynaaminen kenttä, eli muuttuu aina sen mukaan, mitä tuntia ollaan katsomassa.
Sen alla nähdään videon paikka, jossa näytetään tälle tunnille ladattu videotiedosto.
Jotta nämä tekniset datatyyppi- ja tietokanta-asiat saadaan hieman lähemmäs käytäntöä, tässä muutama kysymys, joiden avulla voit miettiä, millaista dataa omassa sovelluksessasi on:
Jos sovellukseesi kirjaudutaan käyttäjätunnuksella, tallennat käyttäjätietoja. Näitä voivat olla esimerkiksi nimi, sähköposti, salasana ja profiilikuva.
Jos sovelluksesi liittyisi vaikka projektinhallintaan, tallentaisit esimerkiksi seuraavia tietoja: Projektin nimi (teksti), projektin aloitus- ja lopetuspäivät (päivämäärä), projektin tilanne (kuten ei aloitettu, aloitettu, valmis, tämä toteutetaan yleensä jonkinlaisella "status"-datatyypillä.)
Tai, jos sovelluksesi liittyisi esimerkiksi remontointiin tai korjauksiin, saattaisit liittää jokaiseen remonttityöhön kuvat todisteeksi tehdystä työstä, tai esimerkiksi selkeyttämään aloitustilannetta, joka asiakkaalla on ennen korjausta. Silloin tallentaisit luonnollisesti kuvatiedoston.
Myyrmäki, Vantaa
moi[at]simplified.fi
Rajatorpantie 8, Vantaa
IT-asioissa sinua palvelee:
