En jämförelse mellan klassisk webbprogrammering och no code

En jämförelse mellan klassisk webbprogrammering och no code

Fallstudie med företaget Lyxrummet

Shawbo Sharifzadeh

MittUniversitetet Avdelning för informationssystem och -teknologi (IST) Huvudområde: Datateknik, 180hp Författare: Shawbo Sharifzadeh, [email protected] Termin/År: VT 2021 Handledare: Magnus Eriksson, [email protected] Examinator: Patrik Österberg, [email protected]

2

Abstract The purpose of this project has been to create a comparison between the two different web development methods, no code and classical web development. The comparing has been done through a case study with the company Lyxrummet where two web shops have been created with these two methods. The no code platform that has been used is WordPress who is a leading platform for web development, and for the classical web development the language PHP, HTML, and CSS has been used. To be able to reach a result by the comprising between the web shops user testing have been done of 8 participates and measurement of the development time and code lines. The finishing result showed that the classical web developed web shop was the most liked by the user testing, but the no code web shop was a faster and cheaper alternative for web development because no technical knowledge person is needed. Keywords: No code, PHP, web programing, HTML, CSS.

3

Sammanfattning Syftet med detta projekt har varit att skapa en jämförelse mellan två olika webbutvecklingsmetoder, no code och klassisk webbprogrammering, jämförelsen har skapats via en fallstudie hos företaget Lyxrummet där två webbutiker har skapats med dessa två olika metoder. No code-plattformen som använts har varit Wordpress och den klassiska webbprogrammerings metoden som använts har varit med språken PHP, HTML och CSS. För att kunna få fram resultatet av jämförelsen mellan webbutikerna så har användartester med 8 deltagare utförts samt mätningar på utvecklingstiden och kodrader. Slut resultatet visade att klassisk webbprogrammering var en mer lockande sida för deltagarna från användartestet men no code webbutiken var en snabbare och billigare variant för utveckling då ingen teknisk kunskap krävs. Nyckelord: No code, PHP, webbprogrammering, HTML, CSS.

4

Terminologi

PHP Hypertext Preprocessor

HTML HyperText Markup Language

CSS Cascading Style Sheets

Lo-fi Low fidelity

Hi-fi High fidelity

MoSCoW Must have, should have, could have, won’t have

Front-end Gränssnittet för en webbplats som användaren integrerar med

Back-end Den del som arbetar i bakgrunden inom applikationer, skapar funktionaliteter som inte syns i gränssnittet som användaren integrerar med

GDPR General Data Protection Regulation

5

Innehållsförteckning Abstract 2Sammanfattning 3Terminologi 41 Introduktion 8

1.1 Jämförelse klassisk webbprogrammering mot no code 81.2 Bakgrund och problemmotivering 81.3 Översiktligt syfte 91.4 Konkreta och verifierbara mål 91.5 Avgränsning 91.6 Översikt 91.7 Bidrag 10

2 Teori 112.1 Agil utveckling med scrum 11

2.1.1 MoSCoW 122.1.2 Gantt-schema 122.1.3 Gantt-schema 132.1.4 Brainstorming 132.1.5 Low fidelity-prototyp 132.1.6 High fidelity-prototyp 132.1.7 Moqups 13

2.2 Webbutvecklingens historia 142.2.1 Responsiv webbdesign 142.2.2 Webb 2.0 14

2.3 För och nackdelar med klassisk webbprogrammering och no code 152.3.1 Low code och no code 162.3.2 Wordpress 172.3.3 WooCommerce 172.3.4 Klassisk webbprogrammering 182.3.5 MySQL 182.3.6 XAMPP 192.3.7 Brackets 202.3.8 Flatuicolors 20

2.4 Användartester 21

6

3 Metod 223.1 Arbetsmetod 223.2 Tidsschema 23

3.2.1 Stora mål 233.2.2 Kundmöten 23

3.3 Fastställda krav 233.4 Kravspecifikationer 243.5 Backlogg 243.6 Mätningar 24

3.6.1 Användbarhet 243.6.2 Utvecklingstid 243.6.3 Kodrader 24

3.7 Prototyp 243.7.1 Brainstorming 253.7.2 Low fidelity-prototyp 253.7.3 High fidelity-prototyp 25

3.8 Verktyg 253.8.1 MySQL 253.8.2 WooCommerce 263.8.3 Brackets 26

3.9 Utveckling 263.10 Responsiv webbdesign 263.11 Användartester 27

4 Konstruktion 294.1 Tekniska krav 29

4.1.1 Beställa hem produkter 294.1.2 Lager saldo 304.1.3 Admin sida 324.1.4 Skriva inlägg 324.1.5 Användarvänlig 334.1.6 Säkerhet 344.1.7 Minimera kodrader 354.1.8 Design 354.1.9 Responsiv webbdesign 36

4.2 Brainstorming 364.3 Low fidelity-prototyp 37

7

4.4 High fidelity-prototyp 374.5 Färdig produkt 38

4.5.1 Startsida 384.5.2 Produktsida 414.5.3 Beställning 434.5.4 Admin-sida 45

5 Resultat 495.1 Jämförelse av metoderna 49

5.1.1 Kodrader 495.1.2 Utvecklingstid 50

5.2 Användartester 505.2.1 Frågor innan testet 515.2.2 Instruktioner under testet 515.2.3 Frågor efter testet 525.2.4 Användartest på admin-sida 52

5.3 Sammanfattande resultat 536 Diskussion 55

6.1 Måluppfyllelse 556.2 Resultat av användartester 556.3 Uppfyllda tekniska krav 566.4 Metod 576.5 Etiska och sociala aspekter 576.6 Framtida utveckling 57

6.6.1 Design 586.6.2 Generell plattform för produktförsäljning 586.6.3 Betalningsmetod 586.6.4 Köpa domän 586.6.5 Säkerhet 586.6.6 Orderändringar 58

8

1 Introduktion

Att beställa produkter och tjänster via den digitala världen är inte något nytt år 2021 och med den pågående pandemin av Covid-19 har den digitala utvecklingen bara ökat. Mindre företag behöver nu ett smidigare sätt att nå ut till sina kunder utan att de ska behöva lämna sina hem.

Företaget ShibasBeauty som går under namnet Lyxrummet startades år 2018 och har sedan dess tagit den estetiska världen med en storm. Lyxrummet är ett estetiskt företag som erbjuder sina kunder skönhetsbehandlingar samt säljer skönhetsprodukter.

Med företagets förfrågan om att digitalisera deras bolag har detta projekt skapats med det slutgiltiga målet att utveckla en webbutik för försäljning av produkter samt marknadsföring för att underlätta för företaget och sina kunder och öka tillgängligheten av deras tjänster. Webbutiken skapas genom två olika programmeringstekniker, klassisk webbprogrammering och no code för att kunna avgöra vilken metod som är mest effektiv för sådana utvecklingsprocesser.

1.1 Jämförelse klassisk webbprogrammering mot no code

Med den ökade utvecklingen av tekniken så har verktyg för webbskapandet kommit till för alla att tillämpa, de är enkla, icke tekniska och snabba att använda. Ökandet av low code och no code-verktyg har blivit allt mer populärt och nu är frågan om det i framtiden kommer ta över de klassiska webbprogrammeringsspråken. Vilken av dessa metoder är egentligen den bästa och mest lönsamma?

Low code och no code är olika benämningar men har nästan samma innebörd, de båda används för att skapa applikationer där no code görs helt utan någon from av programmering medan

low code använder väldigt få kodrader.[1]

Inom klassisk webbprogrammering finns det olika metoder och språk att använda sig av och för att sammankoppla en helt fungerande webbsida från back-end till front-end så behövs oftast mer än ett språk.

1.2 Bakgrund och problemmotivering Under den pågående pandemin av Covid-19 är möjligheten eller viljan till att lämna sina hem på en lägre utsträckning än tidigare, detta har i sin tur lett till att människor har behövt begränsa sina vardagliga köp på grund av begränsningen att nå till de fysiska butikerna. För att kunna lösa detta problem så har idén av en generell webbutik skapats där företag ska kunna använda sig av en färdig webbutiktjänst till sitt företag för att nå ut till sina kunder smidigare.

Med den positiva exponentiella ökningen för Lyxrummet sedan dess start har förfrågan om att digitalisera företaget kommit till liv. Detta för att underlätta företagets arbete vid försäljning

9

av sina produkter samt att underlätta för kunder över hela landet med att kunna beställa hem produkter utan att behöva lämna hemmet. För att kunna uppnå detta projekt har det grundat sig i att skapa en webbutik för kunder att besöka och kunna beställa hem produkter från. Webbutiken ska även innehålla all information om företaget, från behandlingar, nyheter, kontaktinformation.

