I denne opgave skal du lære at bygge et lille it-system, en hjemmeside hvor studerende kan mødes om et fagligt emne. På hjemmesiden får man præsenteret et koncept, man kan tilmelde sig begivenheder og events samt tilmelde sig som medlem.

Formålet med forløbet er at give eleverne en oplevelse af hvad det vil sige at bygge et it-system i virkeligheden. Hvilke faser det  typisk indeholder såsom idegenerering, planlægning og produktion. Samtidig får eleverne bekendtskab med CMS systemer som et konkret redskab til at løse opgaven.

Indholdet dækker over flere kernefaglige mål ift udvikling af it-systemer:

• Konstruktion af it-system som løsning til en problemstilling
  • Eleverne skal kunne
    • løse et mindre problem ved at beskrive problemet, samt designe, realisere og afprøve et it-system gennem brugerorienterede teknikker
    • behandle problemstillinger i samspil med andre fag
    • demonstrere viden om fagets identitet og metoder
• Interaktionsdesign
  • Eleverne skal kunne
    • redegøre for udvalgte elementer i et interaktionsdesign, samt realisere udvalgte interaktionsdesign i et konkret it-system og tilpasse eksisterende design og systemer
• Repræsentation og manipulation af data
  • Eleverne skal kunne
    • redegøre for hvordan data kan organiseres i databaser og hvordan databaser anvendes i IT-systemer
• It-sikkerhed, netværk og arkitektur
  • Eleverne skal kunne
    • redegøre for beskyttelse af egen digital identitet og egne data på internettet samt redegøre for tekniske og menneskelige aspekter af it-sikkerhed
    • redegøre for generelle principper bag it-systemers arkitekturer ved udarbejdelse af it systemer og tilpasning af eksisterende it-systemer

Materialet

• Systime, Informatik C
  • Udarbejdelse af et it-system
• Undervisningsobjekt: pre-opsætning af WordPress

Metoden er bygget op som en række mindre øvelser, som følger grundlæggende arbejdsmetoder indenfor systemudvikling:  brainstorm, kravspecifikation, målgrupper, interaktionsdesign, modellering, programmering, test, brugervejledning og dokumentation.

Arbejdet er organiseret i grupper af to. Flere end to i hver gruppe er ikke smart, da eleverne da ikke vil få mulighed for at arbejde konkret i systemet. Enkeltmandsgrupper er en mulighed, hvis nogen har lyst til det, men det gør det sværere at evaluere – og fjerner samarbejdsaspektet.

Evaluering indgår løbende i forhold til de sider eleverne sætter op, som vises og diskuteres både formativt og summativt. Der instrueres en række specifikke evalueringer, hvor eleverne samtidig lærer at bruge et CMS til at evaluere og få feedback udefra.

Sekvensering

Lektion: forberedende øvelser

Materiale: Informatik C: fra idé til færdigt system

Formålet med lektionen er at starte med eleven selv, frem for systemet. Idéen med at lære CMS systemet at kende er ikke at få en masse funktioner og design trukket ned over hovedet. Men det er ofte det der sker, hvis man ikke begynder med at danne sig en slags ramme for hvad man har tænkt sig at udtrykke.

Første lektion holdes derfor på papir – ikke nogen computerskærm, bare nogle skitseøvelser af hvad man har tænkt sig. Øvelserne er opbygget som en idé der tager form, og handler i stigende grad om, hvordan ideerne kan realiseres med et it-system.

Faglige termer til logbog

• Vandfaldsmodellen
• Agile metoder
• Iterative processer

Samtidig skal en systemudvikling rundt om alle faserne:

• planlægning
• udarbejdelse
• evaluering

Se huskeindlæg til metode i systemudvikling her 

Opgave 1: Brainstorm om emne, 5 minutter parvis

Forestil jer, at i vil starte en slags nørdet klub på skolen, som mødes og undersøger et specifikt emne. Det kunne være indenfor alle fag og udover: fx 3d print, kemisk analyse, cellebiologi, basketball, politik, droneflyvning osv osv.

