Verkkosivujen suunnittelu ja toteutus Vue.js:llä
Ilvonen, Tommi (2018)
Ilvonen, Tommi
Haaga-Helia ammattikorkeakoulu
2018
All rights reserved
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:amk-2018052910977
https://urn.fi/URN:NBN:fi:amk-2018052910977
Tiivistelmä
Opinnäytetyö käsittelee verkkoportfolion suunnittelua ja toteutusta toimeksiantaja Kalle Pitkäselle. Verkkoportfolio on perinteistä CV:tä nykyaikaisempi tapa esittää osaamista, saavutuksia ja työkokemusta. Verkkoportfolio on käytännössä sama asia kuin yrityksen verkkosivut, mutta brändäyksen ja markkinoinnin kohteena on yrityksen sijasta yksityishenkilö.
Opinnäytetyön toimeksiantajana toimii taiteilija Kalle Pitkänen, joka on suuntautunut öljy- ja temperamaalauksiin. Pitkänen on aiemmin laittanut töitään esille kuvien jakopalvelu Instagramiin. Myyntiä, tavoitettavuutta ja tunnettavuutta edistääkseen Pitkänen on ajatellut tarvitsevansa itselleen verkkoportfolion, johon hän voisi laittaa teoksiaan esille sekä kertoa itsestään.
Opinnäytetyön tavoitteena on toteuttaa toimeksiantajalle verkkoportfolio, joka on vähim-mäisvaatimuksiltaan julkaistu, responsiivinen, käytettävä ja ulkoasultaan valmis. Näkymiä pitää olla etusivu, henkilökuvaus, kuvagalleria ja yhteystiedot. Kuvagallerian pitää helppo-käyttöinen ja tuoda hyvin esille Pitkäsen taideteokset.
Verkkoportfolio toteutetaan tekijälle ennestään tuntemattomilla web-teknologioilla ja näin tarkoituksena on tukea hänen ammatillista kasvuaan. Opinnäytetyön ei ole tarkoitus kertoa, kuinka tehdä verkkosivut mahdollisimman tehokkaasti ja helposti. Opinnäytetyön tarkoitus on suunnitella ja tuottaa toimeksiantajalle ratkaisu, perustella valitut teknologiat ja kuvata toimeksiannon työvaiheiden kulkua.
Opinnäytetyön teoriaosuus koostuu projektin määrittelystä, jossa käydään läpi erilaisia web-kehitysteknologioita ja toteutustapoja. Määrittelyosuudessa perustellaan ja kuvaillaan valitut teknologiat. Toteutusosuudessa käydään toteutusvaiheittain läpi toteutuksen vaiheita. Opinnäytetyön toteutusaikataulu oli 12.2.2018 – 7.5.2018.
Opinnäytetyön lopputuloksena toimeksiantajalle syntyi verkkosivut kallepitkanen.com. Verkkosivujen sovelluskehyksenä toimi Vue.js ja käyttöliittymäkomponenttikirjastona oli käytössä Vuetify. Verkkosovellus julkaistiin Docker- ja Dokku-teknologioita käyttäen ja julkaisuprosessi automatisoitiin tapahtumaan lyhyellä yhden rivin komennolla.
Opinnäytetyön toimeksiantajana toimii taiteilija Kalle Pitkänen, joka on suuntautunut öljy- ja temperamaalauksiin. Pitkänen on aiemmin laittanut töitään esille kuvien jakopalvelu Instagramiin. Myyntiä, tavoitettavuutta ja tunnettavuutta edistääkseen Pitkänen on ajatellut tarvitsevansa itselleen verkkoportfolion, johon hän voisi laittaa teoksiaan esille sekä kertoa itsestään.
Opinnäytetyön tavoitteena on toteuttaa toimeksiantajalle verkkoportfolio, joka on vähim-mäisvaatimuksiltaan julkaistu, responsiivinen, käytettävä ja ulkoasultaan valmis. Näkymiä pitää olla etusivu, henkilökuvaus, kuvagalleria ja yhteystiedot. Kuvagallerian pitää helppo-käyttöinen ja tuoda hyvin esille Pitkäsen taideteokset.
Verkkoportfolio toteutetaan tekijälle ennestään tuntemattomilla web-teknologioilla ja näin tarkoituksena on tukea hänen ammatillista kasvuaan. Opinnäytetyön ei ole tarkoitus kertoa, kuinka tehdä verkkosivut mahdollisimman tehokkaasti ja helposti. Opinnäytetyön tarkoitus on suunnitella ja tuottaa toimeksiantajalle ratkaisu, perustella valitut teknologiat ja kuvata toimeksiannon työvaiheiden kulkua.
Opinnäytetyön teoriaosuus koostuu projektin määrittelystä, jossa käydään läpi erilaisia web-kehitysteknologioita ja toteutustapoja. Määrittelyosuudessa perustellaan ja kuvaillaan valitut teknologiat. Toteutusosuudessa käydään toteutusvaiheittain läpi toteutuksen vaiheita. Opinnäytetyön toteutusaikataulu oli 12.2.2018 – 7.5.2018.
Opinnäytetyön lopputuloksena toimeksiantajalle syntyi verkkosivut kallepitkanen.com. Verkkosivujen sovelluskehyksenä toimi Vue.js ja käyttöliittymäkomponenttikirjastona oli käytössä Vuetify. Verkkosovellus julkaistiin Docker- ja Dokku-teknologioita käyttäen ja julkaisuprosessi automatisoitiin tapahtumaan lyhyellä yhden rivin komennolla.