Som tillvägagångssätt för att uppnå denna typ av utveckling kommer webbutiken vara kopplad till en databas för att registrera företagets inventering och sedan uppdateras automatisk vid köp av produkter. Detta är för att underlätta arbetat för personalen då allt sker per automatik. För att sedan kunna lägga till ny information på webbutiken så bör personalen ha ett inloggningsalternativ där de kan logga in för att kunna redigera webbutikens texter, bilder, inventering med mera.

För att kunna skapa denna jämförelse mellan klassisk webbprogrammering och no code-plattformarna kommer utvecklingsprocessen bestå av att skapa två webbutiker åt företaget, Lyxrummet, med dessa olika metoder. Sedan kommer en jämförelse på funkonalitet, utvecklingstid och användarvänlighet göras genom användartester och tydliga anteckningar under projektets utvecklingsprocess.

1.3 Översiktligt syfte Projektets översiktliga syfte är att göra en jämförelse mellan klassisk webbprogrammering i och den nyare metoden no code. Denna jämförelse kommer att göras via fallstudien av att digitalisera företaget Lyxrummet genom att skapa två webbutiker med dessa metoder och jämföra slutresultatet samt utvecklingsprocessen mellan dem.

1.4 Konkreta och verifierbara mål För att fullgöra detta projekt och uppfylla syftet så har dessa mål lagts fram:

• Skapa användarvänlig webbutik. • Göra mätning av användbarheten i jämförelsen av klassisk webbprogrammering och no

code sidan. • Jämförelse i utvecklingstiden och kodrader av skapandet med klassisk

webbprogrammering och no code.

1.5 Avgränsning Avgränsningen under detta projekt har varit att ta bort det krav av att ha en funktionellt fungerande betalningsmetod för den webbutiken som är skriven med klassisk webbprogrammering.

1.6 Översikt Rapportens struktur är en uppbyggnad av sex stora rubriker.

Kapitel 2 är teorikapitlet och det är den del som förklarar de verktyg som använts och vad de är för något. Efter det kommer metodkapitlet som tydligt beskriver de metoder som används men även hur de har använts under projektets gång.

10

Det fjärde kapitlet som kommer är konstruktions kapitlet vilket är den mest tekniska delen av rapporten som visar funktionaliteter och förklarar hur olika lösningar har gjorts med hjälp av olika tekniska metoder och hur detta i sin tur har lett till utvecklingen av projektens helhet. Efter förklaringen på hur allt har sammansatts så är det resultatkapitlets tur, där redovisas kort och konkret alla slutresultat som kommit fram under projektet gång.

Sista kapitlet i denna rapport är diskussions kapitlet, där diskuteras de olika resultaten som kommit fram, för och nackdelar, vad som hade kunnat göras annorlunda, vilka framtida utvecklingsplaner som finns för detta projekt och vilka etiska och sociala aspekter som finns.

1.7 Bidrag Detta projekt har utvecklats av en deltagare, Shawbo Sharifzadeh, som läser sin sista termin på den 3 åriga utbildningen Datateknik. Shawbo har varit ansvarig för alla delar i projektet och utfört allt arbete själv.

11

2 Teori Detta kapitel är till för att ge läsaren en inblick i alla de verktyg och metoder som har använts under projektets gång.

2.1 Agil utveckling med scrum Att arbeta inom ett projekt agilt innebär att gå bort från det traditionella arbetssättet inom projekt med deadlines och strikta strukturer, då det istället strävar efter att få en slutprodukt på kortare tid och mer anpassad slutprodukt. Det är under de senaste åren som begreppet om agil

systemutveckling har ökat enormt. [2]

Figur 1: Scrum diagram. [3]

Scrum är en av de flera metoder som finns inom de agila metoderna, det är ett ramverk som använder de agila tankesättet. Det är ett konkret och icke komplext ramverk och grundprincipen inom scrum går ut på att inte bygga allt på en gång utan sakta men säkert under utvecklingsprocessen hitta idéer som anses vara passande och sedan testa dem. Utan att ge en tydlig slutprodukt redan i början av projektet låter scrum produkten skräddarsys under sin utvecklingsprocess.

Metoden scrum är uppbyggd av tre olika roller, utvecklingsgruppen, scrum master och produktägaren. Utvecklingsteamet är de i gruppen som arbetar med utvecklingen och där bör man samla på sig personer med olika kompetenser så att de tillsammans kan bidra med sin kunskap. Scrum master är den person som har ansvar att se till att ramverket för scrum utförs och att gruppen samt produktägaren är aktiva med deras uppgifter och motiverar dem vidare till att aktivt kämpa på. Produktägarens uppgift är att hålla koll på att utvecklingsgruppen maximerar värdet av vad för produkt som i slutet kommer att levereras. De sköter prioriteringen

12

inom skapandet också men måste även ge utvecklingsgruppen möjlighet att dela med sig av sina idéer fritt.

Det finns vissa aktiveter som ingår i metoden scrum. Sprintar är en av de aktiviteter och de är perioder under en viss tidsbegränsning, det kan vara 1, 2 eller 3 veckor, där det ska finnas planering, utveckling samt utvärdering. Det är i början av varje sprint då utvecklingsgruppen och produktägaren tillsammans skapar en tydlig bild av vad som ska genomföras under den

kommande tiden. [4]

2.1.1 MoSCoW

Prioritetstekniken MoSCoW står för Must have, should have, could have och won’t have. Det är en vanlig teknik som används inom mjukvaruutvecklingsprojekt. Det är en metod för att tillsammans med kunden kunna veta vilka mål som bör prioriteras och vad som inte bör

prioriteras under projektets gång. [5]

Figur 2: MoSCoW metod. [6]

2.1.2 Gantt-schema

Gantt-schema är en metod som förekommer inom projekt med tydlig tidsplanering. Det innebär att listor skapas som visar aktivitetsplanen och varje plan ska uppta en rad med specifik

tidsättning för just den aktiviteten. [7]

13

2.1.3 Gantt-schema

Att skapa en grundform med hjälp av en testmodell av en produkt är det som kallas för att skapa en prototyp. För att få en tydlig struktur och bild över den produkten som ska skapas utförs en prototyp. Nackdelen med att inte skapa en prototyp är att det i sin tur kan leda till en nyskapad

produkt med defekter. [8]

2.1.4 Brainstorming

Brainstorming är ett låneord som kommer från det engelska språket. Det är en klassisk och känd metod för att kunna hitta utvecklingsmiljöer. Syftet med brainstorming är att låta tankarna släppas fria och dela med sig av alla idéer som kommer upp under brainstormings processen. Denna metod används som ett verktyg för att kunna lösa ett problem när det kört fast. För att skapa en struktur under brainstorming processen så skrivs idéer som tagits upp på en tavla eller papper för att sedan i slutet kunna diskutera allt som blivit uppskrivet och försöker hitta de som

anses vara realistiska och uppnåbara. [9]

Metoden brainstorming skapades 1938 av Alex Osborn och fick sin popularitet genom publiciteten av hans bok ”Applied Imagination” år 1953. Sedan dess har utvecklingsprocesser

använt brainstorming kontinuerligt. [10]

2.1.5 Low fidelity-prototyp

Användningen av low fidelity-prototyper är till för att hjälpa projektgruppen att studera produkten i den tidigaste fasen med fokus på snabbt skapande och användartester för att sedan utveckla vidare till en mer realistisk prototyp. Low fidelity-prototyper är enkla och snabbt skapade, oftast ritade för hand på papper. Under denna process bör alla möjliga idéer skapas

och ritas för att kunna få fler alternativ att välja och utgå från. [11]

2.1.6 High fidelity-prototyp

High fidelity-prototyper är prototyper med funkonaliteter och en nästan exakt bild av hur slutprodukten ska se ut. Den är skapad i högkvalitet, oftast med hjälp av dator och ser ut som äkta mjukvara. Med high fidelity-prototyper skapas djupgående funkonaliteter som skall spegla

det verkliga resultatet som vill uppnås av produkten. [12]

2.1.7 Moqups

Moqups är ett online verktyg som används för att skapa prototyper av webbapplikationer, mobilapplikationer samt skapa diagram. Detta online verktyg används av över 2 miljoner

produktskapare i alla olika branscher. [13]

14

2.2 Webbutvecklingens historia År 1990 skapade Tim Berners-Lee det som idag kallas det klassiska webbprogrammerings språket HTML och det blev redan då det grundläggande språket för att skapa webbsidor. Men under denna period bestod hemsidor av endast simpla tabeller och text. Med utvecklingen av hårdvaran kom även viljan till mer design anpassade webbsidor och då skapades språket CSS som tog webbdesignen med ny storm och skapade nya sätt att organisera och visa upp

webbsidans innehåll. [14]

År 1994 skapades språket PHP av Rasmus Lerdorf, det var dock en tidig och icke släppt version som han endast använde till eget bruk för att räkna antal besökare på sin webbsida. Men redan

tidigt 1995 fick andra ta del av PHP. [15]

2.2.1 Responsiv webbdesign

Figur 3: Responsiv design. [16]