Vælg et fagligt emne som interesserer jer. Brug tre minutter to og to, på at beslutte hvad jeres emne skal være. 

Opgave 2: Kravspecifikation, 10 minutter

Der er altid en chef. Og chefen har sagt, at der skal være

• et nyhedsbrev
• en kontaktside, hvor man kan skrive til jer
• mulighed for at tilmelde sig foreningen/klubben
• mulighed for at tilmelde sig arrangementer på skolen.
• mindst ét produkt i kan sælge

Brug fem minutter på at specificere følgende:

• Hvor ofte skal jeres nyhedsbrev udkomme, og hvad skal det handle om?
• Hvad vil i sælge ifbm jeres koncept? (vælg mindst ét fysisk produkt)
• Hvilke arrangementer vil i afholde, og hvilke krav er der til tilmelding og deltagere (fx aldersbegrænsninger, gebyr)?

Opgave 3: Målgrupper, 5 minutter

Beskriv kort målgrupper for systemet – både primære, sekundære og eventuelle interessenter. Forhold jer desuden kortfattet til, hvordan i kan tiltrække medlemmer af målgruppen til jeres koncept

• Hvem er den primære målgruppe for siden?
• Hvem er sekundære målgrupper/interessenter?
• Hvordan vil i tiltrække nye medlemmer?

Lektion: Interaktionsdesign

Opgave 1: Styrk konceptet

• Find Et navn og en undertitel – to-tre ord som karakteriserer jeres koncept
• Skriv en kort indledning – en elevatortale formet som en forsidetekst på en hjemmeside. Kom ind på:
  • Hvad går konceptet ud på?
  • Hvad er jeres produkt og hvorfor skulle man købe det?
  • Hvilke muligheder er der for tilmelding/arrangementer, og hvad får man ud af det?

Opgave 2:  Strukturdiagram og mock-up

• Strukturdiagram: Skriv en skitse til sidens menu. Husk at tage alt med.
  • Der skal for eksempel være et nyhedsbrev – men hvilke menupunkter hører egentlig med til at man kan lave et nyhedsbrev?
  • Der skal være mindst et produkt – men hvilke menupunkter skal der egentlig til for at man kan købe produkter?  (fx indkøbskurv)
• Mock-up: Tegn en skitse af forsiden på papir.

Lektion: Begivenheder

I vil gerne kunne oprette begivenheder på jeres side – og folk skal kunne se hvad de drejer sig om, tilmelde sig osv osv. Det kan i gøre vha et plugin – en udvidelse til WordPress som fokuserer på at håndtere begivenheder.

Gå ind under Plugins – og søg på event. – find det Plugin som hedder Event Manager,  installér og aktivér. I kan nu se at der er et ny menupunkt under kontrolpanelet.

Øvelse: hvilke events vil i have?

Brug fem minutter på at diskutere hvilke begivenheder i vil have for jeres side. Vælg mindst to kategorier. Tag stilling til følgende:

• Skal begivenheder have en pris (skal der være billetter)?
• Skal begivenheder være tilbagevendende – og med hvilken frekvens?

Øvelse: opret begivenheder

Gå ind under Events i kontrolpanelet og opret mindst fire begivenheder. Vær opmærksom på at bruge kategorier til at emneopdele jeres begivenheder

Øvelse: Sæt event ind på jeres side

• Gå ind under menuen og vælg de af fanerne fra event modulet i gerne vil have med
• Afprøv hele event-funktionen

Lektion: grundlæggende opsætning

• Gå ind på WordPress og vælg et passende tema til jeres side – gerne blandt de temaer i allerede kender.
  • Gode temaer:
    • Christmas Bell
    • Sydney
    • Fukusawa
• Gå ind under udseende/tilpas og sæt siden til at have navnet på jeres koncept og undertitel. Lav andre nødvendige tilpasninger ift billeder og udseende, så det begynder at ligne noget.

