📝 Esittely
Tämä projekti on “Rhyme”, tekoälypohjainen verkkosovellus (PWA) runoilijoille ja kirjailijoille. ✒️ Sovellus yhdistää kaksi eri API-rajapintaa: yhden sanatietokantaan ja toisen tekoälymalliin.
Minun roolini oli projektin full-stack kehitys 👨💻. Tein sovelluksen käyttöliittymän (HTML, CSS, Bootstrap), kaiken toiminnallisuuden (JavaScript) sekä taustajärjestelmän (Netlify Functions), joka hoitaa tekoäly-yhteydet turvallisesti.
✨ Tärkeimmät ominaisuudet
- 🔎 Sanahaku: Yhdistää Datamuse API:in, jolla voi etsiä sanoja, jotka esimerkiksi rimmaavat tai kuulostavat samalta.
- 🤖 Tekoälyapu: Käyttäjä voi pyytää tekoälyä viimeistelemään aloitetun runon.
- 🧐 Tekoälyanalyysi: Sovellus antaa palautetta ja analysoi käyttäjän kirjoittaman runon rakenteen.
- 💾 Paikallinen tallennus: Käyttäjä voi tallentaa runonsa selaimen muistiin ja jatkaa myöhemmin.
- 📤 Jakotoiminto: Valmiin runon voi jakaa helposti
navigator.sharetoiminnolla.
🛠️ Käytetyt teknologiat
- Frontend: HTML5, CSS3, Bootstrap 5, JavaScript
- API-rajapinnat: Datamuse API, Mistral AI
- Backend: Netlify Functions
- Paketointi: Parcel
🎯 Tarkoitus ja tavoite
Tämän projektin tavoite oli kaksiosainen. Ensinnäkin halusin luoda aidosti hyödyllisen työkalun luoville kirjoittajille. Toiseksi halusin opetella ja näyttää, miten rakennetaan moderni verkkosovellus, joka hyödyntää ulkoisia API-rajapintoja turvallisesti.
Lopputuloksena oli selkeä kahden paneelin käyttöliittymä, jossa sanahaku ja kirjoittaminen tukevat toisiaan.
Tämän sovelluksen “paras ominaisuus” on se, miten se yhdistää kaksi täysin erilaista ulkoista palvelua (Datamuse ja OpenRouter) yhdeksi toimivaksi kokonaisuudeksi. Tämä tehtiin tavalla, joka on käyttäjälle helppo ja kehittäjälle turvallinen.
💻 Tekniset haasteet ja ratkaisut
Haaste: API-avaimen suojaaminen 🔑
Tekoälyn käyttäminen vaatii salaisen API-avaimen. Tämän avaimen laittaminen julkiseen JavaScript-koodiin olisi valtava tietoturvariski. Kuka tahansa voisi varastaa sen ja käyttää sitä omalla kustannuksellani.
✅Ratkaisu: Rakensin Netlify Function taustatoiminnon Kun käyttäjä pyytää tekoälyltä apua, selain ei soita suoraan tekoälylle. Sen sijaan selain kutsuu minun omaa Netlify-toimintoani. Tämä taustatoiminto hakee salaisen API-avaimen turvallisesti Netlifyn ympäristömuuttujista ja se tekee kutsun tekoälylle. Näin salainen avain pysyy täysin piilossa.
Haaste: Datan kerääminen ja yksityisyys 🕵️
✅Ratkaisu: Sovellus kertoo käyttäjälle avoimesti, että heidän tietojaan ei kerätä tekoälymallin kouluttamista varten. Tämä oli tärkeä valinta yksityisyyden ja luottamuksen kannalta.
📊 Mittarit & Standardit
Tässä projektissa keskityttiin erityisesti tietoturvaan ja suorituskykyyn. Alla on eriteltynä projektin tekniset saavutukset:
⚡ Suorituskyky
- Kuvat on esiladattu
<link rel="preload">ja optimoitu modernilla AVIF-formaattilla. - JavaScript-koodi on jaettu moduuleihin
type="module"ja ladattu viivästetystidefer, mikä estää sivun latautumisen hidastumisen. - DOM-päivitykset on tehty tehokkaasti käyttämällä
DocumentFragment-tekniikkaa, mikä vähentää selaimen uudelleenpiirtämistä hakutuloksia listatessa.
📈 Hakukoneoptimointi
- Sivusto käyttää semanttista HTML5-rakennetta
header, main, nav. - Sosiaalisen median jakoa varten on määritetty Open Graph-metatiedot
og:image. - Kaikille sivuille on määritetty asianmukaiset meta-kuvaukset ja tekijätiedot.
🛡️ Tietoturva
- Kriittisin tietoturvaelementti on toteutettu Serverless-funktiolla, joka estää API-avainten vuotamisen selaimeen.
- Pakotettu salattu yhteys (HTTPS) kaikessa liikenteessä.
- Käyttäjän syötteet tarkistetaan ennen niiden lähettämistä API:lle, mikä ehkäisee injektiohyökkäyksiä.
🕵️♀️ Yksityisyys
- Sovellus on suunniteltu niin, että käyttäjän runoja ei tallenneta pilveen eikä käytetä tekoälymallien kouluttamiseen.
- “Tallenna”-toiminto käyttää selaimen omaa
localStorage-muistia, jolloin data pysyy vain käyttäjän omalla laitteella. - Käytössä on Mistral AI, joka on eurooppalainen toimija, mikä tukee paremmin tietosuojavaatimuksia.
♿ Saavutettavuus
- Dynaamisesti luoduille hakutuloksille ja modaali-ikkunoille on lisätty
aria-labeljaaria-labelledby-attribuutit ruudunlukijoita varten. - Lomakkeet ja tuloslistat ovat navigoitavissa näppäimistöllä.
- Oikeaoppinen otsikkorakenne
h1-h6auttaa apuvälineitä hahmottamaan sivun sisällön.
🟢 Nykyinen tilanne
Sovellus on livenä ja toiminnassa. Se on progressiivinen verkkosovellus (PWA), eli sen voi asentaa puhelimeen tai tietokoneelle kuin tavallisen sovelluksen. 📱
🎓 Opetukset
🤔 Ei-tekniset opit
Opin suunnittelemaan käyttöliittymän, joka palvelee kahta eri tarkoitusta samanaikaisesti. Selkeä kahden paneelin asettelu (vasemmalla työkalut, oikealla kirjoitusalue) tekee sovelluksesta helppokäyttöisen.
👨🏫 Tekniset opit
Tämä projekti oli syväsukellus palvelimettomaan (serverless) arkkitehtuuriin. Opin käytännössä, miksi ja miten Netlify Function taustatoiminto rakennetaan. Se on paras tapa suojata API-avaimet ja pitää samalla sivusto nopeana ja staattisena. Opin myös hallitsemaan useita fetch-kutsuja ja niiden lataus- ja virhetiloja.
♿ Saavutettavuus
Bootstrap tarjoaa helppokäyttöisen kehyksen valmiille tyyleille, asettelutyökaluille ja interaktiivisille komponenteille, joiden avulla kehittäjät voivat luoda verkkosivustoja ja sovelluksia. Bootstrapilla on mahdollista luoda verkkosivustoja ja sovelluksia, jotka täyttävät WCAG 2.2 -standardin.