Att använda termen responsiv under webbutveckling är en känd term och det innebär att skapa layouten på hemsidan så att den anpassar sig beroende på skärmupplösning och skärmstorlek på den enhet som används. Tekniken utgår från att börja bygga webbsidan anpassad till mobiltelefoner för att sedan därifrån utöka den till en dator. Den första responsiva webbsidan kom år 2001 när byrån Razorfish utvecklade en websida till företaget Audi, men begreppet

responsiv webbdesign kom inte till förrän maj 2010 av Ethan Marcotte. [17][18]

2.2.2 Webb 2.0

Webb 2.0 är en teoretisk term som presenterades ut till allmänheten första gången januari 1999 av Darcy DiNucci i hennes artikel “Fragmented Future. Termen kom till som ett koncept av det nya sättet att integrera på och med webbsidor.

15

Figur 4: Utvecklingen av webb 2.0. [19]

För att sammanställa vad en webbsida som behöver för att kunna kallas för en webb 2.0 sida så är dessa punkter viktiga:

• En webbsida som ger besökaren en upplevelse från start till slut, det kan vara rik på grafiska, interaktivitet eller funktionalitets tillägg

• En webb-orienterad arkitektur innebärande att skapa funktioner så att andra applikationer både kan integrera samt utnyttja dess innehåll.

• En social webbsida, innebärande att webbsida integrerar med besökaren men även

låter besökaren integrera med webbsidan. [20]

2.3 För och nackdelar med klassisk webbprogrammering och no code

Fördelarna som kommer med att använda no code:

• Snabbare att använda då de flesta no code-plattformar använder dra-och-släpp funktioner.

• Billigare för företag som inte längre behöver anställa utvecklare. • Går snabbt att göra ändringar på webben utan att behöva leta runt i olika kod-sidor.

Nackdelarna som kommer med att använda no code:

• Det finns flertal no code-plattformar och alla kan inte göra allt, detta innebär att det är viktigt att hitta en plattform som uppfyller de kraven som matchar ihop. Dessa krav kan

16

även med tiden ändras eller behöva utvecklas och då finns risken att den valda plattformen inte längre är en bra matchning.

• Alla no code-plattformar använder olika mallar att välja utifrån vilket leder till en begräsning på hur man kan bygga webbsidan. Detta kan i sin tur leda till att byta tankesätt från “vad vill jag bygga?” till “vad kan jag bygga?”.

• Att inte förstå, veta eller ha ansvar över säkerheten om ens egna webbsida har kan leda

till potentiell risk för intrång. [21]

Fördelarna som kommer med att använda det klassiska webbprogrammeringsspråket PHP:

• Det är ett brett språk som kan användas på de flesta operativsystem och går bra ihop med de flesta databaserna.

• PHP är ett simpelt språk och lätt att lära sig • Det mest använda språket inom webbutveckling vilket leder till att det finns mycket

fakta och kunskap kring det.

Nackdelarna som kommer med att använda det klassiska webbprogrammeringsspråket PHP:

• Svårt att hitta felsökningar då språket har ett dåligt felsökning-system • Behöver kunna PHP samt relativt bra med kunskap inom HTML för att kunna utveckla

webbsidor. [22]

2.3.1 Low code och no code

Low code och no code är två nya utvecklingsmetoder. De skiljer sig en del då low code innebär att skapa programvara och mjukvara med så lite kod som möjligt, kan vara några få kodrader endast. Men no code är precis vad namnet säger sig, att skapa programvara och mjukvara utan någon kod alls. Båda dessa metoder kräver användning av plattformar med visuella gränssnitt som görs med enkla dra och släpp funktioner istället för att skriva med traditionella programmeringsspråk. Detta ger möjligheten till icke tekniskt kunniga personer att få arbeta med webbutveckling.

På senare tid har low code och no code-plattformar blivit alltmer populära och börjar ersätta den traditionella webbutvecklings processen.

Inom low code och no code-plattformar så finns verktygen för att visuellt kunna se det som kommer att skapas med blotta ögat, det leder i sin tur till en snabb utveckling och en tydlig bild

av vad som skapas direkt. [23][24]

I nästan 50 år var programmeringen den ledande titeln inom den tekniska världen tills 2010-talet då ordet low code kom till. Det var år 2014 då företaget Forrester skapade termen low code där deras definition löd “Low code plattformar möjliggör snabb leverans av affärsapplikationer med ett minimum av handkodning samt minimum av investering i utbildning och anställning.” Denna nya teknik med low code och no code tog bort alla de

17

tidigare problem som funnits med klassisk programmering, tiden för utveckling blev kortare, att hitta erfarna programmerare behövdes inte längre, nu kunde utvecklingsprocesserna göras med enkla dra och släpp funktioner och stora plattformar som Wordpress gav nu möjligheten

till alla, oavsett teknisk bakgrund, att utveckla sin egen webbsida. [25]

2.3.2 Wordpress

Wordpress är den mest använda plattformen för skapande av webbsidor och har skapar över 40% av de existerande webbplatserna på internet idag. Det är ett system med öppenkällkod och är tillgängligt att användas av vem som helst kostnadsfritt. Wordpress skapades först och främst för att kunna skapa en blogg men har med tiden utvecklats till att kunna använda för alla typer av webbprogrammering. Konceptet som Wordpress är uppbyggt på är det så kallade content managment vilket är ett system som använder verktyg för att kunna hantera viktiga delar av en webbsida utan att behöva veta något om programmering.

Figur 5: Wordpress arkitektur. [26]

Wordpress skapades år 2003 och var en fortsättning på ett tidigare projekt som hette b2/cafelog. Dess ursprung kommer från samarbetet mellan Matt Mullenweg och Mike Little och Matt är

även i dagsläget ansiktet utåt för Wordpress. [27]

2.3.3 WooCommerce

WooCommerce är ett extra tillägg som finns tillgängligt att hämta till Wordpress för att omvandla den vanliga webbsidan till en webbutik. Detta tillägg ger tillgång till en admin sida där möjligheten till en moln-baserad databas som lagrar alla produkter och dess information, enkla betalningsmetoder kopplade till externa företag som Klarna eller Swish. Det är även med detta tillägg som webbutiksägaren kan se alla beställningar som gjorts och order som är lagda

men även för kunder att kunna skapa ett konto och hålla koll på sin orderhistorik. [28]

18

2.3.4 Klassisk webbprogrammering

Inom klassisk webbprogrammering finns det olika metoder och språk med de mest omtalade är PHP, HTML och CSS. Dessa tre delar sammankopplat är vad som skapar en fullt fungerande webbsida. PHP jobbar med back-end och skapar funktionaliteterna som ska vara med, det är inget en besökare på webbsidan kan se med ögat utan gömmer sig bakom allting. HTML är den delen som skapar en struktur för hemsidans uppbyggnad och tar sedan hjälp av CSS för att designa utseendet. CSS och PHP integrerar inte med varandra men med hjälp av HTML så sammankopplas alla delarna och ger en webbsida med funktionalitet och design.

PHP står för Hypertext Preprocessor och är ett scriptspråk som är väldigt populärt inom områden att skapa dynamiska webbplatser, applikationer och system. Språket PHP används främst i samband med skapandet av databaser och ger då möjligheten till funktionaliteterna av att ha kundregister, publiceringsverktyg och många fler system med information som

dynamiskt kan läggas till, tas bort eller ändras. [29][30][31]

2.3.5 MySQL

MySQL är en relationsdatabas som lanserades 1995 men ägs nu av Oracle Corporation och har gjort det sedan 2010. De är en öppen källkod och är därför både fritt att använda och även ändra på. SQL står för förkortningen av Structured Query Language som är de programmeringsspråk som använder id åtkomst och hantering av data i relationsdatabaser.

Relationsdatabas innebär att databasen delar in data som är lagrad i olika lagringsområden, även kallade tabeller. Detta ger en tydligare struktur i uppbyggnaden av data istället för att bara kasta in allt i en stor lagringsenhet.

MySQL använder även en så kallad klient-server-modell, vilket innebär att databasen är uppdelad i flera delar. I server delen är all datalagrad men för att kunna få tillgång till den data

som finns där i behövs en förfrågan skickas och det är där klienten kommer in i bilden. [32]

19

2.3.6 XAMPP

Figur 6: Xampp arkitektur. [33]

Xampp är ett program från apache friends som skapar en lokal server i datorn och används vid skapandet av webbsidor. Med denna programvara medföljer även apacheserver och MySQL-

server. [34]

20

2.3.7 Brackets

Figur 7: Skärmdump av Brackets miljö.

Brackets är en källkodsredigerare som har fokus på webbprogrammering. Det är en gratis programvara att ladda ner och är skapad av Adobe Systems. Brackets lanserades 4 november

2014 och finns tillgänglig till de flesta operativ system. [35]

2.3.8 Flatuicolors

Figur 8: Skärmdump från FlatUiColors hemsida.

FlatUiColors är en online sida som skapats genom ett samarbete med 13 designers runt om