• Lav en ny side til at præsentere konceptet
  • Sæt den tekst ind i skrev om konceptet – så sitet har en præsentation på forsiden. Der skal udelukkende være tekst på denne side – i kan altid tilføje mere senere, men ikke nu
  • Gå ind under Siden Kontakt og lav den om så den passer til konceptet
  • Lav en underside til kontaktsiden, hvor i præsenterer jer selv (gerne med fotos)

Lektion: Klubben (Databaser)

Materiale: Kapitel om Databaser i Informatik C (Systime)

Se også database øvelse med kageopskrifter her

Hjemmesiden skal fungere som en klub, hvor man kan tilmelde sig som medlem. I vil derfor gerne have en tilmeldingsformular og en side hvor i kan vise en liste med medlemmerne.

Til det formål skal i bygge en lille database. En meget simpel database, som indeholder oplysninger om klubbens medlemmer. På den måde kan i f.eks trække en liste med deltager-emails, finde ud af hvor mange der interesserer sig for forskellige emner eller andre formål.

Øvelse: hvem er klubbens medlemmer?

Brug fem minutter på at skrive en liste med alle de oplysninger i gerne vil have om hvert medlem af klubben. Brug jeres fantasi – det er den der gør det muligt at skabe en god klub.

1. Fornavn
2. Efternavn
3. Foto
4. Kagefan?
5. Kemifan?
6. …

Øvelse: Entiteter og Attributter

På databasesprog kan man beskrive jeres klubmedlemmer som en entitet med attributter. Databasen i WordPress har mange entiteter, fx brugere, indlæg, sider osv. Men i skal altså lave en ny entitet med jeres klubmedlemmer. Man kan tegne en figur af entiteten og dens attributter sådan her:

Entitet-attribut skitse. Kopiér skabelonen her og lav jeres egen   

Øvelse: Datatyper

I skal nu tage stilling til hvilke datatyper jeres attributter har. Når man skal gemme data i en base, er det nemlig ret vigtigt at være præcis med hvad man gemmer. Lad os sige man vil gemme et fornavn. Så er der ikke grund til at gøre plads til en dansk stil vel? I virkeligheden er der voldsomt mange datatyper, men i behøver ikke sætte jer ind i dem allesammen på dette niveau. I skal tage stilling til om jeres attributter har følgende typer:

• Tekst (kort tekstfelt, for eksempel fornavn)
• Lang tekst (for eksempel præsentation af person)
• Boolean (for eksempel om man er kagefan eller ej, repræsenteres som 0 eller 1)
• Dato
• Numerisk (for eksempel et tal)

Der er et par ting til som skal angives for hver attribut:

• Obligatorisk (skal udfyldes før medlemmet kan oprettes)
• Default (værdi som indsættes som default, hvis der ikke er angivet andet)
• Krypteret (angiver om oplysningen skal gemmes i krypteret form)

Skriv datatyperne på jeres liste fra før, således:

1. Fornavn (Tekst, Obligatorisk)
2. Efternavn (Tekst, Obligatorisk)
3. Foto (Tekst)
4. Kagefan? (Boolean, Default:1)
5. Kemifan? (Boolean, Default: 0)
6. …

Fagterm: Relationer

Vi bygger ikke relationer i denne database, men i skal vide hvad det er. Lad os nu sige at i havde rigtig mange felter der angav medlemmers interesser (heste, kager, kemi, gaming, sociale medier etc). På et tidspunkt ville det gøre medlemstabellen uoverskuelig. Og er der noget vi ikke vil have, er det at databaser bliver uoverskuelige (langsomme søgninger, fejlbehæftede formularer osv).

Derfor kunne vi lave en ny entitet: interesser. Altså en ny tabel, kaldet interesser, og her kunne vi så holde styr på alle de mulige interesser man kunne forestille sig.

Derefter kunne vi lave en relationstabel mellem de to entiteter. Altså en tabel, hvor man lynhurtigt kan slå op hvilke interesser en person har. Det kunne helt konkret kunne se sådan her ud:

Tabel: Medlem

