Fakulteta za raˇ cunalniˇ stvo in informatiko
Tilen Kavˇciˇc
Zajem zahtev, razvoj in priprava naˇ crta trˇ zenja za aplikacijo za deljenje
povezav
DIPLOMSKO DELO
UNIVERZITETNI ˇSTUDIJSKI PROGRAM PRVE STOPNJE
RA ˇCUNALNIˇSTVO IN INFORMATIKA
Mentor : izr. prof. dr. Tomaˇ z Hovelja
Ljubljana, 2021
koriˇsˇcenje rezultatov diplomske naloge je potrebno pisno privoljenje avtorja, Fakultete za raˇcunalniˇstvo in informatiko ter mentorja.
deljenje povezav
Vrsta naloge: Diplomska naloga na univerzitetnem programu prve stopnje Raˇcunalniˇstvo in informatika
Mentor: izr. prof. dr. Tomaˇz Hovelja
Opis:
Kandidat naj preuˇci trg aplikacij za deljenje povezav. Nato naj doloˇci kljuˇcne funkcionalnosti, ki jih bo razvita aplikacija vsebovala, da bo lahko konku- renˇcna obstojeˇcim. Nato naj aplikacijo razvije ter pripravi naˇcrt trˇzenja zanjo.
govorili z mano in tako prispevali k analizi trga, predvsem Aleˇsu Ugovˇsku.
Povzetek Abstract
1 Uvod 1
2 Analiza trga 5
2.1 Analiza konkurence . . . 6
2.2 Analiza produktov . . . 12
2.3 Analiza kupcev . . . 14
3 Naˇcrt izdelave 19 3.1 Doloˇcanje zahtev . . . 19
3.2 Uporabljene tehnologije . . . 21
3.3 Arhitektura aplikacije . . . 27
3.4 Oblikovanje . . . 29
4 Predstavitev delovanja aplikacije 41 4.1 Izdelava in urejanje strani . . . 41
4.2 Podatkovna baza . . . 44
4.3 Avtentikacija . . . 45
4.4 Dodatne zahteve . . . 46
4.5 Uporabniˇsko testiranje . . . 50
5.2 Kljuˇcne aktivnosti . . . 56
5.3 Finanˇcni naˇcrt trˇzenja . . . 59
6 Sklepne ugotovitve 71 Literatura 73 Priloge 85 A Programska koda 87 A.1 Datoteka PageContext . . . 87
A.2 Iskanje slike iz HTML podatkov strani Anchor . . . 87
A.3 Varnostna pravila podatkovne baze . . . 88
A.4 Preverba brezstreˇzniˇske funkcije . . . 88
A.5 Vgradnja podcasta v spletno stran . . . 89
A.6 Primer uporabe komponent za urejanje postavitve strani . . . 89
A.7 Lebdeˇci gumb na dnu . . . 90
B Tabele 91 B.1 Finanˇcni naˇcrt trˇzenja v 12., 24. in 36. mesecu za dober scenarij vsebinskega oglaˇsevanja. . . 91
B.2 Finanˇcni naˇcrt trˇzenja v 12., 24. in 36. mesecu za slab scenarij vsebinskega oglaˇsevanja. . . 92
B.3 Finanˇcni naˇcrt trˇzenja v 12., 24. in 36. mesecu za dober scenarij SEO. . . 92
B.4 Finanˇcni naˇcrt trˇzenja v 12., 24. in 36. mesecu za slab scenarij SEO. . . 93
B.5 Finanˇcni naˇcrt trˇzenja v 12., 24. in 36. mesecu za dober scenarij medijskega oglaˇsevanja. . . 93
B.6 Finanˇcni naˇcrt trˇzenja v 12., 24. in 36. mesecu za slab scenarij medijskega oglaˇsevanja. . . 94
kratica angleˇsko slovensko
SaaS Software as a service aplikacija kot storitev API Application Programming
Interface
programski vmesnik
CSV Comma-separated Values format besedilne datoteke, ki vsebuje z vejico loˇcene vre- dnosti
CTR Click-through Rate stopnja odzivnosti
DOM Document Object Model objektni model dokumenta JSX JavaScript Syntax Extension JavaScript sintaktiˇcna pri-
pona datoteke HTML HyperText Markup Langu-
age
oznaˇcevalni jezik za oblikova- nje veˇcpredstavnostnih doku- mentov
CDN Content Delivery Network omreˇzje za dostavo vsebin CSS Cascading Style Sheets prekrivni slogi
SCSS Sassy Cascading Style Sheets jezikavi prekrivni slogi Sass Syntactically Awesome Style
Sheets
sintaktiˇcno super slogi
SDK Software Development Kit paket za razvoj programske opreme
HTTPS Hypertext Transfer Protocol Secure
varni protokol za prenos hiperteksta
CAC Customer acquisition cost cena pridobljenega plaˇcljivega uporabnika
CPC Cost-per-click cena enega klika
SEO Search engine optimization optimizacija spletnih strani
Naslov: Zajem zahtev, razvoj in priprava naˇcrta trˇzenja za aplikacijo za deljenje povezav
Avtor: Tilen Kavˇciˇc
Podjetja preko druˇzbenih omreˇzij delijo povezave s pomoˇcjo storitev, ki omogoˇcajo zdruˇzevanje veˇc razliˇcnih povezav v eno. Uporabljajo aplikacije, ki so konˇcnim uporabnikom pogosto okorne za uporabo, poˇcasne in nepre- gledne. Podjetja, ki izdelujejo te aplikacije, trud vlagajo predvsem v funkci- onalnosti za kupce, konˇcni uporabniki pa so jim manj pomembni. Aplikacija je bila izdelana z namenom, da bi jo konˇcni uporabniki z veseljem upora- bljali, ˇse vedno pa bi zadostovala vsem zahtevam kupcev. Na podlagi analize trga je bil doloˇcen trg, ki bo najbolje sprejel novo aplikacijo na podroˇcju zdruˇzevanja povezav. Ko je bil trg doloˇcen, so bile s pomoˇcjo potencialnih kupcev doloˇcene zahteve aplikacije. Aplikacija je bila nato na podlagi zahtev izdelana. Cilj konˇcnega izdelka je zadovoljiti potencialne kupce in konˇcne uporabnike. Da bi aplikacija to dosegla, je bilo namenjenega veliko ˇcasa obli- kovanju navduˇsujoˇcega produkta in raziskovanju, kaj trg ˇzeli. Na koncu je bil izdelan naˇcrt trˇzenja.
Kljuˇcne besede: analiza trga, uporabniˇski vmesnik, brezstreˇzniˇska tehno- logija, trˇzenje.
Title: Requirements aquisition, development and marketing of a link sharing application
Author: Tilen Kavˇciˇc
Companies share links on social media using services that allow sharing of multiple links using just one link. They use applications that commonly have bad design decisions for the end-user, they are cumbersome, slow, and opaque. Companies making such applications often use their time to develop functionalities for their customers, while not paying much attention to end- users. The application was made with the goal that end-users will enjoy using it, while it will also solve customers’ problems. Based on our market research the application was developed for the market that will most enthusiastically accept a new application that shows multiple links to the end-user. When the right market was found, application development involved the stakeholders and leveraged their expertise to design the application and develop it. The goal of the final product is to satisfy stakeholders and end-users. To achieve this, a lot of time was spent researching what specifically the market needs and designing a delightful product. Lastly, a marketing plan was established for the finished application.
Keywords: market research, user interface, serverless, marketing.
Uvod
Oglaˇsevalske agencije ˇze veˇc kot desetletje uporabljalo storitve za skrajˇsevanje spletnih povezav z namenom boljˇse analitike in bolj privlaˇcne podobe po- vezav [110]. Sploˇsna reˇsitev krajˇsanja povezav se je s ˇcasoma razˇsirila v veˇc reˇsitev s kompleksnejˇsimi funkcionalnostmi, ki so namenjene specifiˇcnim niˇsam. V tej diplomski nalogi se osredotoˇcimo na reˇsitve, ki omogoˇcajo iz- delavo povezave, ki ob kliku konˇcnega uporabnika pelje do spletne strani s seznamom povezav. Analiziramo tri trge, kjer se te aplikacije uporabljajo, in- dustrijo vplivneˇzev, glasbeno industrijo in industrijo izdelave podcastov [41].
Storitve, namenjene vplivneˇzem, ki delijo povezave na druˇzbenih omreˇz- jih, so se razvile kot posledica omejevalnih pravili druˇzbenih omreˇzij [19].
Na druˇzbenem omreˇzju Instagram so vplivneˇzi omejeni na eno povezavo na profilu, na objavah so povezave prepovedane, na zgodbah pa so povezave do- voljene le odobrenim osebam in podjetjem z 10.000 sledilcev ali veˇc [54]. Ker uporabniki na objavi Instagram ne morejo podati povezave, sledilce pogosto usmerijo na povezavo v svojem uporabniˇskem profilu [19]. Posledica ome- jitev je velika vrednost povezave v uporabniˇskem profilu. Uporabniki ˇzelijo sledilce usmeriti na veˇc platform. To reˇsujejo storitve, kot je Linktree, ki uporabniku omogoˇcajo izdelavo spletne strani s seznamom povezav.
Glasbena industrija je potrebo po podobnih storitvah videla predvsem za- radi analitike. Primarno uporablja storitve, ki jim povezavo na novo skladbo
1
ali album za vse pretoˇcne storitve zdruˇzijo na eni strani. Povezave industrija uporablja primarno pod glasbenimi video spoti. Pogosto jih uporablja tudi pri promociji na druˇzbenih omreˇzjih. Glasbeniki za storitve priˇcakujejo, da so plaˇcljive, velike glasbene zaloˇzbe pa za specifiˇcne funkcionalnosti priˇcakujejo visoka letna plaˇcila.
Za glasbeno industrijo je pomemben nabor funkcionalnosti, ki jih pro- dukt ponuja. Kupci so pripravljeni plaˇcati veˇc za avtomatizacijo del, obseˇzno analitiko in podrobno personalizacijo. V primerjavi s podobnimi storitvami v drugih segmentih je na tem podroˇcju manjˇsi poudarek na oblikovanju in veˇcji poudarek na analitiki. Potreba po analitiki prihaja iz narave poslova- nja industrije, kjer veˇcinski deleˇz prihodkov prihaja iz dogodkov in prodaje promocijskega materiala. Analitiko povezav uporabljajo za laˇzje oglaˇsevanje oblaˇcil in dogodkov. Segment zato uporablja storitve, ki, navkljub poˇcasnejˇsi in manj prijazni uporabniˇski izkuˇsnji, podrobneje sledijo konˇcnim uporabni- kom.
Podcasti, ali audioblogi, kot so se imenovali na zaˇcetku, so se zaˇceli v 2000-ih s popularizacijo bloganja [57] in Applovega iPoda. Omogoˇcila jih je tehnologija RSS, ki uporabnikom dovoli sledenje novim epizodam. ˇSiritev podcastov se je zaˇcela, ko je Apple dodal kategorijo podcastov v predvajalnik iTunes leta 2005. Segment je v naslednjih letih nihal med stagnacijo in rastjo. Podcasti so v javno zavest priˇsli leta 2014, ko je radijski program This American Life objavil prvo epizodo internacionalne uspeˇsnice Serial [55].
Ker ustvarjanje novih enostavnih podcastov ni kompleksno, je neodvisna izdelava podcastov popularna. Podcast lahko izdelajo vplivneˇzi, prijatelji ali osebe s poglobljenim znanjem o neki temi. Veˇcino podcastov snema 1–
5 oseb brez podpore veˇcjih institucij. To se odraˇza v podatkih aplikacije Apple Podcasts, ki je aprila 2021 gostovala veˇc kot 2 milijona razliˇcnih pod- castov [7]. Zaradi velikega ˇstevila posameznih podcasterjev je lahko prodaja storitev na trg usmerjena tudi v posameznike, ne le na veˇcja podjetja. Izmed treh raziskanih trgov je prodaja v segmentu podcastov bolj osredotoˇcena na posameznike, kot je to na trgu glasbene industrije.
V slovenskem prostoru podcasti ˇse niso prodrli v nacionalno zavest tako kot v Zdruˇzenih drˇzavah Amerike. To se odraˇza v tem, da so najveˇcji slo- venski podcasti radijski ˇsovi. Podjetij, ki se ukvarjajo samo s podcasti, je malo [96]. Ameriˇski trg se je zaˇcel predvsem z radijskimi produkcijami in posameznimi podcasti, vendar v zadnjih letih popularne podcaste izdelujejo predvsem specializirana podjetja. Industrija podcastov ima v Sloveniji pro- stor za rast, kar pomeni priloˇznost za podjetja, da rastejo z industrijo. Posle- dica je prodaja produktov, ki je osredotoˇcena predvsem na manjˇsa podjetja in prodajo dodatnih storitev.
Uporabniku, ki sledi povezavam, je uporaba storitev, ki veˇc povezav zdruˇzijo v eno, pogosto poˇcasna, okorna in nepregledna. Namen diplom- ske naloge je ponuditi uporabnikom boljˇso storitev in ugotoviti, kje na trgu ima naˇsa razvita aplikacija najveˇcjo moˇznost uspeha.
Cilj diplomske naloge je analizirati trge industrije vplivneˇzev, glasbene in- dustrije in industrije podcastov. Za vsako podroˇcje raziˇsˇcemo povpraˇsevanje po produktu izdelovanja strani za povezave, z namenom, da identificiramo trg z najveˇcjim povpraˇsevanjem. Razvoj aplikacije tako prilagodimo ugoto- vitvam analize trga. Tako izdelamo aplikacijo, ki vsebuje zahteve, ki smo jih doloˇcili na podlagi analize trga, kot tudi doloˇcene spremembe, pridobljene med izdelavo z intervjuji s posamezniki iz industrije. Izdelamo tudi naˇcrt trˇzenja, ki doloˇci kljuˇcne aktivnosti trˇznega lijaka. Naˇcrt trˇzenja vsebuje tudi naˇcrt oglaˇsevanja aplikacije v obdobju treh let. Aplikacija bo ponu- jala funkcionalnosti, zaradi katerih bo na izbranih trgih lahko konkurirala obstojeˇcim produktom. Konˇcni izdelek bo vseboval nabor funkcionalnosti, katere podcaster teˇzko najde pri konkurenˇcnih podjetjih.
Delo zaˇcnemo z analizo trga, kjer analiziramo industrijo vplivneˇzev, glas- beno industrijo in izdelavo podcastov. Posamezna podroˇcja analiziramo iz vidika konkurenˇcnih podjetij, produktov in potencialnih kupcev. Na podlagi analize doloˇcimo najprimernejˇse podroˇcje za izdelavo aplikacije. Nato v 3.
poglavju na podlagi analize trga doloˇcimo zahteve, na osnovi katerih izde- lamo aplikacijo. Oblikujemo skelet aplikacije, doloˇcimo tipografijo, logotip,
barvno paleto in oblikujemo zaslonske slike aplikacije. Na podlagi zaslonskih slik izdelamo tudi promocijski material in prototip aplikacije. Opiˇsemo tudi tehnologije, potrebne za izdelavo aplikacije in izdelamo njen naˇcrt. V 4. po- glavju nato implementiramo reˇsitev s pomoˇcjo ogrodja Next.js in platforme Firebase. Izdelano aplikacijo nato predstavimo podcasterjem in preverimo povratne informacije. V 5. poglavju vzpostavimo naˇcrt trˇzenja aplikacije.
V 6. poglavju primerjamo rezultate s postavljenimi cilji, opiˇsemo omejitve diplomske naloge in strnemo moˇznosti nadgradnje aplikacije.
Analiza trga
Trg aplikacij za izdelavo strani s povezavami analiziramo po metodah, pred- stavljenih v The Startup Owner’s Manual [14]. Poslovni del je zasnovam na osnovi knjige Business Model Generation [6] avtorjev Alexander Osterwalder in Yves Pigneur. Metoda zahteva analizo okolja, kjer spoznamo kupce, kon- kurenˇcne produkte in konkurenˇcna podjetja. Proces nam omogoˇca spozna- vanje trga za opredelitev kljuˇcnih zahtev aplikacije. Intervjuji potencialnih kupcev potekajo po formatu Fitzpatrickovega pristopa [40]. Potekajo brez vodenja intervjuvanca z namenom, da izvemo, s katerimi problemi se sreˇcuje.
Pred intervjuji doloˇcimo raziskovalna vpraˇsanja za konˇcne uporabnike in po- tencialne stranke, ki osredotoˇcijo intervju.
Postavimo raziskovalna vpraˇsanja konˇcnim uporabnikom storitev.
• Ali so uporabniki zadovoljni z izkuˇsnjo strani?
• Ali so uporabniki zadovoljni z videzom strani?
• Ali so uporabnikom pojavna okna za piˇskotke in analitiko nadleˇzna?
Doloˇcimo tri karakteristike potencialnih strank. Stranke so lahko podje- tja ali posamezniki v industriji vplivneˇzev, glasbeni industriji ali industriji izdelave podcastov.
• Stranke si ˇzelijo enostavne aplikacije, ki je lahka za uporabo;
• prilagajanje strani, ki jo izdela aplikacija, ni prioriteta;
5
• hitro in navduˇseno upravljanje z aplikacijo je pomembnejˇse od funkci- onalnosti.
Z analizo trga doloˇcimo niˇso, na katero se bo aplikacija osredotoˇcila. Iz- biramo med industrijo vplivneˇzev, glasbeno industrijo in industrijo izdelave podcastov. Analiziramo konkurenˇcna podjetja, produkte in stranke vseh po- droˇcij.
2.1 Analiza konkurence
Podpoglavje analizira konkurenˇcna podjetja na treh razliˇcnih trgih. Analiza informira moˇc sektorja, podjetij v sektorju in konkurenˇcnost trga.
2.1.1 Industrija vplivneˇ zev
Na podroˇcju vplivneˇzev analiziramo predvsem podjetje Linktree (glej sli- ko 2.1), saj je na tem podroˇcju dominantno. Podjetje ima veˇc kot poloviˇcni trˇzni deleˇz na podroˇcju povezav na omreˇzju Instagram [68]. Je dobro fi- nancirano podjetje, saj je po javno dostopnih podatkih zbralo veˇc kot 55 milijonov dolarjev naloˇzbenega kapitala [67]. Poslovni model podjetja je aplikacija kot storitev (SaaS). Uporabniki programsko opremo kupijo kot storitev preko meseˇcne naroˇcnine. Podjetje je moˇcno v trˇzenju, kar se odraˇza z uspeˇsnim izkoriˇsˇcanjem trendov druˇzbenih omreˇzij in sodelovanjem nepo- sredno z vplivneˇzi tudi izven aplikacije. Prepoznavnost aplikacije so razˇsirili tudi s podporo druˇzbenih gibanj, kot so protesti Black Lives Matter (temno- polta ˇzivljenja ˇstejejo) s povezavami, ki vsebujejo predloge, kako podpirati Afroameriˇcane. Linktree je moˇznost plaˇcevanja izdelkov preko strani s pove- zavami, dodal veˇc mesecev po konkurenci [89]. Zaostaja tudi pri personaliza- ciji povezav, ta je manj obseˇzna kot pri konkurenˇcnem podjetju Milkshake.
Milkshake uporabnikom ponuja teme strani in njihovo bolj podrobno perso- nalizacijo. Produkt podjetja Linktree se razvija poˇcasneje od konkurence in ji le sledi, saj implementira funkcionalnosti, ki jih konkurenca popularizira.
Podjetje, ˇceprav dobro kapitalizirano ni zelo agresivno, saj na trg puˇsˇca veliko manjˇsih konkurentov, ki se razlikujejo le po dodatnih funkcionalnostih. Pod- jetje ostaja vodilno zaradi zvestobe kupcev in razpoznavne znamke. Prednost podjetja je domena, ki jo konˇcni uporabniki druˇzbenih omreˇzij prepoznajo, kar vpliva na odloˇcitev, ali bodo povezavi sledili. Linktree ne ponuja veliko naprednih funkcionalnosti, ki bi uporabniku oteˇzile prehod na konkurenˇcno storitev, zvestobo ustvari predvsem z nizko ceno in enostavno uporabo.
Slika 2.1: Vstopna stran podjetja Linktree.
Alternativ Linktreeju je veliko, osredotoˇcene so v ˇsirˇsi nabor funkcional- nosti ali v niˇsne kategorije. Bolj znane alternative so: Link.Bio, Link in Bio, ContactInBio in Campsite. Razlikujejo se predvsem v ponudbi doda- tnih funkcionalnosti, kot so obrazci, obseˇzna personalizacija, poudarek na fotografijah, in veˇc prostora za besedilo. Podjetja v sorodnih trgih pogo- sto dodajo obstojeˇcemu produktu tudi produkt za izdelavo veˇc povezav iz ene. Eno takih je podjetje Streamlabs, ki nudi programsko opremo za pre- nos v ˇzivo [79]. Podoben primer je podjetje Later, ki ima s platformo za oglaˇsevanje na Instagramu skoraj 30-odstotni trˇzni deleˇz [69], izdelava strani s povezavami pa je le dodatek.
Analiza nam pokaˇze, da je trg druˇzbenih omreˇzij nasiˇcen z dominantnimi in niˇsnimi podjetji. ˇStevilo moˇznih kupcev je od analiziranih trgov najveˇcje, vendar potroˇsniki priˇcakujejo izdelke, ki jim bodo olajˇsali delo brezplaˇcno
ali po zelo nizki ceni. Trg se zato osredotoˇca na transakcije, ki potekajo na storitvah kot je Linktree, od transakcij pa odvzamejo provizijo.
2.1.2 Glasbena industrija
Trg glasbene industrije je na tem podroˇcju bolj razvit od trga industrije vplivneˇzev. Prodaja je usmerjena primarno v podjetja, ki so za storitve pri- pravljena plaˇcati. Analiziramo smartURL, Linkfire, Feature.fm in ToneDen.
Od naˇstetih je najbolj uveljavljen smartURL, ki ima v glasbeni industriji najveˇcji trˇzni deleˇz [63]. Storitvam krajˇsanja povezav doda funkcionalnosti za glasbenike in zaloˇzbe. Storitev je med redkimi v tem segmentu, ki se ˇsiri tudi v podroˇcja izven glasbene industrije, kot so podcasti in trˇzenje. Upo- rabljajo jih predvsem podjetja, ki ˇzelijo robusten produkt z velikim ˇstevilom naprednih funkcionalnosti. Poslovni model storitve je aplikacija kot storitev, namenjena je podjetjem vseh velikosti, prodaja pa je osredotoˇcena na veˇcja podjetja. Strategija smartURLja je med konkurenti najbolj osredotoˇcena v funkcionalnosti. Kot je pogosto pri starejˇsih podjetjih, usmerjenih v pro- dajo veˇcjim podjetjem, je uporabniˇska izkuˇsnja manj pomembna od ˇstevila funkcionalnosti produkta. Storitev je v lasti marketinˇske agencije Gupta Media [31], kar jim omogoˇca laˇzji prodor v veˇcja podjetja. Zaradi obseˇznih funkcionalnosti, ki jih konkurenca teˇzko posnema, je zvestoba kupcev visoka, predvsem za napredne uporabnike, ki uporabljajo veliko funkcionalnosti in zato tudi predstavljajo velik del prihodka. Podjetje ni med agresivnejˇsimi, saj je produkt med starejˇsimi, podjetje pa del veˇcjega oglaˇsevalskega podjetja.
Drugi po velikosti je Linkfire, ki je moˇcan predvsem med uporabniki, ki si ˇzelijo, bolj personalizirano izkuˇsnjo za glasbenike in zaloˇzbe. Zbrali so veˇc kot 3 milijone dolarjev semenskega kapitala [65]. Poslovni model podjetja je aplikacija kot storitev. Podjetje je dokaj agresivno predvsem na podroˇcju oglaˇsevanja in partnerstev s podjetji v glasbeni industriji. To jim omogoˇca, da prvi uvedejo pametne povezave novim zaloˇzbam. Sposobni so dokaj hitrega razvoja produktov, kot je vkljuˇcitev prodaje nezamenljivih ˇzetonov (ang.
Non-fungible Tokens [57]) med povezavami [66]. Veˇcja podjetja so produktu
zvesta, saj jim pomaga pri distribuciji, analitiki in oglaˇsevanju, zato produkt tesno poveˇzejo v distribucijsko mreˇzo. Prehod na drugo storitev je za taka podjetja zato teˇzak. Glasbeniki, ki storitev uporabljajo sami, so manj zvesti, saj uporabljajo manj funkcionalnosti in jo laˇzje zamenjajo z alternativno storitvijo.
Feature.fm je podoben podjetju Linkfire, vendar je slabˇse financiran, manj agresiven na podroˇcju oglaˇsevanja in razvoja in ima manjˇsi obseg trga [36].
Analiza podjetij nam pokaˇze, da je trg ˇze nasiˇcen s podobnimi podjetji, ki tekmujejo primarno v tem, kako dobre povezave imajo z glasbeno industrijo.
Za novega tekmeca ostanejo le neodvisni in manjˇsi glasbeniki, ki pogosto niso pripravljeni plaˇcati za tako storitev in raje uporabijo ali brezplaˇcno storitev, ki jo ponuja distributer, ali brezplaˇcen paket zgoraj naˇstetih podjetij.
2.1.3 Industrija izdelave podcastov
Podcasterji v primerjavi z glasbeno industrijo redkeje iˇsˇcejo reˇsitve za njihovo podroˇcje, ˇce reˇsitve iˇsˇcejo pa pogosto uporabijo storitve, primarno namenjene drugim trgom. Za svoje namene uporabljajo na primer Linktree. Storitve za to podroˇcje, kljub temu, obstajajo. Delimo jih v dve skupini: celostna oglaˇsevalska storitev in ozka storitev namenjen samo ˇze narejenim poveza- vam.
Storitev prve vrste je Podkite. Osredotoˇca se predvsem na zdruˇzevanje podcast analitike iz razliˇcnih virov. Ponuja tudi izdelavo strani s povezavami, kar vkljuˇcuje analitiko. Podjetje je agresivno predvsem na podroˇcju partner- stev z drugimi podjetji v okolju podcastov. Partnerstva podjetju omogoˇcajo dostop do analitike in samodejno izpolnjevanje podatkov o podcastu. Samo- dejno izpolnjevanje omogoˇca izdelavo strani za deljenje povezav z minimalnim vnaˇsanjem podatkov s strani uporabnika. Podjetje ima zaradi omejenega na- bora naprednih funkcionalnosti manjˇso zvestobo kupcev. Podcasterji lahko zamenjajo ponudnika analitiˇcnih reˇsitev, ali se odloˇcijo, da bodo analitiko spremljali na platformah samih. Zvestoba uporabnikov je veˇcja pri podje- tjih, ki so zadolˇzena za veˇcje ˇstevilo podcastov. V tem primeru je produkt
vkljuˇcen v oglaˇsanje in distribucijo podcastov teh podjetij.
Chartable (glej sliko 2.2) je storitev, ki se osredotoˇca predvsem na pove- zovanje podcasterjev in oglaˇsevalcev. Ponuja oglaˇsevalsko reˇsitev, analitiko podcasta in izdelavo povezav. Podjetje je v segmentu med bolje kapitali- ziranimi, saj je v semenskem financiranju zbralo 2,3 milijona dolarjev [22].
Agresivnost podjetja se kaˇze predvsem v oglaˇsevalskem prostoru in ˇsirjenju.
Slednje se kaˇze v ˇstevilu funkcionalnosti, ki jih podjetje nudi na razliˇcnih po- droˇcjih industrije podcastov. Primer je prodaja APIja, ki ponuja dostop do podatkovne baze podcastov. Podjetje je sposobno razvijati funkcionalnosti, predvsem za podporo veˇcjim podjetjem v industriji. Oglaˇsevanje podjetja je konkurenˇcno, vendar predvsem v kontekstu veˇcjih podjetij. Podjetje ima uspehe z oglaˇsevanjem na velikih medijskih platformah, kot sta Bloomberg in TechCrunch [23].
Slika 2.2: Vstopna stran podjetja Chartable.
V drugo kategorijo manj ambicioznih storitev z majhnim ˇstevilom funk- cionalnosti, vendar enostavnejˇso uporabo, spadata pod.link in podfollow.
Pod.link je tipiˇcen primer te kategorije, ponuja ˇze narejene povezave, ki jih lahko uporabi kdor koli. Produkt je v lasti podjetja Podsights, ki povezuje oglaˇsevalce s podcasterji. Podjetje oglaˇsuje pod.link kot loˇcen produkt, preko katerega uporabniki izvejo za Podsights. V podjetje je bilo vloˇzeno veˇc kot 5 milijonov dolarjev zagonskega kapitala [81]. Podjetje je zelo agresivno na
podroˇcju sklepanja partnerstev in razvoju oglaˇsevalskega produkta. Ker Pod- sights nudi pod.link za promocijo osnovne dejavnosti, produkt le vzdrˇzuje.
Zvestoba uporabnikov pod.linka je majhna, saj produkt ni vkljuˇcen v pod- jetje in ponuja funkcionalnosti, ki so enostavno podvojene.
Podoben storitvi pod.link je Podfollow, ki je namenjen le izdelavi strani s povezavami, vendar je opremljen z veˇc funkcionalnostmi kot pod.link. Pod- jetje je projekt programerja in podcasterja, vse funkcionalnosti so ponujene brez plaˇcila, zato poslovnega modela produkt nima. Podjetje ni financirano, sposobno je poˇcasnega razvoja funkcionalnosti in ima malo trˇznih sposob- nosti. Uporabniki so aplikaciji manj zvesti, saj lahko povezavo naredijo z uporabo druge storitve, analitiko pa izvozijo.
Na slovenskem prostoru podcasterji redko iˇsˇcejo zgoraj navedene reˇsitve, kadar potrebujejo nekaj podobnega, se nekateri obrnejo na spletno stran pod- casti.si. Podcasti.si je spletna stran, ki gosti seznam slovenskih podcastov, njihove epizode in povezave na spletne strani. Produkt nima financiranja in poslovnega modela, ne razvija funkcionalnosti in se ne trˇzi. Usmerjeni so primarno k posluˇsalcem, vendar jih nekateri podcasterji uporabljajo za promocijo.
Iz analize podroˇcja vidimo manj dozorel trg s potencialom, da se pretvori v podoben trg, kot je glasbeni. Dobro kapitalizirana podjetja oskrbujejo veˇcja podjetja, vendar v povezavah ne vidijo prihodka in jih pogosto upora- bljajo kot promocijski dodatek osnovni dejavnosti. Osredotoˇcajo se zato na funkcionalnosti oglaˇsevalskega dela podjetja. Manjˇse podcasterje oskrbujejo enostavne, vnaprej izdelane strani in podjetja iz sosednjih podroˇcij. Na trgu vidimo pomanjkanje personalizacije za manjˇse stranke in potrebo po veˇcjem ˇstevilu funkcionalnosti, namenjenih izdelovanju strani za povezave, primarno za veˇcje stranke. Na slovenskem prostoru reˇsitve, ki bi reˇsevala problem ni, saj so podcasti manj razviti kot v tujini, to pa predstavlja prednost podjetju, ki vstopi prvo.
2.2 Analiza produktov
V podpoglavju predstavimo produkte, ki jih proizvajajo zgoraj opisana pod- jetja. Analiza informira izbiro zahtev in pomembnost posamezne zahteve.
2.2.1 Industrija vplivneˇ zev
Linktree uporabniku dovoli izdelavo ene osebne strani na spletnem naslovu linktr.ee/[ime uporabnika].
Ponuja moˇznost dodajanja povezav na stran ob doloˇceni uri, vkljuˇcitev poˇsil- janja elektronskih sporoˇcil, analitiko in personalizacijo osebne strani. Brez- plaˇcna razliˇcica produkta je namenjena predvsem manjˇsim vplivneˇzem, med- tem ko plaˇcljiva doda veˇc funkcionalnosti za predstavitev svoje znamke in laˇzjo promocijo na druˇzbenih omreˇzjih. Oblikovanje aplikacije je enostavno, moderno, vendar ni usmerjeno v najnovejˇse trende. Osnovne funkcionalno- sti ustvarjanja povezav so brezplaˇcne, podrobna analitika in personalizacija stane$6 na mesec. Ponujajo tudi plaˇcljiv paket, namenjen podjetjem. Link- treejevi konkurenti dodajo prodajo produktov in storitev, veˇc personalizacije, privlaˇcnejˇse oblikovanje in veˇc funkcionalnosti, ki omogoˇcajo veˇcjo interak- tivnost strani.
Linktree uporabnikom nudi enostavno izdelavo osebne spletne strani.
Spletna stran vsebuje seznam povezav, za katere uporabnik ˇzeli, jih njegovi sledilci poznajo. Linktree strani so hitre, poceni in enostavne za uporabno.
V kategoriji so daleˇc najpopularnejˇsi. Pomemben vidik storitve je tudi njena popularnost, saj uporabniki neradi sledijo neznanim povezavam. Ko sledijo povezavi podjetja Linktree vedo, kaj lahko priˇcakujejo. Prepoznavnost do- mene zato predstavlja obrambni jarek (ang. moat [43]) konkurenci.
2.2.2 Glasbena industrija
Produkti glasbene industrije sledijo modelu, kjer kupec uporablja zelo omejen produkt brezplaˇcno, pakete z veˇc funkcionalnostmi pa preizkusi brezplaˇcno
za doloˇceno ˇstevilo dni, obiˇcajno ˇstirinajst. Izmed najpopularnejˇsih je Smar- tURL, ki za osnovne funkcionalnosti ne raˇcuna niˇc, uporabnik pa lahko izbira med obseˇznejˇsima paketoma za $49 in $249 meseˇcno. Linkfire paketa brez plaˇcila ne ponuja, ponuja pa pakete za $10, $25, $50, $100 in $200 meseˇcno ter po dogovoru za velika podjetja (glej sliko 2.3). Feature.fm obdrˇzi brez- plaˇcni paket in raznoliko izbiro plaˇcljivih paketov po cenah: $19, $39, $99 in
$199 meseˇcno, ter po dogovoru. Paketi po dogovoru so namenjeni najveˇcjim podjetjem.
Slika 2.3: Stran za prikaz funkcionalnosti in moˇznosti nakupa podjetja Link- fire.
Podjetja v cenejˇsih paketih ponujajo predvsem funkcionalnosti, ki omo- goˇcajo izdelavo povezav. Te funkcionalnosti so: izdelava povezav na glasbo, samodejna izdelava povezav, podrobna analitika za sledenje posameznikom med aplikacijami, oglaˇsevanje uporabnikom, ki obiˇsˇcejo povezave na razliˇcnih platformah, prikaz vsebine odvisen od lokacije, shranjevanje glasbe preden je ta na voljo na pretoˇcnih storitvah, samodejno preusmerjanje uporabnika in veˇc.
Draˇzji paketi, namenjeni podjetjem, poleg izdelave povezav z dodatnimi funkcionalnostmi ponujajo upravljanje z raˇcuni, moˇznost izbire domen po meri, izdelavo poroˇcil analitike, podrobno analitiko z daljˇso zgodovino in s trˇzenjem povezane funkcionalnosti. Podjetja zaradi osredotoˇcenosti na pro-
dajo velikim podjetjem vlagajo predvsem v varnost in dodajanje funkcional- nosti.
2.2.3 Industrija izdelave podcastov
Podkite uporabnikom ponuja paket brez plaˇcila in pakete z $9 meseˇcno naroˇcnino, $29 meseˇcno naroˇcnino in ceno po dogovoru. Chartable poleg brezplaˇcnega paketa ponuja ˇse naroˇcnino za $20, $100 in po dogovoru za veˇcja podjetja. Storitve, namenjene ˇze narejenim povezavam, uporabniku veˇcinoma ponujajo funkcionalnosti brezplaˇcno. Vsem podcasterjem ustva- rijo stran s povezavami in jim omogoˇcajo, da dokaˇzejo lastniˇstvo podcasta, kar jim poda dostop do analitike in spremembe imena podcasta, ki se pokaˇze v uporabniˇski vrstici. Chartable in Pokite ponujata malo funkcionalnosti, povezanih s stranmi za povezave, produkt zajema zbiranje analitike razliˇcnih virov, podrobno analitiko povezav, vkljuˇcitev platforme YouTube, samodejno ustvarjanje strani s povezavami na epizodo, personalizacijo in upravljanje z uporabniki. S primerjavo podjetij identificiramo primarne funkcionalnosti produkta za deljenje podcasta: naroˇcanje na podcast, povezava na epizodo, ocenjevanje podcasta, spletni naslov po meri, analitika klikov na stran in analitika klikov na podcast.
2.3 Analiza kupcev
V podpoglavjih analiziramo kupce na posameznih trgih. Na vsakem trgu in- tervjuvamo potencialne kupce, izvemo razseˇznost povpraˇsevanja po aplikaciji in zahteve, ki jih intervjuvani priˇcakujejo od nje.
2.3.1 Industrija vplivneˇ zev
Za analizo kupcev storitev na podroˇcju industrije vplivneˇzev intervjuvamo fotografa z veˇc kot 20 tisoˇc sledilci na druˇzbenem omreˇzju Instagram in me- dijsko osebnost s skoraj 100 tisoˇc sledilci, prepoznano s strani tradicionalnih
medijev, vendar s ˇsiroko prisotnostjo na Instagramu, Facebooku in YouTubu.
Fotograf sledilce usmerja na osebno spletno stran, kjer prikazuje svoje foto- grafije. Po meri narejeno spletno stran vidi kot boljˇso alternativo Linktreeju.
Z reˇsitvijo je zadovoljen, saj svoje prisotnosti ne ˇsiri na druge projekte in plat- forme. Medijska osebnost ima veliko projektov in si ˇzeli enostavno reˇsitev, ob predlogu je navduˇsena, vendar za storitev ni pripravljena plaˇcati, predstavlja ciljno obˇcinstvo za podjetje, kot je Linktree.
Intervjuji v tem segmentu nas vodijo do spoznanja, da veˇcina vplivneˇzev ˇzeli lahko in hitro reˇsitev, kot je Linktree. Obstaja tudi manjˇsi del zahtev- nejˇsih uporabnikov, ki si ˇzeli veˇcjega nadzora blagovne znamke in ne ˇzeli predati sledilcev zunanjim platformam. Ti vplivneˇzi obiˇcajno izdelajo sple- tno stran, pogosto z uporabo interaktivnih storitev, kot sta Wix in Square- space. Za aplikacijo, ki je cilj te diplomske naloge, so pripravljeni plaˇcevati le najveˇcji vplivneˇzi, teh pa je v Sloveniji malo.
2.3.2 Glasbena industrija
V glasbeni industriji smo izvedli intervju z direktorjem ene od veˇcjih zaloˇzb v Sloveniji, glavnim tehniˇcnim direktorjem ene od veˇcjih zaloˇzb na Balkanu, enim od najpopularnejˇsih neodvisnih raperskih zvezd v Sloveniji in z manj znanim glasbenikom. Iz obseˇznih intervjujev z glasbeno industrijo izvemo predvsem, da za slovensko glasbeno industrijo pretoˇcne storitve ne predsta- vljajo velikega prihodka, saj posluˇsalci glasbo veˇcinoma posluˇsajo na plat- formi YouTube. Prihodek primarno prihaja iz koncertov in prodaje oblaˇcil.
Obe zaloˇzbi uporabljata storitve, ki jim reˇsujejo problem povezav na glasbo.
Veˇcja zaloˇzba uporablja Linkfire, zanj plaˇcuje veˇc sto evrov letno in je zado- voljna, manjˇsa pa uporablja brezplaˇcno funkcionalnost distributerja glasbe.
Prednost distributerjeve reˇsitve je avtomatizacija, saj omogoˇca ustvarjanje povezav in tesno povezovanje celotnega procesa objave nove glasbe. Slabo- sti reˇsitve so okorna uporabnost, slab izgled aplikacije in slaba uporabniˇska izkuˇsnja ob kliku na povezavo. Glasbene zaloˇzbe imajo reˇsitve implementi- rane, vendar na slovenskem prostoru temu ne posveˇcajo veliko pozornosti in
denarja. Za aplikacijo so pripravljene plaˇcati, vendar zaradi majhne koristi najveˇc pribliˇzno 20emeseˇcno. Podobno kot manjˇsa zaloˇzba uveljavljen glas- benik uporablja storitev distributerja DistroKid, ki ima podobne prednosti in slabosti kot prej omenjena storitev.
Prodor v prostor je sicer moˇzen, vendar zelo teˇzak. Potrebna bi bila reˇsitev, ki zajema distribucijo, povezave, analitiko vseh platform in ogla- ˇsevanje preko razliˇcnih poti. Pomembna je tudi nadgradnja oblikovanja in podoben obseg funkcionalnosti kot konkurenca.
2.3.3 Industrija izdelave podcastov
Med slovenskimi podcasterji smo izvedeli 4 intervjuje. Intervjuvani so bili podcasterji naslednjih podcastov: podcast o kolesarjenju, komiˇcni podcast dveh medijskih osebnosti, promocijski podcast podjetja in poslovni podcast.
Od podcasterjev, s katerimi govorimo, nobeden ne uporablja specifiˇcne sto- ritve za problem. Kot alternativo uporabljajo spletno stran svojega pod- casta, kjer pogosto povezav na podcast platforme ali nimajo, ali do njih uporabnik pride preko veˇc klikov. Veliko jih na druˇzbenih omreˇzjih posre- duje le povezavo na Apple Podcasts, saj je aplikacija najvplivnejˇsa in ocene na Apple Podcasts vplivajo na posluˇsalstvo. Vsi podcasti za distribucijo in pregled analitike uporabljajo platformo Anchor. Intervjuvanim je analitika srednje pomembna. Analitiko spremljajo, vendar jim ne predstavlja velike dodane vrednosti. Problem deljenja povezav jim ne predstavlja prioritete, predvsem manjˇsim podcastom, ki ne oglaˇsujejo pogosto. Na slovenskem prostoru podcasti ne ustvarjajo velikega prihodka, saj oglaˇsevalska podje- tja redko oglaˇsujejo na podcastih. Oglaˇsevalski trg je slabˇse razvit kot na druˇzbenih omreˇzjih. Podcasti lahko sluˇzijo promociji produktov, promociji osebnosti ali pa so konjiˇcek. Od intervjuvanih je en podcaster navduˇsen nad storitvijo, ki bi mu olajˇsa naroˇcanje na podcast na razliˇcnih platformah. Trije podcasterji so odprti na uporabo take storitve.
Slovenski podcast prostor je majhen in ima malo priloˇznosti prihodkov, zato so podcasterji za produkt pripravljeni plaˇcati niˇc ali malo. Veˇcina pod-
casterjev ne razmiˇslja promocijsko in za promocijo ne porabi veliko ˇcasa.
Promocija svoje spletne strani ali samo ene platforme jim ne predstavlja problema. ˇSirjenje storitve na tem trgu potrebuje izobraˇzevanje. Vidimo spodbudne signale iz trga Zdruˇzenih drˇzav Amerike, kjer je trg bolje razvit in so podjetja, ki izdelujejo podcaste vredna veˇc milijonov dolarjev [59].
Naˇ crt izdelave
Na podlagi analize trga smo se odloˇcili, da bomo aplikacijo osredotoˇcili na podroˇcje izdelave podcastov. Podroˇcje vplivneˇzev predstavlja prodajo posa- meznikom, ki v veliki veˇcini za aplikacijo ˇzelijo nekaj, s ˇcimer imajo ˇcim manj dela in nimajo stroˇskov, kar obstojeˇca ponudba dobro zadovoljuje. Glasbena industrija podobne aplikacije ˇze uporablja in ima veliko alternativ. Manjˇsi podcasterji na problem pogosto ne pomislijo, vendar priznajo, da problem obstaja. Trg podcastov je manj konkurenˇcen od ostalih dveh trgov in ima predvsem v Sloveniji priloˇznost ˇsirjenja in viˇsjih prihodkov.
3.1 Doloˇ canje zahtev
Zahteve, ki jih upoˇstevamo pri izdelavi aplikacije, doloˇcimo s pomoˇcjo analize konkurenˇcnih produktov in z intervjuji podcasterjev [28]. Podcasterji sode- lujejo pri izdelavi aplikacije, prispevajo k oblikovnim spremembam aplikacije in predlagajo dodatne funkcionalnosti, ki bi jim koristile. Zahteve razdelimo po metodi MoSCoW [61] naMust have (moramo imeti),Could have (imamo lahko), Should have (bi morali imeti) in Won’t have this time (tokrat ne bomo imeli). Implementiramo zahteve Must inCould have.
Doloˇcimo naslednjeMust have zahteve:
• stran za naroˇcanje na podcast, 19
• prijava in registracija v aplikacijo,
• odjava iz aplikacije,
• sprememba uporabniˇskega gesla,
• vstopna stran,
• analitika podcasta,
• analitika povezav,
• deaktiviranje podcasta,
• varnost podatkov.
Doloˇcimo naslednjeCould have zahteve:
• stran za ocenjevanje podcasta,
• stran za epizode podcasta,
• samodejno dodajanje povezav za naroˇcanje na podcast,
• vgradnja strani v spletno stran podcasta,
• vgradnja pojavnega okna v spletno stran podcasta,
• metapodatki za druˇzbena omreˇzja,
• pomnjenje registriranega uporabnika,
• odzivna zasnova spletne strani,
• enostaven in dobro oblikovan uporabniˇski vmesnik.
Doloˇcimo naslednjeShould have zahteve:
• samodejno dodajanje povezav za epizodo,
• barvna personalizacija povezav,
• predvajalnik epizode,
• preverjanje elektronske poˇste,
• interaktivna podrobna analitika.
Doloˇcimo naslednjeWon’t have this time zahteve:
• izvoz analitike v formatu CSV,
• vkljuˇcitev YouTube videov,
• doloˇcanje poddomene po meri.
3.2 Uporabljene tehnologije
V podpoglavju opiˇsemo tehnologije, ki jih uporabimo za razvoj aplikacije.
Za razvoj aplikacije uporabimo tehnologije, ki olajˇsajo stopnjevalnost (ang.
scalability [32]) aplikacije, njeno varnost in pohitrijo razvoj.
3.2.1 Figma
Figma je spletna aplikacija za izdelavo in urejanje vektorske grafike. Name- njena je izdelavi prototipov in uporabniˇskih vmesnikov. Ponuja tudi spro- tno sodelovanje na dokumentih med veˇc avtorji [84]. Za oblikovanje upo- rabniˇskega vmesnika bi lahko uporabili tudi Sketch, vendar ne omogoˇca dela izven operacijskega sistema macOS. Uporabili bi lahko tudi Adobe XD, ven- dar ta ne ponuja dovolj obseˇznih funkcionalnosti izdelave prototipov.
Figma omogoˇca manipuliranje z vektorskimi elementi, druˇzenje teh v ekrane in izdelavo komponent iz vektorskih skupin [29]. Komponente omo- goˇcajo enostaven prenos komponent iz Figme v React komponente. Pri pre- nosu oblikovanja v programsko kodo nam Figma omogoˇca prikaz primerov ˇze izdelane programske kode. Na izdelanem uporabniˇskem vmesniku nam Figma omogoˇca dodajanje prehodov med zasloni s kliki na gumbe. To iz- delavi prototipov uporabimo med intervjuji s podcasterji, za laˇzjo predstavo funkcionalnosti aplikacije in povratne informacije glede oblikovanja aplika- cije. Figmo uporabimo za oblikovanje ogrodne razliˇcice, videza in prototipa aplikacije. V aplikaciji izdelamo tudi logotip, barvno paleto in promocijski material.
3.2.2 Node.js
Node.js je odprtokodno JavaScript zagonsko okolje, ki deluje na veˇc plat- formah. Uporablja pogon V8, ki prevede JavaScript kodo v optimizirano strojno kodo [3]. Node.js je industrijski standard za izdelavo modernih sple- tnih aplikacij. Nastal je leta 2009 in omogoˇca enostavno uporabo JavaScripta po celotni aplikaciji. Node.js upravlja OpenJS Foundation, ki je povezan z Linux Foundationom preko programa Collaborative Projects.
Next.js uporablja Node.js, kar omogoˇca izvajanje kode na streˇzniku. Upo- rabniku lahko zato streˇznik servira prevedeno HTML datoteko.
3.2.3 Npm
Npm je privzeti upravitelj paketov v okolju Node.js. Od Marca 2020 je podjetje podruˇznica GitHuba, ki je podruˇznica Microsofta [74]. Sestavljen je iz dveh delov, vmesnik z ukazno vrstico za programsko upravljanje s paketi in baze podatkov, kjer se hranijo javni in zasebni paketi.
3.2.4 React
Za ˇcelni del [57] aplikacije uporabimo Javascript knjiˇznico React. React je odprtokodna knjiˇznica, licencirana pod licenco MIT, ki jo vzdrˇzuje Fa- cebook [45]. Namenjena je sestavi uporabniˇskih pogledov in komponent.
Za spreminjanje vmesnika DOM uporablja sintakso JSX. DOM je podat- kovna predstavitev objektov, ki sestavljajo strukturo in vsebino dokumenta na spletu [58]. JSX zdruˇzi pisanje kode HTML in JavaScript v eno datoteko.
React uporablja Virtual DOM za hitrejˇse in enostavnejˇse spreminjanje DOMa [88]. Omogoˇca selektivno posodabljanje DOMa le na tistem delu, kjer je to potrebno, medtem ko programer piˇse kodo, kot da se DOM posodablja cel. React ponuja tudi moˇznost strukturiranja komponent za laˇzje pisanje kode. Omogoˇca deljenje uporabniˇskega vmesnika v funkcionalne ali razredne komponente. React poskrbi le za stanje aplikacije in manipuliranje z elementi DOM. Za navigacijo in dodatne funkcionalnosti je potrebno uporabiti druge
knjiˇznice, kot so React Router, Gatsby ali Next.js. Odloˇcili smo se za uporabo okolja Next.js.
3.2.5 Vercel
Vercel je podjetje, zadolˇzeno za Next.js [30]. Ponuja enostavno gostovanje aplikacij, narejenih v okolju Next.js in v drugih okoljih. Poleg gostovanja spletnih aplikacij ponuja tudi analitiko in povezovanje z drugimi produkti.
Podjetje gosti konˇcno aplikacijo in nam nudi osnovno analitiko.
3.2.6 Next.js
Next.js je odprtokodno okolje za izdelavo ˇcelnega dela aplikacije z uporabo Reacta. Od svojega zaˇcetka ga vzdrˇzuje podjetje Vercel [47]. Omogoˇca izdelavo statiˇcnih strani in izrisovanje na strani streˇznika [12]. To omogoˇca boljˇso optimizacijo spletnih strani za iskalnike in uporabo spletne strani brez JavaScripta.
Next.js podpira veˇc razliˇcnih naˇcinov izrisa spletne strani. Za vsako po- samezno spletno stran lahko izberemo izris na enega od naslednjih naˇcinov:
• Statiˇcno upodabljanje (ang. Static Generation [32]): spletna stran se na strani streˇznika upodobi v obliko HTML, ob gradnji celotne spletne strani. HTML, ki se takrat upodobi, se shrani v predpomnilnik CDNja in se uporabnikom servira do naslednje spremembe, ki jo uveljavimo z gradnjo aplikacije.
• Inkrementalno statiˇcno obnavljanje (ang. Incremental Static Regene- ration): podobno kot statiˇcno upodabljanje servira vnaprej izrisane strani, le da omogoˇca posamezne spremembe strani [92]. Po upoda- bljanju aplikacije streˇznik servira stran iz predpomnilnika do doloˇcene ˇcasovne omejitve, obisk strani po poteku ˇcasovne omejitve sproˇzi po- novno upodabljanje le te strani. Ko se stran ponovno upodobi in shrani v predpomnilnik, streˇznik posodobljeno stran servira novim uporabni- kom do ponovnega obnavljanja. Celoten proces vidimo na sliki 3.1.
• Upodabljanje na strani streˇznika (ang. Server-side Rendering [32]): ob vsakem klicu strani streˇznik znova upodobi stran. Uporablja se pred- vsem, ko stran vsebuje dinamiˇcne podatke, pri katerih je pomembna aˇzurnost.
• Upodabljanje na strani odjemalca (ang. Client-side Rendering [32]):
upodabljanje spletne strani poteka na strani odjemalca. Pogosto se uporablja v povezavi s statiˇcnim upodabljanjem, kjer se uporabniku vnaprej upodobi skelet spletne strani brez spremenljive vsebine. Ob prikazu strani se, pogosto z uporabo funkcije useEffect, na strani odje- malca pridobi podatke in se izriˇsejo.
Slika 3.1: Prikaz upodabljanja na strani odjemalca [92].
3.2.7 React Bootstrap
Za laˇzje oblikovanje uporabimo ogrodje React Bootstrap, ogrodje Bootstrap prilagojeno delu v okolju React. Bootstrap omogoˇca izdelavo spletnih strani, prilagodljivih za veˇc velikosti ekranov [16]. Vnaprej poda oblikovane in od- zivne komponente, kot so gumbi, vnosni obrazci ipd. Omogoˇca tudi sploˇsno in posamezno spreminjanje stila z uporabo jezika CSS [87].
React Bootstrap uporabimo predvsem za laˇzje urejanje elementov na strani. Ogrodje omogoˇca uporabo komponent <Row > in <Col >, ovitih
v <Container >. Ponuja tudi komponento <Table > za oblikovano tabelo.
Poleg urejanja strani React Bootstrap olajˇsa tudi oblikovanje gumbov in vnosnih polij.
3.2.8 Sass
Za laˇzje pisanje oblikovalske kode uporabimo Sass. Sass je programski jezik, ki se prevede v jezik CSS [94]. Sass jeziku CSS doda nove funkcionalno- sti. Omogoˇca uporabo spremenljivk, gnezdenih pravil, funkcij in veˇc. Saas podpira dve razliˇcni sintaksi, SCSS, ki je podobna sintaksi CSSa in Sass, ki za deljenje ukazov uporablja zamike in nove vrstice namesto podpiˇcij in zavitih oklepajev. Aplikacija, ki jo izdelamo uporablja popularnejˇso in bolj univerzalno sintakso, SCSS.
3.2.9 Formik
Za oblikovanje obrazcev uporabljamo Bootstrap React, za njihovo logiko pa Formik. Formik je odprtokodna knjiˇznica za izdelavo obrazcev v okolju Re- act [77]. Pri izdelavi obrazcev nam pomaga z urejanjem stanja obrazca, validiranjem, obveˇsˇcanjem o napakah in ravnanju z oddajo obrazca. Po- nuja komponente<Formik>, <Form>,<Field />in<ErrorMessage />, ki vkljuˇcujejo funkcije, na primer onChange, handleChange, onBlur in veˇc.
Kot nadomestilo bi lahko uporabili Redux-Form, vendar pri veˇcjih apli- kacijah pride do zakasnitev in zaseda veˇc prostora.
3.2.10 Firebase
Firebase je platforma za izdelavo spletnih in mobilnih aplikacij, ki jo je Goo- gle pridobil leta 2014. Ponuja popolnoma upravljano zaledno infrastrukturo, reˇsitve za testiranje, objavljanje funkcionalnosti, spremljanje delovanja apli- kacije, analitiko, A/B testiranje in veˇc [39]. Firebase reˇsitve ponuja brez
plaˇcila za manjˇse aplikacije, ko preseˇzejo brezplaˇcno koliˇcino, se obraˇcunajo po modelu plaˇcaj sproti (ang. pay-as-you-go) [38]. Uporaba platforme Fire- base omogoˇca hitro in enostavno izdelavo manjˇsih aplikacij, ki se lahko ˇsirijo samodejno, ˇce je to potrebno.
Pri izdelavi aplikacije uporabljamo storitvi Cloud Firestore in Firebase Authentication. Cloud Firestore nudi NoSQL podatkovno bazo, ki jo upo- rabljamo za izdelavo brezstreˇzniˇskih (ang. serverless [35]) aplikacij [33]. Po- datkovna baza temelji na principu kolekcij in dokumentov. Kolekcije lahko vsebujejo samo dokumente, dokumenti pa vsebujejo podatke ali kolekcije.
Omogoˇca nam enostavno klicanje podatkovne baze preko ˇcelnega ali zale- dnega dela aplikacije. Uporabimo jo, ker poskrbi za razˇsirljivost, varnost streˇznikov, hitrost dostopa in indeksiranje. Nudi tudi enostavno nastavljanje varnostnih pravil za dostop do podatkov.
Za avtentikacijo uporabnikov uporabimo Firebase Authentication. Omo- goˇca hitro implementacijo ravnanja z uporabniˇskimi podatki. Vkljuˇceno je varovanje podatkov in razˇsiritev prijave z razliˇcnimi metodami prijave. Upo- rabnika lahko prijavimo z elektronskim naslovom in geslom, le z elektron- skim naslovom, z uporabniˇskim raˇcunom druˇzbenih omreˇzij in veˇc. Firebase Authentication in Cloud Firestore sta tesno povezana, saj dokumenti v po- datkovni bazi hranijo uporabniˇske podatke, ki jih varujemo.
Na ˇcelnem delu za avtentikacijo uporabimo knjiˇznico FirebaseUI, nare- jeno nad Firebase Authentication SDK-jem za implementacijo pretoka upo- rabniˇskega vmesnika. Funkcionalnosti, ki jih knjiˇznica prinaˇsa, so enostavno vkljuˇcevanje veˇc ponudnikov prijave, vodenje raˇcuna, povezovanje raˇcunov, nadgradnja anonimnih uporabnikov, teme po meri in funkcionalnost Smart Lock za hrambo gesla v raˇcunu Google.
3.2.11 Next-firebase-auth
Next-firebase-auth je paket, ki olajˇsa delo z avtentikacijskimi ˇzetoni, ko se uporabnik v aplikacijo prijavi preko FirebaseUIja. Paket je narejen za Next.js in podpira vse naˇcine izrisa strani, nastavljanje avtentikacijskih piˇskotkov in
zaklepanje delov aplikacije samo za overjene uporabnike [46]. Paket prav tako ovije klice podatkovne baze Cloud Firestore z uporabniˇskim raˇcunom.
Paket uporabimo predvsem zaradi piˇskotkov HTTPS, ki omogoˇcajo, da se uporabniku ni treba prijaviti vsakiˇc, ko pride na spletno stran.
3.3 Arhitektura aplikacije
Aplikacijo oblikujemo na podlagi brezstreˇzniˇske arhitekture. Glavne kompo- nente so Firebase Authentication, Cloud Firestore, ˇcelni del napisan v okolju Next.js in zaledni del funkcij Next.js. Povezave med storitvami si olajˇsamo s knjiˇznicami, kot je next-firebase-auth.
Celni del aplikacije servira Vercel. Aplikacija je sestavljena iz statiˇˇ cne vsebine, ki je statiˇcno upodobljena, strani podcastov, ki se upodobi na strani streˇznika in administracijskega dela, ki se upodobi na strani odjemalca. Na sliki 3.2 vidimo, kako so razliˇcni deli povezani med seboj. ˇCelni del preko klicev API kliˇce funkcije Next.js, te pa z uporabo Admin SDKja komunicirajo s podatkovno bazo. Firebase Authentication preko knjiˇznice next-firebase- auth komunicira s ˇcelnim delom, tako skrbimo, da je uporabnik overjen in do funkcije lahko dostopa.
Za ˇzeleno aplikacijo je shema podatkovne baze razmeroma enostavna, saj hranimo podatke le o uporabnikih, njihovih podcastih in analitiki 3.3.
Te podatke prikaˇzemo s tremi kolekcijami. V kolekcijo users shranjujemo podatke o uporabnikih. Dokument uporabnika vsebuje tabelo objektov, kjer vsak objekt predstavlja en podcast. Vsak podcast ima ime, ki uporabniˇski dokument poveˇze z dokumentom podcasta. Podcast ima lahko tudi stran, namenjeno ocenjevanju tega podcasta in veˇc strani za epizode podcasta.
Podatki o podcastu, strani ocenjevanja in strani epizode so hranjeni v kolekcijipages. Vsak dokument ima avtorja, simbolizira ga uporabniˇski iden- tifikator UID, ki je enak imenu dokumenta uporabnika in identifikaciji v sis- temu Firebase Authentication. UID se uporablja predvsem za preverjanje, ali uporabnik sme dostopati do podatkov o strani. Stran uporabnik deakti-
Slika 3.2: ˇSirok pogled arhitekture aplikacije.
vira in je ne izbriˇse, zato ima dokument spremenljivko deleted, ki pove, ali je stran aktivna. Dokument hrani tudi ime dokumenta, naslov in opis strani, naslov slike in tip strani. Slednji lahko zavzema vrednosti: podcast, ocena ali epizoda. Za vsako pocast platformo, na katero uporabnik lahko ustvari povezavo, se v tabeli links nahaja objekt. Objekt vsebuje podatek, ˇce je povezava vidna, ime platforme, naslov slike, vrstni red v seznamu povezav, naslov platforme in enotni naslov platforme.
Ko konˇcni uporabnik naloˇzi stran katerega od treh tipov se v kolekcijiana- lytics ustvari dokument, z imenom strani, ki jo je uporabnik naloˇzil, ˇcasom, ko se je to zgodilo in tipom dokumenta, ki pove akcijo, ki jo je uporabnik izvedel. ˇCe uporabnik klikne na povezavo podcast platforme, se ustvari nov dokument z dodatnim atributom link, kjer se hrani, na katero platformo je ˇsel. Atribut type pri tej akciji odraˇza, da gre za klik na stran ali na povezavo platforme.
Slika 3.3: Shema podatkovne baze.
3.4 Oblikovanje
Uporabniˇski vmesnik v programskem okolju Figma je oblikovan na podlagi predvidenih zahtev. Oblikovanje se zaˇcne z izdelavo skeleta na podlagi zah- tev, ki jih bo aplikacija podpirala. Opredelimo tipografijo aplikacije, njen logotip in barvno paleto. Zaslonske maske spletne aplikacije vkljuˇcijo ske- let, tipografijo, barvne palete in logotip. Omogoˇcajo nam hitrejˇse iteriranje oblikovanja. Prva verzija aplikacije temelji na zaslonskih maskah. Itera- tivni postopek razvoja aplikacije povzroˇci, da se besediˇsˇce in deli aplikacije v doloˇcenih primerih razlikujejo od zaslonskih mask [91].
3.4.1 Skelet zaslonov
Primarna funkcija izdelovanja skeleta (ang. wireframe [57]) je postavitev elementov, zaslonov in povezav med zasloni. Uporabnik do strani avten- tikacije pride preko dinamiˇcne glave strani [57] (glej sliko 3.4) na vstopni
strani. Dinamiˇcna glava strani se nahaja tudi na administrativnih zaslonih.
Uporabniku glava strani omogoˇca enostavno navigacijo med zasloni. Glava strani vedno vsebuje logotip spletne aplikacije, ki je namenjen poudarjanju znamke in navigaciji na vstopno stran. Poleg logotipa neprijavljenemu upo- rabniku ponuja avtentikacijo, prijavljenemu pa odjavo iz aplikacije in dostop do administracijskega dela aplikacije.
Overjanje uporabnika, prikazano na sliki 3.5, poteka z uporabniˇskim ime- nom in geslom. Skelet prijave in registracije uporabnika poleg vnosnih polij, vsebuje tudi glavo strani in nogo. V zaˇcetnih iteracijah od uporabnika pri registraciji zahtevamo tudi ime podcasta. To vnosno polje odstranimo za- radi raziskave trga, ki pokaˇze, da so vodje podcastov pogosto zadolˇzene za veˇc podcastov. Zahtevo reˇsimo z zaslonom dodajanja, deaktivacije in izbire podcastov. Zaslon je vstopni portal v administracijski del spletne aplikacije, na katerega overjen uporabnik pride preko vstopne strani.
Slika 3.4: Skelet dinamiˇcne glave strani.
Ko na strani uporabnik naredi nov podcast, je preusmerjen na zaslon administracije podcasta. Ta zaslon se prikaˇze le ob prvi izdelavi podcasta in je namenjen enostavnejˇsi in bolj vodeni uporabi aplikacije. Na zaslonu uporabnik doda povezavo na platformo Anchor, ˇce jo ima. Uporabnik je preusmerjen na administracijsko stran podcasta, ko vpiˇse naslov podcasta in neobvezno tudi opis. Potek je prikazan na sliki 3.6. Administracijska stran podcasta omogoˇca dokonˇcno izdelavo podcasta in povezavo na dodatne funkcije, ki so ponujene v okviru podcasta.
Slika 3.5: Skelet javnega dela aplikacije.
Slika 3.6: Skelet poteka administracije strani podcasta.
Na straneh epizod in ocenjevanja lahko uporabnik dostopa le do pregleda analitike in vgraditve strani v svojo spletno stran (glej sliko 3.7). Uporabnik lahko stran podcasta vgradi v svojo spletno stran na dva naˇcina: vkljuˇceno v spletno stran in kot pojavno okno. Za pomoˇc pri vgradnji na strani obstajata sta dve tekstovni polji, namenjeni kopiranju programske kode.
Stran analitike prikazuje agregirane uporabniˇske klike na stran in na po- vezavo na podcast platforme. Razlika teh dveh metrik nam poda stopnjo od- zivnosti (CTR). Metrika uporabniku na enostaven naˇcin prikaˇze uˇcinkovitost uporabe aplikacije.
Vsi administrativni zasloni vsebujejo nogo strani, saj ta uporabniku olajˇsa
Slika 3.7: Skelet dodatnih funkcionalnosti podcasta.
pregled strani na dnu. Na straneh z daljˇsimi seznami uporabnik teˇzko bere vsebino na koncu, zato z nogo omogoˇcamo pomikanje zaslona niˇzje od zadnje vsebine. Noga strani prav tako poudarja logotip in omogoˇca komunikacijo z uporabniki.
3.4.2 Tipografija
Uporabljeni sta dve druˇzini pisav, prikazani na sliki 3.8. Logotip uporablja druˇzino pisav z imenom Montserrat, licencirana je z odprtokodno licenco Open Font Licence. Tipografija aplikacije ima le eno druˇzino pisav, vendar nam omogoˇca veliko ˇstevilo moˇznih debelin pisave. Aplikacija je izdelana z druˇzino pisav Work Sans, ki jo Wei Huang ponuja z odprtokodno licenco Open Font Licence. Work Sans je druˇzina pisav, ki omogoˇca spremenljivo doloˇcanje debeline pisave. Pisava je namreˇc narejena kot spremenljiva pisava, kar omogoˇca spremembo debeline pisave s spreminjanjem spremenljivke med 100 in 900. Spremenljive pisave so uˇcinkovite, saj lahko brskalnik prenese eno datoteko za vse debeline pisav, to omogoˇca veˇcjo prilagodljivost brez poˇcasnejˇsega nalaganja strani.
Slika 3.8: Tipografija logotipa in aplikacije.
3.4.3 Logotip
Znamka aplikacije, ki smo jo poimenovali The Fast Link, sestoji iz logotipa aplikacije ter zaznamke logotipa, prikazana sta na sliki 3.9. Logotip strani je oblikovan kot pisava Montserrat z debelino semiBold, ˇcrki T in H sta povezani z uporabo redkih ligatur. Zaznamka logotipa vsebuje zaˇcetnice imena v enaki druˇzini pisav kot logotip. Pisava zaˇcetnic je leˇzeˇca, ˇcrke pa so bliˇzje skupaj, da se poveˇzejo. ˇCrkaF ima, za boljˇso razpoznavnost, spodnjo ˇcrto v manjˇsi velikosti. Leˇzeˇca pisava simbolizira hitrost in omogoˇca prikaz veˇcje pisave na omejenem prostoru. Ozadje sovpada z ozadjem aplikacije.
Robovi so zaobljeni.
Slika 3.9: Logotip aplikacije in zaznamka logotipa.
3.4.4 Barvna paleta
Barvna paleta sestoji iz barv aplikacije, barve tipografije in gradienta (glej sliko 3.10). Primarna barva aplikacije je svetlo modra. Na podlagi primarne barve so doloˇcene ˇstiri analogne barve, ki se uporabljajo v redkih primerih za poudarek elementov. Skupaj tvorijo barve aplikacije. Aplikacija ima temno temo, zato je ozadje temno sive, tipografija pa bele barve. Veˇcji pomembni elementi uporabijo gradient, ki linearno prelije primarno barvo v najtemnejˇso analogno barvo.
Slika 3.10: Barvna paleta.
3.4.5 Zaslonske slike
Zaslonske slike vkljuˇcujejo elemente prej doloˇcenega skeleta, barvne palete in tipografije. Predpostavimo, da bodo uporabniki uporabljali aplikacijo pri- marno na mobilnih telefonih, zato so zaslonske slike v formatu mobilnega telefona in po potrebi poveˇcane na velikost namiznega raˇcunalnika. Obliko- vanje javne strani za naroˇcanje na podcaste narekuje videz ostalih zaslonov.
Oblikovanje poteka iterativno (glej sliko 3.11), zaˇcetne iteracije vzamejo nav- dih iz podobnih produktov na trgu in jih prilagodijo tipografiji in logotipu.
Kasnejˇse iteracije in tudi konˇcna verzija temeljijo na velikem slikovnem ma- terialu s poudarkom na imenu podcasta in logotipu platforme za naroˇcanje.
Oblikovanje izhaja iz potrebe po hitri razpoznavnosti platforme in enotni zasnovi aplikacije na razliˇcnih velikostih naprav. Slika podcasta zato ni v ozadju in ni poudarjena. Slika je namenjena le potrditvi znamke podcasta in ne sme prevzeti uporabniˇske pozornosti.
Slika 3.11: Iteracije zaslonske maske strani podcasta.
Vstopna stran (glej sliko 3.12) za navigacijo uporablja dinamiˇcno glavo strani, kjer se neregistrirani uporabniki lahko registrirajo, registrirani pa do- stopajo do administracijskih funkcionalnosti. Stran ohranja temo velikih naslovov in uporabi kratke promocijske videe, da predstavi aplikacijo. Kot dekoracijski element v ozadju vsebuje enostaven lik, ki se poˇcasi premika.
Zaslonski maski prijave in registracije na sliki 3.13 osredotoˇcita uporab- nika na avtentikacijo z uporabo majhnega ˇstevila oblikovalskih elementov, v ta namen dinamiˇcna glava strani poleg poti na ˇcelno stran ne ponuja doda- tnih funkcionalnosti.
Administracija podcasta vsebuje dinamiˇcno glavo strani, dostop do ure- janja podcasta, do dodatnih funkcionalnosti podcasta in nogo strani. Ureja- nje povezav podcasta zaradi preglednosti dodajanja povezav in uporabniˇske izkuˇsnje aktiviranja povezav spremeni vrstni red elementov na veˇcjih zaslo- nih (glej sliko 3.14). Na mobilnih telefonih, zaradi dolˇzine povezav, vnosno polje zapolni celotno ˇsirino zaslona. Na veˇcjih zaslonih se aktivacija nahaja na koncu, saj prikaˇze uporabniku hierarhijo naslova pocast platforme, vno- snega polja in aktivacije vnesenih podatkov. Vnosna polja so opremljena s svetlo sivim robom, zaradi katerega tipografija bolj izstopa in senco, ki jim
Slika 3.12: Oblikovanje vstopne strani v formatu za telefone in raˇcunalnike.
poda globimo. Senca se ob izbiri vnosnega polja zmanjˇsa. Uporabnik na tej strani dostopa do ostalih funkcionalnosti podcasta. Dostopa lahko do analitike, vgrajevanja podcasta, strani za ocenjevanje podcasta in strani epi- zode. Zaslonska maska urejanja podcasta predstavlja tudi zaslonsko masko urejanja strani za ocenjevanje in strani epizode podcasta. Strani od dodatnih funkcionalnosti obdrˇzita le analitiko in vgradnjo v spletno stran.
Preostale zaslonske maske administracijskega dela so prikazane na sli- ki 3.15. Oblikovanje sledi smernicam avtentikacije in administracije podca- sta. Tipografija, vnosni elementi in ukazni gumbi obdrˇzijo oblikovanje med zasloni z manjˇsimi spremembami. Analitika na primer obdrˇzi velike naslove, ˇstevilo klikov pa predstavi v krogih.
3.4.6 Promocijski material
Promocijski material uporabimo pri intervjujih s potencialnimi kupci, da si aplikacijo laˇzje predstavljajo. Za prikaz uporabimo javno usmerjeno stran, ta je kasneje osnova zaslonske maske javne strani podcasta. Izdelamo razliˇcne
Slika 3.13: Zaslonski maski registracije in prijave.
zaslonske maske za vsak trg (glej sliko 3.16). Zaslonska maska je ovita v po- enostavljeno vektorsko obliko mobilnega telefona. Intervjuvanim ta omogoˇca laˇzje predstavljanje konteksta, v katerem bodo konˇcni uporabniki uporabljali aplikacijo. Dodatno nad telefonom enobesedno opiˇsemo za kaj lahko inter- vjuvani uporablja storitev.
Ker podcasterji v primerjavi z vplivneˇzi in glasbeniki uporabljajo veˇc ti- pov povezav, jim te tipe prikaˇzemo s promocijskim plakatom (glej sliko 3.17).
Plakat prikaˇze promocijski lijak. Prikazuje, kako konˇcnega uporabnika apli- kacija spremlja od posluˇsanja, do naroˇcanja in ocenjevanja podcasta. Plakat predstavi razliˇcne funkcionalnosti, njihov tok in s poudarjenim napisom opiˇse namen funkcionalnosti.
Promocijski material v ozadju vsebuje gradientno ozadje s prelivajoˇcimi barvami ter zamegljenimi liki. Robovi so zaobljeni z lokom, ki se ujema z vektorsko sliko mobilnega telefona.
Slika 3.14: Zaslonska maska administracije podcasta v formatu za mobilne naprave in raˇcunalnike.
Slika 3.15: Zaslonske maske za seznam podcastov, dodajanje novega podca- sta, vkljuˇcitev v spletno stran in analitiko.
Slika 3.16: Promocijske slike za tri razliˇcne trge.
Slika 3.17: Promocijski plakat lijaka promocije podcastov.
Predstavitev delovanja aplikacije
Z razliˇcicami aplikacije upravlja platforma GitHub. Razvoj poteka na dveh vejah, produkcijski in razvojni. Ko je funkcionalnost na razvojni veji razvita se zdruˇzi v produkcijsko vejo. Vercel nato aplikacijo zgradi in gostuje.
Celotna administracijska stran aplikacije uporablja upodabljanje na strani odjemalca, saj je pomembna aˇzurnost podatkov, ne pa hitrost nalaganja in visoka razvrstitev na iskalnikih. Ob prihodu na spletno stran se uporabniku prikaˇze animacija nalaganja. Animacijo nadomestijo elementi strani, ko z vgrajeno funkcijo useEffect stran pridobi ustrezne podatke iz podatkovne baze.
4.1 Izdelava in urejanje strani
Uporabniku aplikacija ponuja izdelavo treh tipov strani, stran za podcast, stran za epizodo podcasta in stran za ocenjevanje podcasta. Uporabnik ustvari nov podcast preko zaslona s seznamom podcastov, epizodo in oceno pa preko ˇze izbranega podcasta.
Na strani so vsa vnosna polja povezana v obrazec Formik, ki mu po- damo vse podatke o strani iz podatkovne baze. Vnosna polja so povezana
41
na podatke o strani, kar omogoˇca, da se z oddajo sprememb celotno stanje obrazca shrani v podatkovno bazo. Za shranjevanje podatkov o izbranem podcastu poskrbi React Context. Omogoˇca enostavno deljenje stanja podca- sta med komponentami znotraj konteksta. React Context uporabimo, ker na eni strani prikazujemo izdelovanje novega podcasta in urejanje obstojeˇcega.
Pomoˇzna datoteka PageContext omogoˇca enostavno uporabo funkcij React Context iz ene datoteke. Komponente, ki so ovite s Page Contextom, iz da- toteke lahko dostopajo do podatkov. Iz ovitih komponent preko datoteke s pomoˇcjo vgrajene funkcije useContext dostopamo tudi do stanja podcasta.
Datoteka PageContext se nahaja v prilogi A.1.
Uporabnik na strani podcastov lahko izbere podcast ali pa ga izdela.
Izdelava novega podcasta uporabniku dovoli vpis imena, ta se obdela v ime, primerno za naslovno vrstico. Ime, ki ga vpiˇse, se najprej oˇcisti znakov, ki jih naslovna vrstica ne dovoli, nato se vsi znaki minus spremenijo v presledke.
Dobljeni niz se po presledkih razdeli v polje (ang. array [57]). Polje vsebuje posamezne besede. Zaˇcetne ˇcrke besed se spremenijo v velike, ˇce to ˇse niso.
Spremenjeno polje se brez presledkov zdruˇzi v niz, v katerem ni presledkov in prepovedanih znakov. Niz ima besede loˇcene z uporabo velikih zaˇcetnic.
Urejeno ime podcasta se preko klica API poˇslje brezstreˇzniˇski funkciji, ta na podlagi predloge praznega podcasta izdela podcast v podatkovni bazi Cloud Firestore. ˇCe podcast s tem imenom ˇze obstaja, se uporabnika obvesti o napaki, ˇce pa je podcast uspeˇsno narejen, je uporabnik preusmerjen na stran urejanja novega podcasta.
Veliko manjˇsih podcastov uporablja platformo Anchor za gostovanje in di- stribucijo, zato lahko aplikacija prenese podatke iz podcastove Anchor strani.
To je omogoˇceno na strani urejanja novega podcasta. ˇCe podcast ne vsebuje naslova, predpostavimo, da je ustvarjen na novo. Zaˇcetni urejevalnik upo- rabniku da moˇznost vnosa povezave na platformo Anchor, preko povezave Anchor se pridobijo povezave podcast platform in njegova slika. Stran poleg vnosa Anchor povezave prikaˇze tudi urejevalnik naslova in opisa. Ko uporab- nik vpiˇse naslov strani in neobvezno opis, se spremembe uveljavijo s klicem
API na brezstreˇzniˇsko funkcijo, ta jih uveljavi v podatkovni bazi.
Posodobljeni podatki se shranijo v React Context, kar sproˇzi menjavo komponente za urejanje novega podcasta v komponento administracije pod- casta. Uporabnik lahko nato izpolni manjkajoˇce povezave na podcast plat- forme in dostopa do ostalih funkcionalnosti podcasta. Stran urejanja podca- sta je prikazana na sliki 4.1
Slika 4.1: Stran administracije podcasta.
Ko uporabnik izdela nov podcast lahko doda povezavo na distribucij- sko platformo Anchor. Z uporabo povezave se pridobi koda HTML An- chor spletne strani podcasta. Stran se z uporabo knjiˇznice Cheerio preiˇsˇce.
Knjiˇznica omogoˇca iskanje po kodi HTML z uporabo ukazov jQuery. Z upo- rabo knjiˇznice najdemo povezave na podcast platforme in sliko podcasta.
Informacije, ki jih funkcija najde, se shranijo v podatkovno bazo. Program- ska koda iskanja slike iz strani Anchor se nahaja v prilogi A.2.
Podcast ima lahko niˇc ali eno stran za ocenjevanje podcasta. Na strani za urejanje podcasta lahko uporabnik izbere ocenjevanje. ˇCe strani za ocenje- vanje ˇse nima, se ta naredi, nato se uporabnika preusmeri na urejanje strani ocenjevanja. Stran za ocenjevanje podcasta je poimenovana z imenom
[ime podcasta]-review.
Novo ustvarjena stran se doda kot nov dokument v kolekcijo pages in v uporabniˇske podatke. Poleg urejanja strani ocenjevanja podcasta uporabnik lahko dostopa do analitike in navodil za vkljuˇcitev strani v svojo spletno stran.
Preko strani podcasta uporabnik pride do strani epizod. Na strani lahko epizode podcasta selektivno ureja in jih dodaja. Uporabnik izdela novo epi- zodo z vpisom ˇstevilke epizode, ˇce vpisano ni ˇstevilka, se akcija zavrne, upo- rabniku pa prikaˇze obvestilo. Ime strani se doloˇci po pravilu
[ime podcasta]-ep-[ˇstevilka podcasta].
Ker med ustvarjanjem novih podcastov ne dovolimo znaka minus, smo lahko prepriˇcani, da ime ˇse ni zasedeno.
4.2 Podatkovna baza
Podatki o avtentikaciji uporabnikov so hranjeni v Firebase Authentication, ostali podatki pa v Cloud Firestore. S podatkovno bazo aplikacija komunicira preko brezstreˇzniˇskih funkcij, odjemalec podatke pridobi preko klicev API na funkcije. Funkcije komunicirajo s Cloud Firestore preko Firebase Admin SDK-ja, zato za varnost skrbimo na ravni funkcije.
Javna stran podcasta uporablja Next.jsove dinamiˇcne poti. Uporabnik obiˇsˇce dinamiˇcno pot
/[ime podcasta].
Stran uporablja upodabljanje na strani streˇznika, zato se ob obisku strani na streˇzniku izvede poizvedba podatkovne baze za ime podcasta. ˇCe stran obstaja, se uporabniku prikaˇze, drugaˇce se uporabnika preusmeri na vstopno stran.
Firebase Authentication in FirebaseUI upravljata z varnostjo avtentika- cije. Dostop do uporabniˇskih podatkov varuje next-firebase-auth. Cloud Firestore ponuja jezik, s katerim opredelimo pravila dostopa do strani. Pra- vila overjenemu uporabniku dostop do dokumenta dovolijo le, ˇce je lastnik
dokumenta. Pravilo dostopa do uporabniˇskega dokumenta se nahaja v pri- logi A.3.
Poleg dostopa preko overjenega uporabnika, Cloud Firestore ponuja tudi administratorski dostop preko Firebase Admin SDKja. Administratorski dostop je namenjen klicem iz streˇznika in se varnostnim pravilom izogne.
Preko administratorskega dostopa brezstreˇzniˇske funkcije komunicirajo s po- datkovno bazo, zato funkcije pred vsakim dostopom preverijo, ali je klicani uporabnik overjen. Funkcije preverijo, ali je uporabnik overjen in ali je la- stnik dokumenta, do katerega funkcije dostopajo. Varnost preverimo pred izvajanjem in po potrebi tudi, ko iz podatkovne baze pridobimo podatke. V prilogi A.4 se nahaja primer preverbe klica brezstreˇzniˇske funkcije, ki dostopa do uporabniˇskega dokumenta podanega v glavi z imenom uid.
4.3 Avtentikacija
Ker je avtentikacija uporabnika varnostno obˇcutljiva, implementiramo ˇze ob- stojeˇce reˇsitve, prilagajamo jih primarno v oblikovalskem delu. Administra- torski del aplikacije zavarujemo z next-firebase-auth in preusmerimo neprija- vljene uporabnike na stran registracije.
Uporabnik se prijavi preko knjiˇznice FirebaseUI. Knjiˇznica omogoˇca pri- javo in registracijo z uporabo enega obrazca, kjer uporabnik poda naslov elektronske poˇste, ˇcelni del pa se prilagodi uporabniku. Ob registraciji se no- vemu uporabniku v bazi podatkov izdela dokument, nato se ga preusmeri na vstopno stran. Overjenega uporabnika next-firebase-auth zapiˇse v piˇskotke.
Uporabniˇsko ponastavljanje gesla implementira Firebase Authentication, ki nudi storitev za poˇsiljanje elektronske poˇste. Uporabniku, ko vnese elek- tronski naslov, ˇcelni del aplikacije nudi moˇznost ponastavitve gesla in ob kliku poˇslje predlogo uporabniku. Uporabniku poˇslje predlogo, vidno na sliki 4.2.