världen för att ge de olika färgpaletter att använda i projekt. [36]

21

2.4 Användartester Användartester är en grundläggande del inom tekniska utvecklingsprojekt. Det är under användartester då funktionaliteterna för en produkt, webbapplikation eller mobilapplikation faktiskt kan ge svar på hur projekts slutgiltiga resultat kommer att fungera i den verkliga världen. Meningen med att göra användartester är för att få veta vad som är bra och vad som behövs förbättras. För att få så tydliga resultat som möjlig ska testet inte dirigera de deltagare som utför testet utan låta de själva utforska hemsidan eller applikationen. Detta görs för att se om det skapade är användarvänligt och lika lätt att förstå även för de som inte än har någon

kännedom om den. [37]

22

3 Metod Detta kapitel kommer fördjupa sig i de metoder som använts under projektets gång men även varför och hur de har använts. Det kommer också detaljerat förklara hur arbetsmetoderna har varit för att få ett så maximerat arbete som möjligt.

3.1 Arbetsmetod För att maximera effektiviteten av projektet under dess korta tidsperiod har arbetsmetoden för projektet varit att arbeta agilt och då varit den agila systemutvecklingsmetoden scrum.

Denna arbetsmetod hjälper projektet att hålla ett öppet sinne under utvecklingsprocessen och ger då utrymme till ändringar och förbättringar under tiden av utvecklingen. Detta projekt har endast bestått av en deltagare som har arbetat med alla delar i projektet och har då fått vara den deltagare som agerar alla roller som ingår i att arbeta med den agila metoden av scrum. Varje sprint som har på gått under en vecka har varit noggrann planerad från små detaljer till stora. Möten med kunden har även kontinuerligt pågått under varje sprint och har därför kunnat hålla en utvecklingsfas och idéprocess som både passat kunden samt projektet.

Även om detta projekt har utförts av en person har de olika rollerna av scrum master, produktägare och utvecklingsgrupp framträtt. Detta har kunnat ske då olika situationer har lett till att projektdeltagaren har behövt agera olika roller utifrån situationen. Under möten med kund har projektdeltagaren agerat produktägare, under utvecklingsprocessen har projektdeltagaren agerat som utvecklingsgruppen och under möten med handledare eller situationer där förvirring om fortsatt utveckling förekommit har projektdeltagaren agerat som scrum master.

23

3.2 Tidsschema 3.2.1 Stora mål

Tabell 1: Gantt-schema.

3.2.2 Kundmöten

Tabell 3: Gantt-schema.

3.3 Fastställda krav Projektets kund har via kundmöten som hålls på Zoom kunnat skapat fyra grundläggande krav som för dem är viktiga att ha med till webbutiken. Kraven har kommit fram med hjälp av brainstorming mellan kunden och projektägaren samt användningen av MoSCoW metoden för att skapa prioritetsnivåer på funktionaliteterna.

För att uppnå projektets syfte så har även krav av projektägaren skapats, det är krav för att uppnå en C-nivåuppsats och de förklaras tydligt i delkapitlet 1.4.

24

3.4 Kravspecifikationer Baserat på kraven som kommit från kunden samt de som lagts för att uppnå en C-nivå på arbetet har en tydlig struktur på backloggen kunnat läggas upp. Där har metoderna som brainstorming och MoSCoW används för att få en tydlig grund som sedan kunnat byggas vidare på. Detta har lett till att viktiga delar av projektet har kunnat läggas in i en prioritetslista med högst prioritering först. Detta underlättar den korta tidsperioden som projektet har och ger möjligheten till en tydligare utvecklingsprocess.

3.5 Backlogg Backloggen är den delen som innehåller alla olika krav som har funnits för projektet. Metoden MoSCoW har använts för att ge en strukturerad grund för backloggen. Prioriteringslistorna som skapats med MoSCoW metoden har hjälp backloggen dela upp alla mål som funnits till mindre och tydligare mål, vilket i sin tur har lett till en uppdelning av målen för varje sprint.

3.6 Mätningar För att kunna få fram resultatet av projektets syfte så har mätningar gjorts och i detta delkapitel kommer metoden för dessa mätningar förklaras detaljerat.

3.6.1 Användbarhet

För att kunna skapa en jämförelse av användbarheten mellan den webbutiken som skapades med klassisk webbprogrammering och den med no code så har användartester gjorts på 8 deltagare. Dessa 8 deltagare har fått direktiv som de ska följa och efter testet fått svara på frågor gällande webbutikerna. Resultatet av dessa frågor har sedan sammanställts för att kunna skapa en jämförelse mellan de båda webbutikerna.

3.6.2 Utvecklingstid

För att kunna få fram en korrekt och tydlig bild av hur lång utvecklingsprocesserna för de två olika webbutikerna har varit, från start till slutprodukt, har loggande av antal dagar det har tagit att utveckla vardera sida skrivits ner och antecknats. Varje utvecklingsdag har bestått av 6 timmars arbete. När båda webbutikerna blivit färdigutvecklade så görs en jämförelse mellan deras utvecklingstider.

3.6.3 Kodrader

Jämförelsen av antal kodrader mellan webbutiken som gjorts med klassisk webbprogrammering och no code görs genom att räkna antalet kodrader på vardera sida och jämföra resultatet.

3.7 Prototyp Skapandet av prototyperna under projektets gång går stegvis från en icke teknisk prototyp som ritas på papper, även kallad lo-fi, som sedan vidare utvecklas till en teknisk prototyp som kallas hi-fi.

25

3.7.1 Brainstorming

Projektet startade med metoden som kallas brainstorming, det innebär att alla möjliga idéer och tillvägagångssätt för detta projekt tagits upp för att sedan rösta fram vad som ansågs vara mest passande.

3.7.2 Low fidelity-prototyp

Innan utvecklingsprocessen startades var det grundläggande att skapa en low fidelity även kallats lo-fi prototyp där projektdeltagaren tar de idéer som uppkommit under brainstorming sessionen och skapar olika icke tekniska prototyper på papper. När ett få tal alternativ har blivit skapade träffades projektdeltagaren och kunden för att tillsammans rösta fram det alternativ som ansågs vara mest passande.

3.7.3 High fidelity-prototyp

Efter att lo-fi prototypen skapats och valts ut så gjordes den tekniska high fidelity-prototypen, även kallad hi-fi. Denna tekniska prototyp ska vara så nära den verkliga slutprodukten som möjligt och skapas därför innan utvecklingsprocessen startar för att kunna ge en tydlig struktur över vilken väg utvecklingsgruppen ska arbeta efter.

High fidelity-prototypen skapades med det online baserade verktyget moqueup vilket skapar en fullt ut realistisk prototyp.

3.8 Verktyg Nästkommande underkapitel kommer vara en mer djupgående förklaring kring de verktyg som används under projektets gång.

3.8.1 MySQL

Databasen som använts i detta projekt är MySQL och anledningen till att just denna databas valdes är på grund av dessa punkter:

• Flexibilitet – MySQL är en databas som fungerar på majoriteten av operativsystemen som finns i dagsläget.

• Hög prestanda – Även med ett stort lagringsutrymme så arbeta MySQL med hög prestanda, snabba belastnings vektyg med mera och är därför en utmärkt databas till affärssystem.

• Styrkor inom webblagring - På grund av den höga prestandan som MySQL medför så gör det sig till den mest passande databasen för webb och datalagring. Den stödjer snabba fulltextsökningar samt datainfogningsfunktioner.

• Gratis – MySQL är en gratis databas att använda sig av vilket är till stor fördel för mindre företag eller privatpersoner som inte har möjligheten att betala för dyra servrar. [38]

26

3.8.2 WooCommerce

För att kunna utöka no code-sidan till en sida med funkonaliteter för en webbutik så behöves tillägget WooCommerce. Detta tillägg är vad som tillåter en vanlig webblogg att omvandlas till en användarvänlig webbutik som kunder kan handla från. Utan tillägget WooCommerce kan man via plattformen Wordpress inte skapa en no code webbutik och just detta tillägg valdes då det är ett gratis alternativ som är lätt att sätta upp och ger samtliga funktionaliteter för en fungerande webbutik.

3.8.3 Brackets

Samtlig programmering som gjorts under detta projekt har skrivits i texteditorapplikationen Brackets.

3.9 Utveckling För att maximera effektiviteten för utvecklingsprocessen har det varit essentiellt med en stark grund, innebärande en tydlig grund över projektets krav innan utvecklingsprocessen sätter igång för att kunna få de mest möjliga slutresultatet. Därför har fastställandet av kraven prioriterats och tydligt visats i backloggen samt skapandet av prototypmodeller som bör vara så nära den slutgiltiga produkten som möjligt.

Det har även varit grundläggande att etablera de tydliga kraven och planerna för ett projekt som utförs via den agila metoden scrum. Detta är essentiellt för att kunna hålla en strukturerad, detaljerad och tydlig tidsplan. Det slutgiltiga resultatets framgång utgår alltid från hur väl planerad backloggen har varit.