Medlem_nr	Medlem_navn
1	Sofie
2	Per
3	Lars
…	…

Tabel: Interesser

Interesse_nr	Interesse_navn
1	Heste
2	Spil
3	Kemi
…	…

Tabel: Medlem_Interesser

Medlem_nr	Interesse_nr
1	2
1	3
3	2
…	…

Læg for øvrigt mærke til at tabellerne ovenfor begynder med et nummer: medlem_nr og interesse_nr. Dette felt kaldes en primærnøgle – og sådan en skal alle tabeller have. Det er sådan set bare en tæller, der gør det muligt at slå op i tabellen på et unikt nummer. Igen, det er ikke noget i skal bruge her, men i skal vide hvad det betyder.

Øvelse: entitet-relations diagram

Man kan også sætte en databases entiteter og relationer op i et såkaldt enititet-relations diagram, som beskrevet i grundbogen her.

• En entitet er en enhed, der ofte er en enhed i fysisk forstand. Fx. en bil, en person eller et spil.
• En relation er en sammenkobling af to entiteter. Fx. medlem ejer spil – her er ejer relationen.
• Relationsgraden bestemmer forholdet mellem relationerne.
  • 1-M (en-til-mange)
  • M-M (mange-til-mange)
  • 1-1 (en-til-en)

I skal lave en lille øvelse, så i forstår hvad de tre ting består af: eniteter, relationer og attributter. Vi kommer ikke til at implementere det i den konkrete klubøvelse, men I skal lære hvordan man kunne modellere et større scenarie.

Klubben får vokseværk

Lad os sige at klubben var en klub for noget specifikt – fx bukkejagt, ridning, bogorme, mad eller noget andet i selv finder på. Vælg et emne.

Som eksempel her, tager vi bukkejagt.

Medlemmerne af klubben skal nu kunne organisere jagtsæsonen ud fra jeres database. Hvilke entiteter og relationer kunne indgå i sådan en løsning? Brug fem minutter på at skrive ord ned, som har med jagt at gøre (eller brug et selvvalgt emne).

Brug derefter 10 minutter på at organisere jeres entiteter og relationer i et E/R diagram.

Hent skabelonen her, eller vælg selv et tegneprogram.  Lav et E/R diagram af den udvidede klubordning og sæt det ind i jeres logbog.

Øvelse: lav jeres Database i WordPress

• Installér dette plugin: Participants Database
• Gå ind under “Administrér Databasefelter” og lav jeres deltagertabel, så den afspejler jeres design. Slet de felter i ikke skal bruge – og husk at angive om felter skal være obligatoriske, synlige i tilmeldingsformularen etc.
• Lav en ny side, kaldet “Klubben” eller lignende. Beskriv hvorfor det er så lækkert at være med i jeres klub/forening i en kort tekst. Indsæt til sidst denne shortcode: [pdb_signup]
• Lav en nye side kaldet “Medlemmer”. Skriv en kort tekst og indsæt denne shortcode: [pdb_list] (du kan redigere hvad der bliver vist i listen under “Administrér Databasefelter”)
• Lav en ny side kaldet: “Deltagerside”, og indsæt denne shortcode: [pdb_record]

Afprøvning

Nu er i klar til at prøve det hele af. brug noget tid på at rette konceptet til, så det virker enkelt og overbevisende.

Lektion: Flowcharts

I har med klubben implementeret noget funktionalitet, der gør det muligt at tilmelde sig. Undervejs vil i have bemærket at der sker en del ting, når et nyt medlem tilmelder sig. Men præcis hvad? Og i hvilken rækkefølge?

For at planlægge den slags skal man være i stand til at skitsere processer i et interaktionsdesign. Til det formål har man et værktøj kaldet flowcharts, som kan bruges til at beskrive selv meget komplicerede interaktioner.

Øvelse: lav et flowchart over en tilmelding til klubben

Læs indlægget om Flowcharts og lav øvelserne. Sæt et flowchart af en ny tilmelding til jeres klub ind i jeres logbog.

Lektion: Sikkerhed og persondata

