📝 Esittely
“The Splitter” on työkalu, joka ratkaisee klassisen ongelman: miten jakaa ravintolalasku reilusti ystävien kesken. Sovellus laskee tipin osuuden ja loppusumman per henkilö.
Minun roolini oli rakentaa sovellus alusta loppuun. Käytin pohjana Frontend Mentor haasteen ulkoasua, mutta laajensin projektia merkittävästi tekemällä siitä täysiverisen PWA-sovelluksen (Progressive Web App).
✨ Tärkeimmät ominaisuudet:
- 🧮 Reaaliaikainen laskenta: Laskee summat heti, kun syötät luvut. Ei turhia “Laske”-painikkeen painalluksia.
- 📱 Asennettava sovellus (PWA): Toimii kuten oikea mobiilisovellus. Sen voi ladata Google Play kaupasta, Microsoft Storesta tai asentaa suoraan selaimesta.
- 📡 Toimii ilman nettiä: Kiitos Service Worker teknologian, sovellus toimii täydellisesti myös lentokonetilassa tai huonossa verkossa.
- 🤝 Jaa tulos: Valmis laskelma on helppo jakaa kavereille (esim. WhatsAppissa) sisäänrakennetun jakotoiminnon avulla.
🛠️ Käytetyt teknologiat:
- Kielet: HTML5, SCSS (Sass), Vanilla JavaScript (ei raskaita kirjastoja)
- PWA: Service Workers, Web App Manifest
- Jakelu: Netlify, Google Play Store (TWA), Microsoft Store
🎯 Tarkoitus ja tavoite
Alkuperäinen tavoite oli oppia tekemään PWA-sovelluksia. Halusin ymmärtää, miten verkkosivusta tehdään sovellus, joka tuntuu ja näyttää “aidolta” mobiilisovellukselta.
Halusin myös todistaa, että yksinkertaiseen työkaluun ei tarvita Reactia tai muita raskaita kehyksiä. Pelkkä puhdas JavaScript (Vanilla JS) riittää tekemään sovelluksesta salamannopean.
Tämän projektin “tähti” on sen kyky toimia ilman internetiä ja sen löydettävyys sovelluskaupoista.
🔧 Tekniset haasteet ja ratkaisut:
Haaste: Miten sovellus toimii ilman nettiä? 🔌
Yleensä verkkosivu näyttää “ei yhteyttä” virheen, jos netti katkeaa. Halusin, että laskuri toimii aina.
✅ Ratkaisu: Koodasin service-worker.js tiedoston.
Se on kuin pieni vahtimestari selaimen ja netin välissä. Kun käyttäjä avaa sovelluksen ensimmäisen kerran, vahtimestari tallentaa kaikki tarvittavat tiedostot (HTML, CSS, JS, kuvat) puhelimen muistiin (cache). Seuraavalla kerralla sovellus ladataan suoraan muistista, jolloin se aukeaa heti, oli nettiä tai ei.
Haaste: Miten verkkosivu saadaan Play Kauppaan? 🛒
Google Play vaatii yleensä Android-koodia (Java/Kotlin). En halunnut opetella uutta kieltä vain pienen laskurin takia.
✅ Ratkaisu: Käytin TWA-tekniikkaa (Trusted Web Activity)
Se pakkaa verkkosivun Android-sovelluksen “kuoriin”. assetlinks.json tiedosto todistaa Googlelle, että minä omistan sekä verkkosivun että sovelluksen, mikä mahdollistaa julkaisun kaupassa turvallisesti.
📊 Mittarit & Standardit
Koska sovellus on tehty puhtaalla koodilla ilman kehyksiä, se on teknisesti erittäin kevyt.
⚡ Suorituskyky (Performance):
- Koko sovellus on vain muutaman kilotavun kokoinen. Se latautuu sekunnin murto-osassa.
- Ei Reactin tai Vuen tuomaa ylimääräistä latausaikaa. Koodi suoritetaan heti.
🔒 Tietoturva (Security):
- Sovellus toimii täysin käyttäjän laitteella. Mitään laskutietoja ei lähetetä palvelimelle, joten tietovuodon riski on nolla.
- PWA-vaatimusten mukaisesti yhteys on aina salattu.
👁️ Yksityisyys (Privacy):
- Sovelluksessa ei ole mainoksia eikä analytiikkaa, joka vakoilisi käyttäjää.
- Sovellus ei pyydä turhia lupia (kuten sijaintia tai kameraa).
♿ Saavutettavuus (Accessibility):
- Käytin oikeita label- ja input-elementtejä, jotta ruudunlukijat ymmärtävät lomakkeen.
- Esimerkiksi tippiprosenttien valintanapeissa on selkeät aria-label kuvaukset apuvälineitä varten.
🟢 Nykyinen tilanne
Sovellus on julkaistu ja vapaasti kaikkien käytössä. Se on esimerkki siitä, miten “yksinkertainen” verkkosivu voi korvata perinteisen mobiilisovelluksen monessa käytössä.
🎓 Opetukset
Opin PWA:n elinkaaren: miten Service Worker asennetaan, aktivoidaan ja päivitetään. Tämä on kriittistä osaamista modernissa web-kehityksessä. Opin myös SCSS:n käyttöä tyylien hallinnassa.
Projektinhallinta: Opin viemään projektin “maaliin asti” eli julkaisemaan sen oikeissa sovelluskaupoissa (Google Play ja Microsoft Store), mikä vaatii omat prosessinsa ja kuvakaappauksensa.