3.10 Responsiv webbdesign

Figur 9: Responsiv webbdesign arkitektur. [39]

27

För att skapa en sida som anpassar den viktiga informationen till enhetens skärmstorlek där den öppnas på behövs vissa specifika tillägg i HTML och CSS filerna. Metoden kallas för media queries och är en teknik som finns med i CSS3 som använts under detta projekt.

3.11 Användartester Metoden för att utföra användartester på de två webbutikerna som skapats gjordes på 8 deltagare, med ett intervall på åldern mellan 15 – 60 år. Detta test gjordes endast på kundsidan och inte admin sidan.

Deltagarna fick inte veta vilken webbutik som hade skapats med no code respektive klassisk webbprogrammering utan fick endast veta namnen webbutik1 och webbutik2. Där webbutik1 representerar den som skapats med no code och webbutik2 den som skapats med klassisk webbprogrammering.

Alla tester utfördes genom korta och tydliga direktioner och frågor. Detta skedde innan och efter testet med tydlig observation och anteckning av deltagarnas tankar och utföranden under testet.

Första steget i testet var att låta deltagarna fritt röra sig runt på båda webbutikerna i 2 minuter var, detta skedde utan några direktioner eller förklaringar.

Innan testet gavs dessa frågor till deltagarna:

• Skulle du klassa dig själv som en teknisk kunnig person? Ja eller nej. • Brukar du handla online?

Instruktionerna under testet gavs i kronologisk ordning och var dessa:

• Hitta de tjänster som företaget erbjuder. • Hitta de produkter som företaget säljer. • Utför ett fullständigt köp.

Efter att ha utförts de instruktioner som visats ovan så fick deltagarna följande frågor:

• Vilken av webbutikerna 1 eller 2 var det lättast att hitta information ifrån? • Vilken av webbutikerna 1 eller 2 var det lättast att navigera sig runt på? • Vilken av webbutikerna 1 eller 2 var det lättast att beställa produkter ifrån? • Vilken av webbutikerna 1 eller 2 var mer lockande? • Vilken av webbutikerna 1 eller 2 skulle du helst vilja handla dina produkter ifrån? • Vilken av webbutikerna 1 eller 2 skulle du välja som favorit? • Vad skulle du vilja förbättra eller ändra på webbutik 1? • Vad skulle du vilja förbättra eller ändra på webbutik 2?

Ännu ett till användartest utfördes på admin-sidan av den webbutik skapad med klassisk webbprogrammering. Detta test var ett mycket mindre test som utfördes på en deltagare endast,

28

vilket var kunden som ska använda den sidan. Strukturen på testet var uppbyggt som ovan och detta var frågorna som ställdes:

Innan testet gavs denna fråga till deltagaren:

• Klassar du dig själv som en teknisk kunnig person?

Under testet gavs dessa instruktioner:

• Logga in på admin-sidan. • Gå till din produktsida. • Radera en produkt som finns på sidan. • Uppdatera en produkt som finns på sidan. • Lägg till en ny produkt på sidan.

Efter testet ställdes dessa frågor:

• Var det svårt att navigera sig runt på admin-sidan? • Skulle du anse denna admin-sida vara enkel att använda för dig som ägare? • Finns det något du skulle vilja lägga till eller ta bort med admin-sidan?

29

4 Konstruktion

4.1 Tekniska krav De tekniska kraven som tillsammans med kunden framkommit var dessa:

• Webbutiken ska funktionellt fungera så att kunder kan göra beställningar. • Webbutiken ska automatiskt uppdatera lagersaldo vid köp. • Företaget ska kunna uppdatera sidan med sådant som nya behandlingar, produkter,

information och lagersaldo. • Information om alla tjänster som förteget utför ska finnas med.

I detta delkapitel kommer utvecklingsprocessen för att uppnå dessa krav förklaras på ett tekniskt och detaljerat sätt.

4.1.1 Beställa hem produkter

• Webbutiken ska funktionellt fungera så att kunder kan göra beställningar. För att en webbsida ska kunna klassas som en webbutik så måste kunder kunna beställa hem varor eller tjänster från den. För att utveckla denna möjlighet för dessa två webbutiker som skapats har två olika metoder använts.

PHP

Figur 10: Flödesschema över köpprocessen på klassisk webbprogrammerad webbutik.

För att kunna skapa en order har funktionaliteterna av en separat beställningssida skapats, den nås endast när kunder väljer att trycka på “order now”-knappen. På den sidan kan kunderna

30

göra inmatningar om varan som ska beställas samt ge personuppgifter om vem köparen är. När den order läggs så skickas den inmatningen som gjorts på sidan till databasen och visas på admin sidan.

Som en avgränsning för projektet så har det valts att inte skapa en betalningsmetod för den webbutik som skapas med klassisk webbprogrammering och därför kan kunder lägga en order med endast personuppgifter och inga kortuppgifter.

Wordpress

Figur 11: Flödesschema över köpprocessen på no code webbutik.

För att kunna göra beställningar på en webbsida skapad med Wordpress behövs ett tillägg som heter WooCommerce. Detta är ett tillägg som omvandlar en vanlig webbsida till en webbutik. Med enkla knapptryck installeras tillägget och skapar då möjligheten för en kund att utföra en order, se sin orderhistorik, spara varor i varukorgen, betala för varorna med mera. Det ger även möjligt för ägaren som sköter webbutiken att kunna se vem och vad för beställning har gjort för att då skicka ordern. Detta tillägg ger även betalningsalternativ sådana som att använda externa företagen som Klarna eller Swish. Det går även att registrera vanligt kredit/debit kortköp.

4.1.2 Lager saldo

• Webbutiken ska automatiskt uppdatera lagersaldo vid köp.

För att göra webbutiken så simpel och användarvänlig som möjligt så har ett krav med automatiserad lagersaldouppdatering vid köp varit ett krav. Lagringar av lagersaldot blir därmed kopplat till en databas.

31

PHP

Figur 12: Databas tabeller från klassisk webbprogrammerade webbutiken.

För att kunna skapa ett lagersaldo till webbutiken så användes databasen MySQL. Det är admin sidan som är kopplat till hanteringen av databasen där ägaren med enkla knapptryck kan ta bort, lägga till och uppdatera nya och befintliga varor.

Wordpress

Figur 13: Databas tabeller från no code webbutik.

32

För att kunna ha ett lager med olika produkter och en databas uppkopplat till det används tillägget WooCommerce som använder sig av en molnbaser databas som sparar lagret av produkter lokalt på admin-sidan. Detta tillägg skapar automatiserad uppdatering av det lagersaldo som är inmatat sedan innan när det sker köp. WooCommerce skapar 43 tabeller i databasen som är sammankopplade. Alla dessa tabeller skapas automatiskt av tillägget.

4.1.3 Admin sida

• Företaget ska kunna uppdatera sidan med sådant som nya behandlingar, produkter, information och lagersaldo.

PHP

Figur 14: Schema över inloggningssystemet.

Genom att skapa inloggningsfunktion som leder till en administrativ sida så kan ägaren enkelt uppdatera, ta bort eller lägga in produkter, aktivitet om lagersaldot och användare mm. Detta görs genom att admin sidan har alla dessa delar kopplat till sin egen databas som lagrar informationen som visas på webben.

Wordpress

Wordpress har en admin sida som automatisk skapas när ett konto öppnas. Det är denna sida som styr allt som webbesökarna ska se och kunna göra.

4.1.4 Skriva inlägg

• Information om alla tjänster som förteget utför ska finnas med.

33

PHP

Möjligheten för admin att skriva nya inlägg och publicera dem på webbsidan finns inte just och är något som bör vidareutvecklas i framtiden. Däremot står all information om vad för tjänster företaget utför statiskt på webbsidan.

Wordpress

Med Wordpress skapas funktionen för att göra inlägg automatisk till varje webbsida som skapas där. Via admin sidan kan man med enkla knapptryck skriva nya inlägg och publicera de vart man vill.

4.1.5 Användarvänlig

• En användarvänlig webbutik.

För att skapa en så användarvänlig webbsida som möjligt har simpla funktionaliteter varit prioriterade. Enkel och tydlig navigering i form av specificerade och tydliga rubriker.

En tydlig meny bar som visar alla möjliga alternativ som webbutiken erbjuder, sådant som tjänster, produkter, kontakt med mera. är en av metoderna som har används för att skapat användarvänliga webbutiker.

Figur 15: Skärmdump av meny bar av no code webbutiken.

Figur 16: Skärmdump av meny-bar av klassisk programmerade webbutiken.

Det har även varit grundläggande att ha en användarvänlig admin-sida vilket gjordes med hjälp av knappar som tydligt visar dess syfte. Se figur 17 nedan så syns ett exempel på admin-sidan över de lagrade admin, där visas det tydligt hur tillvägagången för att lägga till en ny admin görs genom att trycka på knappen “Add Admin”, eller att ändra lösenord, uppdatera eller radera.