Nu har i kunder og medlemer. Og det vil faktisk sige, at i er begyndt at hælde persondata i en database. Sådan nogle er følsomme – for eksempel e-mail adresser og navn koblet med interesser, alder, demografi osv. Derfor skal i lære noget om sikkerhed.

Gå til indlæg om GDPR og sikkerhed

Lektion: Nyhedsbrev

I vil gerne sørge for at folk kan tilmelde sig nyhedsbreve til jeres side. Det kan i gøre vha et plugin – en udvidelse til WordPress som fokuserer på at håndtere tilmeldinger og udsendelser af nyhedsbreve.

Gå ind under plugins og søg på Newsletter – find det plugin som hedder  Email Subscribers & Newsletters, installér og aktivér. I kan nu se at der er et nyt menupunkt i kontrolpanelet.

Øvelse: udfyld relevante indstillinger

Gå ind under menupunktet “settings” – udfyld punkterne på første og anden tab med relevante tekster osv. Snak elementerne igennem undervejs, så får i et godt billede af hvad det er det her med nyhedsbreve egentlig går ud på.

Øvelse: opret en tilmeldingsside

Opret en ny side i kalder nyhedsbrev. Skriv en kort tekst der præsenterer nyhedsbrevet på en måde som giver folk lyst til at bruge det. Brug følgende shortcode til at indsætte en tilmeldingsformular:

[email-subscribers namefield=”YES” desc=”” group=”Public”]

Sæt siden ind i jeres hovedmenu, og kald menupunktet for nyhedsbrev eller lignende.

Øvelse: Opret det første Nyhedsbrev

Brug fem minutter på at finde en god titel samt udvælge en række elementer i vil have med i jeres nyhedsbrev. Hvad skal modtagere få ud af at tilmelde sig? Tænk for eksempel på følgende – men inddrag gerne mere selv:

• Nyheder om gruppens møder
• Nyheder og links om relevante emner
• Tilbud på produkter
• …?

Gå ind under Email Subscribers i kontrolpanelet og vælg templates -add a new template. Skriv jeres nyhedsbrevs titel som en velkomsthilsen og indfør teksten

Mulighed: oversæt termer

Installér dette plugin: Loco Translate. Find derefter filen fra Email subscriptions plugin’et og oversæt relevante termer.

Lektion: produkter

Der skal være mulighed for at sælge ting fra jeres side. Før i går i gang med at implementere det, er det en god idé at lave en skitse af hvordan det skal foregå. Det kan i gøre ved hjælp af et redskab kaldet flowcharts – en nem og overskuelig måde at planlægge en kompliceret interaktion på.

Øvelse: tegn et flowchart af et køb

Læs indlægget om Flowcharts og lav øvelserne. Sæt et pænt flowchart af et køb ind i jeres Interaktionsdesign.

Øvelse: opret jeres første vare

Onlinesalg er en kompliceret affære, men med WordPress kan det faktisk blive overskueligt. Det første i skal gøre er, at vælge et webshop-plugin. Gå ind under plugins og find det der hedder WooCommerce. Det er en af de mest brugte webshop løsninger på markedet, og ifølge kilder er 30% af alle webbutikker drevet af WooCommerce.

With endless flexibility and access to hundreds of free and premium WordPress extensions, WooCommerce now powers 30% of all online stores — more than any other platform.

Plugin beskrivelse på WordPress.com

• Installér og aktiver WooCommerce. Undervejs vil i blive tilbudt at installere nogle andre moduler – det skal i bare sige nej til i første omgang.
• Opret jeres første produkter – brug kategorier, billeder og beskrivelser til at gøre varen interessant.
• Opret både et fysisk og et virtuelt produkt
• Sæt “Shop” punktet ind i menuen.
• Gennemfør et par køb og sammenlign proceduren med jeres flowcharts

Øvelse – rapportér til chefen

Nu vil chefen jo gerne vide hvor meget i har solgt. Gå ind under WooCommerce, og generér en liste med

• Salg sidste uge
• Kunder