34

Figur 17: Skärmdump över admin-sida.

4.1.6 Säkerhet

Figur 18: MD5 arkitektur. [40]

För att inte tillåta åtkomst till admin sidan för icke behöriga så har ett inloggningssystem skapats där endast de admin registrerade i databasen kan logga in via. Hemsidan är skyddad med säkerhets metoden som kallas md5 vilket är en-väg kryptering.

No code plattformen har egen inbyggd funktionalitet där krypteringen är uppbyggd av md5 men med webbutiken som gjorts med klassisk webbprogrammering behövde md5 implementeras för hand. Md5 implementerades då in i koden som delas på alla admin-sidor och gör att ingen admin sidan kommer kunna nås om inte enheten först är inloggad. Den gör även att lösenorden för admin inte syns, även i databasen, utan ger ett krypterat lösenord för att skapa en ännu säkrare webbutik.

35

4.1.7 Minimera kodrader

Varje sida på webbutiken består av samma header meny längst uppe och samma text längst ner på sidan. För att minimera återskapandet av samma kod så har istället separata filer för dessa delar skapats som sedan inkluderas in med en enkel kod-rad i toppen och botten av varje fil.

Figur 19: Kod-rad som visar include-funktionen.

I figur 19 är funktionen för den allmänna meny header som inkluderas på alla sidor.

4.1.8 Design

Figur 20: Kundens loga.

Webbutikernas design har anpassats utifrån att skapa så användarvänliga webbutiker som möjligt. Layouten på funktionaliteterna har skapats simpla för att lätt hanteras av icke tekniskt kunniga personer. Färgerna som valts ut har varit från önskemål av kunden då de ska passa in med deras loga.

36

4.1.9 Responsiv webbdesign

Figur 21: Skärmdump av Media queries teknik.

Media queries tekniken finns i CSS3, det är där regeln för @media är inkluderad i CSS filen för webbutiken. Den säger till när och var specifika delar av CSS ska agera och skapar möjligheten till att skapa justerbar layout efter enhetens storlek.

4.2 Brainstorming

Figur 22: Skärmdump över alla idéer som valdes fram under brainstorming processen.

Projektets första steg var att kunna skapa en idé om vad kunden ville ha och detta gjordes genom metoden av brainstorming. Figur 22 visar vad slutresultatet av den processen blev.

37

4.3 Low fidelity-prototyp

Figur 23: Low fidelity prototyp.

Den low fidelity prototyp som kunden valde ut ritades på papper med penna.

4.4 High fidelity-prototyp

Figur 24 & 25: Teknisk prototyp.

38

Figur 26: Teknisk prototyp.

Den high fidelity prototyp om skapades för att ge kunden och projektet en tydlig bild över vad som bör strävas efter för att uppnå dess mål.

4.5 Färdig produkt Nedanstående delkapitel kommer visa hur de färdiga webbutikerna ser ut.

4.5.1 Startsida

Figur 27: Startsida av klassisk programmerad webbutik.

39



Figur 27, 28 och 29 ovan visar startsidan av webbutiken skapad med klassisk webbprogrammering. Den ger en tydlig bild av vad företaget erbjuder, vilka produkter som finns att köpa och vilket företag det är med namn och logo. Det finns även en sökfunktion som ger kunder möjligheten att söka efter produkter eller tjänster de är intresserade av.

40

Figur 30: Startsida av no code webbutik.



41

Detta är startsidan på webbutiken som skapats med no code. Startsidan börjar med ett inlägg som välkomnar besökarna och ger lite kort information om företaget och dess mål. Lite längre ner på startsidan finns det möjligheten till en sökruta som hjälper besökarna navigera sig runt lättare på webbutiken samt snabbtillgång till de tjänster som erbjuds av företaget.

4.5.2 Produktsida

Figur 33: Produktsidan av klassiskt webbprogrammerade webbutiken.

Figur 34: Produktsidan av klassiskt webbprogrammerade webbutiken.

Produktsidan på den webbutik skapad med klassisk programmering är skapad på ett simpelt sätt med en lista över de tillgängliga produkterna samt en sökfunktion att använda om besökaren inte hittar det de söker efter. Vid varje produkt finns det även information om den för att kunna ge besökaren snabb åtkomst till vad för produkt det är de beställer.

42

Figur 35: Produktsidan av no code webbutiken.

Figur 36: Produktsidan av no code webbutiken.

Produktsidan för webbutiken skapad med no code ger stora och tydliga bilder över de tillgängliga produkterna som finns att beställa. Besökare kan även med ett enkelt knapptryck navigera sig vidare till mer information om produkterna genom att trycka på den specifika produkten man vill ha information om.

43

4.5.3 Beställning

Figur 37: Produktsidan.

Figur 38: Sidan för att slutföra beställningar.

För att utföra en beställning behöver besökaren använda sig av knappen order now som sedan skickar vidare dem till nästkommande sida. Den kommande sidan är den delen som informerar köparen om de varor som är valda och ger dem nu möjligheten att fylla i personuppgifter om leveransadress mm. Sedan är beställningen gjord och så skickas den till databasen som visar att en ny order är gjord på admin-sidan.

44

Figur 39: Kassasidan på no code webbutik.

Figur 40: Kassasidan på no code webbutik.

45

Figur 41: Beställning detaljer på no code webbutik.

Kassa systemet på webbutiken skapad med no code har mer detaljerade delar i sig. Utöver att kunden får infoga sina uppgifter så får de också möjligheten att skapa ett konto som de sedan kan logga in på för att se orderhistorik eller pågående beställningar. De ger också kunden möjligheten att godkänna alla villkor om hanteringen kring deras personuppgifter. Efter en beställning är lagd så går webbutiken vidare till en ny sida som ger alla beställningsdetaljer.

4.5.4 Admin-sida

Figur 42: Admin-sidan till klassisk webbprogrammering webbutiken.

Startsidan av admin-sidan på den klassiskt webbprogrammerade webbutiken visar en tabell som skriver ut alla admin som är lagrade i databasen.

46


Det här även här all hantering kring de existerande admin sker samt att kunna lägga till nya admin. Figur 43 ovan är sidan för att lägga till ny admin i databasen


Figur 44 ovan visar den nya admin som nu är lagrad i databasen och då visas lägst ner på listan.

47


Det går även att uppdatera en admin genom att ändra namnet på användaren eller ändra användarnamnet


Figur 44 ovan visar hur en fullständig ändring på en admin ser ut när den är genomförd.

48


Det är även väldigt simpelt att radera en admin, det är räcker med ett enkelt knapptryck så raderas den permanent från listan och då även från databasen.

49

5 Resultat 5.1 Jämförelse av metoderna I kommande delkapitel kommer resultaten från jämförelsen mellan de två olika webbutikerna redovisas.

5.1.1 Kodrader

Antal kodrader Metod

5425 Klassisk webbprogrammering

0 No code-plattform

Tabell 4: Tabell över kodrader

Det exakta svaret på antalet kodrader kan va svårt att få fram och därför skapades ett uppskattningsvist antal som räknades ut genom medelvärdet av kodrader på majoriteten av samtliga filerna gånger antalet filer.

Medelvärdet: 175

Medelvärdet multiplicerades sedan med antalet kodfiler som var 31 st.

Detta gav ett slutgiltigt resultat på 5425 kodrader.

50

5.1.2 Utvecklingstid

Figur 48: Diagram över utvecklingsdagarna.

Figur 49: Diagram över utvecklingstimmarna.

Figur 48 och 49 visar skillnaderna på antal utvecklingsdagar respektive timmar utvecklingen på de olika webbutikerna varit.

5.2 Användartester I kommande delkapitel kommer resultaten från användartesterna redovisas.

51

5.2.1 Frågor innan testet

Figur 50: Svar från frågor innan användartestet.

Resultatet visade att hälften av deltagarna klassade sig själva som tekniskt kunniga personer och en majoritet med 1 person mer visade sig handla online.

5.2.2 Instruktioner under testet

Resultatet av instruktionerna som givits till deltagarna under testet har sammanställts till tabeller som visar resultatet av båda webbutikerna då samtliga deltagare hade samma resultat till dem båda.

52

Figur 51: Diagram över resultaten av instruktionerna.

Figur 51 visar att en majoritet inte hade svårigheter att följa de instruktioner som blev tilldelade.

5.2.3 Frågor efter testet

Efter testet svarade deltagarna på följande frågor som visas i figur 52. I detta resultat representerar webbutik1 no code och webbutik2 klassisk webbprogrammering.

Figur 52: Sammanfattning kring användartestets slutresultat.

En majoritet gav mer positiv återkoppling gällande den klassiskt programmerade webbutiken.

5.2.4 Användartest på admin-sida

• Klassar du dig själv som en teknisk kunnig person?

Svar: Nej.

Instruktioner:

• Logga in på admin-sidan.

53

• Gå till din produktsida. • Radera en produkt som finns på sidan. • Uppdatera en produkt som finns på sidan. • Lägg till en ny produkt på sidan.

Deltagaren hade inga svårigheter att utföra dessa instruktioner.

Frågor:

• Var det svårt att navigera sig runt på admin-sidan?

Nej.

• Skulle du anse denna admin-sida vara enkel att använda för dig som ägare?

Ja.

• Finns det något du skulle vilja lägga till eller ta bort med admin-sidan?

Nej, allt var tydligt och enkelt.

5.3 Sammanfattande resultat

Tabell 5: Sammanfattande resultat.

54

Tabellen ovan är skapad för att visa de funktionaliteter som tillkommer i de två olika webbutikerna.

55

6 Diskussion Detta delkapitel kommer handla om mina tankar och slutsatser kring projektet.

6.1 Måluppfyllelse I början av projektet skapades mål kring utvecklingen för att kunna uppfylla den nivå som är erforderlig för en c-uppsats. Dessa mål skapades för att kunna göra en jämförsele mellan två olika tillvägagångssätt gällande webbutvecklingsprocessen av klassisk webbprogrammering och no code.

• Skapa användarvänlig webbutik. • Göra mätning av användbarheten i jämförelsen av klassisk webbprogrammering och no

code sidan. • Jämförelse i utvecklingstiden och kodrader av skapandet med klassisk

webbprogrammering och no code.

Alla dessa mål har uppfyllt och redovisas i rapporten.

Hur jag kan dra slutsatsen att webbutikerna kan klassas som användarvänliga är utifrån resultaten från användartesterna som har visat att samtliga inte hade några större svårigheter med navigeringen eller användningen av webbutikerna. Detta visas även i diagrammet nedan. Deltagarna var blandade mellan tekniskt kunniga personer och icke tekniskt kunniga personer men ändå visade slutresultatet av testerna att samtliga ansåg sidan vara användarvänlig.

Figur 53: Diagram kring användarvänlighet.

6.2 Resultat av användartester Resultatet från användartesterna visar att den klassiska webbprogrammerade webbutiken har varit den mest lockande för deltagarna i testet. Däremot var slutförandet av ett köp lättare att

56

utföra på no code webbutiken. Detta visar att även om lättare köp utfördes på no code webbutiken så utgör utseende, design och detaljer mer nytta till en webbutik. Att skapa en webbutik med no code-plattformar ger en viss begräsning till vad man kan uppnå med sin sida och får skaparen att behöva tänka om från “vad vill jag ha” till “vad kan jag ha”. Enligt mig ger detta en försvagad webbapplikation då man i vissa fall kan behöva begränsa sina val och krav på grund av plattformens begränsning. Däremot kan detta ändå vara ett väldigt bra alternativ till icke tekniska personer att göra en startsida som senare med tiden kan vidareutvecklas. Mindre företag som inte har samma resurser, eller företag som inte vill använda mycket resurser till sin webbsida har nu med att hjälpa av no code-plattformar möjligheten att skapa en fullt funktionellt fungerade webbutik för ett mycket billigare pris.

Det var 50% av deltagarna som inte ansåg sig själva vara tekniskt kunniga personer men ändå hade samtliga inte några större svårigheter med att hitta information eller navigera sig runt på webbutikerna. Detta är ett positivt resultat då jag med detta projekt har velat skapa användarvänliga webbutiker som även är anpassade för icke tekniskt kunniga personer.

Det största klagomålet om no code webbutiken som kom från samtliga deltagare var att uppgradera designen på den webbutiken och som tidigare nämnt så kände jag under utvecklingsprocessen en viss begränsning under skapandet. Det fanns rammallar att följa för att designa layouten men även de var begränsade. Däremot med mer kunskap kring plattformen Wordpress som i denna undersökning används så kan det finns en möjlighet till en finare design då kunskapen blir mer bred om möjligheterna som finns.

Användartestet som gjordes på admin-sidan visade att även admin-sidan var användarvänlig och enkel att hantera för kunden som den är skapad till. Kunden klassar inte heller sig själv som en teknisk kunnig person men hade ändå inte några svårigheter att utföra de instruktioner som hon blev tilldelad. Hennes åsikter kring admin-sidan är att inte göra några ändringar då hon anser att alla funktioner som bör finnas är där samt att de är tydligt anvisade med knappar och text. Jag personligen skulle dock kunna tänka mig att utöka designen lite på admin-sidan och kanske göra den lite finare för ögat.

6.3 Uppfyllda tekniska krav I samband med projektets start har jag tillsammans med kunden suttit och diskuterat fram de tekniska krav som kunden vill ska medfölja under utvecklingsprocessen. Kunden har varit väldigt specifik om vad de är ute efter men har även låtit mig ha relativt fria händer för att få utföra mina tankar och idéer.

• Webbutiken ska funktionellt fungera så att kunder kan göra beställningar.

I början av projektet gjordes avgränsningen att på grund av säkerhetsriskerna inte skapa betalningsmöjlighet till den webbutiken som skapats med klassisk webbprogrammering. Detta innebär att en beställning går att lägga men ingen betalning registreras. På grund av att detta står i avgränsningen så blir det inget avböj från detta krav.

• Webbutiken ska automatiskt uppdatera lagersaldo vid köp.

57

• Företaget ska kunna uppdatera sidan med sådant som nya behandlingar, produkter, information och lagersaldo.

• Information om alla tjänster som förteget utför ska finnas med.

Alla krav har blivit uppfyllda. Under projektets gång har dessa krav inte ändrats utan varit fastställda redan från början.

6.4 Metod För att skapa denna jämförelse så användes Wordpress som no code-plattform. Jag valde just denna plattform då det är den mest använda plattformen för webbutveckling. Det var samma tankesätt som gjorde att valet av klassik webbprogrammering blev PHP, HTML och CSS. Att jämföra dessa två olika utvecklingsmetoder anser jag ge en möjlighet till mer korrekt och tydlig slutsats. Dock kan inte andra metoder helt uteslutas och jag vet inte om användningen av andra programmeringsspråk eller plattformar hade visat ett annat resultat än detta. Nackdelen med att endast välja Wordpress och PHP och inte alla metoder gör att jämförelsen inte kan utesluta andra resultat och eftersom tidigare forskning kring detta ämne inte finns så kan denna rapport inte än jämföras med andra metoder.

6.5 Etiska och sociala aspekter Det är oerhört viktigt att anpassa sig till de etiska och sociala aspekterna kring webbutveckling i utvecklingsprocesser som detta projekt och en viktig del i det är att förhålla sig till de krav som finns i GDPR lagen. GDPR är lagen om hanteringen av personuppgifter och har höga krav för att skydda de uppgifter som lagras för säkerhetsriskens skull.

Wordpress är en plattform som arbetar med GDPR lagarna och hjälper oss som användare av deras plattform att förstå och följa dem likaså.

Att skapa en egen webbutik från grunden kräver mer arbete till att förhålla sig till GDPR lagen. I detta fall med den klassiska webbprogrammerade butiken så kommer det behövas mer tillägg för att fullt kunna förhålla sig till lagen. I dagsläget så raderas ingen information som lagrats om inte någon av admin går in och manuellt raderar det. Kunderna som lägger orders har inte heller någon möjlighet till att få veta hur deras personuppgifter lagras eller göra ett samtycke på det. Detta är ingen säkerhetsrisk just nu då denna webbutik inte har lagts ut för allmänheten utan endast arbetar på min lokala dator. Däremot så måste dessa delar vidareutvecklas för att kunna uppfylla lagens krav om webbutiken ska användas.

6.6 Framtida utveckling I kommande delkapitel kommer idéer om vidare utveckling visas, dessa vidareutvecklingar är idéer som kommit från mig som jobbat med projektet men även utifrån svaren från användartesterna.

58

6.6.1 Design

Deltagarna från användartesternas största kritik kring båda webbutikerna var att göra designen finare. Att vidareutveckla designen på webbutikerna kan skapa en bättre upplevelse för besökaren samt ge en mer känsla av lyx genom mer tekniska design delar sådana som bildspel exempelvis.

6.6.2 Generell plattform för produktförsäljning

Projektets syfte har alltid varit att skapa en jämförelse mellan klassisk webbprogrammering och no code för att rekommendera vilka metoder som anses vara mest effektiv för att sedan utveckla en generell sida för produktförsäljning som företag kan använda sig av. Med resultaten som framkommit i denna rapport kan metoden för den generella sidan väljas och sedan utvecklas.

6.6.3 Betalningsmetod

På grund av den korta tidsperioden samt säkerhetsriskerna så skapades det inte en bankkortshantering som betalningsmetod för den webbutik skapad med klassisk webbprogrammering. Som en vidareutveckling till framtiden så skulle den funktionaliteten kunna skapas för att ge kunder möjligheten att utföra fullständiga köp.

6.6.4 Köpa domän

Båda webbutiker under detta projekt har skapats på min localhost och används endast lokalt. För att kunna publicera dessa webbutiker till allmänheten så att deras kunder faktiskt kan ta del av den så behöver man köpa domän.

6.6.5 Säkerhet

En vidareutveckling till framtiden är att skapa en ännu starkare säkerhet byggd på webbutikerna. No code-plattformar har egna inbyggda intrångsskydd, men det enda som nu används på den webbutik byggd med klassisk webbprogrammering är kryptering för lösenord och möjligheten att nå admin-sidan utan att vara inloggad. Det är ett tillfälligt bra säkerhetsskydd men om man skulle vilja publicera denna webbutik på en domän skulle ytterligare datasäkerhet behöva tilläggas.

6.6.6 Orderändringar

På webbutiken skapad med klassisk webbprogrammering kan man välja varor och gå till varukorgen, dock går det inte att gå tillbaka till resterande delar av webbutiken samtidigt som de står lagrade i varukorgen. Detta är en utveckling som är viktig för att ha en enklare webbutik.

59

Referenslista

[1] Cedeo, “Skillnaden mellan low-code och no-code”.

https://www.cedeo.se/kunskapsbanken/effektiviserade- processer/skillnaden-mellan-low-code-och-no-code/ Hämtad 2021-04-29.

[2] Onbird, “Arbeta agilt – vad innebär det?”. https://onbird.se/arbeta-agilt-vad-innebar-det/ Publicerad 2018-03-11. Hämtad 2021-05-05.

[3] Powered Template,”Scrum process diagram – free Google slides theme and PowerPoint template”. https://poweredtemplate.com/scrum-process-diagram-77468 Publicerad 2004-06-18. Hämtad 2021-05-22.

[4] Onbird, “Grunderna i scrum – roller, begrepp och aktiviteter”.

https://onbird.se/grunderna-i-scrum/ Publicerad 2018-03-09. Hämtad 2021-05-05.

[5] Projectsmart,” MoSCoW method”.

https://www.projectsmart.co.uk/moscow-method.php Hämtad 2021-05-05.

[6] Projektforum,”DSDM dynamic systems development method” https://projektforum.se/etikett/moscow/ Publicerad 2015-04-20. Hämtad 2021-05-05.

[7] Utbildning, ”Gantt-schema – allt du behöver veta”.

https://www.utbildning.se/projektledarguiden/gantt-schema-18621 Publicerad 2020-05-07. Hämtad 2021-05-05.

[8] Fortnox, ”Vad är prototyp?”

https://www.fortnox.se/fortnox-foretagsguide/ekonomisk-ordlista/prototyp/

60

Hämtad 2021-05-06. [9] Företagande, ” Brainstorming: Kreativit tänkande i grupp”.

https://www.foretagande.se/brainstorming-kreativt-tankande-i-grupp Publicerad 2010-01-11. Hämtad 2021-05-06.

[10] Aaaa,” Alex Osborn, the father of brainstorming”.

https://www.aaaa.org/timeline-event/74179/ Hämtad 2021-05-06.

[11] Miro,” About the low fidelity prototype template”.

https://miro.com/templates/low-fidelity-prototype/?utm_source%3Dgoogle%26utm_medium%3Dcpc%26utm_campaign%3DS|GOO|NB|SE|ALL-EN|Core%26utm_adgroup=dsa%26utm_custom%3D11808942919%26utm_content%3D485155151453%26utm_term%3D%26matchtype=b%26device=c%26location=1012234&gclid=EAIaIQobChMIgZ2Yhc397wIVjdayCh07xggBEAAYASAAEgKCifD_BwE

Hämtad 2021-05-06. [12] InvisationApp,” Low-fidelety vs. High-fidelety prototyping”

https://www.invisionapp.com/inside-design/low-fi-vs-hi-fi-prototyping/ Publicerad 2018-05-29. Hämtad 2021-05-06.

[13] G2,” Moqups reviews & product details”.

https://www.g2.com/products/moqups/reviews Hämtad 2021-05-06.

[14] Technopedia,” A bried history of web develeopmet”.

https://www.techopedia.com/2/31579/networks/a-brief-history-of-web-development Publicerad 2018-05-01. Hämtad 2021-05-16

[15] Ifj,” A bried history of PHP”

https://ifj.edu.pl/private/krawczyk/php/intro-history.html Hämtad 2021-05-16

[16] Seobility wiki,” Media Queries”

61

https://www.seobility.net/en/wiki/Media_Queries Hämtad 2021-05-22.

[17] A List Apart, ” Responsive web design”.

https://alistapart.com/article/responsive-web-design/ Publicerad 2010-05-25. Hämtad 2021-05-22

[18] Internetmuseum, ”Responsiv design samma innehåll olika skärmar”.

https://www.internetmuseum.se/tidslinjen/responsiv-design-samma-innehall-olika-skarmar/ Hämtad 2021-05-22.

[19] Znet Live,” What is web 2.0?”

https://www.znetlive.com/blog/web-2-0/ Publicerad 2016-05-13. Hämtad 2021-05-24

[20] Znet Live,” What is web 2.0?”

https://www.znetlive.com/blog/web-2-0/ Publicerad 2016-05-13. Hämtad 2021-05-24

[21] Codebots,” What is no code? The pros and cons of no code for software

development”. https://codebots.com/low-code/what-is-no-code-the-pros-and-cons-of-no-code-for-software-development Publicerad 2020-01-16. Hämtad 2021-05-15

[22] Uto Media,” The pros and cons of PHP in website creation”.

https://www.utomedia.sg/the-pros-and-cons-of-php-in-website-creation/ Publicerad 2019-06-21. Hämtad 2021-05-15

[23] Creation,” What is low-code?” https://www.creatio.com/page/low-code Hämtad 2021-05-06

[24] Codebots,” What is no code? The pros and cons of no code for software

development”.

62

https://codebots.com/low-code/what-is-no-code-the-pros-and-cons-of-no-code-for-software-development Publicerad 2020-01-16. Hämtad 2021-05-06

[25] Obviously.ai,” The short, inventive history of no-code and the long future

ahead”. https://www.obviously.ai/post/the-history-of-no-code Hämtad 2021-05-06

[26] David Veksler,” High traffic wordpress architecture using AWS

lightsail” https://davidveksler.com/2019/10/20/high-traffic-wordpress-architecture-using-aws-lightsail/ Hämtad 2021-05-23

[27] Kinsta, ”Vad är WordPress? Här förklaras detta för nybörjare”

https://kinsta.com/se/kunskapsbas/vad-ar-wordpress/ Publicerad 2021-05-20. Hämtad 2021-05-23

[28] WooCommerce,” Build exactly the eCommerce website you want”

https://woocommerce.com/ Hämtad 2021-05-16

[29] Webbdesugnguiden,” PHP-guiden”.

https://www.webbdesignguiden.se/php-guiden/ Hämtad 2021-05-16

[30] Portabla Media, ”HTML”.

https://portablamedia.se/ordlista/html/ Hämtad 2021-05-18.

[31] Hubspot,” Web design 101: How HTML, CSS and JavaScript work”.

https://blog.hubspot.com/marketing/web-design-html-css-javascript Publicerad 2020-10-26. Hämtad 2021-05-03.

[32] Kinsta, ” Vad är MySQL? En nybörjarvänlig förkalring”.

http://kinsta.com/se/kunskapsbas/vad-ar-mysql/

63

Publicerad 2020-10-01. Hämtad 2021-05-03. [33] Png Egg,” Diagram WampServer XAMPP LAMP”

https://www.pngegg.com/en/png-xafgd Hämtad 2021-05-22.

[34] Ifokus, ”Xampp – en server i din dator”.

https://hemsidor.ifokus.se/discussion/1125371/xampp-en-server-i-din-dator Publicerad 2010-06-18. Hämtad 2021-05-03.

[35] Brackets, ”Brackets EOL notice”.

https://en.wikipedia.org/wiki/Brackets_(text_editor) Publicerad 2021-03-01. Hämtad 2021-05-03.

[36] Flat Ui Colors 2,” Chinese Palette”.

https://flatuicolors.com/ Hämtad 2021-05-16.

[37] Omniconvert,” What is … User testing”.

https://www.omniconvert.com/what-is/user-testing/ Publicerad 2019-11-06. Hämtad 2021-05-18.

[38] DB Quest, inc, ”Top reasons to use MySQL”.

http://www.databasequest.com/index.php/product-service/mysql-dbquest Hämtad 2021-05-20.

[39] CSS Solid,” CSS media queries”.

https://www.csssolid.com/css-media-queries.php Hämtad: 2021-05-22.

[40] SearchSecurity,” MD5”.

https://searchsecurity.techtarget.com/definition/MD5 Publicerad: 2017-04-17. Hämtad 2021-05-22.

En jämförelse mellan klassisk webbprogrammering och no code

Documents

Transcript of En jämförelse mellan klassisk webbprogrammering och no code